/* ============================================================
   Roll Call — shared chrome and instrument-panel styles.
   Linked by /roll-call/ and /roll-call/check/.

   WHY THIS IS A FILE AND NOT AN INLINE <style>
   Every other page in this repo is self-contained, and README.md is right
   that sibling documents drift. Roll Call ships two pages that must agree
   on the annunciator down to the pixel, so the two of them share one
   stylesheet rather than becoming the fourth and fifth hand-copies. The
   Tailwind Play config still has to be inline in each document — the CDN
   script requires it — and that block IS hand-copied, same as everywhere.

   COLOR
   Every value below is a Lineup app token from
   docs/lineup-landing-page-strategy.md Part 3. Nothing new is introduced.
   amber and red are sanctioned there "only if the page ever shows the app's
   exception/QC UI" — the annunciator is exactly that, so they appear here on
   exception states and nowhere decorative. Where a tile needs a wash rather
   than a fill, it is the same token at reduced alpha, not a new hue.

   The design rule the whole panel exists to serve: everything is neutral
   until something needs attention. A matched file is not green. Green is
   reserved for the master GO state and for verified/complete moments,
   exactly as the token table says.
   ============================================================ */

/* ---------- Local fonts — no CDNs, same faces as every other page ---------- */
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 800; font-style: normal; font-display: swap; src: url('/fonts/inter-800.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/jbm-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/jbm-500.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/jbm-700.woff2') format('woff2'); }

/* ---------- Base — same ground rules as every other page ---------- */
html { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body { background-color: #0D1117; color: #FFFFFF; }
::selection { background-color: #00BFFF; color: #0D1117; }
:focus-visible { outline: 2px solid #00BFFF; outline-offset: 3px; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; overflow-wrap: break-word; }
p { text-wrap: pretty; }

.accent-rule { display: block; height: 2px; width: 3rem; background-color: #00BFFF; }

.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8125rem; line-height: 1; letter-spacing: 0.18em;
  font-weight: 700; text-transform: uppercase; color: #00BFFF;
}

.link-editorial { position: relative; display: inline-block; transition: color 0.3s; }
.link-editorial::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s;
}
.link-editorial:hover::after { transform: scaleX(1); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   ANNUNCIATOR
   Five tiles. Four counts and one master state. A count of zero is
   unlit and grey; a count above zero lights its tile. The master tile
   is the only one that ever goes green.
   ============================================================ */
.annunciator {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: #1E2A3A; border: 1px solid #1E2A3A;
  margin: 2rem 0; overflow: hidden;
}
.tile { background: #161B22; padding: 0.9rem 1rem; min-height: 5.25rem; }
.tile .n {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.75rem; line-height: 1.1; font-weight: 500;
  font-variant-numeric: tabular-nums; color: #FFFFFF;
}
.tile .n.idle { color: #4A5568; }
.tile .k { color: #8B949E; font-size: 0.8125rem; margin-top: 0.2rem; line-height: 1.35; }

/* Exception washes — the token hue at low alpha, not a new color. */
.tile.lit-caution { background: rgba(245, 158, 11, 0.10); }
.tile.lit-caution .n { color: #F59E0B; }
.tile.lit-warn { background: rgba(239, 68, 68, 0.12); }
.tile.lit-warn .n { color: #EF4444; }

.tile.master { background: #1C2333; }
.tile.master .n {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem; font-weight: 700; padding-top: 0.35rem;
}
.tile.master.go { background: rgba(34, 197, 94, 0.12); }
.tile.master.go .n { color: #22C55E; }
.tile.master.hold { background: rgba(239, 68, 68, 0.12); }
.tile.master.hold .n { color: #EF4444; }

@media (max-width: 760px) {
  .annunciator { grid-template-columns: repeat(2, 1fr); }
  .tile.master { grid-column: 1 / -1; }
}

/* ============================================================
   STAGES — the gated go/no-go flow
   ============================================================ */
.stage { border: 1px solid #1E2A3A; background: #161B22; margin-bottom: 1rem; scroll-margin-top: 6.5rem; }
.stage.locked { opacity: 0.4; pointer-events: none; }
.stage-head {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.9rem 1.15rem; border-bottom: 1px solid #1E2A3A;
}
.stage-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8125rem; color: #8B949E;
  border: 1px solid #1E2A3A; width: 1.6rem; height: 1.6rem; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.stage.active .stage-num { color: #00BFFF; border-color: #00BFFF; }
.stage.done .stage-num { color: #22C55E; border-color: rgba(34, 197, 94, 0.5); }
.stage-head h2 { font-size: 1rem; font-weight: 700; margin: 0; flex: 1; letter-spacing: -0.005em; }
.stage-head .note {
  color: #8B949E; font-size: 0.8125rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.stage-body { padding: 1.15rem; }

/* ============================================================
   CONTROLS
   ============================================================ */
.btn {
  font-family: 'Inter', system-ui, sans-serif; font-size: 0.9rem; font-weight: 600;
  background: #1C2333; color: #FFFFFF; border: 1px solid #1E2A3A;
  padding: 0.55rem 1rem; cursor: pointer; transition: background 0.2s, border-color 0.2s;
}
.btn:hover:not(:disabled) { background: #22293c; border-color: #00BFFF; }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-primary { background: #0077BB; border-color: #0099E6; color: #FFFFFF; }
.btn-primary:hover:not(:disabled) { background: #0099E6; border-color: #00BFFF; }
.btn-danger { border-color: rgba(239, 68, 68, 0.5); color: #EF4444; }
.btn-danger:hover:not(:disabled) { background: rgba(239, 68, 68, 0.12); border-color: #EF4444; }
.btn-sm { font-size: 0.8125rem; padding: 0.35rem 0.7rem; }

select, input[type=text], input[type=email], textarea {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.85rem;
  background: #0D1117; color: #FFFFFF; border: 1px solid #1E2A3A;
  padding: 0.5rem 0.6rem;
}
input[type=text], input[type=email], textarea { width: 100%; }
textarea { resize: vertical; line-height: 1.5; font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* The optional SPA batch block. A disclosure rather than another stage: it is
   an export of the plan above, not a step in it. */
details.spa { margin-top: 1.15rem; border: 1px solid #1E2A3A; padding: 0.9rem 1rem; background: #0D1117; }
details.spa > summary {
  cursor: pointer; font-weight: 700; font-size: 0.9375rem; color: #FFFFFF; list-style: none;
}
details.spa > summary::-webkit-details-marker { display: none; }
details.spa > summary::before { content: '+ '; color: #00BFFF; font-family: 'JetBrains Mono', ui-monospace, monospace; }
details.spa[open] > summary::before { content: '- '; }
details.spa > summary:hover { color: #00BFFF; }
.field-label { display: block; color: #8B949E; font-size: 0.8125rem; margin-bottom: 0.35rem; }

.row { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: flex-end; }
.row > div { flex: 1; min-width: 12rem; }
.checks { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: 0.9rem; }
.checks label {
  display: flex; align-items: center; gap: 0.45rem;
  color: #FFFFFF; font-size: 0.85rem; cursor: pointer;
}
.actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-top: 1.15rem; }

/* Template token chips */
.tokens { margin-top: 0.65rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tok {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.75rem;
  color: #8B949E; background: #0D1117; border: 1px solid #1E2A3A;
  padding: 0.2rem 0.45rem; cursor: pointer;
}
.tok:hover { color: #00BFFF; border-color: #00BFFF; }

/* ============================================================
   TABLES
   ============================================================ */
.filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.filters .btn[aria-pressed="true"] { background: #00BFFF; color: #0D1117; border-color: #00BFFF; }
.scroller { max-height: 28rem; overflow: auto; border: 1px solid #1E2A3A; }
table { width: 100%; border-collapse: collapse; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.78rem; }
th {
  position: sticky; top: 0; background: #1C2333; color: #8B949E;
  text-align: left; font-weight: 500; padding: 0.55rem 0.75rem;
  border-bottom: 1px solid #1E2A3A;
  font-family: 'Inter', system-ui, sans-serif; font-size: 0.78rem;
}
td { padding: 0.45rem 0.75rem; border-bottom: 1px solid #1E2A3A; vertical-align: top; word-break: break-all; }
tr:last-child td { border-bottom: none; }
td.flag { width: 8rem; white-space: nowrap; font-family: 'Inter', system-ui, sans-serif; font-size: 0.75rem; }
.f-ok { color: #4A5568; }
.f-caution { color: #F59E0B; }
.f-warn { color: #EF4444; }
.f-quiet { color: #4A5568; }

/* ============================================================
   MISC
   ============================================================ */
.progress { height: 2px; background: #1E2A3A; overflow: hidden; margin-top: 0.9rem; }
.progress i { display: block; height: 100%; background: #00BFFF; width: 0; transition: width 0.15s; }
.msg { margin-top: 0.9rem; font-size: 0.85rem; color: #8B949E; }
.msg.err { color: #EF4444; }
.msg.ok { color: #22C55E; }
.msg.warn { color: #F59E0B; }
.hint { color: #8B949E; font-size: 0.85rem; margin: 0 0 0.9rem; }
.sep { height: 1px; background: #1E2A3A; margin: 1.25rem 0; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Account strip */
.strip {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  padding: 0.6rem 0.9rem; border: 1px solid #1E2A3A; background: #161B22;
  font-size: 0.85rem; color: #8B949E;
}
.strip .bal {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: #FFFFFF; font-variant-numeric: tabular-nums;
}
.strip .bal.low { color: #F59E0B; }
.strip .spacer { flex: 1; }

/* Credit packs */
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.9rem; margin-top: 1.15rem; }
.pack { border: 1px solid #1E2A3A; background: #161B22; padding: 1.15rem; position: relative; }
.pack.pack-discounted { border-color: rgba(0, 191, 255, 0.35); }
.pack .files {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.5rem; font-variant-numeric: tabular-nums;
}
.pack .price { color: #8B949E; font-size: 0.85rem; margin: 0.25rem 0 0.15rem; }
.pack .price .was { text-decoration: line-through; color: #4A5568; }
.pack .price .now { color: #FFFFFF; font-weight: 600; }
.pack .rate { color: #8B949E; font-size: 0.8rem; margin-bottom: 0.9rem; }
.pack .rate .save { color: #22C55E; }

/* The one place green appears outside a verified/complete state. Money saved
   is a completed good thing rather than an exception, so it reads correctly —
   but it is a deliberate stretch of the token rule, not an accident. */
.pack .badge {
  position: absolute; top: 0; right: 0;
  font-family: 'Inter', system-ui, sans-serif; font-size: 0.7rem; font-weight: 600;
  color: #0D1117; background: #00BFFF; padding: 0.15rem 0.45rem;
}

/* Beta: packs are shown but not sold. The prices stay at full contrast — they
   are the useful part, and a tester deciding whether to spend an evening on
   this deserves to read them — while the chrome that implies "buy this now"
   backs off. `.btn:disabled` above already dims the button itself. */
.pack.pack-locked { border-color: #1E2A3A; }
.pack.pack-locked .badge { background: #30363D; color: #8B949E; }

/* The note above the packs, when it is explaining why nothing is for sale. */
.note-beta {
  border-left: 2px solid #00BFFF;
  padding-left: 0.7rem;
  color: #C9D1D9;
  max-width: 42rem;
}

/* Sequence position in the review table. The frame a lab takes as the team
   pose is usually _01, so it is marked rather than left to be counted. */
td.seq { width: 8rem; white-space: nowrap; }
.seq-first { color: #FFFFFF; }
.seq-tag {
  font-family: 'Inter', system-ui, sans-serif; font-size: 0.7rem;
  color: #00BFFF; border: 1px solid rgba(0, 191, 255, 0.4);
  padding: 0.05rem 0.3rem; margin-left: 0.3rem;
}