/* layout: header strip on top, live map on the left, event rail on the right; stacks on phones */
:root{
  --bg:#eef1f4; --panel:#ffffff; --ink:#16202b; --muted:#5d6b7a; --line:#d6dce3; --hover:#f2f5f8;
  --accent:#c8322b; --ok:#2a9d64;
  --f-display:"Noto Serif SC","Songti SC",serif;
  --f-body:"Noto Sans SC","PingFang SC","Hiragino Sans",system-ui,sans-serif;
  --f-data:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0d131a;--panel:#141c25;--ink:#e5ecf2;--muted:#8c9bac;--line:#253140;--hover:#1b2531;--accent:#ff5d50;--ok:#3cc483;color-scheme:dark}
  .basemap-invert .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.85)}
}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:14px/1.5 var(--f-body)}
button{font:inherit;color:inherit}
.app{display:grid;grid-template-rows:auto minmax(0,1fr);height:100%}
header{display:flex;align-items:baseline;gap:6px 16px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--panel)}
h1{font:700 22px/1.2 var(--f-display);margin:0;letter-spacing:.04em}
.sub{color:var(--muted);font-size:13px}
.status{margin-left:auto;display:flex;align-items:center;gap:8px;font:12px var(--f-data);color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.dot.err{background:var(--accent)}
.status button{border:1px solid var(--line);background:transparent;border-radius:6px;padding:2px 10px;cursor:pointer;font-size:12px}
.main{display:grid;grid-template-columns:minmax(0,1fr) 380px;min-height:0}
#map{height:100%;min-height:0;background:var(--bg)}
aside{border-left:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;min-height:0}
.lbl{font-size:12px;color:var(--muted);letter-spacing:.06em}
/* controls: one grid for every row so labels and controls line up */
.controls{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 14px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.row,.map-settings{display:contents}
.row-top>.lbl,.row-top>.lbl-stack{align-self:start;padding-top:3px}
.lbl-stack{display:flex;flex-direction:column;gap:1px}
.lbl-status{font-size:12px;color:var(--ink)}
/* segmented control: one bordered strip, the pressed option filled */
.seg{display:inline-flex;flex-wrap:wrap;justify-self:start;max-width:100%;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--panel)}
.seg button{font-size:13px;line-height:1.5;padding:3px 9px;border:0;border-left:1px solid var(--line);background:transparent;cursor:pointer;white-space:nowrap}
.seg button:first-child{border-left:0}
.seg button:hover{background:var(--hover)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--panel)}
.seg button:disabled{opacity:.4;cursor:not-allowed;background:transparent}
.actions{display:flex;flex-wrap:wrap;gap:6px}
.actions button{font-size:13px;line-height:1.5;padding:3px 10px;border:1px solid var(--line);background:transparent;border-radius:7px;cursor:pointer}
.actions button:hover{background:var(--hover)}
.actions button[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.layers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 12px}
.check{display:flex;align-items:center;gap:6px;font-size:13px;line-height:1.35;cursor:pointer;min-width:0}
.check input{margin:0;flex:none}
.form-note{grid-column:1/-1;font-size:12px;color:var(--muted)}
/* "map settings" divider that folds the map rows */
.section-toggle{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:2px -16px 0;padding:9px 16px 1px;border:0;border-top:1px solid var(--line);background:none;cursor:pointer;font-size:12px;color:var(--muted);letter-spacing:.06em;text-align:left}
.section-toggle:hover{color:var(--ink)}
.section-note{margin-left:auto;letter-spacing:0;color:var(--muted)}
.chev{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:-3px 2px 0;transition:transform .15s}
.section-toggle[aria-expanded="false"] .chev{transform:rotate(-45deg);margin-top:0}
@media (prefers-reduced-motion:reduce){.chev{transition:none}}
button:focus-visible,input:focus-visible,#list li:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.stat{background:var(--panel);padding:10px 16px;min-width:0}
.stat b{display:block;font:600 22px/1.25 var(--f-data);font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#list{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;min-height:0}
#list li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 16px;border-bottom:1px solid var(--line);cursor:pointer}
#list li:hover{background:var(--hover)}
#list li.fresh .place::after{content:"新";margin-left:6px;font-size:11px;color:var(--panel);background:var(--accent);padding:0 5px;border-radius:4px;vertical-align:2px}
.chip{width:40px;height:40px;border-radius:6px;display:grid;place-items:center;font:700 14px var(--f-body);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.place{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta{font:12px var(--f-data);color:var(--muted);font-variant-numeric:tabular-nums}
.mag{font:600 15px var(--f-data);text-align:right;font-variant-numeric:tabular-nums}
.mag small{display:block;font-weight:400;font-size:11px;color:var(--muted)}
.empty{padding:24px 16px;color:var(--muted)}
.foot{padding:10px 16px;font-size:11px;color:var(--muted);border-top:1px solid var(--line)}
.foot a{color:inherit}
.legend{background:var(--panel);color:var(--ink);padding:8px 10px;border-radius:8px;border:1px solid var(--line);font:12px var(--f-body)}
.scale{display:flex;gap:2px;margin-top:4px}
.scale i{width:28px;height:18px;display:grid;place-items:center;font-style:normal;font-size:11px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--panel);color:var(--ink)}
.leaflet-popup-content{font:13px/1.6 var(--f-body);margin:10px 14px}
.leaflet-popup-content b{font-size:14px}
.leaflet-container a.leaflet-popup-close-button{color:var(--muted)}
.leaflet-control-attribution{font-size:10px}
.pulse{width:18px;height:18px;margin:-1px 0 0 -1px;border-radius:50%;border:2px solid var(--accent);animation:pulse 1.8s ease-out infinite;box-sizing:border-box}
@keyframes pulse{from{transform:scale(.7);opacity:1}to{transform:scale(3.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none;transform:scale(1.6)}}
.home{width:12px;height:12px;background:var(--ink);border:2px solid var(--panel);transform:rotate(45deg);box-sizing:border-box}
.home-label{font:600 12px var(--f-body);color:var(--ink);text-shadow:0 0 3px var(--panel),0 0 3px var(--panel);white-space:nowrap}
@media (max-width:860px){
  .app{height:auto;display:block}
  header{padding:12px 16px}
  .status{margin-left:0;width:100%}
  .main{display:block}
  #map{height:58vh}
  aside{border-left:0;border-top:1px solid var(--line)}
  #list{overflow:visible}
}

/* ---- earthquake detail view ---- */
.overview{display:flex;flex-direction:column;flex:1;min-height:0}
.detail{flex:1;min-height:0;overflow-y:auto}
.detail-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--line)}
.detail-bar button{font-size:13px;padding:3px 10px;border:1px solid var(--line);background:transparent;border-radius:6px;cursor:pointer}
.detail-bar button:hover{background:var(--hover)}
.detail-top{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.chip.big{width:56px;height:56px;font-size:18px}
.detail h2{font:700 19px/1.3 var(--f-display);margin:0;text-wrap:balance}
.facts{font:12px/1.7 var(--f-data);color:var(--muted);font-variant-numeric:tabular-nums}
.note{padding:10px 16px;font-size:13px;border-bottom:1px solid var(--line);white-space:pre-line}
.note.mine{background:var(--hover)}
.note .lbl{display:block;margin-bottom:2px}
.groups-title{padding:12px 16px 4px}
.group{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start;padding:8px 16px;border-bottom:1px solid var(--line)}
.group .chip{width:44px;height:28px;font-size:13px}
.cities{font-size:13px;line-height:1.75;min-width:0}
.cities .pref{color:var(--muted);margin-right:4px}
.cities summary{cursor:pointer;color:var(--muted)}
.cities summary:hover{color:var(--ink)}
.epi{position:relative;width:24px;height:24px}
.epi::before,.epi::after{content:"";position:absolute;left:50%;top:50%;width:24px;height:5px;background:#d7261e;box-shadow:0 0 0 1.5px #fff;border-radius:1px}
.epi::before{transform:translate(-50%,-50%) rotate(45deg)}
.epi::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* ---- languages ---- */
:root:lang(ja){--f-display:"Noto Serif JP","Hiragino Mincho ProN",serif;--f-body:"Noto Sans JP","Hiragino Sans",system-ui,sans-serif}
.status{flex-wrap:wrap}
.status #status{white-space:nowrap}
.status .lang{margin-left:4px;flex-wrap:nowrap}
.status .lang button{font-family:var(--f-body);font-size:12px;padding:2px 8px;border-radius:0}

/* ---- plate boundaries ---- */
.plate-label,.trench-label{white-space:nowrap;pointer-events:none;text-shadow:0 0 3px var(--panel),0 0 3px var(--panel),0 0 3px var(--panel)}
.plate-label{font:600 13px/1 var(--f-body);color:var(--ink);opacity:.75;letter-spacing:.06em}
.trench-label{font:italic 11px/1 var(--f-body);color:#9a3a22}
@media (prefers-color-scheme:dark){.trench-label{color:#ff9a7a}}
.legend .key{margin-top:6px;color:var(--muted);max-width:280px}

/* ---- extra map layers ---- */
.segment-label{white-space:nowrap;pointer-events:none;font:600 12px/1.35 var(--f-body);color:var(--ink);text-shadow:0 0 3px var(--panel),0 0 3px var(--panel),0 0 3px var(--panel)}
.hist{display:flex;align-items:center;gap:4px;white-space:nowrap}
.hist-dot{flex:none;width:12px;height:12px;border-radius:2px;transform:rotate(45deg);background:#fff;border:2.5px solid #5b2a86;box-sizing:border-box}
.hist-year{font:600 11px/1 var(--f-data);color:#5b2a86;text-shadow:0 0 3px #fff,0 0 3px #fff}
@media (prefers-color-scheme:dark){.hist-dot{border-color:#c9a7ff;background:#1b1430}.hist-year{color:#d9c2ff;text-shadow:0 0 3px #000,0 0 3px #000}}
.hist-note{margin-top:6px;line-height:1.6}
.hist-src{margin-top:4px;font-size:11px;color:var(--muted)}

/* ---- charts: aftershock M–T diagram and depth profile ---- */
.chart{display:block;width:100%;height:auto;font:10px var(--f-data);margin-top:6px}
.chart text{fill:var(--muted)}
.chart .grid{stroke:var(--line);stroke-width:.6}
.chart .axis{stroke:var(--muted);stroke-width:.8}
.chart .stem{stroke:var(--muted);stroke-width:1}
.chart .stem.main{stroke:var(--accent);stroke-width:1.8}
.chart .dot{stroke:#222;stroke-width:.5}
.chart .dot.main{fill:var(--accent)}
.chart .cum{fill:none;stroke:#b0127a;stroke-width:1.2;opacity:.8}
.chart .cum-label{fill:#b0127a}
.chart .end-label{fill:var(--ink);font:700 11px var(--f-body)}
@media (prefers-color-scheme:dark){.chart .cum{stroke:#f07ac8}.chart .cum-label{fill:#f07ac8}}
.chart-cap{font-size:11px;color:var(--muted);margin-top:2px;white-space:normal}
.aftershocks{white-space:normal}
.as-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:2px 0}
.as-count{font:600 16px var(--f-data)}
.as-scope{font-size:12px;color:var(--muted)}
.as-advice{margin-top:6px;font-size:12px;padding:6px 8px;border-radius:6px;background:var(--hover)}
.profile-chart{padding:4px 16px 16px}
.profile-tip{margin:10px 0 0;border:0;border-radius:8px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;white-space:normal}
.profile-tip button{font-size:13px;padding:3px 10px;border:1px solid var(--line);background:var(--panel);border-radius:7px;cursor:pointer}
.profile-end{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#2c6fbb;color:#fff;font:700 11px/1 var(--f-body);box-shadow:0 0 0 2px #fff}
.profile-ctl button{display:block;background:#fff;color:#16202b;border:0;padding:5px 8px;font:600 12px var(--f-body);cursor:pointer}
.profile-ctl button:hover{background:#f2f5f8}

/* ---- long-period ground motion ---- */
.place-row{display:flex;align-items:center;gap:6px;min-width:0}
.place-row .place{min-width:0}
.lp-badge{flex:none;font:600 10px/1 var(--f-body);padding:3px 5px;border-radius:4px;color:#fff;white-space:nowrap}
.lp{white-space:normal}
.lp-head{display:flex;align-items:center;gap:10px;margin:4px 0 2px}
.lp-chip{padding:3px 9px;border-radius:6px;color:#fff;font:600 13px var(--f-body)}
.lp-sub{margin-top:8px;font-size:12px;color:var(--muted)}
.lp-stations{margin:2px 0 0;padding-left:1.2em;font-size:12px;line-height:1.7}
.lp-link{margin-top:6px}
.lp-mark{display:grid;place-items:center;width:18px;height:18px;border-radius:4px;color:#fff;font:700 11px/1 var(--f-data);box-shadow:0 0 0 2px #fff}