/* CMS article-specific styles. The bulk of the wiki layout (sidebar, hero,
   breadcrumb, nav links) lives in `wiki.css`; this file only carries the
   bits that wiki.css doesn't already provide. */

.cms-heading {
  scroll-margin-top: 96px; /* clears the sticky topnav on anchor jumps */
}

.cms-h2 { font-size: 1.25rem; font-weight: 600; }
.cms-h3 { font-size: 1.0625rem; font-weight: 600; }
.cms-h4 { font-size: 0.9375rem; font-weight: 600; }

.cms-callout {
  border-left-width: 4px;
}

.cms-callout-info { border-left-color: var(--varial-primary, #1B3AA0); }
.cms-callout-note { border-left-color: var(--varial-gray-500, #6c757d); }
.cms-callout-warning { border-left-color: var(--varial-warning, #f0ad4e); }
.cms-callout-tip { border-left-color: var(--varial-success, #28a745); }

.cms-figure {
  margin: 1.5rem 0;
}

.cms-figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

/* Inline forecast figure (ForecastChartBlock, replayed by figure-replay.js). */
.report-chart {
  border: 1px solid var(--varial-gray-200, #e6e3de);
  border-radius: var(--varial-radius, 6px);
  padding: 1rem 1.25rem 1.25rem;
  background: var(--varial-surface, #fff);
}

.report-chart-title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--varial-gray-700, #3f3b36);
}

.report-chart-plot {
  width: 100%;
  min-height: 340px;
}

.report-chart-plot.is-error::after {
  content: "Chart unavailable.";
  display: block;
  padding: 2rem 0;
  text-align: center;
  color: var(--varial-gray-500, #8a857d);
  font-size: 0.875rem;
}

.report-chart-caption {
  margin-top: 0.75rem;
  margin-bottom: 0;
}

/* The report tab wraps its content in .wiki-article-page (report.html), so the
   full-width header + separator, the left-aligned capped reading row, and the
   fill-the-column card all come from wiki.css and match the standalone wiki
   article exactly. Only the report-specific bits live here. */

/* In the Spot results "Report" tab, the sticky sub-nav (tab strip) sits above the
   article, so the on-this-page TOC needs a larger sticky offset than the standalone
   wiki article, and a scroll of its own when it is taller than the viewport. */
.results-report .wiki-sidebar.card {
  top: 5.5rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
}

/* Report tab head: a clear title + summary lede at the top of the article card
   (reuses the wiki article's minimal-title/-sub type), separated from the first
   section by a hairline so the title reads as the report headline, not a section. */
.results-report-head {
  margin-bottom: 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--varial-border, #E7E0CC);
}

.results-report-head .results-report-summary {
  margin: 0.4rem 0 0;
  font-size: 1rem;
  line-height: 1.6;
}

/* Report body prose sits a step below the standalone wiki article: the reading
   column is long and chart-dense, and at the wiki default (1.0625rem) the body
   matched the section subheadings (.cms-h3 TLDR/lever headings) instead of
   sitting under them. Drop it to 0.9375rem so the headings lead and the body
   (and the "What this is" callout, which inherits this size) reads as body.
   Scoped to .results-report-page so standalone /pages/wiki/ articles are
   unchanged. */
.results-report-page .wiki-article-card .card-body {
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* Disclaimer / preamble lifted out of the body into the TOC rail: a quiet
   collapsible (native <details>) under the on-this-page nav, matching the TOC's
   left-accent look rather than the full-width blue callout box in the article body.
   Collapsed by default so the long fine-print stays out of the way. */
.results-report-aside {
  margin-top: 1.75rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--varial-border);
}

.results-report-aside-summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  list-style: none;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--varial-gray-500);
  transition: color 0.15s ease;
}

.results-report-aside-summary::-webkit-details-marker {
  display: none;
}

/* Caret: a rotated square corner — points right when closed, down when open. */
.results-report-aside-summary::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.results-report-aside[open] .results-report-aside-summary::before {
  transform: rotate(45deg);
}

.results-report-aside-summary:hover {
  color: var(--varial-gray-900);
}

.results-report-aside-body {
  margin-top: 0.65rem;
}

/* Mobile-only copy of the disclaimer at the foot of the report (the TOC rail that
   holds the desktop copy is hidden < lg). Separated from the content above. */
.results-report-aside-mobile {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--varial-border, #E7E0CC);
}

.results-report-aside-mobile .results-report-aside {
  margin-top: 0;
}

.results-report-aside .cms-callout {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--varial-gray-500);
  font-size: 0.72rem;
  line-height: 1.55;
}

/* The <summary> is the label now, so hide the callout's own heading. */
.results-report-aside .cms-callout .alert-heading {
  display: none;
}

.results-report-aside .cms-callout-body p:last-child {
  margin-bottom: 0;
}

.cms-code {
  border-radius: var(--varial-radius-sm, 4px);
  padding: 1rem;
  background: var(--varial-gray-100, #f5f7fa);
  overflow-x: auto;
}

.cms-xref {
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--varial-primary-bg-light, rgba(27, 58, 160, 0.05));
  border-radius: var(--varial-radius-sm, 4px);
}

.cms-xref-heading {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--varial-primary, #1B3AA0);
}

.cms-internal-link {
  color: var(--varial-primary, #1B3AA0);
  text-decoration: underline;
}

.cms-marketing-hero-img {
  border-radius: var(--varial-radius, 6px);
}

.cms-legal {
  max-width: 800px;
}

.cms-marketing-body {
  max-width: 880px;
}

.wiki-paywall-teaser-copy {
  margin: 0.75rem 0 1.25rem;
  color: var(--varial-gray-600, #555);
  font-size: 1rem;
}

/* Expandable "detail" disclosures in the report body (a raw <details> carried
   in a rich_text block, class="report-detail"). Styled as a subtle info panel
   so a deeper-dive reads as optional, and clearly separated from the prose
   around it. */
.report-detail {
  margin: 1.75rem 0;
  border: 1px solid var(--varial-gray-200, #e6e3de);
  border-left: 3px solid var(--varial-primary, #1B3AA0);
  border-radius: var(--varial-radius, 6px);
  background: var(--varial-primary-bg-light, rgba(27, 58, 160, 0.05));
  padding: 0 1.25rem;
}

.report-detail > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 0;
  font-weight: 600;
  color: var(--varial-primary, #1B3AA0);
  list-style: none;
}

.report-detail > summary::-webkit-details-marker {
  display: none;
}

.report-detail > summary::before {
  content: "\203A"; /* chevron, rotates when open */
  display: inline-block;
  font-size: 1.15em;
  line-height: 1;
  transition: transform 0.15s ease;
}

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

.report-detail[open] > summary {
  margin-bottom: 0.25rem;
}

.report-detail > p {
  margin-bottom: 0.85rem;
}

.report-detail > p:last-child {
  margin-bottom: 1.1rem;
}

/* A touch more breathing room between the report's H3 sub-sections. */
.results-report-page .cms-h3 {
  margin-top: 1.75rem;
}

/* Lever summary matrix (raw <table class="report-lever-table"> in a rich_text block).
   Scenario columns are centred, the first column left-aligned, and the Central
   (anchor) column is tinted so the eye lands on the best-estimate case. */
.report-lever-table-wrap {
  margin: 1.25rem 0;
  overflow-x: auto;
}

.report-lever-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.78rem;
}

.report-lever-table th,
.report-lever-table td {
  padding: 0.4rem 0.4rem;
  border-bottom: 1px solid var(--varial-gray-200, #e6e3de);
  white-space: nowrap;
  text-align: center;
}

.report-lever-table thead th {
  font-weight: 600;
  vertical-align: bottom;
  border-bottom: 2px solid var(--varial-gray-300, #d4d0c9);
}

.report-lever-table th:first-child,
.report-lever-table td:first-child {
  text-align: left;
  font-weight: 500;
  white-space: normal;
  min-width: 7.5rem;
  padding-left: 0;
}

.report-lever-table th .pct {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--varial-gray-500, #8a857d);
}

/* Highlight the Central (P50) anchor column. */
.report-lever-table th:nth-child(4),
.report-lever-table td:nth-child(4) {
  background: var(--varial-primary-bg-light, rgba(27, 58, 160, 0.05));
  font-weight: 600;
}

.report-lever-table tbody tr:last-child td {
  border-bottom: none;
}

/* Edition-comparison matrix (raw <table class="report-compare-table"> in a
   rich_text block): first column is left-aligned labels, the numeric columns
   are right-aligned, and the 2026 (current-plan) column is tinted so the eye
   lands on the plan we're critiquing. */
.report-compare-table-wrap {
  margin: 1.25rem 0;
  overflow-x: auto;
}

.report-compare-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.8rem;
}

.report-compare-table th,
.report-compare-table td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--varial-gray-200, #e6e3de);
  text-align: right;
  white-space: nowrap;
}

.report-compare-table thead th {
  font-weight: 600;
  vertical-align: bottom;
  border-bottom: 2px solid var(--varial-gray-300, #d4d0c9);
}

.report-compare-table th:first-child,
.report-compare-table td:first-child {
  text-align: left;
  font-weight: 500;
  white-space: normal;
  min-width: 9rem;
  padding-left: 0;
}

/* Tint the 2026 (current-plan) column. */
.report-compare-table th:nth-child(3),
.report-compare-table td:nth-child(3) {
  background: var(--varial-primary-bg-light, rgba(27, 58, 160, 0.05));
}

.report-compare-table tbody tr:last-child td {
  border-bottom: none;
}

/* ---------------------------------------------------------------------------
   Share-report sales blocks (hero / headline stat / provenance + status caveat /
   steps / disclosure / CTA).

   These render inside `.wiki-content` on the share report tabs, which already
   load this stylesheet — which is why the rules live here rather than in a new
   file no share template is allowed to link. Colours come from the branding
   custom properties with literal fallbacks, matching the rest of this file; the
   muted grey is only used at >= 0.8125rem and clears 4.5:1 against both the
   white report card and the tinted headline panel.

   OWNERSHIP. The share block palette is split across two stylesheets and both
   load on every share report tab, `cms_article.css` first. This file owns the
   blocks named above — the web-only ones, which have no email counterpart to be
   a restyling of. `css/components/share-blocks.css` owns the blocks
   whose canonical form is an inline-styled email block — lead, subtext, stat
   grid, key/value table, divider. A selector must appear in exactly one of the
   two: equal specificity resolves *per property*, so a name claimed by both
   files renders as a blend of the two rule bodies that neither author wrote or
   reviewed. Keep the namespaces disjoint — `.share-headline*` here, the
   `.share-stat-*` tile family there.
   --------------------------------------------------------------------------- */

.share-hero {
  margin-bottom: 1.5rem;
}

.share-hero-eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--varial-primary, #1B3AA0);
}

.share-hero-title {
  margin: 0 0 0.75rem;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.share-hero-standfirst {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--varial-gray-700, #495057);
  max-width: 60ch;
}

.share-hero-standfirst p:last-child {
  margin-bottom: 0;
}

/* Headline figure — the one number the report is read for, on a tinted panel.
   A row, not a stack: the range sits beside the headline sharing its baseline,
   which is what `align-items: flex-end` is here for. Flex rather than a grid so
   the range wraps under the value on a narrow screen instead of shrinking it. */
.share-headline {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  align-items: flex-end;
  margin: 0 0 0.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--varial-primary-bg-light, rgba(27, 58, 160, 0.05));
  border-radius: var(--varial-radius, 6px);
}

/* The two columns of the row: the figure with its label, and the range with
   its own. `min-width: 0` is what lets a long total wrap inside its column
   instead of forcing the row wider than the panel — a flex item otherwise
   refuses to shrink below its min-content width, and these carry the longest
   strings on the page. */
.share-headline-primary,
.share-headline-range {
  min-width: 0;
}

.share-headline-label {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--varial-gray-700, #495057);
}

/* Sized to the legacy demo's `display-4` (3.5rem), which is the figure a
   prospect has already been shown — the interpolation is Bootstrap's own RFS
   curve, expressed as one clamp so a long total still fits a phone. */
.share-headline-value {
  margin: 0;
  font-size: clamp(2.25rem, 1.475rem + 2.7vw, 3.5rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--varial-primary, #1B3AA0);
  /* Figures are read against each other; the digits must not jitter. */
  font-variant-numeric: tabular-nums;
}

/* The supporting figure, deliberately about half the headline: two numbers at
   similar sizes read as a list of numbers rather than a claim and its spread.
   Legacy sets the same relationship with `display-4` against `h2`. */
.share-headline-range-value {
  margin: 0;
  font-size: clamp(1.375rem, 0.85rem + 1.5vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--varial-gray-700, #495057);
  font-variant-numeric: tabular-nums;
}

.share-headline-caption {
  margin: 0 0 1.5rem;
  font-size: 0.875rem;
  color: var(--varial-gray-700, #495057);
  max-width: 60ch;
}

/* A currency total with separators has no space to break at, so it must be
   allowed to break anywhere rather than push the panel past the card. */
.share-headline-value,
.share-headline-range-value {
  overflow-wrap: anywhere;
}

/* Status badge and the caveat behind it (part of the provenance block — see
   share_provenance.html for why it is not a block or a piece of chrome of its
   own). Colour comes from Bootstrap's subtle badge utilities on the same
   element, which follow the dark theme; everything here is the disclosure
   affordance. */
.share-status {
  margin: 0 0 0.75rem;
}

/* Rendered as a <summary> when a caveat sits behind it and a <span> when not,
   so the shape has to work as both. `inline-flex` also suppresses the default
   `list-item` marker on the summary; Safari needs the pseudo-element rule
   below as well. */
.share-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  list-style: none;
}

.share-status-badge::-webkit-details-marker {
  display: none;
}

/* Only the disclosure form is interactive. A badge with nothing behind it must
   not offer a pointer it cannot honour. */
.share-status-disclosure > .share-status-badge {
  cursor: pointer;
}

/* The affordance that says "there is more here", drawn from borders rather than
   a glyph so there is no generated text for a screen reader to read out — the
   element already announces its own expanded state. */
.share-status-disclosure > .share-status-badge::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transition: transform 0.15s ease-in-out;
}

.share-status-disclosure[open] > .share-status-badge::after {
  transform: translateY(1px) rotate(-135deg);
}

.share-status-badge:focus-visible {
  outline: 2px solid var(--varial-primary, #2563EB);
  outline-offset: 2px;
}

.share-status-caveat {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--varial-gray-700, #38352F);
  max-width: 70ch;
}

/* Provenance byline. The separator between items is a border, never a text
   character, so it is not announced by a screen reader. */
.share-provenance {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 1.5rem;
  font-size: 0.875rem;
  color: var(--varial-gray-700, #495057);
}

.share-provenance-item {
  padding: 0 0.75rem;
  border-left: 1px solid var(--varial-gray-300, #d4d0c9);
}

.share-provenance-item:first-child {
  padding-left: 0;
  border-left: none;
}

.share-provenance-item dt {
  display: inline;
  font-weight: 600;
}

.share-provenance-item dt::after {
  content: ": ";
}

.share-provenance-item dd {
  display: inline;
  margin: 0;
  font-weight: 400;
}

@media (max-width: 575.98px) {
  .share-provenance {
    display: block;
  }

  .share-provenance-item {
    padding: 0;
    border-left: none;
  }
}

/* "How to read this" steps. The <ol> keeps its native numbering — the sequence
   is content here, so the marker must not become a CSS counter a screen reader
   cannot reach. */
.share-steps {
  margin: 0 0 1.5rem;
}

.share-steps-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}

.share-steps-list {
  margin: 0;
  padding-left: 1.5rem;
}

.share-steps-item {
  margin-bottom: 0.85rem;
}

.share-steps-item:last-child {
  margin-bottom: 0;
}

.share-steps-item-heading {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.2rem;
}

.share-steps-item-body {
  margin: 0;
  color: var(--varial-gray-700, #495057);
  max-width: 60ch;
}

/* "The detail" — the methodology disclosure. A native <details> per section,
   skinned to read as the accordion the legacy demo uses, so a prospect who has
   seen both pages sees one component. Every state below is driven off `[open]`
   or `:focus-visible`; there is no JS, which is what lets the block be dropped
   into a report twice without minting ids (see share_disclosure.html). */
.share-disclosure {
  margin: 0 0 1.5rem;
}

.share-disclosure-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}

/* The stack is bordered and clipped as one unit so the sections read as a
   single control rather than as separate cards — and so the corner radius holds
   whichever section is open, without per-child corner rules. */
.share-disclosure-list {
  border: 1px solid var(--varial-border, #E7E0CC);
  border-radius: var(--varial-radius-lg, 0.5rem);
  overflow: hidden;
}

.share-disclosure-item + .share-disclosure-item {
  border-top: 1px solid var(--varial-border, #E7E0CC);
}

/* No background of its own when closed: these sit on the report card, which is
   white in light mode and the dark surface in dark mode, and inheriting it is
   what makes the component theme-correct without a second rule. */
.share-disclosure-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.125rem;
  cursor: pointer;
  list-style: none;
  color: var(--varial-gray-800, #211F1C);
}

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

.share-disclosure-summary:hover {
  background: var(--varial-gray-100, #F1F0ED);
}

.share-disclosure-summary:focus-visible {
  outline: 2px solid var(--varial-primary, #2563EB);
  outline-offset: -2px;
}

/* Open reads as selected, matching the legacy accordion's tinted header. Both
   tokens are re-pointed under `[data-bs-theme="dark"]` in branding.css, so this
   holds on the dark report card. */
.share-disclosure-item[open] > .share-disclosure-summary {
  background: var(--varial-primary-bg-light, #dbeafe);
  color: var(--varial-primary, #2563EB);
}

/* An <h3>, so it is in the heading outline; sized as a control, because it is
   also the disclosure's accessible name. */
.share-disclosure-heading {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Decorative and aria-hidden. Inherits the summary's colour so it picks up the
   open state with everything else. */
.share-disclosure-icon {
  margin-right: 0.5rem;
  color: inherit;
  opacity: 0.65;
}

/* Empty `content`, so the chevron is drawn rather than spoken — the element
   already announces whether it is expanded. `flex-shrink` keeps it square when
   a long heading takes the rest of the row. */
.share-disclosure-summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease-in-out;
}

.share-disclosure-item[open] > .share-disclosure-summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.share-disclosure-body {
  padding: 1rem 1.125rem 1.125rem;
  border-top: 1px solid var(--varial-border, #E7E0CC);
  color: var(--varial-gray-700, #38352F);
}

.share-disclosure-body > :last-child {
  margin-bottom: 0;
}

.share-disclosure-body p {
  max-width: 70ch;
}

@media (prefers-reduced-motion: reduce) {
  .share-disclosure-summary::after,
  .share-status-disclosure > .share-status-badge::after {
    transition: none;
  }
}

/* Call to action. */
.share-cta {
  margin: 1.5rem 0;
}

.share-cta-note {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--varial-gray-700, #495057);
  max-width: 60ch;
}