/* Bishop CPA practice management: the one stylesheet (docs/pm/DESIGN.md, brand tokens from the firm's site).
   Served from /assets/<content hash>/app.css under a strict CSP: no page carries inline style.
   Light is the staff default; dark is the client-facing default and a staff option (data-theme on <html>).
   Order: fonts, tokens, base, shell, public pages, components, responsive, motion. */

/* ---------- fonts (self-hosted, SIL OFL: fonts/OFL-*.txt) ---------- */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/manrope-latin.woff2") format("woff2");
  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: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/anton-latin.woff2") format("woff2");
  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: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/anton-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/roboto-500-latin.woff2") format("woff2"); 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; }


/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --font-ui: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Anton", "Impact", "Arial Narrow", ui-sans-serif, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13.5px; --fs-15: 15px; --fs-17: 17px; --fs-20: 20px; --fs-24: 24px; --fs-30: 30px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;
  --r-control: 6px; --r-card: 8px; --r-overlay: 10px;
  --sidebar-w: 240px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  --bg: #F2EDE3; --surface: #FBF8F2; --surface-2: #ECE6DA; --border: #D9D3C6;
  --text: #0A0A09; --text-2: #5C574D; --text-3: #716B5F;
  --accent: #0F6B3F; --accent-hover: #0C5833; --accent-soft: #E3F1E8; --on-accent: #FFFFFF;
  --gold: #CEC093; --gold-soft: #EFE7CC;
  --focus: rgba(15, 107, 63, .4);
  --ok: #0F6B3F; --ok-bg: #E3F1E8;
  --warn: #8A5C00; --warn-bg: #FFF4D6;
  --danger: #B42318; --danger-bg: #FDE8E6; --on-danger: #FFFFFF;
  --info: #0B5CAD; --info-bg: #E6F0FA;
  --neutral: #5C574D; --neutral-bg: #ECE6DA;
  --overlay: rgba(10, 10, 9, .45);
  --elevation-1: 0 8px 24px rgba(10, 10, 9, .14);
  /* sideways scrollers (.scroll-x): a champagne thumb on the bone track; both follow the theme through --gold and --text-2 */
  --scroll-thumb: color-mix(in srgb, var(--gold) 62%, var(--text-2));
  --scroll-track: var(--surface-2);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0A0A09; --surface: #141412; --surface-2: #1C1B18; --border: #2A2823;
    --text: #F2EDE3; --text-2: #B9B2A4; --text-3: #A39C8E;
    --accent: #CEC093; --accent-hover: #D9CDA6; --accent-soft: #2A2614; --on-accent: #0A0A09;
    --gold: #CEC093; --gold-soft: #2A2614;
    --focus: rgba(206, 192, 147, .4);
    --ok: #6FCB95; --ok-bg: #12261B;
    --warn: #E0B341; --warn-bg: #2E2410;
    --danger: #F08A80; --danger-bg: #2E1512; --on-danger: #0A0A09;
    --info: #7FB3F0; --info-bg: #12233A;
    --neutral: #B9B2A4; --neutral-bg: #262420;
    --overlay: rgba(0, 0, 0, .6);
    --elevation-1: 0 8px 24px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0A09; --surface: #141412; --surface-2: #1C1B18; --border: #2A2823;
  --text: #F2EDE3; --text-2: #B9B2A4; --text-3: #A39C8E;
  --accent: #CEC093; --accent-hover: #D9CDA6; --accent-soft: #2A2614; --on-accent: #0A0A09;
  --gold: #CEC093; --gold-soft: #2A2614;
  --focus: rgba(206, 192, 147, .4);
  --ok: #6FCB95; --ok-bg: #12261B;
  --warn: #E0B341; --warn-bg: #2E2410;
  --danger: #F08A80; --danger-bg: #2E1512; --on-danger: #0A0A09;
  --info: #7FB3F0; --info-bg: #12233A;
  --neutral: #B9B2A4; --neutral-bg: #262420;
  --overlay: rgba(0, 0, 0, .6);
  --elevation-1: 0 8px 24px rgba(0, 0, 0, .5);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-ui); font-size: var(--fs-15); line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  /* Manrope's common ligatures turn "(c)" into "©": a citation such as 16 CFR 314.4(c)(6) must read as written */
  font-variant-ligatures: no-common-ligatures;
}
h1, h2, h3 { font-weight: 700; line-height: 1.25; margin: 0; letter-spacing: -.01em; }
p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; }
strong { font-weight: 700; }
code, .mono { font-family: var(--font-mono); font-size: .9em; }
.detail { word-break: break-word; color: var(--text-2); }
.muted { color: var(--text-3); }
.nowrap { white-space: nowrap; }
.num, .table .num, .stat-value, .meta dd .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus); border-radius: 2px; }
.visually-hidden, .nav-toggle {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: var(--sp-3); top: -60px; z-index: 100; padding: var(--sp-2) var(--sp-3);
  background: var(--accent); color: var(--on-accent); border-radius: var(--r-control); text-decoration: none; font-weight: 600; }
.skip-link:focus { top: var(--sp-3); }
::selection { background: var(--gold-soft); color: var(--text); }

/* ---------- the app shell ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column;
  background: var(--surface-2); border-right: 1px solid var(--border); padding: var(--sp-4) var(--sp-3);
}
.sidebar-head { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-2) var(--sp-4); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-width: 0; }
.brand:hover { color: var(--text); }
.brand-logo { display: block; flex: none; border-radius: 50%; width: 28px; height: 28px; }
.brand-name { font-family: var(--font-display); font-weight: 400; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.env-badge { margin-left: auto; font-size: var(--fs-11); font-weight: 600; line-height: 1; padding: 4px 6px; border-radius: 4px;
  background: var(--gold-soft); color: var(--text); border: 1px solid var(--gold); white-space: nowrap; }
.nav-toggle-label { display: none; }
.sidebar-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.sidebar-search { position: relative; margin: 0 0 var(--sp-4); }
.sidebar-search input {
  width: 100%; height: 34px; padding: 0 32px 0 32px; font: inherit; font-size: var(--fs-13); color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-control);
}
.sidebar-search input::placeholder { color: var(--text-3); }
.sidebar-search input:focus-visible { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--focus); }
.sidebar-search-icon { position: absolute; left: 10px; top: 9px; color: var(--text-3); pointer-events: none; }
.sidebar-search-key { position: absolute; right: 7px; top: 7px; pointer-events: none; }
.icon { flex: none; display: block; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-heading { margin: var(--sp-4) var(--sp-2) var(--sp-1); font-size: var(--fs-11); font-weight: 600; color: var(--text-2); letter-spacing: .02em; }
.nav-group { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 var(--sp-2) 0 10px;
  border-radius: var(--r-control); color: var(--text-2); text-decoration: none; font-size: var(--fs-13); font-weight: 500;
}
.nav-item:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text); }
.nav-item.is-active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--border); }
.nav-item.is-active::before { content: ""; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 2px 2px 0; background: var(--gold); }
.nav-item.is-active .icon { color: var(--accent); }

.sidebar-user { margin-top: auto; display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-4) var(--sp-2) var(--sp-2); border-top: 1px solid var(--border); }
.sidebar-user form { margin: 0; flex: none; }
/* the signed-in e-mail is never cut: it has the whole width beside the avatar and wraps (at the @ first), the role and
   Sign out share the line under it */
.sidebar-user-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sidebar-user-name { font-size: var(--fs-12); font-weight: 600; line-height: 1.35; padding-top: 1px; }
.sidebar-user-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-width: 0; }
.sidebar-user-role { font-size: var(--fs-11); color: var(--text-2); }
.sidebar-user-meta .btn { margin-right: calc(-1 * var(--sp-1)); }
/* long words (an e-mail, a file name, a token) break anywhere rather than run past their box */
.wrap-anywhere { overflow-wrap: anywhere; min-width: 0; }
.theme-switch { display: flex; gap: 2px; margin: var(--sp-2) var(--sp-2) 0; padding: 2px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); }
.theme-option { flex: 1; font: inherit; font-size: var(--fs-11); font-weight: 600; color: var(--text-2); background: transparent; border: 0; border-radius: 4px; padding: 4px 0; cursor: pointer; }
.theme-option:hover { color: var(--text); }
.theme-option[aria-pressed="true"] { background: var(--surface-2); color: var(--text); }

.content { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 56px; padding: var(--sp-3) var(--sp-6); border-bottom: 1px solid var(--border);
}
.topbar-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.main { width: 100%; max-width: 1280px; margin: 0 auto; padding: var(--sp-6); flex: 1; }
.main:focus { outline: none; }
.app-foot { max-width: 1280px; width: 100%; margin: 0 auto; padding: var(--sp-4) var(--sp-6) var(--sp-8); color: var(--text-3); font-size: var(--fs-12); }

.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) 0; font-size: var(--fs-13); }
.breadcrumbs li { display: inline-flex; align-items: center; min-width: 0; }
.breadcrumbs li + li::before { content: "/"; color: var(--text-3); margin: 0 var(--sp-2); }
.breadcrumbs a { color: var(--text-2); text-decoration: none; }
.breadcrumbs a:hover { color: var(--text); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }

/* ---------- public pages: sign-in and client links (dark, like the firm's site) ---------- */
.public-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: var(--sp-8) var(--sp-4); }
.public-head { width: 100%; max-width: 560px; margin-bottom: var(--sp-8); }
.public-head .brand-logo { width: 40px; height: 40px; }
.public-head .brand-name { font-size: 17px; color: var(--gold); }
.public--hero .public-head { display: flex; justify-content: center; margin-top: 6vh; }
.public--hero .public-head .brand { flex-direction: column; gap: var(--sp-3); }
.public--hero .public-head .brand-logo { width: 48px; height: 48px; }
.public-main { width: 100%; max-width: 560px; }
.public-main:focus { outline: none; }
.public-foot { margin-top: auto; padding-top: var(--sp-8); max-width: 560px; text-align: center; color: var(--text-3); font-size: var(--fs-12); }
.auth { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--sp-8); }
.public--hero .public-main { max-width: 420px; }
.auth-title { font-size: var(--fs-24); margin-bottom: var(--sp-2); }
.public .auth-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; font-size: var(--fs-30); line-height: 1.1; }
.auth-sub { color: var(--text-2); margin-bottom: var(--sp-6); }
.auth-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-form .form-actions .btn { width: 100%; height: 40px; font-size: var(--fs-15); }
.auth-note { margin-top: var(--sp-4); color: var(--text-3); font-size: var(--fs-13); }
.auth .banner { margin-bottom: var(--sp-4); }

/* ---------- page header ---------- */
.page-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--sp-6); margin-bottom: var(--sp-6); }
.page-header > :not(.page-actions):not(.meta) { grid-column: 1; }
.page-header > .page-actions { grid-column: 2; grid-row: 1 / span 3; justify-self: end; align-self: start; }
.page-header > .meta { grid-column: 1 / -1; }
.page-heading { min-width: 0; }
.page-eyebrow { margin: 0 0 var(--sp-1); font-size: var(--fs-12); font-weight: 600; color: var(--text-2); }
.page-eyebrow a { color: inherit; }
.page-title { font-size: var(--fs-24); font-weight: 700; letter-spacing: -.015em; overflow-wrap: anywhere; }
.page-sub { margin: var(--sp-1) 0 0; color: var(--text-2); font-size: var(--fs-15); }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.page-header--detail { padding-bottom: var(--sp-5); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--border); }
.meta { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-8); margin: var(--sp-5) 0 0; }
.meta-item { min-width: 0; }
.meta dt { font-size: var(--fs-12); color: var(--text-2); font-weight: 500; margin-bottom: 2px; }
.meta dd { margin: 0; font-size: var(--fs-13); font-weight: 600; }
.meta--stacked { flex-direction: column; gap: var(--sp-3); margin: 0 0 var(--sp-4); }
/* a record's facts as a grid of pairs (ui.mjs facts({ grid }): the account, a consent): as many columns as fit, a sentence
   (.meta-item--wide) on a row of its own; two columns on a phone (the phone block) (pm/ux-pass-1, U3) */
.meta--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--sp-4) var(--sp-6); margin: 0; }
.meta--grid > .meta-item--wide { grid-column: 1 / -1; }

/* ---------- cards, layout helpers ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); margin-bottom: var(--sp-5); min-width: 0; }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.card-title, .card-header > h2, .card-header > h3 { font-size: var(--fs-15); font-weight: 700; margin: 0; }
.card-sub { margin: 2px 0 0; color: var(--text-2); font-size: var(--fs-13); }
.card-actions { display: flex; gap: var(--sp-2); flex: none; }
.card-body { padding: var(--sp-5); }
.card-body--flush { padding: 0; }
.card-body--flush > .empty { margin: var(--sp-4); border: 0; }
.tile-text { color: var(--text-2); font-size: var(--fs-13); margin-bottom: var(--sp-4); }
.select--sm { min-height: 28px; height: 28px; padding-top: 0; padding-bottom: 0; font-size: var(--fs-13); width: auto; }
.role-form { gap: var(--sp-2); align-items: center; }
.person { display: inline-flex; align-items: center; gap: var(--sp-2); }
.card-footer { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border); color: var(--text-2); font-size: var(--fs-13); }
.card .table-wrap { border: 0; border-radius: 0 0 var(--r-card) var(--r-card); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-5); }
.grid-main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0 var(--sp-5); align-items: start; }
.stack { min-width: 0; }
.tab-panel { min-width: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px;
  font: inherit; font-size: var(--fs-13); font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
  border-radius: var(--r-control); border: 1px solid transparent; cursor: pointer; user-select: none;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn--secondary { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn--secondary:hover { background: var(--surface-2); color: var(--text); }
.btn--danger { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); }
.btn--danger:hover { border-color: var(--danger); color: var(--danger); }
.btn--ghost { background: transparent; color: var(--text-2); }
.btn--ghost:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.btn--sm { height: 28px; padding: 0 10px; font-size: var(--fs-12); }
.btn[disabled], .btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn .kbd { margin-left: 2px; }
.palette-trigger { color: var(--text-2); font-weight: 500; }
.inline-form { display: inline-flex; margin: 0; }
.inline-form--fields { flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.input--sm { min-height: 28px; height: 28px; padding-top: 0; padding-bottom: 0; font-size: var(--fs-13); width: auto; min-width: 10em; }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

/* ---------- forms ---------- */
.form { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 560px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label { font-size: var(--fs-13); font-weight: 600; color: var(--text); }
.field-optional { font-weight: 400; color: var(--text-3); }
.help { margin: 0; font-size: var(--fs-12); color: var(--text-2); }
.error { margin: 0; font-size: var(--fs-12); color: var(--danger); font-weight: 600; }
.input, .select, .textarea, .filters input, .filters select,
.field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), .field select, .field textarea {
  width: 100%; min-height: 36px; padding: 7px 10px; font: inherit; font-size: var(--fs-15); color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-control);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--text) 30%, var(--border)); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); border-radius: var(--r-control); }
.input[aria-invalid="true"], .field--error .input, .field--error .select { border-color: var(--danger); }
.input[type="file"] { padding: 6px; font-size: var(--fs-13); }
.input--code { font-family: var(--font-mono); font-size: var(--fs-20); letter-spacing: .3em; max-width: 220px; }
.select, .field select {
  appearance: none; -webkit-appearance: none; padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}
.textarea, .field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); border-radius: var(--r-control); }
.check { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-15); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding-top: var(--sp-2); }
form:not(.form):not(.filters):not(.auth-form) > .field + .field, form:not(.form):not(.filters):not(.auth-form) > .field + .form-actions { margin-top: var(--sp-4); }
/* the same rhythm where a plain form's fields sit in its cards (the client form) or in a drawer: a field's help text and
   the next field's label never touch (pm/ux-pass-1, U7) */
:is(.card-body, .drawer-body) > :is(.field, fieldset.field) + :is(.field, fieldset.field, .form-actions) { margin-top: var(--sp-4); }
/* a group of choices (fieldset.field: Service lines, the consents asked with a letter): a bordered group, its legend drawn
   as a field's label, one choice a row with the whole row tappable */
fieldset.field { margin: 0; padding: var(--sp-2) var(--sp-4) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-control); min-width: 0; gap: 2px; }
fieldset.field > legend { padding: 0 var(--sp-1); margin-left: calc(-1 * var(--sp-1)); font-size: var(--fs-13); font-weight: 600; color: var(--text); }
fieldset.field > label, .field > label:not(.check):has(> input[type="checkbox"]) { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
fieldset.field > label { min-height: 28px; font-size: var(--fs-15); font-weight: 400; }
fieldset.field > p { margin: 0; }
fieldset.field input[type="checkbox"], .field > label:not(.check) > input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }

/* filters row on list pages; on a phone it sits behind its fold (ui.mjs filtersFold, the phone block below) */
.filters-fold { display: none; }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.field--inline { flex: 0 1 200px; gap: 4px; }
.field--inline:first-child { flex: 1 1 240px; }
@media (min-width: 720px) { .field--inline:first-child:has(> select) { flex: 0 1 200px; } }   /* only a search box grows; a row of choices stays even */
.field--inline > label { font-size: var(--fs-12); font-weight: 600; color: var(--text-2); }
.filters input, .filters select { height: 34px; min-height: 0; padding-top: 0; padding-bottom: 0; font-size: var(--fs-13); }
.filters-actions { display: flex; gap: var(--sp-2); padding-bottom: 2px; }

/* ---------- tables (ledger style) ---------- */
.table-wrap { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-13); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.table th {
  position: sticky; top: 0; z-index: 4; text-align: left; vertical-align: bottom;
  padding: 9px var(--sp-3); font-size: var(--fs-12); font-weight: 600; color: var(--text-2);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.table td { padding: 10px var(--sp-3); vertical-align: middle; border-bottom: 1px solid var(--border); overflow-wrap: break-word; }
.table td.num, .table th.num, .table time, .table .nowrap, .table .pill { white-space: nowrap; overflow-wrap: normal; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: color-mix(in srgb, var(--gold-soft) 45%, transparent); }
.table th:first-child, .table td:first-child { padding-left: var(--sp-4); }
.table th:last-child, .table td:last-child { padding-right: var(--sp-4); }
.table .num { text-align: right; }
.table th.num { text-align: right; }
.table-empty td { color: var(--text-3); text-align: center; padding: var(--sp-6); }
.th-sort { display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.th-sort:hover { color: var(--text); text-decoration: none; }
.th-sort::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .25; }
th[aria-sort="ascending"] .th-sort::after { border-top: 0; border-bottom: 5px solid currentColor; opacity: .9; }
th[aria-sort="descending"] .th-sort::after { opacity: .9; }
th[aria-sort] { color: var(--text); }
.row-link { color: var(--text); font-weight: 600; text-decoration: none; }
.row-link:hover { color: var(--accent); text-decoration: underline; }
.cell-title { display: block; font-weight: 600; color: var(--text); }
.cell-sub { display: block; font-size: var(--fs-12); color: var(--text-3); }
.pill + .cell-sub { display: inline; margin-left: 4px; }
/* a part of a row that only a phone's card shows (the documents list: version, size and tags in one line under the file);
   the cells it stands for carry .phone-hide (both: the phone block below) */
.phone-only { display: none; }
/* a short free-text cell (the work list's one-line note): two lines at most, the rest behind an ellipsis, the whole text in
   the cell's title */
.cell-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; max-width: 32ch; color: var(--text-2); overflow-wrap: anywhere; }

/* ---------- pills, banners, states ---------- */
.pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: var(--fs-12); font-weight: 600; line-height: 1; white-space: nowrap; }
.pill--ok { background: var(--ok-bg); color: var(--ok); }
.pill--warn { background: var(--warn-bg); color: var(--warn); }
.pill--danger { background: var(--danger-bg); color: var(--danger); }
.pill--info { background: var(--info-bg); color: var(--info); }
.pill--neutral { background: var(--neutral-bg); color: var(--neutral); }
.pill--brand { background: var(--gold-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--gold); }

.banner { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5); border-radius: var(--r-card); border: 1px solid; font-size: var(--fs-13); }
.banner p { margin: 0; }
.banner--info { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 30%, transparent); color: var(--text); }
.banner--warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 35%, transparent); color: var(--text); }
.banner--danger { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--text); }
.banner--ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: var(--text); }
.banner--info strong { color: var(--info); } .banner--warn strong { color: var(--warn); } .banner--danger strong { color: var(--danger); } .banner--ok strong { color: var(--ok); }

.empty { text-align: center; padding: var(--sp-12) var(--sp-6); border: 1px dashed var(--border); border-radius: var(--r-card); background: var(--surface); }
.empty h2 { font-size: var(--fs-17); margin-bottom: var(--sp-2); }
.empty p { color: var(--text-2); max-width: 46ch; margin: 0 auto var(--sp-4); }
.empty .btn { margin-top: var(--sp-1); }

.state { max-width: 560px; margin: var(--sp-12) auto; padding: var(--sp-8); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.state::before { content: ""; display: block; width: 32px; height: 3px; border-radius: 2px; margin-bottom: var(--sp-5); background: var(--gold); }
.state--danger::before { background: var(--danger); }
.state-title { font-size: var(--fs-20); margin-bottom: var(--sp-3); }
.state-text { color: var(--text-2); }
.state-action { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.public .state { margin: 0; }
.public .state-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; font-size: var(--fs-24); }

/* ---------- tabs ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 0 var(--sp-1); margin: 0 0 var(--sp-5); border-bottom: 1px solid var(--border); }
.tab { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: var(--sp-2) var(--sp-3) 10px; color: var(--text-2); text-decoration: none; font-size: var(--fs-13); font-weight: 600; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--text); }
.tab.is-active::after { content: ""; position: absolute; left: var(--sp-2); right: var(--sp-2); bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); }
.tab-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--neutral-bg); color: var(--text-2); font-size: var(--fs-11); line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.stat { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-4) var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); color: var(--text); text-decoration: none; }
a.stat:hover { border-color: color-mix(in srgb, var(--text) 25%, var(--border)); color: var(--text); }
.stat-value { font-size: var(--fs-30); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.stat-label { font-size: var(--fs-13); color: var(--text-2); font-weight: 500; }
.stat-delta { font-size: var(--fs-12); font-weight: 600; color: var(--text-3); }
.stat-delta--ok { color: var(--ok); } .stat-delta--warn { color: var(--warn); } .stat-delta--danger { color: var(--danger); }

/* ---------- figure and bars (ui.mjs figure(), bars(): the dashboard and the reports) ---------- */
.figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-2); margin: 0 0 var(--sp-3); }
.figure-value { font-size: var(--fs-30); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.figure-label { font-size: var(--fs-13); font-weight: 500; color: var(--text-2); }
/* narrow (a 320 px rail, a phone): the label and the number on a line, the bar under them; wide: one line each */
.bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); container-type: inline-size; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "track track"; align-items: center; gap: 4px var(--sp-3); font-size: var(--fs-13); }
@container (min-width: 480px) {
  .bar-row { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) minmax(2.5rem, auto); grid-template-areas: "label track value"; }
}
.bar-label { grid-area: label; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-label a { color: var(--text); text-decoration: none; }
.bar-label a:hover { color: var(--accent); text-decoration: underline; }
.bar-note { font-size: var(--fs-12); color: var(--text-3); }
.bar-track { grid-area: track; display: block; height: 8px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent); overflow: hidden; }
.bar-svg { display: block; width: 100%; height: 100%; }
.bar-fill { fill: var(--accent); }
.bar-fill--ok { fill: var(--ok); } .bar-fill--warn { fill: var(--warn); } .bar-fill--danger { fill: var(--danger); }
.bar-fill--info { fill: var(--info); } .bar-fill--neutral { fill: var(--neutral); }
.bar-value { grid-area: value; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.columns { margin: 0; }
.columns-peak { margin: 0 0 6px; font-size: var(--fs-12); color: var(--text-3); font-variant-numeric: tabular-nums; }
.columns-svg { display: block; width: 100%; height: 140px; }
.columns-base { fill: var(--border); }
.column-fill { fill: var(--accent); }
.column-fill:hover { fill: var(--accent-hover); }
.columns-axis { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: 6px; font-size: var(--fs-12); color: var(--text-3); font-variant-numeric: tabular-nums; }
/* the column a finger tapped (or the mouse clicked), said under the chart by app.js: a touch screen shows no <title> on hover */
.columns-readout { margin: var(--sp-2) 0 0; font-size: var(--fs-13); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.column-fill.is-picked { fill: var(--accent-hover); }
/* the dashboard greeting: the display face inside the page title (DESIGN.md: display 30/36 Anton) */
.page-title .display { font-size: var(--fs-30); line-height: 1.2; font-weight: 400; letter-spacing: .01em; }
/* ---------- meters (a value against a target or a budget; the fill's width is a class in 5 % steps: no inline style) ---------- */
.meter-row { display: inline-flex; align-items: center; gap: var(--sp-2); width: 100%; max-width: 240px; vertical-align: middle; }
.meter { position: relative; display: block; flex: 1 1 auto; min-width: 56px; height: 6px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.meter-fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.meter--ok .meter-fill { background: var(--ok); }
.meter--info .meter-fill { background: var(--info); }
.meter--warn .meter-fill { background: var(--warn); }
.meter--danger .meter-fill { background: var(--danger); }
.meter--neutral .meter-fill { background: var(--neutral); }
.meter-text { flex: none; min-width: 3.5em; font-size: var(--fs-12); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.meter-fill--0 { width: 0%; } .meter-fill--5 { width: 5%; } .meter-fill--10 { width: 10%; } .meter-fill--15 { width: 15%; } .meter-fill--20 { width: 20%; } .meter-fill--25 { width: 25%; } .meter-fill--30 { width: 30%; } .meter-fill--35 { width: 35%; } .meter-fill--40 { width: 40%; } .meter-fill--45 { width: 45%; } .meter-fill--50 { width: 50%; } .meter-fill--55 { width: 55%; } .meter-fill--60 { width: 60%; } .meter-fill--65 { width: 65%; } .meter-fill--70 { width: 70%; } .meter-fill--75 { width: 75%; } .meter-fill--80 { width: 80%; } .meter-fill--85 { width: 85%; } .meter-fill--90 { width: 90%; } .meter-fill--95 { width: 95%; } .meter-fill--100 { width: 100%; }

/* ---------- line lists (compact lists inside a cell or a card) ---------- */
.line-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.line-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-2); min-width: 0; }
.line-main { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.line-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); color: var(--text-2); font-size: var(--fs-12); overflow-wrap: anywhere; }
.line-actions { margin-left: auto; display: inline-flex; gap: var(--sp-1); }

/* ---------- dates ---------- */
.due { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; white-space: nowrap; }
.due-rel { font-size: var(--fs-12); color: var(--text-3); }
.due--soon .due-rel { color: var(--warn); font-weight: 600; }
.due--overdue .due-rel { color: var(--danger); font-weight: 600; }

/* ---------- sideways scrolling: .scroll-x (the one way a box scrolls sideways; the work board uses it) ----------
   Nothing is cut off at an edge without a sign that there is more: a thin scrollbar in the brand colours (drawn wherever
   the browser lets a page style it; Firefox on Windows may still hide it until hover, so it is never the only sign), a
   soft fade on each side that has more content, room at the end so the last item clears the edge, and snapping on phones.
   How the fades work without script: the box is a grid of three tracks, empty edge | the one child | empty edge, and its
   ::before and ::after are grid items over all three, sticky at the left and right. A grid item's containing block is its
   grid area, so they stay pinned to the visible edges however far the box scrolls; at either end they rest over the empty
   edge track (the same colour they fade from), which is why they show only on a side that has more to see.
   Every .table-wrap follows the same rules (below: no edge track, the fade rests on the first and last cells' padding, the
   header row stays above it), so a table too wide for its place scrolls with the same signs instead of being cut. */
.scroll-x, .table-wrap {
  --scroll-edge: var(--sp-6);       /* the empty room at each end: the last item clears the edge by it, a fade rests on it */
  --scroll-fade-w: var(--scroll-edge);
  --scroll-fade: var(--bg);         /* what is behind the box: the content fades into it */
  display: grid; grid-template-columns: var(--scroll-edge) minmax(min-content, 1fr) var(--scroll-edge); align-items: start;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
.scroll-x > *, .table-wrap > * { grid-column: 2; grid-row: 1; min-width: 0; }
.scroll-x::before, .scroll-x::after, .table-wrap::before, .table-wrap::after { content: ""; grid-row: 1; grid-column: 1 / -1; align-self: stretch; position: sticky; z-index: 3; width: var(--scroll-fade-w); pointer-events: none; }
.scroll-x::before, .table-wrap::before { justify-self: start; left: 0; background: linear-gradient(to right, var(--scroll-fade) 15%, transparent); }
.scroll-x::after, .table-wrap::after { justify-self: end; right: 0; background: linear-gradient(to left, var(--scroll-fade) 15%, transparent); }
.scroll-x:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; box-shadow: none; }
.scroll-x::-webkit-scrollbar, .table-wrap::-webkit-scrollbar { height: 10px; width: 10px; }
.scroll-x::-webkit-scrollbar-track, .table-wrap::-webkit-scrollbar-track { background: var(--scroll-track); border-radius: 999px; }
.scroll-x::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 999px; border: 2px solid var(--scroll-track); }
.scroll-x::-webkit-scrollbar-thumb:hover, .table-wrap::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.scroll-x::-webkit-scrollbar-corner, .table-wrap::-webkit-scrollbar-corner { background: transparent; }
/* a table: the fades are as wide as the first and last cells' side padding and fade into the table's own surface; the
   header cells sit above them (z-index 4), so at rest nothing is drawn over anything */
.table-wrap { --scroll-edge: 0px; --scroll-fade-w: var(--sp-4); --scroll-fade: var(--surface); }

/* ---------- board: .board-frame > p.board-hint + .board.scroll-x > .board-track > section.board-col ----------
   Eight columns of at least 280 px that grow to fill; the board reaches into the page's side padding so cards slide under
   the fades rather than stopping at a hard line. When the eight fit (from about 2480 px wide, where a column can have
   264 px) they fill the width with no scrolling and the hint goes; otherwise the hint says how many are in view (app.js
   counts them; without script it says "scroll sideways"). On a phone each column is 85 % of the width and snaps, so one
   status is in view with the next one showing at the edge. The board has a height (the window's, less what is above it)
   so it scrolls inside itself and each column's header stays at the top. */
.board-frame { container: board / inline-size; min-width: 0; --board-gutter: var(--sp-6); --board-gap: var(--sp-3); --board-col: 280px; }
.board-hint { margin: 0 0 var(--sp-2); font-size: var(--fs-12); font-weight: 600; color: var(--text-2); }
.board-scroll { position: sticky; top: 0; z-index: 3; overflow-x: auto; overflow-y: hidden; margin: 0 calc(-1 * var(--board-gutter)) var(--sp-2); padding: var(--sp-1) 0; background: var(--bg); scrollbar-color: color-mix(in srgb, var(--text) 40%, var(--border)) var(--surface-2); }
.board-scroll[hidden] { display: none; }
.board-scroll > div { height: 1px; }
.board-clip { overflow: hidden; margin-inline: calc(-1 * var(--board-gutter)); }   /* script-made: hides the board's own bottom bar, keeps the up-down one */
.board-clip > .board { margin-inline: 0; }
.board {
  --scroll-edge: var(--board-gutter);
  margin-inline: calc(-1 * var(--board-gutter)); padding-bottom: var(--sp-2);
  max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px);
  scroll-padding-inline: var(--board-gutter); scroll-snap-type: x proximity;
}
.board-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--board-col), 1fr); column-gap: var(--board-gap); align-items: stretch; }
.board-col { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; padding: 0 var(--sp-3) var(--sp-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-card); scroll-snap-align: start; }
.board-col-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  margin: 0 calc(-1 * var(--sp-3)); padding: var(--sp-3) var(--sp-4) var(--sp-2); background: var(--surface-2); border-radius: var(--r-card) var(--r-card) 0 0; font-size: var(--fs-13); font-weight: 700; }
.board-col-header > h2 { font-size: var(--fs-15); font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.board-col-header .count { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-11); line-height: 18px; text-align: center; color: var(--text-2); font-variant-numeric: tabular-nums; }
.board-col > p { margin: 0; font-size: var(--fs-12); }
.board-card { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-control); font-size: var(--fs-13); overflow-wrap: anywhere; }
.board-card:hover { border-color: color-mix(in srgb, var(--text) 25%, var(--border)); }
.board-card > h3 { font-size: var(--fs-15); margin: 0; }
.board-card > p { margin: 0; }
.board-card a { color: var(--text); font-weight: 600; text-decoration: none; }
.board-card-line { color: var(--text-2); font-size: var(--fs-12); }
.board-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: 2px; }
.board-empty { margin: 0; padding: var(--sp-3); text-align: center; color: var(--text-2); font-size: var(--fs-12); }
.board-card a:hover { color: var(--accent); }
/* all eight fit: 8 x 264 px + 7 gaps = 2196 px of board */
@container board (min-width: 2196px) {
  .board-track { --board-col: 0px; }
  .board-hint { display: none; }
}
/* a phone: one column in view (85 % of the width), the next one at the edge, columns snap */
@container board (max-width: 599.98px) {
  .board-track { grid-auto-columns: 85cqi; }
  .board { scroll-snap-type: x mandatory; }
}
/* a wide screen: the board page fills the window and the board takes the height that is left, so its scrollbar and the
   bottom of every column are on screen without scrolling the page; the page drops its 1280 px cap so all eight can fit */
@media (min-width: 1024px) {
  .content:has(.board-frame) { height: 100vh; height: 100dvh; }
  .content:has(.board-frame) > .main { display: flex; flex-direction: column; min-height: 0; max-width: none; }
  .content:has(.board-frame) > .app-foot { max-width: none; }
  .board-frame { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .board-clip { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }   /* the script's clip sits between the frame and the board: same flex chain */
  .board { flex: 1 1 auto; min-height: 18rem; max-height: none; }
}

/* ---------- timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline-item { position: relative; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: var(--sp-4); padding: 0 0 var(--sp-4) 0; }
.timeline-item::before { content: ""; position: absolute; left: 196px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--surface); }
.timeline-item::after { content: ""; position: absolute; left: 199px; top: 18px; bottom: 0; width: 1px; background: var(--border); }
.timeline-item:last-child::after { display: none; }
.timeline-item time { font-size: var(--fs-12); color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 1px; }
.timeline-body { padding-left: var(--sp-4); min-width: 0; font-size: var(--fs-13); }
.timeline-title { margin: 0; font-weight: 500; }
.timeline-detail { color: var(--text-2); word-break: break-word; }
.timeline-item--danger::before { background: var(--danger); }
.timeline-item--ok::before { background: var(--ok); }

/* ---------- the client portal (pm/portal-timeline): the activity feed on .timeline, the right rail's lists, the filter
   chips, the nav's counts and account switch, the app bar title and the phone's tab bar of the client shell (body.app--client:
   html.mjs layout() in client mode). The renders it follows: D06 (desktop) and M06 (phone), Oct 22 2026. ---------- */
/* the feed: a day's label in the timeline's first column (on a phone, a line above the day's first entry), the dots'
   colours (warn: waits on the client; ok: done; the timeline's own gold: for their information), and each entry's title
   line, its lines under it, and its one action on the right */
.timeline-day { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; padding-top: 2px; font-size: var(--fs-11); font-weight: 400; line-height: 1.45; letter-spacing: 0; }
.timeline-day time { padding-top: 0; font-size: var(--fs-11); font-weight: 700; letter-spacing: .02em; color: var(--text); }
.timeline-day-sub { font-size: var(--fs-12); font-weight: 500; color: var(--text-3); }
.timeline-day .pill { margin-top: 6px; }
.timeline-item--warn::before { background: var(--warn); }
.timeline-item--day-end { padding-bottom: var(--sp-6); }
.timeline-item--day-end:last-child { padding-bottom: 0; }
.timeline-entry { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-2) var(--sp-4); }
.timeline-main { flex: 1 1 260px; min-width: 0; }
.timeline-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.timeline-note { font-size: var(--fs-12); font-weight: 600; color: var(--text-2); }
.timeline-when { margin-top: 2px; font-size: var(--fs-12); color: var(--text-2); }
.timeline-when .due { display: contents; white-space: normal; }   /* "Due Oct 17, 2026 · 6 days overdue" wraps as words on a narrow line, never "Due" alone */
.timeline-when .due-rel::before { content: " "; }
.timeline-actions { display: flex; flex: none; gap: var(--sp-2); margin-top: -3px; }
.timeline-files { list-style: none; margin: var(--sp-2) 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-control); font-size: var(--fs-13); }
.timeline-files > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) 10px; padding: 6px 6px 6px 10px; }
.timeline-files > li + li { border-top: 1px solid var(--border); }
.timeline-file { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.timeline-file .cell-sub { display: inline; margin-left: 4px; }
/* the filters: links drawn as small buttons (the current one primary); their counts show on a phone, where the chips are
   the way in (the sidebar's counts say the same on a wider screen) */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.chip-count { display: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--neutral-bg); color: var(--text-2); font-size: var(--fs-11); line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.btn--primary .chip-count { background: color-mix(in srgb, var(--on-accent) 22%, transparent); color: var(--on-accent); }
.card-header--wrap { align-items: center; flex-wrap: wrap; }
.card-footer--split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
/* the right rail: dated rows (Next due) and rows that link to an item (Still needed) */
.rail-list { list-style: none; margin: 0; padding: 0; font-size: var(--fs-13); }
.rail-list > li + li { border-top: 1px solid var(--border); }
.rail-row { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: baseline; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); }
.rail-row time { font-weight: 600; color: var(--text); }
.rail-link { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-4) 10px var(--sp-5); color: var(--text); text-decoration: none; }
.rail-link:hover { color: var(--text); }
.rail-link:hover .cell-title { color: var(--accent); text-decoration: underline; }
.rail-link-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* a person in a card (Your CPA): the large avatar, the name, a line under it, then the card's button */
.profile { display: flex; flex-direction: column; gap: var(--sp-4); }
.profile-head { display: flex; align-items: center; gap: var(--sp-3); }
.profile-text { min-width: 0; }
.profile-name { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.avatar--lg { width: 40px; height: 40px; font-size: var(--fs-13); }
.topbar-note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-12); color: var(--text-2); }
/* the sidebar: a count beside a nav item, an account to switch to (a one-button form drawn as a nav item), a long label
   that wraps (staff labels are single words: nothing changes for them), who is signed in with a long client name */
.nav-count { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--neutral-bg); color: var(--text-2); font-size: var(--fs-11); line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.nav-item.is-active .nav-count { background: var(--accent-soft); color: var(--accent); }
.nav-label-text { overflow-wrap: anywhere; }
.nav-form { margin: 0; }
button.nav-item { width: 100%; height: auto; min-height: 34px; padding-top: 6px; padding-bottom: 6px; border: 0; background: transparent; font: inherit; font-size: var(--fs-13); font-weight: 500; line-height: 1.35; text-align: left; cursor: pointer; }
.app--client .sidebar-user-meta { flex-wrap: wrap; }
.card-body > .theme-switch { margin: 0; }
.card-body > .theme-switch .theme-option { padding: 8px 0; font-size: var(--fs-13); }
/* the phone's app bar title and bottom tab bar: drawn under 720 px only (responsive, below) */
.appbar-title, .tabbar { display: none; }
.tabbar-label { line-height: 1.2; }
/* Send documents (pm/portal-send-all; the Director, Oct 24 2026: "1 card all documents with an upload file button next to
   each item ... at the bottom of the card one send documents folder"): ONE card. Inside it each open request is a group
   (.send-group: its title, its due date and how much is in, then its items' table), every document row with its own
   Upload (form.send-upload: a file input and the button, side by side; on a phone the input above the button), and at
   the bottom one folder (.send-folder) whose multi-file input is drawn as a wide drop area (a desktop browser takes files
   dropped on the input itself, no script), its button the primary one, the whole box a tap target far over 44 px. No
   text under 12 px. */
.send-group + .send-group { margin-top: var(--sp-6); }
.send-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-3); margin-bottom: var(--sp-2); }
.send-group-title { font-size: var(--fs-15); font-weight: 700; overflow-wrap: anywhere; }
.send-group-meta { margin: 0; color: var(--text-2); font-size: var(--fs-13); }
.send-upload { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); width: 100%; min-width: 0; margin: 0; }
/* a file input is never wider than its box: a native file input's own width ("Choose File | No file chosen") in every
   item's row pushed a 390 px phone's page out to 477 px (the staging walk, Oct 24 2026 2 AM EDT); the folder's input too */
.send-upload input[type="file"], .send-folder input[type="file"] { display: block; width: 100%; max-width: 100%; min-width: 0; }
.send-upload input[type="file"] { flex: 1 1 12rem; }   /* a wide screen: beside its Upload, taking the room the cell has */
.send-folder { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.send-folder-title { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); font-size: var(--fs-15); font-weight: 700; }
.send-folder > .help { margin-bottom: var(--sp-4); }
.send-folder-sent { margin-top: var(--sp-5); }
.send-folder-sub { margin: 0 0 var(--sp-2); font-size: var(--fs-13); font-weight: 700; }
.input.input--files { min-height: 96px; padding: var(--sp-4); border-width: 2px; border-style: dashed; background: var(--surface-2); font-size: var(--fs-15); cursor: pointer; }
.input.input--files:hover { border-color: var(--accent); }
.input--files::file-selector-button { min-height: 40px; margin-right: var(--sp-3); padding: 0 16px; font: inherit; font-size: var(--fs-13); font-weight: 600;
  color: var(--on-accent); background: var(--accent); border: 1px solid var(--accent); border-radius: var(--r-control); cursor: pointer; }
.input--files::file-selector-button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
/* a phone: the item's cell is one column (its label above), the input above its Upload, both the card's whole width, the
   button 44 px tall (tbody in the selectors: they outweigh the stacked table's td:last-child rules, which come later) */
@media (max-width: 719.98px) {
  .send-upload { flex-direction: column; align-items: stretch; }
  .send-upload input[type="file"] { flex: none; }
  .send-upload .btn { min-height: 44px; }
  .table tbody td.send-cell { grid-template-columns: minmax(0, 1fr); }
  .table tbody td.send-cell > * { grid-column: 1; }
}

/* ---------- conversations (messages): ol.convo > li.convo-msg, direction marks, unread rows ---------- */
.convo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.convo-msg { width: min(100%, 720px); padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.convo-msg--out { align-self: flex-end; background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); }
.convo-msg--in { align-self: flex-start; }
.convo-msg--note { align-self: stretch; width: 100%; background: var(--warn-bg); border-style: dashed; border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.convo-msg.is-new { box-shadow: inset 3px 0 0 var(--gold); }
.convo-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.convo-who { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.convo-author { font-size: var(--fs-13); font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.convo-meta { font-size: var(--fs-12); color: var(--text-2); }
.convo-time { flex: none; align-self: flex-start; font-size: var(--fs-12); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.convo-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.convo-body { font-size: var(--fs-15); overflow-wrap: anywhere; }
.convo-body p { margin: 0 0 var(--sp-2); }
.convo-body p:last-child { margin-bottom: 0; }
.convo-files { list-style: none; margin: var(--sp-3) 0 0; padding: var(--sp-2) 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-13); }
.convo-files .cell-sub { display: inline; }
.convo-receipt { margin: var(--sp-2) 0 0; font-size: var(--fs-12); color: var(--text-3); }
.convo-receipt--ok { color: var(--ok); }
.convo-receipt--warn { color: var(--warn); font-weight: 600; }
.convo-receipt--danger { color: var(--danger); font-weight: 600; }
.dir { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; }
.dir--out { background: var(--accent-soft); color: var(--accent); }
.dir--in { background: var(--info-bg); color: var(--info); }
.dir--note { background: var(--warn-bg); color: var(--warn); }
.last-cell { display: inline-flex; align-items: center; gap: var(--sp-2); }
.unread-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.table tr.is-unread td { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.table tr.is-unread .row-link { font-weight: 800; }
.table tr.is-unread .cell-sub { color: var(--text-2); }
.check-list { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 220px; overflow-y: auto; padding: var(--sp-2) var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-control); }
.check-list .check { font-size: var(--fs-13); align-items: flex-start; }
.check-list .check .cell-sub { display: inline; }

/* ---------- the chat by client (pm/messages-chat): .chat > nav.chat-rail + section.chat-pane ----------
   /messages/with[/:clientId] (pages-messages-chat.mjs, components in ui.mjs). A wide screen: the clients' rail on the left
   (it stays in view and scrolls on its own), the chat on the right on the page's bone ground: day dividers, subject lines,
   bubbles (the client's on the left on the surface, the firm's on the right in the accent's soft green, as on a
   conversation's page; internal notes centred and quiet, dashed), and
   the composer pinned to the bottom of the screen while the stream runs under it (position: sticky: no script). Under
   720 px the rail alone, or the chat alone with All clients at the top (the phone block). .chat--open: a client is picked. */
.chat { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.chat-rail { position: sticky; top: var(--sp-4); max-height: calc(100vh - var(--sp-8)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.chat-search { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); background: var(--surface); border-bottom: 1px solid var(--border); border-radius: var(--r-card) var(--r-card) 0 0; }
.chat-search .input { flex: 1 1 auto; min-width: 0; height: 34px; min-height: 34px; padding-top: 0; padding-bottom: 0; font-size: var(--fs-13); }
.chat-rail-list { list-style: none; margin: 0; padding: 0; }
.chat-rail-list > li + li { border-top: 1px solid var(--border); }
.chat-rail-item { display: flex; align-items: center; gap: var(--sp-3); min-height: 60px; padding: 10px var(--sp-4); color: var(--text); text-decoration: none; }
.chat-rail-item:hover { background: color-mix(in srgb, var(--gold-soft) 45%, transparent); color: var(--text); text-decoration: none; }
.chat-rail-item.is-active { background: var(--gold-soft); box-shadow: inset 3px 0 0 var(--gold); }
.chat-rail-item .avatar { font-size: var(--fs-12); }
.chat-rail-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-rail-top, .chat-rail-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); min-width: 0; }
.chat-rail-bottom { align-items: center; }
.chat-rail-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-13); font-weight: 600; }
.chat-rail-when { flex: none; font-size: var(--fs-12); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chat-rail-preview { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); color: var(--text-3); }
.chat-rail-item.is-unread .chat-rail-name { font-weight: 800; }
.chat-rail-item.is-unread .chat-rail-preview { color: var(--text-2); }
.chat-rail-item.is-unread .chat-rail-when { color: var(--accent); font-weight: 600; }
.chat-rail-item.is-active .chat-rail-preview, .chat-rail-item.is-active .chat-rail-when { color: var(--text-2); }   /* --text-3 on --gold-soft is under 4.5:1 */
.chat-rail-count { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: var(--fs-12); font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.chat-rail .empty { margin: var(--sp-3); padding: var(--sp-8) var(--sp-4); border: 0; }
.chat-rail-foot { border-top: 1px solid var(--border); }
.chat-rail-foot .pagination { margin: 0; padding: var(--sp-3) var(--sp-4); }
.chat-back { display: none; margin: 0 0 var(--sp-2); }
.chat-back a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--fs-15); font-weight: 600; text-decoration: none; }
.chat-back .icon { transform: scaleX(-1); }
.chat-pane { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.chat-pane--empty { padding: var(--sp-4); }
.chat-pane--empty .empty { border: 0; background: transparent; }
.chat-pane > .banner { margin: 0 var(--sp-5) var(--sp-5); }
.chat-stream { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); background: var(--bg); border-radius: var(--r-card) var(--r-card) 0 0; }
.chat-day { align-self: stretch; display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-12); font-weight: 600; letter-spacing: .02em; color: var(--text-2); }
.chat-day::before, .chat-day::after { content: ""; flex: 1 1 0; height: 1px; background: var(--border); }
.chat-day:first-child, .chat-more + .chat-day { margin-top: 0; }
.chat-subject { align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px var(--sp-2); margin: var(--sp-2) 0 0; font-size: var(--fs-12); color: var(--text-2); text-align: center; }
.chat-subject-text { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.chat-more, .chat-none { margin: 0; text-align: center; font-size: var(--fs-13); color: var(--text-2); }
.chat-none { padding: var(--sp-8) 0; }
.bubble { width: fit-content; max-width: min(78%, 640px); min-width: 0; padding: 10px var(--sp-4) var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); scroll-margin-top: var(--sp-4); }
.bubble--in { align-self: flex-start; border-top-left-radius: 2px; }
.bubble--out { align-self: flex-end; background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); border-top-right-radius: 2px; }
.bubble--note { align-self: center; max-width: min(88%, 560px); background: transparent; border-style: dashed; border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); color: var(--text-2); }
.bubble.is-new { box-shadow: inset 3px 0 0 var(--gold); }
.bubble-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); margin-bottom: var(--sp-1); font-size: var(--fs-12); color: var(--text-2); }
.bubble-who { font-size: var(--fs-13); font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.bubble-to { overflow-wrap: anywhere; }
.bubble-time { margin-left: auto; padding-left: var(--sp-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bubble-body { font-size: var(--fs-15); overflow-wrap: anywhere; }
.bubble-body p { margin: 0 0 var(--sp-2); }
.bubble-body p:last-child { margin-bottom: 0; }
.bubble--note .bubble-body { font-size: var(--fs-13); }
.bubble-files { list-style: none; margin: var(--sp-2) 0 0; padding: var(--sp-2) 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-13); overflow-wrap: anywhere; }
.bubble-files .cell-sub { display: inline; color: var(--text-2); }
.bubble .muted { color: var(--text-2); }
.bubble-receipt { margin: var(--sp-2) 0 0; font-size: var(--fs-12); color: var(--text-2); }
.bubble-receipt--ok { color: var(--ok); }
.bubble-receipt--warn { color: var(--warn); font-weight: 600; }
.bubble-receipt--danger { color: var(--danger); font-weight: 600; }
.chat-composer { position: sticky; bottom: 0; z-index: 5; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5);
  background: var(--surface); border-top: 1px solid var(--border); border-radius: 0 0 var(--r-card) var(--r-card); }
.chat-composer .banner { margin-bottom: 0; }
.chat-composer-target { margin: 0; font-size: var(--fs-13); color: var(--text-2); overflow-wrap: anywhere; }
.chat-composer-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.chat-composer .textarea { min-height: 72px; }
.chat-composer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

/* ---------- pagination ---------- */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-4) 0; }
.pagination-status { margin: 0; color: var(--text-2); font-size: var(--fs-13); font-variant-numeric: tabular-nums; }
.pagination-list { list-style: none; display: flex; align-items: center; gap: var(--sp-1); margin: 0; padding: 0; }
.pagination-page { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: var(--r-control); color: var(--text-2); text-decoration: none; font-size: var(--fs-12); font-weight: 600; font-variant-numeric: tabular-nums; }
.pagination-page:hover { background: var(--surface-2); color: var(--text); }
.pagination-page.is-active { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.pagination-gap { color: var(--text-3); padding: 0 4px; }

/* ---------- small things ---------- */
.kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; font-family: var(--font-ui); font-size: var(--fs-11); font-weight: 600; line-height: 1;
  color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; }
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-size: var(--fs-11); font-weight: 700; letter-spacing: .02em; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
.skeleton { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); }
.skeleton-line { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2), var(--border), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.skeleton-line:nth-child(3n+2) { width: 82%; } .skeleton-line:nth-child(3n) { width: 64%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.copy-box { margin: 0; padding: var(--sp-3) var(--sp-4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-control); word-break: break-all; font-size: var(--fs-13); }
.copy-box + p { margin-top: var(--sp-3); }

/* ---------- menu (details) ---------- */
.menu { position: relative; display: inline-block; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 200px; padding: var(--sp-1); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-overlay); box-shadow: var(--elevation-1); }
.menu--start .menu-list { left: 0; right: auto; }
.menu-item { display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-control); color: var(--text); text-decoration: none; font-size: var(--fs-13); }
.menu-item:hover { background: var(--surface-2); color: var(--text); }
.menu-item--danger { color: var(--danger); }
.menu-form { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 260px; padding: var(--sp-3); }
.menu-form .btn { align-self: flex-start; }

/* ---------- drawer (works by :target without script; app.js adds .is-open and focus handling) ---------- */
.drawer { display: none; position: fixed; inset: 0; z-index: 50; }
.drawer:target, .drawer.is-open { display: block; }
html.js .drawer:target:not(.is-open) { display: none; }
html.drawer-open { overflow: hidden; }
.drawer-backdrop, .dialog-static .drawer-backdrop { position: absolute; inset: 0; background: var(--overlay); cursor: default; }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--border); border-radius: var(--r-overlay) 0 0 var(--r-overlay); box-shadow: var(--elevation-1);
  animation: drawer-in 150ms var(--ease);
}
.drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--border); }
.drawer-header h2 { font-size: var(--fs-17); }
.drawer-sub { margin: var(--sp-1) 0 0; font-size: var(--fs-13); color: var(--text-2); }
.drawer-close { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border-radius: var(--r-control); color: var(--text-2); text-decoration: none; font-size: 20px; line-height: 1; }
.drawer-close:hover { background: var(--surface-2); color: var(--text); }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--sp-6); }
.drawer-body .form { max-width: none; }
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- dialogs (confirm, shortcuts) and the command palette ---------- */
dialog { color: var(--text); }
dialog::backdrop { background: var(--overlay); }
.dialog { width: min(440px, calc(100vw - 32px)); padding: var(--sp-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-overlay); box-shadow: var(--elevation-1); }
dialog.dialog[open] { animation: pop-in 150ms var(--ease); }
.dialog-title { font-size: var(--fs-17); margin-bottom: var(--sp-2); }
.dialog-body { margin: 0 0 var(--sp-5); color: var(--text-2); font-size: var(--fs-15); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }
.dialog .btn--danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.dialog .btn--danger:hover { filter: brightness(.94); color: var(--on-danger); }
.dialog-static { display: none; position: fixed; inset: 0; z-index: 60; }
.dialog-static:target { display: grid; place-items: center; }
.dialog-static .dialog { position: relative; }
.shortcuts { width: min(520px, calc(100vw - 32px)); }
.shortcut-list { margin: var(--sp-4) 0 var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.shortcut-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: var(--sp-3); font-size: var(--fs-13); }
.shortcut-row dt { display: flex; align-items: center; gap: 4px; color: var(--text-3); font-size: var(--fs-12); }
.shortcut-row dd { margin: 0; color: var(--text); }
.palette {
  width: min(640px, calc(100vw - 32px)); max-height: min(560px, 76vh); margin: 12vh auto auto; padding: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-overlay); box-shadow: var(--elevation-1); overflow: hidden;
}
.palette[open] { display: flex; flex-direction: column; animation: pop-in 150ms var(--ease); }
.palette-input { width: 100%; padding: var(--sp-4) var(--sp-5); font: inherit; font-size: var(--fs-17); color: var(--text); background: transparent; border: 0; border-bottom: 1px solid var(--border); }
.palette-input:focus, .palette-input:focus-visible { outline: none; box-shadow: none; }
.palette-input::placeholder { color: var(--text-3); }
.palette-list { list-style: none; margin: 0; padding: var(--sp-2); overflow-y: auto; flex: 1; }
.palette-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "kind title" ". sub"; align-items: center; gap: 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-control); cursor: pointer; font-size: var(--fs-15); }
.palette-item.is-active { background: var(--gold-soft); box-shadow: inset 2px 0 0 var(--gold); }
.palette-item-kind { grid-area: kind; font-size: var(--fs-11); font-weight: 600; color: var(--text-3); }
.palette-item-title { grid-area: title; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-item-sub { grid-area: sub; font-size: var(--fs-12); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-empty { padding: var(--sp-6); text-align: center; color: var(--text-3); font-size: var(--fs-13); }
.palette-foot { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: 0; padding: var(--sp-2) var(--sp-5); border-top: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-12); }
.palette-item.is-active .palette-item-kind { color: var(--text-2); }
@keyframes pop-in { from { transform: translateY(6px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- documents library: folders (<details>), row selection, the bulk bar, tag links ---------- */
.folder { margin-bottom: var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); min-width: 0; }
.folder-summary { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; padding: var(--sp-2) var(--sp-4); cursor: pointer; list-style: none; font-size: var(--fs-15); font-weight: 700; border-radius: var(--r-card); }
.folder-summary::-webkit-details-marker { display: none; }
.folder-summary::before { content: ""; flex: none; width: 7px; height: 7px; margin-right: 2px; border-right: 1.5px solid var(--text-2); border-bottom: 1.5px solid var(--text-2); transform: rotate(-45deg); transition: transform 150ms var(--ease); }
.folder[open] > .folder-summary::before { transform: rotate(45deg); }
.folder-summary:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.folder-title { min-width: 0; overflow-wrap: anywhere; }
.folder-sub { color: var(--text-2); font-size: var(--fs-13); font-weight: 500; }
.folder-count { margin-left: auto; min-width: 28px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: var(--fs-12); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.folder-body { padding: 0 var(--sp-3) var(--sp-3); }
.folder .folder { margin-bottom: var(--sp-2); background: var(--bg); }
.folder .folder .folder-summary { min-height: 40px; font-size: var(--fs-13); }
.folder-body > .table-wrap { margin-top: var(--sp-1); }
.folder-body > p { margin: var(--sp-2) var(--sp-1) 0; font-size: var(--fs-13); color: var(--text-2); }
.check--row { font-size: inherit; }
.bulk-bar { margin-bottom: var(--sp-3); background: var(--gold-soft); border: 1px solid var(--border); border-radius: var(--r-card); }
.bulk-bar-label { display: flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: var(--sp-2) var(--sp-4); cursor: pointer; list-style: none; font-size: var(--fs-13); font-weight: 600; color: var(--text); border-radius: var(--r-card); }
.bulk-bar-label::-webkit-details-marker { display: none; }
.bulk-bar-label::before { content: ""; flex: none; width: 6px; height: 6px; margin-right: 2px; border-right: 1.5px solid var(--text-2); border-bottom: 1.5px solid var(--text-2); transform: rotate(-45deg); transition: transform 150ms var(--ease); }
.bulk-bar[open] > .bulk-bar-label::before { transform: rotate(45deg); }
.bulk-bar-body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); padding: 0 var(--sp-4) var(--sp-3); }
.bulk-bar input, .bulk-bar select { height: 34px; min-height: 0; padding-top: 0; padding-bottom: 0; font-size: var(--fs-13); }
.bulk-bar-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-bottom: 2px; }
a.pill--link { text-decoration: none; }
a.pill--link:hover { text-decoration: none; box-shadow: inset 0 0 0 1px currentColor; }

/* ---------- toasts ---------- */
.toasts { position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); pointer-events: none; max-width: calc(100vw - 32px); }
.toast { pointer-events: auto; display: flex; align-items: center; gap: var(--sp-3); min-height: 40px; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  background: var(--text); color: var(--bg); border-radius: var(--r-card); box-shadow: var(--elevation-1); font-size: var(--fs-13); font-weight: 600; animation: pop-in 150ms var(--ease); }
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; }
.toast--ok::before { background: #6FCB95; } .toast--danger::before { background: #F08A80; } .toast--warn::before { background: #E0B341; } .toast--info::before { background: #7FB3F0; }
.toast-close { font: inherit; font-size: 16px; line-height: 1; color: inherit; opacity: .7; background: none; border: 0; width: 26px; height: 26px; border-radius: 4px; cursor: pointer; }
.toast-close:hover { opacity: 1; }
.toast.is-leaving { opacity: 0; transform: translateY(4px); transition: opacity 150ms var(--ease), transform 150ms var(--ease); }

/* ---------- responsive: the sidebar becomes a top bar under 1024 px ---------- */
@media (max-width: 1023.98px) {
  .shell { display: block; }
  .sidebar { position: sticky; top: 0; z-index: 40; height: auto; max-height: 100vh; overflow: visible; padding: 0; border-right: 0; border-bottom: 1px solid var(--border); }
  .sidebar-head { min-height: 56px; padding: var(--sp-2) var(--sp-4); }
  .nav-toggle-label { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 var(--sp-3); margin-right: calc(var(--sp-3) * -1); border-radius: var(--r-control); font-size: var(--fs-13); font-weight: 600; color: var(--text); cursor: pointer; }
  .nav-toggle-label:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
  .env-badge { margin-left: auto; }
  .sidebar-head > .nav-toggle-label { margin-left: auto; }   /* no Test data badge (open to real clients): Menu keeps the right edge */
  .env-badge + .nav-toggle-label { margin-left: 0; }
  .sidebar-panel { display: none; max-height: calc(100vh - 56px); overflow-y: auto; padding: var(--sp-3) var(--sp-4) var(--sp-4); border-top: 1px solid var(--border); background: var(--surface-2); }
  .nav-toggle:checked ~ .sidebar .sidebar-panel { display: flex; }
  .nav-toggle:focus-visible ~ .sidebar .nav-toggle-label { outline: 2px solid var(--accent); outline-offset: 2px; }
  .nav-item { height: 44px; }
  .nav-item.is-active::before { left: -16px; }
  /* staff: the open menu starts with the search, then who is signed in with Sign out, then the theme, then the sections;
     on a phone the account row and the switch were below the fold (pm/ux-pass-1, U6). The order is visual only: the
     sidebar's markup (and so the order of Tab) stays the desktop's. The client shell's menu is unchanged. */
  .app:not(.app--client) .sidebar-panel > .sidebar-user { order: 1; margin: 0 0 var(--sp-3); padding: 0 var(--sp-2) var(--sp-3); border-top: 0; border-bottom: 1px solid var(--border); }
  .app:not(.app--client) .sidebar-panel > .theme-switch { order: 2; margin: 0 var(--sp-2) var(--sp-4); }
  .app:not(.app--client) .sidebar-panel > .nav { order: 3; }
  .topbar { padding: var(--sp-3) var(--sp-4); min-height: 48px; }
  .main { padding: var(--sp-5) var(--sp-4); }
  .app-foot { padding: var(--sp-4); }
  .board-frame { --board-gutter: var(--sp-4); }
  .grid-main { grid-template-columns: minmax(0, 1fr); }
  .chat { grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-4); }
  .chat-rail { top: calc(56px + var(--sp-4)); max-height: calc(100vh - 56px - var(--sp-8)); }
  .bubble { scroll-margin-top: calc(56px + var(--sp-4)); }
}
@media (max-width: 860px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- responsive: tables become stacked cards under 720 px ---------- */
@media (max-width: 719.98px) {
  body { font-size: var(--fs-15); }
  .page-title { font-size: var(--fs-20); }
  .page-header { grid-template-columns: minmax(0, 1fr); }
  .page-header > .page-actions { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--sp-4); }
  .meta { gap: var(--sp-3) var(--sp-5); }
  .topbar-actions .palette-trigger span:not(.kbd) { display: none; }
  .topbar-actions .palette-trigger .kbd { display: none; }
  .table-wrap { display: block; overflow: visible; background: transparent; border: 0; }
  .table-wrap::before, .table-wrap::after { content: none; }
  .card .table-wrap { padding: var(--sp-3); }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .table tbody tr { margin-bottom: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
  .table tbody tr:hover td { background: transparent; }
  .table td, .table td:first-child, .table td:last-child { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--sp-3); align-items: baseline; justify-items: start; padding: 6px 0; border-bottom: 1px solid var(--border); text-align: left; }
  .table td.num { text-align: left; }
  .table tbody tr td:last-child { border-bottom: 0; }
  .table td::before { content: attr(data-label); font-size: var(--fs-12); font-weight: 600; color: var(--text-2); }
  .table td > * { grid-column: 2; }   /* a cell of several parts (a link and its sub-line, two pills) keeps them all beside its label */
  .table td, .table td:first-child, .table td:last-child { row-gap: 4px; }
  .table td:not([data-label])::before { content: ""; }
  .table td { overflow-wrap: anywhere; }   /* a card's value column has its width: only a word longer than it breaks (an address in a .person) */
  .table-empty td { display: block; text-align: center; }
  .table-empty td::before { content: none; }
  /* the count line above a list (the work list's "46 work items, 1 to 46 shown") takes the card's whole width: a table
     caption in a table that is no longer a table shrinks to its narrowest word otherwise */
  .table > caption:not(.visually-hidden) { display: block; width: 100%; padding: 0 0 var(--sp-2); text-align: left; font-size: var(--fs-13); color: var(--text-2); }
  .table td.phone-hide { display: none; }
  .phone-only { display: block; }
  /* staff: a cell with nothing in it is not a line of the card (the client portal's cards are as M06 draws them) */
  .app:not(.app--client) .table td:empty { display: none; }
  /* a record's facts: a two-column grid of label-above-value pairs (a detail page's header, ui.mjs facts({ grid })) */
  .page-header .meta:not(.meta--stacked), .meta--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); }
  /* a list page's filters fold away behind one row, open from the start when a filter is in use (ui.mjs filtersFold) */
  .filters-fold { display: block; margin: 0 0 var(--sp-3); }
  .filters-fold[open] { margin-bottom: var(--sp-2); }
  .filters-fold-summary { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); font-size: var(--fs-15); font-weight: 600; color: var(--text); cursor: pointer; list-style: none; }
  .filters-fold-summary::-webkit-details-marker { display: none; }
  .filters-fold-summary::before { content: ""; flex: none; width: 7px; height: 7px; margin-right: 2px; border-right: 1.5px solid var(--text-2); border-bottom: 1.5px solid var(--text-2); transform: rotate(-45deg); transition: transform 150ms var(--ease); }
  .filters-fold[open] > .filters-fold-summary::before { transform: rotate(45deg); }
  .filters-fold-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: var(--fs-12); font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
  .filters-fold:not([open]) + * { display: none; }
  /* staff: no text under 12 px on a phone (pm/ux-pass-1, U10; the client portal keeps M06's sizes) */
  .app:not(.app--client) :is(.env-badge, .avatar, .tab-count, .board-col-header .count, .nav-heading, .kbd, .theme-option, .sidebar-user-role, .nav-count, .palette-item-kind) { font-size: var(--fs-12); }   /* the Sheet's sort arrow: in the Sheet's block */
  .filters { padding: var(--sp-3); }
  .field--inline, .field--inline:first-child { flex: 1 1 100%; }
  .bulk-bar-body { padding: 0 var(--sp-3) var(--sp-3); }
  .folder-body { padding: 0 var(--sp-2) var(--sp-2); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-value { font-size: var(--fs-24); }
  .figure-value { font-size: var(--fs-24); }
  .page-title .display { font-size: var(--fs-24); }
  .timeline-item { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-left: var(--sp-5); }
  .timeline-item::before { left: 0; }
  .timeline-item::after { left: 3px; }
  .timeline-body { padding-left: 0; }
  .convo-msg { width: 100%; padding: var(--sp-3); }
  .convo-head { flex-wrap: wrap; }
  .convo-time { order: 3; width: 100%; padding-left: 36px; }
  /* the chat by client (pm/messages-chat): /messages/with is the rail alone, /messages/with/:id the chat alone */
  .chat { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .chat--open .chat-rail, .chat:not(.chat--open) .chat-pane { display: none; }
  .chat-rail { position: static; max-height: none; overflow: visible; }
  .chat-search { position: static; }
  .chat-rail-item { min-height: 64px; }
  .chat-back { display: block; }
  .chat-stream { padding: var(--sp-4) var(--sp-3); }
  .bubble { max-width: 88%; }
  .bubble--note { max-width: 100%; }
  .chat-composer { padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); }
  .drawer-panel { width: 100vw; border-radius: 0; border-left: 0; }
  .drawer-body { padding: var(--sp-5) var(--sp-4); }
  .auth { padding: var(--sp-6) var(--sp-5); }
  .public-wrap { padding: var(--sp-6) var(--sp-4); }
  .state { margin: var(--sp-6) auto; padding: var(--sp-6) var(--sp-5); }
  .pagination { flex-direction: column; align-items: flex-start; }
  .shortcut-row { grid-template-columns: 110px minmax(0, 1fr); }
}

/* ---------- responsive: the client portal on a phone (under 720 px), as M06 draws it ----------
   The sidebar becomes a slim app bar (the logo, the page's title and a line under it, the Test data badge) and its Menu is
   not shown: the bottom tab bar replaces it (Activity, Requests, Documents, Messages, Account; icon over label, counts,
   aria-current on the page's own), fixed to the bottom above the phone's home indicator (env(safe-area-inset-bottom)),
   and the content is padded so nothing hides under it. The filters scroll sideways in one row. Between 720 and 1023 px
   the client shell is the staff one: the top bar with the Menu. CSS only: none of it needs script. */
@media (max-width: 719.98px) {
  .app--client .nav-toggle-label, .app--client .sidebar-panel, .app--client .nav-toggle:checked ~ .sidebar .sidebar-panel { display: none; }
  .app--client .sidebar-head { gap: var(--sp-3); }
  .app--client .sidebar-head .brand-name { display: none; }
  .app--client .appbar-title { display: block; flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--fs-17); font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .appbar-sub { display: block; font-size: var(--fs-12); font-weight: 500; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
  .app--client .env-badge { margin-left: 0; }
  .app--client .topbar { display: none; }
  .app--client .content { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .app--client .toasts { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--border); }
  .tabbar-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 50px; padding: 4px 2px 0; border-radius: 10px;
    color: var(--text-2); text-decoration: none; font-size: var(--fs-11); font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
  .tabbar-item:hover { color: var(--text); text-decoration: none; }
  .tabbar-item .icon { width: 22px; height: 22px; }
  .tabbar-item.is-active { color: var(--text); }
  .tabbar-item.is-active .icon { color: var(--accent); }
  .tabbar-item.is-active::before { content: ""; position: absolute; top: -7px; left: 50%; width: 24px; height: 3px; margin-left: -12px; border-radius: 0 0 2px 2px; background: var(--gold); }
  .tabbar-count { position: absolute; top: 0; left: calc(50% + 4px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--on-accent);
    font-size: var(--fs-11); font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
  .chips { flex: 0 0 calc(100% + 2 * var(--sp-5)); flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--sp-5)); padding: 2px var(--sp-5) 4px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chips .btn { flex: none; height: 36px; padding: 0 14px; border-radius: 999px; font-size: var(--fs-13); }
  .chip-count { display: inline-block; }
  .timeline-day { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); padding-top: 0; margin-bottom: 2px; }
  .timeline-day .pill { margin-top: 0; }
  .timeline-main { flex-basis: 150px; }   /* a short action (Answer, Upload, Reply) stays beside the text; Review and sign goes under it */
  .timeline-actions { margin-top: 0; }
  .timeline-actions .btn { height: 40px; padding: 0 14px; font-size: var(--fs-13); }
  .rail-row { grid-template-columns: 96px minmax(0, 1fr); padding: var(--sp-3) var(--sp-4); }
  .rail-link { min-height: 56px; padding: 10px var(--sp-3) 10px var(--sp-4); }
}

/* 44 px targets on touch screens */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn--sm { min-height: 40px; }
  .input, .select, .filters input, .filters select { min-height: 44px; }
  .pagination-page { min-width: 40px; height: 40px; }
  .theme-option { min-height: 36px; }
  /* pm/ux-pass-1 (U8): a link in a table cell is 40 px tall to the finger: padding, the row grows by 10 px and the link
     fills it, top to bottom, inside its own cell; a header's sort link and button reach into the header's padding */
  .table td a:not(.btn):not(.pill) { display: inline-block; padding-block: 11px; margin-block: -6px; }
  .table th a, .table .th-sort { display: inline-flex; align-items: center; padding-block: 11px; margin-block: -11px; }
  .tab { min-height: 44px; }
  .palette-trigger { min-width: 44px; min-height: 44px; }
  .sidebar-head .brand { min-height: 40px; }
  .stat-label a { display: inline-block; min-width: 44px; padding-block: 11px; margin-block: -11px; }
  .pagination a:not(.btn):not(.pagination-page) { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 40px; }
  /* no "/" key to press on a touch screen (U6) */
  .sidebar-search-key { display: none; }
  /* checkboxes: 20 px, the label around a table's row checkbox padded to 40 px (its own box stays where it was), and a
     row of choices in a form 44 px tall with the whole row tappable (U7, U8) */
  .check input, fieldset.field input[type="checkbox"], .field > label:not(.check) > input[type="checkbox"] { width: 20px; height: 20px; }
  .check, fieldset.field > label, .field > label:not(.check):has(> input[type="checkbox"]) { min-height: 44px; }
  .table .check { min-height: 0; padding: 10px; margin: -10px; }
  /* the chat by client (pm/messages-chat): the search box and the links in a line of text (Open conversation, an
     attachment, the conversation a reply goes on) reach 44 px without moving the text around them */
  .chat-search .input { height: 44px; min-height: 44px; }
  .chat-subject a, .bubble-files a, .chat-composer-target a { display: inline-block; padding-block: 13px; margin-block: -13px; }
}

/* motion: none for anyone who asked for less */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* print: the content only */
@media print {
  .sidebar, .topbar, .toasts, .app-foot, .page-actions, .filters, .pagination, .drawer { display: none !important; }
  .tabbar { display: none !important; }
  .shell { display: block; }
  body { background: #fff; color: #000; }
}

/* Sign in with Google: Google's branding guidelines (the G unchanged, Roboto Medium 14 px; light #FFFFFF on #747775, dark #131314 on #8E918F). */
:root { --gsi-bg: #FFFFFF; --gsi-border: #747775; --gsi-text: #1F1F1F; --gsi-hover: rgba(31, 31, 31, 0.08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gsi-bg: #131314; --gsi-border: #8E918F; --gsi-text: #E3E3E3; --gsi-hover: rgba(227, 227, 227, 0.08); } }
:root[data-theme="dark"] { --gsi-bg: #131314; --gsi-border: #8E918F; --gsi-text: #E3E3E3; --gsi-hover: rgba(227, 227, 227, 0.08); }
.gsi-btn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 1px solid var(--gsi-border); border-radius: 4px; background: var(--gsi-bg); color: var(--gsi-text); font-family: "Roboto", "Manrope", system-ui, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.25px; line-height: 20px; text-decoration: none; white-space: nowrap; position: relative; overflow: hidden; }
.gsi-btn::before { content: ""; position: absolute; inset: 0; background: var(--gsi-hover); opacity: 0; transition: opacity 150ms ease-out; }
.gsi-btn:hover::before, .gsi-btn:focus-visible::before { opacity: 1; }
.gsi-btn:hover { color: var(--gsi-text); text-decoration: none; }
.gsi-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gsi-icon { display: inline-flex; width: 20px; height: 20px; }
.gsi-icon svg { width: 20px; height: 20px; }
.gsi-text { position: relative; }

/* ==========================================================================================================
   pm/progress (Oct 24 2026): progress steps (ui.mjs progressSteps: a client's onboarding on the client page, the client's
   own return in the portal), the Onboarding card's actions and record, and the pipeline's row of step tabs and its column
   headers. Tokens only: the same in light and dark.
   ========================================================================================================== */
/* The frame is a size container: the steps sit in a row while each has room for its label, one under the other where
   they do not (a phone, a narrow window): eight full steps under 800 px of room, five compact ones under 440 px. */
.progress-wrap { container: steps / inline-size; min-width: 0; }
.progress-steps { --step-mark: 28px; --step-line: 2px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.progress-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 0 var(--sp-2); text-align: center; }
/* the line to the next step, from this mark's edge to the next mark's: the accent once this step is done */
.progress-step:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--step-mark) / 2 - var(--step-line) / 2); left: calc(50% + var(--step-mark) / 2 + 6px); right: calc(-50% + var(--step-mark) / 2 + 6px); height: var(--step-line); border-radius: 1px; background: var(--border); }
.progress-step.is-done:not(:last-child)::after { background: var(--accent); }
.progress-step-mark { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--step-mark); height: var(--step-mark); border: 1.5px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text-2); font-size: var(--fs-12); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.progress-step-mark .icon { width: 14px; height: 14px; stroke-width: 2.25; }
.progress-step.is-done .progress-step-mark { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.progress-step.is-current .progress-step-mark { border: 2px solid var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
/* pm/onboarding-ready: the step reached that was marked done, ticked: the tick in the done colour, and the line after it the plain one (the next step is pending) */
.progress-step.is-done.is-current .progress-step-mark { color: var(--on-accent); }
.progress-step.is-done.is-current:not(:last-child)::after { background: var(--border); }
.progress-step-label { font-size: var(--fs-13); font-weight: 600; line-height: 1.35; color: var(--text); overflow-wrap: break-word; hyphens: auto; }
.progress-step.is-todo .progress-step-label { font-weight: 500; color: var(--text-2); }
.progress-step-meta { font-size: var(--fs-12); line-height: 1.35; color: var(--text-3); overflow-wrap: break-word; font-variant-numeric: tabular-nums; }
.progress-step.is-current .progress-step-meta { font-weight: 600; color: var(--text-2); }
/* what the records suggest about a step not reached yet (a signed letter on file, documents in) */
.progress-step .progress-step-hint { font-weight: 600; color: var(--info); }
.progress-steps--compact { --step-mark: 22px; }
.progress-steps--compact .progress-step { gap: 4px; }
.progress-steps--compact .progress-step-mark { font-size: var(--fs-11); }
.progress-steps--compact .progress-step-mark .icon { width: 12px; height: 12px; }
.progress-steps--compact .progress-step.is-current .progress-step-mark { box-shadow: 0 0 0 3px var(--accent-soft); }
.progress-steps--compact .progress-step-label { font-size: var(--fs-12); }
/* one step a row: the mark on the left, its label and lines beside it, the line running down to the next mark */
@container steps (max-width: 799.98px) {
  .progress-steps:not(.progress-steps--compact) { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .progress-steps:not(.progress-steps--compact) > .progress-step { display: grid; grid-template-columns: var(--step-mark) minmax(0, 1fr); align-items: start; justify-items: start; gap: 2px var(--sp-3); padding: 0 0 var(--sp-4); text-align: left; }
  .progress-steps:not(.progress-steps--compact) > .progress-step:last-child { padding-bottom: 0; }
  .progress-steps:not(.progress-steps--compact) .progress-step-mark { grid-column: 1; grid-row: 1 / span 3; }
  .progress-steps:not(.progress-steps--compact) :is(.progress-step-label, .progress-step-meta) { grid-column: 2; }
  .progress-steps:not(.progress-steps--compact) .progress-step-label { padding-top: 4px; }
  .progress-steps:not(.progress-steps--compact) > .progress-step:not(:last-child)::after { top: calc(var(--step-mark) + 6px); bottom: 6px; left: calc(var(--step-mark) / 2 - var(--step-line) / 2); right: auto; width: var(--step-line); height: auto; }
}
@container steps (max-width: 439.98px) {
  .progress-steps--compact { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .progress-steps--compact > .progress-step { display: grid; grid-template-columns: var(--step-mark) minmax(0, 1fr); align-items: start; justify-items: start; gap: 0 var(--sp-3); padding: 0 0 var(--sp-3); text-align: left; }
  .progress-steps--compact > .progress-step:last-child { padding-bottom: 0; }
  .progress-steps--compact .progress-step-mark { grid-column: 1; grid-row: 1 / span 3; }
  .progress-steps--compact :is(.progress-step-label, .progress-step-meta) { grid-column: 2; }
  .progress-steps--compact .progress-step-label { padding-top: 3px; }
  .progress-steps--compact > .progress-step:not(:last-child)::after { top: calc(var(--step-mark) + 4px); bottom: 4px; left: calc(var(--step-mark) / 2 - var(--step-line) / 2); right: auto; width: var(--step-line); height: auto; }
}
/* the line under a bar: what comes next and its one link (the portal's What's next) */
.progress-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin: var(--sp-5) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--border); font-size: var(--fs-13); color: var(--text-2); }
.progress-next strong { color: var(--text); }
/* the Onboarding card's actions: Mark next step done (with its note) and its reverse, Undo last step, 44 px tall, and the
   line that says what each does; on a phone one under the other, the whole width */
.progress-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.progress-actions > form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2) var(--sp-3); min-width: 0; margin: 0; }
.progress-actions > form:first-child { flex: 1 1 420px; }
.progress-actions .field--inline { flex: 1 1 220px; }
.progress-actions .btn, .progress-actions .input { min-height: 44px; }
.progress-actions .btn { padding: 0 18px; }
.progress-actions > .help { flex: 1 1 100%; }
/* the record of the steps under them (a <details>, closed until asked) */
.progress-history { margin-top: var(--sp-4); }
.progress-history > .table-wrap { margin-top: var(--sp-3); }
/* the pipeline: a column's step name links to the step's own list */
.board-col-header h2 a { color: var(--text); text-decoration: none; }
.board-col-header h2 a:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 719.98px) {
  .progress-actions, .progress-actions > form { flex-direction: column; align-items: stretch; }
  .progress-actions > form, .progress-actions > form:first-child, .progress-actions .field--inline, .progress-actions > .help { flex: none; }
  .progress-actions .btn { width: 100%; }
  .progress-next { flex-direction: column; align-items: flex-start; }
  /* a row of many long tabs (the pipeline's steps) stays one row that scrolls sideways, reaching to the screen's edges */
  .tabs--scroll { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--sp-4)); padding: 0 var(--sp-4) 1px; overscroll-behavior-x: contain; scrollbar-width: none; }   /* 1px: the lit tab's underline stays inside the scroller */
  .tabs--scroll::-webkit-scrollbar { display: none; }
}
@media (pointer: coarse) {
  .board-col-header h2 a { display: inline-block; padding-block: 11px; margin-block: -11px; }
}

/* ==========================================================================================================
   pm/sheet: the Work sheet (/work/sheet, slice pm/sheet, Oct 20 2026). Its own block and its own sheet-* classes.
   The grid is NOT .table: the phone rule above (max-width 719.98px) that stacks .table rows into cards never matches
   .sheet-table, so on a phone the Sheet stays a real table that scrolls sideways with its first column pinned.
   .sheet-wrap scrolls both ways: the header row sticks to its top, the first column to its left.
   ========================================================================================================== */
.sheet-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-3); }
.sheet-seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-control); }
.sheet-seg-item { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--sp-3); border-radius: 4px; color: var(--text-2); font-size: var(--fs-13); font-weight: 600; text-decoration: none; white-space: nowrap; }
.sheet-seg-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.sheet-seg-item.is-active { background: var(--accent); color: var(--on-accent); }
.sheet-picker { position: relative; }
.sheet-picker > summary { list-style: none; cursor: pointer; }
.sheet-picker > summary::-webkit-details-marker { display: none; }
.sheet-picker-count { font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sheet-picker-form { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: 280px; max-width: calc(100vw - 32px); padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--elevation-1); }
.sheet-picker-list { display: grid; gap: 0; margin: 0 0 var(--sp-3); padding: 0; border: 0; min-width: 0; }
.sheet-picker-legend { padding: 0; margin-bottom: var(--sp-2); font-size: var(--fs-12); font-weight: 600; color: var(--text-2); }
.sheet-check { display: flex; align-items: center; gap: var(--sp-2); min-height: 30px; font-size: var(--fs-13); cursor: pointer; }
.sheet-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.sheet-picker-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sheet-range { margin: 0 0 var(--sp-2); color: var(--text-2); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }

.sheet-wrap {
  position: relative; max-width: 100%; max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); overscroll-behavior: contain;
}
.sheet-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* an always-visible thin scrollbar in the brand's colours (the shared sideways scroller's tokens, --scroll-thumb and
   --scroll-track): WebKit and Blink draw a classic bar from the pseudo-elements, which stays in view; Firefox (which has
   none of them) takes the standard properties. Blink ignores the pseudo-elements when the standard properties are set on
   the same element, so the standard pair is kept for the browsers without them. */
.sheet-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.sheet-wrap::-webkit-scrollbar-track { background: var(--scroll-track); }
.sheet-wrap::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 2px solid var(--scroll-track); border-radius: 999px; }
.sheet-wrap::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.sheet-wrap::-webkit-scrollbar-corner { background: var(--scroll-track); }
@supports not selector(::-webkit-scrollbar) {
  .sheet-wrap { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
}

.sheet-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-13); line-height: 20px; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.sheet-table th, .sheet-table td { height: 32px; padding: 5px var(--sp-3); text-align: left; vertical-align: middle; white-space: nowrap; border-bottom: 1px solid var(--border); background: var(--surface); }
.sheet-table thead th { position: sticky; top: 0; z-index: 3; height: 34px; background: var(--surface-2); color: var(--text-2); font-size: var(--fs-12); font-weight: 600; }
.sheet-table .sheet-first { position: sticky; left: 0; z-index: 2; box-shadow: inset -1px 0 0 var(--border); font-weight: 600; }
.sheet-table thead .sheet-first { z-index: 4; }
.sheet-table th:last-child, .sheet-table td:last-child { padding-right: var(--sp-8); }   /* the last column clears the edge */
.sheet-table .sheet-num { text-align: right; }
.sheet-table tbody tr:hover > td, .sheet-table tbody tr:hover > .sheet-first { background: color-mix(in srgb, var(--gold-soft) 55%, var(--surface)); }
.sheet-table .pill { height: 20px; }
.sheet-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.sheet-sort:hover { color: var(--text); text-decoration: underline; }
.sheet-table th[aria-sort] { color: var(--text); }
.sheet-arrow { color: var(--accent); font-size: var(--fs-11); line-height: 1; }
.sheet-link { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; color: var(--text); font-weight: 600; text-decoration: none; }
.sheet-link:hover { color: var(--accent); text-decoration: underline; }
.sheet-trunc { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.sheet-group > th { height: 30px; background: var(--gold-soft); color: var(--text); font-size: var(--fs-12); font-weight: 700; border-bottom: 1px solid var(--border); }
.sheet-group-label { position: sticky; left: var(--sp-3); display: inline-flex; align-items: center; gap: var(--sp-2); }
.sheet-group-count { padding: 0 6px; border-radius: 999px; background: var(--surface); color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.sheet--comfortable .sheet-table th, .sheet--comfortable .sheet-table td { height: 44px; padding: 10px var(--sp-3); }
.sheet--comfortable .sheet-table .pill { height: 22px; }

@media (max-width: 719.98px) {
  .sheet-wrap { max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); border-radius: var(--r-control); }
  .sheet-table .sheet-link { max-width: 42vw; }   /* the pinned column leaves room to see the others beside it */
  .sheet-picker-form { width: calc(100vw - 32px); }
  .sheet-arrow { font-size: var(--fs-12); }   /* no text under 12 px on a phone (pm/ux-pass-1, U10) */
}
@media print {
  .sheet-wrap { max-height: none; overflow: visible; }
  .sheet-bar { display: none; }
}

/* ==========================================================================================================
   pm/organizer: the tax organizer (slice pm/organizer, Oct 24 2026): the client's one-question pages and the staff's
   review. Its own block; every other part of those pages is the design system's own (cards, fields, the meter, tables,
   pills, banners, the rail lists).
   ========================================================================================================== */
/* a question's answers as radios (ui.mjs choiceList): one a row, the whole row tappable and big enough for a thumb, the
   chosen row marked; the legend is the page's title (visually hidden) or a field's label */
fieldset.choice-list { gap: var(--sp-1); padding: var(--sp-2); }
fieldset.choice-list > legend.visually-hidden { padding: 0; margin: 0; }
fieldset.choice-list > label { min-height: 44px; padding: 0 var(--sp-3); border-radius: var(--r-control); font-size: var(--fs-17); }
fieldset.choice-list > label:hover { background: var(--surface-2); }
fieldset.choice-list > label:has(> input:checked) { background: var(--accent-soft); font-weight: 600; }
fieldset.choice-list input[type="radio"] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
fieldset.choice-list input[type="radio"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- the return package and Form 8879 signing (pm/esign) ---------- */
/* the identity questions: one radio choice a row, inside fieldset.field like the other groups of choices */
fieldset.field input[type="radio"] { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
/* the optional drawn mark (pm/public/esign.js; hidden with script off: the typed name is the signature) */
.sigpad { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-4); }
.sigpad[hidden] { display: none; }
.sigpad-canvas { display: block; width: 100%; max-width: 480px; aspect-ratio: 3 / 1; height: auto; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-control); touch-action: none; cursor: crosshair; }
.sigpad-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) {
  fieldset.field input[type="radio"] { width: 20px; height: 20px; }
}

/* ==========================================================================================================
   pm/portal-passkeys-google (Oct 24 2026): the client sign-in page's ways in, one under the other: the passkey (shown by
   webauthn.js where the browser can), the emailed code, Google's own button. Room between them; nothing else changes.
   ========================================================================================================== */
.auth > [data-passkey]:not([hidden]) + .auth-form { margin-top: var(--sp-6); }
.auth > .form-actions:has(> .gsi-btn) { margin-top: var(--sp-4); }
/* Account's Passkeys card: the list (or its empty line), then Add a passkey on this device */
.card-body > :is(.line-list, .help) + [data-passkey] { margin-top: var(--sp-4); }

/* ==========================================================================================================
   pm/organizer-print: the printable packet of the adaptive questionnaire (slice pm/organizer-print-v2, S4;
   pages-organizer-packet.mjs). On screen each .packet-page is a card-like sheet; printed, each is one sheet of paper
   (break-after: page), the screener in large type. Tokens on screen; plain black on white in print.
   ========================================================================================================== */
.packet { display: flex; flex-direction: column; gap: var(--sp-6); }
.packet-page { padding: var(--sp-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.packet-page--large { font-size: var(--fs-17); }
.packet-cover { display: flex; flex-direction: column; gap: var(--sp-3); }
.packet-firm { margin: 0; font-size: var(--fs-13); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); }
.packet-title { margin: 0; font-size: var(--fs-30); }
.packet-client { margin: 0; font-size: var(--fs-20); font-weight: 600; }
.packet-lead { margin: var(--sp-4) 0 0; font-size: var(--fs-20); line-height: 1.5; max-width: 40em; }
.packet-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-4); margin: var(--sp-4) 0 0; }
.packet-facts dt { color: var(--text-2); }
.packet-facts dd { margin: 0; font-weight: 600; }
.packet-heading { margin: 0 0 var(--sp-3); font-size: var(--fs-24); }
.packet-group { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-17); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-2); }
.packet-help, .packet-note { margin: 0 0 var(--sp-3); color: var(--text-2); }
.packet-note { margin-top: var(--sp-4); font-style: italic; }
.packet-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.packet-item { display: flex; flex-direction: column; gap: var(--sp-1); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border); break-inside: avoid; }
.packet-item--required .packet-statement { font-weight: 600; }
.packet-item--follow { padding-left: var(--sp-5); }
.packet-statement { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
.packet-q { margin: 0; }
.packet-if { font-weight: 600; }
.packet-still { font-size: var(--fs-13); font-weight: 600; color: var(--text-2); }
.packet-answer, .packet-yesno { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.packet-option { display: inline-flex; align-items: baseline; gap: var(--sp-1); }
.packet-box { font-size: 1.25em; line-height: 1; }
.packet-box--on { font-weight: 700; }
.packet-tell { display: flex; flex-direction: column; gap: var(--sp-1); }
.packet-tell-label, .packet-field-label { font-size: var(--fs-13); color: var(--text-2); }
.packet-lines { display: flex; flex-direction: column; gap: var(--sp-4); padding-top: var(--sp-3); }
.packet-line { display: block; flex: 1; min-width: 6em; border-bottom: 1px solid var(--text-2); height: 1.2em; }
.packet-line--short { flex: none; width: 10em; }
.packet-blank, .packet-field { display: inline-flex; align-items: baseline; gap: var(--sp-1); flex-wrap: wrap; }
.packet-rows { display: flex; flex-direction: column; gap: var(--sp-3); }
.packet-row { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.packet-row-name { flex-basis: 100%; margin: 0; font-weight: 600; }
.packet-doc { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border); }
.packet-doc-label { flex: 1; min-width: 12em; }
.packet-gone { font-size: var(--fs-13); color: var(--text-2); }
.packet-doc--blank .packet-line { min-width: 12em; }
.packet--left .packet-cover { border-style: dashed; }
.packet-attest { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 2px solid var(--text-2); break-inside: avoid; }
.packet-attest p { margin: 0 0 var(--sp-5); font-weight: 600; }
.packet-sign { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.packet-sign-field { display: flex; align-items: baseline; gap: var(--sp-2); flex: 1; min-width: 12em; }
@media print {
  .page-header:has(~ .packet) { display: none; }
  .packet { display: block; }
  .packet-page { border: 0; border-radius: 0; padding: 0; background: #fff; color: #000; break-after: page; page-break-after: always; }
  .packet-page:last-child { break-after: auto; page-break-after: auto; }
  .packet-page--large { font-size: 14pt; }
  .packet-page--large .packet-heading { font-size: 20pt; }
  .packet-line { border-bottom-color: #000; }
  .packet-still, .packet-help, .packet-note, .packet-gone, .packet-tell-label, .packet-field-label, .packet-firm, .packet-group, .packet-facts dt { color: #333; }
}

/* ==========================================================================================================
   pm/organizer-portal-v2: the adaptive organizer's one page (slice S3, Oct 25 2026; pages-organizer-adaptive.mjs): the
   screener lines, a checked line opened in place, the "tell us briefly" box, the larger-text choice, print what's left.
   ========================================================================================================== */
.screener-list { list-style: none; margin: 0; padding: 0; }
.screener-line { padding: var(--sp-3) 0; border-top: 1px solid var(--border); scroll-margin-top: 72px; }
.screener-line:first-child { border-top: 0; padding-top: 0; }

.screener-statement { margin: 0; font-size: var(--fs-15); line-height: 1.5; }
.screener-check { align-items: flex-start; min-height: 32px; }
.screener-check > input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); }
.screener-source { margin: var(--sp-1) 0 0; }
.screener-value { font-weight: 600; }
.check--quiet { margin-top: var(--sp-1); font-size: var(--fs-13); color: var(--text-2); }
.check--quiet > input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
/* organizer-polish: one layout rule for every line: the statement, then "Not sure, ask me" on its own row (a short
   statement let the two inline-flex labels share a row at desktop width, line 5 in the Oct 25 walk) */
.screener-check, .check--quiet { display: flex; width: fit-content; max-width: 100%; }
.screener-progress { margin: 0 0 var(--sp-3); font-size: var(--fs-13); font-weight: 600; color: var(--text-2); }
.card-eyebrow { margin: 0 0 var(--sp-1); font-size: var(--fs-12); font-weight: 600; color: var(--text-2); }
fieldset.choice-list--row { display: flex; flex-wrap: wrap; flex-direction: row; gap: var(--sp-2); padding: var(--sp-1) 0 0; border: 0; }
fieldset.choice-list--row > label { min-height: 40px; border: 1px solid var(--border); font-size: var(--fs-15); }
.screener-open { margin: var(--sp-3) 0 0 var(--sp-6); padding-left: var(--sp-4); border-left: 2px solid var(--gold); display: grid; gap: var(--sp-3); }
.screener-q { scroll-margin-top: 72px; }
.screener-q-text { margin: 0; font-weight: 500; }
.screener-q-actions { margin: var(--sp-1) 0 0; }
.screener-rows { margin: var(--sp-1) 0 0; padding-left: var(--sp-5); }
textarea.note-box { min-height: 36px; height: 36px; resize: vertical; field-sizing: content; max-height: 10lh; }
textarea.note-box:focus, textarea.note-box:not(:placeholder-shown) { height: auto; }
.screener-save { align-items: center; }
.autosave-state { margin: 0; }
.attestation { font-weight: 600; margin: 0 0 var(--sp-3); }
.sign-date { margin: 0; color: var(--text-2); }
.jump-list { margin: var(--sp-1) 0 0; padding-left: var(--sp-5); }
.print-now { display: none; }
html.js .print-now { display: inline-flex; }
/* the client's Print what's left is the packet's page (block pm/organizer-print above); print drops the header's buttons */
@media print {
  .page-header .btn { display: none !important; }
}
/* larger text: every size token one step up (the client's choice, cookie pm_large) */
html.type-large { --fs-11: 14px; --fs-12: 15px; --fs-13: 17px; --fs-15: 19px; --fs-17: 21px; --fs-20: 24px; --fs-24: 28px; --fs-30: 34px; }