/* self-hosted Barlow + Barlow Condensed (latin) — no external font requests */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/barlow-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/barlow-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/barlow-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/barlow-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Jeffersonville Police Department — Design System
   Navy / patch red / seal blue (per JPD patch) · Barlow Condensed + Barlow
   ============================================================ */

:root {
  --navy-950: #060d1a;
  --navy-900: #0a1626;
  --navy-800: #102039;
  --navy-700: #1a3357;
  --navy-line: rgba(255, 255, 255, 0.12);

  --blue: #1c4e8a;
  --blue-bright: #3a6ea5;
  --brand: #b4232b;
  --brand-dark: #951c23;
  --brand-bright: #e0897c;
  --red: #b4232b;
  --sky: #3a6ea5;
  --gold: #b98d3e;

  /* reading surfaces: paper, white, pale gray; navy only for chrome + the map instrument */
  --paper: #f6f5f1;
  --paper-2: #eaece8;
  --card: #ffffff;
  --ink: #122636;
  --muted: #4f5d6a;
  --line: #d9dcd9;
  --focus: #2c82b0;
  --nav-h: 75px; /* sticky nav height; keep feed-day sticky offset in sync */

  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1180px;
  /* one radius scale: 2px controls, 4px containers, 0 for sections */
  --radius: 4px;
  --radius-ctl: 2px;
  /* no soft card shadows; --shadow-md is for genuine overlays only (menus, popovers, dialogs) */
  --shadow-sm: none;
  --shadow-md: 0 12px 32px rgba(10, 22, 38, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--blue); }
a:hover { color: var(--navy-700); }

/* type scale (rem): 0.75 label / 0.875 small / 1.0625 body / 1.25 lead / 1.375 h3 / 2.25 h2 / 3.5 h1 */
h1, h2, h3, h4 {
  font-family: var(--body);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5em;
  color: var(--ink);
  letter-spacing: 0;
  text-wrap: balance;
}
h1 { font-family: var(--display); font-weight: 700; font-size: clamp(2.375rem, 1.5rem + 2.6vw, 3.5rem); line-height: 1.05; letter-spacing: 0.005em; }
h2 { font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2.25rem); line-height: 1.18; letter-spacing: -0.005em; }
h3 { font-size: clamp(1.1875rem, 1.05rem + 0.4vw, 1.375rem); line-height: 1.3; }
h4 { font-size: 1rem; }

p { margin: 0 0 1em; }
.lede { font-size: clamp(1.125rem, 1rem + 0.35vw, 1.25rem); line-height: 1.5; color: var(--muted); max-width: 65ch; }
.num, .tnum { font-variant-numeric: tabular-nums; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand); color: #fff; padding: 10px 18px; font-weight: 700; border-radius: var(--radius-ctl);
}
.skip-link:focus { left: 12px; top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- emergency ribbon ---------- */
.ribbon {
  background: var(--navy-950);
  border-bottom: 1px solid var(--navy-line);
  color: #c8d4e2;
  font-size: 0.8438rem;
}
.ribbon .wrap {
  max-width: var(--maxw); margin: 0 auto; padding: 7px 24px;
  display: flex; gap: 18px; justify-content: space-between; flex-wrap: wrap;
}
.ribbon strong { color: #fff; }
.ribbon a { color: var(--brand-bright); text-decoration: none; font-weight: 600; }
.ribbon a:hover { text-decoration: underline; color: var(--brand-bright); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy-900);
  border-bottom: 1px solid var(--navy-line);
}
.nav .wrap {
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 28px; min-height: 74px;
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; margin-right: auto; }
.brand img { width: 46px; height: auto; }
.brand .t {
  font-family: var(--display); text-transform: uppercase; line-height: 1;
  color: #fff; font-weight: 700; font-size: 1.3125rem; letter-spacing: 0.04em;
}
.brand .t small { display: block; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.04em; color: #9fb2c6; margin-top: 4px; }
.nav-links { display: flex; gap: 4px; align-items: center; }
.nav-links a {
  color: #d7dfe9; text-decoration: none; font-weight: 600; font-size: 0.9688rem;
  padding: 9px 14px; border-radius: var(--radius-ctl);
}
.nav-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nav-links a[aria-current="page"] { color: var(--brand-bright); }
.nav-links a.cta {
  background: var(--brand); color: #fff; margin-left: 8px;
}
.nav-links a.cta:hover { background: #d8352a; color: #fff; }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--navy-line); border-radius: var(--radius-ctl);
  color: #fff; padding: 8px 12px; font-size: 1.25rem; line-height: 1; cursor: pointer;
}

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; padding: 10px 16px 18px;
    background: rgba(6, 13, 26, 0.97); border-bottom: 1px solid var(--navy-line);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 14px; font-size: 1.0625rem; }
  .nav-links a.cta { margin-left: 0; text-align: center; margin-top: 6px; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; color: #fff; overflow: hidden; background: var(--navy-900);
  display: grid; align-items: end;
  min-height: min(78vh, 760px);
}
.hero.short { min-height: min(56vh, 520px); }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
/* one flat overlay, light enough to keep the photograph */
.hero-bg::after { content: ""; position: absolute; inset: 0; background: rgba(18, 38, 54, 0.55); }
.hero .wrap {
  position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto;
  padding: 96px 24px 72px; width: 100%;
}
.hero h1, .hero h2 { color: #fff; }
.hero .lede { color: #e3e9f0; }
/* quiet wayfinding label: no dash glyph, no tracking, sentence case as written */
.eyebrow { font-family: var(--body); font-size: 0.9375rem; font-weight: 600; color: var(--muted); margin: 0 0 10px; }
.hero .eyebrow, .section-dark .eyebrow, .band .eyebrow, .cta-band .eyebrow { color: #d7e0ec; }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  font-family: var(--body); font-size: 1rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none;
  border-radius: var(--radius-ctl); border: 1px solid transparent;
  cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* primary */
.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
/* secondary (outlined); inverts on photo and navy surfaces */
.btn-ghost, .btn-navy { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover, .btn-navy:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.hero .btn-ghost, .band .btn-ghost, .cta-band .btn-ghost, .section-dark .btn-ghost, .div-panel .btn-ghost { border-color: rgba(255, 255, 255, 0.8); color: #fff; }
.hero .btn-ghost:hover, .band .btn-ghost:hover, .cta-band .btn-ghost:hover, .section-dark .btn-ghost:hover, .div-panel .btn-ghost:hover { background: #fff; border-color: #fff; color: var(--ink); }

/* ---------- sections ---------- */
.section { padding: clamp(56px, 7vw, 96px) 24px; }
.section .wrap { max-width: var(--maxw); margin: 0 auto; }
.section.tight { padding-top: clamp(40px, 5vw, 64px); }
.section-dark { background: var(--navy-900); color: #c9d5e3; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark .lede { color: #b3c0d0; }
.section-head { max-width: 760px; margin-bottom: clamp(24px, 3.5vw, 40px); }
.section-head h2 { margin-bottom: 0.35em; }

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
a.card { text-decoration: none; color: inherit; transition: border-color 0.15s ease; }
a.card:hover { border-color: var(--ink); }
.card h3 { margin-top: 0; }
.card p { color: var(--muted); font-size: 0.9688rem; margin-bottom: 0; }
.card .go { color: var(--brand); font-weight: 600; font-size: 0.9688rem; margin-top: 12px; display: inline-block; text-decoration: underline; text-underline-offset: 3px; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip {
  font-size: 0.875rem; font-weight: 600;
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--radius-ctl); padding: 4px 10px;
}
.section-dark .chip { background: rgba(255, 255, 255, 0.06); border-color: var(--navy-line); color: #c9d5e3; }

/* stats */
.stat { text-align: left; }
.stat .n {
  font-family: var(--display); font-weight: 700; font-size: clamp(2.5rem, 4vw, 3.5rem);
  color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums;
}
.section-dark .stat .n { color: #fff; }
.stat .n em { font-style: normal; color: inherit; }
.stat .l { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
.section-dark .stat .l { color: #8fa2b8; }
.stat .s { font-size: 0.875rem; color: var(--muted); margin-top: 6px; }
.section-dark .stat .s { color: #7e91a8; }

/* leadership */
.leader { overflow: hidden; padding: 0; }
.leader img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: top; }
.leader .pad { padding: 14px 18px 18px; }
.leader .rank { font-size: 0.875rem; color: var(--muted); font-weight: 500; }
.leader h3 { margin: 2px 0 0; }

/* split feature */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split .photo { border-radius: var(--radius); overflow: hidden; }
.split .photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- footer ---------- */
.footer { background: var(--navy-950); color: #9fb0c4; font-size: 0.9375rem; }
.footer .top {
  max-width: var(--maxw); margin: 0 auto; padding: 64px 24px 48px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px;
}
@media (max-width: 900px) { .footer .top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer .top { grid-template-columns: 1fr; } }
.footer h4 {
  color: #fff; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  font-family: var(--body); font-weight: 700; margin-bottom: 14px;
}
.footer .ft-em { color: #fff; font-weight: 700; }
.footer a { color: #c9d5e3; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer .brandline { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.footer .brandline img { width: 58px; }
.footer .brandline .t { font-family: var(--display); text-transform: uppercase; color: #fff; font-weight: 700; font-size: 1.375rem; line-height: 1.05; }
.footer .legal {
  border-top: 1px solid var(--navy-line);
  padding: 22px 24px; text-align: center; font-size: 0.8438rem; color: #8fa2b8;
}
.footer .legal a { color: #b8c5d4; }
.social { display: flex; gap: 10px; margin-top: 18px; }
.social a {
  width: 44px; height: 44px; border: 1px solid var(--navy-line); border-radius: var(--radius-ctl);
  display: grid; place-items: center; color: #c9d5e3;
}
.social a:hover { border-color: #fff; color: #fff; }
.social svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- accordion (FAQ) ---------- */
.acc { border-bottom: 1px solid var(--line); }
.acc summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 18px;
  min-height: 44px; padding: 16px 2px; font-weight: 600; font-size: 1.0625rem; line-height: 1.4; color: var(--ink); align-items: center;
}
.acc summary:hover { color: var(--brand); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: "+"; font-family: var(--body); font-weight: 400; font-size: 1.5rem; color: var(--ink);
  line-height: 1; flex: none; transition: transform 0.15s ease;
}
.acc[open] summary::after { transform: rotate(45deg); }
.acc .body { padding: 0 2px 20px; color: var(--ink); max-width: 70ch; }
.acc .body p:last-child { margin-bottom: 0; }
.faq-group { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem); margin: 52px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--ink); scroll-margin-top: calc(var(--nav-h) + 16px); }

/* ---------- forms ---------- */
.form-grid { display: grid; gap: 16px; }
label.f { display: grid; gap: 6px; font-weight: 600; font-size: 0.9375rem; color: var(--ink); }
label.f span em { color: var(--red); font-style: normal; }
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], select, textarea {
  font: inherit; min-height: 44px; padding: 10px 12px; border: 1px solid #6b7785; border-radius: var(--radius-ctl);
  background: #fff; color: var(--ink); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--ink); }
.hint { font-size: 0.875rem; color: var(--muted); font-weight: 400; }

/* ---------- crime data ---------- */
.databar {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  font-size: 0.875rem; color: var(--muted); margin-top: 14px;
}

.controls { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 18px; }
.controls input[type="search"] { flex: 1 1 260px; }
.controls select { flex: 0 1 260px; width: auto; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table.log { border-collapse: collapse; width: 100%; font-size: 0.9375rem; min-width: 640px; }
table.log th {
  text-align: left; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; padding: 14px 18px; border-bottom: 2px solid var(--line);
  background: #fbf9f3; position: sticky; top: 0;
}
table.log td { padding: 12px 18px; border-bottom: 1px solid #ede6d6; vertical-align: top; }
table.log tr:last-child td { border-bottom: none; }
table.log td.when { white-space: nowrap; color: var(--muted); font-size: 0.875rem; }
table.log td.num { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }
.typechip {
  display: inline-block; font-size: 0.8438rem; font-weight: 600; padding: 3px 11px;
  border-radius: var(--radius-ctl); background: #f3f4f1; color: var(--ink); border: 1px solid var(--line);
}
.load-more { margin: 22px auto 0; display: block; }

/* charts */
.chart-card { padding: 26px 28px 20px; }
.chart-card h3 { margin-bottom: 4px; }
.chart-card .sub { color: var(--muted); font-size: 0.875rem; margin-bottom: 18px; }
.barlist { display: grid; gap: 11px; }
.barlist .row { display: grid; grid-template-columns: 180px 1fr 52px; gap: 12px; align-items: center; font-size: 0.9062rem; }
.barlist .row .name { font-weight: 600; color: var(--navy-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barlist .row .track { background: #e6e8e4; border-radius: 0; height: 10px; overflow: hidden; }
.barlist .row .fill { display: block; height: 100%; border-radius: 0; background: var(--navy-700); }
.barlist .row .val { text-align: right; font-weight: 700; color: var(--navy-800); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .barlist .row { grid-template-columns: 110px 1fr 44px; font-size: 0.8438rem; } }

.skeleton { position: relative; overflow: hidden; background: #e6e8e4; border-radius: var(--radius); min-height: 18px; }

/* notice: flat box, 1px rule, one 4px left bar for meaning (navy = info, red = warning) */
.notice {
  border: 1px solid var(--line); border-left: 4px solid var(--ink); background: #fff; border-radius: 0;
  padding: 14px 18px; font-size: 0.9375rem; line-height: 1.55; color: var(--ink); margin-top: 24px; max-width: 80ch;
}
.notice.error { border-left-color: var(--red); }


/* ============================================================
   PHOTO BANDS + HOMEPAGE BANDS (Oct 2026 polish: static, flat overlays)
   ============================================================ */

.hero { min-height: min(74vh, 660px); }
.hero.short { min-height: min(56vh, 480px); }
.hero .wrap { padding: 120px 24px 64px; }
.hero h1 { max-width: 18ch; }
.hero .lede { max-width: 56ch; }

/* key figures: a flat ruled row under the hero */
.statbar { background: #fff; border-bottom: 1px solid var(--line); }
.statbar .inner { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.statbar .cell { padding: 22px 24px 20px; border-left: 1px solid var(--line); }
.statbar .cell:first-child { border-left: 0; padding-left: 0; }
.statbar .cell .n { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.statbar .cell .n em { font-style: normal; color: inherit; }
.statbar .cell .l { font-size: 0.9375rem; color: var(--muted); margin-top: 8px; line-height: 1.35; }
@media (max-width: 640px) {
  .statbar .inner { padding: 0 16px; }
  .statbar .cell { padding: 16px 10px 14px 12px; }
  .statbar .cell .l { font-size: 0.8125rem; }
}

/* full-bleed photo band */
.band { position: relative; color: #fff; overflow: hidden; background: var(--navy-900); isolation: isolate; }
.band .bg { position: absolute; inset: 0; z-index: -1; }
.band .bg img { width: 100%; height: 100%; object-fit: cover; }
.band .bg::after { content: ""; position: absolute; inset: 0; background: rgba(18, 38, 54, 0.55); }
.band .wrap { max-width: var(--maxw); margin: 0 auto; padding: clamp(72px, 10vw, 128px) 24px; position: relative; }
.band .quote { font-family: var(--body); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); line-height: 1.3; max-width: 30ch; color: #fff; margin: 0; text-wrap: balance; }
.band .quote .accent { color: inherit; }
.band .cite { margin: 16px 0 0; font-size: 1rem; color: #e3e9f0; }
.band.fixed .bg { background-size: cover; background-position: center 35%; }

/* 2025 figures: ruled ledger on pale gray */
.bignums { background: var(--paper-2); color: var(--ink); }
.bignums .grid { column-gap: clamp(24px, 3.5vw, 48px); row-gap: 28px; }
.bignum { border-top: 2px solid var(--ink); padding-top: 14px; }
.bignum .n { font-family: var(--display); font-weight: 700; line-height: 1; font-size: clamp(2.75rem, 1.8rem + 2.6vw, 4rem); color: var(--ink); font-variant-numeric: tabular-nums; }
.bignum .n em { font-style: normal; color: inherit; }
.bignum .l { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); margin-top: 12px; }
.bignum .s { font-size: 0.9375rem; color: var(--muted); margin-top: 4px; }

.value { display: flex; gap: 18px; align-items: flex-start; }
.value h3 { font-size: 1.3125rem; margin-bottom: 4px; }
.value p { color: var(--muted); font-size: 0.9375rem; margin: 0; }

/* closing photo band */
.cta-band { position: relative; color: #fff; overflow: hidden; text-align: center; isolation: isolate; background: var(--navy-900); }
.cta-band .bg { position: absolute; inset: 0; z-index: -1; }
.cta-band .bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.cta-band .bg::after { content: ""; position: absolute; inset: 0; background: rgba(18, 38, 54, 0.62); }
.cta-band .wrap { max-width: 760px; margin: 0 auto; padding: clamp(72px, 10vw, 120px) 24px; position: relative; }
.cta-band h2 { color: #fff; }
.cta-band .lede { color: #e3e9f0; }
.cta-band .btn-row { justify-content: center; }

.count { font-variant-numeric: tabular-nums; }

/* ============================================================
   2026 ELEVATION LAYER — map, alerts, search, news, careers, report
   ============================================================ */

/* WCAG 2.2 — visible focus + min target size on interactive chrome */
a, button, input, select, textarea, summary, [tabindex] { }
/* one focus ring everywhere: 2px #2c82b0, offset 2px */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nav-links a, .btn, .icon-btn { min-height: 44px; }

/* ---- emergency alert banner (site-wide) ---- */
.alertbar { background: var(--red); color: #fff; font-size: 0.9375rem; display: none; }
.alertbar.on { display: block; }
.alertbar .wrap { max-width: var(--maxw); margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 14px; }
.alertbar .tag { font-family: var(--body); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; font-size: 0.75rem; background: rgba(255,255,255,0.16); padding: 3px 8px; border-radius: var(--radius-ctl); flex: none; }
.alertbar a { color: #fff; text-decoration: underline; font-weight: 600; }
.alertbar .x { margin-left: auto; background: none; border: 0; color: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer; min-width: 44px; min-height: 44px; flex: none; opacity: 0.9; }
.alertbar .x:hover { opacity: 1; }

/* ---- nav utility buttons (search, language) ---- */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: none;
  border: 1px solid var(--navy-line); border-radius: var(--radius-ctl); color: #d7dfe9; cursor: pointer; padding: 8px 12px;
  font: inherit; font-size: 0.875rem; font-weight: 600; }
.icon-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }
.icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.icon-btn kbd { font-family: var(--body); font-size: 0.6875rem; background: rgba(255,255,255,0.12); border-radius: 4px; padding: 1px 5px; color: #aebccd; }
@media (max-width: 880px) { .icon-btn kbd { display: none; } .nav-util { display: flex; gap: 8px; } }

/* ---- search / command palette ---- */
.searchwrap { position: fixed; inset: 0; z-index: 300; display: none; align-items: flex-start; justify-content: center;
  background: rgba(6,13,26,0.6); padding: 12vh 20px 20px; }
.searchwrap.on { display: flex; }
.searchbox { width: 100%; max-width: 620px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden; }
.searchbox input { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 1.125rem; padding: 20px 22px; }
.searchbox input:focus { outline: none; }
.searchresults { max-height: 52vh; overflow-y: auto; }
.searchresults a { display: block; padding: 13px 22px; text-decoration: none; color: var(--ink); border-bottom: 1px solid #f0f3f7; }
.searchresults a:hover, .searchresults a.sel { background: #eef0ec; }
.searchresults .t { font-weight: 700; font-size: 0.9688rem; color: var(--navy-900); }
.searchresults .d { font-size: 0.8438rem; color: var(--muted); margin-top: 2px; }
.searchresults .none { padding: 22px; color: var(--muted); text-align: center; }
.searchhint { padding: 10px 22px; font-size: 0.8125rem; color: var(--muted); background: var(--paper); display: flex; gap: 16px; flex-wrap: wrap; }
.searchhint kbd { background: #e6e8e4; border-radius: var(--radius-ctl); padding: 1px 6px; }

/* ---- crime map ---- */
.map-shell { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
#crimemap { height: 520px; width: 100%; background: #16243a; z-index: 1; }
.map-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.map-toolbar .seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-ctl); overflow: hidden; }
.map-toolbar .seg button { background: #fff; border: 0; padding: 8px 14px; font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.map-toolbar .seg button + button { border-left: 1px solid var(--line); }
.map-toolbar .seg button.on { background: var(--navy-800); color: #fff; }
.map-toolbar select { flex: 0 1 240px; width: auto; }
/* mobile-only disclosure chips; on desktop the wrappers dissolve into the flex row */
.map-disc { display: none; }
.map-watch, .map-adv { display: contents; }
.map-prompt { display: none; }
.map-legend[hidden] { display: none !important; }
.log-search { position: relative; }
.log-search .sug { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-md); }
.log-search .sug button { display: block; width: 100%; text-align: left; background: none; border: 0;
  color: var(--navy-800); font: 500 0.875rem 'Barlow', sans-serif; padding: 11px 14px; cursor: pointer; min-height: 44px; }
.log-search .sug button:hover, .log-search .sug button:focus-visible { background: #eef0ec; }
@media print {
  header.nav, .ribbon, .hero, #map, footer, .load-more, .frange, .log-tools, .fcats, .factive, .langtog { display: none !important; }
  body, .section-dark { background: #fff !important; color: #111 !important; }
  .card, .dtile, .dpanel, .feed-panel { background: #fff !important; color: #111 !important; box-shadow: none !important; border-color: #ccc !important; }
  .feed-panel { max-height: none !important; overflow: visible !important; }
}
.pin-tray { position: absolute; top: 12px; left: 12px; z-index: 3; display: flex; gap: 8px; flex-wrap: wrap; max-width: 70%; }
.pin-tray[hidden] { display: none; }
.pin-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(10,22,38,.92); border: 1px solid var(--navy-line); border-radius: var(--radius-ctl); color: #e7edf5; padding: 7px 10px; font: 500 0.75rem 'Barlow', sans-serif; cursor: pointer; }
.pin-chip b { font-family: 'Barlow Condensed', sans-serif; font-size: 0.8125rem; letter-spacing: .03em; }
.pin-chip span { color: #9fb0c4; }
.pin-chip i { font-style: normal; color: #9fb0c4; padding: 0 2px; font-size: 0.9375rem; }
@media (max-width: 768px) {
  #trend { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #trend svg { min-width: 560px; }
}
.heat-bar { flex: 1 1 120px; height: 10px; border-radius: 5px; max-width: 240px;
  background: linear-gradient(90deg, #2b4a72, #3a6ea5, #b98d3e, #d8352a, #f07168); }
.map-rhythm-wrap .rbars { cursor: pointer; }
.rbands { display: flex; font: 600 0.6875rem 'Barlow', sans-serif; letter-spacing: .05em;
  color: #8fa2b8; margin-top: 4px; }
.rbands span:nth-child(1) { width: 25%; } .rbands span:nth-child(2) { width: 50%; }
.rbands span:nth-child(3) { width: 25%; text-align: right; }
.map-legend { display: flex; flex-wrap: wrap; gap: 12px 18px; padding: 14px 18px; border-top: 1px solid var(--line); font-size: 0.8438rem; color: var(--muted); }
.map-legend .lg { display: inline-flex; align-items: center; gap: 7px; }
.map-legend .sw { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); }
.leaflet-popup-content { font-family: var(--body); font-size: 0.875rem; margin: 12px 14px; }
.leaflet-popup-content .pt { font-weight: 700; color: var(--navy-900); font-size: 0.9375rem; }
.leaflet-popup-content .pm { color: var(--muted); font-size: 0.8125rem; margin-top: 3px; }
.mapnote { font-size: 0.8438rem; color: var(--muted); padding: 12px 18px 0; }

/* ---- category color chips (shared map + charts) ---- */
.cat-violent { background: #c0392b; }
.cat-property { background: #d98324; }
.cat-traffic { background: #2b6cb0; }
.cat-disorder { background: #7c5cbf; }
.cat-service { background: #2f9e6a; }
.cat-other { background: #6b7d90; }

/* ---- news & alerts ---- */
/* filter tags (the one place a toggle group reads as tags) */
.filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filterbar button { min-height: 44px; background: #fff; border: 1px solid #b9bfc0; border-radius: var(--radius-ctl); padding: 0 14px; font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.filterbar button:hover { border-color: var(--ink); }
.filterbar button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
/* news: a dated list on 1px rules */
.newslist { border-top: 1px solid var(--ink); }
.newsitem { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 24px; padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.newsitem .meta { font-size: 0.9375rem; color: var(--ink); font-variant-numeric: tabular-nums; padding-top: 2px; }
.newsitem .cat { display: block; font-size: 0.8125rem; color: var(--muted); margin-top: 2px; }
.newsitem h3 { margin: 0 0 6px; font-size: 1.1875rem; line-height: 1.35; }
.newsitem h3 a { color: var(--ink); text-decoration: underline; text-decoration-color: #9aa3ab; text-underline-offset: 3px; }
.newsitem h3 a:hover { color: var(--brand); text-decoration-color: currentColor; }
.newsitem p { color: var(--muted); margin: 0; max-width: 72ch; }
@media (max-width: 640px) { .newsitem { grid-template-columns: 1fr; gap: 4px; } .newsitem .meta { display: flex; gap: 10px; flex-wrap: wrap; } .newsitem .cat { margin: 0; } }

/* ---- careers ---- */
.bene { display: grid; gap: 20px; }
.bene .b { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.bene .b .n { font-family: var(--display); font-weight: 700; font-size: clamp(26px,3vw,34px); color: var(--navy-900); line-height: 1; }
.bene .b .n em { font-style: normal; color: var(--brand); }
.bene .b h3 { font-size: 1.125rem; margin: 12px 0 4px; }
.bene .b p { font-size: 0.9062rem; color: var(--muted); margin: 0; }
.timeline { display: grid; gap: 0; margin-top: 8px; }
.step { display: grid; grid-template-columns: 54px 1fr; gap: 20px; padding-bottom: 30px; position: relative; }
.step:not(:last-child)::before { content: ""; position: absolute; left: 26px; top: 44px; bottom: 0; width: 2px; background: var(--line); }
.step .num { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-family: var(--display); font-weight: 700; font-size: 1.375rem; flex: none; z-index: 1; }
.step h3 { margin: 10px 0 4px; }
.step p { color: var(--muted); margin: 0; font-size: 0.9375rem; }

.section-dark .step:not(:last-child)::before { background: var(--navy-line); }
.section-dark .step p { color: #9fb0c4; }
.reqlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.reqlist li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9688rem; }
.reqlist li::before { content: "✓"; color: var(--brand); font-weight: 800; flex: none; }
.section-dark .reqlist li { color: #c9d5e3; }

/* ---- report page ---- */
.calltable { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .calltable { grid-template-columns: 1fr; } }
.calltable .cell { border-radius: var(--radius); padding: 24px; border: 1px solid var(--line); }
.calltable .cell.emerg { background: #fdf1ef; border-color: #f2c9c2; }
.calltable .cell.online { background: #eef7f1; border-color: #cbe6d6; }
.calltable .cell h3 { display: flex; align-items: center; gap: 10px; }
.calltable .cell ul { margin: 12px 0 0; padding-left: 20px; color: var(--muted); font-size: 0.9375rem; }
.calltable .cell.emerg .dot2 { color: var(--red); }
.calltable .cell.online .dot2 { color: #2f9e6a; }

/* ---- nav: utilities (search + language) + wider collapse breakpoint ---- */
.nav .wrap { gap: 16px; }
.nav-links { margin-left: auto; }
.nav-links a { font-size: 0.9062rem; padding: 9px 9px; white-space: nowrap; }
.nav-util { display: flex; align-items: center; gap: 10px; }
.nav-search .lbl { display: none; }
.langtog { display: inline-flex; border: 1px solid var(--navy-line); border-radius: var(--radius-ctl); overflow: hidden; }
.langtog button { background: none; border: 0; color: #c8d4e2; font: inherit; font-size: 0.8125rem; font-weight: 700; min-height: 44px; padding: 0 11px; cursor: pointer; }
.langtog button + button { border-left: 1px solid var(--navy-line); }
.langtog button[aria-pressed="true"] { background: var(--brand); color: #fff; }
@media (min-width: 1400px) { .nav-search .lbl { display: inline; } }
@media (max-width: 1330px) {
  .brand .t small { display: none; }
}
@media (max-width: 1240px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0; margin-left: 0;
    flex-direction: column; align-items: stretch; padding: 10px 16px 18px;
    background: rgba(6, 13, 26, 0.98); border-bottom: 1px solid var(--navy-line);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 14px; font-size: 1.0625rem; }
  .nav-links a.cta { margin-left: 0; text-align: center; margin-top: 6px; }
  .nav-util { margin-left: auto; }
}
@media (max-width: 480px) { .nav-search kbd { display: none; } .brand .t small { display: none; } }

/* ---- 3D MapLibre crime map ---- */
.map-shell { background: var(--navy-950); border-color: var(--navy-line); }
.map-toolbar { background: var(--navy-900); border-bottom-color: var(--navy-line); }
.map-toolbar .seg { border-color: var(--navy-line); }
.map-toolbar .seg button { background: var(--navy-800); color: #9fb0c4; border-color: var(--navy-line); }
.map-toolbar .seg button + button { border-left-color: var(--navy-line); }
.map-toolbar .seg button.on { background: var(--brand); color: #fff; }
.map-toolbar select { background: var(--navy-800); color: #f1ebdd; border-color: var(--navy-line); }
.map-toolbar .icon-btn { color: #cdd8e5; }
.map-toolbar .hint { color: #8fa2b8; }
.mapplay { display: inline-flex; align-items: center; gap: 8px; background: var(--brand); color: #fff;
  border: 0; border-radius: var(--radius-ctl); font: inherit; font-weight: 700; font-size: 0.875rem; padding: 9px 15px; cursor: pointer; }
.mapplay:hover { background: var(--brand-dark); }
.mapplay.playing { background: var(--navy-700); color: #fff; }
.mapbox-wrap { position: relative; }
#crimemap { height: 600px; width: 100%; background: #0b1a2b; }
@media (max-width: 640px) { #crimemap { height: 460px; } }
.map-daytag { position: absolute; top: 16px; left: 16px; z-index: 2; background: rgba(6,13,26,0.82);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; border: 1px solid var(--navy-line);
  border-radius: var(--radius); padding: 10px 16px; font-family: var(--display); font-weight: 700; font-size: 1.375rem; }
.map-daytag em { font-style: normal; color: var(--brand-bright); display: block; font-family: var(--body); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
.map-hint { position: absolute; bottom: 12px; left: 16px; z-index: 2; background: rgba(6,13,26,0.7);
  color: #cdd8e5; font-size: 0.75rem; padding: 6px 11px; border-radius: var(--radius-ctl); pointer-events: none; }
.map-legend { background: var(--navy-900); border-top-color: var(--navy-line); color: #9fb0c4; }
.maplibregl-popup-content { font-family: var(--body); border-radius: var(--radius); padding: 12px 15px; box-shadow: var(--shadow-md); }
.maplibregl-popup-content .pt { font-weight: 700; color: var(--navy-900); font-size: 0.9375rem; display: block; }
.maplibregl-popup-content .pm { color: var(--muted); font-size: 0.8125rem; margin-top: 3px; display: block; }
.maplibregl-ctrl-group { border-radius: var(--radius-ctl) !important; overflow: hidden; }

/* a11y fixes: visible focus for search input; keep others from review */
.searchbox input:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* ---- map v2: orbit, HUD, rhythm bar, vignette ---- */
.maporbit { background: var(--navy-800); color: #cdd8e5; }
.maporbit:hover { background: var(--navy-700); color: #fff; }
.maporbit.playing { background: var(--brand); color: #fff; }
.map-hud { position: absolute; top: 16px; right: 56px; z-index: 2; background: rgba(6,13,26,0.82);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; border: 1px solid var(--navy-line);
  border-radius: var(--radius); padding: 10px 16px; max-width: 260px; font-size: 0.9375rem; font-weight: 700; line-height: 1.3; }
.map-hud em { font-style: normal; color: var(--brand-bright); display: block; font-family: var(--body); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; }
.map-hud span { display: block; font-weight: 500; font-size: 0.7812rem; color: #9fb0c4; margin-top: 2px; }
.map-daytag .tc { color: #9fb0c4; font-size: 0.875rem; font-weight: 500; margin-left: 8px; }
.map-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 45%, rgba(6,13,26,0) 55%, rgba(6,13,26,0.42) 100%),
              linear-gradient(180deg, rgba(6,13,26,0.35), rgba(6,13,26,0) 14%); }
.map-rhythm-wrap { display: flex; align-items: center; gap: 14px; padding: 12px 18px 4px; background: var(--navy-900); }
.map-rhythm-wrap .rt { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: #8fa2b8; flex: none; }
.map-rhythm { display: flex; flex-direction: column; align-items: stretch; gap: 4px; flex: 1; min-width: 0; }
.map-rhythm .rl { font-size: 0.6562rem; color: #8a9cb2; flex: none; }
.map-rhythm .raxis { display: flex; justify-content: space-between; font-size: 0.6562rem; font-weight: 600; color: #7d90a8; letter-spacing: 0.02em; }
.map-rhythm .rbars { display: flex; align-items: flex-end; gap: 2px; height: 38px; flex: 1; min-width: 0; }
.map-rhythm .rb { flex: 1; min-width: 3px; background: #2b4066; border-radius: 2px 2px 0 0; }
.map-rhythm .rb.on { background: var(--brand-bright); }
@media (max-width: 720px) { .map-hud { display: none; } }
@media (max-width: 720px) { .map-rhythm-wrap { flex-wrap: wrap; } .map-rhythm-wrap .rt { font-size: 0.6562rem; } .map-rhythm-wrap .map-rhythm { flex: 1 1 100%; } }

/* ---- homepage community mosaic ---- */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 14px; }
.mosaic a { position: relative; border-radius: var(--radius); overflow: hidden; display: block; background: var(--ink); }
.mosaic a img { width: 100%; height: 100%; object-fit: cover; }
.mosaic a .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; color: #fff; background: rgba(18, 38, 54, 0.86);
  padding: 9px 14px 10px; font-family: var(--body); font-weight: 600; font-size: 1rem; line-height: 1.3; }
.mosaic a .cap small { display: block; font-weight: 400; font-size: 0.8125rem; color: #d7e0ec; margin-top: 1px; }
.mosaic a:hover .cap, .mosaic a:focus-visible .cap { text-decoration: underline; text-underline-offset: 3px; }
.mosaic .big { grid-column: span 2; grid-row: span 2; }
@media (max-width: 900px) { .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; } }
@media (max-width: 540px) { .mosaic { grid-template-columns: 1fr; grid-auto-rows: 220px; } .mosaic .big { grid-column: span 1; grid-row: span 1; } }


/* ---- map level 2: tour card, street search, ticker, trends ---- */
.tour-card { position: absolute; z-index: 3; left: 50%; bottom: 44px; transform: translateX(-50%);
  min-width: 280px; max-width: 84%; text-align: center; background: rgba(6,13,26,0.88);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius); padding: 14px 22px; color: #fff; font-family: var(--display); font-weight: 700; font-size: 1.3125rem; }
.tour-card em { font-style: normal; display: block; color: var(--brand-bright); font-family: var(--body); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 3px; }
.tour-card span { display: block; font-family: var(--body); font-weight: 500; font-size: 0.8125rem; color: #9fb0c4; margin-top: 3px; }
.tr.up { color: #f28b7d; } .tr.dn { color: #57c28b; } .tr { color: #8fa2b8; }
.leaflet-popup-content .tr, .maplibregl-popup-content .tr { font-weight: 700; }

.map-search { position: relative; flex: 1 1 200px; max-width: 260px; }
.map-search input { width: 100%; background: var(--navy-800); color: #f1ebdd; border: 1px solid var(--navy-line); border-radius: var(--radius-ctl); padding: 9px 13px; font-size: 0.875rem; }
.map-search input::placeholder { color: #7e91a8; }
.map-search .sug { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: var(--navy-900); border: 1px solid var(--navy-line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
.map-search .sug button { display: block; width: 100%; text-align: left; background: none; border: 0; color: #d7dfe9;
  font: inherit; font-size: 0.8438rem; padding: 10px 14px; cursor: pointer; }
.map-search .sug button:hover, .map-search .sug button:focus-visible { background: var(--navy-700); color: #fff; }

.map-ticker-wrap { display: flex; align-items: center; gap: 0; border-bottom: 1px solid var(--navy-line); background: var(--navy-950); overflow: hidden; }
.tklbl { flex: none; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--brand-bright);
  padding: 10px 16px; border-right: 1px solid var(--navy-line); background: var(--navy-900); position: relative; z-index: 2; }
.map-ticker { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.tk-track { display: inline-flex; gap: 10px; padding: 7px 12px; width: max-content; }
button.tk { flex: none; display: inline-flex; align-items: center; gap: 7px; background: var(--navy-800); color: #c9d5e3;
  border: 1px solid var(--navy-line); border-radius: var(--radius-ctl); font: inherit; font-size: 0.8125rem; padding: 4px 12px; cursor: pointer; }
button.tk:hover { background: var(--navy-700); color: #fff; }
button.tk .tkt { color: #7fb0dd; font-weight: 700; } /* AA on navy-800 (was --sky 3.07:1) */
button.tk .tka { color: #8fa2b8; }
button.tk.nomap { opacity: 0.72; cursor: default; }

/* ---- map level 3: cinema mode, block report, popup report link ---- */
.pop-report { display: block; margin-top: 10px; background: var(--brand); color: #fff; border: 0; border-radius: var(--radius-ctl);
  font: inherit; font-size: 0.8125rem; font-weight: 700; min-height: 36px; padding: 7px 12px; cursor: pointer; width: 100%; }
.pop-report:hover { background: var(--brand-dark); }

.block-report { position: absolute; z-index: 4; top: 14px; left: 14px; bottom: 14px; width: min(360px, calc(100% - 28px));
  overflow-y: auto; background: rgba(6,13,26,0.95);
  border: 1px solid var(--navy-line); border-radius: var(--radius); padding: 22px 24px; color: #c9d5e3; font-size: 0.9375rem; }
.block-report em { font-style: normal; color: var(--brand-bright); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; }
.block-report h3 { color: #fff; margin: 6px 0 10px; font-size: 1.625rem; }
.block-report .br-big { font-family: var(--display); font-weight: 700; font-size: 1.3125rem; color: #fff; line-height: 1.25; }
.block-report p { margin: 0 0 10px; }
.block-report .br-fine { font-size: 0.75rem; color: #7e91a8; margin-top: 14px; }
.block-report .br-actions { display: flex; gap: 10px; margin-top: 16px; }
.block-report .br-actions .btn { font-size: 0.875rem; padding: 10px 16px; }
.block-report .br-x { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: #8fa2b8;
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 4px 8px; }
.block-report .br-x:hover { color: #fff; }

.cinema-brand { position: absolute; z-index: 3; right: 18px; bottom: 40px; display: none; align-items: center; gap: 12px;
  color: #fff; font-family: var(--display); font-weight: 700; font-size: 1.1875rem; line-height: 1.1;
  background: rgba(6,13,26,0.8);
  border: 1px solid var(--navy-line); border-radius: var(--radius); padding: 10px 16px; }
.cinema-brand span { display: block; font-family: var(--body); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.08em; color: #9fb0c4; text-transform: none; margin-top: 3px; }
body.cinema-on .cinema-brand { display: flex; }
body.cinema-on .map-hint, body.cinema-on .map-hud { display: none; }
.mapbox-wrap:fullscreen { background: #081120; }
.mapbox-wrap:fullscreen #crimemap { height: 100vh; }
.mapbox-wrap:fullscreen .map-daytag { top: 28px; left: 28px; font-size: 2.125rem; padding: 16px 24px; }
.mapbox-wrap:fullscreen .cinema-brand { right: 28px; bottom: 28px; }


/* ---- map band (dark theater) + tactical frame ---- */
.mapband .mapnote { color: #8fa2b8; }
.mapband .mapnote a { color: #5fc0ea; }
.mapband .map-shell { border-color: rgba(255,255,255,0.18); }
.mapbox-wrap::before, .mapbox-wrap::after,
.mapbox-wrap .map-corner-a, .mapbox-wrap .map-corner-b {
  content: ""; position: absolute; width: 26px; height: 26px; z-index: 3; pointer-events: none;
}
.mapbox-wrap::before { top: 10px; left: 10px; border-top: 2px solid var(--sky); border-left: 2px solid var(--sky); border-top-left-radius: 6px; }
.mapbox-wrap::after { bottom: 10px; right: 10px; border-bottom: 2px solid var(--brand-bright); border-right: 2px solid var(--brand-bright); border-bottom-right-radius: 6px; }
.mapbox-wrap .map-corner-a { top: 10px; right: 10px; border-top: 2px solid var(--brand-bright); border-right: 2px solid var(--brand-bright); border-top-right-radius: 6px; }
.mapbox-wrap .map-corner-b { bottom: 10px; left: 10px; border-bottom: 2px solid var(--sky); border-left: 2px solid var(--sky); border-bottom-left-radius: 6px; }
body.cinema-on .mapbox-wrap::before, body.cinema-on .mapbox-wrap::after,
body.cinema-on .map-corner-a, body.cinema-on .map-corner-b { display: none; }

table.log th { background: var(--paper); }

/* ---- interactive charts ---- */
.barlist .row { -webkit-appearance: none; appearance: none; background: none; border: 0; width: 100%; text-align: left; font: inherit; cursor: pointer;
  border-radius: var(--radius-ctl); padding: 4px 6px; margin: 0 -6px; transition: background 0.15s ease; }
.barlist .row:hover, .barlist .row:focus-visible { background: #eef0ec; outline: 2px solid var(--focus); outline-offset: -2px; }
.barlist .row:hover .name { color: var(--brand); }
.barlist .row .fill { background: #1d3a5c; }
.barlist .row:hover .fill { background: var(--brand); }
.section-dark .barlist .row:hover, .section-dark .barlist .row:focus-visible { background: rgba(255,255,255,0.06); }
.section-dark .barlist .row .name { color: #c9d5e3; }
.section-dark .barlist .row .val { color: #fff; }
#trend .tbar { cursor: default; }
#trend .tbar rect { transition: filter 0.15s ease; }
#trend .tbar:hover rect { filter: brightness(1.14); }
/* the trend/toptypes cards sit on white inside the dark map-adjacent flow; keep readable */
.chart-card { background: var(--card); }

/* ============================================================
   Mobile map declutter + light-section contrast pass
   ============================================================ */
@media (max-width: 768px) {
  /* the "drag to pan" hint collided with the map attribution — drop it on touch */
  .map-hint { display: none; }
  /* ticker: static swipeable chip row (the marquee is desktop-only) */
  .map-ticker .tk-track { animation: none; width: max-content; }
  .map-ticker { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .map-toolbar { padding: 12px 14px; row-gap: 10px; }
  /* the resident's job comes first: prompt + street search on top, full width */
  .map-toolbar .map-search { flex: 1 1 100%; max-width: none; order: -3; }
  .map-prompt { display: block; font: 600 0.9375rem var(--body); color: #e8edf3; margin-bottom: 6px; }
  .map-search input { font-size: 1rem; } /* <16px focus auto-zooms iOS Safari */
  /* the control wall collapses behind two chips so the map fits the first screen */
  .map-disc { display: inline-flex; align-items: center; min-height: 44px;
    background: var(--navy-800); border: 1px solid var(--navy-line); color: #cdd8e5;
    border-radius: var(--radius-ctl); padding: 8px 18px; font-weight: 600; }
  .map-toolbar .map-watch, .map-toolbar .map-adv { display: none; }
  .map-toolbar.watch-open .map-watch { display: contents; }
  .map-toolbar.adv-open .map-adv { display: contents; }
  #map-cinema { display: none; } /* fullscreen is unreliable on phones */
  .map-toolbar #map-count { order: 4; flex-basis: 100%; margin: 0; }
  #crimemap { height: 440px; }
  /* legend moves ABOVE the map so the colors are explained before you meet them */
  .map-shell { display: flex; flex-direction: column; }
  .map-shell .map-toolbar { order: 1; }
  .map-shell .map-legend { order: 2; border-top: 0; padding: 10px 14px; font-size: 0.75rem; gap: 8px 12px; }
  .map-shell .mapbox-wrap { order: 3; }
  .map-shell .map-rhythm-wrap { order: 4; }
  .map-shell .map-ticker-wrap { order: 5; }
  .map-shell #map-a11y { order: 6; }
  /* busiest block: compact on-map strip, bottom-left (was display:none) */
  .map-hud:not([hidden]) { display: block; top: auto; right: auto; bottom: 12px; left: 12px;
    font-size: 0.75rem; padding: 8px 12px; max-width: 62%; }
  /* MapLibre zoom/compass + popup close at real touch sizes */
  .maplibregl-ctrl-group button { width: 44px; height: 44px; }
  .maplibregl-popup-close-button { width: 32px; height: 32px; font-size: 1.25rem; }
  /* keep the maplibre attribution compact + readable at the corner */
  .maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left { max-width: 62%; }
  .maplibregl-ctrl-attrib.maplibregl-compact { margin: 6px; }
}

/* MapLibre 4.x opens the compact attribution by default (and re-opens it on desktop
   resizes), leaving a wide credit bar sitting over the map. Force it to stay collapsed
   to just the ⓘ badge regardless of the -show class; hovering or focusing it still
   expands the full OSM/OpenMapTiles credit, so attribution stays one interaction away. */
#crimemap .maplibregl-ctrl-attrib.maplibregl-compact-show:not(:hover):not(:focus-within) {
  padding: 2px 24px 2px 0;
}
#crimemap .maplibregl-ctrl-attrib.maplibregl-compact-show:not(:hover):not(:focus-within) .maplibregl-ctrl-attrib-inner {
  display: none;
}






/* alternate band: white with hairlines (paper is the page) */
.tintband { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* ---------- Daily Incident Log — "dispatch feed" ---------- */
.log-controls { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 26px 0 14px; }
.log-search { position: relative; flex: 1 1 320px; display: flex; align-items: center; }
.log-search-ic { position: absolute; left: 15px; color: var(--muted); pointer-events: none; }
.log-search input[type="search"] { width: 100%; padding-left: 44px; }
.log-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.btn.btn-sm { padding: 0 14px; font-size: 0.9375rem; }
.log-tools .seg { display: inline-flex; border: 1px solid #b9bfc0; border-radius: var(--radius-ctl); overflow: hidden; background: #fff; }
.log-tools .seg button { background: none; border: 0; padding: 10px 16px; font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.log-tools .seg button + button { border-left: 1px solid #e0d8c6; }
.log-tools .seg button.on { background: var(--navy-800); color: #fff; }

.fcats { display: flex; gap: 9px; flex-wrap: wrap; margin: 2px 0 12px; }
.fcat { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #c4c9c7; color: var(--ink); padding: 8px 14px; border-radius: var(--radius-ctl); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s, color .15s; }
.fcat b { color: var(--muted); font-weight: 700; }
.fcat:hover { border-color: #bcac8f; }
.fcat.on { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.fcat.on b { color: #bcd0e6; }
.fcat-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.factive { margin: 0 0 14px; font-size: 0.875rem; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.factive[hidden] { display: none; }
.factive b { color: var(--navy-800); }
.fclear { border: 0; background: #e6e8e4; color: var(--ink); width: 28px; height: 28px; border-radius: var(--radius-ctl); font-size: 1rem; line-height: 1; cursor: pointer; }
.fclear:hover { background: #d9dcd9; }

.feed { list-style: none; margin: 0; padding: 0; }
.feed-group { display: block; }
.feed-calls { list-style: none; margin: 0; padding: 0; }
.feed-day { position: sticky; top: 6px; z-index: 4; margin: 20px 0 9px; pointer-events: none; }
.feed-group:first-child .feed-day { margin-top: 2px; }
.feed-day span { display: inline-block; background: var(--paper-2); color: var(--ink); font-size: 0.875rem; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-ctl); }

.call { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 8px; overflow: hidden; transition: border-color .15s; }
.call:hover { border-color: #b9bfc0; }
.call.open { border-color: var(--ink); }
.call-main { display: flex; align-items: stretch; width: 100%; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.call-rail { flex: 0 0 6px; align-self: stretch; }
.call-body { flex: 1 1 auto; padding: 14px 6px 14px 16px; min-width: 0; }
.call-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.call-type { font-weight: 700; color: var(--navy-900); font-size: 0.9688rem; line-height: 1.25; }
.call-time { color: var(--muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto; }
.call-loc { color: #5a5240; font-size: 0.9062rem; line-height: 1.4; }
.call-loc-na { font-style: italic; }
.call-chev { flex: 0 0 auto; align-self: center; width: 46px; position: relative; }
.call-chev::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-right: 2px solid #7d8790; border-bottom: 2px solid #7d8790; transform: translate(-60%, -60%) rotate(45deg); transition: transform .2s; }
.call.open .call-chev::after { transform: translate(-50%, -30%) rotate(-135deg); }

.call-detail { padding: 2px 18px 18px 22px; }
.cd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; padding: 14px 0 4px; border-top: 1px solid var(--line); }
.cd-wide { grid-column: 1 / -1; }
.cd-k { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin-bottom: 3px; }
.cd-v { font-size: 0.9062rem; color: var(--navy-900); }
.cd-cat { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.mono { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 0.8125rem; }
.cd-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.cd-note { font-size: 0.8438rem; color: var(--muted); margin: 14px 0 0; }

@media (max-width: 640px) {
  .log-controls { gap: 10px; }
  .log-tools { width: 100%; justify-content: space-between; }
  /* one swipeable row of category chips instead of a stacked cluster */
  .fcats { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; margin-right: -20px; padding-right: 20px; }
  .fcats::-webkit-scrollbar { display: none; }

  .cd-grid { grid-template-columns: 1fr; }
  .cd-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* ---------- incident dashboard v1 ---------- */
.dash-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 26px 0 18px; }
.dtile {
  background: var(--navy-900); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding: 18px 20px 16px;
  display: flex; flex-direction: column; /* sparklines pin to the bottom, one shared baseline */
}
.dtile .dt-n { font-family: var(--display); font-weight: 700; font-size: clamp(1.875rem, 3.4vw, 2.75rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.dtile .dt-n.dt-type { font-size: clamp(1.0625rem, 1.6vw, 1.375rem); line-height: 1.2; padding-top: 6px; color: #fff; }
.dtile .dt-l { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8fa2b8; margin-top: 9px; }
/* every tile carries the same-height sub-line as the week tile's YoY pill, so
   the four sparklines sit on one baseline across the row */
.dtile .dt-note { margin-top: 4px; min-height: 18px; font-size: 0.75rem; color: #8fa2b8; }

.dash { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.dash-main { min-width: 0; }

.feed-panel {
  max-height: 660px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px 14px; overscroll-behavior: contain;
}
.feed-panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.feed-panel .load-more { margin: 10px auto 4px; }
.feed-panel .feed-group:first-child .feed-day { margin-top: 0; }

.dash-side { display: grid; gap: 14px; position: sticky; top: calc(var(--nav-h) + 14px); }
.dpanel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 12px; }
.dpanel-t { font-family: var(--body); font-weight: 600; font-size: 1rem; color: var(--ink); margin: 0 0 10px; }
.dp-list { display: grid; gap: 4px; }
.dp-row { display: block; width: 100%; background: none; border: 0; padding: 6px 4px; font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-ctl); }
.dp-row:hover { background: #eef0ec; }
.dp-row[data-noop] { cursor: default; }
.dp-row[data-noop]:hover { background: none; }
.dp-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.dp-label { font-size: 0.8438rem; font-weight: 600; color: var(--navy-900); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-count { font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.dp-track { display: block; height: 6px; border-radius: 0; background: #e6e8e4; overflow: hidden; }
.dp-fill { display: block; height: 100%; border-radius: 0; }
.dp-empty { font-size: 0.8438rem; color: var(--muted); margin: 2px 4px 6px; }

@media (max-width: 980px) {
  .dash { grid-template-columns: 1fr; }
  .dash-side { position: static; grid-template-columns: 1fr; }
  .dash-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .feed-panel { max-height: clamp(340px, 58vh, 560px); }
}

/* touch devices: let a swipe past the panel edge continue scrolling the page
   (wheel/trackpad users on desktop keep the contained behavior) */
@media (pointer: coarse) {
  .feed-panel { overscroll-behavior: auto; }
}

/* ---------- dashboard v2: date range + tile sparklines ---------- */
.frange { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.frange [data-range] {
  background: #fff; border: 1px solid #c4c9c7; color: var(--ink);
  padding: 7px 13px; border-radius: var(--radius-ctl); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.frange [data-range]:hover { border-color: #bcac8f; }
.frange [data-range].on { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.frange-custom { display: inline-flex; align-items: center; gap: 6px; }
.frange-custom[hidden] { display: none; }
.frange-custom input[type="date"] {
  padding: 7px 10px; border: 1px solid #c4c9c7; border-radius: var(--radius-ctl);
  font: inherit; font-size: 0.8438rem; color: var(--navy-900); background: #fff; width: auto;
}
.frange-sep { color: var(--muted); }

.dtile .dt-sparkwrap { margin-top: auto; padding-top: 12px; min-height: 42px; }
.dt-spark { display: block; opacity: 0.92; }

@media (max-width: 640px) {
  .frange { gap: 6px; }
  .frange-custom { flex: 1 1 100%; }
  .frange-custom input[type="date"] { flex: 1 1 0; min-width: 0; }
}

/* ---------- 5-year neighborhood trends (/trends/) ---------- */
.tchart { display: block; }
.tc-axis { font-size: 0.75rem; fill: var(--muted); font-weight: 600; }
.tc-partial { fill: var(--brand); }
.tc-draw { stroke-dasharray: none; }

.citychart { padding: 18px 20px 10px; }
.citycats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.citycat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.citycat-top { display: flex; align-items: center; gap: 7px; font-size: 0.8438rem; font-weight: 600; color: var(--navy-900); margin-bottom: 6px; }
.citycat-n { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.8125rem; }
.tspark { display: block; }

.nb-dash { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; }
.nb-list { display: grid; gap: 8px; }
.nb-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); min-height: 44px; padding: 10px 14px; font: inherit; transition: border-color .15s; }
.nb-item:hover { border-color: #9aa3ab; }
.nb-item[aria-selected="true"] { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--brand); }
.nb-rank { flex: 0 0 auto; width: 24px; color: var(--muted); font-size: 0.875rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.nb-item[aria-selected="true"] .nb-rank { color: var(--brand); }
.nb-item-body { flex: 1 1 auto; min-width: 0; }
.nb-name { display: block; font-weight: 600; color: var(--ink); font-size: 0.9375rem; line-height: 1.25; }
.nb-sub { display: block; font-size: 0.7812rem; color: var(--muted); margin-top: 2px; }
.nb-item-spark { flex: 0 0 88px; }

.nb-detail { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.nb-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.nb-detail-head h3 { margin: 0; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem); }
.nb-detail-sub { margin: 4px 0 0; font-size: 0.875rem; color: var(--muted); }
.ttag { flex: 0 0 auto; font-size: 0.8125rem; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-ctl); white-space: nowrap; }
.ttag.up { color: #a5281f; background: #fbeceb; }
.ttag.dn { color: #1f6b45; background: #e8f5ee; }
.ttag.flat { color: var(--muted); background: #eef0ec; }
.nb-chart { margin: 8px 0 10px; }
.nb-detail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.nb-detail-cols h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 6px 0 10px; }
.tmix { display: grid; gap: 9px; }
.tmix-top { display: flex; align-items: center; gap: 7px; font-size: 0.8438rem; font-weight: 600; color: var(--navy-900); margin-bottom: 4px; }
.tmix-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.tmix-n { margin-left: auto; color: var(--muted); font-weight: 600; font-size: 0.7812rem; font-variant-numeric: tabular-nums; }
.tmix-track { display: block; height: 6px; border-radius: 0; background: #e6e8e4; overflow: hidden; }
.tmix-fill { display: block; height: 100%; border-radius: 0; }
.nb-blocks h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 6px 0 10px; }
.nb-blocks ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nb-blocks li { display: flex; justify-content: space-between; gap: 10px; font-size: 0.8438rem; color: var(--navy-900); }
.nb-blocks li b { color: var(--muted); font-variant-numeric: tabular-nums; }

.nb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.nb-card { text-align: left; cursor: pointer; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 16px; font: inherit; transition: border-color .15s; }
.nb-card:hover { border-color: var(--ink); }
.nb-card.on { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--brand); }
.nb-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.nb-card-name { font-weight: 600; font-size: 0.9375rem; color: var(--ink); line-height: 1.25; }
.nb-card-top .ttag { font-size: 0.6875rem; padding: 3px 8px; }
.nb-card-n { font-family: var(--display); font-weight: 700; font-size: 1.625rem; color: var(--ink); line-height: 1; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.nb-card-n span { font-family: var(--body, inherit); font-size: 0.8125rem; font-weight: 500; color: var(--muted); margin-left: 6px; }

@media (max-width: 900px) {
  .nb-dash { grid-template-columns: 1fr; }
  .nb-detail-cols { grid-template-columns: 1fr; gap: 18px; }
}

/* crime-info -> trends CTA band */
.trends-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px; transition: border-color .15s; }
.trends-cta:hover { border-color: var(--ink); }
.trends-cta-txt { flex: 1 1 340px; }
.trends-cta-txt h3 { margin: 0 0 8px; font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.375rem); }
.trends-cta-txt p { color: var(--muted); margin: 0; font-size: 0.9688rem; max-width: 640px; }
.trends-cta-go { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--brand); font-weight: 600; font-size: 1rem; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- header: open/closed status pill + de-squished brand ---------- */
.ribbon .wrap { align-items: center; }
.rib-emerg { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rib-sep { color: #435067; }
/* records-office status: plain text, no pill, dot, or glow */
.hours-status { font-size: 0.8125rem; color: #c8d4e2; white-space: nowrap; line-height: 1.4; }
.hours-status[hidden] { display: none; }
.hours-status b { color: #fff; font-weight: 600; }
.hours-status .hs-dot { display: none; }

/* brand lockup — a bit more air, calmer subtitle */
.brand { gap: 13px; }
.brand .t small { color: #b3c3d4; letter-spacing: 0.04em; font-weight: 600; }
.nav-links { gap: 5px; }

@media (max-width: 620px) {
  .hours-status { font-size: 0.75rem; }
  .ribbon .wrap { justify-content: center; gap: 8px 14px; }
}

/* ---------- nav refinement: calmer, better-organized layout ---------- */
.nav .wrap { gap: 22px; }
.brand { margin-right: 4px; }                 /* was margin-right:auto — let links sit beside it */
.nav-links { margin-left: 6px; gap: 3px; }    /* links group left, next to the brand */
.nav-links a { display: inline-flex; align-items: center; font-size: 0.9375rem; font-weight: 600; padding: 9px 13px; border-radius: var(--radius-ctl); color: #d7dfe9; position: relative; }
.nav-links a:hover { color: #fff; background: rgba(255,255,255,0.07); }
.nav-links a[aria-current="page"] { color: #fff; background: transparent; }
.nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; background: var(--brand); }
/* utilities cluster, set off from the links by a hairline divider */
.nav-util { margin-left: auto; display: flex; align-items: center; gap: 12px; padding-left: 20px; border-left: 1px solid var(--navy-line); }
.nav-search { width: 44px; height: 44px; padding: 0; border-radius: var(--radius-ctl); gap: 0; }
.nav-util .cta { display: inline-flex; align-items: center; min-height: 44px; background: var(--brand); color: #fff; font-weight: 600; font-size: 0.9375rem; padding: 0 16px; border-radius: var(--radius-ctl); text-decoration: none; white-space: nowrap; transition: background .15s; }
.nav-util .cta:hover { background: var(--brand-dark); color: #fff; }

@media (max-width: 1240px) { .nav-util { padding-left: 12px; gap: 9px; } }
@media (max-width: 560px) {
  .nav-util { border-left: none; padding-left: 0; gap: 7px; }
  .nav-util .cta { padding: 0 12px; font-size: 0.875rem; }
}
@media (max-width: 390px) { .nav-util .cta { display: none; } }  /* tip stays in the ribbon + footer */

/* Submit-a-Tip: in the desktop utility cluster; inside the hamburger menu on mobile */
.nav-mob-tip { display: none; }
@media (max-width: 1240px) {
  .nav-util .cta { display: none; }
  .nav-links .nav-mob-tip { display: block; }
}

/* ---------- review fixes: contrast + narrow-phone nav ---------- */
/* #3: the .tr trend colors are tuned for dark panels; inside the WHITE map popup
   they fail contrast — give the popup its own darker, on-white variants */
.maplibregl-popup-content .tr.up { color: #6b6353; }
.maplibregl-popup-content .tr.up.sev { color: #a5281f; }
.maplibregl-popup-content .pm.dim { opacity: .72; font-size: 0.7188rem; }
.maplibregl-popup-content .tr.dn { color: #1f6b45; }
.maplibregl-popup-content .tr { color: #51606f; }

/* #8: keep the sticky nav from forcing horizontal page scroll on <=400px phones
   (iPhone SE / mini / small Android). Tighten padding + gaps; CTA already hides <=390 */
@media (max-width: 400px) {
  .nav .wrap { padding: 0 13px; gap: 9px; }
  .brand { gap: 10px; }
  .brand img { width: 40px; }
}

/* ---------- trends: "State of Safety" data story ---------- */
.rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.rec-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.rec-card.wide { grid-column: span 1; }
.rec-n { font-family: var(--display); font-weight: 700; font-size: clamp(1.375rem, 2.5vw, 1.875rem); line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.rec-l { font-family: var(--body); text-transform: uppercase; letter-spacing: .06em; font-size: 0.75rem; color: var(--ink); font-weight: 700; margin-top: 9px; }
.rec-s { font-size: 0.8125rem; color: var(--muted); margin-top: 4px; }

.heatwrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 10px; overflow-x: auto; }
.heat { display: block; min-width: 520px; }
.heat-lbl { font-size: 0.6875rem; fill: var(--muted); font-weight: 600; }

.dz2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.season-card { padding: 16px 18px 8px; background: #fff; }
.catshift-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; padding-left: 4px; }
.catshift-legend .cl { display: inline-flex; align-items: center; gap: 7px; font-size: 0.875rem; color: var(--ink); font-weight: 600; }
.catshift-legend .cl-dot { width: 10px; height: 10px; border-radius: 50%; }

.dl-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px; }
.dl-copy { flex: 1 1 300px; }
.dl-copy h3 { margin: 0 0 8px; font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.375rem); }
.dl-copy p { color: var(--muted); margin: 0; font-size: 0.9688rem; max-width: 56ch; }
.dl-btns { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 820px) { .dz2 { grid-template-columns: 1fr; gap: 20px; } }


/* ---------- ultracode review fixes ---------- */
.heatwrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 520px) {
  .heatwrap { position: relative; }
  .heatwrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 44px;
    background: linear-gradient(90deg, rgba(255,255,255,0), #fff 78%); pointer-events: none; border-radius: 0 var(--radius) var(--radius) 0; }
  .heat-swipe { display: block; }
}
.heat-swipe { display: none; font-size: 0.75rem; color: var(--muted); text-align: right; margin-top: 6px; }



/* ---------- improvement wave (Jul 2026) ---------- */
.heat { height: auto; }
@media (min-width: 1100px) { .rec-grid { grid-template-columns: repeat(3, 1fr); } }


/* comfortable tap targets on touch devices only (desktop keeps the tight look) */
@media (pointer: coarse) {
  .icon-btn, .nav-toggle { min-width: 44px; min-height: 44px; }
  .langtog button { padding-left: 12px; padding-right: 12px; }
  .seg button, .fcat, .dp-row { min-height: 44px; }
  .mapplay, .map-search .sug button { min-height: 44px; }
}

/* week-tile year-over-year line */
.dt-yoy { margin-top: 4px; min-height: 18px; }
.dt-yoy .ttag { font-size: 0.7188rem; }

/* ============ authoritative mobile-nav hardening (demo-eve) ============
   The nav accreted several conflicting breakpoints over successive redesigns.
   This final block re-asserts the intended mobile behavior so no earlier
   fragment can override it: hamburger visible, inline Submit-a-Tip collapsed
   into the menu, and the brand sized so nothing wraps. */
@media (max-width: 1240px) {
  .nav-toggle { display: block; }
  .nav-util .cta { display: none; }          /* Submit a Tip: in the hamburger + ribbon on mobile */
  .nav-links .nav-mob-tip { display: block; }
  .brand .t { font-size: 1.125rem; }
  .brand .t small { display: none; }
}
@media (max-width: 400px) {
  .nav .wrap { gap: 10px; padding: 0 13px; }
  .brand { gap: 10px; }
  .brand img { width: 38px; }
  .brand .t { font-size: 1rem; }
  .nav-util { gap: 6px; }
}

/* downloadable request forms (report page cards) */
.form-dl { display: inline-flex; align-items: center; gap: 7px; font-size: 0.9375rem;
  font-weight: 600; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.form-dl svg { width: 15px; height: 15px; flex: none; }
.form-dl:not(.pending):hover { text-decoration: underline; }
.form-dl.pending { color: #7d8ea3; cursor: default; }
.form-dl.pending em { font-style: normal; font-weight: 500; opacity: .85; }
.card .form-dl + .go { margin-top: 10px; }

/* the width/height attrs (added for CLS) set a definite pixel height that blocks
   aspect-ratio — let aspect-ratio drive the crop for all .leader photos */
.leader img { height: auto; }
/* community program tiles are landscape EVENT photos, not portrait headshots —
   override the tall .leader crop so they sit as proper wide tiles on desktop */
.leader.event img { aspect-ratio: 16 / 11; object-position: center; }
@media (max-width: 720px) { .leader.event img { aspect-ratio: 16 / 10; } }

/* on-submit confirmation pop-up (report form) */
.form-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(6,13,26,.72); animation: fmIn .15s ease; }
.form-modal[hidden] { display: none; }
.fm-card { background: #fff; border-radius: var(--radius); max-width: 460px; width: 100%; padding: 32px 30px 26px;
  text-align: center; box-shadow: 0 24px 60px rgba(6,13,26,.4); }
.fm-check { width: 60px; height: 60px; border-radius: 50%; background: #1f7a4d; color: #fff; display: flex;
  align-items: center; justify-content: center; margin: 0 auto 16px; }
.fm-check svg { width: 30px; height: 30px; }
.fm-card h2 { margin: 0 0 10px; color: var(--navy-900); }
.fm-card p { color: var(--muted); margin: 0 0 12px; line-height: 1.55; }
.fm-card .fm-fine { font-size: 0.875rem; color: var(--muted); }
.fm-actions { display: flex; gap: 16px; align-items: center; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.fm-again { background: none; border: 0; color: var(--navy-900); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.fm-again:hover { color: var(--brand); }
@keyframes fmIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .form-modal { animation: none; } }

/* ---------- Ask JPD assistant widget ---------- */
.ask-wrap { position: fixed; bottom: 20px; right: 20px; z-index: 190; }
.ask-fab { display: inline-flex; align-items: center; gap: 9px; background: var(--brand); color: #fff;
  border: 0; border-radius: var(--radius-ctl); min-height: 44px; padding: 0 16px 0 14px; font-family: var(--body); font-weight: 600;
  font-size: 0.9375rem; cursor: pointer; box-shadow: var(--shadow-md); transition: background .15s; }
.ask-fab:hover { background: var(--brand-dark); }
.ask-fab svg { width: 20px; height: 20px; }
.ask-panel { position: absolute; bottom: calc(100% + 12px); right: 0; width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 120px)); background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-md); }
.ask-panel[hidden] { display: none; }
.ask-head { display: flex; align-items: center; gap: 9px; padding: 14px 16px; background: var(--navy-900); color: #fff; }
.ask-dot { display: none; }
.ask-title { font-family: var(--body); font-weight: 600; font-size: 1rem; flex: 1; }
.ask-close { background: none; border: 0; color: #cbd6e2; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.ask-close:hover { color: #fff; }
.ask-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ask-msg { max-width: 88%; padding: 11px 14px; border-radius: var(--radius); font-size: 0.9375rem; line-height: 1.5; }
.ask-msg p { margin: 0 0 8px; } .ask-msg p:last-child { margin: 0; }
.ask-msg a { color: inherit; text-decoration: underline; }
.ask-assistant { background: var(--paper-2); color: var(--ink); align-self: flex-start; }
.ask-user { background: var(--ink); color: #fff; align-self: flex-end; }
.ask-user a { color: #fff; }
.ask-typing { display: inline-flex; gap: 4px; padding: 2px 0; }
.ask-typing i { width: 7px; height: 7px; border-radius: 50%; background: #a99; animation: askBlink 1.2s infinite; }
.ask-typing i:nth-child(2) { animation-delay: .2s; } .ask-typing i:nth-child(3) { animation-delay: .4s; }
.ask-suggest { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 8px; }
.ask-chip { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-ctl); padding: 7px 12px; font-size: 0.8125rem;
  color: var(--navy-900); cursor: pointer; text-align: left; line-height: 1.3; }
.ask-chip:hover { border-color: var(--brand); color: var(--brand); }
.ask-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); align-items: center; }
.ask-input { flex: 1; border: 1px solid #6b7785; border-radius: var(--radius-ctl); min-height: 44px; padding: 10px 12px; font: inherit; font-size: 1rem; background: #fff; color: var(--ink); }
.ask-input:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.ask-send { flex: none; width: 44px; height: 44px; border: 0; border-radius: var(--radius-ctl); background: var(--brand); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ask-send:hover { background: var(--brand-dark); }
.ask-send svg { width: 20px; height: 20px; }
.ask-fine { margin: 0; padding: 0 16px 12px; font-size: 0.75rem; color: var(--muted); line-height: 1.4; text-align: center; }
@keyframes askBlink { 0%,60%,100% { opacity: .3; } 30% { opacity: 1; } }
@media (max-width: 640px) { .ask-fab-t { display: none; } .ask-fab { padding: 0 13px; } }
@media (prefers-reduced-motion: reduce) { .ask-typing i { animation: none; } }

/* ---------- homepage v3 (client-approved order): quiet numbered headers ----------
   A small numeral + plain sentence-case label above each section heading; no dash
   glyph, no wide tracking, a hairline instead of a heavy rule. */
.shead { border-top: 1px solid var(--line); padding-top: 18px; margin-bottom: clamp(24px, 3.5vw, 40px); }
.section-dark .shead, .divisions .div-panel .shead { border-top-color: rgba(255,255,255,.22); }
.kick { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-family: var(--body); font-size: 0.9375rem; font-weight: 600; color: var(--muted); }
.kick .num { font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--brand); font-variant-numeric: tabular-nums; }
.section-dark .kick { color: #c9d5e3; }
.section-dark .kick .num { color: var(--brand-bright); }
.shead h2 { margin-bottom: 0.3em; }
.section-dark .shead h2 { color: #fff; }
.shead .lede { max-width: 62ch; margin-bottom: 0; }
@media (min-width: 900px) { .shead.split { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; } }
.shead .fact { font-weight: 500; font-size: 0.9375rem; white-space: nowrap; padding-bottom: 4px; margin: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.section-dark .shead .fact { color: #b3c0d0; }
@media (max-width: 899px) { .shead .fact { margin-top: 10px; white-space: normal; text-align: left; } }

/* divisions: full-bleed photographic triptych */
.divisions { background: var(--paper); }
.div-intro { max-width: var(--maxw); margin: 0 auto; padding: clamp(56px, 7vw, 88px) 24px clamp(28px, 4vw, 40px); }
.div-intro .shead { margin-bottom: 0; }
.div-panel { position: relative; overflow: hidden; min-height: clamp(440px, 46vw, 560px); display: flex; align-items: center; }
.div-panel { background: var(--navy-900); }
.div-panel + .div-panel { border-top: 1px solid rgba(255,255,255,.14); }
.div-panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p1 > img { object-position: 62% center; } .p2 > img { object-position: 80% center; } .p3 > img { object-position: center 40%; }
/* one flat overlay so the photograph stays a photograph */
.div-panel .scrim { position: absolute; inset: 0; background: rgba(12, 26, 40, 0.56); }
.div-panel .inner { position: relative; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(48px, 6vw, 72px) 24px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.div-panel .txt { grid-column: 1 / span 6; } .div-panel.alt .txt { grid-column: 7 / span 6; }
.dkick { display: flex; align-items: baseline; gap: 10px; font-family: var(--body); font-weight: 600; font-size: 0.9375rem; color: #d7e0ec; margin: 0 0 8px; }
.dkick b { font-family: var(--display); font-size: 1rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.div-panel h3 { font-family: var(--display); font-weight: 700; font-size: clamp(2.5rem, 1.8rem + 2vw, 3.5rem); line-height: 1; color: #fff; margin: 0; }
.div-panel .txt > p { font-size: 1.0625rem; line-height: 1.6; color: #eef2f6; max-width: 46ch; margin-top: 12px; }
.roster { display: flex; flex-wrap: wrap; row-gap: 6px; margin: 16px 0 0; list-style: none; padding: 0; }
.roster li { font-family: var(--body); font-weight: 500; font-size: 0.9688rem; color: #e3e9f0; }
.roster li:not(:last-child)::after { content: "\00b7"; margin: 0 10px; color: #b3c0d0; }
.xref { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; font-family: var(--body); font-weight: 600; font-size: 1rem; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.xref:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 900px) {
  .div-panel { align-items: flex-end; min-height: 520px; }
  .div-panel .txt, .div-panel.alt .txt { grid-column: 1 / -1; }
  .div-panel .scrim { background: rgba(12, 26, 40, 0.62); }
}
@media (max-width: 480px) { .div-panel { min-height: 460px; } .div-panel h3 { font-size: 2.5rem; } .div-panel .txt > p { font-size: 1rem; } }

/* department posts: plain bordered entries on pale gray */
.wire { background: var(--paper-2); }
.wire-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 960px) { .wire-rail { grid-template-columns: 1fr; } }
.wire-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; display: flex; flex-direction: column; }
.wire-card .who { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.wire-card .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); display: flex; align-items: center; justify-content: center; flex: none; }
.wire-card .avatar img { height: 22px; width: auto; object-fit: contain; }
.wire-card .id b { display: block; font-weight: 600; font-size: 0.9062rem; color: var(--ink); }
.wire-card .id .meta { font-size: 0.8125rem; color: var(--muted); }
.wire-card .tag { font-style: normal; font-weight: 600; color: var(--ink); }
.wire-card > p { font-size: 0.9688rem; line-height: 1.6; color: var(--ink); margin-bottom: 0; }
.wire-card .foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; padding-top: 14px; gap: 12px; }
.wire-card .when { font-size: 0.875rem; color: var(--muted); }
.wire-card .go { font-weight: 600; font-size: 0.9375rem; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.wire-social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.wire-social .pill { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; border: 1px solid var(--ink); border-radius: var(--radius-ctl); padding: 0 16px; font-weight: 600; font-size: 0.9688rem; color: var(--ink); text-decoration: none; background: #fff; }
.wire-social .pill svg { width: 16px; height: 16px; fill: currentColor; }
.wire-social .pill:hover { background: var(--ink); color: #fff; }
.wire-social .pill.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.wire-social .pill.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

/* ---------- homepage stage 2: action ledger + involvement ledger + triptych motion ---------- */
.action-ledger { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3.5vw, 48px); }
.action-ledger a { display: block; border-top: 2px solid var(--ink); padding-top: 14px; text-decoration: none; color: inherit; transition: border-color .15s ease; }
.action-ledger h3 { font-size: 1.25rem; margin: 0 0 6px; color: var(--ink); }
.action-ledger p { font-size: 0.9688rem; line-height: 1.55; color: var(--muted); margin: 0; }
.action-ledger .go { display: inline-block; margin-top: 10px; font-weight: 600; font-size: 0.9375rem; color: var(--brand); }
.action-ledger a:hover, .action-ledger a:focus-visible { border-top-color: var(--brand); }
.action-ledger a:hover .go, .action-ledger a:focus-visible .go { text-decoration: underline; }

@media (max-width: 900px) { .action-ledger { grid-template-columns: 1fr 1fr; row-gap: 28px; } }
@media (max-width: 520px) { .action-ledger { grid-template-columns: 1fr; } }

.involve-ledger { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3.5vw, 48px); }
.involve-ledger .item { border-top: 2px solid var(--ink); padding-top: 14px; }
.involve-ledger h3 { font-size: 1.25rem; margin: 0 0 6px; color: var(--ink); }
.involve-ledger p { font-size: 0.9688rem; line-height: 1.55; color: var(--muted); margin: 0; }
.involve-ledger .go { display: inline-block; margin-top: 10px; font-weight: 600; font-size: 0.9375rem; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .involve-ledger { grid-template-columns: 1fr 1fr; row-gap: 28px; } }
@media (max-width: 520px) { .involve-ledger { grid-template-columns: 1fr; } }


/* get-involved: white band with hairlines, so the photo band below reads as its own section */
.involve-band { background: #fff; border-top: 1px solid var(--line); }

/* ==========================================================================
   /crime-info/ — civic-editorial redesign (Oct 2026 draft)
   Everything below is scoped to main.crimepg so no other page changes.
   Bands: navy instrument (masthead + map) -> gray trends ledger -> paper log
   -> navy year in review. Thin rules, condensed numerals, no floating cards.
   ========================================================================== */
.crimepg {
  --cx-navy: #091725; --cx-navy-2: #0c1b2c; --cx-navy-3: #112437;
  --cx-paper: #f6f5f1; --cx-gray: #eaece8; --cx-ink: #122636; --cx-muted: #4f5d6a;
  --cx-line: #d4d8d4; --cx-red: #b4232b; --cx-gold: #d9b675; --cx-gold-ink: #7a5a1e;
  --cx-on-navy: #e8edf3; --cx-on-navy-2: #aab6c6; --cx-hair: rgba(255,255,255,.14);
  --cx-ease: cubic-bezier(.2,.8,.2,1);
  color: var(--cx-ink);
}
.crimepg .wrap { max-width: var(--maxw); margin: 0 auto; }
.crimepg [id] { scroll-margin-top: calc(var(--nav-h) + 10px); }
.crimepg .section-dark :focus-visible, .crimepg .cx-mast :focus-visible { outline: 2px solid var(--cx-gold); outline-offset: 2px; }
.crimepg .cx-paper :focus-visible { outline: 2px solid var(--cx-red); outline-offset: 2px; }

/* ---------- masthead: dateline, title + deck, ruled KPI strip ---------- */
.crimepg .cx-mast { position: relative; overflow: hidden; background: var(--cx-navy); color: var(--cx-on-navy); padding: 22px 24px 0; }
.crimepg .cx-mast .wrap { position: relative; }
.crimepg .cx-mast-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--cx-hair); }
.crimepg .cx-mast .crumbs { margin: 0; }
.crimepg .cx-mast .crumbs a { color: #e8edf3; }
.crimepg .cx-mast .crumbs li + li::before { color: #8fa2b8; }
.crimepg .cx-mast .crumbs [aria-current] { color: var(--cx-on-navy-2); }
.crimepg .cx-fresh { margin: 0; gap: 6px 0; font-size: 0.8125rem; color: var(--cx-on-navy-2); }
.crimepg .cx-fresh > span { display: inline-flex; align-items: center; }
.crimepg .cx-fresh > span + span::before { content: ""; width: 1px; height: 12px; background: var(--cx-hair); margin: 0 12px; }
.crimepg .cx-fresh strong { color: #fff; font-weight: 600; }
.crimepg .cx-mast .skeleton { background: rgba(255,255,255,.06); }

.crimepg .cx-mast-head { display: grid; gap: 14px 48px; margin: 20px 0 22px; align-items: end; }
@media (min-width: 1000px) { .crimepg .cx-mast-head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.crimepg .cx-mast h1 { margin: 0; color: #fff; font-size: clamp(2.375rem, 1.5rem + 2.6vw, 3.5rem); line-height: 1.02; }
.crimepg .cx-deck.pulse-line { margin: 0; padding: 0; font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); line-height: 1.45; color: #d7e0ec; max-width: 52ch; }
.crimepg .cx-deck.skeleton { min-height: 3.6em; border-radius: 4px; }
.crimepg .cx-deck strong { font-family: var(--display); font-weight: 700; font-size: 1.16em; letter-spacing: .01em; color: var(--cx-gold); }
.crimepg .cx-deck .pulse-note { display: block; margin-top: 8px; font-size: 0.8125rem; line-height: 1.45; color: #8fa2b8; }

.crimepg .cx-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); margin: 0;
  border-top: 1px solid rgba(255,255,255,.28); }
.crimepg .cx-kpis .dtile { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 14px 24px 14px; min-height: 0;
  border-left: 1px solid var(--cx-hair); display: flex; flex-direction: column; }
.crimepg .cx-kpis .dtile:first-child { border-left: 0; padding-left: 0; }
.crimepg .cx-kpis .dtile.skeleton { background: rgba(255,255,255,.03); }
.crimepg .cx-kpis .dt-l { order: -1; margin: 0 0 8px; font: 600 0.75rem/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--cx-on-navy-2); }
.crimepg .cx-kpis .dt-n { font-family: var(--display); font-weight: 700; font-size: clamp(2.5rem, 4.4vw, 3.75rem); line-height: .9; color: #fff;
  background: none; -webkit-text-fill-color: currentColor; font-variant-numeric: tabular-nums; letter-spacing: .005em; }
.crimepg .cx-kpis .dt-n.dt-type { font-size: clamp(1.625rem, 2.3vw, 2.125rem); line-height: 1; padding-top: 4px; }
.crimepg .cx-kpis .dt-note { margin-top: 8px; min-height: 0; font-size: 0.8125rem; color: var(--cx-on-navy-2); }
.crimepg .cx-kpis .dt-yoy { margin-top: 8px; min-height: 0; }
.crimepg .cx-kpis .ttag { background: transparent; border: 1px solid currentColor; border-radius: 2px; padding: 2px 9px; font-size: 0.75rem; font-weight: 600; }
.crimepg .cx-kpis .ttag.up { color: #f2a097; } .crimepg .cx-kpis .ttag.dn { color: #86d6aa; } .crimepg .cx-kpis .ttag.flat { color: var(--cx-on-navy-2); }
.crimepg .cx-kpis .dt-sparkwrap { margin-top: auto; padding-top: 10px; min-height: 36px; }
.crimepg .cx-kpis .dt-spark { opacity: .85; }
.crimepg .cx-kpis .dt-ctx { margin: 10px 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--cx-gold); max-width: 36ch; }
.crimepg .cx-kpis .dt-ctx[hidden] { display: none; }
.crimepg .cx-release { margin: 0; padding: 10px 0 0; font-size: 0.75rem; color: #8fa2b8; border-top: 1px solid var(--cx-hair); }
.crimepg .cx-release:empty { display: none; }
@media (max-width: 899px) {
  .crimepg .cx-mast { padding: 16px 16px 0; }
  .crimepg .cx-mast-row { flex-direction: column; align-items: flex-start; }
  .crimepg .cx-fresh { flex-direction: column; align-items: flex-start; gap: 4px; }
  .crimepg .cx-fresh > span + span::before { display: none; }
  .crimepg .cx-fresh > span + span { padding-left: 0; }
  .crimepg .cx-mast-head { margin: 16px 0 20px; }
  .crimepg .cx-kpis { grid-template-columns: 1fr 1fr; }
  .crimepg .cx-kpis .dtile { padding: 14px 0 16px 16px; border-top: 1px solid var(--cx-hair); }
  .crimepg .cx-kpis .dtile:nth-child(odd) { border-left: 0; padding-left: 0; padding-right: 12px; }
  .crimepg .cx-kpis .dtile:nth-child(-n+2) { border-top: 0; }
  .crimepg .cx-kpis .dt-n { font-size: clamp(2.375rem, 11vw, 3.25rem); }
  .crimepg .cx-kpis .dt-sparkwrap { min-height: 34px; }
  .crimepg .cx-kpis .cx-kpi-type .dt-sparkwrap { display: none; }
}

/* ---------- 01 map band: same navy, the instrument ---------- */
.crimepg .cx-mapband { background: var(--cx-navy); color: var(--cx-on-navy-2); padding: 26px 24px clamp(48px, 6vw, 72px); }
.crimepg .cx-shead { margin-bottom: 18px; padding-top: 16px; }
.crimepg .cx-shead h2 { margin: 0; }
.crimepg .cx-shead-note { margin: 0; max-width: 48ch; font-size: 0.9688rem; line-height: 1.5; color: var(--cx-muted); padding-bottom: 4px; }
.crimepg .section-dark .cx-shead-note { color: var(--cx-on-navy-2); }
.crimepg .shead.split { gap: 12px 40px; align-items: end; }
@media (max-width: 899px) { .crimepg .shead.split { align-items: start; } }
.crimepg .cx-mapband .map-shell { background: #07111d; border: 1px solid rgba(255,255,255,.2); border-radius: 4px; }
@media (min-width: 1100px) {
  .crimepg .cx-mapband .map-shell { margin-inline: calc((100% - min(100vw - 64px, 1380px)) / 2); }
  .crimepg .cx-mapband .mapnote { padding-left: 0; }
}

/* toolbar — desktop: search-first primary row + one quiet secondary row */
.crimepg .map-toolbar { background: var(--cx-navy-2); border-bottom: 1px solid rgba(255,255,255,.09); }
.crimepg .map-toolbar .mt-lbl, .crimepg .map-toolbar label.mt-lbl { display: block; font: 600 0.75rem/1.2 var(--body); letter-spacing: .06em;
  text-transform: uppercase; color: var(--cx-on-navy-2); }
.crimepg .map-prompt { display: block; margin: 0 0 7px; font: 600 0.9375rem/1.3 var(--body); color: var(--cx-on-navy); }
.crimepg .map-search { position: relative; max-width: none; }
.crimepg .ms-field { position: relative; display: flex; align-items: center; }
.crimepg .ms-ic { position: absolute; left: 14px; color: #44515e; pointer-events: none; }
.crimepg .map-search input { height: 48px; padding: 0 14px 0 42px; background: var(--cx-paper); color: var(--cx-ink); border: 1px solid transparent;
  border-radius: 2px; font-size: 1rem; font-weight: 500; }
.crimepg .map-search input::placeholder { color: #5d6b78; }
.crimepg .map-search input:focus { outline: 2px solid var(--cx-gold); outline-offset: 2px; border-color: transparent; }
.crimepg .map-search .sug { background: var(--cx-paper); border: 1px solid var(--cx-line); border-radius: 2px; box-shadow: 0 24px 48px -20px rgba(0,0,0,.6); max-height: 360px; overflow-y: auto; }
.crimepg .map-search .sug button { color: var(--cx-ink); font-weight: 500; font-size: 0.9375rem; min-height: 44px; border-bottom: 1px solid #e4e5e0; }
.crimepg .map-search .sug button:hover, .crimepg .map-search .sug button:focus-visible { background: #e9ebe6; color: var(--cx-ink); }
.crimepg .map-toolbar .seg { border: 1px solid rgba(255,255,255,.18); border-radius: 2px; background: transparent; }
.crimepg .map-toolbar .seg button { background: transparent; color: #d0d9e4; min-height: 44px; padding: 0 14px; font-size: 0.875rem; font-weight: 600; }
.crimepg .map-toolbar .seg button + button { border-left: 1px solid rgba(255,255,255,.14); }
.crimepg .map-toolbar .seg button:hover { background: rgba(255,255,255,.06); color: #fff; }
.crimepg .map-toolbar .seg button.on { background: var(--cx-paper); color: var(--cx-navy); }
.crimepg .map-toolbar select { flex: none; width: auto; height: 44px; min-width: 200px; padding: 0 38px 0 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 2px;
  background: var(--cx-navy-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23d9b675' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 14px center;
  -webkit-appearance: none; appearance: none; color: #f1ede3; font-size: 0.9375rem; font-weight: 600; }
.crimepg .map-toolbar select option { color: #122636; background: #fff; }
.crimepg .mt-group { display: flex; flex-direction: column; gap: 7px; }
.crimepg .mt-caret { display: inline-block; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); margin-left: 4px; transition: transform .2s var(--cx-ease); }
.crimepg .map-disc[aria-expanded="true"] .mt-caret { transform: translateY(1px) rotate(-135deg); }
.crimepg .mt-watchwrap { position: relative; }
.crimepg .mt-watchbtn { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px 0 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 2px;
  background: transparent; color: #f1f4f8; font: 600 0.9375rem var(--body); cursor: pointer; }
.crimepg .mt-watchbtn svg { box-sizing: content-box; width: 12px; height: 12px; padding: 5px 4px 5px 6px; border-radius: 50%; background: var(--cx-red); color: #fff; }
.crimepg .mt-watchbtn:hover, .crimepg .mt-watchbtn[aria-expanded="true"] { border-color: var(--cx-gold); background: rgba(255,255,255,.04); }
.crimepg .mt-watchbtn.is-on::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cx-gold); }
.crimepg .map-watch .mapplay { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 12px; align-items: center; width: 100%; text-align: left;
  background: transparent; color: var(--cx-on-navy); border: 0; border-left: 2px solid transparent; border-radius: 0; padding: 10px 14px; min-height: 54px; font: inherit; cursor: pointer; }
.crimepg .map-watch .mapplay svg { grid-row: 1 / span 2; color: var(--cx-gold); }
.crimepg .map-watch .mapplay span { font-weight: 600; font-size: 0.9375rem; line-height: 1.25; }
.crimepg .map-watch .mapplay small { grid-column: 2; font-size: 0.75rem; line-height: 1.3; color: var(--cx-on-navy-2); }
.crimepg .map-watch .mapplay:hover, .crimepg .map-watch .mapplay:focus-visible { background: rgba(255,255,255,.06); }
.crimepg .map-watch .mapplay.playing { background: rgba(180,35,43,.22); border-left-color: var(--cx-red); color: #fff; }
.crimepg .map-watch .mapplay.playing svg { color: #fff; }
.crimepg .map-watch .mapplay[hidden] { display: none; }
.crimepg .mapreset { min-height: 40px; padding: 0 12px; border-color: rgba(255,255,255,.16); color: #d0d9e4; font-weight: 600; font-size: 0.8125rem; }
.crimepg .mapreset svg { width: 15px; height: 15px; }
.crimepg #map-count { font-size: 0.8125rem; color: var(--cx-on-navy-2); font-variant-numeric: tabular-nums; }

@media (min-width: 769px) {
  .crimepg .map-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
    grid-template-areas: "search days cat watch" "adv adv adv adv"; gap: 14px 18px; align-items: end; padding: 18px 20px 0; }
  .crimepg .map-search { grid-area: search; }
  .crimepg #map-days { grid-area: days; }
  .crimepg #map-catwrap { grid-area: cat; }
  .crimepg .mt-watchwrap { grid-area: watch; }
  .crimepg .mt-filtersbtn { display: none; }
  .crimepg .map-watch { display: none; position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; width: 300px; padding: 6px 0;
    background: #0b1828; border: 1px solid rgba(217,182,117,.4); border-radius: 2px; box-shadow: 0 28px 60px -24px rgba(0,0,0,.85); }
  .crimepg .map-toolbar.watch-open .map-watch { display: block; animation: cxPop .18s var(--cx-ease); }
  .crimepg .map-adv { grid-area: adv; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 26px; margin: 0 -20px; padding: 10px 20px;
    border-top: 1px solid rgba(255,255,255,.07); background: rgba(0,0,0,.14); }
  .crimepg .map-adv .mt-group { flex-direction: row; align-items: center; gap: 10px; }
  .crimepg .map-adv .seg button { min-height: 36px; padding: 0 12px; font-size: 0.8125rem; }
  .crimepg .map-adv #map-count { margin-left: auto; }
  .crimepg #crimemap { height: clamp(540px, 70vh, 760px); }
}
@media (min-width: 769px) and (pointer: coarse) { .crimepg .map-adv .seg button { min-height: 44px; } }
@keyframes cxPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* toolbar — phones: the approved search-first + Watch / Filters chips */
@media (max-width: 768px) {
  .crimepg .cx-mapband { padding: 22px 16px 44px; }
  .crimepg .cx-mapband .wrap > .map-shell { margin-inline: -16px; border-left: 0; border-right: 0; border-radius: 0; }
  .crimepg .map-toolbar { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
  .crimepg .map-search { flex: 1 1 100%; order: -3; }
  .crimepg .map-prompt { margin-bottom: 7px; }
  .crimepg .mt-watchwrap { display: contents; }
  .crimepg .map-disc { order: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 2px;
    background: transparent; border: 1px solid rgba(255,255,255,.22); color: #e2e9f1; font-weight: 600; font-size: 0.9375rem; }
  .crimepg .map-disc[aria-expanded="true"]:not(.mt-watchbtn) { background: var(--cx-paper); color: var(--cx-navy); border-color: var(--cx-paper); }
  .crimepg .map-watch { order: 2; flex: 1 1 100%; display: none; flex-wrap: wrap; gap: 8px; }
  .crimepg .map-toolbar.watch-open .map-watch { display: flex; }
  .crimepg .map-watch .mapplay { display: inline-flex; width: auto; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 2px; }
  .crimepg .map-watch .mapplay svg { grid-row: auto; }
  .crimepg .map-watch .mapplay small { display: none; }
  .crimepg .map-watch .mapplay.playing { border-color: var(--cx-red); }
  .crimepg .mt-filter, .crimepg .map-adv { order: 3; display: none; }
  .crimepg .map-toolbar.adv-open .mt-filter { display: flex; }
  .crimepg .map-toolbar.adv-open .map-adv { display: flex; flex-direction: column; align-items: stretch; gap: 12px; flex: 1 1 100%; }
  .crimepg #map-days { flex: 0 0 auto; }
  .crimepg #map-catwrap { flex: 1 1 160px; }
  .crimepg #map-catwrap select { width: 100%; min-width: 0; }
  .crimepg .map-adv .seg { display: flex; }
  .crimepg .map-adv .seg button { flex: 1 1 auto; padding: 0 10px; }
  .crimepg .map-toolbar #map-count { order: 0; flex: none; margin: 0; }
  .crimepg .mapreset { align-self: flex-start; min-height: 44px; }
}

/* ticker, stage, rhythm, legend */
.crimepg .map-ticker-wrap { background: #07111d; border-bottom: 1px solid rgba(255,255,255,.07); }
.crimepg .tklbl { background: var(--cx-navy-2); color: var(--cx-gold); font: 700 0.75rem/1 var(--body); letter-spacing: .06em; padding: 13px 16px; border-right-color: rgba(255,255,255,.1); }
.crimepg button.tk { background: transparent; border-color: rgba(255,255,255,.12); border-radius: 4px; padding: 5px 12px; font-size: 0.8125rem; color: #cfd8e3; }
.crimepg button.tk:hover { background: rgba(255,255,255,.06); }
.crimepg button.tk .tkt { color: var(--cx-gold); font-weight: 600; }
.crimepg button.tk .tka { color: #9fb0c4; }
.crimepg .mapbox-wrap::before, .crimepg .mapbox-wrap::after { display: none; }
.crimepg .map-vignette { background: radial-gradient(130% 100% at 50% 45%, rgba(7,17,29,0) 60%, rgba(7,17,29,.45) 100%), linear-gradient(180deg, rgba(7,17,29,.3), rgba(7,17,29,0) 12%); }
.crimepg .map-hint { background: rgba(7,17,29,.78); border: 1px solid rgba(255,255,255,.1); border-radius: 2px; padding: 6px 13px; font-size: 0.75rem; color: #d0d9e4; }
.crimepg .map-hud, .crimepg .map-daytag, .crimepg .tour-card { background: rgba(7,17,29,.86); border: 1px solid rgba(217,182,117,.34); border-radius: 4px; }
.crimepg .map-hud em, .crimepg .map-daytag em, .crimepg .tour-card em { color: var(--cx-gold); }
.crimepg .map-hud { font-family: var(--display); font-size: 1.125rem; }
.crimepg .map-hud span { font-family: var(--body); }
.crimepg .block-report { background: rgba(246,245,241,.97); color: var(--cx-ink); border: 1px solid var(--cx-line); border-radius: 4px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.crimepg .block-report em { color: var(--cx-red); }
.crimepg .block-report h3 { color: var(--cx-navy); }
.crimepg .block-report .br-big { color: var(--cx-navy); font-size: 1.5rem; line-height: 1.15; border-bottom: 1px solid var(--cx-line); padding-bottom: 12px; margin-bottom: 12px; }
.crimepg .block-report .br-fine { color: var(--cx-muted); }
.crimepg .block-report .br-x { color: var(--cx-muted); min-width: 44px; min-height: 44px; }
.crimepg .block-report .br-x:hover { color: var(--cx-ink); }
.crimepg .block-report .br-actions { flex-wrap: wrap; }
.crimepg .pin-chip { border-radius: 4px; background: rgba(7,17,29,.92); border-color: rgba(217,182,117,.34); }
.crimepg .map-rhythm-wrap { background: #07111d; border-top: 1px solid rgba(255,255,255,.07); padding: 12px 20px 8px; }
.crimepg .map-rhythm-wrap .rt { font: 700 0.75rem/1.2 var(--body); letter-spacing: .06em; color: #c4cfdb; }
.crimepg .map-rhythm .raxis { font: 600 0.75rem var(--body); color: #a3b1c2; font-variant-numeric: tabular-nums; }
.crimepg .map-rhythm .rb { background: #22385a; border-radius: 1px 1px 0 0; }
.crimepg .map-rhythm .rb.on { background: var(--cx-gold); }
.crimepg .rbands { color: #a3b1c2; font-size: 0.75rem; }
.crimepg .map-legend { background: #07111d; border-top-color: rgba(255,255,255,.07); color: #c4cfdb; font-size: 0.8125rem; padding: 12px 20px; }
.crimepg .map-legend .sw { border-color: #07111d; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.crimepg .cx-mapband .mapnote { color: #aab6c6; font-size: 0.8125rem; line-height: 1.55; max-width: 92ch; padding: 14px 0 0; margin: 0; }
@media (max-width: 768px) {
  .crimepg .map-shell .map-legend { padding: 10px 16px; }
  .crimepg .map-rhythm-wrap { padding: 12px 16px 8px; }
  .crimepg .block-report { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 78%; padding: 18px 18px 16px; }
}

/* ---------- 02 trends ledger (pale gray) ---------- */
.crimepg .cx-paper { background: var(--cx-paper); padding: clamp(56px, 7vw, 92px) 24px; }
.crimepg .cx-trends { background: var(--cx-gray); }
.crimepg .cx-paper .shead { border-top-color: var(--cx-line); }
.crimepg .cx-paper .shead h2 { color: var(--cx-navy); }
.crimepg .cx-mapband .shead, .crimepg .cx-yir .shead { border-top-color: var(--cx-hair); }
.crimepg .cx-trends .shead .fact { font: 600 1.0625rem/1.4 var(--body); color: var(--cx-ink); white-space: normal; text-align: right; max-width: 42ch; }
.crimepg .cx-trends .shead .fact:empty { display: none; }
@media (max-width: 899px) { .crimepg .cx-trends .shead .fact { text-align: left; } }
.crimepg .cx-ledger2 { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
.crimepg .cx-col { min-width: 0; }
.crimepg .cx-col-trend { padding-right: 40px; display: flex; flex-direction: column; }
.crimepg .cx-col-types { padding-left: 40px; border-left: 1px solid var(--cx-line); }
.crimepg .cx-h3 { margin: 0 0 4px; font: 600 1.25rem/1.3 var(--body); color: var(--cx-navy); }
.crimepg .cx-col .sub { margin: 0 0 20px; font-size: 0.875rem; color: var(--cx-muted); }
.crimepg .cx-trend { flex: 1; min-height: 0; }
.crimepg .cx-trend.skeleton { background: rgba(18,38,54,.06); border-radius: 4px; }
.crimepg #trend { overflow: visible; }
.crimepg #trend svg { max-width: 100%; min-width: 0; height: auto; }
.crimepg #trend .tbar:hover rect { filter: brightness(1.25); }
.crimepg .tkey { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 0.8125rem; color: var(--cx-muted); }
.crimepg .tkey span { display: inline-flex; align-items: center; gap: 7px; }
.crimepg .tkey i { display: inline-block; width: 10px; height: 10px; }
.crimepg .tkey .k-last { background: var(--cx-red); } .crimepg .tkey .k-peak { background: #b98d3e; }
.crimepg .tkey .k-avg { width: 18px; height: 0; border-top: 1.5px dashed var(--cx-ink); opacity: .7; }
/* top call types: ruled rows, full names, count + share */
.crimepg .cx-types.barlist { display: block; }
.crimepg .cx-types.skeleton { background: rgba(18,38,54,.06); border-radius: 4px; }
.crimepg .cx-types .row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 3.4rem 2.6rem; gap: 14px; align-items: center;
  width: 100%; margin: 0; padding: 11px 2px; border: 0; border-bottom: 1px solid var(--cx-line); border-radius: 0; background: none; font-size: 0.9375rem; }
.crimepg .cx-types .row:first-child { border-top: 1px solid var(--cx-ink); }
.crimepg .cx-types .row:hover { background: rgba(18,38,54,.04); outline: none; }
.crimepg .cx-types .row:focus-visible { outline: 2px solid var(--cx-red); outline-offset: -2px; background: rgba(18,38,54,.04); }
.crimepg .cx-types .row .name { white-space: normal; overflow: visible; text-overflow: clip; font-weight: 600; color: var(--cx-navy); line-height: 1.3; }
.crimepg .cx-types .row:hover .name { color: var(--cx-red); }
.crimepg .cx-types .row .track { height: 8px; border-radius: 0; background: rgba(18,38,54,.08); }
.crimepg .cx-types .row .fill { border-radius: 0; background: #1d3a5c; }
.crimepg .cx-types .row:hover .fill { background: var(--cx-red); }
.crimepg .cx-types .row .val { font: 700 1.125rem/1 var(--display); color: var(--cx-navy); text-align: right; }
.crimepg .cx-types .row .share { font-size: 0.8125rem; color: var(--cx-muted); text-align: right; font-variant-numeric: tabular-nums; }
.crimepg .cx-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid #b89a5e; border-radius: 2px; vertical-align: 2px;
  font: 600 0.75rem/1.4 var(--body); color: var(--cx-gold-ink); white-space: nowrap; }
@media (max-width: 899px) {
  .crimepg .cx-ledger2 { grid-template-columns: 1fr; }
  .crimepg .cx-col-trend { padding-right: 0; }
  .crimepg .cx-col-types { padding-left: 0; border-left: 0; margin-top: 44px; }
}
@media (max-width: 560px) {
  .crimepg .cx-types .row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name name name" "track val share"; row-gap: 7px; column-gap: 12px; padding: 12px 2px; }
  .crimepg .cx-types .row .name { grid-area: name; }
  .crimepg .cx-types .row .track { grid-area: track; }
  .crimepg .cx-types .row .val { grid-area: val; }
  .crimepg .cx-types .row .share { grid-area: share; min-width: 2.4rem; }
}
/* put it in context */
.crimepg .cx-context { margin-top: clamp(44px, 5vw, 64px); }
.crimepg .cx-context[hidden] { display: none; }
.crimepg .cx-ctx-h { margin-bottom: 14px; }
.crimepg .cx-ctx-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--cx-ink); }
.crimepg .cx-ctx { padding: 16px 28px 4px; border-left: 1px solid var(--cx-line); }
.crimepg .cx-ctx:first-child { border-left: 0; padding-left: 0; }
.crimepg .cx-ctx-k { margin: 0 0 8px; font: 600 0.75rem/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--cx-muted); }
.crimepg .cx-ctx-n { margin: 0; font: 700 clamp(2.5rem, 4vw, 3.5rem)/.95 var(--display); color: var(--cx-navy); font-variant-numeric: tabular-nums; }
.crimepg .cx-ctx-n span { font-size: .5em; font-weight: 600; margin-left: 3px; color: var(--cx-ink); }
.crimepg .cx-ctx-d { margin: 10px 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--cx-muted); max-width: 38ch; }
@media (max-width: 760px) {
  .crimepg .cx-ctx-row { grid-template-columns: 1fr; }
  .crimepg .cx-ctx { border-left: 0; padding: 16px 0 14px; }
  .crimepg .cx-ctx + .cx-ctx { border-top: 1px solid var(--cx-line); }
}
/* five-year trends: a quiet ruled link row, not a floating CTA card */
.crimepg .trends-cta.cx-trendlink { margin-top: clamp(40px, 5vw, 60px); background: none; border: 0; border-top: 2px solid var(--cx-ink); border-bottom: 1px solid var(--cx-line);
  border-radius: 0; box-shadow: none; padding: 22px 0 24px; color: var(--cx-ink); transition: border-color .2s var(--cx-ease); }
.crimepg .trends-cta.cx-trendlink:hover { transform: none; box-shadow: none; border-top-color: var(--cx-red); }
.crimepg .cx-trendlink h3 { color: var(--cx-navy); margin: 0 0 6px; }
.crimepg .cx-trendlink p { color: var(--cx-muted); }
.crimepg .cx-trendlink .trends-cta-go { background: none; padding: 0; border-radius: 0; color: var(--cx-red); font: 600 1rem var(--body); min-height: 44px; }
.crimepg .cx-trendlink:hover .trends-cta-go, .crimepg .cx-trendlink:focus-visible .trends-cta-go { background: none; color: var(--cx-ink); }

/* ---------- 03 incident log (paper, ruled ledger rows) ---------- */
.crimepg .cx-logband { position: relative; }
.crimepg .dash { grid-template-columns: minmax(0, 1fr) 280px; gap: 44px; }
.crimepg .log-controls { margin: 4px 0 12px; }
.crimepg .log-search input[type="search"] { height: 48px; border: 1px solid #a9b0b3; border-radius: 2px; background: #fff; font-size: 1rem; }
.crimepg .log-search .sug { border-radius: 2px; border-color: var(--cx-line); }
.crimepg .log-tools .seg { border: 1px solid #b9bfc0; border-radius: 2px; background: #fff; }
.crimepg .log-tools .seg button { min-height: 46px; padding: 0 16px; color: var(--cx-muted); }
.crimepg .log-tools .seg button + button { border-left-color: #c9cdcb; }
.crimepg .log-tools .seg button.on { background: var(--cx-navy); color: #fff; }
.crimepg .frange [data-range], .crimepg .fcat { border-radius: 2px; border: 1px solid #c4c9c7; background: #fff; color: var(--cx-ink); min-height: 40px; padding: 0 13px; font-size: 0.875rem; }
.crimepg .frange [data-range]:hover, .crimepg .fcat:hover { border-color: var(--cx-ink); }
.crimepg .frange [data-range].on, .crimepg .fcat.on { background: var(--cx-navy); border-color: var(--cx-navy); color: #fff; }
.crimepg .fcat b { color: var(--cx-muted); font-variant-numeric: tabular-nums; }
.crimepg .fcat.on b { color: #c9d5e3; }
.crimepg .frange-custom input[type="date"] { border-radius: 2px; border-color: #c4c9c7; min-height: 40px; }
.crimepg .factive { font-size: 0.875rem; color: var(--cx-muted); }
.crimepg .fclear { width: 28px; height: 28px; background: #e6e6df; }
.crimepg .feed-head { display: grid; grid-template-columns: 5.25rem 10px minmax(0, 1.05fr) minmax(0, 1fr) 28px; column-gap: 12px; padding: 0 4px 8px 2px; margin-top: 6px;
  border-bottom: 2px solid var(--cx-ink); font: 600 0.75rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--cx-muted); }
.crimepg .feed-head span:nth-child(2) { grid-column: 3; }
.crimepg .feed-panel { background: transparent; border: 0; border-radius: 0; padding: 0; max-height: 760px; border-bottom: 1px solid var(--cx-ink);
  scrollbar-width: thin; scrollbar-color: #b9bfc0 transparent; }
.crimepg .feed-panel:focus-visible { outline: 2px solid var(--cx-red); outline-offset: 3px; }
.crimepg .feed-day { position: sticky; top: 0; z-index: 4; display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0; padding: 18px 2px 8px; background: var(--cx-paper); border-bottom: 1px solid var(--cx-ink); pointer-events: none; }
.crimepg .feed-group:first-child .feed-day { padding-top: 12px; margin-top: 0; }
.crimepg .feed-day span { display: inline; background: none; box-shadow: none; padding: 0; border-radius: 0; }
.crimepg .feed-day .fd-d { font: 600 0.9375rem/1.3 var(--body); color: var(--cx-navy); }
.crimepg .feed-day .fd-n { font-size: 0.8125rem; font-weight: 600; color: var(--cx-muted); font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }
.crimepg .call { background: transparent; border: 0; border-bottom: 1px solid var(--cx-line); border-radius: 0; margin: 0; overflow: visible; box-shadow: none; }
.crimepg .call:hover { box-shadow: none; background: rgba(18,38,54,.035); }
.crimepg .call.open { background: #fff; box-shadow: none; border-bottom-color: var(--cx-ink); }
.crimepg .call-main { display: grid; grid-template-columns: 5.25rem 10px minmax(0, 1.05fr) minmax(0, 1fr) 28px; column-gap: 12px; align-items: center;
  min-height: 48px; padding: 0 4px 0 2px; }
.crimepg .call-main:focus-visible { outline-offset: -2px; }
.crimepg .call-time { margin: 0; font: 600 1rem/1 var(--display); letter-spacing: .02em; color: var(--cx-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crimepg .call-dot { width: 8px; height: 8px; border-radius: 50%; }
.crimepg .call-type { font-weight: 600; font-size: 0.9375rem; color: var(--cx-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.crimepg .call-loc { font-size: 0.9062rem; color: #43505c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.crimepg .call-loc-na { font-style: italic; color: var(--cx-muted); }
.crimepg .call-chev { width: 28px; height: 28px; position: relative; }
.crimepg .call-chev::after { border-color: #7d8790; width: 7px; height: 7px; }
.crimepg .call-detail { padding: 0 12px 16px calc(5.25rem + 36px); }
.crimepg .cd-grid { grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; gap: 10px 32px; border-top: 0; padding-top: 4px; }
.crimepg .cd-wide { grid-column: auto; }
.crimepg .cd-k { color: var(--cx-muted); font-size: 0.6875rem; }
.crimepg .cd-actions .btn { border-radius: 2px; }
.crimepg .cd-actions .btn-ghost { color: var(--cx-navy); border-color: #a9b0b3; }
.crimepg .cd-actions .btn-ghost:hover { background: #ecebe5; color: var(--cx-navy); }
.crimepg .load-more { border-radius: 2px; margin: 16px auto 18px; }
.crimepg .feed-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-top: 10px; }
.crimepg .feed-foot .hint { margin: 0; color: var(--cx-muted); font-size: 0.875rem; }
.crimepg .cx-textbtn { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 2px; background: none; border: 0; cursor: pointer;
  font: 600 0.875rem var(--body); color: var(--cx-navy); text-decoration: underline; text-decoration-color: #a9b0b3; text-underline-offset: 4px; }
.crimepg .cx-textbtn:hover { color: var(--cx-red); text-decoration-color: currentColor; }
.crimepg .cx-footnote { margin: 4px 0 0; font-size: 0.8125rem; color: var(--cx-muted); }
/* side panels: ruled lists, not floating cards */
.crimepg .dash-side { gap: 34px; top: calc(var(--nav-h) + 20px); }
.crimepg .dpanel { background: none; border: 0; border-top: 2px solid var(--cx-ink); border-radius: 0; box-shadow: none; padding: 12px 0 0; }
.crimepg .dpanel-t { font: 600 1.0625rem/1.3 var(--body); color: var(--cx-navy); margin-bottom: 6px; }
.crimepg .dp-list { gap: 0; }
.crimepg .dp-row { padding: 9px 2px; border-radius: 0; border-bottom: 1px solid var(--cx-line); }
.crimepg .dp-row:hover { background: rgba(18,38,54,.04); }
.crimepg .dp-label { color: var(--cx-ink); font-size: 0.875rem; }
.crimepg .dp-count { color: var(--cx-ink); font: 700 0.9375rem/1 var(--display); }
.crimepg .dp-track { height: 4px; border-radius: 0; background: rgba(18,38,54,.08); }
.crimepg .dp-fill { border-radius: 0; }
.crimepg #dp-streets { counter-reset: hs; }
.crimepg #dp-streets .dp-row { counter-increment: hs; position: relative; padding-left: 30px; }
.crimepg #dp-streets .dp-row::before { content: counter(hs, decimal-leading-zero); position: absolute; left: 0; top: 9px;
  font: 700 0.9375rem/1 var(--display); color: var(--cx-muted); font-variant-numeric: tabular-nums; }
.crimepg .notice { margin-top: 44px; padding: 16px 0 0; background: none; border: 0; border-top: 1px solid var(--cx-line); border-radius: 0;
  font-size: 0.875rem; line-height: 1.6; color: var(--cx-muted); max-width: 96ch; }
.crimepg .notice strong { color: var(--cx-ink); }
.crimepg .cx-logjump { position: fixed; z-index: 60; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 1px solid rgba(217,182,117,.5); border-radius: 2px;
  background: var(--cx-navy); color: #fff; font: 600 0.9375rem var(--body); white-space: nowrap; box-shadow: 0 16px 36px -14px rgba(9,23,37,.75); cursor: pointer; }
.crimepg .cx-logjump svg { color: var(--cx-gold); }
.crimepg .cx-logjump[hidden] { display: none; }
@media (max-width: 980px) {
  .crimepg .dash { grid-template-columns: 1fr; gap: 28px; }
  .crimepg .dash-side { position: static; gap: 28px; }
  .crimepg .feed-panel { max-height: none; overflow: visible; border-bottom: 0; }
  .crimepg .feed-day { top: calc(var(--nav-h) - 1px); }
}
@media (max-width: 640px) {
  .crimepg .cx-paper { padding: 52px 16px; }
  .crimepg .feed-head { display: none; }
  .crimepg .log-tools { width: auto; }
  .crimepg .fcats { margin-right: -16px; padding-right: 16px; scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  .crimepg .fcat { scroll-snap-align: start; min-height: 44px; }
  .crimepg .frange [data-range] { min-height: 44px; }
  .crimepg .call-main { grid-template-columns: 4.4rem 8px minmax(0, 1fr) 22px; grid-template-areas: "time dot type chev" "time dot loc chev";
    column-gap: 10px; row-gap: 2px; padding: 9px 0; min-height: 56px; align-items: center; }
  .crimepg .call-time { grid-area: time; align-self: start; padding-top: 2px; font-size: 0.9375rem; }
  .crimepg .call-dot { grid-area: dot; align-self: start; margin-top: 6px; }
  .crimepg .call-type { grid-area: type; }
  .crimepg .call-loc { grid-area: loc; font-size: 0.875rem; }
  .crimepg .call-chev { grid-area: chev; }
  .crimepg .call-detail { padding: 0 0 16px calc(4.4rem + 18px); }
  .crimepg .cd-grid { grid-template-columns: 1fr 1fr; gap: 10px 18px; }
  .crimepg .cd-wide { grid-column: 1 / -1; }
}
@media (max-width: 380px) { .crimepg .call-detail { padding-left: 0; } }

/* ---------- 04 year in review (navy ledger) ---------- */
.crimepg .cx-yir { background: var(--cx-navy); padding: clamp(60px, 8vw, 100px) 24px; }
.crimepg .cx-yir-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.28); }
.crimepg .cx-yir-nums .stat { padding: 20px 24px 4px; border-left: 1px solid var(--cx-hair); }
.crimepg .cx-yir-nums .stat:first-child { border-left: 0; padding-left: 0; }
.crimepg .cx-yir-nums .stat .n { font-size: clamp(2.75rem, 4.8vw, 4.25rem); line-height: .92; }
.crimepg .cx-yir-nums .stat .n em { color: var(--cx-gold); }
.crimepg .cx-yir-nums .stat .l { color: var(--cx-on-navy-2); font: 600 0.75rem/1.3 var(--body); letter-spacing: .06em; margin-top: 12px; }
.crimepg .cx-yir-nums .stat .s { color: var(--cx-on-navy-2); font-size: 0.875rem; }
.crimepg .cx-yir-ledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: clamp(40px, 5vw, 60px); }
.crimepg .cx-yir-ledger .item { border-top: 2px solid rgba(255,255,255,.85); padding-top: 14px; }
.crimepg .cx-yir-ledger h3 { margin: 0 0 8px; color: #fff; font: 600 1.25rem/1.3 var(--body); }
.crimepg .cx-yir-ledger p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--cx-on-navy-2); }
.crimepg .cx-yir .btn-row { margin-top: clamp(36px, 4vw, 48px); }
.crimepg .cx-yir .btn { border-radius: 2px; }
@media (max-width: 1099px) { .crimepg .cx-yir-ledger { grid-template-columns: 1fr 1fr; row-gap: 36px; } }
@media (max-width: 760px) {
  .crimepg .cx-yir { padding: 56px 16px; }
  .crimepg .cx-yir-nums { grid-template-columns: 1fr 1fr; }
  .crimepg .cx-yir-nums .stat { padding: 16px 0 14px 16px; border-top: 1px solid var(--cx-hair); }
  .crimepg .cx-yir-nums .stat:nth-child(odd) { border-left: 0; padding-left: 0; padding-right: 12px; }
  .crimepg .cx-yir-nums .stat:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 600px) { .crimepg .cx-yir-ledger { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .crimepg .map-toolbar.watch-open .map-watch { animation: none; }
}
@media print {
  .crimepg .cx-mast { background: #fff !important; color: #111 !important; }
  .crimepg .cx-mast h1, .crimepg .cx-kpis .dt-n { color: #111 !important; }
  .crimepg .cx-trends, .crimepg .cx-yir, .crimepg .cx-logjump, .crimepg .feed-foot .cx-textbtn { display: none !important; }
}

/* legend = one-tap category isolate */
.crimepg .map-legend { align-items: center; gap: 4px 6px; }
.crimepg .map-legend button.lg { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 10px; margin: 0;
  background: none; border: 1px solid transparent; border-radius: 2px; color: #c4cfdb; font: 500 0.8125rem var(--body); cursor: pointer;
  transition: opacity .2s var(--cx-ease), border-color .2s var(--cx-ease); }
.crimepg .map-legend button.lg:first-child { margin-left: -10px; }
.crimepg .map-legend button.lg:hover { border-color: rgba(255,255,255,.22); color: #fff; }
.crimepg .map-legend button.lg.on { border-color: rgba(217,182,117,.7); color: #fff; background: rgba(255,255,255,.05); }
.crimepg .map-legend.has-pick button.lg:not(.on) { opacity: .5; }
.crimepg .map-legend .lg-note { margin-left: auto; }
@media (pointer: coarse) { .crimepg .map-legend button.lg { min-height: 44px; } }
@media (max-width: 768px) {
  .crimepg .map-shell .map-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 4px; padding: 6px 12px 8px; }
  .crimepg .map-legend button.lg, .crimepg .map-legend button.lg:first-child { margin: 0; padding: 0 8px; justify-content: flex-start; }
  .crimepg .map-legend .lg-note { grid-column: 1 / -1; margin: 2px 0 0 8px; font-size: 0.75rem; color: #a3b1c2; }
}
/* date range reads as one "when" control on desktop; category chips stay "what" */
@media (min-width: 641px) {
  .crimepg .frange { gap: 0; }
  .crimepg .frange [data-range] { border-radius: 0; margin-left: -1px; }
  .crimepg .frange [data-range]:first-child { border-radius: 2px 0 0 2px; margin-left: 0; }
  .crimepg .frange [data-range="custom"] { border-radius: 0 2px 2px 0; }
  .crimepg .frange [data-range]:hover { position: relative; z-index: 1; }
  .crimepg .frange-custom { margin-left: 12px; }
  .crimepg .fcats { gap: 6px; }
  .crimepg .fcat { padding: 0 10px; gap: 7px; font-size: 0.8438rem; }
}
/* narrowest phones (≤340px): tighten the shared nav so it never runs past the edge (sitewide) */
@media (max-width: 340px) {
  .nav .wrap { gap: 6px; padding: 0 10px; }
  .brand { gap: 7px; }
  .brand img { width: 32px; }
  .brand .t { font-size: 0.875rem; letter-spacing: .03em; }
  .nav-util { gap: 5px; }
  .langtog button { padding-left: 8px; padding-right: 8px; }
  .nav-toggle { padding-left: 10px; padding-right: 10px; }
}
.crimepg .cx-kpis .ttag { white-space: normal; display: inline-block; line-height: 1.35; }
/* tablets: the search gets its own full-width row so it never collapses to a sliver */
@media (min-width: 769px) and (max-width: 1023px) {
  .crimepg .map-toolbar { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "search search search" "days cat watch" "adv adv adv"; }
  .crimepg #map-catwrap select { width: 100%; }
}
/* phones: keep the answer (deck + KPIs) but get to the map toolbar sooner */
@media (max-width: 640px) {
  .crimepg .cx-kpis .dt-sparkwrap { display: none; }
  .crimepg .cx-kpis .dtile { padding-top: 12px; padding-bottom: 14px; }
  .crimepg .cx-kpis .dt-n { font-size: clamp(2.25rem, 10.5vw, 2.875rem); }
  .crimepg .cx-kpis .dt-n.dt-type { font-size: 1.5rem; }
  .crimepg .cx-mapband .cx-shead-note { display: none; }
  .crimepg .cx-mapband .cx-shead { margin-bottom: 14px; }
  .crimepg .cx-mast h1 { font-size: 2.375rem; }
  .crimepg .cx-deck.pulse-line { font-size: 1.0625rem; }
}
/* desktop feed viewport: a soft fade at the bottom edge says "more below" */
@media (min-width: 981px) {
  .crimepg .feed-panel::after { content: ""; position: sticky; bottom: 0; display: block; height: 32px; margin-top: -32px; pointer-events: none;
    background: linear-gradient(180deg, rgba(246,245,241,0), var(--cx-paper)); z-index: 5; }
}
/* data-feed failure: the notice lands in the masthead dateline — keep it legible on navy */
.crimepg .cx-fresh:has(.notice) { flex: 1 1 100%; }
.crimepg .cx-mast .notice.error { margin: 0; padding: 10px 14px; max-width: none; border: 1px solid rgba(240,113,104,.55); border-radius: 4px;
  background: rgba(180,35,43,.18); color: #ffe1dc; font-size: 0.875rem; }
/* empty-state reset sits on paper here, not navy — the ghost (white) button vanished */
.crimepg #log-reset { margin-left: 8px; min-height: 40px; border-radius: 2px; border-color: #a9b0b3; color: var(--cx-navy); background: #fff; }
.crimepg #log-reset:hover { border-color: var(--cx-ink); background: #ecebe5; }
.crimepg .map-search .sug-empty { margin: 0; padding: 12px 14px; font-size: 0.875rem; line-height: 1.45; color: var(--cx-muted); }
.crimepg .block-report .br-log { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 0; background: none; border: 0;
  font: 600 0.9375rem var(--body); color: var(--cx-red); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.crimepg .block-report .br-log:hover { text-decoration: underline; text-underline-offset: 4px; }
.crimepg .block-report p { margin-bottom: 8px; font-size: 0.9375rem; line-height: 1.5; }
.crimepg .block-report .br-log { margin: 2px 0 0; }
.crimepg .block-report .br-actions .btn { border-radius: 2px; font-size: 0.8125rem; padding: 10px 14px; }


/* ==========================================================================
   Oct 2026 polish layer: shared page components (DESIGN-VOICE.md)
   Page head + breadcrumb, ruled lists, fact rows, tables, steps, programs.
   Flat surfaces, 1px rules, one radius scale, no decorative motion.
   ========================================================================== */

/* inner-page head: white band, breadcrumb, sentence-case H1, one lede */
.pagehead { background: #fff; border-bottom: 1px solid var(--line); padding: 12px 24px clamp(36px, 5vw, 56px); }
.pagehead .wrap { max-width: var(--maxw); margin: 0 auto; }
.pagehead h1 { margin: 14px 0 14px; max-width: 30ch; }
.pagehead .lede { margin-bottom: 0; }
.pagehead .btn-row { margin-top: 24px; }
.pagehead .ph-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: 14px; }
.pagehead .ph-grid h1 { margin-top: 0; }
.ph-photo { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); aspect-ratio: 4 / 3; }
.ph-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .pagehead .ph-grid { grid-template-columns: 1fr; gap: 24px; }
  .ph-photo { aspect-ratio: 16 / 9; }
}

/* breadcrumb */
.crumbs { font-size: 0.9375rem; line-height: 1.4; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: #8a949c; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--muted); }

/* generic ruled columns (replaces card grids for short lists) */
.ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 3.5vw, 48px); }
.ledger.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
.ledger > * { border-top: 2px solid var(--ink); padding-top: 14px; }
.ledger h3 { font-size: 1.1875rem; margin: 0 0 6px; }
.ledger p { color: var(--muted); margin: 0; font-size: 0.9688rem; }
.ledger p + p, .ledger p + .go, .ledger p + .form-dl { margin-top: 10px; }
.ledger .go { display: inline-block; margin-top: 10px; font-weight: 600; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) { .ledger, .ledger.two { grid-template-columns: 1fr; gap: 28px; } }

/* fact rows: label / value / note (pay and benefits, contact details) */
.facts { margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.facts .frow { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 9rem) minmax(0, 1fr); gap: 4px 28px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.facts .frow > * { margin: 0; }
.facts .frow h3, .facts dt { font-size: 1.0625rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
.facts .v { font-family: var(--display); font-weight: 700; font-size: 1.625rem; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.facts .v em { font-style: normal; }
.facts .frow p:not(.v) { color: var(--muted); }
.facts.two .frow { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); }
.facts dd { margin: 0; }
@media (max-width: 720px) {
  .facts .frow, .facts.two .frow { grid-template-columns: 1fr; gap: 2px; padding: 14px 0; }
  .facts .v { font-size: 1.5rem; }
}

/* data table (records services, etc.) */
.dtable { width: 100%; border-collapse: collapse; font-size: 0.9688rem; line-height: 1.5; }
.dtable th, .dtable td { text-align: left; vertical-align: top; padding: 14px 20px 14px 0; border-bottom: 1px solid var(--line); }
.dtable td:last-child, .dtable th:last-child { padding-right: 0; }
.dtable thead th { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding-top: 0; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.dtable tbody th { font-weight: 600; color: var(--ink); width: 22%; font-size: 1.0625rem; }
.dtable td { color: var(--ink); }
.dtable .num { text-align: right; font-variant-numeric: tabular-nums; }
.dtable .form-dl, .dtable .go { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; font-weight: 600; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.dtable .form-dl svg { width: 15px; height: 15px; flex: none; }
@media (max-width: 760px) {
  .dtable, .dtable tbody, .dtable tr, .dtable th, .dtable td { display: block; width: auto; }
  .dtable thead { display: none; }
  .dtable tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .dtable tbody tr:first-child { border-top: 2px solid var(--ink); }
  .dtable th, .dtable td { border: 0; padding: 2px 0; }
  .dtable td + td { margin-top: 6px; }
}

/* numbered steps */
.steps { list-style: none; counter-reset: st; margin: 0; padding: 0; border-top: 2px solid var(--ink); max-width: 820px; }
.steps > li { counter-increment: st; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.steps > li::before { content: counter(st); font-family: var(--display); font-weight: 700; font-size: 1.625rem; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.steps h3 { font-size: 1.125rem; margin: 0 0 2px; }
.steps p { margin: 0; color: var(--muted); }

/* contact / tip methods: label, the number as the largest text, one helper line */
.methods { border-top: 2px solid var(--ink); }
.method { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 17rem) minmax(0, 1fr); gap: 6px 32px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.method > * { margin: 0; }
.method h3 { font-size: 1.125rem; }
.method .big { font-family: var(--display); font-weight: 700; font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.method .big a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.method .big a:hover { color: var(--brand); }
.method p:not(.big) { color: var(--muted); }
.method p .go { display: inline-block; margin-top: 6px; font-weight: 600; color: var(--brand); }
@media (max-width: 860px) { .method { grid-template-columns: 1fr; gap: 4px; } }

/* contact details */
.contact-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 3.5vw, 48px); }
.contact-cols h3 { font-size: 1.25rem; margin: 0; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.contact-cols dl { margin: 0; }
.contact-cols dl > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.contact-cols dt { font-size: 0.9375rem; color: var(--muted); font-weight: 500; }
.contact-cols dd { margin: 2px 0 0; font-size: 1.0625rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.contact-cols dd.big { font-family: var(--display); font-weight: 700; font-size: 1.75rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.contact-cols dd a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.contact-cols dd a:hover { color: var(--brand); }
@media (max-width: 900px) { .contact-cols { grid-template-columns: 1fr; } }
.mapframe { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.mapframe iframe { display: block; border: 0; width: 100%; height: 440px; }
.mapframe-foot { margin: 12px 0 0; font-size: 0.9375rem; }

/* community programs: one ruled list, photo at the side where one exists */
.proglist { border-top: 2px solid var(--ink); }
.prog { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px 40px; padding: 24px 0; border-bottom: 1px solid var(--line); align-items: start; }
.prog > div { max-width: 66ch; }
.prog h3 { font-size: 1.25rem; margin: 0 0 4px; }
.prog .when { font-size: 0.9375rem; color: var(--muted); margin: 0 0 8px; }
.prog p { margin: 0; }
.prog figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); aspect-ratio: 3 / 2; }
.prog figure img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .prog { grid-template-columns: 1fr; } .prog figure { max-width: 420px; } }
.facts-line { font-size: 1rem; font-weight: 600; color: var(--ink); margin: 0 0 10px; }

/* two-up notices (report: when to call 911 vs report online) */
.calltable { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .calltable { grid-template-columns: 1fr; } }
.calltable .cell { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--ink); border-radius: 0; padding: 18px 22px; }
.calltable .cell.emerg { background: #fff; border-color: var(--line); border-left-color: var(--brand); }
.calltable .cell.online { background: #fff; border-color: var(--line); border-left-color: var(--ink); }
.calltable .cell h3 { display: block; font-size: 1.1875rem; margin: 0 0 6px; }
.calltable .cell ul { margin: 8px 0 0; padding-left: 20px; color: var(--ink); font-size: 0.9688rem; }
.calltable .cell li + li { margin-top: 4px; }

/* plain lists */
.reqlist { list-style: disc; padding-left: 1.25rem; margin: 0; display: block; }
.reqlist li { display: list-item; margin: 0 0 8px; font-size: 1rem; }
.reqlist li::before { content: none; }
.reqlist li::marker { color: var(--muted); }

/* jump links (FAQ) */
.jump { margin: 0 0 8px; padding: 10px 0 6px; border-bottom: 1px solid var(--line); }
.jump h2 { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0; }
.jump ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; padding: 0; }
.jump a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--blue); text-underline-offset: 3px; }

/* long-form text pages */
.prose > * { max-width: 68ch; }
.prose h2 { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); margin: 44px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose ul { margin: 0 0 1em; }

/* figures */
.fig { margin: 28px 0 0; }
.fig img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.fig figcaption { font-size: 0.875rem; color: var(--muted); margin-top: 8px; }

/* home: mission split photo + quick-action spacing */
.home-mission .photo { aspect-ratio: 4 / 5; max-height: 560px; }
.home-mission .photo img { height: 100%; }
.leader { border-radius: var(--radius); }
.leader .pad { position: static; background: none; }
.leader h3 { color: var(--ink); }
.cta-band .eyebrow { margin-bottom: 8px; }

/* short system pages (404, thanks) */
.msgpage { padding: clamp(48px, 8vw, 96px) 24px; }
.msgpage .wrap { max-width: 720px; margin: 0 auto; }
.msgpage h1 { margin: 6px 0 14px; }
.msgpage .lede { margin-bottom: 0; }
.msgpage .label { font-size: 0.9375rem; font-weight: 600; color: var(--muted); margin: 0; }
.msgpage .fine { margin-top: 24px; color: var(--muted); }

/* layout helpers used by the rebuilt pages */
.split.top { align-items: start; }
.form-grid .fgrid { gap: 16px; }
.after-calltable { margin: 16px 0 0; font-size: 0.9375rem; }
.newslist + .notice { margin-top: 40px; }
.method .big.small { font-family: var(--body); font-weight: 600; font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); line-height: 1.35; }
.faqwrap > * { max-width: 880px; }
.faqwrap .notice { margin-top: 48px; }
.prose .notice { margin-top: 32px; }
.leaders { max-width: 820px; }
.offline { min-height: 100vh; background: var(--paper); }
.offline img { margin-bottom: 20px; }
.offline .methods { margin-top: 28px; }
.offline .method { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); }
.home-mission .split { align-items: center; }
.facts .v:empty { min-height: 1px; }
@media (max-width: 720px) { .facts .v:empty { display: none; } }

/* nav: the in-menu "Submit a Tip" link only appears inside the collapsed (hamburger) menu */
.nav-links a.nav-mob-tip { display: none; }
@media (max-width: 1240px) { .nav-links a.nav-mob-tip { display: flex; justify-content: center; } }

/* one content edge: chrome, hero, bands and footer line up with section content */
.ribbon .wrap, .nav .wrap, .hero .wrap, .band .wrap, .div-intro, .div-panel .inner, .footer .top, .alertbar .wrap { max-width: calc(var(--maxw) + 48px); }
.statbar .inner { max-width: calc(var(--maxw) + 48px); }

/* photo hero: a touch more overlay on phones, where text crosses the busiest part of the photo */
@media (max-width: 640px) { .hero-bg::after { background: rgba(18, 38, 54, 0.62); } .hero .wrap { padding: 96px 24px 48px; } }

/* records table: keep the link column readable */
.dtable td:last-child { width: 15rem; }
@media (max-width: 760px) { .dtable tbody th, .dtable td:last-child { width: auto; } }
.cta-band .lede { margin: 0 auto 4px; }
.nb-method { margin-top: 18px; max-width: 90ch; }

/* ============================================================
   Oct 9 red-team refresh (draft): hero, key figures, photo band,
   news rail, ribbon records line, compact scam banner, news page
   ============================================================ */

/* no orphan words in headings, ledes or short copy */
p, li, figcaption { text-wrap: pretty; }
.hero h1 { max-width: 20ch; text-wrap: balance; }
.hero .lede { max-width: 46rem; }

/* hero photo: the cruiser rides above the text block at desktop widths, and the
   overlay is weighted left so type never sits on the light car */
.hero-bg img { object-position: center 100%; }
/* wider or shorter screens crop more of the photo's height: pull the frame up so the car's roof stays in */
@media (min-width: 641px) and (min-aspect-ratio: 17/10) { .hero-bg img { object-position: center 80%; } }
@media (min-width: 1600px) { .hero-bg img { object-position: center 62%; } }
@media (min-width: 2200px) { .hero-bg img { object-position: center 50%; } }
.hero-bg::after { background: linear-gradient(90deg, rgba(14, 30, 44, 0.8) 0%, rgba(14, 30, 44, 0.74) 40%, rgba(14, 30, 44, 0.4) 68%, rgba(14, 30, 44, 0.3) 100%); }
/* phones: the photo is cropped from the sides, so pull the frame left to keep the
   car in view; one darker flat overlay holds contrast where the text crosses it */
@media (max-width: 640px) {
  .hero-bg img { object-position: 14% 50%; }
  .hero-bg::after { background: rgba(14, 30, 44, 0.68); }
}

/* key figures: four across, two by two on phones */
.statbar .inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 820px) {
  .statbar .inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statbar .cell:nth-child(3) { border-left: 0; padding-left: 0; }
  .statbar .cell:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* photo band between sections: the photograph alone, with a plain caption */
.photo-band { position: relative; margin: 0; background: var(--navy-900); }
.photo-band img { display: block; width: 100%; height: clamp(220px, 30vw, 440px); object-fit: cover; object-position: center 45%; }
.photo-band figcaption { position: absolute; left: 0; right: 0; bottom: 0; }
.photo-band figcaption .wrap { display: block; max-width: calc(var(--maxw) + 48px); margin: 0 auto; padding: 0 24px; }
.photo-band .cap { display: inline-block; background: var(--navy-900); color: #e3e9f0; font-size: 0.8125rem; line-height: 1.4; padding: 6px 10px; }

/* news rail: the scam card plus the three newest posts */
.wire-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .wire-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .wire-rail { grid-template-columns: 1fr; } }
.wire-card h3 { font-size: 1.0625rem; line-height: 1.4; margin: 0; }
.wire-card h3 a { display: block; min-height: 44px; color: var(--ink); text-decoration: underline; text-decoration-color: #9aa3ab; text-underline-offset: 3px; }
.wire-card h3 a:hover { color: var(--brand); text-decoration-color: currentColor; }
.wire-card .foot { align-items: center; }
.wire-card .go { display: inline-flex; align-items: center; gap: 0.3em; min-height: 44px; }
.wire-card .when { font-variant-numeric: tabular-nums; }

/* phone numbers never break across lines */
a[href^="tel:"] { white-space: nowrap; }

/* ribbon: records-office status with the records line beside it; label + number never split */
.rib-i { white-space: nowrap; }
.rib-office { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; }
.rib-rec { font-size: 0.8125rem; }
.hours-status:not([hidden]) + .rib-rec::before { content: "\00B7"; color: #435067; margin-right: 8px; }
/* phones: three short centered lines (911 + non-emergency / tip + records / office status),
   no separator dots left hanging at a line end */
@media (max-width: 620px) {
  .ribbon .wrap { padding: 6px 16px; gap: 1px 12px; line-height: 1.45; }
  .rib-emerg, .rib-office { display: contents; }
  .rib-sep, .hours-status:not([hidden]) + .rib-rec::before { display: none; }
  .rib-911 { order: 1; } .rib-ne { order: 2; } .rib-tip { order: 3; } .rib-rec { order: 4; font-size: inherit; }
  .ribbon .hours-status { order: 5; flex-basis: 100%; text-align: center; }
}

/* scam banner: same look on desktop; on phones a short line, at most two rows */
.alertbar .al-msg { flex: 1; display: flex; align-items: center; gap: 14px; margin: 0; }
.alertbar .al-short { display: none; }
@media (max-width: 480px) {
  .alertbar { font-size: 0.875rem; }
  .alertbar .wrap { padding: 2px 0 2px 16px; gap: 4px; }
  .alertbar .al-msg { display: block; line-height: 1.35; }
  .alertbar .tag { display: inline-block; margin-right: 6px; padding: 1px 6px; font-size: 0.6875rem; vertical-align: 1px; }
  .alertbar .al-full { display: none; }
  .alertbar .al-short { display: inline; }
}
@media (max-width: 480px) { .alertbar.no-short .al-full { display: inline; } }

/* news page: one source link per item, a full 44px tap target */
.newsitem .src { margin: 6px 0 0; }
.newsitem .src a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 600; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.newsitem .src a:hover { color: var(--brand-dark); }
#official-sources { scroll-margin-top: 96px; }

/* ==========================================================================
   Crime map on phones (under 600px): block summary bottom sheet
   On a phone the MapLibre popup sat inside the map frame, so it was cut off and
   its report button fell below the fold. Under 600px crime-data.js renders the
   same summary into #block-sheet (appended to <body>, outside the map frame),
   pinned to the bottom of the screen with its actions in a footer that stays
   put while the summary scrolls. Wider screens keep the popup and never show it.
   ========================================================================== */
.block-sheet { display: none; }
@media (max-width: 599px) {
  .block-sheet:not([hidden]) {
    position: fixed; z-index: 95; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; max-height: min(60vh, 460px);
    background: var(--paper); color: var(--ink); font-family: var(--body);
    border-top: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 -16px 40px -16px rgba(7, 17, 29, 0.6);
    padding-bottom: env(safe-area-inset-bottom);
    animation: bsUp 0.22s cubic-bezier(.2, .8, .2, 1);
  }
  .block-sheet .bs-head { display: flex; align-items: flex-start; gap: 4px; padding: 12px 4px 0 16px; }
  .block-sheet .bs-title { flex: 1 1 auto; min-width: 0; margin: 10px 0 2px; font: 700 1.25rem/1.2 var(--display);
    letter-spacing: 0.01em; color: var(--navy-900); overflow-wrap: anywhere; }
  /* the title takes focus only so screen readers land on the answer; it is not a control */
  .block-sheet .bs-title:focus { outline: none; }
  .block-sheet .bs-x { flex: none; min-width: 44px; min-height: 44px; background: none; border: 0; padding: 0;
    color: var(--muted); font-size: 1.75rem; line-height: 1; cursor: pointer; }
  .block-sheet .bs-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 10px; }
  .block-sheet .pm { display: block; margin-top: 3px; font-size: 0.9375rem; line-height: 1.45; color: var(--muted); }
  .block-sheet .pm:first-child { margin: 0 0 4px; font-weight: 600; font-size: 1.0625rem; color: var(--ink); }
  .block-sheet .pm.dim { margin-top: 8px; font-size: 0.8125rem; color: #5d6873; }
  .block-sheet .pm.dim + .pm.dim { margin-top: 2px; }
  .block-sheet .tr { font-weight: 700; color: #51606f; }
  .block-sheet .tr.up { color: #6b6353; }
  .block-sheet .tr.up.sev { color: #a5281f; }
  .block-sheet .tr.dn { color: #1f6b45; }
  .block-sheet .bs-actions { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
    padding: 12px 16px 14px; border-top: 1px solid var(--line); background: var(--paper); }
  .block-sheet .bs-actions .btn { min-height: 44px; padding: 10px 18px; border-radius: var(--radius-ctl); font-size: 0.9375rem; }
  .block-sheet .bs-link { min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; text-align: left;
    font: 600 0.9375rem var(--body); color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
  /* while the sheet is up, other bottom-anchored chrome steps aside */
  body.bs-open .crimepg .cx-logjump, body.bs-open .ask-wrap,
  body.bs-open .mapbox-wrap .map-hud:not([hidden]) { display: none; }
  /* the block report opened from the sheet covers the map; the busiest-block strip
     showed through its paper at the bottom edge */
  .mapbox-wrap:has(> .block-report:not([hidden])) > .map-hud { display: none; }
}
/* ring at the selected block's base (MapLibre marker, laid flat on the ground) */
.bs-mark { width: 46px; height: 46px; border-radius: 50%; pointer-events: none;
  border: 3px solid #fff; box-shadow: 0 0 0 3px var(--brand), 0 0 18px rgba(0, 0, 0, 0.55); background: rgba(180, 35, 43, 0.28); }
@media (max-width: 599px) and (prefers-reduced-motion: reduce) { .block-sheet:not([hidden]) { animation: none; } }
@keyframes bsUp { from { transform: translateY(100%); } to { transform: none; } }

/* ==========================================================================
   Homepage color blend (Oct 10): Brennan found the de-AI'd homepage "a little too white".
   Brings back the client-approved homepage's navy bands (key figures, 2025 numbers,
   divisions, department news) and swaps stark white for warm paper. Flat fills only,
   no gradients or shadows; scoped to the homepage so no other page changes.
   ========================================================================== */
body:has(.home-mission) { --warm: #f3eee4; --warm-2: #e8e0cf; --warm-white: #faf7f1; --on-navy: #c9d5e3; --on-navy-2: #9fb0c4; --on-navy-link: #f2a99f; background: var(--warm); }

/* key figures: a navy band that carries the hero into the page */
body:has(.home-mission) .statbar { background: var(--navy-900); border-bottom: 0; }
body:has(.home-mission) .statbar .cell { border-left-color: var(--navy-line); }
body:has(.home-mission) .statbar .cell .n { color: #fff; }
body:has(.home-mission) .statbar .cell .l { color: var(--on-navy); }

/* light sections: warm paper and warm white instead of #fff / pale gray */
body:has(.home-mission) section[aria-labelledby="quick-h"],
body:has(.home-mission) section[aria-labelledby="community-photos-h"] { background: var(--warm); }
body:has(.home-mission) .tintband { background: var(--warm-white); border-color: #e2dccf; }
body:has(.home-mission) .involve-band { background: var(--warm-2); border-top: 0; }
body:has(.home-mission) .involve-band .involve-ledger .item,
body:has(.home-mission) .action-ledger > * { border-top-color: var(--ink); }

/* navy bands: 2025 numbers, divisions intro (flows into the photo panels), department news */
body:has(.home-mission) .bignums,
body:has(.home-mission) .wire { background: var(--navy-800); color: var(--on-navy); }
body:has(.home-mission) .divisions { background: var(--navy-900); }
body:has(.home-mission) :is(.bignums, .wire, .div-intro) :is(h2, h3) { color: #fff; }
body:has(.home-mission) :is(.bignums, .wire, .div-intro) :is(.lede, .fact, p) { color: var(--on-navy); }
body:has(.home-mission) :is(.bignums, .wire, .div-intro) .kick .lab { color: var(--on-navy); }
body:has(.home-mission) :is(.bignums, .wire, .div-intro) .kick .num { color: var(--on-navy-link); }
body:has(.home-mission) :is(.bignums, .wire, .div-intro) .shead { border-top-color: var(--navy-line); }
body:has(.home-mission) .bignums .bignum { border-top-color: rgba(255, 255, 255, 0.35); }
body:has(.home-mission) .bignums .bignum .n { color: #fff; }
body:has(.home-mission) .bignums .bignum .l { color: #fff; }
body:has(.home-mission) .bignums .bignum .s { color: var(--on-navy-2); }
/* news cards stay white on navy so the posts read as posts */
body:has(.home-mission) .wire .wire-card,
body:has(.home-mission) .wire .wire-card p { color: var(--ink); }
body:has(.home-mission) .wire .wire-card h3 a { color: var(--ink); }
body:has(.home-mission) .wire .wire-social .pill:not(.primary) { background: transparent; border-color: rgba(255, 255, 255, 0.7); color: #fff; }
body:has(.home-mission) .wire .wire-social .pill:not(.primary) svg { fill: currentColor; }