/* Plona Market */
.mhead{padding:22px 0 10px}
.mhead p{margin-top:8px;max-width:62ch}
/* round 3A: no bottom Ask Plona bar any more (data-bar="0"), so the page end no longer clears it (v2.css adds --bar-h; same 24px as app.css) */
body{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
/* under the header's sticky tab row: --sh-stick is its visible height (chrome.js sets it; header spec 3.6) */
.stickyzone{position:sticky;top:var(--sh-stick);z-index:25;background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:8px 0}
.toggle{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:4px}
.toggle button{min-height:48px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:700 15px 'Instrument Sans',sans-serif;cursor:pointer;line-height:1.15;padding:4px 6px}
.toggle button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.toggle small{display:block;font-weight:500;font-size:12px;opacity:.85}
.bar2{display:flex;gap:8px;align-items:center;margin-top:8px}
.bar2 .fbtn{flex:none}
.chiprow{display:flex;gap:6px;overflow-x:auto;flex:1;min-width:0;padding:2px;scrollbar-width:none}
.chiprow::-webkit-scrollbar{display:none}
.fchip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:99px;border:1.5px solid var(--ob);background:var(--tint);color:var(--ink);font:600 14px 'Instrument Sans',sans-serif;cursor:pointer;white-space:nowrap}
.fbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:99px;border:2px solid var(--ink);background:var(--card);color:var(--ink);font:700 15px 'Instrument Sans',sans-serif;cursor:pointer}
.fbtn svg{width:18px;height:18px}
.count{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;font-size:14px;color:var(--sub);min-height:32px}
.count b{color:var(--ink)}
.layout{display:block;padding-top:14px}
.res{list-style:none;display:grid;gap:12px}
/* flight-style listing */
.fl{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 14px 12px;display:grid;gap:10px}
.fl.plona{border-top:4px solid var(--orange)}
.fl-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.src{display:inline-flex;align-items:center;gap:6px;min-height:28px;border-radius:99px;padding:2px 11px;font-size:13px;font-weight:700}
.src svg{width:15px;height:15px;flex:none}
.src.plona{background:var(--gbg);color:var(--gd);border:1px solid #9ed8bb}
.src.found{background:transparent;color:var(--ink);border:1.5px dashed var(--sub)}
.price{font:700 22px 'JetBrains Mono',ui-monospace,monospace;font-feature-settings:'tnum'}
.price small{font:500 12px 'Instrument Sans',sans-serif;color:var(--sub);display:block;text-align:right}
.fl-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;color:var(--sub)}
.fl-meta span{display:inline-flex;align-items:center;gap:5px}
.more{display:flex;flex-direction:column;align-items:center;gap:6px;margin:18px 0 6px}
.more .btn{min-width:min(240px,100%)}
/* filters: bottom sheet on phones, sidebar on laptops */
.fpanel{position:fixed;left:0;right:0;bottom:0;z-index:90;max-height:88dvh;overflow:auto;background:var(--card);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(0,0,0,.25)}
.fpanel[hidden]{display:none}
.fpanel h2{font-size:22px}
.fgrid{display:grid;gap:2px}
.fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.back{position:fixed;inset:0;background:rgba(15,15,20,.55);z-index:80}
.back[hidden]{display:none}
.fact{display:flex;gap:10px;margin-top:16px;position:sticky;bottom:0}
.fact .btn{flex:1}
@media(min-width:900px){
 .layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start}
 .fpanel{position:sticky;top:150px;z-index:1;max-height:none;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:none;padding:16px}
 .fpanel[hidden]{display:block}
 .fbtn.only-phone,.back{display:none!important}
 .fact .done{display:none}
 .fpanel .xbtn{display:none}
}
.fhead{display:flex;align-items:center;gap:8px}.fhead h2{flex:1}
.xbtn{min-width:44px;min-height:44px;border:0;background:none;font-size:24px;cursor:pointer;color:var(--ink);border-radius:8px}
/* states */
.state{text-align:center;background:var(--card);border:1px dashed var(--field);border-radius:var(--r-lg);padding:28px 18px}
.state h3{margin-bottom:6px;font-size:20px}.state p{color:var(--sub);max-width:46ch;margin:0 auto 14px}
.state .row{justify-content:center}
.skel{height:150px;border-radius:var(--r-lg);background:linear-gradient(90deg,var(--wait),var(--card),var(--wait));background-size:200% 100%;animation:sh 1.4s linear infinite;border:1px solid var(--line)}
@keyframes sh{to{background-position:-200% 0}}
/* sheet */
.sheet-back{position:fixed;inset:0;background:rgba(15,15,20,.6);z-index:120;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--card);width:100%;max-width:560px;max-height:92dvh;overflow:auto;border-radius:var(--r-lg) var(--r-lg) 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom))}
@media(min-width:700px){.sheet-back{align-items:center}.sheet{border-radius:var(--r-lg)}}
.sheet h2{font-size:24px;margin:8px 0}
.sheet .sum{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;margin:12px 0;font-weight:600}
.sheet .sum small{display:block;font-weight:500;color:var(--sub)}
.sheet .row{margin-top:14px}
.okbox{background:var(--gbg);color:var(--gd);border:1px solid #9ed8bb;border-radius:var(--r-md);padding:12px 14px;font-weight:600;margin-top:12px}
.errbox{background:var(--bad-bg);color:var(--bad);border:1px solid #f3c3be;border-radius:var(--r-md);padding:12px 14px;font-weight:600;margin-top:12px}
.cta{margin:26px 0 8px}

.fpanel,.fgrid,.fgrid2>div{min-width:0}
.fgrid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
input[type=date]{min-width:0}
.fpanel{max-height:none}

/* prices (E1) */
.price{text-align:right}
.price small b{font-weight:700;color:var(--ink)}
.price.rec{font-size:18px;color:var(--ink)}
.price.rec small{max-width:11em;margin-left:auto}
.price small+small{margin-top:1px}
.fl-top .price{margin-left:auto}
/* vehicle filter (E2): five groups plus Manual OK */
.vgrp{border:0;padding:0;margin:0;min-width:0}
.vgrp legend{padding:0}
.vchips{display:flex;flex-wrap:wrap;gap:6px}
.vchip{position:relative;display:inline-flex}
.vchip input{position:absolute;opacity:0;width:1px;height:1px}
.vchip span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:99px;border:1.5px solid var(--field);background:var(--card);color:var(--ink);font:600 15px 'Instrument Sans',sans-serif;cursor:pointer}
.vchip input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.vchip input:checked+span:before{content:'\2713';margin-right:6px}
.vchip input:focus-visible+span{outline:3px solid var(--ink);outline-offset:2px}
.vswitch{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:8px;font-weight:600;cursor:pointer}
.vswitch input{width:22px;height:22px;accent-color:var(--ob);flex:none}
.bgc{display:inline-flex;align-items:center;min-height:24px;padding:1px 9px;border-radius:99px;background:var(--warn-bg);color:var(--warn-d);font-size:13px;font-weight:600}
.price .ab{font:600 14px 'Instrument Sans',sans-serif;color:var(--sub)}
.vgrp legend.f{display:block;font-weight:600;font-size:15px;margin:14px 0 6px}
/* Market v3 (walkthrough 2026-09-29 note 46): entry lines, money lines, local moves */
.mhead .entry{display:grid;gap:10px;margin-top:14px;max-width:760px}
.entry-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px}
.entry-row p{flex:1 1 260px;margin:0;min-width:0}
.entry-btns{display:flex;flex-wrap:wrap;gap:8px}
.entry-btns .btn{min-height:44px;padding:0 16px;font-size:15px}
.entry .gloss{margin:0}
.mhead [data-install-banner]:not(:empty){margin-top:12px;max-width:760px}
@media(max-width:520px){.entry-btns{flex:1 1 100%}.entry-btns .btn{flex:1 1 140px}}
.fl-top .ref{font-size:12px;color:var(--sub);margin-left:auto}
.stack-s{display:grid;gap:8px;margin-top:14px}
/* Chase item 21 (2026-10-01): a short top so a whole route card shows on a phone without scrolling: one line, two buttons side by side */
.mhead{padding:8px 0 6px}
.mhead h1{margin:0}
.mhead p#lede{margin-top:4px}
.mhead .entry{gap:6px;margin-top:10px}
.entry-two{display:flex;gap:8px;max-width:460px}
.entry-two .entry-btns{flex:1 1 0;min-width:0}
.entry-two .entry-btns .btn{flex:1 1 auto;width:100%;min-height:44px;padding:0 10px;font-size:15px;white-space:nowrap}
@media(max-width:359px){.entry-two .entry-btns .btn{white-space:normal;line-height:1.2;padding:4px 8px}}   /* 320: "Show me cars to drive" wraps instead of being cut */
.mhead .gloss{line-height:1.4}
/* phones: Filters and the route count share one line, so the first route card is fully on the first screen */
@media(max-width:899px){#sticky>.wrap{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}#sticky .bar2{margin-top:0;flex:0 1 auto;min-width:0}#sticky .count{margin-top:0;flex:1 1 auto}.layout{padding-top:10px}}

/* Plona Market card, driver money only (apply-design money; the old .money, .gets, .gsplit, .lnk, .fl-route, .pt and .fl-act rules are gone). The route is two stops on one dotted line, the same as the driver's Next trip card. No arrow (founder
   2026-10-09: "The -> arrows is what I don't like in that interface"). The card ends in one row: what you walk away with and its (i) on
   the left, "See the route" on the right. The whole card opens the route page (a stretched link); the (i) sits above it. */
.fl-tl{display:block;margin:2px 0 0;font:inherit;max-width:560px}
.fl-stop{position:relative;display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:0 12px;padding:0 0 14px 28px}
.fl-stop.end{padding-bottom:0}
.fl-stop:not(.end)::after{content:"";position:absolute;left:8px;top:21px;bottom:1px;border-left:2px dotted var(--sub)}
.fl-pt{position:absolute;left:1px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--card);border:3px solid var(--ob)}
.fl-stop.end .fl-pt{background:var(--ink);border-color:var(--ink)}
.fl-stop b{font:600 19px/1.2 'Clash Grotesk','Instrument Sans',sans-serif;min-width:0;overflow-wrap:anywhere}
.fl-stop small{font:500 14px/1.3 'Instrument Sans',sans-serif;color:var(--sub);white-space:nowrap}
.fl-tl.local b{font-size:18px}
.fl-foot{display:flex;align-items:center;justify-content:space-between;gap:10px 12px;border-top:1px solid var(--line);padding-top:12px}
.fl-foot .wa{flex:1 1 auto}
.fl-foot .btn{flex:none;padding:0 18px}
.fl.found .fl-foot{flex-wrap:wrap}
.fl.found .fl-foot .btn{flex:1 1 100%}
/* the whole Plona card opens the route page: the link's ::after covers the card; the (i) (z-index 2 in walk.css) stays tappable */
.fl.plona{position:relative}
.fl-go::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r-lg)}
.fl.plona:hover{border-color:var(--field);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.fl.plona:hover .fl-go{background:var(--ob-h);border-color:var(--ob-h)}
@media(min-width:900px){
  .fl{grid-template-columns:minmax(0,1fr) 272px;grid-template-areas:"top top" "route foot" "meta foot";column-gap:24px;align-items:center}
  .fl-top{grid-area:top}.fl-tl{grid-area:route}.fl-meta{grid-area:meta}
  .fl-foot{grid-area:foot;flex-direction:column;align-items:stretch;border-top:0;padding-top:0;gap:10px}
  .fl-foot .btn,.fl.found .fl-foot .btn{flex:none;width:100%;padding:0 12px}
}

/* Plona Market filter panel on laptops (apply-design money; it replaces the old
   "@media(min-width:900px){.fpanel{max-height:calc(100dvh - 240px);overflow:auto}}" rule).
   Measured on the preview at 1280x800: the panel is 777px of content in a 558px box, and the sticky "Clear all" footer sits on top of
   "Manual OK", its hint and "Sort by", with nothing that says the panel scrolls. Fix: Clear all moves up next to the title (no footer
   on laptops), the panel uses the height down to the window's bottom, the rows sit a little closer, and a soft shadow shows at the
   bottom edge only while more is below. Phones are unchanged (bottom sheet with Clear all and Show results). */
.fclr{display:none}
@media(min-width:900px){
  .fpanel{top:150px;max-height:calc(100dvh - 166px);overflow:auto;padding:14px 16px 16px;overscroll-behavior:contain;
    /* the scroll shadow: the two "local" covers move with the content and hide the two shadows at the very top and bottom */
    background:linear-gradient(var(--card) 30%,transparent) top/100% 28px no-repeat local,
               linear-gradient(transparent,var(--card) 70%) bottom/100% 28px no-repeat local,
               radial-gradient(farthest-side at 50% 0,rgba(0,0,0,.14),transparent) top/100% 10px no-repeat scroll,
               radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.14),transparent) bottom/100% 10px no-repeat scroll,
               var(--card)}
  .fpanel .fact{display:none}
  .fhead{justify-content:space-between}
  .fclr{display:inline-flex;min-height:44px;margin-right:-8px;font-size:15px}
  .fpanel h2{font-size:20px}
  .fgrid input,.fgrid select{min-height:44px}
  .vchip span{min-height:40px;padding:0 12px;font-size:14.5px}
  .vgrp legend.f{margin:12px 0 6px}
  .vswitch{margin-top:6px}
  .fpanel .hint{font-size:13px}
}

/* ---------- 2. the Manual label: ONE style everywhere (route-apply's orange tint; .rp-fact.man on the route page uses the same three tokens).
   Also in app/css/route.css (the app). ---------- */
.mlab{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px 0 7px;border:1px solid var(--tint-line);border-radius:var(--r-md);
  background:var(--tint);color:var(--ot);font:700 13.5px/1 'Instrument Sans',sans-serif;white-space:nowrap;vertical-align:middle}
.mlab svg{width:16px;height:16px;flex:none}
.fl .fl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
/* 0210 (maps): List or Map next to Filters, and the Map view (every route on screen; the picked route's card floats at the bottom) */
.mseg{display:inline-flex;padding:3px;border-radius:99px;background:var(--wait,#efe9e2);gap:2px;margin-left:auto;flex:none}
.bar2:has(.mseg:not([hidden])){flex-wrap:wrap}.bar2:has(.mseg:not([hidden])) .chiprow{order:3;flex:1 1 100%}
.mseg button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:0;border-radius:99px;background:none;font:600 15px 'Instrument Sans',sans-serif;color:var(--sub,#575757);cursor:pointer}
.mseg button svg{width:18px;height:18px}
.mseg button[aria-pressed=true]{background:var(--card,#fff);color:var(--ink,#141414);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.mkt-mapw{position:relative;margin:0 -16px}
/* phones: the header (52) and the List and Map bar (about 171 with a filter chip) stay on top, so the whole map, its card and Google's strip fit under them */
.mkt-map .pm-market .pm-map{height:calc(100dvh - 242px);min-height:420px}
/* phones: the card sits 36px above the map's bottom edge, so Google's logo (bottom left) and "Map data | Terms" (bottom right) are never covered */
.mkt-card{position:absolute;left:12px;right:12px;bottom:36px;z-index:5;margin:0;padding:0;list-style:none}
.mkt-card .fl{box-shadow:0 6px 22px rgba(20,16,12,.18);border-top:4px solid var(--orange,#F26A21)}
/* go-live 3.5 (Legal, Oct 12): Legal's maps line under the map (outside the box the card floats in); on laptops a Google map keeps its
   bottom corners almost square, so Google's logo and attribution are never cropped */
.mkt-legal .pm-legal{margin:8px 0 0}
@media(min-width:900px){.mkt-map .pm-market .pm-map[data-pm=google]{border-bottom-left-radius:4px;border-bottom-right-radius:4px}}
@media(min-width:900px){.mkt-mapw{margin:0}.mkt-map .pm-market .pm-map{height:calc(100vh - 260px);border-radius:14px;border:1px solid var(--line,#E4DED7)}.mkt-card{left:auto;right:16px;bottom:24px;width:380px}}
/* the floating card is narrow on laptops too: one column, like the phone card */
.mkt-card .fl{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"top" "route" "meta" "foot"!important}
@media(min-width:900px){.mkt-card .fl-foot{flex-direction:row;align-items:center;justify-content:space-between}.mkt-card .fl-foot .btn{width:auto;flex:none;padding:0 18px}}
/* 3.5.6 (migration 0274; Chandon, Oct 17: "each card does not need line, instead the compromise is some discreet place in market with that
   info, then if user interacts with card an explanation as how to follow up and why it exists"): Found elsewhere cards are back.
   The one discreet link under the title (inline in the small line; its tap area reaches 44px tall without making the line taller), the whole
   Found elsewhere card opens its tap sheet (the button's ::after covers the card; the (i) stays on top, z-index 2 in walk.css). Chandon's
   "Badge only" (Oct 17): the card's price has no label; "Plona's estimate" and its second line are in the tap sheet only (.sheet .fl-est). */
.gloss .mk-about{display:inline;position:relative;min-height:0;padding:0 2px;font:inherit;font-weight:600;color:var(--ink);vertical-align:baseline}
.gloss .mk-about::before{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
.gloss .mk-about:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:4px}
.fl.found{position:relative}
.fl-open::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r-lg)}
.fl.found:hover{border-color:var(--field);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.fl.found .fl-open:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.fl-m{flex:1 1 auto;min-width:0}
.fl-est{display:block;margin:0 0 2px;font:600 12.5px/1.2 'Instrument Sans',sans-serif;color:var(--sub);letter-spacing:.01em}
.fl-est2{display:block;margin:2px 0 0;font:400 12.5px/1.35 'Instrument Sans',sans-serif;color:var(--sub)}
.sheet .sum .fl-m{margin-top:6px}
.sheet .sum .fl-nop{margin:6px 0 0;font-weight:500;font-size:14px;color:var(--sub)}   /* 3.5.6 review: a Found elsewhere route not priced yet */
.sheet .sh-why,.sheet .sh-about{line-height:1.5;margin:0 0 10px}
.sheet .sh-about a{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
/* Legal's section 2 title, "Found elsewhere · Found Oct 12": the date lighter than the title; Legal's section 1 points as a list */
.sheet .sh-fd{font-weight:500;font-size:.8em;color:var(--sub);white-space:nowrap}
.sheet .sh-pts{margin:0 0 10px;padding:0 0 0 20px;line-height:1.5}
.sheet .sh-pts li{margin:0 0 6px}