/* Cyprus Quakes. A raw page inherits nothing from the site, so the tokens are
   restated from src/styles/tokens.css - a test holds --paper to that file.
   The chart's own two colours - #ff5a3c for the strongest events and the
   hatch, #3f92bc for the complete bars - live only in app.js's drawChart,
   not as custom properties here: a <canvas> cannot read one without an
   explicit getComputedStyle call, so nothing here would ever consume them. */
:root {
  color-scheme: dark;
  --paper: #0f151e;
  --paper-raised: #141c28;
  --ink: #e9eef3;
  --ink-muted: #8ca0b3;
  --rule: #5a6c81;
  --accent: #f09a28;
  --glass: rgba(15, 21, 30, .74);
  --edge: rgba(233, 238, 243, .13);
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Bricolage Grotesque', 'Avenir Next', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* The grid: margin, corner control, the second horizontal, the strip. */
  --m: 24px;
  --ctl: 40px;
  --row2: 88px;
  --strip: 140px;
}

@font-face { font-family: 'Bricolage Grotesque'; font-weight: 800; font-display: swap; src: url(fonts/bricolage-grotesque-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); }

* { box-sizing: border-box; }
/* Nothing on this page scrolls: the map is pinned and the body is locked.
   overflow: clip removes the scroll container entirely where supported -
   overflow: hidden alone still leaves one a touch pan can reach, even with
   no scrollbar to show it. Where clip is unsupported it falls back to
   hidden, so both declarations stay. */
html, body {
  height: 100%; margin: 0;
  overflow: hidden;
  overflow: clip;
}
body { background: var(--paper); color: var(--ink); font: 15px/1.45 var(--font-body); }
#map { position: fixed; inset: 0; height: 100dvh; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Glass: the back link, the help button, the strip. */
.glass { background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

.back { position: absolute; top: var(--m); left: var(--m); z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: var(--ctl); padding: 0 14px 0 9px; border-radius: 999px; color: var(--ink); text-decoration: none; font: 500 14px var(--font-body); }
.back svg { width: 22px; height: 22px; }
.back .arrow { color: var(--accent); font-size: 15px; }

.help { position: absolute; top: var(--m); right: var(--m); z-index: 2; width: var(--ctl); height: var(--ctl); border-radius: 50%; color: var(--ink-muted); font: 600 17px var(--font-body); cursor: pointer; display: grid; place-items: center; padding: 0; }
.help:hover, .help:focus-visible { color: var(--ink); border-color: var(--rule); outline: none; }

/* The count is the heading: the page's claim, in the page's largest type. */
.big { position: absolute; top: var(--row2); left: var(--m); z-index: 1; margin: 0; display: flex; flex-direction: column; gap: 4px; font-weight: normal; pointer-events: none; }
.big::before { content: ''; position: absolute; inset: -88px -140px -80px -24px; z-index: -1; background: radial-gradient(ellipse at 20% 30%, rgba(15, 21, 30, .92), rgba(15, 21, 30, .6) 45%, rgba(15, 21, 30, 0) 72%); }
.big b { font: 800 112px/.9 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-left: -4px; text-shadow: 0 2px 4px rgba(0, 0, 0, .9), 0 6px 30px rgba(0, 0, 0, .9); }
.big span { font-size: 17px; color: var(--ink-muted); text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 3px 14px rgba(0, 0, 0, .9); }

/* The ruler: a pointer surface over the hidden range input. Its drawing is
   aria-hidden; the input inside it is the control assistive technology sees.
   The column itself takes no pointer events - only .hit, the 44px strip
   over the track, does - so the map beneath the rest of the 132px column
   still receives a drag normally. */
.ruler { position: absolute; top: var(--row2); right: var(--m); bottom: calc(var(--strip) + var(--m) * 2); z-index: 2; width: 132px; user-select: none; pointer-events: none; }
.ruler .hit { position: absolute; top: 0; bottom: 0; right: 0; width: 44px; pointer-events: auto; touch-action: none; cursor: ns-resize; }
.ruler svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.ruler .cap { position: absolute; top: 0; right: 10px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); text-shadow: 0 1px 4px rgba(0, 0, 0, .95); white-space: nowrap; }
.ruler .rl { position: absolute; right: 38px; transform: translateY(-50%); font: 500 11px/1 var(--font-mono); color: var(--ink); text-shadow: 0 1px 4px rgba(0, 0, 0, .95), 0 0 10px rgba(0, 0, 0, .9); white-space: nowrap; }
.ruler .rl.off { color: var(--ink-muted); }
.bubble { position: absolute; right: 42px; transform: translateY(-50%); white-space: nowrap; font: 500 13px var(--font-mono); color: var(--paper); background: var(--ink); padding: 4px 8px; border-radius: 6px; }
.bubble::after { content: ''; position: absolute; left: 100%; top: 50%; border: 5px solid transparent; border-left-color: var(--ink); transform: translateY(-50%); }
.ruler:has(#mag:focus-visible) .bubble { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The timeline strip. */
.strip { position: absolute; left: var(--m); right: var(--m); bottom: var(--m); z-index: 2; height: var(--strip); border-radius: 16px; display: flex; align-items: center; gap: 20px; padding: 12px var(--m); }
#chart { flex: 1; min-width: 0; height: 116px; display: block; touch-action: none; cursor: crosshair; }
.play { width: 56px; height: 56px; flex: none; border-radius: 50%; border: 1.5px solid var(--accent); background: rgba(240, 154, 40, .12); color: var(--accent); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0; font: 500 12px var(--font-mono); }
.play:hover, .play:focus-visible { background: rgba(240, 154, 40, .22); outline: none; }
.play .tri { width: 0; height: 0; border-left: 16px solid currentColor; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.play.playing .tri { width: 12px; height: 16px; border: 0; border-left: 4px solid currentColor; border-right: 4px solid currentColor; margin-left: 0; }
.play .yr:empty { display: none; }
.play:not(.playing) .yr { display: none; }
.play.playing { width: auto; padding: 0 16px 0 14px; border-radius: 999px; }
.chip { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--edge); background: rgba(233, 238, 243, .04); color: var(--ink); font: 500 12.5px var(--font-body); cursor: pointer; white-space: nowrap; }
.chip:hover, .chip:focus-visible { border-color: var(--rule); outline: none; }

/* MapLibre's compact attribution: kept - the tiles are ODbL - and lifted above the strip. */
.maplibregl-ctrl-bottom-left { bottom: calc(var(--strip) + var(--m)); left: var(--m); }
.maplibregl-popup-content { font: 14px/1.45 var(--font-body); color: #12202c; }
.card-row { display: flex; gap: 8px; }
.card-row span:first-child { color: #5b6f80; min-width: 74px; }

/* The help dialog. */
.about { width: min(620px, calc(100% - 32px)); max-height: min(820px, calc(100dvh - 32px)); padding: 0; border: 1px solid var(--edge); border-radius: 16px; background: var(--paper-raised); color: var(--ink); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .9); }
.about::backdrop { background: rgba(6, 9, 14, .55); }
.about header { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px 14px; }
.about h2 { font: 800 26px var(--font-display); margin: 0; }
.about .x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--edge); background: transparent; color: var(--ink); font-size: 20px; cursor: pointer; }
.dbody { padding: 0 28px 26px; display: flex; flex-direction: column; gap: 16px; overflow: auto; max-height: calc(min(820px, 100dvh - 32px) - 80px); }
.dbody h3 { font: 600 15px var(--font-body); margin: 0 0 4px; color: var(--accent); }
.dbody p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.dbody p + p { margin-top: 6px; }
.dbody a { color: var(--accent); }
.dbody table { border-collapse: collapse; margin-top: 10px; font: 13px var(--font-mono); font-variant-numeric: tabular-nums; }
.dbody th { text-align: left; font-weight: 500; color: var(--ink-muted); padding: 4px 18px 6px 0; border-bottom: 1px solid var(--edge); }
.dbody td { padding: 5px 18px 5px 0; border-bottom: 1px solid rgba(233, 238, 243, .06); }
.dbody .foot { font: 12px var(--font-mono); color: var(--ink-muted); margin-top: 8px; }

/* The phone: margin 16, controls 36, the strip flush with the edges.
   --strip is 12px top padding + 84px chart, then the bottom padding itself -
   not a fixed height with only the padding growing - so a notched phone's
   safe-area inset grows the strip and the canvas never overflows it. The
   ruler's `bottom` and .maplibregl-ctrl-bottom-left's lift both read --strip,
   so both follow it up automatically. */
@media (max-width: 40rem) {
  :root { --m: 16px; --ctl: 36px; --row2: 68px; --strip: calc(96px + max(22px, env(safe-area-inset-bottom))); }
  .back { padding: 0 11px 0 7px; }
  .back .host { display: none; }
  .big { right: 96px; }
  .big::before { inset: -60px -80px -60px -16px; }
  .big b { font-size: 64px; margin-left: -2px; }
  .big span { font-size: 14px; }
  .ruler { right: 14px; bottom: calc(var(--strip) + 16px); }
  .strip { left: 0; right: 0; bottom: 0; border-radius: 0; border-width: 1px 0 0; gap: 12px; padding: 12px var(--m) max(22px, env(safe-area-inset-bottom)); }
  #chart { height: 84px; }
  .play { width: 44px; height: 44px; }
  .play .tri { border-left-width: 13px; border-top-width: 8px; border-bottom-width: 8px; margin-left: 3px; }
  .maplibregl-ctrl-bottom-left { bottom: var(--strip); left: var(--m); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}