/* Map-first observatory. Shared tokens keep every instrument consistent. */
button,select,input,summary { font:inherit; }
button,summary,select { touch-action:manipulation; }
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible { outline:2px solid var(--magma); outline-offset:3px; }
[hidden] { display:none!important; }
* { scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.shell { grid-template-rows:70px minmax(0,1fr); }
.masthead { padding:0 24px; gap:24px; background:var(--bg-raised); }
.wordmark { align-items:center; gap:9px; flex-shrink:0; }
.wordmark h1 { font-size:23px; font-weight:600; letter-spacing:-1px; }
.brand-icon { width:30px; height:30px; color:var(--magma); }
.brand-caption { font-size:9px; letter-spacing:1.5px; color:var(--ink-faint); width:85px; margin-left:6px; line-height:1.5; }
.view-nav { padding:0; height:100%; border:0; gap:4px; overflow:visible; }
.view-tab { height:100%; border-radius:0; border:0; border-bottom:2px solid transparent; padding:0 16px; font-size:13px; }
.view-tab.active { color:var(--magma); background:transparent; border-color:var(--magma); box-shadow:none; }
.masthead-right { gap:14px; }
.status-chip { color:var(--magma); font-size:10px; border:0; padding:0; }
.status-chip .pulse { animation:none; background:var(--magma); box-shadow:0 0 0 4px #52d5b612; }
.theme-toggle { border-radius:6px; }
.theme-toggle button { border-radius:4px; font-size:11px; padding:5px 7px; }
.stage { overflow:hidden; }
.view-panel { padding:0; min-height:0; height:100%; min-width:0; overflow:hidden; }
.filter-bar { display:flex; align-items:center; gap:20px; padding:14px 24px; border-bottom:1px solid var(--line); z-index:1100; flex-shrink:0; }
.field-inline { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--ink-faint); }
select { color:var(--ink); background:var(--bg-raised); border:1px solid var(--line); padding:8px 10px; border-radius:6px; max-width:215px; }
.range-select { border-radius:6px; gap:2px; }
.range-select button { padding:7px 11px; font-family:var(--font-ui); color:var(--ink-soft); }
.range-select button.active { background:color-mix(in srgb,var(--magma) 13%,var(--bg-raised)); color:var(--magma); box-shadow:none; }
.timezone-label { margin-left:auto; color:var(--ink-faint); font:10px var(--font-mono); letter-spacing:.07em; white-space:nowrap; }
.layer-menu { position:relative; font-size:12px; margin-left:auto; }
.layer-menu summary { cursor:pointer; color:var(--ink-soft); padding:8px 10px; border:1px solid var(--line); border-radius:6px; }
.layer-options { position:absolute; right:0; top:44px; width:300px; padding:18px; background:var(--bg-raised); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-lg); display:grid; gap:10px; }
.control-label { font-size:10px; letter-spacing:.05em; color:var(--ink-faint); }
.summary-bar { min-height:49px; display:flex; align-items:center; gap:30px; padding:8px 24px; font-size:12px; color:var(--ink-faint); border-bottom:1px solid var(--line); flex-shrink:0; }
.summary-bar strong { color:var(--ink); font:500 16px var(--font-mono); margin-right:4px; }
#statMax { color:var(--sulphur); margin-left:5px; }
#statMaxWhere { margin-left:8px; }
.update-label { margin-left:auto; font-size:11px; }
.map-workspace { display:grid; grid-template-columns:minmax(0,1fr) 340px; flex:1; min-height:0; }
.map-column { display:flex; flex-direction:column; min-width:0; min-height:0; }
.map-frame { flex:1; min-height:0; border:0; border-radius:0; overflow:hidden; }
#quakeMap { height:100%; width:100%; background:#102333; }
.map-reset { position:absolute; z-index:900; top:16px; right:16px; padding:8px 13px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:var(--bg-raised); cursor:pointer; font-size:12px; }
.map-legend { right:16px; bottom:30px; padding:7px 10px; font-size:10px; gap:11px; box-shadow:none; }
.map-terrain-base { filter:saturate(.25) brightness(.4); }
:root[data-theme=light] .map-terrain-base { filter:saturate(.5) brightness(.9); }
.map-street-dark { filter:invert(.9) hue-rotate(175deg) saturate(.35); }
.map-message { position:absolute; top:16px; left:60px; right:155px; z-index:950; background:var(--bg-raised); border:1px solid var(--sulphur); border-radius:6px; padding:8px 12px; color:var(--sulphur); font-size:12px; }
.leaflet-container { font-family:var(--font-ui); }
.leaflet-control-attribution { font-size:9px!important; }
.activity-panel { flex-shrink:0; height:132px; padding:13px 22px 10px; border-top:1px solid var(--line); background:var(--bg); }
.activity-heading { display:flex; align-items:center; gap:14px; }
.activity-heading h2 { font-size:12px; margin:0; font-weight:500; }
.activity-heading span { color:var(--ink-faint); font-size:10px; }
.activity-heading button { cursor:pointer; background:var(--bg-raised); border:1px solid var(--line); color:var(--ink-soft); border-radius:5px; font-size:10px; padding:4px 9px; }
#replayButton { margin-left:auto; }
#activityChart { width:100%; height:61px; display:block; margin-top:6px; }
.activity-axis { display:flex; justify-content:space-between; font:9px var(--font-mono); color:var(--ink-faint); }
.map-list-panel { position:static; width:auto; max-width:none; border:0; border-left:1px solid var(--line); border-radius:0; box-shadow:none; background:var(--bg-raised); z-index:1; min-height:0; }
.event-panel-title { display:flex; align-items:center; gap:9px; padding:18px 18px 12px; }
.event-panel-title h2 { font-size:14px; font-weight:500; margin:0; }
#mapCount { font:10px var(--font-mono); color:var(--ink-faint); margin-left:auto; }
#mapListToggle { display:none; }
.list-caption { display:flex; justify-content:space-between; padding:0 18px 10px; font:9px var(--font-mono); color:var(--ink-faint); letter-spacing:.08em; border-bottom:1px solid var(--line); }
.map-list-rows { padding:0; overscroll-behavior:contain; }
.map-list-row { display:grid; grid-template-columns:43px minmax(0,1fr); gap:12px; padding:13px 18px; margin:0; border:0; border-bottom:1px solid #0003; border-left:2px solid transparent; border-radius:0; background:var(--mag-color); color:var(--row-ink); font-weight:400; }
.map-list-row:hover { filter:none; background:var(--mag-color); box-shadow:inset 0 0 0 2px var(--row-ink); }
.map-list-row.selected { border-left-color:var(--row-ink); background:var(--mag-color); box-shadow:inset 0 0 0 2px var(--row-ink); }
.map-list-row:focus-visible { outline:2px solid var(--row-ink); outline-offset:-4px; }
.mag-badge { display:grid; place-items:center; min-height:35px; border:1px solid color-mix(in srgb,var(--mag-color) 35%,transparent); color:var(--mag-color); background:color-mix(in srgb,var(--mag-color) 9%,transparent); border-radius:6px; font:500 14px var(--font-mono); }
:root[data-theme=light] .mag-badge { color:var(--ink); border-color:var(--mag-color); border-left-width:4px; }
.event-info { min-width:0; display:grid; gap:4px; }
.event-region { font:500 13px var(--font-ui); overflow-wrap:anywhere; }
.event-meta { display:flex; justify-content:space-between; gap:6px; color:var(--ink-faint); font:10px var(--font-mono); }
.map-list-row .event-meta { color:var(--row-ink); }
.map-list-row .mag-badge, :root[data-theme=light] .map-list-row .mag-badge { color:var(--row-ink); border:1px solid currentColor; background:transparent; font-weight:600; }
.event-detail { border-top:1px solid var(--line); background:var(--bg-sunken); padding:18px; flex-shrink:0; font-size:12px; }
.event-detail p { margin:0; color:var(--ink-faint); }
.detail-eyebrow { color:var(--magma); font:9px var(--font-mono); letter-spacing:.1em; margin-bottom:10px; }
.detail-title { display:flex; align-items:center; gap:12px; font-size:15px; font-weight:500; }
.detail-title .mag-badge { padding:4px 8px; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0; }
.detail-grid dt { color:var(--ink-faint); font-size:10px; }
.detail-grid dd { margin:3px 0 0; font:11px var(--font-mono); }
.detail-action { width:100%; color:var(--magma); background:transparent; border:1px solid var(--line-strong); padding:8px; border-radius:6px; cursor:pointer; font-size:12px; }
.source-note { color:var(--ink-faint); font-size:9px; padding:10px 18px; line-height:1.5; border-top:1px solid var(--line); }
.gps-layout { flex:1; min-height:0; grid-template-columns:245px minmax(0,1fr); }
.gps-sidebar { background:var(--bg); }
.gps-sidebar h2,.d3-sidebar h2 { font-size:16px; font-weight:500; }
.gps-main { background:var(--bg); padding:26px 32px; min-width:0; }
.gps-charts { max-width:1150px; margin:0 auto; }
.gps-header { order:0; }
.gps-span { order:1; }
.gps-chart-card { order:3; background:var(--bg-raised); }
.gps-chart-card:has(#gpsChartUp) { order:2; border-color:color-mix(in srgb,var(--magma) 35%,var(--line)); }
.gps-chart-card:has(#gpsChartUp) canvas { height:185px; }
.gps-footnote { order:4; }
.mobile-station { display:none; }
.d3-layout { flex:1; min-height:0; }
.d3-sidebar { background:var(--bg); }
.latest-pulse .ring { border-color:var(--magma); }
@media(min-width:1600px) { .map-workspace { grid-template-columns:minmax(0,1fr) 380px; } }
@media(max-width:1200px) { .brand-caption{display:none;} .masthead{gap:12px;padding:0 16px;} .view-tab{padding:0 11px;} .filter-bar{gap:12px;} .field-inline>span{display:none;} .timezone-label{display:none;} .summary-bar{gap:18px;} }
@media(max-width:760px) {
 .shell { grid-template-rows:60px minmax(0,1fr); padding-bottom:calc(58px + env(safe-area-inset-bottom)); }
 .masthead { flex-wrap:nowrap; gap:8px; padding:0 14px; }
 .wordmark h1 { font-size:21px; } .brand-icon { width:25px; } .masthead-right { gap:10px; } .theme-toggle button { padding:5px; font-size:10px; } .theme-toggle button[data-theme-choice=system] { display:none; } .status-chip { font-size:9px; }
 .view-nav { position:fixed; bottom:0; left:0; right:0; height:calc(58px + env(safe-area-inset-bottom)); padding:0 6px env(safe-area-inset-bottom); z-index:2000; background:var(--bg-raised); border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
 .view-tab { font-size:11px; padding:0 3px; border-bottom:0; border-top:2px solid transparent; }
 .filter-bar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:10px 12px; }
 .field-inline select { width:100%; max-width:none; padding:7px 8px; font-size:11px; }
 .range-select button { padding:6px 10px; font-size:11px; }
 .layer-menu { margin:0; } .layer-menu summary { padding:7px 9px; font-size:11px; } .layer-options { width:280px; top:38px; }
 .summary-bar { padding:8px 12px; min-height:38px; font-size:10px; gap:12px; } .summary-bar strong { font-size:13px; } #statMaxWhere,.update-label { display:none; }
 .map-workspace { display:flex; flex-direction:column; position:relative; }
 .map-column { flex:1; min-height:0; }
 .map-frame { min-height:140px; } .map-reset { font-size:10px; top:10px; right:10px; padding:7px 9px; } .map-legend { bottom:22px; right:6px; left:6px; justify-content:center; gap:9px; font-size:9px; padding:4px; } .map-legend>span:last-child { display:none; }
 .activity-panel { height:82px; padding:7px 12px; } .activity-heading h2 { font-size:10px; } .activity-heading span { display:none; } #activityChart { height:27px; margin-top:3px; } .activity-axis{font-size:8px;}
 .map-list-panel { height:180px; flex-shrink:0; border:0; border-top:1px solid var(--line); border-radius:14px 14px 0 0; }
 .map-list-panel.expanded { position:absolute; inset:0; height:auto; z-index:1000; }
 .event-panel-title { padding:10px 14px; } .event-panel-title h2 { font-size:12px; } #mapCount { font-size:9px; }
 #mapListToggle { display:block; border:0; color:var(--magma); background:none; font-size:11px; padding:5px 0 5px 8px; cursor:pointer; }
 .list-caption { display:none; } .map-list-row { padding:10px 14px; } .event-region { font-size:12px; }
 .map-list-panel:not(.expanded) .event-detail,.map-list-panel:not(.expanded) .source-note { display:none; }
 .event-detail { padding:12px 14px; } .detail-grid { gap:8px; margin:10px 0; } .source-note{padding:7px 14px;}
 .map-message { top:50px; left:10px; right:10px; }
 .gps-layout { display:flex; flex-direction:column; overflow:hidden; }
 .gps-sidebar { flex:none; padding:12px 14px; border:0; border-bottom:1px solid var(--line); }
 .gps-sidebar h2,.gps-sidebar .station-list,.gps-sidebar .station-search { display:none; }
 .mobile-station { display:flex; align-items:center; gap:12px; color:var(--ink-faint); font-size:12px; } .mobile-station select{flex:1;max-width:none;min-width:0;font-size:12px;}
 .gps-main { padding:16px 14px; flex:1; min-height:0; overflow:auto; } .gps-title{font-size:22px;} .gps-header{gap:8px;flex-wrap:wrap;}
 .gps-chart-card canvas { height:110px; } .gps-chart-card:has(#gpsChartUp) canvas { height:150px; }
 .d3-layout { display:flex; flex-direction:column; overflow:auto; } .d3-sidebar { display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:none;overflow:visible; } .d3-sidebar h2,.d3-list-title,.d3-list { display:none; } .d3-stats,.d3-buttons { grid-column:1/-1; } .d3-stage{flex:none;height:420px;min-height:420px;} .d3-scale {font-size:9px;top:10px;left:10px;right:10px;} .d3-detail{top:65px;} .globe-hint{font-size:9px;white-space:nowrap;bottom:12px;} #d3Legend{bottom:46px;}
}
@media(max-width:360px) { .status-chip{display:none;} .range-select button{padding:6px 8px;} }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important;} }