/* Layout: one white canvas, rounded cards, a single violet accent. Inputs card, verdict card, grid card. */
:root{
  --bg:#ffffff;--card:#ffffff;--ink:#141413;--ink-2:#6B6A66;--line:#e6e5e0;--soft:#f6f6f3;
  --accent:#146C43;--accent-2:#1f8a57;--grad:linear-gradient(135deg,#146C43,#1f8a57);--accent-soft:#e6f3ec;
  --loss:#fde3e1;--loss-ink:#a8322a;--penny:#fdf0c9;--penny-ink:#9a5b05;--win:#dcf2e4;--win-ink:#146C43;
  --sans:Arial,Helvetica,Arimo,"Liberation Sans",sans-serif;--mono:"JetBrains Mono",Consolas,monospace;
  --radius:16px;--shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.06);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
body{padding-inline:16px}
.wrap{max-width:880px;margin:0 auto;display:grid;gap:20px}
header{padding-top:36px;display:grid;gap:8px}
.logolink{display:block;width:min(380px,100%)}.logo{display:block;width:100%;height:auto}
header{gap:14px}
h1{font-size:clamp(28px,4.5vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin:0;text-wrap:balance}
.sub{color:var(--ink-2);margin:0;max-width:60ch;font-size:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 24px}
.inputs{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;padding:16px 20px}
.c{display:grid;gap:2px;min-width:0}
.c label{font-size:13px;color:var(--ink-2);display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.c label b{font-family:var(--mono);font-weight:500;font-size:14px;color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:1px 7px;white-space:nowrap}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:999px;background:var(--line);outline:none;margin:8px 0 2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 2px 6px rgba(20,108,67,.35);cursor:pointer}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 2px 6px rgba(20,108,67,.35);cursor:pointer}
input[type=range]:focus-visible{box-shadow:0 0 0 4px rgba(20,108,67,.25)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
input[type=number],input[type=text],textarea{font:inherit;font-size:14px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-family:var(--mono)}
input[type=number]{width:6em}
input:focus-visible,textarea:focus-visible,button:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(20,108,67,.25);border-color:var(--accent)}
input:disabled{opacity:.45}
.carstrip{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:1px solid var(--line);border-radius:14px;padding:11px 16px;background:var(--soft);cursor:pointer;color:var(--ink);text-align:left;box-shadow:none;font:inherit}
.carstrip .t{display:block;font-size:12.5px;color:var(--ink-2)}.carstrip .v{display:block;font-weight:600;font-size:14.5px;margin-top:1px}.carstrip .v i{font-style:normal;color:var(--ink-2);font-weight:400;margin:0 5px}.carstrip .chev{color:var(--accent);font-weight:600;font-size:13px;white-space:nowrap}
.carpanel[hidden]{display:none}
.pills.seg label{display:grid;line-height:1.1;padding:6px 8px}.pills.seg small{font-size:10.5px;color:var(--ink-2);font-weight:400}
.foot{display:flex;justify-content:center;gap:8px;margin:0}.foot button.mini{padding:6px 12px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);border-color:var(--line)}.foot img{height:18px}
.quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.checks{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px;color:var(--ink)}.checks label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}.checks input{accent-color:var(--accent);width:15px;height:15px}
.loyal{margin-top:12px}
.alts{margin:8px 0 0;font-size:13px;color:var(--ink-2)}.alts button.link{font-size:13px;text-decoration:none;margin:0 2px}.alts button.link:hover{text-decoration:underline}
.metrics .mhead{display:flex;align-items:center;gap:12px}.metrics .mhead img{height:48px}.metrics .mhead h2{margin:0;font-size:18px}.metrics .mhead p{margin:2px 0 0;color:var(--ink-2);font-size:13px}
.metrics .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}.metrics .tiles.three{grid-template-columns:repeat(3,1fr)}
.metrics .tile{border:1px solid var(--line);border-radius:12px;padding:12px 14px}.metrics .tile .v{font-family:var(--mono);font-size:24px;font-weight:700;line-height:1.1}.metrics .tile .l{font-size:12.5px;color:var(--ink-2);margin-top:4px}
.metrics .v.w{color:var(--win-ink)}.metrics .v.p{color:var(--penny-ink)}.metrics .v.n{color:var(--loss-ink)}
.metrics .mbar{display:flex;height:14px;border-radius:999px;overflow:hidden;margin-top:14px;background:var(--line)}.metrics .mbar i{display:block;height:100%}
.metrics .mlegend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--ink-2);margin-top:8px}.metrics .mlegend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.metrics .mfoot{margin:12px 0 0;font-size:12.5px;color:var(--ink-2)}
.mdlg{border:0;border-radius:var(--radius);padding:16px;max-width:min(880px,calc(100vw - 32px));background:var(--bg);box-shadow:0 20px 60px rgba(0,0,0,.25)}.mdlg::backdrop{background:rgba(20,20,19,.45)}
#metricsBtn{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;text-decoration:none;vertical-align:middle}#metricsBtn:hover{text-decoration:underline}
@media (max-width:640px){.metrics .tiles,.metrics .tiles.three{grid-template-columns:1fr 1fr}}
.badge{display:inline-block;font-size:11px;font-weight:600;border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:1px}.badge.stale{background:#FDF3DF;color:#8a5a00}.badge.down{background:#E6F3EC;color:var(--win-ink)}.badge.up{background:#FBE9E7;color:var(--loss-ink)}
.chipbtn{background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:12.5px;color:var(--ink-2);box-shadow:none;cursor:pointer}
.chipbtn.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);font-weight:600}
.pills{display:inline-flex;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:3px}
.pills label{padding:5px 12px;font-size:13px;font-weight:500;border-radius:999px;cursor:pointer;color:var(--ink-2)}
.pills label:has(:checked){background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(15,23,42,.12)}
.pills input{position:absolute;opacity:0;width:0;height:0}
.answer{margin:0}.answer[hidden]{display:none}.vhead{font-size:clamp(20px,3vw,26px);font-weight:700;letter-spacing:-.015em;line-height:1.25;margin:0 0 6px;text-wrap:balance}.vbody{font-size:16px;line-height:1.5;margin:0;color:var(--ink-2)}.vbody:empty{display:none}
.answer b{color:var(--accent)}.answer .vhead b.ok{color:var(--win-ink)}.answer b.bad{color:var(--loss-ink)}.answer b.meh{color:var(--penny-ink)}
.station{border-radius:var(--radius);padding:16px 18px;display:grid;gap:2px;border:2px solid transparent}
.station.w{background:var(--win);color:var(--win-ink)}.station.p{background:var(--penny);color:var(--penny-ink)}.station.n{background:var(--loss);color:var(--loss-ink)}
.station .k{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;opacity:.85}
.station .v{font-size:clamp(22px,4vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.station .s{font-size:14px;opacity:.85}
.notes{margin:-6px 0 0;padding:0 0 0 18px;font-size:13px;color:var(--ink-2);display:grid;gap:3px}
.notes b{color:var(--ink);font-weight:600}
button.link{background:none;border:0;box-shadow:none;padding:0;color:var(--accent);font-size:13px;font-weight:600;text-decoration:underline;cursor:pointer}
.strip{display:none;gap:4px;overflow-x:auto;padding-bottom:6px}
.strip .cell{flex:0 0 auto;min-width:54px;border-radius:8px;padding:6px 4px;text-align:center;font-family:var(--mono);font-size:12px}
.strip .cell small{display:block;font-family:var(--sans);font-size:11px;opacity:.75}
.strip .cell.n{background:var(--loss);color:var(--loss-ink)}.strip .cell.p{background:var(--penny);color:var(--penny-ink)}.strip .cell.w{background:var(--win);color:var(--win-ink)}
button.small{padding:6px 12px;font-size:13px;display:none;margin:8px 0 10px}
.fillhead{font-size:18px;font-weight:700;letter-spacing:-.01em;margin:-6px 0 -10px;padding:6px 12px;border-radius:10px;width:max-content;max-width:100%}
.verdict{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@keyframes flash{0%{background:var(--accent-soft);box-shadow:0 0 0 4px rgba(20,108,67,.35)}100%{background:transparent;box-shadow:0 0 0 0 rgba(20,108,67,0)}}
.flash{animation:flash 1.2s ease-out}
.pills.flash{animation:pillflash 1.2s ease-out}
@keyframes pillflash{0%{box-shadow:0 0 0 4px rgba(20,108,67,.45);background:var(--accent-soft)}100%{box-shadow:0 0 0 0 rgba(20,108,67,0);background:var(--soft)}}
.pills label:has(:checked){transition:background .2s}
.band{border-radius:var(--radius);padding:16px 18px;display:grid;gap:2px}
.band.w{background:var(--win);color:var(--win-ink)}.band.p{background:var(--penny);color:var(--penny-ink)}.band.n{background:var(--loss);color:var(--loss-ink)}
.band .k{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;opacity:.85}
.band .v{font-size:clamp(22px,3.5vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.band .v small{font-size:13px;font-weight:500;letter-spacing:0;opacity:.8;display:block}
.band .s{font-size:12.5px;opacity:.8}
.cardhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.cardhead h2{font-size:16px;font-weight:600;margin:0;letter-spacing:-.01em}
.cardhead p{margin:0;font-size:13px;color:var(--ink-2)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--ink-2);margin-bottom:12px}
.legend span{display:inline-flex;align-items:center;gap:6px}.legend i{width:12px;height:12px;border-radius:4px;display:inline-block}
.gridwrap{overflow-x:auto}
table{border-collapse:separate;border-spacing:3px;width:100%;min-width:620px;font-size:12px;font-family:var(--mono);font-variant-numeric:tabular-nums}
th,td{text-align:center;padding:7px 0;border-radius:6px}
th{font-family:var(--sans);font-weight:500;color:var(--ink-2);font-size:12px}
.rl{text-align:right;padding-right:10px;width:40px;color:var(--ink-2);font-family:var(--sans);font-weight:500}
td.n{background:var(--loss);color:var(--loss-ink)}td.p{background:var(--penny);color:var(--penny-ink)}td.w{background:var(--win);color:var(--win-ink)}
tr.you td{box-shadow:inset 0 0 0 2px var(--ink);font-weight:600}tr.you td.rl{box-shadow:none;color:var(--ink)}
details{border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;color:var(--ink-2);font-size:14px}
details summary{cursor:pointer;color:var(--ink);font-weight:600;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center}
details summary::after{content:"+";font-size:20px;color:var(--ink-2)}
details[open] summary::after{content:"–"}
.adv{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:16px}
.adv .c label{font-size:13px}
.adv input[type=number]{width:100%}
code{font-family:var(--mono);font-size:12px;background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--ink)}
button{font:inherit;font-weight:600;font-size:14px;padding:10px 18px;border-radius:999px;border:0;background:var(--grad);color:#fff;cursor:pointer;box-shadow:0 4px 14px rgba(20,108,67,.3)}
button:hover{filter:brightness(1.05)}
button.ghost{background:#fff;color:var(--accent);border:1px solid var(--accent);box-shadow:none}
button.ghost.running{background:var(--accent);color:#fff}
.sharegrid{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px}
.sharegrid h3{font-size:15px;font-weight:600;margin:0 0 6px}
.sharegrid p{margin:0 0 10px;font-size:14px;color:var(--ink-2)}
.sharegrid p.small{font-size:12.5px;margin:10px 0 0}
.share input[type=text]{flex:1;min-width:0;font-size:13px}
.share textarea{width:100%;font-size:12.5px;margin-bottom:10px;resize:vertical}
.share .row{flex-wrap:nowrap}
@media (max-width:700px){.sharegrid{grid-template-columns:1fr}}
footer{font-size:12.5px;color:var(--ink-2);max-width:80ch;text-align:center;margin:0 auto}
.notice{position:fixed;left:50%;top:max(12px,env(safe-area-inset-top));transform:translateX(-50%);z-index:40;max-width:min(560px,calc(100vw - 32px));background:var(--penny);color:var(--penny-ink);border:1px solid #f0d58a;border-radius:12px;padding:10px 38px 10px 14px;font-size:14px;line-height:1.4;box-shadow:var(--shadow)}
.notice button{position:absolute;right:6px;top:6px;border:0;background:none;color:inherit;font-size:18px;line-height:1;padding:4px 8px;cursor:pointer}
body:not(.dev) .devonly{display:none!important}
.notice.down{background:var(--loss);color:var(--loss-ink);border-color:#f3b7b1}
/* routing offline: before a search on the Find pumps button; after a failed one across the top of the map */
.offdot{width:10px;height:10px;border-radius:50%;background:#d93a2f;flex:none;margin-top:5px;box-shadow:0 0 0 4px rgba(217,58,47,.18)}
.go.off,.go:disabled{background:#e9e8e4!important;color:var(--ink-2)!important;box-shadow:none!important;cursor:not-allowed}
.gonote{color:var(--loss-ink);font-size:13.5px;line-height:1.4;margin:10px 4px 0;display:flex;gap:8px;align-items:flex-start}
.mapoff{position:absolute;left:10px;right:52px;top:10px;z-index:600;background:var(--loss);color:var(--loss-ink);border:1px solid #f3b7b1;border-radius:12px;padding:9px 12px;font-size:13.5px;line-height:1.35;display:flex;gap:9px;align-items:flex-start;box-shadow:0 4px 14px rgba(0,0,0,.08)}

.rcoff{display:flex;gap:8px;align-items:flex-start;text-align:left;background:var(--loss);color:var(--loss-ink);border-radius:10px;padding:8px 10px;font-size:13px;line-height:1.35;margin:0 0 10px}
.embed body{padding-block:0 12px}
.embed header{padding-top:12px}.embed h1{font-size:22px}
.embed .logolink,.embed .sub,.embed .legend,.embed details,.embed #share,.embed .notes{display:none}
.embed footer{font-size:12px}
.embed .wrap{gap:12px}.embed .card{padding:14px 16px;box-shadow:none}
.embed .band{padding:10px 12px}.embed .band .v{font-size:20px}
.embed table{font-size:11px;min-width:540px}.embed th,.embed td{padding:4px 0}
@media (max-width:640px){.strip{display:flex}button.small{display:inline-block}.gridwrap{display:none}.gridwrap.open{display:block}}
@media (max-width:520px){.inputs{grid-template-columns:1fr}.card{padding:18px}.verdict{grid-template-columns:1fr}}

/* v1.1: map, list, data card */
.inputs{grid-template-columns:1fr 1fr}
.status{font-size:13px;color:var(--ink-2);margin:4px 0 0;min-height:1.2em}.status.err{color:var(--loss-ink)}
.mapwrap{position:relative}
#map{height:460px;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);background:var(--soft);z-index:0}
/* the reveal: once the car has done its trip the map dims and the answer sits on top */
.reveal{position:absolute;inset:0;z-index:600;display:grid;place-items:center;padding:20px;background:rgba(255,255,255,.55);border-radius:var(--radius);animation:revealIn .5s ease both}.reveal[hidden]{display:none}
@keyframes revealIn{from{opacity:0}to{opacity:1}}
.rcard{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 40px rgba(15,23,42,.18);padding:20px 24px;width:100%;max-width:420px;text-align:center;display:grid;gap:9px;animation:rcardIn .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.1s}
@keyframes rcardIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.rcard .kick{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.rcard .big{font-size:clamp(30px,6vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0;text-wrap:balance}.rcard .big.ok{color:var(--win-ink)}.rcard .big.bad{color:var(--loss-ink)}.rcard .big.meh{color:var(--penny-ink)}
.rcard .sub{font-size:14.5px;color:var(--ink-2);line-height:1.4;margin:0}.rcard .sub b{color:var(--ink)}.rcard .sub b.bad{color:var(--loss-ink)}.rcard .sub b.meh{color:var(--penny-ink)}
.rcard .pump{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.25}.rcard .pump small{display:block;font-weight:400;font-size:13px;color:var(--ink-2);margin-top:2px}
.rcard .fills{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:2px}.rcard .fills i{font-style:normal;display:grid;gap:1px;border:1px solid var(--line);border-radius:12px;padding:7px 11px;min-width:92px;background:var(--soft)}.rcard .fills em{font-style:normal;font-size:11px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.05em}.rcard .fills b{font-family:var(--mono);font-size:14.5px;font-weight:600}.rcard .fills b.pos{color:var(--win-ink)}.rcard .fills b.neg{color:var(--loss-ink)}.rcard .fills b.nil{color:var(--ink-2)}
.rcard .cta{display:flex;gap:8px;justify-content:center;margin-top:4px;flex-wrap:wrap}.rcard .cta a,.rcard .cta button{border:0;border-radius:999px;padding:10px 18px;font-size:14.5px;font-weight:700;background:var(--grad);color:#fff;text-decoration:none;cursor:pointer;font-family:inherit}.rcard .cta button.ghost{background:#fff;color:var(--ink-2);border:1px solid var(--line);font-weight:500}
@media (max-width:640px){.reveal{padding:10px}.rcard{padding:16px 16px;gap:7px}.rcard .fills i{min-width:0;flex:1;padding:6px 6px;align-content:start}.rcard .fills em{font-size:10px}.rcard .fills b{font-size:13px}}
.c.dte label .opt{font-weight:400;color:var(--ink-2);font-size:12px;margin-left:6px}.c.dte .row{align-items:center;gap:8px;flex-wrap:wrap}.c.dte input{width:96px;font-family:var(--mono)}.c.dte .unit{color:var(--ink-2);font-size:14px}.c.dte .status{margin:0;flex:1;min-width:160px}.c.dte .status.warn{color:var(--loss-ink)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--ink-2);margin:8px 2px 0}
.legend span{display:inline-flex;align-items:center;gap:5px}.legend i{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}.legend .triponly{display:none}.legend.trip .triponly{display:inline-flex}
.mk{font-family:var(--mono);font-size:12px;font-weight:500;background:#fff;color:var(--ink);border:2px solid var(--ink-2);border-radius:6px;padding:2px 6px;line-height:1.2;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.mk.w{background:var(--win-ink);border-color:var(--win-ink);color:#fff}.mk.f{background:#fff;border-color:var(--win-ink);color:var(--win-ink)}.mk.p{background:var(--penny);border-color:var(--penny-ink);color:var(--penny-ink)}.mk.n{background:#fff;border-color:var(--loss-ink);color:var(--loss-ink);opacity:.85;font-size:11px}.mk.d,.mk.s{background:#fff;border-color:var(--ink-2);color:var(--ink-2);opacity:.7;font-size:11px}.mk.o{background:#fff;border-color:var(--line);color:var(--ink-2);opacity:.6;font-size:11px;border-style:dashed}
.mk.u{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}
.mk.home{background:#141413;border-color:#141413;color:#fff;font-family:var(--sans);font-weight:700;letter-spacing:.04em;border-radius:999px;padding:2px 8px}.mk.dest{background:var(--accent);border-color:var(--accent)}
.tilewarn{position:absolute;left:10px;bottom:10px;z-index:5;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:12px;color:var(--ink-2)}
.maplibregl-popup-content{font-family:var(--sans);font-size:13.5px;padding:10px 12px;border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.18)}.maplibregl-popup-content button.link{margin-top:6px}.maplibregl-popup-close-button{font-size:18px;padding:2px 6px}
.mkwrap{width:max-content}.mk{display:inline-block;cursor:pointer}
ol.list{list-style:none;margin:0;padding:0}
/* v2.7: one row per pump. Edge = verdict, right = kept on a full tank; tap opens the sums and directions. */
ol.list li.row{display:grid;grid-template-columns:6px 1fr auto;gap:0 12px;align-items:center;padding:11px 4px 11px 0;border-bottom:1px solid var(--line);cursor:pointer}
ol.list li.row:last-of-type{border-bottom:0}
ol.list li.row .edge{display:block;width:6px;height:40px;border-radius:3px;background:var(--line);align-self:center}
ol.list li.row.w .edge{background:var(--win-ink)}ol.list li.row.f .edge{background:var(--win-ink)}ol.list li.row.p .edge{background:var(--penny-ink)}ol.list li.row.n .edge{background:var(--loss-ink)}
ol.list li.row.u .edge{background:var(--accent)}ol.list li.row.s .edge,ol.list li.row.d .edge{background:var(--line)}
ol.list li.row.o{opacity:.55}ol.list li.row.o .edge{background:transparent;border:2px dashed var(--ink-2);width:2px}
ol.list li.row .main{min-width:0}
ol.list .nm{font-weight:600;display:block;line-height:1.25}ol.list .nm .pill{margin-left:6px}
ol.list .d{display:block;color:var(--ink-2);font-size:12.5px;margin-top:3px;line-height:1.3}
ol.list .d b.from{color:var(--win-ink);font-weight:600}ol.list .d b.from.meh{color:var(--penny-ink)}
ol.list li.row.best .nm{color:var(--win-ink)}
ol.list .right{display:grid;justify-items:end;gap:4px;text-align:right;white-space:nowrap;align-self:center}
ol.list .right .pr{font-family:var(--mono);font-size:16px;font-weight:600}
ol.list .right .net{font-family:var(--mono);font-size:13.5px;font-weight:700}ol.list .net.pos{color:var(--win-ink)}ol.list .net.neg{color:var(--loss-ink)}ol.list .net.nil{color:var(--ink-2);font-weight:500}
ol.list li.row .x{display:none;grid-column:2/-1;padding:8px 0 2px;cursor:default}
ol.list li.row.open .x{display:block}
ol.list .x .addr{margin:0 0 8px;font-size:12.5px;color:var(--ink-2)}
ol.list .x .sums{margin:0 0 8px}
ol.list .thr{font-size:13px;font-weight:600;color:var(--ink)}ol.list .thr b{font-family:var(--mono);font-size:14px}ol.list .thr.pos{color:var(--win-ink)}ol.list .thr.meh{color:var(--penny-ink)}ol.list .thr.neg{color:var(--loss-ink)}ol.list .thr.nil{color:var(--ink-2);font-weight:500}
ol.list .fills{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap}ol.list .fills u{text-decoration:none;flex-basis:100%;font-size:11.5px;color:var(--ink-2)}
ol.list .fills i{display:grid;gap:2px;justify-items:center;font-style:normal;background:var(--soft);border:1px solid var(--line);border-radius:9px;padding:5px 8px;flex:1 1 90px;max-width:170px;min-width:0}ol.list .fills em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--ink);white-space:nowrap}ol.list .fills b{font-family:var(--mono);font-size:12.5px;font-weight:700}
ol.list .fills b.pos{color:var(--win-ink)}ol.list .fills b.neg{color:var(--loss-ink)}ol.list .fills b.nil{color:var(--ink-2)}
ol.list li.grp{display:flex;align-items:center;gap:8px;cursor:default;padding:14px 0 4px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
ol.list li.grp i{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}ol.list li.grp span{font-weight:400;color:var(--ink-2);text-transform:none;letter-spacing:0}
ol.list li.grp.o i{background:#fff;border:2px dashed var(--ink-2);width:7px;height:7px}
ol.list li.more.sub{padding:8px 0 4px;text-align:left}ol.list li.more.sub button.link{font-size:13px;text-decoration:none}
ol.list button.link{margin:0;font-size:12.5px;text-decoration:none}
.rowactions{display:flex;gap:16px;align-items:center}.rowactions .navbtn{font-size:13px}
.navbtn{font-size:12.5px;font-weight:600;color:var(--accent);text-decoration:none;white-space:nowrap}
.navbtn:hover,ol.list button.link:hover{text-decoration:underline}
.maplibregl-popup-content .navbtn{display:inline-block;margin-top:6px;border:1px solid var(--accent);border-radius:999px;padding:3px 10px}
ol.list li.more{display:block;border:0;padding:4px 0;text-align:center;cursor:default}
.pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:1px 7px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);vertical-align:middle}
.pill.demo{border-color:var(--penny-ink);color:var(--penny-ink)}.pill.live{border-color:var(--win-ink);color:var(--win-ink)}
.drop{border:1.5px dashed var(--line);border-radius:10px;padding:10px;text-align:center;font-size:13px;color:var(--ink-2);margin-top:10px}
details .row{margin-top:8px}
/* animated sweep */
.sweepbar{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-2)}.sweepbar[hidden]{display:none}
.sweepbar .prog{flex:1;height:5px;background:var(--line);border-radius:999px;overflow:hidden}.sweepbar .prog i{display:block;height:100%;background:var(--accent);width:0;transition:width .3s ease}
.sweepbar button{padding:6px 12px;font-size:13px}
ol.list li.enter{animation:rowin .35s ease both}
@keyframes rowin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
ol.list li.moving{transition:transform .5s ease}
.mkwrap.pop .mk{animation:pop .35s ease both}
.car{position:relative;width:26px;height:42px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));z-index:6}
.car svg{display:block}.car .body{fill:var(--accent)}.car .glass{fill:#cfe9dc}.car .lamp{fill:#fff8c4}.car .tail{fill:#e05252}
.car.empty .body{fill:#8a8a86}.car.empty .glass{fill:#d9d9d6}
.car.full .body{fill:var(--accent)}
.car .fillbub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(calc(-1 * var(--rot,0deg))) translateY(-34px) scale(.6);opacity:0;transition:opacity .2s,transform .2s;background:#fff;border:1px solid var(--line);border-radius:10px;padding:5px 9px;white-space:nowrap;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink);box-shadow:0 4px 12px rgba(0,0,0,.18);pointer-events:none}
.car .fillbub .ft::before{content:"⛽ "}.car .fillbub i{display:block;height:5px;margin-top:4px;border-radius:999px;background:var(--line);overflow:hidden}.car .fillbub i b{display:block;height:100%;width:0;background:var(--accent);border-radius:999px}
.car.filling .fillbub{opacity:1;transform:translate(-50%,-50%) rotate(calc(-1 * var(--rot,0deg))) translateY(-34px) scale(1)}.car.filling .fillbub i b{animation:fillup 1s ease-out forwards}
@keyframes fillup{to{width:100%}}
.car.done svg{animation:settle .4s ease both;transform-origin:50% 50%}@keyframes settle{50%{transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){.car{display:none}}
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){ol.list li.enter,.mkwrap.pop .mk{animation:none}}
/* v1.1 two-stage flow */
html,body{min-height:100%}
.stage{min-height:100vh;box-sizing:border-box;display:grid;place-items:center;padding:24px 0}.stage[hidden]{display:none}
.step1{width:min(520px,100%);display:grid;gap:18px;transition:opacity .35s ease,transform .35s ease}
.step1.out{opacity:0;transform:translateY(-10px);pointer-events:none}
.step1 header{padding:0;justify-items:center}.step1 .logolink{width:min(340px,100%)}
.inputs{grid-template-columns:1fr;gap:16px;padding:22px 24px}
.inputs .c{grid-column:auto}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pills{display:flex}.pills label{flex:1;text-align:center;white-space:nowrap}
input[type=text]{width:100%;font-size:16px;padding:11px 14px;border-radius:12px}
.destwrap{position:relative}.destwrap input{padding-right:44px}
/* v2.7: Just filling up / On a trip */
.modeseg{display:flex;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:4px}
.modeseg button{flex:1;border:0;background:transparent;border-radius:999px;padding:11px 0;font-size:15.5px;font-weight:600;color:var(--ink-2);box-shadow:none;cursor:pointer}
.modeseg button.on{background:#fff;color:var(--accent);box-shadow:0 1px 3px rgba(15,23,42,.14)}
.modehint{margin:8px 2px 0 !important}#destC{margin-top:14px}
.clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:0;background:var(--soft);color:var(--ink-2);font-size:18px;line-height:1;padding:0;box-shadow:none;cursor:pointer}
.destwrap .hintline{font-size:12px;color:var(--ink-2);margin-top:4px}
.go{width:100%;font-size:17px;padding:14px 20px;margin-top:2px}
.hint{font-size:12.5px;color:var(--ink-2);margin:0}.hint.center{text-align:center}.hint a{color:var(--accent)}
details.more{border:0;padding:0;font-size:13px}details.more summary{font-size:14px;color:var(--accent)}details.more summary::after{content:none}
details.more .adv{margin-top:12px}details.more .hint{margin-top:10px}
.datarow{display:flex;gap:10px;align-items:center;margin-top:14px;font-size:13px;color:var(--ink)}
button.small{padding:7px 12px;font-size:13px}
.searching{position:fixed;inset:0;display:grid;place-items:center;background:#fff;opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:20}
.searching.on{opacity:1}
.searching .inner{display:grid;gap:14px;justify-items:center;color:var(--ink-2);font-size:17px}
.searching .pump{font-size:40px;animation:bob 1.2s ease-in-out infinite}
.spin{width:44px;height:44px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--accent);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.step1,.results,.searching{transition:none}.searching .pump,.spin{animation:none}}
.results{max-width:960px;margin:0 auto;padding:16px 0 48px;display:grid;gap:16px;opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
.results.in{opacity:1;transform:none}.results[hidden]{display:none}
.bar{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-2)}
.bar .where{flex:1;min-width:0;display:grid;gap:2px;line-height:1.3}.bar .where b{color:var(--ink);font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar .where span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .logolink.small{width:150px}
.chip{background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:5px 12px;color:var(--ink);font-size:13.5px}
.bar .edit{flex:none;background:#fff;border:1.5px solid var(--accent);color:var(--accent);box-shadow:none;padding:9px 16px;font-size:14px}
@media (max-width:640px){#map{height:360px}.two{grid-template-columns:1fr}.bar .where b,.bar .where span{white-space:normal}}

/* v2.6.2: these were inline style attributes; a strict Content-Security-Policy (no 'unsafe-inline') forbids those */
.grow140{flex:1 !important;min-width:140px !important}.grow160{flex:1 !important;min-width:160px !important}
.hint.gap12{margin:12px 0 0 !important}
.small.gap10{margin:10px 0 0 !important;color:var(--ink-2) !important}
footer a.brandlink{color:var(--accent) !important;font-weight:600 !important;text-decoration:none !important}footer a.aboutlink{color:var(--accent) !important}
.legend i.lg-route{background:#141413 !important;width:16px !important;height:4px !important;border-radius:2px !important}
.legend i.lg-try{background:repeating-linear-gradient(90deg,var(--win-ink) 0 4px,transparent 4px 7px) !important;width:16px !important;height:3px !important;border-radius:0 !important}
i.lg-w{background:var(--win-ink) !important}i.lg-p{background:var(--penny-ink) !important}i.lg-n{background:var(--loss-ink) !important}i.lg-z{background:var(--line) !important}
.legend i.lg-dearer{background:#fff !important;border:2px solid var(--ink-2) !important;width:9px !important;height:9px !important}
.legend i.lg-usual{background:var(--accent) !important;box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px var(--accent) !important;margin:0 3px}
.sub.fs125{font-size:12.5px !important}.or{font-weight:400 !important;color:var(--ink-2) !important}.mfoot.gap10{margin-top:10px !important}

/* v2.6.7: installable app (PWA) */
.foot button[hidden]{display:none!important}
@media (display-mode: standalone){body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}}
.foot{flex-wrap:wrap}.foot button.mini{white-space:nowrap}

/* v2.6.8: credit line with version, start screen and results footer */
.credit{font-size:12.5px;color:var(--ink-2);text-align:center;margin:6px 0 0}.credit a{color:var(--accent)}.credit .ver{font-family:var(--mono);font-size:11.5px}
footer .credit{margin:0 0 6px}

/* v2.6.10: choose the maps app for Navigate */
.navdlg{width:min(420px,calc(100vw - 32px))}.navdlg h2{font-size:17px;margin:2px 0 14px;line-height:1.3}.navq{margin:0;color:var(--ink-2);font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.navapps{display:grid;gap:8px}.navapp{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);background:var(--soft)}
.navapp b{font-size:16px}.navapp small{color:var(--ink-2);font-size:12.5px}.navapp:hover,.navapp:focus-visible{border-color:var(--accent);outline:none}
.navrem{display:flex;gap:8px;align-items:center;margin-top:12px;font-size:14px}.navrem span{color:var(--ink-2);font-size:12.5px}
#navApp{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit}
.navrem{flex-wrap:wrap;row-gap:2px}.navrem span{flex-basis:100%;padding-left:26px}