/* ==========================================================================
   PAGE · TREATMENT HUB — the factor page, grown from a bare leaderboard into a
   guide to one procedure abroad (FR-treatment-entry-points). It composes the
   built systems unchanged — s1 lens + crosslink, s2 leaderboard + coverage,
   the existing choropleth, op-offer, the references/glossary lists — and adds
   only the few things a guide-first page genuinely needs over them:

     1. A shared section head (kicker → title → intro), echoing the country
        profile's so the family reads as one.
     2. The editorial head: the honest "overview pending" state and the QUALITY
        LADDER — the published 1–5 rubric, banded, as "what good vs. poor looks
        like" before any country number.
     3. The per-score EVIDENCE disclosure wired into an s2 leaderboard row.
     4. Small depth furniture (clinic ISO tag, the terms run, the mapped figure).

   Tokens only, below 01-settings. Sorts after every 06-components file, so it
   wins over the components it extends.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · THE SHARED SECTION HEAD — kicker · title · intro
   -------------------------------------------------------------------------- */
.tr-section__head { margin-bottom: var(--space-md); }
.tr-section__title {
  font-family: var(--font-reading);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-2xs) 0 0;
}
.tr-section__intro {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
  max-width: var(--measure);
  margin: var(--space-sm) 0 0;
}
.tr-section__intro a { color: var(--text); }
.tr-section__intro a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   2 · THE EDITORIAL HEAD — the honest overview, then the quality ladder
   -------------------------------------------------------------------------- */

/* The "overview pending" state — a dignified gap, not a fabricated shelf.
   When authored prose lands (FR §5) it renders as .tr-prose in its place. */
.tr-overview__pending {
  border-left: 2px solid var(--rule);
  padding-left: var(--space-md);
  display: grid;
  gap: var(--space-sm);
  max-width: var(--measure-wide);
}
.tr-overview__lede {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0;
}
.tr-overview__lede strong { color: var(--text); font-weight: var(--weight-semibold); }
.tr-prose {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text);
  max-width: var(--measure);
}
.tr-prose p { margin: 0 0 var(--space-sm); }

/* THE QUALITY LADDER — the 1–5 rubric, banded high→low. Each rung carries the
   band's ink on its score chip and a keyline tick, so the reader sees the shape
   of "good" vs. "poor" before any country. Greyscale-safe: numeral + word +
   the keyline position, never colour alone. */
.tr-ladder__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
}
.tr-ladder__rung {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--bk-line, var(--rule));
  border-radius: var(--radius-sm);
}
.tr-ladder__mark {
  display: grid;
  gap: var(--space-3xs);
  justify-items: start;
}
.tr-ladder__score {
  font-family: var(--font-data);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  color: var(--bk-ink, var(--text));
}
.tr-ladder__max {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: var(--weight-regular);
}
.tr-ladder__label {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--bk-ink, var(--text-secondary));
}
.tr-ladder__text {
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin: 0;
  max-width: 72ch;
}

@media (max-width: 40rem) {
  .tr-ladder__rung { grid-template-columns: 1fr; gap: var(--space-2xs); }
  .tr-ladder__mark {
    grid-auto-flow: column;
    align-items: baseline;
    gap: var(--space-sm);
  }
}

/* --------------------------------------------------------------------------
   3 · THE PER-SCORE EVIDENCE — disclosure wired into the s2 leaderboard row
   -------------------------------------------------------------------------- */
/* The board row is a CSS grid (see p-rankings); the evidence disclosure spans
   the data columns, sitting under the justification like a quiet drawer. */
.op-tr-evidence {
  grid-column: 3 / -1;
  margin-top: var(--space-2xs);
  max-width: 72ch;
}
.op-tr-evidence__summary {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
}
.op-tr-evidence__summary::-webkit-details-marker { display: none; }
.op-tr-evidence__summary::before {
  content: "\25B8";          /* ▸ — rotates open */
  color: var(--accent);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.op-tr-evidence[open] .op-tr-evidence__summary::before { transform: rotate(90deg); }
.op-tr-evidence__summary:hover { color: var(--text); }
.op-tr-evidence__count {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: var(--tracking-normal);
}
.op-tr-evidence__list {
  margin: var(--space-2xs) 0 0;
  padding: 0 0 0 var(--space-md);
  display: grid;
  gap: var(--space-3xs);
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}
.op-tr-evidence__list li { list-style: square; }
.op-tr-evidence__more {
  margin: var(--space-2xs) 0 0;
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.op-tr-evidence__more a { color: var(--text-muted); }
.op-tr-evidence__more a:hover { color: var(--accent); }

@media (max-width: 40rem) {
  .op-tr-evidence { grid-column: 2 / -1; }
}

/* --------------------------------------------------------------------------
   4 · THE MAPPED JUDGEMENT + THE DEPTH FURNITURE
   -------------------------------------------------------------------------- */
/* The choropleth as a second reading — capped so it never dwarfs the board it
   echoes; the world-map-container already carries its own 16/9 aspect-ratio. */
.tr-map { margin-top: var(--space-xl); }
.tr-map .op-figure__plate { max-width: 64rem; margin-inline: auto; }

/* Depth blocks: clinics → sources → terms, each parted by a hairline rule. */
.tr-depth { display: grid; gap: var(--space-2xl); }
.tr-depth__block { display: grid; gap: 0; }
.tr-depth__block + .tr-depth__block {
  border-top: 1px solid var(--rule-faint);
  padding-top: var(--space-2xl);
}

/* The clinic-name country tag moved to the shared `.op-clinic__iso` object
   (06-components/_clinic-list.css) when the provider list was extracted into
   shared/_clinic_list.html.erb. */

/* The terms run was promoted to the shared weighted tag cloud — the
   `.op-term-cloud` object (06-components/_term-cloud.css), rendered by
   shared/_term_cloud.html.erb — when the flat list became a knowledge-base
   entry point sized by mention frequency. */