/* Styles for every page (src/web/*.ts). Served as a static asset and linked as
   /style.css?v=STYLE_VERSION: bump STYLE_VERSION in src/config.ts whenever this
   file changes. System fonts only. Each section below starts with a marker
   comment; keep them, so work on one page touches only its own section. */

/* == Base == */
/* Tokens. --m-* are the magnitude colours (map markers use the same values).
   Type scale (rem, so it follows the reader's font size; px at the default
   16 px): xs 11 labels and table headers, sm 12 meta and small text, md 13
   controls and tables, base 14 body text, lg 18 h2, 2xl 26 the wordmark,
   3xl 30 the quake and Sources h1, 4xl 44 the quake tile's number (and the
   Sources h1 on phones). Half steps: xs-sm 11.5 a row's "ago", sm-md 12.5
   the brandline, md-base 13.5 station names, base-lg 17 tile values. Phones
   shrink 2xl, 3xl and 4xl (below); every size comes from these tokens.
   Corner radii: sm badges, chips and small buttons; md controls, view bar
   and popups; lg cards, tiles and map containers. No pill shapes. */
:root{color-scheme:light dark;
--bg:#f7f6f2;--card:#fff;--fg:#1d2226;--muted:#5f6b72;--line:#e4e1d8;--head:#efede7;--hover:#f0eee8;
--link:#0b57d0;--link-hover:#083f99;--focus:#0b57d0;--new:#fff4c2;--warn-bg:#fff3cd;--warn-fg:#664d03;
--ok:#1e8e3e;--ok-fg:#1b6e33;--amber:#e8a200;--amber-fg:#8a4b00;--p-wave:#1a73e8;--s-wave:#e8710a;--sw-on:#1d2226;--foot-bg:#38414a;--foot-fg:#d3dade;--foot-link:#fff;
--fs-xs:.6875rem;--fs-sm:.75rem;--fs-md:.8125rem;--fs-base:.875rem;--fs-lg:1.125rem;--fs-2xl:1.625rem;--fs-3xl:1.875rem;--fs-4xl:2.75rem;
--fs-xs-sm:.71875rem;--fs-sm-md:.78125rem;--fs-md-base:.84375rem;--fs-base-lg:1.0625rem;
--r-sm:3px;--r-md:4px;--r-lg:6px;--shadow:0 6px 24px rgba(29,34,38,.14);
--m-none:#9e9e9e;--m-minor:#8a9a5b;--m-light:#e0a800;--m-moderate:#f07b00;--m-strong:#d93025;--m-major:#8e24aa}
@media (prefers-color-scheme:dark){:root{--bg:#121416;--card:#1b1f22;--fg:#e6e8ea;--muted:#9ba6ad;--line:#2e3439;--head:#20252a;--hover:#252a2f;
--link:#8ab4f8;--link-hover:#aecbfa;--focus:#8ab4f8;--new:#3a3200;--warn-bg:#3d3000;--warn-fg:#ffe08a;
--ok:#5bb974;--ok-fg:#81c995;--amber:#fbbc04;--amber-fg:#fdd663;--p-wave:#8ab4f8;--s-wave:#fcad70;--sw-on:#3d73c9;--foot-bg:#2b3945;--shadow:0 6px 24px rgba(0,0,0,.5)}}
/* Phones: the wordmark 23 px, the quake h1 22 px, the quake tile's number and the Sources h1 26 px. */
@media (max-width:600px){:root{--fs-2xl:1.45rem;--fs-3xl:1.4rem;--fs-4xl:1.625rem}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:var(--fs-base)/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
/* The side gutter: the home header and the content of every other page start the same distance from the edge. */
:root{--gutter:14px}
@media (min-width:1000px){:root{--gutter:20px}}
@media (max-width:600px){:root{--gutter:12px}}
body:not(.home)>main{max-width:1600px;margin:0 auto;padding-inline:var(--gutter)}
/* The header is a band a shade darker than the page, edge to edge (its content stays inside the page width and gutter). */
/* Every header puts the wordmark at the same place (16 px down, 12 px on phones), so it does not move between pages. */
body:not(.home)>header{background:var(--head);padding:16px max(var(--gutter),calc((100% - 1600px)/2 + var(--gutter))) 4px}
a{color:var(--link)}a:hover{color:var(--link-hover)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
time{font-variant-numeric:tabular-nums}
sub{line-height:0}
button{font:inherit;color:inherit;cursor:pointer}
/* A button, at least 44 px tall. */
.btn[hidden]{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);color:var(--fg);font-size:var(--fs-md);font-weight:600;text-decoration:none}
.btn:hover{background:var(--hover);color:var(--fg)}
/* The skip link: off screen until it has keyboard focus, then over the header; <main> takes the focus it sends (no ring). */
.skip{position:fixed;z-index:100;left:8px;top:-100px;padding:10px 16px;border:2px solid var(--focus);border-radius:var(--r-md);background:var(--card);color:var(--link);font-weight:700;box-shadow:var(--shadow)}
.skip:focus{top:8px}
main:focus{outline:none}
/* Visually hidden, still read by screen readers. */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.banner{background:var(--warn-bg);color:var(--warn-fg);padding:8px 12px;border-radius:var(--r-md);margin:8px 0}
.meta{color:var(--muted);font-size:var(--fs-sm)}
/* Badges (rowView/qualityBadges kinds: certainty, type, quality, reviewed, approx). */
.badge{display:inline-block;font-size:var(--fs-xs);line-height:1.5;padding:0 6px;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--muted);white-space:nowrap}
.b-certainty,.b-type,.b-approx{border-color:var(--amber);color:var(--amber-fg)}
.b-reviewed{border-color:var(--ok);color:var(--ok-fg)}
/* Magnitude chips: dark text on the light colours, white on strong and major (contrast). */
.mag{display:inline-block;min-width:2.6em;text-align:center;padding:1px 4px;border-radius:var(--r-sm);font-weight:700;background:var(--m-none);color:#1a1a1a}
.m-none{background:var(--m-none)}.m-minor{background:var(--m-minor)}.m-light{background:var(--m-light)}.m-moderate{background:var(--m-moderate)}
.m-strong{background:var(--m-strong)}.m-major{background:var(--m-major)}
.mag.m-strong,.mag.m-major{color:#fff}
.wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:6px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--head);font-weight:600;color:var(--muted)}
/* Footer: a band in its own colour across the foot of every page, set well apart from the page above (on the home page, under the list and the map): the disclaimer on the left, the links (Home, Sources, the author) stacked close together on the right (under the disclaimer, left-aligned, on phones). */
footer{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:20px 40px;padding-block:28px 40px;background:var(--foot-bg);color:var(--foot-fg);font-size:var(--fs-base)}
body>footer{margin:48px 0 0;padding-inline:max(var(--gutter),calc((100% - 1600px)/2 + var(--gutter)))}
footer a:focus-visible{outline-color:#fff}
footer .disclaimer{flex:1 1 20em;max-width:44em;margin:0;line-height:1.5}
footer .disclaimer a{color:var(--foot-link);text-decoration:underline}
.foot-links{display:flex;flex-direction:column;align-items:flex-end;gap:0}
.foot-links a{display:inline-flex;align-items:center;gap:6px;min-height:28px;color:var(--foot-link);font-weight:600;text-decoration:none}
.foot-links a:hover,.foot-links a:focus-visible{text-decoration:underline}
/* The author's link underlines the name only, not the emoji before it. */
.foot-links a.author:hover,.foot-links a.author:focus-visible{text-decoration:none}
.foot-links a.author:hover .name,.foot-links a.author:focus-visible .name{text-decoration:underline}
@media (max-width:600px){footer{flex-direction:column;gap:12px}footer .disclaimer{flex:none}.foot-links{align-items:flex-start}}
/* Map popups (home and quake maps). */
.pop{font:var(--fs-md)/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#1a1a1a}.pop a{color:#0b57d0}
.maplibregl-popup-content{border-radius:var(--r-md)}
/* The map's attribution links sit in a line of text: underline them (MapLibre only does on hover). */
.maplibregl-ctrl-attrib a{text-decoration:underline}
@media (max-width:600px){th,td{padding:5px 4px}.mag{min-width:2.2em}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}

/* == Brand == */
/* The brand block (src/web/brand.ts): wordmark, then the tagline and the other-language link. */
.brand-block{margin:0 0 8px}
.brand{display:block;width:fit-content;margin:0;font-size:var(--fs-2xl);font-weight:800;line-height:1.1;letter-spacing:-.015em;color:var(--fg);text-decoration:none}
a.brand:hover{color:var(--fg)}
.brandline{margin:3px 0 0;color:var(--muted);font-size:var(--fs-sm-md);line-height:1.35}
/* Underlined, not told apart by colour alone (it is close in lightness to the muted text around it). */
.brandline .lang{color:var(--link);text-decoration:underline;text-underline-offset:2px}
@media (max-width:600px){
/* Touch targets of 44 px without taller rows: the links' hit areas reach past
   their text (the language link, positioned, stays above the name's). */
a.brand{position:relative}
a.brand::after{content:"";position:absolute;inset:-11px 0}
.brandline .lang{position:relative}}

/* == Home == */
/* Home page, layout 1 (src/web/page.ts, /app.js, /map.js): the list on the
   left, the map on the right (stacked below 1000 px: head, map, list). */
.shell{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "map" "list"}
.head{grid-area:head;position:relative;z-index:5;background:var(--head);padding:16px var(--gutter) 4px}
.mapwrap{grid-area:map;position:relative;z-index:0;isolation:isolate;height:45vh;min-height:260px;background:#cfe0e8}
#map{position:absolute;inset:0}
.list{grid-area:list;min-width:0;padding:4px calc(var(--gutter) - 12px) 48px}
@media (min-width:1000px){
.shell{grid-template-columns:minmax(360px,520px) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"head map" "list map";min-height:100vh}
.head,.list{border-right:1px solid var(--line)}
.head{padding:16px var(--gutter) 4px}
.mapwrap{position:sticky;top:0;align-self:start;height:100vh;height:100dvh;min-height:0}}
@media (prefers-color-scheme:dark){.mapwrap{background:#0b1a2a}}
.head .brand-block{margin:0 0 8px}

/* Magnitude picker: a <details> styled as a bordered button with a dropdown panel of links. */
.head .controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px}
/* Beside the map the header is short, so the list starts high: the name and its line, then the picker. */
@media (min-width:1000px){
.head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px;padding:16px var(--gutter) 4px}
.head .brand-block{grid-column:1/-1;margin:0 0 8px}
.head .controls{grid-row:2;grid-column:1;margin:0 0 8px}
.head .banner{grid-column:1/-1}}
.magpick{position:relative}
.magpick summary{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px 0 14px;border:1.5px solid var(--fg);border-radius:var(--r-md);background:var(--card);font-size:var(--fs-md);font-weight:600;cursor:pointer;list-style:none;user-select:none}
.magpick summary::-webkit-details-marker{display:none}
@media (pointer:coarse){.magpick summary{min-height:44px}}
.magpick summary:hover{background:var(--hover)}
.magpick summary strong{font-weight:800}
.magpick .chev{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.magpick[open] .chev{transform:rotate(180deg)}
.magpick ul{position:absolute;z-index:20;top:calc(100% + 6px);left:0;width:300px;max-width:calc(100vw - 32px);margin:0;padding:0;list-style:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden}
.magpick li+li{border-top:1px solid var(--line)}
.magpick ul a{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:48px;padding:8px 40px 8px 14px;color:var(--fg);font-size:var(--fs-base);text-decoration:none;line-height:1.3}
.magpick ul a:hover{background:var(--hover);color:var(--fg)}
.magpick ul a:focus-visible{outline-offset:-3px}
.magpick ul a span{color:var(--muted);font-size:var(--fs-sm)}
.magpick a[aria-current="true"]{background:var(--new)}
.magpick a[aria-current="true"] strong{font-weight:800}
.magpick a[aria-current="true"] span{color:var(--fg)}
.magpick a[aria-current="true"]::after{content:"✓";content:"✓"/"";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-weight:800}
.head .banner{margin:0 0 12px}

/* Map overlays: the legend (server-rendered) and the follow toggle (map.js adds
   <button class="follow" aria-pressed><span class="sw"></span>label</button>). */
.mapwrap .legend{position:absolute;z-index:2;left:12px;bottom:12px;max-width:calc(100% - 24px);display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:8px 12px;border-radius:var(--r-sm);background:var(--card);box-shadow:0 2px 10px rgba(0,0,0,.14);color:var(--muted);font-size:var(--fs-xs);line-height:1.2}
.mapwrap .legend strong{color:var(--fg)}
.mapwrap .legend .li{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.mapwrap .legend .dot{display:inline-block;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.legend .dot.m-minor{width:10px;height:10px}.legend .dot.m-light{width:13px;height:13px}.legend .dot.m-moderate{width:17px;height:17px}
.legend .dot.m-strong{width:21px;height:21px}.legend .dot.m-major{width:25px;height:25px}
.mapwrap .follow,.qmapcol .follow{position:absolute;z-index:2;left:12px;top:12px;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 12px;border:0;border-radius:var(--r-md);background:var(--card);color:var(--fg);box-shadow:0 2px 10px rgba(0,0,0,.14);font-size:var(--fs-md);font-weight:600}
/* A switch: a track outlined in the text colour (the outline is what meets 3:1 against the card, in both themes) and a knob. Off: an empty track, a dark knob at the left. On: a filled track (dark in both themes), a white knob at the right. */
.follow .sw{position:relative;flex:none;width:38px;height:24px;border:2px solid var(--fg);border-radius:var(--r-md);background:var(--card)}
.follow .sw::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:var(--r-sm);background:var(--fg);transition:transform .15s}
.follow[aria-pressed="true"] .sw{background:var(--sw-on)}
.follow[aria-pressed="true"] .sw::after{background:#fff;transform:translateX(14px)}
/* Windows High Contrast: backgrounds and shadows are replaced by system colours, so give the button an outline and use the system's own on and off colours for the track and knob. */
@media (forced-colors:active){
.mapwrap .follow{border:1px solid ButtonText}
.qmapcol .follow{border:1px solid ButtonText}
.follow .sw{border-color:ButtonText;background:Canvas}
.follow .sw::after{background:ButtonText}
.follow[aria-pressed="true"] .sw{background:Highlight}
.follow[aria-pressed="true"] .sw::after{background:HighlightText}}

/* View bar (#viewbar, hidden until /app.js fills it once /map.js reports its view): <p><strong>main line</strong> <span>secondary</span></p>, then a button or link.vb-all. */
.viewbar{--vb-bg:#e6eff3;--vb-fg:#173340;--vb-muted:#46646f;--vb-line:#b9ccd4;display:flex;align-items:center;gap:12px;margin:0 0 8px;padding:10px 12px 10px 16px;border-radius:var(--r-md);background:var(--vb-bg);color:var(--vb-fg)}
@media (prefers-color-scheme:dark){.viewbar{--vb-bg:#1a2b32;--vb-fg:#d6e6ec;--vb-muted:#a9c1ca;--vb-line:#35505b}}
.viewbar[hidden]{display:none}
.viewbar p{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;margin:0;line-height:1.3}
.viewbar strong{font-size:var(--fs-md)}
.viewbar p .sub{color:var(--vb-muted);font-size:var(--fs-sm)}
.viewbar .vb-all{flex:none;min-height:44px;padding:0 14px;border:1px solid var(--vb-line);border-radius:var(--r-sm);background:var(--card);color:var(--vb-fg);font-size:var(--fs-sm);font-weight:600;text-decoration:none;display:inline-flex;align-items:center}
.viewbar .vb-all:hover{background:var(--hover);color:var(--vb-fg)}
/* It sits on the map, under the follow toggle; the toggle already says the list follows the map, so no second line. */
.mapwrap .viewbar{position:absolute;z-index:2;left:12px;top:64px;max-width:calc(100% - 68px);margin:0;padding:6px 6px 6px 14px;box-shadow:0 2px 10px rgba(0,0,0,.14)}
.mapwrap .viewbar p .sub{display:none}

/* Rows: one link each, a grid of time, magnitude chip, place and meta. */
.quakes{list-style:none;margin:0;padding:0}
.quakes li{margin:0 0 2px;border-radius:var(--r-md);container-type:inline-size}
.q{display:grid;grid-template-columns:5.6em auto minmax(0,1fr);column-gap:12px;align-items:center;padding:8px 12px;border-radius:var(--r-md);color:var(--fg);text-decoration:none}
.q:hover{background:var(--hover);color:var(--fg)}
.q:focus-visible{outline-offset:-2px}
.q .t{display:flex;flex-direction:column;line-height:1.25}
.q time{font-size:var(--fs-base);font-weight:600}
.q .ago{color:var(--muted);font-size:var(--fs-xs-sm)}
.q .mag{display:flex;align-items:center;justify-content:center;min-width:38px;min-height:38px;padding:0 4px;border-radius:var(--r-sm);font-size:var(--fs-base);font-weight:800;font-variant-numeric:tabular-nums}
.q .p{display:flex;flex-direction:column;gap:2px;min-width:0}
.q .place{font-size:var(--fs-base);font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.q .meta{font-size:var(--fs-sm);line-height:1.6}
@media (min-width:601px){.q{grid-template-columns:6.4em auto minmax(0,1fr) 8px}
.q::after{content:"";width:7px;height:7px;border-top:2px solid var(--muted);border-right:2px solid var(--muted);transform:rotate(45deg);opacity:.6}}
li.hover .q{background:var(--card);box-shadow:inset 0 0 0 2px var(--fg)}
.quakes .empty{padding:28px 12px;color:var(--muted);text-align:center}

/* Pager, under the list. */
.pager{display:flex;flex-wrap:wrap;gap:8px 16px;padding:8px 12px}
.pager:empty{display:none}
.pager a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-sm);font-weight:600;text-decoration:none}
.pager a:hover{text-decoration:underline}
.pager #older{margin-left:auto}
/* The footer runs under the whole shell (list and map), meeting the map's foot: the list keeps the gap above it instead. Full width like the home header, its text starts at the same gutter. A short page (few or no rows, on a phone) still puts it at the foot of the screen. */
body.home{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
body.home>footer{margin:auto 0 0;padding-inline:var(--gutter)}

@media (max-width:600px){
.head{padding:12px var(--gutter) 2px}
.list{padding:4px calc(var(--gutter) - 8px) 48px}
.viewbar{margin:0 4px 8px}
.q{grid-template-columns:5.9em auto minmax(0,1fr);column-gap:10px;padding:8px}
.mapwrap .legend{left:8px;bottom:8px;max-width:calc(100% - 16px);gap:3px 8px;padding:6px 10px}
.legend .dot.m-minor{width:8px;height:8px}.legend .dot.m-light{width:10px;height:10px}.legend .dot.m-moderate{width:13px;height:13px}
.legend .dot.m-strong{width:16px;height:16px}.legend .dot.m-major{width:19px;height:19px}
.mapwrap .follow,.qmapcol .follow{left:8px;top:8px}
.mapwrap .viewbar{left:8px;top:56px;max-width:calc(100% - 60px)}}
/* A row too narrow for its text (large text, a narrow screen) stacks: time and magnitude on one line, the place under them at full width. The width is in em, so it follows the text size. */
@container (max-width:20em){
.q{grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"t m ." "p p p";row-gap:6px}
.q .t{grid-area:t}.q .mag{grid-area:m}.q .p{grid-area:p}
.q::after{display:none}}

/* Client states (/app.js, /map.js). Texts with a short form for phones:
   .lg (read by screen readers) and .sh (aria-hidden). */
.viewbar .sh{display:none}
.viewbar[tabindex="-1"]:focus{outline:none}
.viewbar .vb-all{position:relative}
/* The home map's popup: magnitude chip, then place, type, time and depth. */
.pop-q{display:flex;align-items:flex-start;gap:10px;max-width:240px}
.pop-q .mag{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;min-width:0;padding:0;border-radius:var(--r-sm);font-weight:800}
.pop-q a{font-weight:600;text-decoration:none}
.pop-q a:hover{text-decoration:underline}
.pop-when{margin-top:2px;color:#4f5a61;font-size:var(--fs-sm)}

/* Phones and tablets: content first (map clamp(180px, 30vh, 300px); no legend on a map under 240 px). */
@media (max-width:999px){
.mapwrap{height:clamp(180px,30vh,300px);min-height:0}}
@media (max-width:999px) and (max-height:799px){.mapwrap .legend{display:none}}
/* Phones: a two-row header (wordmark and picker; language link), a one-line view bar. */
@media (max-width:600px){
.head{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;padding:12px var(--gutter) 6px}
/* Order: wordmark and picker, a line break, then the language link, then the banner; each wraps if large text leaves no room. */
.head::after{content:"";order:2;flex:0 0 100%;height:0}
body:not(.home)>header{padding-top:12px}
.head .brand-block{display:contents}
.head h1.brand{order:0;align-self:flex-start}
/* The language link: padding (cancelled by negative margins, so the row keeps its height) leaves room for a 44 px hit area and the focus ring; only the link takes the pointer. */
.head .brandline{order:3;flex:1 1 0;min-width:0;margin:-13px -4px;padding:13px 4px;font-size:var(--fs-md);pointer-events:none}
.head .brandline .lang{pointer-events:auto}
.head .brandline .lang::after{content:"";position:absolute;inset:-14px 0}
.head .brandline>span{display:none}
.head .controls{order:1;margin:0 0 0 auto}
.head .banner{order:5;flex:0 0 100%;margin:6px 0 0}
.magpick summary{min-height:44px;padding:0 12px 0 14px}
.magpick summary .k{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.magpick ul{left:auto;right:0}
.viewbar{gap:8px;min-height:36px;margin:0 4px 6px;padding:3px 4px 3px 12px;border-radius:var(--r-md)}
.viewbar strong{font-size:var(--fs-md)}
.viewbar .lg{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.viewbar .sh{display:inline}
.viewbar p .sub{display:none}
.viewbar .vb-all{min-height:30px;padding:0 10px;font-size:var(--fs-sm)}
.viewbar .vb-all::after{content:"";position:absolute;inset:-7px 0}
.mapwrap .legend{flex-wrap:nowrap;max-width:calc(100% - 52px);overflow:hidden;font-size:var(--fs-xs)}
.mapwrap .legend strong,.mapwrap .legend .to{display:none}
.mapwrap .follow,.qmapcol .follow{min-height:40px;padding:0 12px 0 8px;gap:8px;font-size:var(--fs-sm)}
.mapwrap .follow::after,.qmapcol .follow::after{content:"";position:absolute;inset:-2px 0}}

/* == Quake == */
/* Quake pages and their 404 (src/web/quake.ts, /quake.js, /quake-map.js): a report card. */
body.quake [hidden]{display:none!important}
body.quake td.n,body.quake th.n{white-space:nowrap;font-variant-numeric:tabular-nums}
body.quake table{font-size:var(--fs-md)}
/* Header bar: the brand block (the wordmark links home). */
.qhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 20px;border-bottom:1px solid var(--line)}
/* (body:not(.home)>header sets the margin, so this needs the extra weight.) */
body.quake>.qhead{margin-bottom:20px}
.qhead .brand-block{margin:0 0 8px}
/* Hero: magnitude tile, place, time, badges; Share (shown by /quake.js) on the right. */
.hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px 24px;align-items:center;margin:0 0 20px}
.bigmag{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:104px;min-height:104px;padding:0 8px;margin:0;border-radius:var(--r-lg);color:#1a1a1a;line-height:1}
.bigmag.m-strong,.bigmag.m-major{color:#fff}
.bigmag .n{font-size:var(--fs-4xl);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bigmag .mt{font-size:var(--fs-base);font-weight:700;margin-top:4px}
body.quake h1{font-size:var(--fs-3xl);font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:0 0 8px;overflow-wrap:anywhere}
.when{margin:0;color:var(--muted);font-size:var(--fs-base)}
.when time{color:var(--fg);font-weight:600}
.utc{font-size:var(--fs-sm)}
.flags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.flags .badge{font-size:var(--fs-sm);font-weight:600;padding:1px 8px;white-space:normal}
.share{align-self:start}
.share svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Fact tiles. */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0 0 20px}
.tiles>div{min-width:0;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.tiles dt{font-size:var(--fs-sm);font-weight:600;color:var(--muted)}
.tiles dd{margin:0}
.tiles .v{margin-top:2px;font-size:var(--fs-base-lg);font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* Map beside the Solutions card (stacked below 900 px). */
.qgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:0 0 20px}
.qmapcol{position:relative}
#qmap{height:50vh;min-height:280px;border-radius:var(--r-lg);overflow:hidden;background:#0b1a2a}
@media (min-width:900px){.qgrid{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start}#qmap{height:460px}}
body.quake .legend{color:var(--muted);font-size:var(--fs-sm);margin:6px 0 0}
body.quake h2{font-size:var(--fs-lg);font-weight:800;margin:0 0 10px}
.solcard{min-width:0;padding:16px 18px;border-radius:var(--r-lg)}
.solhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.solhead h2{margin:0}
.solmini th,.solmini td{padding:8px 6px;vertical-align:middle}
.solmini th{background:none;border-bottom-width:2px}
.solmini tr.shown td{background:var(--new)}
/* An agency's second row: origin time, stations, gap and RMS. */
.solmini tr:not(.fig) td{border-bottom:0;padding-bottom:0}
.solmini tr.fig td{padding-top:0;padding-bottom:10px;color:var(--muted);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.solmini td a{font-weight:700}
.flag{width:18px;height:13px;margin-right:2px;vertical-align:-2px}
.here{display:inline-block;margin-left:4px;padding:0 7px;border:1px solid currentColor;border-radius:var(--r-sm);font-size:var(--fs-xs);font-weight:700;white-space:nowrap}
/* Magnitude by agency: one dot per value on a line (inline SVG). */
.solcard .strip-h{margin:16px 0 0;font-size:var(--fs-md)}
.strip{display:block;width:100%;height:62px;overflow:visible}
.strip line{stroke:var(--line);stroke-width:2}
.strip .dot{fill:var(--card);stroke:var(--fg);stroke-width:1.5}
.strip .dot.shown{fill:var(--fg)}
.strip text{fill:var(--fg);font-size:var(--fs-sm);font-weight:700}
table.hist td{white-space:nowrap}
/* The stations button under the table (/quake.js shows it): a chevron down to show more, up to show fewer. */
.more{margin:12px 0 0}
.more-btn{padding:0 18px;border:1.5px solid var(--fg);font-weight:700}
.more-btn:hover{background:var(--hover)}
.more-btn::before{content:"";flex:none;width:.45em;height:.45em;margin:-.25em 4px 0 0;border-right:2px solid;border-bottom:2px solid;transform:rotate(45deg);transition:transform .15s}
.more-btn[data-open=true]::before{margin-top:.25em;transform:rotate(-135deg)}
/* USGS impact card (not its <dl class="facts impact">). */
.impact.card{padding:16px 18px;margin:0 0 20px;border-radius:var(--r-lg)}
/* Tabs (/quake.js); without it every panel shows with its heading. */
.tablist{display:flex;gap:4px;margin:8px 0 16px;overflow-x:auto;box-shadow:inset 0 -1px var(--line)}
.tablist [role=tab]{flex:none;min-height:48px;padding:0 16px;border:0;border-bottom:3px solid transparent;background:none;color:var(--muted);font-weight:600;white-space:nowrap}
.tablist [role=tab]:hover{color:var(--fg)}
.tablist [role=tab][aria-selected=true]{color:var(--fg);border-bottom-color:var(--fg);font-weight:800}
.tablist [role=tab]:focus-visible{outline-offset:-3px}
.tablist .count{color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.panel+.panel{margin-top:28px}
.tablist:not([hidden])~.panel{margin-top:0}
.panel:focus-visible{outline-offset:6px}
.panel .wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
/* Sticky table heads: a table of more than five rows keeps its head at the top of the window while its rows scroll past
   (not the Solutions list, whose rows come in pairs). Sticking needs the page to be the scroller, so from 800 px, where every
   table fits, the wrapper stops scrolling sideways; on narrower screens the tables scroll sideways and their heads do not stick. */
@media (min-width:800px){
.wrap{overflow:visible}
.panel .wrap th:first-child{border-top-left-radius:var(--r-lg)}
.panel .wrap th:last-child{border-top-right-radius:var(--r-lg)}
table:not(.solmini):has(>tbody>tr:nth-child(6)) th{position:sticky;top:0;z-index:1;box-shadow:inset 0 -1px var(--line)}
}
.panel th:first-child,.panel td:first-child{padding-left:14px}
.panel th:last-child,.panel td:last-child{padding-right:14px}
/* Stations: one row per station, P and S on a timeline shared by the table. */
.lede{margin:0 0 8px;font-size:var(--fs-base)}
.waves-key{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 10px;font-size:var(--fs-sm);color:var(--muted)}
.wdot{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:50%;vertical-align:-1px}
.wdot.p{background:var(--p-wave)}.wdot.s{background:var(--s-wave)}
table.sta td{vertical-align:middle}
table.sta .st{min-width:9em}
table.sta .st strong{display:block;font-size:var(--fs-md-base);font-weight:600}
table.sta .code{display:block;font-size:var(--fs-xs);color:var(--muted)}
table.sta .waves{width:45%;min-width:170px}
.tl{display:block;width:100%;height:14px;overflow:visible;background:linear-gradient(var(--line),var(--line)) center/100% 2px no-repeat}
.tl .ps{stroke:var(--s-wave);stroke-opacity:.35;stroke-width:6;stroke-linecap:round}
.tl .p,.tl .s{stroke:var(--card);stroke-width:2}
.tl .p{fill:var(--p-wave)}.tl .s{fill:var(--s-wave)}
.wt{display:block;margin-top:2px;font-size:var(--fs-sm);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Nearby quakes. */
.nearby{list-style:none;padding:0;margin:0}
.nearby li{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.nearby .nb{min-width:0}
.nearby .meta{display:block}
@media (max-width:600px){
/* One header row: wordmark, language link. */
.qhead{flex-wrap:nowrap;justify-content:flex-start;gap:0 10px}
body.quake>.qhead{margin-bottom:12px}
.qhead .brand-block{display:contents}
/* The language link wraps rather than being cut short on narrow phones; its hit area is 44 px tall. */
.qhead .brandline{flex:1;min-width:0;margin:0;text-align:right}
.qhead .brandline .lang::after{content:"";position:absolute;inset:-14px 0}
.qhead .brandline>span{display:none}
.hero{grid-template-columns:auto minmax(0,1fr);gap:10px 12px;margin-bottom:14px}
.bigmag{min-width:64px;min-height:64px;padding:0 6px}
.bigmag .mt{font-size:var(--fs-xs);margin-top:2px}
body.quake h1{margin-bottom:4px}
.flags{margin-top:6px}
#qmap{height:240px;min-height:0}
.share{grid-column:1/-1;justify-self:start}
.tiles{grid-template-columns:1fr 1fr;gap:8px}
.tiles>div{padding:8px 10px}
.tiles .v{font-size:var(--fs-base)}
.solcard,.impact.card{padding:12px}
/* The Solutions table fits a 375 px phone (its columns were 3 px too wide) without a scrolling wrapper. */
.solmini th,.solmini td{padding-inline:4px}
table.sta .smag{display:none}
table.sta .waves{min-width:120px}
}
/* USGS shaking and impact (impactSection in src/web/quake.ts): PAGER alert colours, MMI badges in ShakeMap colours, and each PAGER estimate's chances as a stacked bar */
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;align-content:start}
.facts dt{color:var(--muted);font-size:var(--fs-sm);padding-top:1px}
.facts dd{margin:0}
body.quake h3{font-size:var(--fs-base);margin:16px 0 6px}
.facts.impact{margin:8px 0}
.a-green{--a:#00b04f}.a-yellow{--a:#ffe100}.a-orange{--a:#ff9900}.a-red{--a:#e00000}
.badge.a-green,.badge.a-yellow,.badge.a-orange,.badge.a-red{background:var(--a);border-color:var(--a);color:#1a1a1a;font-weight:600}
.badge.a-red{color:#fff}
.bins{display:flex;width:160px;max-width:100%;height:8px;margin-top:5px;border:1px solid var(--muted);border-radius:var(--r-sm);overflow:hidden}
.bin{background:var(--a,var(--m-none))}
/* A divider between segments (an inset shadow, so an empty segment adds none); the frame's own border gives the pale colours an edge. Segment colours are the data, so High Contrast keeps them. */
.bin+.bin{box-shadow:inset 1px 0 0 rgba(0,0,0,.4)}
@media (forced-colors:active){.bin{forced-color-adjust:none}}
.w0{width:0%}.w1{width:5%}.w2{width:10%}.w3{width:15%}.w4{width:20%}.w5{width:25%}.w6{width:30%}.w7{width:35%}.w8{width:40%}.w9{width:45%}.w10{width:50%}.w11{width:55%}.w12{width:60%}.w13{width:65%}.w14{width:70%}.w15{width:75%}.w16{width:80%}.w17{width:85%}.w18{width:90%}.w19{width:95%}.w20{width:100%}
.mmi{display:inline-block;min-width:2.4em;text-align:center;padding:0 4px;border:1px solid rgba(0,0,0,.25);border-radius:var(--r-sm);color:#1a1a1a;font-weight:700;font-size:var(--fs-sm)}
.mmi-1{background:#fff}.mmi-2{background:#bfccff}.mmi-3{background:#a0e6ff}.mmi-4{background:#80ffff}.mmi-5{background:#7aff93}
.mmi-6{background:#ff0}.mmi-7{background:#ffc800}.mmi-8{background:#ff9100}.mmi-9{background:#f00;color:#000}.mmi-10{background:#c80000;color:#fff}
table.mmi-table td{white-space:nowrap}

/* == Sources == */
/* Sources page (src/web/sources.ts). */
body.sources h1{font-size:var(--fs-3xl);font-weight:800;line-height:1.1;letter-spacing:-.02em;margin:10px 0 8px;overflow-wrap:anywhere}
/* On phones --fs-3xl (22 px) is below the wordmark (23 px), so the h1 takes the larger phone token (26 px). */
@media (max-width:600px){body.sources h1{font-size:var(--fs-4xl)}}
table.sources td:first-child{min-width:12em}
table.sources td.lic{white-space:nowrap}
@media (max-width:600px){table.sources thead{display:none}table.sources tr{display:block;padding:6px 0;border-bottom:1px solid var(--line)}table.sources td{display:block;border:0;padding:2px 0;min-width:0}table.sources td.lic{color:var(--muted);font-size:var(--fs-sm)}table.sources td.lic::before{content:attr(data-label) ": "}}