/* ==========================================================================
   PAGE · RANKINGS — the small amount the two ranking surfaces genuinely add on
   top of the composed systems (s1 selector + lens · s2 leaderboard + coverage ·
   s3 apparatus bar + collect + tray). Two jobs the built systems do not cover:

     1. The Factor Index directory (/rankings) has to show, per factor, HOW MUCH
        of the record is assessed — the @scored_counts denominator — right in the
        selector row, as a non-hue coverage register. The popover selector never
        needed this; the full-size directory does.
     2. A leaderboard row has to carry the s3 COLLECT slot so a reader can build a
        comparison from the ranking. s2's .op-leaderboard predates s3's collect, so
        the two are wired together here (a leading column + the collected-row mark).

   Everything else is composed from the systems unchanged. Tokens only, below
   01-settings. Link AFTER offprint.css and the three systems' component CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · THE DIRECTORY — coverage register inside the full-size selector
   -------------------------------------------------------------------------- */

/* A two-line option: the name on top, a quiet description beneath. The selector
   already lets __name sit inside a wrapping span (as the filter results do); we
   only need to style the description line. */
.op-selector__desc {
  display: block;
  margin-top: 0.15em;
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: var(--tracking-normal);
  max-width: 54ch;
}

/* The coverage register that replaces the bare factor count on a terminal
   (factor) row: a mono "n / 22" over a short, non-hue proportion track, so the
   reader can see at a glance how complete the record is on that dimension. It is
   NOT a score — it carries no band ink; it is greyscale-safe by construction. */
.op-rk-cov {
  flex: none;
  display: grid;
  justify-items: end;
  gap: 0.3em;
  text-align: right;
}
.op-rk-cov__count {
  font-family: var(--font-data);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-secondary);
}
.op-rk-cov__count b { color: var(--text); font-weight: var(--weight-semibold); }
.op-rk-cov__track {
  position: relative;
  inline-size: 3.4rem;
  block-size: 0.28rem;
  background: var(--surface-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xs);
  overflow: hidden;
}
.op-rk-cov__fill {
  display: block;
  block-size: 100%;
  inline-size: calc(var(--c, 0) * 100%);
  /* ink, not a band colour — coverage is completeness, never quality */
  background: var(--text-secondary);
  background-image: repeating-linear-gradient(90deg,
    color-mix(in oklab, black 8%, transparent) 0 1px, transparent 1px 4px);
}
/* A thinly-assessed factor (below the editorial floor) wears the no-data hatch
   on its track and is called out in mono — candor, even in the index. */
.op-rk-cov--thin .op-rk-cov__track {
  background-color: var(--surface);
  background-image: var(--hatch-image);
}
.op-rk-cov--thin .op-rk-cov__fill { display: none; }
.op-rk-cov--thin .op-rk-cov__count { color: var(--band-none-ink); }

/* A standing coverage key, printed once above the directory like a figure key. */
.op-rk-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  padding: var(--space-2xs) 0;
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}
.op-rk-key__item { display: inline-flex; align-items: center; gap: 0.5em; }
.op-rk-key__swatch {
  inline-size: 2.4rem;
  block-size: 0.28rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
}
.op-rk-key__swatch--fill { background: var(--text-secondary); }
.op-rk-key__swatch--thin {
  background-color: var(--surface);
  background-image: var(--hatch-image);
}
.op-rk-key__num {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-secondary);
}

/* The directory frame: a two-column lead on desktop (the standfirst/coverage
   note beside a "how this index works" aside), folding to one on mobile. */
.op-rk-dir-lead {
  display: grid;
  gap: var(--space-md) var(--space-xl);
}
@media (min-width: 56.25rem) {
  .op-rk-dir-lead { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
}
.op-rk-aside {
  padding: var(--space-md);
  background: var(--surface-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.op-rk-aside__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);
  margin: 0 0 var(--space-2xs);
}
.op-rk-aside p {
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin: 0 0 var(--space-xs);
}
.op-rk-aside p:last-child { margin-bottom: 0; }

/* When the directory pick is a terminal factor, a faint "→ leaderboard" hint
   trails it on hover, so the row reads as a doorway, not just a lens-setter. */
.op-selector--full .op-selector__option[data-terminal="true"] .op-selector__pick::after {
  content: "Leaderboard \2192";
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
  margin-inline-start: var(--space-sm);
  flex: none;
}
.op-selector--full .op-selector__option[data-terminal="true"] .op-selector__pick:hover::after,
.op-selector--full .op-selector__option[data-terminal="true"] .op-selector__pick:focus-visible::after {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   2 · THE LEADERBOARD — wiring s3's collect slot into s2's ranked row
   -------------------------------------------------------------------------- */

/* A collectable board gains a leading selection column ahead of the rank. */
.op-leaderboard--collectable .op-leaderboard__row {
  grid-template-columns: 1.6rem 2.4rem minmax(7rem, 1fr) minmax(4rem, 10rem) auto auto;
}
.op-leaderboard__collect {
  display: inline-grid;
  place-items: center;
}

/* The band-bar primitive is an inline <span>; inside the leaderboard grid cell
   it must take a block box for its inline-size/block-size to apply (otherwise it
   collapses to its content). Scoped to the board so the global primitive is
   untouched. */
.op-leaderboard__bar { display: block; }
.op-leaderboard__bar > .op-bar { display: block; inline-size: 100%; }

/* The collapsed-tail notice: the segregation rule is printed BY DEFAULT (candor
   is first-class), and the not-ranked are revealed on request rather than dumped. */
.op-leaderboard__tail-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
  padding-block: var(--space-xs);
}
.op-leaderboard__tail-notice .op-coverage-tag { white-space: normal; }
.op-leaderboard__tail-line {
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.op-leaderboard__tail-line b {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}
.op-leaderboard__tail-show {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid var(--link-underline);
}
.op-leaderboard__tail-show:hover { color: var(--accent); border-bottom-color: var(--accent); }
.op-leaderboard__tail-show::after { content: " \2193"; color: var(--accent); }

/* A collected row earns the same restrained ink-keyline + wash s3 gives a
   collected table row — record, not reward; findable without colour. */
.op-leaderboard__row:has(.op-collect[aria-pressed="true"]) {
  background: var(--accent-wash);
  box-shadow: inset 2px 0 0 var(--surface-inverse);
}
.op-leaderboard__row.is-collected {
  background: var(--accent-wash);
  box-shadow: inset 2px 0 0 var(--surface-inverse);
}

/* The report doorway that trails the score — the quiet editorial pull. */
.op-leaderboard__report {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.op-leaderboard__report::after { content: " \2192"; color: var(--accent); }
.op-leaderboard__report:hover { color: var(--accent); }

/* The justification — the verdict sentence, free, set in the reading voice,
   sitting under the row on its own line so the ranking stays scannable but the
   reasoning is one glance away. Spans the data columns. */
.op-leaderboard__why {
  grid-column: 3 / -1;
  margin-top: 0.1em;
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  max-width: 68ch;
}
.op-leaderboard__why b { color: var(--text); font-weight: var(--weight-semibold); }

@media (max-width: 40rem) {
  .op-leaderboard--collectable .op-leaderboard__row {
    grid-template-columns: 1.4rem 1.8rem 1fr auto;
  }
  .op-leaderboard__why { grid-column: 2 / -1; }
}

/* --------------------------------------------------------------------------
   3 · THE FACTOR SWITCHER — the lens, made changeable on the leaderboard page.
   Reuses s3's .op-disclosure/.op-menu and s1's furniture; only the wrapping
   label needs styling. Lets one page resolve both a well-covered board and a
   thinly-assessed one (the same instrument under two data conditions).
   -------------------------------------------------------------------------- */
.op-rk-switch {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2xs);
}
.op-rk-switch__label {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.op-menu__path {
  display: block;
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* A small framed coverage/provenance strip above the board. */
.op-rk-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-xl);
  padding: var(--space-sm) 0;
}
.op-rk-meta__prov {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  max-width: 60ch;
}
.op-rk-meta__prov a { color: var(--text-secondary); }
.op-rk-meta__prov a:hover { color: var(--accent); }