/* ==========================================================================
   buttons.css — THE ONE BUTTON STANDARD FOR THE WHOLE SITE.
   Written 09/25/2026 (R361) from claude/BUTTON-AUDIT-2026-09-25.md.

   !! WHY THIS FILE EXISTS. The audit measured 70 pages and found 257 action
   buttons wearing 62 different looks: eleven kinds of "save", twelve heights
   of text button, Delete red on one dashboard and pale teal on the other, a
   gradient here and a pill there. Scott: "slick and elegant, not too loud."

   !! IT IS SERVED LAST, ON EVERY PAGE, INCLUDING THE STANDALONE PRINT VIEWS.
   layout() links it after surface-c.css, and the two print views that link
   only tokens.css + style.css link it too. Source order is the whole point:
   the incumbents it has to beat (style.css's `.button:not(.ghost)` gradient at
   0-2-0, its `form button[type="submit"]:not(.ghost)` at 0-2-2, surface-c's
   `body.ds-c .button` at 0-2-1) are all equal or lower, so a later file with
   the SAME shape wins without an arms race.

   ⛔ EVERY RULE KEEPS style-v2's PAIRING CONVENTION:
        .x, form button.x[type="submit"]:not(.ghost) { ... }
   because style.css's own submit rule is 0-2-2 and would otherwise win inside
   a form. Drop the pairing and the button looks right outside a form and
   wrong inside one — which is how six of the 62 looks were born.

   ✅ PAGE TUNING STILL WINS. Everything here is 0-2-0 to 0-3-2, so the
   page-specific rules in style-v2.css (`.house-panel td.fa-actions .ds-btn`
   and friends, 0-3-0 and up) keep their heights. This file sets the FAMILY;
   a page may still set a size.

   SCOTT'S DECISIONS, 09/25/2026 — the code was `1A 2A 3A 4B 5B 6A 7A`:
     1A secondary = tinted teal-50 fill, teal-300 outline, teal-800 words
     2A primary   = --teal-700 #1d4b50, hover --teal-800
     3A corners   = 6px (--r-sm) on every kind and both sizes
     4B destructive = red-50 fill, red-150 outline, danger words;
                      on hover it FILLS with --danger and the words go white
     5B icon button = no box at rest, slate-500 glyph; a slate-100 square
                      appears behind it on hover; a trash goes red on hover
     6A compact   = 28px tall, 12.5px words
     7A text weight = 700
   ========================================================================== */

/* --------------------------------------------------------------- the family
   ⚠️ `box-sizing: border-box` IS NOT BOILERPLATE HERE. The print views link
   no stylesheet but this one and tokens.css, so they never get style.css's
   global `box-sizing`, and a 36px button with a 1px outline drew 38px on
   them and 36px everywhere else -- MEASURED on the EMS sheet 09/25/2026.
   Regular is 36px / 14px. One shape, one weight, no gradient, no shadow, no
   lift. `transform: none` and `box-shadow: none` are not tidying: style.css
   gives every non-ghost button a gradient, a drop shadow and a -1px hover
   lift, and without these three words the standard would inherit all of it. */
.ds-btn,
a.ds-btn,
form button.ds-btn[type="submit"]:not(.ghost) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; min-height: 36px; padding: 0 14px;
  border-radius: var(--r-sm);
  font: inherit; font-size: 14px; font-weight: 700; line-height: 1;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  white-space: nowrap; width: auto; box-sizing: border-box;
  background: none; box-shadow: none; transform: none; filter: none;
}
.ds-btn .ico, .ds-btn .ic { width: 16px; height: 16px; }

/* The IN-A-ROW size. Scott, 09/24/2026: the owner dashboard's row buttons
   "need to basically match the size of the buttons on the admin dashboard".
   28px / 12.5px is his 09/25 pick 6A. */
.ds-btn-sm,
a.ds-btn-sm,
form button.ds-btn-sm[type="submit"]:not(.ghost) {
  height: 28px; min-height: 28px; padding: 0 10px; font-size: 12.5px;
}
/* 16px beside text, in the small size too (Scott, 09/28/2026); the button stays 28px tall. */
.ds-btn-sm .ico, .ds-btn-sm .ic { width: 16px; height: 16px; }

/* A way back carries a person's name ("Back to Jane Doe"). A name too long for its row is
   cut short with "…" on one line -- "Back to Jane D…" (Scott, 10/01/2026) -- never wrapped,
   never widening the page (SC-SIDE). Read off the drawn arrow, so the plain link is covered too. */
.ds-btn:has(> .ic-back):not(.ds-btn-link):not(.ds-btn-wide) { flex: 0 1000 auto; min-width: 36px; max-width: 100%; }
.ds-btn > .ic-back { flex: none; }
.ds-btn > .ds-btn-words {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: calc(1em + 4px);
}

/* The one full-width button a phone form ends with (the phone assessment, the
   incident form). One per screen. Same colour and corner as everything else —
   the 14px-cornered gradient slab it replaces was its own look. */
.ds-btn-wide,
a.ds-btn-wide,
form button.ds-btn-wide[type="submit"]:not(.ghost) {
  display: flex; width: 100%; height: 48px; min-height: 48px; font-size: 16px;
}

/* ------------------------------------------------------------ 2A — primary */
.ds-btn-primary,
a.ds-btn-primary,
form button.ds-btn-primary[type="submit"]:not(.ghost) {
  background: var(--teal-700); color: var(--text-onbrand); border-color: var(--teal-700);
}
.ds-btn-primary:hover,
a.ds-btn-primary:hover,
form button.ds-btn-primary[type="submit"]:not(.ghost):hover {
  background: var(--teal-800); color: var(--text-onbrand); border-color: var(--teal-800);
  filter: none; transform: none; box-shadow: none;
}

/* ---------------------------------------------------------- 1A — secondary
   A SECONDARY BUTTON HAS COLOUR. Scott, 09/18/2026: "the quick action buttons
   need to have color in them, i don't like them to be plain white ... they are
   too hard to see." Re-confirmed as pick 1A on 09/25/2026. */
.ds-btn-secondary,
a.ds-btn-secondary,
form button.ds-btn-secondary[type="submit"]:not(.ghost) {
  background: var(--teal-50); color: var(--teal-800); border-color: var(--teal-300);
}
.ds-btn-secondary:hover,
a.ds-btn-secondary:hover,
form button.ds-btn-secondary[type="submit"]:not(.ghost):hover {
  background: var(--teal-100); color: var(--teal-800); border-color: var(--teal-300);
  filter: none; transform: none; box-shadow: none;
}

/* -------------------------------------------------------- 4B — destructive
   Quiet until you point at it, then unmistakable. Delete, Remove, Move out,
   Archive, Clear all, Deactivate, Take off, Delete draft, Remove this line —
   never teal. */
.ds-btn-danger,
a.ds-btn-danger,
form button.ds-btn-danger[type="submit"]:not(.ghost) {
  background: var(--red-50); color: var(--danger); border-color: var(--red-150);
}
.ds-btn-danger:hover,
a.ds-btn-danger:hover,
form button.ds-btn-danger[type="submit"]:not(.ghost):hover {
  background: var(--danger); color: var(--text-onbrand); border-color: var(--danger);
  filter: none; transform: none; box-shadow: none;
}

/* ------------------------------------------------------------- quiet link
   For GOING somewhere. Never for changing data. */
.ds-btn-link,
a.ds-btn-link,
form button.ds-btn-link[type="submit"]:not(.ghost) {
  background: none; color: var(--teal-700); border-color: transparent; padding: 0 4px;
}
.ds-btn-link:hover,
a.ds-btn-link:hover,
form button.ds-btn-link[type="submit"]:not(.ghost):hover {
  background: none; color: var(--teal-800); text-decoration: underline;
  filter: none; transform: none; box-shadow: none;
}

/* ------------------------------------------------------- 5B — icon button
   No box at rest. The audit's worst single finding lives here: 78 icon
   buttons in the Community Playbook's coloured section bands were drawn as a
   WHITE box with a WHITE outline on a coloured band, 20px tall — invisible.
   A glyph with no box cannot disappear that way, because it inherits the
   band's own ink (see the .on-band rule at the foot of this file). */
/* ⛔ AND `.data-table td a.ds-icon-btn` IS IN EVERY ONE OF THESE LISTS.
   style.css carries `.data-table td a { color: var(--accent); font-weight:
   600 }` at 0-1-2, which beats `a.ds-icon-btn` at 0-1-1 -- so a pencil that
   GOES somewhere, which is a link and not a button pretending, came out a
   different colour and weight from the identical pencil beside it that
   posts a form. MEASURED on /users the day the staff rows got one
   (09/25/2026), by css_specificity_test and again by the look ratchet
   below. ⚠️ IT IS A SELECTOR, NOT A SECOND RULE: the values stay written
   once, so this cannot drift into a twenty-fourth look. */
.ds-icon-btn,
a.ds-icon-btn,
.data-table td a.ds-icon-btn,
form button.ds-icon-btn[type="submit"]:not(.ghost) {
  width: 36px; height: 36px; min-height: 36px; padding: 0; box-sizing: border-box;
  display: inline-grid; place-items: center;
  border-radius: var(--r-sm); border: 1px solid transparent;
  background: none; color: var(--slate-500); cursor: pointer; font-weight: 700;
  box-shadow: none; transform: none; filter: none;
}
.ds-icon-btn .ico, .ds-icon-btn .ic, .ds-icon-btn svg { width: 16px; height: 16px; }
.ds-icon-btn:hover,
a.ds-icon-btn:hover,
.data-table td a.ds-icon-btn:hover,
form button.ds-icon-btn[type="submit"]:not(.ghost):hover {
  background: var(--slate-100); color: var(--text); border-color: transparent;
  filter: none; transform: none; box-shadow: none;
}
.ds-icon-btn.is-danger:hover,
a.ds-icon-btn.is-danger:hover,
.data-table td a.ds-icon-btn.is-danger:hover,
form button.ds-icon-btn.is-danger[type="submit"]:not(.ghost):hover {
  background: var(--red-50); color: var(--danger);
}
/* A toggle that is ON (aria-pressed): filled, so "on" can be seen -- the resident
   profile's section pencil while its section is open for editing. */
.ds-icon-btn[aria-pressed="true"],
.ds-icon-btn[aria-pressed="true"]:hover {
  color: var(--text-onbrand); background: var(--teal-700); border-color: var(--teal-700);
}
/* In a row it is the compact button's size (decision 6A). */
.ds-icon-btn.ds-btn-sm,
a.ds-icon-btn.ds-btn-sm,
form button.ds-icon-btn.ds-btn-sm[type="submit"]:not(.ghost) {
  width: 28px; height: 28px; min-height: 28px; padding: 0;
}

/* ------------------------------------------------------------ focus ring
   2px ring, 2px offset, on every kind. --teal-600 is the ring colour the rest
   of the site already uses (tokens.css --sh-ring); there is no --focus token
   and tokens.css is the only :root home, so this names the same colour rather
   than inventing one. */
.ds-btn:focus-visible,
a.ds-btn:focus-visible,
.wk-btn:focus-visible,
a.wk-btn:focus-visible,
.ds-icon-btn:focus-visible,
a.ds-icon-btn:focus-visible,
form button.ds-btn[type="submit"]:not(.ghost):focus-visible,
form button.ds-icon-btn[type="submit"]:not(.ghost):focus-visible {
  outline: 2px solid var(--teal-600); outline-offset: 2px;
}

/* -------------------------------------------------------------- disabled */
.ds-btn[disabled], .ds-btn.disabled, a.ds-btn.disabled,
.ds-icon-btn[disabled], .ds-icon-btn.disabled,
form button.ds-btn[type="submit"]:not(.ghost)[disabled] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* ==========================================================================
   THE BRIDGE — every older button class now wears one of the five.

   !! THIS IS WHAT MAKES ONE ROUND POSSIBLE. 257 buttons across 44 source
   files cannot all be rewritten by hand without breaking something; but the
   old classes already carry the MEANING (`.button` solid = the page's action,
   `.button.ghost` = the quieter one, `.ghost.danger` = destructive), so
   mapping the class onto the kind converts the site in one pass and leaves
   only the genuinely mis-classed buttons — the teal Deletes — to be fixed in
   the markup, which this round also does.
   ========================================================================== */

/* The unclassed `<button type="submit">` — 23 pages' worth of Save, Add,
   Create, Finalize. It was white on #1e6269, 30px, 6px corners, with a
   gradient and a hover lift. It is the primary now.

   ⛔ `:not([class])` — NO CLASS AT ALL — AND NOT A LIST OF EXCLUSIONS. The
   first cut wrote out the classes this must not touch, and two things went
   wrong at once. A `:not()` chain RAISES specificity (one class each), so the
   chain quietly outranked the named rules below it and painted Projections'
   78 red "Remove this line" buttons solid teal. And a list of exclusions is
   only ever as current as the day it was written: the Automations page's 24
   on/off switches are `<button type="submit" class="au-tg">`, they are a
   CONTROL and explicitly out of scope, and they came back as 24 primary
   buttons. "Carries no button class" is the thing this rule actually means,
   a browser can check it, and it cannot go stale.

   ⚠️ AND `button:not([type])` IS NOT TIDYING EITHER. A <button> with no type
   submits, but an attribute selector cannot see a default — 15 buttons on the
   Weekly Staffing Report are written that way and an earlier draft missed
   every one of them. */
form button[type="submit"]:not([class]),
form button:not([type]):not([class]),
button[type="submit"]:not([class]),
button:not([type]):not([class]),
button.small:not(.button):not(.ds-btn):not(.ds-icon-btn):not(.icon-btn):not(.ghost) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; min-height: 36px; padding: 0 14px; box-sizing: border-box;
  border-radius: var(--r-sm);
  font: inherit; font-size: 14px; font-weight: 700; line-height: 1;
  border: 1px solid var(--teal-700); cursor: pointer; white-space: nowrap;
  background: var(--teal-700); color: var(--text-onbrand);
  box-shadow: none; transform: none; filter: none;
}
form button[type="submit"]:not([class]):hover,
form button:not([type]):not([class]):hover,
button[type="submit"]:not([class]):hover,
button:not([type]):not([class]):hover,
button.small:not(.button):not(.ds-btn):not(.ds-icon-btn):not(.icon-btn):not(.ghost):hover {
  background: var(--teal-800); border-color: var(--teal-800); color: var(--text-onbrand);
  box-shadow: none; transform: none; filter: none;
}

/* `.button` with no `ghost`: the page's action. Primary.
   ⛔ `:not(.ds-btn)` IS LOAD-BEARING, NOT A GUARD. surface-c.css writes
   `body.ds-c .button.ghost`, which is 0-3-1 — one ELEMENT heavier than the
   0-3-0 this file would otherwise carry, so it wins however late this file
   is served. MEASURED 09/25/2026 in a browser: every `button small ghost`
   on the site kept surface-c's teal-600 words and teal-200 outline while
   taking the new size, which is the sort of half-converted button the audit
   was written about. The extra `:not()` makes it 0-4-0 and says something
   true at the same time: a button that already carries `ds-btn` is not this
   rule's business. */
.button:not(.ghost):not(.danger):not(.ds-btn),
a.button:not(.ghost):not(.danger):not(.ds-btn),
form button.button[type="submit"]:not(.ghost):not(.danger):not(.ds-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; min-height: 36px; padding: 0 14px;
  border-radius: var(--r-sm);
  font-size: 14px; font-weight: 700; line-height: 1;
  border: 1px solid var(--teal-700);
  background: var(--teal-700); color: var(--text-onbrand);
  box-shadow: none; transform: none; filter: none;
}
.button:not(.ghost):not(.danger):not(.ds-btn):hover,
a.button:not(.ghost):not(.danger):not(.ds-btn):hover,
form button.button[type="submit"]:not(.ghost):not(.danger):not(.ds-btn):hover {
  background: var(--teal-800); border-color: var(--teal-800); color: var(--text-onbrand);
  box-shadow: none; transform: none; filter: none;
}

/* `.button.ghost`: the quieter one. Secondary. */
.button.ghost:not(.danger):not(.ds-btn),
a.button.ghost:not(.danger):not(.ds-btn),
form button.button.ghost:not(.danger):not(.ds-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; min-height: 36px; padding: 0 14px;
  border-radius: var(--r-sm);
  font-size: 14px; font-weight: 700; line-height: 1;
  background: var(--teal-50); color: var(--teal-800); border: 1px solid var(--teal-300);
  box-shadow: none; transform: none; filter: none;
}
.button.ghost:not(.danger):not(.ds-btn):hover,
a.button.ghost:not(.danger):not(.ds-btn):hover,
form button.button.ghost:not(.danger):not(.ds-btn):hover {
  background: var(--teal-100); color: var(--teal-800); border-color: var(--teal-300);
  box-shadow: none; transform: none; filter: none;
}

/* `.button.danger`, with or without `ghost`: destructive. */
.button.danger:not(.ds-btn), a.button.danger:not(.ds-btn), form button.button.danger:not(.ds-btn),
.button.ghost.danger:not(.ds-btn), a.button.ghost.danger:not(.ds-btn),
form button.button.ghost.danger:not(.ds-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; min-height: 36px; padding: 0 14px;
  border-radius: var(--r-sm);
  font-size: 14px; font-weight: 700; line-height: 1;
  background: var(--red-50); color: var(--danger); border: 1px solid var(--red-150);
  box-shadow: none; transform: none; filter: none;
}
.button.danger:not(.ds-btn):hover, a.button.danger:not(.ds-btn):hover,
form button.button.danger:not(.ds-btn):hover,
.button.ghost.danger:not(.ds-btn):hover, a.button.ghost.danger:not(.ds-btn):hover,
form button.button.ghost.danger:not(.ds-btn):hover {
  background: var(--danger); color: var(--text-onbrand); border-color: var(--danger);
  box-shadow: none; transform: none; filter: none;
}

/* `.small` on any of the above is the compact size, not a different look.
   ⛔ EVERY VARIANT IS NAMED, AND THAT IS NOT VERBOSITY. A bare `.button.small`
   is 0-2-0 and the three rules above are 0-3-0, so the size silently lost to
   the colour and every `.button small ghost` on the site drew at 36px. Each
   line below is one class heavier than the rule it has to beat. */
.button.small:not(.ghost):not(.danger),
a.button.small:not(.ghost):not(.danger),
form button.button.small[type="submit"]:not(.ghost):not(.danger),
.button.ghost.small:not(.danger),
a.button.ghost.small:not(.danger),
form button.button.ghost.small:not(.danger),
.button.small.danger:not(.ds-btn), a.button.small.danger:not(.ds-btn),
form button.button.small.danger:not(.ds-btn),
.button.ghost.small.danger:not(.ds-btn), a.button.ghost.small.danger:not(.ds-btn),
form button.button.ghost.small.danger:not(.ds-btn),
button.small:not(.button):not(.ds-btn):not(.ds-icon-btn):not(.icon-btn):not(.ghost),
form button.small[type="submit"]:not(.ghost):not(.ds-btn):not(.ds-icon-btn) {
  height: 28px; min-height: 28px; padding: 0 10px; font-size: 12.5px;
  border-radius: var(--r-sm);
}
.button.small .ico, button.small .ico { width: 16px; height: 16px; }

/* ⛔ A FORM'S ACTION ROW IS A PAIR, AND A PAIR MATCHES. Round XX-4 settled
   this and `tests/v2_controls_test.py` measures it: the Cancel beside a Save
   is the SAME size as the Save, even though most Cancels are written
   `button small ghost`. Every selector carries `.form-actions` so it is one
   step heavier than the compact rule above -- the same arithmetic as
   everywhere else in this file, written out rather than hoped for. */
.form-actions .button.small:not(.ghost):not(.danger),
.form-actions .button.ghost.small:not(.danger),
.form-actions .button.small.danger:not(.ds-btn),
.form-actions .button.ghost.small.danger:not(.ds-btn),
.form-actions button.small:not(.button):not(.ds-btn):not(.ds-icon-btn):not(.icon-btn):not(.ghost),
.form-actions form button.button.small[type="submit"]:not(.ghost):not(.danger),
.ds-form-actions .button.small:not(.ghost):not(.danger),
.ds-form-actions .button.ghost.small:not(.danger),
.ds-form-actions button.small:not(.button):not(.ds-btn):not(.ds-icon-btn):not(.icon-btn):not(.ghost) {
  height: 36px; min-height: 36px; padding: 0 14px; font-size: 14px;
}
@media (max-width: 760px) {
  .form-actions .button.small:not(.ghost):not(.danger),
  .form-actions .button.ghost.small:not(.danger),
  .form-actions .button.small.danger:not(.ds-btn),
  .form-actions .button.ghost.small.danger:not(.ds-btn),
  .form-actions button.small:not(.button):not(.ds-btn):not(.ds-icon-btn):not(.icon-btn):not(.ghost),
  .ds-form-actions .button.small:not(.ghost):not(.danger),
  .ds-form-actions .button.ghost.small:not(.danger) {
    height: 44px; min-height: 44px; font-size: 15px;
  }
}

.button:focus-visible, a.button:focus-visible, button:focus-visible {
  outline: 2px solid var(--teal-600); outline-offset: 2px;
}
.button.disabled, span.button.disabled, .button[disabled], button[disabled] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* ---- the named orphans the audit listed, each onto its kind -------------- */

/* 724 pencils on Projections, Census Tracking and Licenses: navy on pale
   blue-grey, a colour that appears nowhere else on the site. Icon button. */
.ro-pencil, a.ro-pencil, form button.ro-pencil[type="submit"]:not(.ghost) {
  width: 28px; height: 28px; min-height: 28px; padding: 0;
  display: inline-grid; place-items: center;
  border-radius: var(--r-sm); border: 1px solid transparent;
  background: none; color: var(--slate-500); font-size: 12.5px; font-weight: 700;
  box-shadow: none; transform: none; filter: none;
}
.ro-pencil:hover, a.ro-pencil:hover, form button.ro-pencil[type="submit"]:not(.ghost):hover {
  background: var(--slate-100); color: var(--text);
}

/* 100 grey text tools on the Administrator Dashboard (up, down, trash, save)
   beside one solid teal "Edit this link". Icon button; the Save keeps words. */
.alink-tool, a.alink-tool, form button.alink-tool[type="submit"]:not(.ghost) {
  min-height: 28px; height: 28px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--r-sm); border: 1px solid transparent;
  background: none; color: var(--slate-500);
  font-size: 12.5px; font-weight: 700;
  box-shadow: none; transform: none; filter: none;
}
.alink-tool:hover, a.alink-tool:hover, form button.alink-tool[type="submit"]:not(.ghost):hover {
  background: var(--slate-100); color: var(--text);
}
.alink-tool.is-danger:hover, form button.alink-tool.is-danger[type="submit"]:not(.ghost):hover {
  background: var(--red-50); color: var(--danger);
}

/* 78 box-less red "Remove this line" on Projections. Compact destructive. */
.btn-inline-danger, form button.btn-inline-danger[type="submit"]:not(.ghost) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 28px; min-height: 28px; padding: 0 10px; white-space: nowrap;
  border-radius: var(--r-sm); border: 1px solid var(--red-150);
  background: var(--red-50); color: var(--danger);
  font-size: 12.5px; font-weight: 700; line-height: 1;
  box-shadow: none; transform: none; filter: none;
}
.btn-inline-danger:hover, form button.btn-inline-danger[type="submit"]:not(.ghost):hover {
  background: var(--danger); color: var(--text-onbrand); border-color: var(--danger);
}

/* The Weekly Staffing Report's forest green pair. Scott asked for the report
   in green on 09/21/2026; the 09/25 standard says a button's colour says what
   KIND it is, not which page it is on, so the page keeps its green headings
   and its buttons join the rest of the site. */
.wk-save-email, form button.wk-save-email[type="submit"]:not(.ghost) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; min-height: 36px; padding: 0 14px;
  border-radius: var(--r-sm); border: 1px solid var(--teal-700);
  background: var(--teal-700); color: var(--text-onbrand);
  font-size: 14px; font-weight: 700; line-height: 1;
  box-shadow: none; transform: none; filter: none;
}
.wk-save-email:hover, form button.wk-save-email[type="submit"]:not(.ghost):hover {
  background: var(--teal-800); border-color: var(--teal-800); color: var(--text-onbrand);
}
.wk-btn, a.wk-btn, .wk-btn.wk-btn-quiet, a.wk-btn.wk-btn-quiet,
form button.wk-btn[type="submit"]:not(.ghost),
form button.wk-btn.wk-btn-quiet[type="submit"]:not(.ghost) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; min-height: 36px; padding: 0 14px;
  border-radius: var(--r-sm); border: 1px solid var(--teal-300);
  background: var(--teal-50); color: var(--teal-800);
  font-size: 14px; font-weight: 700; line-height: 1;
  box-shadow: none; transform: none; filter: none;
}
.wk-btn:hover, a.wk-btn:hover, .wk-btn.wk-btn-quiet:hover, a.wk-btn.wk-btn-quiet:hover,
form button.wk-btn[type="submit"]:not(.ghost):hover,
form button.wk-btn.wk-btn-quiet[type="submit"]:not(.ghost):hover {
  background: var(--teal-100); color: var(--teal-800); border-color: var(--teal-300);
}

/* The assessment's pale-red pill "Remove". Compact destructive. */
.remove-link, a.remove-link, form button.remove-link[type="submit"]:not(.ghost) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 28px; min-height: 28px; padding: 0 10px;
  border-radius: var(--r-sm); border: 1px solid var(--red-150);
  background: var(--red-50); color: var(--danger);
  font-size: 12.5px; font-weight: 700; line-height: 1; text-decoration: none;
  box-shadow: none; transform: none; filter: none;
}
.remove-link:hover, a.remove-link:hover, form button.remove-link[type="submit"]:not(.ghost):hover {
  background: var(--danger); color: var(--text-onbrand); border-color: var(--danger);
}

/* The meeting agenda's 20 grey box-less "Remove". Icon button, red on hover. */
.mt-x, a.mt-x, form button.mt-x[type="submit"]:not(.ghost) {
  width: 28px; height: 28px; min-height: 28px; padding: 0;
  display: inline-grid; place-items: center;
  border-radius: var(--r-sm); border: 1px solid transparent;
  background: none; color: var(--slate-500); font-size: 14px; font-weight: 700;
  box-shadow: none; transform: none; filter: none;
}
.mt-x:hover, a.mt-x:hover, form button.mt-x[type="submit"]:not(.ghost):hover {
  background: var(--red-50); color: var(--danger);
}

/* The incident report's 56px gradient "Complete" and 32px "Save as draft",
   and the phone assessment's 52px pair. They are the full-width phone-form
   button: one per screen, 48px, 16px words, the standard's colour and corner. */
.ir-submit, form button.ir-submit[type="submit"]:not(.ghost) {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 6px;
  height: 48px; min-height: 48px; padding: 0 14px; box-sizing: border-box;
  border-radius: var(--r-sm); border: 1px solid var(--teal-700);
  background: var(--teal-700); color: var(--text-onbrand);
  font-size: 16px; font-weight: 700; line-height: 1;
  box-shadow: none; transform: none; filter: none;
}
.ir-submit:hover, form button.ir-submit[type="submit"]:not(.ghost):hover {
  background: var(--teal-800); border-color: var(--teal-800); color: var(--text-onbrand);
}
.ir-draft, a.ir-draft, form button.ir-draft[type="submit"]:not(.ghost) {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 6px;
  height: 48px; min-height: 48px; padding: 0 14px; box-sizing: border-box;
  border-radius: var(--r-sm); border: 1px solid var(--teal-300);
  background: var(--teal-50); color: var(--teal-800);
  font-size: 16px; font-weight: 700; line-height: 1;
  box-shadow: none; transform: none; filter: none;
}
.ir-draft:hover, a.ir-draft:hover, form button.ir-draft[type="submit"]:not(.ghost):hover {
  background: var(--teal-100); color: var(--teal-800);
}
/* (The review page's own full-width Delete, .ir-delete, retired 10/03/2026:
   its three buttons are the standard actions row now -- c_ds_btn, one row.) */

/* The phone assessment's own six looks, including a browser-default grey
   button with square corners and a black 2px outline. */
.ap-backbtn, a.ap-backbtn, .ap-note-btn, form button.ap-note-btn[type="submit"]:not(.ghost),
.ap-addbtn, form button.ap-addbtn[type="submit"]:not(.ghost) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; min-height: 44px; padding: 0 14px;
  border-radius: var(--r-sm); border: 1px solid var(--teal-300);
  background: var(--teal-50); color: var(--teal-800);
  font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none;
  box-shadow: none; transform: none; filter: none;
}
.ap-backbtn:hover, a.ap-backbtn:hover, .ap-note-btn:hover, .ap-addbtn:hover {
  background: var(--teal-100); color: var(--teal-800);
}
.ap-remove, form button.ap-remove[type="submit"]:not(.ghost) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; min-height: 44px; padding: 0 14px;
  border-radius: var(--r-sm); border: 1px solid var(--red-150);
  background: var(--red-50); color: var(--danger);
  font-size: 14px; font-weight: 700; line-height: 1;
  box-shadow: none; transform: none; filter: none;
}
.ap-remove:hover, form button.ap-remove[type="submit"]:not(.ghost):hover {
  background: var(--danger); color: var(--text-onbrand); border-color: var(--danger);
}

/* The print views' toolbars. Those pages are standalone documents — they link
   no stylesheet but this one and tokens.css, and they used to paint their own
   pill "Print / Save as PDF" in a #286e75 that appears nowhere else. Their
   buttons carry `ds-btn` now, so this only has to lay the row out and keep
   the toolbar off the paper. */
.doc-toolbar, .ems-toolbar, .cp-toolbar, .print-toolbar {
  align-items: center;
  /* ONE ROW AT EVERY WIDTH (Scott, 10/01/2026: "all three buttons should be on the same row"): Back gives way, never the row */
  flex-wrap: nowrap;
}
/* The buttons after Back: one group that keeps its words. Back gives way first (its shrink is 1000 to
   their 1, down to its arrow); only on a screen narrower still do these give up their side padding. */
.print-tools { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
.print-tools > * { flex: 0 1 auto; min-width: 0; overflow: hidden; }
/* What the last action said ("emailed to ..."): its own line above the row, never on the paper. */
.print-toolbar-note { margin: 0 0 8px; }

/* -------------------------------------------------------------- on a phone
   36px becomes 44px, which is the target size the rest of the phone sweep
   already uses. The compact button stays compact: it lives inside table rows
   whose height the phone layouts already set. */
@media (max-width: 760px) {
  /* ⛔ THE PHONE RULES CARRY THE SAME WEIGHT AS THE RULES THEY RAISE. A bare
     `.button:not(.small)` is 0-2-0 and the colour rules above are 0-4-0, so
     the first draft raised nothing and the Meetings page's "Create agenda"
     stayed 36px on a 390px screen. MEASURED, not reasoned. */
  .ds-btn:not(.ds-btn-sm):not(.ds-btn-link):not(.ds-btn-wide),
  a.ds-btn:not(.ds-btn-sm):not(.ds-btn-link):not(.ds-btn-wide),
  form button.ds-btn[type="submit"]:not(.ghost):not(.ds-btn-sm):not(.ds-btn-link),
  .button:not(.small):not(.ds-btn):not(.x1):not(.x2),
  a.button:not(.small):not(.ds-btn):not(.x1):not(.x2),
  form button.button[type="submit"]:not(.small):not(.ds-btn):not(.x1),
  form button[type="submit"]:not([class]), form button:not([type]):not([class]),
  button[type="submit"]:not([class]), button:not([type]):not([class]),
  .wk-btn, a.wk-btn, .wk-btn.wk-btn-quiet, a.wk-btn.wk-btn-quiet, .wk-save-email,
  form button.wk-btn[type="submit"]:not(.ghost),
  form button.wk-btn.wk-btn-quiet[type="submit"]:not(.ghost),
  form button.wk-save-email[type="submit"]:not(.ghost) {
    height: 44px; min-height: 44px; font-size: 15px;
  }
  /* The compact button is 28px because it lives in a table row. A 28px target
     under a thumb is not one, so on a phone it becomes 36px -- still visibly
     the smaller of the two sizes, and big enough to hit. */
  .ds-btn-sm, a.ds-btn-sm, form button.ds-btn-sm[type="submit"]:not(.ghost),
  .button.small:not(.ghost):not(.danger), a.button.small:not(.ghost):not(.danger),
  .button.ghost.small:not(.danger), a.button.ghost.small:not(.danger),
  .button.small.danger:not(.ds-btn), .button.ghost.small.danger:not(.ds-btn),
  button.small:not(.button):not(.ds-btn):not(.ds-icon-btn):not(.icon-btn):not(.ghost),
  form button.button.small[type="submit"]:not(.ghost):not(.danger),
  form button.button.ghost.small:not(.danger),
  form button.button.small.danger:not(.ds-btn),
  form button.button.ghost.small.danger:not(.ds-btn),
  form button.small[type="submit"]:not(.ghost):not(.ds-btn):not(.ds-icon-btn),
  .remove-link, .btn-inline-danger, .alink-tool,
  form button.remove-link[type="submit"]:not(.ghost),
  form button.btn-inline-danger[type="submit"]:not(.ghost),
  form button.alink-tool[type="submit"]:not(.ghost) {
    height: 36px; min-height: 36px; font-size: 13px;
  }
  /* An icon-only button is 44x44 on a phone, always.
     ⛔ INCLUDING ONE IN A TABLE CELL -- same reason as the colour above: at
     0-1-1 `a.ds-icon-btn` loses to `.data-table td a`, so a pencil that is a
     link stayed 36px under a thumb while the one beside it grew. MEASURED at
     390px on /users. */
  .ds-icon-btn, a.ds-icon-btn,
  .data-table td a.ds-icon-btn,
  form button.ds-icon-btn[type="submit"]:not(.ghost),
  .ro-pencil, .mt-x { width: 44px; height: 44px; min-height: 44px; }
  /* A printout's row of buttons on a phone: the small size, so Back keeps as much of its name as the row has room for. */
  :is(.doc-toolbar, .ems-toolbar, .cp-toolbar, .print-toolbar) .ds-btn:not(.ds-btn-sm):not(.ds-btn-link):not(.ds-btn-wide) {
    height: 36px; min-height: 36px; padding: 0 10px; font-size: 13px;
  }
  .print-tools { gap: 6px; }
  .ds-btn > .ds-btn-more { display: none; }
  /* ⛔ SCOTT, 10/15/2026 (the finalized care plan on his phone): on one row
     Back shrank to a bare arrow -- "a little confusing" -- and "Edit care plan"
     spilled out of its button. So on a phone Back has its OWN row, the full
     width, "Back to <name>"; the other buttons share the row under it, each
     as wide as its words. A computer keeps the one row (10/01/2026). */
  :is(.doc-toolbar, .ems-toolbar, .cp-toolbar, .print-toolbar) { flex-wrap: wrap; row-gap: 8px; }
  :is(.doc-toolbar, .ems-toolbar, .cp-toolbar, .print-toolbar) > .ds-btn:is(:has(> .ic-back), [data-back]):not(.ds-btn-link):not(.ds-btn-wide) {
    flex: 1 1 100%; justify-content: flex-start; }
  /* a lone Print (no .print-tools group) goes to the right of the row under Back */
  :is(.doc-toolbar, .ems-toolbar, .cp-toolbar, .print-toolbar) > .ds-btn:not([data-back]):not(:has(> .ic-back)) {
    margin-left: auto; }
  :is(.doc-toolbar, .ems-toolbar, .cp-toolbar, .print-toolbar) > .print-tools {
    flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
  :is(.doc-toolbar, .ems-toolbar, .cp-toolbar, .print-toolbar) > .print-tools > * {
    flex: 0 0 auto; overflow: visible; white-space: nowrap; }
}

/* ------------------------------------------------- an icon button on a band
   The Community Playbook draws its section headings as coloured bands. A
   box-less glyph inherits the band's ink, so this only has to say so. */
.ds-icon-btn.on-band,
body.ds-c .ds-icon-btn.on-band {
  background: none; border-color: transparent; color: var(--text-onbrand);
}
.ds-icon-btn.on-band .ico, .ds-icon-btn.on-band svg { color: var(--text-onbrand); }
.ds-icon-btn.on-band:hover {
  background: rgba(255, 255, 255, 0.22); color: var(--text-onbrand);
}
/* On a coloured band a red glyph would be unreadable, so the destructive one
   says what it is by filling with the danger colour and keeping white words --
   the same promise as the destructive button, in the band's own terms. */
.ds-icon-btn.on-band.is-danger:hover,
form button.ds-icon-btn.on-band.is-danger[type="submit"]:not(.ghost):hover {
  background: var(--danger); color: var(--text-onbrand);
}

/* ----------------------------------------------------------------- print
   A print view's toolbar must still not print. */
@media print {
  .doc-toolbar, .ems-toolbar, .cp-toolbar, .print-toolbar, .print-toolbar-note { display: none !important; }
}

/* ==========================================================================
   THE ONE SPINNER AND THE ONE LEAVE DIALOG (L-ACT: LD-ONE, UG-ONE).
   Moved here from style-v2.css on 10/01/2026: the phone forms link this sheet
   and not that one, so the staff incident form had neither.
   ========================================================================== */
/* PENDING — the affordance you clicked shows progress, not the page.
   Set by static/js/confirm-dialog.js on submit. */
.button.is-pending, button.is-pending {
  pointer-events: none;
  opacity: .65;
}
.button.is-pending::after, button.is-pending::after {
  content: "";
  width: 12px; height: 12px; margin-left: 6px;
  display: inline-block; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: btnspin .6s linear infinite;
}
@keyframes btnspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .button.is-pending::after, button.is-pending::after { animation: none; }
}

/* "You have unsaved changes" -- static/js/unsaved-guard.js, R224 09/17/2026.
   Scott: leaving the Profile or Care Plan tab mid-edit must ask first. Same
   shape as the confirm dialog next door; three answers, not two. */
.ug-overlay {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
  background: var(--scrim); padding: 16px;
}
.ug-overlay, .ug-box { box-sizing: border-box; }   /* a page with no shell has no site-wide border-box */
.ug-box {
  width: min(460px, 100%); background: var(--surface-0); border-radius: var(--r-lg);
  box-shadow: var(--elev-3); padding: 22px 24px;
}
.ug-title { margin: 0 0 8px; font-size: 19px; }
.ug-text { margin: 0 0 18px; color: var(--text-muted); line-height: 1.5; }
.ug-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* ---- In-app confirmation dialog (replaces the browser's confirm box) ----
   Moved here from style.css on 10/13/2026: every page loads buttons.css, the
   printouts included (the ADL sheet's Delete showed the dialog unstyled at the
   bottom of the page -- Scott: "this should be a normal popup window ... like
   everywhere else on the site"). The focus ring stays in style-v2.css. */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(12, 30, 30, 0.45);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem;
}
.confirm-overlay[hidden] { display: none !important; }
.confirm-box {
  background: var(--surface-0); border-radius: var(--r-xl); max-width: 430px; width: 100%;
  padding: 1.6rem 1.6rem 1.3rem; text-align: center;
  box-shadow: 0 18px 50px rgba(10, 30, 30, 0.28);
}
.confirm-icon {
  width: 48px; height: 48px; margin: 0 auto 0.8rem;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-2xl); background: var(--wash-teal-2); color: var(--navy-dark);
}
.confirm-box.confirm-danger .confirm-icon { background: var(--danger-bg); color: var(--danger); }
.confirm-title { margin: 0 0 0.4rem; font-size: var(--fs-lg); color: var(--text); }
.confirm-msg { margin: 0 0 1.3rem; color: var(--muted); line-height: 1.6; font-size: var(--fs-base); }
.confirm-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.confirm-actions button {
  border: 0; border-radius: var(--r-md); padding: 0.6rem 1.25rem;
  font-size: var(--fs-md); font-weight: 700; cursor: pointer; font-family: inherit;
}
.confirm-cancel { background: var(--chip-neutral); color: var(--text); }
.confirm-cancel:hover { background: var(--border-1); }
.confirm-ok { background: linear-gradient(135deg, var(--brand-teal-500), var(--brand-teal-700)); color: var(--text-onbrand); }
.confirm-box.confirm-danger .confirm-ok { background: linear-gradient(135deg, var(--danger-strong), var(--danger-grad-lo)); }
.confirm-ok:hover { filter: brightness(1.07); }
@media (max-width: 480px) { .confirm-actions button { flex: 1 1 100%; } }