/* console-shell.css
   The ONE console shell: brand, altitude selector, page rail, altitude
   indicator, operator identity. Mounted by js/console-shell.js. There is
   deliberately no second nav anywhere in this repo — pages that need chrome
   mount this. Consumes the canonical ORA token stack only (tokens.base →
   tokens.teglo.light → tokens.ceremonial): colours --color-*, type via the
   three console type tokens below, spacing --space-*, radii --radius-*,
   width --container-max. The only literal px are segmented-control optics
   (3px pill inset, 6px control padding, 20px wordmark height) that sit
   below the spacing grid.
*/

/* ── THE console type scale (JOB 3, 2026-08-18 redesign) ──────────────────
   Exactly THREE sizes across every console surface, carrying hierarchy
   alone. These are ALIASES of the locked --fs-* scale, not new values —
   a constraint, not a second vocabulary. Declared here because every
   console page loads this sheet first.
     display  tile values and page claims
     body     labels, claims, evidence, content, controls
     meta     eyebrows, captions, anchors, chips, timestamps
   No fourth size anywhere: the pre-redesign uses of --fs-sm/--fs-md/--fs-lg
   and the 10/12px glyph literals were folded into these three (fold map in
   the 2026-08-18 console dispatch). */
:root {
  /* Collapsed into the DS Public Sans scale (operator spec 2026-08-25):
     display = H3, body = body1, meta = body2. Body copy was 15/11px and
     "too small and messy"; every component consuming these three tokens
     inherits the new scale with no per-rule edits. */
  --type-display: var(--type-h3-size, 32px);
  --type-body:    var(--type-body1-size, 16px);
  --type-meta:    var(--type-body2-size, 14px);
}

.shell {
  position: sticky; top: 0; z-index: var(--z-raised);
  background: color-mix(in srgb, var(--color-bg-base) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border-subtle);
}
.shell__bar {
  max-width: var(--container-max); margin: 0 auto; padding: var(--space-xs) var(--space-lg);
  display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap;
}
.shell__brand { display: flex; align-items: center; gap: var(--space-xs); flex: none; }
.shell__brand img { height: 20px; /* wordmark asset optics */ width: auto; display: block; }
.shell__brand span {
  font-size: var(--type-meta); color: var(--color-text-secondary);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
}

/* Altitude selector — the vertical switch. Links, not JS state: the URL is
   the lens (?vertical_id=…, the existing convention), so reload/bookmark/
   back all preserve altitude. Inset paddings are segmented-control optics. */
.shell__altitude {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--color-bg-glass); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill); padding: 3px;
  /* Many verticals: the pill row scrolls inside itself; the page never
     scrolls horizontally. */
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.shell__altitude::-webkit-scrollbar { display: none; }
.shell__alt { flex: none; }
.shell__alt {
  font-size: var(--type-body); font-weight: var(--fw-medium);
  color: var(--color-text-secondary); text-decoration: none;
  padding: 6px 14px; border-radius: var(--radius-pill);
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.shell__alt:hover { color: var(--color-text); background: var(--color-bg-surface); }
.shell__alt[aria-current="page"] {
  color: var(--color-text); background: var(--color-bg-surface);
  box-shadow: var(--shadow-sm); border: 1px solid var(--color-border-subtle);
  padding: 5px 13px; /* border compensation for the active pill */
}
.shell__alt--new { color: var(--color-accent); font-weight: var(--fw-semibold); }
.shell__alt--new:hover { color: var(--color-accent); background: var(--accent-bg); }
.shell__alt--vertical { display: inline-flex; align-items: center; gap: 6px; /* mark-to-name optics */ }

/* Vertical identity mark — fixed 16×16 box shared by the selector and the
   platform vertical cards (see js/console-shell.js verticalMark). Logo when
   its image loads, monogram on the vertical's own accent otherwise; the box
   never changes size, so the swap causes zero layout shift. */
.vmark { display: inline-flex; width: 16px; height: 16px; flex: none; align-items: center; justify-content: center; }
.vmark img { width: 16px; height: 16px; object-fit: contain; display: block; border-radius: 3px; /* logo optics */ }
.vmark__mono {
  width: 16px; height: 16px; border-radius: var(--radius-circle);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--type-meta); font-weight: var(--fw-bold); line-height: 1;
  color: var(--color-accent); background: var(--accent-bg);
}

.shell__meta {
  margin-left: auto; display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap;
}
.shell__updated { font-size: var(--type-meta); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.shell__whoami {
  font-size: var(--type-meta); color: var(--color-text-tertiary);
  max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Page rail (2026-08-18): the console's pages, still the ONE nav — the
   shell renders it, the URL carries it (?page=…). Underline treatment so
   it reads as a different axis from the altitude pill. ─────────────────── */
.shell__pages {
  max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-lg);
  display: flex; align-items: center; gap: var(--space-2xs);
  overflow-x: auto; scrollbar-width: none;
}
.shell__pages::-webkit-scrollbar { display: none; }
.shell__page {
  flex: none; display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-size: var(--type-body); color: var(--color-text-secondary); text-decoration: none;
  padding: var(--space-2xs) var(--space-sm) var(--space-xs);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.shell__page:hover { color: var(--color-text); }
.shell__page[aria-current="page"] {
  color: var(--color-text); font-weight: var(--fw-medium);
  border-bottom-color: var(--color-accent);
}
.shell__badge {
  display: inline-grid; place-items: center; min-width: 16px; height: 16px;
  padding: 0 4px; /* numeral optics */ border-radius: var(--radius-pill);
  font-size: var(--type-meta); font-weight: var(--fw-semibold); line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent); background: var(--accent-bg);
}
.shell__badge--danger { color: var(--color-status-danger); background: var(--danger-bg); }

/* Altitude indicator — states where the operator is standing, in words. */
.shell__indicator {
  max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-lg) var(--space-xs);
  font-size: var(--type-meta); color: var(--color-text-tertiary);
}
.shell__indicator b { color: var(--color-text-secondary); font-weight: var(--fw-medium); }

@media (max-width: 720px) {
  .shell__whoami { display: none; }
  .shell__bar { gap: var(--space-xs); }
}