/* ==========================================================================
   COMPONENTS · CHOICE — the fair purchase-choice list at checkout (the D4
   trade-up, where intent peaks). A ruled register of selectable options: the
   single offprint the reader came for, the category specialty, the full record.
   Restraint at the point of sale is law — NO pre-checked add-on, NO scarcity,
   NO glow. The thing they came for is the default selection; the trade-ups are
   honest, legible alternatives, each with its real price (mono) and what it is.
   A selected row carries an INK keyline (never the rubric, never a band) and a
   pressed register mark — premium by restraint. Composes .op-kicker.
   ========================================================================== */

.op-choice {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: var(--space-xs);
}
.op-choice__legend {
  padding: 0;
  margin-bottom: var(--space-2xs);
}

/* — One option: a ruled row, the whole row is the label/target — */
.op-choice__option {
  display: grid;
  grid-template-columns: 1.4em minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-xs) var(--space-md);
  padding: var(--space-md);
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-ink);
}
.op-choice__option:hover { border-color: var(--rule-strong); }

/* The selected option: an ink crown keyline + a faint deboss, never the spot */
.op-choice__option.is-selected {
  border-color: var(--surface-inverse);
  box-shadow: inset 0 2px 0 0 var(--surface-inverse);
}

/* — The real radio is visually hidden; .op-choice__mark is the printed dot — */
.op-choice__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.op-choice__mark {
  margin-top: 0.15em;
  inline-size: 1.1em;
  block-size: 1.1em;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-seal);
  background: var(--surface);
  display: grid;
  place-content: center;
  flex: none;
}
.op-choice__mark::after {
  content: "";
  inline-size: 0.55em;
  block-size: 0.55em;
  border-radius: var(--radius-seal);
  background: var(--surface-inverse);
  transform: scale(0);
  transition: transform var(--duration-instant, 90ms) var(--ease-standard, ease);
}
.op-choice__option.is-selected .op-choice__mark { border-color: var(--surface-inverse); }
.op-choice__option.is-selected .op-choice__mark::after { transform: scale(1); }
.op-choice__radio:focus-visible + .op-choice__mark {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* — The body: serif name, an honest descriptor, a quiet per-unit truth — */
.op-choice__body { display: grid; gap: var(--space-3xs); min-width: 0; }
.op-choice__name {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--text);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5em;
}
/* A quiet factual tag (e.g. "The finding you came for", "Best value per finding")
   — small-caps furniture, NEVER an urgency badge. */
.op-choice__tag {
  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-secondary);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xs);
  padding: 0.15em 0.55em;
}
.op-choice__desc {
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}
/* the per-finding / coverage truth, set as data */
.op-choice__unit {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.op-choice__unit [data-numeric],
.op-choice__unit b {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

/* — The price: mono amount over a furniture period — */
.op-choice__price {
  text-align: end;
  display: grid;
  gap: 0.1em;
  justify-items: end;
  white-space: nowrap;
}
.op-choice__amount {
  font-family: var(--font-data);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}
.op-choice__period {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* — Narrow: the price drops under the body so nothing is cramped on a phone — */
@media (max-width: 30rem) {
  .op-choice__option { grid-template-columns: 1.4em minmax(0, 1fr); }
  .op-choice__price {
    grid-column: 2;
    justify-items: start;
    text-align: start;
  }
}