/* © 2026 Lumira Studio (lumirastudio.com). All rights reserved.
   Served for running in your browser; not licensed for copying or reuse. */
/* Miracue - Lumira Design System v5.1 (Monochrome).
   Light register for the app; dark register for the prompter only. */

:root{
  /* Declare the scheme, or a browser's automatic dark mode inverts the app
     algorithmically and turns the paper stock into mud. The prompter paints
     its own black, so it is untouched by this. Same rule as css/miracue.css:
     see docs/miracue-design-system.md. */
  color-scheme: light;
  --d-bg:#000000; --d-bg-2:#0a0a0b;
  --d-s1:rgba(255,255,255,0.030); --d-s2:rgba(255,255,255,0.055); --d-s3:rgba(255,255,255,0.080);
  --d-hair:rgba(255,255,255,0.10); --d-hair-2:rgba(255,255,255,0.18);
  --d-fg:#f4f4f5; --d-fg-2:#a6a6aa; --d-muted:#6a6a6e;
  /* Light register = PAPER STOCK, aligned to css/miracue.css on 2026-08-17.
     These were Lumira v5.1 cool greys (#f5f5f7 field, #ffffff surface, Apple
     muted #86868b) - the drift Luke flagged on the sign-in screen. The token
     NAMES stay --l-* so nothing else in this file moves; only the values
     change, which is the point of tokens. Muted is #6f6b62 rather than the
     spec's #8b877f faint: small text at #8b877f on the sheet measures ~3.4:1,
     below AA - same reasoning as --paper-faint in miracue.css. */
  --l-bg:#eae6dc; --l-surface:#fdfbf7; --l-hair:#e0dbcf;
  --l-fg:#221f1b; --l-fg-2:#4a4640; --l-muted:#6f6b62;
  --dot:#6ab8f7;
  --lift:0 1px 2px rgba(34,31,27,.05), 0 8px 24px rgba(34,31,27,.07);
  --ease:cubic-bezier(0.22,1,0.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Geist',-apple-system,system-ui,sans-serif;
  background:var(--l-bg); color:var(--l-fg);
  font-weight:300; font-size:var(--fs-ui); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
input,textarea,select{font-family:inherit;color:inherit}
svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block}
[hidden]{display:none !important}

.wordmark{font-family:'Poppins',sans-serif;font-weight:600;letter-spacing:-0.01em}
.wm-dot{color:var(--dot)}

/* ---------- buttons ---------- */
/* Controls, DS v1.1 (2026-08-28): three tiers, radius 8 everywhere, one
   primary per screen. The pill survives only on the avatar chip and the
   recording dot; icon buttons stay round because they are icons. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-s);font-weight:600;font-size:var(--fs-small);
  padding:0 20px;border:1px solid transparent;transition:opacity .25s var(--ease),transform .25s var(--ease),border-color .2s;min-height:44px;line-height:1.2}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--l-fg);color:var(--white)}
.btn-primary:hover{opacity:.9}
.btn-ghost{background:transparent;color:var(--l-fg);border-color:var(--l-hair);font-weight:500}
.btn-ghost:hover{border-color:var(--l-muted)}
.btn-ghost-dark{background:var(--d-s1);color:var(--d-fg);border-color:var(--d-hair-2)}
.btn-wide{width:100%;justify-content:center}
.btn-link{font-size:var(--fs-small);font-weight:500;color:var(--l-fg-2);padding:8px 4px;min-height:36px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#c9c3b4;border-radius:var(--r-s)}
.btn-link:hover{color:var(--l-fg);text-decoration-color:var(--l-fg)}
.app-bar .btn{min-height:36px;padding:0 16px}
@media (hover:none){.app-bar .btn{min-height:44px}}
/* the bar's New split button: Enter makes a script, the arrow holds the rest */
.split{display:inline-flex;align-items:stretch}
.split .split-main{border-radius:var(--r-s) 0 0 var(--r-s)}
.split .split-arrow{border-radius:0 var(--r-s) var(--r-s) 0;padding:0 10px;min-width:34px;border-left:1px solid rgba(255,255,255,.22)}
.split .split-arrow svg{width:14px;height:14px}
body.guest .split .split-main{border-radius:var(--r-s)}
/* Signed in, both halves open the one New menu, so they read as one button. */
body:not(.guest) .split .split-arrow{border-left-color:transparent;padding-left:0}
body.guest .split .split-arrow{display:none}
/* focus belongs to the system, never the browser */
:focus-visible{outline:2px solid var(--l-fg);outline-offset:3px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none}

/* ---------- login ---------- */
#view-login{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}
/* The card is a sheet of paper picked up off the stock: lift, not just line. */
.login-card{background:var(--l-surface);border:1px solid var(--l-hair);border-radius:var(--r-s);padding:40px 40px 32px;width:400px;max-width:100%;text-align:center;box-shadow:var(--lift)}
.login-card h1{font-size:var(--fs-title);font-weight:700;letter-spacing:-0.035em;margin-bottom:6px}
.login-card .byline{font-size:var(--fs-small);color:var(--l-muted);margin-bottom:28px}
.f-label{display:block;text-align:left;font-size:var(--fs-micro);font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--l-muted);margin-bottom:7px}
.login-input{width:100%;border:1px solid var(--l-hair);border-radius:var(--r-s);padding:0 16px;min-height:44px;font-size:var(--fs-ui);background:#f7f4ec;margin-bottom:16px;outline:none}
.login-input:focus{border-color:var(--l-fg)}
/* The six-digit code reads as a code, not a word. */
#login-code{font-family:var(--mono,ui-monospace,Menlo,monospace);letter-spacing:0.35em;text-align:center;font-size:var(--fs-lead)}
.login-sent{font-size:var(--fs-small);color:var(--l-fg-2);margin:-6px 0 16px;line-height:1.5}
.login-sent b{font-weight:600;color:var(--l-fg)}
.login-dev{font-size:var(--fs-micro);color:var(--l-muted);margin:-8px 0 12px;font-family:var(--mono,ui-monospace,Menlo,monospace)}
.login-alt{display:flex;justify-content:center;gap:18px;margin-top:4px;flex-wrap:wrap}
/* Google's G is a third-party trademark rendered per Google's brand rules,
   like a client logo - not a colour of ours. The design system's colour ban
   governs OUR elements and is not breached by it. */
.btn.login-google{margin-top:14px;text-decoration:none}
.login-error{color:var(--l-fg);font-size:var(--fs-small);font-weight:500;margin:-6px 0 12px}
.login-foot{font-size:var(--fs-label);color:var(--l-muted);margin-top:22px}

/* ---------- app bar ---------- */
.app-bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 28px;border-bottom:1px solid var(--l-hair);
  background:rgba(234,230,220,.82);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
.app-name{font-weight:600;font-size:var(--fs-ui);letter-spacing:-0.02em;display:flex;align-items:baseline;gap:10px;white-space:nowrap}
/* The plan, beside the logo: outline, filled, filled with a second edge */
.plan-tag{font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;border-radius:var(--r-s);padding:2px 6px;margin-left:2px;align-self:center;line-height:1.5;white-space:nowrap}
.plan-tag.lite{background:transparent;color:var(--l-muted);box-shadow:inset 0 0 0 1px var(--l-hair)}
.plan-tag.pro{background:var(--l-fg);color:var(--l-surface)}
.plan-tag.studio{background:var(--l-fg);color:var(--l-surface);box-shadow:3px 3px 0 0 var(--l-surface),3px 3px 0 1px var(--l-fg);margin-right:4px}
.plan-left{text-transform:none;letter-spacing:.02em}
.plan-left-short{display:none}
/* On a phone the bar is tight: the tag must never slide under the New button
   (it did, on Luke's phone, the night it shipped). The logo group keeps its
   width, the tag gets smaller, and the actions give up their gaps first. */
@media (max-width:640px){
  .app-name{flex:0 0 auto;min-width:max-content !important;gap:6px}
  .plan-tag{font-size:8.5px;letter-spacing:.1em;padding:1px 5px;margin-left:0}
  .plan-tag.studio{box-shadow:2px 2px 0 0 var(--l-surface),2px 2px 0 1px var(--l-fg);margin-right:3px}
  .plan-left-long{display:none}
  .plan-left-short{display:inline}
  .bar-actions{gap:6px !important;min-width:0}
}
@media (max-width:380px){ .bar-actions .split-main{padding-left:12px;padding-right:10px} .bar-actions{gap:4px !important} }
.bar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}

/* ---------- library ---------- */
.container{max-width:860px;margin:0 auto;padding:32px 24px 80px}
.lib-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:6px 2px 18px}
.lib-head h2{font-size:var(--fs-lead);font-weight:600;letter-spacing:-0.02em;display:flex;align-items:center;gap:10px;min-width:0}
.lib-head h2 button{display:inline-flex;min-height:44px;min-width:44px;align-items:center;justify-content:center;color:var(--l-fg);flex:0 0 auto}
/* the way back to the library from a project, in words (4 Oct 2026) */
.lib-head h2 .lib-back{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;min-height:44px;padding:0 14px 0 10px;border-radius:var(--pill);background:var(--l-hair);color:var(--l-fg);font-size:var(--fs-ui);font-weight:600;letter-spacing:0;text-decoration:none}
.lib-head h2 .lib-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lib-head h2 .lib-back:focus-visible{outline:2px solid var(--l-fg);outline-offset:2px}
/* folder names hold ONE line and ellipsise; wrapping pushed the header
   controls into an awkward stack on phones (Luke's screenshot, 2026-07-28) */
.lib-title-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lib-meta{font-size:var(--fs-small);color:var(--l-muted);font-weight:500;white-space:nowrap}
.row{display:flex;align-items:center;gap:16px;background:var(--l-surface);border:1px solid var(--l-hair);border-radius:var(--r);
  padding:14px 18px;margin-bottom:12px;transition:transform .25s var(--ease),border-color .25s var(--ease)}
.row:hover{border-color:var(--l-muted);transform:translateY(-1px)}
.row .txt{flex:1;min-width:0;text-align:left;cursor:pointer;padding:6px 0}
.row .txt b{display:block;font-weight:600;font-size:var(--fs-ui);letter-spacing:-0.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .txt span{font-size:var(--fs-small);color:var(--l-muted)}
.row-actions{display:flex;gap:10px;align-items:center}
.row-actions .btn{padding:10px 18px;font-size:var(--fs-small)}
.icon-btn{width:44px;height:44px;border-radius:var(--pill);border:1px solid var(--l-hair);display:flex;align-items:center;justify-content:center;color:var(--l-fg);background:var(--l-surface);transition:opacity .2s}
.icon-btn:hover{border-color:var(--l-muted)}
.icon-btn.solid{background:var(--l-fg);border-color:var(--l-fg);color:var(--white)}
/* The signed-in identity, visible at a glance: an inked circle carrying the
   account's initial, top right, opening the account sheet. Guests never see
   it - the guest bar is their status. */
.acct-chip{width:34px;height:34px;border-radius:var(--pill);border:0;background:var(--l-fg);
  color:var(--stock,#fdfbf7);font-weight:600;font-size:var(--fs-small);letter-spacing:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .15s, opacity .2s}
.acct-chip:hover{transform:translateY(-1px);opacity:.92}
.folder-ic{flex:0 0 auto;width:44px;height:44px;border-radius:var(--r-s);border:1px solid var(--l-hair);display:flex;align-items:center;justify-content:center;color:var(--l-fg);background:var(--l-bg)}
.empty{color:var(--l-muted);text-align:center;padding:60px 20px}

/* ---------- done ticks + list sort ---------- */
.done-tick{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--l-hair);display:flex;align-items:center;justify-content:center;color:transparent;background:var(--l-surface);transition:border-color .2s}
.done-tick:hover{border-color:var(--l-muted)}
.done-tick.on{background:var(--l-muted);border-color:var(--l-muted);color:var(--white)}
.done-tick svg{width:13px;height:13px}
.row.done .txt b{text-decoration:line-through;text-decoration-color:var(--l-muted);color:var(--l-muted);font-weight:500}
.row.done .txt span{color:var(--l-muted)}
/* The list is production: one card, hairlines between the rows, no lift
   per row, and the play button is filled only on the next unfilmed script;
   done rows keep an outline play for pick-ups (board 3c). */
.rows{background:var(--l-surface);border-radius:var(--r-s);overflow:hidden;margin-bottom:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(45,40,33,.10),0 6px 14px rgba(45,40,33,.065)}
body:not(.paper) .rows{border:1px solid var(--l-hair);box-shadow:none}
.rows .row{border:0;border-radius:0;margin:0;background:transparent;border-bottom:1px solid var(--l-hair);padding:12px 18px}
.rows .row:last-child{border-bottom:0}
.rows .row:hover{transform:none;border-color:var(--l-hair);background:#f7f4ec}
.rows .row .icon-btn.solid{background:transparent;border-color:var(--l-hair);color:var(--l-fg)}
.rows .row.next .icon-btn.solid{background:var(--l-fg);border-color:var(--l-fg);color:var(--white)}
.rows .row.on{box-shadow:inset 3px 0 0 var(--l-fg)}
.lib-meta.stamp{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:var(--fs-micro);letter-spacing:.02em;font-weight:500}
/* fixed "Reorder" pill: the invisible native select sits on top so a tap
   still opens the platform's own menu (current choice ticked there) */
.lib-sort-wrap{position:relative;display:inline-flex;align-items:center;border:1px solid var(--l-hair);border-radius:var(--pill);background:var(--l-surface);padding:9px 14px}
.lib-sort-label{font-size:var(--fs-small);font-weight:500;color:var(--l-fg);display:inline-flex;align-items:center;gap:5px;pointer-events:none}
.lib-sort-label svg{width:14px;height:14px}
.lib-sort{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;appearance:none}

/* ---------- multi-select ---------- */
.lib-side{display:flex;align-items:center;gap:4px 14px;flex-wrap:wrap;justify-content:flex-end}
/* The row is right-aligned, so anything that changes width to the RIGHT of
   the view toggle used to shove it sideways: Select leaves in list mode, and
   the meta swaps from "4 folders · 12 scripts" to the mono "2 of 12 done".
   Hold Select's slot (invisible, not gone) and give the meta a fixed berth,
   so the two view buttons stay under the pointer between clicks (Luke,
   2026-08-29). The bin hides the whole cluster by class, which still wins. */
body:not(.in-bin) #btn-select[hidden]{display:inline-flex !important;visibility:hidden}
.lib-meta{min-width:172px;text-align:right}
.lib-side .btn{padding:0 16px;font-size:var(--fs-small);min-height:36px}
.view-toggle{display:inline-flex;border:1px solid var(--l-hair);border-radius:var(--pill);background:var(--l-surface);padding:3px}
.view-btn{width:40px;height:34px;border-radius:var(--pill);display:flex;align-items:center;justify-content:center;color:var(--l-muted)}
.view-btn svg{width:16px;height:16px}
.view-btn[aria-pressed="true"]{background:var(--l-fg);color:var(--white)}
#sel-all{white-space:nowrap}
.select-bar{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:120;display:flex;align-items:center;gap:4px 6px;
  background:var(--l-fg);color:rgba(255,255,255,.85);border:0;border-radius:var(--r-s);padding:6px 8px 6px 18px;
  box-shadow:0 8px 28px rgba(29,29,31,0.22);max-width:calc(100vw - 24px);flex-wrap:wrap;justify-content:center}
#select-count{font-size:var(--fs-small);font-weight:600;white-space:nowrap;color:var(--white);margin-right:6px}
.select-actions{display:flex;gap:2px;flex-wrap:wrap;justify-content:center}
.sel-act{font-size:var(--fs-small);font-weight:500;color:inherit;padding:0 12px;min-height:36px;border-radius:var(--r-s);white-space:nowrap}
.sel-act:hover{background:rgba(255,255,255,.1);color:var(--white)}
.sel-act:disabled{opacity:.4}
body.guest #sel-move,body.guest #sel-share{display:none}
.card .done-tick{display:none}
.row .sel-tick{display:none !important}
.sel-tick{display:none;flex:0 0 auto;width:20px;height:20px;border-radius:5px;border:1.5px solid var(--l-muted);align-items:center;justify-content:center;color:transparent;background:var(--l-surface)}
.sel-tick svg{width:14px;height:14px}
.row.on{border-color:var(--l-fg)}
.on > .sel-tick,.on .sel-tick{background:var(--l-fg);border-color:var(--l-fg);color:var(--white)}
/* Both ticks sit in every row and the mode decides which one shows, so
   turning selection on never rebuilds the list under a live gesture. */
body.selecting .sel-tick{display:flex}
body.selecting .done-tick{display:none}
body.selecting .row-actions{display:none}
body.selecting .row,body.selecting .row .txt{cursor:pointer}
body.selecting .row.folder{opacity:.45}
/* The floating bar must never sit over the last scripts: a sweep that reaches
   the bottom of the list has to reach the bottom of the list. */
body.selecting .container{padding-bottom:132px}

/* ---------- selection gestures ---------- */
/* Nothing on the operating surface is text to be dragged over: a hold that
   highlights a script title instead of picking it up feels broken. */
.row,.card{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* Controls are things you press, never text you select: a slow tap on Android
   must not open the selection handles and the search bubble (Luke's Oppo). */
.btn,.btn-link,.icon-btn,.menu-item,.acct-rail a,.view-btn,.sel-act,.wb-tab,.split,.acct-chip,.tour .t-foot,.tour .choice,.arow .at b{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
/* The hold has to answer the finger well before its 450ms is up. */
.row.pressed,.card.pressed{transform:scale(.985)}
.row.dragging,.card.dragging{opacity:.35}
.row.leaving,.card.leaving{opacity:0;transform:scale(.94);transition:opacity .2s var(--ease),transform .2s var(--ease)}
body.dragging-scripts,body.dragging-scripts *{cursor:grabbing !important}
.row.folder.over{border-color:var(--l-fg);background:var(--l-fg)}
.row.folder.over .txt b,.row.folder.over .txt span{color:var(--white)}
.row.folder.over .folder-ic{background:transparent;border-color:rgba(255,255,255,.35);color:var(--white)}

/* the card that follows the pointer while dragging */
.drag-ghost{position:fixed;left:0;top:0;z-index:900;pointer-events:none;width:196px;will-change:transform}
.dg-card{position:relative;background:var(--l-surface);border:1px solid var(--l-hair);border-radius:var(--r-s);overflow:hidden;
  box-shadow:0 14px 34px rgba(29,29,31,0.24)}
.dg-face{padding:12px 14px 0;font-size:var(--fs-label);line-height:1.45;color:var(--l-fg-2);max-height:62px;overflow:hidden}
.dg-title{padding:10px 14px 12px;font-size:var(--fs-label);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a stack, so picking up four scripts looks like picking up four scripts */
.drag-ghost.many .dg-card{box-shadow:0 14px 34px rgba(29,29,31,0.24),
  5px 5px 0 -1px var(--l-surface),5px 5px 0 0 var(--l-hair),
  10px 10px 0 -1px var(--l-surface),10px 10px 0 0 var(--l-hair)}
.dg-count{position:absolute;top:-10px;left:-10px;min-width:24px;height:24px;padding:0 7px;border-radius:var(--pill);
  background:var(--l-fg);color:var(--white);font-size:var(--fs-label);font-weight:600;display:flex;align-items:center;justify-content:center}

/* ---------- app footer ---------- */
.app-foot{max-width:860px;margin:0 auto;padding:24px 24px 34px;font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:var(--fs-micro);letter-spacing:.04em;color:var(--l-muted);
  display:flex;flex-wrap:wrap;gap:4px 18px;justify-content:center;text-align:center}
.app-foot a{color:inherit}
body.view-editor .app-foot{display:none}

/* row options menu */
/* A dropdown floats over cream, and cream on cream cannot be separated by a
   hairline: --edge measures 1.11:1. One soft 0.10 shadow was not enough on an
   iPad (Luke, 23 Sept 2026: "the menu should have more shadow or something,
   they blend in with bg too easily"). Two layers, as --lift does it: a tight
   one that draws the edge, a wide one that lifts it off the page. */
.menu{position:absolute;z-index:180;background:var(--l-surface);border:1px solid var(--l-hair);border-radius:var(--r-s);
  box-shadow:0 1px 2px rgba(29,29,31,.08), 0 12px 32px rgba(29,29,31,.18);min-width:280px;padding:6px}
.menu-item{display:block;width:100%;text-align:left;font-size:var(--fs-small);font-weight:500;padding:0 12px;border-radius:var(--r-s);min-height:44px}
.menu-item:hover{background:var(--stock,#f7f4ec)}
.menu-item.separated{margin-top:4px;border-top:1px solid var(--l-hair);border-radius:0}
/* a group's name in a menu: New ▾ > In this project (11 Oct 2026) */
.menu-group{padding:10px 12px 4px;font-size:var(--fs-label);font-weight:600;color:var(--l-muted)}
.menu-group.separated{margin-top:4px;border-top:1px solid var(--l-hair)}
.modal select{width:100%;border:1px solid var(--l-hair);border-radius:var(--r-s);padding:12px 15px;font-size:var(--fs-ui);background:var(--l-bg);outline:none;margin-bottom:18px}

/* ---------- editor ---------- */
.ed-bar{position:sticky;top:0;z-index:41;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:10px 24px;border-bottom:1px solid var(--l-hair);
  background:rgba(255,255,255,0.72);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
/* While editing, the brand bar scrolls away instead of sticking: two
   translucent bars pinned at top:0 ghosted through each other at slightly
   different heights (Luke's screenshot, 2026-08-07). Scrolled up, the
   editor bar owns the top of the screen alone. */
body.view-editor .app-bar{position:static}
.ed-left,.ed-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.chip{font-size:var(--fs-micro);font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--l-muted);border:1px solid var(--l-hair);background:var(--l-surface);border-radius:var(--pill);padding:6px 14px}
.ed-select{border:1px solid var(--l-hair);border-radius:var(--pill);background:var(--l-surface);font-size:var(--fs-small);font-weight:500;padding:10px 14px;min-height:44px;outline:none;max-width:220px}
/* The script sits on a sheet; the workbench sits beside it on a desktop and
   underneath on a phone, which is the same design at two widths. */
/* Both columns may shrink to nothing (minmax(0,...)): a column with a minimum
   width can push the layout wider than the screen, and on a rotating iPad that
   is how the workbench ended up hanging off the right edge. */
.ed-body{max-width:1160px;margin:26px auto 0;padding:0 24px 70px;
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,380px);gap:20px;align-items:start}
.ed-doc,.ed-work{min-width:0}
/* the sheet is the positioning context for the chapter marks in its margin */
.ed-doc{position:relative}
/* ---- chapter marks in the script's margin ----
   Numbered discs on the line they mark, straddling the edge of the sheet the
   way a tab sticks out of a page. Ink, not colour: the design system allows
   exactly two chromatic values and neither of them is this. */
.ed-marks{position:absolute;left:0;top:0;bottom:0;width:0;pointer-events:none}
.ed-mark{position:absolute;left:-15px;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;pointer-events:auto;
  background:var(--l-fg);color:var(--l-surface);
  font-size:var(--fs-label);font-weight:600;line-height:1;letter-spacing:-.01em;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 2px rgba(45,40,33,.18),0 4px 10px rgba(45,40,33,.14);
  transition:transform .18s var(--ease),opacity .18s}
.ed-mark:hover{transform:translateY(-50%) scale(1.08)}
.ed-mark:active{transform:translateY(-50%) scale(.96)}
@media (max-width:900px){ .ed-mark{width:26px;height:26px;font-size:var(--fs-micro);left:-11px} }
/* nothing on this page may sit outside the frame, whatever the viewport does */
body.view-editor{overflow-x:hidden}
/* ---- the floating pair on touch devices: a chapter at the caret, and the
   keyboard hidden or brought back. Fixed bottom-left; app.js lifts it above
   the software keyboard from the visual viewport. The shoot rail goes under
   the keyboard on an iPad and under the script in portrait, so this is how
   a chapter gets marked while writing (Luke, 28 Aug). ---- */
/* A column on the absolute left edge, in the margin beside the sheet, so it
   never sits over the words (Luke's iPad, 28 Aug: the side-by-side pair sat
   in the text column above the keyboard). */
.ed-float{display:none;position:fixed;flex-direction:column;left:max(6px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));z-index:60;gap:8px}
@media (hover:none) and (pointer:coarse){ body.view-editor .ed-float{display:flex} }
.ed-fab{width:40px;height:40px;border-radius:50%;background:var(--l-fg);color:var(--l-surface);display:flex;align-items:center;justify-content:center;border:0;padding:0;
  box-shadow:0 0 0 3px var(--l-bg),0 1px 2px rgba(45,40,33,.22),0 6px 16px rgba(45,40,33,.22);transition:transform .15s}
.ed-fab svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ed-fab:active{transform:scale(.94)}
.ed-fab.kb-up .kb-show{display:none}
.ed-fab:not(.kb-up) .kb-hide{display:none}
body.view-editor .ed-body{max-width:min(1160px,100%)}
/* Below a working desktop the workbench drops underneath the script and stops
   sticking, which is the phone design and the one the mockup called Option A. */

body.paper .ed-doc{background:var(--l-surface);border-radius:var(--r);padding:26px 30px 22px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(45,40,33,.10),0 6px 14px rgba(45,40,33,.065)}
/* A title, not a form field: no rule underneath, and the caret is the only
   thing that says it can be typed in. */
.ed-title{width:100%;font-size:var(--fs-title);font-weight:700;letter-spacing:-0.03em;border:none;
  background:transparent;padding:0;margin-bottom:16px;outline:none}
.ed-title::placeholder{color:var(--l-muted);font-weight:600}
/* overscroll containment: on iPad a scroll that reaches the textarea's
   edge must not "chain" and carry the whole page with it */
/* The box grows with the script, so it never scrolls inside itself. It must
   therefore NOT hold on to the wheel: `overscroll-behavior: contain` was added
   back when the box had a fixed height and its own scrollbar (v0.17.5, an iPad
   fix); with an auto-growing box it only meant that a mouse resting inside the
   text stopped the page scrolling at all (Luke, on a computer, v0.25.0). */
.ed-text{width:100%;min-height:240px;border:none;background:transparent;resize:none;outline:none;overflow:hidden;
  font-size:var(--fs-body);line-height:1.7;font-weight:300;color:var(--l-fg-2);display:block}
body.view-editor{overscroll-behavior:contain}
/* one line of figures, in the same monospaced face as the cards */
.ed-meta{display:flex;gap:18px;margin-top:18px;padding-top:14px;border-top:1px solid var(--l-hair);
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:var(--fs-micro);letter-spacing:-.02em;
  color:var(--l-muted);font-weight:400;flex-wrap:wrap}
/* Saved is the normal state and says nothing; Delete leaves the primary row
   for the menu, where the rest of the destructive things live. */
#ed-status[hidden]{display:none}
#ed-status.is-retry{cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#btn-ed-delete{display:none !important}
#btn-ed-menu{display:flex !important;flex:0 0 auto}

.modal-text{font-size:var(--fs-ui);line-height:1.55;color:var(--l-fg-2);margin:2px 0 6px}

/* ---------- the workbench: shots, takes and marks in one tabbed panel ---------- */
body.guest #shot-sec,body.guest #take-sec,body.guest #tab-shots,body.guest #tab-takes{display:none !important}
.ed-work{position:sticky;top:78px;background:var(--l-surface);border-radius:var(--r);overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(45,40,33,.10),0 6px 14px rgba(45,40,33,.065)}
body:not(.paper) .ed-work{border:1px solid var(--l-hair);box-shadow:none}
.wb-tabs{display:flex;gap:2px;padding:6px 6px 0;background:var(--l-bg);border-bottom:1px solid var(--l-hair)}
.wb-tab{display:flex;align-items:center;gap:7px;font-size:var(--fs-small);font-weight:500;color:var(--l-muted);
  padding:10px 14px;border-radius:var(--r-s) var(--r-s) 0 0;min-height:44px;white-space:nowrap}
.wb-tab .n{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:var(--fs-micro);letter-spacing:-.02em;
  border:1px solid var(--l-hair);border-radius:var(--pill);padding:1px 6px;min-width:20px;text-align:center}
.wb-tab .n:empty{display:none}
.wb-tab:hover{color:var(--l-fg-2);background:var(--l-surface)}
.wb-tab[aria-selected="true"]{background:var(--l-surface);color:var(--l-fg);font-weight:600}
.wb-tab[aria-selected="true"] .n{border-color:var(--l-fg);color:var(--l-fg)}
.ed-work.solo .wb-tabs{display:none}
.ed-work.solo .wb-panel{padding-top:14px}
.wb-panel{display:none;padding:6px 0 10px}
.wb-panel.open{display:block}
.wb-empty{font-size:var(--fs-label);line-height:1.55;color:var(--l-muted);padding:10px 18px 6px}
/* The panel's own name, and the way across to the shoot's shot list (7 Oct 2026). */
.wb-name{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;
  margin:0;padding:8px 18px 0;font-size:var(--fs-label);color:var(--l-fg-2)}
.wb-name b{font-weight:600;color:var(--l-fg)}
.wb-name .btn-link{font-size:var(--fs-label)}
.shot{display:flex;align-items:center;gap:12px;padding:5px 18px;border-bottom:1px solid var(--l-hair)}
.shot .s-tick{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--l-hair);display:flex;align-items:center;justify-content:center;color:transparent;background:var(--l-surface);transition:border-color .2s}
.shot .s-tick:hover{border-color:var(--l-muted)}
.shot.on .s-tick{background:var(--l-muted);border-color:var(--l-muted);color:var(--white)}
.shot .s-tick svg{width:13px;height:13px}
.shot input{flex:1;border:none;background:transparent;outline:none;font-size:var(--fs-ui);font-weight:400;color:var(--l-fg-2);padding:9px 0;min-width:0}
.shot.on input{color:var(--l-muted)}
.shot .s-del{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--l-muted);opacity:.55}
.shot .s-del:hover{opacity:1}
.shot .s-del svg{width:14px;height:14px}
.shot-add{display:flex;align-items:center;gap:12px;padding:7px 18px}
.shot-add .plus{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--l-hair);display:flex;align-items:center;justify-content:center;color:var(--l-muted)}
.shot-add .plus svg{width:13px;height:13px}
.shot-add input{flex:1;border:none;background:transparent;outline:none;font-size:var(--fs-ui);font-family:inherit;color:var(--l-fg);padding:11px 0;min-width:0}
.shot-add input::placeholder{color:var(--l-muted)}
.shot-add .btn-link{flex:0 0 auto}


/* bookmark rows in the editor */
.bm-num{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--l-hair);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-label);font-weight:600;color:var(--l-muted)}
@media print{#bm-sec{display:none !important}}
/* ---------- take noter (studio accounts) ---------- */
body.guest #take-sec{display:none !important}
.take-chips{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 18px 4px}
.take{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--l-hair);background:var(--l-surface);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-small);font-weight:600;color:var(--l-fg-2)}
.take.sel{border-color:var(--l-fg);color:var(--l-fg)}
.take.star{background:var(--l-fg);border-color:var(--l-fg);color:var(--white)}
.take .vmark{display:none;position:absolute;right:-4px;top:-4px;width:18px;height:18px;border-radius:50%;
  background:var(--l-fg);color:var(--white);align-items:center;justify-content:center;border:2px solid var(--l-surface)}
.take.hasaudio .vmark{display:flex}
.take .vmark svg{width:9px;height:9px;stroke-width:2}
.take-panel{padding:4px 18px 16px}
.take-row{display:flex;align-items:flex-start;gap:10px;margin-top:10px}
.take-star{flex:0 0 auto;width:44px;height:44px;font-size:24px;line-height:1;color:var(--l-fg);display:flex;align-items:center;justify-content:center;border-radius:50%}
.take-star:hover{background:var(--l-bg)}
.take-note{flex:1;border:1px solid var(--l-hair);border-radius:var(--r-s);padding:10px 14px;font-size:var(--fs-ui);font-family:inherit;background:var(--l-bg);outline:none;min-width:0;min-height:64px;resize:vertical;line-height:1.5}
.take-note:focus{border-color:var(--l-fg)}
.take-actions .tk-remove{margin-left:auto}
.recrow{display:flex;align-items:center;gap:14px;margin-top:12px}
.rectime{font-size:var(--fs-body);font-weight:600;font-variant-numeric:tabular-nums;min-width:56px}
.meter{flex:1;height:6px;border-radius:var(--pill);background:var(--l-bg);overflow:hidden;min-width:60px}
.meter i{display:block;height:100%;width:0%;background:var(--l-fg);border-radius:var(--r-s);transition:width .08s linear}
.player{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap;min-width:0}
.pbtn{width:48px;height:48px;border-radius:50%;background:var(--l-fg);color:var(--white);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pbtn svg{width:18px;height:18px;fill:var(--white);stroke:none}
.ptime{font-size:var(--fs-label);font-weight:500;color:var(--l-fg-2);font-variant-numeric:tabular-nums;min-width:40px;text-align:center}
.scrub{flex:1 1 120px;min-width:80px;appearance:none;-webkit-appearance:none;height:6px;border-radius:var(--pill);background:var(--l-hair);outline:none;cursor:pointer}
.scrub::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--l-fg);border:none}
.scrub::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--l-fg);border:none}
.speed{font-size:var(--fs-label);font-weight:600;border:1px solid var(--l-hair);border-radius:var(--pill);padding:7px 12px;color:var(--l-fg-2);min-width:44px}
@media (max-width:640px){.scrub{flex:1 1 100%;order:9}}
.take-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;align-items:center}
.take-actions .btn{padding:10px 18px;font-size:var(--fs-small)}
.tr-status{font-size:var(--fs-small);color:var(--l-fg-2);margin-top:12px;font-weight:500}
@media print{#take-sec{display:none !important}}

/* ---------- print: the script + its shot list, clean on A4 ---------- */
/* The textarea is swapped for a mirror div at print time (beforeprint in
   app.js): a textarea is one unbreakable box to the print pager - it
   stranded the title alone on page one - while a plain div flows across
   pages. Real page margins come from @page, not the browser's defaults. */
#print-body,#print-head,#print-cuts{display:none}
@media print{
  @page{margin:18mm 18mm 16mm}
  body{background:var(--white);color:#000;font-weight:400}
  /* the paper grain is a fixed full-screen layer; printed, it bloats every PDF */
  body.paper::before{display:none}
  .app-bar,.ed-bar,.app-foot,.select-bar,.toast,.menu,.modal-back,#view-prompter,#view-login,#guest-bar{display:none !important}
  /* The chapter discs are screen-measured overlays; in a print reflow their
     positions are meaningless (they printed scattered and half-clipped). */
  .ed-marks{display:none !important}
  /* The rail never prints (15 Oct 2026): it kept its sticky full-height
     column on paper, which pinned the cutaway box to the foot of page one
     with its screen shadow. Its cutaways print from #print-cuts instead. */
  .ed-work{display:none !important}
  .ed-body{max-width:none;margin:0;padding:0;display:block}
  .ed-doc{background:none !important;box-shadow:none !important;padding:0 !important}
  .ed-text,.ed-meta{display:none !important}
  /* Paper prints as paper: a head with the title, the script, then the
     cutaways on their own sheet. Takes and chapters are working notes. */
  #print-head{display:block;margin:0 0 20pt;padding:0 0 12pt;border-bottom:1pt solid #bbb;break-after:avoid;page-break-after:avoid}
  #print-head h1{margin:0;font-size:22pt;line-height:1.15;font-weight:700;letter-spacing:-.01em;color:#000}
  #print-head p{margin:5pt 0 0;font-size:9.5pt;color:#555}
  #print-body{display:block;white-space:pre-wrap;color:#000;font-size:13pt;line-height:1.6;font-weight:400;max-width:165mm}
  #print-cuts:not(:empty){display:block;break-before:page;page-break-before:always}
  #print-cuts h2{margin:0;font-size:16pt;font-weight:700;color:#000}
  #print-cuts p{margin:4pt 0 14pt;font-size:9.5pt;color:#555}
  #print-cuts ul{list-style:none;margin:0;padding:0;border-top:1pt solid #bbb}
  #print-cuts li{position:relative;padding:8pt 0 8pt 22pt;border-bottom:.75pt solid #ddd;font-size:11.5pt;line-height:1.4;break-inside:avoid;page-break-inside:avoid}
  #print-cuts li::before{content:"";position:absolute;left:0;top:9pt;width:10pt;height:10pt;border:1.2pt solid #000;border-radius:2pt}
  #print-cuts li.on{color:#666}
  #print-cuts li.on::after{content:"\2713";position:absolute;left:1.5pt;top:7.5pt;font-size:10pt;font-weight:700;color:#000}
  /* The what-to-print choices, set as body classes by the print dialog. */
  body.print-no-script #print-body{display:none !important}
  body.print-no-script #print-cuts{break-before:auto;page-break-before:auto}
  body.print-no-shots #print-cuts{display:none !important}
}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:200;background:var(--l-fg);color:var(--white);
  font-size:var(--fs-small);font-weight:500;border-radius:var(--r-s);padding:11px 18px;box-shadow:0 4px 16px rgba(29,29,31,0.15);
  max-width:90vw;text-align:center;display:flex;align-items:center;gap:14px;justify-content:center}
.toast-action{color:var(--white);font-size:var(--fs-small);font-weight:600;text-decoration:underline;text-underline-offset:3px;
  padding:6px 2px;min-height:32px;white-space:nowrap}
body.selecting .toast{bottom:96px}
.toast.two{flex-wrap:wrap;row-gap:6px}
.toast-line{flex-basis:100%}
.toast-line a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- modal ---------- */
.modal-back{position:fixed;inset:0;z-index:150;background:rgba(29,29,31,0.45);display:flex;align-items:center;justify-content:center;padding:24px}
.modal{background:var(--l-surface);border:1px solid var(--l-hair);border-radius:var(--r);padding:28px;width:380px;max-width:100%}
.modal h3{font-size:var(--fs-body);font-weight:600;letter-spacing:-0.02em;margin-bottom:16px}
.modal input{width:100%;border:1px solid var(--l-hair);border-radius:var(--r-s);padding:12px 15px;font-size:var(--fs-ui);background:var(--l-bg);outline:none;margin-bottom:18px}
.modal input:focus{border-color:var(--l-fg)}
.modal-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}

/* icons + guest mode */
.login-icon{width:64px;height:64px;border-radius:var(--r);margin:0 auto 14px;display:block}
.app-icon{width:26px;height:26px;border-radius:var(--r-s);align-self:center;margin-right:2px}
/* The mark is a link home, as it is on every other Miracue page. The editor
   keeps its own Back button, so this never has to double as one. */
.app-name{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit;
  border-radius:var(--r-s);padding:2px 4px 2px 0}
.app-name:hover{opacity:.75}
/* the guest chapter: a hairline, the action as text, then the reassurance */
.login-guest{margin-top:22px;padding-top:18px;border-top:1px solid var(--l-hair)}
.login-guest .login-foot{margin-top:8px}
@media (max-width:640px){
  #view-login{padding:0;align-items:flex-start}
  .login-card{border:0;box-shadow:none;background:transparent;border-radius:0;padding:40px 24px 32px;width:100%}
}
#btn-guest-share{display:none}
body.guest #btn-guest-share{display:inline-flex}
body.guest #btn-new-folder{display:none}
body.guest #btn-import{display:none}
.file-hidden{display:none}
.import-src{display:flex;align-items:center;gap:12px;margin-bottom:12px;min-width:0}
.import-src label{cursor:pointer;flex:0 0 auto}
.import-file-name{font-size:var(--fs-small);color:var(--l-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#import-paste{width:100%;border:1px solid var(--l-hair);border-radius:var(--r-s);padding:12px 15px;font-size:var(--fs-small);background:var(--l-bg);outline:none;margin:0 0 12px;resize:vertical;font-family:inherit}
.import-tidy{margin:16px 0 0;font-size:var(--fs-label);color:var(--l-muted);line-height:1.5;text-align:center}
.import-tidy a{color:var(--l-fg-2);text-decoration:underline;text-underline-offset:3px}
.txt-btn{background:none;border:0;padding:0;font:inherit;color:var(--l-fg-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.txt-btn:hover{color:var(--l-fg)}
.import-file-name{font-size:var(--fs-small);color:var(--l-muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.import-summary{font-size:var(--fs-small);color:var(--l-fg-2);margin:12px 0 6px;font-weight:500}
.import-list{max-height:200px;overflow:auto;border:1px solid var(--l-hair);border-radius:var(--r-s);padding:6px 0}
.import-item{display:flex;justify-content:space-between;gap:10px;padding:8px 14px;font-size:var(--fs-small)}
.import-item b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.import-item span{color:var(--l-muted);flex:0 0 auto}
body.guest #ed-folder{display:none}
.share-privacy{font-size:var(--fs-small);color:var(--l-muted);margin-bottom:16px;line-height:1.55}
/* the live link's switch: its state in words, and the one button that changes it */
.share-live{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding:12px 14px;border:1px solid var(--l-hair);border-radius:var(--r-s);background:var(--l-bg)}
.share-live-state{font-size:var(--fs-small);line-height:1.45;color:var(--l-fg);font-weight:500}
.share-live.off .share-live-state{color:var(--l-muted)}
.share-live .btn{flex:none;padding:9px 14px;font-size:var(--fs-small)}
@media (max-width:420px){.share-live{flex-direction:column;align-items:stretch}}
#view-linkoff{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}
.linkoff-title{font-size:var(--fs-lead) !important;line-height:1.25;margin-bottom:12px !important}
.linkoff-who{font-size:var(--fs-ui);color:var(--l-muted);line-height:1.5}
#share-link,#device-link{font-size:var(--fs-label);color:var(--l-fg-2)}
.share-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.share-actions .btn{padding:11px 10px;font-size:var(--fs-small);justify-content:center;white-space:nowrap}
.share-actions .btn.span{grid-column:1/-1}
#share-qr-img,#device-qr-img{display:block;margin:0 auto 16px;width:220px;height:220px;image-rendering:pixelated;border:1px solid var(--l-hair);border-radius:var(--r-s)}

/* ================= PROMPTER (dark register) ================= */
/* While reading, the page behind the overlay must not scroll at all */
body.pr-open{overflow:hidden}
#view-prompter{position:fixed;inset:0;z-index:100;background:var(--d-bg);overflow:hidden;
  user-select:none;-webkit-user-select:none;touch-action:manipulation}
.pr-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;gap:12px;padding:14px 20px;z-index:4;
  transition:opacity .4s var(--ease)}
.pr-mini{font-size:var(--fs-micro);font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--d-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-scroll{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:none}
.pr-scroll.dragging{cursor:grabbing}
.pr-flip{position:absolute;inset:0}
.pr-flip.mirror-h{transform:scaleX(-1)}
.pr-flip.mirror-v{transform:scaleY(-1)}
.pr-flip.mirror-h.mirror-v{transform:scale(-1,-1)}
/* Reading palettes (Accessibility settings): the palette sets three vars
   on #view-prompter - background, text ink, and the marker ink the rails
   and glow derive from via color-mix, so light palettes get dark rails.
   Without vars (or without color-mix support) everything falls back to
   the standard white-on-black look. */
#view-prompter{--pr-bg:#000000;--pr-fg:var(--d-fg);--pr-ink:var(--white);background:var(--pr-bg)}
.pr-text{will-change:transform;color:var(--pr-fg);font-weight:500;letter-spacing:-0.01em}
/* no paragraph gap at all: gaps read as dead air at speed (Luke, 2026-07-26;
   swap back to a small margin if continuous flow proves harder to read) */
.pr-text p{margin-bottom:0}
/* greyscale-only marker emphasis: white at 0.42 alpha, no hue introduced */
.pr-eyeline{position:absolute;left:0;right:0;top:37%;pointer-events:none;border-top:2px solid color-mix(in srgb, var(--pr-ink) 42%, transparent);z-index:3}
/* Voice zone has two lives: FOLLOWING = awake (bright rails + a slow white
   breathing glow), WAITING = idling (dim rails + a faint slow breath so it
   still reads as listening, not dead). Glow lives on ::before so only its
   opacity animates; nothing busy ever sits over the words being read.
   Waking up is fast (.15s), settling back down is slow (.6s). */
.pr-zone{position:absolute;left:0;right:0;pointer-events:none;z-index:3;background:color-mix(in srgb, var(--pr-ink) 7.5%, transparent);
  border-top:2px solid color-mix(in srgb, var(--pr-ink) 85%, transparent);border-bottom:2px solid color-mix(in srgb, var(--pr-ink) 85%, transparent);
  transition:background .15s var(--ease),border-color .15s var(--ease)}
.pr-zone::before{content:"";position:absolute;inset:-2px;
  box-shadow:0 0 18px color-mix(in srgb, var(--pr-ink) 35%, transparent),0 0 55px color-mix(in srgb, var(--pr-ink) 14%, transparent);
  animation:zone-breathe 3s ease-in-out infinite}
.pr-zone.waiting{background:color-mix(in srgb, var(--pr-ink) 2.8%, transparent);border-color:color-mix(in srgb, var(--pr-ink) 22%, transparent);
  transition:background .6s var(--ease),border-color .6s var(--ease)}
.pr-zone.waiting::before{animation:zone-idle 5.5s ease-in-out infinite}
@keyframes zone-breathe{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes zone-idle{0%,100%{opacity:.05}50%{opacity:.22}}
/* The live swell: a second glow whose whole existence is the voice level,
   riding over the baseline breath. Speak and the reading zone visibly
   answers; stop and it settles. The generous blur is deliberate - the old
   GPU restraint is retired (Luke, 6 Sept 2026). */
.pr-zone::after{content:"";position:absolute;inset:-2px;pointer-events:none;
  box-shadow:0 0 30px color-mix(in srgb, var(--pr-ink) 45%, transparent),0 0 90px color-mix(in srgb, var(--pr-ink) 20%, transparent);
  opacity:var(--mic-level,0);transition:opacity .1s linear}
.pr-zone.waiting::after{opacity:calc(var(--mic-level,0)*0.55)}
@media (prefers-reduced-motion: reduce){
  .pr-zone::after{display:none}
}
/* Large soft blurs cost real GPU memory on iPads; mobile gets a tighter
   glow that reads the same at arm's length. */
/* (2026-08-01) The calmer mobile glow from the crash hunt is retired:
   the kills were the model's memory footprint, not the glow, and voice
   follow is aimed at capable devices - they get the full effect. */
/* Numbered bookmark tabs beside the line they mark. They scroll with the
   words. Ink at full strength against text at reading strength: the
   difference reads instantly without introducing a colour. */
.pr-bm-tab{position:absolute;width:1.4em;text-align:right;
  font-size:0.5em;font-weight:700;line-height:1;padding-top:0.42em;
  color:var(--pr-fg);
  border-right:3px solid color-mix(in srgb, var(--pr-ink) 70%, transparent);
  padding-right:0.35em;pointer-events:none;user-select:none}
.pr-text{position:relative}
/* Bookmark gutter: proportional map of the whole script down the left edge.
   Ticks are the safe points; the brighter bar is where you are now. */
.pr-marks{position:absolute;left:0;top:0;bottom:0;width:14px;z-index:4;pointer-events:none}
.pr-marks i{position:absolute;left:4px;width:6px;height:2px;border-radius:1px;background:color-mix(in srgb, var(--pr-ink) 55%, transparent)}
.pr-marks i.here{left:2px;width:10px;height:3px;background:var(--pr-fg)}
.pr-incoming{position:absolute;left:50%;top:max(58px,calc(env(safe-area-inset-top) + 50px));transform:translateX(-50%);z-index:7;
  display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:6px 6px 6px 16px;
  background:var(--d-bg-2);border:1px solid var(--d-hair-2);border-radius:var(--pill);color:var(--d-fg);font-size:var(--fs-small);font-weight:600}
.pr-incoming[hidden]{display:none}
.pr-incoming span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-incoming button{flex:none;border:1px solid var(--d-hair-2);background:transparent;color:var(--d-fg);font:inherit;border-radius:var(--pill);padding:6px 14px;cursor:pointer}
.pr-incoming button[data-inc="accept"]{background:var(--d-fg);color:var(--d-bg);border-color:var(--d-fg)}
.pr-bm-flash{position:absolute;left:50%;transform:translateX(-50%);z-index:6;
  background:var(--d-bg-2);border:1px solid var(--d-hair-2);border-radius:var(--pill);padding:8px 18px;
  color:var(--d-fg);font-size:var(--fs-small);font-weight:600;letter-spacing:0.02em;pointer-events:none;
  transition:opacity .35s var(--ease)}
/* Tapping a word while paused sets where the read begins */
.pr-tri{position:absolute;left:22px;top:-10px;width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:13px solid var(--pr-fg)}
/* overflow:visible overrides .pr-mini's hidden: the live dot scales and
   glows with the voice level, and a clipped pulse reads as a bug (Luke's
   catch, 6 Sept 2026). The title span keeps its own truncation. */
.pr-status{display:flex;align-items:center;gap:8px;overflow:visible}
/* recording red: functional mic-active indicator (Luke-approved exception
   to the monochrome rule), never used as a design element elsewhere */
/* The dot now breathes with the actual voice: --mic-level (0..1, set per
   frame by the prompter while the mic is live) drives scale and a red glow,
   and the timed blink retires to a slow baseline breath for silence. The
   old restraint on glow size was a GPU-memory saving Luke retired on
   6 Sept 2026: go visibly alive. */
.rec-dot{width:12px;height:12px;border-radius:50%;background:#ff453a;flex:0 0 auto;
  transform:scale(calc(1 + var(--mic-level,0)*0.6));
  box-shadow:0 0 calc(3px + var(--mic-level,0)*18px) calc(var(--mic-level,0)*6px) rgba(255,69,58,.55);
  animation:recpulse 2.6s ease-in-out infinite;transition:transform .08s linear}
@keyframes recpulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion: reduce){
  .rec-dot{animation:none;transform:none;box-shadow:none}
  .pr-zone::before{animation:none;opacity:.7}
  .pr-zone.waiting::before{animation:none;opacity:0}
}
.pr-count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:6;
  font-size:clamp(90px,22vw,220px);font-weight:700;letter-spacing:-0.045em;color:var(--d-fg);background:rgba(0,0,0,0.55)}
.pr-note{position:absolute;left:50%;top:16%;transform:translateX(-50%);z-index:6;background:var(--d-bg-2);
  border:1px solid var(--d-hair-2);border-radius:var(--r);padding:16px 22px;max-width:min(480px,86vw);
  color:var(--d-fg);font-size:var(--fs-ui);font-weight:500;line-height:1.5;text-align:center}
.pr-controls{position:absolute;left:0;right:0;bottom:var(--vv-lift,0px);z-index:5;display:flex;align-items:center;justify-content:center;gap:12px;
  padding:16px 16px max(16px,env(safe-area-inset-bottom));border-top:1px solid var(--d-hair);
  background:rgba(8,8,10,0.55);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  transition:opacity .4s var(--ease);flex-wrap:wrap}
.pr-controls.faded{opacity:0;pointer-events:none}
.pr-top.faded{pointer-events:none}
#pr-title,#pr-info{transition:opacity .4s var(--ease)}
/* the status line (dot + counts + voice state) never fades; only the title does */
.pr-top.faded #pr-title{opacity:0}
.pctl{min-width:52px;height:52px;padding:0 14px;border-radius:var(--pill);border:1px solid var(--d-hair-2);background:var(--d-s1);
  color:var(--d-fg);display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:var(--fs-small);
  transition:background .15s,transform .15s}
.pctl:hover{background:var(--d-s2)}
.pctl:active{transform:scale(.96)}
.pctl svg{width:20px;height:20px}
.pctl-big{min-width:64px;height:64px;background:var(--d-fg);border-color:var(--d-fg);color:#000}
.pctl-big:hover{background:var(--d-fg);opacity:.9}
.pctl.active{background:var(--d-fg);border-color:var(--d-fg);color:#000}
.pctl[disabled]{opacity:.45;pointer-events:none}

/* ---- chapters, down the right edge ----
   The right edge is dead space in every layout and an iPad has no keyboard,
   so this is the only way to reach chapters on the device most people prompt
   from. Deliberately misty: frosted and half-there, so it reads as available
   without competing with the script, and comes up to full on hover or touch.
   It does NOT fade with the bottom bar, because the whole point is that it is
   reachable mid-take. */
/* 24px off the edge, not 10. At 10 they read as stuck to the side of the
   screen rather than placed on it, and the header text already sits on a
   20px gutter, so hugging the edge looked like a mistake next to it. */
.pr-chapters{position:absolute;z-index:5;top:50%;transform:translateY(-50%);
  right:calc(24px + env(safe-area-inset-right));
  display:flex;flex-direction:column;gap:10px;
  opacity:.34;transition:opacity .35s var(--ease)}
.pr-chapters:hover,.pr-chapters:focus-within,.pr-chapters:active{opacity:1}
/* Derived from the reading palette rather than hard-coded, the same way the
   eyeline and the zone are, so the cream and amber palettes get buttons that
   belong to them instead of black discs sitting on a light page. */
.pctl-edge{min-width:48px;width:48px;height:48px;padding:0;
  color:var(--pr-fg);
  background:color-mix(in srgb, var(--pr-bg) 62%, transparent);
  border-color:color-mix(in srgb, var(--pr-ink) 24%, transparent);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
.pctl-edge:hover{background:color-mix(in srgb, var(--pr-bg) 86%, transparent)}
/* No hover on a touch screen, so start a little more present. */
@media (pointer:coarse){
  .pr-chapters{opacity:.44;gap:12px;right:calc(20px + env(safe-area-inset-right))}
  .pctl-edge{min-width:52px;width:52px;height:52px}
}
@media (max-height:520px){ .pr-chapters{gap:8px} .pctl-edge{width:44px;min-width:44px;height:44px} }
.pr-tri{transition:opacity .3s var(--ease)}
.pr-tri.waiting{opacity:.35}
.pr-speedchip{font-size:var(--fs-small);font-weight:600;color:var(--d-fg-2);letter-spacing:0.02em;padding:0 2px;min-width:74px;text-align:center}

/* settings sheet */
/* Opening Accessibility settings can make the sheet taller than the screen.
   It scrolls on its own rather than running off the top, so a finger or a
   wheel can reach the settings above without closing anything (Luke, iPad).
   Containment here is right: this IS a scroll container with more inside it
   than fits, and the prompter behind it must not move while you scroll. */
/* The sheet is a column: heading, a scrolling middle, and Done. Capping the
   whole box and letting it scroll was not enough on an iPad - the settings
   above the fold stayed out of reach and the menu read as locked open. Now
   only the middle scrolls, Done never leaves the screen, and `touch-action`
   says plainly that a finger dragging here is panning, not reading. */
.pr-sheet{position:absolute;right:16px;bottom:104px;z-index:7;width:384px;max-width:calc(100vw - 32px);
  background:var(--d-bg-2);border:1px solid var(--d-hair);border-radius:var(--r);padding:24px;
  max-height:calc(100% - 132px);display:flex;flex-direction:column;overflow:hidden}
.pr-sheet h4{flex:0 0 auto}
.pr-sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;touch-action:pan-y;padding:0 7px;margin:0 -7px}
#pr-sheet-close{flex:0 0 auto}
.pr-sheet-body::-webkit-scrollbar{width:9px}
.pr-sheet-body::-webkit-scrollbar-thumb{background:var(--d-hair-2);border-radius:9999px;border:2px solid var(--d-bg-2)}
.pr-sheet h4{color:var(--d-fg);font-size:var(--fs-body);font-weight:600;letter-spacing:-0.02em;margin-bottom:18px}
.set-row{margin-bottom:18px}
.set-lab{display:flex;justify-content:space-between;font-size:var(--fs-micro);font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--d-fg-2);margin-bottom:8px}
.pr-sheet input[type=range]{width:100%;accent-color:var(--d-fg);background:transparent}
.set-toggle{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--d-hair);color:var(--d-fg);font-size:var(--fs-ui);font-weight:500;cursor:pointer}
.set-toggle input{width:20px;height:20px;accent-color:var(--d-fg)}
.pr-sheet .btn{margin-top:14px}
/* Reading colours: curated pairs in the sheet itself, never free colour pickers */
.set-colours{border-top:1px solid var(--d-hair);padding-top:14px}
.pal-row{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 10px}
.pal{width:56px;padding:0;text-align:center;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
.pal-chip{height:44px;border-radius:var(--r-s);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:600;border:1px solid var(--d-hair-2)}
.pal.on .pal-chip{outline:2px solid var(--d-fg);outline-offset:2px}
.pal-name{display:block;font-size:9.5px;color:var(--d-fg-2);margin-top:5px;line-height:1.25;font-weight:500}
.set-note{font-size:var(--fs-micro);color:var(--d-muted);line-height:1.5;margin:0 0 14px}

@media (prefers-reduced-motion: reduce){
  .btn,.row,.pctl{transition:none}
}
/* Rarely-needed header actions live in the "more" menu at every size.
   Install is the exception (Luke, 25 Sept 2026): it sits in the bar with its
   icon so people see it; app.js hides it where installing is not possible. */
#btn-signout{display:none}
#btn-install svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#btn-install{white-space:nowrap}
@media (max-width:560px){#btn-install{padding:0;width:40px;justify-content:center}#btn-install span{display:none}}
#btn-ed-menu{display:none}
/* While editing, the library actions step aside; the editor row has its own */
body.view-editor #btn-import,body.view-editor #btn-new-folder,body.view-editor #btn-new-script,body.view-editor #btn-new-menu,
body.guest.view-editor #btn-guest-share{display:none}
@media (max-width:640px){
  /* editor on phones: hide the brand bar, one calm row, menu for the rest */
  body.view-editor .app-bar{display:none}
  #btn-ed-delete,#ed-folder{display:none}
  #btn-ed-menu{display:flex;flex:0 0 auto}
  .ed-bar{padding:10px 14px;flex-wrap:nowrap}
  .ed-left{gap:8px}
  .ed-right{gap:8px;flex-wrap:nowrap}
  #ed-status{border:none;background:none;padding:0;letter-spacing:normal;text-transform:none;font-size:var(--fs-label);font-weight:500}
  #btn-ed-prompt{padding:11px 16px;font-size:var(--fs-small)}
  .app-bar{padding:10px 14px;gap:8px}
  /* phone script cards: title deck, one-line meta, actions along the
     bottom - buttons must never squeeze the title into "How we ..." */
  .row{flex-wrap:wrap;row-gap:4px}
  .row .txt{flex:1 1 calc(100% - 60px)}
  .row .txt b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
  .row .txt span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px}
  .row-actions{flex:1 1 100%;justify-content:flex-end;gap:12px}
  /* phones: title owns its line, controls sit in a row beneath it */
  .lib-head{flex-wrap:wrap;row-gap:10px;align-items:center}
  .lib-head h2{flex:1 1 100%;flex-wrap:wrap;row-gap:8px}
  .lib-side{width:100%;justify-content:flex-start}
  .lib-side .lib-meta{margin-left:auto}
  /* phones: one clean row - brand, New script, and a "more" menu.
     body.guest selector needed to outrank the guest-mode show rule. */
  #btn-guest-share,body.guest #btn-guest-share,#btn-import,#btn-new-folder{display:none}
  #btn-overflow{display:flex;flex:0 0 auto}
  #btn-new-script{white-space:nowrap}
  .bar-actions{flex-wrap:nowrap;gap:8px}
  #btn-new-script{padding:11px 18px}
  .app-name{min-width:0}
  .container{padding:20px 14px 70px}
  .ed-body{padding:0 16px 50px}
  .ed-float{left:max(4px,env(safe-area-inset-left));gap:6px}
  .ed-fab{width:36px;height:36px}
  .ed-fab svg{width:17px;height:17px}
  .pr-sheet{right:8px;left:8px;width:auto;bottom:88px;max-height:calc(100% - 112px)}
  /* a phone is narrower than the five reading colours want, so they give up a
     little width rather than wrapping one lonely swatch onto a second row */
  .pal-row{gap:8px}
  .pal{width:52px}
  .pr-controls{gap:7px;padding:9px 8px max(10px,env(safe-area-inset-bottom))}
  .pctl{min-width:44px;height:44px;padding:0 10px}
  .pctl svg{width:18px;height:18px}
  .pctl-big{min-width:52px;height:52px}
  .pr-speedchip{min-width:56px;font-size:var(--fs-micro)}
}

/* ================= library: the card grid =================
   Luke's paper-stock direction, signed off from the mockup
   (Drive: miracue-library-paper-v2-2026-08-10.html). Monochrome with a
   texture: page a shade deeper than the sheets, folders and cards raised off
   it by LIFT rather than by tone, no borders (a border says diagram, a shadow
   says object), and figures set in a monospaced face so numbers line up.
   The stock is scoped to the library screen: the editor and the prompter are
   untouched, and the list view keeps exactly the look it has today. */
body.paper{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --stock:#fdfbf7; --folder:#f7f4ec; --folder-tab:#f1ede3;
  /* the app's own light register, restated in paper: every existing control
     (buttons, menus, the select bar, the toast) comes along without a rewrite */
  --l-bg:#eae6dc; --l-surface:#fdfbf7; --l-hair:#e4e0d6;
  --l-fg:#221f1b; --l-fg-2:#4a4640; --l-muted:#8b877f;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}
body.paper .app-bar,body.paper .ed-bar{background:rgba(253,251,247,0.72)}
/* Rows are sheets too, so the list is the same material as the cards: no
   border, a short shadow, and the selected ring rather than an ink outline.
   Both views sit in the same column at the same width, so the switch moves
   the scripts and never the controls above them. */
body.lib-paper .row{background:var(--stock);border-color:transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(45,40,33,.10),0 6px 14px rgba(45,40,33,.065)}
body.lib-paper .row:hover{border-color:transparent;transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 5px rgba(45,40,33,.12),0 14px 28px rgba(45,40,33,.12)}
body.lib-paper .row.on{border-color:transparent;
  box-shadow:0 0 0 2px var(--l-fg),0 2px 5px rgba(45,40,33,.12),0 12px 26px rgba(45,40,33,.13)}
body.lib-paper .row.folder.over{background:var(--l-fg);box-shadow:0 12px 26px rgba(45,40,33,.2)}
body.lib-paper .row .txt span{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:-.02em}
body.lib-paper .folder-ic{background:var(--folder);border-color:transparent}
/* page grain sits under the content, card grain sits inside each card */
body.paper::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grain);opacity:.05;mix-blend-mode:multiply}
body.lib-paper .container{position:relative;z-index:1;max-width:1160px}
body.paper .ed-body{position:relative;z-index:1}

.rowlab{font-size:var(--fs-micro);font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--l-muted);margin:0 0 12px}
.rowlab.scripts{margin-top:26px}
/* The hub, stage 1: a shoot is one card with three doors */
.shoots{display:grid;gap:16px}
.shoot-add{margin-top:12px}
.shoot-add svg{width:18px;height:18px}
.board-empty.shoot-empty{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;padding:16px;text-align:left;cursor:pointer}
.shoot-card{background:var(--l-surface);border-radius:var(--r-s);box-shadow:var(--lift);overflow:hidden}
.shoot-top{display:flex;gap:16px;align-items:center;padding:18px 20px;border-bottom:1px solid var(--l-hair)}
.shoot-top .ico{width:40px;height:40px;border-radius:var(--r-s);background:var(--l-fg);color:var(--l-surface);display:grid;place-items:center;flex:none}
.shoot-top .ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.shoot-top b{font-size:var(--fs-body);font-weight:600;letter-spacing:-.015em;display:block;color:var(--l-fg)}
.shoot-top .meta{font-family:var(--mono);font-size:var(--fs-micro);color:var(--l-muted);letter-spacing:-.02em}
.shoot-top .grow{flex:1;min-width:0}
/* a release form in a project (11 Oct 2026): the shoot card's top alone, the whole card a link */
a.release-card{display:block;text-decoration:none;color:inherit}
.release-card .shoot-top{border-bottom:0}
.release-card:hover .shoot-top,.release-card:focus-visible .shoot-top{background:var(--l-surface-2,#f7f4ec)}
.release-go{display:grid;place-items:center;width:32px;height:32px;flex:none;color:var(--l-muted)}
.release-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.door{display:block;padding:16px 20px;border-right:1px solid var(--l-hair);text-decoration:none;color:inherit;transition:background .2s}
.door:last-child{border-right:0}
.door:hover,.door:focus-visible{background:var(--l-surface-2,#f7f4ec)}
.door b{font-size:var(--fs-ui);font-weight:600;display:block;color:var(--l-fg)}
.door span{font-size:var(--fs-small);color:var(--l-fg-2);display:block;margin-top:2px}
.door i{font-style:normal;font-family:var(--mono);font-size:var(--fs-micro);color:var(--l-muted);display:block;margin-top:6px}
@media (max-width:800px){.doors{grid-template-columns:1fr}.door{border-right:0;border-bottom:1px solid var(--l-hair)}.door:last-child{border-bottom:0}}

/* ---- folders: folder-shaped tiles, one size, their own row ---- */
.folders{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:16px}
.folder-tile{position:relative;height:112px;padding:0 14px 14px;display:flex;flex-direction:column;justify-content:flex-end;
  cursor:pointer;background:var(--folder);border-radius:3px var(--r-s) var(--r-s) var(--r-s);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(45,40,33,.14),0 8px 18px rgba(45,40,33,.11);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .18s}
.folder-tile::before{content:"";position:absolute;left:0;top:-10px;width:62px;height:13px;background:var(--folder-tab);
  border-radius:4px var(--r-s) 0 0;box-shadow:0 -1px 0 rgba(255,255,255,.6) inset}
.folder-tile::after{content:"";position:absolute;inset:0;border-radius:3px var(--r-s) var(--r-s) var(--r-s);pointer-events:none;
  background-image:var(--grain);opacity:.05;mix-blend-mode:multiply}
.folder-tile:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 2px 4px rgba(45,40,33,.12),0 12px 24px rgba(45,40,33,.11)}
.f-name{display:block;font-size:var(--fs-small);font-weight:600;letter-spacing:-0.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f-meta{display:block;font-weight:500;font-size:var(--fs-label);color:var(--l-muted);margin-top:3px}
.f-menu{position:absolute;top:4px;right:4px;width:34px;height:34px;border-radius:var(--pill);display:flex;align-items:center;
  justify-content:center;color:var(--l-muted);opacity:.75}
.f-menu:hover{opacity:1;background:rgba(34,31,27,.06)}
.f-menu svg{width:16px;height:16px}
/* the folder a drag is over inks black, which is also how the open one reads */
/* Folder colour: a user's label, not decoration - the tab takes the colour
   and a small dot repeats it, the paper of the tile stays paper. Six muted
   presets chosen to sit on the stock (Luke, 2026-08-27). v1.1's bookmark
   strip over a paper tab was tried on 28 Aug and reverted the same day: on
   the kept tile shape it did not read as the folder's colour (Luke). */
.folder-tile[data-colour="terracotta"]{--tint:#b7694f}
.folder-tile[data-colour="ochre"]{--tint:#b8975a}
.folder-tile[data-colour="sage"]{--tint:#7f9a7a}
.folder-tile[data-colour="slate"]{--tint:#6e8398}
.folder-tile[data-colour="plum"]{--tint:#8a6a86}
.folder-tile[data-colour="stone"]{--tint:#8b877f}
.folder-tile[data-colour]::before{background:var(--tint)}
.folder-tile .f-dot{position:absolute;top:12px;right:44px;width:9px;height:9px;border-radius:50%;background:var(--tint);display:none}
.folder-tile[data-colour] .f-dot{display:block}
/* In the list the folder icon fills solid in the chosen colour: the tints are muted on purpose, and an outline alone sank into the paper (Luke, 28 Aug) */
.row.folder[data-colour="terracotta"]{--tint:#b7694f}
.row.folder[data-colour="ochre"]{--tint:#b8975a}
.row.folder[data-colour="sage"]{--tint:#7f9a7a}
.row.folder[data-colour="slate"]{--tint:#6e8398}
.row.folder[data-colour="plum"]{--tint:#8a6a86}
.row.folder[data-colour="stone"]{--tint:#8b877f}
.row.folder[data-colour] .folder-ic{color:var(--tint)}
.row.folder[data-colour] .folder-ic svg{fill:var(--tint);stroke:var(--tint)}
.menu .menu-swatches{display:flex;gap:8px;padding:6px 12px 10px}
.menu .swatch-lab{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--l-muted);padding:8px 12px 2px}
.menu .sw{width:24px;height:24px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--c);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 1px 2px rgba(45,40,33,.18)}
.menu .sw.paper{background:var(--folder-tab,#f1ede3);box-shadow:0 0 0 1px var(--l-hair) inset}
.menu .sw.on{outline:2px solid var(--l-fg);outline-offset:2px}
/* A Pro gate: the panel's card in the normal layout, never a modal. */
.pro-gate{background:var(--l-bg);border-radius:var(--r-s);padding:16px 18px 18px;margin:8px 14px 12px}
.pro-gate b{display:block;font-size:var(--fs-small);font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.pro-gate p{font-size:var(--fs-small);color:var(--l-fg-2);line-height:1.5;margin:0 0 12px}
.pro-gate .btn{min-height:38px;padding:8px 16px;font-size:var(--fs-small)}
.wb-panel.gated .shot-add{display:none}
.wb-panel.gated #take-chips .take-add{display:none}
.folder-tile.over{background:var(--l-fg);transform:translateY(-2px) scale(1.02)}
.folder-tile.over::before{background:#151310}
.folder-tile.over .f-name{color:#f7f5f0}
.folder-tile.over .f-meta,.folder-tile.over .f-menu{color:rgba(247,245,240,.65)}

/* ---- scripts: sheets of paper, the card face is the script ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.card{position:relative;display:flex;flex-direction:column;border-radius:var(--r-s);overflow:hidden;cursor:pointer;
  background:var(--stock);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(45,40,33,.10),0 6px 14px rgba(45,40,33,.065);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),opacity .2s}
.card::after{content:"";position:absolute;inset:0;border-radius:var(--r-s);pointer-events:none;
  background-image:var(--grain);opacity:.055;mix-blend-mode:multiply}
.card:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 5px rgba(45,40,33,.12),0 15px 30px rgba(45,40,33,.13)}
.card:focus-visible{outline:2px solid var(--l-fg);outline-offset:3px}
.card .face{padding:18px 18px 6px;font-size:var(--fs-small);line-height:1.5;color:var(--l-fg-2);flex:1;min-height:132px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
.card .foot{padding:13px 14px 13px 16px;border-top:1px solid var(--l-hair)}
.card .foot b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:var(--fs-small);font-weight:600;line-height:1.28;letter-spacing:-0.012em;color:var(--l-fg);margin-bottom:8px}
.card .foot-line{display:flex;align-items:center;gap:8px}
.card .meta{flex:1;min-width:0;font-family:var(--mono);font-size:var(--fs-micro);color:var(--l-muted);letter-spacing:-0.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-acts{display:flex;gap:6px;flex:0 0 auto}
.card-acts .icon-btn{width:36px;height:36px}
.card-acts .icon-btn svg{width:15px;height:15px}
/* The ticks are stamped on the sheet, top right, and the opening line flows
   around them: a float spacer keeps the script's own words clear of the tick
   without stealing width from every line below it. */
.card .done-tick,.card .sel-tick{position:absolute;top:13px;right:13px;z-index:2}
.card .face::before{content:"";float:right;width:34px;height:22px}
.card .done-tick,.card .sel-tick{width:24px;height:24px}
.card .done-tick svg,.card .sel-tick svg{width:12px;height:12px}
@media (pointer:coarse){
  .card-acts .icon-btn{width:44px;height:44px}
  .card .done-tick,.card .sel-tick{width:28px;height:28px}
}
.card.done{opacity:.6}
.card.done:hover{opacity:.9}
.card.on{box-shadow:0 0 0 2px var(--l-fg),0 2px 5px rgba(45,40,33,.12),0 12px 26px rgba(45,40,33,.13)}
body.selecting .card-acts{display:none}

/* the whole grid answers a phone the way the live list already does */
@media (max-width:640px){
  .folders{grid-template-columns:repeat(3,1fr);gap:9px}
  .folder-tile{height:82px;padding:0 10px 10px}
  .folder-tile::before{width:38px;height:9px;top:-7px}
  .f-name{font-size:var(--fs-micro);white-space:normal;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .f-meta{font-size:10px}
  .f-menu{width:30px;height:30px;top:2px;right:2px}
  .cards{grid-template-columns:1fr;gap:12px}
  .card .face{min-height:104px;font-size:var(--fs-label);padding:15px 15px 4px}
  .card .foot{padding:11px 13px 11px 15px}
  body.lib-paper .container{padding-left:14px;padding-right:14px}
}
@media (prefers-reduced-motion: reduce){
  .card,.folder-tile{transition:none}
  .card:hover,.folder-tile:hover{transform:none}
  .card.leaving,.row.leaving{transition:none}
}

/* ---------- search ---------- */
.lib-search{position:relative;display:inline-flex;align-items:center}
.lib-search > svg{position:absolute;left:13px;width:15px;height:15px;color:var(--l-muted);pointer-events:none}
#lib-q{width:190px;border:1px solid var(--l-hair);border-radius:var(--pill);background:var(--l-surface);
  padding:9px 34px 9px 34px;font-size:var(--fs-small);min-height:38px;outline:none;color:var(--l-fg)}
#lib-q::placeholder{color:var(--l-muted)}
/* search, view toggle and Select share one 36px row (board 3b) */
#lib-q{min-height:36px;height:36px;padding-top:0;padding-bottom:0}
.view-toggle{padding:2px}
.view-btn{height:30px;width:38px}
.lib-sort-wrap{padding:0 14px;height:36px}
#lib-q:focus{border-color:var(--l-fg);width:230px}
#lib-q::-webkit-search-cancel-button{display:none}
.q-clear{position:absolute;right:5px;width:28px;height:28px;border-radius:var(--pill);display:flex;align-items:center;
  justify-content:center;color:var(--l-muted)}
.q-clear svg{width:13px;height:13px}
.q-clear:hover{color:var(--l-fg)}
@media (max-width:640px){
  .lib-search{order:-1;flex:1 1 100%}
  #lib-q,#lib-q:focus{width:100%}
}

/* The guest reminder bar: constant while in guest mode, quiet, one line.
   It points at the one thing a guest loses by staying a guest. */
#offline-bar{display:flex;align-items:center;justify-content:center;padding:8px 14px;font-size:var(--fs-small);color:var(--l-fg-2);background:var(--l-surface);border-bottom:1px solid var(--l-hair);text-align:center}
#guest-bar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:8px 14px;font-size:var(--fs-small);color:var(--l-fg-2);background:var(--l-surface);
  border-bottom:1px solid var(--l-hair);text-align:center}
#guest-bar .btn-link{font-size:var(--fs-small);white-space:nowrap}

/* The print chooser sits on the light modal paper; .set-toggle was born on
   the dark prompter sheet and its ink vanished there (Luke's screenshot,
   2026-08-22). Re-ink for the light register. */
#print-modal .set-toggle{color:var(--l-fg);border-top:1px solid var(--l-hair)}
#print-modal .set-toggle:first-of-type{border-top:0}
#print-modal .set-toggle input{accent-color:var(--l-fg)}

/* While the prompter is open, the page behind it is black and pinned. An
   iPad leaving full screen resizes the viewport and could reveal a strip
   of the editor below the prompter (Luke's shoot, 2026-08-24); whatever
   the geometry does, a gap now shows black, not the page behind. */
body.pr-open{background:#000 !important;overflow:hidden !important}
html:has(body.pr-open){background:#000}
/* The app beneath stays laid out (state kept) but cannot paint: Chrome-iPad
   mis-sizes the viewport after the keyboard, and a strip of the editor showed
   under the controls however the root was sized (Luke, 28 Aug, third time). */
body.pr-open #view-app{visibility:hidden}

/* ---------- the account page (2026-08-28) ----------
   A page, not a sheet: six sections down one column with a rail to jump
   between them. Same paper as the library; the rail's last item is the only
   way to the delete sheet, greyed and below a rule. */
.acct.container{max-width:1160px}
.acct-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:34px;align-items:start}
.acct-rail{position:sticky;top:84px}
.acct-rail a{display:block;padding:9px 12px;border-radius:var(--r-s);font-size:var(--fs-small);font-weight:500;color:var(--l-fg-2);text-decoration:none}
.acct-rail a.on{background:var(--l-surface);color:var(--l-fg);box-shadow:var(--lift)}
.acct-rail .rail-danger{margin-top:36px;padding-top:14px;border-top:1px solid var(--l-hair)}
.acct-rail .rail-danger a{color:var(--l-muted);font-weight:400;font-size:var(--fs-small)}
.asec{background:var(--l-surface);border:1px solid var(--l-hair);border-radius:var(--r);padding:22px 24px;margin-bottom:16px;box-shadow:var(--lift);scroll-margin-top:90px}
.asec h3{font-size:var(--fs-body);font-weight:600;letter-spacing:-0.02em;margin-bottom:4px}
.asub{font-size:var(--fs-small);color:var(--l-muted);margin-bottom:16px}
.amuted{font-size:var(--fs-small);color:var(--l-muted)}
.arow{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--l-hair)}
.arow:first-of-type{border-top:0}
.arow .at{flex:1;min-width:0}
.arow .at b{display:block;font-weight:600;font-size:var(--fs-small)}
.arow .at span{font-size:var(--fs-small);color:var(--l-muted)}
.arow .am{font-weight:500;font-size:var(--fs-label);color:var(--l-fg-2);white-space:nowrap;border:1px solid var(--l-hair);border-radius:var(--r-s);padding:2px 8px;background:var(--stock,#f7f4ec)}
.arow .btn{padding:9px 16px;min-height:38px;font-size:var(--fs-small);flex:0 0 auto}
.aprofile{display:flex;gap:18px;align-items:center;margin-bottom:18px}
.aprofile b{font-weight:600}
.avatar{width:64px;height:64px;border-radius:50%;background:var(--l-fg);color:var(--stock,#fdfbf7);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:24px;flex:0 0 auto;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.agrid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.afield span{display:block;font-size:var(--fs-micro);font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--l-muted);margin-bottom:7px}
.afield input{width:100%;border:1px solid var(--l-hair);border-radius:var(--r-s);padding:12px 15px;font-size:var(--fs-ui);background:var(--l-bg);outline:none}
.afield input:focus{border-color:var(--l-fg)}
.afield input[readonly]{color:var(--l-fg-2)}
.aacts{display:flex;align-items:center;gap:12px;margin-top:14px}
.aacts .btn{padding:9px 16px;min-height:38px;font-size:var(--fs-small)}
.aplan{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.aplan .btn{white-space:nowrap}
.aplan .abig{font-size:var(--fs-title);font-weight:600;letter-spacing:-0.02em;line-height:1.1}
.aplan .asmall{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:var(--fs-micro);color:var(--l-muted);letter-spacing:0.06em}
.aplan .spacer{flex:1}
.aplan .btn{padding:9px 16px;min-height:38px;font-size:var(--fs-small)}
#acct-plan-note{margin-top:12px;font-size:var(--fs-label)}
.atrial{margin-top:12px;font-size:var(--fs-small);font-weight:600}
.atrial:not([hidden]) + #acct-plan-note{margin-top:4px}
.seg{display:inline-flex;border:1px solid var(--l-hair);border-radius:var(--pill);padding:3px;gap:2px;flex:0 0 auto}
.seg button{padding:6px 14px;border-radius:var(--pill);font-size:var(--fs-small);font-weight:500;color:var(--l-fg)}
.seg button.on{background:var(--l-fg);color:var(--white)}
.toggle{width:44px;height:26px;border-radius:var(--pill);background:var(--l-hair);position:relative;flex:0 0 auto;transition:background .2s}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--white);transition:transform .2s var(--ease);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.toggle[aria-checked="true"]{background:var(--l-fg)}
.toggle[aria-checked="true"]::after{transform:translateX(18px)}
.acct-danger{margin:30px 4px 0;padding-top:18px;border-top:1px solid var(--l-hair)}
.acct-danger .btn-link{padding-left:0;text-decoration:underline;text-underline-offset:3px}
.dev-list .arow:first-of-type{border-top:1px solid var(--l-hair)}
@media (max-width:820px){
  .acct-grid{display:block}
  .acct-rail{position:static;display:flex;gap:6px;overflow-x:auto;margin:0 -4px 16px;padding:0 4px 6px;scrollbar-width:none}
  .acct-rail::-webkit-scrollbar{display:none}
  .acct-rail a{white-space:nowrap;border:1px solid var(--l-hair);border-radius:var(--pill);padding:7px 12px;font-size:var(--fs-label)}
  .acct-rail a.on{background:var(--l-fg);color:var(--white);border-color:var(--l-fg);box-shadow:none}
  .acct-rail .rail-danger{display:none}
  .asec{padding:18px}
  .agrid2{grid-template-columns:1fr}
}

/* ---------- menus with a head and icons ---------- */
.menu-head{display:flex;align-items:center;gap:12px;padding:10px 12px 12px;border-bottom:1px solid var(--l-hair);margin-bottom:6px;min-width:250px}
.menu-head .avatar{width:40px;height:40px;font-size:15px}
.menu-head b{display:block;font-weight:600;font-size:var(--fs-small);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}
.menu-head .mh-mail{display:block;font-size:var(--fs-label);color:var(--l-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}
.menu-head .pill{display:block;font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:var(--fs-micro);letter-spacing:0.14em;text-transform:uppercase;color:var(--l-muted);margin-top:4px}
.menu-item{display:flex;align-items:center;gap:12px}
.menu-item svg{flex:0 0 auto}
.menu-item small{margin-left:auto;font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:var(--fs-micro);color:var(--l-muted);letter-spacing:0.06em;padding-left:10px}
.acct-chip img{width:100%;height:100%;object-fit:cover;border-radius:var(--pill)}
/* An account signs out from its own menu; the bar's sign-out is the guest's "Sign in" */
body:not(.guest) #btn-signout{display:none}

/* ---------- the bin, at the foot of the library ---------- */
.bin-foot{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px dashed #c9c3b4;border-radius:var(--r-s);color:var(--l-muted);font-size:var(--fs-small);margin-top:14px;cursor:pointer;background:transparent;width:100%;text-align:left}
.bin-foot:hover{border-color:var(--l-muted);color:var(--l-fg-2)}
.bin-foot .icon-btn{width:36px;height:36px;border-style:dashed;color:inherit;background:transparent;pointer-events:none}
.bin-foot b{font-weight:600;color:var(--l-fg-2)}
.bin-foot .k{margin-left:auto;font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:var(--fs-micro);letter-spacing:0.02em;white-space:nowrap}
@media (max-width:640px){.bin-foot .k{display:none}}

/* The nudge: one quiet card below the bin row, at most one moment a session.
   Same paper as every other card - a note from the makers, not a banner. */
.nudge{background:var(--l-surface);border:1px solid var(--l-hair);border-radius:var(--r-s);
  padding:16px 18px;margin-top:14px;max-width:560px;box-shadow:var(--lift)}
.nudge b{font-weight:500;display:block;margin-bottom:4px}
.nudge p{color:var(--l-fg-2);font-size:var(--fs-small);margin:0 0 12px}
.nudge.fading{opacity:0;transition:opacity .6s var(--ease)}
.nudge-chips{display:flex;flex-wrap:wrap;gap:8px}
.nudge-chips button{border:1px solid var(--l-hair);border-radius:var(--pill);padding:6px 13px;
  font-size:var(--fs-small);background:transparent;color:var(--l-fg-2)}
.nudge-chips button:hover{border-color:var(--l-fg-2);color:var(--l-fg)}
.nudge-chips button.skip{border-color:transparent;color:var(--l-muted)}
.nudge-acts{display:flex;gap:16px;align-items:center}
.nudge-note{display:flex;gap:8px;margin-top:2px}
.nudge-note input{flex:1;border:1px solid var(--l-hair);border-radius:var(--r-s);padding:8px 12px;
  font-size:var(--fs-small);background:var(--l-surface)}
#feedback-text{min-height:120px;resize:vertical}
/* The bin holds zero buttons: Restore and Delete now are text, each row
   states its own clock, and Empty the bin sits faint, once, bottom right. */
.bin-row .row-actions{gap:14px}
.btn-link.faint{color:var(--l-muted);text-decoration-color:#ded9cd}
.btn-link.faint:hover{color:var(--l-fg-2)}
.bin-acts{display:flex;justify-content:flex-end;padding:2px 4px}
body.in-bin .lib-search,body.in-bin #lib-view,body.in-bin #btn-select{display:none}
/* On a phone the one-card list keeps to one line per row: tick, title, play,
   dots. The pencil goes - the row itself opens the editor - and the folder
   row keeps its dots and chevron beside the name (board 3c, phone). */
@media (max-width:640px){
  .rows .row{flex-wrap:nowrap;gap:10px;padding:12px 12px 12px 14px}
  .rows .row .txt{flex:1 1 auto;min-width:0}
  .rows .row-actions{flex:0 0 auto;gap:6px;justify-content:flex-end}
  .rows .row .edit-btn{display:none}
  .rows .row .icon-btn{width:40px;height:40px}
  .rows .row .folder-ic{width:40px;height:40px}
  .rows .bin-row{flex-wrap:wrap}
  .rows .bin-row .row-actions{flex:1 1 100%}
}

/* ---------- the tour ---------- */
.modal.tour{width:560px;padding:0;overflow:hidden}
.tour .t-top{padding:22px 28px 0;display:flex;align-items:center;gap:8px}
.tour .dots{display:flex;gap:6px}
.tour .dots i{width:7px;height:7px;border-radius:50%;background:var(--l-hair);display:block}
.tour .dots i.on{background:var(--l-fg)}
.tour .t-top .k{margin-left:auto;font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:var(--fs-micro);letter-spacing:0.16em;text-transform:uppercase;color:var(--l-muted)}
.tour h3{font-size:var(--fs-lead);font-weight:600;letter-spacing:-0.025em;padding:12px 28px 4px;margin:0}
.tour .lede{padding:0 28px 18px;font-size:var(--fs-ui);color:var(--l-fg-2);max-width:50ch;line-height:1.5}
.tour .choices{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:0 28px 22px}
.tour .choice{background:var(--stock,#f7f4ec);border-left:3px solid var(--l-hair);border-radius:2px var(--r-s) var(--r-s) 2px;padding:12px 12px 14px;min-height:110px;text-align:left;color:var(--l-fg)}
.tour .choice.on{border-left-color:var(--l-fg)}
.tour .choice b{display:block;font-weight:600;font-size:var(--fs-small);margin:6px 0 4px}
.tour .choice span{font-size:var(--fs-label);color:var(--l-muted);line-height:1.4;display:block}
.tour .feat{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:0 28px 22px}
.tour .feat div{background:var(--l-bg);border-radius:var(--r-s);padding:12px;min-height:104px}
.tour .feat div.dark{background:var(--d-bg-2,#0a0a0b);color:var(--d-fg)}
.tour .feat div.dark span{color:var(--d-fg-2)}
.tour .feat b{display:block;font-weight:600;font-size:var(--fs-small);margin:8px 0 4px}
.tour .feat span{font-size:var(--fs-label);color:var(--l-muted);line-height:1.4;display:block}
.tour .t-foot{display:flex;align-items:center;gap:12px;padding:14px 28px 20px;border-top:1px solid var(--l-hair);flex-wrap:wrap}
.tour .tick{display:flex;align-items:center;gap:8px;font-size:var(--fs-small);color:var(--l-muted);cursor:pointer}
.tour .tick input{width:16px;height:16px;margin:0;accent-color:var(--l-fg)}
.tour .t-foot .btn{margin-left:auto;padding:10px 20px;min-height:40px}
.tour .t-foot .skip{font-size:var(--fs-small);font-weight:500;color:var(--l-muted);padding:8px 4px}
@media (max-width:640px){.tour .choices,.tour .feat{grid-template-columns:1fr}.tour .choice,.tour .feat div{min-height:0}.tour h3{font-size:var(--fs-lead)}}

/* ---------- prompter, DS v1.1 (2026-08-28) ---------- */
/* the lines already read fade above the reading line; the mark is where the eye is */
.pr-dim{position:absolute;left:0;right:0;top:0;height:var(--pr-zone-top,34%);z-index:2;pointer-events:none;
  background:linear-gradient(to bottom, color-mix(in srgb, var(--pr-bg) 70%, transparent) 0%, color-mix(in srgb, var(--pr-bg) 55%, transparent) 70%, transparent 100%)}
#view-prompter.mirror-v .pr-dim{top:auto;bottom:0;background:linear-gradient(to top, color-mix(in srgb, var(--pr-bg) 70%, transparent) 0%, color-mix(in srgb, var(--pr-bg) 55%, transparent) 70%, transparent 100%)}
.pr-top{padding-top:calc(14px + env(safe-area-inset-top))}
/* speed: one bordered stepper, a mono figure in the middle */
/* a pill, so the stepper sits in the same family as the circles around it (Luke, 28 Aug) */
.pr-speedgroup{display:inline-flex;align-items:center;border:1px solid var(--d-hair-2);border-radius:var(--pill);background:var(--d-s1);overflow:hidden}
.pr-speedgroup .pctl:first-child{padding-left:4px}
.pr-speedgroup .pctl:last-child{padding-right:4px}
.pr-speedgroup .pctl{border:0;border-radius:0;background:transparent;min-width:44px}
.pr-speedgroup .pctl:hover{background:var(--d-s2)}
.pr-speedchip{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--mono,ui-monospace,Menlo,monospace);font-weight:500;letter-spacing:0;min-width:0;padding:0 6px}
/* the SPEED word takes the icons' colour, so it holds up on the light reading palettes too (Luke, 28 Aug) */
.pr-speedlab{font-family:'Geist',-apple-system,system-ui,sans-serif;font-weight:600;font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--d-fg)}
.pr-speedn{font-size:var(--fs-ui);color:var(--d-fg);min-width:1.4ch;text-align:center}
/* the live mic: the button fills and the one legal red dot sits inside it */
#pr-voice{position:relative}
.pr-mic-dot{display:none;position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:#ff453a;box-shadow:0 0 0 2px var(--d-fg)}
#pr-voice.live .pr-mic-dot{display:block;
  transform:scale(calc(1 + var(--mic-level,0)*0.7));
  box-shadow:0 0 0 2px var(--d-fg), 0 0 calc(2px + var(--mic-level,0)*14px) calc(var(--mic-level,0)*5px) rgba(255,69,58,.6);
  animation:rec-pulse 2.6s ease-in-out infinite;transition:transform .08s linear}
@keyframes rec-pulse{0%,100%{opacity:1}50%{opacity:.6}}
@media (prefers-reduced-motion: reduce){
  #pr-voice.live .pr-mic-dot{animation:none;transform:none}
}
/* sliders: the whole row is the target, the track is only the drawing */
.set-lab span:last-child{font-family:var(--mono,ui-monospace,Menlo,monospace);letter-spacing:0;text-transform:none;font-weight:500;font-size:var(--fs-label);color:var(--d-fg)}
.set-ctl{display:flex;align-items:center;gap:8px;height:44px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.set-step{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--d-hair-2);background:var(--d-s1);color:var(--d-fg);display:flex;align-items:center;justify-content:center}
.set-step svg{width:16px;height:16px}
.set-step:hover{background:var(--d-s2)}
.pr-sheet .set-ctl input[type=range]{flex:1;min-width:0;height:44px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;--fill:0%}
.pr-sheet .set-ctl input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right, var(--d-fg) var(--fill), var(--d-hair-2) var(--fill))}
.pr-sheet .set-ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:var(--d-fg);border:0;margin-top:-12px;box-shadow:0 2px 8px rgba(0,0,0,.55)}
.pr-sheet .set-ctl input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--d-hair-2)}
.pr-sheet .set-ctl input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--d-fg)}
.pr-sheet .set-ctl input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--d-fg);border:0;box-shadow:0 2px 8px rgba(0,0,0,.55)}
.pr-sheet.dragging{opacity:.4;transition:opacity .15s}
/* While more sits below the fold the foot of the body fades, so the sheet
   never reads as complete when it is not (Luke's iPad: Reading line ended
   exactly above Done and the rest went unseen). */
.pr-sheet.more .pr-sheet-body{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent)}
.set-row{margin-bottom:10px}
/* phones: one 64px row - exit · speed stepper · play · voice · more */
@media (max-width:640px){
  .pr-controls{flex-wrap:nowrap;justify-content:space-between;gap:6px;height:calc(64px + env(safe-area-inset-bottom));padding:0 10px env(safe-area-inset-bottom)}
  .pr-controls [data-act="top"],.pr-controls [data-act="mirror"],#pr-fs{display:none}
  .pctl{min-width:44px;width:44px;height:44px;padding:0}
  .pctl-big{min-width:56px;width:56px;height:56px}
  .pr-speedgroup .pctl{width:40px;min-width:40px}
  .pr-speedlab{display:none}
  .pr-speedchip{padding:0 4px}
  .pr-sheet{bottom:calc(72px + env(safe-area-inset-bottom))}
}
/* landscape phones (short viewports): the same row, thinner, so the script
   keeps the height; the notch insets sit at the sides, not the bottom. */
@media (max-height:500px) and (orientation:landscape){
  .pr-controls{flex-wrap:nowrap;justify-content:center;gap:8px;height:calc(48px + env(safe-area-inset-bottom));padding:0 max(12px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px,env(safe-area-inset-left))}
  .pr-controls [data-act="top"],.pr-controls [data-act="mirror"]{display:none}
  .pctl{min-width:40px;width:40px;height:40px;padding:0}
  .pctl svg{width:18px;height:18px}
  .pctl-big{min-width:44px;width:44px;height:44px}
  .pr-speedgroup .pctl{width:36px;min-width:36px}
  .pr-speedlab{display:none}
  .pr-speedchip{padding:0 4px;min-width:0}
  .pr-speedn{font-size:var(--fs-small)}
  .pr-top{padding:8px max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
  .pr-sheet{bottom:calc(56px + env(safe-area-inset-bottom));max-height:calc(100% - 64px);padding:16px}
}

/* ================= the editor after boards 1g/1h =================
   One toolbar (back · title · folder · Start prompter · ⋯), the brand bar
   gone while editing. The sheet holds only the script; its title lives in
   the toolbar. The shoot rail is anchored to the right edge at full height
   with a hairline on its left, ink-underline tabs, and Print at its foot.
   Under 900px the rail becomes a drawer above a pinned Start prompter. */
body.view-editor .app-bar{display:none}
.ed-bar{flex-wrap:nowrap;padding:10px 24px;min-height:64px}
.ed-left,.ed-right{flex:0 0 auto;flex-wrap:nowrap}
/* the title always keeps its room; the status and presence chips give way */
.ed-left{flex:0 1 auto;min-width:0}
#ed-status,#ed-presence{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto;min-width:0}
.ed-bar .ed-title{flex:1 1 40%;min-width:120px}
.ed-bar .ed-title{flex:1 1 auto;min-width:0;width:auto;font-size:var(--fs-body);font-weight:600;letter-spacing:-.02em;margin:0;
  padding:8px 10px;border-radius:var(--r-s);border:1px solid transparent;background:transparent;color:var(--l-fg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-bar .ed-title:hover{background:rgba(34,31,27,.04)}
.ed-bar .ed-title:focus{background:var(--l-surface);border-color:var(--l-hair);text-overflow:clip}
.ed-body,body.view-editor .ed-body{max-width:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:0;align-items:stretch}
.ed-col{min-width:0;padding:26px 24px 70px;display:flex;justify-content:center;align-items:flex-start}
.ed-doc{width:100%;max-width:820px}
.ed-work,body:not(.paper) .ed-work{position:static;top:auto;background:#f7f4ec;border:0;border-left:1px solid var(--l-hair);border-radius:0;
  box-shadow:none;overflow:visible;align-self:stretch;min-height:calc(100vh - 64px)}
.wb-inner{position:sticky;top:var(--head-h);display:flex;flex-direction:column;height:calc(100vh - var(--head-h));overflow-y:auto}
.wb-tabs{background:transparent;border-bottom:1px solid var(--l-hair);padding:0 16px;gap:18px;flex:0 0 auto;align-items:center}
.wb-tab,.wb-tab:hover{padding:12px 2px;border-radius:0;min-height:46px;color:var(--l-muted);background:transparent}
.wb-tab:hover{color:var(--l-fg-2)}
.wb-tab[aria-selected="true"]{background:transparent;color:var(--l-fg);box-shadow:inset 0 -2px 0 var(--l-fg)}
.wb-tab .n,.wb-tab[aria-selected="true"] .n{border:0;padding:0;min-width:0;font-size:var(--fs-micro);letter-spacing:0;color:inherit}
.wb-collapse{display:none}
.wb-panel.open{flex:1 1 auto}
.wb-foot{margin-top:auto;padding:12px 16px;border-top:1px solid var(--l-hair);flex:0 0 auto}
body.guest .wb-foot{display:none}
/* the sheet's footer is a ruled mono line; nothing in it wraps */
.ed-meta{font-size:var(--fs-micro);gap:16px}
.ed-meta span{white-space:nowrap}
@media (max-width:900px){
  .ed-body,body.view-editor .ed-body{grid-template-columns:1fr}
  .ed-col{padding:16px 16px calc(150px + env(safe-area-inset-bottom))}
  #ed-folder{display:none}
  /* Start prompter: a full-width 48px bar action pinned above the home
     indicator - on set, the button a thumb finds (board 1h). The toolbar's
     backdrop blur would make IT the containing block for a fixed child (the
     button then sat under the toolbar), so under 900px the bar is solid. */
  .ed-bar,body.paper .ed-bar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--l-bg)}
  /* The whole split travels to the bottom as one bar: main start flexes,
     the phone keeps its end seat (both at the top OR both at the bottom,
     never split across - Luke, 3 Sept). */
  .ed-split{position:fixed;left:0;right:0;bottom:0;z-index:62;display:flex}
  #btn-ed-prompt{position:static;flex:1;height:calc(48px + env(safe-area-inset-bottom));
    padding:0 0 env(safe-area-inset-bottom);border-radius:0;font-size:var(--fs-ui)}
  .ed-call-seg{height:calc(48px + env(safe-area-inset-bottom));padding:0 24px;
    padding-bottom:env(safe-area-inset-bottom);border-radius:0}
  /* the workbench is a drawer above it; the tab strip is the handle */
  .ed-work,body:not(.paper) .ed-work{position:fixed;left:0;right:0;bottom:calc(48px + env(safe-area-inset-bottom));z-index:61;min-height:0;
    border:0;border-top:1px solid var(--l-hair);background:var(--l-surface);box-shadow:0 -8px 24px rgba(45,40,33,.08)}
  .wb-inner{position:static;height:auto;max-height:none;overflow:visible}
  .ed-work .wb-panel{display:none}
  .ed-work.drawer-open .wb-panel.open{display:block;max-height:min(60vh,520px);overflow-y:auto;overscroll-behavior:contain}
  .ed-work .wb-foot{display:none}
  .ed-work.drawer-open .wb-foot{display:flex}
  body:not(.guest) .ed-work.drawer-open .wb-foot{display:flex}
  .ed-work.solo .wb-tabs{display:flex}
  .wb-tabs{padding:0 8px 0 16px}
  .wb-collapse{display:flex;margin-left:auto;width:36px;height:36px;align-items:center;justify-content:center;color:var(--l-muted);border-radius:var(--r-s)}
  .wb-collapse svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
  .ed-work.drawer-open .wb-collapse svg{transform:rotate(180deg)}
  .ed-float{bottom:calc(109px + env(safe-area-inset-bottom))}
  /* the drawer has its own Add a chapter; the floating pair steps aside while it is open */
  body.drawer-open .ed-float{display:none}
}
@media (max-width:640px){
  .ed-bar{min-height:56px;padding:6px 10px 6px 6px;gap:6px}
  .ed-bar .ed-title{font-size:var(--fs-ui);padding:8px 6px}
  #btn-ed-back{white-space:nowrap;flex:0 0 auto}
  #ed-status,#ed-presence{max-width:110px;padding:6px 10px;letter-spacing:.08em}
}

/* ================= phase 4: account, menus, tour, sheets, import =================
   Boards 1c-1f and 3e-3g of Claude Design's review (28 Aug). */
/* menus: 280 wide, 44px rows, radius 10, icons 18px in a fixed column */
.menu{width:280px;min-width:280px}
.menu-item svg{width:18px;height:18px;flex:0 0 18px;stroke-width:1.5}
/* the account rail is a jump nav: the active item carries a 3px ink spine */
.acct-rail a{display:flex;align-items:center;min-height:36px;padding:0 12px;border-radius:2px var(--r-s) var(--r-s) 2px;border-left:3px solid transparent;box-shadow:none}
.acct-rail a.on{background:#f7f4ec;color:var(--l-fg);border-left-color:var(--l-fg);box-shadow:none}
/* sign-in and preferences are row cards */
.asec.rowcard{padding:8px 24px 6px}
.rowcard h3{padding-top:14px}
.rowcard .asub{margin-bottom:10px}
.rowcard .arow{padding:16px 0}
.rowcard .arow:first-of-type{border-top:1px solid var(--l-hair)}
.rowcard #acct-pw-form{padding:0 0 16px}
.arow .btn-link{flex:0 0 auto}
#acct-name-save[hidden]{display:none}
.aplan .asmall{margin-top:6px}
@media (max-width:820px){
  .acct-rail{position:sticky;top:0;z-index:5;background:var(--l-bg);padding:8px 4px;margin:0 -4px 12px}
  .acct-rail a{min-height:44px;border-left:0;border-radius:var(--pill);padding:0 14px}
  .acct-rail a.on{background:var(--l-fg);color:var(--white);border-color:var(--l-fg)}
  .asub{display:none}
  .afield input{min-height:44px}
  .asec.rowcard{padding:4px 18px 2px}
}
/* the tour: one 440px sheet, a mono kicker and four dashes, a real tick box */
.modal.tour{width:440px;border-radius:var(--r-s)}
#tour-modal.modal-back{background:rgba(34,31,27,.25)}
.tour .t-top{padding:20px 24px 0;gap:10px}
.tour .dashes{display:flex;gap:4px;margin-left:auto}
.tour .dashes i{width:16px;height:2px;background:var(--l-hair);display:block}
.tour .dashes i.on{background:var(--l-fg)}
.tour .t-top .k{margin-left:0;color:var(--l-muted)}
.tour h3{font-size:var(--fs-lead);padding:10px 24px 4px}
.tour .lede{padding:0 24px 16px;font-size:var(--fs-small)}
.tour .lede a{color:var(--l-fg-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#c9c3b4}
.tour .choices,.tour .feat{grid-template-columns:1fr;gap:8px;padding:0 24px 20px}
.tour .choice{display:flex;align-items:center;gap:12px;min-height:0;padding:10px 12px}
.tour .choice svg,.tour .feat svg{width:18px;height:18px;flex:0 0 18px;stroke-width:1.5}
.tour .choice b{margin:0 0 2px}
.tour .feat div{display:flex;align-items:flex-start;gap:12px;min-height:0;padding:10px 12px}
.tour .feat svg{margin-top:2px}
.tour .feat b{margin:0 0 2px}
/* the icon, then the name over its words: every description starts on the same edge (gap review G10) */
.tour .feat div{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:12px;row-gap:0;align-items:start}
.tour .feat div span{grid-column:2}
.tour .t-foot{padding:12px 24px 18px;gap:10px}
.tour .tick input{width:18px;height:18px;border-radius:5px}
.tour .t-foot .back{margin-left:auto}
.tour .t-foot .btn{margin-left:0;padding:0 18px;min-height:40px}
.tour .t-foot .tick + .btn{margin-left:auto}
/* one footer row: the opt-outs stack on the left, Back and the primary stay together on the right */
.tour .t-foot{flex-wrap:nowrap}
.tour .t-opt{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:0;flex:1 1 auto;min-width:0}
.tour .t-opt .btn-link{padding-left:0}
.tour .t-foot .back{margin-left:0;flex:0 0 auto}
.tour .t-foot .btn{flex:0 0 auto;white-space:nowrap}
/* the element a step describes stays lit: the dim is one huge shadow around a hole */
#tour-modal.modal-back{background:transparent}
.tour-hole{position:fixed;top:0;left:0;width:0;height:0;border-radius:var(--r-s);box-shadow:0 0 0 9999px rgba(34,31,27,.25);pointer-events:none;z-index:0}
.modal.tour{position:relative;z-index:1}
@media (max-width:640px){
  #tour-modal.modal-back{align-items:flex-end;padding:0}
  .modal.tour{width:100%;max-width:100%;border-radius:var(--r-s) var(--r-s) 0 0;border-bottom:0}
}
/* the device chooser: the count beside the title, 36px secondaries, no primary */
.h-stamp{display:inline-block;font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--l-muted);margin-left:8px;vertical-align:middle;font-weight:500}
#devices-modal .arow .btn{min-height:36px;padding:0 14px;font-size:var(--fs-small)}
/* the delete sheet: the destructive act gets the least ink, and none until the email matches */
#account-del-go{margin-left:auto}
#account-del-go:disabled{opacity:.4;cursor:default}
#delete-modal .modal-actions{gap:14px}
/* the import dialog */
.import-choose{min-height:36px;padding:0 14px;font-size:var(--fs-small)}
.import-formats{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:var(--fs-micro);letter-spacing:.06em;color:var(--l-muted);white-space:nowrap}
.import-tidy{border-top:1px solid var(--l-hair);padding-top:12px;margin-top:18px;text-align:left}
.modal-right{display:flex;gap:10px;margin-left:auto;align-items:center}
.import-item{align-items:center}
.import-item label{display:flex;align-items:center;gap:10px;min-width:0;flex:1;cursor:pointer}
.import-item input{width:18px;height:18px;margin:0;accent-color:var(--l-fg);flex:0 0 18px}
.import-item.off b{color:var(--l-muted);text-decoration:line-through}

/* Your data (board 5a) */
.stamp-line{display:block;font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:var(--fs-micro);letter-spacing:.04em;color:var(--l-muted);margin-top:3px}
#acct-export{min-height:36px;padding:0 14px;font-size:var(--fs-small)}
#acct-export.busy,#acct-plan-btn.busy{opacity:.6;pointer-events:none}
#acct-refund .at span{display:block;font-size:var(--fs-label);color:var(--l-muted);margin-top:2px}
.acct-data-what{padding:12px 0 10px;border-top:1px solid var(--l-hair);line-height:1.55}

/* Phones: the app bar is solid, not frosted. Chrome for Android can leave a
   sticky backdrop-filter layer sitting over the page after a scroll, and
   every tap beneath it dies until a reload (Luke's Oppo, 2026-08-29; the
   editor bar went solid under 900px for a related reason). */
@media (max-width:640px){
  .app-bar,body.paper .app-bar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--l-bg)}
}

/* ------------------------------------------------ call mode (v0.39) ---- */
/* the compact rail: no mirror, no full-screen on a call. The mic stays -
   voice follow earned its rail seat on real calls (Luke, 3 Sept). */
.pr-call [data-act="mirror"],.pr-call #pr-fs{display:none}
.pr-pin-note{font-size:var(--fs-micro);font-weight:600;opacity:.65;margin-left:6px}
/* pinned: the floating window keeps speed, chapters, the sheets and unpin -
   clicking the words is play/pause, so no play button pays rent here */
.pr-pinned [data-act="exit"],.pr-pinned [data-act="play"],.pr-pinned [data-act="top"]{display:none}
.pr-pinned .pr-chapters{display:none}
/* The controls take the reading palette's colours, like the chapter buttons
   and the eyeline, so on Ink on cream they are dark on light rather than
   light on light (Luke, 25 Sept 2026: the pinned bar was invisible). */
#view-prompter .pr-controls{background:color-mix(in srgb, var(--pr-bg) 72%, transparent);border-top-color:color-mix(in srgb, var(--pr-ink) 12%, transparent)}
#view-prompter .pctl:not(.pctl-edge){color:var(--pr-fg);background:color-mix(in srgb, var(--pr-fg) 8%, var(--pr-bg));border-color:color-mix(in srgb, var(--pr-ink) 22%, transparent)}
#view-prompter .pctl:not(.pctl-edge):hover{background:color-mix(in srgb, var(--pr-fg) 15%, var(--pr-bg))}
#view-prompter .pctl.pctl-big:not(.pctl-edge),#view-prompter .pctl.active:not(.pctl-edge){background:var(--pr-fg);border-color:var(--pr-fg);color:var(--pr-bg)}
#view-prompter .pr-speedgroup{background:color-mix(in srgb, var(--pr-fg) 8%, var(--pr-bg));border-color:color-mix(in srgb, var(--pr-ink) 22%, transparent)}
#view-prompter .pr-speedgroup .pctl{background:transparent}
#view-prompter .pr-speedgroup .pctl:hover{background:color-mix(in srgb, var(--pr-fg) 15%, var(--pr-bg))}
#view-prompter .pr-speedlab,#view-prompter .pr-speedn{color:var(--pr-fg)}
#view-prompter .pr-mic-dot{box-shadow:0 0 0 2px var(--pr-bg)}
#view-prompter.pr-pinned .pr-top,#view-prompter.pr-pinned .pr-controls{border-color:color-mix(in srgb, var(--pr-ink) 12%, transparent)}
.pin-chap{display:none}
.pr-pinned.pr-haschaps .pin-chap{display:flex}
.pip-body{margin:0;background:#000;overflow:hidden}
.pr-pinned .pr-top{padding:8px 12px;background:var(--pr-bg,#000);border-bottom:1px solid rgba(255,255,255,.09);z-index:6}
.pr-pinned .pr-scroll{top:38px;bottom:60px}
.pr-pinned .pr-controls{gap:8px;padding:8px 10px 10px;background:var(--pr-bg,#000);border-top:1px solid rgba(255,255,255,.09)}
.pr-pinned .pctl{min-width:38px;height:38px;padding:0 9px}
/* the editor's split start button */
.ed-split{display:flex}
.ed-split #btn-ed-prompt{border-top-right-radius:0;border-bottom-right-radius:0}
@media (min-width:901px){.ed-split:has(#btn-ed-call[hidden]) #btn-ed-prompt{border-top-right-radius:var(--r-s);border-bottom-right-radius:var(--r-s)}}
.ed-call-seg{border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid rgba(255,255,255,.28);padding:0 13px;display:flex;align-items:center}
/* the library phone: nothing at rest, a circle under the hovering hand */
.call-btn{display:none}
@media (hover:hover){
  .card:hover .call-btn,.row:hover .call-btn{display:inline-flex;align-items:center;justify-content:center}
}
/* the pinned tab shows a stand-in, not a void */
#pin-standin{position:fixed;inset:0;z-index:60;background:var(--d-bg-2);display:flex;align-items:center;justify-content:center;padding:24px}
.standin-card{max-width:380px;text-align:center;color:var(--d-fg)}
.standin-chip{display:inline-block;border:1px solid var(--d-hair-2);border-radius:var(--pill);background:var(--d-s2);font-size:10px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;margin-bottom:14px}
.standin-card h3{font-size:var(--fs-lead);margin:0 0 8px}
.standin-card p{font-size:var(--fs-small);color:var(--d-fg-2);line-height:1.55;margin:0 0 18px}
/* small windows: the sheet stops shouting (a docked or pinned window is tiny) */
@media (max-width:520px){
  .pr-sheet h4{font-size:var(--fs-small)}
  .pr-sheet .set-lab{font-size:10px;margin-bottom:5px}
  .pr-sheet .set-toggle{padding:8px 0;font-size:var(--fs-small)}
  .pr-sheet .set-note{font-size:var(--fs-micro)}
}

.set-nav{width:100%;background:none;color:inherit;border-left:0;border-right:0;border-bottom:0;font-family:inherit;font-size:var(--fs-ui);font-weight:500;text-align:left;cursor:pointer;margin-top:12px}

/* ---- editable surfaces announce themselves (Luke, 6 Sept 2026, carried
   over from the tool page's field design): a visible edge, an answer on
   hover, a full ring while writing. ---- */
body.paper .ed-doc{border:1px solid var(--l-hair)}
body.paper .ed-doc:hover{border-color:var(--l-muted)}
.ed-doc:focus-within{outline:2px solid var(--l-fg);outline-offset:3px;border-radius:var(--r)}
.ed-bar .ed-title:focus-visible{outline:2px solid var(--l-fg);outline-offset:1px}
.modal input:focus-visible{outline:2px solid var(--l-fg);outline-offset:2px}
@media print{.ed-doc{border:none !important;outline:none !important}}


/* The import modal with a file held over it. A dashed ring inset into the
   modal rather than a filled panel, because you drop a second file onto a
   modal that is already showing a split and the preview has to stay readable. */
#import-modal.dropping .modal{outline:2px dashed var(--l-fg);outline-offset:-8px}
#import-modal.dropping .import-formats{color:var(--l-fg)}

/* "Sent to you by Luke · Send it back", above a guest script that arrived by
   share. A strip, not a card: it is a fact about the script, not a control
   panel, and it must not push the title row around. */
.ed-from{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:10px 18px;font-size:var(--fs-label);color:var(--l-muted);border-bottom:1px solid var(--l-hair);background:var(--l-surface)}
.ed-from-who{flex:1 1 260px}
/* The one thing a sent script asks of its reader is to be sent back, so the
   button is a real button at full size, not a link in the small print. */
.ed-from .btn{flex:none;min-width:200px;padding:11px 20px;font-size:var(--fs-ui)}
@media (max-width:640px){.ed-from .btn{width:100%}}
/* the live link strip: a fact and a small button, not the send-back call to action */
.ed-from-live .btn{min-width:0;padding:8px 14px;font-size:var(--fs-small)}
@media (max-width:640px){.ed-from-live .btn{width:auto}}

/* ---------- what changed, on the offer card (2026-09-16) ----------
   Luke asked to see which part of a returned script was edited. The system
   bans colour, so the marks are the ones this app already uses elsewhere:
   line-through in muted ink for what went (the same mark as a done row and a
   skipped import), and full ink with an underline for what arrived. Neither
   relies on hue, so it reads the same to anyone.
   The panel is capped and scrolls itself; .modal has no max-height and
   .modal-back no overflow, so capping the modal would put the buttons off
   screen on a short window. */
.modal.wide{width:560px}
.offer-sum{font-size:var(--fs-small);color:var(--l-muted);margin:2px 0 4px}
.offer-sum b{font-family:var(--mono,ui-monospace,Menlo,monospace);font-weight:500;color:var(--l-fg);font-size:var(--fs-label)}
.offer-diff{max-height:240px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;
  border:1px solid var(--l-hair);border-radius:var(--r-s);padding:12px 14px;margin:10px 0 2px;
  background:var(--l-bg);font-size:var(--fs-small);line-height:1.65;white-space:pre-wrap;word-break:break-word}
.offer-diff ins{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px;
  color:var(--l-fg);font-weight:500;background:color-mix(in srgb, var(--l-fg) 7%, transparent);border-radius:var(--r-s)}
.offer-diff del{text-decoration:line-through;text-decoration-color:var(--l-muted);color:var(--l-muted)}
.offer-diff .diff-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Call mode scales its chrome with the window (27 Sept 2026): --call-ui is
   set by prompter.js from the window size, pinned or not. The control bar is
   see-through, a fade over the words with ghost buttons rather than a solid
   block, and the settings sheet sits between the top and the controls,
   shrunk to fit and scrolling inside. */
/* Zoom the contents, not the bars: a zoomed bottom-anchored bar slid off the window. */
#view-prompter.pr-call .pr-controls > *,#view-prompter.pr-call .pr-top > *{zoom:var(--call-ui,1)}
#view-prompter.pr-call .pr-controls{padding-bottom:calc(10px * var(--call-ui,1));padding-left:8px;padding-right:8px}
#view-prompter.pr-call .pr-controls{background:linear-gradient(to top,color-mix(in srgb,var(--pr-bg) 88%,transparent) 45%,transparent);
  border-top:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding-top:18px}
#view-prompter.pr-call .pr-controls .pctl:not(.pctl-edge):not(.pctl-big),
#view-prompter.pr-call .pr-controls .pr-speedgroup{background:color-mix(in srgb,var(--pr-bg) 35%,transparent);border-color:color-mix(in srgb,var(--pr-ink) 20%,transparent)}
#view-prompter.pr-call .pr-top{background:transparent;border-bottom:0}
#view-prompter.pr-call .pr-sheet{zoom:var(--call-ui,1);left:8px;right:8px;width:auto;max-width:none;
  top:calc(8px / var(--call-ui,1));bottom:calc(72px / var(--call-ui,1));max-height:none;padding:18px 18px 14px}
#view-prompter.pr-call .pr-sheet h4{margin-bottom:12px}
#view-prompter.pr-call .set-row{margin-bottom:12px}
#view-prompter.pr-pinned .pr-scroll{top:calc(38px * var(--call-ui,1));bottom:calc(60px * var(--call-ui,1))}

/* The script box with a little formatting (1 Oct 2026, js/richtext.js) */
.ed-text.rt{white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;outline:none;cursor:text}
.ed-text.rt.rt-empty::before{content:attr(data-placeholder);color:var(--ink-3);pointer-events:none;float:left;height:0}
.rt-b{font-weight:700}
.rt-i{font-style:italic}
.rt-c-red{color:#C62828}.rt-c-orange{color:#B45309}.rt-c-green{color:#1E7B45}.rt-c-blue{color:#1F5FBF}.rt-c-purple{color:#7B3FB8}
.font-serif{font-family:Georgia,'Times New Roman',serif}
.font-wide{font-family:Verdana,Tahoma,'DejaVu Sans',sans-serif;letter-spacing:.01em}
.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ed-fmt{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.ed-fmt.off{opacity:.45;pointer-events:none}
.fmt-btn{width:36px;height:36px;border:0;border-radius:var(--r-s);background:transparent;color:var(--ink);font-size:var(--fs-ui);cursor:pointer;display:grid;place-items:center}
.fmt-btn:hover{background:var(--calm-2)}
.fmt-btn[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.fmt-btn i{font-family:Georgia,serif;font-size:17px}
.fmt-sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.fmt-dots{display:flex;align-items:center;gap:2px}
.fmt-dot{position:relative;width:28px;height:36px;border:0;background:none;cursor:pointer;padding:0}
.fmt-dot::before{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:currentColor;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.fmt-dot[data-colour=""]{color:var(--ink)}
.fmt-dot[data-colour=""]::before{background:var(--white);box-shadow:inset 0 0 0 1.5px var(--field-edge)}
.fmt-dot[aria-pressed="true"]::before{box-shadow:0 0 0 2px var(--white),0 0 0 3.5px var(--ink)}
.fmt-pick select{height:36px;border:1px solid var(--field-edge);border-radius:var(--r-s);background:var(--white);color:var(--ink);font:inherit;font-size:var(--fs-small);padding:0 8px;cursor:pointer}
@media print{.ed-fmt{display:none!important}}
/* Formatting on the glass: bright tones on the dark palettes, deep ones on cream and sand */
.pr-text .rt-c-red{color:#FF7A7A}.pr-text .rt-c-orange{color:#FFB25B}.pr-text .rt-c-green{color:#63DB94}.pr-text .rt-c-blue{color:#7DB2FF}.pr-text .rt-c-purple{color:#C8A2FF}
.pr-light .pr-text .rt-c-red{color:#C62828}.pr-light .pr-text .rt-c-orange{color:#B45309}.pr-light .pr-text .rt-c-green{color:#1E7B45}.pr-light .pr-text .rt-c-blue{color:#1F5FBF}.pr-light .pr-text .rt-c-purple{color:#7B3FB8}
.pr-text .rt-b{font-weight:800}
/* The start card (option A, 1 Oct 2026): centred in the space above the reading line */
.pr-start{position:absolute;left:50%;top:calc(var(--pr-zone-top,34%) / 2 + 12px);transform:translate(-50%,-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:8px;max-width:min(80%,760px);text-align:center;color:var(--pr-fg);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;pointer-events:none;opacity:1;transition:opacity .3s ease}
.pr-start.gone{opacity:0}
.pr-start-k{font-size:var(--fs-label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.5}
.pr-start b{font-size:clamp(20px,2.4vw,30px);font-weight:600;line-height:1.2;overflow-wrap:anywhere}
.pr-start-i{font-size:var(--fs-ui);opacity:.6}
.pr-start-h{font-size:var(--fs-ui);opacity:.8;margin-top:10px}
.pr-start kbd{font:inherit;border:1px solid currentColor;border-radius:var(--r-s);padding:3px 9px;margin-right:6px;opacity:.9}
/* A font on the selected words (1 Oct 2026) */
.rt-f-serif{font-family:Georgia,'Times New Roman',serif}
.rt-f-wide{font-family:Verdana,Tahoma,'DejaVu Sans',sans-serif}
.rt-f-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
/* The first dot is the default colour: ink here, the palette's own on the glass */
.fmt-dot[data-colour=""]::before{background:var(--ink);box-shadow:none}