/* ==========================================================================
   SUNDAYS HQ (sundays-hq Worker): the app theme, "Deckside" (HQ redesign RD1, RD17)
   ==========================================================================
   A bright working surface for a pool company in Florida sun: white sheets on a cool deck-grey ground, the
   brand's navy as the frame, water blue for anything you can act on or that is selected, sage only as the wave
   on the navy rail, and JetBrains Mono for codes, readings and times. Compact on the office desktop, big under
   the thumb on a phone. Fonts are the website's own self-hosted files (sam-site/fonts): Inter for everything you
   read and tap, JetBrains Mono for data, Allura only inside the logo mark.

   Rules this file keeps (test/hq/look.test.mjs and test/hq/contrast.test.mjs check them):
   - Every color is a token in :root. Text pairs pass 4.5:1, UI parts 3:1, the field runner 7:1.
   - Status always travels with a word (WCAG 1.4.1).
   - Sizes switch by WIDTH and by the person's saved density (html[data-density], RD3), never by hover or
     pointer media queries: a Windows touch laptop reports a fine pointer.
   - Under 1,024 px every target is 44 px or more and fields are 16 px (iOS never zooms); from 1,024 px the
     controls follow --ctl and --ctl-sm and none is under WCAG 2.2's 24 px floor (SC 2.5.8, RD2). Nothing is
     under 12 px.
   - No inline styles anywhere (CSP style-src 'self'). Motion is feedback only and stops under reduced motion.
   - The screens not redesigned yet keep their own class names on the new tokens; the temporary alias tokens
     (--font-code, --font-text, --font-display, --r-sm, --r-md, --r-lg) go when their last user moves (RD17).

   Sections: 1 fonts . 2 tokens . 3 density . 4 base . 5 buttons . 6 fields . 7 notes and status .
             8 signed-out layout . 9 setup steps, passkeys, authenticator, codes . 10 app shell (bar, More, tabs, rail) .
             11 page parts . 12 lists . 13 Today, inquiries, Pipeline, clients . 14 people, log, account, Settings .
             15 dialogs and toasts . 16 reduced motion, forced colors, print
   ========================================================================== */

/* 1. FONTS: the website's own WOFF2 files (OFL 1.1), byte for byte. Inter is variable 100 to 900; this JetBrains Mono subset is
      variable 400 to 800. The subsets carry tnum (Inter) but no cv05, cv08, ss02 or zero (decoded 2026-10-22), so none is asked for:
      look-alike characters (0 and O, 1, l and I) are told apart by setting codes, serials and unit numbers in JetBrains Mono.
      Only Inter is preloaded. */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Allura";
  src: url("fonts/allura-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. TOKENS (DESIGN-SYSTEM 3 to 6) */
:root {
  /* Brand primitives (sam-site/styles.css) */
  --navy-deep: #0F1E34;
  --navy: #1A2E4C;
  --navy-2: #243655;
  --ink-soft: #3A4A66;
  --sage: #6FA3A5;          /* decoration only on light grounds (2.82:1 on white); allowed on the navy rail (5.94:1) */
  --sage-soft: #A4C1C3;     /* rail indicator and rail badges (8.76:1 on the rail) */
  --cream: #F5F2EC;         /* the logo's paper: the mark's disc only */

  /* Deck neutrals (cool, new for HQ) */
  --white: #FFFFFF;
  --deck: #F2F5F8;          /* the page ground */
  --deck-2: #E8EDF2;        /* table heads, sunken wells, chip fills */
  --deck-hover: #F6F9FB;    /* a row under the pointer */
  --line: #DCE3EA;          /* hairlines (decoration) */
  --line-2: #C6D1DB;        /* card and table frames (decoration) */
  --control: #76869A;       /* field, select and outline-button borders: 3.72:1 on white, 3.16 on deck-2 */

  /* Text */
  --ink: #0F1E34;           /* 16.72:1 on white, 15.28 on deck */
  --ink-2: #3A4A66;         /* secondary: 8.93:1 on white, 7.58 on deck-2 */
  --ink-3: #56667D;         /* meta and captions: 5.85:1 on white, 4.96 on deck-2 */

  /* Water: links, focus, selection, the active tab, information */
  --pool-700: #1C5A7E;      /* 7.47:1 on white; white on it 7.47 */
  --pool-800: #164B6A;      /* hover of pool-700; 7.66:1 on pool-100 */
  --pool-100: #DCEBF3;      /* selected chip and info tag fill */
  --pool-50: #EEF6FA;       /* a selected row */

  /* The rail (dark navy frame) */
  --rail: #0F1E34;
  --rail-2: #1A2E4C;        /* current item */
  --rail-hover: #16263F;
  --rail-ink: #B9C7D6;      /* 9.72:1 on the rail, 7.93 on rail-2 */
  --rail-ink-2: #8FA1B6;    /* group labels: 6.32:1 */
  --rail-line: rgba(185, 199, 214, 0.16);

  /* Status: fixed meanings, never repainted, always with a word */
  --ok: #17603A;      --ok-bg: #E4F2E9;      --ok-line: #A9D3B9;
  --warn: #7A4500;    --warn-bg: #FBF0DC;    --warn-line: #E9C98F;
  --danger: #9B1C14;  --danger-bg: #FBE9E6;  --danger-line: #EDB3AA;  --danger-hover: #7E150F;  --danger-wash: #FFFBFA;
  --info: #164B6A;    --info-bg: #DCEBF3;    --info-line: #A8CBDF;
  --muted: #3A4A66;   --muted-bg: #E8EDF2;   --muted-line: #C6D1DB;

  /* People (techs): identity only, assigned in this order and never cycled (RD11); always a swatch beside the person's name. */
  --tech-1: #2F6FB0; --tech-2: #C2621F; --tech-3: #13917A; --tech-4: #7B55B0; --tech-5: #9C7C0A; --tech-6: #B0436F;

  --focus: #1C5A7E;
  --focus-on-rail: #A4C1C3;
  --scrim: rgba(15, 30, 52, 0.48);

  /* Field runner status fills (spec 2.8): white words on them pass 7:1 (ok 7.99, warn 8.68, danger 9.39) */
  --run-ok: #185C38; --run-warn: #6E4100; --run-danger: #8A1A12;
  --e-up: 0 -4px 16px rgba(15, 30, 52, 0.10);

  /* Type */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-data: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-mark: "Allura", cursive;
  --w-regular: 430; --w-medium: 540; --w-semi: 620; --w-bold: 700;

  /* Space (px): 2 4 6 8 12 16 20 24 32 40 48 64 */
  --s-1: 2px; --s-2: 4px; --s-3: 6px; --s-4: 8px; --s-5: 12px; --s-6: 16px; --s-7: 20px; --s-8: 24px;
  --s-9: 32px; --s-10: 40px; --s-11: 48px; --s-12: 64px;

  /* Radii: crisp, never soft. Pills only for counts and the person's initials. */
  --r-1: 3px;   /* tags, day chips, checkboxes, kbd */
  --r-2: 4px;   /* buttons, fields, chips */
  --r-3: 6px;   /* cards, table frames, photos, menus */
  --r-4: 10px;  /* dialogs and sheets */
  --r-pill: 999px;

  /* Elevation */
  --e-1: 0 1px 2px rgba(15, 30, 52, 0.06);
  --e-2: 0 6px 20px rgba(15, 30, 52, 0.14), 0 1px 3px rgba(15, 30, 52, 0.08);
  --e-3: 0 18px 48px rgba(15, 30, 52, 0.26);

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --t-fast: 120ms; --t-med: 200ms;

  /* Temporary aliases (RD17): the screens not redesigned yet still name these; each goes when its last user moves. */
  --font-code: var(--font-data);
  --font-text: var(--font-ui);
  --font-display: var(--font-ui);
  --r-sm: var(--r-2);
  --r-md: var(--r-3);
  --r-lg: var(--r-4);
}

/* 3. DENSITY: phone-sized by default; compact from 1,024 px unless the person chose Comfortable
      (html[data-density="comfortable"], saved on their account, drawn by the server; RD3). Width only. */
:root {
  --fs-xs: 0.75rem;     --lh-xs: 1rem;        /* 12/16 captions, tags, table heads */
  --fs-sm: 0.875rem;    --lh-sm: 1.25rem;     /* 14/20 secondary */
  --fs-md: 1rem;        --lh-md: 1.5rem;      /* 16/24 body on phones */
  --fs-h2: 1rem;        --lh-h2: 1.5rem;      /* card titles */
  --fs-title: 1.375rem; --lh-title: 1.75rem;  /* 22/28 page title */
  --fs-record: 1.5rem;  --lh-record: 1.875rem;/* 24/30 a client's name */
  --fs-input: 1rem;                            /* 16 px: iOS never zooms */
  --ctl: 44px; --ctl-sm: 44px;                 /* every phone target 44 px */
  --row: 64px; --row-photo: 68px;
  --photo-row: 48px;
  --gut: 16px;
  --bar-h: 52px; --tabs-h: 64px;
  --nav-w: 0px;
}
@media (min-width: 1024px) {
  :root:not([data-density="comfortable"]) {
    --fs-xs: 0.75rem;     --lh-xs: 1rem;
    --fs-sm: 0.8125rem;   --lh-sm: 1.125rem;  /* 13/18 */
    --fs-md: 0.875rem;    --lh-md: 1.25rem;   /* 14/20 */
    --fs-h2: 0.875rem;    --lh-h2: 1.25rem;
    --fs-title: 1.25rem;  --lh-title: 1.75rem;/* 20/28 */
    --fs-record: 1.5rem;  --lh-record: 2rem;  /* 24/32 */
    --fs-input: 0.875rem;
    --ctl: 32px; --ctl-sm: 28px;
    --row: 40px; --row-photo: 48px;
    --photo-row: 32px;
  }
  :root[data-density="comfortable"] {
    --fs-sm: 0.875rem; --lh-sm: 1.25rem;
    --fs-md: 0.9375rem; --lh-md: 1.375rem;    /* 15/22 */
    --fs-h2: 0.9375rem; --lh-h2: 1.375rem;
    --fs-title: 1.375rem;
    --fs-input: 0.9375rem;
    --ctl: 40px; --ctl-sm: 36px;
    --row: 52px; --row-photo: 60px;
    --photo-row: 44px;
  }
  :root { --gut: 24px; --bar-h: 48px; --tabs-h: 0px; --nav-w: 76px; }
}
@media (min-width: 1280px) { :root { --nav-w: 232px; } }

/* 4. BASE */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; overflow-x: clip;
  scroll-padding-top: 72px;     /* the 56 px bar never covers a focused field (SC 2.4.11) */
  scroll-padding-bottom: 96px;  /* nor does the phone tab bar */
}
body {
  margin: 0; min-height: 100vh; min-height: 100svh;
  background: var(--deck); color: var(--ink);
  font-family: var(--font-ui); font-size: var(--fs-md); line-height: var(--lh-md); font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-wrap: break-word; overflow-x: clip;
}
img, canvas, svg { display: block; max-width: 100%; }
img { height: auto; -webkit-user-drag: none; }
/* Links stay underlined: the old screens put links in lists and definitions as well as sentences, and water blue alone is 2.3:1
   against the ink around it (WCAG 1.4.1). Navigation, buttons and cards that are links take the line off themselves. */
a { color: var(--pool-700); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
p, h1, h2, h3, ol, ul, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3 { font-family: var(--font-ui); font-weight: var(--w-semi); color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
strong, b { font-weight: var(--w-semi); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-1); }
main:focus, [tabindex="-1"]:focus { outline: none; }
/* Panels, link boxes and notes that receive focus from a script still show where the keyboard is (SC 2.4.7). */
:is(.panel, .invite-ready, .note, .done)[tabindex="-1"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--navy); color: var(--white); }
.ico { width: 20px; height: 20px; flex: 0 0 auto; }
.ico--16 { width: 16px; height: 16px; }
.ico--18 { width: 18px; height: 18px; }
.ico--22 { width: 22px; height: 22px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 300;
  padding: 10px 14px; border-radius: var(--r-2);
  background: var(--navy); color: var(--white); font-weight: var(--w-semi); text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* The signed-out cards' way back ("Back to sign in"): the one small uppercase line HQ keeps. */
.kicker { font-size: var(--fs-sm); font-weight: var(--w-semi); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.kicker a { display: inline-flex; align-items: center; min-height: var(--ctl); color: var(--pool-700); text-decoration: none; }
.kicker a::before { content: "\2190\00a0" / ""; }
.kicker a:hover { text-decoration: underline; }
.fine { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-2); }
.ref { font-family: var(--font-code); font-size: var(--fs-sm); color: var(--ink-2); }
.empty { padding: 16px 0; color: var(--ink-2); }
.stack { display: grid; gap: 18px; }
.acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* 5. BUTTONS (DESIGN-SYSTEM 9): primary = navy with a white label, one per screen; secondary = white with a 3:1 outline;
   quiet = words only; danger = solid red, only to confirm a removal; danger-quiet = red words (RD17). Sizes from --ctl and
   --ctl-sm: 44 px on phones, 32 and 28 px compact, 40 and 36 px comfortable. A label may wrap at 320 px rather than run off. */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: var(--ctl); padding: var(--s-2) var(--s-5);
  border: 1px solid transparent; border-radius: var(--r-2); background: transparent;
  color: var(--ink); font-size: var(--fs-md); font-weight: var(--w-semi); line-height: 1.2; text-decoration: none; text-align: center;
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
  -webkit-user-select: none; user-select: none;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--navy); border-color: var(--navy); color: var(--white); }
.btn--primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: var(--white); }
.btn--secondary { background: var(--white); border-color: var(--control); color: var(--ink); }
.btn--secondary:hover { background: var(--deck); color: var(--ink); }
.btn--quiet { padding-inline: var(--s-4); color: var(--ink-2); }
.btn--quiet:hover { background: var(--deck-2); color: var(--ink); }
.btn--danger { background: var(--danger); border-color: var(--danger); color: var(--white); }
.btn--danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); color: var(--white); }
.btn--danger-quiet { padding-inline: var(--s-4); color: var(--danger); }
.btn--danger-quiet:hover { background: var(--danger-bg); color: var(--danger); }
.btn--sm { min-height: var(--ctl-sm); padding: var(--s-1) var(--s-4); font-size: var(--fs-sm); }
.btn--icon { width: var(--ctl); padding: 0; }
/* The signed-out pages' one big action: 48 px under the thumb, the desktop control size from 1,024 px. */
.btn--lg { min-height: 48px; padding: var(--s-3) var(--s-6); font-size: var(--fs-md); }
@media (min-width: 1024px) { .btn--lg { min-height: var(--ctl); } }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; color: transparent; }
.btn[aria-busy="true"] > * { opacity: 0; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
  border: 2px solid var(--ink); border-right-color: transparent; border-radius: 50%;
  animation: spin 700ms linear infinite;
}
.btn--primary[aria-busy="true"]::after, .btn--danger[aria-busy="true"]::after { border-color: var(--white); border-right-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.linkish {
  min-height: var(--ctl); padding: var(--s-2) 0; border: 0; background: none;
  color: var(--pool-700); text-decoration: underline; text-underline-offset: 3px;
}

/* 6. FIELDS (DESIGN-SYSTEM 9 Forms): label on top, the field at --ctl with 16 px text on phones (iOS never zooms), a 3:1 border, the
   browser's own select arrow (one drawn in CSS would need a data: image, which the CSP refuses). :where() keeps the base field rule
   at one class, so the select, code, focus, error and read-only rules below win by their order. */
.fld { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.fld > label { font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--w-semi); color: var(--ink-2); }
.fld__help { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--ink-3); }
.fld :where(input:not([type="checkbox"], [type="radio"]), select, textarea) {
  width: 100%; min-height: var(--ctl); padding: var(--s-2) var(--s-5);
  border: 1px solid var(--control); border-radius: var(--r-2);
  background-color: var(--white); color: var(--ink);
  font-size: var(--fs-input); line-height: 1.4;
  transition: border-color var(--t-fast) ease;
}
.fld select { padding-right: 32px; }
.fld textarea { min-height: 88px; padding: var(--s-4) var(--s-5); resize: vertical; line-height: var(--lh-md); }
.fld input::placeholder, .fld textarea::placeholder { color: var(--ink-3); opacity: 1; }
/* Chrome keeps keyboard focus on the date and time segments inside those inputs, where :focus-visible never matches. */
.fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible,
.fld input:is([type="date"], [type="time"], [type="month"]):focus-within {
  outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--pool-700);
}
.fld input[aria-invalid="true"], .fld select[aria-invalid="true"], .fld textarea[aria-invalid="true"] { border-color: var(--danger); }
.fld input[readonly], .fld input:disabled, .fld select:disabled, .fld textarea:disabled, .fld textarea[readonly] {
  background-color: var(--deck); color: var(--ink-2); border-style: dashed;
}
.fld__err { display: flex; gap: var(--s-4); align-items: flex-start; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--danger); }
.fld__err::before {
  content: "!"; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: var(--danger); color: var(--white); font-weight: var(--w-bold); font-size: var(--fs-xs); line-height: 18px; text-align: center;
}
.fld--inline { flex: 1 1 220px; }
.check { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.check input[type="checkbox"] { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; accent-color: var(--pool-700); }
.fld input.otp { max-width: 220px; font-family: var(--font-code); font-size: 1.375rem; letter-spacing: 0.35em; }

/* 7. NOTES AND STATUS: a word always carries the meaning; the fill only supports it. Badges take the status tags' tints. */
.note {
  display: grid; gap: 6px; padding: 12px 16px;
  border: 1px solid var(--line-2); border-left: 4px solid var(--pool-700); border-radius: var(--r-md);
  background: var(--white); color: var(--ink); line-height: 1.55;
}
p.note { display: block; }
.note--warn { border-left-color: var(--warn); background: var(--white); color: var(--ink); }
.note--ok { border-left-color: var(--ok); background: var(--white); color: var(--ink); }
.status { min-height: 1.5em; line-height: 1.5; }
.status:empty { min-height: 0; }
.status[data-tone="bad"] { color: var(--danger); font-weight: var(--w-semi); }
.status[data-tone="ok"] { color: var(--ok); font-weight: var(--w-semi); }
.status[data-tone="info"] { color: var(--ink-2); }
.badge {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-1); border: 1px solid var(--muted-line);
  background: var(--muted-bg); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--w-semi); line-height: var(--lh-xs);
  max-width: 100%; /* wraps at 320 px instead of being cut off (SC 1.4.10) */
}
.badge--ok { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok); }
.badge--warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn); }
.badge--bad { border-color: var(--danger-line); background: var(--danger-bg); color: var(--danger); }
.badge--quiet { border-color: var(--line-2); background: var(--white); color: var(--ink-2); }
.env {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-1);
  background: var(--navy-deep); color: var(--white); font-size: var(--fs-xs); font-weight: var(--w-bold); letter-spacing: 0.06em; text-transform: uppercase;
}

/* 8. SIGNED-OUT LAYOUT: a navy band on top (the frame the signed-in rail draws), the mark, one card. */
.shell-auth { background: var(--deck); }
.auth {
  display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; gap: 20px;
  min-height: 100vh; min-height: 100svh;
  padding: 0 var(--gut) max(24px, env(safe-area-inset-bottom));
}
.auth::before {
  content: ""; justify-self: stretch; height: 6px; margin: 0 calc(-1 * var(--gut));
  background: var(--rail);
}
.auth__brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; padding-top: 12px; }
/* The mark on a signed-out page (RD18): the shell's .brand__mark and .brand__word, larger. */
.auth__mark { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.auth__mark .brand__mark { width: 56px; height: 56px; }
.auth__mark .brand__script { font-size: 2.5rem; }
.auth__mark .brand__hq { font-size: 1rem; }
.auth__main { width: 100%; max-width: 480px; }
.auth__main:has(.auth__card--wide) { max-width: 700px; }
/* A card (a signed-out page's box, a client page's section): white on the deck, a hairline and the first elevation. */
.card { background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-3); box-shadow: var(--e-1); }
.auth__card { display: grid; gap: 16px; padding: 24px 20px 28px; border-radius: var(--r-lg); }
.auth__card > div:not([class]) { display: grid; gap: 14px; }
@media (min-width: 520px) { .auth__card { padding: 32px 36px 36px; } }
.auth__h { font-family: var(--font-display); font-weight: var(--w-semi); font-size: var(--fs-record); line-height: var(--lh-record); letter-spacing: -0.015em; color: var(--ink); }
.auth__lede { font-size: var(--fs-md); line-height: 1.55; }
.auth__links { list-style: none; display: grid; gap: 2px; padding-top: 8px; border-top: 1px solid var(--line); }
.auth__links a { display: inline-flex; align-items: center; min-height: 44px; }
/* Trouble signing in? A disclosure keeps its own marker; the padding makes the whole line a 44 px target (spec 5.0). */
.trouble > summary { min-height: 44px; padding-block: 10px; color: var(--pool-700); font-weight: var(--w-semi); cursor: pointer; }
.auth__foot { max-width: 480px; font-size: var(--fs-sm); color: var(--ink-2); text-align: center; }
.auth__foot p + p { margin-top: 4px; }
.auth__foot a { display: inline-flex; align-items: center; min-height: 44px; }
.ready { display: grid; gap: 10px; padding-left: 24px; }
.ready li { padding-left: 4px; line-height: 1.55; }
.ready li::marker { color: var(--ink); font-weight: var(--w-bold); }
ul.ready { list-style: disc; }
.help { display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.help__h { font-family: var(--font-display); font-weight: var(--w-semi); font-size: var(--fs-title); line-height: var(--lh-title); color: var(--ink); }
.help p, .help li { line-height: 1.6; }
.done { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line-2); border-left: 4px solid var(--ok); border-radius: var(--r-md); background: var(--white); color: var(--ink); }
.done__h { font-family: var(--font-display); font-weight: var(--w-semi); font-size: var(--fs-title); line-height: var(--lh-title); color: var(--ink); }
/* Turnstile sizes its widget once, when it draws: a 300 px widget drawn on a wider screen is clipped here when the screen narrows
   (a phone turned upright at 320 px), so it never widens the card past the screen. */
.ts { min-height: 70px; display: grid; align-items: center; min-width: 0; max-width: 100%; overflow-x: clip; }
.ts__wait { font-size: var(--fs-sm); color: var(--ink-2); }
.ts--failed .ts__wait { color: var(--danger); }

/* 9. SETUP STEPS, PASSKEYS, AUTHENTICATOR, CODES */
.stepper { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stepper li {
  display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 4px solid var(--line-2);
  font-size: var(--fs-sm); font-weight: var(--w-semi); line-height: 1.3; color: var(--ink-2);
}
.stepper__n { font-size: var(--fs-md); }
.stepper li[data-state="done"] { border-top-color: var(--pool-700); color: var(--ink); }
.stepper li[data-state="done"] .stepper__n::after { content: " \2713" / ""; color: var(--pool-700); }
.stepper li[data-state="current"] { border-top-color: var(--ink); color: var(--ink); }
@media (max-width: 420px) { .stepper li > span:not(.stepper__n) { display: none; } }
.stepper__now { font-size: var(--fs-sm); font-weight: var(--w-semi); color: var(--ink); }
.step { display: grid; gap: 16px; }
.step__h { font-family: var(--font-display); font-weight: var(--w-semi); font-size: var(--fs-title); line-height: var(--lh-title); color: var(--ink); }
.step__acts { display: flex; flex-wrap: wrap; gap: 12px; }

.keys { list-style: none; display: grid; gap: 8px; }
.keys:empty { display: none; }
.key {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--deck);
}
.key .ico { grid-row: span 2; width: 24px; height: 24px; color: var(--ink-2); }
.key__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: var(--w-semi); }
.key__meta { font-size: var(--fs-sm); color: var(--ink-2); }
.key__acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.key--lost { border: 1px solid var(--danger); }
@media (min-width: 640px) {
  .key { grid-template-columns: auto minmax(0, 1fr) auto; }
  .key__acts { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
}
.tag-synced { font-size: var(--fs-xs); font-weight: var(--w-semi); color: var(--ink-2); }

.totp { display: grid; gap: 16px; }
@media (min-width: 620px) { .totp { grid-template-columns: auto minmax(0, 1fr); align-items: start; } }
.qr { width: max-content; max-width: 100%; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--white); }
.qr canvas { width: 212px; height: auto; aspect-ratio: 1; image-rendering: pixelated; }
.secret {
  display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 10px 12px;
  border: 1px dashed var(--control); border-radius: var(--r-sm); background: var(--deck); color: var(--ink);
  font-family: var(--font-code); font-size: var(--fs-md); letter-spacing: 0.08em; -webkit-user-select: all; user-select: all;
}
.totp__side { display: grid; gap: 14px; align-content: start; }

.codes { display: grid; gap: 14px; }
.codes__list {
  list-style: none; display: grid; gap: 6px; counter-reset: code;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); /* two columns only where a whole code fits (SC 1.4.10) */
  padding: 14px 12px; border: 1px solid var(--control); border-radius: var(--r-md); background: var(--deck);
}
.codes__list li { counter-increment: code; display: flex; gap: 8px; min-width: 0; font-family: var(--font-code); font-size: clamp(0.875rem, 3.6vw, 1rem); }
.codes__list li::before { content: counter(code, decimal-leading-zero); color: var(--ink-2); }
.codes__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.codes__print-h { display: none; }

/* 10. APP SHELL (HQ redesign RD18; DESIGN-SYSTEM 9 App shell, mockups/hq.css 5). Phone: a white top bar, the page, and a navy tab
   bar at the bottom whose fourth tab, More, opens a sheet. 1,024 to 1,279 px: a 76 px navy rail with every label under its icon.
   1,280 px and up: a 232 px navy sidebar. Sizes switch on width only, never on hover or pointer. */
.app { min-height: 100vh; min-height: 100svh; }
.page { min-width: 0; }
@media (min-width: 1024px) {
  /* the rail color runs the full height of the page, not only the sticky first screen */
  .app { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); background: var(--rail); }
  .page { background: var(--deck); }
}

/* 10a. The mark: Sam's logo icon, "Sundays" in Allura (the logo's own script, used nowhere else) and "HQ" in JetBrains Mono. */
.brand__mark { width: 30px; height: 30px; border-radius: 50%; background: var(--cream); flex: 0 0 auto; }
.brand__word { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.brand__script { font-family: var(--font-mark); font-size: 26px; color: var(--ink); }
.brand__hq { font-family: var(--font-data); font-size: 12px; font-weight: var(--w-semi); letter-spacing: 0.12em; color: var(--ink-3); }

/* 10b. Sidebar (from 1,024 px). Its menus are white sheets, so focus inside them is water blue again. */
.side { display: none; }
.navlist { list-style: none; display: grid; gap: 2px; }
@media (min-width: 1024px) {
  .side {
    display: flex; flex-direction: column; gap: var(--s-4);
    position: sticky; top: 0; z-index: 45; height: 100vh; height: 100svh;
    padding: var(--s-5) var(--s-3); background: var(--rail); color: var(--rail-ink);
  }
  .side :focus-visible { outline-color: var(--focus-on-rail); }
  .side .menu :focus-visible { outline-color: var(--focus); }
  .brand { display: flex; align-items: center; gap: var(--s-4); min-height: 40px; padding: 0 var(--s-2); color: var(--white); text-decoration: none; }
  .side .brand__script { color: var(--cream); }
  .side .brand__hq { color: var(--sage-soft); }
  .side .wave { height: 6px; margin: 2px var(--s-2) var(--s-2); border-bottom: 1.5px solid var(--sage); border-radius: 0 0 50% 50% / 0 0 100% 100%; opacity: 0.9; }
  .navlist a {
    position: relative; display: flex; align-items: center; gap: var(--s-5);
    min-height: 32px; padding: 0 var(--s-4); border-radius: var(--r-2);
    color: var(--rail-ink); font-size: 0.875rem; font-weight: var(--w-medium); text-decoration: none;
  }
  .navlist a:hover { background: var(--rail-hover); color: var(--white); }
  .navlist a[aria-current="page"] { background: var(--rail-2); color: var(--white); font-weight: var(--w-semi); }
  .side .navlist a[aria-current="page"]::before { content: ""; position: absolute; left: -6px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 2px 2px 0; background: var(--sage-soft); }
  .navlist .count { margin-left: auto; }
  .navsep { height: 1px; margin: var(--s-3) var(--s-2); background: var(--rail-line); }
  .side__foot { margin-top: auto; display: grid; gap: var(--s-2); }
  .btn--rail { justify-content: flex-start; min-height: 32px; padding: 0 var(--s-4); color: var(--rail-ink); font-size: 0.875rem; font-weight: var(--w-medium); text-decoration: none; }
  .btn--rail:hover { background: var(--rail-hover); color: var(--white); }
  .btn--rail[aria-current="page"] { background: var(--rail-2); color: var(--white); }
}
/* The person: initial, name and role; a click opens Your account and Sign out above it. */
.me { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-2); color: var(--rail-ink); }
.me:hover { background: var(--rail-hover); color: var(--white); }
.me__text { display: grid; min-width: 0; text-align: left; }
.me__name { overflow: hidden; color: var(--white); font-size: 0.875rem; font-weight: var(--w-semi); line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.me__role { font-size: 0.75rem; line-height: 1rem; color: var(--rail-ink-2); }
.avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sage-soft); color: var(--navy-deep); font-size: 0.75rem; font-weight: var(--w-bold); flex: 0 0 auto; }
.me-menu .menu { left: 0; right: auto; }

/* "+ New": a disclosure, so it works with no script. The sidebar's is a white button; the phone's is the top bar's "+". */
.new { position: relative; }
.new > summary { min-height: var(--ctl); list-style: none; cursor: pointer; }
.new > summary::-webkit-details-marker { display: none; }
.new__btn { display: flex; align-items: center; justify-content: center; gap: var(--s-3); padding: 0 var(--s-5); border-radius: var(--r-2); background: var(--white); color: var(--ink); font-size: 0.875rem; font-weight: var(--w-semi); }
.new__btn:hover { background: var(--cream); }
.new .menu { left: 0; right: auto; top: calc(100% + 6px); min-width: 200px; }
.bar .new .menu { left: auto; right: 0; }

/* Rail mode, 1,024 to 1,279 px: icon over a 12 px label, 76 px wide. Labels never hide (no hover-only names); the person's words stay
   for screen readers. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .side { padding-inline: var(--s-2); align-items: stretch; }
  .brand { justify-content: center; padding: 0; }
  .side .brand__word, .side .wave { display: none; }
  .new__btn { padding: 0; }
  .new__btn span { display: none; }
  .navlist a { flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: var(--s-2) 0; font-size: 0.75rem; line-height: 1rem; text-align: center; }
  .side .navlist a[aria-current="page"]::before { left: -4px; }
  .navlist .count { position: absolute; top: 4px; right: 10px; margin: 0; }
  .me { justify-content: center; padding: var(--s-3) 0; }
  .me__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .side__foot .btn--rail { flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: var(--s-2) 0; font-size: 0.75rem; line-height: 1rem; }
}

/* 10c. Top bar: the mark (or a detail page's back link) on a phone, then the environment badge and the bar's buttons. */
.bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--s-4);
  min-height: var(--bar-h); padding: env(safe-area-inset-top) var(--s-3) 0 var(--gut);
  background: var(--white); border-bottom: 1px solid var(--line);
}
.bar__brand { display: flex; align-items: center; gap: var(--s-4); min-height: 44px; color: var(--ink); text-decoration: none; }
.bar__brand .brand__mark { box-shadow: inset 0 0 0 1px var(--line-2); }
.bar__brand .brand__script { font-size: 24px; }
.bar__back { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; min-width: 0; padding-right: var(--s-4); color: var(--ink); font-weight: var(--w-semi); text-decoration: none; }
.bar__end { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
/* The top-bar search (RD21): from 1,024 px a field in the bar; under 1,024 px the bar's search button opens the same field across the bar
   (.bar--search: the mark or back link and the bar's buttons step aside until Close; review round 3 of lane A, finding 1, RD42). Results open in place
   under the field. The field's border is the 3:1 --control. Its hint is a span over the empty field, as the Clients search's (a placeholder
   cannot change with the width): the long words from 1,024 px, "Search" on a phone. */
.gsearch { position: relative; display: none; align-items: center; gap: var(--s-2); }
.gsearch__field { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.gsearch__field > .ico { position: absolute; left: 10px; color: var(--ink-3); pointer-events: none; }
.gsearch input {
  width: 100%; min-width: 0; height: var(--ctl); padding: 0 12px 0 34px;
  border: 1px solid var(--control); border-radius: var(--r-2); background: var(--deck);
  font-size: var(--fs-input); color: var(--ink);
}
.gsearch input:focus { background: var(--white); border-color: var(--pool-700); outline: 2px solid var(--focus); outline-offset: 1px; }
.gsearch__hint { position: absolute; left: 35px; right: 13px; overflow: hidden; white-space: nowrap; color: var(--ink-3); font-size: var(--fs-input); pointer-events: none; }
.gsearch__hint .s-long { display: none; }
.gsearch input:not(:placeholder-shown) ~ .gsearch__hint { display: none; }
.gsearch__results {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; max-height: 60vh; overflow-y: auto;
  padding: var(--s-2); border: 1px solid var(--line-2); border-radius: var(--r-3); box-shadow: var(--e-2);
  background: var(--white); color: var(--ink); list-style: none;
}
.gsearch__results a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-4); min-height: var(--ctl); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2); color: var(--ink); font-weight: var(--w-medium); text-decoration: none;
}
.gsearch__results a:hover { background: var(--deck); }
.gsearch__meta { color: var(--ink-3); font-size: var(--fs-sm); font-weight: var(--w-regular); }
@media (max-width: 1023.98px) {
  .bar--search > .bar__brand, .bar--search > .bar__back, .bar--search > .bar__end { display: none; }
  .bar--search .gsearch { display: flex; flex: 1 1 auto; min-width: 0; }
}
@media (min-width: 1024px) {
  .gsearch { display: flex; width: min(420px, 46vw); }
  .gsearch input { height: 32px; font-size: 0.875rem; }
  .gsearch__hint { font-size: 0.875rem; }
  .gsearch__hint .s-long { display: inline; }
  .gsearch__hint .s-short { display: none; }
}
/* A 320 px phone: the mark's words would push the bar's buttons off the screen, so only the icon stays (the link keeps its name). */
@media (max-width: 359.98px) { .bar__brand .brand__word { display: none; } }
@media (min-width: 1024px) {
  .bar { padding-right: var(--gut); }
  .bar__brand, .bar__back { display: none; }
}
/* Width-only visibility helpers (never pointer or hover) */
@media (max-width: 1023.98px) { .hide-phone { display: none !important; } }
@media (min-width: 1024px) { .only-phone, .only-phone-inline { display: none !important; } }

/* 10d. Phone tab bar: two tabs for the field roles, four for the office (More last). More's sheet rises above the bar over a scrim; a
   tap on the scrim is a tap on More, so it closes with no script. */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  min-height: var(--tabs-h); padding-bottom: env(safe-area-inset-bottom);
  background: var(--rail); border-top: 1px solid var(--navy-2);
}
.tabs > a, .tabs__more > summary {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 56px; color: var(--rail-ink); font-size: 0.75rem; font-weight: var(--w-medium); line-height: 1rem; text-decoration: none;
}
.tabs > a[aria-current="page"], .tabs__more[open] > summary { color: var(--white); font-weight: var(--w-semi); }
.tabs > a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 2px 2px; background: var(--sage-soft); }
.tabs > a .count { position: absolute; top: 6px; left: calc(50% + 6px); }
.tabs :focus-visible { outline-color: var(--focus-on-rail); }
.tabs__more > summary { min-height: 56px; list-style: none; cursor: pointer; }
.tabs__more > summary::-webkit-details-marker { display: none; }
.tabs__more[open] > summary::before { content: ""; position: fixed; inset: 0 0 calc(var(--tabs-h) + env(safe-area-inset-bottom)) 0; background: var(--scrim); }
.tabs__sheet {
  position: fixed; left: 0; right: 0; bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom));
  max-height: calc(100svh - 120px); overflow-y: auto;
  padding: var(--s-4) var(--s-4) var(--s-5); border-radius: var(--r-4) var(--r-4) 0 0; box-shadow: var(--e-3);
  background: var(--white); color: var(--ink);
}
.tabs__sheet :focus-visible { outline-color: var(--focus); }
@media (min-width: 1024px) { .tabs { display: none; } }

/* 10e. Menus (+ New, the person's menu, the More sheet): a white panel of 44 px rows on phones, the --ctl size on desktop. */
.menu-wrap { position: relative; }
.menu-wrap > summary { min-height: var(--ctl); list-style: none; cursor: pointer; }
.menu-wrap > summary::-webkit-details-marker { display: none; }
.menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; min-width: 220px;
  max-height: calc(100svh - 120px); overflow-y: auto;
  padding: var(--s-2); border: 1px solid var(--line-2); border-radius: var(--r-3); box-shadow: var(--e-2);
  background: var(--white); color: var(--ink); list-style: none;
}
.menu a, .menu button {
  display: flex; align-items: center; gap: var(--s-4); width: 100%;
  min-height: var(--ctl); padding: 0 var(--s-4); border: 0; border-radius: var(--r-2); background: none;
  color: var(--ink); font-size: var(--fs-md); font-weight: var(--w-medium); text-align: left; text-decoration: none;
}
.menu a:hover, .menu button:hover { background: var(--deck); }
.menu a[aria-current="page"] { font-weight: var(--w-semi); }
.menu .ico { color: var(--ink-2); }
.menu hr, .menu .menu__sep { border: 0; border-top: 1px solid var(--line); margin: var(--s-2) 0; }
.menu--up { top: auto; bottom: calc(100% + 4px); }
.menu--sheet { position: static; min-width: 0; max-height: none; overflow: visible; padding: 0; border: 0; box-shadow: none; }

/* Counts (the Pipeline's number in the sidebar and the tab bar): the only pills; their words are read with the link. */
.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--sage-soft); color: var(--navy-deep); font-size: 0.75rem; font-weight: var(--w-bold); font-variant-numeric: tabular-nums; line-height: 1; }
/* The alerts bell's number (RD20): red with white words on the white top bar. */
.count--light { background: var(--danger); color: var(--white); }
.has-count { position: relative; }
.bellcount { position: absolute; top: 2px; right: 2px; }
/* On the 32 px desktop button the count sits at the button's corner so the bell still shows (review round 1 of lane A: at 2px it covered 72%
   of the bell); its right edge stops at the 4 px gap before Help. */
@media (min-width: 1024px) { .bellcount { top: -2px; right: -4px; } }

/* 10f. Main. The screens not yet redesigned put their parts straight in <main>: one track that may shrink below its content (a wide child
   scrolls inside itself instead of widening the page), with room under it for the phone tab bar. */
.main {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; width: 100%; max-width: 1100px; min-width: 0; margin: 0 auto;
  padding: 20px var(--gut) calc(var(--tabs-h) + 32px + env(safe-area-inset-bottom));
}
@media (min-width: 1024px) {
  html { scroll-padding-top: 64px; scroll-padding-bottom: 24px; }
  .main { padding: 32px 40px 64px; }
}
/* A landscape phone or 400% zoom (256 px tall): the sticky bar and the fixed tab bar would cover almost half the screen
   (SC 1.4.10), so they scroll away with the page there. */
@media (max-width: 1023.98px) and (max-height: 480px) {
  .bar, .tabs { position: static; }
  .main { padding-bottom: 20px; }
}

/* 11. PAGE PARTS: header, panels, the Settings index */
/* The page header (RD19, mockups/hq.css 6): one line, the title, a count in grey and the actions on the right, with no lede. <main> gives
   the gutter until each screen is redesigned, so the header and the breadcrumb take none of their own. */
.ph { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4) var(--s-5); }
.ph h1 { min-width: 0; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--w-semi); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ph__count { color: var(--ink-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.ph__acts { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
/* A detail page's way back on desktop ("Clients > Dana Whitfield"); phones have the back link in the top bar. */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); min-width: 0; font-size: var(--fs-sm); color: var(--ink-3); }
.crumbs a { color: var(--ink-2); }
.crumbs + .ph { margin-top: -12px; }
@media (max-width: 1023.98px) { .crumbs { display: none; } }
/* The link is a 24 px target where the breadcrumb shows (WCAG 2.5.8; it was 20 px tall). */
@media (min-width: 1024px) { .crumbs a { display: inline-flex; align-items: center; min-height: 24px; } }
/* "How this works": a page's rules behind a disclosure, one line in front (the Settings pages until phase 6). */
.why { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.why > summary { display: inline-flex; align-items: center; gap: 4px; min-height: var(--ctl-sm); color: var(--pool-700); font-weight: var(--w-semi); cursor: pointer; list-style: none; }
.why > summary::-webkit-details-marker { display: none; }
.why > p { max-width: 62ch; margin-top: var(--s-2); color: var(--ink-2); }
.panel {
  display: grid; gap: 14px; min-width: 0; padding: 20px 16px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--e-1);
}
@media (min-width: 640px) { .panel { padding: 24px 28px; } }
.sec-h { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: var(--w-semi); font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--ink); }
/* Static placeholder lines while a request is out (nothing blinks; HQ 7.1 skeleton rows). */
.loading { display: grid; gap: 10px; padding: 10px 0; }
.loading span { display: block; width: 70%; height: 12px; border-radius: 2px; background: var(--deck-2); }
.loading span:nth-child(2) { width: 90%; }
.loading span:nth-child(3) { width: 45%; }

/* 12. LISTS: rows (people, sessions, approvals), segments, tabs, key-value lists */
/* One track that may shrink below its content, so a long link in a row wraps instead of widening the page. */
.rows { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.rows:empty { display: none; }
.row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 14px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--white);
}
.panel .row, .card .row { background: var(--deck); }
@media (min-width: 720px) { .row { grid-template-columns: minmax(0, 1fr) auto; } }
.row__main { display: grid; gap: 3px; min-width: 0; }
.row__t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: var(--w-semi); }
.row__m { font-size: var(--fs-sm); color: var(--ink-2); }
.row__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.row--current { border: 1.5px solid var(--pool-700); }
/* A row that is one link (Today's lines, the Settings sections): the link is the 44 px target. */
.row__link { display: flex; align-items: center; min-height: 2.75rem; }
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; max-width: 100%; padding: 2px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--deck); }
.seg__b { min-height: 44px; padding: 8px 16px; border: 0; border-radius: var(--r-1); background: transparent; color: var(--ink-2); font-weight: var(--w-semi); white-space: nowrap; }
.seg__b:hover { background: var(--white); color: var(--ink); }
.seg__b[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.sectabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.sectabs__t {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 14px;
  border: 0; background: transparent; color: var(--ink-2); font-weight: var(--w-semi); white-space: nowrap; box-shadow: inset 0 -3px 0 transparent;
}
.sectabs__t[aria-selected="true"] { color: var(--ink); font-weight: var(--w-bold); box-shadow: inset 0 -3px 0 var(--pool-700); }
/* On a phone every tab stays in view (Messages cut "Needs your OK" to "Needs yo"): equal columns, a label may wrap. */
@media (max-width: 479px) {
  .sectabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .sectabs__t { justify-content: center; padding: 8px 6px; line-height: 1.25; text-align: center; white-space: normal; }
}
.sectabs__t:hover { color: var(--ink); }
.sectabs__n:not(:empty) { padding: 0 8px; border-radius: var(--r-pill); background: var(--deck-2); color: var(--ink); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.tabpanel { display: grid; gap: 14px; padding-top: 6px; }
/* Key and value (mockups/hq.css, merged with the old .kv of Today, the inquiry page, Team and Your account): two columns at every width,
   a hairline under each pair; a long email or street wraps instead of widening the page. */
.kv { display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); }
.kv dt, .kv dd { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-md); line-height: var(--lh-md); }
.kv dt { padding-right: var(--s-4); color: var(--ink-3); font-size: var(--fs-sm); font-weight: var(--w-semi); }
.kv dd { min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.kv > :nth-last-child(-n + 2) { border-bottom: 0; }
.kv__line { display: block; }
.kv__line--switch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
@media (max-width: 1023.98px) { .kv { grid-template-columns: minmax(96px, 44%) minmax(0, 1fr); } }
/* A contact: Edit at the top right, beside the first line. */
.kv__dd--edit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--s-3); }
.kv__dd--edit > .kv__line { grid-column: 1; }
.kv__dd--edit > .kv__edit { grid-column: 2; grid-row: 1 / span 2; }
.kv__line + .kv__line { margin-top: 2px; }

/* 13. TODAY */
.dash { display: grid; gap: 20px; }
.alerts { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line-2); border-top: 4px solid var(--danger); border-radius: var(--r-lg); background: var(--white); color: var(--ink); }
.alerts__list { list-style: none; display: grid; gap: 8px; }
.alert {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 14px; align-items: center;
  padding: 12px 14px; border-left: 4px solid var(--danger); border-radius: var(--r-sm); background: var(--deck); color: var(--ink);
}
@media (min-width: 720px) { .alert { grid-template-columns: minmax(0, 1fr) auto; } }
.alert__t { font-weight: var(--w-semi); }
.alert__m { font-size: var(--fs-sm); color: var(--ink-2); }
/* An alert with somewhere to act: its call to action beside Got it, and the files it names under its words (review round 3). */
.alert__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.alert__links { list-style: none; display: grid; gap: 2px; margin-top: 4px; }

/* 13b. INQUIRIES: the inquiry page, Add inquiry, Held for review and the compare page (plan P1 Task D13). One column on a phone; the
   compare page's two files sit side by side from 768 px. */
.form { display: grid; gap: 16px; max-width: 40rem; }
.form__acts { display: flex; flex-wrap: wrap; gap: 10px; }
/* A batch-save form with changes not saved yet (lib/ui.js draftGuard, review round 1): its Save bar stays in reach above the phone's tab
   bar, with "Not saved yet." beside the button. */
.form__acts--dirty {
  position: sticky; z-index: 6; bottom: calc(72px + env(safe-area-inset-bottom)); align-items: center;
  padding: 10px 0; border-top: 1px solid var(--line); background: var(--deck);
}
@media (min-width: 1024px) { .form__acts--dirty { bottom: 0; } }
@media (max-width: 1023.98px) and (max-height: 480px) { .form__acts--dirty { position: static; } }
.draft-note { margin: 0; padding: 6px 12px; }
.lines { list-style: none; display: grid; gap: 6px; }
.lines .fine { display: block; }
.inq { display: grid; gap: 16px; }
.inq__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.inq__line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.inq__line > .fine { flex-basis: 100%; }
.inq__name, .inq__reason { font-weight: var(--w-semi); }
.inq__val { overflow-wrap: anywhere; }
.cmp { display: grid; gap: 16px; }
.cmp__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 768px) { .cmp__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cmp__acts { display: flex; flex-wrap: wrap; gap: 10px; }

/* 13c. PIPELINE (plan P1 Task E3, spec 5.5): on a phone, filter chips with their counts and one column at a time; from 1,024 px the
   chips go and every lit column stands side by side. A card is one link, never draggable (WCAG 2.5.7). */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-f {
  min-height: 2.75rem; padding: 8px 16px; border: 1px solid var(--control); border-radius: var(--r-sm);
  background: var(--white); color: var(--ink); font-weight: var(--w-semi); line-height: 1.25; text-align: left;
}
.chip-f[aria-pressed="true"] { border-color: var(--pool-700); background: var(--pool-50); color: var(--pool-800); }
.chip-f:hover { background: var(--deck); color: var(--ink); }
.chip-f[aria-pressed="true"]:hover { background: var(--pool-100); color: var(--pool-800); }
.board { min-width: 0; }
.board__cols { display: grid; gap: 16px; }
.pcol { display: grid; gap: 10px; align-content: start; min-width: 0; }
.pcol--off { display: none; }
.pcards { display: grid; gap: 8px; list-style: none; }
.pcard {
  display: grid; gap: 2px; min-height: 2.75rem; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--white); color: var(--ink); text-decoration: none; overflow-wrap: anywhere;
}
.pcard:hover { border-color: var(--pool-700); }
.pcard__name { font-weight: var(--w-bold); color: var(--pool-700); text-decoration: underline; text-underline-offset: 3px; }
.pcard__want, .pcard__next { font-weight: var(--w-semi); }
.pcard__m { color: var(--ink-2); font-size: var(--fs-sm); }
@media (min-width: 1024px) {
  .chips { display: none; }
  .board__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
  .pcol--off { display: grid; }
}

/* 13d. A CLIENT'S PAGE (HQ redesign Chunk 6, RD28; mockups/hq.css "Client page", "Key facts", "Cards and sections"). One page, no tabs:
   the breadcrumb (desktop), the header (the initials on the hatch where the house photo goes, the name, the status tag, the address line
   and the actions), the facts strip (the page's only summary), a jump bar stuck under the top bar at every width, then the cards: one
   column on a phone, two from 1,024 px (the work on the left, the context on the right), in the same order. */
.wrap { padding: 0 var(--gut); }
.wrap--detail { max-width: 1280px; }
.main--flush > .crumbs { padding: var(--s-5) var(--gut) 0; }
.chead { display: grid; gap: var(--s-6); padding: var(--s-5) var(--gut) var(--s-6); }
/* Until phase 5 brings the photo and Add house photo, a phone's header starts with the name; the hatch shows from 1,024 px. */
@media (max-width: 1023.98px) { .chead__cover:has(> .cover-none) { display: none; } .chead { gap: var(--s-5); } }
.chead__cover { position: relative; margin: 0 calc(var(--gut) * -1); }
/* No house photo yet (phase 5 adds them): the initials on the hatch, never a broken-image box. */
.cover-none {
  display: grid; place-items: center; align-content: center; gap: var(--s-4); height: 64px; border-bottom: 1px solid var(--line-2);
  background: repeating-linear-gradient(135deg, var(--deck) 0 6px, var(--deck-2) 6px 7px); color: var(--ink-2);
}
.cover-none__ini { font-size: 1.75rem; line-height: 1; font-weight: var(--w-bold); letter-spacing: 0.02em; }
.chead__id { display: grid; gap: var(--s-3); min-width: 0; }
.chead__name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); min-width: 0; }
.chead__name h1 { min-width: 0; font-size: var(--fs-record); line-height: var(--lh-record); font-weight: var(--w-semi); letter-spacing: -0.015em; overflow-wrap: anywhere; }
.chead__name > span:empty { display: none; }
.chead__line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3) var(--s-5); min-width: 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.chead__line > span { min-width: 0; overflow-wrap: anywhere; }
.chead__acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--s-3); }
.chead__acts .btn { flex-direction: column; gap: 2px; font-size: var(--fs-xs); min-height: 56px; }
@media (min-width: 1024px) {
  .chead { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-7); padding-top: var(--s-5); }
  .chead__cover { margin: 0; }
  .cover-none { width: 168px; height: 112px; gap: var(--s-2); border: 1px solid var(--line-2); border-radius: var(--r-3); }
  .cover-none__ini { font-size: 1.25rem; }
  .chead__acts { display: flex; align-self: start; padding-top: var(--s-2); }
  .chead__acts .btn { flex-direction: row; gap: var(--s-3); font-size: var(--fs-md); min-height: var(--ctl); }
}
/* The key facts: two columns on a phone (an odd last fact takes the whole row); from 1,024 px one row of equal columns, as many as the
   facts, five for a money role and four otherwise (review round 3 of lane A, finding 3, RD44: five fixed columns left a four-fact strip's
   fifth an empty grey block). */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line-2); border-radius: var(--r-3); overflow: hidden; }
.facts > div { display: grid; align-content: start; gap: 2px; min-width: 0; padding: var(--s-4) var(--s-5); background: var(--white); min-height: 64px; }
.facts dt { font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--w-semi); color: var(--ink-3); }
.facts dd { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; font-size: var(--fs-md); font-weight: var(--w-medium); color: var(--ink); overflow-wrap: anywhere; }
.facts dd .small { font-size: var(--fs-xs); color: var(--ink-3); font-weight: var(--w-regular); }
@media (min-width: 1024px) {
  .facts { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .facts > div { min-height: 58px; }
}
@media (max-width: 1023.98px) { .facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* The jump bar: one row of links that scrolls sideways, stuck under the top bar; the current one underlined (client.js). */
.jump { position: sticky; top: calc(var(--bar-h) + env(safe-area-inset-top)); z-index: 30; display: flex; gap: var(--s-2); margin-top: var(--s-5); padding: 0 var(--gut); overflow-x: auto; background: var(--deck); border-bottom: 1px solid var(--line-2); scrollbar-width: none; }
.jump::-webkit-scrollbar { display: none; }
.jump a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--w-medium); white-space: nowrap; text-decoration: none; }
.jump a:hover { color: var(--ink); }
.jump a:focus-visible { outline-offset: -2px; }
.jump a[aria-current="true"] { color: var(--ink); font-weight: var(--w-semi); box-shadow: inset 0 -2px 0 var(--pool-700); }
@media (min-width: 1024px) { .jump a { min-height: 40px; } }
.cgrid { display: grid; gap: var(--s-5); padding: var(--s-6) var(--gut) 0; }
.cgrid__col { display: grid; gap: var(--s-5); align-content: start; min-width: 0; }
@media (min-width: 1024px) { .cgrid { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); align-items: start; } }
/* A card: its heading line (the h2, who sees it, its actions) over its body. */
.card__h { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-4); min-height: 44px; padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--line); }
.card__h h2, .card__h .who { flex: 0 0 auto; max-width: 100%; }
.card__h h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--w-semi); }
.card__h .who { color: var(--ink-3); font-size: var(--fs-xs); line-height: var(--lh-xs); }
.card__h .card__acts { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.card__acts:empty { display: none; }
.card[tabindex="-1"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.csub__h { font-size: var(--fs-md); font-weight: var(--w-semi); }
/* A card's body: padded blocks with a hairline between them; a flush block (a small table) runs to the card's edges; an empty card is one
   line and its action. */
.card__b { display: grid; gap: var(--s-4); min-width: 0; padding: var(--s-5) var(--s-6); }
.card__b--flush { min-width: 0; padding: 0; }
@media (max-width: 1023.98px) { .card__b { padding: var(--s-4) var(--s-6); } }
.card__b > .btn { justify-self: start; }
.codes__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
:is(.card__b, .card__b--flush, .acc3, .see) + :is(.card__b, .card__b--flush, .acc3) { border-top: 1px solid var(--line); }
.card__b .who { color: var(--ink-3); font-size: var(--fs-xs); line-height: var(--lh-xs); }
.readings__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
/* Rows inside a card (codes, keys): a flat list with a hairline between, the buttons beside the words when both fit, else under them (review
   round 1 of lane A: two columns at every width left a lockbox's words 12 px wide at 390 px, under its buttons). */
.card__b .rows { gap: 0; }
.card__b .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: var(--s-3) 0; border: 0; border-radius: 0; background: none; }
.card__b .row > .row__main { flex: 1 1 10rem; }
.card__b .row + .row { border-top: 1px solid var(--line); }
.main--flush > .status { margin: var(--s-4) var(--gut) 0; }
.card__b .acts, .card__b.acts { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.card__empty { display: grid; justify-items: start; gap: var(--s-3); padding: var(--s-5) var(--s-6); color: var(--ink-2); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.house + .house, .pool + .pool { border-top: 4px solid var(--deck); }
.house__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.house__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); color: var(--ink-2); font-size: var(--fs-sm); line-height: var(--lh-sm); }
/* The header's parts: client.js fills #head-tag, #head-line and #head-acts with one wrapper each, laid out as its children. */
.chead__tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.chead__addr, .chead__btns { display: contents; }
.chead__addr > span { min-width: 0; overflow-wrap: anywhere; }
.chead__id > .note { margin-top: var(--s-2); }
/* Location and access: the rows a tech reads on the job day, each with its icon, then the foot. */
.acc3 { display: grid; gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.acc3 > div { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-6); background: var(--white); }
.acc3 .k { display: block; font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--w-semi); color: var(--ink-3); }
.acc3 .v { display: block; font-size: var(--fs-md); line-height: var(--lh-md); overflow-wrap: anywhere; }
.acc3 .ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-2); background: var(--deck-2); color: var(--ink-2); }
.acc3__acts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.acc3__acts:empty { display: none; }
.see { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; padding: var(--s-4) var(--s-6) var(--s-5); font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--ink-3); }
/* Readings: a test-kit printout, the label in capitals, the value in mono. */
.readings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line-2); border-radius: var(--r-2); overflow: hidden; }
.readings > div { min-width: 0; padding: 6px var(--s-4); background: var(--white); }
.readings dt { font-family: var(--font-data); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.readings dd { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
@media (min-width: 1024px) { .readings { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* Small tables inside cards (equipment). Under 768 px the table becomes a two-line list (it was 391 px wide at 390 and scrolled sideways);
   the markup carries explicit table roles so screen readers keep the table while the boxes change. Line 1: what and its make; line 2: serial
   and warranty, then Edit. */
.mini { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.mini th { padding: 6px var(--s-6); text-align: left; font-size: var(--fs-xs); font-weight: var(--w-semi); color: var(--ink-3); background: var(--deck); border-bottom: 1px solid var(--line); }
.mini td { padding: 8px var(--s-6); border-bottom: 1px solid var(--line); vertical-align: top; }
.mini tr:last-child td { border-bottom: 0; }
.mini .c-act { width: 1%; text-align: right; white-space: nowrap; }
.mini .lbl { display: none; }
@media (max-width: 767.98px) {
  .mini thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mini, .mini tbody { display: block; }
  .mini tr { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-5); row-gap: var(--s-2); padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--line); }
  .mini tr:has(> .c-act) { padding-right: calc(var(--s-6) + 64px); }
  .mini tr:last-child { border-bottom: 0; }
  .mini tr::after { content: ""; flex: 0 0 100%; order: 1; height: 0; }
  .mini td { display: inline; min-width: 0; padding: 0; border: 0; }
  .mini td:nth-child(1) { font-weight: var(--w-semi); }
  .mini td:nth-child(2) { flex: 1 1 0; color: var(--ink-2); }
  .mini td:nth-child(3), .mini td:nth-child(4) { order: 2; color: var(--ink-2); font-size: var(--fs-sm); }
  .mini td.c-act { position: absolute; right: var(--s-6); top: 50%; transform: translateY(-50%); width: auto; }
  .mini .lbl { display: inline; font-family: var(--font-ui); letter-spacing: 0; }
}
/* Notes on a client's page: who sees each one, labeled (spec 4.3: techs never see office notes). Scoped to a card's body, since .note is
   also the notice box of the other screens. */
.notes { display: grid; gap: var(--s-4); }
.card__b .note { display: block; padding: var(--s-4) var(--s-5); border: 0; border-left: 3px solid var(--line-2); border-radius: 0 var(--r-2) var(--r-2) 0;
  background: var(--deck); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.card__b .note > p + p { margin-top: 2px; }
.note__who { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--w-semi); color: var(--ink-3); }
/* Activity: a short timeline, the day in mono. */
.tl { list-style: none; margin: 0; padding: var(--s-3) var(--s-6) var(--s-4); }
.tl li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--s-4); padding: 7px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.tl li:last-child { border-bottom: 0; }
.tl time { font-family: var(--font-data); font-size: 0.75rem; color: var(--ink-3); padding-top: 1px; }
.code__val { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.code__mask, .code__shown { font-family: var(--font-code); font-size: 1.125rem; letter-spacing: 0.08em; }
.code__shown { padding: 2px 10px; border-radius: var(--r-sm); background: var(--deck); color: var(--ink); font-weight: var(--w-bold); }
.code__kind { font-weight: var(--w-semi); }
.code__label { color: var(--ink-2); }
.cv-price { display: grid; gap: 8px; }
.cv-total { font-weight: var(--w-bold); color: var(--ink); }
.cv-new { display: grid; gap: 14px; }

/* A client's page on a phone: tighter card headings, key and value rows, facts and gaps, so a typical file is 4 screens or less at 390 px
   (BUILD-PLAN phase 3; every control stays 44 px). A key and value row is tighter above and below only: the key keeps its right padding,
   its only gap from the value (review round 2 of lane A). */
@media (max-width: 1023.98px) {
  .card__h { padding: var(--s-3) var(--s-6); }
  .kv dt, .kv dd { padding-block: 4px; }
  .facts > div { min-height: 0; }
  .jump { margin-top: var(--s-4); }
  .cgrid { padding-top: var(--s-5); }
  .chead { padding: var(--s-4) var(--gut) var(--s-5); }
  .acc3 > div { padding: var(--s-3) var(--s-6); }
  .tl li { padding: 5px 0; }
}

/* The top bar plus the stuck jump bar (52 + 45 px on a phone, 48 + 41 px from 1,024 px) never cover a focused control (SC 2.4.11 and
   2.4.12, review round 1); a landscape phone or 400% zoom lets the jump bar scroll away like the bar and the tab bar (SC 1.4.10). Kept
   before html.has-toast, which wins while a toast shows. */
html:has(.jump) { scroll-padding-top: calc(var(--bar-h) + 64px); }
@media (max-width: 1023.98px) and (max-height: 480px) {
  .jump { position: static; }
  html:has(.jump) { scroll-padding-top: 16px; }
}

/* 13e. THE CLIENTS LIST (HQ redesign Chunk 5, RD25 to RD27; mockups/hq.css 6 to 11). Its parts carry their own gutter (.main--flush):
   the header line, the saved views as underline tabs, one toolbar row (search, chips, Clear filters, Sort), one white frame holding the
   table from 1,024 px and the two-line phone list below it (the same rows), its empty block and footer, then the marks' legend. */
.main--flush { display: block; max-width: none; padding: 0 0 calc(var(--tabs-h) + 16px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .main--flush { padding: 0 0 var(--s-11); } }
.main--flush > .ph { padding: var(--s-6) var(--gut) var(--s-5); }
.main--flush > noscript > .note { margin: 0 var(--gut) var(--s-5); }
/* Saved views: underline tabs with live counts, one line that scrolls sideways on a phone (the current one is scrolled into view). */
.views { display: flex; gap: var(--s-2); padding: 0 var(--gut); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line-2); }
.views::-webkit-scrollbar { display: none; }
.views a {
  position: relative; display: inline-flex; align-items: center; gap: var(--s-3); flex: 0 0 auto;
  min-height: 44px; padding: 0 var(--s-4); color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--w-medium); white-space: nowrap; text-decoration: none;
}
.views a:hover { color: var(--ink); }
.views a:focus-visible { outline-offset: -2px; }
.views a[aria-current="page"] { color: var(--ink); font-weight: var(--w-semi); }
.views a[aria-current="page"]::after { content: ""; position: absolute; left: var(--s-4); right: var(--s-4); bottom: 0; height: 2px; background: var(--pool-700); }
.views .n { color: var(--ink-3); font-variant-numeric: tabular-nums; font-weight: var(--w-medium); }
@media (min-width: 1024px) { .views a { min-height: 36px; } }
/* One toolbar row. The search hint is a span laid over the empty field (a placeholder cannot change with the width and was cut off):
   "Search clients by name, town, ZIP, phone" from 1,280 px, "Search clients" below, each the start of the field's name (WCAG 2.5.3, RD46);
   it hides as soon as the field holds text. No script. */
.tb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); padding: var(--s-5) var(--gut); }
.tb__end { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.search { position: relative; display: flex; align-items: center; flex: 1 1 160px; min-width: 0; max-width: 340px; }
@media (max-width: 1023.98px) { .search { max-width: none; } }
.search .ico { position: absolute; left: 10px; color: var(--ink-3); pointer-events: none; }
.search input {
  width: 100%; min-height: var(--ctl); padding: 0 var(--s-5) 0 36px;
  border: 1px solid var(--control); border-radius: var(--r-2); background: var(--white); color: var(--ink); font-size: var(--fs-input);
}
.search input:focus { border-color: var(--pool-700); outline: 2px solid var(--focus); outline-offset: 1px; }
.search__hint { position: absolute; left: 37px; right: 12px; overflow: hidden; white-space: nowrap; color: var(--ink-3); font-size: var(--fs-input); pointer-events: none; }
.search__hint .s-long { display: none; }
@media (min-width: 1280px) { .search__hint .s-long { display: inline; } .search__hint .s-short { display: none; } }
.search input:not(:placeholder-shown) ~ .search__hint { display: none; }
/* Filter chips: each a disclosure with a small menu, dashed while off. */
.chip { position: relative; }
.chip > summary { min-height: var(--ctl); list-style: none; }
.chip > summary::-webkit-details-marker { display: none; }
.chip__btn {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--ctl); padding: 0 var(--s-4) 0 var(--s-5);
  border: 1px dashed var(--control); border-radius: var(--r-2); background: var(--white); color: var(--ink-2);
  font-size: var(--fs-sm); font-weight: var(--w-medium); cursor: pointer; white-space: nowrap;
}
.chip__btn:hover { background: var(--deck); color: var(--ink); }
.chip .menu { left: 0; right: auto; }
.clear { display: inline-flex; align-items: center; min-height: var(--ctl-sm); font-size: var(--fs-sm); font-weight: var(--w-medium); }
.menu .menu__label { display: block; padding: var(--s-3) var(--s-4) var(--s-2); color: var(--ink-3); font-size: var(--fs-xs); font-weight: var(--w-semi); }
.menu .opt { gap: var(--s-4); overflow-wrap: anywhere; }   /* a 60-character town wraps inside its menu */
.menu .opt .n { margin-left: auto; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.menu .opt[aria-current="true"] { font-weight: var(--w-semi); }
.menu .opt[aria-current="true"]::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px; background: var(--pool-700); }
/* Applied filters on a phone (the chips live in the Filters sheet there). */
.applied-row { display: flex; flex-wrap: wrap; gap: var(--s-3); padding: 0 var(--gut) var(--s-5); }
/* The frame: the table from 1,024 px, the phone list below; its empty block and its footer serve both. */
.tablewrap { margin: 0 var(--gut); background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-3); box-shadow: var(--e-1); }
.only-desk { display: none; }
@media (min-width: 1024px) { .only-desk { display: block; } .only-phone-block { display: none; } }
.dt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); }
.dt th {
  position: sticky; top: var(--bar-h); z-index: 5; height: 36px; padding: 0 var(--s-5);
  background: var(--deck); border-bottom: 1px solid var(--line-2); color: var(--ink-3); font-size: var(--fs-xs); font-weight: var(--w-semi); text-align: left; white-space: nowrap;
}
.dt thead th:first-child { border-top-left-radius: var(--r-3); }
.dt thead th:last-child { border-top-right-radius: var(--r-3); }
.dt th a { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; color: inherit; text-decoration: none; }
.dt th[aria-sort] { color: var(--ink); }
.dt .c-num { text-align: right; font-variant-numeric: tabular-nums; }
.dt .c-act { width: 44px; padding: 0 var(--s-3); text-align: right; }
/* 1,024 to 1,279 px: the least-needed column steps out so nothing scrolls sideways */
@media (max-width: 1279.98px) { .dt .c-wide { display: none; } }
.plist { list-style: none; }
.plist > li + li { border-top: 1px solid var(--line); }
.tablewrap > .empty { display: grid; justify-items: start; gap: var(--s-3); padding: var(--s-9) var(--s-8); }
.tablewrap > .empty h3 { font-size: var(--fs-md); font-weight: var(--w-semi); }
.tablewrap > .empty p { color: var(--ink-3); font-size: var(--fs-sm); }
.tfoot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3) var(--s-5); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs-sm); }
.tfoot__end { margin-left: auto; display: flex; align-items: center; gap: var(--s-5); }
.num { font-variant-numeric: tabular-nums; }
/* The marks' legend: one line under the list, so nothing depends on a hover title (phones have none). */
.keyline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-6); padding: var(--s-4) var(--gut) 0; color: var(--ink-2); font-size: var(--fs-xs); line-height: var(--lh-xs); }
.keyline > span { display: inline-flex; align-items: center; gap: 4px; }
/* Radio groups (the Filters sheet, Add client's "After saving", the delete reasons). */
.fieldset { display: grid; gap: var(--s-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.fieldset legend { margin-bottom: var(--s-2); padding: 0; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--w-semi); }
.check input[type="radio"] { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--pool-700); }

/* The rows lib/clients-ui.js draws. A row is 48 px compact (60 comfortable, 68 on a phone); a long name, street or town is cut with an
   ellipsis on its one line (the whole text stays in the page for a screen reader), so nothing scrolls sideways. */
.dt td { height: var(--row-photo); padding: 0 var(--s-5); border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.dt tbody tr:last-child td { border-bottom: 0; }
.dt tbody tr:hover td { background: var(--deck-hover); }
.dt .client { display: flex; align-items: center; gap: var(--s-5); min-width: 0; }
/* The name is the row's link: its one line is 24 px, the lane's floor from 1,024 px (RD2; review round 3 of lane A, finding 5: it was 20 px). */
.dt .client__name { min-width: 0; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 24px; color: var(--ink); font-weight: var(--w-semi); }
.dt .client__name:hover { color: var(--pool-700); }
.dt .trunc, .dt .sub { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
/* Beside the rail (1,024 px) and the sidebar (1,280 px) a long name and street cut sooner, so the table never runs past the screen. */
@media (max-width: 1439.98px) {
  .dt .client__name { max-width: 10rem; }
  .dt .trunc, .dt .sub { max-width: 160px; }
}
.dt .sub { color: var(--ink-3); font-size: var(--fs-xs); line-height: var(--lh-xs); }
.muted { color: var(--ink-3); }
/* House photo: the client's face; the initials on a hatch until there is one (phase 5). */
.photo { width: var(--photo-row); height: var(--photo-row); border-radius: var(--r-2); object-fit: cover; background: var(--deck-2); flex: 0 0 auto; }
.photo--none {
  display: inline-grid; place-items: center; border: 1px solid var(--line-2);
  background: repeating-linear-gradient(135deg, var(--deck) 0 6px, var(--deck-2) 6px 7px); color: var(--ink-2); font-size: 0.75rem; font-weight: var(--w-bold); letter-spacing: 0.02em;
}
/* Access marks beside a name: only the exceptions, each with hidden words, named again in the legend under the list. */
.acc { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); vertical-align: middle; }
/* Status tags: square corners, a tint with a dark word and a solid leading square; always a word. */
.tag {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; border: 1px solid var(--muted-line); border-radius: var(--r-1);
  background: var(--muted-bg); color: var(--muted); font-size: 0.75rem; font-weight: var(--w-semi); line-height: 1; white-space: nowrap;
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: currentColor; flex: 0 0 auto; }
.tag--ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.tag--warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.tag--info { background: var(--info-bg); border-color: var(--info-line); color: var(--info); }
.tag--danger { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.tag--muted { background: var(--muted-bg); border-color: var(--muted-line); color: var(--muted); }
.tag--plain::before { display: none; }
/* The service day: a mono weekday in a box, as on the route sheet. */
.day {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 22px; padding: 0 5px; border: 1px solid var(--line-2); border-radius: var(--r-1);
  background: var(--white); color: var(--ink); font-family: var(--font-data); font-size: 0.75rem; font-weight: var(--w-semi); letter-spacing: 0.04em; text-transform: uppercase;
}
/* A tech: their color swatch beside the name, never the color alone (RD11); a seventh person has no swatch. */
.tech { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tech::before { content: ""; width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.tech--1::before { background: var(--tech-1); }
.tech--2::before { background: var(--tech-2); }
.tech--3::before { background: var(--tech-3); }
.tech--4::before { background: var(--tech-4); }
.tech--5::before { background: var(--tech-5); }
.tech--6::before { background: var(--tech-6); }
.tech--plain::before { display: none; }
/* The phone list: the same rows as two-line links of 68 px. */
.pitem {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-5);
  min-height: var(--row-photo); padding: var(--s-4) var(--s-5); color: var(--ink); text-decoration: none;
}
.pitem:hover { background: var(--deck-hover); }
.pitem__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--w-semi); }
.pitem__meta { display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; color: var(--ink-3); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.pitem__meta .trunc { overflow: hidden; text-overflow: ellipsis; }
/* A row's menu: the danger item in red words. */
.menu .danger { color: var(--danger); }
.menu .danger .ico { color: inherit; }
.menu .danger:hover { background: var(--danger-bg); }
@media (forced-colors: active) {
  .tag, .day, .chip__btn, .tablewrap { border: 1px solid CanvasText; }
  .views a[aria-current="page"] { outline: 2px solid Highlight; }
  .tech::before { forced-color-adjust: none; }
}

/* What clients.js adds: an applied chip ("Day Saturday", the key in grey), the phone's applied pills (each removable, 44 px), the empty
   block's actions. */
.chip__btn .k { color: var(--ink-3); font-weight: var(--w-medium); }
.chip--on .chip__btn { border-style: solid; border-color: var(--pool-700); background: var(--pool-50); color: var(--pool-800); }
.chip--on .chip__btn .k { color: var(--pool-800); }
.pill-x {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 0 0 var(--s-5); border-radius: var(--r-2);
  background: var(--pool-100); color: var(--pool-800); font-size: var(--fs-sm); font-weight: var(--w-medium);
}
.pill-x a { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-1); color: var(--pool-800); }
.pill-x a:hover { background: var(--info-line); }
.empty__acts { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-2); }
/* The Add client drawer: from the right, 480 px wide from 768 px, the whole screen on a phone; its buttons stay in reach at the bottom
   while the fields scroll. A save that did not reach HQ shows in the alert above the fields, with everything typed kept. */
.dlg.dlg--drawer { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
@media (min-width: 768px) { .dlg.dlg--drawer { width: min(480px, 100vw); margin: 0 0 0 auto; } }
.dlg.dlg--drawer .dlg__in { display: flex; flex-direction: column; gap: var(--s-6); min-height: 100%; padding-bottom: 0; }
.dlg.dlg--drawer .dlg__acts {
  position: sticky; bottom: 0; margin: auto -16px 0; padding: var(--s-5) 16px max(var(--s-5), env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--white);
}
@media (min-width: 768px) { .dlg.dlg--drawer .dlg__acts { margin: auto -24px 0; padding: var(--s-5) 24px; } }
.dlg--drawer .form-alert {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--s-4); padding: var(--s-4) var(--s-5);
  border: 1px solid var(--danger-line); border-radius: var(--r-3); background: var(--danger-bg); font-size: var(--fs-sm); line-height: var(--lh-sm);
}
.dlg--drawer .form-alert .ico { margin-top: 1px; color: var(--danger); }
.dlg--drawer .form-alert strong { color: var(--danger); }
.dlg--drawer .form-alert p + p { grid-column: 2; color: var(--ink); }
.row2 { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .row2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* The Delete client dialog: what goes and what stays as a short list, and the Face ID line before the buttons. */
.lst { display: grid; gap: 4px; list-style: none; color: var(--ink-2); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.lst li { display: flex; gap: 8px; }
.lst li::before { content: ""; flex: 0 0 auto; width: 5px; height: 5px; margin-top: 7px; border-radius: 1px; background: var(--ink-3); }
.dlg__next { display: flex; align-items: center; gap: var(--s-3); color: var(--ink-2); font-size: var(--fs-sm); }
/* 14. PEOPLE, ACTIVITY LOG, ACCOUNT */
.msg { padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--deck); color: var(--ink); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.person { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.person__acts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.act { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 14px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--deck); }
@media (min-width: 720px) { .act { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.act__h { font-weight: var(--w-semi); }
.act__p { font-size: var(--fs-sm); color: var(--ink-2); }
.act__ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.act__ctl select {
  width: 20rem; max-width: 100%; min-width: 0; min-height: var(--ctl); padding: 4px 32px 4px 12px;
  border: 1px solid var(--control); border-radius: var(--r-sm); background-color: var(--white);
}
/* The Team screens (spec 5.12, plan P1 Task C11): the invite and edit sheets scroll inside the screen on a phone; the QR countdown; the
   invite result; the plans line and the codes a person viewed. */
.dlg--sheet { max-height: calc(100dvh - 32px); overflow-y: auto; }
.dlg--sheet .dlg__in { gap: 12px; }
.fset { display: grid; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); }
.fset legend { padding: 0 6px; font-weight: var(--w-semi); color: var(--ink-2); }
.qr__clock { font-family: var(--font-code); font-size: 1.375rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.invite-ready { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--deck); }
.invite-ready__h { font-weight: var(--w-semi); color: var(--ink); }
/* The copied link (P1-D118, an Owner only): plain text that wraps anywhere on a phone and selects whole with one press. */
.link-once { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--deck); color: var(--ink); }
.link-once__url {
  padding: 10px; border: 1px dashed var(--control); border-radius: var(--r-sm); background: var(--white); color: var(--ink);
  font-family: var(--font-code); font-size: var(--fs-sm); word-break: break-all; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all;
}
.person__in { display: grid; gap: 16px; }
.person__plans { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-weight: var(--w-semi); }
.codes-viewed { display: grid; gap: 8px; }
/* The log's own width decides the row layout (container query): the client page's History sits in a narrow column even on a
   wide screen, where three columns left the middle one a letter wide. */
.log { display: grid; gap: 6px; list-style: none; container-type: inline-size; }
.entry {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 14px; padding: 10px 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--white);
}
@container (min-width: 620px) { .entry { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; } }
.entry__who { font-size: var(--fs-sm); color: var(--ink-2); }
.log__day { margin-top: 14px; }
.entry--alert { border-left: 4px solid var(--danger); }
.entry--notice { border-left: 4px solid var(--warn); }
.entry__refused { color: var(--danger); }
.more { display: flex; justify-content: center; }
.acct { display: grid; gap: 20px; }
@media (min-width: 1100px) { .acct { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.addkey { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
@media (min-width: 640px) { .addkey { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }

/* 14b. SETTINGS (plan P1 Chunk F): the hours of each working day, the ZIP list by town, the catalog, checklist and integration cards */
.form--wide { max-width: 60rem; }
.hours__day { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .hours__day { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); align-items: end; } }
.hours__sun { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 44px; }
.area { display: grid; gap: 18px; }
.area__town .rows { margin-top: 8px; }
.area__zip .row__acts { align-items: center; gap: 4px 16px; }
.cl { list-style: none; display: grid; gap: 12px; }
.cl__item--locked .fset { background: var(--deck); }
.cl__t { font-weight: var(--w-semi); }
.cl__old > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: var(--w-semi); }
.tg { display: grid; gap: 12px; }
@media (min-width: 768px) { .tg__row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 15. DIALOGS AND TOASTS (DESIGN-SYSTEM 9; the only things that move, and only as feedback). A dialog is a sheet from the bottom on
   a phone and a 560 px box in the middle from 768 px, opened by lib/sheet.js openSheet with focus kept inside and returned to the
   opener. A toast is a navy-deep bar with one sentence, announced through a polite live region. */
.dlg {
  width: 100%; max-width: 100%; max-height: 92svh; margin: auto auto 0; padding: 0; overflow-y: auto;
  border: 0; border-radius: var(--r-4) var(--r-4) 0 0; background: var(--white); color: var(--ink); box-shadow: var(--e-3);
  opacity: 1; transform: none;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), overlay var(--t-med) allow-discrete, display var(--t-med) allow-discrete;
}
@media (min-width: 768px) {
  .dlg { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; border-radius: var(--r-4); }
}
@starting-style { .dlg[open] { opacity: 0; transform: translateY(8px); } }
.dlg::backdrop { background: var(--scrim); }
.dlg__in { display: grid; gap: 14px; padding: 24px 16px max(16px, env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .dlg__in { padding: 24px; } }
.dlg__kicker { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: var(--w-semi); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.dlg__h { font-weight: var(--w-semi); font-size: var(--fs-title); line-height: var(--lh-title); color: var(--ink); }
.dlg__b { display: grid; gap: 10px; line-height: 1.55; }
.dlg__err { color: var(--danger); font-weight: var(--w-semi); }
.dlg__err:empty { display: none; }
.dlg__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.toasts {
  position: fixed; z-index: 120; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: grid; gap: 8px; width: min(440px, calc(100vw - 32px)); pointer-events: none;
}
@media (min-width: 1024px) { .toasts { bottom: 24px; } }
/* On a phone the stack sits under the top bar, so it never covers a small button near the bottom (SC 2.4.11), and while a
   toast shows the page scrolls a focused control below it. */
@media (max-width: 1023.98px) { .toasts { top: calc(64px + env(safe-area-inset-top)); bottom: auto; } }
html.has-toast { scroll-padding-top: 140px; }
.toast {
  padding: 12px 16px; border-radius: var(--r-2); background: var(--navy-deep); color: var(--white);
  font-size: var(--fs-sm); font-weight: var(--w-medium); box-shadow: var(--e-2);
  transition: opacity var(--t-med) ease, transform var(--t-med) var(--ease);
}
@starting-style { .toast { opacity: 0; transform: translateY(8px); } }
.toast--bad { background: var(--danger); color: var(--white); }
.toast--out { opacity: 0; transform: translateY(6px); }

/* 16. REDUCED MOTION, FORCED COLORS, PRINT */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .btn, .badge, .seg__b[aria-pressed="true"], .sectabs__t[aria-selected="true"], .navlist a[aria-current="page"], .tabs > a[aria-current="page"], .menu { border: 1px solid CanvasText; }
}
@media print {
  body.printing-codes * { visibility: hidden !important; }
  body.printing-codes .codes--print, body.printing-codes .codes--print * { visibility: visible !important; }
  body.printing-codes .codes--print { position: absolute; left: 0; top: 0; width: 100%; padding: 24px; background: var(--white); color: var(--ink); }
  body.printing-codes .codes__print-h { display: block; margin-bottom: 8px; font: 700 18px/1.3 var(--font-text); color: var(--ink); }
  body.printing-codes .codes__list { border: 1px solid var(--ink); background: var(--white); color: var(--ink); }
  body.printing-codes .codes__list li, body.printing-codes .codes__list li::before { color: var(--ink); }
  body.printing-codes .codes__acts, body.printing-codes .codes .fld, body.printing-codes .codes .check { display: none !important; }
  body.printing-codes .codes--print p { color: var(--ink); }
}