/*
 * forms.css — the ONE form pattern for Kuro (owner 2026-09-30: "many forms are very hard to
 * read and distinguish one section from the next... make them easier on the eyes").
 *
 * WHAT IT GIVES A FORM
 *   1. Section cards: white card, a 4px accent rule down the left edge, a clear title and a
 *      one-line purpose under it, a visible border. Sections sit 22px apart on the page.
 *   2. Label ABOVE the field, help text BELOW it in an AA grey.
 *   3. Related fields grouped in a responsive grid.
 *   4. A sticky save bar for long forms.
 *   5. A visible keyboard focus ring on every control.
 *   6. Clear required (*) and error states.
 *
 * COLOUR RULE (owner, 2026-09-30): no section band or stripe may be close to the page
 * background (#eef2fb / #eef2f7). Section bodies are WHITE with a coloured edge — they never
 * use a pale blue wash. Table zebra stays on the --kuro-zebra-* tokens in
 * kp/features/_shared/feature-shell.css.
 *
 * COLOUR-CODED SECTIONS (#277, owner: "forms need easy-to-see sections + colour coding")
 *   Each section gets a TONE: a 4px left edge in the tone colour and a light tint behind its
 *   title strip. The body stays white. Pick a tone with data-kf-tone="indigo|teal|green|
 *   orange|sky" on the section, or let a page cycle them with :nth-of-type (the .kf-form
 *   cycle below, or a page's own "forms.css pattern" block). Title text stays --kf-ink and
 *   the title / icon chip stays, so colour is never the only cue (WCAG 1.4.1).
 *   Tints are orchid, mint, green, peach and aqua — none is a pale blue (each hue is at least
 *   40° from the page background's) — and each is at least 10 ΔE*ab (CIE76) away from both
 *   page backgrounds and from the white body.
 *   MEASURED 2026-10-02 (C:\_kuro_build\tints_277.cjs; asserted in formsPattern277 test):
 *     tone    edge     edge:#fff  tint     ink:tint  help:tint  ΔE #eef2fb  ΔE #eef2f7  ΔE #fff
 *     indigo  #4338ca   7.90:1    #f2e0fa  12.17:1   5.74:1     12.5        14.0        17.3
 *     teal    #0b7c88   4.94:1    #cff0e4  12.47:1   5.89:1     15.4        13.9        15.3
 *     green   #517e2a   4.81:1    #e4f1d6  12.92:1   6.09:1     18.9        16.9        16.0
 *     orange  #be510a   4.80:1    #fde6d3  12.62:1   5.95:1     17.7        16.1        15.0
 *     sky     #007aa8   4.83:1    #cdeff5  12.49:1   5.89:1     10.7        10.5        14.1
 *   Edges clear the 3:1 non-text floor (WCAG 1.4.11) on white; ink clears 4.5:1 on every tint.
 *
 * MEASURED 2026-09-30 (WCAG 2.1 relative luminance; C:\_kuro_build\forms_contrast.mjs):
 *   --kf-ink     #1e2634  15.19:1 on #fff              section titles, field values
 *   --kf-label   #2b3547  12.33:1 on #fff              labels
 *   --kf-help    #4b5870   7.17:1 on #fff, 6.38:1 on #eef2f7   help / purpose lines
 *   --kf-border  #8391a7   3.19:1 on #fff              field outline (WCAG 1.4.11, 3:1 floor)
 *   --kf-error   #b3261e   6.54:1 on #fff              error text, required star, error outline
 *   --kf-focus   #1b56d6   6.27:1 on #fff              focus ring, primary button fill
 *   --kf-accent  #4338ca   7.90:1 on #fff              section edge + icon chip (white glyph 7.90:1)
 *
 * TWO WAYS TO USE IT
 *   - New markup: the .kf-* classes below.
 *   - Existing markup: a page maps its own class names onto these tokens in its own
 *     stylesheet (see the "forms.css pattern" blocks in admin.css, operator.css, ...), so no
 *     element id or class the page's JavaScript reads is renamed.
 */
:root {
  --kf-ink: #1e2634;
  --kf-label: #2b3547;
  --kf-help: #4b5870;
  --kf-border: #8391a7;
  --kf-section-border: #d3dae6;
  --kf-divider: #e3e8f0;
  --kf-error: #b3261e;
  --kf-error-bg: #fdecea;
  --kf-focus: #1b56d6;
  --kf-accent: #4338ca;
  --kf-card: #ffffff;
  --kf-radius: 14px;
  --kf-gap: 22px;
  --kf-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 14px rgba(31, 38, 135, 0.06);
  /* #277 section tones (edge) and their title-strip tints. The -aa sources live in
     brand-tokens.css; the fallbacks are the same values for a page that does not load it. */
  --kf-tone-indigo: #4338ca;
  --kf-tone-teal: var(--teal-aa, #0b7c88);
  --kf-tone-green: var(--green-aa, #517e2a);
  --kf-tone-orange: var(--orange-aa, #be510a);
  --kf-tone-sky: var(--sky-aa, #007aa8);
  --kf-tint-indigo: #f2e0fa;
  --kf-tint-teal: #cff0e4;
  --kf-tint-green: #e4f1d6;
  --kf-tint-orange: #fde6d3;
  --kf-tint-sky: #cdeff5;
}

/* #277 tone selectors. The :where() cycle has zero specificity, so an explicit
   data-kf-tone on a section always wins over the cycle. */
:where(.kf-form > .kf-section:nth-of-type(5n + 1)) {
  --kf-tone: var(--kf-tone-indigo);
  --kf-tone-tint: var(--kf-tint-indigo);
}
:where(.kf-form > .kf-section:nth-of-type(5n + 2)) {
  --kf-tone: var(--kf-tone-teal);
  --kf-tone-tint: var(--kf-tint-teal);
}
:where(.kf-form > .kf-section:nth-of-type(5n + 3)) {
  --kf-tone: var(--kf-tone-green);
  --kf-tone-tint: var(--kf-tint-green);
}
:where(.kf-form > .kf-section:nth-of-type(5n + 4)) {
  --kf-tone: var(--kf-tone-orange);
  --kf-tone-tint: var(--kf-tint-orange);
}
:where(.kf-form > .kf-section:nth-of-type(5n + 5)) {
  --kf-tone: var(--kf-tone-sky);
  --kf-tone-tint: var(--kf-tint-sky);
}
[data-kf-tone='indigo'] {
  --kf-tone: var(--kf-tone-indigo);
  --kf-tone-tint: var(--kf-tint-indigo);
}
[data-kf-tone='teal'] {
  --kf-tone: var(--kf-tone-teal);
  --kf-tone-tint: var(--kf-tint-teal);
}
[data-kf-tone='green'] {
  --kf-tone: var(--kf-tone-green);
  --kf-tone-tint: var(--kf-tint-green);
}
[data-kf-tone='orange'] {
  --kf-tone: var(--kf-tone-orange);
  --kf-tone-tint: var(--kf-tint-orange);
}
[data-kf-tone='sky'] {
  --kf-tone: var(--kf-tone-sky);
  --kf-tone-tint: var(--kf-tint-sky);
}

/* ---------- 1. sections ---------- */
.kf-form {
  display: flex;
  flex-direction: column;
  gap: var(--kf-gap);
}
.kf-section {
  background: var(--kf-card);
  border: 1px solid var(--kf-section-border);
  border-left: 4px solid var(--kf-tone, var(--kf-accent));
  border-radius: var(--kf-radius);
  box-shadow: var(--kf-shadow);
  overflow: hidden;
}
.kf-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--kf-divider);
  background: var(--kf-tone-tint, var(--kf-card));
}
.kf-section-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--kf-accent);
  color: #fff;
  font-size: 15px;
}
.kf-section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--kf-ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.kf-section-purpose {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--kf-help);
  line-height: 1.5;
  max-width: 72ch;
}
.kf-section-body {
  padding: 18px 20px 20px;
}

/* ---------- 2. fields ---------- */
.kf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px 22px;
}
.kf-grid > .kf-wide {
  grid-column: 1 / -1;
}
.kf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.kf-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--kf-label);
  line-height: 1.35;
}
.kf-help {
  margin: 0;
  font-size: 12.5px;
  color: var(--kf-help);
  line-height: 1.5;
  max-width: 72ch;
}
.kf-req::after,
.kf-label.required::after {
  content: ' *';
  color: var(--kf-error);
  font-weight: 800;
}
.kf-control,
.kf-field input:not([type='checkbox']):not([type='radio']):not([type='file']),
.kf-field select,
.kf-field textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--kf-border);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--kf-ink);
}
.kf-field textarea {
  line-height: 1.55;
  resize: vertical;
}

/* ---------- 3. errors ---------- */
.kf-error {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--kf-error);
}
.kf-invalid input,
.kf-invalid select,
.kf-invalid textarea,
.kf-control[aria-invalid='true'],
.kf-field [aria-invalid='true'] {
  border-color: var(--kf-error) !important;
  box-shadow: 0 0 0 1px var(--kf-error);
}

/* ---------- 4. focus (keyboard) ---------- */
.kf-form :is(input, select, textarea, button, a):focus-visible,
.kf-focus-scope :is(input, select, textarea, button, a, [tabindex]):focus-visible {
  outline: 3px solid var(--kf-focus) !important;
  outline-offset: 2px;
}

/* ---------- 5. sticky save bar ---------- */
.kf-savebar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid var(--kf-section-border);
  border-radius: var(--kf-radius) var(--kf-radius) 0 0;
  box-shadow: 0 -6px 18px rgba(31, 38, 135, 0.1);
}
.kf-savebar .kf-savebar-note {
  color: var(--kf-help);
  font-size: 13px;
}

@media (max-width: 640px) {
  .kf-section-head,
  .kf-section-body {
    padding-left: 14px;
    padding-right: 14px;
  }
  .kf-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- 6. theme.css bridge (#205) ----------
 * shared/styles/theme.css ships the .field / .input pair that many pages build their forms
 * from. Measured there: the field outline is var(--line) #e4e9f1 = 1.22:1 on white (under
 * the 3:1 floor for a control boundary, so a field and the card around it look the same),
 * the fill is #f7faff, and the label is 12px. A page that links THIS sheet after theme.css
 * gets the readable version: today admin, em, operator, mm, po/checklist,
 * po/communications and the kp feature pages (`git grep -l shared/styles/forms.css` lists
 * them). A page that does not link it (subscription and links.html, for example) keeps the
 * theme.css look. */
.field {
  font-size: 13.5px;
  color: var(--kf-label);
  gap: 6px;
}
.input,
.field input:not([type='checkbox']):not([type='radio']):not([type='file']),
.field select,
.field textarea {
  border-color: var(--kf-border);
  background: #fff;
  color: var(--kf-ink);
  font-size: 14px;
}
.input:not(textarea),
.field input:not([type='checkbox']):not([type='radio']):not([type='file']),
.field select {
  min-height: 40px;
}
.input:focus-visible,
.field :is(input, select, textarea):focus-visible {
  outline: 3px solid var(--kf-focus);
  outline-offset: 2px;
}
.field .kf-help,
.field small {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--kf-help);
}
.field [aria-invalid='true'],
.input[aria-invalid='true'] {
  border-color: var(--kf-error);
  box-shadow: 0 0 0 1px var(--kf-error);
}