/* Wisconsin Body Cam Central — dark, serious, law-enforcement media.
   Palette drawn from the channel shield logo: deep navy ground,
   shield blue, signal red. System fonts only — no dependencies.

   Design tokens (website-excellence top-5, 2026-10-17 — the Wire
   engine's token pattern, adapted): brand palette, semantic
   surface/text tokens (--surface/--ink/--muted/--faint/--link/
   --hairline/--card-border), a type scale, a spacing scale, radii,
   and a shadow token. Components reference the SEMANTIC tokens, so
   a theme only redefines values. This site's identity is the dark
   navy theme, so dark is the :root default; the header toggle (and
   an OS light preference with no saved choice) switches to the
   light theme defined below. Header / bottom-bar / premiere chrome
   stays dark in both themes (theme-invariant, like the Wire sites'
   pine bands) and uses literal colors on purpose. */

:root{
  /* brand palette */
  --bg:#070d1a;
  --bg2:#0a1322;
  --panel:#0e1930;
  --panel2:#12203c;
  --line:#1f3050;
  --blue:#4d9fff;
  --red:#ff4440;
  --gold:#e9c46a;
  /* semantic tokens */
  --surface:#0e1930;
  --ink:#e9eef7;
  --muted:#9db0cc;
  --faint:#6c81a3;
  --link:#4d9fff;
  --hairline:#1f3050;
  --card-border:#1f3050;
  /* type scale */
  --fs-xs:12px; --fs-sm:13px; --fs-base:16.5px; --fs-lg:19px;
  --fs-xl:21px; --fs-2xl:24px; --fs-3xl:27px;
  /* spacing scale */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:22px; --sp-6:28px;
  /* radii + shadow */
  --radius:14px; --radius-sm:8px; --radius-lg:18px;
  --shadow:0 6px 30px rgba(0,0,0,.45);
  color-scheme:dark;
}
/* Light theme — explicit choice via the header toggle … */
[data-theme="light"]{
  --bg:#eef2f9; --bg2:#e0e8f4;
  --panel:#ffffff; --panel2:#e8eef8; --line:#c9d6ec;
  --surface:#ffffff;
  --ink:#0c1526; --muted:#43597c; --faint:#64769a;
  --blue:#0b63d6; --link:#0b63d6;
  --red:#d92d28; --gold:#9a7414;
  --hairline:#c9d6ec; --card-border:#c9d6ec;
  --shadow:0 6px 24px rgba(13,32,64,.12);
  color-scheme:light;
}
/* … and the OS-preference fallback when no choice is saved. */
@media (prefers-color-scheme:light){
  :root:not([data-theme]){
    --bg:#eef2f9; --bg2:#e0e8f4;
    --panel:#ffffff; --panel2:#e8eef8; --line:#c9d6ec;
    --surface:#ffffff;
    --ink:#0c1526; --muted:#43597c; --faint:#64769a;
    --blue:#0b63d6; --link:#0b63d6;
    --red:#d92d28; --gold:#9a7414;
    --hairline:#c9d6ec; --card-border:#c9d6ec;
    --shadow:0 6px 24px rgba(13,32,64,.12);
    color-scheme:light;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
    "Helvetica Neue",Arial,sans-serif;
  font-size:var(--fs-base);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1060px;margin:0 auto;padding:0 18px}

/* ---------- Header (theme-invariant dark chrome) ---------- */
.site-head{
  background:linear-gradient(180deg,#0c1730,#081020);
  border-bottom:1px solid #1f3050;
}
.site-head .wrap{
  display:flex;align-items:center;gap:14px;padding-top:14px;padding-bottom:14px;
}
.brand-logo{width:54px;height:54px;border-radius:10px;flex:0 0 auto}
.brand-name{
  font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  font-size:clamp(1.02rem,3.6vw,1.35rem);line-height:1.15;color:#e9eef7;
}
.brand-name span{color:#4d9fff}
.brand-tag{
  color:#9db0cc;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;margin-top:2px;
}
.head-nav{margin-left:auto;display:flex;gap:6px}
.head-nav a{
  color:#e9eef7;font-weight:700;font-size:.92rem;
  padding:8px 12px;border-radius:var(--radius-sm);
}
.head-nav a:hover{background:rgba(255,255,255,.08);text-decoration:none}
@media (max-width:640px){.head-nav{display:none}}
.theme-toggle{
  margin-left:auto;background:transparent;color:#e9c46a;
  border:1px solid #1f3050;border-radius:var(--radius-sm);
  width:38px;height:38px;flex:0 0 auto;cursor:pointer;
  font-size:1.05rem;line-height:1;padding:0;
}
.head-nav + .theme-toggle{margin-left:0}
.theme-toggle:hover{background:rgba(255,255,255,.08)}

/* ---------- Hero (home) ---------- */
.hero{padding:26px 0 6px}
.hero-art{
  border:1px solid var(--card-border);border-radius:var(--radius);
  overflow:hidden;background:#000;
}
.hero-art img{width:100%;height:auto}
.mission{
  font-size:clamp(1.12rem,3.4vw,1.45rem);line-height:1.45;
  font-weight:600;margin:22px 0 4px;max-width:46ch;
}
.mission-sub{color:var(--muted);margin:6px 0 0;max-width:60ch}

/* ---------- Sections & panels ---------- */
.section{padding:26px 0 6px}
.section-head{
  display:flex;align-items:baseline;gap:12px;margin-bottom:14px;
}
.kicker{
  color:var(--red);font-weight:800;font-size:.78rem;
  letter-spacing:.22em;text-transform:uppercase;
}
.section-title{
  font-size:1.28rem;font-weight:800;letter-spacing:.01em;margin:0;
}
.panel{
  background:var(--surface);border:1px solid var(--card-border);
  border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);
}
.panel h3{margin:0 0 8px;font-size:1.3rem;line-height:1.3}
.meta-row{
  display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px;
}
.chip{
  background:var(--panel2);border:1px solid var(--card-border);
  color:var(--muted);border-radius:999px;
  padding:3px 11px;font-size:.8rem;font-weight:600;letter-spacing:.02em;
}
.chip b{color:var(--ink);font-weight:700}
.btn{
  display:inline-block;background:var(--red);color:#fff;font-weight:800;
  padding:11px 18px;border-radius:9px;letter-spacing:.02em;
}
.btn:hover{background:#ff5a55;text-decoration:none}
.btn-ghost{
  background:transparent;border:1px solid var(--line);color:var(--ink);
}
.btn-ghost:hover{background:var(--panel2)}

/* ---------- Case cards ---------- */
.case-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:16px;
}
.case-card{
  background:var(--surface);border:1px solid var(--card-border);
  border-radius:var(--radius);padding:18px;display:flex;
  flex-direction:column;gap:8px;box-shadow:var(--shadow);
}
.case-card h3{margin:0;font-size:1.12rem;line-height:1.35}
.case-card h3 a{color:var(--ink)}
.case-card p{margin:0;color:var(--muted);font-size:.95rem}
.case-card .go{margin-top:auto;font-weight:700}

/* ---------- Video slot ---------- */
.video-slot{margin:18px 0 6px}
.video-frame{
  width:100%;aspect-ratio:16/9;border:0;border-radius:10px;
  background:#000;display:block;
}
.video-facade{
  position:relative;width:100%;aspect-ratio:16/9;padding:0;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:#000;cursor:pointer;display:block;
}
.video-facade img{
  width:100%;height:100%;object-fit:cover;opacity:.85;
}
.video-play{
  position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;pointer-events:none;
}
.video-play svg{
  width:76px;height:76px;fill:#fff;background:rgba(255,68,64,.92);
  border-radius:50%;padding:20px;box-shadow:0 6px 30px rgba(0,0,0,.55);
}
.premiere{
  aspect-ratio:16/9;border:1px dashed #33507f;border-radius:10px;
  background:
    radial-gradient(120% 130% at 20% 0%,#12264a 0%,#081020 55%);
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:22px;gap:8px;
  color:#e9eef7; /* dark panel in both themes, by design */
}
.premiere .rec{
  color:var(--red);font-weight:800;letter-spacing:.3em;
  font-size:.8rem;text-transform:uppercase;
}
.premiere .rec::before{
  content:"";display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--red);margin-right:9px;vertical-align:1px;
}
.premiere h3{margin:0;font-size:clamp(1.15rem,4vw,1.6rem)}
.premiere p{margin:0;color:#9db0cc;max-width:52ch}

/* ---------- Case page ---------- */
.case-head{padding:26px 0 0}
.case-head h1{
  font-size:clamp(1.55rem,5.2vw,2.3rem);line-height:1.18;margin:6px 0 4px;
}
.fact-box{
  background:var(--surface);border:1px solid var(--card-border);
  border-radius:var(--radius);padding:6px 20px;margin:20px 0;
}
.fact-box dl{margin:0}
.fact-row{
  display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--hairline);
}
.fact-row:last-child{border-bottom:0}
.fact-row dt{
  flex:0 0 128px;color:var(--faint);font-weight:700;font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase;padding-top:3px;
}
.fact-row dd{margin:0;font-weight:600}
@media (max-width:560px){.fact-row{flex-direction:column;gap:0}.fact-row dt{flex:none}}
.prose{max-width:70ch}
.prose p{margin:0 0 15px}
.prose h2{
  font-size:1.22rem;margin:28px 0 10px;font-weight:800;
}
.charge-list{margin:0 0 6px;padding-left:20px}
.charge-list li{margin-bottom:7px}
.status-note{
  border-left:3px solid var(--gold);background:var(--bg2);
  padding:12px 16px;border-radius:0 10px 10px 0;color:var(--muted);
  font-size:.95rem;margin:18px 0;
}
.source-line{color:var(--faint);font-size:.88rem;margin-top:14px}

/* ---------- Chapters ---------- */
.chapters{
  list-style:none;margin:0;padding:0;counter-reset:ch;
}
.chapters li{
  display:flex;gap:14px;align-items:baseline;
  padding:9px 2px;border-bottom:1px solid var(--hairline);
}
.chapters li:last-child{border-bottom:0}
.ch-time{
  font-variant-numeric:tabular-nums;font-weight:800;color:var(--blue);
  flex:0 0 52px;font-size:.95rem;
}
a.ch-link{display:flex;gap:14px;align-items:baseline;color:var(--ink)}
a.ch-link:hover{text-decoration:none}
a.ch-link:hover .ch-label{color:var(--blue);text-decoration:underline}

/* ---------- Follow band ---------- */
.follow-band{
  margin:30px 0 6px;background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--card-border);border-radius:var(--radius);padding:20px;
}
.follow-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;margin-top:12px;
}
.follow-card{
  display:block;background:var(--bg2);border:1px solid var(--card-border);
  border-radius:10px;padding:14px 16px;color:var(--ink);
}
.follow-card:hover{text-decoration:none;border-color:var(--link)}
.follow-card .fc-name{font-weight:800;display:block}
.follow-card .fc-desc{color:var(--muted);font-size:.9rem;display:block;margin-top:2px}
.follow-card .fc-tag{
  color:var(--link);font-size:.76rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:4px;
}

/* ---------- Footer ---------- */
.site-foot{
  border-top:1px solid var(--hairline);margin-top:36px;
  padding:22px 0 30px;color:var(--faint);font-size:.9rem;
  background:var(--bg2);
}
.site-foot .fine{margin-top:8px;max-width:70ch}

/* ---------- Bottom menu bar (Wire pattern: phones / small screens) */
.bottombar{display:none}
@media (max-width:860px){
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  .bottombar{
    position:fixed;left:0;right:0;bottom:0;z-index:80;
    display:flex;background:#0a1425;
    padding-bottom:env(safe-area-inset-bottom);
    border-top:1px solid #1f3050;
    box-shadow:0 -2px 12px rgba(0,0,0,.45);
  }
  .bottombar a{
    flex:1 1 0;display:flex;flex-direction:column;align-items:center;
    gap:2px;padding:8px 2px 7px;color:#fff;
    font-weight:700;font-size:.72rem;letter-spacing:.04em;
  }
  .bottombar a:hover{text-decoration:none;color:var(--gold)}
  .bottombar a.is-active{color:var(--gold)}
  .bottombar svg{
    width:23px;height:23px;fill:none;stroke:currentColor;
    stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  }
}