/* Roth Conversion calculator (Pages/RothConversion). Layout comes from the Comprehensive three-panel classes in
   stylesv53.css; this file styles the panels' content. Chart colors: the validated categorical order
   (traditional IRA blue, taxable account orange, Roth aqua; taxes red / yellow / violet / orange). */

.roth-conversion-page {
    --rc-ink: #181c32;
    --rc-ink-2: #3d4a5c;
    --rc-muted: #5c6d82;
    --rc-line: #e4e8f0;
    --rc-traditional: #2a78d6;
    --rc-taxable: #eb6834;
    --rc-roth: #1baf7a;
    --rc-good: #11753a;
    --rc-bad: #b42318;
}

.roth-conversion-page .rc-scenarios-host,
.main-layout-comprehensive > .comprehensive-sidebar-host--scenarios.rc-scenarios-host {
    --scenarios-page-max-width: 258px;
}

/* ---------------------------------------------------------------- Assumptions (same card look as Comprehensive) */

/* The inputs scroll inside their panel. The Comprehensive planner's own rule for this is tied to its #assumptions id
   (stylesv53.css), so a calculator whose inputs carry another id (Buy-Sell, S Corporation Trust, Swap Power, the
   College planner) was cut off at the bottom of the window with no way to reach the lower inputs. Every calculator
   built on these panels gives its inputs the rc-assumptions class, so the rule is here once, with the same values. */
.assumptionsPage .assumptions.rc-assumptions {
    flex: 1 1 0%;
    min-height: 0;
    overflow: auto;
    width: 100%;
    position: relative;
    z-index: 2;
    background-color: #f4f6fa;
    padding: 0.4rem 0.25rem 1rem;
    border-radius: 0 0 12px 12px;
    box-sizing: border-box;
}

.rc-assumptions .card:hover {
    border-color: grey;
    box-shadow: var(--ev-input-boxShadow-hover);
    transition: var(--ev-input-transition);
}

.rc-assumptions .card-body {
    padding: 0 0.2rem;
    overflow: visible;
}

.rc-assumptions .assumptions-input-group > .card-header {
    padding: 0.5rem;
    position: sticky;
    z-index: 2;
    top: 0;
    box-shadow: 0 -0.4rem 0 0.2rem #f4f6fa;
}

.rc-assumptions .card-header h6 {
    margin-bottom: 0;
    font-weight: bold;
}

.rc-assumptions .assumption-section-anchor.scroll-margin {
    scroll-margin-top: 12px;
}

.rc-assumptions .rc-note-cell {
    font-size: 0.8125rem;
    color: var(--rc-muted, #5c6d82);
    line-height: 1.4;
    padding: 0.45rem 0.35rem !important;
    font-weight: normal;
    text-align: left;
}

.rc-assumptions .rc-note-cell b {
    color: #181c32;
}

.rc-assumptions .rc-note-cell--warning {
    color: #b42318;
    font-weight: 600;
}

.rc-assumptions .ev-hyperlink-btn {
    width: auto !important;
    font-size: 0.8125rem;
}

/* ---------------------------------------------------------------- Workspace cards */

.workspaceView .workspace-tab-pane-scroll.rc-pane {
    align-items: stretch;
    padding: 0 0.6rem 1.25rem;
}

.rc-card {
    width: 100%;
    max-width: 1180px;
    margin: 0.25rem auto 0.85rem;
    padding: 1.1rem 1.4rem 1.3rem;
    background: #fff;
    color: #181c32;
    border: 1px solid #e4e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(24, 28, 50, 0.06);
    box-sizing: border-box;
}

.rc-card-title {
    margin-bottom: 1rem;
}

.rc-card-title h2 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    color: #181c32;
}

.rc-card-title h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.15rem;
}

.rc-card-title p {
    margin: 0;
    color: #5c6d82;
    font-size: 0.875rem;
    line-height: 1.45;
}

.rc-card-title--compact {
    margin-bottom: 0.85rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #e4e8f0;
    text-align: center;
}

.rc-muted {
    color: #6b7a8f;
}

.rc-good {
    color: #11753a;
}

.rc-bad {
    color: #b42318;
}

.rc-lead {
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 0.35rem 0 0.75rem;
    color: #3d4a5c;
}

/* Stat tiles */
.rc-card {
    container-type: inline-size;
}

.rc-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

@container (max-width: 640px) {
    .rc-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.rc-tile {
    border: 1px solid #e4e8f0;
    border-radius: 10px;
    padding: 0.65rem 0.8rem 0.6rem;
    background: #fbfcfe;
    min-width: 0;
}

.rc-tile--hero {
    background: #f0f7fc;
    border-color: #c5dff4;
}

.rc-tile-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #5c6d82;
}

.rc-tile-value {
    font-size: 1.35rem;
    font-weight: 600;
    margin-top: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rc-tile--hero .rc-tile-value {
    font-size: 1.6rem;
}

.rc-tile-value .bi {
    font-size: 1rem;
}

/* A tile whose value is a short phrase rather than a number (Charity tab). */
.rc-tile-value.rc-tile-value--text {
    font-size: 1.05rem;
    white-space: normal;
    line-height: 1.3;
    padding-top: 0.2rem;
}

.rc-bullets {
    padding-left: 1.15rem;
    margin: 0.5rem 0 0.25rem;
}

.rc-bullets li {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #3d4a5c;
}

/* Charity tab before any giving is entered. */
.rc-empty {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    background: #f6f4fd;
    border: 1px dashed #cfc7ef;
    border-radius: 10px;
    font-size: 0.875rem;
    line-height: 1.5;
}

.rc-empty > .bi {
    font-size: 1.4rem;
    color: #4a3aa7;
}

.rc-empty p,
.rc-empty ul {
    margin-bottom: 0.4rem;
}

.rc-tile-sub {
    font-size: 0.75rem;
    color: #6b7a8f;
    margin-top: 0.1rem;
    line-height: 1.3;
}

/* The same result stated at the second death in today's dollars (the Monte Carlo's measure). */
.rc-tile-alt {
    margin-top: 0.45rem;
    padding-top: 0.35rem;
    border-top: 1px dashed #d5dde8;
    font-size: 0.75rem;
    color: #6b7a8f;
    line-height: 1.3;
}

.rc-tile-alt-value {
    font-weight: 600;
    color: #2b3a4e;
}

/* Callouts */
.rc-callout {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin-top: 0.5rem;
    padding: 0.6rem 0.8rem;
    font-size: 0.875rem;
    line-height: 1.45;
    background: #f3f8fe;
    border: 1px solid #d6e4f5;
    border-radius: 10px;
}

.rc-callout > .bi {
    font-size: 1.05rem;
    color: #0b5ed7;
    line-height: 1.3;
}

.rc-callout--best {
    background: #f1fbf4;
    border-color: #b7e4c7;
}

.rc-callout--best > .bi {
    color: #11753a;
}

.rc-callout--warning {
    background: #fff8ec;
    border-color: #f7d9a8;
}

.rc-callout--warning > .bi {
    color: #b45309;
}

/* Nine result tabs: a smaller minimum width than Comprehensive's keeps them on one row. */
.roth-conversion-page .workspaceView .workspace-view-shell .tab-button {
    min-width: 4.75rem;
}

.rc-callout--charity {
    background: #f6f4fd;
    border-color: #dcd6f3;
}

.rc-callout--charity > .bi {
    color: #4a3aa7;
}

.rc-callout--care {
    background: #f2f9fb;
    border-color: #c9e4ec;
}

.rc-callout--care > .bi {
    color: #1f7a8c;
}

/* ---------------------------------------------------------------- Money-flow picture (Trust Logistics look) */

.rc-flow {
    display: flex;
    flex-direction: column;
}

.rc-flow-row {
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: 0.9rem;
    align-items: center;
}

.rc-flow-when {
    text-align: right;
    font-size: 0.8125rem;
    color: #5c6d82;
    line-height: 1.3;
}

.rc-flow-when b {
    display: block;
    color: #181c32;
    font-size: 0.9375rem;
}

.rc-flow-when span {
    display: block;
}

.rc-flow-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: stretch;
}

.rc-box {
    flex: 1 1 150px;
    min-width: 140px;
    max-width: 240px;
    background: #fff;
    border: 1px solid #d5dde8;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
}

.rc-box-head {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3rem 0.5rem;
    color: #181c32;
}

.rc-box-value {
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.35rem 0.5rem 0;
}

.rc-box-sub {
    font-size: 0.72rem;
    color: #5c6d82;
    padding: 0.1rem 0.5rem 0.45rem;
    line-height: 1.3;
}

.rc-box--traditional {
    border-color: rgba(42, 120, 214, 0.45);
}

.rc-box--traditional .rc-box-head {
    background: rgba(42, 120, 214, 0.14);
}

.rc-box--taxable {
    border-color: rgba(235, 104, 52, 0.45);
}

.rc-box--taxable .rc-box-head {
    background: rgba(235, 104, 52, 0.14);
}

.rc-box--roth {
    border-color: rgba(27, 175, 122, 0.5);
}

.rc-box--roth .rc-box-head {
    background: rgba(27, 175, 122, 0.16);
}

.rc-box--tax {
    border-color: rgba(220, 53, 69, 0.4);
}

.rc-box--tax .rc-box-head {
    background: rgba(239, 68, 68, 0.15);
}

.rc-box--family {
    border-color: rgba(20, 121, 57, 0.4);
}

.rc-box--family .rc-box-head {
    background: rgba(34, 197, 94, 0.18);
}

.rc-oval {
    flex: 0 1 205px;
    min-width: 175px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    border: 1px solid;
    line-height: 1.3;
}

.rc-oval span {
    font-size: 0.75rem;
    font-weight: 700;
}

.rc-oval b {
    font-size: 1.08rem;
}

.rc-oval small {
    font-size: 0.7rem;
    color: #3d4a5c;
}

.rc-oval--tax {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(220, 53, 69, 0.35);
}

.rc-oval--family {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(20, 121, 57, 0.35);
}

.rc-box--charity {
    border-color: rgba(74, 58, 167, 0.4);
}

.rc-box--charity .rc-box-head {
    background: rgba(74, 58, 167, 0.13);
}

.rc-box--trust {
    border-color: rgba(15, 118, 110, 0.45);
}

.rc-box--trust .rc-box-head {
    background: rgba(15, 118, 110, 0.13);
}

.rc-box--care {
    border-color: rgba(31, 122, 140, 0.4);
}

.rc-box--care .rc-box-head {
    background: rgba(31, 122, 140, 0.12);
}

.rc-oval--charity {
    background: rgba(74, 58, 167, 0.12);
    border-color: rgba(74, 58, 167, 0.35);
}

.rc-oval--neutral {
    background: #f4f6f9;
    border-color: #d5dde8;
}

.rc-flow-arrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.4rem 0;
    padding-left: calc(118px + 0.9rem + 1.2rem);
    font-size: 0.8125rem;
    color: #5c6d82;
}

.rc-arrow {
    flex: 0 0 auto;
}

.rc-arrow path {
    fill: #fff878;
    stroke: #a59f34;
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.rc-footnote {
    font-size: 0.75rem;
    color: #6b7a8f;
    margin: 0.9rem 0 0;
}

/* ---------------------------------------------------------------- Panels, bar lists, legends */

.rc-panel {
    margin-top: 1.1rem;
}

.rc-panel:first-of-type {
    margin-top: 0.25rem;
}

.rc-panel h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
    color: #181c32;
}

.rc-panel-note {
    font-size: 0.8125rem;
    color: #5c6d82;
    margin: 0.25rem 0 0.5rem;
    line-height: 1.45;
}

.rc-two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.rc-two-col > .rc-panel {
    margin-top: 0.25rem;
}

.rc-table.rc-table--wrap-head th {
    white-space: normal;
    min-width: 4.5rem;
    line-height: 1.25;
}

/* Long scenario names wrap in the first column, so a wide table still fits beside both side panels. */
.rc-table.rc-table--wrap-names td:first-child {
    white-space: normal;
    min-width: 10rem;
    max-width: 14rem;
}

.rc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    font-size: 0.75rem;
    color: #3d4a5c;
    margin: 0.2rem 0 0.55rem;
}

.rc-key {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 0.35rem;
    vertical-align: -1px;
    box-sizing: border-box;
}

.rc-key--traditional { background: #2a78d6; }
.rc-key--taxable { background: #eb6834; }
.rc-key--roth { background: #1baf7a; }
.rc-key--client-tax { background: #e34948; }
.rc-key--medicare { background: #eda100; }
.rc-key--estate { background: #4a3aa7; }
.rc-key--heirs { background: #eb6834; }
.rc-key--investment { background: #2f9aa0; }

.rc-barlist,
.rc-ranges {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rc-barlist-row,
.rc-range-row {
    display: grid;
    grid-template-columns: minmax(130px, 36%) 1fr 78px;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.32rem 0.45rem;
    font: inherit;
    color: inherit;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
}

.rc-barlist-row:hover,
.rc-range-row:hover {
    background: #f3f7fc;
}

.rc-barlist-row--selected,
.rc-barlist-row--selected:hover {
    background: #e8f3fb;
    border-color: #bcdcf2;
}

/* Scenario names can be long ("Fill the 24% Bracket, Keep $500K"): up to two lines, then an ellipsis. */
.rc-barlist-label {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.rc-barlist-track {
    position: relative;
    height: 14px;
    background: #f1f3f7;
    border-radius: 4px;
}

.rc-barlist-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 0 4px 4px 0;
}

.rc-bar-primary,
.rc-bar-gain {
    background: #2a78d6;
}

.rc-bar-loss {
    background: #e34948;
    border-radius: 4px 0 0 4px;
}

.rc-barlist-zero {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 1px;
    background: #8a93a3;
}

.rc-barlist-value {
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

/* Compare: the line under a scenario for what charity receives (the purple bar marks it; the text stays in ink). */
.rc-barlist-sublabel {
    font-size: 0.72rem;
    font-weight: 500;
    color: #3d4a5c;
    padding-left: 0.6rem;
    margin-top: -0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rc-barlist-sublabel--total,
.rc-barlist-subvalue--total {
    font-weight: 600;
    color: #1f2a3a;
}

.rc-barlist-track--sub {
    height: 5px;
    margin-top: -0.3rem;
    background: transparent;
}

.rc-bar-charity {
    background: #4a3aa7;
    border-radius: 0 3px 3px 0;
}

.rc-bar-charity--loss {
    border-radius: 3px 0 0 3px;
}

.rc-barlist-subvalue {
    font-size: 0.72rem;
    font-weight: 600;
    color: #3d4a5c;
    text-align: right;
    white-space: nowrap;
    margin-top: -0.3rem;
}

.rc-barlist-track--stacked {
    display: flex;
    gap: 2px;
    background: transparent;
}

.rc-seg {
    height: 100%;
    min-width: 2px;
}

.rc-seg:last-child {
    border-radius: 0 4px 4px 0;
}

.rc-seg--client-tax { background: #e34948; }
.rc-seg--medicare { background: #eda100; }
.rc-seg--estate { background: #4a3aa7; }
.rc-seg--heirs { background: #eb6834; }
.rc-seg--investment { background: #2f9aa0; }

/* Charity On/Off: the second part, the ways of giving, under its own heading. */
.rc-card-title--compact.rc-ways-title {
    text-align: left;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e4e8f0;
    border-bottom: 0;
}

/* Charity On/Off: the heading with the household's on/off switch beside it. */
.rc-onoff-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.35rem;
}

.rc-onoff-head h4 {
    margin: 0;
}

.rc-onoff-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #3d4a5c;
}

.rc-onoff-switch .form-control {
    width: 7.5rem;
}

/* Monte Carlo: the planner first chooses what the simulation varies. */
.rc-choice-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@container (max-width: 640px) {
    .rc-choice-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

.rc-choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding: 0.7rem 0.85rem;
    text-align: left;
    background: #fff;
    border: 1px solid #c5d4e3;
    border-radius: 10px;
    cursor: pointer;
}

.rc-choice:hover {
    background: #f0f7fc;
    border-color: #29abe2;
}

.rc-choice--on,
.rc-choice--on:hover {
    background: #e8f3fb;
    border: 2px solid #2177f4;
    padding: calc(0.7rem - 1px) calc(0.85rem - 1px);
}

.rc-choice-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #181c32;
}

.rc-choice-title .bi {
    color: #2177f4;
    margin-right: 0.2rem;
}

.rc-choice-text {
    font-size: 0.78rem;
    line-height: 1.45;
    color: #3d4a5c;
}

.rc-choice-prompt {
    margin-top: 0.6rem;
    font-weight: 600;
    color: #0b5ed7;
}

/* Column labels over a range chart, lined up with its rows. */
.rc-range-head {
    display: grid;
    grid-template-columns: minmax(130px, 36%) 1fr 78px;
    gap: 0.6rem;
    padding: 0 0.45rem 0.1rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #6b7a8f;
}

/* Monte Carlo ranges */
.rc-range-track {
    position: relative;
    height: 18px;
}

.rc-range-whisker {
    position: absolute;
    top: 8px;
    height: 2px;
    background: #9aa3b2;
}

.rc-range-box {
    position: absolute;
    top: 2px;
    height: 14px;
    border: 2px solid #2a78d6;
    border-radius: 4px;
    background: rgba(42, 120, 214, 0.1);
    box-sizing: border-box;
}

.rc-range-median {
    position: absolute;
    top: 0;
    width: 2px;
    height: 18px;
    margin-left: -1px;
    background: #181c32;
}

.rc-range-axis {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: #6b7a8f;
    margin: 0.15rem calc(78px + 0.6rem + 0.45rem) 0 calc(36% + 0.6rem + 0.45rem);
}

.rc-range-key {
    display: inline-block;
    width: 16px;
    height: 10px;
    margin-right: 0.35rem;
    vertical-align: -1px;
    position: relative;
}

.rc-range-key--whisker::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 4px;
    height: 2px;
    background: #9aa3b2;
}

.rc-range-key--box {
    border: 2px solid #2a78d6;
    border-radius: 3px;
    background: rgba(42, 120, 214, 0.1);
}

.rc-range-key--median::before {
    content: "";
    position: absolute;
    left: 7px;
    top: -2px;
    width: 2px;
    height: 14px;
    background: #181c32;
}

/* Charts */
.rc-chart-frame {
    width: 100%;
    margin: 0.25rem 0 0.5rem;
    padding: 0.25rem;
    border: 1px solid #eef0f4;
    border-radius: 10px;
    box-sizing: border-box;
}

/* Tables */
.rc-table-wrap {
    overflow-x: auto;
}

.rc-table-wrap--tall {
    max-height: 560px;
    overflow: auto;
}

.rc-table {
    font-size: 0.8125rem;
    margin-bottom: 0.25rem;
}

.rc-table th {
    white-space: nowrap;
    vertical-align: bottom;
}

.rc-table-wrap--tall .rc-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.rc-table td {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rc-table--dense td,
.rc-table--dense th {
    padding: 0.2rem 0.45rem;
}

/* The Compare tab's numbers: many columns, so a slightly smaller type keeps them on screen. */
.rc-table--compact td,
.rc-table--compact th {
    padding: 0.22rem 0.35rem;
    font-size: 0.75rem;
}

.rc-table--narrow {
    width: auto;
    min-width: 360px;
}

.rc-table tbody tr[role=button] {
    cursor: pointer;
}

.rc-table tr.rc-row-selected > td {
    background: #e8f3fb;
}

.rc-table tr.rc-row-conversion > td {
    background: #f2fbf6;
}

.rc-table tr.rc-row-care > td {
    background: #fff6ec;
}

.rc-table tr.rc-row-total > td {
    font-weight: 700;
    background: #f7f8fa;
}

/* The family's total in a comparison: the best plan's figure in bold, the row shaded like a total. */
.rc-table tr.rc-row-family > td {
    background: #f7f8fa;
}

/* A column heading's second line: the scenario's swatch and name. */
.rc-th-sub {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    font-weight: 400;
    font-size: 0.78rem;
    color: #52514e;
    white-space: normal;
}

.rc-notes ul {
    padding-left: 1.15rem;
    margin-bottom: 0.25rem;
}

.rc-notes li,
.rc-notes p {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #3d4a5c;
}

.rc-notes li {
    margin-bottom: 0.4rem;
}

/* ---------------------------------------------------------------- Scenario cards (right panel) */

.rc-scenario-list {
    background: #f1f5f9;
}

.rc-scenarios-top {
    padding: 0.5rem 0.65rem 0.4rem;
    border-bottom: 1px solid #e4e8f0;
}

.rc-scenarios-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #181c32;
    margin-bottom: 0.1rem;
}

.scenario-list-view .list-group-item.rc-scenario-card {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0.6rem;
    margin: 4px 6px;
    background: #fff;
    cursor: pointer;
}

.scenario-list-view .list-group-item.rc-scenario-card.active {
    background: #cbe8f6;
    border-color: #70c0e7 !important;
}

.rc-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
}

.rc-card-swatch {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-top: 4px;
    border-radius: 50%;
    box-sizing: border-box;
}

.scenario-list-view .rc-scenario-card .scenario-name {
    flex: 1 1 auto;
    width: auto;
    font-size: 12px;
    line-height: 1.3;
}

.rc-best-badge {
    flex: 0 0 auto;
    font-size: 0.65rem;
    font-weight: 700;
    color: #11753a;
    background: #e6f6ec;
    border: 1px solid #b7e4c7;
    border-radius: 999px;
    padding: 0 0.4rem;
    line-height: 1.5;
}

.rc-card-value {
    font-size: 1rem;
    font-weight: 700;
    margin-top: 0.2rem;
}

.rc-card-delta {
    font-size: 0.72rem;
    font-weight: 600;
}

.rc-card-delta--good { color: #11753a; }
.rc-card-delta--bad { color: #b42318; }
.rc-card-delta--neutral { color: #6b7a8f; }

.rc-mini-chart {
    display: block;
    width: 100%;
    height: 40px;
    margin-top: 0.4rem;
}

.rc-mini-area.rc-fill-traditional { fill: rgba(42, 120, 214, 0.55); }
.rc-mini-area.rc-fill-taxable { fill: rgba(235, 104, 52, 0.55); }
.rc-mini-area.rc-fill-roth { fill: rgba(27, 175, 122, 0.6); }

.rc-mini-baseline {
    stroke: #c9ced8;
    stroke-width: 1;
}

.rc-mini-caption {
    display: flex;
    gap: 0.45rem;
    margin-top: 0.15rem;
    font-size: 0.62rem;
    color: #6b7a8f;
}

.rc-mini-caption .rc-key {
    width: 7px;
    height: 7px;
    margin-right: 0.2rem;
    vertical-align: 0;
}

.rc-mini-age {
    margin-left: auto;
}

.rc-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.25rem;
    margin-top: 0.35rem;
}

.rc-card-action {
    font-size: 0.72rem;
    line-height: 1.4;
    padding: 0.1rem 0.45rem;
    color: #3d4a5c;
    background: #fff;
    border: 1px solid #c5d4e3;
    border-radius: 6px;
}

.rc-card-action:hover {
    background: #f0f7fc;
    border-color: #29abe2;
}

.rc-card-action--confirm {
    color: #b42318;
    border-color: #f1b5b0;
    font-weight: 600;
}

.scenario-list-view .rc-add-btn {
    margin: 0.5rem 6px 1rem;
    width: calc(100% - 12px);
}

.rc-scenarios-limit {
    font-size: 0.72rem;
    color: #6b7a8f;
    padding: 0.5rem 0.7rem 1rem;
}

/* What a plan keeps out of the conversions (care reserve and QCDs), on its card. */
.rc-card-kept {
    margin-top: 0.15rem;
    font-size: 0.7rem;
    color: #3d4a5c;
}

.rc-card-kept .bi {
    color: #6b7a8f;
    margin-right: 0.1rem;
}

/* An older file is offered the current starting scenarios once. */
.rc-upgrade {
    margin: 6px 6px 2px;
    padding: 0.5rem 0.6rem;
    font-size: 0.72rem;
    line-height: 1.4;
    color: #3d4a5c;
    background: #fff8e1;
    border: 1px solid #f1d58a;
    border-radius: 8px;
}

.rc-upgrade-actions {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.4rem;
}

/* Uniform / Tilted: where a plan holds its stocks and bonds, switched on the card itself. */
.rc-mix-switch {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 0.3rem;
    border: 1px solid #c5d4e3;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.rc-mix-option {
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.5;
    padding: 0.05rem 0.55rem;
    color: #3d4a5c;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.rc-mix-option + .rc-mix-option {
    border-left: 1px solid #c5d4e3;
}

.rc-mix-option:hover:not(.rc-mix-option--on) {
    background: #f0f7fc;
}

.rc-mix-option--on {
    color: #fff;
    background: #2177f4;
}

/* Every tax the plan's accounts bear, and what charity receives, under the card's figure. */
.rc-card-money {
    margin-top: 0.05rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: #6b7a8f;
}

.rc-card-taxes {
    color: #b42318;
}

.rc-card-charity {
    margin-left: 0.25rem;
    color: #4a3aa7;
}

/* A scenario the planner named: what plan it is, under the name. */
.rc-card-plan {
    margin: -0.05rem 0 0.1rem 1rem;
    font-size: 0.7rem;
    line-height: 1.2;
    color: #6b7686;
}

/* The Selected Scenario section: which card it changes. */
.rc-scenario-of {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
}

.rc-scenario-of .rc-card-swatch {
    margin-top: 4px;
}

/* The status quo card: the selected plan against it, in four lines; the early-death card uses the same rows. */
.rc-sq-compare {
    margin-top: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px solid #e4e8f0;
    font-size: 0.7rem;
    color: #3d4a5c;
}

.rc-sq-title {
    color: #6b7686;
}

.rc-sq-plan {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    margin: 0.1rem 0 0.2rem;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.25;
    color: #1f2a3a;
}

.rc-sq-plan .rc-card-swatch {
    margin-top: 2px;
}

.rc-sq-rows {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0.4rem;
    row-gap: 0.05rem;
    font-size: 0.7rem;
    color: #3d4a5c;
}

.rc-sq-rows b {
    text-align: right;
    white-space: nowrap;
}

/* The early-death card at the end of the list: a test of the selected plan, not a plan of its own. */
.rc-early-card {
    border-style: dashed;
    cursor: default;
}

.rc-early-icon {
    color: #6b7686;
    font-size: 0.8rem;
}

/* The card's controls: the stepped setting and the Uniform / Tilted switch, side by side. */
.rc-card-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
    cursor: default;
}

.rc-card-controls .rc-mix-switch {
    margin-top: 0;
}

.rc-step {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #c5d4e3;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.rc-step-btn {
    font-size: 0.72rem;
    line-height: 1;
    padding: 0 0.3rem;
    color: #3d4a5c;
    background: transparent;
    border: 0;
}

.rc-step-btn:hover:not(:disabled) {
    background: #f0f7fc;
}

.rc-step-btn:disabled {
    color: #c5ccd6;
}

.rc-step-value {
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.5;
    padding: 0.05rem 0.4rem;
    color: #181c32;
    border-left: 1px solid #c5d4e3;
    border-right: 1px solid #c5d4e3;
    white-space: nowrap;
}

/* The reposition scenario's account-by-account mix, on its card when selected. */
.rc-alloc {
    margin-top: 0.45rem;
    padding: 0.4rem 0.45rem 0.3rem;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid #b9dcef;
    border-radius: 8px;
    cursor: default;
}

.rc-alloc-title {
    font-size: 0.68rem;
    font-weight: 700;
    color: #3d4a5c;
    margin-bottom: 0.2rem;
}

.rc-alloc-row {
    display: grid;
    grid-template-columns: minmax(0, 5.6rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.66rem;
    line-height: 1.6;
    color: #3d4a5c;
}

.rc-alloc-row--total {
    font-weight: 700;
    border-top: 1px solid #dfe7f0;
    margin-top: 0.1rem;
    padding-top: 0.1rem;
}

.rc-alloc-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rc-alloc-bar {
    display: block;
    height: 7px;
    border-radius: 4px;
    background: #cfdae6;
    overflow: hidden;
}

.rc-alloc-stocks {
    display: block;
    height: 100%;
    background: #2a78d6;
}

.rc-alloc-value {
    white-space: nowrap;
    text-align: right;
}

.rc-alloc-legend {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.15rem;
    font-size: 0.6rem;
    color: #6b7a8f;
}

.rc-alloc-key {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 2px;
}

.rc-alloc-key + .rc-alloc-key,
.rc-alloc-legend .rc-alloc-key--bonds {
    margin-left: 0.35rem;
}

.rc-alloc-key--stocks { background: #2a78d6; }
.rc-alloc-key--bonds { background: #cfdae6; }

/* The same picture in the Assumptions panel, under This Scenario's Investments. */
.rc-alloc--inline {
    margin-top: 0.1rem;
    background: #f8fbfe;
    border-color: #dfe7f0;
}

.rc-alloc--inline .rc-alloc-title {
    font-weight: 600;
    font-size: 0.72rem;
}

.rc-alloc--inline .rc-alloc-row {
    grid-template-columns: 6.6rem minmax(2.5rem, 1fr) auto;
    font-size: 0.74rem;
}

/* Add Scenario: the plans on offer, listed under the button. */
.rc-add-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: -0.6rem 6px 1rem;
}

.rc-add-choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 0.35rem 0.55rem;
    background: #fff;
    border: 1px solid #c5d4e3;
    border-radius: 8px;
    cursor: pointer;
}

.rc-add-choice:hover {
    background: #f0f7fc;
    border-color: #29abe2;
}

.rc-add-choice-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #181c32;
}

.rc-add-choice-hint {
    font-size: 0.66rem;
    line-height: 1.35;
    color: #6b7a8f;
}

/* A section of the Assumptions panel brought into view from a scenario card. */
@keyframes rc-flash {
    from { background-color: #fff3c4; }
    to { background-color: transparent; }
}

.rc-flash {
    animation: rc-flash 1.6s ease-out;
}

/* ---------------------------------------------------------------- When to convert (timing search) */

.rc-timing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

@container (max-width: 760px) {
    .rc-timing-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.rc-timing-card {
    border: 1px solid #e4e8f0;
    border-radius: 10px;
    padding: 0.7rem 0.85rem 0.75rem;
    background: #fbfcfe;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rc-timing-card h4 {
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
}

.rc-timing-best {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.45rem;
    font-size: 0.8125rem;
    margin-bottom: 0.45rem;
}

.rc-timing-setting {
    font-weight: 600;
    color: #181c32;
}

.rc-timing-gain {
    font-size: 1.05rem;
    font-weight: 700;
}

.rc-timing-bars {
    display: block;
    width: 100%;
    height: 70px;
}

.rc-tb-gain { fill: #9ec5f4; }
.rc-tb-best { fill: #2a78d6; }
.rc-tb-loss { fill: #f1a8a7; }

.rc-tb-zero {
    stroke: #8a93a3;
    stroke-width: 1;
}

.rc-timing-axis {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: #6b7a8f;
    margin-top: 0.15rem;
}

.rc-timing-actions {
    margin-top: auto;
    padding-top: 0.55rem;
    font-size: 0.78rem;
}

.rc-timing-actions .ev-btn {
    width: auto;
}

/* Alternatives and Monte Carlo additions */
.rc-subhead {
    font-size: 0.875rem;
    font-weight: 700;
    margin: 1rem 0 0.35rem;
    color: #181c32;
}

.rc-warning-text {
    color: #b4531a;
}

.rc-assumption-table td {
    white-space: normal;
}

.rc-assumption-table td:first-child {
    width: 26%;
    font-weight: 600;
    color: #3f4a5a;
}

/* What moves the answer most (one bar per assumption, from its low setting to its high setting) */
.rc-tornado {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rc-tornado-row {
    display: grid;
    grid-template-columns: minmax(150px, 30%) 1fr;
    grid-template-areas:
        "label track"
        ".     ends";
    column-gap: 0.6rem;
    row-gap: 2px;
    padding: 0.2rem 0.45rem;
}

.rc-tornado-label {
    grid-area: label;
    align-self: center;
    font-size: 0.8125rem;
    font-weight: 600;
}

.rc-tornado-track {
    grid-area: track;
    position: relative;
    height: 16px;
    background: #f1f3f7;
    border-radius: 4px;
}

.rc-tornado-bar {
    position: absolute;
    top: 2px;
    bottom: 2px;
    min-width: 2px;
    background: #2a78d6;
    border-radius: 3px;
}

.rc-tornado-base {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    margin-left: -1px;
    background: #181c32;
}

.rc-tornado-zero {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 1px;
    background: #e34948;
}

.rc-tornado-ends {
    grid-area: ends;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.72rem;
    color: #5c6d82;
}

.rc-tornado-axis {
    margin: 0.15rem 0.45rem 0 calc(30% + 0.6rem + 0.45rem);
}

/* Who comes out ahead, and when: each figure with its difference from the status quo under it. */
.rc-summary .rc-measures {
    margin-top: 1rem;
}

.rc-measures-table td {
    vertical-align: top;
}

.rc-measures-value,
.rc-measures-diff {
    display: block;
    font-variant-numeric: tabular-nums;
}

.rc-measures-diff {
    font-size: 0.6875rem;
}

.rc-measures-verdict {
    font-size: 0.8125rem;
    line-height: 1.45;
    margin: 0.5rem 0 0;
}