/* Comparison table - sticky feature column, horizontal scroll inside the
   labelled region, tick/cross/dash shapes with visible words. */
.ct-wrap { display: grid; gap: 8px; }
.ct-wrap > * { min-width: 0; }
.ct-scroll { overflow-x: auto; border: 1px solid var(--e-line); border-radius: calc(var(--e-radius-sm) + 2px); background: var(--e-bg); }
.ct-scroll.ct-overflow { background: linear-gradient(to left, color-mix(in srgb, var(--e-ink) 7%, transparent), transparent 18px) right / 18px 100% no-repeat, var(--e-bg); }
.ct-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9em; }
.ct-cap { caption-side: top; text-align: left; padding: 11px 14px 9px; font-weight: 700; color: var(--e-ink); border-bottom: 1px solid var(--e-line); }
.ct-table th, .ct-table td { padding: 10px 12px; border-bottom: 1px solid var(--e-line); vertical-align: middle; }
.ct-table tbody:last-child tr:last-child > * { border-bottom: 0; }
.ct-table thead th { background: var(--e-surface); color: var(--e-ink); font-weight: 750; text-align: center; min-width: 108px; }
.ct-table thead th.ct-corner { text-align: left; color: var(--e-ink-3); font-weight: 650; font-size: .86em; text-transform: uppercase; letter-spacing: .05em; }
.ct-colname { display: block; overflow-wrap: anywhere; }
.ct-table th[scope="row"], .ct-corner {
    position: sticky; left: 0; z-index: 1; text-align: left; min-width: 130px; max-width: 220px; overflow-wrap: anywhere;
    background: var(--e-bg); box-shadow: 1px 0 0 var(--e-line);
}
.ct-corner { background: var(--e-surface) !important; z-index: 2; }
.ct-table th[scope="row"] { font-weight: 600; color: var(--e-ink-2); }
.ct-group th { text-align: left; padding: 9px 12px 7px; background: var(--e-surface); font-size: .78em; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; color: var(--e-accent-fg); }
.ct-group th[scope="rowgroup"] { position: static; }
.ct-table td { text-align: center; color: var(--e-ink); }
.ct-table td.ct-hl, .ct-table thead th.ct-hl { background: color-mix(in srgb, var(--e-accent) 8%, var(--e-bg)); }
.ct-table thead th.ct-hl { box-shadow: inset 0 3px 0 var(--e-accent); color: var(--e-accent-fg); }
.ct-ico { display: inline-block; width: 20px; height: 20px; padding: 3px; vertical-align: middle; border-radius: 50%; fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.ct-ico.ct-yes { stroke: var(--e-ok); background: color-mix(in srgb, var(--e-ok) 14%, transparent); }
.ct-ico.ct-no { stroke: var(--e-bad); background: color-mix(in srgb, var(--e-bad) 12%, transparent); }
.ct-ico.ct-partial { stroke: var(--e-warn); background: color-mix(in srgb, var(--e-warn) 15%, transparent); }
.ct-word { margin-left: 5px; vertical-align: middle; font-weight: 650; font-size: .92em; }
td.ct-yes .ct-word { color: var(--e-ok); }
td.ct-no .ct-word { color: var(--e-bad); }
td.ct-partial .ct-word { color: var(--e-warn); }
.ct-note { display: block; margin-top: 2px; font-size: .8em; color: var(--e-ink-3); }
.ct-text { overflow-wrap: anywhere; }
.ct-dash { color: var(--e-ink-3); font-weight: 700; }
.ct-iconly .ct-word { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ct-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: .78em; color: var(--e-ink-3); }
.ct-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.ct-legend .ct-ico { width: 16px; height: 16px; padding: 2px; }
.ct-legend .ct-dash { display: inline-block; width: 16px; text-align: center; }
.ct-wrap:not(.ct-iconly) .ct-legend { display: none; }
@media (max-width: 360px) {
    .ct-table th, .ct-table td { padding: 8px 9px; }
    .ct-table th[scope="row"], .ct-corner { min-width: 104px; }
    .ct-table thead th { min-width: 92px; }
}