/* ============================================================
   ICEHOUSE v3 — style.css
   v2 dark-literary aesthetic + audit fixes:
     · fluid pane, no fixed letterbox
     · no scanlines (kept glow + materialize)
     · examine grammar, evidence panel, stage map
   ============================================================ */
:root{
  --bg:         #0e1420;
  --bg-2:       #0a0f1a;
  --page:       #141c2e;
  --page-inner: #172030;
  --text:       #e6e0d4;
  --text-mid:   #a89f92;
  --text-dim:   #6c7384;
  --text-faint: #3f4658;
  --border:     #1e2a3e;
  --border-mid: #2a3850;
  --accent:     oklch(0.72 0.13 70);
  --accent-2:   oklch(0.62 0.13 65);
  --accent-dim: oklch(0.50 0.12 60);
  --widget-bg:  #111828;
  --success:    oklch(0.70 0.10 150);
  --success-bg: color-mix(in oklab, oklch(0.70 0.10 150) 12%, transparent);
  --soft:       oklch(0.72 0.07 250);
  --soft-bg:    color-mix(in oklab, oklch(0.72 0.07 250) 10%, transparent);
  --hint:       oklch(0.72 0.13 70);
  --hint-bg:    color-mix(in oklab, oklch(0.72 0.13 70) 12%, transparent);

  --serif: 'Lora', Georgia, serif;
  --sans:  'Source Sans 3', sans-serif;
  --mono:  'Share Tech Mono', ui-monospace, monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html,body{
  height:100%;
  background: radial-gradient(ellipse 1200px 800px at 50% -10%, #182236, var(--bg) 60%) var(--bg);
  color:var(--text);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
}
body{
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center;
  padding: 1.25rem 1rem 1rem;
  overflow-x:hidden;
}

/* ── Top bar ─────────────────────────────────────────────────── */
.topbar{
  width:100%;
  max-width: 760px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom: 1rem;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.topbar .series-text{ color: var(--text-mid); }
.topbar-right{ display:flex; gap:1.4rem; align-items:center; }
.topbar-btn{
  background:transparent; border:none;
  font-family:inherit; font-size:inherit; letter-spacing:inherit;
  color:var(--text-dim); cursor:pointer; text-transform:uppercase;
  padding:0; transition:color .15s;
}
.topbar-btn:hover{ color: var(--accent); }
.topbar-btn .count{
  display:inline-block; min-width:1.6em;
  color: var(--accent); margin-left: 0.3em;
}

/* ── Chapter header ──────────────────────────────────────────── */
.chapter-header{
  width:100%;
  max-width: 760px;
  height: clamp(180px, 26vh, 260px);
  position:relative; overflow:hidden;
  border-radius: 8px 8px 0 0;
  background-size: cover; background-position: center top;
  background-color: #0a0e1e;
}
.chapter-header::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(to bottom,
    rgba(8,12,24,0.10) 0%,
    rgba(8,12,24,0.40) 55%,
    rgba(8,12,24,0.92) 100%);
}
.chapter-header-text{
  position:absolute; left:0; right:0; bottom:0;
  padding: 0 2.4rem 1.5rem; z-index:1;
}
.chapter-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.3em;
  color:var(--accent); text-transform:uppercase;
  display:block; margin-bottom:.4rem;
}
.chapter-header-text h1{
  font-family:var(--serif); font-size: clamp(22px, 2.4vw, 30px);
  font-weight:400; color:#f0ead8; letter-spacing:.01em;
  text-shadow: 0 2px 16px rgba(0,0,0,.75);
}

/* ── Reading pane — fluid ────────────────────────────────────── */
.reading-pane{
  width:100%;
  max-width: 760px;
  height: clamp(440px, 70vh, 760px);
  background:var(--page);
  border:1px solid var(--border-mid);
  border-top:none;
  border-radius: 0;
  box-shadow:
    0 8px 60px rgba(0,0,0,.6),
    0 0 0 1px rgba(200,146,74,.06);
  display:flex; flex-direction:column; overflow:hidden;
}
.pane-top-rule{
  flex:none; height:3px;
  background: var(--border-mid);
  position:relative; overflow:hidden;
}

/* Progress strip + stage map */
.progress-strip{
  flex:none;
  background:var(--widget-bg);
  padding: .65rem 2rem;
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap: 1.5rem;
  border-bottom:1px solid var(--border-mid);
}
.progress-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  color:var(--text-dim); text-transform:uppercase;
}
.stage-dots{
  display:flex; gap: 0; align-items:center;
  justify-content:center;
}
.stage-dot{
  position:relative;
  display:flex; align-items:center; gap: .45rem;
  padding: 0 .85rem;
  border-right: 1px solid var(--border-mid);
}
.stage-dot:last-child{ border-right: none; }
.stage-dot::before{
  content:'';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-faint);
  flex: none;
  transition: background .25s, box-shadow .25s;
}
.stage-dot.passed::before{ background: var(--accent-dim); }
.stage-dot.current::before{
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}
.stage-dot .stage-label,
.stage-label{
  display: none !important; /* hidden from reader — kept in DOM for teacher/dev mode */
}
.stage-dot.current .stage-label{ color: var(--accent); }
.stage-dot.passed .stage-label{ color: var(--text-dim); }

/* Hide labels on tight viewports — dots alone still convey position */
@media (max-width: 920px){
  .stage-dot{ padding: 0 .55rem; }
  .stage-dot .stage-label{ display: none; }
  .stage-dot{ border-right: none; }
  .stage-dots{ gap: .25rem; }
}

.progress-right{
  display:flex; align-items:center; gap: .75rem;
}
.progress-count{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  color:var(--text-dim);
}
.progress-bar-track{
  width:90px; height:2px; background: var(--border-mid);
  border-radius:1px; overflow:hidden;
}
.progress-bar-fill{
  position:absolute; inset:0; right:auto;
  width:0%; background: var(--accent);
  transition: width .5s ease;
}

/* Content scroll area */
.pane-content{
  flex:1; min-height:0;
  overflow-y:auto;
  padding: 2.2rem 2.6rem 2.8rem;
  font-size: clamp(16px, 1vw + 13px, 18px);
  line-height: 1.78;
}
.pane-content::-webkit-scrollbar{ width:6px; }
.pane-content::-webkit-scrollbar-track{ background:transparent; }
.pane-content::-webkit-scrollbar-thumb{ background:transparent; border-radius:3px; }
.pane-content:hover::-webkit-scrollbar-thumb{ background-color: color-mix(in oklab, var(--accent) 30%, transparent); }
.pane-content::-webkit-scrollbar-thumb:hover{ background-color: color-mix(in oklab, var(--accent) 55%, transparent); }
.pane-content{ scrollbar-width: thin; scrollbar-color: transparent transparent; }
.pane-content:hover{ scrollbar-color: color-mix(in oklab, var(--accent) 30%, transparent) transparent; }

.pane-bottom-rule{
  flex:none; height:1px;
  background: linear-gradient(90deg, transparent, var(--border-mid), transparent);
}

.page-footer{
  width: 100%; max-width: 760px;
  text-align:center;
  padding: 1rem 0 0;
  margin-top:auto;
}
.page-footer::before{
  content:''; display:block; width:120px; height:1px;
  background: linear-gradient(90deg, transparent, var(--accent-dim), transparent);
  margin: 0 auto .55rem;
}
.page-footer span{
  font-family:var(--mono); font-size: 10px; letter-spacing:.22em;
  color: var(--text-dim); text-transform:uppercase;
}

/* ── Pages ──────────────────────────────────────────────────── */
.if-page{ display:none; min-height: 100%; }
.if-page.active{ display:block; animation: fadeIn .35s ease; }
@keyframes fadeIn{ from{opacity:0; transform: translateY(2px);} to{opacity:1; transform:none;} }

.node-title{
  display:flex; align-items:baseline; gap:.7rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: .55rem;
}
.node-stage-tag{
  display: none !important; /* hidden from reader; kept in DOM for tweak/teacher mode */
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  color: var(--accent);
}
.node-title-text{
  font-family: var(--serif); font-style: italic;
  color: var(--text-mid); font-size: 0.95rem;
  letter-spacing: .01em;
}

.passage{ margin-bottom: 1.6rem; }
.passage:last-child{ margin-bottom:0; }
p{ margin-bottom: 1em; color: var(--text); }
.passage p{
  text-wrap: pretty;
  orphans: 2;
  widows: 2;
}
p:last-child{ margin-bottom: 0; }
p em{ color: var(--text-mid); font-style: italic; }
strong{ font-weight: 600; color: #fff; }

/* ── Text exchange ───────────────────────────────────────────── */
.text-exchange{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  margin:1.25rem 0 1.5rem;
}
.kaya-text,
.bram-text{
  max-width:min(82%, 30rem);
  padding:.62rem .78rem .68rem;
  border:1px solid var(--border-mid);
  border-radius:8px;
  font-family:var(--sans);
  font-size:.95rem;
  line-height:1.45;
  color:var(--text);
  overflow-wrap:anywhere;
}
.kaya-text::before,
.bram-text::before{
  display:block;
  margin-bottom:.18rem;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.kaya-text{
  align-self:flex-start;
  background:color-mix(in oklab, var(--page-inner) 88%, var(--accent-dim));
  border-color:color-mix(in oklab, var(--accent-dim) 34%, var(--border-mid));
  border-bottom-left-radius:3px;
}
.kaya-text::before{ content:'Kaya'; }
.bram-text{
  align-self:flex-end;
  background:color-mix(in oklab, var(--widget-bg) 86%, var(--text-faint));
  border-color:color-mix(in oklab, var(--text-faint) 70%, var(--border-mid));
  border-bottom-right-radius:3px;
}
.bram-text::before{
  content:'Bram';
  text-align:right;
}

/* ── Voice messages (listening layer, 2026-07-03) ───────────── */
.text-voice{ min-width:min(72%, 22rem); }
.voice-msg-label{
  font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-dim); margin-bottom:.35rem;
}
.voice-player{ display:flex; align-items:center; gap:.55rem; }
.voice-player audio{ display:none; }
.voice-play{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  background:var(--accent); color:var(--badge-text);
  border:none; cursor:pointer; font-size:11px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}
.voice-bar{
  flex:1 1 auto; height:4px; border-radius:2px;
  background:color-mix(in oklab, var(--text-faint) 45%, transparent);
  overflow:hidden;
}
.voice-bar-fill{ display:block; height:100%; width:0%; background:var(--accent); }
.voice-time{ font-family:var(--mono); font-size:10px; color:var(--text-dim); flex:0 0 auto; }
.voice-player--missing{ display:none; }
.voice-transcript-btn{
  margin-top:.4rem; background:none; border:none; padding:0;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-dim);
  text-decoration:underline; cursor:pointer;
}
.voice-transcript{
  margin-top:.45rem; padding-top:.45rem;
  border-top:1px dashed var(--border-mid);
  font-size:.92rem; line-height:1.5; color:var(--text-mid);
}
.voice-missing .voice-transcript{ border-top:none; padding-top:0; margin-top:.1rem; }
.examine-voice .voice-player{ margin:.15rem 0 .1rem; }
/* Speaker-labelled transcript rows (overheard beats, ruled 2026-07-10) */
.voice-line{ margin:0 0 .55rem; }
.voice-line:last-child{ margin-bottom:0; }
/* One line per turn: "VOICE 1: spoken words" (ruled 2026-07-10). */
.voice-speaker{
  display:inline; font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-dim); margin-right:.4rem;
}
.voice-line-text{ display:inline; font-style:italic; }
/* Transcript tap locked until the clip has been heard out once. */
.voice-transcript-btn:disabled{
  opacity:.4; text-decoration:none; cursor:default;
}
/* Listen beat (overheard audio): bare player block revealed by a prose
   hyperlink — no card chrome (ruled 2026-07-10). */
.listen-block{
  display:none; margin:.4rem 0 1.5rem; padding:.7rem .9rem .65rem;
  border-left:2px solid var(--accent);
  background:color-mix(in oklab, var(--accent) 6%, transparent);
  border-radius:0 4px 4px 0;
}
.listen-block.visible{ display:block; }

/* ── Write-reply composer (writing layer, mid-chapter beat) ─── */
.write-reply{ margin:0 0 1.5rem; }
.write-reply-prompt{
  font-family:var(--serif); font-style:italic; color:var(--text-mid);
  font-size:.95rem; line-height:1.55; margin:0 0 .6rem;
}
.write-reply .writenote-scaffold-label{ color:var(--text-dim); }
.write-reply-composer{ display:flex; gap:.5rem; align-items:flex-end; margin-top:.7rem; }
.write-reply-input{
  flex:1 1 auto; box-sizing:border-box;
  background:color-mix(in oklab, var(--widget-bg) 86%, var(--text-faint));
  color:var(--text); border:1px solid var(--border-mid); border-radius:8px;
  font-family:var(--sans); font-size:.95rem; line-height:1.45;
  padding:.6rem .75rem; resize:vertical; min-height:4.2rem;
}
.write-reply-input:focus{ outline:none; border-color:var(--accent-dim); }
.write-reply-send{
  flex:0 0 auto; background:var(--accent); color:var(--badge-text);
  border:none; border-radius:8px; padding:.6rem .9rem;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; cursor:pointer;
}
.write-reply .writenote-meta{ margin-top:.35rem; }
.write-reply .writenote-model{
  background:color-mix(in oklab, var(--page-inner) 88%, var(--accent-dim));
  border:1px dashed var(--accent-dim);
}
.write-reply .writenote-model-text{
  font-family:var(--sans); color:var(--text-mid); font-size:.92rem;
}
.write-reply .writenote-fb.soft{ color:#e6b8a0; }
.write-reply-thread{ margin:1rem 0 0; }

/* ── Write-assemble composer (word-bank compose beat, 2026-07-09) ── */
.write-assemble{ margin:0 0 1.5rem; }
/* Bram's reasoning reads as normal story prose (ruled 2026-07-10) — close-POV
   narration has no separate "thoughts" register; only the intro line keeps the
   dim cue treatment (wa-thoughts-dim), as the hinge into the composer. */
.wa-thoughts{ font-family:var(--serif); color:var(--text); font-size:1rem; line-height:1.6; margin:0 0 .8rem; }
.wa-thoughts em{ color:var(--text); font-style:italic; }
.wa-thoughts-dim{ color:var(--text-dim); font-style:italic; }
.wa-composer{ border:1px solid var(--border-mid); border-radius:10px; background:var(--page); padding:1rem 1.1rem 1.1rem; }
.wa-line{ min-height:3rem; display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; background:color-mix(in oklab, var(--widget-bg) 86%, var(--text-faint)); border:1px solid var(--border-mid); border-radius:8px; padding:.7rem; }
.wa-line.wa-drop{ border-color:var(--accent-dim); }
.wa-cursor{ width:2px; height:1.15rem; background:var(--accent); animation:wa-blink 1s step-end infinite; flex:0 0 auto; }
@keyframes wa-blink{ 50%{ opacity:0; } }
.wa-bank{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.9rem; min-height:2.4rem; padding:.2rem; border-radius:8px; }
.wa-bank.wa-drop{ background:color-mix(in oklab, var(--page-inner) 70%, transparent); }
.wa-chip{ font-family:var(--sans); font-size:.98rem; color:var(--text); background:var(--page-inner); border:1px solid var(--border-mid); border-radius:7px; padding:.42rem .7rem; cursor:grab; user-select:none; touch-action:none; transition:transform .12s, box-shadow .12s, opacity .12s; line-height:1; }
.wa-chip:hover{ border-color:var(--accent-dim); }
.wa-chip.wa-lift{ opacity:.28; }
.wa-chip.wa-float{ position:fixed; z-index:60; pointer-events:none; cursor:grabbing; box-shadow:0 8px 22px rgba(0,0,0,.45); transform:scale(1.06); border-color:var(--accent); }
.wa-gap{ width:3px; align-self:stretch; min-height:1.4rem; background:var(--accent); border-radius:2px; }
.wa-send-row{ display:flex; justify-content:flex-end; margin-top:1rem; }
.wa-send{ background:var(--accent); color:var(--badge-text); border:none; font-family:var(--sans); font-weight:600; font-size:.95rem; padding:.55rem 1.4rem; border-radius:8px; cursor:pointer; transition:opacity .2s; }
.wa-send:disabled{ background:var(--text-faint); color:var(--text-dim); cursor:not-allowed; opacity:.7; }
@media (prefers-reduced-motion: reduce){ .wa-cursor{ animation:none; } .wa-chip{ transition:none; } }

.text-exchange-next{
  align-self:flex-start;
  margin-top:.2rem;
  background:transparent;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* Typing indicator — tap-to-receive the next message */
.text-typing{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:.1rem;
  padding:.6rem .8rem;
  border:1px solid var(--border-mid);
  border-radius:8px;
  border-bottom-left-radius:3px;
  background:color-mix(in oklab, var(--page-inner) 88%, var(--accent-dim));
  cursor:pointer;
  transition:border-color .2s, transform .08s;
}
.text-typing:hover{ border-color:color-mix(in oklab, var(--accent) 45%, var(--border-mid)); }
.text-typing:active{ transform:translateY(1px); }
.text-typing.bram-side{
  align-self:flex-end;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:3px;
  background:color-mix(in oklab, var(--widget-bg) 86%, var(--text-faint));
  border-color:color-mix(in oklab, var(--text-faint) 70%, var(--border-mid));
}
.text-typing .typing-label{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.text-typing .typing-dots{ display:inline-flex; align-items:center; gap:4px; }
.text-typing .typing-dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--text-dim);
  animation:typingBounce 1.25s infinite ease-in-out;
}
.text-typing .typing-dot:nth-child(2){ animation-delay:.16s; }
.text-typing .typing-dot:nth-child(3){ animation-delay:.32s; }
@keyframes typingBounce{
  0%,70%,100%{ transform:translateY(0); opacity:.3; }
  35%        { transform:translateY(-3px); opacity:.9; }
}
@media (prefers-reduced-motion: reduce){
  .text-typing .typing-dot{ animation:none; opacity:.6; }
}

/* Teleprompter reveal: each character fades in on a staggered delay set inline
   by teleprintMessage(), producing a left-to-right type-in. */
@keyframes twReveal{ from{ opacity:0; } to{ opacity:1; } }
.text-exchange .tw-char{
  opacity:0;
  animation:twReveal 80ms ease-out forwards;
}
@media (prefers-reduced-motion: reduce){
  .text-exchange .tw-char{ animation:none; opacity:1; }
}

/* ── Choices ─────────────────────────────────────────────────── */
.choices{
  margin-top: 1.6rem;
  display:flex; flex-direction:column; gap: .55rem;
}
.choice-btn{
  background: var(--widget-bg);
  border: 1px solid var(--border-mid);
  color: var(--text);
  font-family: var(--serif);
  font-size: 1rem;
  padding: .85rem 1.2rem;
  text-align:left; cursor:pointer; border-radius: 3px;
  transition: border-color .2s, color .2s, transform .2s;
  width: 100%; line-height: 1.5;
}
.choice-btn:hover{
  border-color: var(--accent);
  color: #f0ead8;
  transform: translateX(2px);
}
.choice-label{
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  color: var(--accent); display:block; margin-bottom: .15rem;
  text-transform: uppercase;
}

/* ── Examine grammar (the system-defining primitive) ─────────── */
.examine-trigger{
  cursor:pointer;
  border-bottom: 1px dashed var(--accent-dim);
  color: var(--text);
  transition: color .2s, border-color .2s;
  padding-bottom: 1px;
}
.examine-trigger:hover{
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.trigger-end{
  white-space: nowrap;
}
.trigger-indicator{
  display:inline-block;
  width:5px; height:5px; border-radius:50%;
  background: var(--accent); margin-left: 6px;
  vertical-align: middle; opacity:.85;
  animation: pulse 2s ease-in-out infinite;
}
.examine-trigger::after{ display:none; }
.examine-trigger.used{
  cursor:default;
  border-bottom-color: var(--text-faint);
  border-bottom-style: solid;
  color: var(--text-mid);
}
.examine-trigger.used .trigger-indicator{
  background: var(--text-faint); animation: none; opacity:.7;
}
@keyframes pulse{
  0%,100%{ opacity:.85; transform:scale(1); }
  50%    { opacity:.25; transform:scale(.6); }
}

.examine-card{
  display:none;
  background: var(--widget-bg);
  border: 1px solid var(--border-mid);
  border-left: 2px solid var(--accent);
  border-radius: 3px;
  padding: 1rem 1.2rem 1.1rem;
  margin: 1rem 0 1.4rem;
  position: relative;
}
.examine-card.visible{
  display:block;
  animation: cardIn .5s ease;
}
@keyframes cardIn{
  from{ opacity:0; transform: translateY(-4px); }
  to  { opacity:1; transform: none; }
}
.examine-card-head{
  display:flex; align-items:baseline; gap:.7rem;
  margin-bottom: .55rem;
}
.examine-card-label{
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  color: var(--accent); text-transform: uppercase;
}
.examine-card-name{
  font-family: var(--sans); font-size: .9rem; font-weight: 600;
  color: var(--text); letter-spacing: .005em;
}
.examine-card-body{
  font-family: var(--serif); font-size: .98rem; line-height: 1.65;
  color: var(--text);
}
.examine-stamp{
  margin-top: .8rem;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  color: var(--success); text-transform: uppercase;
  opacity: 0;
  animation: stampIn .6s ease 1.1s forwards;
}
@keyframes stampIn{ from{opacity:0; transform: translateX(-4px);} to{opacity:1; transform:none;} }

/* ── Deduce widget (soft-branch) ─────────────────────────────── */
.widget{
  background: var(--widget-bg);
  border: 1px solid var(--border-mid);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 1.4rem 1.6rem;
  margin: 1.8rem 0;
}
.widget-label{
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  color: var(--accent); text-transform: uppercase;
  margin-bottom: .7rem;
}
.widget-question{
  font-family: var(--sans); font-size: 1.05rem; font-weight: 600;
  color: #e8e0d0; margin-bottom: 1.1rem; line-height: 1.5;
}
.deduce-options{
  display:flex; flex-direction:column; gap:.6rem;
}
.deduce-btn{
  background: var(--page-inner);
  border: 1px solid var(--border-mid);
  color: var(--text);
  font-family: var(--serif); font-size: 1rem;
  padding: .85rem 1.1rem;
  text-align:left; line-height:1.5; cursor:pointer; border-radius:3px;
  transition: border-color .2s, color .2s, background .2s;
}
.deduce-btn:hover:not(:disabled){
  border-color: var(--accent); color: var(--accent);
}
.deduce-btn:disabled{ cursor: default; opacity: 0.85; }
.deduce-btn.correct{
  border-color: var(--success);
  background: var(--success-bg);
  color: var(--success);
}
.deduce-btn.soft-wrong{
  border-color: var(--soft);
  background: var(--soft-bg);
  color: var(--soft);
}

.feedback{
  margin-top: .9rem;
  padding: .85rem 1rem;
  border-radius: 3px;
  font-family: var(--sans);
  font-size: .98rem;
  line-height: 1.6;
}
.feedback.correct{
  background: var(--success-bg);
  border: 1px solid color-mix(in oklab, var(--success) 35%, transparent);
  color: var(--success);
}
.feedback.soft{
  background: var(--soft-bg);
  border: 1px solid color-mix(in oklab, var(--soft) 35%, transparent);
  color: var(--soft);
}
.feedback.hint{
  background: var(--hint-bg);
  border: 1px solid color-mix(in oklab, var(--hint) 35%, transparent);
  color: var(--hint);
}

.continue-btn{
  display:none;
  margin-top: 1.3rem;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  padding: .7rem 1.4rem;
  cursor:pointer; border-radius: 3px;
  text-transform: uppercase;
  transition: background .2s, color .2s;
}
.continue-btn:hover{ background: var(--accent); color: var(--bg); }
.continue-btn.visible{ display: inline-block; }

/* ── Misconception notice (soft-path) ────────────────────────── */
.misconception{
  display:flex; flex-wrap:wrap; gap:.5rem .9rem;
  align-items:baseline;
  margin: 0 0 1.4rem;
  padding: .65rem .9rem;
  border-left: 2px solid var(--soft);
  background: var(--soft-bg);
  border-radius: 0 3px 3px 0;
}
.misconception-label{
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  color: var(--soft); text-transform: uppercase;
}
.misconception-text{
  font-family: var(--sans); font-size: .9rem; color: var(--text-mid);
}

/* ── Reveal — keep glow + materialize, drop scanlines ────────── */
.reveal-trigger{
  cursor:pointer;
  border-bottom: 1px dashed var(--accent-dim);
  color: var(--text);
  transition: color .2s, border-color .2s;
  padding-bottom: 1px;
}
.reveal-trigger:hover{
  color: var(--accent); border-bottom-color: var(--accent);
}
.reveal-trigger .trigger-indicator{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-left: 6px;
  vertical-align: middle; opacity:.85;
  animation: pulse 2s ease-in-out infinite;
  box-shadow: 0 0 6px color-mix(in oklab, var(--accent) 70%, transparent);
}
.reveal-trigger::after{ display:none; }
.reveal-trigger.used{
  border-bottom-color: transparent; cursor: default; color: var(--text);
}
.reveal-trigger.used .trigger-indicator{ display:none; }

.reveal-image{
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  /* Universal rule (2026-07-10): images get EQUAL breathing room above and
     below. Keep both values in step; 'auto' carries the horizontal centring. */
  margin: 1.6rem auto;
  border: 1px solid color-mix(in oklab, var(--accent) 25%, transparent);
  background: #0d1117;
  display: none;
  max-width: min(560px, 100%);
}
.reveal-image.visible{ display:block; }
.reveal-image img{
  width:100%; display:block; border-radius: 4px;
  opacity: 0;
  filter: blur(24px) grayscale(100%) brightness(3) contrast(0.15) saturate(0);
  transform: scale(1.1);
}
.reveal-image img.materializing{
  animation: materialize 3.2s ease-out forwards;
}
@keyframes materialize{
  0%   { opacity: 0;    filter: blur(24px) grayscale(100%) brightness(3.2) contrast(0.12) saturate(0);    transform: scale(1.10); }
  20%  { opacity: 0.22; filter: blur(20px) grayscale(100%) brightness(2.7) contrast(0.18) saturate(0);    transform: scale(1.08); }
  40%  { opacity: 0.42; filter: blur(12px) grayscale(85%)  brightness(1.9) contrast(0.40) saturate(0.20); transform: scale(1.05); }
  60%  { opacity: 0.65; filter: blur(5px)  grayscale(50%)  brightness(1.30) contrast(0.65) saturate(0.55); transform: scale(1.02); }
  80%  { opacity: 0.85; filter: blur(1.5px) grayscale(20%) brightness(1.08) contrast(0.90) saturate(0.85); transform: scale(1.005); }
  100% { opacity: 1;    filter: blur(0) grayscale(0) brightness(1) contrast(1) saturate(1);                transform: scale(1); }
}
.reveal-image .glow{
  position:absolute; inset:0; border-radius:4px; pointer-events:none;
  background: radial-gradient(ellipse at 55% 45%,
    color-mix(in oklab, var(--accent) 50%, transparent) 0%,
    color-mix(in oklab, var(--accent) 12%, transparent) 45%,
    transparent 70%);
  opacity:0; display:none;
}
.reveal-image .glow.active{ display:block; animation: glowBurn 3.2s ease-out forwards; }
@keyframes glowBurn{
  0%{opacity:0} 10%{opacity:.85} 40%{opacity:.55} 70%{opacity:.20} 100%{opacity:0}
}
/* Reveal caption hidden (ruled 2026-07-08): the post-reveal prose names the
   discovered object a beat later and better, so the on-screen caption pre-spoiled
   the reveal. The string is retained as the image's alt text (img.alt = def.caption
   in makeReveal) for screen readers — only the visible label is removed, which also
   drops the duplicate a screen reader would otherwise read (alt + caption). */
.reveal-image .caption{
  display: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  color: var(--text-dim); padding: .4rem 0; text-align: right;
  text-transform: uppercase;
  opacity: 0; transition: opacity 1s ease 2.5s;
}
.reveal-image .caption.visible{ opacity: 1; }

.post-reveal{ display:none; }
.post-reveal.visible{ display:block; animation: textMaterialize 1.2s ease-out forwards; }
@keyframes textMaterialize{
  0%{opacity:0; filter: blur(10px); }
  60%{opacity:.6; filter: blur(2px); }
  100%{opacity:1; filter: blur(0); }
}

/* ── Recap (chapter end) ─────────────────────────────────────── */
.recap{
  margin: 1.6rem 0 0;
  padding: 1.3rem 1.4rem 1.5rem;
  border: 1px solid var(--border-mid);
  border-left: 3px solid var(--accent);
  background: var(--widget-bg);
  border-radius: 3px;
}
.recap-label{
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  color: var(--accent); text-transform: uppercase; margin-bottom: .25rem;
}
/* ── Cork Case Board overlay ─────────────────────────────────── */
.case-board-panel{
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(8,6,4,.72);
  align-items:center; justify-content:center; padding:24px;
}
.case-board-panel.open{ display:flex; }
.cork-frame{
  width:min(960px, 96vw); max-height:92vh;
  display:flex; flex-direction:column;
  background:#6f4d2c;
  border:3px solid #5b3d22;
  border-radius:10px;
  box-shadow:0 26px 70px rgba(0,0,0,.6), inset 0 0 0 8px #8a6238;
  padding:8px;
}
.cork-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:.5rem .7rem .6rem;
}
.cork-title{
  font-family:var(--mono); font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:#f3e6cf;
}
.cork-close{
  background:transparent; border:none; color:#f3e6cf;
  font-size:22px; line-height:1; cursor:pointer; padding:0 .3rem;
}
.cork-close:hover{ color:#fff; }
.cork-surface{
  position:relative; flex:1; min-height:300px; overflow:auto;
  border-radius:5px;
  background-color:#c79a5d;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(94,66,31,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(94,66,31,.15) 0 2px, transparent 3px),
    radial-gradient(circle at 45% 80%, rgba(94,66,31,.16) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 20%, rgba(94,66,31,.14) 0 2px, transparent 3px);
  background-size:90px 90px, 120px 120px, 70px 70px, 140px 140px;
  padding:1.6rem 1.4rem 2rem;
}
.cork-threads{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.cork-notes{ position:relative; z-index:1; }
.cork-prompt{
  max-width:540px; margin:0 auto 1.3rem;
  background:#efe6cf; border:1px solid #cabd97; border-radius:3px;
  padding:.75rem .95rem; box-shadow:0 4px 12px rgba(0,0,0,.28);
  font-family:var(--serif); color:#3a3326; font-size:.98rem; line-height:1.5;
  text-align:center;
}
/* Handover directive (2026-07-13): Garcia's "put it in the file" line — a
   required next step, so it carries an amber accent and left-aligns to read as
   an instruction rather than the centered voice-asides around it. */
.cork-file-instruction{
  border-left:3px solid #c9a23f; text-align:left;
}
.cork-prompt-fb{ display:none; }
.cork-prompt-fb.soft{
  display:block; max-width:540px; margin:-.7rem auto 1.2rem;
  font-family:var(--serif); font-style:italic; color:#f3e6cf;
  text-align:center; font-size:.92rem;
}
/* The wrong-sort correction is the one .soft context with the check button
   directly above it; the shared -.7rem top margin pulled the line up onto the
   "Send it to him" button. Clear it in this context only. */
.cork-prompt-fb.soft.cork-sort-fb{ margin-top:.5rem; }
.cork-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:26px 14px; justify-items:center; align-items:start;
}
.cork-grid .cork-note{ width:100%; max-width:180px; }
.cork-note{
  position:relative; width:165px; min-height:74px;
  background:#f4ecd8; border:1px solid #d8cba5; border-radius:2px;
  padding:.85rem .75rem .8rem;
  box-shadow:0 6px 14px rgba(0,0,0,.3);
  font-family:'Courier Prime', 'Courier New', var(--mono); color:#2c2619;
}
.cork-note-title{ font-size:.92rem; line-height:1.3; }
.cork-note-detail{ font-size:.74rem; line-height:1.35; color:#6a5d3e; margin-top:.3rem; }
.cork-note--question{
  background:#ecd793; border-color:#c9b25f; color:#5a4a1a;
}
.cork-note--question .cork-note-title{ color:#5a4a1a; }
.cork-note--pinned{ box-shadow:0 8px 18px rgba(192,57,43,.4); }
.cork-note--pickable{ cursor:pointer; outline:1px dashed rgba(192,57,43,.55); outline-offset:3px; }
.cork-note--pickable:hover{ box-shadow:0 10px 22px rgba(0,0,0,.4); }
.cork-note-tag{
  position:absolute; top:-9px; right:8px;
  background:#c0392b; color:#fbe6e2; font-family:var(--mono);
  font-size:8px; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 6px; border-radius:2px;
}
.cork-pin{
  position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #aebccb 0 3px, #4a5a6a 4px 7px);
  box-shadow:0 2px 3px rgba(0,0,0,.4);
}
.cork-pin--red{ background:radial-gradient(circle at 38% 34%, #f0b4ac 0 3px, #c0392b 4px 7px); }
.cork-pin--amber{ background:radial-gradient(circle at 38% 34%, #e7cf8f 0 3px, #b08d3a 4px 7px); }
.cork-empty{
  text-align:center; color:#f3e6cf; font-family:var(--serif);
  font-style:italic; padding:3rem 1rem;
}
/* Sort mode — anchors, selection, placement, threads, completion */
.cork-sort-instruction{
  text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:#f3e6cf; opacity:.85; margin:0 auto 1.2rem;
}
.cork-anchors{
  display:flex; flex-wrap:wrap; gap:24px; justify-content:center;
  margin:0 auto 2.2rem; max-width:620px;
}
.cork-note--anchor{
  width:200px; min-height:64px; cursor:pointer;
  background:#e7dcc0; border-color:#bfae84;
  text-align:center;
}
.cork-note--anchor .cork-note-title{ font-size:1rem; font-weight:bold; }
.cork-note--anchor .cork-note-detail{ color:#6a5d3e; }
.cork-note--anchor:hover{ box-shadow:0 10px 24px rgba(0,0,0,.42); border-color:#c0392b; }
.cork-note--selected{
  outline:2px solid #c0392b; outline-offset:3px;
  box-shadow:0 10px 24px rgba(192,57,43,.5);
}
/* Side-by-side sort columns (2026-07-02): each column = anchor header + dock.
   The column is the tap/drop target, so "tap the side" has literal sides. */
.cork-sort-columns{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  max-width:880px; margin:0 auto 1.8rem; align-items:start;
  position:relative; z-index:1;
}
.cork-column{
  border:2px dashed rgba(243,230,207,.28); border-radius:10px;
  padding:14px 10px 18px; min-height:170px; cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease;
}
.cork-column .cork-note--anchor{ margin:0 auto 16px; }
.cork-dock{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));
  gap:20px 10px; justify-items:center; align-items:start; min-height:44px;
}
.cork-dock .cork-note{ width:100%; }
/* Docked clues stay compact: the title identifies the clue; the full detail
   lives on the tray card (and in the PNB Evidence list). */
.cork-dock .cork-note-detail{
  font-size:.66rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.cork-column.cork-drop-hover{ border-color:#c0392b; background:rgba(192,57,43,.10); }
.cork-note--dragging{
  z-index:60; pointer-events:none; opacity:.96;
  box-shadow:0 18px 38px rgba(0,0,0,.55);
}
/* Chips: vertical touch pans the board; sideways movement starts a drag. */
.cork-note--pickable{ touch-action:pan-y; }
/* Conclusion question (synthesis beat, 2026-07-02): asked once the sort is
   full; the answered card pins between the columns and takes both strings. */
.cork-conclusion{ max-width:640px; margin:0 auto 1.4rem; }
.cork-conclusion-options{
  display:flex; flex-direction:column; align-items:center;
  gap:20px; margin-top:10px;
}
.cork-note--option{
  width:min(440px, 94%); cursor:pointer; text-align:left;
  font-family:'Courier Prime', 'Courier New', var(--mono);
  outline:1px dashed rgba(192,57,43,.55); outline-offset:3px;
}
.cork-note--option:hover{ box-shadow:0 10px 22px rgba(0,0,0,.4); border-color:#c0392b; }
.cork-note--conclusion{
  display:block; width:min(480px, 94%); margin:0 auto 1.6rem;
  background:#ecd793; border-color:#c9b25f; text-align:center;
}
.cork-note--conclusion .cork-note-title{ font-size:1rem; color:#5a4a1a; }

/* ── Writing beat (flagship, 2026-07-03): the reader writes the conclusion ── */
.cork-writenote{ max-width:640px; margin:0 auto 1.4rem; }
.writenote-scaffold-label{
  font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color:#e8d9b0; margin:.7rem 0 .3rem;
}
.writenote-bank, .writenote-stems{ display:flex; flex-wrap:wrap; gap:.4rem; }
.writenote-chip, .writenote-stem{
  background:#f4ecd8; color:#2c2619; border:1px solid #d8cba5; border-radius:3px;
  font-family:'Courier Prime', 'Courier New', var(--mono); font-size:.8rem; padding:.28rem .55rem; cursor:pointer;
}
.writenote-stem{ font-style:italic; }
.writenote-chip:hover, .writenote-stem:hover{ background:#fff7e6; }
.writenote-input{
  display:block; width:100%; box-sizing:border-box; margin-top:.7rem;
  background:#f4ecd8; color:#2c2619; border:1px solid #d8cba5; border-radius:2px;
  font-family:'Courier Prime', 'Courier New', var(--mono); font-size:.95rem; line-height:1.5;
  padding:.7rem .75rem; resize:vertical; min-height:5rem;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.12);
}
.writenote-input:focus{ outline:none; border-color:#b08d3a; }
.writenote-meta{
  display:flex; align-items:center; justify-content:space-between; margin-top:.4rem; gap:1rem;
}
.writenote-count{ font-family:var(--mono); font-size:11px; color:#cbb98a; letter-spacing:.05em; }
.writenote-reveal{
  background:none; border:none; color:#e8d9b0; text-decoration:underline;
  font-family:var(--mono); font-size:11px; letter-spacing:.05em; cursor:pointer; padding:0;
}
.writenote-model{
  margin-top:.7rem; background:rgba(244,236,216,.14); border:1px dashed #b08d3a;
  border-radius:3px; padding:.6rem .75rem;
}
.writenote-model-label{
  font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color:#e8d9b0; margin-bottom:.3rem;
}
.writenote-model-text{ font-family:'Courier Prime', 'Courier New', var(--mono); font-size:.9rem; color:#f4ecd8; line-height:1.5; }
.writenote-fb{ display:none; }
.writenote-fb.soft{
  display:block; margin-top:.5rem; font-family:var(--mono); font-size:12px;
  color:#e6b8a0; letter-spacing:.03em;
}
/* Garcia's write nudges (2026-07-13): his voice on the cork board, not a
   system message. Presented as a proper tip — a boxed callout with a red
   left-accent — so it can't be missed (author: the earlier 12px whisper was
   too easy to overlook). Serves both the thin-write pushback and the soft
   over-length nudge. */
.writenote-fb.garcia-push{
  display:block; margin-top:.7rem;
  background:#f6ead0; border-left:3px solid #c0392b; border-radius:3px;
  padding:.55rem .8rem;
  font-family:var(--serif); font-size:.98rem; line-height:1.5;
  color:#7a2f22; letter-spacing:.01em;
}
.writenote-fb.garcia-push strong{ color:#3a2318; font-weight:700; }
/* Compose atmosphere (2026-07-13): the word bank is gone; this static prose
   points the reader at the board they assembled. A muted stage-direction, not
   an affordance — nothing to tap. */
.cork-compose-prose{
  max-width:540px; margin:.2rem auto .9rem; text-align:center;
  font-family:var(--serif); font-style:italic; color:#6a5d3e;
  font-size:.92rem; line-height:1.5;
}
.cork-note--written{
  display:block; width:min(480px, 94%); margin:0 auto 1.6rem;
  background:#f4ecd8; border-color:#c9b25f;
}
.cork-note-written-text{
  font-family:'Courier Prime', 'Courier New', var(--mono); font-size:.9rem; color:#2c2619;
  line-height:1.5; margin-top:.35rem; white-space:pre-wrap;
}
/* The write-up's own Save, on the note itself — separate skill from the
   reading, whose controls sit in the case-file row below (2026-07-13). */
.cork-note-actions{ margin-top:.7rem; text-align:right; }
.cork-note-save{
  display:inline-block;
  background:#e7ddc2; border:1px solid #c9b25f; color:#3a3326;
  font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; padding:.42rem .7rem; border-radius:4px; cursor:pointer;
}
.cork-note-save:hover{ border-color:#8a7a4e; color:#6b5416; }
/* ── Photos (2026-07-02): white-border prints of Bram's shots ──────────
   Same painterly art; the print frame + handwritten caption say "photo". */
.photo-snap{
  display:inline-block; background:#f7f3ea;
  padding:6px 6px 4px; border:1px solid #d8cfc0;
  box-shadow:0 6px 16px rgba(0,0,0,.38);
  transform:rotate(-1.2deg);
}
.photo-snap-img{ overflow:hidden; background:#14120e; }
.photo-snap-img img{ display:block; width:100%; height:100%; object-fit:cover; }
.photo-snap-caption{
  font-family:'Courier Prime', 'Courier New', var(--mono); font-style:italic;
  font-size:.72rem; color:#4a4232; text-align:center; padding:4px 2px 1px;
}
.photo-snap--chat{ width:min(240px, 72%); cursor:zoom-in; }
.photo-snap--chat .photo-snap-img{ height:140px; }
.photo-snap--thumb{ width:150px; cursor:zoom-in; }
.photo-snap--thumb .photo-snap-img{ height:104px; }
.photo-snap--chip{ width:100%; pointer-events:none; padding:4px 4px 3px; margin-bottom:.4rem; transform:rotate(1deg); }
.photo-snap--chip .photo-snap-img{ height:78px; }
.photo-snap--full{ width:min(86vw, 640px); transform:rotate(0deg); }
.photo-snap--full .photo-snap-img{ height:auto; max-height:76vh; }
.photo-snap--full .photo-snap-img img{ height:auto; transform:none; }
.photo-sheet{
  display:flex; flex-wrap:wrap; gap:20px; justify-content:center;
  padding:1.4rem 1rem 1.8rem; overflow:auto;
}
.photo-lightbox{
  position:fixed; inset:0; z-index:300; display:none;
  align-items:center; justify-content:center;
  background:rgba(8,10,14,.88); cursor:zoom-out;
}
.photo-lightbox.open{ display:flex; }
/* Clue detail overlay (2026-07-13): full readable clue text when a placed chip
   is tapped at the write stage. Sits above the PNB (z above .photo-lightbox). */
.clue-detail-overlay{
  position:fixed; inset:0; z-index:400; display:none;
  align-items:center; justify-content:center; padding:1.2rem;
  background:rgba(8,10,14,.82); cursor:zoom-out;
}
.clue-detail-overlay.open{ display:flex; }
.clue-detail-card{
  position:relative; cursor:auto; text-align:left;
  max-width:440px; width:100%; padding:1.5rem 1.4rem;
  background:#f4ecd8; border:1px solid #c9b25f; border-radius:6px;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  font-family:var(--serif); color:#2c2619;
}
.clue-detail-close{
  position:absolute; top:.45rem; right:.6rem;
  background:none; border:none; cursor:pointer;
  font-size:1.4rem; line-height:1; color:#7a6c48;
}
.clue-detail-close:hover{ color:#3a2f14; }
.clue-detail-title{ font-size:1.05rem; font-weight:700; color:#3a2f14; margin:.5rem 0 .45rem; padding-right:1.2rem; }
.clue-detail-text{
  font-family:'Courier Prime', 'Courier New', var(--mono); font-size:.95rem;
  line-height:1.55; color:#2c2619; white-space:pre-wrap;
}
.clue-detail-audio{ position:static; margin-top:.9rem; display:inline-block; }
/* Placed chips read as tappable-to-enlarge at the write stage. */
.cork-note--placed{ cursor:zoom-in; }
.text-photo .photo-snap{ margin:.15rem 0; }
@media (max-width:700px){
  .cork-sort-columns{ gap:8px; }
  .cork-column{ padding:10px 6px 12px; }
  .cork-dock{ gap:16px 8px; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); }
}
.cork-note--placed{ cursor:default; }
.cork-note--placed::after{
  content:'✓'; position:absolute; top:-9px; left:8px;
  background:#1d9e75; color:#eafff6; font-size:9px;
  width:15px; height:15px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.cork-note--wrong{ animation:corkShake .32s ease; outline:1.5px solid #c0392b; outline-offset:2px; }
@keyframes corkShake{
  0%,100%{ transform:translateX(0) rotate(0); }
  25%{ transform:translateX(-4px) rotate(-1deg); }
  75%{ transform:translateX(4px) rotate(1deg); }
}
.cork-sort-meta{ text-align:center; margin:1.4rem 0 .4rem; }
.cork-sort-counter{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:#f3e6cf; opacity:.9;
}
.cork-prompt-fb.correct{
  display:block; max-width:540px; margin:.4rem auto 1rem;
  font-family:var(--serif); color:#fff; text-align:center; font-size:1rem; line-height:1.5;
}
.cork-sort-continue{
  display:none; margin:1rem auto 0;
  background:#c0392b; color:#fbe6e2; border:1px solid #7e2418;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  padding:.7rem 1.4rem; border-radius:3px; cursor:pointer;
}
.cork-sort-continue.visible{ display:block; }
.cork-sort-continue:hover{ background:#a3302a; }
/* Commit-then-check (2026-07-02): amber "read it to Garcia" action — appears
   when every clue is placed; Garcia judges the board as a whole. */
.cork-sort-check{
  display:none; margin:1rem auto 0;
  background:#b08d3a; color:#2c2113; border:1px solid #7c6224;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  padding:.7rem 1.4rem; border-radius:3px; cursor:pointer;
}
.cork-sort-check.visible{ display:block; }
.cork-sort-check:hover{ background:#9a7a30; }

@media (max-width:600px){
  .cork-frame{ width:100%; max-height:96vh; }
  .cork-surface{ padding:1.2rem .8rem 1.6rem; }
  .cork-grid{ gap:26px 14px; }
  .cork-note{ width:140px; }
  .cork-note--anchor{ width:46%; }
}
.recap-title{
  font-family: var(--serif); font-weight: 600; font-size: 1.15rem;
  color: var(--text); margin-bottom: 1rem;
}
.recap-note{
  font-family: var(--serif); font-size: .96rem; color: var(--text-mid);
  line-height: 1.6; margin: -.35rem 0 1rem;
}
.recap-list{ display:flex; flex-direction:column; gap: .8rem; }
.recap-row{
  display:grid; grid-template-columns: 28px 1fr; gap: .9rem;
  align-items: baseline;
  padding-bottom: .8rem;
  border-bottom: 1px dashed var(--border-mid);
}
.recap-row:last-child{ border-bottom:none; padding-bottom:0; }
.recap-num{
  font-family: var(--mono); font-size: 10.5px; color: var(--accent-dim);
  letter-spacing: .1em;
}
.recap-label-line{
  font-family: var(--sans); font-size: .98rem; font-weight: 600;
  color: var(--text); margin-bottom: .15rem;
}
.recap-detail{
  font-family: var(--serif); font-size: .92rem; color: var(--text-mid);
  line-height: 1.55;
}
.recap-empty{
  font-family: var(--sans); font-size: .92rem; color: var(--text-dim); font-style: italic;
}
.recap-unresolved{
  margin-top: 1.1rem; padding-top: 1rem;
  border-top: 1px solid var(--border-mid);
  display:flex; flex-direction:column; gap:.45rem;
}
.recap-unresolved-label{
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  color: var(--text-dim); text-transform: uppercase;
}
.recap-unresolved-item{
  font-family: var(--serif); font-size: .94rem; color: var(--text-mid);
  line-height: 1.5;
}

/* ── Evidence panel (bottom-right, collapsible) ──────────────── */
.evidence-panel{
  position: fixed; right: 18px; bottom: 18px;
  width: 360px; max-width: calc(100vw - 36px);
  max-height: 60vh;
  background: var(--page);
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  box-shadow: 0 18px 60px rgba(0,0,0,.6);
  transform: translateY(calc(100% + 28px));
  opacity: 0; pointer-events: none;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s;
  z-index: 50;
  display:flex; flex-direction:column;
}
.evidence-panel.open{
  transform: translateY(0);
  opacity: 1; pointer-events: auto;
}
.evidence-head{
  flex:none;
  display:flex; align-items:center; justify-content:space-between;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border-mid);
  background: var(--widget-bg);
  border-radius: 6px 6px 0 0;
}
.evidence-head-title{
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  color: var(--accent); text-transform: uppercase;
}
.evidence-close{
  background: transparent; border: none; color: var(--text-dim);
  font-family: var(--mono); font-size: 14px; cursor:pointer;
  padding: 2px 6px; line-height: 1;
}
.evidence-close:hover{ color: var(--accent); }
.evidence-list{
  overflow-y: auto;
  padding: .8rem 1rem 1rem;
  display:flex; flex-direction: column; gap: .65rem;
}
.evidence-list::-webkit-scrollbar{ width:6px; }
.evidence-list::-webkit-scrollbar-thumb{ background: var(--border-mid); border-radius:3px; }
.evidence-empty{
  font-family: var(--sans); font-size: .9rem; color: var(--text-dim);
  font-style: italic; padding: .8rem 0;
}
.evidence-row{
  display:grid; grid-template-columns: 24px 1fr; gap: .6rem;
  padding-bottom: .65rem;
  border-bottom: 1px dashed var(--border-mid);
}
.evidence-row:last-child{ border-bottom:none; padding-bottom:0; }
.evidence-num{
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  color: var(--accent-dim); padding-top: 2px;
}
.evidence-label{
  font-family: var(--sans); font-size: .9rem; font-weight: 600;
  color: var(--text); margin-bottom: .15rem;
  letter-spacing: .005em;
}
.evidence-detail{
  font-family: var(--serif); font-size: .85rem; color: var(--text-mid);
  line-height: 1.5;
}

/* ── Tweaks-disabled mode (single-option-choice) ─────────────── */
body[data-choices-as-continue="true"] .choice-btn{
  /* When toggled: shows Continue-only style, removes choice framing */
  border-style: dashed;
  opacity: 0.95;
}
body[data-evidence-disabled="true"] .topbar-btn[data-target="evidence"]{ display:none; }
body[data-evidence-disabled="true"] .evidence-panel{ display:none !important; }
body[data-misconception-hidden="true"] .misconception{ display:none; }
body[data-recap-hidden="true"] .recap{ display:none; }
body[data-stage-map-hidden="true"] .stage-dots{ visibility:hidden; }

/* ── SKILLS · case notebook ────────────────────────── */
.skills-block{
  margin: 1.6rem 0 0;
  padding: 1.2rem 1.3rem 1.4rem;
  background: linear-gradient(180deg, #161e30 0%, #131a2a 100%);
  border: 1px solid var(--border-mid);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
}
.skills-head{ margin-bottom: 1rem; }
.skills-label{
  display:block;
  font-family: var(--mono); font-size: 10px; letter-spacing: .26em;
  color: var(--accent); text-transform: uppercase; margin-bottom: .35rem;
}
.skills-sub{
  font-family: var(--serif); font-size: .95rem; color: var(--text-mid);
  font-style: italic;
}
.skill-task{
  padding: 1rem 0 1.1rem;
  border-top: 1px dashed var(--border-mid);
}
.skill-task:first-of-type{ border-top: none; padding-top: .3rem; }
.skill-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap: .6rem; margin-bottom: .55rem;
}
.skill-kind{
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em;
  color: var(--accent); text-transform: uppercase;
}
.skill-cefr{
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  color: var(--text-dim); text-transform: uppercase;
}
.skill-prompt{
  font-family: var(--serif); font-size: 1rem; color: var(--text);
  line-height: 1.6; margin-bottom: .7rem;
}
.skill-feedback{
  margin-top: .7rem; padding: .65rem .8rem; border-radius: 3px;
  font-family: var(--sans); font-size: .9rem; line-height: 1.55;
}
.skill-feedback.correct{
  background: var(--success-bg); border: 1px solid color-mix(in oklab, var(--success) 35%, transparent);
  color: var(--success);
}
.skill-feedback.soft{
  background: var(--soft-bg); border: 1px solid color-mix(in oklab, var(--soft) 35%, transparent);
  color: var(--soft);
}
.skill-explain{ margin-top: .4rem; color: var(--text-mid); font-style: italic; }
.skill-hint{
  margin-top: .5rem; font-family: var(--serif); font-size: .9rem;
  color: var(--accent); font-style: italic;
}

/* gap-fill */
.gap-sentence{
  font-family: var(--serif); font-size: 1rem; line-height: 1.7;
  color: var(--text); padding: .55rem .8rem;
  background: var(--page-inner); border: 1px solid var(--border-mid);
  border-radius: 3px; margin-bottom: .7rem;
}
.gap-blank{
  display:inline-block; min-width: 90px; text-align:center;
  border-bottom: 1px solid var(--accent-dim);
  color: var(--text-dim); font-family: var(--mono); font-size: .85rem;
  padding: 0 .35rem; letter-spacing: .04em;
}
.gap-blank.filled{
  font-family: var(--serif); font-size: 1rem; color: var(--text);
  letter-spacing: 0;
}
.gap-blank.correct{ color: var(--success); border-bottom-color: var(--success); }
.gap-blank.soft-wrong{ color: var(--soft); border-bottom-color: var(--soft); }
.gap-pool{ display:flex; flex-wrap:wrap; gap: .45rem; }
.gap-chip{
  font-family: var(--sans); font-size: .9rem; font-weight: 600;
  padding: .4rem .85rem; border: 1px solid var(--border-mid);
  background: var(--widget-bg); color: var(--text);
  border-radius: 3px; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.gap-chip:hover:not(:disabled){ border-color: var(--accent); color: var(--accent); }
.gap-chip:disabled{ opacity: .35; cursor: default; }

/* mcq */
.mcq-options{ display:flex; flex-direction:column; gap: .55rem; }
.mcq-btn{
  display:grid; grid-template-columns: 28px 1fr; gap: .8rem; align-items:start;
  padding: .8rem .95rem; border: 1px solid var(--border-mid);
  background: var(--widget-bg); color: var(--text);
  border-radius: 3px; cursor: pointer; text-align: left;
  font-family: var(--serif); font-size: .98rem; line-height: 1.5;
  transition: border-color .2s, background .2s, color .2s;
}
.mcq-btn:hover:not(:disabled){ border-color: var(--accent); }
.mcq-bullet{
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  color: var(--accent-dim);
  border: 1px solid var(--border-mid); border-radius: 50%;
  width: 22px; height: 22px; display:inline-flex; align-items:center; justify-content:center;
  margin-top: 1px;
}
.mcq-btn.correct{ border-color: var(--success); background: var(--success-bg); color: var(--success); }
.mcq-btn.correct .mcq-bullet{ border-color: var(--success); color: var(--success); }
.mcq-btn.soft-wrong{ border-color: var(--soft); background: var(--soft-bg); color: var(--soft); }
.mcq-btn.soft-wrong .mcq-bullet{ border-color: var(--soft); color: var(--soft); }
.mcq-btn.reveal-correct{ border-color: var(--success); color: var(--success); }
.mcq-btn.reveal-correct .mcq-bullet{ border-color: var(--success); color: var(--success); }
.mcq-btn:disabled{ cursor: default; }

/* short-write */
.write-starters{ display:flex; flex-wrap:wrap; gap: .4rem; margin-bottom: .55rem; }
.starter-chip{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  color: var(--accent); background: transparent;
  border: 1px dashed var(--accent-dim); border-radius: 3px;
  padding: .35rem .65rem; cursor: pointer;
  transition: background .2s, color .2s;
}
.starter-chip:hover:not(:disabled){ background: var(--hint-bg); }
.starter-chip:disabled{ opacity: .4; cursor: default; }
.write-area{
  width: 100%; min-height: 84px; resize: vertical;
  font-family: var(--serif); font-size: 1rem; line-height: 1.6; color: var(--text);
  background: var(--page-inner); border: 1px solid var(--border-mid);
  border-radius: 3px; padding: .7rem .85rem;
  outline: none; transition: border-color .2s;
}
.write-area:focus{ border-color: var(--accent); }
.write-area:disabled{ opacity: .85; }
.write-meta{
  display:flex; gap: .9rem; margin-top: .35rem;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  color: var(--text-dim); text-transform: uppercase;
}
.write-checks{
  display:flex; flex-direction:column; gap: .25rem;
  margin: .65rem 0 .8rem;
}
.check-row{
  display:flex; align-items:center; gap: .55rem;
  font-family: var(--sans); font-size: .85rem; color: var(--text-dim);
  transition: color .2s;
}
.check-row.ok{ color: var(--success); }
.check-mark{ font-family: var(--mono); font-size: 12px; width: 14px; text-align:center; }
.skill-submit{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase;
  background: transparent; border: 1px solid var(--accent); color: var(--accent);
  padding: .55rem 1.2rem; border-radius: 3px; cursor: pointer;
  transition: background .2s, color .2s;
}
.skill-submit:hover:not(:disabled){ background: var(--accent); color: var(--bg); }
.skill-submit:disabled{ opacity: .4; cursor: default; }

/* ── GLOSSARY · investigator words ──────────────────── */
.glossary-block{
  margin: 1.4rem 0 0;
  padding: 1rem 1.2rem 1.1rem;
  background: var(--widget-bg);
  border: 1px solid var(--border-mid);
  border-left: 3px solid var(--accent-dim);
  border-radius: 4px;
}
.glossary-head{ margin-bottom: .8rem; }
.glossary-label{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  color: var(--accent); text-transform: uppercase;
  display:block; margin-bottom: .35rem;
}
.glossary-intro{
  font-family: var(--serif); font-size: .92rem; line-height: 1.5;
  color: var(--text-mid); font-style: italic;
}
.glossary-list{ display:grid; gap: .6rem; }
.glossary-row{
  display:grid; grid-template-columns: 130px 1fr; gap: 1rem;
  padding: .55rem 0;
  border-top: 1px dashed var(--border-mid);
}
.glossary-row:first-child{ border-top: none; padding-top: .25rem; }
.glossary-word-col{ display:flex; flex-direction:column; }
.glossary-word{
  font-family: var(--serif); font-size: 1.02rem; font-weight: 600;
  color: #f0ead8; letter-spacing: .005em;
}
.glossary-pos{
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  color: var(--text-dim); text-transform: uppercase;
  margin-top: .15rem;
}
.glossary-defn-col{ font-family: var(--serif); font-size: .96rem; line-height: 1.55; color: var(--text); }
.glossary-defn{ }
.glossary-example{
  margin-top: .35rem;
  font-style: italic; color: var(--text-mid); font-size: .9rem;
}
.glossary-example em{ color: var(--accent); font-style: italic; }

/* ── PIN-EVIDENCE task ──────────────────────────────── */
.skill-pin .pin-instruction{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  color: var(--text-dim); text-transform: uppercase;
  margin: .2rem 0 .65rem;
}
.pin-board{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .55rem; margin-bottom: .9rem;
}
.pin-card{
  display:flex; flex-direction:column; gap: .2rem; align-items:flex-start;
  text-align:left;
  background: var(--page-inner);
  border: 1px solid var(--border-mid);
  border-left: 3px solid var(--accent-dim);
  border-radius: 3px;
  padding: .65rem .8rem;
  font-family: var(--serif);
  color: var(--text);
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s;
}
.pin-card:hover:not(:disabled){
  border-color: var(--accent);
  border-left-color: var(--accent);
  transform: translateY(-1px);
}
.pin-card-name{
  font-family: var(--sans); font-size: .82rem; font-weight: 600;
  color: #f0ead8; letter-spacing: .005em;
}
.pin-card-detail{
  font-family: var(--serif); font-size: .9rem; line-height: 1.45;
  color: var(--text-mid);
}
.pin-card.correct{
  border-color: var(--success);
  border-left-color: var(--success);
  background: var(--success-bg);
  cursor: default;
}
.pin-card.correct .pin-card-name{ color: var(--success); }
.pin-card.soft-wrong{
  border-color: var(--soft);
  border-left-color: var(--soft);
  background: var(--soft-bg);
  opacity: .85;
}
.pin-empty{
  font-family: var(--mono); font-size: 11px; color: var(--text-dim);
  letter-spacing: .04em; padding: .8rem; text-align:center;
  border: 1px dashed var(--border-mid); border-radius: 3px;
}
.pin-pinned{
  margin-top: .3rem; padding: .55rem .75rem;
  background: rgba(200, 146, 74, 0.04);
  border: 1px dashed var(--accent-dim);
  border-radius: 3px;
}
.pin-pinned-label{
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em;
  color: var(--text-dim); text-transform: uppercase;
  margin-bottom: .25rem;
}
.pin-pinned-slot{
  font-family: var(--serif); font-size: .92rem; color: var(--text-mid);
  font-style: italic;
  display:flex; flex-direction:column; gap:.15rem;
}
.pin-pinned-slot.has-pin{ font-style: normal; color: var(--text); }
.pin-pinned-slot.has-pin .pin-card-name{ color: var(--accent); }

/* ── THEORY BRIDGE · sort clues ─────────────────────── */
.theory-bridge{
  margin: 1.6rem 0 0;
  padding: 1.2rem 1.3rem 1.4rem;
  background: var(--widget-bg);
  border: 1px solid var(--border-mid);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
}
.theory-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom: .6rem; gap: .8rem; flex-wrap: wrap;
}
.theory-label{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em;
  color: var(--accent); text-transform: uppercase;
}
.theory-prompt{
  font-family: var(--serif); font-size: 1rem; color: var(--text);
  line-height: 1.55; margin-bottom: .35rem;
}
.theory-instruction{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  color: var(--text-dim); text-transform: uppercase;
  margin-bottom: .8rem;
}
.theory-tray{
  display:flex; flex-wrap:wrap; gap: .5rem;
  padding: .8rem;
  border: 1px dashed var(--border-mid);
  border-radius: 3px;
  background: var(--page-inner);
  min-height: 64px;
  margin-bottom: .8rem;
}
.theory-empty{
  font-family: var(--mono); font-size: 11px; color: var(--text-dim);
  letter-spacing: .04em; padding: .4rem; width: 100%; text-align:center;
}
.theory-zones{
  display:grid; grid-template-columns: 1fr 1fr; gap: .7rem;
  margin-bottom: .8rem;
}
.theory-zones.cols-3{ grid-template-columns: 1fr 1fr 1fr; }
.theory-zone{
  background: var(--page-inner);
  border: 1px solid var(--border-mid);
  border-radius: 3px;
  padding: .8rem .85rem 1rem;
  min-height: 140px;
  transition: border-color .2s, background .2s;
}
.theory-zone.over{
  border-color: var(--accent);
  background: rgba(200, 146, 74, 0.06);
}
.theory-zone-head{ margin-bottom: .55rem; }
.theory-zone-name{
  display:block;
  font-family: var(--sans); font-size: .92rem; font-weight: 600;
  color: #f0ead8; letter-spacing: -0.005em;
  margin-bottom: .15rem;
}
.theory-zone-hint{
  display:block;
  font-family: var(--serif); font-size: .82rem; color: var(--text-dim);
  font-style: italic; line-height: 1.4;
}
.theory-zone-slots{
  display:flex; flex-direction:column; gap: .35rem;
  min-height: 40px;
}
.theory-chip{
  display:flex; flex-direction:column; gap: .15rem; align-items:flex-start;
  text-align:left;
  background: var(--bg);
  border: 1px solid var(--border-mid);
  border-radius: 3px;
  padding: .5rem .65rem;
  font-family: var(--serif);
  color: var(--text);
  cursor: grab;
  transition: border-color .15s, background .15s, transform .12s;
  user-select: none;
  max-width: 100%;
}
.theory-chip:hover:not(:disabled){
  border-color: var(--accent-dim);
  transform: translateY(-1px);
}
.theory-chip:active{ cursor: grabbing; }
.theory-chip.dragging{ opacity: .5; }
.theory-chip.selected{
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.theory-chip-name{
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  color: #f0ead8; letter-spacing: .005em;
}
.theory-chip-detail{
  font-family: var(--serif); font-size: .82rem; line-height: 1.4;
  color: var(--text-mid);
}
.theory-chip.placed.correct{
  border-color: var(--success);
  background: var(--success-bg);
  cursor: default;
}
.theory-chip.placed.correct .theory-chip-name{ color: var(--success); }
.theory-chip.placed.soft-wrong{
  border-color: var(--soft);
  background: var(--soft-bg);
}
.theory-meta{
  display:flex; justify-content:space-between; align-items:center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  color: var(--text-dim); text-transform: uppercase;
  margin-top: .2rem;
}
.theory-counter{}
.theory-reset{
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--text-mid); background: transparent;
  border: 1px solid var(--border-mid); border-radius: 3px;
  padding: .3rem .6rem; cursor: pointer; text-transform: uppercase;
  transition: border-color .15s, color .15s;
}
.theory-reset:hover{ border-color: var(--accent); color: var(--accent); }
.theory-bridge .continue-btn{ margin-top: 1rem; }
/* Inline commit-then-check + synthesis write beat (2026-07-06) */
.theory-bridge .cork-sort-check{ margin: 1rem auto 0; }
.theory-write{ margin-top: 1.1rem; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 700px){
  body{ padding: .65rem .65rem 1rem; }
  .topbar{ font-size: 9.5px; }
  .topbar-right{ gap: .8rem; }
  .progress-strip{
    grid-template-columns: 1fr;
    gap: .6rem;
    padding: .6rem 1.1rem .8rem;
  }
  .progress-right{ justify-self: end; }
  .stage-dots{ justify-content: flex-start; gap: .25rem; }
  .pane-content{ padding: 1.4rem 1.3rem 2rem; }
  .chapter-header-text{ padding: 0 1.4rem 1.1rem; }
  .reading-pane{ height: clamp(420px, 75vh, 720px); }
  .evidence-panel{ left: 8px; right: 8px; width: auto; max-height: 70vh; }
  .examine-card{ padding: .85rem .95rem 1rem; }
  .widget{ padding: 1.1rem 1.2rem; }
  .theory-zones{ grid-template-columns: 1fr; }
  .theory-zones.cols-3{ grid-template-columns: 1fr; }
  .glossary-row{ grid-template-columns: 1fr; gap: .25rem; }
  .pin-board{ grid-template-columns: 1fr; }
}

/* ── Bare skills block + write-reply thoughts scaffold (2026-07-08) ──
   Author ruling: tasks entered from prose carry no exercise chrome. */
.skills-block--bare{
  background: none;
  border: none;
  border-left: 2px solid var(--border-mid);
  border-radius: 0;
  padding: .2rem 0 .3rem 1.1rem;
  margin: 1.2rem 0 0;
}
.wreply-thoughts-line{ margin: .9rem 0 .2rem; }
.wreply-scaffold{ margin: .5rem 0 .4rem; }
.wreply-thoughts-intro{
  font-family: var(--serif); font-size: .95rem; color: var(--text-mid);
  font-style: italic; margin: 0 0 .55rem;
}