:root { color-scheme: light; --ink:#152b3b; --muted:#617482; --line:#e1e8ed; }
* { box-sizing:border-box; }
html,body,#map { height:100%; margin:0; font-family:system-ui,sans-serif; color:var(--ink); }
button,select { font:inherit; }
button { cursor:pointer; }
button:focus-visible,a:focus-visible,select:focus-visible { outline:3px solid #147dab; outline-offset:3px; }
button:disabled { cursor:wait; opacity:.6; }
.toolbar { position:fixed; top:16px; left:76px; width:min(610px,calc(100% - 160px)); padding:16px 20px 12px; background:#fffffff5; box-shadow:0 6px 28px #15304b20; border-radius:16px; z-index:999; }
.toolbar-heading { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.brand { color:#186385; text-decoration:none; font-size:11px; font-weight:800; letter-spacing:.13em; }
h1 { margin:0; font-size:20px; letter-spacing:-.03em; }
.filters { display:grid; grid-template-columns:1.4fr 1fr; gap:10px; }
.filters label { display:flex; flex-direction:column; gap:4px; min-width:0; }
.filters label span { color:var(--muted); font-size:11px; font-weight:600; }
.filters select { width:100%; min-width:0; min-height:42px; padding:8px; border:1px solid #ccd8e0; border-radius:8px; color:var(--ink); background:white; font-size:13px; }
.status-row { display:flex; gap:8px; justify-content:space-between; align-items:center; margin-top:8px; }
#dataStatus { display:flex; gap:7px; align-items:center; font-size:12px; font-weight:600; }
.status-dot { width:7px; height:7px; flex:0 0 7px; background:#16816a; border-radius:50%; }
[data-state="loading"] .status-dot { background:#2988be; }
[data-state="error"] .status-dot,[data-state="stale"] .status-dot { background:#b96b11; }
#refreshData { border:0; border-radius:6px; background:#edf3f7; color:#175e7c; padding:6px 10px; min-height:32px; font-size:12px; }
.updated { font-size:10px; color:var(--muted); margin:3px 0 0; }
.panel { position:fixed; top:284px; bottom:48px; right:16px; width:380px; max-width:calc(100% - 32px); display:flex; flex-direction:column; background:white; border-radius:16px; box-shadow:0 8px 32px #15304b30; z-index:998; transform:translateX(calc(100% + 24px)); visibility:hidden; transition:transform .25s ease,visibility .25s; }
.panel.open { transform:none; visibility:visible; }
.panel-header { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px; border-bottom:1px solid var(--line); flex-shrink:0; }
.panel-header h2 { font-size:16px; margin:0; }
#resultCount { margin:4px 0 0; color:var(--muted); font-size:11px; }
.panel-close { background:#edf3f7; color:#175e7c; border:0; border-radius:8px; padding:8px 12px; min-height:40px; font-size:12px; white-space:nowrap; }
.panel-body { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:12px 16px 20px; }
.table-hint,.coverage-note,.list-note { font-size:11px; color:var(--muted); line-height:1.5; margin:0 0 14px; }
#quakeTable { width:100%; border-collapse:collapse; table-layout:fixed; font-size:12px; }
#quakeTable th { position:sticky; top:-12px; text-align:left; background:white; padding:10px 4px; border-bottom:1px solid var(--line); z-index:1; font-size:10px; color:var(--muted); }
#quakeTable th:first-child { width:19%; }
#quakeTable th:nth-child(2) { width:46%; }
#quakeTable th:last-child { width:35%; }
#quakeTable td { padding:12px 4px; border-bottom:1px solid var(--line); vertical-align:top; overflow-wrap:anywhere; }
#quakeTable tbody tr { cursor:pointer; }
#quakeTable tbody tr:hover,#quakeTable tbody tr.selected { background:#edf7fb; }
.magnitude-badge { display:inline-flex; justify-content:center; align-items:center; min-width:34px; height:30px; border-radius:7px; font-weight:750; background:#edf3f7; color:#24546b; }
.magnitude-badge.strong { color:#a23228; background:#fff0e9; }
.location-button { text-align:left; padding:0; background:none; border:0; color:var(--ink); font-size:inherit; font-weight:600; min-height:24px; }
.row-meta { display:block; font-size:10px; color:var(--muted); margin-top:4px; line-height:1.5; }
.relative-time { font-weight:600; font-size:11px; }
#emptyState { text-align:center; padding:22px 12px; font-size:13px; color:var(--muted); }
.list-note { margin-top:14px; }
#sourceLink { color:#17658b; font-size:11px; }
.panel-toggle { position:fixed; top:284px; right:16px; border:0; border-radius:10px; padding:12px 16px; background:white; color:var(--ink); box-shadow:0 4px 18px #15304b30; z-index:997; }
.panel-toggle[hidden] { display:none; }
.lang-toggle { min-height:40px; min-width:44px; border:1px solid #d1dce4; border-radius:10px; background:white; color:var(--ink); font-size:12px; font-weight:700; }
.time-legend { margin-top:12px; }
#timeLegendTitle { display:block; font-size:11px; color:var(--muted); font-weight:600; margin-bottom:6px; }
.legend-bands { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.legend-bands button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:6px; border:1px solid #cbd9e3; background:#f3f8fb; border-radius:8px; color:var(--ink); font-size:12px; }
.legend-swatch { width:11px; height:11px; border-radius:50%; flex-shrink:0; border:1px solid #0003; }
.legend-swatch.week { background:#f00; }
.legend-swatch.month { background:#ffb703; }
.legend-swatch.archive { background:#faf689; }
.legend-check::after { content:'✓'; color:#186385; font-size:11px; }
.legend-bands button[aria-pressed="false"] { background:white; color:#788a97; border-style:dashed; }
.legend-bands button[aria-pressed="false"] .legend-swatch { opacity:.2; }
.legend-bands button[aria-pressed="false"] .legend-check::after { content:'−'; color:#788a97; }
#legendHint { display:block; color:var(--muted); font-size:10px; margin-top:5px; }
.pulse { width:20px; height:20px; border:2px solid white; border-radius:50%; background:#0065f4; animation:pulse 2s ease-out infinite; pointer-events:none; }
@keyframes pulse { 0% { box-shadow:0 0 0 0 #0065f480; } 70%,100% { box-shadow:0 0 0 16px #0065f400; } }
@media(max-width:700px) {
 :root { --sheet-height:max(88px,min(62dvh,calc(100dvh - 280px))); }
 .toolbar { top:10px; left:10px; width:calc(100% - 74px); padding:12px; border-radius:12px; }
 .toolbar-heading { gap:10px; margin-bottom:8px; }
 h1 { font-size:16px; } .brand { font-size:9px; }
 .filters { grid-template-columns:1.4fr 1fr; gap:5px; }
 .filters select { font-size:11px; padding:6px 2px; min-height:42px; }
 #dataStatus { font-size:10px; } .updated { font-size:9px; }
 #refreshData { padding:4px 7px; font-size:10px; }
 .panel { top:auto; right:0; bottom:0; width:100%; max-width:none; height:62vh; height:var(--sheet-height); padding-bottom:env(safe-area-inset-bottom); border-radius:18px 18px 0 0; transform:translateY(calc(100% - 88px - env(safe-area-inset-bottom))); visibility:visible; }
 .panel.open { transform:none; }
 .panel-header { position:relative; padding-top:23px; min-height:88px; }
 .panel-header::before { content:""; position:absolute; top:8px; left:calc(50% - 18px); width:36px; height:4px; border-radius:4px; background:#cbd7df; }
 .panel-toggle { display:none; }
 .leaflet-bottom { bottom:calc(96px + env(safe-area-inset-bottom)); transition:bottom .25s; }
 body.sheet-expanded .leaflet-bottom { bottom:calc(62vh + 8px); bottom:calc(var(--sheet-height) + 8px); }
 .leaflet-control-attribution { max-width:72vw; font-size:8px!important; }
 .time-legend { margin-top:9px; }
 .legend-bands { gap:4px; }
 .legend-bands button { font-size:10px; gap:4px; padding:4px; }
 .legend-swatch { width:9px; height:9px; }
 #legendHint { font-size:9px; }
}
/* Keep the map clear: a reserved header, with separate compact map controls. */
:root { --header-height:52px; }
#map { position:absolute; top:var(--header-height); left:0; right:0; bottom:0; height:auto; }
.toolbar { top:0; left:0; width:100%; height:var(--header-height); padding:6px 16px; display:flex; align-items:center; gap:20px; border-radius:0; background:#fff; box-shadow:0 1px 0 #dce4e9; }
.toolbar-heading { margin:0; gap:14px; flex-shrink:0; }
.brand { display:flex; align-items:center; gap:7px; font-size:10px; }
.brand img { display:block; width:24px; height:24px; }
h1 { font-size:15px; font-weight:650; letter-spacing:-.02em; }
.filters { display:flex; gap:8px; margin-left:auto; }
.filters label { display:block; }
.filters label > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.filters select { min-height:34px; padding:5px 9px; font-size:12px; width:auto; background:#f7f9fa; border-color:#e2e8ec; border-radius:6px; }
#refreshData { background:none; padding:0; min-width:32px; min-height:36px; font-size:24px; line-height:1; }
.time-legend { position:fixed; left:14px; bottom:52px; margin:0; z-index:996; max-width:calc(100% - 28px); }
#timeLegendTitle { display:table; margin-bottom:5px; background:#ffffffe6; border-radius:4px; padding:2px 5px; font-size:10px; font-weight:500; }
.legend-bands { display:flex; gap:5px; }
.legend-bands button { min-height:34px; padding:5px 9px; gap:6px; font-size:11px; background:#fffffff2; border-color:#cbd6df; box-shadow:0 1px 4px #17364a12; }
.legend-check { display:none; }
.legend-bands button[aria-pressed="false"] { background:#ffffffb8; color:#84919a; }
.legend-bands button[aria-pressed="false"] > span:nth-child(2) { text-decoration:line-through; }
#legendHint { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.status-row { position:fixed; bottom:21px; left:14px; z-index:996; display:flex; align-items:center; justify-content:flex-start; gap:8px; margin:0; padding:3px 6px; border-radius:4px; background:#ffffffe6; max-width:calc(100% - 28px); }
#dataStatus { font-size:10px; font-weight:500; gap:5px; }
.updated { font-size:10px; margin:0; white-space:nowrap; border-left:1px solid #d4dce2; padding-left:8px; }
.panel { top:74px; right:64px; bottom:88px; width:340px; border-radius:12px; }
.panel-toggle { top:74px; right:64px; padding:9px 12px; font-size:12px; border:1px solid #dbe3e9; border-radius:7px; }
@media(max-width:700px) {
 :root { --header-height:48px; --sheet-height:max(88px,min(62dvh,calc(100dvh - 150px))); }
 .toolbar { gap:8px; padding:5px 10px; }
 .toolbar-heading { gap:0; }
 .brand-word { display:none; }
 .toolbar h1 { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .filters { flex:1; min-width:0; gap:5px; }
 .filters label:first-child { flex:1.25; min-width:0; }
 .filters label:last-child { flex:1; min-width:0; }
 .filters select { width:100%; padding:5px; min-height:36px; font-size:11px; }
 #refreshData { min-width:28px; font-size:23px; }
 .time-legend { left:10px; bottom:142px; }
 .legend-bands button { min-height:36px; font-size:11px; padding:5px 9px; }
 .status-row { left:10px; bottom:113px; }
 .panel { top:auto; right:0; bottom:0; width:100%; border-radius:16px 16px 0 0; }
 body.sheet-expanded .time-legend { bottom:calc(var(--sheet-height) + 52px); }
 body.sheet-expanded .status-row { bottom:calc(var(--sheet-height) + 23px); }
 .leaflet-bottom { bottom:96px; }
 body.sheet-expanded .leaflet-bottom { bottom:calc(var(--sheet-height) + 4px); }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }