/* ============================================================
   ICEHOUSE v3 — tweaks.css (panel-only styling)
   ============================================================ */
.tweaks-panel{
  position: fixed; top: 18px; right: 18px;
  width: 320px; max-width: calc(100vw - 36px);
  background: var(--page);
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  z-index: 80;
  opacity: 0; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .25s, transform .25s;
}
.tweaks-panel.open{ opacity: 1; pointer-events: auto; transform: none; }
.tweaks-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--border-mid);
  background: var(--widget-bg);
  border-radius: 6px 6px 0 0;
}
.tweaks-title{
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  color: var(--accent); text-transform: uppercase;
}
.tweaks-close{
  background: transparent; border: none; color: var(--text-dim);
  font-size: 18px; cursor: pointer; line-height: 1; padding: 0 4px;
}
.tweaks-close:hover{ color: var(--accent); }
.tweaks-body{ padding: .85rem 1rem 1.1rem; }
.tweaks-section-label{
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em;
  color: var(--text-dim); text-transform: uppercase;
  margin-bottom: .6rem;
}
.tweak-row{
  display:flex; gap: .65rem; align-items: flex-start;
  padding: .55rem 0;
  border-top: 1px dashed var(--border-mid);
  cursor: pointer;
}
.tweak-row:first-of-type{ border-top: none; padding-top: .25rem; }
.tweak-row input{
  margin-top: 4px; accent-color: var(--accent);
}
.tweak-text{ display:flex; flex-direction:column; gap: 2px; }
.tweak-name{
  font-family: var(--sans); font-size: .92rem; font-weight: 600;
  color: var(--text);
}
.tweak-hint{
  font-family: var(--serif); font-size: .82rem; color: var(--text-mid);
  line-height: 1.4;
}
.tweaks-foot{
  margin-top: .9rem;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  color: var(--text-dim); text-transform: uppercase;
  border-top: 1px solid var(--border-mid);
  padding-top: .7rem;
}

/* ── Gated content blocks (V8 disclosure addendum §4) ────── */
.gated-block.gated-hidden { display: none; }
.gated-block.gated-revealed { animation: gatedFadeIn 0.45s ease-out; }
@keyframes gatedFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ── Visible-disabled choice gating (disclosure ruling) ──── */
.choice-btn--locked { opacity: 0.45; cursor: default; }
.choice-cue {
  font-style: italic;
  font-size: 0.85em;
  opacity: 0.7;
  margin: 0.6em 0 0.25em;
}

/* ============================================================
   PNB HUB — Board folded in as a tab + placeholder pages
   (2026-06-12: Case Board moved from footer button into the PNB,
   per V8_TOOLKIT_ROADMAP target anatomy.)
   ============================================================ */
.journal-panel{
  width: min(440px, calc(100vw - 32px));
  max-height: 82vh;
}
/* Board tab active: the sort needs room for two side-by-side theory columns,
   so the PNB broadens to near-viewport while this tab is showing (2026-07-02). */
.journal-panel.journal-panel--board{
  width: min(1100px, calc(100vw - 20px));
  max-height: 94vh;
}
/* Six tabs in two rows of three */
.journal-panel .journal-tabs{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.journal-panel .journal-tab{
  font-size: 10px;
  letter-spacing: .12em;
  padding: .55rem .25rem;
  border-right: 1px solid var(--border-mid);
  border-bottom: 1px solid var(--border-mid);
}
/* Tidy the grid edges: no border on the right column or the bottom row */
.journal-panel .journal-tab:nth-child(3n){ border-right: none; }
.journal-panel .journal-tab:nth-child(n+4){ border-bottom: none; }
/* Placeholder pages (Evidence / Photos / People) */
.journal-placeholder{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .55rem;
  padding: 2rem 1.4rem;
  color: var(--text-dim);
}
.journal-placeholder .ph-icon{ font-size: 2.4rem; opacity: .45; }
.journal-placeholder .ph-title{
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent);
}
.journal-placeholder .ph-sub{
  font-family: var(--serif); font-size: .9rem; line-height: 1.55;
  max-width: 34ch; opacity: .85;
}
.journal-placeholder .ph-soon{
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; opacity: .4; margin-top: .4rem;
}
/* The cork board, now hosted inside the PNB Board pane */
.journal-board-pane{ padding: 0; }
.journal-board-pane.active{ display: flex; }
.journal-board-pane .cork-frame{
  width: 100%;
  max-height: none;
  height: 100%;
  border-radius: 0;
  border: none;
  box-shadow: none;
  padding: 6px;
  background: #6f4d2c;
  position: relative;
}
.journal-board-pane .cork-surface{ min-height: 320px; }

/* ── Case Files pocket (2026-07-15) ─────────────────────────────────
   A manila case-file folder pinned to the fixed journal panel (stays in view
   while the board scrolls); always present on the board tab. The "lip" is a
   tab peeking above the folder body to read as a real folder. */
#corkNotes{ position: relative; }   /* anchor the folder to the board's bottom-right corner */
.cork-casefile-pocket{
  position: absolute; right: 22px; bottom: 22px; width: 162px; z-index: 6;
  cursor: pointer; filter: drop-shadow(0 6px 14px rgba(0,0,0,.4));
}
.cork-casefile-tab{
  display: block; width: 78px; height: 16px; margin-left: 8px;
  background: #d8b25f; border: 1px solid #9c7735; border-bottom: none;
  border-radius: 6px 10px 0 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);
}
.cork-casefile-paper{
  display: block; height: 7px; margin: 0 7px -4px; position: relative; z-index: 1;
  background: #f6efdd; border: 1px solid #d8cba5; border-bottom: none;
  border-radius: 3px 3px 0 0;
}
.cork-casefile-body{
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  background: #e8c982; border: 1px solid #9c7735;
  border-radius: 1px 9px 9px 9px; padding: 13px 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.cork-casefile-pocket:hover .cork-casefile-body,
.cork-casefile-pocket:focus-visible .cork-casefile-body{ background: #f0d493; }
.cork-casefile-name{
  flex: 1; font-family: 'Courier Prime', 'Courier New', var(--mono); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: #4a3410;
}
.cork-casefile-count{
  background: #c0392b; color: #fbe6e2; font-family: var(--mono);
  font-size: 11px; min-width: 18px; text-align: center;
  padding: 1px 6px; border-radius: 10px;
}
.cork-casefile-empty{
  font-family: 'Courier Prime', 'Courier New', var(--mono); font-size: 12px;
  color: #5c3f10; padding: 8px 2px;
}
.cork-casefile-drawer{
  position: absolute; inset: 0; z-index: 7;
  background: rgba(28,20,10,.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 28px 18px; overflow: auto;
}
.cork-casefile-panel{
  width: min(460px, 94%); background: #c2a06a;
  border: 2px solid #8a6238; border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0,0,0,.5); padding: 16px 18px 20px;
}
.cork-casefile-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 14px;
}
.cork-casefile-head-title{
  font-family: 'Courier Prime', 'Courier New', var(--mono); font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: #3a2f1a;
}
.cork-casefile-x, .cork-casefile-back{
  background: none; border: none; cursor: pointer; color: #5c3f10;
  font-family: 'Courier Prime', 'Courier New', var(--mono);
}
.cork-casefile-x{ font-size: 20px; line-height: 1; padding: 0 4px; }
.cork-casefile-back{ font-size: 12px; padding: 2px 4px; letter-spacing: .06em; text-transform: uppercase; }
.cork-casefile-back:hover, .cork-casefile-x:hover{ color: #2c2113; }
.cork-casefile-folders{ display: flex; flex-direction: column; gap: 20px; padding-top: 6px; }
.cork-casefile-folder{
  position: relative; display: flex; align-items: center; gap: 10px;
  text-align: left; background: #e8c982; border: 1px solid #9c7735;
  border-radius: 1px 9px 9px 9px; padding: 14px 14px 13px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.cork-casefile-folder:hover{ background: #f0d493; }
.cork-casefile-folder-lip{
  position: absolute; top: -12px; left: 10px; width: 64px; height: 13px;
  background: #d8b25f; border: 1px solid #9c7735; border-bottom: none;
  border-radius: 6px 9px 0 0; clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
}
.cork-casefile-folder-name{
  flex: 1; font-family: 'Courier Prime', 'Courier New', var(--mono); font-size: 13px; color: #3a2f1a;
}
.cork-casefile-chapter-title{
  font-family: 'Courier Prime', 'Courier New', var(--mono); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
  color: #4a3d22; margin-bottom: 12px;
}
.cork-casefile-card{ width: auto; max-width: none; margin-bottom: 12px; }
.cork-casefile-play{ display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.cork-casefile-play .cork-take-label{
  font-family: 'Courier Prime', 'Courier New', var(--mono); font-size: 12px;
  color: #7a2b1d; cursor: pointer;
}

/* A gated paragraphs block wraps its .passage, which makes the passage a
   :last-child inside the wrapper and wrongly triggers .passage:last-child
   {margin-bottom:0} — cramming the prose against the next block (examine).
   Restore the normal inter-block spacing inside gated blocks. */
.gated-block .passage:last-child { margin-bottom: 1.6rem; }

/* Reaction-line fade (2026-07-08): the examine reaction was a bare display
   toggle that snapped into the layout. Fade it in to match the card reveal. */
.examine-reaction.reaction-in { animation: reactionIn 0.4s ease-out; }
@keyframes reactionIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* Examine unit rhythm (2026-07-08): each examine (trigger line + card +
   reaction) is one .examine-unit. Give the unit the prose paragraph rhythm
   so examine hyperlink lines sit at the same above/below spacing as normal
   paragraphs — gated or not. Internal trigger/card/reaction margins keep the
   within-paragraph rhythm. No :last-child override: a gated examine is always
   the last child of its block, so zeroing it there would re-butt the units. */
.examine-unit { margin: 0 0 1.6rem; }

/* Re-openable tool triggers (journal/board/map) keep their live colour but
   stop the "new here" pulse after first use (2026-07-08). Consumed one-shots
   use .used (greyed) instead — see .examine-trigger.used in style.css. */
.examine-trigger.trigger-quiet .trigger-indicator { animation: none; opacity: .45; }

/* Scaffold-on-demand for the cork writeNote (The Detective's Explanation,
   2026-07-12). The trigger line + intro were styled for the dark story pane;
   the board is dark-on-tan, so scope legible variants here. */
.cork-thoughts-line{
  max-width:640px; margin:.1rem auto .6rem; text-align:center;
  font-family:var(--serif); font-size:.98rem; color:#3a3326;
}
.cork-thoughts-line .examine-trigger{ color:#3a3326; border-bottom-color:#8a7a4e; }
.cork-thoughts-line .examine-trigger:hover{ color:#6b5416; border-bottom-color:#6b5416; }
.cork-thoughts-line .examine-trigger.used{ color:#7a6f58; border-bottom-color:#b8ab85; }
.cork-writenote-scaffold{ margin:.2rem 0 .5rem; }
.cork-writenote-scaffold .wreply-thoughts-intro{
  font-family:var(--serif); font-style:italic; color:#5a5140;
  font-size:.92rem; margin:0 0 .5rem; text-align:center;
}

/* Board typography (author ruling 2026-07-12): the global strong{color:#fff}
   is dark-pane styling — on the cream cork cards it rendered every <strong>
   lead-in ("Garcia's split.", "Garcia, quiet on the line.", and the c2/c3
   board prompts) white-on-cream, near-invisible. On cork, emphasis inherits
   the card ink (#3a3326) and lets the bold weight do the work — matching the
   plain-text Garcia lines exactly. */
.cork-prompt strong, .cork-note strong, .journal-board-pane strong{ color: inherit; }

/* Audio evidence on the board (2026-07-12): listening beats carry their clip
   onto the cork — a small speaker control by the pin replays it. Its hit area
   is its own: it never selects a clue and never starts a drag. */
.cork-audio-btn{
  position:absolute; top:4px; right:6px;
  width:26px; height:26px; border-radius:50%;
  background:#efe6cf; color:#3a3326; border:1px solid #cabd97;
  font-size:11px; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 2px 5px rgba(0,0,0,.25);
  z-index:2;
}
.cork-audio-btn:hover{ background:#f7efdb; border-color:#8a7a4e; }

/* Audio notes: keep the title clear of the speaker control (author fix
   2026-07-12 — "about" in "They know about Bram" sat under the button). */
.cork-note--audio .cork-note-title{ padding-right: 34px; }

/* Case File Phase 1 (2026-07-12): recording session + take row on the board. */
.cork-record-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.6rem; margin:.7rem auto;
}
.cork-rec-indicator{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:#8a1f1f; display:inline-flex; align-items:center; gap:.45rem;
  text-transform:uppercase;
}
.cork-rec-dot{
  width:10px; height:10px; border-radius:50%; background:#c0392b;
  display:inline-block; animation:pulse 1.2s ease-in-out infinite;
}
/* 60s-cap countdown (2026-07-13): last-10-seconds readout inside the
   indicator. Space reserved so its appearance never shifts the row. */
.cork-rec-count{
  display:inline-block; min-width:3.2ch;
  font-variant-numeric:tabular-nums;
}
.cork-rec-skip, .cork-export-btn{
  background:#efe6cf; border:1px solid #cabd97; color:#3a3326;
  font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  padding:.4rem .6rem; border-radius:4px; cursor:pointer;
}
.cork-rec-skip:hover, .cork-export-btn:hover{ border-color:#8a7a4e; color:#6b5416; }
.cork-casefile{ margin:.4rem auto 1rem; }
.cork-take-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem;
}
.cork-take-row .cork-audio-btn{ position:static; }
.cork-take-label{
  font-family:var(--mono); font-size:10px; color:#3a3326;
  letter-spacing:.08em; text-transform:uppercase;
}

/* Blocked-mic notice (2026-07-12): the silent fallback must explain itself. */
.cork-mic-note{
  font-family:var(--mono); font-size:10px; letter-spacing:.04em;
  color:#8a1f1f; text-align:center; margin:.45rem auto .2rem; max-width:420px;
}

/* Thin-send response (2026-07-12): the send always reacts. */
.writenote-commit--shake{ animation: sendShake .3s ease; }
@keyframes sendShake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-5px); } 75%{ transform:translateX(5px); }
}

/* ── Coming Soon teaser (shared/demo build only) ─────────────────────────
   The injected "coming-soon" page sets hideChrome; navigation.js adds
   .page-hide-chrome to <body> while it is active. Drop the Chapter-1 banner
   and progress count, and strip the trailing chapter-end block down to just
   its "Return to the beginning →" replay button. No effect in the full game
   (nothing sets hideChrome there). */
body.page-hide-chrome #chapterHeader,
body.page-hide-chrome #progressCount,
body.page-hide-chrome .pane-top-rule,
body.page-hide-chrome .chapter-end-stars,
body.page-hide-chrome .chapter-end-title,
body.page-hide-chrome .chapter-end-summary,
body.page-hide-chrome .chapter-end-evidence,
body.page-hide-chrome .chapter-end-next { display: none; }

/* Clue-detail overlay audio button: the base .cork-audio-btn (a 26px absolute
   circle) loses to nothing here because tweaks.css loads after style.css, so
   the intended .clue-detail-audio override was defeated — the "▶ Play the clip"
   text spilled outside a 26px circle in the corner and its hit-area missed the
   text. Win the cascade with the combined selector and make it a real inline
   button (2026-07-14). */
/* The enlarged clue keeps the SAME ▶ control as the chip it came from (author
   2026-07-14): a 26px disc in the top-right corner, glyph only. Sits left of
   the × close so the two never collide. (The base .cork-audio-btn already
   supplies the disc; only the corner offset needs restating, because the card
   is a different box.) */
.cork-audio-btn.clue-detail-audio{
  position:absolute; top:.5rem; right:2.5rem;
  margin:0;
}

/* "What you told Garcia" is now clickable to play the take (render.js), not
   just the small ▶ — signal it. */
.cork-take-label{ cursor:pointer; }

/* Green pin head for the RESOLVED conclusion (author 2026-07-14) — the board's
   own mark that this one is settled, matching the green threads that converge
   on it. Same construction as the red/amber heads. */
.cork-pin--green{ background:radial-gradient(circle at 38% 34%, #9fe3cb 0 3px, #1d9e75 4px 7px); }

/* "Another way to say it" is now a pinned note on the board, not a text box.
   It reads as a second note beside the reader's own — never as a marked answer,
   so it must NOT wear the green tick that .cork-note--placed carries. */
.cork-note--model{ margin-top:.6rem; }
.cork-note--model::after{ content:none; }

/* Post-write "Another way to say it" toggle: sit in the written note's own
   480px column, tucked at its bottom-right (author 2026-07-14 — the bare
   space-between row left the lone toggle stranded at the board's far left). */
.writenote-meta--postwrite{
  width:min(480px, 94%);
  margin:-1.1rem auto 1rem;
  justify-content:flex-end;
}

/* Audio evidence chips (author 2026-07-14): the detail line is a short
   verbatim quote from the clip — set it as speech (italic) on the chip and in
   the enlarge overlay. The quotes live in the text itself. */
.cork-note--audio .cork-note-detail{ font-style:italic; }
.clue-detail-text--spoken{ font-style:italic; }

/* Coming Soon teaser (demo build): the closing line is a TRAILER CARD, not
   prose (author 2026-07-14) — set in the title screen's own idiom so the demo
   bookends: Lora title like .title-main, amber letterspaced mono date like
   .title-series. Classes only appear on the injected demo page. */
.coming-soon-kicker{ display:block; text-align:center; margin-top:2.4rem; }
.cs-kicker-title{
  display:block; font-family:var(--serif);
  font-size:clamp(24px,3.5vw,34px); color:var(--text);
  margin-bottom:.7rem;
}
.cs-kicker-date{
  display:block; font-family:var(--mono); font-size:11px;
  letter-spacing:.28em; color:var(--accent); text-transform:uppercase;
}

/* ── Case-file presentation pass (author 2026-07-15) ────────────────────────
   The recording beat and its two artifacts (the note, the call), cleaned up
   and sequenced: note → Garcia reacts → the reading → "file it" → close. */

/* #2 Recording in progress: ONE centred column, so the live pulsing dot +
   "On the line — read it to him" sit WITH the "That's it" button (the button's
   margin:auto was flinging them to the far left) — the live cue is where the
   focus is. "Not now" demoted to a quiet link. */
.cork-record-row{ flex-direction:column; align-items:center; gap:.55rem; }
.cork-record-row .cork-sort-check{ margin:0; }
.cork-record-row .cork-rec-indicator{ font-size:12px; }
.cork-rec-skip{
  background:none; border:none; box-shadow:none; padding:0;
  color:#7a6c48; text-decoration:underline; text-transform:none;
  letter-spacing:.02em; font-size:11px;
}
.cork-rec-skip:hover{ color:#3a2f14; border-color:transparent; }

/* #3 The reading as a CARD (inherits .cork-note--written): title, a centred
   play control, centred actions — matches "The case, in my words". */
.cork-note--call .cork-note-title{ margin-bottom:.1rem; }
.cork-call-play{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin:.7rem 0 .2rem;
}
.cork-call-play .cork-audio-btn{ position:static; }
.cork-call-play .cork-take-label{ text-transform:none; letter-spacing:.02em; font-size:12px; color:#3a3326; }
.cork-call-actions{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem;
}
.cork-note-save--muted{ opacity:.72; }
/* A quiet take exists but is not a call — no play control, only the record CTA. */
.cork-call-record{ display:inline-block; }

/* #1 The quiet-take warning is Garcia's own centred box now, with a red accent
   + red bold to mark the problem — not the wide left-aligned banner. */
.cork-prompt.cork-take-quiet{ border-left:3px solid #c0392b; }
.cork-prompt.cork-take-quiet strong{ color:#8a1f1f; }

/* ============================================================
   POST-SORT STACK REDESIGN (author-approved via live mock, 2026-07-16)
   The completed board's lower half read as a mish-mash: three box widths
   (480/540/667), three near-identical creams, two different treatments for
   Garcia's own dialogue, five different vertical gaps, and a runt-prone
   wrap. One system now: pinned artifacts = typewriter notes at the shared
   width; Garcia's voice = serif boxes with a spine accent at the same
   width; one rhythm between all of it.
   ============================================================ */

/* 1. One content width — notes and dialogue share left/right edges. */
.cork-note--conclusion,
.cork-note--written,
.cork-note--call{ width:min(536px, 94%); margin-bottom:1.4rem; }
.cork-prompt{ max-width:min(536px, 94%); margin-bottom:1.4rem; }
.writenote-meta--postwrite{ width:min(536px, 94%); margin:-.9rem auto 1.4rem; }
.cork-casefile{ margin:0 0 1.4rem; }

/* 2. Garcia's voice, one treatment everywhere he speaks on the board:
   left-aligned, spine accent, single cream, book-adjacent reading size.
   Lora 500 offsets the optical thinning of dark-on-cream vs the book's
   light-on-dark pages (board dialogue was 15.7px vs 18px book prose).
   Supersedes the 2026-07-13 amber accent on .cork-file-instruction — the
   spine now marks ALL speech, so the instruction no longer needs its own
   colour. The red .cork-take-quiet warning accent still wins (higher
   specificity). */
.cork-prompt{
  text-align:left;
  border-left:4px solid rgba(122,90,42,.55);
  background:#f7f1e3;
  font-size:1.0625rem; line-height:1.6; font-weight:500;
  text-wrap:balance;
}

/* 3. No runts on the typed notes either (single-word last lines). */
.cork-note{ text-wrap:pretty; }

/* 4. "Another way to say it" is a reformulation scaffold, not a footnote —
   minimum legible size. */
.writenote-reveal{ font-size:12px; }