/* ==========================================================================
   PAGE · COMPARE — THE PICKER STATE. The calm assembly surface a reader meets
   when they arrive with 0–1 countries chosen. It COMPOSES s3's grammar — the
   .op-collect selection slot, the s2 .op-badge escorted score, the docked
   .op-tray that carries the lens — and adds only the "Your comparison" set
   strip and the honest under-2 prompt. The 2-to-4 ceiling is felt as a natural
   limit (unselected slots disable at 4), never announced as urgency.
   Tokens only. Link AFTER offprint.css and the system files.
   ========================================================================== */

/* — "Your comparison" — the chosen set, seeded from the tray you filled while
   browsing. Reads as a filed slip strip, not a cart. — */
.cmp-set {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  padding: var(--space-md);
  margin-block: var(--space-md);
}
.cmp-set__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
  margin-bottom: var(--space-sm);
}
.cmp-set__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);
}
.cmp-set__count { font-family: var(--font-data); font-size: var(--text-xs); color: var(--text); }
.cmp-set__seed {
  margin-inline-start: auto;
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.cmp-set__seed b { color: var(--text-secondary); font-weight: var(--weight-semibold); }

/* the slots: up to 4 filled chips + faint empty placeholders, so the ceiling is
   visible as the shape of the work, not a warning. */
.cmp-set__slots { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: stretch; }
.cmp-set__pick {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.45em 0.55em 0.45em 0.7em;
  background: var(--bk-fill, var(--surface-sunken));
  border: 1px solid var(--bk-line, var(--rule-strong));
  border-radius: var(--radius-xs);
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  color: var(--text);
}
.cmp-set__pick-iso { font-family: var(--font-data); font-size: var(--text-3xs); text-transform: uppercase; color: var(--text-muted); }
.cmp-set__pick-name { font-weight: var(--weight-medium); }
.cmp-set__pick-score { font-family: var(--font-data); font-weight: var(--weight-semibold); color: var(--bk-ink, var(--text)); }
.cmp-set__pick-x {
  margin-inline-start: 0.15em;
  padding: 0 0.2em;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-data); font-size: 1.05em; line-height: 1;
  color: var(--text-muted); transition: var(--transition-ink);
}
.cmp-set__pick-x:hover { color: var(--accent); }
.cmp-set__pick-x:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.cmp-set__empty {
  display: inline-flex;
  align-items: center;
  min-inline-size: 8.5rem;
  padding: 0.45em 0.7em;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-xs);
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The launch line under the set — the honest under-2 prompt lives here. */
.cmp-set__launch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--rule);
}
.cmp-set__prompt { font-family: var(--font-reading); font-size: var(--text-sm); color: var(--text-secondary); }
.cmp-set__prompt b { color: var(--text); font-weight: var(--weight-semibold); }
.cmp-set__launch-actions { margin-inline-start: auto; display: flex; gap: var(--space-2xs); }

/* — The published-set board the reader picks from. Composes the listing table
   grammar (op-table + op-collect-cell + op-badge). The tier kickers section it
   so the calm directory reads as an index, not a store shelf. — */
.cmp-pick-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
  margin-block: var(--space-lg) var(--space-2xs);
}
.cmp-pick-head h2 {
  font-family: var(--font-reading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.cmp-pick-head__tally { font-family: var(--font-furniture); font-size: var(--text-2xs); color: var(--text-muted); }
.cmp-pick-head__tally [data-numeric] { font-family: var(--font-data); color: var(--text-secondary); }

.cmp-tier {
  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-pick-name { font-family: var(--font-reading); font-weight: var(--weight-medium); color: var(--text); }
.cmp-pick-iso { font-family: var(--font-data); font-size: var(--text-2xs); text-transform: uppercase; color: var(--text-muted); margin-inline-start: 0.5em; }

/* a faint disabled cast on a whole row when the ceiling is reached and that row
   is not already in the set — the limit, felt quietly. */
.cmp-pick-row.is-capped td:not(.op-collect-cell) { opacity: 0.55; }