/* report-explain.css: chartanddatacheck Phase 1, lane S; redesigned in Phase 6, lane DS (PHASE6-BRIEF.md, Stephen's
   mockup of 2026-09-30, popup_mockups/). The ONE popup shell for Charts & Data explainers (PRD D-CD10), built by
   js/app/reports/reportExplainPopup.js on the house main popup (css/main_popup.css: .main-popup-backdrop,
   .main-popup, .main-popup-header, .main-popup-title, .main-popup-close, .main-popup-body).

   Colours are master-colour and --ui-* variables only, so the popup follows every theme. The mockup's hex map
   (PHASE6-BRIEF.md): #3386D0 = --color-blue-6, #246BAE = --ui-text-linkText, #1F7A57 = semantic-success-deep,
   #2F8F4E = semantic-success, #B91616 = semantic-danger, #E6F1FA = brand-light, the tinted greys = rgba(blue-6, a).

   The deep blue of the headline, the dollars chip and the totals (#16548C in the mockup) is --rx-deep below:
   brand-dark is a BACKGROUND shade in the dark themes (CLAUDE.md), so it is mixed, and with the link colour so the
   result keeps its blue. Measured 2026-09-30 (sRGB mix, WCAG ratio): default / blue-steel #1D568C, 7.61:1 on the
   card, 7.03:1 on the total band, 6.65:1 on brand-light; dark-mode / dark-mode-2 #80A8CF, 5.66 / 6.18:1 on the card,
   5.05 / 5.69:1 on the band, 5.81:1 on brand-light. brand-dark mixed with the primary text alone was 4.16:1 on the
   dark band. Other text pairs (light / dark-mode): secondary text 7.56 / 7.88, --rx-quiet (gray-500) 4.83 / 6.0,
   the positive tone semantic-success-deep 5.28 / 7.30 (plain semantic-success is 4.07:1 in light, under AA), the
   negative tone semantic-danger 6.58 / 5.12, 6.08 / 4.57 on the band. The meter's fill writes the card colour on the
   link colour (the house selected-pill pair, 5.54 / 5.50), never white on blue-6 (3.85:1). */

/* ---------- The card ---------- */

.main-popup.rx-dialog {
    /* Local tokens, all derived from the master colours. */
    --rx-deep: color-mix(in srgb, var(--ui-text-linkText) 60%, color-mix(in srgb, var(--color-brand-dark) 50%, var(--ui-text-primaryText)));
    --rx-quiet: var(--color-gray-500);
    --rx-line: var(--color-ui-card-divider);
    --rx-band: rgba(var(--color-blue-6-rgb), 0.065);
    --rx-band-light: rgba(var(--color-blue-6-rgb), 0.03);
    --rx-tint: rgba(var(--color-blue-6-rgb), 0.045);
    --rx-surface: rgba(var(--color-gray-500-rgb), 0.06);
    --rx-track: rgba(var(--color-gray-500-rgb), 0.16);
    --rx-working: rgba(var(--color-blue-6-rgb), 0.5);
    --rx-retired: var(--color-semantic-success);
    /* A NEUTRAL swatch for a dot, a stack segment or a strip bar ("other", loans, the part not yours): explainers
       name it `--rx-neutral`. gray-300 reads 1.47:1 against the card in light and 1.71:1 in dark, under the 3:1 a
       graphic needs (WCAG 1.4.11); this mix measures 3.93 / 5.08 / 5.54:1 on the card and 3.65 / 4.57 / 5.13:1 on
       the total band (default and blue-steel / dark-mode / dark-mode-2). */
    --rx-neutral: color-mix(in srgb, var(--color-gray-500) 70%, var(--color-gray-400));
    width: 600px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 40px);
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
    color: var(--ui-text-primaryText);
    /* The parts below lay out by the CARD's width (cards stack, the chain turns), not the window's. */
    container: rx-dialog / inline-size;
}

.rx-dialog,
.rx-dialog *,
.rx-dialog *::before,
.rx-dialog *::after {
    box-sizing: border-box;
}

/* The dialog takes focus so its title is announced; the ring belongs on the
   controls inside it, not around the whole card. */
.rx-dialog:focus {
    outline: none;
}

/* The house close button's gray-400 is 2.5:1 on white: the secondary text
   colour keeps it above the 3:1 a control needs. */
.rx-dialog .main-popup-close {
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    color: var(--ui-text-secondaryText);
    display: grid;
    place-items: center;
}

.rx-dialog .main-popup-close:hover {
    background: var(--ui-backgrounds-hoverBg);
    color: var(--ui-text-primaryText);
    transform: none;
}

.rx-dialog .main-popup-close:focus-visible,
.rx-link:focus-visible,
.rx-more-btn:focus-visible {
    outline: 2px solid var(--ui-borders-borderFocus);
    outline-offset: 2px;
}

/* ---------- Header: icon tile, title, chips; the answer top right ---------- */

.rx-dialog .rx-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon heading headline";
    align-items: start;
    column-gap: 12px;
    margin: 0;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--rx-line);
}

.rx-icon {
    grid-area: icon;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--color-brand-light);
    color: var(--color-blue-6);
}

.rx-heading {
    grid-area: heading;
    min-width: 0;
}

/* No headline: the title keeps clear of the close button. */
.rx-heading:last-child {
    padding-right: 36px;
}

.rx-dialog .rx-title {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.25;
    color: var(--ui-text-primaryText);
    overflow-wrap: anywhere;
}

/* The house title's animated underline is not part of this design, and its
   one-second fade-in read as a dim title (coordinator, 2026-09-30): here it
   arrives with the card. */
.rx-dialog .rx-title::after {
    content: none;
}

.rx-backdrop .rx-dialog .rx-title {
    transition: opacity 240ms ease-out 60ms, transform 240ms ease-out 60ms;
}

.rx-meta {
    margin-top: 8px;
}

.rx-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* 11.5px: Roboto sets wider than the mockup's face, and three chips should share one line beside the answer. */
.rx-chip {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--ui-backgrounds-hoverBg);
    color: var(--color-gray-700);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* The dollar basis: the tinted chip. */
.rx-chip.rx-chip-dollars {
    background: var(--color-brand-light);
    color: var(--rx-deep);
}

.rx-dialog .rx-subtitle {
    margin: 7px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ui-text-secondaryText);
    overflow-wrap: anywhere;
}

.rx-headline {
    grid-area: headline;
    min-width: 0;
    max-width: 240px;
    padding-right: 30px;
    text-align: right;
}

.rx-headline-label {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--rx-quiet);
}

.rx-dialog .rx-headline-value {
    margin-top: 2px;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.8px;
    color: var(--rx-tone, var(--rx-deep));
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------- Body: sections divided by hairlines, a footer below ---------- */

.rx-dialog .rx-body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ui-text-primaryText);
}

.rx-section {
    margin: 0;
    padding: 18px 24px;
    border-top: 1px solid var(--rx-line);
}

.rx-section:first-child {
    border-top: 0;
}

/* A section with no head (no title, no right figure) continues the one above
   it: a ledger under its month strip, a note, "Not in this plan" rows. */
.rx-section + .rx-section[data-rx-head="0"] {
    border-top: 0;
    padding-top: 0;
}

.rx-section-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
}

.rx-dialog .rx-section-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.1px;
    line-height: 1.35;
    color: var(--ui-text-primaryText);
}

.rx-section-right {
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.rx-label-text,
.rx-note,
.rx-callout-text,
.rx-text {
    overflow-wrap: anywhere;
}

/* A fact's label and a table's worded cells break BETWEEN words only: with
   "anywhere" their narrowest width is one letter, so a long value beside them
   squeezed "Jamie" to a letter a line. A single word too long for the row still
   breaks (break-word), and a table too wide for the card scrolls in its wrap. */
.rx-fact-label,
.rx-table .rx-left {
    overflow-wrap: break-word;
}

/* For a screen reader only (a strip bar's figure). */
.rx-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- The composition bar above a breakdown ---------- */

.rx-stack-wrap {
    margin-bottom: 10px;
}

.rx-stack {
    display: flex;
    gap: 2px;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
}

.rx-stack-seg {
    flex: 1 1 0;
    min-width: 3px;
    background: var(--rx-c, var(--rx-neutral));
}

.rx-stack-note {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--ui-text-secondaryText);
}

/* ---------- walk: the LEDGER (a table laid out as grid rows) ---------- */

.rx-walk-table,
.rx-walk-table > tbody,
.rx-walk-table > tfoot {
    display: block;
    width: 100%;
}

.rx-walk-table {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.rx-walk-table tr {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    column-gap: 10px;
    align-items: baseline;
    padding: 9px 12px 9px 0;
    border-bottom: 1px solid var(--rx-line);
}

.rx-walk-table.rx-has-share tr {
    grid-template-columns: 18px minmax(0, 1fr) auto auto;
}

.rx-walk-table th,
.rx-walk-table td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
    font-weight: 400;
}

.rx-dialog .rx-sign {
    color: var(--rx-quiet);
    font-weight: 600;
    text-align: center;
}

/* On a band the quiet grey falls under AA (gray-500 on the total band: 4.48:1 in light). */
.rx-dialog tfoot .rx-sign,
.rx-dialog .rx-walk-subtotal .rx-sign,
.rx-dialog .rx-compare-subtotal .rx-sign,
.rx-dialog .rx-compare-total .rx-sign {
    color: var(--ui-text-secondaryText);
}

.rx-label-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.rx-label-line .rx-label-text {
    min-width: 0;
}

.rx-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--rx-c, var(--rx-neutral));
}

.rx-note {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ui-text-secondaryText);
}

.rx-dialog .rx-walk-table .rx-share {
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
    color: var(--rx-quiet);
}

.rx-dialog .rx-walk-table .rx-value {
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

/* A row with sign '=': a light subtotal band. */
.rx-walk-table tr.rx-walk-subtotal {
    margin-top: 6px;
    border-bottom: 0;
    border-radius: 8px;
    background: var(--rx-band-light);
}

.rx-dialog .rx-walk-table tr.rx-walk-subtotal th,
.rx-dialog .rx-walk-table tr.rx-walk-subtotal .rx-value {
    font-weight: 700;
}

/* The result: a tinted band, not a heavy rule. */
.rx-walk-table tfoot tr {
    margin-top: 8px;
    padding: 10px 12px 10px 0;
    border-bottom: 0;
    border-radius: 9px;
    background: var(--rx-band);
}

.rx-dialog .rx-walk-table tfoot th {
    font-weight: 700;
}

.rx-dialog .rx-walk-table tfoot .rx-sign {
    font-weight: 700;
}

.rx-dialog .rx-walk-table tfoot .rx-value {
    font-size: 15px;
    font-weight: 800;
    color: var(--rx-tone, var(--rx-deep));
}

/* ---------- table: a small breakdown table ---------- */

.rx-table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.rx-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.rx-table th,
.rx-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--rx-line);
    text-align: right;
    white-space: nowrap;
    font-weight: 400;
}

.rx-table th:first-child,
.rx-table td:first-child {
    padding-left: 0;
}

.rx-table th:last-child,
.rx-table td:last-child {
    padding-right: 0;
}

.rx-table .rx-left {
    text-align: left;
    white-space: normal;
    /* A worded column keeps a readable width; the table scrolls before it collapses. */
    min-width: 6.5em;
}

.rx-table thead th {
    font-size: 12px;
    font-weight: 600;
    color: var(--ui-text-secondaryText);
    border-bottom: 1px solid var(--ui-borders-borderLight);
    vertical-align: bottom;
    /* A header wraps between its words ("Benchmark / premium"); a figure never wraps. */
    white-space: normal;
}

.rx-dialog .rx-table tbody .rx-value:not(.rx-left) {
    font-weight: 600;
}

/* The total row: the tinted band, its ends rounded. */
.rx-table tfoot th,
.rx-table tfoot td {
    font-weight: 700;
    border-bottom: 0;
    background: var(--rx-band);
}

.rx-table tfoot th:first-child,
.rx-table tfoot td:first-child {
    padding-left: 12px;
    border-radius: 9px 0 0 9px;
}

.rx-table tfoot th:last-child,
.rx-table tfoot td:last-child {
    padding-right: 12px;
    border-radius: 0 9px 9px 0;
}

/* ---------- compare: one table, a column per part of the year ---------- */

/* The table is the grid and every row a subgrid of it, so a column has ONE width across the rows (bands and
   all) while each row keeps its own background, radius and margin. */
.rx-compare {
    --rx-cols: 2;
    display: grid;
    /* The label keeps a floor: the value columns grow to 100px only from what the label leaves. */
    grid-template-columns: 18px minmax(7.5em, 1fr) repeat(var(--rx-cols), minmax(76px, 100px));
    column-gap: 10px;
    width: 100%;
    /* Narrower than this, the table scrolls inside its wrap instead of squeezing the labels: the sign, the
       right padding and the gaps (40px), a label of 7.5em, then 76px + a gap a column. */
    min-width: calc(40px + 7.5em + var(--rx-cols) * 86px);
    font-variant-numeric: tabular-nums;
}

.rx-compare > thead,
.rx-compare > tbody {
    display: contents;
}

.rx-compare tr {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: baseline;
    padding: 9px 12px 9px 0;
    border-bottom: 1px solid var(--rx-line);
}

.rx-compare th,
.rx-compare td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
    font-weight: 400;
}

.rx-compare thead tr {
    align-items: end;
    padding-top: 0;
    padding-bottom: 8px;
    border-bottom-color: var(--ui-borders-borderLight);
}

.rx-dialog .rx-compare .rx-compare-head {
    text-align: right;
}

.rx-pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--ui-backgrounds-hoverBg);
    color: var(--color-gray-700);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
}

.rx-pill.rx-pill-working {
    background: var(--color-brand-light);
    color: var(--rx-deep);
}

.rx-pill.rx-pill-retired {
    background: rgba(var(--color-semantic-success-rgb), 0.1);
    color: var(--color-semantic-success-deep);
}

.rx-dialog .rx-compare .rx-value {
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.rx-dialog .rx-compare .rx-value.rx-none {
    font-weight: 400;
    color: var(--ui-text-mutedText);
}

.rx-compare tr.rx-compare-subtotal,
.rx-compare tr.rx-compare-total {
    margin-top: 6px;
    border-bottom: 0;
    border-radius: 8px;
}

.rx-compare tr.rx-compare-subtotal {
    background: var(--rx-band-light);
}

.rx-compare tr.rx-compare-total {
    border-radius: 9px;
    background: var(--rx-band);
}

.rx-dialog .rx-compare-subtotal th,
.rx-dialog .rx-compare-total th {
    font-weight: 700;
}

.rx-dialog .rx-compare-subtotal .rx-value,
.rx-dialog .rx-compare-total .rx-value {
    font-weight: 800;
}

.rx-dialog .rx-compare-total .rx-value:not(.rx-none) {
    color: var(--rx-tone, var(--rx-deep));
}

/* An info line (`info: true`): a named part of the row above it, indented, muted and smaller, with no band. The
   row it belongs to gives up its rule, and the group's one rule sits under its last info line. */
.rx-compare tr:has(+ tr.rx-compare-info) {
    padding-bottom: 3px;
    border-bottom: 0;
}

.rx-compare tr.rx-compare-info {
    padding-top: 0;
    padding-bottom: 7px;
    border-bottom: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ui-text-secondaryText);
}

.rx-compare tr.rx-compare-info:not(:has(+ tr.rx-compare-info)) {
    border-bottom: 1px solid var(--rx-line);
}

.rx-compare tr.rx-compare-info th {
    padding-left: 12px;
}

.rx-dialog .rx-compare tr.rx-compare-info .rx-value {
    font-weight: 400;
}

/* ---------- facts: label / value pairs ---------- */

.rx-facts {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    column-gap: 28px;
}

.rx-fact {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--rx-line);
}

.rx-fact dt {
    margin: 0;
    font-size: 13.5px;
    color: var(--ui-text-secondaryText);
    /* Never squeezed below a readable width by the value beside it. */
    flex: 1 1 auto;
    min-width: min(7.5em, 45%);
}

.rx-fact dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* A worded value (not a figure) wraps inside its share of the row, between
   words only: its flex minimum stays its longest word (min-width: auto), so a
   long label beside it can never break "none" into "non / e" (lane DSS,
   2026-09-30). The label gives way instead, down to its own floor. */
.rx-fact dd.rx-fact-text {
    flex: 0 1 auto;
    min-width: auto;
    max-width: 62%;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

/* A long worded value takes the whole row of the two-column fact grid. */
.rx-fact.rx-fact-wide {
    grid-column: 1 / -1;
}

/* ---------- stats, cards, phases: two-up cards ---------- */

.rx-stats,
.rx-cards,
.rx-phases {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.rx-stat {
    padding: 12px 14px;
    border-radius: 11px;
    background: var(--rx-tint);
}

.rx-stat-label,
.rx-card-label {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ui-text-secondaryText);
}

.rx-dialog .rx-stat-value,
.rx-dialog .rx-card-value {
    margin-top: 3px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.rx-stat-caption,
.rx-card-caption {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--ui-text-secondaryText);
    font-variant-numeric: tabular-nums;
}

.rx-card {
    padding: 12px 14px;
    border: 1px solid var(--ui-borders-borderLight);
    border-radius: 11px;
}

.rx-card-bar {
    height: 5px;
    margin-top: 9px;
    border-radius: 3px;
    background: var(--rx-track);
    overflow: hidden;
}

.rx-card-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--color-blue-6);
}

.rx-card-bar + .rx-card-caption {
    margin-top: 6px;
}

/* ---------- chain: how a figure was built ---------- */

.rx-chain {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
}

.rx-chain-step {
    flex: 1 1 0;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--ui-borders-borderLight);
    border-radius: 11px;
}

.rx-chain-step.rx-chain-emphasis {
    border-color: rgba(var(--color-blue-6-rgb), 0.45);
    background: var(--rx-tint);
}

.rx-dialog .rx-chain-value {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1.25;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rx-dialog .rx-chain-emphasis .rx-chain-value {
    color: var(--rx-tone, var(--rx-deep));
}

.rx-chain-label {
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
}

.rx-chain-caption {
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--ui-text-secondaryText);
}

/* Across: the factor over the arrow, its caption under it. */
.rx-chain-link {
    flex: 0 0 68px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 3px;
    text-align: center;
}

.rx-chain-link-words {
    display: contents;
}

.rx-chain-factor {
    order: 1;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--rx-deep);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rx-chain-arrow {
    order: 2;
    display: inline-flex;
    line-height: 0;
    color: rgba(var(--color-blue-6-rgb), 0.6);
}

.rx-chain-link-caption {
    order: 3;
    font-size: 10.5px;
    line-height: 1.3;
    color: var(--ui-text-secondaryText);
}

.rx-chain-arrow-down {
    display: none;
}

.rx-dialog .rx-chain-note {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ui-text-secondaryText);
    font-variant-numeric: tabular-nums;
}

/* ---------- meter: one share bar ---------- */

.rx-meter-top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
}

.rx-meter-side {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
}

.rx-meter-right {
    margin-left: auto;
}

.rx-meter-label {
    font-size: 13px;
    color: var(--ui-text-secondaryText);
}

.rx-dialog .rx-meter-figure {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rx-dialog .rx-meter-right .rx-meter-figure {
    color: var(--rx-tone, var(--rx-deep));
}

.rx-meter-bar {
    display: flex;
    height: 26px;
    margin-top: 10px;
    border-radius: 7px;
    overflow: hidden;
    background: var(--color-brand-light);
}

/* A segment's words are measured after layout (settleMeters): any that would overflow move to the line under the
   bar, so nothing is ever clipped. `safe center` keeps an overflow on the measured (right) side. */
.rx-meter-fill {
    display: flex;
    align-items: center;
    background: var(--ui-text-linkText);
    color: var(--ui-backgrounds-cardBg);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
}

.rx-meter-fill:not(:empty) {
    padding-left: 10px;
}

.rx-meter-rest {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: safe center;
    padding: 0 6px;
    color: var(--rx-deep);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
}

.rx-meter-text {
    white-space: nowrap;
}

/* The line under the bar: the fill's words left, the rest's words right; absent while empty. */
.rx-meter-keys {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
}

.rx-meter-keys:empty {
    display: none;
}

.rx-meter-keys .rx-meter-text {
    white-space: normal;
    overflow-wrap: break-word;
}

.rx-meter-keys .rx-meter-text-fill {
    order: 0;
    color: var(--ui-text-linkText);
}

.rx-meter-keys .rx-meter-text-rest {
    order: 1;
    margin-left: auto;
    text-align: right;
    color: var(--rx-deep);
}

.rx-meter-scale {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--rx-quiet);
}

/* A placed scale ({ text, at }): each label under its tick, where its value sits on the track; one near an end
   reads from that end so it stays inside the card. */
.rx-meter-scale.rx-meter-scale-placed {
    position: relative;
    display: block;
    height: 23px;
    margin-top: 0;
}

.rx-meter-mark {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
    transform: translateX(-50%);
}

.rx-meter-mark.rx-at-start {
    align-items: flex-start;
    transform: none;
}

.rx-meter-mark.rx-at-end {
    align-items: flex-end;
    transform: translateX(-100%);
}

.rx-meter-tick {
    width: 1px;
    height: 5px;
    background: var(--rx-quiet);
}

/* A middle label that would overlap its neighbour keeps only its tick (the shell measures after layout). */
.rx-meter-mark.rx-meter-mark-quiet .rx-meter-mark-text {
    visibility: hidden;
}

/* ---------- phases: the year in two parts ---------- */

.rx-phase-working {
    --rx-phase: var(--rx-working);
}

.rx-phase-retired {
    --rx-phase: var(--rx-retired);
}

.rx-phase-default {
    --rx-phase: var(--rx-neutral);
}

.rx-phases-bar {
    position: relative;
    display: flex;
    gap: 3px;
    height: 10px;
}

.rx-phases-seg {
    flex: 1 1 0;
    min-width: 3px;
    background: var(--rx-phase);
}

.rx-phases-seg:first-child {
    border-radius: 5px 0 0 5px;
}

.rx-phases-seg:last-of-type {
    border-radius: 0 5px 5px 0;
}

.rx-phases-seg:only-of-type {
    border-radius: 5px;
}

.rx-phases-tick {
    position: absolute;
    top: -5px;
    width: 2px;
    height: 20px;
    border-radius: 1px;
    background: var(--ui-text-primaryText);
    transform: translateX(-1px);
}

.rx-phases-marker {
    position: relative;
    height: 17px;
    margin-top: 6px;
}

.rx-phases-marker-label {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.rx-phases-marker-label.rx-at-start {
    transform: translateX(-2px);
}

.rx-phases-marker-label.rx-at-end {
    transform: translateX(calc(-100% + 2px));
}

.rx-phases-marker + .rx-phases {
    margin-top: 8px;
}

.rx-phases-bar + .rx-phases {
    margin-top: 14px;
}

.rx-phase {
    padding: 10px 12px;
    border: 1px solid var(--ui-borders-borderLight);
    border-left: 3px solid var(--rx-phase);
    border-radius: 10px;
}

.rx-phase-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.rx-phase-label {
    font-size: 13.5px;
    font-weight: 700;
}

.rx-phase-months {
    margin-left: auto;
    font-size: 12px;
    color: var(--ui-text-secondaryText);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rx-phase-range {
    margin-top: 2px;
    font-size: 12px;
    color: var(--ui-text-secondaryText);
    font-variant-numeric: tabular-nums;
}

.rx-phase-note {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ui-text-secondaryText);
}

/* ---------- events: the small timeline ---------- */

.rx-events {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rx-event {
    display: grid;
    grid-template-columns: 74px 16px minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;
}

.rx-event-when {
    padding-top: 1px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rx-deep);
    font-variant-numeric: tabular-nums;
}

.rx-event-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}

.rx-event-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-top: 4px;
    border-radius: 50%;
    border: 2px solid var(--rx-event, var(--color-blue-6));
    background: var(--color-white-1);
}

/* 'retired' green; 'warn' the danger dot (money ran out, not funded, an unpaid bill); default blue. */
.rx-event-pos { --rx-event: var(--color-semantic-success); }
.rx-event-neg { --rx-event: var(--color-semantic-danger); }

.rx-event-line {
    flex: 1 1 auto;
    width: 2px;
    margin-top: 2px;
    background: var(--ui-borders-borderLight);
}

.rx-event:last-child .rx-event-line {
    background: transparent;
}

.rx-event-text {
    padding-bottom: 14px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--color-gray-700);
    overflow-wrap: anywhere;
}

.rx-event:last-child .rx-event-text {
    padding-bottom: 0;
}

/* ---------- strip: a bar a month ---------- */

.rx-strip {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 3px;
}

.rx-strip-month {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.rx-strip-mark {
    height: 16px;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--color-semantic-success-deep);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rx-strip-box {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 34px;
}

/* A month's own colour name (--rx-c) wins; else the light tint, or blue-6 after the change. */
.rx-strip-bar {
    width: 100%;
    border-radius: 5px;
    background: var(--rx-c, var(--rx-working));
}

.rx-strip-after .rx-strip-bar {
    background: var(--rx-c, var(--color-blue-6));
}

.rx-strip-month.rx-strip-zero .rx-strip-bar {
    background: var(--rx-track);
}

/* A strip drawn above a section's rows (a section-level `strip`). */
.rx-section > .rx-strip:not(:last-child) {
    margin-bottom: 6px;
}

.rx-strip-label {
    font-size: 10.5px;
    color: var(--rx-quiet);
    white-space: nowrap;
}

/* ---------- callout ---------- */

.rx-callout {
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    border-left-width: 3px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ui-text-primaryText);
}

.rx-callout-info {
    background: var(--rx-tint);
    border-color: rgba(var(--color-blue-6-rgb), 0.16);
    border-left-color: var(--ui-text-linkText);
}

.rx-callout-warn {
    background: var(--color-semantic-warning-light);
    border-color: rgba(var(--color-semantic-warning-rgb), 0.3);
    border-left-color: var(--color-semantic-warning);
}

.rx-callout-title {
    display: block;
    margin-bottom: 2px;
    font-weight: 700;
}

/* ---------- notInPlan (D-CD15) ---------- */

.rx-notinplan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 10px 8px 12px;
    border: 1px dashed var(--ui-borders-borderDefault);
    border-radius: 10px;
    font-size: 13.5px;
    color: var(--ui-text-secondaryText);
}

.rx-notinplan-tag {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--ui-backgrounds-hoverBg);
    color: var(--color-gray-700);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- text ---------- */

.rx-dialog .rx-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--color-gray-700);
}

/* ---------- more: the "How this works" disclosure ---------- */

.rx-more {
    margin-top: 12px;
}

.rx-more-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--ui-text-linkText);
    cursor: pointer;
}

.rx-more-btn:hover {
    color: var(--rx-deep);
}

.rx-more-q {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(var(--color-blue-6-rgb), 0.35);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
}

.rx-more-chev {
    display: inline-flex;
    transition: transform 200ms ease;
}

.rx-more-btn[aria-expanded="true"] .rx-more-chev {
    transform: rotate(180deg);
}

/* Closed: no height and hidden from assistive tech; the hiding waits for the
   close to finish so the panel folds away instead of vanishing. */
.rx-more-panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 300ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 300ms;
}

.rx-more-panel.is-open {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 300ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}

.rx-more-inner {
    min-height: 0;
    overflow: hidden;
}

.rx-more-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--rx-tint);
}

.rx-dialog .rx-more-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ui-text-secondaryText);
    overflow-wrap: anywhere;
}

/* ---------- Footer: short definitions, pill links ---------- */

.rx-footer {
    padding: 14px 24px 18px;
    border-top: 1px solid var(--rx-line);
    background: var(--rx-surface);
}

.rx-notes {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ui-text-secondaryText);
}

.rx-notes li + li {
    margin-top: 3px;
}

.rx-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.rx-footer > .rx-links:first-child {
    margin-top: 0;
}

.rx-link {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--color-ui-card-border-hover);
    border-radius: 999px;
    background: var(--color-white-1);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ui-text-linkText);
    text-align: left;
    cursor: pointer;
    text-decoration: none;
}

.rx-link:hover {
    border-color: var(--color-blue-6);
    color: var(--rx-deep);
}

.rx-link-arrow {
    display: inline-flex;
    flex: 0 0 auto;
}

/* ---------- Tones (last; a part drawn deep blue by default reads
   var(--rx-tone, var(--rx-deep)), so a tone wins whatever the part's
   specificity) ---------- */

.rx-dialog .rx-neg {
    --rx-tone: var(--color-semantic-danger);
    color: var(--rx-tone);
}

.rx-dialog .rx-pos {
    --rx-tone: var(--color-semantic-success-deep);
    color: var(--rx-tone);
}

.rx-dialog .rx-muted,
.rx-dialog .rx-muted .rx-label-text {
    --rx-tone: var(--ui-text-secondaryText);
    color: var(--rx-tone);
}

/* ---------- A narrow card: one column, the chain turns down ---------- */

@container rx-dialog (max-width: 520px) {
    .rx-dialog .rx-header {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "icon heading" ". headline";
        row-gap: 10px;
        column-gap: 12px;
    }

    .rx-heading {
        padding-right: 36px;
    }

    .rx-headline {
        max-width: none;
        padding-right: 0;
        text-align: left;
    }

    .rx-chip {
        white-space: normal;
    }

    .rx-stats,
    .rx-cards,
    .rx-phases {
        grid-template-columns: minmax(0, 1fr);
    }

    /* A value column as wide as its widest cell (the subgrid lines them up), so the label gets the rest. */
    .rx-compare {
        grid-template-columns: 18px minmax(7.5em, 1fr) repeat(var(--rx-cols), minmax(56px, max-content));
        column-gap: 8px;
        min-width: calc(34px + 7.5em + var(--rx-cols) * 72px);
    }

    /* A row's note runs the full row width under its label, not a few words a line in the label column (lane DY,
       2026-09-30): from the label column to the row's end = the card less the section's 16px sides, the 18px
       sign, the 8px gap and the row's 12px right padding. The figures sit on the label's first line, above it. */
    .rx-compare tbody tr:not(.rx-compare-info) .rx-note {
        width: calc(100cqw - 70px);
    }

    /* An info line's sentence takes the whole row; its figures drop to the line under it, in their own columns
       (each value cell names its column). */
    .rx-compare tr.rx-compare-info > th {
        grid-column: 2 / -1;
    }

    .rx-compare tr.rx-compare-info > td.rx-value {
        grid-row: 2;
    }

    .rx-chain {
        flex-direction: column;
    }

    .rx-chain-link {
        flex: 0 0 auto;
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        padding: 6px 0 6px 18px;
        text-align: left;
    }

    .rx-chain-link-words {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .rx-chain-factor,
    .rx-chain-link-caption {
        order: 0;
    }

    .rx-chain-arrow-across {
        display: none;
    }

    .rx-chain-arrow-down {
        display: inline-flex;
        order: 0;
    }

    .rx-chain-value {
        white-space: normal;
    }

    .rx-event {
        grid-template-columns: 62px 16px minmax(0, 1fr);
        column-gap: 8px;
    }
}

/* ---------- Phone width: 16px gutters, no horizontal page scroll ---------- */

@media (max-width: 600px) {
    .main-popup.rx-dialog {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        border-radius: 16px;
    }

    .rx-dialog .rx-header {
        padding: 16px 16px 14px;
    }

    .rx-dialog .main-popup-close {
        top: 12px;
        right: 10px;
    }

    .rx-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .rx-dialog .rx-title {
        font-size: 17px;
    }

    .rx-dialog .rx-headline-value {
        font-size: 23px;
    }

    .rx-section {
        padding: 16px;
    }

    .rx-footer {
        padding: 14px 16px 16px;
    }

    /* Tighter table cells at phone width, so more columns fit before the wrap scrolls. */
    .rx-table th,
    .rx-table td {
        padding-left: 6px;
        padding-right: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rx-backdrop,
    .rx-backdrop .main-popup,
    .rx-backdrop .main-popup-title,
    .rx-backdrop .main-popup-title::after,
    .rx-more-panel,
    .rx-more-panel.is-open,
    .rx-more-chev {
        transition: none !important;
    }
}