/* ============================================
   Plan feature comparison
   Shared by the landing pricing section and the dashboard billing page so the two
   surfaces can't drift apart visually the way their copy already can't drift apart
   (both read config/plans.js). Loaded by Views/partials/planComparison.ejs's hosts.
   ============================================ */

/* Screen-reader-only text. The table says "included" with an icon and "not included"
   with a dash; neither is a value until it has words behind it. */
.fd-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Collapsed by default: the plan cards carry the decision, this carries the detail. */
.plan-compare {
    max-width: 1040px;
    margin: 40px auto 0;
    background: var(--fd-surface);
    border: 1px solid var(--fd-border);
    border-radius: var(--fd-radius);
    box-shadow: var(--fd-shadow);
    /* Clips the table to the card's radius, and — the reason it is load-bearing —
       stops a table wider than the viewport propagating its overflow up and giving
       the whole page a horizontal scrollbar. The inner scroller still scrolls. */
    overflow: hidden;
}

.plan-compare summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 24px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--fd-text);
    list-style: none;
}

.plan-compare summary::-webkit-details-marker {
    display: none;
}

.plan-compare summary:focus-visible {
    outline: 2px solid var(--fd-primary);
    outline-offset: -2px;
}

.plan-compare-chevron {
    flex-shrink: 0;
    color: var(--fd-text-muted);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.plan-compare[open] .plan-compare-chevron {
    transform: rotate(180deg);
}

/* Scrolls sideways instead of crushing eleven rows into four narrow columns. The
   tabindex in the markup is deliberate: a scrollable region has to be reachable by
   keyboard or its overflow is unreadable without a mouse. */
.plan-compare-scroll {
    overflow-x: auto;
    border-top: 1px solid var(--fd-border);
    /* overflow-x alone does not stop a table wider than the viewport from counting
       toward the *page's* scrollable overflow, which gave the whole document a
       horizontal scrollbar on phones. Paint containment scopes it to this box.
       Verified: the sticky first column and the sideways scroll both still work. */
    contain: paint;
}

.plan-compare-scroll:focus-visible {
    outline: 2px solid var(--fd-primary);
    outline-offset: -2px;
}

.plan-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.plan-compare-table thead th {
    padding: 14px 16px;
    text-align: center;
    vertical-align: bottom;
    white-space: nowrap;
    border-bottom: 1px solid var(--fd-border);
    background: var(--fd-surface);
}

.plan-compare-plan {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--fd-text);
}

.plan-compare-price {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 400;
    color: var(--fd-text-muted);
}

/* The feature column stays put while the plan columns scroll under it — a value with
   its label scrolled out of view is not a comparison. */
.plan-compare-table thead th:first-child,
.plan-compare-table th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 32%;
    min-width: 200px;
    text-align: left;
    background: var(--fd-surface);
}

.plan-compare-group th {
    padding: 16px 16px 8px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--fd-text-muted);
    background: var(--fd-bg);
}

.plan-compare-table th[scope="row"] {
    padding: 11px 16px;
    font-weight: 500;
    color: var(--fd-text);
    border-bottom: 1px solid var(--fd-border-light);
}

.plan-compare-unit {
    font-weight: 400;
    color: var(--fd-text-muted);
}

.plan-compare-table td {
    padding: 11px 16px;
    text-align: center;
    white-space: nowrap;
    color: var(--fd-text-secondary);
    border-bottom: 1px solid var(--fd-border-light);
}

.plan-compare-table tbody:last-child tr:last-child th[scope="row"],
.plan-compare-table tbody:last-child tr:last-child td {
    border-bottom: none;
}

/* Featured on the landing page; the viewer's own plan on the billing page. */
.plan-compare-table thead th.is-marked,
.plan-compare-table td.is-marked {
    background: var(--fd-primary-light);
    color: var(--fd-text);
}

.plan-compare-check {
    display: inline-block;
    vertical-align: -3px;
    color: var(--fd-success);
}

.plan-compare-none {
    color: var(--fd-text-muted);
}

@media screen and (max-width: 760px) {
    .plan-compare summary {
        padding: 16px 18px;
        font-size: 14px;
    }

    .plan-compare-table {
        font-size: 13px;
    }

    .plan-compare-table thead th:first-child,
    .plan-compare-table th[scope="row"] {
        width: auto;
        min-width: 150px;
    }

    .plan-compare-table thead th,
    .plan-compare-table th[scope="row"],
    .plan-compare-table td {
        padding-left: 12px;
        padding-right: 12px;
    }
}