/* ============================================================
   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;
}

*, *::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 {
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Sans', sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* 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;
  padding: max(14px, env(safe-area-inset-top)) 16px 0;
  z-index: 100;
}
.header-inner {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: rgba(8, 10, 14, .52);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color .3s ease;
}
.header-inner:hover { border-color: rgba(255,255,255,.13); }

.brand {
  font-size: 11px;
  letter-spacing: .26em;
  flex-shrink: 0;
  color: var(--text);
  text-decoration: none;
  transition: color .25s ease;
}
.brand:hover { color: var(--green); }
.brand-accent { color: var(--green); }

/* === HUD — desktop/tablet (≥ 600 px) === */
.hud {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--muted);
}
.hud-sep { opacity: .3; margin: 0 2px; }
.hud-counts {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 6px;
  border-right: 1px solid var(--border);
}
.hud button {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 9px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: .12em;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease;
}
.hud button:hover { border-color: var(--green); color: var(--text); }
.hud button.save-btn { color: var(--green); border-color: rgba(125,255,179,.3); }

/* === READER BURGER — mobile (< 600 px) === */
.hud-mobile {
  display: none;
  align-items: center;
  gap: 10px;
}
/* chapter pill shown next to burger on mobile */
.hud-mobile-progress {
  font-size: 9px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: .14em;
  color: var(--muted);
}
.reader-burger-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 9px;
  cursor: pointer;
  transition: border-color .2s ease;
}
.reader-burger-btn:hover { border-color: var(--green); }
.reader-burger-btn span {
  display: block;
  width: 16px;
  height: 1px;
  background: var(--muted);
  transition: background .2s ease;
}
.reader-burger-btn:hover span { background: var(--text); }

/* === READER MOBILE DRAWER === */
.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;
  top: max(14px, env(safe-area-inset-top));
  left: 16px;
  right: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  transform: translateY(-12px);
  opacity: 0;
  transition: transform .3s var(--ease), opacity .25s var(--ease);
  touch-action: none; /* block double-tap zoom on the panel */
}
.reader-menu.active .reader-menu-panel {
  transform: translateY(0);
  opacity: 1;
}

.reader-menu-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.reader-menu-brand {
  font-size: 11px;
  letter-spacing: .26em;
  color: var(--text);
  text-decoration: none;
}
.reader-menu-brand-accent { color: var(--green); }
.reader-menu-close {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .12em;
  padding: 5px 10px;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.reader-menu-close:hover { border-color: var(--green); color: var(--text); }

.reader-menu-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--muted);
}
.reader-menu-status-chapter { color: var(--text); }
.reader-menu-status-archives { color: var(--green); }

.reader-menu-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.reader-menu-actions button {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 10px;
  border-radius: 8px;
  font-size: 9px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: .12em;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.reader-menu-actions button:hover { border-color: var(--green); color: var(--text); }
.reader-menu-actions .save-btn-m { color: var(--green); border-color: rgba(125,255,179,.3); }
.reader-menu-actions .save-btn-m:hover { border-color: var(--green); }

/* === RESPONSIVE SWITCH === */
@media (max-width: 599px) {
  .hud { display: none; }
  .hud-mobile { display: flex; }
  .reader-status-bar { display: none; }
}

/* Toast queue — save-link confirmation + archive-unlock notifications */
.toast {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 10px);
  z-index: 40;
  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 10px 0 0;
  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 viewport, independent of
   header scroll position (the header is no longer fixed). */
.side-toast-container {
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom));
  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 */
.status-bar-fill[data-level="high"]   { background: #4a9e6e; }
.status-bar-fill[data-level="mid"]    { background: #8b7535; }
.status-bar-fill[data-level="low"]    { background: #8b2635; }

/* ── Reader variant — persistent bar above the chapter, desktop/tablet only ── */
.reader-status-bar {
  max-width: 660px;
  margin: 0 auto 18px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
}
.reader-status-bar .status-bar-label { margin-bottom: 8px; }
.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 {
  max-width: 660px;
  margin: 0 auto;
  padding: 32px 20px 48px;
}

.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;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.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;
}

#chapter-title {
  font-size: 1.8rem;
  font-weight: 300;
  letter-spacing: .01em;
  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.45rem; } }

.body p {
  margin: 0 0 1.15em;
  font-size: var(--reader-font-size, 1.04rem);
  line-height: var(--reader-line-height, 1.75);
  color: var(--text);
}
.body p:last-child { margin-bottom: 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);
  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; }

/* Reader footer — mirrors homepage style */
.reader-footer {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px max(14px, env(safe-area-inset-bottom));
  background: var(--surface-veil);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  gap: 20px;
  font-size: 10px;
}
@media (max-width: 600px) {
  .reader-footer { gap: 12px; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }
  .reader-footer .footer-nominal,
  .reader-footer .footer-legal { display: none; }
}

/* Footer internals — ported from the homepage stylesheet so the reader
   footer renders identically (status dot, legal links, social icons). */
.footer-status {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.footer-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-nominal {
  font-size: 9px;
  color: var(--muted);
  letter-spacing: .14em;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  animation: statusPulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

.dot::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 36px; height: 36px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.dot.alert {
  background: var(--red);
  box-shadow: 0 0 18px var(--red);
  animation: none;
}

.system-status {
  font-size: 10px;
  letter-spacing: .14em;
  transition: color .4s ease;
}

.system-status.alert { color: var(--red); }

@keyframes statusPulse {
  0%   { opacity: .35; transform: scale(.9); box-shadow: 0 0 4px var(--green); }
  50%  { opacity: 1;   transform: scale(1);  box-shadow: 0 0 14px var(--green); }
  100% { opacity: .35; transform: scale(.9); box-shadow: 0 0 4px var(--green); }
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-legal button {
  background: none;
  border: none;
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: .16em;
  font-size: 10px;
  cursor: pointer;
  transition: color .3s ease;
}

.footer-legal button:hover { color: var(--text); }

.footer-legal span { color: rgba(255,255,255,.2); font-size: 10px; }

.footer-social {
  display: flex;
  align-items: center;
  gap: 14px;
}

.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: 150;
  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); --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="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; }

/* 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: 150;
  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: 160;
  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: SILAS — Dark Red / Muted Crimson Theme Override
   Replaces the green (#7dffb3) accent system with a muted
   crimson palette for a distinct, foreboding feel.
   ============================================================ */

/* CSS variable overrides for the Silas dark theme */
body {
  --green:     #8b2635;       /* muted crimson replaces green */
  --on-accent: #f0e8e8;       /* warm off-white on crimson backgrounds */
}

/* Crimson rgba() replacements that reference the old green RGB 125,255,179 */
/* These need direct selector overrides as they use rgba() literals */

/* Header brand accent */
.brand-accent { color: #8b2635; }
.brand:hover  { color: #8b2635; }

/* HUD hover states */
.hud button:hover        { border-color: #8b2635; }
.hud button.save-btn     { color: #8b2635; border-color: rgba(139,38,53,.4); }

/* Reader burger */
.reader-burger-btn:hover        { border-color: #8b2635; }
.reader-burger-btn:hover span   { background: #c0c0c0; }
.reader-menu-close:hover        { border-color: #8b2635; }
.reader-menu-status-archives    { color: #8b2635; }
.reader-menu-actions button:hover { border-color: #8b2635; }
.reader-menu-actions .save-btn-m  { color: #8b2635; border-color: rgba(139,38,53,.4); }
.reader-menu-actions .save-btn-m:hover { border-color: #8b2635; }

/* Toast notifications */
.toast              { border-color: #8b2635; color: #b84455; }
.side-toast         { border-color: #8b2635; border-top-color: #8b2635; color: #b84455; }
.side-toast .side-toast-label { color: rgba(176,68,85,.7); }

/* Choice buttons */
.choice-btn:hover           { border-color: #8b2635; background: rgba(139,38,53,.06); }
.choice-btn.chosen          { border-color: #8b2635; background: rgba(139,38,53,.12); }
.choice-btn.chosen .choice-letter { border-color: #8b2635; background: #8b2635; color: #f0e8e8; }
.choice-letter              { color: #8b2635; }
.continue-btn               { background: #8b2635; color: #f0e8e8; }
.continue-btn:hover         { background: #a33044; opacity: 1; }

/* Warning close button */
.warning-close:hover { border-color: #8b2635; }

/* Archive panel */
.archive-row:hover             { border-color: #8b2635; }
.archive-row-id                { color: #8b2635; }
.archive-doc-card              { border-left-color: #8b2635; }
.archive-section-count         { color: #8b2635; }
.close-btn:hover               { border-color: #8b2635; }

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

/* Skip link */
.skip-link { color: #8b2635; border-color: #8b2635; }

/* Status dot → dark crimson pulse */
.dot {
  background: #8b2635;
  box-shadow: 0 0 10px rgba(139,38,53,.7);
  animation: statusPulseCrimson 2.4s ease-in-out infinite;
}
@keyframes statusPulseCrimson {
  0%   { opacity: .35; transform: scale(.9); box-shadow: 0 0 4px rgba(139,38,53,.5); }
  50%  { opacity: 1;   transform: scale(1);  box-shadow: 0 0 14px rgba(139,38,53,.9); }
  100% { opacity: .35; transform: scale(.9); box-shadow: 0 0 4px rgba(139,38,53,.5); }
}

/* Splash hum line */
.splash-sub  { color: #8b2635; }
.splash-hum  { background: linear-gradient(90deg, transparent, #8b2635, transparent); }

/* Progress bars (silas widget uses sp-bar-fill which inherits --green) */
.sp-bar-fill   { background: #8b2635; }
.sp-dot        { background: #8b2635; box-shadow: 0 0 6px rgba(139,38,53,.6); }
.sp-status-text { color: #8b2635; }
.sp-ending     { color: #8b2635; border-color: rgba(139,38,53,.3); }

/* Status bar — Silas crimson zone overrides */
.status-bar-fill[data-level="high"] { background: #5c7a5e; }
.status-bar-fill[data-level="mid"]  { background: #7a6535; }
.status-bar-fill[data-level="low"]  { background: #8b2635; }
.status-bar-label-delta.up          { color: #7aaa85; }
.status-bar-label-delta.down        { color: #b84455; }

/* Light mode: override the green substitution */
body[data-theme="light"] {
  --green: #7a1e2d;
  --on-accent: #fff5f5;
}
body[data-theme="light"] .dot {
  background: #7a1e2d;
  box-shadow: 0 0 10px rgba(122,30,45,.5);
}
body[data-theme="light"] .continue-btn { background: #7a1e2d; }
body[data-theme="light"] .continue-btn:hover { background: #8f2535; opacity: 1; }

/* Light mode: lighter gray header bar (was rgba(8,10,14,.52) dark) */
body[data-theme="light"] .header-inner {
  background: rgba(230, 226, 221, 0.82);
  border-color: rgba(0,0,0,.12);
}

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

/* ── 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); }

/* HUD button hover */
.hud button {
  transition: border-color .2s ease, color .2s ease, transform .18s ease;
}
.hud button:hover { transform: translateY(-1px); }

/* Save link button glow */
.hud button.save-btn {
  transition: border-color .25s ease, color .25s ease,
              box-shadow .25s ease, transform .18s ease;
}
.hud button.save-btn:hover {
  box-shadow: 0 0 12px rgba(139,38,53,.3);
}

/* ── 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: #8b2635;
}
.achievement-row .archive-row-lock {
  color: rgba(139,38,53,.5);
  opacity: 1;
}