/* 06-components/hud-dock — the live-telemetry dock (gap #2): the server's pulse as a
   collapsible tabbed holo-panel pinned to the edge of the terrain console. Channel
   tabs (ECON · ONLINE · STATS) read like process streams; the panels reuse the
   shipped c-ledger / c-stat / c-tag vocabulary. It carries its OWN opaque scrim
   (gap #3) — a solid --surface fill + keyline, not glow-on-transparent — so it stays
   legible over arbitrary tile colours, dark or bright. Runtime state is .is-collapsed
   (dock) and .is-active (tab); panel visibility uses the shipped u-hidden utility. */
.c-hud-dock {
  position: absolute;
  z-index: 11;
  display: flex;
  flex-direction: column;
  font-family: var(--font-chrome);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--rule));
  border-radius: var(--radius);
  box-shadow:
    0 0 24px color-mix(in srgb, var(--brand) 12%, transparent),
    0 8px 30px color-mix(in srgb, var(--ground) 72%, transparent);
  transition: width var(--dur-base) var(--ease);
}

/* Mobile-first: a bottom sheet spanning the width, never a side rail that eats a
   phone's width. */
.c-hud-dock {
  left: var(--space-xs);
  right: var(--space-xs);
  bottom: var(--space-xs);
  max-height: 58vh;
}

/* Desktop: dock to the right edge as a full-height rail. */
@media (min-width: 47.5rem) {
  .c-hud-dock {
    left: auto;
    top: var(--space-md);
    right: var(--space-md);
    bottom: var(--space-md);
    width: min(340px, 34vw);
    max-height: none;
  }
}

/* The collapse toggle — always visible; it is the spine the dock shrinks to. */
.c-hud-dock__toggle {
  align-self: flex-end;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  width: 100%;
  text-align: right;
  color: var(--ink-dim);
  font-family: var(--font-chrome);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  padding: var(--space-2xs) var(--space-sm);
  cursor: pointer;
}
.c-hud-dock__toggle:hover { color: var(--brand); }

/* Collapsed → the body/footer fold away and the dock becomes a thin spine. */
.c-hud-dock.is-collapsed {
  width: auto;
  bottom: var(--space-xs);
}
@media (min-width: 47.5rem) {
  .c-hud-dock.is-collapsed { bottom: auto; }
}
.c-hud-dock.is-collapsed .c-hud-dock__body,
.c-hud-dock.is-collapsed .c-hud-dock__footer { display: none; }

/* The panel body: header + tabs + the active channel, scrolling within itself. */
.c-hud-dock__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: var(--space-sm);
  padding: var(--pad);
  overflow: hidden;
}

.c-hud-dock__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
}

/* Channel tabs — mono process streams; the active one green, glyph-underlined so it
   never reads by colour alone. */
.c-hud-dock__tablist {
  display: flex;
  gap: var(--space-2xs);
  border-block-end: 1px solid var(--rule);
}
.c-hud-dock__tab {
  background: transparent;
  border: 0;
  border-block-end: 2px solid transparent;
  color: var(--ink-dim);
  font-family: var(--font-chrome);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  padding: var(--space-2xs) var(--space-xs);
  cursor: pointer;
}
.c-hud-dock__tab:hover { color: var(--ink); }
.c-hud-dock__tab.is-active {
  color: var(--brand);
  border-block-end-color: var(--brand);
}

/* Each channel panel scrolls within the dock — a long baltop (up to 20 rows) never
   overflows the glass. */
.c-hud-dock__panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* The Economy channel is gold-keyed (property/money) per the concept. */
.c-hud-dock__panel--value {
  border-inline-start: 2px solid var(--value);
  padding-inline-start: var(--space-sm);
}

.c-hud-dock__title {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-xs);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--ink);
}

.c-hud-dock__loading,
.c-hud-dock__empty {
  color: var(--ink-dim);
  font-size: var(--text-sm);
  margin: 0;
}

.c-hud-dock__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--ink);
}

/* Stats channel — the shipped c-stat grid, forced tabular so counts align. */
.c-hud-dock__stats { --o-grid-gap: var(--space-sm); }
.c-hud-dock__stats .c-stat__n {
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
}

.c-hud-dock__footer {
  border-block-start: 1px solid var(--rule);
  padding: var(--space-sm) var(--pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}