:root{
  --ink:#14232E;
  --ink-soft:#4A5C67;
  --paper:#F2F4F3;
  --card:#FBFCFB;
  --rail:#C8D2CF;
  --signal:#E8A33D;
  --live:#1F7A6B;
  --flag:#B23A48;
  --measure:70ch;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Newsreader",Georgia,serif;
  font-size:17px;
  line-height:1.55;
}

/* 1160 rather than 1080: the three prep columns were wrapping every other line
   at 1080, which is what made the cards so tall. Prose stays capped by
   --measure and the max-widths in the masthead, so only the board widens. */
.wrap{max-width:1160px;margin:0 auto;padding:0 24px 72px}

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

.masthead{padding:44px 0 30px;border-bottom:2px solid var(--ink)}

.masthead .meta{margin-top:24px}

.eyebrow{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 20px;
}

.eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rail)}
.eyebrow a:hover{color:var(--ink)}

h1{
  font-family:"Archivo",system-ui,sans-serif;
  font-weight:800;
  font-size:clamp(2.1rem,6vw,3.6rem);
  line-height:1.02;
  letter-spacing:-.025em;
  margin:0 0 20px;
  max-width:16ch;
}

.standfirst{
  margin:0;
  max-width:56ch;
  font-size:1.12rem;
  color:var(--ink-soft);
}

.meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 28px;
  margin-top:32px;
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* ---------- legend ---------- */

.legend{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin:32px 0 0;
  padding:16px 18px;
  background:rgba(178,58,72,.06);
  border-left:3px solid var(--flag);
  max-width:var(--measure);
}

.legend p{margin:0;font-size:.95rem;color:var(--ink-soft)}

.verify{
  display:inline-block;
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--flag);
  border:1px solid var(--flag);
  border-radius:2px;
  padding:1px 5px;
  white-space:nowrap;
  vertical-align:2px;
}

/* ---------- part tabs ---------- */

.tabs{
  display:flex;
  gap:0;
  margin-top:36px;
  border-bottom:1px solid var(--rail);
}

.tab{
  flex:1 1 0;
  display:block;
  text-align:left;
  background:transparent;
  border:none;
  border-bottom:2px solid transparent;
  border-radius:0;
  padding:16px 20px 14px 0;
  margin-right:36px;
  color:var(--ink-soft);
  cursor:pointer;
  text-transform:none;
  letter-spacing:normal;
  font-size:inherit;
}

.tab:last-child{margin-right:0}
.tab:hover{background:transparent;color:var(--ink)}

.tab[aria-selected="true"]{
  color:var(--ink);
  border-bottom-color:var(--ink);
}

.tab:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}

.tab-mark{
  display:block;
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:4px;
}

.tab[aria-selected="true"] .tab-mark{color:var(--signal)}

.tab-title{
  display:block;
  font-family:"Archivo",system-ui,sans-serif;
  font-weight:600;
  font-size:clamp(1.1rem,2.4vw,1.45rem);
  letter-spacing:-.02em;
  line-height:1.15;
  margin-bottom:6px;
}

.tab .progress{display:block;white-space:normal}

.part{padding-top:26px}

.part-note{margin:0 0 22px;color:var(--ink-soft);max-width:var(--measure);font-size:1rem}

/* ---------- prep board (part A) ---------- */

/* align-items:start so a card is as tall as its own content. Stretching every
   card to the tallest in the row left the short ones half empty. */
.board{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  align-items:start;
}

.card{
  background:var(--card);
  border:1px solid var(--rail);
  border-radius:3px;
  padding:20px 20px 16px;
}

/* Sign-off is the last card and would otherwise sit alone in a row with two
   empty columns beside it. Full width, checks side by side. */
.card-signoff{grid-column:1/-1}

.card-signoff ul.checks{
  columns:2;
  column-gap:32px;
}

.card-signoff ul.checks li{break-inside:avoid}

/* first-child only clears the top border of column one, so clear it per column */
.card-signoff ul.checks li:first-child{border-top:1px solid var(--rail)}

.card > h3{
  font-family:"Archivo",system-ui,sans-serif;
  font-weight:600;
  font-size:1.04rem;
  letter-spacing:-.01em;
  margin:0 0 4px;
}

.card-sub{
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 12px;
}

/* ---------- call rail (part B) ---------- */

.rail{position:relative;padding-left:0}

/* Part B is one column, so it does not benefit from the wider wrap the prep
   board needs. Hold its lines to the reading measure. */
.rail ul.checks,.rail .shot{max-width:var(--measure)}

.stage{position:relative;padding:0 0 44px 44px}

.stage::before{
  content:"";
  position:absolute;
  left:9px;top:6px;bottom:-6px;
  width:2px;
  background:var(--rail);
}

.stage:last-child::before{bottom:auto;height:14px}

.stage::after{
  content:"";
  position:absolute;
  left:4px;top:6px;
  width:12px;height:12px;
  border-radius:50%;
  background:var(--paper);
  border:2px solid var(--ink);
}

.stage[data-live="true"]::after{background:var(--signal);border-color:var(--signal)}

.stage[data-live="true"]::before{background:linear-gradient(var(--signal),var(--rail))}

.stage > h3{
  font-family:"Archivo",system-ui,sans-serif;
  font-weight:600;
  font-size:1.18rem;
  letter-spacing:-.015em;
  margin:0 0 3px;
}

.tick{
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 18px;
}

/* ---------- checklists ---------- */

ul.checks{list-style:none;margin:0;padding:0}

ul.checks li{
  position:relative;
  border-top:1px solid var(--rail);
  padding:0;
}

ul.checks li:first-child{border-top:none}

ul.checks label{
  display:flex;
  gap:11px;
  align-items:flex-start;
  padding:9px 2px;
  cursor:pointer;
  font-size:1rem;
  line-height:1.4;
}

ul.checks input{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  width:17px;height:17px;
  margin:4px 0 0;
  border:1.5px solid var(--ink-soft);
  border-radius:2px;
  background:transparent;
  cursor:pointer;
  display:grid;
  place-content:center;
  transition:background .12s ease,border-color .12s ease;
}

ul.checks input::after{
  content:"";
  width:9px;height:5px;
  border-left:2px solid var(--card);
  border-bottom:2px solid var(--card);
  transform:rotate(-45deg) translate(1px,-1px) scale(0);
  transition:transform .12s ease;
}

ul.checks input:checked{background:var(--live);border-color:var(--live)}
ul.checks input:checked::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
ul.checks input:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
ul.checks input:disabled{opacity:.45;cursor:progress}
ul.checks input:checked ~ span{color:var(--ink-soft);text-decoration:line-through;text-decoration-color:var(--rail)}

ul.checks .why{
  display:block;
  margin-top:3px;
  font-size:.88rem;
  color:var(--ink-soft);
  text-decoration:none;
}

/* who ticked it, and when */
ul.checks .by{
  display:block;
  margin-top:4px;
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--live);
  text-decoration:none;
}

em.term{font-style:normal;font-weight:500;border-bottom:1.5px solid var(--signal);padding-bottom:1px}

/* ---------- callout ---------- */

.callout{
  margin:6px 0 22px;
  padding:18px 20px;
  background:var(--card);
  border:1px solid var(--rail);
  border-left:3px solid var(--signal);
  border-radius:3px;
  max-width:var(--measure);
}

.callout h4{
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin:0 0 8px;
  color:var(--ink-soft);
}

.callout p{margin:0;font-size:.97rem}

/* ---------- screenshot slots ---------- */

.shot{
  margin:8px 0 26px;
  border:1.5px dashed var(--rail);
  border-radius:3px;
  background:repeating-linear-gradient(45deg,transparent,transparent 9px,rgba(200,210,207,.16) 9px,rgba(200,210,207,.16) 18px);
  padding:30px 24px;
  text-align:center;
}

.shot .slot{
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:block;
  margin-bottom:8px;
}

.shot .what{margin:0;font-size:.97rem;color:var(--ink);max-width:52ch;margin-inline:auto}

/* a slot with a real screenshot in it */
.shot.filled{
  margin:8px 0 26px;
  padding:0;
  border:1px solid var(--rail);
  border-radius:3px;
  background:var(--card);
  overflow:hidden;
  text-align:left;
}

.shot.filled img{
  display:block;
  width:100%;
  height:auto;
  border-bottom:1px solid var(--rail);
}

.shot.filled figcaption{padding:14px 18px;font-size:.93rem;color:var(--ink-soft)}

.shot.filled figcaption .slot{margin-bottom:6px}

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

.progress{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  white-space:nowrap;
}

.progress b{color:var(--live);font-weight:500}

/* ---------- signoff ---------- */

.signoff{
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid var(--rail);
  display:grid;
  gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}

.sig label{
  display:block;
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:6px;
}

.sig input{
  width:100%;
  border:none;
  border-bottom:1px solid var(--ink);
  background:transparent;
  font-family:inherit;
  font-size:1rem;
  color:var(--ink);
  padding:4px 2px;
}

.sig input:focus{outline:none;border-bottom-color:var(--signal)}

/* ---------- shared-state chrome (new) ---------- */

.statusbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  gap:10px 20px;
  flex-wrap:wrap;
  padding:10px 24px;
  margin:0 -24px;
  background:rgba(242,244,243,.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rail);
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.statusbar .grow{flex:1 1 auto}

.sync{display:inline-flex;align-items:center;gap:7px}

.sync::before{
  content:"";
  width:7px;height:7px;
  border-radius:50%;
  background:var(--live);
  transition:background .2s ease;
}

.sync[data-state="saving"]::before{background:var(--signal)}
.sync[data-state="error"]::before{background:var(--flag)}

.whoami{
  border:1px solid var(--rail);
  border-radius:2px;
  background:var(--card);
  font-family:inherit;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
  padding:4px 8px;
  width:15ch;
}

.whoami:focus{outline:none;border-color:var(--signal)}

/* ---------- index page ---------- */

.roster{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--rail)}

.roster li{border-bottom:1px solid var(--rail)}

.roster a{
  display:flex;
  align-items:center;
  gap:10px 24px;
  flex-wrap:wrap;
  padding:20px 4px;
  text-decoration:none;
  color:inherit;
}

.roster a:hover{background:var(--card)}

.roster .who{
  font-family:"Archivo",system-ui,sans-serif;
  font-weight:600;
  font-size:1.15rem;
  letter-spacing:-.015em;
  flex:1 1 14ch;
}

.roster .when{
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.bar{
  flex:0 0 160px;
  height:5px;
  background:var(--rail);
  border-radius:3px;
  overflow:hidden;
}

.bar span{display:block;height:100%;background:var(--live);transition:width .3s ease}
.bar[data-complete="true"] span{background:var(--live)}

.newform{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:40px;
  padding:22px 24px;
  background:var(--card);
  border:1px solid var(--rail);
  border-left:3px solid var(--signal);
  border-radius:3px;
}

.newform input{
  flex:1 1 260px;
  border:1px solid var(--rail);
  border-radius:2px;
  padding:10px 12px;
  font-family:inherit;
  font-size:1rem;
  background:var(--paper);
  color:var(--ink);
}

.newform input:focus{outline:none;border-color:var(--signal)}

button{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:10px 18px;
  border:1px solid var(--ink);
  border-radius:2px;
  background:var(--ink);
  color:var(--paper);
  cursor:pointer;
}

button:hover{background:var(--ink-soft);border-color:var(--ink-soft)}
button:disabled{opacity:.5;cursor:not-allowed}

button.quiet{background:transparent;color:var(--ink-soft);border-color:var(--rail)}
button.quiet:hover{background:var(--card);color:var(--ink)}

.empty{
  margin:36px 0 0;
  padding:34px 24px;
  border:1.5px dashed var(--rail);
  border-radius:3px;
  text-align:center;
  color:var(--ink-soft);
}

.notice{
  margin:24px 0 0;
  padding:14px 18px;
  border-left:3px solid var(--flag);
  background:rgba(178,58,72,.06);
  font-size:.95rem;
  color:var(--ink-soft);
}

a{color:var(--live)}

@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 18px 64px}
  .statusbar{margin:0 -18px;padding:10px 18px}
  .masthead{padding:40px 0 30px}
  .stage{padding-left:34px}
  .card{padding:20px 18px 16px}
  .card-signoff ul.checks{columns:1}
  .card-signoff ul.checks li:first-child{border-top:none}
  .bar{flex:1 1 100%}
  .tab{margin-right:18px;padding:14px 0 12px}
  .tab-mark{font-size:10px}
}

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

@media print{
  body{background:#fff;font-size:11pt}
  .wrap{max-width:100%;padding:0}
  .shot{background:none}
  .shot.filled{break-inside:avoid}
  .shot.filled img{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .progress,.statusbar,.newform,button,.tabs{display:none}
  /* printing is for the whole checklist, so both parts come out */
  .part[hidden]{display:block !important}
  .part{padding-top:28px;break-inside:avoid}
  .card,.stage,.callout{break-inside:avoid}
  ul.checks input{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}