/* Part 2: driver apply, owner deck, offer, pay and the move room. Uses the tokens in app.css. */
.clockbox{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;padding:10px 14px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--card);font-size:15px}
.clockbox .ce{color:var(--sub);font-size:13.5px}
.clockbox .cp{flex-basis:100%;font-size:13.5px;font-weight:600}.clockbox .cp:empty{display:none}
.clockbox.half{background:var(--warn-bg);border-color:var(--warn);color:var(--warn-d)}.clockbox.half .ce{color:var(--warn-d)}
.clockbox.soon{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}.clockbox.soon .ce{color:var(--bad)}
.clockbox.over{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}.clockbox.over .ce{color:var(--bad)}
.deckhead{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;justify-content:space-between}
.deckwrap{display:grid;gap:16px}
@media(min-width:900px){.deckwrap.two{grid-template-columns:minmax(0,1fr) 380px;align-items:start}}
.app .past{font-size:14px;margin:4px 0}
.swipe{touch-action:pan-y}
.swipenav{display:flex;gap:8px;justify-content:space-between;margin-top:10px}
.swipehint{font-size:13px;color:var(--sub);text-align:center;margin-top:6px}
@media(min-width:900px){.swipenav,.swipehint{display:none}}
.compare .app{text-align:center}.compare .nm{font-size:18px}
.compare .app.sel{border:2px solid var(--ob)}
.asidecard{opacity:.85;border-style:dashed}
.chatbox{border:1.5px solid var(--ob);border-radius:var(--r-lg);padding:14px;background:var(--card)}
.chatbox .msgs{max-height:260px;margin:8px 0}
.chatnote{margin-bottom:6px}
.chatform .grow{flex:1 1 160px;min-width:0}
.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.tag.g{background:var(--good-bg);color:var(--good-d)}
.gate .li{border-top:1px solid var(--line)}
.paytable{width:100%;border-collapse:collapse;font-size:15px}.paytable td{padding:6px 0;border-top:1px solid var(--line)}.paytable tr:first-child td{border-top:0}.paytable td:last-child{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.paytable .tot td{font-size:18px;border-top:2px solid var(--ink)}
.bigmoney{font:600 34px 'Clash Grotesk',sans-serif;line-height:1}
.slotgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(min-width:520px){.slotgrid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.slot .im{position:relative}
.slot .cap{min-height:32px}
.slot.ok .cap:before{content:'\2713 ';color:var(--good-d)}
.slot .rm{position:absolute;top:2px;right:2px;z-index:2;min-width:44px;min-height:44px;border-radius:50%;border:0;background:radial-gradient(circle at center,#1c1a18 0,#1c1a18 13px,transparent 14px);color:#fff;font-size:20px;line-height:1;cursor:pointer;display:none}
.slot.ok .rm{display:inline-flex;align-items:center;justify-content:center}
.extra{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.extra img{width:64px;height:64px;object-fit:cover;border-radius:8px;flex:none}
.extra input{flex:1;min-width:0}
.prog{height:10px;border-radius:99px;background:var(--wait);overflow:hidden;margin:8px 0}.prog i{display:block;height:100%;background:var(--ob);width:0;transition:width .2s}
.drafttag{font-size:13px;color:var(--good-d);font-weight:600}
.livebadge{display:inline-flex;gap:8px;align-items:center}
.phaseline{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.stopform{border:1.5px solid var(--ob);border-radius:var(--r-md);padding:12px;margin-top:8px;background:var(--tint)}
.stopli .body{flex:1;min-width:0}
.doclist .docrow{align-items:flex-start}
.tagbtns{display:flex;flex-wrap:wrap;gap:8px}
.tagbtns button{min-height:44px;padding:0 14px;border:1.5px solid var(--field);border-radius:99px;background:var(--card);color:var(--ink);font:600 15px 'Instrument Sans',sans-serif;cursor:pointer}
.tagbtns button[aria-pressed=true]{border-color:var(--ob);background:var(--tint);color:var(--ot);box-shadow:inset 0 0 0 1px var(--ob)}
.stars .star{font-size:34px;flex:none;min-width:44px}
.revcard .starline{color:var(--ot);font-size:24px;font-weight:700}
.compare2{display:grid;grid-template-columns:auto 1fr 1fr;gap:6px 10px;align-items:center;font-size:13px}
.compare2 img{width:100%;border-radius:6px;border:1px solid var(--line);display:block;aspect-ratio:4/3;object-fit:cover}
.compare2 .none{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:var(--wait);border-radius:6px;color:var(--sub)}
.compare2 .h{font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);font-size:12px}
.odo{display:flex;flex-wrap:wrap;gap:8px 18px;padding:10px 12px;background:var(--bg);border-radius:var(--r-md);font-size:15px}
.linkcard{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.filters{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:640px){.filters{grid-template-columns:1fr 1fr 1fr}}
.routecard{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;background:var(--card)}
.routecard:hover{border-color:var(--orange)}
.count{font-size:13px;color:var(--sub);text-align:right;margin-top:2px}
.lockedrow{color:var(--sub);font-size:14px}
@media(max-width:560px){.compare2{grid-template-columns:70px 1fr 1fr;font-size:12px}}

.filebtn{cursor:pointer;margin-top:4px}.filebtn:focus-within{outline:2px solid var(--ink);outline-offset:2px}
input[type=file]{max-width:100%}

a.sc{text-decoration:none}

/* QA final: long unbroken text (names, chat lines, notes) wraps instead of pushing the page sideways */
body,#main,#sheetwrap,.toast,.banner{overflow-wrap:anywhere}
input,textarea,select{overflow-wrap:normal}

/* ===== 2026-09-26 sweep: account home, My account, Messages, alerts, refresh (FE-ACCOUNT) ===== */
.sech{font-size:20px;margin-top:4px}
.acard{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--orange);border-radius:var(--r-lg);padding:16px}
.acard-top{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}
.acard-top h3{font-size:20px;min-width:0}
.acard .sub{margin-top:4px}
.acard-line{margin-top:8px;font-size:15px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.acard-act{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-start;margin-top:12px}
.acard-act>.btn,.acard-act>[data-host]{flex:1 1 200px}
.acard-act>[data-host] .btn{width:100%}
.inits{display:inline-flex}
.inits i{width:32px;height:32px;border-radius:50%;background:var(--tint);border:2px solid var(--card);color:var(--ot);font:700 14px 'Instrument Sans',sans-serif;font-style:normal;display:inline-flex;align-items:center;justify-content:center;margin-left:-8px}
.inits i:first-child{margin-left:0}
details.more{flex:1 1 100%}
details.more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 6px;font-weight:600;font-size:15px;text-decoration:underline;border-radius:8px}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary:after{content:'\25BE';text-decoration:none;display:inline-block}
details.more[open]>summary:after{transform:rotate(180deg)}
.more-in{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:4px 0 2px;border-top:1px solid var(--line);margin-top:4px}
.more-in .confirm{width:100%}
.more-in .small{padding:4px 6px}
.linkbtn.danger{color:var(--bad)}
.bigchoice{display:grid;gap:8px}
.bigchoice .small{margin:-2px 0 10px 2px}
.addmore{border-top:1px solid var(--line);padding-top:14px}
.addmore .row{margin-top:6px}
/* Before booking list: a collapsed summary that opens */
.checklist{padding:0}
.checklist>details>summary{list-style:none;cursor:pointer;display:flex;gap:10px 16px;align-items:center;flex-wrap:wrap;padding:16px 18px;min-height:56px;border-radius:var(--r-lg)}
.checklist>details>summary::-webkit-details-marker{display:none}
.checklist .ck-head{flex:1 1 220px;min-width:0}
.checklist .ck-head h2{font-size:18px;margin:0}
.checklist .ck-head:after{content:'Show the list \25BE';display:block;font-size:14px;font-weight:600;text-decoration:underline;margin-top:4px}
.checklist details[open] .ck-head:after{content:'Hide the list \25B4'}
.ck-bar{flex:0 0 120px;height:10px;border-radius:99px;background:var(--wait);overflow:hidden}
.ck-bar i{display:block;height:100%;background:var(--good)}
.ck-body{padding:0 18px 16px}
.ck-body>.small:first-child{margin-bottom:6px}
.ck-sub{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);margin:16px 0 2px}
.li .sub p+p{margin-top:4px}
.howto{padding-left:22px;margin:8px 0 0}
.howto li{margin:4px 0}
.pushask{border:2px solid var(--ob)}
/* Messages sheet */
.convos{list-style:none;margin:0 -8px}
.convo{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:12px 8px;min-height:64px;cursor:pointer;color:var(--ink);font:inherit;border-radius:10px}
.convo:hover{background:var(--wait)}
.convo.unread .cv-last{color:var(--ink);font-weight:600}
.cv-av{flex:none;width:40px;height:40px;border-radius:50%;background:var(--tint);color:var(--ot);display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.cv-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cv-top{display:flex;gap:8px;align-items:baseline}
.cv-role{font-size:12px;color:var(--sub);font-weight:600}
.cv-time{margin-left:auto;font-size:12px;color:var(--sub);white-space:nowrap}
.cv-route{font-size:13px;color:var(--sub)}
.cv-last{font-size:14px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.convo .dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--ob);margin-top:6px}
.cv-sub{margin-bottom:8px}
.sheet header .tb{min-width:44px}
/* pull to refresh (installed app only) */
.ptr{position:fixed;left:50%;top:8px;z-index:70;transform:translate(-50%,calc(var(--pull,0px) - 70px));display:flex;gap:8px;align-items:center;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:99px;padding:8px 14px;font-weight:600;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.12);opacity:0;pointer-events:none;transition:opacity .15s}
.ptr.on{opacity:1}
.ptr.go{transform:translate(-50%,64px)}
.ptr .spin{width:18px;height:18px;border-width:2px;animation:none}
.ptr.go .spin{animation:spin 1s linear infinite}
.install h2{margin-bottom:2px}
.filebtn{position:relative}
@media(min-width:640px){.acard-act>.btn,.acard-act>[data-host]{flex:0 1 auto;min-width:220px}}

/* ===== post screens (moved from places.js #fxpost-css, 2026-09-26) ===== */
.ac li .pk-l{flex:1;min-width:0;overflow-wrap:anywhere}
.ac li .pk-k{flex:none;font-size:12px;font-weight:600;color:var(--sub);white-space:nowrap}
.ac li .pk-k.v{color:var(--good-d)}
.ac li[aria-disabled=true]{cursor:default;color:var(--sub);font-size:14px}
.rc span{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;text-align:left;padding:10px 14px}
.rc small{display:block;font-weight:400;font-size:13.5px;color:var(--sub);line-height:1.35}
.rc input:checked+span small{color:var(--ink)}
.pkfb{font-size:13px;margin-top:6px;padding:8px 10px;border-radius:var(--r-sm);background:var(--warn-bg);border:1px solid var(--warn)}
.privacy{font-size:14px;padding:10px 12px;border-radius:var(--r-sm);background:var(--bg);border:1px solid var(--line);margin:4px 0 14px}
.vres{font-size:15px;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--bg);margin:0 0 14px}
.vres:empty{display:none}
.vres b{font-variant-numeric:tabular-nums}
.estbox{border:1.5px solid var(--ink);border-radius:var(--r-md);padding:12px 14px;margin:4px 0 14px;background:var(--card)}
.estbox .big{font:600 26px "Clash Grotesk","Instrument Sans",sans-serif;font-variant-numeric:tabular-nums}
.estbox p{margin:2px 0 0;font-size:14px}
.fuelsrc{font-size:14px;margin-top:6px;padding:8px 10px;border-radius:var(--r-sm);background:var(--bg);border:1px solid var(--line)}
.fuelsrc b{font-variant-numeric:tabular-nums}
.bgcmore{margin-top:10px;font-size:14px}
.bgcmore ul{margin:6px 0 0 20px}
.sel2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 12px;margin-bottom:14px}.sel2>.field{margin-bottom:0}
@media(max-width:520px){.sel2{grid-template-columns:1fr}
}
.prefill{margin-bottom:12px;padding:10px 12px}
.feerow2{display:flex;justify-content:space-between;gap:10px;font-size:15px}
.feerow2 b{font-variant-numeric:tabular-nums}
.take b{white-space:nowrap}
.feewrap{margin:-4px 0 12px}

/* Design review 2026-09-26: one product across the five builders' screens */
/* address fields: an empty "verified" line takes no space, and the typing hint goes away once the place is verified */
.verified:empty{display:none}
.field:has(.verified:not(:empty)) .hint{display:none}
/* receipt and "how we calculated this": the summary shows it opens, like "More" does */
details.how>summary{list-style:none;justify-content:space-between;gap:10px}
details.how>summary::-webkit-details-marker{display:none}
details.how>summary:after{content:'\25BE';flex:none;font-size:15px}
details.how[open]>summary:after{transform:rotate(180deg)}
/* paper rows: the name wraps, the Replace button stays on the right */
.docrow>span{flex:1 1 0;min-width:0}
.docrow>.btn,.docrow>a.btn{flex:none}
/* inline "Are you sure?": Yes and Back stay on one line on a phone */
.confirm>.row{flex-wrap:nowrap}
.confirm>.row>.btn{padding-left:14px;padding-right:14px}
.confirm>.row>.btn:first-child{flex:1 1 auto;min-width:0;white-space:normal;line-height:1.2;padding-top:8px;padding-bottom:8px}
.confirm>.row>.btn:last-child{flex:none}
/* the driver deck: the agreement sits inside the driver card as a section, not a card in a card */
.app .agr{border:0;border-top:1px solid var(--line);border-radius:0;background:none;padding:14px 0 0;margin-top:6px}
.app .actions [data-host]>.btn{width:100%}
@media(max-width:420px){.app.front{padding:16px 14px}}
/* a heading the app focuses after a page change (for screen readers) is not a control: no ring around it */
.banner [tabindex="-1"]:focus,.card [tabindex="-1"]:focus,main [tabindex="-1"]:focus{outline:none;box-shadow:none}

/* ===== Walkthrough 2026-09-29 (FE-ACCOUNT): header home icon, account home tiles, While you wait, trips, FAQ, notifications, first launch ===== */
/* full-screen steps (the installed app's first launch): no header, no bottom bar */
body[data-screen=full]{padding-bottom:0}
body[data-screen=full] #top,body[data-screen=full] #bar{display:none}
.fullstep-in{max-width:440px;margin:0 auto;min-height:100dvh;padding:max(32px,env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:center}
.fullstep-in h1{font-size:34px;margin:4px 0 10px}
.fs-bull{display:block;width:72px;height:72px;margin-bottom:16px}
.lead{font-size:18px;line-height:1.45}
.howto.big li{font-size:17px;margin:8px 0}
.fullstep-in .btn.full{margin-top:10px}
/* account home tiles (note 17) */
body[data-screen=home]{padding-bottom:0}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 16px}
.tile-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.tile-h h2{font-size:22px;margin:0}
.tile .acard{border-top-width:3px}
.tile-foot{margin-top:14px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.tile-foot .btn{width:100%}
@media(min-width:640px){.tile-foot .btn{width:auto;min-width:240px}}
.tile .kv{margin:4px 0 0}
.acct-foot{margin-top:40px}
.resume{border:2px solid var(--ink)}
/* While you wait (notes 4, 26): big check marks, two labels, no meters */
.ww>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:48px;padding:4px 0}
.ww>summary::-webkit-details-marker{display:none}
.ww>summary:after{content:'\25BE';margin-left:auto;font-size:15px}
.ww[open]>summary:after{transform:rotate(180deg)}
.ww-h{display:flex;flex-direction:column;min-width:0}
.ww-h b{font-size:17px}
.ww-in{margin-top:14px;border-top:1px solid var(--line);padding-top:6px}
.wwcard{padding:6px 16px 12px}
.ww-l{list-style:none;margin:4px 0 0}
.ww-i{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.ww-l:first-of-type .ww-i:first-child{border-top:0}
.ww-i .tick{width:32px;height:32px;font-size:17px}
.ww-i .tick .lk{width:15px;height:15px}
.ww-i .grow{flex:1;min-width:0}
.ww-t{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.ww-t b{font-size:16px}
.need,.rec{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;border-radius:99px;padding:2px 9px}
.need{background:var(--tint);color:var(--ot)}
.rec{background:var(--wait);color:var(--sub)}
.ww-i .small{margin-top:2px}
.ww-b{margin-top:8px}
.ww-done .ww-i{padding:8px 0}
.ww-done .ww-i b{font-weight:600;color:var(--sub)}
.ww-done .tick{width:28px;height:28px}
.ww-foot{display:flex;gap:6px;align-items:flex-start;margin-top:10px}
.ww-foot .lk{flex:none;margin-top:2px}
/* driver trips (note 28) */
.tnum{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--bg);font:700 15px 'Instrument Sans',sans-serif;margin-right:8px;vertical-align:2px;flex:none}
.tsec{margin-top:14px}
.tsec h4{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);margin-bottom:4px;display:flex;align-items:center;gap:6px}
.tsec h4 .cnt{background:var(--ob);color:#fff;border-radius:99px;padding:0 8px;font-size:12px;letter-spacing:0}
.sgl{list-style:none}
.sg{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.sg:first-child{border-top:0}
.sg .grow{flex:1;min-width:0}
.sg .btn{flex:none}
.sg-fit{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-top:4px}
.fit{font-size:12px;font-weight:700;border-radius:99px;padding:2px 9px}
.fit.ex{background:var(--good-bg);color:var(--good-d)}
.fit.cl{background:var(--warn-bg);color:var(--warn-d)}
.sg .pay{display:block;font-size:15px;margin-top:4px}
.leg{font-weight:700;color:var(--ot)}
.tfil{margin-top:8px}
.tfil .filters{width:100%}
.tfil .field{margin-bottom:6px}
.danger-t{color:var(--bad);border-color:var(--bad)}
/* past moves */
.pastl{list-style:none}
.pastl li{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.pastl li:first-child{border-top:0}
.pastl .grow{flex:1 1 180px;min-width:0}
/* FAQ (note 21): scrollable, each answer under its question */
.faq{max-height:460px;overflow:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-md);padding:4px 14px;background:var(--bg)}
.faq:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.faq-q{padding:12px 0;border-top:1px solid var(--line)}
.faq-q:first-child,.faq-sec+.faq-q{border-top:0}
.faq-q h4{font-size:16px;margin-bottom:4px;font-family:'Clash Grotesk','Instrument Sans',sans-serif;font-weight:600}
.faq-q p{font-size:15px;color:var(--ink)}
.faq-sec{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);margin:14px 0 2px}
/* alerts state card (note 12) and switch */
.alertstate.warn{border:2px solid var(--warn);background:var(--warn-bg)}
.alertstate.ask{border:2px solid var(--ob)}
.alertstate.on{padding:12px 16px}
.alerton{display:flex;align-items:center;gap:12px}
.switch{position:relative;display:inline-flex;align-items:center;min-width:52px;min-height:44px;cursor:pointer;flex:none}
.switch input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch span{width:52px;height:32px;border-radius:99px;background:var(--field);position:relative;transition:background .15s}
.switch span:after{content:'';position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:transform .15s}
.switch input:checked+span{background:var(--gf)}
.switch input:checked+span:after{transform:translateX(20px)}
.switch input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
/* notifications (notes 10, 25) */
.ntop{justify-content:flex-end}
.ngroup{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden}
.ng-h{display:flex;align-items:center;gap:8px;padding:4px 8px 4px 4px;border-bottom:1px solid var(--line)}
.ng-t{flex:1;display:flex;align-items:center;gap:8px;min-height:48px;padding:0 10px;border:0;background:none;color:var(--ink);font:600 18px 'Clash Grotesk','Instrument Sans',sans-serif;cursor:pointer;text-align:left;border-radius:10px}
.ng-t:after{content:'\25BE';margin-left:auto;font-size:14px}
.ng-t[aria-expanded=false]:after{transform:rotate(-90deg)}
.ng-t .cnt{font:700 12px 'Instrument Sans',sans-serif;background:var(--wait);border-radius:99px;padding:2px 8px}
.ng-t .nu{font:700 12px 'Instrument Sans',sans-serif;background:var(--ob);color:#fff;border-radius:99px;padding:2px 8px}
.ngroup .confirm{margin:8px}
.nlist{list-style:none}
.nlist .notif{border:0;border-top:1px solid var(--line);border-radius:0;padding:0;background:var(--card);transition:transform .2s;touch-action:pan-y}
.nlist .notif:first-child{border-top:0}
.nlist .notif.unread{border-left:0;box-shadow:inset 4px 0 0 var(--ob)}
.nlist .notif.unread h3{font-weight:700}
.nlist .notif:not(.unread) h3{font-weight:500}
.nlist .notif.going{background:var(--bad-bg)}
.n-in{display:flex;gap:6px;align-items:flex-start;padding:12px 6px 12px 14px}
.n-in .grow{flex:1;min-width:0}
.n-in h3{font-size:16px;font-family:'Instrument Sans',sans-serif;margin-bottom:2px}
.nx{flex:none;width:44px;height:44px;border:0;background:none;border-radius:10px;font-size:26px;line-height:1;color:var(--sub);cursor:pointer}
.nx:hover{background:var(--wait);color:var(--ink)}
.nswipe{text-align:center}
@media(hover:hover) and (pointer:fine){.nswipe{display:none}}
.onoff{display:flex;align-items:center;gap:10px;margin-top:8px;font-weight:600;font-size:15px;cursor:pointer;min-height:44px}
.acard.trip.paused{opacity:.92;border-top-color:var(--field)}
.ww-g{display:flex;align-items:center;gap:6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);margin:16px 0 0}
.ww-g.need-g{color:var(--ot)}
.ww-g .lk{width:14px;height:14px}
.ww-gs{margin:2px 0 2px}
.ww-l .ww-i:first-child{border-top:0}
@media(min-width:560px){.ww-i:not(.done) .grow{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:start}.ww-i:not(.done) .ww-b{grid-column:2;grid-row:1 / span 3;margin-top:0;flex-wrap:nowrap}.ww-i:not(.done) .grow>:not(.ww-b){grid-column:1}}
.trip .acard-act>.btn{flex:1 1 0;min-width:0}
.fullstep-in .lead+.sub{margin-top:8px}
/* My account (notes 18, 20, 44) */
.avline{display:flex;align-items:center;gap:12px;padding:4px 0 12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.avatar{flex:none;width:56px;height:56px;border-radius:50%;background:var(--tint) center/cover no-repeat;color:var(--ot);display:inline-flex;align-items:center;justify-content:center;font:700 22px 'Instrument Sans',sans-serif;border:2px solid var(--line)}
.avline .grow{flex:1;min-width:0}
.lockedname{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px}
.lname{font-size:18px;font-weight:600;margin:2px 0 4px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.lname .tag{margin-left:0}
.vehl{list-style:none;margin-top:8px}
.veh{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line)}
.veh:first-child{border-top:0}
.veh .grow{flex:1 1 200px;min-width:0}
.veh-edit{padding:8px 0;border-top:1px solid var(--line)}
.vform{margin-top:10px}
.vform h3{margin-bottom:4px}
.avatar.big{width:72px;height:72px}
.pp-crop{width:min(280px,100%);aspect-ratio:1;margin:4px auto 0;border-radius:50%;overflow:hidden;border:3px solid var(--ob);background:var(--wait);touch-action:none}
.pp-crop canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.pp-crop canvas:active{cursor:grabbing}
input[type=range]{width:100%;min-height:44px;accent-color:var(--ob)}
.pp-pick .filebtn{flex:1 1 150px}
.appl{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%}
.chipl{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1.5px solid var(--field);border-radius:99px;background:var(--card);font-weight:600;font-size:15px;text-decoration:none;color:var(--ink)}
.chipl:hover{border-color:var(--ob);background:var(--tint)}
.cv-room{margin:-4px 0 8px}
.acard-a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}.acard-a:hover{text-decoration:underline}
/* anchors (#/home#tc-<trip>, #/account#ac-veh) land 16px under the part of the header that stays (the tabs, plus #banner; --sh-stick) */
html{scroll-padding-top:calc(var(--sh-stick) + 16px)}
/* 2026-09-30 (founder): Messages panel. A big Minimize (Back in the installed app) at the top, swipe down or tap outside to minimize,
   "All messages" and "Close" in a conversation. The page underneath keeps its place. */
.sh-scrim{position:fixed;z-index:34;left:0;right:0;top:0;bottom:calc(var(--bar-h) + env(safe-area-inset-bottom));background:rgba(20,16,12,.32)}
@media(min-width:900px){.sh-scrim{background:transparent}}
.sheet{transition:transform .14s ease-out;will-change:transform}
.sh-min{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;min-height:48px;padding:6px 16px 4px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:700 16px 'Instrument Sans',sans-serif;cursor:pointer;border-radius:18px 18px 0 0;touch-action:none}
.sh-min:hover,.sh-min:focus-visible{background:var(--wait)}
.sh-grab{display:block;width:44px;height:5px;border-radius:99px;background:var(--field)}
.sh-mint{display:inline-flex;align-items:center;gap:6px}
.sheet header{touch-action:pan-x}
.sheet header .tb{min-height:44px;font-size:15px}
/* the owner's live Applicants list inside each route card */
.apl-sec{flex-basis:100%;margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.apl-sec h4{font:700 13px 'Instrument Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);display:flex;align-items:center;gap:6px;margin:0 0 4px}
.apl-sec h4 .cnt{background:var(--tint);color:var(--ot);border-radius:99px;padding:0 8px;font-size:12px;letter-spacing:0}
.apl{list-style:none;margin:0;padding:0}
.apl li+li{border-top:1px solid var(--line)}
.apl-a{display:flex;gap:12px;align-items:flex-start;padding:10px 4px;min-height:64px;color:var(--ink);text-decoration:none;border-radius:10px}
.apl-a:hover,.apl-a:focus-visible{background:var(--wait)}
.apl-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.apl-top{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.apl-top b{font-size:16px}
.apl .chips{justify-content:flex-start;gap:6px}
.apl .checks{margin-top:2px}
.apl-when{font-size:13px;color:var(--sub)}
.apl-go{flex:none;align-self:center;color:var(--ot);font-weight:700;font-size:15px}
.apl-new{animation:aplin .5s ease-out}
@keyframes aplin{from{background:var(--tint)}to{background:transparent}}
@media (prefers-reduced-motion:reduce){.apl-new{animation:none}.sheet{transition:none}}
/* My profile tile and section */
.prof-tile .party{margin-top:6px}
.about-f textarea{font-size:16px;min-height:96px}
.prof-prev{border:1.5px dashed var(--line);border-radius:var(--r-md);padding:10px 12px;margin-top:8px}
/* the registration and insurance upload, once it is in */
.docdone{display:flex;flex-direction:column;gap:10px}
.docdone .big{max-width:100%;max-height:360px;width:auto;border-radius:10px;border:1px solid var(--line);object-fit:contain;background:var(--wait)}
.docdone .seal{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--good-d)}
.docdone .seal i{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--gf);color:#fff;font-style:normal}

/* ---------- Active Trip (founder 2026-09-30): the home tile, the trip view, the progress bar, Log break ---------- */
.tv-kick{display:flex;align-items:center;gap:8px;font:700 12px 'Instrument Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--ot);margin-bottom:4px}
.tpulse{position:relative;flex:none;width:10px;height:10px;border-radius:50%;background:var(--orange)}
.tpulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--orange);opacity:0;animation:tpulse 2s ease-out infinite}
@keyframes tpulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.5);opacity:0}}
@media(prefers-reduced-motion:reduce){.tpulse::after{animation:none;opacity:.35;transform:none}}
.trip-tile{border:2px solid var(--orange);box-shadow:0 2px 0 var(--tint-line)}
.trip-tile .tt-h{font-size:22px;margin:0}
.tbar{margin:12px 0 4px}
.tb-track{display:flex;align-items:center;min-width:0}
.tb-node{flex:none;width:14px;height:14px;border-radius:50%;border:2px solid var(--field);background:var(--card)}
.tb-node.end{width:18px;height:18px}
.tb-node.end.done{background:var(--gf);border-color:var(--gf)}
.tb-node.brk.done{background:var(--orange);border-color:var(--orange)}
.tb-seg{flex:1 1 0;min-width:4px;height:4px;background:var(--line);border-radius:2px;margin:0 2px}
.tb-seg.done{background:var(--gf)}
.tb-seg.now{background:linear-gradient(90deg,var(--gf) 0 50%,var(--line) 50% 100%)}
.tb-lab{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--sub);margin-top:4px}
.tb-lab .mid{text-align:center;flex:1;min-width:0}
.tv-now{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0 0}
.tv-now dt{font:700 12px 'Instrument Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);padding-top:3px}
.tv-now dd{margin:0;font-size:15.5px;line-height:1.4}
.tt-acts,.tv-acts{margin-top:12px;flex-wrap:wrap;gap:8px}
.tt-live{margin-top:10px;font-size:15px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tt-start{margin-top:12px;padding:12px;border-radius:var(--r-md);background:var(--tint)}
.tt-start .row{margin-top:8px}
.tv-remind{margin-top:12px;font-weight:700;font-size:16px}
.tv-break .tv-remind{margin-top:0}
.tv-brow{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.tv-brow .btn.bigger{width:100%}
.tv-hint{margin:0}
@media(min-width:640px){.tv-brow{flex-direction:row;align-items:center;gap:14px}.tv-brow>span{flex:none}.tv-brow .btn.bigger{width:auto;min-width:280px}}
.tv-tips h2{font-size:18px}
.tv-tips ul{margin:6px 0 0 20px;font-size:15.5px}.tv-tips li+li{margin-top:2px}
.tv-head h1{font-size:clamp(24px,5vw,30px);margin-top:2px}
.tv-h3{font-size:16px;margin-top:6px}
.tv-adv summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
.tv-glove{padding:12px;display:block}
#stopform .sf-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
#stopform .choice span{padding:0 14px}
.sf-gas summary{min-height:44px}
.papersbox{border:1.5px solid var(--line);border-radius:var(--r-md);padding:10px 12px;background:var(--card)}
.papersbox .field{margin-top:6px}.papersbox input[type=text]{font-size:16px}
.thread .tthumbs{display:flex;flex-wrap:wrap;gap:8px}.thread .tthumbs .tbig{flex-basis:100%}
.pn-lines{margin-top:4px}
.tv-adv .tv-h3{border-top:1px solid var(--line);padding-top:12px;margin-top:16px}.tv-adv .tv-h3:first-child{border-top:0;padding-top:0;margin-top:0}
.paychoice .pc-f{border:0;padding:0;margin:10px 0 0;min-width:0}.paychoice .check{margin-top:8px}
/* email choices (founder 2026-09-30): sign-up, My account, Next step. P.notifyPick in account.js */
.npick{border:0;padding:0;margin:4px 0 0;min-width:0}.npick legend.f{margin-bottom:8px}
.npick .choice span{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
.npick .np-why{font-style:normal;font-weight:400;font-size:14px;color:var(--sub);line-height:1.35}
.nplist{margin-top:10px;border:1px solid var(--line);border-radius:var(--r-md);padding:2px 12px;background:var(--card)}
.np-row{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center;justify-content:space-between;padding:8px 0;border-top:1px solid var(--line)}.np-row:first-child{border-top:0}
.np-k{flex:1 1 180px;min-width:0}.np-k b{display:block}.np-k .small{display:block}
.np-t{display:flex;gap:16px;flex:none}.np-t .check{padding:6px 0;align-items:center}
.np-always{margin-top:10px}
/* Documents (founder 2026-09-30): docs.js */
.doc-list{list-style:none;padding:0;margin:8px 0 0}.doc-list li+li{border-top:1px solid var(--line)}
.doc-row{display:flex;gap:12px;align-items:center;min-height:56px;padding:8px 4px;color:var(--ink);text-decoration:none;border-radius:10px}.doc-row:hover{background:var(--bg)}
.doc-row .grow{min-width:0}.doc-row b{display:block;overflow-wrap:anywhere}.doc-row .small{display:block}
.doc-ico{flex:none;width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--tint);color:var(--ot);font-weight:700}
.doc-go{flex:none;font-size:24px;color:var(--sub)}
.doc-folder h2{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:20px}
.doc-tools{margin-bottom:4px}
.doc-sheet{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 16px;overflow-wrap:anywhere}
.ds-head{display:flex;gap:14px;align-items:center;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:12px}.ds-head h1{margin:0;font-size:26px}
.ds-brand{font-weight:700;font-size:20px;color:var(--ot)}
.ds-h2{font-size:18px;margin:20px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.doc-kv{margin:0}
.doc-money .as{display:block;font-size:13px;font-weight:400;color:var(--sub)}.doc-money td:last-child{padding-left:12px}
.doc-tl{margin:0;padding-left:20px}.doc-tl li{margin:8px 0}.doc-tl .tl-h{margin:0}.doc-tl p{margin:0}
.doc-chat{list-style:none;padding:0;margin:8px 0 0}.doc-chat li{border-left:3px solid var(--line);padding:4px 10px;margin:6px 0}.doc-chat .dc-plona{border-color:var(--ob)}.doc-chat .dc-me{border-color:var(--ink)}
.dc-who{margin:0}.dc-body{margin:2px 0 0;white-space:pre-wrap}
.ds-foot{margin-top:22px;padding-top:8px;border-top:1px solid var(--line)}
/* r4 (page tops; BUILD-SPEC 5.4): on screen the head is the page's h1 right under Back, with the route and dates under it (no "Plona"
   letterhead, no rule); paper and the downloaded file keep both. Print and Download sit after The move, then the Move ID line. */
@media screen{
  .doc-page .ds-brand{display:none}
  .doc-page .ds-head{display:block;border-bottom:0;padding-bottom:0;margin-bottom:6px}
  .doc-page .ds-head h1{font-size:clamp(28px,7.6vw,34px)}
  .doc-page .ds-sub{font-size:15px;margin:4px 0 0}
}
.doc-tools-end{margin:18px 0 0}
/* the pop-up when a move is finished */
.docpop-wrap{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:16px}
.docpop-scrim{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.docpop{position:relative;width:100%;max-width:420px;max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 18px 48px rgba(0,0,0,.25)}
.docpop h2{font-size:22px;margin:6px 0 4px}.docpop .dp-ico{font-size:30px}.docpop .btn{width:100%;justify-content:center}.docpop .dp-close{min-height:44px;align-self:center}
body.docpop-on{overflow:hidden}
/* print: only the document (Documents receipt and trip pages) */
@media print{
  body{background:#fff !important;color:#000 !important}
  body>*:not(main){display:none !important}
  main>*:not(.doc-page){display:none !important}
  .doc-noprint,.docpop-wrap{display:none !important}
  .doc-page{max-width:none;padding:0;margin:0}
  .doc-sheet{border:0;padding:0;background:#fff;color:#000}
  .doc-sheet *{color:#000 !important}
  .doc-chat li{break-inside:avoid}.doc-tl li{break-inside:avoid}
  /* the fee's (i) card prints open under its line (no button to tap on paper) */
  .doc-sheet tr.fee-tr[hidden]{display:table-row !important}.doc-sheet .ibtn{display:none !important}
}
/* exact addresses and car photos once booked (founder 2026-09-30, migrations 0137 and 0138): kit.js K.addrHtml, K.carPhotosHtml; the address to-do (home.js) */
.addr-card .addr{padding:10px 0;border-top:1px solid var(--line)}.addr-card .addr:first-of-type{border-top:0;padding-top:4px}
.addr-k{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--sub);font-weight:700;margin:0}
.addr-t{font-size:17px;font-weight:700;margin:2px 0 0;overflow-wrap:anywhere;line-height:1.35}
.addr-w{font-weight:700;margin:2px 0 0}
.addr.ad-need .addr-w{color:var(--ot)}
.addr-n{margin-top:4px;overflow-wrap:anywhere}
.addr-b{margin-top:8px}.addr-b .btn{width:auto;min-height:44px}
.addr-ok{min-height:20px;margin-top:4px;font-weight:600;color:var(--good-d)}
.addr-mini{margin-top:10px;padding:10px 12px;border-radius:var(--r-md);background:var(--wait)}
.addr-mini .addr-t{font-size:16px}
.carpics{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.carpics .cp-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.carpics figure{margin:0;width:calc(50% - 5px);max-width:220px}
.carpics .cp-a{display:block;min-height:44px;border-radius:10px}
.carpics img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:var(--wait)}
.carpics figcaption{font-size:13px;color:var(--sub);margin-top:2px}
.adtodo .adnote{min-height:88px}
.adtodo .count{font-size:13px;color:var(--sub);text-align:right}
.pkx{margin-top:10px;padding:12px;border-radius:var(--r-md);background:var(--wait)}
/* Chase item 14 (founder 2026-10-01): the driver's last sign-up button reads as ticking a box: "Show me cars to move (Open to Routes)".
   The checked box is drawn by CSS so it stays while the button says "Creating your account...". One primary button, 48px tall. */
.btn.openbtn{gap:10px;white-space:normal;line-height:1.2;text-align:left;padding-top:8px;padding-bottom:8px}
.btn.openbtn::before{content:"";flex:none;width:22px;height:22px;border-radius:5px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BF4A0A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:0 0 0 2px #fff}
.row .btn.openbtn{flex:1 1 260px;justify-content:center}

/* ---------- items 23 and 24 (founder 2026-10-01): Cars to move tabs and small cards; account home in separate tiles ---------- */
/* tabs: one panel at a time */
.mtabs{display:flex;gap:4px;padding:4px;background:var(--wait);border-radius:99px;margin:0 0 16px}
.mtabs [role=tab]{flex:1 1 0;min-width:0;min-height:44px;border:0;border-radius:99px;background:transparent;color:var(--ink);font:600 15px 'Instrument Sans',sans-serif;cursor:pointer;padding:0 10px;white-space:nowrap}
.mtabs [role=tab][aria-selected=true]{background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.14);font-weight:700}
.mtabs [role=tab]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.mtabs .mt-n{font-weight:600;color:var(--sub)}
.mpanel:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:8px}
/* a trip's tile on Cars to move and on home */
.mt-head{display:flex;gap:10px;align-items:flex-start}
.mt-head .tnum{margin:2px 0 0}
.mt-head .grow{flex:1;min-width:0}
.mt-h,.tt-name{font-size:19px;line-height:1.25;margin:0}
.mt-h:focus,.tt-name:focus{outline:none}
.tt-name a{color:inherit;text-decoration:none}
.tt-name a:hover,.tt-name a:focus-visible{text-decoration:underline}
.mtrip .mlist{margin-top:12px}
.mtrip,.ttile,.rtile{scroll-margin-top:calc(var(--sh-stick) + 16px)}
/* small cards: the route, one meta line, the pay, the short gas line, one chip row */
.mlist{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.mcard{display:block;min-width:0;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.mtrip .mcard{background:var(--bg)}
.mcard:hover{border-color:var(--orange)}
.mcard:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.mcard[hidden]{display:none}
.mc-route{font:600 17px/1.25 'Clash Grotesk','Instrument Sans',sans-serif;letter-spacing:-.01em;margin:0}
.mc-meta{font-size:14px;color:var(--sub);margin-top:2px}
.mc-pay{font-size:15px;margin-top:8px}
.mc-pay b{font:600 22px 'Clash Grotesk','Instrument Sans',sans-serif;letter-spacing:-.01em}
.mc-pay.mc-none{color:var(--sub)}
.mc-gas{font-size:13px;color:var(--sub);margin-top:0}
.mc-chips{justify-content:flex-start;gap:6px;margin-top:8px}
.mc-chips .chip{font-size:12.5px;min-height:24px;padding:2px 9px}
.mc-fit{font-weight:700}
.mc-else{border:1.5px dashed var(--sub);background:transparent;font-weight:700}
.mc-off{font-size:13px;color:var(--sub);margin-top:4px}
@media(min-width:900px){.mpage{max-width:880px}.mlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Browse all: the search box with a Filters button; the vehicle options open only when asked */
.msearch{display:flex;gap:8px;align-items:flex-end}
.msearch .field{flex:1;min-width:0;margin:0}
.mfbtn{flex:none;min-height:48px;padding:0 16px}
.mfpanel{margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.mcount{margin:12px 0 8px}
/* home: the role groups, one tile per trip, per route and per list */
.rolehead{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);margin:6px 0 -8px}
.stack-l>.rolegrp{margin-top:28px}
.ttile.paused{border-style:dashed}
.tt-count{margin-top:10px;font-size:15px;color:var(--sub)}
.tt-count.has{color:var(--good-d);font-weight:700}
.tt-acts{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.tt-acts>.btn{width:100%}
.tt-sec{display:flex;gap:8px}
.tt-sec>.btn{flex:1 1 0;min-width:0;padding:0 8px}
@media(min-width:640px){.tt-acts{flex-direction:row;flex-wrap:wrap;align-items:center}.tt-acts>.btn{width:auto;min-width:200px}.tt-sec>.btn{flex:0 0 auto;padding:0 16px}}
.addrow .btn{width:100%}
@media(min-width:640px){.addrow .btn{width:auto;min-width:240px}}
.rtile .acard-top h2,.rtile .acard-top h3{font-size:19px}
.wwtile .ww{margin-top:-4px}
.wwtile .ww+.ww{margin-top:8px;border-top:1px solid var(--line);padding-top:6px}
/* Cars I applied to: compact cards that open the room */
.appl{list-style:none;margin:0;padding:0}
.appl li+li{border-top:1px solid var(--line)}
.appc{display:flex;gap:12px;align-items:center;padding:10px 4px;min-height:60px;color:var(--ink);text-decoration:none;border-radius:10px}
.appc:hover,.appc:focus-visible{background:var(--wait)}
.appc-m{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.appc-r{font-size:16px}
.appc-l{font-size:14px;color:var(--sub)}
/* the apply step: "Can you drive a manual?" */
.manq{border:0;margin:14px 0 0;padding:0}
.manq .choice{margin-top:6px}
/* ---------- Checkpoints (founder 2026-10-01, item 20): the progress bar with the bull, Log checkpoint (i), trip sections ---------- */
.tb2{margin:14px 0 6px}
.tb2-in{padding:34px 17px 0}
.tb2-track{position:relative;height:6px;border-radius:3px;background:var(--line)}
.tb2-fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--gf)}
.tb2-end{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid var(--field);background:var(--card)}
.tb2-end.s{left:0}.tb2-end.e{left:100%}
.tb2-end.done{background:var(--gf);border-color:var(--gf)}
.tb2-mk{position:absolute;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:2px solid var(--field);background:var(--card);display:flex;align-items:center;justify-content:center;font:700 12px/1 'Instrument Sans',sans-serif;color:#fff}
.tb2-mk.done{background:var(--orange);border-color:var(--orange)}
.tb2-mk.due{border-color:var(--orange)}
.tb2-mk.missed{background:var(--bad);border-color:var(--bad)}
.tb2-mk.explained{background:var(--warn);border-color:var(--warn);color:#000}
.tb2-pc{position:absolute;top:16px;transform:translateX(-50%);font-size:11.5px;color:var(--sub);white-space:nowrap}
.tb2-bull{position:absolute;bottom:8px;width:34px;height:34px;margin-left:-17px;z-index:1;pointer-events:none}
.tb2-bull img{display:block;width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.tb2-bull.go{animation:tb2go 1.4s cubic-bezier(.3,.7,.3,1) both}
.tb2.road .tb2-bull img{animation:tb2trot 1.6s ease-in-out infinite}
@keyframes tb2go{from{left:var(--from)}to{left:var(--to)}}
@keyframes tb2trot{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.tb2-bull.go,.tb2.road .tb2-bull img{animation:none}}
.tb2-lab{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--sub);margin-top:22px}
.tb2-lab .mid{text-align:center;flex:1;min-width:0;font-weight:600;color:var(--ink)}
.cpbtn{display:flex;align-items:center;gap:10px}
.cpbtn>span{flex:1;min-width:0}
.cpbtn .btn.bigger{width:100%}
.cp-i{flex:none;width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);background:var(--card);color:var(--ink);font:700 italic 18px/1 Georgia,serif;cursor:pointer}
.cp-i[aria-expanded=true]{background:var(--ink);color:var(--bg)}
.cp-tip{margin-top:8px;font-size:15px;color:var(--ink);background:var(--tint);border-radius:var(--r-md);padding:10px 12px}
@media(min-width:640px){.cpbtn>span{flex:0 0 auto}.cpbtn .btn.bigger{width:auto;min-width:280px}}
/* the trip view: tap-open sections, one open at a time; the status and the bar stay above them */
.tvsecs{display:flex;flex-direction:column;gap:10px}
.tv-sec{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.tv-sec.hot{border:2px solid var(--ob)}
.tv-sec>h2{margin:0;font-size:18px}
.tv-sh{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:10px 16px;background:none;border:0;text-align:left;cursor:pointer;color:var(--ink);font:600 18px/1.25 'Clash Grotesk','Instrument Sans',sans-serif}
.tv-sh .t{flex:1;min-width:0}
.tv-sh .sm{display:block;font:500 13.5px/1.35 'Instrument Sans',sans-serif;color:var(--sub);margin-top:2px}
.tv-sh .chev{flex:none;width:12px;height:12px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg);margin:-4px 4px 0 0;transition:transform .15s}
.tv-sh[aria-expanded=true] .chev{transform:rotate(225deg);margin-top:4px}
.tv-sh .dot{flex:none;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:var(--bad);color:#fff;font:700 12px/22px 'Instrument Sans',sans-serif;text-align:center}
.tv-sb{padding:0 16px 16px}
.tv-sb>.card{border:0;padding:0;background:none}
.tv-sb>.card+.card,.tv-sb>*+*{margin-top:14px}
.tv-sb .card.next{border:0}
@media(prefers-reduced-motion:reduce){.tv-sh .chev{transition:none}}
.mklist{list-style:none;margin:6px 0 0;padding:0}
.mklist li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line)}
.mklist li:first-child{border-top:0}
.mklist .tb2-mk{position:static;margin:2px 0 0;flex:none}
.skipask{border:2px solid var(--bad);background:var(--bad-bg);border-radius:var(--r-md);padding:12px}
.skipask h3{font-size:18px}
.skipask .skipopts{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.skipask .skipopts label{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);cursor:pointer;font-size:16px}
.skipask .skipopts input{width:20px;height:20px;flex:none;margin:0}
.skipask input[type=text]{font-size:16px}
.mkwarn{border-left:4px solid var(--bad);padding:8px 12px;background:var(--bad-bg);border-radius:8px}
.mkinfo{border-left:4px solid var(--warn);padding:8px 12px;background:var(--warn-bg);border-radius:8px}
/* ---------- Car info on the pay step (founder 2026-10-01, item 5 final) ---------- */
.ci-modes{display:flex;flex-direction:column;gap:8px;margin-top:10px;border:0;padding:0}
.ci-mode{display:flex;gap:10px;align-items:flex-start;min-height:56px;padding:12px;border:2px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer}
.ci-mode:has(input:checked){border-color:var(--ob);background:var(--tint)}
.ci-mode input{width:22px;height:22px;flex:none;margin:2px 0 0}
.ci-mode b{display:block;font-size:16px}
.ci-mode .small{display:block}
.ci-panel{margin-top:12px}
.ci-panel input[type=text]{font-size:16px;width:100%}
.ci-vin{font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}
.ci-lab{display:flex;align-items:center;gap:8px}
.ci-lab .cp-i{width:32px;height:32px;font-size:15px;border-width:1.5px}
.ci-lab .cp-i::before{content:"";position:absolute;inset:-6px}
.ci-lab .cp-i{position:relative}
.ci-sum{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.ci-sum dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:6px 0 0}
.ci-sum dt{color:var(--sub);font-size:14px}.ci-sum dd{margin:0;font-weight:600}
.carinfo-find dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:6px 0 0}
.carinfo-find dt{color:var(--sub);font-size:14px}.carinfo-find dd{margin:0;font-weight:600}
/* ---------- founder 2026-10-02: the Plona Page, the trail, route and driver pages in sections, the walk-away money lines, driver tips ---------- */
/* Page tops (founder 2026-10-09, Back look 2026-10-10: "I prefer arrow. Look how Turo did it."). The ONE head for every inner page, right
   under the tab bar, and the ONE Back look for the whole app: inner pages, the route page bar and the step bar.
   Replaces .trail, .homeback, .savedline (part2.css 654-663), .ve-back (routes.css 148), .ic-back (more-inbox.css 145-147) and the step
   bar's bare Back (steps.css 26-27). Tokens only, so dark mode keeps working. Here in place of the old .trail, .homeback and .savedline rules. */

/* PT1 (founder 2026-10-10): the round Back ALONE on its own row at the top left, like Turo; the page's title block (h1, one short line)
   full width under it, left aligned. .phead-m is the title row: the title block, and at its right end an optional item (the
   conversation's photo), never next to Back. No kicker, no reference code, no status chip here (PT2). */
.phead{display:block;margin:0 0 16px}
.phead-bk{display:flex;align-items:center;min-height:44px}
.phead-m{display:flex;align-items:center;gap:12px;margin-top:12px}
.phead-t{flex:1;min-width:0}
.phead h1{margin:0;font-size:clamp(26px,7vw,32px);line-height:1.12;overflow-wrap:anywhere}
.phead-sub{margin:6px 0 0;font-size:15px;line-height:1.4;color:var(--sub)}
/* Back alone (shell.trail, and pages whose title sits in their own first card or banner): the same row, then the page's own h1 */
.phead.pbk-only{display:flex;align-items:center;min-height:44px;margin:0 0 12px}
/* PT3: the page's one status line (shell.statusLine), in the body under the head */
.pstat{margin:0 0 4px;font-size:16px;line-height:1.45;color:var(--sub)}
.pstat b{color:var(--ink)}
.pstat.mine b{color:var(--ot)}
.pstat.done b{color:var(--good-d)}
.pstat.bad b{color:var(--bad)}
/* the relation chip (K.relChip, kit.js): the same word as the Inbox row, for cards only (never in a page top, PT2). Pending, Pending owner
   payment and Offer for you carry the clock; the booked words are green. Tokens only, so dark mode follows. */
.rel{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:1px 9px;border-radius:99px;font:700 12.5px/1.2 'Instrument Sans',sans-serif;
  background:var(--wait);color:var(--ink);white-space:nowrap}
.rel svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rel.pend{background:var(--tint);color:var(--ot);box-shadow:inset 0 0 0 1px var(--tint-line)}
.rel.booked{background:var(--good-bg);color:var(--good-d)}
/* the owner's money (founder 2026-10-10): "Your price $305" and Price details (K.priceLine), and the Price details sheet (K.priceSheet,
   dialog.was from walk.css): the price big on a tint, one sentence, "Change my price" while no offer is out, Got it */
.op-price{display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap;margin:0;font-size:15px}
.op-price b{font:600 22px/1.1 'Clash Grotesk','Instrument Sans',sans-serif;font-variant-numeric:tabular-nums}
.op-price .linkbtn{font-size:14.5px;min-height:44px}
.receipt .op-price+.op-price{margin-top:2px}
dialog.was.ps-sh{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.ps-sh .was-head h2{font-size:23px}
.pd-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 12px;padding:12px 14px;border-radius:var(--r-md);background:var(--tint)}
.pd-top span{font:600 19px/1.3 'Clash Grotesk','Instrument Sans',sans-serif}
.pd-top b{font:600 32px/1.1 'Clash Grotesk','Instrument Sans',sans-serif;font-variant-numeric:tabular-nums}
/* the lines under the price (Finance 2026-10-09, the 15% fee; K.priceLines): What your driver gets, then the fee with its (i), whose card
   opens right under it. Plain rows, no plus or minus signs. */
.pd-lines{margin:-4px 0 12px}
.pd-lines .pd-l{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:44px;padding:2px 2px 2px 14px;border-bottom:1px solid var(--line);font-size:16px;line-height:1.3}
.pd-lines .pd-l b{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:17px}
.pd-lines .pd-l .fl{min-width:0;flex:1 1 auto}
.pd-lines .pd-l small{color:var(--sub);font-size:13px;margin-left:4px}
.pd-lines .fee-card{margin:6px 0 0;padding:10px 12px}
/* 0220 (3.4.2): Legal's "Ride to your next stop" sentence under What your driver gets (it is part of it), quiet, inside that row's line */
.pd-lines .pd-l.has-ride{border-bottom:0}
.pd-lines .pd-ride{margin:0;padding:0 2px 10px 14px;border-bottom:1px solid var(--line);font-size:14px;line-height:1.4;color:var(--sub)}
.fee-card .fee-src{margin:6px 0 0}
.ps-sh .ps-change{display:flex;width:100%;margin:2px 0 0}
.ps-sh .ps-fine{font-size:13.5px;line-height:1.4;color:var(--sub);text-align:center;margin:6px 0 10px}
.ps-sh .was-ok{display:flex;width:100%}
/* PT4: the reference code, once, at the bottom of the details (shell.refLine): "Route ID PLN-T214" */
.refline{margin:14px 0 0;font-size:13px;line-height:1.4;color:var(--sub)}
.refline .mono{font-size:12.5px;letter-spacing:.02em;color:var(--sub)}

/* Back, Turo style: a light, slightly see-through round button, 44px, a soft shadow, and a thin straight arrow (a line with an arrowhead,
   not a chevron, not the word Back). The SVG is BACK_ARROW: <path d="M19 12H5M11 6l-6 6 6 6"/>, the same path as steps.js ARROW and
   PlonaChrome.ICON.back. .stp-row .stp-back is the step bar's Back: the same button, so step pages and inner pages match. */
.pbk,.stp-row .stp-back{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;
  background:var(--card);background:color-mix(in srgb,var(--card) 86%,transparent);
  border:1px solid var(--line);border-color:color-mix(in srgb,var(--line) 75%,transparent);
  box-shadow:0 1px 2px rgba(20,20,20,.06),0 3px 10px rgba(20,20,20,.10);
  -webkit-backdrop-filter:blur(8px) saturate(1.2);backdrop-filter:blur(8px) saturate(1.2);
  color:var(--ink);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease-out,transform .1s ease-out}
.pbk svg,.stp-row .stp-back svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.stp-row .stp-back svg path{stroke-width:1.7}   /* steps.js ARROW puts the stroke width on the path itself */
.pbk:hover,.stp-row .stp-back:hover{background:var(--wait)}
.pbk:active,.stp-row .stp-back:active{transform:scale(.94)}
.pbk:focus-visible,.stp-row .stp-back:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.stp-row .stp-back.stp-none{visibility:hidden;box-shadow:none}   /* the finale keeps the space, shows nothing */

/* the conversation page (#/inbox/:app, inbox.js): one head like every page. Back alone on its row; under it the name, the relation and
   route line ("Applicant · El Paso to Phoenix", the same words as its Inbox row) and the room link, the other person's photo at the
   right end of that title row. Replaces .ic-back, .ic-bi and .ic-head (more-inbox.css 145-149). */
.ic-ph{margin:0;padding:10px 0 12px;border-bottom:1px solid var(--line)}
.ic-ph .phead-m{margin-top:10px}
.ic-ph .phead-m>.pav{flex:none;width:48px;height:48px;font-size:20px;background-color:var(--tint);color:var(--ot)}
.ic-ph .phead-m>.pav.has{color:transparent}  /* 3.4.3 (item 12): the letter never shows over the photo (K.avatar also takes the letter out once the photo loads) */
.ic-ph h1{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:clamp(24px,6.4vw,28px)}
.ic-ph .phead-sub{margin-top:2px}
.ic-ph .ic-room{margin:-6px 0 -12px}

/* the route page (route-apply, #/apply/:listing): Back alone in .rp-bar (route.css); its ref is the .refline at the bottom of the details */

/* a page whose task card carries the action keeps the card title as h2 at the old size */
.banner h2{font-size:clamp(22px,5.2vw,32px);margin:4px 0 4px}

@media (prefers-reduced-motion:reduce){.pbk,.stp-row .stp-back{transition:none}.pbk:active,.stp-row .stp-back:active{transform:none}}
@media print{.phead .pbk,.phead-bk,.phead.pbk-only{display:none}.phead-m{margin-top:0}}
.savedst{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:8px 0 2px;font-size:14px}
.savedst .sv{color:var(--good-d);font-weight:700}
.savedst .sv-n{background:var(--wait);border-radius:99px;padding:2px 10px;font-weight:600}
.ghead{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ghead h2{margin:0;font-size:22px}
.cp-i.ib{width:32px;height:32px;font-size:15px;border-width:1.5px;position:relative}
.cp-i.ib::before{content:"";position:absolute;inset:-6px}
.cp-tip p+p{margin-top:6px}
.hgroup .cp-tip{margin:-4px 0 12px}
.rtlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rtl{display:flex;gap:12px;align-items:center;width:100%;min-height:64px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--ink);text-decoration:none;font:inherit;text-align:left;cursor:pointer}
.rtl:hover,.rtl:focus-visible{border-color:var(--orange)}
.rtl.start{border:2px dashed var(--ob);background:var(--card)}
.tile.rtl{background:var(--card);padding:18px 16px}
.rtl-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.rtl-top{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.rtl-n{font:600 19px/1.2 'Clash Grotesk','Instrument Sans',sans-serif}
.ptile .rtl-n{font-size:22px}
.rtl-l{font-size:15px;color:var(--ink)}
.rtl-turn{font-weight:700}
.rt-av{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin-top:4px}
.rt-av .avatar{width:28px;height:28px;font-size:13px}
.rt-a1{display:inline-flex;align-items:center;gap:6px}
.rt-avn{font-size:13px;color:var(--sub)}
.rt-avn .tag{font-style:normal;margin-left:2px}
.rhead h1{margin-top:2px}
.rstat{margin-top:6px;font-size:15px;color:var(--sub)}
.rstat b{color:var(--ink)}
.nextline{margin-top:10px;padding:10px 12px;border-radius:var(--r-md);background:var(--tint);font-size:15px}
.nextline.ok{background:var(--good-bg)}
.nextline a{font-weight:700;color:var(--ink)}
.rsec-h{display:flex;align-items:center;gap:6px;padding-right:10px}
.rsec-h h2{flex:1;min-width:0;margin:0;font-size:18px}
.rsec.big .tv-sh{min-height:68px;font-size:21px}
.schip{flex:none;font:700 12.5px/1.2 'Instrument Sans',sans-serif;border-radius:99px;padding:4px 10px;background:var(--wait);color:var(--ink);max-width:45%;text-align:center}
.schip.mine{background:var(--ob);color:#fff}.schip.done{background:var(--good-bg);color:var(--good-d)}.schip.warn{background:var(--warn-bg);color:var(--warn-d)}.schip.wait{background:var(--wait)}
.rg-h{margin-top:14px}
.rg-h .schip{margin-left:6px;text-transform:none;letter-spacing:0}
.apl-big .apl-a{min-height:72px}
.apl-big .apl-top b{font-size:17px}
.rturn{margin-bottom:12px}
.ydrv{display:flex;gap:12px;align-items:center}
.msgrow{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.msgrow:first-child{border-top:0}
.msgrow .grow{flex:1 1 200px;min-width:0}
.danger-t{color:var(--bad)}
.mlist-big{margin-bottom:12px}
.mbrowse{margin-top:6px}
.mbrowse>summary{font-weight:700;font-size:16px}
.mt-n{font-weight:500;color:var(--sub)}
.walk{margin-top:8px;padding:12px 14px;border-radius:var(--r-md);background:var(--good-bg)}
.walk-big{font:600 20px/1.25 'Clash Grotesk','Instrument Sans',sans-serif;color:var(--ink)}
.walk-big b{font-size:26px}
.walk-l{font-size:15px;color:var(--ink);margin-top:4px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.walk-l .nw{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.walk .cp-i.ib{width:28px;height:28px;font-size:14px}
.walk .cp-i.ib::before{inset:-8px} /* QA 2026-10-02: 28px circle, 44px tap area */
.walk-l.walk-gas{display:block}.walk-gas .nw{vertical-align:middle} /* the words wrap like a sentence; "pickup (i)" never splits */
.walk .cp-tip{margin:6px 0 2px;background:var(--card)}
.receipt .walk{margin:0 0 10px}
.tipsbox{margin-top:12px;padding:12px 14px;border-radius:var(--r-md);background:var(--tint)}
.tips{margin:8px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.tips li>p+p,.tips li>p+ol{margin-top:6px}
.tips .howto{margin-top:4px}
.tipsd{margin-top:10px}
.tipchk{margin-top:12px;font-weight:700}
.pstars{color:var(--orange);letter-spacing:2px}
.pstars .off{color:var(--line)}
.rsec .addrow{margin-top:12px}
.rsec .ttile{margin-top:10px}
.rsec .ttile:first-child{margin-top:0}

/* ---------- 3.5.8: the guided walk-around (kit.js K.carSidesHtml, media.js M.walk; the whys, one per choice, are in media.js). The card
   "Photos of your car, 0 of 4", four tiles in walk order (2 by 2 on a phone, 4 in a row from 600px wide), Take photos and Upload photos,
   the short card once all four are in (one row, "4 of 4"), and the walk's sheet. Sizes from the 3.5.8 scale, colors from the theme's
   tokens (dark mode keeps working); the only fixed colors are the dark scrims over a photo. ---------- */
.cw-fs{border:0;padding:0;margin:0;min-width:0}
.cw{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);padding:var(--s3);container-type:inline-size}
.cw-top{display:flex;align-items:center;gap:var(--s3)}
.cw-h{flex:1;min-width:0;margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:var(--s1) var(--s2);font:700 17px/1.3 'Instrument Sans',sans-serif;letter-spacing:0}
.cw-h:focus{outline:0}
.cw-n{display:inline-flex;align-items:center;min-height:24px;padding:0 var(--s2);border-radius:99px;background:var(--wait);color:var(--ink);font:700 13px/1 'Instrument Sans',sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.cw-done .cw-n{background:var(--good-bg);color:var(--good-d)}
.cw-top .wa-i{margin-right:var(--s1)}
.cw-lead{margin:var(--s1) 0 0;font-size:15px;line-height:1.4;color:var(--sub);text-wrap:pretty}
.cw-tips{margin-top:var(--s2)}.cw-tips ul{margin:0 0 0 18px}.cw-tips li+li{margin-top:2px}
.cw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin-top:var(--s3)}
/* 3.5.8 review fix: four in a row by the card's own width, not the window's (the pay step's Car info sheet is about 440px wide on a laptop,
   where four in a row broke "Passenger side" mid-word) */
@container (min-width:480px){.cw-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cw .cw-t{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;padding:6px var(--s2);border:1.5px dashed var(--field);border-radius:var(--r-md);background:var(--bg)}
.cw .cw-t.ok,.cw .cw-t.busy{border-style:solid;border-color:var(--good)}
.cw .cw-t.busy{border-color:var(--line)}
/* 3.5.8 review fix: a 26px outline (was 36), so the card is shorter and Car details fits a typical phone before the photos are in */
.cw .cw-t .im{position:static;aspect-ratio:auto;width:100%;height:26px;border:0;border-radius:0;background:none;overflow:visible;color:var(--sub);display:flex;align-items:center;justify-content:center}
.cw-ol{display:block;width:auto;height:100%;max-width:100%}
.cw-ol .pl{stroke:var(--ot)}
.cw .cw-t .cap{min-height:0;margin-top:0;font-size:15px;font-weight:700;line-height:1.25;overflow-wrap:break-word;word-break:normal;hyphens:manual}
.cw .cw-t .cap:before{content:none}
.cw-note{display:block;margin-top:0;font-size:13px;line-height:1.3;color:var(--sub)}
/* a photo in: it fills the tile (the tile keeps its size, so nothing jumps), its name on a dark chip where the name was */
.cw .cw-t.ok .im img,.cw .cw-t.busy .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r-md) - 2px)}
.cw .cw-t.ok .cap{position:relative;z-index:1;max-width:100%;padding:2px var(--s2);border-radius:99px;background:rgba(20,16,12,.74);color:#fff;font-size:13px;line-height:1.15}
.cw .cw-t.ok .cap:before{content:'\2713  ';color:#8fe3b6}
/* 3.5.8 review fix: the Back tile keeps his plate note over its photo too (on a dark chip, like the name), so a retake still says it */
.cw .cw-t.ok .cw-note,.cw .cw-t.busy .cw-note{position:relative;z-index:1;max-width:calc(100% + 2 * var(--s1));margin:0 calc(var(--s1) * -1);padding:0 var(--s1);border-radius:var(--r-sm);background:rgba(20,16,12,.74);color:#fff}
.cw-sv{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:var(--s2);border-radius:calc(var(--r-md) - 2px);background:rgba(20,16,12,.55);color:#fff;font:700 13px/1.2 'Instrument Sans',sans-serif}
.cw-spin{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin 1s linear infinite}
@media (prefers-reduced-motion:reduce){.cw-spin{animation:none;border-right-color:#fff}}
.cw .cw-t label.pick{z-index:3}
.cw .cw-t.busy .pick{pointer-events:none}
/* the buttons: Take photos (the card's own action; the step's one filled button stays Continue) and Upload photos; on a computer Upload
   and "Easier on your phone" */
.cw-acts{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);margin-top:var(--s3)}
.cw-acts .cw-go{flex:1 1 auto}
.cw-acts .cw-up{flex:none}
.cw-pc{font-size:14px;line-height:1.4;color:var(--sub)}
/* all four in: one row of four thumbnails, each one a tap to retake it */
.cw-done .cw-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
.cw.cw-done .cw-t{padding:0;border:0;background:none}
.cw.cw-done .cw-t .im{position:relative;height:auto;aspect-ratio:4/3;border:1.5px solid var(--good);border-radius:var(--r-md);overflow:hidden}
.cw.cw-done .cw-t.ok .im img{border-radius:0}
.cw.cw-done .cw-t.ok .cap{position:static;max-width:none;margin-top:var(--s1);padding:0;border-radius:0;background:none;color:var(--ink);font-size:13px;line-height:1.25}
.cw.cw-done .cw-t.ok .cap:before{content:none}
.cw.cw-done .cw-note{display:none}
/* the step: the card, then the miles and the plate as a new group */
.cd-num{margin-top:var(--v-group)}
/* the walk's sheet (dialog.was .ps-sh): "Photo 2 of 4", the angle's name, its outline big, one sentence, the button; then the photo with
   Use photo and Retake */
.cw-sh .cw-of{margin:0;font:700 13px/1.3 'Instrument Sans',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--sub)}
.cw-sh .cw-big{display:flex;justify-content:center;margin:var(--s4) 0 var(--s3);color:var(--ink)}
.cw-sh .cw-ol.big{width:min(240px,72%);height:auto}
.cw-sh .cw-say{margin:0;font-size:17px;line-height:1.45;text-align:center;text-wrap:balance}
.cw-sh .cw-pl{margin:var(--s2) 0 0;text-align:center;font-size:15px;font-weight:700;color:var(--ot)}
.cw-sh label.btn.cw-take{display:flex;margin-top:var(--s5)}
.cw-sh .cw-alt{margin:var(--s2) 0 0;text-align:center}
.cw-sh .filebtn{position:relative;cursor:pointer}.cw-sh .filebtn:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.cw-sh .cw-prev{margin-top:var(--s3)}
.cw-sh .cw-prev img{display:block;width:100%;max-height:min(44vh,360px);object-fit:contain;border-radius:var(--r-md);background:var(--wait)}
.cw-sh .cw-chk{margin:var(--s3) 0 0;font-size:15px;color:var(--sub);text-align:center}
.cw-sh .cw-bad{margin:var(--s3) 0 0;padding:10px 12px;border-radius:var(--r-md);background:var(--bad-bg);color:var(--bad);font-size:15px;font-weight:700;line-height:1.4}
.cw-sh .cw-warn{margin:var(--s3) 0 0}
.cw-sh .cw-two{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s4)}
dialog.cw-sh .cw-two .btn{width:100%;margin:0}
/* the driver's pickup and drop-off boxes (wizard.js): the same outlines and the plate note */
.slotgrid .slot .im .cw-ol{width:78%;height:auto}