/*
 * IncidentWatch — shared UI stylesheet.
 *
 * Holds everything that is genuinely common to every page: the core design
 * tokens, the base reset, the chrome (top bar, brand, nav, buttons, theme
 * toggle, hero, footer), the live status pill, the standard map skin, the
 * connection banner and accessibility utilities.
 *
 * Anything used on more than one page is defined HERE, once, in both themes:
 * brand colours, surfaces, the agency palette (--mfs / --cfs / --ses / --saas
 * and the bright --cfs-fill), the warning severity scale (--sev-*), --bom,
 * --shadow and --radius. Pages must consume these tokens rather than
 * re-declaring their own copies.
 *
 * Each page template still defines its OWN :root for genuinely page-specific
 * domain tokens — mostly the rgba() tints/badges derived from the palettes
 * (--mfs-bg, --sev-advice-bg, …) whose alphas are tuned per page. Those
 * inline tokens override the core defaults below.
 *
 * Cascade note: a page that overrides a core token in its light `:root` MUST
 * also override it in its `[data-theme="dark"]` block (page styles load after
 * this file, so a light-only override would also win in dark mode).
 */

/* ── Core design tokens (per-page :root blocks override these) ─────────────── */
:root {
  --iw-red:#DA291C; --iw-red-hover:#B81F14; --iw-black:#0A0A0A; --iw-white:#FFFFFF;
  --bg:#FFFFFF; --bg-soft:#F7F8FA; --panel:#FFFFFF; --line:#E5E8EE; --line-2:#D2D7E0;
  --text:#0A0A0A; --muted:#5D6678; --dim:#8B93A3;
  --soft-bg:#F7F8FA; --soft-bg-2:#EEF0F4; --soft-bg-3:#E5E8EE;
  /* Agency service colours — global; per-page tints (-bg/-row/…) stay in each
     page's own :root. --cfs is the text-safe gold; --cfs-fill is the bright CFS
     vehicle yellow for solid fills (pins, stripes, swatches) where contrast
     comes from the surface behind it, not from glyphs on white. */
  --mfs:#C8102E; --cfs:#B8860B; --ses:#F57C00; --saas:#00A651;
  --cfs-fill:#FFC72C;
  /* MedSTAR (SAAS retrieval arm) sits in the SAAS green family as a teal;
     NPWSA is parks forest green; DEW is Government of SA navy (PMS 295,
     the official state blue the department's branding carries). */
  --medstar:#00897B; --npwsa:#2E7D32; --dew:#002F6C;
  --bom:#2E86C1;
  /* Warning severity scale — global hues; pages keep their own -bg/-border tints. */
  --sev-emergency:#DA291C; --sev-watchact:#F57C00; --sev-advice:#B8860B; --sev-info:#2E86C1;
  --shadow:0 1px 2px rgba(10,10,10,0.04),0 4px 12px rgba(10,10,10,0.04);
  --radius:14px;
  --mono:"JetBrains Mono","SF Mono",Consolas,monospace;
}
[data-theme="dark"] {
  --bg:#0F1115; --bg-soft:#171A21; --panel:#15181F; --line:#262A33; --line-2:#363B47;
  --text:#F2F3F5; --muted:#9AA2B1; --dim:#6C7585;
  --soft-bg:#171A21; --soft-bg-2:#1E222B; --soft-bg-3:#262A33;
  --mfs:#FF4D5E; --cfs:#FFEB3B; --ses:#FF8C1A; --saas:#3FD17F;
  --cfs-fill:#FFEB3B;
  --medstar:#4DB6AC; --npwsa:#9CCC65; --dew:#6F9BEA;
  --bom:#5DADE2;
  --sev-emergency:#FF4D5E; --sev-watchact:#FF8C1A; --sev-advice:#FFEB3B; --sev-info:#5DADE2;
  --shadow:none;
}

/* ── Base reset ───────────────────────────────────────────────────────────── */
* { box-sizing:border-box; margin:0; padding:0; font-family:"Inter",-apple-system,sans-serif; }
html, body { background:var(--bg); color:var(--text); font-size:14px; -webkit-font-smoothing:antialiased; line-height:1.5; transition:background .2s, color .2s; }
a { color:inherit; text-decoration:none; }

/* ── Top bar / brand ──────────────────────────────────────────────────────── */
.nav { position:sticky; top:0; z-index:50; height:72px; background:rgba(255,255,255,0.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); display:flex; align-items:center; padding:0 28px; gap:24px; }
[data-theme="dark"] .nav { background:rgba(15,17,21,0.92); }
.brand { display:flex; align-items:center; gap:14px; cursor:pointer; text-decoration:none; color:var(--text); flex-shrink:0; }
.brand .mark { width:42px; height:42px; border-radius:10px; background:var(--iw-black); display:flex; align-items:center; justify-content:center; color:var(--iw-white); font-weight:800; font-size:22px; letter-spacing:-.04em; position:relative; }
.brand .mark::after { content:""; position:absolute; right:6px; bottom:6px; width:8px; height:8px; border-radius:50%; background:var(--iw-red); }
[data-theme="dark"] .brand .mark { background:var(--iw-white); color:var(--iw-black); }
[data-theme="dark"] .brand .name { color:var(--iw-white); }
.brand .wordmark { display:flex; flex-direction:column; line-height:1.05; }
.brand .name { font-weight:800; font-size:22px; letter-spacing:-.02em; color:var(--iw-black); white-space:nowrap; }
.brand .name .w { color:var(--iw-red); }
.brand .tag { font-size:10.5px; color:var(--muted); letter-spacing:.18em; text-transform:uppercase; margin-top:3px; font-weight:600; white-space:nowrap; }

/* ── Nav links ────────────────────────────────────────────────────────────── */
.nav-links { display:flex; gap:2px; margin-left:18px; }
.nav-links a { padding:9px 14px; color:var(--muted); font-size:13px; font-weight:600; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.nav-links a:hover { color:var(--text); background:var(--soft-bg-2); }
.nav-links a.active { color:var(--iw-black); background:var(--soft-bg-2); box-shadow:inset 0 -2px 0 var(--iw-red); }
[data-theme="dark"] .nav-links a { color:var(--iw-white); }
[data-theme="dark"] .nav-links a:hover,
[data-theme="dark"] .nav-links a.active { color:var(--iw-white); background:var(--soft-bg-2); }
.nav-links a .lock { font-size:10px; color:var(--iw-red); background:rgba(218,41,28,0.10); padding:1px 6px; border-radius:4px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.nav-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.btn { padding:10px 18px; border-radius:10px; font-weight:700; font-size:13px; cursor:pointer; border:none; display:inline-flex; align-items:center; gap:8px; letter-spacing:.01em; transition:all .15s; text-decoration:none; }
.btn.primary { background:var(--iw-red); color:var(--iw-white); box-shadow:0 2px 8px rgba(218,41,28,0.20); }
.btn.primary:hover { background:var(--iw-red-hover); }
.btn.primary .price { font-family:var(--mono); font-size:12px; background:rgba(255,255,255,0.18); padding:2px 7px; border-radius:5px; font-weight:700; }
.btn.ghost { background:transparent; color:var(--text); border:1px solid var(--line-2); }
.btn.ghost:hover { background:var(--soft-bg-2); border-color:var(--text); }

/* ── Theme toggle ─────────────────────────────────────────────────────────── */
.theme-toggle { width:38px; height:38px; border-radius:10px; border:1px solid var(--line-2); background:transparent; color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:all .15s; }
.theme-toggle:hover { color:var(--text); background:var(--soft-bg-2); border-color:var(--text); }
.theme-toggle .icon-sun { display:none; }
[data-theme="dark"] .theme-toggle .icon-moon { display:none; }
[data-theme="dark"] .theme-toggle .icon-sun { display:inline; }

@keyframes pulse { 50% { opacity:.4; } }

/* ── Live status pill (nav) ───────────────────────────────────────────────────
   Green by default. `.red` (and its JS-toggled alias `.stale`) for alert-toned
   pages/states, `.blue` for the weather board. The dot rides currentColor, so a
   variant only restyles the pill itself. */
.live-pill { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; background:rgba(0,166,81,0.10); border:1px solid rgba(0,166,81,0.25); border-radius:999px; font-size:11px; font-weight:800; color:var(--saas); letter-spacing:.08em; }
.live-pill::before { content:""; width:7px; height:7px; background:currentColor; border-radius:50%; box-shadow:0 0 8px rgba(0,166,81,0.55); animation:pulse 1.6s infinite; }
.live-pill.red, .live-pill.stale { background:rgba(218,41,28,0.10); border-color:rgba(218,41,28,0.25); color:var(--iw-red); }
.live-pill.red::before, .live-pill.stale::before { box-shadow:0 0 8px rgba(218,41,28,0.55); }
.live-pill.blue { background:var(--bom-bg, rgba(46,134,193,0.10)); border-color:rgba(46,134,193,0.30); color:var(--bom); }
.live-pill.blue::before { box-shadow:0 0 8px rgba(46,134,193,0.55); }

/* ── Hero (feed / warnings) ───────────────────────────────────────────────── */
.hero { padding:16px 28px; border-bottom:1px solid var(--line); background:var(--bg-soft); }
.hero-inner { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.hero h1 { font-size:18px; line-height:1.2; letter-spacing:-.01em; font-weight:800; color:var(--iw-black); }
.hero h1 .accent { color:var(--iw-red); }
[data-theme="dark"] .hero h1 { color:var(--iw-white); }
.hero p { font-size:13px; color:var(--muted); line-height:1.45; }
.hero .sep { color:var(--dim); font-size:13px; }

/* ── Standard map skin (Leaflet) ──────────────────────────────────────────────
   Every map surface is built by /js/iw-map.js and skinned here — change a pin
   or popup once and every map page updates together. Pin colours ride the
   global agency tokens, so light/dark both come for free. Agency badge tints
   inside popups (--mfs-bg, …) come from the page's own :root. */
/* Agency dot (the COMMAND `.vg-dot`): a compact dot whose colour rides --agc,
   set per agency below. The ring uses --panel so it reads correctly on both
   light and dark tiles; `.fresh` adds the pulse ring, `.hi` the highlight glow.
   agencyIcon() in iw-map.js renders the markup; pages set the agency class. */
.vg-dot { width:12px; height:12px; border-radius:50%; background:var(--agc,#888); border:2px solid var(--panel); box-shadow:0 0 0 1.5px rgba(0,0,0,.35), 0 1px 4px rgba(0,0,0,.4); transition:transform .15s; cursor:pointer; position:relative; }
.vg-dot:hover { transform:scale(1.3); z-index:5; }
.vg-dot.mfs { --agc:var(--mfs); }
.vg-dot.cfs { --agc:var(--cfs-fill); }
.vg-dot.ses { --agc:var(--ses); }
.vg-dot.saas { --agc:var(--saas); }
.vg-dot.medstar { --agc:var(--medstar); }
.vg-dot.npwsa { --agc:var(--npwsa); }
.vg-dot.dew { --agc:var(--dew); }
.vg-dot.fresh::after { content:""; position:absolute; inset:-7px; border-radius:50%; border:1.5px solid var(--agc,#888); opacity:.7; animation:vgDotPulse 1.8s infinite; pointer-events:none; }
.vg-dot.hi { box-shadow:0 0 0 3px rgba(120,140,170,.4), 0 0 14px rgba(120,140,170,.35); }
@keyframes vgDotPulse { 0% { transform:scale(.4); opacity:.8; } 100% { transform:scale(1.18); opacity:0; } }

/* Canvas wrapper for the standard map fragment (fragments/map :: canvas): a
   positioned box the page sizes via its layout; #map fills it absolutely. */
.iw-mapwrap { position:relative; overflow:hidden; }
.iw-mapwrap #map { position:absolute; inset:0; z-index:1; background:var(--soft-bg); }

/* Map controls + legend shared by the standard map fragment (fragments/map).
   Floated over the canvas; themed so they read on light or dark tiles. */
.map-zoom { position:absolute; right:14px; top:14px; z-index:800; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:var(--shadow); }
.map-zoom button { width:38px; height:38px; border:none; background:transparent; color:var(--text); cursor:pointer; font-size:16px; font-weight:700; }
.map-zoom button + button { border-top:1px solid var(--line); }
.map-zoom button:hover { background:var(--soft-bg-2); }
.map-legend { position:absolute; left:14px; bottom:14px; z-index:800; display:flex; flex-wrap:wrap; gap:8px 14px; max-width:80%; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 14px; font-size:11.5px; font-weight:600; color:var(--muted); box-shadow:var(--shadow); }
.map-legend[hidden] { display:none; }
.map-legend .lg { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.map-legend .lg i { width:10px; height:10px; border-radius:50%; flex-shrink:0; border:1.5px solid var(--panel); box-shadow:0 0 0 1px rgba(0,0,0,.15); }
.map-legend .lg i.mfs { background:var(--mfs); }
.map-legend .lg i.cfs { background:var(--cfs-fill); }
.map-legend .lg i.ses { background:var(--ses); }
.map-legend .lg i.saas { background:var(--saas); }
.leaflet-container { font-family:"Inter",sans-serif; background:var(--soft-bg); }
.leaflet-popup-content-wrapper { background:var(--panel); color:var(--text); border-radius:10px; border:1px solid var(--line); box-shadow:0 4px 18px rgba(0,0,0,0.18); }
.leaflet-popup-content { margin:10px 14px; font-size:12.5px; line-height:1.5; font-family:"Inter",sans-serif; }
.leaflet-popup-content .pop-ag { font-family:var(--mono); font-weight:800; font-size:10.5px; letter-spacing:.1em; padding:2px 7px; border-radius:4px; display:inline-block; margin-bottom:5px; }
.leaflet-popup-content .pop-ag.mfs { background:var(--mfs-bg); color:var(--mfs); }
.leaflet-popup-content .pop-ag.cfs { background:var(--cfs-bg); color:var(--cfs); }
.leaflet-popup-content .pop-ag.ses { background:var(--ses-bg); color:var(--ses); }
.leaflet-popup-content .pop-ag.saas { background:var(--saas-bg); color:var(--saas); }
.leaflet-popup-content .pop-ag.medstar { background:var(--medstar-bg); color:var(--medstar); }
.leaflet-popup-content .pop-ag.npwsa { background:var(--npwsa-bg); color:var(--npwsa); }
.leaflet-popup-content .pop-ag.dew { background:var(--dew-bg); color:var(--dew); }
.leaflet-popup-content .pop-title { font-weight:800; font-size:13px; letter-spacing:-.005em; margin-bottom:3px; }
.leaflet-popup-content .pop-loc { font-size:11.5px; color:var(--muted); }
.leaflet-popup-tip { background:var(--panel); border:1px solid var(--line); }
.leaflet-popup-close-button { color:var(--muted) !important; }
.leaflet-control-attribution { font-size:9.5px; background:rgba(255,255,255,0.7) !important; }
[data-theme="dark"] .leaflet-control-attribution { background:rgba(15,17,21,0.75) !important; color:#9AA2B1; }
[data-theme="dark"] .leaflet-control-attribution a { color:#9AA2B1 !important; }

/* ── Footer (full disclaimer variant + minimal one-line variant) ──────────── */
footer { margin-top:32px; border-top:1px solid var(--line); padding:28px; background:var(--bg-soft); }
.foot-inner { display:grid; grid-template-columns:1fr auto; gap:24px; align-items:start; }
.disclaimer { background:var(--panel); border:1px solid rgba(218,41,28,0.20); border-radius:10px; padding:14px 18px; font-size:12.5px; color:var(--text); max-width:820px; line-height:1.55; }
.disclaimer strong { color:var(--iw-red); }
.foot-links { display:flex; gap:18px; font-size:12px; color:var(--muted); }
.foot-links a { cursor:pointer; text-decoration:none; color:inherit; }
.foot-links a:hover { color:var(--text); }
.foot-meta { margin-top:18px; font-size:11px; color:var(--dim); text-align:center; font-family:var(--mono); letter-spacing:.04em; }
footer.foot { margin-top:8px; padding:24px 0 16px; border-top:1px solid var(--line); background:none; text-align:center; color:var(--dim); font-size:11px; font-family:var(--mono); letter-spacing:.04em; }

/*
 * Site-wide connection / stale-data banner. Rendered once in the layout under
 * the nav and toggled by iw-poll.js. Sticks just below the 72px nav bar so it
 * stays visible while scrolling. Alert colours are hardcoded (not page tokens)
 * so the warning looks identical on every page.
 */
.iw-conn-banner {
  position: sticky;
  top: 72px;
  z-index: 49;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: #fff;
  background: #B81F14; /* fallback */
}
.iw-conn-banner[hidden] { display: none; }
.iw-conn-banner.offline { background: #B81F14; } /* red — connection down */
.iw-conn-banner.stale   { background: #B45309; } /* amber — data delayed/quiet */
.iw-conn-banner .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  animation: iwConnPulse 1.6s infinite;
}
@keyframes iwConnPulse { 0% { opacity: 1; } 50% { opacity: .3; } 100% { opacity: 1; } }

@media (max-width: 640px) {
  .iw-conn-banner { font-size: 12px; padding: 9px 14px; }
}

/* ── Accessibility utilities ──────────────────────────────────────────────── */

/* Skip-to-content link — visually hidden until focused (keyboard users). */
.skip-link {
  position: absolute;
  left: 8px;
  top: -56px;
  z-index: 200;
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--iw-red, #DA291C);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(218, 41, 28, 0.35);
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; }

/* Visible focus ring for keyboard navigation across all interactive elements. */
:focus-visible {
  outline: 2px solid var(--iw-red, #DA291C);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Respect users who prefer reduced motion (disables the pulsing status dots etc.). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Account / auth pages (login, register, forgot / reset password) ───────── */
.auth-wrap { display:flex; justify-content:center; padding:48px 20px 64px; }
.auth-card { width:100%; max-width:430px; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:32px 30px; box-shadow:0 4px 24px rgba(10,10,10,0.05); }
.auth-card h1 { font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--text); }
.auth-card .auth-sub { font-size:13px; color:var(--muted); margin-top:6px; line-height:1.5; }
.auth-form { margin-top:22px; display:flex; flex-direction:column; gap:15px; }
.auth-field { display:flex; flex-direction:column; gap:6px; }
.auth-field label { font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.02em; }
.auth-field input[type=email], .auth-field input[type=password], .auth-field input[type=text] { padding:11px 13px; border:1px solid var(--line-2); border-radius:10px; background:var(--bg); color:var(--text); font-size:14px; font-family:inherit; transition:border-color .15s, box-shadow .15s; }
.auth-field input:focus { outline:none; border-color:var(--iw-red); box-shadow:0 0 0 3px rgba(218,41,28,0.12); }
.auth-field input.invalid { border-color:var(--iw-red); }
.auth-field .field-error { font-size:12px; color:var(--iw-red); font-weight:600; }
.auth-form .btn { justify-content:center; width:100%; padding:12px; }
.auth-remember { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); font-weight:600; cursor:pointer; }
.auth-remember input { width:15px; height:15px; accent-color:var(--iw-red); }
.auth-links { margin-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; font-size:13px; }
.auth-links a { color:var(--iw-red); font-weight:600; text-decoration:none; }
.auth-links a:hover { text-decoration:underline; }
.auth-alert { padding:12px 14px; border-radius:10px; font-size:13px; font-weight:600; line-height:1.45; margin-bottom:18px; }
.auth-alert.ok { background:rgba(0,166,81,0.10); border:1px solid rgba(0,166,81,0.30); color:var(--saas, #00A651); }
.auth-alert.err { background:rgba(218,41,28,0.08); border:1px solid rgba(218,41,28,0.28); color:var(--iw-red); }
.auth-alert.info { background:var(--bg-soft); border:1px solid var(--line-2); color:var(--text); }
.auth-inline-form { display:inline; }
.auth-linkbtn { background:none; border:none; padding:0; color:var(--iw-red); font-weight:600; font-size:13px; font-family:inherit; cursor:pointer; text-decoration:none; }
.auth-linkbtn:hover { text-decoration:underline; }

/* Logged-out account chrome in the top-nav (Sign in / Get Pro / account email). */
.nav-account { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); font-weight:600; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }