/* ============================================================================
   THE STRIPE CHECKOUT SCREEN — `Stripe/Desktop`, 27475:449160

   ⚠️ THIS IS SOMEBODY ELSE'S PAGE. Stripe Checkout is hosted BY STRIPE, on
   Stripe's domain. Card details never reach this application, which is the
   entire reason to use it: it keeps the app out of PCI scope.

   So this file styles a REPRESENTATION of that page. Its fields are editable
   — asked for, so a reviewer can walk the flow the way a buyer would — and
   nothing reads, stores or sends them; see the ⚠️ in checkout.js for the two
   guards that go with that.

   WHAT IS ACTUALLY OURS. The left panel. Stripe renders it from the Checkout
   Session — the brand colour and logo come from the Stripe Dashboard's brand
   settings, and the line item, price, description and image come from the
   Session itself. So the left panel is designed here properly and with real
   tokens; the right panel is a picture.

   The brand fill is `solid/brand/default`, not the frame's `#4211A0`. Under
   BWHI a real Stripe account would carry BWHI's colour, so the token is also
   the accurate behaviour — and non-negotiable 4 forbids the literal anyway.

   The right column deliberately does NOT use the app's `.field` styles.
   Stripe's inputs are Stripe's design, and dressing them in BigHeart's would
   claim a consistency that will not exist on the real page. They are neutral,
   token-bound shapes standing in for a third party's UI.

   TODO(tokens): every bare px is a SIZE — DESIGN.md §12.4.
   ========================================================================== */

/* The frame is 1920 wide with the brand panel at 709 — 37%. */
.sc {
  display: flex;
  inline-size: 100%;
  min-block-size: 100%;
  background: var(--color-surface-raised);
}

.sc:focus-visible {
  outline: none;
}

/* --- The brand panel (ours) --------------------------------------------- */
.sc__brand {
  flex: 0 0 37%;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-4xl) var(--space-3xl);
  background: var(--color-solid-brand-default);
  /* §4.4's pairing contract — the `on-*` partner for a brand fill, never
     `content/primary`. */
  color: var(--color-on-solid-brand);
}

.sc__brand-top {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-block-end: var(--space-lg);
}

/* Stripe's own back control — the page's `cancel_url`. */
.sc__back {
  display: flex;
  align-items: center;
  justify-content: center;
  /* TODO(tokens): size not built. 32 is the DS's small control height. */
  inline-size: 32px;
  block-size: 32px;
  padding: 0;
  border: none;
  border-radius: var(--shape-radius-button);
  background: transparent;
  color: inherit;
  cursor: pointer;
  /* The ink is already the on-brand partner; a hover needs a surface, and the
     only honest one over a brand fill is the brand's own hover step. */
  transition: background-color 100ms ease; /* TODO(tokens): motion not built */
}

.sc__back:hover {
  background: var(--color-solid-brand-hover);
}

.sc__back:focus-visible {
  outline: var(--shape-focus-width) solid var(--color-border-focus);
  outline-offset: var(--shape-focus-offset);
}

.sc__logo {
  display: block;
  block-size: 24px;
  inline-size: auto;
}

/* The line item — quieter than the price it labels. */
.sc__item {
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
  /* Deliberately not `content/secondary`: that token is tuned for the page
     surface and drops below AA over a brand fill. The on-brand ink carries
     the step down in opacity instead. */
  opacity: 0.75;
}

.sc__price {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-heading-xl-size);
  line-height: var(--font-heading-xl-line-height);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-letter-spacing-heading);
}

.sc__desc {
  margin: 0;
  /* TODO(tokens): size not built. A measure, not a box. */
  max-inline-size: 42ch;
  font-family: var(--font-family-text);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
  opacity: 0.75;
}

.sc__thumb {
  margin-block-start: var(--space-lg);
  /* TODO(tokens): size not built. The frame's banner crop. */
  inline-size: 300px;
  max-inline-size: 100%;
  block-size: 84px;
  object-fit: cover;
  border-radius: var(--shape-radius-chip);
}

.sc__footer {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: auto 0 0;
  padding-block-start: var(--space-2xl);
  font-family: var(--font-family-text);
  font-size: var(--font-body-xs-size);
  line-height: var(--font-body-xs-line-height);
  opacity: 0.75;
}

/* "Powered by Stripe" is set as TEXT. The Stripe wordmark, the Apple Pay mark
   and the card-brand marks in the frame are third-party trademarks with no
   export in the asset library, and ASSETS.md §5 rule 1 forbids redrawing a
   logo — so none of them is faked here.
   TODO(assets): request them if this screen must be pixel-faithful. */
.sc__footer-sep {
  inline-size: var(--space-px);
  block-size: 12px;
  background: currentColor;
  opacity: 0.5;
}

.sc__footer a {
  color: inherit;
  text-decoration: none;
}

.sc__footer a:hover {
  text-decoration: underline;
}

/* --- The payment column (Stripe's) -------------------------------------- */
.sc__pay {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  padding: var(--space-4xl) var(--space-xl);
  background: var(--color-surface-raised);
}

.sc__pay-inner {
  inline-size: 100%;
  /* TODO(tokens): size not built. The frame's 308-wide column, rounded up to
     the measure Stripe's own checkout uses. */
  max-inline-size: 340px;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* The prototype note. `soft/warning` rather than `soft/info`: this is a
   caution about what the screen is, not a fact about the order — and it
   carries its own `on-*` partner plus a glyph, so it is never colour alone. */
.sc__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  margin: 0;
  padding: var(--space-sm);
  border-radius: var(--shape-radius-card);
  background: var(--color-soft-warning-default);
  color: var(--color-on-soft-warning);
  font-family: var(--font-family-text);
  font-size: var(--font-body-xs-size);
  line-height: var(--font-body-xs-line-height);
}

.sc__notice .icon {
  margin-block-start: var(--space-3xs);
}

.sc__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* The express-payment slot, named rather than faked — see the note above. */
.sc__express {
  display: flex;
  align-items: center;
  justify-content: center;
  /* TODO(tokens): size not built. The frame's 44-tall express button. */
  min-block-size: 44px;
  padding-inline: var(--space-sm);
  border: var(--space-px) dashed var(--color-border-strong);
  border-radius: var(--shape-radius-button);
  color: var(--color-content-secondary);
  font-family: var(--font-family-text);
  font-size: var(--font-body-xs-size);
  line-height: var(--font-body-xs-line-height);
  text-align: center;
}

/* "Or pay another way" — a rule with the words sitting in it. */
.sc__or {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  color: var(--color-content-secondary);
  font-family: var(--font-family-text);
  font-size: var(--font-body-xs-size);
  line-height: var(--font-body-xs-line-height);
}

.sc__or::before,
.sc__or::after {
  content: "";
  flex: 1 1 auto;
  block-size: var(--space-px);
  background: var(--color-border-default);
}

.sc-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.sc-field__label {
  color: var(--color-content-primary);
  font-family: var(--font-family-text);
  font-size: var(--font-body-xs-size);
  line-height: var(--font-body-xs-line-height);
}

/* --- Stripe's input shape, not ours -------------------------------------
   These deliberately do NOT reuse the app's `.field` styles. Stripe's inputs
   are Stripe's design, and dressing them in BigHeart's would claim a
   consistency that will not exist on the real page. Neutral, token-bound
   shapes standing in for a third party's UI. */
.sc-input {
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: 40px;
  padding-inline: var(--space-sm);
  border: var(--space-px) solid var(--color-border-default);
  border-radius: var(--shape-radius-input);
  background: var(--color-surface-raised);
  color: var(--color-content-primary);
  font-family: var(--font-family-text);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
  /* A UA select carries its own chrome; strip it so both controls match. */
  appearance: none;
  -webkit-appearance: none;
}

.sc-input::placeholder {
  color: var(--color-content-placeholder);
}

/* The grouped card block: stacked cells sharing ONE outline, which is how
   Stripe draws card number over expiry + CVC. The group owns the border, so
   the cells inside it drop theirs. */
.sc-input--grouped {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  padding: 0;
  overflow: clip;
}

.sc-input__cell {
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 40px;
  padding-inline: var(--space-sm);
  border: none;
  background: transparent;
  color: var(--color-content-primary);
  font-family: var(--font-family-text);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
  appearance: none;
  -webkit-appearance: none;
}

.sc-input__cell::placeholder {
  color: var(--color-content-placeholder);
}

/* Rules BETWEEN the cells, so the group reads as one control. */
.sc-input--grouped > * + * {
  border-block-start: var(--space-px) solid var(--color-border-default);
}

.sc-input__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-inline-size: 0;
}

.sc-input__split > * + * {
  border-inline-start: var(--space-px) solid var(--color-border-default);
}

/* Focus — Stripe's own inputs ring; the DS's focus tokens are used so it
   follows the theme, which is the known gap the root CLAUDE.md asks to fill. */
.sc-input:focus-visible,
.sc-input__cell:focus-visible {
  outline: var(--shape-focus-width) solid var(--color-border-focus);
  outline-offset: var(--shape-focus-offset);
}

/* A focused cell's ring must sit above its neighbours' borders. */
.sc-input__cell:focus-visible {
  position: relative;
  z-index: 1;
}

/* The one live control on this screen, and the frame's own label. It is
   Stripe's button, so it takes Stripe's shape — full width, brand fill from
   the account's settings, which is the brand token here. */
.sc__submit {
  min-block-size: 44px;
  padding-inline: var(--space-md);
  border: none;
  border-radius: var(--shape-radius-button);
  background: var(--color-solid-brand-default);
  color: var(--color-on-solid-brand);
  font-family: var(--font-family-text);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color 100ms ease; /* TODO(tokens): motion not built */
}

.sc__submit:hover {
  background: var(--color-solid-brand-hover);
}

.sc__submit:active {
  background: var(--color-solid-brand-pressed);
}

.sc__submit:focus-visible {
  outline: var(--shape-focus-width) solid var(--color-border-focus);
  outline-offset: var(--shape-focus-offset);
}

/* --- The layer ----------------------------------------------------------- */
/* This screen is a different SITE, so it fills the viewport: no scrim, no
   inset, no radius. modal.css centres and dims its layer; this undoes both. */
.modal-layer--full {
  padding: 0;
  background: var(--color-surface-raised);
  align-items: stretch;
  justify-content: stretch;
  overflow: auto;
}

@media (max-width: 899px) {
  /* TODO(tokens): breakpoints not built. Below this the two panels stack —
     Stripe's own checkout does the same. */
  .sc {
    flex-direction: column;
  }
  .sc__brand {
    flex: none;
    padding: var(--space-xl) var(--space-lg);
  }
  .sc__footer {
    margin-block-start: var(--space-lg);
    padding-block-start: var(--space-lg);
  }
  .sc__thumb {
    margin-block-start: var(--space-sm);
  }
  .sc__pay {
    padding: var(--space-xl) var(--space-lg);
  }
}