/* ==========================================================================
   COMPONENTS · SEARCH-EXTRAS (clean-room p-search) — the lookup desk of the
   reference work. The base system ships .op-search (a flat query row + a single
   result list); a search OF THE MATRIX needs more: results GROUPED across the
   register (factors → countries → categories → report bodies), each rendered in
   the settled listing grammar (collect ↔ identity ↔ escorted score, s3) with a
   doorway, plus the gated report-body hit (verdict free / evidence paid, s2)
   built WITHOUT leaning on report-body text. Everything below references tokens
   only and links AFTER offprint.css + the three M1 component sets. ITCSS: 06.
   ========================================================================== */

/* — The page header: the desk, the echoed query, the honest total — */
.op-lookup__query {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}
.op-lookup__query .op-search__field { flex: 1 1 20rem; }

/* The honest total — a mono figure over its breakdown, factors-first. Never
   "0 products"; always the count and what it spans. */
.op-results__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
  margin-top: var(--space-md);
  padding-bottom: var(--space-xs);
}
.op-results__total-figure {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text);
  line-height: 1;
}
.op-results__total-label {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  color: var(--text-secondary);
}
.op-results__total-label q { font-style: normal; color: var(--text); }
.op-results__breakdown {
  flex-basis: 100%;
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.op-results__breakdown b {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}
.op-results__breakdown a { color: var(--text-secondary); text-decoration: none; border-bottom: 1px solid var(--link-underline); }
.op-results__breakdown a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* — The grouped results — one section per axis of the register — */
.op-results { display: grid; gap: var(--space-xl); }

.op-result-group { display: grid; gap: var(--space-sm); scroll-margin-top: 6rem; }

/* A printed running-head per group: figure label · serif title · mono count */
.op-result-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
  padding-bottom: var(--space-2xs);
  border-bottom: 2px solid var(--rule-strong);
}
.op-result-group__title {
  font-family: var(--font-reading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin: 0;
}
.op-result-group__count {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.op-result-group__lead {
  flex-basis: 100%;
  margin: 0;
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  max-inline-size: var(--measure);
}
.op-result-group__lead em { font-style: italic; color: var(--text); }

/* ==========================================================================
   THE HIT ROW — composes the s3 .op-table grammar (collect-cell ↔ leader ↔
   escorted badge ↔ doorway). Here the identity cell is richer than a leaderboard
   row: a serif title link, a furniture path through the matrix, and a one-line
   description carrying the <mark> of where the query actually matched.
   ========================================================================== */
.op-table--hits { table-layout: auto; }
.op-table--hits td { vertical-align: top; padding-block: var(--space-sm); }
.op-table--hits .op-collect-cell { padding-top: calc(var(--space-sm) + 0.15rem); }

.op-hit__leader { display: grid; gap: 0.25rem; min-inline-size: 0; }
.op-hit__path {
  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);
}
.op-hit__path .op-hit__rung + .op-hit__rung::before { content: "\203A"; margin: 0 0.4em; color: var(--rule-strong); }
.op-hit__name {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--link);
  text-decoration: none;
}
.op-hit__name:hover { color: var(--accent); }
.op-hit__name .op-hit__iso {
  margin-inline-start: 0.4em;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.op-hit__snippet {
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  max-inline-size: var(--measure-wide);
}
.op-hit__snippet mark {
  background: var(--highlight);
  color: inherit;
  border-radius: var(--radius-xs);
  padding: 0 0.12em;
}
/* the "why this surfaced" candour note (countries surfaced for findings, not
   for a name match) — stated, never hidden */
.op-hit__why {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-style: italic;
  color: var(--text-muted);
}

/* The escort cell: the badge stacked over its honest, labelled reading, so the
   number is never naked of meaning ("Best of 22 · South Korea"). */
.op-hit__escort-cell { white-space: nowrap; }
.op-hit__escort { display: inline-grid; gap: 0.3rem; justify-items: start; }
.op-hit__escort-note {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.op-hit__escort-note b {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}
.op-hit__door-cell { white-space: nowrap; text-align: right; vertical-align: middle; }

/* ==========================================================================
   THE SPECIALTY HIT — a category match is a single doorway, not a ranked row,
   so it reads as a filed section card rather than a leaderboard line.
   ========================================================================== */
.op-specialty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.op-specialty__body { flex: 1 1 16rem; display: grid; gap: 0.3rem; min-inline-size: 0; }
.op-specialty__name {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--link);
  text-decoration: none;
}
.op-specialty__name:hover { color: var(--accent); }
.op-specialty__meta {
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.op-specialty__meta b {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}
.op-specialty__sub {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

/* ==========================================================================
   THE GATED REPORT-BODY HIT — the keystone D3 state. A match lives INSIDE a paid
   offprint. We prove the apparatus is real (the factor, the country, and the
   FREE verdict + sources tally, drawn from the score layer — NOT from report
   rows, which are empty in dev), then gate the body. No fabricated snippet is
   ever shown behind the wall; one quiet solid-ink ask; never double-walled.
   ========================================================================== */
.op-bodyhit {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.op-bodyhit__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-md);
}
.op-bodyhit__id { display: grid; gap: 0.2rem; min-inline-size: 0; }
.op-bodyhit__where {
  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);
}
.op-bodyhit__where .op-bodyhit__iso {
  font-family: var(--font-data);
  margin-inline-start: 0.4em;
  color: var(--text-secondary);
}
.op-bodyhit__title {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--link);
  text-decoration: none;
}
.op-bodyhit__title:hover { color: var(--accent); }
.op-bodyhit__escort { display: inline-grid; gap: 0.3rem; justify-items: end; flex: none; }
.op-bodyhit__escort .op-tally { justify-self: end; }

/* The free verdict — the justification, given away to prove a real report
   stands behind the gate (spine §5). Labelled FREE, set in the reading voice. */
.op-bodyhit__verdict {
  display: grid;
  gap: var(--space-3xs);
  padding-inline-start: var(--space-sm);
  border-inline-start: 2px solid var(--rule-strong);
}
.op-bodyhit__verdict-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);
}
.op-bodyhit__verdict-text {
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text);
  max-inline-size: var(--measure);
}
.op-bodyhit__verdict-text em { font-style: italic; }

/* The body snippet (BL-26) — a short window around the matched term, with the
   match marked. A teaser of where the term sits in the evidence, not the
   evidence itself; the full cited body stays behind the gate below. */
.op-bodyhit__snippet {
  display: grid;
  gap: var(--space-3xs);
  padding-inline-start: var(--space-sm);
  border-inline-start: 2px solid var(--rule);
}
.op-bodyhit__snippet-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);
}
.op-bodyhit__snippet-text {
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  max-inline-size: var(--measure);
}
.op-bodyhit__mark {
  background: var(--accent-wash, rgba(180, 140, 40, 0.22));
  color: var(--text);
  font-weight: var(--weight-medium);
  padding-inline: 0.1em;
  border-radius: var(--radius-2xs, 2px);
}

/* The gate over the body — a hatched band reading as paper held BEHIND the
   evidence wall. It states THAT the term matched in the body (a structural
   fact: which sections), shows NO body text, and offers ONE quiet ask. */
.op-bodyhit__gate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--accent-keyline);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  background-image: var(--hatch-image);
}
.op-bodyhit__lock {
  position: relative;
  inline-size: 2.1rem;
  block-size: 2.1rem;
  flex: none;
  border-radius: var(--radius-seal);
  background: var(--surface-raised);
  border: 1px solid var(--accent-keyline);
  box-shadow: var(--shadow-deboss);
}
.op-bodyhit__lock::before {                 /* the shackle */
  content: "";
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: 0.5rem;
  block-size: 0.42rem;
  border: 2px solid var(--accent);
  border-block-end: 0;
  border-start-start-radius: var(--radius-pill);
  border-start-end-radius: var(--radius-pill);
}
.op-bodyhit__lock::after {                  /* the body */
  content: "";
  position: absolute;
  inset-block-start: 0.92rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: 0.8rem;
  block-size: 0.62rem;
  background: var(--accent);
  border-radius: var(--radius-xs);
}
.op-bodyhit__gate-body { flex: 1 1 16rem; display: grid; gap: 0.25rem; min-inline-size: 0; }
.op-bodyhit__gate-line {
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text);
}
.op-bodyhit__gate-line q { font-style: normal; font-family: var(--font-data); color: var(--text); }
.op-bodyhit__gate-line b {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: var(--weight-semibold);
}
.op-bodyhit__gate-note {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.op-bodyhit__gate-action { flex: none; display: grid; gap: 0.35rem; justify-items: end; }
.op-bodyhit__gate-action .op-paywall__signin,
.op-bodyhit__gate-sub {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  color: var(--text-muted);
}

/* ==========================================================================
   ZERO-RESULT — never a dead end. Mirrors the selector's no-match rule: state
   what the record DOES cover, then route back into the index. Composes op-empty
   + op-stat; this only arranges the "what we cover" plate and the doorways.
   ========================================================================== */
.op-noresult { display: grid; gap: var(--space-lg); }
.op-noresult__covers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  padding: var(--space-lg);
  border-block: 1px solid var(--rule-strong);
}
.op-noresult__doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-md);
}
.op-noresult__door {
  display: grid;
  gap: 0.3rem;
  align-content: start;
  padding: var(--space-md);
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  transition: var(--transition-ink);
}
.op-noresult__door:hover { border-color: var(--text); }
.op-noresult__door-name {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.op-noresult__door-name::after { content: " \2192"; color: var(--accent); }
.op-noresult__door-desc {
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}
.op-noresult__door-desc b {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}

/* ==========================================================================
   MOBILE — the grouped results fold legibly; tables go card-wise per row so
   the escort never gets crushed beside the identity. Source of truth: --bp-md.
   ========================================================================== */
@media (max-width: 56.24rem) {
  .op-results { gap: var(--space-lg); }

  /* the hit tables relayout: each row becomes a stacked card */
  .op-table--hits,
  .op-table--hits tbody,
  .op-table--hits tr,
  .op-table--hits td { display: block; inline-size: 100%; }
  .op-table--hits thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .op-table--hits tr {
    position: relative;
    padding: var(--space-sm) 0 var(--space-sm) 2.6rem;
    border-top: 1px solid var(--rule-faint);
  }
  .op-table--hits td { padding: 0.15rem 0; border: 0; }
  .op-table--hits .op-collect-cell {
    position: absolute;
    inset-block-start: var(--space-sm);
    inset-inline-start: 0;
    inline-size: auto;
    padding: 0;
  }
  .op-table--hits .op-hit__escort { margin-top: 0.35rem; }
  .op-table--hits .op-hit__door-cell { text-align: left; margin-top: 0.5rem; }
  /* keep the collected keyline reading on the card */
  .op-table--hits tbody tr:has(.op-collect[aria-pressed="true"]) {
    padding-inline-start: calc(2.6rem - 2px);
    border-inline-start: 2px solid var(--surface-inverse);
  }

  .op-bodyhit__head { flex-direction: column; }
  .op-bodyhit__escort { justify-items: start; }
  .op-bodyhit__escort .op-tally { justify-self: start; }
  .op-bodyhit__gate-action { justify-items: start; inline-size: 100%; }

  .op-noresult__covers { grid-template-columns: 1fr; gap: var(--space-sm); padding: var(--space-md) 0; }
}