/* Japan 2026: dark tokens (spec 1.2), layout (spec 3), components (spec 4) */
:root{
  --land:#323941; --sea:#1a2530; --surface:#1f2429; --fg:#ebe9e4; --muted:#9aa3ad; --line:#353c44;
  --accent:#ff4d6a; --faint:#8a4a58; --edge:#5d6672; --amber:#e0a93a; --amber-ink:#231800; --focus:#f2f0eb;
  --sw-hsr:#c3c9cf; --sw-rail:#59626c; --sw-road:#46505a; --sw-river:#2a3946; --sw-border:#4a535d;
  --font:"Segoe UI",system-ui,-apple-system,sans-serif;
  --barh:80px; --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px); --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px);
  color-scheme:dark;
}
html,body{height:100%;margin:0;overflow:hidden;background:var(--land)}
body{color:var(--fg);font-family:var(--font);-webkit-tap-highlight-color:transparent}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

#map{position:fixed;inset:0;background:var(--land)}
#map .maplibregl-canvas{opacity:0;transition:opacity .25s ease}
#map.ready .maplibregl-canvas{opacity:1}
.maplibregl-ctrl-top-left{top:var(--st);left:var(--sl)}
.maplibregl-ctrl-top-left .maplibregl-ctrl{margin:8px 0 0 8px}
.maplibregl-ctrl-group{background:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.3);border-radius:8px}
.maplibregl-ctrl-group button{width:30px;height:30px}
.maplibregl-ctrl-group button+button{border-top:1px solid var(--line)}
.maplibregl-ctrl button .maplibregl-ctrl-icon{filter:invert(.92)}
.maplibregl-ctrl-bottom-right{bottom:calc(var(--barh) + var(--sb));right:var(--sr)}
.maplibregl-ctrl-attrib{background:color-mix(in srgb,var(--surface) 85%,transparent)!important;color:var(--muted);font-size:11px}
.maplibregl-ctrl-attrib a{color:var(--muted)}
.maplibregl-ctrl-attrib.maplibregl-compact{min-height:24px;margin:0 8px 8px 0!important}
.maplibregl-ctrl-attrib-button{filter:invert(.85);width:24px;height:24px}

/* Chips: title, links, Key */
.corner{position:fixed;z-index:20;top:calc(8px + var(--st));left:calc(48px + var(--sl));display:flex;align-items:center;gap:4px}
.chip,.chip-face{background:var(--surface);color:var(--fg);font:600 13px/1 var(--font);border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.chip.title{height:32px;display:flex;align-items:center;padding:0 10px;opacity:.92;pointer-events:none}
.icon-btn{width:44px;height:44px;margin:-6px -6px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center;border-radius:10px}
.icon-btn .chip-face{width:32px;height:32px;display:grid;place-items:center;font-size:14px;opacity:.92}
.icon-btn:hover .chip-face,.icon-btn[aria-expanded="true"] .chip-face{opacity:1}
.links{position:relative;margin-left:4px}
.links-menu{position:absolute;top:calc(100% + 4px);left:0;min-width:200px;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.35);padding:4px;display:grid}
.links-menu a,.links-menu button{display:flex;align-items:center;min-height:44px;box-sizing:border-box;color:var(--fg);text-decoration:none;font:13px/1.2 var(--font);padding:0 10px;border-radius:6px;white-space:nowrap;background:none;border:0;text-align:left;cursor:pointer}
.links-menu a:hover,.links-menu button:hover{background:color-mix(in srgb,var(--fg) 7%,transparent)}
.links-menu hr{border:0;border-top:1px solid var(--line);margin:4px 2px}

.legend{position:fixed;z-index:20;left:calc(8px + var(--sl));bottom:calc(var(--barh) + 8px + var(--sb));color:var(--fg);font-size:12px}
.legend summary{list-style:none;cursor:pointer;display:grid;place-items:center;min-width:44px;min-height:44px;margin:-6px}
.legend summary::-webkit-details-marker{display:none}
.legend summary .chip-face{height:32px;padding:0 10px;display:flex;align-items:center;gap:4px;color:var(--muted);opacity:.92}
.legend summary .chip-face::before{content:"\25B8";font-size:10px}
.legend[open] summary .chip-face::before{content:"\25BE"}
.key-panel{background:var(--surface);border-radius:8px;margin-top:8px;box-shadow:0 2px 10px rgba(0,0,0,.35);width:200px}
.legend ul{list-style:none;margin:0;padding:8px 10px 6px;display:grid;gap:5px}
.legend li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.legend .switches{border-top:1px solid var(--line);padding:2px 4px 4px;display:grid}
.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 6px;background:none;border:0;color:var(--fg);font:12px var(--font);cursor:pointer;border-radius:6px}
.switch i{width:30px;height:18px;border-radius:9px;background:var(--line);position:relative;transition:background .15s}
.switch i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:transform .15s,background .15s}
.switch[aria-checked="true"] i{background:color-mix(in srgb,var(--accent) 55%,var(--line))}
.switch[aria-checked="true"] i::after{transform:translateX(12px);background:var(--fg)}
.sw{stroke-width:2;fill:none}
.sw.now{stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;opacity:.9}.sw.done{stroke:var(--accent);stroke-width:2.5;opacity:.5}
.sw.hsr{stroke:var(--sw-hsr);stroke-width:1.6;opacity:.7}.sw.rail{stroke:var(--sw-rail);stroke-width:1.4}.sw.road{stroke:var(--sw-road);stroke-width:2}
.sw.river{stroke:var(--sw-river);stroke-width:2}.sw.border{stroke:var(--sw-border);stroke-width:1.2}

.status-chip{position:fixed;z-index:21;top:calc(56px + var(--st));left:50%;transform:translateX(-50%);background:var(--surface);color:var(--muted);font:12px/1.3 var(--font);padding:7px 12px;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.3);max-width:calc(100vw - 32px);box-sizing:border-box;text-align:center}
.hint{position:fixed;z-index:15;left:50%;bottom:calc(var(--barh) + 12px + var(--sb));transform:translateX(-50%);height:32px;display:flex;align-items:center;padding:0 14px;border-radius:999px;background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--muted);font:12px var(--font);white-space:nowrap;opacity:0;transition:opacity .3s ease;pointer-events:none}
.hint.on{opacity:1}

/* Card */
.card{position:fixed;z-index:10;left:0;top:0;box-sizing:border-box;width:320px;max-height:46svh;overflow:hidden;
  background:var(--surface);border-radius:10px;padding:12px 14px;box-shadow:0 6px 20px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.06);
  display:grid;gap:4px;opacity:1;transition:opacity .2s cubic-bezier(.2,.8,.2,1),translate .2s cubic-bezier(.2,.8,.2,1);translate:0 0}
.card.moving{opacity:0;pointer-events:none;transition:opacity .12s ease-in;translate:0 6px}
.card .meta{display:flex;align-items:center;gap:8px;font:500 12px/1.3 var(--font);color:var(--accent);font-variant-numeric:tabular-nums}
.card .count{color:var(--muted);margin-left:auto;white-space:nowrap}
.card .tag{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;border:1px solid currentColor;border-radius:3px;padding:0 4px;color:var(--muted);line-height:1.4}
.card h2{margin:0;font-size:16px;line-height:1.3;font-weight:650;text-wrap:balance}
.card p{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card p.todo{color:var(--fg);font-size:13px}
.todo-tag{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--amber-ink);background:var(--amber);border-radius:3px;padding:1px 5px;margin-right:4px;vertical-align:1px}
.card .links{display:flex;align-items:center;gap:4px 10px;flex-wrap:wrap;margin:4px 0 -8px;font:600 12.5px/1 var(--font);color:var(--muted)}
.card .links a{padding:8px 0;color:var(--muted);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.card .links a:hover{color:var(--fg);text-decoration-color:var(--fg)}
.card .links a.nav-btn{flex:none;text-decoration:none;color:var(--fg);padding:8px 0;position:relative}
.card .links a.nav-btn span{display:inline-block;padding:5px 9px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--fg) 5%,transparent)}
.card .links a.nav-btn:hover span{border-color:var(--accent)}
.card .thumb{position:relative;margin:8px -14px -12px;border-radius:0 0 10px 10px;overflow:hidden;aspect-ratio:16/9;background:var(--line)}
.card .thumb img{display:block;width:100%;height:100%;object-fit:cover}
.card .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 60%,rgba(0,0,0,.55));pointer-events:none}
.card .thumb .credit{position:absolute;right:6px;bottom:4px;z-index:1;font-size:9px;color:rgba(255,255,255,.85);text-decoration:none;max-width:75%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.compact .thumb{display:none}
.card.compact .links{margin-bottom:-8px}
@media (max-width:430px){.card{width:min(296px,calc(100vw - 32px))}.card .thumb{aspect-ratio:21/9}}
.leader{position:fixed;z-index:9;left:0;top:0;width:100vw;height:100vh;pointer-events:none;overflow:visible;opacity:1;transition:opacity .12s ease}
.leader.moving{opacity:0;transition:opacity .12s ease-in}
.leader .lo{stroke:var(--edge);stroke-width:4;stroke-linecap:round}
.leader .li{stroke:var(--surface);stroke-width:2;stroke-linecap:round}
.leader .ld{fill:var(--surface);stroke:var(--edge);stroke-width:1}

/* Avatar buttons over the map stacks (the stacks themselves are drawn by the map) */
.av-btns{position:fixed;inset:0;z-index:8;pointer-events:none}
.av-btn{position:absolute;left:0;top:0;min-width:44px;min-height:44px;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;border-radius:12px}
.ptip{position:fixed;left:0;top:0;z-index:30;max-width:240px;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:12px;line-height:1.4;box-shadow:0 4px 12px rgba(0,0,0,.3);pointer-events:none}
.ptip b{font-weight:600}

/* Timeline bar */
.bar{position:fixed;z-index:20;left:0;right:0;bottom:0;height:calc(var(--barh) + var(--sb));box-sizing:border-box;
  padding:0 max(8px,var(--sr)) var(--sb) max(8px,var(--sl));background:var(--surface);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:6px}
.nav{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--fg);font:600 20px/1 var(--font);cursor:pointer;display:grid;place-items:center;padding:0}
.nav:disabled{opacity:.35;cursor:default}
.nav:not(:disabled):hover{border-color:var(--accent)}
.track{flex:1 1 auto;max-width:1100px;min-width:0;display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 24px;scroll-padding:0 24px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.track::-webkit-scrollbar{display:none}
.day{flex:1 0 auto;display:grid;gap:1px;justify-items:center;padding:2px 2px 4px;border-radius:12px;background:color-mix(in srgb,var(--fg) 4%,transparent);border:1px solid transparent;transition:background .2s,border-color .2s}
.day.alt{background:color-mix(in srgb,var(--fg) 7%,transparent)}
.day.now{background:color-mix(in srgb,var(--accent) 10%,transparent);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.day .row{width:100%;display:flex;position:relative}
.day .row::before{content:"";position:absolute;left:22px;right:22px;top:21px;height:2px;background:var(--line)}
.day .date{font:600 11.5px/1.2 var(--font);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.day.now .date{color:var(--fg)}
.dot{position:relative;flex:1 0 52px;min-width:52px;min-height:44px;background:none;border:0;padding:0;cursor:pointer;display:grid;justify-items:center;align-content:start;color:var(--muted);font:11px/1.2 var(--font);border-radius:8px}
.dot i{font-style:normal;margin-top:7px;width:30px;height:30px;border-radius:50%;background:var(--surface);border:2px solid var(--line);box-sizing:border-box;display:grid;place-items:center;font-size:15px;line-height:1}
.dot i b{opacity:.6;font-weight:400}
.dot.done i{border-color:var(--faint)}.dot.done i b{opacity:.85}
.dot.on i{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}.dot.on i b{opacity:1}
.dot .t{font-size:11px;line-height:1.2;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;margin-top:2px}
.dot.on .t{color:var(--fg);font-weight:600}

/* Phone: zoom buttons hidden on touch, title at the corner, Key top-right */
@media (pointer:coarse){.maplibregl-ctrl-top-left{display:none}.corner{left:calc(8px + var(--sl))}}
@media (max-width:430px){
  .legend{left:auto;right:calc(8px + var(--sr));bottom:auto;top:calc(8px + var(--st))}
  .legend .key-panel{position:absolute;right:0;top:38px}
}
@media (min-width:431px){.bar .track{max-width:1100px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.track{scroll-behavior:auto}}
/* 44 px hit areas for the attribution button and the Maps button (visuals unchanged) */
.maplibregl-ctrl-attrib-button{position:relative}
.maplibregl-ctrl-attrib-button::after{content:"";position:absolute;inset:-10px}
.card .links a.nav-btn{min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center;padding:0}