/* ==========================================================================
   ONE FORM FIELD FOR THE WHOLE SITE — 09/25/2026, THE FORM-FIELD ROUND.

   ⛔ SCOTT ASKED FOR EVERY FORM FIELD TO BE STANDARDIZED AND PICKED
   `1A 2A 3A 4A 5A 6A 7A` from `claude/FORM-AUDIT-2026-09-25.md`. His words on
   this round, VERBATIM: "make sure these instructions are detailed as hell, I
   don't want to go back and redo anything, I am trying to standardize this
   site and I am tired of going back to fix random formatting issues."

   ⚠️ WHAT THE AUDIT MEASURED ON 65 PAGES, 09/25/2026: 1,277 fields in
   THIRTY-SIX box looks (nine heights, six text sizes, five edges), TWENTY
   label styles, 170 boxes with no label, 304 labels not wired to their box,
   five checkbox sizes in two colours, and two pages showing the browser's own
   black focus outline.

   ✅ HIS PICKS, AND THEY ARE THE ONLY NUMBERS HERE (each is a token):
     1A  40px tall on a screen (`--field-h`), 44 on a phone, 48 on the two
         phone-shaped forms
     2A  no border; a 1px ring drawn as a shadow (`--sh-key`) plus `--sh-1`;
         6px corners (`--r-sm`) -- the look 61 pages already had
     3A  the label 13px / 600 / `--slate-600`
     4A  the label ABOVE its box, 6px apart; short fields two across
     5A  every box gets a real label; hint text inside only as an example
     6A  a 16px checkbox, words to the right, one <label> wrapping both --
         since 09/30/2026 the site's own box (Scott's "1b", section 6)
     7A  a red * after the label of every required field

   ⛔ THIS FILE IS SERVED AFTER `buttons.css`, `headings.css` AND `spacing.css`
   FOR THE SAME REASON EACH OF THOSE SITS AFTER THE ONE BEFORE: the rules it
   has to beat are spread across three older stylesheets at equal or lower
   weight, and source order settles a tie. ⛔ NOTHING ELSE IN THE REPO MAY SET
   A FIELD'S HEIGHT, EDGE, CORNER, TEXT SIZE OR LABEL; the field ratchet counts
   the looks the browser draws and refuses more than one.
   ========================================================================== */

/* ==========================================================================
   1. THE BOX — one selector list, written once.
   ⛔ `input[type=date]` AND `input[type=time]` ARE IN IT ON PURPOSE. The hidden
   halves of a date combo are 1px tall and do not matter; Call-Offs' dates and
   the incident form's date and time are VISIBLE native boxes and take the
   standard like everything else.
   ========================================================================== */
input:where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not([type=hidden])),
select:where(:not([multiple])),
textarea,
.ds-input {
  /* ⛔ `:where()` AROUND THE EXCLUSIONS. A `:not()` chain RAISES specificity
     (the button round's trap 2): written bare, this rule was 0-9-1 and its
     `!important` text size beat `input.alink-title-input`'s own -- the
     Administrator Dashboard's section titles drew as 14px/400 boxes (MEASURED
     09/25/2026). Inside `:where()` the exclusions still exclude and the rule
     weighs 0-0-1, so a named rule with the same `!important` wins as it should. */
  /* ⛔ `!important` ON THE FOUR THAT ARE THE DECISION -- height, text size,
     edge, corner -- AND NOTHING ELSE. MEASURED 09/25/2026 after this file
     first shipped: the Playbook and the email pages still drew 13px text, the
     Contacts tab a 30px dropdown and the phone assessment a 10px-cornered
     bordered box, each set by a page two or three classes deep. The shadow is
     NOT important, because hover, focus, the pencil lock and the note box's
     rest state all change it on purpose. */
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0 var(--field-pad-x);
  font: inherit;
  font-size: var(--field-fs) !important;
  line-height: 1.3;
  color: var(--text);
  background-color: var(--surface);
  /* 2A: the ring, not a border. */
  border: 0 !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--sh-key), var(--sh-1);
  appearance: none;
  -webkit-appearance: none;
}
/* The height, for everything in the list EXCEPT a note box. ⛔ A textarea's
   height is set in section J below and, for the boxes that grow with what is
   typed, by form-helpers.js on the element itself -- an `!important` height
   here beat that inline style and every filled-in note on the Care Plan tab
   showed its first line only. MEASURED 09/25/2026: 152px of note in a 92px
   box, 456px in a 40px one. */
input:where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not([type=hidden])),
select:where(:not([multiple])),
.ds-input:where(:not(textarea)) {
  height: var(--field-h) !important;
}
/* ⛔ SAID AGAIN ONE CLASS DEEPER, FOR THE FIELDS INSIDE A .ds-field. MEASURED
   09/25/2026: style-v2.css's `.ds-field input[type=text], .ds-field select,
   .ds-field textarea { border: 1px solid; box-shadow: none }` is 0-2-1 -- the
   rulebook's old flat-border look -- and it out-weighs the plain selector
   above whatever the source order, so every note box inside a .ds-field lost
   its edge (Add a resident, Edit resident, the Move-Out tab, the move-in
   sheet, the waitlist move-in). The same one class deeper, and the tie is
   settled by order again. */
.ds-field input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
.ds-field select:not([multiple]),
.ds-field textarea,
.ds-field .ds-input {
  box-shadow: var(--sh-key), var(--sh-1);
  background-color: var(--surface);
}
@media (hover: hover) {
  .ds-field input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):hover,
  .ds-field select:not([multiple]):hover,
  .ds-field textarea:hover { box-shadow: var(--sh-key-2), var(--sh-1); }
}
.ds-field input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):focus-visible,
.ds-field select:not([multiple]):focus-visible, .ds-field select:not([multiple]):focus,
.ds-field textarea:focus-visible, .ds-field textarea:focus {
  outline: none; box-shadow: var(--sh-ring); background-color: var(--surface);
}

/* ⚠️ Numbers in a box line up: a rate column is read down, not across. */
input[type=number], input[inputmode=decimal], input[inputmode=numeric] {
  font-variant-numeric: tabular-nums;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { appearance: none; -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* J. A note box is four lines, grows by hand, and its text has room to
   breathe. ⛔ `!important` ONLY ON THE BOXES THAT DO NOT GROW BY SCRIPT: a box
   marked `data-autogrow` is sized by form-helpers.js on the element itself,
   and an `!important` height here silently switched that off for all of
   them (MEASURED 09/25/2026 -- see the height rule in section 1). */
textarea {
  height: auto;
  min-height: var(--textarea-min-h);
  padding: 8px var(--field-pad-x);
  line-height: 1.45;
  resize: vertical;
}
textarea:not([data-autogrow]) { height: auto !important; }

/* 3. Placeholder: the same grey in every browser -- Firefox lowers the
   opacity on its own and the words went paler there than in Chrome. */
::placeholder { color: var(--text-muted); opacity: 1; }

/* ==========================================================================
   2. HOVER, FOCUS, DISABLED, READ-ONLY, INVALID — §4 rules D, E, G, I.
   ⛔ `:focus-visible`, NOT `:focus`, AND `outline: none` IN THE SAME RULE.
   The phone assessment and the incident form showed the browser's 1px black
   outline because their own stylesheets never said otherwise; it goes here,
   once, in the rule that puts the ring in its place.
   ⛔ `background-color`, NEVER `background`: the `background` SHORTHAND
   resets the dropdown arrow's size and position, and on 09/18/2026 that put
   two 5px triangles across a whole box ("the whole box is turning green").
   ========================================================================== */
@media (hover: hover) {
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not([type=hidden]):hover,
  select:not([multiple]):hover,
  textarea:hover,
  .ds-input:hover {
    box-shadow: var(--sh-key-2), var(--sh-1);
  }
}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not([type=hidden]):focus-visible,
select:not([multiple]):focus-visible,
textarea:focus-visible,
.ds-input:focus-visible {
  outline: none;
  border-color: transparent;
  background-color: var(--surface);
  box-shadow: var(--sh-ring);
}
/* ⚠️ Chromium shows :focus-visible on a text box for a mouse click too, which
   is what we want; a <select> opened by mouse does not always, so the plain
   :focus keeps the ring on dropdowns and note boxes as well. */
select:not([multiple]):focus, textarea:focus { outline: none; box-shadow: var(--sh-ring); }

/* G. Disabled and read-only: quieter, never `pointer-events: none` -- that
   killed a tooltip and a CI run (DESIGN-NOTES). */
input:disabled, select:disabled, textarea:disabled, .ds-input:disabled,
/* ⚠️ `.sp-input` IS NOT READ-ONLY TO THE EYE. The staff picker's drawn box is
   marked readOnly on a touch screen so the keyboard stays down (the list is
   tapped, not typed into); it is still the box people tap, and it takes the
   standard box like any other. MEASURED 09/25/2026 at 390px: every picker box
   on Staffing Stats and the incident form drew grey, as if disabled. */
input[readonly]:not(.date-combo-text):not(.sp-input), textarea[readonly] {
  background-color: var(--surface-2);
  color: var(--text-muted);
  box-shadow: var(--sh-key);
  cursor: not-allowed;
}
input:disabled:hover, select:disabled:hover, textarea:disabled:hover { box-shadow: var(--sh-key); }

/* I. Invalid: one rule, at rest and on focus, and the message under the box.
   The older `.is-invalid:focus, input.date-bad:focus` in style-v2.css folds
   into this. */
.is-invalid, input.date-bad, textarea.is-invalid, select.is-invalid {
  box-shadow: 0 0 0 1px var(--danger) !important;
  background-color: var(--danger-bg) !important;
}
.is-invalid:focus, input.date-bad:focus, .is-invalid:focus-visible, input.date-bad:focus-visible {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--danger) !important;
}

/* ==========================================================================
   3. THE DROPDOWN ARROW — moved here from style-v2.css verbatim, with its
   :focus pairing and its reason. 09/18/2026, Scott, with two screenshots:
   "a number of dropdowns are doing this, when you select the item in the
   dropdown, the whole box is turning green." MEASURED: the shared :focus
   rules set the `background` SHORTHAND, which resets size, position and
   repeat -- the old focus fix put back only the image, so the two 5px arrow
   triangles grew to fill the whole box, repeated. One rule for both states,
   so the arrow can never lose its size again.
   ========================================================================== */
select:not([multiple]), select:not([multiple]):focus, select:not([multiple]):focus-visible {
  -webkit-appearance: none; appearance: none;
  background-image: var(--select-arrow);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
  text-overflow: ellipsis;
}
/* THE CLOSED DROPDOWN READS LIKE THE EMPLOYEE PICKER'S BOX (Scott, 10/02/2026:
   every dropdown "the same look and feel of the employee or resident selection
   dropdowns"): what is chosen in semibold, a dropdown still on its blank
   "Choose" line in the quieter placeholder color. The list it opens is
   staff-picker.js's. Said one class deeper for .ds-field, as section 1 does. */
select:not([multiple]), .ds-field select:not([multiple]) { font-weight: 600; }
/* ON A TOUCH SCREEN A DROPDOWN LETS THE TAP THROUGH, so the phone never focuses
   it and never opens its own wheel over the styled list (Scott, 10/02/2026, on
   his iPhone). staff-picker.js matches the tap to the dropdown under it. A
   dropdown the styled list does not serve keeps its own tap. */
@media (pointer: coarse) {
  select:not([multiple]):not([size]):not([data-native-select]):not([data-staff-picker]):not(.dp-select):not(:disabled) {
    pointer-events: none; }
}
select:not([multiple]):has(> option[value=""]:checked),
.ds-field select:not([multiple]):has(> option[value=""]:checked) { font-weight: 400; color: var(--text-muted); }

/* ==========================================================================
   4. THE LABEL, THE HELP, THE REQUIRED MARK — 3A, 4A, 7A.
   ========================================================================== */
.ds-field { min-width: 0; display: grid; row-gap: var(--label-gap); }   /* the grid is the label gap -- see below */
/* ⛔ THE BRIDGE, the same argument the button and heading rounds rested on:
   the old classes already say "this is a box's label", so naming them here
   converts every page at once while the markup moves onto c_ds_field group
   by group. A label that WRAPS a checkbox is not in this list -- that is 6A's
   own rule below. */
.ds-field > label,
label.ds-label, .ds-label,
label:has(+ input:not([type=checkbox]):not([type=radio])),
label:has(+ select), label:has(+ textarea), label:has(+ .date-combo), label:has(+ .time-combo),
.ap-q, .ir-q, .ap-lab, .skin-lab, .kv-trio-label, .iv-alabel, .cl-field > label, label.wk-f, .wk-f-lbl, label.pb-vf, .au-note-label,
.alink-add-title, .a-row > label, .wr-lab,
label.muted.small, label.muted.small > span:first-child,
.wr-af label, .wr-set label {
  display: block;
  margin: 0 0 var(--label-gap);
  font-size: var(--label-fs) !important;
  font-weight: var(--label-fw) !important;
  line-height: 1.3;
  color: var(--label-color) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* ⛔ AND A LABEL THAT FOLLOWS ANOTHER FIELD'S BOX STANDS CLEAR OF IT. The rule
   above gives these labels no top margin, so on the phone assessment "Date of
   birth" sat ON the bottom line of the Resident name box (Scott, 10/02/2026:
   "it basically touches the field above ... we need a tad bit more room").
   MEASURED 0px there; the form's own row gap now. */
/* (`body.phone-form` in front so it outweighs the label rule above, whose
   `label:has(+ input…)` form is heavier than a plain pair of classes.) */
:is(input, select, textarea, .ir-chips, .date-combo, .time-combo, .addr-ac-note) + :is(.ap-q, .ap-lab, .ir-q),
body.phone-form :is(input, select, textarea, .ir-chips, .date-combo, .time-combo, .addr-ac-note) + :is(.ap-q, .ap-lab, .ir-q) {
  margin-top: var(--form-gap);
}
/* ⛔ INSIDE A .ds-field THE GRID IS THE GAP. The field is a one-column grid
   with `row-gap: var(--label-gap)`, so its label carries no margin of its own.
   MEASURED 09/25/2026 on Add a resident: a REQUIRED label matched the
   `label:has(+ input…)` form of the rule above, which out-weighs the field's
   own reset in spacing.css, and sat 12px over its box against 6 for the rest.
   `!important` because the gap is decision 3A, and this is the one place two
   rules of different weight both reach the same label. */
.ds-field > label, .ds-field > .ds-label { margin: 0 !important; }
/* A label that WRAPS its box (the Weekly Report's cells, the Playbook's and
   Groceries' compact rows) is the label for its words only: the box inside
   keeps the box's own 14px, and `display: block` on the wrapper is what puts
   the words above the box. */
label.wk-f, label.muted.small { display: block; }
label.wk-f > input, label.wk-f > select, label.muted.small > input, label.muted.small > select {
  font-size: var(--field-fs) !important; font-weight: 400; margin-top: var(--label-gap);
}
.ds-req { color: var(--danger); margin-left: 2px; font-weight: 700; }
.ds-help {
  display: block;
  margin: var(--help-gap) 0 0;
  font-size: var(--help-fs);
  line-height: 1.35;
  color: var(--text-muted);
}
/* G. A value that is meant to READ as text is not a disabled box. */
.ds-readonly { min-width: 0; }
.ds-readonly > .ds-readonly-value { font-size: 14px; line-height: 20px; color: var(--text); }
/* H. A unit beside the box -- $ before, % after -- is a mark inside the field
   (c_ds_field prefix= / suffix=, 09/28/2026). The box is still the one box. */
.ds-affix { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ds-affix > :is(input, select) { flex: 1 1 auto; min-width: 0; }
.ds-affix-mark { flex: none; font-size: 14px; font-weight: 600; color: var(--text-subtle); }

/* ==========================================================================
   5. THE FORM — 4A: short fields two across, a note box the full width, the
   actions row under the last field, right-aligned.
   ⚠️ ONE COLUMN BETWEEN 761 AND 1024 ON THE PROFILE TABS' SIDE PANELS (they
   are half-width there) and everywhere on a phone.
   ========================================================================== */
.ds-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--form-gap) var(--form-col-gap);
  align-items: start;
}
.ds-form > .ds-field.ds-wide,
.ds-form > .ds-wide,
.ds-form > h1, .ds-form > h2, .ds-form > h3, .ds-form > p, .ds-form > .ds-sub, .ds-form > fieldset,
.ds-form > .ds-form-actions,
.ds-form > .ds-checks,
.ds-form > .ds-field:has(> textarea),
.ds-form > .ds-field:has(> .ds-checks) { grid-column: 1 / -1; }
/* ⛔ FIELDS STACKED WITH NO FORM GRID AROUND THEM KEEP THE SAME GAP. Scott,
   10/02/2026, of Move-In: "the field called last name basically touches the
   bottom of the first name box right above it ... can you check the entire site
   and fix this." A `.ds-form` spaces its fields with its own row gap; fields
   put straight into a section's body (Move-In, the Walmart upload) had no gap
   at all -- MEASURED 0px on every one of them. */
/* ⚠️ ONLY A FORM WITH NO CLASS OF ITS OWN. A form that has one (`rec-form`,
   `fa-addgrid`, ...) lays its fields out itself, in a grid or a row, and a
   margin there pushes one field of a pair down past its neighbour. */
.ds-section-body > .ds-field + .ds-field,
.ds-section-body > form:not([class]) > .ds-field + .ds-field { margin-top: var(--form-gap); }
.ds-form-actions {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: calc(var(--inside-gap) - var(--form-gap));
}
.ds-form > h3.panel-subheading { margin: var(--section-gap) 0 0; }
.ds-form > h3.panel-subheading:first-child { margin-top: 0; }
/* The Interviewees add form's rows were a label column beside the control
   (`.iv-arow { display: flex }`); as .ds-field rows the label sits above. */
.ds-field.iv-arow, .ds-field.iv-arow.iv-awide { display: block; }
.ds-field.iv-arow > .iv-alabel { width: auto; min-width: 0; flex: none; text-align: left; padding-top: 0; }
.ds-field.iv-arow > .iv-actrl { min-width: 0; }

/* The record forms (Waitlist & Tours, Waitlist entry, Edit tour, the Documents
   tab's upload row) are the same grid; their rows used to be a label column
   beside a box column (4B) and are the standard field now. */
form.rec-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--form-gap) var(--form-col-gap); align-items: start; }
form.rec-form > .rec-row.ds-field { display: block; grid-template-columns: none; }
form.rec-form > .rec-row.ds-field > label { text-align: left; padding: 0; }
form.rec-form > .rec-wide, form.rec-form > .rec-actions, form.rec-form > .ds-wide { grid-column: 1 / -1; }
form.rec-form > .rec-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-left: 0 !important; padding-left: 0 !important; }
@media (max-width: 1024px) {
  .profile-panel .ds-form, .rp-side .ds-form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  form.rec-form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ds-form { grid-template-columns: minmax(0, 1fr); }
  .ds-form > .ds-field { grid-column: 1 / -1; }
}

/* ==========================================================================
   6. CHECKBOXES AND RADIO BUTTONS — THE SITE'S OWN BOX (Scott, 09/30/2026,
   "1b": option B of `pictures/R2B/choices/checkbox-radio-B-1440.png`).
   A square the site draws itself: a gray edge, teal with a white tick when
   ticked; a circle with a thick teal ring when chosen; pale gray when locked.
   The same on every browser. The words to the RIGHT, one <label> wrapping
   both (6A). No page draws its own tick box; `c_ds_check` is the part.
   ========================================================================== */
input[type=checkbox], input[type=radio] {
  /* `!important` on the size and the look only: pages two classes deep once
     set six sizes and two colours here (MEASURED 09/25/2026). No `display` or
     `position` here -- a hidden mechanism keeps its own (menu, switch, fold). */
  width: var(--check-size) !important;
  height: var(--check-size) !important;
  min-height: 0;
  margin: 0;
  padding: 0;
  flex: none;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box;
  border: 1.5px solid var(--slate-300) !important;
  border-radius: var(--r-xs) !important;
  background: var(--surface) !important;
  box-shadow: none;
  cursor: pointer;
  vertical-align: middle;
}
input[type=radio] { border-radius: 50% !important; }
input[type=checkbox]:checked {
  background: var(--teal-600) !important;
  border-color: var(--teal-600) !important;
}
input[type=checkbox]:checked::after {
  content: ""; display: block; box-sizing: content-box;
  width: 3px; height: 7px; margin: 1px auto 0;
  border: solid var(--text-onbrand); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type=radio]:checked { border: 5px solid var(--teal-600) !important; }
input[type=checkbox]:disabled, input[type=radio]:disabled {
  background: var(--slate-100) !important;
  border-color: var(--slate-150) !important;
  cursor: default;
}
input[type=checkbox]:checked:disabled { background: var(--slate-300) !important; border-color: var(--slate-300) !important; }
input[type=radio]:checked:disabled { border-color: var(--slate-300) !important; }
/* ⚠️ A PILL TOGGLE HIDES ITS RADIO ON PURPOSE -- the Interviewees shift and
   ranking bubbles, the incident form's chips -- and shows the words as the
   control. Sizing that hidden radio to 16px put it back on the page and
   pushed the words to the top of the pill (MEASURED in the round's own
   screenshot). Those are chips (part 9, out of this round's scope); the
   control under them stays hidden. */
label.iv-pick-opt > input[type=radio], label.iv-pick-opt > input[type=checkbox],
.ir-chips input[type=radio], .ir-chips input[type=checkbox],
.ap-chips input[type=radio], .ap-chips input[type=checkbox] {
  position: absolute; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none;
}
label.iv-pick-opt { position: relative; display: inline-flex !important; align-items: center; justify-content: center; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible {
  outline: none;
  box-shadow: var(--sh-ring);
  border-radius: 3px;
}
input[type=radio]:focus-visible { border-radius: 50%; }
label.ds-check,
label.cp-opt,
label.check-label,
label.checkbox-label,
.ds-checks > label {
  display: inline-flex;
  align-items: center;
  gap: var(--check-gap);
  min-height: 24px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.ds-checks { display: flex; flex-wrap: wrap; gap: 8px 20px; }
@media (max-width: 760px) {
  /* K. On a phone each option is a 44px tap row -- the control stays 16px,
     the label is the target. */
  label.ds-check, label.cp-opt, label.check-label, label.checkbox-label, .ds-checks > label { min-height: 44px; }
  /* ⚠️ EXCEPT INSIDE A PENCIL-LOCKED SECTION -- the Care Plan and Profile
     tabs -- where the options are read far more often than tapped and Scott
     asked on 09/24/2026 for the tab CONDENSED on a phone, with a ceiling on
     its height (`tests/care_plan_phone_density_test.py`). MEASURED: 44px rows
     there added 150px to a tab he had just asked to shorten. Rule K's tap
     row and his density request disagree on this one tab; his decision came
     first and is the one with a test. Listed for him at the round's end. */
  [data-rp-lock] label.cp-opt, [data-rp-lock] label.cp-tick { min-height: 0; }
}

/* ==========================================================================
   7. THE SEARCH BOX — L: the standard box with the magnifier on the left.
   ========================================================================== */
.ds-search { position: relative; display: block; }
.ds-search > input,
.ds-search > input[type=search] { padding-left: 34px; }
.ds-search > .ds-search-ico {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-muted); pointer-events: none;
}
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ==========================================================================
   8. THE DATE / TIME COMBO — the text half IS the standard box (it is an
   `<input type=text>` and takes section 1); the picker BUTTON is out of scope
   but must be the box's height or the pair is not level. Today the pair was
   level only because both happened to be 32px.
   ========================================================================== */
.date-combo, .time-combo { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.date-combo > .date-combo-text, .time-combo > .time-combo-text { flex: 1 1 auto; min-width: 0; }
.date-combo > .date-combo-btn, .time-combo > .time-combo-btn {
  /* ⛔ `!important`: MEASURED on Call-Offs, the button sat 4px off the text
     box's centre line because the page sizes its own picker button
     (`tests/date_combo_align_test.py`). The pair is level or it is wrong. */
  height: var(--field-h) !important; min-height: var(--field-h) !important; flex: none;
}

/* ==========================================================================
   9. THE PENCIL-FIRST LOCK AND THE READ-AS-TEXT BOXES — rule H.
   At rest they read as plain text; unlocked or hovered they are the standard
   box. ⛔ THESE ARE THE ONLY FIELDS ALLOWED TO HAVE NO EDGE, and the field
   ratchet excludes exactly these selectors and no others.
   ========================================================================== */
[data-rp-lock]:not(.rp-unlocked) :is(input, select, textarea):not([data-rp-free] *):not([type=checkbox]):not([type=radio]) {
  background-color: transparent;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
  cursor: default;
}
[data-rp-lock]:not(.rp-unlocked) select:not([data-rp-free] *) { background-image: none; }
/* ⛔ AND UNLOCKED, THE ARROW COMES BACK. MEASURED 09/25/2026: six dropdowns on
   the Profile and Care Plan tabs had no arrow while UNLOCKED too, because the
   lock rule's `appearance: none; background-image: none` was the last word
   on them. Section 3 above is now the last word, and this says so again for
   the unlocked state so no later rule can take it away. */
[data-rp-lock].rp-unlocked select:not([multiple]) { background-image: var(--select-arrow); }
.note-live-textarea, .live-edit .note-live-textarea {
  box-shadow: none; background-color: transparent;
}
/* The Administrator Dashboard's link-group TITLES are the same pencil-first
   idea (rule H): a box that reads as the heading it is until it is touched.
   MEASURED in the round's own screenshot: the standard box put a 40px ring
   around "Staffing & scheduling" and it read as a form, not a heading. */
input.alink-title-input {
  height: auto !important; box-shadow: none; background-color: transparent;
  font-size: 16px !important; font-weight: 800; padding: 1px 6px;
}
input.alink-title-input:hover { background-color: var(--slate-100); box-shadow: none; }
input.alink-title-input:focus, input.alink-title-input:focus-visible {
  background-color: var(--surface); box-shadow: var(--sh-ring); outline: none;
}
/* ⚠️ AND THE READ-AS-TEXT NOTE BOXES KEEP THEIR OWN HEIGHT. Rule J says a note
   box is four lines, and rule H says these read as text until touched -- and
   Scott asked on 09/24/2026 for an EMPTY notes box on the Care Plan tab to be
   one line, not two (`tests/care_plan_phone_density_test.py`). His earlier
   decision wins for exactly these boxes; every other note box is 96px. */
/* `textarea.ds-one-row` (10/09/2026): the assessment's notes boxes, which Scott
   asked to be one row tall -- the same one-line box, grown by the script. */
[data-rp-lock] textarea, .live-edit textarea, .note-live-textarea, textarea.kv-edit, textarea.ds-one-row {
  min-height: 0;
  height: var(--field-h);   /* one line: the box height, until the script measures it */
  /* the padding that makes ONE line of text exactly one box tall, so an
     empty box the script has measured (line + padding + 2) is 40px like the
     input beside it, and a filled one keeps the note box's own 1.45 leading */
  padding-top: calc((var(--field-h) - 2px - 1.45 * var(--field-fs)) / 2);
  padding-bottom: calc((var(--field-h) - 2px - 1.45 * var(--field-fs)) / 2);
}
:is([data-rp-lock] textarea, .live-edit textarea, .note-live-textarea, textarea.kv-edit):not([data-autogrow]) {
  height: var(--field-h) !important;
}
.note-live-textarea:hover { background-color: var(--surface); box-shadow: var(--sh-key-2), var(--sh-1); }
.note-live-textarea:focus, .note-live-textarea:focus-visible { background-color: var(--surface); box-shadow: var(--sh-ring); outline: none; }

/* ==========================================================================
   10. FILE PICKERS — a bare native <input type=file> is never shown; the
   site's own picker (built for Licenses) stands in front of it.
   ========================================================================== */
input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
label.ds-file-pick, label.docs-file-pick, label.pb-file { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
label.ds-file-pick:focus-within, label.docs-file-pick:focus-within, label.pb-file:focus-within { box-shadow: var(--sh-ring); border-radius: var(--r-sm); }

/* ==========================================================================
   11. THE PHONE — 44px boxes, 16px text (under 16 iOS zooms the page); the
   two phone-shaped forms 48px at EVERY width (`body.phone-form`). ⚠️ The
   tokens are redefined on :root inside tokens.css's own media block; this
   file only names the class.
   ========================================================================== */
@media (max-width: 760px) {
  :root { --field-h: var(--field-h-phone); --field-fs: var(--field-fs-phone); }
}
body.phone-form { --field-h: var(--field-h-phone-form); --field-fs: var(--field-fs-phone); }
body.phone-form .ds-field > label, body.phone-form label.ds-label { font-size: var(--label-fs); }

/* ==========================================================================
   12. PRINT — O: a field in a print view is not a field.
   ========================================================================== */
@media print {
  input, select, textarea { box-shadow: none !important; background: none !important; }
  .ds-req { display: none; }
}

/* ------------------------------------------------------------- the switch
   `c_ds_switch`: an on/off control, and the ONE control a band may carry
   (decision 9B, Scott 09/28/2026). 34x20 track, a 16px knob, teal when on;
   on a band it reads white so it sits with the band's buttons. */
.ds-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
             font-size: 13px; font-weight: 600; color: var(--text-muted); user-select: none; white-space: nowrap; }
.ds-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ds-switch-track { position: relative; flex: none; width: 34px; height: 20px; border-radius: var(--r-pill);
                   background: var(--slate-300); }
.ds-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
                          border-radius: 50%; background: var(--surface);
                          box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.ds-switch input:checked + .ds-switch-track { background: var(--teal-700); }
.ds-switch input:checked + .ds-switch-track::after { transform: translateX(14px); }
.ds-switch input:focus-visible + .ds-switch-track { outline: 2px solid var(--teal-700); outline-offset: 2px; }
.ds-switch input:disabled ~ * { opacity: .5; cursor: default; }
.ds-section-head .ds-switch { color: var(--text-onbrand); }
.ds-section-head .ds-switch-track { background: rgba(255, 255, 255, .3); }
.ds-section-head .ds-switch input:checked + .ds-switch-track { background: rgba(255, 255, 255, .92); }
.ds-section-head .ds-switch input:checked + .ds-switch-track::after { background: var(--ds-b, var(--teal-800)); }
.ds-section-head .ds-switch input:focus-visible + .ds-switch-track { outline-color: var(--surface); }
@media (max-width: 760px) {
  .ds-switch { min-height: 44px; }
}

/* ==========================================================================
   ⛔ ONE NAMED EXCEPTION TO THE 40px BOX: THE WAGE REDUCTION ROW'S PAY-METHOD
   PICKER. Scott, 08/08/2026 (BACKLOG 92): "those boxes should be the same size
   as the not paid/paid boxes under final check in the table." The picker is a
   chip in a table row beside a 28px Paid chip, and this sheet's 40px rule had
   quietly made it a form box. tests/wr_browser_check.py 9b measures the two
   against each other. (09/29/2026)
   ========================================================================== */
select.wr-pm, select.wr-pm:focus, select.wr-pm:focus-visible {
  height: 28px !important; min-height: 28px !important;
  font-size: var(--fs-2xs) !important; font-weight: var(--fw-semi); line-height: 1;
  padding: 0 26px 0 10px; border-radius: var(--r-pill);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
}
/* On a phone every control is at least 32px tall (DESIGN-NOTES 8; the Paid
   chip beside it grows the same way). */
@media (max-width: 760px) {
  select.wr-pm, select.wr-pm:focus, select.wr-pm:focus-visible { height: 32px !important; min-height: 32px !important; font-size: var(--field-fs-phone) !important; }  /* 16px: under that iOS zooms the page on tap */
}

/* J. The Social Security number box: covered with dots until clicked, on the profile and the
   assessment (both forms). Moved from style-v2.css so the phone form, which loads only the part sheets, gets it (DQ-8). */
.ssn-box {
  -webkit-text-security: disc;
  text-security: disc;
  letter-spacing: 0.08em;
  width: 140px;
}
.ssn-box.ssn-open {
  -webkit-text-security: none;
  text-security: none;
  letter-spacing: normal;
}

/* K. A tick-off list (Staffing's Find coverage, 10/23/2026; page_spec._ps_picklist, DP-119): a name with its
   tick box and badges, a gray line under it, its cost at the right; the button and its small words under it.
   Built for a phone first: one row a person at every width. */
.ds-pick-picker { margin-bottom: var(--inside-gap); }
.ds-pick-tip { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 var(--inside-gap); padding: 10px 12px;
  border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); font-size: var(--fs-md); }
.ds-pick-tip .ico { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--teal-600); }
.ds-pick-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ds-pick-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--inside-gap);
  padding: 10px 0; border-bottom: 1px solid var(--line); }
.ds-pick-who { flex: 1 1 auto; min-width: 0; }
.ds-pick-who > label.ds-check { display: inline-flex; font-weight: 600; margin-right: 6px; }
.ds-pick-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.ds-pick-sub { margin: 2px 0 0 28px; color: var(--text-muted); font-size: var(--fs-xs); }
.ds-pick-note { margin: 2px 0 0 28px; color: var(--text-subtle); font-size: var(--fs-sm); }
.ds-pick-cost { flex: none; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-pick-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--inside-gap); margin-top: var(--inside-gap); }
.ds-pick-why, .ds-pick-help { margin: 0; color: var(--text-muted); font-size: var(--fs-xs); }
.ds-pick-help { margin-top: 6px; }
@media (max-width: 760px) {
  .ds-pick-go { width: 100%; }
}