/* Comparison table (compare/show.leaf).
 *
 * Wide screens: a normal three-column table, scrolling sideways inside its
 * box if it ever gets too narrow. Phones: each row becomes a card, so the
 * competitor's column is visible without a sideways swipe. Each cell carries
 * its column name in data-label for the card view.
 */
.compare-table { min-width: 34rem; }

@media (max-width: 639px) {
    .compare-table { min-width: 0; }
    .compare-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .compare-table,
    .compare-table tbody,
    .compare-table tr,
    .compare-table th,
    .compare-table td { display: block; }
    .compare-table tr {
        padding: 0.75rem 0;
        border-bottom: 1px solid #f3f4f6;
    }
    .compare-table tbody th,
    .compare-table td {
        border-bottom: 0;
        padding: 0.25rem 0;
    }
    .compare-table tbody th { font-size: 1rem; }
    .compare-table td::before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        color: #111827;
    }
    .compare-table td + td { margin-top: 0.5rem; }
}

/* Hub (compare/index.leaf): grouped card grid.
 *
 * The prebuilt Tailwind sheet (admin.css) has no max-w-6xl, so the hub's
 * width lives here. Each card is one link: the H3's anchor is stretched over
 * the card with ::after, so the whole card is clickable and the link's
 * accessible name stays the card title. The focus ring is drawn on that
 * overlay so a keyboard user sees the whole card outlined.
 */
.compare-hub { max-width: 72rem; }

.compare-hub__group + .compare-hub__group { margin-top: 3.5rem; }

.compare-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 1rem;
}

.compare-card__link:focus-visible { outline: none; }

.compare-card__link:focus-visible::after {
    outline: 2px solid var(--fk-focus, var(--fk-primary-text));
    outline-offset: 3px;
}

/* Homepage stages on a comparison page (compare/show.leaf .compare-showcase).
 *
 * The device stages are the homepage's own partials (partials/stages/*.leaf),
 * styled by /css/story.css; nothing here restyles the mockups. The section
 * is a full-width band in the homepage's alternate surface: main is an
 * inline-size container, so 100cqw is the page width without the
 * scrollbar and the band never adds a sideways scroll. Wide screens: a 2 x 2
 * grid, each row name and caption above its stage. Narrower: one column,
 * with story.css's own narrow stage layout.
 *
 * Each chapter carries data-story-timer, so motion.js plays it on a timer
 * once it is on screen instead of pinning it to the scroll. The homepage's
 * scroll-scrubbed depth animations name a timeline only a homepage chapter
 * defines, so they are switched off here.
 */
.compare-main { container-type: inline-size; }

.compare-showcase {
    box-sizing: border-box;
    width: 100cqw;
    margin-top: 3rem;
    margin-inline: calc(50% - 50cqw);
    padding-block: clamp(2.5rem, 5vw, 4rem);
    background: var(--fk-surface-alt);
}

.compare-showcase__inner {
    box-sizing: border-box;
    width: min(100%, 72rem);
    margin-inline: auto;
    padding-inline: var(--fk-gutter);
}

.compare-showcase__grid {
    display: grid;
    gap: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
    margin-top: 2rem;
}

/* Two columns. A stage here is about two thirds the width of a homepage
   stage, and the homepage sizes its chips and cards by the viewport, so
   here they follow the stage's own width (the same ratio as the homepage at
   1440px). The second vote chip is pinned to the stage's end edge, where
   the cell would otherwise clip it. */
@media (min-width: 1024px) {
    .compare-showcase__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .compare-stage__stage { container-type: inline-size; }
    .compare-stage .fk-st__card { font-size: clamp(0.56rem, 1.7cqi, 0.82rem); }
    .compare-stage .fk-st__float { font-size: clamp(0.62rem, 1.9cqi, 0.9rem); }
    .compare-stage .fk-st--vote .fk-st__float--b { left: auto; right: 0; }
    [dir="rtl"] .compare-stage .fk-st--vote .fk-st__float--b { left: 0; right: auto; }
}

.compare-stage {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.compare-stage__title {
    margin: 0;
    color: var(--fk-ink);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
}

.compare-stage__caption {
    max-width: 34rem;
    margin: 0.35rem 0 0;
    color: var(--fk-ink-soft);
    line-height: var(--fk-leading-body);
}

.compare-stage__stage { min-width: 0; }

html.fk-motion .compare-stage .fk-st,
html.fk-motion .compare-stage .fk-st__dev { animation: none; }