/* Untitled Romance Novel — studio chrome + true screenplay page geometry */

@font-face {
  font-family: 'Courier Final Draft';
  src: url('../fonts/CourierFinalDraft-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Courier Final Draft';
  src: url('../fonts/CourierFinalDraft-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Courier Final Draft';
  src: url('../fonts/CourierFinalDraft-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  --ink: #2b2226;
  --ink-soft: #6d5f66;
  --ink-faint: #a3949b;
  --paper: #ffffff;
  --paper-ink: #1a1a1a;
  --highlighter-color: rgba(255, 144, 0, 0.88);
  --highlighter-ink: #111a14;
  --bg: #eadfce;
  --bg-deep: #d9cbb8;
  --surface: rgba(255, 255, 255, 0.72);
  --line: rgba(43, 34, 38, 0.10);
  --rose: #b4435e;
  --rose-deep: #8e2f48;
  --blush: #f3d9dc;
  --gold: #b08d57;
  --shadow: 0 1px 2px rgba(43,34,38,.06), 0 12px 40px -12px rgba(141,79,98,.25);
  --radius: 14px;
  --display: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
  --ui: 'Avenir Next', 'Avenir', 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --mono: 'Courier Final Draft', 'Courier Prime', 'Courier New', monospace;

  /* critic accents — the three readers' palette, tokenized once
     (nice + mean have hues; measured rides --gold). */
  --critic-nice-edge: #d98fa6;   /* nice: hover border */
  --critic-nice-text: #b4435e;   /* nice: hover text (fixed; not theme rose) */
  --critic-nice-h:    #c06a85;   /* nice: note heading */
  --critic-mean-edge: #7d2238;   /* mean: hover border + text */
  --critic-mean-wash: #fbeef1;   /* mean: hover wash */
  --critic-mean-h:    #a02844;   /* mean: note heading + left rule */

  /* council hues — the three voices in the Room (exist nowhere else) */
  --council-architect: #9fc4e8;
  --council-romantic:  #eda0b8;
  --council-skeptic:   #d9c08a;

  /* the Room chrome — dark-glass world. Frosts + accents tokenized so the
     mood stays exactly as built but lives in one place. */
  --set-ink:        #efe3e7;                 /* Room base text */
  --set-title:      #f3cdd8;                 /* Room headings / accent text */
  --set-whisper:    rgba(243,205,216,.5);    /* italic whisper */
  --set-whisper-2:  rgba(243,205,216,.45);   /* board hint */
  --set-whisper-3:  rgba(243,205,216,.55);   /* panel whisper */
  --set-accent:     #d9728c;                 /* Room focus / hover accent (= night rose) */
  --set-glass:      rgba(255,255,255,.06);   /* frosted control face */
  --set-glass-soft: rgba(255,255,255,.05);   /* frosted card face */
  --set-glass-edge: rgba(255,255,255,.14);   /* control border */
  --set-glass-edge-soft: rgba(255,255,255,.10); /* card border */
  --set-tab-on:     rgba(217,114,140,.2);    /* active tab face */
  --set-tab-on-edge: rgba(217,114,140,.45);  /* active tab border */
  --set-text-92:    rgba(239,227,231,.92);   /* council body */
  --set-text-85:    rgba(239,227,231,.85);   /* research body */
  --set-text-70:    rgba(239,227,231,.7);    /* research label */
  --set-text-60:    rgba(239,227,231,.6);    /* tab idle text */
  --set-stage-bg:   rgba(0,0,0,.25);         /* game stage well */
  /* corkboard / scene cards (paper on a dark board) */
  --card-ink:    #43383b;   /* scene-card body text base */
  --card-sub:    #6d5e62;   /* scene-card synopsis */
  --card-index:  #b4435e;   /* scene-card scene number (= rose) */
  --card-chip:   #8e2f48;   /* scene-card character chip text (= rose-deep) */
  --card-chip-bg: rgba(180,67,94,.12);  /* chip background */
  /* sticky notes — four colours of real paper */
  --sticky-rose:    #f6d2da;  --sticky-rose-ink:  #5d2433;
  --sticky-cream:   #f8ecd2;  --sticky-cream-ink: #5c4a22;
  --sticky-sage:    #dbe8d4;  --sticky-sage-ink:  #33502d;
  --sticky-sky:     #d4e4ef;  --sticky-sky-ink:   #27445a;
}

.night {
  --ink: #ece2e6;
  --ink-soft: #b3a4ac;
  --ink-faint: #7d6f77;
  --bg: #100c16;
  --bg-deep: #0a080f;
  --surface: rgba(30, 23, 37, 0.78);
  --line: rgba(236, 226, 230, 0.10);
  --rose: #d9728c;
  --rose-deep: #e798ac;
  --blush: #3a2733;
  --gold: #c9a878;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 48px -12px rgba(0,0,0,.6);

  /* critic accents — night variants (mean pinks shift; nice rides its base) */
  --critic-mean-edge: #e798ac;
  --critic-mean-wash: #3a1722;
  --critic-mean-h:    #e87b9b;
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  margin: 0;
  font-family: var(--ui);
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 80% -10%, var(--blush) 0%, transparent 55%),
    radial-gradient(900px 600px at -10% 100%, var(--bg-deep) 0%, transparent 60%),
    var(--bg);
  transition: background .6s ease, color .4s ease;
}

#petals {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
}

/* ---------- chrome ---------- */

#app { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr auto; height: 100vh; }

#topbar {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  position: relative; z-index: 21;   /* its dropdown menus must clear the rails */
  padding: 10px 18px;
  background: color-mix(in srgb, var(--bg) 52%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 0;
  box-shadow: none;
}

/* The header's only text: the script's name — small, quiet, editable. It's
   an input (click and type to rename), but at rest it reads like a whispered
   file label, not a title card. The wordmark is gone; the page is the stage. */
#doctitle {
  position: absolute; left: 18px; top: 0; bottom: 0;
  height: max-content; margin-block: auto;
  font-family: var(--display); font-style: italic;
  font-size: 13px; font-weight: 400; letter-spacing: .02em;
  color: var(--ink);
  background: transparent;
  border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  padding: 5px 2px; min-width: 150px; max-width: 380px;
  transition: color .15s, border-color .15s;
}
#doctitle:hover { border-bottom-color: var(--line); }
#doctitle:focus { outline: none; border-bottom-color: var(--rose); }

.spacer { flex: 1; }
#topbar > .spacer { display: none; }

select, .btn {
  font-family: var(--ui); font-size: 13px; font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px 12px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s, background .15s;
}
.btn:hover, select:hover { border-color: var(--rose); box-shadow: 0 2px 12px -4px rgba(180,67,94,.35); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--rose); border-color: var(--rose); color: #fff; }
.btn.primary:hover { background: var(--rose-deep); }
.btn.ghost {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--ink);
  padding: 7px 8px; display: inline-flex; align-items: center; justify-content: center;
}
/* one unified icon set — line glyphs, consistent weight, follow currentColor */
.ic { width: 17px; height: 17px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* toolbar zones: left tools · centered mode-bar above the page · right view tools */
.tb-zone { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tb-right { justify-content: flex-end; }
.tb-center { justify-self: center; }
.btn[aria-pressed="true"] { background: var(--v21-pressed, var(--blush)); border-color: var(--v21-pressed-ring, var(--rose)); color: var(--v21-pressed-ink, var(--ink)); }

.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 230px; max-width: min(92vw, 320px);
  max-height: min(80vh, 600px); overflow-y: auto;
  background: var(--surface);
  backdrop-filter: blur(24px) saturate(1.10);
  -webkit-backdrop-filter: blur(24px) saturate(1.10);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 6px;
  display: none;
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transition: opacity 180ms ease-out, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.menu.open {
  display: block;
  opacity: 1;
  transform: translateY(0) scale(1);
}
.menu button {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  width: 100%; text-align: left;
  font: 500 13px var(--ui); color: var(--ink);
  background: none; border: 0; border-radius: 8px;
  padding: 9px 10px; cursor: pointer;
}
.menu button:hover { background: var(--blush); }
.menu button .kbd { color: var(--ink-faint); font-size: 11px; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 8px; }

/* ---------- main ---------- */

/* Main stage: one centered deck. Side rails are gone — a leftover
   column would collapse the letter into a left-edge strip. */
#main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}
#deck { grid-column: 1; min-width: 0; }

/* ---------- the deck & sheets ---------- */

/* The page is a real letter sheet. It does not scale or crop with the window.
   When the deck is wider than 8.5in, the paper stays centered. When the
   window shrinks to the paper, gutters go to zero. Narrower than that, the
   deck scrolls — both edges stay in the scrollable area (auto-margins on a
   child wider than its parent clip the left side; flex + min-width do not). */
#deck {
  overflow-x: auto; overflow-y: auto; min-height: 0;
  padding: 104px 0 120px;
  scroll-behavior: smooth;
}
#zoomwrap {
  position: relative;
  transform-origin: top center;
  transition: transform .25s ease;
  width: max(100%, 8.5in);
  min-width: 8.5in;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#pages { position: relative; z-index: 1; width: 8.5in; outline: none; caret-color: var(--sheet-ink, var(--paper-ink)); }


#doodles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
#doodles svg {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: visible;
  pointer-events: none;
}
#doodles g path {
  fill: none;
  stroke: var(--sheet-ink, var(--paper-ink));
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.doodle-erase #zoomwrap,
body.doodle-erase #doodles,
body.doodle-erase #pages {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='5' width='13' height='7' rx='1.6' transform='rotate(-28 8 8)' fill='%23f3c4b6' stroke='%23332' stroke-width='1.2'/%3E%3Cpath d='M3.2 8.6h9.6' stroke='%23332' stroke-width='1' transform='rotate(-28 8 8)'/%3E%3C/svg%3E") 4 12, cell;
}

.sheet {
  position: relative;
  width: 8.5in; min-width: 8.5in; max-width: 8.5in;
  height: 11in; min-height: 11in;
  flex-shrink: 0;
  padding: 1in 1in 1in 1.5in;     /* spec: 1" top/right/bottom, action at 1.50" */
  margin: 0 0 30px;
  background: var(--paper);
  color: var(--sheet-ink, var(--paper-ink));
  border-radius: 3px;
  box-shadow: var(--sheet-shadow);
  overflow: hidden;
  font: 12pt/1 var(--mono);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

.pagenum {
  position: absolute;
  top: 0.5in;
  right: 1in;
  bottom: auto;
  font: 12pt/1 var(--mono); color: var(--sheet-ink, var(--paper-ink));
  user-select: none;
}

/* ---------- screenplay elements (industry geometry) ---------- */

.blk { white-space: pre-wrap; word-break: break-word; min-height: 1em; }

/* Selection colors are resolved against the actual composited paper by v21. */
#pages::selection, #pages *::selection,
.sheet::selection, .sheet *::selection,
.blk::selection {
  background: var(--selection-bg, var(--rose));
  color: var(--selection-ink, #fff);
}
#pages::-moz-selection, #pages *::-moz-selection,
.sheet::-moz-selection, .sheet *::-moz-selection,
.blk::-moz-selection {
  background: var(--selection-bg, var(--rose));
  color: var(--selection-ink, #fff);
}

.blk[data-type="scene"] {
  margin-top: 2em;
  text-transform: uppercase;
}
.blk[data-type="action"] { margin-top: 1em; }
.blk[data-type="character"] {
  margin-top: 1em;
  margin-left: 2.0in;     /* 3.50" from page edge */
  max-width: 3.75in;      /* to 7.25" */
  text-transform: uppercase;
}
.blk[data-type="parenthetical"] {
  margin-top: 0;
  margin-left: 1.5in;     /* 3.00" from page edge */
  max-width: 2.5in;       /* to 5.50" */
  text-indent: -0.1in;    /* TY-PA: first line hangs 0.10" left (the "(" sits at 2.90") */
}
.blk[data-type="dialogue"] {
  margin-top: 0;
  margin-left: 1in;       /* 2.5" from page edge */
  max-width: 3.5in;       /* FD-measured: ~34-char dialogue lines */
}
.blk[data-type="transition"] {
  margin-top: 1em;
  text-align: right;
  margin-right: 0.4in;    /* TY-TR: right edge at 7.10", not the 7.50" body edge */
  text-transform: uppercase;
}
.blk[data-type="shot"] { margin-top: 1em; text-transform: uppercase; }           /* TY-ST: 1.5"–7.5", 12pt before */
.blk[data-type="general"] { margin-top: 0; }                                      /* TY-GN: 0 before */
.blk[data-type="newact"] { margin-top: 1em; margin-left: -0.5in; text-align: center; }   /* TY-NA: 1.0"–7.5", centered */
.blk[data-type="endact"] { margin-top: 2em; margin-left: -0.5in; text-align: center; }   /* TY-EA: 24pt before */
.blk[data-type="sequence"] { margin-top: 2em; margin-left: -0.25in; }             /* TY-SQ: 1.25", 24pt before */
.blk.page-continuation {
  min-height: 1em;
  user-select: none;
  pointer-events: none;
}
.blk.page-more {
  margin-top: 0;
  margin-left: 2in;       /* (MORE) at the 3.5" Character indent (PG-MORE more_indent_pt 252) */
  text-align: left;
}
.blk.page-cue {
  margin-top: 0;
}
.sheet > .blk:first-of-type, .sheet > .dual-row:first-of-type { margin-top: 0 !important; }

/* current element whisper */
.blk:focus-within { /* not reliable in contenteditable; status bar carries it */ }

/* ---------- dual dialogue ---------- */

.dual-row { display: flex; gap: 0.3in; margin-top: 1em; }
.dual-col { flex: 1; min-width: 0; }
.dual-col .blk { margin-left: 0 !important; max-width: none !important; }
.dual-col .blk[data-type="character"] { text-align: center; margin-top: 0; }
.dual-col .blk[data-type="parenthetical"] { margin-left: 0.5in !important; }

/* ---------- SmartType popup ---------- */

#smarttype {
  position: fixed; z-index: 80;
  margin: 0; padding: 5px; list-style: none;
  min-width: 200px; max-width: 320px;
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--line); border-radius: 11px;
  box-shadow: var(--shadow);
  animation: pop .12s ease;
}
#smarttype li {
  font: 12.5px var(--mono);
  color: var(--ink);
  padding: 7px 11px; border-radius: 7px; cursor: pointer;
  letter-spacing: .01em;
}
#smarttype li.sel { background: var(--rose); color: #fff; }
#smarttype li:hover:not(.sel) { background: var(--blush); }

/* ---------- status bar ---------- */

#statusbar {
  display: flex; align-items: center; gap: 18px;
  padding: 8px 18px;
  justify-content: flex-start;
  background: color-mix(in srgb, var(--bg) 52%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-top: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
  font: 500 12px var(--ui); color: var(--ink-soft);
}
#cur-element {
  color: var(--rose); font-weight: 600;
  min-width: 110px;
}
#pageinfo { margin-left: auto; font-weight: 600; color: var(--ink); }
#savestate.saved { color: var(--gold); }
#statusbar .hint { color: var(--ink-faint); }
#statusbar .hint .kbd, .kbd {
  font: 600 10px var(--ui);
  background: var(--blush); color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 5px;
  padding: 1.5px 5px; margin: 0 1px;
}

/* ---------- toast ---------- */

#toast {
  position: fixed; bottom: 64px; left: 50%; translate: -50% 0; z-index: 90;
  font: 500 13px var(--ui); color: #fff;
  background: var(--rose); border-radius: 99px;
  padding: 10px 20px;
  box-shadow: var(--shadow);
  opacity: 0; pointer-events: none;
  transition: opacity .3s, translate .3s;
}
#toast.show { opacity: 1; translate: -50% -8px; }

/* ---------- revisions drawer ---------- */

#revisions {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 95;
  width: 300px;
  background: var(--surface);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
  transform: translateX(105%);
  transition: transform .3s cubic-bezier(0.2, 0.9, 0.25, 1);
  display: flex; flex-direction: column;
}
#revisions.open { transform: none; }
#revisions h3 { margin: 0; padding: 18px 18px 10px; font: 600 14px var(--ui); }
#revlist { flex: 1; overflow-y: auto; margin: 0; padding: 0 10px 16px; list-style: none; }
#revlist li {
  padding: 10px 10px; margin: 3px 0; border-radius: 9px; cursor: pointer;
  font: 500 12px var(--ui); color: var(--ink-soft);
  border: 1px solid transparent;
}
#revlist li:hover { background: var(--blush); border-color: var(--line); color: var(--ink); }
#revlist li b { display: block; color: var(--ink); font-size: 12.5px; }

/* ---------- print: the PDF path ---------- */

/* Final Draft "Hidden Text" runs: visible-but-marked while editing (so the
   writer doesn't forget invisible content exists in the document), fully
   hidden only when printing/exporting to match Final Draft's own behavior. */
span[data-fx-hidden="1"] {
  opacity: 0.35;
  text-decoration: underline dotted;
  text-decoration-color: currentColor;
}
span[data-fx-highlight="1"] {
  background: color-mix(in srgb, #fff176 82%, transparent);
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
@media print {
  span[data-fx-hidden="1"] { display: none; }
}

@media print {
  @page { size: letter; margin: 0; }
  body { background: #fff; overflow: visible; }
  #topbar, #statusbar, #petals, #smarttype, #toast, #revisions, #wpcluster, #doodles,
  #shotgun-damage, #shotgun-stage, #shotgun-sweep,
  #shotgun-underlay, #shotgun-aim { display: none !important; }
  /* paper prints whole: the wound mask never reaches an export */
  #pages .sheet { -webkit-mask: none !important; mask: none !important; }
  #app { display: block; height: auto; }
  #main { display: block; }
  #deck { overflow: visible; padding: 0; }
  #zoomwrap { transform: none !important; }
  .sheet {
    margin: 0; border-radius: 0; box-shadow: none;
    page-break-after: always;
    color: #000; background: #fff;
  }
  .pagenum { color: #000; }
  #printtitle {
    display: flex !important;
    width: 8.5in; height: 11in;
    flex-direction: column; align-items: center; justify-content: center; gap: 24px;
    page-break-after: always;
    font: 12pt/1.5 var(--mono); color: #000; background: #fff;
  }
  #printtitle h1 { font: 12pt var(--mono); text-transform: uppercase; letter-spacing: .05em; }
}
#printtitle { display: none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  #deck { scroll-behavior: auto; }
}

/* =====================================================================
   Round two: backdrop depth, glass page, toolbar, rail, the Room,
   cinematic motion. Spring easing everywhere.
   ===================================================================== */

:root {
  --spring: cubic-bezier(0.2, 0.9, 0.25, 1);
  --drift: cubic-bezier(0.2, 0.9, 0.25, 1);
}

/* ---------- photographic backdrop with depth ---------- */

#backdrop {
  position: fixed; inset: -5vh -5vw; z-index: 0;
  background-size: cover; background-position: center;
  filter: blur(calc((100 - var(--v21-focus, 100)) * 0.16px)) saturate(1.05);
  transform: translate3d(0, 0, 0) scale(calc(1.04 + (100 - var(--v21-focus, 100)) * 0.0004));
  transition: opacity 1.8s ease, filter 100ms ease-out;
  opacity: 0;
  will-change: transform, filter;
  pointer-events: none;
  transform-origin: 50% 45%;
}
body.has-backdrop #backdrop { opacity: 1; }
#backdrop::after {            /* subtle cinematic vignette so the page floats */
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(130% 100% at 50% 40%, transparent 60%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
}
#petals { z-index: 1; }
#app, #room { position: relative; }
#app { z-index: 2; }

/* ---------- paper → glass (continuous, driven by --glassiness) ---------- */
/* The frost blur and edge highlight scale with the dial; the paper fill itself
   is alpha-scaled in the lit-plane rule below. */
.sheet {
  backdrop-filter: blur(calc(var(--glassiness) * 18px)) saturate(calc(1 + var(--glassiness) * 0.3)) brightness(calc(1 + var(--glassiness) * 0.04));
  -webkit-backdrop-filter: blur(calc(var(--glassiness) * 18px)) saturate(calc(1 + var(--glassiness) * 0.3)) brightness(calc(1 + var(--glassiness) * 0.04));
  /* a paper-tinted halo behind glyphs keeps ink legible as the sheet turns to glass */
  text-shadow: var(--ink-shadow), 0 0 calc(var(--glassiness) * 14px) color-mix(in srgb, var(--paper) calc(var(--glassiness) * 75%), transparent);
}

/* B/I/U + rulers + eraser: a glass strip docked to the letter's top-right.
   Lives inside #zoomwrap so it travels with the page and zoom. Not a header. */
#wpcluster {
  position: absolute;
  top: 10px;
  left: calc(50% + 4.25in - 32px);
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 28px;
  height: auto;
  margin: 0;
  padding: 3px 2px 4px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 28%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  pointer-events: auto;
}
#wpcluster .tbtn {
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font: 600 11px var(--ui);
  letter-spacing: 0;
  line-height: 1;
}
#wpcluster .tbtn svg { width: 13px; height: 13px; }
/* Off: fully hidden. The v21 skin animates the tuck; the base layer just
   guarantees nothing lingers at the page edge. */
body.wp-off #wpcluster { display: none; }
body[data-v21="true"].wp-off #wpcluster { display: flex; }
body.focus-mode #wpcluster { opacity: .4; }
body.focus-mode #wpcluster:hover { opacity: 1; }
#wpcluster #t-bold { font-weight: 700; }
#wpcluster #t-italic { font-style: normal; }
#wpcluster #t-italic span {
  display: inline-block;
  font-style: normal;
  font-weight: 600;
  transform: skewX(-12deg);
}
#wpcluster #t-under {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
#wpcluster .tbtn.on {
  background: color-mix(in srgb, var(--rose) 22%, transparent);
  color: var(--ink);
}
#wpcluster .wp-ai {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
}
#wpcluster .wp-ai-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.ai-tools-open #wpcluster .wp-ai {
  grid-template-rows: 1fr;
}
#wpcluster #t-ai[aria-pressed="true"] {
  background: #c23a4a;
  color: #fff;
}
.tgroup {
  display: flex; gap: 2px; padding: 2px;
  border: 1px solid var(--line); border-radius: 10px;
  background: color-mix(in srgb, var(--paper) 55%, transparent);
}
.tbtn {
  font: 600 11px var(--ui); letter-spacing: .04em;
  color: var(--ink);
  background: none; border: 0; border-radius: 7px;
  padding: 6px 9px; cursor: pointer;
  transition: background .15s var(--spring), color .15s, transform .12s var(--spring);
}
.tbtn:hover { background: var(--blush); color: var(--ink); }
.tbtn:active { transform: scale(.93); }
.tbtn.el.on, .tbtn.fmt.on { background: var(--rose); color: #fff; }
.room-btn {
  font-family: var(--display); font-style: normal; font-size: 14px;
  background: linear-gradient(120deg, var(--rose), var(--rose-deep), var(--gold));
  background-size: 220% 100%;
  color: #fff; border: 0;
  animation: shimmer 7s ease infinite;
}
@keyframes shimmer { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

.story-line { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font: 500 12px var(--ui); color: var(--ink-soft); padding: 3px 0; }
.story-line b { color: var(--ink); font-weight: 600; }
.balance { flex: 1; max-width: 130px; height: 6px; border-radius: 4px; background: var(--blush); overflow: hidden; }
.balance i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--rose), var(--rose-deep)); border-radius: 4px;
  transform: scaleX(var(--fill, 0)); transform-origin: left; transition: transform .8s var(--drift); }
.story-group { margin: 10px 0 8px; }
.story-group h4 { margin: 0 0 6px; font: italic 600 12px var(--display); color: var(--gold); }
.story-chip {
  display: flex; justify-content: space-between;
  font: 500 11.5px var(--ui); color: var(--ink-soft);
  padding: 3.5px 8px; margin: 2px 0; border-radius: 7px;
  background: color-mix(in srgb, var(--blush) 55%, transparent);
}
.story-chip em { font-style: normal; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-chip i { font-style: normal; color: var(--rose); font-weight: 600; }

/* ---------- quiet little pitches ---------- */

@keyframes driftIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.drift-in { animation: driftIn 1.1s var(--drift) both; }
.drift-out { transition: opacity .55s ease, transform .55s var(--drift), filter .55s;
  opacity: 0 !important; transform: translateY(10px) scale(.97); filter: blur(3px); pointer-events: none; }

.pitch-card {
  position: relative;
  background: color-mix(in srgb, var(--blush) 40%, transparent);
  border: 0;
  border-radius: 10px;
  padding: 8px 10px 7px; margin: 2px 0 10px;
  box-shadow: none;
}
.pitch-card p { margin: 0 0 7px; font: italic 13.5px/1.5 var(--display); color: var(--ink); text-wrap: pretty; }
.pitch-acts { display: flex; gap: 12px; }
.pitch-acts button {
  font: italic 600 12px var(--display); background: none; border: 0; cursor: pointer; padding: 2px 0;
}
.pitch-acts .keep { color: var(--rose); }
.pitch-acts .letgo { color: var(--ink-faint); }
.pitch-acts button:hover { text-decoration: underline; }

.kept-h { margin: 10px 0 4px; font: italic 600 11.5px var(--display); color: var(--gold); }
#pitch-kept { list-style: none; margin: 0 0 8px; padding: 0; }
#pitch-kept li {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  font: italic 12.5px/1.45 var(--display); color: var(--ink-soft);
  padding: 5px 8px; margin: 2px 0; border-radius: 8px;
  background: color-mix(in srgb, var(--blush) 45%, transparent);
}
#pitch-kept button { background: none; border: 0; color: var(--ink-faint); cursor: pointer; font-size: 13px; }
#pitch-kept button:hover { color: var(--rose); }

/* ---------- critics ---------- */

.critic-invite { display: flex; gap: 6px; margin-bottom: 10px; }
.cbtn {
  flex: 1; font: 600 11px var(--ui);
  border-radius: 8px; border: 1px solid var(--line);
  padding: 7px 4px; cursor: pointer;
  background: var(--paper); color: var(--ink);
  transition: transform .15s var(--spring), box-shadow .2s;
}
.cbtn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -8px rgba(141,79,98,.5); }
.cbtn.critic-nice:hover { border-color: var(--critic-nice-edge); color: var(--critic-nice-text); }
.cbtn.critic-measured:hover { border-color: var(--gold); color: var(--gold); }
.cbtn.critic-mean:hover { border-color: var(--critic-mean-edge); color: var(--critic-mean-edge); background: var(--critic-mean-wash); }
.night .cbtn.critic-mean:hover { background: var(--critic-mean-wash); color: var(--critic-mean-edge); }

.note-card {
  position: relative;
  border-radius: 12px; border: 1px solid var(--line);
  padding: 10px 26px 10px 12px; margin: 0 0 8px;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
}
.note-card h5 { margin: 0 0 4px; font: italic 600 11.5px var(--display); }
.note-card.critic-nice h5 { color: var(--critic-nice-h); }
.note-card.critic-measured h5 { color: var(--gold); }
.note-card.critic-mean h5 { color: var(--critic-mean-h); }
.night .note-card.critic-mean h5 { color: var(--critic-mean-h); }
.note-card.critic-mean {
  background: var(--critic-mean-wash);
  border-color: color-mix(in srgb, var(--critic-mean-edge) 35%, var(--line));
}
.note-card p { margin: 0; font: 12.5px/1.5 var(--ui); color: var(--ink); text-wrap: pretty; }
.note-x {
  position: absolute; top: 6px; right: 7px;
  background: none; border: 0; color: var(--ink-faint); cursor: pointer; font-size: 13px;
}
.note-x:hover { color: var(--rose); }
.reading span { animation: dots 1.4s infinite; opacity: 0; }
.reading span:nth-child(2) { animation-delay: .25s; }
.reading span:nth-child(3) { animation-delay: .5s; }
@keyframes dots { 0%, 60%, 100% { opacity: 0; } 30% { opacity: 1; } }

/* ---------- the Room ---------- */

#room {
  position: fixed; inset: 0; z-index: 50;
  display: none; flex-direction: column;
  color: var(--set-ink);
  background:
    radial-gradient(1100px 600px at 80% -5%, rgba(180,67,94,.30), transparent 55%),
    radial-gradient(800px 500px at 8% 105%, rgba(176,141,87,.18), transparent 60%),
    linear-gradient(#171019, #0e0a12);
}
#room.open { display: flex; }
body.in-room #app { display: none; }

#room-top { display: flex; align-items: baseline; gap: 16px; padding: 16px 22px 10px; }
#room-top h2 { margin: 0; font: italic 600 26px var(--display); color: var(--set-title); }
.room-whisper { font: italic 13px var(--display); color: var(--set-whisper); }
#room-top .btn { background: var(--set-glass); border-color: var(--set-glass-edge); color: var(--set-ink); }
#room-top .btn:hover { border-color: var(--set-accent); }

#room-main { display: grid; grid-template-columns: 1fr 390px; gap: 0; flex: 1; min-height: 0; }

#board {
  position: relative; overflow: auto; margin: 6px 0 18px 18px;
  border: 1px solid var(--set-glass-edge-soft); border-radius: 16px;
  background:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px) 0 0/26px 26px,
    rgba(255,255,255,.025);
}
.board-cards {
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 14px;
  padding: 22px 22px 60px; min-height: 100%;
}
.scene-card {
  width: 215px; min-height: 110px;
  background: linear-gradient(176deg, #fffdf6, #fdf3e3);
  color: var(--card-ink);
  border-radius: 4px;
  padding: 12px 12px 9px;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 14px 30px -12px rgba(0,0,0,.55);
  cursor: grab;
  transition: transform .25s var(--spring), box-shadow .25s;
  position: relative;
}
.scene-card:nth-child(3n) { transform: rotate(.5deg); }
.scene-card:nth-child(3n+1) { transform: rotate(-.6deg); }
.scene-card:hover { transform: translateY(-4px) rotate(0deg); box-shadow: 0 24px 44px -14px rgba(0,0,0,.65); }
.scene-card.dragging { opacity: .45; transform: scale(1.04) rotate(1.5deg); cursor: grabbing; }
.scene-card .pin {
  position: absolute; top: -5px; left: 50%; translate: -50% 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8909f, #8e2f48);
  box-shadow: 0 2px 4px rgba(0,0,0,.4);
}
.scene-card h5 { margin: 0 0 6px; font: 700 10.5px/1.4 var(--mono); letter-spacing: .01em; }
.scene-card h5 span { color: var(--card-index); margin-right: 4px; }
.scene-card p { margin: 0 0 6px; font: 11px/1.45 var(--ui); color: var(--card-sub); }
.scene-card footer { display: flex; flex-wrap: wrap; gap: 4px; }
.scene-card footer em { font: 600 9px var(--ui); font-style: normal; color: var(--card-chip);
  background: var(--card-chip-bg); border-radius: 4px; padding: 1.5px 5px; }
.board-hint {
  position: sticky; bottom: 0; left: 0;
  padding: 8px 16px; text-align: center;
  font: italic 12px var(--display); color: var(--set-whisper-2);
}

.sticky-layer { position: absolute; inset: 0; pointer-events: none; }
.sticky {
  position: absolute; width: 150px; min-height: 110px;
  padding: 10px 10px 8px; border-radius: 2px;
  box-shadow: 0 12px 26px -10px rgba(0,0,0,.6);
  pointer-events: auto; cursor: grab;
  transform: rotate(-1deg);
}
.sticky.s-rose { background: var(--sticky-rose); color: var(--sticky-rose-ink); }
.sticky.s-cream { background: var(--sticky-cream); color: var(--sticky-cream-ink); }
.sticky.s-sage { background: var(--sticky-sage); color: var(--sticky-sage-ink); }
.sticky.s-sky { background: var(--sticky-sky); color: var(--sticky-sky-ink); }
.sticky-text { font: 13px/1.4 'Bradley Hand', 'Comic Sans MS', var(--ui); outline: none; min-height: 80px; }
.sticky-x { position: absolute; top: 2px; right: 4px; background: none; border: 0; cursor: pointer; opacity: .4; }
.sticky-x:hover { opacity: 1; }

#room-side { display: flex; flex-direction: column; min-height: 0; padding: 6px 18px 18px 14px; }
#room-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.room-tab {
  flex: 1; font: 600 12px var(--ui); padding: 8px 4px;
  background: var(--set-glass-soft); color: var(--set-text-60);
  border: 1px solid var(--set-glass-edge-soft); border-radius: 9px; cursor: pointer;
  transition: all .2s var(--spring);
}
.room-tab.on { background: var(--set-tab-on); color: var(--set-title); border-color: var(--set-tab-on-edge); }
.room-panel { display: none; flex: 1; min-height: 0; overflow-y: auto; }
.room-panel.on { display: block; animation: driftIn .7s var(--drift); }
.panel-whisper { font: italic 13px var(--display); color: var(--set-whisper-3); margin: 4px 0 12px; }

.council-input textarea {
  width: 100%; box-sizing: border-box; resize: none;
  font: 13.5px var(--ui); color: var(--set-ink);
  background: var(--set-glass); border: 1px solid var(--set-glass-edge);
  border-radius: 10px; padding: 10px;
}
.council-input textarea:focus { outline: none; border-color: var(--set-accent); }
.council-input .btn { margin: 8px 0 14px; width: 100%; }
.council-card {
  border-radius: 12px; padding: 11px 13px; margin-bottom: 10px;
  background: var(--set-glass-soft); border: 1px solid var(--set-glass-edge-soft);
}
.council-card h5 { margin: 0 0 5px; font: italic 600 13px var(--display); }
.council-card.architect h5 { color: var(--council-architect); }
.council-card.romantic h5 { color: var(--council-romantic); }
.council-card.skeptic h5 { color: var(--council-skeptic); }
.council-card p { margin: 0; font: 12.5px/1.55 var(--ui); color: var(--set-text-92); white-space: pre-wrap; }

.research-input { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.research-input input[type="text"] {
  flex: 1; min-width: 120px;
  font: 13px var(--ui); color: var(--set-ink);
  background: var(--set-glass); border: 1px solid var(--set-glass-edge);
  border-radius: 9px; padding: 8px 10px;
}
.research-input input[type="text"]:focus { outline: none; border-color: var(--set-accent); }
.research-input label { font: 12px var(--ui); color: var(--set-text-70); display: flex; gap: 4px; align-items: center; }
#research-out .hit { background: var(--set-glass-soft); border: 1px solid var(--set-glass-edge-soft);
  border-radius: 10px; padding: 9px 11px; margin-bottom: 8px; }
#research-out .hit h6 { margin: 0 0 4px; font: 700 10px var(--mono); color: var(--council-skeptic); text-transform: uppercase; }
#research-out .hit p { margin: 0; font: 12px/1.5 var(--mono); color: var(--set-text-85); }
.yt { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 12px; }
.yt-out { display: inline-block; margin-top: 8px; font: 12px var(--ui); color: var(--set-accent); }

.game-pick { display: flex; gap: 8px; margin-bottom: 10px; }
.game-pick .btn, #panel-phone .btn { background: var(--set-glass); border-color: var(--set-glass-edge); color: var(--set-ink); }
.game-pick .btn:hover, #panel-phone .btn:hover { border-color: var(--set-accent); }
#panel-phone .btn { display: block; width: 100%; margin-bottom: 8px; text-align: left; padding: 12px 14px; }
#panel-phone .btn.primary { background: var(--rose); border-color: var(--rose); }
.game-stage { border: 1px solid var(--set-glass-edge-soft); border-radius: 12px; overflow: hidden;
  background: var(--set-stage-bg); }
#game-canvas { display: block; width: 100%; }

/* ---------- outline modal ---------- */

.modal {
  position: fixed; inset: 0; z-index: 70;
  display: none; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.modal.open { display: flex; }
.modal-card {
  width: min(880px, 92vw); max-height: 84vh;
  display: flex; flex-direction: column;
  background: var(--surface);
  backdrop-filter: blur(26px) saturate(1.3);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow);
  animation: driftIn .6s var(--drift);
}
.modal-card > header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--line);
}
.modal-card h2 { margin: 0; font: italic 600 21px var(--display); color: var(--ink); }
.modal-acts { display: flex; gap: 8px; }
#outline-list { overflow-y: auto; padding: 16px 20px; display: grid; gap: 10px; }
.outline-card {
  border: 1px solid var(--line); border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  padding: 12px 14px;
}
.outline-card header { display: flex; align-items: baseline; gap: 10px; }
.o-n { font: italic 700 15px var(--display); color: var(--rose); }
.outline-card h4 { margin: 0; flex: 1; font: 700 12px var(--mono); color: var(--ink); }
.o-meta { font: 600 11px var(--ui); color: var(--ink-faint); white-space: nowrap; }
.o-chars { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.o-chars i { font: 600 9.5px var(--ui); font-style: normal; color: var(--rose);
  background: color-mix(in srgb, var(--blush) 70%, transparent); border-radius: 4px; padding: 2px 6px; }
.o-action { margin: 7px 0 0; font: 12px/1.5 var(--ui); color: var(--ink-soft); }
.o-summary { margin: 7px 0 0; font: italic 12.5px/1.5 var(--display); color: var(--ink); }
.o-summary:empty { display: none; }

/* ---------- sound + backdrop menus ---------- */

#soundmenu, #backdropmenu { min-width: 210px; }
#soundmenu .vol { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
#soundmenu input[type="range"] { flex: 1; accent-color: var(--rose); }
.menu button.on { background: var(--blush); color: var(--rose); }
#backdropmenu img { width: 100%; border-radius: 8px; display: block; }
#backdropmenu .bd-thumb { padding: 5px; }

/* ---------- cinematic entry: the slow drift down to the page ---------- */

@keyframes settle {
  from { transform: translateY(18px); }
  to   { transform: none; }
}
body.settling #deck { animation: settle 0.95s var(--spring) both; }

/* sheets breathe in as they scroll into view (progressive enhancement) */
@supports (animation-timeline: view()) {
  .sheet {
    animation: sheetIn linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 38%;
  }
  @keyframes sheetIn {
    from { opacity: .55; transform: translateY(14px) scale(.992); }
    to   { opacity: 1; transform: none; }
  }
}

/* view transition for entering the room */
::view-transition-old(root) { animation: vtOut .55s var(--drift) both; }
::view-transition-new(root) { animation: vtIn .85s var(--drift) both; }
@keyframes vtOut { to { opacity: 0; transform: scale(.985); filter: blur(6px); } }
@keyframes vtIn { from { opacity: 0; transform: scale(1.02); filter: blur(8px); } }

/* print: glass goes back to paper */
@media print {
  #backdrop, #toolbar, #wpcluster, #room { display: none !important; }
}

/* =====================================================================
   Round three: a light source, layered depth, soft edges, and PLACES —
   a theme system where each setting genuinely feels like somewhere.
   The light comes from the upper left, always.
   ===================================================================== */

:root {
  --hi: rgba(255, 255, 255, .62);            /* light catching an edge */
  --shadow-color: 342deg 24% 45%;
  --btn-sheen: rgba(255,255,255,.45);            /* rose penumbra -- themeable; dark themes override */
  --shadow-xs: inset 0 1px 0 var(--hi), 0 1px 1.5px rgba(43,34,38,.10);
  /* lifted paper: layered penumbra (brumm technique) driven by --shadow-color,
     so every card re-tints with the active theme. opacities dialed to the
     studio's restraint, not brumm defaults. */
  --shadow-card:
    inset 0 1px 0 var(--hi),
    0.9px 0.8px 1.1px hsl(var(--shadow-color) / 0.11),
    1.8px 1.6px 2.1px -1px hsl(var(--shadow-color) / 0.10),
    4.5px 3.8px 5.2px -2px hsl(var(--shadow-color) / 0.085),
    10.9px 9.3px 12.7px -3.1px hsl(var(--shadow-color) / 0.06),
    23.3px 19.9px 27.1px -4.1px hsl(var(--shadow-color) / 0.04);
  /* letter on a desk: contact + ambient, key light from the upper left.
     Drop shadow only — no inset white rim. Kept mostly under the sheet
     (near-zero x, negative spread) so it cannot read as a warm vertical
     stripe where the page meets a Place photo. */
  --sheet-shadow:
    0 1px 2px hsl(30deg 6% 18% / 0.10),
    0 8px 14px -6px hsl(220deg 8% 16% / 0.11),
    0 22px 28px -12px hsl(220deg 10% 14% / 0.12);
}
.night, [data-theme="lighthouse"], [data-theme="solarized-dark"] {
  --hi: rgba(255,255,255,.07);
  --shadow-color: 222deg 35% 6%;
  --btn-sheen: rgba(255,255,255,.05);
  --sheet-shadow:
    0 2px 5px hsl(var(--shadow-color) / 0.38),
    0 10px 20px -6px hsl(var(--shadow-color) / 0.26),
    0 22px 36px -12px hsl(var(--shadow-color) / 0.22);
}

/* the light source itself: a soft key light, upper left */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(130% 100% at 18% -8%, rgba(255,255,255,.20), transparent 52%);
  mix-blend-mode: soft-light;
}

.btn, .tbtn, .cbtn, select {
  border-radius: 11px;
  background-image: linear-gradient(180deg, var(--btn-sheen), transparent 55%);
  box-shadow: var(--shadow-xs);
}
.btn.ghost, .tbtn { background-image: none; box-shadow: none; }
.btn.ghost:hover { box-shadow: var(--shadow-xs); }
.btn.primary { background-image: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%); }
.tgroup { box-shadow: var(--shadow-xs); border-radius: 12px; }
.menu, .modal-card { border-radius: 18px; box-shadow: inset 0 1px 0 var(--hi), var(--shadow); }
#topbar { box-shadow: none; }
.night #topbar { box-shadow: none; }

.pitch-card, .note-card, .outline-card, .story-chip, .council-card {
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}
.story-chip { border-radius: 9px; box-shadow: none; }
.note-card.critic-mean { border-left-width: 2px; background: color-mix(in srgb, var(--critic-mean-h) 4%, var(--paper)); }
.night .note-card.critic-mean { background: color-mix(in srgb, var(--critic-mean-h) 6%, var(--paper)); }

/* ---------- COLOR TOKEN FAMILIES ----------
   data-theme keys are the palette ids. UI chip names live in COLORS[]
   (Cream/Green/Mocha/…). Places are rooms with photos, not these names. */

[data-theme="meadow"] {
  --ink: #1a2214; --ink-soft: #4a5640; --ink-faint: #7a8670;
  --bg: #dce8c8; --bg-deep: #c5d6a8;
  --surface: rgba(244, 246, 232, .78); --line: rgba(26,34,20,.12);
  --rose: #5a8a3a; --rose-deep: #3f6a28; --blush: #e8f0d4; --gold: #d4b84a;
  --shadow: 0 1px 2px rgba(26,34,20,.07), 0 12px 40px -12px rgba(90,138,58,.28);
  --shadow-color: 92deg 28% 36%;
}
[data-theme="cafe"] {
  --ink: #382a20; --ink-soft: #75604f; --ink-faint: #a8917d;
  --bg: #c9ae8f; --bg-deep: #b89978;
  --surface: rgba(255, 248, 238, .72); --line: rgba(56,42,32,.12);
  --rose: #9c5b32; --rose-deep: #7c4423; --blush: #ecd9c4; --gold: #b08d57;
  --shadow: 0 1px 2px rgba(56,42,32,.08), 0 12px 40px -12px rgba(156,91,50,.28);
  --shadow-color: 23deg 46% 38%;
}
[data-theme="sea"] {
  --ink: #243440; --ink-soft: #5b7282; --ink-faint: #92a8b5;
  --bg: #b4c9d4; --bg-deep: #9bb4c2;
  --surface: rgba(244, 248, 250, .72); --line: rgba(36,52,64,.11);
  --rose: #46788e; --rose-deep: #335d70; --blush: #d8e6ec; --gold: #c2a36b;
  --shadow: 0 1px 2px rgba(36,52,64,.07), 0 12px 40px -12px rgba(70,120,142,.28);
  --shadow-color: 198deg 32% 38%;
}
[data-theme="lighthouse"] {
  --ink: #dde6ec; --ink-soft: #9fb2bf; --ink-faint: #6a7c89;
  --bg: #10161c; --bg-deep: #0a0f14;
  --surface: rgba(28, 36, 44, .80); --line: rgba(221,230,236,.10);
  --rose: #7da7c4; --rose-deep: #a3c4da; --blush: #2a3742; --gold: #c9b07a;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 48px -12px rgba(0,0,0,.6);
  --shadow-color: 206deg 28% 8%;
}

/* body backgrounds per place — the "outside" */
[data-theme="meadow"] {
  background:
    radial-gradient(1100px 650px at 78% -8%, #c8dff0 0%, transparent 52%),
    radial-gradient(900px 600px at -10% 100%, #b8d070 0%, transparent 60%), var(--bg);
}
[data-theme="meadow"].has-backdrop #backdrop,
[data-theme="cafe"].has-backdrop #backdrop,
[data-theme="sea"].has-backdrop #backdrop,
[data-theme="study"].has-backdrop #backdrop,
[data-theme="dawn"].has-backdrop #backdrop,
[data-theme="dusk"].has-backdrop #backdrop,
[data-theme="loft"].has-backdrop #backdrop,
[data-theme="lighthouse"].has-backdrop #backdrop,
[data-theme="solarized"].has-backdrop #backdrop,
[data-theme="solarized-dark"].has-backdrop #backdrop,
body.has-backdrop:not([data-theme]) #backdrop { opacity: calc(0.82 * (1 - var(--glassiness, 0))); }
[data-theme="cafe"] {
  background:
    radial-gradient(1100px 650px at 80% -10%, #e8c9a0 0%, transparent 55%),
    radial-gradient(900px 600px at -8% 102%, #a88868 0%, transparent 60%), var(--bg);
}
[data-theme="sea"] {
  background:
    radial-gradient(1200px 700px at 75% -12%, #e8e4d4 0%, transparent 50%),
    radial-gradient(1000px 650px at -10% 105%, #8fadbc 0%, transparent 62%), var(--bg);
}
[data-theme="lighthouse"] {
  background:
    radial-gradient(1100px 650px at 75% -10%, #2c3c4c 0%, transparent 55%),
    radial-gradient(900px 600px at -10% 105%, #080c10 0%, transparent 60%), var(--bg);
}

/* quiet color rooms — no sound, no photo, no glass. Desk vs sheet. */
[data-theme="study"] {
  --ink: #2c2118; --ink-soft: #6e5a48; --ink-faint: #a08a74;
  --bg: #a89074; --bg-deep: #8f755c;
  --surface: rgba(247, 240, 226, .74); --line: rgba(44,33,24,.12);
  --rose: #8a4a32; --rose-deep: #6e3824; --blush: #e8d5c0; --gold: #c4a06a;
  --shadow: 0 1px 2px rgba(44,33,24,.08), 0 12px 40px -12px rgba(138,74,50,.28);
  --shadow-color: 28deg 32% 34%;
  background:
    radial-gradient(1100px 650px at 78% -8%, #d4bc9a 0%, transparent 55%),
    radial-gradient(900px 600px at -8% 102%, #7a624c 0%, transparent 60%), var(--bg);
}
[data-theme="dawn"] {
  --ink: #1e2832; --ink-soft: #5a6a78; --ink-faint: #8a9aaa;
  --bg: #c5d0dc; --bg-deep: #a8b8c8;
  --surface: rgba(255, 246, 235, .74); --line: rgba(30,40,50,.10);
  --rose: #6a7e9a; --rose-deep: #4e6480; --blush: #d8e0e8; --gold: #c4a878;
  --shadow: 0 1px 2px rgba(30,40,50,.07), 0 12px 40px -12px rgba(106,126,154,.26);
  --shadow-color: 210deg 22% 40%;
  background:
    radial-gradient(1200px 700px at 82% -12%, #f2e4c8 0%, transparent 50%),
    radial-gradient(900px 600px at -10% 105%, #9aafc2 0%, transparent 60%), var(--bg);
}
[data-theme="dusk"] {
  --ink: #2e1a22; --ink-soft: #7a5862; --ink-faint: #a88890;
  --bg: #c4a4ac; --bg-deep: #b08e98;
  --surface: rgba(250, 240, 238, .74); --line: rgba(46,26,34,.11);
  --rose: #a05068; --rose-deep: #7a384e; --blush: #ead4d8; --gold: #c4a070;
  --shadow: 0 1px 2px rgba(46,26,34,.08), 0 12px 40px -12px rgba(160,80,104,.26);
  --shadow-color: 340deg 26% 40%;
  background:
    radial-gradient(1100px 650px at 80% -10%, #e8c0b0 0%, transparent 52%),
    radial-gradient(900px 600px at -10% 105%, #8a6a78 0%, transparent 60%), var(--bg);
}
[data-theme="loft"] {
  --ink: #1a1c20; --ink-soft: #5c6068; --ink-faint: #8a8e96;
  --paper: #f7f8fa; --paper-ink: #16181c;
  --bg: #b4b8be; --bg-deep: #9aa0a8;
  --surface: rgba(247, 248, 250, .74); --line: rgba(26,28,32,.10);
  --rose: #6a7080; --rose-deep: #4a5060; --blush: #d8dce2; --gold: #b8a078;
  --shadow: 0 1px 2px rgba(26,28,32,.08), 0 12px 40px -12px rgba(80,88,100,.24);
  --shadow-color: 220deg 8% 38%;
  background:
    radial-gradient(1100px 650px at 75% -10%, #dce0e6 0%, transparent 52%),
    radial-gradient(900px 600px at -8% 102%, #c4b8a8 0%, transparent 60%), var(--bg);
}

/* ---------- classic schemes, à la code editors ---------- */
[data-theme="solarized"] {
  --ink: #073642; --ink-soft: #586e75; --ink-faint: #93a1a1;
  --bg: #d9ceb0; --bg-deep: #c9bd9a;
  --surface: rgba(253, 246, 227, .8); --line: rgba(7,54,66,.12);
  --rose: #cb4b16; --rose-deep: #b58900; --blush: #f0e7cd; --gold: #b58900;
  --shadow: 0 1px 2px rgba(7,54,66,.08), 0 12px 40px -12px rgba(203,75,22,.22);
  --shadow-color: 18deg 50% 38%;
  background:
    radial-gradient(1100px 650px at 78% -8%, #efe4c4 0%, transparent 55%),
    radial-gradient(900px 600px at -10% 102%, #c4b892 0%, transparent 60%), var(--bg);
}
[data-theme="solarized-dark"] {
  --ink: #93a1a1; --ink-soft: #839496; --ink-faint: #586e75;
  --bg: #001c24; --bg-deep: #00141a;
  --surface: rgba(7, 54, 66, .82); --line: rgba(147,161,161,.12);
  --rose: #2aa198; --rose-deep: #35c9be; --blush: #0c4250; --gold: #b58900;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 48px -12px rgba(0,0,0,.6);
  --shadow-color: 200deg 40% 5%;
  --btn-sheen: rgba(255,255,255,.05);
  background:
    radial-gradient(1100px 650px at 78% -8%, #06333f 0%, transparent 55%),
    radial-gradient(900px 600px at -10% 102%, #001016 0%, transparent 60%), var(--bg);
}

/* the double-Enter element mini-selector */
#smarttype.picker li { display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  font: 500 12.5px var(--ui); }
#smarttype.picker li em { font: 600 10px var(--ui); font-style: normal; color: var(--ink-faint); }
#smarttype.picker li.sel em { color: rgba(255,255,255,.75); }

/* ---------- backdrop depth treatments ---------- */
body.bd-soft #backdrop { filter: saturate(1.06) blur(2px); }
body.bd-deep #backdrop { filter: saturate(1.12) brightness(.92); }
body.bd-deep #backdrop::after {
  background:
    radial-gradient(115% 85% at 50% 6%, transparent 22%, color-mix(in srgb, var(--bg) 30%, #000 18%) 100%),
    linear-gradient(rgba(0,0,0,.14), rgba(0,0,0,.30));
}
body.bd-clear #backdrop { filter: saturate(1.04); }
body.bd-clear #backdrop::after {
  background: linear-gradient(color-mix(in srgb, var(--bg) 8%, transparent), color-mix(in srgb, var(--bg) 18%, transparent));
}
body.bd-deep {
  --sheet-shadow:
    0 2px 5px hsl(220deg 8% 16% / 0.14),
    0 12px 22px -6px hsl(220deg 10% 14% / 0.12),
    0 24px 36px -12px hsl(220deg 10% 12% / 0.12);
}

/* glass accents — tint from opaque --bg so alpha stays honest (mixing a
   pre-alpha --surface with transparent was computing ~0.8 and reading solid). */
body.has-backdrop #topbar {
  background: color-mix(in srgb, var(--bg) 52%, transparent);
}
body.has-backdrop .note-card {
  background: color-mix(in srgb, var(--paper) 55%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.has-backdrop .pitch-card { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.has-backdrop #statusbar { background: color-mix(in srgb, var(--bg) 52%, transparent); }

/* =====================================================================
   PAPER FINISH — the page as a lit physical surface.
   Color on the paper plane is composited, never a flat fill:
     base stock  →  subsurface luminance gradient (light upper-left)
                  →  procedural fiber grain (::before)
                  →  optional real scanned paper photo (::after)
   Text paints above all of it (z-index 1), so blends never touch ink.
   ===================================================================== */

:root {
  --paper-shade: #d9cdbe;     /* the color paper drifts toward in its own shadow */
  --grain: 0.06;              /* fiber strength */
  --tex: 0;                   /* real-photo paper strength */
  --paper-tex: none;
  --ink-shadow: 0 0 transparent;
  --ink-mix: 100%;            /* ink lift: 100 = pure stock ink, rest fades into paper */
  --glassiness: 0;            /* 0 = solid paper, 1 = full frosted glass */
}

/* the lit plane: brighter toward the upper-left key light, settling into the
   stock, easing toward its own shade at lower-right. This is the "color of
   that plane" — three samples of the same paper under raking light. */
.sheet {
  --opa: calc((1 - var(--glassiness)) * 100%);
  --pap-hi: color-mix(in srgb, var(--paper) 90%, #fff 10%);
  --pap-lo: color-mix(in srgb, var(--paper) 88%, var(--paper-shade) 12%);
  /* Solid (or glass-scaled) stock color — never transparent over the cream desk.
     Computed background-color is the paper itself so Bright Bond reads as white. */
  background-color: color-mix(in srgb, var(--paper) var(--opa), transparent);
  background-image:
    radial-gradient(135% 110% at 28% 14%,
      color-mix(in srgb, var(--pap-hi) var(--opa), transparent) 0%,
      color-mix(in srgb, var(--paper) var(--opa), transparent) 42%,
      color-mix(in srgb, var(--pap-lo) var(--opa), transparent) 100%);
}

/* direct children ride above the grain/texture layers */
.sheet > .blk, .sheet > .dual-row { position: relative; z-index: 1; }
.sheet > .pagenum { z-index: 1; }

/* ::before — microscopic fiber tooth (procedural, resolution-independent).
   Two-octave fractal noise, desaturated, multiplied into the plane so the
   tooth darkens in the valleys exactly like real stock under light. */

.sheet::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  mix-blend-mode: multiply;
  opacity: calc(var(--grain) * (1 - var(--glassiness)));
  border-radius: inherit;
}
/* a second, large-scale cloud of unevenness — the way a sheet is never one tone */

.sheet::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    var(--paper-tex),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size: cover, 100% 100%;
  mix-blend-mode: multiply;
  opacity: calc((var(--tex) + 0.04) * (1 - var(--glassiness)));
  border-radius: inherit;
}

/* ink that sits ON the stock. --ink-mix is the glyph's opacity into the
   paper (omitting the second % lets CSS fill 100 − mix). --ink-tint is an
   optional hue, mixed with safe paper ink so dark papers keep contrast. */
body {
  --sheet-ink: color-mix(in srgb, var(--ink-tint, var(--paper-ink)) var(--ink-mix), var(--paper));
}
.sheet .blk, .sheet .dual-row { color: var(--sheet-ink); }

/* Theme paper is the base. Explicit paper color in v21.css wins by source order. */
.night { --paper:#2e2436; --paper-ink:#e9dde2; }
[data-theme="meadow"] { --paper:#f4f6e8; --paper-ink:#141810; }
[data-theme="cafe"] { --paper:#fff8ee; --paper-ink:#2b1f15; }
[data-theme="sea"] { --paper:#f4f8fa; --paper-ink:#1c2a33; }
[data-theme="lighthouse"] { --paper:#2c3540; --paper-ink:#d9e3ea; }
[data-theme="study"] { --paper:#f7f0e2; --paper-ink:#241c14; }
[data-theme="dawn"] { --paper:#fff6eb; --paper-ink:#1a2228; }
[data-theme="dusk"] { --paper:#faf0ee; --paper-ink:#261418; }
[data-theme="loft"] { --paper:#f7f8fa; --paper-ink:#16181c; }

/* grain levels */
body[data-grain="off"]   { --grain:0; }
body[data-grain="subtle"]{ --grain:0.05; }
body[data-grain="tooth"] { --grain:0.13; }
body[data-grain="laid"]  { --grain:0.20; }
/* real-photo paper rides with stocks that define --paper-tex */
body[data-grain="off"] .sheet::after { opacity: 0; }
body[data-tex="real"]    { --tex:0.5; }

/* ink finish — six looks a writer can tell apart at a glance.
   crisp/printed/faded are stock ink at different densities;
   graphite/sepia/romance carry a hue, mixed with stock ink so dark
   papers (Blueprint, night places) keep their contrast. */
body[data-ink="crisp"] {
  --ink-mix: 100%;
  --ink-shadow: 0 0 transparent;
  --ink-tint: var(--paper-ink);
}
body[data-ink="printed"] {
  --ink-mix: 86%;
  --ink-shadow: 0 0.55px 0.7px rgba(28, 16, 8, .22);
  --ink-tint: color-mix(in srgb, var(--paper-ink) 62%, #2c1a10);
}
body[data-ink="faded"] {
  --ink-mix: 46%;
  --ink-shadow: 0 0 transparent;
  --ink-tint: color-mix(in srgb, var(--paper-ink) 48%, #8a7d72);
}
body[data-ink="graphite"] {
  --ink-mix: 100%;
  --ink-shadow: 0 0.45px 0.7px rgba(18, 22, 30, .24);
  --ink-tint: color-mix(in srgb, var(--paper-ink) 18%, #4a5568);
}
body[data-ink="sepia"] {
  --ink-mix: 100%;
  --ink-shadow: 0 0.45px 0.7px rgba(90, 48, 12, .24);
  --ink-tint: color-mix(in srgb, var(--paper-ink) 14%, #7a3f12);
}
body[data-ink="romance"] {
  --ink-mix: 100%;
  --ink-shadow: 0 0.45px 0.75px rgba(142, 47, 72, .22);
  --ink-tint: color-mix(in srgb, var(--paper-ink) 12%, #8e2f48);
}

/* night/dark themes: paper finish defers to the theme's dark page unless a
   light stock is explicitly chosen — keep the lit-plane gradient, drop heavy grain */
.night .sheet::before, [data-theme="lighthouse"] .sheet::before,
body[data-paper="solar-dark"] .sheet::before { opacity: calc(var(--grain) * 0.5); }

/* print: keep the chosen tint faintly, drop grain + photo for clean output */
@media print {
  :root, body { --glassiness: 0 !important; }
  .sheet::before, .sheet::after { display: none !important; }
  .sheet { text-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .sheet .blk, .sheet .dual-row { filter: none !important; }
}

/* paper menu head */
.menu-head { font: 600 10px var(--ui); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); padding: 6px 10px 3px; }
#papermenu, #backdropmenu, #placemenu { min-width: 200px; }

/* paper → glass dial */
.glass-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px 9px; }
.glass-row span { font: 600 10px var(--ui); color: var(--ink-faint); letter-spacing: .06em; }
.glass-row input[type="range"] { flex: 1; accent-color: var(--rose); cursor: pointer; }
#glass-val { font: 600 10px var(--ui); color: var(--rose); letter-spacing: 0; }

/* =====================================================================
   Dynamic chrome contrast — text stays legible over ANY backdrop.
   applyBackdrop() measures the image's luminance and sets body[data-key];
   here we frost the floating chrome panels and flip their text accordingly.
   Buttons / inputs / cards carry their own surfaces and are left untouched.
   ===================================================================== */
body[data-key="low"]  { --key-ink:#f4eef1; --key-soft:#d2c5ce; --key-faint:#b3a5af; --key-scrim:#191319; }
body[data-key="high"] { --key-ink:#221a20; --key-soft:#564b53; --key-faint:#867984; --key-scrim:#fcf8f3; }

/* Chrome over a photo: header/status are darker glass, not a slab.
   Rails stay lighter. wpcluster stays a light glass strip on the page. */
body[data-key] #topbar, body[data-key] #statusbar {
  background: color-mix(in srgb, var(--key-scrim) 48%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
body[data-key] #wpcluster {
  background: color-mix(in srgb, var(--paper) 32%, transparent);
  border-color: color-mix(in srgb, var(--key-ink) 14%, transparent);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}
/* text-on-scrim → auto ink */
body[data-key] #statusbar,
body[data-key] #statusbar .hint { color: var(--key-faint); }
body[data-key] .story-line, body[data-key] .story-line b,
body[data-key] .story-chip, body[data-key] .story-chip em, body[data-key] .kept-h,
body[data-key] .pitch-card p, body[data-key] #pitch-kept li,
body[data-key] #doctitle { color: var(--key-ink); }
body[data-key] .story-chip { background: color-mix(in srgb, var(--key-ink) 9%, transparent); }
body[data-key] .pitch-acts .letgo { color: var(--key-faint); }
/* The toolbar + wordmark ride the scrim too — without these they keep the
   light-theme ink and vanish into the frosted dark chrome. */
body[data-key] .tbtn,
body[data-key] .btn.ghost, body[data-key] #pageinfo,
body[data-key] #cur-element, body[data-key] #savestate { color: var(--key-ink); }
body[data-key] .tbtn.el.on { color: #fff; }
body[data-key] .tgroup {
  background: color-mix(in srgb, var(--key-scrim) 55%, transparent);
  border-color: color-mix(in srgb, var(--key-ink) 16%, transparent);
}
body[data-key] .tbtn:hover { background: color-mix(in srgb, var(--key-ink) 12%, transparent); }
body[data-key] .pitch-acts .keep { color: color-mix(in srgb, var(--key-ink) 60%, var(--rose)); }
body[data-key] #savestate.saved, body[data-key] #cloudstate[data-state="saved"] { color: var(--gold); }

/* ---------- Settings modal ---------- */
#settings .modal-card { width: min(720px, 94vw); max-height: 88vh; }
#settings-body { display: grid; grid-template-columns: minmax(130px, 150px) 1fr; min-height: 0; }
#settings-tabs { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; border-right: 1px solid var(--line); }
.set-tab { text-align: left; font: 600 13px var(--ui); color: var(--ink-soft);
  background: none; border: 0; border-radius: 9px; padding: 9px 12px; cursor: pointer; transition: background .15s, color .15s; }
.set-tab:hover { background: var(--blush); color: var(--ink); }
.set-tab.on { background: var(--rose); color: #fff; }
.set-pane { display: none; padding: 18px 22px; overflow-y: auto; max-height: min(64vh, 520px); }
.set-pane.on { display: block; animation: pop .18s ease; }
.set-pane h3 { margin: 0 0 10px; font: italic 600 19px var(--display); color: var(--ink); }
.set-pane h4 { margin: 16px 0 8px; font: 600 11px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.set-vow { font: 15px/1.5 var(--display); font-style: italic; color: var(--ink); margin: 0 0 14px; }
.set-note { font: 12.5px/1.55 var(--ui); color: var(--ink-soft); margin: 12px 0 0; }
.set-soon { font: 600 10px var(--ui); font-style: normal; color: var(--gold);
  background: color-mix(in srgb, var(--gold) 16%, transparent); border-radius: 5px; padding: 1px 6px; margin-left: 4px; }
.set-guarantees { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.set-guarantees li { font: 13px/1.5 var(--ui); color: var(--ink); display: grid; grid-template-columns: 26px minmax(0,1fr); align-items: start; gap: 4px;
  background: color-mix(in srgb, var(--paper) 70%, transparent); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.g-ico { font-size: 15px; }
.set-data { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 6px; }
.vault-stats { display: flex; flex-wrap: wrap; gap: 16px; margin: 6px 0 12px; }
.vault-stats div { font: 500 11px var(--ui); color: var(--ink-faint); }
.vault-stats b { display: block; font: 600 18px var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.set-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn.danger { color: #a02844; border-color: color-mix(in srgb, #a02844 30%, var(--line)); }
.night .btn.danger { color: #e87b9b; }
.btn.danger:hover { background: color-mix(in srgb, #a02844 8%, var(--paper)); border-color: #a02844; }
.set-field { display: block; margin: 12px 0; }
.set-field span { display: block; font: 600 12px var(--ui); color: var(--ink-soft); margin-bottom: 6px; }
.set-field input { width: 100%; box-sizing: border-box; font: 13px var(--ui); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; }
.set-field input:focus { outline: none; border-color: var(--rose); }
.set-row { margin: 12px 0; }
.set-check { font: 13px var(--ui); color: var(--ink); display: flex; align-items: center; gap: 8px; cursor: pointer; }
.set-kv { font: 13px/1.7 var(--ui); color: var(--ink); }
.set-kv b { color: var(--rose); }
/* ensure app is visible once the page has rendered */
body.loaded #app { visibility: visible; }

@media (max-width: 620px) {
  #settings-body { grid-template-columns: 1fr; }
  #settings-tabs { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px; }
  .set-tab { flex: 1; min-width: 80px; text-align: center; padding: 8px 10px; }
}

/* ---------- cloud status + the Library ---------- */
#cloudstate {
  background: none; border: 0; cursor: pointer; padding: 0 6px;
  font: 500 12px var(--ui); color: var(--ink-faint);
}
#cloudstate[data-state="saved"]  { color: var(--gold); }
#cloudstate[data-state="saving"] { color: var(--ink-soft); }
#cloudstate[data-state="error"]  { color: var(--critic-mean-edge, #b4435e); }
#elsewhere-dot { color: var(--rose); font-size: 10px; margin-left: 1px; animation: elsePulse 2s ease-in-out infinite; }
@keyframes elsePulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

.lib-card {
  width: min(560px, 94vw); max-height: 84vh; display: flex; flex-direction: column;
  background: var(--surface);
  backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: inset 0 1px 0 var(--hi), var(--shadow);
  animation: driftIn .6s var(--drift); overflow: hidden;
}
.lib-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid var(--line); }
.lib-head h2 { margin: 0; font: italic 600 21px var(--display); color: var(--ink); }
.lib-x { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--ink-faint); cursor: pointer; }
.lib-x:hover { color: var(--ink); }
.lib-section { padding: 14px 20px; overflow-y: auto; }
.lib-section h3 { margin: 0 0 10px; font: 600 11px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.lib-list { display: grid; gap: 8px; }
.lib-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  text-align: left; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 40%, transparent); color: var(--ink); font: 500 14px var(--ui);
}
button.lib-row { cursor: pointer; transition: border-color .15s, transform .1s; }
button.lib-row:hover { border-color: var(--rose); transform: translateY(-1px); }
.lib-sub { font: 400 12px var(--ui); color: var(--ink-faint); margin-top: 3px; }
.lib-open { font: 500 12px var(--ui); color: var(--rose); opacity: 0; }
button.lib-row:hover .lib-open { opacity: 1; }
.lib-row.clash { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.lib-tag { font: 500 10px var(--ui); padding: 1px 6px; border-radius: 6px; background: var(--gold); color: #fff; vertical-align: middle; }
.lib-tag.here { background: var(--rose); }
.lib-empty { color: var(--ink-faint); font: italic 400 13px var(--ui); padding: 6px 2px; }
.lib-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.lib-field { display: grid; gap: 5px; font: 500 12px var(--ui); color: var(--ink-soft); }
.lib-field input { font: 500 13px var(--ui); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; }
.lib-field input:focus { outline: none; border-color: var(--rose); }
.lib-note { font: 400 11px var(--ui); color: var(--ink-faint); }

/* ---------- Tools: menu checks · scene numbers · focus mode · find bar ---------- */
.menu button .chk { color: var(--rose); font-size: 12px; margin-left: auto; opacity: 0; }
.menu button.on .chk { opacity: 1; }

/* scene numbers — a CSS counter, so they're always correct with zero JS */
body.scene-nums #pages { counter-reset: urn-scene; }
body.scene-nums .blk[data-type="scene"] { position: relative; }
body.scene-nums .blk[data-type="scene"]::before {
  counter-increment: urn-scene; content: counter(urn-scene);
  position: absolute; left: -0.85in; top: 0; font: 12pt/1 var(--mono); color: var(--ink-faint);
}
body.scene-nums .blk[data-type="scene"]::after {
  content: counter(urn-scene);
  position: absolute; right: -0.5in; top: 0; font: 12pt/1 var(--mono); color: var(--ink-faint);
}

/* focus / typewriter mode — dim all but the current line */
body.focus-mode .blk { opacity: 0.26; transition: opacity .25s ease; }
body.focus-mode .blk.is-current { opacity: 1; }

/* find & replace bar — hidden by default; :not([hidden]) restores flex.
   (A bare `display:flex` on #findbar outranks the UA [hidden] rule.) */
#findbar {
  position: fixed; top: 92px; right: 22px; z-index: 75;
  display: none;
  align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px;
  background: var(--surface); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--hi), var(--shadow);
  animation: pop .14s ease;
}
#findbar:not([hidden]) { display: flex; }
#findbar[hidden] { display: none !important; }
#findbar input[type="text"] {
  font: 500 13px var(--ui); color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; width: 148px;
}
#findbar input[type="text"]:focus { outline: none; border-color: var(--rose); }
#findbar button {
  font: 500 12px var(--ui); color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; cursor: pointer;
}
#findbar button:hover { border-color: var(--rose); }
#find-count { font: 500 11px var(--ui); color: var(--ink-faint); min-width: 36px; text-align: center; }
#find-case { display: flex; align-items: center; gap: 3px; font: 600 11px var(--ui); color: var(--ink-soft); cursor: pointer; user-select: none; }
#find-close { font-size: 16px; line-height: 1; padding: 4px 9px; }

/* ============================================================
   PRO PASS — Batch B (motion, microinteractions, rails, FD polish)
   & Batch C (backdrop vignette, save de-shimmer).
   Added 2026-07-02. All rules here are additive/overriding; nothing
   was removed. To revert, delete from this comment to EOF.
   ============================================================ */

/* --- 1. Motion: wire --spring and --drift into the everyday chrome. --- */

.btn, select {
  transition:
    transform .18s var(--spring),
    box-shadow .22s var(--drift),
    border-color .18s var(--drift),
    background .22s var(--drift);
}
.btn:active { transform: translateY(1px) scale(.985); }

.tbtn {
  transition:
    background .22s var(--drift),
    color .18s var(--drift),
    transform .18s var(--spring),
    box-shadow .22s var(--drift);
}
/* the active element pill gets a subtle glow when it flips */
.tbtn.el.on {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rose) 55%, transparent),
              0 6px 18px -6px color-mix(in srgb, var(--rose) 55%, transparent);
}

/* new-sheet reveal: pages ease in instead of snapping. */
.sheet { animation: sheet-arrive .38s var(--drift); }
@keyframes sheet-arrive {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* but never animate the first (already-there) sheet on repaint */
.sheet:only-of-type { animation: none; }

/* --- 2. Save microinteraction: brief flash on ⌘S / autosave commit. --- */

.btn.primary { position: relative; overflow: hidden; }
.btn.primary.saved-flash::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(closest-side, rgba(255,255,255,.55), transparent 70%);
  animation: save-pulse .55s var(--drift) forwards;
  pointer-events: none;
}
@keyframes save-pulse {
  0% { opacity: 0; transform: scale(.6); }
  40% { opacity: .9; }
  100% { opacity: 0; transform: scale(1.6); }
}

/* autosave dot: a slow breathing pulse when actively saving */
#savestate.saving::before {
  content: '●'; margin-right: 5px; color: var(--rose);
  animation: dot-breathe 1.4s var(--drift) infinite;
}
@keyframes dot-breathe {
  0%,100% { opacity: .35; }
  50%     { opacity: 1;   }
}

/* undo/redo pulse a soft ring behind the caret when they restore */
#pages.undo-pulse::after {
  content: ''; position: absolute;
  left: var(--pulse-x, 50%); top: var(--pulse-y, 50%);
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rose) 65%, transparent);
  animation: caret-ring .6s var(--drift) forwards;
}
@keyframes caret-ring {
  from { opacity: .8; transform: scale(.4); }
  to   { opacity: 0;  transform: scale(1.6); }
}
#pages { position: relative; }

/* --- 3. Scene headings underlined (FD industry convention). --- */

.blk[data-type="scene"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--paper-ink) 85%, transparent);
}
/* underline only the text, not the trailing empty space */
.blk[data-type="scene"]:empty { text-decoration: none; }

/* --- 5. Batch C: backdrop vignette — quiet the atmosphere near the page. --- */
/* Neutral darkening only. Mixing cream --bg (#eadfce) onto a Place photo
   (Garden brick, etc.) painted a warm orangish band around the sheet. */
body.has-backdrop #deck {
  background:
    radial-gradient(1200px 700px at 50% 20%,
      rgba(28, 26, 24, 0.10) 0%,
      rgba(28, 26, 24, 0.04) 40%,
      transparent 70%);
}

/* --- 6. Batch C: soften the double-primary problem. --- */
/* The Room's shimmer button is the one true "special" CTA. Save should be firm
   but not competing — drop the sheen gradient and lean on the flash microinteraction. */
.btn.primary { background-image: none; }
.btn.primary:hover { background: var(--rose-deep); }

/* --- 7. Tiny type-microscope corrections. --- */
/* Status-bar element name gets a subtle vertical rule separating the hints. */
#statusbar .hint { border-left: 1px solid var(--line); padding-left: 14px; margin-left: -4px; }
/* Parenthetical label in element bar reads better as PAREN than "( )". */
/* (label rename is done in HTML, not CSS) */

/* ============ 2026-08-12 design pass: pro, calm, contemporary ============ */
:root {
  --accent: #c96f4a;
  --ease: cubic-bezier(0.2, 0.9, 0.25, 1);
}
body { font-family: var(--ui); }
#topbar .btn, #wpcluster .tbtn, #statusbar { font-family: var(--ui); }
#topbar .btn { font-size: 13px; font-weight: 500; letter-spacing: .01em; border-radius: 9px;
  transition: background .14s var(--ease), transform .12s var(--ease), box-shadow .14s var(--ease); }
#topbar .btn:active { transform: scale(.97); }
#topbar {
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: none;
  border-bottom: 0;
}
#pages .sheet { border-radius: 3px; }

/* Rulers: quiet tick marks hugging the floating sheet (no layout impact) */
#pages { position: relative; }
body.pref-rulers #pages::before {
  content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 18px; pointer-events: none;
  background:
    repeating-linear-gradient(to right, rgb(127 127 127 / .55) 0 1px, transparent 1px 96px) bottom / 100% 100% no-repeat,
    repeating-linear-gradient(to right, rgb(127 127 127 / .35) 0 1px, transparent 1px 24px) bottom / 100% 7px no-repeat;
}
body.pref-rulers #pages::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -26px; width: 18px; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgb(127 127 127 / .55) 0 1px, transparent 1px 96px) right / 100% 100% no-repeat,
    repeating-linear-gradient(to bottom, rgb(127 127 127 / .35) 0 1px, transparent 1px 24px) right / 7px 100% no-repeat;
}

/* Preference: underlined scene headings */
body.pref-slug-underline .blk[data-type="scene"] {
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Preference: AI off = pure typewriter */
body.pref-ai-off #smarttype { display: none !important; }

/* Settings: sharp, big, calm typography + custom checkbox rows */
#settings h3, .set-pane h3 { font: 600 15px/1.3 var(--ui); letter-spacing: .01em; margin: 4px 0 10px; }
.set-check { display: flex; gap: 12px; align-items: flex-start; padding: 10px 10px; border-radius: 10px;
  cursor: pointer; transition: background .12s var(--ease); }
.set-check:hover { background: rgb(127 127 127 / .08); }
.set-check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.set-check b { font-weight: 600; font-size: 14px; }
.set-check span { display: block; font-size: 12.5px; opacity: .72; margin-top: 2px; line-height: 1.45; }

/* Revision mark (⌘] / ⌘[): a Final-Draft-style asterisk in the right margin. */
/* Specificity note: v21.css paints ink with body[data-v21] .sheet .blk[data-type]; the revised-ink rule has to outrank it. */
.blk[data-rev="1"] { position: relative; }
.sheet .blk[data-type][data-rev="1"], body[data-v21="true"] .sheet .blk[data-type][data-rev="1"] { color: var(--rev-ink, #c8362b) !important; } /* !important: v21.css paints ink with !important */
/* Final Draft draws every star in ONE column at 7.75" from the page edge,
   regardless of the paragraph's indent. The pseudo is positioned against the
   block, so subtract the sheet's 1.5" left pad and the block's own margin-left
   (declared per type as --blk-ml). */
/* One star per line of the revised paragraph (Final Draft marks every line):
   a column of stars clipped to the block's height, one per line-height. The
   pseudo must not inherit paragraph typography (parenthetical text-indent was
   pushing stars left; scene bold/underline would restyle them). */
.blk[data-rev="1"]::after, .blk.rev-lines::after {
  content: "*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*";
  position: absolute; top: 0; bottom: 0; left: calc(6.25in - var(--blk-ml, 0in)); right: auto;
  width: 1ch; overflow: hidden; white-space: pre;
  font: inherit; font-weight: 400; font-style: normal; line-height: inherit;
  text-indent: 0; text-align: left; text-transform: none; text-decoration: none; letter-spacing: 0;
  color: var(--rev-ink, #c8362b);
}
.blk[data-type="character"] { --blk-ml: 2in; }
.blk[data-type="parenthetical"] { --blk-ml: 1.5in; }
.blk[data-type="dialogue"] { --blk-ml: 1in; }
.blk[data-type="newact"], .blk[data-type="endact"] { --blk-ml: -0.5in; }
.blk[data-type="sequence"] { --blk-ml: -0.25in; }
.dual-col .blk { --blk-ml: 0in; }
/* Scene numbers already own ::after on scene headings (and there is only one),
   so a revised heading has to render the number and the star together. */
body.scene-nums .blk[data-type="scene"][data-rev="1"]::after { content: counter(urn-scene) " *"; left: auto; right: -0.5in; }
/* Track Changes off (gear menu): marks stay in the document and the FDX, just not on screen. */
body.track-changes-off .sheet .blk[data-type][data-rev="1"], body.track-changes-off[data-v21="true"] .sheet .blk[data-type][data-rev="1"] { color: var(--sheet-ink, var(--paper-ink)) !important; }
body.track-changes-off .blk[data-rev="1"]::after, body.track-changes-off .blk.rev-lines::after { content: none; }
/* partial marks: the star column is clipped to the lines the change touches */
.blk.rev-lines::after { -webkit-mask-image: var(--rev-mask); mask-image: var(--rev-mask); }
.sheet .blk span[data-rev="1"], body[data-v21="true"] .sheet .blk span[data-rev="1"] { color: var(--rev-ink, #c8362b) !important; }
body.track-changes-off .sheet .blk span[data-rev="1"], body.track-changes-off[data-v21="true"] .sheet .blk span[data-rev="1"] { color: inherit !important; }
body.track-changes-off.scene-nums .blk[data-type="scene"][data-rev="1"]::after { content: counter(urn-scene); }

/* Go To bar (⌘G) — hidden by default; :not([hidden]) restores flex, the same
   pattern #findbar uses (a bare `display:flex` outranks the UA [hidden] rule). */
#gotobar { position: fixed; top: 64px; right: 24px; z-index: 90; display: none; gap: 6px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
#gotobar:not([hidden]) { display: flex; }
#gotobar[hidden] { display: none !important; }
#gotobar input { font: 13px var(--ui); padding: 6px 8px; width: 260px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--ink); }
#gotobar button { font: 14px var(--ui); background: none; border: 0; color: var(--ink-faint); cursor: pointer; }
@media print { #gotobar { display: none !important; } }
#settings .set-tab { font-family: var(--ui); font-size: 13px; font-weight: 500; }


/* ---------- the Project pill + panel ---------- */
/* The header area is not a place to enter text; it is the Project button.
   Flat at rest, a little elevation only on rollover, like its neighbours. */
.project-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 650 13.5px/1 var(--ui);
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform 140ms cubic-bezier(.2,.9,.2,1), background-color 140ms ease-out, border-color 140ms ease-out, box-shadow 140ms ease-out;
}
.project-pill:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border-color: color-mix(in srgb, var(--ink) 16%, transparent);
  box-shadow: 0 3px 10px -4px rgba(0, 0, 0, .35);
}
.project-pill:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.project-pill[aria-expanded="true"] {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  border-color: color-mix(in srgb, var(--ink) 20%, transparent);
}
body[data-v21="true"] .project-pill { color: var(--v21-ink); }
body[data-v21="true"] .project-pill:hover {
  background: color-mix(in srgb, var(--v21-ink) 10%, transparent);
  border-color: color-mix(in srgb, var(--v21-ink) 18%, transparent);
}

/* The quiet saved-state beside the filename — the truth about the real file.
   "saved": the file on disk holds what is on the sheet. "edited": the sheet
   is ahead of the file. "not saved yet": no real file backs this script.
   The footer's autosave dot is about crash recovery; this one is about the
   file, so Save never has to be a matter of faith. */
#filestate {
  font: 500 10.5px/1 var(--mono);
  color: var(--ink-faint);
  letter-spacing: .02em;
  white-space: nowrap;
}
#filestate:empty { display: none; }
#filestate::before { content: '·'; margin-right: 7px; color: var(--ink-faint); }
#filestate[data-state="saved"] { color: var(--gold); }
#filestate[data-state="edited"] { color: var(--ink-soft); }
body[data-v21="true"] #filestate { color: color-mix(in srgb, var(--v21-ink) 62%, transparent); }
body[data-v21="true"] #filestate[data-state="saved"] { color: var(--gold); }

/* The Project menu belongs in the open Set beside the centered Sheet. Its
   width follows that gutter and stops 14px before the paper at desktop
   sizes, instead of letting the old 320px minimum nick the Sheet's edge. */
#projectmenu {
  left: 0;
  right: auto;
  width: clamp(200px, calc((100vw - 8.5in) / 2 - 32px), 300px);
  min-width: 0;
  max-width: 300px;
  max-height: min(calc(100vh - 84px), 720px);
}
/* The section grammar is shared with the gear menu (#moremenu) — one ratified
   language, two gutters. Extend both selectors together. */
#projectmenu .filename-menu-section,
#moremenu .filename-menu-section { padding: 5px 0; }
#projectmenu .filename-menu-section + .filename-menu-section,
#moremenu .filename-menu-section + .filename-menu-section { border-top: 1px solid var(--line); }
#projectmenu .file-group-label,
#moremenu .file-group-label {
  padding: 5px 10px 4px;
  color: var(--ink-faint);
  font: 700 9.5px/1 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}
#projectmenu .file-ext { color: var(--ink-faint); font: 500 10.5px/1 var(--mono); }
#projectmenu .kbd,
#moremenu .kbd {
  color: var(--ink-faint);
  font: 600 9.5px/1 var(--mono);
}
#projectmenu .pj-name { font: 700 15px/1.3 var(--ui); padding: 2px 10px 6px; }
#projectmenu .pj-empty { padding: 4px 10px 8px; font: 400 12.5px/1.5 var(--ui); color: var(--ink-soft); }
#projectmenu .pj-bucket { padding: 6px 10px 2px; font: 700 10.5px/1 var(--mono); letter-spacing: .06em; color: var(--ink-faint); text-transform: uppercase; }
#projectmenu .pj-doc { display: flex; align-items: baseline; gap: 8px; }
#projectmenu .pj-order { flex: none; color: var(--ink-faint); font: 500 11px/1 var(--mono); }
#projectmenu .pj-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#projectmenu .pj-meta { flex: none; color: var(--ink-faint); font: 500 10.5px/1 var(--mono); }
#projectmenu .pj-dot { color: var(--rose); }
#projectmenu .pj-current .pj-title { font-weight: 700; }
/* Notes: the muted shelf - soft ink, italic, a date where the count would be. */
#projectmenu .pj-doc.pj-note { color: var(--ink-soft); }
#projectmenu .pj-doc.pj-note .pj-title { font-style: italic; }

/* A conventional file menu: quiet rectangular rows, grouped by separators.
   Project drafts use the same language so the whole dropdown reads as one
   instrument instead of a tray of unrelated pills. */
#projectmenu button,
#moremenu button {
  min-height: 32px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  padding: 7px 10px;
  margin: 0;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
#projectmenu button:hover,
#moremenu button:hover { background: var(--blush); transform: none; }
#projectmenu .pj-current { background: var(--blush); }
#projectmenu .pj-doc.pj-note { background: color-mix(in srgb, var(--blush) 24%, transparent); }


/* The pill holds the old title's post at the left edge of the bar. */
.project-wrap { margin-right: auto; }
#projectmenu { left: 0; right: auto; }

/* The gear menu is the filename menu's mirror: it belongs in the open Set on
   the RIGHT of the Sheet. Its width follows that gutter and stops 14px before
   the paper at desktop sizes; when the window narrows, the stage camera cedes
   the right gutter while it is open ('gear-open' in v21.js), so the card can
   never slide under or behind the paper. */
#moremenu {
  right: 0;
  left: auto;
  width: clamp(200px, calc((100vw - 8.5in) / 2 - 32px), 300px);
  min-width: 0;
  max-width: 300px;
  max-height: min(calc(100vh - 84px), 720px);
}
/* A row's right-hand cluster: kbd hint and check read as one quiet unit. */
#moremenu .gear-meta { display: inline-flex; align-items: center; gap: 8px; }

/* =====================================================================
   The bullseye. A first-person shotgun, an aim mode, and wounds that are
   IN the page: each damaged sheet is masked so the desk shows through the
   holes, while scorch/rim art floats on the damage layer above (z 2 over
   #pages z 1) with pointer-events off — the words underneath are data,
   not pixels, and editing continues straight through the buckshot.
   ===================================================================== */
/* masking a sheet clips its own box-shadow, so a stand-in under the page
   (z 0, beneath #pages z 1) wears var(--sheet-shadow) for damaged sheets */
#shotgun-underlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
#shotgun-underlay .sg-shadow {
  position: absolute;
  border-radius: 3px;
  box-shadow: var(--sheet-shadow);
}
#shotgun-damage {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}
#shotgun-damage svg {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}
#shotgun-damage g.shot { animation: sg-stamp 150ms ease-out; }
@keyframes sg-stamp {
  from { opacity: 0; }
  to { opacity: 1; }
}
#shotgun-damage.sweeping svg {
  transition: opacity 400ms ease, translate 400ms ease;
  opacity: 0;
  translate: 0 12px;
}

/* ---- aim mode: the scrim owns the cursor, the reticle rides it ---- */
#btn-bullseye.armed { color: #b3402e; }
#shotgun-aim {
  position: fixed;
  inset: 0;
  z-index: 9400; /* over the desk, under the gun (stage at 9500) */
  cursor: none;
}
.sg-reticle {
  position: fixed;
  left: -22px;
  top: -22px;
  width: 44px;
  height: 44px;
  pointer-events: none;
  will-change: transform;
}
.sg-reticle svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: rgba(250, 248, 240, 0.92);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 1.5px rgba(12, 10, 6, 0.9));
}
.sg-reticle svg .dot { fill: rgba(250, 248, 240, 0.92); stroke: none; }

/* ---- the stage: gun, muzzle light, screen kick ---- */
#shotgun-stage {
  position: fixed;
  inset: 0;
  z-index: 9500;
  pointer-events: none;
  overflow: hidden;
}
/* The gun is a 3D rig: .sg-gun mounts it (rise, lateral drift, screen
   perspective), .sg-rig swivels it (draw pose, aim yaw/pitch, recoil), and
   three .sg-layer planes sit at real depths inside it — barrel far, pump
   mid, receiver near — pre-scaled so they line up at rest and parallax the
   moment the rig turns. That parallax is what makes it read as an object. */
.sg-gun {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(66vh, 600px);
  aspect-ratio: 600 / 900;
  transform: translate(calc(-50% + 120px), 112%);
  transition: transform 420ms cubic-bezier(.18, .9, .26, 1.06);
  perspective: 830px;
  perspective-origin: 50% 26%;
  will-change: transform;
}
.sg-gun svg { width: 100%; height: 100%; display: block; }
.sg-rig {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform:
    translateY(var(--ry, 0px)) translateZ(var(--rz, 0px))
    rotateX(calc(var(--pitch, 0deg) + var(--rx, 0deg)))
    rotateY(calc(var(--yaw, 0deg) + var(--ryw, 0deg)))
    rotateZ(calc(var(--yaw, 0deg) * -0.12 + var(--rrl, 0deg) + 1.2deg));
  transition: transform 420ms cubic-bezier(.2, .85, .3, 1.07);
  will-change: transform;
}
.sg-layer { position: absolute; inset: 0; }
.sg-barrel { transform: translateZ(-160px) scale(1.193); }
.sg-pump {
  transform: translateZ(0);
  transition: transform 150ms cubic-bezier(.3, .6, .3, 1);
}
.sg-receiver { transform: translateZ(110px) scale(0.867); }
.sg-pump svg, .sg-receiver svg { filter: drop-shadow(-6px 8px 14px rgba(10, 8, 4, 0.38)); }

/* holstered: below the frame AND slung over the shoulder — canted hard,
   muzzle tipped away, pushed toward the camera. The draw is simply these
   rotations unwinding while the mount rises: the gun sweeps up from the
   lower corner already foreshortened, and settles with a slight overshoot */
#shotgun-stage:not(.up) .sg-rig {
  --rx: 38deg; --ryw: -32deg; --rrl: -55deg; --rz: 180px; --ry: 140px;
}
#shotgun-stage.up .sg-gun {
  transform: translate(calc(-50% + var(--track, 0px)), 6%);
}
/* recoil: the whole rig kicks BACK TOWARD THE CAMERA (translateZ) and the
   muzzle dips (rotateX) — in fast, then the 420ms base transition plays the
   slow recovery, Quake's v_kicktime decay */
#shotgun-stage.fired .sg-rig {
  --rx: 8deg; --rz: 160px; --ry: 44px;
  transition: transform 80ms cubic-bezier(.2, .7, .3, 1);
}
/* the armed sway: an arc, not an elevator — widest sweep at the sides where
   it also dips and rolls, the momentum-tied figure-8 of a carried gun */
#shotgun-stage.armed .sg-gun svg { animation: sg-bob 3.4s ease-in-out infinite; }
#shotgun-stage.fired .sg-gun svg { animation: none; }
@keyframes sg-bob {
  0% { transform: translate(0, 2px) rotate(0deg); }
  25% { transform: translate(12px, 9px) rotate(0.7deg); }
  50% { transform: translate(0, 3px) rotate(0deg); }
  75% { transform: translate(-12px, 9px) rotate(-0.7deg); }
  100% { transform: translate(0, 2px) rotate(0deg); }
}
#shotgun-stage.away .sg-gun {
  transform: translate(calc(-50% + 40px), 114%);
  transition: transform 340ms cubic-bezier(.5, 0, .8, .4);
}
#shotgun-stage.away .sg-rig {
  --rx: 26deg; --ryw: -18deg; --rrl: -30deg; --rz: 130px; --ry: 50px;
  transition: transform 340ms cubic-bezier(.5, 0, .8, .4);
}
/* the pump cycle: the fore-end (and the hand on it) slides down and TOWARD
   the camera — a depth move, not a lateral one — then racks home */
.sg-gun.pump .sg-pump { transform: translate3d(0, 70px, 120px) scale(0.94); }

/* two-frame muzzle flash, after Doom's SHTF sprite pair: a bright frame
   (4 tics ≈ 114ms) then a dimmer, wider one (3 tics ≈ 86ms), held as
   plateaus rather than a smooth fade so it reads as sprite frames. The
   flash lives in the BARREL layer, so its light plane sits at the muzzle's
   depth, behind the pump and the hand. */
.sg-flash-group { opacity: 0; }
#shotgun-stage.fired .sg-flash-group { animation: sg-muzzle 200ms linear; }
@keyframes sg-muzzle {
  0% { opacity: 0; transform: scale(0.35); }
  6% { opacity: 1; transform: scale(1.15); }
  56% { opacity: 1; transform: scale(1.15); }
  57% { opacity: 0.55; transform: scale(1.34); }
  96% { opacity: 0.5; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(1.45); }
}

/* a breath of smoke after the boom, drifting off the muzzle */
.sg-smoke { opacity: 0; transform-box: fill-box; transform-origin: 50% 90%; }
#shotgun-stage.fired .sg-smoke { animation: sg-smoke 620ms ease-out 150ms; }
@keyframes sg-smoke {
  0% { opacity: 0; transform: translateY(0) scale(0.7); }
  30% { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(-72px) scale(1.9); }
}

.sg-page-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 40%),
    rgba(255, 242, 205, 0.85),
    rgba(255, 176, 80, 0.32) 16%,
    rgba(255, 150, 60, 0.12) 32%,
    transparent 55%);
}
#shotgun-stage.fired .sg-page-flash { animation: sg-flash 230ms ease-out; }
@keyframes sg-flash {
  0% { opacity: 0; }
  15% { opacity: 1; }
  100% { opacity: 0; }
}

body.shotgun-kick #app { animation: sg-kick 240ms cubic-bezier(.2, .6, .3, 1); }
@keyframes sg-kick {
  0% { transform: none; }
  16% { transform: translate(0, 10px); }
  38% { transform: translate(-2px, 4px); }
  70% { transform: translate(1px, 2px); }
  100% { transform: none; }
}

.sg-impact {
  position: fixed;
  z-index: 9600;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(rgba(255, 236, 180, 0.95), rgba(120, 80, 40, 0.35) 55%, transparent 72%);
  transform: scale(0.3);
  opacity: 1;
  transition: transform 240ms ease-out, opacity 260ms ease-out;
}
.sg-impact.go { transform: scale(3); opacity: 0; }

/* ---- the quiet broom, present only once shots exist ---- */
#shotgun-sweep {
  position: fixed;
  right: 18px;
  bottom: 52px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font: 500 12px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.04em;
  color: var(--v21-ink, #3a4536);
  background: rgba(250, 251, 247, 0.72);
  border: 1px solid rgba(58, 69, 54, 0.16);
  border-radius: 999px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.85), 0 6px 18px -8px rgba(23, 39, 21, 0.3);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  cursor: pointer;
  opacity: 0.82;
  transition: opacity 160ms ease, transform 160ms ease;
}
#shotgun-sweep:hover { opacity: 1; transform: translateY(-1px); }
#shotgun-sweep .ic { width: 14px; height: 14px; }
#shotgun-sweep[hidden] { display: none; }

/* v24.2: the primary tool buttons center above the paper; the filename pill
   holds the left edge and ONLY the Settings gear sits offset to the right
   (Patrick: "I want them centered... EXCEPT FOR the gear"). Pulling the pill
   and the gear out of the flex flow lets justify-content:center do the rest. */
#topbar .project-wrap {
  position: absolute; left: 18px; top: 0; bottom: 0;
  display: flex; align-items: center; margin-right: 0;
}
#topbar > .menu-wrap:has(> #btn-more) {
  position: absolute; right: 18px; top: 0; bottom: 0;
  display: flex; align-items: center;
}