:root {
  --paper:#DDE6C9; --card:#F3F6E4; --field:#FBFCF2; --ink:#16342A; --muted:#4A6853;
  --edge:#16342A; --line:#B9C8A4; --soft:#CBD9B0;
  --avocado:#7C9A2D; --mustard:#EDA81F; --mustard-ink:#2B1E00; --alert:#B63E17;
  --btn-bg:#16342A; --btn-ink:#F3F6E4; --shadow:#16342A;
  --drv:#2F5FD0; --drv-ink:#FFFFFF; --pas:#E4631B; --pas-ink:#2B0F00; --salmon:#F7A08A; --salmon-ink:#3A150C;
  --km-blue:#2F5FD0; --km-orange:#E4631B; --co2-green:#2F9E5A; --co2-red:#D13B30;
  --map-bg:#E6EDD2; --map-road:#FBFCF2; --map-park:#B5CE8A; --map-water:#A9D0DA;
  --km-orange-text:#B94A0E; --km-blue-ink:#FFFFFF; --co2-green-ink:#FFFFFF;
  --km-pos:#2456C7; --km-neg:#C85A00; --co2-bad:#C02F22; --co2-good:#1F8A45;
  --display:"Caprasimo", "Cooper Black", Georgia, serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#0F2219; --card:#173126; --field:#10261C; --ink:#E4EDCF; --muted:#9DB89F;
    --edge:#7FA98A; --line:#2B4A3A; --soft:#1F3D2E;
    --avocado:#A5C24A; --mustard:#F2B134; --mustard-ink:#2B1E00; --alert:#F08A5C;
    --btn-bg:#F2B134; --btn-ink:#2B1E00; --shadow:#04100A;
    --drv:#7AA7FF; --drv-ink:#0A1A3A; --pas:#F5A04A; --pas-ink:#2B1200; --salmon:#F59A83; --salmon-ink:#3A150C;
    --km-blue:#7AA7FF; --km-orange:#F5A04A; --co2-green:#5FD08A; --co2-red:#FF7A6E;
    --map-bg:#1B3428; --map-road:#2F4F3F; --map-park:#2E5A3A; --map-water:#2B5560;
    --km-orange-text:#F5A04A; --km-blue-ink:#0A1A3A; --co2-green-ink:#052614;
    --km-pos:#8DB2FF; --km-neg:#FFA24D; --co2-bad:#FF8F80; --co2-good:#6FD495;
  }
}
:root[data-theme="dark"] {
  --paper:#0F2219; --card:#173126; --field:#10261C; --ink:#E4EDCF; --muted:#9DB89F;
  --edge:#7FA98A; --line:#2B4A3A; --soft:#1F3D2E;
  --avocado:#A5C24A; --mustard:#F2B134; --mustard-ink:#2B1E00; --alert:#F08A5C;
  --btn-bg:#F2B134; --btn-ink:#2B1E00; --shadow:#04100A;
    --drv:#7AA7FF; --drv-ink:#0A1A3A; --pas:#F5A04A; --pas-ink:#2B1200; --salmon:#F59A83; --salmon-ink:#3A150C;
    --km-blue:#7AA7FF; --km-orange:#F5A04A; --co2-green:#5FD08A; --co2-red:#FF7A6E;
    --map-bg:#1B3428; --map-road:#2F4F3F; --map-park:#2E5A3A; --map-water:#2B5560;
    --km-orange-text:#F5A04A; --km-blue-ink:#0A1A3A; --co2-green-ink:#052614;
    --km-pos:#8DB2FF; --km-neg:#FFA24D; --co2-bad:#FF8F80; --co2-good:#6FD495;
}
html { scroll-padding-top:env(safe-area-inset-top,0px); }
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; background-color:var(--paper); background-image:radial-gradient(var(--line) 1.2px, transparent 1.6px); background-size:14px 14px; color:var(--ink); font:400 16px/1.5 var(--body); }
.app { max-width:460px; margin:0 auto; padding:18px 16px 104px; }
h1 { font:400 32px/1.05 var(--display); margin:18px 0 6px; }
h2 { font:400 20px/1.15 var(--display); margin:0; }
h3 { font:400 17px/1.2 var(--display); margin:20px 0 8px; }
p { margin:0; }
.muted { color:var(--muted); font-size:14px; }
.top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.logo { font:400 28px/1 var(--display); }
.group { font-size:13px; color:var(--muted); font-weight:500; }
.stripes { height:16px; border-radius:99px; margin-top:10px; background:linear-gradient(var(--edge) 0 33.4%, var(--avocado) 33.4% 66.7%, var(--mustard) 66.7%); }

.card { background:var(--card); border:2px solid var(--edge); border-radius:20px; padding:16px; margin-top:18px; box-shadow:4px 4px 0 var(--shadow); }
.row { display:flex; align-items:center; gap:10px; }
.row.between { justify-content:space-between; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.chips.tight { margin-top:6px; }
button { font:inherit; color:inherit; cursor:pointer; }
.chip { border:2px solid var(--edge); background:var(--field); border-radius:999px; padding:6px 14px; min-height:42px; font-weight:500; }
.chip[aria-pressed="true"] { background:var(--mustard); color:var(--mustard-ink); font-weight:700; box-shadow:2px 2px 0 var(--shadow); }
.btn { background:var(--btn-bg); color:var(--btn-ink); border:2px solid var(--edge); border-radius:999px; padding:10px 18px; min-height:46px; font-weight:700; box-shadow:3px 3px 0 var(--shadow); }
.btn:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--shadow); }
.btn.ghost { background:var(--field); color:var(--ink); }
.btn.small { min-height:40px; padding:6px 14px; font-size:14px; }
.btn.wide { width:100%; }
:focus-visible { outline:3px solid var(--mustard); outline-offset:2px; }
.field { width:100%; margin-top:8px; font:500 16px var(--body); color:var(--ink); background:var(--field); border:2px solid var(--edge); border-radius:12px; padding:9px 12px; min-height:46px; }
label, .lbl { display:block; font-size:13px; font-weight:600; color:var(--muted); margin-top:14px; }

.day.off { opacity:.62; }
.day-head { display:flex; align-items:center; justify-content:space-between; }
.switch { position:relative; width:52px; height:30px; flex:none; }
.switch input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1; }
.switch i { position:absolute; inset:0; border-radius:999px; background:var(--soft); border:2px solid var(--edge); transition:background .15s; }
.switch i::after { content:""; position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:var(--card); border:2px solid var(--edge); transition:transform .15s; }
.switch input:checked + i { background:var(--avocado); }
.switch input:checked + i::after { transform:translateX(22px); }
.switch input:focus-visible + i { outline:3px solid var(--mustard); outline-offset:2px; }
.times { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.times label { margin-top:12px; }
.seg { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:14px; }
.seg button { border:2px solid var(--edge); background:var(--field); border-radius:12px; padding:8px 4px; min-height:44px; font-size:14px; font-weight:500; }
.seg button[aria-pressed="true"] { background:var(--mustard); color:var(--mustard-ink); font-weight:700; box-shadow:2px 2px 0 var(--shadow); }
.seats { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; font-size:15px; font-weight:500; }
.stepper { display:flex; align-items:center; gap:10px; }
.stepper button { width:44px; height:44px; border-radius:50%; border:2px solid var(--edge); background:var(--field); font-size:20px; line-height:1; }
.stepper b { min-width:20px; text-align:center; font-size:18px; }
.ride-pill { margin-top:12px; background:var(--soft); border:2px dashed var(--edge); border-radius:12px; padding:8px 12px; font-size:14px; }

.route { position:relative; height:22px; margin:14px 6px 28px; }
.route::before { content:""; position:absolute; left:0; right:0; top:9px; border-top:4px dashed var(--mustard); }
.stop { position:absolute; top:2px; width:18px; height:18px; border-radius:50%; background:var(--card); border:3px solid var(--edge); }
.stop.dest { border-radius:5px; right:0; background:var(--mustard); }
.stop.me { left:0; background:var(--edge); }
.stop.nb { background:var(--avocado); }
.stop span { position:absolute; top:24px; left:50%; transform:translateX(-50%); font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap; }
.stop.me span { left:0; transform:none; }
.stop.dest span { left:auto; right:0; transform:none; }
.days { display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:8px; margin:6px 0 14px; }
.dchip { background:var(--field); border:2px solid var(--edge); border-radius:12px; padding:7px 9px; font-size:13px; line-height:1.3; }
.dchip b { display:block; font-size:14px; }
.dchip.warn { border-color:var(--alert); border-style:dashed; }
.ok { font-weight:700; }
.empty { text-align:center; padding:28px 12px; color:var(--muted); }
.actions { display:grid; gap:10px; }
.rdv { background:var(--mustard); color:var(--mustard-ink); border:2px solid var(--edge); border-radius:14px; padding:10px 12px; margin-bottom:12px; font-size:15px; position:relative; }
.rdv span { font-size:13px; font-weight:600; }

.dbar { position:relative; height:14px; background:var(--soft); border:2px solid var(--edge); border-radius:99px; margin-top:6px; overflow:hidden; }
.dbar::after { content:""; position:absolute; left:50%; top:0; bottom:0; border-left:2px solid var(--edge); }
.dbar i { position:absolute; top:0; height:100%; }
.dbar i.pos { left:50%; background:var(--avocado); }
.dbar i.neg { right:50%; background:var(--alert); }
.invite { display:flex; gap:8px; margin-top:10px; }
.invite input { flex:1; min-width:0; margin-top:0; }

nav { position:fixed; left:0; right:0; bottom:0; background:var(--card); border-top:2px solid var(--edge); padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px)); }
nav div { max-width:460px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
nav button { border:2px solid transparent; background:transparent; border-radius:999px; padding:8px 4px; min-height:46px; font-weight:600; color:var(--muted); }
nav button[aria-current="page"] { background:var(--mustard); color:var(--mustard-ink); border-color:var(--edge); font-weight:700; box-shadow:2px 2px 0 var(--shadow); }
.badge { display:inline-block; min-width:20px; padding:0 6px; margin-left:6px; border-radius:99px; background:var(--btn-bg); color:var(--btn-ink); font-size:12px; font-weight:700; }
nav button[aria-current="page"] .badge { background:var(--edge); color:var(--card); }
.toast { position:fixed; left:16px; right:16px; bottom:calc(90px + env(safe-area-inset-bottom,0px)); max-width:428px; margin:0 auto; background:var(--ink); color:var(--card); border:2px solid var(--edge); border-radius:14px; padding:12px 14px; font-size:14px; font-weight:500; box-shadow:3px 3px 0 var(--shadow); }
.toast[hidden] { display:none; }

dialog.sheet { border:2px solid var(--edge); border-bottom:0; border-radius:24px 24px 0 0; background:var(--card); color:var(--ink); padding:0; width:100%; max-width:460px; margin:auto auto 0; max-height:90vh; max-height:90dvh; overflow:auto; box-shadow:0 -4px 0 var(--shadow); }
dialog.sheet::backdrop { background:rgba(8,28,18,.6); }
.sheet-head { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; background:var(--card); border-bottom:2px solid var(--edge); }
.sheet-body { padding:4px 16px calc(20px + env(safe-area-inset-bottom,0px)); }
.error { color:var(--alert); font-weight:600; font-size:14px; margin:10px 0 0; }
.thread { max-height:260px; overflow:auto; padding:2px; }
.bubble { max-width:82%; width:fit-content; padding:8px 12px; border:2px solid var(--edge); border-radius:16px; margin:8px 0; font-size:15px; background:var(--field); border-bottom-left-radius:4px; }
.bubble.me { margin-left:auto; background:var(--mustard); color:var(--mustard-ink); border-bottom-left-radius:16px; border-bottom-right-radius:4px; }
.compose { display:flex; gap:8px; margin-top:10px; }
.compose .field { margin-top:0; min-width:0; }

a.btn { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.seg.two { grid-template-columns:1fr 1fr; }
.tag { display:inline-block; border:2px solid var(--edge); border-radius:99px; padding:1px 10px; font-size:12px; font-weight:700; background:var(--mustard); color:var(--mustard-ink); }
.tag.need { background:var(--field); color:var(--ink); }
.person { border:2px solid var(--edge); border-radius:14px; padding:10px 12px; margin-top:10px; background:var(--field); }
.person p { font-size:15px; }
.reason { font-size:13px; color:var(--alert); font-weight:600; margin-top:4px; }
.person .row { margin-top:8px; }
.sum { display:flex; justify-content:space-between; gap:10px; padding:4px 0; }
.sum.total { border-top:2px solid var(--edge); margin-top:6px; padding-top:8px; font-weight:700; }
.btn[disabled], .seg button[disabled] { opacity:.45; cursor:not-allowed; box-shadow:none; }
.center { text-align:center; }
.hero { margin-top:26px; }
nav button { font-size:12.5px; padding:8px 2px; }
nav div { grid-template-columns:repeat(5,1fr); gap:2px; }
.badge { margin-left:3px; padding:0 5px; min-width:18px; }
button.dchip { text-align:left; width:100%; cursor:pointer; font:inherit; font-size:13px; color:inherit; }
.dchip[aria-pressed="true"] { background:var(--mustard); color:var(--mustard-ink); box-shadow:2px 2px 0 var(--shadow); }
.dchip.conf { border-color:var(--avocado); border-width:3px; padding:6px 8px; }
.dchip small { display:block; font-size:12px; font-weight:600; }
.check { display:flex; align-items:center; gap:10px; margin-top:14px; font-size:15px; font-weight:500; color:var(--ink); }
.check input { width:22px; height:22px; margin:0; flex:none; accent-color:var(--avocado); }
.row.two { gap:8px; }
.row.two > * { flex:1; }
nav button { white-space:normal; line-height:1.15; display:flex; align-items:center; justify-content:center; text-align:center; }
.plist .item { display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:2px dashed var(--line); font-size:15px; }
.plist .item span { text-align:right; }
select.field { appearance:auto; }
.btn.add { background:var(--salmon); color:var(--salmon-ink); }
.who { display:inline-block; border:2px solid var(--edge); border-radius:99px; padding:0 9px; font-size:12px; font-weight:700; line-height:1.5; }
.who.drv, .tag.drv { background:var(--drv); color:var(--drv-ink); }
.who.pas, .tag.pas { background:var(--pas); color:var(--pas-ink); }
.dchip .who { margin:3px 0; }
.seg button.r-drive { border-color:var(--drv); }
.seg button.r-ride { border-color:var(--pas); }
.seg button.r-drive[aria-pressed="true"] { background:var(--drv); color:var(--drv-ink); border-color:var(--edge); }
.seg button.r-ride[aria-pressed="true"] { background:var(--pas); color:var(--pas-ink); border-color:var(--edge); }
.arrow { width:44px; height:44px; flex:none; border-radius:50%; border:2px solid var(--edge); background:var(--field); display:inline-flex; align-items:center; justify-content:center; padding:0; }
.arrow svg { transition:transform .15s; }
.arrow.open svg { transform:rotate(180deg); }
.est { margin-top:6px; }
.est a { color:var(--ink); font-weight:600; }
.times { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.times > label { min-width:0; }
.field { min-width:0; max-width:100%; }
input[type="time"].field, input[type="date"].field { -webkit-appearance:none; appearance:none; display:block; text-align:left; }
.mapbtn { display:inline-flex; align-items:center; gap:6px; margin-top:8px; border:2px solid var(--edge); background:var(--field); border-radius:999px; padding:6px 12px; min-height:40px; font-size:14px; font-weight:600; }
.mapbtn svg { transition:transform .15s; }
.mapbtn[aria-expanded="true"] svg { transform:rotate(180deg); }
.mapbox { margin-top:8px; border:2px solid var(--edge); border-radius:14px; overflow:hidden; background:var(--field); }
.mapbox iframe { display:block; width:100%; height:200px; border:0; }
.card.nb-drv, .card.nb-pas, .card.nb-both { border-width:3px; }
.card.nb-drv { border-color:var(--drv); margin-right:22px; }
.card.nb-pas { border-color:var(--pas); margin-left:22px; }
.card.nb-both { border-color:transparent; margin-left:11px; margin-right:11px; background:linear-gradient(var(--card),var(--card)) padding-box, linear-gradient(90deg,var(--drv),var(--pas)) border-box; }
.btn.off { display:inline-flex; align-items:center; justify-content:center; opacity:.6; box-shadow:none; cursor:default; }
.tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px; }
.tile { border:2px solid var(--edge); border-radius:14px; padding:10px 4px; text-align:center; background:var(--field); }
.tile b { display:block; font:400 clamp(16px,5vw,21px)/1.15 var(--display); white-space:nowrap; }
.tile span { display:block; margin-top:4px; font-size:12px; font-weight:600; color:var(--muted); line-height:1.25; }
.feed { margin-top:6px; }
.feed-item { display:flex; justify-content:space-between; align-items:baseline; gap:10px; width:100%; text-align:left; background:none; border:0; border-bottom:2px dashed var(--line); padding:8px 0; font-size:13.5px; line-height:1.35; }
.feed-item:last-child { border-bottom:0; }
.feed-item small { flex:none; color:var(--muted); font-size:12px; font-weight:600; }
.rank { width:32px; height:32px; flex:none; border-radius:50%; border:2px solid var(--edge); display:inline-grid; place-items:center; font:400 17px/1 var(--display); background:var(--soft); }
.rank.r1 { background:var(--mustard); color:var(--mustard-ink); }
.rank.r3 { background:var(--avocado); color:#fff; }
nav div { grid-template-columns:repeat(6,minmax(0,1fr)); gap:2px; }
nav button { font-size:11.5px; padding:8px 1px; min-height:48px; }
.badge { min-width:16px; padding:0 4px; margin-left:0; font-size:11px; line-height:1.4; }
nav button { position:relative; }
nav button .badge { position:absolute; top:2px; right:1px; }
@media (max-width:360px) { nav { padding-left:4px; padding-right:4px; } nav button { font-size:10px; } }
@media (max-width:340px) { nav button { font-size:9px; letter-spacing:-0.2px; } }
.km.pos { color:var(--km-pos); font-weight:700; }
.km.neg { color:var(--km-neg); font-weight:700; }
.co2.bad { color:var(--co2-bad); font-weight:700; }
.co2.good { color:var(--co2-good); font-weight:700; }
.pcred { margin-bottom:20px; }
.metric { margin-top:8px; }
.metric .row { align-items:baseline; flex-wrap:wrap; gap:2px 10px; font-size:14px; }
.dbar i.kpos { left:50%; background:var(--km-pos); }
.dbar i.kneg { right:50%; background:var(--km-neg); }
.sbar { height:14px; background:var(--soft); border:2px solid var(--edge); border-radius:99px; overflow:hidden; margin-top:6px; }
.sbar i { display:block; height:100%; }
.sbar i.good { background:var(--co2-good); }
.sbar i.bad { background:var(--co2-bad); }
.linkbtn { display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:6px 0; min-height:36px; font-size:13px; font-weight:600; color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.mapfake { padding:12px 14px 14px; }
.mapfake .route { margin:10px 6px 34px; }
.sbar { display:flex; height:14px; background:var(--soft); border:2px solid var(--edge); border-radius:99px; margin-top:8px; overflow:hidden; }
.sbar i { display:block; height:100%; }
.s-blue { background:var(--km-blue); } .s-orange { background:var(--km-orange); }
.s-red { background:var(--co2-red); } .s-green { background:var(--co2-green); }
.dot { display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:6px; border:1.5px solid var(--edge); vertical-align:-1px; }
.mline { font-size:14px; margin-top:6px; display:flex; flex-wrap:wrap; gap:2px 16px; }
.pers { margin-bottom:22px; }
.good { margin-top:6px; font-size:13.5px; font-weight:600; color:var(--co2-green); }
.cal { margin-top:10px; }
.cal summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:6px 0; font-size:12.5px; font-weight:600; color:var(--muted); }
.cal summary::-webkit-details-marker { display:none; }
.cal[open] summary { color:var(--ink); }
.cal-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:4px 0; border-top:2px dashed var(--line); font-size:13.5px; }
.cal-row a { display:inline-block; margin-left:6px; padding:8px 10px; font-weight:700; color:var(--ink); }
.ride-pill .cal { margin-top:2px; }
.schema { padding:6px 12px 14px; }
.schema .route { margin-top:24px; }
.schema .stop.dest span { max-width:60vw; overflow:hidden; text-overflow:ellipsis; }
.gtrack { position:relative; height:16px; background:var(--soft); border:2px solid var(--edge); border-radius:99px; overflow:hidden; margin-top:8px; }
.gtrack::after { content:""; position:absolute; left:50%; top:0; bottom:0; border-left:2px solid var(--edge); }
.gfill { position:absolute; top:0; bottom:0; }
.gfill.pos { left:50%; } .gfill.neg { right:50%; }
.glegend { display:grid; grid-template-columns:1fr auto 1fr; gap:6px; margin-top:6px; font-size:12.5px; font-weight:600; color:var(--muted); }
.glegend > span:first-child { text-align:left; } .glegend > span:last-child { text-align:right; }
.gmid { color:var(--ink); }
.gsum { display:flex; align-items:center; margin-top:14px; font-size:15px; }
.rbox { margin-top:10px; border-top:2px dashed var(--line); }
.rbox summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:10px 0; font-size:13.5px; font-weight:600; color:var(--muted); }
.rbox summary::-webkit-details-marker { display:none; }
.rbox summary::after { content:""; width:9px; height:9px; border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor; transform:rotate(45deg); margin:-4px 6px 0 0; transition:transform .15s; }
.rbox[open] summary { color:var(--ink); }
.rbox[open] summary::after { transform:rotate(-135deg); margin:4px 6px 0 0; }
.rbox .mline { margin-top:4px; }
.tag.free { background:var(--avocado); color:#fff; }
textarea.field { min-height:88px; resize:vertical; line-height:1.4; }
nav { padding-left:12px; padding-right:12px; }
nav div { display:flex; grid-template-columns:none; overflow-x:auto; gap:6px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
nav div::-webkit-scrollbar { display:none; }
nav button { flex:0 0 auto; min-width:86px; padding:8px 14px; font-size:13px; letter-spacing:0; white-space:nowrap; }
@media (max-width:360px) { nav { padding-left:12px; padding-right:12px; } nav button { font-size:13px; } }
@media (max-width:340px) { nav button { font-size:13px; letter-spacing:0; } }
.gtrack { height:28px; }
.gval { position:absolute; top:0; bottom:0; display:flex; align-items:center; z-index:1; font-size:13px; font-weight:700; color:var(--ink); }
.gval.l { left:0; right:50%; justify-content:flex-end; padding-right:8px; }
.gval.r { left:50%; right:0; justify-content:flex-start; padding-left:8px; }
.gval.c { left:0; right:0; justify-content:center; }
.contact { display:flex; align-items:center; gap:8px; margin-top:10px; }
.contact .grow { flex:1; }
.icon { width:44px; height:44px; flex:none; border-radius:50%; border:2px solid var(--edge); background:var(--field); display:inline-flex; align-items:center; justify-content:center; padding:0; color:var(--ink); text-decoration:none; }
.icon.off { opacity:.4; }
.mm { border:2px solid var(--edge); border-radius:14px; overflow:hidden; margin-top:10px; background:var(--map-bg); }
.mm svg { display:block; width:100%; height:auto; }
.mm-bg { fill:var(--map-bg); }
.mm-water { fill:none; stroke:var(--map-water); stroke-width:14; stroke-linecap:round; }
.mm-park { fill:var(--map-park); }
.mm .roads line { stroke:var(--map-road); stroke-width:7; }
.mm-route { fill:none; stroke:var(--edge); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.mm-detour { fill:none; stroke:var(--km-orange); stroke-width:4; stroke-dasharray:1 7; stroke-linecap:round; stroke-linejoin:round; }
.mm-walk { fill:none; stroke:var(--pas); stroke-width:4; stroke-dasharray:1 7; stroke-linecap:round; stroke-linejoin:round; }
.mm-drv { fill:var(--drv); stroke:var(--card); stroke-width:2.5; }
.mm-pas { fill:var(--avocado); stroke:var(--card); stroke-width:2.5; }
.mm-me { fill:var(--edge); stroke:var(--card); stroke-width:2.5; }
.mm-dest { fill:var(--mustard); stroke:var(--edge); stroke-width:2.5; }
.mm text { font:600 11px var(--body); fill:var(--ink); paint-order:stroke; stroke:var(--map-bg); stroke-width:3.5px; stroke-linejoin:round; }
.mm text.det { fill:var(--km-orange); font-weight:700; }
.mmlegend { display:flex; flex-wrap:wrap; gap:2px 14px; margin-top:8px; font-size:12.5px; font-weight:600; color:var(--muted); }
.mmlegend .dot { width:10px; height:10px; margin-right:5px; }
.rbox .mline { display:block; }
.glegend { font-size:12px; gap:4px; }
.glegend > span { white-space:nowrap; }
.glegend .dot { width:10px; height:10px; margin-right:5px; }
.top { align-items:center; }
.kmv { font-weight:700; white-space:nowrap; }
.kmv.p { color:var(--km-blue); } .kmv.n { color:var(--km-orange-text); }
.kmv.cg { color:var(--co2-green); } .kmv.cr { color:var(--co2-red); }
.dchip[aria-pressed="true"] .kmv { color:inherit; }
button.tile { font:inherit; color:inherit; cursor:pointer; width:100%; }
button.tile:active { transform:translate(1px,1px); }
.tile.c-blue { background:var(--km-blue); color:var(--km-blue-ink); }
.tile.c-gold { background:var(--mustard); color:var(--mustard-ink); }
.tile.c-green { background:var(--co2-green); color:var(--co2-green-ink); }
.tile.c-blue span, .tile.c-gold span, .tile.c-green span { color:inherit; opacity:.92; }
.badge.msg { background:var(--alert); color:#fff; }
.badge.inl { position:static; margin-left:8px; flex:none; }
.icon { position:relative; }
.icon .badge, #inboxBtn .badge { position:absolute; top:-6px; right:-6px; margin:0; }
.thread-row { display:flex; justify-content:space-between; gap:12px; width:100%; text-align:left; background:none; border:0; border-bottom:2px dashed var(--line); padding:12px 0; font-size:15px; }
.thread-row .col { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none; }
.thread-row.unread { font-weight:600; }
.card.flash { animation:flash 1.1s ease-in-out 2; }
@keyframes flash { 0%,100% { box-shadow:4px 4px 0 var(--shadow); } 50% { box-shadow:0 0 0 6px var(--mustard); } }
.maplink { display:inline-flex; align-items:center; gap:6px; padding:6px 0; font-size:12.5px; font-weight:600; color:var(--muted); text-decoration:none; }
.maplink:hover { color:var(--ink); }
.gproj { position:absolute; top:0; bottom:0; background-image:repeating-linear-gradient(135deg, var(--c) 0 5px, transparent 5px 10px); }
.h-blue { --c:var(--km-blue); } .h-orange { --c:var(--km-orange); } .h-green { --c:var(--co2-green); } .h-red { --c:var(--co2-red); }
.legend2 { display:flex; align-items:center; gap:8px; margin-top:6px; font-size:12.5px; font-weight:600; color:var(--muted); }
.hatchsw { display:inline-block; width:24px; height:10px; flex:none; border:1.5px solid var(--edge); border-radius:3px; background-image:repeating-linear-gradient(135deg, var(--c) 0 4px, transparent 4px 8px); }
.dot.hatch { background-image:repeating-linear-gradient(135deg, var(--ink) 0 2px, transparent 2px 4px); }
.chart svg { display:block; width:100%; height:auto; margin-top:14px; }
.ch-grid { stroke:var(--line); stroke-width:1.5; }
.ch-ax { font:600 10.5px var(--body); fill:var(--muted); }
.ch-pt { fill:var(--card); stroke-width:2.5; }
.ch-hollow { fill:var(--card); stroke-width:3; }
.foot { display:flex; align-items:center; justify-content:center; gap:8px; margin:26px 0 4px; font-size:13px; font-weight:600; color:var(--muted); }
.gval em { font-style:normal; background:var(--card); border-radius:99px; padding:1px 8px; }
.logo { display:inline-flex; align-items:center; gap:8px; }
.logo .hs { color:var(--ink); flex:none; }
nav .navwrap { max-width:460px; margin:0 auto; display:flex; align-items:center; gap:6px; overflow:visible; }
nav #tabs { flex:1; min-width:0; margin:0; max-width:none; position:relative; }
.navarrow { flex:none; width:34px; height:46px; border:2px solid var(--edge); border-radius:12px; background:var(--field); color:var(--ink); display:grid; place-items:center; padding:0; }
.navarrow[hidden] { display:none; }
.navarrow:disabled { opacity:.3; cursor:default; }
.tile .ti { display:flex; justify-content:center; align-items:center; margin:0 auto 4px; height:30px; color:var(--muted); }
.tile.c-blue .ti, .tile.c-gold .ti, .tile.c-green .ti { color:inherit; }
.rbox summary b { font-weight:800; color:var(--ink); }
nav, nav { padding-left:6px; padding-right:6px; }
@media (max-width:360px) { nav { padding-left:6px; padding-right:6px; } }
nav .navwrap { gap:4px; }
.navarrow { width:30px; }
nav button { min-width:0; padding:8px 10px; }
.legbox { margin-top:12px; border-top:2px dashed var(--line); }
.leghead, .rbox summary.leghead { display:flex; align-items:center; justify-content:space-between; padding:10px 0; font-size:15px; font-weight:600; color:var(--ink); }
.leghead b, .rbox summary.leghead b { font-weight:800; }
.pmwrap { display:flex; align-items:center; gap:6px; margin-top:8px; }
.pmwrap .field { margin-top:0; flex:1; min-width:0; }
.pm { font-size:20px; font-weight:700; color:var(--ink); }
.plist .item > span:first-child { text-align:left; }
.tag { white-space:nowrap; flex:none; }
.row.between > h2 { min-width:0; }
.days { grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); }
.dchip { padding:6px 7px; }
.dchip b { white-space:nowrap; font-size:13.5px; }
.dchip .who { font-size:11px; padding:0 6px; }
.group { display:none; }
.av { display:inline-grid; place-items:center; width:var(--s); height:var(--s); border-radius:50%; border:2px solid var(--edge); color:#fff; font:700 calc(var(--s) * .46)/1 var(--body); flex:none; vertical-align:middle; margin-right:6px; }
.av-btn { font:700 14px var(--body); letter-spacing:.5px; }
.tags { display:inline-flex; gap:6px; align-items:center; flex:none; }
.tag.lm { background:var(--alert); color:#fff; }
.news { margin-top:14px; border:2px solid var(--edge); border-radius:14px; background:var(--field); padding:4px 12px; }
.news p { display:flex; align-items:center; gap:8px; margin:0; padding:7px 0; font-size:13.5px; line-height:1.35; }
.news p + p { border-top:2px dashed var(--line); }
.news small { margin-left:auto; flex:none; color:var(--muted); font-weight:600; font-size:12px; }
.nd { width:11px; height:11px; border-radius:50%; flex:none; border:1.5px solid var(--edge); }
.nd.g { background:var(--co2-green); } .nd.b { background:var(--km-blue); } .nd.o { background:var(--km-orange); }
.foot2 { text-align:center; font-size:12px; color:var(--muted); margin:2px 10px 0; line-height:1.4; }
.remind { display:flex; align-items:center; gap:6px; margin-top:8px; font-size:12.5px; font-weight:600; color:var(--muted); }
.repwrap { margin-top:8px; text-align:right; }
.report { display:inline-flex; align-items:center; gap:5px; background:none; border:0; padding:6px 0; font-size:12px; font-weight:600; color:var(--muted); }
.meter { display:flex; gap:6px; margin-top:12px; }
.slot { flex:1; height:12px; border-radius:99px; border:2px solid var(--edge); background:var(--soft); display:block; }
.slot.on { background:var(--avocado); }
.god { border:2px solid var(--edge); border-radius:14px; padding:10px 12px; margin-top:10px; background:var(--field); }
.thread-row .av, .feed-item .av { margin-right:6px; }
[hidden] { display:none !important; }
.row.two { align-items:stretch; }
.row.two > .btn { display:inline-flex; align-items:center; justify-content:center; text-align:center; }
nav button[aria-current="page"] .badge.msg { background:var(--alert); color:#fff; }
.nameline { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rides { display:inline-block; margin-left:6px; padding:1px 8px; border-radius:99px; background:var(--soft); color:var(--muted); font-size:11.5px; font-weight:700; white-space:nowrap; vertical-align:middle; }
.nameline .rides { margin-left:0; }
.sheet-head h2 { margin-right:2px; }
.donutrow { display:flex; align-items:center; gap:14px; margin-top:12px; }
.donut { width:128px; height:128px; flex:none; }
.dn-bg, .dn-a, .dn-b { fill:none; stroke-width:16; }
.dn-bg { stroke:var(--soft); } .dn-a { stroke:var(--drv); } .dn-b { stroke:var(--pas); }
.dn-n { font:400 28px var(--display); fill:var(--ink); } .dn-l { font:600 10.5px var(--body); fill:var(--muted); }
.dlegend { display:flex; flex-direction:column; gap:12px; font-size:14px; line-height:1.35; }
.dlegend p { margin:0; }
.recap .tiles { margin-top:16px; }
.cnts { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.cnt { border:2px solid var(--edge); border-radius:14px; padding:10px 8px; text-align:center; background:var(--field); }
.cnt i { display:flex; justify-content:center; color:var(--muted); }
.cnt b { display:block; font:400 24px/1.2 var(--display); }
.cnt span { display:block; font-size:12.5px; font-weight:700; }
.cnt small { display:block; margin-top:2px; font-size:11.5px; color:var(--muted); font-weight:600; }
.bars { display:block; width:100%; height:auto; margin-top:6px; }
.bar { fill:var(--km-blue); }
.bar.cur { stroke:var(--edge); stroke-width:2; }
.bar.hb { stroke:var(--km-blue); stroke-width:1.5; }
.meter .extra { flex:none; align-self:center; font-size:12px; font-weight:800; color:var(--alert); }
.bar.hb { fill:url(#hat); }
.dlegend b { white-space:nowrap; }
.contact .btn { font-size:13px; padding:6px 10px; white-space:nowrap; }
.av { position:relative; }
.av.has { margin-right:14px; }
.avn { position:absolute; right:-9px; bottom:-6px; min-width:19px; height:19px; padding:0 4px; border-radius:99px; background:var(--card); color:var(--ink); border:2px solid var(--edge); font:800 10.5px/15px var(--body); text-align:center; letter-spacing:0; }
.namebtn { background:none; border:0; padding:0; margin:0; font:inherit; font-weight:700; color:inherit; text-align:left; cursor:pointer; text-decoration:underline dotted; text-underline-offset:4px; text-decoration-thickness:1.5px; }
h2 .namebtn { font-weight:inherit; }
.sheet-head h2 .namebtn { text-decoration:none; }
.mm-walk { stroke:var(--avocado); }
details.cfg { margin-top:16px; }
details.cfg > summary { display:flex; align-items:center; justify-content:space-between; gap:10px; list-style:none; cursor:pointer; background:var(--card); border:2px solid var(--edge); border-radius:20px; padding:14px 16px; box-shadow:4px 4px 0 var(--shadow); font-size:15px; }
details.cfg > summary::-webkit-details-marker { display:none; }
details.cfg > summary::after { content:""; flex:none; width:10px; height:10px; border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor; transform:rotate(45deg); margin:-4px 6px 0 0; transition:transform .15s; }
details.cfg[open] > summary::after { transform:rotate(-135deg); margin:4px 6px 0 0; }
.cfgbody { margin-top:2px; }
h2.sec { margin-top:26px; }
.teaser { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; padding:10px 14px; border:2px dashed var(--edge); border-radius:14px; background:var(--field); font-size:14px; }
.feed-item { gap:8px; align-items:flex-start; }
.feed-item .ft { flex:1; text-align:left; }
.feed-item .nd { margin-top:5px; }
.feed-item.static { display:flex; width:100%; padding:8px 0; border-bottom:2px dashed var(--line); font-size:13.5px; line-height:1.35; }
.feed-item.static:last-child { border-bottom:0; }
.nd.p { background:var(--soft); }
.btn.ghost, .btn.small { box-shadow:none; }
.btn.ghost:active, .btn.small:active { transform:none; }
.chip[aria-pressed="true"], .seg button[aria-pressed="true"], .dchip[aria-pressed="true"], nav button[aria-current="page"] { box-shadow:none; }
details.cfg { background:var(--card); border:2px solid var(--edge); border-radius:20px; box-shadow:4px 4px 0 var(--shadow); padding:0 14px; margin-top:16px; }
details.cfg > summary { background:none; border:0; border-radius:0; box-shadow:none; padding:14px 2px; }
details.cfg[open] > summary { border-bottom:2px dashed var(--line); }
.cfgbody { padding:4px 0 14px; }
.cfgbody .card { box-shadow:none; background:var(--field); border-radius:16px; margin-top:12px; }
.cfgbody .card.day.off { background:var(--soft); }
details.cfg > summary::after { margin:0 6px 0 0; position:relative; top:-3px; }
details.cfg[open] > summary::after { margin:0 6px 0 0; top:3px; }
nav button { flex:1 0 auto; min-width:0; padding:8px 4px; font-size:12.5px; display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.2; }
nav #tabs { justify-content:stretch; gap:4px; }
@media (max-width:360px) { nav button { font-size:12px; } }
@media (max-width:380px) { nav button { font-size:12px; padding:8px 3px; } nav #tabs { gap:2px; } }
@media (prefers-reduced-motion: reduce) { .switch i, .switch i::after { transition:none; } .btn:active { transform:none; } .card.flash { animation:none; outline:4px solid var(--mustard); } }

.pilot { margin-top:14px; padding:8px 12px; border:2px dashed var(--edge); border-radius:12px; background:var(--field); font-size:12.5px; line-height:1.4; color:var(--muted); }
.pilot b { color:var(--ink); }
.btn[disabled] { opacity:.55; cursor:not-allowed; }