/* Vermillion Avionics components, shared by the landing page (b/) and the playtest page. Classes documented in HUD_SPEC.md §6. */
@import url("tokens.css");

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
img, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
::selection { background: var(--vx-ice); color: var(--vx-void); }
:focus-visible { outline: var(--vx-stroke) solid var(--vx-ice); outline-offset: 3px; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: 8px; z-index: 100; background: var(--vx-ink); color: var(--vx-void); padding: 8px 12px; }

/* ---------- type primitives ---------- */
.label {
  font: 500 var(--vx-fs-label)/1.3 var(--vx-font-mono);
  letter-spacing: var(--vx-track-label); text-transform: uppercase; color: var(--vx-ink-2);
}
.label--dim { color: var(--vx-ink-3); }
.readout { font: 500 var(--vx-fs-readout)/1.2 var(--vx-font-mono); font-variant-numeric: tabular-nums; color: var(--vx-ink); }
.display, .headline {
  font-family: var(--vx-font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--vx-track-display); line-height: 0.9; color: var(--vx-ink); text-wrap: balance;
}
.display { font-size: var(--vx-fs-display); font-stretch: var(--vx-stretch-display); }
.display--md { font-size: var(--vx-fs-display-md); }
.display span, .headline span { color: var(--vx-ink-3); }
.display .t-threat { color: var(--vx-threat); }
.headline { font-size: var(--vx-fs-headline); font-stretch: var(--vx-stretch-head); line-height: 0.95; }
.headline span.t-threat, .display span.t-threat { color: var(--vx-threat); }
.lede { color: var(--vx-ink-2); max-width: 58ch; font-size: var(--vx-fs-body); }
.note { font: 400 var(--vx-fs-micro)/1.5 var(--vx-font-mono); letter-spacing: 0.06em; color: var(--vx-ink-2); }
.t-threat { color: var(--vx-threat); }
.t-warn { color: var(--vx-caution); }
.t-ore { color: var(--vx-ore); }
.t-ok { color: var(--vx-ok); }
.t-ice { color: var(--vx-ice); }

.eyebrow { display: flex; align-items: center; gap: 12px; font: 500 var(--vx-fs-label)/1 var(--vx-font-mono);
  letter-spacing: var(--vx-track-label); text-transform: uppercase; color: var(--vx-ink-2); }
.eyebrow b { color: var(--vx-ink); font-weight: 500; padding: 4px 6px; border: var(--vx-hair) solid var(--vx-line-2); }
.eyebrow__rule { flex: 1; height: var(--vx-hair); background: var(--vx-line); min-width: 24px; transform-origin: left; }
.eyebrow__state { color: var(--vx-ink-3); }

/* ---------- module: cut-corner panel with bracket corners ---------- */
.module {
  position: relative; background: var(--vx-panel); border: var(--vx-hair) solid var(--vx-line);
  clip-path: polygon(0 0, calc(100% - var(--vx-cut)) 0, 100% var(--vx-cut), 100% 100%, var(--vx-cut) 100%, 0 calc(100% - var(--vx-cut)));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.module::before, .module::after {
  /* brackets on the two uncut corners; the cuts get a hairline bevel */
  content: ""; position: absolute; width: var(--vx-bracket); height: var(--vx-bracket); pointer-events: none;
  border: var(--vx-stroke) solid var(--vx-ink-2);
}
.module::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.module::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.module__head { display: flex; align-items: center; gap: 10px; padding: 10px var(--vx-pad) 10px var(--vx-pad);
  border-bottom: var(--vx-hair) solid var(--vx-line); min-height: 40px; }
.module__idx { font: 500 var(--vx-fs-micro)/1 var(--vx-font-mono); color: var(--vx-void); background: var(--vx-ink-2);
  padding: 3px 5px; letter-spacing: 0.08em; }
.module__state { margin-left: auto; font: 500 var(--vx-fs-micro)/1 var(--vx-font-mono); letter-spacing: var(--vx-track-label);
  text-transform: uppercase; color: var(--vx-ink-3); }

/* ---------- bracket frame for imagery ---------- */
.frame { position: relative; margin: 0; padding: 6px; }
.frame img, .frame video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--vx-deep); }
.frame::before, .frame::after { content: ""; position: absolute; width: var(--vx-bracket-lg); height: var(--vx-bracket-lg);
  border: var(--vx-stroke) solid var(--vx-ink-2); pointer-events: none; }
.frame::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.frame::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.frame--threat::before, .frame--threat::after { border-color: var(--vx-threat); }
.frame figcaption { position: absolute; left: 18px; bottom: 16px; font: 500 var(--vx-fs-micro)/1 var(--vx-font-mono);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--vx-ink); background: var(--vx-scrim); padding: 5px 7px; }
.bracket { position: absolute; width: var(--vx-bracket-lg); height: var(--vx-bracket-lg); border: var(--vx-stroke) solid var(--vx-ink); pointer-events: none; }
.bracket--tl { left: 10px; top: 10px; border-right: 0; border-bottom: 0; }
.bracket--tr { right: 10px; top: 10px; border-left: 0; border-bottom: 0; }
.bracket--bl { left: 10px; bottom: 10px; border-right: 0; border-top: 0; }
.bracket--br { right: 10px; bottom: 10px; border-left: 0; border-top: 0; }

/* ---------- chips, glyphs ---------- */
.chip { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--vx-fs-label)/1 var(--vx-font-mono);
  letter-spacing: var(--vx-track-label); text-transform: uppercase; color: var(--c, var(--vx-ink));
  padding: 6px 9px 6px 8px; border: var(--vx-hair) solid color-mix(in srgb, var(--c, var(--vx-ink)) 45%, transparent);
  background: color-mix(in srgb, var(--c, var(--vx-ink)) 8%, transparent); transition: color var(--vx-t-base), border-color var(--vx-t-base), background var(--vx-t-base); }
.chip i { width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); flex: none; }
.glyph { display: inline-block; width: 10px; height: 10px; margin-right: 12px; vertical-align: 0; }
.glyph--hostile { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 10px solid var(--vx-threat); }
.warn-glyph { display: inline-block; width: 14px; height: 14px; flex: none; border: var(--vx-stroke) solid var(--vx-threat);
  transform: rotate(45deg); position: relative; }
.warn-glyph::after { content: ""; position: absolute; inset: 3px; background: var(--vx-threat); }

/* ---------- buttons ---------- */
.btn { --b: var(--vx-ink); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 18px; border: var(--vx-hair) solid var(--vx-line-2); background: transparent; color: var(--vx-ink);
  font: 500 var(--vx-fs-label)/1 var(--vx-font-mono); letter-spacing: var(--vx-track-label); text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: background var(--vx-t-fast), color var(--vx-t-fast), border-color var(--vx-t-fast); }
.btn:hover { border-color: var(--vx-ink); }
.btn--sm { min-height: 30px; padding: 0 12px; font-size: var(--vx-fs-micro); }
.btn--primary { min-height: 60px; padding: 0 30px; background: var(--vx-ink); color: var(--vx-void); border-color: var(--vx-ink);
  font: 600 22px/1 var(--vx-font-display); font-stretch: var(--vx-stretch-head); letter-spacing: 0.14em; }
.btn--primary::before, .btn--primary::after { content: ""; position: absolute; top: -7px; bottom: -7px; width: 10px;
  border: var(--vx-stroke) solid var(--vx-ink); transition: transform var(--vx-t-base) var(--vx-ease-settle); }
.btn--primary::before { left: -8px; border-right: 0; }
.btn--primary::after { right: -8px; border-left: 0; }
.btn--primary:hover { background: #fff; }
.btn--primary:hover::before { transform: translateX(-5px); }
.btn--primary:hover::after { transform: translateX(5px); }
.btn--primary .btn__key { color: rgba(5, 7, 11, 0.38); font-weight: 400; }
.btn--primary { flex-direction: column; gap: 5px; padding-top: 10px; padding-bottom: 10px; }
.btn__main { display: flex; gap: 10px; }
.btn__sub { font: 600 15px/1 var(--vx-font-display); font-stretch: var(--vx-stretch-head); letter-spacing: 0.12em; color: var(--vx-void); }
.btn--lg { min-height: 72px; padding: 0 44px; font-size: 26px; }
.btn--ghost { color: var(--vx-ink-2); }
.btn--ghost:hover { color: var(--vx-ink); }
.btn--threat { color: var(--vx-threat-ink); border-color: color-mix(in srgb, var(--vx-threat) 60%, transparent); background: var(--vx-threat-fill); }
.btn--threat:hover { background: var(--vx-threat); color: var(--vx-void); border-color: var(--vx-threat); }
.btn[aria-disabled="true"] { color: var(--vx-ink-3); border-style: dashed; cursor: default; }
.keycap { display: inline-grid; place-items: center; width: 26px; height: 26px; border: var(--vx-hair) solid var(--vx-ink-2);
  border-bottom-width: 3px; font: 500 12px/1 var(--vx-font-mono); color: var(--vx-ink); }

/* ---------- top bar ---------- */
.topbar { position: fixed; z-index: 50; inset: 0 0 auto 0; height: var(--top, 48px); display: grid;
  grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 0 20px;
  background: linear-gradient(rgba(5, 7, 11, 0.94), rgba(5, 7, 11, 0.78)); border-bottom: var(--vx-hair) solid var(--vx-line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--vx-hair);
  background: linear-gradient(90deg, transparent, var(--tier, var(--vx-sec-secure)) 50%, transparent); opacity: 0.55; transition: background var(--vx-t-slow); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.brand__tick { width: 10px; height: 18px; background: var(--vx-brand); clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%); flex: none; }
.brand__name { font: 600 16px/1 var(--vx-font-display); font-stretch: var(--vx-stretch-head); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.brand__sub { font: 500 var(--vx-fs-micro)/1 var(--vx-font-mono); letter-spacing: var(--vx-track-label); text-transform: uppercase;
  color: var(--vx-ink-3); padding-left: 12px; border-left: var(--vx-hair) solid var(--vx-line-2); white-space: nowrap; }
.topbar__sector { display: flex; align-items: center; gap: 14px; transition: opacity var(--vx-t-base); }
body.on-route .topbar__sector { opacity: 0; pointer-events: none; }
.topbar__threat { font-size: var(--vx-fs-micro); color: var(--vx-ink-3); }
.topbar__threat b { font-weight: 500; color: var(--tier, var(--vx-sec-secure)); transition: color var(--vx-t-slow); }
.btn--solid { background: var(--vx-ink); color: var(--vx-void); border-color: var(--vx-ink); }
.btn--solid:hover { background: #fff; }
.topbar__right { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.status { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--vx-fs-label)/1 var(--vx-font-mono);
  letter-spacing: var(--vx-track-label); text-transform: uppercase; color: var(--vx-ok); white-space: nowrap; }
.status__dot { width: 6px; height: 6px; background: var(--vx-ok); border-radius: 50%; box-shadow: 0 0 0 3px rgba(147, 217, 164, 0.18); }

.threat { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.threat i { display: block; width: 3px; height: 8px; background: var(--vx-line); transition: background var(--vx-t-base) var(--vx-ease-out), height var(--vx-t-base) var(--vx-ease-out); }
.threat i.on { background: var(--seg); }
.threat i.top { height: 14px; }

/* ---------- readouts, segmented toggle, text link, warning band ---------- */
.linkbtn { border: 0; padding: 0; background: none; color: var(--vx-ink-2); font: inherit; cursor: pointer; text-decoration: underline;
  text-decoration-color: var(--vx-line-2); text-underline-offset: 3px; }
.linkbtn:hover { color: var(--vx-ink); }
.readouts { display: grid; gap: 0; border-top: var(--vx-hair) solid var(--vx-line); }
.readouts > div { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-bottom: var(--vx-hair) solid var(--vx-line); }
.readouts dt { font: 500 var(--vx-fs-micro)/1 var(--vx-font-mono); letter-spacing: var(--vx-track-label); text-transform: uppercase; color: var(--vx-ink-3); }
.readouts dd { font: 500 var(--vx-fs-readout)/1 var(--vx-font-mono); font-variant-numeric: tabular-nums; text-transform: uppercase; transition: color var(--vx-t-base); }
.readouts dd.hot { color: var(--vx-caution); }
.seg { margin-left: auto; display: flex; border: var(--vx-hair) solid var(--vx-line-2); }
.seg button { border: 0; background: none; padding: 7px 10px; font: 500 var(--vx-fs-micro)/1 var(--vx-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--vx-ink-3); cursor: pointer; }
.seg button + button { border-left: var(--vx-hair) solid var(--vx-line-2); }
.seg button[aria-pressed="true"] { background: var(--vx-ink); color: var(--vx-void); }
.alert { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: var(--vx-hair) solid color-mix(in srgb, var(--vx-threat) 55%, transparent);
  background: var(--vx-threat-fill); color: var(--vx-threat-ink); font: 500 var(--vx-fs-label)/1 var(--vx-font-mono); letter-spacing: var(--vx-track-label); text-transform: uppercase; }
.alert:not([hidden]) { animation: heard 900ms steps(1) 1; }
.alert__rule { flex: 1; height: var(--vx-hair); background: repeating-linear-gradient(90deg, var(--vx-threat) 0 6px, transparent 6px 10px); opacity: 0.6; }
@keyframes heard { 0%, 30%, 60% { background: rgba(240, 74, 50, 0.32); } 15%, 45%, 100% { background: var(--vx-threat-fill); } }