/* Creator Lab app theme: the homepage's dark world, applied app-wide.
   Loaded after the app's own <style>, so it re-points the app's existing colour
   names (--page, --surface, --accent …) at the shared tokens in shared/cl-tokens.css.
   Look only: nothing here changes how any screen works. */

:root{
  /* the light register, re-pointed at the dark world (Phil chose dark everywhere) */
  --page:var(--cl-n0); --surface:var(--cl-n1); --hairline:rgba(245,245,247,.12); --track:var(--cl-n25);
  --ink:var(--cl-n5); --muted:var(--cl-n4); --faint:var(--cl-n3);
  --brand-start:var(--cl-blue-press); --brand-end:var(--cl-blue); --brand-ink:#8CC4FF;
  --brand-soft:rgba(40,135,232,.14); --brand-line:rgba(40,135,232,.42);
  --teal:var(--cl-ok); --teal-ink:#5BE07F; --teal-soft:rgba(48,209,88,.14); --teal-wash:rgba(48,209,88,.07); --teal-border:rgba(48,209,88,.35);
  --blocker:var(--cl-bad); --blocker-soft:rgba(255,107,107,.10); --blocker-line:rgba(255,107,107,.42); --blocker-ink:#FF8B8B;
  --gold:var(--cl-blue);
  /* the dark register already matches; tie it to the shared values */
  --d-page:var(--cl-n0); --d-surface:var(--cl-n1); --d-surface2:var(--cl-n2); --d-hair:var(--cl-n25); --d-hair2:#333338;
  --d-ink:var(--cl-n5); --d-mut:var(--cl-n4); --d-faint:var(--cl-n3);
  /* the one signal accent. Primary buttons are solid blue, as on the homepage */
  --accent:var(--cl-blue); --accent-hover:var(--cl-blue-hover); --accent-press:var(--cl-blue-press); --on-accent:#FFFFFF;
  --warn:var(--cl-warn); --danger:var(--cl-bad); --success:var(--cl-ok);
  --sparkle:var(--cl-blue);
  --e-out:var(--cl-e-out); --e-inout:var(--cl-e-inout);
  --soft:0 1px 2px rgba(0,0,0,.35);
  --lift:0 2px 6px rgba(0,0,0,.35),0 18px 40px rgba(0,0,0,.45);
  color-scheme:dark;
}

/* ── type: Archivo + the homepage's mono eyebrows ── */
html,body{font-family:var(--cl-sans);font-weight:500;background:var(--cl-n0);color:var(--cl-n5)}
h1,h2,h3{font-weight:800;letter-spacing:-.02em}
.disp,.t-hero,.t-h1{font-family:var(--cl-sans);font-weight:800!important;letter-spacing:-.03em!important}
.mono,.t-eyebrow,.sec-label,.chip,.tag{font-family:var(--cl-mono)}
b,strong{font-weight:700}

/* ── the frame: every screen sits in the dark world with the soft blue glow ── */
html,html:has(body.dark){background:var(--cl-n0)}
body,body.dark{background:var(--cl-n0);color:var(--cl-n5)}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(900px 500px at 50% -10%,rgba(40,135,232,.10),transparent 60%),
             radial-gradient(700px 420px at 85% 110%,rgba(40,135,232,.06),transparent 60%)}
.logo-mark,body.dark .logo-mark{background-image:url('../assets/logo-mark-white.png')}
::selection{background:rgba(40,135,232,.45);color:#fff}

/* ── top bar: dark glass ── */
.topbar,body.dark .topbar{background:rgba(8,8,10,.78);border-bottom:1px solid rgba(245,245,247,.08)}
.tb-brand{font-weight:800}
.tb-link,body.dark .tb-link{color:var(--cl-n4);font-weight:600}
.tb-link:hover,body.dark .tb-link:hover{color:var(--cl-n5);background:rgba(245,245,247,.06)}
.tb-link.on,body.dark .tb-link.on{color:var(--cl-n5);background:var(--cl-n2)}
.tb-week,body.dark .tb-week{background:rgba(40,135,232,.14);border-color:rgba(40,135,232,.45)}
.tb-week-n,body.dark .tb-week-n{color:#8CC4FF}
.tb-week-s,body.dark .tb-week-s{color:var(--cl-n4)}
.tb-week.done,body.dark .tb-week.done{background:rgba(48,209,88,.14);border-color:rgba(48,209,88,.4)}
.tb-week.done .tb-week-n,body.dark .tb-week.done .tb-week-n{color:var(--cl-ok)}
.tb-ava{background:var(--cl-blue);font-weight:800}
/* phones: the bar used to run 90px past a 375px screen. Keep the logo, drop the
   wordmark, and let the links take what is left instead of pushing the page wide. */
@media (max-width:560px){
  .tb-in{padding:10px;gap:6px}
  .tb-in > div:last-child{gap:6px!important}
  .tb-brand{font-size:0;gap:0}
  .tb-links{min-width:0;gap:0;overflow-x:auto;scrollbar-width:none}
  .tb-links::-webkit-scrollbar{display:none}
  .tb-link{padding:6px 6px;flex:none;font-size:12.5px}
  .tb-week{padding:5px 8px}
  .tb-week-n{white-space:nowrap}
}

/* ── cards: the homepage .gcard (dark, hairline, no drop shadow) ── */
.card{background:var(--cl-n1);border-color:rgba(245,245,247,.12);box-shadow:none}
.card-hover:hover{box-shadow:0 0 0 1px rgba(245,245,247,.2)}
.card-d{background:var(--cl-n1);border-color:rgba(245,245,247,.12)}
.hm-mission{border:1px solid rgba(245,245,247,.10)}

/* ── buttons: pill, 800 weight, solid blue primary ── */
.btn,body.dark .btn{background:var(--cl-n2);border:1px solid rgba(245,245,247,.16);color:var(--cl-n5);font-weight:700}
.btn:hover,body.dark .btn:hover{background:#232327;border-color:rgba(245,245,247,.32)}
.btn-primary,.btn-primary:hover,body.dark .btn-primary,body.dark .btn-primary:hover{background:var(--cl-blue);border:1px solid transparent;color:#fff;font-weight:800;box-shadow:0 4px 18px rgba(40,135,232,.35);filter:none}
.btn-primary:hover,body.dark .btn-primary:hover{background:var(--cl-blue-hover)}
.btn-primary:active,body.dark .btn-primary:active{background:var(--cl-blue-press)}
.btn-danger,body.dark .btn-danger{color:#FF8B8B;border-color:rgba(255,107,107,.42)}
.btn-danger:hover,body.dark .btn-danger:hover{background:rgba(255,107,107,.10)}
:focus-visible{outline:2px solid var(--cl-n5);outline-offset:3px}

/* ── links, chips, tags ── */
.link,body.dark .link{color:#8CC4FF}
.chip:hover{background:rgba(40,135,232,.24)}
.chip.block{background:rgba(255,107,107,.10)}
[data-tip]:hover::after,[data-tip]:focus-visible::after{background:var(--cl-n2);border:1px solid rgba(245,245,247,.14)}

/* ── forms ── */
.field input,.field select{background:var(--cl-n2);border-color:#333338;color:var(--cl-n5)}
.field input::placeholder{color:var(--cl-n3)}

/* ── lesson surfaces that were light paper ── */
.lz-ph{background:repeating-linear-gradient(45deg,#1B1B1E,#1B1B1E 10px,#151517 10px,#151517 20px)}
.fwl-mission,.fwl-meter,.fwl-tl{border:1px solid rgba(245,245,247,.10)}
.lz-seg button:not(.on),.stepper button{background:var(--cl-n2)}
.soon-veil{background:linear-gradient(180deg,rgba(8,8,10,.5),rgba(8,8,10,.78))}
.es-clabel{background:var(--cl-n2)}
.badge,body.dark .badge{background:var(--cl-n1);border-color:var(--cl-n25);color:var(--cl-n3)}

/* ── printing the certificate: paper, not the dark frame ── */
@media print{
  html,html:has(body.dark),body,body.dark{background:#fff!important}
  body::before{display:none}
}

/* ═══════════════ PHASE 2: illustrated moments ═══════════════ */

/* week scene colours: five scene colours rotate, capstones get golden hour */
[data-wk="1"],[data-wk="7"]{--wk:var(--cl-violet);--wk-ink:var(--cl-violet-ink);--wk-deep:#4F35C9;--wk-lite:#8468FF}
[data-wk="2"],[data-wk="9"]{--wk:var(--cl-coral);--wk-ink:var(--cl-coral-ink);--wk-deep:#D94E26;--wk-lite:#FF8A63}
[data-wk="3"],[data-wk="10"]{--wk:var(--cl-cyan);--wk-ink:var(--cl-cyan-ink);--wk-deep:#0D8FAD;--wk-lite:#3CCBE8}
[data-wk="5"],[data-wk="11"]{--wk:var(--cl-lime);--wk-ink:var(--cl-lime-ink);--wk-deep:#6AA82A;--wk-lite:#A3E05A}
[data-wk="6"]{--wk:var(--cl-rose);--wk-ink:var(--cl-rose-ink);--wk-deep:#A44D71;--wk-lite:#D98AAA}
[data-wk="4"],[data-wk="8"],[data-wk="12"]{--wk:var(--cl-gold);--wk-ink:var(--cl-gold-ink);--wk-deep:#C98A2E;--wk-lite:#FFD58A}

/* kit drawings fill their box */
.cl-art{display:block;width:100%;height:100%}

/* a scene: a sky/field that fills its box, and a square "world" centred in it
   (the same stage the homepage uses, so the drawings keep their proportions) */
.scene{position:absolute;inset:0;overflow:hidden;container-type:size}
.sc-world{position:absolute;inset:0;margin:auto;width:min(100cqw,100cqh);height:min(100cqw,100cqh)}
.sc-world > div{position:absolute}
.sc-golden{background:linear-gradient(to bottom,#1E1B4B 0%,#4B2A6B 34%,#B8435E 62%,#FF8A4C 84%)}
.sc-dusk{background:linear-gradient(to bottom,#14122E 0%,#2E1F4F 40%,#7A3553 70%,#C8603F 92%)}
.sc-week{background:var(--wk)}
.w-ground{left:-200%;right:-200%;top:83%;bottom:-200%;background:#2A1622}
.sc-week .w-ground{top:84%;background:var(--wk-deep)}
.w-disc{left:16%;top:8%;width:68%;aspect-ratio:1;border-radius:50%;background:var(--wk-lite)}
.w-sun{left:50%;top:63%;width:18%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#FFE2A0 0 38%,rgba(255,178,92,.5) 40%,rgba(255,140,80,0) 70%)}
.w-bulbs{left:-10%;width:120%;top:1%;height:15%}
.w-hills{left:-250%;width:600%;top:70%;height:14%}
.w-tripod{left:40%;top:63%;width:20%;height:24%}
.w-rig{left:29%;top:35%;width:42%;aspect-ratio:320/230;z-index:5}
.rig-scr{position:absolute;left:12.5%;top:30.43%;width:75%;height:46.09%;border-radius:6%/12%;overflow:hidden;background:#050506}
.rig-led{position:absolute;left:8.75%;top:7.83%;width:17.5%;height:13.04%;border-radius:6%;background:#FFF6DF;box-shadow:0 0 18px 5px rgba(255,236,190,.55)}
.rig-rec{position:absolute;left:17%;top:35%;display:flex;align-items:center;gap:.35em;font:700 clamp(7px,1.6cqh,11px)/1 var(--cl-mono);letter-spacing:.14em;color:#fff}
.rig-rec i{width:.6em;height:.6em;border-radius:50%;background:#FF3B30}
.w-teen{z-index:6}
.w-ta{left:3%;top:45%;width:20%;height:40%}
/* this teen is drawn from the waist up (on the homepage they stand behind the camera), so they always peek over the rig */
.w-tc{left:56%;top:31%;width:15%;height:30%;z-index:3}
.w-tb{left:64%;top:46%;width:19%;height:38%}
.w-td{left:80%;top:44%;width:19%;height:40%}
.w-chair{left:10%;top:63%;width:17%;aspect-ratio:100/120;z-index:4}
.w-slate{left:65%;top:75%;width:16%;aspect-ratio:125/100;z-index:7;transform:rotate(-8deg)}
/* the week card composition */
.sc-week .w-rig{left:26%;top:28%;width:48%}
.sc-week .w-tripod{left:40%;top:61%;width:20%;height:26%}
.sc-week .w-ta{left:1%;top:46%;width:21%;height:42%}
.sc-week .w-tb{left:78%;top:47%;width:20%;height:40%}
@media (prefers-reduced-motion:no-preference){
  .scene .tw{animation:cl-twinkle 2.8s ease-in-out infinite}
  .scene .tw:nth-child(4n+3){animation-delay:1.4s}
}
@keyframes cl-twinkle{50%{opacity:.45}}

/* rank badge sitting on a scene */
.sc-badge{position:absolute;right:16px;top:16px;z-index:8;display:flex;align-items:center;gap:8px;max-width:calc(100% - 32px);
  background:rgba(8,8,10,.72);border:1px solid rgba(245,245,247,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:5px 12px 5px 5px}
.sc-badge .cl-art{width:28px;height:28px;flex:none}
.sc-badge span{font:600 10.5px/1.25 var(--cl-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(245,245,247,.88)}

/* ── Welcome: the crew scene beside (desktop) or above (phone) the welcome ── */
.wl{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.wl-art{position:relative;margin:16px 0 16px 16px;border-radius:28px;overflow:hidden;min-height:calc(100vh - 32px)}
@media (max-width:800px){
  .wl{grid-template-columns:1fr;min-height:0}
  .wl-art{margin:12px;height:300px;min-height:0;border-radius:22px}
  .wl .center{min-height:0;padding:20px 20px 48px}
}

/* ── sign in, sign up, forgot, reset: a small illustrated panel, plain forms ── */
.auth{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.auth-form{order:1;display:flex;flex-direction:column;justify-content:center}
.auth-art{order:2;position:relative;margin:16px 16px 16px 0;border-radius:28px;overflow:hidden;min-height:calc(100vh - 32px)}
@media (max-width:800px){
  .auth{grid-template-columns:1fr;min-height:0}
  .auth-art{order:0;margin:12px 12px 0;height:150px;min-height:0;border-radius:20px}
  .auth-art .w-teen,.auth-art .w-chair{display:none}
}

/* ── Home: the week card's illustrated half, the week colour, the mini road ── */
.hm-mission[data-wk]{box-shadow:inset 0 4px 0 var(--wk)}
.hm-mission > div.hm-art{position:relative;min-height:300px;border-left:1px solid #26262A;overflow:hidden}
@media (max-width:760px){
  .hm-mission > div.hm-art{order:-1;min-height:250px!important;border-top:0!important}
}
.tb-week[data-wk],body.dark .tb-week[data-wk]{background:color-mix(in srgb,var(--wk) 16%,transparent);border-color:color-mix(in srgb,var(--wk) 55%,transparent)}
.tb-week[data-wk] .tb-week-n,body.dark .tb-week[data-wk] .tb-week-n{color:var(--wk-ink)}
.hm-road{display:block;margin:-40px 0 64px;padding:16px 20px 12px;border-radius:18px;background:var(--cl-n1);border:1px solid rgba(245,245,247,.12);color:var(--cl-n5);text-decoration:none;transition:border-color 120ms var(--cl-e-out)}
.hm-road:hover{border-color:rgba(245,245,247,.3)}
.hm-road-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.hm-road-h .mono{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--cl-n4)}
.hm-road-go{font-size:14px;font-weight:700;color:#8CC4FF}
.hm-road svg{display:block;width:100%;height:auto;overflow:visible;margin-top:4px}
.hm-road-acts{display:grid;grid-template-columns:repeat(3,1fr);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cl-n3);text-align:center}
.mr-road{fill:none;stroke:var(--cl-n25);stroke-width:14;stroke-linecap:round}
.mr-lane{fill:none;stroke:rgba(245,245,247,.2);stroke-width:1.5;stroke-dasharray:6 8}
.mr-done{fill:var(--cl-ok)}
.mr-tick{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mr-halo{fill:var(--wk);opacity:.22}
.mr-now{fill:var(--wk)}
.mr-now-t{font:800 12px var(--cl-sans);fill:#07080A;text-anchor:middle}
.mr-lock{fill:var(--cl-n1);stroke:#333338;stroke-width:2}
.mr-lock-t{font:700 10px var(--cl-sans);fill:var(--cl-n3);text-anchor:middle}
.mr-dim{opacity:.55}
.mr-pole{stroke:var(--cl-n3);stroke-width:2}
.mr-flag{fill:var(--cl-gold)}
.mr-cap-t{font:500 10px var(--cl-mono);letter-spacing:1px;fill:var(--cl-n4)}
.mr-end{text-anchor:end}
@media (max-width:560px){ .hm-road{margin-top:-48px;padding:14px 12px 8px} .hm-road-acts,.mr-cap-t{display:none} }

/* ── Program: the road runs down the page, acts get their landmark ── */
.act-head{display:grid;grid-template-columns:minmax(0,1fr) 210px;grid-template-rows:auto auto auto 1fr;column-gap:28px;align-items:start}
.act-head > div:nth-child(2){grid-column:1 / -1}
.act-head > h2,.act-head > p{grid-column:1}
.act-art{grid-column:2;grid-row:2 / span 3;width:210px;aspect-ratio:280/200;border-radius:18px;overflow:hidden;margin-top:18px}
.act-art[data-act="1"]{background:linear-gradient(to bottom,#241B4A,#3B2F6B)}
.act-art[data-act="2"]{background:linear-gradient(to bottom,#2A1A14,#5A2E1E)}
.act-art[data-act="3"]{background:linear-gradient(to bottom,#2A1020,#4A1A34)}
@media (max-width:640px){
  .act-head{display:block}
  .act-art{width:100%;max-width:340px;margin:0 0 18px}
}
.road-list{position:relative;padding-left:60px}
.road-list::before{content:"";position:absolute;left:18px;top:0;bottom:0;width:14px;border-radius:7px;background:var(--cl-n25)}
.road-list::after{content:"";position:absolute;left:24.25px;top:8px;bottom:8px;width:1.5px;background:repeating-linear-gradient(to bottom,rgba(245,245,247,.22) 0 6px,transparent 6px 14px)}
.road-list .wk-row,.road-list .wk-hero{position:relative}
.rd-node{position:absolute;left:-55px;top:50%;transform:translateY(-50%);z-index:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--cl-n1);border:2px solid #3A3A40;color:#fff}
.wk-row[data-st="done"] .rd-node{background:var(--cl-ok);border-color:var(--cl-ok)}
.wk-row[data-cap="1"] .rd-node{border-color:var(--cl-gold)}
.wk-row[data-st="done"][data-cap="1"] .rd-node{box-shadow:0 0 0 3px var(--cl-gold)}
.wk-row[data-st="locked"] .rd-node,.wk-row[data-st="gated"] .rd-node{opacity:.6}
.wk-hero[data-wk]{border-left-color:var(--wk)!important}
.rd-here{left:-72px;width:62px;height:62px;padding:8px 6px 10px;border:3px solid var(--cl-n0);background:var(--wk);box-shadow:0 0 0 6px color-mix(in srgb,var(--wk) 26%,transparent)}
.rd-here .cl-art{height:auto}
@media (max-width:560px){
  .road-list{padding-left:44px}
  .road-list::before{left:10px;width:12px}
  .road-list::after{left:15.25px}
  .rd-node{left:-43px;width:24px;height:24px}
  .rd-here{left:-58px;width:52px;height:52px;padding:7px 5px 8px}
}
.rk-badge{width:34px;height:34px;flex:none;opacity:.4;filter:grayscale(.6)}
.rk-badge.on{opacity:1;filter:none}

/* ── a week's trailer at the top of its lesson ── */
.wk-trailer{margin:14px 0 16px;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(245,245,247,.1),0 18px 50px rgba(108,77,246,.22)}
.wk-trailer iframe{display:block;width:100%;aspect-ratio:16/9;border:0}