/* Jay's Room: a quiet, dark writing tool.

   Principles
   - Chrome recedes; the manuscript leads. All interface text is Manrope. The manuscript
     alone gets serifs: Bespoke Serif for the chapter text, Source Serif 4 for chapter
     titles. JetBrains Mono for numbers that line up in columns.
   - Neutral near-black surfaces: #0d0e10 for the chrome (top bar, sidebars), #111214 for
     content. Greys at a few lightnesses do the rest.
   - One accent, a pale blue gradient, in exactly three places: the active tab's underline,
     the active chapter or scene's left edge, and the primary button.
   - Semantic colour (saved, warning, delete) and data colour (charts, statuses) are kept
     apart from the accent. Delete is a muted red, never loud.
   Fonts are self-hosted (SIL Open Font License; see fonts/README.txt). */

@font-face { font-family: "Manrope"; src: url("/static/fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; src: url("/static/fonts/manrope-ext.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; src: url("/static/fonts/source-serif-4.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; src: url("/static/fonts/source-serif-4-ext.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; src: url("/static/fonts/source-serif-4-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; src: url("/static/fonts/source-serif-4-italic-ext.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Bespoke Serif (ITF Free Font License, self-hosted, unmodified): the chapter text itself. */
@font-face { font-family: "Bespoke Serif"; src: url("/static/fonts/BespokeSerif-Variable.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Bespoke Serif"; src: url("/static/fonts/BespokeSerif-VariableItalic.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/static/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; src: url("/static/fonts/jetbrains-mono-ext.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: dark;
  --topbar-h: 56px;

  /* Surfaces, darkest to lightest */
  --chrome: #0d0e10;        /* top bar, sidebars, page background */
  --surface: #111214;       /* content: the desk, panels */
  --raised: #16181b;        /* fields, cards inside panels */
  --hover: #1b1d21;
  --line: #202227;          /* hairlines */
  --line-strong: #2d3036;   /* field and button outlines */

  /* Text */
  --text: #e8e9ec;
  --text-2: #a3a7af;        /* secondary, inactive rows */
  --text-3: #6e737c;        /* labels, metadata */
  --prose: #d9dade;         /* the manuscript */

  /* The one accent */
  --accent: #cfe6ff;
  --accent-grad: linear-gradient(135deg, #eaf4ff 0%, #cfe6ff 45%, #a9cdf4 100%);
  --accent-edge: linear-gradient(180deg, #eaf4ff, #cfe6ff 50%, #9fc5f0);
  --on-accent: #0b1422;
  --active-row: rgb(207 230 255 / 0.06);

  /* Semantic, separate from the accent */
  --ok: #6cc28a;
  --ok-soft: rgb(108 194 138 / 0.12);
  --warn: #d7a65e;
  --warn-soft: rgb(215 166 94 / 0.12);
  --danger: #c97a74;        /* desaturated: delete is rare, not loud */
  --danger-soft: rgb(201 122 116 / 0.12);
  --focus: rgb(207 230 255 / 0.55);
  --highlight: 236 201 75;  /* words highlighted to edit; r g b, for rgb(var(--highlight) / alpha) */

  /* Data (validated with the dataviz skill's checker against #111214) */
  --status-none: #3a3e45;
  --status-1: #bd413f; --status-2: #2ca2a2; --status-3: #957fd0; --status-4: #2e64a6; --status-5: #2f7434;
  --heat-1: #3a5680; --heat-2: #456a97; --heat-3: #527eae; --heat-4: #6592c4; --heat-5: #80abd6; --heat-6: #a9c9ea;
  --heat-ink-low: #e8e9ec; --heat-ink-high: #0b1422;
  --bar: #6f95c4;
  --bar-ink: #0b1422;
  --dream: var(--status-3);     /* violet: dreams and visions */
  --memory: var(--status-2);    /* teal */
  --flashback: var(--status-1); /* red */

  --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-prose: "Source Serif 4", Georgia, "Times New Roman", serif;   /* chapter titles */
  --font-manuscript: "Bespoke Serif", var(--font-prose);                /* chapter text */
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-float: 0 12px 32px -8px rgb(0 0 0 / 0.6), 0 0 0 1px var(--line);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
::selection { background: rgb(207 230 255 / 0.22); color: inherit; }
html { -webkit-text-size-adjust: 100%; }

/* The page scrollbar, drawn by us: no arrow buttons, so its track is the full window
   height, the same geometry as the manuscript's scene rail beside it (the thumb and
   the rail's outline then line up exactly). (Chrome ignores these if the standard
   scrollbar-color/width are set, so don't.) */
html::-webkit-scrollbar { width: 14px; }
html::-webkit-scrollbar-track { background: var(--chrome); border-left: 1px solid var(--line); }
html::-webkit-scrollbar-thumb { background: #2a2d33; border-radius: 7px; border: 3px solid transparent; background-clip: padding-box; min-height: 24px; }
html::-webkit-scrollbar-thumb:hover { background-color: #3a3e45; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #2a2d33; border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

body {
  margin: 0; min-height: 100vh;
  background: var(--chrome); color: var(--text);
  font: 15px/1.55 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--text); }
.muted { color: var(--text-3); }
.hint { margin: 0; font: 13px/1.5 var(--font-ui); color: var(--text-3); }
.hint code, code { font: 12px var(--font-mono); color: var(--text-2); background: var(--raised); padding: 1px 5px; border-radius: 4px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* A small uppercase label: section heads in sidebars and panels, group titles. */
.eyebrow, .book-title, .group-title, .sidebar-head h2 {
  font: 600 11px/1.2 var(--font-ui); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3);
}

/* ---------- controls ---------- */

input, select, textarea, button { font: inherit; color: inherit; }
input:not([type="checkbox"]), select, textarea {
  width: 100%; padding: 7px 10px;
  background: var(--raised); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font: 14px/1.45 var(--font-ui);
  transition: border-color 0.12s ease;
}
input:not([type="checkbox"]):hover, select:hover, textarea:hover { border-color: #3a3e45; }
select { cursor: pointer; }
select option, select optgroup { background: var(--raised); color: var(--text); }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, summary:focus-visible, [contenteditable]:focus-visible, a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 1px;
}
input[type="checkbox"] { accent-color: #d9dce1; width: 15px; height: 15px; margin: 0; flex: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: transparent; color: var(--text);
  font: 500 13.5px/1.3 var(--font-ui);
  cursor: pointer; white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
a.btn { text-decoration: none; }
.btn:hover:not(:disabled) { background: var(--hover); border-color: #3a3e45; }
.btn:disabled { opacity: 0.45; cursor: default; }
/* Accent use 3 of 3: the primary action. */
.btn.primary { background: var(--accent-grad); border-color: transparent; color: var(--on-accent); font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: var(--accent-grad); filter: brightness(1.06); border-color: transparent; }
.btn.ghost { border-color: transparent; color: var(--text-2); }
.btn.ghost:hover:not(:disabled) { background: var(--hover); color: var(--text); border-color: transparent; }
.btn.small { padding: 5px 11px; font-size: 13px; }
.btn.ok { color: var(--ok); border-color: rgb(108 194 138 / 0.4); }
.btn.ok:hover:not(:disabled) { background: var(--ok-soft); border-color: var(--ok); }
.btn.danger { color: var(--danger); }
.btn.danger:hover:not(:disabled) { background: var(--danger-soft); border-color: rgb(201 122 116 / 0.5); }
.btn.ghost.danger { border-color: transparent; }

.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: 13.5px/1.4 var(--font-ui); color: var(--text-2); }
.check:hover { color: var(--text); }

.badge {
  display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px;
  background: #e8e9ec; color: var(--chrome);
  font: 600 10.5px/17px var(--font-mono); text-align: center; letter-spacing: 0;
}
.tag {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: var(--raised); color: var(--text-2); border: 1px solid var(--line-strong);
  font: 500 11.5px/1.55 var(--font-ui); white-space: nowrap;
}
.tag.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.tag.new { background: rgb(232 233 236 / 0.08); color: var(--text); border-color: transparent; }
.tag.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }

.link-btn {
  border: 0; background: transparent; padding: 0; cursor: pointer; color: inherit; font: inherit; text-align: left;
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px;
}
.link-btn:hover { color: var(--text); text-decoration-color: var(--text-2); }
.icon-btn {
  border: 0; background: transparent; padding: 3px 7px; border-radius: 4px; cursor: pointer;
  color: var(--text-3); font: 14px/1.2 var(--font-ui);
}
.icon-btn:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.icon-btn.danger:hover:not(:disabled) { color: var(--danger); }
.icon-btn:disabled { opacity: 0.3; cursor: default; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent;
  cursor: pointer; font: 12.5px/1.4 var(--font-ui); color: var(--text-2);
}
.chip:hover { color: var(--text); border-color: #3a3e45; background: var(--hover); }

.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--text-2);
  cursor: pointer; font: 500 13px/1.3 var(--font-ui);
}
.pill:hover { color: var(--text); background: var(--hover); }
.pill[aria-pressed="true"] { background: rgb(232 233 236 / 0.1); border-color: rgb(232 233 236 / 0.35); color: var(--text); }
.pill-count { font: 11.5px var(--font-mono); opacity: 0.7; }

.warn-note { margin: 0 0 12px; padding: 9px 12px; border-radius: var(--radius); background: var(--warn-soft); color: var(--warn); font: 13.5px/1.5 var(--font-ui); }
.error-box { margin: 16px 0; padding: 11px 14px; border-radius: var(--radius); background: var(--danger-soft); color: var(--danger); font: 14px/1.5 var(--font-ui); }
.table-scroll { overflow-x: auto; }
.plain-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font: 13.5px/1.5 var(--font-ui); color: var(--text-2); }
.plain-list strong { color: var(--text); font-weight: 600; }

/* ---------- sign in ---------- */

/* The card, and under it the way back to the series' site. */
.login {
  min-height: 100vh; padding: 16px;
  display: grid; grid-template-columns: minmax(0, 360px); place-content: center; justify-items: center; gap: 14px;
}
.login-card {
  width: 100%; max-width: 360px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 32px 28px 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.login-card h1 { margin: 0; font: 700 15px/1.2 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; }
.login-card .subtitle { margin: -6px 0 12px; font-style: italic; color: var(--text-3); font-size: 14px; }
.login-card .btn { width: 100%; padding: 9px 14px; }
.form-error { margin: 0; min-height: 1.4em; color: var(--danger); font: 13.5px/1.4 var(--font-ui); }

/* ---------- top bar ---------- */

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: stretch; gap: 8px;
  height: var(--topbar-h); padding: 0 20px;
  background: var(--chrome); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; padding-right: 16px; }
/* The butterfly: white line work, at home on the dark chrome. */
.logo { display: block; flex: none; width: 24px; height: 24px; object-fit: contain; opacity: 0.92; }
.logo-lg { width: 44px; height: 44px; margin-bottom: 6px; }
.brand-name { font: 700 13.5px/1 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); }
.brand-sub { font: italic 13.5px/1 var(--font-ui); color: var(--text-3); }
.tabs { display: flex; align-items: stretch; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 0 12px; border: 0; background: transparent; color: var(--text-3); cursor: pointer;
  font: 600 12px/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap; flex: none;
}
.tab:hover { color: var(--text-2); }
.tab[aria-selected="true"] { color: var(--text); }
/* Accent use 1 of 3: the active tab's underline. */
.tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0;
  background: var(--accent-grad);
}

.account { position: relative; margin-left: auto; display: flex; align-items: center; flex: none; }
.account summary { list-style: none; }
.account summary::-webkit-details-marker { display: none; }
.account summary::after { content: "▾"; font-size: 10px; margin-left: 4px; color: var(--text-3); }
.account .menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
  min-width: 210px; padding: 5px;
  display: flex; flex-direction: column;
  background: var(--raised); border-radius: var(--radius); box-shadow: var(--shadow-float);
}
.account .menu button, .account .menu a {
  padding: 8px 10px; border: 0; border-radius: 4px;
  background: transparent; text-align: left; cursor: pointer; font: 13.5px/1.3 var(--font-ui); color: var(--text-2);
}
.account .menu a { text-decoration: none; white-space: nowrap; }
.account .menu button:hover, .account .menu a:hover { background: var(--hover); color: var(--text); }
.account .menu #sign-out-all { color: var(--danger); }
.account .menu button:disabled { opacity: 0.45; cursor: default; }
/* The last backup (backup.js): a note at the top of the menu, and a dot on the Account
   button when the last one failed. */
.menu-note { max-width: 300px; padding: 8px 10px 9px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.menu-note p { margin: 0; }
.backup-status { font: 600 13px/1.3 var(--font-ui); color: var(--text); }
.backup-status.failed { color: var(--danger); }
.backup-detail { margin-top: 3px !important; font: 12px/1.4 var(--font-ui); color: var(--text-3); overflow-wrap: anywhere; }
.account.backup-failed summary::before { content: ""; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--danger); }

/* ---------- views ---------- */

.view { padding: 28px 32px 56px; margin: 0 auto; }
.view-narrow { max-width: 900px; }
.view-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.view-head h2 { margin: 0 0 4px; font-size: 22px; font-weight: 600; }
.view-head p { margin: 0; font-size: 14px; color: var(--text-3); max-width: 70ch; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.stack { display: flex; flex-direction: column; gap: 12px; }

.subtabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); }
.subtab {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 12px; border: 0; background: transparent; cursor: pointer;
  font: 600 12px/1 var(--font-ui); letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3);
}
.subtab:hover { color: var(--text-2); }
.subtab[aria-pressed="true"] { color: var(--text); }
/* Sub-tabs are tabs too: the same accent underline. */
.subtab[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent-grad);
}
.subtab .badge { margin-left: 2px; }

/* ---------- workspace: sidebar + desk (manuscript and codex) ---------- */

.workspace {
  display: grid; grid-template-columns: 280px minmax(0, 1fr);
  max-width: none; padding: 0; align-items: stretch;
  min-height: calc(100vh - var(--topbar-h));
}
.sidebar {
  position: sticky; top: var(--topbar-h); align-self: start;
  height: calc(100vh - var(--topbar-h));
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 0 12px;
  background: var(--chrome); border-right: 1px solid var(--line);
  overflow: hidden;
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 18px; }
.sidebar-head h2 { margin: 0; }
.sidebar-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sidebar-actions .btn.ghost { border-color: var(--line-strong); color: var(--text); }
.sidebar-actions .btn.ghost:hover:not(:disabled) { border-color: #3a3e45; }
.sidebar .filter { margin: 0 18px; width: calc(100% - 36px); font-size: 13.5px; }
.toc { overflow-y: auto; padding: 0 0 8px; }
.toc h3 { margin: 12px 18px 6px; }
.toc h3:first-child { margin-top: 2px; }
.toc h3 { font: 600 11px/1.2 var(--font-ui); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); }
.toc-item {
  position: relative;
  display: grid; grid-template-columns: 2.4em 1fr; align-items: baseline; gap: 2px 6px;
  width: 100%; padding: 9px 18px; border: 0;
  background: transparent; text-align: left; cursor: pointer;
  font: 14px/1.35 var(--font-ui); color: var(--text-2);
}
.toc-item:hover { background: var(--hover); color: var(--text); }
.toc-item[aria-current="true"] { background: var(--active-row); color: var(--text); }
/* Accent use 2 of 3: the active row's left edge. */
.toc-item[aria-current="true"]::before, .scene-card[aria-current="true"]::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent-edge);
}
.toc-num { color: var(--text-3); font: 500 12px/1.35 var(--font-mono); }
.toc-item[aria-current="true"] .toc-num { color: var(--text-2); }
.toc-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.toc-meta { color: var(--text-3); font: 12px/1.3 var(--font-ui); }
.toc-item.chapter { grid-template-columns: 2.4em 1fr; }
.toc-item.chapter .toc-meta { grid-column: 2; }
.toc-item.entry { grid-template-columns: 28px 1fr; align-items: center; }
.toc-item.entry .toc-sub { display: block; color: var(--text-3); font-size: 12px; }
.toc-item.sparse .toc-title { color: var(--text-3); font-style: italic; }
.toc-empty { padding: 10px 18px; color: var(--text-3); font-size: 13.5px; }
.toc-thumb { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--raised); border: 1px solid var(--line-strong); }
div.toc-thumb { display: block; }

.desk { min-width: 0; display: flex; flex-direction: column; background: var(--surface); }

.doc-bar {
  position: sticky; top: var(--topbar-h); z-index: 5;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 20px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.format { display: flex; align-items: center; gap: 2px; }
.tool {
  min-width: 30px; height: 30px; padding: 0 7px;
  border: 0; border-radius: 5px; background: transparent;
  font: 15px/1 var(--font-ui); cursor: pointer; color: var(--text-2);
}
.tool:hover { background: var(--hover); color: var(--text); }
/* Lit while it's on at the caret: bold, italic, a highlight. */
.tool[data-command][aria-pressed="true"], .highlight-toggle[aria-pressed="true"] { background: var(--line-strong); color: var(--text); }
.tool-sep { width: 1px; height: 18px; background: var(--line-strong); margin: 0 6px; }

/* Spelling and grammar (proofread.js): the toggle, the count (click for the next one),
   the underlines and the popup. Red and blue like Docs, apart from the accent. */
.proof-toggle { font: 600 11px/1 var(--font-ui); letter-spacing: 0.04em; color: var(--text-3); }
.proof-toggle span { margin-left: 1px; }
.proof-toggle[aria-pressed="true"] { color: var(--text); }
.proof-next { min-width: 26px; font: 600 11.5px/1 var(--font-mono); color: var(--text-3); }
.proof-next[data-state="some"] { color: #f08a84; }
.proof-next[data-state="error"] { color: var(--warn); }
::highlight(proof-spelling) { text-decoration: underline wavy #e5534b; text-decoration-skip-ink: none; text-underline-offset: 4px; }
::highlight(proof-grammar) { text-decoration: underline wavy #5b9cf0; text-decoration-skip-ink: none; text-underline-offset: 4px; }
.proof-pop {
  position: fixed; z-index: 45; width: max-content; max-width: min(340px, calc(100vw - 16px));
  padding: 10px 12px 8px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--raised); box-shadow: var(--shadow-float);
  font: 13.5px/1.45 var(--font-ui); color: var(--text);
}
.proof-pop[hidden] { display: none; }
.proof-kind { margin: 0 0 2px; font: 600 10.5px/1.2 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.proof-message { margin: 0 0 8px; color: var(--text-2); }
.proof-fixes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.proof-fix {
  padding: 4px 10px; border: 0; border-radius: 5px; cursor: pointer;
  background: var(--accent-grad); color: var(--on-accent); font: 600 13.5px/1.3 var(--font-ui);
}
.proof-fix:hover { filter: brightness(1.06); }
.proof-none { color: var(--text-3); font-style: italic; }
.proof-actions { display: flex; gap: 4px; margin: 0 -6px; padding-top: 6px; border-top: 1px solid var(--line); }
.proof-actions button {
  padding: 4px 6px; border: 0; border-radius: 5px; background: transparent; cursor: pointer;
  font: 13px/1.3 var(--font-ui); color: var(--text-2);
}
.proof-actions button:hover { background: var(--hover); color: var(--text); }
/* Status: a small semantic dot and grey text, never the accent. */
.save-status { margin-left: 8px; font: 13px/1 var(--font-ui); color: var(--text-3); display: inline-flex; align-items: center; gap: 7px; }
.save-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.save-status[data-state="dirty"]::before, .save-status[data-state="saving"]::before { background: var(--text-3); }
.save-status[data-state="error"]::before { background: var(--danger); }
.save-status[data-state="error"] { color: var(--danger); }
.save-status:empty::before { display: none; }
.doc-actions { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.doc-actions .btn { padding: 6px 12px; font-size: 13px; }
.doc-actions .btn.primary { padding: 6px 14px; }
.doc-actions .btn.ghost { border-color: var(--line-strong); color: var(--text); }
.doc-actions .btn.ghost:hover:not(:disabled) { border-color: #3a3e45; }
.doc-actions .btn.ghost.danger { color: var(--danger); }

.conflict {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px 20px 0; padding: 10px 14px; border-radius: var(--radius);
  background: var(--warn-soft); color: var(--warn); font: 13.5px/1.4 var(--font-ui);
}
.conflict span { flex: 1; min-width: 220px; }

/* ---------- the manuscript page ---------- */

.page-wrap { display: grid; grid-template-columns: minmax(0, 1fr); }
.page {
  width: 100%; max-width: 780px; margin: 0 auto;
  padding: 48px 32px 120px;
}
.page-head { margin-bottom: 30px; }
.page-kicker {
  display: flex; align-items: baseline; gap: 10px;
  color: var(--text-3); font: 500 11.5px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.bare {
  border: 0 !important; background: transparent !important; padding: 2px 4px !important;
  border-radius: 4px !important; color: inherit;
}
.bare:hover { background: var(--hover) !important; }
.page-kicker .bare { width: auto; margin-left: -4px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--text-3); field-sizing: content; min-width: 3ch; max-width: 24ch; }
.page-kicker .number { min-width: 2ch; margin-left: -6px; }
.page-kicker label { cursor: text; }
/* The manuscript's typefaces: Source Serif 4 for the chapter title, Bespoke Serif for the text. */
.page-title {
  display: block; width: 100%; margin: 12px 0 10px -4px;
  font: 600 32px/1.2 var(--font-prose) !important; letter-spacing: -0.005em; color: var(--text);
}
.page-title::placeholder { color: var(--line-strong); }
.page-stats { margin: 0; color: var(--text-3); font: 13px/1.4 var(--font-ui); }

.manuscript {
  min-height: 60vh;
  font: 18.5px/1.8 var(--font-manuscript);
  color: var(--prose); caret-color: var(--text);
  hyphens: manual; outline: none; /* whole words wrap to the next line, never split with a hyphen */
}
.manuscript:focus-visible { outline: none; } /* the caret shows where you are */
.manuscript p { margin: 0 0 1.05em; }
.manuscript hr { border: 0; height: auto; margin: 2em 0 1.8em; text-align: center; overflow: visible; scroll-margin-top: 130px; }
.manuscript hr::before { content: "⁂"; color: var(--text-3); font-size: 18px; letter-spacing: 0.3em; }
/* The scene a break begins, labelled under the ⁂ (set by the page; never saved). */
.manuscript hr::after {
  content: attr(data-label); display: block; margin-top: 4px;
  font: 500 10.5px/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3);
}
.manuscript em { font-style: italic; }
.manuscript strong { font-weight: 600; color: var(--text); }

.empty-desk {
  max-width: 520px; margin: 14vh auto; padding: 36px 32px; text-align: center; color: var(--text-3);
  border: 1px dashed var(--line-strong); border-radius: var(--radius-lg);
}
.empty-desk h3 { color: var(--text); margin: 0 0 6px; font-size: 17px; }
.empty-desk p { margin: 0; font-size: 14px; }

/* ---------- manuscript: sidebar (chapters, scenes, critiques, to-do), page, rail ---------- */

/* The sidebar's width: the default, or what it's been dragged to (resize.js sets
   --side-w). It's the same for every tab, so switching tabs never moves the page: wide
   enough for the sentences in Critiques and To-do, and for the lists. The page keeps 380px
   (resize.js's MIN_PAGE); short of room for that, in a small or zoomed-in window, the
   sidebar gives way. */
.manuscript-space {
  --side-default: 320px;
  --side-col: var(--side-w, var(--side-default));
  --side-track: minmax(150px, var(--side-col));
  position: relative;
  grid-template-columns: var(--side-track) minmax(380px, 1fr);
  padding-right: 14px;
}
/* Each in its own column, so hiding the sidebar leaves the page where it is. */
.manuscript-space > .sidebar { grid-column: 1; grid-row: 1; }
.manuscript-space > .desk { grid-column: 2; grid-row: 1; }
.manuscript-space .sidebar-head { flex-wrap: wrap; row-gap: 10px; }

/* The sidebar's edge, to drag: a strip over its hairline that lights up under the pointer. */
.col-resizer {
  position: absolute; top: 0; bottom: 0; z-index: 6; width: 9px;
  cursor: col-resize; touch-action: none;
  /* Placed by the sidebar's column, whatever width that comes out at. */
  grid-column: 1 / 2; right: -4px;
}
.col-resizer::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 3px;
  background: transparent; transition: background 0.12s ease;
}
.col-resizer:hover::after { background: var(--line-strong); }
.col-resizer.dragging::after, .col-resizer:focus-visible::after { background: var(--focus); }
.col-resizer:focus-visible { outline: none; } /* the lit edge shows where you are */

/* The sidebar can be hidden, from the button at the start of the toolbar (resize.js).
   It comes back by itself while no chapter is open: there's no toolbar then, and
   nothing else to pick a chapter from. */
.manuscript-space.sidebar-collapsed:not(.no-chapter) { --side-track: 0px; }
.manuscript-space.sidebar-collapsed:not(.no-chapter) > .sidebar,
.manuscript-space.sidebar-collapsed:not(.no-chapter) > .col-resizer { display: none; }
/* The button: a little window, with the sidebar's pane filled in while it's showing. */
.side-toggle { display: inline-grid; place-items: center; }
.side-toggle::before {
  content: ""; width: 16px; height: 12px; border: 1.5px solid currentColor; border-radius: 3px;
  background: linear-gradient(currentColor, currentColor) no-repeat left / 5px 100%;
}
.side-toggle[aria-expanded="false"]::before { background-size: 1.5px 100%; background-position: 4px 0; }

/* Pinned to the window's right edge, right beside the page scrollbar and just as tall. */
.scene-rail {
  position: fixed; top: 0; right: 0; bottom: 0; width: 14px; z-index: 11;
  background: var(--chrome); border-left: 1px solid var(--line);
}
.rail-track { position: relative; height: 100%; cursor: pointer; }
.rail-seg { position: absolute; left: 3px; right: 3px; padding: 0; border: 0; border-radius: 3px; background: var(--status-none); cursor: pointer; }
.rail-seg[data-status="1"] { background: var(--status-1); }
.rail-seg[data-status="2"] { background: var(--status-2); }
.rail-seg[data-status="3"] { background: var(--status-3); }
.rail-seg[data-status="4"] { background: var(--status-4); }
.rail-seg[data-status="5"] { background: var(--status-5); }
.rail-seg:hover, .rail-seg:focus-visible { filter: brightness(1.2); outline: 2px solid var(--focus); outline-offset: 1px; }
.rail-view { position: absolute; left: 0; right: 0; top: 0; height: 0; border: 1.5px solid var(--text-2); border-radius: 4px; pointer-events: none; opacity: 0.6; }

/* Your marker, where you stopped (marker.js): a line across the rail, a flag in the
   page's margin beside its line, and the right-click menu that puts it there. It's the
   accent, which no scene status uses. */
.rail-mark {
  position: absolute; left: 0; right: 0; height: 4px; margin-top: -2px; padding: 0; border: 0; border-radius: 2px;
  background: var(--accent); box-shadow: 0 0 0 1.5px var(--chrome); cursor: pointer;
}
.rail-mark::before { content: ""; position: absolute; inset: -5px 0; } /* easier to hit */
.rail-mark:hover, .rail-mark:focus-visible { background: #fff; }
.page { position: relative; }
.place-mark { position: absolute; left: 12px; width: 2px; border-radius: 1px; background: var(--accent); }
.place-mark::after { content: ""; position: absolute; left: 2px; top: 1px; border: 5px solid transparent; border-left: 7px solid var(--accent); }
.place-mark.arrived { animation: marker-arrived 0.5s ease-out 3; }
@keyframes marker-arrived { 50% { opacity: 0.15; } }
.marker-go { color: var(--accent); }

/* Highlights, for words to come back to and edit (highlights.js): a highlighter's yellow
   over the words, the same on the toolbar's button, and a tick across the rail for each.
   Yellow is no scene status, and isn't the marker's accent. */
::highlight(edit-highlight) { background-color: rgb(var(--highlight) / 0.3); }
::highlight(edit-highlight-at) { background-color: rgb(var(--highlight) / 0.75); color: var(--chrome); }
.highlight-toggle span { padding: 2px 4px; border-radius: 3px; background: rgb(var(--highlight) / 0.3); font: 600 12px/1 var(--font-ui); color: var(--text); }
.rail-highlight {
  position: absolute; left: 0; right: 0; padding: 0; border: 0; border-radius: 1.5px;
  background: rgb(var(--highlight)); box-shadow: 0 0 0 1px var(--chrome); cursor: pointer;
}
.rail-highlight::before { content: ""; position: absolute; inset: -4px 0; } /* easier to hit */
.rail-highlight:hover, .rail-highlight:focus-visible { background: #fff; }
.spot-menu {
  position: fixed; z-index: 45; min-width: 190px; padding: 5px;
  display: flex; flex-direction: column;
  background: var(--raised); border-radius: var(--radius); box-shadow: var(--shadow-float);
}
.spot-menu button {
  padding: 8px 10px; border: 0; border-radius: 4px;
  background: transparent; text-align: left; cursor: pointer; font: 13.5px/1.3 var(--font-ui); color: var(--text-2);
}
.spot-menu button:hover, .spot-menu button:focus-visible { background: var(--hover); color: var(--text); }
.spot-hint { margin: 4px 0 0; padding: 7px 10px 3px; border-top: 1px solid var(--line); font: 11.5px/1.3 var(--font-ui); color: var(--text-3); }

/* The sidebar's tabs (checklist.js): Chapters, and the open chapter's Scenes, Critiques
   and To-do, which are greyed out while no chapter is open. Each tab's pane scrolls by
   itself, under the tabs. */
.manuscript-space > .sidebar { container: sidebar / inline-size; }
/* Always one row: the tabs tighten as the sidebar narrows, drop their counts, and at
   the very narrowest shorten with an ellipsis rather than wrap. The steps are where the
   four of them, with two-digit counts, stop fitting: the sidebar's default width keeps
   the counts. */
.side-tabs { flex: none; flex-wrap: nowrap; padding: 0 6px; margin-top: -8px; gap: 0; }
.side-tabs .subtab {
  display: block; flex: 0 1 auto; min-width: 0; padding: 10px 6px;
  font-size: 11px; letter-spacing: 0.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.side-tabs .subtab .pill-count { margin-left: 4px; }
.side-tabs .subtab .pill-count:empty { display: none; }
.side-tabs .subtab[aria-pressed="true"]::after { left: 6px; right: 6px; bottom: 0; }
@container sidebar (max-width: 330px) {
  .side-tabs { padding: 0 4px; }
  .side-tabs .subtab { padding: 10px 4px; letter-spacing: 0.01em; }
  .side-tabs .subtab .pill-count { margin-left: 3px; }
  .side-tabs .subtab[aria-pressed="true"]::after { left: 4px; right: 4px; }
}
@container sidebar (max-width: 295px) {
  .side-tabs .subtab { padding: 10px 3px; font-size: 10.5px; letter-spacing: 0; }
  .side-tabs .subtab[aria-pressed="true"]::after { left: 3px; right: 3px; }
}
@container sidebar (max-width: 274px) {
  .side-tabs .pill-count { display: none; }
}
.side-tabs .subtab:disabled { opacity: 0.4; cursor: default; }
.side-tabs .subtab:disabled:hover { color: var(--text-3); }
.side-pane { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.side-pane[hidden] { display: none; }
.side-pane > .hint { padding: 0 18px; }
.chapters-pane { overflow: hidden; gap: 12px; }
.chapters-pane .toc { flex: 1; min-height: 0; }

/* The chapter's critiques as a checklist, ticked off while revising. */
.checklist-pane { padding: 0 18px 24px; gap: 12px; }
.checklist-pane select { font-size: 13px; padding: 6px 8px; }
.checklist-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.checklist-tools[hidden] { display: none; }
.checklist-progress { flex: 1; display: flex; flex-direction: column; gap: 5px; font: 12px var(--font-mono); color: var(--text-2); }
.checklist-track { height: 4px; background: var(--hover); border-radius: 2px; overflow: hidden; }
.checklist-bar { height: 100%; width: 0; background: var(--accent-grad); transition: width 0.2s ease-out; }
.checklist-tools .check { font-size: 12.5px; white-space: nowrap; }
.checklist { display: flex; flex-direction: column; gap: 2px; font: 13.5px/1.55 var(--font-ui); color: var(--text); overflow-wrap: anywhere; }
.checklist-heading {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: 16px 0 4px; font: 600 13.5px/1.35 var(--font-ui); color: var(--text);
}
.checklist-heading:first-child { margin-top: 0; }
h3.checklist-heading { font-size: 15px; }
.checklist-heading.complete { color: var(--text-3); }
.section-count { font: 11.5px var(--font-mono); color: var(--text-3); flex: none; }
.checklist-heading.complete .section-count::after { content: " ✓"; }
.point-lead { margin: 4px 0 0; color: var(--text-2); }
.point { display: flex; align-items: flex-start; gap: 9px; padding: 6px 8px; margin: 0 -8px; border-radius: 6px; }
.point.findable:hover { background: var(--hover); }
.point.findable .point-body { cursor: pointer; }
.point.found { background: var(--active-row); }
.point-body:focus-visible { outline-offset: 3px; border-radius: 2px; }
.point.nested { margin-left: 14px; }
.point input { margin-top: 3px; cursor: pointer; }
.point-body { min-width: 0; }
.point-body p, .point-body blockquote, .point-body .table-wrap { margin: 0; }
.point-body > * + * { margin-top: 6px; }
.point-body ul { margin: 0; padding-left: 18px; }
.point-title { font-weight: 650; }
.point-body blockquote { padding-left: 10px; border-left: 2px solid var(--line-strong); color: var(--text-2); font-style: italic; }
.point-body code { font: 0.85em var(--font-mono); background: var(--raised); padding: 1px 4px; border-radius: 3px; }
.point-body strong { font-weight: 650; }
.point-body table { border-collapse: collapse; font-size: 12.5px; }
.point-body th, .point-body td { border: 1px solid var(--line); padding: 4px 6px; text-align: left; vertical-align: top; }
.point.done .point-body { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.checklist.hide-done .point.done { display: none; }
/* The passage a checklist point quotes, found in the page. */
::highlight(critique-passage) { background-color: rgba(207, 230, 255, 0.28); color: var(--text); }
.checklist-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 8px 0; }
.checklist-empty p { margin: 0; font-size: 14px; color: var(--text-2); }
/* The chapter's to-do list (todos.js): your own lines, each one editable, to tick off. */
.todo-pane > .hint { padding: 0; }
.todo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.todo-list:empty { display: none; }
.todo { display: flex; align-items: flex-start; gap: 5px; padding: 3px 2px 3px 8px; margin: 0 -8px; border-radius: 6px; }
.todo:hover, .todo:focus-within { background: var(--hover); }
.todo[hidden] { display: none; }
.todo > input[type="checkbox"] { margin-top: 7px; cursor: pointer; }
.todo textarea {
  flex: 1; min-width: 0; padding: 3px 4px; border: 0; border-radius: 4px; background: transparent;
  font: 13.5px/1.55 var(--font-ui); color: var(--text); resize: none; overflow: hidden; field-sizing: content;
}
.todo.done textarea { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.todo .icon-btn { margin-top: 3px; visibility: hidden; }
.todo:hover .icon-btn, .todo:focus-within .icon-btn { visibility: visible; }
.todo-list.hide-done .todo.done { display: none; }
.todo-plus { flex: none; width: 15px; margin-top: 3px; text-align: center; font: 15px/1.55 var(--font-ui); color: var(--text-3); }
.todo-list .error-box { margin: 0; }
.scene-list { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; }
.scene-card { position: relative; }
.scene-card[aria-current="true"] { background: var(--active-row); }
.scene-jump {
  display: grid; grid-template-columns: 1.8em 1fr auto; gap: 2px 6px; align-items: baseline;
  width: 100%; padding: 9px 18px; border: 0; background: transparent; text-align: left; cursor: pointer;
  font: 14px/1.35 var(--font-ui); color: var(--text-2);
}
.scene-jump:hover { background: var(--hover); color: var(--text); }
.scene-card[aria-current="true"] .scene-jump { color: var(--text); }
.scene-num { color: var(--text-3); font: 500 12px/1.35 var(--font-mono); }
.scene-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.scene-name.untitled { font-style: italic; font-weight: 400; }
.scene-words { color: var(--text-3); font: 11.5px/1.35 var(--font-mono); }
.scene-status-line { grid-column: 2 / -1; display: flex; align-items: center; gap: 6px; font: 12px/1.3 var(--font-ui); color: var(--text-3); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--status-none); flex: none; }
.status-dot[data-status="1"] { background: var(--status-1); }
.status-dot[data-status="2"] { background: var(--status-2); }
.status-dot[data-status="3"] { background: var(--status-3); }
.status-dot[data-status="4"] { background: var(--status-4); }
.status-dot[data-status="5"] { background: var(--status-5); }
.scene-edit { display: flex; flex-direction: column; gap: 6px; padding: 2px 18px 14px calc(18px + 1.8em + 6px); }
.scene-edit input, .scene-edit select { font-size: 13px; padding: 5px 8px; }
.scene-when { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.scene-edit textarea { font: 13.5px/1.5 var(--font-ui); min-height: 70px; resize: none; overflow: hidden; }

/* How many words are selected, shown just above the selection. */
.selection-count {
  position: fixed; z-index: 40; transform: translate(-50%, calc(-100% - 8px));
  padding: 3px 9px; border-radius: 999px;
  background: #e8e9ec; color: var(--chrome);
  font: 600 11.5px/1.4 var(--font-mono);
  pointer-events: none; white-space: nowrap; box-shadow: var(--shadow-float);
}

/* ---------- codex entry ---------- */

.entry-page { max-width: 780px; }
.entry-page .page-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 22px; align-items: end; }
.entry-page .page-head .entry-image { grid-row: 1 / span 2; }
.entry-page .page-title { margin-bottom: 0; }
#entry-type { padding: 2px 9px; border: 1px solid var(--line-strong); border-radius: 999px; letter-spacing: 0.1em; }
.entry-image {
  position: relative; width: 132px; height: 132px; margin: 0;
  display: grid; place-items: center;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-lg);
  background: var(--raised); overflow: hidden;
}
.entry-image.has-image { border-style: solid; border-color: var(--line); }
.entry-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.entry-image-actions { position: relative; display: flex; flex-direction: column; gap: 6px; }
.entry-image.has-image .entry-image-actions {
  position: absolute; left: 0; right: 0; bottom: 0; flex-direction: row; justify-content: center; padding: 8px;
  background: linear-gradient(transparent, rgb(0 0 0 / 0.65)); opacity: 0; transition: opacity 0.15s ease;
}
.entry-image.has-image:hover .entry-image-actions, .entry-image.has-image:focus-within .entry-image-actions { opacity: 1; }
.entry-image.busy { opacity: 0.6; }
.entry-grid { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; align-items: center; margin: 0 0 28px; }
.entry-grid label, .notes-label, .field-row input.field-name {
  font: 600 11px/1.3 var(--font-ui); letter-spacing: 0.09em; color: var(--text-3); text-transform: uppercase;
}
.entry-fields { display: flex; flex-direction: column; gap: 18px; margin-bottom: 14px; }
.field-row { position: relative; padding: 14px 0 0; border-top: 1px solid var(--line); }
.field-row input.field-name { width: calc(100% - 36px); border: 0; background: transparent; padding: 0 0 6px; }
.field-row.standard input.field-name { cursor: default; }
.field-row.standard input.field-name:focus-visible { outline: none; }
.field-row textarea, .notes {
  border: 0; background: transparent; padding: 0; resize: none; overflow: hidden;
  font: 15px/1.65 var(--font-ui); color: var(--text);
  field-sizing: content; min-height: 1.65em;
}
.field-row textarea:hover, .notes:hover { border: 0; }
.field-row textarea:focus-visible, .notes:focus-visible { outline-offset: 4px; }
.field-remove {
  position: absolute; right: 0; top: 10px;
  border: 0; background: transparent; color: var(--text-3); cursor: pointer; font-size: 16px; line-height: 1;
  padding: 4px 6px; border-radius: 4px;
}
.field-remove:hover { color: var(--danger); background: var(--danger-soft); }
.add-field { position: relative; margin-bottom: 22px; width: max-content; }
.add-field summary { list-style: none; }
.add-field summary::-webkit-details-marker { display: none; }
.add-field .menu {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 20; min-width: 220px; padding: 5px;
  display: flex; flex-direction: column;
  background: var(--raised); border-radius: var(--radius); box-shadow: var(--shadow-float);
}
.add-field .menu button {
  padding: 7px 10px; border: 0; border-radius: 4px; background: transparent; text-align: left; cursor: pointer;
  font: 13.5px/1.3 var(--font-ui); color: var(--text-2);
}
.add-field .menu button:hover { background: var(--hover); color: var(--text); }
.add-field .menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.notes-label { display: block; padding-top: 14px; border-top: 1px solid var(--line); margin-bottom: 6px; }
.notes { width: 100%; min-height: 6em; }
.approved { margin-top: 28px; padding: 16px 18px; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.approved h3 { margin: 0 0 4px; font-size: 14px; }
.approved ul { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.approved li { display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
.approved li .src { color: var(--text-3); font: 12px var(--font-ui); white-space: nowrap; }
.approved li button { margin-left: auto; }
.entry-flags { margin-top: 24px; font: 13.5px var(--font-ui); color: var(--text-3); }
.entry-flags summary { cursor: pointer; }
.entry-flags .check { display: flex; margin: 8px 0 0 4px; }

/* ---------- critique ---------- */

.view-critique {
  display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: 20px;
  max-width: 1440px; align-items: start;
}
/* Analyze: the left column switches between the critique form, the saved list and the
   timeline and relationship runs; the runs take the whole width (no critique beside them). */
.view-critique.runs-open { grid-template-columns: minmax(0, 880px); }
.critique-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.critique-side .subtabs { border-bottom: 0; }
.saved-panel { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.saved-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.saved-filters select { font-size: 13px; padding: 6px 8px; }
.saved-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - var(--topbar-h) - 190px); overflow-y: auto; }
.saved-item {
  position: relative; width: 100%; display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 10px 12px; border: 0; border-radius: var(--radius); background: transparent; cursor: pointer; color: var(--text-2);
  font: 13.5px/1.4 var(--font-ui);
}
.saved-item:hover { background: var(--hover); color: var(--text); }
.saved-item[aria-current="true"] { background: var(--active-row); color: var(--text); }
.saved-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.saved-when { font: 11.5px var(--font-mono); color: var(--text-3); }
.saved-heading { font-weight: 600; color: var(--text); }
.saved-meta { font-size: 12px; color: var(--text-3); }
.saved-preview { font-size: 12.5px; color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.saved-empty { padding: 16px 12px; font-size: 13.5px; }
.saved-group { padding: 12px 12px 4px; }
.saved-group:first-child { padding-top: 2px; }
.saved-group .book-title { margin: 0; }
.saved-tags { display: flex; gap: 4px; flex-wrap: wrap; }

/* Grows to fit its fields (no inner scrollbar); the page scrolls instead. */
.input-panel { padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > label, .label-row label, .field legend, .context summary {
  font: 600 11px/1.3 var(--font-ui); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3);
}
.field legend { padding: 0; margin-bottom: 6px; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; }
.optional { font: 400 12px var(--font-ui); text-transform: none; letter-spacing: 0; }
.count { font: 11.5px var(--font-mono); color: var(--text-3); }
.count.over { color: var(--danger); font-weight: 600; }
#text { font: 14px/1.6 var(--font-ui); min-height: 170px; }

.segmented { display: flex; flex-wrap: wrap; gap: 6px; }
.segmented button {
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--text-2);
  cursor: pointer; font: 500 13px/1.3 var(--font-ui);
}
.segmented button:hover { background: var(--hover); color: var(--text); }
.segmented button[aria-checked="true"] { background: rgb(232 233 236 / 0.1); border-color: rgb(232 233 236 / 0.35); color: var(--text); }

.context summary { cursor: pointer; list-style: none; }
.context summary::-webkit-details-marker { display: none; }
.context summary::before { content: "▸"; display: inline-block; width: 1em; }
.context[open] summary::before { content: "▾"; }
.context summary .muted { font: 400 12.5px var(--font-ui); text-transform: none; letter-spacing: 0; margin-left: 4px; }
.context-body { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; align-items: center; margin-top: 10px; font: 13.5px var(--font-ui); color: var(--text-2); }
.context-body select { width: auto; min-width: 90px; }
.context-body .wide { grid-column: 1 / -1; }

.actions-bar {
  position: sticky; bottom: 0;
  margin: 0 -18px -18px; padding: 12px 18px 16px;
  background: var(--surface); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  display: flex; flex-direction: column; gap: 8px;
}
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.actions .primary { flex: 1; }

.output-panel { min-height: 60vh; padding: 20px 28px 28px; min-width: 0; }
.output-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 32px; }
.status { color: var(--text-3); font: 13.5px var(--font-ui); display: flex; align-items: center; gap: 8px; }
.status.working::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-2); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }
.output-actions { display: flex; gap: 6px; }
.meta {
  display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: flex-start;
  margin: 12px 0 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
  font: 12.5px var(--font-ui); color: var(--text-3);
}
.meta details { flex-basis: 100%; }
.meta summary { cursor: pointer; width: max-content; }
.meta ul { margin: 8px 0 0; padding-left: 18px; columns: 2 220px; }
.meta li { break-inside: avoid; }
.usage { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--line); font: 12px var(--font-mono); color: var(--text-3); }

.empty { padding: 56px 12px; text-align: center; color: var(--text-3); }
.empty h3 { margin: 0 0 6px; color: var(--text); font-size: 16px; }
.empty p, .prose .empty p { margin: 0 auto; max-width: 46ch; font-size: 14px; }
/* The critique column is a reading width at the panel's left; the empty state centres in the whole panel. */
.prose:has(> .empty) { max-width: none; }

/* Rendered critiques and summaries: read as interface text, not manuscript. */
.prose { max-width: 74ch; font: 15px/1.7 var(--font-ui); color: var(--text); overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 12px; }
.prose h2 { font-size: 18px; margin: 30px 0 10px; }
.prose h3 { font-size: 15.5px; margin: 26px 0 8px; }
.prose h4, .prose h5 { font-size: 14px; margin: 20px 0 4px; color: var(--text-2); }
.prose p { margin: 0 0 12px; }
.prose ul, .prose ol { margin: 0 0 12px; padding-left: 22px; }
.prose li { margin: 3px 0; }
.prose li::marker { color: var(--text-3); }
.prose li > ul, .prose li > ol { margin: 4px 0; }
.prose blockquote { margin: 0 0 12px; padding: 2px 16px; border-left: 2px solid var(--line-strong); color: var(--text-2); font-style: italic; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code { font-family: var(--font-mono); font-size: 0.85em; background: var(--raised); padding: 1px 4px; border-radius: 3px; }
.prose strong { font-weight: 650; }
.prose hr { border: 0; height: auto; margin: 1.4em 0; text-align: center; }
.prose hr::after { content: "⁂"; color: var(--text-3); letter-spacing: 0.3em; }
.table-wrap { overflow-x: auto; margin: 0 0 12px; }
.prose table { border-collapse: collapse; font: 13.5px/1.45 var(--font-ui); }
.prose th, .prose td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
.prose th { background: var(--raised); }

/* Contradictions, side by side */
.contradictions { margin: 14px 0 6px; display: flex; flex-direction: column; gap: 12px; }
.contradictions h3 { margin: 0; font: 600 11px/1.2 var(--font-ui); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); }
.conflict-card { border: 1px solid var(--line); border-left: 2px solid var(--danger); border-radius: var(--radius); padding: 12px 14px; background: var(--raised); }
.conflict-issue { margin: 0 0 10px; font: 600 14px/1.4 var(--font-ui); }
.conflict-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.passage { min-width: 0; }
.passage-where { margin: 0 0 4px; font: 600 12px/1.3 var(--font-ui); color: var(--text-3); }
.passage blockquote { margin: 0; padding: 8px 12px; border-left: 2px solid var(--line-strong); background: var(--surface); border-radius: 0 4px 4px 0; font: 14px/1.6 var(--font-ui); color: var(--text-2); white-space: pre-line; }
.passage.missing blockquote { font-style: italic; color: var(--text-3); }
.passage .hint { margin-top: 4px; }
.echo-snippet mark, .passage mark { background: rgb(232 233 236 / 0.14); color: var(--text); padding: 0 2px; border-radius: 2px; }

/* ---------- updates: canon facts and timeline & setups ---------- */

.updates-section { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.group-title { margin: 14px 0 0; display: flex; align-items: center; gap: 10px; }
.group-title::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.card { padding: 16px 18px; transition: opacity 0.25s ease; }
.card.leaving { opacity: 0; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.card-title { font: 600 14.5px/1.35 var(--font-ui); }
.card-title .field-name { font: 400 14px var(--font-ui); color: var(--text-3); margin-left: 6px; }
.card-title .field-name::before { content: "·"; margin-right: 6px; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; }
.card .value { margin: 8px 0; font-size: 15px; color: var(--text); }
.card .evidence { margin: 8px 0; padding: 2px 14px; border-left: 2px solid var(--line-strong); font-style: italic; color: var(--text-2); font-size: 14px; }
.card .similar { margin: 8px 0 0; padding: 8px 12px; border-radius: var(--radius); background: var(--raised); font: 13px/1.45 var(--font-ui); color: var(--text-3); }
.card .similar.dup { background: var(--warn-soft); color: var(--warn); }
.card .similar q { font-style: italic; }
.card-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.card textarea { min-height: 80px; font: 14.5px/1.5 var(--font-ui); }

.story-runs { padding: 16px 18px; }
.story-runs .chart-head { margin-bottom: 8px; }
.story-runs h3 { margin: 0 0 4px; font-size: 15px; }
.run-status:empty { display: none; }
.story-runs > .hint:last-child { margin: 12px 0 0; }
.story-chapters { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.story-chapters li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, auto) auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font: 13.5px/1.4 var(--font-ui); }
.story-ch { font-weight: 500; }
.story-meta { font-size: 12px; text-align: right; }
.tag.state-new { color: var(--text-3); }
.tag.state-current { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.tag.state-changed { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.story-group { display: flex; flex-direction: column; gap: 10px; }
.story-group-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.story-group-head .group-title { margin: 0; flex: 1; }
.story-card { display: flex; flex-direction: column; gap: 8px; }
.story-was { margin: 0; font: 12.5px/1.4 var(--font-ui); color: var(--text-3); }
.story-was strong { color: var(--text); }
.story-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.story-field { display: flex; flex-direction: column; gap: 4px; }
.story-field > span { font: 600 10.5px/1.2 var(--font-ui); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); }
.story-field input, .story-field select, .story-field textarea { font-size: 13.5px; padding: 6px 9px; }
.tag.kind-dream, .tag.kind-vision { background: color-mix(in srgb, var(--dream) 18%, transparent); color: #bfb0ee; border-color: transparent; }
.tag.kind-memory { background: color-mix(in srgb, var(--memory) 18%, transparent); color: #74cccc; border-color: transparent; }
.tag.kind-mentioned { color: var(--text-3); }
.relation-arrow { color: var(--text-3); font-weight: 400; }
.tag.change-new { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.tag.change-changed { color: var(--text); }
.tag.change-ended { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
#relations-run-status:empty { display: none; }

/* Analyze → Drafts: rough chapters with their verdicts, the whole read and the outline. */
.drafts-panel { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.drafts-panel .chart-head { flex-wrap: nowrap; margin-bottom: 0; }
.drafts-panel .chart-head > div { flex: 1; min-width: 0; }
.drafts-controls { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; font: 13px var(--font-ui); color: var(--text-3); }
.drafts-controls select { font-size: 13px; padding: 6px 8px; min-width: 0; }
#drafts-book:not([hidden]) { grid-column: 1 / -1; }
#drafts-read-all { align-self: flex-start; }
.drafts-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.drafts-empty { padding: 14px 0 4px; border-top: 1px solid var(--line); font-size: 13.5px; }
.draft { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; margin: 0 -8px; border-top: 1px solid var(--line); font: 13.5px/1.4 var(--font-ui); }
.draft.is-reading { background: var(--active-row); }
.draft-top { display: flex; align-items: baseline; gap: 8px; }
.draft-pos { flex: none; min-width: 1.6em; text-align: right; font: 11.5px var(--font-mono); color: var(--text-3); }
.draft-title { flex: 1; min-width: 0; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.draft-title.link-btn { text-decoration-color: transparent; }
.draft-title.link-btn:hover { text-decoration-color: var(--text-2); }
.draft-reason, .draft-foot { margin: 0 0 0 calc(1.6em + 8px); }
.draft-reason {
  font-size: 12.5px; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.draft-reason strong { color: var(--text); font-weight: 600; }
.draft-foot { display: flex; align-items: center; gap: 4px; }
.draft-meta { flex: 1; min-width: 0; font-size: 12px; color: var(--text-3); }
.warn-text { color: var(--warn); }
.draft-menu { position: relative; }
.draft-menu summary { list-style: none; }
.draft-menu summary::-webkit-details-marker { display: none; }
.draft-menu .menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 230px; padding: 5px;
  display: flex; flex-direction: column;
  background: var(--raised); border-radius: var(--radius); box-shadow: var(--shadow-float);
}
.draft-menu .menu button {
  padding: 7px 10px; border: 0; border-radius: 4px; background: transparent; text-align: left; cursor: pointer;
  font: 13.5px/1.3 var(--font-ui); color: var(--text-2);
}
.draft-menu .menu button:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.draft-menu .menu button:disabled { opacity: 0.35; cursor: default; }
.draft-menu .menu button.danger-text { color: var(--danger); }
.draft-menu .menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.drafts-section { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.drafts-section h4 { margin: 0; font-size: 14px; }
.drafts-outline { display: block; }  /* a <details>: not reliably a flex container */
.drafts-outline summary { display: flex; align-items: baseline; gap: 8px; width: 100%; cursor: pointer; font-size: 12.5px; }
.drafts-outline summary .muted { color: var(--text-3); }
.drafts-outline[open] summary { margin-bottom: 8px; }
.drafts-outline > * + * { margin-top: 8px; }
.drafts-outline textarea { width: 100%; font: 14px/1.5 var(--font-ui); }

/* Verdicts, always written beside their colour. */
.verdict-keep { --verdict: var(--ok); }
.verdict-revise { --verdict: #8fb8e8; }
.verdict-rewrite { --verdict: var(--warn); }
.verdict-merge { --verdict: #bfb0ee; }
.verdict-cut { --verdict: var(--danger); }
.tag.verdict { flex: none; font-weight: 600; color: var(--verdict); background: color-mix(in srgb, var(--verdict) 15%, transparent); border-color: transparent; }
button.tag { cursor: pointer; }
button.tag:hover { filter: brightness(1.2); }
.verdict-box {
  margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius); border-left: 3px solid var(--verdict);
  background: color-mix(in srgb, var(--verdict) 7%, transparent); font: 14px/1.55 var(--font-ui); color: var(--text);
}
.verdict-box .tag { margin-right: 4px; }

/* ---------- search ---------- */

.search-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.search-bar input { font-size: 15px; padding: 9px 12px; }
.result-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.result-head strong { font: 600 15px var(--font-ui); }
.score { margin-left: auto; font: 12px var(--font-mono); color: var(--text-3); }
.result-text { margin: 8px 0 0; white-space: pre-wrap; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.result-open { margin-top: 10px; }

/* ---------- dialogs, toasts, tooltips ---------- */

.dialog {
  width: min(560px, calc(100vw - 32px)); padding: 0;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-float);
}
.dialog::backdrop { background: rgb(0 0 0 / 0.6); }
.dialog-body { display: flex; flex-direction: column; gap: 10px; padding: 22px; }
.dialog-body h2 { margin: 0 0 2px; font-size: 17px; }
.dialog-body > label { font: 600 11px var(--font-ui); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.history-list { list-style: none; margin: 4px 0 0; padding: 0; max-height: 55vh; overflow-y: auto; }
.history-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.history-list .when { font: 600 13.5px var(--font-ui); }
.history-list .why { font: 12px var(--font-ui); color: var(--text-3); }
.history-list .preview { grid-column: 1; font-size: 13px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-list button { grid-row: 1 / span 2; grid-column: 2; }

.share-create { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.share-create label, .share-new label { font: 600 11px var(--font-ui); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); }
.share-create select { width: auto; }
.share-new { display: flex; flex-direction: column; gap: 6px; }
.share-url-row { display: flex; gap: 8px; }
.share-url-row input { font: 12.5px var(--font-mono); }
.share-list-title { margin: 8px 0 0; font-size: 13px; }
.share-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font: 13px/1.4 var(--font-ui); color: var(--text-2); }
.share-links li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.toasts {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 50;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  width: min(560px, calc(100vw - 32px));
}
.toast {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-radius: var(--radius);
  background: #e8e9ec; color: var(--chrome); box-shadow: var(--shadow-float);
  font: 500 13.5px/1.4 var(--font-ui);
}
.toast.error { background: #3a2422; color: #f0c9c5; box-shadow: var(--shadow-float), inset 0 0 0 1px rgb(201 122 116 / 0.4); }
.toast button { border: 0; background: transparent; color: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0; }

.chart-tip {
  position: fixed; z-index: 45; pointer-events: none; transform: translate(-50%, calc(-100% - 10px));
  padding: 8px 11px; border-radius: var(--radius); background: var(--raised); box-shadow: var(--shadow-float);
  font: 12.5px/1.45 var(--font-ui); color: var(--text); white-space: nowrap;
}
.chart-tip strong { display: block; font-size: 14px; }
.chart-tip span { color: var(--text-3); }

/* ---------- review ---------- */

.view-review, .view-usage { max-width: 1180px; display: flex; flex-direction: column; gap: 18px; }
.view-review .view-head, .view-usage .view-head { margin-bottom: 0; }
.review-section { display: flex; flex-direction: column; gap: 18px; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.stat { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 4px; }
.stat-label { font: 600 11px/1.3 var(--font-ui); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); }
.stat-value { font: 600 24px/1.15 var(--font-ui); color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.stat.hero { grid-column: span 2; }
.stat.hero .stat-value { font-size: 40px; }
.stat-sub { font: 12px/1.35 var(--font-ui); color: var(--text-3); }

.chart-card { padding: 18px 22px 22px; }
.chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.chart-head h3 { margin: 0 0 4px; font-size: 15px; }
.chart-tools { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.book-title { margin: 18px 0 8px; }
.book-title:first-child { margin-top: 0; }

/* Horizontal bars: <=24px thick, square at the baseline, 4px rounded data end. */
.bars { position: relative; display: grid; grid-template-columns: minmax(120px, 240px) minmax(0, 1fr); gap: 6px 14px; }
.bar-label { font: 13.5px/18px var(--font-ui); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-label .num { color: var(--text-3); font: 500 12px/18px var(--font-mono); margin-right: 8px; }
.bar-area { position: relative; height: 18px; }
.bar { height: 18px; border-radius: 0 4px 4px 0; background: var(--bar); display: block; border: 0; padding: 0; cursor: default; }
.bar:hover, .bar:focus-visible { filter: brightness(1.15); outline: 2px solid var(--focus); outline-offset: 1px; }
.bar-value { position: absolute; top: 0; margin-left: 8px; white-space: nowrap; font: 11.5px/18px var(--font-mono); color: var(--text-3); }
.bar-value.inside { margin: 0 8px 0 0; color: var(--bar-ink); font-weight: 600; }
.bar-grid { position: absolute; inset: 0; pointer-events: none; }
.gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.avgline { position: absolute; top: -6px; bottom: -4px; width: 1px; background: var(--text-3); }
.axis { position: relative; height: 18px; margin-top: 4px; }
.axis span, .avg-label { position: absolute; transform: translateX(-50%); white-space: nowrap; font: 10.5px/18px var(--font-mono); color: var(--text-3); }
.avg-label { top: -24px; font-weight: 600; }

/* Heatmap: one steel-blue ramp, 2px gaps, zero is an empty outlined cell. */
.heatmap-scroll { overflow-x: auto; padding-bottom: 6px; }
.heatmap { display: grid; gap: 2px; align-items: center; width: max-content; min-width: 100%; }
.hm-head { font: 500 11px/1.2 var(--font-mono); color: var(--text-3); text-align: center; padding-bottom: 4px; }
.hm-name { font: 13.5px/1.2 var(--font-ui); color: var(--text-2); padding-right: 12px; white-space: nowrap; }
.hm-cell { height: 26px; min-width: 34px; border: 0; padding: 0; border-radius: 3px; font: 600 10.5px/26px var(--font-mono); text-align: center; color: transparent; cursor: default; }
.heatmap.numbers .hm-cell { color: var(--heat-ink-low); }
.heatmap.numbers .hm-cell[data-level="4"], .heatmap.numbers .hm-cell[data-level="5"], .heatmap.numbers .hm-cell[data-level="6"] { color: var(--heat-ink-high); }
.hm-cell[data-level="0"] { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.hm-cell[data-level="1"] { background: var(--heat-1); }
.hm-cell[data-level="2"] { background: var(--heat-2); }
.hm-cell[data-level="3"] { background: var(--heat-3); }
.hm-cell[data-level="4"] { background: var(--heat-4); }
.hm-cell[data-level="5"] { background: var(--heat-5); }
.hm-cell[data-level="6"] { background: var(--heat-6); }
.heatmap.numbers .hm-cell[data-level="0"] { color: var(--text-3); }
.hm-cell:hover, .hm-cell:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; position: relative; z-index: 1; }
.hm-gap { width: 10px; }
.legend { display: flex; align-items: center; gap: 6px; margin-top: 12px; font: 12px/1 var(--font-ui); color: var(--text-3); flex-wrap: wrap; }
.legend .swatch { width: 22px; min-width: 0; height: 12px; border-radius: 2px; display: inline-block; }
.absent { margin: 12px 0 0; font: 12.5px/1.5 var(--font-ui); color: var(--text-3); }

.data-table { border-collapse: collapse; width: 100%; font: 13.5px/1.4 var(--font-ui); color: var(--text-2); }
.data-table th { padding: 7px 10px; border-bottom: 1px solid var(--line-strong); text-align: left; font: 600 10.5px/1.3 var(--font-ui); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); }
.data-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.data-table tbody tr:hover td { background: rgb(255 255 255 / 0.02); }
.data-table td.num, .data-table th.num { text-align: right; }
.data-table td.num { font: 12.5px/1.4 var(--font-mono); color: var(--text); }
.data-table td.num strong { font-weight: 600; }

/* Chapter summaries */
.summaries-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#summaries-status:empty { display: none; }
#summaries-status { margin-bottom: 10px; }
.summary-item { border-top: 1px solid var(--line); }
.summary-item:last-child { border-bottom: 1px solid var(--line); }
.summary-item > summary { display: flex; align-items: center; gap: 10px; padding: 10px 2px; cursor: pointer; font: 500 14px/1.4 var(--font-ui); color: var(--text-2); list-style: none; }
.summary-item > summary:hover { color: var(--text); }
.summary-item > summary::-webkit-details-marker { display: none; }
.summary-item > summary::before { content: "▸"; width: 1em; color: var(--text-3); }
.summary-item[open] > summary { color: var(--text); }
.summary-item[open] > summary::before { content: "▾"; }
.summary-title { flex: 1; min-width: 0; }
.summary-text { padding: 0 2px 0 22px; font-size: 14px; }
.summary-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0 2px 14px 22px; }

/* Timeline */
.timeline-svg, .graph-svg { width: 100%; height: auto; display: block; overflow: visible; }
.tl-grid { stroke: var(--line); stroke-width: 1; }
.tl-chapter { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 4; }
.tl-label { fill: var(--text-3); font: 11px var(--font-mono); }
.tl-axis { fill: var(--text-3); font: 600 11px var(--font-ui); letter-spacing: 0.06em; }
.tl-line { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-linejoin: round; }
.tl-dot { fill: var(--bar); stroke: var(--surface); stroke-width: 2; cursor: pointer; }
.tl-dot.flashback { fill: var(--flashback); }
.tl-dot.memory { fill: var(--memory); }
.tl-dot.dreamy { fill: var(--surface); stroke: var(--dream); stroke-width: 2.5; }
/* No time of its own: placed at the time before it (dashed, hollow). */
.tl-dot.inferred { fill: var(--surface); stroke: var(--bar); stroke-width: 2; stroke-dasharray: 2.5 2; }
.tl-dot.inferred.dreamy { stroke: var(--dream); }
.tl-dot:hover, .tl-dot:focus-visible { stroke: var(--text); outline: none; }
.tl-event { fill: var(--bar); stroke: var(--surface); stroke-width: 1.5; }
.tl-event.kind-dream, .tl-event.kind-vision { fill: var(--surface); stroke: var(--dream); stroke-width: 2; }
.tl-event.kind-mentioned { fill: var(--text-3); }
.tl-event:hover, .tl-event:focus-visible { stroke: var(--text); outline: none; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bar); display: inline-block; }
.legend-dot.flashback { background: var(--flashback); }
.legend-dot.memory { background: var(--memory); }
.legend-dot.dreamy { background: transparent; border: 2px solid var(--dream); width: 9px; height: 9px; }
.legend-dot.inferred { background: transparent; border: 2px dashed var(--bar); width: 9px; height: 9px; }
.legend-diamond { width: 8px; height: 8px; background: var(--bar); transform: rotate(45deg); display: inline-block; margin: 0 2px; }
.legend-diamond.dreamy { background: transparent; border: 2px solid var(--dream); width: 7px; height: 7px; }
.tl-day + .tl-day { margin-top: 14px; }
.tl-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tl-events li { display: grid; grid-template-columns: 3.4em 1.2em minmax(0, 1fr) auto; gap: 10px; align-items: baseline; font: 14px/1.45 var(--font-ui); color: var(--text-2); }
.tl-events li strong { color: var(--text); font-weight: 600; }
.tl-clock { color: var(--text-3); font: 12px var(--font-mono); }
.tl-icon { color: var(--text-3); font-size: 11px; text-align: center; }
.tl-events li.dreamy .tl-icon, .event-row.dreamy .event-title { color: #bfb0ee; }
.tl-events li.dreamy .tl-what { font-style: italic; }
.tl-tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.tl-place-row { display: grid; grid-template-columns: minmax(90px, 170px) minmax(0, 320px) auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 3px 0; }
.tl-scene { font: 13.5px/1.3 var(--font-ui); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-place-row input { padding: 5px 9px; font-size: 13px; }
.tl-place-row select { width: auto; padding: 5px 8px; font-size: 13px; }
.tl-parsed { font: 12px var(--font-mono); color: var(--text-3); }
.tl-parsed.ok { color: var(--ok); }
.tl-parsed.bad { color: var(--warn); }
.event-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.event-row { display: grid; grid-template-columns: minmax(110px, 170px) minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font: 14px/1.4 var(--font-ui); }
.event-when { font: 12px var(--font-mono); color: var(--text-3); }
.event-edit { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.event-edit input, .event-edit select { font-size: 13.5px; padding: 6px 9px; }
.event-edit-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }

/* Setups & payoffs */
.thread-add { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.thread-add input { flex: 2; min-width: 200px; }
.thread-add select { flex: 1; min-width: 160px; width: auto; }
.thread { position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px 12px 16px; display: flex; flex-direction: column; gap: 6px; background: var(--raised); }
.thread::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; border-radius: var(--radius) 0 0 var(--radius); background: var(--text-3); }
.thread.status-paid::before { background: var(--ok); }
.thread.status-dropped { opacity: 0.65; }
.thread.status-dropped::before { background: var(--line-strong); }
.thread-head { display: flex; align-items: center; gap: 8px; }
.thread-title { flex: 1; min-width: 0; font: 600 15px/1.3 var(--font-ui) !important; }
.thread-status { width: auto; padding: 4px 8px; font-size: 12.5px; }
.thread textarea { font: 13.5px/1.5 var(--font-ui); resize: vertical; }
.thread .book-title { margin: 6px 0 2px; }
.thread-places { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font: 13.5px/1.45 var(--font-ui); color: var(--text-2); }
.thread-place { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.thread-quote { display: block; flex-basis: 100%; font-style: italic; color: var(--text-3); }
.thread-add-payoff { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.thread-add-payoff select { width: auto; min-width: 160px; font-size: 12.5px; padding: 5px 8px; }
.thread-add-payoff input { flex: 1; min-width: 160px; font-size: 12.5px; padding: 5px 8px; }

/* Relationships */
.g-shared { stroke: var(--bar); opacity: 0.35; }
.g-listed { fill: none; stroke: var(--text-2); stroke-width: 1.6; }
.g-listed.one-sided { stroke: var(--danger); stroke-dasharray: 6 4; }
.g-listed:hover, .g-listed:focus-visible { stroke-width: 3; outline: none; }
.g-arrowhead { fill: var(--text-2); }
.g-arrowhead.warn { fill: var(--danger); }
.g-node { fill: var(--raised); stroke: var(--text-3); stroke-width: 1.5; cursor: pointer; }
.g-node.absent { stroke-dasharray: 3 3; }
.g-node:hover, .g-node:focus-visible { fill: var(--hover); stroke: var(--text); outline: none; }
.g-name { fill: var(--text); font: 600 12.5px var(--font-ui); pointer-events: none; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.legend-line { width: 22px; height: 0; border-top: 2px solid var(--text-2); display: inline-block; }
.legend-line.one-sided { border-top: 2px dashed var(--danger); }
.legend-line.shared { border-top: 4px solid var(--bar); opacity: 0.5; }
.graph-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: start; }
.graph-card { padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }
.graph-card h3 { margin: 0; font-size: 14px; }

/* Prose patterns */
.watch-form { display: flex; gap: 8px; margin-bottom: 12px; }
.watch-form input { flex: 1; }
.count-cell[data-level="1"] { background: color-mix(in srgb, var(--heat-1) 35%, transparent); }
.count-cell[data-level="2"] { background: color-mix(in srgb, var(--heat-2) 45%, transparent); }
.count-cell[data-level="3"] { background: color-mix(in srgb, var(--heat-3) 55%, transparent); }
.count-cell[data-level="4"] { background: color-mix(in srgb, var(--heat-4) 65%, transparent); font-weight: 600; }
.openings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.openings li { display: grid; grid-template-columns: minmax(120px, 220px) 90px minmax(0, 1fr); gap: 10px; align-items: baseline; font: 13.5px/1.45 var(--font-ui); color: var(--text-2); }
.opening-text { font-style: italic; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag.opening-dialogue { color: var(--text); }
.echoes { margin-top: 10px; font: 13.5px/1.45 var(--font-ui); }
.echoes summary { cursor: pointer; color: var(--text-3); }
.echoes summary:hover { color: var(--text-2); }
.echoes ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.echo-word { display: block; font-weight: 600; color: var(--text); }
.echo-snippet { color: var(--text-3); }
.prose-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 18px; align-items: start; }
.word-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.word-bars li { display: grid; grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) auto; gap: 8px; align-items: center; font: 13.5px/1.3 var(--font-ui); color: var(--text-2); }
.word-track { height: 8px; }
.word-bar { display: block; height: 100%; background: var(--bar); border-radius: 0 4px 4px 0; }
.word-bars .num { color: var(--text-3); font: 11.5px var(--font-mono); text-align: right; }

/* Dialogue */
.dialogue-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.dialogue-tools label[for="dialogue-speaker"] { font: 600 11px var(--font-ui); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); }
.dialogue-tools select { width: auto; min-width: 220px; }
.dialogue-tools .filter { width: auto; flex: 1; min-width: 180px; }
.dialogue-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dialogue-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
.dialogue-line { font: 14.5px/1.55 var(--font-ui); color: var(--text); }
.dialogue-where { font: 12px var(--font-ui); color: var(--text-3); white-space: nowrap; }

/* ---------- plan: acts (columns) -> chapters (cards) -> scenes (rows) ---------- */

.view-plan { max-width: 1600px; }
.view-plan .view-head { align-items: flex-start; }
.plan-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.plan-filters .pill { padding: 4px 11px; font-size: 12.5px; }
.plan-acts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(340px, 1fr); gap: 16px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
.plan-act { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.plan-act-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; }
.plan-act-kicker { grid-column: 1 / -1; font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.plan-act-title { font: 600 17px/1.3 var(--font-ui) !important; min-width: 0; margin-left: -4px; }
.plan-act-tools { display: flex; gap: 2px; grid-row: 2; grid-column: 2; }
.plan-act-head .plan-meta { grid-column: 1 / -1; }
.plan-meta { margin: 0; color: var(--text-3); font: 12px/1.4 var(--font-ui); }
.plan-chapters { display: flex; flex-direction: column; gap: 8px; min-height: 56px; }
.plan-chapter { padding: 10px 12px 8px; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 4px; }
.plan-chapter-head { display: flex; align-items: center; gap: 6px; }
.plan-chapter-head .toc-num { font-size: 11.5px; }
.plan-chapter-title { flex: 1; min-width: 0; font: 600 14.5px/1.3 var(--font-ui) !important; }
.plan-chapter .plan-meta { padding-left: 24px; }
.plan-scenes { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; min-height: 10px; }
.plan-scene { display: grid; grid-template-columns: 16px 7px minmax(0, 1fr) auto auto auto; gap: 7px; align-items: center; padding: 2px 4px; border-radius: 4px; }
.plan-scene:hover { background: var(--hover); }
.plan-scene-title { font: 13px/1.3 var(--font-ui) !important; color: var(--text-2); min-width: 0; }
.plan-status { width: auto !important; padding: 2px 5px !important; font: 12px/1.3 var(--font-ui) !important; border-color: var(--line) !important; background: transparent !important; color: var(--text-3) !important; }
.plan-words { color: var(--text-3); font: 11px/1 var(--font-mono); min-width: 3.8em; text-align: right; }
.plan-scene.dim, .plan-chapter.dim { opacity: 0.35; }
.plan-chapter.dim:hover, .plan-scene.dim:hover { opacity: 0.8; }
.dragging { opacity: 0.4; }
.drop-marker { height: 2px; margin: -1px 0; border-radius: 2px; background: var(--text); flex: none; }
.plan-add { align-self: flex-start; }
.plan-empty { margin: 0; padding: 14px; text-align: center; color: var(--text-3); font: 13.5px/1.4 var(--font-ui); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.drag-handle { border: 0; background: transparent; padding: 0 2px; color: var(--text-3); cursor: grab; font: 14px/1 var(--font-ui); border-radius: 3px; }
.drag-handle:hover { color: var(--text); background: var(--hover); }
.drag-handle:active { cursor: grabbing; }

/* ---------- notes ---------- */

.note-form { padding: 16px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
/* A note's box is as tall as the note, while writing it and while editing it (autoGrow
   where there's no field-sizing), so the whole of it is in view, never a small box to
   scroll inside. */
.note-form textarea, .note textarea { font: 14.5px/1.6 var(--font-ui); resize: none; overflow: hidden; field-sizing: content; }
.note-form textarea { min-height: calc(4 * 1.6em + 16px); } /* room to start writing in */
.note textarea { min-height: calc(1.6em + 16px); }
.note-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.note-actions .hint { margin-right: auto; }
.note { padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; }
.note-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.note-when { margin: 0; font: 12px var(--font-mono); color: var(--text-3); }
.note-tools { display: flex; gap: 2px; }
.note-text { margin: 0; white-space: pre-wrap; font: 14.5px/1.6 var(--font-ui); color: var(--text); }
.change-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.change { padding: 2px 9px; border-radius: 999px; font: 11.5px/1.55 var(--font-ui); background: var(--raised); color: var(--text-3); border: 1px solid var(--line-strong); }
.change.up, .change.new { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.change.down, .change.gone { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.empty-notes { text-align: center; padding: 24px; }

/* ---------- usage ---------- */

.day-chart { position: relative; }
.day-max { position: absolute; top: -2px; left: 0; font: 11px var(--font-mono); color: var(--text-3); }
.day-bars { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; height: 160px; align-items: end; padding-top: 18px; border-bottom: 1px solid var(--line-strong); }
.day-col { height: 100%; display: flex; align-items: flex-end; cursor: default; }
.day-bar { width: 100%; max-width: 22px; margin: 0 auto; background: var(--bar); border-radius: 4px 4px 0 0; }
.day-bar.zero { height: 0; }
.day-axis { display: flex; justify-content: space-between; margin-top: 6px; font: 11px var(--font-mono); color: var(--text-3); }
.usage-period { display: flex; align-items: center; gap: 10px; font: 13.5px var(--font-ui); color: var(--text-2); }
.usage-period select { width: auto; }
.share-cell { min-width: 140px; display: flex; align-items: center; gap: 8px; font: 12px var(--font-mono); }
.share-track { flex: 1; height: 6px; background: var(--hover); border-radius: 3px; overflow: hidden; }
.share-bar { display: block; height: 100%; background: var(--bar); }

/* ---------- small screens ---------- */

/* The manuscript keeps its sidebar beside the page down to 600px, so zooming in doesn't
   move it away. */
@media (min-width: 1600px) {
  .manuscript-space { --side-default: 360px; }
}
@media (max-width: 1000px) {
  .workspace:not(.manuscript-space) { grid-template-columns: minmax(0, 1fr); }
  .workspace:not(.manuscript-space) .sidebar { position: static; height: auto; max-height: 45vh; border-right: 0; border-bottom: 1px solid var(--line); }
  .stat.hero { grid-column: 1 / -1; }
  .bars { grid-template-columns: minmax(90px, 140px) minmax(0, 1fr); }
  .page { padding: 32px 20px 64px; }
  .entry-page .page-head { grid-template-columns: minmax(0, 1fr); }
  .entry-page .page-head .entry-image { grid-row: auto; margin-bottom: 14px; }
}
@media (max-width: 900px) {
  .view { padding: 18px 16px 40px; }
  .manuscript-space { padding: 0 14px 0 0; }
  .view-critique { grid-template-columns: minmax(0, 1fr); }
  .output-panel { padding: 16px 18px; min-height: 0; }
  .brand-sub { display: none; }
  .conflict-pair { grid-template-columns: 1fr; }
  .tl-place-row { grid-template-columns: minmax(0, 1fr) auto; }
  .tl-place-row .tl-scene, .tl-place-row .tl-parsed { grid-column: 1 / -1; }
  .openings li { grid-template-columns: minmax(0, 1fr) auto; }
  .opening-text { grid-column: 1 / -1; white-space: normal; }
  .prose-grid { grid-template-columns: minmax(0, 1fr); }
  .dialogue-list li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .story-chapters li { grid-template-columns: minmax(0, 1fr) auto; }
  .story-meta { grid-column: 1; text-align: left; }
  .event-row { grid-template-columns: minmax(0, 1fr) auto; }
  .event-row .event-title { grid-column: 1 / -1; }
  .event-edit-row { grid-template-columns: minmax(0, 1fr); }
  .day-bars { height: 120px; }
  .plan-acts { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; }
}
/* Too narrow for the sidebar beside the page: the sidebar, then the page. */
@media (max-width: 600px) {
  .manuscript-space { grid-template-columns: minmax(0, 1fr); padding: 18px 16px 40px; }
  .manuscript-space > .sidebar, .manuscript-space > .desk { grid-column: auto; grid-row: auto; }
  .manuscript-space .sidebar { position: static; height: auto; max-height: 45vh; border-right: 0; border-bottom: 1px solid var(--line); }
  .scene-rail, .col-resizer { display: none; }
}
@media (max-width: 640px) {
  :root { --topbar-h: 96px; }
  .topbar { flex-wrap: wrap; height: auto; min-height: var(--topbar-h); padding: 0 14px; align-items: center; }
  .brand { height: 48px; }
  .tabs { order: 3; width: 100%; height: 44px; margin: 0 -14px; padding: 0 8px; }
  .tab { padding: 0 9px; font-size: 11.5px; }
  .page-title { font-size: 26px !important; }
  .manuscript { font-size: 17px; }
  .entry-grid { grid-template-columns: 1fr; }
  .doc-bar { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .status.working::before { animation: none; }
  .card { transition: none; }
  .place-mark.arrived { animation: none; }
}