/* ============================================================
   Playbook — diagnostic panel
   Paper stock: pale institutional green-grey, like medical form stock.
   Type: Newsreader (display) / IBM Plex Sans (body) / IBM Plex Mono (data)
   Colour is semantic only. Green keeps, red kills, amber warns.
   ============================================================ */

:root {
  --paper:      #EDF1EC;
  --card:       #FAFCFA;
  --card-sunk:  #E4EAE4;
  --ink:        #14181A;
  --ink-2:      #3D4A45;
  --muted:      #6A7873;
  --rule:       #CBD6CC;
  --rule-soft:  #DCE4DC;

  --keep:       #1F6B4A;
  --keep-bg:    #E2EFE7;
  --kill:       #A93520;
  --kill-bg:    #F6E4E0;
  --watch:      #8A6310;
  --watch-bg:   #F4EBD8;
  --accent:     #1F3A5F;
  --accent-bg:  #E1E8F1;

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "Newsreader", ui-serif, Georgia, serif;

  --nav-w: 15.5rem;
  --measure: 68ch;
  --radius: 3px;
  --shadow: 0 1px 2px rgba(20,24,26,.05), 0 6px 20px -12px rgba(20,24,26,.18);
}

:root[data-theme="dark"] {
  --paper:      #0E1210;
  --card:       #161B18;
  --card-sunk:  #1D2320;
  --ink:        #E8EEE9;
  --ink-2:      #B4C0B8;
  --muted:      #86958C;
  --rule:       #2C342F;
  --rule-soft:  #232A26;

  --keep:       #6FCB9B;
  --keep-bg:    #16281F;
  --kill:       #E8836C;
  --kill-bg:    #2C1A16;
  --watch:      #D9AC53;
  --watch-bg:   #2A2213;
  --accent:     #8FB3DE;
  --accent-bg:  #17202C;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px -12px rgba(0,0,0,.7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#0E1210; --card:#161B18; --card-sunk:#1D2320;
    --ink:#E8EEE9; --ink-2:#B4C0B8; --muted:#86958C;
    --rule:#2C342F; --rule-soft:#232A26;
    --keep:#6FCB9B; --keep-bg:#16281F;
    --kill:#E8836C; --kill-bg:#2C1A16;
    --watch:#D9AC53; --watch-bg:#2A2213;
    --accent:#8FB3DE; --accent-bg:#17202C;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px -12px rgba(0,0,0,.7);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.62 var(--sans);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}

/* ---------- Chart-paper grain: a faint ruled baseline, like form stock ---- */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(var(--rule-soft) 1px, transparent 1px);
  background-size: 100% 2rem;
  opacity: .5;
}

/* ============================ NAV ======================================== */
.nav {
  position: fixed; inset: 0 auto 0 0; width: var(--nav-w); z-index: 40;
  background: var(--card); border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; overflow-y: auto;
}
.nav__head { padding: 1.5rem 1.25rem 1rem; border-bottom: 1px solid var(--rule-soft); }
.nav__mark {
  font: 500 .625rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); display: block; margin-bottom: .5rem;
}
.nav__title { font: 400 1.375rem/1.15 var(--serif); margin: 0; letter-spacing: -.01em; }
.nav__sub { font: 400 .75rem/1.4 var(--sans); color: var(--muted); margin: .375rem 0 0; }

.nav__list { list-style: none; margin: 0; padding: .75rem 0; flex: 1; }
.nav__link {
  display: flex; gap: .625rem; align-items: baseline;
  padding: .5rem 1.25rem; text-decoration: none; color: var(--ink-2);
  font-size: .875rem; border-left: 2px solid transparent; transition: background .15s, color .15s;
}
.nav__link:hover { background: var(--card-sunk); color: var(--ink); }
.nav__link[aria-current="page"] {
  border-left-color: var(--accent); background: var(--accent-bg);
  color: var(--ink); font-weight: 500;
}
.nav__num { font: 500 .6875rem/1 var(--mono); color: var(--muted); min-width: 1.25rem; }
.nav__link[aria-current="page"] .nav__num { color: var(--accent); }

.nav__foot { padding: 1rem 1.25rem; border-top: 1px solid var(--rule-soft); display: flex; gap: .5rem; align-items: center; }

.themebtn, .navbtn {
  font: 500 .6875rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  background: var(--card-sunk); color: var(--ink-2); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: .5rem .625rem; cursor: pointer;
}
.themebtn:hover, .navbtn:hover { color: var(--ink); border-color: var(--muted); }

/* mobile bar */
.topbar { display: none; }
.nav__scrim { display: none; }

@media (max-width: 900px) {
  .topbar {
    display: flex; position: sticky; top: 0; z-index: 50; align-items: center; gap: .75rem;
    padding: .75rem 1rem; background: var(--card); border-bottom: 1px solid var(--rule);
  }
  .topbar__title { font: 400 1.0625rem/1 var(--serif); margin: 0; flex: 1; }
  .nav {
    transform: translateX(-100%); transition: transform .22s ease; width: 17rem;
    box-shadow: var(--shadow);
  }
  .nav[data-open="true"] { transform: none; }
  .nav__scrim[data-open="true"] {
    display: block; position: fixed; inset: 0; z-index: 39; background: rgba(10,14,12,.42);
  }
}

/* ============================ SHELL ===================================== */
.shell { margin-left: var(--nav-w); position: relative; z-index: 1; }
@media (max-width: 900px) { .shell { margin-left: 0; } }

.wrap { max-width: 60rem; margin: 0 auto; padding: 3.5rem 2rem 6rem; }
@media (max-width: 700px) { .wrap { padding: 2rem 1.125rem 4rem; } }

.prose { max-width: var(--measure); }

/* ============================ TYPE ====================================== */
.eyebrow {
  font: 500 .6875rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); display: block; margin-bottom: .875rem;
}
h1 {
  font: 400 clamp(2.125rem, 5vw, 3.125rem)/1.06 var(--serif);
  letter-spacing: -.022em; margin: 0 0 1rem; text-wrap: balance;
}
h2 {
  font: 400 clamp(1.5rem, 3vw, 1.9375rem)/1.15 var(--serif);
  letter-spacing: -.015em; margin: 3.5rem 0 1rem; text-wrap: balance;
}
h3 { font: 600 1.0625rem/1.35 var(--sans); margin: 2.25rem 0 .625rem; letter-spacing: -.005em; }
h4 { font: 600 .9375rem/1.4 var(--sans); margin: 1.5rem 0 .5rem; }
p { margin: 0 0 1.125rem; }
.lede { font-size: 1.1875rem; line-height: 1.55; color: var(--ink-2); }
a { color: var(--accent); text-underline-offset: .18em; }
strong { font-weight: 600; }
small { font-size: .8125rem; color: var(--muted); }

.rule { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }

ul, ol { padding-left: 1.25rem; margin: 0 0 1.125rem; }
li { margin-bottom: .5rem; }

/* ============================ TAGS ====================================== */
.tag {
  display: inline-flex; align-items: center; gap: .3125rem; vertical-align: middle;
  font: 500 .625rem/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  padding: .3125rem .4375rem; border-radius: var(--radius); border: 1px solid transparent;
  white-space: nowrap;
}
.tag--keep  { color: var(--keep);  background: var(--keep-bg);  border-color: color-mix(in srgb, var(--keep) 28%, transparent); }
.tag--kill  { color: var(--kill);  background: var(--kill-bg);  border-color: color-mix(in srgb, var(--kill) 28%, transparent); }
.tag--watch { color: var(--watch); background: var(--watch-bg); border-color: color-mix(in srgb, var(--watch) 28%, transparent); }
.tag--data  { color: var(--accent); background: var(--accent-bg); border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
.tag--flat  { color: var(--muted); background: var(--card-sunk); border-color: var(--rule); }

/* evidence tags used inline in prose */
.ev { font: 500 .6875rem/1 var(--mono); padding: .1875rem .3125rem; border-radius: 2px; white-space: nowrap; }
.ev--data { color: var(--accent); background: var(--accent-bg); }
.ev--inf  { color: var(--watch); background: var(--watch-bg); }
.ev--op   { color: var(--muted); background: var(--card-sunk); }

/* ============================ CARDS ===================================== */
.card {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.5rem; margin: 1.5rem 0; box-shadow: var(--shadow);
}
.card--sunk { background: var(--card-sunk); box-shadow: none; }
.card__label {
  font: 500 .625rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .75rem; display: block;
}
.card > :last-child { margin-bottom: 0; }

.callout {
  border-left: 3px solid var(--accent); background: var(--accent-bg);
  padding: 1.125rem 1.25rem; margin: 1.75rem 0; border-radius: 0 var(--radius) var(--radius) 0;
}
.callout--kill  { border-left-color: var(--kill);  background: var(--kill-bg); }
.callout--keep  { border-left-color: var(--keep);  background: var(--keep-bg); }
.callout--watch { border-left-color: var(--watch); background: var(--watch-bg); }
.callout > :last-child { margin-bottom: 0; }
.callout p { font-size: .9375rem; }

/* ============================ TABLES ==================================== */
.tablewrap { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }
table { border-collapse: collapse; width: 100%; min-width: 32rem; font-size: .875rem; }
th {
  text-align: left; font: 500 .625rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); padding: .75rem .875rem; border-bottom: 1px solid var(--rule);
  background: var(--card-sunk); white-space: nowrap; vertical-align: bottom;
}
td { padding: .75rem .875rem; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--card-sunk); }
td.num, th.num { font-family: var(--mono); font-size: .8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr[data-flag="kill"] td.num { color: var(--kill); font-weight: 600; }
tr[data-flag="keep"] td.num { color: var(--keep); font-weight: 600; }

/* ============================ LAB PANEL (signature) ===================== */
.panel { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); margin: 1.75rem 0; overflow: hidden; }
.panel__head {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; justify-content: space-between;
  padding: .875rem 1.125rem; border-bottom: 1px solid var(--rule); background: var(--card-sunk);
}
.panel__title { font: 500 .6875rem/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); }
.panel__ref { font: 400 .6875rem/1 var(--mono); color: var(--muted); }

.lab { display: flex; flex-direction: column; }
.lab__row {
  display: grid; grid-template-columns: 11.5rem 4.25rem 1fr 6.25rem; gap: 1rem; align-items: center;
  padding: .8125rem 1.125rem; border-bottom: 1px solid var(--rule-soft);
}
.lab__row:last-child { border-bottom: 0; }
.lab__name { font-size: .875rem; font-weight: 500; }
.lab__name small { display: block; font-size: .6875rem; font-family: var(--mono); color: var(--muted); margin-top: .125rem; }
.lab__val { font: 600 1rem/1 var(--mono); font-variant-numeric: tabular-nums; text-align: right; }

.lab__scale { position: relative; height: 1.5rem; }
/* the reference band sits where a healthy value would land */
.lab__band {
  position: absolute; top: .5rem; height: .5rem; border-radius: 1px;
  background: color-mix(in srgb, var(--keep) 26%, transparent);
  border-left: 1px solid var(--keep); border-right: 1px solid var(--keep);
}
.lab__track { position: absolute; top: .6875rem; left: 0; right: 0; height: .125rem; background: var(--rule); }
.lab__marker {
  position: absolute; top: .1875rem; width: .1875rem; height: 1.125rem; border-radius: 1px;
  background: var(--ink); transform: translateX(-50%);
  transition: left .7s cubic-bezier(.2,.7,.3,1);
}
.lab__row[data-flag="kill"] .lab__marker { background: var(--kill); box-shadow: 0 0 0 3px var(--kill-bg); }
.lab__row[data-flag="keep"] .lab__marker { background: var(--keep); box-shadow: 0 0 0 3px var(--keep-bg); }
.lab__row[data-flag="kill"] .lab__val { color: var(--kill); }
.lab__row[data-flag="keep"] .lab__val { color: var(--keep); }
.lab__flag { justify-self: end; }

@media (max-width: 760px) {
  .lab__row { grid-template-columns: 1fr auto; gap: .375rem .75rem; padding: .875rem 1rem; }
  .lab__val { text-align: right; }
  .lab__scale { grid-column: 1 / -1; }
  .lab__flag { grid-column: 1 / -1; justify-self: start; }
}

/* ============================ STATS ===================================== */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin: 1.75rem 0; }
.stat { background: var(--card); padding: 1.125rem 1.125rem 1rem; }
.stat__v { font: 500 1.75rem/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; display: block; }
.stat__k { font: 400 .75rem/1.35 var(--sans); color: var(--muted); margin-top: .5rem; display: block; }
.stat[data-flag="kill"] .stat__v { color: var(--kill); }
.stat[data-flag="keep"] .stat__v { color: var(--keep); }

/* ============================ CHECKLIST ================================= */
.check { list-style: none; padding: 0; margin: 1.5rem 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.check__item { margin: 0; border-bottom: 1px solid var(--rule-soft); }
.check__item:last-child { border-bottom: 0; }
.check__lbl { display: flex; gap: .875rem; padding: 1rem 1.125rem; cursor: pointer; align-items: flex-start; transition: background .15s; }
.check__lbl:hover { background: var(--card-sunk); }
.check__box {
  appearance: none; flex: none; width: 1.125rem; height: 1.125rem; margin: .1875rem 0 0;
  border: 1.5px solid var(--muted); border-radius: 2px; background: var(--card); cursor: pointer;
  display: grid; place-content: center;
}
.check__box::after { content: "✓"; font-size: .75rem; font-weight: 700; color: var(--card); opacity: 0; }
.check__box:checked { background: var(--keep); border-color: var(--keep); }
.check__box:checked::after { opacity: 1; }
.check__box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.check__body { flex: 1; min-width: 0; }
.check__t { font-weight: 500; font-size: .9375rem; display: block; }
.check__d { font-size: .8125rem; color: var(--muted); margin-top: .25rem; display: block; line-height: 1.5; }
.check__meta { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.check__box:checked ~ .check__body .check__t { text-decoration: line-through; color: var(--muted); }

.progress { display: flex; align-items: center; gap: .75rem; margin: 1rem 0 0; }
.progress__bar { flex: 1; height: .375rem; background: var(--card-sunk); border-radius: 999px; overflow: hidden; border: 1px solid var(--rule); }
.progress__fill { height: 100%; background: var(--keep); width: 0; transition: width .35s ease; }
.progress__txt { font: 500 .6875rem/1 var(--mono); color: var(--muted); letter-spacing: .06em; white-space: nowrap; }

/* ============================ FILTER LISTS (green/red) ================== */
.filters { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin: 1.5rem 0; }
.filter { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.filter__h { padding: .75rem 1rem; font: 500 .6875rem/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; border-bottom: 1px solid var(--rule); }
.filter--go   .filter__h { color: var(--keep);  background: var(--keep-bg); }
.filter--no   .filter__h { color: var(--kill);  background: var(--kill-bg); }
.filter--ask  .filter__h { color: var(--watch); background: var(--watch-bg); }
.filter ul { list-style: none; margin: 0; padding: .5rem 0; }
.filter li { margin: 0; padding: .4375rem 1rem; font: 400 .8125rem/1.45 var(--mono); color: var(--ink-2); }

/* ============================ REHEARSAL (interview) ===================== */
.beat { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); margin: .75rem 0; overflow: hidden; }
.beat__h {
  width: 100%; display: flex; gap: .875rem; align-items: center; text-align: left;
  padding: .9375rem 1.125rem; background: none; border: 0; cursor: pointer; color: inherit; font: inherit;
  list-style: none;
}
.beat__h::-webkit-details-marker { display: none; }
.beat__h::marker { content: ""; }
.beat__h:hover { background: var(--card-sunk); }
.beat__n { font: 500 .6875rem/1 var(--mono); color: var(--muted); min-width: 3.25rem; }
.beat__t { flex: 1; font-weight: 500; font-size: .9375rem; }
.beat__time { font: 500 .6875rem/1 var(--mono); color: var(--accent); background: var(--accent-bg); padding: .3125rem .4375rem; border-radius: var(--radius); }
.beat__chev { color: var(--muted); transition: transform .2s; font-size: .75rem; }
.beat[open] .beat__chev { transform: rotate(90deg); }
.beat__body { padding: 0 1.125rem 1.25rem; border-top: 1px solid var(--rule-soft); }
.beat__body > :first-child { margin-top: 1rem; }
.beat.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }

.say {
  font: 400 1.0625rem/1.6 var(--serif); color: var(--ink);
  border-left: 3px solid var(--accent); padding: .25rem 0 .25rem 1.125rem; margin: 1rem 0;
}
.say p { margin-bottom: .875rem; }
.say p:last-child { margin-bottom: 0; }
.bridge { font-size: .875rem; color: var(--ink-2); background: var(--card-sunk); padding: .75rem 1rem; border-radius: var(--radius); margin: 1rem 0 0; }
.bridge b { font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: .3125rem; }

.timerbar {
  position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: .75rem 1rem; margin: 1.5rem 0; box-shadow: var(--shadow);
}
.timerbar__t { font: 500 1.5rem/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; min-width: 5rem; }
.timerbar__now { flex: 1; font-size: .8125rem; color: var(--muted); min-width: 8rem; }
.timerbar.is-over .timerbar__t { color: var(--kill); }
@media (max-width: 900px) { .timerbar { top: 3.5rem; } }

/* ============================ TODAY CARDS =============================== */
.today { display: grid; gap: 1rem; margin: 2rem 0; }
.today__card {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem;
  border: 1px solid var(--rule); border-left: 3px solid var(--kill); border-radius: var(--radius);
  background: var(--card); padding: 1.25rem; box-shadow: var(--shadow);
}
.today__card:has(.check__box:checked) { border-left-color: var(--keep); opacity: .62; }
.today__n { font: 500 1.375rem/1 var(--mono); color: var(--muted); }
.today__t { font: 500 1.0625rem/1.35 var(--sans); margin: 0 0 .375rem; }
.today__d { font-size: .875rem; color: var(--ink-2); margin: 0 0 .75rem; }
.today__foot { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

/* ============================ MISC ====================================== */
.pagenav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); font-size: .875rem; }
.pagenav a { display: flex; flex-direction: column; gap: .1875rem; text-decoration: none; max-width: 48%; }
.pagenav a:last-child { text-align: right; }
.pagenav span { font: 500 .625rem/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.pagenav b { font-weight: 500; color: var(--ink); }
.pagenav a:hover b { color: var(--accent); }

.srcs { font-size: .8125rem; color: var(--muted); line-height: 1.7; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* ============================ LOGIN ===================================== */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; position: relative; z-index: 1; }
.login__box { width: 100%; max-width: 22rem; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); }
.login__box h1 { font-size: 1.75rem; margin-bottom: .375rem; }
.login__box p { font-size: .875rem; color: var(--muted); }
.login input {
  width: 100%; padding: .75rem .875rem; font: 400 1rem/1 var(--mono); letter-spacing: .1em;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink); margin: 1rem 0 .75rem;
}
.login button {
  width: 100%; padding: .8125rem; font: 500 .75rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); border: 0; border-radius: var(--radius); cursor: pointer;
}
.login button:hover { background: var(--accent); }
.login__err { color: var(--kill); font-size: .8125rem; margin: .75rem 0 0; min-height: 1.2em; }