@import 'RoundTuit.Web.Client.ww9o345pzk.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
main[b-y3u1k9pfaj] {
    flex: 1;
}

@media (min-width: 641px) {
    article[b-y3u1k9pfaj] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-y3u1k9pfaj] {
    color-scheme: light only;
    background: var(--rt-color-error-banner-bg);
    bottom: 0;
    box-shadow: var(--rt-shadow-error-banner);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-y3u1k9pfaj] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NotificationBell.razor.rz.scp.css */
/* ── Notification Bell ──────────────────────────────────────────────────── */

.rt-notification-bell[b-s2ex4fc1jn] {
    position: relative;
}

.rt-notification-btn[b-s2ex4fc1jn] {
    position: relative;
    color: var(--rt-color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--rt-radius-full);
    transition: color 0.15s, background 0.15s;
}

.rt-notification-btn:hover[b-s2ex4fc1jn] {
    color: var(--rt-color-text);
    background: rgba(255, 255, 255, 0.07);
}

.rt-notification-icon svg[b-s2ex4fc1jn] {
    width: 1.25rem;
    height: 1.25rem;
}

/* Unread badge */
.rt-notification-badge[b-s2ex4fc1jn] {
    position: absolute;
    top: 0.15rem;
    right: 0.1rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.2rem;
    background: var(--rt-color-danger);
    color: #fff;
    border-radius: var(--rt-radius-full);
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

/* ── Dropdown Panel ─────────────────────────────────────────────────────── */

.rt-notification-panel[b-s2ex4fc1jn] {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    width: 22rem;
    max-height: 28rem;
    overflow-y: auto;
    background: rgba(11, 17, 32, 0.98);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: var(--rt-radius-md);
    box-shadow: var(--rt-shadow-md);
    z-index: 200;
    display: flex;
    flex-direction: column;
}

.rt-notification-panel-header[b-s2ex4fc1jn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--rt-space-3) var(--rt-space-4);
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    flex-shrink: 0;
}

.rt-notification-panel-title[b-s2ex4fc1jn] {
    font-size: var(--rt-text-sm);
    font-weight: 600;
    color: var(--rt-color-text);
}

.rt-notification-mark-all[b-s2ex4fc1jn] {
    font-size: var(--rt-text-xs);
    padding: var(--rt-space-1) var(--rt-space-2);
    color: var(--rt-color-primary);
}

.rt-notification-empty[b-s2ex4fc1jn] {
    padding: var(--rt-space-5) var(--rt-space-4);
    text-align: center;
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text-muted);
}

/* ── Notification List ──────────────────────────────────────────────────── */

.rt-notification-list[b-s2ex4fc1jn] {
    list-style: none;
    padding: var(--rt-space-1) 0;
    margin: 0;
}

.rt-notification-item[b-s2ex4fc1jn] {
    display: flex;
    align-items: flex-start;
    gap: var(--rt-space-2);
    padding: var(--rt-space-1) var(--rt-space-2);
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    transition: background 0.12s;
}

.rt-notification-item:last-child[b-s2ex4fc1jn] {
    border-bottom: none;
}

.rt-notification-item--unread[b-s2ex4fc1jn] {
    background: rgba(37, 99, 235, 0.07);
}

.rt-notification-item:hover[b-s2ex4fc1jn] {
    background: rgba(37, 99, 235, 0.12);
}

.rt-notification-item-content[b-s2ex4fc1jn] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--rt-space-1);
    text-align: left;
    background: none;
    border: none;
    padding: var(--rt-space-2);
    cursor: pointer;
    min-width: 0;
    border-radius: var(--rt-radius-sm);
}

.rt-notification-item-title[b-s2ex4fc1jn] {
    font-size: var(--rt-text-sm);
    font-weight: 600;
    color: var(--rt-color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rt-notification-item-body[b-s2ex4fc1jn] {
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text-muted);
    overflow-wrap: break-word;
    line-height: 1.4;
}

.rt-notification-item-time[b-s2ex4fc1jn] {
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text-muted);
    opacity: 0.7;
}

/* Dismiss button */
.rt-notification-dismiss[b-s2ex4fc1jn] {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--rt-color-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: var(--rt-space-2) var(--rt-space-2);
    border-radius: var(--rt-radius-sm);
    opacity: 0.5;
    align-self: center;
    transition: opacity 0.15s, color 0.15s;
}

.rt-notification-dismiss:hover[b-s2ex4fc1jn] {
    opacity: 1;
    color: var(--rt-color-danger);
}
/* /ExpensesModule/Components/ExpenseDetailDialog.razor.rz.scp.css */
/* One-off: the detail panel is a column of short label/value pairs. .rt-modal sets only a
   min-width and a 90vw cap, so on a desktop the shrink-to-fit runs all the way to the cap
   and strands every value a screen-width away from its label. */
.rt-expense-detail[b-bx2wqx6cfj] {
    width: min(32rem, 90vw);
}
/* /GroupsModule/Groups/Components/InvitePanel.razor.rz.scp.css */
/* ── Invitation History ─────────────────────────────────────────────────── */

.rt-invite-history-toggle[b-s62taf2rfh] {
    font-size: var(--rt-text-xs);
    padding: var(--rt-space-1) var(--rt-space-2);
}

.rt-invite-history-empty[b-s62taf2rfh] {
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text-muted);
    margin: 0;
}

.rt-invite-history[b-s62taf2rfh] {
    display: flex;
    flex-direction: column;
    gap: var(--rt-space-2);
}

.rt-invite-history-row[b-s62taf2rfh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rt-space-3);
    padding: var(--rt-space-2) var(--rt-space-3);
    background: var(--rt-color-overlay-subtle);
    border: 1px solid var(--rt-color-border-subtle);
    border-radius: var(--rt-radius-sm);
    min-width: 0;
}

.rt-invite-history-info[b-s62taf2rfh] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.rt-invite-history-email[b-s62taf2rfh] {
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rt-invite-history-email--link[b-s62taf2rfh] {
    color: var(--rt-color-text-muted);
    font-style: italic;
}

.rt-invite-history-date[b-s62taf2rfh] {
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text-muted);
}

/* ── Status badge ───────────────────────────────────────────────────────── */

.rt-invite-status[b-s62taf2rfh] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: var(--rt-radius-full);
    font-size: var(--rt-text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.rt-invite-status--pending[b-s62taf2rfh] {
    background: var(--rt-color-warning-soft);
    color: var(--rt-color-warning);
}

.rt-invite-status--accepted[b-s62taf2rfh] {
    background: var(--rt-color-success-soft);
    color: var(--rt-color-success);
}

.rt-invite-status--expired[b-s62taf2rfh] {
    background: var(--rt-color-muted-soft);
    color: var(--rt-color-text-muted);
}

.rt-invite-status--rejected[b-s62taf2rfh] {
    background: var(--rt-color-danger-soft);
    color: var(--rt-color-danger);
}
/* /GroupsModule/Groups/Pages/JoinGroup.razor.rz.scp.css */
/* ── Join/welcome page scoped styles ─────────────────────────────────────── */

/* Large icon badge used at the top of each welcome card */
.join-icon[b-ky0lapb8n6] {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.5rem;
}

/* Numbered step list for the "new user" signup card (State C) */
.join-step-list[b-ky0lapb8n6] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rt-space-3);
    text-align: left;
}

.join-step-list li[b-ky0lapb8n6] {
    display: flex;
    align-items: center;
    gap: var(--rt-space-3);
    color: var(--rt-color-text-muted);
    font-size: var(--rt-text-sm);
}

.join-step-number[b-ky0lapb8n6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--rt-radius-full);
    background: rgba(37, 99, 235, 0.15);
    color: #60a5fa;
    font-size: var(--rt-text-xs);
    font-weight: 600;
    flex-shrink: 0;
}

/* Dual CTA layout for the link/QR code card (State D) */
.join-dual-cta[b-ky0lapb8n6] {
    display: flex;
    flex-direction: column;
    gap: var(--rt-space-3);
    align-items: stretch;
}

@media (min-width: 400px) {
    .join-dual-cta[b-ky0lapb8n6] {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
}

/* Email hint chip shown in State B */
.join-email-chip[b-ky0lapb8n6] {
    display: inline-block;
    padding: var(--rt-space-1) var(--rt-space-3);
    border-radius: var(--rt-radius-full);
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.25);
    color: #93c5fd;
    font-size: var(--rt-text-sm);
    word-break: break-all;
}
/* /ListsModule/Components/TemplateCard.razor.rz.scp.css */
.template-card[b-fh2k2duqnb] { transition: box-shadow 0.15s; }
.template-card:hover[b-fh2k2duqnb] { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.template-card h6[b-fh2k2duqnb] { cursor: pointer; }
.template-card h6:hover[b-fh2k2duqnb] { text-decoration: underline; }
/* /ListsModule/Pages/ManageCategories.razor.rz.scp.css */
.color-picker[b-1hcpti6a3z] {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: none;
}

.color-swatch[b-1hcpti6a3z] {
    color: #fff;
    min-width: 2rem;
}

.order-input[b-1hcpti6a3z] {
    width: 5rem;
}

.new-type-input[b-1hcpti6a3z] {
    max-width: 14rem;
}

.category-row:last-child[b-1hcpti6a3z] {
    border-bottom: none !important;
}

.edit-btn[b-1hcpti6a3z],
.delete-btn[b-1hcpti6a3z] {
    opacity: 0;
    transition: opacity 0.15s;
}

.category-row:hover .edit-btn[b-1hcpti6a3z],
.category-row:hover .delete-btn[b-1hcpti6a3z] {
    opacity: 1;
}
/* /RetirementModule/Components/BalanceCheckInDialog.razor.rz.scp.css */
/* Scoped to the check-in dialog. */

.rt-checkin-rows[b-27gkez5nuw] {
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-2);
}

/* Label and figure on one line: the form is a list of confirmations, not a set of questions,
   and stacking them would make four accounts look like four decisions. */
.rt-checkin-row[b-27gkez5nuw] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-space-3);
  min-inline-size: 0;
}

.rt-checkin-amount[b-27gkez5nuw] {
  max-inline-size: 11rem;
  flex-shrink: 0;
  text-align: end;
}

/* .rt-checkin-error lives in design-utilities.css — PlanSpending reuses it, and a scoped rule
   is rewritten to this component's attribute and would match nothing there. */

.rt-checkin-total[b-27gkez5nuw] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rt-space-3);
  margin-block-start: var(--rt-space-3);
  padding-block-start: var(--rt-space-3);
  border-block-start: 0.0625rem solid var(--rt-color-border-subtle);
}

@media (max-width: 36rem) {
  .rt-checkin-row[b-27gkez5nuw] {
    flex-direction: column;
    align-items: stretch;
    gap: var(--rt-space-1);
  }

  .rt-checkin-amount[b-27gkez5nuw] {
    max-inline-size: none;
  }
}
/* /RetirementModule/Components/GuardrailStatusCard.razor.rz.scp.css */
/* Scoped to the status card. These styles describe one component's internals and nothing else
   uses them, so they stay out of design-utilities.css. */

.rt-guardrail-status[b-y8a9o2e69l] {
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-2);
  padding: var(--rt-space-3);
  margin-block-start: var(--rt-space-3);
  border-radius: var(--rt-radius-sm);
  border-inline-start: 0.1875rem solid var(--rt-color-border-subtle);
  background: var(--rt-color-surface-alt);
}

/* The tone carries the whole message at a glance, so it is a colour AND a word in the headline —
   never colour alone, which says nothing to a third of readers on a bad monitor. */
.rt-guardrail-status--ok[b-y8a9o2e69l] {
  border-inline-start-color: var(--rt-color-success);
}

.rt-guardrail-status--raise[b-y8a9o2e69l] {
  border-inline-start-color: var(--rt-color-success);
}

.rt-guardrail-status--near[b-y8a9o2e69l] {
  border-inline-start-color: var(--rt-color-warning);
}

.rt-guardrail-status--breached[b-y8a9o2e69l] {
  border-inline-start-color: var(--rt-color-danger);
}

.rt-guardrail-status--stale[b-y8a9o2e69l] {
  border-inline-start-color: var(--rt-color-text-muted);
}

.rt-guardrail-status-line[b-y8a9o2e69l] {
  display: flex;
  align-items: center;
  gap: var(--rt-space-2);
}

.rt-guardrail-status-dot[b-y8a9o2e69l] {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--rt-color-text-muted);
}

.rt-guardrail-status--ok .rt-guardrail-status-dot[b-y8a9o2e69l],
.rt-guardrail-status--raise .rt-guardrail-status-dot[b-y8a9o2e69l] {
  background: var(--rt-color-success);
}

.rt-guardrail-status--near .rt-guardrail-status-dot[b-y8a9o2e69l] {
  background: var(--rt-color-warning);
}

.rt-guardrail-status--breached .rt-guardrail-status-dot[b-y8a9o2e69l] {
  background: var(--rt-color-danger);
}

.rt-guardrail-status-text[b-y8a9o2e69l] {
  font-weight: 600;
}

.rt-guardrail-status-bar[b-y8a9o2e69l] {
  position: relative;
  block-size: 0.375rem;
  border-radius: var(--rt-radius-sm);
  background: var(--rt-color-surface-hover);
  overflow: hidden;
}

/* Width arrives as a custom property rather than an inline style declaration: an inline width
   would outrank every stylesheet rule, so print, reduced-motion and narrow-screen overrides
   could never touch the bar again. */
.rt-guardrail-status-fill[b-y8a9o2e69l] {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--rt-bar-width, 0%);
  background: var(--rt-color-warning);
  border-radius: inherit;
}

.rt-guardrail-status--breached .rt-guardrail-status-fill[b-y8a9o2e69l] {
  background: var(--rt-color-danger);
}

.rt-guardrail-status-detail[b-y8a9o2e69l],
.rt-guardrail-status-meta[b-y8a9o2e69l] {
  font-size: var(--rt-text-sm);
  color: var(--rt-color-text-muted);
}
/* /RetirementModule/Pages/PlanAccounts.razor.rz.scp.css */
/* Account entry.

   Laid out as a grid rather than a table so the row can collapse to stacked fields on a phone
   without the usual table-on-mobile contortions, and so the per-row note and error line can sit
   underneath the fields they belong to. */

.rt-account-totals[b-vvzsdtt0aa] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--rt-space-3);
    margin-block-start: var(--rt-space-3);
}

.rt-account-total[b-vvzsdtt0aa] {
    padding: var(--rt-space-3);
    border-radius: var(--rt-radius-md);
    border: 0.0625rem solid var(--rt-color-border-subtle);
    background: var(--rt-color-surface);
}

.rt-account-total-label[b-vvzsdtt0aa] {
    font-size: var(--rt-text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rt-color-text-muted);
}

.rt-account-total-value[b-vvzsdtt0aa] {
    font-family: var(--rt-font-mono);
    font-size: var(--rt-text-lg);
    font-weight: 700;
    color: var(--rt-color-text);
}

.rt-account-total-share[b-vvzsdtt0aa] {
    font-family: var(--rt-font-mono);
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text-muted);
}

/* .rt-account-row / -field / -note / -error / -summary* and both @media blocks moved to
   design-utilities.css - PlanHousehold and PlanSpending use them too, and a scoped
   stylesheet only ever matched this component's own elements. */
/* /RetirementModule/Pages/PlanHistory.razor.rz.scp.css */
/* Historical replay. */

.rt-scenario-picker[b-sjkksfka4f] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rt-space-2);
    margin-block-start: var(--rt-space-3);
}

.rt-scenario-tab[b-sjkksfka4f] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    padding: var(--rt-space-2) var(--rt-space-3);
    border-radius: var(--rt-radius-md);
    border: 0.0625rem solid var(--rt-color-border-subtle);
    background: var(--rt-color-surface);
    color: var(--rt-color-text-muted);
    cursor: pointer;
    text-align: start;
}

.rt-scenario-tab:hover[b-sjkksfka4f] {
    background: var(--rt-color-surface-hover);
}

.rt-scenario-tab:focus-visible[b-sjkksfka4f] {
    outline: 0.125rem solid var(--rt-color-primary-focus-ring);
    outline-offset: 0.125rem;
}

.rt-scenario-tab--active[b-sjkksfka4f] {
    border-color: var(--rt-color-primary);
    background: var(--rt-color-primary-tint);
}

.rt-scenario-tab-name[b-sjkksfka4f] {
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text);
}

.rt-scenario-tab-years[b-sjkksfka4f] {
    font-family: var(--rt-font-mono);
    font-size: var(--rt-text-xs);
}

.rt-scenario-facts[b-sjkksfka4f] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--rt-space-3);
    margin-block-start: var(--rt-space-3);
}

.rt-scenario-fact[b-sjkksfka4f] {
    padding: var(--rt-space-3);
    border-radius: var(--rt-radius-md);
    background: var(--rt-color-surface-alt);
}

.rt-scenario-fact-value[b-sjkksfka4f] {
    font-family: var(--rt-font-mono);
    font-size: var(--rt-text-lg);
    font-weight: 700;
    color: var(--rt-color-text);
}

.rt-scenario-fact-label[b-sjkksfka4f] {
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text-muted);
}

/* The verdict, in sentences, before any chart. Green when the plan held, amber when it did not —
   amber rather than red because a plan that fails against the worst period in recorded history
   is information to act on, not a catastrophe that has occurred. */
.rt-verdict[b-sjkksfka4f] {
    margin-block-start: var(--rt-space-3);
    padding: var(--rt-space-4);
    border-radius: var(--rt-radius-md);
    border: 0.0625rem solid var(--rt-color-border-subtle);
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text);
    line-height: 1.6;
}

.rt-verdict--held[b-sjkksfka4f] {
    border-color: color-mix(in srgb, var(--rt-color-success) 35%, transparent);
    background: linear-gradient(160deg, var(--rt-color-success-soft), transparent 70%);
}

.rt-verdict--failed[b-sjkksfka4f] {
    border-color: color-mix(in srgb, var(--rt-color-warning) 40%, transparent);
    background: linear-gradient(160deg, var(--rt-color-warning-soft), transparent 70%);
}

/* ---- Balance chart ---- */

.rt-history-legend[b-sjkksfka4f] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rt-space-3);
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text-muted);
}

.rt-history-key[b-sjkksfka4f] {
    display: inline-block;
    inline-size: 0.75rem;
    block-size: 0.75rem;
    border-radius: var(--rt-radius-sm);
    vertical-align: middle;
}

.rt-history-key--above[b-sjkksfka4f] { background: var(--rt-color-success); }
.rt-history-key--within[b-sjkksfka4f] { background: var(--rt-color-primary); }
.rt-history-key--below[b-sjkksfka4f] { background: var(--rt-color-warning); }

.rt-history-chart[b-sjkksfka4f] {
    display: flex;
    align-items: flex-end;
    gap: 0.125rem;
    block-size: 13rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-block: var(--rt-space-2);
}

.rt-history-col[b-sjkksfka4f] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1 1 0;
    min-inline-size: 1rem;
    block-size: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    scroll-snap-align: center;
}

.rt-history-col:focus-visible[b-sjkksfka4f] {
    outline: 0.125rem solid var(--rt-color-primary-focus-ring);
    outline-offset: 0.125rem;
}

/* The height is the only thing the markup contributes, and it arrives as a custom property so the
   rule itself stays here rather than being scattered across inline attributes. */
.rt-history-bar[b-sjkksfka4f] {
    display: block;
    inline-size: 100%;
    block-size: var(--rt-bar-height, 0%);
    border-radius: var(--rt-radius-sm) var(--rt-radius-sm) 0 0;
    min-block-size: 0.0625rem;
}

/* The bar's colour IS the guardrail state, so a glance down the chart shows where the band was
   crossed. Never the only encoding — the aria-label names the state and the event list repeats
   every crossing in words. */
.rt-history-bar--above[b-sjkksfka4f] { background: var(--rt-color-success); }
.rt-history-bar--within[b-sjkksfka4f] { background: var(--rt-color-primary); }
.rt-history-bar--below[b-sjkksfka4f] { background: var(--rt-color-warning); }

.rt-history-col:hover .rt-history-bar[b-sjkksfka4f] {
    filter: brightness(1.25);
}

.rt-history-col--selected .rt-history-bar[b-sjkksfka4f] {
    outline: 0.125rem solid var(--rt-color-text);
    outline-offset: 0.0625rem;
}

/* A crossing gets a mark above the bar — the moment a decision was due. */
.rt-history-marker[b-sjkksfka4f] {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inline-size: 0.375rem;
    block-size: 0.375rem;
    border-radius: var(--rt-radius-full);
}

.rt-history-marker--above[b-sjkksfka4f] { background: var(--rt-color-success); }
.rt-history-marker--within[b-sjkksfka4f] { background: var(--rt-color-text-muted); }
.rt-history-marker--below[b-sjkksfka4f] { background: var(--rt-color-warning); }

.rt-history-tick[b-sjkksfka4f] {
    font-family: var(--rt-font-mono);
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text-muted);
    text-align: center;
    padding-block-start: var(--rt-space-1);
}

/* ---- Events ---- */

.rt-history-events[b-sjkksfka4f] {
    display: flex;
    flex-direction: column;
    gap: var(--rt-space-2);
}

.rt-history-event[b-sjkksfka4f] {
    display: grid;
    grid-template-columns: 4rem 5rem 1fr auto;
    align-items: center;
    gap: var(--rt-space-3);
    padding: var(--rt-space-2) var(--rt-space-3);
    border-radius: var(--rt-radius-sm);
    border-inline-start: 0.1875rem solid var(--rt-color-border-subtle);
    background: var(--rt-color-surface);
    font-size: var(--rt-text-sm);
}

.rt-history-event--below[b-sjkksfka4f] { border-inline-start-color: var(--rt-color-warning); }
.rt-history-event--above[b-sjkksfka4f] { border-inline-start-color: var(--rt-color-success); }
.rt-history-event--within[b-sjkksfka4f] { border-inline-start-color: var(--rt-color-text-muted); }

.rt-history-event-year[b-sjkksfka4f] {
    font-family: var(--rt-font-mono);
    font-weight: 700;
    color: var(--rt-color-text);
}

.rt-history-event-age[b-sjkksfka4f],
.rt-history-event-balance[b-sjkksfka4f] {
    font-family: var(--rt-font-mono);
    color: var(--rt-color-text-muted);
}

.rt-history-event-balance[b-sjkksfka4f] {
    text-align: end;
    color: var(--rt-color-text);
}

@media (max-width: 48rem) {
    .rt-history-chart[b-sjkksfka4f] {
        block-size: 10rem;
    }

    .rt-history-col[b-sjkksfka4f] {
        min-inline-size: 1.5rem;
    }

    .rt-history-event[b-sjkksfka4f] {
        grid-template-columns: 4rem 1fr auto;
    }

    .rt-history-event-age[b-sjkksfka4f] {
        display: none;
    }
}
/* /RetirementModule/Pages/PlanIncome.razor.rz.scp.css */
/* Income sources by year. */

/* The bridge statement sits above the chart because it is the conclusion, and the chart is the
   evidence. Amber: an expensive stretch is not a fault, it is a fact to plan around. */
.rt-bridge[b-b8wejaxajr] {
    margin-block-start: var(--rt-space-3);
    padding: var(--rt-space-4);
    border-radius: var(--rt-radius-md);
    border: 0.0625rem solid color-mix(in srgb, var(--rt-color-warning) 30%, transparent);
    background: linear-gradient(160deg, var(--rt-color-warning-soft), transparent 70%);
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text);
}

.rt-bridge-head[b-b8wejaxajr] {
    font-size: var(--rt-text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rt-color-text-muted);
    margin-block-end: var(--rt-space-2);
}

.rt-income-chart[b-b8wejaxajr] {
    display: flex;
    align-items: flex-end;
    gap: 0.125rem;
    block-size: 14rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-block: var(--rt-space-2);
}

.rt-income-col[b-b8wejaxajr] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1 1 0;
    min-inline-size: 1rem;
    block-size: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    scroll-snap-align: center;
}

.rt-income-col:focus-visible[b-b8wejaxajr] {
    outline: 0.125rem solid var(--rt-color-primary-focus-ring);
    outline-offset: 0.125rem;
}

/* Bottom-up: guaranteed income at the base, portfolio on top. In the bridge years the stack is
   a single band standing on nothing, which is the whole picture in one glance. */
.rt-income-stack[b-b8wejaxajr] {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    block-size: 100%;
    inline-size: 100%;
    border-radius: var(--rt-radius-sm) var(--rt-radius-sm) 0 0;
    overflow: hidden;
}

.rt-income-band[b-b8wejaxajr] {
    display: block;
    inline-size: 100%;
    block-size: var(--rt-bar-height, 0%);
    min-block-size: 0.0625rem;
}

.rt-income-col:hover .rt-income-stack[b-b8wejaxajr] {
    filter: brightness(1.2);
}

.rt-income-col--selected .rt-income-stack[b-b8wejaxajr] {
    outline: 0.125rem solid var(--rt-color-primary);
    outline-offset: 0.0625rem;
}

/* Colour groups the sources by kind rather than giving each an unrelated hue: earned income in
   teal, guaranteed income in green, portfolio draws in blue. Required distributions are the
   same family as voluntary ones but hatched, because they are a withdrawal you do not choose. */
.rt-income-fill--salary[b-b8wejaxajr] { background: var(--rt-color-secondary); }

.rt-income-fill--spouse-salary[b-b8wejaxajr] {
    background: color-mix(in srgb, var(--rt-color-secondary) 60%, var(--rt-color-bg));
}

.rt-income-fill--ss[b-b8wejaxajr] { background: var(--rt-color-success); }

.rt-income-fill--spouse-ss[b-b8wejaxajr] {
    background: color-mix(in srgb, var(--rt-color-success) 55%, var(--rt-color-bg));
}

.rt-income-fill--pension[b-b8wejaxajr] { background: var(--rt-color-accent); }

.rt-income-fill--rmd[b-b8wejaxajr] {
    background: var(--rt-color-primary);
    background-image: repeating-linear-gradient(
        45deg, transparent, transparent 0.1875rem,
        var(--rt-color-chart-hatch) 0.1875rem, var(--rt-color-chart-hatch) 0.375rem);
}

.rt-income-fill--withdrawals[b-b8wejaxajr] { background: var(--rt-color-primary); }

.rt-income-tick[b-b8wejaxajr] {
    font-family: var(--rt-font-mono);
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text-muted);
    text-align: center;
    padding-block-start: var(--rt-space-1);
}

.rt-income-legend[b-b8wejaxajr] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rt-space-4);
    padding-block-start: var(--rt-space-3);
    border-block-start: 0.0625rem solid var(--rt-color-border-subtle);
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text-muted);
}

.rt-income-legend-item[b-b8wejaxajr] {
    display: flex;
    align-items: center;
    gap: var(--rt-space-2);
}

.rt-income-legend-value[b-b8wejaxajr] {
    font-family: var(--rt-font-mono);
    color: var(--rt-color-text);
}

.rt-income-swatch[b-b8wejaxajr] {
    display: inline-block;
    inline-size: 0.75rem;
    block-size: 0.75rem;
    border-radius: var(--rt-radius-sm);
    flex-shrink: 0;
}

/* ---- Selected year ---- */

.rt-income-rows[b-b8wejaxajr] {
    display: flex;
    flex-direction: column;
    gap: var(--rt-space-2);
    margin-block: var(--rt-space-3);
}

.rt-income-row[b-b8wejaxajr] {
    display: grid;
    grid-template-columns: auto 12rem 1fr auto 3rem;
    align-items: center;
    gap: var(--rt-space-3);
    font-size: var(--rt-text-sm);
}

.rt-income-row-label[b-b8wejaxajr] {
    color: var(--rt-color-text-muted);
}

.rt-income-row-bar[b-b8wejaxajr] {
    display: block;
    block-size: 0.5rem;
    border-radius: var(--rt-radius-full);
    background: var(--rt-color-surface-alt);
    overflow: hidden;
}

.rt-income-row-fill[b-b8wejaxajr] {
    display: block;
    block-size: 100%;
    inline-size: var(--rt-bar-width, 0%);
}

.rt-income-row-amount[b-b8wejaxajr],
.rt-income-row-share[b-b8wejaxajr] {
    font-family: var(--rt-font-mono);
    color: var(--rt-color-text);
    text-align: end;
    white-space: nowrap;
}

.rt-income-row-share[b-b8wejaxajr] {
    color: var(--rt-color-text-muted);
}

.rt-income-summary[b-b8wejaxajr] {
    padding-block-start: var(--rt-space-3);
    border-block-start: 0.0625rem solid var(--rt-color-border-subtle);
}

@media (max-width: 48rem) {
    .rt-income-chart[b-b8wejaxajr] {
        block-size: 10rem;
    }

    .rt-income-col[b-b8wejaxajr] {
        min-inline-size: 1.5rem;
    }

    /* The proportional bar is the first thing to go on a narrow screen — the amount and the
       share carry the same information in less space. */
    .rt-income-row[b-b8wejaxajr] {
        grid-template-columns: auto 1fr auto;
    }

    .rt-income-row-bar[b-b8wejaxajr] {
        display: none;
    }
}
/* /RetirementModule/Pages/PlanSetupWizard.razor.rz.scp.css */
/* The wizard's own presentation.

   The scenario cards, the slider and the commitment lines deliberately do NOT reuse the classes
   on PlanSummary and SpendingGuardrails: those live in scoped .razor.css files, which Blazor
   rewrites to a per-component attribute selector, so borrowing the names here would compile,
   render, and style nothing. Same look, own names, own file. */

.rt-wizard-steps[b-fpko36fekm] {
    list-style: none;
    margin: var(--rt-space-4) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--rt-space-2);
}

.rt-wizard-step[b-fpko36fekm] {
    display: flex;
    align-items: center;
    gap: var(--rt-space-2);
    padding: var(--rt-space-2) var(--rt-space-3);
    border-radius: var(--rt-radius-full);
    border: 0.0625rem solid var(--rt-color-border-subtle);
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text-muted);
}

.rt-wizard-step-number[b-fpko36fekm] {
    font-family: var(--rt-font-mono);
    font-weight: 700;
}

.rt-wizard-step--current[b-fpko36fekm] {
    border-color: color-mix(in srgb, var(--rt-color-primary) 55%, transparent);
    background: color-mix(in srgb, var(--rt-color-primary) 14%, transparent);
    color: var(--rt-color-text);
}

.rt-wizard-step--past[b-fpko36fekm] {
    color: var(--rt-color-success);
    border-color: color-mix(in srgb, var(--rt-color-success) 35%, transparent);
}

/* Below the widest phone the labels stop earning their width — the numbers and the current
   step's own heading carry the position on their own. */
@media (max-width: 48rem) {
    .rt-wizard-step-label[b-fpko36fekm] {
        display: none;
    }

    .rt-wizard-step--current .rt-wizard-step-label[b-fpko36fekm] {
        display: inline;
    }
}

/* ---- Step 6: the first look ---- */

.rt-wizard-computing[b-fpko36fekm] {
    color: var(--rt-color-text-muted);
}

/* The plain sentence, before any chart. Sized up because it is the payoff for everything the
   household has typed in so far, and it has to read as the answer rather than as a caption. */
.rt-wizard-verdict[b-fpko36fekm] {
    font-size: var(--rt-text-lg);
    color: var(--rt-color-text);
    margin-block: var(--rt-space-3);
}

/* The figure the two cards are counted against, stated above them rather than alluded to. Muted
   and small: it is the reference point for the shares, not a result of its own. */
.rt-wizard-baseline[b-fpko36fekm] {
    margin-block: var(--rt-space-3) 0;
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text-muted);
}

.rt-wizard-scenarios[b-fpko36fekm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--rt-space-3);
    margin-block-start: var(--rt-space-3);
}

.rt-wizard-scenario[b-fpko36fekm] {
    padding: var(--rt-space-4);
    border-radius: var(--rt-radius-md);
    border: 0.0625rem solid var(--rt-color-border-subtle);
    background: var(--rt-color-surface);
}

.rt-wizard-scenario--above[b-fpko36fekm] {
    border-color: color-mix(in srgb, var(--rt-color-success) 35%, transparent);
    background: linear-gradient(160deg, var(--rt-color-success-soft), transparent 70%);
}

/* Amber, not red — finishing below the plan means a smaller estate, not running out, and
   colouring it as a failure is the exact misreading these cards exist to prevent. */
.rt-wizard-scenario--below[b-fpko36fekm] {
    border-color: color-mix(in srgb, var(--rt-color-warning) 35%, transparent);
    background: linear-gradient(160deg, var(--rt-color-warning-soft), transparent 70%);
}

.rt-wizard-scenario-share[b-fpko36fekm] {
    font-family: var(--rt-font-mono);
    font-size: var(--rt-text-2xl);
    font-weight: 700;
    color: var(--rt-color-text);
    line-height: 1.1;
}

.rt-wizard-scenario-label[b-fpko36fekm] {
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text);
}

/* ---- Step 7: the commitment ---- */

.rt-wizard-slider[b-fpko36fekm] {
    inline-size: 100%;
    accent-color: var(--rt-color-primary);
    cursor: pointer;
}

.rt-wizard-slider:focus-visible[b-fpko36fekm] {
    outline: 0.125rem solid var(--rt-color-primary-focus-ring);
    outline-offset: 0.25rem;
}

/* The ladder's stops, written under the track. One column per rung, so each label sits over the
   stretch of track its notch owns; the ends are aligned outward rather than centred, because a
   centred first label floats to the right of a thumb parked at zero. */
.rt-wizard-scale[b-fpko36fekm] {
    list-style: none;
    margin: var(--rt-space-2) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--rt-wizard-stops, 9), 1fr);
    gap: var(--rt-space-1);
    font-family: var(--rt-font-mono);
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text-muted);
}

.rt-wizard-tick[b-fpko36fekm] {
    text-align: center;
    min-inline-size: 0;

    /* A dollar amount broken across two lines stops reading as one number. */
    white-space: nowrap;
}

.rt-wizard-tick:first-child[b-fpko36fekm] {
    text-align: start;
}

.rt-wizard-tick:last-child[b-fpko36fekm] {
    text-align: end;
}

/* Where the thumb is. The commitment box states the same figure, but a scale whose current stop
   is not marked leaves the reader counting notches to find themselves on it. */
.rt-wizard-tick--current[b-fpko36fekm] {
    color: var(--rt-color-text);
    font-weight: 700;
}

/* Nine amounts cannot share a phone's width. The ends are what the scale is really for — how far
   the ladder reaches either way — and the level in hand is spelled out in the box below. */
@media (max-width: 36rem) {
    .rt-wizard-scale[b-fpko36fekm] {
        display: flex;
        justify-content: space-between;
    }

    .rt-wizard-tick:not(:first-child):not(:last-child)[b-fpko36fekm] {
        display: none;
    }
}

.rt-wizard-commitment[b-fpko36fekm] {
    margin-block-start: var(--rt-space-4);
    padding: var(--rt-space-4);
    border-radius: var(--rt-radius-md);
    border: 0.0625rem solid var(--rt-color-border-subtle);
    background: var(--rt-color-surface);
}

/* Three sentences, one per line. The whole value of the agreement is that it can be read aloud
   and checked later, which a paragraph of prose defeats. */
.rt-wizard-commitment-line[b-fpko36fekm] {
    margin: 0;
    padding-block: var(--rt-space-1);
    font-size: var(--rt-text-md);
    color: var(--rt-color-text);
}
/* /RetirementModule/Pages/PlanSocialSecurity.razor.rz.scp.css */
/* Social Security claiming. */

.rt-ss-toggle[b-pa1tc03q6i] {
    display: flex;
    align-items: center;
    gap: var(--rt-space-2);
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text-muted);
    cursor: pointer;
}

/* The age slider needs the room — it is the only control on the page that matters. */
.rt-ss-age-field[b-pa1tc03q6i] {
    grid-column: span 2;
}

.rt-ss-slider[b-pa1tc03q6i] {
    inline-size: 100%;
    accent-color: var(--rt-color-primary);
    cursor: pointer;
}

.rt-ss-slider:focus-visible[b-pa1tc03q6i] {
    outline: 0.125rem solid var(--rt-color-primary-focus-ring);
    outline-offset: 0.25rem;
}

.rt-ss-scale[b-pa1tc03q6i] {
    font-family: var(--rt-font-mono);
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text-muted);
}

.rt-ss-result[b-pa1tc03q6i] {
    display: flex;
    align-items: center;
    gap: var(--rt-space-5);
    flex-wrap: wrap;
    margin-block-start: var(--rt-space-3);
    padding: var(--rt-space-3);
    border-radius: var(--rt-radius-md);
    background: var(--rt-color-surface);
    border: 0.0625rem solid var(--rt-color-border-subtle);
}

.rt-ss-amount-value[b-pa1tc03q6i] {
    font-family: var(--rt-font-mono);
    font-size: var(--rt-text-xl);
    font-weight: 700;
    color: var(--rt-color-text);
}

.rt-ss-amount-note[b-pa1tc03q6i] {
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text-muted);
}

/* Green for a permanently larger cheque, amber for a permanently smaller one. Amber rather
   than red: claiming early is a legitimate choice for someone who needs the money or does not
   expect to reach the breakeven age, and colouring it as an error would be a judgement this
   screen has no standing to make. */
.rt-ss-delta[b-pa1tc03q6i] {
    font-size: var(--rt-text-sm);
    flex: 1 1 16rem;
}

.rt-ss-delta--up[b-pa1tc03q6i] {
    color: var(--rt-color-success);
}

.rt-ss-delta--down[b-pa1tc03q6i] {
    color: var(--rt-color-warning);
}

.rt-ss-tradeoff[b-pa1tc03q6i] {
    margin-block-start: var(--rt-space-3);
    padding: var(--rt-space-3);
    border-radius: var(--rt-radius-md);
    border: 0.0625rem solid var(--rt-color-border-subtle);
}

.rt-ss-tradeoff-head[b-pa1tc03q6i] {
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text);
    margin-block-end: var(--rt-space-2);
}

/* Nine ages side by side, each showing what it costs against the best. Clickable, because
   the comparison is only useful if acting on it is one tap away. */
.rt-ss-ages[b-pa1tc03q6i] {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: var(--rt-space-1);
}

.rt-ss-age[b-pa1tc03q6i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rt-space-1);
    padding: var(--rt-space-2) var(--rt-space-1);
    border-radius: var(--rt-radius-sm);
    border: 0.0625rem solid var(--rt-color-border-subtle);
    background: var(--rt-color-surface);
    color: var(--rt-color-text-muted);
    cursor: pointer;
    font-family: var(--rt-font-mono);
}

.rt-ss-age:hover[b-pa1tc03q6i] {
    background: var(--rt-color-surface-hover);
}

.rt-ss-age:focus-visible[b-pa1tc03q6i] {
    outline: 0.125rem solid var(--rt-color-primary-focus-ring);
    outline-offset: 0.125rem;
}

.rt-ss-age-num[b-pa1tc03q6i] {
    font-size: var(--rt-text-md);
    font-weight: 700;
    color: var(--rt-color-text);
}

.rt-ss-age-net[b-pa1tc03q6i] {
    font-size: var(--rt-text-xs);
}

/* The age that leaves the most is marked, not prescribed — someone may have good reasons this
   projection cannot see, and the screen should inform rather than instruct. */
.rt-ss-age--best[b-pa1tc03q6i] {
    border-color: var(--rt-color-success);
    background: var(--rt-color-success-soft);
}

.rt-ss-age--best .rt-ss-age-net[b-pa1tc03q6i] {
    color: var(--rt-color-success);
}

.rt-ss-age--current[b-pa1tc03q6i] {
    outline: 0.0625rem solid var(--rt-color-primary);
}

.rt-ss-conflict[b-pa1tc03q6i] {
    margin-block-start: var(--rt-space-3);
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text-muted);
}

@media (max-width: 48rem) {
    .rt-ss-ages[b-pa1tc03q6i] {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 62rem) {
    .rt-ss-age-field[b-pa1tc03q6i] {
        grid-column: 1 / -1;
    }
}

/* ---- Claiming heat map ---- */

/* The dollar answer, stated before the grid. Green only when the plan is already on the best
   pair — everywhere else this is a neutral statement of what is on the table, not a warning. */
.rt-heat-verdict[b-pa1tc03q6i] {
    padding: var(--rt-space-3);
    border-radius: var(--rt-radius-md);
    border: 0.0625rem solid var(--rt-color-border-subtle);
    background: var(--rt-color-surface-alt);
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text);
    line-height: 1.6;
}

.rt-heat-verdict--best[b-pa1tc03q6i] {
    border-color: color-mix(in srgb, var(--rt-color-success) 35%, transparent);
    background: linear-gradient(160deg, var(--rt-color-success-soft), transparent 70%);
}

.rt-heat-wrap[b-pa1tc03q6i] {
    overflow-x: auto;
    margin-block-start: var(--rt-space-3);
}

.rt-heat-table[b-pa1tc03q6i] {
    border-collapse: separate;
    border-spacing: 0.125rem;
    margin-inline: auto;
}

/* Visible to screen readers, off-screen for everyone else: the table already explains itself
   visually through the axis headers and the legend. */
.rt-heat-caption[b-pa1tc03q6i] {
    position: absolute;
    inline-size: 0.0625rem;
    block-size: 0.0625rem;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.rt-heat-axis[b-pa1tc03q6i] {
    font-family: var(--rt-font-mono);
    font-size: var(--rt-text-xs);
    font-weight: 400;
    color: var(--rt-color-text-muted);
    text-align: center;
    padding: var(--rt-space-1);
}

.rt-heat-corner[b-pa1tc03q6i] {
    padding: 0;
}

.rt-heat-td[b-pa1tc03q6i] {
    padding: 0;
}

/* One cell. The shade arrives as a custom property and the mix happens here, so the palette
   stays in the stylesheet and the markup contributes only the number.

   Mixed toward the accent rather than run red-to-green: a pair that ranks low is not an error,
   and colouring it as one would push a couple away from a choice that might suit them for
   reasons this grid cannot see — health, or wanting the money earlier while they can use it. */
.rt-heat-cell[b-pa1tc03q6i] {
    display: block;
    inline-size: 2.25rem;
    block-size: 1.75rem;
    padding: 0;
    border: 0.0625rem solid transparent;
    border-radius: var(--rt-radius-sm);
    background: color-mix(in srgb, var(--rt-color-primary) var(--rt-cell-shade, 0%), var(--rt-color-surface-alt));
    color: var(--rt-color-text);
    font-size: var(--rt-text-xs);
    line-height: 1;
    cursor: pointer;
}

.rt-heat-cell:hover[b-pa1tc03q6i] {
    filter: brightness(1.2);
}

.rt-heat-cell:focus-visible[b-pa1tc03q6i] {
    outline: 0.125rem solid var(--rt-color-primary-focus-ring);
    outline-offset: 0.125rem;
}

/* Never colour alone: the best and current cells carry a glyph, and the accessible label spells
   out both ages, the dollar figure and the cell's standing in words. */
.rt-heat-cell--best[b-pa1tc03q6i] {
    border-color: var(--rt-color-success);
}

.rt-heat-cell--current[b-pa1tc03q6i] {
    border-color: var(--rt-color-text);
    border-style: dashed;
}

.rt-heat-cell--failed[b-pa1tc03q6i] {
    background: repeating-linear-gradient(
        45deg, var(--rt-color-surface-alt), var(--rt-color-surface-alt) 0.1875rem,
        var(--rt-color-warning-soft) 0.1875rem, var(--rt-color-warning-soft) 0.375rem);
}

.rt-heat-mark[b-pa1tc03q6i] {
    font-size: var(--rt-text-xs);
}

.rt-heat-legend[b-pa1tc03q6i] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rt-space-3);
    margin-block-start: var(--rt-space-2);
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text-muted);
}

.rt-heat-legend-item[b-pa1tc03q6i] {
    display: inline-flex;
    align-items: center;
    gap: var(--rt-space-1);
}

.rt-heat-key[b-pa1tc03q6i] {
    display: inline-block;
    inline-size: 0.75rem;
    block-size: 0.75rem;
    border-radius: var(--rt-radius-sm);
}

.rt-heat-key--low[b-pa1tc03q6i] {
    background: var(--rt-color-surface-alt);
    border: 0.0625rem solid var(--rt-color-border-subtle);
}

.rt-heat-key--high[b-pa1tc03q6i] {
    background: var(--rt-color-primary);
}

.rt-heat-note[b-pa1tc03q6i] {
    margin-block-start: var(--rt-space-3);
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text-muted);
    line-height: 1.6;
}

.rt-heat-note--caveat[b-pa1tc03q6i] {
    padding-block-start: var(--rt-space-2);
    border-block-start: 0.0625rem solid var(--rt-color-border-subtle);
}

@media (max-width: 48rem) {
    .rt-heat-cell[b-pa1tc03q6i] {
        inline-size: 1.75rem;
        block-size: 1.5rem;
    }
}

/* A comparison that fails renders as nothing at all, which reads as "this plan has none" rather
   than "this did not load". Muted rather than alarming: the page's main answers still stand. */
.rt-comparison-unavailable[b-pa1tc03q6i] {
    display: flex;
    align-items: center;
    gap: var(--rt-space-2);
    margin-block-start: var(--rt-space-3);
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text-muted);
}
/* /RetirementModule/Pages/PlanSummary.razor.rz.scp.css */
/* Household plan summary. */

.rt-scenario-cards[b-fwhmarw8n6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--rt-space-3);
    margin-block-start: var(--rt-space-3);
}

.rt-scenario-card[b-fwhmarw8n6] {
    padding: var(--rt-space-4);
    border-radius: var(--rt-radius-md);
    border: 0.0625rem solid var(--rt-color-border-subtle);
    background: var(--rt-color-surface);
}

.rt-scenario-card--above[b-fwhmarw8n6] {
    border-color: color-mix(in srgb, var(--rt-color-success) 35%, transparent);
    background: linear-gradient(160deg, var(--rt-color-success-soft), transparent 70%);
}

/* Amber, not red. Finishing below the plan means a smaller estate, not running out, and
   colouring it as a failure is the exact misreading these cards exist to prevent. */
.rt-scenario-card--below[b-fwhmarw8n6] {
    border-color: color-mix(in srgb, var(--rt-color-warning) 35%, transparent);
    background: linear-gradient(160deg, var(--rt-color-warning-soft), transparent 70%);
}

.rt-scenario-share[b-fwhmarw8n6] {
    font-family: var(--rt-font-mono);
    font-size: var(--rt-text-2xl);
    font-weight: 700;
    color: var(--rt-color-text);
    line-height: 1.1;
}

.rt-scenario-label[b-fwhmarw8n6] {
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text);
}

.rt-scenario-detail[b-fwhmarw8n6] {
    margin-block-start: var(--rt-space-2);
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text-muted);
}

/* The figure the two cards are counted against, stated above them. Sized like the page's body
   copy rather than like the cards' own detail lines: it is the reference point, not a footnote
   about one of them. */
.rt-scenario-baseline[b-fwhmarw8n6] {
    margin-block: var(--rt-space-3) 0;
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text-muted);
}

.rt-scenario-caveat[b-fwhmarw8n6] {
    margin-block-start: var(--rt-space-3);
    padding: var(--rt-space-3);
    border-radius: var(--rt-radius-md);
    background: var(--rt-color-muted-soft);
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text-muted);
}

/* ---- Year chart ---- */

.rt-summary-legend[b-fwhmarw8n6] {
    display: flex;
    gap: var(--rt-space-4);
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text-muted);
}

.rt-summary-key[b-fwhmarw8n6] {
    display: inline-block;
    inline-size: 0.75rem;
    block-size: 0.75rem;
    border-radius: var(--rt-radius-sm);
    background: var(--rt-color-secondary);
    vertical-align: middle;
}

.rt-summary-key--pre[b-fwhmarw8n6] { background: var(--rt-color-secondary); }

.rt-summary-key--post[b-fwhmarw8n6] {
    background: var(--rt-color-accent);
    background-image: repeating-linear-gradient(
        45deg, transparent, transparent 0.125rem,
        var(--rt-color-chart-hatch) 0.125rem, var(--rt-color-chart-hatch) 0.25rem);
}

.rt-summary-chart[b-fwhmarw8n6] {
    display: flex;
    align-items: flex-end;
    gap: 0.125rem;
    block-size: 12rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-block: var(--rt-space-2);
}

.rt-summary-col[b-fwhmarw8n6] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    flex: 1 1 0;
    min-inline-size: 1rem;
    block-size: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    scroll-snap-align: center;
}

.rt-summary-col:focus-visible[b-fwhmarw8n6] {
    outline: 0.125rem solid var(--rt-color-primary-focus-ring);
    outline-offset: 0.125rem;
}

.rt-summary-bar[b-fwhmarw8n6] {
    display: block;
    inline-size: 100%;
    block-size: var(--rt-bar-height, 0%);
    background: var(--rt-color-secondary);
    border-radius: var(--rt-radius-sm) var(--rt-radius-sm) 0 0;
    min-block-size: 0.0625rem;
}

/* Regime carries a texture as well as a hue, so it is never encoded by colour alone. */
.rt-summary-col--post .rt-summary-bar[b-fwhmarw8n6] {
    background: var(--rt-color-accent);
    background-image: repeating-linear-gradient(
        45deg, transparent, transparent 0.1875rem,
        var(--rt-color-chart-hatch) 0.1875rem, var(--rt-color-chart-hatch) 0.375rem);
}

.rt-summary-col:hover .rt-summary-bar[b-fwhmarw8n6] {
    filter: brightness(1.25);
}

.rt-summary-col--selected .rt-summary-bar[b-fwhmarw8n6] {
    outline: 0.125rem solid var(--rt-color-primary);
    outline-offset: 0.0625rem;
}

.rt-summary-tick[b-fwhmarw8n6] {
    font-family: var(--rt-font-mono);
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text-muted);
    text-align: center;
    padding-block-start: var(--rt-space-1);
}

/* ---- Per-year detail ---- */

.rt-summary-panels[b-fwhmarw8n6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--rt-space-4);
    margin-block-start: var(--rt-space-3);
}

.rt-summary-panel-title[b-fwhmarw8n6] {
    font-size: var(--rt-text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rt-color-text-muted);
    margin-block-end: var(--rt-space-2);
}

.rt-summary-line[b-fwhmarw8n6] {
    display: flex;
    justify-content: space-between;
    gap: var(--rt-space-3);
    padding-block: var(--rt-space-1);
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text-muted);
}

.rt-summary-line--total[b-fwhmarw8n6] {
    margin-block-start: var(--rt-space-1);
    padding-block-start: var(--rt-space-2);
    border-block-start: 0.0625rem solid var(--rt-color-border-subtle);
    color: var(--rt-color-text);
    font-weight: 700;
}

.rt-summary-amount[b-fwhmarw8n6] {
    font-family: var(--rt-font-mono);
    color: var(--rt-color-text);
    white-space: nowrap;
}

.rt-summary-badge[b-fwhmarw8n6] {
    display: inline-block;
    margin-inline-start: var(--rt-space-2);
    padding: 0 var(--rt-space-2);
    border-radius: var(--rt-radius-full);
    font-size: var(--rt-text-xs);
}

/* One colour per tax treatment, reused by the badges and the allocation bar so the two read
   as the same fact told twice rather than as two unrelated pictures. */
.rt-summary-badge--taxable[b-fwhmarw8n6] {
    background: color-mix(in srgb, var(--rt-color-primary) 25%, transparent);
    color: var(--rt-color-text);
}

.rt-summary-badge--deferred[b-fwhmarw8n6] {
    background: color-mix(in srgb, var(--rt-color-warning) 25%, transparent);
    color: var(--rt-color-text);
}

.rt-summary-badge--free[b-fwhmarw8n6] {
    background: color-mix(in srgb, var(--rt-color-success) 25%, transparent);
    color: var(--rt-color-text);
}

.rt-summary-badge--other[b-fwhmarw8n6] {
    background: var(--rt-color-muted-soft);
    color: var(--rt-color-text-muted);
}

.rt-summary-incomplete[b-fwhmarw8n6] {
    font-size: var(--rt-text-xs);
    color: var(--rt-color-warning);
}

.rt-summary-allocation[b-fwhmarw8n6] {
    margin-block-start: var(--rt-space-4);
    padding-block-start: var(--rt-space-3);
    border-block-start: 0.0625rem solid var(--rt-color-border-subtle);
}

.rt-summary-alloc-bar[b-fwhmarw8n6] {
    display: flex;
    block-size: 1rem;
    border-radius: var(--rt-radius-full);
    overflow: hidden;
    background: var(--rt-color-surface-alt);
}

.rt-summary-alloc-slice[b-fwhmarw8n6] {
    block-size: 100%;
    inline-size: var(--rt-bar-width, 0%);
}

.rt-summary-alloc-legend[b-fwhmarw8n6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rt-space-4);
    margin-block-start: var(--rt-space-2);
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text);
}

.rt-summary-alloc-item[b-fwhmarw8n6] {
    display: flex;
    align-items: center;
    gap: var(--rt-space-2);
    font-family: var(--rt-font-mono);
}

@media (max-width: 48rem) {
    .rt-summary-chart[b-fwhmarw8n6] {
        block-size: 9rem;
    }

    .rt-summary-col[b-fwhmarw8n6] {
        min-inline-size: 1.5rem;
    }
}

/* A comparison that fails renders as nothing at all, which reads as "this plan has none" rather
   than "this did not load". Muted rather than alarming: the page's main answers still stand. */
.rt-comparison-unavailable[b-fwhmarw8n6] {
    display: flex;
    align-items: center;
    gap: var(--rt-space-2);
    margin-block-start: var(--rt-space-3);
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text-muted);
}

/* Income risk: how often an adjustment is needed and how big it is. Styled as information rather
   than as a warning — an amber panel would restore exactly the alarm the paragraph exists to take
   out of the success rate. Sits above the median caveat because the two answer the same question
   in the same voice. */
.rt-scenario-risk[b-fwhmarw8n6] {
    margin-block-start: var(--rt-space-3);
    padding: var(--rt-space-3);
    border-radius: var(--rt-radius-md);
    border-inline-start: 0.1875rem solid var(--rt-color-primary);
    background: var(--rt-color-surface-alt);
    font-size: var(--rt-text-sm);
}

/* The part of a year the portfolio could not supply. Warning rather than danger: the year happened,
   the household lived it, and the figure is the size of what they went without — not an error. */
.rt-summary-line--short[b-fwhmarw8n6] {
    color: var(--rt-color-warning);
    font-weight: 600;
}
/* /RetirementModule/Pages/PlanTaxes.razor.rz.scp.css */
/* Tax forecast chart and strategy comparison table. */

.rt-tax-chart[b-0xpim6zijl] {
    display: flex;
    align-items: flex-end;
    gap: 0.125rem;
    block-size: 14rem;
    padding-block: var(--rt-space-3);
    overflow-x: auto;
}

.rt-tax-col[b-0xpim6zijl] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1 1 0;
    min-inline-size: 0.75rem;
    block-size: 100%;
    cursor: default;
}

.rt-tax-col:focus-visible[b-0xpim6zijl] {
    outline: 0.125rem solid var(--rt-color-primary-focus-ring);
    outline-offset: 0.125rem;
}

/* Bands stack from the bottom, ordinary income first, so the base of every bar is the same
   kind of tax and the year-to-year shape is readable at a glance. */
.rt-tax-stack[b-0xpim6zijl] {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    block-size: 100%;
    inline-size: 100%;
    border-radius: var(--rt-radius-sm) var(--rt-radius-sm) 0 0;
    overflow: hidden;
}

.rt-tax-col:hover .rt-tax-stack[b-0xpim6zijl] {
    filter: brightness(1.25);
}

/* The band's share of the tallest year arrives as a custom property; the sizing rule stays here. */
.rt-tax-band[b-0xpim6zijl] {
    inline-size: 100%;
    block-size: var(--rt-bar-height, 0%);
    min-block-size: 0.0625rem;
}

/* Colour is its own class so the chart band and the legend swatch share one definition without
   the swatch having to claim it is a band — structure stays on .rt-tax-band. The two bands that
   behave unlike the rest get the most distinct treatments: the Medicare surcharge, which lags
   its cause by two years, and FICA, which exists only in working years. */
.rt-tax-fill--ordinary[b-0xpim6zijl] { background: var(--rt-color-primary); }
.rt-tax-fill--ltcg[b-0xpim6zijl] { background: var(--rt-color-brand-cyan); }
.rt-tax-fill--niit[b-0xpim6zijl] { background: var(--rt-color-secondary); }
.rt-tax-fill--irmaa[b-0xpim6zijl] { background: var(--rt-color-warning); }
.rt-tax-fill--fica[b-0xpim6zijl] { background: var(--rt-color-text-muted); }
.rt-tax-fill--state[b-0xpim6zijl] { background: var(--rt-color-accent); }

.rt-tax-tick[b-0xpim6zijl] {
    font-family: var(--rt-font-mono);
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text-muted);
    text-align: center;
    padding-block-start: var(--rt-space-1);
}

.rt-tax-legend[b-0xpim6zijl] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rt-space-4);
    padding-block: var(--rt-space-3);
    border-block-start: 0.0625rem solid var(--rt-color-border-subtle);
}

.rt-tax-legend-item[b-0xpim6zijl] {
    display: flex;
    align-items: center;
    gap: var(--rt-space-2);
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text-muted);
}

.rt-tax-legend-value[b-0xpim6zijl] {
    font-family: var(--rt-font-mono);
    color: var(--rt-color-text);
}

.rt-tax-swatch[b-0xpim6zijl] {
    inline-size: 0.75rem;
    block-size: 0.75rem;
    border-radius: var(--rt-radius-sm);
    flex-shrink: 0;
}

/* ---- Strategy comparison ---- */

.rt-strategy-spread[b-0xpim6zijl] {
    padding: var(--rt-space-3);
    border-radius: var(--rt-radius-md);
    background: var(--rt-color-primary-tint);
    color: var(--rt-color-text);
    font-size: var(--rt-text-sm);
}

/* The table is wide and stays wide. Scrolling it inside its own box is better than letting
   nineteen rows of currency wrap into unreadable stacks. */
.rt-strategy-table-wrap[b-0xpim6zijl] {
    overflow-x: auto;
}

.rt-strategy-table[b-0xpim6zijl] {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--rt-text-sm);
}

.rt-strategy-table th[b-0xpim6zijl],
.rt-strategy-table td[b-0xpim6zijl] {
    padding: var(--rt-space-2) var(--rt-space-3);
    border-block-end: 0.0625rem solid var(--rt-color-border-subtle);
    text-align: start;
    white-space: nowrap;
}

.rt-strategy-table th[b-0xpim6zijl] {
    font-size: var(--rt-text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rt-color-text-muted);
}

.rt-strategy-table .rt-num[b-0xpim6zijl] {
    text-align: end;
    font-family: var(--rt-font-mono);
}

.rt-strategy-row--current[b-0xpim6zijl] {
    outline: 0.0625rem solid var(--rt-color-primary);
}

.rt-strategy-tag[b-0xpim6zijl] {
    display: inline-block;
    margin-inline-start: var(--rt-space-2);
    padding: 0 var(--rt-space-2);
    border-radius: var(--rt-radius-full);
    background: var(--rt-color-primary-tint);
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text);
}

.rt-strategy-tag--failed[b-0xpim6zijl] {
    background: var(--rt-color-danger-soft);
    color: var(--rt-color-danger);
}

@media (max-width: 48rem) {
    .rt-tax-chart[b-0xpim6zijl] {
        block-size: 10rem;
    }

    .rt-tax-legend[b-0xpim6zijl] {
        gap: var(--rt-space-3);
    }
}

/* A failed strategy switch reports beside the dropdown rather than replacing the page: the reader
   already has a chart and a table, and losing both to a second request's failure would be worse
   than the failure. */
.rt-strategy-switch-error[b-0xpim6zijl] {
    font-size: var(--rt-text-sm);
    color: var(--rt-color-danger);
}
/* /RetirementModule/Pages/SpendingGuardrails.razor.rz.scp.css */
/* The guardrail bands.

   Numbers are set in the mono face and given room to breathe: this screen exists so a retiree
   can compare a balance on a statement against a balance they agreed to, and that comparison
   is done digit by digit. Proportional figures make that harder than it needs to be. */

.rt-guardrail-card[b-wmpc9dnhne] {
    display: flex;
    flex-direction: column;
    gap: var(--rt-space-3);
}

.rt-guardrail-legend[b-wmpc9dnhne] {
    font-size: var(--rt-text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rt-color-text-muted);
}

.rt-guardrail-band[b-wmpc9dnhne] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--rt-space-4);
    padding: var(--rt-space-4);
    border-radius: var(--rt-radius-md);
    border: 0.0625rem solid var(--rt-color-border-subtle);
    background: var(--rt-color-surface);
}

/* Green for the raise, red for the cut — but only as a wash behind the row, because these are
   both ordinary, planned outcomes. A cut styled as an alarm would undercut the entire point of
   agreeing to it in advance. */
.rt-guardrail-band--upper[b-wmpc9dnhne] {
    background: linear-gradient(90deg, var(--rt-color-success-soft), transparent 60%);
    border-color: color-mix(in srgb, var(--rt-color-success) 35%, transparent);
}

.rt-guardrail-band--lower[b-wmpc9dnhne] {
    background: linear-gradient(90deg, var(--rt-color-danger-soft), transparent 60%);
    border-color: color-mix(in srgb, var(--rt-color-danger) 35%, transparent);
}

/* The current row is dashed to read as a position rather than a threshold: the two solid rows
   are lines you cross, this one is where you are. */
.rt-guardrail-band--current[b-wmpc9dnhne] {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--rt-color-text-muted) 55%, transparent);
    background: var(--rt-color-surface-alt);
}

.rt-guardrail-balance[b-wmpc9dnhne] {
    font-family: var(--rt-font-mono);
    font-size: var(--rt-text-xl);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--rt-color-text);
}

.rt-guardrail-label[b-wmpc9dnhne] {
    display: flex;
    align-items: center;
    gap: var(--rt-space-2);
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text-muted);
    text-align: center;
}

.rt-guardrail-dot[b-wmpc9dnhne] {
    display: inline-block;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border-radius: var(--rt-radius-full);
    flex-shrink: 0;
}

.rt-guardrail-dot--up[b-wmpc9dnhne] {
    background: var(--rt-color-success);
}

.rt-guardrail-dot--down[b-wmpc9dnhne] {
    background: var(--rt-color-danger);
}

.rt-guardrail-income[b-wmpc9dnhne] {
    text-align: end;
}

.rt-guardrail-income-value[b-wmpc9dnhne] {
    font-family: var(--rt-font-mono);
    font-size: var(--rt-text-xl);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--rt-color-text);
}

.rt-guardrail-income-note[b-wmpc9dnhne] {
    font-family: var(--rt-font-mono);
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text-muted);
}

/* The sentence between the current row and the cut row. It carries the screen's single most
   useful fact — how much room there is before anything changes — so it is tinted, not muted. */
.rt-guardrail-gap[b-wmpc9dnhne] {
    padding-inline: var(--rt-space-4);
    font-size: var(--rt-text-sm);
    color: var(--rt-color-primary-soft);
}

/* The balance is already at or below the trigger. Amber rather than red: a cut being due is
   the plan working as designed, not a failure — the whole point of agreeing in advance is that
   this moment arrives without drama. */
.rt-guardrail-gap--breached[b-wmpc9dnhne] {
    color: var(--rt-color-warning);
    padding-block: var(--rt-space-2);
    border-radius: var(--rt-radius-sm);
    background: var(--rt-color-warning-soft);
}

.rt-guardrail-picker[b-wmpc9dnhne] {
    padding: var(--rt-space-4);
    border-radius: var(--rt-radius-md);
    border: 0.0625rem solid var(--rt-color-border-subtle);
    background: var(--rt-color-surface);
}

.rt-guardrail-slider[b-wmpc9dnhne] {
    inline-size: 100%;
    accent-color: var(--rt-color-primary);
    cursor: pointer;
}

.rt-guardrail-slider:focus-visible[b-wmpc9dnhne] {
    outline: 0.125rem solid var(--rt-color-primary-focus-ring);
    outline-offset: 0.25rem;
}

.rt-guardrail-scale[b-wmpc9dnhne] {
    margin-block-start: var(--rt-space-2);
    font-family: var(--rt-font-mono);
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text);
}

.rt-guardrail-scale .text-muted[b-wmpc9dnhne] {
    font-family: var(--rt-font-sans);
}

/* Why the slider stops where it does. A hard stop with no explanation reads as a broken
   control, so this is styled as guidance rather than as an error — nothing has gone wrong. */
.rt-guardrail-floor[b-wmpc9dnhne] {
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text-muted);
    padding: var(--rt-space-2) var(--rt-space-3);
    border-inline-start: 0.1875rem solid var(--rt-color-primary);
    background: var(--rt-color-surface-alt);
    border-radius: var(--rt-radius-sm);
}

.rt-guardrail-footnote[b-wmpc9dnhne] {
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text-muted);
}

/* The success rate is below the confidence line the retiree set. Stating the target alongside
   it is what makes the number mean anything — 5% is only alarming if you know you asked for 70. */
.rt-guardrail-below-target[b-wmpc9dnhne] {
    color: var(--rt-color-warning);
    font-weight: 700;
}

/* A raise the balance has already earned. Green, because unlike the amber breach note this is
   simply good news the retiree has not collected yet. */
.rt-guardrail-earned[b-wmpc9dnhne] {
    color: var(--rt-color-success);
    font-weight: 700;
}

.rt-engine-stamp[b-wmpc9dnhne] {
    padding: var(--rt-space-1) var(--rt-space-3);
    border-radius: var(--rt-radius-full);
    background: var(--rt-color-muted-soft);
    font-family: var(--rt-font-mono);
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text-muted);
    /* No cursor:help here any more — the affordance moved inside, onto the glossary button, which
       is a real control a keyboard and a touch screen can both reach. */
}

.rt-guardrail-computing[b-wmpc9dnhne] {
    min-block-size: 16rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Narrow screens: the three-column band collapses to stacked rows, with the label first so the
   pairing of balance and income stays adjacent and comparable. */
@media (max-width: 48rem) {
    .rt-guardrail-band[b-wmpc9dnhne] {
        grid-template-columns: 1fr;
        gap: var(--rt-space-2);
        text-align: start;
    }

    .rt-guardrail-label[b-wmpc9dnhne] {
        order: -1;
        text-align: start;
    }

    .rt-guardrail-income[b-wmpc9dnhne] {
        text-align: start;
    }

    .rt-guardrail-legend[b-wmpc9dnhne] {
        display: none;
    }
}

/* .rt-guardrail-saved / .rt-guardrail-error moved to design-utilities.css - PlanAccounts
   uses them too, and scoped selectors never matched there. */

/* ---- Income / Withdrawal view switch ---- */

.rt-money-view[b-wmpc9dnhne] {
    display: inline-flex;
    gap: 0;
    border-radius: var(--rt-radius-full);
    border: 0.0625rem solid var(--rt-color-border-subtle);
    background: var(--rt-color-surface-alt);
    overflow: hidden;
}

.rt-money-view-option[b-wmpc9dnhne] {
    padding: var(--rt-space-1) var(--rt-space-3);
    border: none;
    background: none;
    color: var(--rt-color-text-muted);
    font-size: var(--rt-text-sm);
    cursor: pointer;
}

.rt-money-view-option:hover[b-wmpc9dnhne] {
    color: var(--rt-color-text);
}

.rt-money-view-option:focus-visible[b-wmpc9dnhne] {
    outline: 0.125rem solid var(--rt-color-primary-focus-ring);
    outline-offset: -0.125rem;
}

/* The selected side is filled rather than merely tinted: which unit the page is speaking in
   changes what every figure below it means, so it has to be unmissable at a glance. */
.rt-money-view-option--on[b-wmpc9dnhne] {
    background: var(--rt-color-primary);
    color: var(--rt-color-on-primary);
}

.rt-money-view-note[b-wmpc9dnhne] {
    margin-block-start: var(--rt-space-2);
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text-muted);
}

.rt-money-view-bridge[b-wmpc9dnhne] {
    margin-block-start: var(--rt-space-3);
    padding: var(--rt-space-3);
    border-radius: var(--rt-radius-md);
    border-inline-start: 0.1875rem solid var(--rt-color-primary);
    background: var(--rt-color-surface-alt);
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text);
    line-height: 1.6;
}

/* ---- The band over time ---- */

.rt-band-verdict[b-wmpc9dnhne] {
    padding: var(--rt-space-3);
    border-radius: var(--rt-radius-md);
    border-inline-start: 0.1875rem solid var(--rt-color-primary);
    background: var(--rt-color-surface-alt);
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text);
    line-height: 1.6;
}

.rt-band-stale[b-wmpc9dnhne] {
    font-size: var(--rt-text-sm);
    color: var(--rt-color-warning);
}

.rt-band-chart[b-wmpc9dnhne] {
    display: flex;
    align-items: flex-end;
    gap: var(--rt-space-3);
    block-size: 13rem;
    overflow-x: auto;
    padding-block: var(--rt-space-2);
}

.rt-band-col[b-wmpc9dnhne] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1 1 0;
    min-inline-size: 3.5rem;
    block-size: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.rt-band-col:focus-visible[b-wmpc9dnhne] {
    outline: 0.125rem solid var(--rt-color-primary-focus-ring);
    outline-offset: 0.125rem;
}

/* Floor and ceiling share one axis and are stacked in the same box, so the corridor between them
   is the visible gap rather than two bars the reader has to compare by eye. */
.rt-band-stack[b-wmpc9dnhne] {
    position: relative;
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

.rt-band-ceiling[b-wmpc9dnhne],
.rt-band-floor[b-wmpc9dnhne] {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    display: block;
    border-radius: var(--rt-radius-sm) var(--rt-radius-sm) 0 0;
    block-size: var(--rt-bar-height, 0%);
}

.rt-band-ceiling[b-wmpc9dnhne] {
    background: color-mix(in srgb, var(--rt-color-success) 30%, transparent);
}

.rt-band-floor[b-wmpc9dnhne] {
    background: var(--rt-color-warning);
}

.rt-band-col:hover .rt-band-ceiling[b-wmpc9dnhne],
.rt-band-col:hover .rt-band-floor[b-wmpc9dnhne] {
    filter: brightness(1.2);
}

.rt-band-tick[b-wmpc9dnhne] {
    font-family: var(--rt-font-mono);
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text);
    text-align: center;
    padding-block-start: var(--rt-space-1);
}

.rt-band-legend[b-wmpc9dnhne] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rt-space-3);
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text-muted);
}

.rt-band-legend-item[b-wmpc9dnhne] {
    display: inline-flex;
    align-items: center;
    gap: var(--rt-space-1);
}

.rt-band-key[b-wmpc9dnhne] {
    display: inline-block;
    inline-size: 0.75rem;
    block-size: 0.75rem;
    border-radius: var(--rt-radius-sm);
}

.rt-band-key--ceiling[b-wmpc9dnhne] { background: color-mix(in srgb, var(--rt-color-success) 30%, transparent); }
.rt-band-key--floor[b-wmpc9dnhne] { background: var(--rt-color-warning); }

@media (max-width: 48rem) {
    .rt-band-chart[b-wmpc9dnhne] {
        block-size: 10rem;
    }
}

/* The three-line stack, wrapped so the first-visit tour has one region to raise above its scrim.
   It repeats the card's own column layout and gap, so on every other render it is invisible. */
.rt-guardrail-lines[b-wmpc9dnhne] {
    display: flex;
    flex-direction: column;
    gap: var(--rt-space-3);
}

/* The two tour regions that paint nothing of their own. Raised above the tour's scrim by
   .rt-tour-target, they would otherwise show it straight through and read as dimmed. Background
   and radius only — no padding, so the highlight never moves the page. */
.rt-guardrail-lines.rt-tour-target[b-wmpc9dnhne],
.rt-guardrail-footnote.rt-tour-target[b-wmpc9dnhne] {
    background: var(--rt-color-surface);
    border-radius: var(--rt-radius-md);
}

/* Deliberately outside .rt-guardrail-legend, which the narrow-screen block below hides. The
   trigger-balance explainer is the only place the $5,000 solver tolerance is stated, so it has to
   survive on a phone. */
.rt-guardrail-explainer[b-wmpc9dnhne] {
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text-muted);
}

/* ---- Fine-tuning the ladder's shape ------------------------------------- */

/* Behind a disclosure, because the recommendation is what most households want and four dials
   on the page they came to make a decision on would read as four more decisions. */
.rt-guardrail-shape[b-wmpc9dnhne] {
    display: flex;
    flex-direction: column;
    gap: var(--rt-space-3);
}

.rt-guardrail-shape-toggle[b-wmpc9dnhne] {
    align-self: flex-start;
}

.rt-guardrail-shape-panel[b-wmpc9dnhne] {
    display: flex;
    flex-direction: column;
    gap: var(--rt-space-3);
    padding: var(--rt-space-4);
    border-radius: var(--rt-radius-md);
    border: 0.0625rem solid var(--rt-color-border-subtle);
    background: var(--rt-color-surface-alt);
}

/* auto-fit rather than a fixed column count: each field carries a paragraph of reasoning under
   it, and two of those side by side at 30rem is unreadable. */
.rt-guardrail-shape-grid[b-wmpc9dnhne] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--rt-space-4);
}

.rt-guardrail-shape-field[b-wmpc9dnhne] {
    display: flex;
    flex-direction: column;
    gap: var(--rt-space-1);
    min-inline-size: 0;
}

.rt-guardrail-shape-field .rt-form-hint[b-wmpc9dnhne] {
    margin-block-end: 0;
    color: var(--rt-color-text-muted);
    font-size: var(--rt-text-xs);
}

/* Which line this rail watches, on the rail itself. Only rendered when the two rails differ, so
   it never repeats the target the footnote already states. Wraps onto its own line on a narrow
   screen rather than squeezing the label it qualifies. */
.rt-guardrail-line-note[b-wmpc9dnhne] {
    display: block;
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text-muted);
}