/* Realquill editor — a quiet writing room. Warm-dark chrome around a warm-paper manuscript;
   the prose is set in the same EB Garamond the print/EPUB pipeline uses. */

:root {
  --paper: #fbfaf7;
  --paper-edge: #efece4;
  --ink: #23201c;
  --ink-soft: #6b655c;
  --ink-faint: #a49c91;
  --rail: #232228;
  --rail-2: #2b2a31;
  --rail-line: #3a3944;
  --rail-ink: #d9d5cd;
  --rail-ink-soft: #8b8790;
  --accent: #3f7d78;
  --accent-hi: #59a29b;
  --gate: #c1852a;
  --gate-bg: #fbf1db;
  --gate-line: #e7cf9a;
  --hard: #b4462f;
  --ok: #4f8a52;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* author display:grid/flex would otherwise beat the UA [hidden] rule */
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--rail);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

/* ---------- boot / library ---------- */
.boot {
  height: 100%; display: grid; place-items: center;
  color: var(--rail-ink-soft); font-size: .95rem; letter-spacing: .02em;
}
.library {
  min-height: 100%; background:
    radial-gradient(120% 80% at 50% -10%, #2c2b33 0%, var(--rail) 60%);
  padding: clamp(2rem, 6vw, 5rem) 1.5rem;
}

/* library header (account + profile) */
.lib-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.lib-me { display: flex; align-items: center; gap: .55rem; background: transparent; border: 0; color: var(--rail-ink); font-size: .9rem; cursor: pointer; font-family: var(--sans); padding: 0; }
.lib-me:hover { color: var(--paper); }
.lib-avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); background-size: cover; background-position: center; display: grid; place-items: center; color: #06110f; font-weight: 600; font-size: .9rem; flex: none; }
.lib-link { background: transparent; border: 0; color: var(--rail-ink-soft); font-size: .86rem; cursor: pointer; text-decoration: none; font-family: var(--sans); }
.lib-link:hover { color: var(--paper); }

/* author profile page */
.profile { min-height: 100%; background: radial-gradient(120% 80% at 50% -10%, #2c2b33 0%, var(--rail) 60%); padding: clamp(2rem, 6vw, 4rem) 1.5rem; overflow-y: auto; }
.pf-inner { max-width: 34rem; margin: 0 auto; }
.pf-back { display: inline-block; margin-bottom: 1.3rem; }
.profile h1 { font-family: var(--serif); color: var(--paper); font-weight: 500; font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 1.6rem; }
.pf-avatar-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.pf-avatar { width: 5rem; height: 5rem; border-radius: 50%; background: var(--accent); background-size: cover; background-position: center; display: grid; place-items: center; color: #06110f; font-weight: 600; font-size: 2rem; cursor: pointer; flex: none; border: 2px solid var(--rail-line); }
.pf-avatar:hover { border-color: var(--accent-hi); }
.pf-hint { color: var(--rail-ink-soft); font-size: .8rem; line-height: 1.4; }
.pf-label { display: block; color: var(--rail-ink); font-size: .82rem; margin: 1rem 0 .35rem; }
.pf-opt { color: var(--faint, #75717a); font-size: .78rem; }
.pf-input { width: 100%; background: var(--rail-2); border: 1px solid var(--rail-line); color: var(--rail-ink); border-radius: 8px; padding: .6rem .75rem; font-size: .95rem; font-family: var(--sans); }
.pf-input:focus { outline: none; border-color: var(--accent); }
.pf-bio { min-height: 5rem; resize: vertical; line-height: 1.5; }
.pf-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.pf-saved { color: var(--ok); font-size: .88rem; }

/* profile → Account card (R7B: export / notifications / delete) */
.pf-account { margin-top: 2.6rem; border-top: 1px solid var(--rail-line); padding-top: 1.6rem; }
.pf-sec-h { font-family: var(--serif); color: var(--paper); font-weight: 500; font-size: 1.35rem; margin: 0 0 1.1rem; }
.pf-acct-row { display: flex; align-items: center; gap: 1rem; padding: .9rem 0; }
.pf-acct-row + .pf-acct-row { border-top: 1px solid var(--rail-line); }
.pf-acct-text { flex: 1 1 auto; min-width: 0; }
.pf-acct-t { color: var(--rail-ink); font-size: .95rem; margin-bottom: .2rem; }
.pf-acct-d { color: var(--rail-ink-soft); font-size: .82rem; line-height: 1.45; }
.pf-account .ghost-btn, .pf-account .danger-btn { flex: none; }
/* accessible on/off switch (native checkbox, styled track) */
.pf-switch { position: relative; flex: none; width: 2.9rem; height: 1.6rem; cursor: pointer; }
.pf-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pf-switch-ui { position: absolute; inset: 0; background: var(--rail-2); border: 1px solid var(--rail-line); border-radius: 999px; transition: background .15s, border-color .15s; }
.pf-switch-ui::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--rail-ink-soft); transition: transform .15s, background .15s; }
.pf-switch input:checked + .pf-switch-ui { background: var(--accent); border-color: var(--accent); }
.pf-switch input:checked + .pf-switch-ui::after { transform: translateX(1.3rem); background: #06110f; }
.pf-switch input:focus-visible + .pf-switch-ui { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.pf-danger { margin-top: 1.6rem; border: 1px solid #6b3b34; border-radius: 10px; padding: .4rem 1rem 1rem; }
.pf-danger-h { color: #e08b7a; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; margin: .9rem 0 .2rem; }
.pf-foot { margin: 2.4rem 0 1rem; display: flex; gap: .6rem; align-items: center; font-size: .82rem; color: var(--rail-ink-soft); }
.pf-foot a { color: var(--rail-ink-soft); text-decoration: none; }
.pf-foot a:hover { color: var(--paper); }
.pf-farewell { text-align: center; padding-top: 3rem; }
.pf-farewell p { color: var(--rail-ink-soft); line-height: 1.6; margin: 0 auto 1rem; max-width: 30rem; }
.pf-fw-sub { font-size: .85rem; opacity: .8; }
.pf-farewell .cs-btn { display: inline-block; text-decoration: none; margin-top: .8rem; }

/* coming-soon / waitlist gate */
.coming-soon {
  min-height: 100%; display: grid; place-items: center; padding: 2.5rem 1.5rem;
  background: radial-gradient(120% 80% at 50% -10%, #2c2b33 0%, var(--rail) 60%);
}
.cs-inner { max-width: 30rem; width: 100%; text-align: center; }
.cs-logo { width: min(17rem, 72%); height: auto; margin: 0 auto 1.2rem; display: block; }
.coming-soon h1 { font-family: var(--serif); color: var(--paper); font-weight: 500; font-size: clamp(2rem, 5vw, 2.8rem); margin: 0 0 .5rem; }
.cs-sub { color: var(--rail-ink-soft); margin: 0 0 1.7rem; line-height: 1.55; }
.cs-form { display: flex; flex-direction: column; gap: .6rem; text-align: left; }
.cs-input { background: var(--rail-2); border: 1px solid var(--rail-line); color: var(--rail-ink); border-radius: 8px; padding: .65rem .8rem; font-size: .95rem; font-family: var(--sans); }
.cs-input:focus { outline: none; border-color: var(--accent); }
.cs-msg { min-height: 4rem; resize: vertical; }
.cs-btn { background: var(--accent); color: #06110f; border: 0; border-radius: 8px; padding: .7rem 1rem; font-size: .98rem; font-weight: 500; cursor: pointer; margin-top: .2rem; }
.cs-btn:hover { background: var(--accent-hi); }
.cs-btn:disabled { opacity: .6; cursor: default; }
.cs-done { color: var(--ok); font-size: 1.02rem; padding: 1.2rem; }
.cs-signout { margin-top: 1.3rem; font-size: .82rem; }
.cs-signout a { color: var(--rail-ink-soft); text-decoration: none; }
.cs-signout a:hover { color: var(--paper); }
.cs-foot { margin-top: 1.6rem; display: flex; gap: .55rem; justify-content: center; align-items: center; font-size: .8rem; color: var(--rail-ink-soft); }
.cs-foot a { color: var(--rail-ink-soft); text-decoration: none; }
.cs-foot a:hover { color: var(--paper); }
.library-inner { max-width: 60rem; margin: 0 auto; }
.library h1 {
  font-family: var(--serif); color: var(--paper); font-weight: 500;
  font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 .25rem; letter-spacing: .01em;
}
.library .sub { color: var(--rail-ink-soft); margin: 0 0 2.5rem; font-size: 1.02rem; }
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.book-card {
  text-align: left; background: var(--rail-2); border: 1px solid var(--rail-line);
  border-radius: 10px; padding: 1.1rem 1.15rem; color: var(--rail-ink);
  transition: border-color .15s, transform .15s; display: block; width: 100%;
}
.book-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.book-card .bt { font-family: var(--serif); font-size: 1.35rem; line-height: 1.15; color: var(--paper); }
.book-card .bmeta { margin-top: .8rem; display: flex; align-items: center; gap: .5rem; font-size: .8rem; }
.new-card {
  border-style: dashed; display: grid; place-items: center; min-height: 7rem;
  color: var(--rail-ink-soft); font-size: .95rem;
}
.new-card:hover { color: var(--accent-hi); }

/* ---------- app shell ---------- */
.app { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
.topbar {
  display: flex; align-items: center; gap: 1rem; padding: 0 1rem; height: 48px;
  background: var(--rail); border-bottom: 1px solid var(--rail-line); color: var(--rail-ink);
}
.crumb { display: flex; align-items: center; gap: .7rem; flex: 1; min-width: 0; }
.mark { font-family: var(--serif); font-size: 1.15rem; color: var(--accent-hi); letter-spacing: .01em; display: inline-flex; align-items: center; }
.mark .q { color: var(--brass, #b08d57); }
.mark::before {
  content: ""; width: 1.5em; height: 1.5em; margin-right: .35rem; flex: none;
  background: url(/assets/logo-mark.png) center/contain no-repeat;
}
.book-title { color: var(--rail-ink); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-title::before { content: "·"; margin-right: .7rem; color: var(--rail-ink-soft); }
/* compact chapter nav — appears on small screens when the rail is hidden */
.ch-jump { display: none; align-items: center; gap: .25rem; }
.ch-select {
  background: var(--rail-2); color: var(--rail-ink); border: 1px solid var(--rail-line); border-radius: 6px;
  padding: .25rem .4rem; font-size: .85rem; max-width: 48vw; font-family: var(--sans);
}
.ch-btn {
  background: transparent; border: 1px solid var(--rail-line); color: var(--rail-ink); border-radius: 6px;
  width: 1.7rem; height: 1.7rem; font-size: 1rem; line-height: 1; cursor: pointer;
}
.ch-btn:hover:not(:disabled) { color: var(--paper); border-color: var(--accent); }
.ch-btn:disabled { opacity: .35; cursor: default; }
.topbar-right { display: flex; align-items: center; gap: 1rem; }
.save-state { font-size: .78rem; color: var(--rail-ink-soft); min-width: 5rem; text-align: right; white-space: nowrap; }
.save-state.dirty { color: var(--gate); }
.save-state.saved { color: var(--ok); }
.save-state.err { color: var(--hard); font-weight: 600; }   /* persistent 'Unsaved — retrying…' / 'Conflict — unsaved' — not a transient toast */
.account { font-size: .8rem; color: var(--rail-ink-soft); }
.account a { color: var(--accent-hi); text-decoration: none; }
.ghost {
  background: transparent; border: 1px solid transparent; color: var(--rail-ink-soft);
  border-radius: 6px; padding: .3rem .55rem; font-size: .85rem;
}
.ghost:hover { color: var(--paper); border-color: var(--rail-line); }

/* ---------- pill ---------- */
.pill {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
  padding: .2rem .5rem; border-radius: 999px; white-space: nowrap;
  background: #33323b; color: var(--rail-ink); border: 1px solid var(--rail-line);
}
.pill.awaiting { background: var(--gate-bg); color: #7a5410; border-color: var(--gate-line); }
.pill.working { background: #26383a; color: var(--accent-hi); border-color: #33565a; }
.pill.done { background: #223626; color: #8ec793; border-color: #2f5033; }

/* ---------- workspace ---------- */
.workspace { display: grid; grid-template-columns: 250px 1fr 320px; overflow: hidden; }
.workspace.no-left { grid-template-columns: 0 1fr 320px; }
.workspace.no-right { grid-template-columns: 250px 1fr 0; }
.rail { background: var(--rail-2); overflow-y: auto; overflow-x: hidden; }
.rail-left { border-right: 1px solid var(--rail-line); }
.rail-right { border-left: 1px solid var(--rail-line); }
.rail-head {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--rail-ink-soft);
  padding: 1rem 1rem .5rem;
}
.chapter-nav { padding: 0 .5rem 1rem; }
.chapter-row {
  position: relative; display: flex; align-items: stretch; border-radius: 6px;
  border-left: 2px solid transparent;
}
.chapter-row:hover { background: #33323b; }
.chapter-row.active { background: #33323b; border-left-color: var(--accent); }
.chapter-item {
  flex: 1; min-width: 0; text-align: left; background: transparent; border: 0;
  color: var(--rail-ink); padding: .5rem .6rem; padding-right: 0; font-size: .9rem; line-height: 1.25;
  border-radius: 6px 0 0 6px;
}
.chapter-row.active .chapter-item { color: var(--paper); }
.chapter-item .cn { color: var(--rail-ink-soft); font-size: .75rem; margin-right: .4rem; font-variant-numeric: tabular-nums; }
.ch-del {
  flex: none; align-self: center; margin-right: .35rem; width: 1.2rem; height: 1.2rem; border: 0; border-radius: 4px;
  background: transparent; color: var(--rail-ink-soft); font-size: .95rem; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .12s;
}
.chapter-row:hover .ch-del, .ch-del:focus-visible, .ch-del.confirm { opacity: 1; }  /* also revealed on keyboard focus (a11y) */
.ch-del:hover { background: #4a2a28; color: var(--hard); }
.ch-del.confirm { background: var(--hard); color: #fff; width: auto; padding: 0 .4rem; font-size: .68rem; }
.add-chapter {
  margin: .3rem .6rem 1rem; width: calc(100% - 1.2rem); text-align: left; background: transparent;
  border: 1px dashed var(--rail-line); color: var(--rail-ink-soft); border-radius: 6px; padding: .5rem .6rem;
  font-size: .85rem; cursor: pointer;
}
.add-chapter:hover { border-color: var(--accent); color: var(--accent-hi); }

/* ---------- editor ---------- */
.editor-col { display: flex; flex-direction: column; overflow: hidden; background: #302f36; }

/* formatting toolbar */
.editor-toolbar {
  display: flex; align-items: center; gap: .2rem; padding: .4rem .9rem; flex-wrap: wrap; row-gap: .3rem;
  background: var(--rail); border-bottom: 1px solid var(--rail-line);
}
.editor-toolbar .tb {
  min-width: 2rem; height: 1.9rem; padding: 0 .5rem; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--rail-ink); font-size: .92rem; cursor: pointer; font-family: var(--sans);
}
.editor-toolbar .tb:hover { background: #33323b; border-color: var(--rail-line); color: var(--paper); }
.editor-toolbar .tb.on { background: var(--accent); border-color: var(--accent); color: #06110f; }
.editor-toolbar select.font-picker {
  max-width: 11rem; padding: 0 .4rem; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--rail-ink-soft) 50%), linear-gradient(135deg, var(--rail-ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 11px) center, calc(100% - 7px) center; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; padding-right: 1.2rem;
}
.editor-toolbar select.font-picker:hover { background-color: #33323b; border-color: var(--rail-line); color: var(--paper); }
.editor-toolbar .tb-sep { width: 1px; height: 1.2rem; background: var(--rail-line); margin: 0 .35rem; }
.editor-toolbar .tb-right { margin-left: auto; display: flex; align-items: center; gap: .3rem; }
.editor-toolbar .zoombox { display: flex; align-items: center; gap: .1rem; }
.editor-toolbar .zoom-level { font-size: .72rem; color: var(--rail-ink-soft); min-width: 2.6rem; text-align: center; cursor: pointer; font-variant-numeric: tabular-nums; }

.editor-wrap { flex: 1; overflow-y: auto; display: flex; justify-content: center; padding: 2.2rem 1.5rem 6rem; }
.sheet {
  position: relative; background: var(--paper); width: min(46rem, 100%); border-radius: 3px; align-self: flex-start;
  box-shadow: 0 1px 0 var(--paper-edge), 0 12px 40px rgba(0,0,0,.28); min-height: 65vh;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 5vw, 4rem);
}
/* --sheet-serif holds the chosen reading font (set inline by applyPrefs); this is the pre-boot default. */
.sheet { --zoom: 1; --sheet-serif: var(--serif); }
.chapter-heading {
  font-family: var(--sheet-serif); font-size: calc(1.7rem * var(--zoom)); color: var(--ink); margin-bottom: 1.2rem;
  padding-bottom: .8rem; border-bottom: 1px solid var(--paper-edge); text-wrap: balance; outline: none;
  border-radius: 3px;
}
.chapter-heading:focus { box-shadow: 0 0 0 2px var(--accent-hi); }
.chapter-heading:empty::before { content: attr(data-ph); color: var(--ink-faint); }

/* the WYSIWYG surface — rich text renders inline (no Markdown shown to the author) */
.editor {
  width: 100%; border: 0; background: transparent; color: var(--ink); outline: none;
  font-family: var(--sheet-serif); font-size: calc(1.18rem * var(--zoom)); line-height: 1.72; min-height: 40vh;
  display: block;
}
.editor:empty::before { content: attr(data-ph); color: var(--ink-faint); }
.editor p { margin: 0 0 1em; }
.editor h1, .editor h2, .editor h3 { font-weight: 600; line-height: 1.25; margin: 1.4em 0 .5em; text-wrap: balance; }
.editor h1 { font-size: 1.5em; } .editor h2 { font-size: 1.3em; } .editor h3 { font-size: 1.12em; }
.editor blockquote {
  margin: 1em 0; padding: .2em 0 .2em 1.1em; border-left: 3px solid var(--accent);
  color: var(--ink-soft); font-style: italic;
}
.editor ul, .editor ol { margin: 0 0 1em; padding-left: 1.6em; }
.editor li { margin: .2em 0; }
.editor strong, .editor b { font-weight: 700; }
.editor em, .editor i { font-style: italic; }

/* ---------- Phase 11: textbook/nonfiction structures in the editor ---------- */
/* $-math tokens (D1): the bridge renders `$…$`/`$$…$$` as an atomic (contenteditable=false) span
   showing the TeX source (data-tex is the stored truth). Monospace + a soft tint reads as "formula",
   distinct from prose and from `code` spans. Never appears in a novel (the rule is gated). */
.editor .math {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82em;
  background: #eef3f2; border: 1px solid #dce6e4; border-radius: 4px;
  padding: 0 .3em; color: #2c4a46; white-space: pre-wrap;
}
.editor .math[data-display] { display: block; text-align: center; margin: 1em 0; padding: .5em .8em; }
/* Callout boxes (D6): the bridge upgrades `> [!KIND] …` quotes to <aside class="callout <kind>">
   for non-novel books. The kind chip is CSS chrome from data-label — not editable content — so an
   untitled callout round-trips untitled. Colors mirror design.py's textbook theme, so the editor
   approximates the bound book. */
.editor aside.callout {
  margin: 1em 0; padding: .55em .9em .6em 1em; border-left: 3px solid #6b7f93;
  background: #f2f4f7; border-radius: 0 6px 6px 0; font-style: normal;
}
.editor aside.callout::before {
  content: attr(data-label); display: block; font-family: var(--sans); font-size: .62em;
  font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: .3em;
  color: #4c5a68; user-select: none; -webkit-user-select: none;
}
.editor aside.callout p { margin: 0 0 .45em; }
.editor aside.callout p:last-child { margin-bottom: 0; }
.editor aside.callout .callout-title { font-weight: 600; }
.editor .callout.note { border-color: #3b6ea5; background: #eef3f9; }
.editor .callout.note::before { color: #2d5580; }
.editor .callout.tip { border-color: #2e7d5b; background: #ecf6f1; }
.editor .callout.tip::before { color: #236248; }
.editor .callout.warning { border-color: #b26a00; background: #fdf3e4; }
.editor .callout.warning::before { color: #8a5200; }
.editor .callout.definition { border-color: #6a4fa3; background: #f2eef9; }
.editor .callout.definition::before { color: #533e80; }
.editor .callout.example { border-color: #5a5a5a; background: #f4f4f4; }
.editor .callout.example::before { color: #444; }
.editor .callout.exercise { border-color: #1f6f8b; background: #ecf5f8; }
.editor .callout.exercise::before { color: #18566c; }

/* true discrete pages — non-editable dark spacers break the paper into pages that reflow as you type */
.page-breaks { display: none; }                     /* legacy marker overlay, retired */
.page-gap {
  background: #302f36; position: relative; user-select: none; -webkit-user-select: none;
  box-shadow: 0 -7px 13px -7px rgba(0,0,0,.45), 0 7px 13px -7px rgba(0,0,0,.45);
}
.page-gap .pg-label {
  position: absolute; bottom: 5px; right: 10px; font-family: var(--sans); font-size: .6rem;
  text-transform: uppercase; letter-spacing: .09em; color: var(--rail-ink-soft);
}

/* ---------- context panel ---------- */
.context { padding: 1rem 1rem 3rem; color: var(--rail-ink); }
.ctx-block { margin-bottom: 1.5rem; }
.ctx-h {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--rail-ink-soft);
  margin-bottom: .55rem; display: flex; justify-content: space-between; align-items: baseline;
}
.ctx-row { font-size: .86rem; line-height: 1.5; color: var(--rail-ink); padding: .2rem 0; }
.ctx-row .k { color: var(--rail-ink-soft); }
.ctx-link { color: var(--accent-hi); text-decoration: none; font-size: .84rem; }
.ctx-link:hover { text-decoration: underline; }
.canon-ent { margin-bottom: .6rem; }
.canon-ent .en { color: var(--paper); font-size: .88rem; font-weight: 600; }
.canon-ent .ef { color: var(--rail-ink-soft); font-size: .82rem; line-height: 1.4; padding-left: .1rem; }

/* ---------- gate banner ---------- */
.gate-banner {
  background: var(--gate-bg); border-bottom: 1px solid var(--gate-line); color: #4a3410;
  padding: 1rem 1.5rem; overflow-y: auto; max-height: 55vh;
}
.gate-banner .gate-top { display: flex; align-items: center; gap: .7rem; margin-bottom: .3rem; }
.gate-banner h3 { margin: 0; font-size: 1rem; font-family: var(--serif); font-weight: 600; }
.gate-banner .gate-prompt { font-size: .88rem; color: #6a4d18; margin: 0 0 .9rem; }
.gate-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
/* In-flight gate action (e.g. notes apply): a working banner replaces the buttons so nothing looks idle. */
.gate-working { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  margin-top: .9rem; padding: .6rem .8rem; border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--ink, inherit); font-weight: 600; }
.gate-working-sub { flex-basis: 100%; font-weight: 400; opacity: .75; font-size: .86em; }
.spinner { width: 1em; height: 1em; border-radius: 50%; flex: none;
  border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-top-color: var(--accent); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
.accent-btn {
  background: var(--accent); color: #fff; border: 0; border-radius: 7px; padding: .5rem .95rem;
  font-size: .88rem; font-weight: 500;
}
.accent-btn:hover { background: var(--accent-hi); }
.accent-btn.wide { padding: .55rem 1.2rem; }
.ghost-btn {
  background: transparent; border: 1px solid var(--gate-line); color: #6a4d18;
  border-radius: 7px; padding: .5rem .95rem; font-size: .88rem;
}
.ghost-btn:hover { background: #f3e6c8; }
.danger-btn { background: transparent; border: 1px solid #dbb0a4; color: var(--hard); border-radius: 7px; padding: .5rem .95rem; font-size: .88rem; }
.danger-btn:hover { background: #f6e6e1; }

/* changes / notes inside gate */
.chg { background: #fff; border: 1px solid var(--gate-line); border-radius: 8px; padding: .7rem .8rem; margin-bottom: .6rem; }
.chg-head { display: flex; align-items: center; gap: .5rem; font-size: .8rem; margin-bottom: .5rem; }
.chg-head label { display: flex; align-items: center; gap: .4rem; cursor: pointer; font-weight: 600; }
.diff { font-family: var(--serif); font-size: .95rem; line-height: 1.5; }
.diff del { background: #fbe3dd; color: #7c2d1a; text-decoration: none; display: block; padding: .25rem .4rem; border-radius: 4px; margin-bottom: .3rem; }
.diff ins { background: #dff0e0; color: #245c2a; text-decoration: none; display: block; padding: .25rem .4rem; border-radius: 4px; }
.note-badges { display: inline-flex; gap: .35rem; }
.badge { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; padding: .12rem .4rem; border-radius: 4px; font-weight: 700; }
.badge.hard { background: #f6ded6; color: var(--hard); }
.badge.req { background: #ecdcc0; color: #7a5410; }
.badge.soft { background: #e7ece7; color: #4a6a4c; }
.note-item { border-bottom: 1px solid var(--gate-line); padding: .6rem 0; }
.note-item:last-child { border-bottom: 0; }
.note-item .nr { font-size: .88rem; color: #4a3410; margin: .25rem 0; }
.note-item .nq { font-size: .82rem; color: #7c6a44; font-style: italic; }

/* ---------- Draft Runner (screen S4) ---------- */
/* left-rail entry — shown only in workshop/drafting */
.draft-entry { padding: .9rem .6rem .3rem; }
.draft-entry-btn {
  display: block; width: 100%; text-align: left; background: #26383a; border: 1px solid #33565a;
  color: var(--accent-hi); border-radius: 7px; padding: .55rem .7rem; font-size: .88rem; font-weight: 500;
  cursor: pointer; font-family: var(--sans);
}
.draft-entry-btn:hover { background: #2c4245; color: var(--paper); }

/* the console — dark chrome in the editor column (like the gate banner, but the working, not the awaiting, state) */
.draft-runner {
  background: var(--rail); border-bottom: 1px solid var(--rail-line); color: var(--rail-ink);
  padding: 1rem 1.5rem 1.15rem; overflow-y: auto; max-height: 60vh;
}
.draft-runner button:disabled { opacity: .45; cursor: default; }
.dr-head { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-bottom: .7rem; }
.dr-head h3 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--paper); }
.dr-sub { color: var(--rail-ink-soft); font-size: .84rem; }
.dr-bible { font-size: .86rem; color: var(--rail-ink-soft); margin-bottom: .7rem; display: flex; align-items: center; gap: .4rem; }
.dr-bible.ok { color: #8ec793; }
.dr-bible.work { color: var(--accent-hi); }
.dr-progress { margin-bottom: .7rem; }
.dr-count { font-size: .86rem; color: var(--rail-ink); margin-bottom: .4rem; }
.dr-bar { height: 6px; background: #33323b; border-radius: 999px; overflow: hidden; margin-bottom: .5rem; }
.dr-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .4s ease; }
.dr-writing { font-size: .88rem; color: var(--accent-hi); display: flex; align-items: center; gap: .45rem; margin: .2rem 0; }
.dr-meter { font-size: .82rem; color: var(--gate, #c1852a); font-variant-numeric: tabular-nums; margin-top: .2rem; }
.dr-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent-hi); flex: none; animation: dr-pulse 1.15s ease-in-out infinite; }
@keyframes dr-pulse { 0%, 100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.dr-trial {
  font-size: .84rem; color: #e7cf9a; background: #322f2a; border: 1px solid #4a4130;
  border-radius: 7px; padding: .55rem .7rem; margin-bottom: .7rem; line-height: 1.45;
}
.dr-job { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .7rem; font-size: .82rem; color: var(--rail-ink-soft); }
.dr-job-status { font-variant-numeric: tabular-nums; }
.dr-err { background: #3a2622; border: 1px solid #6b3b34; border-radius: 8px; padding: .6rem .75rem; margin-bottom: .7rem; }
.dr-err-h { color: #e08b7a; font-size: .82rem; font-weight: 600; text-transform: capitalize; margin-bottom: .25rem; }
.dr-err-msg { color: var(--rail-ink-soft); font-size: .82rem; line-height: 1.45; margin-bottom: .5rem; word-break: break-word; }
.dr-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .3rem; }
/* the shared warm-gate button classes need dark-panel contrast fixes inside the runner */
.draft-runner .ghost-btn { border-color: var(--rail-line); color: var(--rail-ink); }
.draft-runner .ghost-btn:hover { background: #33323b; color: var(--paper); }
.draft-runner .danger-btn { border-color: #6b3b34; color: #e08b7a; }
.draft-runner .danger-btn:hover { background: #3a2622; }
.draft-runner .accent-btn.wide { width: auto; margin-top: 0; }

/* ---------- inline-AI popover ---------- */
.revise-pop {
  position: fixed; z-index: 40; display: flex; gap: .4rem; align-items: center;
  background: var(--rail); border: 1px solid var(--rail-line); border-radius: 9px;
  padding: .4rem; box-shadow: 0 8px 28px rgba(0,0,0,.4);
}
.revise-instr {
  background: var(--rail-2); border: 1px solid var(--rail-line); color: var(--rail-ink);
  border-radius: 6px; padding: .35rem .5rem; font-size: .82rem; width: 12rem; font-family: var(--sans);
}
.revise-alt {
  background: var(--rail-2); border: 1px solid var(--rail-line); color: var(--rail-ink);
  border-radius: 6px; padding: .35rem .3rem; font-size: .82rem; font-family: var(--sans);
}

/* ---------- diff card (inline revise result) ---------- */
.revise-card {
  position: fixed; z-index: 39; width: min(34rem, 92vw);
  background: var(--paper); border-radius: 10px; box-shadow: 0 14px 44px rgba(0,0,0,.45);
  border: 1px solid var(--paper-edge); overflow: hidden;
}
.revise-card .rc-body { padding: .9rem 1rem; max-height: 40vh; overflow-y: auto; }
.confirm-modal .rc-body { color: var(--ink); font-size: .92rem; line-height: 1.5; }
.confirm-modal .rc-body p { margin: 0 0 .6rem; }
.confirm-modal .cm-warn { color: var(--hard); font-weight: 500; }
.revise-card .rc-actions { display: flex; gap: .5rem; justify-content: flex-end; padding: .7rem 1rem; border-top: 1px solid var(--paper-edge); background: #f6f3ec; }

/* ---------- inline load-failure state (no dead screens) ---------- */
.load-error { padding: 2.4rem 1.5rem; text-align: center; color: var(--ink-soft); font-family: var(--sans); }
.load-error p { margin: 0 0 .8rem; }
.load-error .le-detail { color: var(--hard); font-size: .88rem; }

/* ---------- status line ---------- */
.statusbar {
  height: 26px; background: var(--rail); border-top: 1px solid var(--rail-line);
  display: flex; align-items: center; justify-content: space-between; padding: 0 1rem;
  color: var(--rail-ink-soft); font-size: .74rem; font-variant-numeric: tabular-nums;
}

/* ---------- context panel buttons ---------- */
.ctx-btn {
  display: block; width: 100%; text-align: left; margin-top: .55rem; background: #33323b;
  border: 1px solid var(--rail-line); color: var(--rail-ink); border-radius: 7px; padding: .5rem .7rem;
  font-size: .88rem; cursor: pointer; text-decoration: none; font-family: var(--sans);
}
.ctx-btn:hover { border-color: var(--accent); color: var(--paper); }

/* ---------- story world panel ---------- */
.world-panel {
  position: fixed; z-index: 46; top: 56px; right: 1rem; width: min(30rem, 94vw); max-height: 82vh;
  display: flex; flex-direction: column; background: var(--rail-2); border: 1px solid var(--rail-line);
  border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,.55); overflow: hidden;
}
.wp-head { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem;
  border-bottom: 1px solid var(--rail-line); color: var(--paper); font-size: .98rem; }
.wp-body { overflow-y: auto; padding: 1rem; }
.wp-sec { margin-bottom: 1.3rem; }
.wp-sec-h { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--rail-ink-soft); margin-bottom: .6rem; }
.wp-sub { text-transform: none; letter-spacing: normal; color: var(--faint, #75717a); font-size: .72rem; margin-left: .4rem; }
.wp-pending { margin-bottom: 1.1rem; }
.wp-pending-h { color: var(--gate, #c1852a); font-size: .85rem; margin-bottom: .5rem; }
.wp-pend-item { font-size: .85rem; color: var(--rail-ink); padding: .3rem .5rem; border-left: 2px solid var(--gate, #c1852a); background: #322f2a; border-radius: 4px; margin-bottom: .3rem; }
.wp-note { font-size: .78rem; color: var(--rail-ink-soft); margin-top: .5rem; }
.wp-cat { font-size: .78rem; color: var(--accent-hi); margin: .7rem 0 .35rem; font-weight: 600; }
.wp-ent { margin-bottom: .5rem; }
.wp-en { color: var(--paper); font-size: .84rem; font-weight: 600; margin-bottom: .2rem; }
.wp-fact { display: flex; gap: .3rem; align-items: center; margin-bottom: .3rem; }
.wp-fi { flex: 1; background: var(--rail); color: var(--rail-ink); border: 1px solid var(--rail-line); border-radius: 6px; padding: .35rem .5rem; font-size: .84rem; font-family: var(--sans); }
.wp-fi:focus { outline: none; border-color: var(--accent); }
.wp-fx { background: transparent; border: 0; color: var(--rail-ink-soft); cursor: pointer; padding: 0 .3rem; }
.wp-fx:hover { color: var(--hard); }
.wp-add { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .7rem; align-items: center; }
.wp-add .ch-select, .wp-add .revise-instr { font-size: .8rem; }
.wp-add .revise-instr { width: auto; flex: 1; min-width: 8rem; }
.wp-bible { width: 100%; height: 12rem; background: var(--rail); color: var(--rail-ink); border: 1px solid var(--rail-line); border-radius: 8px; padding: .6rem .7rem; font-size: .86rem; line-height: 1.5; resize: vertical; font-family: var(--sans); margin-bottom: .5rem; }
.wp-bible:focus { outline: none; border-color: var(--accent); }
.accent-btn.wide { display: block; width: 100%; margin-top: .6rem; }

/* ---------- Codex / Character Studio (§6.14) ---------- */
.world-panel.wp-wide { width: min(50rem, 96vw); }
.wp-modes { display: flex; gap: .3rem; padding: .55rem 1rem 0; border-bottom: 1px solid var(--rail-line); }
.wp-mode { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--rail-ink-soft);
  font-family: var(--sans); font-size: .84rem; padding: .35rem .5rem .5rem; cursor: pointer; letter-spacing: .02em; }
.wp-mode:hover { color: var(--paper); }
.wp-mode.active { color: var(--paper); border-bottom-color: var(--accent); }
.wp-codex { min-height: 12rem; }

.cx-seed { text-align: center; padding: 1.4rem .6rem; }
.cx-seed-h { font-family: var(--serif); color: var(--paper); font-size: 1.15rem; margin-bottom: .5rem; }
.cx-seed-actions { display: flex; gap: .5rem; justify-content: center; margin-top: 1rem; }

.cx-tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .8rem; }
.cx-tab { background: var(--rail); border: 1px solid var(--rail-line); color: var(--rail-ink-soft);
  border-radius: 999px; padding: .28rem .7rem; font-size: .78rem; font-family: var(--sans); cursor: pointer; }
.cx-tab:hover { color: var(--paper); }
.cx-tab.active { background: var(--accent); border-color: var(--accent); color: #06110f; }
.cx-count { opacity: .8; font-size: .72rem; margin-left: .1rem; }

.cx-cols { display: grid; grid-template-columns: 13rem 1fr; gap: 1rem; align-items: start; }
.cx-list { display: flex; flex-direction: column; gap: .25rem; }
.cx-item { text-align: left; background: var(--rail); border: 1px solid var(--rail-line); color: var(--rail-ink);
  border-radius: 8px; padding: .45rem .6rem; cursor: pointer; display: flex; flex-direction: column; gap: .1rem; }
.cx-item:hover { border-color: var(--accent); }
.cx-item.active { border-color: var(--accent); background: #2f3b39; }
.cx-item-name { font-size: .88rem; color: var(--paper); font-weight: 500; }
.cx-item-one { font-size: .74rem; color: var(--rail-ink-soft); line-height: 1.3; }
.cx-new { margin-top: .3rem; font-size: .8rem; }
.ghost-btn.wide { display: block; width: 100%; }

.cx-page { min-width: 0; }
.cx-empty { color: var(--rail-ink-soft); font-size: .86rem; padding: 2rem .5rem; text-align: center; }
.cx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: .7rem; }
.cx-title { font-family: var(--serif); color: var(--paper); font-size: 1.25rem; line-height: 1.2; }
.cx-head-actions { display: flex; gap: .3rem; flex: none; }
.cx-mini { font-size: .76rem; padding: .28rem .55rem; }
.cx-danger { color: #d98a7a; }
.cx-danger-btn { background: #b4503f; }
.cx-danger-btn:hover { background: #c25d4c; }

.cx-grp { border: 1px solid var(--rail-line); border-radius: 9px; margin-bottom: .6rem; overflow: hidden; }
.cx-grp-h { width: 100%; text-align: left; background: var(--rail); border: 0; color: var(--paper);
  font-family: var(--sans); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
  padding: .5rem .7rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.cx-grp-h:hover { background: #33323b; }
.cx-grp-caret { color: var(--rail-ink-soft); font-size: .7rem; }
.cx-grp-body { padding: .7rem; display: flex; flex-direction: column; gap: .5rem; }
.cx-field { display: flex; flex-direction: column; gap: .2rem; }
.cx-field label { font-size: .74rem; color: var(--rail-ink-soft); }
.cx-2col { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.cx-in { width: 100%; background: var(--rail); color: var(--rail-ink); border: 1px solid var(--rail-line);
  border-radius: 6px; padding: .4rem .55rem; font-size: .84rem; font-family: var(--sans); }
.cx-in:focus { outline: none; border-color: var(--accent); }
.cx-ta { line-height: 1.5; resize: vertical; }
.cx-preview-h { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--rail-ink-soft); margin-top: .3rem; }
.cx-preview { background: var(--rail); border: 1px solid var(--rail-line); border-radius: 6px; padding: .5rem .6rem;
  font-size: .84rem; color: var(--rail-ink); line-height: 1.55; min-height: 1.5rem; }
.cx-preview p { margin: 0 0 .5rem; } .cx-preview p:last-child { margin: 0; }

.cx-tl-row { display: grid; grid-template-columns: 7rem 1fr auto; gap: .35rem; align-items: center; margin-bottom: .3rem; }
.cx-tl-x { background: transparent; border: 0; color: var(--rail-ink-soft); cursor: pointer; padding: 0 .3rem; }
.cx-tl-x:hover { color: #d98a7a; }

.cx-rel-row { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--rail-ink); padding: .25rem 0; }
.cx-rel-kind { background: var(--rail); border: 1px solid var(--rail-line); border-radius: 999px; padding: .05rem .5rem; font-size: .72rem; color: var(--accent-hi); flex: none; }
.cx-rel-name { color: var(--paper); font-weight: 500; }
.cx-rel-note { color: var(--rail-ink-soft); font-size: .76rem; }
.cx-rel-x { background: transparent; border: 0; color: var(--rail-ink-soft); cursor: pointer; margin-left: auto; padding: 0 .3rem; }
.cx-rel-x:hover { color: #d98a7a; }
.cx-rel-add { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; align-items: center; }
.cx-rel-add .ch-select { font-size: .78rem; }
.cx-rel-add .cx-in { flex: 1; min-width: 7rem; width: auto; }

.cx-fact-row { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--rail-ink); padding: .25rem 0; }
.cx-fact-text { flex: 1; }
.cx-fact-x { background: transparent; border: 1px solid var(--rail-line); border-radius: 5px; color: var(--rail-ink-soft); cursor: pointer; font-size: .72rem; padding: .1rem .4rem; flex: none; }
.cx-fact-x:hover { color: #d98a7a; border-color: #d98a7a; }
.cx-pick-list { max-height: 40vh; overflow-y: auto; display: flex; flex-direction: column; gap: .3rem; margin-top: .5rem; }
.cx-pick { display: flex; gap: .45rem; align-items: flex-start; font-size: .84rem; color: var(--rail-ink); }
.cx-pick em { color: var(--rail-ink-soft); font-style: normal; }

.cx-anchor-gallery { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0; }
.cx-anchor { margin: 0; width: 6.5rem; }
.cx-anchor img { width: 6.5rem; height: 6.5rem; object-fit: cover; border-radius: 8px; border: 1px solid var(--rail-line); display: block; }
.cx-anchor figcaption { font-size: .7rem; color: var(--rail-ink-soft); text-align: center; margin-top: .15rem; }
.cx-anchor-gen { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.cx-anchor-gen .cx-in { flex: 1; min-width: 8rem; width: auto; }
.cx-anchor-gen .wp-note { flex-basis: 100%; margin-top: .1rem; }

/* auto-link mention marks (class-only chrome; stripped on save like insight marks) */
span.rq-codex { text-decoration: underline dotted var(--accent-hi); text-underline-offset: 2px;
  text-decoration-thickness: 1px; cursor: help; }
.cx-pop { position: absolute; z-index: 60; width: min(15rem, 80vw); background: var(--rail-2);
  border: 1px solid var(--rail-line); border-radius: 9px; box-shadow: 0 10px 30px rgba(0,0,0,.45); padding: .6rem .7rem; }
.cx-pop-name { color: var(--paper); font-weight: 600; font-size: .9rem; }
.cx-pop-type { color: var(--accent-hi); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; margin: .1rem 0 .3rem; }
.cx-pop-one { color: var(--rail-ink); font-size: .8rem; line-height: 1.4; margin-bottom: .5rem; }

@media (max-width: 640px) {
  .cx-cols { grid-template-columns: 1fr; }
  .cx-2col, .cx-tl-row { grid-template-columns: 1fr; }
}

/* ---------- version history panel ---------- */
.history-panel {
  position: fixed; z-index: 45; top: 56px; right: 1rem; width: min(24rem, 92vw); max-height: 74vh;
  display: flex; flex-direction: column; background: var(--rail-2); border: 1px solid var(--rail-line);
  border-radius: 12px; box-shadow: 0 16px 44px rgba(0,0,0,.5); overflow: hidden;
}
.hp-head {
  display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem;
  border-bottom: 1px solid var(--rail-line); color: var(--paper); font-size: .95rem;
}
.hp-x { background: transparent; border: 0; color: var(--rail-ink-soft); font-size: 1rem; cursor: pointer; }
.hp-x:hover { color: var(--paper); }
.hp-list { overflow-y: auto; padding: .5rem; }
.hp-item { padding: .6rem .7rem; border-radius: 8px; border: 1px solid transparent; }
.hp-item:hover { background: #33323b; border-color: var(--rail-line); }
.hp-item .hp-top { display: flex; align-items: center; gap: .5rem; }
.hp-badge {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  padding: .1rem .4rem; border-radius: 4px; background: #33323b; color: var(--rail-ink);
}
.hp-badge.commit { background: #26383a; color: var(--accent-hi); }
.hp-badge.draft { background: #3a3630; color: #cbb994; }
.hp-badge.restore { background: #33323b; color: var(--rail-ink-soft); }
.hp-item .hp-note { color: var(--paper); font-size: .9rem; margin: .15rem 0; }
.hp-item .hp-meta { color: var(--rail-ink-soft); font-size: .76rem; display: flex; justify-content: space-between; align-items: center; }
.hp-restore {
  background: transparent; border: 1px solid var(--rail-line); color: var(--accent-hi); border-radius: 6px;
  padding: .2rem .55rem; font-size: .76rem; cursor: pointer;
}
.hp-restore:hover { background: var(--accent); color: #06110f; border-color: var(--accent); }
.tb.tb-wide { min-width: auto; }

/* ---------- Polish & Publish (S7) ---------- */
/* estimate/confirm modals sit above every panel (world z46, history z45, publish z48) */
.confirm-modal { z-index: 55; }

.publish-entry { padding: .6rem .8rem 0; }
.publish-entry-btn {
  width: 100%; text-align: left; background: #2c4245; border: 1px solid #33565a; color: var(--accent-hi);
  border-radius: 8px; padding: .6rem .8rem; font-size: .9rem; cursor: pointer; font-family: var(--sans);
}
.publish-entry-btn:hover { background: #345054; color: var(--paper); }

.publish-panel {
  position: fixed; z-index: 48; top: 3vh; left: 50%; transform: translateX(-50%);
  width: min(54rem, 96vw); max-height: 94vh; display: flex; flex-direction: column;
  background: var(--rail-2); border: 1px solid var(--rail-line); border-radius: 12px;
  box-shadow: 0 18px 56px rgba(0,0,0,.6); overflow: hidden;
}
.pub-head {
  display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--rail-line); color: var(--paper); font-family: var(--serif); font-size: 1.15rem;
}
.pub-body { overflow-y: auto; padding: .4rem 1.1rem 1.4rem; }
.pub-sec { padding: 1rem 0; border-bottom: 1px solid var(--rail-line); }
.pub-sec:last-child { border-bottom: 0; }
.pub-sec-h { display: flex; align-items: center; gap: .6rem; font-family: var(--serif); font-size: 1.05rem; color: var(--paper); margin-bottom: .7rem; }
.pub-step { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: #06110f; font-size: .8rem; font-weight: 700; flex: none; font-family: var(--sans); }
.pub-desc { font-size: .86rem; color: var(--rail-ink-soft); margin: 0 0 .7rem; line-height: 1.5; }
.pub-muted { font-size: .78rem; color: var(--rail-ink-soft); margin-top: .4rem; line-height: 1.4; }
/* Phase 11 (D5): honest preview label for non-weasy (tectonic) books — the live preview is HTML,
   the shipped PDF is not; amber = "heads-up", not an error. */
.pub-engine-note { font-size: .78rem; color: var(--gate); margin-top: .4rem; line-height: 1.4; }
.pub-locked { font-size: .84rem; color: var(--rail-ink-soft); font-style: italic; }
.pub-ok { color: #8ec793; font-size: .9rem; }
.pub-live { display: flex; align-items: center; gap: .45rem; color: var(--accent-hi); font-size: .88rem; margin-bottom: .5rem; }
.pub-job {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; font-size: .82rem; color: var(--rail-ink-soft);
  background: #33323b; border: 1px solid var(--rail-line); border-radius: 8px; padding: .5rem .75rem; margin: .6rem 0 .2rem; text-transform: capitalize;
}
.publish-panel .ghost-btn { border-color: var(--rail-line); color: var(--rail-ink); background: transparent; }
.publish-panel .ghost-btn:hover:not(:disabled) { background: #33323b; color: var(--paper); }
.publish-panel button:disabled { opacity: .45; cursor: default; }

.pub-art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .8rem; }
.pub-art { display: flex; flex-direction: column; gap: .4rem; }
.pub-art-h { font-size: .78rem; color: var(--rail-ink); font-weight: 600; }
.pub-art-img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; border: 1px solid var(--rail-line); background: var(--rail); }
.pub-art-ph {
  width: 100%; aspect-ratio: 2 / 3; border-radius: 6px; border: 1px dashed var(--rail-line); background: var(--rail);
  display: grid; place-items: center; gap: .3rem; color: var(--rail-ink-soft); font-size: .78rem; text-align: center;
}

.pub-tabs { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-bottom: .6rem; }
.pub-tab { background: transparent; border: 1px solid var(--rail-line); color: var(--rail-ink-soft); border-radius: 6px; padding: .35rem .7rem; font-size: .8rem; cursor: pointer; font-family: var(--sans); }
.pub-tab:hover { color: var(--paper); }
.pub-tab.active { background: var(--accent); border-color: var(--accent); color: #06110f; }
.pub-tab-refresh { margin-left: auto; }
.pub-preview { border: 1px solid var(--rail-line); border-radius: 8px; overflow: hidden; background: #fff; }
.pub-frame { width: 100%; height: 60vh; border: 0; background: #fff; display: block; }

.pub-vhead { font-size: .9rem; margin: .8rem 0 .4rem; }
.pub-vhead.ok { color: #8ec793; }
.pub-vhead.bad { color: #e08b7a; }
.pub-vlist { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.pub-v { font-size: .82rem; line-height: 1.4; padding: .3rem .5rem; border-radius: 5px; background: var(--rail); word-break: break-word; }
.pub-v.err { color: #e08b7a; border-left: 2px solid #6b3b34; }
.pub-v.warn { color: #cbb994; border-left: 2px solid #5a5236; }

.pub-font { display: flex; flex-direction: column; gap: .55rem; margin: 0 0 1rem; }
.pub-font-row { display: flex; align-items: center; gap: .5rem; font-size: .86rem; color: var(--rail-ink); }
.pub-font-sel { background: var(--rail-2); border: 1px solid var(--rail-line); color: var(--rail-ink); border-radius: 6px; padding: .35rem .5rem; font-size: .86rem; font-family: var(--sans); }
.pub-embed { cursor: pointer; }
.pub-embed input { accent-color: var(--accent); }
.pub-dls { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }
.pub-dl {
  display: inline-flex; align-items: center; gap: .3rem; background: var(--rail); border: 1px solid var(--rail-line);
  color: var(--accent-hi); border-radius: 7px; padding: .5rem .9rem; font-size: .86rem; text-decoration: none;
}
.pub-dl:hover { border-color: var(--accent); color: var(--paper); }

/* ---------- Audiobook Studio (Phase 12): Cast · Segments · Render & Deliver ---------- */
.audio-panel {
  position: fixed; z-index: 48; top: 3vh; left: 50%; transform: translateX(-50%);
  width: min(56rem, 96vw); max-height: 94vh; display: flex; flex-direction: column;
  background: var(--rail-2); border: 1px solid var(--rail-line); border-radius: 12px;
  box-shadow: 0 18px 56px rgba(0,0,0,.6); overflow: hidden; font-family: var(--sans);
}
.audio-steps { display: flex; gap: .3rem; padding: .5rem .9rem; border-bottom: 1px solid var(--rail-line); flex-wrap: wrap; }
.audio-step {
  display: inline-flex; align-items: center; gap: .45rem; background: transparent; border: 1px solid var(--rail-line);
  color: var(--rail-ink-soft); border-radius: 8px; padding: .4rem .8rem; font-size: .86rem; cursor: pointer; font-family: var(--sans);
}
.audio-step:hover { color: var(--paper); }
.audio-step.active { background: var(--accent); border-color: var(--accent); color: #06110f; }
.audio-step-n { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: rgba(0,0,0,.18); font-size: .72rem; font-weight: 700; flex: none; }
.audio-step.active .audio-step-n { background: rgba(0,0,0,.22); }
.audio-body { overflow-y: auto; padding: .4rem 1.1rem 1.4rem; color: var(--rail-ink); }
.audio-panel .accent-btn, .audio-panel .ghost-btn { font-family: var(--sans); }
.audio-panel .ghost-btn { border-color: var(--rail-line); color: var(--rail-ink); background: transparent; }
.audio-panel .ghost-btn:hover:not(:disabled) { background: #33323b; color: var(--paper); }
.audio-panel button:disabled { opacity: .45; cursor: default; }
.audio-panel .ch-select { background: var(--rail); border: 1px solid var(--rail-line); color: var(--rail-ink); border-radius: 6px; padding: .35rem .5rem; font-size: .82rem; font-family: var(--sans); max-width: 100%; }
.audio-sec { padding: .6rem 0; }
.audio-loading, .audio-empty { color: var(--rail-ink-soft); font-size: .88rem; line-height: 1.55; padding: 1rem 0; }
.audio-empty strong { color: var(--paper); }
.audio-kick { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }
.audio-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.audio-grow { flex: 1 1 auto; }
.audio-filters { display: flex; gap: .4rem; flex-wrap: wrap; }
.audio-dirty { font-size: .78rem; color: var(--gate); min-width: 3.5rem; text-align: right; }
.audio-chsel { font-size: .82rem; color: var(--rail-ink-soft); display: inline-flex; align-items: center; gap: .4rem; }
.audio-player { width: 100%; height: 2rem; margin-top: .4rem; }

/* cast board */
.audio-cast-narr { background: var(--rail); border: 1px solid var(--rail-line); border-radius: 10px; padding: .7rem .8rem; margin: .6rem 0; }
.audio-cast-role { font-size: .82rem; color: var(--accent-hi); font-weight: 600; margin-bottom: .5rem; }
.audio-cast-rows { display: flex; flex-direction: column; gap: .5rem; }
.audio-cast-row { border: 1px solid var(--rail-line); border-radius: 10px; padding: .6rem .8rem; }
.audio-cast-row.absorbed { opacity: .72; }
.audio-cast-who { display: flex; align-items: center; gap: .5rem; margin-bottom: .45rem; flex-wrap: wrap; }
.audio-spk { color: var(--paper); font-weight: 600; font-size: .92rem; }
.audio-cast-ctl { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.audio-cast-ctl .audio-voice { flex: 1 1 14rem; min-width: 9rem; }
.audio-absorb { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--rail-ink-soft); cursor: pointer; }
.audio-absorb input, .audio-scene input { accent-color: var(--accent); }
.audio-chip {
  display: inline-flex; align-items: center; gap: .25rem; border: 1px solid var(--rail-line); background: var(--rail);
  color: var(--rail-ink); border-radius: 999px; padding: .15rem .55rem; font-size: .74rem; cursor: pointer; font-family: var(--sans);
}
.audio-chip.cx { color: var(--accent-hi); }
.audio-chip:hover { border-color: var(--accent); }
.audio-chip.muted { color: var(--rail-ink-soft); background: transparent; cursor: default; }
.audio-chip.spk { color: var(--paper); font-weight: 600; }
.audio-chip.cue { color: var(--gate); }
.audio-chip.cue.add { color: var(--rail-ink-soft); border-style: dashed; }

/* segments gate */
.audio-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin: .3rem 0 .7rem; font-size: .76rem; color: var(--rail-ink-soft); }
.audio-leg { display: inline-flex; align-items: center; gap: .35rem; }
.audio-dot { width: .6rem; height: .6rem; border-radius: 50%; flex: none; background: var(--rail-ink-soft); }
.audio-dot.pending { background: #8b8790; }
.audio-dot.cached { background: #6fbf73; }
.audio-dot.stale { background: var(--gate); }
.audio-cards { display: flex; flex-direction: column; gap: .55rem; }
.audio-card { border: 1px solid var(--rail-line); border-radius: 10px; padding: .6rem .8rem; background: var(--rail); }
.audio-card.status-stale { border-left: 3px solid var(--gate); }
.audio-card.status-cached { border-left: 3px solid #6fbf73; }
.audio-card-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .4rem; }
.audio-scene { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; color: var(--rail-ink-soft); cursor: pointer; }
.audio-chars { font-size: .74rem; color: var(--rail-ink-soft); font-variant-numeric: tabular-nums; }
.audio-card-text { font-family: var(--serif); font-size: .95rem; line-height: 1.5; color: var(--paper); white-space: pre-wrap; }
.audio-card-act { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: .5rem; }
.audio-card-act .ghost-btn { padding: .3rem .7rem; font-size: .78rem; }
.audio-card-act .audio-slot { flex: 1 1 12rem; min-width: 8rem; }
.audio-cue-edit { display: inline-flex; gap: .35rem; align-items: center; }
.audio-cue-in { width: 12rem; max-width: 55vw; font-size: .8rem; }
.audio-cue-save { padding: .25rem .6rem; font-size: .76rem; }
.audio-split { margin: .5rem 0; border: 1px dashed var(--rail-line); border-radius: 8px; padding: .55rem; }
.audio-split-txt { width: 100%; min-height: 5rem; background: var(--rail-2); border: 1px solid var(--rail-line); color: var(--paper); border-radius: 6px; padding: .5rem; font-family: var(--serif); font-size: .9rem; line-height: 1.5; resize: vertical; }
.audio-split-act { display: flex; gap: .5rem; margin-top: .5rem; }
.audio-split-go { padding: .3rem .8rem; font-size: .8rem; }
.audio-job { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--accent-hi); background: #33323b; border: 1px solid var(--rail-line); border-radius: 8px; padding: .45rem .7rem; margin: .4rem 0; text-transform: capitalize; }

/* render & deliver */
.audio-block { border: 1px solid var(--rail-line); border-radius: 10px; padding: .8rem; margin: .7rem 0; }
.audio-block-h { font-family: var(--serif); font-size: 1.02rem; color: var(--paper); margin-bottom: .55rem; }
.audio-est-line { font-size: .95rem; color: var(--rail-ink); margin-bottom: .2rem; }
.audio-cost { color: var(--accent-hi); }
.audio-meter { margin: .7rem 0 .3rem; }
.audio-actrow { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .7rem; }
.audio-tracks { display: flex; flex-direction: column; gap: .6rem; }
.audio-track { border: 1px solid var(--rail-line); border-radius: 8px; padding: .55rem .7rem; background: var(--rail); }
.audio-track-h { font-size: .84rem; color: var(--paper); font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.audio-track .audio-restitch { margin-top: .4rem; padding: .3rem .7rem; font-size: .78rem; }
.audio-badge { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; border-radius: 4px; padding: .05rem .35rem; }
.audio-badge.stale { background: var(--gate-bg); color: #7a5410; }
.audio-badge.speed { background: #2b3a44; color: var(--accent-hi); text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* narration pace — the narrator speed curve (§Phase 12) */
.audio-pace-modes { display: inline-flex; gap: 0; border: 1px solid var(--rail-line); border-radius: 8px; overflow: hidden; margin: .2rem 0 .6rem; }
.audio-pace-mode { background: transparent; border: 0; color: var(--rail-ink); font-size: .8rem; padding: .35rem .8rem; cursor: pointer; font-family: var(--sans); }
.audio-pace-mode + .audio-pace-mode { border-left: 1px solid var(--rail-line); }
.audio-pace-mode:hover { color: var(--paper); }
.audio-pace-mode.active { background: var(--accent); color: var(--paper); }
.audio-pace-fixed { display: flex; align-items: center; gap: .7rem; margin-bottom: .3rem; }
.audio-pace-fixed input[type=range] { flex: 1; min-width: 8rem; max-width: 22rem; accent-color: var(--accent-hi); }
.audio-pace-val { font-variant-numeric: tabular-nums; color: var(--accent-hi); font-weight: 600; min-width: 3.2rem; }
.audio-pace-curve { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .5rem; }
.audio-pace-row { display: flex; align-items: center; gap: .6rem; }
.audio-pace-lab { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--rail-ink); }
.audio-pace-ch, .audio-pace-sp { width: 4.2rem; background: var(--rail); border: 1px solid var(--rail-line); border-radius: 6px; color: var(--paper); padding: .25rem .4rem; font-variant-numeric: tabular-nums; }
.audio-pace-del { padding: .2rem .5rem; font-size: .8rem; line-height: 1; }
.audio-pace-add { padding: .3rem .7rem; font-size: .8rem; }
.audio-pace-help { margin-top: .5rem; font-style: italic; }

/* ---------- chapter tree: parts, drag reorder, per-chapter menu ---------- */
.part-group { margin: .1rem 0 .3rem; }
.part-head { display: flex; align-items: center; gap: .25rem; padding: .35rem .35rem .2rem .55rem; }
.part-toggle {
  background: transparent; border: 0; color: var(--rail-ink-soft); cursor: pointer; font-size: .7rem;
  width: 1rem; height: 1rem; line-height: 1; padding: 0; flex: none;
}
.part-toggle:hover { color: var(--paper); }
.part-name {
  flex: 1; min-width: 0; text-align: left; background: transparent; border: 0; color: var(--accent-hi);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; cursor: pointer;
  font-family: var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0;
}
.part-name:hover { color: var(--paper); }
.part-count {
  flex: none; font-size: .64rem; color: var(--rail-ink-soft); background: #33323b; border-radius: 999px;
  padding: .05rem .4rem; font-variant-numeric: tabular-nums;
}
.part-rows { padding-left: .35rem; }
.ch-menu {
  flex: none; align-self: center; margin-right: .3rem; width: 1.35rem; height: 1.35rem; border: 0; border-radius: 4px;
  background: transparent; color: var(--rail-ink-soft); font-size: 1rem; line-height: 1; cursor: pointer;
}
.chapter-row:hover .ch-menu, .ch-menu:focus-visible { color: var(--paper); background: #3f3e48; }
.chapter-row.dragging { opacity: .45; }
.chapter-row.drag-over { box-shadow: inset 0 2px 0 var(--accent-hi); }
.chapter-row[draggable="true"] .chapter-item { cursor: grab; }

/* per-chapter (and per-book) action menu — stacked buttons inside the shared modal card */
.cm-title { color: var(--ink-soft); font-size: .8rem; margin-bottom: .6rem; font-weight: 600; }
.cm-menu { display: flex; flex-direction: column; gap: .35rem; }
.cm-item {
  text-align: left; background: #f6f3ec; border: 1px solid var(--paper-edge); color: var(--ink);
  border-radius: 7px; padding: .55rem .75rem; font-size: .9rem; cursor: pointer; font-family: var(--sans);
}
.cm-item:hover { border-color: var(--accent); background: #fff; }
.cm-item.danger { color: var(--hard); }
.cm-item.danger:hover { border-color: #dbb0a4; background: #f6e6e1; }

/* ---------- find & replace ---------- */
.find-panel {
  position: fixed; z-index: 47; top: 92px; right: 1.4rem; width: min(24rem, 94vw);
  background: var(--rail); border: 1px solid var(--rail-line); border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5); padding: .6rem; display: flex; flex-direction: column; gap: .45rem;
}
.fp-row { display: flex; align-items: center; gap: .35rem; }
.fp-input {
  flex: 1; min-width: 0; background: var(--rail-2); border: 1px solid var(--rail-line); color: var(--rail-ink);
  border-radius: 6px; padding: .4rem .55rem; font-size: .86rem; font-family: var(--sans);
}
.fp-input:focus { outline: none; border-color: var(--accent); }
.fp-count { font-size: .74rem; color: var(--rail-ink-soft); min-width: 2.6rem; text-align: center; font-variant-numeric: tabular-nums; flex: none; }
.fp-nav {
  flex: none; width: 1.7rem; height: 1.7rem; border: 1px solid var(--rail-line); border-radius: 6px;
  background: transparent; color: var(--rail-ink); font-size: .95rem; line-height: 1; cursor: pointer;
}
.fp-nav:hover:not(:disabled) { color: var(--paper); border-color: var(--accent); }
.fp-nav:disabled { opacity: .35; cursor: default; }
.fp-btn {
  flex: none; background: transparent; border: 1px solid var(--rail-line); color: var(--rail-ink);
  border-radius: 6px; padding: .4rem .6rem; font-size: .8rem; cursor: pointer; font-family: var(--sans);
}
.fp-btn:hover:not(:disabled) { color: var(--paper); border-color: var(--accent); }
.fp-btn:disabled { opacity: .4; cursor: default; }
.fp-opts { flex-wrap: wrap; gap: .6rem; font-size: .78rem; color: var(--rail-ink-soft); }
.fp-tog { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.fp-scope { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; }
.fp-scope .ch-select { padding: .2rem .3rem; font-size: .78rem; }
.fp-results { font-size: .76rem; color: var(--rail-ink-soft); max-height: 9rem; overflow-y: auto; line-height: 1.5; }
.fp-results div { padding: .05rem 0; }
mark.rq-hl { background: #f4d675; color: #23201c; border-radius: 2px; padding: 0 .02em; }
mark.rq-hl.active { background: #e8973c; color: #fff; box-shadow: 0 0 0 1px #b96f24; }
mark.rq-insight { background: #bfe3c0; color: #1c2a1c; border-radius: 2px; padding: 0 .02em; box-shadow: 0 0 0 1px #86bd88; }

/* ---------- Phase 10a: craft insights drawer ---------- */
.insights-panel, .companion-panel {
  position: fixed; z-index: 46; top: 56px; right: 1rem; width: min(30rem, 94vw); max-height: 86vh;
  display: flex; flex-direction: column; background: var(--rail-2); border: 1px solid var(--rail-line);
  border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,.55); overflow: hidden;
}
.ip-head, .cmp-head {
  display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem;
  border-bottom: 1px solid var(--rail-line); color: var(--paper); font-size: .98rem;
}
.ip-head > span:first-child, .cmp-head > span:first-child { font-weight: 600; }
.ins-scope, .cmp-scope { display: inline-flex; gap: .2rem; margin-left: auto; background: var(--rail); border: 1px solid var(--rail-line); border-radius: 8px; padding: .15rem; }
.ins-scope-b, .cmp-scope-b {
  border: 0; background: transparent; color: var(--rail-ink-soft); font-family: var(--sans);
  font-size: .76rem; padding: .25rem .5rem; border-radius: 6px; cursor: pointer;
}
.ins-scope-b.active, .cmp-scope-b.active { background: var(--accent); color: #06110f; font-weight: 600; }
.ins-scope-b:disabled, .cmp-scope-b:disabled { opacity: .4; cursor: not-allowed; }
.cmp-head .cmp-scope { margin-left: auto; }
.cmp-head-btns { display: inline-flex; gap: .2rem; }
.ip-tabs { display: flex; gap: .3rem; padding: .5rem 1rem 0; border-bottom: 1px solid var(--rail-line); }
.ip-tab {
  border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--rail-ink-soft);
  font-family: var(--sans); font-size: .84rem; padding: .35rem .5rem .5rem; cursor: pointer;
}
.ip-tab:hover { color: var(--paper); }
.ip-tab.active { color: var(--accent-hi); border-bottom-color: var(--accent); font-weight: 600; }
.ip-body { overflow-y: auto; padding: .9rem 1rem 1.2rem; }
.ins-loading, .ins-empty, .cmp-loading, .cmp-empty { color: var(--rail-ink-soft); font-size: .88rem; padding: 1.2rem .2rem; text-align: center; line-height: 1.5; }
.ins-card { background: var(--rail); border: 1px solid var(--rail-line); border-radius: 10px; padding: .8rem .9rem; margin-bottom: .8rem; }
.ins-h { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--rail-ink-soft); margin-bottom: .6rem; }
.ins-note { font-size: .78rem; color: var(--rail-ink-soft); margin: -.2rem 0 .8rem; font-style: italic; }
.ins-desc { font-size: .86rem; color: var(--rail-ink); line-height: 1.5; margin: 0 0 .8rem; }
.ins-clean { color: #8ec793; }
.ins-sub { font-size: .8rem; color: var(--rail-ink-soft); margin-bottom: .5rem; font-variant-numeric: tabular-nums; }
.ins-sub b, .ins-srow-r b { color: var(--paper); }
/* counters */
.ins-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.6rem, 1fr)); gap: .5rem; }
.ins-tile { text-align: center; background: var(--rail-2); border: 1px solid var(--rail-line); border-radius: 8px; padding: .5rem .3rem; }
.ins-tile-n { font-family: var(--serif); font-size: 1.25rem; color: var(--paper); font-variant-numeric: tabular-nums; }
.ins-tile-l { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--rail-ink-soft); margin-top: .15rem; }
/* goal bar */
.ins-goal { margin-top: .8rem; }
.ins-goal-top { display: flex; justify-content: space-between; font-size: .78rem; color: var(--rail-ink-soft); margin-bottom: .3rem; }
.ins-bar { height: .5rem; background: var(--rail-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--rail-line); }
.ins-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-hi)); border-radius: 999px; transition: width .3s ease; }
/* readability */
.ins-two { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .5rem; }
.ins-stat { background: var(--rail-2); border: 1px solid var(--rail-line); border-radius: 8px; padding: .5rem .6rem; }
.ins-stat-n { font-family: var(--serif); font-size: 1.4rem; color: var(--paper); }
.ins-stat-l { font-size: .72rem; color: var(--rail-ink-soft); }
.ins-stat-s { font-size: .74rem; color: var(--accent-hi); margin-top: .15rem; }
/* sentence histogram */
.ins-hist { display: flex; flex-direction: column; gap: .3rem; margin: .5rem 0; }
.ins-hbar-row { display: flex; align-items: center; gap: .5rem; font-size: .76rem; color: var(--rail-ink-soft); }
.ins-hbar-l { width: 3.2rem; text-align: right; font-variant-numeric: tabular-nums; }
.ins-hbar-track { flex: 1; height: .62rem; background: var(--rail-2); border-radius: 4px; overflow: hidden; }
.ins-hbar-fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.ins-hbar-c { width: 2rem; font-variant-numeric: tabular-nums; }
.ins-flag { font-size: .8rem; color: var(--gate, #c1852a); background: #322f2a; border-left: 2px solid var(--gate, #c1852a); border-radius: 4px; padding: .35rem .5rem; margin: .5rem 0; line-height: 1.4; }
/* findings */
.ins-flabel { font-size: .74rem; color: var(--rail-ink-soft); margin: .7rem 0 .35rem; display: flex; align-items: center; gap: .4rem; }
.ins-count { background: var(--rail-2); border-radius: 999px; padding: 0 .4rem; font-size: .68rem; }
.ins-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.ins-chip {
  font-family: var(--sans); font-size: .78rem; color: var(--rail-ink); background: var(--rail-2);
  border: 1px solid var(--rail-line); border-radius: 999px; padding: .2rem .55rem; cursor: default;
}
.ins-chip b { color: var(--accent-hi); }
.ins-frows { display: flex; flex-direction: column; gap: .3rem; }
.ins-find {
  text-align: left; font-family: var(--sans); font-size: .8rem; color: var(--rail-ink); line-height: 1.4;
  background: var(--rail-2); border: 1px solid var(--rail-line); border-radius: 6px; padding: .35rem .5rem;
  cursor: default; width: 100%;
}
.ins-find b { color: var(--accent-hi); font-variant-numeric: tabular-nums; }
button.ins-hl { cursor: pointer; transition: border-color .12s, background .12s; }
button.ins-hl:hover { border-color: var(--accent); color: var(--paper); }
button.ins-hl.active { border-color: var(--accent); background: #2a4030; color: var(--paper); }
/* style density rows */
.ins-srow { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left;
  font-family: var(--sans); font-size: .84rem; color: var(--rail-ink); background: transparent;
  border: 1px solid transparent; border-radius: 6px; padding: .35rem .5rem; }
button.ins-srow { cursor: pointer; }
button.ins-srow:hover { background: var(--rail-2); border-color: var(--rail-line); }
button.ins-srow.active { background: #2a4030; border-color: var(--accent); }
.ins-srow-r { color: var(--rail-ink-soft); font-variant-numeric: tabular-nums; }
.ins-refresh { margin-top: .6rem; }
/* tone arc */
.tone-spark { display: flex; align-items: flex-end; gap: .2rem; height: 3.2rem; padding: .3rem 0; margin-bottom: .8rem; border-bottom: 1px solid var(--rail-line); }
.tone-spark-bar { flex: 1; min-width: .2rem; background: linear-gradient(180deg, var(--accent-hi), var(--accent)); border-radius: 2px 2px 0 0; min-height: 6%; }
.tone-list { display: flex; flex-direction: column; gap: .55rem; }
.tone-row { border-left: 2px solid var(--accent); padding: .1rem 0 .1rem .6rem; }
.tone-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.tone-seg { font-size: .84rem; color: var(--paper); font-weight: 600; }
.tone-emo { font-size: .76rem; color: var(--accent-hi); text-transform: capitalize; white-space: nowrap; }
.tone-dots { display: flex; gap: .2rem; margin: .25rem 0; }
.tone-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--rail-2); border: 1px solid var(--rail-line); }
.tone-dot.on { background: var(--accent); border-color: var(--accent); }
.tone-note { font-size: .8rem; color: var(--rail-ink-soft); line-height: 1.45; }
/* slop findings */
.slop-find { border: 1px solid var(--rail-line); border-radius: 8px; padding: .6rem .7rem; margin-bottom: .6rem; background: var(--rail-2); }
.slop-top { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .35rem; }
.slop-kind { flex: none; font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  background: #3a2f2a; color: #d69a6a; border-radius: 4px; padding: .12rem .4rem; margin-top: .1rem; }
.slop-locate { flex: 1; text-align: left; background: transparent; border: 0; color: var(--paper);
  font-family: var(--serif); font-size: .9rem; line-height: 1.4; cursor: pointer; padding: 0; }
.slop-locate:hover { color: var(--accent-hi); text-decoration: underline; }
.slop-why { font-size: .8rem; color: var(--rail-ink-soft); line-height: 1.45; margin-bottom: .35rem; }
.slop-sugg { font-size: .82rem; color: var(--rail-ink); line-height: 1.45; background: var(--rail); border-radius: 6px; padding: .35rem .5rem; margin-bottom: .5rem; }
.slop-sugg-l { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-hi); font-weight: 700; margin-right: .3rem; }
.slop-actions { text-align: right; }
.slop-actions .accent-btn { padding: .3rem .7rem; font-size: .8rem; }

/* ---------- Phase 10b: author companion drawer ---------- */
.cmp-note { font-size: .76rem; color: var(--rail-ink-soft); font-style: italic; padding: .5rem 1rem; border-bottom: 1px solid var(--rail-line); }
.cmp-log { flex: 1; overflow-y: auto; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .7rem; min-height: 8rem; }
.cmp-msg { max-width: 92%; }
.cmp-msg.cmp-user { align-self: flex-end; }
.cmp-msg.cmp-ai { align-self: flex-start; }
.cmp-bubble { border-radius: 10px; padding: .5rem .7rem; font-size: .86rem; line-height: 1.5; }
.cmp-user .cmp-bubble { background: var(--accent); color: #06110f; border-bottom-right-radius: 3px; }
.cmp-ai .cmp-bubble { background: var(--rail); color: var(--rail-ink); border: 1px solid var(--rail-line); border-bottom-left-radius: 3px; }
.cmp-bubble p { margin: 0 0 .5rem; }
.cmp-bubble p:last-child { margin-bottom: 0; }
.cmp-bubble strong { color: var(--paper); }
.cmp-user .cmp-bubble strong { color: #06110f; }
.cmp-chips { font-size: .68rem; color: var(--rail-ink-soft); margin: .25rem 0 0 .2rem; }
.cmp-chip { color: var(--accent-hi); }
.cmp-typing { display: inline-flex; gap: .25rem; }
.cmp-typing span { width: .4rem; height: .4rem; border-radius: 50%; background: var(--rail-ink-soft); animation: cmp-bounce 1.2s infinite ease-in-out; }
.cmp-typing span:nth-child(2) { animation-delay: .18s; }
.cmp-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes cmp-bounce { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-.2rem); } }
.cmp-compose { display: flex; gap: .5rem; padding: .7rem 1rem; border-top: 1px solid var(--rail-line); align-items: flex-end; }
.cmp-input { flex: 1; resize: none; background: var(--rail); color: var(--rail-ink); border: 1px solid var(--rail-line);
  border-radius: 8px; padding: .5rem .6rem; font-size: .86rem; line-height: 1.45; font-family: var(--sans); max-height: 8rem; }
.cmp-input:focus { outline: none; border-color: var(--accent); }
.cmp-send { flex: none; padding: .5rem .9rem; }
.cmp-send:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- library: search, trash view, per-book actions ---------- */
.lib-controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.6rem; }
.lib-search {
  flex: 1; min-width: 12rem; background: var(--rail-2); border: 1px solid var(--rail-line); color: var(--rail-ink);
  border-radius: 8px; padding: .55rem .8rem; font-size: .92rem; font-family: var(--sans);
}
.lib-search:focus { outline: none; border-color: var(--accent); }
.lib-tabs { display: inline-flex; gap: .2rem; background: var(--rail-2); border: 1px solid var(--rail-line); border-radius: 8px; padding: .2rem; }
.lib-tab { background: transparent; border: 0; color: var(--rail-ink-soft); border-radius: 6px; padding: .35rem .8rem; font-size: .84rem; cursor: pointer; font-family: var(--sans); }
.lib-tab:hover { color: var(--paper); }
.lib-tab.active { background: var(--accent); color: #06110f; font-weight: 600; }
.lib-empty { grid-column: 1 / -1; color: var(--rail-ink-soft); font-size: .95rem; padding: 1.5rem .2rem; }
.book-card .bc-open {
  display: block; width: 100%; text-align: left; background: transparent; border: 0; color: inherit;
  padding: 0; font-family: var(--sans); cursor: pointer;
}
.book-card { position: relative; }
.bc-menu {
  position: absolute; top: .55rem; right: .55rem; width: 1.7rem; height: 1.7rem; border: 0; border-radius: 6px;
  background: transparent; color: var(--rail-ink-soft); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.book-card:hover .bc-menu, .bc-menu:focus-visible { color: var(--paper); background: #3f3e48; }
.trash-card { display: block; }
.trash-card .bt { font-family: var(--serif); font-size: 1.25rem; line-height: 1.15; color: var(--paper); }
.trash-card .bmeta { margin: .6rem 0 .8rem; display: flex; gap: .5rem; font-size: .8rem; }
.bc-trash-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.lib-mini { background: transparent; border: 1px solid var(--rail-line); color: var(--rail-ink); border-radius: 6px; padding: .35rem .7rem; font-size: .8rem; cursor: pointer; font-family: var(--sans); }
.lib-mini.restore { color: var(--accent-hi); border-color: #33565a; }
.lib-mini.restore:hover { background: #26383a; }
.lib-mini.purge { color: #e08b7a; border-color: #6b3b34; }
.lib-mini.purge:hover { background: #3a2622; }

/* ---------- world panel: refine + bible versions ---------- */
.wp-refine { height: 5rem; margin-bottom: .4rem; }
.wp-refine-live { display: flex; align-items: center; gap: .4rem; color: var(--accent-hi); font-size: .8rem; margin: 0 0 .5rem; }
.wp-versions { display: flex; flex-direction: column; gap: .3rem; }
.wp-ver { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .5rem; background: var(--rail); border: 1px solid var(--rail-line); border-radius: 6px; }
.wp-ver-when { font-size: .8rem; color: var(--rail-ink-soft); font-variant-numeric: tabular-nums; }
.wp-ver-cur { color: var(--accent-hi); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; margin-left: .3rem; }

/* ---------- in-chapter illustrations (R6) ---------- */
.editor img.ill {
  display: block; max-width: 100%; height: auto; margin: 1em auto; border-radius: 4px;
  box-shadow: 0 1px 0 var(--paper-edge), 0 6px 20px rgba(0,0,0,.14);
}
.ill-missing {
  display: inline-flex; align-items: center; gap: .3rem; padding: .2em .5em; margin: 0 .1em;
  border: 1px dashed var(--ink-faint); border-radius: 5px; background: #f2efe8;
  color: var(--ink-soft); font-family: var(--sans); font-size: .82em; user-select: none;
}
.pub-composed { margin: .3rem 0 .8rem; }
.pub-composed-img {
  display: block; width: min(16rem, 70%); aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--rail-line); background: var(--rail); margin-top: .4rem;
}

/* ---------- insert-image dialog (R6) ---------- */
.image-panel {
  position: fixed; z-index: 50; top: 8vh; left: 50%; transform: translateX(-50%);
  width: min(34rem, 94vw); max-height: 84vh; display: flex; flex-direction: column;
  background: var(--rail-2); border: 1px solid var(--rail-line); border-radius: 12px;
  box-shadow: 0 18px 56px rgba(0,0,0,.6); overflow: hidden;
}
.im-head {
  display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem;
  border-bottom: 1px solid var(--rail-line); color: var(--paper); font-family: var(--serif); font-size: 1.1rem;
}
.im-tabs { display: flex; gap: .3rem; padding: .6rem 1rem 0; }
.im-tab { background: transparent; border: 1px solid var(--rail-line); color: var(--rail-ink-soft); border-radius: 6px 6px 0 0; padding: .35rem .75rem; font-size: .82rem; cursor: pointer; font-family: var(--sans); }
.im-tab:hover { color: var(--paper); }
.im-tab.active { background: var(--accent); border-color: var(--accent); color: #06110f; }
.im-body { overflow-y: auto; padding: 1rem; }
.im-pane { display: flex; flex-direction: column; gap: .7rem; }
.im-drop {
  display: block; text-align: center; padding: 1.6rem 1rem; border: 1px dashed var(--rail-line);
  border-radius: 8px; color: var(--rail-ink-soft); font-size: .86rem; cursor: pointer; background: var(--rail);
}
.im-drop:hover { border-color: var(--accent); color: var(--paper); }
.im-actions { display: flex; justify-content: flex-end; }
.image-panel .ghost-btn, .image-panel .accent-btn { font-family: var(--sans); }
.image-panel button:disabled { opacity: .45; cursor: default; }
.im-lib-list { display: flex; flex-direction: column; gap: .6rem; }
.im-lib-item { display: flex; gap: .7rem; align-items: center; padding: .5rem; border: 1px solid var(--rail-line); border-radius: 8px; background: var(--rail); }
.im-lib-thumb { width: 3.4rem; height: 3.4rem; object-fit: cover; border-radius: 6px; border: 1px solid var(--rail-line); flex: none; background: var(--rail-2); }
.im-lib-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.im-lib-cap { color: var(--rail-ink); font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-lib-actions { display: flex; gap: .4rem; }
.image-panel .fp-btn { color: var(--accent-hi); }

/* ---------- design studio (R6) ---------- */
.design-panel {
  position: fixed; z-index: 49; top: 3vh; left: 50%; transform: translateX(-50%);
  width: min(56rem, 96vw); max-height: 94vh; display: flex; flex-direction: column;
  background: var(--rail-2); border: 1px solid var(--rail-line); border-radius: 12px;
  box-shadow: 0 18px 56px rgba(0,0,0,.6); overflow: hidden;
}
.dz-headright { display: flex; align-items: center; gap: .8rem; font-family: var(--sans); }
.dz-dirty { font-size: .78rem; color: var(--rail-ink-soft); }
.dz-dirty.on { color: var(--gate, #c1852a); }
.design-panel .accent-btn { font-family: var(--sans); }
.design-panel button:disabled { opacity: .45; cursor: default; }
.dz-body { overflow-y: auto; padding: .4rem 1.1rem 1.4rem; }
.dz-sec { padding: 1rem 0; border-bottom: 1px solid var(--rail-line); }
.dz-sec:last-child { border-bottom: 0; }
.dz-sec-h { font-family: var(--serif); font-size: 1.05rem; color: var(--paper); margin-bottom: .8rem; }
.dz-field { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; color: var(--rail-ink); margin-bottom: .8rem; }
.dz-check { display: flex; align-items: center; gap: .45rem; font-size: .84rem; color: var(--rail-ink); margin-bottom: .8rem; cursor: pointer; }
.dz-check input, .dz-fm-en input { accent-color: var(--accent); }
.dz-val { color: var(--accent-hi); font-variant-numeric: tabular-nums; }
.dz-in, .dz-text {
  background: var(--rail); border: 1px solid var(--rail-line); color: var(--rail-ink); border-radius: 6px;
  padding: .45rem .55rem; font-size: .86rem; font-family: var(--sans); width: 100%;
}
.dz-in:focus, .dz-text:focus, .pub-font-sel:focus { outline: none; border-color: var(--accent); }
.dz-text { min-height: 6rem; line-height: 1.5; resize: vertical; }
.dz-text-sm { min-height: 3.5rem; }
.dz-color { width: 3rem; height: 2rem; padding: 0; border: 1px solid var(--rail-line); border-radius: 6px; background: var(--rail); cursor: pointer; }
.dz-inline { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .8rem; }
.dz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.design-panel .pub-font-sel { width: 100%; }
.design-panel input[type=range] { accent-color: var(--accent); width: 100%; }
/* cover designer: preview beside the controls */
.dz-cover { display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr; gap: 1.2rem; align-items: start; }
.dz-preview { position: sticky; top: 0; }
.dz-preview-img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: contain; border-radius: 6px;
  border: 1px solid var(--rail-line); background: var(--rail); display: block;
}
.dz-controls { min-width: 0; }
/* front-matter designer rows */
.dz-fm { display: flex; flex-direction: column; gap: .5rem; }
.dz-fm-row { display: grid; grid-template-columns: 1fr auto; gap: .3rem .6rem; align-items: center; padding: .5rem .6rem; border: 1px solid var(--rail-line); border-radius: 8px; background: var(--rail); }
.dz-fm-en { display: flex; align-items: center; gap: .45rem; font-size: .86rem; color: var(--rail-ink); cursor: pointer; }
.dz-fm-move { display: inline-flex; gap: .25rem; }
.dz-fm-text { grid-column: 1 / -1; background: var(--rail-2); border: 1px solid var(--rail-line); color: var(--rail-ink); border-radius: 6px; padding: .4rem .5rem; font-size: .84rem; font-family: var(--sans); min-height: 3rem; line-height: 1.45; resize: vertical; }
.dz-fm-text:focus { outline: none; border-color: var(--accent); }
.dz-fm-auto { grid-column: 1 / -1; font-size: .76rem; color: var(--rail-ink-soft); font-style: italic; }

/* ---------- toast ---------- */
.toast {
  position: fixed; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 60;
  background: var(--ink); color: var(--paper); padding: .6rem 1rem; border-radius: 8px;
  font-size: .85rem; box-shadow: 0 8px 28px rgba(0,0,0,.4); max-width: 90vw;
}
.toast.err { background: var(--hard); }

@media (max-width: 860px) {
  .workspace { grid-template-columns: 1fr; }
  .rail { display: none; }
  .ch-jump { display: inline-flex; }        /* the rail is hidden — surface chapter nav in the top bar */
  .book-title { display: none; }
  .editor-toolbar .tb-hint { display: none; }
  .editor-wrap { padding: 1.2rem .8rem 5rem; }
  .publish-panel { top: 0; max-height: 100vh; border-radius: 0; width: 100vw; }
  .pub-frame { height: 52vh; }
  .find-panel { top: 92px; left: .5rem; right: .5rem; width: auto; }
  .design-panel { top: 0; max-height: 100vh; border-radius: 0; width: 100vw; }
  .audio-panel { top: 0; max-height: 100vh; border-radius: 0; width: 100vw; transform: none; left: 0; }
  .audio-cast-ctl, .audio-card-act { gap: .4rem; }
  .audio-legend { gap: .5rem 1rem; }
  .dz-cover { grid-template-columns: 1fr; }
  .dz-preview { position: static; }
  .dz-preview-img { width: min(12rem, 60%); margin: 0 auto; }
  .dz-grid { grid-template-columns: 1fr; }
  .image-panel { top: 0; max-height: 100vh; border-radius: 0; width: 100vw; transform: none; left: 0; }
  .insights-panel, .companion-panel { top: 0; right: 0; left: 0; width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
  .companion-panel .cmp-log { min-height: 6rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- admin console (R8b) ---------- */
.admin {
  min-height: 100%;
  background: radial-gradient(120% 80% at 50% -10%, #2c2b33 0%, var(--rail) 60%);
  padding: clamp(1.6rem, 5vw, 3rem) 1.5rem; overflow-y: auto;
}
.admin-inner { max-width: 72rem; margin: 0 auto; }
.admin h1 { font-family: var(--serif); color: var(--paper); font-weight: 500; font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 .3rem; }
.admin .sub { color: var(--rail-ink-soft); margin: 0 0 1.6rem; font-size: 1rem; }
.lib-top-right { display: inline-flex; align-items: center; gap: 1rem; }
.lib-admin { border: 1px solid var(--rail-line); border-radius: 6px; padding: .3rem .7rem; color: var(--accent-hi); }
.lib-admin:hover { background: #26383a; color: var(--paper); }

.ad-tabs { display: inline-flex; flex-wrap: wrap; gap: .2rem; background: var(--rail-2); border: 1px solid var(--rail-line); border-radius: 8px; padding: .2rem; margin-bottom: 1.5rem; }
.ad-tab { background: transparent; border: 0; color: var(--rail-ink-soft); border-radius: 6px; padding: .4rem .9rem; font-size: .86rem; cursor: pointer; font-family: var(--sans); }
.ad-tab:hover { color: var(--paper); }
.ad-tab.active { background: var(--accent); color: #06110f; font-weight: 600; }
.ad-body { min-height: 12rem; }
.ad-loading, .ad-empty { color: var(--rail-ink-soft); font-size: .95rem; padding: 1.4rem .2rem; }

/* overview cards */
.ad-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.ad-card { background: var(--rail-2); border: 1px solid var(--rail-line); border-radius: 12px; padding: 1.1rem 1.2rem; }
.ad-card-h { color: var(--rail-ink-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.ad-card-n { color: var(--paper); font-family: var(--serif); font-size: 2rem; line-height: 1.1; margin: .35rem 0 .5rem; font-variant-numeric: tabular-nums; }
.ad-card-sub { color: var(--rail-ink-soft); font-size: .8rem; margin-top: .3rem; }
.ad-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ad-chip { background: var(--rail); border: 1px solid var(--rail-line); color: var(--rail-ink); border-radius: 999px; padding: .12rem .55rem; font-size: .76rem; }
.ad-chip b { color: var(--paper); font-weight: 600; }
.ad-muted { color: var(--rail-ink-soft); font-size: .78rem; }
.ad-meter { height: .5rem; background: var(--rail); border: 1px solid var(--rail-line); border-radius: 999px; overflow: hidden; margin-top: .4rem; }
.ad-meter-fill { height: 100%; background: var(--accent); }

/* toolbars + filters */
.ad-toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ad-search { flex: 1; min-width: 12rem; background: var(--rail-2); border: 1px solid var(--rail-line); color: var(--rail-ink); border-radius: 8px; padding: .55rem .8rem; font-size: .92rem; font-family: var(--sans); }
.ad-search:focus { outline: none; border-color: var(--accent); }
.ad-filter { color: var(--rail-ink-soft); font-size: .84rem; display: inline-flex; align-items: center; gap: .45rem; }
.ad-count { color: var(--rail-ink); font-size: .9rem; }
.ad-refresh-note { color: var(--rail-ink-soft); font-size: .78rem; margin-left: auto; font-variant-numeric: tabular-nums; }
.ad-mini-select { background: var(--rail-2); border: 1px solid var(--rail-line); color: var(--rail-ink); border-radius: 6px; padding: .3rem .5rem; font-size: .82rem; font-family: var(--sans); }
.ad-mini-select:focus { outline: none; border-color: var(--accent); }
.ad-mini-select:disabled { opacity: .5; }

/* tables */
.ad-tablewrap { overflow-x: auto; border: 1px solid var(--rail-line); border-radius: 10px; }
.ad-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.ad-table th, .ad-table td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--rail-line); white-space: nowrap; }
.ad-table thead th { color: var(--rail-ink-soft); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; background: var(--rail-2); position: sticky; top: 0; }
.ad-table tbody tr:last-child td { border-bottom: 0; }
.ad-table tbody tr:hover td { background: rgba(255,255,255,.02); }
.ad-table td { color: var(--rail-ink); }
.ad-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ad-table .num.neg { color: #e08b7a; }
.ad-email { color: var(--paper); }
.ad-slug { display: block; color: var(--rail-ink-soft); font-size: .74rem; }
.ad-msg { white-space: normal; max-width: 22rem; color: var(--rail-ink-soft); }
.ad-status { display: inline-block; border-radius: 999px; padding: .1rem .5rem; font-size: .74rem; border: 1px solid var(--rail-line); background: var(--rail); }
.ad-status-active, .ad-status-done, .ad-status-complete { color: #8ec793; border-color: #2f5033; background: #223626; }
.ad-status-running, .ad-status-queued { color: var(--accent-hi); border-color: #33565a; background: #26383a; }
.ad-status-failed { color: #e08b7a; border-color: #6b3b34; background: #3a2622; }
.ad-status-cancelled, .ad-status-suspended { color: var(--gate); border-color: var(--gate-line); background: #3a3320; }
.ad-status-erased { color: var(--rail-ink-soft); }
.ad-comp { display: inline-flex; gap: .3rem; align-items: center; }
.ad-comp-in { width: 6rem; background: var(--rail-2); border: 1px solid var(--rail-line); color: var(--rail-ink); border-radius: 6px; padding: .28rem .4rem; font-size: .8rem; font-family: var(--sans); }
.ad-comp-in:focus { outline: none; border-color: var(--accent); }

/* forms: pricing */
.ad-form { max-width: 34rem; }
.ad-h2 { font-family: var(--serif); color: var(--paper); font-weight: 500; font-size: 1.3rem; margin: 0 0 .3rem; }
.ad-form-note { color: var(--rail-ink-soft); font-size: .84rem; margin: 0 0 1rem; }
.ad-input-narrow { max-width: 12rem; }
.ad-preview { background: var(--rail-2); border: 1px solid var(--rail-line); border-radius: 10px; padding: .8rem 1rem; margin: 1.2rem 0; color: var(--rail-ink); font-size: .9rem; line-height: 1.7; }
.ad-preview-h { color: var(--rail-ink-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem; }
.ad-preview strong { color: var(--paper); }

/* P&L statement */
.ad-pnl { max-width: 30rem; border: 1px solid var(--rail-line); border-radius: 10px; overflow: hidden; margin-bottom: 1.6rem; }
.ad-pnl-row { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 1rem; color: var(--rail-ink); font-size: .92rem; border-bottom: 1px solid var(--rail-line); }
.ad-pnl-row:last-child { border-bottom: 0; }
.ad-pnl-row .num { font-variant-numeric: tabular-nums; color: var(--paper); }
.ad-pnl-total { background: var(--rail-2); font-weight: 600; }
.ad-pnl-total span { color: var(--paper); }

@media (max-width: 640px) {
  .ad-msg { max-width: 12rem; }
}

/* ---------- Phase S: series, sharing, read-only reader, premium models ---------- */

/* series chip on a library card + role/owner lines on shared cards */
.series-chip {
  display: inline-flex; align-items: center; gap: .25rem; font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; padding: .18rem .5rem; border-radius: 999px;
  background: #2f2b3a; color: #b7a6d6; border: 1px solid #453a5c; white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
.role-chip {
  display: inline-flex; align-items: center; font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: .16rem .45rem; border-radius: 4px; background: #26383a; color: var(--accent-hi);
  border: 1px solid #33565a;
}
.owner-line { color: var(--rail-ink-soft); font-size: .8rem; margin-top: .5rem; }

/* Phase 13: book-language chip (library card + workspace header) — shown only for non-English books. */
.lang-chip {
  display: inline-flex; align-items: center; font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; padding: .18rem .5rem; border-radius: 999px; white-space: nowrap;
  background: #26383a; color: var(--accent-hi); border: 1px solid #33565a;
}
/* Phase 11b: collection register chip (library card) + piece-count chip (workspace header). */
.coll-chip {
  display: inline-flex; align-items: center; font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; padding: .18rem .5rem; border-radius: 999px; white-space: nowrap;
  background: #3a3226; color: #d6b98a; border: 1px solid #5c4d33;
}
.pieces-chip { color: var(--rail-ink-soft); font-size: .78rem; white-space: nowrap; }
/* Phase 13b: casting-board language-filter hint. */
.audio-lang-hint { color: var(--rail-ink-soft); font-size: .8rem; margin: .1rem 0 .3rem; }

/* read-only reading badge in the workspace top bar */
.reading-badge {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; white-space: nowrap;
  padding: .2rem .5rem; border-radius: 999px; background: #2f2b3a; color: #b7a6d6; border: 1px solid #453a5c;
}
.topbar-share { color: var(--accent-hi); border-color: var(--rail-line); }
.topbar-share:hover { color: var(--paper); border-color: var(--accent); }

/* library: "Manage series" trigger sits with the search/tab controls */
.lib-series-btn {
  background: transparent; border: 1px solid var(--rail-line); color: var(--rail-ink-soft);
  border-radius: 8px; padding: .5rem .85rem; font-size: .86rem; cursor: pointer; font-family: var(--sans);
}
.lib-series-btn:hover { border-color: var(--accent); color: var(--paper); }

/* wider variant of the shared side-panel chrome (series manager) */
.rq-panel-wide { width: min(36rem, 95vw); }

/* series manager rows */
.sp-new { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.1rem; }
.sp-new .revise-instr, .sp-new textarea { width: 100%; }
.sp-series { border: 1px solid var(--rail-line); border-radius: 10px; padding: .7rem .8rem; margin-bottom: .7rem; background: var(--rail); }
.sp-series-top { display: flex; align-items: center; gap: .5rem; }
.sp-series-name { flex: 1; min-width: 0; color: var(--paper); font-size: .95rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-series-count { flex: none; font-size: .68rem; color: var(--rail-ink-soft); background: #33323b; border-radius: 999px; padding: .05rem .45rem; }
.sp-series-desc { color: var(--rail-ink-soft); font-size: .8rem; margin: .35rem 0 0; line-height: 1.4; }
.sp-series-actions { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .55rem; }
.sp-members { margin-top: .7rem; border-top: 1px solid var(--rail-line); padding-top: .6rem; }
.sp-member { display: flex; align-items: center; gap: .4rem; padding: .3rem .1rem; }
.sp-member-order { flex: none; width: 1.4rem; color: var(--rail-ink-soft); font-size: .74rem; font-variant-numeric: tabular-nums; text-align: right; }
.sp-member-name { flex: 1; min-width: 0; color: var(--rail-ink); font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-member-move { display: inline-flex; gap: .2rem; }
.sp-add-row { display: flex; gap: .4rem; margin-top: .5rem; align-items: center; flex-wrap: wrap; }
.sp-add-row .ch-select { flex: 1; min-width: 9rem; }
.sp-empty { color: var(--rail-ink-soft); font-size: .82rem; padding: .3rem 0; }

/* share / collaborators panel */
.sh-cap { color: var(--rail-ink-soft); font-size: .82rem; margin-bottom: .8rem; }
.sh-invite { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-bottom: .5rem; }
.sh-invite .revise-instr { flex: 1; min-width: 10rem; width: auto; }
.sh-roles-key { font-size: .78rem; color: var(--rail-ink-soft); line-height: 1.5; margin: .2rem 0 1rem; }
.sh-roles-key b { color: var(--rail-ink); }
.sh-collab { display: flex; align-items: center; gap: .5rem; padding: .5rem .1rem; border-top: 1px solid var(--rail-line); }
.sh-collab:first-of-type { border-top: 0; }
.sh-collab-email { flex: 1; min-width: 0; color: var(--rail-ink); font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-cap-warn { color: #e7cf9a; background: #322f2a; border: 1px solid #4a4130; border-radius: 7px; padding: .55rem .7rem; font-size: .82rem; line-height: 1.45; margin: .5rem 0; }

/* premium models block in the right-rail context panel */
.pm-block .pm-row { display: flex; align-items: center; gap: .5rem; padding: .28rem 0; font-size: .86rem; color: var(--rail-ink); }
.pm-row label { display: flex; align-items: center; gap: .45rem; cursor: pointer; flex: 1; min-width: 0; }
.pm-row input { accent-color: var(--accent); flex: none; }
.pm-row.off label { color: var(--rail-ink-soft); }
.pm-hint { color: var(--rail-ink-soft); font-size: .74rem; font-style: italic; }
.pm-note { font-size: .76rem; color: var(--rail-ink-soft); margin-top: .4rem; line-height: 1.4; }

@media (max-width: 860px) {
  .rq-panel-wide { width: 100vw; }
  #series-panel, #share-panel { top: 0; right: 0; left: 0; max-height: 100vh; border-radius: 0; }
}

/* ---------- Phase 7: new-book wizard + import dialog ---------- */
.nb-overlay {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(10, 10, 14, .55); padding: 1.2rem;
}
.nb-card {
  width: min(38rem, 96vw); max-height: 92vh; display: flex; flex-direction: column;
  background: var(--rail-2); border: 1px solid var(--rail-line); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6); overflow: hidden;
}
.nb-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: 1rem 1.2rem .8rem;
  border-bottom: 1px solid var(--rail-line); }
.nb-title-h { font-family: var(--serif); color: var(--paper); font-size: 1.4rem; font-weight: 500; }
.nb-steps { color: var(--rail-ink-soft); font-size: .82rem; }
.nb-dots { margin-left: auto; display: inline-flex; gap: .35rem; }
.nb-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--rail-line); }
.nb-dot.on { background: var(--accent); }
.nb-body { padding: 1.1rem 1.2rem; overflow-y: auto; }
.nb-lead { color: var(--rail-ink); font-size: .92rem; line-height: 1.5; margin: 0 0 1rem; }
.nb-optnote { color: var(--rail-ink-soft); font-size: .82rem; line-height: 1.45; margin: 0 0 1rem; }
.nb-label { display: block; color: var(--rail-ink); font-size: .82rem; margin: .9rem 0 .3rem; }
.nb-label:first-child { margin-top: 0; }
.nb-opt { color: var(--rail-ink-soft); font-size: .76rem; }
.nb-in {
  width: 100%; background: var(--rail); border: 1px solid var(--rail-line); color: var(--rail-ink);
  border-radius: 8px; padding: .6rem .7rem; font-size: .95rem; font-family: var(--sans);
}
.nb-in:focus { outline: none; border-color: var(--accent); }
.nb-area { min-height: 4.5rem; resize: vertical; line-height: 1.5; }
select.nb-in { appearance: none; -webkit-appearance: none; cursor: pointer; }
.nb-comp + .nb-comp { margin-top: .4rem; }
.nb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.nb-hint { color: var(--accent-hi); font-size: .8rem; margin-top: .35rem; min-height: 1rem; }
.nb-foot { padding: .9rem 1.2rem; border-top: 1px solid var(--rail-line); display: flex; align-items: center; gap: 1rem;
  justify-content: space-between; flex-wrap: wrap; }
.nb-nav-btns { display: flex; gap: .6rem; margin-left: auto; }
.nb-quick { background: transparent; border: 0; color: var(--rail-ink-soft); font-size: .84rem; text-decoration: underline;
  cursor: pointer; font-family: var(--sans); padding: 0; }
.nb-quick:hover { color: var(--accent-hi); }
/* Phase 11: book-type cards (step 1) — a radio-card group; the hidden input keeps it keyboardable.
   Phase 11b adds the fourth card (Collection), so the grid is a 2×2. */
.nb-btype { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
/* Phase 11b: the Collection rider sub-block (register cards + linked toggle), revealed by the pick. */
.nb-coll-sub { margin-top: .35rem; }
.nb-coll-sub[hidden] { display: none; }
.nb-linked {
  display: flex; align-items: flex-start; gap: .5rem; margin-top: .55rem; cursor: pointer;
  color: var(--rail-ink); font-size: .84rem; line-height: 1.4;
}
.nb-linked input { margin-top: .15rem; accent-color: var(--accent); }
.nb-bt {
  position: relative; display: flex; flex-direction: column; gap: .2rem; background: var(--rail);
  border: 1px solid var(--rail-line); border-radius: 8px; padding: .55rem .6rem; cursor: pointer;
}
.nb-bt input { position: absolute; opacity: 0; pointer-events: none; }
.nb-bt:hover { border-color: var(--accent); }
.nb-bt.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.nb-bt:has(input:focus-visible) { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.nb-bt-l { color: var(--rail-ink); font-size: .88rem; font-weight: 600; }
.nb-bt-d { color: var(--rail-ink-soft); font-size: .72rem; line-height: 1.35; }
@media (max-width: 40rem) { .nb-btype { grid-template-columns: 1fr; } }
.nb-card .accent-btn, .nb-card .ghost-btn { font-family: var(--sans); }
.nb-card .ghost-btn { border-color: var(--rail-line); color: var(--rail-ink); background: transparent; }
.nb-card .ghost-btn:hover { background: #33323b; color: var(--paper); }
.imp-drop {
  display: block; text-align: center; background: var(--rail); border: 1px dashed var(--rail-line);
  border-radius: 9px; padding: 1.1rem .8rem; color: var(--rail-ink-soft); cursor: pointer; font-size: .9rem;
}
.imp-drop:hover { border-color: var(--accent); color: var(--rail-ink); }

/* ---------- Phase 7: onboarding empty state ---------- */
.shelf.onboarding { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.ob-card {
  text-align: left; background: var(--rail-2); border: 1px solid var(--rail-line); border-radius: 12px;
  padding: 1.4rem 1.3rem; color: var(--rail-ink); display: flex; flex-direction: column; gap: .5rem;
  transition: border-color .15s, transform .15s; cursor: pointer; min-height: 11rem;
}
.ob-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.ob-ic { font-size: 1.5rem; color: var(--accent-hi); }
.ob-t { font-family: var(--serif); font-size: 1.3rem; color: var(--paper); }
.ob-d { color: var(--rail-ink-soft); font-size: .88rem; line-height: 1.5; }

/* how-it-works explainer (rendered inside a confirm-modal) */
.hiw-list { display: flex; flex-direction: column; gap: .9rem; }
.hiw-step { display: flex; gap: .8rem; align-items: flex-start; }
.hiw-n { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent); color: #06110f;
  display: grid; place-items: center; font-weight: 600; font-size: .9rem; }
.hiw-t { color: var(--ink); font-weight: 600; font-size: .95rem; margin-bottom: .15rem; }
.hiw-d { color: var(--ink-soft); font-size: .88rem; line-height: 1.5; }

/* ---------- Phase 7: Credits & plans (billing) view ---------- */
.billing { min-height: 100%; background: radial-gradient(120% 80% at 50% -10%, #2c2b33 0%, var(--rail) 60%);
  padding: clamp(2rem, 6vw, 4rem) 1.5rem; overflow-y: auto; }
.bl-inner { max-width: 60rem; margin: 0 auto; }
.bl-back { display: inline-block; margin-bottom: 1.3rem; }
.billing h1 { font-family: var(--serif); color: var(--paper); font-weight: 500; font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 .3rem; }
.billing .sub { color: var(--rail-ink-soft); margin: 0 0 1.6rem; font-size: 1rem; }
.bl-banner { background: var(--gate-bg); border: 1px solid var(--gate-line); color: #7a561b; border-radius: 10px;
  padding: .8rem 1rem; font-size: .9rem; line-height: 1.45; margin-bottom: 1.6rem; }
.bl-sec { font-family: var(--serif); color: var(--paper); font-weight: 500; font-size: 1.4rem; margin: 1.8rem 0 1rem; }
.bl-sec-sub { font-family: var(--sans); font-size: .82rem; color: var(--rail-ink-soft); font-weight: 400; margin-left: .5rem; }
.bl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; }
.bl-card { position: relative; background: var(--rail-2); border: 1px solid var(--rail-line); border-radius: 12px;
  padding: 1.3rem 1.2rem; color: var(--rail-ink); display: flex; flex-direction: column; gap: .45rem; }
.bl-card.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.bl-badge { position: absolute; top: -.6rem; right: 1rem; background: var(--accent); color: #06110f;
  font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: .12rem .5rem; border-radius: 999px; }
.bl-card-h { font-family: var(--serif); color: var(--paper); font-size: 1.35rem; }
.bl-price { color: var(--paper); font-size: 1.7rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.bl-per { color: var(--rail-ink-soft); font-size: .85rem; font-weight: 400; }
.bl-credits { color: var(--rail-ink-soft); font-size: .88rem; margin-bottom: .4rem; }
.bl-card .accent-btn, .bl-card .ghost-btn { font-family: var(--sans); margin-top: auto; width: 100%; }
.bl-card .ghost-btn { border-color: var(--rail-line); color: var(--rail-ink); background: transparent; }
.bl-card .ghost-btn:disabled { opacity: .6; }
.bl-manage { margin-top: 1rem; }
.bl-manage .ghost-btn { border-color: var(--rail-line); color: var(--rail-ink); background: transparent; font-family: var(--sans); }
.bl-manage .ghost-btn:hover { background: #33323b; color: var(--paper); }
.bl-foot { margin-top: 2rem; }
/* Phase 7 plan-change policy — upsell banner, per-card renewal/pending lines, downgrade interstitial. */
.bl-upsell { background: var(--rail-2); border: 1px solid var(--accent); border-radius: 12px;
  padding: 1rem 1.1rem; margin: 0 0 1.4rem; display: flex; flex-direction: column; gap: .3rem; box-shadow: 0 0 0 1px var(--accent); }
.bl-upsell-t { font-family: var(--serif); color: var(--paper); font-size: 1.15rem; }
.bl-upsell-d { color: var(--rail-ink-soft); font-size: .9rem; }
.bl-upsell .accent-btn { align-self: flex-start; margin-top: .5rem; font-family: var(--sans); width: auto; }
.bl-renews { color: var(--rail-ink-soft); font-size: .8rem; margin-top: .45rem; text-align: center; }
.bl-pending { background: var(--gate-bg); border: 1px solid var(--gate-line); color: #7a561b; border-radius: 8px;
  padding: .5rem .6rem; font-size: .8rem; margin-top: .5rem; line-height: 1.4; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent-hi); font: inherit; cursor: pointer; text-decoration: underline; }
.dg-lose { margin: .4rem 0 .2rem; padding-left: 1.1rem; font-size: .92rem; color: var(--rail-ink); }
.dg-lose li { margin: .25rem 0; }
.rc-actions .ghost-btn.dg-quiet { opacity: .8; font-weight: 400; }

@media (max-width: 560px) {
  .nb-grid { grid-template-columns: 1fr; }
}

/* ================= Phase 8 — Reading circles + margin suggestions ================================= */

/* Craft standing chip — merit, not a score badge (used in the owner inbox + member "my suggestions"). */
.std-chip {
  display: inline-flex; align-items: center; font-size: .66rem; font-weight: 700; letter-spacing: .03em;
  padding: .14rem .45rem; border-radius: 4px; background: #26383a; color: var(--accent-hi); border: 1px solid #33565a;
  white-space: nowrap;
}
.std-chip.new { background: #322f2a; color: #cbb994; border-color: #4a4130; }

/* ---------- member: pinned-draft banner (in the paper editor column) ---------- */
.circle-banner {
  background: #f4f0fa; border-bottom: 1px solid #ded3ee; color: #3a2f4d;
  padding: .8rem 1.5rem; overflow-y: auto; max-height: 55vh; font-family: var(--sans);
}
.cb-top { display: flex; align-items: flex-start; gap: 1rem; }
.cb-id { flex: 1; min-width: 0; }
.cb-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #6b5a86; font-weight: 700; }
.cb-name { font-family: var(--serif); font-size: 1.2rem; color: #2b2340; margin-top: .1rem; }
.cb-note { font-size: .82rem; color: #5b4f72; margin: .35rem 0 .1rem; line-height: 1.4; }
.cb-mine-toggle {
  background: transparent; border: 0; color: #57497a; font-size: .82rem; font-weight: 600; cursor: pointer;
  padding: .35rem 0 .15rem; font-family: var(--sans);
}
.cb-mine-toggle:hover { color: #2b2340; }
.cb-mine { display: flex; flex-direction: column; gap: .5rem; margin-top: .3rem; }
.cb-mine .sg-row { background: #fbfaf7; border: 1px solid #e6dcf2; }
.cb-mine .sg-head, .cb-mine .sg-note, .cb-mine .sg-comment { color: var(--ink); }
.cb-mine .sg-author { color: #3a2f4d; }
.cb-mine .sg-ch { color: #6b5a86; }
.cb-mine .sg-comment { border-left-color: #e6dcf2; }
.cb-mine .sg-actions .ghost-btn { border-color: #ded3ee; color: #57497a; background: transparent; }
.cb-mine .sg-actions .ghost-btn:hover { background: #ece4f6; color: #2b2340; }

/* Phase 8b — salon brief (members, top of the circle) */
.cb-brief { background: #fbfaf7; border: 1px solid #e6dcf2; border-radius: 9px; padding: .6rem .75rem; margin: .5rem 0 .2rem; }
.cb-brief-h { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #6b5a86; font-weight: 700; margin-bottom: .3rem; }
.cb-brief-body { font-size: .88rem; color: #2b2340; line-height: 1.5; }
.cb-brief-body p { margin: 0 0 .5rem; }
.cb-brief-body p:last-child { margin-bottom: 0; }

/* Phase 8b — "Story so far" spoiler-scoped canon drawer */
.cb-canon-toggle { background: transparent; border: 0; color: #57497a; font-size: .82rem; font-weight: 600; cursor: pointer;
  padding: .35rem 0 .15rem; font-family: var(--sans); }
.cb-canon-toggle:hover { color: #2b2340; }
.cb-canon-body { background: #fbfaf7; border: 1px solid #e6dcf2; border-radius: 9px; padding: .6rem .75rem; margin: .1rem 0 .3rem; }
.cb-canon-scope { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: #57497a; }
.cb-canon-sel { background: var(--paper, #fff); color: #2b2340; border: 1px solid #ded3ee; border-radius: 6px; padding: .2rem .4rem;
  font-size: .82rem; font-family: var(--sans); }
.cb-canon-ethos { font-size: .74rem; color: #7a6e94; font-style: italic; margin: .3rem 0 .5rem; }
.cb-canon-note { font-size: .84rem; color: #6b5a86; }
.cb-canon-cat { margin-bottom: .55rem; }
.cb-canon-cat:last-child { margin-bottom: 0; }
.cb-canon-cat-h { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: #8a7ba6; font-weight: 700; margin-bottom: .2rem; }
.cb-canon-fact { font-size: .86rem; color: #2b2340; line-height: 1.45; padding: .12rem 0; }
.cb-canon-ent { font-weight: 600; color: #4a3d68; }

/* Phase 8b — quiet flag action (workshop rows) + flagged acknowledgement */
.sg-flag-btn { background: transparent; border: 1px solid #ded3ee; color: #8a7ba6; border-radius: 6px; padding: .3rem .7rem;
  font-size: .78rem; cursor: pointer; font-family: var(--sans); }
.sg-flag-btn:hover { border-color: #c9a24a; color: #9a6a1a; background: #f6efdd; }
.sg-flagged { font-size: .8rem; color: #7a6e94; font-style: italic; text-align: right; margin-top: .3rem; }

/* Phase 8b — owner inbox: a suggestion auto-hidden by reader flags (collapsed, marked) */
.sg-row.sg-hidden { opacity: .8; border-style: dashed; }
.sg-status-chip.sg-hidden-chip { background: #3a3322; color: #d6b46a; margin-left: auto; text-transform: none; letter-spacing: 0; }

/* Phase 8b — anthology calls (dark rail panel chrome, reuses .cir-card / .cir-inbox) */
.antho-submit, .antho-admin { display: flex; flex-direction: column; gap: .5rem; }
.antho-submit .ch-select, .antho-submit .revise-instr { width: 100%; }
.antho-admin { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--rail-line); }
.antho-admin-bar { display: flex; gap: .4rem; align-items: center; }
.antho-subs { display: flex; flex-direction: column; gap: .5rem; margin-top: .2rem; }
.antho-create { margin-bottom: .4rem; }

/* ---------- owner: circles manager (dark rail panel chrome) ---------- */
.cir-new { display: flex; flex-direction: column; gap: .5rem; }
.cir-new .revise-instr { width: 100%; }
.cir-range { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cir-range label { display: inline-flex; align-items: center; gap: .4rem; color: var(--rail-ink); font-size: .84rem; }
.cir-num {
  width: 4.2rem; background: var(--rail); border: 1px solid var(--rail-line); color: var(--rail-ink);
  border-radius: 6px; padding: .35rem .45rem; font-size: .82rem; font-family: var(--sans);
}
.cir-num:focus { outline: none; border-color: var(--accent); }
.cir-range-hint { color: var(--rail-ink-soft); font-size: .76rem; }

.cir-card { border: 1px solid var(--rail-line); border-radius: 10px; background: var(--rail); margin-bottom: .7rem; overflow: hidden; }
.cir-card.open { border-color: #33565a; }
.cir-card-top { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .8rem; }
.cir-card-id { flex: 1; min-width: 0; }
.cir-card-name { color: var(--paper); font-size: .95rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.cir-card-meta { color: var(--rail-ink-soft); font-size: .78rem; margin-top: .2rem; }
.cir-card-actions { display: flex; gap: .35rem; flex: none; }
.cir-inbox { border-top: 1px solid var(--rail-line); padding: .7rem .8rem; background: var(--rail-2); }

.cir-filters { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .7rem; }
.cir-filter {
  background: transparent; border: 1px solid var(--rail-line); color: var(--rail-ink-soft); border-radius: 999px;
  padding: .2rem .6rem; font-size: .74rem; cursor: pointer; font-family: var(--sans);
}
.cir-filter.active { background: #26383a; color: var(--accent-hi); border-color: #33565a; }

/* ---------- suggestion rows (owner inbox + member list) ---------- */
.sg-row { border: 1px solid var(--rail-line); border-radius: 9px; padding: .6rem .7rem; margin-bottom: .55rem; background: var(--rail); }
.sg-row:last-child { margin-bottom: 0; }
.sg-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .45rem; }
.sg-author { color: var(--rail-ink); font-size: .82rem; font-weight: 600; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-ch { color: var(--rail-ink-soft); font-size: .74rem; font-variant-numeric: tabular-nums; }
.sg-status-chip {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; padding: .1rem .4rem;
  border-radius: 4px; margin-left: auto; background: #33323b; color: var(--rail-ink-soft);
}
.sg-status-chip.sg-accepted { background: #223626; color: #8ec793; }
.sg-status-chip.sg-declined { background: #3a2622; color: #e08b7a; }
.sg-status-chip.sg-withdrawn { background: #33323b; color: var(--rail-ink-soft); }
.sg-diff { margin: 0 0 .4rem; }
.sg-diff del { text-decoration: line-through; }         /* struck anchor (DiffAccept look) */
.sg-diff ins { text-decoration: underline; }            /* underlined proposal */
.sg-note { font-size: .86rem; color: var(--rail-ink); line-height: 1.45; margin-bottom: .35rem; }
.sg-note-k { color: var(--rail-ink-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; margin-right: .25rem; }
.sg-note q, .sg-comp-anchor q { color: var(--rail-ink); font-style: italic; }
.sg-comment { font-size: .86rem; color: var(--rail-ink); line-height: 1.45; border-left: 2px solid var(--rail-line); padding-left: .5rem; }
.sg-actions { display: flex; gap: .4rem; justify-content: flex-end; margin-top: .5rem; }
.sg-actions .ghost-btn, .sg-actions .accent-btn { padding: .3rem .7rem; font-size: .8rem; font-family: var(--sans); }
.sg-actions .ghost-btn { border-color: var(--rail-line); color: var(--rail-ink); background: transparent; }
.sg-actions .ghost-btn:hover { background: #33323b; color: var(--paper); }

/* nearest-current-context shown in the stale-anchor modal (paper confirm-modal) */
.sg-nearest { background: #f3f0e8; border: 1px solid var(--paper-edge); border-radius: 6px; padding: .5rem .6rem;
  font-family: var(--serif); font-size: .9rem; color: var(--ink); line-height: 1.5; }

/* ---------- member: suggest popover + composer ---------- */
#suggest-pop .accent-btn { font-family: var(--sans); font-size: .82rem; padding: .35rem .7rem; }
.sg-composer .sg-comp-h { font-family: var(--serif); color: var(--ink); font-size: 1.05rem; margin-bottom: .5rem; }
.sg-comp-anchor { background: #f3f0e8; border: 1px solid var(--paper-edge); border-radius: 6px; padding: .45rem .55rem;
  font-size: .88rem; color: var(--ink); line-height: 1.45; margin-bottom: .7rem; }
.sg-comp-anchor q { color: var(--ink); }
.sg-comp-label { display: block; font-size: .78rem; color: var(--ink-soft); margin: .3rem 0 .25rem; }
.sg-comp-area { background: var(--paper); color: var(--ink); border: 1px solid var(--paper-edge); height: 5rem; margin-bottom: .2rem; }
.sg-comp-area:focus { outline: none; border-color: var(--accent); }
.sg-composer .wp-note { color: var(--ink-soft); }

/* member reader: circle entries in the right-rail context ("closed room", no counts on covers) */
.cir-open-btn { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; }
.cir-open-btn.active { border-color: var(--accent); color: var(--paper); }
.cir-open-name { font-weight: 600; }
.cir-open-sub { font-size: .74rem; color: var(--rail-ink-soft); }

/* profile: Craft standing card */
.cs-standing .cs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-bottom: .8rem; }
.cs-stat { display: flex; flex-direction: column; gap: .15rem; background: var(--rail-2); border: 1px solid var(--rail-line);
  border-radius: 10px; padding: .7rem .6rem; }
.cs-stat-v { font-size: 1.5rem; color: var(--paper); font-weight: 500; font-variant-numeric: tabular-nums; }
.cs-stat-l { font-size: .74rem; color: var(--rail-ink-soft); }
.cs-ethos { font-size: .82rem; color: var(--rail-ink-soft); font-style: italic; line-height: 1.45; }

@media (max-width: 560px) {
  .cs-standing .cs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  #circles-panel, #antho-panel { top: 0; right: 0; left: 0; max-height: 100vh; border-radius: 0; }
}

/* ---------------- Phase 9 marketplace (buyer storefront + my library) ---------------- */
.market {
  min-height: 100%; color: var(--rail-ink);
  background: radial-gradient(120% 80% at 50% -10%, #2c2b33 0%, var(--rail) 60%);
  padding: clamp(2rem, 6vw, 5rem) 1.5rem;
}
.mk-inner { max-width: 62rem; margin: 0 auto; }
.market h1 { font-family: var(--serif); color: var(--paper); font-weight: 500; font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 .3rem; }
.market .sub { color: var(--rail-ink-soft); margin: 0 0 1.4rem; font-size: 1rem; }
.mk-tabs { margin-bottom: 1.6rem; }
.mk-body { min-height: 8rem; }

.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.1rem; }
.mk-card {
  display: flex; flex-direction: column; text-align: left; gap: 0;
  background: var(--rail-2); border: 1px solid var(--rail-line); border-radius: 12px;
  overflow: hidden; cursor: pointer; padding: 0; font-family: var(--sans); color: var(--rail-ink);
  transition: border-color .15s, transform .15s;
}
button.mk-card:hover, button.mk-card:focus-visible { border-color: var(--accent); transform: translateY(-2px); outline: none; }
.mk-cover { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: var(--rail); }
.mk-cover-ph { display: grid; place-items: center; font-family: var(--serif); font-size: 3rem; color: var(--rail-ink-soft); }
.mk-card-b { display: flex; flex-direction: column; gap: .3rem; padding: .7rem .8rem .8rem; }
.mk-title { font-family: var(--serif); font-size: 1.15rem; line-height: 1.15; color: var(--paper); }
.mk-pen { font-size: .8rem; color: var(--rail-ink-soft); }
.mk-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .3rem; }
.mk-ed { font-size: .72rem; color: var(--rail-ink-soft); background: var(--rail); border: 1px solid var(--rail-line); border-radius: 999px; padding: .1rem .5rem; }
.mk-price { color: var(--paper); font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-status { font-size: .74rem; color: var(--rail-ink-soft); text-transform: capitalize; }

/* storefront detail */
.mk-detail-back { display: inline-block; margin-bottom: 1rem; }
.mk-detail { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.mk-detail-cover { flex: 0 0 12rem; max-width: 12rem; }
.mk-detail-cover .mk-cover { border-radius: 10px; border: 1px solid var(--rail-line); }
.mk-detail-main { flex: 1 1 18rem; min-width: 15rem; }
.mk-detail-title { font-family: var(--serif); color: var(--paper); font-weight: 500; font-size: 1.8rem; margin: 0 0 .3rem; }
.mk-detail-meta { color: var(--rail-ink-soft); font-size: .88rem; margin-bottom: .6rem; }
.mk-detail-price { color: var(--paper); font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: .8rem; }
.mk-blurb { color: var(--rail-ink); line-height: 1.55; font-size: .95rem; margin: 0 0 1rem; }
.mk-buy { font-family: var(--sans); }
.mk-sec-h { font-family: var(--serif); color: var(--paper); font-size: 1.15rem; margin: 1.8rem 0 .7rem; }
.mk-sample {
  background: var(--paper); color: var(--ink); font-family: var(--serif); line-height: 1.7;
  border-radius: 10px; padding: 1.2rem 1.4rem; max-height: 22rem; overflow-y: auto;
}
.mk-sample p { margin: 0 0 .8rem; }
.mk-license {
  background: var(--rail-2); border: 1px solid var(--rail-line); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: .9rem 1.1rem; color: var(--rail-ink); font-size: .9rem; line-height: 1.6;
}

/* checkout dialog (on the light confirm-modal) */
.mk-co-title { font-size: 1rem; }
.mk-co-lic { font-size: .86rem; color: var(--ink-soft); line-height: 1.5; }
.mk-waiver { display: flex; gap: .55rem; align-items: flex-start; font-size: .9rem; color: var(--ink); margin: .3rem 0 .2rem; cursor: pointer; }
.mk-waiver input { margin-top: .2rem; accent-color: var(--accent); flex: none; }

/* my library */
.mk-lib-card { cursor: default; }
.mk-lib-card.refunded { opacity: .7; }
.mk-dls { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.mk-refunded { color: var(--hard); font-size: .82rem; margin-top: .5rem; display: inline-block; }

/* ---------------- Phase 9 seller console (#sell-panel) ---------------- */
.sell-sec { padding: .9rem 0; border-bottom: 1px solid var(--rail-line); }
.sell-sec:last-of-type { border-bottom: 0; }
.sell-sec-h { font-family: var(--serif); color: var(--paper); font-size: 1.05rem; margin-bottom: .6rem; }
#sell-panel .pub-desc { font-size: .86rem; color: var(--rail-ink-soft); margin: 0 0 .7rem; line-height: 1.5; }
#sell-panel .accent-btn, #sell-panel .ghost-btn, #sell-panel .danger-btn { font-family: var(--sans); }
#sell-panel .ghost-btn { border-color: var(--rail-line); color: var(--rail-ink); background: transparent; }
#sell-panel .ghost-btn:hover:not(:disabled) { background: #33323b; color: var(--paper); }
.sell-listing-head { color: var(--paper); font-size: .95rem; margin-bottom: .7rem; display: flex; align-items: center; gap: .6rem; }
.sell-field { display: block; color: var(--rail-ink-soft); font-size: .82rem; margin: .7rem 0 .2rem; }
.sell-field .dz-in, .sell-field .dz-text { margin-top: .25rem; }
.sell-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.sell-fee { margin-top: 1rem; }
.sell-history { display: flex; flex-direction: column; gap: .3rem; }
.sell-hist-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .84rem; color: var(--rail-ink); padding: .3rem .1rem; border-bottom: 1px solid var(--rail-line); }
.sell-hist-row:last-child { border-bottom: 0; }
.mk-live { color: #8ec793; font-size: .82rem; }
.mk-draft { color: var(--gate); font-size: .82rem; text-transform: capitalize; }
.mk-warn { color: var(--gate); }

@media (max-width: 720px) {
  .mk-detail-cover { flex-basis: 8rem; max-width: 8rem; }
}

/* ---------------- Phase 14 — translation variants ---------------- */
/* Header variant-switcher chip: the lang-chip look, but a clickable menu trigger (Source ▾ / Français ▾). */
.variant-chip {
  display: inline-flex; align-items: center; font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; padding: .18rem .5rem; border-radius: 999px; white-space: nowrap; cursor: pointer;
  background: #2f2b3a; color: #b7a6d6; border: 1px solid #453a5c; font-family: var(--sans);
}
.variant-chip:hover { border-color: var(--accent); color: var(--paper); }
.cm-item.active { border-color: var(--accent); font-weight: 600; }

/* Editor-column banner while a variant is open (read-only ↔ explicit edit mode). */
.variant-banner {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; font-family: var(--sans);
  background: #2f2b3a; border-bottom: 1px solid #453a5c; color: #cfc3e6; padding: .55rem 1.5rem; font-size: .85rem;
}
.variant-banner .vb-txt { flex: 1; min-width: 12rem; }
.variant-banner .vb-act { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.variant-banner .ghost-btn { border-color: #453a5c; color: #cfc3e6; background: transparent; padding: .3rem .7rem; font-size: .78rem; }
.variant-banner .ghost-btn:hover { border-color: var(--accent); color: var(--paper); }

/* Per-chapter / per-variant status badges (current | stale | pinned | failed | missing + job states). */
.trx-badge { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; border-radius: 4px; padding: .05rem .35rem; white-space: nowrap; }
.trx-badge.current, .trx-badge.ready { background: #24352a; color: #8ec793; }
.trx-badge.stale, .trx-badge.partial, .trx-badge.queued { background: var(--gate-bg); color: #7a5410; }
.trx-badge.pinned { background: #2f2b3a; color: #b7a6d6; }
.trx-badge.failed { background: #3a2622; color: #e08b7a; }
.trx-badge.missing { background: #33323b; color: var(--rail-ink-soft); }
.trx-badge.translating { background: #2b3a44; color: var(--accent-hi); }

/* Translations panel: the audio-dot legend reuses .audio-dot sizing; only the colors are ours. */
.trx-dot.current { background: #6fbf73; }
.trx-dot.stale { background: var(--gate); }
.trx-dot.pinned { background: #b7a6d6; }
.trx-dot.failed { background: #e08b7a; }
.trx-dot.missing { background: #8b8790; }

#trx-panel .pub-desc { font-size: .86rem; color: var(--rail-ink-soft); margin: 0 0 .7rem; line-height: 1.5; }
#trx-panel .accent-btn, #trx-panel .ghost-btn, #trx-panel .danger-btn { font-family: var(--sans); }
#trx-panel .ghost-btn { border-color: var(--rail-line); color: var(--rail-ink); background: transparent; }
#trx-panel .ghost-btn:hover:not(:disabled) { background: #33323b; color: var(--paper); }
#trx-panel button:disabled { opacity: .45; cursor: default; }
.trx-new { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.trx-new .revise-instr { width: auto; flex: 1; min-width: 9rem; }
.trx-var-h { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .55rem; }
.trx-var-name { font-family: var(--serif); color: var(--paper); font-size: 1.05rem; }
.trx-var-title { color: var(--rail-ink-soft); font-size: .84rem; font-style: italic; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trx-var-h .ghost-btn, .trx-var-h .accent-btn { padding: .3rem .7rem; font-size: .78rem; }
.trx-cards { display: flex; flex-direction: column; gap: .35rem; }
.trx-card { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; border: 1px solid var(--rail-line); border-radius: 8px; padding: .4rem .6rem; background: var(--rail); }
.trx-card.status-stale { border-left: 3px solid var(--gate); }
.trx-card.status-pinned { border-left: 3px solid #b7a6d6; }
.trx-card.status-failed { border-left: 3px solid #e08b7a; }
.trx-card.status-current { border-left: 3px solid #6fbf73; }
.status-missing { border-left: 3px solid var(--rule, #d8d2c6); opacity: .85; }
.trx-ch { color: var(--paper); font-size: .86rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trx-card .ghost-btn { padding: .25rem .6rem; font-size: .76rem; }