@theme {
  /* Core colors - global defaults; ThemeProvider only emits inline overrides.
   * Color semantics (aligned with messaging templates):
   * - surface: Outer/surrounding area (transparent by default)
   * - background: Main content area (white by default)
   */
  --color-primary: #1d1f27;
  --color-primary-foreground: #ffffff;
  --color-secondary: #f4f4f5;
  --color-background: #ffffff;
  --color-surface: transparent;
  --color-surface-foreground: #1d1f27;
  --color-foreground: #1d1f27;
  --color-muted: #4b4e56cc;
  --color-muted-foreground: #4b4e5699;
  --color-border: #4b4e5666;

  /* Status colors */
  --color-success: oklch(0.77 0.18 130);
  --color-success-foreground: #111111;
  --color-warning: oklch(0.72 0.18 65);
  --color-warning-foreground: #111111;
  --color-danger: oklch(0.63 0.24 25);
  --color-danger-foreground: #ffffff;

  /* Typography */
  --font-sans: "Inter", system-ui, sans-serif;
  --font-heading: "Inter", system-ui, sans-serif;
  /*
   * --font-mono is intentionally not declared globally. The clean and retro
   * variant blocks below set `--ff-font-mono` to the Inconsolata stack so the
   * variant-scoped `font-mono` utility resolves correctly. The `default`
   * variant has no mono-aesthetic surface today, so we let Tailwind's
   * built-in default mono stack apply for compact component surfaces (access-code
   * input, draw-module entry numbers, debug stories).
   */

  /* Extension below Tailwind's default `text-xs` (12px) for badge / pill / micro-label copy. */
  --text-xxs: 0.625rem;
  --text-xxs--line-height: 0.875rem;
}

/**
 * Per-variant default tokens. Higher specificity than :root @theme defaults,
 * lower than ThemeProvider inline overrides — so a customer overriding only
 * `primary` does not reset the variant's other token defaults.
 *
 * Each block declares `--ff-variant: "<name>"` so the rule survives Tailwind
 * v4 / Lightning CSS compilation (empty rules are stripped). ENG-464 will
 * populate variant-specific design tokens here.
 */
[data-fanfare-variant="default"] {
  --ff-variant: "default";
}

[data-fanfare-variant="retro"] {
  --ff-variant: "retro";
  /* Inconsolata's advance is 0.5; 0.58 also covers the fallback monospace stack a host that
   * does not load the face renders with. */
  --ff-numeral-advance: 0.58;
  --ff-countdown-cell-padding: 0.5rem 0.75rem;
  --ff-countdown-cell-border-width: 2px;
  --ff-countdown-reserve-cell: 1.75rem;
  --ff-countdown-reserve-gap: 1rem;
  --ff-countdown-cell-bg: var(--ff-color-background);
  --ff-countdown-cell-shadow: 3px 3px 0 var(--ff-color-foreground);
  --ff-progress-bar-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2);
  --ff-card-shadow: 6px 6px 0 var(--ff-color-foreground);
  --ff-card-shadow-elevated: var(--ff-card-shadow);
  --ff-countdown-separator-display: none;
  --ff-countdown-inline-weight: 800;
  --ff-countdown-tone-critical-bg: #ff3a00;
  --ff-countdown-tone-critical-fg: #ffffff;
  --ff-countdown-numeral-font: var(--ff-font-mono);
  --ff-color-background: #f4f1ea;
  --ff-color-foreground: #000000;
  --ff-color-muted: #444444;
  --ff-color-muted-foreground: #444444;
  --ff-color-border: #000000;
  /*
   * Note: retro intentionally does NOT override --ff-color-danger. The
   * brutalist `#ff3a00` orange is a Countdown-critical-urgency accent only
   * (scoped to the countdown unit rule below), not a global semantic
   * destructive color. Destructive buttons / error views keep the customer's
   * (or @theme default) danger token under retro.
   */
  --ff-font-sans: "Inconsolata", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ff-font-heading: "Inconsolata", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ff-font-mono: "Inconsolata", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

[data-fanfare-variant="rounded"] {
  --ff-variant: "rounded";
  --ff-countdown-cell-radius: 14px;
  --ff-countdown-cell-padding: 0.75rem 1rem;
  --ff-countdown-cell-border-width: 1px;
  --ff-countdown-cell-bg: var(--ff-color-background);
  --ff-countdown-cell-shadow: 0 2px 12px -3px rgba(0, 0, 0, 0.08);
  --ff-countdown-cell-shadow-hover: 0 4px 16px -4px rgba(0, 0, 0, 0.12);
  --ff-countdown-separator-display: none;
  --ff-countdown-inline-weight: 600;
  --ff-countdown-reserve-cell: 2.125rem;
  --ff-countdown-reserve-gap: 1rem;
  --ff-card-shadow: 0 2px 12px -3px rgba(0, 0, 0, 0.08);
  --ff-card-shadow-hover: 0 4px 16px -4px rgba(0, 0, 0, 0.12);
  --ff-card-shadow-elevated: var(--ff-card-shadow);
  --ff-card-shadow-elevated-hover: var(--ff-card-shadow-hover);
  --ff-progress-shadow: inset 0 1px 4px -1px rgba(0, 0, 0, 0.06);
  --ff-progress-bar-shadow: 0 0 10px -2px var(--ff-color-primary);
  --ff-loading-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
  --ff-button-shadow: 0 2px 12px -3px rgba(0, 0, 0, 0.08);
  --ff-button-shadow-hover: 0 4px 16px -4px rgba(0, 0, 0, 0.12);
  --ff-button-shadow-active: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  --ff-button-shadow-primary: 0 2px 12px -3px rgba(0, 0, 0, 0.08), 0 0 12px -6px var(--ff-color-primary);
  --ff-input-shadow: inset 0 1px 4px -1px rgba(0, 0, 0, 0.06);
  --ff-input-shadow-focus: inset 0 1px 4px -1px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(var(--ff-color-primary-rgb), 0.12);
  --ff-otp-shadow: inset 0 1px 4px -1px rgba(0, 0, 0, 0.06);
  --ff-otp-shadow-focus: inset 0 1px 4px -1px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(var(--ff-color-primary-rgb), 0.12);
  --ff-otp-shadow-focus-error:
    inset 0 1px 4px -1px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(var(--ff-color-danger-rgb), 0.12);
}

[data-fanfare-variant="clean"] {
  --ff-variant: "clean";
  --ff-numeral-advance: 0.58;
  --ff-countdown-cell-gap: 0.125rem;
  --ff-countdown-inline-weight: 500;
  --ff-countdown-inline-tracking: 0.02em;
  --ff-countdown-reserve-gap: 2rem;
  --ff-countdown-numeral-font: var(--ff-font-mono);
  --ff-color-background: #ffffff;
  --ff-color-foreground: #0a0a0a;
  --ff-color-muted: #737373;
  --ff-color-muted-foreground: #737373;
  --ff-color-border: #e8e8e8;
  --ff-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --ff-card-shadow-elevated: var(--ff-card-shadow);
  --ff-progress-bar-shadow: 0 0 #0000;
  --ff-font-sans: "Figtree", system-ui, sans-serif;
  --ff-font-heading: "Figtree", system-ui, sans-serif;
  --ff-font-mono: "Inconsolata", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@layer base {
  /**
   * Default theme values for .fanfare-themed elements.
   * ThemeProvider overrides these via inline styles.
   * Uses surface (outer area) as the root background color.
   */
  .fanfare-themed {
    font-family: var(--ff-font-sans);
    color: var(--ff-color-foreground);
    background-color: var(--ff-color-surface);
    --ff-widget-max-width: 24rem;

    /* The advance width of one digit as a fraction of the font size, for the
     * variant's numeral typeface. Fitting a fixed-width glyph run to a
     * container needs it; over-stating it only shrinks the numerals. */
    --ff-numeral-advance: 0.65;

    /* Display text that fits its container: a `cqi`-driven scale between a
     * legible floor and a ceiling the design allows. */
    --ff-stat-min: 1.5rem;
    --ff-stat-scale: 9cqi;
    --ff-stat-max: 2.25rem;
    --ff-stat-weight: 700;
    --ff-title-min: 1rem;
    --ff-title-scale: 6cqi;
    --ff-title-max: 1.25rem;
    --ff-title-weight: 600;

    /* Countdown: geometry, colour, label placement, separator and inline type,
     * overridden per variant in the blocks above. */
    --ff-countdown-cell-gap: 0.75rem;
    --ff-countdown-cell-padding: 0;
    --ff-countdown-cell-radius: 0;
    --ff-countdown-cell-border-width: 0px;
    --ff-countdown-cell-bg: transparent;
    --ff-countdown-cell-shadow: none;
    --ff-countdown-cell-shadow-hover: var(--ff-countdown-cell-shadow);
    --ff-countdown-numeral-color: var(--ff-color-foreground);
    --ff-countdown-numeral-font: var(--ff-font-heading);
    --ff-countdown-label-color: var(--ff-color-muted-foreground);
    --ff-countdown-label-size: 0.625rem;
    --ff-countdown-label-order: 1;
    --ff-countdown-separator-glyph: "/";
    --ff-countdown-separator-display: inline;
    --ff-countdown-separator-color: var(--ff-color-muted-foreground);
    --ff-countdown-inline-size: inherit;
    --ff-countdown-inline-weight: 600;
    --ff-countdown-inline-tracking: 0;

    /* Numeral fitting: the bounds the fitted numeral size is clamped to, and
     * the horizontal space the numerals cannot have — the panel's own padding
     * plus, per variant, each cell's padding and border and each gap's width
     * and separator glyph. Rounded up: over-reserving shrinks the numerals,
     * under-reserving overflows the widget. */
    --ff-countdown-numeral-min: 1.25rem;
    --ff-countdown-numeral-max: 2.5rem;
    --ff-countdown-reserve-outer: 2.5rem;
    --ff-countdown-reserve-cell: 0rem;
    --ff-countdown-reserve-gap: 3rem;

    /* Countdown urgency: the colours a warning or critical cell takes. */
    --ff-countdown-tone-warning-color: var(--ff-color-warning);
    --ff-countdown-tone-critical-color: var(--ff-color-danger);
    --ff-countdown-tone-critical-bg: transparent;
    --ff-countdown-tone-critical-fg: inherit;

    /* Panel geometry: the padding around a panel's stack and the gap between
     * the rows of that stack and of a panel body. */
    --ff-panel-gap: 1.25rem;
    --ff-panel-padding: 1.25rem;

    /* Surface elevation, one token per surface and per interactive state it
     * distinguishes. A variant that raises a surface overrides these. */
    --ff-card-shadow: none;
    --ff-card-shadow-hover: var(--ff-card-shadow);

    /* The `elevated` card is raised above its aesthetic's resting surface, so it
     * carries its own pair rather than reading the resting one. The default is
     * the elevation the variant-less card has always drawn. */
    --ff-card-shadow-elevated: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --ff-card-shadow-elevated-hover: var(--ff-card-shadow-elevated);
    --ff-progress-shadow: none;
    --ff-progress-bar-shadow: none;
    --ff-loading-shadow: none;

    /* Surfaces that also carry a focus ring compose their shadow with it
     * through Tailwind's own shadow utility, so the empty value here is the
     * transparent shadow that composes rather than the `none` that would
     * invalidate the whole list — and the ring with it. */
    --ff-button-shadow: 0 0 #0000;
    --ff-button-shadow-hover: var(--ff-button-shadow);
    --ff-button-shadow-active: var(--ff-button-shadow);
    --ff-button-shadow-primary: var(--ff-button-shadow);
    --ff-input-shadow: 0 0 #0000;
    --ff-input-shadow-focus: var(--ff-input-shadow);
    --ff-otp-shadow: 0 0 #0000;
    --ff-otp-shadow-focus: var(--ff-otp-shadow);
    --ff-otp-shadow-focus-error: var(--ff-otp-shadow-focus);

    /* Selector rows (a product, a payment method): the box a row draws and the
     * square a product thumbnail occupies inside it. */
    --ff-row-gap: 0.75rem;
    --ff-row-padding: 0.75rem;
    --ff-row-radius: 0.375rem;
    --ff-row-thumb-size: 2.75rem;
    --ff-row-thumb-size-narrow: 2.5rem;

    /* Ledger rows: the rule drawn between them, and the colour each tone
     * carries on the marker glyph and the value. */
    --ff-ledger-row-padding: 0.375rem;
    --ff-ledger-border-color: color-mix(in oklab, var(--ff-color-border) 40%, transparent);
    --ff-ledger-tone-default: var(--ff-color-foreground);
    --ff-ledger-tone-muted: var(--ff-color-muted);
    --ff-ledger-tone-live: var(--ff-color-primary);
    --ff-ledger-tone-danger: var(--ff-color-danger);
    --ff-ledger-tone-success: var(--ff-color-success);
  }

  /**
   * Hero is the same countdown at a larger scale: a taller numeral ceiling, a
   * wider cell gap, and a gap reserve that counts that gap either side of the
   * larger separator glyph. The variants that draw no separator reserve the
   * gap alone.
   */
  .fanfare-themed [data-slot="countdown"][data-size="hero"] {
    --ff-countdown-numeral-max: 3.75rem;
    --ff-countdown-cell-gap: 1rem;
    --ff-countdown-reserve-gap: 3.75rem;
  }

  .fanfare-themed[data-fanfare-variant="retro"] [data-slot="countdown"][data-size="hero"],
  .fanfare-themed[data-fanfare-variant="rounded"] [data-slot="countdown"][data-size="hero"] {
    --ff-countdown-reserve-gap: 1rem;
  }

  /**
   * Four unit labels plus three separators need more width than the widget
   * has, so a countdown showing four cells drops its separators at every size
   * and reserves the cell gap alone between cells.
   */
  .fanfare-themed [data-slot="countdown"][data-units="4"] {
    --ff-countdown-separator-display: none;
    --ff-countdown-reserve-gap: var(--ff-countdown-cell-gap);
  }

  /**
   * The boxed variants' cell padding alone would leave four cells no room for
   * numerals at the narrowest widget width the cells layout renders at, so a
   * four-cell row narrows each cell's side padding; the cell reserve follows.
   */
  .fanfare-themed[data-fanfare-variant="rounded"] [data-slot="countdown"][data-units="4"] {
    --ff-countdown-cell-padding: 0.75rem 0.5rem;
    --ff-countdown-reserve-cell: 1.125rem;
  }

  .fanfare-themed[data-fanfare-variant="retro"] [data-slot="countdown"][data-units="4"] {
    --ff-countdown-cell-padding: 0.5rem 0.5rem;
    --ff-countdown-reserve-cell: 1.5rem;
  }

  /**
   * Ensure all descendants inherit border and outline colors
   */
  .fanfare-themed *,
  .fanfare-themed ::after,
  .fanfare-themed ::before,
  .fanfare-themed ::backdrop,
  .fanfare-themed ::file-selector-button {
    border-color: var(--ff-color-border);
    outline-color: var(--ff-color-border);
  }

  /**
   * Interactive elements
   */
  .fanfare-themed button:not(:disabled),
  .fanfare-themed [role="button"]:not(:disabled) {
    cursor: pointer;
  }

  /**
   * Focus styles
   */
  .fanfare-themed :focus-visible {
    outline: 2px solid var(--ff-color-primary);
    outline-offset: 2px;
  }

  /**
   * Respect reduced motion preferences
   */
  @media (prefers-reduced-motion: reduce) {
    .fanfare-themed *,
    .fanfare-themed ::before,
    .fanfare-themed ::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

@layer components {
  /**
   * Countdown token consumers. The layer keeps a one-off Tailwind utility
   * winning over these rules, and the `.fanfare-themed` prefix keeps them from
   * reaching a host page's own markup once the stylesheet is imported.
   */
  /**
   * Cells are a two-row grid: every unit spans both rows through a subgrid, so
   * the numerals share the first row and each separator centres on that row
   * whatever size the numerals fit to.
   */
  .fanfare-themed [data-slot="countdown-cells"] {
    column-gap: var(--ff-countdown-cell-gap);
  }

  .fanfare-themed [data-slot="countdown-unit"] {
    padding: var(--ff-countdown-cell-padding);
    border-radius: var(--ff-countdown-cell-radius);
    border-width: var(--ff-countdown-cell-border-width);
    border-style: solid;
    background-color: var(--ff-countdown-cell-bg);
    box-shadow: var(--ff-countdown-cell-shadow);
  }

  /* Hover elevation is gated on a real pointer, so a tap does not leave a
   * cell raised. */
  @media (hover: hover) {
    .fanfare-themed [data-slot="countdown-unit"]:hover {
      box-shadow: var(--ff-countdown-cell-shadow-hover);
    }
  }

  /* Per-digit boxes inherit the numeral face from their unit. */
  .fanfare-themed [data-slot="countdown-unit-digits"] {
    color: var(--ff-countdown-numeral-color);
    font-family: var(--ff-countdown-numeral-font);
  }

  /**
   * Per-unit numerals size themselves to the widget: the container's inline
   * size less the reserved chrome, divided across every digit on screen
   * (`--ff-countdown-digits`, across `--ff-countdown-cells` cells, at the
   * variant's advance ratio). The per-digit granularity is excluded — its cells are fixed boxes
   * whose numerals are sized by utility to match.
   *
   * `cqi` cannot name a container, so it binds to the nearest one. Every
   * countdown the SDK renders sits under the widget root and outside
   * `ProductSelector`'s own container, so this reads the widget's width.
   */
  .fanfare-themed [data-cells="unit"] [data-slot="countdown-unit-digits"] {
    font-size: clamp(
      var(--ff-countdown-numeral-min),
      calc(
        (
            100cqi - var(--ff-countdown-reserve-outer) - var(--ff-countdown-cells) * var(--ff-countdown-reserve-cell) -
              (var(--ff-countdown-cells) - 1) * var(--ff-countdown-reserve-gap)
          ) /
          (var(--ff-countdown-digits) * var(--ff-numeral-advance))
      ),
      var(--ff-countdown-numeral-max)
    );
  }

  .fanfare-themed [data-slot="countdown-unit-label"] {
    order: var(--ff-countdown-label-order);
    font-size: var(--ff-countdown-label-size);
    color: var(--ff-countdown-label-color);
  }

  .fanfare-themed [data-slot="countdown-separator"] {
    display: var(--ff-countdown-separator-display);
    color: var(--ff-countdown-separator-color);
  }

  .fanfare-themed [data-slot="countdown-separator"]::before {
    content: var(--ff-countdown-separator-glyph);
  }

  .fanfare-themed [data-layout="inline"][data-slot="countdown"],
  .fanfare-themed [data-slot="countdown-inline"] {
    font-size: var(--ff-countdown-inline-size);
    font-weight: var(--ff-countdown-inline-weight);
    letter-spacing: var(--ff-countdown-inline-tracking);
  }

  /**
   * Both layouts publish the resolved tone on their root: the cells layout
   * colours each unit's numerals, the inline layout colours the single line,
   * and the cells layout's narrow-container inline fallback picks up the same
   * rule.
   */
  .fanfare-themed [data-slot="countdown-unit"][data-tone="warning"] [data-slot="countdown-unit-digits"],
  .fanfare-themed [data-slot="countdown"][data-tone="warning"] [data-slot="countdown-inline"] {
    color: var(--ff-countdown-tone-warning-color);
  }

  .fanfare-themed [data-slot="countdown-unit"][data-tone="critical"] [data-slot="countdown-unit-digits"],
  .fanfare-themed [data-slot="countdown"][data-tone="critical"] [data-slot="countdown-inline"] {
    color: var(--ff-countdown-tone-critical-color);
  }

  /**
   * Retro's urgency accent is part of that variant's aesthetic rather than the
   * global danger semantic, so the filled cell is scoped to the retro variant
   * instead of moving `--ff-color-danger`. Other variants keep the cell surface
   * their geometry tokens give them and carry urgency in the numeral colour
   * alone.
   */
  .fanfare-themed[data-fanfare-variant="retro"] [data-slot="countdown-unit"][data-tone="critical"] {
    background-color: var(--ff-countdown-tone-critical-bg);
    color: var(--ff-countdown-tone-critical-fg);
  }

  /**
   * The global critical rule sets the numeral colour directly, so the filled
   * cell's foreground has to be restated on the numerals and label rather than
   * relied on through inheritance.
   */
  .fanfare-themed[data-fanfare-variant="retro"]
    [data-slot="countdown-unit"][data-tone="critical"]
    [data-slot="countdown-unit-digits"],
  .fanfare-themed[data-fanfare-variant="retro"]
    [data-slot="countdown-unit"][data-tone="critical"]
    [data-slot="countdown-unit-label"] {
    color: var(--ff-countdown-tone-critical-fg);
  }

  /**
   * Display text that is prose rather than a fixed glyph run: it scales with
   * the widget between a legible floor and the design's ceiling, so a narrow
   * embed shrinks the words instead of wrapping or clipping them.
   */
  .fanfare-themed [data-slot="stat-value"] {
    font-size: clamp(var(--ff-stat-min), var(--ff-stat-scale), var(--ff-stat-max));
    font-weight: var(--ff-stat-weight);
    line-height: 1.2;
  }

  .fanfare-themed [data-slot="panel-title"] {
    font-size: clamp(var(--ff-title-min), var(--ff-title-scale), var(--ff-title-max));
    font-weight: var(--ff-title-weight);
    line-height: 1.4;
  }

  /**
   * The payment panel's section heading reads at body scale under its badge
   * and hero stat. A retry moves focus to it so a screen reader starts from
   * the explanation; it is not a control, and the Retry badge already marks
   * the state, so the programmatic focus draws no ring.
   */
  .fanfare-themed [data-slot="checkout-title"] {
    color: var(--ff-color-foreground);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    outline: none;
  }

  .fanfare-themed [data-slot="panel-body"],
  .fanfare-themed [data-slot="panel-stack"] {
    gap: var(--ff-panel-gap);
  }

  .fanfare-themed [data-slot="panel-stack"] {
    padding: var(--ff-panel-padding);
  }

  /**
   * Every Card carries `data-fanfare-card` whatever `data-slot` its consumer
   * publishes on it, so the surface rules key on that marker rather than on a
   * slot name a panel is free to replace.
   */
  .fanfare-themed [data-fanfare-card] {
    box-shadow: var(--ff-card-shadow);
  }

  /**
   * A raised card publishes `data-elevated`, so its elevation is a token the
   * variant reaches rather than a utility that outranks every variant's
   * aesthetic.
   */
  .fanfare-themed [data-fanfare-card][data-elevated] {
    box-shadow: var(--ff-card-shadow-elevated);
  }

  @media (hover: hover) {
    .fanfare-themed [data-fanfare-card]:hover {
      box-shadow: var(--ff-card-shadow-hover);
    }

    .fanfare-themed [data-fanfare-card][data-elevated]:hover {
      box-shadow: var(--ff-card-shadow-elevated-hover);
    }
  }

  .fanfare-themed [data-slot="progress-track"] {
    box-shadow: var(--ff-progress-shadow);
  }

  .fanfare-themed [data-slot="progress-bar"] {
    box-shadow: var(--ff-progress-bar-shadow);
  }

  .fanfare-themed [data-slot="loading-spinner"] {
    box-shadow: var(--ff-loading-shadow);
  }

  .fanfare-themed [data-slot="product-selector-row"],
  .fanfare-themed [data-slot="payment-method-row"] {
    gap: var(--ff-row-gap);
    padding: var(--ff-row-padding);
    border-radius: var(--ff-row-radius);
  }

  /**
   * A payment method row draws the product selector's row, so a payment choice
   * reads as the same kind of choice as the item it pays for. The native radio
   * stays in the row: it carries the group's keyboard model, and the row takes
   * its checked and focus states from it.
   */
  .fanfare-themed [data-slot="payment-method-row"] {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
    border: 1px solid color-mix(in oklab, var(--ff-color-border) 40%, transparent);
    background-color: var(--ff-color-background);
    transition:
      background-color 150ms,
      border-color 150ms,
      box-shadow 150ms;
  }

  @media (hover: hover) {
    .fanfare-themed [data-slot="payment-method-row"]:hover {
      background-color: var(--ff-color-secondary);
    }
  }

  .fanfare-themed [data-slot="payment-method-row"]:has(:checked) {
    border-color: var(--ff-color-foreground);
    box-shadow: inset 0 0 0 1px var(--ff-color-foreground);
  }

  .fanfare-themed [data-slot="payment-method-row"]:has(:focus-visible) {
    outline: 2px solid var(--ff-color-primary);
    outline-offset: 2px;
  }

  .fanfare-themed [data-slot="payment-method-row"] > input {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin: 0;
    outline: none;
    accent-color: var(--ff-color-foreground);
  }

  .fanfare-themed [data-slot="payment-method-row"] > svg {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--ff-color-muted);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /**
   * The card field's frame draws the variant's text input around Stripe's
   * iframe. Focus and validity live inside that iframe, where no selector
   * reaches, so the element's own events publish them on the frame.
   */
  .fanfare-themed [data-fanfare-field="stripe-card-frame"][data-framed] {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--ff-color-border);
    border-radius: 0.375rem;
    background-color: var(--ff-color-background);
    transition:
      border-color 200ms,
      box-shadow 200ms,
      background-color 200ms;
  }

  .fanfare-themed [data-fanfare-field="stripe-card-frame"][data-focused] {
    border-color: var(--ff-color-primary);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--ff-color-primary) 20%, transparent);
  }

  .fanfare-themed[data-fanfare-variant="retro"] [data-fanfare-field="stripe-card-frame"][data-framed] {
    border: 3px solid var(--ff-color-foreground);
    border-radius: 0;
    box-shadow: inset 3px 3px 0 var(--ff-color-secondary);
  }

  .fanfare-themed[data-fanfare-variant="retro"] [data-fanfare-field="stripe-card-frame"][data-focused] {
    border-color: var(--ff-color-primary);
    box-shadow: inset 3px 3px 0 var(--ff-color-primary);
  }

  .fanfare-themed[data-fanfare-variant="rounded"] [data-fanfare-field="stripe-card-frame"][data-framed] {
    border-color: color-mix(in oklab, var(--ff-color-foreground) 12%, transparent);
    border-radius: 0.75rem;
    background-color: color-mix(in oklch, var(--ff-color-foreground) 3%, var(--ff-color-background));
    box-shadow: var(--ff-input-shadow);
  }

  .fanfare-themed[data-fanfare-variant="rounded"] [data-fanfare-field="stripe-card-frame"][data-focused] {
    border-color: color-mix(in oklab, var(--ff-color-primary) 50%, transparent);
    background-color: var(--ff-color-background);
    box-shadow: var(--ff-input-shadow-focus);
  }

  .fanfare-themed[data-fanfare-variant="clean"] [data-fanfare-field="stripe-card-frame"][data-framed] {
    padding-inline: 0;
    border-width: 0 0 1px;
    border-color: color-mix(in oklab, var(--ff-color-foreground) 20%, transparent);
    border-radius: 0;
    background-color: transparent;
  }

  .fanfare-themed[data-fanfare-variant="clean"] [data-fanfare-field="stripe-card-frame"][data-focused] {
    border-color: var(--ff-color-primary);
    box-shadow: none;
  }

  /* Stated after the variants, at their specificity, so every variant shows it. */
  .fanfare-themed [data-fanfare-field="stripe-card-frame"][data-framed][data-invalid] {
    border-color: var(--ff-color-danger);
  }

  .fanfare-themed [data-slot="product-thumb"] {
    width: var(--ff-row-thumb-size);
    height: var(--ff-row-thumb-size);
  }

  /**
   * The thumbnail takes its narrow side length once the picker's own container
   * is too tight for the wide one. The query is unnamed so it binds to that
   * container — the nearest one — rather than to the widget, which a picker
   * rendered on its own need not sit inside.
   */
  @container not (min-width: 400px) {
    .fanfare-themed [data-slot="product-thumb"] {
      width: var(--ff-row-thumb-size-narrow);
      height: var(--ff-row-thumb-size-narrow);
    }
  }

  .fanfare-themed [data-slot="ledger-row"] {
    padding-block: var(--ff-ledger-row-padding);
    border-bottom-color: var(--ff-ledger-border-color);
  }

  /**
   * Tone is published on the row and inherited by the marker glyph and the
   * value; the label states its own muted colour and is unaffected.
   */
  .fanfare-themed [data-slot="ledger-row"][data-tone="default"] {
    color: var(--ff-ledger-tone-default);
  }

  .fanfare-themed [data-slot="ledger-row"][data-tone="muted"] {
    color: var(--ff-ledger-tone-muted);
  }

  .fanfare-themed [data-slot="ledger-row"][data-tone="live"] {
    color: var(--ff-ledger-tone-live);
  }

  .fanfare-themed [data-slot="ledger-row"][data-tone="danger"] {
    color: var(--ff-ledger-tone-danger);
  }

  .fanfare-themed [data-slot="ledger-row"][data-tone="success"] {
    color: var(--ff-ledger-tone-success);
  }
}