/* Wain v2: the proposed CSS for app/index.html (Claude Design, rounds 1 and 5).
Colours are tokens only, so wain-theme.css can switch the whole app to light.
Load after styles.css. Scoped under .wain, like the app's own stylesheet.
CHANGED = an existing app class gets new values. NEW = a class the app doesn't have yet.
Every value is built on the app's tokens; the only new tokens are the type ramp and --tap. */
:root{
/* NEW tokens: one type ramp for the whole app, and a floor for anything tappable */
--fs-label:11.5px; /* caps labels (was 10–10.5px) */
--fs-meta:12.5px; /* secondary lines read on the move (was 10.5–11px) */
--fs-body:14.5px;
--fs-title:16px; /* sheet and card titles: never bigger than the number that matters */
--fs-eta:20px; /* ETA cards (was 15px) */
--fs-badge:30px; /* the white ETA badge: the biggest number on the live map (was 21px) */
--fs-dist:96px; /* the finder's distance (was 68px) */
--tap:44px; /* minimum touch target */
}
/* ---------- every screen ---------- */
.backfab{top:14px;width:var(--tap);height:var(--tap);font-size:18px} /* CHANGED 38 → 44, aligned with the banner */
.fab{width:46px;height:46px} /* CHANGED 42 → 46 */
.fabcol{bottom:120px;gap:12px} /* CHANGED: clears the shorter sheet */
.me{width:var(--tap);height:var(--tap);font-size:15px} /* CHANGED 32 → 44 */
.lbl2{font-size:var(--fs-label);color:var(--ink2);letter-spacing:.14em} /* CHANGED: 10px --ink3 (3.6:1) → 11.5px --ink2 (7.7:1) */
.peermk .plabel{font-size:12px;padding:3px 9px} /* CHANGED 11 → 12px */
.mk.meet .plabel{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:4px;background:var(--glass);color:var(--gold);font-size:12px;font-weight:800;padding:3px 9px;border-radius:var(--r-chip);white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.5)} /* NEW: the meeting pin's label gets the same chip as the cars, in gold */
.mk.meet,.maplibregl-marker.peermk{position:absolute}
/* ---------- home ---------- */
.hero{margin:6px 2px 20px}
.hs{font-size:14px} /* CHANGED 13.5 → 14px */
.liverow{grid-template-columns:1.2fr 1fr;gap:10px} /* CHANGED: the primary gets the wider half */
.livebtn{min-height:52px;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px} /* CHANGED: 52px, icon and text centred */
.livebtn.primary{background:var(--white);color:var(--on-white)} /* NEW: primary = white, like .cta, .find and Meet now */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px} /* NEW: the other ways to meet, side by side */
.ways .livebtn{min-height:86px;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px;text-align:left;padding:13px 14px 14px;font-size:14px;line-height:1.25;border-width:1px;border-style:solid}
.ways .livebtn .i{width:20px;height:20px}
.ways .fltbtn{border-color:color-mix(in srgb,var(--gold) 30%,transparent)}
.ways .ubrbtn{background:var(--panel2);border-color:var(--hair);color:var(--ink)}
.tlhome{margin-top:10px;background:var(--panel2);border-color:var(--hair)} /* CHANGED: calmer card; the icon keeps the Timeline's own gradient */
.tlhome .ts{font-size:var(--fs-meta)}
.frsec .lbl2{display:flex;align-items:center;justify-content:space-between;margin-top:20px;margin-bottom:2px}
.lblbtn{float:none;min-height:var(--tap);padding:0 2px;font-size:var(--fs-label);white-space:nowrap} /* CHANGED: a real 44px target */
.fr{gap:12px;padding:10px 2px}
.frav{width:42px;height:42px;font-size:15px}
.frn{font-size:15px}
.frs{font-size:var(--fs-meta);color:var(--ink2)} /* CHANGED: --ink3 → --ink2 */
.frgo{min-height:var(--tap);padding:0 18px;font-size:13.5px;border-radius:var(--r-btn)} /* CHANGED: ~32 → 44px */
.pad .ridesec{margin:18px 0 16px}
.ride{width:76px;padding:8px 4px 9px}
.ridelab{font-size:var(--fs-label)}
.priv{font-size:12px}
/* ---------- home, round 5: one screen in order of importance (structure: see WainV2, step 2) ---------- */
.hello{margin:0 0 4px;font-size:14px;font-weight:700;color:var(--ink2)} /* NEW: a returning user gets a greeting, not the pitch */
.hero.back{margin:2px 2px 18px}
.hero.back .ht{font-size:28px}
.upnext{margin:0 0 12px;padding:2px 12px;background:var(--panel2);border:1px solid color-mix(in srgb,var(--gold) 38%,transparent);border-radius:var(--r-card)} /* NEW: a planned or live meetup leads the screen (was "Upcoming meetups", under the friends) */
.upnext .fr{border-bottom:0}
.upnext .frav{background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--gold)}
.upnext .frs{color:var(--gold);font-weight:700}
.sec{margin-top:22px} /* NEW: one rhythm between the groups */
.ways .livebtn b{display:block;font-size:14.5px;font-weight:800;line-height:1.25;color:var(--ink)}
.ways .livebtn small{display:block;margin-top:3px;font-size:var(--fs-meta);font-weight:600;line-height:1.35;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ways .livebtn>span{min-width:0;max-width:100%}
@media (max-width:380px){.liverow{grid-template-columns:1fr 1fr}.liverow .livebtn{padding:13px 10px}.ways .livebtn b{font-size:13.5px}} /* small phones: both buttons on one line each */
.flare bdi{white-space:nowrap} /* a friend's name stays in one piece on the Flare button */
.ways .fltbtn .i{color:var(--gold)}
.tlhome.off .tic{filter:saturate(.35);opacity:.8} /* NEW: the Timeline before it is turned on */
.how{margin-top:16px;background:var(--panel2);border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden} /* NEW: what a brand-new user sees instead of the demos */
.how img{display:block;width:100%;height:150px;object-fit:cover;border-bottom:1px solid var(--hair)}
.how ol{list-style:none;margin:0;padding:2px 14px 4px}
.how li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--hair)}
.how li:first-child{border-top:0}
.how .hn{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:800;background:var(--panel);border:1px solid var(--hair);color:var(--ink)}
.how .hm{flex:1;min-width:0}
.how .hm b{display:block;font-size:14.5px;font-weight:800}
.how .hm i{display:block;margin-top:2px;font-style:normal;font-size:var(--fs-meta);line-height:1.45;color:var(--ink2)}
.frempty{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--panel2);border:1px solid var(--hair);border-radius:var(--r-card)} /* NEW: friends, before the first meetup */
.frempty p{margin:0;flex:1;min-width:0;font-size:var(--fs-meta);line-height:1.45;color:var(--ink2)}
.frempty .livebtn{flex:0 0 auto;min-height:var(--tap);padding:0 14px;font-size:13.5px;white-space:nowrap}
/* first launch: name and car on one card (was a name-only card; the car picker sat on home) */
.pin2.welcome{padding:22px 20px 20px}
.welcar{display:block;width:150px;height:150px;margin:-10px auto -16px;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
.welcome .namein{margin-top:16px;text-align:center;font-size:16px;font-weight:700}
.welcome .lbl2{margin:6px 0 8px;text-align:left}
.ridegrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;overflow:visible} /* NEW: all eight cars at once */
.ridegrid .ride{width:auto;padding:8px 2px 9px}
/* ---------- You: profile, history and settings in one place (round 5) ---------- */
.pagehead{display:flex;align-items:center;gap:12px;margin:0 0 16px} /* NEW: a full-screen page's header, back then title */
.pagehead .pn{font-size:24px}
.youcard{display:flex;align-items:center;gap:14px;width:100%;padding:14px;border-radius:var(--r-card);background:var(--panel2);border:1px solid var(--hair);color:var(--ink);font-family:inherit;text-align:left;cursor:pointer} /* NEW: you, as friends see you */
.youcard .frav{width:52px;height:52px;font-size:20px}
.youcard .ym{flex:1;min-width:0}
.youcard .ym b{display:block;font-size:17px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.youcard .ym span{display:block;margin-top:3px;font-size:var(--fs-meta);color:var(--ink2)}
.youcard img{width:58px;height:58px;object-fit:contain;flex:none}
/* PROMOTED: the Timeline's settings controls (.tl-lbl, .tls-row, .tls-seg, .tl-sw, .tls-btn in timeline-ui.js) become the app's settings controls */
.you .tl-lbl{margin:22px 2px 2px;font-size:var(--fs-label);color:var(--ink2)} /* CHANGED: 10px --ink3 → the .lbl2 size and colour */
.you .tls-row span{font-size:var(--fs-meta)}
.you .tls-btn{min-height:52px;font-size:14.5px;font-weight:700}
.you .tls-btn .chev{font-size:16px;color:var(--ink3)}
.ygroup{background:var(--panel2);border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden} /* NEW: one card per group of settings */
.ygroup>*+*{border-top:1px solid var(--hair)}
.ygroup>.tls-btn{margin:0;border:0;border-radius:0;background:transparent;padding:12px 14px}
.ygroup>.tls-row{padding:14px;border-bottom:0;align-items:flex-start}
.ygroup>.tls-row>.tl-sw{align-self:center}
.ytile{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none;color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent)} /* NEW: a tinted icon tile, in the colour of what the row is about */
.ytile .tli{width:17px;height:17px}
.ygroup .tls-btn>.ytile,.ygroup .tls-row>.ytile{flex:0 0 32px;width:32px} /* the Timeline's .tls-btn span{flex:1} must not stretch the tile */
.you .tls-btn i{color:var(--ink2);white-space:nowrap}
:root .tl-legend span,:root .tl-legend b{white-space:nowrap} /* CHANGED: a legend entry never breaks between the number and its unit */
/* ---------- live map ---------- */
.demo-pill{display:none} /* CHANGED: the live state moves into the banner */
.banner{top:14px;left:68px;min-height:var(--tap);padding:10px 12px} /* CHANGED: one layer, flush with the back button */
.bav{width:36px;height:36px;font-size:14px}
.bt1{font-size:15px}
.bt2{font-size:var(--fs-meta);margin-top:2px}
.btag{flex:0 0 auto;align-self:flex-start;display:flex;align-items:center;gap:6px;margin-top:3px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);white-space:nowrap} /* NEW: LIVE / DEMO / OFFLINE inside the banner */
.btag i{width:7px;height:7px;border-radius:50%;background:var(--friend)}
.btag.off i{background:var(--ink3)}
.etaCard{padding:9px 12px 10px;gap:10px}
.etaCard .ecn{font-size:var(--fs-label);letter-spacing:0} /* CHANGED: no tracking, so Arabic names keep their joins */
.etaCard .ece{font-size:var(--fs-eta);line-height:1.1;margin-top:2px} /* CHANGED 15 → 20px */
.etaCard .ece small{font-size:13px;font-weight:700;color:var(--ink2);margin-left:4px} /* NEW: the unit steps back */
.etaCard .ecd{font-size:var(--fs-meta);margin-top:2px} /* CHANGED 10.5 → 12.5px */
.etaCard.stale{opacity:.55} /* NEW: a position we haven't heard from in a while */
.sheet.min{transform:translateY(calc(100% - 104px))} /* CHANGED 112 → 104px peek */
.st{align-items:center}
.st h3{font-size:var(--fs-title);font-weight:800;line-height:1.3} /* CHANGED 18px/700 → 16px/800: the title steps behind the number */
.badge{width:68px;height:68px;border-radius:var(--r-card)} /* CHANGED 56 → 68px */
.badge b{font-size:var(--fs-badge);letter-spacing:-.02em} /* CHANGED 21 → 30px */
.badge span{font-size:12px}
.badge.stale{opacity:.6} /* NEW */
/* ---------- finder ---------- */
.finder{background:radial-gradient(90% 55% at 50% 30%,color-mix(in srgb,var(--gold) 7%,transparent),transparent 70%),var(--panel)} /* CHANGED: the app's night, not navy */
.ftop{top:14px;left:14px;right:14px}
.fback{width:var(--tap);height:var(--tap);border:1px solid var(--hair);background:var(--glass);color:var(--ink);font-size:18px} /* CHANGED: the same back button as the map */
.flab{font-size:var(--fs-label);color:var(--ink2);letter-spacing:.16em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} /* CHANGED: one line; a long name ends in … */
.flab bdi{letter-spacing:0} /* NEW: a name inside a tracked label keeps its Arabic joins */
.flive{font-size:var(--fs-label)}
.dial{top:96px;transform:scale(1.15);transform-origin:50% 0} /* CHANGED: the compass is the hero visual, so it grows */
.read{top:446px}
.dist{font-size:var(--fs-dist)} /* CHANGED 68 → 96px */
.dist .unit{font-size:28px;color:var(--ink2)}
.who{margin-top:10px;font-size:17px;font-weight:800}
.hint{font-size:13.5px}
.flare{bottom:100px;min-height:60px;font-size:17px}
.met{bottom:28px;min-height:52px;color:var(--ink2);font-size:14.5px}
@media (max-height:780px){
.dial{top:72px;transform:scale(.9);transform-origin:50% 0}
.read{top:330px}
.dist{font-size:84px}
}
/* ---------- live weather (round 6, after the redesign): the temperature chip, in the top stack under the ETA cards ---------- */
.wxchip{display:flex;align-items:center;gap:6px;width:max-content;margin:8px 0 0 auto;height:30px;padding:0 11px 0 9px;border-radius:999px;background:var(--glass);border:1px solid var(--hair);color:var(--ink);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;box-shadow:0 4px 14px rgba(0,0,0,.28)} /* NEW */
.wxchip[hidden]{display:none}
.wxchip svg{width:16px;height:16px;color:var(--ink2)}
.wxchip[data-kind="sun"] svg,.wxchip[data-kind="part"] svg,.wxchip[data-kind="dust"] svg{color:var(--gold)}
.wxchip[data-kind="snow"] svg,.wxchip[data-kind="rain"] svg,.wxchip[data-kind="storm"] svg{color:var(--you)}
:root[data-theme="light"] .wxchip{box-shadow:0 4px 14px rgba(16,24,40,.14)}
button.wxchip{font-family:inherit;cursor:pointer} /* the chip is a button: it opens the weather popover */
/* NEW: the weather popover, the quick way to a clean map */
.wxpop{position:absolute;right:0;top:calc(100% + 8px);width:264px;padding:14px;border-radius:var(--r-card);background:var(--panel);border:1px solid var(--hair);box-shadow:0 18px 44px rgba(0,0,0,.45);z-index:5}
.wxpop[hidden]{display:none}
.wxp1{display:flex;align-items:center;gap:8px}
.wxp1 svg{width:22px;height:22px;color:var(--ink2)}
.wxp1 b{font-size:20px;font-weight:800}
.wxp1 span{font-size:14px;font-weight:700;color:var(--ink2)}
.wxp2{margin-top:4px;font-size:var(--fs-meta);color:var(--ink2)}
.wxrow{display:flex;align-items:center;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--hair)}
.wxrow span{flex:1;min-width:0}
.wxrow b{display:block;font-size:14.5px;font-weight:800}
.wxrow i{display:block;margin-top:2px;font-style:normal;font-size:12.5px;line-height:1.4;color:var(--ink2)}
.wxsw{position:relative;flex:none;width:46px;height:28px;border-radius:14px;border:0;background:var(--panel2);box-shadow:inset 0 0 0 1px var(--hair);cursor:pointer} /* the same look as .tl-sw */
.wxsw::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:var(--ink3);transition:transform .2s ease}
.wxsw.on{background:var(--friend);box-shadow:none}
.wxsw.on::after{transform:translateX(18px);background:var(--on-friend)}
:root[data-theme="light"] .wxpop{box-shadow:0 18px 44px rgba(16,24,40,.18)}
.topstack:has(.wxpop:not([hidden])){z-index:40} /* the open popover sits above the map buttons */
/* ---------- friends, friend card, chat, You (round 8 polish) ---------- */
.frs{font-size:12px;color:var(--ink2)} /* CHANGED: 11px --ink3 (3.6:1) → 12px --ink2 (7.7:1); Home's friends read better too */
.chs{font-size:12px;color:var(--ink2)} /* CHANGED: same */
.ctime{font-size:11px;color:var(--ink2)} /* CHANGED: same */
.frhead-n{font-size:17px;font-weight:800} /* NEW: the friends sheet: title, count, invite */
.frcount{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:8px;padding:0 7px;border-radius:11px;background:var(--panel2);border:1px solid var(--hair);font-size:12px;font-weight:800;color:var(--ink2);vertical-align:2px}
.frinv{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--friend) 35%,transparent);background:color-mix(in srgb,var(--friend) 10%,transparent);color:var(--friend);font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.frsearch{position:relative;padding:12px 18px 2px} /* NEW: search with its icon */
.frsearch svg{position:absolute;left:32px;top:calc(50% + 5px);transform:translateY(-50%);width:17px;height:17px;color:var(--ink3);pointer-events:none}
.frsearch .namein{margin:0;padding-left:42px;text-align:left}
.frgrp{margin:14px 2px 2px;font-size:var(--fs-label);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)} /* NEW: online first, then everyone */
.frav.on,.chav.on{position:relative}
.frav.on::after,.chav.on::after{content:"";position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--friend);box-shadow:0 0 0 2.5px var(--panel)} /* NEW: online, on the avatar */
.frmore{flex:none;display:grid;place-items:center;width:36px;height:44px;border:0;background:transparent;color:var(--ink3);cursor:pointer} /* NEW: replaces the ✕; removing a friend moves to their card */
.pav.on{box-shadow:0 0 0 3px var(--panel),0 0 0 5.5px var(--friend)} /* NEW: the card's online ring */
.pacts.v .pbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:64px;font-size:12.5px} /* CHANGED: icon over label, Meet now leads above */
.pacts.v .pbtn svg{width:20px;height:20px;color:var(--friend)}
.pstats.slim{gap:0;margin-top:14px;background:var(--panel2);border:1px solid var(--hair);border-radius:14px} /* CHANGED: one quiet strip instead of three boxes */
.pstats.slim>div{background:none;border:0;border-radius:0;padding:11px 6px;min-width:0}
.pstats.slim>div+div{border-left:1px solid var(--hair)}
.pstats.slim b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pstats.slim span{color:var(--ink2)}
.pquiet{margin-top:12px;min-height:40px;border:0;background:none;color:var(--ink2);font:inherit;font-size:13px;font-weight:700;cursor:pointer} /* NEW: the destructive action, quiet and last */
.chlive{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--hair);background:color-mix(in srgb,var(--friend) 7%,transparent);font-size:12.5px;color:var(--ink2)} /* NEW: the live meetup, in the chat */
.chlive b{color:var(--ink);font-weight:800}
.chlive .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--friend);box-shadow:0 0 0 3px color-mix(in srgb,var(--friend) 20%,transparent)}
.chlive span{flex:1;min-width:0}
.chlive button{flex:none;min-height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--hair);background:var(--panel2);color:var(--ink);font:inherit;font-size:12.5px;font-weight:800;cursor:pointer}
.cday{margin:12px 0 4px;text-align:center;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)} /* NEW */
.chat1 .cwho{display:none} /* CHANGED: a one-to-one chat does not label every bubble */
.ctx{border-radius:16px 16px 16px 6px}
.cmsg.mine .ctx{border-radius:16px 16px 6px 16px} /* CHANGED: a tail on the speaker's side */
.qrow{display:flex;gap:6px;padding:8px 14px 0;overflow-x:auto;scrollbar-width:none} /* NEW: quick replies, one tap while driving */
.qrow::-webkit-scrollbar{display:none}
.qrow button{flex:none;min-height:36px;padding:0 13px;border-radius:18px;border:1px solid var(--hair);background:var(--panel2);color:var(--ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.youcard .chev{flex:none;display:grid;place-items:center;color:var(--ink3);font-size:16px}
/* the Timeline legend draws each mode the way the map does: solid, rail, dashed, dotted */
:root .tl-legend i.lg{position:relative;width:16px;height:0;border-radius:0;background:none;border-top:3px solid var(--c)}
:root .tl-legend i.lg-walk{border-top-style:dotted}
:root .tl-legend i.lg-bike{border-top-style:dashed}
:root .tl-legend i.lg-rail{border-top-width:4px}
:root .tl-legend i.lg-rail::after{content:"";position:absolute;left:1px;right:1px;top:-2.5px;border-top:1px dashed rgba(255,255,255,.9)}
/* ---------- reliability pass: every touch target at least 44 px ---------- */
.frinv,.qrow button,.chlive button,.pquiet{min-height:44px} /* CHANGED: 34-40 px → 44 */
.frmore{width:44px} /* CHANGED: 36 → 44 */
/* hit areas: small round controls keep their look and get an invisible 44 × 44 target (they had 28-40 px) */
:root .tl-ib,:root .tl-nav,:root .tl-rec,.cbtnh,:root .tl-banner button,.chathead .px{position:relative} /* every hit-area host is positioned (the card's .pin2 .px stays absolute) */
.px::before,.cbtnh::before,:root .tl-ib::before,:root .tl-nav::before,:root .tl-rec::before,:root .tl-sw::before,:root .tl-banner button::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
:root .tls-seg button,.namein{min-height:44px} /* CHANGED: 35 and 42 px → 44 */
:root .tl-kpi{container-type:inline-size}
:root .tl-kpi b{font-size:clamp(13px,20cqi,18px)} /* CHANGED: sized to its own box, so "1 h 36 min" fits on a 360 px phone and in split screen */
/* ---------- round 9: trust states and the pages that were only described ---------- */
.btag.stale{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 40%,transparent)} /* NEW: a friend's position is older than 30 s */
.btag.stale i{background:var(--gold);animation:none}
.ecd.stalet{color:var(--gold);font-weight:700}
.nomap{display:grid;place-items:center;background:radial-gradient(120% 70% at 50% 40%,color-mix(in srgb,var(--ink) 5%,var(--map-ground)),var(--map-ground))} /* NEW: the map failed to load; nothing else stops */
.mapfail{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:270px;margin-top:40px;text-align:center}
.mapfail .mf-ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--panel2);border:1px solid var(--hair);color:var(--ink2)}
.mapfail .mf-ic svg{width:24px;height:24px}
.mapfail b{font-size:16px;font-weight:800}
.mapfail span{font-size:13px;line-height:1.5;color:var(--ink2)}
.mapfail .livebtn{margin-top:6px;min-height:44px;padding:0 18px}
.pnote{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--ink2)} /* NEW: what happens next, under the action */
.pbtn:disabled{opacity:.42;cursor:default}
.pcard.solid{background:var(--panel)} /* NEW: a full page, not over Home (a friend opening an old link) */
.pquiet.danger{color:var(--accent)}
.tls-seg.wrap{flex-wrap:wrap}
.tls-seg.wrap button{flex:1 0 calc(25% - 6px)}
.permrow{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-top:8px;border-radius:13px;border:1px solid var(--hair);background:var(--panel2)} /* NEW: one permission, its reason, its state */
.permrow>div{flex:1;min-width:0}
.permrow b{display:block;font-size:14px;font-weight:800}
.permrow>div span{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:var(--ink2)}
.permrow .pi{flex:none;color:var(--ink2)}
.permrow .pi .tli{width:20px;height:20px}
.permrow em{flex:none;font-style:normal;font-size:12px;font-weight:800;padding:4px 9px;border-radius:999px}
.permrow em.ok{color:var(--friend);background:color-mix(in srgb,var(--friend) 12%,transparent)}
.permrow em.warn{color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,transparent)}
.permrow em.mute{color:var(--ink2);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.privcard{padding:14px 16px;margin-top:10px;border-radius:14px;border:1px solid var(--hair);background:var(--panel2)} /* NEW: what is shared, with whom, for how long */
.privcard b{display:block;font-size:14.5px;font-weight:800}
.privcard span{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:var(--ink2)}
.histnote{margin:16px 2px 4px;font-size:12.5px;color:var(--ink2)}
.you .fr{padding:10px 2px}
/* ---------- review comments: close apart from the actions; bigger setting icons ---------- */
.chathead .px{margin-inline-start:auto} /* CHANGED: a sheet's close sits alone at the trailing edge; Invite moves into the list; the chat gets a back chevron instead */
.ytile{width:40px;height:40px;border-radius:12px} /* CHANGED: 32 → 40 px tiles */
.ygroup .ytile .tli{width:22px;height:22px} /* CHANGED: 17 → 22 px icons */
.ygroup .tls-btn>.ytile,.ygroup .tls-row>.ytile{flex:0 0 40px;width:40px}
.you .tls-btn>svg.tli:first-child{box-sizing:content-box;width:22px;height:22px;padding:9px;border-radius:12px;flex:none;color:var(--ink2);background:color-mix(in srgb,var(--ink) 7%,transparent)} /* the same tile for rows without one */
.permrow .pi{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.permrow .pi .tli{width:22px;height:22px}
.chathead.frhead{padding:14px 16px 12px} /* CHANGED: the friends sheet header is just the title and its close */
.chathead.frhead .px{order:0;margin-inline-start:auto}
.frinvrow{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;align-items:center;width:100%;min-height:56px;margin:8px 0 2px;padding:8px 12px;border-radius:14px;border:1px dashed color-mix(in srgb,var(--friend) 40%,transparent);background:color-mix(in srgb,var(--friend) 6%,transparent);color:var(--ink);font:inherit;text-align:start;cursor:pointer} /* NEW: Invite moves out of the header into the list, first */
.frinvrow .ytile{grid-row:1/3}
.frinvrow .ytile .tli{width:22px;height:22px}
.frinvrow .fi-t{font-size:14.5px;font-weight:800;color:var(--friend)}
.frinvrow .fi-s{font-size:12px;color:var(--ink2)}
.chback{flex:none;width:44px;height:44px;margin-inline-start:-12px;margin-inline-end:-8px;display:grid;place-items:center;border:0;background:none;color:var(--ink);cursor:pointer} /* NEW: the chat's back, at the leading edge; Call stays alone at the trailing edge */
.chback svg{width:22px;height:22px}
.chathead.chat .chm{flex:1;min-width:0}
/* CHANGED (review): Preferences tiles centred on their text, like Activity and Privacy */
.ygroup .ytile{margin:0} /* the Timeline's .tls-row span{margin-top:3px} was nudging the tiles down */
.ygroup>.tls-row{align-items:center}
.ygroup>.tls-row:has(.tls-seg){display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;align-items:center} /* a row with a choice: tile and text on top, the choice full width below */
.ygroup>.tls-row:has(.tls-seg)>div{display:contents}
.ygroup>.tls-row:has(.tls-seg)>.ytile{grid-row:1/3}
.ygroup>.tls-row:has(.tls-seg)>div>b,.ygroup>.tls-row:has(.tls-seg)>div>span{grid-column:2}
.ygroup>.tls-row:has(.tls-seg) .tls-seg{grid-column:1/-1;margin-top:12px}
.chathead .px{inset:auto} /* CHANGED (review): the hit-area fix made it position:relative, so the card's top:12px/right:12px pushed it 12 px down and in; now it sits on the title's line */
.ygroup .tls-row>span.ytile{display:grid;place-items:center} /* CHANGED (review): a row's span rule turned the Preferences tiles into blocks, so their icons sat in the top corner */
/* round 9 · large text (Android font size 130%): measured with qa/wain-audit.js (window.__scale = 1.3) */
:root .tl-kpi b{white-space:normal;line-height:1.15} /* CHANGED: at 130% "1 h 36 min" wraps instead of spilling; at 100% it still fits on one line */
:root .tl-kpi span{overflow-wrap:anywhere;letter-spacing:.08em} /* CHANGED: "TRAVELLED" fits its box at 130% */
:root .tl-grad{min-height:48px} /* CHANGED: Arabic made the Replay button 43 px tall */
.ygroup{flex:none} /* CHANGED (review): in the scrolling You column a group with overflow:hidden could shrink below its rows and clip them; now each group keeps its height and the screen scrolls */
/* ---------- app wiring: what the mocks did in their own page styles, and the Timeline controls promoted app-wide ---------- */
.pad{scrollbar-width:none}.pad::-webkit-scrollbar{display:none}
.pad>*{flex:none}
[data-user="new"] [data-for="back"],[data-user="back"] [data-for="new"]{display:none!important}
.banner .pill{display:none} /* the badge carries the number; the banner carries the state */
.topstack{transition:top .2s ease}
/* PROMOTED: base rules of the Timeline's settings controls, so You works before the Timeline's sheet has loaded */
.you .tli,.ypage .tli{width:1.15em;height:1.15em;flex:none;display:block}
.tl-ib{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--hair);background:var(--glass);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;font-size:19px}
.tl-lbl{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin:20px 2px 6px}
.tl-banner{display:flex;align-items:center;gap:10px;margin:2px 0 12px;padding:11px 13px;border-radius:14px;font-size:12.5px;line-height:1.45;color:var(--gold)}
.tl-banner b{color:var(--ink)}
.tl-banner button{margin-left:auto;flex:none;font-family:inherit;font-weight:800;font-size:12px;border-radius:10px;padding:8px 11px;cursor:pointer;border:0;color:inherit;background:currentColor}
.tl-banner button span{color:var(--panel)}
.tls-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--hair)}
.tls-row>div{flex:1;min-width:0}
.tls-row b{display:block;font-size:14px;font-weight:800}
.tls-row span{display:block;font-size:11.5px;color:var(--ink2);margin-top:3px;line-height:1.45}
.tl-sw{position:relative;width:48px;height:28px;border-radius:14px;background:var(--panel2);border:1px solid var(--hair);cursor:pointer;flex:none;transition:background .2s;padding:0}
.tl-sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--ink2);transition:transform .22s cubic-bezier(.3,.7,.3,1),background .2s}
.tl-sw.on{background:var(--friend);border-color:var(--friend)}.tl-sw.on::after{transform:translateX(20px);background:var(--on-friend)}
.tls-seg{display:flex;gap:6px;margin-top:10px}
.tls-seg button{flex:1;padding:9px 4px;border-radius:11px;border:1px solid var(--hair);background:var(--panel2);color:var(--ink2);font-family:inherit;font-weight:800;font-size:12px;cursor:pointer}
.tls-seg button.on{background:var(--white);border-color:var(--white);color:var(--on-white)}
.tls-btn{width:100%;display:flex;align-items:center;gap:11px;padding:12px 14px;margin-top:8px;border-radius:13px;border:1px solid var(--hair);background:var(--panel2);color:var(--ink);font-family:inherit;font-weight:800;font-size:13.5px;cursor:pointer;text-align:start}
.tls-btn .tli{font-size:18px;color:var(--ink2)}.tls-btn span{flex:1}.tls-btn i{font-style:normal;font-size:11.5px;color:var(--ink3);font-weight:700}
.ytile .tli{color:inherit}
.tls-btn .chev{display:grid;place-items:center;transform:scaleX(-1)}
[dir="rtl"] .tls-btn .chev,[dir="rtl"] .youcard .chev{transform:none}
.youcard .chev{transform:scaleX(-1)}
.youcard .chev .tli{width:1em;height:1em}
.ride img.ridecv{object-fit:contain;display:block}
.rides.ridegrid{padding-bottom:0}
.pin2.welcome{max-height:calc(100dvh - 32px);overflow:auto;scrollbar-width:none}
.pin2.scroll{max-height:calc(100dvh - 48px);overflow:auto;scrollbar-width:none}
.pcard.solid{z-index:50}
.upnext .frx{min-width:44px;min-height:44px}
.mapfailwrap{position:absolute;inset:0;display:grid;place-items:center;padding:170px 24px 150px;z-index:1}
.mapfailwrap .mapfail{margin-top:0}
#map.failed .maplibregl-marker{display:none}
.bav.plane{background:color-mix(in srgb,var(--gold) 18%,var(--panel));color:var(--gold)}
/* by day the white car needs an edge, not a glow (look.car): a hairline and a two-step shadow on the same render */
:root[data-theme="light"] .peermk .pcar,:root[data-theme="light"] .mk.you .pcar{background:none;filter:drop-shadow(0 0 .6px rgba(16,24,40,.7)) drop-shadow(0 1px 1.5px rgba(16,24,40,.26)) drop-shadow(0 4px 6px rgba(16,24,40,.14))}
:root[data-theme="light"] #map{background:var(--map-ground)}
/* the Timeline's map pins follow the theme, and name each place with its arrival time */
:root .tl-pin{position:relative}
:root .tl-pin .b{background:var(--panel)}
:root .tl-pin.sel .b{color:var(--panel)}
:root .tl-pin .lab{position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);white-space:nowrap;max-width:170px;overflow:hidden;text-overflow:ellipsis;padding:2px 7px;border-radius:8px;background:var(--glass);border:1px solid var(--hair);color:var(--ink);font-size:11px;font-weight:800;pointer-events:none}
.etaCard .ece small{margin-left:0} /* the app writes "2 min" with its space: the unit needs no extra gap */
/* the no-connection bar never covers a control: the screens' top edge moves down by its height */
.pad{padding-top:calc(26px + var(--netbar,0px))}
.backfab,.banner{top:calc(14px + var(--netbar,0px))}
.ftop{top:calc(14px + var(--netbar,0px))}
.dial{top:calc(96px + var(--netbar,0px))}
:root .tl-top{top:calc(var(--tltop,14px) + var(--netbar,0px))}
.badge b.small{font-size:20px;letter-spacing:0} /* "Now" fits the badge */
/* flights: nothing is cut off; the plane's label is plain reading text, and an estimated position looks like one */
.fltbar{white-space:normal;line-height:1.4;font-size:13px}
.etaCard .ecd{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.3}
.fltmk .flab{letter-spacing:.02em;text-transform:none;max-width:none;flex:none}
.fltmk.est .fplane{opacity:.72}
/* the Timeline's import steps */
:root .tls-step{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--hair)}
:root .tls-step>b{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--panel2);border:1px solid var(--hair);font-size:12.5px;font-weight:800}
:root .tls-step>div{flex:1;min-width:0}
:root .tls-step span{display:block;font-size:13px;line-height:1.5;color:var(--ink2)}
:root .tls-step span b{color:var(--ink);font-weight:700}
:root .tls-step .tls-btn span{color:inherit;font-size:13.5px}
:root .tls-step .tl-white{width:100%}