/*
 * components.css — the Rāśi Tantra component library for the web (AB#1362).
 *
 * HAND-AUTHORED, and not drift-checked: this is web CSS, not a copy of the design system. Loads
 * after tokens.css and base.css, both of which it depends on.
 *
 * SCOPE. One block per entry in the component-guide inventory (docs/Technical/ui-ux-component-guide.md
 * §1) — the original nineteen plus the Oct-2026 additions (AB#2024–AB#2027: SignCard, ReadingCard,
 * MahadasaBand, LifeTimeline, SectionRail, QuickLink, ProgressMeter, the .rt-avatar utility). Nothing
 * here is invented. A pattern the inventory does not answer is a STOP-and-flag, not a new class — see
 * .claude/skills/rashitantra-ui/SKILL.md hard rule 3. Live examples of every one of them:
 * /dev/components (Development only).
 *
 * OFF-SCALE LITERALS, deliberately few (ui-ux ruling for AB#2024–AB#2026). The README names the
 * SignCard's anatomy in pixels — scrim padding 56/15px, 1.4px eyebrow tracking, 26px name, 20px name
 * glyph, 72px fallback glyph — so those are written as named (and the blur-up's 8px blur / 1.1× overscan,
 * AB#2040, is an effect radius, not a size); the canvas's other off-scale sizes
 * (ReadingCard 16.5/13.5px, timeline 17/15px, 14px radii) SNAP to --fs-* and --r-* instead. Fixed
 * geometry (230px card, 26px band, 150px chart, 2px rails) is a size, not a token question.
 *
 * TWO DIVERGENCES FROM THE PROSE, recorded once here rather than repeated per rule.
 * The vendored prose asks for a 12px button radius and an 18px hero radius; the token scale is
 * --r-sm 10 / --r-md 16 / --r-lg 20 / --r-pill, and neither 12 nor 18 is in it. The specimens do not
 * agree with the prose either — guidelines/spacing-radius.html captions the hero "18" while
 * guidelines/colors-hero.html actually draws it at 16. tokens/*.css is authoritative over prose, and
 * tokens.css is drift-checked against the design system, so a local --r-btn/--r-hero could not be
 * added without either failing that check or smuggling in an un-vendored token. Both values are
 * therefore SNAPPED to the scale: buttons and inputs --r-sm, hero and dialog --r-lg. Same reasoning
 * for the prose's 15px button label, which snaps to --fs-body at 600.
 * The exception is the 0.8px hairline, which is written literally: it is a fixed, un-themed
 * sub-pixel rendering effect that the design system's own specimens write literally, and rounding it
 * to 1px is a visible change. Its COLOUR is always a token.
 *
 * A follow-up is owed upstream (Claude Design kit): --r-btn, --r-hero, --fs-button and a hairline
 * width token do not exist, and the premium badge pair (#c9744a on #f4e2d6, ~2.7:1) is under WCAG AA
 * for normal text. The pairs are used AS SPECIFIED here — they are the contract — held at 600 weight
 * and never as the sole carrier of meaning.
 */

/* ==================================================================================================
   Button — primary (deep teal) · accent (clay) · ghost (hairline) · danger; size sm; disabled
   ================================================================================================== */

.rt-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--hit-target);
    padding: var(--sp-2) var(--sp-5);
    border: 0.8px solid transparent;
    border-radius: var(--r-sm);
    background-color: var(--rt-primary);
    color: var(--rt-on-primary);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: var(--lh-body);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: filter var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}

.rt-button:hover {
    filter: brightness(1.08);
    color: var(--rt-on-primary);
    text-decoration: none;
}

.rt-button:active {
    filter: brightness(0.96);
}

.rt-button:disabled,
.rt-button.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: none;
}

.rt-button--accent {
    background-color: var(--rt-accent);
    color: var(--rt-on-accent);
}

.rt-button--accent:hover {
    color: var(--rt-on-accent);
}

.rt-button--ghost {
    background-color: transparent;
    border-color: var(--border-default);
    color: var(--text-heading);
}

.rt-button--ghost:hover {
    background-color: var(--surface-sunken);
    color: var(--text-heading);
    filter: none;
}

.rt-button--danger {
    background-color: var(--rt-bad);
    color: var(--rt-on-accent);
}

.rt-button--danger:hover {
    color: var(--rt-on-accent);
}

/* 36px is the documented floor for small buttons; below that the target stops being reachable. */
.rt-button--sm {
    min-height: 36px;
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-meta);
}

.rt-button--block {
    width: 100%;
}

/* ==================================================================================================
   Chip — filter pills with counts; active state; hero variant; optional icon
   ================================================================================================== */

.rt-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--hit-target);
    padding: var(--sp-2) var(--sp-4);
    border: 0.8px solid var(--border-default);
    border-radius: var(--r-pill);
    background-color: var(--surface-card);
    color: var(--text-body);
    font-size: var(--fs-sub);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}

.rt-chip:hover {
    background-color: var(--surface-sunken);
    color: var(--text-body);
    text-decoration: none;
}

.rt-chip__count {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.rt-chip.is-active {
    background-color: var(--rt-primary);
    border-color: var(--rt-primary);
    color: var(--rt-on-primary);
}

.rt-chip.is-active .rt-chip__count {
    color: var(--rt-on-primary);
}

/* On the hero card, where the ground is dark teal in both themes. */
.rt-chip--hero {
    background-color: var(--rt-hero-chip);
    border-color: var(--rt-hero-line);
    color: var(--rt-hero-text);
}

.rt-chip--hero:hover {
    background-color: var(--rt-hero-chip);
    color: var(--rt-hero-title);
}

/* The selected filter keeps the primary fill when hovered, and its icon follows the ink. */
.rt-chip.is-active:hover {
    background-color: var(--rt-primary);
    border-color: var(--rt-primary);
    color: var(--rt-on-primary);
}

.rt-chip.is-active .bi {
    color: inherit;
}

/* A row of chips scrolls rather than wrapping, with the scrollbar hidden — the design system's
   horizontal pill-row pattern. The scroller would clip the chips' 3px focus ring, so it carries a
   --sp-2 / --sp-1 inset that its negative margin cancels: the row sits exactly where it did (AB#2027). */
.rt-chip-row {
    display: flex;
    gap: var(--sp-2);
    margin: calc(var(--sp-2) * -1) calc(var(--sp-1) * -1) calc(var(--sp-1) * -1);
    padding: var(--sp-2) var(--sp-1);
    overflow-x: auto;
    scrollbar-width: none;
}

.rt-chip-row::-webkit-scrollbar {
    display: none;
}

/* ==================================================================================================
   Badge — status pills. Tones: good · bad · neutral · rose · free · premium · pro
   --------------------------------------------------------------------------------------------------
   Sentence case, --fs-meta at 600. Never uppercase, never --fs-eyebrow: that size is reserved for
   tracked section labels. Tier tones ink from --tier-*, the handle hard rule 5 names, rather than the
   raw palette token behind it.
   ================================================================================================== */

.rt-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-pill);
    background-color: var(--surface-sunken);
    color: var(--text-body);
    font-size: var(--fs-meta);
    font-weight: 600;
    line-height: var(--lh-body);
    white-space: nowrap;
}

.rt-badge--good {
    background-color: var(--rt-good-bg);
    color: var(--rt-good);
}

.rt-badge--bad {
    background-color: var(--rt-bad-bg);
    color: var(--rt-bad);
}

.rt-badge--neutral {
    background-color: var(--rt-neutral-bg);
    color: var(--rt-neutral);
}

.rt-badge--rose {
    background-color: var(--rt-rose-soft);
    color: var(--rt-rose);
}

.rt-badge--free {
    background-color: var(--rt-olive-soft);
    color: var(--tier-free);
}

.rt-badge--premium {
    background-color: var(--rt-accent-soft);
    color: var(--tier-premium);
}

.rt-badge--pro {
    background-color: var(--rt-gold-soft);
    color: var(--tier-pro);
}

/* The tone trio's Mixed pill (AB#2025): the gold pair through the --tone-mixed aliases. Favourable and
   Take care reuse --good and --bad above, so a tone pill IS a Badge. */
.rt-badge--mixed {
    background-color: var(--tone-mixed-bg);
    color: var(--tone-mixed);
}

/* The accent "Now" pill on a running reading, period or timeline group (AB#2025). */
.rt-badge--now {
    background-color: var(--rt-accent-soft);
    color: var(--rt-accent);
}

/* Scoped to the Now pill: the tier badges' gem keeps its size. */
.rt-badge--now .bi {
    font-size: var(--fs-eyebrow);
}

/* ==================================================================================================
   Card — the standard surface. Border AND shadow together, per the design system.
   ================================================================================================== */

.rt-card {
    display: block;
    padding: var(--sp-4);
    border: 0.8px solid var(--border-default);
    border-radius: var(--r-md);
    background-color: var(--surface-card);
    box-shadow: var(--shadow-card);
}

.rt-card__eyebrow {
    display: block;
    margin-bottom: var(--sp-1);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--text-muted);
}

.rt-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-card-title);
    font-weight: 600;
    line-height: var(--lh-display);
    color: var(--text-heading);
}

.rt-card__sub {
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-sub);
    color: var(--text-muted);
}

/* ==================================================================================================
   HeroCard — the identity card. Dark teal in BOTH themes; --rt-hero-* never flips with [data-theme].
   ================================================================================================== */

.rt-hero-card {
    padding: var(--sp-4);
    border: 0.8px solid var(--rt-hero-border);
    border-radius: var(--r-lg);
    background-color: var(--rt-hero-bg);
    color: var(--rt-hero-text);
}

.rt-hero-card__eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--rt-hero-link);
}

.rt-hero-card__title {
    margin: var(--sp-1) 0 0;
    font-family: var(--font-display);
    font-size: var(--fs-title);
    font-weight: 700;
    line-height: var(--lh-display);
    color: var(--rt-hero-title);
}

.rt-hero-card__sub {
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-sub);
    color: var(--rt-hero-text);
}

.rt-hero-card a {
    color: var(--rt-hero-link);
}

/* The period summary above the Readings list (AB#2025): stars eyebrow, title, paragraph, a foot row of
   hero labels and the "Refreshed …" note. Same ground, border and title as the identity hero. */
.rt-hero-card--reading .rt-hero-card__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
}

.rt-hero-card--reading .rt-hero-card__eyebrow .bi {
    color: var(--rt-gold);
}

.rt-hero-card__text {
    max-width: var(--content-max-narrow);
    margin: var(--sp-2) 0 0;
    color: var(--rt-hero-text);
    font-size: var(--fs-body);
    line-height: 1.6;
}

.rt-hero-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    margin-top: var(--sp-3);
}

.rt-hero-card__chip {
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-pill);
    background-color: var(--rt-hero-chip);
    color: var(--rt-hero-title);
    font-size: var(--fs-meta);
    font-weight: 600;
}

.rt-hero-card__note {
    color: var(--rt-hero-link);
    font-size: var(--fs-meta);
}

/* SignRow — glyph disc, eyebrow, name, sub. */
.rt-sign-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.rt-sign-row__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--hit-target);
    height: var(--hit-target);
    border-radius: var(--r-pill);
    background-color: var(--rt-primary);
    color: var(--rt-on-primary);
    font-family: var(--font-display);
    font-size: var(--fs-title);
}

/* The glyph is gold on the hero's own darker ground, per the brand-glyphs specimen. */
.rt-hero-card .rt-sign-row__glyph {
    background-color: var(--rt-hero-chip);
    color: var(--rt-gold);
}

.rt-hero-divider {
    height: 0.8px;
    margin: var(--sp-4) 0;
    border: 0;
    background-color: var(--rt-hero-line);
    opacity: 1;
}

/* ==================================================================================================
   ListRow — settings and account rows. Rows clip to the parent card, so no radius of their own.
   ================================================================================================== */

.rt-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rt-list-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    min-height: var(--hit-target);
    padding: var(--sp-3) var(--sp-4);
    border: 0;
    border-bottom: 0.8px solid var(--border-default);
    background-color: transparent;
    color: var(--text-body);
    text-align: left;
    text-decoration: none;
}

.rt-list-row:last-child {
    border-bottom: 0;
}

.rt-list-row:hover {
    background-color: var(--surface-sunken);
    color: var(--text-body);
    text-decoration: none;
}

.rt-list-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--hit-target);
    height: var(--hit-target);
    border-radius: var(--r-pill);
    background-color: var(--rt-primary-soft);
    color: var(--rt-primary);
    font-size: var(--fs-card-title);
}

.rt-list-row__main {
    flex: 1 1 auto;
    min-width: 0;
}

.rt-list-row__title {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--text-heading);
}

.rt-list-row__sub {
    margin: 0;
    font-size: var(--fs-sub);
    color: var(--text-muted);
}

.rt-list-row__trailing {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
    color: var(--text-muted);
}

.rt-list-row--danger .rt-list-row__title {
    color: var(--rt-bad);
}

.rt-list-row--danger .rt-list-row__icon {
    background-color: var(--rt-bad-bg);
    color: var(--rt-bad);
}

/* ==================================================================================================
   Avatar — the initial disc (AB#2027). --avatar-disc is one of the TWO sanctioned gradients; an
   archived chart's disc goes flat. Used by the sidebar chart rows and account card, the chart pill and
   sheet, ListRow, and the verify-email disc. This is the only copy of the rule.

   The ink is --rt-chrome-bg rather than a text token on purpose: the disc is gold→clay in BOTH themes,
   so its initial needs a dark ink in both, and the chrome ground is the dark teal that does not flip.
   ================================================================================================== */

.rt-avatar {
    --rt-avatar-size: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--rt-avatar-size);
    height: var(--rt-avatar-size);
    border-radius: 50%;
    background-image: var(--avatar-disc);
    color: var(--rt-chrome-bg);
    font-family: var(--font-display);
    font-size: calc(var(--rt-avatar-size) * 0.42);
    font-weight: 700;
    line-height: 1;
}

.rt-avatar--sm { --rt-avatar-size: 24px; }
.rt-avatar--md { --rt-avatar-size: 32px; }
.rt-avatar--lg { --rt-avatar-size: 36px; }
.rt-avatar--xl { --rt-avatar-size: var(--hit-target); }

.rt-avatar--archived {
    background-image: none;
    background-color: var(--surface-sunken);
    color: var(--text-muted);
}

/* ==================================================================================================
   HouseTable — THE app-wide standard house-keyed table.
   Four columns: House · Sign no · Sign (+ glyph) · Occupants. Empty houses are kept. NO Lord column.
   ================================================================================================== */

.rt-house-table-wrap {
    overflow: hidden;
    border: 0.8px solid var(--border-default);
    border-radius: var(--r-md);
    background-color: var(--surface-card);
}

.rt-house-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: var(--fs-body);
}

.rt-house-table th,
.rt-house-table td {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 0.8px solid var(--border-default);
    text-align: left;
    vertical-align: middle;
}

.rt-house-table thead th {
    background-color: var(--surface-sunken);
    color: var(--text-muted);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    white-space: nowrap;
}

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

.rt-house-table__house,
.rt-house-table__sign-no {
    width: 1%;
    color: var(--text-heading);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rt-house-table__glyph {
    margin-right: var(--sp-1);
    color: var(--rt-gold);
    font-family: var(--font-display);
}

.rt-house-table__occupants {
    color: var(--text-body);
}

/* An empty house is kept and marked, not dropped — the reader has to be able to see it is empty. */
.rt-house-table__empty {
    color: var(--text-muted);
}

/* ==================================================================================================
   StrengthBar — a percentage bar paired with a glyph and a dignity Badge
   ================================================================================================== */

.rt-strength-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-block: var(--sp-2);
}

.rt-strength-bar__glyph {
    flex-shrink: 0;
    width: var(--sp-6);
    color: var(--rt-gold);
    font-family: var(--font-display);
    font-size: var(--fs-card-title);
    text-align: center;
}

.rt-strength-bar__track {
    flex: 1 1 auto;
    height: var(--sp-2);
    border-radius: var(--r-pill);
    background-color: var(--surface-sunken);
    overflow: hidden;
}

/* The width is DATA, so it arrives as an inline custom property rather than an inline colour — no
   brand value ever goes in a style attribute. */
.rt-strength-bar__fill {
    display: block;
    width: var(--rt-bar-pct, 0%);
    height: 100%;
    border-radius: var(--r-pill);
    background-color: var(--rt-green);
    transition: width var(--dur-med) var(--ease-out);
}

.rt-strength-bar__value {
    flex-shrink: 0;
    min-width: var(--sp-8);
    color: var(--text-body);
    font-size: var(--fs-meta);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ==================================================================================================
   AllowanceMeter — "2 of 2 · Free" with the upgrade CTA. The paywall moment.
   --------------------------------------------------------------------------------------------------
   At the limit the fill KEEPS its tier tint — hitting your allowance is a paywall moment, not an
   error, so it never turns red. On Professional there is no track at all: a full bar for "unlimited"
   would be a lie.
   ================================================================================================== */

.rt-allowance-meter {
    --rt-meter-tint: var(--tier-free);

    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-4);
    border: 0.8px solid var(--border-default);
    border-radius: var(--r-md);
    background-color: var(--surface-card);
    box-shadow: var(--shadow-card);
}

/* Embedded as the header of an existing Card: no surface of its own. */
.rt-allowance-meter--embedded {
    padding: var(--sp-3) var(--sp-4);
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

.rt-allowance-meter--free {
    --rt-meter-tint: var(--tier-free);
}

.rt-allowance-meter--premium {
    --rt-meter-tint: var(--tier-premium);
}

.rt-allowance-meter--pro {
    --rt-meter-tint: var(--tier-pro);
}

.rt-allowance-meter__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
}

.rt-allowance-meter__label {
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--text-muted);
}

.rt-allowance-meter__count {
    color: var(--text-body);
    font-size: var(--fs-meta);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rt-allowance-meter__track {
    height: var(--sp-2);
    border-radius: var(--r-pill);
    background-color: var(--surface-sunken);
    overflow: hidden;
}

.rt-allowance-meter__fill {
    display: block;
    width: var(--rt-meter-pct, 0%);
    height: 100%;
    border-radius: var(--r-pill);
    background-color: var(--rt-meter-tint);
    transition: width var(--dur-med) var(--ease-out);
}

.rt-allowance-meter__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.rt-allowance-meter__helper {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-sub);
}

/* ==================================================================================================
   PlanCard — a tier card for the plans page
   --------------------------------------------------------------------------------------------------
   The tier token tints exactly three things: the tier Badge, the highlight border, and the ribbon
   ink. Price and features stay neutral, so three cards read as one comparable set rather than three
   competing colour fields.
   ================================================================================================== */

.rt-plan-card {
    --rt-plan-tint: var(--tier-free);
    --rt-plan-tint-soft: var(--rt-olive-soft);

    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 0.8px solid var(--border-default);
    border-radius: var(--r-md);
    background-color: var(--surface-card);
    box-shadow: var(--shadow-card);
}

.rt-plan-card--free {
    --rt-plan-tint: var(--tier-free);
    --rt-plan-tint-soft: var(--rt-olive-soft);
}

.rt-plan-card--premium {
    --rt-plan-tint: var(--tier-premium);
    --rt-plan-tint-soft: var(--rt-accent-soft);
}

.rt-plan-card--pro {
    --rt-plan-tint: var(--tier-pro);
    --rt-plan-tint-soft: var(--rt-gold-soft);
}

/* Highlight is a border colour, a head tint, a ribbon and a filled CTA — and nothing else. No second
   shadow (the system has one shadow), no scale transform, no gradient, no thicker border. */
.rt-plan-card.is-highlighted {
    border-color: var(--rt-plan-tint);
}

.rt-plan-card__ribbon {
    margin: 0;
    color: var(--rt-plan-tint);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
}

.rt-plan-card__head {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    align-items: flex-start;
    margin: 0 calc(var(--sp-4) * -1);
    padding: var(--sp-3) var(--sp-4);
}

.rt-plan-card.is-highlighted .rt-plan-card__head {
    background-color: var(--rt-plan-tint-soft);
}

.rt-plan-card__price {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: var(--sp-1);
}

.rt-plan-card__amount {
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: 700;
    color: var(--text-heading);
    font-variant-numeric: tabular-nums;
}

.rt-plan-card__period {
    color: var(--text-muted);
    font-size: var(--fs-sub);
}

.rt-plan-card__features {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-body);
}

.rt-plan-card__features li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
}

.rt-plan-card__features .bi {
    color: var(--rt-plan-tint);
}

.rt-plan-card__foot {
    display: flex;
}

/* "Current plan" is an account fact; "Recommended" is a marketing recommendation. Different axes,
   so they are separate states that must not collide on one card. */
.rt-plan-card.is-current {
    border-color: var(--rt-primary);
}

/* ==================================================================================================
   TextField — label + input, helper, error, optional trailing icon
   ================================================================================================== */

.rt-text-field,
.rt-select-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin-bottom: var(--sp-4);
}

.rt-text-field__label,
.rt-select-field__label,
.rt-switch__label {
    color: var(--text-heading);
    font-size: var(--fs-sub);
    font-weight: 600;
}

.rt-text-field__control,
.rt-select-field__control {
    width: 100%;
    min-height: var(--hit-target);
    padding: var(--sp-2) var(--sp-3);
    border: 0.8px solid var(--rt-input-border);
    border-radius: var(--r-sm);
    background-color: var(--rt-input-bg);
    color: var(--rt-input-ink);
    font-family: var(--font-body);
    font-size: var(--fs-body);
}

.rt-text-field__control::placeholder {
    color: var(--rt-placeholder);
}

.rt-text-field__helper,
.rt-select-field__helper {
    color: var(--text-muted);
    font-size: var(--fs-meta);
}

.rt-text-field__error {
    color: var(--rt-bad);
    font-size: var(--fs-meta);
}

.rt-text-field.has-error .rt-text-field__control {
    border-color: var(--rt-bad);
}

/* A trailing control that acts (the place search button) rather than decorates. */
.rt-text-field__trail--button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background-color: transparent;
    color: var(--rt-meta);
    pointer-events: auto;
    cursor: pointer;
}

.rt-text-field__trail--button:hover {
    background-color: var(--surface-sunken);
}

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

.rt-spin {
    display: inline-block;
    animation: rt-spin var(--dur-med) linear infinite;
}

/* The trailing icon (geo-alt on place search) sits inside the control's box. */
.rt-text-field__group {
    position: relative;
    display: flex;
    align-items: center;
}

.rt-text-field__group .rt-text-field__control {
    padding-right: var(--sp-8);
}

.rt-text-field__trail {
    position: absolute;
    right: var(--sp-3);
    color: var(--text-muted);
    pointer-events: none;
}

/* ==================================================================================================
   SelectField, including the LOCKED variant
   --------------------------------------------------------------------------------------------------
   A Professional-gated setting renders READ-ONLY with an upgrade helper. It is never hidden — hard
   rule 5. The reader must be able to see the setting exists and what it is currently set to.
   ================================================================================================== */

.rt-select-field--locked .rt-select-field__control {
    background-color: var(--surface-sunken);
    border-style: dashed;
    color: var(--text-muted);
    cursor: not-allowed;
}

.rt-select-field__lock {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--tier-pro);
    font-size: var(--fs-meta);
    font-weight: 600;
}

.rt-select-field__upgrade {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--rt-link);
    font-size: var(--fs-meta);
}

/* ==================================================================================================
   Switch — a toggle row with label and sub. Clay when on.
   ================================================================================================== */

.rt-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: var(--hit-target);
    padding-block: var(--sp-2);
}

.rt-switch__main {
    flex: 1 1 auto;
    min-width: 0;
}

.rt-switch__sub {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-sub);
}

/* A real checkbox, visually replaced — so it keeps its keyboard behaviour, its label association and
   its form value. Sized from the track, not hidden with display:none, which would take it out of the
   tab order. */
.rt-switch__control {
    appearance: none;
    flex-shrink: 0;
    position: relative;
    width: calc(var(--sp-8) + var(--sp-3));
    height: var(--sp-6);
    margin: 0;
    border: 0.8px solid var(--rt-input-border);
    border-radius: var(--r-pill);
    background-color: var(--surface-sunken);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}

.rt-switch__control::after {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--sp-1);
    width: var(--sp-4);
    height: var(--sp-4);
    border-radius: var(--r-pill);
    background-color: var(--surface-card);
    transform: translateY(-50%);
    transition: left var(--dur-fast) var(--ease-out);
}

.rt-switch__control:checked {
    background-color: var(--rt-accent);
    border-color: var(--rt-accent);
}

.rt-switch__control:checked::after {
    left: calc(100% - var(--sp-4) - var(--sp-1));
}

.rt-switch__control:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ==================================================================================================
   WizardStepper — the 3-step birth-details header (Who · When · Where)
   ================================================================================================== */

.rt-wizard-stepper {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-5);
    padding: 0;
    list-style: none;
}

.rt-wizard-stepper__step {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 1 1 0;
    min-width: 0;
}

.rt-wizard-stepper__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--sp-6);
    height: var(--sp-6);
    border: 0.8px solid var(--border-default);
    border-radius: var(--r-pill);
    background-color: var(--surface-card);
    color: var(--text-muted);
    font-size: var(--fs-meta);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rt-wizard-stepper__label {
    color: var(--text-muted);
    font-size: var(--fs-sub);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rt-wizard-stepper__rule {
    flex: 1 1 auto;
    height: 0.8px;
    background-color: var(--border-default);
}

.rt-wizard-stepper__step.is-current .rt-wizard-stepper__marker {
    background-color: var(--rt-primary);
    border-color: var(--rt-primary);
    color: var(--rt-on-primary);
}

.rt-wizard-stepper__step.is-current .rt-wizard-stepper__label {
    color: var(--text-heading);
}

.rt-wizard-stepper__step.is-done .rt-wizard-stepper__marker {
    background-color: var(--rt-primary-soft);
    border-color: var(--rt-primary);
    color: var(--rt-primary);
}

/* ==================================================================================================
   StatusBanner — calculation state. processing · failed (with Retry) · partial.
   Never a bare spinner for multi-second work. Carries role="alert" in the markup.
   ================================================================================================== */

.rt-status-banner {
    --rt-banner-ink: var(--rt-neutral);
    --rt-banner-bg: var(--rt-neutral-bg);

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    background-color: var(--rt-banner-bg);
    color: var(--rt-banner-ink);
    font-size: var(--fs-body);
}

.rt-status-banner--processing {
    --rt-banner-ink: var(--rt-gold-deep);
    --rt-banner-bg: var(--rt-gold-soft);
}

.rt-status-banner--failed {
    --rt-banner-ink: var(--rt-bad);
    --rt-banner-bg: var(--rt-bad-bg);
}

.rt-status-banner--partial {
    --rt-banner-ink: var(--rt-neutral);
    --rt-banner-bg: var(--rt-neutral-bg);
}

.rt-status-banner__icon {
    flex-shrink: 0;
    font-size: var(--fs-card-title);
}

.rt-status-banner__main {
    flex: 1 1 auto;
    min-width: 0;
}

.rt-status-banner__title {
    margin: 0;
    font-weight: 600;
}

.rt-status-banner__message {
    margin: 0;
    font-size: var(--fs-sub);
}

/* ==================================================================================================
   EmptyState — serif glyph, title, message, optional action. Never a blank region.
   ================================================================================================== */

.rt-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-8) var(--sp-4);
    border: 0.8px dashed var(--border-default);
    border-radius: var(--r-md);
    background-color: var(--surface-card);
    text-align: center;
}

.rt-empty-state__glyph {
    font-family: var(--font-display);
    font-size: var(--fs-display);
    color: var(--rt-gold);
}

.rt-empty-state__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-card-title);
    color: var(--text-heading);
}

.rt-empty-state__message {
    margin: 0;
    max-width: 44ch;
    color: var(--text-muted);
    font-size: var(--fs-sub);
}

/* ==================================================================================================
   SegmentedControl — a small exclusive choice: the theme and chart-style pickers (radio mode, below in
   the Settings block). Chart sections are the SectionRail. .is-active is the hand-drawn Identity Manage
   nav's selected link, which reuses these pills.
   ================================================================================================== */

.rt-segmented {
    display: inline-flex;
    gap: var(--sp-1);
    max-width: 100%;
    padding: var(--sp-1);
    border-radius: var(--r-pill);
    background-color: var(--surface-sunken);
    overflow-x: auto;
    scrollbar-width: none;
}

.rt-segmented::-webkit-scrollbar {
    display: none;
}

.rt-segmented__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: var(--sp-1) var(--sp-4);
    border: 0;
    border-radius: var(--r-pill);
    background-color: transparent;
    color: var(--text-muted);
    font-size: var(--fs-sub);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.rt-segmented__option:hover {
    color: var(--text-heading);
    text-decoration: none;
}

.rt-segmented__option.is-active {
    background-color: var(--rt-accent);
    color: var(--rt-on-accent);
}

/* ==================================================================================================
   Dialog — Bootstrap's modal, reskinned. Confirm dialogs; danger for destructive actions with
   explicit consequence copy. Never a browser confirm().
   ================================================================================================== */

/* Round icon buttons: the gear, the bell, the menu button, the theme toggle, a dialog's close. 36px is the
   sanctioned small target. Here rather than in layout.css (AB#2182) because the admin console loads this
   file and not that one - an RtDialog in admin drew its close button as a bare grey box. The --chrome
   variant, which only the shell uses, stays in layout.css. */
.rt-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0.8px solid var(--border-default);
    border-radius: var(--r-pill);
    background-color: transparent;
    color: var(--rt-meta);
    font-size: var(--fs-card-title);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out);
}

.rt-icon-button:hover,
.rt-icon-button:focus-visible {
    background-color: var(--surface-sunken);
    color: var(--rt-meta);
    text-decoration: none;
}

.rt-dialog .modal-content {
    border: 0.8px solid var(--border-default);
    border-radius: var(--r-lg);
    background-color: var(--surface-card);
    color: var(--text-body);
    box-shadow: var(--shadow-card);
}

/* Bootstrap pushes its own .btn-close to the end of the header with margin-left: auto; the design-system
   round button has no such margin, so the dialog gives it one (AB#2182). */
.rt-dialog .modal-header .rt-icon-button {
    margin-left: auto;
}

.rt-dialog .modal-header,
.rt-dialog .modal-footer {
    border-color: var(--border-default);
    padding: var(--sp-4);
}

.rt-dialog .modal-body {
    padding: var(--sp-4);
}

.rt-dialog .modal-title {
    font-family: var(--font-display);
    font-size: var(--fs-card-title);
    color: var(--text-heading);
}

.rt-dialog__consequence {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-sub);
}

.rt-dialog--danger .modal-title {
    color: var(--rt-bad);
}

/* ==================================================================================================
   Card modifier — flush (AB#1366)

   Not a twentieth component: a variant of the Card above, for the case the ListRow rules already
   assume. ListRow says "rows clip to the parent card, so no radius of their own", which holds only
   when the card contributes no padding of its own; without this the rows are inset by --sp-4 and
   their hover fill and divider stop reaching the card edge. The dev gallery had already needed
   exactly this rule and solved it privately in dev-gallery.css (.rt-gallery__flush) — this is that
   rule promoted to where real screens can use it.
   ================================================================================================== */

.rt-card--flush {
    padding: 0;
    overflow: hidden;
}

/* ==================================================================================================
   Callout — "that worked" / "that failed" / "here is what happens next" (AB#2021)

   Not the StatusBanner, which is bound to CalculationStatus. Tones good · bad · neutral · warning;
   optional title, optional dismiss. Replaces Bootstrap's alert everywhere under Views/Shared.
   ================================================================================================== */

.rt-callout {
    --rt-callout-ink: var(--rt-neutral);
    --rt-callout-bg: var(--rt-neutral-bg);

    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    background-color: var(--rt-callout-bg);
    color: var(--rt-callout-ink);
    font-size: var(--fs-body);
}

.rt-callout--good {
    --rt-callout-ink: var(--rt-good);
    --rt-callout-bg: var(--rt-good-bg);
}

.rt-callout--bad {
    --rt-callout-ink: var(--rt-bad);
    --rt-callout-bg: var(--rt-bad-bg);
}

.rt-callout--warning {
    --rt-callout-ink: var(--rt-gold-deep);
    --rt-callout-bg: var(--rt-gold-soft);
}

.rt-callout__icon {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: var(--fs-card-title);
}

.rt-callout__main {
    flex: 1 1 auto;
    min-width: 0;
}

.rt-callout__title {
    margin: 0;
    font-weight: 700;
}

.rt-callout__text {
    margin: 0;
}

.rt-callout__dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin: -6px -8px -6px 0;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background-color: transparent;
    color: inherit;
    font-size: var(--fs-sub);
    cursor: pointer;
}

.rt-callout__dismiss:hover {
    background-color: var(--surface-card);
}

/* The validation summary tag helper always emits its div; with no errors it carries
   validation-summary-valid and an empty list, which must not draw an empty callout. */
.validation-summary-valid {
    display: none;
}

.rt-callout ul {
    margin: 0;
    padding-left: var(--sp-4);
}

/* ==================================================================================================
   ReadingCard — one reading, full (Readings page) or compact (Home) (AB#2025)

   Replaced the PredictionCard (deleted in VR-2, AB#2042). The readings content rule holds by construction: there is no
   element here for a verse, a rule code, a source, a version stamp or a count. The tone pill is a Badge
   (--good / --mixed / --bad). Title snaps to --fs-card-title and the paragraph to --fs-body (ui-ux
   ruling for AB#2025) - the canvas's 16.5 / 13.5px are off the scale.
   ================================================================================================== */

.rt-reading-card {
    display: flex;
    flex-direction: column;
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
    border: 0.8px solid var(--border-default);
    border-radius: var(--r-md);
    background-color: var(--surface-card);
    box-shadow: var(--shadow-card);
    color: var(--text-body);
}

.rt-reading-card__head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.rt-reading-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--sp-8);
    height: var(--sp-8);
    border-radius: 50%;
    background-color: var(--rt-primary-soft);
    color: var(--rt-meta);
    font-size: var(--fs-body);
}

.rt-reading-card__area {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
}

.rt-reading-card__title {
    margin: var(--sp-3) 0 var(--sp-1);
    color: var(--text-heading);
    font-family: var(--font-display);
    font-size: var(--fs-card-title);
    font-weight: 700;
    line-height: var(--lh-display);
    text-wrap: pretty;
}

.rt-reading-card__text {
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--fs-body);
    line-height: 1.6;
    text-wrap: pretty;
}

.rt-reading-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    padding-top: var(--sp-2);
    border-top: 0.8px solid var(--border-default);
    color: var(--text-muted);
    font-size: var(--fs-meta);
}

.rt-reading-card__spacer {
    flex: 1 1 auto;
}

.rt-reading-card__timeline {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    color: var(--rt-link);
    font-weight: 700;
}

.rt-reading-card__feedback {
    display: inline-flex;
    gap: var(--sp-1);
    margin: 0;
}

/* Icon-only votes: 36px targets (the sanctioned small size), aria-labelled in the markup. */
.rt-reading-card__vote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background-color: transparent;
    color: var(--text-muted);
    font-size: var(--fs-body);
    cursor: pointer;
}

.rt-reading-card__vote:hover {
    background-color: var(--surface-sunken);
    color: var(--text-heading);
}

/* Compact (Home): the whole card links; icon, subject, tone pill, one line. */
.rt-reading-card--compact {
    gap: var(--sp-1);
    padding: var(--sp-3) var(--sp-4);
    text-decoration: none;
}

a.rt-reading-card--compact:hover {
    background-color: var(--surface-sunken);
    color: var(--text-body);
    text-decoration: none;
}

.rt-reading-card__compact-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.rt-reading-card__compact-icon {
    color: var(--rt-meta);
    font-size: var(--fs-body);
}

.rt-reading-card__subject {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-heading);
    font-size: var(--fs-body);
    font-weight: 700;
}

.rt-reading-card__summary {
    overflow: hidden;
    color: var(--text-muted);
    font-size: var(--fs-sub);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==================================================================================================
   SignCard — the Moon-sign art card (AB#2024; specimen ui/design-system/guidelines/brand-sign-cards.html)

   The ONE sanctioned photographic surface, and the only user of --scrim-photo. Radius 18 in the prose
   snaps to --r-lg like the hero card it sits beside; the border is the hero's. The literal sizes below
   (56/15px scrim padding, 1.4px eyebrow tracking, 26/20/72px type) are the README's named anatomy and
   are listed in this file's header as exceptions. Responsive cards switch 4:5 → 230px 2:3 at 900px.

   Blur-up (AB#2040; ui-ux ruling): --rt-sign-card-lqip is a component-local custom property the view
   sets inline - a 10px base64 WebP of the full 2:3 frame - never a design token. The --lqip modifier
   paints it on the art's ::before at the same 50% 16% focus (one 2:3 placeholder matches both crops
   under `cover`), blurred 8px and overscanned 1.1× so the blur's soft edge falls outside the card. The
   img and ::before are both positioned with z-index auto, so tree order paints the image over the
   placeholder and the scrim over both. No fade, no script: the image simply paints over it on decode.
   ================================================================================================== */

.rt-sign-card {
    position: relative;
    flex: none;
    overflow: hidden;
    border: 0.8px solid var(--rt-hero-border);
    border-radius: var(--r-lg);
    background-color: var(--rt-hero-bg);
    box-shadow: var(--shadow-card);
}

.rt-sign-card--web {
    width: 230px;
    aspect-ratio: 2 / 3;
}

.rt-sign-card--phone,
.rt-sign-card--responsive {
    width: 100%;
    aspect-ratio: 4 / 5;
}

@media (min-width: 900px) {
    .rt-sign-card--responsive {
        width: 230px;
        aspect-ratio: 2 / 3;
    }
}

.rt-sign-card__art,
.rt-sign-card__art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.rt-sign-card__art img {
    object-fit: cover;
    object-position: 50% 16%;
}

.rt-sign-card--lqip .rt-sign-card__art::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--rt-sign-card-lqip) 50% 16% / cover no-repeat;
    filter: blur(8px);
    transform: scale(1.1);
}

/* No art (or no gender to choose it): the hero ground and the large glyph, above the scrim. */
.rt-sign-card__glyph {
    position: absolute;
    inset: 0 0 34% 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rt-gold);
    font-family: var(--font-display);
    font-size: 72px;
    line-height: 1;
    opacity: 0.85;
}

.rt-sign-card__scrim {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 56px var(--sp-4) 15px;
    background-image: var(--scrim-photo);
    pointer-events: none;
}

.rt-sign-card__scrim p {
    margin: 0;
}

.rt-sign-card__eyebrow {
    color: var(--rt-gold);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.rt-sign-card__name {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    color: var(--rt-hero-title);
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    line-height: var(--lh-display);
}

.rt-sign-card__name-glyph {
    color: var(--rt-gold);
    font-size: 20px;
    font-weight: 400;
}

/* "12px at .86 alpha of the light ink" — mixed from the hero ink token, as the specimen does. */
.rt-sign-card__gloss {
    color: color-mix(in srgb, var(--rt-hero-title) 86%, transparent);
    font-size: var(--fs-meta);
}

/* ==================================================================================================
   Tone dots and Mahādaśā lord colours (AB#2026)

   --rt-tone-dot colours a moment's dot (README tone trio: good / gold / bad). --rt-lord and
   --rt-lord-ink colour a lord's band segment, rail and node, from the README lord map. --rt-lord-ink is
   component-local, built from existing tokens (ui-ux ruling for AB#2026): --rt-on-primary flips with the
   theme so it stays legible on fills that lighten in dark mode; Sūrya's gold takes the hero ink and
   Rāhu's slate (which does not flip) the hero title ink.
   ================================================================================================== */

.rt-tone--good { --rt-tone-dot: var(--rt-good); }
.rt-tone--mixed { --rt-tone-dot: var(--rt-gold); }
.rt-tone--bad { --rt-tone-dot: var(--rt-bad); }

.rt-lord--budha,
.rt-lord--ketu,
.rt-lord--shukra,
.rt-lord--candra,
.rt-lord--mangala {
    --rt-lord-ink: var(--rt-on-primary);
}

.rt-lord--budha { --rt-lord: var(--rt-olive); }
.rt-lord--ketu { --rt-lord: var(--rt-rose); }
.rt-lord--shukra { --rt-lord: var(--rt-accent); }
.rt-lord--candra { --rt-lord: var(--rt-primary); }
.rt-lord--mangala { --rt-lord: var(--rt-bad); }

.rt-lord--surya {
    --rt-lord: var(--rt-gold);
    --rt-lord-ink: var(--rt-hero-bg);
}

.rt-lord--rahu {
    --rt-lord: var(--rt-slate);
    --rt-lord-ink: var(--rt-hero-title);
}

/* PLACEHOLDER PENDING DESIGN — Guru (Jupiter) and Śani (Saturn) have no lord colour yet, and the
   README says not to invent one until the design defines it (PO ruling 4, AB#2015). Both share this one
   neutral built from existing tokens; there is deliberately no new token. Replace both when the design
   assigns them colours. */
.rt-lord--pending {
    --rt-lord: var(--border-default);
    --rt-lord-ink: var(--text-body);
}

/* ==================================================================================================
   MahadasaBand — proportional lord segments with glyphs, a Now marker (AB#2026)

   Non-running segments drop to .45. Segments are parted by a hairline of the card ground so two
   neighbours of one colour (Guru and Śani share the placeholder) still read as two periods. The Now
   marker stays neutral (heading ink) because accent is Śukra's colour on the band.
   ================================================================================================== */

.rt-md-band {
    position: relative;
    padding: var(--sp-3) 0 var(--sp-1);
}

.rt-md-band__track {
    display: flex;
    height: 26px;
    overflow: hidden;
    border-radius: var(--r-sm);
}

.rt-md-band__seg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--rt-seg-w, 0%);
    min-width: 0;
    overflow: hidden;
    background-color: var(--rt-lord);
    color: var(--rt-lord-ink);
    font-family: var(--font-display);
    font-size: var(--fs-meta);
    line-height: 1;
    opacity: 0.45;
}

.rt-md-band__seg + .rt-md-band__seg {
    border-left: 1px solid var(--surface-card);
}

.rt-md-band__seg.is-running {
    opacity: 1;
}

.rt-md-band__now {
    position: absolute;
    top: var(--sp-1);
    bottom: 0;
    left: var(--rt-x);
    width: 2px;
    border-radius: 2px;
    background-color: var(--text-heading);
    transform: translateX(-50%);
}

.rt-md-band__now-label {
    position: absolute;
    top: calc(var(--sp-2) * -1);
    left: 50%;
    padding: 1px var(--sp-2);
    border-radius: var(--r-pill);
    background-color: var(--text-heading);
    color: var(--surface-page);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateX(-50%);
}

.rt-md-band__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: var(--sp-2) 0 0;
    padding: 0;
    list-style: none;
}

.rt-md-band__legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px var(--sp-3);
    border: 0.8px solid var(--border-default);
    border-radius: var(--r-pill);
    background-color: var(--surface-sunken);
    color: var(--text-body);
    font-size: var(--fs-meta);
    font-weight: 600;
}

.rt-md-band__legend-item.is-running {
    border-color: var(--rt-accent);
}

.rt-md-band__dot {
    width: var(--sp-2);
    height: var(--sp-2);
    border-radius: 50%;
    background-color: var(--rt-lord);
}

/* The pending placeholder is a border-coloured fill; on the sunken chip it needs an edge to be seen. */
.rt-lord--pending .rt-md-band__dot {
    box-shadow: inset 0 0 0 1px var(--text-muted);
}

/* ==================================================================================================
   LifeTimeline — overview card + spine of moments by Mahādaśā (AB#2026)

   No script: GET-link area chips, a server-drawn SVG, native <details> groups. Phone: the rail on the
   left. From 900px: a centre spine with cards alternating columns on a three-column grid. Group titles
   snap to --fs-card-title and moment titles to --fs-body at 600 (ui-ux ruling); the canvas's 17/15px are
   off the scale. Nothing animates except the chevron, and not at all under reduced motion.
   ================================================================================================== */

.rt-life-timeline__areas {
    margin-bottom: var(--sp-3);
}

.rt-tl-overview {
    margin-bottom: var(--sp-6);
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
    border: 0.8px solid var(--border-default);
    border-radius: var(--r-md);
    background-color: var(--surface-card);
    box-shadow: var(--shadow-card);
}

.rt-tl-overview__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.rt-tl-overview__eyebrow,
.rt-tl-overview__title {
    margin: 0;
}

.rt-tl-overview__title {
    font-size: var(--fs-card-title);
    font-weight: 700;
}

.rt-tl-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin: 0;
    padding: var(--sp-1) 0 0;
    list-style: none;
    color: var(--text-muted);
    font-size: var(--fs-meta);
}

.rt-tl-legend li {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

.rt-tl-legend__lived,
.rt-tl-legend__ahead {
    width: 14px;
    height: 0;
    border-top: 2px solid var(--rt-accent);
}

.rt-tl-legend__ahead {
    border-top-style: dashed;
}

.rt-tl-legend__moment {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--rt-good);
}

.rt-tl-chart {
    position: relative;
    height: 150px;
}

.rt-tl-chart__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.rt-tl-chart__grid {
    stroke: var(--border-default);
    stroke-dasharray: 2 4;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.rt-tl-chart__fill {
    fill: var(--rt-accent);
    stroke: none;
}

.rt-tl-chart__fill--lived { fill-opacity: 0.1; }
.rt-tl-chart__fill--ahead { fill-opacity: 0.04; }

.rt-tl-chart__line {
    fill: none;
    stroke: var(--rt-accent);
    stroke-linecap: round;
    stroke-width: 2.2;
    vector-effect: non-scaling-stroke;
}

.rt-tl-chart__line--ahead {
    stroke-dasharray: 5 4;
    stroke-width: 2;
}

.rt-tl-chart__dot {
    position: absolute;
    top: var(--rt-y);
    left: var(--rt-x);
    box-sizing: content-box;
    width: var(--sp-2);
    height: var(--sp-2);
    margin: -6px 0 0 -6px;
    border: 2px solid var(--surface-card);
    border-radius: 50%;
    background-color: var(--rt-tone-dot);
}

.rt-tl-chart__now {
    position: absolute;
    top: var(--sp-2);
    bottom: 0;
    left: var(--rt-x);
    width: 1.5px;
    background-color: var(--text-heading);
    opacity: 0.6;
}

.rt-tl-chart__now-label {
    position: absolute;
    top: calc(var(--sp-4) * -1);
    left: 50%;
    padding: 1px var(--sp-2);
    border-radius: var(--r-pill);
    background-color: var(--text-heading);
    color: var(--surface-page);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateX(-50%);
}

.rt-tl-ticks {
    position: relative;
    height: var(--sp-4);
    margin-top: var(--sp-1);
    color: var(--text-muted);
    font-size: var(--fs-eyebrow);
}

.rt-tl-ticks__tick {
    position: absolute;
    left: var(--rt-x);
    white-space: nowrap;
}

.rt-tl-ticks__tick--middle { transform: translateX(-50%); }
.rt-tl-ticks__tick--end { transform: translateX(-100%); }

/* The spine. Each group's coloured rail is its ::before, so it shows open or collapsed. */
.rt-tl-spine {
    margin: 0 auto;
}

.rt-tl-group {
    --rt-tl-rail-x: 15px;

    position: relative;
}

.rt-tl-group::before {
    content: "";
    position: absolute;
    top: var(--sp-4);
    bottom: 0;
    left: var(--rt-tl-rail-x);
    width: 2px;
    border-radius: 2px;
    background-color: var(--rt-lord);
    opacity: 0.8;
}

.rt-tl-group--past::before {
    opacity: 0.35;
}

.rt-tl-group__head {
    position: relative;
    display: grid;
    grid-template-areas:
        "node name"
        "node meta";
    grid-template-columns: var(--sp-8) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--sp-3);
    padding-bottom: var(--sp-4);
    color: var(--text-body);
    list-style: none;
    cursor: pointer;
}

.rt-tl-group__head::-webkit-details-marker {
    display: none;
}

.rt-tl-group__name {
    grid-area: name;
    color: var(--text-heading);
    font-family: var(--font-display);
    font-size: var(--fs-card-title);
    font-weight: 700;
    line-height: var(--lh-display);
}

.rt-tl-group__node {
    display: inline-flex;
    grid-area: node;
    align-items: center;
    justify-content: center;
    width: var(--sp-8);
    height: var(--sp-8);
    border-radius: 50%;
    background-color: var(--rt-lord);
    box-shadow: 0 0 0 4px var(--surface-page);
    color: var(--rt-lord-ink);
    font-family: var(--font-display);
    font-size: var(--fs-body);
}

.rt-tl-group--past .rt-tl-group__node {
    opacity: 0.55;
}

.rt-tl-group__meta {
    display: flex;
    flex-wrap: wrap;
    grid-area: meta;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text-muted);
    font-size: var(--fs-meta);
}

.rt-tl-group__chev {
    transition: transform var(--dur-fast) var(--ease-out);
}

.rt-tl-group[open] .rt-tl-group__chev {
    transform: rotate(180deg);
}

.rt-tl-group__moments {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rt-tl-moment {
    position: relative;
    display: grid;
    grid-template-columns: var(--sp-8) minmax(0, 1fr);
    column-gap: var(--sp-3);
}

.rt-tl-card {
    grid-row: 1;
    grid-column: 2;
    min-width: 0;
    margin-bottom: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 0.8px solid var(--border-default);
    border-radius: var(--r-md);
    background-color: var(--surface-card);
    box-shadow: var(--shadow-card);
}

/* Lived: dashed outline on the page ground. Now: accent border and halo. Ahead: the solid card above. */
.rt-tl-moment--past .rt-tl-card {
    border-style: dashed;
    background-color: transparent;
    box-shadow: none;
    opacity: 0.8;
}

.rt-tl-moment--current .rt-tl-card {
    border-color: var(--rt-accent);
    box-shadow: 0 0 0 3px var(--rt-accent-soft), var(--shadow-card);
}

.rt-tl-card__head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-1);
}

.rt-tl-card__icon {
    color: var(--rt-meta);
    font-size: var(--fs-sub);
}

.rt-tl-card__when {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-muted);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
}

.rt-tl-card__title {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: 600;
    text-wrap: pretty;
}

.rt-tl-card__text {
    margin: var(--sp-1) 0 0;
    color: var(--text-muted);
    font-size: var(--fs-sub);
    line-height: 1.55;
    text-wrap: pretty;
}

.rt-tl-moment__dot {
    grid-row: 1;
    grid-column: 1;
    justify-self: center;
    box-sizing: content-box;
    width: var(--sp-2);
    height: var(--sp-2);
    margin-top: 17px;
    border: 2px solid var(--rt-lord);
    border-radius: 50%;
    background-color: var(--surface-page);
    box-shadow: 0 0 0 3px var(--surface-page);
}

.rt-tl-moment--current .rt-tl-moment__dot {
    border-color: var(--rt-accent);
    background-color: var(--rt-accent);
    box-shadow: 0 0 0 5px var(--rt-accent-soft);
}

/* The dashed "Now · Oct 2026" marker inside the running group. */
.rt-tl-now {
    position: relative;
    display: flex;
    justify-content: flex-start;
    padding: 2px 0 var(--sp-4);
}

.rt-tl-now::before {
    content: "";
    position: absolute;
    top: var(--sp-3);
    right: 0;
    left: 0;
    border-top: 1.5px dashed var(--rt-accent);
}

.rt-tl-now__label {
    position: relative;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-pill);
    background-color: var(--rt-accent);
    color: var(--rt-on-accent);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.rt-tl-footnote {
    margin: var(--sp-2) 0 0;
    color: var(--text-muted);
    font-size: var(--fs-meta);
    text-align: center;
}

/* Desktop (≥ 900px): a centre spine; group titles right of centre-left, cards alternating columns. */
@media (min-width: 900px) {
    .rt-tl-spine {
        max-width: 980px;
    }

    .rt-tl-group {
        --rt-tl-rail-x: calc(50% - 1px);
    }

    .rt-tl-group__head {
        grid-template-areas: "name node meta";
        grid-template-columns: minmax(0, 1fr) var(--sp-8) minmax(0, 1fr);
        column-gap: var(--sp-4);
    }

    .rt-tl-group__name {
        text-align: right;
    }

    .rt-tl-moment {
        grid-template-columns: minmax(0, 1fr) var(--sp-8) minmax(0, 1fr);
        column-gap: var(--sp-4);
    }

    .rt-tl-moment__dot {
        grid-column: 2;
    }

    .rt-tl-moment--left .rt-tl-card {
        grid-column: 1;
    }

    .rt-tl-moment--right .rt-tl-card {
        grid-column: 3;
    }

    .rt-tl-now {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rt-tl-group__chev {
        transition: none;
    }
}

/* ==================================================================================================
   SectionRail — chart-detail section navigation (AB#2027)

   One <nav>, two bands. Below 1280px: a horizontally scrolling pill row, icons hidden, scrollbar
   hidden (the design system's pill-row pattern). From 1280px: a sticky 196px rail card with icons.
   The scroller carries padding (cancelled by a negative margin) so overflow-x cannot clip the 3px
   focus ring. Replaces SegmentedControl for chart sections only.
   ================================================================================================== */

.rt-section-rail {
    display: flex;
    gap: var(--sp-2);
    margin: calc(var(--sp-2) * -1) calc(var(--sp-1) * -1) 0;
    padding: var(--sp-2) var(--sp-1) var(--sp-3);
    overflow-x: auto;
    scrollbar-width: none;
}

.rt-section-rail::-webkit-scrollbar {
    display: none;
}

.rt-section-rail__item {
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: var(--sp-3);
    min-height: 36px;
    padding: var(--sp-2) var(--sp-4);
    border: 0.8px solid var(--border-default);
    border-radius: var(--r-pill);
    background-color: var(--surface-card);
    color: var(--text-body);
    font-size: var(--fs-sub);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease-out);
}

.rt-section-rail__item .bi {
    display: none;
    font-size: var(--fs-body);
}

.rt-section-rail__item:hover {
    background-color: var(--surface-sunken);
    color: var(--text-heading);
    text-decoration: none;
}

.rt-section-rail__item.is-current,
.rt-section-rail__item.is-current:hover {
    border-color: var(--rt-primary);
    background-color: var(--rt-primary);
    color: var(--rt-on-primary);
}

/* The page wrapper a rail sits in: stacked below 1280px, rail beside the content from there (gap 24). */
.rt-rail-layout {
    display: flex;
    flex-direction: column;
}

.rt-rail-layout__main {
    min-width: 0;
}

@media (min-width: 1280px) {
    .rt-rail-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--sp-6);
    }

    .rt-rail-layout__main {
        flex: 1 1 auto;
    }

    .rt-section-rail {
        position: sticky;
        top: var(--sp-6);
        flex: none;
        flex-direction: column;
        gap: 2px;
        width: var(--shell-rail-w);
        margin: 0;
        padding: var(--sp-2);
        overflow: visible;
        border: 0.8px solid var(--border-default);
        border-radius: var(--r-md);
        background-color: var(--surface-card);
        box-shadow: var(--shadow-card);
    }

    .rt-section-rail__item {
        min-height: 40px;
        padding: var(--sp-2) var(--sp-3);
        border: 0;
        border-radius: var(--r-sm);
        background-color: transparent;
        font-size: var(--fs-body);
        white-space: normal;
    }

    .rt-section-rail__item .bi {
        display: inline-block;
    }
}

/* ==================================================================================================
   QuickLink — shortcut tiles into a chart section (AB#2027). The row shares its width between them.
   ================================================================================================== */

.rt-quick-links {
    display: flex;
    gap: var(--sp-2);
}

.rt-quick-link {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    min-width: 0;
    min-height: var(--hit-target);
    padding: var(--sp-3) var(--sp-2);
    border: 0.8px solid var(--border-default);
    border-radius: var(--r-md);
    background-color: var(--surface-card);
    box-shadow: var(--shadow-card);
    color: var(--text-heading);
    text-align: center;
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out);
}

.rt-quick-link:hover {
    background-color: var(--surface-sunken);
    color: var(--text-heading);
    text-decoration: none;
}

.rt-quick-link .bi {
    color: var(--rt-meta);
    font-size: var(--fs-card-title);
}

.rt-quick-link__label {
    max-width: 100%;
    overflow: hidden;
    font-size: var(--fs-meta);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==================================================================================================
   ProgressMeter — light and hero variants (AB#2027). THE FILL IS FLAT: the PO ruled out the canvas's
   gold→clay gradient (2026-10-08), since the system sanctions only --scrim-photo and --avatar-disc.
   Light = clay on the sunken track; hero = saffron on the hero chip track (the hero does not flip).
   The value is always printed beside the bar (clay on the light track is under 3:1).
   ================================================================================================== */

.rt-progress-meter {
    --rt-progress-track: var(--surface-sunken);
    --rt-progress-fill: var(--rt-accent);
    --rt-progress-ink: var(--text-muted);
}

.rt-progress-meter--hero {
    --rt-progress-track: var(--rt-hero-chip);
    --rt-progress-fill: var(--rt-gold);
    --rt-progress-ink: var(--rt-hero-link);
}

.rt-progress-meter__track {
    height: var(--sp-2);
    border-radius: var(--r-pill);
    background-color: var(--rt-progress-track);
    overflow: hidden;
}

.rt-progress-meter__fill {
    display: block;
    width: var(--rt-meter-pct, 0%);
    height: 100%;
    border-radius: var(--r-pill);
    background-color: var(--rt-progress-fill);
    transition: width var(--dur-med) var(--ease-out);
}

.rt-progress-meter__labels {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-top: var(--sp-1);
    color: var(--rt-progress-ink);
    font-size: var(--fs-meta);
}

/* ==================================================================================================
   The one layout helper the components above need (not a component itself)
   ================================================================================================== */

.rt-stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

/* ==================================================================================================
   Phase 3 pages (AB#2029–AB#2039). Page-level anatomy the canvas repeats on every screen, plus the
   section-specific rows of chart detail. All values are tokens; the grid minima are the canvas's
   (grahas/strength 300 · vargas 260 · dasa 330 · readings 340 · plans 240 · account 300; settings went
   single-column at the narrow width in AB#2191),
   wrapped in min(…, 100%) so a minimum can never force a horizontal scroll at 390 px.
   ================================================================================================== */

/* Page header — back arrow, Lora title, optional sub line, trailing actions (D9a, D9b, F2–F7, G1–G3, H1). */
.rt-page-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.rt-page-head__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    margin-left: calc(var(--sp-2) * -1);
    border-radius: var(--r-pill);
    color: var(--text-heading);
    font-size: var(--fs-card-title);
}

.rt-page-head__back:hover,
.rt-page-head__back:focus-visible {
    background-color: var(--surface-sunken);
    color: var(--text-heading);
    text-decoration: none;
}

.rt-page-head__main {
    flex: 1 1 auto;
    min-width: 0;
}

.rt-page-head__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-title);
    font-weight: 700;
    line-height: var(--lh-display);
    color: var(--text-heading);
    overflow-wrap: anywhere;
}

.rt-page-head__sub {
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-meta);
    color: var(--text-muted);
}

.rt-page-head__meta {
    color: var(--rt-meta);
}

.rt-page-head__actions {
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: var(--sp-2);
}

.rt-page-head__actions form {
    display: inline-flex;
    margin: 0;
}

/* A section heading inside a page — the tracked eyebrow with an optional trailing link. */
.rt-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: var(--sp-4) 0 var(--sp-2);
}

.rt-section-head .rt-eyebrow {
    margin: 0;
}

.rt-section-head a {
    font-size: var(--fs-sub);
    font-weight: 700;
}

/* A small muted footnote under a card or a page. */
.rt-footnote {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-meta);
    color: var(--text-muted);
}

.rt-footnote--center {
    text-align: center;
}

/* Auto-fit / auto-fill grids at the canvas minima. */
.rt-grid {
    display: grid;
    gap: var(--sp-4);
    align-items: start;
}

.rt-grid--240 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.rt-grid--260 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.rt-grid--300 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.rt-grid--330 { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); }
.rt-grid--fill-340 { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }

/* A static Chip — a label rather than a control (the chart-detail identity chips). */
.rt-chip--label {
    min-height: 0;
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-meta);
    cursor: default;
}

.rt-chip--label:hover {
    background-color: var(--surface-card);
}

.rt-chip__glyph {
    color: var(--rt-gold-deep);
    font-family: var(--font-display);
}

/* --------------------------------------------------------------------------------------------------
   Chart detail (D3–D8): header, identity chips, section frame
   -------------------------------------------------------------------------------------------------- */

.rt-chart-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-3);
    padding: 0;
    list-style: none;
}

.rt-chart-frame .rt-status-banner {
    margin-bottom: var(--sp-3);
}

/* D3 — the grahas card: rows in an auto-fill grid of 300 px columns, one card. */
.rt-graha-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    column-gap: var(--sp-6);
    margin: 0;
    padding: var(--sp-1) var(--sp-4);
    list-style: none;
}

.rt-graha-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 0.8px solid var(--border-default);
    font-size: var(--fs-sub);
}

.rt-graha-row__glyph {
    flex: none;
    width: var(--sp-6);
    color: var(--rt-gold-deep);
    font-family: var(--font-display);
    font-size: var(--fs-card-title);
    text-align: center;
}

.rt-graha-row__main {
    flex: 1 1 auto;
    min-width: 0;
}

.rt-graha-row__name {
    color: var(--text-heading);
    font-weight: 700;
}

.rt-graha-row__sign {
    color: var(--text-muted);
}

.rt-graha-row__deg {
    display: block;
    color: var(--text-muted);
    font-size: var(--fs-meta);
    font-variant-numeric: tabular-nums;
}

.rt-graha-row__badges {
    display: inline-flex;
    flex: none;
    gap: var(--sp-1);
}

/* D4 — the cusp column. */
.rt-house-table__cusp {
    width: 1%;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* D5 — the varga pill row sits above one card holding the tile and the table side by side. */
.rt-varga-pills {
    margin-bottom: var(--sp-3);
}

.rt-varga-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: var(--sp-2) var(--sp-6);
    align-items: start;
}

.rt-varga-body .chart-tile canvas {
    max-width: 100%;
    height: auto;
}

/* D6 — the StrengthBar gains the name, a dignity badge and a tone per strength band (AB#2031).
   --------------------------------------------------------------------------------------------------
   The badge slot is sized to the LONGEST dignity label, not to a typical one (AB#2181): 11em at
   --fs-meta (132 px) holds "Deep Debilitation" (8.75em of text plus the badge's 2 x --sp-3 padding)
   with a few pixels to spare, and being in em it tracks the badge's own font size. Every row in a
   column gets the same slot, so the bars still start at one x. The labels come from
   PlanetaryStrengthGrader.DignityLabel(); a longer one added there must widen this slot.

   The grid keeps the design system's 300 px auto-fill minimum. A column too narrow for the single
   line - glyph 24 + name 64 + slot 132 + value 32 + a 48 px bar + four 12 px gaps = 348 px - wraps
   each row onto two lines instead (the container query below): glyph, name and badge on the first,
   the bar and the percentage beneath, so the bar never drops under 48 px and the badge is never cut.

   The ellipsis on the badge is a safety net only (a fallback font wider than Albert Sans). It renders
   because the badge is a block box here rather than the inline-flex it is elsewhere: a flex container
   cannot ellipsize the anonymous item that holds its text, it can only hard-cut it. */
.rt-strength-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    column-gap: var(--sp-6);
    margin: 0;
    padding: var(--sp-2) var(--sp-4);
    list-style: none;
}

.rt-strength-list .rt-strength-bar {
    flex-wrap: wrap;
    row-gap: var(--sp-1);
    border-bottom: 0.8px solid var(--border-default);
    container: rt-strength-row / inline-size;
}

.rt-strength-bar__name {
    flex: none;
    width: 64px;
    overflow: hidden;
    color: var(--text-heading);
    font-size: var(--fs-sub);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rt-strength-bar__badge {
    display: inline-flex;
    flex: none;
    justify-content: center;
    width: 11em;
    font-size: var(--fs-meta);
}

.rt-strength-bar__badge .rt-badge {
    display: block;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The two-line row for a column under 348 px (see the D6 note). The name takes the free space, which
   keeps the badge slot at one x on the trailing edge, the badge itself at the slot's end above the
   percentage. The track's basis leaves room for the glyph indent and the percentage, so it cannot fit
   beside the badge and drops to the second line, where it grows. */
@container rt-strength-row (width < 348px) {
    .rt-strength-list .rt-strength-bar__name {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .rt-strength-list .rt-strength-bar__badge {
        justify-content: flex-end;
    }

    .rt-strength-list .rt-strength-bar__track {
        flex: 1 1 calc(100% - var(--sp-6) - 2 * var(--sp-3) - 2 * var(--sp-8));
        margin-inline-start: calc(var(--sp-6) + var(--sp-3));
    }
}

.rt-strength-bar__fill--good {
    background-color: var(--rt-good);
}

.rt-strength-bar__fill--gold {
    background-color: var(--rt-gold);
}

.rt-strength-bar__fill--bad {
    background-color: var(--rt-bad);
}

/* --------------------------------------------------------------------------------------------------
   D7 — Dasa (AB#2032): the current-Mahādaśā hero, the band card and the Mahādaśā accordion. The
   accordion is native <details>; the antardaśā rows keep the dasa-timeline.js island's .dasa-row
   anatomy (styled in dasa-timeline.css) and add their own dot, meter and state.
   -------------------------------------------------------------------------------------------------- */

.rt-dasa-top {
    margin-bottom: var(--sp-4);
}

.rt-section-head--flush {
    margin: 0 0 var(--sp-2);
}

.rt-dasa-hero__head {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.rt-dasa-hero__disc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--rt-hero-chip);
    color: var(--rt-gold);
    font-family: var(--font-display);
    font-size: var(--fs-title);
}

.rt-dasa-hero__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rt-dasa-hero__title {
    font-family: var(--font-display);
    font-size: var(--fs-title);
    font-weight: 700;
    line-height: var(--lh-display);
    color: var(--rt-hero-title);
}

.rt-dasa-hero__range {
    font-size: var(--fs-meta);
}

.rt-dasa-hero .rt-hero-divider {
    margin: var(--sp-3) 0;
}

.rt-dasa-hero__antar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
    font-size: var(--fs-sub);
}

.rt-dasa-hero__antar b {
    color: var(--rt-hero-title);
}

/* The hero's Now pill is saffron on the dark ground, as the canvas draws it; the ink is the hero ground,
   which does not flip with the theme. */
.rt-dasa-now {
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: var(--sp-1);
    padding: 2px var(--sp-2);
    border-radius: var(--r-pill);
    background-color: var(--rt-gold);
    color: var(--rt-hero-bg);
    font-size: var(--fs-meta);
    font-weight: 700;
}

.rt-dasa-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

.rt-chip--hero.rt-chip--label:hover {
    background-color: var(--rt-hero-chip);
}

.rt-dasa-accordion {
    padding: var(--sp-1) var(--sp-4);
}

.rt-md-group {
    border-bottom: 0.8px solid var(--border-default);
}

.rt-md-group__head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--hit-target);
    padding: var(--sp-2) 0;
    color: var(--text-body);
    cursor: pointer;
    list-style: none;
}

.rt-md-group__head::-webkit-details-marker {
    display: none;
}

.rt-md-group__disc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--rt-lord);
    color: var(--rt-lord-ink);
    font-family: var(--font-display);
    font-size: var(--fs-body);
}

.rt-md-group__name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-heading);
    font-size: var(--fs-body);
    font-weight: 700;
}

.rt-md-group__range {
    color: var(--text-muted);
    font-size: var(--fs-meta);
    white-space: nowrap;
}

.rt-md-group__chev {
    color: var(--text-muted);
    font-size: var(--fs-eyebrow);
    transition: transform var(--dur-fast) var(--ease-out);
}

.rt-md-group[open] > .rt-md-group__head .rt-md-group__chev {
    transform: rotate(180deg);
}

.rt-md-group__antars {
    padding: 0 0 var(--sp-2) 42px;
}

.rt-ad__dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--rt-lord);
}

.rt-lord--pending .rt-ad__dot {
    box-shadow: inset 0 0 0 1px var(--text-muted);
}

.rt-ad__name {
    flex: 1 1 auto;
    min-width: 0;
}

.rt-ad--past .rt-ad__name {
    color: var(--text-muted);
    font-weight: 400;
}

.rt-ad--current .rt-ad__name {
    color: var(--text-heading);
    font-weight: 700;
}

.rt-ad--future .rt-ad__name {
    color: var(--text-body);
    font-weight: 600;
}

.rt-ad__meter {
    flex: none;
    width: 64px;
    height: 5px;
    overflow: hidden;
    border-radius: var(--r-pill);
    background-color: var(--surface-sunken);
}

.rt-ad__fill {
    display: block;
    width: var(--rt-meter-pct, 0%);
    height: 100%;
    border-radius: var(--r-pill);
    background-color: var(--rt-accent);
}

.rt-ad__range {
    color: var(--text-muted);
    font-size: var(--fs-meta);
    white-space: nowrap;
}

.rt-dasa-accordion__foot {
    padding: var(--sp-2) 0 var(--sp-3);
}

@media (prefers-reduced-motion: reduce) {
    .rt-md-group__chev {
        transition: none;
    }
}

/* Narrow phones: the antardaśā rows wrap their range under the name rather than scroll sideways. */
@media (max-width: 575.98px) {
    .rt-md-group__antars {
        padding-left: var(--sp-4);
    }

    .rt-dasa-tree .rt-ad {
        flex-wrap: wrap;
        row-gap: 0;
    }

    .rt-ad__range {
        flex-basis: 100%;
        padding-left: var(--sp-4);
    }
}

/* --------------------------------------------------------------------------------------------------
   C1 / C1b — Home (AB#2029). One column below 1280 px (the SignCard full width at 4:5 below 900 px,
   230 px at 2:3 beside the hero from 900 px); from 1280 px the canvas's two columns,
   minmax(0,1.25fr) minmax(0,1fr).
   -------------------------------------------------------------------------------------------------- */

.rt-home-head {
    margin-bottom: var(--sp-3);
}

.rt-home-head .rt-eyebrow {
    margin: 0;
}

.rt-home-head__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-title);
    font-weight: 700;
    color: var(--text-heading);
}

.rt-home-head__sub {
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-sub);
    color: var(--text-muted);
}

.rt-home {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4) var(--sp-5);
    align-items: start;
}

.rt-home__identity {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    align-items: stretch;
}

.rt-home-hero {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding-block: var(--sp-2) var(--sp-4);
}

.rt-home-hero__rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rt-home-hero__rows .rt-sign-row {
    padding: var(--sp-3) 0;
    border-bottom: 0.8px solid var(--rt-hero-line);
}

.rt-home-hero__rows .rt-sign-row:last-child {
    border-bottom: 0;
}

.rt-home-hero .rt-sign-row__glyph {
    width: 36px;
    height: 36px;
    font-size: var(--fs-card-title);
}

.rt-sign-row__main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--sp-2);
    min-width: 0;
}

.rt-sign-row__main .rt-hero-card__eyebrow {
    flex-basis: 100%;
}

.rt-sign-row__name {
    font-family: var(--font-display);
    font-size: var(--fs-body);
    font-weight: 700;
    color: var(--rt-hero-title);
}

.rt-sign-row__gloss {
    font-size: var(--fs-meta);
}

/* AB#2168: the Western footnote under the rows, "Lagna and Rāśi use the sidereal zodiac (Lahiri)". The
   rt-footnote size on the hero ground, so it takes the hero's body colour rather than --text-muted. */
.rt-home-hero__note {
    color: var(--rt-hero-text);
}

.rt-home-hero__open {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: auto;
    padding-top: var(--sp-3);
    font-size: var(--fs-sub);
    font-weight: 700;
}

.rt-hero-card a.rt-home-hero__open {
    color: var(--rt-hero-title);
}

.rt-home__readings {
    gap: var(--sp-3);
}

.rt-home__quick,
.rt-home__today {
    margin: var(--sp-4) 0;
}

@media (min-width: 900px) {
    .rt-home__identity {
        flex-direction: row;
    }

    .rt-home__identity .rt-sign-card {
        flex: none;
    }
}

@media (min-width: 1280px) {
    .rt-home {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    }
}
/* --------------------------------------------------------------------------------------------------
   D1 — People (AB#2030): chart rows in one flush card, the archived section at reduced opacity, and a
   quiet text button for "Delete a chart…".
   -------------------------------------------------------------------------------------------------- */

.rt-people {
    margin-bottom: var(--sp-3);
}

.rt-people .rt-list-row__title {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

.rt-people__eyebrow {
    margin: var(--sp-4) 0 var(--sp-2);
}

.rt-people--archived {
    opacity: .78;
}

.rt-people__restore {
    font-size: var(--fs-meta);
    font-weight: 700;
    color: var(--rt-link);
}

/* A quiet text action - the canvas's "Delete a chart…" - with the full touch target. */
.rt-text-button {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--hit-target);
    padding: 0 var(--sp-1);
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: var(--fs-sub);
    font-weight: 700;
    cursor: pointer;
}

.rt-text-button:hover {
    color: var(--text-heading);
}

.rt-dialog .rt-list-row {
    padding-inline: 0;
}

/* D9a — add a chart at the limit (AB#2030). The disc takes the tier's tint, as the meter does. */
.rt-limit-card {
    margin-bottom: var(--sp-4);
    padding: var(--sp-6) var(--sp-4);
    text-align: center;
}

.rt-limit-card__disc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--rt-olive-soft);
    color: var(--tier-free);
    font-size: var(--fs-title);
}

.rt-limit-card--premium .rt-limit-card__disc {
    background-color: var(--rt-accent-soft);
    color: var(--tier-premium);
}

.rt-limit-card--professional .rt-limit-card__disc {
    background-color: var(--rt-gold-soft);
    color: var(--tier-pro);
}

.rt-limit-card__title {
    margin: var(--sp-3) 0 var(--sp-1);
    font-family: var(--font-display);
    font-size: var(--fs-card-title);
    font-weight: 700;
    color: var(--text-heading);
}

.rt-limit-card__text {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-sub);
    color: var(--text-muted);
}

.rt-limit-card .rt-allowance-meter {
    text-align: left;
}

.rt-limit-actions {
    gap: var(--sp-2);
}

/* D9b — edit chart (AB#2030): the full-width primary and the bad-outlined ghost under the form. */
.rt-form-actions {
    gap: var(--sp-2);
    margin-top: var(--sp-5);
}

.rt-button--bad-outline {
    border-color: var(--rt-bad-bg);
    color: var(--rt-bad);
}

.rt-button--bad-outline:hover,
.rt-button--bad-outline:focus-visible {
    border-color: var(--rt-bad);
    color: var(--rt-bad);
}

/* --------------------------------------------------------------------------------------------------
   B2 — Preparing your chart (AB#2035). The pulse and the bar are decoration over an honest
   "Processing"; both stop under prefers-reduced-motion. The fill is FLAT (ProgressMeter ruling).
   -------------------------------------------------------------------------------------------------- */

.rt-preparing {
    padding: var(--sp-8) var(--sp-2) 0;
    text-align: center;
}

.rt-preparing__glyph {
    display: inline-block;
    color: var(--rt-gold-deep);
    font-family: var(--font-display);
    font-size: var(--fs-display);
    line-height: 1;
    animation: rt-preparing-pulse 2s ease-in-out infinite;
}

.rt-preparing__title {
    margin: var(--sp-3) 0 var(--sp-1);
    font-family: var(--font-display);
    font-size: var(--fs-title);
    font-weight: 700;
    color: var(--text-heading);
}

.rt-preparing__text {
    margin: 0;
    font-size: var(--fs-sub);
    color: var(--text-muted);
}

.rt-preparing__track {
    height: var(--sp-2);
    margin: var(--sp-6) var(--sp-1) var(--sp-2);
    overflow: hidden;
    border-radius: var(--r-pill);
    background-color: var(--surface-sunken);
}

.rt-preparing__fill {
    display: block;
    width: 90%;
    height: 100%;
    border-radius: var(--r-pill);
    background-color: var(--rt-accent);
    animation: rt-preparing-bar 4s var(--ease-out) forwards;
}

.rt-preparing__know {
    margin-top: var(--sp-6);
}

.rt-preparing__actions {
    margin-top: var(--sp-6);
}

@keyframes rt-preparing-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .55; transform: scale(.92); }
}

@keyframes rt-preparing-bar {
    from { width: 4%; }
    to { width: 90%; }
}

@media (prefers-reduced-motion: reduce) {
    .rt-preparing__glyph,
    .rt-preparing__fill {
        animation: none;
    }
}

/* --------------------------------------------------------------------------------------------------
   B1 — the chart wizard (AB#2035): relationship pills, the low-precision note shown by :has(:checked)
   (no script decides it), the Review card and the Back / Create pair. One PRG form throughout.
   -------------------------------------------------------------------------------------------------- */

.rt-pill-choice {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.rt-pill-choice__optional {
    color: var(--text-muted);
    font-weight: 400;
}

.rt-pill-choice__options {
    display: flex;
    gap: var(--sp-2);
}

.rt-pill-choice__option {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border: 0.8px solid var(--border-default);
    border-radius: var(--r-pill);
    background-color: var(--surface-card);
    color: var(--text-body);
    font-size: var(--fs-sub);
    font-weight: 600;
    cursor: pointer;
}

.rt-pill-choice__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.rt-pill-choice__option:has(input:checked) {
    border-color: var(--rt-accent);
    background-color: var(--rt-accent);
    color: var(--rt-on-accent);
}

.rt-pill-choice__option:has(input:focus-visible) {
    outline: 3px solid var(--rt-gold);
    outline-offset: 2px;
}

.rt-pill-choice:disabled .rt-pill-choice__option {
    cursor: not-allowed;
    opacity: .6;
}

.rt-wizard-unsure__note {
    display: none;
    margin-top: var(--sp-2);
}

.rt-wizard-unsure:has(.rt-switch__control:checked) .rt-wizard-unsure__note {
    display: block;
}

.rt-wizard-review {
    margin-top: var(--sp-4);
}

.rt-wizard-review__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-card-title);
    font-weight: 700;
    color: var(--text-heading);
}

.rt-wizard-review__line {
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-sub);
    color: var(--text-muted);
}

.rt-wizard-actions {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
}

.rt-wizard-actions .rt-button--ghost {
    flex: 1 1 0;
}

.rt-wizard-actions .rt-button--accent {
    flex: 2 1 0;
}

/* --------------------------------------------------------------------------------------------------
   Today teaser and About (AB#2036): a centred glyph, title and line above a flush card of rows.
   -------------------------------------------------------------------------------------------------- */

.rt-teaser {
    padding: var(--sp-8) var(--sp-5) var(--sp-6);
    text-align: center;
}

.rt-teaser--compact {
    padding: var(--sp-5) 0 var(--sp-4);
}

.rt-teaser__glyph {
    color: var(--rt-gold-deep);
    font-family: var(--font-display);
    font-size: var(--fs-display);
    line-height: 1;
}

.rt-teaser__title {
    margin: var(--sp-2) 0 var(--sp-1);
    font-family: var(--font-display);
    font-size: var(--fs-title);
    font-weight: 700;
    color: var(--text-heading);
}

.rt-teaser__text {
    margin: 0;
    font-size: var(--fs-sub);
    color: var(--text-muted);
}

.rt-teaser__eyebrow {
    margin: 0;
    padding: var(--sp-4) var(--sp-4) var(--sp-1);
}

/* --------------------------------------------------------------------------------------------------
   Account F1, F3, F7 (AB#2037): the identity + plan pair, the danger-bordered row card, the linked
   sign-in rows' text actions, and the "What deletion means" list.
   -------------------------------------------------------------------------------------------------- */

.rt-account-cards {
    margin-bottom: var(--sp-4);
}

.rt-account-id {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

/* The canvas's 56 px identity disc - the largest avatar, on the account card only. */
.rt-avatar--hero { --rt-avatar-size: 56px; }

.rt-account-id__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rt-account-id__name {
    font-family: var(--font-display);
    font-size: var(--fs-card-title);
    font-weight: 700;
    color: var(--text-heading);
    overflow-wrap: anywhere;
}

.rt-account-id__email {
    font-size: var(--fs-sub);
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.rt-account-plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.rt-account-plan__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
}

.rt-account-plan__usage {
    font-size: var(--fs-sub);
    color: var(--text-muted);
}

/* A card whose hairline is the bad tint - the Delete account row on F1. */
.rt-card--danger {
    border-color: var(--rt-bad-bg);
}

.rt-card__eyebrow--bad {
    color: var(--rt-bad);
}

.rt-delete-points {
    margin: var(--sp-2) 0 0;
    padding-left: var(--sp-5);
    font-size: var(--fs-sub);
    color: var(--text-body);
}

.rt-delete-points li + li {
    margin-top: var(--sp-2);
}

.rt-delete-points li::marker {
    color: var(--rt-bad);
}

/* The link-ink text action - F3's Disconnect / Change. */
.rt-text-button--link {
    color: var(--rt-link);
    text-decoration: none;
}

.rt-text-button--link:hover {
    color: var(--rt-link);
    text-decoration: underline;
}

.rt-signins .rt-list-row__trailing form {
    display: inline-flex;
    margin: 0;
}

/* --------------------------------------------------------------------------------------------------
   Subscription F4, Plans F5, Billing F6 (AB#2038): the current-plan hero (the HeroCard ground with a
   price on the right and a hero hairline), the disabled-CTA tooltip wrapper, the downgrade guard's
   actions, and the receipts table.
   -------------------------------------------------------------------------------------------------- */

.rt-plan-hero__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
}

.rt-plan-hero__price {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-title);
    font-weight: 700;
    color: var(--rt-hero-title);
    white-space: nowrap;
}

.rt-plan-hero__period {
    margin-left: var(--sp-1);
    font-family: var(--font-body);
    font-size: var(--fs-meta);
    font-weight: 400;
    color: var(--rt-hero-text);
}

.rt-plan-hero__rule {
    margin: var(--sp-3) 0;
    border: 0;
    border-top: 0.8px solid var(--rt-hero-line);
    opacity: 1;
}

.rt-plan-hero__usage {
    margin: 0;
    font-size: var(--fs-sub);
    color: var(--rt-hero-text);
}

.rt-plan-hero__usage + .rt-plan-hero__usage {
    margin-top: var(--sp-1);
}

/* The disabled CTA's tooltip lives on this wrapper - a disabled button fires no pointer events. */
.rt-plan-card__cta {
    display: flex;
    flex: 1 1 auto;
}

.rt-plans .rt-plan-card {
    height: 100%;
}

.rt-downgrade__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.rt-downgrade__actions .rt-button {
    flex: 1 1 0;
}

.rt-billing__table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: var(--fs-sub);
}

.rt-billing__table th,
.rt-billing__table td {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 0.8px solid var(--border-default);
    text-align: left;
    vertical-align: middle;
}

.rt-billing__table tbody tr:last-child td {
    border-bottom: 0;
}

.rt-billing__table thead th {
    background-color: var(--surface-sunken);
    color: var(--text-muted);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
}

.rt-billing__table .rt-billing__amount {
    text-align: right;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------------------------------
   Settings G1, G2, G3 (AB#2039): the segmented control's radio pills (theme and chart style), the
   settings cards, the gold lock, the calculation label row and the switch list.
   -------------------------------------------------------------------------------------------------- */

/* Options share the row equally - the settings pickers. */
.rt-segmented--fill {
    display: flex;
    width: 100%;
}

.rt-segmented--fill .rt-segmented__option {
    flex: 1 1 0;
}

/* Radio mode: a native radio inside each pill, visually hidden but still focusable and posted. */
.rt-segmented--radio .rt-segmented__option {
    position: relative;
    gap: var(--sp-2);
}

.rt-segmented__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.rt-segmented--radio .rt-segmented__option:has(.rt-segmented__input:checked) {
    background-color: var(--rt-accent);
    color: var(--rt-on-accent);
}

.rt-segmented--radio .rt-segmented__option:has(.rt-segmented__input:focus-visible) {
    outline: 3px solid var(--rt-gold);
    outline-offset: 2px;
}

.rt-settings-card__title {
    margin: 0 0 var(--sp-3);
    font-family: var(--font-display);
    font-size: var(--fs-card-title);
    font-weight: 700;
    color: var(--text-heading);
}

.rt-settings-card__label {
    margin: var(--sp-4) 0 var(--sp-2);
    font-size: var(--fs-sub);
    font-weight: 600;
    color: var(--text-heading);
}

/* The gold lock beside a Professional-gated setting - G1's row and G2's labels. */
.rt-settings-lock {
    margin-left: var(--sp-1);
    color: var(--rt-gold-deep);
    font-size: var(--fs-meta);
}

.rt-calc-card__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}

.rt-calc-card .rt-select-field + .rt-select-field {
    padding-top: var(--sp-3);
    border-top: 0.8px solid var(--border-default);
}

.rt-switch-list {
    padding-block: var(--sp-1);
}

.rt-switch-list .rt-switch + .rt-switch {
    border-top: 0.8px solid var(--border-default);
}