/* ITZA Story - the design system and the app shell.
 *
 * A beautiful bookshop crossed with a streaming service (spec 10.1): the
 * poster and the page are the heroes, the chrome is quiet, every number is
 * exact. Themes re-tint through the tokens below and never touch semantic
 * colour: the green path arrow, the four faces, amber for countdowns, gold
 * for the wordmark.
 *
 * NO WEB FONTS FROM ANYWHERE: Fraunces (titles and chapter text),
 * Instrument Sans (interface) and Roboto (the wordmark only) ship inside
 * this upload, latin subsets, variable weight. cdn.itzalabs.com is the only
 * remote origin and it is for the platform library alone.
 */

@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('../fonts/fraunces-latin-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/instrument-sans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/roboto-latin.woff2') format('woff2');
}

/* ---------------------------------------------------------------------
   Tokens. NIGHT is the default room (spec 10.2); paper and high contrast
   re-tint. Semantic colours are the same in every room.
   --------------------------------------------------------------------- */

:root {
  --paper: #0e1115;         /* the reading surface */
  --surface: #151a21;       /* cards, sheets */
  --surface-2: #1b212a;
  --ink: #e9e6df;           /* body text */
  --ink-soft: #c9c5bb;
  --muted: #98a0ab;         /* metadata, 5:1 on paper */
  --rule: #262c35;          /* hairlines */
  --navy: #a9c6e8;
  --blue: #6fb3ff;
  --blue-bright: #8ec6ff;
  --gold: #f5c711;
  --accent: #4d9bff;        /* acting is blue (the house control identity) */
  --accent-ink: #081524;
  --frost: rgba(14, 17, 21, 0.78);
  --poster-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-float: 0 2px 6px rgba(0, 0, 0, 0.5), 0 14px 40px rgba(0, 0, 0, 0.6);
  --glass: rgba(10, 12, 16, 0.55);
  --glass-ink: #f4f1ea;

  /* Semantic colours: the same meaning in every room. */
  --green: #39c46f;
  --amber: #f0a73b;
  --happy: #5ec08a;
  --sad: #8a93a3;
  --lighter: #f3c969;
  --darker: #a98be0;
  --danger: #e05252;

  --serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --wordmark: 'Roboto', var(--sans);

  --measure: 42rem;         /* about 66 characters a line at the reading size */
  --body-size: 1.2rem;
  --leading: 1.68;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --kb: 0px;

  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-full: 999px;
  --m-tap: 90ms; --m-quick: 160ms; --m-enter: 280ms; --m-exit: 240ms;
  --ease-enter: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

html[data-theme='paper'] {
  --paper: #fbfaf7;
  --surface: #ffffff;
  --surface-2: #f3f1ec;
  --ink: #12161c;
  --ink-soft: #2b3139;
  --muted: #666d79;
  --rule: #e2ded6;
  --navy: #0b2a4a;
  --blue: #0b6ad4;
  --blue-bright: #0c7ffb;
  --accent: #0b2a4a;
  --accent-ink: #ffffff;
  --frost: rgba(251, 250, 247, 0.84);
  --poster-shadow: 0 14px 34px rgba(11, 42, 74, 0.22), 0 2px 6px rgba(11, 42, 74, 0.12);
  --shadow-card: 0 1px 2px rgba(11, 42, 74, 0.06), 0 8px 24px rgba(11, 42, 74, 0.1);
  --shadow-float: 0 2px 6px rgba(11, 42, 74, 0.14), 0 12px 32px rgba(11, 42, 74, 0.18);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-ink: #12161c;
  --happy: #1f8f52;
  --sad: #5d6673;
  --lighter: #b8860b;
  --darker: #6b45b8;
  --green: #1f9a4f;
  --amber: #b9741a;
}

html[data-theme='hc'] {
  --paper: #ffffff;
  --surface: #ffffff;
  --surface-2: #f2f2f2;
  --ink: #000000;
  --ink-soft: #000000;
  --muted: #333333;
  --rule: #000000;
  --navy: #000000;
  --blue: #0033cc;
  --blue-bright: #0033cc;
  --accent: #000000;
  --accent-ink: #ffffff;
  --gold: #a06f00;
  --frost: rgba(255, 255, 255, 0.96);
  --poster-shadow: none;
  --shadow-card: none;
  --shadow-float: 0 0 0 2px #000;
  --glass: rgba(255, 255, 255, 0.95);
  --glass-ink: #000000;
  --happy: #00632e;
  --sad: #333333;
  --lighter: #7a5300;
  --darker: #3b1f7a;
  --green: #00632e;
  --amber: #7a4a00;
  --danger: #a00000;
}

/* ---------------------------------------------------------------------
   The base: the text scale, the viewport guard, no web tells
   --------------------------------------------------------------------- */

html {
  font-size: calc(100% * var(--text-scale, 1));
  transition: font-size 200ms ease;
  -webkit-text-size-adjust: 100%;
}
html[data-motion='reduce'] { transition: none; }
html, body { overflow-x: hidden; overflow-x: clip; }
html[data-motion='reduce'] *, html[data-motion='reduce'] *::before, html[data-motion='reduce'] *::after {
  animation-duration: 0.001ms !important;
  transition-duration: 0.001ms !important;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}
body { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.prose, .prose p, input, textarea, [contenteditable], .selectable {
  user-select: text; -webkit-user-select: text; -webkit-touch-callout: default;
}
button { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
.pane:focus, .pane:focus-visible { outline: none; }

.noscript { max-width: 36rem; margin: 3rem auto; padding: 0 1rem; font-family: var(--serif); }

/* ---------------------------------------------------------------------
   Screens, panes
   --------------------------------------------------------------------- */

.screen { position: fixed; inset: 0; display: none; }
.screen.on { display: block; }
#screen-app { display: none; }
#screen-app.on { display: flex; flex-direction: column; }
#view { position: relative; flex: 1; min-height: 0; }

.pane {
  position: absolute; inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  padding-bottom: calc(var(--safe-b) + 24px);
  isolation: isolate;
  scrollbar-width: none;
}
.pane::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) {
  .pane { scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
  .pane::-webkit-scrollbar { display: block; width: 10px; }
  .pane::-webkit-scrollbar-thumb { background: var(--rule); border: 3px solid transparent; background-clip: content-box; border-radius: var(--r-full); }
}
.pane-under { pointer-events: none; }

@keyframes paneIn { from { transform: translate3d(100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes paneOut { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(100%, 0, 0); } }
@keyframes paneFade { from { opacity: 0; transform: translate3d(0, 4px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes turnForward { from { opacity: 0; transform: translate3d(28px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes turnBack { from { opacity: 0; transform: translate3d(-28px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
.pane-enter { animation: paneIn var(--m-enter) var(--ease-enter); }
.pane-exit { animation: paneOut var(--m-exit) var(--ease-exit) forwards; z-index: 5; }
.pane-fade { animation: paneFade 180ms ease-out; }
.turn-forward { animation: turnForward 260ms var(--ease-enter); }
.turn-back { animation: turnBack 260ms var(--ease-enter); }

/* ---------------------------------------------------------------------
   Top bars, buttons, the wordmark
   --------------------------------------------------------------------- */

.tbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 4px;
  min-height: 56px;
  padding: calc(var(--safe-t) + 6px) calc(8px + var(--safe-r)) 6px calc(8px + var(--safe-l));
  background: var(--frost);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--rule);
}
.tbar-title {
  flex: 1; text-align: center;
  font-family: var(--serif); font-size: 1.05rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tbtn {
  width: 44px; height: 44px; padding: 0; border: none; background: transparent;
  border-radius: var(--r-full); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex: none;
}
.tbtn svg { width: 22px; height: 22px; }
.tbtn.small { width: 32px; height: 32px; }
.tbtn:active { transform: scale(0.94); }
.tbtn-pointer { visibility: hidden; }
@media (hover: hover) and (pointer: fine) { .tbtn-pointer { visibility: visible; } }

.wm { font-family: var(--wordmark); letter-spacing: -0.01em; white-space: nowrap; }
.wm-itza { color: #0c7ffb; font-weight: 600; }
.wm-prod { color: #ad8009; font-weight: 800; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .wm-prod {
    background-image: linear-gradient(105deg, #8a6206 0%, #c99a10 22%, #f9df6d 40%, #f5c711 52%, #a67c08 72%, #e0b312 88%, #b98a0a 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
html[data-theme='night'] .wm-itza, html:not([data-theme]) .wm-itza { color: #4d9bff; }
html[data-theme='night'] .wm-prod, html:not([data-theme]) .wm-prod { color: #f5c711; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  html[data-theme='night'] .wm-prod, html:not([data-theme]) .wm-prod {
    background-image: linear-gradient(105deg, #b98a0a 0%, #f5c711 25%, #ffe98a 42%, #f5c711 55%, #c99a10 75%, #ffd83d 90%, #e0b312 100%);
    color: transparent;
  }
}
html[data-theme='hc'] .wm-itza { color: #0033cc; }
html[data-theme='hc'] .wm-prod { background-image: none; color: #7a5300; -webkit-text-fill-color: #7a5300; }
.tbar .wm { font-size: 1.15rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  border: 1px solid transparent; border-radius: var(--r-md);
  background: linear-gradient(135deg, #0c7ffb, #1d6fd0); color: #fff;
  font-family: var(--sans); font-weight: 700; font-size: 0.95rem;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 8px 18px rgba(12, 127, 251, 0.22);
  transition: transform var(--m-tap), opacity var(--m-quick);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
.btn.gold { background: var(--gold); color: #231c00; box-shadow: none; }
.btn.ghost { background: var(--surface-2); color: var(--ink); border-color: var(--rule); box-shadow: none; font-weight: 600; }
.btn.danger { background: var(--danger); color: #fff; box-shadow: none; }
.btn.wide { width: 100%; }
.btn svg { flex: none; }
.linklike {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 12px auto 0; background: none; border: none; color: var(--blue);
  font-size: 0.92rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.muted { color: var(--muted); }
.amber { color: var(--amber); }

/* ---------------------------------------------------------------------
   Chips, segmented control
   --------------------------------------------------------------------- */

.chips {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 16px 10px;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.chips::-webkit-scrollbar { display: none; }
.chips.wrap { flex-wrap: wrap; overflow: visible; justify-content: center; }
.chip {
  flex: none; min-height: 36px; padding: 6px 14px;
  border: 1px solid var(--rule); border-radius: var(--r-full);
  background: var(--surface); color: var(--ink-soft);
  font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  scroll-snap-align: start;
  transition: background var(--m-quick), color var(--m-quick), border-color var(--m-quick);
}
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip:active { transform: scale(0.97); }

.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-full); padding: 3px; }
.seg-btn {
  border: none; background: transparent; color: var(--muted);
  padding: 7px 14px; border-radius: var(--r-full); font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: background var(--m-quick), color var(--m-quick);
}
.seg-btn.on { background: var(--surface-2); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }

/* ---------------------------------------------------------------------
   Home: the row of posters (spec 10.3)
   --------------------------------------------------------------------- */

.home { padding: 6px 0 0; }
.home-head { padding: 18px 16px 10px; }
.home-title { font-family: var(--serif); font-weight: 600; font-size: 1.55rem; margin: 0 0 4px; letter-spacing: -0.01em; }
.home-sub { margin: 0; color: var(--muted); font-size: 0.9rem; max-width: 40rem; line-height: 1.45; }
.home-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 16px 14px; flex-wrap: wrap; }

.row-wrap { position: relative; }
.row {
  display: flex; gap: 18px; overflow-x: auto; padding: 14px 16px 24px;
  scroll-snap-type: x mandatory; scroll-padding: 16px;
  scrollbar-width: none; -ms-overflow-style: none;
  min-height: 420px;
}
.row::-webkit-scrollbar { display: none; }
.row-arrow {
  position: absolute; top: 44%; z-index: 3;
  width: 44px; height: 44px; border-radius: var(--r-full);
  background: var(--glass); color: var(--glass-ink); border: 1px solid var(--rule);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--shadow-float);
}
.row-arrow.left { left: 6px; }
.row-arrow.right { right: 6px; }

.card {
  flex: none; width: min(62vw, 230px);
  scroll-snap-align: start;
  cursor: pointer; border-radius: var(--r-md);
  transition: transform var(--m-quick);
}
.card:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  .card:hover .poster { transform: translateY(-4px); box-shadow: var(--poster-shadow), 0 0 0 1px rgba(255, 255, 255, 0.06); }
}
.poster {
  position: relative; aspect-ratio: 2 / 3; width: 100%;
  border-radius: 14px; overflow: hidden;
  box-shadow: var(--poster-shadow);
  background: var(--surface-2);
  transition: transform var(--m-enter) var(--ease-enter), box-shadow var(--m-enter);
}
.poster-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* THE TYPOGRAPHIC POSTER: a story with no cover yet (and every story
   until its cover arrives) is its title set in Fraunces on a gradient
   drawn for its kind. Not a placeholder - a finished look of its own. */
.poster-type {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  padding: 18px 16px 22px;
  font-family: var(--serif); font-weight: 600; font-size: 1.35rem; line-height: 1.1;
  color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
  letter-spacing: -0.01em;
}
.poster-type::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%);
}
.poster-type span { position: relative; }
.poster-type::after {
  content: ''; position: absolute; left: 16px; right: 16px; top: 16px; height: 1px;
  background: rgba(255, 255, 255, 0.35);
}
.cls-comedy { background: linear-gradient(160deg, #f6a623, #e0432a 60%, #7b1e2b); }
.cls-romance { background: linear-gradient(160deg, #e36a9a, #8c2a5c 60%, #3b1030); }
.cls-drama { background: linear-gradient(160deg, #5c6b7a, #2d3744 60%, #10161d); }
.cls-thriller { background: linear-gradient(160deg, #2f3d55, #11182a 60%, #050810); }
.cls-mystery { background: linear-gradient(160deg, #2c4a6b, #16294a 60%, #0a1326); }
.cls-horror { background: linear-gradient(160deg, #4a1a1a, #1f0a0a 60%, #000); }
.cls-fantasy { background: linear-gradient(160deg, #6a3fb5, #2d1a66 60%, #120a2c); }
.cls-science_fiction { background: linear-gradient(160deg, #1aa6b7, #0e4f7a 60%, #071a2e); }
.cls-adventure { background: linear-gradient(160deg, #d1872e, #7a4a12 60%, #2e1b06); }
.cls-historical { background: linear-gradient(160deg, #a8865a, #5c4425 60%, #2b1e0f); }
.cls-crime { background: linear-gradient(160deg, #8a2b2b, #3a1414 60%, #140606); }
.cls-family { background: linear-gradient(160deg, #6fb37a, #2d6b45 60%, #11301e); }
.cls-coming_of_age { background: linear-gradient(160deg, #f0b36c, #c25d3e 60%, #4d2017); }
.cls-slice_of_life { background: linear-gradient(160deg, #9fc3d9, #4f7b96 60%, #213645); }
.cls-satire { background: linear-gradient(160deg, #d8d64a, #7a7a22 60%, #2f2f0c); }
.cls-fable { background: linear-gradient(160deg, #7cc0a0, #2f6e57 60%, #10302a); }
.cls-fairy_tale { background: linear-gradient(160deg, #c8a0e6, #6c48a3 60%, #2c1a4d); }
.cls-poetry { background: linear-gradient(160deg, #cbd3dc, #6c7684 60%, #2a3038); }
.cls-non_fiction { background: linear-gradient(160deg, #8fa3b7, #44566a 60%, #1c2730); }
.cls-childrens { background: linear-gradient(160deg, #ffd166, #ef8354 60%, #8a3b2a); }
.cls-adult { background: linear-gradient(160deg, #7a1f4a, #3d0f28 60%, #15050f); }

.badge {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px 5px 7px; border-radius: var(--r-full);
  background: var(--glass); color: var(--glass-ink);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  font-size: 0.74rem; font-weight: 600; font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.badge b { font-weight: 700; }
.badge-star { display: inline-flex; color: var(--gold); }
.badge-star svg { fill: currentColor; stroke: none; }
.badge-sep { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.3); }
.mark {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 1px;
  width: 30px; height: 30px; border-radius: var(--r-full);
  background: var(--glass); color: var(--glass-ink);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.meter {
  position: absolute; left: 12px; bottom: 10px;
  display: inline-flex; gap: 4px;
}
.meter i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); }
.meter i.on { background: #fff; }
.card-title { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; margin: 12px 2px 4px; line-height: 1.2; }
.card-desc {
  margin: 0 2px; color: var(--muted); font-size: 0.86rem; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-meta { margin: 6px 2px 0; color: var(--muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; }
.demo-note { padding: 0 16px 16px; color: var(--muted); font-size: 0.8rem; }

@media (min-width: 768px) {
  .home-head { padding: 28px 28px 10px; }
  .home-title { font-size: 2rem; }
  .home-tools, .chips { padding-left: 28px; padding-right: 28px; }
  .row { padding: 18px 28px 32px; gap: 24px; }
  .card { width: 240px; }
}
@media (min-width: 1200px) { .card { width: 260px; } .row { gap: 28px; } }

/* ---------------------------------------------------------------------
   The reader (spec 10.4)
   --------------------------------------------------------------------- */

.page {
  max-width: var(--measure); margin: 0 auto;
  padding: 18px 20px 40px;
}
.page-head { margin: 10px 0 18px; }
.page-kicker { margin: 0 0 6px; color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.page-class { color: var(--muted); font-weight: 400; letter-spacing: 0.06em; }
.page-class::before { content: ' / '; }
.page-title { font-family: var(--serif); font-weight: 600; font-size: 1.9rem; line-height: 1.12; margin: 0; letter-spacing: -0.015em; }
.page-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.byline { margin: 0; color: var(--muted); font-size: 0.86rem; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.byline-name { color: var(--ink); font-weight: 600; }
.byline-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); }
.byline-pending { font-style: italic; }
.chip-label {
  display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px;
  border-radius: var(--r-full); border: 1px solid var(--rule);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); background: var(--surface);
}
.chip-label.label-ai { border-color: color-mix(in srgb, var(--blue) 50%, var(--rule)); color: var(--blue); }
.chip-label.label-hybrid { color: var(--ink-soft); }
.chip-label.st-expired { color: var(--muted); }
.chip-label.st-waiting { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, var(--rule)); }
.chip-label.st-ended { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, var(--rule)); }

.prose { font-family: var(--serif); font-size: var(--body-size); line-height: var(--leading); color: var(--ink); }
.prose p { margin: 0 0 1.15em; text-wrap: pretty; }
.prose p:first-child::first-letter { font-size: 2.6em; line-height: 0.85; float: left; padding: 6px 8px 0 0; font-weight: 600; }

.previously {
  margin: 0 0 20px; padding: 14px 16px;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--surface); color: var(--muted);
  font-size: 0.92rem; line-height: 1.5;
}
.previously p { margin: 8px 0 0; }
.previously-head { display: flex; align-items: center; gap: 10px; }
.previously-title { font-family: var(--serif); font-weight: 600; color: var(--ink); font-size: 1rem; flex: 1; }

.foot { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--rule); font-family: var(--sans); }
.rate-q { margin: 0 0 14px; text-align: center; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.faces { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.face-group { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.face-group-name { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
.face-pair { display: flex; gap: 10px; }
.face {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 84px; padding: 12px 6px 10px;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
  font-size: 0.74rem; font-weight: 600;
  transition: transform var(--m-tap), border-color var(--m-quick), opacity var(--m-quick), background var(--m-quick);
}
.face svg { transition: color var(--m-quick); }
/* The button is the target, whatever part of it the finger lands on. */
.face svg, .face span, .star svg, .arrow > span, .chip > *, .btn > * { pointer-events: none; }
.face-happy svg { color: var(--happy); }
.face-sad svg { color: var(--sad); }
.face-lighter svg { color: var(--lighter); }
.face-darker svg { color: var(--darker); }
.face:active { transform: scale(0.95); }
.face.on { border-color: currentColor; background: var(--surface-2); }
.face-happy.on { color: var(--happy); } .face-sad.on { color: var(--sad); }
.face-lighter.on { color: var(--lighter); } .face-darker.on { color: var(--darker); }
.face.dim { opacity: 0.4; }
.stars { display: flex; justify-content: center; gap: 4px; margin-top: 18px; }
.stars[hidden] { display: none; }
@keyframes starsIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.stars.in .star { animation: starsIn 220ms var(--ease-enter) backwards; }
.stars.in .star:nth-child(2) { animation-delay: 40ms; } .stars.in .star:nth-child(3) { animation-delay: 80ms; }
.stars.in .star:nth-child(4) { animation-delay: 120ms; } .stars.in .star:nth-child(5) { animation-delay: 160ms; }
.star { width: 52px; height: 52px; border: none; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-full); }
.star.lit { color: var(--gold); }
.star.lit svg { fill: currentColor; }
.star:active { transform: scale(0.9); }
.rate.sending { opacity: 0.5; pointer-events: none; }
.rate-own, .ended-note { text-align: center; color: var(--muted); margin: 0 0 16px; }
.rate-signin { text-align: center; margin: 0 0 20px; }
.rate-signin p { margin: 0 0 12px; color: var(--muted); }

.ending { margin: 22px 0 10px; padding: 16px; border: 1px solid color-mix(in srgb, var(--green) 40%, var(--rule)); border-radius: var(--r-md); background: var(--surface); text-align: center; }
.ending-title { margin: 0 0 6px; font-family: var(--serif); font-weight: 600; font-size: 1.1rem; }
.ending-body { margin: 0 0 12px; color: var(--muted); font-size: 0.9rem; }

.way { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 24px; }
.way .btn.wide { max-width: 26rem; }
.last { text-align: center; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.last-lead { margin: 0; font-family: var(--serif); font-size: 1.1rem; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.last-clock { margin: 0 0 6px; color: var(--muted); font-size: 0.86rem; }

@media (min-width: 768px) { .page { padding: 28px 32px 60px; } .page-title { font-size: 2.3rem; } }

/* ---------------------------------------------------------------------
   The path choice (spec 10.5): a centred panel, one arrow per way forward
   --------------------------------------------------------------------- */

.choice h3 { margin: 4px 0 4px; font-family: var(--serif); font-size: 1.2rem; }
.choice-sub { margin: 0 0 14px; color: var(--muted); font-size: 0.88rem; }
.fan { display: flex; flex-direction: column; gap: 10px; }
.arrow {
  position: relative; display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto auto; column-gap: 12px; align-items: center;
  text-align: left; width: 100%; padding: 12px 14px 12px 10px;
  border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface-2);
  color: var(--ink); cursor: pointer;
  transition: transform var(--m-tap), border-color var(--m-quick), opacity var(--m-quick);
}
.arrow:active { transform: scale(0.985); }
.arrow-head { grid-row: 1 / span 3; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--r-full); background: var(--surface); color: var(--band, var(--ink)); transform: rotate(var(--angle, 0deg)); transition: transform var(--m-enter) var(--ease-enter); }
.arrow-head svg { width: 32px; height: 32px; }
.arrow-rating { font-size: 0.92rem; display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.arrow-rating svg { color: var(--gold); fill: currentColor; stroke: none; }
.arrow-rating small { color: var(--muted); font-size: 0.78rem; }
.arrow-band { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--band, var(--muted)); }
.arrow-first { grid-column: 2; font-family: var(--serif); font-size: 0.95rem; color: var(--ink-soft); line-height: 1.35; }
.arrow-paths { grid-column: 2; color: var(--muted); font-size: 0.76rem; }
.arrow-green, .arrow-last { grid-column: 2; font-size: 0.74rem; font-weight: 700; color: var(--green); display: inline-flex; align-items: center; gap: 6px; }
.arrow-last { color: var(--blue); }
.arrow-green::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.band-same { --band: var(--happy); }
.band-lighter { --band: var(--lighter); }
.band-darker { --band: var(--darker); }
.arrow.green { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }
.arrow.green .arrow-head { color: var(--green); background: color-mix(in srgb, var(--green) 14%, var(--surface)); }
.arrow.quiet { opacity: 0.62; }
@media (min-width: 640px) {
  .fan { flex-direction: row; align-items: stretch; flex-wrap: wrap; justify-content: center; }
  .arrow { width: calc(50% - 5px); grid-template-columns: 1fr; text-align: center; justify-items: center; padding-top: 18px; }
  .arrow-head { grid-row: auto; width: 64px; height: 64px; margin-bottom: 6px; }
  .arrow-first, .arrow-paths, .arrow-green, .arrow-last { grid-column: auto; }
}

/* ---------------------------------------------------------------------
   Sheets, modal, toast, loading, empty states
   --------------------------------------------------------------------- */

.scrim2 { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity var(--m-quick); }
.scrim2.on { opacity: 1; }
.sheet {
  position: fixed; left: 50%; bottom: 0; z-index: 81;
  transform: translate(-50%, 105%);
  width: min(100%, 34rem); max-height: 86vh; overflow-y: auto;
  background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow-float);
  padding: 8px 18px calc(var(--safe-b) + 18px);
  transition: transform var(--m-enter) var(--ease-enter);
}
.sheet.on { transform: translate(-50%, 0); }
.sheet-grab { width: 38px; height: 4px; border-radius: var(--r-full); background: var(--rule); margin: 6px auto 12px; }
.sheet h3 { font-family: var(--serif); font-size: 1.1rem; margin: 0 0 10px; }
.sheet-row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  border: none; background: transparent; text-align: left; padding: 13px 2px;
  font-size: 0.95rem; color: var(--ink); cursor: pointer; border-bottom: 1px solid var(--rule);
}
.sheet-row:last-child { border-bottom: none; }
.sheet-row svg { color: var(--muted); flex: none; }
.sheet-row:active { opacity: 0.6; }
@media (min-width: 768px) {
  .sheet { bottom: auto; top: 50%; transform: translate(-50%, -46%); opacity: 0; border-radius: var(--r-lg); transition: transform var(--m-enter) var(--ease-enter), opacity var(--m-quick); }
  .sheet.on { transform: translate(-50%, -50%); opacity: 1; }
  .sheet-grab { display: none; }
}

#scrim { position: fixed; inset: 0; z-index: 85; background: rgba(0, 0, 0, 0.55); display: none; align-items: center; justify-content: center; padding: 16px; }
#scrim.on { display: flex; }
#modal { width: min(100%, 28rem); background: var(--surface); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-float); }
.mhead { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; margin: 0 0 10px; }
.mtext { margin: 0 0 16px; color: var(--muted); line-height: 1.5; }
.mbtns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.mbtns-stack { flex-direction: column; }
.mform label { display: block; margin: 12px 0 4px; font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.mform input { width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); font: inherit; }
.obWarnBig { border: 2px solid var(--danger); border-radius: 12px; padding: 14px 16px; margin: 4px 0 6px; font-size: 1rem; line-height: 1.55; }
.aw-wrote { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; font-size: 0.92rem; line-height: 1.4; }

#toast {
  position: fixed; left: 50%; bottom: calc(var(--safe-b) + 28px); z-index: 90;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: min(92vw, 30rem); padding: 11px 16px; border-radius: var(--r-md);
  background: var(--ink); color: var(--paper); font-size: 0.92rem; line-height: 1.4;
  box-shadow: var(--shadow-float);
  transition: transform var(--m-quick), opacity var(--m-quick);
}
#toast.on { transform: translate(-50%, 0); opacity: 1; }

.loading { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 24px 16px; font-size: 0.9rem; }
.loading-dots { display: inline-flex; gap: 4px; }
.loading-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dot 1s infinite ease-in-out; }
.loading-dots i:nth-child(2) { animation-delay: 0.15s; } .loading-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.loading-line { color: var(--muted); font-size: 0.9rem; }
.empty { padding: 36px 20px; text-align: center; color: var(--muted); max-width: 30rem; margin: 0 auto; }
.empty-lead { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); margin: 0 0 8px; }
.empty .btn { margin-top: 14px; }

.offline-pill {
  position: fixed; top: calc(var(--safe-t) + 62px); left: 50%; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 8px;
  background: var(--frost); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--rule); border-radius: var(--r-full); color: var(--muted);
  font-size: 0.78rem; padding: 6px 8px 6px 14px; cursor: pointer; max-width: 92vw;
}
.offline-pill[hidden] { display: none !important; }
.offline-x { flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--ink) 10%, transparent); }

/* ---------------------------------------------------------------------
   Settings, My chapters, first run
   --------------------------------------------------------------------- */

.settings, .mine { max-width: 40rem; margin: 0 auto; padding: 10px 16px 40px; }
.set-h { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 24px 4px 8px; font-weight: 700; }
.set-row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 13px 12px; border: 1px solid var(--rule); border-bottom-width: 0;
  background: var(--surface); color: var(--ink); text-align: left; cursor: pointer;
}
.set-row:first-of-type, .set-h + .set-row { border-radius: var(--r-md) var(--r-md) 0 0; }
.set-row:last-of-type { border-bottom-width: 1px; border-radius: 0 0 var(--r-md) var(--r-md); }
.set-row:only-of-type, .set-h + .set-row:last-of-type { border-radius: var(--r-md); border-bottom-width: 1px; }
.set-row > svg:first-child { color: var(--muted); flex: none; }
.set-row > svg:last-child { color: var(--muted); flex: none; margin-left: auto; }
.set-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.set-title { font-size: 0.95rem; font-weight: 600; }
.set-value { font-size: 0.82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-row.danger .set-title { color: var(--danger); }
.set-static { cursor: default; }
.set-note { color: var(--muted); font-size: 0.82rem; line-height: 1.45; margin: 8px 4px; }
.set-static-value { margin: 6px 0 0; font-size: 0.95rem; }
.set-version { color: var(--muted); font-size: 0.78rem; margin: 26px 4px; text-align: center; }
.tsize { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.tsize b { min-width: 1.2em; text-align: center; font-variant-numeric: tabular-nums; }
.tsize-btn { width: 40px; height: 40px; border-radius: var(--r-full); border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink); cursor: pointer; font-family: var(--serif); font-size: 0.9rem; }
.tsize-btn.big { font-size: 1.25rem; font-weight: 600; }
.price-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; font-size: 0.92rem; }
.price-table td { padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.price-table tr:last-child td { border-bottom: none; }
.price-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.sw-row { display: flex; gap: 12px; padding: 4px 2px; }
.sw-swatch { flex: 1; border: none; background: transparent; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); font-size: 0.78rem; font-weight: 600; }
.sw-swatch.on { color: var(--ink); }
.sw-card { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-md); border: 2px solid var(--rule); padding: 10px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.sw-swatch.on .sw-card { border-color: var(--blue-bright); }
.sw-poster { width: 34%; aspect-ratio: 2 / 3; border-radius: 4px; }
.sw-line { height: 4px; border-radius: 2px; width: 70%; }
.sw-line.short { width: 45%; }
.sw-night { background: #0e1115; }
.sw-night .sw-poster { background: linear-gradient(160deg, #2c4a6b, #0a1326); }
.sw-night .sw-line { background: #3a424d; }
.sw-paper { background: #fbfaf7; }
.sw-paper .sw-poster { background: linear-gradient(160deg, #2c4a6b, #0a1326); }
.sw-paper .sw-line { background: #d7d2c8; }
.sw-hc { background: #ffffff; }
.sw-hc .sw-poster { background: #000; }
.sw-hc .sw-line { background: #000; }

/* The Balance screen */
.money-head { text-align: center; padding: 18px 0 6px; }
.money-big { margin: 0; font-family: var(--serif); font-size: 2.4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.money-sub { margin: 4px 0 0; color: var(--muted); font-size: 0.88rem; }
.money-val { margin-left: auto; font-size: 0.9rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-soft); }
.money-add { gap: 10px; }
.money-add-label { font-size: 0.95rem; font-weight: 600; flex: none; }
.money-add input { flex: 1; min-width: 0; width: 6rem; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; }
.money-add .btn { flex: none; }
.money .set-row[disabled] { opacity: 0.55; cursor: default; }
.charges td .small { font-size: 0.78rem; }
.money-line { margin: 0 0 8px; font-size: 1.02rem; }

.mine-item { padding: 14px 2px; border-bottom: 1px solid var(--rule); cursor: pointer; }
.mine-item[hidden] { display: none; }
.mine-story { margin: 0 0 6px; font-family: var(--serif); font-weight: 600; font-size: 1.02rem; }
.mine-line { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.82rem; }
.mine-text { margin: 0 0 6px; color: var(--ink-soft); font-family: var(--serif); font-size: 0.95rem; line-height: 1.45; }
.mine-earned { margin: 0; font-size: 0.8rem; }
.mine-filter { padding-left: 0; padding-right: 0; }

.fr { max-width: 30rem; margin: 0 auto; padding: calc(var(--safe-t) + 48px) 20px 40px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.fr-wm { margin: 0; font-size: 1.4rem; }
.fr-head { font-family: var(--serif); font-size: 1.9rem; margin: 10px 0 0; font-weight: 600; line-height: 1.1; }
.fr-sub { color: var(--muted); margin: 0; line-height: 1.5; }
.fr-q { font-family: var(--serif); font-size: 1.25rem; margin: 18px 0 0; font-weight: 600; }
.fr .btn { margin-top: 10px; max-width: 22rem; }

/* ---------------------------------------------------------------------
   Sign in - PORTED 1:1 FROM ITZA DIARY (which ported it from Chess and
   Chat). The same screen in every ITZA app on purpose: it is the same
   account. Self-contained: the whole palette is scoped to #screen-onboard.
   Light is the default; dark follows the app's night room.
   --------------------------------------------------------------------- */

#screen-onboard{
  --ob-blue:#0c7ffb; --ob-blue-soft:#1d6fd0; --ob-gold:#f5c711;
  --ob-acc:#0c7ffb; --ob-acc-ink:#ffffff;
  --ob-bg:#f3f4f6; --ob-bg2:#ffffff; --ob-bg3:#f7f7f8;
  --ob-ink:#0b2a4a; --ob-ink2:#1e416b; --ob-ink3:#41618c;
  --ob-line:#d7dbe2; --ob-line2:#c5ccd6; --ob-hover:rgba(12,127,251,.06);
  --ob-card-shadow:0 18px 50px rgba(24,59,103,.12);
  --ob-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ob-r-sm:8px;
  --ob-danger:#c62828;
}
html[data-theme="night"] #screen-onboard, html:not([data-theme]) #screen-onboard{
  --ob-bg:#0b1f3a; --ob-bg2:#10294a; --ob-bg3:#173058;
  --ob-ink:#e8edf4; --ob-ink2:#9db0c7; --ob-ink3:#5b7089;
  --ob-line:#1e3a63; --ob-line2:#28466f; --ob-hover:rgba(255,255,255,.05);
  --ob-card-shadow:0 18px 50px rgba(0,0,0,.45);
}
#screen-onboard{padding:0}
#screen-onboard.on{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  padding:16px; overflow-y:auto;
  background:linear-gradient(to bottom,#ffffff 0,#ffffff 200px,var(--ob-blue) 200px,var(--ob-blue) 224px,var(--ob-bg) 224px);
}
html[data-theme="night"] #screen-onboard.on, html:not([data-theme]) #screen-onboard.on{
  background:linear-gradient(to bottom,#10294a 0,#10294a 200px,var(--ob-blue) 200px,var(--ob-blue) 224px,var(--ob-bg) 224px);
}
#screen-onboard .obcard{
  width:100%; max-width:430px; margin:0; text-align:left;
  background:var(--ob-bg2); border:1px solid var(--ob-line); border-radius:22px;
  padding:22px; box-shadow:var(--ob-card-shadow); color:var(--ob-ink);
  font:13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
#screen-onboard .hd{display:flex; align-items:center; gap:10px; margin-bottom:4px}
#screen-onboard .pyr{width:44px; height:auto}
#screen-onboard h1{font-size:19px; letter-spacing:.01em; font-weight:700; margin:0; font-family:inherit; color:var(--ob-ink)}
#screen-onboard h1.ob-wordmark{font-size:21px; letter-spacing:0; font-weight:400; font-family:'Roboto', var(--sans)}
#screen-onboard .tag{font-size:11.5px; color:var(--ob-ink2); margin-bottom:14px}
#screen-onboard .tag b{color:#8d6f00}
html[data-theme="night"] #screen-onboard .tag b, html:not([data-theme]) #screen-onboard .tag b{color:var(--ob-gold)}
#screen-onboard label{display:block; margin:12px 0 4px; font-size:11.5px; color:var(--ob-ink2); font-weight:600; text-align:left}
#screen-onboard label.ob-check{display:flex; gap:8px; align-items:flex-start; font-weight:500; margin-top:8px}
#screen-onboard label.ob-check input{width:auto; margin-top:2px; flex:none}
#screen-onboard input,#screen-onboard textarea{
  width:100%; font:inherit; color:var(--ob-ink); background:var(--ob-bg3);
  border:1px solid var(--ob-line2); border-radius:var(--ob-r-sm); padding:6px 9px; outline:none;
}
#screen-onboard input:focus,#screen-onboard textarea:focus{border-color:var(--ob-acc)}
#screen-onboard ::placeholder{color:var(--ob-ink3)}
#screen-onboard .obtoggle{display:flex; gap:4px; margin-bottom:12px}
#screen-onboard .obtoggle button{flex:1; font-size:11.5px; padding:6px; border-radius:var(--ob-r-sm); border:1px solid var(--ob-line2); color:var(--ob-ink2); background:none; cursor:pointer}
#screen-onboard .obtoggle button.on{border-color:var(--ob-acc); color:var(--ob-ink); background:var(--ob-hover); font-weight:700}
#screen-onboard .btn{
  background:linear-gradient(135deg,var(--ob-acc),var(--ob-blue-soft)); color:var(--ob-acc-ink);
  font-weight:700; font-size:12.5px; padding:8px 16px; border-radius:10px; border:none; cursor:pointer;
  box-shadow:0 8px 18px rgba(12,127,251,.22); min-height:0;
}
#screen-onboard .btn:disabled{opacity:.45; cursor:default; box-shadow:none}
#screen-onboard .btn.ghost{background:var(--ob-bg3); color:var(--ob-ink); border:1px solid var(--ob-line2); font-weight:600; box-shadow:none}
#screen-onboard .btn.gold{background:var(--ob-gold); color:#231c00; box-shadow:none}
#screen-onboard .btn.wide{width:100%}
#screen-onboard .feenote{font-size:10px; color:var(--ob-ink3); text-align:left; margin-top:0}
#screen-onboard .feenote b{color:var(--ob-ink2)}
#screen-onboard .feenote.gate{margin-top:14px}
#screen-onboard .linklike{display:block; margin:14px auto 0; background:none; border:none; color:var(--ob-blue); font-size:12px; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
#screen-onboard .settingsec{border-top:1px solid var(--ob-line); margin-top:12px; padding-top:10px}
#screen-onboard .settingsec h4{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ob-ink3); margin-bottom:6px}
#screen-onboard .spinner{display:inline-block; width:13px; height:13px; border:2px solid var(--ob-line2); border-top-color:var(--ob-blue); border-radius:50%; animation:spin .8s linear infinite; vertical-align:-2px; margin-right:4px}
@keyframes spin{to{transform:rotate(360deg)}}
#screen-onboard #obChoose{ display:flex; flex-direction:column; gap:10px; margin:16px 0 4px; }
#screen-onboard #obChoose .btn{ height:46px; font-size:15px; font-weight:700; }
#screen-onboard #obBack{ margin-top:0; margin-bottom:10px; display:inline-block; }
.pwwrap{ position:relative; display:block; }
.pwwrap input{ width:100%; padding-right:44px; }
.pweye{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; color:var(--ob-ink3); cursor:pointer; padding:0; background:none; border:none;
}
#screen-onboard .pweye:hover{ color:var(--ob-ink); background:var(--ob-hover); }
.pweye svg{ width:20px; height:20px; display:block; }
.pweye.on{ color:var(--ob-acc); }
html[dir="rtl"] .pwwrap input{ padding-right:12px; padding-left:44px; }
html[dir="rtl"] .pweye{ right:auto; left:6px; }
#screen-onboard .pwwrap input{ padding-right:44px; }
html[dir="rtl"] #screen-onboard .pwwrap input{ padding-right:9px; padding-left:44px; }
.fieldErr{ margin-top:8px; padding:9px 12px; border-radius:9px; border:2px solid #c62828; color:#c62828; font-size:13.5px; font-weight:700; line-height:1.4; }
#screen-onboard .fieldErr{ color:#c62828; border-color:#c62828; background:rgba(198,40,40,.07); }
html[data-theme="hc"] #screen-onboard .fieldErr{ color:#8c0000; border-color:#8c0000; background:rgba(140,0,0,.10); }
input.err, .pwwrap input.err{ border-color:#c62828; box-shadow:0 0 0 3px rgba(224,40,40,.18); }
#screen-onboard input.err{ border-color:#c62828; box-shadow:0 0 0 3px rgba(198,40,40,.16); }

/* ---------------------------------------------------------------------
   The editor (spec 10.6): the page and the text, the tools in a dock
   pinned above the keyboard, the turn countdown at the top in amber.
   --------------------------------------------------------------------- */

.pane[data-route='write'], .pane[data-route='start'] { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.ed-top { gap: 10px; }
.ed-state { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.ed-count { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ed-count.amber { color: var(--amber); font-weight: 700; }
.ed-count.full { color: var(--danger); font-weight: 700; }
.ed-done { min-height: 40px; padding: 8px 14px; font-size: 0.9rem; flex: none; }
.ed-done .ed-price { font-weight: 500; opacity: 0.85; font-variant-numeric: tabular-nums; }
.ed-done.busy { opacity: 0.6; }
.ed-turn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 16px; font-size: 0.88rem; line-height: 1.35;
  background: var(--surface); border-bottom: 1px solid var(--rule); color: var(--muted);
}
.ed-turn[hidden] { display: none; }
.ed-turn.amber { color: var(--amber); background: color-mix(in srgb, var(--amber) 10%, var(--surface)); border-bottom-color: color-mix(in srgb, var(--amber) 35%, var(--rule)); }
.ed-turn svg { flex: none; }
.ed-clock { font-family: var(--sans); font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.ed-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 20px calc(var(--kb) + 120px); max-width: var(--measure); width: 100%; margin: 0 auto; }
.ed-kicker { margin: 4px 0 2px; color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.ed-title { margin: 0 0 16px; font-family: var(--serif); font-weight: 600; font-size: 1.3rem; line-height: 1.15; }
.editor {
  min-height: 40vh; outline: none; white-space: pre-wrap; word-break: break-word;
  caret-color: var(--blue-bright);
}
.editor:empty::before { content: attr(data-placeholder); color: var(--muted); font-style: italic; pointer-events: none; }
.ed-labelnote { margin: 18px 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.45; border-top: 1px solid var(--rule); padding-top: 10px; }
.ed-dock {
  flex: none; display: flex; align-items: center; gap: 4px; overflow-x: auto;
  padding: 8px calc(10px + var(--safe-r)) calc(8px + var(--safe-b) + var(--kb)) calc(10px + var(--safe-l));
  background: var(--frost); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-top: 1px solid var(--rule); scrollbar-width: none;
}
.ed-dock::-webkit-scrollbar { display: none; }
.edtl {
  flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 64px; min-height: 52px; padding: 6px 8px; border: none; background: transparent; color: var(--ink-soft);
  border-radius: var(--r-md); cursor: pointer; font-size: 0.68rem; font-weight: 600;
}
.edtl:active { background: var(--surface-2); }
.edtl svg { color: var(--blue); }
.ed-end { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap; padding: 6px 8px; cursor: pointer; }
.ed-end input { width: 18px; height: 18px; accent-color: var(--green); }
.ai-sheet textarea, .mform textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); font: inherit; font-family: var(--serif); line-height: 1.5; resize: vertical; }
.ai-count { margin: 8px 0 0; font-size: 0.82rem; color: var(--amber); font-variant-numeric: tabular-nums; font-weight: 600; }
.ai-count.ok { color: var(--green); }
@media (min-width: 768px) { .ed-scroll { padding-top: 24px; } .editor { min-height: 50vh; } }

/* ---------------------------------------------------------------------
   Start a story (spec 10.7): a short sequence of steps
   --------------------------------------------------------------------- */

.start, .pv { max-width: 34rem; margin: 0 auto; padding: 14px 20px 40px; }
.steps { display: flex; gap: 6px; margin: 8px 0 6px; }
.steps i { flex: 1; height: 4px; border-radius: 2px; background: var(--rule); }
.steps i.done { background: var(--blue); }
.steps i.on { background: var(--gold); }
.start-step { margin: 0 0 14px; color: var(--muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.start-h { font-family: var(--serif); font-weight: 600; font-size: 1.6rem; line-height: 1.15; margin: 0 0 12px; letter-spacing: -0.01em; }
.start-h2 { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; margin: 22px 0 6px; }
.start-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 26px; }
.start .chips.wrap { padding: 6px 0 4px; justify-content: flex-start; }
.tag-add { display: flex; gap: 8px; }
.tag-add input { flex: 1; }
#stChosen { padding: 8px 0 0; min-height: 10px; }
#stChosen .chip b { font-weight: 700; margin-left: 4px; }
.toggle-row {
  display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 12px;
  padding: 13px 14px; border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); text-align: left; cursor: pointer;
}
.toggle { flex: none; width: 46px; height: 28px; border-radius: var(--r-full); background: var(--rule); position: relative; transition: background var(--m-quick); }
.toggle i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform var(--m-quick); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.toggle-row.on .toggle { background: var(--green); }
.toggle-row.on .toggle i { transform: translateX(18px); }
.who { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.who-card {
  display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; align-items: center; text-align: left;
  padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface); color: var(--ink); cursor: pointer;
}
.who-card svg { grid-row: 1 / span 2; color: var(--muted); }
.who-card b { font-size: 1rem; }
.who-card span { color: var(--muted); font-size: 0.84rem; line-height: 1.4; }
.who-card.on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.who-card.on svg { color: var(--blue); }
.who-card > * { pointer-events: none; }
.cover-preview { display: flex; justify-content: center; margin: 10px 0 14px; }
.cover-preview .poster { width: min(60vw, 220px); }
@media (min-width: 640px) { .who { flex-direction: row; } .who-card { flex: 1; } }

/* ---------------------------------------------------------------------
   Private stories (spec 10.8): the landing, the link, the members
   --------------------------------------------------------------------- */

.pv-desc { color: var(--ink-soft); font-size: 1rem; line-height: 1.5; margin: 0 0 10px; }
.pv-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.link-box { padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface); }
.link-box code { display: block; font-size: 0.8rem; line-height: 1.45; word-break: break-all; color: var(--ink-soft); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.link-box .mbtns { margin-top: 10px; justify-content: flex-start; }
.members { border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface); }
.member-row { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.member-row:last-child { border-bottom: none; }
.member-who { font-size: 0.78rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; }
.member-who.named { font-family: var(--sans); font-size: 0.95rem; font-weight: 600; word-break: normal; }
.member-row .muted { grid-column: 1; font-size: 0.76rem; }
.member-row .btn { grid-column: 2; grid-row: 1 / span 2; }
.btn.small { min-height: 34px; padding: 6px 12px; font-size: 0.82rem; }

/* ---------------------------------------------------------------------
   Pictures (spec 9): posters, chapter figures, the editor's embeds
   --------------------------------------------------------------------- */

.poster-img { opacity: 0; transition: opacity var(--m-enter); z-index: 1; }
.poster-img.loaded { opacity: 1; }
.poster .poster-type { z-index: 0; }
.poster .badge, .poster .mark, .poster .meter { z-index: 2; }
.prose figure.pic { margin: 1.4em 0; }
/* A picture is shown at its own size up to the measure, never blown up
   (spec 9.2: never upscale), and never taller than the screen. */
.prose figure.pic img { display: block; width: auto; max-width: 100%; max-height: 70vh; height: auto; margin: 0 auto; border-radius: var(--r-md); background: var(--surface-2); min-height: 120px; min-width: 120px; }
.prose figure.pic img.failed { min-height: 80px; }
.ed-embed { display: block; margin: 12px 0; position: relative; user-select: none; -webkit-user-select: none; }
.ed-embed img { display: block; width: auto; max-width: 100%; max-height: 60vh; height: auto; margin: 0 auto; border-radius: var(--r-md); background: var(--surface-2); min-height: 100px; min-width: 120px; }
.ed-embed-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: var(--r-full); border: none; background: var(--glass); color: var(--glass-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ed-embed-x svg { width: 18px; height: 18px; pointer-events: none; }
.cover-preview .poster-img { opacity: 1; }
.cover-tools { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.cover-tools .mform label { margin-top: 0; }
.cover-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cover-line .muted { font-size: 0.82rem; }
.waiting { display: flex; align-items: center; gap: 12px; padding: 14px 0 4px; color: var(--muted); font-size: 0.92rem; }
.pic-sheet .sheet-row { padding: 14px 2px; }