/* Ekinomics hybrid: the finance tracker's IBM Carbon system (tokens, square surfaces, Plex type, dark theme)
   with Ekinomics' own 駅 mark, warm price ramp, teal and pink accents, and Plex Serif headings. */
:root{color-scheme:light;
  --page:#f4f4f4;--surface:#ffffff;--field:#f4f4f4;--hover:#e8e8e8;--head:#e0e0e0;
  --ink:#161616;--ink-2:#525252;--muted:#6f6f6f;--line:#e0e0e0;--border:#8d8d8d;
  --accent:#d4245c;--accent-ink:#ffffff;--link:#087d79;--focus:#0f62fe;--up:#da1e28;--down:#0043ce;
  --water:#dde1e6;--land:#ffffff;--land-edge:#c6c6c6;--land-out:#ececec;--land-out-edge:#e0e0e0;
  --rail:#8d8d8d;--rail-hi:#087d79;--dot-ring:#ffffff;--dot-empty:#a8a8a8;--halo:#ffffff;--grid:#e0e0e0;--band:rgba(22,22,22,.05);
  --sans:"IBM Plex Sans","IBM Plex Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"IBM Plex Serif",Georgia,serif;--ja:"IBM Plex Sans JP","Hiragino Sans",sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
  --page:#161616;--surface:#262626;--field:#393939;--hover:#333333;--head:#393939;
  --ink:#f4f4f4;--ink-2:#c6c6c6;--muted:#8d8d8d;--line:#393939;--border:#6f6f6f;
  --accent:#ff5a8c;--accent-ink:#161616;--link:#3fb6b0;--focus:#78a9ff;--up:#ff8389;--down:#78a9ff;
  --water:#0e0e0e;--land:#262626;--land-edge:#393939;--land-out:#1c1c1c;--land-out-edge:#262626;
  --rail:#6f6f6f;--rail-hi:#3fb6b0;--dot-ring:#161616;--dot-empty:#525252;--halo:#161616;--grid:#393939;--band:rgba(244,244,244,.06)}}
:root[data-theme="dark"]{color-scheme:dark;
  --page:#161616;--surface:#262626;--field:#393939;--hover:#333333;--head:#393939;
  --ink:#f4f4f4;--ink-2:#c6c6c6;--muted:#8d8d8d;--line:#393939;--border:#6f6f6f;
  --accent:#ff5a8c;--accent-ink:#161616;--link:#3fb6b0;--focus:#78a9ff;--up:#ff8389;--down:#78a9ff;
  --water:#0e0e0e;--land:#262626;--land-edge:#393939;--land-out:#1c1c1c;--land-out-edge:#262626;
  --rail:#6f6f6f;--rail-hi:#3fb6b0;--dot-ring:#161616;--dot-empty:#525252;--halo:#161616;--grid:#393939;--band:rgba(244,244,244,.06)}

*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font:14px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
[lang="ja"]{font-family:var(--ja)}
a{color:var(--link)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.32px;margin:0;color:var(--ink-2)}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:0}
h1{font-size:28px;line-height:1.15;margin:2px 0 0}
h2{font-size:22px;line-height:1.2;margin:4px 0 8px}
h3{font-size:18px;margin:20px 0 6px}
button,select,input{font:inherit;border-radius:0}
button{cursor:pointer;color:var(--ink);background:transparent;border:1px solid var(--border);padding:7px 12px}
button:hover{background:var(--hover)}
:is(button,input,select,a):focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
[hidden]{display:none!important}

header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 32px;border-bottom:1px solid var(--line)}
.brand{display:flex;gap:14px;align-items:center}
.symbol{background:var(--ink);color:var(--page);font:600 30px/1 var(--ja);padding:9px 10px}
.headtools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;position:relative}
.withicon{display:inline-flex;align-items:center;gap:7px}
.toast{position:absolute;right:0;top:calc(100% + 8px);z-index:2000;background:var(--ink);color:var(--page);font-size:12px;padding:8px 12px;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis}
.intro{padding:14px 32px;display:flex;justify-content:space-between;gap:15px;align-items:center}
.intro p{font:400 19px var(--serif);margin:0}
.intro span{font-size:12px;color:var(--muted)}

.seg{display:inline-flex;border:1px solid var(--border);background:var(--surface)}
.seg button{border:0;padding:6px 12px;font-size:13px;font-weight:500;color:var(--ink-2)}
.seg button+button{border-left:1px solid var(--border)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--page)}
.presets{display:flex;align-items:center;gap:8px;padding:10px 32px;border-top:1px solid var(--line);overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.presets>span{font-size:12px;font-weight:600;color:var(--ink-2);margin-right:4px}
.presets button{border:0;background:var(--surface);color:var(--ink-2);font-size:13px;font-weight:500;padding:6px 14px}
.presets button:hover{color:var(--ink)}
.presets button[aria-pressed="true"]{background:var(--ink);color:var(--page)}

main{display:grid;grid-template-columns:minmax(0,1fr) 340px;border-top:1px solid var(--line)}
aside{border-left:1px solid var(--line);padding:22px;background:var(--surface)}
.toolbar{display:flex;gap:14px;padding:16px 24px;background:var(--surface);flex-wrap:wrap}
label,.fieldlabel{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--ink-2);letter-spacing:.32px}
.field{display:flex;flex-direction:column;gap:5px}
select{background:var(--field);color:var(--ink);border:0;border-bottom:1px solid var(--border);padding:8px 28px 8px 10px;max-width:250px}
.linefilter{flex:1}
.linefilter select{width:100%}

.mapwrap{position:relative;height:540px;background:var(--water)}
#map{height:100%;background:var(--water)}
.mapwrap:fullscreen{height:100vh}
.mapheading{position:absolute;z-index:500;top:16px;left:16px;background:var(--surface);padding:12px 16px;pointer-events:none;display:flex;flex-direction:column;min-width:180px}
.mapheading strong{font:600 28px/1.2 var(--serif)}
.mapheading small{color:var(--muted);margin-top:4px;font-size:12px}
.mapreset{position:absolute;right:12px;bottom:36px;z-index:500;background:var(--surface);font-size:12px}
.mapwrap .maptool{position:absolute;right:10px;top:84px;z-index:500;background:var(--surface);border:1px solid var(--border)}
.legend{position:absolute;bottom:25px;left:16px;z-index:500;background:var(--surface);padding:12px 14px;min-width:240px;font-size:11px;color:var(--ink)}
.steps{display:grid;gap:2px;margin:7px 0 3px}
.steps i{height:9px}
.stepLabels{display:grid;font-variant-numeric:tabular-nums}
.stepLabels span{transform:translateX(-50%);white-space:nowrap;text-align:center}
.legend small{display:block;color:var(--muted);margin-top:6px}
.nodata{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--dot-empty);margin:0 6px 0 2px;vertical-align:1px}

.timebar{padding:18px 24px 12px;border-bottom:1px solid var(--line);background:var(--surface)}
.timebar label{flex-direction:row;justify-content:space-between;font-size:13px}
.timebar strong{color:var(--accent);font-weight:600}
input[type=range]{width:100%;accent-color:var(--accent);margin:12px 0 0}
.ticks{display:flex;justify-content:space-between;color:var(--muted);font-size:11px}
.viewbar{display:flex;align-items:flex-end;gap:16px;padding:15px 24px;border-bottom:1px solid var(--line);background:var(--surface)}
.viewbar p{max-width:300px;font-size:12px;color:var(--muted);margin:0 0 0 auto}

.tools{display:flex;align-items:center;gap:2px;position:relative}
.tool{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;color:var(--ink-2);position:relative}
.tool[aria-pressed="true"]{background:var(--hover);color:var(--ink)}
.tool[data-tip]:hover::after{content:attr(data-tip);position:absolute;top:calc(100% + 4px);right:0;background:var(--ink);color:var(--page);font-size:12px;line-height:16px;padding:4px 8px;white-space:nowrap;pointer-events:none;z-index:1000}
.tool[aria-expanded="true"]::after{display:none}
.textbtn{font-size:12px;padding:5px 9px}
.menu{position:absolute;top:calc(100% + 2px);right:0;min-width:180px;background:var(--surface);border:1px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,.2);padding:4px 0;z-index:1100}
.menu-item{display:block;width:100%;text-align:left;font-size:13px;color:var(--ink);background:none;border:0;padding:8px 16px;white-space:nowrap}
.menu-item:hover{background:var(--hover)}
.chartbar{display:flex;align-items:center;justify-content:space-between;margin:16px 0 0}
.chartbar b{font-size:12px;font-weight:600;color:var(--ink-2)}
.chart-table{overflow-x:auto;margin:8px 0}
.chart-table table{font-size:12px}
.chart-table :is(td,th){padding:6px 8px}
:fullscreen{background:var(--surface);padding:24px;overflow:auto}

.explore{padding:25px 24px;background:var(--surface)}
.sectionhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tablewrap{overflow:auto}
table{border-collapse:collapse;width:100%;font-size:13px}
td,th{text-align:right;border-bottom:1px solid var(--line);padding:10px 8px;white-space:nowrap;font-variant-numeric:tabular-nums}
th{background:var(--head);color:var(--ink);font-size:12px;font-weight:600;padding:0}
th button{border:0;width:100%;text-align:inherit;padding:9px 8px;font-weight:600;color:inherit;display:block}
th .arrow{display:inline-block;width:12px;margin-left:4px;color:var(--muted)}
th[aria-sort] .arrow{color:var(--ink)}
td:first-child,th:first-child{text-align:left;white-space:normal;min-width:120px}
td:nth-child(2),th:nth-child(2){text-align:left}
td:nth-child(2){color:var(--muted)}
td button{border:0;padding:0;color:var(--link);font-weight:500;text-align:left}
td button:hover{text-decoration:underline;background:transparent}
td button .ja{display:block;font-size:11px;font-weight:400;color:var(--muted)}
.up{color:var(--up)}
.down{color:var(--down)}

.search{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:22px}
.search input{width:100%;padding:11px;border:0;border-bottom:1px solid var(--border);background:var(--field);color:var(--ink);margin-top:6px}
#results{max-height:220px;overflow:auto}
#results button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);font-size:13px}
#results small{float:right;color:var(--muted)}
#results .ja,#compareChips .ja,.leaflet-tooltip .ja{color:var(--muted);margin-left:3px}
.stationtitle{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:4px 0 8px}
.stationtitle .en{font:600 29px/1.15 var(--serif)}
.stationtitle .ja{font-size:24px;font-weight:600}
.linechips{color:var(--muted);font-size:12px;line-height:1.5;margin-bottom:20px;max-height:112px;overflow:auto}
.linechips .ja{margin-left:3px}
.bigprice{font:600 38px/1.1 var(--serif);margin:8px 0 0;font-variant-numeric:tabular-nums}
.bigprice small{font:12px var(--sans);color:var(--muted)}
.pricecaption{color:var(--muted);font-size:12px;margin:4px 0 14px}
.growth{font-size:13px;padding:9px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin:18px 0}
.statgrid div{background:var(--surface);padding:8px 0}
.statgrid span{font-size:12px;color:var(--ink-2);display:block}
.statgrid strong{font-size:18px;font-weight:600}
.muted{font-size:12px;color:var(--muted)}
.chart{width:100%;height:auto;display:block;margin:8px 0}
.chart text{fill:var(--muted);font:9px var(--sans)}
.chart .grid{stroke:var(--grid);stroke-width:.7}
.chart .series{fill:none;stroke-width:2}
.chart circle{stroke:var(--surface);stroke-width:1}
.chart .current{fill:var(--band)}
.chart .evline{stroke:var(--border);stroke-width:.8;stroke-dasharray:2 3}
.chart .evtag{fill:var(--ink)}
.chart .evtxt{fill:var(--page);font:600 8px var(--sans)}
.events{font-size:12px;color:var(--muted);line-height:1.7;margin:2px 0 8px}
.events .ev{display:inline-block;min-width:16px;padding:0 4px;margin-right:4px;background:var(--ink);color:var(--page);font-size:10px;font-weight:600;text-align:center;line-height:16px}
.events a{color:var(--muted)}
.comparebutton{width:100%;background:var(--accent);color:var(--accent-ink);border:0;margin:8px 0;padding:12px 16px;text-align:left;font-weight:500}
.comparebutton:hover{background:var(--accent);filter:brightness(1.08)}
.comparison{border-top:1px solid var(--line);padding-top:20px;margin-top:22px}
.comparison h2{font-size:19px}
#compareChips{display:flex;gap:6px;flex-wrap:wrap}
#compareChips button{border:0;border-left:4px solid var(--link);background:var(--field);font-size:12px;padding:6px 8px}

.leaflet-labels-pane{z-index:450;pointer-events:none}
.maplabel{position:absolute;white-space:nowrap;line-height:12px;color:var(--ink);text-shadow:0 0 2px var(--halo),0 0 2px var(--halo),0 0 3px var(--halo),0 0 4px var(--halo)}
.maplabel b,.maplabel span{display:block}
.maplabel b{font:600 11px/12px "IBM Plex Sans",sans-serif}
.maplabel span{font:10px/12px var(--ja);color:var(--ink-2)}
.maplabel.faint b,.maplabel.faint span{color:var(--muted);font-weight:400}
.maplabel.selected b{font-size:12px}
.maplabel.above{text-align:center}
.maplabel.place,.maplabel.pref{text-align:center;color:var(--ink-2)}
.maplabel.place b{font:italic 400 11px/12px var(--serif)}
.maplabel.pref b{font:600 13px/15px var(--serif);letter-spacing:2.5px}
.maplabel.pref span{letter-spacing:2px;line-height:13px}
.leaflet-container{font-family:var(--sans)}
.leaflet-tooltip{font:12px/1.5 var(--sans);background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:0;box-shadow:none}
.leaflet-tooltip-top:before{border-top-color:var(--border)}
.leaflet-control-attribution{font-size:9px!important;background:var(--surface)!important;color:var(--muted)}
.leaflet-bar{border:1px solid var(--border)!important;border-radius:0!important;box-shadow:none!important}
.leaflet-bar a{background:var(--surface)!important;color:var(--ink)!important;border-radius:0!important;border-color:var(--line)!important}

footer{padding:20px 32px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between;font-size:12px;color:var(--muted)}
.credit{flex-basis:100%;margin:6px 0 0;line-height:1.6}
.credit span{display:block}
.credit a{color:inherit}
dialog{border:0;padding:26px;max-width:800px;max-height:85vh;background:var(--surface);color:var(--ink);box-shadow:0 10px 50px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(22,22,22,.5)}
.dialoghead{display:flex;align-items:center;justify-content:space-between;gap:20px}
dialog p{font-size:14px}
#error{padding:18px;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));background:#fff1f1;color:#a2191f;position:fixed;bottom:0;z-index:10000;width:100%}

@media(pointer:coarse){td button{display:block;width:100%;min-height:44px;padding:6px 0}#results button{padding:12px 10px}#compareChips button,.textbtn,.mapreset,.seg button{min-height:40px}.tool{width:40px;height:40px}input[type=range]{height:36px}.leaflet-touch .leaflet-bar a{width:40px;height:40px;line-height:40px}}
@media(min-width:1500px){main{grid-template-columns:minmax(0,1fr) 400px}.mapwrap{height:610px}}
@media(max-width:1000px){main{grid-template-columns:minmax(0,1fr) 300px}.toolbar{gap:9px;padding:12px}.linefilter{flex:initial}.toolbar select{max-width:170px}.viewbar{flex-wrap:wrap}.viewbar p{margin:0;max-width:none}.intro{align-items:flex-start;flex-direction:column;gap:4px}}
@media(max-width:720px){header{padding:16px}h1{font-size:23px}.symbol{font-size:24px}.headtools{width:100%}.withicon span{display:none}.toast{left:0;right:auto}
.intro{padding:12px 16px}.intro p{font-size:17px}.presets{padding:10px 16px}
main{display:flex;flex-direction:column}.workspace{display:contents}.toolbar{order:1}.mapwrap{order:2}.timebar{order:3}.viewbar{order:4}aside{order:5}.explore{order:6}
.toolbar{display:grid;grid-template-columns:1fr 1fr;padding:12px 16px}.toolbar select{max-width:none;width:100%}
.mapwrap{height:min(560px,68vh);min-height:420px}.mapheading{top:12px;left:12px;padding:9px 12px;min-width:150px}.mapheading strong{font-size:24px}
.legend{left:12px;bottom:28px;min-width:210px;padding:10px 12px;font-size:10px}
aside{border-left:0;border-top:1px solid var(--line);padding:22px 16px}.explore{padding:20px 16px}.sectionhead h2{font-size:20px}
.timebar,.viewbar{padding:14px 16px}footer{padding:18px 16px;gap:12px;flex-direction:column}dialog{max-width:96vw;padding:16px}}