/* ===========================================================================
   /compare and /compare/{name}-alternative only (loaded through the layout's "Styles" section).
   Colours are the site tokens, so light and dark both follow the theme toggle.
   =========================================================================== */

/* ── The table ───────────────────────────────────────────────────────────── */
.cmp-wrap {
    /* relative: the visually-hidden <caption> is position:absolute, and without a positioned ancestor it
       escaped this scroller and widened the whole page to the table's width (1556px at 1024). */
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--ssp-line);
    border-radius: var(--ssp-radius-lg);
    background: var(--ssp-card);
}
.cmp-wrap:focus-visible { outline: 3px solid var(--ssp-focus); outline-offset: 2px; }

.cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.cmp-table th, .cmp-table td {
    padding: .95rem 1.1rem;
    border-bottom: 1px solid var(--ssp-line);
    text-align: left;
    vertical-align: top;
    font-size: .93rem;
}
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table thead th {
    font-family: var(--ssp-font-head);
    font-size: .95rem;
    color: var(--ssp-heading);
    background: var(--ssp-bg-soft);
    white-space: nowrap;
}
.cmp-table thead th a { color: var(--ssp-heading); }
.cmp-table thead th a:hover { color: var(--ssp-red); }
.cmp-table tbody th { font-weight: 600; color: var(--ssp-heading); min-width: 11rem; }
.cmp-hint { display: block; font-weight: 400; font-size: .8rem; color: var(--ssp-muted); margin-top: .15rem; }

/* Our column: a tint and a top rule, so "which one is us" is answered without reading. */
/* Our column: highlighted as one band from header to last row - a brand-gradient header, a blue tint
   down the column and a blue outline on both sides - so "which one is us" is answered at a glance.
   The tint is a token so dark mode can take a little more (navy swallows a light tint). */
.cmp-table { --cmp-us-tint: color-mix(in srgb, var(--ssp-blue) 11%, var(--ssp-card)); --cmp-us-edge: color-mix(in srgb, var(--ssp-blue) 60%, transparent); }
[data-theme="dark"] .cmp-table { --cmp-us-tint: color-mix(in srgb, var(--ssp-blue) 18%, var(--ssp-card)); }
.cmp-table .is-us {
    background: var(--cmp-us-tint);
    box-shadow: inset 2px 0 0 var(--cmp-us-edge), inset -2px 0 0 var(--cmp-us-edge);
}
.cmp-table tbody .is-us { border-bottom-color: color-mix(in srgb, var(--ssp-blue) 22%, var(--ssp-line)); }
.cmp-table tbody .is-us .cmp-cell-text { color: var(--ssp-heading); font-weight: 500; }
.cmp-table thead th.is-us {
    background: var(--ssp-grad);
    color: #fff;
    box-shadow: inset 2px 0 0 var(--cmp-us-edge), inset -2px 0 0 var(--cmp-us-edge);
}
.cmp-table tbody tr:last-child .is-us {
    box-shadow: inset 2px 0 0 var(--cmp-us-edge), inset -2px 0 0 var(--cmp-us-edge), inset 0 -2px 0 var(--cmp-us-edge);
}

/* Two-product table: three even columns on wide screens. */
.cmp-table-2 th:first-child { width: 30%; }
.cmp-table-2 td { width: 35%; }
/* ScreenSharePRO-only table (since 2026-10-05 the pages state nothing about other products). */
.cmp-table-ours { width: 100%; }
.cmp-table-ours th:first-child { width: 42%; }
.cmp-table-ours td { width: 58%; }

/* All-tools table: wide, scrolls sideways; the label column and our column stay put. */
.cmp-table-all { min-width: 1240px; }
.cmp-table-all td { min-width: 9.5rem; }
.cmp-table-all tbody th, .cmp-table-all thead th:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--ssp-card);
    box-shadow: 1px 0 0 var(--ssp-line);
}
.cmp-table-all thead th:first-child { background: var(--ssp-bg-soft); }

/* ── A cell: icon + short text ───────────────────────────────────────────── */
.cmp-cell { display: inline-flex; gap: .5rem; align-items: flex-start; line-height: 1.45; }
.cmp-cell i { margin-top: .2rem; flex: 0 0 auto; }
.cmp-cell.is-yes i { color: var(--ssp-success); }
.cmp-cell.is-partial i { color: var(--ssp-warning); }
.cmp-cell.is-no i { color: var(--ssp-muted); }
.cmp-cell.is-no .cmp-cell-text { color: var(--ssp-muted); }
.cmp-cell.is-soon i { color: var(--ssp-red); }
.cmp-cell.is-unknown i, .cmp-cell.is-unknown .cmp-cell-text { color: var(--ssp-muted); }
.cmp-cell-text { color: var(--ssp-text); }

.cmp-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 1rem 0 0; font-size: .85rem; color: var(--ssp-muted); }
.cmp-note { margin-top: .8rem; font-size: .85rem; color: var(--ssp-muted); max-width: 70ch; }

/* ── Who leads where ─────────────────────────────────────────────────────── */
.cmp-lead h3 { font-size: 1.15rem; margin-bottom: 1rem; }
.cmp-lead.is-us { border-color: color-mix(in srgb, var(--ssp-red) 40%, var(--ssp-line)); }
.cmp-lead ul { margin: 0; }
.cmp-their-list { list-style: none; padding: 0; }
.cmp-their-list li { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .8rem; color: var(--ssp-text); }
.cmp-their-list li i { color: var(--ssp-muted); margin-top: .3rem; }
.cmp-request { margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--ssp-line); font-size: .9rem; color: var(--ssp-muted); }
.cmp-request i { color: var(--ssp-red); margin-right: .3rem; }
.cmp-suits { padding: 1.2rem 1.4rem; border-left: 3px solid var(--ssp-line); }
.cmp-suits p { margin: 0; color: var(--ssp-text); }

/* ── Hub picker cards ────────────────────────────────────────────────────── */
.cmp-pick { color: inherit; }
.cmp-pick-vs { display: block; font-size: .82rem; color: var(--ssp-muted); }
.cmp-pick-name { display: block; font-family: var(--ssp-font-head); font-weight: 700; font-size: 1.25rem; color: var(--ssp-heading); margin: .1rem 0 .4rem; }
.cmp-pick-line { display: block; font-size: .88rem; color: var(--ssp-muted); line-height: 1.5; }
/* Positioning is stored as a phrase that follows "X is ..." on the detail page; a card starts with it. */
.cmp-pick-line::first-letter { text-transform: uppercase; }

.cmp-chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.cmp-sources { margin-top: 2rem; border-top: 1px solid var(--ssp-line); padding-top: 1rem; font-size: .9rem; color: var(--ssp-muted); }
.cmp-sources summary { cursor: pointer; font-weight: 600; color: var(--ssp-heading); }
.cmp-sources ul { padding-left: 1.1rem; margin: .5rem 0; word-break: break-all; }
.cmp-sources p { color: var(--ssp-muted); margin: .6rem 0 0; max-width: 75ch; }
.cmp-trademark { font-size: .8rem; }

@media (max-width: 767px) {
    .cmp-table th, .cmp-table td { padding: .75rem .8rem; font-size: .88rem; }
    /* Two products on a phone: each row becomes a small card - the question, then each product's
       answer under its own name - instead of a table that hides the competitor off-screen. */
    .cmp-table-2 thead { display: none; }
    .cmp-table-2, .cmp-table-2 tbody, .cmp-table-2 tr, .cmp-table-2 th, .cmp-table-2 td { display: block; width: auto !important; }
    .cmp-table-2 tr { padding: .85rem .9rem; border-bottom: 1px solid var(--ssp-line); }
    .cmp-table-2 tbody tr:last-child { border-bottom: 0; }
    .cmp-table-2 th, .cmp-table-2 td { padding: 0; border: 0; background: none; }
    .cmp-table-2 tbody th { min-width: 0; margin-bottom: .55rem; }
    .cmp-table-2 td { padding: .45rem .6rem; border-radius: var(--ssp-radius-sm); }
    .cmp-table-2 td + td { margin-top: .3rem; }
    .cmp-table-2 td.is-us { background: var(--cmp-us-tint); box-shadow: inset 3px 0 0 var(--ssp-blue); }
    .cmp-table-2 tbody tr:last-child td.is-us { box-shadow: inset 3px 0 0 var(--ssp-blue); }
    .cmp-table-2 td.is-us::before { color: var(--ssp-red); }
    .cmp-table-2 td::before {
        content: attr(data-label); display: block;
        font-size: .74rem; font-weight: 700; color: var(--ssp-muted); margin-bottom: .1rem;
    }
}