/* ==========================================================================
   PAGE · COMPARE — the surface where the two axes meet: 2–4 countries read
   side by side, factor by factor, on the lens carried in. This file does NOT
   re-invent the score language or the Matrix — it COMPOSES s2's .op-comparison,
   .op-medallion and the honest-absence states, s3's .op-tray / .op-collect, and
   s1's nameplate / lens / crosslink / colophon. It adds only what /compare
   genuinely needs on top: the page shell, the per-column OVERALL imprimatur
   strip, the category-average + doorway rows inside the Matrix, the lens-focus
   treatment, the cell-as-doorway link, and the two-state (picker ⇄ table) shell.
   Tokens only, below 01-settings. Link AFTER offprint.css and the system files.
   ========================================================================== */

/* — The page shell — a wide listing/dashboard measure, generous gutters — */
.cmp-page { padding-block: var(--space-lg) var(--space-2xl); }
.cmp-wrap { max-inline-size: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); }

/* The page-level masthead — defers to the global nameplate (s1 §6): largest
   serif title + a small-caps issue line + its OWN single rubric hairline. It
   never repeats the wordmark. */
.cmp-masthead { margin-block: var(--space-md) var(--space-lg); }
.cmp-masthead__kicker {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.cmp-masthead__title {
  font-family: var(--font-reading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text);
  margin: var(--space-2xs) 0 0;
  max-inline-size: 22ch;
}
.cmp-masthead__rule { block-size: 2px; background: var(--accent); inline-size: 3.5rem; margin-block: var(--space-sm); }
.cmp-masthead__standfirst {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
  max-inline-size: 60ch;
}
.cmp-masthead__standfirst b { color: var(--text); font-weight: var(--weight-semibold); }

/* — The demo state switch — a clearly-labelled mockup affordance (NOT product
   chrome) that lets the operator flip between the two states of the one design.
   Set apart as a dashed, furniture-voiced strip so it never reads as a CTA. — */
.cmp-statebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-block: var(--space-md);
  padding: var(--space-2xs) var(--space-sm);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--surface-sunken) 55%, transparent);
}
.cmp-statebar__label {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.cmp-statebar__note { font-family: var(--font-reading); font-size: var(--text-sm); color: var(--text-secondary); margin-inline-start: auto; }
.cmp-seg { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: var(--radius-xs); overflow: hidden; }
.cmp-seg__btn {
  font-family: var(--font-furniture);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  padding: 0.4em 0.9em;
  background: var(--surface-raised);
  border: 0;
  border-inline-start: 1px solid var(--rule);
  color: var(--text-secondary);
  cursor: pointer;
}
.cmp-seg__btn:first-child { border-inline-start: 0; }
.cmp-seg__btn[aria-pressed="true"] { background: var(--surface-inverse); color: var(--text-inverse); }
.cmp-seg__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* The two states are mutually exclusive panels toggled by JS. */
.cmp-state[hidden] { display: none; }

/* — The lens row: the carried-in lens (banner) + the in-place change control — */
.cmp-lensrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-block: var(--space-md);
}
.cmp-lensrow .op-lens--banner { flex: 1 1 22rem; }
.cmp-lensrow__change { flex: none; }

/* ==========================================================================
   THE OVERALL IMPRIMATUR STRIP — the per-column OVERALL (s2 Medallion), always
   present above the Matrix. Each column's overall = mean of its 8 category
   averages, round-then-band (D5); a column assessed in <4 of 8 domains would
   show the suppressed seal instead of a thin number (D6). Ships its denominator.
   ========================================================================== */
.cmp-overall {
  display: grid;
  grid-template-columns: 11rem repeat(var(--cmp-cols, 3), minmax(0, 1fr));
  align-items: stretch;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-block: var(--space-md);
}
.cmp-overall__label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3xs);
  padding: var(--space-md);
  background: var(--surface-sunken);
}
.cmp-overall__label-head {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text);
}
.cmp-overall__label-sub { font-family: var(--font-furniture); font-size: var(--text-3xs); color: var(--text-muted); line-height: var(--leading-normal); }
.cmp-overall__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-md) var(--space-sm);
  background: var(--surface-raised);
  text-align: center;
}
.cmp-overall__country {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.cmp-overall__iso {
  font-family: var(--font-data);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-inline-start: 0.4em;
}
.cmp-overall__cov { font-family: var(--font-furniture); font-size: var(--text-3xs); letter-spacing: var(--tracking-wide); color: var(--text-muted); }

/* ==========================================================================
   MATRIX EXTENSIONS — extend (never fork) s2's .op-comparison with three row
   types /compare needs: the per-category AVERAGE row, the lens-FOCUS group, and
   the honest "showing N of M" DOORWAY row. Plus the escorted cell becomes a real
   doorway (a link) — no naked score, no dead-end cell.
   ========================================================================== */

/* The category-average row — the "shape" along the top of each category group.
   Deckle ground + a strong top rule mark it off from the factor rows beneath. */
.op-comparison__avgrow > * { background: var(--surface-sunken); border-top: 1.5px solid var(--rule-strong); }
.op-comparison__avgrow .op-comparison__leader { background: var(--surface-sunken); }
.op-comparison__cat {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  font-family: var(--font-furniture);
  text-transform: none;
}
.op-comparison__cat-name {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--text);
}
.op-comparison__cat-meta { font-size: var(--text-3xs); letter-spacing: var(--tracking-wide); color: var(--text-muted); }
.op-comparison__cat-meta [data-numeric] { font-family: var(--font-data); }
.op-comparison__avgrow .op-comparison__score { font-size: var(--text-md); }

/* The column-head lens caption — names the dimension the headline figure is on,
   so the per-column standing reads as "good ON the lens", never an ambient grade. */
.op-comparison__overall-cap {
  display: block;
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.15em;
}

/* The lens-focus group — the category the reader carried the lens in on is
   pulled to the top and quietly washed, with a rubric register tick. The wash is
   the faint accent paper, NOT a band colour, so it never reads as a score. */
.op-comparison__avgrow.is-focus > * { background: var(--accent-wash); }
.op-comparison__avgrow.is-focus .op-comparison__leader { background: var(--accent-wash); }
.op-comparison__cat-name .cmp-focus-tick {
  display: inline-block;
  inline-size: 0.5em; block-size: 0.5em;
  margin-inline-end: 0.5em;
  background: var(--accent);
  transform: rotate(45deg);
  vertical-align: middle;
}
.op-comparison tbody tr.is-focus-factor .op-comparison__leader { box-shadow: inset 2px 0 0 var(--accent-keyline); }

/* The escorted cell as a doorway — every scored cell links to the report behind
   it; every leader links to the factor. Calm: ink, no underline at rest, the
   rubric link-underline on intent (never blue). The numeral keeps its band ink. */
a.op-comparison__cell { text-decoration: none; color: inherit; border-radius: var(--radius-xs); }
a.op-comparison__cell:hover .op-comparison__score,
a.op-comparison__cell:focus-visible .op-comparison__score {
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-underline-offset: 0.18em;
}
a.op-comparison__cell:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.op-comparison__leader a { color: inherit; text-decoration: none; }
.op-comparison tbody tr:hover .op-comparison__leader a { color: var(--accent); }
.op-comparison__leader a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The whole cell is the target — give absent cells a doorway too (to the factor,
   which explains its coverage), so an absence is honest but never a dead end. */
.op-comparison td a.op-comparison__cell { display: flex; align-items: center; gap: var(--space-2xs); }
.op-comparison__cell-go {
  margin-inline-start: auto;
  font-family: var(--font-data);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  opacity: 0;
  transition: var(--transition-ink);
}
a.op-comparison__cell:hover .op-comparison__cell-go,
a.op-comparison__cell:focus-visible .op-comparison__cell-go { opacity: 1; color: var(--accent); }

/* The honest doorway row — "showing N of M factors · all M →" — closes each
   category group so the list never stops at an arbitrary cut (spine §2/§7). */
.op-comparison__doorrow td {
  padding-block: var(--space-2xs);
  border-top: 1px dotted var(--rule);
  background: var(--surface-raised);
}
.op-comparison__door {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  font-family: var(--font-furniture);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.op-comparison__door a {
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--text-3xs);
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--link-underline);
}
.op-comparison__door a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.op-comparison__door [data-numeric] { font-family: var(--font-data); color: var(--text-secondary); }

/* The Matrix scroller — keep the leader pinned and let the columns scroll on a
   phone (the brief's sanctioned fold). A foot caption flags the gesture. */
.cmp-matrix-scroll { overflow-x: auto; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); }
.cmp-matrix-scroll .op-comparison { font-size: var(--text-sm); }
.cmp-swipe {
  display: none;
  align-items: center;
  gap: 0.5em;
  margin-block: var(--space-2xs);
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

/* — The coverage-disclosure aside — candour is the credential (spine §7). The
   record states the edge of what it knows, so an absence never reads as a low
   score. A deckle well with a leading no-data hatch chip. — */
.cmp-candour {
  display: flex;
  gap: var(--space-sm);
  margin-block: var(--space-md);
  padding: var(--space-md);
  background: var(--surface-sunken);
  border: 1px solid var(--rule);
  border-inline-start: 2px solid var(--rule-strong);
  border-radius: var(--radius-sm);
}
.cmp-candour__chip {
  flex: none;
  inline-size: 1.8rem; block-size: 1.8rem;
  border: 1px solid var(--band-none-line);
  border-radius: var(--radius-xs);
  background-color: var(--surface);
  background-image: var(--hatch-image-dense);
}
.cmp-candour__body { font-family: var(--font-reading); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); }
.cmp-candour__body b { color: var(--text); font-weight: var(--weight-semibold); }
.cmp-candour__body a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--link-underline); }
.cmp-candour__body a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* — A quiet reading aid above the Matrix: how to read a cell — */
.cmp-howto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-block: var(--space-md) var(--space-2xs);
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}
.cmp-howto b { color: var(--text-secondary); font-weight: var(--weight-semibold); }

@media (max-width: 56.24rem) {
  .cmp-overall { grid-template-columns: 1fr 1fr; }
  .cmp-overall__label { grid-column: 1 / -1; }
  .cmp-swipe { display: flex; }
  .cmp-masthead__title { font-size: var(--text-xl); }
  /* a tighter pinned leader so a column shows beside it on a 390px screen */
  .op-comparison thead th.op-comparison__corner { min-inline-size: 8.5rem; }
  .op-comparison thead th { min-inline-size: 7.5rem; }
}
@media (max-width: 30rem) {
  .cmp-overall { grid-template-columns: 1fr; }
}