/* Session 1 workbook. Same system as the deck:
   slate-950 ground, cyan accent, alpha tints, Rethink Sans.
   Dark because the room is dimmed for the projector and this sits beside it. */

:root {
  --slate-950:#050b14; --slate-900:#0a1220; --slate-850:#0f1826; --slate-800:#14171c;
  --slate-700:#2d3e52; --slate-600:#40566f; --slate-500:#557090; --slate-400:#6d89ad;
  --slate-300:#aec1d8; --slate-100:#dfe7f0; --slate-0:#fff;
  --cyan-500:#44ddfd; --cyan-300:#a8edf9; --cyan-100:#dcf6fc;
  --blue-500:#2798cc; --amber-400:#ff9b3c; --green-400:#5ddb9a;
  --a-white-8:#ffffff14; --a-white-16:#ffffff29;
  --a-cyan-8:#44ddfd14; --a-cyan-16:#44ddfd29; --a-cyan-40:#44ddfd66;
  --sans:"Rethink Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
* { box-sizing:border-box }
html,body { margin:0; background:var(--slate-950); color:var(--slate-100);
  font-family:var(--sans); font-size:17px; line-height:1.5; }

/* ---- chrome ---- */
header {
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:18px;
  padding:12px 26px; background:#050b14f2; backdrop-filter:blur(8px);
  border-bottom:1px solid var(--slate-800);
}
.brand { font-weight:700; letter-spacing:-.02em; color:var(--slate-0); }
.brand span { color:var(--cyan-500); font-weight:500; }
.now {
  font-family:var(--mono); font-size:.76em; letter-spacing:.06em; color:var(--cyan-500);
  border:1px solid var(--a-cyan-40); background:var(--a-cyan-8);
  border-radius:8px; padding:6px 12px;
}
.spacer { flex:1 }
.who { font-size:.84em; color:var(--slate-400) }
.saved { font-family:var(--mono); font-size:.7em; color:var(--slate-600); min-width:74px; text-align:right }
.saved.on { color:var(--green-400) }
.saved.err { color:var(--amber-400) }

main { max-width:860px; margin:0 auto; padding:36px 26px 140px }

/* ---- sections ---- */
section { margin-bottom:20px; border:1px solid var(--slate-800); border-radius:14px;
  background:#0a12201f; overflow:hidden; }
section.open { border-color:var(--a-cyan-40); background:#0a1220 }
section.past { opacity:.72 }
section.locked { opacity:.4 }
.shead { display:flex; align-items:center; gap:14px; padding:16px 22px; cursor:default }
section.past .shead, section.open .shead { cursor:pointer }
.stag { font-family:var(--mono); font-size:.7em; letter-spacing:.05em; color:var(--slate-300);
  background:var(--a-white-8); border:1px solid var(--slate-700); border-radius:5px; padding:4px 10px }
.stitle { font-weight:650; color:var(--slate-0); font-size:1.04em }
.sat { font-family:var(--mono); font-size:.72em; color:var(--slate-600); margin-left:auto }
.lockicon { font-size:.8em; color:var(--slate-600) }
.sbody { padding:2px 22px 24px; display:none }
section.open .sbody, section.past.expanded .sbody { display:block }

h2 { font-size:1.34em; font-weight:650; color:var(--slate-0); letter-spacing:-.02em; margin:6px 0 10px }
.job { color:var(--slate-300); margin:0 0 16px }
.hint { color:var(--slate-500); font-size:.88em; margin:0 0 14px }
.worked { color:var(--slate-500); font-style:italic; font-size:.86em;
  border-left:2px solid var(--slate-700); padding-left:14px; margin:0 0 18px }
.star { color:var(--cyan-500); font-family:var(--mono); font-size:.8em; margin-right:6px }
.cut { font-size:.82em; color:var(--slate-500); margin-top:16px;
  border-top:1px dashed var(--slate-800); padding-top:12px }

/* ---- inputs ---- */
label { display:block; font-family:var(--mono); font-size:.7em; text-transform:uppercase;
  letter-spacing:.1em; color:var(--slate-400); margin:0 0 7px }
label.acc { color:var(--cyan-500) }
input[type=text], textarea, select {
  width:100%; font-family:var(--sans); font-size:1em; color:var(--slate-0);
  background:var(--a-white-8); border:1px solid var(--slate-700); border-radius:9px;
  padding:11px 14px; outline:none; resize:vertical;
}
input[type=text]:focus, textarea:focus, select:focus {
  border-color:var(--cyan-500); background:var(--a-cyan-8);
}
textarea { min-height:78px; line-height:1.45 }
.row { display:flex; gap:12px; margin-bottom:12px }
.row > * { flex:1; min-width:0 }
.numline { display:flex; gap:12px; align-items:flex-start; margin-bottom:10px }
.numline .n { font-family:var(--mono); font-size:.74em; color:var(--slate-500);
  width:26px; padding-top:12px; flex:0 0 26px }
.numline .n.req { color:var(--cyan-500) }
.pair { border:1px solid var(--slate-800); border-radius:10px; padding:14px 16px; margin-bottom:12px }

button {
  font-family:var(--sans); font-size:.94em; font-weight:600; color:var(--slate-0);
  background:var(--a-cyan-16); border:1px solid var(--a-cyan-40); border-radius:9px;
  padding:11px 20px; cursor:pointer;
}
button:hover { background:var(--a-cyan-40) }
button:disabled { opacity:.35; cursor:not-allowed }
button.ghost { background:none; border-color:var(--slate-700); color:var(--slate-300); font-weight:500 }

/* ---- the locked reader ---- */
.reader { border:1px solid var(--a-cyan-40); border-radius:14px; background:#0a1220; padding:24px }
.rprog { display:flex; align-items:center; gap:10px; margin-bottom:20px }
.rdots { display:flex; gap:4px; flex:1 }
.rdot { height:4px; flex:1; border-radius:2px; background:var(--slate-800) }
.rdot.done { background:var(--cyan-500) }
.rdot.here { background:var(--cyan-300) }
.rcount { font-family:var(--mono); font-size:.74em; color:var(--slate-400) }
.ritem {
  font-size:1.16em; line-height:1.55; color:var(--slate-0); margin:0 0 8px;
  -webkit-user-select:none; user-select:none;
}
.rmeta { font-family:var(--mono); font-size:.68em; color:var(--slate-500); margin-bottom:14px }
.rnav { display:flex; gap:10px; align-items:center; margin-top:14px }
.rnav .spacer { flex:1 }
.rback { font-size:.84em; color:var(--slate-400); background:none; border:0; cursor:pointer; padding:6px 0 }
.rback:disabled { opacity:.3; cursor:not-allowed }
.rnote { margin-top:16px }
.rdone { display:flex; flex-direction:column; gap:8px; margin-top:6px }
.rdone .l { display:flex; gap:12px; font-size:.9em; padding:8px 0;
  border-bottom:1px solid var(--slate-800) }
.rdone .l b { font-family:var(--mono); font-size:.76em; color:var(--cyan-500); flex:0 0 62px }
.rdone .l i { color:var(--slate-500); font-style:italic }

/* ---- corpus block for the cluster step ---- */
.corpusbox { border:1px solid var(--slate-700); border-radius:10px; background:var(--a-white-8);
  max-height:200px; overflow:auto; padding:14px 16px; font-size:.8em; color:var(--slate-400);
  font-family:var(--mono); line-height:1.5; white-space:pre-wrap; margin-bottom:12px }
.verbatim { font-family:var(--mono); font-size:.9em; color:var(--cyan-100);
  background:var(--a-cyan-8); border:1px solid var(--a-cyan-40); border-left:3px solid var(--cyan-500);
  border-radius:9px; padding:14px 18px; margin:6px 0 16px }

/* ---- the fork commit ---- */
.forks { display:flex; gap:14px; margin:10px 0 16px }
.fork { flex:1; text-align:center; padding:22px 12px; border-radius:12px; cursor:pointer;
  border:1.5px solid var(--slate-700); font-weight:650; color:var(--slate-300); letter-spacing:.03em }
.fork.on { border-color:var(--cyan-500); background:var(--a-cyan-16); color:var(--slate-0) }

/* ---- eval gate ladder ---- */
.gate { border:1px solid var(--slate-800); border-left:2px solid var(--slate-700);
  background:var(--a-white-8); border-radius:9px; padding:14px 18px; margin-bottom:10px }
.gate:nth-of-type(2) { margin-left:28px } .gate:nth-of-type(3) { margin-left:56px }
.gate .q { font-weight:600; color:var(--slate-0); margin-bottom:10px }
.gate.hidden { display:none }
.landed { font-family:var(--mono); font-size:.8em; color:var(--cyan-500);
  background:var(--a-cyan-8); border:1px solid var(--a-cyan-40); border-radius:8px;
  padding:10px 14px; margin-top:6px }

/* ---- gate / waiting ---- */
.wait { text-align:center; padding:80px 20px; color:var(--slate-500) }
.wait h2 { color:var(--slate-300) }
.join { max-width:440px; margin:110px auto; text-align:center }
.join h1 { font-size:2em; margin:0 0 6px; color:var(--slate-0) }
.join p { color:var(--slate-400); margin:0 0 26px }
.contract { text-align:left; font-size:.86em; color:var(--slate-400);
  border:1px solid var(--slate-800); border-radius:12px; padding:16px 18px; margin:22px 0 }
.contract b { color:var(--slate-100) }
.offline { position:fixed; left:0; right:0; bottom:0; padding:10px 26px; text-align:center;
  background:#ff9b3c; color:#000; font-weight:650; font-size:.88em; display:none; z-index:40 }
.offline.on { display:block }

/* ---- H1.1 case brief, persistent drawer ---- */
.briefbtn { padding:7px 14px; font-size:.82em }
.scrim { position:fixed; inset:0; background:#000a; opacity:0; pointer-events:none;
  transition:opacity .18s; z-index:29 }
.scrim.on { opacity:1; pointer-events:auto }
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(560px,92vw); z-index:30;
  background:var(--slate-900); border-left:1px solid var(--slate-700);
  transform:translateX(100%); transition:transform .2s ease; overflow-y:auto }
.drawer.open { transform:none }
.dinner { padding:30px 32px 60px }
.dhead h2 { margin:0 0 2px; font-size:1.6em; color:var(--slate-0) }
.dhead p { margin:0 0 24px; color:var(--slate-500) }
.dblock { margin-bottom:20px }
.dblock label { margin-bottom:5px }
.dblock p { margin:0; color:var(--slate-100); font-size:.95em }
.dfoot { color:var(--slate-500); font-size:.84em; font-style:italic;
  border-top:1px solid var(--slate-800); padding-top:16px; margin-top:26px }

/* ---- H1.4 worked card: reasons first, facts on request ---- */
.workedcard { border:1px solid var(--slate-700); border-radius:12px; padding:18px 20px; margin-bottom:20px }
.wcdec { font-family:var(--mono); font-size:.72em; color:var(--cyan-500); margin-bottom:12px }
.wchint { color:var(--slate-400); font-size:.9em; margin:0 0 14px }
.wcnote { color:var(--slate-300); font-size:.9em; border-left:2px solid var(--cyan-500);
  padding-left:14px; margin:12px 0 0 }
.wctbl { display:flex; flex-direction:column; gap:2px; margin-bottom:14px }
.wcrow { display:flex; gap:16px; padding:9px 0; border-bottom:1px solid var(--slate-800); font-size:.9em }
.wcfact { flex:0 0 44%; color:var(--slate-300); transition:opacity .2s }
.wcfact.hidden { color:transparent; border-radius:6px; user-select:none;
  background:repeating-linear-gradient(115deg,#ffffff0d 0 7px,#ffffff03 7px 14px); }
.wcreason { flex:1; color:var(--slate-0) }

/* ---- H1.7a-d method cards ---- */
.mcard { border:1px solid var(--slate-800); border-radius:12px; margin-bottom:12px; overflow:hidden }
.mcard.open { border-color:var(--a-cyan-40) }
.mchead { display:flex; align-items:center; gap:14px; padding:14px 18px; cursor:pointer }
.mcnum { font-family:var(--mono); font-size:.74em; color:var(--cyan-500);
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--a-cyan-40); background:var(--a-cyan-8) }
.mcname { font-weight:650; color:var(--slate-0); flex:1 }
.mcstate { font-family:var(--mono); font-size:.66em; color:var(--slate-600) }
.mcbody { display:none; padding:0 18px 20px }
.mcard.open .mcbody { display:block }
.mcbody h3 { display:none }
.when, .cfail { color:var(--slate-400); font-size:.92em }
.cextra { border-left:2px solid var(--slate-700); padding-left:14px; color:var(--slate-100); font-size:.94em }
.ctakes { color:var(--slate-500); font-size:.85em; margin:0 }
ol.csteps { margin:0 0 12px 1.2em } ol.csteps li { margin-bottom:8px; font-size:.95em }
.mcmine { margin-top:14px; padding-top:14px; border-top:1px solid var(--slate-800) }