/* ============================================================
   DRIVE — reader stylesheet (core/style.css)
   Shared across every experience. Deliberately continuous with
   the main site's system: same palette, same IBM Plex pairing,
   same "+" corner-bracket motif as a connective signature.
   ============================================================ */

:root {
  --bg:        #05070b;
  --bg-card:   rgba(255, 255, 255, .025);
  --text:      #edf2f7;
  --muted:     rgba(255, 255, 255, .48);
  --muted-dim: rgba(255, 255, 255, .28);
  --green:     #7dffb3;
  --red:       #ff6b6b;
  --border:    rgba(255, 255, 255, .09);
  --border-lt: rgba(255, 255, 255, .05);
  --ease:      cubic-bezier(.16, .84, .44, 1);
  /* Solid panel/drawer background, translucent header/footer background,
     and the text/icon color used on top of --green accents. These are
     theme-aware so chrome (header, footer, drawers) never stays stuck
     dark when the reading surface switches to a light theme. */
  --surface:      #0b0f14;
  --surface-veil: rgba(5, 7, 11, .78);
  --on-accent:    #05070b;
  /* Buttons/choices need a bit more separation from the page than static
     cards do — defaults to --bg-card (no change in dark mode); light mode
     bumps it below. */
  --bg-card-strong: var(--bg-card);
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  /* Prevent double-tap zoom on all interactive elements.
     Overridden to pan-y on scrollable drawers. */
  touch-action: manipulation;
}

html, body {
  height: 100%;
  height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Sans', sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* Fixed app-shell: header + footer stay pinned, #reader-main is the only
   scroller. Eliminates the double-scroll class of bugs entirely — there's
   only ever one scrollable region. */
body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
}

/* NOTE: letter-spacing here is intentionally .12em (reader context — tighter for
   dense mono labels). styles.css defines .mono at .18em for the homepage/marketing
   context. The two values are deliberate — do not "unify" them without checking both. */
.mono {
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: .12em;
}

.hidden { display: none !important; }

/* Soft vignette in place of a grain asset, kept self-contained. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.04), transparent 60%);
  z-index: 0;
}

/* --- "+" corner motif, reused from the main site's tile system --- */
.corners { position: absolute; inset: 0; pointer-events: none; }
.corner {
  position: absolute;
  font-size: 11px;
  color: var(--muted-dim);
  font-family: 'IBM Plex Mono', monospace;
}
.corner.tl { top: -6px; left: -6px; }
.corner.tr { top: -6px; right: -6px; }
.corner.bl { bottom: -6px; left: -6px; }
.corner.br { bottom: -6px; right: -6px; }

/* --- HUD header: pill bar, non-fixed --- */
.site-header {
  position: relative;
  flex-shrink: 0;
  padding: max(14px, env(safe-area-inset-top)) 16px 0;
  z-index: 100;
  max-height: 140px;
  overflow: hidden;
  opacity: 1;
  transition: max-height .4s var(--ease), opacity .3s ease, padding .4s var(--ease);
}
body.immersive .site-header {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  pointer-events: none;
}

/* Persistent stability strip — always visible at the very top, unlike the
   in-content status bars which only appear within the scrolling chapter. */
.reader-top-bar {
  height: 3px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.reader-top-fill {
  height: 100%;
  width: 60%;
  background: var(--reader-accent, var(--green));
  transition: width .6s cubic-bezier(.16,.84,.44,1);
}
.header-inner {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 0;
}

/* Brand pill — "← DRIVE : SILAS" */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .2em;
  flex-shrink: 0;
  color: var(--text);
  text-decoration: none;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(8,10,14,.55);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  transition: border-color .25s ease, transform .25s ease;
}
.brand:hover { border-color: rgba(255,255,255,.22); transform: translateY(-1px); }
.brand-accent { color: var(--green); }

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Chapter pill — "• Ch 0" */
.chapter-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(8,10,14,.55);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--muted);
  white-space: nowrap;
}
.chapter-pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  flex-shrink: 0;
}

/* Menu button — circular, opens the bottom sheet */
.menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(8,10,14,.55);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
}
.menu-btn:hover { border-color: rgba(255,255,255,.22); color: var(--text); }

/* === BOTTOM DOCK — floating, always visible, pinned above the safe area === */
.reader-dock-wrap {
  flex-shrink: 0;
  padding: 0 16px max(10px, env(safe-area-inset-bottom));
  max-height: 120px;
  opacity: 1;
  transition: max-height .4s var(--ease), opacity .3s ease, padding .4s var(--ease);
  overflow: hidden;
}
body.immersive .reader-dock-wrap {
  max-height: 0;
  padding-bottom: 0;
  opacity: 0;
  pointer-events: none;
}
.reader-dock {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(8,10,14,.72);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
}
.dock-archives {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 10px 14px;
  border-radius: 999px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .1em;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.dock-archives:hover { border-color: rgba(255,255,255,.24); color: var(--text); }
.dock-archives:active { transform: scale(.96); }

/* Fullscreen toggle — collapses the whole DRIVE chrome (header + dock) for
   a distraction-free reading view. Tap anywhere on the page to bring it back. */
.dock-fullscreen {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--reader-accent-40, rgba(125,255,179,.3));
  border-radius: 50%;
  color: var(--reader-accent, var(--green));
  font-size: 14px;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.dock-fullscreen:hover { border-color: var(--reader-accent, var(--green)); }
.dock-fullscreen:active { transform: scale(.9); }
.dock-fullscreen-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: translate(0.5px, 1px); /* the glyph's own metrics sit slightly high-left of its line box */
}

.dock-status {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px 4px;
  cursor: pointer;
}
.dock-status-text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.dock-status-track {
  width: 80%;
  height: 2px;
  background: rgba(255,255,255,.1);
  border-radius: 1px;
  overflow: hidden;
}
.dock-status-fill {
  height: 100%;
  width: 0%;
  background: var(--reader-accent, var(--green));
  transition: width .6s cubic-bezier(.16,.84,.44,1), background-color .6s ease;
}
.dock-status-fill[data-level="high"] { background: var(--reader-accent, var(--green)); }
.dock-status-fill[data-level="mid"]  { background: var(--reader-accent-70, var(--reader-accent, var(--green))); }
.dock-status-fill[data-level="low"]  { background: var(--reader-accent, #8b2635); }

/* === BOTTOM SHEET — replaces the old side drawer; opened from the dock or the menu button === */
.reader-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}
.reader-menu.active { pointer-events: auto; }

.reader-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,7,11,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.reader-menu.active .reader-menu-backdrop { opacity: 1; }

.reader-menu-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-width: 560px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  padding: 10px 20px max(20px, env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform .35s var(--ease);
  touch-action: none; /* block double-tap zoom on the panel */
  max-height: 85dvh;
  overflow-y: auto;
}
.reader-menu.active .reader-menu-panel {
  transform: translateY(0);
}

.reader-menu-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.18);
  margin: 4px auto 16px;
}

.sheet-stability-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--muted);
}
.sheet-stability-value {
  color: var(--reader-accent, var(--green));
  white-space: nowrap;
}
.sheet-stability .status-bar-track { margin-bottom: 18px; }

.sheet-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.sheet-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  min-width: 0;
}
.sheet-stat-label {
  font-size: 8px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.34);
}
.sheet-stat-val {
  font-size: 12px;
  color: var(--text);
  line-height: 1.3;
  overflow-wrap: break-word;
}

.sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.sheet-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 14px;
  border-radius: 999px;
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: .12em;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
  white-space: nowrap;
}
.sheet-btn:hover { border-color: rgba(255,255,255,.24); color: var(--text); }
.sheet-btn-primary {
  color: var(--on-accent, #05070b);
  background: var(--reader-accent, var(--green));
  border-color: var(--reader-accent, var(--green));
}
.sheet-btn-primary:hover { opacity: .9; color: var(--on-accent, #05070b); }
.sheet-btn-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

.sheet-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.sheet-legal {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  letter-spacing: .12em;
}
.sheet-legal button {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-family: 'IBM Plex Mono', monospace; letter-spacing: .12em; font-size: 9px;
}
.sheet-legal button:hover { color: var(--text); }
.sheet-legal span { color: rgba(255,255,255,.2); }
.sheet-social { display: flex; align-items: center; gap: 14px; }
.sheet-social a { color: rgba(255,255,255,.5); display: flex; }
.sheet-social a:hover { color: var(--text); }
.sheet-social svg { width: 15px; height: 15px; }
.sheet-close-hint {
  font-size: 8px;
  letter-spacing: .14em;
  color: rgba(255,255,255,.22);
}

/* Toast queue — save-link confirmation + archive-unlock notifications */
.toast {
  position: fixed;
  bottom: calc(var(--footer-h, 52px) + 10px);
  left: 50%;
  transform: translate(-50%, 10px);
  z-index: 240; /* above .reader-menu (200) — save can be triggered from inside it */
  background: var(--surface);
  border: 1px solid var(--green);
  color: var(--green);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .04em;
  padding: 9px 16px;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
  max-width: 90vw;
  text-align: center;
}
.toast.visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* Side-toast — floats near the bottom of the reading area, above the
   pinned footer dock. */
.side-toast-container {
  position: fixed;
  bottom: calc(var(--footer-h, 52px) + 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  width: min(380px, calc(100vw - 32px));
}
.side-toast {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--green);
  border-bottom: 3px solid var(--green);
  color: var(--green);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .04em;
  padding: 10px 16px;
  border-radius: 6px 6px 0 0;
  opacity: 0;
  transform: translateY(12px);
  transition: transform .32s var(--ease), opacity .28s var(--ease);
  pointer-events: none;
  line-height: 1.5;
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 -6px 28px rgba(0,0,0,.55);
}
.side-toast .side-toast-label {
  display: block;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.side-toast.visible {
  opacity: 1;
  transform: translateY(0);
}
.side-toast.hiding {
  opacity: 0;
  transform: translateY(12px);
}

/* Subliminal echo — post-choice atmospheric text */
.choice-echo {
  text-align: center;
  margin-top: 20px;
  font-size: 11px;
  font-style: italic;
  letter-spacing: .06em;
  color: transparent;
  opacity: 0;
  transition: opacity 1.2s ease, color 1.8s ease;
  user-select: none;
}
.choice-echo.appear {
  opacity: 1;
  color: var(--muted-dim);
}
.choice-echo.dissolve {
  opacity: 0;
  color: transparent;
  transition: opacity 2.4s ease 0.4s, color 2.4s ease 0.4s;
}

/* ── Status bar — post-choice stability indicator ────────────────────────── */
.status-bar-wrap {
  margin-top: 24px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.status-bar-wrap.visible {
  opacity: 1;
  transform: translateY(0);
}
.status-bar-wrap.hiding {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .4s ease, transform .4s ease;
}

.status-bar-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--muted-dim);
  margin-bottom: 6px;
}
.status-bar-label-name { text-transform: uppercase; }
.status-bar-label-delta {
  font-size: 9px;
  letter-spacing: .08em;
  opacity: 0;
  transition: opacity .3s ease;
}
.status-bar-label-delta.visible { opacity: 1; }
.status-bar-label-delta.up   { color: #5ecf8a; }
.status-bar-label-delta.down { color: #c05060; }

.status-bar-track {
  position: relative;
  height: 2px;
  background: rgba(255,255,255,.07);
  border-radius: 1px;
  overflow: hidden;
}
.status-bar-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 1px;
  transition: width .8s cubic-bezier(.16,.84,.44,1), background-color .6s ease;
}

/* Colour zones: high → mid → low — all tied to the experience accent now,
   just at different strengths. The old fixed olive/gold for high/mid never
   matched the per-experience accent (purple/crimson), so the bar read as
   dull grey most of the time — only the "low" zone ever looked "coloured". */
.status-bar-fill[data-level="high"]   { background: var(--reader-accent, var(--green)); }
.status-bar-fill[data-level="mid"]    { background: var(--reader-accent-70, var(--reader-accent, var(--green))); }
.status-bar-fill[data-level="low"]    { background: var(--reader-accent, #8b2635); }

/* ── Reader variant — persistent bar above the chapter, desktop/tablet only ── */
.reader-status-bar {
  display: none;
}

.reader-status-bar .status-bar-label-delta { display: none; }

/* ── Drawer variant — always visible inside the mobile burger menu ──────── */
.drawer-status-bar {
  margin: 16px 0 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-lt);
}
.drawer-status-bar .status-bar-label { margin-bottom: 8px; }
.drawer-status-bar .status-bar-label-delta { display: none; }



/* --- Reader column --- */
.reader {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  max-width: 660px;
  margin: 0 auto;
  padding: 32px 20px 48px;
}
/* Keep the scrollbar unobtrusive without removing it outright (removing it
   entirely hides a real affordance some readers rely on). */
.reader { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.reader::-webkit-scrollbar { width: 6px; }
.reader::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 10px; }

.content-warning {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 28px;
  text-align: left;
}
.content-warning p { flex: 1; line-height: 1.5; }
.warning-close {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  padding: 4px 9px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.warning-close:hover { border-color: var(--green); color: var(--text); }

.chapter {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  padding: 32px 28px 32px 34px;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.chapter::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 2px;
  background: var(--reader-accent, var(--green));
  border-radius: 1px;
  opacity: .8;
}
.chapter.fading {
  opacity: 0;
  transform: translateY(6px);
}

/* ── Accessibility ──────────────────────────────────────────────────────────*/

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 200;
  background: var(--bg);
  color: var(--green);
  border: 1px solid var(--green);
  padding: 8px 16px;
  font-size: 11px;
  letter-spacing: .1em;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; }



@media (max-width: 480px) { .chapter { padding: 26px 18px; } }

.chapter-meta {
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.chapter-meta:not(:empty)::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1px;
  background: rgba(255,255,255,.2);
  flex-shrink: 0;
}

#chapter-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.1rem;
  font-weight: 400;
  letter-spacing: -.005em;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
/* Title receives programmatic focus on each navigation for screen-reader
   users (tabindex="-1" — never reachable via Tab), so the default browser
   focus ring would only ever show as a confusing "selected" box for
   sighted users. Suppress it; the a11y announcement still fires via
   #a11y-announce regardless of this. */
#chapter-title:focus { outline: none; }
@media (max-width: 480px) { #chapter-title { font-size: 1.7rem; } }

.body p {
  margin: 0 0 1.15em;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: var(--reader-font-size, 1.08rem);
  line-height: var(--reader-line-height, 1.75);
  color: var(--text);
}
.body p:last-child { margin-bottom: 0; }

/* Drop cap on the opening paragraph — purely decorative, skipped for
   screen readers via the surrounding text remaining in normal reading order. */
.body p:first-of-type::first-letter {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3.2em;
  font-weight: 400;
  color: var(--reader-accent, var(--green));
  float: left;
  line-height: .82;
  padding: .05em .08em 0 0;
}

.body.ending-doc p { font-size: 1.08rem; }

/* --- Choices --- */
.choices {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.choice-btn {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  background: var(--bg-card-strong);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 16px 18px;
  border-radius: 12px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: .98rem;
  cursor: pointer;
  width: 100%;
  transition: border-color .15s var(--ease), background .15s var(--ease), opacity .25s var(--ease);
}
.choice-btn:hover { border-color: var(--green); background: rgba(125, 255, 179, .05); }
.choices.locked .choice-btn { cursor: default; }
.choices.locked .choice-btn:hover { border-color: var(--border); background: var(--bg-card); }
.choice-btn.faded { opacity: .25; }
.choice-btn.chosen {
  border-color: var(--green);
  background: rgba(125, 255, 179, .1);
  opacity: 1;
}
.choice-btn.chosen .choice-letter {
  border-color: var(--green);
  background: var(--green);
  color: var(--on-accent);
}

.choice-ack {
  text-align: center;
  margin-top: 16px;
  font-size: 11px;
  font-style: italic;
  letter-spacing: .04em;
  color: var(--muted-dim);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.choice-ack.visible { opacity: 1; }
.choice-letter {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--muted-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem;
  color: var(--green);
}
.choice-label { padding-top: 2px; }

.continue-btn {
  margin-top: 34px;
  background: var(--green);
  border: none;
  color: var(--on-accent);
  padding: 14px 26px;
  border-radius: 6px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: .08em;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}
.continue-btn:hover { opacity: .88; }

.ending-actions { margin-top: 36px; text-align: center; }
.ending-summary {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 18px;
  line-height: 1.6;
}
.restart-btn { justify-content: center; display: inline-flex; }

/* Social links — reused inside the bottom sheet footer */
.social-link {
  color: var(--muted);
  display: flex;
  align-items: center;
  transition: color .3s ease;
  text-decoration: none;
}

.social-link:hover { color: var(--text); }

/* ── Settings panel ──────────────────────────────────────────────────────── */
.settings-panel {
  position: fixed;
  inset: 0;
  z-index: 210; /* above .reader-menu (200) — it's opened from a button inside that sheet */
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  /* Prevent touch events leaking through to the reader */
  touch-action: none;
}
.settings-panel.hidden { display: none; }
.settings-panel:not(.hidden) { pointer-events: auto; }

.settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  /* Block all touch interaction on the backdrop */
  touch-action: none;
}
.settings-drawer {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Allow scrolling inside drawer, block double-tap zoom everywhere */
  touch-action: pan-y;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.16,.84,.44,1);
}
.settings-panel:not(.hidden) .settings-drawer { transform: translateY(0); }

.settings-drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
.settings-drawer-title {
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--green);
}
.settings-body { padding: 8px 24px 32px; }

.settings-group {
  padding: 18px 0;
  border-bottom: 1px solid var(--border-lt);
}
.settings-group:last-child { border-bottom: none; }

.settings-label {
  font-size: 9px;
  letter-spacing: .16em;
  color: var(--muted);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.settings-sublabel {
  display: block;
  font-size: 10px;
  letter-spacing: .03em;
  color: rgba(255,255,255,.25);
  margin-top: 2px;
  text-transform: none;
}
.settings-row { display: flex; align-items: center; gap: 10px; }

.settings-step-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  width: 36px; height: 36px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color .2s, border-color .2s;
  display: flex; align-items: center; justify-content: center;
}
.settings-step-btn:hover:not(:disabled) { color: var(--text); border-color: var(--green); }
.settings-step-btn:disabled { opacity: .25; cursor: default; }

.settings-bar-track {
  flex: 1; height: 2px;
  background: rgba(255,255,255,.08);
  border-radius: 1px; position: relative;
}
.settings-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--green); border-radius: 1px;
  transition: width .3s var(--ease);
}
.settings-reset {
  background: none; border: none;
  color: rgba(255,255,255,.2);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px; cursor: pointer;
  padding: 4px; width: 28px;
  transition: color .2s; flex-shrink: 0;
}
.settings-reset:hover { color: var(--muted); }

.settings-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-chip {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing: .1em;
  padding: 7px 16px; border-radius: 100px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.settings-chip:hover { color: var(--text); border-color: var(--muted); }
.settings-chip.active { background: var(--green); border-color: var(--green); color: var(--on-accent); }

.settings-toggle-group {
  display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
}
.settings-toggle-label { flex: 1; cursor: pointer; }
.settings-toggle {
  width: 44px; height: 26px; border-radius: 100px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  cursor: pointer; position: relative; flex-shrink: 0;
  transition: background .25s, border-color .25s; padding: 0;
}
.settings-toggle[aria-checked="true"] { background: var(--green); border-color: var(--green); }
.settings-toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,.4);
  transition: transform .25s var(--ease), background .25s;
}
.settings-toggle[aria-checked="true"] .settings-toggle-thumb {
  transform: translateX(18px); background: var(--on-accent);
}

/* Reader legal panels */
.reader-legal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.reader-legal.hidden { display: none; }
.reader-legal-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; max-width: 440px; width: 100%; overflow: hidden;
}
.reader-legal-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  font-size: 10px; letter-spacing: .12em; color: var(--muted);
}
.reader-legal-body {
  padding: 20px; font-size: 11px; line-height: 1.8;
  color: var(--muted); letter-spacing: .04em;
  white-space: pre-wrap; font-family: 'IBM Plex Mono', monospace;
}
.reader-legal-actions { padding: 0 20px 20px; }
.reader-legal-cta {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: 1px solid var(--green);
  color: var(--text);
  border-radius: 8px;
  padding: 12px 18px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.reader-legal-cta:hover { background: rgba(125, 255, 179, .06); }
.reader-legal-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 30%, transparent);
}

/* On-brand focus ring instead of the browser-default blue outline */
.choice-btn:focus-visible,
.close-btn:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* Theme variants */
body[data-theme="dim"]   { --bg: #0e1117; --text: #d4d8de; --muted: rgba(212,216,222,.48); --muted-dim: rgba(212,216,222,.28); --surface: #161b22; --surface-veil: rgba(14,17,23,.82); }
body[data-theme="light"] { --bg: #f6f5f1; --bg-card: rgba(0,0,0,.035); --bg-card-strong: rgba(0,0,0,.073); --text: #2a2a27; --muted: rgba(42,42,39,.6); --muted-dim: rgba(42,42,39,.36); --border: rgba(0,0,0,.1); --border-lt: rgba(0,0,0,.06); --green: #00744a; --surface: #ffffff; --surface-veil: rgba(255,255,255,.88); --on-accent: #ffffff; }

/* Typeface variants */
body[data-font="sans"] .body p,
body[data-font="sans"] .archive-doc-body p  { font-family: 'IBM Plex Sans', sans-serif; }
body[data-font="serif"] .body p,
body[data-font="serif"] .archive-doc-body p { font-family: Georgia, 'Times New Roman', serif; }
body[data-font="mono"] .body p,
body[data-font="mono"] .archive-doc-body p  { font-family: 'IBM Plex Mono', monospace; font-size: calc(var(--reader-font-size, 1.04rem) * 0.9); letter-spacing: -.01em; }
body[data-font="mono"] .body p:first-of-type::first-letter {
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  float: none;
  padding: 0;
}

/* Reduce motion */
body[data-reduce-motion="true"] *,
body[data-reduce-motion="true"] *::before,
body[data-reduce-motion="true"] *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }

/* High contrast */
body[data-high-contrast="true"]:not([data-theme="light"]) { --text: #ffffff; --muted: rgba(255,255,255,.72); --border: rgba(255,255,255,.22); --green: #4dffaa; --on-accent: #05070b; }
body[data-theme="light"][data-high-contrast="true"] { --text: #000000; --muted: rgba(0,0,0,.78); --border: rgba(0,0,0,.32); --green: #00592f; --on-accent: #ffffff; }

/* --- Splash --- */
.splash {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: opacity .6s ease;
}
.splash.fade-out { opacity: 0; pointer-events: none; }
.splash-inner { text-align: center; }
.splash-mark {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 2.2rem;
  letter-spacing: .3em;
  font-weight: 300;
}
.splash-sub {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--green);
  font-size: .85rem;
  letter-spacing: .2em;
  margin-top: 6px;
}
.splash-hum {
  width: 160px;
  height: 1px;
  margin: 28px auto 16px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  background-size: 200% 100%;
  animation: hum-sweep 1.8s ease-in-out infinite;
}
@keyframes hum-sweep {
  0% { background-position: 200% 0; opacity: .3; }
  50% { background-position: 0% 0; opacity: 1; }
  100% { background-position: -200% 0; opacity: .3; }
}
.splash-status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Archive panel (drawer, mirrors the main site's burger-menu pattern) --- */
.archive-panel {
  position: fixed;
  inset: 0;
  z-index: 210; /* above .reader-menu (200) — it's opened from a button inside that sheet */
  touch-action: none; /* block scroll/zoom passthrough when panel is open */
}
.archive-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 3, 5, .65);
  backdrop-filter: blur(4px);
  touch-action: none;
}
.archive-drawer {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(380px, 88%);
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y; /* allow scrolling inside the drawer */
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.archive-drawer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 18px 14px;
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
.archive-drawer-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--muted);
}
.archive-drawer-intro {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--muted-dim);
  padding: 0 18px;
}
#archive-list {
  padding: 0 18px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.close-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  padding: 5px 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .08em;
  cursor: pointer;
}
.close-btn:hover { border-color: var(--green); color: var(--text); }

.archive-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-lt);
}
.archive-section-heading {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.archive-section-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--green);
}

.archive-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  width: 100%;
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border-lt);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  cursor: pointer;
  font-size: .85rem;
}
.archive-row:hover { border-color: var(--green); }
.archive-row.locked {
  color: var(--muted-dim);
  cursor: default;
  opacity: .6;
}
.archive-row.locked:hover { border-color: var(--border-lt); }
.archive-row-id {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem;
  color: var(--green);
  flex-shrink: 0;
}
.archive-row.locked .archive-row-id { color: var(--muted-dim); }
.archive-row-lock { flex-shrink: 0; opacity: .7; }

/* Document overlay, shown over the drawer when an entry is opened */
.archive-doc {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  background: rgba(2, 3, 5, .85);
  backdrop-filter: blur(6px);
}
.archive-doc-card {
  position: relative;
  max-width: 540px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: 12px;
  padding: 28px 26px;
}
.archive-doc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
#archive-doc-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1rem;
  letter-spacing: .04em;
  color: var(--text);
  line-height: 1.4;
}
.archive-doc-body p {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .85rem;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 1em;
}
.archive-doc-body p:last-child { margin-bottom: 0; }

@media (max-width: 480px) {
  .splash-mark { font-size: 1.7rem; }
}

/* ============================================================
   DRIVE — Per-experience reader theme
   Every experience gets its own accent, driven by data-experience
   on <body>. Selectors below reference var(--reader-accent...)
   rather than hardcoded colors, so adding a third experience is
   just a new body[data-experience="..."] block, nothing else.
   ============================================================ */

body[data-experience="silas"] {
  --reader-accent:             #8b2635;
  --reader-on-accent:          #f0e8e8;
  --reader-accent-hover:       #a33044;
  --reader-accent-text:        #b84455;
  --reader-accent-06: rgba(139,38,53,.06);
  --reader-accent-12: rgba(139,38,53,.12);
  --reader-accent-30: rgba(139,38,53,.3);
  --reader-accent-40: rgba(139,38,53,.4);
  --reader-accent-50: rgba(139,38,53,.5);
  --reader-accent-60: rgba(139,38,53,.6);
  --reader-accent-70: rgba(139,38,53,.7);
  --reader-accent-90: rgba(139,38,53,.9);
  --reader-accent-light:        #7a1e2d;
  --reader-on-accent-light:     #fff5f5;
  --reader-accent-light-hover:  #8f2535;
  --reader-accent-light-50: rgba(122,30,45,.5);
  --reader-accent-hc:           #d44d60;
  --reader-accent-light-hc:     #6a121f;

  --green:     var(--reader-accent);
  --on-accent: var(--reader-on-accent);
}

body[data-experience="inmate_6382"] {
  --reader-accent:             #7c3fd6;
  --reader-on-accent:          #f3ecfc;
  --reader-accent-hover:       #9257e8;
  --reader-accent-text:        #a878ea;
  --reader-accent-06: rgba(124,63,214,.06);
  --reader-accent-12: rgba(124,63,214,.12);
  --reader-accent-30: rgba(124,63,214,.3);
  --reader-accent-40: rgba(124,63,214,.4);
  --reader-accent-50: rgba(124,63,214,.5);
  --reader-accent-60: rgba(124,63,214,.6);
  --reader-accent-70: rgba(124,63,214,.7);
  --reader-accent-90: rgba(124,63,214,.9);
  --reader-accent-light:        #6224b0;
  --reader-on-accent-light:     #faf5ff;
  --reader-accent-light-hover:  #7333c4;
  --reader-accent-light-50: rgba(98,36,176,.5);
  --reader-accent-hc:           #b98af5;
  --reader-accent-light-hc:     #4d1a8f;

  --green:     var(--reader-accent);
  --on-accent: var(--reader-on-accent);
}

/* Header brand accent */
.brand-accent { color: var(--reader-accent); }
.brand:hover  { border-color: var(--reader-accent-40); }

/* Dock + sheet hover/accent states */
.menu-btn:hover           { border-color: var(--reader-accent-40); color: var(--text); }
.dock-archives:hover      { border-color: var(--reader-accent-40); color: var(--text); }
.sheet-btn:hover           { border-color: var(--reader-accent-40); color: var(--text); }

/* Toast notifications */
.toast              { border-color: var(--reader-accent); color: var(--reader-accent-text); }
.side-toast         { border-color: var(--reader-accent); border-top-color: var(--reader-accent); color: var(--reader-accent-text); }
.side-toast .side-toast-label { color: rgba(176,68,85,.7); }

/* Choice buttons */
.choice-btn:hover           { border-color: var(--reader-accent); background: var(--reader-accent-06); }
.choice-btn.chosen          { border-color: var(--reader-accent); background: var(--reader-accent-12); }
.choice-btn.chosen .choice-letter { border-color: var(--reader-accent); background: var(--reader-accent); color: var(--reader-on-accent); }
.choice-letter              { color: var(--reader-accent); }
.continue-btn               { background: var(--reader-accent); color: var(--reader-on-accent); }
.continue-btn:hover         { background: var(--reader-accent-hover); opacity: 1; }

/* Warning close button */
.warning-close:hover { border-color: var(--reader-accent); }

/* Archive panel */
.archive-row:hover             { border-color: var(--reader-accent); }
.archive-row-id                { color: var(--reader-accent); }
.archive-doc-card              { border-left-color: var(--reader-accent); }
.archive-section-count         { color: var(--reader-accent); }
.close-btn:hover               { border-color: var(--reader-accent); }

/* Settings */
.settings-drawer-title         { color: var(--reader-accent); }
.settings-step-btn:hover:not(:disabled) { border-color: var(--reader-accent); }
.settings-bar-fill             { background: var(--reader-accent); }
.settings-chip.active          { background: var(--reader-accent); border-color: var(--reader-accent); color: var(--reader-on-accent); }
.settings-toggle[aria-checked="true"] { background: var(--reader-accent); border-color: var(--reader-accent); }
.settings-toggle[aria-checked="true"] .settings-toggle-thumb { background: var(--reader-on-accent); }

/* Skip link */
.skip-link { color: var(--reader-accent); border-color: var(--reader-accent); }

/* Splash hum line */
.splash-sub  { color: var(--reader-accent); }
.splash-hum  { background: linear-gradient(90deg, transparent, var(--reader-accent), transparent); }

/* Progress bars (silas widget uses sp-bar-fill which inherits --green) */
.sp-bar-fill   { background: var(--reader-accent); }
.sp-dot        { background: var(--reader-accent); box-shadow: 0 0 6px var(--reader-accent-60); }
.sp-status-text { color: var(--reader-accent); }
.sp-ending     { color: var(--reader-accent); border-color: var(--reader-accent-30); }

/* Status bar — label delta colours */
.status-bar-label-delta.up          { color: #7aaa85; }
.status-bar-label-delta.down        { color: var(--reader-accent-text); }

/* Light mode: override the green substitution */
body[data-theme="light"] {
  --green: var(--reader-accent-light);
  --on-accent: var(--reader-on-accent-light);
}
body[data-theme="light"] .dot {
  background: var(--reader-accent-light);
  box-shadow: 0 0 10px var(--reader-accent-light-50);
}
body[data-theme="light"] .continue-btn { background: var(--reader-accent-light); }
body[data-theme="light"] .continue-btn:hover { background: var(--reader-accent-light-hover); opacity: 1; }

/* Light mode: the header pills, hamburger button, and the floating bottom
   dock were all a fixed near-black rgba(8,10,14,X) — designed to read as a
   frosted dark chip on a dark page. On the light page that's just a solid
   charcoal blob with barely-readable text. Swap them to the same subtle
   light card tone used elsewhere (--bg-card). */
body[data-theme="light"] .brand,
body[data-theme="light"] .chapter-pill,
body[data-theme="light"] .menu-btn,
body[data-theme="light"] .reader-dock {
  background: var(--bg-card);
}

/* Light mode: everything below here was built as a white-on-black overlay
   system (rgba(255,255,255,N) for hairline borders, track backgrounds,
   dividers, hover states, scrollbars). None of it was ever flipped for a
   light background, so it either vanished (borders/tracks/scrollbar,
   near-invisible on #f6f5f1) or sat there as a flat grey smear (toggle
   pills, drag handles) — that's the "oscena" look. Same visual weight,
   dark ink instead of white haze. */
body[data-theme="light"] .brand:hover,
body[data-theme="light"] .menu-btn:hover,
body[data-theme="light"] .dock-archives:hover,
body[data-theme="light"] .sheet-btn:hover { border-color: rgba(0,0,0,.28); }

body[data-theme="light"] .reader-top-bar        { background: rgba(0,0,0,.08); }
body[data-theme="light"] .dock-status-track     { background: rgba(0,0,0,.12); }
body[data-theme="light"] .status-bar-track      { background: rgba(0,0,0,.09); }
body[data-theme="light"] .settings-bar-track    { background: rgba(0,0,0,.1); }
body[data-theme="light"] .chapter-meta:not(:empty)::before { background: rgba(0,0,0,.25); }

body[data-theme="light"] .reader-menu-handle    { background: rgba(0,0,0,.2); }
body[data-theme="light"] .sheet-stat            { background: rgba(0,0,0,.025); }
body[data-theme="light"] .sheet-stat-label      { color: rgba(0,0,0,.4); }
body[data-theme="light"] .sheet-social a        { color: rgba(0,0,0,.55); }
body[data-theme="light"] .sheet-legal span      { color: rgba(0,0,0,.3); }
body[data-theme="light"] .sheet-close-hint      { color: rgba(0,0,0,.3); }
body[data-theme="light"] .settings-sublabel     { color: rgba(0,0,0,.35); }

body[data-theme="light"] .settings-toggle {
  background: rgba(0,0,0,.1);
  border-color: rgba(0,0,0,.16);
}
body[data-theme="light"] .settings-toggle-thumb { background: rgba(0,0,0,.5); }

body[data-theme="light"] .reader {
  scrollbar-color: rgba(0,0,0,.22) transparent;
}
body[data-theme="light"] .reader::-webkit-scrollbar-thumb { background: rgba(0,0,0,.22); }

/* The full-page vignette gradient is a soft white glow meant for a dark
   backdrop; on a light backdrop it just adds a faint milky patch, so it's
   switched off rather than inverted. */
body[data-theme="light"]::before { background: none; }

/* High contrast overrides for crimson theme */
body[data-high-contrast="true"]:not([data-theme="light"]) {
  --green: var(--reader-accent-hc);
  --on-accent: #0a0003;
}
body[data-theme="light"][data-high-contrast="true"] {
  --green: var(--reader-accent-light-hc);
  --on-accent: var(--reader-on-accent-light);
}

/* ── Smooth animations for Silas reader ─────────────────────────────────── */

/* Archive / settings drawer transitions */
.archive-panel:not(.hidden) .archive-backdrop { animation: fadeIn .3s ease both; }
.archive-panel:not(.hidden) .archive-drawer   { animation: slideInRight .36s cubic-bezier(.16,.84,.44,1) both; }

@keyframes fadeIn       { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Settings drawer already uses translateY(100%) transition — add backdrop fade */
.settings-panel:not(.hidden) .settings-backdrop { animation: fadeIn .28s ease both; }

/* Chapter transition: slightly more expressive */
.chapter {
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}

/* Reader legal panels */
.reader-legal:not(.hidden) {
  animation: legalFadeIn .32s var(--ease) both;
}
@keyframes legalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.reader-legal:not(.hidden) .reader-legal-box {
  animation: legalSlideUp .38s cubic-bezier(.16,.84,.44,1) both;
}
@keyframes legalSlideUp {
  from { transform: translateY(20px) scale(.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Choice button hover: smooth lift */
.choice-btn {
  transition: border-color .18s var(--ease), background .18s var(--ease),
              opacity .25s var(--ease), transform .2s var(--ease);
}
.choice-btn:hover:not(:disabled) { transform: translateY(-1px); }

/* Continue button */
.continue-btn {
  transition: background .25s ease, opacity .25s ease, transform .2s ease;
}
.continue-btn:hover { transform: translateY(-1px); }

/* Sheet + dock button hover */
.sheet-btn, .dock-archives, .dock-fullscreen, .menu-btn {
  transition: border-color .2s ease, color .2s ease, transform .18s ease;
}
.sheet-btn:hover, .dock-archives:hover, .dock-fullscreen:hover, .menu-btn:hover { transform: translateY(-1px); }

/* Save button glow */
.sheet-btn-primary, .dock-fullscreen {
  transition: border-color .25s ease, color .25s ease,
              box-shadow .25s ease, transform .18s ease;
}
.sheet-btn-primary:hover, .dock-fullscreen:hover {
  box-shadow: 0 0 12px var(--reader-accent-30);
}

/* ── Achievements section in archive drawer ─────────────────────────────── */
.achievements-head {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.achievements-note {
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--muted-dim);
  margin: 0 0 4px;
  line-height: 1.5;
}
.achievement-row .archive-row-id {
  color: var(--reader-accent);
}
.achievement-row .archive-row-lock {
  color: var(--reader-accent-50);
  opacity: 1;
}