/* ==========================================================================
   COMPONENTS · APPARATUS BAR — the one filter+sort grammar that sits above
   EVERY listing on the site, so the country directory, a factor leaderboard,
   the Factor Index and search results all behave the same way. It reads as the
   running-head + figure-key furniture of a reference work, NOT a faceted
   e-commerce sidebar: a hairline-ruled strip, named filter chips over a CLOSED
   vocabulary, and a SINGLE sort control. Composes op-chip, op-kicker, op-btn.
   New component (clean-room s3); merge candidate. ITCSS: 06-components.
   ========================================================================== */

.op-apparatus-bar {
  display: grid;
  gap: var(--space-xs);
  /* ruled top & bottom like a printed figure key / running head */
  border-block: 1px solid var(--rule-strong);
  padding-block: var(--space-xs);
}

/* — The running head: what this index is, and its honest tally — */
.op-apparatus-bar__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-md);
}
/* the lens the listing is coloured by (carried in from the selector, s1) */
.op-apparatus-bar__lens {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
}
.op-apparatus-bar__lens b {
  color: var(--text);
  font-weight: var(--weight-semibold);
}
/* the result tally: a mono figure over its honest denominator */
.op-apparatus-bar__tally {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-secondary);
}
.op-apparatus-bar__tally b { color: var(--text); font-weight: var(--weight-semibold); }

/* — The control row: facet chips left, the single sort control right — */
.op-apparatus-bar__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
}
.op-apparatus-bar__facets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
}
.op-apparatus-bar__sort { flex: none; }

/* The faint vertical register tick that separates applied filters from the
   "add a filter" facet openers, so the cut reads as a stated selection. */
.op-apparatus-bar__sep {
  align-self: stretch;
  inline-size: 1px;
  background: var(--rule);
  margin-inline: var(--space-3xs);
}

/* ==========================================================================
   FILTER / SORT MENU — a chip (or the sort control) opens a small hairline
   popover of the CLOSED vocabulary. A popover, never a persistent sidebar; it
   dismisses on outside-click / Esc. role=menu of radio-like options.
   ========================================================================== */

.op-disclosure { position: relative; display: inline-flex; }

/* The opener, when it is the sort control, reads as one labelled control. */
.op-sort-toggle {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.3em 0.7em;
  background: var(--surface-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-emboss);
  cursor: pointer;
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: var(--transition-ink);
}
.op-sort-toggle:hover { border-color: var(--text); }
.op-sort-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.op-sort-toggle__value {
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  color: var(--text);
}
/* a caret that flips when the menu is open */
.op-disclosure__caret { font-family: var(--font-data); font-size: 0.85em; color: var(--text-muted); }
[aria-expanded="true"] .op-disclosure__caret { color: var(--text); }

/* The popover sheet itself */
.op-menu {
  position: absolute;
  z-index: var(--z-popover);
  top: calc(100% + var(--space-3xs));
  min-inline-size: 13rem;
  margin: 0;
  padding: var(--space-3xs);
  list-style: none;
  background: var(--surface-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
}
.op-menu--right { right: 0; }
.op-menu[hidden] { display: none; }

.op-menu__group {
  padding: var(--space-3xs) var(--space-2xs) var(--space-2xs);
  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-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  inline-size: 100%;
  margin: 0;
  padding: 0.42em 0.6em;
  background: none;
  border: 0;
  border-radius: var(--radius-xs);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-furniture);
  font-size: var(--text-xs);
  color: var(--text);
  transition: var(--transition-ink);
}
.op-menu__item:hover { background: var(--accent-wash); }
.op-menu__item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* the leading register tick: empty when unset, an ink mark when chosen */
.op-menu__item::before {
  content: "";
  inline-size: 0.7em;
  block-size: 0.7em;
  flex: none;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-xs);
}
.op-menu__item[aria-checked="true"] { font-weight: var(--weight-semibold); }
.op-menu__item[aria-checked="true"]::before {
  background: var(--surface-inverse);
  border-color: var(--surface-inverse);
}
/* a trailing mono count of how many rows the option would show */
.op-menu__count {
  margin-left: auto;
  font-family: var(--font-data);
  font-size: var(--text-3xs);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-muted);
}
/* the direction note on a sort option (high→low, A→Z) */
.op-menu__dir {
  margin-left: auto;
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ==========================================================================
   APPLIED-FILTER CHIPS + CLEAR — the current cut, stated. An applied facet is
   an op-chip in its active (pressed) treatment carrying a dismiss ×; "Clear"
   is a quiet ghost button that only appears when the cut differs from default.
   ========================================================================== */

/* the standing honest-coverage toggle: SCORED ONLY, on by default, always
   printing the count it hides. It is a normal selectable chip. */
.op-chip__hidden {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  color: inherit;
  opacity: 0.8;
}

/* ==========================================================================
   LISTING SEGREGATION — when "Scored only" is OFF, the unassessed are not
   mingled and never truncated: they sit below a ruled subhead carrying the
   no-data hatch register, so candor reads as a considered state of the record.
   ========================================================================== */

.op-listing-divider {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--space-xs);
  margin-top: var(--space-2xs);
  border-top: 1px solid var(--rule-strong);
}
.op-listing-divider__mark {
  inline-size: 1.4rem;
  block-size: 1.4rem;
  flex: none;
  border: 1px solid var(--band-none-line);
  border-radius: var(--radius-xs);
  background-color: var(--surface);
  background-image: var(--hatch-image);
}
.op-listing-divider__label {
  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-secondary);
}
.op-listing-divider__note {
  margin-left: auto;
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

/* ==========================================================================
   MOBILE COLLAPSE — below md, the whole apparatus folds behind one REFINE
   disclosure so a phone shows the tally + the honest hidden-count first, and
   the chip wall + sort open on demand. Source of truth: --bp-md (900px).
   ========================================================================== */

.op-apparatus-bar__refine { display: none; }

@media (max-width: 56.24rem) {
  .op-apparatus-bar__refine {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.4em 0.8em;
    background: var(--surface-raised);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-emboss);
    font-family: var(--font-furniture);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text);
    cursor: pointer;
  }
  .op-apparatus-bar__refine:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  /* the collapsed controls hide until Refine is pressed */
  .op-apparatus-bar__controls[data-collapsed="true"] { display: none; }
  .op-apparatus-bar__controls {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    padding-top: var(--space-2xs);
  }
  .op-apparatus-bar__sort,
  .op-sort-toggle,
  .op-disclosure { inline-size: 100%; }
  .op-sort-toggle { justify-content: space-between; }
  .op-menu { inline-size: 100%; }
}