:root {
  --bg: #f3f5f8;
  --card: #ffffff;
  --text: #17202b;
  --muted: #5d6b7b;
  --line: #e1e6ec;
  --link: #1864ab;
  --chip: #e9edf2;
  --mast: #0e1a26;
  --mast-text: #f1f4f8;
  --mast-muted: #9fb0c2;
  --accent: #ff5a4e;
  --fire: #d9480f;
  --traffic: #b07800;
  --police: #1864ab;
  --other: #66727f;
  --ok: #2b8a3e;
  --warn: #b07800;
  --bad: #c92a2a;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1218;
    --card: #161d26;
    --text: #e6ebf1;
    --muted: #96a3b2;
    --line: #26303c;
    --link: #74b4ff;
    --chip: #212a35;
    --mast: #0a1119;
    --fire: #ff8a4c;
    --traffic: #f2b632;
    --police: #6fb1ff;
    --other: #9aa6b2;
    --ok: #69db7c;
    --warn: #f2b632;
    --bad: #ff8787;
    --shadow: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1218; --card: #161d26; --text: #e6ebf1; --muted: #96a3b2; --line: #26303c; --link: #74b4ff;
  --chip: #212a35; --mast: #0a1119; --fire: #ff8a4c; --traffic: #f2b632; --police: #6fb1ff; --other: #9aa6b2;
  --ok: #69db7c; --warn: #f2b632; --bad: #ff8787; --shadow: none; color-scheme: dark;
}

* { box-sizing: border-box; }
/* Anything marked hidden stays hidden, whatever display rule a class sets. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; min-height: 100vh;
}
main { flex: 1; width: 100%; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Masthead */
.masthead { background: var(--mast); color: var(--mast-text); }
.masthead-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--mast-text); }
.brand:hover { text-decoration: none; }
.brand img { display: block; border-radius: 8px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; }
.brand-tag { font-size: .78rem; color: var(--mast-muted); }
.nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .95rem; }
.nav a { color: var(--mast-muted); padding: 4px 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--mast-text); text-decoration: none; border-bottom-color: var(--accent); }

/* Page head */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; margin: 26px 0 14px; }
.page-head h1 { font-size: 1.6rem; line-height: 1.2; margin: 0; letter-spacing: -.01em; }
.live { margin: 4px 0 0; font-size: .85rem; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 78, .55); } 70% { box-shadow: 0 0 0 7px rgba(255, 90, 78, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 78, 0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

.new-banner { background: var(--mast); color: var(--mast-text); border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; display: flex; gap: 10px; align-items: center; }
.new-banner a { color: #fff; font-weight: 700; text-decoration: underline; }
.new-banner[hidden] { display: none; }

/* Map */
.map { border-radius: 12px; border: 1px solid var(--line); background: var(--chip); z-index: 0; }
.map-large { height: 320px; margin-bottom: 14px; }
.map-small { height: 230px; margin: 16px 0 4px; }
@media (max-width: 600px) { .map-large { height: 240px; } }

/* Filters */
.filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--chip); color: var(--text); border-radius: 999px; padding: 5px 13px; font-size: .88rem; font-weight: 600; border: 1px solid transparent; }
.chip:hover { text-decoration: none; border-color: var(--line); }
.chip.on { background: var(--text); color: var(--bg); }
.selects { display: flex; flex-wrap: wrap; gap: 8px; }
.town-select select, .selects button {
  font: inherit; font-size: .9rem; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--text);
}

/* Feed */
.empty { background: var(--card); border: 1px dashed var(--line); border-radius: 12px; padding: 22px; color: var(--muted); text-align: center; }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.card { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--other); border-radius: 12px; padding: 15px 18px; box-shadow: var(--shadow); }
.card.g-fire { border-left-color: var(--fire); }
.card.g-traffic { border-left-color: var(--traffic); }
.card.g-police { border-left-color: var(--police); }
.card h2 { font-size: 1.14rem; margin: 6px 0 2px; line-height: 1.3; }
.card h2 a { color: var(--text); }
.card p { margin: 6px 0 0; }
.card .summary { color: var(--text); }
.card.single { margin-top: 26px; padding: 22px 24px; }
.card.single h1 { font-size: 1.6rem; line-height: 1.22; margin: 10px 0 6px; letter-spacing: -.01em; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .83rem; color: var(--muted); }
.meta .area { color: var(--muted); font-weight: 600; }
.meta .town { font-weight: 600; color: var(--text); }
.tag { border-radius: 999px; padding: 1px 9px; text-transform: capitalize; font-weight: 700; font-size: .78rem; background: var(--chip); color: var(--other); }
.tag-fire { color: var(--fire); }
.tag-traffic { color: var(--traffic); }
.tag-police { color: var(--police); }
.loc { color: var(--muted); font-size: .92rem; }
.body { font-size: 1.06rem; }
.fine { font-size: .8rem; color: var(--muted); margin: 4px 0 0; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: .9rem; margin: 18px 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.note { font-size: .85rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; margin-bottom: 0; }
.back { margin: 16px 0; }
.prose ul { padding-left: 20px; }
.pager { display: flex; justify-content: space-between; margin: 18px 0 8px; font-weight: 600; }

.site-foot { color: var(--muted); font-size: .82rem; border-top: 1px solid var(--line); margin-top: 36px; padding: 18px 0 28px; }
.site-foot p { margin: 4px 0; }

/* Sponsors and support */
.feed-local { list-style: none; }
.localbiz { background: var(--card); border: 1px dashed var(--line); border-radius: 12px; padding: 10px 14px 12px; margin: 14px 0; }
.feed .localbiz { margin: 0; }
.lb-tag { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.lb-body { display: flex; align-items: center; gap: 14px; color: var(--text); }
.lb-body:hover { text-decoration: none; }
.lb-body:hover strong { text-decoration: underline; }
.lb-body img { width: 64px; height: 64px; object-fit: contain; border-radius: 8px; background: #fff; flex: none; }
.lb-text { display: flex; flex-direction: column; gap: 2px; font-size: .92rem; }
.lb-text span { color: var(--muted); }
.support-note { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin: 14px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.support-note p { margin: 0; flex: 1 1 260px; color: var(--muted); font-size: .92rem; }
.nav a.nav-support { color: #ffb4ad; }

/* ---------- Admin ---------- */
.admin-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 20px 0 6px; }
.admin-bar h1 { font-size: 1.35rem; margin: 0; flex: 1; }
.admin-bar form { margin: 0; }
.admin-nav { display: flex; gap: 14px; font-weight: 600; }
.btn { font: inherit; font-size: .9rem; font-weight: 600; border-radius: 8px; padding: 7px 14px; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; }
.btn:hover { border-color: var(--muted); }
.btn-primary { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.msg { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: 8px; padding: 10px 14px; margin: 10px 0; }
.error { border-left-color: var(--bad); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; align-items: start; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.stat .k { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.stat .v { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat .s { font-size: .8rem; color: var(--muted); }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 10px; }
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.status { display: inline-block; border-radius: 999px; padding: 1px 8px; font-size: .76rem; font-weight: 700; background: var(--chip); }
.st-published { color: var(--ok); }
.st-held, .st-draft, .st-pending { color: var(--warn); }
.st-rejected, .st-withdrawn, .st-failed { color: var(--bad); }
.st-transcribed { color: var(--ok); }
.st-skipped { color: var(--muted); }
.reason { color: var(--muted); font-size: .82rem; }
.transcript { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; white-space: pre-wrap; }
audio { height: 32px; max-width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.actions form { margin: 0; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: .9rem; margin: 12px 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.login { max-width: 360px; margin: 60px auto; }
.login input { width: 100%; font: inherit; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--text); margin: 8px 0 12px; }
.town-fix { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 6px 0 14px; font-size: .9rem; }
.town-fix label[for="town"] { font-weight: 600; }
.town-fix input[type="text"], .town-fix input:not([type]) { font: inherit; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); min-width: 180px; }
.town-fix .check { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.form-grid { display: grid; gap: 12px; padding: 18px 20px; }
.form-grid h2 { font-size: 1.05rem; margin: 6px 0 0; }
.form-grid.card { border-left-width: 1px; }
.form-grid label { display: block; font-weight: 600; font-size: .9rem; }
.form-grid label > input:not([type="checkbox"]), .form-grid label > select, .form-grid label > textarea { display: block; margin-top: 4px; }
.form-grid .row { align-items: end; }
.form-grid label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.form-grid input:not([type="checkbox"]), .form-grid select, .form-grid textarea {
  font: inherit; font-weight: 400; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); width: 100%;
}
.form-grid .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.form-grid p { margin: 0; }
.logo-row { display: flex; align-items: center; gap: 14px; }
.logo-row img { object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--line); }

/* Advertise page */
.section-title { font-size: 1.2rem; margin: 28px 0 10px; }
.ad-offer { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; }
.ad-price { display: flex; align-items: baseline; gap: 6px; }
.ad-price .amount { font-size: 2.6rem; font-weight: 800; letter-spacing: -.02em; }
.ad-price .per { color: var(--muted); }
.ad-offer ul { margin: 0; padding-left: 18px; flex: 1 1 380px; }
.ad-offer li { margin: 3px 0; }
.ad-mockups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.ad-mockups figure { margin: 0; }
.ad-mockups figcaption { font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.mock { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: grid; gap: 7px; align-content: start; }
.mock-card { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--other); border-radius: 7px; padding: 8px; display: grid; gap: 5px; }
.mock-card.g-fire { border-left-color: var(--fire); } .mock-card.g-traffic { border-left-color: var(--traffic); } .mock-card.g-police { border-left-color: var(--police); }
.mock-card span { width: 30%; height: 6px; border-radius: 3px; background: var(--chip); }
.mock-card b { width: 80%; height: 8px; border-radius: 3px; background: var(--muted); opacity: .45; }
.mock-card i, .mock-card em { width: 95%; height: 6px; border-radius: 3px; background: var(--chip); }
.mock-tall { padding-bottom: 14px; } .mock-card em { width: 100%; height: 40px; border-radius: 6px; }
.mock-ad { border: 2px dashed var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card)); border-radius: 7px; padding: 10px; text-align: center; font-weight: 800; font-size: .85rem; }
.mock-fb { background: var(--card); align-content: start; font-size: .88rem; }
.mock-fb p { margin: 0; }
.fb-head { display: flex; gap: 8px; align-items: center; }
.fb-head img { border-radius: 6px; }
.fb-head span { display: flex; flex-direction: column; line-height: 1.15; }
.fb-head small { color: var(--muted); font-size: .75rem; }
.apply-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
@media (max-width: 760px) { .apply-layout { grid-template-columns: 1fr; } .apply-preview { order: -1; } }
.apply-preview { position: sticky; top: 12px; }
.apply-preview .localbiz { margin: 0; }
.terms { font-size: .88rem; color: var(--muted); }
.terms summary { cursor: pointer; font-weight: 600; color: var(--text); }
.terms ul { padding-left: 18px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.inline-note { display: flex; gap: 6px; }
.inline-note input { font: inherit; font-size: .9rem; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--text); }
.rotation-note { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--police); border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; font-size: .92rem; }
.mock-dots { text-align: center; color: var(--muted); font-size: .75rem; letter-spacing: .05em; }
/* Ticket threads */
.thread { display: grid; gap: 10px; margin: 14px 0; }
.bubble { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; max-width: 85%; }
.bubble.from-us { justify-self: end; border-color: color-mix(in srgb, var(--police) 40%, var(--line)); background: color-mix(in srgb, var(--police) 7%, var(--card)); }
.bubble .who { font-size: .78rem; color: var(--muted); margin-bottom: 4px; }
.bubble .text { white-space: pre-wrap; }
.lb-banner { display: block; border-radius: 8px; overflow: hidden; line-height: 0; }
.lb-banner img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover; }
.localbiz.is-banner { padding-bottom: 10px; }
.btn-big { font-size: 1.05rem; padding: 11px 22px; }
.support-page { max-width: 620px; }
/* Admin dropdown menu */
.admin-nav { align-items: center; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; color: var(--mast-muted); padding: 4px 0; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: " ▾"; font-size: .8em; }
.menu[open] summary, .menu summary:hover { color: var(--mast-text); }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 1000; min-width: 200px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 6px; display: grid; }
.nav .menu-list a { color: var(--text); padding: 8px 10px; border-radius: 6px; border: 0; }
.nav .menu-list a:hover { background: var(--chip); text-decoration: none; }
.badge { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 800; line-height: 18px; text-align: center; }
@media (max-width: 600px) { .menu-list { left: 0; right: auto; } }
.sens { color: var(--warn); font-size: .78rem; font-weight: 700; cursor: help; white-space: nowrap; }
/* WisDOT 511 */
.road-banner { background: #7a1d16; color: #fff; }
.road-banner p { margin: 0; padding: 8px 0; font-size: .92rem; }
.road-banner a { color: #fff; text-decoration: underline; font-weight: 700; }
.road-panel { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--traffic); border-radius: 12px; padding: 10px 16px; margin: 0 0 14px; }
.road-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.road-panel-head a { margin-left: auto; font-size: .88rem; font-weight: 600; }
.road-panel ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; font-size: .92rem; }
.road-panel li .fine { margin-left: 4px; }
.road-card { border-left-color: var(--traffic); }
.road-card.is-closed { border-left-color: var(--bad); }
.cond-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
/* Scanner status */
.scanner-status { cursor: help; }
.scanner-status.is-online .live-dot { background: #2f9e44; animation: pulse-green 2s infinite; }
.scanner-status.is-offline .live-dot { background: #e03131; animation: none; }
.scanner-status.is-offline { color: var(--bad); }
@keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(47, 158, 68, .55); } 70% { box-shadow: 0 0 0 7px rgba(47, 158, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 158, 68, 0); } }
@media (prefers-reduced-motion: reduce) { .scanner-status.is-online .live-dot { animation: none; } }
.county-head { font-size: 1rem; margin: 14px 0 8px; color: var(--muted); }
.map-key { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin: -6px 0 6px; }

/* ---------- Readable category colors and buttons ----------
   Each color pair below is chosen for contrast: light tints get dark text, solid fills get white text only when
   the fill is dark enough (amber and all the bright dark-mode fills use dark text instead). */
:root {
  --fire-soft: #fff0e6; --fire-ink: #9a3412; --fire-solid: #c2410c; --fire-on: #ffffff;
  --traffic-soft: #fff4d1; --traffic-ink: #6b4700; --traffic-solid: #f2b632; --traffic-on: #2b1d00;
  --police-soft: #e5effb; --police-ink: #144b8a; --police-solid: #1864ab; --police-on: #ffffff;
  --other-soft: #eceff2; --other-ink: #3f4954; --other-solid: #495057; --other-on: #ffffff;
  --btn-go: #1b6b32; --btn-go-on: #ffffff; --btn-stop: #b42318; --btn-stop-on: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fire-soft: #3a1d0f; --fire-ink: #ffb48e; --fire-solid: #ff8a4c; --fire-on: #2a1203;
    --traffic-soft: #3a2e0a; --traffic-ink: #f7cd66; --traffic-solid: #f2b632; --traffic-on: #2b1d00;
    --police-soft: #13283f; --police-ink: #a6cfff; --police-solid: #6fb1ff; --police-on: #071a2e;
    --other-soft: #262d36; --other-ink: #c8d1db; --other-solid: #a5b0bb; --other-on: #12171d;
    --btn-go: #69db7c; --btn-go-on: #0b2412; --btn-stop: #ff8787; --btn-stop-on: #2a0606;
  }
}
:root[data-theme="dark"] {
  --fire-soft: #3a1d0f; --fire-ink: #ffb48e; --fire-solid: #ff8a4c; --fire-on: #2a1203;
  --traffic-soft: #3a2e0a; --traffic-ink: #f7cd66; --traffic-solid: #f2b632; --traffic-on: #2b1d00;
  --police-soft: #13283f; --police-ink: #a6cfff; --police-solid: #6fb1ff; --police-on: #071a2e;
  --other-soft: #262d36; --other-ink: #c8d1db; --other-solid: #a5b0bb; --other-on: #12171d;
  --btn-go: #69db7c; --btn-go-on: #0b2412; --btn-stop: #ff8787; --btn-stop-on: #2a0606;
}

.chip-fire { background: var(--fire-soft); color: var(--fire-ink); }
.chip-traffic { background: var(--traffic-soft); color: var(--traffic-ink); }
.chip-police { background: var(--police-soft); color: var(--police-ink); }
.chip-other { background: var(--other-soft); color: var(--other-ink); }
.chip-fire.on { background: var(--fire-solid); color: var(--fire-on); }
.chip-traffic.on { background: var(--traffic-solid); color: var(--traffic-on); }
.chip-police.on { background: var(--police-solid); color: var(--police-on); }
.chip-other.on { background: var(--other-solid); color: var(--other-on); }
.chip-fire:hover { border-color: var(--fire-solid); }
.chip-traffic:hover { border-color: var(--traffic-solid); }
.chip-police:hover { border-color: var(--police-solid); }
.chip-other:hover { border-color: var(--other-solid); }

.tag-fire { background: var(--fire-soft); color: var(--fire-ink); }
.tag-traffic { background: var(--traffic-soft); color: var(--traffic-ink); }
.tag-police { background: var(--police-soft); color: var(--police-ink); }
.tag-other { background: var(--other-soft); color: var(--other-ink); }

.btn-primary { background: var(--btn-go); border-color: var(--btn-go); color: var(--btn-go-on); }
.btn-danger { background: var(--btn-stop); border-color: var(--btn-stop); color: var(--btn-stop-on); }
.btn-primary:hover, .btn-danger:hover { filter: brightness(1.08); }
/* Status labels and badges, with the same contrast rules */
:root { --st-ok: #1b6b32; --st-warn: #6b4700; --st-bad: #b42318; --badge: #b42318; --badge-on: #ffffff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --st-ok: #8ce99a; --st-warn: #f7cd66; --st-bad: #ffa8a8; --badge: #ff8787; --badge-on: #2a0606; } }
:root[data-theme="dark"] { --st-ok: #8ce99a; --st-warn: #f7cd66; --st-bad: #ffa8a8; --badge: #ff8787; --badge-on: #2a0606; }
.st-published, .st-transcribed { color: var(--st-ok); }
.st-held, .st-draft, .st-pending { color: var(--st-warn); }
.st-rejected, .st-withdrawn, .st-failed { color: var(--st-bad); }
.badge { background: var(--badge); color: var(--badge-on); }
/* Footer */
.site-foot { font-size: .88rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 20px 32px; }
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text); margin: 0 0 8px; }
.foot-col p { margin: 0 0 8px; line-height: 1.5; }
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot-emergency strong { color: var(--text); }
.foot-bottom { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; font-size: .8rem; }
.pay-note { background: var(--bg); border: 1px solid var(--line); border-left: 4px solid var(--btn-go); border-radius: 10px; padding: 10px 14px; font-size: .9rem; }
.pay-note p { margin: 0 0 6px; }
.pay-note p:last-child { margin: 0; }
.manage-link { margin: -4px 0 12px; font-size: .92rem; }
.manage-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 0 0 12px; }
.manage-box .fine { display: block; }
.earnings { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--btn-go); border-radius: 12px; padding: 14px 18px; margin: 10px 0 14px; }
.earn-head { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.earn-total { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; margin: 2px 0; }
.earn-parts { font-size: .92rem; font-variant-numeric: tabular-nums; }
.earn-prev { font-size: .82rem; color: var(--muted); margin-top: 6px; }
/* Advertise page layout */
.adv-hero { margin: 26px 0 8px; }
.adv-hero h1 { font-size: 1.8rem; line-height: 1.2; margin: 0 0 6px; letter-spacing: -.01em; }
.adv-lead { font-size: 1.08rem; color: var(--muted); margin: 0 0 14px; max-width: 640px; }
.adv-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 8px; }
.adv-price { font-size: 1.05rem; }
.adv-price strong { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }
.adv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.adv-tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.adv-tile h3 { font-size: .98rem; margin: 0 0 4px; }
.adv-tile p { margin: 0; font-size: .9rem; color: var(--muted); }
.adv-note { font-size: .9rem; color: var(--muted); margin: 10px 0 0; }
.ad-mockups { align-items: stretch; }
.ad-mockups figure { display: flex; flex-direction: column; }
.ad-mockups .mock { flex: 1; }
.adv-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.adv-steps li { counter-increment: step; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 12px 50px; position: relative; font-size: .92rem; }
.adv-steps li::before { content: counter(step); position: absolute; left: 14px; top: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--text); color: var(--bg); font-weight: 800; font-size: .85rem; display: grid; place-items: center; }
.form-section { font-size: 1rem; margin: 6px 0 0; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.form-section + * { margin-top: 2px; }
.field-help { display: block; font-weight: 400; font-size: .82rem; color: var(--muted); margin-top: 4px; }
.form-finish { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }
.about { max-width: 760px; }
.about h2 { font-size: 1.15rem; margin: 22px 0 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.about-lead { font-size: 1.06rem; color: var(--muted); }
.about ol, .about ul { padding-left: 22px; }
.about li { margin: 5px 0; }
.last-tx { margin: 2px 0 0 15px; font-size: .8rem; color: var(--muted); cursor: help; }
/* Cleared road items and road map markers */
.is-cleared { opacity: .72; }
.road-card.is-cleared { border-left-color: var(--other); }
.road-pin { display: grid; place-items: center; font-size: 15px; line-height: 1; background: #f2b632; color: #2b1d00; border: 2px solid #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.collapse-section > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; margin: 28px 0 10px; }
.collapse-section > summary::-webkit-details-marker { display: none; }
.collapse-section > summary h2 { margin: 0; }
.collapse-section > summary::before { content: "▸"; color: var(--muted); font-size: 1.2rem; line-height: 1; width: 1em; text-align: center; }
.collapse-section[open] > summary::before { content: "▾"; }
/* Breakdown lists inside admin stat boxes: label left, value right */
.stat .v small { font-size: .8rem; font-weight: 600; color: var(--muted); }
.stat-list { list-style: none; margin: 8px 0 0; padding: 0; font-size: .82rem; }
.stat-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 0; border-top: 1px solid var(--line); line-height: 1.3; }
.stat-list li > span:first-child { color: var(--muted); }
.stat-list li > :last-child { text-align: right; font-variant-numeric: tabular-nums; }
.stat-list li.sub { padding-left: 10px; border-top-style: dashed; }
.stat-list li.sub > span:first-child::before { content: "↳ "; }
.stat-list li.ok > :last-child { color: var(--st-ok); }
.stat-list li.ok > :last-child::before { content: "✓ "; }
.stat-list li.bad > :last-child { color: var(--st-bad); font-weight: 700; }
.stat-list li.bad > :last-child::before { content: "✗ "; }
.stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 820px) { .stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .stats-4 { grid-template-columns: 1fr; } }
.stat-note { margin: 8px 0 0; font-size: .74rem; line-height: 1.35; color: var(--muted); }