/* ============================================================
   COLDWATER MYSTERIES — style-v5-additions.css
   New components: title screen, footer bar, overlay panels,
   journal, kit, map, exit quiz, chapter end.
   Import AFTER style.css
   ============================================================ */

/* ── TITLE SCREEN ─────────────────────────────────────────── */
.title-screen{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(ellipse 1400px 900px at 50% -5%, #1a2a42, var(--bg) 65%) var(--bg);
  padding: 2rem;
}
.title-screen-inner{
  text-align:center; max-width:480px; width:100%;
}
.title-series{
  font-family:var(--mono); font-size:11px; letter-spacing:.28em;
  color:var(--accent); text-transform:uppercase;
  margin-bottom: 1.4rem;
}
.title-main{
  font-family:var(--serif); font-size: clamp(32px,5vw,52px);
  font-weight:400; color:#f0ead8; line-height:1.15;
  letter-spacing:.01em; margin-bottom: .8rem;
  text-shadow: 0 4px 32px rgba(0,0,0,.7);
}
.title-chapter{
  font-family:var(--mono); font-size:12px; letter-spacing:.22em;
  color:var(--text-dim); text-transform:uppercase;
  margin-bottom: 2.6rem;
}
.title-buttons{
  display:flex; flex-direction:column; gap:.75rem;
  align-items:center;
}
.title-btn{
  font-family:var(--mono); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase;
  background:transparent; border:1px solid var(--border-mid);
  color:var(--text-mid); padding:.9rem 2.4rem;
  border-radius:3px; cursor:pointer; width:200px;
  transition: border-color .2s, color .2s, background .2s;
}
.title-btn:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); }
.title-btn-primary{
  border-color:var(--accent); color:var(--accent);
}
.title-btn-primary:hover{ background:var(--accent); color:var(--bg); }
.title-footer{
  margin-top:2.8rem;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  color:var(--text-faint); text-transform:uppercase;
}

/* ── FOOTER BAR ───────────────────────────────────────────── */
.footer-bar{
  width:100%; max-width:760px;
  display:flex; align-items:stretch;
  background:var(--widget-bg);
  border:1px solid var(--border-mid);
  border-top: 2px solid var(--border-mid);
  border-radius:0 0 8px 8px;
  margin-top:-1px; /* flush with reading-pane */
  overflow:hidden;
}
.footer-bar-btn{
  flex:1; display:flex; flex-direction:column; align-items:center;
  gap:.2rem; padding:.65rem .5rem .55rem;
  background:transparent; border:none; border-right:1px solid var(--border-mid);
  color:var(--text-dim); cursor:pointer;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase;
  transition: background .15s, color .15s;
  position:relative;
}
.footer-bar-btn:hover{ background:var(--page-inner); color:var(--accent); }
.footer-bar-icon{ font-size:16px; line-height:1; }
.footer-bar-label{ line-height:1; }

/* Journal — primary weight */
.footer-bar-btn--primary{
  flex:1.7;
  background: color-mix(in oklab, var(--accent) 6%, transparent);
  color: var(--text-mid);
}
.footer-bar-btn--primary .footer-bar-icon{ font-size:18px; }
.footer-bar-btn--primary:hover{ background: color-mix(in oklab, var(--accent) 14%, transparent); color:var(--accent); }

/* Kit / Map — secondary weight */
.footer-bar-btn--secondary{
  flex:1;
  color: var(--text-faint);
  font-size: 9px;
}
.footer-bar-btn--secondary .footer-bar-icon{ font-size:14px; }
.footer-bar-btn--secondary:hover{ color:var(--text-dim); }

.footer-bar-count{
  position:absolute; top:6px; right:calc(50% - 20px);
  background:var(--accent); color:var(--bg);
  font-family:var(--mono); font-size:8px; letter-spacing:.04em;
  padding:1px 4px; border-radius:2px; line-height:1.4;
  min-width:18px; text-align:center;
  display:none;
}
.footer-bar-count:not([data-value="00"]){ display:block; }

/* Progress count — non-interactive, right-aligned */
.footer-progress{
  flex:none;
  display:flex; align-items:center; justify-content:center;
  padding:0 .9rem;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  color:var(--text-faint);
  border-left:1px solid var(--border-mid);
  white-space:nowrap;
}

/* ── OVERLAY PANELS (shared) ──────────────────────────────── */
.overlay-panel{
  position:fixed; right:16px; bottom:80px;
  width:360px; max-width:calc(100vw - 32px);
  max-height:65vh;
  background:var(--page);
  border:1px solid var(--border-mid);
  border-radius:6px;
  box-shadow:0 20px 60px rgba(0,0,0,.65);
  z-index:60;
  display:flex; flex-direction:column;
  opacity:0; pointer-events:none;
  transform:translateY(12px);
  transition: opacity .25s, transform .25s;
}
.overlay-panel.open{ opacity:1; pointer-events:auto; transform:none; }

.overlay-head{
  flex:none; 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;
}
.overlay-title{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  color:var(--accent); text-transform:uppercase;
}
.overlay-close{
  background:transparent; border:1px solid transparent; color:var(--text-mid);
  font-size:24px; cursor:pointer; line-height:1;
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px; padding:0;
}
.overlay-close:hover{ color:var(--accent); border-color:var(--border-mid); background:var(--widget-bg); }
/* Labelled Case-Board dismiss: only shown while the board tab is active. */
.overlay-close-board{
  display:none;
  background:var(--widget-bg); border:1px solid var(--border-mid); color:var(--text);
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; padding:.45rem .7rem; border-radius:6px; margin-left:auto; margin-right:.5rem;
}
.overlay-close-board:hover{ color:var(--accent); border-color:var(--accent); }
.journal-panel--board .overlay-close-board{ display:inline-block; }

/* ── JOURNAL PANEL ────────────────────────────────────────── */
.journal-tabs, .kit-tabs{
  flex:none; display:flex;
  border-bottom:1px solid var(--border-mid);
}
.journal-tab, .kit-tab{
  flex:1; padding:.55rem; background:transparent; border:none;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-dim);
  cursor:pointer; border-right:1px solid var(--border-mid);
  transition:background .15s, color .15s;
  position:relative;
}
/* Per-tab unread badge (Notes/Tasks/Evidence/People/Photos). */
.tab-badge{
  position:absolute; top:3px; right:5px;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:13px; height:13px; padding:0 3px;
  background:var(--accent); color:var(--badge-text);
  font-family:var(--mono); font-size:8px; font-weight:700;
  border-radius:7px; line-height:1; letter-spacing:0; pointer-events:none;
}
.journal-tab:last-child, .kit-tab:last-child{ border-right:none; }
.journal-tab.active, .kit-tab.active{
  background:var(--page-inner); color:var(--accent);
}
.journal-pane, .kit-pane{ display:none; flex:1; overflow-y:auto; }
.journal-pane.active, .kit-pane.active{ display:flex; flex-direction:column; }

.journal-entries{ padding:.8rem 1rem 1rem; display:flex; flex-direction:column; gap:.55rem; }
.journal-empty{
  padding:1rem; font-family:var(--serif); font-size:.9rem;
  color:var(--text-dim); font-style:italic;
}
.journal-entry{
  display:grid; grid-template-columns:24px 1fr; gap:.55rem;
  padding-bottom:.55rem;
  border-bottom:1px dashed var(--border-mid);
}
.journal-entry:last-child{ border-bottom:none; padding-bottom:0; }
.journal-entry-num{
  font-family:var(--mono); font-size:10px; color:var(--accent-dim);
  padding-top:2px; letter-spacing:.08em;
}
.journal-entry-body{}
.journal-entry-label{
  font-family:var(--sans); font-size:.9rem; font-weight:600;
  color:var(--text); margin-bottom:.12rem;
}
.journal-entry-detail{
  font-family:var(--serif); font-size:.85rem;
  color:var(--text-mid); line-height:1.5;
}

/* ── JOURNAL NOTE ENTRIES (Notes tab — Bram's own words) ───── */
/* No clue number, so drop the 24px grid gutter and read as written prose. */
.journal-note-entry{
  display:block;
  border-left:2px solid var(--accent-dim);
  padding-left:.6rem;
}

/* ── JOURNAL TASK ENTRIES ─────────────────────────────────── */
/* A task has no clue-number cell (tag/title/body), so drop the 24px grid gutter
   it would otherwise inherit from .journal-entry — else tag and body wrap into a
   24px column, one word per line. */
.journal-task-entry{ display:block; }
.journal-task-tag{
  font-family:var(--mono); font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent-dim);
  margin-bottom:.1rem;
}
/* Completed task — ticked and struck through, but stays visible. */
.journal-task-done .journal-entry-label,
.journal-task-done .journal-entry-detail{ text-decoration:line-through; }
.journal-task-done{ opacity:.6; }
.journal-task-done .journal-entry-label{ color:var(--accent); }

/* ── PEOPLE TAB (the cast + trust spectrum) ───────────────── */
/* Trust pins reuse the cork-pin colour recipe as inline dots. */
.trust-pin{
  display:inline-block; width:12px; height:12px; border-radius:50%;
  box-shadow:0 1px 2px rgba(0,0,0,.4); flex:0 0 auto;
}
.trust-pin--green{ background:radial-gradient(circle at 38% 34%, #a9d6a0 0 3px, #4a8f43 4px 7px); }
.trust-pin--grey { background:radial-gradient(circle at 38% 34%, #cfd3da 0 3px, #7c828f 4px 7px); }
.trust-pin--amber{ background:radial-gradient(circle at 38% 34%, #e7cf8f 0 3px, #b08d3a 4px 7px); }
.trust-pin--red  { background:radial-gradient(circle at 38% 34%, #f0b4ac 0 3px, #c0392b 4px 7px); }

.journal-people-list{ display:flex; flex-direction:column; gap:.7rem; }
.person-card{
  border:1px solid var(--border-mid); border-radius:6px;
  padding:.6rem .7rem;
}
.person-head{ display:flex; align-items:center; gap:.45rem; margin-bottom:.4rem; }
.person-name{
  font-family:var(--sans); font-size:.95rem; font-weight:600; color:var(--text);
  flex:1 1 auto;
}
.person-trust{
  font-family:var(--mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; padding:.1rem .4rem; border-radius:3px;
  white-space:nowrap;
}
.person-trust--ally   { color:#a9d6a0; background:rgba(74,143,67,.16); }
.person-trust--neutral{ color:#cfd3da; background:rgba(124,130,143,.16); }
.person-trust--poi    { color:#e7cf8f; background:rgba(176,141,58,.16); }
.person-trust--suspect{ color:#f0b4ac; background:rgba(192,57,43,.16); }
.person-section{ margin-top:.35rem; }
.person-section-label{
  font-family:var(--mono); font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent-dim); margin-bottom:.15rem;
}
.person-fact, .person-impression{
  font-family:var(--serif); font-size:.85rem; color:var(--text-mid);
  line-height:1.5; margin-bottom:.15rem;
}
.person-impression{ font-style:italic; color:var(--text-dim); }

/* ── KIT PANEL ────────────────────────────────────────────── */
.kit-items-list{ padding:.8rem 1rem 1rem; display:flex; flex-direction:column; gap:.55rem; }
.kit-item-row{
  display:flex; gap:.75rem; align-items:flex-start;
  padding:.6rem 0; border-bottom:1px dashed var(--border-mid);
}
.kit-item-row:last-child{ border-bottom:none; }
.kit-item-icon{ font-size:20px; flex:none; width:28px; text-align:center; padding-top:1px; }
.kit-item-body{}
.kit-item-name{
  font-family:var(--sans); font-size:.92rem; font-weight:600;
  color:var(--text); margin-bottom:.12rem;
}
.kit-item-desc{
  font-family:var(--serif); font-size:.85rem;
  color:var(--text-mid); line-height:1.5;
}
.kit-nav-pane{ padding:.8rem 1rem 1rem; display:flex; flex-direction:column; gap:.5rem; }
.kit-nav-btn{
  background:var(--widget-bg); border:1px solid var(--border-mid);
  color:var(--text); font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.75rem 1rem; border-radius:3px; cursor:pointer;
  text-align:left; transition: border-color .15s, color .15s;
}
.kit-nav-btn:hover{ border-color:var(--accent); color:var(--accent); }
.kit-nav-btn.nav-btn-danger{ color:var(--text-dim); }
.kit-nav-btn.nav-btn-danger:hover{ border-color:oklch(0.65 0.18 25); color:oklch(0.65 0.18 25); }

/* ── MAP PANEL ────────────────────────────────────────────── */
.map-panel{ max-height:70vh; }
.map-wrap{
  flex:1; position:relative; overflow:hidden;
  border-radius:0 0 0 0;
  min-height:260px;
}
.map-svg{ width:100%; height:100%; display:block; }
.map-note{
  flex:none; padding:.6rem 1rem;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  color:var(--text-faint); text-transform:uppercase;
  border-top:1px solid var(--border-mid);
  text-align:center;
}
.map-tooltip{
  position:absolute;
  background:var(--page);
  border:1px solid var(--accent);
  border-radius:3px; padding:.45rem .7rem;
  font-family:var(--sans); font-size:.82rem; color:var(--text);
  line-height:1.4; pointer-events:none;
  max-width:160px;
  transform:translate(-50%,-100%);
  margin-top:-8px;
}
.map-tooltip strong{ color:var(--accent); display:block; margin-bottom:.15rem; }
@keyframes mapPinPulse{
  0%,100%{ r:10; opacity:.4; }
  50%     { r:14; opacity:.1; }
}
.map-pin-pulse{ animation: mapPinPulse 2.5s ease-in-out infinite; }
/* You-are-here ring (map Phase A, 2026-07-02) */
@keyframes mapHerePulse{
  0%,100%{ r:7; opacity:.9; }
  50%     { r:9; opacity:.5; }
}
.map-here-ring{ animation: mapHerePulse 2s ease-in-out infinite; }
/* Location card under the map — filled by tapping a pin */
.map-card{
  flex:none; margin:.55rem .9rem .15rem; padding:.55rem .75rem;
  border:1px solid var(--border-mid); border-radius:6px;
  font-size:.8rem; line-height:1.45; color:var(--text-dim);
  display:none;
}
.map-card.open{ display:block; }
.map-card strong{ color:var(--accent); display:block; margin-bottom:.15rem; }
.map-card-status{
  margin-top:.35rem; font-family:var(--mono); font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; opacity:.85;
}

/* ── EXIT QUIZ ────────────────────────────────────────────── */
.exit-quiz{
  margin:1.6rem 0 0;
  padding:1.3rem 1.4rem 1.5rem;
  background:var(--widget-bg);
  border:1px solid var(--border-mid);
  border-left:3px solid var(--accent);
  border-radius:4px;
}
.quiz-question{ margin-bottom:.4rem; }
.quiz-counter{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  color:var(--accent); text-transform:uppercase; margin-bottom:.7rem;
}
.quiz-prompt{
  font-family:var(--sans); font-size:1rem; font-weight:600;
  color:#e8e0d0; margin-bottom:1rem; line-height:1.5;
}
.quiz-options{ display:flex; flex-direction:column; gap:.55rem; }
.quiz-btn{
  background:var(--page-inner);
  border:1px solid var(--border-mid);
  color:var(--text); font-family:var(--serif); font-size:1rem;
  padding:.8rem 1.1rem; text-align:left; line-height:1.5;
  cursor:pointer; border-radius:3px;
  transition: border-color .2s, color .2s, background .2s;
}
.quiz-btn:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); }
.quiz-btn:disabled{ cursor:default; }
.quiz-btn.correct{
  border-color:var(--success);
  border-left:3px solid var(--success);
  background:var(--success-bg);
  color:var(--success);
}
.quiz-btn.soft-wrong{
  border-color:var(--border-mid);
  border-style:dashed;
  background:var(--widget-bg);
  color:var(--text-dim);
}
.quiz-feedback{
  margin-top:.8rem; padding:.7rem .9rem; border-radius:3px;
  font-family:var(--sans); font-size:.95rem; line-height:1.55;
}
.quiz-feedback.correct{
  background:var(--success-bg);
  border:1px solid var(--success);
  border-left:3px solid var(--success);
  color:var(--success);
}
.quiz-feedback.soft{
  background:var(--widget-bg);
  border:1px dashed var(--border-mid);
  color:var(--text-dim);
}
.quiz-next{ margin-top:1rem; }

/* ── CHAPTER END SCREEN ───────────────────────────────────── */
.chapter-end{
  margin:1.2rem 0 0;
  padding:1.8rem 1.6rem 2rem;
  background:var(--widget-bg);
  border:1px solid var(--border-mid);
  border-radius:4px;
  text-align:center;
}
.chapter-end-stars{
  margin-bottom:1rem;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent);
}
.chapter-end-title{
  font-family:var(--serif); font-size:1.3rem; color:#f0ead8;
  margin-bottom:.8rem; letter-spacing:.01em;
}
.chapter-end-summary{
  font-family:var(--serif); font-size:.98rem; color:var(--text-mid);
  line-height:1.7; margin-bottom:1.4rem;
  max-width:480px; margin-left:auto; margin-right:auto;
}
.chapter-end-evidence{
  margin-bottom:1.4rem; text-align:left;
  border-top:1px dashed var(--border-mid); padding-top:1rem;
}
.chapter-end-ev-label{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  color:var(--accent); text-transform:uppercase; margin-bottom:.6rem;
}
.chapter-end-ev-list{ display:flex; flex-direction:column; gap:.4rem; }
.chapter-end-ev-row{
  display:flex; align-items:baseline; gap:.6rem;
}
.chapter-end-ev-label-item{
  font-family:var(--sans); font-size:.9rem; color:var(--text);
}
.chapter-end-next{
  margin-bottom:1.4rem; padding:.9rem 1rem;
  border:1px dashed var(--border-mid); border-radius:3px;
}
.chapter-end-next-label{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  color:var(--text-dim); text-transform:uppercase; margin-bottom:.3rem;
}
.chapter-end-next-title{
  font-family:var(--serif); font-size:1.05rem; color:var(--text-mid);
  font-style:italic;
}
.chapter-end-replay{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; background:transparent;
  border:1px solid var(--accent); color:var(--accent);
  padding:.7rem 1.6rem; border-radius:3px; cursor:pointer;
  transition: background .2s, color .2s;
}
.chapter-end-replay:hover{ background:var(--accent); color:var(--bg); }

/* ── RESPONSIVE ADDITIONS ─────────────────────────────────── */
@media (max-width:700px){
  .footer-bar{ border-radius:0; }
  .overlay-panel{ left:8px; right:8px; width:auto; bottom:72px; }
  .title-main{ font-size:clamp(28px,7vw,44px); }
}

/* ── Option D + onboarding repair overrides ───────────────── */
:root{
  --footer-bg:#111828;
  --footer-border:#2a3850;
  --badge-text:#0e1420;
}

.title-footer,
.page-footer{ display:none; }

.pane-foot-rule{
  height:28px;
  background:transparent;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pane-foot-rule::before{
  content:'';
  display:block;
  width:120px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--accent-dim), transparent);
}

.chip-anchor{
  position:sticky;
  bottom:12px;
  height:0;
  overflow:visible;
  pointer-events:none;
}
.bag-chip{
  position:absolute;
  bottom:0;
  right:14px;
  display:flex;
  align-items:center;
  gap:0;
  padding:7px 10px;
  background:var(--widget-bg);
  border:1.5px solid var(--border-mid);
  border-radius:20px;
  box-shadow:0 4px 20px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.3);
  cursor:pointer;
  pointer-events:all;
  transition:border-color .15s, background .15s;
  white-space:nowrap;
  overflow:hidden;
}
.bag-chip:hover{
  border-color:color-mix(in oklab, var(--accent) 40%, var(--border-mid));
  background:color-mix(in oklab, var(--widget-bg) 90%, var(--accent));
}
.bag-chip.open{
  border-color:color-mix(in oklab, var(--accent) 55%, var(--border-mid));
  background:color-mix(in oklab, var(--widget-bg) 85%, var(--accent));
}
.chip-icon{ font-size:16px; line-height:1; flex-shrink:0; }
.chip-label{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-dim);
  max-width:0;
  opacity:0;
  overflow:hidden;
  transition:max-width .22s ease, opacity .18s ease, margin-left .22s ease;
  margin-left:0;
}
@media (hover:hover){
  .bag-chip:hover .chip-label{
    max-width:100px;
    opacity:1;
    margin-left:6px;
  }
}
@keyframes flyUp{
  from{ transform:translateY(8px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}
.bag-flyout{
  position:absolute;
  bottom:44px;
  right:14px;
  width:200px;
  background:var(--widget-bg);
  border:1.5px solid var(--border-mid);
  border-radius:10px;
  box-shadow:0 8px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3);
  z-index:20;
  overflow:hidden;
  pointer-events:all;
  animation:flyUp .15s ease forwards;
}
.flyout-section{ padding:8px 0 4px; }
.flyout-section + .flyout-section{ border-top:1px solid var(--border); }
.flyout-section-label{
  font-family:var(--mono);
  font-size:8px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-faint);
  padding:2px 14px 6px;
}
.flyout-btn{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  padding:9px 14px;
  background:transparent;
  border:none;
  color:var(--text-mid);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  text-align:left;
  transition:background .12s, color .12s;
}
.flyout-btn:hover{ background:rgba(255,255,255,.04); color:var(--text); }
.flyout-btn-icon{ font-size:14px; }

.footer-bar{
  width:100%;
  max-width:760px;
  background:var(--footer-bg);
  border:1px solid var(--footer-border);
  border-top:2px solid var(--footer-border);
  border-radius:0 0 8px 8px;
  display:flex;
  align-items:center;
  padding:0 12px;
  height:52px;
  flex-shrink:0;
  gap:0;
  margin-top:0;
  overflow:visible;
}
.journal-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px 7px 9px;
  background:color-mix(in oklab, var(--accent) 11%, transparent);
  border:1.5px solid color-mix(in oklab, var(--accent) 25%, transparent);
  border-radius:7px;
  cursor:pointer;
  transition:background .15s, border-color .15s;
  flex-shrink:0;
}
.journal-btn:hover{ background:color-mix(in oklab, var(--accent) 18%, transparent); }
.journal-btn.open{
  background:color-mix(in oklab, var(--accent) 20%, transparent);
  border-color:color-mix(in oklab, var(--accent) 45%, transparent);
}
.journal-btn-icon-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.journal-btn-icon{ font-size:18px; line-height:1; }
.journal-badge{
  position:absolute;
  top:-4px;
  right:-6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:14px;
  height:14px;
  padding:0 3px;
  background:var(--accent);
  color:var(--badge-text);
  font-family:var(--mono);
  font-size:8px;
  font-weight:700;
  border-radius:7px;
  line-height:1;
  pointer-events:none;
}
@keyframes badgePulse{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent); }
  50%{ transform:scale(1.15); box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 0%, transparent); }
}
.journal-badge.has-unread{ animation:badgePulse 2.4s ease-in-out infinite; }
.journal-btn-label{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-mid);
}
.journal-btn:hover .journal-btn-label,
.journal-btn.open .journal-btn-label{ color:var(--text); }
.footer-spacer{ flex:1; }
.footer-progress{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  color:var(--text-dim);
  padding-left:10px;
  border-left:1px solid var(--border-mid);
  white-space:nowrap;
  flex-shrink:0;
}

@keyframes onboardingRing{
  0%   { box-shadow: 0 0 0 0px   color-mix(in oklab, var(--accent) 72%, transparent); }
  65%  { box-shadow: 0 0 0 11px  color-mix(in oklab, var(--accent) 0%,  transparent); }
  100% { box-shadow: 0 0 0 0px   color-mix(in oklab, var(--accent) 0%,  transparent); }
}
.journal-btn.onboarding-cue,
.bag-chip.onboarding-cue,
.text-typing.onboarding-cue{
  animation:onboardingRing 1.4s ease-out infinite;
  overflow:visible;
}

.journal-onboarding{
  margin:.8rem 1rem .4rem;
  padding:.8rem .9rem .9rem;
  border:1px dashed color-mix(in oklab, var(--accent) 36%, var(--border-mid));
  border-radius:4px;
  background:color-mix(in oklab, var(--accent) 5%, transparent);
}
.journal-onboarding-kicker{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.45rem;
}
.journal-onboarding-prompt{
  font-family:var(--serif);
  font-size:.95rem;
  color:var(--text);
  line-height:1.45;
  margin-bottom:.65rem;
}
.journal-thought-options{ display:flex; flex-direction:column; gap:.4rem; }
.journal-thought-btn{
  text-align:left;
  font-family:var(--serif);
  font-size:.9rem;
  line-height:1.35;
  color:var(--text-mid);
  background:var(--widget-bg);
  border:1px solid var(--border-mid);
  border-radius:16px 6px 15px 5px;
  padding:.5rem .65rem;
  cursor:pointer;
  transition:border-color .15s, color .15s, transform .15s;
}
.journal-thought-btn:hover:not(:disabled){ border-color:var(--accent); color:var(--text); transform:translateX(1px); }
.journal-thought-btn.selected{ border-color:var(--accent); color:var(--accent); }
.journal-onboarding-feedback{
  margin-top:.6rem;
  font-family:var(--serif);
  font-style:italic;
  font-size:.86rem;
  color:var(--text-mid);
}

.kit-items-list.kit-slot-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.55rem;
  padding:.8rem 1rem 1rem;
}
.kit-slot{
  min-height:92px;
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  padding:.7rem;
  border:1px solid var(--border-mid);
  border-radius:6px;
  background:linear-gradient(180deg, color-mix(in oklab, var(--widget-bg) 92%, var(--text-faint)), var(--widget-bg));
  color:var(--text-mid);
  text-align:left;
}
.kit-slot--filled{
  cursor:pointer;
  transition:border-color .15s, transform .15s, background .15s;
}
.kit-slot--filled:hover{
  border-color:color-mix(in oklab, var(--accent) 42%, var(--border-mid));
  transform:translateY(-1px);
}
.kit-slot--empty{
  align-items:center;
  justify-content:center;
  border-style:dashed;
  color:var(--text-faint);
  background:transparent;
}
.kit-slot-icon{ font-size:20px; line-height:1; flex:none; }
.kit-slot-body{ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.kit-slot-name{
  font-family:var(--sans);
  font-size:.88rem;
  font-weight:600;
  color:var(--text);
}
.kit-slot-desc{
  font-family:var(--serif);
  font-size:.78rem;
  line-height:1.35;
  color:var(--text-dim);
}
.kit-slot-empty-label{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.kit-slot--useful{
  border-color:var(--accent);
  animation:onboardingRing 1.4s ease-out 3;
}
.kit-use-feedback{
  margin:0 1rem 1rem;
  padding:.55rem .7rem;
  border-left:2px solid var(--accent);
  font-family:var(--serif);
  font-size:.86rem;
  font-style:italic;
  color:var(--text-mid);
  background:color-mix(in oklab, var(--accent) 5%, transparent);
}
.choice-btn--locked,
.choice-btn--locked:hover{
  opacity:.48;
  cursor:default;
  transform:none;
  border-color:var(--border-mid);
  color:var(--text-dim);
}
.torch-path-continue{
  display:none;
  margin-top:1.1rem;
}
.torch-path-continue.visible{
  display:block;
}

.static-node-image img{
  opacity:1;
  filter:none;
  transform:none;
}