/* DataDash — site shell styles.
   Idea: a BC field notebook marked up with a highlighter. One family (Archivo) at two widths;
   the highlighter stroke is the single loud element, used only on facts and dates. */
[hidden]{display:none!important}
:root{
  --fog:#EAEFEC;      /* page */
  --sheet:#F7F9F8;    /* raised surfaces */
  --ink:#14273A;      /* Pacific night: text */
  --slate:#5A6B78;    /* secondary text */
  --rule:#C9D3CF;     /* lines */
  --kelp:#1E6B52;     /* links, actions */
  --kelp-ink:#ffffff;
  --hl:#FFD43B;       /* highlighter */
  --hl-ink:#14273A;
  --ok:#1E6B52; --err:#B3261E;
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --fog:#0F1E2C; --sheet:#152838; --ink:#E6EEF0; --slate:#9DB0BC; --rule:#2A4152;
  --kelp:#5CC9A1; --kelp-ink:#0F1E2C; --hl:#E9B91E; --hl-ink:#14273A; --ok:#5CC9A1; --err:#F2948B; color-scheme:dark}}
:root[data-theme="dark"]{
  --fog:#0F1E2C; --sheet:#152838; --ink:#E6EEF0; --slate:#9DB0BC; --rule:#2A4152;
  --kelp:#5CC9A1; --kelp-ink:#0F1E2C; --hl:#E9B91E; --hl-ink:#14273A; --ok:#5CC9A1; --err:#F2948B; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fog);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55;
  font-variation-settings:"wdth" 100;
  padding:0 max(18px,env(safe-area-inset-right,0px)) 64px max(18px,env(safe-area-inset-left,0px))}
.wrap{max-width:1100px;margin:0 auto}
a{color:var(--kelp);text-underline-offset:3px;text-decoration-thickness:1.5px}
:focus-visible{outline:3px solid var(--hl);outline-offset:2px;border-radius:2px}
h1,h2,h3{margin:0;font-family:var(--font);text-wrap:balance}
p{margin:0}

/* The highlighter: a slightly uneven marker stroke behind text. */
.hl{background:
  linear-gradient(100deg, transparent 0 .25em, var(--hl) .25em calc(100% - .2em), transparent calc(100% - .2em)) 0 62%/100% .62em no-repeat;
  color:inherit;padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hl-solid{background:var(--hl);color:var(--hl-ink);padding:.05em .3em;border-radius:.15em .35em .2em .3em}

/* Masthead */
.top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:22px 0 18px;border-bottom:2px solid var(--ink)}
.brand{display:inline-flex;align-items:center;gap:.4em;color:var(--ink);text-decoration:none;
  font-size:23px;font-weight:850;letter-spacing:-.01em;font-variation-settings:"wdth" 125}
.brand .dash{display:inline-block;width:1.1em;height:.32em;background:var(--hl);border-radius:2px;transform:skewX(-12deg) translateY(.05em)}
.brand small{font-size:.62em;font-weight:500;color:var(--slate);font-variation-settings:"wdth" 100;letter-spacing:0}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;padding:6px 12px;border-radius:999px}
.nav a:hover{background:var(--sheet)}
.nav a[aria-current="page"]{background:var(--ink);color:var(--fog)}

/* Hero */
.hero{padding:56px 0 36px;display:flex;flex-direction:column;gap:20px}
.hero h1{font-size:clamp(46px,9.5vw,118px);line-height:.95;padding-bottom:.06em;font-weight:900;letter-spacing:-.035em;font-variation-settings:"wdth" 125;max-width:11ch}
.hero .lede{font-size:clamp(18px,2.2vw,21px);color:var(--slate);max-width:52ch}
.hero.small{padding:44px 0 26px}
.hero.small h1{font-size:clamp(38px,7vw,76px);max-width:16ch}

/* Fact strip: real counts pulled from the dashboards */
.facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:6px;padding:0;list-style:none}
.facts li{display:flex;align-items:baseline;gap:8px;font-size:15px;color:var(--slate)}
.facts b{font-size:clamp(26px,3.6vw,38px);line-height:1;font-weight:850;color:var(--ink);font-variant-numeric:tabular-nums;font-variation-settings:"wdth" 112}

/* Dashboard index: rows led by their art, tagged by jurisdiction */
.index{margin-top:18px}
.index h2,.section-h{font-size:15px;font-weight:700;color:var(--slate);margin:0 0 6px}
.row{display:grid;grid-template-columns:210px minmax(0,1fr) auto;gap:10px 28px;align-items:center;
  padding:22px 0;border-top:1px solid var(--rule);color:inherit;text-decoration:none}
.row:last-child{border-bottom:1px solid var(--rule)}
.thumb{height:98px;overflow:hidden}
.tag{display:inline-block;font-size:13px;font-weight:700;line-height:1.2;padding:3px 10px;border-radius:999px;border:1.5px solid var(--ink);margin-bottom:8px}
.tag[data-j="federal"]{background:var(--ink);color:var(--fog)}
.row h3{font-size:clamp(24px,3vw,32px);font-weight:800;line-height:1.05;letter-spacing:-.015em;font-variation-settings:"wdth" 112}
.row p{color:var(--slate);margin-top:6px;max-width:62ch}
.row .open{font-weight:700;color:var(--kelp);white-space:nowrap}
a.row:hover h3{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--hl);text-underline-offset:5px}
.row.next .thumb{opacity:.55}
@media (max-width:720px){
  .row{grid-template-columns:1fr;gap:12px;padding:22px 0}
  .thumb{height:110px}
}

/* Support note: deliberately quiet */
.support{margin-top:36px;font-size:14px;color:var(--slate)}
.support a{color:var(--slate)}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:12px 22px;cursor:pointer;
  font:700 16px var(--font);text-decoration:none;background:var(--kelp);color:var(--kelp-ink)}
.btn:hover{filter:brightness(1.08)}
.btn.coffee{background:var(--hl);color:var(--hl-ink)}
.btn:disabled{opacity:.6;cursor:wait}

/* Prose pages (about) */
.prose{display:grid;grid-template-columns:220px minmax(0,1fr);gap:8px 40px;padding:28px 0;border-top:1px solid var(--rule)}
.prose h2{font-size:22px;font-weight:800;line-height:1.15;font-variation-settings:"wdth" 112}
.prose .body{display:flex;flex-direction:column;gap:12px;max-width:66ch}
.prose ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:8px}
.prose li::marker{color:var(--kelp)}
@media (max-width:720px){.prose{grid-template-columns:1fr}}

/* Form */
.formcard{background:var(--sheet);border:1px solid var(--rule);border-radius:4px 18px 4px 18px;padding:26px}
form{display:flex;flex-direction:column;gap:18px}
label{font-weight:700;font-size:15px;display:flex;flex-direction:column;gap:7px}
label .opt{font-weight:400;color:var(--slate)}
input,select,textarea{font:inherit;font-size:16px;color:inherit;background:var(--fog);border:1.5px solid var(--rule);border-radius:10px;padding:11px 13px;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px var(--hl)}
textarea{min-height:170px;resize:vertical}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.status{font-size:15px;font-weight:600;border-radius:10px;padding:11px 14px}
.status.ok{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.status.err{background:color-mix(in srgb,var(--err) 13%,transparent);color:var(--err)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:620px){.row2{grid-template-columns:1fr}}

footer{margin-top:56px;padding-top:18px;border-top:2px solid var(--ink);font-size:14px;color:var(--slate);display:flex;flex-wrap:wrap;gap:8px 22px}
footer a{color:var(--slate)}