@import 'RoundTuit.Web.Client.cpqy26sb6b.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/Charts/LineChart.razor.rz.scp.css */
/* The line chart. Every colour is a chart token from design-tokens.css; the SVG scales with its
   box, so nothing here names a pixel. */

.rt-chart[b-oag6fpha7a] {
    position: relative;
    inline-size: 100%;
}

.rt-chart-svg[b-oag6fpha7a] {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 720 / 300;
    overflow: visible;
}

.rt-chart-grid[b-oag6fpha7a] {
    stroke: var(--rt-color-chart-grid);
    stroke-width: 0.0625rem;
}

.rt-chart-axis[b-oag6fpha7a] {
    stroke: var(--rt-color-chart-axis);
    stroke-width: 0.0625rem;
}

/* ::deep because the labels are written as markup (Razor reserves <text>), and CSS isolation never gives
   markup the component's scope attribute — a plain selector here matched nothing, leaving the labels in
   SVG's default black at the inherited size. */
.rt-chart[b-oag6fpha7a]  .rt-chart-axis-label {
    fill: var(--rt-color-chart-axis);
    font-family: var(--rt-font-mono);
    font-size: 0.6875rem;
}

.rt-chart-line[b-oag6fpha7a] {
    stroke-width: 0.125rem;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.rt-chart-area[b-oag6fpha7a] {
    stroke: none;
}

.rt-chart-region[b-oag6fpha7a] {
    stroke: none;
}

.rt-chart-region--above[b-oag6fpha7a] { fill: var(--rt-color-chart-above); }
.rt-chart-region--below[b-oag6fpha7a] { fill: var(--rt-color-chart-below); }

/* Series colours. A line takes its colour as a stroke, an area as a fill, a dot as both. */
.rt-chart-line.rt-chart-series--income[b-oag6fpha7a] { stroke: var(--rt-color-chart-line); }
.rt-chart-line.rt-chart-series--balance[b-oag6fpha7a] { stroke: var(--rt-color-chart-line); }
.rt-chart-line.rt-chart-series--upper[b-oag6fpha7a] { stroke: var(--rt-color-chart-marker-upper); }
.rt-chart-line.rt-chart-series--lower[b-oag6fpha7a] { stroke: var(--rt-color-chart-marker-lower); }
.rt-chart-area.rt-chart-series--planned[b-oag6fpha7a] { fill: var(--rt-color-chart-planned); }

.rt-chart-dot[b-oag6fpha7a] {
    stroke: var(--rt-color-surface);
    stroke-width: 0.0625rem;
}

.rt-chart-dot.rt-chart-series--income[b-oag6fpha7a],
.rt-chart-dot.rt-chart-series--balance[b-oag6fpha7a] { fill: var(--rt-color-chart-line); }
.rt-chart-dot.rt-chart-series--planned[b-oag6fpha7a] { fill: var(--rt-color-chart-axis); }
.rt-chart-dot.rt-chart-series--upper[b-oag6fpha7a] { fill: var(--rt-color-chart-marker-upper); }
.rt-chart-dot.rt-chart-series--lower[b-oag6fpha7a] { fill: var(--rt-color-chart-marker-lower); }

/* Dashed verticals: the moment something happened. */
.rt-chart-marker[b-oag6fpha7a] {
    stroke-width: 0.0625rem;
    stroke-dasharray: 0.25rem 0.1875rem;
}

.rt-chart-marker--upper[b-oag6fpha7a] { stroke: var(--rt-color-chart-marker-upper); }
.rt-chart-marker--lower[b-oag6fpha7a] { stroke: var(--rt-color-chart-marker-lower); }
.rt-chart-marker--within[b-oag6fpha7a] { stroke: var(--rt-color-chart-axis); }
.rt-chart-marker--inflation-up[b-oag6fpha7a] { stroke: var(--rt-color-chart-marker-inflation-up); }
.rt-chart-marker--inflation-down[b-oag6fpha7a] { stroke: var(--rt-color-chart-marker-inflation-down); }

.rt-chart-cursor[b-oag6fpha7a] {
    stroke: var(--rt-color-chart-cursor);
    stroke-width: 0.0625rem;
}

.rt-chart-hit[b-oag6fpha7a] {
    fill: transparent;
    pointer-events: all;
}

/* The tooltip, placed at the active month by a custom property the markup sets. Flipped to the
   other side of the cursor past the middle so it never leaves the chart. */
.rt-chart-tooltip[b-oag6fpha7a] {
    position: absolute;
    inset-block-start: var(--rt-space-2);
    inset-inline-start: var(--rt-chart-x, 0%);
    transform: translateX(var(--rt-space-2));
    min-inline-size: 11rem;
    padding: var(--rt-space-2) var(--rt-space-3);
    border-radius: var(--rt-radius-sm);
    border: 0.0625rem solid var(--rt-color-border-subtle);
    background: var(--rt-color-surface);
    box-shadow: var(--rt-shadow-sm);
    font-size: var(--rt-text-xs);
    color: var(--rt-color-text);
    pointer-events: none;
    z-index: 2;
}

.rt-chart-tooltip--end[b-oag6fpha7a] {
    transform: translateX(calc(-100% - var(--rt-space-2)));
}

.rt-chart-tooltip-month[b-oag6fpha7a] {
    font-family: var(--rt-font-mono);
    font-weight: 700;
    margin-block-end: var(--rt-space-1);
}

/* The keyboard control: hidden until focused, then a thin bar under the chart. */
.rt-chart-keyboard[b-oag6fpha7a] {
    inline-size: 100%;
    margin-block-start: var(--rt-space-1);
}

/* On a phone the chart is a few hundred pixels wide and a floating tooltip covers most of it, so
   it sits under the chart instead — full width, in flow, still following the cursor's month. */
@media (max-width: 48rem) {
    .rt-chart-tooltip[b-oag6fpha7a],
    .rt-chart-tooltip--end[b-oag6fpha7a] {
        position: static;
        transform: none;
        inline-size: 100%;
        margin-block-start: var(--rt-space-2);
    }
}
/* /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/Components/LadderSlider.razor.rz.scp.css */
.rt-ladder-slider-input[b-1os4wmtgcn] {
    display: block;
    inline-size: 100%;
    accent-color: var(--rt-color-primary);
    cursor: pointer;
}

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

/* The stops, under the track. Each is a zero-width anchor at the thumb's centre for that position: a
   range thumb travels from half its width in from one edge to half its width in from the other, so the
   anchor is 0.5rem (half the 1rem thumb) plus that share of what remains. A grid of equal columns puts
   the notches in the wrong place everywhere but the middle. */
.rt-ladder-scale[b-1os4wmtgcn] {
    position: relative;
    list-style: none;
    margin: var(--rt-space-1) 0 0;
    padding: 0;
    block-size: 2.25rem;
    font-family: var(--rt-font-mono);
    font-size: var(--rt-text-xs);
    line-height: 1.1;
    color: var(--rt-color-text-muted);
}

.rt-ladder-tick[b-1os4wmtgcn] {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc(0.5rem + (100% - 1rem) * var(--rt-ladder-stop, 0));
    inline-size: 0;
}

.rt-ladder-tick-mark[b-1os4wmtgcn] {
    position: absolute;
    inset-block-start: 0;
    inline-size: 0.125rem;
    block-size: 0.375rem;
    transform: translateX(-50%);
    background: var(--rt-color-border-subtle);
}

/* Centred under the notch, except at the two ends, which align outward so the first and last labels
   stay inside the card instead of hanging past its edge. */
.rt-ladder-tick-label[b-1os4wmtgcn] {
    position: absolute;
    inset-block-start: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%);

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

.rt-ladder-tick--start .rt-ladder-tick-label[b-1os4wmtgcn] {
    align-items: flex-start;
    transform: translateX(-0.5rem);
}

.rt-ladder-tick--end .rt-ladder-tick-label[b-1os4wmtgcn] {
    align-items: flex-end;
    transform: translateX(calc(-100% + 0.5rem));
}

.rt-ladder-tick-note[b-1os4wmtgcn] {
    font-family: var(--rt-font-sans);
}

/* Where the thumb is. A scale whose current stop is not marked leaves the reader counting notches. */
.rt-ladder-tick--selected .rt-ladder-tick-label[b-1os4wmtgcn] {
    color: var(--rt-color-text);
    font-weight: 700;
}

/* What the household spends today, and the floor the slider stops at: the two rungs a choice is made
   relative to, marked on the track itself so they read even where a label was thinned away. */
.rt-ladder-tick--current .rt-ladder-tick-mark[b-1os4wmtgcn] {
    inline-size: 0.25rem;
    block-size: 0.5rem;
    background: var(--rt-color-primary);
}

.rt-ladder-tick--floor .rt-ladder-tick-mark[b-1os4wmtgcn] {
    inline-size: 0.25rem;
    block-size: 0.5rem;
    background: var(--rt-color-text-muted);
}

/* Every other label at a phone's width. */
@media (max-width: 36rem) {
    .rt-ladder-tick--narrow-hidden .rt-ladder-tick-label[b-1os4wmtgcn] {
        display: none;
    }
}
/* /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);
}

/* "Retirement beginning [before | during | after] the period" — the segmented control is the
   shared money-view one; the words either side complete the sentence. */
.rt-history-start[b-sjkksfka4f] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rt-space-2) var(--rt-space-3);
}

.rt-history-start-label[b-sjkksfka4f] {
    font-size: var(--rt-text-sm);
    color: var(--rt-color-text-muted);
}

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

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

/* Dollar figures in the verdict are data: IBM Plex Mono, as everywhere else in the module. */
.rt-verdict strong[b-sjkksfka4f] {
    font-family: var(--rt-font-mono);
}

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

/* ---- Legends ---- */

.rt-history-legend[b-sjkksfka4f] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rt-space-2) 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.875rem;
    block-size: 0.5rem;
    border-radius: var(--rt-radius-sm);
    vertical-align: middle;
}

.rt-history-key--line[b-sjkksfka4f] { block-size: 0.125rem; background: var(--rt-color-chart-line); }
.rt-history-key--planned[b-sjkksfka4f] { background: var(--rt-color-chart-planned); }
.rt-history-key--above[b-sjkksfka4f] { background: var(--rt-color-chart-above); }
.rt-history-key--below[b-sjkksfka4f] { background: var(--rt-color-chart-below); }

/* Marker keys are dashed verticals, drawn as a short dashed border. */
.rt-history-key--marker-upper[b-sjkksfka4f],
.rt-history-key--marker-lower[b-sjkksfka4f],
.rt-history-key--marker-inflation-up[b-sjkksfka4f],
.rt-history-key--marker-inflation-down[b-sjkksfka4f] {
    inline-size: 0;
    block-size: 0.75rem;
    border-inline-start: 0.125rem dashed;
    border-radius: 0;
}

.rt-history-key--marker-upper[b-sjkksfka4f] { border-color: var(--rt-color-chart-marker-upper); }
.rt-history-key--marker-lower[b-sjkksfka4f] { border-color: var(--rt-color-chart-marker-lower); }
.rt-history-key--marker-inflation-up[b-sjkksfka4f] { border-color: var(--rt-color-chart-marker-inflation-up); }
.rt-history-key--marker-inflation-down[b-sjkksfka4f] { border-color: var(--rt-color-chart-marker-inflation-down); }

/* ---- 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: 5.5rem 4.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--lower[b-sjkksfka4f] { border-inline-start-color: var(--rt-color-chart-marker-lower); }
.rt-history-event--upper[b-sjkksfka4f] { border-inline-start-color: var(--rt-color-chart-marker-upper); }
.rt-history-event--within[b-sjkksfka4f] { border-inline-start-color: var(--rt-color-text-muted); }

/* A crossing that had reversed by December changed nothing; it is listed, but quietly. */
.rt-history-event--unapplied[b-sjkksfka4f] { opacity: 0.7; }

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

.rt-history-event-what[b-sjkksfka4f] {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 48rem) {
    .rt-history-event[b-sjkksfka4f] {
        grid-template-columns: 5.5rem 1fr;
    }

    .rt-history-event-age[b-sjkksfka4f] {
        display: none;
    }

    .rt-history-event-balance[b-sjkksfka4f] {
        grid-column: 2;
        text-align: start;
    }
}
/* /RetirementModule/Pages/PlanHousehold.razor.rz.scp.css */
/* The portfolio's overall stocks / bonds / cash, as one read-only bar. Each part's width is the
   share of the spendable portfolio it holds, passed in as --rt-split-share. */

.rt-portfolio-split[b-far5zaxoel] {
    --rt-split-share: 0%;
    display: flex;
    inline-size: 100%;
    block-size: 0.75rem;
    border-radius: var(--rt-radius-sm);
    overflow: hidden;
    background: var(--rt-color-border-subtle);
}

.rt-portfolio-split-part[b-far5zaxoel] {
    display: block;
    inline-size: var(--rt-split-share, 0%);
    block-size: 100%;
}

.rt-portfolio-split-part--stock[b-far5zaxoel] { background: var(--rt-color-primary); }

.rt-portfolio-split-part--bond[b-far5zaxoel] { background: var(--rt-color-secondary); }

.rt-portfolio-split-part--cash[b-far5zaxoel] { background: var(--rt-color-accent); }

.rt-portfolio-split-legend[b-far5zaxoel] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rt-space-1) var(--rt-space-4);
    font-size: var(--rt-text-sm);
}

.rt-portfolio-split-legend-item[b-far5zaxoel] {
    display: inline-flex;
    align-items: center;
    gap: var(--rt-space-1);
    font-family: var(--rt-font-mono);
}

.rt-portfolio-split-swatch[b-far5zaxoel] {
    display: inline-block;
    inline-size: 0.75rem;
    block-size: 0.75rem;
    border-radius: var(--rt-radius-sm);
}
/* /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 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-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;
}

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

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

/* The saved choice, told apart from a row that is merely being shown. */
.rt-strategy-tag--plan[b-0xpim6zijl] {
    background: var(--rt-color-success-soft);
    font-weight: 600;
}

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