/* Pilot styles. Default skin: Manrope, ink #14181F, sunset accent #E4572E. Other skins at the end (from the mock's
   brand.css); the server sets html[data-brand]. */
:root{
  --ink:#14181F; --muted:#5d6470; --faint:#8a909a; --line:rgba(20,24,31,.10); --line2:rgba(20,24,31,.16);
  --accent:#E4572E; --accent-dark:#C4441F; --wash:rgba(228,87,46,.07);
  --card:#F8F8F7; --bg:#fff;
  --ok:#1B9E74; --ok-bg:rgba(27,158,116,.09); --bad:#C94040; --bad-bg:rgba(201,64,64,.08);
  --warn:#B86E06; --warn-bg:rgba(201,122,10,.09);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#ECEDEF; --muted:#A3A8B0; --faint:#7d838c; --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.16);
    --card:#1C2027; --bg:#121519; --wash:rgba(228,87,46,.14); --ok-bg:rgba(27,158,116,.16); --bad-bg:rgba(201,64,64,.16); --warn-bg:rgba(201,122,10,.16);
  }
}
*{box-sizing:border-box}
/* v07 (#32): the typeface the design asks for, actually loaded — Manrope variable (Google Fonts, OFL), one
   self-hosted file for every weight. The two fallback faces are metric-tuned Arial (size-adjust measured with
   fontTools against this exact file) so the swap doesn't shift the page. */
@font-face{font-family:'Manrope';src:url('/brand/Manrope-Variable.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'Manrope Fallback';src:local('Arial');size-adjust:97.67%;ascent-override:109.14%;descent-override:30.71%;line-gap-override:0%}
@font-face{font-family:'Manrope Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:700;size-adjust:100.22%;ascent-override:106.36%;descent-override:29.93%;line-gap-override:0%}
/* v08 (#46, 19 Oct): end-card faces, self-hosted like Manrope (fontsource, OFL). Only used when the card renders. */
@font-face{font-family:'Playfair Display';src:url('/brand/PlayfairDisplay-Variable.woff2') format('woff2');font-weight:400 900;font-display:swap}
/* v08 #58 (Simon, 19 Oct, colours to the Tom-demo reference): Grevon's light skin — white page, near-black top bar
   (the white Grevon logo needs it), teal accent (--accent/--sel set inline from the brand). */
html[data-brand=grevon] .top,html[data-brand=grevon] header.top{background:#14181d;border-bottom:1px solid #14181d}
html[data-brand=grevon] .top a,html[data-brand=grevon] .top span,html[data-brand=grevon] .top .right{color:#fff}
@font-face{font-family:'Playfair Display';src:url('/brand/PlayfairDisplay-Italic-Variable.woff2') format('woff2');font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:'Marcellus';src:url('/brand/Marcellus-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font:16px/1.6 'Manrope','Manrope Fallback',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.top{display:flex;align-items:center;gap:10px;height:64px;padding:0 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5}
.top img{height:30px;width:auto;max-width:180px}
.top .wm{font-weight:800;font-size:19px;letter-spacing:-.02em}
.top .right{margin-left:auto;font-size:13px;color:var(--muted);text-align:right;line-height:1.35}
.testbar{background:#FFF4D6;color:#6b4a00;font-size:12.5px;text-align:center;padding:5px 12px}
main{max-width:560px;margin:0 auto;padding:22px 16px 120px}
main.wide{max-width:1180px}
h1{font-size:30px;line-height:1.12;font-weight:800;letter-spacing:-.025em;margin:6px 0 10px}
h2{font-size:18px;font-weight:700;margin:26px 0 6px}
p{color:var(--muted);margin:6px 0}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.card{background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:14px 16px;margin:12px 0}
label.f{display:block;font-weight:700;font-size:14px;margin:14px 0 4px}
input[type=text],input[type=email],input[type=password],textarea,select{width:100%;padding:11px 12px;border:1.5px solid var(--line2);border-radius:10px;font:15px inherit;font-family:inherit;background:var(--bg);color:var(--ink)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)}
.btn{display:inline-block;border:1.5px solid var(--accent);background:var(--accent);color:#fff;border-radius:10px;padding:13px 18px;font:700 15px/1 inherit;font-family:inherit;cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn.block{display:block;width:100%}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn.ghost:hover{background:var(--card)}
.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.sbtn{border:1.5px solid var(--line2);background:var(--bg);color:var(--ink);border-radius:8px;padding:7px 10px;font:700 13px inherit;font-family:inherit;cursor:pointer}
.sbtn.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sbtn.ok.on{background:var(--ok);border-color:var(--ok);color:#fff}
.sbtn.warn.on{background:var(--warn);border-color:var(--warn);color:#fff}
.sbtn.bad.on{background:var(--bad);border-color:var(--bad);color:#fff}
.choice{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line2);border-radius:12px;padding:12px 14px;margin:8px 0;cursor:pointer}
.choice.on{border-color:var(--accent);background:var(--wash)}
.choice input{margin-top:5px;accent-color:var(--accent);width:18px;height:18px}
.choice b{display:block;line-height:1.35}
.choice small{color:var(--muted);font-size:13.5px}
.tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:4px;vertical-align:2px;margin-left:4px}
.tag.ok{background:var(--ok-bg);color:var(--ok)} .tag.warn{background:var(--warn-bg);color:var(--warn)}
.tag.bad{background:var(--bad-bg);color:var(--bad)} .tag.n{background:var(--card);color:var(--muted);border:1px solid var(--line)}
.drop{border:2px dashed var(--line2);border-radius:12px;padding:26px 14px;text-align:center;color:var(--muted);cursor:pointer}
.drop.over{border-color:var(--accent);background:var(--wash)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px;margin-top:10px}
.thumbs div{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:var(--card)}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.thumbs span{position:absolute;inset:auto 0 0 0;font-size:11px;background:rgba(0,0,0,.55);color:#fff;padding:1px 5px}
.thumbs button{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:none;background:rgba(0,0,0,.6);color:#fff;font-size:15px;line-height:26px;padding:0;cursor:pointer}
.err{color:var(--bad);font-weight:600;font-size:14px;margin-top:8px}
.note{font-size:13px;color:var(--faint)}
video{width:100%;border-radius:10px;background:#000;display:block}
#main{aspect-ratio:16/9}
.vtall{max-width:300px;margin:0 auto}
.vtall #main{aspect-ratio:9/16}
.seg{display:flex;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:4px;gap:4px;margin:12px 0}
.seg button{flex:1;border:0;background:transparent;border-radius:7px;padding:8px;font:700 14px inherit;font-family:inherit;color:var(--muted);cursor:pointer}
.seg button.on{background:var(--bg);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.shot{border:1.5px solid var(--line2);border-radius:12px;margin:10px 0;overflow:hidden}
.shot.approved{border-color:rgba(27,158,116,.5)} .shot.remake{border-color:rgba(201,122,10,.55)} .shot.dropped{opacity:.55}
.shot .row{display:flex;gap:12px;align-items:center;padding:10px}
.shot .row video,.shot .row img.th{width:150px;flex:none;aspect-ratio:16/9;object-fit:cover;border-radius:6px;cursor:pointer}
.shot .nm{flex:1;min-width:0}
.shot .nm b{display:block;line-height:1.3}
.shot .nm small{color:var(--faint);font-size:12.5px;display:block}
.acts{display:flex;gap:6px;flex-wrap:wrap}
.panel{border-top:1px solid var(--line);padding:12px 14px;background:var(--card)}
.pinwrap{position:relative;cursor:crosshair;border-radius:6px;overflow:hidden;margin-top:8px}
.pinwrap img{width:100%;display:block}
.pin{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;border:3px solid #fff;background:var(--bad);box-shadow:0 0 0 2px var(--bad)}
.pick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.pick img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:5px;border:2px solid transparent;cursor:pointer}
.pick img.sel{border-color:var(--accent)}
.bar{position:fixed;left:0;right:0;bottom:0;background:linear-gradient(rgba(255,255,255,0),var(--bg) 30%);padding:22px 16px 14px}
.bar .in{max-width:560px;margin:0 auto}
.qc{font:12px/1.4 ui-monospace,Consolas,monospace;color:var(--muted)}
.qc .hot{color:var(--bad);font-weight:700}
table.list{width:100%;border-collapse:collapse;font-size:14px}
table.list td,table.list th{padding:9px 8px;border-bottom:1px solid var(--line);text-align:left}
table.list tr{cursor:pointer} table.list tr:hover td{background:var(--card)}
.grid2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px}
@media (max-width:900px){.grid2{grid-template-columns:1fr}}
.log{font-size:13px;max-height:420px;overflow:auto}
.log div{padding:5px 0;border-bottom:1px solid var(--line)}
.log b{font-weight:700}
.req{border-top:1px solid var(--line);padding:10px 0;font-size:14px}
.req:first-of-type{border-top:0}
.done{text-align:center;padding:30px 0}
.done .big{font-size:54px;color:var(--accent);line-height:1}
footer{max-width:560px;margin:30px auto 0;padding:0 16px 30px;font-size:12.5px;color:var(--faint)}
@media (max-width:520px){.shot .row{flex-wrap:wrap}.shot .row video,.shot .row img.th{width:100%}}

/* The brand switcher (only Simon sees it) */
.switcher{background:#FFF4D6;color:#6b4a00;font-size:12.5px;text-align:center;padding:6px 10px}
.switcher button{background:#fff;border:0;border-radius:6px;padding:2px 9px;margin-left:5px;font:700 12px inherit;font-family:inherit;color:#6b4a00;cursor:pointer}
.switcher button.on{background:#6b4a00;color:#fff}
.switcher a{color:#6b4a00;margin-left:6px}

/* Progress stages (build #2): Planning → Making → Edit under review → Ready. From the mock's stepper. */
.stepper{display:flex;align-items:flex-start;gap:6px;margin:18px 0 8px}
.stepper div{flex:1;text-align:center;font-size:13px;color:var(--faint);min-width:0}
.stepper i{display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin:0 auto 4px;border-radius:50%;border:2px solid var(--line2);font-style:normal;font-weight:700}
.stepper .past{color:var(--ok)}  /* not ".done": that's the Approved screen's padded block */
.stepper .past i{background:var(--ok);border-color:var(--ok);color:#fff}
.stepper .now{color:var(--ink)}
.stepper .now i{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px var(--wash)}
.stepper b{display:block;font-size:13px;line-height:1.3}
.stepper small{display:block;color:var(--muted);line-height:1.35;margin-top:2px;font-size:12px}

/* The plan page (plan.js, build #1): shot grid, feel + track, finishing touches. Layout from the mock's plan screen. */
.sb{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.sbc{background:var(--card);border:1px solid var(--line2);border-radius:12px;overflow:hidden}
.sbc.open{grid-column:1/-1}
.sbc.skip .im,.sbc.skip .cap{opacity:.45}
.sbc .im{position:relative;aspect-ratio:16/9;background:#000;cursor:pointer}
.sbc .im img{width:100%;height:100%;object-fit:cover;display:block}
.sbc .num{position:absolute;left:8px;top:8px;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:rgba(0,0,0,.6);color:#fff;font:700 13px/24px inherit;font-family:inherit;text-align:center}
/* the tidy (13 Oct): "Tidied" / "Before" / "Your photo" tag and the before/after button on a tidied shot */
.sbc .tidytag{position:absolute;left:8px;bottom:8px;padding:2px 8px;border-radius:10px;background:rgba(0,0,0,.62);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.sbc .ba{position:absolute;right:8px;bottom:8px;border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.55);color:#fff;border-radius:14px;padding:4px 10px;min-height:28px;font:700 12px/1 inherit;font-family:inherit;cursor:pointer}
.sbc .ba[aria-pressed="true"]{background:#fff;color:#14181F}
.sbc .cap{display:flex;justify-content:space-between;gap:6px;padding:7px 10px;font-size:13.5px;font-weight:600;line-height:1.3}
.sbc .cap small{color:var(--muted);font-weight:500}
.sbc .ed{padding:0 10px 10px}
.sbc .ed .acts{margin-top:8px}
details.more{margin:10px 0}
details.more summary{cursor:pointer;font-weight:600;font-size:14.5px;color:var(--muted)}
.left{display:flex;gap:10px;align-items:center;margin:6px 0}
.left img{width:84px;height:56px;object-fit:cover;border-radius:6px;flex:none}
.feelrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.feelrow button{border:1.5px solid var(--line2);background:var(--bg);color:var(--ink);border-radius:10px;padding:10px 8px;font:700 14px/1.25 inherit;font-family:inherit;cursor:pointer;text-align:left}
.feelrow button small{display:block;font-weight:500;color:var(--muted);font-size:12.5px;margin-top:2px}
.feelrow button.on{border-color:var(--accent);background:var(--wash)}
.trk{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line2);border-radius:10px;padding:8px 10px;margin:6px 0;cursor:pointer}
.trk.on{border-color:var(--accent);background:var(--wash)}
.trk.short span small{color:var(--bad)}
.trk input{accent-color:var(--accent);width:17px;height:17px;flex:none}
.trk span b{display:block;font-size:14.5px;line-height:1.3}
.trk span small{color:var(--muted);font-size:12.5px}
.trk .play{width:34px;height:34px;border-radius:50%;border:none;background:var(--ink);color:var(--bg);font-size:12px;cursor:pointer;flex:none}
.opt{display:flex;gap:10px;align-items:flex-start;padding:8px 0;cursor:pointer}
.opt+.opt,.endf+.opt{border-top:1px solid var(--line)}
.opt input{margin-top:5px;accent-color:var(--accent);width:17px;height:17px;flex:none}
.opt b{display:block;font-size:14.5px;line-height:1.35}
.opt small{color:var(--muted);font-size:13px}
.endf{display:grid;gap:6px;padding:0 0 10px 27px}
@media (max-width:420px){.feelrow{grid-template-columns:1fr}}

/* ---- Skins (ported from the mock's brand.css, 10 Oct) ---- */
/* Grevon: grevon.ai styles v1.1 - Satoshi; navy #1C2128 bar with the white wordmark; teal #29BCAF; 4px buttons, 8px cards */
@font-face{font-family:'Satoshi';src:url('/brand/Satoshi-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/brand/Satoshi-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/brand/Satoshi-Bold.woff2') format('woff2');font-weight:600 700;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/brand/Satoshi-Black.woff2') format('woff2');font-weight:800 900;font-display:swap}
html[data-brand="grevon"]{--accent:#29BCAF;--accent-dark:#1f9a8f;--wash:rgba(41,188,175,.08)}
/* dark mode's :root rule outranks the line above and put the direct brand's orange wash on the partner skin (12 Oct, plan page) */
@media (prefers-color-scheme: dark){html[data-brand="grevon"]:not([data-theme="light"]){--wash:rgba(41,188,175,.14)}}
html[data-brand="grevon"] body,html[data-brand="grevon"] button,html[data-brand="grevon"] input,
html[data-brand="grevon"] textarea,html[data-brand="grevon"] select{font-family:'Satoshi',system-ui,-apple-system,sans-serif}
html[data-brand="grevon"] .top{background:#1C2128;color:#fff;border-bottom-color:rgba(255,255,255,.07);height:68px}
html[data-brand="grevon"] .top img{height:28px;max-width:160px}
html[data-brand="grevon"] .top .right{color:rgba(255,255,255,.65)}
html[data-brand="grevon"] .top .right a{color:#fff}
html[data-brand="grevon"] .btn,html[data-brand="grevon"] .sbtn{border-radius:4px}
html[data-brand="grevon"] .card,html[data-brand="grevon"] .shot,html[data-brand="grevon"] .choice{border-radius:8px}
html[data-brand="grevon"] h1{font-weight:700;letter-spacing:-.01em}
html[data-brand="grevon"] .eyebrow{color:#29BCAF}

/* Pixel Juice: Plus Jakarta Sans; ink #171717; pink #F82A86; pill buttons (comes along; not tested this stretch) */
html[data-brand="pixeljuice"]{--accent:#F82A86;--accent-dark:#D91E70;--wash:rgba(248,42,134,.07)}
html[data-brand="pixeljuice"] body,html[data-brand="pixeljuice"] button,html[data-brand="pixeljuice"] input,
html[data-brand="pixeljuice"] textarea,html[data-brand="pixeljuice"] select{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif}
html[data-brand="pixeljuice"] .top img{border-radius:8px}
html[data-brand="pixeljuice"] .btn{border-radius:40px}

/* ---- Warm look (13 Oct): Codex's "Warm cinematic" design, approved by Simon 12 Oct, ported from
   Codex's site-mock-styled folder (warm-cinematic.css + design.css; path in the README) onto this site's own classes.
   Switched on by html[data-look="warm"], which the Worker sets from brands.js (look: 'warm'); brands without it
   never match a rule here. Light-only: the Worker also sets data-theme="light", which turns the dark-mode colours off.
   Ivory canvas, off-white panels, blue-charcoal text, terracotta links, coral gradient actions with dark text,
   deep navy header around the logo (its artwork is dark-backed). Arial/Helvetica: no serif, no web font. ---- */
html[data-look="warm"]{color-scheme:light;
  --ink:#203039; --muted:#626a6d; --faint:#6b706f; --line:rgba(37,56,67,.15); --line2:rgba(37,56,67,.25);
  --accent:#ac493c; --accent-dark:#943d32; --wash:#fae9de; --card:#fffcf7; --bg:#f6f2ec; --inset:#eee7dd;
  --ok:#246a52; --ok-bg:#e5efe8; --bad:#a33b37; --bad-bg:#f9e8e3; --warn:#845817; --warn-bg:#f6ecd5;
  --coral:linear-gradient(110deg,#ff756d,#ff887a 65%,#ff716c); --navy:#061327}
html[data-look="warm"] body,html[data-look="warm"] button,html[data-look="warm"] input,html[data-look="warm"] select,
html[data-look="warm"] textarea{font-family:Arial,Helvetica,sans-serif}
html[data-look="warm"] body{background:radial-gradient(ellipse at 92% 4%,rgba(239,217,196,.24),transparent 35%),#f6f2ec;line-height:1.6}
html[data-look="warm"] :focus-visible{outline:2px solid #954134;outline-offset:3px}
html[data-look="warm"] .top{background:var(--navy);color:#fffaf4;border-bottom:1px solid rgba(255,255,255,.09);height:auto;min-height:72px;padding:12px max(16px,calc((100% - 1180px)/2))}
html[data-look="warm"] .top img{height:40px;max-width:none;display:block}
html[data-look="warm"] .top .right{color:#d4dcd9}
html[data-look="warm"] .top .right a{color:#ffb39c}
html[data-look="warm"] .top .who{display:inline-block;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;color:#d4dcd9}
@media (max-width:520px){html[data-look="warm"] .top .who{max-width:130px}}
html[data-look="warm"] .testbar{background:#f6ecd5;color:#6b4a12;border-bottom:1px solid rgba(132,88,23,.18)}
html[data-look="warm"] main{max-width:640px;padding:36px 20px 140px}
html[data-look="warm"] main.wide{max-width:1240px}
html[data-look="warm"] h1{font-size:clamp(32px,4.4vw,46px);line-height:1.1;font-weight:500;letter-spacing:-.045em;margin:10px 0 16px}
html[data-look="warm"] h2{font-size:22px;font-weight:500;letter-spacing:-.025em;margin:32px 0 10px}
html[data-look="warm"] p{line-height:1.65}
html[data-look="warm"] .eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.16em;color:var(--accent)}
html[data-look="warm"] .card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:16px 0;box-shadow:inset 0 1px 0 #fff,0 12px 32px rgba(72,52,33,.03)}
html[data-look="warm"] label.f{font-weight:600;font-size:14px;margin:20px 0 8px}
html[data-look="warm"] input[type=text],html[data-look="warm"] input[type=email],html[data-look="warm"] input[type=password],
html[data-look="warm"] textarea,html[data-look="warm"] select{background:#fffefb;border:1px solid var(--line2);border-radius:8px;padding:13px 14px;font-size:16px;min-height:48px}
html[data-look="warm"] input::placeholder,html[data-look="warm"] textarea::placeholder{color:#717571;opacity:1}
html[data-look="warm"] input:focus,html[data-look="warm"] textarea:focus,html[data-look="warm"] select:focus{border-color:var(--accent)}
html[data-look="warm"] .btn{background:var(--coral);color:#11141f;border:1px solid rgba(255,163,151,.33);border-radius:100px;padding:15px 24px;min-height:50px;font-weight:600;font-size:15px;line-height:1.3;box-shadow:0 4px 25px rgba(255,112,101,.14),inset 0 1px 0 rgba(255,190,174,.42);transition:transform .18s,box-shadow .18s}
html[data-look="warm"] .btn:hover{background:var(--coral);border-color:rgba(255,163,151,.33);transform:translateY(-1px);box-shadow:0 7px 24px rgba(159,80,49,.14),inset 0 1px rgba(255,255,255,.44)}
html[data-look="warm"] .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line2);box-shadow:none}
html[data-look="warm"] .btn.ghost:hover{background:#fff9f0}
html[data-look="warm"] .btn.dark{background:#243741;color:#fffaf4;border-color:#243741;box-shadow:none}
html[data-look="warm"] .btn:disabled{background:var(--inset);color:var(--muted);border-color:var(--line);box-shadow:none;transform:none;opacity:1}
html[data-look="warm"] .sbtn{background:var(--card);color:var(--ink);border:1px solid var(--line2);border-radius:7px;padding:9px 12px;min-height:40px;font-weight:600}
html[data-look="warm"] .sbtn.on:not(.ok):not(.warn):not(.bad){background:#f3dfd4;color:#843b2f;border-color:#b46a53}
html[data-look="warm"] .choice{background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:16px 18px;box-shadow:0 6px 22px rgba(72,52,33,.02)}
html[data-look="warm"] .choice:hover{background:#fff9f0;border-color:rgba(184,121,98,.4)}
html[data-look="warm"] .choice.on{background:linear-gradient(110deg,#fae9de,#fff9f1);border-color:#b46a53;box-shadow:inset 3px 0 #b46a53}
html[data-look="warm"] .choice b{font-weight:600}
html[data-look="warm"] .tag{border-radius:5px;letter-spacing:.05em;font-weight:700}
html[data-look="warm"] .tag.n{background:var(--inset);border-color:var(--line)}
html[data-look="warm"] .drop{background:linear-gradient(130deg,#fffdf8,#f2e9de);border:1px dashed rgba(170,134,123,.5);border-radius:12px;padding:44px 16px;color:var(--muted);box-shadow:inset 0 1px #fff}
html[data-look="warm"] .drop.over{border-color:var(--accent);background:#fae9de}
html[data-look="warm"] .thumbs div{border-radius:8px;background:var(--inset)}
html[data-look="warm"] video{border-radius:12px;box-shadow:0 18px 50px rgba(72,52,33,.13)}
html[data-look="warm"] .seg{background:#ebe5dc;border:1px solid var(--line);border-radius:100px;padding:5px;gap:6px}
html[data-look="warm"] .seg button{border-radius:100px;padding:10px 16px;min-height:42px;font-weight:600}
html[data-look="warm"] .seg button.on{background:#243741;color:#fffaf4;box-shadow:0 2px 7px rgba(37,56,67,.13)}
html[data-look="warm"] .shot{background:var(--card);border:1px solid var(--line2);border-radius:12px;box-shadow:0 8px 24px rgba(72,52,33,.03)}
html[data-look="warm"] .shot.approved{border-color:rgba(36,106,82,.45)} html[data-look="warm"] .shot.remake{border-color:rgba(132,88,23,.5)}
html[data-look="warm"] .panel{background:#f3ede4;border-top-color:var(--line)}
.bar:empty{display:none} /* 14 Oct: an empty bar showed as a blank strip at the bottom (live site too) */
html[data-look="warm"] .bar{background:rgba(249,245,239,.93);border-top:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 -10px 32px rgba(72,52,33,.03);padding:16px 20px max(16px,env(safe-area-inset-bottom))}
html[data-look="warm"] .bar .in{max-width:600px}
html[data-look="warm"] .stepper{gap:10px;margin:28px 0 14px}
html[data-look="warm"] .stepper div{padding-top:14px;border-top:1px solid var(--line2)}
html[data-look="warm"] .stepper i{width:38px;height:38px;margin-bottom:10px;background:var(--card);border:1px solid var(--line2)}
html[data-look="warm"] .stepper .past{border-color:var(--ok)}
html[data-look="warm"] .stepper .past i{background:var(--ok);border-color:var(--ok)}
html[data-look="warm"] .stepper .now{border-color:var(--accent)}
html[data-look="warm"] .stepper .now i{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px #f3dfd4}
html[data-look="warm"] .sb{gap:16px;margin:20px 0}
html[data-look="warm"] .sbc{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 25px rgba(72,52,33,.05)}
html[data-look="warm"] .sbc .num{background:rgba(20,43,55,.86);border:1px solid rgba(255,255,255,.4)}
html[data-look="warm"] .sbc .cap{padding:12px 14px;font-weight:500;font-size:14.5px}
html[data-look="warm"] .sbc .ed{background:#f3ede4;padding:12px 14px 14px}
html[data-look="warm"] details.more{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0}
html[data-look="warm"] details.more summary{color:var(--ink);font-weight:500}
html[data-look="warm"] .feelrow{gap:10px}
html[data-look="warm"] .feelrow button{background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:14px 14px;font-weight:600}
html[data-look="warm"] .feelrow button.on{background:#fae9de;border-color:#b46a53;box-shadow:inset 3px 0 #b46a53}
html[data-look="warm"] .trk{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
html[data-look="warm"] .trk.on{background:#fae9de;border-color:#b46a53}
html[data-look="warm"] .trk .play{background:transparent;color:var(--ink);border:1px solid var(--line2);width:40px;height:40px}
html[data-look="warm"] .pick img.sel{border-color:#b46a53}
html[data-look="warm"] .done .big{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 18px;border-radius:50%;border:1px solid #c0a38b;background:linear-gradient(130deg,#fffdf8,#f2dfcf);color:#98533e;font-size:34px;box-shadow:0 9px 25px rgba(128,84,55,.05)}
html[data-look="warm"] .err{color:var(--bad)}
html[data-look="warm"] table.list tr:hover td{background:#fff9f0}
html[data-look="warm"] footer{max-width:640px;padding:0 20px 36px;color:var(--faint)}
html[data-look="warm"] footer nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:6px}
html[data-look="warm"] footer a{color:var(--muted);text-decoration:none} html[data-look="warm"] footer a:hover{color:var(--accent)}
@media (max-width:520px){
  html[data-look="warm"] .top img{height:32px}
  html[data-look="warm"] main{padding:26px 16px 150px}
  html[data-look="warm"] .seg button{padding:9px 10px}
}
@media (prefers-reduced-motion:reduce){html[data-look="warm"] .btn{transition:none}}

/* The order header (17 Oct design pass, review.js heroSrc): their opening shot behind the place name, dark on the
   left for the words, like the front page's hero and the public pages' .opening. Any look. */
.ohero{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:172px;
  margin:0 0 14px;padding:30px 30px 20px;border-radius:18px;background:#061327;border:1px solid rgba(218,221,255,.14);
  box-shadow:0 24px 60px rgba(1,6,18,.4)}
.ohero .ohbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;z-index:-2;transform:scale(1.02)}
.ohero::after{content:'';position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(6,19,39,.92) 0%,rgba(6,19,39,.62) 46%,rgba(6,19,39,.12) 100%),
  linear-gradient(0deg,rgba(6,19,39,.75) 0%,rgba(6,19,39,0) 55%)}
.ohero .ohc{max-width:560px}
/* :root ahead: the looks' own h1 / p / tag rules must not win inside the picture */
:root .ohero .eyebrow{color:#ffb39c}
:root .ohero .ohc h1{color:#fff;font-size:clamp(34px,4.6vw,54px);line-height:1;letter-spacing:-.045em;font-weight:700;margin:6px 0 12px;text-shadow:0 2px 24px rgba(0,0,0,.35)}
:root .ohero .ohc p{margin:0;color:#e6e8f2}
:root .ohero .tag{background:rgba(255,255,255,.14);color:#fff;border:0}
:root .ohero .tag.ok{background:rgba(94,214,168,.2);color:#a6f2d3}
/* The plan on a big screen (17 Oct design pass): the page widens (review.js gives #app .pw) and Music, Finishing
   touches and Approve & pay sit side by side, the picture staying put on the left while they choose. Any look. */
@media (min-width:980px){
  :root main.pw{max-width:1100px}
  :root main.pw p{max-width:74ch}
  .plcols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:start}
  .plcols.tall{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:56px}
  .plcols.pay{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
  .plcols>.plcol-a{position:sticky;top:96px}
  .plcols.pay>.plcol-a{position:static}.plcols.pay>.plcol-b{position:sticky;top:96px}
  .plcols .plcol-b>.fth:first-child{margin-top:0}
  .plcols.pay .yedit{margin-top:0}
  .plcols.rv{grid-template-columns:minmax(0,460px) minmax(0,1fr)}
  .plcols.rv>.plcol-a{position:static} /* the player, Now playing and the rules only stay put when the screen is tall enough for all three */
  .plcols.rv .plcol-b>h2:first-child{margin-top:0}
  .plcols.dv>.plcol-a{position:static}.plcols.dv .plcol-b>h2:first-of-type{margin-top:0}
  main.pw .done{max-width:720px;margin:0 auto}main.pw .done p{margin-left:auto;margin-right:auto}
  main.pw .tg{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
}
@media (min-width:980px) and (min-height:900px){.plcols.rv>.plcol-a{position:sticky;top:90px}}
.sheet .plcols{display:block}.sheet .plcols>div{position:static}
:root main.pw{padding-top:22px}
@media (max-width:520px){.ohero{min-height:150px;padding:24px 18px 16px;border-radius:14px;margin:0 0 12px}.ohero::after{background:linear-gradient(0deg,rgba(6,19,39,.92) 0%,rgba(6,19,39,.6) 60%,rgba(6,19,39,.5))}}

/* ---- Night (17 Oct 2026): the front page's world carried through the whole journey. Simon: "transform what we've got
   into a premium presentation in keeping with more or less the front page" (dark chosen 17 Oct; DESIGN-PASS.md).
   Sits on top of the warm look (same layout and shapes) and only changes colour, depth and type; switched on by
   html[data-tone="night"], which boot.js sets. Colours from home/home.css: navy #061327, coral #ff776f, text #f7f7fc,
   muted #c6cadd, glass panels with a soft lilac edge. :root[...] outranks the warm look's html[data-look="warm"]. ---- */
:root[data-tone=night]{color-scheme:dark;
  --bg:#061327; --card:#0c192d; --inset:rgba(255,255,255,.035);
  --ink:#f7f7fc; --muted:#b8bed2; --faint:#8a91a9; --line:rgba(218,221,255,.10); --line2:rgba(218,221,255,.20);
  --accent:#ff8a80; --accent-dark:#ffa197; --wash:rgba(255,119,111,.10);
  --ok:#5ed6a8; --ok-bg:rgba(94,214,168,.12); --bad:#ff8a8a; --bad-bg:rgba(255,128,128,.12); --warn:#f4bd68; --warn-bg:rgba(244,189,104,.12);
  --good:#f7f7fc; --sel:#ff8a80; --sel-hover:rgba(255,138,128,.5);
  --note-bg:rgba(244,189,104,.08); --note-line:rgba(244,189,104,.30); --note-ink:#f6c886;
  --pill-bg:rgba(94,214,168,.12); --pill-ink:#86e3bf; --pill-line:rgba(94,214,168,.35);
  --yes-bg:rgba(94,214,168,.07); --yes-line:rgba(94,214,168,.26);
  --flash:rgba(255,119,111,.22); --dev-bg:radial-gradient(ellipse at 50% 120%,#2a3463,#0b1730 72%); --dev-base:#3b4460;
  --tgl-off:rgba(218,221,255,.2); --tgl-on:#ff776f; --ptag:rgba(255,255,255,.16); --scrim:rgba(2,8,20,.66);
  --coral:linear-gradient(110deg,#ff756d,#ff887a 65%,#ff716c); --navy:#061327;
  --glass:linear-gradient(130deg,rgba(18,30,50,.80),rgba(20,24,40,.66) 50%,rgba(8,19,38,.88));
  --edge:rgba(218,221,255,.15); --edge-hi:rgba(233,195,247,.5);
  --lift:inset 0 1px 0 rgba(255,255,255,.05),0 18px 44px rgba(1,6,18,.38);
  --glow:0 0 0 1px var(--sel) inset,0 0 0 4px rgba(255,119,111,.13),0 18px 44px rgba(1,6,18,.42)}
/* the page: navy, a warm glow top right and a lilac one left, like the front page's sky */
:root[data-tone=night] body{color:var(--ink);background:
  radial-gradient(ellipse 70% 42% at 92% -6%,rgba(255,119,111,.13),transparent 70%),
  radial-gradient(ellipse 55% 45% at -8% 32%,rgba(124,98,255,.10),transparent 70%),
  radial-gradient(ellipse 60% 40% at 70% 92%,rgba(25,26,57,.9),transparent 70%),#061327;background-attachment:fixed}
/* the start questions (index.html, one a screen) and sign-in: the front page's sunset, faded, above the question, so
   pressing "Create your showcase" carries on in the same place */
:root[data-tone=night] body:has(.qprog),:root[data-tone=night] body:has(.gbtn){background:
  linear-gradient(180deg,rgba(6,19,39,.45) 0,rgba(6,19,39,.86) 300px,#061327 620px) no-repeat,
  url('/home/resort-sunset.webp') center top/max(100%,1400px) auto no-repeat,#061327}
:root[data-tone=night] main:has(.qprog),:root[data-tone=night] main:has(.gbtn){padding-top:max(36px,7vh)}
:root[data-tone=night] main{min-height:calc(100vh - 190px)} /* short pages keep their footer at the bottom, not mid-screen */
:root[data-tone=night] main:has(.qprog) h1,:root[data-tone=night] main:has(.gbtn) h1{font-size:clamp(36px,5vw,56px);margin:12px 0 18px;text-shadow:0 2px 30px rgba(0,0,0,.4)}
:root[data-tone=night] ::selection{background:rgba(255,119,111,.35)}
:root[data-tone=night] :focus-visible{outline:2px solid #ffbaa5;outline-offset:3px}
/* header: glass over the page, the wordmark lit like the front page's */
:root[data-tone=night] .top{background:rgba(6,19,39,.72);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border-bottom:1px solid rgba(218,221,255,.08)}
:root[data-tone=night] .top img{mix-blend-mode:lighten}
:root[data-tone=night] .top .right,:root[data-tone=night] .top .who{color:#c6cadd}
:root[data-tone=night] .top .right a{color:#ffb39c}
/* type: the front page's tight, bold headings; peach eyebrows and links */
:root[data-tone=night] h1{font-weight:700;letter-spacing:-.045em;line-height:1.02;color:#fff}
:root[data-tone=night] h2{font-weight:600;letter-spacing:-.03em;color:#fff;font-size:26px}
/* section labels in a step: quieter than the step's title (normal case: the tests and screen readers read the words) */
:root[data-tone=night] h3.fth,:root[data-tone=night] .outh{font-size:15px;font-weight:600;letter-spacing:.01em;color:#d4d3ea;margin:28px 0 10px}
:root[data-tone=night] h3,:root[data-tone=night] b,:root[data-tone=night] strong{color:inherit}
:root[data-tone=night] p{color:var(--muted)}
:root[data-tone=night] .eyebrow{color:#ffb39c;letter-spacing:.2em;font-size:11px;font-weight:600}
:root[data-tone=night] .note{color:var(--faint)}
/* panels: glass, a lilac edge, depth */
:root[data-tone=night] .card,:root[data-tone=night] .shot,:root[data-tone=night] .choice,:root[data-tone=night] .sbc,
:root[data-tone=night] .trk,:root[data-tone=night] .feelrow button,:root[data-tone=night] .lk,:root[data-tone=night] .tdc,
:root[data-tone=night] .pic,:root[data-tone=night] .lbt,:root[data-tone=night] .pacerow button,:root[data-tone=night] .nowp,
:root[data-tone=night] .rcpt,:root[data-tone=night] .ex,:root[data-tone=night] .price{background:var(--glass);border:1px solid var(--edge);box-shadow:var(--lift)}
:root[data-tone=night] .card{border-radius:16px}
/* picture choices lift on hover, like the front page's cards; the chosen one glows coral */
:root[data-tone=night] .lk,:root[data-tone=night] .pic,:root[data-tone=night] .lbt,:root[data-tone=night] .choice,:root[data-tone=night] .trk,
:root[data-tone=night] .feelrow button,:root[data-tone=night] .pacerow button{transition:transform .2s,border-color .2s,box-shadow .2s,background .2s}
:root[data-tone=night] .lk:hover,:root[data-tone=night] .pic:hover,:root[data-tone=night] .lbt:hover{transform:translateY(-3px);border-color:var(--edge-hi)}
:root[data-tone=night] .choice:hover,:root[data-tone=night] .trk:hover,:root[data-tone=night] .feelrow button:hover{background:var(--glass);border-color:var(--edge-hi)}
:root[data-tone=night] .lk.on,:root[data-tone=night] .pic.on,:root[data-tone=night] .lbt.on,:root[data-tone=night] .pacerow button.on,
:root[data-tone=night] .shapes .pic.on{border-color:var(--sel);box-shadow:var(--glow)}
:root[data-tone=night] .choice.on,:root[data-tone=night] .trk.on,:root[data-tone=night] .feelrow button.on{background:linear-gradient(110deg,rgba(255,119,111,.17),rgba(255,119,111,.04) 70%),var(--glass);border-color:var(--sel);box-shadow:inset 3px 0 var(--sel),var(--lift)}
:root[data-tone=night] .lkp,:root[data-tone=night] .tdp{background:#020814}
/* fields */
:root[data-tone=night] input[type=text],:root[data-tone=night] input[type=email],:root[data-tone=night] input[type=password],
:root[data-tone=night] textarea,:root[data-tone=night] select{background:rgba(255,255,255,.045);border:1px solid rgba(218,221,255,.22);color:var(--ink);transition:border-color .18s,box-shadow .18s}
:root[data-tone=night] input::placeholder,:root[data-tone=night] textarea::placeholder{color:#7f87a1}
:root[data-tone=night] input:focus,:root[data-tone=night] textarea:focus,:root[data-tone=night] select:focus{border-color:#ff8a80;box-shadow:0 0 0 4px rgba(255,119,111,.14)}
:root[data-tone=night] select option{background:#0b1930;color:#f7f7fc}
:root[data-tone=night] label.f{color:#e6e8f2}
/* buttons: the front page's coral pill; quiet ones are glass outlines */
:root[data-tone=night] .btn{box-shadow:0 4px 25px rgba(255,112,101,.18),inset 0 1px 0 rgba(255,190,174,.42)}
:root[data-tone=night] .btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(255,112,101,.36),inset 0 1px 0 rgba(255,190,174,.42)}
:root[data-tone=night] .btn.ghost{background:rgba(255,255,255,.03);color:var(--ink);border:1px solid rgba(218,221,255,.28);box-shadow:none}
:root[data-tone=night] .btn.ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(218,221,255,.5)}
:root[data-tone=night] .btn.dark{background:#f7f7fc;color:#0a1528;border-color:#f7f7fc}
:root[data-tone=night] .btn:disabled{background:rgba(255,255,255,.06);color:#7f87a1;border-color:rgba(218,221,255,.12);box-shadow:none;transform:none}
:root[data-tone=night] .sbtn{background:rgba(255,255,255,.04);color:var(--ink);border:1px solid rgba(218,221,255,.24);border-radius:100px;padding:9px 16px;transition:background .18s,border-color .18s}
:root[data-tone=night] .sbtn:hover{background:rgba(255,255,255,.09);border-color:rgba(218,221,255,.45)}
:root[data-tone=night] .sbtn.on:not(.ok):not(.warn):not(.bad){background:rgba(255,119,111,.16);color:#ffd5cd;border-color:var(--sel)}
:root[data-tone=night] .sbtn.ok.on{background:var(--ok);border-color:var(--ok);color:#04140e}
:root[data-tone=night] .sbtn.warn.on{background:var(--warn);border-color:var(--warn);color:#1f1404}
:root[data-tone=night] .sbtn.bad.on{background:var(--bad);border-color:var(--bad);color:#200606}
/* the prototype's own "skip ahead" box (boot.js): still plainly not part of the site, but not a white slab */
:root[data-tone=night] .vp-wait{background:rgba(255,255,255,.03);border-color:rgba(218,221,255,.28);color:#c6cadd}
:root[data-tone=night] .vp-wait .vp-wtag{background:rgba(255,255,255,.14)}
:root[data-tone=night] .vp-wait button{background:rgba(255,255,255,.05);border-color:rgba(218,221,255,.28);color:#f7f7fc}
:root[data-tone=night] .vp-wait button.on{background:#f7f7fc;border-color:#f7f7fc;color:#0a1528}
:root[data-tone=night] .tag.n{background:var(--inset);border-color:var(--line)}
/* the segmented switch and the feel chips: a white pill marks the choice */
:root[data-tone=night] .seg{background:rgba(255,255,255,.05);border:1px solid var(--line)}
:root[data-tone=night] .seg button{color:var(--muted)}
:root[data-tone=night] .seg button.on{background:#f7f7fc;color:#0a1528;box-shadow:0 4px 14px rgba(0,0,0,.35)}
:root[data-tone=night] .chips button{background:rgba(255,255,255,.04);border:1px solid rgba(218,221,255,.22);border-radius:100px;padding:7px 15px;color:var(--ink)}
:root[data-tone=night] .chips button:hover{border-color:rgba(218,221,255,.5)}
:root[data-tone=night] .chips button.on{background:#f7f7fc;border-color:#f7f7fc;color:#0a1528}
/* uploads, photos, players */
:root[data-tone=night] .drop{background:var(--glass);border:1px dashed rgba(218,221,255,.32);color:var(--muted);box-shadow:var(--lift)}
:root[data-tone=night] .drop.over{border-color:#ff8a80;background:rgba(255,119,111,.10)}
:root[data-tone=night] .thumbs div{background:var(--inset)}
:root[data-tone=night] video,:root[data-tone=night] .pp,:root[data-tone=night] .mkhero,:root[data-tone=night] .mshot{box-shadow:0 0 0 1px rgba(218,221,255,.10),0 28px 70px rgba(0,0,0,.55)}
:root[data-tone=night] .price .pp{box-shadow:none} /* the pricing card's price block shares the player's class name */
:root[data-tone=night] .tile .tim{box-shadow:0 0 0 1px rgba(255,255,255,.07),0 10px 24px rgba(0,0,0,.4)}
:root[data-tone=night] .tile .tcap{color:var(--muted)}
:root[data-tone=night] .sumth img{box-shadow:0 0 0 1px rgba(255,255,255,.08)}
/* the inside of a panel, the bottom bar, overlays */
:root[data-tone=night] .panel,:root[data-tone=night] .sbc .ed{background:rgba(255,255,255,.025);border-top-color:var(--line)}
:root[data-tone=night] .bar{background:rgba(6,19,39,.8);border-top:1px solid rgba(218,221,255,.10);box-shadow:0 -16px 40px rgba(1,6,18,.45)}
:root[data-tone=night] .sheet{background:#081629;border-left:1px solid var(--edge);box-shadow:-24px 0 70px rgba(0,0,0,.55)}
:root[data-tone=night] .sheet.moment{border:1px solid var(--edge)}
:root[data-tone=night] .sheet-head,:root[data-tone=night] .sheet-foot{background:rgba(255,255,255,.03)}
:root[data-tone=night] .sheet-bg{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
:root[data-tone=night] .efr,:root[data-tone=night] .endprev,:root[data-tone=night] .lgshow{background:#0f1f36;box-shadow:0 0 0 1px var(--edge)}
:root[data-tone=night] .dev .phone,:root[data-tone=night] .dev .lap{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 12px 30px rgba(0,0,0,.5)}
/* steps: done = white, now = coral with a halo, to come = faint */
:root[data-tone=night] .psteps button{border-top:2px solid rgba(218,221,255,.14);padding-top:12px}
:root[data-tone=night] .psteps button i{width:28px;height:28px;background:rgba(255,255,255,.06);color:var(--muted);border:1px solid rgba(218,221,255,.18)}
:root[data-tone=night] .psteps button.past{border-top-color:rgba(247,247,252,.55);color:#d9dcea}
:root[data-tone=night] .psteps button.past i,:root[data-tone=night] .plw li.past i,:root[data-tone=night] ol.mk li.past i{background:#f7f7fc;color:#0a1528;border-color:#f7f7fc}
:root[data-tone=night] .psteps button.now{border-top-color:#ff776f;color:#fff}
:root[data-tone=night] .psteps button.now i,:root[data-tone=night] .plw li.now i,:root[data-tone=night] ol.mk li.now i{background:var(--coral);color:#11141f;border-color:transparent;box-shadow:0 0 0 5px rgba(255,119,111,.15),0 6px 18px rgba(255,112,101,.35)}
:root[data-tone=night] .stepper div{border-top-color:rgba(218,221,255,.14)}
:root[data-tone=night] .stepper i{background:rgba(255,255,255,.06);border-color:rgba(218,221,255,.18)}
:root[data-tone=night] .stepper .past{color:#d9dcea;border-color:rgba(247,247,252,.55)}
:root[data-tone=night] .stepper .past i{background:#f7f7fc;border-color:#f7f7fc;color:#0a1528}
:root[data-tone=night] .stepper .now{border-color:#ff776f}
:root[data-tone=night] .stepper .now i{border-color:#ff8a80;color:#ff8a80;box-shadow:0 0 0 5px rgba(255,119,111,.15)}
:root[data-tone=night] .qprog i b,:root[data-tone=night] .ord .prog i{background:var(--coral)}
/* switches: coral when on */
:root[data-tone=night] .tgl input:checked+i{box-shadow:0 0 14px rgba(255,119,111,.4)}
:root[data-tone=night] .trk .play{background:rgba(255,255,255,.04);color:var(--ink);border:1px solid rgba(218,221,255,.3)}
:root[data-tone=night] .trk .play:hover{background:rgba(255,255,255,.1)}
:root[data-tone=night] .trk input,:root[data-tone=night] .opt input,:root[data-tone=night] .choice input{accent-color:#ff776f}
/* odds and ends */
:root[data-tone=night] .done .big{border:1px solid rgba(255,179,156,.4);background:radial-gradient(circle,rgba(255,119,111,.22),rgba(255,119,111,.04));color:#ffb39c;box-shadow:0 0 40px rgba(255,119,111,.18)}
:root[data-tone=night] table.list tr:hover td{background:rgba(255,255,255,.04)}
:root[data-tone=night] details.more summary{color:var(--ink)}
:root[data-tone=night] footer{color:var(--faint)}
:root[data-tone=night] footer a{color:var(--muted)}
:root[data-tone=night] footer a:hover{color:#ffb39c}
:root[data-tone=night] .draft{border-color:rgba(244,189,104,.5);background:rgba(244,189,104,.05)}
:root[data-tone=night] .draft::before{color:#f6c886}
:root[data-tone=night] .draftall,:root[data-tone=night] .dn{background:rgba(244,189,104,.07);border-color:rgba(244,189,104,.5);color:#f6dcb0}
:root[data-tone=night] .draftall p,:root[data-tone=night] .dn p{color:#f6dcb0}
:root[data-tone=night] .fsgrid button.sel{border-color:var(--sel);box-shadow:0 0 0 3px rgba(255,119,111,.25)}
:root[data-tone=night] .chip.check{background:rgba(120,160,255,.14);color:#a9c2ff}
:root[data-tone=night] .price{border-color:rgba(255,138,128,.45)}
@media (prefers-reduced-motion:reduce){:root[data-tone=night] .btn,:root[data-tone=night] .lk,:root[data-tone=night] .pic,:root[data-tone=night] .lbt{transition:none;transform:none!important}}

/* ---- v07 "fable review 171026" (#32 #34 #36): accent discipline + the pay note. Coral stays on buttons and
   selected/active states; prose and chrome links (notes, footers, the top bar, the bottom bar's back links)
   go quiet so each screen has one loud action. Scoped to night so the warm look and other brands are untouched. */
:root[data-tone=night] p a,:root[data-tone=night] .note a,:root[data-tone=night] footer a,:root[data-tone=night] .top a,:root[data-tone=night] .bar a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(218,221,255,.45);text-underline-offset:2px}
:root[data-tone=night] p a:hover,:root[data-tone=night] .note a:hover,:root[data-tone=night] footer a:hover,:root[data-tone=night] .top a:hover,:root[data-tone=night] .bar a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.bar button,.pp b{font-variant-numeric:tabular-nums}
.paynote{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:7px;font-size:12.5px;color:var(--faint)}
.paynote svg{width:12px;height:12px;flex:none}