/* auth-fields.css — the two places the backoffice's floating label does not
 * land correctly on an auth page. Loaded by auth-service ONLY.
 *
 * ## Why this file exists at all
 *
 * admin-fields.css still opens with "backoffice only … the login pages keep the
 * label-above field". That stopped being true on 2026-08-25, when the login
 * redesign linked it — together with admin-field-wrapping and -states — into
 * auth-service's shared `head`. The floating label is now the auth surface's
 * idiom too, deliberately: one product, one field. What was missing was the
 * other half of the contract, `placeholder=" "` on every labelled control, and
 * without it `:placeholder-shown` never matched, so the label floated over an
 * EMPTY box on every auth page, forever. That half is fixed in the templates.
 *
 * What is left are two constants that were measured against the backoffice and
 * do not transfer. They are corrected HERE rather than in admin-fields.css for
 * two reasons: that file is at 189 of its 200 allowed lines, and its geometry
 * was verified by measurement on backoffice screens (`docs/e2e/form-field-
 * enhancements/`). Re-tuning it for a surface that was not in that evidence set
 * is how the last five label fixes each needed a sixth. */

/* ---- 1. A centred value needs a centred label -----------------------------
 * `.otp-code` (admin-field-states.css) and `.input-otp` (auth.css) both centre
 * their value and track it out — a six-digit code is read back digit by digit
 * against a phone screen. The label kept the left inset every other field uses,
 * so it sat nowhere near the value it names, at rest AND floated.
 *
 * `inset-inline: 0` replaces the base rule's single `inset-inline-start`, which
 * is why `max-width` has to be restated: the base value reserves the two 14px
 * insets this rule no longer has. */
.field:has(> :is(.otp-code, .input-otp)) > label:not(:has(:is(input, select, textarea, button, a))) {
  inset-inline: 0;
  max-width: 100%;
  text-align: center;
}

/* ---- 2. The group idiom's value starts at 13px, not 14px ------------------
 * forms.css pads `.input-group` by 0.8125rem and admin-fields.css keeps that
 * (its own comment explains why the padding stays symmetric). The label's
 * 0.875rem was written for the OTHER idiom, `.field > input`, whose control
 * carries 14px of its own. On a form that mixes the two — this one: a bare code
 * input above two password groups — the label sat 1px right of its value in the
 * groups and flush in the bare field. Name the group's number for the group.
 *
 * Scoped to the auth surface on purpose. The backoffice has the same 1px, and
 * the same fix would be correct there, but it belongs in a change that re-runs
 * that surface's measurements rather than riding along with this one. */
.field:has(> .input-group) > label:not(:has(:is(input, select, textarea, button, a))) {
  inset-inline-start: 0.8125rem;
}