/* legend.css — compact tab-strip legend */

.hud-panel-legend {
  bottom: var(--hud-offset);
  left: var(--hud-offset);
  border-radius: 0;
  padding: 0;
  width: min(calc(200px * var(--hud-scale)), calc(100vw - 32px));
  z-index: 10;
  overflow: hidden;
}

/* ── Drag bar ─────────────────────────────────────────────────── */

.legend-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(6px * var(--hud-scale));
  padding: calc(6px * var(--hud-scale)) calc(8px * var(--hud-scale));
  border-bottom: 1px solid var(--hud-line);
  cursor: grab;
  user-select: none;
}

.legend-bar:active {
  cursor: grabbing;
}

/* ── Current mode label ───────────────────────────────────────── */

.legend-current {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--hud-scale));
  flex: 1 1 auto;
  min-width: 0;
}

.legend-title {
  flex: 0 0 auto;
  color: var(--hud-text-soft);
  font-size: var(--hud-panel-header-title-size);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
}

.legend-current-label {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: calc(3px * var(--hud-scale)) calc(7px * var(--hud-scale));
  border-radius: calc(4px * var(--hud-scale));
  border: 1px solid rgba(120, 180, 255, 0.2);
  background: rgba(120, 180, 255, 0.12);
  color: var(--hud-accent-strong);
  font-size: calc(0.68rem * var(--hud-scale));
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* ── Bar action buttons ───────────────────────────────────────── */

.legend-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--hud-gap-xs);
  flex-shrink: 0;
}

.legend-bar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.legend-bar-btn .material-symbols-rounded {
}

/* ── Collapsible list body ────────────────────────────────────── */

.legend-body {
  --hud-body-collapse-gap: calc(4px * var(--hud-scale));
  --hud-body-max-height: calc(220px * var(--hud-scale));
}

/* ── Item list ────────────────────────────────────────────────── */

.legend-list {
  display: flex;
  flex-direction: column;
  padding: calc(4px * var(--hud-scale)) 0;
  overflow-y: auto;
  max-height: calc(220px * var(--hud-scale));
  scrollbar-width: thin;
  scrollbar-color: rgba(160, 186, 216, 0.28) transparent;
}

.legend-list::-webkit-scrollbar { width: 3px; }
.legend-list::-webkit-scrollbar-track { background: transparent; }
.legend-list::-webkit-scrollbar-thumb {
  background: rgba(160, 186, 216, 0.26);
  border-radius: 999px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--hud-scale));
  padding: calc(5px * var(--hud-scale)) calc(10px * var(--hud-scale));
}

.legend-dot {
  flex-shrink: 0;
  width: calc(7px * var(--hud-scale));
  height: calc(7px * var(--hud-scale));
  border-radius: 50%;
  box-shadow: 0 0 4px currentColor;
}

.legend-dot--vessel {
  width: 0;
  height: 0;
  border-radius: 0;
  background: transparent !important;
  border-left: calc(5px * var(--hud-scale)) solid transparent;
  border-right: calc(5px * var(--hud-scale)) solid transparent;
  border-bottom: calc(13px * var(--hud-scale)) solid currentColor;
  color: inherit;
  box-shadow: none;
  transform: rotate(45deg);
}

.legend-label {
  color: var(--hud-text);
  font-size: calc(0.78rem * var(--hud-scale));
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Layout-expanded ──────────────────────────────────────────── */

.earth-app.layout-expanded .hud-panel-legend:not([data-dragged="true"]) {
  left: var(--hud-offset);
  bottom: var(--hud-offset);
  transform: translate(calc(-100% + var(--hud-offset)), calc(100% - var(--hud-offset)));
}

.layout-mode-mobile .hud-panel-legend {
  position: fixed;
  left: 8px;
  bottom: calc(84px + var(--safe-bottom));
  width: min(172px, calc(100vw - 16px));
  z-index: 205;
}

.layout-mode-mobile .legend-list {
  max-height: min(20vh, 180px);
}

.layout-mode-mobile.earth-search-open .hud-panel-legend,
.layout-mode-mobile.earth-settings-open .hud-panel-legend,
.layout-mode-mobile.earth-media-open .hud-panel-legend,
.layout-mode-mobile.earth-info-open .hud-panel-legend {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}