/**
 * s6.css — S6 "Enquiry" + S7 "Enquiry received" only (ON RECORD:
 * docs/design-on-record/screens-spec.md §S6/§S7, design-v2.md §10 `form`,
 * `form-aside`, `ceremony`, `plate-warn`). Everything shared (deck rhythm,
 * seam + stencil, type ramp, manifest rows, chips, pending marks, the reveal
 * system) lives in onrecord.css; the `.field*` / `.chip*` / `.busy-tick`
 * primitives come from base.css. This file holds only S6's two compositions:
 * the single-step form column beside the facts manifest, and S7's ceremony
 * panel. Every value resolves to a token from public-tokens.css / tokens.css.
 *
 * The field grammar below is restated here on purpose: S4 (apply) and S6
 * (enquiry) are separate pages with separate stylesheets, so each owns the
 * form surface it renders — neither imports the other.
 */

/* ═══════════════ 1. The form column + the facts aside (design-v2 §10) ═══════
   Column max 660 (screens-spec §S6) beside `form-aside`: flex 1 1 280, max 400. */

/* These two screens open on a seam rather than a hero, so the stencil plate —
   which sits translated onto the hairline — would otherwise be half-swallowed
   by the 64px sticky nav. Drop the first seam clear of it. */
.seam--page-top {
  margin-block-start: clamp(56px, 7vw, 88px);
}

.enquiry-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(32px, 4.5vw, 72px);
}
.enquiry-form {
  flex: 1 1 420px;
  max-inline-size: 660px;
  /* design-v2 §10 form: 26px between fields; the label sits close to its own
     control so the pair reads as one block. Local overrides of base.css's
     field tokens — scoped to this column, never global. */
  --field-stack-gap: 26px;
  --field-label-gap: 10px;
}
.enquiry-aside {
  flex: 1 1 280px;
  max-inline-size: 400px;
}
@media (min-width: 1100px) {
  .enquiry-aside {
    position: sticky;
    inset-block-start: calc(var(--hero-nav-block-size) + var(--space-32));
  }
}

/* ═══════════════ 2. Head + lede ═══════════════
   `enquiry.h1` runs one step above the form-head scale (screens-spec §S6:
   "formhead+1"): the .t-formhead class carries the face/weight/caps/leading,
   the next ramp step carries the size. */

.enquiry-h1 {
  font-size: var(--text-h2-lat);
}
:lang(ar) .enquiry-h1 {
  font-size: var(--text-h2-ar);
}
.enquiry-lede {
  margin-block-start: 18px;
  max-inline-size: 56ch;
}
:lang(ar) .enquiry-lede {
  max-inline-size: 48ch;
}
.enquiry-form .field-stack {
  margin-block-start: 40px;
}

/* ═══════════════ 3. Fields (design-v2 §10 `form`) ═══════════════
   48px surface field on a control-border hairline, mono label (Readex 15 on
   AR), radius 0. Error = accent-2 border + an 8px square mark + the message. */

.enquiry-form .field__label {
  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) .enquiry-form .field__label {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-label-ar);
  letter-spacing: 0;
  text-transform: none;
}
.enquiry-form .field__input,
.enquiry-form .field__textarea {
  min-block-size: var(--field-height);
  background: var(--color-surface);
  border: var(--seam-size) solid var(--color-control-border);
  border-radius: 0;
  color: var(--color-ink);
  transition: border-color var(--dur-hover) var(--ease-micro);
}
.enquiry-form .field__input:hover,
.enquiry-form .field__textarea:hover {
  border-color: var(--color-ink);
}
.enquiry-form .field--error .field__input,
.enquiry-form .field--error .field__textarea {
  border-color: var(--color-accent-2);
}
.enquiry-form .field__error {
  /* design-v2 §10: the message sits at the 15px data step, in accent-2. */
  font-size: var(--text-data-lat);
  color: var(--color-accent-2);
}
:lang(ar) .enquiry-form .field__error {
  font-size: var(--text-legal-ar);
}
/* The mark is a square, not an icon (design-v2 §10 form: "8px square mark"):
   drop base.css's masked glyph and paint the block in the error colour. */
.enquiry-form .field__error::before {
  inline-size: 8px;
  block-size: 8px;
  margin-block-start: 0.5em;
  -webkit-mask: none;
  mask: none;
  background-color: currentColor;
}

/* ═══════════════ 4. Warn plates — send failed / offline (design-v2 §10) ═════ */

.enquiry-plate {
  margin-block-start: 30px;
}
.enquiry-plate__label {
  margin-block-end: 8px;
}
.enquiry-plate__body {
  color: var(--color-ink-soft);
  font-size: var(--text-body-lat-size);
  line-height: var(--text-body-lat-leading);
  max-inline-size: 62ch;
}
:lang(ar) .enquiry-plate__body {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-body-ar-size);
  line-height: var(--text-body-ar-leading);
}
.enquiry-plate__action {
  margin-block-start: 16px;
}

/* ═══════════════ 5. The submit row ═══════════════
   The submit chip and the surface's ONE WhatsApp control, side by side. */

.enquiry-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-block-start: 12px;
}

/* ═══════════════ 6. The facts manifest (aside) ═══════════════ */

.enquiry-manifest .manifest__key {
  min-inline-size: 0;
  flex: 1 1 100%;
}
.enquiry-manifest .manifest__row {
  gap: 6px;
}

/* ═══════════════ 7. S7 — the ceremony panel (design-v2 §10 `ceremony`) ══════
   26px frame corners on the panel, the mark at 128px stamping in, the receipt
   line, the manifest, then the two ways onward. Centre-composed, max 760. */

.ceremony {
  position: relative;
  max-inline-size: 760px;
  margin-inline: auto;
  padding: clamp(32px, 5vw, 56px);
  background: var(--color-surface-alt);
  border: var(--seam-size) solid var(--color-rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.ceremony__corner {
  position: absolute;
  inline-size: 26px;
  block-size: 26px;
  border: 0 solid var(--color-ink);
  pointer-events: none;
}
.ceremony__corner--tl {
  inset-block-start: calc(var(--seam-size) * -1);
  inset-inline-start: calc(var(--seam-size) * -1);
  border-block-start-width: 2px;
  border-inline-start-width: 2px;
}
.ceremony__corner--tr {
  inset-block-start: calc(var(--seam-size) * -1);
  inset-inline-end: calc(var(--seam-size) * -1);
  border-block-start-width: 2px;
  border-inline-end-width: 2px;
}
.ceremony__corner--bl {
  inset-block-end: calc(var(--seam-size) * -1);
  inset-inline-start: calc(var(--seam-size) * -1);
  border-block-end-width: 2px;
  border-inline-start-width: 2px;
}
.ceremony__corner--br {
  inset-block-end: calc(var(--seam-size) * -1);
  inset-inline-end: calc(var(--seam-size) * -1);
  border-block-end-width: 2px;
  border-inline-end-width: 2px;
}
.ceremony__mark {
  inline-size: 128px;
  color: var(--color-ink);
}
/* The calligraphic mark never mirrors (design-v2 §9) — identical on both routes. */
.ceremony__mark svg {
  inline-size: 100%;
  block-size: auto;
  direction: ltr;
}
.ceremony__h1 {
  color: var(--color-ink);
  max-inline-size: 24ch;
  /* the ceremony headline is short and centred — never leave a one-word last
     line under it */
  text-wrap: balance;
}
.ceremony__sentence {
  max-inline-size: 52ch;
  text-wrap: pretty;
}
:lang(ar) .ceremony__sentence {
  max-inline-size: 48ch;
}
/* The receipt is content, not HUD chrome, so it takes the 13px mono LABEL tier
   rather than the 11px micro tier the ledger's as-of line uses — it has to
   clear the readable-text floor on its own. */
.ceremony__receipt {
  color: var(--color-ink-muted);
}
/* The manifest is a key/value record: it reads from the reading edge even
   inside the centre-composed panel. */
.ceremony__manifest {
  inline-size: 100%;
  margin-block-start: 6px;
  text-align: start;
}
.ceremony__manifest .manifest__key {
  min-inline-size: min(34vw, 220px);
}
.ceremony__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-block-start: 6px;
}
.enquiry-back-link {
  color: var(--color-ink-muted);
  font-size: var(--text-legal-lat);
  line-height: 1.65;
  text-decoration: none;
}
:lang(ar) .enquiry-back-link {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-legal-ar);
}
.enquiry-back-link:hover,
.enquiry-back-link:focus-visible {
  color: var(--color-ink);
}