/* 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;
}

/* ── Mode tabs ────────────────────────────────────────────────── */

.legend-tabs {
  display: flex;
  gap: calc(2px * var(--hud-scale));
  flex: 1 1 auto;
  min-width: 0;
}

.legend-tab {
  padding: calc(3px * var(--hud-scale)) calc(7px * var(--hud-scale));
  border-radius: calc(4px * var(--hud-scale));
  border: 1px solid transparent;
  background: transparent;
  color: var(--hud-text-muted);
  font-size: calc(0.68rem * var(--hud-scale));
  font-family: inherit;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
  white-space: nowrap;
}

.legend-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--hud-text);
}

.legend-tab--active {
  background: rgba(120, 180, 255, 0.12);
  border-color: rgba(120, 180, 255, 0.2);
  color: var(--hud-accent-strong);
}

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

.legend-bar-actions {
  display: flex;
  align-items: center;
  gap: calc(2px * var(--hud-scale));
  flex-shrink: 0;
}

.legend-bar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(20px * var(--hud-scale));
  height: calc(20px * var(--hud-scale));
  min-width: calc(20px * var(--hud-scale));
  padding: 0;
  border: none;
  border-radius: calc(4px * var(--hud-scale));
  background: transparent;
  color: var(--hud-text-muted);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.legend-bar-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--hud-text);
}

.legend-bar-btn .material-symbols-rounded {
  font-size: calc(13px * var(--hud-scale));
  line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  pointer-events: none;
}

/* Collapse chevron */
#legend-collapse .material-symbols-rounded {
  transition: transform 0.22s ease;
}

.legend--collapsed #legend-collapse .material-symbols-rounded {
  transform: rotate(180deg);
}

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

.legend-body {
  max-height: calc(220px * var(--hud-scale));
  overflow: hidden;
  transition:
    max-height 0.26s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease;
  opacity: 1;
}

.legend--collapsed .legend-body {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* ── 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-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)));
}