/**
 * s4.css — S4 "Apply" + S5 "Apply received" (docs/design-on-record/screens-spec.md
 * §S4/§S5, design-v2 §10 `form` / `form-aside` / `ceremony`). Everything shared
 * (deck rhythm, seam/stencil, manifest, chips, pending marks, plate-warn, the
 * reveal system) lives in onrecord.css; the field/checkbox/radio primitives are
 * base.css. This file holds only the two screens' own compositions:
 *
 *   1. the form column + facts aside,
 *   2. the step indicator, its notches and the aside's step index,
 *   3. the ON RECORD field furniture apply owns (selects, DOB row, handle),
 *   4. the error grammar (summary plate, 8px square mark),
 *   5. the S5 ceremony panel.
 *
 * The form MECHANICS (3 steps, validation, the under-age gate) are public.ts's
 * `initApplyForm`; the classes it generates — `.step-indicator`, `.step-controls`,
 * `.plate.plate--warn` — are styled here, never renamed there.
 */

/* ═══════════════ 1. Layout — column 660 + aside (design-v2 §10 form-aside) ══ */

/* Both screens open on a seam with no hero above it, so the stencil plate —
   which sits ON the seam line, translated up by half its own height — would
   collide with the 64px sticky nav. The lead seam drops clear of it. */
.apply-seam {
  margin-block-start: 34px;
}

.apply-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(32px, 4.5vw, 72px);
}
.apply-col {
  flex: 1 1 min(100%, 660px);
  max-inline-size: 660px;
  min-inline-size: 0;
}
.apply-aside {
  flex: 1 1 280px;
  max-inline-size: 400px;
  min-inline-size: 0;
}
@media (min-width: 1100px) {
  .apply-aside {
    position: sticky;
    inset-block-start: calc(var(--hero-nav-block-size) + 32px);
  }
}

/* ═══════════════ 2. Notice plates above the form ═══════════════
   `.plate.plate--warn` is the class public.ts's under-age plate is BUILT with,
   so the server-rendered failure/offline/stale plates use it too and the three
   states read identically. Restyled to the ON RECORD warn plate (surface-alt +
   2px accent-2 keyline, design-v2 §10 plate-warn) without touching base.css. */

.apply-col .plate {
  background: var(--color-surface-alt);
  margin-block-end: 26px;
}

/* The server-side error summary (screens-spec §S4 Errors): the failed POST's
   messages, verbatim, each an anchor to the control it belongs to. Client-side
   validation never reaches this — it writes `.field__error` in place instead. */
.error-summary {
  margin-block-end: 32px;
}
.error-summary__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.error-summary__list a {
  color: var(--color-accent-2);
  font-size: 15px;
  line-height: 1.5;
  text-decoration: none;
}
:lang(ar) .error-summary__list a {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-legal-ar);
  line-height: 1.9;
}

/* ═══════════════ 3. Step indicator + notches ═══════════════
   public.ts builds `<p class="step-indicator">STEP n / 3</p>` (no-JS never sees
   it — the no-JS baseline is one continuous form). The three 26×2px notches are
   a pseudo-element rather than spans because that element is JS-owned and
   src/client/* is not this screen's to edit; the repeating gradient is
   symmetrical, so it reads the same in both directions. */

.step-indicator {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0 0 34px;
  padding-block-end: 14px;
  border-block-end: var(--seam-size) solid var(--color-rule);
  font-family: var(--font-stack-mono);
  font-weight: 500;
  font-size: var(--text-label-lat);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
:lang(ar) .step-indicator {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-label-ar);
  letter-spacing: 0;
  text-transform: none;
}
.step-indicator::after {
  content: "";
  inline-size: 94px; /* 3 × 26px notch + 2 × 8px gap */
  block-size: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--color-control-border) 0 26px,
    transparent 26px 34px
  );
}

/* ═══════════════ 4. Fieldsets, headings, field rhythm ═══════════════ */

.apply-fieldset {
  margin: 0;
  padding: 0;
  border: none;
  min-inline-size: 0;
}
/* No-JS renders all three steps as one document; JS hides all but the current
   one, so this gap only ever shows on the no-JS baseline. */
.apply-fieldset + .apply-fieldset {
  margin-block-start: 56px;
}
.apply-fieldset > legend {
  display: block;
  padding: 0;
  margin-block-end: 28px;
  color: var(--color-ink);
}

.apply-form .field-stack {
  gap: 26px; /* design-v2 §10 form: field gap 26 */
}

/* Selects carry apply's own control chrome (country, platform, the three DOB
   selects); `.field__input`/`.field__textarea` already come from base.css. */
.field__select {
  inline-size: 100%;
  min-block-size: var(--field-height);
  padding-inline: var(--field-pad-inline);
  background: var(--color-surface);
  border: var(--seam-size) solid var(--color-control-border);
  border-radius: var(--radius);
  color: var(--color-ink);
  font-family: var(--font-stack-text-lat);
  font-size: var(--text-control-lat-size);
  line-height: var(--text-control-lat-leading);
  /* The chevron mirrors by explicit background-position: it has no logical
     equivalent, so the RTL rule below is the mirror. (design-ok) */
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23F2F3EF' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-16) center; /* design-ok: mirrored below */
  padding-inline-end: calc(var(--space-16) * 2 + var(--select-chevron-size));
}
[dir="rtl"] .field__select {
  background-position: left var(--space-16) center; /* design-ok: the RTL mirror */
}
:lang(ar) .field__select {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-control-ar-size);
  line-height: var(--text-control-ar-leading);
}

.dob-row {
  display: grid;
  /* Day and year are short numeric selects; the MONTH select carries full month
     NAMES (localised — "September", "أغسطس"), which clipped mid-word at 390px
     under an equal 1fr/1fr/1fr split. Give day and year only the width their
     digits need and let the month column take the rest. */
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-8);
}
/* The DOB selects are narrow, so the full chevron padding leaves too little
   room for the placeholder labels ("اليوم"/"السنة"), which clipped at 390px.
   Tightening the inline padding here recovers it without touching the wider
   country/platform selects. */
.dob-row .field__select {
  padding-inline: var(--space-8);
  padding-inline-end: calc(var(--space-8) + var(--select-chevron-size));
  background-position: right var(--space-8) center; /* design-ok: mirrored below */
}
[dir="rtl"] .dob-row .field__select {
  background-position: left var(--space-8) center; /* design-ok: the RTL mirror */
}

.handle-field__control {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  /* The handle is Latin content (`field__input--ltr`) and the `@` prefixes it,
     so the pair is a single LTR unit: `@thebakery`. In RTL the flex row reversed
     and threw the `@` to the far side, away from the input it prefixes. */
  direction: ltr;
}
.handle-field__prefix {
  color: var(--color-ink-muted);
  font-family: var(--font-stack-mono);
}

/* ═══════════════ 5. The error grammar ═══════════════
   design-v2 §10 form: accent-2 border (base.css, via --field-error-color) + an
   8px SQUARE mark + the message at 15px. base.css paints a masked warning
   triangle for every `.field__error`; on this screen the mark is the square the
   kit specifies — same achromatic-plus-shape principle, this world's shape. */

.apply-col .field__error {
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
}
:lang(ar) .apply-col .field__error {
  font-size: var(--text-legal-ar);
  line-height: 1.9;
}
.apply-col .field__error::before {
  -webkit-mask: none;
  mask: none;
  inline-size: 8px;
  block-size: 8px;
  margin-block-start: 0.42em;
}

/* ═══════════════ 6. Step 3 — eligibility, consent, disclosure ═══════════════ */

/* The gifted-only eligibility notice: the same copy S3 DECK 03 renders, so the
   applicant reaches consent with "you keep the product" in front of them. */
.apply-eligibility-notice {
  margin: 0 0 26px;
  max-inline-size: var(--measure-legal);
  font-size: var(--text-legal-lat);
  line-height: 1.65;
  color: var(--color-ink);
}
:lang(ar) .apply-eligibility-notice {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-legal-ar);
  line-height: 1.9;
}

.checkbox-field--stacked {
  margin-block-start: var(--space-16);
}
/* The consent-missing reason, pulled tight to the box it explains. `[hidden]`
   (base.css) removes it until the server bounces the POST or the client-side
   submit guard fires. */
.apply-consent-error {
  margin-block-start: var(--space-8);
}

/* S8 in place, never a modal, never a new tab (a creator who loses the tab
   loses the form). The `<a href>` stays a real link as the no-JS fallback. */
.privacy-disclosure {
  margin-block-start: var(--space-24);
  padding-block-start: var(--space-24);
  border-block-start: var(--seam-size) solid var(--color-rule);
}
.privacy-disclosure[hidden] {
  display: none;
}
.privacy-version-inline {
  display: inline;
  font-family: var(--font-stack-mono);
  font-size: var(--text-data-lat);
  color: var(--color-ink-muted);
}
:lang(ar) .privacy-version-inline {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-value-ar);
}

/* ═══════════════ 7. Controls ═══════════════ */

.apply-submit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-block-start: var(--space-24);
}
/* public.ts inserts `.step-controls` (Back / Next) just before the submit row
   on the last step, and appends it on every earlier one. */
.step-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  margin-block-start: 34px;
}

/* ═══════════════ 8. The aside — step index + facts manifest ═══════════════ */

.step-index {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Below the two-column break the aside stacks UNDER the form, where a step
   index would restate the legends the visitor has just scrolled past. It is
   `aria-hidden` duplication, so nothing is lost by dropping it there; the
   in-form "STEP n / 3" indicator carries the position on its own. */
@media (max-width: 899px) {
  .step-index {
    display: none;
  }
}
.step-index__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-block: 14px;
  padding-inline-start: 16px;
  border-inline-start: 2px solid var(--color-rule);
}
.step-index__n {
  font-family: var(--font-stack-mono);
  font-size: var(--text-key-lat);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}
:lang(ar) .step-index__n {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-label-ar);
  letter-spacing: 0;
  text-transform: none;
}
.step-index__label {
  font-size: var(--text-legal-lat);
  line-height: 1.5;
  color: var(--color-ink-muted);
}
:lang(ar) .step-index__label {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-legal-ar);
  line-height: 1.9;
}
/* The active row's keyline. There is no state attribute to read, so the index
   reads the step controller's OWN output: the one fieldset it has not hidden.
   Scoped to `.js` on purpose — with no JS every step is open at once, and three
   accent keylines would blow the ≤3-per-viewport accent ration. */
.js
  .apply-layout:has(.apply-fieldset[data-step="1"]:not([hidden]))
  .step-index__row--1,
.js
  .apply-layout:has(.apply-fieldset[data-step="2"]:not([hidden]))
  .step-index__row--2,
.js
  .apply-layout:has(.apply-fieldset[data-step="3"]:not([hidden]))
  .step-index__row--3 {
  border-inline-start-color: var(--color-accent);
}
.js
  .apply-layout:has(.apply-fieldset[data-step="1"]:not([hidden]))
  .step-index__row--1
  .step-index__label,
.js
  .apply-layout:has(.apply-fieldset[data-step="2"]:not([hidden]))
  .step-index__row--2
  .step-index__label,
.js
  .apply-layout:has(.apply-fieldset[data-step="3"]:not([hidden]))
  .step-index__row--3
  .step-index__label {
  color: var(--color-ink);
}

/* The facts manifest reuses S1's hero manifest strings; in a ≤400px aside the
   shared row's two columns have no room, so the pairs stack. */
.apply-facts {
  margin-block-start: 34px;
}
.apply-facts .manifest__row {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-block: 16px;
}
.apply-facts .manifest__key {
  min-inline-size: 0;
}
.apply-facts .manifest__value {
  flex: 1 1 auto;
  font-size: var(--text-legal-lat);
  line-height: 1.6;
}
:lang(ar) .apply-facts .manifest__value {
  font-size: var(--text-legal-ar);
  line-height: 1.9;
}

/* ═══════════════ 9. S5 — the ceremony (design-v2 §10 ceremony) ═══════════════
   Center-composed panel, max 760, four 26px frame corners, the mark stamped in.
   The corner geometry is S1's `.scene-log__corner` pattern, pinned to the panel
   instead of the scene. */

.ceremony-deck > .deck__inner {
  display: flex;
  justify-content: center;
}
.ceremony {
  position: relative;
  inline-size: 100%;
  max-inline-size: 760px;
  padding: clamp(34px, 5vw, 60px) clamp(22px, 4vw, 56px);
  text-align: center;
}
.ceremony__corner {
  position: absolute;
  inline-size: 26px;
  block-size: 26px;
  border: 0 solid var(--color-ink);
}
.ceremony__corner--tl {
  inset-block-start: 0;
  inset-inline-start: 0;
  border-block-start-width: 2px;
  border-inline-start-width: 2px;
}
.ceremony__corner--tr {
  inset-block-start: 0;
  inset-inline-end: 0;
  border-block-start-width: 2px;
  border-inline-end-width: 2px;
}
.ceremony__corner--bl {
  inset-block-end: 0;
  inset-inline-start: 0;
  border-block-end-width: 2px;
  border-inline-start-width: 2px;
}
.ceremony__corner--br {
  inset-block-end: 0;
  inset-inline-end: 0;
  border-block-end-width: 2px;
  border-inline-end-width: 2px;
}
.ceremony__mark {
  display: block;
  inline-size: 128px;
  max-inline-size: 100%;
  margin-inline: auto;
  color: var(--color-ink);
}
/* The mark never mirrors (design-v2 §9) — identical asset, identical box. */
.ceremony__mark svg {
  inline-size: 100%;
  block-size: auto;
  direction: ltr;
}
.ceremony__h1 {
  margin: 26px 0 0;
  color: var(--color-ink);
}
.ceremony__sentence {
  margin: 18px auto 0;
  max-inline-size: 52ch;
}
:lang(ar) .ceremony__sentence {
  max-inline-size: 48ch;
}
.ceremony__receipt {
  margin: 22px 0 0;
}
.ceremony__manifest {
  margin-block-start: 34px;
  text-align: start;
}
/* The shared row's key column (min 300px) does not fit beside its value inside
   a 760px panel, so every pair wrapped to two lines. Narrowed just enough to
   keep the ledger reading as key | value here, still wrapping on a phone. */
.ceremony__manifest .manifest__key {
  min-inline-size: min(34vw, 190px);
}
.ceremony__manifest .manifest__value {
  flex: 1 1 260px;
}
.ceremony__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-block-start: 30px;
}
.ceremony__link-row {
  margin: 26px 0 0;
}
.ceremony__link {
  color: var(--color-ink);
  font-size: var(--text-legal-lat);
  text-decoration: none;
}
:lang(ar) .ceremony__link {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-legal-ar);
}