:root{
  --bg:#F6F8FC; --surface:#FFFFFF; --surface-sunken:#EEF3FA; --ink:#0F1B2D; --ink-soft:#5A6678; --line:#DCE3EE;
  --blue:#1F5FD6; --blue-soft:#E8F0FD; --navy:#0B1F44; --on-blue:#fff;
  --ok:#1F8A5B; --ok-soft:#E6F4EC; --danger:#C4473A; --danger-soft:#FDEBEA; --brass:#A86B0C; --brass-soft:#FFF1DC; --plum:#6A4FC9;
  --radius:14px; --shadow:0 1px 2px rgba(15,27,45,.06),0 8px 24px rgba(15,27,45,.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D1420; --surface:#141D2C; --surface-sunken:#1A2536; --ink:#E8EDF5; --ink-soft:#9AA7BA; --line:#26324A;
    --blue:#7FAAFF; --blue-soft:#1B2A45; --navy:#0E2A5C; --on-blue:#0D1420;
    --ok:#5CC79A; --ok-soft:#173326; --danger:#F08C80; --danger-soft:#3A2022; --brass:#E0B252; --brass-soft:#3A2E18; --plum:#A996F0;
    --shadow:none;
  }
}
:root[data-theme="dark"]{
  --bg:#0D1420; --surface:#141D2C; --surface-sunken:#1A2536; --ink:#E8EDF5; --ink-soft:#9AA7BA; --line:#26324A;
  --blue:#7FAAFF; --blue-soft:#1B2A45; --navy:#0E2A5C; --on-blue:#0D1420;
  --ok:#5CC79A; --ok-soft:#173326; --danger:#F08C80; --danger-soft:#3A2022; --brass:#E0B252; --brass-soft:#3A2E18; --plum:#A996F0;
  --shadow:none;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.55 "IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--blue)}
button{font:inherit;color:inherit}
.num,.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* top bar */
.topbar{position:sticky;top:0;z-index:1200;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar .in{max-width:1240px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:14px}
.wordmark{font:600 20px/1 Fraunces,Georgia,serif;color:var(--ink);text-decoration:none;white-space:nowrap}
.wordmark span{color:var(--blue)}
.crumb{color:var(--ink-soft);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb b{color:var(--ink);font-weight:500}
.topbar .sp{flex:1}
.badge-no{font-size:.8rem;border:1px solid var(--line);border-radius:999px;padding:3px 10px;color:var(--ink-soft);white-space:nowrap}

/* hero */
.hero{max-width:1240px;margin:0 auto;padding:28px 16px 8px}
.hero h1{font:600 clamp(1.7rem,3.6vw,2.4rem)/1.15 Fraunces,Georgia,serif;margin:0 0 6px;letter-spacing:-.01em}
.hero p{margin:0;color:var(--ink-soft);max-width:680px}

/* layout */
.app{max-width:1240px;margin:0 auto;padding:16px;display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:900px){.app{grid-template-columns:1fr}}
.panel{display:flex;flex-direction:column;gap:16px;min-width:0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.card h2{font:600 1.05rem/1.3 "IBM Plex Sans",sans-serif;margin:0 0 12px}
.mapwrap{position:sticky;top:72px;min-width:0}
@media (max-width:900px){.mapwrap{position:static;order:-1}}
#map{height:calc(100vh - 104px);min-height:420px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface-sunken)}
@media (max-width:900px){#map{height:320px;min-height:0}}

/* waypoint inputs */
.wps{display:flex;flex-direction:column;gap:8px;position:relative}
.wp{display:grid;grid-template-columns:22px 1fr 34px;gap:8px;align-items:center;position:relative}
.dot{width:14px;height:14px;border-radius:50%;border:3px solid var(--blue);background:var(--surface);justify-self:center}
.wp.stop .dot{width:10px;height:10px;border-width:2px;border-color:var(--ink-soft)}
.wp.end .dot{background:var(--danger);border-color:var(--danger)}
.field{position:relative}
input,select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit}
input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.iconbtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--surface-sunken);cursor:pointer;display:grid;place-items:center;font-size:1rem;color:var(--ink-soft)}
.iconbtn:hover{color:var(--ink)}
.sugg{position:absolute;left:0;right:0;top:100%;z-index:1300;background:var(--surface);border:1px solid var(--line);border-radius:10px;margin-top:4px;box-shadow:0 10px 30px rgba(0,0,0,.18);display:none;max-height:280px;overflow:auto}
.sugg button{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 12px;cursor:pointer}
.sugg button:hover,.sugg button:focus{background:var(--blue-soft)}
.sugg small{color:var(--ink-soft)}
.linkbtn{background:none;border:0;color:var(--blue);cursor:pointer;padding:4px 0;font-weight:500;justify-self:start}
.linkbtn:disabled{color:var(--ink-soft);cursor:default}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:6px;margin-top:14px;align-items:end}
.row2>div{min-width:0;display:grid;grid-row:span 2;grid-template-rows:subgrid}
.row2>div>label.lbl{display:flex;align-items:flex-end;min-height:2.8em;line-height:1.4;margin-bottom:0}
.row2>div>select,.row2>div>input{height:48px;min-width:0;max-width:100%}
@media (max-width:600px){.row2{grid-template-columns:minmax(0,1fr)}.row2>div{grid-row:auto;grid-template-rows:auto 48px;gap:6px}.row2>div+div{margin-top:6px}.row2>div>label.lbl{min-height:0}}
label.lbl{display:block;font-size:.82rem;font-weight:500;color:var(--ink-soft);margin-bottom:5px}
.toggles{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;user-select:none;background:var(--surface)}
.chip input{width:auto;margin:0;accent-color:var(--blue)}
.chip:has(input:checked){border-color:var(--blue);background:var(--blue-soft)}
#returnRow{display:none}
#returnRow.on{display:block;margin-top:10px}
details.adv{margin-top:12px;font-size:.88rem;color:var(--ink-soft)}
details.adv summary{cursor:pointer}
.primary{margin-top:16px;width:100%;padding:13px;border:0;border-radius:12px;background:var(--blue);color:var(--on-blue);font-weight:600;font-size:1rem;cursor:pointer}
.primary:disabled{opacity:.6;cursor:progress}
.status{margin-top:10px;color:var(--ink-soft);font-size:.9rem;min-height:1.3em}
.status.err{color:var(--danger)}

/* results */
.hidden{display:none!important}
.total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.total .big{font:600 2.2rem/1 Fraunces,Georgia,serif;color:var(--blue)}
.total .sub{color:var(--ink-soft);font-size:.9rem}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
@media (max-width:520px){.stats{grid-template-columns:repeat(2,1fr)}}
.legend{font-size:.78rem;color:var(--ink-soft);margin:10px 0 0}
.tag.ok{background:var(--blue-soft);color:var(--blue)}
.tag.ferry{background:var(--blue-soft);color:var(--blue)}
.src{font-size:.75rem;color:var(--ink-soft)}
.src a{color:var(--ink-soft)}
.sub-h{font-size:.82rem;font-weight:600;color:var(--ink-soft);margin:10px 0 2px;text-transform:uppercase;letter-spacing:.03em}
.ferry-marker{background:var(--blue);color:#fff;border:2px solid #fff;border-radius:6px;width:24px!important;height:24px!important;display:grid;place-items:center;font-size:13px;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.sources li{margin:0 0 6px}
.stat{background:var(--surface-sunken);border-radius:10px;padding:10px}
.stat b{display:block;font-size:1.05rem}
.stat span{font-size:.78rem;color:var(--ink-soft)}
.alts{display:flex;flex-direction:column;gap:8px}
.alt{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;text-align:left;width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface);cursor:pointer}
.alt.sel{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset;background:var(--blue-soft)}
.alt .sw{width:12px;height:12px;border-radius:3px}
.alt .t{font-weight:600}
.alt small{color:var(--ink-soft)}
.pill{display:inline-block;font-size:.72rem;font-weight:600;border-radius:999px;padding:1px 8px;margin-left:6px;vertical-align:1px}
.pill.cheap{background:var(--ok-soft);color:var(--ok)}
.pill.fast{background:var(--blue-soft);color:var(--blue)}
.warn{background:var(--brass-soft);color:var(--ink);border-radius:10px;padding:9px 12px;font-size:.88rem;margin-top:10px}
.leg-h{display:flex;justify-content:space-between;align-items:baseline;margin:16px 0 6px;font-weight:600}
.leg-h:first-of-type{margin-top:4px}
.leg-h small{color:var(--ink-soft);font-weight:400}
table{width:100%;border-collapse:collapse;font-size:.9rem}
td{padding:8px 4px;border-bottom:1px solid var(--line);vertical-align:top}
td.n{color:var(--ink-soft);width:26px}
td.p{text-align:right;white-space:nowrap}
td.tm{white-space:nowrap;color:var(--ink-soft);width:52px}
td small{color:var(--ink-soft)}
tr.waived td.p{text-decoration:line-through;color:var(--ink-soft)}
.tag{display:inline-block;font-size:.7rem;padding:0 6px;border-radius:999px;margin:3px 4px 0 0;background:var(--surface-sunken);color:var(--ink-soft)}
.tag.rush{background:var(--danger-soft);color:var(--danger)}
.tag.free{background:var(--ok-soft);color:var(--ok)}
.tag.q{background:var(--brass-soft);color:var(--brass)}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ghost{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 12px;cursor:pointer;font-weight:500}
.ghost:hover{border-color:var(--blue);color:var(--blue)}
.note{font-size:.82rem;color:var(--ink-soft);margin:10px 0 0}
.hist{display:flex;flex-direction:column;gap:6px}
.hitem{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.hitem button.load{all:unset;cursor:pointer;min-width:0}
.hitem .r{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hitem small{color:var(--ink-soft)}
.empty{color:var(--ink-soft);font-size:.9rem}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:999px;font-size:.9rem;z-index:2000;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}
.info{max-width:1240px;margin:0 auto;padding:0 16px 16px}
.info .card p{margin:0 0 8px;color:var(--ink-soft);font-size:.9rem}
footer{max-width:1240px;margin:0 auto;padding:8px 16px 40px;font-size:.78rem;color:var(--ink-soft)}
footer a{color:var(--ink-soft)}
.leaflet-container{font:inherit}
.num-marker{background:var(--danger);color:#fff;border:2px solid #fff;border-radius:50%;width:22px!important;height:22px!important;display:grid;place-items:center;font:600 11px/1 "IBM Plex Sans",sans-serif;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.num-marker.free{background:var(--ok)}
.num-marker.ret{background:var(--plum)}

.chip{min-height:44px}.iconbtn{min-width:44px;min-height:44px}.wp{grid-template-columns:22px 1fr 44px}.safety-note{max-width:1240px;margin:12px auto;padding:12px 16px;background:var(--brass-soft);color:var(--ink)}