*, *::before, *::after { box-sizing: border-box; }
/* The gutter stays reserved when an overlay locks the page (overflow: hidden), so nothing shifts. */
html { font-size: 100%; scrollbar-gutter: stable; }
body {
  margin: 0; min-height: 100vh; color: var(--color-text);
  font: 400 0.9375rem / 1.5 var(--font-sans);
  background:
    radial-gradient(70rem 36rem at 8% -12rem, var(--glow-a), transparent 70%),
    radial-gradient(50rem 30rem at 100% 0, var(--glow-b), transparent 70%),
    var(--color-bg);
  background-repeat: no-repeat;
}
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-underline-offset: 0.2em; }
:focus-visible {
  outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 calc(var(--focus-width) + var(--focus-offset) + 1px) var(--color-focus-halo);
}
/* Programmatic-focus targets only: roving-tabindex cells and chart points also carry tabindex="-1" and keep their rings. */
:is(h1, h2, main, [role="dialog"])[tabindex="-1"]:focus-visible { outline: 0; box-shadow: none; }
.sr-only { position: absolute !important; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.eyebrow { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.hint { color: var(--color-text-muted); font-size: 0.8125rem; }
.tag {
  display: inline-flex; align-items: center; padding: 0.0625rem 0.375rem; border-radius: 0.25rem; border: 1px dashed var(--color-border-strong);
  color: var(--color-text-muted); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: 0.1em; white-space: nowrap;
}
.badge { display: inline-flex; padding: 0.0625rem 0.5rem; border-radius: var(--radius-pill); background: var(--color-badge-bg); color: var(--color-badge-text); font-size: 0.75rem; font-weight: 600; }
.mark { display: block; flex: none; }
.mark-xs { inline-size: 0.75rem; block-size: 1rem; }
.mark-sm { inline-size: 1rem; block-size: 1.375rem; }
.icon { inline-size: 1rem; block-size: 1rem; flex: none; }

.skip-link { position: absolute; left: var(--space-2); top: -4rem; z-index: var(--z-toast); background: var(--color-surface); padding: var(--space-2) var(--space-3); border-radius: var(--radius); }
.skip-link:focus { top: var(--space-2); }

/* Buttons: pills, one primary per screen. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-block-size: 2.5rem; padding: 0 1rem;
  border-radius: var(--radius-pill); border: 1px solid var(--color-border-strong); background: transparent; color: var(--color-text);
  font-size: 0.875rem; font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: none;
}
.btn:hover:not(:disabled) { background: var(--color-surface-2); }
.btn-primary { background: var(--color-cta); color: var(--color-cta-text); border-color: transparent; font-weight: 600; }
.btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--color-cta) 88%, var(--color-text)); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-ghost { border-color: transparent; color: var(--color-text-muted); }
.btn-ghost:hover:not(:disabled) { color: var(--color-text); }
.btn-lg { min-block-size: 3.25rem; padding: 0 1.5rem; font-size: 1rem; }
.icon-btn {
  display: inline-grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; flex: none; padding: 0; cursor: pointer;
  border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text);
}
.icon-btn .icon { inline-size: 1.125rem; block-size: 1.125rem; }
.icon-btn:hover { border-color: var(--color-border-strong); }
.icon-phone { display: none; }

/* Synthetic marker: a closable band on top, then a tag in the top bar for the rest of the session. */
.synth-band {
  position: relative; display: flex; align-items: center; gap: 0.75rem; min-block-size: 2.25rem; padding: 0.375rem 1.25rem;
  background: var(--color-synth); color: var(--color-synth-text); font-size: 0.8125rem; font-weight: 500;
}
.synth-band.is-leaving { position: absolute; inset-inline: 0; inset-block-start: 0; z-index: calc(var(--z-sticky) + 1); }
.synth-band strong { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.synth-band .stripes { flex: none; inline-size: 1.75rem; block-size: 0.875rem; border-radius: 2px; background: repeating-linear-gradient(135deg, var(--color-synth-text) 0 3px, transparent 3px 7px); }
.synth-short { display: none; }
.synth-about {
  margin-inline-start: auto; min-block-size: 2rem; padding: 0 0.25rem; border: 0; background: none; color: var(--color-synth-text);
  font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; cursor: pointer;
}
.synth-about:focus-visible, .synth-close:focus-visible { outline-color: var(--color-synth-text); box-shadow: none; }
.synth-close {
  display: grid; place-items: center; flex: none; inline-size: 2rem; block-size: 2rem; margin-inline-end: -0.375rem; padding: 0; border: 0;
  border-radius: 50%; background: none; color: var(--color-synth-text); cursor: pointer;
}
.synth-close .icon { inline-size: 1rem; block-size: 1rem; }
.synth-close:hover { background: rgb(255 255 255 / 0.16); }
.synth-tag {
  display: inline-flex; align-items: center; gap: 0.375rem; min-block-size: 1.75rem; padding: 0 0.625rem; border: 0;
  border-radius: var(--radius-pill); background: var(--color-synth); color: var(--color-synth-text); font: inherit;
  font-size: 0.75rem; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.synth-tag .stripes { inline-size: 0.875rem; block-size: 0.625rem; border-radius: 1px; background: repeating-linear-gradient(135deg, var(--color-synth-text) 0 2px, transparent 2px 4px); }
.synth-tag:hover { background: color-mix(in srgb, var(--color-synth) 88%, black); }
/* About popover: top layer, under the band on the right; a centered sheet-like card on phone. */
.synth-pop {
  position: fixed; inset: auto; inset-block-start: var(--pop-top, 2.75rem); inset-inline-end: 1rem; z-index: var(--z-toast);
  inline-size: min(24rem, calc(100vw - 2rem)); margin: 0; padding: 1rem 1.125rem 0.875rem; border: 1px solid var(--color-border);
  border-radius: var(--radius-card); background: var(--color-raised); color: var(--color-text); box-shadow: var(--shadow-overlay); font-size: 0.875rem;
}
.synth-pop[hidden] { display: none; }
.synth-pop[data-anchor="start"] { inset-inline-end: auto; inset-inline-start: max(1rem, min(var(--pop-start, 1rem), 100vw - 1rem - min(24rem, 100vw - 2rem))); }
.synth-pop-title { display: flex; align-items: center; gap: 0.5rem; margin-block-end: 0.5rem; font-size: 0.9375rem; font-weight: 700; }
.synth-pop-title::before { content: ""; inline-size: 1.25rem; block-size: 0.75rem; border-radius: 2px; background: repeating-linear-gradient(135deg, var(--color-synth) 0 3px, transparent 3px 7px); }
.synth-pop p { margin-block-end: 0.5rem; color: var(--color-text-muted); }
.synth-pop .synth-pop-not { color: var(--color-text); font-weight: 600; }
.synth-more { min-block-size: 2.25rem; padding: 0; border: 0; background: none; color: var(--color-accent); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }

/* Top bar: glass over the page. */
.topbar {
  position: sticky; inset-block-start: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: 1.5rem;
  min-block-size: var(--topbar-h); padding: 0 1.25rem; border-block-end: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--topbar-bg) 82%, transparent); color: var(--topbar-text);
}
/* In light the blurred grid colors read as haze through the bar, so it is nearly opaque there. */
.topbar { --topbar-glass: 72%; }
:root[data-theme="light"] .topbar { --topbar-glass: 92%; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .topbar { --topbar-glass: 92%; } }
@supports (backdrop-filter: blur(1px)) {
  .topbar { background: color-mix(in srgb, var(--topbar-bg) var(--topbar-glass), transparent); backdrop-filter: blur(1rem) saturate(1.4); }
}
.brand { display: flex; align-items: center; gap: 0.625rem; min-block-size: 2.75rem; border-radius: var(--radius-ctl); color: inherit; text-decoration: none; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.brand-mark { inline-size: 1.25rem; block-size: 1.75rem; }
.tabs { display: flex; gap: 0.25rem; padding: 0.25rem; border-radius: var(--radius-pill); background: var(--color-surface-2); border: 1px solid var(--color-border); }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: 2.25rem; padding: 0 1rem; cursor: pointer;
  border: 0; border-radius: var(--radius-pill); background: none; color: var(--topbar-muted); font-size: 0.875rem; font-weight: 500;
}
.tab:hover { color: var(--topbar-text); }
.tab[aria-selected="true"] { background: var(--color-text); color: var(--color-bg); }
.tab-ic { display: none; }
.tab-tag { padding: 0 0.375rem; border: 1px solid currentColor; border-radius: var(--radius-pill); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 0.5rem; }
.topbar :focus-visible { outline-color: var(--topbar-focus); box-shadow: 0 0 0 calc(var(--focus-width) + var(--focus-offset) + 1px) var(--topbar-focus-halo); }

.theme-seg { display: flex; padding: 0.1875rem; border-radius: var(--radius-pill); background: var(--color-surface-2); border: 1px solid var(--color-border); }
.theme-opt { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; padding: 0; border: 0; border-radius: var(--radius-pill); background: none; color: var(--color-text-muted); cursor: pointer; }
.theme-opt:hover { color: var(--color-text); }
.theme-opt[aria-checked="true"] { background: var(--color-raised); color: var(--color-text); box-shadow: 0 0 0 1px var(--color-border-strong); }

/* Page: a main column and, on desktop, the docked selection panel. */
.page { display: grid; grid-template-columns: minmax(0, 1fr) 0; }
.main-col { min-inline-size: 0; padding: 1.5rem 1.5rem 0; container-type: inline-size; container-name: main; }
.main-col > * { max-inline-size: 100rem; margin-inline: auto; }
@media (min-width: 64rem) {
  .page:has(> .panel-host.is-open:not(.is-sheet)) { grid-template-columns: minmax(0, 1fr) var(--panel-w); }
}

/* Context row: the area as the page title, the query as two chips. */
.context { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-block-end: 1.25rem; }
.context h1 { margin-block-start: 0.125rem; font-size: 2rem; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; }
.is-first-run .context-title, .is-first-run .query-summary, .is-first-run .context .status { display: none; }
.is-first-run .context { margin: 0; }
.is-first-run [data-slot="export"] { display: none; }
.status { flex-basis: 100%; color: var(--color-text-muted); font-size: 0.8125rem; }
.status:empty { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 2.5rem; padding: 0 0.875rem 0 0.75rem; cursor: pointer;
  border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
  font-size: 0.875rem; font-weight: 500; box-shadow: var(--shadow-card); max-inline-size: 100%;
}
.chip:hover:not(:disabled) { border-color: var(--color-border-strong); }
.chip:disabled { cursor: not-allowed; color: var(--color-text-muted); }
.chip[aria-expanded="true"], .chip[aria-pressed="true"] { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.chip .icon { color: var(--color-accent); }
.chip .chip-edit { color: var(--color-text-muted); }
.chip-text { min-inline-size: 0; overflow-wrap: anywhere; }

/* Query popover (desktop) and sheet (phone). The form logic lives in query-bar.js. */
.query-bar { position: relative; }
.query-form { display: none; }
.query-bar.sheet-open .query-form {
  position: absolute; inset-block-start: calc(100% + 0.5rem); inset-inline-start: 0; z-index: var(--z-popover);
  display: flex; flex-direction: column; gap: 1rem; inline-size: min(34rem, calc(100vw - 2rem)); max-block-size: calc(100dvh - 8rem); overflow: auto;
  padding: 1.25rem; border-radius: var(--radius-card); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-overlay);
  transform-origin: top left;
}
.is-first-run .query-bar.sheet-open .query-form { position: fixed; inset-block-start: calc(var(--topbar-h) + 3rem); inset-inline-start: 50%; translate: -50% 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.sheet-head strong { font-size: 1.125rem; font-weight: 700; }
.query-form fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.query-form legend { padding: 0; margin-block-end: 0.5rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.aoi-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.date-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8125rem; font-weight: 500; color: var(--color-text-muted); }
.field input {
  inline-size: 100%; min-block-size: 2.75rem; padding: 0 0.75rem; border-radius: var(--radius-ctl);
  border: 1px solid var(--color-border-strong); background: var(--color-surface-2); color: var(--color-text);
  font-family: var(--font-mono); font-size: 0.9375rem;
}
.field input[aria-invalid="true"] { border-color: var(--color-error); border-width: 2px; }
.field .hint { font-weight: 400; }
.field-msg { color: var(--color-error); font-size: 0.8125rem; }
.field-msg:empty { display: none; }
.presets { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-start: 0.75rem; }
.presets .label { inline-size: 100%; font-size: 0.8125rem; color: var(--color-text-muted); }
.presets .chips { gap: 0.375rem; }
.presets .chip, .range-presets .chip { min-block-size: 2.25rem; box-shadow: none; background: var(--color-surface-2); }
.range-presets { margin-block-start: 0.75rem; }
.actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.actions .btn-primary { min-inline-size: 7rem; }
.draw-map { display: none; align-self: flex-start; }

.map-panel { border-radius: var(--radius-ctl); }
.map-panel .skip-link { position: absolute; }
.map-head { display: flex; }
.map-toggle, .map-draw, .map-clear, .map-cancel {
  display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 2.5rem; padding: 0 1rem; cursor: pointer;
  border-radius: var(--radius-pill); border: 1px solid var(--color-border-strong); background: transparent; font-size: 0.875rem; font-weight: 500;
}
.map-draw[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-text); border-color: var(--color-accent); }
.map-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.75rem 0 0.5rem; }
.map-hint { color: var(--color-text-muted); font-size: 0.8125rem; }
.map-canvas { position: relative; z-index: var(--z-map); isolation: isolate; block-size: clamp(14rem, 30vh, 20rem); border: 1px solid var(--color-border-strong); border-radius: var(--radius-ctl); overflow: hidden; }
.map-canvas.is-drawing { cursor: crosshair; }
.map-status { margin-block-start: 0.25rem; color: var(--color-text-muted); font-size: 0.8125rem; }
.map-status:empty { display: none; }
.map-full-bar { display: none; }

/* Verdict row: the answer first. */
.verdict { display: grid; grid-template-columns: 1fr 1.25fr 0.95fr; gap: 1rem; margin-block-end: 1rem; }
.card { position: relative; padding: 1.25rem 1.375rem; border-radius: var(--radius-card); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); }
.card-hero { overflow: hidden; }
.card-hero::after { content: ""; position: absolute; inset-inline-end: -6rem; inset-block-start: -6rem; inline-size: 18rem; block-size: 18rem; border-radius: 50%; background: radial-gradient(closest-side, var(--glow-cell), transparent); opacity: 0.25; pointer-events: none; }
.hero-row { display: grid; grid-template-columns: 1fr; gap: 0.75rem; align-items: center; }
.hero-num { margin-block-start: 0.5rem; font-size: 3.75rem; line-height: 0.95; font-weight: 600; letter-spacing: -0.035em; font-variant-numeric: tabular-nums lining-nums; }
.unit-l { margin-block-start: 0.25rem; color: var(--color-text-muted); font-size: 0.875rem; }
.delta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-start: 0.875rem; color: var(--color-text-muted); font-size: 0.875rem; }
.delta.sub2 { margin-block-start: 0.5rem; font-size: 0.8125rem; }
.pill { display: inline-flex; padding: 0.125rem 0.5rem; border-radius: var(--radius-pill); font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pill-above { background: var(--color-fire-soft); color: var(--color-fire); }
.pill-below { background: var(--color-accent-soft); color: var(--color-accent); }
.pill-equal { background: var(--color-surface-2); color: var(--color-text); }
.radiant-mini { display: none; }
.radiant-card { display: grid; grid-template-columns: 12.5rem 1fr; gap: 1rem; align-items: center; padding: 0.5rem 1.25rem 0.5rem 0.5rem; }
.radiant-big .radiant { inline-size: 12.5rem; block-size: 12.5rem; }
.radiant-copy p { margin-block-start: 0.375rem; color: var(--color-text-muted); font-size: 0.8125rem; }
.radiant-copy .hint { font-size: 0.75rem; }
.facts { display: grid; align-content: center; padding: 0.5rem 1.25rem; }
.fact { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "k v" "s v"; align-items: center; gap: 0 1rem; padding: 0.6875rem 0; border-block-end: 1px solid var(--color-border); }
.fact:last-child { border-block-end: 0; }
.fact .k { grid-area: k; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; color: var(--color-text-muted); font-size: 0.8125rem; }
.fact .v { grid-area: v; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; text-align: end; font-variant-numeric: tabular-nums lining-nums; }
.fact .s { grid-area: s; color: var(--color-text-muted); font-size: 0.75rem; }
@container main (max-width: 72rem) {
  /* Narrow main (docked panel, tablet): the Radiant moves into the hero instead of taking a row. */
  .verdict { grid-template-columns: 1fr 1fr; }
  .radiant-card { display: none; }
  .hero-row { grid-template-columns: 1fr 8.5rem; }
  .radiant-mini { display: block; }
  .radiant-mini .radiant { inline-size: 8.5rem; block-size: 8.5rem; }
}

/* Caveat line. */
.caveat { margin-block-end: 1rem; }
.caveat-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.625rem 1rem; border-radius: var(--radius-ctl);
  background: var(--color-caveat-bg); border: 1px solid color-mix(in srgb, var(--color-caveat-border) 35%, transparent); color: var(--color-caveat-text); font-size: 0.875rem;
}
.caveat-line .icon { inline-size: 1.125rem; block-size: 1.125rem; color: var(--color-fire); }
.caveat-more { margin-inline-start: auto; min-block-size: 2.25rem; padding: 0 0.25rem; border: 0; background: none; color: var(--color-text); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }

/* Main view. */
#main-view:focus { outline: none; box-shadow: none; }
.view-calendar, .view-sensors, .view-anomalies, .view-live { view-transition-name: main-view; }

/* Footer. */
.site-footer {
  display: grid; grid-template-columns: 1.4fr 1fr 1.6fr; gap: 2rem; margin-block-start: 3rem;
  /* The last row sits between equal space: 1.25rem above (foot-bottom) and below, plus the safe area. */
  padding: 2rem 0 calc(1.25rem + env(safe-area-inset-bottom, 0px));
  border-block-start: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.8125rem;
}
.site-footer p, .site-footer ul { margin: 0 0 0.375rem; }
.site-footer ul { padding: 0; list-style: none; }
.site-footer li { margin-block-end: 0.375rem; }
.footer-name { display: flex; align-items: center; gap: 0.5rem; color: var(--color-text); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.foot-h { margin-block-end: 0.5rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.foot-links a { color: var(--color-text); }
.foot-bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--color-border); }
.foot-bottom p { margin: 0; }
.foot-bottom [data-slot="theme-foot"] { margin-inline-start: auto; }
.foot-version:empty { display: none; }

/* Update offer (service worker). */
.update-toast {
  position: fixed; inset-block-end: calc(1.25rem + env(safe-area-inset-bottom, 0px)); inset-inline: 1rem; z-index: var(--z-toast);
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; inline-size: fit-content; max-inline-size: 28rem; margin: 0 auto;
  padding: 0.75rem 1rem; border-radius: var(--radius-ctl); background: var(--color-text); color: var(--color-bg); font-size: 0.875rem; font-weight: 500; box-shadow: var(--shadow-overlay);
}

/* Toasts (toast.js): bottom right, bottom center on phone, with a countdown bar. */
.toast-host {
  position: fixed; inset-block-end: calc(1.25rem + env(safe-area-inset-bottom, 0px)); inset-inline-end: 1.25rem; z-index: var(--z-toast);
  display: grid; gap: 0.5rem; inline-size: min(24rem, calc(100vw - 2rem)); pointer-events: none;
}
.toast {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.625rem; overflow: hidden;
  padding: 0.75rem 0.5rem 0.875rem 0.875rem; border: 1px solid var(--color-border); border-radius: var(--radius-ctl);
  background: var(--color-raised); color: var(--color-text); box-shadow: var(--shadow-overlay); font-size: 0.875rem; font-weight: 500; pointer-events: auto;
}
.toast-icon { inline-size: 1.125rem; block-size: 1.125rem; color: var(--color-accent); }
.toast-error .toast-icon { color: var(--color-error); }
.toast-msg { overflow-wrap: anywhere; }
.toast-close { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border: 0; border-radius: 50%; background: none; color: var(--color-text-muted); cursor: pointer; }
.toast-close:hover { background: var(--color-surface-2); color: var(--color-text); }
.toast-close .icon { inline-size: 1rem; block-size: 1rem; }
.toast-bar { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 0.1875rem; background: var(--color-accent); transform-origin: left center; }
.toast-error .toast-bar { background: var(--color-error); }

/* Selection panel: docked on desktop, bottom sheet below 64rem. */
.panel-host { min-inline-size: 0; }
.panel-host:not(.is-open) { display: none; }
.panel-host.is-open:not(.is-sheet) {
  position: sticky; inset-block-start: var(--topbar-h); block-size: calc(100dvh - var(--topbar-h)); overflow: auto; overscroll-behavior: contain;
  border-inline-start: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-surface) 92%, transparent); box-shadow: var(--shadow-panel);
}
@supports (backdrop-filter: blur(1px)) { .panel-host.is-open:not(.is-sheet) { backdrop-filter: blur(1.25rem); } }
.panel { padding: 1.5rem 1.5rem 2rem; }
.panel-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.panel-top .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; }
.panel-title { margin-block-start: 0.25rem; font-size: 1.75rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
.panel-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin: 1rem 0 0.25rem; }
.panel-num { font-size: 3.25rem; line-height: 1; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums lining-nums; }
.panel-unit { color: var(--color-text-muted); }
.cellchip { align-self: center; inline-size: 1rem; block-size: 1rem; border-radius: 0.25rem; }
.meta-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 1.25rem; }
.meta { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3125rem 0.625rem; border-radius: var(--radius-pill); background: var(--color-surface-2); border: 1px solid var(--color-border); font-size: 0.8125rem; }
.cmp { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.25rem 1rem; margin-block-end: 1rem; padding: 1rem; border-radius: 1rem; background: var(--color-surface-2); border: 1px solid var(--color-border); }
.cmp-x { font-size: 2.25rem; line-height: 1; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; color: var(--color-text); }
.cmp-above .cmp-x { color: var(--color-fire); }
.cmp-below .cmp-x { color: var(--color-accent); }
.cmp-t { font-size: 0.875rem; }
.cmp-t small { display: block; color: var(--color-text-muted); font-size: 0.8125rem; }
.cmp-none { display: block; color: var(--color-text-muted); font-size: 0.875rem; }
.sect { display: flex; align-items: center; gap: 0.5rem; margin: 1.25rem 0 0.5rem; }
.bars .bar-strip { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.panel-note { margin: 1rem 0; color: var(--color-text-muted); font-size: 0.8125rem; }
.sats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.sat { padding: 0.625rem 0.75rem; border-radius: var(--radius-ctl); background: var(--color-surface-2); border: 1px solid var(--color-border); font-size: 0.8125rem; }
.sat b { display: flex; align-items: center; gap: 0.375rem; font-weight: 600; }
.sat b i { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; }
.sat-modis b i { background: var(--sensor-modis); }
.sat-viirs b i { background: var(--sensor-viirs); }
.sat span { color: var(--color-text-muted); }
.panel-caveats { margin-block-start: 1rem; font-size: 0.8125rem; color: var(--color-text-muted); }
.panel-caveats summary { cursor: pointer; color: var(--color-text); font-weight: 500; min-block-size: 1.5rem; }
.panel-caveats ul { padding-inline-start: 1rem; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 1.25rem; }
.kbd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-block-start: 1rem; color: var(--color-text-muted); font-size: 0.75rem; }
kbd { padding: 0.125rem 0.375rem; border-radius: 0.3125rem; border: 1px solid var(--color-border-strong); border-block-end-width: 2px; color: var(--color-text); font: 500 0.6875rem var(--font-mono); }
.detail-list { margin: 0 0 1rem; }
.detail-row { display: flex; justify-content: space-between; gap: 0.75rem; padding-block: 0.5rem; border-block-end: 1px solid var(--color-border); font-size: 0.875rem; }
.detail-row dt { color: var(--color-text-muted); }
.detail-row dd { margin: 0; font-weight: 600; text-align: end; }
.grabber { inline-size: 2.5rem; block-size: 0.3125rem; margin: 0.25rem auto 0.75rem; border-radius: var(--radius-pill); background: var(--color-border-strong); }
.panel-host.is-sheet .scrim, .drawer-backdrop { position: fixed; inset: 0; background: var(--scrim); }
.panel-host.is-sheet .scrim { z-index: var(--z-sheet); }
.panel-host.is-sheet .panel {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-sheet); max-block-size: 78vh; overflow: auto; overscroll-behavior: contain;
  padding: 0.5rem 1.125rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  background: var(--color-surface); box-shadow: var(--shadow-overlay);
}
.panel-host:not(.is-sheet) .grabber { display: none; }
@media (min-width: 40rem) { .panel-host.is-sheet .panel { inset-inline: max(1rem, calc(50% - 22rem)); } }
html.sheet-open, html.drawer-open { overflow: hidden; }
/* Overlay scrollbars: thin and quiet, like on a phone. The ::-webkit-scrollbar rules only matter
   where scrollbar-color is unsupported, since browsers ignore them once it is set. */
.drawer-panel, .panel-host, .panel-host.is-sheet .panel, .query-form, .data-table-scroll {
  scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent;
}
@supports not (scrollbar-color: auto) {
  :is(.drawer-panel, .panel-host, .panel-host.is-sheet .panel, .query-form, .data-table-scroll)::-webkit-scrollbar { width: 0.375rem; height: 0.375rem; }
  :is(.drawer-panel, .panel-host, .panel-host.is-sheet .panel, .query-form, .data-table-scroll)::-webkit-scrollbar-track { background: transparent; }
  :is(.drawer-panel, .panel-host, .panel-host.is-sheet .panel, .query-form, .data-table-scroll)::-webkit-scrollbar-thumb { border-radius: var(--radius-pill); background: var(--color-border-strong); }
}

/* Method drawer: floating from the right, a sheet on phone. */
.drawer-backdrop { z-index: var(--z-drawer); }
.drawer-panel {
  position: fixed; inset-block: 0.75rem; inset-inline-end: 0.75rem; z-index: var(--z-drawer); inline-size: min(32rem, calc(100vw - 1.5rem));
  overflow: auto; overscroll-behavior: contain; padding: 1.75rem 1.75rem 2rem; border-radius: var(--radius-sheet);
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-overlay);
}
.drawer-panel > .grabber { display: none; }
.drawer-panel h2 { margin: 0.375rem 0 0.5rem; font-size: 1.75rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
.drawer-panel .lead { margin-block-end: 1.25rem; color: var(--color-text-muted); }
.drawer-panel .note { color: var(--color-text-muted); font-size: 0.8125rem; }
.timeline { display: block; inline-size: 100%; block-size: auto; }
.tl-axis { stroke: var(--color-border-strong); stroke-width: 1; }
.tl-overlap { stroke: var(--color-text); stroke-opacity: 0.5; stroke-dasharray: 3 3; }
/* The viewBox matches the rendered width, so these sizes are what the reader gets. */
.tl-tick { fill: var(--color-text-muted); font: 0.6875rem var(--font-mono); }
.tl-label { fill: var(--color-text); font: 500 0.75rem var(--font-sans); }
.tl-modis { fill: var(--sensor-modis); }
.tl-viirs { fill: var(--sensor-viirs); }
.tl-second { opacity: 0.7; }
.flame-key { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; padding: 1rem; border-radius: 1rem; border: 1px solid var(--color-border); }
.mark-key { inline-size: 2.75rem; block-size: 4rem; }
.flame-key ul { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; }
.flame-key i { display: inline-block; inline-size: 0.625rem; block-size: 0.625rem; margin-inline-end: 0.5rem; border-radius: 50%; }
.key-modis { background: var(--sensor-modis); }
.key-viirs { background: var(--sensor-viirs); }
.key-harm { background: var(--sensor-harm); box-shadow: 0 0 0 1px var(--color-border-strong); }
.steps { display: grid; gap: 0.75rem; margin: 1.25rem 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 2rem 1fr; align-items: start; gap: 0.75rem; padding: 0.875rem; border-radius: 1rem; background: var(--color-surface-2); border: 1px solid var(--color-border); font-size: 0.875rem; counter-increment: s; }
.steps li::before { content: counter(s); display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--color-raised); border: 1px solid var(--color-border-strong); font: 500 0.875rem var(--font-mono); }
.steps b { display: block; margin-block-end: 0.125rem; }
.drawer-section { margin-block-start: 1.25rem; padding-block-start: 1rem; border-block-start: 1px solid var(--color-border); font-size: 0.875rem; }
.drawer-section h3 { margin-block-end: 0.5rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.drawer-section p, .drawer-section li { margin-block-end: 0.375rem; }
.drawer-section ul { padding-inline-start: 1rem; }
.synth-note { padding: 0.5rem 0.75rem; border-radius: var(--radius-ctl); background: var(--color-synth); color: var(--color-synth-text); font-weight: 600; }

/* First run: the question, the Radiant of an example, three example cards. */
.first-run { max-inline-size: 81rem; margin-inline: auto; padding-block: 0 1rem; }
.hero { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 2rem; }
.hero-title { margin: 1rem 0 1.25rem; font-size: clamp(2.625rem, 1.6rem + 3vw, 4.25rem); line-height: 1; font-weight: 700; letter-spacing: -0.035em; }
.hero-title em { font-style: normal; color: var(--color-highlight); }
.hero .lead { max-inline-size: 34rem; margin-block-end: 2rem; color: var(--color-text-muted); font-size: 1.1875rem; }
.cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cover { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 2.25rem 0 0; }
.cover div { display: flex; flex-direction: column-reverse; }
.cover dd { margin: 0; font-size: 1.25rem; font-weight: 500; }
.cover dt { color: var(--color-text-muted); font-size: 0.8125rem; }
.hero-art { display: grid; place-items: center; margin: 0; min-block-size: 20rem; }
.radiant-hero { inline-size: min(34rem, 100%); container-type: inline-size; }
/* SVG text scales with the Radiant (viewBox 240 units wide with month abbreviations): below 20rem
   the default 7 units shrink under 0.6875rem, so 10.5 units keep them at 11px or more from 16rem up. */
@container (width < 20rem) { .radiant-hero .rad-labels.is-abbr text { font-size: 10.5px; } }
.radiant-hero .radiant { inline-size: 100%; block-size: auto; aspect-ratio: 1; }
.hero-art figcaption { margin-block-start: 0.75rem; color: var(--color-text-muted); font-size: 0.8125rem; text-align: center; }
.examples { margin-block-start: 2rem; }
.examples h2 { margin-block-end: 0.875rem; }
.ex-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.ex {
  display: grid; gap: 0.75rem; padding: 1.125rem 1.25rem; border-radius: var(--radius-card); text-align: start; cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); color: var(--color-text);
}
.ex:hover { border-color: var(--color-border-strong); }
.ex-t { display: flex; justify-content: space-between; align-items: center; font-size: 1.0625rem; font-weight: 600; }
.ex-t .icon { inline-size: 1.25rem; block-size: 1.25rem; color: var(--color-text-muted); }
.ex-c, .ex-foot { color: var(--color-text-muted); font-size: 0.8125rem; }
.ribbon { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
.ribbon i { block-size: 1.5rem; border-radius: 0.25rem; }
.ribbon i.is-loading { background: var(--color-surface-2); }
.ribbon-l { display: grid; grid-template-columns: repeat(12, 1fr); margin-block-start: -0.375rem; color: var(--color-text-muted); font-size: 0.625rem; text-align: center; }

/* Loading, error and zero states. */
.state { padding-block: 0.5rem 1rem; }
.state-title { margin-block-end: 0.5rem; font-size: 1.375rem; font-weight: 700; }
.state-line { font-size: 1rem; }
.state-error { color: var(--color-text); }
.state-action { margin-block-start: 1rem; }
.state-box-loading > p { position: absolute; }
.state-box-loading .state-line { color: var(--color-text-muted); font-size: 0.8125rem; }
.skeleton { display: grid; gap: 1rem; padding-block-start: 1.75rem; }
.sk-row { display: grid; grid-template-columns: 1fr 1.25fr 0.95fr; gap: 1rem; }
.sk-card { block-size: 12.5rem; border-radius: var(--radius-card); background: var(--color-surface); border: 1px solid var(--color-border); }
.sk-line { block-size: 2.75rem; border-radius: var(--radius-ctl); background: var(--color-surface); }
.sk-grid { display: grid; grid-template-columns: repeat(13, 1fr); gap: 0.1875rem; padding: 1.25rem; border-radius: var(--radius-card); background: var(--color-surface); }
.skeleton-cell { block-size: 1.375rem; border-radius: var(--radius-cell); background: var(--color-surface-2); }

@media (max-width: 40rem) {
  .synth-band { gap: 0.5rem; padding: 0.375rem 1rem; font-size: 0.75rem; }
  .synth-band .stripes, .synth-long { display: none; }
  .synth-short { display: inline; }
  .synth-tag-rest { display: none; }
  .synth-tag { padding-inline: 0.5rem; }
  .topbar { position: relative; gap: 0.75rem; min-block-size: 3.5rem; padding: 0 1rem; backdrop-filter: none; }
  .brand { font-size: 0.8125rem; }
  .desk-only { display: none !important; }
  .btn-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .icon-phone { display: block; }
  .topbar-actions .btn { inline-size: 2.75rem; min-block-size: 2.75rem; padding: 0; border-color: var(--color-border); background: var(--color-surface-2); color: var(--color-text); }
  .topbar-actions .btn .icon { inline-size: 1.125rem; block-size: 1.125rem; }
  .topbar-actions .btn-primary { background: var(--color-cta); color: var(--color-cta-text); }
  /* The tablist becomes the bottom tab bar. */
  .tabs {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-sticky); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding: 0.375rem 0.5rem calc(0.375rem + env(safe-area-inset-bottom, 0px)); border: 0; border-block-start: 1px solid var(--color-border); border-radius: 0;
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  }
  @supports (backdrop-filter: blur(1px)) { .tabs { background: color-mix(in srgb, var(--color-surface) 86%, transparent); backdrop-filter: blur(1.125rem) saturate(1.4); } }
  .tab { flex-direction: column; justify-content: center; gap: 0.1875rem; min-block-size: 3.25rem; padding: 0.25rem 0; border-radius: var(--radius-ctl); font-size: 0.6875rem; color: var(--color-text-muted); }
  .tab[aria-selected="true"] { background: none; color: var(--color-text); }
  .tab-ic { display: grid; place-items: center; inline-size: 3.5rem; block-size: 1.875rem; border-radius: var(--radius-pill); }
  .tab-ic .icon { inline-size: 1.25rem; block-size: 1.25rem; }
  .tab[aria-selected="true"] .tab-ic { background: var(--color-accent-soft); color: var(--color-accent); }
  .tab-tag { display: none; }
  body { padding-block-end: calc(4.25rem + env(safe-area-inset-bottom, 0px)); }
  .main-col { padding: 1rem 1rem 0; }
  .context { gap: 0.75rem; margin-block-end: 1rem; }
  .context h1 { font-size: 1.625rem; }
  .query-bar { inline-size: 100%; }
  .query-summary .chip { flex: 1 1 auto; }
  .query-bar.sheet-open .query-form, .is-first-run .query-bar.sheet-open .query-form {
    position: fixed; inset: auto 0 0; translate: none; z-index: var(--z-sheet); inline-size: auto; max-block-size: 92dvh;
    padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  }
  html.query-open { overflow: hidden; }
  /* A transform (the sheet's entrance fill) would make the sheet the containing block of the fixed full-screen map. */
  .query-bar.sheet-open .query-form:has(.map-panel.is-full) { animation: none; transform: none; translate: none; }
  html.query-open body::after { content: ""; position: fixed; inset: 0; z-index: calc(var(--z-sheet) - 1); background: var(--scrim); }
  .draw-map { display: inline-flex; }
  .map-panel { display: none; }
  .map-panel.is-full { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: var(--z-map-full); margin: 0; border-radius: 0; background: var(--color-surface); }
  .map-panel.is-full .map-head { display: none; }
  .map-panel.is-full .map-body { flex: 1; display: flex; flex-direction: column; min-block-size: 0; padding: 0.75rem; }
  .map-panel.is-full .map-canvas { flex: 1; block-size: auto; min-block-size: 0; }
  .map-panel.is-full .map-full-bar { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.75rem; }
  .map-panel.is-full .map-full-bar button { flex: 1; }
  body.map-open { overflow: hidden; }
  .verdict { grid-template-columns: 1fr; gap: 0.75rem; }
  .radiant-card, .facts { display: none; }
  .card { padding: 1rem 1.125rem; }
  .hero-row { grid-template-columns: 1fr 8.5rem; }
  .radiant-mini { display: block; }
  .radiant-mini .radiant { inline-size: 8.5rem; block-size: 8.5rem; }
  .hero-num { font-size: 3rem; }
  .caveat-line { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.25rem 0.625rem; padding: 0.625rem 0.875rem; font-size: 0.8125rem; }
  .caveat-line .badge { display: none; }
  .caveat-text::after { content: " Preliminary."; font-weight: 600; }
  .caveat-more { grid-column: 2; justify-self: start; margin: 0; }
  .site-footer { grid-template-columns: 1fr; gap: 1.25rem; }
  .foot-bottom [data-slot="theme-foot"] { margin-inline-start: 0; }
  .drawer-panel { inset: auto 0 0; inline-size: auto; max-block-size: 92dvh; padding: 0.5rem 1.125rem 2rem; border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; }
  .drawer-panel > .grabber { display: block; }
  .first-run { padding-block: 0 1rem; }
  .hero { grid-template-columns: 1fr; gap: 1.25rem; }
  .hero-art { order: -1; min-block-size: 0; }
  .radiant-hero { inline-size: 16rem; }
  .hero .lead { margin-block-end: 1.25rem; font-size: 1rem; }
  .cta .btn { flex: 1 1 100%; }
  .cover { margin-block-start: 1.5rem; gap: 1rem; }
  .sk-row { grid-template-columns: 1fr; }
  .sk-row .sk-card:not(:first-child) { display: none; }
  .sk-grid { grid-template-columns: repeat(12, 1fr); padding: 0.75rem; }
  .update-toast { inset-block-end: calc(5rem + env(safe-area-inset-bottom, 0px)); }
  .toast-host { inset-block-end: calc(5rem + env(safe-area-inset-bottom, 0px)); inset-inline: 1rem; margin-inline: auto; }
}
@media (min-width: 40.0625rem) { .drawer-section:last-child { display: none; } }

/* Motion: only transform, opacity and filter animate, plus the panel's one column change. Every
   animation is declared for no-preference; the reduce block lists its replacement. */
@media (prefers-reduced-motion: no-preference) {
  /* The bar shows the time left and stops while the toast is hovered or focused; reduced motion hides it. */
  .toast-bar { animation: toast-countdown var(--toast-ms, 5s) linear forwards; }
  .toast.is-paused .toast-bar { animation-play-state: paused; }
  .toast { animation: toast-in var(--dur-3) var(--ease-enter) both; }
  .page { transition: grid-template-columns var(--dur-4) var(--ease-enter); }
  .panel-host:not(.is-sheet) .panel.is-entering { animation: panel-in var(--dur-4) var(--ease-enter) both; }
  .panel.is-swapping > *, .panel.is-entering > * { animation: rise var(--dur-3) var(--ease-enter) both; }
  .panel > *:nth-child(2) { animation-delay: 20ms; }
  .panel > *:nth-child(3) { animation-delay: 40ms; }
  .panel > *:nth-child(4) { animation-delay: 60ms; }
  .panel > *:nth-child(5) { animation-delay: 80ms; }
  .panel > *:nth-child(n + 6) { animation-delay: 100ms; }
  .panel-host.is-sheet .panel.is-entering { animation: sheet-in var(--dur-4) var(--ease-enter) both; }
  .panel-host.is-sheet .scrim, .drawer-backdrop { animation: fade-in var(--dur-3) linear both; }
  .drawer-panel { animation: drawer-in var(--dur-4) var(--ease-enter) both; }
  .query-bar.sheet-open .query-form { animation: pop-in var(--dur-2) var(--ease-enter) both; }
  .state-box-loading { animation: fade-in var(--dur-2) linear 300ms both; }
  .skeleton-cell, .sk-card, .sk-line { animation: shimmer 1.2s ease-in-out 300ms infinite; }
  .btn, .chip, .tab, .theme-opt { transition: background-color var(--dur-1) var(--ease-std), color var(--dur-1) var(--ease-std), border-color var(--dur-1) var(--ease-std); }
  /* Chrome sends every click to <html> while a transition runs, so keep the whole swap at 160ms. */
  ::view-transition-group(*), ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-2); }
  ::view-transition-old(main-view) { animation: fade-out 120ms var(--ease-exit) both; }
  ::view-transition-new(main-view) { animation: rise var(--dur-2) var(--ease-enter) both; }
  .vt-theme::view-transition-old(root), .vt-theme::view-transition-new(root) { animation-duration: 200ms; }
  @media (max-width: 40rem) {
    .query-bar.sheet-open .query-form, .drawer-panel { animation: sheet-in var(--dur-4) var(--ease-enter) both; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .toast-bar { display: none; }
  *, *::before, *::after { scroll-behavior: auto !important; }
  .panel.is-entering, .panel.is-swapping, .drawer-panel, .drawer-backdrop, .panel-host.is-sheet .scrim, .query-bar.sheet-open .query-form { animation: fade-in var(--dur-2) linear both; }
  .state-box-loading { animation: fade-in 1ms linear 300ms both; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@keyframes panel-in { from { transform: translateX(3rem); opacity: 0; } }
@keyframes rise { from { transform: translateY(0.5rem); opacity: 0; } }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes drawer-in { from { transform: translateX(calc(100% + 1rem)); } }
@keyframes pop-in { from { transform: scale(0.96); opacity: 0; } }
@keyframes toast-countdown { to { transform: scaleX(0); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(0.75rem); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes shimmer { 50% { opacity: 0.55; } }

@media (forced-colors: active) {
  .card, .chip, .btn, .caveat-line, .cal-cell, .swatch, .panel, .drawer-panel, .query-form, .tabs, .theme-seg, .icon-btn { border: 1px solid CanvasText; }
  .tab[aria-selected="true"], .theme-opt[aria-checked="true"], .seg-opt[aria-checked="true"] { outline: 2px solid Highlight; }
  .cal-cell.is-selected { outline: 3px solid Highlight; }
  .cal-cell:focus-visible { outline: 3px solid CanvasText; outline-offset: 2px; }
  .synth-tag { border: 1px solid CanvasText; }
}

/* Below 25rem the word mark gives way to the synthetic tag; the link keeps its accessible name. */
@media (width < 25rem) {
  .topbar:has(.synth-tag:not([hidden])) .brand span { display: none; }
}