/* When to Take Social Security calculator (Pages/SocialSecurity). The layout uses the Comprehensive three-panel classes
   in stylesv53.css and the card, tile, callout and table classes of RothConversion.css; this file adds what is particular
   to this calculator. Claiming-age colors (the validated categorical order): earliest orange, 65 amber, full retirement
   age blue, another age violet, 70 green. */

.social-security-page {
    --ss-ink: #181c32;
    --ss-muted: #5c6d82;
    --ss-line: #e4e8f0;
    --ss-good: #11753a;
    --ss-good-bg: #e6f6ec;
}

.main-layout-comprehensive > .comprehensive-sidebar-host--scenarios.ss-scenarios-host {
    --scenarios-page-max-width: 258px;
}

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

/* ---------------------------------------------------------------- Assumptions */

.ss-assumptions .ss-child-head th {
    background: #eef4fb;
    font-weight: 600;
}

.ss-icon-btn {
    border: none;
    background: transparent;
    color: #5c6d82;
    padding: 0 0.25rem;
    line-height: 1;
}

.ss-icon-btn:hover {
    color: #b42318;
}

/* ---------------------------------------------------------------- Scenario cards */

.ss-card-with {
    font-size: 0.7rem;
    color: #5c6d82;
    margin: 0.05rem 0 0 0.85rem;
    line-height: 1.25;
}

.ss-scenario-list .rc-mini-caption {
    white-space: nowrap;
}

/* ---------------------------------------------------------------- Summary */

.ss-title-badge {
    font-size: 0.7rem;
    vertical-align: 0.2rem;
    margin-left: 0.35rem;
}

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

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

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

.ss-compare-table th.ss-col-head {
    cursor: pointer;
    white-space: nowrap;
    vertical-align: bottom;
}

.ss-compare-table th.ss-col-head small {
    display: block;
    font-weight: 400;
    color: #6b7a8f;
    font-size: 0.68rem;
    min-height: 0.9rem;
}

.ss-compare-table td.ss-row-label {
    white-space: normal;
    min-width: 10.5rem;
}

.rc-table td.ss-col-active,
.rc-table th.ss-col-active {
    background: #f0f7fc;
}

.rc-table td.ss-col-best {
    font-weight: 600;
}

.rc-table th.ss-col-best {
    box-shadow: inset 0 -2px 0 #1baf7a;
}

.rc-table tr.ss-group-row > td {
    background: #f7f9fc;
    color: #3d4a5c;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: none;
    padding-top: 0.45rem;
}

.rc-table tr.ss-row-muted > td {
    color: #6b7a8f;
}

/* Monte Carlo tab: the steady return at which the earliest and latest claiming ages tie. */
.rc-table tr.ss-row-tie > td {
    background: #fff7e0;
    font-weight: 600;
}

/* Plain-English points under a card title. */
.ss-meaning {
    margin: 0 0 0.25rem;
    padding-left: 1.2rem;
    line-height: 1.5;
}

.ss-meaning li + li {
    margin-top: 0.4rem;
}

/* Step-by-step math: numbered steps with the client's figures. */
.ss-steps {
    margin: 0 0 0.75rem;
    padding-left: 1.35rem;
    line-height: 1.5;
}

.ss-steps li + li {
    margin-top: 0.45rem;
}

.ss-steps b {
    color: #0b3a66;
}

/* Longer words in a table cell (whose record, until when) wrap so the table fits the panel. */
.rc-table td.ss-cell-wrap {
    white-space: normal;
    min-width: 7rem;
}

.rc-table td.ss-cell-best {
    background: #e6f6ec;
    color: #11753a;
    font-weight: 700;
}

.ss-best-age {
    font-weight: 700;
}

/* Married couple: every combination of claiming ages, shaded by value. */
.ss-matrix td {
    min-width: 6rem;
}

.rc-table.ss-matrix th {
    white-space: normal;
    min-width: 6rem;
    line-height: 1.25;
}

/* The Best badge sits under the value so the four columns fit the panel. */
.ss-matrix td .rc-best-badge {
    display: block;
    width: fit-content;
    margin: 0.15rem 0 0 auto;
}

.ss-matrix th small,
.ss-matrix td small {
    display: block;
    font-weight: 400;
    color: #6b7a8f;
    font-size: 0.7rem;
}

.ss-matrix td.ss-matrix-best {
    outline: 2px solid #11753a;
    outline-offset: -2px;
    color: #11753a;
    font-weight: 700;
}

/* "Working out the comparisons" placeholder. */
.ss-working {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #5c6d82;
    font-size: 0.9rem;
}

/* ---------------------------------------------------------------- Family benefits */

.ss-family-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0.75rem;
}

.ss-fact {
    border: 1px solid #e4e8f0;
    border-radius: 10px;
    padding: 0.65rem 0.8rem;
    background: #fbfcfe;
}

.ss-fact h4 {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0 0 0.3rem;
}

.ss-fact p {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #3d4a5c;
    margin: 0;
}

.ss-check-list {
    list-style: none;
    padding: 0;
    margin: 0.35rem 0 0;
}

.ss-check-list li {
    font-size: 0.8125rem;
    line-height: 1.45;
    padding-left: 1.3rem;
    position: relative;
    color: #3d4a5c;
}

.ss-check-list li > .bi {
    position: absolute;
    left: 0;
    top: 0.05rem;
}

.ss-check-list li.ss-yes > .bi {
    color: #11753a;
}

.ss-check-list li.ss-no > .bi {
    color: #b42318;
}