/* public/styles/public.css — THE ONE PUBLIC LOOK. QUEUE ITEM KV (audit E-23,
   E-34).

   The four public forms (the home page's contact form, the new client form,
   the /for-trainers waitlist and the /trainers Apply form) and every public
   page's buttons read this file, and only this file, for a button and a form
   field. Each page carries `body.kaf-public`; every rule here is scoped to it,
   so a page that also loads components.css (the intake, the trainer pages)
   gets these rules over that sheet's portal ones, and the home page, which
   does not load components.css any more, gets the whole component from here.

   Why not components.css: it is the PORTALS' component sheet, 326 KB, and the
   home page used about 2 KB of it. A stranger on a phone downloaded it to read
   a marketing page (686 KB in all, measured by scripts/design/page-weight.mjs;
   the agency's sample was 318 KB). The public pages are one surface with one
   look; this is that look, at a size a first visit can afford.

   The values are the v9 kit's (kaf-mockups-v9 kit.css, rules 11, 12, 15, 27):
     · BUTTONS: one family. `.btn-primary` is the one filled blue, 48 tall on
       a public page; `.btn-secondary` is white (or clear on the dark top) with
       a strong 1px line; `.btn-tertiary` is blue text with no box. All 44 tall
       at least, radius 12, 16/500 (600 on the primary).
     · FIELDS: label 16 / 600, sentence case, above; the box 48 tall, 16px text
       (iOS zooms below 16) with a --line-strong edge, 3.6:1 on white (WCAG
       1.4.11 asks 3:1); help 14px below; an error is the field's own amber
       line under it, with aria-invalid on the control (R239: the public side,
       like the client side, stops at amber). A Back link reads in
       --primary-strong (7:1). Tokens only: no literal here. */

.kaf-public .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8);
  min-height: var(--target); min-width: var(--target); padding: 0 var(--s-16);
  border: 1px solid transparent; border-radius: var(--r-control); background: transparent;
  font-family: var(--font-sans); font-size: var(--type-body); line-height: var(--lh-body); font-weight: 500;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.kaf-public .btn:focus { outline: none; }
.kaf-public .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.kaf-public .btn-primary { min-height: 48px; background: var(--primary); color: var(--on-accent); font-weight: 600; }
.kaf-public .btn-primary:hover, .kaf-public .btn-primary:active { background: var(--primary-strong); color: var(--on-accent); }
.kaf-public .btn-secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.kaf-public .btn-secondary:hover { background: var(--surface-alt); color: var(--ink); }
.kaf-public .btn-tertiary { padding: 0 var(--s-12); color: var(--primary); }
.kaf-public .btn-tertiary:hover { background: var(--soft-blue); color: var(--primary-strong); }
.kaf-public .btn:disabled, .kaf-public .btn[aria-disabled="true"] { cursor: default; background: var(--surface-alt); border-color: transparent; color: var(--muted); }
.kaf-public .kaf-back { color: var(--primary-strong); }

.kaf-public .kaf-field { display: flex; flex-direction: column; gap: var(--s-8); min-width: 0; }
.kaf-public .kaf-field[hidden] { display: none; }
.kaf-public .kaf-field-label { font-size: var(--type-body); line-height: 1.5; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--ink); }
.kaf-public .kaf-field-help { margin: 0; font-size: var(--type-small); line-height: var(--lh-small); color: var(--muted); }
.kaf-public .kaf-field-error { display: flex; align-items: flex-start; gap: var(--s-8); margin: 0; padding-left: 0; border-left: 0;
  font-size: var(--type-small); line-height: var(--lh-small); font-weight: 500; color: var(--attn-ink); }
.kaf-public .kaf-field-error[hidden], .kaf-public .kaf-field-error:empty { display: none; }
/* Queue item KVb: the kit's error line is the 16 px alert icon and the words
   (kit.mjs field()), drawn here so a script that writes only the words
   (js/shared/public-field.js) gets it; a line that brings its own icon (the
   intake's) keeps that one. The portal sheet's amber rule beside the words is
   not the public look, so it is cleared above. */
.kaf-public .kaf-field-error:not(:has(> svg))::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* …and the kit's field shows its help OR its error (kit.mjs field()): the
   message replaces the hint while it stands, and the hint is back once the
   field is right. */
.kaf-public .kaf-field:has(> .kaf-field-error:not([hidden]):not(:empty)) > .kaf-field-help { display: none; }
.kaf-public .kaf-field > :is(input, select, textarea) {
  appearance: none; -webkit-appearance: none; box-sizing: border-box; width: 100%;
  min-height: 48px; padding: var(--s-8) var(--s-12);
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
  font-family: var(--font-sans); font-size: var(--type-body); line-height: 1.35;
  color: var(--ink); background-color: var(--surface); outline: none;
}
.kaf-public .kaf-field > textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
/* Queue item KVb: the box stays 48 (a textarea 96) on a phone too. A page that
   also loads components.css meets its phone touch floor there
   (`html body input…`, (0,3,3), min-height 44), which outranked the rules
   above and drew every public field 44 tall below 769 px. The floor is a
   minimum for targets that are smaller; this field is taller by design. Same
   weight, later sheet. */
html body.kaf-public .kaf-field > :is(input, select):not([hidden]) { min-height: 48px; }
html body.kaf-public .kaf-field > textarea:not([hidden]) { min-height: 96px; }
.kaf-public .kaf-field > :is(input, select, textarea):focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-a10); }
.kaf-public .kaf-field > :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--attn); box-shadow: 0 0 0 1px var(--attn); }
.kaf-public .kaf-field > select {
  padding-right: calc(var(--s-12) + 1.1rem);
  background-image:
    linear-gradient(45deg, transparent 45%, var(--muted) 45%, var(--muted) 62%, transparent 62%),
    linear-gradient(-45deg, transparent 45%, var(--muted) 45%, var(--muted) 62%, transparent 62%);
  background-position: calc(100% - 1.15rem) calc(50% - 1px), calc(100% - .75rem) calc(50% - 1px);
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
}
/* KVb: a select still on its blank "Choose one" reads as a hint, as the kit draws it. */
.kaf-public .kaf-field > select:has(option[value=""]:checked) { color: var(--muted); }

/* QUEUE ITEM KVb — THE "NOT LIVE YET" BANNER. The build puts it at the top of
   <body> on trainers.html and for-trainers.html while TRAINER_PAGES_LIVE is
   false (scripts/build/trainer-pages-build.mjs). Only a deploy preview ever
   shows it: production sends both addresses home. One public role for both
   pages: a full-width line in the attention tint, ink text at 14px (the ink on
   the tint is well past 7:1), a hairline in the attention colour under it. */
.kaf-public .kaf-preview-banner {
  margin: 0; padding: var(--s-8) var(--s-16);
  background: var(--attn-tint); border-bottom: 1px solid var(--attn); color: var(--ink);
  font-size: var(--type-small); line-height: var(--lh-small); font-weight: 500; text-align: center;
}

/* Below 360 px (an iPhone SE in zoom, a small Android) a long Spanish label —
   "Llame para una charla gratuita de 20 minutos" — is wider than the screen.
   A label that wraps onto two lines beats a page that scrolls sideways (WCAG
   1.4.10 reflow); at 360 and up every button stays on one line, as the kit
   draws it. */
@media (max-width: 359px) {
  .kaf-public .btn { white-space: normal; text-align: center; padding-top: var(--s-8); padding-bottom: var(--s-8); }
}