/* Swap Power calculator. The cards, tiles, tables and callouts are RothConversion.css's rc-* classes; these are the
   page's own additions. */

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

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

.sp-text {
    font-size: 0.85rem;
    color: #3d4a5c;
    margin: 0 0 0.5rem;
}

.sp-checklist,
.sp-steps {
    padding-left: 1.2rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #3d4a5c;
}

.sp-checklist li,
.sp-steps li {
    margin-bottom: 0.35rem;
}

/* ---------------------------------------------------------------- Inputs */

.sp-inputs .sp-asset-head th {
    background: #eef4fb;
    font-weight: 600;
}

.sp-inputs .sp-total-row td {
    font-weight: 600;
    background: #f7f9fc;
}

.sp-total-sub {
    display: block;
    font-weight: 400;
    font-size: 0.75rem;
    color: #6b7a8f;
}

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

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

/* ---------------------------------------------------------------- Results */

.sp-compare th.sp-col {
    width: 22%;
}

.sp-compare td:first-child {
    white-space: normal;
    min-width: 14rem;
}

.sp-compare tr.sp-group > td {
    background: #f4f7fb;
    font-weight: 600;
    color: #24456b;
}

.sp-compare td.sp-indent {
    padding-left: 1.4rem;
}

.sp-years td:first-child {
    white-space: nowrap;
}

.sp-tag {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: #e8eef7;
    color: #24456b;
    font-size: 0.68rem;
    font-weight: 600;
    vertical-align: 1px;
}

.sp-assets td.sp-wrap,
.sp-ladder td.sp-wrap {
    white-space: normal;
}

.sp-kind {
    display: block;
    font-size: 0.7rem;
    color: #6b7a8f;
}

.sp-assets tr.sp-row-muted > td {
    color: #6b7a8f;
}

/* Bootstrap's table cell colour outranks .rc-bad / .rc-good; restate them for these tables. */
.sp-compare td.rc-bad,
.sp-years td.rc-bad {
    color: #b42318;
}

.sp-compare td.rc-good,
.sp-years td.rc-good {
    color: #11753a;
}

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

/* Phones: one tile per row, and let the row labels wrap so the figures fit. */
@container (max-width: 520px) {
    .sp-summary .rc-tiles {
        grid-template-columns: minmax(0, 1fr);
    }

    .sp-compare td:first-child {
        min-width: 0;
    }

    .sp-compare td.sp-indent {
        padding-left: 0.6rem;
    }

    .sp-compare th {
        white-space: normal;
    }

    .sp-compare th.sp-col {
        width: auto;
    }

    .sp-compare td,
    .sp-compare th,
    .sp-assets td,
    .sp-assets th,
    .sp-ladder td,
    .sp-ladder th {
        padding: 0.2rem 0.3rem;
        font-size: 0.75rem;
    }
}