/*
  COMPONENTS: one `.c-<name>` family per cataloged component (explore/COMPONENTS.md). Each family
  is the CSS half of a partial in app/views/components/ and has a live preview at /styleguide.
  Semantic tokens only; no hex, no primitive ramp names.
*/

/* =========================================================================================
   Button
   ========================================================================================= */

.c-button {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-text-strong);
  --btn-border: var(--color-border-strong);
  --btn-bg-hover: var(--color-surface-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  height: var(--control-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.c-button:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-fg);
  text-decoration: none;
}

.c-button:active {
  transform: translateY(0.5px);
}

.c-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.c-button[disabled],
.c-button[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.c-button--primary {
  --btn-bg: var(--color-action);
  --btn-fg: var(--color-action-text);
  --btn-border: var(--color-action);
  --btn-bg-hover: var(--color-action-hover);
}

.c-button--primary:hover {
  border-color: var(--color-action-hover);
}

.c-button--secondary {
  --btn-fg: var(--color-link);
  --btn-border: var(--color-border-strong);
  --btn-bg-hover: var(--color-action-subtle);
}

.c-button--ghost {
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-fg: var(--color-text);
  --btn-bg-hover: var(--color-surface-sunken);
  font-weight: var(--weight-medium);
}

.c-button--danger {
  --btn-fg: var(--color-danger-text);
  --btn-border: var(--color-danger-border);
  --btn-bg-hover: var(--color-danger-bg);
}

.c-button--sm {
  height: var(--control-height-sm);
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

.c-button--lg {
  height: var(--control-height-lg);
  padding: 0 var(--space-5);
  font-size: var(--text-base);
}

.c-button--icon {
  width: var(--control-height);
  padding: 0;
}

.c-button--icon.c-button--sm {
  width: var(--control-height-sm);
}

/* button_to wraps the button in a form; keep it inline. */
form.c-button-form {
  display: inline-flex;
}

/* =========================================================================================
   Badge: small, quiet labels. Status tones; entity types; counts.
   ========================================================================================= */

.c-badge {
  --badge-fg: var(--color-neutral-text);
  --badge-bg: var(--color-neutral-bg);
  --badge-border: var(--color-neutral-border);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  min-height: 1.375rem;
  padding: 0 var(--space-2);
  border: 1px solid var(--badge-border);
  border-radius: var(--radius-sm);
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
}

.c-badge--info { --badge-fg: var(--color-info-text); --badge-bg: var(--color-info-bg); --badge-border: var(--color-info-border); }
.c-badge--success { --badge-fg: var(--color-success-text); --badge-bg: var(--color-success-bg); --badge-border: var(--color-success-border); }
.c-badge--warning { --badge-fg: var(--color-warning-text); --badge-bg: var(--color-warning-bg); --badge-border: var(--color-warning-border); }
.c-badge--danger { --badge-fg: var(--color-danger-text); --badge-bg: var(--color-danger-bg); --badge-border: var(--color-danger-border); }
.c-badge--accent { --badge-fg: var(--color-text-accent); --badge-bg: var(--color-surface-accent); --badge-border: transparent; }
.c-badge--outline { --badge-bg: transparent; }

/* An entity-type label ("Trial", "Drug"): uppercase overline, no fill. */
.c-badge--type {
  --badge-bg: transparent;
  --badge-border: transparent;
  --badge-fg: var(--color-text-subtle);
  padding: 0;
  min-height: 0;
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.c-badge--count {
  min-width: 1.375rem;
  justify-content: center;
  padding: 0 var(--space-1-5);
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
}

.c-badge svg {
  width: 0.875em;
  height: 0.875em;
}

/* =========================================================================================
   Licence tier: the restricted-data chip. Red = prohibited, amber = licensable, navy = internal.
   Emitted by ApplicationHelper#restricted_badge and friends, never hand-written.
   ========================================================================================= */

.c-tier {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 1.375rem;
  padding: 0 var(--space-2);
  border: 1px solid var(--tier-border);
  border-radius: var(--radius-sm);
  background: var(--tier-bg);
  color: var(--tier-fg);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
}

.c-tier svg {
  width: 0.8125rem;
  height: 0.8125rem;
}

.c-tier__source {
  font-weight: var(--weight-regular);
}

.c-tier--prohibited { --tier-fg: var(--color-tier-prohibited-text); --tier-bg: var(--color-tier-prohibited-bg); --tier-border: var(--color-tier-prohibited-border); }
.c-tier--licensable { --tier-fg: var(--color-tier-licensable-text); --tier-bg: var(--color-tier-licensable-bg); --tier-border: var(--color-tier-licensable-border); }
.c-tier--internal { --tier-fg: var(--color-tier-internal-text); --tier-bg: var(--color-tier-internal-bg); --tier-border: var(--color-tier-internal-border); }

.c-tier--compact {
  width: 1.375rem;
  justify-content: center;
  padding: 0;
}

/* =========================================================================================
   Source line: attribution and provenance that travel with restricted or extracted data.
   ========================================================================================= */

.c-source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.c-source__label {
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}

/* The credit beside a Commons logo (components/logo_credit): a `.c-source` line that sits a step below the
   header it credits and keeps its links readable at the small size. */
.c-logo-credit {
  margin-block: var(--space-2) var(--space-3);
}

.c-logo-credit a {
  color: var(--color-link);
}

/* Year-series notes: the method caption and future-years sentence under a per-year chart. */
.c-year-notes {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.c-year-notes__caption,
.c-year-notes__future {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.c-ext-link {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
}

.c-ext-link svg {
  width: 0.75em;
  height: 0.75em;
  opacity: 0.8;
}

/* =========================================================================================
   Card: the bordered surface every section sits on.
   ========================================================================================= */

.c-card {
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.c-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.c-card__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}

.c-card__title {
  font-size: var(--text-lg);
}

.c-card__subtitle {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.c-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.c-card__body {
  padding: var(--space-5);
}

.c-card__body--flush {
  padding: 0;
}

.c-card__footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--color-surface-hover);
}

/* =========================================================================================
   Page header: title, context, actions. Used by every non-entity page.
   ========================================================================================= */

.c-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-6);
  align-items: end;
  padding-bottom: var(--space-6);
}

.c-page-header__eyebrow {
  grid-column: 1 / -1;
}

.c-page-header__title {
  font-size: var(--text-2xl);
}

.c-page-header__description {
  max-width: 48rem;
  margin-top: var(--space-1-5);
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

.c-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

@media (max-width: 48rem) {
  .c-page-header {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

/* =========================================================================================
   Entity header: the consistent top of trial, drug, condition, organization, investigator and
   site pages. Type, name, aliases, identifiers, headline stats.
   ========================================================================================= */

.c-entity-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
}

.c-entity-header__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
}

.c-entity-header__identity {
  display: flex;
  gap: var(--space-4);
  min-width: 0;
}

.c-entity-header__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-accent);
  color: var(--color-text-accent);
}

.c-entity-header__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.c-entity-header__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.c-entity-header__name {
  font-size: var(--text-2xl);
  overflow-wrap: anywhere;
}

.c-entity-header__subtitle {
  color: var(--color-text);
  font-size: var(--text-base);
}

.c-entity-header__aliases {
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

.c-entity-header__ids {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  margin-top: var(--space-1);
}

/* A long identifier (a 32-char molecule id) wraps inside its chip instead of overflowing a phone.
   Never ellipsised or titled: the hash tail is what tells ids apart and it must stay copyable. */
.c-entity-header__ids > a,
.c-entity-header__ids .c-badge {
  min-width: 0;
  max-width: 100%;
}

.c-entity-header__ids .c-badge {
  flex-wrap: wrap;
  padding-block: var(--space-0-5, 0.125rem);
  white-space: normal;
}

.c-entity-header__ids .c-badge .u-mono {
  overflow-wrap: anywhere;
}

.c-entity-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Hero band (figure: local): the figure at the left at a modest fixed width, the stats beside it as
   a grid that matches the figure's height. Columns are explicit per breakpoint (2 on a phone and at
   medium widths, 3 from 64rem) so the trailing tile can span the leftover columns and ANY count from
   3 to 9 tiles a full rectangle with intact borders. On a phone the figure leads at the full
   container width (the drawing stays centred and capped inside it), then the stats follow. */
.c-entity-header__hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.c-entity-header__figure {
  width: 100%;
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.c-entity-header__figure .c-structure {
  max-width: none;
}

.c-entity-header__figure .c-structure__canvas {
  height: 14rem;
  max-width: 20rem;
  margin-inline: auto;
  border: 0;
}

.c-entity-header__hero .c-entity-header__stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
}

.c-entity-header__hero .c-entity-header__stats .c-stat {
  box-shadow: 0 -1px 0 var(--color-border), -1px 0 0 var(--color-border);
}

.c-entity-header__hero .c-entity-header__stats a.c-stat:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-focus);
}

.c-entity-header__hero .c-stat__value {
  white-space: nowrap;
}

/* 2 columns: an odd last tile spans both. */
.c-entity-header__hero .c-entity-header__stats .c-stat:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

@media (min-width: 40rem) {
  .c-entity-header__hero {
    flex-direction: row;
    align-items: stretch;
  }

  .c-entity-header__figure {
    flex: 0 0 min(20rem, 40%);
  }

  .c-entity-header__hero .c-entity-header__stats {
    flex: 1 1 0;
    min-width: 0;
    align-content: stretch;
    grid-auto-rows: 1fr;
  }

  .c-entity-header__hero .c-entity-header__stats .c-stat {
    justify-content: center;
  }
}

/* Wide: three columns. A last tile alone on its row spans 3, a last pair leaves the final tile
   spanning 2. */
@media (min-width: 64rem) {
  .c-entity-header__hero .c-entity-header__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .c-entity-header__hero .c-entity-header__stats .c-stat:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .c-entity-header__hero .c-entity-header__stats .c-stat:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
  }

  .c-entity-header__hero .c-entity-header__stats .c-stat:last-child:nth-child(3n + 2) {
    grid-column: span 2;
  }
}

/* =========================================================================================
   Stat: a labelled figure that links to the records behind it. Row of stats = .c-stat-row.
   ========================================================================================= */

.c-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}

.c-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-4) var(--space-5);
  color: inherit;
  text-decoration: none;
  box-shadow: -1px 0 0 var(--color-border);
}

a.c-stat:hover {
  background: var(--color-surface-hover);
  color: inherit;
  text-decoration: none;
}

a.c-stat:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-focus);
}

.c-stat__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.c-stat__label svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-text-subtle);
}

.c-stat__value {
  color: var(--color-text-strong);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
}

a.c-stat .c-stat__value {
  color: var(--color-text-strong);
}

a.c-stat:hover .c-stat__value {
  color: var(--color-link-hover);
}

.c-stat__meta {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

.c-stat--compact .c-stat__value {
  font-size: var(--text-xl);
}

/* A count chip: compact, pill-shaped, links into a list ("1.2M trials"). */
.c-count-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-md);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}

.c-count-chip strong {
  color: var(--color-text-strong);
  font-variant-numeric: tabular-nums;
}

a.c-count-chip:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-hover);
  color: var(--color-text);
  text-decoration: none;
}

/* =========================================================================================
   Tabs: link-based section navigation (each tab is a URL), underline indicator.
   ========================================================================================= */

.c-tabs {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
  scrollbar-width: none;
}

.c-tabs::-webkit-scrollbar {
  display: none;
}

.c-tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-2-5) var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  text-decoration: none;
}

.c-tabs__tab:hover {
  color: var(--color-text-strong);
  text-decoration: none;
}

.c-tabs__tab[aria-current="page"],
.c-tabs__tab[aria-selected="true"] {
  color: var(--color-text-strong);
  font-weight: var(--weight-semibold);
}

.c-tabs__tab[aria-current="page"]::after,
.c-tabs__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: var(--space-2);
  bottom: -1px;
  left: var(--space-2);
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--color-focus);
}

.c-tabs__tab:focus-visible {
  outline-offset: -2px;
}

/* Segmented control: a compact toggle between views of the same data. */
/* A full-width strip holding one segmented control at the top of a page (the Site Map / Clinical
   Research Map switch), above a full-bleed map hero. */
.c-segmented-bar {
  display: flex;
  padding-block: var(--space-3);
}

.c-segmented {
  display: inline-flex;
  align-self: flex-start;
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.c-segmented__option {
  padding: var(--space-1) var(--space-3);
  border-radius: calc(var(--radius-md) - 2px);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
}

.c-segmented__option:hover {
  color: var(--color-text-strong);
  text-decoration: none;
}

button.c-segmented__option {
  border: 0;
  background: transparent;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}

button.c-segmented__option:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 1px;
}

@media (pointer: coarse) {
  button.c-segmented__option {
    min-height: 2.75rem;
    padding-inline: var(--space-4);
  }
}

.c-segmented__option[aria-pressed="true"],
.c-segmented__option[aria-current="true"],
.c-segmented__option[aria-current="page"] {
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  color: var(--color-text-strong);
  font-weight: var(--weight-semibold);
}

/* Scale toggle (components/_scale_toggle): the Linear / Log segmented buttons above a chart, and the note
   that appears under it while Log is on. */
.c-scale-toggle {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.c-scale-toggle__bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.c-scale-toggle__note {
  margin: 0;
}

.c-scale-toggle__note[hidden] {
  display: none;
}

/* =========================================================================================
   Table: compact, sortable columns, numeric right-alignment. Grows to its natural height (the page
   scrolls); only the horizontal axis may scroll, so there is no sticky header.
   ========================================================================================= */

.c-table-wrap {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.c-card__body--flush > .c-table-wrap,
.c-card__body--flush > turbo-frame > .c-table-wrap {
  border: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.c-table {
  width: 100%;
  font-size: var(--text-md);
}

.c-table caption {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: left;
  caption-side: top;
}

.c-table th,
.c-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.c-table th:first-child,
.c-table td:first-child {
  padding-left: var(--space-4);
}

.c-table th:last-child,
.c-table td:last-child {
  padding-right: var(--space-4);
}

.c-table thead th {
  background: var(--color-surface-hover);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: bottom;
  box-shadow: inset 0 -1px 0 var(--color-border);
  border-bottom: 0;
}

.c-table tbody tr:last-child td {
  border-bottom: 0;
}

.c-table tbody tr:hover td {
  background: var(--color-surface-hover);
}

.c-table .is-num,
.c-table td.num,
.c-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.c-table td a {
  font-weight: var(--weight-medium);
}

.c-table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: inherit;
  text-decoration: none;
}

.c-table__sort:hover {
  color: var(--color-text-strong);
  text-decoration: none;
}

.c-table__sort svg {
  width: 0.8125rem;
  height: 0.8125rem;
  opacity: 0.45;
}

.c-table__sort[aria-sort] svg,
th[aria-sort] .c-table__sort svg {
  opacity: 1;
  color: var(--color-focus);
}

th[aria-sort] .c-table__sort {
  color: var(--color-text-strong);
}

.c-table__secondary {
  display: block;
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

.c-table__expander td {
  background: var(--color-surface-hover);
}

.c-table--flush {
  font-size: var(--text-sm);
}

.c-table-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0 0;
}

.c-table-note {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

/* =========================================================================================
   Filter chips: the active filters above a table, each removable, plus "Clear all".
   ========================================================================================= */

.c-filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.c-filter-chips__label {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

.c-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  height: 1.875rem;
  padding: 0 var(--space-1) 0 var(--space-3);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-pill);
  background: var(--color-info-bg);
  color: var(--color-info-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.c-filter-chip__facet {
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
}

.c-filter-chip__remove {
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: var(--radius-pill);
  color: inherit;
}

.c-filter-chip__remove:hover {
  background: color-mix(in srgb, currentColor 14%, transparent);
  color: inherit;
}

.c-filter-chip__remove svg {
  width: 0.8125rem;
  height: 0.8125rem;
}

/* A chip that is itself the remove link (the ?at= location drill). */
a.c-filter-chip--link {
  text-decoration: none;
}

a.c-filter-chip--link:hover {
  border-color: var(--color-info-text);
}

.c-filter-chip--fixed {
  padding-right: var(--space-3);
  border-color: var(--color-border);
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.c-filter-chip--add {
  border-style: dashed;
  border-color: var(--color-border-strong);
  background: transparent;
  color: var(--color-text-muted);
  padding-right: var(--space-3);
}

/* =========================================================================================
   Facet rail: the filter sidebar of list pages.
   ========================================================================================= */

.c-facets {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.c-facets__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Phones (#795). The groups live in a native <details>. From the rail breakpoint up the summary is
   hidden and the body forced visible, so the desktop rail is exactly the plain list it was. */
.c-facets__summary { display: none; }
.c-facets__disclosure::details-content { content-visibility: visible; }

@supports not selector(::details-content) {
  /* No way to force the body open on desktop here, so keep the control visible at every width... */
  .c-facets__summary { display: flex; }
}

/* ...unless the facets-disclosure controller is running (it sets data-facets-active): at the rail
   breakpoint and up it holds the rail open itself, so a Filters control that does nothing useful
   there is hidden. Without JavaScript the attribute is absent and the summary stays. */
@supports not selector(::details-content) {
  @media (min-width: 64rem) {
    .c-facets__disclosure[data-facets-active] > .c-facets__summary { display: none; }
  }
}

@media (max-width: 64rem) {
  .c-facets { gap: var(--space-3); }

  /* The summary is the visible label; keep the heading for assistive tech and heading navigation. */
  .c-facets__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .c-facets__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong, var(--color-border));
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-strong);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    list-style: none;
  }

  .c-facets__summary::-webkit-details-marker { display: none; }
  .c-facets__summary:hover { background: var(--color-surface-hover); }

  .c-facets__summary:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  .c-facets__chevron {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: var(--color-text-muted);
    transition: transform 120ms ease;
  }

  .c-facets__disclosure[open] > .c-facets__summary > .c-facets__chevron { transform: rotate(180deg); }
  .c-facets__disclosure[open] > .c-facets__body { margin-top: var(--space-4); }
  .c-facets__disclosure:not([open])::details-content { content-visibility: hidden; }
}

.c-facets__title {
  font-size: var(--text-md);
}

.c-facet__label {
  margin-bottom: var(--space-1-5);
  color: var(--color-text-strong);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: normal;
}

.c-facet__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0;
  list-style: none;
}

/* A long list folds after FACET_LIST_LIMIT rows behind a native <details> (no inner scroll, no JS).
   The summary reads "Show N more" closed and "Show fewer" open; selected rows are hoisted into the
   visible head by the helper, so closing the fold never hides a chosen option. */
.c-facet__more { margin-top: 1px; }

.c-facet__more-summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  padding: var(--space-1) 0;
  color: var(--color-link);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  list-style: none;
}

.c-facet__more-summary::-webkit-details-marker { display: none; }
.c-facet__more-summary:hover { color: var(--color-link-hover); text-decoration: underline; }

.c-facet__more-summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.c-facet__more-close,
.c-facet__more[open] > .c-facet__more-summary > .c-facet__more-open { display: none; }
.c-facet__more[open] > .c-facet__more-summary > .c-facet__more-close { display: inline; }

.c-facet__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-md);
  text-decoration: none;
}

.c-facet__option:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text-strong);
  text-decoration: none;
}

.c-facet__option[aria-current="true"] {
  background: var(--color-surface-selected);
  color: var(--color-text-strong);
  font-weight: var(--weight-semibold);
}

.c-facet__count {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

/* =========================================================================================
   Form controls
   ========================================================================================= */

.c-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  min-width: 0;
}

.c-field__label {
  color: var(--color-text-strong);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.c-field__optional {
  color: var(--color-text-subtle);
  font-weight: var(--weight-regular);
}

.c-field__help {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.c-field__error {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-danger-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.c-field__error svg {
  width: 0.875rem;
  height: 0.875rem;
}

.c-input,
.c-select,
.c-textarea {
  width: 100%;
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-md);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.c-textarea {
  min-height: 6rem;
  padding: var(--space-2) var(--space-3);
  line-height: var(--leading-normal);
  resize: vertical;
}

.c-input::placeholder,
.c-textarea::placeholder {
  color: var(--color-text-subtle);
}

.c-input:hover,
.c-select:hover,
.c-textarea:hover {
  border-color: var(--color-text-subtle);
}

.c-input:focus-visible,
.c-select:focus-visible,
.c-textarea:focus-visible {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 28%, transparent);
}

.c-input[aria-invalid="true"],
.c-select[aria-invalid="true"],
.c-textarea[aria-invalid="true"] {
  border-color: var(--color-danger-solid);
}

.c-select {
  appearance: none;
  padding-right: var(--space-8);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 52%, calc(100% - 0.75rem) 52%;
  background-size: 0.3rem 0.3rem;
  background-repeat: no-repeat;
}

.c-check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-text);
  font-size: var(--text-md);
  cursor: pointer;
}

.c-check input {
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
  accent-color: var(--color-action);
  cursor: pointer;
}

/* Search field: an input with a leading icon and an optional trailing hint or clear. */
.c-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.c-search__icon {
  position: absolute;
  left: var(--space-3);
  width: 1rem;
  height: 1rem;
  color: var(--color-text-subtle);
  pointer-events: none;
}

.c-search .c-input {
  padding-left: calc(var(--space-3) + 1rem + var(--space-2));
  padding-right: var(--space-12);
}

.c-search__trail {
  position: absolute;
  right: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.c-search--lg .c-input {
  min-height: var(--control-height-lg);
  font-size: var(--text-base);
  border-radius: var(--radius-lg);
}

.c-kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 var(--space-1);
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  background: var(--color-surface-hover);
  color: var(--color-text-subtle);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}

/* =========================================================================================
   States: empty, loading, error, unavailable. Designed, never a bare sentence.
   ========================================================================================= */

.c-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-12) var(--space-6);
  color: var(--color-text-muted);
  text-align: center;
}

.c-state--compact {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  text-align: left;
}

.c-state--compact .c-state__icon {
  width: 2rem;
  height: 2rem;
  margin-bottom: 0;
}

.c-state--compact .c-state__icon svg {
  width: 1rem;
  height: 1rem;
}

.c-state--compact .c-state__title {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
}

.c-state--compact .c-state__body {
  flex-basis: 100%;
  padding-left: calc(2rem + var(--space-3));
  font-size: var(--text-sm);
}

.c-state--compact .c-state__actions {
  margin-top: 0;
  margin-left: auto;
}

/* Inside a table wrap or a chart frame the container already draws the border. */
.c-table-wrap > .c-state--compact,
.c-chart__canvas > .c-state--compact {
  border: 0;
}

.c-state__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  color: var(--color-text-subtle);
}

.c-state__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.c-state--error .c-state__icon {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

.c-state--unavailable .c-state__icon {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.c-state--loading .c-state__icon svg {
  animation: c-spin 900ms linear infinite;
}

.c-state__title {
  color: var(--color-text-strong);
  font-size: var(--text-base);
  font-family: var(--font-display);
  letter-spacing: normal;
}

.c-state__body {
  max-width: 34rem;
  font-size: var(--text-md);
}

.c-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

@keyframes c-spin {
  to { transform: rotate(360deg); }
}

/* Skeleton: reserves the space a loading block will take, so nothing shifts when it arrives. */
.c-skeleton {
  display: block;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-surface-sunken) 0%, var(--color-surface-hover) 50%, var(--color-surface-sunken) 100%);
  background-size: 200% 100%;
  animation: c-shimmer 1.4s ease-in-out infinite;
}

.c-skeleton--text { height: 0.75rem; }
.c-skeleton--title { height: 1.25rem; width: 40%; }
.c-skeleton--block { height: 12rem; border-radius: var(--radius-md); }

@keyframes c-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

/* =========================================================================================
   Notice: an inline message (flash, warning, outage). Tone carries meaning AND an icon.
   ========================================================================================= */

.c-notice {
  --notice-fg: var(--color-info-text);
  --notice-bg: var(--color-info-bg);
  --notice-border: var(--color-info-border);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--notice-border);
  border-radius: var(--radius-md);
  background: var(--notice-bg);
  color: var(--color-text);
  font-size: var(--text-md);
}

.c-notice > svg {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  color: var(--notice-fg);
}

.c-notice__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}

/* The flash message's close button (layouts/_flash): a quiet icon button at the notice's right edge. */
.c-notice__close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2)) calc(-1 * var(--space-1)) 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--notice-fg);
  cursor: pointer;
}

.c-notice__close[hidden] { display: none; }

.c-notice__close:hover { background: color-mix(in srgb, var(--notice-fg) 12%, transparent); }

.c-notice__close:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.c-notice__title {
  color: var(--notice-fg);
  font-weight: var(--weight-semibold);
}

.c-notice--success { --notice-fg: var(--color-success-text); --notice-bg: var(--color-success-bg); --notice-border: var(--color-success-border); }
.c-notice--warning { --notice-fg: var(--color-warning-text); --notice-bg: var(--color-warning-bg); --notice-border: var(--color-warning-border); }
.c-notice--danger { --notice-fg: var(--color-danger-text); --notice-bg: var(--color-danger-bg); --notice-border: var(--color-danger-border); }
.c-notice--neutral { --notice-fg: var(--color-text-muted); --notice-bg: var(--color-surface-sunken); --notice-border: var(--color-border); }

/* =========================================================================================
   Pagination
   ========================================================================================= */

.c-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.c-pagination__info {
  color: var(--color-text-muted);
}

.c-pagination__pages {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  list-style: none;
}

.c-pagination__link {
  display: grid;
  place-items: center;
  min-width: var(--control-height-sm);
  height: var(--control-height-sm);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.c-pagination__link:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text-strong);
  text-decoration: none;
}

.c-pagination__link[aria-current="page"] {
  background: var(--color-surface-selected);
  color: var(--color-text-strong);
  font-weight: var(--weight-semibold);
}

.c-pagination__link[aria-disabled="true"] {
  color: var(--color-text-subtle);
  opacity: 0.6;
  pointer-events: none;
}

.c-pagination__link svg {
  width: 1rem;
  height: 1rem;
}

.c-pagination__gap {
  color: var(--color-text-subtle);
  padding: 0 var(--space-1);
}

/* =========================================================================================
   Breadcrumb
   ========================================================================================= */

.c-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.c-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
}

.c-breadcrumb li + li::before {
  content: "/";
  color: var(--color-border-strong);
}

.c-breadcrumb a {
  color: var(--color-text-muted);
}

.c-breadcrumb a:hover {
  color: var(--color-link-hover);
}

.c-breadcrumb [aria-current="page"] {
  color: var(--color-text-strong);
  font-weight: var(--weight-medium);
}

/* =========================================================================================
   Menu: a disclosure popover of actions or links (user menu, "More", row actions).
   ========================================================================================= */

.c-menu {
  position: relative;
}

.c-menu__popover {
  position: absolute;
  top: calc(100% + var(--space-1-5));
  right: 0;
  z-index: var(--z-popover);
  min-width: 14rem;
  max-height: min(70vh, 32rem);
  overflow-y: auto;
  padding: var(--space-1-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-lg);
}

.c-menu__popover--start {
  right: auto;
  left: 0;
}

.c-menu__section + .c-menu__section {
  margin-top: var(--space-1-5);
  padding-top: var(--space-1-5);
  border-top: 1px solid var(--color-border);
}

.c-menu__heading {
  padding: var(--space-1-5) var(--space-2-5) var(--space-1);
}

.c-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  width: 100%;
  padding: var(--space-1-5) var(--space-2-5);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-size: var(--text-md);
  text-align: left;
  text-decoration: none;
}

.c-menu__item:hover,
.c-menu__item:focus-visible {
  background: var(--color-surface-sunken);
  color: var(--color-text-strong);
  text-decoration: none;
  outline: none;
}

.c-menu__item[aria-current="page"] {
  background: var(--color-surface-accent);
  color: var(--color-text-accent);
  font-weight: var(--weight-semibold);
}

.c-menu__item svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-text-subtle);
}

.c-menu__item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.c-menu__item-desc {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.c-menu__item form,
form.c-menu__form {
  display: contents;
}

/* =========================================================================================
   Combobox: type-ahead results grouped by entity type (global search).
   ========================================================================================= */

.c-combobox {
  position: relative;
  width: 100%;
}

.c-combobox__popover {
  position: absolute;
  top: calc(100% + var(--space-1-5));
  right: 0;
  left: 0;
  z-index: var(--z-popover);
  max-height: min(70vh, 34rem);
  overflow-y: auto;
  padding: var(--space-1-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-lg);
}

.c-combobox__group + .c-combobox__group {
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px solid var(--color-border);
}

.c-combobox__group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1-5) var(--space-2-5) var(--space-1);
}

.c-combobox__option {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-1-5) var(--space-2-5);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
}

.c-combobox__option:hover,
.c-combobox__option[aria-selected="true"] {
  background: var(--color-surface-selected);
  color: var(--color-text-strong);
  text-decoration: none;
}

.c-combobox__option svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-text-subtle);
}

.c-combobox__option-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.c-combobox__option-name {
  overflow: hidden;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-combobox__option-sub {
  overflow: hidden;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-combobox__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-2-5) var(--space-1);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

.c-combobox__status {
  padding: var(--space-4) var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-md);
  text-align: center;
}

/* =========================================================================================
   Stepper: an ordered multi-step flow (the Study Feasibility Planner).
   ========================================================================================= */

.c-stepper {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.c-stepper__step {
  counter-increment: step;
}

.c-stepper__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  height: 100%;
  padding: var(--space-3) var(--space-4);
  border-top: 3px solid var(--color-border);
  color: var(--color-text-muted);
  text-decoration: none;
}

a.c-stepper__link:hover {
  border-top-color: var(--color-border-strong);
  background: var(--color-surface-hover);
  color: var(--color-text-strong);
  text-decoration: none;
}

.c-stepper__index {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.c-stepper__index::before {
  content: "Step " counter(step);
}

.c-stepper__label {
  color: var(--color-text-strong);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.c-stepper__hint {
  font-size: var(--text-xs);
}

.c-stepper__step--complete .c-stepper__link {
  border-top-color: var(--color-success-solid);
}

.c-stepper__step--current .c-stepper__link {
  border-top-color: var(--color-action);
  background: var(--color-surface);
}

.c-stepper__step--current .c-stepper__index {
  color: var(--color-link); /* text: the link token holds AA in both themes, the action fill does not */
}

.c-stepper__step--disabled .c-stepper__link {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 48rem) {
  .c-stepper {
    grid-auto-flow: row;
  }
}

/* =========================================================================================
   Chart frame: the card a chart lives in. Title, legend, the chart, its states, its source.
   ========================================================================================= */

.c-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.c-chart__canvas {
  position: relative;
  width: 100%;
  min-height: var(--chart-height, 18rem);
}

.c-chart__canvas > .c-state {
  position: absolute;
  inset: 0;
  justify-content: center;
}

.c-legend[hidden] { display: none; }

.c-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5) var(--space-4);
  padding: 0;
  list-style: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.c-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
}

.c-legend__swatch {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 2px;
  background: var(--swatch);
}

.c-legend__swatch--1 { --swatch: var(--chart-1); }
.c-legend__swatch--2 { --swatch: var(--chart-2); }
.c-legend__swatch--3 { --swatch: var(--chart-3); }
.c-legend__swatch--4 { --swatch: var(--chart-4); }
.c-legend__swatch--5 { --swatch: var(--chart-5); }
.c-legend__swatch--6 { --swatch: var(--chart-6); }
.c-legend__swatch--7 { --swatch: var(--chart-7); }
.c-legend__swatch--8 { --swatch: var(--chart-8); }
.c-legend__swatch--other { --swatch: var(--chart-other); }

/* =========================================================================================
   Definition list: label/value pairs (entity attributes).
   ========================================================================================= */

.c-dl {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
  gap: var(--space-2) var(--space-6);
  font-size: var(--text-md);
}

.c-dl dt {
  color: var(--color-text-muted);
}

.c-dl dd {
  min-width: 0;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

/* =========================================================================================
   Tile: a short entry point to a surface (home, landing).
   ========================================================================================= */

.c-tile {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

a.c-tile:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  text-decoration: none;
}

.c-tile__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.c-tile--row {
  padding: var(--space-4);
}

/* The stacked form (icon above the text) is kept for a caller that wants it; none does today. */
.c-tile--stack {
  flex-direction: column;
  gap: var(--space-2);
}

.c-tile__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  background: var(--color-surface-accent);
  color: var(--color-text-accent);
}

.c-tile__icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.c-tile__title {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--text-base);
}

.c-tile__title svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-text-subtle);
  transition: transform var(--duration-fast) var(--ease-out);
}

a.c-tile:hover .c-tile__title svg {
  transform: translateX(2px);
  color: var(--color-link);
}

.c-tile__body {
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

/* =========================================================================================
   Avatar: initials disc for the user menu.
   ========================================================================================= */

.c-avatar {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface-brand);
  color: var(--color-text-on-brand);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
}

/* =========================================================================================
   Dialog (native <dialog>)
   ========================================================================================= */

.c-dialog {
  width: min(32rem, calc(100vw - 2 * var(--space-4)));
  max-height: calc(100vh - 2 * var(--space-8));
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}

.c-dialog::backdrop {
  background: var(--color-overlay);
}

.c-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.c-dialog__title {
  font-size: var(--text-lg);
}

.c-dialog__body {
  padding: var(--space-5);
}

.c-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
}

/* Chart state placeholders take the height the chart would have, so nothing shifts. */
.c-chart__canvas--h200 { min-height: 200px; }
.c-chart__canvas--h240 { min-height: 240px; }
.c-chart__canvas--h300 { min-height: 300px; }
.c-chart__canvas--h360 { min-height: 360px; }
.c-chart__canvas--h420 { min-height: 420px; }

.c-chart__canvas:has(> .c-state) {
  display: grid;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

.c-chart__canvas > .c-state {
  position: static;
}

/* Skeleton text widths (no inline styles under the CSP). */
.c-skeleton--text[data-w="92"] { width: 92%; }
.c-skeleton--text[data-w="80"] { width: 80%; }
.c-skeleton--text[data-w="72"] { width: 72%; }
.c-skeleton--text[data-w="64"] { width: 64%; }

.c-search-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

/* =========================================================================================
   Copy snippet
   ========================================================================================= */

.c-copy {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}

.c-copy__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5) var(--space-1-5) var(--space-1-5) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-hover);
}

.c-copy__header .c-field__label {
  flex: 1;
  font-size: var(--text-sm);
}

.c-copy__status {
  color: var(--color-success-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.c-copy__code {
  margin: 0;
  padding: var(--space-3);
  overflow-x: auto;
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  white-space: pre;
}

/* =========================================================================================
   Activity list: recent entity events (what started, completed, changed).
   ========================================================================================= */

.c-activity {
  padding: 0;
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1);
  list-style: none;
}

.c-activity__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.c-activity__item:last-child {
  border-bottom: 0;
}

.c-activity__item:hover {
  background: var(--color-surface-hover);
}

.c-activity__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.c-activity__title {
  color: var(--color-text-strong);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.c-activity__title:hover {
  color: var(--color-link-hover);
}

.c-activity__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.c-activity__sep {
  color: var(--color-border-strong);
}

.c-activity__aside {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: flex-end;
  gap: var(--space-1);
}

.c-activity__date {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.c-notice + .c-state {
  margin-top: var(--space-4);
}

.c-notice + .c-activity {
  margin-top: var(--space-4);
  margin-bottom: calc(var(--space-5) * -1);
}

/* =========================================================================================
   Record list (components/_record_list): one row per record, in place of a wide many-column table.
   A hairline-divided list: icon tile, bold one-line title, ONE muted meta line, a right-hand slot
   (key figure and/or status chip) and a chevron. The whole row is the click target (a stretched title
   link, or a native <details> summary when the row has detail). Never scrolls on either axis; the
   right-hand slot wraps under the meta line on a phone.
   ========================================================================================= */

.c-record-list {
  max-width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.c-card__body--flush > .c-record-list,
.c-card__body--flush > turbo-frame > .c-record-list {
  border: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.c-record-list__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.c-record-list__head .c-segmented {
  max-width: 100%;
  flex-wrap: wrap;
}

.c-record-list__head .c-segmented__option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
}

.c-record-list__sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-1);
  margin-left: auto;
  font-size: var(--text-sm);
}

.c-record-list__sort-label {
  margin-right: var(--space-1);
  color: var(--color-text-subtle);
}

.c-record-list__sort-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
}

.c-record-list__sort-option:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-strong);
  text-decoration: none;
}

.c-record-list__sort-option[aria-current="true"] {
  background: var(--color-surface-accent);
  color: var(--color-text-accent);
  font-weight: var(--weight-semibold);
}

.c-record-list__sort-option:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.c-record-list__note {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.c-record-list__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-record-list__row {
  border-bottom: 1px solid var(--color-border);
}

.c-record-list__row:last-child {
  border-bottom: 0;
}

.c-record-list__item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "lead main aside chev";
  align-items: center;
  gap: var(--space-3);
  min-height: 4rem;
  padding: var(--space-3) var(--space-4);
  list-style: none;
}

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

.c-record-list__item:hover,
.c-record-list__details[open] > .c-record-list__item {
  background: var(--color-surface-hover);
}

summary.c-record-list__item {
  cursor: pointer;
}

summary.c-record-list__item:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.c-record-list__icon,
.c-record-list__mark {
  grid-area: lead;
}

.c-record-list__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  background: var(--color-surface-accent);
  color: var(--color-text-accent);
}

.c-record-list__main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}

.c-record-list__title {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-strong);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-record-list__link {
  color: inherit;
  text-decoration: none;
}

.c-record-list__link:hover {
  color: var(--color-link-hover);
  text-decoration: none;
}

/* The stretched link: its pseudo-element covers the row, so the whole row is one link with one
   accessible name (the title). Anything that must stay separately clickable would need a higher z-index. */
.c-record-list__link--stretched::after {
  content: "";
  position: absolute;
  inset: 0;
}

.c-record-list__link--stretched:focus-visible {
  outline: none;
}

.c-record-list__link--stretched:focus-visible::after {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.c-record-list__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.c-record-list__meta {
  display: block;
  overflow: hidden; /* clips the leading separator of a fact that starts a wrapped line */
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.c-record-list__facts {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--space-3) * -1);
}

.c-record-list__fact {
  position: relative;
  min-width: 0;
  padding-left: var(--space-3);
}

.c-record-list__sep {
  position: absolute;
  left: var(--space-1);
  color: var(--color-border-strong);
}

/* The meta, tags and aside boxes sit ABOVE the stretched row link but let clicks through (pointer-events
   none), so the EMPTY space beside the facts still opens the row. The content inside them takes pointer
   events back: a fact, a tag, a figure or a chip is real, selectable text (a ticker, an ORPHA code, a
   registry id can be dragged and copied) and a nested link or button stays its own click target. Clicking
   a fact's own text therefore does not open the row (a drag would otherwise be swallowed by the link);
   the title, the empty area and the padding do. */
.c-record-list__item .c-record-list__meta,
.c-record-list__item .c-record-list__tags,
.c-record-list__item .c-record-list__aside {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.c-record-list__item .c-record-list__fact,
.c-record-list__item .c-record-list__tags > *,
.c-record-list__item .c-record-list__aside > * {
  pointer-events: auto;
  user-select: text;
}

.c-record-list__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.c-record-list__aside {
  grid-area: aside;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  min-width: 0;
}

/* A long chip (a declaration that carries its own question) wraps inside the slot instead of widening the row. */
.c-record-list__aside > * {
  max-width: 100%;
}

.c-record-list__aside .c-declared,
.c-record-list__detail .c-declared {
  white-space: normal;
}

.c-record-list__figure {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--color-text-subtle);
  font-size: var(--text-2xs);
  line-height: var(--leading-snug);
  white-space: nowrap;
}

.c-record-list__figure strong {
  color: var(--color-text-strong);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

.c-record-list__chevron {
  grid-area: chev;
  color: var(--color-text-subtle);
  transition: transform 120ms ease;
}

.c-record-list__details[open] > .c-record-list__item > .c-record-list__chevron {
  transform: rotate(90deg);
}

/* The detail opens inside the same row, indented under the title (past the icon tile and its gap). */
.c-record-list__detail {
  min-width: 0;
  overflow-wrap: anywhere;
  padding: var(--space-1) var(--space-4) var(--space-4) calc(var(--space-4) + 2.25rem + var(--space-3));
  background: var(--color-surface-hover);
  font-size: var(--text-md);
}

.c-record-list__footer {
  border-top: 1px solid var(--color-border);
}

.c-record-list__footer .c-pagination {
  padding: var(--space-3) var(--space-4);
}

.c-record-list > .c-state {
  border: 0;
}

/* Phone: the right-hand slot wraps under the meta line, and the title may wrap rather than truncate. */
@media (max-width: 40rem) {
  .c-record-list__item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "lead main chev"
      ". aside aside";
    align-items: start;
    row-gap: var(--space-1);
  }

  .c-record-list__aside {
    justify-content: flex-start;
  }

  .c-record-list__figure {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-1);
  }

  .c-record-list__title {
    overflow: visible;
    white-space: normal;
  }

  .c-record-list__sort {
    margin-left: 0;
  }

  .c-record-list__detail {
    padding-left: var(--space-4);
  }
}

/* =========================================================================================
   Map (MapLibre point map)
   ========================================================================================= */

.c-map {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.c-map__canvas {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.c-map__canvas--h300 { height: 300px; }
.c-map__canvas--h380 { height: 380px; }
.c-map__canvas--h480 { height: 480px; }

/* Hero mode (components/_map hero:): the page opens on the map. Full-bleed under the top bar, with
   a floating panel over its left edge aligned to the content column; below 64rem the panel drops
   under the map so it never covers the points on a narrow screen. */
.c-map--hero {
  position: relative;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
}

.c-map__canvas--hero {
  height: clamp(26rem, 72vh, 48rem);
  border: 0;
  border-radius: 0;
}

.c-map__panel {
  position: absolute;
  z-index: 2;
  top: var(--space-6);
  left: max(var(--gutter), calc((100% - var(--container-max)) / 2 + var(--gutter)));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: min(26rem, 40%);
  max-height: calc(100% - 2 * var(--space-6));
  overflow-y: auto;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.c-map__title {
  margin: 0;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
}

.c-map__lede {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.c-map__panel .c-map__bar,
.c-map__panel .c-map__filters {
  flex-direction: column;
  align-items: stretch;
}

.c-map__panel > * {
  flex-shrink: 0; /* the panel scrolls; its blocks must not shrink to fit it */
}

.c-map__panel .c-map__search,
.c-map__panel .c-map__filter {
  flex: none;
  max-width: none;
}

/* The search list opens inside the scrolling panel: bound it to the room under the search so its
   last rows and footer are not clipped by the panel edge. */
.c-map__panel .c-combobox__popover {
  max-height: min(18rem, 45vh);
}

/* The attribution is an obligation, so it stays pinned at the panel's foot while the rest scrolls;
   its top rule doubles as the cue that more sits above it. */
.c-map__panel > .c-source:last-child {
  position: sticky;
  bottom: calc(-1 * var(--space-5));
  margin: 0 calc(-1 * var(--space-5)) calc(-1 * var(--space-5));
  padding: var(--space-2) var(--space-5) var(--space-3);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.c-map__panel .c-map__caption {
  flex-direction: column;
  align-items: flex-start;
}

.c-map__panel .c-stat-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* A hero holding an ECharts country choropleth instead of a MapLibre canvas (the RWD register pages:
   components/chart fill: true inside .c-map__canvas--chart). The canvas keeps the hero's height and
   full-bleed background; the chart is inset past the floating panel on a wide screen, the way the
   MapLibre camera is padded, so the countries are framed in the clear part of the map. */
.c-map__canvas--chart {
  display: flex;
  flex-direction: column;
}

.c-map__canvas--chart > .c-chart {
  flex: 1;
  min-height: 0;
}

.c-chart--fill > .c-chart__canvas--fill {
  flex: 1;
  min-height: 0;
  width: auto;
}

@media (min-width: 64.0625rem) {
  .c-map--hero .c-chart--fill > .c-chart__canvas--fill {
    margin-left: calc(max(var(--gutter), (100% - var(--container-max)) / 2 + var(--gutter)) + min(26rem, 40%) + var(--space-4));
  }
}

@media (max-width: 64rem) {
  .c-map__canvas--hero {
    height: clamp(18rem, 55vh, 28rem);
  }

  .c-map__panel {
    order: 2; /* first in source and tab order, but drawn under the map on a narrow screen */
    position: static;
    width: auto;
    max-height: none;
    padding-inline: var(--gutter);
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: none;
  }

  .c-map__panel > .c-source:last-child {
    position: static;
    margin: 0;
    padding: 0;
    border-top: 0;
  }
}

.c-map__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.c-map__key {
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--chart-1);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

.c-map__key--active { background: var(--chart-1); }
.c-map__key--cluster { width: 1rem; height: 1rem; border-color: var(--color-surface); background: var(--chart-1); box-shadow: 0 0 0 1px var(--chart-1); }

/* A category swatch: the same colour name the map controller reads off the `category` local, so the
   legend, a table chip and the pin cannot disagree. The fill carries the colour; the border is the same
   colour mixed toward the strong text token, a darker outline in light and a lighter one in dark, so the
   swatch holds 3:1 against the card even for amber (WCAG 1.4.11). */
.c-map__key--chart-1 { border-color: var(--map-key-edge); background: var(--chart-1); --map-key-edge: color-mix(in srgb, var(--chart-1) 55%, var(--color-text-strong)); }
.c-map__key--chart-2 { border-color: var(--map-key-edge); background: var(--chart-2); --map-key-edge: color-mix(in srgb, var(--chart-2) 55%, var(--color-text-strong)); }
.c-map__key--chart-3 { border-color: var(--map-key-edge); background: var(--chart-3); --map-key-edge: color-mix(in srgb, var(--chart-3) 55%, var(--color-text-strong)); }
.c-map__key--chart-4 { border-color: var(--map-key-edge); background: var(--chart-4); --map-key-edge: color-mix(in srgb, var(--chart-4) 55%, var(--color-text-strong)); }
.c-map__key--chart-5 { border-color: var(--map-key-edge); background: var(--chart-5); --map-key-edge: color-mix(in srgb, var(--chart-5) 55%, var(--color-text-strong)); }
.c-map__key--chart-6 { border-color: var(--map-key-edge); background: var(--chart-6); --map-key-edge: color-mix(in srgb, var(--chart-6) 55%, var(--color-text-strong)); }
.c-map__key--chart-7 { border-color: var(--map-key-edge); background: var(--chart-7); --map-key-edge: color-mix(in srgb, var(--chart-7) 55%, var(--color-text-strong)); }
.c-map__key--chart-8 { border-color: var(--map-key-edge); background: var(--chart-8); --map-key-edge: color-mix(in srgb, var(--chart-8) 55%, var(--color-text-strong)); }
.c-map__key--muted { border-color: color-mix(in srgb, var(--color-text-subtle) 55%, var(--color-text-strong)); background: var(--color-text-subtle); }
.c-map__key--cluster.c-map__key--muted { border-color: var(--color-surface); box-shadow: 0 0 0 1px var(--color-text-muted); background: var(--color-text-muted); }
.c-map__key { flex: none; }

.c-map__key--overlay { width: 1.125rem; height: 1.125rem; border-color: var(--color-surface); background: var(--chart-2); box-shadow: 0 0 0 1px var(--chart-2); }

/* The on-demand overlay's legend line under the map (a CRO's delivered-trial footprint). */
.c-map__overlay {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.c-map__overlay[hidden] { display: none; }

.c-map__overlay-text {
  flex: 1 1 18rem;
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-sm);
}

/* The find-a-feature combobox above the map (the combobox controller in local mode). */
.c-map__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-6);
}

.c-map__search {
  flex: 1 1 16rem;
  max-width: 24rem;
}

.c-map__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-6);
}

.c-map__filter {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 12rem;
}

.c-map__filter[hidden] { display: none; }

.c-map__filter-label {
  color: var(--color-text-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.c-map__range {
  width: 100%;
  min-height: var(--control-height);
  accent-color: var(--color-action);
}

.c-map__stack-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 14rem;
  margin: var(--space-2) 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.c-map__stack-row,
.c-map__stack-back {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-1-5) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.c-map__stack-row:hover,
.c-map__stack-back:hover {
  border-color: var(--color-action);
}

.c-map__stack-back {
  margin-bottom: var(--space-2);
  color: var(--color-link);
  font-size: var(--text-sm);
}

.c-map__error {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.c-map__popup-name {
  color: var(--color-text-strong);
  font-weight: var(--weight-semibold);
}

.c-map__popup-meta {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* MapLibre's own chrome, re-themed onto the tokens. */
.c-map .maplibregl-popup-content {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
}

.c-map .maplibregl-popup-tip {
  display: none;
}

.c-map .maplibregl-popup-close-button {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  padding: 0 var(--space-1-5);
}

.c-map .maplibregl-ctrl-group {
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-xs);
}

.c-map .maplibregl-ctrl-attrib {
  background: color-mix(in srgb, var(--color-surface) 85%, transparent);
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
}

/* =========================================================================================
   Section nav: sticky in-page navigation for long entity pages.
   ========================================================================================= */

.c-section-nav {
  position: sticky;
  top: var(--topbar-height);
  z-index: var(--z-sticky);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.c-section-nav__list {
  display: flex;
  min-height: var(--section-nav-height);
  gap: var(--space-1);
  overflow-x: auto;
  padding: 0;
  list-style: none;
  scrollbar-width: none;
}

.c-section-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-2-5) var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.c-section-nav__link:hover {
  color: var(--color-text-strong);
  text-decoration: none;
}

/* The targets of a section nav: the topbar and the sticky nav sit above the page, so a jump lands the
   heading just under them. Smooth only where the reader has not asked for less motion. */
html:has(.c-section-nav) [id] {
  scroll-margin-top: calc(var(--topbar-height) + var(--section-nav-height) + var(--space-4));
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.c-section-nav) {
    scroll-behavior: smooth;
  }
}

.c-panel-caption {
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* KOL component bars (ApplicationHelper#kol_component_bars): five tiny SVG bars. */
.c-kol-bars {
  display: inline-grid;
  grid-template-columns: repeat(5, 1.75rem);
  gap: 3px;
  vertical-align: middle;
}

.c-kol-bars__bar svg {
  width: 100%;
  height: 6px;
}

.c-kol-bars__track { fill: var(--color-surface-sunken); }
.c-kol-bars__fill--1 { fill: var(--chart-1); }
.c-kol-bars__fill--2 { fill: var(--chart-2); }
.c-kol-bars__fill--3 { fill: var(--chart-3); }
.c-kol-bars__fill--4 { fill: var(--chart-4); }
.c-kol-bars__fill--5 { fill: var(--chart-5); }

.c-kol-score {
  min-width: 2rem;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* =========================================================================================
   Coverage dots (components/_coverage_dots, _coverage_legend): one dot per evidence lane.
   State is a SHAPE first (disc / ringed disc / ring / dash); colour only reinforces it.
   ========================================================================================= */

.c-coverage {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: 0;
  margin: 0;
  list-style: none;
}

.c-coverage__item {
  display: inline-flex;
  align-items: center;
}

.c-coverage__dot {
  display: inline-block;
  flex: none;
  box-sizing: border-box;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  color: var(--color-text-muted);
}

.c-coverage__dot.is-linked {
  background: currentColor;
  color: var(--color-success-text);
}

.c-coverage__dot.is-partial {
  background: currentColor;
  box-shadow: inset 0 0 0 2px var(--color-surface);
}

.c-coverage__dot.is-not-linkable {
  height: 2px;
  border-width: 1px;
  border-radius: 0;
  background: currentColor;
}

.c-coverage-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: var(--text-md);
}

.c-coverage-legend li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.c-coverage-legend .c-coverage__dot {
  position: relative;
  top: 0.05rem;
}

/* One labelled percentile meter (ApplicationHelper#kol_meter): fills its container. */
.c-kol-meter {
  display: block;
  width: 100%;
  height: 6px;
}

/* =========================================================================================
   Disclosure (native details/summary)
   ========================================================================================= */

.c-disclosure {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.c-disclosure__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--color-link); /* text, so the link token: --color-action is a fill and misses AA as text in dark */
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  cursor: pointer;
  list-style: none;
}

.c-disclosure__summary::-webkit-details-marker { display: none; }

.c-disclosure__summary:hover { color: var(--color-link-hover); }

.c-disclosure__summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

.c-disclosure__chevron {
  width: 1rem;
  height: 1rem;
  flex: none;
  transition: transform 120ms ease;
}

.c-disclosure[open] > .c-disclosure__summary > .c-disclosure__chevron { transform: rotate(90deg); }

.c-disclosure__meta {
  margin-left: auto;
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
}

.c-disclosure__body {
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-md);
}

/* Inline variant: a chip-sized summary that opens a floating-width evidence panel, for an
   "extracted" marker sitting in a table cell or a sentence (ApplicationHelper#extraction_provenance).
   Same markup as the partial; only the box changes. */
.c-disclosure--inline {
  display: inline-block;
  max-width: 100%;
  border: 0;
  background: none;
  vertical-align: middle;
}

.c-disclosure--inline > .c-disclosure__summary {
  display: inline-flex;
  gap: var(--space-1);
  min-height: 1.375rem;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-neutral-border);
  border-radius: var(--radius-sm);
  color: var(--color-neutral-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.c-disclosure--inline > .c-disclosure__summary svg { width: 0.875em; height: 0.875em; }
.c-disclosure--inline > .c-disclosure__summary:hover { background: var(--color-surface-hover); }

.c-disclosure--inline > .c-disclosure__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 34rem;
  margin-top: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-sm);
  white-space: normal;
}

.c-disclosure__body p { margin: 0; }
.c-disclosure__source { color: var(--color-text-muted); }
.c-disclosure__confidence { color: var(--color-text-subtle); }

.c-disclosure__quote {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-border-strong);
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

/* =========================================================================================
   Owner list: the companies on record as owning the patents that protect a drug. One .c-owner
   per mart row (joint ownership survives to the page). Emitted by
   PatentOwnersHelper#patent_owner_chip inside panels/_patent_owners.
   ========================================================================================= */

.c-owners {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}

.c-owner {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.c-owner__head {
  color: var(--color-text-strong);
  font-weight: var(--weight-semibold);
}

.c-owner__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.c-owner__count { font-variant-numeric: tabular-nums; }
.c-owner__sources { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }

.c-owner__parent {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

/* =========================================================================================
   Structure: a 2D depiction of a molecule (components/_structure, `structure` controller).
   ========================================================================================= */

.c-structure {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 26rem;
  margin: 0;
}

.c-structure__canvas {
  display: block;
  width: 100%;
  height: 16rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

/* The label fonts smiles-drawer would inject as an inline <style> (blocked by the CSP). */
.c-structure__canvas .element { font: 11pt Arial, Helvetica, sans-serif; }
.c-structure__canvas .sub { font: 3pt Arial, Helvetica, sans-serif; }

/* =========================================================================================
   Protein: a 3D structure viewer (components/_protein, `protein` controller). The controller
   adds a "Tap to interact" shield over the canvas so a page swipe scrolls the page.
   ========================================================================================= */

.c-protein {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}

.c-protein__canvas {
  position: relative;
  height: 20rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}

.c-protein__shield {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20rem;
  display: grid;
  place-items: end center;
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
}

.c-protein__hint {
  padding: var(--space-1) var(--space-2-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.c-protein.is-active .c-protein__shield { display: none; }

/* =========================================================================================
   Flag control: the resolution-flag disclosure ("this is mis-resolved / is the same as another").
   ========================================================================================= */

.c-flag {
  position: relative;
}

.c-flag-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  min-height: var(--control-height-sm);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  list-style: none;
  cursor: pointer;
}

.c-flag-toggle::-webkit-details-marker {
  display: none;
}

.c-flag-toggle:hover,
.c-flag[open] > .c-flag-toggle {
  background: var(--color-surface-sunken);
  color: var(--color-text-strong);
}

.c-flag-toggle:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.c-flag-body {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: var(--z-popover);
  width: min(24rem, 88vw);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-md);
}

.c-flag-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.c-flag-choice {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.c-flag-actions {
  display: flex;
  justify-content: flex-end;
}

/* Compact: icon only, for a search row. The text stays for assistive technology. */
.c-flag-compact .c-flag-toggle {
  width: var(--control-height-sm);
  padding: 0;
  justify-content: center;
}

.c-flag-compact .c-flag-toggle-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================================================================
   Table: the subject row of a comparison (components/_table `row_class:`), marked by a left edge
   and a tint. The row's own text ("this company") carries the meaning; the tint only helps.
   ========================================================================================= */

.c-table tr.c-table__row--subject td {
  background: var(--color-surface-accent);
}

.c-table tr.c-table__row--subject td:first-child {
  box-shadow: inset 3px 0 0 var(--color-focus);
}

/* =========================================================================================
   Organization mark: the logo (or the initials monogram it falls back to) in an entity header's
   icon tile. `img-fallback` swaps a failed logo for the monogram by toggling `hidden`.
   ========================================================================================= */

.c-entity-header__icon--mark {
  background: var(--color-surface);
  overflow: hidden;
}

.c-org-mark {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--color-text-accent);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
}

.c-org-mark[hidden],
.c-org-mark__img[hidden] {
  display: none;
}

.c-org-mark--logo {
  padding: var(--space-1);
}

.c-org-mark__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* The wide form (epic #4303, phase 2: a Scientist.com supplier's mirrored logo, `supplier_logo_mark`). A logo is
   usually wider than it is tall, so the header tile grows to the logo instead of squeezing it into a square:
   a fixed height, a width that follows the image up to a cap. A header with no logo never matches :has() and
   keeps its 3rem icon tile exactly as before. */
.c-org-mark--wide {
  width: auto;
  padding: var(--space-1-5) var(--space-2);
}

.c-org-mark--wide .c-org-mark__img {
  width: auto;
  height: 100%;
}

/* A WIDE logo floats to the top right of the header and the identity text flows around it (tags and subtitle
   included), instead of a left column with an empty gap under it. The tile has a FIXED size and the image is
   contained in it, so the text never reflows when the image arrives (no layout shift). An icon or monogram
   header never matches :has() and is exactly as before. */
.c-entity-header__identity:has(.c-org-mark--wide) {
  display: block;
  flex: 1 1 20rem;
}

.c-entity-header__identity:has(.c-org-mark--wide) > .c-entity-header__text {
  display: block;
}

.c-entity-header__identity:has(.c-org-mark--wide) > .c-entity-header__text > :not(:first-child) {
  margin-top: var(--space-1);
}

.c-entity-header__icon--mark:has(.c-org-mark--wide) {
  float: right;
  display: block;
  width: calc(var(--space-16) * 2.5);
  height: var(--space-16);
  margin: 0 0 var(--space-3) var(--space-4);
}

.c-entity-header__icon--mark .c-org-mark--wide {
  width: 100%;
  height: 100%;
  /* A definite single track. With the default auto track the grid sized its row to the image's own height at the
     tile's width (a 512x277 logo = taller than the tile), so `height: 100%` resolved against that, the image
     overflowed and the tile's overflow:hidden cut its bottom edge. minmax(0, 1fr) pins the track to the tile. */
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
}

.c-entity-header__icon--mark .c-org-mark--wide .c-org-mark__img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

@media (max-width: 40rem) {
  .c-entity-header__icon--mark:has(.c-org-mark--wide) {
    width: var(--space-20);
    height: var(--space-12);
    margin-left: var(--space-3);
  }
}

/* =========================================================================================
   Ownership badge: "Owned by <parent>" with the relationship kind, any further hops and, when the
   chain did not reach a confirmed top, a words-labelled caveat badge. Inline, so it sits in an
   attribute list value or beside a name.
   ========================================================================================= */

.c-ownership-badge {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
}

.c-ownership-badge-label {
  color: var(--color-text-muted);
}

.c-ownership-badge-name {
  color: var(--color-text-strong);
  font-weight: var(--weight-semibold);
}

.c-ownership-badge-kind,
.c-ownership-badge-asof,
.c-ownership-badge-chain {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.c-ownership-badge-kind {
  padding: 0 var(--space-1-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}

/* =========================================================================================
   Group tree (#4388, #4389, #4395): the members of an organization group, nested under the entity they are
   part of. Plain lists with a native <details> per branch, so it needs no script. Tokens only.
   ========================================================================================= */

.c-group-tree {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.c-group-tree--nested {
  margin-block-start: var(--space-1);
  margin-inline-start: var(--space-4);
  padding-inline-start: var(--space-3);
  border-inline-start: 1px solid var(--color-border);
}

.c-group-tree__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

summary.c-group-tree__row {
  cursor: pointer;
}

summary.c-group-tree__row:focus-visible,
.c-group-tree__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.c-group-tree__name {
  color: var(--color-text-strong);
  font-weight: var(--weight-medium);
}

.c-group-tree__item--current > .c-group-tree__row,
.c-group-tree__item--current > .c-group-tree__branch > .c-group-tree__row {
  background: var(--color-surface-accent);
}

.c-group-tree__item--current .c-group-tree__name {
  font-weight: var(--weight-semibold);
}

.c-group-tree__meta {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.c-group-tree__figure {
  margin-inline-start: auto;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.c-group-tree__open {
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
}

/* The visible link text names the entity ("Open <name>"), so the accessible name is the visible text (WCAG 2.5.3);
   a long name is cut by the box, not by the markup. */
.c-group-tree__open > .c-group-tree__link {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.c-group-tree__more {
  padding: var(--space-1) var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* =========================================================================================
   Flag group: select several search results, then flag them as one (merge or separate).
   The per-row checkbox (.c-flag-select) is hidden until a facet's toggle sets .is-selecting on
   its results wrapper; the bar stays hidden until two same-spine results are ticked.
   ========================================================================================= */

.c-flag-select {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--color-action);
  cursor: pointer;
}

.c-flag-select:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.c-flag-select-toggle[aria-pressed="true"] {
  background: var(--color-surface-selected);
  color: var(--color-text-strong);
}

.c-flag-group {
  position: sticky;
  bottom: var(--space-4);
  z-index: var(--z-sticky);
  padding: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-md);
}

.c-flag-group[hidden] {
  display: none;
}

.c-flag-group__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.c-flag-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.c-flag-group__count {
  color: var(--color-text-strong);
  font-variant-numeric: tabular-nums;
}

/* =========================================================================================
   Personal data label: a neutral, text-first marker, deliberately none of the reserved hues.
   ========================================================================================= */

.c-pii-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.c-pii-badge-label {
  padding: var(--space-0-5) var(--space-2);
  background: var(--color-surface-sunken);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

/* =========================================================================================
   Actor badge: WHO asserted a resolution (rule, fuzzy, LLM or human) plus an optional detail.
   One neutral treatment for every kind; the word is the signal, never a hue.
   ========================================================================================= */
.c-actor-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-xs);
  line-height: 1.4;
  overflow: hidden;
  vertical-align: middle;
}

.c-actor-badge-kind {
  padding: var(--space-0-5) var(--space-2);
  background: var(--color-surface-sunken);
  color: var(--color-text-strong);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.c-actor-badge-detail {
  min-width: 0;
  padding: var(--space-0-5) var(--space-2);
  border-left: 1px solid var(--color-border);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================================================
   Plan tiers: Individual, Team, Enterprise side by side, one primary action each.
   ========================================================================================= */

.c-plan-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-plan-tier {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.c-plan-tier-name {
  color: var(--color-text-strong);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

/* Who the plan is for: one quiet sentence under the name. */
.c-plan-tier-description {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

/* The plan to start with (featured:): the action colour on the top edge and a badge in the name.
   Colour is never the only cue, the badge says "Start here" in words. */
.c-plan-tier--featured {
  border-top: var(--space-1) solid var(--color-action);
}

/* The plan name and, for the featured plan, its badge on one line. */
.c-plan-tier-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* The card terms under the button: plain muted text, not a ticked feature. */
.c-plan-tier-terms {
  margin: calc(-1 * var(--space-2)) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.c-plan-tier-price {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  margin: 0;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.c-plan-tier-amount {
  color: var(--color-text-strong);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.c-plan-tier-unit {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.c-plan-tier-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-md);
}

.c-plan-tier-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.c-plan-tier-features svg {
  flex: none;
  margin-top: 0.15rem;
  color: var(--color-text-accent);
}

/* The action sits on the card's foot whatever the feature count: auto margin on the flex child
   (the wrapping <form> for a checkout card, the <a> for the mailto). */
.c-plan-tier-action {
  margin-top: auto;
}

.c-plan-tier-action.c-button,
.c-plan-tier-action > .c-button {
  width: 100%;
}

@media (max-width: 64rem) {
  .c-plan-tiers {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Side by side (wider than the stacked breakpoint): the three cards share ONE set of row tracks
   (subgrid), so every card's name, price, description, features, button and terms line start on the
   same line whatever each card holds. A card with no terms line or no badge simply leaves its row
   empty, which is what keeps the Individual button (with the terms line under it) on the same
   baseline as the Team and Enterprise buttons. Stacked, the cards are independent flex columns. */
@media (min-width: 64.0625rem) {
  .c-plan-tier {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: var(--space-4);
  }

  .c-plan-tier-head { grid-row: 1; }
  .c-plan-tier-price { grid-row: 2; }
  .c-plan-tier-description { grid-row: 3; }
  .c-plan-tier-features { grid-row: 4; }
  .c-plan-tier-action { grid-row: 5; align-self: end; margin-top: 0; }
  .c-plan-tier-terms { grid-row: 6; }
}

/* Four cards (the Academic card, #4522): two columns while side by side is still narrow, four once
   there is room. The cards keep their subgrid rows, so each pair of rows stays aligned. */
@media (min-width: 64.0625rem) {
  .c-plan-tiers--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 80rem) {
  .c-plan-tiers--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* =========================================================================================
   Closing band: the full-size ask a public page ends on (components/_closing_band).
   ========================================================================================= */

.c-closing-band {
  padding: var(--space-12) var(--gutter);
  background: var(--color-surface-brand);
  color: var(--color-text-on-brand);
}

.c-closing-band__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: var(--container-prose);
  margin-inline: auto;
}

.c-closing-band__title {
  color: var(--color-text-on-brand);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
}

.c-closing-band__body {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.c-closing-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-2);
}

.c-closing-band__link {
  color: var(--color-text-on-brand);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
}

.c-closing-band__offer {
  font-size: var(--text-sm);
}

@media (max-width: 40rem) {
  .c-closing-band {
    padding-block: var(--space-8);
  }

  .c-closing-band__actions .c-button-form,
  .c-closing-band__actions .c-button {
    width: 100%;
  }
}

/* =========================================================================================
   Lead capture: the "Get the report" email form and its outcome notice.
   ========================================================================================= */

.c-lead-capture {
  max-width: 28rem;
}

.c-lead-capture__heading {
  margin-bottom: var(--space-3);
  font-size: var(--text-lg);
}

.c-lead-capture__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* The honeypot: off-screen, not display:none (some scanners skip a hidden field). */
.c-lead-capture__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.c-lead-capture__actions {
  display: flex;
}

/* =========================================================================================
   Declared state (RegisterHelper#declared_state and its siblings): a voluntary register's
   three answers, Yes, No and Not declared, at the same visual weight. A blank is NOT a No, so the
   third state is a real mark with a real word. The answer is a SHAPE (filled disc and tick,
   outlined disc and cross, dashed disc and dash) plus the WORD, never a colour: a Yes here is not
   "good" and a No is not "bad", so no semantic colour is spent on a declaration.
   ========================================================================================= */

.c-declared {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.c-declared__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 1.5px solid var(--color-text-strong);
  border-radius: var(--radius-pill);
}

.c-declared__mark svg { width: 0.75rem; height: 0.75rem; }

.c-declared--yes .c-declared__mark {
  background: var(--color-text-strong);
  color: var(--color-surface);
}

.c-declared--no .c-declared__mark {
  background: transparent;
  color: var(--color-text-strong);
}

.c-declared--none {
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
}

.c-declared--none .c-declared__mark {
  border-style: dashed;
  border-color: var(--color-text-subtle);
  color: var(--color-text-subtle);
}

.c-declared--compact { gap: 0; }

/* A declared VALUE (a name, a number, a date) against an absent one. The absent one says the word
   "Not declared" in a quieter weight: a missing value has no "No" competing with it, so it takes no
   chip chrome. */
.c-declared-value {
  color: var(--color-text-strong);
  font-weight: var(--weight-medium);
}

.c-declared-absent {
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
}

/* How many of the declarable questions the holder answered, with its denominator and a quiet bar. */
.c-declared-count {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

.c-declared-count__track {
  display: block;
  width: min(100%, 14rem);
  height: 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--color-border);
  overflow: hidden;
}

.c-declared-count__fill {
  display: block;
  height: 100%;
  background: var(--color-text-muted);
}

/* A field Substrate HOLDS and does not publish, as a decision with an owner and a reason. */
.c-withheld {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.c-withheld__verdict { flex: none; }
.c-withheld__label { color: var(--color-text); font-weight: var(--weight-semibold); }

/* A badge whose words are a sentence: it wraps instead of forcing a one-line pill. */
.c-badge--wrap {
  height: auto;
  padding-block: var(--space-0-5, 0.125rem);
  white-space: normal;
  text-align: left;
}

/* ==================================================================================
}

/* =========================================================================================
   Register coverage footer (components/_register_coverage): what a voluntary, self-declared
   register is and is not, its access month, its per-register counts WITH denominators, the licence
   badge and attribution, and the withheld-field inventory. A footnote region, never a headline.
   ========================================================================================= */

.c-register-coverage {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.c-register-coverage__title {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  letter-spacing: normal;
  color: var(--color-text-strong);
}

.c-register-coverage__counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-3) var(--space-6);
  margin: 0;
}

.c-register-coverage__counts dt { color: var(--color-text-muted); }
.c-register-coverage__counts dd { margin: 0; color: var(--color-text); }
.c-register-coverage__denominator { color: var(--color-text-muted); }
.c-register-coverage__withheld { display: flex; flex-direction: column; gap: var(--space-2); }

.c-register-attribution {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* A category of facets in the rail (`Facet#categorize`): a quiet subheading over its group, or the
   shared disclosure when the category is collapsed. */
.c-facets__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.c-facets__category {
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.c-facets__group > .c-disclosure > .c-disclosure__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* =========================================================================================
   Biomarker evidence cells (redesign PR 11a): the chips and notes BiomarkersHelper and
   BiomarkerAssayProvidersHelper emit, the assay-provider class chip, the related list, the
   section remainder line and the term list (legend). Emitted by helpers and partials, shared
   between the biomarker pages and the organization Biomarkers lens, so they live here and not in a
   page sheet.
   ========================================================================================= */

/* A quiet explanatory line or caveat beside a value. */
.c-evidence-note {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

/* A chip with a caption under it, or several chips stacked (validation pair, tier and lane). */
.c-evidence-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

/* A chip and its links on one wrapping line (the RX-matched cell). */
.c-evidence-inline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}

.c-evidence-source {
  display: block;
}

.c-evidence-score {
  font-variant-numeric: tabular-nums;
}

/* The three evidence types stay apart WITHOUT hue: a dashed outline marks the lowest-precision,
   free-text trial mention. */
.c-evidence-chip--trial-mention {
  border-style: dashed;
}

.c-vendor-role,
.c-vendor-tier__copy {
  white-space: normal;
}

.c-evidence-quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 36rem;
}

.c-evidence-quote q {
  font-style: italic;
}

/* The assay-provider class chip. Neutral for every decided class; an undecided one is dashed. */
.c-provider-class {
  display: inline-flex;
  align-items: center;
  min-height: 1.375rem;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
}

.c-provider-class.is-undecided {
  border-style: dashed;
  color: var(--color-text-muted);
}

/* A bounded list of entity links with an optional term. */
.c-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-related-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
}

.c-related-list__item:first-child {
  border-top: 0;
}

.c-related-list__link {
  font-weight: var(--weight-semibold);
}

.c-related-list__term {
  white-space: normal;
}

/* =========================================================================================
   Row preview tail: the blurred placeholder rows, the honest count and the two actions that
   follow a cut public table. The placeholders are empty bars (no text), blurred as a group.
   ========================================================================================= */
.c-row-preview__tail {
  display: grid;
  filter: blur(var(--blur-preview));
  pointer-events: none;
  user-select: none;
}

.c-row-preview__row {
  display: grid;
  grid-template-columns: repeat(var(--row-preview-cols, 1), minmax(0, 1fr));
  align-items: center;
  gap: var(--space-4);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.c-row-preview__tail[data-kind="list"] .c-row-preview__row { --row-preview-cols: 2; grid-template-columns: 3fr 1fr; }
.c-row-preview__tail[data-cols="1"] { --row-preview-cols: 1; }
.c-row-preview__tail[data-cols="2"] { --row-preview-cols: 2; }
.c-row-preview__tail[data-cols="3"] { --row-preview-cols: 3; }
.c-row-preview__tail[data-cols="4"] { --row-preview-cols: 4; }
.c-row-preview__tail[data-cols="5"] { --row-preview-cols: 5; }
.c-row-preview__tail[data-cols="6"] { --row-preview-cols: 6; }
.c-row-preview__tail[data-cols="7"] { --row-preview-cols: 7; }
.c-row-preview__tail[data-cols="8"] { --row-preview-cols: 8; }

.c-row-preview__cell {
  display: block;
  height: 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
}

.c-row-preview__cell[data-w="92"] { width: 92%; }
.c-row-preview__cell[data-w="80"] { width: 80%; }
.c-row-preview__cell[data-w="64"] { width: 64%; }
.c-row-preview__cell[data-w="48"] { width: 48%; }

.c-row-preview__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.c-row-preview__count {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.c-row-preview__actions { gap: var(--space-3); }

.c-row-preview__actions .c-button,
.c-row-preview__pdf {
  min-height: 2.75rem;
}

.c-row-preview__pdf {
  display: inline-flex;
  align-items: center;
  color: var(--color-link);
  font-size: var(--text-sm);
}

/* "+412 more organizations". */
.c-section-remainder {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* A key: a chip and the sentence that says what it means. */
.c-term-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2) var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}

.c-term-list__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.c-term-list__note {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Services under their category headings (components/_service_groups). The groups FLOW in CSS columns
   (column-width) and each stays whole (break-inside: avoid), so a tall group never leaves a gap in the
   groups beside it, which a row-aligned grid did. A group is bounded by the partial (its first few
   services, the rest in an inline disclosure), never by a scroll box. A group whose disclosure is open
   spans the full width and lays its remaining services out in columns of their own, so a group of
   hundreds is a wide block, not one endless column. A name is the strong line, its one-line summary the
   quiet line under it. Long unbroken supplier text wraps instead of overflowing. */
.c-service-groups {
  column-width: 18rem;
  column-gap: var(--space-8);
}

.c-service-groups__group {
  min-width: 0;
  break-inside: avoid;
  margin-bottom: var(--space-6);
}

.c-service-groups__group:has(> .c-disclosure[open]) {
  column-span: all;
}

.c-service-groups__group > .c-disclosure {
  margin-top: var(--space-3);
}

.c-service-groups__list.c-service-groups__list--more {
  column-width: 18rem;
  column-gap: var(--space-8);
  display: block;
}

.c-service-groups__list--more > .c-service-groups__item {
  break-inside: avoid;
  margin-bottom: var(--space-3);
}

.c-service-groups__title {
  margin: 0 0 var(--space-2);
  color: var(--color-text-strong);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

.c-service-groups__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.c-service-groups__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  overflow-wrap: anywhere;
}

.c-service-groups__summary {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

/* Org lens heading (#3662): "<org name>: <Lens>". The subject half keeps the heading ink the base h1
   gives it; the lens half is muted, an AA pair at this size, so the organization is the prominent part
   and not merely the first part. Colour is not the only signal: reading order and the colon carry the
   same structure with it removed. No size, weight, family or margin is restated, so the base heading
   rules (or the entity and page header name rules this is rendered inside) keep supplying them.
   overflow-wrap: anywhere is the phone-width fix, measured: the longest UNBROKEN token in
   canonical.canonical_orgs (352,306 rows, 2026-09-27) is 51 characters, wider than a 375px viewport
   at heading size, so without it that token overflows the line box. text-wrap: balance is deliberately
   not used: it is capped at a few lines and a 392-character name exceeds that. */
.c-lens-heading {
  overflow-wrap: anywhere;
}

.c-lens-heading-lens {
  color: var(--color-text-muted);
}

/* .c-lens-heading-subject carries no rule on purpose: the subject half must keep inheriting the
   heading ink, so a change to the heading moves both halves together. The class is the DOM hook that
   lets a spec assert the organization name is inside the heading. */

/* Comparison table (#3862, compare-human): the comparison pages' fact tables. Two layouts of one
   component. facts: one row per fact, one column per product (the one-on-one page's two value
   columns, full quoted values). products: one row per product, one column per fact (the hub's
   quick comparison, short values). A real <table> with <th scope>. Below the breakpoint the table
   and the per-entity card list (same markup, one `cell_html` lambda) swap visibility with display:
   none, so there is never a horizontal page scroll and the hidden rendering leaves the
   accessibility tree. The citation (.c-comparison-cite) is small, muted and sits under the value;
   its link is underlined, not colour-only (WCAG 1.4.1), because it sits beside plain text. */
.c-comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-2) 0 0;
}

.c-comparison-table caption {
  text-align: left;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  padding: 0 var(--space-4);
  margin-bottom: var(--space-2);
}

.c-comparison-table th,
.c-comparison-table td {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  font-size: var(--text-sm);
  overflow-wrap: break-word;
}

.c-comparison-table thead th {
  color: var(--color-text-strong);
  font-weight: var(--weight-semibold);
  border-bottom-color: var(--color-border-strong);
}

.c-comparison-table tbody th[scope="row"] {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

/* facts layout: a fixed label column and two equal value columns, so a long quoted value wraps
   inside its cell instead of widening the page. */
.c-comparison-table--facts {
  table-layout: fixed;
}

.c-comparison-table--facts th:first-child {
  width: 11rem;
}

/* products layout: the product name never wraps mid-word and the five fact columns share the rest. */
.c-comparison-table--products tbody th[scope="row"] {
  width: 9.5rem;
}

.c-comparison-table--products tbody th[scope="row"] a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 2px;
}

.c-comparison-table-value {
  display: block;
  color: var(--color-text);
}

.c-comparison-table-not-published {
  color: var(--color-text-muted);
  font-style: italic;
}

.c-comparison-table-cite {
  display: block;
  margin-top: var(--space-1);
}

.c-comparison-cite {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.c-comparison-table--products .c-comparison-cite {
  white-space: normal;
}

.c-comparison-cite svg {
  display: inline;
  vertical-align: -2px;
}

.c-comparison-cite a,
.c-comparison-table-verify {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 2px;
}

.c-comparison-cite a:hover,
.c-comparison-table-verify:hover {
  text-decoration-color: currentColor;
}

.c-comparison-table-verify {
  display: inline-block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
}

.c-comparison-table-promotion {
  color: var(--color-text-accent);
  font-weight: var(--weight-semibold);
  margin: var(--space-1) 0;
}

.c-comparison-table-cards {
  display: none;
}

@media (max-width: 700px) {
  .c-comparison-table {
    display: none;
  }

  .c-comparison-table-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0 var(--space-4) var(--space-4);
  }

  .c-comparison-table-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: var(--color-surface-raised);
  }

  .c-comparison-table-card-name {
    color: var(--color-text-strong);
    font: var(--weight-semibold) var(--text-base)/1.3 var(--font-display);
    margin: 0 0 var(--space-2);
  }

  .c-comparison-table-card-name a {
    color: var(--color-link);
  }

  .c-comparison-table-card-row {
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border);
  }

  .c-comparison-table-card-row:first-child {
    border-top: none;
    padding-top: 0;
  }

  .c-comparison-table-card-row dt {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 2px;
  }

  .c-comparison-table-card-row dd {
    margin: 0;
    font-size: var(--text-sm);
  }
}

/* Question list (#3861): a numbered, hairline-ruled column of questions. A linked question is an
   ordinary link; a gated one is muted ink plus the words "sign in to use it" (never amber: a gate is
   not a warning, and the words carry the non-colour distinction). list-style none plus a counter
   restores visible numbering and keeps native <ol> semantics. */
.c-question-list {
  list-style: none;
  counter-reset: question-list;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.c-question-list-item {
  counter-increment: question-list;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.c-question-list-item::before {
  content: counter(question-list) ".";
  flex: none;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.c-question-list-link,
.c-question-list-text {
  font-weight: var(--weight-semibold);
}

.c-question-list-text {
  color: var(--color-text-strong);
}

.c-question-list-gate,
.c-question-list-note {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* =========================================================================================
   Public hero: the hero plus call to action at the top of every public (signed-out) landing page
   (components/_public_hero), its evidence figure (components/_evidence_figure) and the native
   dialog that holds the PDF lead form (components/_public_lead_modal). Tokens only.
   ========================================================================================= */

.c-public-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
}

.c-public-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-8);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface-raised);
}

/* The primary action with the note that qualifies it directly underneath (the supplier hero: the
   Scientist.com button and its account-required note). The trial button beside it aligns to the top. */
.c-public-hero__primary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  max-width: 100%;
}

/* The marketplace button carries the supplier's name, which can be any length: let the label wrap (and break
   an unbroken word) and cap the button at its container, growing taller instead of wider. */
.c-public-hero__primary > .c-button[data-supplier-marketplace-link],
.c-record-list__aside > .c-button[data-supplier-marketplace-link] {
  height: auto;
  min-height: var(--control-height-lg);
  max-width: 100%;
  padding-block: var(--space-2);
  line-height: var(--leading-snug);
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* In a record row the button is the small size: keep its own height floor, not the hero's. */
.c-record-list__aside > .c-button[data-supplier-marketplace-link] {
  min-height: var(--control-height-sm);
}

.c-public-hero__actions:has(.c-public-hero__primary) {
  align-items: flex-start;
}

.c-public-hero__note {
  margin: 0;
}

/* The supplier's full country list: record rows flow down balanced columns as wide as fit (one on a phone), so
   thirty countries are not one long column and the last row is never a lone cell (the last column is just
   shorter). */
#supplier-locations .c-record-list__rows {
  display: block;
  column-width: 20rem;
  column-gap: var(--space-6);
}

#supplier-locations .c-record-list__row {
  break-inside: avoid;
}

#supplier-locations .c-record-list__row:last-child {
  border-bottom: 1px solid var(--color-border);
}

/* A stat row above a chart in the figure slot keeps a gap before the chart's title. */
.c-public-hero__figure > .c-stat-row:not(:only-child) {
  margin-bottom: var(--space-4);
}

/* A figure slot holding only a short stat row (a supplier with no chart) centres against the text column
   instead of leaving a tinted panel hanging with empty space under it. */
.c-public-hero__grid:has(.c-public-hero__figure > .c-stat-row:only-child) {
  align-items: center;
}

.c-public-hero--plain .c-public-hero__grid {
  grid-template-columns: minmax(0, 1fr);
}

.c-public-hero--plain .c-public-hero__text {
  max-width: 44rem;
}

/* A block formatting context rather than a flex column, so the logo (c-public-hero__mark) can float to the top
   right and the eyebrow, name, summary, tags and buttons flow around it. Vertical rhythm is a margin between
   siblings (the flex gap it replaces). */
.c-public-hero__text {
  display: flow-root;
  min-width: 0;
}

.c-public-hero__text > :not(.c-public-hero__mark) + * {
  margin-top: var(--space-3);
}

.c-public-hero__text > :not(.c-public-hero__mark) + .c-public-hero__actions {
  margin-top: var(--space-5);
}

.c-public-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The logo (public_hero `mark:`) floats to the top right of the hero card. A bordered tile of FIXED size with the
   image contained in it, so a wide wordmark and a square emblem take the same room and nothing shifts when the
   image loads. Not rendered when there is no logo. */
.c-public-hero__mark {
  float: right;
  margin: 0 0 var(--space-3) var(--space-4);
}

.c-public-hero__mark .c-org-mark {
  width: calc(var(--space-16) * 2.5);
  height: var(--space-16);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.c-public-hero__mark .c-org-mark__img {
  width: 100%;
  height: 100%;
}

@media (max-width: 40rem) {
  .c-public-hero__mark .c-org-mark {
    width: var(--space-20);
    height: var(--space-12);
    padding: var(--space-1);
  }
}

.c-public-hero__icon svg {
  width: 1rem;
  height: 1rem;
}

.c-public-hero__name {
  font-size: var(--text-3xl);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.c-public-hero__subtitle,
.c-public-hero__summary {
  max-width: 40rem;
  color: var(--color-text);
  font-size: var(--text-base);
  overflow-wrap: anywhere;
}

.c-public-hero__ids {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
}

.c-public-hero__ids > a,
.c-public-hero__ids .c-badge {
  min-width: 0;
  max-width: 100%;
}

.c-public-hero__ids .c-badge {
  flex-wrap: wrap;
  white-space: normal;
}

.c-public-hero__ids .c-badge .u-mono {
  overflow-wrap: anywhere;
}

.c-public-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.c-public-hero__offer {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* The visible data date under the hero sentence: "Data as of <time>. Source: ...". */
.c-public-hero__asof {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* The figure sits on a tinted panel so the band reads as text plus graphic. */
.c-public-hero__figure {
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
}

@media (max-width: 56rem) {
  .c-public-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-5);
  }

  .c-public-hero__name {
    font-size: var(--text-2xl);
  }
}

/* The evidence figures (components/_evidence_figure, components/_time_series_figure). Presentation
   attributes carry geometry; every colour is a token through a class, so the figures follow the
   theme and the page CSP (no style attribute) is respected. */
.c-evidence-figure {
  margin: 0;
}

.c-evidence-figure__title {
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.c-evidence-figure__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Bars: the wide (one line per bar) drawing from 32rem up, the narrow (label above bar) below. */
.c-evidence-figure__svg--narrow {
  display: none;
}

@media (max-width: 32rem) {
  .c-evidence-figure__svg--wide {
    display: none;
  }

  .c-evidence-figure__svg--narrow {
    display: block;
  }
}

.c-evidence-figure__svg--ladder {
  max-width: 20rem;
}

.c-evidence-figure__svg--stacked {
  width: 100%;
  height: clamp(9rem, 20vw, 14rem);
}

.c-evidence-figure__svg--stacked .c-evidence-figure__seg,
.c-evidence-figure__svg--stacked line {
  vector-effect: non-scaling-stroke;
}

.c-evidence-figure__axis-top,
.c-evidence-figure__axis-years {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.c-evidence-figure__axis-years {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-1);
}

/* Stacked columns by year (components/_stacked_year_figure): one segment per category. A hairline in the panel
   colour separates stacked segments so neighbouring hues stay distinct; the hue slot is a token. */
.c-evidence-figure__seg {
  stroke: var(--color-surface);
  stroke-width: 0.5;
}

.c-evidence-figure__seg--chart-1 { fill: var(--chart-1); }
.c-evidence-figure__seg--chart-2 { fill: var(--chart-2); }
.c-evidence-figure__seg--chart-3 { fill: var(--chart-3); }
.c-evidence-figure__seg--chart-4 { fill: var(--chart-4); }
.c-evidence-figure__seg--chart-5 { fill: var(--chart-5); }
.c-evidence-figure__seg--chart-6 { fill: var(--chart-6); }
.c-evidence-figure__seg--chart-7 { fill: var(--chart-7); }
.c-evidence-figure__seg--chart-8 { fill: var(--chart-8); }
.c-evidence-figure__seg--chart-other { fill: var(--chart-other); }

.c-evidence-figure--stacked .c-legend {
  margin-bottom: var(--space-3);
}

.c-evidence-figure__svg--series {
  max-width: 30rem;
}

.c-evidence-figure__label {
  fill: var(--color-text-strong);
  font-size: 12px;
  font-weight: var(--weight-semibold);
}

.c-evidence-figure__label--muted {
  fill: var(--color-text-muted);
  font-weight: var(--weight-regular);
}

.c-evidence-figure__state {
  fill: var(--color-text-muted);
  font-size: 11px;
}

.c-evidence-figure__count {
  fill: var(--color-text);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  /* A halo in the panel colour, painted under the glyphs: a power-of-ten rule that runs through the
     count at a bar's end no longer strikes the digits through. The hero figure sits on
     --color-surface-sunken (.c-public-hero__figure), so the halo matches it in light and dark. */
  paint-order: stroke;
  stroke: var(--color-surface-sunken);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.c-evidence-figure__numeral {
  fill: var(--color-text-strong);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--weight-bold);
}

.c-evidence-figure__tick {
  fill: var(--chart-label);
  font-size: 11px;
}

.c-evidence-figure__track {
  fill: var(--chart-grid);
}

/* Log-scale bars: a power-of-ten rule across each track (bars paint over it) and its axis label. */
.c-evidence-figure__decade {
  stroke: var(--chart-axis);
  stroke-width: 1;
  opacity: 0.55;
}

.c-evidence-figure__decade-label {
  fill: var(--color-text-muted);
  font-size: 11px;
  text-anchor: middle;
}

.c-evidence-figure__decade-label--start { text-anchor: start; }

.c-evidence-figure__grid {
  stroke: var(--chart-grid);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.c-evidence-figure__axis,
.c-evidence-figure__rail {
  stroke: var(--color-border-strong);
  stroke-width: 2;
}

.c-evidence-figure__marker--ring,
.c-evidence-figure__marker--dashed {
  fill: var(--color-surface-sunken);
  stroke: var(--color-text-muted);
  stroke-width: 1.5;
}

.c-evidence-figure__marker--dashed {
  stroke-dasharray: 2 2;
}

.c-evidence-figure__caption,
.c-evidence-figure__notes {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* The partial current year in the time-series figure: an actual count so far, drawn lighter than the complete
   years with a solid edge so it is not mistaken for one. The projected pace is a DASHED OUTLINE with no fill:
   a pace is not data. Both carry the hue as an edge (3:1 non-text contrast), never colour alone. */
.c-evidence-figure__partial,
.c-evidence-figure__projected {
  stroke-width: 1.5;
}

.c-evidence-figure__partial {
  fill-opacity: 0.45;
}

.c-evidence-figure__projected {
  fill: none;
  stroke-dasharray: 3 2;
}

.c-evidence-figure__partial--chart-1, .c-evidence-figure__projected--chart-1 { stroke: var(--chart-1); }
.c-evidence-figure__partial--chart-1 { fill: var(--chart-1); }

/* A drawn trial-start forecast (#4098): a HOLLOW DIAMOND at each forecast year's eventual count on a DASHED
   connector from the last complete year's column. No column, so it cannot be read as an actual count or as the
   dashed-outline pace; the shape (a glyph on a line) carries the meaning and the hue only the series, never colour
   alone. Same stroke token and weight as the pace outline, so the same 3:1 non-text contrast pair. */
.c-evidence-figure__forecast,
.c-evidence-figure__forecast-line {
  fill: none;
  stroke-width: 1.5;
}

.c-evidence-figure__forecast-line {
  stroke-dasharray: 3 2;
}

.c-evidence-figure__forecast--chart-1, .c-evidence-figure__forecast-line--chart-1 { stroke: var(--chart-1); }

.c-evidence-figure__marker--chart-1, .c-evidence-figure__bar--chart-1 { fill: var(--chart-1); }
.c-evidence-figure__marker--chart-2, .c-evidence-figure__bar--chart-2 { fill: var(--chart-2); }
.c-evidence-figure__marker--chart-3, .c-evidence-figure__bar--chart-3 { fill: var(--chart-3); }
.c-evidence-figure__marker--chart-4, .c-evidence-figure__bar--chart-4 { fill: var(--chart-4); }
.c-evidence-figure__marker--chart-5, .c-evidence-figure__bar--chart-5 { fill: var(--chart-5); }
.c-evidence-figure__marker--chart-6, .c-evidence-figure__bar--chart-6 { fill: var(--chart-6); }
.c-evidence-figure__marker--chart-7, .c-evidence-figure__bar--chart-7 { fill: var(--chart-7); }
.c-evidence-figure__marker--chart-8, .c-evidence-figure__bar--chart-8 { fill: var(--chart-8); }
.c-evidence-figure__marker--chart-other, .c-evidence-figure__bar--chart-other { fill: var(--chart-other); }


/* The PDF lead dialog. MODAL (script ran): the .c-dialog look, scrolling if the form is tall.
   NON-MODAL OPEN (no script): the same element rendered as an ordinary in-flow card, which is the
   progressive-enhancement fallback, so the form is on the page exactly where it always was. */
.c-public-lead {
  overflow: auto;
}

/* The base reset zeroes every margin, which takes the UA's `margin: auto` centring with it. */
.c-public-lead:modal {
  margin: auto;
}

.c-public-lead[open]:not(:modal) {
  position: static;
  inset: auto;
  width: auto;
  max-height: none;
  margin: 0;
  overflow: visible;
  box-shadow: none;
}

/* Internal provenance of an evidence record (machine codes, ids, derivation, the evidence-detail hash).
   Drawn only for a holder of substrate:tier_labels, set apart from the customer-facing record above it. */
.c-provenance {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  font-size: var(--text-sm);
}

.c-provenance__title {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.c-provenance .c-dl dd {
  overflow-wrap: anywhere;
}

/* Window shot (components/_window_shot; the landing page and the comparison pages): the window frame is pure CSS chrome, decorative (aria-hidden in the partial), nothing in it is a
   control. The capture inside has no app header of its own; the title bar stands in for it. */
.c-window-shot {
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.c-window-shot__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-sunken);
}

.c-window-shot__dots {
  position: absolute;
  inset-inline-start: var(--space-3);
  display: flex;
  gap: var(--space-2);
}

.c-window-shot__dots span {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
}

.c-window-shot__url {
  min-width: 0;
  max-width: 60%;
  padding: 0.15rem var(--space-4);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-window-shot__body {
  display: block;
  overflow: hidden;
}

.c-window-shot__img {
  display: block;
  width: 100%;
  height: auto;
}

.c-window-shot__img--dark {
  display: none;
}

/* Same rule the tokens use: a stored choice wins, otherwise the OS decides. */
:root[data-theme="dark"] .c-window-shot__img--light {
  display: none;
}

:root[data-theme="dark"] .c-window-shot__img--dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-window-shot__img--light {
    display: none;
  }

  :root:not([data-theme="light"]) .c-window-shot__img--dark {
    display: block;
  }
}

@media (max-width: 48rem) {
  /* Phone: a 1280px capture shrunk to 340px is unreadable, so show its top-left at a larger scale
     and let the window clip the rest. Nothing scrolls; the frame is a picture, not a viewport. */
  .c-window-shot__img {
    width: 220%;
    max-width: none;
  }

  .c-window-shot__url {
    max-width: 55%;
  }
}

/* Ad card: a native advertisement (components/_ad_card). Equal-height cards in a grid that fits as
   many as there are, so a short row never leaves an empty cell. The "Advertisement" label is always
   visible and uses text, not colour alone. */
/* The ad list. Kevel returns one to four ads, so the layout is decided by the COUNT (data-count on the
   list, set by the page script or the preview), never by auto-fit, which would stretch a lone card
   into a banner. Cards are COMPACT (a small square thumbnail beside clamped text) and rows share one
   height (grid-auto-rows: 1fr), so one to four ads all look intentional. Default is a single column,
   which is the ad RAIL of a wide page (the page decides where it sits). From 40rem the list is a short
   strip: columns by count, four as two by two until 64rem. On a phone only the first two ads show. */
.c-ad-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 40rem) {
  .c-ad-list > :nth-child(n + 3) {
    display: none;
  }
}

/* The strip modifier: the list as a short row of cards instead of a rail. Columns by count, four as two
   by two until 64rem. (contract_research_map_site.css applies the same columns to the site's ad slot
   between 40rem and 72rem, where the slot is a strip, and nothing from 72rem, where it is the rail.) */
@media (min-width: 40rem) {
  .c-ad-list--strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-ad-list--strip[data-count="1"] {
    grid-template-columns: minmax(0, 24rem);
  }

  .c-ad-list--strip[data-count="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .c-ad-list--strip[data-count="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.c-ad-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.c-ad-card__label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.c-ad-card__link {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
}

.c-ad-card__link:hover .c-ad-card__title {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.c-ad-card__media {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
}

.c-ad-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.c-ad-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.c-ad-card__title,
.c-ad-card__body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.c-ad-card__title {
  -webkit-line-clamp: 2;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-link);
}

.c-ad-card__body {
  -webkit-line-clamp: 3;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

/* Supplier map list (supplier_map/_list): the filter rail beside the charts and the list. The rail is the
   shared facet rail inside a card; the main column never scrolls on either axis. */
.c-crm-list-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text-strong);
}

.c-crm-rail .c-search-form {
  margin: 0;
}

.c-crm-main {
  min-width: 0;
}

/* The charts share one aligned row: two cards of one height, charts at the same canvas height. */
.c-crm-charts {
  --grid-min: 20rem;
  align-items: stretch;
}

.c-crm-charts > .c-card {
  display: flex;
  flex-direction: column;
}

/* The "Show on map" button sits in the record's right-hand slot, after the site count, so it has the same
   place in every row. A real button look (secondary, with a pin), and a 44px tap target on a phone or a
   touch screen, by height only so the row's layout does not move on a desktop. The supplier whose sites
   the map is showing is marked. */
.c-crm-show {
  flex: none;
}

@media (max-width: 40rem), (pointer: coarse) {
  .c-crm-show {
    min-height: 2.75rem;
    padding-inline: var(--space-3);
  }
}

/* Phone: the slot wraps under the facts, so the button leads it and starts at one x in every row, whatever
   the width of the site count after it. */
@media (max-width: 40rem) {
  .c-crm-show {
    order: -1;
  }
}

.c-crm-show[data-map-overlay-active="true"] {
  border-color: var(--color-link);
  background: var(--color-surface-selected);
  color: var(--color-text-strong);
}

.c-crm-chart-key {
  margin: var(--space-2) 0 0;
}

/* The filter rail of the supplier list. The shared .l-rail stacks at 64rem and below, but the Filters
   disclosure (facets-disclosure_controller) opens the rail from 64rem UP, so at exactly 64rem the rail was
   stacked AND expanded and pushed the charts down the page. Here the two-column layout and the plain
   rail hold from 64rem up, matching that controller; below it the rail stacks and collapses as before. */
@media (min-width: 64rem) {
  .c-crm-body {
    grid-template-columns: 15rem minmax(0, 1fr);
  }

  .c-crm-body .c-facets__summary {
    display: none;
  }

  .c-crm-body .c-facets__disclosure::details-content {
    content-visibility: visible;
  }

  .c-crm-body .c-facets__disclosure > .c-facets__body {
    margin-top: 0;
  }

  .c-crm-body .c-facets {
    gap: var(--space-5);
  }

  .c-crm-body .c-facets__title {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

/* =========================================================================================
   Hero over a map (components/_hero_map): the entity header floats over a full-bleed map.
   The map fills the section (absolutely, so the section is as tall as the header needs, never a
   scroll box); the panel is a translucent token scrim over the map's left edge. The scrim is 92%
   of the page surface, so body and muted text keep the contrast of the tokens on the surface in
   both themes (the map tiles add under 8% of their own colour); there is no text outside the
   panel except the map's own key. Under 48rem the map sits first at a fixed height and the header
   follows it on the page background.
   ========================================================================================= */

.c-hero-map {
  position: relative;
  display: flex;
  flex-direction: column;
}

.c-hero-map--plain {
  padding-top: var(--space-8);
}

.c-hero-map__inner {
  display: flex;
}

.c-hero-map__panel {
  min-width: 0;
  width: 100%;
}

.c-hero-map--map .c-hero-map__canvas {
  order: 1;
  height: clamp(18rem, 55vh, 26rem);
}

.c-hero-map--map .c-hero-map__inner {
  order: 2;
  padding-top: var(--space-5);
}

.c-hero-map__canvas > .c-map {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

.c-hero-map__canvas .c-map__canvas {
  flex: 1 1 0;
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
}

.c-hero-map__canvas .c-map__caption {
  padding: var(--space-2) var(--gutter);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.c-hero-map--map .c-entity-header,
.c-hero-map--map .c-public-hero {
  padding-bottom: 0;
}

.c-hero-map--map .c-public-hero__grid {
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  border: 0;
  background: transparent;
}

@media (min-width: 48.0625rem) {
  .c-hero-map--map {
    min-height: clamp(30rem, 70vh, 40rem);
  }

  .c-hero-map--map .c-hero-map__canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    height: auto;
  }

  .c-hero-map--map .c-hero-map__inner {
    position: static;
    padding-block: var(--space-6) calc(var(--space-6) + 3rem); /* clear of the key along the foot */
    pointer-events: none;
  }

  .c-hero-map--map .c-hero-map__panel {
    position: relative;
    z-index: 1;
    width: min(32rem, 100%);
    align-self: flex-start;
    pointer-events: auto;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(6px);
  }
}

/* The stat band of an entity header inside the hero panel (a supplier: 2 to 4 tiles). The panel is narrow, so the
   columns are explicit rather than auto-fit: auto-fit gave three 9.5rem columns at the panel's 32rem, which
   left a fourth tile alone on a second row beside tiles stretched to the tallest label. Two columns hold any
   count with equal tiles, an odd last tile spans the row, and the same hairline-per-tile dividers as the
   figure hero (.c-entity-header__stats) run the full length of every row. */
.c-hero-map__panel .c-entity-header > .c-stat-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.c-hero-map__panel .c-entity-header > .c-stat-row > .c-stat {
  box-shadow: 0 -1px 0 var(--color-border), -1px 0 0 var(--color-border);
}

.c-hero-map__panel .c-entity-header > .c-stat-row > a.c-stat:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-focus);
}

.c-hero-map__panel .c-entity-header > .c-stat-row > .c-stat:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* ---------- Platform picker (components/_platform_picker) ---------- */

/* Without script every client's panel shows, stacked, and the select is hidden because it would do
   nothing. The inline script in layouts/_public_copy sets data-enhanced and hides the others. */
.c-platform-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.c-platform-picker__control {
  display: none;
}

.c-platform-picker[data-enhanced] .c-platform-picker__control {
  display: block;
}

.c-platform-picker__panels {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.c-platform-picker__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.c-platform-picker__panel[hidden] {
  display: none;
}

/* Stacked (no script) the panels are told apart by a rule; with script only one shows. */
.c-platform-picker:not([data-enhanced]) .c-platform-picker__panel + .c-platform-picker__panel {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.c-platform-picker__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.c-platform-picker__summary,
.c-platform-picker__steps,
.c-platform-picker__requires {
  color: var(--color-text-muted);
}

.c-platform-picker__steps {
  margin: 0;
  padding-left: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow-wrap: anywhere;
}

.c-platform-picker__requires {
  font-size: var(--text-sm);
}

/* World map (components/world_map, #4552): server-drawn SVG choropleth for the PDF reports. Three
   sequential steps from the chart tokens; the land and outlines come from the surface tokens. */
.c-world-map {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  break-inside: avoid;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.c-world-map__svg {
  display: block;
  width: 100%;
  height: auto;
}

.c-world-map__land {
  fill: var(--color-surface);
  stroke: var(--color-border-strong);
  stroke-width: 0.4;
  stroke-linejoin: round;
}

.c-world-map__shade,
.c-world-map__swatch {
  stroke: var(--color-text-muted);
  stroke-width: 0.4;
  stroke-linejoin: round;
}

.c-world-map__marker {
  stroke-width: 0.8;
}

/* Only the top three steps of the ramp are used (#4588): each is at least 3:1 against the land fill in
   both themes (WCAG 1.4.11), where the lighter steps were 1.03:1 to 2.77:1 and read as no data. */
.c-world-map__shade--1 { fill: var(--chart-seq-4); background: var(--chart-seq-4); }
.c-world-map__shade--2 { fill: var(--chart-seq-5); background: var(--chart-seq-5); }
.c-world-map__shade--3 { fill: var(--chart-seq-6); background: var(--chart-seq-6); }

.c-world-map__key,
.c-world-map__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.c-world-map__key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.c-world-map__key li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.c-world-map__swatch {
  display: inline-block;
  width: 1rem;
  height: 0.75rem;
  border: 1px solid var(--color-text-muted);
}

.c-world-map__swatch--none {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.c-world-map__list {
  columns: 12rem;
  column-gap: var(--space-5);
}

.c-world-map__list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  break-inside: avoid;
}

.c-world-map__list b {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

.c-world-map__note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* =========================================================================================
   Themed image (components/_themed_image): a light and a dark rendering of one picture, one shown.
   Same three states as tokens.css: explicit light, explicit dark, and no choice with the OS dark. The
   `img.` prefix outranks a page's own `display: block` frame rule on the same element.
   ========================================================================================= */
img.c-themed-image {
  max-width: 100%;
  height: auto;
}

img.c-themed-image--dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img.c-themed-image--light {
    display: none;
  }

  :root:not([data-theme="light"]) img.c-themed-image--dark {
    display: block;
  }
}

:root[data-theme="dark"] img.c-themed-image--light {
  display: none;
}

:root[data-theme="dark"] img.c-themed-image--dark {
  display: block;
}