:root{
  --chrome:#FBFBF9; --panel:#F0F1EE; --danger:#B4453F; --canvas:#E9EBE6;
  --paper:#F6F7F4; --ink:#161D28; --muted:#5C6672; --blue:#2B5CC4;
  --blue-soft:#E4EAF7; --mark:#F5D547; --line:#D8DCD4; --white:#fff;
  /* The AV grid rules. Not --line: that is the app's hairline at 3%
     against the page, which is right for a quiet separator and wrong for
     the thing that tells a director which column they are reading. */
  --av-rule:#9BA4AF; --av-rule-strong:#5C6672;
  --serif:'Charter','Iowan Old Style','Palatino',Georgia,serif;
  --mono:'Courier Prime','Courier New',Courier,monospace;
  --sans:-apple-system,'Segoe UI',system-ui,sans-serif;
}
html{color-scheme:light}
/* Without this the browser keeps drawing its own furniture for a light page:
   white scrollbars down a dark editor, a white select popup, a black caret. */
html[data-theme="dark"]{color-scheme:dark;
  --chrome:#171C24; --panel:#151A21; --canvas:#10141A;
  --paper:#12161C; --ink:#E4E8EF; --danger:#E8837C; --muted:#8B95A3; --blue:#6C96E8;
  --blue-soft:#22304A; --mark:#8A7A22; --line:#333B47; --white:#1B222C;
  --av-rule:#55606F; --av-rule-strong:#8B95A3;
}
html[data-theme="dark"] .btn.primary,html[data-theme="dark"] .rbx.primary{color:#0E1218}
html[data-theme="dark"] .rbx.primary .rbx-lb{color:#0E1218}
html[data-theme="dark"] .pill{background:var(--ink);color:var(--paper)}
html[data-theme="dark"] .ed-page{box-shadow:0 1px 6px rgba(0,0,0,.5)}
html[data-theme="dark"] .nv-img{filter:brightness(.9)}
@media print{
  /* The variables below go back to the light values; color-scheme has to as
     well, or the browser keeps drawing its own furniture for a dark page. */
  html,html[data-theme="dark"]{color-scheme:light}

  html[data-theme="dark"]{
    --chrome:#fff; --panel:#fff; --canvas:#fff; --paper:#fff; --ink:#161D28;
    --muted:#5C6672; --line:#D8DCD4; --white:#fff; --blue:#2B5CC4;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);
  font-size:17px;line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--blue)}
main{flex:1}

/* nav */
nav{display:flex;align-items:center;gap:1.4rem;padding:1rem 1.5rem;
  border-bottom:2px solid var(--ink);flex-wrap:wrap}
nav .brand{font-weight:700;font-size:1.25rem;color:var(--ink);text-decoration:none;letter-spacing:-.01em;
  display:flex;align-items:center;gap:.55rem}
nav .brand-stack{display:flex;flex-direction:column;line-height:1.02}
nav .brand-dot{color:var(--blue)}
nav .brand-by{font-size:.52rem;font-weight:400;font-style:italic;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-top:2px}
nav .brandmark{height:34px;width:auto;display:block}
nav .links{display:flex;gap:1.1rem;align-items:center;margin-left:auto;flex-wrap:wrap}
nav a.nl{color:var(--ink);text-decoration:none;font-family:var(--mono);font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase}
nav a.nl:hover{color:var(--blue)}

/* Recent documents, in the tool's own navigation. A <details> so it opens with
   no script: the nav is rendered on the editor page too, and a menu that needs
   JavaScript to open is a menu that is closed while the page is still booting. */
nav .nav-recent{position:relative}
nav .nav-recent>summary{cursor:pointer;list-style:none;user-select:none}
nav .nav-recent>summary::-webkit-details-marker{display:none}
nav .nav-recent>summary::after{content:"\2304";margin-left:.3rem;font-size:.7em;opacity:.6}
nav .nav-recent[open]>summary::after{content:"\2303"}
/* Hung from its RIGHT edge: the trigger sits in the right-hand cluster, the
   links wrap on a narrow window, and a menu anchored left runs off the screen
   the moment the trigger is near it. */
nav .nav-recent-body{position:absolute;top:calc(100% + .5rem);right:0;z-index:60;
  min-width:16rem;max-width:min(22rem, 90vw);background:var(--paper);border:1px solid var(--ink);
  border-radius:6px;padding:.35rem;box-shadow:0 8px 24px rgba(0,0,0,.12)}
nav .nav-recent-body a{display:block;padding:.4rem .55rem;border-radius:4px;
  text-decoration:none;color:var(--ink)}
nav .nav-recent-body a:hover{background:var(--wash,rgba(0,0,0,.05))}
nav .nav-recent-body .nr-title{display:block;font-size:.82rem;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
nav .nav-recent-body .nr-project{display:block;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.06em;text-transform:uppercase;opacity:.6;margin-top:.1rem}
@media print{nav .nav-recent{display:none}}

.wrap{max-width:46rem;margin:0 auto;padding:2.5rem 1.5rem}
.legal{max-width:40rem}
.legal h1{font-size:2.1rem;margin:0 0 .3rem}
.legal h2{font-size:1.2rem;margin:2rem 0 .5rem;border-top:1px solid var(--line);padding-top:1.4rem}
.legal p,.legal li{font-size:1rem;line-height:1.65}
.legal ul{padding-left:1.3rem}
.legal li{margin:.4rem 0}
.legal code{font-family:var(--mono);font-size:.88em;background:var(--panel);padding:.05rem .3rem}
.foot-links a{color:var(--muted);text-decoration:none}
.foot-links a:hover{color:var(--blue)}
.wrap.wide{max-width:62rem}
.verify-banner{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  background:var(--blue-soft);border:1px solid var(--blue);color:var(--ink);
  padding:.65rem 1rem;border-radius:8px;margin:0 0 1.3rem;font-size:.92rem}
.verify-banner.ok{background:#E6F4EA;border-color:#3B9A57;color:#1E5631}
.verify-banner em{color:var(--muted);font-style:normal;margin-left:.3rem}

/* buttons + forms */
.btn{display:inline-block;font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.65rem 1.2rem;border:1.5px solid var(--ink);
  background:var(--white);color:var(--ink);cursor:pointer;text-decoration:none}
.btn:hover{background:var(--blue-soft)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:#2450A8}
.btn.small{padding:.35rem .7rem;font-size:.7rem}
.btn[disabled]{opacity:.5;cursor:default}
input[type=email],input[type=password],input[type=text],input[type=search],
input[type=url],input[type=number],input[type=date],select,textarea{
  font-family:var(--serif);font-size:1rem;padding:.6rem .7rem;border:1.5px solid var(--ink);
  background:var(--white);color:var(--ink);width:100%}
/* A placeholder is decoration and the browser dims it further, so it needs the
   readable grey rather than a dimmed version of a dim colour. */
::placeholder{color:var(--muted);opacity:1}
label{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);display:block;margin:.9rem 0 .3rem}
.error{background:#FBE9E9;border:1px solid #B4453F;color:#7C2D28;padding:.7rem 1rem;
  font-size:.95rem;margin:1rem 0}
.notice{background:var(--blue-soft);border:1px solid var(--blue);padding:.7rem 1rem;
  font-size:.95rem;margin:1rem 0}

/* landing */
.hero{padding:4.5rem 1.5rem 3rem;max-width:52rem;margin:0 auto}
.hero-row{display:flex;gap:2.4rem;align-items:center}
.mascot-fig{flex-shrink:0;margin:0;background:var(--white);border:1.5px solid var(--ink);
  padding:.8rem .8rem .5rem;text-align:center}
.mascot-fig img{width:210px;height:210px;object-fit:contain;display:block}
.mascot-fig figcaption{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);
  margin-top:.6rem;padding-top:.45rem}
@media(max-width:720px){.hero-row{flex-direction:column-reverse;align-items:flex-start}
  .mascot-fig img{width:140px;height:140px}}
.brightline{font-size:1.5rem;font-weight:700;text-align:center;margin:1rem auto 2.2rem;
  letter-spacing:-.01em;text-wrap:balance}
.brightline span{display:block;font-size:1rem;font-weight:400;color:var(--muted);margin-top:.4rem}
.status{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.15rem .5rem;display:inline-block;margin-bottom:.5rem}
.status.live{background:var(--blue);color:#fff}
html[data-theme="dark"] .status.live{color:#0E1218}
.status.soon{background:none;border:1px solid var(--muted);color:var(--muted)}
.hero .rule{border-top:2px solid var(--ink);margin-bottom:2rem}
.hero h1{font-size:clamp(2.6rem,7.5vw,4.2rem);line-height:1.02;margin:0 0 1.1rem;letter-spacing:-.018em}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero p.lede{font-size:1.25rem;line-height:1.5;margin:0 0 1.8rem;text-wrap:balance}
.tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin:2rem 0}
.feature{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--blue);padding:1rem 1.1rem}
.feature h2,.feature h3{margin:.2rem 0 .4rem;font-size:1.05rem}
.feature p{font-size:.92rem;color:var(--muted);margin:0;line-height:1.5}
.feature .skarv{display:block;width:72%;max-width:230px;aspect-ratio:1;margin:.2rem auto .7rem;
  border-radius:50%;object-fit:cover;border:1px solid var(--line)}

/* sharing */
.role-chip{font-family:var(--mono);font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;
  background:var(--blue);color:#fff;padding:.25rem .55rem;border-radius:999px;white-space:nowrap}
.sh-url{width:100%;font-family:var(--mono);font-size:.62rem;border:1px solid var(--line);
  background:var(--panel);padding:.15rem .3rem;margin-top:.2rem}

/* email capture (local until SentientMail) */
.capture{display:flex;gap:2rem;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--white);border:1px solid var(--line);border-top:3px solid var(--blue);
  padding:1.4rem 1.6rem;margin:0 0 3rem}
.capture h3{margin:0 0 .3rem}
.capture p{margin:0;color:var(--muted);font-size:.92rem;max-width:46ch;line-height:1.5}
.capture-form{display:flex;gap:.5rem;flex-wrap:wrap;position:relative}
.capture-form input[type=email]{font:inherit;font-size:.92rem;padding:.5rem .7rem;min-width:230px;
  border:1px solid var(--line);background:var(--panel)}
.capture-form input[type=email]:focus{outline:none;border-color:var(--blue)}
.capture-done{font-size:.92rem;color:var(--ink);margin:0}
.foot-capture{display:flex;gap:1rem;align-items:center;justify-content:center;flex-wrap:wrap;
  border-top:1px solid var(--line);padding:1rem 1.5rem;font-size:.85rem;color:var(--muted)}
.foot-capture .capture-form.compact input[type=email]{padding:.32rem .55rem;font-size:.82rem;min-width:200px}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem;margin:2rem 0}
.tier{background:var(--white);border:1.5px solid var(--line);padding:1.3rem 1.3rem 1.5rem;display:flex;flex-direction:column}
.tier.hot{border-color:var(--blue);border-width:2px}
.tier .name{font-family:var(--mono);font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--blue)}
.tier .price{font-size:2.1rem;font-weight:700;margin:.3rem 0 .1rem}
.tier .per{font-size:.85rem;color:var(--muted)}
.tier ul{padding-left:1.1rem;margin:.9rem 0 1.2rem;font-size:.93rem;line-height:1.55;flex:1}
.tier form{margin:0}

/* dashboard */
.projrow{display:flex;align-items:center;gap:.8rem;background:var(--white);
  border:1px solid var(--line);padding:.8rem 1rem;margin:.5rem 0;flex-wrap:wrap}
.projrow .kind{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--white);background:var(--ink);padding:.15rem .5rem}
.projrow a.doc{margin-left:auto}
.quota{font-family:var(--mono);font-size:.75rem;color:var(--muted);letter-spacing:.08em}

/* editor chrome */
.savestate{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .15s,background .15s}
.savestate.flash-saved{color:#1F7A43;font-weight:700}
.ed-toolbar{display:flex;align-items:center;gap:.7rem;padding:.55rem 1rem;flex-wrap:wrap;
  border-bottom:1px solid var(--line);background:var(--white);position:sticky;top:0;z-index:20}
.ed-title{border:none;background:transparent;font-family:var(--serif);font-size:1.15rem;
  font-weight:700;padding:.2rem 0;min-width:120px;flex:0 1 260px}
.ed-title:focus{outline:none;border-bottom:2px solid var(--blue)}
.ed-select{width:auto;font-family:var(--mono);font-size:.75rem;padding:.35rem .5rem;border:1.5px solid var(--ink)}
.ed-hint{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ed-actions{margin-left:auto;display:flex;gap:.5rem;align-items:center}
.ed-menu{position:relative}
.ed-menu-body{display:none;position:absolute;right:0;top:110%;background:var(--white);
  border:1.5px solid var(--ink);min-width:190px;z-index:30}
.ed-menu:hover .ed-menu-body,.ed-menu:focus-within .ed-menu-body{display:block}
.ed-menu-body button{display:block;width:100%;text-align:left;background:none;border:none;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;padding:.55rem .8rem;cursor:pointer}
.ed-menu-body button:hover{background:var(--blue-soft)}

/* editor layout: navigator | canvas | punch list */
.ed-layout{display:grid;grid-template-columns:210px minmax(0,1fr) 330px;
  grid-template-rows:minmax(0,1fr);flex:1;min-height:0}
/* Editor is a fixed-height app shell: the page itself never scrolls. The nav,
   toolbar, tabs, ribbon and status bar stay put; only the three columns scroll
   internally, so the toolbar and rails are usable wherever you are in the doc. */
body.editor-shell{height:100vh;overflow:hidden}
body.editor-shell main{flex:1;min-height:0;display:flex;flex-direction:column}
body.editor-shell footer,body.editor-shell .foot-capture,
body.editor-shell .aristocratix-mark-wrap{display:none}
.ed-toolbar,.ed-tabs,.ed-ribbon,.ed-findbar,.ed-status{flex:0 0 auto}
.ed-nav,.ed-canvas,.punch{min-height:0}
.rail-tabs{position:sticky;top:0;background:var(--panel);z-index:3;padding-top:.1rem}
@media(max-width:1100px){.ed-layout{grid-template-columns:minmax(0,1fr) 330px}.ed-nav{display:none}}
@media(max-width:820px){.ed-layout{grid-template-columns:1fr}.punch{border-left:none;border-top:2px solid var(--ink)}}
.ed-nav{border-right:1px solid var(--line);padding:1rem .9rem;overflow-y:auto;background:var(--panel)}
.ed-nav h2{font-size:.8rem;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;
  font-weight:400;margin:0 0 .7rem;color:var(--muted)}
.ed-o-row{display:flex;align-items:center;gap:.15rem}
.ed-o-row .ed-outline-item{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-o-subsection{padding-left:1rem}
.ed-o-subsection .ed-outline-item{font-size:.72rem;color:var(--muted)}
/* 4.36:1 against the navigator panel, which is under the line by a hair and
   at 10px. --ink is the same grey family, two steps darker. */
.ed-o-words{font-family:var(--mono);font-size:.62rem;color:var(--ink);opacity:.72;
  padding-right:.15rem}
.binder-sections{flex-basis:100%;display:grid;grid-template-columns:repeat(3,1fr);
  gap:.6rem;padding:.6rem 0 .2rem 2.2rem}
@media(max-width:760px){.binder-sections{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.binder-sections{grid-template-columns:1fr}}
.binder-section{display:flex;flex-direction:column;gap:.2rem;min-width:0;
  text-decoration:none;border:1px solid var(--line);border-top:3px solid var(--blue);
  background:var(--white);padding:.55rem .7rem}
.binder-section:hover{border-color:var(--blue)}
.binder-section .bs-kind{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.binder-section .bs-title{font-family:var(--serif);font-size:.95rem;font-weight:700;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.binder-section .bs-words{font-family:var(--mono);font-size:.62rem;color:var(--muted)}
.binder-section-front,.binder-section-back,.binder-section-opening{border-top-color:var(--muted)}
.binder-section-front .bs-title,.binder-section-back .bs-title,
.binder-section-opening .bs-title{font-style:italic;font-weight:400}
.ed-o-chapter,.ed-o-heading{border-left:2px solid transparent;padding-left:.3rem}
.ed-o-active{border-left-color:var(--blue);background:var(--blue-soft, rgba(43,92,196,.07))}
.ed-o-active .ed-outline-item{font-weight:700}
.ed-o-subsection .ed-outline-item::before{content:"◇ ";opacity:.6}
.ed-o-chapter .ed-outline-item{font-style:italic;color:var(--muted)}
.ed-o-promote{cursor:pointer;font-family:var(--mono);font-size:.58rem;color:var(--blue);
  opacity:0;padding:0 .3rem;flex:0 0 auto;border:1px solid var(--blue);border-radius:3px}
.ed-o-row:hover .ed-o-promote{opacity:1}
.ed-outline-item{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  font-family:var(--sans);font-size:.78rem;line-height:1.35;padding:.35rem .4rem;color:var(--ink);
  border-left:2px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-outline-item:hover{border-left-color:var(--blue);background:var(--white)}

.ed-canvas{overflow-y:auto;padding:2rem 1.2rem;background:var(--canvas);position:relative}
/* The overlay is laid out in the paper's UNSCALED geometry, so it must take
   the same transform as .ed-page or the guides drift away from the page at
   any zoom other than 100%. Same origin => the two boxes map identically. */
.pg-overlay{position:absolute;pointer-events:none;z-index:2;
  transform:scale(var(--zoom,1));transform-origin:top center}
.pg-line{position:absolute;left:0;right:0;border-top:1px dashed var(--line)}
/* The page-number tick lives entirely inside the paper's right margin (3.2rem)
   and is centred ON the rule — never over the text measure. Keep it short: a
   "Page N" label is wider than the gutter and clipped the end of the line. */
.pg-line span{position:absolute;right:.55rem;top:-.6em;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.06em;color:var(--muted);background:var(--white);padding:0 .3rem;
  max-width:2.4rem;overflow:hidden;text-align:right;pointer-events:auto;cursor:default}
.st-pages{font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.06em}
/* Once the scaled paper is wider than the canvas, `top center` throws half the
   overflow to the left of the scroll origin, where scrollLeft can never reach
   it. Anchor left instead so all overflow is scrollable. */
.ed-canvas.zoom-wide .ed-page,.ed-canvas.zoom-wide .pg-overlay{transform-origin:top left}
.ed-page{background:var(--white);max-width:52rem;margin:0 auto;min-height:70vh;
  box-shadow:0 1px 4px rgba(22,29,40,.12);border:1px solid var(--line);
  padding:3rem 3.2rem 4rem;
  transform:scale(var(--zoom,1));transform-origin:top center}
.ProseMirror{outline:none;min-height:60vh;position:relative}
/* empty-doc starter prompt: greyed, non-editable, overlays the first line and
   disappears the moment the writer types (rendered as a PM widget decoration) */
.ed-starter{position:absolute;top:0;left:0;right:0;color:var(--muted);opacity:.62;
  pointer-events:none;white-space:pre-wrap;line-height:1.7;font-style:italic;user-select:none}
.ProseMirror p{margin:0}

/* toolbar v3 */
.ed-group{display:inline-flex;gap:2px}
.btn.tg.on{background:var(--ink);color:var(--paper)}

/* ribbon tab strip */
.ed-tabs{display:flex;gap:.2rem;padding:0 1rem;background:var(--chrome);border-bottom:1px solid var(--line)}
.ed-tab{font-family:var(--sans);font-size:.82rem;background:none;border:none;cursor:pointer;
  padding:.5rem .9rem .45rem;color:var(--muted);border-bottom:2.5px solid transparent}
.ed-tab:hover{color:var(--ink)}
.ed-tab.on{color:var(--ink);font-weight:600;border-bottom-color:var(--blue)}

/* ribbon panes */
.ed-ribbon{background:var(--chrome);border-bottom:1px solid var(--line)}
.rb-pane{display:flex;align-items:stretch;gap:.2rem;padding:.45rem 1rem;min-height:64px;
  flex-wrap:wrap}
.rb-pane[hidden]{display:none}
.ed-ribbon .ed-menu{display:inline-block}
.rb-col{flex-direction:column;justify-content:center;gap:3px;align-items:flex-start}
.rb-row{display:flex;gap:2px;align-items:center}
.rb-end{margin-left:auto;align-items:center}
.rb-hintline{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);padding-left:2px}
.rb-lblabel{font-family:var(--sans);font-size:.68rem;color:var(--muted)}
.rb-lbl{font-size:.78rem;margin-left:.3rem}

/* big labeled buttons (Word-style primary actions) */
.rbx{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;min-width:62px;padding:.45rem .6rem;background:none;border:1px solid transparent;
  border-radius:3px;cursor:pointer;color:var(--ink);font-family:var(--sans)}
.rbx:hover{border-color:var(--line);background:var(--white)}
.rbx .rbx-ic{display:block;height:20px}
.rbx .rbx-lb{font-size:.66rem;line-height:1.15;text-align:center;color:var(--ink)}
.rbx.primary{background:var(--blue);border-color:var(--blue)}
.rbx.primary,.rbx.primary .rbx-lb{color:#fff}
.rbx.primary:hover{background:#2450A8}
.rbx[disabled]{opacity:.55;cursor:default}
.rbx-check{cursor:pointer}
.rbx-check .rbx-lb{display:flex;gap:.3rem;align-items:center}
.rbx-menu{position:relative}
.rbx-menu .ed-menu-body{top:100%;left:0;right:auto}
.rb-group{display:inline-flex;gap:2px;align-items:center;padding:0 .65rem;
  border-right:1px solid var(--line)}
.rb-group:first-child{padding-left:0}
.rb-group:last-child,.rb-group.rb-end{border-right:none}
.rb{font-family:var(--sans);font-size:.85rem;min-width:1.9rem;height:1.9rem;
  padding:0 .4rem;border:1px solid transparent;background:none;cursor:pointer;
  color:var(--ink);line-height:1;display:inline-flex;align-items:center;
  justify-content:center;flex-direction:column;gap:1px;border-radius:2px}
.rb:hover{border-color:var(--line);background:var(--white)}
.rb.tg.on{background:var(--blue-soft);border-color:var(--blue)}
.rb svg{display:block}
.rb-arrow{font-size:.55rem;margin-left:.15rem}
mark{background:var(--mark)}

/* split buttons (Word pattern: main applies, caret opens swatch grid) */
.rb-split{display:inline-flex;position:relative}
.rb-split .rb-main{border-radius:2px 0 0 2px}
.rb-split .rb-caret{min-width:.95rem;padding:0 .1rem;font-size:.55rem;
  border-radius:0 2px 2px 0;border-left:none}
.rb-split .cbar{display:block;width:14px;height:3px;border-radius:1px}
.rb-split .ic-a{font-family:var(--serif);font-weight:700;font-size:.85rem;line-height:.9}
.swatch-grid{position:absolute;top:110%;left:0;z-index:50;background:var(--white);
  border:1px solid var(--ink);box-shadow:0 2px 8px rgba(22,29,40,.18);padding:.35rem;
  display:grid;grid-template-columns:repeat(5,20px);gap:4px;border-radius:2px}
.swatch-grid[hidden]{display:none}
.sw{width:20px;height:20px;border:1px solid rgba(22,29,40,.25);cursor:pointer;
  border-radius:2px;padding:0}
.sw:hover{outline:2px solid var(--blue);outline-offset:1px}
.sw-none{background:var(--white);font-family:var(--serif);font-weight:700;
  font-size:.7rem;color:var(--ink);display:flex;align-items:center;justify-content:center}

/* quick styles gallery (novel) */
.rb-styles{gap:3px}
.style-card{flex-direction:column;height:auto;padding:.25rem .55rem;gap:0}
.style-card .sc-prev{font-family:var(--serif);font-size:.95rem;line-height:1.1}
.style-card .sc-h1{font-weight:700;font-size:1.05rem}
.style-card .sc-h2{font-weight:700;font-size:.95rem}
.style-card .sc-h3{font-weight:700;font-style:italic;font-size:.9rem}
.style-card .sc-name{font-family:var(--sans);font-size:.55rem;color:var(--muted);
  letter-spacing:.04em;text-transform:uppercase}
.style-card.on{background:var(--blue-soft);border-color:var(--blue)}
.ed-check{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
/* The find bar has a blue panel behind it, and muted grey on that panel is
   3.6:1 in the dark theme for an 11px label. */
.ed-findbar .ed-check{color:var(--ink)}
.ed-menu-note{font-family:var(--sans);font-size:.75rem;color:var(--muted);padding:.5rem .8rem;margin:0}
.v-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  padding:.45rem .8rem;border-top:1px solid var(--line);font-family:var(--sans);font-size:.78rem}
.v-row small{color:var(--muted)}
#versions-menu{min-width:260px;max-height:320px;overflow-y:auto}

.ed-findbar{display:flex;align-items:center;gap:.45rem;padding:.45rem 1rem;flex-wrap:wrap;
  background:var(--blue-soft);border-bottom:1px solid var(--blue)}
.ed-findbar[hidden]{display:none}
.ed-findbar input[type=text]{width:180px;font-size:.9rem;padding:.35rem .5rem}

/* color, not just background. A dialog does NOT inherit colour from the page:
   the UA stylesheet gives it CanvasText, which stays black whatever the theme
   is, so in dark mode every dialog in this app was black text on a #12161C
   panel. 1.16:1, which is not low contrast, it is invisible. axe could not see
   it either: it reported the contrast as undetermined rather than failing. */
dialog{color:var(--ink)}
.ed-dialog{border:2px solid var(--ink);background:var(--paper);color:var(--ink);
  padding:1.4rem;max-width:26rem;width:90vw}
.ed-dialog::backdrop{background:rgba(22,29,40,.45)}
.ed-dialog h3{margin:0 0 .4rem}
.ed-dialog textarea{width:100%;font-family:var(--serif);font-size:1rem;padding:.5rem .6rem;
  border:1.5px solid var(--ink);background:var(--white)}

.ac-menu{position:fixed;z-index:60;background:var(--white);border:1.5px solid var(--ink);min-width:160px}
.ac-menu button{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  font-family:var(--mono);font-size:.78rem;padding:.4rem .7rem}
.ac-menu button.sel,.ac-menu button:hover{background:var(--blue-soft)}

.search-hit{background:var(--mark)}
.search-hit-cur{background:var(--blue);color:#fff}

.contd{color:var(--muted);user-select:none;pointer-events:none}
.cast-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.3rem 0;font-family:var(--mono);font-size:.75rem}
.cast-row select{width:55%;font-size:.8rem;padding:.25rem}
#cast{max-height:260px;overflow-y:auto;margin:.6rem 0}
.ins-table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.85rem;margin:.4rem 0}
.ins-table td{padding:.3rem .5rem;border-bottom:1px solid var(--line)}
.ins-table td:last-child{text-align:right;color:var(--muted)}
#insights-body h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:1.1rem 0 .2rem}

.scene-num{position:absolute;left:-3ch;color:var(--muted);font-family:var(--mono)}
.fmt-screenplay .sp-scene{position:relative}

/* outline board */
.ob-board{display:flex;flex-direction:column;gap:.7rem;margin:1.4rem 0}
.ob-card{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--blue);
  padding:.7rem .9rem;cursor:grab}
.ob-card.dragging{opacity:.4}
.ob-head{display:flex;align-items:center;gap:.5rem}
.ob-grip{color:var(--muted);cursor:grab}
.ob-status{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--ink);background:none;padding:.15rem .5rem;cursor:pointer}
.ob-status.st-draft{background:var(--mark)}
.ob-status.st-done{background:var(--blue);border-color:var(--blue);color:#fff}
.ob-del{margin-left:auto;border:none;background:none;font-size:1rem;color:var(--muted);cursor:pointer}
.ob-title{border:none;background:transparent;font-family:var(--serif);font-weight:700;
  font-size:1.05rem;width:100%;padding:.25rem 0}
.ob-title:focus{outline:none;border-bottom:2px solid var(--blue)}
.ob-syn{border:none;background:transparent;width:100%;font-family:var(--serif);font-size:.92rem;
  line-height:1.5;resize:vertical;min-height:2.4rem;color:var(--muted)}
.ob-syn:focus{outline:none;color:var(--ink)}

/* outline: cards | treatment tabs */
.ol-tabs{display:flex;align-items:center;gap:.3rem;border-bottom:2px solid var(--ink);margin:1.2rem 0 0}
.ol-tab{border:none;background:none;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);cursor:pointer;padding:.55rem .9rem;
  border-bottom:2px solid transparent;margin-bottom:-2px}
.ol-tab:hover{color:var(--ink)}
.ol-tab.on{color:var(--ink);border-bottom-color:var(--blue)}
.ol-synced{margin-left:auto;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;
  color:var(--blue);opacity:0;transition:opacity .2s}
.ol-synced.show{opacity:1}
.ol-view{margin-top:1rem}

/* treatment: long-form outline surface */
.tr-bar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;
  margin:.4rem 0 .8rem}
.tr-tools,.tr-sync{display:flex;gap:.4rem}
.tr-doc{background:var(--white);border:1px solid var(--line);border-radius:2px;
  padding:2.2rem 2.6rem;min-height:24rem;max-width:44rem;margin:0 auto;
  box-shadow:0 1px 4px rgba(22,29,40,.07);font-family:var(--serif);color:var(--ink);
  line-height:1.6;outline:none}
.tr-doc:focus-within{border-color:var(--blue)}
.tr-doc h2,.tr-doc .tr-h{font-size:1.15rem;font-weight:700;margin:1.6rem 0 .5rem;letter-spacing:-.01em}
.tr-doc>h2:first-child,.tr-doc>.tr-h:first-child{margin-top:0}
.tr-doc p,.tr-doc div,.tr-doc .tr-p{margin:0 0 .8rem;font-size:1rem}
.tr-hint{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--muted);
  text-align:center;margin:.7rem 0 0}
@media(max-width:520px){.tr-doc{padding:1.4rem 1.2rem}}

/* right-rail tabs */
.rail-tabs{display:flex;gap:0;margin:0 0 .9rem;border-bottom:2px solid var(--ink)}
/* The strip has to hold four labels and two counts across a 300px rail. Left to
   wrap, the count dropped onto a second line and read as a subtitle under the
   tab rather than a count on it. Tracking and padding come in far enough for one
   line, and the number sits raised beside the label the way every mail client
   and Docs itself puts an unread count. */
.rail-tab{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  background:none;border:none;padding:.4rem .55rem;cursor:pointer;color:var(--muted);
  white-space:nowrap}
.rail-tab .rt-n{font-size:.58rem;vertical-align:super;margin-left:.15em;
  color:var(--blue);font-weight:700;letter-spacing:0}
.rail-tab.on .rt-n{color:var(--blue)}
.rail-tab.on{color:var(--ink);background:var(--white);border:1px solid var(--ink);border-bottom:none}
#cmt-count{color:var(--blue);font-weight:700}
#chg-count{color:var(--blue);font-weight:700}

/* track changes — insertion/deletion marks in the canvas */
.tc-ins{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px}
.tc-del{text-decoration:line-through;text-decoration-thickness:1.5px;opacity:.72}
/* Print and Print/PDF go through window.print() on the editor's own DOM, so a
   struck-through line was on the page with a line through it — in a script
   handed to an actor. It is not in the document; it is not on the paper. */
@media print{.tc-del{display:none !important}}

/* changes rail */
.chg{border:1px solid var(--line);border-radius:6px;padding:.55rem .6rem;margin:0 0 .55rem;background:var(--white)}
.chg-pill{display:inline-block;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;
  text-transform:uppercase;padding:.08rem .4rem;border-radius:3px;color:#fff;vertical-align:middle}
.chg-pill.insertion{background:#1F7A43}
.chg-pill.deletion{background:#B4453F}
.chg-author{font-family:var(--mono);font-size:.62rem;margin-left:.4rem;letter-spacing:.03em}
.chg-text{margin:.4rem 0 .5rem;font-size:.86rem;line-height:1.4;color:var(--ink);
  max-height:5.6em;overflow:auto;white-space:pre-wrap;word-break:break-word}
.chg-text.insertion{border-left:2px solid #1F7A43;padding-left:.5rem}
.chg-text.deletion{border-left:2px solid #B4453F;padding-left:.5rem;text-decoration:line-through;opacity:.75}
.chg .acts{display:flex;gap:.4rem}
.btn.small{font-size:.66rem;padding:.22rem .55rem}

/* comments */
.cm-comment{background:rgba(43,92,196,.14);border-bottom:2px solid var(--blue);cursor:pointer}
.finding.cmt .fq{background:none;border-bottom:2px solid var(--blue)}
.finding.flash{outline:2px solid var(--blue)}
.cmt-meta{font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;color:var(--muted);margin:.35rem 0 .1rem}
.cmt-meta .cmt-when{margin-left:.5rem;opacity:.7}
.cmt-reply{margin:.45rem 0 0 .7rem;padding:.1rem 0 .1rem .6rem;border-left:2px solid var(--line)}
.cmt-replybox{display:flex;gap:.4rem;margin:.55rem 0 .2rem}
.cmt-replyinput{flex:1;min-width:0;font:inherit;font-size:.82rem;padding:.28rem .5rem;
  border:1px solid var(--line);border-radius:4px;background:var(--white)}
.cmt-replyinput:focus{outline:none;border-color:var(--blue)}
.cmt-resolved{margin-top:1rem}
.cmt-resolved>summary{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);cursor:pointer;margin-bottom:.6rem}
.finding.cmt.resolved{opacity:.65}

/* novel WP nodes */
.nv-img{max-width:100%;height:auto;display:block;margin:1rem auto}
.ProseMirror img.ProseMirror-selectednode{outline:2px solid var(--blue)}
.pg-break{border-top:2px dashed var(--muted);margin:1.6rem -1rem;text-align:right;
  user-select:none}
.pg-break span{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;color:var(--muted)}
.ProseMirror .fn{counter-increment:fnc}
.fmt-novel .ProseMirror{counter-reset:fnc}
.ProseMirror .fn::after{content:counter(fnc);vertical-align:super;font-size:.7em;
  color:var(--blue);font-weight:700;cursor:pointer;padding:0 1px}
.fmt-novel .ProseMirror table{border-collapse:collapse;width:100%;margin:1rem 0;table-layout:fixed}
.fmt-novel .ProseMirror td,.fmt-novel .ProseMirror th{border:1px solid var(--ink);
  padding:.4rem .6rem;vertical-align:top}
.fmt-novel .ProseMirror td p{text-indent:0;margin:0}
.fmt-novel .ProseMirror .selectedCell{background:var(--blue-soft)}

/* dual dialogue (screenplay) */
.fmt-screenplay .dd{display:flex;gap:2ch;margin:0 -6ch 1em 0}
.fmt-screenplay .dd-col{flex:1 1 0;min-width:0}
.fmt-screenplay .dd-col .sp-character{margin-left:6ch;max-width:none}
.fmt-screenplay .dd-col .sp-dialogue{margin-left:0;max-width:none}
.fmt-screenplay .dd-col .sp-paren{margin-left:3ch;max-width:none}

/* status bar */
.ed-status{display:flex;gap:1.2rem;align-items:center;padding:.35rem 1rem;
  border-top:1px solid var(--line);background:var(--chrome);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.ed-status button{background:none;border:none;color:var(--blue);cursor:pointer;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:0}
.st-bar{display:inline-block;width:90px;height:6px;background:var(--line);
  vertical-align:1px;border-radius:3px;overflow:hidden}
.st-bar span{display:block;height:100%;background:var(--blue)}
.ed-status .st-right{margin-left:auto;color:var(--muted);text-transform:none;
  letter-spacing:.03em;max-width:38ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-status .st-right:hover{color:var(--blue)}

/* focus mode */
body.focus-mode nav,body.focus-mode footer,body.focus-mode .ed-toolbar,
body.focus-mode .ed-tabs,body.focus-mode .ed-ribbon,
body.focus-mode .ed-nav,body.focus-mode .punch,body.focus-mode .ed-status{display:none!important}
/* The find bar is NOT hidden in focus mode. It was, and it is opened by a
   keyboard shortcut, so Cmd+F in focus mode focused an element with
   display:none, which does nothing: the bar was left half open and invisible,
   and Escape went past it to close focus mode instead. It only appears when
   asked for, which is exactly what focus mode is protecting. */
body.focus-mode .ed-findbar[hidden]{display:none!important}
body.focus-mode .ed-layout{display:block}
/* Fill what is left, not the whole screen. 100vh was true while focus mode
   hid everything above the canvas; now that the find bar can appear there, a
   full-viewport canvas starts 54px down and ends 54px past the bottom, and the
   shell clips rather than scrolls, so the last of the manuscript could not be
   brought on screen at all. */
body.focus-mode .ed-layout{height:100%}
body.focus-mode .ed-canvas{height:100%;padding-top:6vh}
@media (max-width: 820px) {
  /* Stacked, the way the layout stacks everywhere else at this width: the
     draft takes what is left and the reference keeps its 45vh ceiling. */
  body.focus-mode .ed-layout.split{display:grid;height:100%;
    grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  body.focus-mode .ed-layout.split .ed-canvas{height:auto;min-height:0}
  body.focus-mode .ed-layout.split .ed-split{height:auto;min-height:0;max-height:45vh}
}
/* Focus mode turns the layout into a block, which strands an open reference
   pane below a shell that clips: measured at top 900 on a 900px screen, so it
   was on the page and impossible to see or reach. Focus mode hides the chrome,
   and a reference beside the draft is not chrome, it is the other half of what
   the writer is reading. The rail is hidden here, so two columns is the whole
   layout. */
/* Stacked is the DEFAULT, and the two-column form is the exception above the
   breakpoint. Written the other way round, as max-width:820 and min-width:821,
   the pair leaves the interval between them uncovered, and a viewport can land
   there: a fractional width is what browser zoom produces. In that gap neither
   rule applied and the higher-specificity focus-mode display:block stranded the
   reference pane again, which is the bug this was written to fix. A default
   with one override cannot have a gap. */
body.focus-mode .ed-layout.split{display:grid;height:100%;
  grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
body.focus-mode .ed-layout.split .ed-canvas{height:auto;min-height:0}
body.focus-mode .ed-layout.split .ed-split{height:auto;min-height:0;max-height:45vh}
@media (min-width: 821px) {
  /* Room for two: draft and reference side by side, the rail still hidden. */
  body.focus-mode .ed-layout.split{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:100%}
  body.focus-mode .ed-layout.split .ed-canvas,
  body.focus-mode .ed-layout.split .ed-split{height:100%;max-height:none}
}
/* Focus mode turns the layout into a block, which strands an open reference
   pane below a shell that clips: measured at top 900 on a 900px screen, so it
   was on the page and impossible to see or reach. Focus mode hides the chrome,
   and a reference beside the draft is not chrome, it is the other half of what
   the writer is reading. The rail is hidden here, so two columns is the whole
   layout. */
/* Above the phone breakpoint only. body.focus-mode .ed-layout.split outranks
   the mobile .ed-layout.split rule on specificity, so without this the two
   panes stayed side by side on a phone at 195px each on a 390px screen, which
   is narrower than either of them needs to hold a line of prose. */
@media (min-width: 821px) {
  body.focus-mode .ed-layout.split{display:grid;height:100%;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  body.focus-mode .ed-layout.split .ed-canvas,
  body.focus-mode .ed-layout.split .ed-split{height:100%;min-height:0}
}
/* The outline board, distraction-free. The editor's rule above hides the
   editor's chrome; this hides the page's, and both are the same class so the
   pill and the Esc handler serve either one. The view tabs survive on purpose:
   cards and treatment are two halves of one outline. */
body.focus-mode .wrap > .tag,body.focus-mode .wrap > h1,
body.focus-mode .ol-view > .kicker,body.focus-mode .ol-focus-btn{display:none!important}
body.focus-mode .wrap.wide{max-width:52rem;padding-top:3vh}
body.focus-mode .ol-tabs{border:none;justify-content:center;opacity:.45}
body.focus-mode .ol-tabs:hover{opacity:1}
/* .ol-synced pushes itself right with margin-left:auto, which eats the free
   space a centred flex row needs and left the tabs where they started. */
body.focus-mode .ol-synced{margin-left:0}
/* The house marks. <footer> is covered by the editor's rule above; the
   Aristocratix sigil and the feedback pill sit outside it and stayed on a
   screen whose whole purpose is that nothing else is on it. */
body.focus-mode .aristocratix-mark-wrap,body.focus-mode #fb-fab{display:none!important}
body.focus-mode .tr-doc{min-height:78vh}
#focus-pill{position:fixed;top:.8rem;right:1rem;z-index:80;font-family:var(--mono);
  font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  background:var(--chrome);border:1px solid var(--line);padding:.35rem .7rem;
  cursor:pointer;border-radius:3px;opacity:.75}
#focus-pill:hover{opacity:1}

.print-footnotes{display:none}
@media print{
  .print-footnotes{display:block;margin-top:2rem;border-top:1px solid #000;padding-top:.6rem}
  .print-footnotes h3{font-size:11pt}
  .print-footnotes ol{font-size:10pt}
  .pg-break{border:none;page-break-after:always;margin:0}
  .pg-break span{display:none}
}

/* codex (story bible) */
.cx-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:1.4rem 0}
.cx-detect-wrap{display:inline-flex;gap:.4rem;align-items:center;margin-left:auto}
.cx-kind{font-family:var(--mono);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:400;border-bottom:1px solid var(--line);padding-bottom:.4rem;
  margin:1.8rem 0 .9rem;display:flex;align-items:baseline;gap:.5rem}
.cx-kind span{font-size:.7rem;color:var(--blue)}
.cx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.9rem}
.cx-card{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--muted);
  padding:.8rem 1rem;cursor:pointer}
.cx-card:hover{border-left-color:var(--blue)}
.cx-card.kind-character{border-left-color:var(--blue)}
.cx-card.kind-location{border-left-color:#1F7A43}
.cx-card.kind-item{border-left-color:#8A6D1C}
.cx-card.kind-faction{border-left-color:#6B3FA0}
.cx-name{font-family:var(--serif);font-weight:700;font-size:1.08rem}
.cx-aliases{font-family:var(--mono);font-size:.66rem;color:var(--muted);letter-spacing:.04em;margin:.15rem 0}
.cx-summary{font-size:.9rem;line-height:1.45;margin:.4rem 0 0;color:var(--ink)}
.cx-fields{margin:.5rem 0 0;display:grid;grid-template-columns:auto 1fr;gap:.15rem .6rem;font-size:.82rem}
.cx-fields dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);align-self:center}
.cx-fields dd{margin:0}
.cx-row{display:flex;gap:.8rem}
.cx-fieldrow{display:flex;gap:.4rem;margin-bottom:.35rem}
.cx-fieldrow .cx-flabel{flex:0 0 40%}
.cx-kindtag{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.1rem .4rem;border:1px solid var(--line);color:var(--muted)}
.cx-suggest{background:var(--blue-soft);border:1px solid var(--blue);padding:1rem 1.1rem;margin:1rem 0}
.cx-suggest-head{font-weight:700;margin-bottom:.7rem}
.cx-suggest-grid{display:grid;gap:.4rem;margin-bottom:.9rem;max-height:340px;overflow-y:auto}
.cx-sugg{display:grid;grid-template-columns:auto auto 1fr;gap:.5rem;align-items:center;
  background:var(--white);border:1px solid var(--line);padding:.4rem .6rem;font-size:.85rem}
.cx-sugg-name{font-weight:700}
.cx-sugg-sum{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-flash{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%) translateY(2rem);
  background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:.75rem;
  letter-spacing:.06em;padding:.6rem 1.1rem;opacity:0;transition:.25s;pointer-events:none;z-index:90}
.cx-flash.on{opacity:1;transform:translateX(-50%) translateY(0)}

.rail-tools{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.8rem}
.rail-kind{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:.8rem 0 .3rem}
/* codex rail tab + inline entity hover in editor */
.cx-rail-item{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  border-left:2px solid transparent;padding:.4rem .5rem;font-family:var(--sans)}
.cx-rail-item:hover{background:var(--white);border-left-color:var(--blue)}
.cx-rail-item .rn{font-weight:700;font-size:.85rem}
.cx-rail-item .rs{font-size:.75rem;color:var(--muted);display:block;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.cx-entity{border-bottom:1px dotted var(--blue);cursor:help}
.cx-hovercard{position:fixed;z-index:70;max-width:260px;background:var(--white);
  border:1px solid var(--ink);box-shadow:0 3px 12px rgba(22,29,40,.2);padding:.7rem .85rem;
  font-family:var(--sans);font-size:.85rem;line-height:1.45}
.cx-hovercard .hn{font-weight:700;font-family:var(--serif)}
.cx-hovercard .hk{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cx-hovercard dl{display:grid;grid-template-columns:auto 1fr;gap:.1rem .5rem;margin:.4rem 0 0;font-size:.78rem}
.cx-hovercard dt{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;color:var(--muted)}
.cx-hovercard dd{margin:0}

/* researcher */
.rq-form{display:flex;gap:.5rem;margin:1.4rem 0}
.rq-form input{flex:1}
.rn-note{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--blue);
  padding:.9rem 1.1rem;margin:.7rem 0}
.rn-q{font-weight:700;font-size:1.02rem}
.rn-ctx{font-family:var(--serif);font-size:.85rem;color:var(--muted);margin:.2rem 0}
.rn-a{margin:.5rem 0;line-height:1.6}
.rn-src{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.4rem}
.rn-src a{font-size:.78rem}
.rn-del{margin-top:.6rem}
.rs-ctx{font-family:var(--serif);font-size:.88rem;color:var(--muted);
  background:var(--panel);padding:.5rem .7rem;margin-bottom:.6rem}
.rs-answer{margin-top:.8rem;background:var(--panel);padding:.8rem 1rem;font-size:.92rem}
.rs-ans-body{line-height:1.6;white-space:pre-wrap}

/* print title page */
.print-titlepage{display:none}
@media print{
  .print-titlepage{display:block;page-break-after:always;height:90vh;position:relative;
    font-family:'Courier Prime','Courier New',Courier,monospace}
  .print-titlepage .tp-center{text-align:center;padding-top:30vh}
  .print-titlepage h1{font-size:14pt;font-weight:700;letter-spacing:.05em}
  .print-titlepage p{margin:.6em 0}
  .print-titlepage .tp-draft{margin-top:3em}
  .print-titlepage .tp-contact{position:absolute;bottom:0;left:0;font-size:11pt}
  .ac-menu,.ed-findbar,.ed-dialog{display:none!important}
}

/* novel typography */
.fmt-novel .ProseMirror{font-family:var(--doc-font,var(--serif));
  font-size:var(--doc-size,1.06rem);line-height:var(--doc-spacing,1.75)}
.fmt-novel .ProseMirror p{text-indent:1.6em;margin:0 0 .1rem}
.fmt-novel .ProseMirror h1,.fmt-novel .ProseMirror h2{text-indent:0;text-align:center;
  margin:2.2rem 0 1.4rem;font-size:1.35rem;letter-spacing:.02em}
.fmt-novel .ProseMirror h1 + p,.fmt-novel .ProseMirror h2 + p{text-indent:0}
.fmt-novel .ProseMirror blockquote{margin:1rem 2rem;color:var(--muted)}
.fmt-novel .ProseMirror ul,.fmt-novel .ProseMirror ol{margin:.6rem 0;padding-left:2.2rem}
.fmt-novel .ProseMirror li{margin:.2rem 0}
.fmt-novel .ProseMirror li p{text-indent:0}
.fmt-novel .ProseMirror h3{text-indent:0;font-size:1.1rem;margin:1.6rem 0 .8rem}
.nv-break{text-align:center;margin:1.4rem 0}
.nv-break hr{border:none}
.nv-break hr::before{content:"* * *";font-family:var(--serif);color:var(--muted)}

/* screenplay: Courier metrics, industry indents (ch units on a 61ch line) */
.fmt-screenplay .ed-page{max-width:calc(61ch + 6.4rem)}
.fmt-screenplay .ProseMirror{font-family:var(--mono);font-size:12pt;line-height:1.12}
.fmt-screenplay .ProseMirror p{margin:0 0 1em;white-space:pre-wrap}
/* p.sp-* (element+class) so these WIN over the generic `p` rule above —
   `.ProseMirror p` out-specified the class-only versions and flattened
   every screenplay indent (Meg's "import lost its formatting" bug). */
.fmt-screenplay .ProseMirror p.sp-scene,.fmt-screenplay .sp-scene{text-transform:uppercase;font-weight:700;margin-top:1.6em}
.fmt-screenplay .ProseMirror p.sp-character,.fmt-screenplay .sp-character{margin-left:22ch;margin-bottom:0;max-width:33ch;text-transform:uppercase}
.fmt-screenplay .ProseMirror p.sp-dialogue,.fmt-screenplay .sp-dialogue{margin-left:10ch;max-width:35ch;margin-bottom:1em}
.fmt-screenplay .ProseMirror p.sp-paren,.fmt-screenplay .sp-paren{margin-left:16ch;max-width:25ch;margin-bottom:0;font-style:italic}
.fmt-screenplay .ProseMirror p.sp-transition,.fmt-screenplay .sp-transition{text-align:right;text-transform:uppercase}
.fmt-screenplay .dd-col .sp-character,.fmt-screenplay .dd-col p.sp-character{margin-left:6ch;max-width:none}
.fmt-screenplay .dd-col .sp-dialogue,.fmt-screenplay .dd-col p.sp-dialogue{margin-left:0;max-width:none}
.fmt-screenplay .dd-col .sp-paren,.fmt-screenplay .dd-col p.sp-paren{margin-left:3ch;max-width:none}
.page-break{border-top:1px dashed var(--blue);margin:1.6em -3.2rem 1.6em;position:relative;
  user-select:none;pointer-events:none}
.page-break span{position:absolute;right:.6rem;top:-1.5em;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.12em;color:var(--blue)}

/* Storage-failure alert — loud, sticky, until reconnected */
/* the banner is display:flex, which overrides the UA [hidden] rule — without
   this it stays visible (empty, no message) on every doc that ISN'T broken */
.stor-alert[hidden]{display:none}
.stor-alert{position:sticky;top:0;z-index:80;display:flex;align-items:center;gap:.7rem;
  background:#FBE4E2;border-bottom:2px solid #B4453F;color:#7C2D28;
  padding:.6rem 1rem;font-size:.92rem;font-weight:600}
.stor-alert .stor-alert-ic{font-size:1.15rem}
.stor-alert .stor-alert-msg{flex:1;min-width:0}
.stor-alert .stor-alert-fix{border-color:#B4453F;color:#fff;background:#B4453F;
  white-space:nowrap;font-weight:700}
.stor-alert .stor-alert-fix:hover{background:#93332e}
.stor-alert .stor-alert-alt{border-color:#B4453F;color:#7C2D28;background:transparent;
  white-space:nowrap;font-weight:700}
.stor-alert .stor-alert-alt:hover{background:#F5CFCB}
html[data-theme="dark"] .stor-alert{background:#3a1d1b;color:#f0b8b2;border-color:#B4453F}
html[data-theme="dark"] .stor-alert .stor-alert-alt{color:#f0b8b2}

/* UK / BBC television layout preset (screenplay variant) */
.fmt-screenplay.sp-uk .ProseMirror p.sp-scene,.fmt-screenplay.sp-uk .sp-scene{
  background:var(--panel);padding:.15em .4em;margin-top:2em;letter-spacing:.04em}
.fmt-screenplay.sp-uk .ProseMirror p.sp-dialogue,.fmt-screenplay.sp-uk .sp-dialogue{max-width:44ch}
.fmt-screenplay.sp-uk .ProseMirror p.sp-character,.fmt-screenplay.sp-uk .sp-character{margin-top:1em}

/* Stage play — standard modern play format */
.fmt-stageplay .ed-page{max-width:calc(64ch + 6.4rem)}
.fmt-stageplay .ProseMirror{font-family:var(--serif);font-size:12pt;line-height:1.4}
.fmt-stageplay .ProseMirror p{margin:0 0 .7em;white-space:pre-wrap}
.fmt-stageplay .ProseMirror p.st-head,.fmt-stageplay .st-head{text-align:center;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;margin:1.6em 0 1em}
.fmt-stageplay .ProseMirror p.st-dir,.fmt-stageplay .st-dir{font-style:italic;color:#3a4250;
  margin-left:6ch;margin-right:2ch}
.fmt-stageplay .ProseMirror p.st-char,.fmt-stageplay .st-char{text-align:center;text-transform:uppercase;
  font-weight:700;letter-spacing:.04em;margin:.6em 0 0}
.fmt-stageplay .ProseMirror p.st-paren,.fmt-stageplay .st-paren{text-align:center;font-style:italic;margin:0}
.fmt-stageplay .ProseMirror p.st-dia,.fmt-stageplay .st-dia{margin:0 6ch .7em}

/* Audio drama / scripted podcast */
.fmt-audiodrama .ed-page{max-width:calc(66ch + 6.4rem)}
.fmt-audiodrama .ProseMirror{font-family:var(--serif);font-size:12pt;line-height:1.45}
.fmt-audiodrama .ProseMirror p{margin:0 0 .7em;white-space:pre-wrap}
.fmt-audiodrama .ProseMirror p.ad-head,.fmt-audiodrama .ad-head{font-family:var(--mono);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;border-bottom:2px solid var(--ink);
  padding-bottom:.2em;margin:1.6em 0 .9em}
.fmt-audiodrama .ProseMirror p.ad-narr,.fmt-audiodrama .ad-narr{color:#25406e}
.fmt-audiodrama .ProseMirror p.ad-char,.fmt-audiodrama .ad-char{text-transform:uppercase;font-weight:700;
  letter-spacing:.03em;margin:.5em 0 0}
.fmt-audiodrama .ProseMirror p.ad-dia,.fmt-audiodrama .ad-dia{margin:0 0 .7em 3ch}
.fmt-audiodrama .ProseMirror p.ad-sfx,.fmt-audiodrama .ad-sfx,
.fmt-audiodrama .ProseMirror p.ad-music,.fmt-audiodrama .ad-music{font-family:var(--mono);font-size:.82rem;
  text-transform:uppercase;letter-spacing:.06em;padding:.3em .6em;margin:.4em 0}
.fmt-audiodrama .ad-sfx{background:var(--blue-soft);border-left:3px solid var(--blue);color:#25406e}
.fmt-audiodrama .ad-sfx::before{content:"SFX  "}
.fmt-audiodrama .ad-music{background:#F3ECFA;border-left:3px solid #6B3FA0;color:#4a2b74}
.fmt-audiodrama .ad-music::before{content:"MUSIC  "}

/* AV script rows */
.fmt-av .ProseMirror{font-family:var(--sans);font-size:.98rem;line-height:1.6}
.fmt-av .ProseMirror p{margin:0 0 .7rem;padding:.45rem .7rem}
.fmt-av .av-h{font-family:var(--mono);font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;
  border-bottom:2px solid var(--ink);padding:1.2rem 0 .3rem;margin:0 0 .8rem}
/* An untouched document opens on an empty heading, and this is the only script
   heading style that draws a rule — so a blank YouTube script showed a stray
   line above the starter prompt. Transparent rather than none, so nothing
   shifts the moment the writer types. */
.fmt-av .av-h.ed-blank{border-bottom-color:transparent}
/* Row controls: compact icon cluster, so four actions cost the width of one
   labelled button in an already-busy toolbar. */
.rb-rowtools{display:inline-flex;gap:2px;margin-left:.4rem;
  border-left:1px solid var(--line);padding-left:.5rem}
.ed-btn-ic{padding:.3rem .38rem;line-height:0;min-width:0}
.ed-btn-ic svg{display:block}
.fmt-av .av-vo{background:var(--white);border-left:3px solid var(--ink)}
.fmt-av .av-visual{background:var(--blue-soft);border-left:3px solid var(--blue);
  font-size:.88rem;color:#25406e}
.fmt-av .av-visual::before{content:"VISUAL · ";font-family:var(--mono);font-size:.62rem;
  letter-spacing:.1em;color:var(--blue)}

/* print / PDF */
@media print{
  nav,footer,.ed-toolbar,.ed-nav,.punch{display:none!important}
  .ed-layout{display:block}
  .ed-canvas{padding:0;background:#fff;overflow:visible}
  .ed-page{border:none;box-shadow:none;max-width:none;padding:0;min-height:0}
  .fmt-screenplay .ProseMirror{font-size:12pt}
  .page-break{border:none;page-break-before:always;margin:0}
  .page-break span{display:none}
  @page{margin:1in 1in 1in 1.5in}
}

/* punch list */
.punch{border-left:2px solid var(--ink);background:var(--panel);padding:1.2rem;overflow-y:auto}
.punch h2{font-size:1rem;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;
  font-weight:400;margin:0 0 1rem;color:var(--ink)}
.finding{background:var(--white);border:1px solid var(--line);padding:.9rem 1rem;margin:.7rem 0;
  font-family:var(--sans);font-size:.85rem;line-height:1.5}
.finding.resolved,.finding.dismissed{opacity:.45}
.finding .pill{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.14rem .5rem;background:var(--ink);color:var(--paper);display:inline-block;margin-bottom:.4rem}
.finding .pill.misleading{background:#8A6D1C}
.pill[class*="conf-"]{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.14rem .5rem;color:#fff;display:inline-block}
.finding .pill[class*="conf-"]{margin-left:.35rem}
.pill.conf-high{background:#1F7A43}
/* Broadcast two-column AV rows: VIDEO | AUDIO, strictly paired. The columns
   must READ as columns even when empty — otherwise a fresh row collapses to a
   single hairline. Give each cell a min-height, a faint VIDEO tint, and a
   dividing rule so the split page is always visible. */
.av-row{display:flex;gap:0;border-top:1px solid var(--av-rule);padding:0;margin:0;align-items:stretch}
/* The last row needs a rule under it, or the grid ends in mid-air and the
   final shot has no floor. */
.av-twocol .av-row:last-of-type{border-bottom:1px solid var(--av-rule)}
.av-video{flex:0 0 42%;min-width:0;min-height:2.6rem;position:relative;padding:.55rem .8rem;
  font-family:var(--mono);font-size:.8rem;line-height:1.55;text-transform:uppercase;
  letter-spacing:.02em;background:var(--blue-soft);
  border-right:2px solid var(--av-rule-strong)}
.av-audio{flex:1;min-width:0;min-height:2.6rem;position:relative;padding:.55rem .95rem}
.av-twocol .av-row:first-of-type{margin-top:1.9rem;border-top:2px solid var(--ink)}

/* inline "?" help popover (storage provider explainer) */
.stor-prov-label{display:inline-flex;align-items:center;gap:.4rem}
.fld-help{position:relative;display:inline-block}
.fld-help>summary{list-style:none;cursor:pointer;width:1.15rem;height:1.15rem;border-radius:50%;
  border:1.5px solid var(--muted);color:var(--muted);font-size:.75rem;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;user-select:none}
.fld-help>summary::-webkit-details-marker{display:none}
.fld-help>summary:hover{border-color:var(--blue);color:var(--blue)}
.fld-help[open]>summary{border-color:var(--blue);background:var(--blue);color:#fff}
.fld-help-body{position:absolute;z-index:5;top:1.6rem;left:0;width:22rem;max-width:78vw;
  background:var(--white);border:1px solid var(--ink);box-shadow:0 6px 20px rgba(22,29,40,.18);
  padding:.9rem 1rem;font-size:.86rem;line-height:1.5;font-weight:400;color:var(--ink);border-radius:2px;
  font-family:var(--sans);text-transform:none;letter-spacing:normal;white-space:normal}
.fld-help-body strong{font-weight:700}
.fld-help-body em{font-style:italic}
.fld-help-body p{margin:0 0 .55rem}
.fld-help-body p:last-child{margin:0}
.av-twocol .av-row:first-of-type .av-video::before,
.av-twocol .av-row:first-of-type .av-audio::before{
  position:absolute;top:-1.9rem;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.18em;color:var(--muted)}
.av-twocol .av-row:first-of-type .av-video::before{content:"VIDEO"}
.av-twocol .av-row:first-of-type .av-audio::before{content:"AUDIO"}
.pill.conf-med{background:#8A6D1C}
.pill.conf-low{background:#B4453F}
.finding .fq{font-family:var(--serif);font-size:.95rem;
  background:linear-gradient(transparent 55%,var(--mark) 55%);display:inline}
.finding .fx{margin:.5rem 0 .3rem}
.finding.continuity{border-left:3px solid #6B3FA0}
.pill.continuity{background:#6B3FA0}
.finding .fq2{font-family:var(--serif);font-size:.9rem;margin:.35rem 0;color:var(--muted)}
.finding .fq2::first-line{color:var(--muted)}
.finding .src a{font-size:.75rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.finding .acts{display:flex;gap:.4rem;margin-top:.6rem}
.punch .empty{font-family:var(--mono);font-size:.78rem;color:var(--muted);letter-spacing:.08em}
.punch .hint{font-size:.8rem;line-height:1.45;color:var(--muted);background:var(--panel,#f6f5f2);
  border-left:2px solid var(--blue);padding:.55rem .7rem;margin:.5rem 0 .2rem;border-radius:0 4px 4px 0}
.punch .hint a{color:var(--blue);text-decoration:underline}
.spin{display:inline-block;width:.9em;height:.9em;border:2px solid var(--blue);
  border-top-color:transparent;border-radius:50%;animation:sp 0.8s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spin{animation:none}}

footer{border-top:1px solid var(--line);padding:.8rem 1.5rem;display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}

/* lookbook */
.lb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.2rem;margin:1rem 0 3rem}
.lb-card{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--blue);overflow:hidden}
.lb-img{aspect-ratio:1;background:var(--panel);display:flex;align-items:center;justify-content:center}
.lb-img img{width:100%;height:100%;object-fit:cover}
.lb-empty{font-size:3rem;opacity:.35}
.lb-body{padding:.8rem .9rem 1rem}
.lb-body h3{margin:.25rem 0 .35rem;font-size:1.02rem}
.lb-body p{font-size:.84rem;color:var(--muted);margin:0 0 .5rem;line-height:1.45}
.lb-field{font-size:.78rem;margin:.15rem 0;color:var(--ink)}
.lb-field span{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-right:.4rem}
.lb-gen{margin-top:.5rem}

/* help */
.help-wrap{display:flex;gap:2.5rem;align-items:flex-start}
.help-toc{position:sticky;top:1.2rem;flex:0 0 180px;display:flex;flex-direction:column;gap:.35rem;
  border-left:2px solid var(--line);padding-left:1rem}
.help-toc a{font-size:.85rem;text-decoration:none;color:var(--muted)}
.help-toc a:hover{color:var(--blue)}
.help-body{flex:1;min-width:0;max-width:46rem}
.help-body h2{margin:2.4rem 0 .6rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:1.35rem}
.help-body table{border-collapse:collapse;margin:.8rem 0;background:var(--white);font-size:.92rem}
.help-body th,.help-body td{border:1px solid var(--line);padding:.4rem .8rem;text-align:left}
.help-body th{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:400}
.help-body kbd{font-family:var(--mono);font-size:.8em;background:var(--panel);border:1px solid var(--line);
  border-radius:4px;padding:.05rem .35rem}
.help-body code{font-family:var(--mono);font-size:.86em;background:var(--panel);padding:.05rem .3rem}
.help-body li{margin:.35rem 0}
@media(max-width:760px){.help-wrap{flex-direction:column}.help-toc{position:static;flex-direction:row;
  flex-wrap:wrap;border-left:none;padding-left:0;gap:.7rem}}

/* studio sections + project cards */
.studio-section{margin:2.2rem 0 .8rem;font-size:1.05rem;border-top:1px solid var(--line);padding-top:1.2rem}
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.9rem}
.proj-card{display:flex;flex-direction:column;gap:.3rem;background:var(--white);
  border:1px solid var(--line);border-top:3px solid var(--blue);padding:.9rem 1rem;
  text-decoration:none;color:var(--ink)}
.proj-card:hover{background:var(--blue-soft)}
.proj-card strong{font-size:1.02rem}
.proj-meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}

/* project binder */
.proj-titlerow{display:flex;gap:.6rem;align-items:center;margin:.2rem 0 1rem}
.proj-title{font-family:var(--serif);font-size:1.9rem;font-weight:700;border:1px solid transparent;
  background:none;padding:.1rem .3rem;width:auto;flex:1;min-width:0;color:var(--ink)}
.proj-title:hover,.proj-title:focus{border-color:var(--line);background:var(--white);outline:none}
.proj-staff{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.6rem}

/* staged project workflow: Develop → Draft → Revise → Deliver */
.wf-step{border-top:2px solid var(--ink);padding:1.1rem 0 1.7rem;margin:0}
.wf-step:first-of-type{border-top-width:2px}
.wf-head{display:flex;align-items:flex-start;gap:.8rem;margin:0 0 1rem}
.wf-num{flex:0 0 auto;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:.9rem;display:flex;align-items:center;justify-content:center;
  font-weight:700;margin-top:.1rem}
.wf-head h2{font-size:1.4rem;margin:0;letter-spacing:-.01em}
.wf-head p{color:var(--muted);margin:.15rem 0 0;font-size:.92rem}
.wf-count{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--blue)}
.wf-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.7rem;margin:0 0 .3rem}
.wf-tool{display:flex;flex-direction:column;gap:.25rem;background:var(--white);border:1px solid var(--line);
  border-left:3px solid var(--blue);padding:.8rem .9rem;text-decoration:none;color:var(--ink);
  transition:border-color .12s,box-shadow .12s}
a.wf-tool:hover{border-color:var(--blue);box-shadow:0 1px 6px rgba(43,92,196,.12)}
.wf-tools-static .wf-tool{border-left-color:var(--line);cursor:default}
.wf-tool-name{font-family:var(--serif);font-weight:700;font-size:1.02rem}
.wf-tool-desc{color:var(--muted);font-size:.84rem;line-height:1.45}
.wf-chip{align-self:flex-start;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;padding:.16rem .5rem;margin-top:.15rem;color:var(--muted);
  background:var(--panel);border:1px solid var(--line)}
.wf-chip.on{color:#fff;background:var(--blue);border-color:var(--blue)}
.wf-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.7rem 0 0}
.wf-actions form{margin:0}
.wf-foot{color:var(--muted);font-size:.84rem;margin:.7rem 0 0}
/* Revise roll-up: open findings + comments across all a project's documents */
.rv-rollup{display:flex;flex-direction:column;gap:1.1rem;margin:.2rem 0 0}
.rv-doc-title{display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);
  padding-bottom:.25rem;margin:0 0 .4rem}
.rv-doc-title:hover{color:var(--blue);border-bottom-color:var(--blue)}
.rv-item{display:block;background:var(--white);border:1px solid var(--line);border-left:3px solid var(--muted);
  padding:.55rem .75rem;margin:0 0 .4rem;text-decoration:none;color:var(--ink);transition:border-color .12s}
.rv-item:hover{border-left-color:var(--blue);box-shadow:0 1px 5px rgba(43,92,196,.1)}
.rv-tags{display:inline-flex;gap:.35rem;margin-right:.45rem;vertical-align:middle}
.rv-pill{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.14rem .45rem;color:#fff;display:inline-block}
.rv-contradicted{background:#B4453F}
.rv-misleading{background:#8A6D1C}
.rv-continuity{background:#6B3FA0}
.rv-comment{background:var(--ink)}
.rv-item .conf-high,.rv-item .conf-med,.rv-item .conf-low{font-size:.58rem;padding:.14rem .4rem}
.rv-quote{font-family:var(--serif);font-size:.92rem}
.rv-expl{display:block;color:var(--muted);font-size:.82rem;line-height:1.45;margin-top:.2rem}
.rv-doc{border-left:2px solid var(--line);padding-left:.9rem}
/* momentary highlight when a Revise roll-up link jumps you to the passage */
@keyframes rv-flash-fade{0%{background:var(--mark)}100%{background:transparent}}
.rv-flash{animation:rv-flash-fade 1.6s ease-out;border-radius:2px}

/* per-document Export dropdown in the binder rows */
.row-exp{position:relative;display:inline-block}
.row-exp>summary{list-style:none;cursor:pointer;white-space:nowrap}
.row-exp>summary::-webkit-details-marker{display:none}
.row-exp[open]>summary{background:var(--ink);color:var(--paper)}
.row-exp-menu{position:absolute;right:0;top:calc(100% + 3px);z-index:20;min-width:12rem;
  background:var(--white);border:1px solid var(--ink);box-shadow:0 6px 20px rgba(22,29,40,.18);
  display:flex;flex-direction:column;padding:.25rem}
.row-exp-menu a{padding:.4rem .6rem;text-decoration:none;color:var(--ink);font-size:.85rem;
  border-radius:2px}
.row-exp-menu a:hover{background:var(--blue-soft);color:var(--blue)}

.wf-danger{border-top:1px solid var(--line);padding-top:1.1rem;margin-top:.4rem}
.binder-group{margin:0 0 1.2rem}
.binder-folder{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .5rem;border-bottom:1px solid var(--line);padding-bottom:.3rem}
.binder-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;background:var(--white);
  border:1px solid var(--line);padding:.5rem .8rem;margin:0 0 .4rem}
.binder-n{font-family:var(--mono);font-size:.68rem;color:var(--muted);min-width:1.4rem;text-align:right}
.binder-doc{flex:1;min-width:0;text-decoration:none;color:var(--ink);font-size:1rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.binder-doc:hover{color:var(--blue)}
.binder-meta{font-family:var(--mono);font-size:.64rem;color:var(--muted)}
.binder-acts{display:flex;gap:.25rem}
.binder-acts .btn.small{padding:.15rem .45rem;font-size:.66rem}

/* binder storage location */
.binder-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.binder-main .binder-doc{flex:none}
.binder-loc{font-family:var(--mono);font-size:.62rem;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.binder-loc.warn{color:#8A6D1C}
html[data-theme="dark"] .binder-loc.warn{color:#E0B84A}

/* Aristocratix parent-brand mark — shared sigil across the family of properties */
.aristocratix-mark-wrap{text-align:center;padding:14px 16px 24px;
  font-family:var(--serif);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.aristocratix-mark-wrap a.aristocratix-mark{color:inherit;text-decoration:none;border:none;
  display:inline-flex;align-items:center;gap:8px;transition:color .2s}
.aristocratix-mark-wrap a.aristocratix-mark:hover{color:#a08a4f}
.aristocratix-mark-wrap svg{opacity:.7;transition:opacity .2s}
.aristocratix-mark-wrap a.aristocratix-mark:hover svg{opacity:1}

/* ---- save alarm + unsaved-draft recovery -------------------------------
   Both sit above every panel (max existing z-index is 90). The old failure
   signal was small grey text in the status bar beside the word count, which
   is easy to type past for an hour. These are not. */
.save-alarm,.draft-recover{
  position:fixed;left:50%;transform:translateX(-50%);z-index:200;
  display:none;align-items:center;gap:12px;
  max-width:min(720px,calc(100vw - 32px));
  padding:11px 16px;border-radius:9px;font:14px/1.45 var(--sans);
  box-shadow:0 6px 22px rgba(0,0,0,.22)
}
.save-alarm.on,.draft-recover.on{display:flex}
/* Failure is red because it is a failure. Recovery is the accent blue: an
   offer, not an error. */
.save-alarm{bottom:22px;background:#B3261E;color:#fff;border:1px solid #8C1D16}
.draft-recover{top:16px;background:var(--blue-soft);color:var(--ink);
  border:1px solid var(--blue)}
.save-alarm-btn,.draft-btn{
  flex:0 0 auto;cursor:pointer;white-space:nowrap;
  padding:6px 12px;border-radius:6px;font:600 13px var(--sans)
}
.save-alarm-btn{background:#fff;color:#B3261E;border:1px solid #fff}
.draft-btn{background:var(--white);color:var(--ink);border:1px solid var(--line)}
.draft-btn.primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.save-alarm-btn:focus-visible,.draft-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  .save-alarm.on{animation:alarmIn .18s ease-out}
  @keyframes alarmIn{from{opacity:0;transform:translate(-50%,8px)}
                     to{opacity:1;transform:translate(-50%,0)}}
}
@media print{.save-alarm,.draft-recover{display:none !important}}

/* ---- Final Draft element set (screenplay) ------------------------------
   Layout follows Final Draft's own measurements so a script looks the same
   in both. Act/sequence marks are centred and underlined; outline, summary
   and note elements are tinted because they do not print. */
.fmt-screenplay .ProseMirror p.sp-general,.fmt-screenplay .sp-general{margin-top:1em}
.fmt-screenplay .ProseMirror p.sp-shot,.fmt-screenplay .sp-shot{text-transform:uppercase;margin-top:1.2em}
.fmt-screenplay .ProseMirror p.sp-cast,.fmt-screenplay .sp-cast{text-transform:uppercase;margin-top:1.2em}
.fmt-screenplay .ProseMirror p.sp-newact,.fmt-screenplay .sp-newact,
.fmt-screenplay .ProseMirror p.sp-endact,.fmt-screenplay .sp-endact,
.fmt-screenplay .ProseMirror p.sp-sequence,.fmt-screenplay .sp-sequence{
  text-align:center;text-transform:uppercase;font-weight:700;
  text-decoration:underline;margin:1.8em 0}
/* Non-printing. The tint is the signal, so it must survive dark mode and must
   never reach paper — the @media print rule below is the load-bearing half. */
.fmt-screenplay .ProseMirror p.sp-summary,.fmt-screenplay .sp-summary,
.fmt-screenplay .ProseMirror p.sp-note,.fmt-screenplay .sp-note,
.fmt-screenplay .ProseMirror p.sp-outline1,.fmt-screenplay .sp-outline1,
.fmt-screenplay .ProseMirror p.sp-outline2,.fmt-screenplay .sp-outline2,
.fmt-screenplay .ProseMirror p.sp-outline3,.fmt-screenplay .sp-outline3{
  background:var(--blue-soft);border-left:3px solid var(--blue);
  padding:3px 8px;margin:.7em 0;font-family:var(--sans);font-size:.92em}
.fmt-screenplay .sp-note{border-left-color:var(--mark)}
.fmt-screenplay .sp-outline2{margin-left:4ch}
.fmt-screenplay .sp-outline3{margin-left:8ch}
.fmt-screenplay .sp-summary{font-style:italic}
@media print{
  .fmt-screenplay .sp-summary,.fmt-screenplay .sp-note,
  .fmt-screenplay .sp-outline1,.fmt-screenplay .sp-outline2,
  .fmt-screenplay .sp-outline3{display:none !important}
}

/* ---- multi-camera (sitcom) layout -------------------------------------
   Single-camera is the default and is what "screenplay format" means to most
   people. Multi-cam is a genuinely different layout, not a different schema,
   so it is a document setting expressed as a class rather than a new format.
   Conventions: character cues centred, dialogue double-spaced, scene and
   action text capitalised, scene headings underlined. */
body.sp-multicam .fmt-screenplay .ProseMirror p.sp-character,
body.sp-multicam .fmt-screenplay .sp-character{
  margin-left:0;max-width:none;text-align:center}
body.sp-multicam .fmt-screenplay .ProseMirror p.sp-dialogue,
body.sp-multicam .fmt-screenplay .sp-dialogue{
  margin-left:10ch;max-width:45ch;line-height:2}
body.sp-multicam .fmt-screenplay .ProseMirror p.sp-paren,
body.sp-multicam .fmt-screenplay .sp-paren{
  margin-left:0;max-width:none;text-align:center}
body.sp-multicam .fmt-screenplay .ProseMirror p.sp-action,
body.sp-multicam .fmt-screenplay .sp-action{text-transform:uppercase}
body.sp-multicam .fmt-screenplay .ProseMirror p.sp-scene,
body.sp-multicam .fmt-screenplay .sp-scene{text-decoration:underline}

/* ---- stage play: corrections against the SFI formatting guide ----------
   "Longer directions belong on the following line in parentheses, three
   indents in", and stage directions "should always begin three indents from
   the left". Both were centred or under-indented. One indent is a standard
   half-inch tab, so three indents is 1.5in. */
.fmt-stageplay .ProseMirror p.st-paren,.fmt-stageplay .st-paren{
  text-align:left;font-style:italic;margin:0 0 0 1.5in;max-width:none}
.fmt-stageplay .ProseMirror p.st-dir,.fmt-stageplay .st-dir{
  margin-left:1.5in;margin-right:0}
/* "Song lyrics should be in ALL CAPS, with one indent." */
.fmt-stageplay .ProseMirror p.st-lyric,.fmt-stageplay .st-lyric{
  text-transform:uppercase;margin-left:.5in}

/* ---- stage play: SFI structural elements -------------------------------
   "The act should be written in ALL CAPS and roman numerals, while the scenes
   should be in capital and small letters, a double space below and
   underscored." Setting and At Rise carry their labels. */
.fmt-stageplay .ProseMirror p.st-scene,.fmt-stageplay .st-scene{
  text-align:center;text-decoration:underline;margin:1em 0 1.6em}
.fmt-stageplay .ProseMirror p.st-setting,.fmt-stageplay .st-setting,
.fmt-stageplay .ProseMirror p.st-atrise,.fmt-stageplay .st-atrise{
  margin:0 0 .7em 1.5in;text-indent:-1.5in;padding-left:1.5in}
.fmt-stageplay .ProseMirror p.st-setting::before{content:"Setting: ";font-weight:700}
.fmt-stageplay .ProseMirror p.st-atrise::before{content:"At Rise: ";font-weight:700}
/* Each act starts a new page (SFI). Only meaningful on paper. */
@media print{
  .fmt-stageplay .st-head{break-before:page;page-break-before:always}
  .fmt-stageplay .st-head:first-child{break-before:auto;page-break-before:auto}
}

/* Play setup: variable-length cast and song rows. */
.ed-dialog-wide{max-width:640px;width:92vw}
/* A REPORT dialog is a table, and 640px cut the last column off the casting
   list with an overlay scrollbar that draws nothing until you already know to
   scroll. The report is the deliverable here; give it the room. */
#rep-dialog{max-width:1040px}
.ed-dialog-wide h4{margin:1.1rem 0 .3rem;font:600 13px var(--sans)}
.pl-row{display:flex;gap:.4rem;margin-bottom:.35rem}
.pl-row .pl-a{flex:0 0 34%}
.pl-row .pl-b{flex:1 1 auto}
.pl-row .pl-del{flex:0 0 auto;line-height:1}

/* Simultaneous dialogue (stage play): "side-by-side, spaced to start and end at
   the same place on the page", so equal columns rather than the screenplay's
   narrower dual-dialogue pair. */
.fmt-stageplay .ProseMirror div.sim,.fmt-stageplay .sim{
  display:grid;grid-template-columns:1fr 1fr;gap:0 2ch;margin:.7em 0}
.fmt-stageplay .sim-col>p{margin:0 0 .3em}
.fmt-stageplay .sim-col .st-char{text-align:center;margin:0}
.fmt-stageplay .sim-col .st-dia{margin:0}
.fmt-stageplay .sim-col .st-paren{margin-left:0;text-align:center}
.fmt-stageplay .sim-col .st-lyric{margin-left:.25in}

/* Production reports: dense tables a production office can read at a glance. */
.rep-out{max-height:52vh;overflow:auto;margin-top:.8rem;border:1px solid var(--line);border-radius:6px}
.rep-table{border-collapse:collapse;width:100%;font:12px/1.4 var(--sans)}
.rep-table td{border-bottom:1px solid var(--line);padding:4px 8px;white-space:nowrap}
.rep-table tr:first-child td{position:sticky;top:0;background:var(--panel);
  font-weight:600;text-transform:capitalize}
.rep-table tr:hover td{background:var(--blue-soft)}

/* ---- character highlighting -------------------------------------------
   Ten hues chosen to stay distinguishable side by side and to survive both
   themes. They tint rather than replace, so Courier stays readable and the
   page still prints legibly in greyscale. */
.ch-hl{border-radius:3px;padding:0 2px}
.ch-1{background:#DCE9F8}.ch-2{background:#F8DCE4}.ch-3{background:#F7F2CE}
.ch-4{background:#DDF0DC}.ch-5{background:#EEE0F5}.ch-6{background:#FBE2CE}
.ch-7{background:#D6F0EE}.ch-8{background:#F2E0D0}.ch-9{background:#E4E8F6}
.ch-10{background:#F0DDF0}
html[data-theme="dark"] .ch-1{background:#22364E}
html[data-theme="dark"] .ch-2{background:#4A2733}
html[data-theme="dark"] .ch-3{background:#454018}
html[data-theme="dark"] .ch-4{background:#22401F}
html[data-theme="dark"] .ch-5{background:#382A4A}
html[data-theme="dark"] .ch-6{background:#4A3320}
html[data-theme="dark"] .ch-7{background:#1E4441}
html[data-theme="dark"] .ch-8{background:#43342A}
html[data-theme="dark"] .ch-9{background:#2A2F4A}
html[data-theme="dark"] .ch-10{background:#402A40}
.ch-swatch{display:inline-block;width:12px;height:12px;border-radius:3px;
  margin-right:.4rem;vertical-align:-1px;border:1px solid var(--line)}
@media print{
  /* Padding and radius still change wrapping, so a highlighted script would
     paginate differently from the same script unhighlighted. Remove the whole
     treatment, not only the colour. */
  .ch-hl{background:transparent !important;padding:0 !important;border-radius:0 !important}
}
.chl-list{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem;max-height:40vh;overflow:auto}
.chl-item{display:inline-flex;align-items:center}
/* Colour alone cannot carry identity: ten hues repeat on a large cast, and a
   colour-blind reader gets nothing. The selected part is also outlined. */
.chl-item[aria-pressed="true"]{outline:2px solid var(--blue);outline-offset:1px}

/* ---- Structure Lines ---------------------------------------------------
   Bands in the margin, not behind the text. The value is peripheral: you are
   meant to notice act two running twice as long as act one without ever
   looking directly at it, so nothing here may touch the text's layout. */
.sl-band{position:relative}
.sl-band::before{content:"";position:absolute;left:-1.6rem;top:0;bottom:0;
  width:4px;border-radius:2px;background:var(--sl,var(--line))}
/* A sequence gets a second, inset line so the two levels read at a glance. */
.sl-band.sl-seq::after{content:"";position:absolute;left:-0.9rem;top:0;bottom:0;
  width:2px;border-radius:1px;background:var(--sl,var(--line));opacity:.55}
/* The block that OPENS a region gets a cap, so a reader can see where it starts
   rather than guessing from a continuous stripe. */
.sl-band.sl-open::before{top:.25em;border-top-left-radius:6px;border-top-right-radius:6px}
.sl-1{--sl:#2B5CC4}.sl-2{--sl:#B3261E}.sl-3{--sl:#1E7A46}.sl-4{--sl:#8A5CC4}
.sl-5{--sl:#C4772B}.sl-6{--sl:#0F7C8C}.sl-7{--sl:#A8236F}.sl-8{--sl:#6B7A24}
@media print{.sl-band::before,.sl-band::after{display:none}}

/* ---- Alternate dialogue -------------------------------------------------
   The stepper sits in the margin to the LEFT of the speech, not inline: a
   screenplay's dialogue column is measured in characters, and a control in the
   text flow would move the words and make the page count lie. It is absolutely
   positioned out of the line box for the same reason. */
/* The stepper is positioned against its own speech, so the speech has to be
   the containing block. Without this it would anchor to the page and every
   stepper in the script would stack in one corner. */
.fmt-screenplay .ProseMirror p.sp-dialogue{position:relative}
.alt-step{position:absolute;left:-4.6rem;display:inline-flex;align-items:center;
  gap:.1rem;font-family:var(--mono);font-size:.62rem;color:var(--muted);
  user-select:none;transform:translateY(.15em)}
.alt-step .alt-count{min-width:1.9em;text-align:center;letter-spacing:-.02em}
.alt-arrow{display:inline-flex;align-items:center;justify-content:center;
  padding:0;width:14px;height:14px;border:1px solid var(--line);border-radius:2px;
  background:transparent;color:var(--muted);cursor:pointer}
.alt-arrow:hover:not(:disabled){color:var(--ink);border-color:var(--ink)}
.alt-arrow:disabled{opacity:.3;cursor:default}
/* Only the take on screen is the script. The control is editing furniture and
   must never reach a printed page or a PDF. */
@media print{.alt-step{display:none}}

/* ---- Compile ------------------------------------------------------------
   Laid out after Scrivener's Compile window: the contents of the book down the
   left, the rules for each kind of section on the right. The contents list is
   live, so the heading a chapter will print is on screen before the download
   rather than discovered in the file. */
.cmp-h1{margin:.2rem 0 .2rem;font-size:1.6rem}
.cmp-sub{margin:0 0 1.2rem;color:var(--muted);max-width:60ch}
.cmp-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1.4rem;align-items:start}
@media(max-width:900px){.cmp-grid{grid-template-columns:1fr}}
.cmp-contents,.cmp-rules{background:var(--chrome);border:1.5px solid var(--ink);padding:.9rem 1rem}
.cmp-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  border-bottom:1.5px solid var(--ink);padding-bottom:.4rem;margin-bottom:.6rem}
.cmp-head h2{margin:0;font-size:1.05rem}
.cmp-summary{font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.cmp-empty{color:var(--muted);font-size:.92rem}

.cmp-doc{display:flex;align-items:center;gap:.5rem;margin:.7rem 0 .25rem;cursor:pointer}
.cmp-doc:first-child{margin-top:0}
.cmp-doc-title{font-weight:700;font-size:.95rem}
.cmp-doc-folder{font-family:var(--mono);font-size:.66rem;color:var(--muted);
  border:1px solid var(--line);padding:.05rem .3rem}
.cmp-sec{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.55rem;
  align-items:baseline;padding:.22rem 0 .22rem 1.55rem;border-top:1px solid var(--line)}
/* Excluded sections stay VISIBLE. Hiding them makes an unticked document look
   like the binder has lost a chapter. */
.cmp-sec.off{opacity:.4}
.cmp-sec.off .cmp-title{text-decoration:line-through}
.cmp-kind{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);padding:.05rem .3rem}
.cmp-kind-chapter{border-color:var(--blue);color:var(--blue)}
.cmp-title{font-size:.92rem;overflow-wrap:anywhere}
.cmp-words{font-family:var(--mono);font-size:.68rem;color:var(--muted)}

/* The global label rule is mono, uppercase and letter-spaced, which is right
   for a one-word field name and shouts when it carries a sentence. These
   toggles read as prose. */
.cmp-toggle{display:flex;align-items:center;gap:.45rem;margin:0;cursor:pointer;
  font-family:var(--serif);font-size:.88rem;text-transform:none;letter-spacing:0;
  color:var(--ink)}
.cmp-rule-body label.cmp-toggle.cmp-inline{grid-column:1/-1;flex-direction:row;
  align-items:center;justify-content:flex-start;font-family:var(--serif);
  font-size:.82rem;text-transform:none;letter-spacing:0;color:var(--muted)}
.cmp-toggle-lead{margin:0 0 .5rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.cmp-rule{border-top:1px solid var(--line);padding:.5rem 0}
.cmp-rule-head{margin-bottom:.35rem}
.cmp-rule-head strong{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase}
/* Two by two. Four across is what this wants to be, but the panel is about
   410px inside `.wrap.wide` on any screen, and four tracks with usable minimums
   need ~440 — a grid cannot shrink past its minimums, so they overflowed the
   card instead of wrapping. minmax(0,1fr) rather than a bare 1fr: the default
   `auto` minimum is the content's own width, which is how a select that says
   "Numbered + title" pushes its own column wider than the space there is. */
.cmp-rule-body{display:grid;gap:.35rem .6rem;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.cmp-rule-body label{display:flex;flex-direction:column;gap:.1rem;margin:0;
  font-family:var(--mono);font-size:.6rem;text-transform:uppercase;
  letter-spacing:.03em;color:var(--muted)}
/* border-box, or width:100% plus padding and a 1.5px border pushes every field
   past the panel it sits in. There is no global reset here to do it. */
.cmp-rule-body input[type=text],.cmp-rule-body select{box-sizing:border-box;
  font-family:var(--serif);font-size:.85rem;text-transform:none;letter-spacing:0;
  color:var(--ink);padding:.25rem .35rem;border:1.5px solid var(--ink);
  background:var(--white);width:100%;min-width:0}
/* A rule whose sections are excluded is still readable, but plainly inactive. */
.cmp-rule:has([data-f=include]:not(:checked)) .cmp-rule-body{opacity:.45}

.cmp-out{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  border-top:1.5px solid var(--ink);margin-top:.7rem;padding-top:.7rem}
.cmp-out label{margin:0;font-family:var(--mono);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.cmp-out select{width:auto;font-size:.88rem;padding:.35rem .45rem;border:1.5px solid var(--ink)}
.cmp-state{font-family:var(--mono);font-size:.7rem;color:var(--muted)}

/* ---- Research shelf ------------------------------------------------------
   What the writer BRINGS to a project, beside what Skarvia goes and finds. */
.shelf{margin:0 0 2rem}
.shelf-head{display:flex;align-items:baseline;gap:.8rem;border-bottom:2px solid var(--ink);
  padding-bottom:.35rem}
.shelf-head h2{margin:0;font-size:1.1rem}
.shelf-count{font-family:var(--mono);font-size:.7rem;color:var(--muted)}
.shelf-sub{margin:.5rem 0 .8rem;color:var(--muted);font-size:.92rem;max-width:62ch}
.shelf-add{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:0 0 1rem}
.shelf-add input[type=url],.shelf-add input[type=text]{box-sizing:border-box;width:auto;
  min-width:15rem;flex:1 1 15rem;font-size:.88rem;padding:.35rem .45rem;
  border:1.5px solid var(--ink)}
.shelf-state{font-family:var(--mono);font-size:.7rem;color:var(--muted)}
.shelf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.8rem}
.shelf-card{border:1.5px solid var(--ink);background:var(--chrome);padding:.5rem;
  display:flex;flex-direction:column;gap:.35rem}
.shelf-thumb{height:104px;display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--line);font-family:var(--mono);
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  overflow:hidden}
.shelf-thumb img{width:100%;height:100%;object-fit:cover}
.shelf-thumb-pdf{color:var(--blue);border-color:var(--blue)}
.shelf-title{font-size:.92rem;font-weight:700;color:var(--ink);text-decoration:none;
  overflow-wrap:anywhere;line-height:1.25}
.shelf-title:hover{text-decoration:underline}
.shelf-note{margin:0;font-size:.82rem;color:var(--muted);overflow-wrap:anywhere}
.shelf-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  margin-top:auto;font-family:var(--mono);font-size:.66rem;color:var(--muted)}
.rn-h2{margin:2rem 0 .6rem;font-size:1.1rem;border-bottom:2px solid var(--ink);
  padding-bottom:.35rem}

/* ---- Split editor: reference beside draft --------------------------------
   A GRID SIBLING of the canvas, never a child of it. The canvas owns the zoom
   transform, the scroll listener and the pagination overlay; a second
   scrolling child inside it is how those quietly stop lining up. */
.ed-layout.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 330px}
/* The binder gives way first. At these widths a draft, a reference and the
   rail are already as much as fits, and Scrivener drops the binder too. */
.ed-layout.split .ed-nav{display:none}
/* Narrow: the RAIL gives way, not the reference. Hiding the pane instead left
   the toggle checked, the setting saved, the navigator gone and nothing to
   show for it. If the writer asked for a reference, show the reference. */
@media(max-width:1100px){.ed-layout.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ed-layout.split .punch{display:none}}
@media(max-width:820px){.ed-layout.split{grid-template-columns:minmax(0,1fr)}
  /* minmax(0,1fr), not 1fr: a grid track sized 1fr will not go below the
     min-content width of what is in it, and the canvas came out 510px wide
     inside a 390px column, which put the overflow on the page. */
  /* min-width:0, because a grid item will not shrink below its content
     otherwise: the canvas measured 510px wide inside a 390px column, and the
     overflow went to the page. */
  .ed-layout.split .ed-split{border-left:none;border-top:2px solid var(--ink);
    max-height:45vh}}
.ed-split{display:flex;flex-direction:column;min-height:0;background:var(--chrome);
  border-left:2px solid var(--ink)}
/* An author `display` beats the hidden attribute's UA rule, so the pane was on
   screen from the first load however hidden the markup said it was. */
.ed-split[hidden]{display:none}
.split-bar{display:flex;gap:.4rem;align-items:center;padding:.4rem .5rem;
  border-bottom:1.5px solid var(--ink);background:var(--panel)}
.split-bar .ed-select{flex:1 1 auto;min-width:0}
.split-body{flex:1 1 auto;min-height:0;overflow:auto;background:var(--white)}
.split-body iframe{display:block;width:100%;height:100%;border:0;background:var(--white)}
.split-body img{display:block;max-width:100%;margin:0 auto}
.split-empty{padding:1.2rem;color:var(--muted);font-size:.9rem}
.split-link{padding:1.2rem;font-size:.92rem}
.split-link a{overflow-wrap:anywhere}
.split-note{margin:.6rem 0 0;color:var(--muted);font-size:.86rem;overflow-wrap:anywhere}

/* ---- Collections ---------------------------------------------------------
   The binder is one arrangement; these are the others, over the same
   documents. A saved search works itself out fresh each time it is opened. */
.coll{margin:1.4rem 0 0;border-top:2px solid var(--ink);padding-top:.7rem}
.coll-head{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.coll-head h3{margin:0;font-size:1rem}
.coll-sub{color:var(--muted);font-size:.85rem;flex:1 1 22rem}
.coll-add{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.6rem 0 .8rem}
.coll-add input{box-sizing:border-box;width:auto;flex:1 1 15rem;min-width:0;
  font-size:.88rem;padding:.35rem .45rem;border:1.5px solid var(--ink)}
.coll-state{font-family:var(--mono);font-size:.7rem;color:var(--muted)}
.coll-item{border:1.5px solid var(--ink);background:var(--chrome);margin:0 0 .5rem;
  padding:.45rem .6rem}
.coll-sum{display:flex;align-items:baseline;gap:.55rem;cursor:pointer;list-style:none}
.coll-sum::-webkit-details-marker{display:none}
.coll-sum::before{content:"▸";color:var(--muted);font-size:.75rem}
.coll-item[open] .coll-sum::before{content:"▾"}
.coll-kind{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;
  letter-spacing:.04em;border:1px solid var(--line);padding:.05rem .3rem;color:var(--muted)}
/* A saved search is a different KIND of thing from a list, and Scrivener
   colours them apart for the same reason: one you curate, one you cannot. */
.coll-kind-search{border-color:var(--blue);color:var(--blue)}
.coll-name{font-weight:700;font-size:.95rem;overflow-wrap:anywhere}
.coll-n{font-family:var(--mono);font-size:.66rem;color:var(--muted);margin-left:auto}
.coll-q{margin:.4rem 0 .2rem 1.1rem;font-size:.82rem;color:var(--muted)}
.coll-q code{font-family:var(--mono);font-size:.78rem;background:var(--panel);
  padding:.05rem .25rem;border:1px solid var(--line)}
.coll-none{margin:.4rem 0 .2rem 1.1rem;font-size:.86rem;color:var(--muted)}
.coll-row{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  padding:.25rem 0 .25rem 1.1rem;border-top:1px solid var(--line)}
.coll-doc{font-size:.92rem;color:var(--ink);font-weight:700;text-decoration:none}
.coll-doc:hover{text-decoration:underline}
.coll-folder{font-family:var(--mono);font-size:.62rem;color:var(--muted);
  border:1px solid var(--line);padding:.02rem .28rem}
.coll-snip{flex:1 1 20rem;font-size:.82rem;color:var(--muted);overflow-wrap:anywhere}
.coll-foot{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
  margin-top:.5rem;padding-top:.45rem;border-top:1px solid var(--line)}
.coll-pick{width:auto;max-width:16rem;font-size:.85rem;padding:.28rem .35rem;
  border:1.5px solid var(--ink)}
.coll-warn{margin:.6rem 0 0;font-size:.84rem;color:var(--muted);
  border-left:3px solid var(--line);padding-left:.6rem}

/* ---- AV timecode ---------------------------------------------------------
   A running clock down the left of a two-column script: where each row starts
   and how long it runs. A broadcast script is read against a clock, and a
   total at the bottom does not tell you that the interview starts at 1:07.

   Drawn from data attributes with content: attr(), so none of it is in the
   DOM. A clock rendered as real elements inside the row got read back into
   the document as text. */
.av-tc-on .av-row{position:relative;padding-left:4.6rem}
.av-tc-on .av-row.av-tc-row::before{
  content:attr(data-tc) "\A" attr(data-dur);
  white-space:pre;text-align:right;
  position:absolute;left:0;top:.55rem;width:3.6rem;
  font-family:var(--mono);font-size:.72rem;line-height:1.5;color:var(--ink);
  border-right:2px solid var(--line);padding-right:.4rem;
  cursor:pointer}
/* The second line is the DURATION, quieter than the start time. */
.av-tc-on .av-row.av-tc-row::after{
  content:"";position:absolute;left:0;top:.55rem;width:4rem;height:2.4rem;
  cursor:pointer}
/* A duration the writer set reads differently from one that was guessed: the
   number looks equally authoritative either way, and it is not. */
.av-tc-on .av-row.av-tc-set::before{border-right-color:var(--blue);color:var(--blue)}
.av-trt{font-family:var(--mono);font-size:1rem;color:var(--ink);padding:0 .3rem}
@media print{.av-tc-on .av-row::before{border-right:none}}

/* ---- Teleprompter --------------------------------------------------------
   A reading surface, not an editing one. Outside the editor layout entirely,
   so there is nothing in it to type into, and built from the AUDIO column
   only — the shot notes are instructions for somebody else. */
.tp{position:fixed;inset:0;z-index:200;background:#000;color:#fff;
  display:flex;flex-direction:column}
.tp[hidden]{display:none}
.tp-bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.5rem .8rem;background:#111;border-bottom:1px solid #333}
.tp-bar .btn{background:#1c1c1c;color:#fff;border-color:#555}
.tp-bar .btn:hover{border-color:#fff}
.tp-ctl{display:flex;align-items:center;gap:.4rem;margin:0;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:#9aa}
.tp-ctl input[type=range]{width:7rem}
.tp-check{text-transform:none;letter-spacing:0;font-size:.8rem}
.tp-clock{margin-left:auto;font-family:var(--mono);font-size:1rem;color:#fff}
.tp-stage{flex:1 1 auto;overflow:hidden;position:relative}
/* The vertical padding is set from the stage in JS — a percentage padding in
   CSS is a percentage of WIDTH, and vh is a share of the window rather than of
   the reading area below the bar. */
.tp-scroll{padding:0 8vw;font-family:var(--serif);line-height:1.35;
  will-change:transform}
/* The flip goes on the STAGE, not the scrolling element. The scroller's
   transform is set inline on every frame to move the script, and an inline
   transform wins over the stylesheet — so mirroring silently did nothing the
   moment the prompter had scrolled at all. */
.tp-mirror .tp-stage{transform:scaleX(-1);transform-origin:center}
.tp-line{margin:0 0 .8em;color:#8a8f96;transition:color .2s}
/* The line being read is the only one at full contrast: a prompter that shows
   ten equally bright lines gives the reader nowhere to look. */
.tp-line.on{color:#fff}
.tp-head{font-family:var(--mono);font-size:.42em;letter-spacing:.16em;
  text-transform:uppercase;color:#6cf;margin:1.4em 0 .6em}
.tp-silent{font-family:var(--mono);font-size:.4em;letter-spacing:.1em;
  text-transform:uppercase;color:#556}
/* Where the reader's eyeline sits. Every prompter has one, and it has to be
   the same 45% the scroller is measuring against. */
.tp-eyeline{position:absolute;left:0;right:0;top:45%;height:0;
  border-top:1px solid #2a3340;pointer-events:none}


/* ---------------- project timeline ----------------
   A vertical spine: the date rail on the left, what happens on the right, the
   way Aeon Timeline and Plottr both draw a story calendar. The empty rows are
   not filler — they are the scaffold you click to add to, which is the whole
   reason for listing months and weeks and days before anything is in them. */
/* `hidden` is a UA rule of display:none, and any class that sets display beats
   it. .tl-field is a flex column and .btn is inline-block, so the story-mode day
   field and the "use real dates" button both stayed on screen after the page
   set .hidden on them — a calendar timeline offering to become one. */
.tl-page [hidden]{display:none !important}
.tl-bar{display:flex;align-items:flex-end;gap:.7rem;flex-wrap:wrap;margin:1.2rem 0 .6rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.tl-grow{flex:1}
.tl-sep{width:1px;align-self:stretch;background:var(--line);margin:.1rem .2rem}
.tl-field{display:flex;flex-direction:column;gap:.2rem;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tl-field input,.tl-field select{font-family:var(--sans);font-size:.85rem;
  text-transform:none;letter-spacing:0;padding:.3rem .4rem;border:1px solid var(--line);
  background:var(--white);color:var(--ink);border-radius:3px}
.tl-unitlabel{display:none}
.tl-seg{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.tl-segbtn{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.42rem .8rem;background:var(--white);border:none;border-right:1px solid var(--line);
  color:var(--muted);cursor:pointer}
.tl-segbtn:last-child{border-right:none}
.tl-segbtn.on{background:var(--ink);color:var(--white)}
.tl-status{font-size:.85rem;color:var(--muted);margin:.4rem 0 0}

.tl-spine{margin:1.4rem 0 4rem;border-left:2px solid var(--line)}
.tl-row{display:flex;gap:1rem;align-items:flex-start;padding:.1rem 0;position:relative}
/* Every row gets a tick on the rail, so an empty stretch still reads as time
   passing rather than as a gap in the page. */
.tl-row::before{content:"";position:absolute;left:-2px;top:.85rem;width:.55rem;height:2px;
  background:var(--line)}
.tl-row .tl-when{flex:0 0 11rem;padding:.6rem .4rem .6rem 1rem;display:flex;
  flex-direction:column;gap:.05rem}
.tl-when-main{font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink)}
.tl-row.empty .tl-when-main{color:var(--muted)}
.tl-when-sub{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--muted)}
.tl-slot{flex:1;display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-start;
  padding:.45rem 0;min-height:2.1rem}
.tl-add-here{opacity:0;font-family:var(--mono);font-size:.9rem;line-height:1;
  width:1.6rem;height:1.6rem;border:1px dashed var(--line);background:none;color:var(--muted);
  cursor:pointer;border-radius:3px;align-self:center;transition:opacity .12s}
.tl-row:hover .tl-add-here,.tl-add-here:focus{opacity:1}
.tl-add-here:hover{border-style:solid;border-color:var(--ink);color:var(--ink)}

.tl-ev{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--muted);
  border-radius:3px;padding:.45rem .6rem;max-width:34rem;cursor:pointer}
.tl-ev:hover,.tl-ev:focus{border-color:var(--ink);outline:none}
.tl-ev-head{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.tl-ev-title{font-weight:600}
.tl-ev-track,.tl-ev-span{font-family:var(--mono);font-size:.6rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.tl-ev-body{margin:.25rem 0 0;font-size:.9rem;color:var(--ink)}
.tl-ev-doc{display:inline-block;margin-top:.3rem;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.07em;text-transform:uppercase}
.tl-ev.c-blue{border-left-color:#4A6FA5}
.tl-ev.c-green{border-left-color:#4F7A52}
.tl-ev.c-amber{border-left-color:#B08424}
.tl-ev.c-red{border-left-color:#B4453F}
.tl-ev.c-violet{border-left-color:#6B5090}

/* Stranded events. Named and reachable, never quietly dropped. */
.tl-band{margin:.8rem 0;padding:.7rem 1rem;border:1px dashed var(--line);border-radius:3px}
.tl-band-head{display:flex;align-items:center;gap:.8rem;margin-bottom:.5rem}
.tl-band-head h2{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0}
.tl-row-dialog label{display:block}
.tl-row{}
#tl-dialog .tl-row{display:flex;gap:.7rem}
#tl-dialog .tl-when{flex:1}

@media (max-width:700px){
  .tl-row{flex-direction:column;gap:0}
  .tl-row .tl-when{flex:none;padding-bottom:0}
  .tl-slot{padding-left:1rem}
}

/* On paper the empty scaffold is eighty blank lines between two entries, so it
   goes: printing a timeline means printing what is on it. */
@media print{
  .tl-bar,.tl-status,.no-print,.tl-add-here{display:none !important}
  .tl-row.empty{display:none}
  .tl-spine{border-left:1px solid #000}
  .tl-ev{break-inside:avoid;page-break-inside:avoid;max-width:none}
  .tl-row{break-inside:avoid;page-break-inside:avoid}
}


/* Compile: the front matter panel. Folded away by default because most drafts
   never touch it, and open on its own when there is something in it. */
.cmp-front{margin:.4rem 0 1rem;border:1px solid var(--line);border-radius:3px;
  background:var(--white)}
.cmp-front > summary{cursor:pointer;padding:.6rem .8rem;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cmp-front[open] > summary{border-bottom:1px solid var(--line);color:var(--ink)}
.cmp-front-body{padding:.9rem .8rem;display:flex;flex-direction:column;gap:.75rem}
.cmp-front-row{display:flex;gap:.8rem;flex-wrap:wrap}
.cmp-front-row > label{flex:1;min-width:13rem}
.cmp-front-body label{display:block;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cmp-front-body label > span{display:block;text-transform:none;letter-spacing:0;
  font-family:var(--sans);font-size:.78rem;color:var(--muted);margin:.1rem 0 .15rem}
.cmp-front-body input[type=text],.cmp-front-body textarea{width:100%;
  font-family:var(--sans);font-size:.9rem;text-transform:none;letter-spacing:0;
  padding:.4rem .5rem;border:1px solid var(--line);border-radius:3px;
  background:var(--bg);color:var(--ink)}
.cmp-front-body .cmp-toggle{text-transform:none;letter-spacing:0;
  font-family:var(--sans);font-size:.9rem;color:var(--ink)}


/* ---------------- production breakdown ----------------
   The stripboard reads by colour before it reads by word, which is why a 1st
   AD can scan one across a room. White day interior, yellow day exterior, blue
   night interior, green night exterior: the same code Movie Magic set and
   every schedule since has kept. Strips stay light in dark mode for the same
   reason — the colours ARE the information. */
.bd-bar{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:1.2rem 0 .6rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.bd-dl{display:flex;align-items:center;gap:.35rem}
.bd-dl-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.bd-view{margin:1rem 0 4rem}
.bd-legend{display:flex;gap:1rem;flex-wrap:wrap;margin:.2rem 0 .8rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
/* The legend is the key to the colour code, so the chips have to BE the
   colours. Written as .bd-strip.c-white and friends, they left four empty
   boxes explaining nothing. */
.bd-chip{display:inline-block;width:.8rem;height:.8rem;border:1px solid #8A8A8A;
  vertical-align:-2px;margin-right:.25rem}
.bd-chip.c-white{background:#FFFFFF}
.bd-chip.c-yellow{background:#FFF3B8}
.bd-chip.c-blue{background:#C7DEF7}
.bd-chip.c-green{background:#CCECCC}
.bd-h{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:1.6rem 0 .2rem}
.bd-h span{color:var(--blue);font-weight:700}
.bd-hint{font-size:.82rem;color:var(--muted);margin:.1rem 0 .6rem}

.bd-strips{display:flex;flex-direction:column;gap:2px;min-height:2.4rem}
/* Every column is a fixed width or a fraction, none of them `auto`. The tag
   column was auto, so a strip with no tags gave its space to the columns
   beside it and the day/night and page columns did not line up down the board.
   A stripboard that does not line up cannot be read across. */
.bd-strip{display:grid;grid-template-columns:1.1rem 2.4rem 2.2rem minmax(6rem,1fr)
  4.5rem 3rem minmax(6rem,1.4fr) 6rem 1.6rem;align-items:center;gap:.5rem;
  padding:.3rem .45rem;border:1px solid #9AA0A6;cursor:pointer;color:#1B222C;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.02em}
.bd-strip:hover{border-color:#111}
.bd-strip.dragging{opacity:.4}
.bd-strip.omitted{text-decoration:line-through;opacity:.65}
.bd-strip.c-white{background:#FFFFFF}
.bd-strip.c-yellow{background:#FFF3B8}
.bd-strip.c-blue{background:#C7DEF7}
.bd-strip.c-green{background:#CCECCC}
/* #8A8A8A on the board is 3.45:1, and the grip is the handle for dragging a
   scene, so it is not decoration. NO dark-theme variant: a stripboard strip is
   white, yellow, blue or pink in both themes, because those colours are the
   production convention for day and night, interior and exterior. A light grey
   for dark mode put the grip at 2.55:1 on a white strip. #5C5C5C is chosen
   against the DARKEST strip, the blue one, where it is 4.85:1; a grey picked
   against white passes on white and fails on every coloured strip, which is
   most of a real board. */
.bd-grip{color:#5C5C5C;cursor:grab}
.bd-sc{font-weight:700}
.bd-set{text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-dn,.bd-ie{color:#4A5058}
.bd-cast{color:#3A4048;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-tags{display:flex;gap:2px}
.bd-tag{display:inline-block;min-width:1rem;text-align:center;font-size:.6rem;
  padding:0 .2rem;border-radius:2px;color:#fff}
/* Chosen against the blue strip, the darkest of the five stripboard colours,
   where #6A7078 came to 3.62:1. A control that sits on coloured stock has to
   clear the darkest stock, not the white one it was designed against. */
.bd-x,.bd-move{border:none;background:none;color:#565F6B;cursor:pointer;font-size:.85rem;
  line-height:1;padding:.1rem .2rem}
.bd-x:hover{color:#B4453F}
.bd-move:hover{color:var(--blue)}

.bd-day{display:flex;align-items:center;gap:.6rem;background:#22262C;color:#fff;
  padding:.3rem .45rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em}
.bd-day input{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  color:#fff;font-family:var(--mono);font-size:.7rem;padding:.15rem .3rem;border-radius:2px}
.bd-day-label{width:9rem;text-transform:uppercase}
.bd-day-tot{margin-left:auto;color:#B9C0C8}
.bd-day .bd-x{color:#B9C0C8}
.bd-pool .bd-strip{opacity:.9}

.bd-sheet{border:1px solid var(--line);border-left:6px solid #9AA0A6;margin:0 0 1rem;
  background:var(--white);break-inside:avoid}
.bd-sheet.c-white{border-left-color:#D8DCE0}
.bd-sheet.c-yellow{border-left-color:#E8CF62}
.bd-sheet.c-blue{border-left-color:#7FA8D8}
.bd-sheet.c-green{border-left-color:#7BB47B}
.bd-sheet header{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  padding:.5rem .8rem;border-bottom:1px solid var(--line)}
.bd-sheet-sc{font-family:var(--mono);font-weight:700}
.bd-sheet-head{font-family:var(--mono);font-size:.78rem;text-transform:uppercase;flex:1}
.bd-sheet-meta{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--muted)}
.bd-sheet table{width:100%;border-collapse:collapse}
.bd-sheet th{width:9.5rem;text-align:left;padding:.28rem .8rem;vertical-align:top;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase}
.bd-sheet td{padding:.28rem .8rem;vertical-align:top;font-size:.9rem}
.bd-sheet-notes{padding:.4rem .8rem .7rem;font-size:.88rem;color:var(--muted);margin:0}

.bd-scroll{overflow-x:auto}
.bd-dood{border-collapse:collapse;font-family:var(--mono);font-size:.7rem}
.bd-dood th,.bd-dood td{border:1px solid var(--line);padding:.22rem .35rem;text-align:center}
.bd-dood .bd-dood-name{text-align:left;white-space:nowrap;min-width:9rem}
.bd-dood .m-H{color:#B4453F;font-weight:700}
.bd-dood .m-SW,.bd-dood .m-WF,.bd-dood .m-SWF{font-weight:700}
.bd-dood .m-none{background:var(--bg)}

/* The category colours, used on the tag chips and the sheet rows so a sheet on
   screen and a sheet on paper are read the same way. */
.t-cast{color:#B4453F}      .bd-tag.t-cast{background:#B4453F}
.t-background{color:#9E850F} .bd-tag.t-background{background:#9E850F}
.t-stunts{color:#C26A1E}     .bd-tag.t-stunts{background:#C26A1E}
.t-vehicles{color:#B85885}   .bd-tag.t-vehicles{background:#B85885}
.t-props{color:#6B5090}      .bd-tag.t-props{background:#6B5090}
.t-set_dressing{color:#477A4C} .bd-tag.t-set_dressing{background:#477A4C}
.t-wardrobe{color:#73573C}   .bd-tag.t-wardrobe{background:#73573C}
.t-makeup{color:#33797A}     .bd-tag.t-makeup{background:#33797A}
.t-animals{color:#A87F1E}    .bd-tag.t-animals{background:#A87F1E}
.t-sfx{color:#3866A3}        .bd-tag.t-sfx{background:#3866A3}
.t-vfx{color:#524C99}        .bd-tag.t-vfx{background:#524C99}
.t-sound{color:#596672}      .bd-tag.t-sound{background:#596672}
.t-equipment{color:#666}     .bd-tag.t-equipment{background:#666}

.bd-cat{margin:0 0 .55rem}
.bd-cat label{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;
  text-transform:uppercase}
.bd-cat input{width:100%;padding:.3rem .45rem;border:1px solid var(--line);
  border-radius:3px;background:var(--bg);color:var(--ink);font-size:.9rem}
.bd-auto{margin:.1rem 0 0;font-size:.88rem;color:var(--ink)}
.bd-auto span{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-left:.4rem}
.bd-dsub{font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;color:var(--muted);
  margin:-.4rem 0 .9rem}

@media (max-width:820px){
  .bd-strip{grid-template-columns:1.1rem 2.2rem 2rem 1fr 2.6rem auto;
    grid-auto-flow:row}
  .bd-cast,.bd-dn{display:none}
}


/* ---------------- the editor on a phone ----------------
   Measured on a Pixel 7 before this existed: 348px of an 839px screen went to
   navigation, tabs and ribbon before the first line of the manuscript, the
   ribbon alone was 256px tall because its groups wrapped onto six rows, and
   the point a writer would naturally tap to start typing was not the document.

   Google Docs and iA Writer both answer this the same way and it is the right
   answer: the toolbar becomes ONE row that scrolls sideways, and the words get
   the width. */
@media (max-width: 820px) {
  /* One row, scrolled, not six rows stacked. This is the whole fix. */
  .rb-pane{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    min-height:0;padding:.3rem .6rem;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .rb-pane::-webkit-scrollbar{display:none}
  .rb-group{flex:0 0 auto;padding:0 .45rem}
  .rb-col{flex-direction:row;align-items:center}
  /* Icon beside caption rather than above it. NOT display:none on .rbx-lb —
     twelve of the sixteen of those are the label around a settings checkbox
     (Suggest, Dark, Two-column script), so hiding the class wholesale deletes
     the controls rather than tidying the captions. */
  .rbx{flex-direction:row;gap:.35rem}
  .rbx .rbx-lb{font-size:.7rem}

  /* The paper's margins are a desktop affectation at this width: 3.2rem each
     side left the writing column 247px of a 390px screen. */
  .ed-page{padding:1.1rem 1rem 2.5rem;border-left:none;border-right:none;
    box-shadow:none;min-height:60vh}
  .ed-canvas{padding:0}

  /* The masthead and the document bar were 118px and 147px, both because they
     wrap onto three rows at this width. One row each that scrolls sideways,
     same as the ribbon, hands 200px back to the manuscript. Scoped to the
     editor so the marketing and project pages keep their wrapping nav, which
     is fine when the page below it scrolls anyway. */
  body.editor-shell nav{padding:.45rem .8rem;flex-wrap:nowrap;overflow-x:auto;
    gap:.9rem;scrollbar-width:none}
  body.editor-shell nav::-webkit-scrollbar{display:none}
  body.editor-shell nav .links{flex-wrap:nowrap;gap:.8rem}
  body.editor-shell nav .brandmark{height:26px}
  body.editor-shell nav a.nl,body.editor-shell nav .nav-recent{flex:0 0 auto}

  /* Find is opened while writing, so its cost comes out of the page the writer
     is looking at. Two wrapped rows took about 100px of a 664px screen. */
  .ed-findbar{flex-wrap:nowrap;overflow-x:auto;padding:.4rem .6rem;
    scrollbar-width:none}
  .ed-findbar::-webkit-scrollbar{display:none}
  .ed-findbar > *{flex:0 0 auto}
  .ed-findbar input[type=text]{width:8.5rem}

  .ed-toolbar{flex-wrap:nowrap;overflow-x:auto;gap:.45rem;padding:.4rem .6rem;
    scrollbar-width:none}
  .ed-toolbar::-webkit-scrollbar{display:none}
  .ed-toolbar > *,.ed-actions > *{flex:0 0 auto}
  .ed-actions{flex-wrap:nowrap;gap:.35rem}
  /* The title is the one thing that should give up width rather than push the
     save state off the end. */
  .ed-title{flex:1 1 7rem;min-width:6rem}
}

/* A finger is not a mouse pointer. Apple asks for 44px, Android for 48dp, and
   29 controls in the editor were under it — several at 21px high. Keyed on the
   POINTER rather than the width, because a tablet is wide and still touched. */
/* The right-hand rail as a bottom sheet.
   Stacked under the editor it took 155px of a 664px iPhone and left 95px for
   the manuscript. Hiding it outright would cost the phone every fact-check
   finding, comment and change. So it becomes what Google Docs and Notion both
   make of a side panel on a phone: a sheet resting at the bottom edge showing
   only its tabs, raised by tapping one and lowered by tapping it again. */
@media (max-width: 820px) {
  /* Closed by height, NOT by sliding it out of frame. Translating a fixed
     element down past the bottom edge grows the root scrolling area, which
     moves what bottom:0 resolves to, which pushes it down again: with the
     reference pane open that loop ran away and parked the sheet 263px below
     the screen, where a hit test still found it and a thumb never could.
     A height cannot feed back into its own containing block.

     Anchored to main rather than to the viewport, too. A fixed element sits in
     the initial containing block, and opening the reference pane stretched that
     to 927px on a 664px phone and left it there, so bottom:0 meant 263px below
     the screen. main is bounded by the shell, which is bounded by the screen. */
  .punch{--sheet-lip:60px;
    position:absolute;left:0;right:0;bottom:0;z-index:40;
    height:auto;max-height:var(--sheet-lip);overflow:hidden;
    border-top:2px solid var(--ink);border-left:none;padding:0 1rem 1rem;
    transition:max-height .18s ease-out;
    box-shadow:0 -6px 22px rgba(0,0,0,.18)}
  .punch.sheet-open{max-height:72vh;overflow-y:auto}
  /* The 1100px rule hides the rail when the reference pane is open, because at
     desktop widths a draft, a reference and a rail do not all fit. A sheet
     resting on the bottom edge costs no width, so that reasoning stops
     applying here, and without this the phone loses the rail entirely the
     moment a writer opens Reference. Specificity, not order, is why this has
     to name .ed-layout.split. */
  .ed-layout.split .punch{display:block}
  /* 44px tab + .4rem top and bottom + the sheet's 2px border = the 60px lip.
     At 52 the tabs ended half a pixel past the clip with nothing to spare, so
     any change to the border, the padding or the browser's text size would
     have started shaving the bottom off them. */
  .punch .rail-tabs{position:sticky;top:0;z-index:1;background:var(--panel);
    padding:.4rem 0;margin:0;overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:none}
  .punch .rail-tabs::-webkit-scrollbar{display:none}
  .rail-tab{flex:0 0 auto}
  /* Reserve the lip at the foot of the whole shell rather than inside the
     canvas. The status bar is a sibling of the layout, not part of it, so
     padding the canvas leaves the word count and the storage control sitting
     under the resting sheet where they cannot be tapped. */
  body.editor-shell main{position:relative;padding-bottom:60px}
  /* Focus mode hides the rail, so the room held for it goes back to the page.
     No visible change today, because focus mode gives the canvas height:100vh
     and it escapes main's padding anyway; this is here so that stops being a
     coincidence the shell depends on. */
  body.editor-shell.focus-mode main{padding-bottom:0}
}

@media (pointer: coarse) {
  .rb,.rbx,.ed-btn,.rail-tab,.ed-tab,.btn.small,.tl-segbtn,.ol-tab,
  .ed-status button,.ed-status a{
    min-height:44px;min-width:44px}
  .rb,.ed-btn{padding-left:.6rem;padding-right:.6rem}
  .bd-x,.bd-move,.ob-del,.tl-add-here{min-height:44px;min-width:44px}

  /* Surfaces that open on demand. None of these were ever measured, because a
     scan of the visible page cannot see a closed menu, a colour grid behind a
     caret, or a dialog that the test harness shuts before it starts looking.
     Every one of them was under the minimum. */
  .ed-menu-body button,.ac-menu button{min-height:44px;
    display:flex;align-items:center}
  .swatch-grid{grid-template-columns:repeat(5,44px)}
  .sw{width:44px;height:44px}
  /* The "Where can I save?" badge in the storage dialog was 18px across. */
  .fld-help>summary{width:44px;height:44px;font-size:1rem}
  /* A codex entry with a summary and a few fields can be taller than the phone
     it is drawn on, and then no placement fits. */
  .cx-hovercard{max-height:60vh;overflow-y:auto}

  /* And the ordinary button, which is 38px everywhere outside the editor:
     the marketing page, pricing, the dashboard, account, sign in and the
     password reset all had controls a little under the line. */
  .btn{display:inline-flex;align-items:center;justify-content:center;
    min-height:44px}
  select,input[type=submit],input[type=button]{min-height:44px}
  /* Twelve ribbon settings are a bare checkbox inside a label. The box renders
     about 13px square; the label is what a thumb actually aims at, so the
     label is what has to be 44px tall. */
  .rbx-check{min-height:44px}
  .rbx-check .rbx-lb{display:inline-flex;align-items:center;gap:.4rem}
  .rbx-check input[type=checkbox]{width:20px;height:20px}
  /* The colour-picker carets are .95rem wide, and .rb-split .rb-caret outranks
     a bare .rb, so the rule above never reached them. 15px of button beside a
     44px one is where a thumb opens the wrong thing. */
  .rb-split .rb-caret{min-width:44px;padding:0 .35rem;font-size:.7rem}
  /* Row-level controls in the AV grid and the breakdown board sit inside dense
     rows; give them the height without stretching the row itself. */
  .bd-strip .bd-x,.bd-strip .bd-move{margin:-.6rem 0}
}


/* ---------------- reaching things without a mouse ----------------
   The skip link is visually hidden until it is focused, which is the whole
   point of it: it is for the person who is already on the keyboard. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-decoration:none}
.skip-link:focus{left:.5rem;top:.5rem}

/* Nine rules in this stylesheet clear the outline and replace it with a border
   or an underline, which is fine where the replacement is obvious and is not
   where it is only a colour change. A ring on :focus-visible costs a mouse user
   nothing, because :focus-visible does not fire for a mouse. */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ProseMirror:focus-visible,.ed-canvas:focus-visible{outline-offset:-2px}
.ob-syn:focus-visible,.proj-title:focus-visible,.tl-ev:focus-visible,
.ed-title:focus-visible{outline:2px solid var(--blue);outline-offset:2px}


/* Present to a screen reader, absent to the eye. NOT display:none, which hides
   it from both, and not a negative text-indent, which drags a wide invisible
   box across the layout. */
.vis-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  border:0}


/* A section heading that was written as an h3 because h3 was the size that
   looked right. It is a level two: the page has one h1 above it and nothing in
   between. The class keeps the size it always had. */
.h-section{font-size:1.17rem;font-weight:700;margin:1.2rem 0 .4rem}


/* ---------------- the founding beta ----------------
   The card on the account page and the wall. Both are mostly type: the number
   is the thing being shown, so it gets the size and everything else gets out
   of its way. */
.founder-card{border:2px solid var(--ink);background:var(--white);
  padding:1.2rem 1.3rem;margin:1.4rem 0}
.founder-card h3{font-family:var(--serif)}
.founder-card .tag{margin:0}

.founders{list-style:none;padding:0;margin:1.4rem 0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.35rem .9rem}
.founders li{display:flex;gap:.7rem;align-items:baseline;padding:.35rem 0;
  border-bottom:1px solid var(--line)}
.founders .fnum{font-family:var(--mono);font-size:.78rem;color:var(--blue);
  letter-spacing:.08em}
.founders .fname{font-family:var(--serif);font-size:1rem}


/* The founders line. Present, not shouting: bottom-left, out of the way of the
   rail and the status bar, and only ever rendered for the hundred. */
.fnd-pill{position:fixed;left:1rem;bottom:3.2rem;z-index:35;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  padding:.5rem .8rem;border:1.5px solid var(--blue);border-radius:2rem;
  background:var(--paper);color:var(--blue);cursor:pointer;opacity:.75}
.fnd-pill:hover,.fnd-pill:focus-visible{opacity:1;background:var(--blue);color:#fff}
@media(max-width:820px){.fnd-pill{bottom:auto;top:.5rem;right:.5rem;left:auto;
  padding:.35rem .6rem}}


/* The founding beta banner on /pricing. The count is the point of it, so it
   gets the size; the bar is there to make "nearly gone" legible at a glance
   without anybody having to do arithmetic on two numbers. */
.beta-banner .beta-count { display:flex; align-items:baseline; gap:.5rem; }
.beta-banner .beta-left { font-size:2.4rem; font-weight:700; line-height:1;
  color:var(--blue); font-variant-numeric:tabular-nums; }
.beta-banner .beta-of { font-size:1rem; font-weight:600; }
.beta-bar { height:8px; border-radius:4px; background:rgba(0,0,0,.10);
  overflow:hidden; margin:.6rem 0 .9rem; }
.beta-bar > span { display:block; height:100%; background:var(--blue);
  border-radius:4px; }
.beta-perks { margin:.2rem 0 .9rem 1.1rem; }
.beta-perks li { margin:.15rem 0; }
.price .was { opacity:.45; font-weight:400; margin-right:.35rem; }
@media (prefers-color-scheme: dark) { .beta-bar { background:rgba(255,255,255,.14); } }
:root[data-theme="dark"] .beta-bar { background:rgba(255,255,255,.14); }
:root[data-theme="light"] .beta-bar { background:rgba(0,0,0,.10); }


/* ---- The Manual (/manual) ------------------------------------------------
   The contents page is a book's contents: numbers in a column, titles that
   scan, and a search that filters what is already on the page rather than
   fetching anything. Chapters themselves reuse .help-wrap/.help-toc/.help-body
   so a chapter and the help page read as the same document. */
.man-search{margin:1.6rem 0 2.2rem;max-width:34rem}
.man-search label{display:block;margin:0 0 .35rem}
.man-search input{width:100%;padding:.55rem .75rem;font-size:1rem;font-family:inherit;
  border:1px solid var(--line);background:var(--white);color:inherit}
#man-count{margin:.4rem 0 0;min-height:1.1em}
.man-part{margin:0 0 2.6rem}
.man-part-sum{color:var(--muted);font-size:.94rem;margin:.15rem 0 .9rem;max-width:46rem}
.man-chapters{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.man-ch{display:flex;gap:.9rem;margin:0;padding:.7rem .2rem;border-bottom:1px solid var(--line)}
.man-num{font-family:var(--mono);font-size:.76rem;color:var(--muted);flex:0 0 1.5rem;padding-top:.2rem}
.man-ch-body{min-width:0}
.man-ch-body>a{font-weight:600;text-decoration:none}
.man-ch-sum{display:block;color:var(--muted);font-size:.9rem;margin-top:.15rem}
.man-empty{color:var(--muted);max-width:44rem;margin:1.5rem 0}
.man-index-wrap{margin-top:3rem;border-top:1px solid var(--line);padding-top:1.6rem}
.man-index{columns:2;column-gap:2.5rem;list-style:none;margin:.9rem 0 0;padding:0;font-size:.92rem}
.man-index li{break-inside:avoid;margin:.22rem 0}
.man-index a{font-family:var(--mono);font-size:.74rem;margin-left:.35rem;text-decoration:none}
.man-prevnext{display:flex;justify-content:space-between;gap:2rem;margin-top:2.6rem;
  border-top:1px solid var(--line);padding-top:1rem;font-size:.95rem}
.man-prevnext .man-next{text-align:right}
.man-prevnext .tag{display:block;margin:0 0 .15rem}
.man-updated{margin-top:1.4rem}
.man-aside-nav{display:flex;flex-direction:column;gap:.4rem;margin-top:1.1rem;padding-top:.8rem;
  border-top:1px solid var(--line);font-size:.85rem}
.man-aside-nav a{color:var(--muted);text-decoration:none}
.man-aside-nav a:hover{color:var(--blue)}
@media(max-width:760px){.man-index{columns:1}
  .man-prevnext{flex-direction:column;gap:.8rem}.man-prevnext .man-next{text-align:left}}

/* Top-up packs. The buttons sit in a row that wraps on a phone; each is its
   own form because each posts a different pack. */
.topups { margin: 3rem 0 1rem; }
.topups h2 { margin-bottom: .35rem; }
.topup-buttons { display: flex; flex-wrap: wrap; gap: .6rem; margin: .9rem 0 .4rem; }
.topup-buttons form { margin: 0; }
.topup-offer { margin: 1rem 0 1.4rem; }