/* contribute-picker-v1 — W-69-1 — Saadjie amount-picker component layer. */
/*
 * Planning: .archon/queued-builds/WAVE-69-contribute-page-redesign.md
 *
 * Targets the markup rendered by src/views/components/amount-picker.ejs.
 * The picker is the headline action of the contribute screen: a row of
 * preset Rand chips sized for a thumb tap on a 320px viewport, with a
 * clearly-pressed active state so the visitor never doubts which amount
 * is selected.
 *
 * Class taxonomy (BEM-ish):
 *   .amount-picker                   — outer <fieldset>
 *   .amount-picker__legend           — visible group heading
 *   .amount-picker__legend--sr-only  — visually-hidden legend variant
 *   .amount-picker__chips            — chip grid container
 *   .amount-picker__chip             — single preset button
 *   .amount-picker__chip--active     — selected modifier
 *
 * WHY a token-only palette (no raw hex / rgba): ANTI-RAW-VALUE proof-gate
 * (W56) rejects raw colour values in any non-token file. Every colour
 * reads through var(--color-*); every spacing through var(--space-*);
 * every shape through var(--radius-*); every motion through var(--transition-*).
 *
 * WHY mobile-first (no @media default, overrides bump up at 480/640):
 * the load-bearing audience is on a 320–414px Android phone. Two
 * columns × N rows is the smallest layout that keeps each chip wider
 * than the 44px touch-target floor without truncating the label.
 *
 * WHY chips are 56px min-height (above the 44px floor): the W69 spec
 * asks for "big tap targets" — comfortable, not just compliant. 56px
 * is the Material "extended FAB" minimum, comfortable for a one-handed
 * grip on a 6" phone. The token --touch-target-comfortable is 48px;
 * we add a touch more vertical breathing room here because the chip
 * also has to read as a primary action, not a secondary control.
 *
 * WHY a brand-coloured active state (vs. an outline-only "selected"
 * ring): a filled chip is unmistakable at a glance and survives the
 * busy backgrounds of a future themed page. The pressed colour pair
 * (brand-dark on inverse text) is the WCAG-AA-safe combination from
 * the W58 contrast audit — do NOT swap either side without re-running
 * scripts/contrast-audit.js.
 *
 * FLOW: tokens/* → cards.css → amount-picker.css (this file) →
 *       contribute.css (host form). The picker stays self-contained
 *       so a future caller (gifting flow, recurring-step picker) can
 *       drop it in without bringing contribute-specific overrides.
 *
 * CONSTRAINT: focus-visible state MUST use --color-focus-ring with the
 * standard ring width + offset; this is the only mechanism that
 * survives forced-colors: active on Windows High-Contrast.
 */

/* ---------- Picker root ----------
   WHY zero border / padding / margin on the <fieldset>: the host card
   already paints a surface; the default UA fieldset border would draw
   a competing line. Resetting here means callers do not have to fight
   the user-agent stylesheet. */
.amount-picker {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ---------- Legend ----------
   WHY the legend is a real <legend> (not a <p> with role=heading): the
   <fieldset> + <legend> pair is the only HTML construct that survives
   every screen-reader without ARIA papering-over. We size it like a
   sub-heading so it reads as a clear section title on the page. */
.amount-picker__legend {
  padding: 0;
  margin: 0 0 var(--space-1);
  font-family: var(--font-family-base);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-text);
}

/* WHY a screen-reader-only variant (not display:none): hiding via
   display:none removes the element from the AT tree entirely. The
   sr-only clip pattern keeps the legend announced while removing it
   from the visual flow — used when the host card already carries a
   visible heading and a second one would feel repetitive. */
.amount-picker__legend--sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Chip grid ----------
   WHY display:grid (not flex-wrap): grid lays out chips on a strict
   column count so every row stays aligned regardless of label length.
   A flex-wrap with mixed-width chips leaves uneven trailing space and
   shifts the grid as the active state toggles font-weight. */
.amount-picker__chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

/* ---------- Chip ----------
   WHY min-height: var(--touch-target-comfortable) plus extra padding:
   the spec wants chips that feel like a primary action. The base
   touch-target token is 44px (Apple HIG floor); --touch-target-comfortable
   is 48px (Material). We use the comfortable rung and add
   block padding so the resulting button is ~56px tall — the W69
   "big tap target" intent without a magic number. */
.amount-picker__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-comfortable);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-brand);
  background-color: var(--color-bg);
  border: 2px solid var(--color-brand);
  border-radius: var(--radius-md);
  cursor: pointer;
  /* WHY appearance: none: Safari paints a default chrome on
     <button> that overrides the background-color on iOS. Stripping
     the UA appearance lets our tokens drive the visual. */
  appearance: none;
  -webkit-appearance: none;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.amount-picker__chip:hover {
  background-color: var(--color-brand-light);
}

/* WHY :active scale (not just :hover background): the visual "press"
   confirms the tap finger-side on a phone where there is no hover.
   The transform is tiny (0.98) so it reads as feedback, not bounce. */
.amount-picker__chip:active {
  transform: scale(0.98);
}

.amount-picker__chip:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* WHY both [aria-pressed="true"] AND .amount-picker__chip--active:
   aria-pressed is the AT contract; the modifier class is the JS hook
   for surfaces that drive the picker without re-rendering the partial.
   Styling both means either path lights the chip identically. */
.amount-picker__chip[aria-pressed="true"],
.amount-picker__chip--active {
  background-color: var(--color-brand);
  color: var(--color-text-inverse);
  border-color: var(--color-brand-dark);
  box-shadow: var(--shadow-sm);
}

/* WHY hover on the active chip is the brand-dark tone: keeps the
   contrast pair valid (brand-dark vs. inverse text passes AA) so
   hovering doesn't drop the chip below the contrast budget. */
.amount-picker__chip[aria-pressed="true"]:hover,
.amount-picker__chip--active:hover {
  background-color: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
}

.amount-picker__chip:disabled,
.amount-picker__chip[aria-disabled="true"] {
  /* WHY opacity (not a separate "disabled" palette): a single rule
     covers every chip state — primary, active, danger — without
     authoring three disabled variants. The pointer-events:none stops
     the cursor change on a non-interactive control. */
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- Tablet pivot ---------- */
@media (min-width: 480px) {
  /* WHY 3 columns at 480px+: most phones held in landscape clear
     this width. A 3-column grid avoids the "one chip orphaned on
     its own row" awkwardness common with 4 presets. */
  .amount-picker__chips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 640px) {
  /* WHY 4 columns at 640px+: a comfortable tablet portrait width
     fits 4 chips on one row. Beyond this width the chip itself
     should not grow indefinitely — capped by minmax(0, 1fr) within
     the container max-width on the host page. */
  .amount-picker__chips {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .amount-picker__chip {
    /* WHY a slightly smaller min-height on tablet+: a 56px chip on
       a 1024px screen reads as oversized. Dropping to the 48px
       comfortable target keeps the rhythm right at the larger
       viewport while staying above the WCAG floor. */
    min-height: var(--touch-target-comfortable);
    padding: var(--space-2) var(--space-4);
  }
}

/* ---------- Reduced-motion override ---------- */
@media (prefers-reduced-motion: reduce) {
  /* WHY suppress the press-scale under reduced-motion: the spec
     (W61) treats every non-essential transform as motion the user
     opted out of. Colour transitions stay because they convey
     state, not movement. */
  .amount-picker__chip {
    transition: background-color var(--transition-fast),
                color var(--transition-fast);
  }
  .amount-picker__chip:active {
    transform: none;
  }
}