/* ==========================================================================
   Flock Truth stylesheet
   Organized as: tokens → reset → layout → header/footer → components → pages
   → admin → responsive. One file, no build step, no framework.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* A restrained civic palette: ink on paper, one navy, one signal red. */
  --paper:        #fbfaf7;
  --surface:      #ffffff;
  --surface-2:    #f3f1ec;
  --ink:          #1b1d21;
  --ink-2:        #4a4f57;
  --ink-3:        #767c85;
  --line:         #e0ddd6;
  --line-2:       #cbc7bd;

  --navy:         #12324a;
  --navy-2:       #1d4c6e;
  --navy-soft:    #eaf0f5;
  --accent:       #a8321e;
  --accent-soft:  #fbeceA;
  --warn:         #8a5a00;
  --warn-soft:    #fdf3dd;
  --ok:           #1f6b46;
  --code:         #c85000;

  --radius:       8px;
  --radius-lg:    12px;
  --shadow:       0 1px 2px rgba(20,22,26,.05), 0 4px 14px rgba(20,22,26,.05);
  --shadow-lift:  0 2px 6px rgba(20,22,26,.07), 0 12px 30px rgba(20,22,26,.08);

  --wrap:         1120px;
  /* Reading measure for text pages. Wide enough for the deployment table on
     /local, narrow enough to stay comfortable at ~17px body copy. */
  --wrap-prose:   860px;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:       #14161a;
    --surface:     #1b1e23;
    --surface-2:   #23262c;
    --ink:         #e9e8e4;
    --ink-2:       #b6b9bf;
    --ink-3:       #8b9099;
    --line:        #2e323a;
    --line-2:      #3d424b;

    --navy:        #8fc4e8;
    --navy-2:      #b0d7f2;
    --navy-soft:   #1a2733;
    --accent:      #f08c76;
    --accent-soft: #2c1c19;
    --warn:        #e0b054;
    --warn-soft:   #2a2317;
    --ok:          #6cc296;
    --code:        #ff9a3d;

    --shadow:      0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
    --shadow-lift: 0 2px 6px rgba(0,0,0,.35), 0 12px 30px rgba(0,0,0,.4);
  }
}

/* --- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4 { line-height: 1.22; margin: 0 0 .5em; font-weight: 650; letter-spacing: -.012em; }
h1 { font-size: clamp(1.85rem, 1.3rem + 1.9vw, 2.6rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1em; }

code { font-family: var(--mono); color: var(--code); }

a { color: var(--navy-2); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

:focus-visible {
  outline: 2.5px solid var(--navy-2);
  outline-offset: 2px;
  border-radius: 3px;
}

img, svg { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--navy); color: #fff; padding: .7rem 1.1rem; z-index: 100;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; top: 0; }

/* --- Layout --------------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; }

/*
  Reading pages put the heading and the body in ONE column of the same width,
  so the two blocks line up and centre together.

  The earlier arrangement left `.wrap` at its full 1120px for the heading while
  `.prose` overrode max-width to 68ch on the body. Because `.wrap` also sets
  `margin-inline: auto`, that narrower body then re-centred itself inside the
  viewport while the heading stayed a wide left-aligned block, putting roughly
  250px of daylight between the two on a 1280px screen.

  Put `wrap-prose` on the page-head AND the content container of any page that
  is mostly text.
*/
.wrap-prose { max-width: var(--wrap-prose); }
/* The 62ch cap on `.lede` is there to stop the intro running the full 1120px
   on wide pages like the index. In a prose column it just makes the intro
   narrower than the body under it, so let it fill the column. The extra class
   is needed to outrank `.page-head .lede`, which is defined further down. */
.wrap-prose.page-head .lede { max-width: none; }
/* Articles page: let the intro span the filters + list layout below it,
   rather than sitting narrower than the columns it introduces. */
.page-head .lede.lede-wide { max-width: none; }
.muted { color: var(--ink-2); }
.small { font-size: .875rem; }
.tiny  { font-size: .8rem; }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }

/* --- Header --------------------------------------------------------------- */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 68px; flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-mark { color: var(--navy); flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 700; font-size: 1.1rem; letter-spacing: -.02em; }
.brand-place { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); }

.site-nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.site-nav a {
  display: block; padding: .45rem .7rem; border-radius: var(--radius);
  font-size: .93rem; font-weight: 500; color: var(--ink-2); text-decoration: none;
}
.site-nav a:hover { background: var(--surface-2); color: var(--ink); }
.site-nav a[aria-current="page"] { background: var(--navy-soft); color: var(--navy); font-weight: 620; }

.nav-toggle-label { display: none; }

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  margin-top: 4rem; background: var(--surface);
  border-top: 1px solid var(--line); padding: 2.5rem 0 1.5rem;
  flex: none;
}
.footer-grid {
  display: grid; gap: 2rem;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}
.footer-about { max-width: 46ch; }
.footer-name { font-weight: 700; margin-bottom: .25rem; }
.footer-heading {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-3); font-weight: 650; margin-bottom: .6rem;
}
.footer-links { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.footer-links a { font-size: .92rem; text-decoration: none; color: var(--ink-2); }
.footer-links a:hover { color: var(--accent); text-decoration: underline; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1.25rem;
}
.footer-bottom p { margin: 0; }

/* --- Page intro ----------------------------------------------------------- */

/* padding-block, not the `padding` shorthand: the shorthand would reset the
   horizontal padding `.wrap` supplies, and at narrow viewports the heading
   would then sit flush against the edge of the screen. */
.page-head { padding-block: 2.5rem 1.5rem; }

/*
  Site search bar between the header and the page. Uses .wrap, like the header,
  so its right edge lines up with the menu rather than the narrower prose column.
  The global input rule sets width: 100%, so the box needs its own width here.
  The page-head below trims its top padding so the bar does not open a gap.
*/
.site-search-inner {
  display: flex; justify-content: flex-end; align-items: center; gap: .5rem;
  padding-block: .75rem 0;
}
.site-search label { font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.site-search input[type=search] {
  width: 15rem; max-width: 60vw; padding: .35rem .6rem; font-size: .9rem;
}
.site-search + main > .page-head:first-child { padding-top: 1.25rem; }
@media print { .site-search { display: none; } }
.page-head h1 { margin-bottom: .35rem; }
.page-head .lede { font-size: 1.1rem; color: var(--ink-2); max-width: 62ch; margin: 0; }

.eyebrow {
  font-size: .75rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .5rem;
}

.breadcrumbs { font-size: .85rem; color: var(--ink-3); margin: 0 0 .75rem; }
.breadcrumbs a { color: var(--ink-2); }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .6rem 1.05rem; border-radius: var(--radius);
  border: 1px solid var(--navy); background: var(--navy); color: #fff;
  font: inherit; font-size: .93rem; font-weight: 580; text-decoration: none;
  cursor: pointer; transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-secondary:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink-3); }
.btn-danger { background: var(--accent); border-color: var(--accent); }
.btn-danger:hover { background: #8c2917; border-color: #8c2917; }
.btn-sm { padding: .35rem .7rem; font-size: .85rem; }

@media (prefers-color-scheme: dark) {
  /* Only the primary and danger buttons: their backgrounds (--navy, --accent)
     flip to a light tint in dark mode, so their text needs to flip to match.
     .btn-secondary's background (--surface) stays dark, so it keeps its own
     light text from the rule above; catching it here paired dark text with a
     dark background and made every secondary button unreadable. */
  .btn:not(.btn-secondary) { color: #10151b; }
  .btn:not(.btn-secondary):hover { color: #10151b; }
}

/* --- Forms ---------------------------------------------------------------- */

label { display: block; font-weight: 580; font-size: .9rem; margin-bottom: .3rem; }
.field { margin-bottom: 1.15rem; }
.field .hint { font-size: .82rem; color: var(--ink-3); margin: .3rem 0 0; }

input[type=text], input[type=url], input[type=date], input[type=password],
input[type=search], input[type=email], textarea, select {
  width: 100%; padding: .55rem .7rem;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: .95rem;
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }
input:focus, textarea:focus, select:focus { border-color: var(--navy-2); }

.field-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.alert {
  padding: .8rem 1rem; border-radius: var(--radius); margin-bottom: 1.25rem;
  border: 1px solid; font-size: .93rem;
}
.alert-error   { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.alert-success { background: var(--navy-soft);   border-color: var(--navy);   color: var(--ink); }
.alert-warn    { background: var(--warn-soft);   border-color: var(--warn);   color: var(--ink); }

/* --- Index layout --------------------------------------------------------- */

.index-layout {
  display: grid; gap: 2.5rem;
  grid-template-columns: 262px minmax(0, 1fr);
  align-items: start;
  padding-bottom: 2rem;
}

.filters {
  position: sticky; top: 88px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.1rem;
  max-height: calc(100vh - 110px); overflow-y: auto;
}
.filters h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); margin-bottom: .5rem; }
.filter-help {
  font-size: .78rem; line-height: 1.45; color: var(--ink-3);
  margin: 0 0 .9rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line);
}
.filter-help strong { color: var(--ink-2); font-weight: 650; }

.filter-group + .filter-group { margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid var(--line); }
.filter-group-name {
  font-size: .78rem; font-weight: 650; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); margin: 0 0 .5rem;
}
.filter-list { display: flex; flex-direction: column; gap: .1rem; }
.filter-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  padding: .3rem .5rem; border-radius: 6px;
  font-size: .89rem; text-decoration: none; color: var(--ink-2);
}
.filter-item:hover { background: var(--surface-2); color: var(--ink); }
.filter-item[data-on="true"] { background: var(--navy-soft); color: var(--navy); font-weight: 600; }
.filter-item .count { font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; flex: none; }
.filter-item[data-on="true"] .count { color: var(--navy); }

.filter-clear { display: block; margin-top: .9rem; font-size: .85rem; }

/* --- Search + sort bar ---------------------------------------------------- */

.toolbar {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
  margin-bottom: 1.1rem;
}
.toolbar form { display: flex; gap: .5rem; flex: 1 1 320px; }
.toolbar input[type=search] { flex: 1; }
.toolbar select { width: auto; flex: none; }

.result-count { font-size: .9rem; color: var(--ink-3); margin: 0 0 1rem; }

.active-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--navy-soft); color: var(--navy);
  border: 1px solid transparent; border-radius: 999px;
  padding: .22rem .65rem; font-size: .83rem; font-weight: 560; text-decoration: none;
}
.chip:hover { border-color: var(--navy); color: var(--navy); }
.chip .x { font-weight: 700; opacity: .65; }

/* --- Article list (search-results style) ---------------------------------- */

.article-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.article-item { padding: 1.35rem 0; border-top: 1px solid var(--line); }
.article-item:first-child { border-top: 0; padding-top: .25rem; }

.article-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem;
  font-size: .84rem; color: var(--ink-3); margin-bottom: .3rem;
}
.article-source { font-weight: 650; color: var(--ink-2); }
.article-meta .dot { opacity: .5; }

.article-title { font-size: 1.19rem; line-height: 1.35; margin: 0 0 .35rem; font-weight: 620; }
.article-title a { color: var(--navy-2); text-decoration: none; }
.article-title a:hover { text-decoration: underline; color: var(--accent); }
.article-title a:visited { color: #5c4b74; }
@media (prefers-color-scheme: dark) { .article-title a:visited { color: #b7a6cf; } }

.article-url {
  font-size: .8rem; color: var(--ok); font-family: var(--mono);
  margin: 0 0 .4rem; overflow-wrap: anywhere;
}

.article-summary { margin: 0 0 .6rem; color: var(--ink-2); font-size: .96rem; max-width: 76ch; }

.article-tags { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.tag {
  font-size: .78rem; padding: .12rem .5rem; border-radius: 4px;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line); text-decoration: none;
}
.tag:hover { background: var(--navy-soft); border-color: var(--navy); color: var(--navy); }

.article-actions { margin-left: auto; }
.report-link { font-size: .78rem; color: var(--ink-3); text-decoration: none; white-space: nowrap; }
.report-link:hover { color: var(--accent); text-decoration: underline; }

.link-flag {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .78rem; font-weight: 600; padding: .1rem .45rem; border-radius: 4px;
  background: var(--warn-soft); color: var(--warn); border: 1px solid currentColor;
}

.empty-state {
  border: 1px dashed var(--line-2); border-radius: var(--radius-lg);
  padding: 2.5rem 1.5rem; text-align: center; color: var(--ink-2);
}

/* --- Pagination ----------------------------------------------------------- */

.pagination { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; margin: 2rem 0 0; }
.pagination-top { margin-bottom: 10px; }
.pagination a, .pagination span {
  padding: .4rem .7rem; border-radius: var(--radius); font-size: .9rem;
  border: 1px solid var(--line); text-decoration: none; color: var(--ink-2);
  background: var(--surface);
}
.pagination a:hover { border-color: var(--navy); color: var(--navy); }
.pagination [aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 620; }
.pagination .gap { border: 0; background: none; padding-inline: .2rem; }
@media (prefers-color-scheme: dark) { .pagination [aria-current="page"] { color: #10151b; } }

/* --- Prose pages ---------------------------------------------------------- */

.content { padding-bottom: 1rem; }
.content h2 { margin-top: 2.25rem; padding-top: .25rem; }
.content h3 { margin-top: 1.75rem; }
.content ul, .content ol { padding-left: 1.3rem; margin: 0 0 1.15rem; }
.content li { margin-bottom: .45rem; }
.content blockquote {
  margin: 1.5rem 0; padding: .6rem 0 .6rem 1.15rem;
  border-left: 3px solid var(--navy); color: var(--ink-2); font-style: italic;
}
.content .callout {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--navy); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; margin: 1.75rem 0;
}
.content .callout p:last-child { margin-bottom: 0; }
.content .callout-warn { border-left-color: var(--accent); }
.content .todo {
  background: var(--warn-soft); border: 1px dashed var(--warn);
  border-radius: var(--radius); padding: 1rem 1.15rem; margin: 1.5rem 0;
  font-size: .93rem;
}
.content .todo p:last-child { margin-bottom: 0; }
.content .todo strong { color: var(--warn); }
/* An inline placeholder, for a single unfilled value inside a sentence. */
.todo-inline {
  background: var(--warn-soft); color: var(--warn);
  border-bottom: 1px dashed var(--warn);
  padding: 0 .2rem; border-radius: 3px; font-style: normal;
}

.card-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 1.5rem 0; }

/*
  Home page cards in two labeled columns. Each column is a subgrid spanning the
  same rows, so a taller card in one column pushes its neighbour to match and
  the edges line up across. Separate flex stacks ended level but staggered in
  between. The DOM stays one column per section, so it reads down, not across.
  Five rows: the label, then four cards. Change the 4 if a column grows.
*/
.card-columns {
  display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: auto repeat(4, auto);
  gap: 1rem 1.5rem; margin: 1.5rem 0;
}
.card-column {
  display: grid; grid-row: span 5;
  grid-template-rows: subgrid; row-gap: 1rem;
}
.card-column-label {
  margin: 0; align-self: end; font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3);
}
@media (max-width: 640px) {
  .card-columns { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 2rem; }
  .card-column { grid-row: auto; grid-template-rows: none; }
}
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.15rem;
}
.card h3 { margin-top: 0; font-size: 1.02rem; }
.card p:last-child { margin-bottom: 0; }
.card .stat { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--navy); display: block; margin-bottom: .3rem; }

/* A fixed count of stat cards that should read as one row, not a wrapping grid. */
.card-grid-stats { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 680px) {
  .card-grid-stats { grid-template-columns: repeat(2, 1fr); }
}

/* A heading with a related link at the same top edge, aligned to the right. */
.section-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .4rem 1.5rem;
}
.file-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .88rem; font-weight: 550; color: var(--ink-2); text-decoration: none;
}
.file-link:hover { color: var(--navy-2); text-decoration: underline; }
.file-icon { flex: none; color: var(--ink-3); }

/* Numbered question headings, one level below the section's own <h2>. */
.question-heading { font-size: 1.3rem; }

/* --- Search ----------------------------------------------------------------- */

.search-form-main { display: flex; flex-wrap: nowrap; align-items: stretch; gap: .75rem; max-width: 32rem; margin-top: 1.1rem; }
.search-form-main input[type=search] { flex: 1 1 auto; min-width: 0; width: auto; }
.search-form-main .btn { flex: none; }

.search-results { list-style: none; padding: 0; margin: 0 0 2rem; }
.search-results li {
  padding: 1rem 0; border-bottom: 1px solid var(--line);
}
.search-results li:first-child { padding-top: 0; }
.search-result-title { margin: 0 0 .2rem; font-weight: 620; }
.search-result-excerpt mark {
  background: var(--warn-soft); color: inherit; border-radius: 2px; padding: 0 .1rem;
}

.steps { list-style: none; padding: 0; counter-reset: step; }
.steps > li {
  counter-increment: step; position: relative;
  padding-left: 3rem; margin-bottom: 1.5rem;
}
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: -.1rem;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--navy); color: var(--surface);
  display: grid; place-items: center; font-weight: 700; font-size: .95rem;
}
@media (prefers-color-scheme: dark) { .steps > li::before { color: #10151b; } }
.steps h3 { margin: 0 0 .3rem; }

dl.facts { margin: 1.5rem 0; }
dl.facts dt { font-weight: 650; margin-top: 1rem; }
dl.facts dd { margin: .2rem 0 0; color: var(--ink-2); }

/* --- Topics page ---------------------------------------------------------- */

.topic-group { margin-bottom: 2.25rem; }
.topic-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.topic-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .85rem 1rem;
  transition: border-color .15s, box-shadow .15s;
}
.topic-card:hover { border-color: var(--navy); box-shadow: var(--shadow); color: inherit; }
.topic-card .name { font-weight: 620; color: var(--navy-2); display: flex; justify-content: space-between; gap: .5rem; }
.topic-card .desc { font-size: .86rem; color: var(--ink-3); margin: .25rem 0 0; }

/* --- Content with a side callout ------------------------------------------- */

.side-layout {
  display: grid; gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  padding-bottom: 2rem;
}
.side-callout {
  position: sticky; top: 88px;
  background: var(--navy-soft); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.25rem;
}
.side-callout h2 { font-size: 1rem; margin: 0 0 .5rem; color: var(--navy-2); }
.side-callout p:last-child { margin-bottom: 0; }
.callout-links { list-style: none; padding: 0; margin: 0 0 .85rem; }
.callout-links li { margin-bottom: .4rem; }
.callout-links a { font-weight: 620; }


/* --- Upcoming events carousel ------------------------------------------------ */
/*
  Lives in the main content well (wrap-prose), not a full width band like the
  single-event banner this replaced: several events read as a list of content,
  not an announcement, so it takes the width of the prose around it instead of
  interrupting the page.
*/
/* margin-bottom only: a `margin` shorthand here would set margin-inline to 0
   and cancel out the `margin-inline: auto` that centers .wrap, pinning the
   whole carousel to the left edge instead of centering it like every other
   .wrap-prose section on the page. */
.events-section { margin-bottom: 1.75rem; }

.carousel { position: relative; }

/*
  Every slide occupies the same grid cell rather than being swapped in and out
  of the flow, so the track's height is always the tallest slide's, and the
  card doesn't resize as a reader steps between a sparse event and a full one.
  `visibility: hidden` rather than `display: none` keeps an inactive slide
  taking up its share of that height without painting or being reachable by
  keyboard or a screen reader.
*/
.carousel-track { display: grid; }
.carousel-slide { grid-area: 1 / 1; visibility: hidden; }
.carousel-slide.is-active { visibility: visible; }

/*
  Solid navy, same as the single-event banner this replaced, carried over at
  the maintainer's request. Border uses navy-2 rather than the neutral --line
  so the card edge doesn't disappear against its own background.
*/
.carousel-slide {
  background: var(--navy); color: #fff;
  border: 1px solid var(--navy-2);
  border-radius: var(--radius-lg); padding: 1.25rem 3.75rem;
}
/*
  The orange from --code, but not --code itself: that token is tuned for code
  spans on the page background and loses most of its contrast on navy. This is
  the same hue picked to sit on a navy band instead, carried over from the old
  banner's kicker (6.29 contrast light, 5.41 dark vs. --accent's 2.91 / 1.13).
*/
.carousel-kicker {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #ff9a3d; margin: 0 0 .35rem;
}
.carousel-name { margin: 0 0 .4rem; font-size: 1.08rem; }
.carousel-meta { margin: 0; font-size: .93rem; opacity: .92; }
.carousel-sep { padding-inline: .45rem; opacity: .6; }
.carousel-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin: .9rem 0 0; }

/* Overlaid on the slide's own left/right padding rather than beside it, so the
   carousel's footprint matches a plain card and never grows wider than the
   prose column around it. */
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; padding: 0; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 1rem; line-height: 1; cursor: pointer;
}
.carousel-arrow:hover { background: var(--surface-2); border-color: var(--ink-3); }
.carousel-prev { left: .6rem; }
.carousel-next { right: .6rem; }

.carousel-dots { display: flex; justify-content: center; gap: .4rem; margin-top: .85rem; }
.carousel-dot {
  width: .5rem; height: .5rem; padding: 0; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--surface-2); cursor: pointer;
}
.carousel-dot.is-active { background: var(--navy); border-color: var(--navy); }

/* The default outline (navy-2) all but disappears against the slide's own
   navy background, same problem the old banner solved the same way. */
.carousel-slide :focus-visible, .carousel-arrow:focus-visible {
  outline-color: var(--surface);
}

/*
  Dark mode flips --navy to a light blue, so the slide's text goes near-black
  to match, the same idiom the old banner and .pagination [aria-current] use.
*/
@media (prefers-color-scheme: dark) {
  .carousel-slide { color: #10151b; }
  .carousel-kicker { color: #722c00; }
  .carousel-slide :focus-visible, .carousel-arrow:focus-visible { outline-color: #10151b; }
}

@media (max-width: 560px) {
  .carousel-slide { padding: 1.15rem 3.1rem; }
  .carousel-arrow { width: 1.8rem; height: 1.8rem; }
}

@media print { .events-section { display: none; } }

/* --- Site map --------------------------------------------------------------- */

.sitemap-tree, .sitemap-tree ul { list-style: none; padding-left: 0; margin: 0; }
.sitemap-tree ul { padding-left: 1.4rem; margin-top: .45rem; }
.sitemap-tree li { margin-bottom: .45rem; }
.sitemap-tree a { color: var(--navy-2); }

/* --- Map ------------------------------------------------------------------ */

#camera-map {
  height: min(70vh, 620px); min-height: 380px;
  border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.map-bar {
  display: flex; gap: .75rem; align-items: center; flex-wrap: wrap;
  margin-bottom: .85rem; font-size: .9rem;
}
.map-status { color: var(--ink-2); }
.map-status[data-state="error"] { color: var(--accent); }
.map-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--ink-2); margin-top: .85rem; }
.map-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend-dot { width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
.leaflet-popup-content { font-family: var(--sans); font-size: .9rem; }
.leaflet-popup-content h4 { margin: 0 0 .35rem; font-size: .98rem; }
.leaflet-popup-content dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; }
.leaflet-popup-content dt { color: #555; font-size: .82rem; }
.leaflet-popup-content dd { margin: 0; font-size: .82rem; }

/* --- Admin ---------------------------------------------------------------- */

.is-admin .site-header { border-bottom-color: var(--navy); box-shadow: inset 0 -3px 0 var(--navy); }

.admin-bar {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  padding: .75rem 0; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem;
}
.admin-bar nav { display: flex; gap: .35rem; }
.admin-bar nav a { font-size: .9rem; padding: .35rem .65rem; border-radius: var(--radius); text-decoration: none; color: var(--ink-2); }
.admin-bar nav a:hover, .admin-bar nav a[aria-current="page"] { background: var(--navy-soft); color: var(--navy); }
.admin-bar .spacer { flex: 1; }

.stat-row { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin-bottom: 1.75rem; }
.stat-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; }
.stat-box .n { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.stat-box .k { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.stat-box.alert-n .n { color: var(--accent); }

table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
/*
  A caption rather than a paragraph above the table: screen readers announce it
  as the table's own description, and it cannot drift away from the table it
  describes when the markup around it is rearranged.
*/
table.data caption {
  caption-side: top; text-align: left;
  font-size: .82rem; color: var(--ink-3);
  padding: 0 0 .7rem; line-height: 1.45;
}
table.data caption strong { color: var(--ink-2); font-weight: 650; }
table.data th, table.data td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
table.data tr:hover td { background: var(--surface); }
table.data .nowrap { white-space: nowrap; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.pill {
  display: inline-block; font-size: .75rem; font-weight: 600;
  padding: .1rem .45rem; border-radius: 4px; border: 1px solid;
}
.pill-draft  { background: var(--warn-soft); color: var(--warn); border-color: currentColor; }
.pill-live   { background: var(--navy-soft); color: var(--navy); border-color: transparent; }
.pill-broken { background: var(--accent-soft); color: var(--accent); border-color: currentColor; }
.pill-ai     { background: var(--surface-2); color: var(--ink-3); border-color: var(--line); }

.checkbox-grid { display: grid; gap: .35rem .9rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.checkbox-grid label {
  display: flex; align-items: flex-start; gap: .45rem;
  font-weight: 450; font-size: .89rem; margin: 0; cursor: pointer;
  padding: .18rem .3rem; border-radius: 5px;
}
.checkbox-grid label:hover { background: var(--surface-2); }
.checkbox-grid input { margin-top: .3rem; flex: none; accent-color: var(--navy); }

.cat-fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin: 0 0 1.15rem; }
.cat-fieldset legend { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 650; padding-inline: .4rem; }
.cat-group + .cat-group { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }

.form-actions {
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 1.25rem; margin-top: 1.5rem;
}
.form-actions .spacer { flex: 1; }

.login-card {
  max-width: 380px; margin: 4rem auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.75rem; box-shadow: var(--shadow);
}
.login-card h1 { font-size: 1.4rem; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
  .index-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .filters { position: static; max-height: none; }
  .side-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .side-callout { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }

  /* CSS-only nav toggle. No JavaScript needed for the menu. */
  .nav-toggle-label {
    display: flex; align-items: center; gap: .45rem;
    cursor: pointer; padding: .45rem .6rem; border-radius: var(--radius);
    border: 1px solid var(--line-2); font-size: .85rem; font-weight: 580;
  }
  .nav-toggle-label span { display: block; width: 16px; height: 2px; background: var(--ink); border-radius: 2px; }
  .nav-toggle-label span + span { margin-left: -18px; margin-top: 5px; }
  .nav-toggle-label em { font-style: normal; margin-left: .35rem; }
  .site-nav { display: none; width: 100%; flex-direction: column; gap: 0; padding-bottom: .75rem; }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .site-nav a { padding: .6rem .5rem; border-radius: 0; border-top: 1px solid var(--line); }

  .footer-grid { grid-template-columns: 1fr; }
  .article-title { font-size: 1.1rem; }
  .page-head { padding-block: 1.75rem 1.25rem; }
}

@media print {
  .site-header, .site-footer, .filters, .toolbar, .pagination, .skip-link { display: none; }
  body { background: #fff; font-size: 11pt; }
  .article-item { break-inside: avoid; }
  .article-title a::after { content: " (" attr(href) ")"; font-size: 9pt; font-weight: 400; }
}