/* Public wholesale application -- GET /apply/{subdomain}.
   ---------------------------------------------------------------------------
   BUILT FROM design-system/, NOT MATCHED TO IT. Every neutral below is
   `var(--varai-*)`, resolved at runtime from
   design-system/varai-brand-tokens.css, which the page links directly (served
   by GET /design-system/varai-brand-tokens.css). Nothing here re-types a hex
   from the palette: changing a token in the design system changes this page.

   This file replaces a `bootstrap@5.3.3` CDN stylesheet that was this page's
   ONLY stylesheet. A buyer walked /book/{handle} -> "Apply for wholesale
   access" -> /apply/{handle} and left the brand's cream, Fraunces/Manrope
   world for a cool-grey #F5F5F7 Bootstrap page with a blue callout, under the
   brand's own name. Bootstrap is gone; so is the blue, which appears nowhere
   in design-system/tokens.json.

   The literal after each comma is a LOAD FAILURE fallback, not a second source
   of truth -- if the token sheet 404s this page must still be legible rather
   than transparent-on-transparent. They are checked against
   design-system/tokens.json by tests/unit/test_wholesale_apply_ui.py.

   THE ONE COLOUR THAT IS NOT A VARAi TOKEN is the accent: `--brand` /
   `--brand-deep` are the BRAND's own `BrandPortalConfig.primary_color` (and
   its hover shade), set by the page's inline `:root` from values that went
   through `safe_brand_color` / `brand_deep_color` at the render boundary. The
   defaults here are the cognac tokens, so a brand with no colour -- and a page
   whose inline block somehow never ran -- still paints a VARAi accent rather
   than an empty custom property.

   BOOTH ERGONOMICS (ADR-020, the floor templates/book_meeting.html sets and
   frontend/static/css/retailer_portal.css follows): every interactive target
   is >= 44px tall (48px for the primary action), every focusable control is
   >= 16px -- which is what stops iOS zooming the whole page on focus -- and
   body copy is 16px. This form is filled in standing at a trade-show booth on
   a phone at least as often as it is at a desk.
   ------------------------------------------------------------------------ */

:root {
  --brand: var(--varai-accent, #B65C34);
  --brand-deep: var(--varai-accent-deep, #8F4522);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--varai-paper, #FAF6EF);
  color: var(--varai-ink, #1C1815);
  font-family: var(--varai-font-ui, 'Manrope', system-ui, -apple-system, sans-serif);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: var(--varai-font-display, 'Fraunces', Georgia, serif);
  letter-spacing: -0.01em;
  font-weight: 400;
  margin: 0;
}

/* --- brand bar ------------------------------------------------------ */

/* Neutral by default. The brand's own colour is applied ONLY by
   `.brand-bar-plated`, which the server adds when the brand has a logo AND
   that colour clears WCAG AA against white content (`carries_white_content`,
   src/core/brand_theme.py) -- the same gate `book_meeting.html`'s
   `brand-header` uses. A brand logo is a trademark this platform never
   recolours, and several are pure-WHITE wordmarks drawn for a dark ground:
   plated on their own dark colour they read, on this cream page they would
   not. When the gate fails the bar stays on the surface colour, which is the
   ground a dark mark needs -- so neither branch can hide a mark that was
   legible on one of the two. */
.brand-bar {
  background: var(--varai-surface, #FFFFFF);
  border-bottom: 1px solid var(--varai-line, #E8DFD2);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.brand-bar-plated {
  background: var(--brand);
  border-bottom-color: var(--brand);
}
.brand-bar img { height: 2.25rem; width: auto; max-width: 180px; object-fit: contain; }
.brand-bar .brand-name {
  font-family: var(--varai-font-display, 'Fraunces', Georgia, serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--varai-ink, #1C1815);
}
/* Defence in depth: a logo REPLACES the text name (see the template), so a
   plated bar cannot contain `.brand-name` today. One line, and it is the
   difference between "unreachable" and "ink-on-black" if a future bar ever
   puts text back on the brand ground. */
.brand-bar-plated .brand-name { color: var(--varai-surface, #FFFFFF); }

/* --- shell ---------------------------------------------------------- */

.page-wrap { max-width: 44rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }

.card {
  background: var(--varai-surface, #FFFFFF);
  border: 1px solid var(--varai-line, #E8DFD2);
  border-radius: var(--varai-radius, 14px);
  box-shadow: var(--varai-shadow-card, 0 10px 30px rgba(28, 24, 21, 0.06));
  padding: 2.25rem 2.25rem 2.5rem;
}
@media (max-width: 34rem) { .card { padding: 1.75rem 1.25rem 2rem; } }

.card-header-section { margin-bottom: 1.75rem; }
.card-header-section h1 { font-size: clamp(1.6rem, 4vw, 2rem); line-height: 1.15; }
.card-header-section p {
  color: var(--varai-ink-muted, #7A7067);
  font-size: 1rem;
  line-height: 1.6;
  margin: .6rem 0 0;
}

/* --- eligibility note ----------------------------------------------- */

/* Was a blue (#F2F7FF) Bootstrap-style callout. Cream wash + the brand's own
   rule, so the one non-neutral thing on the page is the customer's colour. */
.eligibility-note {
  background: var(--varai-cream-100, #F4F1EA);
  border: 1px solid var(--varai-line, #E8DFD2);
  border-left: 3px solid var(--brand);
  border-radius: var(--varai-radius-sm, 10px);
  padding: .9rem 1.1rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--varai-ink-soft, #4A423B);
  margin-bottom: 1.75rem;
}

/* --- form ----------------------------------------------------------- */

.section-divider {
  font-family: var(--varai-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--varai-ink-muted, #7A7067);
  margin: 1.75rem 0 .9rem;
}
.section-divider:first-of-type { margin-top: 0; }

.field-row { display: grid; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 34rem) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { margin-bottom: 1rem; }
.field-last { margin-bottom: 1.5rem; }

label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--varai-ink, #1C1815);
  margin-bottom: .375rem;
}
.optional { font-weight: 400; color: var(--varai-ink-muted, #7A7067); }

/* 44px / 16px: the booth floor. 16px is not a style choice -- anything
   smaller makes iOS zoom the whole page the moment the field is tapped. */
.fld {
  width: 100%;
  min-height: 44px;
  font-family: inherit;
  font-size: 16px;
  color: var(--varai-ink, #1C1815);
  background: var(--varai-surface, #FFFFFF);
  border: 1px solid var(--varai-line, #E8DFD2);
  border-radius: var(--varai-radius-sm, 10px);
  padding: .625rem .8125rem;
  transition: border-color var(--varai-motion, .18s ease);
}
.fld::placeholder { color: var(--varai-cream-400, #B8B0A0); }
.fld:hover { border-color: var(--varai-cream-300, #D8D1C1); }
.fld:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-color: var(--brand);
}
textarea.fld { min-height: 6.5rem; resize: vertical; }
/* Native arrow, brand-agnostic: no background-image data URI to keep in step
   with a per-brand colour. */
select.fld { appearance: auto; }

/* --- buttons -------------------------------------------------------- */

.btn-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0 1.5rem;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--varai-surface, #FFFFFF);
  background: var(--brand);
  border: 1px solid transparent;
  border-radius: var(--varai-radius-sm, 10px);
  cursor: pointer;
  transition: background var(--varai-motion, .18s ease);
}
.btn-brand:hover:not(:disabled) { background: var(--brand-deep); }
.btn-brand:focus-visible { outline: 2px solid var(--varai-ink, #1C1815); outline-offset: 2px; }
.btn-brand:disabled { opacity: .55; cursor: not-allowed; }

/* --- error ---------------------------------------------------------- */

/* The design system's `denied` status pair, not a Bootstrap alert. Inline
   `display:none` in the markup is what the page's own script toggles, so this
   rule must not set `display` itself. */
.form-error {
  margin-bottom: 1rem;
  padding: .8rem 1rem;
  border: 1px solid var(--varai-denied, #A4432E);
  border-radius: var(--varai-radius-sm, 10px);
  background: var(--varai-denied-wash, #F6E2DC);
  color: var(--varai-denied, #A4432E);
  font-size: .9375rem;
}

/* --- footer link ---------------------------------------------------- */

.book-link {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: .9375rem;
  color: var(--varai-ink-muted, #7A7067);
}
/* A text link is still a tap target: padded to the 44px floor rather than
   left as a 17px line of text, which is what it measured at before. */
.book-link a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .5rem;
  color: var(--brand);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.book-link a:hover { color: var(--brand-deep); }
.book-link a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--varai-radius-sm, 10px); }

/* --- success -------------------------------------------------------- */

.success-panel { text-align: center; padding: 1.25rem 0; }
.success-icon {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1.25rem;
  border-radius: var(--varai-radius-pill, 999px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--varai-surface, #FFFFFF);
  background: var(--varai-approved, #3E6B4F);
}
.success-panel h2 { font-size: 1.6rem; margin-bottom: .6rem; }
.success-panel p { color: var(--varai-ink-soft, #4A423B); line-height: 1.65; margin: 0; }
.success-panel strong { color: var(--varai-ink, #1C1815); }
.success-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 1.75rem;
  padding: 0 1.75rem;
  font-size: 16px;
  font-weight: 600;
  color: var(--varai-surface, #FFFFFF);
  background: var(--brand);
  border-radius: var(--varai-radius-sm, 10px);
  text-decoration: none;
  transition: background var(--varai-motion, .18s ease);
}
.success-cta:hover { background: var(--brand-deep); }
.success-cta:focus-visible { outline: 2px solid var(--varai-ink, #1C1815); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}