:root {
  /* Linen: raw undyed cloth, indigo thread, madder-red notes. */
  --bg: #E7E5DF; --surface: #EFEDE8; --raised: #F8F7F3; --ink: #22252A; --ink-2: #585D63; --ink-3: #85898E;
  --line: #D3D0C7; --accent: #2B3A67; --accent-ink: #FFFFFF; --accent-soft: #DCDFE8;
  --note: #9C3D2E; --note-soft: #F0DED8; --danger: #9B2C2C; --danger-soft: #F4E1E1; --ok: #2F6B4E;
  --thread: #2B3A67;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs: 19px; --measure: 34em; --radius: 10px; --thread-x: -24px;
  color-scheme: light;
}
/* First visit, before the page script picks a theme: follow the device. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121915; --surface: #18201C; --raised: #1F2924; --ink: #D3CFC1; --ink-2: #9C9A8E; --ink-3: #74746A;
    --line: #2A342E; --accent: #C2A063; --accent-ink: #121915; --accent-soft: #2B2E24;
    --note: #D49384; --note-soft: #33241F; --danger: #E28B8B; --danger-soft: #3A2224; --ok: #7FBF9C; --thread: #B8955A;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
html { overflow-anchor: none; }
body { font-family: var(--sans); font-size: 16px; line-height: 1.5; min-height: 100dvh; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.i { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Buttons and fields */
.btn { display: inline-flex; align-items: center; gap: .45em; border: 1px solid var(--line); background: var(--raised); color: var(--ink);
  padding: .55em 1em; border-radius: 999px; font-size: .95rem; line-height: 1.2; }
.btn:hover { border-color: var(--ink-3); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.quiet:hover { color: var(--ink); background: var(--accent-soft); }
.btn.danger { color: var(--danger); border-color: var(--danger-soft); background: transparent; }
.btn.danger:hover { background: var(--danger-soft); }
.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 0; background: transparent; color: var(--ink-2); }
.icon-btn:hover, .icon-btn[aria-expanded="true"] { background: var(--accent-soft); color: var(--ink); }
label.field { display: grid; gap: .3rem; font-size: .9rem; color: var(--ink-2); }
.field input, .field textarea, .field select, .input {
  width: 100%; border: 1px solid var(--line); background: var(--raised); color: var(--ink); border-radius: 8px; padding: .6em .75em; font-size: 1rem; }
.field textarea { resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.hint { font-size: .85rem; color: var(--ink-3); }
.error-text { color: var(--danger); font-size: .9rem; min-height: 1.2em; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }

/* Auth */
#view-auth { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.auth-card { width: min(420px, 100%); }
.wordmark { font-family: var(--serif); font-size: 3rem; font-weight: 400; letter-spacing: -.02em; margin: 0 0 .2rem; }
.auth-card p.lede { font-family: var(--serif); color: var(--ink-2); font-size: 1.1rem; margin: 0 0 2rem; }
.auth-card form { display: grid; gap: 1rem; }

/* Library */
#view-library { max-width: 1120px; margin: 0 auto; padding: 28px 20px 80px; }
.lib-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 2.5rem; }
.lib-head .wordmark { font-size: 2.2rem; }
.shelf { display: grid; gap: 0; border-top: 1px solid var(--line); }
.book { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; padding: 1.25rem .25rem; border-bottom: 1px solid var(--line);
  text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; color: inherit; }
.book:hover .book-title { color: var(--accent); }
.book-title { font-family: var(--serif); font-size: 1.5rem; line-height: 1.25; margin: 0; }
.book-premise { grid-column: 1; color: var(--ink-2); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.book-meta { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--ink-3); font-size: .85rem; text-align: right; white-space: nowrap; }
.empty-shelf { padding: 3rem 0; font-family: var(--serif); }
.sample-offer { display: grid; gap: .7rem; background: var(--accent-soft); border-radius: 12px; padding: .8rem .9rem; font-family: var(--sans); }
.sample-row { display: flex; align-items: center; gap: .8rem; justify-content: space-between; flex-wrap: wrap; }
.sample-row > div { display: grid; gap: .15rem; flex: 1 1 14em; }
.sample-row b { font-weight: 600; }
.sample-offer .hint { margin: 0; }
.or-line { display: flex; align-items: center; gap: .6rem; margin: .2rem 0; color: var(--ink-3); font-size: .85rem; }
.or-line::before, .or-line::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.sample-tag { font-family: var(--sans); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent-soft); border-radius: 999px; padding: .1em .55em; vertical-align: middle; }
.empty-shelf h2 { font-weight: 400; font-size: 1.8rem; margin: 0 0 .5rem; }
.empty-shelf p { color: var(--ink-2); max-width: 32em; margin: 0 0 1.5rem; }

/* Settings and Admin */
.page-view { max-width: 760px; margin: 0 auto; padding: 28px 20px 80px; }
.settings-stack { display: grid; gap: 16px; }
.settings-stack h2 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; margin: 0; }
.people li { gap: .8rem; flex-wrap: wrap; padding: .7rem 0; }
.people .who { flex: 1; min-width: 12rem; }
.people .who b { font-weight: 700; }
.people .acts { display: flex; gap: .3rem; flex-wrap: wrap; }
.people .acts .btn { font-size: .82rem; padding: .35em .75em; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.stat-grid div { background: var(--bg); border-radius: 8px; padding: .6rem .8rem; }
.stat-grid b { display: block; font-family: var(--serif); font-size: 1.2rem; font-weight: 400; }
.econ { width: 100%; border-collapse: collapse; margin-top: .4rem; font-variant-numeric: tabular-nums; }
.econ th, .econ td { text-align: right; padding: .2rem .4rem; border-bottom: 1px solid var(--line, rgba(128,128,128,.25)); }
.econ th:first-child, .econ td:first-child { text-align: left; }
.econ th { font-weight: 600; }
.stat-grid span { font-size: .8rem; color: var(--ink-3); }
.menu-item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .55em .8em; border-radius: 8px; color: var(--ink); }
.menu-item:hover { background: var(--accent-soft); }
.menu-item.danger { color: var(--danger); }
.book-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.book-row .book { border-bottom: 0; flex: 1; }
.book-more { border: 0; background: none; color: var(--ink-3); width: 44px; border-radius: 8px; font-size: 1.3rem; }
.book-more:hover { color: var(--ink); background: var(--accent-soft); }
.book-branch { grid-column: 1; font-size: .82rem; color: var(--accent); margin: 0; }

/* Reader */
/* clip: the tucked dock slides out with a transform, and a transform still adds scrollable overflow. Without
   this the page grew by the dock's height while it was hidden (empty space below the story), and when the dock
   came back at the end that space vanished under the reader, dragging the page up. clip, unlike hidden, isn't
   a scroll container, so the dock stays sticky. */
#view-reader { min-height: 100dvh; overflow: clip; }
.bar { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; gap: .25rem; padding: 6px 8px;
  padding-top: max(6px, env(safe-area-inset-top)); background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px); transition: transform .25s ease; }
.bar.tucked { transform: translateY(-100%); }
.bar-title { flex: 1; min-width: 0; text-align: center; font-family: var(--serif); font-size: 1rem; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 0; background: none; padding: .4em; border-radius: 8px; }
.bar-title:hover { color: var(--ink); background: var(--accent-soft); }
.page { max-width: calc(var(--measure) + 40px); margin: 0 auto; padding: 84px 20px 40px; font-family: var(--serif); font-size: var(--fs); }
.page-head { margin: 2rem 0 3rem; text-align: center; }
.page-head h1 { font-weight: 400; font-size: 2em; line-height: 1.2; margin: 0 0 .6em; letter-spacing: -.01em; }
.page-head p { color: var(--ink-2); font-style: italic; margin: 0 auto; max-width: 28em; }
.opening-hint { text-align: center; color: var(--ink-3); font-family: var(--sans); font-size: .95rem; margin: 2rem 0; }
.passage { position: relative; border-radius: 6px; margin: 0 -10px; padding: 0 10px; transition: background .15s; }
.passage + .passage { margin-top: 1.1em; }
.passage.selected { background: var(--accent-soft); }
.prose p { margin: 0; line-height: var(--lh, 1.72); hyphens: auto; text-align: var(--align, left); }
.prose p + p { text-indent: var(--para-indent, 1.4em); margin-top: var(--para-gap, 0); }
.passage .beat { font-family: var(--sans); font-size: .82rem; line-height: 1.4; color: var(--ink-3); border-left: 2px solid var(--accent-soft);
  padding: .1em 0 .1em .7em; margin: 0 0 .7em; }
.passage .beat b { font-weight: 400; color: var(--ink-2); }
.hide-beats .passage .beat { display: none; }
.passage.cont { margin-top: 0 !important; }
.passage.cont .prose p:first-child { text-indent: var(--para-indent, 1.4em); margin-top: var(--para-gap, 0); }
.chip.go { color: var(--accent); border-color: var(--accent); }
.chip.go svg.i { width: 15px; height: 15px; vertical-align: -3px; margin-left: 2px; }
.streaming .prose p:last-child::after { content: ""; display: inline-block; width: .5em; height: 1em; margin-left: .1em; vertical-align: -.12em;
  background: var(--accent); opacity: .55; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.passage-tools { display: flex; flex-wrap: wrap; gap: .4rem; padding: .6rem 0 .8rem; font-family: var(--sans); }
.passage-tools .btn { font-size: .85rem; padding: .4em .85em; }
.passage-cost { flex-basis: 100%; font-size: .8rem; }
.passage textarea.edit { width: 100%; min-height: 12em; font-family: var(--serif); font-size: 1em; line-height: 1.6; padding: .6em;
  border: 1px solid var(--line); border-radius: 8px; background: var(--raised); color: var(--ink); }
.load-earlier { display: block; margin: 0 auto 2rem; font-family: var(--sans); }
.page-end { height: 24px; }
/* The newest passage is always tall enough to sit at the top of the screen, so a new
   passage can open where you start reading it and grow downward without moving. */
.passage.latest { min-height: calc(100dvh - var(--dock-h, 150px) - 48px); }
.edited { font-family: var(--sans); font-size: .75rem; color: var(--ink-3); }

/* The thread: a line down the margin with a knot wherever you chose what happened. */
#passages { position: relative; }
#passages:not(:empty)::before { content: ""; position: absolute; left: var(--thread-x); top: .6em; bottom: 0; width: 1.5px;
  background: var(--thread); opacity: .35; }
.knot { position: absolute; left: calc(var(--thread-x) + 10px - 6px); top: .55em; width: 13px; height: 13px; padding: 0;
  border-radius: 50%; border: 2px solid var(--knot, var(--thread)); background: var(--knot, var(--thread)); cursor: pointer; z-index: 2; }
.knot.own { background: var(--bg); }
.knot.chapter { border-radius: 2px; transform: rotate(45deg) scale(1.1); }
.knot:hover, .knot[aria-expanded="true"] { box-shadow: 0 0 0 4px color-mix(in srgb, var(--knot, var(--thread)) 22%, transparent); }
.streaming .knot { animation: pulse 1.2s ease-in-out infinite; }
.knot-card { position: absolute; left: calc(var(--thread-x) + 4px); top: 2.1em; z-index: 5; width: min(340px, 82vw);
  background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
  font-family: var(--sans); font-size: .88rem; line-height: 1.45; box-shadow: 0 12px 30px -14px rgba(0,0,0,.4); }
.knot-card .when { color: var(--ink-3); font-size: .78rem; display: block; margin-top: 4px; }
.knot-card .n { color: var(--note); display: block; margin-top: 4px; }
.chapter-title { font-family: var(--serif); font-weight: 400; text-align: center; font-size: 1.05em; letter-spacing: .14em;
  font-variant: small-caps; color: var(--accent); margin: 1.6em 0 1.4em; display: flex; align-items: center; gap: .8em; }
.chapter-title::before, .chapter-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.chapter-start .prose p:first-child::first-letter { float: left; font-size: 3.3em; line-height: .82; padding: .06em .08em 0 0; color: var(--accent); }
.chapter-start .prose p:first-child { text-indent: 0 !important; }
.takes-nav { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 1px; font-size: .85rem; }
.takes-nav button { border: 0; background: none; color: var(--ink-2); width: 30px; height: 28px; border-radius: 999px; }
.takes-nav button:hover:not(:disabled) { background: var(--accent-soft); color: var(--ink); }
.takes-nav button:disabled { opacity: .35; cursor: default; }
.takes-nav span { padding: 0 4px; color: var(--ink-2); white-space: nowrap; }
.passage.working { opacity: .55; pointer-events: none; }
.passage.reading { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.sel-bar { position: fixed; z-index: 35; display: flex; gap: 2px; padding: 3px; background: var(--ink); border-radius: 999px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.45); font-family: var(--sans); }
.sel-bar button { border: 0; background: none; color: var(--bg); padding: .45em .8em; border-radius: 999px; font-size: .85rem; white-space: nowrap; }
.sel-bar button:hover { background: color-mix(in srgb, var(--bg) 18%, transparent); }
.recap { background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.recap p { margin: 0 0 6px; font-family: var(--serif); font-size: .98rem; line-height: 1.5; }
.recap b { font-family: var(--sans); font-size: .8rem; font-weight: 400; color: var(--ink-3); display: block; margin-bottom: 2px; }
.read-ctl { border: 0; background: none; color: var(--accent); font-size: .8rem; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.contents { list-style: none; margin: 0; padding: 0; display: grid; }
.contents button { width: 100%; text-align: left; border: 0; background: none; padding: .5em .4em; border-radius: 8px; font-family: var(--serif); font-size: 1rem; color: var(--ink); }
.contents button:hover { background: var(--accent-soft); }
.contents .hint { font-family: var(--sans); }
.export-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.export-grid a { justify-content: center; text-decoration: none; }

/* Composer dock */
.dock { position: sticky; bottom: 0; z-index: 15; padding: 0 12px max(12px, env(safe-area-inset-bottom)); transition: transform .25s ease; }
/* While you read, the dock slides away; a small tab brings it back. Transform keeps its
   space in the layout, so nothing on the page moves when it hides or returns. */
.dock.tucked { transform: translateY(calc(100% + 16px)); transition: transform .16s ease-in; }
.drawer.instant { transition: none; }
.dock-tab { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 16;
  display: inline-flex; align-items: center; gap: .5em; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  border-radius: 999px; padding: .5em 1.1em; font-size: .9rem; white-space: nowrap; box-shadow: 0 8px 24px -12px rgba(0,0,0,.4); }
.dock-tab svg.i { width: 16px; height: 16px; }
.dock-inner { max-width: calc(var(--measure) + 120px); margin: 0 auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 10px; box-shadow: 0 -8px 30px -18px rgba(0,0,0,.35); }
.ideas { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: 2px 2px 8px; }
.chip-lead { font-size: .8rem; color: var(--ink-3); margin-right: .1rem; }
.chip { flex: none; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--line); background: var(--raised); border-radius: 999px; padding: .35em .85em; font-size: .88rem; color: var(--ink-2); }
.chip:hover { color: var(--ink); border-color: var(--ink-3); }
.chip.active { background: var(--accent-soft); color: var(--ink); border-color: var(--accent); }
.chip.note { color: var(--note); border-color: color-mix(in srgb, var(--note) 35%, transparent); background: transparent; }
.chip.note.active { background: var(--note-soft); border-color: var(--note); color: var(--ink); }
.chip.muted { color: var(--ink-3); border-style: dashed; display: inline-grid; place-items: center; }
.chip.muted svg.i { width: 16px; height: 16px; }
.note-ideas { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.note-toggle { position: relative; }
#backstage-btn { position: relative; }
#backstage-btn.has-error::after { content: ""; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.note-toggle.has-ideas::after { content: ""; position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--note); }
.note-panel { background: var(--note-soft); border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; display: grid; gap: 6px; }
.note-panel textarea { width: 100%; border: 0; background: transparent; resize: none; color: var(--ink); font-size: .95rem; line-height: 1.45; min-height: 2.6em; }
.note-panel textarea:focus { outline: none; }
.note-panel .row { font-size: .85rem; color: var(--ink-2); }
.note-panel select { border: 1px solid var(--line); background: var(--raised); border-radius: 6px; padding: .15em .3em; font-size: .85rem; }
.compose { display: flex; align-items: flex-end; gap: 6px; }
.compose textarea { flex: 1; min-width: 0; border: 0; background: transparent; resize: none; color: var(--ink); font-size: 1rem;
  line-height: 1.45; padding: 9px 4px; max-height: 40vh; min-height: 42px; }
.compose textarea:focus { outline: none; }
.compose.self textarea { font-family: var(--serif); }
.send { width: 42px; height: 42px; border-radius: 999px; border: 0; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
.send:disabled { opacity: .45; cursor: default; }
.send.stop { background: var(--ink-2); }
.note-toggle.has-note { color: var(--note); }
.dock-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: 2px 4px 0; font-size: .8rem; color: var(--ink-3); }
.mode-switch { border: 0; background: none; color: var(--ink-2); padding: 2px 0; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; font-size: .8rem; }
.status-line { padding: 0 4px 6px; font-size: .85rem; color: var(--ink-2); display: flex; gap: .5rem; align-items: center; }
.status-line.error { color: var(--danger); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }

/* Popover and drawer */
.popover.left { left: 50%; right: auto; transform: translateX(-50%); }
.popover { position: fixed; top: 54px; right: 12px; z-index: 30; width: min(340px, calc(100vw - 24px)); max-height: calc(100dvh - 70px); overflow-y: auto; background: var(--raised);
  border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: 0 12px 40px -12px rgba(0,0,0,.35); display: grid; gap: 14px; }
.popover h2 { font-size: .8rem; color: var(--ink-3); font-weight: 400; margin: 0 0 6px; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; gap: 2px; }
.seg button { flex: 1; border: 0; background: none; border-radius: 999px; padding: .35em .5em; font-size: .88rem; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink); }
/* Theme tiles: each one a tiny page in its own colours. */
.theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 6px; }
.theme-grid.wide { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
.theme-tile { border: 0; background: none; padding: 0; display: grid; gap: 4px; justify-items: center; color: var(--ink-2); font-size: .75rem; }
.tile-page { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; border: 1px solid var(--line); overflow: hidden; }
.tile-aa { position: absolute; left: 8px; top: 4px; font-family: var(--serif); font-size: 1.15rem; line-height: 1.3; }
.tile-rule { position: absolute; left: 8px; bottom: 9px; width: 45%; height: 3px; border-radius: 2px; }
.tile-dot { position: absolute; right: 8px; bottom: 7px; width: 7px; height: 7px; border-radius: 50%; }
.tile-page.split { display: flex; }
.tile-page.split span { flex: 1; }
.theme-tile.on .tile-page { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-tile.on { color: var(--ink); }
.tile-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.popover .field select, .popover select { width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: .4em .5em; }
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; }
.color-field { display: flex; gap: .5rem; align-items: center; font-size: .9rem; color: var(--ink-2); }
.color-field input { width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: none; cursor: pointer; }
.color-field code { font-size: .78rem; color: var(--ink-3); }
.custom-preview { border-radius: 10px; padding: 14px 16px; border: 1px solid var(--line); font-size: 1.05rem; line-height: 1.6; }
.font-sample { margin: 0; font-size: 1.15rem; line-height: 1.6; padding: .4rem 0; }
.my-font { display: grid; gap: .4rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.my-font-sample { font-size: 1.15rem; }
.my-font .btn { font-size: .8rem; padding: .3em .7em; }
h3.sub { font-size: .85rem; font-weight: 400; color: var(--ink-3); margin: 0 0 6px; }
.scrim { position: fixed; inset: 0; z-index: 39; background: rgba(10, 12, 14, .35); }
.drawer { position: fixed; inset: 0 0 0 auto; z-index: 40; width: min(460px, 100vw); background: var(--surface); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease; visibility: hidden; }
.drawer.open { transform: none; visibility: visible; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 0 18px; padding-top: max(12px, env(safe-area-inset-top)); }
.drawer-head h2 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; margin: 0; }
.tabs { display: flex; gap: 2px; padding: 8px 12px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button { flex: none; border: 0; background: none; padding: .55em .55em; color: var(--ink-2); border-bottom: 2px solid transparent; white-space: nowrap; font-size: .92rem; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px; display: grid; gap: 16px; align-content: start; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.card { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.lore-item summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: .5rem; }
.lore-item summary::-webkit-details-marker { display: none; }
.lore-item .t { font-weight: 700; flex: 1; }
.lore-item.off .t { color: var(--ink-3); text-decoration: line-through; }
.tag { font-size: .75rem; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: .05em .55em; white-space: nowrap; }
.tag.new { color: var(--note); border-color: var(--note); }
.lore-body { margin-top: .6rem; display: grid; gap: .6rem; font-size: .92rem; }
.lore-body p { margin: 0; }
.keys { color: var(--ink-3); font-size: .85rem; }
.lore-form { display: grid; gap: .7rem; }
.lore-form .two { display: grid; grid-template-columns: 1fr 110px; gap: .6rem; }
.thread { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .3rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.thread .btn { font-size: .8rem; padding: .3em .6em; }
.thread .row { flex-wrap: nowrap; }
.flag { font-family: var(--sans); font-size: .85rem; line-height: 1.45; border-left: 2px solid var(--note); background: var(--note-soft);
  padding: .5rem .7rem; margin: .6rem 0 0; border-radius: 0; display: grid; gap: .4rem; }
.flag .row .btn { font-size: .8rem; padding: .3em .7em; }
.prose mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 2px; padding: 0 .05em; }
.quote { font-family: var(--serif); font-size: 1rem; line-height: 1.55; border-left: 2px solid var(--accent); padding-left: .8rem; margin: 0; }
.mem-section h3 { font-size: .85rem; font-weight: 400; color: var(--ink-3); margin: 0 0 .5rem; }
.mem-item { font-family: var(--serif); font-size: .98rem; line-height: 1.55; }
.mem-item + .mem-item { margin-top: .8rem; }
.mem-item b { font-family: var(--sans); font-size: .85rem; display: block; color: var(--ink-2); font-weight: 700; }
.gauge { display: grid; gap: 4px; font-size: .88rem; }
.gauge .bar-track { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; }
.gauge .bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.gauge .bar-fill.over { background: var(--danger); }
.trace { display: grid; gap: .4rem; font-size: .88rem; }
.trace div { display: flex; justify-content: space-between; gap: .5rem; }
.trace .why { color: var(--ink-3); }
pre.prompt { white-space: pre-wrap; font-family: var(--mono); font-size: .78rem; line-height: 1.5; color: var(--ink-2); max-height: 50vh; overflow: auto;
  background: var(--bg); border-radius: 8px; padding: 10px; margin: .6rem 0 0; }
.settings-form { display: grid; gap: 1rem; }
.settings-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
details.more > summary { cursor: pointer; color: var(--ink-2); font-size: .92rem; }

/* Story bible */
.subnav { display: flex; flex-wrap: wrap; gap: .35rem; }
.subnav button { border: 1px solid var(--line); background: none; border-radius: 999px; padding: .3em .8em; font-size: .85rem; color: var(--ink-2); }
.subnav button[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink); border-color: var(--accent); }
.avatar-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--knot, var(--thread)); flex: none; }
.rel { display: flex; gap: .4rem; font-size: .88rem; }
.rel b { font-weight: 700; white-space: nowrap; }
.wants { font-size: .92rem; }
.wants b, .lore-body .lbl { font-size: .78rem; color: var(--ink-3); font-weight: 400; display: block; }
.secret { display: grid; gap: .3rem; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.secret:last-child { border-bottom: 0; }
.nudge-card { border-left: 3px solid var(--accent); }
.pov-pill { border: 1px solid var(--line); background: var(--raised); color: var(--ink-2); border-radius: 999px; padding: .15em .7em; font-size: .8rem;
  display: inline-flex; align-items: center; gap: .4em; }
.pov-pill:hover { color: var(--ink); border-color: var(--ink-3); }
.chip.close-ch.nudged { color: var(--accent); border-color: var(--accent); }
.chip.close-ch.nudged::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: .45em; vertical-align: 2px; }
.nudge-line { font-size: .85rem; color: var(--ink-2); padding: 0 4px 6px; }
.told-by { display: block; text-align: center; font-family: var(--sans); font-size: .8rem; color: var(--ink-3); margin: -1em 0 1.4em; letter-spacing: 0; font-variant: normal; }
.pending-chapter { opacity: .7; }
.cast-card { display: grid; gap: .5rem; }
.cast-card h3 { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; margin: 0; }
.model-row { display: grid; gap: .3rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.model-row:last-child { border-bottom: 0; }
.model-row .acts { display: flex; gap: .3rem; flex-wrap: wrap; }
.model-row .acts .btn, .spend-row .btn { font-size: .8rem; padding: .3em .7em; }
.ok-text { color: var(--ok); }
.spend-row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .35rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; flex-wrap: wrap; }
.spend-row:last-child { border-bottom: 0; }
.money { font-variant-numeric: tabular-nums; }
.price-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }

/* Pictures */
.scene-pic { margin: 1.1em 0 .4em; padding: 0; }
/* Pictures reserve their space before they load (the passage says the shown picture's shape), so a
   lazy image above the viewport can't push the text you're reading. Tall ones are letterboxed. */
.scene-pic img { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain; border-radius: 8px; cursor: zoom-in; background: var(--surface); }
.painting { margin: 1.1em 0 .4em; aspect-ratio: 16 / 9; border-radius: 8px; display: grid; place-items: center; font-family: var(--sans);
  font-size: .9rem; color: var(--ink-2); background: linear-gradient(110deg, var(--surface) 30%, var(--raised) 50%, var(--surface) 70%);
  background-size: 300% 100%; animation: shimmer 1.6s linear infinite; border: 1px solid var(--line); }
@keyframes shimmer { to { background-position: -150% 0; } }
.thumb { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; align-self: center; }
.thumb.square { border-radius: 6px; }
.portrait { width: min(220px, 60%); height: auto; max-height: 420px; object-fit: contain; border-radius: 10px; display: block; cursor: zoom-in; background: var(--surface); }
.portrait.wide { width: 100%; }
.pov-pill img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; margin-left: -.35em; }
#picture-dialog { width: auto; max-width: calc(100vw - 24px); background: var(--bg); padding: 0; }
#picture-dialog img { display: block; max-width: calc(100vw - 24px); max-height: calc(100dvh - 90px); }
#picture-dialog .row { padding: 8px 12px; }

/* Dialogs */
dialog { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); }
dialog::backdrop { background: rgba(10, 12, 14, .45); }
.dialog-body { padding: 22px; display: grid; gap: 1rem; }
.dialog-body h2 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; margin: 0; }
.dialog-body > p { margin: 0; color: var(--ink-2); }
.people li { display: flex; justify-content: space-between; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.people { list-style: none; margin: 0; padding: 0; }

/* Toasts */
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 150px; z-index: 60; display: grid; gap: 8px; width: min(440px, calc(100vw - 24px)); pointer-events: none; }
.toast { background: var(--ink); color: var(--bg); padding: .7em 1em; border-radius: 12px; font-size: .92rem; pointer-events: auto; display: flex; gap: .8rem; justify-content: space-between; align-items: center; }
.toast.error { background: var(--danger); color: #fff; }
.toast button { background: none; border: 0; color: inherit; text-decoration: underline; padding: 0; }

@media (max-width: 640px) {
  :root { --fs: 18px; }
  :root { --thread-x: -15px; }
  .page { padding-left: 30px; padding-right: 16px; }
  .book { grid-template-columns: 1fr; }
  .book-meta { grid-column: 1; grid-row: auto; text-align: left; }
  .dock { padding-left: 6px; padding-right: 6px; }
  .ideas .chip-lead { display: none; }
  .settings-form .two, .page-view .two { grid-template-columns: 1fr; }
  /* While typing on a phone, give the keyboard's leftover space to your words. */
  .dock.typing .ideas, .dock.typing .dock-foot, .dock.typing .recap { display: none; }
  .chip { padding: .35em .75em; }
  .toasts { bottom: 170px; }
}
@media (hover: none) { #dock-hint:not(.status-line) { display: none; } }
#dock-hint.status-line { padding: 0; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- desktop layout: panels
   Docks of panels beside the story (see the layout section of app.js). --left-w / --right-w are
   the docks' widths; the story, its bar and the writing box share what's left, centred in it. */
body { --left-w: 0px; --right-w: 0px; --top-h: 0px; --bottom-h: 0px; }
body[data-layout="panels"] #view-reader { padding: var(--top-h) var(--right-w) var(--bottom-h) var(--left-w); }
body[data-layout="panels"] .bar { left: var(--left-w); right: var(--right-w); top: var(--top-h); }
body[data-layout="panels"] .bar.tucked { transform: translateY(calc(-100% - var(--top-h))); }
body[data-layout="panels"] .dock { bottom: var(--bottom-h); }
body[data-layout="panels"] .dock-tab { left: calc(var(--left-w) + (100vw - var(--left-w) - var(--right-w)) / 2); bottom: calc(var(--bottom-h) + 14px); }
body[data-layout="panels"] .popover { top: calc(var(--top-h) + 54px); max-height: calc(100dvh - var(--top-h) - var(--bottom-h) - 70px); }
body[data-layout="panels"] .popover:not(.left) { right: calc(var(--right-w) + 12px); }
body[data-layout="panels"] .popover.left { left: calc(var(--left-w) + (100vw - var(--left-w) - var(--right-w)) / 2); }
body[data-layout="panels"] .toasts { bottom: calc(var(--bottom-h) + 150px); left: calc(var(--left-w) + (100vw - var(--left-w) - var(--right-w)) / 2); }

.dock-side { position: fixed; top: 0; bottom: 0; z-index: 22; display: flex; flex-direction: column; background: var(--surface); }
.dock-side.at-left { left: 0; top: var(--top-h); bottom: var(--bottom-h); width: var(--left-w); border-right: 1px solid var(--line); }
.dock-side.at-right { right: 0; top: var(--top-h); bottom: var(--bottom-h); width: var(--right-w); border-left: 1px solid var(--line); }
.dock-side.at-top, .dock-side.at-bottom { left: 0; right: 0; flex-direction: row; }
.dock-side.at-top { top: 0; bottom: auto; height: var(--top-h); border-bottom: 1px solid var(--line); }
.dock-side.at-bottom { bottom: 0; top: auto; height: var(--bottom-h); border-top: 1px solid var(--line); }
.dock-side.at-top .pane, .dock-side.at-bottom .pane { min-height: 0; min-width: 220px; }
.dock-side.at-top .pane + .pane-split + .pane, .dock-side.at-bottom .pane + .pane-split + .pane { border-left: 1px solid var(--line); }
.pane { display: flex; flex-direction: column; min-height: 120px; position: relative; }
.pane-head { display: flex; align-items: center; gap: 2px; padding: 6px 6px 0 4px; border-bottom: 1px solid var(--line); }
.pane:first-child .pane-head { padding-top: max(6px, env(safe-area-inset-top)); }
.pane-tabs { display: flex; gap: 0; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pane-tabs button { border: 0; background: none; padding: .5em .45em; color: var(--ink-2); border-bottom: 2px solid transparent; white-space: nowrap; font-size: .88rem; }
.pane-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.pane-tabs button.elsewhere { color: var(--ink-3); }
.pane-grip { border: 0; background: none; color: var(--ink-3); cursor: grab; padding: .3em .35em; border-radius: 6px; font-size: 1rem; line-height: 1; }
.pane-grip:hover, .pane-grip:focus-visible { color: var(--ink); background: var(--accent-soft); }
.pane-grip:active { cursor: grabbing; }
.pane-menu-btn { width: 32px; height: 32px; font-size: 1.1rem; }
.pane-body { flex: 1; min-height: 0; overflow-y: auto; }
.pane-menu { position: fixed; z-index: 60; background: var(--raised); border: 1px solid var(--line); border-radius: 10px; padding: 4px;
  box-shadow: 0 12px 32px -12px rgba(0,0,0,.45); min-width: 200px; display: grid; }

/* Resizing: the dock's inner edge, and the line between stacked panels. */
.dock-edge { position: absolute; top: 0; bottom: 0; width: 9px; cursor: col-resize; z-index: 2; touch-action: none; }
.dock-side.at-left .dock-edge { right: -5px; }
.dock-side.at-right .dock-edge { left: -5px; }
.dock-side.at-top .dock-edge, .dock-side.at-bottom .dock-edge { top: auto; bottom: auto; left: 0; right: 0; width: auto; height: 9px; cursor: row-resize; }
.dock-side.at-top .dock-edge { bottom: -5px; }
.dock-side.at-bottom .dock-edge { top: -5px; }
.dock-edge:hover, .dock-edge:focus-visible, .resizing .dock-edge { background: linear-gradient(to right, transparent 3px, var(--accent) 3px 5px, transparent 5px); outline: none; }
.at-top .dock-edge:hover, .at-top .dock-edge:focus-visible, .at-bottom .dock-edge:hover, .at-bottom .dock-edge:focus-visible,
.resizing .at-top .dock-edge, .resizing .at-bottom .dock-edge { background: linear-gradient(to bottom, transparent 3px, var(--accent) 3px 5px, transparent 5px); }
.pane-split { flex: none; height: 7px; margin: -3px 0; position: relative; z-index: 2; cursor: row-resize; touch-action: none;
  background: linear-gradient(to bottom, transparent 3px, var(--line) 3px 4px, transparent 4px); }
.pane-split:hover, .pane-split:focus-visible { background: linear-gradient(to bottom, transparent 2px, var(--accent) 2px 5px, transparent 5px); outline: none; }
.at-top .pane-split, .at-bottom .pane-split { height: auto; width: 7px; margin: 0 -3px; cursor: col-resize;
  background: linear-gradient(to right, transparent 3px, var(--line) 3px 4px, transparent 4px); }
.at-top .pane-split:hover, .at-top .pane-split:focus-visible, .at-bottom .pane-split:hover, .at-bottom .pane-split:focus-visible {
  background: linear-gradient(to right, transparent 2px, var(--accent) 2px 5px, transparent 5px); }
body.resizing, body.resizing * { user-select: none; cursor: inherit; }
body.resizing .pane-body { pointer-events: none; }

/* Moving: where a dragged panel would land. */
.pane.drop-before::before, .pane.drop-after::after { content: ""; position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 2px; background: var(--accent); z-index: 3; }
.pane.drop-before::before { top: 0; }
.pane.drop-after::after { bottom: 0; }
.at-top .pane.drop-before::before, .at-top .pane.drop-after::after, .at-bottom .pane.drop-before::before, .at-bottom .pane.drop-after::after {
  top: 6px; bottom: 6px; left: auto; right: auto; width: 3px; height: auto; }
.at-top .pane.drop-before::before, .at-bottom .pane.drop-before::before { left: 0; }
.at-top .pane.drop-after::after, .at-bottom .pane.drop-after::after { right: 0; }
.edge-drop { display: none; position: fixed; top: 0; bottom: 0; width: 120px; z-index: 50; align-items: center; justify-content: center; padding: 0 12px;
  text-align: center; font-size: .85rem; color: var(--ink-2); background: color-mix(in srgb, var(--accent-soft) 70%, transparent); border: 2px dashed var(--accent); }
.edge-drop[data-side="left"] { left: 0; }
.edge-drop[data-side="right"] { right: 0; }
.edge-drop[data-side="top"], .edge-drop[data-side="bottom"] { left: 0; right: 0; width: auto; height: 96px; }
.edge-drop[data-side="top"] { top: 0; bottom: auto; }
.edge-drop[data-side="bottom"] { bottom: 0; top: auto; }
body.dragging-pane .edge-drop.available { display: flex; }
.edge-drop.over { background: var(--accent-soft); color: var(--ink); }
.edge-drop span { pointer-events: none; }
.preset-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: 8px; }
.preset-row .btn { padding: .25em .6em; font-size: .85rem; }


/* ---------------------------------------------------------------- 2.10: the library */
.lib-head .row .btn.quiet { padding-left: .8em; padding-right: .8em; }
.continue-card { display: grid; grid-template-columns: minmax(180px, 300px) 1fr; gap: 1.6rem; align-items: center;
  background: var(--raised); border: 1px solid var(--line); border-radius: 18px; padding: 18px; margin-bottom: 2rem; }
.continue-cover { border: 0; padding: 0; background: none; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; display: block; width: 100%; }
.continue-cover .cover-img, .continue-cover .cover-card { width: 100%; height: 100%; }
.continue-body { display: grid; gap: .55rem; min-width: 0; }
.eyebrow { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.continue-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.15; margin: 0; }
.continue-title button { all: unset; cursor: pointer; }
.continue-title button:hover { color: var(--accent); }
.continue-title button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.continue-lines { font-family: var(--serif); font-style: italic; color: var(--ink-2); margin: 0; font-size: 1.05rem; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.continue-body .book-more { height: 40px; }

.shelf-bar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.shelf-search { flex: 1 1 14rem; width: auto; border-radius: 999px; padding-left: 1em; }
.shelf-sort { width: auto; flex: none; border-radius: 999px; }
.view-seg button { display: inline-grid; place-items: center; padding: .3em .6em; }
.view-seg svg.i { width: 18px; height: 18px; }

/* Covers: a picture from the story, or a title card coloured from the title. */
.cover-img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--surface); }
.cover-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; width: 100%; height: 100%;
  padding: 14% 12%; text-align: center; color: #F4EFE4;
  background: radial-gradient(120% 90% at 30% 15%, hsl(var(--hue) 32% 40%), hsl(calc(var(--hue) + 35) 30% 20%) 70%); }
.cover-title { font-family: var(--serif); font-size: 1.05rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.continue-cover .cover-title { font-size: 1.5rem; }
.cover-rule { width: 28px; border-top: 1px solid currentColor; opacity: .55; }

.shelf.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 1.6rem 1.1rem; border-top: 0; }
.story-card { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: .45rem .2rem; min-width: 0; }
.story-cover { grid-column: 1 / -1; position: relative; border: 0; padding: 0; background: none; aspect-ratio: 3 / 4; border-radius: 10px;
  overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 6px 18px -10px rgba(0,0,0,.35); transition: transform .15s ease, box-shadow .15s ease; }
.story-cover:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 12px 26px -12px rgba(0,0,0,.45); }
.cover-tag { position: absolute; left: 8px; top: 8px; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  background: rgba(20, 20, 24, .62); color: #fff; border-radius: 999px; padding: .2em .6em; }
.story-info { display: grid; gap: .1rem; min-width: 0; }
.story-title { all: unset; cursor: pointer; font-family: var(--serif); font-size: 1.05rem; line-height: 1.3; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.story-title:hover { color: var(--accent); }
.story-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.story-meta, .story-branch { font-size: .8rem; color: var(--ink-3); }
.story-branch { color: var(--accent); }
.story-acts { display: flex; align-items: flex-start; gap: 0; }
.story-acts .book-more { width: 34px; height: 34px; font-size: 1.15rem; }
.story-card.is-branch .story-cover { box-shadow: 0 0 0 2px var(--accent-soft); }
.branch-chip { display: inline-flex; align-items: center; gap: .15rem; border: 1px solid var(--line); background: var(--raised); color: var(--ink-2);
  border-radius: 999px; padding: .1em .5em; font-size: .8rem; height: 28px; margin-top: 3px; }
.branch-chip svg.i { width: 15px; height: 15px; }
.branch-chip[aria-expanded="true"] { background: var(--accent-soft); color: var(--ink); border-color: var(--accent); }

.shelf.list { display: grid; border-top: 1px solid var(--line); }
.story-row { display: flex; align-items: center; gap: .2rem; border-bottom: 1px solid var(--line); padding-left: calc(var(--depth, 0) * 28px); }
.row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: .9rem; border: 0; background: none; padding: .7rem .3rem; text-align: left; color: inherit; }
.row-main:hover .row-title { color: var(--accent); }
.row-thumb { flex: none; width: 44px; height: 58px; border-radius: 6px; overflow: hidden; display: block; }
.row-thumb .cover-card { padding: 4px; gap: 0; }
.row-thumb .cover-title, .row-thumb .cover-rule { display: none; }
.row-text { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.row-title { font-family: var(--serif); font-size: 1.12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-premise { font-size: .86rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-row.is-branch .row-premise { color: var(--accent); }
.row-stats { flex: none; font-size: .8rem; color: var(--ink-3); text-align: right; white-space: nowrap; }
.story-row .branch-chip { margin: 0; }

/* ---------------------------------------------------------------- 2.10: pictures */
.wide-view { max-width: 1120px; }
.pic-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }
.pic-head .subnav { flex: 1 1 auto; }
.pic-story { width: auto; max-width: 16rem; border-radius: 999px; }
.pic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .7rem; margin-top: .8rem; }
.pic-tile { position: relative; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 0; overflow: hidden;
  display: grid; grid-template-rows: auto auto; text-align: left; color: inherit; }
.pic-tile img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface); }
.pic-tile .cap { font-size: .78rem; padding: .3rem .45rem .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.pic-tile .cap .sub { display: block; color: var(--ink-3); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; }
.pic-tile:hover { border-color: var(--ink-3); }
.pic-tile[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: -1px; }
.pic-tile.auto { display: grid; place-items: center; aspect-ratio: 1; padding: .6rem; text-align: center; font-size: .85rem; color: var(--ink-2); border-style: dashed; }
.pic-badge { position: absolute; top: 6px; left: 6px; font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: rgba(20, 20, 24, .62); color: #fff; border-radius: 999px; padding: .15em .55em; }
.pic-badge.dot { width: 10px; height: 10px; padding: 0; background: var(--accent); border: 2px solid var(--raised); }
.pic-grid.picker { max-height: 55dvh; overflow: auto; margin: 0; padding: 2px; }
.pic-detail { display: grid; gap: .8rem; }
.pic-big { display: block; max-width: 100%; max-height: 60vh; width: auto; border-radius: 10px; cursor: zoom-in; background: var(--surface); justify-self: start; }

.flip { display: grid; gap: .3rem; justify-items: start; }
.flip-bar { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; font-family: var(--sans); font-size: .82rem; color: var(--ink-3); }
.flip-btn { border: 1px solid var(--line); background: var(--raised); color: var(--ink); border-radius: 999px; width: 30px; height: 30px; font-size: 1.1rem; line-height: 1; }
.flip-btn:hover { border-color: var(--ink-3); }
.flip-count { min-width: 3.6em; text-align: center; font-variant-numeric: tabular-nums; }
.flip-state { color: var(--accent); font-weight: 600; margin: 0 .3rem; }
.flip-act { font-size: .82rem; padding: .3em .7em; }
.scene-pic .flip { justify-items: stretch; }

#draw-dialog { width: min(620px, calc(100vw - 24px)); }
.draw-group { display: grid; gap: .4rem; }
.draw-group .lbl { font-size: .9rem; color: var(--ink-2); }
.shape-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.shape { display: grid; justify-items: center; gap: .3rem; border: 1px solid var(--line); background: var(--raised); border-radius: 10px;
  padding: .5rem .55rem .4rem; min-width: 74px; font-size: .8rem; color: var(--ink-2); }
.shape-box { display: block; height: 30px; max-width: 54px; border: 1.5px solid currentColor; border-radius: 3px; }
.shape[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.size-seg { display: inline-flex; flex-wrap: wrap; border-radius: 12px; }
.size-seg button { flex: none; padding: .4em .9em; }
.size-seg .price { color: var(--ink-3); font-size: .8rem; margin-left: .2em; }
.guide-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.guide { position: relative; display: block; width: 64px; height: 64px; }
.guide img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; }
.guide-x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--raised); color: var(--ink); font-size: .9rem; line-height: 1; padding: 0; }

#fix-dialog { width: min(640px, calc(100vw - 24px)); }
#compare-dialog { width: min(1180px, calc(100vw - 24px)); }
.compare-setup { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.compare-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.compare-col { border: 1px solid var(--line); border-radius: 12px; background: var(--raised); display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.compare-col.won { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.compare-col header { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding: .6rem .9rem;
  border-bottom: 1px solid var(--line); font-size: .9rem; }
.compare-col header b { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.compare-text { font-family: var(--serif); font-size: 1.02rem; line-height: 1.65; padding: .8rem 1rem; max-height: 55dvh; overflow: auto; white-space: pre-wrap; }
.compare-score { width: 100%; border-collapse: collapse; font-size: .92rem; }
.compare-score th, .compare-score td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--line); }
.compare-score td.n { font-variant-numeric: tabular-nums; }

/* Plan tab (2.16) */
.plan-list { display: grid; gap: 10px; }
.plan-card { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 6px; }
.plan-card.current { border-color: var(--accent); }
.plan-card.planned { border-style: dashed; }
.plan-card h4 { margin: 0; font-family: var(--serif); font-size: 1.05rem; font-weight: 600; }
.plan-card .meta { font-size: .82rem; color: var(--ink-3); }
.plan-card .about { font-family: var(--serif); font-size: .98rem; color: var(--ink-2); margin: 0; }
.plan-card .row .btn { font-size: .85rem; padding: .3em .7em; }
.badge { display: inline-block; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: .1em .55em;
  border: 1px solid currentColor; vertical-align: .1em; }
.badge.quiet { color: var(--note); }
.badge.now { color: var(--accent); }
.thread .moved { display: block; font-size: .82rem; color: var(--ink-3); }
.appear { display: flex; gap: 3px; flex-wrap: wrap; margin: 2px 0; }
.appear span { width: 22px; height: 12px; border-radius: 3px; background: var(--accent); }
.arc-list { margin: 0; padding-left: 1.1rem; font-family: var(--serif); font-size: .97rem; }
.arc-list li { margin: .2rem 0; }

/* World builder (2.16) */
#world-dialog { width: min(820px, calc(100vw - 24px)); }
.world-kinds { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.world-q { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.world-q b { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; }
.world-entry { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 6px; background: var(--raised); }
.world-entry.dropped { opacity: .55; }
.world-entry .head { display: flex; gap: 8px; align-items: center; }
.world-entry .head input[type="text"] { flex: 1; min-width: 0; }
.world-group { display: grid; gap: 8px; }
.world-group h3 { margin: .6rem 0 0; font-size: .85rem; font-weight: 400; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
.fix-list { display: grid; gap: .8rem; max-height: 60dvh; overflow: auto; }
.fix-item { display: grid; gap: .4rem; border: 1px solid var(--line); border-radius: 10px; padding: .7rem .8rem; background: var(--raised); }
.fix-item textarea { resize: vertical; line-height: 1.45; }
.fix-item .was { margin: .3rem 0 0; color: var(--ink-3); font-size: .88rem; white-space: pre-wrap; }

@media (max-width: 720px) {
  .continue-card { grid-template-columns: 1fr; gap: 1rem; padding: 14px; }
  .continue-cover { aspect-ratio: 16 / 9; }
  .shelf.grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 1.2rem .8rem; }
  .row-stats { display: none; }
  .shelf-bar { gap: .45rem; }
  .shelf-sort { font-size: .88rem; padding: .45em .6em; }
  .shelf-bar .seg button { padding: .3em .55em; font-size: .84rem; }
  .view-seg { margin-left: auto; }
  .lib-head { flex-wrap: wrap; margin-bottom: 1.5rem; }
}

/* Updates (Admin) and the library's note about a new version */
.update-note { font-size: .9rem; margin: -1.5rem 0 1.5rem; padding: .55rem .9rem; border-radius: 10px; background: var(--accent-soft); color: var(--ink); }
.update-note a { color: inherit; font-weight: 600; }
details.changes { border: 1px solid var(--line); border-radius: 10px; padding: .45rem .8rem; }
details.changes > summary { cursor: pointer; font-weight: 600; font-size: .92rem; }
.changelog { font-size: .9rem; line-height: 1.5; max-height: 60vh; overflow-y: auto; }
.changelog p { margin: .6rem 0 .2rem; }
.changelog ul { margin: .2rem 0; padding-left: 1.2rem; }
.changelog li { margin: .2rem 0; }
pre.cmd { font-family: var(--mono); margin: 0; padding: .5rem .8rem; border-radius: 8px; background: var(--accent-soft); overflow-x: auto; font-size: .85rem; }

/* Cast files (2.18): the export and import dialog */
.castfile-list { display: grid; gap: .5rem; max-height: 50vh; overflow-y: auto; margin: .6rem 0; }
.castfile-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; align-items: end; padding: .5rem 0;
  border-bottom: 1px solid var(--line); }
.castfile-item .field { margin: 0; }
.castfile-formats { display: grid; gap: .45rem; border: 0; padding: 0; margin: .4rem 0; }
.castfile-formats label.row { align-items: flex-start; flex-wrap: nowrap; }
@media (max-width: 520px) { .castfile-item { grid-template-columns: minmax(0, 1fr); } }