/* Reference text under a calculator card (duct sizer): a white band across the page, plain
   headings, ruled tables, no panels. Scoped to .calc-article so the unscoped table / td rules in
   calculator.css (which style the card) do not apply. */
.calc-article {
    background: #ffffff;
    margin: 2.5rem 0 0;
    padding: 2.75rem 0 4.5rem;
    color: var(--primary-color);
    font-size: 1rem;
    line-height: 1.6;
}

.calc-article-inner {
    box-sizing: border-box;
    max-width: 44rem;
    margin-left: 2rem;
    padding-right: 1.3rem;
}

.calc-article p,
.calc-article ol,
.calc-article ul {
    max-width: 38rem;
}

.calc-article h2 {
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.3;
    margin: 2.75rem 0 0.75rem;
    padding-top: 0.9rem;
    border-top: 1px solid #d3d9de;
    color: var(--primary-color);
}

.calc-lead h2 {
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.25;
    margin: 0 0 0.75rem;
    padding-top: 0;
    border-top: none;
}

.calc-article h3 {
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.35;
    margin: 1.5rem 0 0.35rem;
}

.calc-article p {
    margin: 0 0 1rem;
}

.calc-article a {
    color: var(--thermist-blue-dark);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    text-decoration-color: rgba(9, 105, 188, 0.4);
}

.calc-article a:hover {
    text-decoration-color: currentColor;
}

.calc-article ol,
.calc-article ul {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}

.calc-article li {
    margin-bottom: 0.3rem;
}

.calc-meta,
.calc-small,
.calc-toc,
.calc-refs {
    font-size: 0.875rem;
    color: #56677a;
}

.calc-meta {
    margin-bottom: 0.4rem;
}

.calc-toc span {
    font-weight: 500;
    margin-right: 0.25rem;
}

.calc-toc a {
    white-space: nowrap;
}

.calc-formula {
    font-size: 1.0625rem;
    margin: 0.25rem 0 1rem 1.5rem;
    font-variant-numeric: tabular-nums;
}

/* Tables: top and bottom rules, a rule under the header, hairlines between rows, no fill.
   calculator.css sets fixed layout and column widths on every table, so these override it. */
.calc-article table.calc-table {
    width: auto;
    min-width: 60%;
    table-layout: auto;
    border-collapse: collapse;
    margin: 0.5rem 0 1.5rem;
    font-size: 0.9375rem;
    border-top: 1.5px solid var(--primary-color);
    border-bottom: 1.5px solid var(--primary-color);
    color: var(--primary-color);
}

.calc-article table.calc-table caption {
    text-align: left;
    caption-side: top;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0 0 0.4rem;
    color: var(--primary-color);
}

.calc-article table.calc-table th,
.calc-article table.calc-table td,
.calc-article table.calc-table tr:first-child td:nth-child(3) {
    width: auto;
    padding: 0.4rem 0.75rem;
    text-align: right;
    vertical-align: bottom;
    border: none;
    border-bottom: 1px solid #d3d9de;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.calc-article table.calc-table th {
    font-weight: 500;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: #56677a;
    border-bottom: 1px solid var(--primary-color);
}

.calc-article table.calc-table thead tr:first-child th[rowspan] {
    vertical-align: bottom;
}

.calc-article table.calc-table th.calc-group {
    text-align: center;
    border-bottom: 1px solid #9aa6b2;
    padding-bottom: 0.25rem;
}

.calc-article table.calc-table th.calc-col-text,
.calc-article table.calc-table-text td:first-child {
    text-align: left;
    white-space: normal;
}

.calc-article table.calc-table-text td:first-child {
    padding-right: 1.5rem;
}

.calc-article table.calc-table tbody tr:last-child td {
    border-bottom: none;
}

.calc-article table.calc-table td {
    vertical-align: top;
}

@media (max-width: 600px) {
    .calc-article {
        margin-top: 2rem;
        padding: 2rem 0 3.5rem;
    }

    .calc-article-inner {
        margin-left: 1rem;
        padding-right: 1rem;
    }

    .calc-lead h2 {
        font-size: 1.5rem;
    }

    .calc-article table.calc-table {
        width: 100%;
        font-size: 0.875rem;
    }

    .calc-article table.calc-table th,
    .calc-article table.calc-table td,
    .calc-article table.calc-table tr:first-child td:nth-child(3) {
        padding: 0.35rem 0.45rem;
    }

    .calc-article table.calc-table-text td + td {
        white-space: normal;
    }

    .calc-formula {
        margin-left: 0.75rem;
    }
}