/* ============================================================================
   system.css — the design system. Loaded before every other stylesheet on every
   page of this site (and copied verbatim into the portal). Tokens first, then the
   one shared primitive (.btn), then utilities. Component CSS stays in style.css.
   Rule: no raw hex, px size, radius or shadow in any other stylesheet if a token
   here covers it.  Built 20260906.
   ========================================================================== */
:root{
  /* ink & surfaces */
  --ink:#012141; --ink-2:#1a3f66; --paper:#fff; --bg:#f6f8fa; --pale:#EAF0F6;
  --mut:#6b7280; --mut-2:#55606b; --mut-3:#5f6b76;   /* mut-2 clears 4.5:1 on every tint; mut-3 on white only */
  --line:#f0f2f5; --line-2:#eceef1;
  --link:#1264B1; --teal:var(--link);

  /* colour scale — never use these for meaning in components; use the rate-* tokens */
  --green:#1F6121; --amber:#d99a2b; --amber-2:#c08a20; --orange:#e0752a; --red:#e5544e; --grey:#9aa2ae;
  --green-soft:#e2ece1; --amber-soft:#fbf0dc; --orange-soft:#fbe8da; --red-soft:#fbe1e0; --grey-soft:#eef0f3;
  --green-card:#d7e3d7; --amber-card:#fbeede; --red-card:#fce4e3;
  --amber-text:#8a5e12; --orange-text:#9c4a12; --red-text:#b82f29;

  /* colour-named legacy tokens (the older style.css rules reference these by colour, not by meaning) */
  --safe:var(--green); --caution:var(--amber); --limited:var(--orange); --stayout:var(--red); --nodata:var(--grey);
  --soft-safe:var(--green-soft); --soft-caution:var(--amber-soft); --soft-limited:var(--orange-soft); --soft-stayout:var(--red-soft); --soft-nodata:var(--grey-soft);
  --card-safe:var(--green-card); --card-caution:var(--amber-card); --card-stayout:var(--red-card);

  /* rating semantics — the ONLY thing app.js reads for status colours. This block is what differs per site. */
  --rate-safe:var(--amber-2); --rate-soft-safe:var(--amber-soft); --rate-text-safe:var(--amber-text);
  --rate-caution:var(--green); --rate-soft-caution:var(--green-soft); --rate-text-caution:var(--green);
  --rate-limited:var(--orange); --rate-soft-limited:var(--orange-soft); --rate-text-limited:var(--orange-text);
  --rate-stayout:var(--red); --rate-soft-stayout:var(--red-soft); --rate-text-stayout:var(--red-text);
  --rate-unknown:var(--grey); --rate-soft-unknown:var(--grey-soft); --rate-text-unknown:var(--mut-2);

  /* semantic feedback (portal + forms) */
  --ok:var(--green); --warn:var(--amber-text); --bad:var(--red-text);

  /* type */
  --sans:'Plus Jakarta Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --fs-10:10px; --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:15px; --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-24:24px; --fs-30:30px; --fs-38:38px; --fs-42:42px; --fs-52:52px;

  /* space */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;

  /* radius */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:26px; --r-pill:999px;

  /* elevation */
  --sh-1:0 1px 4px rgba(0,0,0,.35);
  --sh-2:0 4px 14px -8px rgba(0,0,0,.25);
  --sh-3:0 18px 50px rgba(0,0,0,.45);

  /* motion */
  --dur-1:.15s; --dur-2:.25s; --dur-3:.35s; --ease:ease;
}

/* ---------- the one shared primitive: .btn ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:44px;padding:0 var(--sp-5);
  border-radius:var(--r-lg);border:1px solid transparent;background:var(--ink);color:#fff;font:700 var(--fs-13) var(--sans);
  cursor:pointer;text-decoration:none;white-space:nowrap;position:relative;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.btn:hover{background:var(--ink-2)}
.btn:focus-visible{outline:3px solid var(--link);outline-offset:3px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;pointer-events:none}
.btn.is-loading{color:transparent;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid #fff;border-color:#fff #fff transparent transparent;animation:btn-spin .7s linear infinite}
.btn--ghost{background:var(--paper);color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--pale)}
.btn--ghost.is-loading::after{border-color:var(--ink) var(--ink) transparent transparent}
.btn--light{background:var(--paper);color:var(--ink)}
.btn--light:hover{background:var(--pale)}
.btn--inverse{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn--inverse:hover{background:rgba(255,255,255,.12)}
.btn--pill{border-radius:var(--r-pill)}
.btn--sm{height:32px;padding:0 var(--sp-3);font-size:var(--fs-12);border-radius:var(--r-sm);gap:var(--sp-1)}
.btn--lg{height:50px;padding:0 var(--sp-6);font-size:var(--fs-15)}
@keyframes btn-spin{to{transform:rotate(360deg)}}

/* ---------- utilities (replace inline style="" in templates) ---------- */
.u-fill{flex:1;min-width:0} .u-fill-center{flex:1;text-align:center} .min-w-0{min-width:0} .h-full{height:100%}
.m-0{margin:0} .c-inherit{color:inherit}
.mt-1{margin-top:var(--sp-1)} .mb-1{margin-bottom:var(--sp-1)} .mt-2{margin-top:var(--sp-2)} .mb-2{margin-bottom:var(--sp-2)} .mt-3{margin-top:var(--sp-3)} .mb-3{margin-bottom:var(--sp-3)} .mt-4{margin-top:var(--sp-4)} .mb-4{margin-bottom:var(--sp-4)} .mt-5{margin-top:var(--sp-5)} .mb-5{margin-bottom:var(--sp-5)} .mt-6{margin-top:var(--sp-6)} .mb-6{margin-bottom:var(--sp-6)} .mt-8{margin-top:var(--sp-8)} .mb-8{margin-bottom:var(--sp-8)}
.mb-05{margin-bottom:2px} .pad-5{padding:var(--sp-5)} .max-w-340{max-width:340px}
.ttl{font:700 var(--fs-13) var(--sans)}
.lead{font:500 var(--fs-14)/1.7 var(--sans);color:var(--mut-2);margin:var(--sp-3) 0 0}
.lead-sm{font:500 var(--fs-13) var(--sans);color:var(--mut-2);margin:0 0 var(--sp-4)}
.lead a,.lead-sm a,.note a,.sub-line a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.note{font:500 var(--fs-11)/1.5 var(--sans);color:var(--mut-3)}
.note-sm{font:500 var(--fs-11) var(--sans);color:var(--mut-2);margin-top:2px}
.sub-line{margin-top:var(--sp-2);color:var(--mut-2);font:500 var(--fs-13) var(--sans)}
.sub-block{display:block;color:var(--mut-3)}
.lbl-opt{text-transform:none;color:var(--mut-3)} .lbl-strong{font:700 var(--fs-12) var(--sans);color:var(--ink)}
.warn-line{margin-top:var(--sp-3);font:600 var(--fs-12)/1.5 var(--sans);color:var(--red-text)}
.icon-17{font-size:17px;line-height:0}
.stack{display:flex;flex-direction:column;gap:var(--sp-4)} .chip-row{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.band-row{display:flex;gap:3px;margin:var(--sp-2) 0 var(--sp-3)}
.form-actions{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-4);flex-wrap:wrap}
.inline-link{display:flex;align-items:center;text-decoration:none}
.hp-field{position:absolute;left:-5000px}
.rss-note{margin:var(--sp-3) 2px 0}
.map-h-440{height:440px} .map-h-600{height:600px}
.callout{margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-3);border-radius:var(--r-md);font:600 var(--fs-13)/1.5 var(--sans);border:1px solid}
.callout--info{background:#eef4fb;border-color:#d6e4f2;color:var(--ink)}
.callout--warn{background:#fdf8ec;border-color:#f0e4c8;color:var(--ink)}

/* ---------- motion respect ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}