/* ==========================================================================
   payment-card.css
   --------------------------------------------------------------------------
   Purpose
   - Distinct card component for payment / support links.
   - Built to reduce pressure for anxious users by making state legible,
     gentle, and non-punitive.
   - Designed for beautiful screenshots, theming, and downstream artistic /
     illustrative reinterpretation.
   - HTML can grow later; this file exposes a richer vocabulary now so the
     markup can adopt it gradually.

   Interaction philosophy
   - Missing fields should feel quiet, not alarming.
   - Optionality should be visible without becoming clutter.
   - State changes should clarify what is possible next.
   - Screenshot mode should remain calm, ornamental, and themeable.

   Suggested JS / HTML-facing attributes
   - [data-payment-state="idle|editing|choosing|ready|complete"]
   - [data-payment-density="calm|standard|rich"]
   - [data-payment-tone="gentle|warm|formal|playful"]
   - [data-payment-theme="paper|glass|night|illustrator"]
   - [data-payment-focus="amount|method|note|contact"]
   - [data-payment-supports="amount note message handle"]
   - [data-payment-optional="true"]
   - [data-payment-missing="true"]
   - [data-payment-selected="true"]
   - [data-payment-screenshot="true"]
   - [data-payment-stage="entry|ground|exit"]
   ========================================================================== */

/* ==========================================================================
   1. Card shell
   ========================================================================== */

.payment-card {
  /* Shape */
  --card-radius: var(--shape-floating, 1.1rem);
  --card-padding: 1.25rem 1.35rem;
  --card-max-width: 22rem;

  /* Surface */
  --card-bg:
    color-mix(in oklab, var(--page-bg, #f8f7f5) 92%, var(--teal, #1a9999) 8%);
  --card-bg-soft:
    color-mix(in oklab, var(--page-bg, #f8f7f5) 96%, transparent);
  --card-border-color:
    color-mix(in oklab, var(--teal, #1a9999) 22%, transparent);
  --card-border-strong:
    color-mix(in oklab, var(--teal, #1a9999) 36%, transparent);
  --card-shadow:
    0 1px 3px rgba(0, 0, 0, 0.07),
    0 4px 16px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --card-shadow-active:
    0 0 0 1px color-mix(in oklab, var(--teal, #1a9999) 18%, transparent),
    0 10px 28px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);

  /* Typographic atmosphere */
  --card-font: var(--site-mono-font, var(--font-mono, monospace));
  --card-text: var(--ink, hsl(178 18% 14%));
  --card-text-soft: var(--ink-soft, hsl(178 10% 38%));
  --card-text-faint: color-mix(in srgb, var(--card-text-soft) 72%, transparent);

  /* Link items */
  --link-bg:
    color-mix(in oklab, var(--teal, #1a9999) 7%, transparent);
  --link-bg-hover:
    color-mix(in oklab, var(--teal, #1a9999) 13%, transparent);
  --link-bg-selected:
    color-mix(in oklab, var(--teal, #1a9999) 16%, transparent);
  --link-border:
    color-mix(in oklab, var(--teal, #1a9999) 18%, transparent);
  --link-border-strong:
    color-mix(in oklab, var(--teal, #1a9999) 35%, transparent);
  --link-radius: 0.6rem;
  --link-padding: 0.6rem 0.85rem;
  --link-min-height: max(2.9rem, var(--touch-target-min, 2.75rem));

  /* Amount chips */
  --amount-bg: transparent;
  --amount-bg-hover: var(--link-bg);
  --amount-bg-selected: var(--link-bg-selected);
  --amount-border: var(--link-border);

  /* Hints + notes */
  --hint-bg:
    color-mix(in oklab, var(--page-bg, #f8f7f5) 96%, var(--teal, #1a9999) 4%);
  --note-line:
    color-mix(in oklab, var(--teal, #1a9999) 14%, transparent);

  /* Motion */
  --payment-duration-fast: var(--duration-fast, 120ms);
  --payment-duration-base: var(--duration-base, 180ms);
  --payment-duration-deliberate: var(--duration-deliberate, 280ms);
  --payment-ease: var(--ease-mechanical, ease);
  --payment-settle-ease:
    var(--brace-settle-ease, cubic-bezier(0.22, 0, 0.15, 1));

  /* Emotional pressure controls */
  --payment-missing-opacity: 0.56;
  --payment-optional-opacity: 0.74;
  --payment-calm-blur: 0px;

  isolation: isolate;
  position: relative;
  contain: layout style;
  max-width: var(--card-max-width);
  padding: var(--card-padding);
  border: 1px solid var(--card-border-color);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  color: var(--card-text);
  backdrop-filter: blur(var(--payment-calm-blur));
  -webkit-backdrop-filter: blur(var(--payment-calm-blur));
  transition:
    border-color var(--payment-duration-base) var(--payment-ease),
    box-shadow var(--payment-duration-deliberate) var(--payment-settle-ease),
    background-color var(--payment-duration-fast) var(--payment-ease),
    transform var(--payment-duration-fast) var(--payment-settle-ease);
}

.payment-card:is(:hover, :focus-within) {
  box-shadow: var(--card-shadow-active);
}

/* Grain texture overlay — matches site material aesthetic */
.payment-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  border-radius: inherit;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

.payment-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.72;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--teal, #1a9999) 4%, transparent) 0%,
      transparent 38%
    );
}

.payment-card > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   2. Global state variants
   ========================================================================== */

.payment-card[data-payment-state="editing"] {
  --card-border-color: color-mix(in oklab, var(--teal, #1a9999) 28%, transparent);
}

.payment-card[data-payment-state="choosing"] {
  --card-border-color: color-mix(in oklab, var(--teal, #1a9999) 32%, transparent);
  --payment-calm-blur: 3px;
}

.payment-card[data-payment-state="ready"] {
  --card-border-color: color-mix(in oklab, var(--teal, #1a9999) 36%, transparent);
  --card-shadow:
    0 0 0 1px color-mix(in oklab, var(--teal, #1a9999) 12%, transparent),
    0 6px 24px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.payment-card[data-payment-state="complete"] {
  --card-border-color: color-mix(in oklab, var(--teal, #1a9999) 42%, transparent);
}

.payment-card[data-payment-density="calm"] {
  --card-padding: 1rem 1.08rem;
  --link-padding: 0.55rem 0.74rem;
  --payment-missing-opacity: 0.46;
}

.payment-card[data-payment-density="rich"] {
  --card-padding: 1.35rem 1.45rem;
  --link-padding: 0.7rem 0.92rem;
}

.payment-card[data-payment-tone="warm"] {
  --card-bg:
    color-mix(in oklab, var(--page-bg, #f8f7f5) 88%, #d9a56c 12%);
}

.payment-card[data-payment-tone="formal"] {
  --card-bg:
    color-mix(in oklab, var(--page-bg, #f8f7f5) 94%, #8ba4b0 6%);
}

.payment-card[data-payment-tone="playful"] {
  --card-bg:
    color-mix(in oklab, var(--page-bg, #f8f7f5) 90%, var(--pink, #d06a93) 10%);
}

.payment-card[data-payment-theme="illustrator"] {
  --card-shadow:
    0 2px 18px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --link-radius: 0.78rem;
  --card-radius: 1.25rem;
}

/* Screenshot mode: quieter UI and more compositional clarity */
.payment-card[data-payment-screenshot="true"],
.payment-card--screenshot {
  --card-shadow:
    0 10px 34px rgba(0, 0, 0, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
  --payment-calm-blur: 0px;
}

.payment-card[data-payment-screenshot="true"] :is(.payment-card__hint, .payment-card__guidance),
.payment-card--screenshot :is(.payment-card__hint, .payment-card__guidance) {
  display: none;
}

/* ==========================================================================
   3. Header
   ========================================================================== */

.payment-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--card-border-color);
}

.payment-card__sigil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--teal, #1a9999);
  color: #fff;
  font-family: var(--card-font);
  font-size: 0.9rem;
  font-weight: 700;
  transition:
    transform var(--payment-duration-fast) var(--payment-settle-ease),
    box-shadow var(--payment-duration-base) var(--payment-settle-ease),
    filter var(--payment-duration-base) var(--payment-settle-ease);
}

.payment-card:is(:hover, :focus-within) .payment-card__sigil {
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--teal, #1a9999) 14%, transparent);
}

.payment-card__title-group {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.payment-card__title {
  color: var(--card-text);
  font-family: var(--card-font);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.payment-card__subtitle {
  opacity: 0.55;
  letter-spacing: 0.03em;
  font-family: var(--card-font);
  font-size: 0.72rem;
}

.payment-card__header-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  flex-wrap: wrap;
}

.payment-card__state-chip,
.payment-card__mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  padding: 0.16rem 0.42rem;
  border: 1px solid color-mix(in oklab, var(--teal, #1a9999) 18%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--page-bg, #f8f7f5) 92%, transparent);
  color: var(--card-text-soft);
  font-family: var(--card-font);
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ==========================================================================
   4. Guidance / calm process framing
   --------------------------------------------------------------------------
   Designed so missing info feels navigable instead of accusatory.
   ========================================================================== */

.payment-card__guidance {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.65rem;
  border: 1px dashed color-mix(in oklab, var(--teal, #1a9999) 18%, transparent);
  border-radius: 0.7rem;
  background: color-mix(in oklab, var(--page-bg, #f8f7f5) 94%, transparent);
  color: var(--card-text-soft);
  font-family: var(--card-font);
  font-size: 0.7rem;
  line-height: 1.45;
}

.payment-card__guidance[data-payment-stage="entry"] {
  opacity: 0.92;
}

.payment-card__guidance[data-payment-stage="ground"] {
  opacity: 0.76;
}

.payment-card__guidance[data-payment-stage="exit"] {
  opacity: 0.58;
}

.payment-card__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.45rem;
  align-items: center;
}

.payment-card__step {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.5rem;
  padding: 0.14rem 0.4rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--teal, #1a9999) 14%, transparent);
  background: transparent;
  color: var(--card-text-faint);
}

.payment-card__step::before {
  content: "";
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.34;
}

.payment-card__step[data-step-state="current"] {
  color: color-mix(in oklab, var(--teal, #1a9999) 86%, var(--card-text));
  border-color: color-mix(in oklab, var(--teal, #1a9999) 26%, transparent);
  background: color-mix(in oklab, var(--teal, #1a9999) 6%, transparent);
}

.payment-card__step[data-step-state="done"] {
  color: color-mix(in oklab, var(--teal, #1a9999) 84%, var(--card-text));
}

.payment-card__step[data-step-state="done"]::before {
  opacity: 0.82;
}

/* ==========================================================================
   5. Suggested amounts
   ========================================================================== */

.payment-card__amounts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--card-border-color);
}

.payment-card__amounts-label {
  flex-shrink: 0;
  margin-right: 0.1rem;
  opacity: 0.45;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  font-family: var(--card-font);
  font-size: 0.68rem;
}

.payment-card__amount {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--amount-border);
  border-radius: 0.48rem;
  background: var(--amount-bg);
  color: inherit;
  cursor: pointer;
  line-height: 1;
  user-select: none;
  touch-action: manipulation;
  font-family: var(--card-font);
  font-size: 0.78rem;
  transition:
    background-color var(--payment-duration-fast) var(--payment-ease),
    border-color var(--payment-duration-fast) var(--payment-ease),
    transform 60ms var(--payment-ease),
    box-shadow var(--payment-duration-base) var(--payment-settle-ease),
    opacity var(--payment-duration-fast) var(--payment-ease);
}

.payment-card__amount-note {
  font-size: 0.58rem;
  opacity: 0.5;
  letter-spacing: 0.03em;
}

.payment-card__amount:hover,
.payment-card__amount:focus-visible {
  background: var(--amount-bg-hover);
  border-color: color-mix(in oklab, var(--teal, #1a9999) 30%, transparent);
  outline: none;
}

.payment-card__amount:active {
  transform: scale(0.95);
}

.payment-card__amount.is-selected,
.payment-card__amount[data-payment-selected="true"] {
  background: var(--amount-bg-selected);
  border-color: color-mix(in oklab, var(--teal, #1a9999) 40%, transparent);
  color: var(--teal, #1a9999);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--teal, #1a9999) 12%, transparent);
}

.payment-card__amount[data-payment-optional="true"] {
  opacity: var(--payment-optional-opacity);
}

.payment-card__amount[data-payment-missing="true"] {
  opacity: var(--payment-missing-opacity);
  border-style: dashed;
}

/* ==========================================================================
   6. Body (payment links)
   ========================================================================== */

.payment-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.payment-card__body[data-payment-focus="method"] .payment-card__link {
  border-color: color-mix(in oklab, var(--teal, #1a9999) 20%, transparent);
}

.payment-card__link {
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--link-min-height);
  padding: var(--link-padding);
  border: 1px solid var(--link-border);
  border-radius: var(--link-radius);
  background: var(--link-bg);
  color: var(--card-text);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  font-family: var(--card-font);
  font-size: 0.82rem;
  transition:
    background var(--payment-duration-fast) var(--payment-ease),
    border-color var(--payment-duration-fast) var(--payment-ease),
    transform 60ms var(--payment-ease),
    box-shadow var(--payment-duration-base) var(--payment-settle-ease),
    opacity var(--payment-duration-fast) var(--payment-ease),
    filter var(--payment-duration-base) var(--payment-settle-ease);
}

/* On devices with hover (desktop), enhance on hover */
@media (hover: hover) {
  .payment-card__link:hover {
    background: var(--link-bg-hover);
    border-color: var(--link-border-strong);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
}

/* On touch devices, bump resting contrast since there is no hover state */
@media (hover: none) {
  .payment-card__link {
    background: color-mix(in oklab, var(--teal, #1a9999) 11%, transparent);
    border-color: color-mix(in oklab, var(--teal, #1a9999) 28%, transparent);
  }
}

.payment-card__link:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--teal, #1a9999) 16%, transparent),
    0 2px 8px rgba(0, 0, 0, 0.06);
}

.payment-card__link:active {
  transform: scale(0.98) translateY(0.5px);
  background: color-mix(in oklab, var(--teal, #1a9999) 18%, transparent);
}

.payment-card__link[data-payment-selected="true"],
.payment-card__link.is-selected {
  background: var(--link-bg-selected);
  border-color: color-mix(in oklab, var(--teal, #1a9999) 40%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--teal, #1a9999) 18%, transparent),
    0 0 0 4px color-mix(in oklab, var(--teal, #1a9999) 8%, transparent);
}

.payment-card__link[data-payment-missing="true"] {
  opacity: var(--payment-missing-opacity);
  border-style: dashed;
}

.payment-card__link[data-payment-optional="true"] {
  opacity: var(--payment-optional-opacity);
}

.payment-card__link[data-payment-supports~="amount"] .payment-card__method-label::after {
  content: " · amount";
  opacity: 0;
  font-size: 0.68em;
  color: var(--card-text-faint);
  transition: opacity var(--payment-duration-fast) var(--payment-ease);
}

.payment-card__link:is(:hover, :focus-visible)[data-payment-supports~="amount"] .payment-card__method-label::after,
.payment-card__link[data-payment-selected="true"][data-payment-supports~="amount"] .payment-card__method-label::after {
  opacity: 1;
}

.payment-card__method-sigil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
  border: 1px solid color-mix(in oklab, var(--teal, #1a9999) 25%, transparent);
  border-radius: 50%;
  background: color-mix(in oklab, var(--teal, #1a9999) 15%, transparent);
  color: var(--teal, #1a9999);
  font-family: var(--card-font);
  font-size: 0.72rem;
  font-weight: 700;
  transition:
    transform var(--payment-duration-fast) var(--payment-settle-ease),
    box-shadow var(--payment-duration-base) var(--payment-settle-ease);
}

.payment-card__link:is(:hover, :focus-visible, [data-payment-selected="true"]) .payment-card__method-sigil {
  transform: translateY(-1px);
}

.payment-card__method-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.08rem;
}

.payment-card__method-label {
  min-width: 0;
  white-space: nowrap;
  font-weight: 500;
  color: var(--card-text);
}

.payment-card__method-description {
  color: var(--card-text-faint);
  font-size: 0.66rem;
  line-height: 1.35;
}

.payment-card__method-handle {
  text-align: right;
  color: var(--card-text-soft);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  opacity: 0.72;
}

/* Methods that support the selected amount get a subtle highlight */
.payment-card__link.has-amount .payment-card__method-handle::after,
.payment-card__link[data-payment-amount-applied="true"] .payment-card__method-handle::after {
  content: " ✓";
  font-size: 0.65em;
  opacity: 0.7;
  color: var(--teal, #1a9999);
}

/* Methods that do not support amount prefill should not feel broken. */
.payment-card__link.no-amount-support,
.payment-card__link[data-payment-supports]:not([data-payment-supports~="amount"]) {
  opacity: 0.82;
}

.payment-card__link.no-amount-support .payment-card__method-description::after,
.payment-card__link[data-payment-supports]:not([data-payment-supports~="amount"]) .payment-card__method-description::after {
  content: " · amount added manually";
  opacity: 0.68;
}

/* ==========================================================================
   7. Gentle missing / optional surfaces
   --------------------------------------------------------------------------
   Intended to make process state legible without punitive red-alert styling.
   ========================================================================== */

.payment-card__missing-note,
.payment-card__optional-note {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-family: var(--card-font);
  font-size: 0.64rem;
  letter-spacing: 0.03em;
}

.payment-card__missing-note {
  color: color-mix(in oklab, var(--card-text-soft) 86%, transparent);
  opacity: var(--payment-missing-opacity);
}

.payment-card__optional-note {
  color: var(--card-text-soft);
  opacity: var(--payment-optional-opacity);
}

.payment-card__missing-note::before,
.payment-card__optional-note::before {
  content: "";
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.38;
}

/* ==========================================================================
   8. Footer
   ========================================================================== */

.payment-card__footer {
  margin-top: 0.85rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--card-border-color);
}

.payment-card__note {
  margin: 0;
  opacity: 0.45;
  letter-spacing: 0.03em;
  font-family: var(--card-font);
  font-size: 0.68rem;
}

.payment-card__footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.payment-card__footer-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  min-height: 1.5rem;
  padding: 0.14rem 0.42rem;
  border: 1px solid color-mix(in oklab, var(--teal, #1a9999) 14%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--page-bg, #f8f7f5) 94%, transparent);
  color: var(--card-text-soft);
  font-family: var(--card-font);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   9. Hold hint
   ========================================================================== */

.payment-card__hint {
  position: absolute;
  inset-inline: 0;
  bottom: calc(100% + 0.5rem);
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--payment-duration-base) var(--payment-ease),
    transform var(--payment-duration-base) var(--payment-ease);
}

.payment-card__hint.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.payment-card__hint-link {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--card-border-color);
  border-radius: 2rem;
  background: var(--hint-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  color: var(--teal, #1a9999);
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--card-font);
  font-size: 0.74rem;
}

.payment-card__hint-link:hover,
.payment-card__hint-link:focus-visible {
  text-decoration: underline;
  outline: none;
}

/* ==========================================================================
   10. Settings toggles (for /settings/ page)
   ========================================================================== */

.payment-settings__toggles {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.payment-settings__toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  cursor: pointer;
  font-family: var(--card-font);
  font-size: 0.82rem;
  transition:
    background var(--payment-duration-fast) var(--payment-ease),
    border-color var(--payment-duration-fast) var(--payment-ease),
    box-shadow var(--payment-duration-base) var(--payment-settle-ease);
}

.payment-settings__toggle:has(input:checked) {
  background: color-mix(in oklab, var(--teal, #1a9999) 8%, transparent);
  border-color: color-mix(in oklab, var(--teal, #1a9999) 20%, transparent);
}

.payment-settings__toggle input {
  accent-color: var(--teal, #1a9999);
}

.payment-settings__toggle-sigil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: color-mix(in oklab, var(--teal, #1a9999) 12%, transparent);
  color: var(--teal, #1a9999);
  font-size: 0.7rem;
  font-weight: 700;
}

.payment-settings__note {
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   11. Dark mode
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  .payment-card {
    --card-bg:
      color-mix(in oklab, #1a1a1a 90%, var(--teal, #1a9999) 10%);
    --card-bg-soft:
      color-mix(in oklab, #1a1a1a 94%, transparent);
    --card-border-color:
      color-mix(in oklab, var(--teal, #1a9999) 28%, transparent);
    --card-border-strong:
      color-mix(in oklab, var(--teal, #1a9999) 36%, rgba(255, 255, 255, 0.1));
    --link-bg:
      color-mix(in oklab, var(--teal, #1a9999) 10%, rgba(255, 255, 255, 0.04));
    --link-bg-hover:
      color-mix(in oklab, var(--teal, #1a9999) 20%, rgba(255, 255, 255, 0.06));
    --link-bg-selected:
      color-mix(in oklab, var(--teal, #1a9999) 22%, rgba(255, 255, 255, 0.06));
    --link-border:
      color-mix(in oklab, var(--teal, #1a9999) 24%, rgba(255, 255, 255, 0.08));
    --card-shadow:
      0 1px 3px rgba(0, 0, 0, 0.25),
      0 4px 16px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --hint-bg: #1e2020;
    --card-text: rgba(255, 255, 255, 0.88);
    --card-text-soft: rgba(255, 255, 255, 0.65);
    --card-text-faint: rgba(255, 255, 255, 0.46);
    color: rgba(255, 255, 255, 0.88);
  }

  .payment-card::before {
    mix-blend-mode: screen;
    opacity: 0.08;
  }

  .payment-card__title,
  .payment-card__method-label {
    color: rgba(255, 255, 255, 0.92);
  }

  .payment-card__subtitle,
  .payment-card__method-handle,
  .payment-card__amounts-label,
  .payment-card__amount-note,
  .payment-card__note {
    opacity: 1;
  }

  .payment-card__link {
    color: rgba(255, 255, 255, 0.88);
  }

  @media (hover: none) {
    .payment-card__link {
      background: color-mix(in oklab, var(--teal, #1a9999) 14%, rgba(255, 255, 255, 0.06));
      border-color: color-mix(in oklab, var(--teal, #1a9999) 32%, rgba(255, 255, 255, 0.1));
    }
  }
}

/* ==========================================================================
   12. Size variants
   ========================================================================== */

/* Compact — for sidebar or narrow column contexts */
.payment-card--compact {
  --card-padding: 0.85rem 1rem;
  --card-max-width: 16rem;
  --link-padding: 0.45rem 0.65rem;
  --link-min-height: 2.55rem;
}

.payment-card--compact .payment-card__sigil {
  width: 1.6rem;
  height: 1.6rem;
  font-size: 0.78rem;
}

.payment-card--compact .payment-card__title {
  font-size: 0.78rem;
}

/* Wide — for full-width or hero contexts */
.payment-card--wide {
  --card-max-width: 100%;
}

.payment-card--wide .payment-card__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.5rem;
}

/* Gallery / illustrator mode */
.payment-card--gallery {
  --card-max-width: 26rem;
  --card-radius: 1.35rem;
  --link-radius: 0.85rem;
}

/* ==========================================================================
   13. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .payment-card,
  .payment-card__sigil,
  .payment-card__link,
  .payment-card__amount,
  .payment-card__method-sigil,
  .payment-card__hint,
  .payment-settings__toggle {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}