/* Wain themes: dark (today's look, the default) and light. Claude Design, round 5, steps 2 and 3.
   Load after styles.css and wain-v2.css. The same classes serve both themes; only the tokens change.
   - Dark is :root as today. Light is the same token names, new values, on :root[data-theme="light"].
   - You > Appearance stores 'dark' | 'light' | 'auto' (default 'dark'). For 'auto' the app sets data-theme
     from matchMedia('(prefers-color-scheme: light)') and listens for changes; the map follows with
     wainMapLookFor(setting) from map-look.js, so map and interface always switch together.
   - --white keeps its name: it is the primary surface (white by night, ink by day), so no rule changes for it.
   - CHANGED rules: colours the stylesheet wrote as literals, moved onto tokens. They look identical by night. */
:root{--canvas:#05070B}  /* NEW token: behind the screens (was a literal on .wain) */
:root[data-theme="light"]{
--canvas:#FFFFFF;--panel:#FFFFFF;--panel2:#F1F4F8;--hair:rgba(15,23,42,.1);
--ink:#0B1320;--ink2:#4A5566;--ink3:#5E6979;--accent-ink:#B5391C;
--you:#1F5FD1;--friend:#067566;--gold:#8C5E00;--accent:#E5532F;--white:#0B1320;
--on-white:#FFFFFF;--on-friend:#FFFFFF;--on-gold:#FFFFFF;
--glass:rgba(255,255,255,.94);--scrim:rgba(15,23,42,.42);--rec:#E0364A;
--mode-walk:#0E9F86;--mode-run:#E5486D;--mode-bike:#D98A12;--mode-car:#2F6FE0;--mode-ride:#4F86F0;--mode-bus:#8A63E8;--mode-metro:#8A63E8;--mode-flight:#C98A12;--mode-gap:#8A94A3;
--place-home:#E5532F;--place-work:#2F6FE0;--place-other:#C98A12;
--map-ground:#D6DBE2;--map-water:#A8C6CE;--map-road:#FFFFFF;--map-road-edge:#C5CED9;--map-wood:#D8E6DA;--map-rail:#C9D0DA;--map-building:#F4F6F9;--map-label:#3E4C5D;--map-halo:#FFFFFF;
color-scheme:light;
}

/* CHANGED (generated from wain-app.css, 104 rules): the other literal colours, moved onto the tokens: brand tints via color-mix,
   white hairlines and washes via --ink, dark glass via --glass, scrims via --scrim. Identical by night. Kept on purpose (16 rules):
   the incoming-call screen and call bar (dark in both themes), the no-connection bar, white map chips, avatars, Flare, the power-saver face. */
.frgo{background:color-mix(in srgb,var(--friend) 12%,transparent);border:1px solid color-mix(in srgb,var(--friend) 35%,transparent)}
.tlhome{border:1px solid color-mix(in srgb,var(--you) 38%,transparent)}
.tlhome .trec{background:var(--rec);box-shadow:color-mix(in srgb,var(--rec) 20%,transparent) 0px 0px 0px 3px}
.wherebtn{background:color-mix(in srgb,var(--gold) 10%,transparent);border:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
.navbtn{background:color-mix(in srgb,var(--you) 10%,transparent);border-color:color-mix(in srgb,var(--you) 40%,transparent)}
.pcard{background:var(--scrim)}
.chatwrap{background:var(--scrim)}
.cbtnh{border:1px solid color-mix(in srgb,var(--friend) 40%,transparent);background:color-mix(in srgb,var(--friend) 10%,transparent)}
.cmsg.mine .ctx{background:color-mix(in srgb,var(--friend) 14%,transparent);border-color:color-mix(in srgb,var(--friend) 35%,transparent)}
.chatin:focus{border-color:color-mix(in srgb,var(--friend) 45%,transparent)}
.chatsend{color:var(--on-friend)}
.ondot{box-shadow:color-mix(in srgb,var(--friend) 15%,transparent) 0px 0px 0px 3px}
.cobtn.ok{color:var(--on-friend)}
#toast.tap{border-color:color-mix(in srgb,var(--friend) 50%,transparent)}
.dimeta{color:color-mix(in srgb,var(--ink) 28%,transparent)}
.dimline{color:color-mix(in srgb,var(--friend) 35%,transparent)}
.cta{color:var(--on-white)}
.livebtn{color:var(--on-friend)}
.jav{box-shadow:color-mix(in srgb,var(--friend) 14%,transparent) 0px 0px 0px 6px, rgba(0, 0, 0, 0.7) 0px 18px 40px -12px}
.jpriv{background:color-mix(in srgb,var(--friend) 6%,transparent);border:1px solid color-mix(in srgb,var(--friend) 20%,transparent)}
.demo-pill{background:var(--glass)}
.banner{background:var(--glass)}
.fltbtn{border-color:color-mix(in srgb,var(--gold) 45%,transparent);background:color-mix(in srgb,var(--gold) 9%,transparent)}
.ubrbtn{border-color:color-mix(in srgb,var(--ink) 28%,transparent);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.fltbar{background:var(--glass);border:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
.fltmk .fplane{filter:drop-shadow(color-mix(in srgb,var(--gold) 55%,transparent) 0px 0px 10px)}
.fltmk .flab{background:var(--glass)}
.endmeet{border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.etaCard{background:var(--glass)}
.pill{background:color-mix(in srgb,var(--friend) 14%,transparent);border:1px solid color-mix(in srgb,var(--friend) 30%,transparent)}
.peermk .plabel{background:var(--glass);color:var(--ink)}
.ride.on{border-color:color-mix(in srgb,var(--friend) 55%,transparent);background:color-mix(in srgb,var(--friend) 8%,transparent)}
.sharebar{background:color-mix(in srgb,var(--friend) 13%,transparent);border:1px solid color-mix(in srgb,var(--friend) 30%,transparent)}
.sharebtn{color:var(--on-friend)}
.backfab{background:var(--glass);color:var(--ink)}
.meethint{background:var(--glass);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
.fab{background:var(--glass)}
.badge{color:var(--on-white)}
.dav{box-shadow:color-mix(in srgb,var(--friend) 20%,transparent) 0px 0px 0px 3px}
.find{color:var(--on-white)}
.fback{border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);background:color-mix(in srgb,var(--ink) 10%,transparent)}
.flab{color:color-mix(in srgb,var(--ink) 70%,transparent)}
.pulse{border:2px solid color-mix(in srgb,var(--gold) 50%,transparent)}
.bdot{box-shadow:color-mix(in srgb,var(--gold) 90%,transparent) 0px 0px 12px}
.dist .unit{color:color-mix(in srgb,var(--ink) 60%,transparent)}
.bars i{background:color-mix(in srgb,var(--gold) 85%,transparent)}
.met{background:color-mix(in srgb,var(--ink) 5%,transparent);color:color-mix(in srgb,var(--ink) 72%,transparent)}
.fver{background:color-mix(in srgb,var(--friend) 13%,transparent);border:1px solid color-mix(in srgb,var(--friend) 35%,transparent)}
.fnote{color:color-mix(in srgb,var(--ink) 60%,transparent)}
.fagain{color:var(--on-white)}
.tl-ib{background:var(--glass)}
.tl-ttl{background:var(--glass)}
.tl-rec{background:var(--glass)}
.tl-rec.on i{background:var(--rec);box-shadow:color-mix(in srgb,var(--rec) 20%,transparent) 0px 0px 0px 3px}
.tl-banner{background:color-mix(in srgb,var(--gold) 9%,transparent);border:1px solid color-mix(in srgb,var(--gold) 35%,transparent)}
.tl-banner.info{background:color-mix(in srgb,var(--friend) 7%,transparent);border-color:color-mix(in srgb,var(--friend) 30%,transparent)}
.tl-grad{box-shadow:color-mix(in srgb,var(--you) 80%,transparent) 0px 12px 28px -14px}
.tl-tag{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.tl-tag.now{color:var(--rec);background:color-mix(in srgb,var(--rec) 12%,transparent)}
.tl-tag.guess{background:color-mix(in srgb,var(--gold) 12%,transparent)}
.tl-mom{background:color-mix(in srgb,var(--friend) 10%,transparent);border:1px solid color-mix(in srgb,var(--friend) 30%,transparent)}
.tl-mom.flight{background:color-mix(in srgb,var(--gold) 10%,transparent);border-color:color-mix(in srgb,var(--gold) 35%,transparent)}
.tl-mom.uber{background:color-mix(in srgb,var(--ink) 6%,transparent);border-color:color-mix(in srgb,var(--ink) 20%,transparent)}
.tlp-del{border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.tlp-in input:focus{border-color:color-mix(in srgb,var(--friend) 50%,transparent)}
.tlp-btn{color:var(--on-friend)}
.tls-seg button.on{color:var(--on-white)}
.tls-priv{background:color-mix(in srgb,var(--friend) 6%,transparent);border:1px solid color-mix(in srgb,var(--friend) 22%,transparent)}
.tl-dlg{background:var(--scrim)}
.tl-dlg button.ok{color:var(--on-white)}
.tlo-b{color:var(--ink)}
.tl-white{color:var(--on-white)}
.tlr{color:var(--ink)}
.tlr-av .plane{filter:drop-shadow(color-mix(in srgb,var(--gold) 60%,transparent) 0px 0px 10px)}
.tlr-pin .lab{background:var(--glass);border:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.tlr-bars i{background:color-mix(in srgb,var(--ink) 25%,transparent)}
.tlr-kk{color:color-mix(in srgb,var(--ink) 78%,transparent)}
.tlr-x{background:color-mix(in srgb,var(--ink) 13%,transparent);color:var(--ink)}
.tlr-chip{background:color-mix(in srgb,var(--panel) 74%,transparent);border:1px solid color-mix(in srgb,var(--ink) 13%,transparent)}
.tlr-chip .mi{color:var(--ink)}
.tlr-chip i{color:color-mix(in srgb,var(--ink) 65%,transparent)}
.tlr-odo{color:color-mix(in srgb,var(--ink) 78%,transparent)}
.tlr-cap{background:var(--glass);border:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.tlr-cap.big{border-color:color-mix(in srgb,var(--gold) 50%,transparent)}
.tlr-after{color:color-mix(in srgb,var(--ink) 72%,transparent);background:color-mix(in srgb,var(--ink) 8%,transparent);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.tlr-kick{color:color-mix(in srgb,var(--ink) 72%,transparent)}
.tlr-ft i{color:color-mix(in srgb,var(--ink) 50%,transparent)}
.tlr-icons .mi{color:var(--ink)}
.tlr-icons em{color:color-mix(in srgb,var(--ink) 45%,transparent)}
.tlr-when{color:color-mix(in srgb,var(--ink) 75%,transparent)}
.tlr-glyph{background:color-mix(in srgb,var(--panel) 62%,transparent)}
.tlr-sum{border:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.tlr-sk{color:color-mix(in srgb,var(--ink) 55%,transparent)}
.tlr-sr{color:color-mix(in srgb,var(--ink) 70%,transparent)}
.tlr-grid div{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.tlr-grid span{color:color-mix(in srgb,var(--ink) 50%,transparent)}
.tlr-sum .tl-legend{color:color-mix(in srgb,var(--ink) 70%,transparent)}
.tlr-sum .tl-legend b{color:var(--ink)}
.tlr-acts button{background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--ink)}
.tlr-row{color:color-mix(in srgb,var(--ink) 66%,transparent)}
.tlr-btn{background:color-mix(in srgb,var(--ink) 13%,transparent);color:var(--ink)}
.tlr-attr{color:color-mix(in srgb,var(--ink) 32%,transparent)}

/* CHANGED: literal colours → tokens */
html,body{background:var(--canvas)}
.livebtn{color:var(--on-friend)}
.cta{color:var(--on-white)}
.frgo{background:color-mix(in srgb,var(--friend) 12%,transparent);border-color:color-mix(in srgb,var(--friend) 35%,transparent)}
.fltbtn{border-color:color-mix(in srgb,var(--gold) 45%,transparent);background:color-mix(in srgb,var(--gold) 9%,transparent);color:var(--gold)}
.ubrbtn{border-color:color-mix(in srgb,var(--ink) 28%,transparent);background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
.ride.on{border-color:color-mix(in srgb,var(--friend) 55%,transparent);background:color-mix(in srgb,var(--friend) 8%,transparent)}
.ondot{box-shadow:0 0 0 3px color-mix(in srgb,var(--friend) 15%,transparent)}
.tlhome .trec{background:var(--rec);box-shadow:0 0 0 3px color-mix(in srgb,var(--rec) 20%,transparent)}
.pcard{background:var(--scrim)}

/* light only: shadows soften, and the white car renders get the same hairline and shadow as on the day map */
:root[data-theme="light"] .pin2{box-shadow:0 24px 64px rgba(16,24,40,.22)}
:root[data-theme="light"] .welcar{filter:drop-shadow(0 0 .6px rgba(16,24,40,.6)) drop-shadow(0 8px 14px rgba(16,24,40,.22))}
:root[data-theme="light"] .ridecv{filter:drop-shadow(0 0 .6px rgba(16,24,40,.6)) drop-shadow(0 2px 3px rgba(16,24,40,.18))}

/* images made for one theme (map stills): the app swaps the src; the mock shows one or the other */
.th-light,img.th-light{display:none}
:root[data-theme="light"] .th-light,:root[data-theme="light"] img.th-light{display:block}
:root[data-theme="light"] .th-dark,:root[data-theme="light"] img.th-dark{display:none}

/* CHANGED: the live map, onto tokens */
.banner,.etaCard,.backfab,.fab,.fltbar,.demo-pill{background:var(--glass)}
.backfab{color:var(--ink)}
.peermk .plabel{background:var(--glass);color:var(--ink)}
.badge{color:var(--on-white)}
.pill,.sharebar{background:color-mix(in srgb,var(--friend) 14%,transparent);border-color:color-mix(in srgb,var(--friend) 30%,transparent)}
.sharebtn{color:var(--on-friend)}
.endmeet{border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
:root[data-theme="light"] .sheet{box-shadow:0 -10px 32px rgba(16,24,40,.12)}

/* CHANGED: the finder. The dial's lines follow the ink; Flare stays bright gold in both themes, because it is a light */
.dial .face line{stroke:color-mix(in srgb,var(--ink) 16%,transparent)}
.dial .face line[stroke]{stroke:color-mix(in srgb,var(--ink) 32%,transparent)}
.dial .face circle:nth-of-type(1){stroke:color-mix(in srgb,var(--ink) 10%,transparent)}
.dial .face circle:nth-of-type(2){stroke:color-mix(in srgb,var(--ink) 7%,transparent)}
.dial .face circle:nth-of-type(3){stroke:color-mix(in srgb,var(--ink) 5%,transparent)}
.flare{background:linear-gradient(180deg,#FFDD8A,#FFC24B);color:#2E1D00}
.met{background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--ink2)}
:root[data-theme="light"] #arrow path{stroke:#B97A0C;stroke-width:1.6}

/* CHANGED: the Timeline (the CSS inside timeline-ui.js), onto tokens; its trip colours (cvars) read the mode and place tokens.
   Prefixed with :root so these win over the Timeline's own sheet wherever the app injects it. */
:root .tl{background:var(--canvas)}
:root .tl-ib,:root .tl-ttl,:root .tl-rec{background:var(--glass)}
:root .tl-rec.on i{background:var(--rec);box-shadow:0 0 0 3px color-mix(in srgb,var(--rec) 20%,transparent)}
:root .tl-day.on{color:color-mix(in srgb,var(--on-white) 72%,transparent)}
:root .tl-day.on b{color:var(--on-white)}
:root .tl-sw.on::after{background:var(--on-friend)}
:root .tls-seg button.on{color:var(--on-white)}
:root .tl-grad{color:#04140F}
:root .tl-tag{background:color-mix(in srgb,var(--ink) 7%,transparent)}
:root .tl-thumb{background:color-mix(in srgb,var(--ink) 4%,var(--panel))}
:root .tl-banner{background:color-mix(in srgb,var(--gold) 9%,transparent);border-color:color-mix(in srgb,var(--gold) 35%,transparent);color:var(--gold)}
:root .tl-banner.info{background:color-mix(in srgb,var(--friend) 7%,transparent);border-color:color-mix(in srgb,var(--friend) 30%,transparent);color:var(--friend)}
:root .tl-banner button span{color:var(--panel)}
:root .tl-mom.uber{background:color-mix(in srgb,var(--ink) 6%,transparent);border-color:color-mix(in srgb,var(--ink) 20%,transparent)}
:root[data-theme="light"] .tl-sheet{box-shadow:0 -12px 40px rgba(16,24,40,.12)}
/* the finder by day: ink text, no night glow behind the number */
.finder{color:var(--ink)}
.flab{flex:1 1 auto}
:root[data-theme="light"] .dist{text-shadow:none}

/* ---------- round 9: light review of the 27 screens not mocked (qa/light-review.html) ---------- */
:root{--accent-ink:#FF6A45}   /* NEW token: accent used as text (End meetup, Delete); deeper by day: 5.3:1 */
.endmeet,.pquiet.danger{color:var(--accent-ink)}   /* CHANGED: 3.4:1 by day → 5.3:1 */
.frav,.me,.pav,.chav,.bav,.dav{color:#0A0E14}   /* CHANGED, both themes: initials on the bright avatar colours were white (teal 1.7:1, orange 2.8:1); dark ink is 6.5–11:1 */
#toast{background:var(--glass)}   /* CHANGED: was a night-only literal, so by day the text vanished (1.1:1) */
:root[data-theme="light"] #toast{box-shadow:0 10px 28px rgba(16,24,40,.18)}
/* --ink3 by day: #677284 → #5E6979, so small labels (the Timeline's day strip) reach 5:1 on the grey cards (was 4.4:1) */
/* stays dark in both themes, by design: the replay reel, the incoming call and ring, the call bar. By day they keep the night tokens */
:root[data-theme="light"] .tlr,:root[data-theme="light"] .ringover,:root[data-theme="light"] .callbar,:root[data-theme="light"] .flash{
--panel:#0C1118;--panel2:#141B25;--hair:rgba(255,255,255,.09);--ink:#F2F6FA;--ink2:#9AA7B6;--ink3:#7D8896;--you:#4C8DFF;--friend:#1FE0BC;--gold:#FFC24B;--accent:#FF6A45;--accent-ink:#FF6A45;
--white:#F7FAFC;--on-white:#0A0E14;--on-friend:#04140F;--glass:rgba(10,15,22,.9);
--mode-walk:#1FE0BC;--mode-run:#FF6A88;--mode-bike:#FFB547;--mode-car:#4C8DFF;--mode-ride:#78A9FF;--mode-bus:#B08CFF;--mode-metro:#B08CFF;--mode-flight:#FFC24B;color-scheme:dark}
.cobtn.no{background:#C63D23}   /* CHANGED, both themes: white on the orange was 2.8:1; on this deeper red it is 4.7:1 */
:root .tlp-del{color:var(--accent-ink)}   /* CHANGED: Delete this trip, 3.4:1 by day → 5.3:1 */
/* by day, a mode or place colour used as text is mixed 30% toward black, so chips and labels pass 4.5:1 on their own tint */
:root[data-theme="light"] .tl-chip:not(.tlr .tl-chip),:root[data-theme="light"] .tlp-lb.on,:root[data-theme="light"] .tlp-mode{color:color-mix(in srgb,var(--c) 55%,#000)}   /* 55% toward black: 4.7–7.5:1 on their tint; the dark reel keeps its own */
:root .tlr-attr{color:var(--ink2)}   /* CHANGED, both themes: the map credit in the replay reel was 2.6:1 */
:root[data-theme="light"] .tl-tag{color:var(--ink2)}
/* "You found them!" by day: the night gradient would hide the ink text */
:root[data-theme="light"] .found{background:radial-gradient(85% 60% at 50% 38%,color-mix(in srgb,var(--friend) 10%,var(--panel)),var(--panel))}
:root[data-theme="light"] .favs span{box-shadow:0 0 0 4px var(--panel),0 12px 28px -10px rgba(16,24,40,.3)}