/* ==========================================================================
   COMPONENTS · COMPARISON TRAY — the transient "pick 2–4 as you browse" loop.
   It fills from any listing (via the collect slot), shows what is collected,
   carries the active lens, and launches /compare. A calm editorial galley that
   docks at the foot of the page — NOT a cart, no urgency, no popup; always
   dismissible. Distinct from the persisted Dossier. Composes op-btn, op-chip.
   New component (clean-room s3); merge candidate. ITCSS: 06-components.
   ========================================================================== */

.op-tray {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised);
}

/* The component's display:grid would otherwise beat the UA [hidden] rule, so the
   tray could never collapse. It stays folded away until it holds a pick (the
   controller toggles [hidden] from the first collect — see tray_controller.js). */
.op-tray[hidden] {
  display: none;
}

/* — Docked: the live instance rests at the foot of the viewport. A printed
     galley laid on the desk — a top hairline + an upward letterpress lift. — */
.op-tray--docked {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  border-radius: 0;
  border-inline: 0;
  border-bottom: 0;
  border-top: 2px solid var(--rule-strong);
  box-shadow: var(--shadow-pop);
}

/* — Header line: label + honest count + the lens it will carry — */
.op-tray__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
}
.op-tray__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-tray__count {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}
.op-tray__lens {
  margin-left: auto;
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
}
.op-tray__lens b { color: var(--text); font-weight: var(--weight-semibold); }

/* — The body: collected items left, the launch cluster right — */
.op-tray__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.op-tray__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  min-block-size: 2.2rem;
}

/* A collected item: a small filed slip — identity + mono score + dismiss. The
   band tint comes from data-band, so each slip whispers its finding. */
.op-tray__item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.3em 0.5em 0.3em 0.6em;
  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-xs);
  color: var(--text);
}
.op-tray__item-iso {
  font-family: var(--font-data);
  font-size: var(--text-3xs);
  text-transform: uppercase;
  color: var(--text-muted);
}
.op-tray__item-name { font-weight: var(--weight-medium); }
.op-tray__item-score {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: var(--weight-semibold);
  color: var(--bk-ink, var(--text));
}
.op-tray__item-dismiss {
  margin-left: 0.15em;
  padding: 0 0.15em;
  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);
}
.op-tray__item-dismiss:hover { color: var(--accent); }
.op-tray__item-dismiss:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* The empty / hint line, shown in the items row when nothing is collected. */
.op-tray__hint {
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* The honest ceiling note, shown only at 4 — a quiet limit, never a warning. */
.op-tray__full-note {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  color: var(--text-secondary);
}

/* — The launch cluster — */
.op-tray__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: none;
}

/* The tray can be put away entirely (dismissible) */
.op-tray[hidden] { display: none; }

@media (max-width: 56.24rem) {
  .op-tray__body { flex-direction: column; align-items: stretch; }
  .op-tray__actions { justify-content: space-between; }
  .op-tray__lens { margin-left: 0; flex-basis: 100%; }
}