/* Showcraft · the pages' shared style. The skin chosen on 2026-10-28 (Olivier: "I like Dusk but I want the rows of Backstage"): the
   hero photo's sky fading into the black at the top of every screen, white-outlined pills with a colour dot per kind of page, the
   prompter's own red button at the bottom centre. Dark only; phone-width first. */
:root{--bg:#0c1118;--sky1:#1b2a4a;--sky2:#2b2f45;--panel:rgba(0,0,0,.32);--panel2:rgba(255,255,255,.08);--ink:#fff;--dim:#9aa7b3;--rule:rgba(255,255,255,.16);--line:rgba(255,255,255,.72);--acc:#7ab7ff;--acc-ink:#0b1a2b;--warn:#e0a84f;--rec:#e0493f;--ok:#3bbd6c;--del:#ff8a80;--ins:#7bd88f;--script:rgba(0,0,0,.25);--said:rgba(59,189,108,.08);--newbg:rgba(122,183,255,.1);--mark:#e0a84f;--shadow:0 10px 30px rgba(0,0,0,.45);
  --c-videos:#7ab7ff;--c-ideas:#e0a84f;--c-refs:#0fb5b5;--c-takes:#3bbd6c;--c-arc:#b48cff;--c-tone:#fff;--c-chat:#fff;color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;color:var(--ink);font:16px/1.45 -apple-system,system-ui,"Segoe UI",Roboto,sans-serif;padding:0 0 136px;min-height:100vh;background-color:var(--bg);background-image:radial-gradient(ellipse at 85% 0%,rgba(224,168,79,.3),transparent 48%),linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 42%,var(--bg) 100%);background-repeat:no-repeat;background-size:100% 460px,100% 460px}
a{color:var(--acc);text-decoration:none}
h1{font-size:24px;margin:18px 0 6px;line-height:1.15;font-weight:800;letter-spacing:-.01em}h2{font-size:18px;margin:26px 0 8px}h3{font-size:16px;margin:16px 0 4px}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.dim{color:var(--dim)}.small{font-size:13px}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
/* the bar: the way back and where you are; on the home, the brand and the project */
.top{position:sticky;top:0;z-index:5;background:rgba(12,17,24,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:10px;height:52px}
.top .brand{font-weight:800;letter-spacing:.02em;white-space:nowrap;color:var(--ink);font-size:17px}
.top .brand i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--rec);margin-left:6px;vertical-align:middle}
.top .back{display:inline-flex;align-items:center;gap:4px;color:var(--ink);font-weight:700;white-space:nowrap;font-size:16px}
.top .back i{font-style:normal;font-size:24px;line-height:1;margin-top:-3px}
.top .here{color:var(--dim);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.top .here::before{content:"· ";color:var(--rule)}
.top .brand + .here::before{content:""}
.top .proj{margin-left:auto;color:var(--dim);font-size:13px;white-space:nowrap;max-width:40%;overflow:hidden;text-overflow:ellipsis}
.top .gear{flex:none;font-size:22px;line-height:1;color:var(--dim);padding:4px 0 4px 8px;text-decoration:none}
.top .gear:hover{color:var(--ink)}
/* the home's rows: one pill per page, a dot in its colour, a count on the right */
.rows{display:flex;flex-direction:column;gap:9px;margin:14px 0 8px}
.rowb{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--panel);color:var(--ink);font-weight:800;font-size:18px;letter-spacing:-.01em}
.rowb i{width:10px;height:10px;border-radius:50%;background:var(--dot,#fff);flex:none}
.rowb small{margin-left:auto;font-weight:600;font-size:14px;color:var(--ink);opacity:.85;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
.rowb.rec{background:var(--rec);border-color:var(--rec)}
.rowb.rec i{background:#fff}
.rowb.rec small{color:#ffd9d6;opacity:1}
.rowb.off{opacity:.45}
.card{background:var(--panel);border:1px solid rgba(255,255,255,.3);border-radius:18px;padding:12px 14px;margin:10px 0}
.card h3{margin:0 0 4px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grow{flex:1;min-width:0}
.pill{display:inline-block;font-size:12px;padding:2px 9px;border-radius:999px;background:var(--panel2);color:var(--dim);border:1px solid var(--rule);white-space:nowrap}
.pill.idea{color:var(--dim)}.pill.scripted{color:var(--acc);border-color:var(--acc)}.pill.recording{color:var(--rec);border-color:var(--rec)}.pill.cut{color:var(--warn);border-color:var(--warn)}.pill.published{color:var(--ok);border-color:var(--ok)}
.btn{font:inherit;font-size:14px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;white-space:nowrap}
.btn:disabled{opacity:.45;cursor:default}
.btn.primary{background:var(--ok);color:#04110a;border-color:var(--ok);font-weight:700}
.btn.warn{border-color:var(--warn);color:var(--warn)}
.btn.sm{font-size:13px;padding:5px 11px}
.btn.ghost{background:transparent;border-color:var(--rule);color:var(--dim)}
input,textarea,select{font:inherit;color:var(--ink);background:rgba(0,0,0,.35);border:1px solid var(--rule);border-radius:12px;padding:8px 11px;width:100%}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.4)}
textarea{resize:vertical;min-height:60px;line-height:1.4}
input:focus,textarea:focus,select:focus,[contenteditable]:focus{outline:2px solid var(--acc);outline-offset:1px}
label.f{display:block;font-size:13px;color:var(--dim);margin:8px 0 3px}
.tabs{display:flex;gap:6px;overflow-x:auto;padding:10px 0 4px;scrollbar-width:none}
.tabs .btn.on{background:#fff;color:#0c1118;border-color:#fff}
.empty{color:var(--dim);padding:14px 4px;text-align:center}
.toasts{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 108px);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:50;pointer-events:none;padding:0 16px}
.toast{max-width:560px;background:#1a222c;color:var(--ink);border:1px solid rgba(255,255,255,.25);box-shadow:var(--shadow);border-radius:14px;padding:10px 14px;font-size:15px;animation:tin .18s ease-out;pointer-events:auto}
.toast.mac{border-left:4px solid var(--acc)}.toast.warn{border-left:4px solid var(--warn)}.toast.bad{border-left:4px solid var(--rec)}
@keyframes tin{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
/* the red button: the prompter's own, at the bottom centre of every page; lit while it listens or the drawer is open */
.talk{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 20px);transform:translateX(-50%);width:76px;height:76px;border-radius:50%;background:var(--rec);border:4px solid #fff;color:#fff;font:800 14px/1 -apple-system,system-ui,sans-serif;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(224,73,63,.35),0 10px 30px rgba(0,0,0,.5);z-index:40;cursor:pointer;padding:0}
.talk.on{background:var(--bg);border-color:var(--rec);color:var(--rec);box-shadow:0 0 0 10px rgba(224,73,63,.2)}
.talk:focus-visible{outline:3px solid var(--warn);outline-offset:3px}
.talk.on{font-variant-numeric:tabular-nums;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 16px rgba(224,73,63,.12)}}
.chatlink{position:fixed;right:16px;bottom:calc(env(safe-area-inset-bottom) + 38px);padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(12,17,24,.85);color:var(--ink);font-weight:700;font-size:14px;z-index:40;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.drawer{position:fixed;left:0;right:0;bottom:0;background:#131a24;border-top:1px solid rgba(255,255,255,.2);border-radius:18px 18px 0 0;box-shadow:var(--shadow);padding:14px 16px calc(env(safe-area-inset-bottom) + 112px);z-index:30;transform:translateY(105%);transition:transform .22s ease;max-height:85vh;overflow:auto}
.drawer.open{transform:none}
.drawer h3{margin:0 0 8px}
.drawer .row{margin-top:8px}
.savebar{position:sticky;bottom:0;background:#131a24;border-top:1px solid var(--rule);padding:10px 16px;display:flex;gap:8px;align-items:center;z-index:6;margin:0 -16px}
.sec{margin:22px 0 8px}
.sec h2{margin:0;display:flex;align-items:baseline;gap:8px}
.sec .cue{color:var(--dim);font-size:14px;white-space:pre-line;margin:4px 0 8px;border-left:3px solid var(--rule);padding-left:10px}
.q{background:var(--panel);border:1px solid rgba(255,255,255,.3);border-radius:16px;padding:10px 12px;margin:8px 0}
.q .qh{display:flex;gap:8px;align-items:flex-start}
.q .qn{color:var(--dim);font-size:13px;min-width:34px;padding-top:3px}
.q .qq{font-weight:600;flex:1;min-width:0;padding:2px 4px;border-radius:6px}
.q .qt{white-space:pre-wrap;padding:6px 4px 2px 38px;border-radius:6px;line-height:1.45}
.q .qt:empty::before{content:"(no text yet: tap to write)";color:var(--dim)}
.q .qq:focus,.q .qt:focus{background:rgba(255,255,255,.08)}
.q .qm{display:flex;gap:8px;align-items:center;padding:6px 0 0 38px;font-size:13px;color:var(--dim);flex-wrap:wrap}
.q.dirty{border-color:var(--warn)}
.take{border-top:1px dashed var(--rule);padding:6px 0 4px 38px;font-size:14px}
.take .tr{margin:4px 0 2px;white-space:pre-wrap;line-height:1.5}
mark.pron{background:rgba(224,168,79,.25);color:inherit;border-bottom:2px solid var(--warn);border-radius:3px;padding:0 2px;cursor:pointer}
mark.corr{background:rgba(122,183,255,.2);color:inherit;border-bottom:2px solid var(--acc);border-radius:3px;padding:0 2px;cursor:pointer}
del{color:var(--del);text-decoration:line-through;text-decoration-thickness:1.5px}
ins{color:var(--ins);text-decoration:none;font-weight:600}
.player{background:#000;border-radius:12px;overflow:hidden;margin:8px 0}
.player video{width:100%;max-height:60vh;display:block;background:#000}
.bar{height:6px;background:var(--rule);border-radius:3px;overflow:hidden}.bar i{display:block;height:100%;background:var(--acc);width:0;transition:width .2s}
.grid{display:grid;grid-template-columns:1fr 1fr 22px;gap:0;border:1px solid rgba(255,255,255,.25);border-radius:12px;overflow:hidden;margin-top:8px}
.grid.three{grid-template-columns:1fr 1fr 1fr 22px}
.grid .hd{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);padding:6px 10px;background:rgba(0,0,0,.35)}
.grow-row{display:contents;cursor:pointer}
.grow-row .c{padding:8px 10px;border-top:1px solid var(--rule);font-size:15px;min-height:34px}
.grow-row .script{background:var(--script)}.grow-row .said{background:var(--said)}.grow-row .new{background:var(--newbg)}
.grow-row.only-script .said,.grow-row.only-said .script,.grow-row.only-new .script,.grow-row.only-new .said{opacity:.35}
.grow-row .mark{border-top:1px solid var(--rule);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--mark)}
.grow-row[data-pick=script] .script{box-shadow:inset 3px 0 0 var(--acc)}.grow-row[data-pick=said] .said{box-shadow:inset 3px 0 0 var(--acc)}.grow-row[data-pick=mix] .c{box-shadow:inset 0 -2px 0 var(--mark)}
.grow-row .new[contenteditable]{cursor:text}
.chat{display:flex;flex-direction:column;gap:8px;padding:8px 0}
.msg{max-width:86%;padding:9px 12px;border-radius:16px;background:var(--panel);border:1px solid rgba(255,255,255,.25);white-space:pre-wrap}
.msg.user{align-self:flex-end;background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.msg .at{display:block;font-size:11px;opacity:.7;margin-top:4px}
.msg .att{display:block;margin-top:6px;font-size:13px;border-top:1px solid rgba(128,128,128,.3);padding-top:4px}
.flagcard{background:rgba(255,255,255,.06);border:1px solid var(--rule);border-radius:14px;padding:12px;margin:8px 0 8px 38px}
.flagcard h4{margin:0 0 6px;font-size:15px}
.flagcard .tries span{display:inline-block;margin-right:6px;padding:2px 8px;border-radius:999px;background:var(--panel);border:1px solid var(--rule);font-size:13px}
.flagcard .tries span.ok{border-color:var(--ok);color:var(--ok)}.flagcard .tries span.no{border-color:var(--rec);color:var(--rec)}
.handle{cursor:grab;color:var(--dim);padding:0 6px;user-select:none;touch-action:none}
.item.drag{opacity:.5}
.kinds{display:grid;gap:10px}
@media (min-width:860px){.kinds{grid-template-columns:1fr 1fr 1fr}}
.rule .ba{font-size:14px;margin-top:4px}.rule .ba b{font-weight:600}
.search{margin:8px 0}
@media (max-width:520px){.grow-row .c{font-size:14px;padding:7px 8px}h1{font-size:21px}}

/* The foot of every page (Olivier, 2026-10-28: "at the top the main navigation, at the bottom the disclaimer, the FAQ, who we are, the
   legal pages, the site map", Scout's shape): three columns of links, then the line with the legal pages. app.js footer(). */
.foot{margin:56px auto 0;max-width:900px;padding:22px 16px 0;border-top:1px solid var(--rule);color:var(--dim);font-size:13px;line-height:1.5}
.foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 18px}
.foot h4{margin:0 0 6px;font-size:12px;color:var(--ink);font-weight:700}
.foot a{display:block;color:var(--dim);padding:2px 0}.foot a:hover{color:var(--ink)}
.foot .line{margin-top:18px;padding-top:12px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:space-between}
.foot .line a{display:inline;padding:0}
.site h2{font-size:18px;margin:26px 0 8px}.site p,.site li{color:var(--dim)}.site p b,.site li b{color:var(--ink)}.site .soon{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--panel2);font-size:12px;color:var(--ink)}
/* The to-dos (PLAN.md §27) and the reminder told on arrival. */
.remind{display:block;border-left:3px solid var(--warn);color:var(--ink)}
.todo{display:flex;gap:10px;align-items:flex-start;padding:10px 12px}
.todo .chk{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);background:transparent;flex:none;cursor:pointer;margin-top:1px}
.todo.done .chk{background:var(--ok);border-color:var(--ok)}.todo.done .t{text-decoration:line-through;color:var(--dim)}
.todo .t{flex:1;min-width:0}.todo .t[contenteditable]:focus{outline:1px solid var(--acc);border-radius:4px;padding:0 4px}
.pill.overdue{background:var(--rec);color:#fff}.pill.today{background:var(--warn);color:#000}.pill.soon{background:var(--acc);color:var(--acc-ink)}
/* The account at the top right (PLAN.md §30): the picture or the initials, to the profile; Sign in when nobody is. */
.top .who{display:inline-flex;align-items:center;margin-left:4px}
.top .me{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--panel2);border:1px solid var(--rule);overflow:hidden;color:var(--ink);text-decoration:none}
.top .me img{width:100%;height:100%;object-fit:cover;display:block}.top .me b{font-size:12px;letter-spacing:.02em}
.avatar{width:96px;height:96px;border-radius:50%;background:var(--panel2);border:1px solid var(--rule);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;flex:none}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
/* The project chip (PLAN.md §32, layout A): the name at the top right, truncated, beside the gear and the account. */
.top .chip{display:inline-flex;align-items:center;max-width:38vw;padding:4px 10px;border-radius:999px;border:1px solid var(--rule);background:rgba(122,183,255,.12);color:var(--ink);font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.top .chip:hover{background:rgba(122,183,255,.22)}
.menu{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}.menu .btn{font-size:12px}
.pcard h3{margin:0 0 2px;font-size:18px}.pcard p{margin:2px 0 8px}.pcard.open{border-color:var(--ok)}
h2.sec{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:28px 0 8px}
/* A read-only project (PLAN.md §32): the red button, Record, the primary buttons and the forms grayed and inert, the top bar untouched. */
body.readonly .talk,body.readonly .rowb.rec,body.readonly .wrap .btn.primary,body.readonly .wrap .chk,body.readonly .wrap button.btn:not(.ghost){opacity:.4;pointer-events:none;filter:grayscale(1)}
body.readonly .wrap input:not([type=search]),body.readonly .wrap textarea,body.readonly .wrap select,body.readonly .wrap [contenteditable]{pointer-events:none;border-color:transparent;background:transparent}   /* readable, not editable */
body.readonly .top *{opacity:1;pointer-events:auto;filter:none}

/* a project's description: two lines on the cards, the whole behind a tap (PLAN.md §32, 2026-10-29) */
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.desc{cursor:pointer}.desc:hover{color:inherit}
.descrow{display:flex;gap:6px;align-items:flex-start}.descrow .btn{flex:none;padding:2px 9px;line-height:1.3;margin-top:2px}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:60;padding:16px}
.sheet{background:var(--bg);border:1px solid rgba(255,255,255,.3);border-radius:18px;width:100%;max-width:640px;max-height:82vh;overflow:auto;padding:16px 18px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.sheet h3{margin:0 0 8px}.sheet .body p{margin:0 0 10px;line-height:1.5}.sheet .row{justify-content:flex-end;margin-top:8px}