/* The 691(c) calculator. The cards, tiles, tables and callouts are RothConversion.css's rc-* classes; these are the page's own
   additions. The bar colors match the Roth Conversion calculator's (traditional IRA blue, client tax red, estate purple). */

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

.ird-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #181c32;
    margin: 1.1rem 0 0.5rem;
}

/* ---------------------------------------------------------------- Where each IRA dollar goes */

.ird-stacks {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
}

.ird-stack-row {
    display: grid;
    grid-template-columns: minmax(10rem, 13rem) 1fr 3.4rem;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
}

.ird-stack-label {
    color: #3d4a5c;
    line-height: 1.2;
}

.ird-stack-track {
    display: flex;
    gap: 2px;
    height: 18px;
}

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

.ird-seg:first-child {
    border-radius: 4px 0 0 4px;
}

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

.ird-seg--family { background: #2a78d6; }
.ird-seg--fedinc { background: #e34948; }
.ird-seg--stinc { background: #eda100; }
.ird-seg--fedest { background: #4a3aa7; }
.ird-seg--stest { background: #2f9aa0; }

.ird-stack-value {
    text-align: right;
    font-weight: 700;
    color: #181c32;
    font-variant-numeric: tabular-nums;
}

.ird-key {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 0.3rem;
    vertical-align: -1px;
}

.ird-legend {
    margin-top: 0.15rem;
}

/* ---------------------------------------------------------------- Tables */

.ird-compare .ird-col {
    min-width: 7.5rem;
    white-space: normal;
}

.ird-compare .ird-group td,
.ird-years .ird-group td {
    background: #eef4fb;
    font-weight: 600;
}

.ird-compare .ird-indent {
    padding-left: 1.1rem;
}

.ird-best {
    font-weight: 700;
}

.ird-state-table .ird-own-state td,
.ird-returns .ird-own-state td {
    background: #f3f7fc;
    font-weight: 600;
}

.ird-state-table .ird-benchmark td {
    border-top: 2px solid #c9d3df;
    color: #5c6d82;
}

.ird-saves-col {
    min-width: 11rem;
}

.ird-state-table th {
    white-space: normal;
    vertical-align: bottom;
}

.ird-state-table td {
    white-space: nowrap;
}

.ird-bar-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 1.3rem;
}

/* The bar runs along the bottom of the cell, under the figure, so it never sits behind the text. */
.ird-bar {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 4px;
    background: #2a78d6;
    opacity: 0.45;
    border-radius: 0 4px 4px 0;
}

.ird-bar--muted {
    background: #8a99ab;
}

.ird-bar-value {
    position: relative;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- Why converting first saves */

.ird-why {
    border: 1px solid #dfe6ee;
    border-radius: 8px;
    padding: 0.55rem 0.8rem;
    margin-bottom: 0.9rem;
    font-size: 0.85rem;
    color: #3d4a5c;
}

.ird-why-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0;
}

.ird-why-row > span:last-child {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ird-why-sub {
    padding-top: 0;
    padding-left: 1rem;
    font-size: 0.78rem;
    color: #6b7a8f;
}

.ird-why-total {
    border-top: 1px solid #dfe6ee;
    margin-top: 0.25rem;
    padding-top: 0.4rem;
    font-weight: 700;
    color: #181c32;
}

/* ---------------------------------------------------------------- Steps */

.ird-steps {
    padding-left: 1.3rem;
    margin: 0.5rem 0 0.75rem;
    font-size: 0.85rem;
    color: #3d4a5c;
}

.ird-steps > li {
    margin-bottom: 0.6rem;
}

.ird-step-title {
    font-weight: 700;
    color: #181c32;
    margin-bottom: 0.1rem;
}

/* ---------------------------------------------------------------- Going further */

.ird-next {
    border: 1px solid #cfe0f4;
    background: #f6f9fd;
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
    margin: 1rem 0 0.75rem;
}

.ird-next-title {
    font-weight: 700;
    color: #181c32;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.ird-next-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ird-next-actions .ev-btn i {
    margin-right: 0.3rem;
}

.ird-next-hint {
    font-size: 0.78rem;
    color: #5c6d82;
    margin-top: 0.55rem;
    line-height: 1.45;
}

.ird-notes ul ul {
    margin-top: 0.3rem;
}

/* ---------------------------------------------------------------- The Roth Conversion calculator's 691(c) tab */

.rc-ird .ird-compare td:first-child {
    min-width: 15rem;
}

/* The hand-off windows: the figures that go to the other calculator, the values allowed to wrap. */
.ird-handoff td {
    white-space: normal;
}

.ird-handoff td:first-child {
    width: 45%;
}

.rc-ird .ird-compare .ird-col {
    min-width: 8rem;
}

@media (max-width: 640px) {
    .ird-stack-row {
        grid-template-columns: 1fr 3rem;
    }

    .ird-stack-label {
        grid-column: 1 / -1;
    }
}