/* US Quakes — "Drum Record" (ART.md): chrome is ink, color is data. The tokens for both themes, the fonts,
   the layout (map, sheet, top bar), the controls and their 44 px hit areas, focus mode, Reduce Motion. */

@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 400; font-display: block;
  src: url(fonts/atkinson-hyperlegible-latin-400-normal.woff2);
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 400; font-display: block;
  src: url(fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2);
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+2113; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 700; font-display: block;
  src: url(fonts/atkinson-hyperlegible-latin-700-normal.woff2);
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 700; font-display: block;
  src: url(fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2);
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+2113; }
@font-face { font-family: 'Red Hat Mono'; font-weight: 500; font-display: block;
  src: url(fonts/red-hat-mono-latin-500-normal.woff2); }

:root {
  --bg: #f1f3f4; --panel: #fafbfb; --ink: #15191c; --ink-2: #4d5760; --ink-3: #646e76; --on-ink: #fafbfb;
  --line: #d2d8dc; --line-strong: #aeb7be; --rule: #c5d0d8; --hatch: rgba(21,25,28,.22); --hatch-map: rgba(21,25,28,.11);
  --glass: rgba(250,251,251,.90); --land: #ebedeb; --sea: #d5dfe5; --fault: #3a4146;
  --sea-1: #d0dbe2; --sea-2: #cad6de; --sea-3: #c4d1da; --sea-4: #bfccd6; --sea-5: #b9c7d2; --sea-6: #b3c2ce; --sea-7: #aebdca; --sea-8: #a8b8c6;
  --relief-dark: .50; --relief-light: .20;
  --sans: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
  --mono: 'Red Hat Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(0.25, 0.8, 0.3, 1);
  --top-h: calc(44px + env(safe-area-inset-top));
  --sheet-h: 152px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0e10; --panel: #15181b; --ink: #e7e9e7; --ink-2: #9ba3a9; --ink-3: #848d94; --on-ink: #0c0e10;
    --line: #272c31; --line-strong: #444c53; --rule: #2b3238; --hatch: rgba(231,233,231,.20); --hatch-map: rgba(231,233,231,.09);
    --glass: rgba(21,24,27,.90); --land: #1c2023; --sea: #0f1418; --fault: #c3c9cd;
    --sea-1: #0e1317; --sea-2: #0d1216; --sea-3: #0c1014; --sea-4: #0b0f12; --sea-5: #0a0d10; --sea-6: #080b0e; --sea-7: #07090c; --sea-8: #05070a;
    --relief-dark: .55; --relief-light: .08;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font: 400 13.5px/1.4 var(--sans); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.mono { font-family: var(--mono); font-weight: 500; white-space: nowrap; }
/* Atkinson's digits line up wherever they sit in a readout or a control (ART.md "Type") */
.seg, .chips, .krow, #legend, .counts, #stamp, #hlabel, .largest, #notices, .note, .card .small { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--panel); }
#app { position: fixed; inset: 0; }
#top { position: absolute; top: 0; left: 0; right: 0; height: var(--top-h); padding: env(safe-area-inset-top) 4px 0 16px; display: flex; align-items: center; gap: 8px; background: var(--panel); border-bottom: 1px solid var(--line); z-index: 5; }
#top h1 { font: 700 15px/15px var(--sans); margin: 0; flex: 1; }
.icon, .play { flex: none; width: 44px; height: 44px; display: grid; place-items: center; }

/* segmented controls; 44 px hit areas */
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 28px; border: 1px solid var(--line-strong); border-radius: 5px; }
.seg button { position: relative; font-size: 11.5px; padding: 0 7px; white-space: nowrap; border-left: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 4px; }
.seg button:first-child { border-left: 0; border-radius: 4px 0 0 4px; }
.seg button:last-child { border-radius: 0 4px 4px 0; }
.seg button[aria-checked="true"] { background: var(--ink); color: var(--on-ink); font-weight: 700; }
.seg i { border-radius: 50%; background: currentColor; flex: none; }
.seg button, .chips button { transition: background-color 120ms var(--ease), color 120ms var(--ease); }
.seg button::after, .chips button::after, #credit::after, .largest::after, .btn::after { content: ''; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }

/* the map panel: five canvases, controls on flat glass */
#map { position: absolute; top: var(--top-h); left: 0; right: 0; bottom: 0; overflow: hidden; background: var(--bg); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: none; }
#map > canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; touch-action: none; }
#over { outline: none; }
#over:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.glass, .chips button, #scale, #credit, #notices p { background: var(--glass); }
.glass, .chips button, #notices p { border: 1px solid var(--line); }
.chips { position: absolute; top: -3px; left: 0; right: 0; display: flex; gap: 6px; padding: 11px 16px 13px; overflow-x: auto; scrollbar-width: none;
  mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 16px), transparent); }
.chips::-webkit-scrollbar { display: none; }
.chips button { position: relative; flex: none; height: 26px; padding: 0 9px; font-size: 11.5px; border-radius: 4px; }
.chips button::after { top: -11px; bottom: -13px; }
.chips button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.nogl { position: absolute; inset: 40% 24px auto; text-align: center; }
#foot { position: absolute; left: 0; right: 0; bottom: var(--sheet-h); padding: 0 12px 16px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; transition: bottom 240ms var(--ease); }
.foot-row { display: flex; justify-content: space-between; align-items: flex-end; }
#foot button, #scale, #notices p { pointer-events: auto; }
#scale { font: 500 10.5px var(--mono); display: flex; flex-direction: column; gap: 2px; padding: 2px 4px; border-radius: 3px; }
#scale i { height: 5px; border: 1px solid var(--ink); border-top: 0; }
#legend { display: grid; gap: 2px; padding: 4px 6px; border-radius: 4px; text-align: left; font-size: 10px; }
#legend canvas { display: block; }
#legend span { color: var(--ink-2); }
#credit { position: relative; align-self: flex-end; font-size: 10.5px; color: var(--ink-2); padding: 6px 8px; border-radius: 3px; margin-top: 4px; }
#credit b { color: var(--ink); }
#notices { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#notices p { margin: 0; font-size: 12px; padding: 4px 8px; border-radius: 5px; text-align: center; }

/* the sheet: paper, a 6 px radius, no shadow */
#sheet { position: absolute; left: 0; right: 0; bottom: 0; height: var(--sheet-h); background: var(--panel); border-top: 1px solid var(--line); border-radius: 6px 6px 0 0;
  display: flex; flex-direction: column; transition: height 240ms var(--ease); z-index: 2; }
#grip { height: 16px; flex: none; display: grid; place-items: center; touch-action: none; position: relative; }
#grip::after { content: ''; position: absolute; inset: -5px 30% -23px; }
#grip i { width: 34px; height: 4px; border-radius: 2px; background: var(--line-strong); }
#head { flex: none; padding: 0 16px 8px; border-bottom: 1px solid var(--line); }
#body { flex: 1; overflow-y: auto; padding: 8px 16px calc(12px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.row1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; }
#stamp, #hlabel { margin: 0; font-size: 12px; line-height: 1.2; min-width: 0; }
#stamp .mono, #hlabel .mono, .largest .mono { font-size: 11.5px; }
#hlabel { line-height: 13px; }
#hlabel b { font: 700 14px/16px var(--sans); }
#hlabel .br { display: block; height: 0; overflow: hidden; }
#hlabel .nomag { color: var(--ink-2); }
.strip { height: 56px; margin: 2px 0 4px; touch-action: none; }
.strip canvas { display: block; }
.largest { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; height: 26px; text-align: left; font-size: 12px; }
.largest .p, .row .p { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row3 { display: flex; gap: 6px; }
.row3 #hist-win { flex: 1.12; }
.row3 #floor { flex: 1; }
.row3 .seg button { padding: 0 4px; }
.play { margin-right: -6px; }
.play[aria-disabled="true"] { opacity: .45; }

/* the body: lists, cards, notes */
#body h2 { font: 700 12px var(--sans); color: var(--ink-2); margin: 14px 0 4px; }
#body p { margin: 6px 0; }
.note, .quote, .counts, .card .small { font-size: 12px; color: var(--ink-2); }
.list { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: 16px 44px 1fr auto; gap: 6px; align-items: center; width: 100%; height: 44px; border-bottom: 1px solid var(--line); text-align: left; }
.row .m { font: 500 12px var(--mono); }
.row .w { font: 500 11.5px var(--mono); color: var(--ink-2); }
.card { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; margin: 4px 0 10px; animation: rise 160ms var(--ease); }
@keyframes rise { from { opacity: 0; } }
.l1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card .mag { font: 500 17px/17px var(--mono); }
.card .type { font-size: 12px; color: var(--ink-2); flex: 1; }
.x { width: 44px; height: 44px; margin: -12px -12px -12px 0; display: grid; place-items: center; font-size: 16px; }
.card .place { font: 700 14px/1.3 var(--sans); margin: 4px 0 2px; }
.card .time { font-size: 12px; }
.card .dep .mono { font: 500 12px var(--mono); }
.card .dep { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.card .small { margin: 3px 0; }
.card .addr { margin-top: 6px; }
.seg-inline { margin: 8px 0; }

/* tools, Layers, legend, About, section, stories */
#tools { position: absolute; top: 54px; right: 8px; display: grid; gap: 8px; }
.tool { position: relative; width: 36px; height: 36px; border-radius: 5px; display: grid; place-items: center; font-size: 10px; }
.tool::after { content: ''; position: absolute; inset: -5px; }
.tool[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.panel { z-index: 1; position: absolute; top: 54px; right: 52px; width: 232px; max-height: calc(100% - var(--sheet-h) - 150px); overflow-y: auto; padding: 0 12px 6px; border-radius: 6px; }
.panel h2, .legend-card h2, #about h2 { font: 700 12px var(--sans); color: var(--ink-2); margin: 12px 0 4px; }
.sw { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 44px; font-size: 13.5px; border-bottom: 1px solid var(--line); }
.sw i { position: relative; width: 28px; height: 16px; border: 1px solid var(--line-strong); border-radius: 8px; flex: none; }
.sw i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-2); transition: transform 120ms var(--ease); }
.sw[aria-checked="true"] i { background: var(--ink); border-color: var(--ink); }
.sw[aria-checked="true"] i::after { background: var(--on-ink); transform: translateX(12px); }
.legend-card { align-self: flex-end; width: 290px; padding: 0 10px 6px; border-radius: 6px; pointer-events: auto; box-shadow: 0 2px 8px rgba(0,0,0,.12); animation: rise 160ms var(--ease); }
.krow { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: 11.5px; }
.krow canvas { flex: none; }
#about { position: absolute; top: var(--top-h); left: 0; right: 0; bottom: 0; z-index: 4; overflow-y: auto; overscroll-behavior: contain; background: var(--panel); padding: 4px 16px calc(24px + env(safe-area-inset-bottom)); outline: none; }
#about > * { max-width: 640px; }
#about h3 { font: 700 13.5px/1.3 var(--sans); margin: 12px 0 2px; }
#about p { margin: 5px 0; }
.addr { font: 500 11px var(--mono); color: var(--ink-2); word-break: break-all; user-select: text; -webkit-user-select: text; }
.ver { height: 44px; font: 500 11.5px var(--mono); color: var(--ink-2); }
#perf { position: absolute; left: 12px; top: 54px; margin: 0; padding: 2px 6px; font-size: 10px; border: 1px solid var(--line); border-radius: 3px; white-space: pre-line; }
.plot { display: block; margin: 8px 0 4px; }
.dash { display: inline-block; width: 16px; border-top: 1.5px dashed var(--ink-3); vertical-align: middle; margin-right: 6px; }
.row.story { grid-template-columns: 36px auto 1fr; }
.row.story .p { font-weight: 700; }
.row.story .w { font: 400 12px var(--sans); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn { position: relative; height: 28px; margin: 8px 0; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 5px; font-size: 11.5px; }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); font-weight: 700; }
.card h3.place { margin: 0; }

/* focus mode (DESIGN §22): the map, the record strip as a band, the credit line */
#top, #chips, #tools, #legend, #grip, #body, #live-win, #largest { transition: opacity 160ms var(--ease); }
.fx { opacity: 0; }
.focus #map { top: 0; }
.focus #sheet { padding-top: 6px; }
.focus #head { border-bottom: 0; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
.ghost { color: var(--ink); position: absolute; top: calc(8px + env(safe-area-inset-top)); right: 8px; width: 36px; height: 36px; border-radius: 5px; border: 1px solid var(--ink-2); display: grid; place-items: center; }
.ghost::after { content: ''; position: absolute; inset: -5px; }
.ghost svg { filter: drop-shadow(0 0 1px var(--bg)) drop-shadow(0 0 1px var(--bg)); }
.fcard { align-self: stretch; max-height: 45vh; overflow-y: auto; padding: 0 12px; border-radius: 6px; pointer-events: auto; animation: rise 160ms var(--ease); }
.fcard .card { border: 0; padding: 10px 0; margin: 0; animation: none; }

@media (min-width: 700px) {
  #map { right: 380px; }
  #sheet { top: var(--top-h); left: auto; width: 380px; height: auto; border-radius: 0; border-top: 0; border-left: 1px solid var(--line); }
  #grip { display: none; }
  .focus #map { right: 0; }
  .focus #sheet { top: auto; left: 0; width: auto; height: var(--sheet-h); border-left: 0; border-top: 1px solid var(--line); border-radius: 6px 6px 0 0; }
}
@media (prefers-color-scheme: dark) { .legend-card { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) {
  #sheet, #foot, .seg button, .chips button, .sw i::after, #top, #chips, #tools, #legend, #grip, #body, #live-win, #largest { transition: none; }
  .card, .legend-card, .fcard { animation: none; }
}