/* Claim-led picker surface — see docs/UX.md page 2,
 * docs/STYLE-GUIDE.md §10 (component contracts), §16 (voice).
 *
 * Mirrors the welcome / capture hero-shell shape (full-viewport vellum-
 * grain surface, ~56ch reading column). Every value below references a
 * token from tokens.css — no raw hex, no raw px, no bespoke timings.
 *
 * v1 ships one interactive card (the presence claim). The remaining
 * UX.md page-2 claims are witness-strengthened and live in the
 * "Coming with peer witnessing" aside as honest acknowledgement —
 * no dead-end CTAs, no copy that says "ask a trusted person to attest"
 * per ADR-0003. */

.choose-hero {
  min-height: 100dvh;
  padding: var(--space-12) var(--space-6);
  color: var(--color-text-body);
  display: grid;
  place-content: center;
}

.choose-column {
  display: grid;
  grid-template-columns: minmax(0, 56ch);
  gap: var(--space-5);
  text-align: left;
}

.choose-back-link {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-primary-text);
  text-decoration: none;
  display: inline-block;
  justify-self: start;
  margin-block-end: var(--space-2);
}

.choose-back-link:hover {
  text-decoration: underline;
}

/* Eyebrow row above the active card (and the coming-next aside) — small
 * uppercase label that anchors the section without competing with the
 * card title. */
.choose-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}

/* The active picker card — the interactive surface that leads through
 * to the bargain page. Elevated background + soft border so it reads
 * as a primary affordance against the surrounding aside. */
.choose-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  display: grid;
  gap: var(--space-3);
}

.choose-card-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text-heading);
  margin: 0;
}

.choose-card-body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-text-body);
  margin: 0;
}

.choose-card-action {
  display: flex;
  justify-content: flex-start;
  margin-block-start: var(--space-2);
}

/* "Coming with peer witnessing (v1.1+)" aside — dashed border so it
 * reads as honest acknowledgement rather than a teaser; muted text
 * colour because nothing here is interactive. */
.choose-coming {
  border: 1px dashed var(--color-border-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  background: transparent;
  display: grid;
  gap: var(--space-2);
}

.choose-coming p {
  margin: 0;
}

@media (max-width: 480px) {
  .choose-hero {
    padding: var(--space-8) var(--space-4);
  }
  .choose-card {
    padding: var(--space-4) var(--space-5);
  }
}