/* =============================================================================
   SoloDrive Front CSS — /compare/ refresh (WO-2026-542; layout WO-2026-507,
   copy WO-2026-541). The refresh-token re-skin of the [sd_compare] shortcode
   PLUS the page-only grammar the mockup adds around the frozen matrix (hero
   scorecard, climax phone shot, quiet testimonial).

   LOAD SLOT: 22 (21 is 21-pricing.css). Self-contained + descendant-scoped
   under `.sd-compare-page`, exactly like 16/18/21: the /compare/ page body is
   wrapped `.sd-home-v2 sd-pillars sd-compare-page`, so the band rhythm, chrome,
   tokens, hv-* and pl-* grammar all come from 16-home-v2.css + 18-pillars.css
   (which the same wrapper carries). This sheet only adds what those two do not:

     1. `.sd-compare`  — the matrix re-skin. REPLACES the OLD embedded
        `#sd-compare-css` skin that SDFO_Compare::render_css() used to print
        (that method is dropped in this WO). SAME semantic table markup + SAME
        mobile-card / disclosure mechanics (WO-2026-387 / 388); only the palette
        and type move onto refresh tokens. The frozen DATA is unchanged.
     2. `.cmp-score`   — the hero scorecard (stands in for a hero photo on a
        data page; previews the 4 differentiator rows).
     3. `.pl-shotphone` + navy `.pl-shot__cap` — the climax phone shot (band 6).
     4. `.sd-quote`    — the quiet testimonial type (band 7).

   Harmless where unused: nothing outside /compare/ carries `.sd-compare-page`.
   ============================================================================= */

/* ---------- hero scorecard (band 1) — card grammar + hv-matrix colour language
   A compact "only us" thesis card, built on `.card` (16-home-v2) + refresh tokens. */
.sd-compare-page .cmp-score { padding: 22px 22px 18px; }
.sd-compare-page .cmp-score__head { font-family: var(--sans); font-weight: 800; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin: 0 0 4px; }
.sd-compare-page .cmp-score__sub { font-family: var(--serif); font-size: 20px; line-height: 1.15; color: var(--ink); margin: 0 0 var(--s4); }
.sd-compare-page .cmp-score__row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); }
.sd-compare-page .cmp-score__row:first-of-type { border-top: 0; }
.sd-compare-page .cmp-score__cap { font-size: 14px; font-weight: 650; color: var(--ink); line-height: 1.25; }
.sd-compare-page .cmp-score__apps { font-size: 12px; font-weight: 700; color: var(--faint); text-align: right; white-space: nowrap; }
.sd-compare-page .cmp-score__us { font-size: 12.5px; font-weight: 800; color: var(--clay-ink); background: var(--clay-soft); border-radius: var(--r-pill); padding: 3px 10px; white-space: nowrap; }
.sd-compare-page .cmp-score__foot { margin: var(--s3) 0 0; font-size: 12px; color: var(--faint); }

/* ---------- climax phone shot (band 6, navy) ---------- */
.sd-compare-page .pl-shotphone { display: block; width: 100%; max-width: 320px; margin: 0 auto; border-radius: 26px; box-shadow: var(--shadow-pop); border: 1px solid var(--line); background: var(--surface-soft); }
.sd-compare-page .band--navy .pl-shot__cap { color: rgba(244,241,234,.55); }

/* ---------- quiet testimonial (band 7) — existing quote type ---------- */
.sd-compare-page .sd-quote { max-width: 640px; margin-inline: auto; text-align: center; }
.sd-compare-page .sd-quote p { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 3vw, 30px); line-height: 1.3; color: var(--ink); margin: 0 0 var(--s3); }
.sd-compare-page .sd-quote cite { font-family: var(--sans); font-style: normal; font-size: 14px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.sd-compare-page .sd-quote--placeholder p { font-family: var(--mono); font-style: normal; font-size: 15px; color: var(--faint); }

/* =============================================================================
   COMPARISON MATRIX — refresh-token re-skin of the [sd_compare] tables.
   Replaces the OLD embedded #sd-compare-css skin (SDFO_Compare::render_css,
   dropped in WO-2026-542). SAME semantic markup + SAME mobile-card / disclosure
   mechanics (WO-387/388). Only the palette + type move onto refresh tokens.
   ============================================================================= */
.sd-compare-page .sd-compare { color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; }
.sd-compare-page .sd-compare * { box-sizing: border-box; }

/* legend */
.sd-compare-page .sd-compare .legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: 13px; color: var(--muted); margin: 0 0 var(--s3); }
.sd-compare-page .sd-compare .legend span { display: inline-flex; align-items: center; gap: .4rem; }
.sd-compare-page .sd-compare .ic { font-weight: 800; font-size: .95em; }
.sd-compare-page .sd-compare .ic-yes { color: var(--green); }
.sd-compare-page .sd-compare .ic-no { color: var(--faint); }
.sd-compare-page .sd-compare .ic-soon { color: var(--clay-ink); }

/* scroller + scroll affordance (desktop/tablet) */
.sd-compare-page .sd-compare .scroller { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card); }
.sd-compare-page .sd-compare table { border-collapse: collapse; width: 100%; min-width: 1180px; background: var(--surface); }
.sd-compare-page .sd-compare caption { text-align: left; padding: .85rem 1rem; color: var(--muted); font-size: 13.5px; }
.sd-compare-page .sd-compare th, .sd-compare-page .sd-compare td { padding: .6rem .75rem; border-bottom: 1px solid var(--line); text-align: center; vertical-align: top; }
.sd-compare-page .sd-compare thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-soft); font-size: 12px; letter-spacing: .03em; color: var(--muted); font-weight: 700; white-space: normal; min-width: 5.6rem; line-height: 1.2; text-transform: uppercase; }
.sd-compare-page .sd-compare thead th.col-app { min-width: 9.5rem; }
.sd-compare-page .sd-compare thead th.note { min-width: 12rem; }
/* sticky first column (app name) */
.sd-compare-page .sd-compare th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; white-space: nowrap; font-weight: 700; min-width: 9.5rem; font-size: 14.5px; }
.sd-compare-page .sd-compare tr.us th[scope="row"] { background: var(--clay-soft); color: var(--clay-ink); }
.sd-compare-page .sd-compare td.note, .sd-compare-page .sd-compare th.note { text-align: left; color: var(--muted); font-size: 13.5px; white-space: normal; min-width: 12rem; }
.sd-compare-page .sd-compare td.price { text-align: left; white-space: normal; font-size: 13.5px; min-width: 9.5rem; }
.sd-compare-page .sd-compare tr.us { background: var(--clay-soft); }
.sd-compare-page .sd-compare .group th { text-align: left; background: var(--paper-2); color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; position: static; }
.sd-compare-page .sd-compare .yes { color: var(--green); font-weight: 800; }
.sd-compare-page .sd-compare .no { color: var(--faint); }
.sd-compare-page .sd-compare .soon { color: var(--clay-ink); font-weight: 700; }
.sd-compare-page .sd-compare .diff { background: #fbf0e6; }
.sd-compare-page .sd-compare .only { display: none; } /* surfaced on the mobile hero card only */
.sd-compare-page .sd-compare .footnotes { font-size: 13.5px; color: var(--muted); margin-top: var(--s4); padding-left: 1.1rem; }
.sd-compare-page .sd-compare .footnotes li { margin: .3rem 0; }
.sd-compare-page .sd-compare .src { font-size: 12.5px; color: var(--faint); margin-top: var(--s3); }
.sd-compare-page .sd-compare .src a { color: var(--clay-ink); }
/* frozen inline intro paragraph inside the fee band (the airport-run lede); the OLD
   render_css styled `.sd-compare .lede` and is dropped, so re-home it onto refresh tokens. */
.sd-compare-page .sd-compare .lede { font-size: 18px; color: var(--muted); line-height: 1.55; margin: var(--s5) 0 var(--s3); }
.sd-compare-page .sd-compare .lede strong { color: var(--ink); }

/* progressive-disclosure toggle — hidden on desktop (full matrix shows) */
.sd-compare-page .sd-compare .cmp-toggle-row { display: none; }
.sd-compare-page .sd-compare .cmp-cb { position: absolute; opacity: 0; pointer-events: none; }

/* ===== MOBILE (<=760px): one <table> -> one card per app (WO-387/388) ===== */
@media (max-width: 760px) {
  .sd-compare-page .sd-compare { font-size: 15.5px; }
  .sd-compare-page .sd-compare .scroller { overflow: visible; border: 0; background: none; border-radius: 0; box-shadow: none; }
  .sd-compare-page .sd-compare table { display: block; min-width: 0; width: 100%; }
  .sd-compare-page .sd-compare caption { display: block; padding: 0 0 .6rem; }
  .sd-compare-page .sd-compare tbody { display: block; }
  .sd-compare-page .sd-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .sd-compare-page .sd-compare tbody tr { display: block; border: 1px solid var(--line-2); border-radius: var(--r-md); margin: 0 0 .7rem; overflow: hidden; background: var(--surface); }
  .sd-compare-page .sd-compare tr.us { border-color: var(--clay); border-width: 2px; background: var(--clay-soft); box-shadow: var(--shadow-card); }
  .sd-compare-page .sd-compare th[scope="row"] { display: block; position: static; white-space: normal; font-size: 1.05rem; padding: .65rem .85rem; background: var(--surface-soft); border-bottom: 1px solid var(--line-2); min-width: 0; }
  .sd-compare-page .sd-compare tr.us th[scope="row"] { background: var(--clay); color: #fff; font-size: 1.1rem; }
  .sd-compare-page .sd-compare td { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; text-align: right; padding: .5rem .85rem; border-bottom: 1px solid var(--line); white-space: normal; min-width: 0; font-size: .92rem; }
  .sd-compare-page .sd-compare td::before { content: attr(data-label); flex: 1 1 auto; text-align: left; color: var(--muted); font-weight: 650; font-size: .82rem; line-height: 1.3; }
  .sd-compare-page .sd-compare td > * { flex: 0 0 auto; }
  .sd-compare-page .sd-compare td:last-child { border-bottom: 0; }
  .sd-compare-page .sd-compare td.note, .sd-compare-page .sd-compare td.price { text-align: left; display: block; }
  .sd-compare-page .sd-compare td.note::before, .sd-compare-page .sd-compare td.price::before { display: block; margin-bottom: .15rem; }
  .sd-compare-page .sd-compare tr.us td.diff { background: #fff5ea; }
  .sd-compare-page .sd-compare tr.us .only { display: inline-block; margin-left: .4rem; font-size: .62rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--clay-ink); background: var(--clay-soft); border-radius: 999px; padding: .1rem .45rem; vertical-align: middle; }
  .sd-compare-page .sd-compare tr.group { border: 0; background: none; margin: 1.1rem 0 .5rem; }
  .sd-compare-page .sd-compare tr.group th { display: block; position: static; padding: 0 .15rem; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
  /* progressive disclosure: hide the field until asked */
  .sd-compare-page .sd-compare tbody.field { display: none; }
  .sd-compare-page .sd-compare table:has(.cmp-cb:checked) tbody.field { display: block; }
  .sd-compare-page .sd-compare .cmp-toggle-row { display: block; }
  .sd-compare-page .sd-compare .cmp-toggle-row tr, .sd-compare-page .sd-compare .cmp-toggle-row td { display: block; border: 0; padding: 0; margin: 0; }
  .sd-compare-page .sd-compare .cmp-toggle-row td::before { content: none; }
  .sd-compare-page .sd-compare .cmp-toggle { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; margin: .25rem 0 1rem; padding: .8rem 1rem; border: 1px solid var(--clay); border-radius: 999px; color: var(--clay-ink); background: var(--surface); font-weight: 800; font-size: .95rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .sd-compare-page .sd-compare .cmp-toggle .chev { transition: transform .15s ease; }
  .sd-compare-page .sd-compare table:has(.cmp-cb:checked) .cmp-toggle .chev { transform: rotate(180deg); }
  .sd-compare-page .sd-compare .cmp-toggle .lbl-less { display: none; }
  .sd-compare-page .sd-compare table:has(.cmp-cb:checked) .cmp-toggle .lbl-more { display: none; }
  .sd-compare-page .sd-compare table:has(.cmp-cb:checked) .cmp-toggle .lbl-less { display: inline; }
  /* no-:has() fallback: never trap the field behind a dead toggle */
  @supports not (selector(:has(*))) {
    .sd-compare-page .sd-compare tbody.field { display: block; }
    .sd-compare-page .sd-compare .cmp-toggle-row { display: none; }
  }
}