:root {
  color-scheme: light;
  --panel: #f7f9fa;
  --canvas: #e7ecef;
  --ink: #15242a;
  --muted: #5f7078;
  --line: #bdc9ce;
  /* Borders and dividers, deliberately not `--ink`. The page used the text
     colour to draw every card edge and row separator, so a screen of data read
     as a grid of hard near-black boxes and the rules competed with the words
     inside them (issue #333). One step darker than `--line` so a card edge
     still reads as an edge against `--panel`, nowhere near the ink. */
  --edge: #aebbc1;
  /* One corner radius for every panel, card, table and control. */
  --radius: 10px;
  --radius-sm: 6px;
  --blue: #255ea8;
  --blue-deep: #173e71;
  --orange: #dc633f;
  --sea: #4c948b;
  --gold: #c99327;
  --violet: #756aa8;
  --danger: #ae3e32;
  /* Two faces, not three. The page was setting headings in a condensed sans,
     body copy in a normal sans and every label and figure in a mono, so three
     unrelated typefaces were visible in a single screenshot and the layout read
     as two designs stitched together (issue #333). `--display` now names the
     same family as `--body`; headings separate themselves by size, weight and
     letter-spacing, which is the difference a reader actually registers. The
     mono stays -- it is the one face doing a job the sans cannot, holding
     figures in tabular columns that line up down the page. */
  --body: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --display: var(--body);
  --utility: "SFMono-Regular", "Cascadia Code", "Roboto Mono", monospace;
  --shadow: 0 16px 50px rgb(27 48 56 / 8%);
}

[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Nothing on this page is meant to be reached by scrolling sideways: every
   wide table and chart carries its own `overflow-x: auto` container. So a
   decorative overhang -- a hover label, a focus ring, a glyph drawn past its
   box -- must never become a page-level scrollbar (issue #333). `clip` rather
   than `hidden` because `hidden` would make the body a scroll container and
   break every `position: sticky` header inside it. */
body {
  overflow-x: clip;
}

body {
  margin: 0;
  /* The graph-paper grid keeps the Radar identity without competing with the
     row separators, card borders, and score tracks drawn over it: cut its
     contrast in half (issue #248). */
  background:
    linear-gradient(90deg, rgb(37 94 168 / 1.5%) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(rgb(37 94 168 / 1.5%) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--canvas);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.5;
}

button,
input,
select {
  color: inherit;
  font: inherit;
}

button,
select {
  cursor: pointer;
}

a {
  color: var(--blue-deep);
}

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 20;
  left: 1rem;
  top: 1rem;
  padding: 0.65rem 0.85rem;
  background: var(--ink);
  color: white;
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: none;
}

.masthead,
.view-nav,
main,
footer {
  width: min(1680px, calc(100% - 48px));
  margin-inline: auto;
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  border-bottom: 1px solid var(--edge);
}

.brand {
  display: inline-flex;
  gap: 0.85rem;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}

.brand strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 1;
}

.brand small,
.eyebrow,
.section-title span,
#today-view .section-title h1,
#today-view .section-title h2,
.heading-note,
.date-control,
footer,
th {
  font-family: var(--utility);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
}

.brand small {
  color: var(--muted);
}

.brand-mark {
  position: relative;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: 50%;
}

.brand-mark::before,
.brand-mark::after {
  position: absolute;
  content: "";
  background: var(--line);
}

.brand-mark::before {
  width: 1px;
  height: 100%;
  left: 50%;
}

.brand-mark::after {
  width: 100%;
  height: 1px;
  top: 50%;
}

.brand-mark span {
  position: absolute;
  inset: 8px;
  border-top: 2px solid var(--orange);
  border-radius: 50%;
  transform: rotate(35deg);
}

.masthead-end {
  display: grid;
  /* RSS, language, contact, then the star/fork/issues group. */
  grid-template-columns: repeat(6, 2.6rem);
  gap: 0.7rem;
  align-items: center;
  justify-content: flex-end;
}

.repo-badges {
  display: flex;
  grid-column: span 3;
  gap: 0.7rem;
  align-items: center;
}

.repo-badge {
  position: relative;
  display: inline-flex;
  width: 2.6rem;
  height: 2.6rem;
  gap: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--utility);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: border-color 60ms ease, background 60ms ease, color 60ms ease,
    transform 60ms ease;
}

.repo-badge:hover,
.repo-badge:focus-visible {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--panel);
  transform: translateY(-1px);
}

/* Utility labels should appear with the interaction, not after the browser's
   delayed native-title timeout. JavaScript supplies the localized text. */
.repo-badge::after {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.55rem);
  left: 50%;
  padding: 0.38rem 0.52rem;
  /* Ink on ink: this box is the dark chip itself, not a divider, so it keeps
     the text colour its background uses rather than picking up `--edge`. */
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--panel);
  content: attr(data-tooltip);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -0.2rem);
  transition: opacity 60ms ease, transform 60ms ease;
  visibility: hidden;
  white-space: nowrap;
}

.repo-badge:hover::after,
.repo-badge:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

/* The last badge sits flush against the right edge of the page, so a label
   centred under a 2.6rem button hangs ~19px past it. `visibility: hidden` does
   not remove a box from layout, so that overhang widened the whole document at
   every viewport above the 760px breakpoint and the page slid left and right
   with nothing to show for it (issue #333). Anchored to the badge's right edge
   the label stays on the page whether it is showing or not. */
.repo-badges > .repo-badge:last-child::after {
  right: 0;
  left: auto;
  transform: translate(0, -0.2rem);
}

.repo-badges > .repo-badge:last-child:hover::after,
.repo-badges > .repo-badge:last-child:focus-visible::after {
  transform: translate(0, 0);
}

/* The language and contact controls are <button>s, not <a>s, because they
   open dialogs and toggle state instead of navigating. Without these resets a
   button renders with the user agent's default chrome (grey background,
   distinct font) over the repo-badge styling shared with the links beside it. */
button.repo-badge {
  appearance: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

button.repo-badge svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

/* Brand marks (the GitHub repo octicon, star) are single-color glyphs with no
   meaningful stroke form, so they fill instead of outline. The GitHub repo
   octicon also appears on the star badge, which is an <a>, so the selector
   covers both link and button badges. */
.repo-badge svg,
.repo-badge svg.brand-icon,
.repo-badge svg.outline-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 1.5rem;
}

.repo-badge svg.brand-icon {
  fill: currentColor;
  stroke: none;
}

/* Outline icons (globe, fork, issues) use stroke rather than fill, matching
   the button badge icons. Applies to link and button badges alike so every
   top-right icon renders at the same size (issue #213). */
.repo-badge svg.outline-icon {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.repo-badge-count {
  position: absolute;
  top: -0.35rem;
  right: -0.45rem;
  z-index: 1;
  min-width: 1.1ch;
  padding: 0.12rem 0.28rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-size: 0.62rem;
  line-height: 1.1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.feed-badge svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.repo-badge-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The language toggle shows its target script as a text glyph ("中" / "EN")
   rather than a pictogram: a character reads as "language" directly, where a
   globe or document icon does not. */
.repo-badge-glyph {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
}

.feed-badge svg circle {
  fill: currentColor;
  stroke: none;
}

.view-nav {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}

.view-nav button,
.view-nav a {
  min-width: 112px;
  padding: 0.85rem 1.25rem;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: var(--utility);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
}

.view-nav .nav-active {
  background: var(--ink);
  color: white;
}

/* Rubric is a dialog trigger rather than a page link, so its inactive blue is
   kept separate from the shared active treatment above. */
#rubric-nav:not(.nav-active) {
  color: var(--blue-deep);
}

#rubric-nav::after {
  content: " ⓘ";
}

#rubric-nav:not(.nav-active):hover {
  background: var(--panel);
}

main {
  min-height: calc(100vh - 210px);
}

.view {
  padding: clamp(2.25rem, 4vw, 3.75rem) 0 6rem;
}

/* The leaderboard's primary object is the figure, so its top chrome is a
   budget rather than a canvas: on a 1440x900 laptop the chart began at
   y=1356, entirely below the fold, behind KPI cards and accordions that
   summarise it. Those moved below the figure; this recovers the last of the
   gap so the visualization is visibly underway on load. */
#leaderboard-view {
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
}

/* View headings are h2s under the page's single h1, and they share the
   quiet leaderboard-heading scale rather than the display scale the old
   per-view h1s used. */
.view-heading h2 {
  margin: 0;
  max-width: none;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.2;
}

.view-heading {
  display: flex;
  gap: 2rem;
  align-items: end;
  justify-content: space-between;
  margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
}

.eyebrow {
  margin: 0 0 0.7rem;
  color: var(--blue);
}

h1,
h2,
p {
  margin-top: 0;
}

h1,
h2 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.025em;
}

h1 {
  max-width: 800px;
  margin-bottom: 0;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.015em;
}

#today-view {
  padding-top: clamp(0.75rem, 1vw, 1.25rem);
}

.today-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
}

h2 {
  font-size: 1.35rem;
  line-height: 1.1;
}

.heading-note {
  max-width: 380px;
  margin-bottom: 0.3rem;
  color: var(--muted);
  line-height: 1.7;
  text-align: right;
}

.date-control,
.filter-panel label {
  display: grid;
  gap: 0.45rem;
  color: var(--muted);
  /* Filter names are UI labels, not machine values, so they use the body
     face at normal case instead of the uppercase mono metadata system
     (issue #248). */
  font-family: var(--body);
  font-size: 0.8rem;
  letter-spacing: normal;
}

select,
input {
  min-height: 44px;
  padding: 0.55rem 2.25rem 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background-color: var(--panel);
  color: var(--ink);
  font-family: var(--body);
  font-size: 0.9rem;
  letter-spacing: normal;
}

.content-grid {
  display: grid;
  /* The sidebar carries the daily narrative, Q&A, and the two health cards,
     so it earns 40% against the results column's 60% (issue #248). */
  grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  gap: 2rem;
  align-items: start;
}

.section-title {
  display: flex;
  /* Wraps rather than crushes. On a 390px phone the row squeezed the heading
     into a 29px column and "Today's radar" came out as four stacked fragments,
     "Tod / ay' / s rad / ar". The counts drop to their own line instead. */
  flex-wrap: wrap;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--edge);
}

.section-title h1,
.section-title h2 {
  margin-bottom: 0;
}

/* The results heading reads as a caption for the list beneath it, so it
   carries the regular weight rather than the display h2 weight (issue #248).
   The heading is semantically an h1, but it renders exactly like the counts
   caption beside it: same utility face, same 0.72rem size, inherited from
   the shared small-caps group above. */
#today-view .section-title h1,
#today-view .section-title h2 {
  color: var(--muted);
  font-weight: 400;
}

.section-title span {
  color: var(--muted);
}

/* Counts and the sort caption sit right of the heading; the spans inherit
   the uppercase mono treatment because they are machine values (issue #248). */
.results-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  align-items: baseline;
  justify-content: flex-end;
  text-align: right;
  /* Right-aligned when it shares the heading's line, and pushed to the right
     edge rather than left-aligned when `.section-title` wraps it onto its own. */
  margin-left: auto;
}

.results-meta span {
}

#today-sort {
  white-space: nowrap;
}

/* The day's narrative shares the right sidebar with the health and corpus
   cards, so it carries the same box treatment and the sidebar column
   constrains its width instead of an explicit cap (issue #248). */
.daily-briefing {
  margin-bottom: 1.25rem;
  padding: 1rem 1.4rem;
  border: 1px solid var(--edge);
  background: var(--panel);
}

.daily-briefing-title {
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--edge);
  font-size: 1rem;
}

/* Each briefing bullet becomes its own insight: a bold takeaway head, the
   "why it matters" support beneath it, and a quiet metadata chip row. */
.briefing-insight + .briefing-insight {
  margin-top: 1.35rem;
}

.briefing-insight-head {
  margin: 0 0 0.3rem;
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.briefing-insight-body {
  margin: 0 0 0.45rem;
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 72ch;
}

.briefing-insight-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
}

.briefing-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.14rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--utility);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
}

.briefing-chip-high {
  border-color: var(--sea);
  color: var(--sea);
}

.briefing-chip-medium {
  border-color: var(--gold);
  color: #7d5c14;
}

.briefing-chip-low,
.briefing-chip-moderate {
  border-color: var(--line);
  color: var(--muted);
}

.briefing-chip-sources {
  border-color: var(--ink);
  color: var(--ink);
  font-weight: 600;
}

.briefing-evidence-link {
  color: var(--blue-deep);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
}

.briefing-evidence-link:hover {
  text-decoration-thickness: 0.14em;
}

.daily-briefing-details {
  margin-top: 1.1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}

.daily-briefing-details summary {
  width: fit-content;
  color: var(--blue-deep);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
}

.daily-briefing-details summary:hover {
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.daily-briefing-meta {
  margin: 0.7rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.daily-briefing-caveat {
  margin: 0.85rem 0 0;
  padding-left: 0.8rem;
  border-left: 3px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}

.daily-briefing-evidence {
  margin-top: 0.75rem;
}

.daily-briefing-evidence-title {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
}

.daily-briefing-evidence ul {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.86rem;
}

.daily-briefing-evidence li + li {
  margin-top: 0.22rem;
}

.daily-questions {
  margin-bottom: 1.25rem;
  padding: 1rem 1.4rem;
  border: 1px solid var(--edge);
  background: var(--panel);
}

#daily-questions-body {
  max-width: 72ch;
}

.daily-questions-title {
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--edge);
  font-size: 1rem;
}

.daily-questions-caveat {
  margin: 0 0 0.85rem;
  padding-left: 0.8rem;
  border-left: 3px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}

.question-group + .question-group {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.question-group-title {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.answer + .answer {
  margin-top: 1.15rem;
}

.answer-question {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  line-height: 1.3;
}

.answer-signal,
.answer-plain,
.answer-takeaway,
.answer-counter-view {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
}

.answer-signal {
  color: var(--ink);
  font-weight: 500;
}

.answer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.45rem 0 0;
}

.answer-source-count {
  align-self: center;
  color: var(--muted);
  font-family: var(--utility);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}

.answer-plain {
  color: var(--muted);
}

.answer-citations {
  margin: 0.45rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.84rem;
}

.answer-citations li + li {
  margin-top: 0.22rem;
}

.answer-stat-id {
  color: var(--muted);
  font-size: 0.94em;
}

/* An answer the evidence cannot support is flagged in the flow of the answer,
   not tucked away: withholding it is a result the reader needs to see. */
.answer-insufficient {
  margin: 0.4rem 0 0;
  padding-left: 0.8rem;
  border-left: 3px solid var(--line);
  color: var(--muted);
  font-size: 0.86rem;
  font-style: italic;
}

.answer-counter-view {
  padding-left: 0.8rem;
  border-left: 3px solid var(--line);
}

.pill {
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--utility);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
}

.pill-confidence {
  flex: none;
  align-self: flex-start;
  font-weight: 600;
  text-transform: lowercase;
}

.pill-confidence-high {
  border-color: var(--sea);
  color: var(--sea);
}

.pill-confidence-medium {
  border-color: var(--gold);
  color: #7d5c14;
}

.pill-confidence-low,
.pill-confidence-moderate {
  border-color: var(--line);
  color: var(--muted);
}

/* The full answer (explanation, sources, takeaway, counter-view) is collapsed
   behind a native disclosure whose summary is the question and its one-line
   signal (issue #183). Split the supporting text from the headline so a scan
   of a day's questions stays a scan, and the detail is on demand again. */
.answer-disclosure {
  margin-top: 0.55rem;
  border-top: 1px dashed var(--line);
}

.answer-disclosure-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0 0.25rem;
  color: var(--blue-deep);
  cursor: pointer;
  font-family: var(--utility);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  list-style: none;
}

.answer-disclosure-summary::-webkit-details-marker {
  display: none;
}

.answer-disclosure-summary::before {
  content: "›";
  font-size: 2.7rem;
  line-height: 1;
  line-height: 1;
  transition: transform 140ms ease;
}

.answer-disclosure[open] > .answer-disclosure-summary::before {
  transform: rotate(90deg);
}

.answer-disclosure-summary:hover {
  color: var(--blue);
}

.answer-detail {
  padding-bottom: 0.2rem;
}

.daily-questions-meta {
  margin: 0.9rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
}

.record-card {
  border-bottom: 1px solid var(--line);
}

.record-summary {
  display: grid;
  grid-template-columns: 26px 38px minmax(0, 1fr) 150px;
  gap: 1rem;
  align-items: start;
  padding: 1.5rem 0;
  cursor: pointer;
  list-style: none;
}

/* Model card rows carry no rank number, so they have three children where a
   ranked benchmark row has four. Without its own template the heading lands in
   the 38px rank column and wraps one character per line.

   An explicit class rather than `:not(:has(.signal-rank))`: this rule is
   layout-critical, and a browser without :has() support drops the whole
   selector, which restores exactly the one-character-per-line wrap it exists to
   prevent. A class degrades to "unstyled but readable" instead. */
.record-summary.record-summary-unranked {
  grid-template-columns: 26px minmax(0, 1fr) 150px;
}

.record-summary::before {
  content: "›";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--blue-deep);
  font-family: var(--utility);
  font-size: 2.2rem;
  line-height: 1;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease;
}

.record-summary::-webkit-details-marker {
  display: none;
}

.record-summary:hover::before {
  border-color: var(--blue);
}

/* The whole row is the click target; a subtle wash announces the affordance
   before the chevron is noticed (issue #248). */
.record-summary:hover {
  background: color-mix(in srgb, var(--panel) 55%, transparent);
}

.record-card[open] {
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}

.record-card[open] > .record-summary::before {
  transform: rotate(90deg);
  border-color: var(--blue);
  background: var(--blue);
  color: white;
}

.record-card[open] .record-summary {
  border-bottom: 1px dashed var(--line);
}

.record-detail {
  margin: 0 186px 0 96px;
  padding: 1.25rem 0 1.75rem;
}

.record-detail > h3 {
  margin-top: 1.5rem;
}

.record-detail .detail-summary {
  white-space: pre-line;
}

.section-note,
.trend-message {
  color: var(--muted);
  font-size: 0.85rem;
}

.section-note {
  margin: 0.8rem 0 0;
}

.attention-card {
  background: color-mix(in srgb, #e9dfff 28%, transparent);
}

.attention-activity {
  display: grid;
  gap: 0.25rem;
  color: #51477f;
  font-family: var(--utility);
  font-size: 0.68rem;
  text-align: right;
}

.signal-rank {
  color: var(--orange);
  font-family: var(--utility);
  font-size: 0.78rem;
}

.record-card h3 {
  overflow-wrap: anywhere;
  margin: 0.2rem 0 0.55rem;
  font-family: var(--display);
  font-size: 1.45rem;
  line-height: 1.05;
}

.record-heading p {
  margin-bottom: 0.8rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.signal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
  align-items: baseline;
  margin-bottom: 0.35rem;
  color: var(--blue-deep);
  /* Provenance is a UI label, not a machine value: body face, normal case
     (issue #248). */
  font-family: var(--body);
  font-size: 0.82rem;
  letter-spacing: normal;
}

/* The collapsed row's provenance line: source, event time, and at most two
   categories in plain text, dot-separated, so the title leads and no chip
   competes with it (issue #248). */
.record-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 0.2rem;
  margin-bottom: 0.35rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.record-meta span + span::before {
  content: "·";
  margin-inline: 0.45rem;
  color: var(--line);
}

.record-meta .meta-source {
  color: var(--ink);
  font-weight: 600;
}

.record-meta .meta-event {
  color: var(--blue-deep);
}

.record-meta .meta-more {
  color: var(--muted);
}

.record-meta .meta-watchlist {
  color: #7d5c14;
  font-weight: 600;
}

/* Raw source facts sit on their own quiet line. They are visible before a
   card is opened because they are the evidence behind the derived Adoption
   score, but they stay typographically below the title and provenance. */
.record-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.85rem;
  margin: 0 0 0.65rem;
  color: var(--muted);
  font-family: var(--utility);
  font-size: 0.75rem;
}

.record-facts strong {
  color: var(--ink);
  font-weight: 600;
}

/* The one line saying why a tracked artifact matters, ahead of upstream prose. */
.signal-tldr {
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.signal-why {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-style: italic;
}

/* Marked as an absence, not styled like real description text. */
.signal-nodesc {
  color: var(--muted);
  font-style: italic;
  opacity: 0.75;
}

.score {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: center;
  justify-self: end;
  width: 150px;
}

.score-value {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  width: 100%;
  /* A score is a machine value, so it reads in the mono system; the display
     face stays reserved for the benchmark titles, which now dominate the row
     (issue #248). */
  font-family: var(--utility);
}

.score-value strong {
  font-size: 1.15rem;
  line-height: 1;
}

.score-value span {
  justify-self: end;
  color: var(--muted);
  font-family: var(--utility);
  font-size: 0.65rem;
}

.score-track {
  width: 100%;
  height: 6px;
  margin-top: 0.35rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background: transparent;
}

.score-track span {
  display: block;
  height: 100%;
  background: var(--blue);
}

.score-label {
  margin-top: 0.3rem;
  color: var(--muted);
  /* The score's caption is a UI label, not a machine value: body face,
     normal case. */
  font-family: var(--body);
  font-size: 0.7rem;
  letter-spacing: normal;
}

/* The label is a button, but it keeps the label's typography: the affordance
   is the info mark and the underline on hover, not a boxed control competing
   with the score it annotates. */
.score-explain {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.score-explain:hover span:first-child,
.rubric-link:hover span:first-child {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.score-explain:hover .info-mark,
.rubric-link:hover .info-mark {
  border-color: var(--blue);
  background: var(--blue);
  color: white;
}

.info-mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--blue-deep);
  font-family: var(--display);
  font-size: 0.62rem;
  line-height: 1;
}

.rubric-link {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  margin: -1rem 0 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue-deep);
  font-family: var(--utility);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.rubric-title {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
}

.rubric-formula {
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--blue);
  background: white;
  color: var(--ink);
  font-family: var(--utility);
  font-size: 0.78rem;
}

.rubric-worked {
  margin: 1.25rem 0 0;
  padding: 1rem;
  border: 1px solid var(--line);
  background: white;
}

.rubric-worked strong {
  font-family: var(--utility);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}

.rubric-worked p {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-family: var(--utility);
  font-size: 0.75rem;
}

.rubric-component {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
}

.rubric-component:first-of-type {
  border-top: 1px solid var(--edge);
  margin-top: 2rem;
}

.rubric-component-head {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
}

.rubric-component h3 {
  margin: 0;
}

.rubric-weight {
  flex: none;
  color: var(--blue-deep);
  font-family: var(--utility);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}

.rubric-component p {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.rubric-bands {
  margin: 0.7rem 0 0;
  padding-left: 1.1rem;
  color: var(--muted);
  font-family: var(--utility);
  font-size: 0.72rem;
  line-height: 1.8;
}

.rubric-contribution {
  margin-top: 0.7rem !important;
  color: var(--ink) !important;
  font-family: var(--utility);
  font-size: 0.72rem !important;
}

.rubric-limits {
  margin: 2rem 0;
  padding: 1.2rem;
  border-left: 3px solid var(--orange);
  background: #fbf0ec;
}

.rubric-limits h3 {
  margin: 0 0 0.6rem;
  font-family: var(--utility);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.rubric-limits ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.65;
}

/* Fetch plumbing is secondary to the results beside it, so it scrolls away
   with the rest of the page rather than sticking to the viewport. Pinning it
   would give the least important panel the one position that never yields. */
.health-panel {
  align-self: start;
  padding: 0.9rem 1.4rem;
  border: 1px solid var(--edge);
  background: var(--panel);
}

.health-panel summary {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  justify-content: space-between;
  cursor: pointer;
}

.health-panel-title {
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: 0.03em;
}

.health-panel-status {
  color: var(--muted);
  font-family: var(--utility);
  font-size: 0.68rem;
  letter-spacing: 0.07em;
}

.health-panel-status.has-failure {
  color: var(--danger);
}

.health-panel details[open] summary {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}

.health-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.health-panel li {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 0.3rem 0.65rem;
  align-items: center;
  min-height: 52px;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  align-content: center;
}

.health-panel li:last-child {
  border-bottom: 0;
}

.corpus-totals-panel {
  margin-top: 1.25rem;
}

.corpus-totals-panel li {
  grid-template-columns: 1fr auto;
}

.health-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
}

.health-dot.ok {
  background: var(--sea);
}

.health-name {
  font-weight: 600;
}

.health-count {
  color: var(--muted);
  font-family: var(--utility);
  font-size: 0.68rem;
}

.health-detail {
  grid-column: 2 / -1;
  overflow: hidden;
  margin: 0;
  color: var(--danger);
  font-size: 0.72rem;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.trend-panel,
.domain-panel,
.ledger,
.filter-panel {
  border: 1px solid var(--edge);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.trend-panel,
.domain-panel,
.ledger {
  padding: clamp(1.25rem, 3vw, 2rem);
}

.domain-panel {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.domain-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-top: 1rem;
}

.domain-card {
  padding: 1rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--line);
  background: var(--canvas);
}

.domain-card.is-up {
  border-top-color: var(--sea);
}

.domain-card.is-down {
  border-top-color: var(--orange);
}

.domain-head {
  display: flex;
  gap: 0.45rem;
  align-items: center;
}

.domain-head h3 {
  margin: 0;
  font-family: var(--utility);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
}

.domain-count {
  margin: 0.35rem 0 0.65rem;
  font-family: var(--display);
  font-size: 2.4rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.domain-stats {
  display: grid;
  gap: 0.15rem 0.75rem;
  grid-template-columns: 1fr auto;
  margin: 0;
}

.domain-stats dt {
  color: var(--muted);
  font-family: var(--utility);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
}

.domain-stats dd {
  margin: 0;
  font-family: var(--utility);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  justify-content: flex-end;
}

.legend-item {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  color: var(--muted);
  font-family: var(--utility);
  font-size: 0.63rem;
}

.legend-swatch {
  width: 8px;
  height: 8px;
  background: var(--swatch);
}

.attention-swatch,
.attention-volume {
  background: var(--ink);
}

.trend-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  cursor: pointer;
}

.trend-filter input {
  cursor: pointer;
}

.trend-filter .heading-note {
  margin: 0;
  font-size: 0.75rem;
  cursor: default;
}

/* A source that found nothing is printed in the mix rather than left out, so
   it needs to read as a gap and not as another count (issue #260). */
.source-gap {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--danger);
  border-radius: 999px;
  color: var(--danger);
  font-family: var(--utility);
  font-size: 0.68rem;
  white-space: nowrap;
}

/* Records arrived but none scored high enough to list. That is the ranking
   working, not a source to go and check, so it reads as a quiet note rather
   than sharing the alarm colour with a source that returned nothing. */
.source-gap.is-unranked {
  border-color: var(--line);
  color: var(--muted);
}

.source-gap-note {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 0.85rem;
}

.source-gap-note.is-warning {
  border-left-color: var(--danger);
}

.trend-message {
  margin: 1.25rem 0 0;
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--orange);
  background: var(--paper);
}

.trend-chart {
  display: flex;
  gap: clamp(0.4rem, 1.5vw, 1.2rem);
  align-items: end;
  min-height: 330px;
  padding: 2rem 0 0;
  overflow-x: auto;
}

.day-column {
  display: grid;
  flex: 1 0 64px;
  gap: 0.6rem;
  min-width: 64px;
  border: 0;
  background: transparent;
  transition: opacity 180ms ease;
}

.series-bars {
  display: flex;
  gap: clamp(1px, 0.25vw, 4px);
  align-items: end;
  justify-content: center;
  height: 260px;
  border-bottom: 1px solid var(--edge);
}

.attention-volume,
.bar-segment {
  width: min(10px, 13%);
  transition: filter 180ms ease;
}

.bar-segment {
  background: var(--bar-color);
}

.day-column:hover .bar-segment,
.day-column:hover .attention-volume,
.day-column:focus-visible .bar-segment,
.day-column:focus-visible .attention-volume {
  filter: saturate(1.35) brightness(0.93);
}

/* The active column stays at full strength while the rest recede, so the eye
   lands on one day instead of hunting for a highlight. The card shows a single
   day, so exactly one column stays lit. A pointer wins when present, which
   stops a column left focused by the keyboard from keeping a second one lit. */
.trend-chart:has(.day-column:hover) .day-column:not(:hover) {
  opacity: 0.45;
}

.trend-chart:not(:has(.day-column:hover)):has(.day-column:focus-visible)
  .day-column:not(:focus-visible) {
  opacity: 0.45;
}

.trend-chart-frame {
  position: relative;
}

.day-tooltip {
  position: absolute;
  z-index: 5;
  display: grid;
  gap: 0.5rem;
  width: max-content;
  max-width: 260px;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--edge);
  background: var(--panel);
  box-shadow: var(--shadow);
  pointer-events: none;
}

.day-tooltip-date {
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.day-tooltip-total {
  color: var(--muted);
  font-family: var(--utility);
  font-size: 0.68rem;
}

.day-tooltip-rows {
  display: grid;
  gap: 0.3rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}

.day-tooltip-row {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 0.5rem;
  align-items: center;
  font-family: var(--utility);
  font-size: 0.7rem;
}

.day-tooltip-rest {
  grid-template-columns: 1fr auto;
  color: var(--muted);
}

.day-tooltip-value {
  font-variant-numeric: tabular-nums;
}

.day-tooltip-attention {
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
  color: var(--violet);
  font-family: var(--utility);
  font-size: 0.68rem;
}

.day-label {
  overflow: hidden;
  color: var(--muted);
  font-family: var(--utility);
  font-size: 0.6rem;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
}

.ledger {
  margin-top: 2rem;
}

/* Collection history is useful when maintaining the radar, but it is not an
   audience-facing trend. Keep it as the last, closed control on the page so it
   remains one click away without competing with the chart above it. */
.dev-checker {
  margin-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.dev-checker-summary {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  width: fit-content;
  padding: 0.45rem 0;
  font-family: var(--utility);
  font-size: 0.65rem;
  cursor: pointer;
}

.dev-checker-summary::marker {
  color: var(--muted);
  font-size: 0.55rem;
}

.dev-checker-summary #snapshot-count::before {
  content: "\00b7";
  margin-right: 0.5rem;
}

.dev-checker-body {
  padding: 0.25rem 0 1rem;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 1100px;
  border-collapse: collapse;
}

th,
td {
  padding: 1rem 0.8rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

th {
  color: var(--muted);
}

td {
  font-size: 0.88rem;
}

td a {
  font-weight: 600;
}

.filter-panel {
  display: grid;
  grid-template-columns: 2fr repeat(6, minmax(105px, 1fr)) auto;
  gap: 1rem;
  align-items: end;
  margin-bottom: 3rem;
  padding: 1.25rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The Today toolbar is one compact row under the tabs: search, the scan
   date, the drawer trigger, and a refresh control. Seven permanently
   visible selects pushed the results below the fold, so the secondary
   filters moved into a popover (issue #248). */
.today-filters {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1rem;
  align-items: center;
  margin-bottom: 1.25rem;
}

.today-filters .search-field {
  display: block;
  flex: 1 1 260px;
  margin: 0;
}

.today-filters .search-field input {
  width: 100%;
  min-width: 0;
}

.today-filters .date-field {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  white-space: nowrap;
}

.today-filters .filters-toggle {
  display: inline-flex;
  gap: 0.4rem;
  align-items: baseline;
  min-height: 44px;
  padding: 0.6rem 1rem;
  border: 1px solid var(--edge);
  background: transparent;
  font-family: var(--utility);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}

.today-filters .filters-toggle:hover {
  background: var(--ink);
  color: white;
}

.today-filters .filters-toggle[aria-expanded="true"] {
  background: var(--ink);
  color: white;
}

.today-filters .filters-toggle #filters-count {
  color: var(--muted);
}

.today-filters .filters-toggle[aria-expanded="true"] #filters-count,
.today-filters .filters-toggle:hover #filters-count {
  color: inherit;
}

.today-filters .refresh-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.6rem;
  border: 1px solid var(--edge);
  background: transparent;
  color: var(--ink);
}

.today-filters .refresh-button:hover {
  background: var(--ink);
  color: white;
}

.today-filters .refresh-button svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The popover floats over the results, so it stays out of the document
   flow and cannot push the first records below the fold. */
.filters-drawer {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1rem;
  width: clamp(300px, 46vw, 560px);
  padding: 1.25rem;
  border: 1px solid var(--edge);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.filters-drawer[hidden] {
  display: none;
}

.filters-drawer label {
  display: grid;
  gap: 0.45rem;
  color: var(--muted);
}

.filters-drawer .clear-button {
  grid-column: 1 / -1;
  justify-self: end;
}

.filter-panel input,
.filter-panel select {
  width: 100%;
}

.clear-button {
  min-height: 44px;
  padding: 0.6rem 1rem;
  border: 1px solid var(--edge);
  background: transparent;
  font-family: var(--utility);
  font-size: 0.68rem;
}

.clear-button:hover {
  background: var(--ink);
  color: white;
}

.attention-badge {
  display: inline-block;
  margin-right: 0.5rem;
  padding: 0.15rem 0.35rem;
  background: #e9dfff;
  color: #51477f;
}

.empty-state {
  padding: 4rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  text-align: center;
}

.empty-state-try {
  margin-top: 0.75rem;
  font-weight: 600;
}

.empty-state-steps {
  display: inline-block;
  margin: 0.35rem 0 0;
  padding-left: 1.25rem;
  text-align: left;
}

.empty-state-steps li {
  margin: 0.2rem 0;
}

.map-summary {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
  font-family: var(--utility);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.relationship-explorer {
  margin-top: 1.5rem;
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--line);
}

.relationship-explorer > summary {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
}

.relationship-explorer > summary::-webkit-details-marker {
  display: none;
}

.relationship-explorer > summary::after {
  content: "+";
  flex: none;
  color: var(--blue-deep);
  font-family: var(--utility);
  font-size: 3rem;
  line-height: 1;
  font-weight: 300;
}

.relationship-explorer[open] > summary::after {
  content: "−";
}

.relationship-explorer > summary strong {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}

.relationship-explorer-note {
  max-width: 720px;
  margin: 0 0 1rem;
  color: var(--muted);
}

.map-insights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.map-insight-card {
  min-width: 0;
  padding: 1rem;
  border-top: 3px solid var(--blue);
  background: var(--panel);
}

.map-insight-card h2 {
  margin: 0 0 0.75rem;
  font-family: var(--utility);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
}

.map-insight-card ul {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.map-insight-card li {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.76rem;
}

.map-insight-card li span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
}

.map-insight-card li strong {
  flex: none;
  font-family: var(--utility);
  font-size: 0.68rem;
  font-weight: 600;
  text-align: right;
}

.map-insight-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

/* An expandable summary row. The plain rows are flex containers, so the flex
   layout moves onto the <summary> and the <li> becomes a block that can hold
   the expanded list beneath it. */
.map-insight-card li.insight-row-expandable {
  display: block;
}

.map-insight-card li.insight-row-expandable summary {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}

.map-insight-card li.insight-row-expandable summary::-webkit-details-marker {
  display: none;
}

/* A caret in place of the default marker, so a row reads as openable before it
   is opened. Rotates when open, matching the record cards below. */
.map-insight-card li.insight-row-expandable summary span::before {
  content: "› ";
  display: inline-block;
  color: var(--blue-deep);
  font-family: var(--utility);
  transition: transform 140ms ease;
}

.map-insight-card li.insight-row-expandable summary:hover span,
.map-insight-card li.insight-row-expandable summary:focus-visible span {
  color: var(--ink);
}

.insight-detail-list {
  margin: 0.4rem 0 0.15rem 0.85rem !important;
  padding: 0 0 0 0.6rem !important;
  border-left: 1px solid var(--line);
  gap: 0.3rem !important;
}

/* Overrides the flex row the parent list sets: these entries are single links,
   not label/value pairs, so they should wrap as ordinary text. */
.map-insight-card .insight-detail-list li {
  display: block;
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

.map-insight-card .insight-detail-list li span {
  color: var(--muted);
}

/* Model Card Adoption Rank (issue #83) */

/* Same size as the ranking heading below it. At the global h1 scale (48px)
   this line was the largest thing on the page and outweighed both the ranking
   it introduces and the figure it sits above, while saying less than either. */
.leaderboard-deck {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 780px;
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: clamp(0.92rem, 1.2vw, 1.02rem);
  line-height: 1.45;
}

.ledger-summary::-webkit-details-marker {
  display: none;
}

.evidence-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 1.5rem 0;
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}

.evidence-stat {
  display: grid;
  align-content: start;
  min-height: 132px;
  padding: 1.1rem 1.25rem;
  border-right: 1px solid var(--line);
}

.evidence-stat-summary strong {
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 500;
  line-height: 1;
}

.evidence-stat-summary span {
  margin-top: 0.25rem;
  font-family: var(--utility);
  font-size: 0.68rem;
  letter-spacing: 0.07em;
}

.evidence-stat-summary small {
  margin-top: 0.55rem;
  color: var(--muted);
  font-size: 0.76rem;
}

/* A registry-overview tile now opens to the itemized evidence behind its count
   (issue #183). The tile stays a stat until expanded; the marker turns the
   label into an obvious affordance, and opening reveals only the sources that
   produced the count above it. */
.evidence-disclosure {
  display: block;
}

.evidence-stat-summary {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: pointer;
  list-style: none;
}

.evidence-stat-summary::-webkit-details-marker {
  display: none;
}

.evidence-stat-summary::after {
  content: "›";
  position: absolute;
  top: 0.15rem;
  right: 0;
  color: var(--blue-deep);
  font-family: var(--utility);
  font-size: 3rem;
  line-height: 1;
  transition: transform 140ms ease;
}

.evidence-stat[open] > .evidence-stat-summary::after {
  transform: rotate(90deg);
}

.evidence-detail-list {
  margin: 0.9rem 0 0;
  padding: 0.65rem 0 0;
  border-top: 1px dashed var(--line);
  list-style: none;
}

.evidence-detail-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.3rem 0;
  font-size: 0.78rem;
}

.evidence-detail-list li + li {
  border-top: 1px solid var(--line);
}

.insight-item-name {
  color: inherit;
}

.insight-item-meta {
  color: var(--muted);
  font-size: 0.74rem;
  text-align: right;
  white-space: nowrap;
}

.evidence-detail-empty {
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

/* An organization row in the overview expands to the documents that produced
   its card count, and the nested list is the same one every other tile uses. */
.insight-nested {
  width: 100%;
}

.insight-nested-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
}

.insight-nested-summary::-webkit-details-marker {
  display: none;
}

.insight-nested-summary::after {
  content: "›";
  color: var(--blue-deep);
  font-family: var(--utility);
  font-size: 2.7rem;
  line-height: 1;
  transition: transform 140ms ease;
}

.insight-nested[open] > .insight-nested-summary::after {
  transform: rotate(90deg);
}

.insight-nested > .evidence-detail-list {
  margin: 0.4rem 0 0;
  padding-top: 0.3rem;
  border-top: 1px dashed var(--line);
}

.evidence-thesis {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.9rem 1.25rem;
  background: color-mix(in srgb, var(--sea) 10%, transparent);
  color: var(--ink);
  font-size: 0.88rem;
}

.evidence-thesis-disclosure summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem;
  cursor: pointer;
  list-style: none;
}

.evidence-thesis-disclosure summary::-webkit-details-marker {
  display: none;
}

.evidence-thesis-disclosure summary::after {
  content: "›";
  align-self: center;
  color: var(--blue-deep);
  font-family: var(--utility);
  transition: transform 140ms ease;
}

.evidence-thesis-disclosure[open] > summary::after {
  transform: rotate(90deg);
}

.evidence-thesis-disclosure > .evidence-detail-list {
  margin: 0.6rem 0 0;
  padding: 0.6rem 0 0;
  border-top: 1px dashed var(--line);
}

/* The ranking leads the page it is named after (issue #256). One line per
   benchmark: the name is the scanning target, the count is the measure, and
   the rank is a small fixed-width marker rather than a competing number. */
.leaderboard-top {
  margin: 0 0 0.9rem;
}

.leaderboard-top-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}

/* Half the global h1 scale (issue #313). The old 48px uppercase line was the
   largest object on the page and compressed the ranking it names; and because
   the wrapped title filled its whole max-width box, the (i) beside it landed
   hundreds of pixels away in empty space with no anchor. At this size the
   heading fits one line, so the toggle sits immediately after its last
   glyph, and wrap keeps that true on narrow screens by stacking instead. */
.leaderboard-top-heading h1,
.leaderboard-top-heading h2 {
  margin: 0;
  max-width: none;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.2;
}

/* Named columns, not a wall of whitespace between the name and the count
   (issue #314): a fixed rank marker, a name column capped so a short benchmark
   name doesn't force the reader's eye across the full row width, a bar that
   makes the gap between ranks visible at a glance, and a fixed count. */
.leaderboard-top-columns {
  display: grid;
  grid-template-columns: 2rem minmax(0, 16rem) minmax(0, 1fr) 6.5rem;
  gap: 0.75rem;
  padding: 0 0.85rem 0.3rem;
  color: var(--muted);
  font-family: var(--utility);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
}

.leaderboard-top-columns-count {
  grid-column: 4;
  text-align: right;
}

.leaderboard-top-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--panel);
}

.leaderboard-top-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 16rem) minmax(0, 1fr) 6.5rem;
  gap: 0.75rem;
  align-items: center;
  padding: 0.3rem 0.85rem;
  border-bottom: 1px solid var(--line);
}

.leaderboard-top-row:last-child {
  border-bottom: none;
}

.leaderboard-top-rank {
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--muted);
}

.leaderboard-top-name {
  font-family: var(--display);
  font-size: 0.98rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.leaderboard-top-bar {
  display: block;
  height: 0.55rem;
  background: var(--canvas);
}

.leaderboard-top-bar-fill {
  display: block;
  height: 100%;
  background: var(--blue);
}

.leaderboard-top-count {
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

/* A disclosure toggle for the rest of the ranking, not an action button
   (issue #314): the heavy bordered all-caps control it replaces read as a
   destructive or system command for what is really "show more of this list". */
.leaderboard-top-more {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--blue-deep);
  font-family: var(--body);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.leaderboard-top-more:hover,
.leaderboard-top-more:focus-visible {
  color: var(--blue);
}

/* The title and its (i) sit on one line, with the source and score count on a
   single subline underneath (issue #298). Replaces an eyebrow, a badge and a
   second heading that between them said the same two facts three times. */
.frontier-title-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* The explainer toggle rides on the title line, so its own vertical margin
   would push the title off its baseline. Its expanded body takes the full row
   instead of becoming a flex sibling of the heading. */
.frontier-title-row .frontier-explainer-sub {
  margin: 0;
}

.frontier-title-row .frontier-explainer-sub[open] {
  flex-basis: 100%;
}

.frontier-subline {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.benchmark-workbench {
  display: grid;
  grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin: 1.75rem 0 2.5rem;
}

/* --canvas rather than --panel: against the main area the brighter surface
   read as an overlay sitting on top of the page rather than part of it
   (issue #298). The search field keeps its white fill and heavy border, so
   the control the panel exists for still carries the contrast. */
.benchmark-navigator {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1.25rem;
  border: 1px solid var(--edge);
  /* A real grey, not the page background. At --canvas the panel was the exact
     colour of the page behind it, so beside the near-black figure it read as
     something floating on the page rather than part of it. The search field
     keeps its white fill and heavy border, so the control the panel exists for
     still carries the contrast. */
  background: #c3ccd1;
  box-shadow: var(--shadow);
}

/* Muted greys chosen against a near-white surface do not carry on the darker
   panel, so the supporting text inside it darkens with the background. */
.benchmark-navigator .benchmark-search-status,
.benchmark-navigator .benchmark-result-facts,
.benchmark-navigator .benchmark-example-meta {
  color: #3d4d54;
}

.benchmark-navigator h2 {
  margin-bottom: 0.65rem;
  font-size: 1.45rem;
}

/* The search label is the panel's leading heading, so it is an <h2> for the
   document outline while keeping the small uppercase field-label treatment.
   Its own rule below would otherwise lose the cascade to the h2 sizing. */
.benchmark-navigator h2.benchmark-search-label {
  margin-bottom: 0.4rem;
  font-size: 0.78rem;
}

.benchmark-navigator p:not(.eyebrow):not(.benchmark-search-status) {
  color: var(--muted);
  font-size: 0.8rem;
}

.frontier-panel {
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--edge);
  background: #0d1519;
  color: #f3f6f7;
  box-shadow: var(--shadow);
}

.frontier-heading-row {
  display: flex;
  gap: 2rem;
  align-items: start;
  justify-content: space-between;
}

.frontier-heading-row h2 {
  margin-bottom: 0;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
}

.frontier-stage {
  display: block;
  width: 100%;
  padding: 0.45rem 0.65rem;
  border: 1px solid #536168;
  color: #d8e2e5;
  font-family: var(--utility);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-align: right;
}

.frontier-controls {
  display: grid;
  flex: 0 0 270px;
  gap: 0.65rem;
}

.frontier-panel .eyebrow {
  color: #7fc7bc;
}

.frontier-panel .section-note {
  max-width: 900px;
  margin: 1rem 0 1.25rem;
  color: #aebcc1;
}

.frontier-picker {
  display: grid;
  gap: 0.35rem;
  color: #aebcc1;
  font-family: var(--utility);
  font-size: 0.68rem;
  letter-spacing: 0.07em;
}

.frontier-picker select {
  width: 100%;
  padding: 0.7rem 2.2rem 0.7rem 0.75rem;
  border: 1px solid #536168;
  border-radius: 0;
  background: #162228;
  color: #f3f6f7;
}

.frontier-chart {
  position: relative;
  margin-top: 0.5rem;
}

.frontier-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.frontier-grid {
  stroke: #344249;
  stroke-dasharray: 3 6;
  stroke-width: 1;
}

/* Color key under the chart: one circular chip per reporting organization, in
   the same color its frontier circle uses and carrying the same brand glyph. */
.frontier-org-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  align-items: center;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid #2c383e;
}

.frontier-org-key-item {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}

.frontier-org-key-chip {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
}

.frontier-org-key-glyph {
  width: 11px;
  height: 11px;
  color: #0d1519;
}

.frontier-org-key-name {
  color: #aebcc1;
  font-family: var(--utility);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.score-point {
  cursor: pointer;
}

/* Entrance (issue #312): points fade up one by one, ordered by their date,
   while the running-best line draws itself across the axis. The whole block
   is gated on .score-chart-enter, which a render adds only when the reader
   arrived at a new selection -- incidental redraws of the same chart repaint
   it finished, not from zero. Point delays arrive as a custom property set
   per point, so the drawing code places each mark on the timeline without
   knowing anything about the CSS. */
.score-chart-enter .score-point {
  opacity: 0;
  animation: score-point-reveal 360ms ease-out forwards;
  animation-delay: var(--reveal-delay, 0ms);
}

@keyframes score-point-reveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.frontier-tick,
.frontier-axis-label {
  fill: #aebcc1;
  font-family: var(--utility);
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* Legend, keyed to the marks on the chart and sitting directly above it rather
   than being described several lines away in the prose explainer. */
.frontier-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin: 0.9rem 0 0.2rem;
}

.frontier-legend-item {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.78rem;
  line-height: 1.4;
}

.frontier-legend-item strong {
  color: #e8eef0;
  font-weight: 600;
}

.frontier-legend-item > span:last-child {
  color: #97a5ac;
}

.legend-swatch {
  flex: 0 0 auto;
  align-self: center;
}

.legend-swatch-score {
  width: 11px;
  height: 11px;
  background: #6ea8dc;
  border-radius: 50%;
}

.frontier-tooltip {
  position: absolute;
  z-index: 4;
  display: grid;
  width: min(310px, calc(100% - 16px));
  gap: 0.45rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid #5c7079;
  background: #0b1317;
  box-shadow: 0 10px 28px rgb(0 0 0 / 35%);
  color: #e8eef0;
  font-size: 0.78rem;
  line-height: 1.4;
  pointer-events: none;
}

.frontier-tooltip[hidden] {
  display: none;
}

.frontier-tooltip.is-pinned {
  border-color: #f4b65e;
  pointer-events: auto;
}

.frontier-tooltip-source {
  justify-self: start;
  color: #9bc8ef;
  font-weight: 600;
}

.frontier-tooltip-kind,
.frontier-tooltip-hint {
  color: #97a5ac;
  font-family: var(--utility);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
}

.frontier-tooltip-title {
  color: #fff;
  font-size: 0.9rem;
}

.frontier-tooltip-details {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.2rem 0.65rem;
  margin: 0;
}

.frontier-tooltip-details dt {
  color: #97a5ac;
}

.frontier-tooltip-details dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

/* Stated findings (issue #91). Sits above the workbench on the light canvas:
   the findings are the conclusion, so they are read before the charts that
   support them rather than discovered underneath. */
.findings-panel {
  margin: 1.5rem 0;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--edge);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.findings-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
}

.finding-card {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  background: #fff;
}

.finding-head {
  display: grid;
  gap: 0.5rem;
}

.finding-kind {
  justify-self: start;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--edge);
  color: var(--ink);
  font-family: var(--utility);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
}

.finding-kind-stale_scores {
  border-color: var(--orange);
  color: var(--orange);
}

.finding-kind-closing_headroom {
  border-color: var(--gold);
  color: #8a651a;
}

.finding-kind-fast_gain {
  border-color: var(--blue);
  color: var(--blue);
}

.finding-kind-third_party_only {
  border-color: var(--violet);
  color: var(--violet);
}

.finding-card h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.1rem;
  line-height: 1.25;
}

.finding-detail {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.55;
}

/* The evidence line is what makes a finding auditable rather than asserted, so
   it is set apart from the prose above it instead of running on from it. */
.finding-evidence {
  margin: 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--utility);
  font-size: 0.76rem;
  line-height: 1.5;
}

.finding-evidence span {
  display: block;
  color: var(--muted);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
}

.finding-jump {
  justify-self: start;
}

.findings-limits {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.score-point-face {
  fill: #f8f6ef;
  stroke: #6ea8dc;
  stroke-width: 2;
  transition: r 120ms ease;
}

.score-point-glyph {
  pointer-events: none;
  user-select: none;
}

/* Hover grows a point by one step from whatever size it is drawn at. A record
   setter is drawn at 1.5x (issue #345), so a single shared radius here would
   have shrunk the very points the chart is built around the moment a reader
   pointed at one. */
.score-point:focus .score-point-face,
.score-point:hover .score-point-face,
.score-point.is-selected .score-point-face {
  r: 15px;
  stroke-width: 4;
}

.score-point-dim:focus .score-point-face,
.score-point-dim:hover .score-point-face,
.score-point-dim.is-selected .score-point-face {
  r: 10px;
}

/* The reported-record path (issues #288 and #312). It links only actual strict
   record setters, directly from one observed point to the next; it never holds
   a score across an unobserved interval or extends past the final record. */
.score-frontier-line {
  stroke: #4c948b;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

/* Entrance (issue #312): a full-width clip rectangle scales across the x axis
   in exactly the same 3.6s interval used to schedule points by date. Unlike a
   stroke dash, the sweep is independent of each segment's slope and length, so
   the line reaches every record when its point brightens. */
.score-frontier-clip {
  transform-box: fill-box;
  transform-origin: left center;
}

.score-chart-enter .score-frontier-clip {
  animation: score-frontier-sweep 3600ms linear 180ms both;
}

@keyframes score-frontier-sweep {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* "其他的点可以淡化" (issue #312): readings off the saturation line recede
   behind it instead of competing with it for the eye. The de-emphasis sits on
   the marks inside the group rather than the group's own opacity, which the
   entrance animation owns. Reading one still works: hover and focus bring a
   receded point back to full strength.

   Recede by weight, never by dissolving the mark (issue #345). The first
   version faded the face to `fill-opacity: 0.6`, and on a near-black panel a
   translucent cream disc is not a quieter disc -- it is a muddy blob the panel
   shows through. That took away the background the brand glyph is drawn on, so
   a glyph already at half opacity had nothing left to sit on, and dropping the
   stroke to 0.45 removed the edge that would still have defined the mark. All
   fifteen off-line points on Terminal-Bench 2.0 came out as identical smudges:
   you could not tell which model any of them was without hovering it.

   So the disc keeps a near-opaque face and keeps its edge, and the fading here
   is gentle. Most of the separation is carried by size instead: a record setter
   is drawn at 1.5x, which lets these points stay readable without competing.
   Colour helps too -- the bright blue ring belongs to the line, and goes
   neutral here. */
.score-point-dim .score-point-face {
  fill-opacity: 0.92;
  stroke: #7b8f9b;
  stroke-opacity: 0.7;
}

/* This is the mark's whole payload -- which model reported this score -- so it
   is the last thing that should fade, and it never fades below readable. */
.score-point-dim .score-point-glyph {
  opacity: 0.72;
}

.score-point-dim:hover .score-point-face,
.score-point-dim:focus .score-point-face,
.score-point-dim.is-selected .score-point-face {
  stroke: #6ea8dc;
  fill-opacity: 1;
  stroke-opacity: 1;
}

.score-point-dim:hover .score-point-glyph,
.score-point-dim:focus .score-point-glyph,
.score-point-dim.is-selected .score-point-glyph {
  opacity: 1;
}

/* The entrance is presentation, not information: readers who ask for reduced
   motion get the finished chart immediately. */
@media (prefers-reduced-motion: reduce) {
  .score-chart-enter .score-point {
    animation: none;
    opacity: 1;
  }

  .score-chart-enter .score-frontier-clip {
    animation: none;
    transform: none;
  }
}

.score-best-line {
  stroke: #8fd0c4;
  stroke-dasharray: 2 4;
  stroke-width: 1.5;
}

.score-best-label {
  fill: #8fd0c4;
  font-family: var(--utility);
  font-size: 11px;
}

/* The reading gap, not a plateau. Sparse dots rather than a solid line so it
   reads as absence of data instead of a measured flat run. */
.score-gap-line {
  stroke: #7a8890;
  stroke-dasharray: 1 7;
  stroke-width: 2;
}

.score-gap-label {
  fill: #97a5ac;
  font-family: var(--utility);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.score-readout {
  margin-top: 1rem;
}

.score-readout-inner {
  display: grid;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid #39464c;
  background: #101a1f;
}

.score-readout-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
}

.score-readout-figure {
  display: grid;
  gap: 0.15rem;
}

.score-readout-figure span {
  color: #aebcc1;
  font-family: var(--utility);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.score-readout-figure strong {
  color: #cfe4f5;
  font-family: var(--display);
  font-size: 1.6rem;
  line-height: 1.1;
}

.score-readout-figure small {
  color: #97a5ac;
  font-size: 0.76rem;
}

/* The evidence grade. Printed rather than tucked behind a disclosure: the
   honest scope of a two-point chart is the first thing a reader needs, not an
   optional footnote. */
.score-evidence {
  padding: 0.85rem 1rem;
  border-left: 3px solid #6ea8dc;
  background: #16232a;
}

.score-evidence-single_reading,
.score-evidence-unjoinable {
  border-left-color: #c98a4b;
}

.score-evidence summary {
  display: inline-flex;
  cursor: pointer;
  margin-bottom: 0.4rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid #6ea8dc;
  border-radius: 4px;
  list-style: none;
}

.score-evidence summary::-webkit-details-marker {
  display: none;
}

.score-evidence summary:hover,
.score-evidence summary:focus-visible,
.score-evidence[open] summary {
  background: #6ea8dc;
  outline: none;
}

.score-evidence summary:hover strong,
.score-evidence summary:focus-visible strong,
.score-evidence[open] summary strong {
  color: #0d1519;
}

.score-evidence strong {
  display: block;
  font-family: var(--utility);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: #d6e0e3;
}

.score-evidence p {
  margin: 0.3rem 0 0;
  color: #c3cfd4;
  font-size: 0.83rem;
  line-height: 1.5;
}

.score-evidence-yes {
  color: #8fd0c4;
  font-weight: 700;
}

.score-evidence-no {
  color: #e0a288;
  font-weight: 700;
}

.score-readout-note,
.score-readout-empty {
  margin: 0;
  color: #aebcc1;
  font-size: 0.82rem;
  line-height: 1.5;
}

.score-readout-empty {
  padding: 1rem 1.2rem;
  border: 1px dashed #39464c;
  background: #101a1f;
}

.frontier-evidence {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #39464c;
}

.frontier-evidence h3 {
  margin: 0 0 0.8rem;
  font-family: var(--display);
  font-size: 1.25rem;
}

.frontier-context {
  padding-left: 0;
}

.task-shape {
  padding: 0.9rem 1rem;
  border: 1px solid #536168;
  background: #162228;
}

.task-shape span {
  display: block;
  color: #7fc7bc;
  font-family: var(--utility);
  font-size: 0.61rem;
  letter-spacing: 0.07em;
}

.task-shape p {
  margin: 0.2rem 0 0.9rem;
  color: #edf2f3;
  font-size: 0.8rem;
}

.task-shape p:last-child {
  margin-bottom: 0;
}

.task-shape-note,
.frontier-caveat p,
.pareto-readiness p {
  color: #aebcc1;
  font-size: 0.75rem;
}

.task-shape-note {
  margin: 0.65rem 0;
  font-style: italic;
}

.frontier-caveat {
  margin: 0.9rem 0;
  padding-top: 0.8rem;
  border-top: 1px solid #39464c;
}

.frontier-caveat strong {
  color: #ee9b82;
  font-family: var(--utility);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
}

.frontier-source-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #9edbd1;
  font-family: var(--utility);
  font-size: 0.67rem;
}

.pareto-readiness {
  margin-top: 1rem;
  border-top: 1px solid #536168;
  border-bottom: 1px solid #536168;
}

.pareto-readiness summary {
  display: flex;
  align-items: center;
  min-height: 46px;
  color: #f3f6f7;
  cursor: pointer;
  font-family: var(--utility);
  font-size: 0.65rem;
}

/* Collapsed by default: the full reading rule runs several sentences, and a
   reader scanning the chart wants the scores before the method. The rule
   itself stays one tap away rather than gone. */
.frontier-explainer-sub {
  margin: 0.2rem 0 0.7rem;
}

.frontier-explainer-sub summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 0.5rem;
  border: 1px solid #6ea8dc;
  border-radius: 4px;
  color: #9edbd1;
  cursor: pointer;
  font-family: var(--utility);
  font-size: 0.65rem;
  list-style: none;
}

.frontier-explainer-sub summary::-webkit-details-marker {
  display: none;
}

.frontier-explainer-sub summary:hover,
.frontier-explainer-sub summary:focus-visible,
.frontier-explainer-sub[open] summary {
  background: #6ea8dc;
  color: #0d1519;
  outline: none;
}

.frontier-explainer-sub p {
  margin: 0.4rem 0 0;
}

.benchmark-new {
  background: color-mix(in srgb, var(--orange) 5%, transparent);
}

.benchmark-new-badge {
  padding: 0.12rem 0.32rem;
  border: 1px solid var(--orange);
  color: var(--danger);
}

.frontier-jump {
  margin-right: 0.55rem;
  background: transparent;
}

.leaderboard-filters {
  margin-bottom: 0.5rem;
}

.leaderboard-list {
  margin-top: 0.75rem;
}

.leaderboard-list-actions {
  display: flex;
  justify-content: center;
  padding-top: 1.5rem;
}

.ledger-summary {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  cursor: pointer;
  list-style: none;
}

.ledger-summary .eyebrow {
  display: block;
  margin-bottom: 0.3rem;
}

.ledger-summary strong {
  font-family: var(--display);
  font-size: 1.35rem;
}

.ledger-summary > span:last-child {
  color: var(--muted);
  font-family: var(--utility);
  font-size: 0.7rem;
}

.ledger[open] .ledger-summary {
  border-bottom: 1px solid var(--edge);
}

.ledger-body {
  padding-top: 0.5rem;
}

/* The bar encodes the same number the adjacent count states, so it carries an
   aria-label rather than being announced twice: a screen reader hears the
   count once, from the text. */
.adoption-bar {
  width: 100%;
  height: 6px;
  margin-top: 0.35rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background: transparent;
}

.adoption-bar-fill {
  display: block;
  height: 100%;
  background: var(--sea);
}

.adopter-list {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.adopter-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}

.adopter-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--blue-deep);
  font-weight: 600;
  text-decoration: none;
}

.adopter-link:hover,
.adopter-link:focus-visible {
  text-decoration: underline;
}

.adopter-meta {
  color: var(--muted);
  font-family: var(--utility);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

/* Domain groups inside an expanded model card. The heading is deliberately
   quieter than the card's own h3: it labels a section of one document's
   benchmark list, and styling it as a peer of the model name made an expanded
   card read as several stacked records rather than one. */
.card-benchmark-group > h4 {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-family: var(--utility);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* The four registry cards hold lists of very different lengths, and a stretched
   grid row gave the shortest one a column of dead whitespace as tall as the
   longest. Aligning to the start lets each card end where its content does. */
#leaderboard-insights {
  align-items: start;
}

.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1.5rem;
  align-items: start;
}

.map-canvas {
  max-height: 720px;
  overflow: auto;
  border: 1px solid var(--line);
  background:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
}

.map-canvas svg {
  display: block;
  min-width: 900px;
}

.map-edge {
  stroke: #9baab1;
  stroke-opacity: 0.24;
  stroke-width: 1;
}

.map-column-label {
  fill: var(--muted);
  font-family: var(--utility);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.map-node {
  cursor: pointer;
}

.map-node circle {
  fill: var(--panel);
  stroke: var(--blue-deep);
  stroke-width: 1.5;
}

.map-node-artifact circle {
  fill: #fff7ee;
  stroke: var(--orange);
}

.map-node-topic circle {
  fill: #e5f2ef;
  stroke: var(--sea);
}

.map-node-organization circle {
  fill: #f1eafa;
  stroke: #756aa8;
}

.map-node text {
  fill: var(--ink);
  font-family: var(--utility);
  font-size: 11px;
}

.map-node:focus circle,
.map-node:hover circle {
  stroke-width: 4;
}

.map-detail {
  position: sticky;
  top: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--edge);
  background: var(--panel);
}

.map-detail h2 {
  overflow-wrap: anywhere;
}

.map-detail dl {
  display: grid;
  gap: 0.75rem;
}

.map-detail dt {
  color: var(--muted);
  font-family: var(--utility);
  font-size: 0.65rem;
}

.map-detail dd {
  margin: 0.15rem 0 0;
}

.map-detail .primary-link {
  display: inline-block;
  margin-top: 1rem;
}

.map-view-results {
  border: 0;
  cursor: pointer;
}

dialog {
  width: min(680px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  padding: clamp(1.5rem, 5vw, 3rem);
  overflow-y: auto;
  border: 1px solid var(--edge);
  border-radius: 0;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 25px 90px rgb(15 29 35 / 35%);
}

dialog::backdrop {
  background: rgb(21 36 42 / 65%);
  backdrop-filter: blur(3px);
}

.dialog-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 1.5rem;
}

.detail-source {
  margin-bottom: 0.7rem;
  color: var(--blue);
  font-family: var(--utility);
  font-size: 0.7rem;
}

.detail-title {
  padding-right: 2rem;
  /* Same quiet scale as the view headings; the old display-scale title
     outweighed the detail content it named. */
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.2;
}

.detail-summary {
  color: var(--muted);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin: 2rem 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.detail-grid div {
  padding: 1rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.detail-grid dt {
  color: var(--muted);
  font-family: var(--utility);
  font-size: 0.62rem;
}

.detail-grid dd {
  margin: 0.2rem 0 0;
  font-family: var(--display);
  font-size: 1.45rem;
}

.rationale-list {
  color: var(--muted);
}

.attention-notice {
  margin-top: 1.5rem;
  padding: 1rem;
  border-left: 3px solid #756aa8;
  background: #f1edfa;
}

.attention-notice strong {
  color: #51477f;
  font-family: var(--utility);
  font-size: 0.72rem;
}

.attention-notice p,
.discovery-note {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* The dataset note inside the contact sheet (issue #311): the ask's terms sit
   under the channels, with the star action one click away. */
.contact-dataset {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  margin-top: 1.5rem;
}

.contact-dataset .detail-summary {
  margin: 0;
}

.contact-list {
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.contact-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}

.contact-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.contact-label svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
  stroke: none;
}

.contact-label strong {
  font-family: var(--utility);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

.contact-value {
  color: var(--blue);
  font-family: var(--display);
  font-size: 1.05rem;
  word-break: break-all;
}

.supporting-signals {
  margin: 1.8rem 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.supporting-signals ul {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.supporting-signals li {
  display: grid;
  gap: 0.15rem;
}

.supporting-signals a {
  color: var(--blue-deep);
  font-family: var(--utility);
  font-size: 0.75rem;
}

.supporting-signals span {
  color: var(--muted);
  font-size: 0.8rem;
}

.discovery-note {
  margin: 1.5rem 0;
}

.detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.primary-link {
  display: inline-block;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: white;
  font-family: var(--utility);
  font-size: 0.7rem;
  text-decoration: none;
}

.secondary-link {
  display: inline-block;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--edge);
  color: var(--ink);
  font-family: var(--utility);
  font-size: 0.7rem;
  text-decoration: none;
}

/* Explicit pages keep a long day bounded without turning the footer into an
   invisible scroll trigger. */
.today-pagination {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.8rem;
  align-items: center;
  margin: 1.25rem 0 0;
}

.today-pagination p {
  margin: 0;
  color: var(--muted);
  font-family: var(--utility);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-align: center;
}

.today-pagination button {
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--utility);
  font-size: 0.7rem;
  cursor: pointer;
}

.today-pagination button:disabled {
  cursor: default;
  opacity: 0.35;
}

.adoption-cta {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.5rem;
  padding: 1.1rem;
  border: 1px solid var(--edge);
  background: #fff4d6;
}

.adoption-cta p {
  margin: 0;
  font-family: var(--display);
  font-size: 1.05rem;
}

.adoption-actions,
.footer-dataset-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.adoption-actions button {
  background: transparent;
  cursor: pointer;
}

.footer-dataset {
  display: grid;
  gap: 0.55rem;
  margin: 0.7rem 0 0;
  padding: 0.9rem;
  border-left: 3px solid var(--orange);
  background: #fff4d6;
  color: var(--ink);
  font-family: var(--utility);
  font-size: 0.75rem;
}

.footer-dataset a,
.footer-contact-link {
  color: var(--ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-contact-link {
  padding: 0;
  border: none;
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.stale-banner {
  margin: 0;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--edge);
  font-family: var(--utility);
  font-size: 0.75rem;
  color: var(--ink);
  background: #fff4d6;
}

.stale-banner.stale-banner-degraded {
  background: #ffe1d9;
}

/* The banner's two calls to action sit inline after the sentence: a link into
   the public Actions log and the contact button that opens the same dialog as
   the header badge. Inheriting the banner font keeps them reading as part of
   one notice rather than a second UI layer bolted on top of it. */
.stale-banner-actions {
  display: inline-flex;
  align-items: baseline;
  gap: 1rem;
  margin-left: 1rem;
  white-space: nowrap;
}

.stale-banner-action {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.stale-banner-action:hover,
.stale-banner-action:focus-visible {
  text-decoration-thickness: 2px;
}

button.stale-banner-action {
  appearance: none;
}

.stale-banner-action svg {
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.3em;
  vertical-align: -0.12em;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.error-state {
  max-width: 720px;
  padding: 7rem 0;
}

.error-state h1,
.error-state h2 {
  margin-bottom: 2rem;
  /* Restates the global h1 treatment the heading carried as an h1. */
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.015em;
}

footer {
  /* One left-aligned column: updated stamp, view links, then the dataset
     card underneath them. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.5rem 0 3rem;
  border-top: 1px solid var(--edge);
  color: var(--muted);
}

@media (max-width: 1050px) {
  .filter-panel {
    grid-template-columns: repeat(3, 1fr);
  }

  .search-field {
    grid-column: span 2;
  }

  .content-grid {
    grid-template-columns: 1fr;
  }

  .benchmark-workbench {
    grid-template-columns: 1fr;
  }

  .benchmark-navigator {
    position: static;
  }

  .frontier-panel {
    order: -1;
  }

  .health-panel {
    position: static;
  }
}

@media (max-width: 760px) {
  .masthead,
  .view-nav,
  main,
  footer {
    width: min(100% - 28px, 1440px);
  }

  /* `width: 100%` on a wide viewBox scales the height down with it, so at 390px
     the chart collapsed to roughly 90px and the staircase became unreadable --
     worse once the card rug was added. The fix is a narrower viewBox (set in
     app.js from the viewport width), which scales the same content up instead of
     squashing it; distorting the ratio here would stretch the axis text. */
  .frontier-chart svg {
    min-height: 300px;
  }

  .masthead {
    min-height: 64px;
    /* Brand plus the seven-square grid exceed 320px-class viewports, so the
       controls drop to a second row instead of overflowing off-screen. */
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .masthead-end {
    /* 6 * 2.1rem + 5 * 0.5rem gaps = 241px, so the full row still fits a
       320px-wide phone once it wraps below the brand (issue #213 squares). */
    grid-template-columns: repeat(6, 2.1rem);
    gap: 0.5rem;
  }

  .repo-badges {
    gap: 0.5rem;
  }

  .repo-badge {
    width: 2.1rem;
    height: 2.1rem;
  }

  .repo-badge::after {
    display: none;
  }

  .view-nav {
    overflow-x: auto;
  }

  .view-nav button,
  .view-nav a {
    min-width: 92px;
    padding-inline: 0.8rem;
  }

  .view-nav a {
    margin-left: 0;
  }

  .view {
    padding-top: 2rem;
  }

  .view-heading {
    display: grid;
    align-items: start;
  }

  .evidence-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .evidence-stat:nth-child(2) {
    border-right: 0;
  }

  .heading-note {
    text-align: left;
  }

  .relationship-explorer > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem 1rem;
    align-items: start;
  }

  .relationship-explorer > summary::after {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
  }

  .relationship-explorer .map-summary {
    grid-row: 2;
    grid-column: 1;
    margin-top: 0;
  }

  .frontier-heading-row {
    display: grid;
    align-items: start;
  }

  .frontier-stage {
    text-align: left;
  }

  .frontier-controls {
    width: 100%;
  }

  h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: clamp(1.7rem, 7vw, 2.3rem);
  }

  .record-summary {
    grid-template-columns: 24px 30px minmax(0, 1fr);
    gap: 0.65rem;
  }

  /* Needed because `.record-summary.record-summary-unranked` carries two
     classes and so outranks the single-class rule above: without this the
     unranked rows keep the desktop template on a phone, holding a 170px score
     column beside the heading and leaving the model name almost no width. */
  .record-summary.record-summary-unranked {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .record-summary .score,
  .record-summary .attention-activity {
    grid-column: 3;
    justify-self: start;
    max-width: 180px;
    text-align: left;
  }

  .record-summary.record-summary-unranked .score {
    grid-column: 2;
  }

  .record-detail {
    margin: 0 0 0 75px;
    padding-right: 1rem;
  }

  .map-insights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .map-layout {
    grid-template-columns: 1fr;
  }

  .map-detail {
    position: static;
  }

  .filter-panel {
    grid-template-columns: 1fr;
  }

  .search-field {
    grid-column: auto;
  }

  /* Narrow screens give search its own row; date and the two controls sit
     beside each other beneath it. The drawer spans the viewport. */
  .today-filters .search-field {
    flex-basis: 100%;
  }

  .filters-drawer {
    left: 0;
    right: 0;
    width: auto;
  }

  footer {
    display: grid;
  }
}

@media (max-width: 560px) {
  /* The bar's job is comparing rows at a glance; on a narrow screen there is
     no spare width left for it once rank, name and count are legible, so it
     drops rather than squeezing everything past readable. */
  .leaderboard-top-columns,
  .leaderboard-top-row {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
  }

  .leaderboard-top-columns-count {
    grid-column: 3;
  }

  .leaderboard-top-bar {
    display: none;
  }
}

@media (max-width: 470px) {
  .brand strong {
    font-size: 1.2rem;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .map-insights {
    grid-template-columns: 1fr;
  }

  .evidence-strip {
    grid-template-columns: 1fr 1fr;
  }

  .evidence-stat {
    min-height: 116px;
    padding: 0.85rem;
  }

  .evidence-stat-summary strong {
    font-size: 2.15rem;
  }

  /* A two-column tile is ~half a phone's width, so a nowrap "name · meta"
     row would push past the strip. Stack them so the count reads first and
     the provenance wraps beneath it. */
  .evidence-detail-list li {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .insight-item-meta {
    text-align: left;
    white-space: normal;
  }

  .frontier-panel {
    padding-inline: 1rem;
  }

  .frontier-tick,
  .frontier-axis-label,
  .score-best-label,
  .score-gap-label {
    font-size: 20px;
  }

  .ledger-summary {
    align-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Ranked entry points, sat below the results so the field and its output own
   the top of the panel. Scrollable rather than 20 rows tall: the whole point of
   this aside is that it must not out-weigh the chart beside it. */
.benchmark-shortlist {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
}

/* Deliberately not `.eyebrow`: that class is accent blue, which plants a second
   strong anchor in a panel whose only anchor should be the search field. This
   is the same quiet register as the reach line. */
.benchmark-example-lead {
  margin: 0.9rem 0 0.35rem;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  opacity: 0.75;
}

.benchmark-example {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  padding: 0.3rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.benchmark-example-name {
  font-size: 0.82rem;
  font-weight: 600;
}

/* The count is context, not a score, so it stays quieter than the name it
   qualifies and never competes with it for the first read. */
.benchmark-example-meta {
  flex: 0 0 auto;
  font-size: 0.68rem;
  color: var(--muted);
  opacity: 0.8;
}

.benchmark-example:hover,
.benchmark-example:focus-visible {
  border-color: var(--line);
  background: var(--canvas);
}

.benchmark-example[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--panel);
}

.benchmark-example[aria-pressed="true"] .benchmark-example-meta {
  color: var(--panel);
  opacity: 0.7;
}

.benchmark-search {
  margin-top: 0;
}

.benchmark-search-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.benchmark-search-input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  /* Ink, not `--edge`. This border is the affordance that tells a reader the
     panel's whole point is to be typed into -- it is not a divider, so the
     softening the rest of the page got would read here as "disabled". */
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  background: white;
  color: inherit;
  font: inherit;
  font-size: 0.95rem;
  box-shadow: inset 0 1px 3px rgb(21 36 42 / 8%);
}

.benchmark-search-input::placeholder {
  color: var(--muted);
  opacity: 0.75;
}

.benchmark-search-input:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.benchmark-search-status {
  margin: 0.4rem 0 0.35rem;
  font-size: 0.7rem;
  color: var(--muted);
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

#benchmark-search-results,
#today-benchmarks-results {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 22rem;
  overflow-y: auto;
}

/* Registry matches sit above the day's list and answer a different question
   than it does, so they are fenced off rather than run together with it. */
.today-benchmarks {
  margin: 0 0 1rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.today-benchmarks-heading {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
}

.today-benchmarks-note {
  margin: 0.25rem 0 0.55rem;
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--muted);
}

.benchmark-result {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.benchmark-result:hover,
.benchmark-result:focus-visible {
  border-color: var(--accent);
}

.benchmark-result[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--surface-strong, var(--surface));
}

.benchmark-result-name {
  font-weight: 600;
}

.benchmark-result-facts {
  font-size: 0.76rem;
  color: var(--muted);
}

/* A crawled record of a benchmark the registry above already names. The rule
   is a relationship marker, not a warning: the row is real evidence and stays
   as readable as any other. Colour alone would carry the whole meaning, so the
   row also says so in words, which is what a screen reader and a monochrome
   display get. */
.benchmark-result-also-curated {
  border-left: 3px solid var(--blue);
}


/* Openness is a statement about what we know, so `unknown` is neutral rather
   than a warning. Only a positive verdict gets emphasis. */
.benchmark-openness {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  font-size: 0.72rem;
}

.benchmark-openness-open {
  border-color: var(--accent);
  color: var(--accent);
}

/* Issue #240 collapse defaults: the findings panel and the adoption table are
   <details>, closed on load but visible. The summary keeps the section-title
   layout so the heading reads the same open or closed; the +/- affordance
   matches the method-note pattern rather than the platform triangle. */
.findings-summary,
.adoption-table-summary {
  cursor: pointer;
  list-style: none;
}

.findings-summary::-webkit-details-marker,
.adoption-table-summary::-webkit-details-marker {
  display: none;
}

.findings-summary::after,
.adoption-table-summary::after {
  content: "+";
  font-size: 3rem;
  line-height: 1;
  font-weight: 300;
}

.findings-panel[open] .findings-summary::after,
.adoption-table[open] .adoption-table-summary::after {
  content: "−";
}

.findings-summary strong,
.adoption-table-summary strong {
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.35rem;
}

.findings-summary .eyebrow {
  display: block;
  margin-bottom: 0.3rem;
}

.adoption-table > *:not(summary) {
  margin-top: 1rem;
}

/* External catalog detail (display plan step 4). Lives inside the dark
   frontier panel, so the palette follows the panel's, not the page's. */
.frontier-external {
  margin-top: 0.9rem;
}

.external-block {
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid #39464c;
}

.external-block:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.external-block h3 {
  margin: 0 0 0.7rem;
  font-family: var(--display);
  font-size: 1.1rem;
}

.external-block h4 {
  margin: 0.9rem 0 0.3rem;
  font-size: 0.95rem;
}

.external-description,
.external-basis {
  max-width: 75ch;
  margin: 0 0 0.8rem;
  color: #d6e0e3;
  font-size: 0.85rem;
}

/* The #262 inheritance note: a borrowed identity is flagged, never silent. A
   left rule and muted panel set it apart from the record's own description. */
.external-inherited {
  max-width: 75ch;
  margin: 0 0 0.8rem;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid #4a6b73;
  background: rgba(74, 107, 115, 0.12);
  border-radius: 0 4px 4px 0;
  color: #cdd9dc;
  font-size: 0.8rem;
}

.external-openness-chip {
  margin: 0 0 0.7rem;
}

.external-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.25rem 1rem;
  margin: 0 0 0.8rem;
  font-size: 0.82rem;
}

.external-facts dt {
  color: #aebcc1;
}

.external-facts dd {
  margin: 0;
}

.external-empty {
  margin: 0;
  color: #aebcc1;
  font-size: 0.82rem;
  font-style: italic;
}

.external-artifacts,
.external-sizes,
.external-siblings {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  list-style: none;
}

.external-artifacts a {
  color: white;
}

.external-artifacts a:hover,
.external-artifacts a:focus-visible {
  text-decoration: underline;
}

.external-sizes li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
}

.external-evidence-link {
  color: #7fc7bc;
  font-size: 0.76rem;
}


/* A round (i) toggle for one line of provenance text. The marker itself is
   the affordance -- an outlined circle, always visible, brightened on
   hover/focus -- rather than a plain word link, so "there is more here" reads
   the same way at every source block on the page. */
.info-disclosure {
  position: relative;
}

.info-disclosure-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #6ea8dc;
  border-radius: 50%;
  color: #6ea8dc;
  cursor: pointer;
  font-family: var(--utility);
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1;
  list-style: none;
}

.info-disclosure-toggle::-webkit-details-marker {
  display: none;
}

.info-disclosure-toggle:hover,
.info-disclosure-toggle:focus-visible,
.info-disclosure[open] .info-disclosure-toggle {
  background: #6ea8dc;
  color: #0d1519;
  outline: none;
}

.info-disclosure-body {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 0;
  width: max(20rem, 60vw);
  max-width: 26rem;
  margin: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid #6ea8dc;
  border-radius: 6px;
  background: #16232a;
  color: #d6e0e3;
  font-size: 0.78rem;
  line-height: 1.5;
}

/* externalScoreChart (the crawled-score figure) draws entirely with the
   curated chart's own classes -- frontier-grid, frontier-tick,
   frontier-axis-label, score-point*, score-best-line/label -- so it carries no
   styling of its own here. */

.external-scores-wrap {
  max-height: 26rem;
  overflow: auto;
  border: 1px solid #39464c;
  border-radius: 6px;
}

.external-scores {
  min-width: 0;
  font-size: 0.8rem;
}

.external-scores th,
.external-scores td {
  padding: 0.35rem 0.7rem;
  text-align: left;
}

.external-scores thead th {
  position: sticky;
  top: 0;
  background: #0d1519;
  color: #aebcc1;
}

.external-scores tbody tr + tr {
  border-top: 1px solid #223036;
}

.external-sibling-link {
  padding: 0;
  border: 0;
  background: none;
  color: white;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.external-sibling-meta {
  margin-left: 0.5rem;
  color: #aebcc1;
  font-size: 0.76rem;
}

/* The shortlist heading carries its (i) toggle inline, so the explanation of
   what the ranking measures sits next to the ranking rather than under it. */
.benchmark-example-heading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* The navigator scrolls (overflow-y: auto), and a scroll container clips
   absolutely-positioned descendants no matter which edge they are pinned to.
   Positioning inward only made the panel a narrow column; the panel has to
   leave the container entirely, so it is fixed rather than absolute and
   anchored under the toggle by script. */
.benchmark-example-heading .info-disclosure-body {
  position: fixed;
  top: auto;
  left: auto;
  width: min(24rem, calc(100vw - 2rem));
  max-width: none;
}

.benchmark-example-heading .benchmark-example-lead {
  margin: 0;
}

/* Hover reveals it too, not only click (issue #269).

   A closed <details> hides its body by not generating a box for it, and any
   `display` declared on that body overrides the hiding rather than adding to
   it -- which pins the panel permanently open. So the reveal is driven by
   visibility and opacity on a box that is always generated: the body is laid
   out but transparent and non-interactive until hover, focus, or the open
   state. Click still works and is what keeps it up while the pointer travels
   onto the text; coarse pointers get the click path alone, which is right. */
.info-disclosure > .info-disclosure-body {
  display: block;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 90ms ease-out;
}

.info-disclosure[open] > .info-disclosure-body,
.info-disclosure:focus-within > .info-disclosure-body {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

@media (hover: hover) {
  .info-disclosure:hover > .info-disclosure-body {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}

/* --- Rounded surfaces (issue #333) ------------------------------------------
 *
 * Every panel, card, drawer and control was drawn as a hard-cornered box, and
 * a page made of dozens of them reads as a spreadsheet printout rather than
 * something to sit and read. One radius token for the large surfaces and one
 * for the small controls, applied here in a single place so a new panel picks
 * the shape up by naming itself rather than by restating a pixel value.
 *
 * Circles (`.brand-mark`, score points), pills (`.repo-badge`) and the search
 * input keep the radii they already declare -- those are shapes, not corners.
 * Elements that draw a single rule rather than a box -- the masthead's bottom
 * edge, a section title's underline, the footer's top rule -- are absent on
 * purpose: rounding one border of a four-sided box curls the ends of the line
 * up away from the content it is supposed to separate.
 */
.daily-briefing,
.daily-questions,
.health-panel,
.trend-panel,
.domain-panel,
.ledger,
.filter-panel,
.filters-drawer,
.benchmark-navigator,
.frontier-panel,
.findings-panel,
.map-detail,
.adoption-cta {
  border-radius: var(--radius);
}

.day-tooltip,
.finding-kind,
.secondary-link,
.clear-button,
.today-filters .filters-toggle,
.today-filters .refresh-button,
.rubric-component:first-of-type {
  border-radius: var(--radius-sm);
}

/* The selected navigation item is the only solid dark block on the page, so
   leaving it square made it the one hard-cornered shape among rounded ones.
   Rounded at the top only: it sits on the nav's bottom rule and reads as a tab
   attached to the page below it, not as a floating chip. */
.view-nav .nav-active {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

dialog {
  border-radius: var(--radius);
}

/* A row separator inside a rounded card should stop before the corner, or the
   hairline runs out past the curve. The last row drops its rule entirely: the
   card's own bottom edge already closes the list. */
.record-card:last-child {
  border-bottom: 0;
}

/* Crawled prose is not typeset prose. A README banner made of box-drawing
   characters ("═══════...") or a bare URL is one unbroken run with no break
   opportunity in it, so it pushed the Today list to 1349px inside a 720px
   column and the whole page slid sideways (issue #333). `anywhere` rather than
   `break-word` because it also lets the run stop counting toward the column's
   minimum width, which is what was widening the grid track. Scoped to the
   surfaces that show crawled text; the site's own copy never needs it. */
.record-card,
.map-detail,
.external-block {
  overflow-wrap: anywhere;
}

/* Cards whose accent is a thick top rule, rounded so they match the panels
   they sit inside. Bottom corners only would leave the accent squared off
   against a curved body, so the accent curves with them. */
.map-insight-card,
.domain-card {
  border-radius: var(--radius);
}