/* /compare and /compare/{slug} (GTM brief, 12 Nov 2026). Loaded after sub.css. The one instrument is the beat under
   the header: one question, two answers in one plain window, theirs a list to sort through, Timer's the answer that
   holds. Data is drawn as objects (a fact with its source and time), never a feature table or ticks. No logos, no
   vendor's look. Tokens only; every rule under .sp. */

/* ---- headings: a statement in two lines, the second one quieter ---- */
.sp.cmp .cmp-mu { display: block; color: var(--lp-muted); }
.sp.cmp .eyebrow a { color: inherit; text-decoration: none; }
.sp.cmp .eyebrow a:hover { text-decoration: underline; text-decoration-color: var(--lp-accent); text-underline-offset: 3px; }

/* ---- citations: a small number that jumps to the source list ---- */
.sp .cmp-ref { font: 600 11px var(--tos-font-mono); line-height: 0; margin-inline-start: 2px; }
.sp .cmp-ref a { color: var(--lp-accent-text); text-decoration: none; padding: 0 2px; }
.sp .cmp-ref a:hover, .sp .cmp-ref a:focus-visible { text-decoration: underline; }

/* ---- the beat: the header's instrument (below the copy on a phone, beside it on a desktop) ---- */
.sp .cmp-beat { margin: 36px 0 0; }
.sp .cmp-win { border: 1px solid var(--lp-rule-2); border-radius: 14px; background: var(--lp-paper); overflow: hidden; box-shadow: 0 18px 50px -30px color-mix(in srgb, var(--lp-ink) 45%, transparent); }
.sp .cmp-q { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 16px 20px; border-bottom: 1px solid var(--lp-rule); }
.sp .cmp-q .rec { color: var(--lp-muted); }
.sp .cmp-q b { font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--lp-ink); }
.sp .cmp-two { display: grid; }
.sp .cmp-side { padding: 20px; display: grid; gap: 12px; align-content: start; }
.sp .cmp-side.is-them { background: color-mix(in srgb, var(--lp-paper-2) 60%, var(--lp-paper)); }
.sp .cmp-side.is-us { border-top: 1px solid var(--lp-rule); }
.sp .cmp-who { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--lp-muted); text-transform: uppercase; letter-spacing: .08em; }
.sp .cmp-side.is-us .cmp-who { color: var(--lp-accent-text); }
.sp .cmp-side.is-us .cmp-who::before { content: ""; width: 7px; height: 7px; background: var(--lp-accent); flex: none; }
.sp .cmp-say { margin: 0; font-size: 16px; line-height: 1.55; color: var(--lp-ink-2); }
.sp .cmp-side.is-us .cmp-say { font-size: 18px; line-height: 1.5; color: var(--lp-ink); font-weight: 500; letter-spacing: -.005em; }

/* search results: rows to sort through */
.sp .cmp-hits { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sp .cmp-hits li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 9px 12px; border: 1px solid var(--lp-rule); border-radius: 9px; background: var(--lp-paper); }
.sp .cmp-file { font-size: 14px; color: var(--lp-ink); overflow-wrap: anywhere; }
.sp .cmp-hit-x { grid-column: 1; grid-row: 2; font-size: 13px; color: var(--lp-muted); }
.sp .cmp-app { grid-column: 2; grid-row: 1; color: var(--lp-muted); white-space: nowrap; }

/* chips under an answer */
.sp .cmp-chips { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sp .cmp-chips span { font: 450 12px var(--tos-font-mono); padding: 4px 9px; border-radius: 6px; border: 1px solid var(--lp-rule-2); color: var(--lp-ink-2); background: var(--lp-paper); }
.sp .cmp-side.is-us .cmp-chips span:first-child { color: var(--lp-accent-text); border-color: color-mix(in srgb, var(--lp-accent) 45%, transparent); background: color-mix(in srgb, var(--lp-accent) 8%, var(--lp-paper)); }
.sp .cmp-cap { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--lp-muted); max-width: 60ch; }

@media (min-width: 760px) {
  .sp .cmp-two { grid-template-columns: 1fr 1fr; }
  .sp .cmp-side { padding: 24px 26px; }
  .sp .cmp-side.is-us { border-top: 0; border-inline-start: 1px solid var(--lp-rule); }
  .sp .cmp-q { padding: 18px 26px; }
  .sp .cmp-q b { font-size: 20px; }
}
/* desktop: the beat sits in the header's right column, so the two answers stack again, theirs above Timer's */
@media (min-width: 1180px) {
  .sp .cmp-head > .hd-fig.cmp-beat { grid-column: 7 / span 6; margin-inline-start: 28px; }
  .sp .cmp-two { grid-template-columns: 1fr; }
  .sp .cmp-side { padding: 18px 22px; gap: 10px; }
  .sp .cmp-side.is-us { border-inline-start: 0; border-top: 1px solid var(--lp-rule); }
  .sp .cmp-hits { grid-template-columns: 1fr 1fr; }
  .sp .cmp-obj .cmp-hits { grid-template-columns: 1fr; }
  .sp .cmp-q { padding: 16px 22px; }
}

/* ---- objects inside a chapter: search results beside memory entries ---- */
.sp .cmp-objs { display: grid; gap: 14px; }
.sp .cmp-objs.is-pair { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sp .cmp-obj { border: 1px solid var(--lp-rule); border-radius: 12px; padding: 14px 16px; background: var(--lp-paper); display: grid; gap: 10px; align-content: start; }
.sp .cmp-obj.is-them { background: color-mix(in srgb, var(--lp-paper-2) 60%, var(--lp-paper)); }
.sp .cmp-obj.is-us { border-color: var(--lp-rule-2); }
.sp .cmp-tag { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--lp-muted); }
.sp .cmp-obj.is-us .cmp-tag::before { content: ""; width: 7px; height: 7px; background: var(--lp-accent); flex: none; }
.sp .cmp-obj .cmp-hits li { padding: 8px 10px; }
.sp .cmp-mem { list-style: none; margin: 0; padding: 0; display: grid; }
.sp .cmp-mem li { display: grid; gap: 3px; padding: 10px 0; border-top: 1px solid var(--lp-rule); }
.sp .cmp-mem li:first-child { border-top: 0; padding-top: 2px; }
.sp .cmp-mem b { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--lp-ink); }
.sp .cmp-mem .rec { color: var(--lp-muted); }

/* ---- questions ---- */
.sp.cmp .pq-list { display: grid; border-top: 1px solid var(--lp-ink); }
.sp.cmp .pq { border-bottom: 1px solid var(--lp-rule); }
.sp.cmp .pq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; font-weight: 600; font-size: 17px; color: var(--lp-ink); }
.sp.cmp .pq summary::-webkit-details-marker { display: none; }
.sp.cmp .pq summary::after { content: "+"; font-weight: 400; color: var(--lp-muted); }
.sp.cmp .pq[open] summary::after { content: "\2212"; }
.sp.cmp .pq summary:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.sp.cmp .pq p { margin: 0 0 18px; color: var(--lp-ink-2); max-width: 60ch; }
.sp.cmp .pq p a { color: var(--lp-ink); text-decoration-color: var(--lp-accent); text-underline-offset: 3px; }

/* ---- sources: the foot of every compare page ---- */
.sp .cmp-src { padding-block: 40px 72px; border-top: 1px solid var(--lp-rule); }
.sp .cmp-src h2 { margin: 0 0 10px; color: var(--lp-muted); text-transform: uppercase; letter-spacing: .08em; }
.sp .cmp-src p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--lp-ink-2); max-width: 70ch; }
.sp .cmp-src ol { margin: 0; padding-inline-start: 22px; display: grid; gap: 6px; list-style: decimal; }
.sp .cmp-src li::marker { color: var(--lp-muted); }
.sp .cmp-src li { font: 450 12px/1.5 var(--tos-font-mono); color: var(--lp-muted); }
.sp .cmp-src li:target { color: var(--lp-ink); }
.sp .cmp-src a { color: var(--lp-ink-2); overflow-wrap: anywhere; text-underline-offset: 3px; }
.sp .cmp-src li:target a { color: var(--lp-ink); text-decoration-color: var(--lp-accent); }

/* ---- the hub's lists ---- */
.sp .cmp-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lp-ink); }
.sp .cmp-list li { border-bottom: 1px solid var(--lp-rule); }
.sp .cmp-list li > a, .sp .cmp-list li > span { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: baseline; column-gap: 14px; padding: 16px 0; min-height: 56px; text-decoration: none; color: inherit; }
.sp .cmp-list b { font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--lp-ink); }
.sp .cmp-list .rec { color: var(--lp-muted); }
.sp .cmp-list i { font-style: normal; color: var(--lp-accent-text); }
.sp .cmp-list a:hover b, .sp .cmp-list a:focus-visible b { text-decoration: underline; text-decoration-color: var(--lp-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sp .cmp-list li.is-soon b { color: var(--lp-muted); font-weight: 500; }
.sp .cmp-list li.is-soon > span { grid-template-columns: minmax(0, 1fr) auto; }