/* ==========================================================================
   COMPONENTS · RACK — the always-open companion to the Factor Index selector.
   Every specialty (category) is laid out as a button the instant the page loads,
   so the top-level choices need no interaction to be seen. Picking a specialty
   colours the surface by it and unfolds a drawer of its factor buttons below;
   picking a factor colours by that factor. It shares ONE lens with the dropdown
   (the selector controller owns the state), so the two views never disagree.

   Selected look mirrors the selectable-chip block: solid ink ground, never the
   rubric. Token-only below 01-settings.
   ========================================================================== */

.op-rack { display: flex; flex-direction: column; gap: 0; }

/* — The row of specialty buttons — */
.op-rack__groups {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.op-rack__group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.55em 0.95em;
  background: var(--surface-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-emboss);
  color: var(--text);
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  cursor: pointer;
  transition: var(--transition-ink);
}
.op-rack__group:hover { border-color: var(--text); }
.op-rack__group:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* the open specialty (its drawer is showing) — a firm keyline */
.op-rack__group.is-open { border-color: var(--text); }
/* the specialty IS the lens — solid ink */
.op-rack__group.is-active {
  background: var(--surface-inverse);
  border-color: var(--surface-inverse);
  color: var(--text-inverse);
  box-shadow: var(--shadow-deboss);
}
.op-rack__group-count {
  font-family: var(--font-data);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-muted);
}
.op-rack__group.is-active .op-rack__group-count { color: var(--text-inverse); opacity: 0.65; }

/* — The factor drawer — opens under the row when a specialty is chosen. Every
     factor is a button in one wrapping run. — */
.op-rack__factors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.op-rack__factors[hidden] { display: none; }

.op-rack__factor {
  padding: 0.32em 0.72em;
  background: var(--surface-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-xs);
  color: var(--text);
  font-family: var(--font-furniture);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: var(--transition-ink);
}
.op-rack__factor:hover { border-color: var(--text); }
.op-rack__factor:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.op-rack__factor.is-active {
  background: var(--surface-inverse);
  border-color: var(--surface-inverse);
  color: var(--text-inverse);
}