/* Wild Media Room. Your Week look (start/plan/index.html tokens, docs/RELEASE.md 1c-2): dark, red uppercase labels,
   grey buttons, the one main action red in the fixed bottom bar. Every coloured state also has a word or symbol. */
:root{--bg:#0f0f10;--card:#18181a;--line:#2a2a2d;--fg:#f4f4f5;--dim:#a1a1aa;--red:#d7192a;--redText:#ff4d5a;--ok:#2e6b42;--okText:#6fd99b;--field:#101012;--btn:#222226}
*{box-sizing:border-box;-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:17px;line-height:1.5}
.w{max-width:640px;margin:0 auto;padding:20px 16px 150px}
.top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.top b{color:var(--redText);font-size:15px;letter-spacing:.14em;text-transform:uppercase}
.top span{color:var(--dim);font-size:14px}
h1{font-size:27px;line-height:1.2;margin:14px 0 10px;font-weight:700}
h2{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--redText);margin:26px 0 6px;font-weight:700}
.lede{color:var(--dim);margin:0 0 10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin:12px 0}
.meta{color:var(--dim);font-size:14px;line-height:1.4}
label{display:block;font-size:13px;color:var(--dim);margin:12px 0 4px;letter-spacing:.04em}
textarea{-webkit-appearance:none;appearance:none;width:100%;background:var(--field);color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:11px;font:inherit;font-size:17px;min-height:150px;resize:vertical}
textarea:focus{outline:2px solid var(--red);outline-offset:1px}
button,.btn{font-family:inherit;font-size:16px;border-radius:12px;border:1px solid var(--line);background:var(--btn);color:var(--fg);min-height:48px;padding:0 16px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;-webkit-tap-highlight-color:transparent}
button:focus:not(:focus-visible){outline:none}
button:focus-visible,.btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
button.go{background:var(--red);border-color:var(--red);color:#fff;font-weight:700}
button.quiet{background:transparent;color:var(--dim)}
button:disabled{opacity:.45;cursor:default}
.wide{width:100%;margin:8px 0 0}
.row{display:flex;gap:8px;flex-wrap:wrap}.row>*{flex:1 1 auto}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}
.tabs button{flex:1 1 88px;min-height:44px;font-size:15px;color:var(--dim);background:var(--field)}
.tabs button[aria-selected=true]{color:var(--fg);border:2px solid var(--red);background:#2a1215;font-weight:700}
.tabs button[aria-selected=true]::before{content:"\25B8 "}
/* picked choices say "✓" in words, not only a red border */
.pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px;margin:4px 0 8px}
.pick button{min-height:48px;font-size:15px;color:var(--dim);background:var(--field);padding:0 8px;text-align:center}
.pick button[aria-pressed=true]{border:2px solid var(--red);background:#2a1215;color:var(--fg);font-weight:700}
.pick button[aria-pressed=true]::before{content:"\2713  "}
.list button{width:100%;justify-content:flex-start;text-align:left;margin:6px 0 0;min-height:56px;padding:8px 14px;flex-direction:column;align-items:flex-start;gap:2px}
.list button span{font-size:13px;color:var(--dim);font-weight:400}
.list button[aria-pressed=true]{border:2px solid var(--red);background:#2a1215}
.list button[aria-pressed=true] b::before{content:"\2713  "}
/* the client's own words sit on white paper, like Your Week */
.paper{background:#fafaf7;color:#1c1917;border-radius:12px;padding:16px;white-space:pre-wrap;font:17px/1.6 Georgia,serif;max-height:40vh;overflow:auto}
.task{font-size:20px;line-height:1.35;font-weight:600;margin:0 0 4px}
.step{color:var(--redText);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.take{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding:12px 0}
.take:first-child{border-top:0}
.take b{font-size:16px}
.ok{color:var(--okText);font-weight:600}.warnTxt{color:#f5b84b;font-weight:600}
.info{background:#1d1d21;border:1px solid var(--line);border-left:4px solid #8f8f99;border-radius:12px;padding:12px;color:var(--fg);font-size:15px;margin:12px 0}
.info b{display:block;margin-bottom:2px}
.err{color:var(--redText);font-size:15px;margin:6px 0 0;min-height:0}
.player{width:100%;margin-top:6px;border-radius:10px;background:#000}
/* recording screen: the script reader takes the screen */
.rec{position:fixed;inset:0;background:var(--bg);z-index:10;display:flex;flex-direction:column}
.rec .head{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 16px 8px;border-bottom:1px solid var(--line)}
.rec .lamp{font-weight:800;letter-spacing:.08em;font-size:15px;color:var(--fg);background:#2a1215;border:2px solid var(--red);border-radius:999px;padding:4px 12px;white-space:nowrap}
.rec .lamp.paused{background:transparent;border-color:var(--dim);color:var(--dim)}
.rec .clock{font-variant-numeric:tabular-nums;font-size:20px;font-weight:700}
.rec .cam{width:96px;height:128px;object-fit:cover;border-radius:10px;background:#000;margin-left:auto;transform:scaleX(-1)}
.reader{flex:1 1 0;min-height:0;overflow-y:auto;padding:0 22px;font-size:var(--rs,30px);line-height:1.45;font-weight:600;scroll-behavior:auto}
/* lead-in and run-out space live inside the scroll area, so the reader never pushes the buttons off the screen */
.reader::before{content:"";display:block;height:30vh}.reader::after{content:"";display:block;height:60vh}
.reader p{margin:0 0 1.1em}
.reader .ph{color:var(--redText)}
.guide{position:fixed;left:0;right:0;top:34vh;height:2px;background:rgba(255,255,255,.18);pointer-events:none;z-index:11}
.rec .foot{display:flex;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--bg)}
.rec .foot button{flex:1 1 0}
.bar{position:fixed;left:0;right:0;bottom:0;background:var(--bg);border-top:1px solid var(--line);padding:11px 16px calc(11px + env(safe-area-inset-bottom));display:flex;gap:12px;align-items:center;z-index:5}
.bar .st{flex:1 1 auto;color:var(--dim);font-size:14px;min-width:0}
#toast{position:fixed;left:16px;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:30;display:flex;justify-content:center;pointer-events:none}
#toast span{background:#f4f4f5;color:#0f0f10;border-radius:12px;padding:10px 14px;font-size:15px;box-shadow:0 6px 20px rgba(0,0,0,.5)}
#toast span.bad::before{content:"\26A0  "}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* Michael's verdict on a sent take: the mark and the words carry the meaning; colour only adds to it */
.verdict b{font-size:17px;margin-right:2px}.verdict.ok{color:var(--okText)}.verdict.redo{color:#f5b84b}
/* Light (Nov 7 2026): follows the app's Light/Dark setting through /shared/theme.js. The dark look above is unchanged;
   this only adds the app's light look (white cards, slate text, the same red). Control borders 3:1, text 4.5:1. */
html[data-theme=light]{--bg:#ffffff;--card:#ffffff;--line:#e2e8f0;--fg:#0f172a;--dim:#5b6577;--red:#d7192a;--redText:#b91c1c;--ok:#15803d;--okText:#15803d;--field:#ffffff;--btn:#f1f5f9;--ctl:#7b8494;--soft:#fde8ea;color-scheme:light}
html[data-theme=light] button,html[data-theme=light] .btn,html[data-theme=light] textarea{border-color:var(--ctl)}
html[data-theme=light] button.go{border-color:var(--red)}
html[data-theme=light] button:focus-visible,html[data-theme=light] .btn:focus-visible{outline-color:#0f172a}
html[data-theme=light] .tabs button[aria-selected=true],html[data-theme=light] .pick button[aria-pressed=true],html[data-theme=light] .list button[aria-pressed=true],html[data-theme=light] .rec .lamp{background:var(--soft)}
html[data-theme=light] .rec .lamp.paused{background:transparent}
html[data-theme=light] .paper{border:1px solid var(--line)}
html[data-theme=light] .warnTxt,html[data-theme=light] .verdict.redo{color:#92400e}
html[data-theme=light] .info{background:#f8fafc;border-left-color:#64748b}
html[data-theme=light] .guide{background:rgba(15,23,42,.18)}
html[data-theme=light] #toast span{background:#0f172a;color:#ffffff;box-shadow:0 6px 20px rgba(15,23,42,.25)}
/* Dark: control borders reach 3:1 like light (Michael, Nov 7: brighten the faint grey outlines) */
html:not([data-theme=light]){--ctl:#71717a}
html:not([data-theme=light]) button,html:not([data-theme=light]) .btn,html:not([data-theme=light]) textarea{border-color:var(--ctl)}
html:not([data-theme=light]) button.go{border-color:var(--red)}