/* ============================================================================
   PHOENIX — design system layer.

   WHAT THIS IS. A token-driven visual layer applied OVER the existing Tailwind
   utility markup. It changes how the page looks and feels; it does not change a
   single id, data-i18n key, Leaflet class, or marker colour, so every existing
   script keeps working untouched.

   WHO IT IS FOR. A Sicilian firefighter or a farmer, usually one-handed, on a
   phone, often outdoors in hard sun, sometimes at 3am. That drives every choice
   below far more than fashion does:

     * The MAP stays the brightest thing on screen. Chrome recedes; evidence
       does not. Nothing here tints, dims, or restyles a detection marker.
     * Fire red is reserved. It means fire. It is never borrowed for a button,
       a border, or a hover state, so a red pixel always carries the same
       meaning.
     * Numbers are tabular and large. A KPI read at arm's length in sunlight is
       a different design problem from a dashboard read at a desk.
     * Motion is informative, never decorative: a live pulse means data just
       arrived. Every animation is disabled under prefers-reduced-motion.
     * Tap targets are >= 44px, and inputs are >= 16px so iOS never zooms.

   DARK MODE is a field feature, not a preference. A phone at full brightness at
   night on a fire line is a flashlight pointed at the person holding it.
   ============================================================================ */

:root {
  /* Surfaces — warm, paper-like, matching the existing stone palette. */
  --phx-bg:          #f7f5f1;
  --phx-bg-grad:     radial-gradient(1200px 600px at 50% -10%, #ffffff 0%, #f7f5f1 55%);
  --phx-surface:     #ffffff;
  --phx-surface-2:   #fbfaf8;
  --phx-border:      #e7e2da;
  --phx-border-strong: #d6cfc4;

  /* Ink */
  --phx-ink:         #171512;
  --phx-ink-2:       #4a453d;
  /* #857e73 measured 4.02:1 on white — below the 4.5:1 AA floor for normal text,
     and this token carries the KPI LABEL above every headline number as well as the
     sub-lines. On a product read outdoors in Sicilian sun that is the wrong place to
     be short. #736c63 keeps the same warm hue and clears 4.5:1 against all three
     light surfaces (white 5.18, surface-2 4.97, page ground 4.76). */
  --phx-ink-3:       #736c63;

  /* Command chrome — the dark strip that makes this read as an instrument. */
  --phx-chrome:      #14120f;
  --phx-chrome-2:    #1f1c17;
  --phx-chrome-ink:  #f2efe9;
  --phx-chrome-ink-2:#a8a196;
  --phx-chrome-line: rgba(255,255,255,0.09);

  /* Semantic. RED IS FIRE — never reused for chrome. */
  --phx-fire:        #dc2626;
  --phx-fire-soft:   rgba(220,38,38,0.12);
  --phx-watch:       #b45309;   /* monitoring / caution */
  --phx-watch-soft:  rgba(180,83,9,0.12);
  --phx-ok:          #047857;
  --phx-ok-soft:     rgba(4,120,87,0.12);
  --phx-cool:        #1d4ed8;
  --phx-muted:       #6b7280;

  --phx-r-sm: 8px;
  --phx-r:    12px;
  --phx-r-lg: 16px;

  /* Layered shadows read as physical depth rather than a grey smudge. */
  --phx-shadow-1: 0 1px 2px rgba(23,21,18,0.05), 0 1px 3px rgba(23,21,18,0.04);
  --phx-shadow-2: 0 2px 4px rgba(23,21,18,0.05), 0 8px 20px -6px rgba(23,21,18,0.12);
  --phx-shadow-3: 0 4px 8px rgba(23,21,18,0.06), 0 20px 40px -12px rgba(23,21,18,0.18);

  --phx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --phx-bg:          #100f0d;
    --phx-bg-grad:     radial-gradient(1200px 600px at 50% -10%, #1c1a16 0%, #100f0d 55%);
    --phx-surface:     #1a1815;
    --phx-surface-2:   #211e1a;
    --phx-border:      #2e2a24;
    --phx-border-strong: #3d3830;
    --phx-ink:         #f2efe9;
    --phx-ink-2:       #c4bdb1;
    --phx-ink-3:       #8d8578;
    --phx-chrome:      #0a0908;
    --phx-chrome-2:    #141210;
    --phx-fire:        #f4544b;
    --phx-watch:       #f0a04a;
    --phx-ok:          #34d399;
    --phx-shadow-1: 0 1px 2px rgba(0,0,0,0.4);
    --phx-shadow-2: 0 2px 4px rgba(0,0,0,0.4), 0 8px 20px -6px rgba(0,0,0,0.55);
    --phx-shadow-3: 0 4px 8px rgba(0,0,0,0.45), 0 20px 40px -12px rgba(0,0,0,0.6);
  }
}

/* ── page ground ─────────────────────────────────────────────────────────── */

body {
  background: var(--phx-bg) !important;
  background-image: var(--phx-bg-grad) !important;
  background-attachment: fixed;
  color: var(--phx-ink) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Tailwind's stone text utilities are used throughout; remap them onto the
   tokens so dark mode works without touching a single class in the markup. */
.text-stone-900, .text-stone-800 { color: var(--phx-ink) !important; }
.text-stone-700, .text-stone-600 { color: var(--phx-ink-2) !important; }
.text-stone-500, .text-stone-400 { color: var(--phx-ink-3) !important; }
.bg-white   { background-color: var(--phx-surface) !important; }
.bg-stone-50, .bg-stone-100 { background-color: var(--phx-surface-2) !important; }
.border-stone-200 { border-color: var(--phx-border) !important; }
.border-stone-300 { border-color: var(--phx-border-strong) !important; }

/* ── the command bar ─────────────────────────────────────────────────────── */

.phx-topbar {
  background: linear-gradient(180deg, var(--phx-chrome-2) 0%, var(--phx-chrome) 100%);
  border-bottom: 1px solid var(--phx-chrome-line);
  position: relative;
  isolation: isolate;
}
/* A single hairline of heat along the bottom edge: the one place chrome is
   allowed to use fire colour, because it is the product's own signature. */
.phx-topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220,38,38,0.55) 30%, rgba(245,158,11,0.55) 55%, transparent);
  z-index: 1;
}
.phx-topbar .phx-brand { color: var(--phx-chrome-ink); letter-spacing: -0.015em; }
.phx-topbar .phx-tagline { color: var(--phx-chrome-ink-2); }
.phx-topbar nav a, .phx-topbar nav button {
  color: var(--phx-chrome-ink-2) !important;
  border-radius: 6px; padding: 4px 8px; margin: -4px 0;
  transition: color .16s var(--phx-ease), background .16s var(--phx-ease);
}
.phx-topbar nav a:hover, .phx-topbar nav button:hover {
  color: var(--phx-chrome-ink) !important;
  background: rgba(255,255,255,0.07);
}

/* The wordmark: a small heat gradient, used once. */
.phx-wordmark {
  background: linear-gradient(92deg, #ffb37a 0%, #ff7a5c 45%, #f0544b 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-weight: 700;
}

/* Live indicator — a real signal, driven by JS adding .is-live. */
.phx-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--phx-chrome-ink-2);
}
.phx-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--phx-ink-3);
  box-shadow: 0 0 0 0 rgba(52,211,153,0.6);
}
.phx-live.is-live .phx-live-dot { background: #34d399; animation: phx-breathe 2.4s ease-in-out infinite; }
.phx-live.is-stale .phx-live-dot { background: var(--phx-watch); }
.phx-live.is-down  .phx-live-dot { background: var(--phx-fire); }
@keyframes phx-breathe {
  0%,100% { box-shadow: 0 0 0 0 rgba(52,211,153,0.55); }
  50%     { box-shadow: 0 0 0 5px rgba(52,211,153,0); }
}

/* ── KPI instruments ─────────────────────────────────────────────────────── */

.phx-stat {
  position: relative;
  background: var(--phx-surface);
  border: 1px solid var(--phx-border);
  border-radius: var(--phx-r);
  padding: 14px 16px 13px 18px;
  box-shadow: var(--phx-shadow-1);
  overflow: hidden;
  transition: transform .22s var(--phx-ease), box-shadow .22s var(--phx-ease), border-color .22s var(--phx-ease);
}
/* The accent rail carries the card's meaning without spending a whole colour
   field on it, so the number stays the loudest thing in the card. */
.phx-stat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--phx-rail, var(--phx-border-strong));
  opacity: .9;
}
.phx-stat:hover { transform: translateY(-2px); box-shadow: var(--phx-shadow-2); border-color: var(--phx-border-strong); }
.phx-stat--fire  { --phx-rail: var(--phx-fire); }
.phx-stat--watch { --phx-rail: var(--phx-watch); }
.phx-stat--ok    { --phx-rail: var(--phx-ok); }
.phx-stat--muted { --phx-rail: var(--phx-muted); }

.phx-stat-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--phx-ink-3); display: flex; align-items: center; gap: 6px;
}
.phx-stat-value {
  font-size: clamp(30px, 5.2vw, 40px); font-weight: 700; line-height: 1.02;
  letter-spacing: -0.03em; margin-top: 4px;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "ss01" 1;
}
.phx-stat--fire  .phx-stat-value { color: var(--phx-fire); }
.phx-stat--watch .phx-stat-value { color: var(--phx-watch); }
.phx-stat--ok    .phx-stat-value { color: var(--phx-ok); }
.phx-stat--muted .phx-stat-value { color: var(--phx-ink-2); }
.phx-stat-sub { font-size: 11.5px; line-height: 1.45; color: var(--phx-ink-3); margin-top: 5px; }

/* A number that just changed gets one quiet sweep. Informative, not festive. */
@keyframes phx-tick {
  0%   { background-position: 200% 0; }
  100% { background-position: -60% 0; }
}
.phx-stat.is-updated::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,0.55) 50%, transparent 65%);
  background-size: 220% 100%;
  animation: phx-tick .85s var(--phx-ease) 1;
}
@media (prefers-color-scheme: dark) {
  .phx-stat.is-updated::after {
    background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,0.10) 50%, transparent 65%);
    background-size: 220% 100%;
  }
}

/* ── cards, controls, inputs ─────────────────────────────────────────────── */

/* One rule lifts every existing Tailwind card on the page. */
.bg-white.rounded-lg.shadow-sm {
  border-radius: var(--phx-r) !important;
  box-shadow: var(--phx-shadow-1) !important;
  transition: box-shadow .2s var(--phx-ease), border-color .2s var(--phx-ease);
}

button, select, input[type="text"], input[type="search"], input:not([type]) {
  transition: background .16s var(--phx-ease), border-color .16s var(--phx-ease),
              box-shadow .16s var(--phx-ease), transform .12s var(--phx-ease);
}
button:not(:disabled):active { transform: translateY(1px); }

/* One visible, consistent focus ring everywhere — keyboard and switch users
   included. Never removed, only shaped. */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--phx-cool);
  outline-offset: 2px;
  border-radius: 6px;
}
.phx-topbar a:focus-visible, .phx-topbar button:focus-visible { outline-color: #7dd3fc; }

/* Field ergonomics: 16px stops iOS zooming on focus. */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px !important; }
  button { min-height: 40px; }
}

/* ── map frame ───────────────────────────────────────────────────────────── */

#map {
  border-radius: var(--phx-r-lg) !important;
  box-shadow: var(--phx-shadow-2);
  border: 1px solid var(--phx-border-strong) !important;
}

/* Floating map furniture: glass, so the map reads through it. */
.legend, .detail-panel {
  background: color-mix(in srgb, var(--phx-surface) 88%, transparent) !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border: 1px solid var(--phx-border) !important;
  border-radius: var(--phx-r) !important;
  box-shadow: var(--phx-shadow-3) !important;
  color: var(--phx-ink);
}
.leaflet-popup-content-wrapper {
  border-radius: var(--phx-r) !important;
  box-shadow: var(--phx-shadow-3) !important;
}

/* ── the report button: the single most important control on the page ────── */

.cit-fab {
  box-shadow: 0 6px 16px -4px rgba(220,38,38,0.5), 0 2px 6px rgba(0,0,0,0.2) !important;
  transition: transform .18s var(--phx-ease), box-shadow .18s var(--phx-ease);
}
.cit-fab:hover  { transform: scale(1.06); box-shadow: 0 10px 24px -6px rgba(220,38,38,0.6), 0 3px 8px rgba(0,0,0,0.25) !important; }
.cit-fab:active { transform: scale(0.97); }

/* ── skeletons ───────────────────────────────────────────────────────────── */

.phx-skel {
  background: linear-gradient(90deg,
      var(--phx-surface-2) 25%, var(--phx-border) 37%, var(--phx-surface-2) 63%) !important;
  background-size: 400% 100% !important;
  border-radius: 6px !important;
}

/* ── scrollbars (chrome only; never the map) ─────────────────────────────── */

.legend-body, .detail-panel { scrollbar-width: thin; scrollbar-color: var(--phx-border-strong) transparent; }
.legend-body::-webkit-scrollbar, .detail-panel::-webkit-scrollbar { width: 8px; }
.legend-body::-webkit-scrollbar-thumb, .detail-panel::-webkit-scrollbar-thumb {
  background: var(--phx-border-strong); border-radius: 999px;
}

/* ── motion policy ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .phx-live.is-live .phx-live-dot { animation: none; }
  .phx-stat.is-updated::after { animation: none; }
  .phx-stat:hover { transform: none; }
  .cit-fab:hover  { transform: none; }
  *, *::before, *::after { transition-duration: .001ms !important; }
}

/* ============================================================================
   FIELD LAYOUT — what a phone must show first.
   ============================================================================
   The desktop page put six nav links and a research banner above the fold, so on
   a 390px screen the map began roughly two screens down. For the person this is
   built for — outdoors, one hand, possibly with a fire in front of them — the
   order that matters is: am I connected, what is burning, how do I report it.
   Everything below reorders toward that without deleting anything.
   ============================================================================ */

.phx-menu-btn {
  display: none;
  width: 42px; height: 42px; flex: 0 0 auto;
  align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
  color: var(--phx-chrome-ink);
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--phx-chrome-line);
  border-radius: 10px;
  transition: background .16s var(--phx-ease);
}
.phx-menu-btn:hover { background: rgba(255,255,255,0.14); }

@media (max-width: 860px) {
  .phx-menu-btn { display: inline-flex; }

  /* The nav becomes a sheet under the bar. Still every link, still the same
     markup — only its presentation changes. */
  /* SPECIFICITY NOTE: the element also carries Tailwind's `.flex`, and the Tailwind
     CDN injects its stylesheet at RUNTIME — after this file. At equal specificity
     source order wins, so a bare `.phx-nav { display:none }` lost and the sheet
     rendered permanently open over the KPI cards. Scoping by the parent wins it
     back without resorting to !important. */
  .phx-topbar .phx-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0 !important;
    background: var(--phx-chrome-2);
    border-bottom: 1px solid var(--phx-chrome-line);
    box-shadow: var(--phx-shadow-3);
    padding: 6px 0 10px;
    z-index: 1600;
  }
  .phx-topbar .phx-nav.is-open { display: flex; }
  .phx-topbar .phx-nav a, .phx-topbar .phx-nav button {
    display: block; width: 100%; text-align: left;
    padding: 13px 20px !important; margin: 0 !important;
    border-radius: 0 !important;
    font-size: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  /* The tagline is marketing copy. It is the first thing to go when the screen
     is small — the person already knows what they opened. */
  .phx-topbar .phx-tagline { display: none; }
  .phx-topbar .max-w-7xl { padding-top: 10px; padding-bottom: 10px; }

  /* The research banner keeps its link but stops eating four lines above the map. */
  .phx-research-cta .phx-research-body { display: none; }
  .phx-research-cta .max-w-7xl { padding-top: 8px; padding-bottom: 8px; }
}

/* KPI density on a phone: label + NUMBER always; the explanatory prose only when
   there is room for it. Four readable gauges beat two padded cards. */
@media (max-width: 640px) {
  .phx-stat { padding: 11px 12px 11px 14px; }
  .phx-stat-label { font-size: 9.5px; letter-spacing: 0.07em; }
  .phx-stat-value { font-size: clamp(26px, 8.5vw, 34px); }
  .phx-stat-sub:not(.phx-stat-sub--keep) { display: none; }
  #map { height: calc(100vh - 300px); min-height: 340px; }
}

/* The floating report button must not cover the last readable line when the user
   scrolls to the bottom.
   FIRST ATTEMPT WAS WRONG and worth recording: a rule of the shape
   `.max-w-7xl > .bg-white.rounded-lg:last-child { margin-bottom: 76px }` matched the
   last card inside EVERY section, not the final block, and injected 76px of dead
   space in the middle of the page (measured: the freshness strip grew to 150px).
   It could not have worked anyway — the button is position:fixed, so it floats over
   the VIEWPORT and mid-document margin never affects it. Padding the document end is
   both correct and smaller. */
body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (min-width: 641px) { body { padding-bottom: env(safe-area-inset-bottom); } }

/* Equal-height KPI cards regardless of how long each description runs. */
.phx-stat { display: flex; flex-direction: column; }
.phx-stat .phx-stat-sub:last-child { margin-top: auto; padding-top: 4px; }

/* ── mobile control disclosure ───────────────────────────────────────────── */

.phx-controls-toggle-wrap { display: none; }
.phx-controls-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 11px 14px;
  background: var(--phx-surface); color: var(--phx-ink-2);
  border: 1px solid var(--phx-border); border-radius: var(--phx-r);
  box-shadow: var(--phx-shadow-1);
  font-size: 14px; font-weight: 600;
}
.phx-controls-caret { transition: transform .2s var(--phx-ease); color: var(--phx-ink-3); }
.phx-controls-toggle[aria-expanded="true"] .phx-controls-caret { transform: rotate(180deg); }

@media (max-width: 860px) {
  .phx-controls-toggle-wrap { display: block; }
  /* Scoped by a parent for the same reason the nav is: Tailwind's runtime-injected
     utilities land after this file, so an unscoped rule loses on source order. */
  body .phx-controls { display: none; }
  body .phx-controls.is-open { display: block; }
}

/* ── dark mode: the parts Tailwind's light utilities get wrong ───────────── */

@media (prefers-color-scheme: dark) {
  /* Form controls were the worst of it: `bg-white` remapped to a dark surface but
     the browser default text stayed dark, and the search input rendered pure white
     — a torch in the middle of a night-mode page. Set all three properties
     together; setting only the background is what produced the washed-out look. */
  input, select, textarea,
  input[type="text"], input[type="search"], input[type="number"], input[type="date"] {
    background-color: var(--phx-surface-2) !important;
    color: var(--phx-ink) !important;
    border-color: var(--phx-border-strong) !important;
  }
  input::placeholder, textarea::placeholder { color: var(--phx-ink-3) !important; opacity: 1; }
  select option { background-color: var(--phx-surface-2); color: var(--phx-ink); }

  /* Amber notices: keep the MEANING (a warm, secondary notice) without the glare. */
  .bg-amber-50  { background-color: #241d12 !important; }
  .bg-amber-100 { background-color: #2e2415 !important; }
  .border-amber-200, .border-amber-400 { border-color: #4a3a1d !important; }
  .text-amber-900, .text-amber-800 { color: #f0c078 !important; }
  .text-amber-700 { color: #e0a95f !important; }
  .hover\:bg-amber-100:hover { background-color: #362a18 !important; }
  .hover\:bg-amber-50:hover  { background-color: #2b2215 !important; }
  .bg-emerald-50 { background-color: #10261d !important; }
  .bg-orange-100 { background-color: #33200f !important; }
  .text-orange-700 { color: #f0a163 !important; }

  /* Leaflet's own chrome is built for light basemaps. */
  .leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background: var(--phx-surface) !important; color: var(--phx-ink) !important;
  }
  .leaflet-bar a, .leaflet-control-layers-toggle {
    background-color: var(--phx-surface) !important; color: var(--phx-ink) !important;
    border-color: var(--phx-border) !important;
  }
  .leaflet-bar a:hover { background-color: var(--phx-surface-2) !important; }
  .leaflet-control-layers-expanded { background: var(--phx-surface) !important; color: var(--phx-ink) !important; }
  .leaflet-control-attribution {
    background: rgba(26,24,21,0.82) !important; color: var(--phx-ink-3) !important;
  }
  .leaflet-control-attribution a { color: var(--phx-ink-2) !important; }
}

/* ── header layout: keep the nav on one line ─────────────────────────────── */

/* The nav was flex-wrap, so the language button dropped to a second row and the
   bar grew a ragged edge. Above the mobile breakpoint it is a single row that
   never wraps; the tagline yields space instead, because it is the least
   load-bearing text in the header. */
@media (min-width: 861px) {
  .phx-topbar .phx-nav { flex-wrap: nowrap !important; white-space: nowrap; align-items: center; }
  .phx-topbar .phx-tagline {
    display: block; max-width: 52ch;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}
@media (min-width: 1200px) {
  .phx-topbar .phx-tagline { max-width: none; white-space: normal; }
}

/* ── inline-styled chrome (dark mode) ────────────────────────────────────── */

/*
 * 45 elements in index.html carry hardcoded inline backgrounds, and an inline
 * style beats any stylesheet without !important. Most are SEMANTIC — the amber,
 * orange and red legend swatches and marker dots — and must never be recoloured,
 * because in this product a colour is evidence.
 *
 * So instead of a blanket override, these rules select on the inline value itself
 * and touch only the NEUTRAL surfaces (#fff, #fafaf9, #e7e5e4 and the pale tint
 * panels). A swatch of #fd7e14 is not matched by any selector here and stays
 * exactly as it is.
 */
@media (prefers-color-scheme: dark) {
  [style*="background:#fff"]:not(.legend-dot):not([class*="marker-"]):not([class*="m-"]),
  [style*="background: #fff"]:not(.legend-dot):not([class*="marker-"]):not([class*="m-"]),
  [style*="background:white"], [style*="background: white"],
  [style*="background:#fafaf9"], [style*="background:#f5f5f4"] {
    background: var(--phx-surface) !important;
    color: var(--phx-ink) !important;
    border-color: var(--phx-border-strong) !important;
  }
  /* Pale tint notices keep their hue family, at night-safe luminance. */
  [style*="background:#ecfdf5"] { background: #10261d !important; color: #6ee7b7 !important; border-color: #1c4638 !important; }
  [style*="background:#eff6ff"] { background: #111d2e !important; color: #93c5fd !important; border-color: #1e3a5f !important; }
  [style*="background:#fffbeb"] { background: #241d12 !important; color: #f0c078 !important; border-color: #4a3a1d !important; }
  [style*="border:1px solid #e7e5e4"], [style*="border: 1px solid #e7e5e4"] { border-color: var(--phx-border) !important; }
}

/* The layers disclosure is a <summary> with inline styles; give it the same
   affordance as the real buttons beside it in BOTH schemes. */
details > summary[style] {
  transition: background .16s var(--phx-ease), border-color .16s var(--phx-ease);
  min-height: 34px;
}
details > summary[style]:hover { border-color: var(--phx-border-strong) !important; }
@media (prefers-color-scheme: dark) {
  details > summary[style] {
    background: var(--phx-surface-2) !important;
    color: var(--phx-ink) !important;
    border-color: var(--phx-border-strong) !important;
  }
  details > summary[style]:hover { background: var(--phx-surface) !important; }
}

@media (prefers-color-scheme: dark) {
  /* Leaflet's scale bar draws its own white plate — the last near-white surface
     found by the automated dark-mode sweep. */
  .leaflet-control-scale-line {
    background: rgba(26,24,21,0.82) !important;
    color: var(--phx-ink-2) !important;
    border-color: var(--phx-border-strong) !important;
  }
}

/* ============================================================================
   THE REPORT SHEET — the one screen that has to work under stress.
   ============================================================================
   For a farmer who has just seen smoke, this dialog IS the product. Two things
   were working against them:

     1. "Usa GPS" was styled as a grey SECONDARY button sitting BELOW two empty
        Lat/Lon boxes, so the layout invited someone to type coordinates they do
        not know while the one-tap answer looked like an afterthought. Nobody
        reports a fire by typing decimal degrees.
     2. The dialog kept the page's light chrome in dark mode.

   The DOM is untouched (the bilingual labels stay — a tourist who never found the
   language toggle still needs to understand this form). Only emphasis moves.
   ============================================================================ */

.cit-modal {
  border-radius: var(--phx-r-lg) !important;
  background: var(--phx-surface) !important;
  color: var(--phx-ink) !important;
  box-shadow: var(--phx-shadow-3) !important;
  border: 1px solid var(--phx-border) !important;
}
.cit-modal h3 { color: var(--phx-ink) !important; letter-spacing: -0.01em; }
.cit-modal label { color: var(--phx-ink-2) !important; font-weight: 600; }
.cit-modal input, .cit-modal select, .cit-modal textarea {
  background: var(--phx-surface-2) !important;
  color: var(--phx-ink) !important;
  border: 1px solid var(--phx-border-strong) !important;
  border-radius: var(--phx-r-sm) !important;
}
.cit-modal input:focus, .cit-modal select:focus, .cit-modal textarea:focus {
  outline: 2px solid var(--phx-cool); outline-offset: 1px;
  border-color: var(--phx-cool) !important;
}
.cit-status { color: var(--phx-ink-3) !important; }
.cit-modal-backdrop { background: rgba(10,9,8,0.55) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* GPS becomes the obvious primary action for location: full width, tall, and
   carrying the accent — while staying visually distinct from the red SUBMIT, so
   the two are never confused under stress. */
#cit-geoloc-btn {
  width: 100%; min-height: 48px;
  background: var(--phx-cool) !important; color: #fff !important;
  border: none !important; border-radius: 10px !important;
  font-size: 16px !important; font-weight: 700 !important;
  box-shadow: 0 2px 8px -2px rgba(29,78,216,0.5);
  margin-top: 10px !important;
}
#cit-geoloc-btn:hover  { filter: brightness(1.06); }
#cit-geoloc-btn:active { transform: translateY(1px); }

/* The manual coordinate boxes are the fallback, and now look like one. */
.cit-modal .cit-row input[type="text"],
.cit-modal .cit-row input[type="number"] { font-size: 14px !important; }

.cit-btn-primary   { background: var(--phx-fire) !important; color: #fff !important; }
.cit-btn-primary:hover { filter: brightness(1.07); }
@media (prefers-color-scheme: dark) {
  .cit-btn-secondary { background: var(--phx-surface-2) !important; color: var(--phx-ink) !important; }
  .cit-dedup-box { background: #241d12 !important; color: #f0c078 !important; border-color: #4a3a1d !important; }
}

/* The two floating buttons overlapped card content on small screens; keep them
   clear of the sheet and of each other. */
@media (max-width: 640px) {
  .cit-modal { max-height: 92vh; overflow-y: auto; }
}