/* ===================================================================
   The Annex Run of Show — stylesheet
   Base reset, design tokens (light + dark), then components.
   =================================================================== */

/* ---------------- base reset ---------------- */

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, video { max-width: 100%; height: auto; }
[hidden] { display: none !important; }

/* ---------------- tokens ----------------
   Light palette on bare :root. The dark palette is redefined twice:
   once for prefers-color-scheme (guarded so an explicit light choice
   still wins) and once for an explicit data-theme="dark" on <html>,
   so a theme toggle can override the OS in either direction.
   ----------------------------------------- */

:root {
  --paper:    #F5F3F1;
  --card:     #FFFFFF;
  --card-alt: #EDEAE7;
  --ink:      #121011;
  --ink-2:    #56504E;
  --ink-3:    #8B8481;
  --rule:     #D6D1CD;
  --rule-hi:  #121011;
  --tally:    #C42B1F;
  --tally-bg: #FBE9E7;
  --done:     #1E7A4C;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:    #131211;
    --card:     #1B1918;
    --card-alt: #232120;
    --ink:      #EFEBE8;
    --ink-2:    #ADA5A1;
    --ink-3:    #7E7672;
    --rule:     #302C2A;
    --rule-hi:  #EFEBE8;
    --tally:    #FF6B5C;
    --tally-bg: #331916;
    --done:     #5CC98D;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper:    #131211;
  --card:     #1B1918;
  --card-alt: #232120;
  --ink:      #EFEBE8;
  --ink-2:    #ADA5A1;
  --ink-3:    #7E7672;
  --rule:     #302C2A;
  --rule-hi:  #EFEBE8;
  --tally:    #FF6B5C;
  --tally-bg: #331916;
  --done:     #5CC98D;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Public Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1000px; margin: 0 auto; padding: 2.75rem 1.4rem 5rem; }

.mono {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* ---------------- masthead ---------------- */

.slug {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tally);
  display: flex;
  align-items: center;
  gap: .55rem;
}
.slug .lamp {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--tally);
  box-shadow: 0 0 0 3px var(--tally-bg);
}

h1 {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: .96;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin: .8rem 0 0;
  text-wrap: balance;
}
.standfirst {
  margin: .9rem 0 0;
  color: var(--ink-2);
  max-width: 60ch;
  font-size: 1rem;
}

.bar-heavy { height: 3px; background: var(--rule-hi); margin-top: 1.6rem; }

/* ---------------- night sheet ---------------- */

.sheet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-top: none;
}
.field { background: var(--card); padding: .65rem .8rem .7rem; }
.field label {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: .6rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .3rem;
}
.field input {
  width: 100%;
  border: none;
  border-bottom: 1px dashed var(--rule);
  background: transparent;
  color: var(--ink);
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: .84rem;
  font-weight: 500;
  padding: .1rem 0 .18rem;
}
.field input::placeholder { color: var(--ink-3); opacity: .55; font-weight: 400; }
.field input:focus-visible { outline: none; border-bottom-color: var(--tally); }

/* ---------------- roles ---------------- */

.roles-head {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin: 1.9rem 0 .55rem;
}
.roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.role { background: var(--card); padding: .7rem .85rem .78rem; }
.role h3 {
  margin: 0 0 .22rem;
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: .66rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink);
}
.role p { margin: 0; font-size: .84rem; line-height: 1.42; color: var(--ink-2); }
.gloss {
  display: block;
  margin-top: .4rem;
  padding-left: .6rem;
  border-left: 2px solid var(--rule);
  font-size: .78rem;
  line-height: 1.38;
  color: var(--ink-3);
}
.roles-note { margin: .7rem 0 0; font-size: .82rem; color: var(--ink-3); max-width: 68ch; }
.roles-note b { color: var(--ink-2); font-weight: 600; }

/* ---------------- progress rail ---------------- */

.rail {
  position: sticky; top: 0; z-index: 10;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: .8rem 0 .75rem;
  margin-top: 2.4rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.track {
  flex: 1 1 200px; height: 5px; min-width: 120px;
  background: var(--card-alt);
  overflow: hidden;
}
.track i { display: block; height: 100%; width: 0; background: var(--done); transition: width .18s ease; }
.rail .tally-note {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: .7rem; letter-spacing: .06em; color: var(--ink-2);
  white-space: nowrap;
}
.rail .tally-note b { color: var(--ink); font-weight: 700; }
.rail .gates-left { color: var(--tally); }

.btn {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); background: var(--card);
  border: 1px solid var(--rule); padding: .4rem .6rem; cursor: pointer;
}
.btn:hover { border-color: var(--ink-3); color: var(--ink); }
.btn:focus-visible { outline: 2px solid var(--tally); outline-offset: 1px; }

/* ---------------- phases ---------------- */

.phase {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 0 2.2rem;
  padding: 2.2rem 0 .4rem;
  border-top: 1px solid var(--rule);
}
.phase:first-of-type { border-top: none; }

.tc {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .04em;
  color: var(--tally);
  padding-top: .2rem;
}
.tc small {
  display: block; font-weight: 400; font-size: .64rem;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-3); margin-top: .35rem;
}

.phase-body { min-width: 0; }

.phase-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.phase-head h2 {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700; font-size: 1.28rem; letter-spacing: -.015em;
  text-transform: uppercase; margin: 0;
}
.phase-head .pct {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: .68rem; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.phase-note { margin: .45rem 0 0; color: var(--ink-2); font-size: .93rem; max-width: 62ch; }

ul.checks { list-style: none; margin: 1.05rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
ul.checks > li { border-bottom: 1px solid var(--rule); }

.check { display: flex; gap: .75rem; padding: .6rem .2rem .65rem 0; cursor: pointer; align-items: flex-start; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.box {
  flex: none; width: 1.05rem; height: 1.05rem; margin-top: .12rem;
  border: 1.5px solid var(--ink-3); background: var(--card);
  display: grid; place-items: center;
}
.box::after {
  content: ""; width: .5rem; height: .26rem;
  border-left: 2px solid var(--card); border-bottom: 2px solid var(--card);
  transform: rotate(-45deg) translate(1px, -1px); opacity: 0;
}
.check input:checked ~ .box { background: var(--done); border-color: var(--done); }
.check input:checked ~ .box::after { opacity: 1; }
.check input:focus-visible ~ .box { outline: 2px solid var(--tally); outline-offset: 2px; }
.check input:checked ~ .txt { color: var(--ink-3); }
.check input:checked ~ .txt em { opacity: .6; }

.txt { font-size: .95rem; line-height: 1.45; }
.txt em { font-style: normal; color: var(--ink-3); display: block; font-size: .84rem; margin-top: .15rem; }
.txt strong { font-weight: 700; color: inherit; }
.kbd {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: .82em;
  background: var(--card-alt);
  border: 1px solid var(--rule);
  padding: .02em .28em;
}
.who {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--rule); padding: .1rem .3rem;
  margin-left: .4rem; white-space: nowrap; vertical-align: .1em;
}

li.gate { background: var(--tally-bg); }
li.gate .box { border-color: var(--tally); }
li.gate .txt::before {
  content: "HARD GATE";
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: .58rem; font-weight: 700; letter-spacing: .13em;
  color: var(--tally); display: block; margin-bottom: .15rem;
}
li.gate .check { padding-left: .7rem; padding-right: .7rem; }

/* ---------------- tables ---------------- */

.scroll { overflow-x: auto; margin-top: 1.05rem; border: 1px solid var(--rule); }
table { border-collapse: collapse; width: 100%; min-width: 560px; background: var(--card); }
th, td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); background: var(--card-alt); border-bottom-color: var(--rule);
}
tbody tr:last-child td { border-bottom: none; }
td { font-size: .89rem; color: var(--ink-2); }
td:first-child { color: var(--ink); font-weight: 600; }
td.t { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--ink); white-space: nowrap; }

.rule-note {
  margin: .95rem 0 0; font-size: .88rem; color: var(--ink-2);
  border-left: 3px solid var(--tally); padding-left: .8rem; max-width: 62ch;
}
.rule-note strong { color: var(--ink); font-weight: 700; }

footer {
  margin-top: 3rem; padding-top: 1.1rem; border-top: 3px solid var(--rule-hi);
  font-size: .85rem; color: var(--ink-3); max-width: 68ch;
}
footer strong { color: var(--ink-2); }

/* ---------------- responsive ---------------- */

@media (max-width: 720px) {
  .wrap { padding: 2rem 1rem 3.5rem; }
  .phase { grid-template-columns: 1fr; gap: .5rem; padding-top: 1.8rem; }
  .tc { display: flex; gap: .7rem; align-items: baseline; }
  .tc small { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------------- print ---------------- */

@media print {
  .rail, .btn { display: none; }
  body { background: #fff; color: #000; }
  .phase { break-inside: avoid; }
}