@import 'RoundTuit.Web.Client.ww9o345pzk.bundle.scp.css';
@import '_content/Blazored.Toast/Blazored.Toast.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/Pages/ExpenseReview.razor.rz.scp.css */
/* One-off: receipt thumbnails in the review queue. */
.rt-receipt-thumb[b-7lz3hqwjip] {
    width: 5rem;
    height: 5rem;
    object-fit: cover;
}
/* /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[b-27gkez5nuw] {
  font-size: var(--rt-text-sm);
  color: var(--rt-color-danger);
}

.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/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);
}

.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);
}
/* /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);
}

.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);
    cursor: help;
}

.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;
    }
}