/* Mobile-first, 380px up. Everything below scales up gracefully; nothing
   depends on a viewport wider than 380px to be usable.

   Every var(--x, fallback) below is set at runtime from config.js via
   applyStyleConfig() (see render.js) -- the fallback here is only what
   shows before that JS runs, and should track config.js's defaults. */

/* Self-hosted, no network dependency, no build step. Each family was
   checked with fontTools against U+0150/0151/0170/0171 (O/o/U/u with
   double acute) before being added -- all four carry real glyphs, not a
   composed fallback. See config.js FONTS for the weight axis each one
   actually supports. */
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/EBGaramond-Var.woff2') format('woff2-variations'),
       url('fonts/EBGaramond-Var.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/EBGaramond-Italic-Var.woff2') format('woff2-variations'),
       url('fonts/EBGaramond-Italic-Var.woff2') format('woff2');
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('fonts/Literata-Var.woff2') format('woff2-variations'),
       url('fonts/Literata-Var.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('fonts/Literata-Italic-Var.woff2') format('woff2-variations'),
       url('fonts/Literata-Italic-Var.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('fonts/Lora-Var.woff2') format('woff2-variations'),
       url('fonts/Lora-Var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('fonts/Lora-Italic-Var.woff2') format('woff2-variations'),
       url('fonts/Lora-Italic-Var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/Newsreader-Var.woff2') format('woff2-variations'),
       url('fonts/Newsreader-Var.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/Newsreader-Italic-Var.woff2') format('woff2-variations'),
       url('fonts/Newsreader-Italic-Var.woff2') format('woff2');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Var.woff2') format('woff2-variations'),
       url('fonts/Inter-Var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-Var.woff2') format('woff2-variations'),
       url('fonts/Inter-Italic-Var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/Nunito-Var.woff2') format('woff2-variations'),
       url('fonts/Nunito-Var.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/Nunito-Italic-Var.woff2') format('woff2-variations'),
       url('fonts/Nunito-Italic-Var.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Var.woff2') format('woff2-variations'),
       url('fonts/JetBrainsMono-Var.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Italic-Var.woff2') format('woff2-variations'),
       url('fonts/JetBrainsMono-Italic-Var.woff2') format('woff2');
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
}
/* Space Mono ships as four static weights, not a variable font -- no
   in-between weights, the browser just snaps to 400 or 700. */
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/SpaceMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/SpaceMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/SpaceMono-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/SpaceMono-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Night palette -- warm dark, never pure black/white. */
  --bg-plain: #221a10;
  --fg-plain: #f1e6d3;
  --bg-advanced: #1a140c;      /* dimmer than plain */
  --fg-advanced: #cabd9d;      /* lighter-weight (lower contrast) than plain */
  --accent: #e0a458;

  /* config-driven -- fallbacks here match config.js's defaultConfig */
  --font-body: 'EB Garamond', Georgia, 'Noto Serif', 'Times New Roman', serif;
  --line-plain: 1.65;
  --line-advanced: 2.05;
  --slow-letter-spacing: 0.3em;
  --slow-word-spacing: 0.55em;
  /* see config.js's note: the previous pair collapsed the space entirely */
  --quick-letter-spacing: -0.03em;
  --quick-word-spacing: -0.02em;
  --soft-size: 0.84em;
  --soft-opacity: 0.8;
  --loud-size: 1.35em;
  --loud-weight: 750;
  --cue-font-size: 0.72em;
  --cue-padding-x: 0.6em;
  --cue-padding-y: 0.15em;
  --cue-radius: 60px;
  --cue-border-width: 1px;
  --cue-bg: rgba(224, 164, 88, 0.16);
  --cue-border: rgba(224, 164, 88, 0.35);
  --cue-text-color: inherit;
  --cue-gap-before: 0.6em;
  --cue-gap-after: 0.6em;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg-plain);
}

body {
  font-family: var(--font-body);
  color: var(--fg-plain);
  -webkit-tap-highlight-color: transparent;
}

.hidden { display: none !important; }

#app { min-height: 100%; }

.screen {
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- setup screen ---------- */

#setup {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  max-width: 30rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
}

.setup-header h1 {
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
}

.setup-sub {
  margin: 0;
  opacity: 0.75;
  font-size: 0.95rem;
  line-height: 1.5;
}

.setup-controls {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.control-label {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  opacity: 0.7;
  text-transform: uppercase;
}

.switch-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.switch-side { font-size: 0.95rem; opacity: 0.85; }

.switch {
  position: relative;
  display: inline-block;
  width: 3.4rem;
  height: 1.9rem;
  flex: none;
}

.switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

.switch-track {
  position: absolute;
  inset: 0;
  background: #4a3c28;
  border-radius: 999px;
  transition: background 0.15s ease;
}

.switch-thumb {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--fg-plain);
  transition: transform 0.15s ease;
}

.switch input:checked ~ .switch-track { background: var(--accent); }
.switch input:checked ~ .switch-track .switch-thumb { transform: translateX(1.5rem); }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2.5rem;
  background: transparent;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 0.3rem;
  background: #4a3c28;
  border-radius: 999px;
}
input[type="range"]::-moz-range-track {
  height: 0.3rem;
  background: #4a3c28;
  border-radius: 999px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: -0.72rem;
  border-radius: 50%;
  background: var(--accent);
  border: none;
}
input[type="range"]::-moz-range-thumb {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--accent);
  border: none;
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  opacity: 0.6;
}

.start-btn {
  width: 100%;
  padding: 1rem;
  font-size: 1.1rem;
  font-family: inherit;
  font-weight: 600;
  color: #1a140c;
  background: var(--accent);
  border: none;
  border-radius: 0.8rem;
  cursor: pointer;
}
.start-btn:active { transform: translateY(1px); }

/* ---------- reading screen (locked) ---------- */

#reading {
  display: flex;
  flex-direction: column;
}

.reading-topbar {
  display: flex;
  justify-content: flex-end;
  padding: env(safe-area-inset-top) 0.75rem 0.5rem;
}

.exit-btn {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.reading-content {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 1.25rem calc(3rem + env(safe-area-inset-bottom));
  max-width: 34rem;
  margin: 0 auto;
  width: 100%;
}

.reading-content.font-0 { font-size: 17px; }
.reading-content.font-1 { font-size: 19.5px; }
.reading-content.font-2 { font-size: 23px; }

.reading-content.mode-plain {
  background: var(--bg-plain);
  color: var(--fg-plain);
}
.reading-content.mode-advanced {
  background: var(--bg-advanced);
  color: var(--fg-advanced);
}

.block { margin-bottom: 1.6em; scroll-margin-top: 1.5rem; }

.p {
  margin: 0 0 1em;
  line-height: var(--line-plain);
}
.mode-advanced .p { line-height: var(--line-advanced); }

/* ---------- inline delivery tags ---------- */

.tag-slow {
  letter-spacing: var(--slow-letter-spacing);
  word-spacing: var(--slow-word-spacing);
  /* a slow span must never break a word across lines */
  word-break: keep-all;
  overflow-wrap: normal;
}
.tag-quick {
  letter-spacing: var(--quick-letter-spacing);
  word-spacing: var(--quick-word-spacing);
}
.tag-soft { font-size: var(--soft-size); opacity: var(--soft-opacity); }
.tag-loud { font-size: var(--loud-size); font-weight: var(--loud-weight); }

.tag-swell-word, .tag-fade-word { display: inline; }

.tag-shake-letter { display: inline-block; }

.rest { display: block; }
.rest.beat { height: 0.6em; }
.rest.breath {
  height: 1.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rest.breath::after {
  content: '•';
  opacity: 0.5;
}

/* ---------- guidance cues (advanced view only) ---------- */
/* Four interchangeable looks, picked via config.cue.type / [data-type].
   All four share the same config-driven color/size/padding variables so
   switching type doesn't mean re-tuning from scratch. */

.cue-chip {
  font-size: var(--cue-font-size);
  color: var(--cue-text-color);
  font-family: system-ui, sans-serif;
  letter-spacing: 0.01em;
  vertical-align: middle;
}

.cue-chip[data-type="capsule"],
.cue-chip[data-type="outline"] {
  display: inline-block;
  padding: var(--cue-padding-y) var(--cue-padding-x);
  margin: 0 0.2em;
  border-radius: var(--cue-radius);
  border-width: var(--cue-border-width);
  border-style: solid;
}
.cue-chip[data-type="capsule"] {
  background: var(--cue-bg);
  border-color: var(--cue-border);
}
.cue-chip[data-type="outline"] {
  background: transparent;
  border-color: var(--cue-border);
}

.cue-chip[data-type="minimal"] {
  font-family: var(--font-body);
  font-style: italic;
  opacity: 0.9;
}
.cue-chip[data-type="minimal"]::before { content: '\2039\00A0'; }
.cue-chip[data-type="minimal"]::after { content: '\00A0\203A'; }

.cue-chip[data-type="between-lines"] {
  display: block;
  text-align: center;
  width: fit-content;
  max-width: 80%;
  margin: var(--cue-gap-before) auto var(--cue-gap-after);
  padding: var(--cue-padding-y) var(--cue-padding-x);
  border-radius: var(--cue-radius);
  border: var(--cue-border-width) solid var(--cue-border);
  background: var(--cue-bg);
}

/* ---------- character voices (opt-in) ---------- */
/* Colors/glow are set inline per-node in render.js (they're data-driven,
   not fixed values), so there's little to do here beyond a couple of
   structural nudges. */

.tag-say { transition: color 0.15s ease; }

/* A cue whose chip was colored to match a character (config.voices.enabled
   + the cue reinforces that character's <say>) -- same --cue-chip-char-color
   custom property render.js sets inline on the chip. */
.cue-chip--voiced[data-type="capsule"],
.cue-chip--voiced[data-type="between-lines"] {
  background: color-mix(in srgb, var(--cue-chip-char-color) 18%, transparent);
  border-color: var(--cue-chip-char-color);
  color: var(--cue-chip-char-color);
}
.cue-chip--voiced[data-type="outline"] {
  border-color: var(--cue-chip-char-color);
  color: var(--cue-chip-char-color);
}
.cue-chip--voiced[data-type="minimal"] {
  color: var(--cue-chip-char-color);
}

/* invite cues are the rarest (at most two per tale) and the one moment the
   parent turns to the child -- worth a touch more visual weight than the
   rest, which are self-explanatory from their own wording. */
.cue-invite { font-weight: 700; }