/* hax-forms.css — the FORM component layer of the studio UI system.
 *
 * Expects hax-ui.css (derived tokens) to be loaded first; this file adds no
 * values of its own — every colour, size and gap is a token reference.
 * Baseline: HAX-EXTENSION §7.3 (the 2020 apply.html, measured) and
 * PLAYBOOK §2.5. Light document context. A system page links this file and
 * adds nothing (PLAYBOOK §1.8: zero per-page CSS).
 *
 * Shape (Aaron, 2026-09-01, fifth pass): logo in the white bottom bar (a
 * DERIVED light-ground lockup, provisional), none in the banner; banner =
 * label / short event name / calendar-date + pin-location; smaller section
 * labels, larger field names; editing latitude as a 3-stop slider; a small
 * required/optional tag at the right of each empty field; a real gradient
 * ground. Earlier shape (fourth pass): a full-bleed banner with no gap
 * above it; ONE column that sizes to the screen within a healthy range; a tall
 * sticky section nav (icon + label) on white; sections on a subtle full-screen
 * grey gradient, separated by a thin column-width divider, each opening with
 * the same teal icon + label and a short description (no titles); a sticky
 * white bottom bar with the one green action. Sentence case throughout —
 * weight carries the hierarchy (the caps trial was seen and dropped).
 * Mechanisms kept but parked at zero: per-section tone (--section-tone) and
 * band tint (--band-tint).
 *
 * Registry: blueprints/ui-system/registry.json · Reference: reference/forms.html
 */

/* ---------- page + column ---------- */
.form-page {
  /* the column: the ruled 60% measure of the frame, held between 720 and 1120 */
  --col: min(calc(100% - 2 * var(--space-lg)), clamp(720px, calc(100vw * var(--form-measure)), 1120px));
  --band-tint: 0.35;   /* 0..1 — how much an even section darkens over the gradient (Aaron: subtle, useful) */
  --nav-h: 80px;
  margin: 0;
  min-height: 100vh;
  /* the ground: a diagonal gradient, almost white top-right to grey bottom-left; the white bars sit on it */
  background: linear-gradient(215deg, var(--ui-surface) 0%, var(--ui-bg) 40%, color-mix(in srgb, var(--ui-bg) 62%, var(--ui-line)) 100%) fixed;
  color: var(--ui-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.form-page *, .form-page *::before, .form-page *::after { box-sizing: border-box; }
.form-col { width: var(--col); margin: 0 auto; }

/* ---------- banner — the establishing shot (PLAYBOOK §1.4) ----------
   Dark ground by construction → the dark-ground lockup reads on it. The HAX kit
   has no light-ground lockup (HAX-EXTENSION §5), so the logo lives here only.
   Green label says WHAT, the H1 says WHICH occasion, the line under it when and
   where. Default image: the HWT scene; an event overrides it (Events.Banner). */
.form-banner {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  background: var(--hax-mograf-ground);
  color: var(--hax-paper);
  isolation: isolate;
}
.form-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -2; }
.form-banner::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--hax-mograf-ground) 90%, transparent), color-mix(in srgb, var(--hax-mograf-ground) 45%, transparent) 60%, transparent);
}
.form-banner__inner { position: relative; min-height: 320px; display: flex; flex-direction: column; justify-content: center; padding: var(--space-lg) 0; }
.form-banner__label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--text-xs-weight);
  letter-spacing: 0.08em;
  color: var(--teal-200);
  margin: 0 0 var(--space-sm);
}
.form-banner__name {
  font-size: 44px; /* display, between H1 and Display */
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  max-width: 20ch;
}
.form-banner__meta { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); font-size: var(--text-md); margin: var(--space-md) 0 0; }
.form-banner__meta span { display: inline-flex; align-items: center; gap: var(--space-sm); }
.form-banner__meta span:empty { display: none; }
.form-banner__meta .ico { width: 18px; height: 18px; flex: 0 0 18px; }
.form-banner__when { color: var(--hax-paper); }
.form-banner__where { color: var(--hax-pewter); }

/* ---------- section nav — sticky band, tall, icon + label ---------- */
.form-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-line);
}
.form-nav__inner { display: flex; gap: var(--space-xl); list-style: none; margin: 0 auto; padding: 0; min-height: var(--nav-h); align-items: stretch; }
.form-nav__item { display: flex; }
.form-nav__item a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--ui-ink3);
  text-decoration: none;
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -0.005em;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color 160ms ease, border-color 160ms ease;
}
.form-nav__item a svg { width: 22px; height: 22px; flex: 0 0 22px; }
.form-nav__item a:hover { color: var(--ui-ink); }
.form-nav__item.is-current a { color: var(--ui-ink); border-bottom-color: var(--ui-ink); }
.form-nav__item.is-done a { color: var(--ui-accent-text); }

/* ---------- sections — on the page gradient; even ones may tint (parked at 0) ---------- */
.form-section {
  scroll-margin-top: var(--nav-h);
  background: transparent;
}
.form-section:nth-of-type(even) { background: color-mix(in srgb, var(--ui-line) calc(var(--band-tint) * 100%), transparent); }
.form-section[hidden] { display: none; }
.form-section > .form-col { padding: var(--space-xl) 0 var(--form-section-pad); }
/* a thin divider above each new section, content width — not full bleed */
.form-section + .form-section > .form-col { border-top: 1px solid var(--ui-line); }

/* the opener: the SAME icon + label as the nav, HAX teal (tone mechanism kept, parked) */
.form-section__marker {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--section-tone, var(--ui-accent-text));
  margin: 0 0 var(--space-sm);
}
.form-section__marker svg { width: 22px; height: 22px; flex: 0 0 22px; }
.form-section__lede { color: var(--ui-ink2); font-size: var(--text-md); font-weight: 400; margin: 0 0 var(--space-xl); max-width: 60ch; }

/* colour-coded sections: the tone is a CSS variable the section sets once;
   marker, focus underline and chips read it. warm=teal (active), cold=cyan
   (potential), cobalt = the extended gamut (R02). */
.form-section[data-tone="teal"]   { --section-tone: var(--ui-accent-text);      --section-tone-ui: var(--ui-accent-ui); }
.form-section[data-tone="cyan"]   { --section-tone: var(--ui-accent-alt-text);  --section-tone-ui: var(--ui-accent-alt-ui); }
.form-section[data-tone="cobalt"] { --section-tone: var(--hax-cobalt);          --section-tone-ui: var(--hax-cobalt); }

/* ---------- field ---------- */
.field { margin: 0 0 var(--form-field-gap); position: relative; }
.field:last-child { margin-bottom: 0; }
.field__label {
  display: block;
  font-size: calc(var(--form-label) * 1.15); /* +15% on the ruled label size (Aaron, 2026-09-01) */
  font-weight: var(--text-xl-weight);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 var(--space-sm);
}
.field__label small { display: block; font-size: var(--text-sm); font-weight: 400; letter-spacing: 0; color: var(--ui-ink2); margin-top: var(--space-xs); }
/* the tag: sits at the right of the control while it is empty, gone once filled */
.control { position: relative; }
.field__tag {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--text-xs-weight); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px var(--space-sm); border-radius: var(--radius-sm);
  color: var(--ui-ink2); background: color-mix(in srgb, var(--ui-line) 55%, transparent);
  pointer-events: none; transition: opacity 160ms ease;
}
.field__tag--required { color: var(--ui-accent-text); background: var(--ui-accent-soft); }
.control > .input:not(:placeholder-shown) ~ .field__tag,
.control > .textarea:not(:placeholder-shown) ~ .field__tag,
.field.has-value .field__tag { opacity: 0; }
.field__tag--inline { position: static; transform: none; margin-left: var(--space-sm); vertical-align: middle; }
.field__hint  { font-size: var(--text-sm); color: var(--ui-ink2); margin: var(--space-xs) 0 0; }
.field__error { font-size: var(--text-sm); color: var(--error-700); margin: var(--space-xs) 0 0; display: none; }
.field.is-invalid .field__error { display: block; }

/* the control — underline only, no box chrome */
.input, .textarea, .select {
  display: block;
  width: 100%;
  font: inherit;
  font-size: var(--form-input);
  font-weight: var(--text-lg-weight);
  color: var(--ui-ink);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--ui-line);
  border-radius: 0;
  padding: var(--space-sm) 0;
  outline: none;
  transition: border-color 160ms ease;
}
.input::placeholder, .textarea::placeholder { color: var(--ui-ink3); font-weight: 400; }
.input:focus, .textarea:focus, .select:focus { border-bottom-color: var(--section-tone-ui, var(--ui-accent-ui)); }
.field.is-invalid .input, .field.is-invalid .textarea, .field.is-invalid .select { border-bottom-color: var(--error-600); }
/* textareas grow with their content (JS sets the height); one line tall when empty */
.textarea { min-height: calc(var(--form-input) * 1.4 + 2 * var(--space-sm)); height: auto; resize: none; overflow: hidden; line-height: 1.4; }
.select { appearance: none; padding-right: var(--space-lg); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 14px) 55%, calc(100% - 8px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }

/* pre-filled: visually distinct until confirmed (PLAYBOOK §2.5) */
.field.is-prefilled .input { border-bottom-color: var(--ui-accent-ui); background: linear-gradient(0deg, var(--ui-accent-soft), var(--ui-accent-soft)); }
.field.is-prefilled .field__hint { color: var(--ui-accent-text); }

/* ---------- slider — one decision on a scale, three stops (radios underneath) ---------- */
.slider { position: relative; padding: var(--space-xl) 0 0; }
.slider__track { position: relative; height: 3px; margin: 0 10px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--ui-line), var(--ui-accent)); }
/* the part past the chosen stop is covered in grey, so the colour under the dot follows the scale */
.slider__rest { position: absolute; right: 0; top: 0; bottom: 0; width: var(--rest, 50%); background: var(--ui-line); border-radius: 0 var(--radius-pill) var(--radius-pill) 0; transition: width 200ms ease; }
.slider__stops { display: grid; grid-template-columns: repeat(3, 1fr); margin: -11px 0 0; padding: 0; list-style: none; }
.slider__stop { position: relative; text-align: center; }
.slider__stop:first-child { text-align: left; }
.slider__stop:last-child { text-align: right; }
.slider__stop input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.slider__dot { display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--ui-surface); border: 2px solid var(--ui-line); margin: 0 auto var(--space-sm); transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.slider__stop:first-child .slider__dot { margin-left: 0; }
.slider__stop:last-child .slider__dot { margin-right: 0; }
.slider__name { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-md); font-weight: 500; color: var(--ui-ink2); }
.slider__ico { width: 18px; height: 18px; flex: 0 0 18px; color: var(--stop-colour, var(--ui-ink3)); }
.slider__stop input:focus-visible ~ .slider__dot { box-shadow: 0 0 0 3px var(--ui-accent-soft); }
.slider__stop input:checked ~ .slider__dot { border-color: var(--stop-colour, var(--ui-accent)); box-shadow: inset 0 0 0 5px var(--stop-colour, var(--ui-accent)); transform: scale(1.1); }
.slider__stop input:checked ~ .slider__name { color: var(--ui-ink); font-weight: 700; }
.slider__stop.is-passed .slider__dot { border-color: var(--stop-colour, var(--ui-accent)); }
/* each stop's colour is its point on the scale */
.slider__stop:nth-child(1) { --stop-colour: var(--ui-ink3); }
.slider__stop:nth-child(2) { --stop-colour: var(--ui-accent-ui); }
.slider__stop:nth-child(3) { --stop-colour: var(--ui-accent); }
.slider__desc { margin: var(--space-md) 0 0; font-size: var(--text-sm); color: var(--ui-ink2); min-height: 1.5em; }

/* ---------- choice — one decision, plain rows (no card chrome) ---------- */
.choice { display: block; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ui-line); }
.choice__item { position: relative; border-bottom: 1px solid var(--ui-line); }
.choice__item input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice__card {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-md) 0;
}
.choice__dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ui-line); margin-top: 3px; transition: border-color 160ms ease, box-shadow 160ms ease; }
.choice__title { font-size: var(--text-lg); font-weight: var(--text-lg-weight); line-height: 1.25; }
.choice__desc { font-size: var(--text-sm); color: var(--ui-ink2); margin-top: var(--space-xs); }
.choice__item:hover .choice__dot { border-color: var(--ui-ink2); }
.choice__item input:focus-visible + .choice__card .choice__dot { box-shadow: 0 0 0 3px var(--ui-accent-soft); }
.choice__item input:checked + .choice__card .choice__dot { border-color: var(--section-tone-ui, var(--ui-accent-ui)); box-shadow: inset 0 0 0 5px var(--section-tone-ui, var(--ui-accent-ui)); }


/* multi-choice: the same rows, square marks */
.choice--multi .choice__dot { border-radius: var(--radius-sm); }
.choice--multi .choice__item input:checked + .choice__card .choice__dot { box-shadow: inset 0 0 0 10px var(--section-tone-ui, var(--ui-accent-ui)); }

/* the no-key page: which form? */
.form-index { padding: var(--space-xl) 0; }
.form-index[hidden] { display: none; }
.form-index__note { color: var(--ui-ink2); margin: var(--space-lg) 0 0; }
/* The list LISTS (Aaron, 2026-09-02) — one banner card per open form, visual
   left, name and one line right. No "which form?" question above it. */
.form-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.form-card__link {
  display: grid;
  grid-template-columns: 240px 1fr auto;
  align-items: stretch;   /* the visual fills the card's height, whatever the blurb costs */
  gap: var(--space-lg);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-md);
  background: var(--ui-surface);
  box-shadow: var(--elev-card);
  color: var(--ui-ink);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.form-card__link:hover, .form-card__link:focus-visible { border-color: var(--ui-accent-ui); box-shadow: var(--elev-pop); transform: translateY(-1px); }
.form-card__img { display: block; width: 100%; height: 100%; min-height: 132px; object-fit: cover; background: var(--ui-deep); }
.form-card__body { display: flex; flex-direction: column; justify-content: center; padding: var(--space-lg) 0; }
.form-card__title { display: block; font-size: var(--text-xl); font-weight: var(--text-xl-weight); letter-spacing: -0.01em; }
.form-card__blurb { display: block; margin-top: var(--space-sm); color: var(--ui-ink2); font-size: var(--text-md); max-width: 62ch; }
.form-card__go { display: flex; align-items: center; padding-right: var(--space-lg); color: var(--ui-ink3); }
.form-card__ico { width: 24px; height: 24px; }
.form-card__link:hover .form-card__go { color: var(--ui-accent-text); }


/* ---------- tags — a cloud of small chips, grey until chosen (economy of space) ---------- */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-sm); list-style: none; margin: 0; padding: 0; }
.tags__item { position: relative; }
.tags__item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tags__chip {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ui-line) 55%, transparent);
  border: 1px solid transparent;
  color: var(--ui-ink2);
  font-size: var(--text-md); font-weight: 500;
  cursor: pointer; user-select: none;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.tags__ico { width: 18px; height: 18px; flex: 0 0 18px; }
.tags__chip:hover { color: var(--ui-ink); }
.tags__item input:focus-visible + .tags__chip { box-shadow: 0 0 0 3px var(--ui-accent-soft); }
.tags__item input:checked + .tags__chip { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-ink); }


/* room between the label block and a set of options (Aaron: too tight) */
.field__label + .tags, .field__label + .choice, .field__label + .slider { margin-top: var(--space-lg); }

/* ---------- upload ---------- */
.upload__zone {
  display: block;
  border: 2px dashed var(--ui-line);
  border-radius: var(--radius-sm);
  padding: var(--space-lg);
  text-align: center;
  color: var(--ui-ink2);
  cursor: pointer;
  transition: border-color 160ms ease;
}
.upload__zone strong { color: var(--ui-ink); font-weight: 500; }
.upload__accept { color: var(--ui-ink3); font-size: var(--text-sm); }
.upload__item .chip { justify-self: end; }
.upload__zone.is-over, .upload__zone:hover { border-color: var(--section-tone-ui, var(--ui-accent-ui)); }
.upload__zone input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.upload__list { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: var(--space-sm); }
.upload__list:empty { display: none; }
.upload__item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--ui-line);
  font-size: var(--text-sm);
  position: relative;
  overflow: hidden;
}
/* the proof the file arrived: images preview themselves, everything else shows
   the glyph for its kind (Aaron, 2026-09-02 — a line of small text is not feedback) */
.upload__thumb {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; flex: 0 0 56px;
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-sm);
  background: var(--ui-well);
  overflow: hidden;
}
.upload__thumb img { width: 100%; height: 100%; object-fit: contain; }
.upload__glyph { width: 24px; height: 24px; color: var(--ui-ink3); }
.upload__meta { min-width: 0; }
.upload__name { display: block; font-size: var(--text-md); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload__size { display: flex; align-items: center; gap: var(--space-xs); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ui-ink3); letter-spacing: 0.05em; }
.upload__tick { width: 14px; height: 14px; }
.upload__item.is-done .upload__size { color: var(--ui-accent-text); }
.upload__item.is-done .upload__thumb { border-color: var(--ui-accent-ui); }
.upload__kind { font: inherit; font-size: var(--text-sm); border: 1px solid var(--ui-line); border-radius: var(--radius-pill); padding: 2px var(--space-sm); background: transparent; color: var(--ui-ink); }
.upload__remove { font: inherit; font-size: var(--text-sm); border: 0; background: transparent; color: var(--ui-ink2); cursor: pointer; padding: var(--space-xs); }
.upload__remove:hover { color: var(--error-700); }
.upload__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--ui-accent-ui); transition: width 200ms linear; }
.upload__item.is-done .upload__bar { width: 100%; }
.upload__item.is-error .upload__size { color: var(--error-700); }

/* ---------- switches: skip / create for us / section off ----------
   A form must let someone say "not this" and "you write it" without leaving a
   hole (PLAYBOOK 2.5: any field skippable or flaggable). Skip collapses the
   field; Create for us swaps it for a brief that is required in its place. */
.field__switches { display: flex; flex-wrap: wrap; gap: var(--space-md); float: right; margin-left: var(--space-md); }
.switch { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--ui-ink2); cursor: pointer; user-select: none; }
.switch input { accent-color: var(--ui-accent-ui); width: 15px; height: 15px; cursor: pointer; }
.switch:hover { color: var(--ui-ink); }
.switch--section { float: none; margin-left: auto; font-weight: 400; text-transform: none; letter-spacing: 0; }
.form-section__marker .switch--section { margin-left: auto; }

/* a switched-off field keeps its question visible - the user must still see
   what they declined - but gives up its control and its tag */
.field.is-skipped > .control, .field.is-skipped .upload__zone, .field.is-skipped .upload__list,
.field.is-skipped .tags, .field.is-skipped .choice, .field.is-skipped .slider, .field.is-skipped .refine,
.field.is-delegated > .control, .field.is-delegated .upload__zone, .field.is-delegated .upload__list,
.field.is-delegated .tags, .field.is-delegated .choice, .field.is-delegated .slider, .field.is-delegated .refine { display: none; }
.field.is-skipped .field__label, .field.is-delegated .field__label { opacity: 0.55; }
.field.is-skipped .field__tag, .field.is-delegated .field__tag { display: none; }
.field.is-skipped::after {
  content: "Not included";
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--ui-ink3);
  padding-bottom: var(--space-sm);
}

/* the brief that stands in for a delegated field */
.brief { border-left: 2px solid var(--ui-accent-ui); padding: var(--space-md) 0 var(--space-sm) var(--space-lg); margin: var(--space-md) 0 var(--space-lg); }
.brief[hidden] { display: none; }
.brief__title { font-size: var(--text-lg); font-weight: 500; margin: 0 0 var(--space-xs); }
.brief__hint { color: var(--ui-ink2); font-size: var(--text-md); margin: 0 0 var(--space-md); }
.brief .field { margin-bottom: var(--space-md); }

/* touch-up latitude on an upload - a consent question, so it sits with the files */
.refine { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-md); }
.refine__label { color: var(--ui-ink2); font-size: var(--text-md); }
.refine__select { font: inherit; font-size: var(--text-md); color: var(--ui-ink); background: transparent; border: 0; border-bottom: 1px solid var(--ui-line); padding: var(--space-xs) 0; cursor: pointer; }
.refine__select:focus-visible { outline: 2px solid var(--ui-accent-ui); outline-offset: 2px; }

/* a section turned off keeps its opener and hides its questions */
.form-section.is-off .field, .form-section.is-off .form-section__lede { display: none; }
.form-section.is-off .form-section__marker { opacity: 0.55; }

/* ---------- repeater: as many rows as the site needs ---------- */
.repeat { display: grid; gap: var(--space-md); margin-top: var(--space-md); }
.repeat__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-sm) var(--space-md);
  align-items: start;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--ui-line);
}
.repeat__row > .input, .repeat__row > .textarea { grid-column: 1; }
.repeat__remove {
  grid-column: 2; grid-row: 1;
  font: inherit; font-size: var(--text-lg); line-height: 1;
  border: 0; background: transparent; color: var(--ui-ink3);
  cursor: pointer; padding: var(--space-xs) var(--space-sm);
}
.repeat__remove:hover { color: var(--error-700); }
.repeat__add {
  font: inherit; font-size: var(--text-md); font-weight: 500;
  margin-top: var(--space-md);
  border: 1px solid var(--ui-line); border-radius: var(--radius-pill);
  background: transparent; color: var(--ui-accent-text);
  padding: var(--space-sm) var(--space-lg); cursor: pointer;
  transition: border-color 160ms ease;
}
.repeat__add:hover { border-color: var(--ui-accent-ui); }

/* ---------- chips ---------- */
.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--text-xs-weight);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px var(--space-sm);
  border-radius: var(--radius-pill);
  border: 1px solid var(--ui-line);
  color: var(--ui-ink2);
  vertical-align: middle;
}
.chip--teal { color: var(--ui-accent-text); border-color: var(--ui-accent-ui); }
.chip--cyan { color: var(--ui-accent-alt-text); border-color: var(--ui-accent-alt-ui); }
.chip--error { color: var(--error-700); border-color: var(--error-600); }

/* ---------- notice ---------- */
.notice {
  display: none;
  padding: var(--space-md);
  border-left: 3px solid var(--ui-accent-ui);
  background: var(--ui-surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-sm);
  margin: 0 0 var(--space-lg);
}
.notice.is-visible { display: block; }
.notice--error { border-left-color: var(--error-600); }
.notice--info  { border-left-color: var(--ui-accent-alt-ui); }
.notice strong { font-weight: 500; }
.form-col > .notice { margin-top: var(--space-lg); margin-bottom: 0; }

/* ---------- buttons — upper case ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font: inherit;
  font-size: var(--text-md);
  font-weight: 600;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-line);
  background: var(--ui-surface);
  color: var(--ui-ink);
  cursor: pointer;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn:hover { border-color: var(--ui-ink2); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-accent-soft); }
.btn:disabled { opacity: .5; cursor: default; }
.btn--primary { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-bg); }
.btn--primary:hover { background: var(--hax-ink); }
.btn--accent { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-ink); }
.btn--accent:hover { background: var(--teal-200); border-color: var(--teal-200); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ui-ink2); }
.btn--ghost:hover { color: var(--ui-ink); border-color: transparent; }
.btn--lg { font-size: var(--text-lg); padding: var(--space-md) var(--space-xl); }

/* ---------- bottom bar — sticky band, carries the submit ---------- */
.form-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--ui-surface);
  border-top: 1px solid var(--ui-line);
}
.form-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg) 0; }
.form-bar[hidden] { display: none; }
.form-bar__brand { display: inline-block; line-height: 0; }
.form-bar__status { flex: 1 1 auto; text-align: right; font-size: var(--text-sm); color: var(--ui-ink3); padding-right: var(--space-lg); }
.form-bar__status:empty { display: none; }
.form-bar__brand img { height: 35px; width: auto; display: block; }

/* ---------- receipt ---------- */
.receipt { border: 1px solid var(--ui-line); border-radius: var(--radius-md); background: var(--ui-surface); padding: var(--space-lg); box-shadow: var(--elev-card); margin: var(--space-xl) 0; }
.receipt[hidden] { display: none; }
.receipt__title { font-size: 28px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 var(--space-sm); }
.receipt p { margin: 0 0 var(--space-md); color: var(--ui-ink2); }
.receipt a { color: var(--ui-accent-text); }

/* the bot gate. Managed mode solves itself and stays invisible; the box only
   takes room if a visitor is actually asked to prove something. */
.turnstile { min-width: 300px; }
.turnstile:not(:empty) { margin: var(--space-md) 0; }
.turnstile iframe { display: block; }

/* ---------- busy ---------- */
.is-busy { pointer-events: none; opacity: .6; }

@media (max-width: 720px) {
  .form-page { --col: calc(100% - 2 * var(--space-md)); --nav-h: 64px; }
  .form-banner, .form-banner__inner { min-height: 240px; }
  .form-banner__name { font-size: 30px; }
  .form-nav__inner { gap: var(--space-md); overflow-x: auto; scrollbar-width: none; }
  .form-nav__item a { font-size: var(--text-sm); }
  .field__label { font-size: var(--text-lg); }
  .slider__name { font-size: var(--text-sm); }
  .form-section > .form-col { padding: var(--space-lg) 0 var(--space-xl); }
  .field__label { font-size: var(--text-lg); }
  .btn--lg { font-size: var(--text-md); padding: var(--space-sm) var(--space-lg); }
  .form-bar__status { display: none; }
  .form-bar__brand img { height: 28px; }
  .upload__item { grid-template-columns: auto 1fr auto; }
  .upload__item .upload__remove { grid-column: 3; }
  .form-card__link { grid-template-columns: 1fr; }
  .form-card__img { min-height: 120px; }
  .form-card__body { padding: var(--space-md) var(--space-md) var(--space-lg); }
  .form-card__go { display: none; }
}