/* ── Forms ────────────────────────────────────────────────────────────── */
form .field { margin-bottom: 14px; }
form label { display: block; margin-bottom: 5px; color: var(--muted); font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; letter-spacing: .6px; text-transform: uppercase; }
/* `min-width: 0` is stated here, once, because it is a fact about controls rather
   than about any screen: a control's *automatic* minimum is its content — for a
   `<select>` the widest option, and the options in this app are «логін — звання
   Прізвище Ім'я Батькович» — so a control in a shrinking flex row or an `auto`-min
   grid track refuses to go below ~376px and pushes the whole page past the viewport
   sideways. `width: 100%` above already makes the intended size definite, so nothing
   is left to the automatic minimum. It had been rediscovered per control (the
   specialisation picker's toolbar, the check-tree search, the search modal's date
   ranges) and the fourth site to need it was a rule that *removed* a `max-width` and
   did not know it was removing the only cap. */
input, select, textarea {
  width: 100%; min-width: 0; padding: 9px 11px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border-bright); border-radius: var(--radius); font-size: 14px; font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-2); }
/* Mobile Safari auto-zooms into any field whose font-size is below 16px on focus,
   and initial-scale=1 never zooms back out — leaving the page stuck magnified.
   Bump text fields to 16px on touch/narrow screens to suppress the auto-zoom while
   keeping manual pinch-zoom intact (unlike a maximum-scale viewport lock). */
@media (max-width: 640px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
}
/* Checkbox/radio are not text fields — exempt them from the full-width fill above
   (a width:100% checkbox stretches and drifts to the centre of its row). */
/* Native controls, painted with the palette's accent instead of the browser's own
   blue — an #0b57d0 tick in an olive/khaki interface reads as a control belonging
   to some other application. `accent-color` is the whole of it: the box keeps its
   platform shape, focus ring and keyboard behaviour, which a hand-rolled
   pseudo-element checkbox would have to reimplement. Set once, globally, because
   there is no checkbox in this app that should be blue. */
input[type="checkbox"], input[type="radio"] {
  width: auto; padding: 0; accent-color: var(--accent);
}
/* A boolean field renders inline — the box beside its label, left-aligned — rather
   than the stacked label-above-control used for text inputs (see _field_row.html). */
.field-check {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 0; cursor: pointer;
  text-transform: none; letter-spacing: 0; font-size: 14px; font-family: inherit; color: var(--text);
}
.field-check input[type="checkbox"] { width: 16px; height: 16px; flex: none; margin: 0; }
/* Native <select> wears the same custom down-chevron as the picker comboboxes, so
   every dropdown-like control carries the identical arrow. appearance:none drops
   the OS arrow; the shared `--field-arrow` (themes.css) is painted in its place. */
select {
  appearance: none; -webkit-appearance: none;
  background-image: var(--field-arrow);
  background-repeat: no-repeat; background-position: right 11px center; background-size: 12px 12px;
  padding-right: 32px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
/* A group heading inside a form (`form.field_sections`) is the shared `.eyebrow` — the
   app's one section-label voice, already over every panel head, import block and
   settings section. All this adds is the rule that separates the group from the block
   above it: a line rather than a box, because the fields below stay in the same grid,
   so a group is a break in the reading order and not a second panel inside the form. */
.form-grid > .eyebrow {
  margin: 14px 0 12px; padding-top: 14px; border-top: 1px solid var(--border);
}
.help, .errorlist { font-size: 12px; }
.errorlist { color: var(--danger); list-style: none; padding: 0; margin: 4px 0 0; }
.actions { margin-top: 18px; display: flex; gap: 10px; }
/* For a form whose own submit scrolls out of reach — the role matrix runs a
   screen or two past it. The bar rides the bottom of the viewport, with the page
   background carried under it so the panels don't show through, and the negative
   side margins let it span the content column's padding rather than floating in
   the middle of it.

   No `backdrop-filter` here, for the reason the modal backdrop gives: it is
   GPU-heavy on weak machines — and this element repaints on every scroll frame,
   where the modal's would cost once. The gradient is opaque for its lower half
   and 82% opaque above, so a blur behind it was invisible anyway. */
.actions-sticky {
  position: sticky; bottom: 0; z-index: 5;
  margin: 18px -4px -4px; padding: 12px 4px;
  background: linear-gradient(to top,
    var(--bg) 55%, color-mix(in srgb, var(--bg) 82%, transparent));
}
.linklike {
  background: none; border: 0; padding: 0; width: auto; cursor: pointer;
  color: var(--accent-2); font: inherit; text-decoration: underline;
}
.linklike:hover { color: var(--text-strong); }

/* ── Tabbed form (Person modal) ───────────────────────────────────────── */
.tab-bar {
  display: flex; gap: 2px; flex-wrap: wrap;
  margin: 0 0 18px; border-bottom: 1px solid var(--border);
}
.tab-bar .tab {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--muted); cursor: pointer; width: auto;
  padding: 9px 14px; margin-bottom: -1px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .6px; text-transform: uppercase; transition: color .12s, border-color .12s;
}
.tab-bar .tab:hover { color: var(--text); }
.tab-bar .tab.is-active { color: var(--accent-2); border-bottom-color: var(--accent-2); }
/* A tab whose panel holds an unfilled required field gets a warning dot. */
.tab-bar .tab.has-error { color: var(--danger); }
.tab-bar .tab.has-error::after {
  content: ""; display: inline-block; margin-left: 6px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--danger);
  vertical-align: middle;
}
.tab-bar .tab.has-error.is-active { border-bottom-color: var(--danger); }

/* "What's missing to save" summary, injected above the tabs on a failed save. */
.form-missing {
  margin: 0 0 16px; padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.form-missing-title { margin: 0 0 6px; font-weight: 600; color: var(--danger); }
.form-missing ul { margin: 0; padding-left: 18px; }
.form-missing li { margin: 2px 0; }
.form-missing .linklike { color: var(--danger); }
.form-missing .linklike:hover { color: var(--text-strong); }

.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* ── Photo uploader ───────────────────────────────────────────────────── */
.photo-uploader {
  display: flex; gap: 16px; align-items: stretch;
  padding: 14px; border: 1px dashed var(--border-bright);
  border-radius: var(--radius); background: var(--bg); transition: border-color .12s, background .12s;
}
.photo-uploader.is-dragover { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 6%, transparent); }
.photo-preview {
  flex: none; width: 120px; height: 120px; border-radius: var(--radius);
  border: 1px solid var(--border); overflow: hidden; background: var(--panel-2);
  display: flex; align-items: center; justify-content: center;
}
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-ph {
  color: var(--muted); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .6px; text-transform: uppercase;
}
.photo-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.photo-hint { margin: 0; font-size: 13px; color: var(--text); line-height: 1.5; }
.photo-body .help { margin: 0; }
.photo-clear { align-self: flex-start; margin-top: 4px; }
/* Native file input is driven via the "оберіть файл" / drop zone, not shown raw. */
.photo-uploader input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (max-width: 520px) {
  .photo-uploader { flex-direction: column; align-items: center; text-align: center; }
}