/* ============================================================
   Cascadia Listening Post. Generated by site_style.py.
   Do not edit in the site repository; edit the generator.
   ============================================================ */

:root {
  color-scheme: light;
  --surface-0: #f6f7f6; --surface-1: #fcfcfb; --surface-2: #f0f1ef;
  --line: #e3e4e1; --line-strong: #cfd1cc;
  --text-primary: #0b0b0b; --text-secondary: #52514e; --text-muted: #7d7c77;
  --series-1: #2a78d6; --series-2: #eb6834;
  --accent: #0d6b78;
  --warn-bg: #fff8e8; --warn-line: #f0e0bd; --warn-ink: #6f5a28;
  --good-bg: #eef7f0; --good-line: #cfe6d6; --good-ink: #2c5f3d;
  --masthead-bg: #0e2a3a; --masthead-bg-2: #123b4f;
  --masthead-ink: #f2f6f7; --masthead-muted: #a9c3cf; --masthead-accent: #6fd3e0;
  --src-orcasound: #2a78d6; --src-youtube: #157f6d; --src-nps: #9a5b1b; --mark-ink: #ffffff;
  --status-reviewed: var(--accent); --status-classification: var(--series-1);
  --fs-xs: 11.5px; --fs-sm: 13px; --fs-base: 15.5px; --fs-md: 17px; --fs-lg: 21px;
  --fs-xl: clamp(28px, 4.4vw, 38px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-0: #121211; --surface-1: #1a1a19; --surface-2: #232322;
    --line: #34342f; --line-strong: #4a4a43;
    --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #97968c;
    --series-1: #3987e5; --series-2: #d95926;
    --accent: #5bbcc9;
    --warn-bg: #2a2415; --warn-line: #4d4327; --warn-ink: #e0cf9f;
    --good-bg: #16241a; --good-line: #2b4433; --good-ink: #a6d3b4;
    --masthead-bg: #0a1d29; --masthead-bg-2: #0f2a3a;
    --masthead-ink: #eef3f5; --masthead-muted: #93adb9; --masthead-accent: #7fdbe6;
    --src-orcasound: #3987e5; --src-youtube: #3fbfa8; --src-nps: #d29a5a; --mark-ink: #121211;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-0: #121211; --surface-1: #1a1a19; --surface-2: #232322;
  --line: #34342f; --line-strong: #4a4a43;
  --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #97968c;
  --series-1: #3987e5; --series-2: #d95926;
  --accent: #5bbcc9;
  --warn-bg: #2a2415; --warn-line: #4d4327; --warn-ink: #e0cf9f;
  --good-bg: #16241a; --good-line: #2b4433; --good-ink: #a6d3b4;
  --masthead-bg: #0a1d29; --masthead-bg-2: #0f2a3a;
  --masthead-ink: #eef3f5; --masthead-muted: #93adb9; --masthead-accent: #7fdbe6;
  --src-orcasound: #3987e5; --src-youtube: #3fbfa8; --src-nps: #d29a5a; --mark-ink: #121211;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--surface-0); color: var(--text-primary);
  /* The system stack, named honestly. Every page used to ask for Inter and no
     page ever loaded it, so every reader has been seeing this all along. */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  line-height: 1.6; font-size: 16px;
  font-variant-numeric: tabular-nums;
}
a { color: var(--accent); }
img, video { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- the centred column ---------- */
/* Two container idioms exist on this site and both have to keep working.
   Some pages wrap a full-bleed <header> band around an inner .wrap; others use
   <main>, <header> and <footer> as the centred column themselves, with their own
   max-width. The second kind lost its container entirely when the inline CSS
   went, which is what made those pages run flush to the window edge. restyle.py
   decides which idiom a page uses and says so on <body>, because a page either
   has a .wrap or it does not and guessing in CSS is not necessary. */
.wrap { width: min(880px, calc(100vw - 44px)); margin: 0 auto; }

.layout-flow header, .layout-flow main, .layout-flow footer,
.layout-flow > section, .layout-flow > p, .layout-flow > h2 {
  max-width: 1120px; margin-left: auto; margin-right: auto;
  padding-left: 20px; padding-right: 20px;
}
.layout-flow header {
  background: none; padding-top: 30px; padding-bottom: 20px;
  border-bottom: 1px solid var(--line); margin-bottom: 26px;
}
.layout-flow main { padding-top: 4px; padding-bottom: 44px; }
.layout-flow footer { padding-top: 20px; padding-bottom: 44px; margin-top: 36px; }
.layout-flow h2 { margin-top: 44px; }
/* The first heading after the masthead already has the header rule above it. */
.layout-flow header + h2, .layout-flow header + section > h2:first-child,
.layout-flow main > *:first-child > h2:first-child {
  border-top: none; padding-top: 0; margin-top: 8px;
}
.family-sheet.layout-flow header, .family-sheet.layout-flow main,
.family-sheet.layout-flow footer { max-width: 1440px; }

/* ---------- masthead ---------- */
.layout-wrap header { background: var(--surface-1); border-bottom: 1px solid var(--line); padding: 52px 0 34px; }
.kicker {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 14px; font-weight: 500;
}
h1 { margin: 0 0 14px; font-size: var(--fs-xl); line-height: 1.12;
  letter-spacing: -0.02em; font-weight: 650; }
p.lede, .tagline { font-size: 17.5px; max-width: 64ch; color: var(--text-secondary);
  margin: 0; line-height: 1.55; }

/* ---------- flow ---------- */
h2 {
  margin: 54px 0 4px; font-size: var(--fs-lg); letter-spacing: -0.01em; font-weight: 620;
  padding-top: 18px; border-top: 1px solid var(--line);
}
h3 { margin: 30px 0 6px; font-size: 15.5px; font-weight: 620; }
h4 { margin: 0; font-size: 14px; font-weight: 620; }
/* Running prose is held to a readable measure. The wrappers are wide because
   grids and tables need the room; paragraphs following them to 120 characters
   was the single biggest readability complaint. */
p { margin: 12px 0; color: var(--text-secondary); max-width: 70ch; }
strong { color: var(--text-primary); font-weight: 620; }
ul, ol { color: var(--text-secondary); max-width: 70ch; padding-left: 20px; }
li { margin: 7px 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
p.note {
  font-size: 13.5px; color: var(--text-muted); border-left: 2px solid var(--line-strong);
  padding: 2px 0 2px 14px; margin: 18px 0;
}
/* Promoted off --text-muted: at this size the muted token was too low-contrast
   for text that carries selection rules and caveats. */
.quiet { color: var(--text-secondary); font-size: 13.5px; }

/* The AI disclosure restyle puts on every page. Set apart from the report's own
   prose by a rule and reduced weight, because it is about how the page was made
   rather than about what was found. */
.ai-disclosure {
  margin: 32px auto 0;
  max-width: 76ch;
  padding: 12px 0 24px;
  border-top: 1px solid var(--line, #d7dee6);
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.5;
}
.ai-disclosure a { color: inherit; }

/* ---------- timestamps ---------- */
/* The canonical detection stamp, emitted by timefmt.stamp_html. Pacific leads
   because the behaviour being recorded is diel; UTC sits underneath because it
   is the key back to the source archives. */
.stamp { display: block; font-variant-numeric: tabular-nums; line-height: 1.42; }
.stamp-local { display: block; font-size: 13px; color: var(--text-primary); font-weight: 560; }
.stamp-utc { display: block; font-size: 11.5px; color: var(--text-muted); }
.stamp-offset { display: block; font-size: 11.5px; color: var(--series-2); margin-top: 2px; }
h4 .stamp-local, .card-head .stamp-local { font-size: 14px; }

/* ---------- hero ---------- */
/* Two different things are called "hero" on this site: a div wrapping the one
   big number on the hydrophone pages, and the card image on the MaST candidate
   sheets. Qualifying by element keeps them apart, which a family class could
   not do because both appear on report-family pages. */
div.hero {
  margin: 30px 0 4px; padding: 22px 24px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
  display: flex; gap: 26px; align-items: baseline; flex-wrap: wrap;
}
div.hero b {
  font-size: clamp(38px, 6vw, 52px); line-height: 1; letter-spacing: -0.03em;
  color: var(--series-2); font-weight: 680;
}
div.hero span { font-size: 15px; color: var(--text-secondary); max-width: 46ch; line-height: 1.5; }
img.hero {
  display: block; width: 100%; border-radius: 8px; background: #111;
  object-fit: contain; margin: 0 0 10px;
}
.media.solo { margin: 0 0 10px; }
video { width: 100%; border-radius: 6px; background: #111; display: block; }

/* ---------- tiles and metrics ---------- */
/* auto-fit rather than a fixed column count: the pages using this carry
   anywhere from three to five tiles. */
.tiles, .metrics, .stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px; margin: 22px 0 0;
}
.tile, .metric, .stat {
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 15px;
}
.tile b, .metric b, .stat b {
  display: block; font-size: 25px; line-height: 1.12;
  letter-spacing: -0.015em; font-weight: 620;
}
.tile span, .metric span, .stat span { font-size: 12px; color: var(--text-muted); }
.tile.is-cut b { color: var(--series-2); }
.metric b { color: var(--accent); }

/* ---------- callouts ---------- */
.callout, .caveat {
  border-radius: 10px; padding: 15px 18px; margin: 22px 0; font-size: 15px; line-height: 1.55;
  background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink);
}
.caveat { font-size: 13.5px; padding: 10px 12px; margin: 12px 0 0; }
.callout.good { background: var(--good-bg); border-color: var(--good-line); color: var(--good-ink); }
.callout strong, .caveat strong { color: inherit; }

/* ---------- figures and charts ---------- */
figure {
  margin: 22px 0 8px; background: var(--surface-1); border: 1px solid var(--line);
  border-radius: 12px; padding: 20px 18px 12px;
}
figcaption { font-size: 13px; color: var(--text-secondary); margin-top: 12px;
  padding: 0 2px; line-height: 1.5; max-width: 72ch; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
/* Every builder draws gridlines as <line class="grid">, but the two pages with
   no builder use <div class="grid"> as a card container. Qualifying by element
   lets both keep their markup: the div form picks up the card grid below. */
line.grid { stroke: var(--line); stroke-width: 1; }
div.grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px;
  margin-top: 12px; align-items: start;
}
.axis { stroke: var(--text-muted); stroke-width: 1.5; }
.thr { stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
.thr-t { fill: var(--text-muted); font-size: 11px; }
.stem { stroke: var(--series-2); stroke-width: 2; stroke-opacity: .45; }
.ax { fill: var(--text-muted); font-size: 11.5px; }
.ax.val { fill: var(--text-secondary); font-weight: 560; }
.ax.lbl { fill: var(--text-primary); font-size: 12.5px; font-weight: 600; }
text.ax { fill: var(--text-secondary); font-family: inherit; }
text.sm { font-size: 11px; }
text.lbl { font-size: 13px; font-weight: 600; fill: var(--text-primary); }
text.val { font-variant-numeric: tabular-nums; fill: var(--text-primary); }
.legend { display: flex; gap: 18px; flex-wrap: wrap; margin: 2px 0 0;
  font-size: 12.5px; color: var(--text-secondary); }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block;
  margin-right: 7px; vertical-align: -1px; }

/* ---------- tables ---------- */
/* Default is the prose idiom: left aligned, numbers opted into with td.n.
   Wrapping a table in .tablewrap switches it to the dense numeric idiom, which
   is what the hydrophone comparison tables already do. */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 14px 0; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
td.n { text-align: right; font-variant-numeric: tabular-nums; }
caption { caption-side: top; text-align: left; color: var(--text-secondary);
  font-size: 13px; padding-bottom: 12px; line-height: 1.5; max-width: 72ch; }
.tablewrap { overflow-x: auto; margin: 22px 0 6px; }
.tablewrap table { font-size: 14px; min-width: 620px; }
.tablewrap th, .tablewrap td { padding: 11px 12px; text-align: right; }
.tablewrap thead th { color: var(--text-muted); font-weight: 560; font-size: 12px;
  text-transform: none; letter-spacing: 0;
  border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.tablewrap th[scope="row"], .tablewrap thead th:first-child {
  text-align: left; font-weight: 600; color: var(--text-primary); }
.tablewrap tbody tr:last-child th, .tablewrap tbody tr:last-child td { border-bottom: none; }
td.rm { color: var(--series-2); font-weight: 560; }
.was { display: block; font-size: 11px; color: var(--text-muted); font-weight: 400; margin-top: 1px; }
.zero { color: var(--text-muted); }
tr.static td { color: var(--text-muted); }

/* ---------- cards ---------- */
.sitegroup { margin: 30px 0 0; }
.sitehead { display: flex; align-items: baseline; gap: 12px; margin: 0 0 4px; }
.sitehead h3 { margin: 0; }
.sitehead span { font-size: 12.5px; color: var(--text-muted); }
/* align-items:start so a short card does not stretch to match the tallest in
   its row, which left half-empty boxes wherever detections had uneven segment
   counts. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 12px; margin-top: 12px; align-items: start; }
.card { background: var(--surface-1); border: 1px solid var(--line);
  border-radius: 11px; padding: 14px 15px 13px; }
.card-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  border-bottom: 1px solid var(--line); padding-bottom: 9px; margin-bottom: 10px; }
.card h3, .card h4 { margin: 0; font-size: 13.5px; font-weight: 620; letter-spacing: -0.005em; }
.card-head span { color: var(--accent); font-weight: 620; font-size: 12.5px; white-space: nowrap; }
.badges, .tags { display: flex; gap: 5px; flex-wrap: wrap; margin: 9px 0 10px; }
.badge, .tags span {
  font-size: 11px; border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 2px 9px; color: var(--text-secondary); white-space: nowrap;
}
.badge.eco { border-color: var(--series-1); color: var(--series-1); font-weight: 560; }
.badge.tone { border-color: var(--line); color: var(--text-muted); }
.meta { font-size: 11.5px; color: var(--text-muted); margin: 0 0 10px;
  font-variant-numeric: tabular-nums; }
.dim { color: var(--text-muted); font-size: 11.5px; }
audio { width: 100%; height: 34px; display: block; margin-top: 10px; }

/* Ecotype tags on the detection report. */
.tag { font-size: 11px; border-radius: 999px; padding: 3px 10px; white-space: nowrap;
  border: 1px solid var(--line); font-weight: 600; }
.tag.tkw { background: color-mix(in srgb, var(--series-2) 16%, var(--surface-1));
  border-color: color-mix(in srgb, var(--series-2) 40%, var(--surface-1)); color: var(--text-primary); }
.tag.srkw { background: color-mix(in srgb, var(--series-1) 14%, var(--surface-1));
  border-color: color-mix(in srgb, var(--series-1) 38%, var(--surface-1)); color: var(--text-primary); }
.tag.none { color: var(--text-muted); font-weight: 500; }
.find { background: var(--surface-1); border: 1px solid var(--line); border-radius: 9px;
  padding: 12px 14px; margin-bottom: 10px; }
.find-head { display: flex; justify-content: space-between; gap: 14px; align-items: start; }
.sub { margin: 3px 0 0; font-size: 12.5px; }

/* Corroboration: the acoustic claim, then the independent record beside it. */
ul.corr { list-style: none; padding: 0; margin: 18px 0 6px; display: grid; gap: 14px; }
ul.corr > li { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px;
  background: var(--surface-2); }
ul.corr > li > .meta { margin: 3px 0 9px; }
.match { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary);
  border-left: 3px solid var(--series-1); padding-left: 12px; }
.match.none { border-left-color: var(--text-muted); color: var(--text-muted); }
.match a { color: inherit; }

/* ---------- day grouping on contact sheets ---------- */
/* <details> so the grouping needs no JavaScript and deep links keep working.
   The day, the count and the peak score stay in the summary because Safari and
   Firefox will not find text inside a closed <details> with Ctrl-F. */
.day { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-1);
  margin: 12px 0; overflow: hidden; }
.day > summary {
  cursor: pointer; padding: 12px 15px; font-weight: 620; font-size: 14.5px;
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  list-style: none;
}
.day > summary::-webkit-details-marker { display: none; }
.day > summary::before {
  content: "\25b8"; color: var(--text-muted); font-size: 12px;
  transition: transform .12s; display: inline-block;
}
.day[open] > summary::before { transform: rotate(90deg); }
.day > summary:hover { background: var(--surface-2); }
.day > summary .n { font-weight: 400; font-size: 12.5px; color: var(--text-muted); }
.day > summary .peak { font-weight: 560; font-size: 12.5px; color: var(--accent);
  margin-left: auto; }
.day-body { padding: 4px 15px 16px; border-top: 1px solid var(--line); }
.expand-all {
  border: 1px solid var(--line-strong); background: var(--surface-1); color: var(--text-primary);
  border-radius: 999px; padding: 6px 13px; font-size: 12.5px; cursor: pointer; margin: 14px 0 0;
}
.expand-all:hover { background: var(--surface-2); }

/* ---------- detection crops (NPS contact sheets) ---------- */
/* figure.det is a crop card, not a chart figure, so it overrides the generic
   figure rule rather than merging with it. */
.dets { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
figure.det { margin: 0; padding: 0; border-radius: 9px; overflow: hidden; background: var(--surface-1); }
figure.det img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #111; }
figure.det figcaption { margin: 0; padding: 9px 10px 11px; font-size: 12px;
  display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; max-width: none; }
figure.det figcaption strong { font-variant-numeric: tabular-nums; }
figure.det .badge { border: 0; padding: 2px 8px; color: #fff; font-weight: 600; }
figure.det[data-verdict="candidate"] { border: 1px solid var(--line-strong); }
figure.det[data-verdict="static_object"], figure.det[data-verdict="above_treeline"] { opacity: .72; }

/* ---------- source colour ---------- */
.src-orcasound { --src: var(--src-orcasound); }
.src-youtube { --src: var(--src-youtube); }
.src-nps { --src: var(--src-nps); }

/* ---------- site nav ---------- */
/* One band on every page, restyle puts it there. Its inner container is
   site-nav-inner, not wrap, because restyle reads the layout idiom off the
   literal class="wrap"; the width follows the page family instead. */
.site-nav {
  background: var(--masthead-bg); color: var(--masthead-ink);
  border-bottom: 1px solid var(--masthead-bg-2);
}
.site-nav-inner {
  width: min(880px, calc(100vw - 44px)); margin: 0 auto; display: flex; gap: 22px;
  align-items: stretch; overflow-x: auto; white-space: nowrap; scrollbar-width: none;
  min-height: 44px; font-size: var(--fs-sm);
}
.site-nav-inner::-webkit-scrollbar { display: none; }
.site-nav a {
  color: var(--masthead-muted); text-decoration: none; display: inline-flex;
  align-items: center; padding: 0 2px; border-bottom: 3px solid transparent;
  border-top: 3px solid transparent;
}
.site-nav a:hover { color: var(--masthead-ink); }
.site-nav a[aria-current="page"] { color: var(--masthead-ink); border-bottom-color: var(--src, var(--masthead-accent)); }
.site-nav-home { font-weight: 650; color: var(--masthead-ink); margin-right: 6px; }
.family-landing .site-nav-inner, .family-hub .site-nav-inner { width: min(1120px, calc(100vw - 40px)); }
.family-sheet .site-nav-inner { width: min(1180px, calc(100vw - 44px)); }
.layout-flow .site-nav-inner { width: auto; max-width: 1120px; padding: 0 20px; }
.family-sheet.layout-flow .site-nav-inner { max-width: 1440px; }
/* ---------- masthead band ---------- */
/* header.masthead, not .masthead: `.layout-wrap header` above is 0,1,1 and a
   bare class would lose to it. Dark in both themes, see the module docstring. */
header.masthead {
  background: linear-gradient(135deg, var(--masthead-bg) 0%, var(--masthead-bg-2) 100%);
  color: var(--masthead-ink); border-bottom: 0; padding: 30px 0 26px;
}
header.masthead-hub { border-top: 4px solid var(--src, var(--masthead-accent)); }
.masthead .kicker { color: var(--masthead-muted); margin: 0 0 10px; }
.masthead .kicker a { color: inherit; text-decoration: none; }
.masthead .kicker a:hover { text-decoration: underline; }
.masthead h1 { color: var(--masthead-ink); margin: 0 0 10px; }
.masthead .tagline, .masthead p.lede {
  color: var(--masthead-muted); font-size: var(--fs-md); max-width: 70ch;
}
.masthead a { color: var(--masthead-accent); }
.stat-row {
  display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 20px 0 0;
  font-size: var(--fs-sm); color: var(--masthead-muted); align-items: baseline;
}
.stat-row b {
  font-size: 22px; color: var(--masthead-accent); font-weight: 650;
  letter-spacing: -0.01em; margin-right: 3px; font-variant-numeric: tabular-nums;
}
.stat-row .stat-note { flex-basis: 100%; font-size: var(--fs-xs); opacity: .85; }

/* ---------- landing page and hubs ---------- */
.family-landing .wrap, .family-hub .wrap { width: min(1120px, calc(100vw - 40px)); }
.family-landing > .wrap, .family-hub > .wrap { padding: 4px 0 54px; }

/* A heading with its own one-line key beside it. The first section on the
   page sits directly under the masthead band and needs no rule above it. */
.section-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 18px; margin: 44px 0 12px; padding-top: 18px; border-top: 1px solid var(--line);
}
.section-head h2 { margin: 0; padding: 0; border: 0; }
.section-head .key { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); max-width: none; }
.section-head .key code { font-size: 11px; }
section.featured .section-head { margin-top: 20px; padding-top: 0; border-top: 0; }
.key-reviewed, .key-candidate {
  display: inline-block; border-radius: 4px; padding: 0 6px; color: var(--text-secondary);
}
.key-reviewed { border: 2px solid var(--accent); }
.key-candidate { border: 1px dashed var(--line-strong); }

/* Facets, one labelled row per axis. The nine pills used to sit in one
   undifferentiated row mixing domain, review status and data quality, so no
   combination of them read as meaningful. */
.facets { margin: 18px 0 20px; display: grid; gap: 10px; }
.facet { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.facet > .facet-label {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); min-width: 96px;
}
.facet button {
  border: 1px solid var(--line-strong); background: var(--surface-1); color: var(--text-primary);
  border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 13px;
  font-family: inherit;
}
.facet button:hover { background: var(--surface-2); }
.facet button.active { background: var(--accent); color: var(--surface-1); border-color: var(--accent); }
.facet button .n { opacity: .65; font-size: 11.5px; margin-left: 5px; }

/* ---------- featured findings ---------- */
.findings { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.finding {
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; display: flex; flex-direction: column;
}
/* Reviewed findings carry weight; candidates recede. Everything used to render
   at equal weight, so nothing on the page read as featured. */
.finding.is-reviewed { border: 2px solid var(--accent); }
.finding.is-candidate { border-style: dashed; }
.finding.is-candidate .finding-media { opacity: .92; }
.finding-media, .finding img, .finding video {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #111;
}
.finding audio { width: calc(100% - 24px); margin: 14px 12px 0; }
.finding-body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.finding h3 { margin: 0; font-size: 16px; line-height: 1.28; }
.finding p { margin: 0; font-size: 14px; }
.finding .stamp { margin-top: auto; padding-top: 6px; }
/* Selector matches `.tags span`, which is 0,1,1: written as a bare class this
   lost the colour cascade and rendered secondary-grey text on the accent fill. */
.tags span.badge-reviewed, .badge-reviewed {
  background: var(--accent); color: var(--surface-1); border-color: var(--accent);
  font-weight: 620;
}

/* The strip: the leading findings in one row that scrolls sideways, so the
   report list is a screen away instead of three. The cards are the same
   markup as the grid, so reviewed stays solid and model output stays dashed;
   the strip only hides the definition list and clamps the summary. */
.featured-strip {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 2px 2px 8px; margin: 0 -2px; scrollbar-width: thin;
}
.featured-strip > .finding { flex: 0 0 calc((100% - 48px) / 5); scroll-snap-align: start; min-width: 0; }
.featured-strip .finding img, .featured-strip .finding video { aspect-ratio: 16 / 9; }
.featured-strip .finding dl { display: none; }
.featured-strip .finding h3 { font-size: var(--fs-sm); }
.featured-strip .finding p {
  font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.featured-strip .finding .tags span:nth-child(n+3) { display: none; }
.featured-strip .finding audio { margin-top: 10px; }
/* A finding with audio or no media at all gets a panel where the picture
   would be, labelled with its domain, so the row keeps its rhythm. */
.featured-strip .finding:not(:has(img, video))::before {
  content: attr(data-domain); display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9; letter-spacing: .1em; text-transform: uppercase;
  font-size: var(--fs-xs); font-weight: 600; color: var(--masthead-accent);
  background: linear-gradient(135deg, var(--masthead-bg) 0%, var(--masthead-bg-2) 100%);
}
.featured-more { margin: 2px 0 0; }
.featured-more > summary {
  cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--accent);
  padding: 6px 0; list-style: none;
}
.featured-more > summary::-webkit-details-marker { display: none; }
.featured-more > summary::before {
  content: "\25b8"; display: inline-block; margin-right: 8px; color: var(--text-muted);
  font-size: 12px; transition: transform .12s;
}
.featured-more[open] > summary::before { transform: rotate(90deg); }
.featured-more .facets { margin-top: 12px; }

/* ---------- the report list ---------- */
.list-filter { margin: 0 0 14px; }
.report-list { display: grid; gap: 22px; }
h3.month {
  margin: 0 0 6px; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600;
}
ol.rows {
  list-style: none; margin: 0; padding: 0; max-width: none; color: inherit;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-1); overflow: hidden;
}
.report-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center; gap: 6px 14px; margin: 0; padding: 10px 14px 10px 11px;
  border-left: 3px solid var(--src, var(--line-strong)); border-bottom: 1px solid var(--line);
}
ol.rows > .report-row:last-child { border-bottom: 0; }
.report-row:hover { background: var(--surface-2); }
.row-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-title {
  font-size: var(--fs-base); font-weight: 620; color: var(--text-primary);
  text-decoration: none; line-height: 1.3;
}
.row-title:hover { color: var(--accent); text-decoration: underline; }
.row-meta {
  font-size: var(--fs-xs); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.series-mark { font-size: var(--fs-xs); color: var(--text-muted); }
.row-when {
  font-size: var(--fs-sm); color: var(--text-primary); font-weight: 560;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* A date that was read from the title rather than the manifest window. */
.row-when.is-inferred {
  text-decoration: underline dotted var(--text-muted); text-underline-offset: 3px; cursor: help;
}
.row-published { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }

.source-mark {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 24px; height: 24px; border-radius: 6px; background: var(--src, var(--line-strong));
  /* Dark ink on the dark-mode fills: white fell to 2.3:1 on the green. */
  color: var(--mark-ink); font-size: var(--fs-xs); font-weight: 700; line-height: 1;
}
.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;
}

/* Review status as a pill. Reviewed is the one filled pill on the page, the
   same claim the solid card border makes in the featured strip. */
.status-chip {
  display: inline-block; font-size: var(--fs-xs); line-height: 1.3; border-radius: 999px;
  padding: 3px 10px; border: 1px solid var(--line-strong); color: var(--text-secondary);
  white-space: nowrap; font-weight: 560;
}
.status-reviewed {
  background: var(--status-reviewed); border-color: var(--status-reviewed);
  color: var(--surface-1); font-weight: 620;
}
.status-classification { border-color: var(--status-classification); color: var(--status-classification); }
.status-gap { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.status-context { border-style: dashed; color: var(--text-muted); }
.status-active { background: var(--good-bg); border-color: var(--good-line); color: var(--good-ink); }
.status-inactive { border-style: dashed; color: var(--text-muted); }

/* ---------- source summaries ---------- */
.sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px; align-items: start; margin-bottom: 8px; }
.source-summary {
  background: var(--surface-1); border: 1px solid var(--line);
  border-top: 3px solid var(--src, var(--line-strong)); border-radius: 10px; padding: 16px;
}
.source-summary h3 { margin: 0 0 8px; font-size: var(--fs-md); display: flex; align-items: center; gap: 8px; }
.source-summary h3 a { color: var(--text-primary); text-decoration: none; }
.source-summary h3 a:hover { color: var(--accent); text-decoration: underline; }
.source-summary p { font-size: var(--fs-sm); }
.source-summary .meta { margin-bottom: 6px; }
.source-summary .caveat, .model-caveats .caveat { font-size: 12.5px; padding: 8px 11px; margin: 8px 0 0; }
.model-caveats { margin: 0 0 14px; max-width: 78ch; }
.model-caveats .caveat:first-child { margin-top: 0; }
dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 13px; }
dt { color: var(--text-muted); }
dd { margin: 0; color: var(--text-secondary); }
.reading { background: var(--surface-1); border: 1px solid var(--line);
  border-radius: 10px; padding: 16px 18px; }
.reading li { margin-bottom: 8px; max-width: 78ch; }
.hidden { display: none; }
.empty { color: var(--text-muted); font-style: italic; }

/* ---------- rules carried over from the per-page stylesheets ---------- */
/* These classes existed only in pages' inline CSS. They are reproduced here so
   nothing loses its layout when the inline blocks go, but retargeted onto the
   shared tokens: the originals hardcoded #fff and var(--muted), which had no
   dark value and no definition in this file respectively. */
.muted { color: var(--text-muted); }
.big { font-size: 26px; font-weight: 600; }
.panel, .asset, .clip, .figure {
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface-1);
}
.panel { padding: 14px; }
.panel p { margin: .35rem 0; }
.asset { overflow: hidden; }
.asset img { width: 100%; display: block; }
.figure { padding: 16px; margin: 16px 0; }
.clip { overflow: hidden; }
.clip video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #111; }
.clip div { padding: 11px 12px 13px; }
.body { padding: 12px; }
.body h3 { margin: 0 0 7px; font-size: 15px; }
.body p { margin: .25rem 0; font-size: 13.5px; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.evidence-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px; margin: 18px 0 24px; }
.warn { border-left: 4px solid var(--warn-line); padding: 12px 14px; background: var(--warn-bg);
  color: var(--warn-ink); border-radius: 0 8px 8px 0; }
p.note.warn { border-left: 4px solid var(--warn-line); background: none; padding: 2px 0 2px 14px; }
.card.context { border-top: 3px solid var(--warn-line); }
.ver.ok { border-top-color: var(--good-ink); }
.ver.ok .tag { color: var(--good-ink); border-color: var(--good-line); }
/* Legacy pill row, the pre-facet form still present on the candidate sheets. */
.controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.controls button {
  border: 1px solid var(--line-strong); background: var(--surface-1); color: var(--text-primary);
  border-radius: 999px; padding: 7px 12px; cursor: pointer; font: inherit; font-size: 13px;
}
.controls button:hover { background: var(--surface-2); }
.controls button.active { background: var(--accent); color: var(--surface-1); border-color: var(--accent); }

/* ---------- contact sheets ---------- */
/* These carry hundreds of crops in one grid, so they get the room. Prose inside
   them stays at its measure because p and ul are capped globally. */
.family-sheet .wrap { width: min(1180px, calc(100vw - 44px)); }

/* ---------- hub pages ---------- */
.family-hub .nodes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px; align-items: start; }
.node { background: var(--surface-1); border: 1px solid var(--line);
  border-top: 3px solid var(--src, var(--line-strong)); border-radius: 10px; padding: 14px 15px; }
.node h3 { margin: 0 0 4px; font-size: 14.5px; }
.node .coords { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; margin: 0; }
.node .node-state { margin: 8px 0 0; font-size: var(--fs-xs); }
.node .node-state .meta { display: inline; margin: 0 0 0 6px; }
.node .floor { font-size: 12.5px; color: var(--text-secondary); margin-top: 8px; }

/* ---------- footer ---------- */
footer { color: var(--text-muted); font-size: 12.5px; padding: 34px 0 46px;
  margin-top: 44px; border-top: 1px solid var(--line); }
footer code { font-size: 11.5px; }

/* ---------- tooltip ---------- */
#tip {
  position: fixed; pointer-events: none; opacity: 0; transition: opacity .1s;
  background: var(--text-primary); color: var(--surface-1); font-size: 12px;
  padding: 6px 9px; border-radius: 6px; line-height: 1.4; z-index: 40; max-width: 260px;
  font-variant-numeric: tabular-nums;
}
[data-tip] { cursor: default; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .featured-strip > .finding { flex-basis: calc((100% - 24px) / 3); }
}
@media (max-width: 720px) {
  .find-head { display: block; }
  .tag { display: inline-block; margin-top: 8px; }
  .facet > .facet-label { min-width: 100%; }
  .day > summary .peak { margin-left: 0; }
  .section-head { display: block; }
  /* Rows fold to two lines: the title, then date, status and publish date. */
  .report-row { grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; }
  .report-row .source-mark { grid-row: 1 / span 2; margin-top: 2px; }
  .report-row .row-when, .report-row .status-chip, .report-row .row-published {
    grid-column: 2; justify-self: start;
  }
  .report-row .row-when { margin-top: 2px; }
  .row-meta { white-space: normal; }
}
@media (max-width: 620px) {
  .hero { gap: 14px; }
  .cards, .findings { grid-template-columns: 1fr; }
  h2 { margin-top: 40px; }
  .featured-strip > .finding { flex-basis: 72vw; }
  .stat-row { gap: 2px 16px; }
  .stat-row b { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}