/* Home (the logo's place, #/home), the Routes tab (#/routes) in owner mode and driver mode, and the Vehicles tab (#/vehicles,
   #/vehicle/:id). Round 3A, 2026-10-09 (r3prep/routes-home/routes.css). Linked in app/index.html right after css/steps.css.
   Uses the app.css tokens only. The How Plona works picture and its "Why Plona?" link (.how, .how-more) are styled by /js/how.js;
   the bull wait screen is chrome.css (.bw). */

/* ---------- Home ---------- */
.hm{max-width:760px}
.hm-hi{font-size:clamp(30px,6vw,40px);margin:4px 0 14px}
/* the one "Needs you" card (or the one "Moving now" card when nothing needs the person) */
.hm-need{background:var(--card);border:2px solid var(--ob);border-radius:var(--r-lg);padding:16px}
.hm-need .kicker{display:flex;align-items:center;gap:8px}
.hm-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--orange)}
.hm-need h2{font-size:22px;margin:2px 0 6px}
.hm-need p{font-size:15.5px;line-height:1.45}
.hm-need .hm-act{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:14px}
.hm-need .hm-act .btn{flex:1 1 220px}
@media(min-width:720px){.hm-need .hm-act .btn{flex:0 1 auto;min-width:260px}}
.hm-need .small{flex:none}
/* "N more things in Routes": the same link look as how.js .how-more (one link style on Home) */
.hm-also{display:inline-block;padding:11px 0;margin-top:2px;line-height:22px;font-weight:600;font-size:16px;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--tint-line);text-decoration-thickness:2px}
.hm-also:hover{text-decoration-color:var(--orange)}
.hm-also>span{display:inline-block;margin-left:6px}  /* an inline-block in an inline-block link: the underline skips the arrow */
.hm-need.trip{border-color:var(--orange)}
.hm-need.trip .tb2{margin:6px 0 2px}
/* the two starts */
.hm-starts{margin-top:26px}
.hm-starts>h2{font-size:20px;margin-bottom:10px}
.hm-grid{display:grid;gap:12px}
.hm-start{display:flex;align-items:center;gap:14px;width:100%;min-height:104px;padding:16px;border-radius:var(--r-lg);border:2px solid transparent;text-align:left;font:inherit;color:#fff;text-decoration:none;cursor:pointer}
.hm-start.own{background:var(--ob)}
.hm-start.drv{background:var(--ink)}
.hm-start:hover{filter:brightness(1.1)}
.hm-start:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.hm-start.drv:focus-visible{outline-color:var(--orange)}
.hm-ico{flex:none;width:56px;height:56px;border-radius:14px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}
.hm-ico svg{width:30px;height:30px}  /* PlonaChrome.ICON.car / .wheel (24 viewBox, stroke 1.9) */
.hm-st{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.hm-st small{font:700 12px/1 'Instrument Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase}
.hm-st b{font:600 21px/1.18 'Clash Grotesk','Instrument Sans',sans-serif;letter-spacing:-.01em}
.hm-st span{font-size:14.5px;line-height:1.35}
.hm-chev{flex:none;width:22px;height:22px}
@media(min-width:720px){.hm-grid{grid-template-columns:1fr 1fr}.hm-start{min-height:132px;align-items:flex-start}.hm-chev{align-self:center}}
/* the How Plona works card: PlonaHow.html({size:'sm', hideTitle:true}) from /js/how.js, then the .how-more link */
.hm-why{margin-top:30px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 16px 6px}
.hm-why>h2{font-size:20px;margin:0 0 12px}
.hm-why .how-more{margin-top:6px}

/* ---------- Routes tab ---------- */
.ro-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.ro-sec{margin-top:22px}
.ro-sec:first-of-type{margin-top:14px}
.ro-h{display:flex;align-items:center;gap:8px;font-size:19px;margin:0 0 10px}
.ro-n{font:700 12.5px/1 'Instrument Sans',sans-serif;border-radius:99px;padding:5px 9px;background:var(--wait);color:var(--ink)}
.ro-n.mine{background:var(--ob);color:#fff}
.ro-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ro-list .rtl{background:var(--card);min-height:68px;padding:12px 14px}
.ro-list .rtl-n{font-size:18px}
.ro-list .rtl-l{font-size:14.5px;color:var(--sub)}
.ro-list .rtl-l b{color:var(--ink)}
.ro-need .rtl,.ro-list .rtl.ro-mine{border-color:var(--tint-line);box-shadow:inset 4px 0 0 var(--ob)}  /* .ro-mine: one "your turn" row in a mixed list (driver More trips) */
.ro-go{flex:none;align-self:center;display:flex;align-items:center;gap:2px;color:var(--ot);font-weight:700;font-size:15px}
.ro-go svg{width:18px;height:18px}
.ro-av{display:flex;align-items:center;gap:6px;margin-top:2px}
.ro-av .pav{width:26px;height:26px;margin-left:-8px;border:2px solid var(--card);font-size:12px;background-color:var(--tint);color:var(--ot)}  /* base .pav comes from kit.js (injected style, line 411) */
.ro-av .pav:first-child{margin-left:0}
.ro-av .small{margin-left:2px}
/* the slim trip card: the bull bar, one Now line, one main button */
.ro-trip{padding:16px}
.ro-trip .tt-h{font-size:21px}
.ro-trip .tb2{margin:8px 0 2px}
.ro-now{font-size:15px;margin-top:8px}
.ro-now b{font-weight:700}
.ro-trip .ro-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ro-trip .ro-acts .btn{flex:1 1 130px;padding:0 12px}
.ro-turn{display:inline-flex;align-items:center;margin-left:auto;font:700 12.5px/1.2 'Instrument Sans',sans-serif;letter-spacing:0;text-transform:none;border-radius:99px;padding:4px 10px;background:var(--ob);color:#fff}
/* past moves and closed applications fold away */
.ro-fold{background:var(--card);border:1px solid var(--line);border-radius:14px}
.ro-fold>summary{display:flex;align-items:center;gap:8px;min-height:56px;padding:0 14px;cursor:pointer;list-style:none;font:600 18px/1.2 'Clash Grotesk','Instrument Sans',sans-serif}
.ro-fold>summary::-webkit-details-marker{display:none}
.ro-fold>summary::after{content:"";margin-left:auto;width:10px;height:10px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translateY(-3px)}
.ro-fold[open]>summary::after{transform:rotate(-135deg) translateY(-3px)}
.ro-fold .ro-list{padding:0 10px 10px}
.ro-fold .rtl{background:var(--bg)}
.ro-fold .small{padding:0 14px 12px}
/* the quiet add row at the bottom */
.ro-add{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;margin-top:22px;padding-top:12px;border-top:1px solid var(--line)}
.ro-add .small{margin-right:2px}
/* the empty state */
.ro-empty{text-align:center;padding:18px 8px 8px}
.ro-empty .ro-art{width:100%;max-width:320px;height:auto;display:block;margin:0 auto 16px}  /* drawn in the why-visual style (section 5.5) */
.ro-empty h2{font-size:24px}
.ro-empty p{color:var(--sub);margin:6px auto 18px;max-width:360px}
.ro-empty .btn{min-width:min(240px,100%)}   /* 200% zoom (195px): never wider than the page */
.ro-empty .linkbtn{margin-top:6px}

/* ---------- Driver mode: the next trip, big (Turo's next trip), then "More trips" as rows ---------- */
.ro-hero{background:var(--card);border:2px solid var(--ink);border-radius:var(--r-lg);padding:18px 16px 16px}
.ro-hero.trip-tile{border-color:var(--orange)}               /* on the road: the trip tile look, with the bull bar */
.ro-hero.trip-tile .tt-h,.rh-h{font-size:26px;line-height:1.15}
.rh-top{display:flex;align-items:center;justify-content:space-between;gap:6px 10px;flex-wrap:wrap}
.rh-when{font-weight:600;font-size:15px;color:var(--sub)}
.rh-h{margin:10px 0 6px}
.rh-who{display:flex;align-items:center;gap:8px;color:var(--sub);font-size:15px;margin:0}
.rh-who .pav{flex:none;width:30px;height:30px;font-size:13px;background-color:var(--tint);color:var(--ot)}
/* pickup to drop-off: two stops joined by a dotted line (the same dotted line as the How Plona works picture) */
.rh-tl{list-style:none;margin:16px 0 0;padding:0}
.rh-tl li{position:relative;padding:0 0 14px 30px}
.rh-tl li.end{padding-bottom:0}
.rh-tl li:not(.end)::before{content:"";position:absolute;left:9px;top:20px;bottom:2px;border-left:2px dotted var(--sub)}
.rh-pt{position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--card);border:3px solid var(--ob)}
.rh-tl li.end .rh-pt{background:var(--ink);border-color:var(--ink)}
.rh-k{display:block;font:700 12px/1.3 'Instrument Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--sub)}
.rh-tl b{display:block;font-size:17px;margin-top:2px}
.rh-tl li>span:last-child{display:block;color:var(--sub);font-size:15px;line-height:1.4}
.rh-drop{font-size:15px;margin-top:6px;color:var(--sub)}
.rh-drop b{color:var(--ink)}
.ro-hero .ro-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ro-hero .ro-acts .btn{flex:1 1 140px;padding:0 12px}
/* Get ready: three checks with their deadline */
.rh-ready{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.rh-ready h4{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:0 0 10px;font:600 18px/1.2 'Clash Grotesk','Instrument Sans',sans-serif}
.rh-by{font:500 14px/1.2 'Instrument Sans',sans-serif;color:var(--sub)}
.rh-cl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rh-cl li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.4;color:var(--sub)}
.rh-cl b{color:var(--ink);margin-right:4px}
.rh-cl a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--tint-line);text-decoration-thickness:2px;text-underline-offset:3px}
.rh-tick{flex:none;display:flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:0;border-radius:50%;border:2px solid var(--field);font:700 13px/1 'Instrument Sans',sans-serif}
.rh-cl li.ok .rh-tick{background:var(--good-d);border-color:var(--good-d);color:#fff}

/* ---------- Vehicles tab (owner mode) ---------- */
.ve{max-width:760px}
.ve-sub{margin:-4px 0 14px}
.ve-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:10px}
.ve-card{display:flex;align-items:center;gap:14px;min-height:84px;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);color:var(--ink);text-decoration:none}
.ve-card:hover{border-color:var(--tint-line)}
.ve-card:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.ve-ic{flex:none;width:52px;height:52px;border-radius:14px;background:var(--tint);color:var(--ot);display:flex;align-items:center;justify-content:center}
.ve-ic svg{width:28px;height:28px}        /* PlonaChrome.ICON.car, the Vehicles tab icon */
.ve-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ve-n{font:600 19px/1.2 'Clash Grotesk','Instrument Sans',sans-serif}
.ve-s{font-size:14.5px;color:var(--sub)}
.ve-st{display:inline-flex;align-items:center;gap:7px;margin-top:3px;font-size:14.5px;font-weight:600;color:var(--ink)}
.ve-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--field)}
.ve-st.ok .ve-dot{background:var(--good)}
.ve-st.warn .ve-dot{background:var(--warn)}
.ve-st.live .ve-dot{background:var(--orange);box-shadow:0 0 0 3px var(--tint)}
.ve-add{margin-top:4px}
.ve-flag{margin:14px 0 4px;padding:14px 16px;border:2px solid var(--warn);background:var(--warn-bg);border-radius:var(--r-lg)}
.ve-flag p{margin:4px 0 12px;font-size:15.5px}
.ve-flag .ve-st{margin:0}
.ve-sec{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px}
.ve-sec>h2{font-size:19px;margin:0 0 8px}
.ve-sec .ro-list .rtl{background:var(--bg)}
.ve-dl{display:grid;grid-template-columns:1fr;gap:0;margin:0 0 12px}
.ve-dl>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;padding:9px 0;border-bottom:1px solid var(--line)}
.ve-dl>div:last-child{border-bottom:0}
.ve-dl dt{color:var(--sub);font-size:15px}
.ve-dl dd{margin:0;font-weight:600;text-align:right}
.ve-dl dd .small{display:block;font-weight:400}
.ve-papers{list-style:none;margin:6px 0 0;padding:0}
.ve-papers li{display:flex;align-items:center;gap:10px;min-height:48px;border-top:1px solid var(--line)}
.ve-papers li b{flex:1}
.ve-papers a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--ot)}
.ve-note{margin:4px 0 12px;padding:12px 14px;background:var(--bg);border-radius:var(--r-md);font-size:15.5px}
.ve-del{margin-top:18px;text-align:center}
@media(min-width:720px){.ve-dl{grid-template-columns:1fr 1fr;column-gap:28px}.ve-dl>div:nth-last-child(2):nth-child(odd){border-bottom:0}}