/* ==========================================================================
   PAGE · SPECIALTY HUB (p-categories/#show) — the composition this page adds on
   top of the systems it reuses (s1 lens · s2 leaderboard/coverage/bar · s3
   collect/tray · the op-figure map · op-offer · crosslink). It reads as one
   family with /rankings/:id one zoom-level out, so the leaderboard, lens, map
   and offer are composed unchanged; only the specialty-specific FURNITURE lives
   here — the orientation brief, the legality lead, the spread, the factor
   register, and the per-country subcategory shape inside a ranked row.

   Tokens only, below 01-settings; sorts after every 06-components file, so a
   page rule always out-cascades the component it extends.
   ========================================================================== */


/* --------------------------------------------------------------------------
   THE LEGALITY LEAD — for the two law-gated specialties (reproductive, end-of-
   life) the real question is "is this even legal for someone like me", so this
   headlines the page ahead of any score. A calm ink-keylined callout, NOT the
   rubric tick — candor, not alarm.
   -------------------------------------------------------------------------- */
.op-sp-legal {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--ink);
  border-radius: var(--radius-sm);
  display: grid;
  gap: var(--space-xs);
}
.op-sp-legal__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(--text);
}
.op-sp-legal__text {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text);
  max-width: var(--measure-wide);
}
.op-sp-legal__fine {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  max-width: var(--measure-wide);
}
.op-sp-legal__fine a { color: var(--text-secondary); }
.op-sp-legal__fine a:hover { color: var(--accent); }


/* --------------------------------------------------------------------------
   THE ORIENTATION BRIEF — what the specialty covers and why people cross borders
   for it, before any number. The plain-language brief beside a short "what it
   covers" register, so a need-driven arrival lands oriented.
   -------------------------------------------------------------------------- */
.op-sp-orient {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
  gap: var(--space-xl);
  align-items: start;
  padding: var(--space-lg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.op-sp-orient__lede {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text);
  max-width: 62ch;
}
.op-sp-orient__covers {
  display: grid;
  gap: var(--space-2xs);
  align-content: start;
  padding: var(--space-md);
  background: var(--surface-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xs);
}
.op-sp-orient__covers-label {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.op-sp-orient__covers-line {
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text);
  line-height: var(--leading-snug);
}
.op-sp-orient__covers-note {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}
.op-sp-orient__covers-note a { color: var(--text-secondary); }
.op-sp-orient__covers-note a:hover { color: var(--accent); }

@media (max-width: 56.25rem) {
  .op-sp-orient { grid-template-columns: 1fr; gap: var(--space-md); padding: var(--space-md); }
}


/* --------------------------------------------------------------------------
   WHERE THE CHOICE TURNS — the spread. The factors where assessed countries sit
   furthest apart: a min→max range track per factor, so the reader sees at a
   glance where a specialty average hides the decision. Each row is a doorway to
   that factor's own worldwide leaderboard. The range track is non-hue length;
   the lo/hi readouts carry band ink, never colour alone.
   -------------------------------------------------------------------------- */
.op-sp-turn__list {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  border-top: 2px solid var(--rule-strong);
}
.op-sp-turn__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 16rem) minmax(0, 11rem);
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-sm) var(--space-2xs);
  border-bottom: 1px solid var(--rule);
}
.op-sp-turn__factor { display: grid; gap: 0.15em; min-width: 0; }
.op-sp-turn__link {
  font-family: var(--font-reading);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-decoration: none;
}
.op-sp-turn__link:hover { color: var(--accent); }
.op-sp-turn__sub {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The range: low ──segment── high, the assessed field's reach on this factor. */
.op-sp-turn__range {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2xs);
}
.op-sp-turn__lo,
.op-sp-turn__hi {
  font-family: var(--font-data);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: var(--weight-semibold);
}
.op-sp-turn__lo[data-band="good"], .op-sp-turn__hi[data-band="good"]         { color: var(--band-good-ink); }
.op-sp-turn__lo[data-band="moderate"], .op-sp-turn__hi[data-band="moderate"] { color: var(--band-moderate-ink); }
.op-sp-turn__lo[data-band="poor"], .op-sp-turn__hi[data-band="poor"]         { color: var(--band-poor-ink); }
.op-sp-turn__lo[data-band="none"], .op-sp-turn__hi[data-band="none"]         { color: var(--band-none-ink); }
.op-sp-turn__track {
  position: relative;
  block-size: 0.3rem;
  background: var(--surface-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xs);
  overflow: hidden;
}
.op-sp-turn__seg {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--lo, 0) * 100%);
  inline-size: calc((var(--hi, 0) - var(--lo, 0)) * 100%);
  background: var(--text-secondary);
}
.op-sp-turn__meta {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  text-align: right;
  justify-self: end;
}
.op-sp-turn__meta b {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}

@media (max-width: 46rem) {
  .op-sp-turn__row { grid-template-columns: 1fr; gap: var(--space-2xs); align-items: stretch; }
  .op-sp-turn__meta { text-align: left; justify-self: start; }
}


/* --------------------------------------------------------------------------
   THE COUNTRY'S SHAPE — the per-subcategory rollup opened inside a ranked row's
   disclosure: the same s2 bar + coverage idiom one grain finer, explaining the
   rank without leaving the board.
   -------------------------------------------------------------------------- */
.op-sp-shape {
  list-style: none;
  margin: var(--space-2xs) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3xs);
}
.op-sp-shape__row {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) minmax(4rem, 9rem) 2.6rem 3rem;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--space-3xs);
}
.op-sp-shape__name {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  color: var(--text-secondary);
}
.op-sp-shape__bar { display: block; }
.op-sp-shape__bar > .op-bar { display: block; inline-size: 100%; }
.op-sp-shape__score {
  font-family: var(--font-data);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
  color: var(--text);
}
.op-sp-shape__cov {
  font-family: var(--font-data);
  font-size: var(--text-3xs);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
  color: var(--text-muted);
}

@media (max-width: 40rem) {
  .op-sp-shape__row { grid-template-columns: minmax(0, 1fr) 2.6rem 3rem; }
  .op-sp-shape__bar { display: none; }
}