/* ------------------------------------------------------------------ *
 *  Model comparison matrix (models.php #compare)
 *  Data-driven by includes/models-data.php via tv_compare().
 *  Amazon-style grid on the dark lineup page (.models-flow-bg): zebra-striped
 *  rows, vertical column dividers, a lifted header/category band, white text and
 *  a red (--c1) accent.
 * ------------------------------------------------------------------ */

.s-compare {
    max-width: 90rem; /* matches the page's widest container (cards row is 86rem) */
    margin: 0 auto;
    padding: 3.5rem 1.25rem 4.5rem;

    /* Local dark palette (global tokens: --c1 red, --c3 grey, --c4 white). */
    --cmp-panel: #0e0f11;       /* table shell behind the rows */
    --cmp-raised: #1c1f26;      /* header band + category group rows */
    --cmp-row: #101218;         /* default row */
    --cmp-row-alt: #16191f;     /* zebra-striped (alternate) row */
    --cmp-hover: #232934;       /* row hover */
    --cmp-line: rgba(255, 255, 255, 0.09);
    --cmp-line-soft: rgba(255, 255, 255, 0.05);
    --cmp-cell-text: rgba(255, 255, 255, 0.82); /* cell values: barely dimmer than the white row labels */
    --cmp-std: #46c97e;         /* "standard ✓" green, readable on dark */
}

.compare-head {
    text-align: center;
    margin-bottom: 0.85rem;
}

/* The compare title carries .models-intro__heading (rods + the card heading's
   typography and margins), and the intro mirrors the card hint — so the title and
   its spacing stay identical to "Model Lineup" when the views swap. */
.compare-intro {
    max-width: 60ch;
    margin: 0 auto;
    color: var(--c3);
    line-height: 1.5;
    font-size: 0.9rem;
}

/* ---- controls: family pills + difference toggle ---- */
.compare-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.5rem;
    margin-top: 1.5rem;
}

.compare-filter {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.compare-pill {
    margin-top: 0;
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
    font: inherit;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0.5rem 0.95rem;
    border-radius: 2rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.compare-pill:hover {
    border-color: rgba(255, 255, 255, 0.42);
    color: #fff;
}

.compare-pill.is-active {
    background: var(--c1);
    border-color: var(--c1);
    color: #fff;
}

.compare-diff-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.9rem;
    color: var(--c3);
    cursor: pointer;
    user-select: none;
}

/* Toggle switch — the checkbox reset to a sliding pill (state still read via
   #compareDiffOnly.checked, so the JS is unchanged). */
.compare-diff-toggle input {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: none;
    width: 2.2rem;
    height: 1.25rem;
    margin: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.compare-diff-toggle input::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.16rem;
    width: 0.92rem;
    height: 0.92rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    transform: translateY(-50%);
    transition: transform 0.2s ease;
}

.compare-diff-toggle input:checked {
    background: var(--c1);
    border-color: var(--c1);
}

.compare-diff-toggle input:checked::before {
    transform: translate(0.95rem, -50%);
}

.compare-diff-toggle input:focus-visible {
    outline: 2px solid var(--c1);
    outline-offset: 2px;
}

/* Toolbar above the table: difference toggle pinned left, legend (key) centred.
   The 1fr / auto / 1fr columns keep the legend centred in the row regardless of
   the toggle's width. */
.compare-toolbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 1.25rem;
}

.compare-toolbar .compare-diff-toggle { grid-column: 3; grid-row: 1; justify-self: end; }

.compare-toolbar .compare-legend--top {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    margin: 0;
}

/* ---- table shell (glassy dark panel: hairline border + soft elevation) ---- */
.compare-scroll {
    overflow-x: auto;
    background: var(--cmp-panel);
    border: 1px solid var(--cmp-line);
    border-radius: 0.9rem;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 18px 40px rgba(0, 0, 0, 0.5);
    -webkit-overflow-scrolling: touch;
    /* dark, subtle horizontal scrollbar to match the panel (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

/* WebKit/Blink (Chrome, Safari, Edge): a slim inset pill on a transparent track */
.compare-scroll::-webkit-scrollbar {
    height: 12px;
}

.compare-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.compare-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 99px;
    border: 3px solid transparent;   /* inset the pill from the track edges */
    background-clip: padding-box;
    transition: background-color 140ms ease;
}

.compare-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.33);
    background-clip: padding-box;
}

.compare-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 880px;
    font-size: 0.9rem;
    color: var(--c4);
}

.compare-table th,
.compare-table td {
    padding: 0.7rem 0.85rem;
    text-align: center;
    border-bottom: 1px solid var(--cmp-line-soft);
    vertical-align: middle;
}

/* vertical dividers between the model columns (Amazon-style grid) */
.cmp-col,
.cmp-cell {
    border-left: 1px solid var(--cmp-line-soft);
}

/* sticky first column (feature / spec name) — bolder than the cell values */
.cmp-rowhead {
    position: sticky;
    left: 0;
    z-index: 2;
    text-align: left;
    font-weight: 700;
    color: var(--c4);
    background: var(--cmp-row);
    min-width: 190px;
    box-shadow: 1px 0 0 var(--cmp-line);
}

/* ---- column headers (dark band so the white wordmarks read) ----
   Headers are not vertically sticky on purpose: the site nav is fixed, so a
   top:0 sticky header would slide under it. The first column stays sticky
   horizontally (below), which is what a wide table needs. */
.compare-table thead th {
    background: var(--cmp-raised);
    color: var(--c4);
    border-bottom: none;
    padding-top: 1rem;
    padding-bottom: 0.9rem;
}

.cmp-rowhead--corner {
    z-index: 4;
    background: var(--cmp-raised);
    box-shadow: 1px 0 0 var(--cmp-line);
}

.cmp-col {
    min-width: 116px;
    border-bottom: 3px solid var(--cmp-accent, #4a5460) !important;
}

.cmp-col--classic { --cmp-accent: #8c97a6; }
.cmp-col--kronos  { --cmp-accent: #57b582; }
.cmp-col--metis   { --cmp-accent: #e0ad57; }
.cmp-col--ultra   { --cmp-accent: #d2483a; }

.cmp-col-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
}

/* exterior render above the wordmark */
.cmp-col-img {
    display: block;
    width: 100%;
    height: 52px;
    object-fit: contain;
    margin-bottom: 0.15rem;
}

.cmp-wordmark {
    height: 16px;
    max-width: 92px;
    width: auto;
    object-fit: contain;
}

.cmp-col-code {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.6);
}

.cmp-col-price {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
}

/* ---- category group rows (clickable section headers) ---- */
.cmp-group th {
    background: var(--cmp-raised);
    padding: 0;                                          /* the inner bar pads */
    border-bottom: 1px solid var(--cmp-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); /* raised top edge */
}

.cmp-group-head {
    cursor: pointer;
    user-select: none;
}

/* Title pinned left, chevron pinned right — both stay on screen on a wide table
   while the raised band scrolls uniformly underneath (a full-width sticky cell
   has no room to stick, so the title used to scroll away). */
.cmp-group-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0;
}

.cmp-group-label {
    position: sticky;
    left: 0;
    z-index: 1;
    padding-left: 0.85rem;
    border-left: 3px solid var(--c1);   /* red section accent */
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.45;
}

.cmp-group-icon {
    position: sticky;
    right: 0;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding-right: 0.95rem;
    color: #fff;
    opacity: 0;               /* revealed on hover/focus only */
    transition: opacity 0.15s ease;
}

.cmp-group-head:hover .cmp-group-icon,
.cmp-group-head:focus-visible .cmp-group-icon {
    opacity: 1;
}

/* chevron: points down when open, right when collapsed */
.cmp-group-icon::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

.cmp-group.is-collapsed .cmp-group-icon::before {
    transform: rotate(-45deg);
}

/* rows beneath a collapsed header shrink to zero height */
.cmp-row > th,
.cmp-row > td {
    overflow: hidden;
    background-color: var(--cmp-row);
    transition:
        padding-top 0.3s ease,
        padding-bottom 0.3s ease,
        font-size 0.3s ease,
        opacity 0.2s ease,
        border-bottom-width 0.3s ease,
        background-color 0.15s ease;
}

/* zebra striping (alternate rows tinted; JS tags every other .cmp-row) */
.cmp-row--alt > th,
.cmp-row--alt > td {
    background-color: var(--cmp-row-alt);
}

.cmp-row.is-collapsed > th,
.cmp-row.is-collapsed > td {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0;
    opacity: 0;
    border-bottom-width: 0;
}

@media (prefers-reduced-motion: reduce) {
    .cmp-group-icon,
    .cmp-group-icon::before,
    .cmp-row > th,
    .cmp-row > td {
        transition: none;
    }
}

/* ---- body rows ---- */
.cmp-row:hover > th,
.cmp-row:hover > td {
    background-color: var(--cmp-hover);
}

.cmp-row--spec td {
    font-weight: 600;
    color: var(--cmp-cell-text);
}

/* ---- cell states (values read a touch dimmer than the white row labels) ---- */
.cmp-cell {
    color: var(--cmp-cell-text);
}

.cmp-cell.c-std {
    color: var(--cmp-std);
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1;
}

/* The standard "✓" is a Font Awesome <i>; colour the icon explicitly so it
   stays green (the icon font otherwise renders in the inherited text colour). */
.cmp-cell.c-std i,
.compare-legend__key.c-std i {
    color: var(--cmp-std);
}

.cmp-cell.c-opt {
    font-weight: 600;
}

.cmp-cell.c-na {
    color: rgba(255, 255, 255, 0.3);
}

/* legend */
.compare-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.4rem;
    margin: 1.1rem 0 0;
    font-size: 0.85rem;
    color: var(--c3);
}

/* legend repeated above the table (grouped with the controls) */
.compare-legend--top {
    margin: 0.5rem 0 0;
}

.compare-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.compare-legend__key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 0.35rem;
    background: rgba(255, 255, 255, 0.07);
    font-weight: 700;
}

.compare-legend__key.c-std { color: var(--cmp-std); }
.compare-legend__key.c-opt { color: #fff; }
.compare-legend__key.c-na  { color: rgba(255, 255, 255, 0.4); }

/* ---- family filter: columns whose family isn't selected (JS multi-select) ---- */
.cmp-col-hidden {
    display: none;
}

/* difference filter + empty group hiding (toggled by JS) */
.cmp-hidden {
    display: none;
}

.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;
}

/* ---- feature label = button that opens the media popup ---- */
.cmp-info {
    /* reset the project's global button styles (uppercase, radius, overflow,
       red bg, etc.) so the label reads as the plain bold row text it was. */
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transform: none;
    overflow: visible;
    font: inherit;                /* matches the bold white row label */
    text-transform: none;
    letter-spacing: normal;
    color: inherit;
    text-align: center;           /* match the centered Specifications rowheads */
    cursor: pointer;
    position: relative;
    display: block;
    width: 100%;
    /* Pad both sides by the icon's footprint so the centered label keeps room
       for the right-edge icon and stays visually centered. */
    padding: 0 1.4em;
}

.cmp-info:hover {
    background: none;             /* override the global button:hover background */
}

/* The label reads a touch brighter and heavier than the inherited rowhead text
   (var(--c4)/700) so the clickable feature names stand out from plain rows. */
.cmp-info__label {
    color: #fff;
    font-weight: 800;
}

/* The icon stays hidden so the label reads as plain centered text (like the spec
   rowheads); it fades in on hover/focus as the click affordance. Absolutely
   placed at the right edge so it sits in the same spot for every row. */
.cmp-info__icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.82em;
    color: inherit;          /* match the label's font colour */
    opacity: 0;
    transition: opacity 0.15s ease;
}

.cmp-info:hover .cmp-info__icon,
.cmp-info:focus-visible .cmp-info__icon {
    opacity: 1;
}

.cmp-info:focus-visible {
    outline: 2px solid var(--c1);
    outline-offset: 2px;
    border-radius: 4px;
}

/* The feature media popup modal now lives in src/styles/media-modal.css, shared
   with the per-variant detail pages via includes/media-modal.php. */

@media (max-width: 640px) {
    .s-compare { padding: 2.5rem 0.75rem 3.5rem; }
    .compare-table { font-size: 0.82rem; }
    .compare-table th,
    .compare-table td { padding: 0.55rem 0.6rem; }
    .cmp-rowhead { min-width: 150px; }

    /* Stack the toggle above the centred legend when there isn't room for one row. */
    .compare-toolbar { grid-template-columns: 1fr; justify-items: center; }
    .compare-toolbar .compare-diff-toggle { grid-column: 1; grid-row: auto; justify-self: center; }
    .compare-toolbar .compare-legend--top { grid-column: 1; grid-row: auto; }
}

/* ------------------------------------------------------------------
 *  models.php "select to compare" — the opt-in compare checkbox on each
 *  lineup card, the sticky selection bar, and the card/compare views.
 *  These classes only exist on models.php (the family pages render no
 *  checkbox or bar), so every rule below is inert on the other pages.
 * ------------------------------------------------------------------ */
.lineup-view[hidden] { display: none; }

.lineup-hint {
    max-width: 60ch;
    margin: 0 auto 2rem;
    text-align: center;
    color: var(--c3);
    line-height: 1.5;
    font-size: 0.9rem;
}

/* Lineup cards anchor the absolutely-positioned compare checkbox. */
.s-options--lineup .option { position: relative; }

/* Compare chip — a dark glass pill with a custom (non-native) checkbox, so it
   reads as part of the lineup's dark/red theme and looks the same in every browser. */
.option-compare {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.3rem 0.7rem 0.3rem 0.5rem;
    border-radius: 999px;
    background: rgba(12, 14, 18, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    -webkit-backdrop-filter: blur(6px) saturate(1.3);
    backdrop-filter: blur(6px) saturate(1.3);
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.option-compare:hover {
    background: rgba(12, 14, 18, 0.8);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Custom checkbox — native control reset, brand-red fill + SVG tick when checked. */
.option-compare__input {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 0.34rem;
    background-color: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.option-compare__input:hover { border-color: rgba(255, 255, 255, 0.85); }

.option-compare__input:checked {
    background-color: var(--c1);
    border-color: var(--c1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.78rem;
}

.option-compare__input:focus-visible {
    outline: 2px solid var(--c1);
    outline-offset: 2px;
}

/* Selected card: brand-red ring, and the chip picks up the red border + glow. */
.option--comparing {
    outline: 2px solid var(--c1);
    outline-offset: 3px;
}

.option--comparing .option-compare {
    border-color: var(--c1);
    box-shadow: 0 2px 14px rgba(170, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* The bar hosts both states: its select controls (card view) and the Back
   control (compare view) live in the same .lineup-bar container, one shown
   at a time. tv-cta sets display:inline-flex, so [hidden] needs an explicit
   override to actually hide a CTA. */
.lineup-bar__select {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.lineup-bar__select[hidden] { display: none; }

/* "View Lineup" uses the shared ghost CTA (.tv-cta--ghost from cta.css) — same
   look and height as "Compare all"; only the bar layout is set here. */
.lineup-bar__back {
    margin: 0;
    white-space: nowrap;
}

.lineup-bar__back[hidden] { display: none; }

/* Compare-view controls: the "Comparing … models" label beside the close (X). */
.lineup-bar__compare {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.lineup-bar__compare[hidden] { display: none; }

.lineup-bar__label {
    padding-left: 0.65rem;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Sticky selection bar (fixed, bottom-centre). It stays in the DOM but is parked
   below the viewport; .is-visible slides + fades it in/out (toggled by an
   IntersectionObserver so it only shows while the lineup section is in view). */
.lineup-bar {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.6rem;
    border-radius: 999px;
    background: rgba(16, 18, 23, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
    color: #fff;
    transform: translate(-50%, calc(100% + 1.5rem));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.lineup-bar.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

.lineup-bar[hidden] { display: none; }

.lineup-bar__count {
    padding-left: 0.65rem;   /* breathing room from the bar's left edge */
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Plain text-link button — reset the project's global red/uppercase button styles. */
.lineup-bar__clear {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.7);
    font: inherit;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: underline;
    white-space: nowrap;
    cursor: pointer;
}

.lineup-bar__clear:hover { color: #fff; background: none; }

.lineup-bar__go { margin: 0; white-space: nowrap; }
/* tv-cta sets display:inline-flex, so [hidden] needs an explicit override. */
.lineup-bar__go[hidden] { display: none; }

@media (max-width: 640px) {
    .lineup-bar {
        left: 0.7rem;
        right: 0.7rem;
        /* sit a touch higher and clear the iOS home indicator / browser chrome */
        bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.5rem 0.85rem;
        transform: translateY(calc(100% + 1.5rem));
    }
    .lineup-bar.is-visible { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .lineup-bar { transition: none; }
}

/* "Compare all" shortcut on the bar — uses the shared ghost CTA (.tv-cta--ghost
   from cta.css); only the bar layout is set here. */
.lineup-bar__all {
    margin: 0;
    white-space: nowrap;
}

.lineup-bar__clear[hidden] { display: none; }

/* The bar is persistent in both views; reserve space so it never covers the last
   row of cards / the bottom of the table. */
.s-options--lineup .lineup-view { padding-bottom: 4.5rem; }

/* On models.php the compare table is nested inside the lineup section, so it must
   not add its own section padding/width — the lineup section already supplies the
   spacing. This keeps the "Compare Models" title (and the space above/below it) in
   exactly the same place as "Model Lineup" when the views swap. Capped to the card
   grid's width so the title rods and the table line up with the cards. */
.s-options--lineup .s-compare {
    max-width: 86rem;
    margin: 0 auto;
    padding: 0;
}

/* Compare table nested in a detail page's "Explore Other Models" section
   (.s-options.dark-bg) — the section already supplies the bottom padding. */
.s-options.dark-bg .s-compare { padding-bottom: 0; }