/* © 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:16px; 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:8px;font-weight:600;font-size:14px;
  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:#fff}
.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:14px;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:4px}
.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:8px 0 0 8px}
.split .split-arrow{border-radius:0 8px 8px 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:8px}
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:12px;padding:40px 40px 32px;width:400px;max-width:100%;text-align:center;box-shadow:var(--lift)}
.login-card h1{font-size:32px;font-weight:700;letter-spacing:-0.035em;margin-bottom:6px}
.login-card .byline{font-size:14px;color:var(--l-muted);margin-bottom:28px}
.f-label{display:block;text-align:left;font-size:12px;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:8px;padding:0 16px;min-height:44px;font-size:16px;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:20px}
.login-sent{font-size:14px;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:12px;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. */
.login-google{margin-top:14px;text-decoration:none}
.login-error{color:var(--l-fg);font-size:14px;font-weight:500;margin:-6px 0 12px}
.login-foot{font-size:13px;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:16px;letter-spacing:-0.02em;display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.app-name small{font-size:12.5px;color:var(--l-muted);font-weight:500}
.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:24px;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}
/* 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:13.5px;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:16px;
  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:16px;letter-spacing:-0.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .txt span{font-size:13.5px;color:var(--l-muted)}
.row-actions{display:flex;gap:10px;align-items:center}
.row-actions .btn{padding:10px 18px;font-size:13.5px}
.icon-btn{width:44px;height:44px;border-radius:9999px;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:#fff}
/* 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:9999px;border:0;background:var(--l-fg);
  color:var(--stock,#fdfbf7);font-weight:600;font-size:14.5px;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:12px;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:#fff}
.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:12px;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:#fff}
.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:12px;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:9999px;background:var(--l-surface);padding:9px 14px}
.lib-sort-label{font-size:13.5px;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:13.5px;min-height:36px}
.view-toggle{display:inline-flex;border:1px solid var(--l-hair);border-radius:9999px;background:var(--l-surface);padding:3px}
.view-btn{width:40px;height:34px;border-radius:9999px;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:#fff}
#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:10px;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:13.5px;font-weight:600;white-space:nowrap;color:#fff;margin-right:6px}
.select-actions{display:flex;gap:2px;flex-wrap:wrap;justify-content:center}
.sel-act{font-size:13.5px;font-weight:500;color:inherit;padding:0 12px;min-height:36px;border-radius:7px;white-space:nowrap}
.sel-act:hover{background:rgba(255,255,255,.1);color:#fff}
.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:#fff}
/* 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:#fff}
.row.folder.over .folder-ic{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}

/* 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:12px;overflow:hidden;
  box-shadow:0 14px 34px rgba(29,29,31,0.24)}
.dg-face{padding:12px 14px 0;font-size:12.5px;line-height:1.45;color:var(--l-fg-2);max-height:62px;overflow:hidden}
.dg-title{padding:10px 14px 12px;font-size:13px;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:9999px;
  background:var(--l-fg);color:#fff;font-size:12.5px;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:11.5px;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 */
.menu{position:absolute;z-index:180;background:var(--l-surface);border:1px solid var(--l-hair);border-radius:10px;
  box-shadow:0 4px 16px rgba(29,29,31,0.10);min-width:280px;padding:6px}
.menu-item{display:block;width:100%;text-align:left;font-size:14.5px;font-weight:500;padding:0 12px;border-radius:8px;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}
.modal select{width:100%;border:1px solid var(--l-hair);border-radius:12px;padding:12px 15px;font-size:16px;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:12px;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:9999px;padding:6px 14px}
.ed-select{border:1px solid var(--l-hair);border-radius:9999px;background:var(--l-surface);font-size:14px;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:13px;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:12px;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:14px;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:27px;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:17px;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:11.5px;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}
#btn-ed-delete{display:none !important}
#btn-ed-menu{display:flex !important;flex:0 0 auto}

.modal-text{font-size:15px;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:14px;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:13.5px;font-weight:500;color:var(--l-muted);
  padding:10px 14px;border-radius:9px 9px 0 0;min-height:44px;white-space:nowrap}
.wb-tab .n{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:10.5px;letter-spacing:-.02em;
  border:1px solid var(--l-hair);border-radius:9999px;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:13px;line-height:1.55;color:var(--l-muted);padding:10px 18px 6px}
.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:#fff}
.shot .s-tick svg{width:13px;height:13px}
.shot input{flex:1;border:none;background:transparent;outline:none;font-size:15px;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:15px;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:12.5px;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:14px;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:#fff}
.take .vmark{display:none;position:absolute;right:-4px;top:-4px;width:18px;height:18px;border-radius:50%;
  background:var(--l-fg);color:#fff;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:12px;padding:10px 14px;font-size:15px;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:18px;font-weight:600;font-variant-numeric:tabular-nums;min-width:56px}
.meter{flex:1;height:6px;border-radius:3px;background:var(--l-bg);overflow:hidden;min-width:60px}
.meter i{display:block;height:100%;width:0%;background:var(--l-fg);border-radius:3px;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:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pbtn svg{width:18px;height:18px;fill:#fff;stroke:none}
.ptime{font-size:13px;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:3px;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:12.5px;font-weight:600;border:1px solid var(--l-hair);border-radius:9999px;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:13.5px}
.tr-status{font-size:13.5px;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{display:none}
@media print{
  @page{margin:16mm 15mm}
  body{background:#fff;color:#000;font-weight:400}
  .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 what-to-print choices, set as body classes by the print dialog. */
  body.print-no-script .ed-title,body.print-no-script #print-body{display:none !important}
  body.print-no-script #shot-sec{break-before:auto;page-break-before:auto}
  body.print-no-shots #shot-sec{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-title{border:none;font-size:20pt;color:#000;padding-bottom:6pt;margin-bottom:10pt;break-after:avoid;page-break-after:avoid}
  .ed-text{display:none !important}
  #print-body{display:block;white-space:pre-wrap;color:#000;font-size:11.5pt;line-height:1.55;font-weight:400}
  .ed-meta{display:none}
  /* Paper prints as paper: the script, then the shot list on its own sheet.
     Takes and marks are working notes and do not belong on set. */
  .ed-work{position:static;background:none;box-shadow:none;border:0;overflow:visible}
  .wb-tabs,#take-sec,#bm-sec,.wb-empty{display:none !important}
  #shot-sec{display:block !important;border:1px solid #999;border-radius:6pt;padding:0;
    break-before:page;page-break-before:always}
  #shot-sec::before{content:"Shot list";display:block;font-size:12pt;font-weight:600;padding:7pt 12pt;
    border-bottom:1px solid #999;break-after:avoid;page-break-after:avoid}
  .shot-add,.shot .s-del{display:none !important}
  .shot{border-color:#ddd;padding:2pt 12pt;break-inside:avoid;page-break-inside:avoid}
  .shot .s-tick{border:1.5px solid #000;background:#fff !important;color:transparent;width:12pt;height:12pt}
  .shot.on .s-tick{color:#000 !important}
  .shot input{color:#000;font-size:10.5pt;padding:4pt 0}
  .shot.on input{color:#666}
}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:200;background:var(--l-fg);color:#fff;
  font-size:13.5px;font-weight:500;border-radius:12px;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:#fff;font-size:13.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px;
  padding:6px 2px;min-height:32px;white-space:nowrap}
body.selecting .toast{bottom:96px}

/* ---------- 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:16px;padding:28px;width:380px;max-width:100%}
.modal h3{font-size:19px;font-weight:600;letter-spacing:-0.02em;margin-bottom:16px}
.modal input{width:100%;border:1px solid var(--l-hair);border-radius:12px;padding:12px 15px;font-size:16px;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:15px;margin:0 auto 14px;display:block}
.app-icon{width:26px;height:26px;border-radius:6px;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:8px;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:13.5px;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:12px;padding:12px 15px;font-size:14px;background:var(--l-bg);outline:none;margin:0 0 12px;resize:vertical;font-family:inherit}
.import-tidy{margin:16px 0 0;font-size:13px;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:13.5px;color:var(--l-muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.import-summary{font-size:14px;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:12px;padding:6px 0}
.import-item{display:flex;justify-content:space-between;gap:10px;padding:8px 14px;font-size:14px}
.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:13.5px;color:var(--l-muted);margin-bottom:16px;line-height:1.55}
#share-link,#device-link{font-size:13px;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:13.5px;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:12px}

/* ================= 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:12px;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:#ffffff;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-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:9999px;padding:8px 18px;
  color:var(--d-fg);font-size:14px;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-text span.startable{cursor:pointer}
.pr-text span.start-pick{background:color-mix(in srgb, var(--pr-ink) 22%, transparent);border-radius:3px}
.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:14px;padding:16px 22px;max-width:min(480px,86vw);
  color:var(--d-fg);font-size:15px;font-weight:500;line-height:1.5;text-align:center}
.pr-controls{position:absolute;left:0;right:0;bottom:0;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:9999px;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:14px;
  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:14px;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:16px;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:17px;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:11px;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:15px;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:10px;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:11.5px;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 */
#btn-signout,#btn-install{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:13px;font-weight:500}
  #btn-ed-prompt{padding:11px 16px;font-size:13.5px}
  .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%}
  .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}
  .app-name small{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}
  .app-name small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .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:12px}
}

/* ================= 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:11.5px;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:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--l-muted);margin:0 0 12px}
.rowlab.scripts{margin-top:26px}

/* ---- 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 10px 10px 10px;
  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 9px 0 0;box-shadow:0 -1px 0 rgba(255,255,255,.6) inset}
.folder-tile::after{content:"";position:absolute;inset:0;border-radius:3px 10px 10px 10px;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:13.5px;font-weight:600;letter-spacing:-0.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f-meta{display:block;font-weight:500;font-size:13px;color:var(--l-muted);margin-top:3px}
.f-menu{position:absolute;top:4px;right:4px;width:34px;height:34px;border-radius:9999px;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:12px;padding:16px 18px 18px;margin:8px 14px 12px}
.pro-gate b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.pro-gate p{font-size:13.5px;color:var(--l-fg-2);line-height:1.5;margin:0 0 12px}
.pro-gate .btn{min-height:38px;padding:8px 16px;font-size:13.5px}
.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:12px;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:12px;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:14px;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:14.5px;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:11.5px;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:11.5px;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:13px;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:9999px;background:var(--l-surface);
  padding:9px 34px 9px 34px;font-size:13.5px;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:9999px;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:13.5px;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:13.5px;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:13.5px;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:9px;font-size:14.5px;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:13.5px}
.asec{background:var(--l-surface);border:1px solid var(--l-hair);border-radius:16px;padding:22px 24px;margin-bottom:16px;box-shadow:var(--lift);scroll-margin-top:90px}
.asec h3{font-size:18px;font-weight:600;letter-spacing:-0.02em;margin-bottom:4px}
.asub{font-size:14px;color:var(--l-muted);margin-bottom:16px}
.amuted{font-size:13.5px;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:14.5px}
.arow .at span{font-size:13.5px;color:var(--l-muted)}
.arow .am{font-weight:500;font-size:13px;color:var(--l-fg-2);white-space:nowrap;border:1px solid var(--l-hair);border-radius:4px;padding:2px 8px;background:var(--stock,#f7f4ec)}
.arow .btn{padding:9px 16px;min-height:38px;font-size:13.5px;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:12px;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:12px;padding:12px 15px;font-size:16px;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:13.5px}
.aplan{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.aplan .btn{white-space:nowrap}
.aplan .abig{font-size:26px;font-weight:600;letter-spacing:-0.02em;line-height:1.1}
.aplan .asmall{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:12px;color:var(--l-muted);letter-spacing:0.06em}
.aplan .spacer{flex:1}
.aplan .btn{padding:9px 16px;min-height:38px;font-size:13.5px}
#acct-plan-note{margin-top:12px;font-size:13px}
.seg{display:inline-flex;border:1px solid var(--l-hair);border-radius:9999px;padding:3px;gap:2px;flex:0 0 auto}
.seg button{padding:6px 14px;border-radius:9999px;font-size:13.5px;font-weight:500;color:var(--l-fg)}
.seg button.on{background:var(--l-fg);color:#fff}
.toggle{width:44px;height:26px;border-radius:9999px;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:#fff;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:9999px;padding:7px 12px;font-size:13px}
  .acct-rail a.on{background:var(--l-fg);color:#fff;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:14.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}
.menu-head .mh-mail{display:block;font-size:12.5px;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:10.5px;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:11px;color:var(--l-muted);letter-spacing:0.06em;padding-left:10px}
.acct-chip img{width:100%;height:100%;object-fit:cover;border-radius:9999px}
/* 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:8px;color:var(--l-muted);font-size:14px;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:12px;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:12px;
  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:14px;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:9999px;padding:6px 13px;
  font-size:13.5px;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:8px;padding:8px 12px;
  font-size:14px;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:11.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--l-muted)}
.tour h3{font-size:24px;font-weight:600;letter-spacing:-0.025em;padding:12px 28px 4px;margin:0}
.tour .lede{padding:0 28px 18px;font-size:15px;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 8px 8px 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:14px;margin:6px 0 4px}
.tour .choice span{font-size:12.5px;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:10px;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:13.5px;margin:8px 0 4px}
.tour .feat span{font-size:12.5px;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:13.5px;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:14px;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:21px}}

/* ---------- 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:9999px;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:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--d-fg)}
.pr-speedn{font-size:16px;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:12.5px;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:14px}
  .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:17px;font-weight:600;letter-spacing:-.02em;margin:0;
  padding:8px 10px;border-radius:8px;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:64px;display:flex;flex-direction:column;height:calc(100vh - 64px);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:11px;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:12px;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:15px}
  .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:block}
  body:not(.guest) .ed-work.drawer-open .wb-foot{display:block}
  .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:8px}
  .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:16px;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 8px 8px 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:9999px;padding:0 14px}
  .acct-rail a.on{background:var(--l-fg);color:#fff;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:12px}
#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:21px;padding:10px 24px 4px}
.tour .lede{padding:0 24px 16px;font-size:14.5px}
.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}
.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}
/* 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:10px;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:12px 12px 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:11.5px;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:13.5px}
/* 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:13.5px}
.import-formats{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:11.5px;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:12px;letter-spacing:.04em;color:var(--l-muted);margin-top:3px}
#acct-export{min-height:36px;padding:0 14px;font-size:13.5px}
#acct-export.busy,#acct-plan-btn.busy{opacity:.6;pointer-events:none}
#acct-refund .at span{display:block;font-size:13px;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:11px;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}
.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}
.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:9999px;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:20px;margin:0 0 8px}
.standin-card p{font-size:14.5px;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:14px}
  .pr-sheet .set-lab{font-size:10px;margin-bottom:5px}
  .pr-sheet .set-toggle{padding:8px 0;font-size:13.5px}
  .pr-sheet .set-note{font-size:11.5px}
}

.set-nav{width:100%;background:none;color:inherit;border-left:0;border-right:0;border-bottom:0;font-family:inherit;font-size:15px;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:14px}
.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 shortcut card under the shoot rail (Luke, 6 Sept 2026): teach
   the prompter keys where the chapters already teach. Desktop only; the
   same codes are what number-pad remotes and clickers send. ---- */
.ed-keys{margin:14px 18px 14px;color:var(--l-fg-2)}
.ed-keys summary{cursor:pointer;list-style:none;font-family:var(--mono,ui-monospace,Menlo,monospace);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--l-muted)}
.ed-keys summary::-webkit-details-marker{display:none}
.ed-keys summary::after{content:"  +";letter-spacing:0}
.ed-keys[open] summary::after{content:"  \2212";letter-spacing:0}
.ed-keys-list{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px;margin:12px 0 0;font-size:12.5px}
.ed-keys-list b{font-family:var(--mono,ui-monospace,Menlo,monospace);font-weight:500;font-size:11px;
  background:var(--l-bg);border:1px solid var(--l-hair);border-radius:4px;padding:1px 5px;margin-right:2px;white-space:nowrap}
.ed-keys-note{margin:12px 0 0;font-size:12px;color:var(--l-muted);line-height:1.5}
@media (max-width:900px){.ed-keys{display:none}}