/* Nocturne — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&display=swap');

:root {
  --color-bg: #2c3466;
  --color-surface: #38427c;
  --color-text: #f3f4fb;
  --color-accent: #ff8a5c; /* review round 7 (Barron): the accent moves to
     the product's blurple — OKLCH hue 289.2, the hue of the app's own Pro
     accent (#9a8fe0, --om-accent-pro) — at the same lightness the steel
     accent held (L 0.660, so the documented ratios survive) and chroma
     in the product blurple's own range (its token sits at C 0.118; the
     accent takes 0.125, from the old steel's 0.030):
     the accent now reads as an accent rather than another neutral. */
  --color-accent-2: #5fd3c7; /* the machine-derived stand-in follows: same
     hue, same L 0.734, chroma at the same 2:3 proportion it held */
  --color-divider: color-mix(in srgb, #f3f4fb 20%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #6a71a3;
  --color-neutral-800: #535b94;
  --color-neutral-900: #424a85;

  --color-accent-100: #fff3ed;
  --color-accent-200: #ffe0d2;
  --color-accent-300: #ffc6ad;
  --color-accent-400: #ffa37e;
  --color-accent-500: #ff8a5c;
  --color-accent-600: #e46a3c;
  --color-accent-700: #b8512b;
  --color-accent-800: #80391f;
  --color-accent-900: #4f2617;

  --color-accent-2-100: #e9fbf9;
  --color-accent-2-200: #c6f3ee;
  --color-accent-2-300: #98e6de;
  --color-accent-2-400: #5fd3c7;
  --color-accent-2-500: #2fb8ab;
  --color-accent-2-600: #21968b;
  --color-accent-2-700: #1b746c;
  --color-accent-2-800: #15534e;
  --color-accent-2-900: #0f3734;

  /* Deck section-divider ground — review round 3: saturation as presence.
     Dividers take a saturated deep indigo (hue 277, the neutral ramp's own
     family; C 0.094 — written when the accent held C 0.030, before the
     round-7 blurple raised it past the ground's) with a lighter bloom and
     a ghost tint of the same hue, while the slide grounds stay
     desaturated. Deck-scale fills only — not interface colors. */
  --color-section: #1b6f7a;
  --color-section-glow: #2a96a0;
  --color-section-ghost: #5fc2c8;

  --font-heading: "Inter", system-ui, sans-serif;
  --font-heading-weight: 500;
  --font-body: "Inter", system-ui, sans-serif;

  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --space-6: 16.8px;
  --space-8: 22.4px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 0 0 1px #4f5894;
  --shadow-md: 0 0 0 1px #5d66a3, 0 8px 22px rgba(10,14,40,0.45);
  --shadow-lg: 0 0 0 1px #7680bd, 0 18px 44px rgba(10,14,40,0.5);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.lighten{mix-blend-mode:lighten;background-color:transparent}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
/* Rules fade to transparent at both ends instead of stopping cleanly — a
   Nocturne signature. The ramp is 48px an end (one deck baseline unit),
   painted from the same divider token. Freestanding rules fade; box
   outlines, in-control separators, and short accent marks stay solid. */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: linear-gradient(to right,
    transparent, var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px), transparent);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
.tag-accent-2 { background: var(--color-accent-2-800); color: var(--color-accent-2-100); }
.tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid transparent; /* keeps layout; the row paints the fading rule */
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid transparent;
}
/* Row rules as row-level strips so the end-fade spans the row, not each cell. */
.table thead tr {
  background: linear-gradient(to right,
    transparent, var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
.table tbody tr {
  background: linear-gradient(to right,
    transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
    color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
.table tbody tr:hover {
  /* the hover tint layers over the row rule, which keeps painting */
  background:
    linear-gradient(color-mix(in srgb, var(--color-text) 4%, transparent),
                    color-mix(in srgb, var(--color-text) 4%, transparent)) no-repeat 0 0 / 100% 100%,
    linear-gradient(to right,
      transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
      color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }


:root{--color-price:#9cf0b9;--color-sun:#ffd166;--color-sky:#7cc8ff;--color-mint:#5fd3c7;}
body{background:radial-gradient(1200px 700px at 100% -10%, #3d3f8a 0%, transparent 60%),radial-gradient(900px 600px at -10% 40%, #1f5a75 0%, transparent 60%),#2c3466;background-attachment:fixed}

/* PNIFA Safety Signal theme (site-wide) */

:root{--color-bg:#0f3a30;--color-surface:#155043;--color-text:#f4f1e6;--color-accent:#ffc928;--color-divider:color-mix(in srgb, #f4f1e6 18%, transparent);
--color-neutral-50:#ffffff;--color-neutral-100:#f7f4ea;--color-neutral-200:#e6e2d3;--color-neutral-300:#cfcbb9;--color-neutral-400:#b0ad9c;--color-neutral-500:#8e8c7e;--color-neutral-600:#6c7a6f;--color-neutral-700:#3f6a5c;--color-neutral-800:#245a4b;--color-neutral-900:#1a4d40;
--color-accent-100:#fff8de;--color-accent-200:#ffeeb0;--color-accent-300:#ffe07a;--color-accent-400:#ffd24a;--color-accent-500:#ffc928;--color-accent-600:#e0a80c;--color-accent-700:#a97d08;--color-accent-800:#6e5306;--color-accent-900:#3d3005;
--color-section:#ffc928;--color-section-glow:#ffd95e;--color-section-ghost:#ffe68f;--color-price:#ffe07a;
--radius-sm:2px;--radius-md:4px;--radius-lg:6px;
--shadow-sm:0 0 0 1px #2a6655;--shadow-md:0 0 0 1px #2f7360,0 10px 24px rgba(0,0,0,.3);--shadow-lg:0 0 0 2px #ffc928,0 20px 44px rgba(0,0,0,.4);
--font-heading:"Archivo","Inter",sans-serif;--font-body:"Archivo","Inter",sans-serif}
:root{--color-red:#e0362c}
image-slot::part(ring){display:none}
header[data-screen-label="Hero"] h1{font-size:clamp(40px,5.4vw,96px)!important}
[style*="font-size: 11px"],[style*="font-size: 12px"],[style*="font-size: 12.5px"]{font-size:13.5px!important}
[style*="color: var(--color-neutral-400)"],[style*="color: var(--color-neutral-500)"]{color:var(--color-neutral-200)!important}
[style*="var(--color-accent-900)"]{background:var(--color-surface)!important}
header[data-screen-label="Hero"]{padding-bottom:0!important;padding-top:clamp(32px,5vw,64px)!important}
div[role="region"] [style*="210px"] a[style*="font-weight: 500"]{font-size:15px!important;font-weight:800!important;text-transform:uppercase;letter-spacing:.02em;font-stretch:85%;padding-bottom:8px;margin-bottom:4px;box-shadow:inset 0 -3px 0 #ffc928}
div[role="region"] [style*="210px"] a[style*="font-weight: 500"] > span:not([style*="accent"]){background:none!important;padding:0!important}
div[role="region"] [style*="210px"] a[style*="font-weight: 500"] > span[style*="accent"]{background:#ffc928;color:#0f3a30!important;padding:1px 6px;font-weight:800}
div[role="region"] [style*="210px"] a:not([style*="font-weight: 500"]):not([style*="rgb(224, 54, 44)"]){font-size:14px!important;color:#2f5249!important}
div[role="region"] [style*="210px"] a:not([style*="font-weight: 500"])[style*="rgb(224, 54, 44)"]{font-size:14px!important}
div[role="region"] [style*="font-size: 24px"],div[role="region"] [style*="font-size: 22px"]{text-transform:uppercase;font-weight:800!important;font-stretch:85%;letter-spacing:0!important}
div[role="region"] .lighten{display:none}
div[role="region"] [style*="190px"] > div{box-shadow:inset 0 3px 0 #ffc928!important}
image-slot::part(image){filter:sepia(.16) saturate(.92) contrast(1.08) brightness(.96)}

image-slot::part(credit){opacity:0}
image-slot:hover::part(credit){opacity:1}
.lighten img,.lighten image-slot{filter:none!important}
.lighten{opacity:1!important}
.tag{border-radius:0!important;white-space:nowrap}
[style*="border-radius:999px"],[style*="border-radius: 999px"]{border-radius:2px!important}
:focus-visible{outline:3px solid #ffc928!important;outline-offset:2px}
nav[aria-label="Main"] ul button,nav[aria-label="Main"] ul a{font-size:14px!important;padding:9px 7px!important}
nav[aria-label="Main"] ul{gap:0!important}
nav[aria-label="Main"]{gap:10px!important;overflow-x:hidden!important}
nav[aria-label="Main"] .btn{padding:8px 14px!important}
section[data-screen-label],header[data-screen-label]{padding-top:clamp(56px,7vw,96px)!important;padding-bottom:clamp(56px,7vw,96px)!important}
h1,h2,h3{text-transform:uppercase}
[style*="font-size:11px"],[style*="font-size:12px"],[style*="font-size:12.5px"]{font-size:13.5px!important}
[style*="color:var(--color-neutral-400)"],[style*="color:var(--color-neutral-500)"]{color:var(--color-neutral-200)!important}
[style*="var(--color-accent-900)"]{background:var(--color-surface)!important}
footer form > div:first-of-type,form [style*="minmax(140px,1fr)"]{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}
div[role="region"] [style*="minmax(210px,1fr)"]{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))!important;gap:26px 32px!important}
div[role="region"] [style*="minmax(210px,1fr)"] > div > a:nth-of-type(n+8){display:none}
div[role="region"] [style*="minmax(210px,1fr)"] > div > a:first-child{font-size:15px!important;padding-bottom:6px;border-bottom:2px solid #ffc928}
div[role="region"] [style*="minmax(210px,1fr)"] > div > a:not(:first-child){font-size:14px!important;color:#3c5e55!important}
div[role="region"] image-slot::part(credit){display:none}
nav[aria-label="Main"] button[aria-expanded="true"]{background:transparent!important;color:#ffc928!important;box-shadow:inset 0 -3px 0 #ffc928}
body{background:#0f3a30;font-family:"Archivo","Inter",sans-serif}
h1,h2{font-family:"Archivo",sans-serif!important;font-weight:800!important;font-stretch:85%;text-transform:uppercase;letter-spacing:-.01em!important;line-height:.95!important}
.btn{border-radius:2px!important;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.btn-primary{background:#ffc928!important;color:#0f3a30!important;border-color:#ffc928!important}
.btn-primary:hover{background:#ffe07a!important}
nav[aria-label="Main"] .btn{text-transform:none;letter-spacing:0;font-weight:600}
div[role="region"]{color:#123d33;--color-surface:#faf7ee;--color-bg:#f1ecdc;--color-text:#123d33;--color-divider:color-mix(in srgb, #123d33 14%, transparent);
--color-neutral-100:#0f3a30;--color-neutral-200:#1d4a3f;--color-neutral-300:#3c5e55;--color-neutral-400:#55736a;--color-neutral-500:#7a8f87;--color-neutral-600:#a3b2ab;--color-neutral-700:#cfd8d2;--color-neutral-800:#e4e8e2;
--color-accent:#1f7a5c;--color-accent-200:#0f5a43;--color-accent-300:#1f7a5c;--color-accent-600:#e0a80c;--color-accent-700:#c9d9cf;
background:linear-gradient(180deg,#fbf8ef 0%,#f4efe0 100%)!important;box-shadow:0 1px 0 #ffc928 inset,0 24px 60px rgba(8,30,24,.35)!important;border-top:3px solid #ffc928}
div[role="region"] a:hover{color:#0f3a30!important;text-decoration:underline;text-decoration-color:#ffc928;text-decoration-thickness:2px;text-underline-offset:3px}
div[role="region"] [style*="font-variant-numeric"]{color:#b88400}
.lighten{mix-blend-mode:normal!important}
.lighten img,.lighten image-slot{filter:grayscale(.25) contrast(1.1)}




/* Menu hover: distinct */
nav[aria-label="Main"] ul button:hover,nav[aria-label="Main"] ul a:hover{background:#ffc928!important;color:#0f3a30!important;box-shadow:none!important}
div[role="region"] a{transition:background .12s,color .12s}
div[role="region"] a:hover{background:#ffc928!important;color:#0f3a30!important;text-decoration:none!important;border-radius:2px}
div[role="region"] a:hover span{color:#0f3a30!important}
div[role="region"] a[style*="#e0362c"]{color:#fff!important;font-weight:600}
div[role="region"] a[style*="#e0362c"]::before{content:"● ";font-size:9px;vertical-align:2px}
/* Clear CTAs */
.btn-primary{font-weight:700!important;letter-spacing:.02em}
.pnifa-cta{position:fixed;right:20px;bottom:20px;z-index:40;display:flex;align-items:center;gap:10px;padding:14px 20px;background:#e0362c;color:#fff!important;font:700 15px/1 var(--font-body);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.pnifa-cta:hover{background:#ffc928;color:#0f3a30!important}

/* Nav fit: two rows below 1360px */
nav[aria-label="Main"]{overflow:visible!important}
@media (max-width:1360px){
 nav[aria-label="Main"]{flex-wrap:wrap!important;row-gap:6px!important}
 nav[aria-label="Main"] > ul{order:5;flex:1 1 100%!important;justify-content:flex-start;overflow-x:auto}
 nav[aria-label="Main"] > button[aria-label="Search the site"] span{display:none}
 nav[aria-label="Main"] > a.btn{padding:7px 12px!important;font-size:13.5px!important}
}

div[role="region"] a[style*="rgb(224, 54, 44)"],div[role="region"] a[style*="rgb(224, 54, 44)"] *,div[role="region"] a[style*="#e0362c"],div[role="region"] a[style*="#e0362c"] *{color:#ffffff!important;font-weight:700!important}
div[role="region"] a[style*="rgb(224, 54, 44)"]{padding:3px 6px!important;margin:0 -6px!important}
div[role="region"] a[style*="rgb(224, 54, 44)"]::before{content:"● ";font-size:9px;vertical-align:2px}
div[role="region"] a[style*="rgb(224, 54, 44)"]:hover{background:#ffc928!important}
div[role="region"] a[style*="rgb(224, 54, 44)"]:hover,div[role="region"] a[style*="rgb(224, 54, 44)"]:hover *{color:#0f3a30!important}

div[role="region"] [style] a[style*="rgb(224, 54, 44)"]:not(:hover),div[role="region"] [style] a[style*="rgb(224, 54, 44)"]:not(:hover) *{color:#ffffff!important}

[data-screen-label="Band"]{color:var(--color-text)}
[data-screen-label="Band"] .btn-secondary{color:#f4f1e8!important;border-color:var(--color-accent)!important}
[data-screen-label="Band"] .btn-secondary:hover{background:var(--color-accent)!important;color:#0f3a30!important}

body:not(:has([style*="--color-section:"])) [style*="var(--color-section)"]{color:#0f3a30!important}
body:not(:has([style*="--color-section:"])) [style*="var(--color-section)"] *{color:#0f3a30!important;border-color:#0f3a30!important}

div[role="dialog"][aria-label="Search PNIFA"] input:focus,div[role="dialog"][aria-label="Search PNIFA"] input:focus-visible{outline:none!important;box-shadow:none!important}
div[role="dialog"][aria-label="Request a proposal"] input:focus-visible,div[role="dialog"][aria-label="Request a proposal"] select:focus-visible,div[role="dialog"][aria-label="Request a proposal"] textarea:focus-visible{outline:3px solid #ffc928!important;outline-offset:0}
image-slot:not([src]),image-slot[src=""]{outline:3px dashed #ffc928;outline-offset:-3px;background:repeating-linear-gradient(135deg,rgba(255,201,40,.10) 0 14px,transparent 14px 28px)}

section[data-tight]{padding-top:28px!important;padding-bottom:28px!important}
section[data-screen-label="Credentials"] > div{background:color-mix(in srgb, var(--color-text) 6%, transparent);box-shadow:inset 0 4px 0 #ffc928;padding:20px 24px}

/* Mobile */
@media (max-width:1024px){
 nav[aria-label="Main"]{flex-wrap:nowrap!important;overflow:visible!important;padding:10px 14px!important;gap:8px!important}
 nav[aria-label="Main"] > ul,nav[aria-label="Main"] > .btn,nav[aria-label="Main"] > button[aria-label="Search the site"]{display:none!important}
 nav[aria-label="Main"] > button[data-mnav-btn]{display:flex!important}
 nav[aria-label="Main"] img{height:32px!important}
 div[role="region"]{display:none!important}
}
[data-mnav] details summary::-webkit-details-marker{display:none}
[data-mnav] details[open] summary{background:rgba(255,201,40,.14)}
html,body{max-width:100%;overflow-x:hidden}
@media (max-width:640px){
 h1{font-size:clamp(32px,9vw,48px)!important;line-height:1.02!important}
 h2{font-size:clamp(24px,7vw,34px)!important}
 table{font-size:13px}
}

@media (max-width:640px){
 [data-stats]{grid-template-columns:1fr 1fr!important;gap:18px 0!important}
 [data-stats] > div{padding:6px 14px!important;box-shadow:none!important;text-align:left}
 [data-stats] > div:nth-child(even){box-shadow:inset 1px 0 0 var(--color-divider)!important}
 [data-stats] > div > div:first-child{font-size:clamp(32px,10vw,44px)!important}
}
.dialog-backdrop{position:fixed!important;inset:0!important}