/* FireWatcher — near-monochrome.

   THE ONE RULE THAT SHAPES EVERYTHING:
   colour on this page only ever means something needs attention.

   "Clear" gets no colour at all — not green. Absence of colour IS the
   all-clear. Status pages reach for green because they are reporting on
   themselves and want to look healthy; this page is reporting on a wildfire
   near somebody's house, and a cheerful green badge is the wrong register. It
   also means that when amber or red does appear, it is the only saturated
   thing on screen and cannot be missed.

   The neutrals are very slightly warm rather than blue-black. Pure #000/#111
   greys read as unconsidered, and a cool blue-black plus a saturated accent is
   the exact combination that made the previous pass look like a game HUD. The
   flame in the logo keeps its orange; nothing else on the page is orange. */

:root {
  color-scheme: dark;

  --bg:      #100f0f;
  --raised:  #191818;
  --panel:   #1e1d1d;
  --well:    #161515;
  --line:    #2d2b2b;
  --line-sq: #3a3737;

  --text:    #f4f3f2;
  --dim:     #a3a09d;
  --faint:   #6f6c6a;

  /* The only two colours in the interface. Neither is decorative. */
  --warn:    #e8a33d;
  --alarm:   #e5484d;

  /* Identity only — the mark. Never a UI colour. */
  --flame:   #f0a020;

  --ui:   ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --data: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --w: 34rem;
}

/* Dark is the preset, deliberately, and it no longer follows the operating
   system. This used to be an @media (prefers-color-scheme: light) block, which
   meant a visitor whose phone was in light mode got a light fire map with no
   way to change it — there is no theme toggle on any page. FireWatcher is read
   at night and in smoke as often as in daylight, and the map, the heat overlay
   and the severity colours were all chosen against the dark ground.

   The light palette is intact directly below, but only under an explicit
   :root[data-theme="light"]. If a toggle is ever added, it works immediately;
   until then nothing selects it automatically. */

:root[data-theme="light"] {
  color-scheme: light;
  --bg:      #faf9f8;
  --raised:  #ffffff;
  --panel:   #ffffff;
  --well:    #f2f0ee;
  --line:    #e2dfdc;
  --line-sq: #cfcbc7;
  --text:    #171615;
  --dim:     #5f5c59;
  --faint:   #8b8784;
  --warn:    #9a6212;
  --alarm:   #c02a2f;
}

*, *::before, *::after { box-sizing: border-box; }

/* The [hidden] attribute must always win.

   The UA stylesheet hides it with `[hidden] { display: none }` — specificity
   0-1-0. Any class rule that sets `display` (`.sheet { display: flex }`,
   `.mapfail { display: grid }`) has the SAME specificity and loads later, so it
   silently overrides `hidden` and the element stays on screen.

   That shipped: the map page's full-screen "couldn't load" panel is
   `position: fixed; inset: 0; z-index: 30`, so it covered a working map and
   every visitor saw a failure message over a map that had loaded fine. Nothing
   in the DOM said so either — `el.hidden` was correctly `true` the whole time,
   which is why property-based checks all passed.

   One line, and it makes `hidden` mean hidden everywhere. */
[hidden] { display: none !important; }


html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.55 var(--ui);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: min(var(--w), 100% - 2.5rem);
  margin-inline: auto;
}

.num { font-family: var(--data); font-variant-numeric: tabular-nums lining-nums; }

/* ---------- masthead ---------- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 0 0;
}

.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand img { width: 26px; height: 26px; border-radius: 7px; display: block; }
.brand b {
  font-size: 0.87rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.region { font-size: 0.8rem; color: var(--dim); }

/* ---------- the answer ---------- */

.status {
  margin-top: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.5rem 1.4rem 1.3rem;
}

/* The headline is the whole product. Set large, tight, and in sentence case —
   shouting in caps is the register this page is trying not to be in. */
.status h1 {
  margin: 0;
  font-size: clamp(1.5rem, 5.4vw, 1.95rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.021em;
  text-wrap: balance;
}
.status h1 .hl { color: var(--sev, inherit); }

.facts {
  margin: 1.35rem 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem 1.25rem;
  font-size: 0.87rem;
}
.facts dt { color: var(--dim); }
.facts dd {
  margin: 0;
  text-align: right;
  font-family: var(--data);
  font-variant-numeric: tabular-nums;
}

/* ---------- notices ---------- */

/* The only coloured blocks on the page. A left rule rather than a tinted fill:
   a filled warning panel dominates a layout permanently, and Central Oregon
   carries a Red Flag Warning most of the summer. */
.notice {
  margin-top: 0.7rem;
  display: flex;
  gap: 0.7rem;
  padding: 0.75rem 0.9rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--nc, var(--warn));
  border-radius: 8px;
  font-size: 0.87rem;
}
.notice b { color: var(--nc, var(--warn)); font-weight: 600; }
.notice.alarm { --nc: var(--alarm); }
.notice-sub { display: block; margin-top: 0.15rem; color: var(--dim); font-size: 0.8rem; }

/* ---------- primary action ---------- */

.go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  margin-top: 1.15rem;
  padding: 0.95rem 1rem;
  background: var(--text);
  color: var(--bg);
  border-radius: 9px;
  font-size: 0.97rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.14s;
}
.go:hover { opacity: 0.88; }
.go svg { width: 16px; height: 16px; }

.go-note {
  margin: 0.6rem 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--faint);
}

/* ---------- app notice ---------- */

/* A quiet pill, centred under the primary action. It is an announcement, not
   a status, so it stays in the neutral ink — the flame dot is the only mark of
   identity and the page's single non-status use of the brand colour.
   "iOS/Android" rather than "iOS and Android" keeps it on one line at 320px. */
.soon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: fit-content;
  margin: 0.85rem auto 0;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--dim);
  white-space: nowrap;
}

.soon-mark {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--flame);
  flex: 0 0 auto;
}

/* ---------- conditions ---------- */

.rows { margin-top: 2.1rem; border-top: 1px solid var(--line); }

.row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.row-k { color: var(--dim); }
.row-v { font-family: var(--data); font-variant-numeric: tabular-nums; text-align: right; }
.row-v .qual { font-family: var(--ui); color: var(--faint); font-size: 0.8rem; margin-left: 0.4rem; }
.row-v.warn { color: var(--warn); }
.row-v.alarm { color: var(--alarm); }

/* ---------- prose ---------- */

.sec { margin-top: 2.4rem; }
.sec h2 {
  margin: 0 0 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--faint);
}
.sec p { margin: 0 0 0.75rem; font-size: 0.92rem; color: var(--dim); max-width: 62ch; }
.sec p strong { color: var(--text); font-weight: 600; }
.sec p a { color: var(--text); text-decoration-color: var(--line-sq); text-underline-offset: 2px; }
.sec p:last-child { margin-bottom: 0; }

.sources { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.sources li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.84rem;
}
.sources span { color: var(--dim); }
.sources b { font-weight: 500; }

/* ---------- foot ---------- */

.foot {
  margin: 2.6rem 0 0;
  padding: 1.3rem 0 2.4rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--faint);
}
.foot p { margin: 0 0 0.5rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.9rem; }

/* ---------- loading ---------- */

.skeleton { color: var(--faint); }

@media (prefers-reduced-motion: no-preference) {
  .pending { animation: breathe 1.6s ease-in-out infinite; }
  @keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
}

/* ---------- saved location ---------- */

/* Quiet by design. It is a preference, not a status, so it stays in neutral
   ink and never competes with the headline it modifies. */
.homectl {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
  font-size: 0.78rem;
  color: var(--faint);
}
.homectl button {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dim);
  cursor: pointer;
}
.homectl button:hover { color: var(--text); border-color: var(--line-sq); }
.home-set { color: var(--dim); }