/* admin-field-wrapping.css — the OTHER label idiom.
 *
 * Split from admin-fields.css, which is at the ≤200 LoC cap, and split here
 * because this is a real seam rather than an arbitrary cut: that file styles a
 * label positioned OVER its control, this one styles a label that CONTAINS it.
 *
 * 12 fields are this shape, plus the two `.field-row`s. They exist because they
 * render inside `{{range}}` loops and repeated `{{define}}` blocks, where a
 * static id would emit DUPLICATE IDS — a worse bug than the one `for=` fixes.
 * Containment associates the label instead, so no id is needed.
 *
 * A wrapping label cannot be positioned over what it contains, so it renders
 * permanently where a floated label ends up, and the two idioms look alike.
 *
 * MUST LOAD AFTER admin-fields.css: the `.input-group` rule at the bottom undoes
 * a `display: block` this file itself sets a few lines above. */

/* ---- idiom B: the wrapping label -----------------------------------------
 * Permanently in the floated position, and typographically identical to it. */
.field:has(> label :is(input, select, textarea, button, a)) > label,
.field-row > label:has(:is(input, select, textarea, button, a)) {
  display: block;
  font-size: var(--sn-type-overline-size);
  font-weight: var(--sn-type-overline-weight);
  letter-spacing: var(--sn-type-overline-tracking);
  text-transform: var(--sn-type-overline-transform);
  color: var(--sn-on-surface-variant);
}
.field:has(> label :is(input, select, textarea, button, a)) > label > :is(input, select, textarea, .input-group),
.field-row > label:has(:is(input, select, textarea, button, a)) > :is(input, select, textarea, .input-group) {
  display: block;
  margin-top: 0.375rem;
  font-size: var(--sn-type-body-1-size);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--sn-on-surface);
}
/* …except an .input-group, which is a flex row of icon + control. It is in the
 * list above for the margin and the type reset only — `display: block` stacks
 * the icon on its own line. Four fields are this shape: a wrapping label AROUND
 * a group (settings.html ×3, calendar_ops.html). Declared after, to win. */
.field:has(> label :is(input, select, textarea, button, a)) > label > .input-group,
.field-row > label:has(:is(input, select, textarea, button, a)) > .input-group { display: flex; }

/* ONE box height across both idioms. forms.css sizes a bare .input-group at the
 * 38px control height, and bo-select.css sizes a bare .dd-btn the same — but the
 * sibling idiom's box is 48px, so a form mixing the two rendered two different
 * field heights side by side. These need no label room (the label is a block
 * ABOVE them, not floating over), so they take the height and keep the symmetric
 * padding they already have. Declared here rather than in bo-select.css, which
 * is at the LoC cap; specificity carries it past that file's later `.dd-btn`. */
.field:has(> label :is(input, select, textarea, button, a)) > label > .input-group,
.field:has(> label :is(input, select, textarea, button, a)) > label > .dd > .dd-btn,
.field-row > label:has(:is(input, select, textarea, button, a)) > .input-group,
.field-row > label:has(:is(input, select, textarea, button, a)) > .dd > .dd-btn {
  min-height: 3rem;
}
.field:has(> label :is(input, select, textarea, button, a)):focus-within > label,
.field-row > label:has(:is(input, select, textarea, button, a)):focus-within { color: var(--sn-primary-text); }