/* Red Thread - Japan trip planner.
   Palette borrows from rail signage: ink, indigo, torii vermilion.
   Vermilion is reserved for walking legs and for anything wrong. */

:root{
  --bg:#F1F3F6; --surface:#FFFFFF; --surface-2:#E9EDF2;
  --ink:#141922; --muted:#5A6573; --rule:#D8DEE6;
  --vermilion:#C4322A; --vermilion-soft:#FBEDEB;
  --indigo:#1E3A5F; --indigo-soft:#E7EDF5;
  --moss:#54713F; --moss-soft:#EAF0E3;
  --amber:#9E6D10; --amber-soft:#FAF0DA;
  --road:#E3B457; --rail-dark:#272C34;
  --on-indigo:#FFFFFF; --on-vermilion:#FFFFFF;
  --shadow:0 1px 2px rgba(20,25,34,.06),0 4px 14px rgba(20,25,34,.05);
  --display:"Zen Old Mincho",Georgia,"Times New Roman",serif;
  --body:"Zen Kaku Gothic New","Hiragino Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:10px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#0D1117; --surface:#161C25; --surface-2:#1E2630;
  --ink:#E7EBF0; --muted:#8C97A4; --rule:#252E3A;
  --vermilion:#E86153; --vermilion-soft:#2C1917;
  --indigo:#8AAEDC; --indigo-soft:#15202E;
  --moss:#9BB474; --moss-soft:#18200F;
  --amber:#D9A441; --amber-soft:#241C0B;
  --road:#D9A441; --rail-dark:#C7D0DA;
  --on-indigo:#0D1117; --on-vermilion:#1C0E0C;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.3);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0D1117; --surface:#161C25; --surface-2:#1E2630;
  --ink:#E7EBF0; --muted:#8C97A4; --rule:#252E3A;
  --vermilion:#E86153; --vermilion-soft:#2C1917;
  --indigo:#8AAEDC; --indigo-soft:#15202E;
  --moss:#9BB474; --moss-soft:#18200F;
  --amber:#D9A441; --amber-soft:#241C0B;
  --road:#D9A441; --rail-dark:#C7D0DA;
  --on-indigo:#0D1117; --on-vermilion:#1C0E0C;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.3);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:14px;
  line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1500px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3,h4,h5{font-family:var(--display);font-weight:700;text-wrap:balance;margin:0;line-height:1.25}
p{margin:0}
button,select,input,textarea{font:inherit;color:inherit}
img{max-width:100%}
[hidden]{display:none !important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;border-radius:4px}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.jp{font-size:.85em;color:var(--muted);font-weight:400}

/* ------------------------------------------------------- masthead */
.masthead{background:var(--surface);border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:1200}
.mast-in{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:11px}
.brand{display:flex;align-items:baseline;gap:9px}
.brand h1{font-size:21px;font-weight:900}
.brand .jp{font-size:12px;letter-spacing:.22em}
.knot{width:11px;height:11px;border-radius:50%;background:var(--vermilion);
  box-shadow:0 0 0 3px var(--vermilion-soft);align-self:center;flex:none}
.tripbar{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end;margin-left:auto}
.field{display:flex;flex-direction:column;gap:3px;min-width:0}
.field span{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700}
.field input,.field select{background:var(--surface);border:1px solid var(--rule);
  border-radius:7px;padding:6px 9px;min-width:0}
#trip-name{min-width:170px}
#trip-nights,#trip-people,#trip-rate{width:82px;font-family:var(--mono)}
#trip-cur{width:72px}

.nav{display:flex;gap:2px;align-items:center;overflow-x:auto;scrollbar-width:none;
  border-top:1px solid var(--rule)}
.nav::-webkit-scrollbar{display:none}
.nav-spacer{flex:1}
.nav-btn{background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;
  padding:11px 16px;font-size:14px;font-weight:500;color:var(--muted);white-space:nowrap}
.nav-btn:hover{color:var(--ink)}
.nav-btn.is-on{color:var(--ink);border-bottom-color:var(--vermilion);font-weight:700}
.nav-alert{background:none;border:0;cursor:pointer;font-size:12.5px;color:var(--indigo);
  font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;padding:0 4px}
.badge{font-family:var(--mono);font-size:11px;padding:4px 9px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.badge-high{background:var(--vermilion-soft);color:var(--vermilion);border-color:var(--vermilion)}
.badge-warn{background:var(--amber-soft);color:var(--amber);border-color:var(--amber)}
.badge-ok{background:var(--moss-soft);color:var(--moss);border-color:var(--moss)}

#alert-panel{background:var(--surface-2);border-bottom:1px solid var(--rule)}
#alerts{list-style:none;margin:0;padding:12px 0 16px;display:grid;gap:7px;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.alert{display:grid;gap:2px;padding:9px 12px;border-radius:var(--r);
  border-left:3px solid var(--rule);background:var(--surface)}
.alert strong{font-size:13.5px}
.alert span{font-size:12.5px;color:var(--muted)}
.alert-high{border-left-color:var(--vermilion);background:var(--vermilion-soft)}
.alert-high strong{color:var(--vermilion)}
.alert-warn{border-left-color:var(--amber);background:var(--amber-soft)}
.alert-good{border-left-color:var(--moss);background:var(--moss-soft)}
.alert-info{border-left-color:var(--indigo)}

/* ---------------------------------------------------------- shared */
main{padding-block:20px 60px}
.view-head{margin-bottom:14px}
.view-head h2{font-size:25px}
.view-head p{font-size:13.5px;color:var(--muted);max-width:74ch;margin-top:4px}
.sec-h{font-size:20px;margin-bottom:4px}
.sec-lead{font-size:13.5px;color:var(--muted);max-width:74ch;margin-bottom:12px}
.sub-h{font-size:14px;margin:20px 0 9px;padding-bottom:5px;border-bottom:1px solid var(--rule)}
.empty{background:var(--surface);border:1px dashed var(--rule);border-radius:var(--r);
  padding:30px 22px;text-align:center;display:grid;gap:9px;justify-items:center}
.empty p{color:var(--muted);font-size:13.5px;max-width:48ch}
.btn{background:var(--surface);border:1px solid var(--rule);border-radius:7px;
  padding:7px 13px;cursor:pointer;font-size:13px;font-weight:500}
.btn:hover{border-color:var(--indigo)}
.btn-primary{background:var(--indigo);color:var(--on-indigo);border-color:var(--indigo)}
.btn-small{padding:4px 9px;font-size:12px}
.icon{background:none;border:1px solid transparent;border-radius:6px;cursor:pointer;
  width:26px;height:26px;color:var(--muted);line-height:1}
.icon:hover{background:var(--surface-2);color:var(--ink)}
.icon-del:hover{color:var(--vermilion)}
.move-sel{background:var(--surface);border:1px solid var(--rule);border-radius:6px;
  font-size:11.5px;padding:3px 5px;max-width:130px}
.chip{font-size:10.5px;font-family:var(--mono);padding:2px 7px;border-radius:999px;
  border:1px solid var(--rule);color:var(--muted);white-space:nowrap}
.chip-in,.chip-ok{color:var(--moss);border-color:var(--moss);background:var(--moss-soft)}
.chip-no{color:var(--amber);border-color:var(--amber);background:var(--amber-soft)}
.tw{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:13px;min-width:520px}
th,td{text-align:left;padding:8px 11px;border-bottom:1px solid var(--rule)}
th{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  background:var(--surface-2);font-weight:700;white-space:nowrap}
td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}
.num-good{color:var(--moss);font-weight:500}
.num-bad{color:var(--muted)}
tr.tot td{font-weight:700;background:var(--surface-2)}
.est{font-family:var(--mono);font-size:10px;color:var(--amber)}
.fineprint{font-size:11.5px;color:var(--muted);margin-top:11px;max-width:74ch}

/* ------------------------------------------------------- plan view */
.plan-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
@media (max-width:1000px){.plan-grid{grid-template-columns:minmax(0,1fr)}}
#days{display:grid;gap:14px;min-width:0}
.day{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden}
.day.drop-on{border-color:var(--vermilion);box-shadow:0 0 0 2px var(--vermilion-soft)}
.day-head{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:11px 14px;
  border-bottom:1px solid var(--rule);background:var(--surface-2)}
.day-id{display:flex;align-items:baseline;gap:9px;margin-right:auto}
.day-no{font-family:var(--display);font-weight:900;font-size:16px}
.day-date{font-family:var(--mono);font-size:12px;color:var(--muted)}
.day-city select{background:var(--surface);border:1px solid var(--rule);border-radius:6px;
  padding:4px 7px;font-size:12.5px;max-width:170px}
.pace{font-size:10.5px;font-family:var(--mono);padding:3px 9px;border-radius:999px;border:1px solid}
.pace-easy{color:var(--moss);border-color:var(--moss);background:var(--moss-soft)}
.pace-busy{color:var(--amber);border-color:var(--amber);background:var(--amber-soft)}
.pace-hard{color:var(--vermilion);border-color:var(--vermilion);background:var(--vermilion-soft)}
.pace-empty{color:var(--muted);border-color:var(--rule)}
.move-note{display:flex;gap:11px;align-items:flex-start;padding:10px 14px;
  background:var(--indigo-soft);border-bottom:1px solid var(--rule);font-size:12.5px}
.move-tag{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.09em;
  background:var(--indigo);color:var(--on-indigo);padding:3px 7px;border-radius:4px;flex:none;margin-top:1px}
.move-sub{display:block;color:var(--muted);margin-top:3px}

.stops{list-style:none;margin:0;padding:6px 0}
.stop{display:flex;gap:11px;align-items:flex-start;padding:9px 14px;cursor:grab}
.stop:hover{background:var(--surface-2)}
.stop.dragging{opacity:.4}
.stop-bad{background:var(--vermilion-soft)}
.stop-no{font-family:var(--mono);font-size:11px;width:21px;height:21px;flex:none;display:grid;
  place-items:center;border-radius:50%;background:var(--vermilion);color:var(--on-vermilion);margin-top:2px}
.stop-main{flex:1;min-width:0}
.stop-name{font-weight:700;font-size:14px}
.stop-meta{font-size:11.5px;color:var(--muted);font-family:var(--mono)}
.stop-flag{font-size:12px;color:var(--vermilion);font-weight:700;margin-top:3px}
.stop-tip{font-size:12px;color:var(--muted);margin-top:4px;max-width:66ch}
.stop-acts{display:flex;gap:3px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.stop-empty{padding:16px 14px;font-size:12.5px;color:var(--muted);text-align:center}

/* The connector in the itinerary mirrors the map's line styling. */
.hop{display:flex;align-items:center;gap:10px;padding:2px 14px 2px 25px}
.hop-glyph{width:34px;height:10px;flex:none;border-radius:2px}
.hop-walk .hop-glyph{background:repeating-linear-gradient(90deg,var(--vermilion) 0 2px,transparent 2px 7px);height:4px}
.hop-train .hop-glyph{background:repeating-linear-gradient(90deg,var(--rail-dark) 0 6px,transparent 6px 9px);
  border-top:2px solid var(--rail-dark);border-bottom:2px solid var(--rail-dark);height:9px}
.hop-intercity .hop-glyph{background:repeating-linear-gradient(90deg,var(--indigo) 0 7px,transparent 7px 11px);
  border-top:2px solid var(--indigo);border-bottom:2px solid var(--indigo);height:10px}
.hop-car .hop-glyph{background:var(--road);border-top:2px solid var(--rail-dark);
  border-bottom:2px solid var(--rail-dark);height:9px}
.hop-ferry .hop-glyph{background:repeating-linear-gradient(90deg,#2E6F8E 0 8px,transparent 8px 14px);height:3px}
.hop-txt{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.mode-sel{background:var(--surface);border:1px solid var(--rule);border-radius:999px;
  font-size:10.5px;padding:1px 6px;color:var(--muted)}
.day-foot{display:flex;gap:14px;flex-wrap:wrap;padding:8px 14px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:11px;color:var(--muted)}
.day-issues{margin:0;padding:8px 14px 10px 32px;border-top:1px solid var(--rule);
  background:var(--amber-soft);font-size:12px}

.side{position:sticky;top:116px;display:grid;gap:12px;min-width:0;max-height:calc(100vh - 132px);overflow-y:auto}
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:13px;box-shadow:var(--shadow)}
.panel h3,.panel h4{font-size:14px;margin-bottom:7px}
.panel-sub{font-size:12px;margin-bottom:9px}
#pool{display:grid;gap:7px}
.cand{display:flex;gap:7px;align-items:center;padding:7px 8px;border:1px solid var(--rule);
  border-radius:7px;cursor:grab;flex-wrap:wrap}
.cand.dragging{opacity:.4}
.cand-main{flex:1;min-width:104px}
.cand-name{font-size:13px;font-weight:700}
.cand-meta{font-size:10.5px;color:var(--muted);font-family:var(--mono)}
.vote{background:none;border:1px solid var(--rule);border-radius:999px;cursor:pointer;
  font-family:var(--mono);font-size:11px;padding:2px 9px;color:var(--muted)}
.vote.is-mine{color:var(--amber);border-color:var(--amber);background:var(--amber-soft)}

.filters{display:grid;gap:6px;margin-bottom:7px}
.filters input,.filters select{background:var(--surface);border:1px solid var(--rule);
  border-radius:7px;padding:6px 9px;width:100%}
.filter-count{display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:10.5px;color:var(--muted);margin-bottom:7px}
#spot-list{display:grid;gap:5px;max-height:46vh;overflow-y:auto}
.sr{border:1px solid var(--rule);border-radius:7px;overflow:hidden}
.sr.is-open{border-color:var(--indigo)}
.sr-head{display:grid;gap:1px;width:100%;text-align:left;background:none;border:0;
  padding:7px 9px;cursor:pointer}
.sr-head:hover{background:var(--surface-2)}
.sr-name{font-size:12.5px;font-weight:700}
.sr-meta{font-family:var(--mono);font-size:10px;color:var(--muted)}
.sr-body{padding:0 9px 9px;display:grid;gap:6px}
.sr-why{font-size:12px}
.sr-note{font-size:11.5px;padding:6px 8px;border-radius:6px}
.sr-tip{background:var(--surface-2)}
.sr-warn{background:var(--vermilion-soft)}
.sr-season{background:var(--moss-soft)}
.sr-book{background:var(--amber-soft)}
.tip-tag{display:block;font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--muted);margin-bottom:2px}
.sr-acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* -------------------------------------------------------- map view */
.map-bar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:11px}
.map-bar select{background:var(--surface);border:1px solid var(--rule);border-radius:7px;padding:6px 9px}
.switch{display:flex;align-items:center;gap:7px;font-size:12.5px;cursor:pointer}
.map-status{font-family:var(--mono);font-size:11.5px;color:var(--muted);flex:1;min-width:200px}
.map-shell{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:14px;align-items:start}
@media (max-width:1000px){.map-shell{grid-template-columns:minmax(0,1fr)}}
#map-canvas{height:clamp(440px,74vh,860px);border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow);background:var(--surface-2);z-index:1}
.map-side{display:grid;gap:11px;min-width:0}
.legend{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:12px}
.legend h4{font-size:13px;margin-bottom:8px}
.leg{display:flex;align-items:center;gap:9px;font-size:12px;margin-bottom:5px}
.leg i{width:36px;height:10px;flex:none;border-radius:2px}
.leg-walk i{background:repeating-linear-gradient(90deg,var(--vermilion) 0 2px,transparent 2px 7px);height:4px}
.leg-train i{background:repeating-linear-gradient(90deg,var(--rail-dark) 0 6px,transparent 6px 9px);
  border-top:2px solid var(--rail-dark);border-bottom:2px solid var(--rail-dark);height:9px}
.leg-intercity i{background:repeating-linear-gradient(90deg,var(--indigo) 0 7px,transparent 7px 11px);
  border-top:2px solid var(--indigo);border-bottom:2px solid var(--indigo);height:10px}
.leg-car i{background:var(--road);border-top:2px solid var(--rail-dark);border-bottom:2px solid var(--rail-dark);height:9px}
.leg-ferry i{background:repeating-linear-gradient(90deg,#2E6F8E 0 8px,transparent 8px 14px);height:3px}
.legend-note{font-size:11px;color:var(--muted);margin-top:8px}
#map-rail{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:8px;display:grid;gap:3px;max-height:46vh;overflow-y:auto}
.rail-sum{font-family:var(--mono);font-size:11px;color:var(--muted);padding:2px 5px 6px}
.rail-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;
  border:0;border-radius:6px;padding:5px 6px;cursor:pointer}
.rail-item:hover{background:var(--surface-2)}
.rail-no{font-family:var(--mono);font-size:10px;width:19px;height:19px;flex:none;display:grid;
  place-items:center;border-radius:50%;background:var(--vermilion);color:var(--on-vermilion)}
.rail-main{flex:1;min-width:0;display:grid}
.rail-name{font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-meta{font-family:var(--mono);font-size:10px;color:var(--muted)}
.rail-warn{color:var(--vermilion);font-weight:900;flex:none}

/* Leaflet overrides */
.leaflet-container{font-family:var(--body);background:var(--surface-2)}
.pin-wrap{background:none;border:0}
.pin{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--vermilion);color:var(--on-vermilion);font-family:var(--mono);font-size:12px;
  border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.45)}
.pin-warn{background:#8A1A14;box-shadow:0 0 0 3px rgba(196,50,42,.4),0 1px 5px rgba(0,0,0,.45)}
.stop-tip-wrap{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--vermilion);
  border-radius:8px;box-shadow:var(--shadow);padding:0;color:var(--ink)}
.stop-tip-wrap::before{display:none}
.stip{padding:8px 10px;min-width:170px}
.stip-h{display:flex;gap:7px;align-items:baseline}
.stip-n{font-family:var(--mono);font-size:10px;background:var(--vermilion);color:var(--on-vermilion);
  border-radius:999px;padding:1px 6px}
.stip-name{font-weight:700;font-size:13px}
.stip-sub{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:1px}
.stip-rows{margin-top:6px;display:grid;gap:2px}
.stip-row{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--muted)}
.stip-v{font-family:var(--mono);color:var(--ink);text-align:right}
.stip-v em{color:var(--muted);font-style:normal}
.stip-warn{margin-top:5px;font-size:11.5px;color:var(--vermilion);font-weight:700}
.poi-pop{min-width:180px}
.poi-kind{display:inline-block;color:#fff;font-family:var(--mono);font-size:9.5px;
  text-transform:uppercase;letter-spacing:.08em;padding:2px 7px;border-radius:4px}
.poi-pop h4{font-size:15px;margin:6px 0 4px}
.poi-pop ul{margin:0;padding-left:16px;font-size:12px;color:var(--muted)}
.poi-link{display:inline-block;margin-top:6px;font-size:12px;color:var(--indigo)}
.poi-add{display:block;width:100%;margin-top:9px;background:var(--indigo);color:var(--on-indigo);
  border:0;border-radius:6px;padding:6px;cursor:pointer;font-size:12.5px;font-weight:600}
/* Hover card on a route line */
.leg-tip-wrap{background:var(--surface);border:1px solid var(--rule);border-radius:8px;
  box-shadow:var(--shadow);padding:0;color:var(--ink);white-space:normal}
.leg-tip-wrap::before{border-top-color:var(--rule)}
.legtip{padding:8px 10px;min-width:180px}
.legtip-h{display:flex;align-items:center;gap:7px;font-weight:700;font-size:13px}
.legtip-swatch{width:26px;height:9px;flex:none;border-radius:2px}
.legtip-walk{background:repeating-linear-gradient(90deg,var(--vermilion) 0 2px,transparent 2px 7px);height:4px}
.legtip-train{background:repeating-linear-gradient(90deg,var(--rail-dark) 0 5px,transparent 5px 8px);
  border-top:2px solid var(--rail-dark);border-bottom:2px solid var(--rail-dark)}
.legtip-intercity{background:repeating-linear-gradient(90deg,var(--indigo) 0 6px,transparent 6px 10px);
  border-top:2px solid var(--indigo);border-bottom:2px solid var(--indigo)}
.legtip-car{background:var(--road);border-top:2px solid var(--rail-dark);border-bottom:2px solid var(--rail-dark)}
.legtip-ferry{background:repeating-linear-gradient(90deg,#2E6F8E 0 7px,transparent 7px 12px);height:3px}
.legtip-route{font-size:11.5px;color:var(--muted);margin-top:3px}
.legtip-rows{display:flex;gap:14px;margin-top:6px}
.legtip-rows span{display:grid;font-family:var(--mono);font-size:12.5px}
.legtip-rows em{font-style:normal;font-family:var(--body);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted)}
.legtip-foot{font-size:11px;color:var(--muted);margin-top:6px;max-width:30ch}
.poi-local{font-size:12px;color:var(--muted);margin-top:-2px;margin-bottom:3px}

.leg-pop{min-width:190px}
.leg-kind{display:inline-block;font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.08em;padding:2px 7px;border-radius:4px;color:#fff;background:var(--rail-dark)}
.leg-kind-walk{background:var(--vermilion);color:var(--on-vermilion)}
.leg-kind-car{background:#3E3418}
.leg-kind-intercity{background:var(--indigo);color:var(--on-indigo)}
.leg-kind-ferry{background:#2E6F8E}
.leg-pop h4{font-size:14px;margin:6px 0 3px}
.leg-dist{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.leg-note{font-size:11.5px;color:var(--muted);margin-top:7px}
.leg-err{font-size:11.5px;color:var(--vermilion);margin-top:6px}
.leg-btn{display:block;width:100%;margin-top:9px;background:var(--indigo);color:var(--on-indigo);
  border:0;border-radius:6px;padding:7px;cursor:pointer;font-size:12.5px;font-weight:600}
.leg-btn[disabled]{opacity:.6;cursor:default}
.leaflet-popup-content-wrapper{background:var(--surface);color:var(--ink);border-radius:9px}
.leaflet-popup-tip{background:var(--surface)}
.leaflet-control-layers{background:var(--surface);color:var(--ink);border-radius:8px;
  border:1px solid var(--rule);font-size:12.5px}

/* ------------------------------------------------------ brief view */
.subnav{display:flex;gap:4px;flex-wrap:wrap;position:sticky;top:106px;z-index:20;
  background:var(--bg);padding-block:8px;margin-bottom:6px;border-bottom:1px solid var(--rule)}
.subnav button{background:var(--surface);border:1px solid var(--rule);border-radius:999px;
  padding:5px 13px;font-size:12.5px;cursor:pointer}
.subnav button:hover{border-color:var(--indigo);color:var(--indigo)}
.brief-sec{padding-block:26px;border-bottom:1px solid var(--rule);scroll-margin-top:160px}
.brief-sec:last-child{border-bottom:0}
.verdict{border-radius:var(--r);padding:16px 18px;margin-bottom:16px;border:1px solid}
.verdict h3{font-size:19px;margin-bottom:5px}
.verdict p{font-size:13.5px;max-width:72ch}
.verdict-yes{background:var(--moss-soft);border-color:var(--moss)}
.verdict-yes h3{color:var(--moss)}
.verdict-no{background:var(--indigo-soft);border-color:var(--indigo)}
.verdict-no h3{color:var(--indigo)}
.rail-sums{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:11px}
.rail-sums>div{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:11px 13px}
.rail-sums .k{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-weight:700}
.rail-sums .v{display:block;font-family:var(--mono);font-size:19px;margin-top:2px}
.rail-sums .sub{display:block;font-size:11px;color:var(--muted)}

#countdown{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cd{display:grid;grid-template-columns:200px minmax(0,1fr) 180px;gap:13px;align-items:start;
  background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--rule);
  border-radius:var(--r);padding:11px 13px}
@media (max-width:820px){.cd{grid-template-columns:minmax(0,1fr)}}
.cd-name{font-weight:700;font-size:13.5px}
.cd-src{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.cd-what{font-size:12.5px}
.cd-where{font-size:12px;color:var(--muted);margin-top:3px}
.cd-right{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.cd-pill{font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid var(--rule)}
.cd-by{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.cd-late{border-left-color:var(--vermilion)}
.cd-late .cd-pill{background:var(--vermilion);color:var(--on-vermilion);border-color:var(--vermilion)}
.cd-urgent{border-left-color:var(--vermilion)}
.cd-urgent .cd-pill{background:var(--vermilion-soft);color:var(--vermilion);border-color:var(--vermilion)}
.cd-soon{border-left-color:var(--amber)}
.cd-soon .cd-pill{background:var(--amber-soft);color:var(--amber);border-color:var(--amber)}
.cd-ok .cd-pill{color:var(--muted)}
.cd-done{opacity:.55}
.cd-done .cd-pill{background:var(--moss-soft);color:var(--moss);border-color:var(--moss)}
.season{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--rule);
  border-radius:var(--r);padding:12px 14px;margin-bottom:9px}
.season h5{font-size:14px;margin-bottom:4px}
.season p{font-size:12.5px;max-width:76ch}
.season-adv{color:var(--muted);margin-top:5px}
.season-reg{font-family:var(--mono);font-size:11px;color:var(--muted);font-weight:400}
.season-high{border-left-color:var(--vermilion);background:var(--vermilion-soft)}
.season-medium{border-left-color:var(--amber);background:var(--amber-soft)}
.season-low{border-left-color:var(--indigo)}
.season-good{border-left-color:var(--moss);background:var(--moss-soft)}

.form-row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.form-row input,.form-row select{background:var(--surface);border:1px solid var(--rule);
  border-radius:7px;padding:7px 9px;min-width:0}
#res-form input[name=title]{min-width:180px}
#vault-list,#spend-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.res{display:flex;gap:11px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r);padding:10px 13px}
.res-k{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--indigo);background:var(--indigo-soft);padding:3px 8px;border-radius:4px;flex:none}
.res-main{flex:1;min-width:0}
.res-t{font-weight:700;font-size:13.5px}
.res-meta{font-family:var(--mono);font-size:11px;color:var(--muted)}
.res-note{font-size:12px;color:var(--muted);margin-top:3px}
.spend{display:flex;gap:11px;align-items:center;background:var(--surface);border:1px solid var(--rule);
  border-radius:7px;padding:7px 11px;font-size:13px}
.spend>span:first-child{flex:1;min-width:0}
.spend.tot{background:var(--surface-2);font-weight:700}
.money-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:900px){.money-grid{grid-template-columns:minmax(0,1fr)}}
#know-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px;align-items:start}
.know{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:13px 15px;margin-bottom:8px}
.know h5{font-size:14px;margin-bottom:4px}
.know p{font-size:12.5px;max-width:70ch}
.know-tip{margin-top:7px;padding:7px 10px;background:var(--surface-2);border-radius:7px;color:var(--muted)}

#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:3000;
  background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:999px;
  font-size:12.5px;box-shadow:var(--shadow)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}