/* ============================================================================
   The Risk Lab — "Pulse" design system
   Source of truth: docs/design/pulse/CRM Design System.dc.html (+ CRM Dashboard.dc.html)
   Served at /theme.css (app.py) and linked by EVERY page in web/ (index, landing,
   signup, hub, engage, client). Page files only add page-specific selectors on top
   of these primitives — never re-declare a primitive with different values.

   Palette:  soft neutrals · black (ink) anchors · one electric lime accent.
   Shape:    fully-rounded pills only; 28px cards; 12px data tags; flat (no shadows,
             no card borders — colour separation on the canvas does the work).
   Type:     Inter 300/400/500/600. Data numerals 44–56px medium, -4% tracking.
   ========================================================================== */

:root{
  /* --- palette (design system §01) --- */
  --canvas:#E8E8E6;        /* app background */
  --surface:#F4F4F2;       /* nested tiles, chart bars, secondary buttons on white */
  --card:#FFFFFF;          /* cards, pills, inputs */
  --ink:#111111;           /* primary actions, dark cards, text */
  --lime:#C7F33C;          /* highlights, THE key data point / action per view */
  --lime-pale:#E9F9B0;     /* secondary highlights, "advancing" chips */
  --lime-hover:#B9E62E;

  /* --- text --- */
  --text:#111111;
  --text-2:#5A5A56;        /* secondary text (table cells, hover links) */
  --muted:#6E6E6A;         /* muted body, crumbs, inactive segments — AA on white/surface */
  --muted-2:#9A9A96;       /* captions, table headers, placeholders */
  --muted-3:#B8B8B4;       /* on-ink captions */
  --on-ink-muted:#8A8A86;  /* caption on an ink card */
  --on-lime:#5C7311;       /* caption on a lime card */
  --on-lime-2:#7A9022;     /* sub-line on a lime card */
  --on-lime-pale:#8A9E4E;  /* caption on pale lime */

  /* --- lines & hovers --- */
  --line:#E4E4E1;          /* input borders, outlined pills */
  --line-soft:#EEEEEC;     /* table header rule */
  --line-row:#F4F4F2;      /* table row dividers */
  --line-canvas:#DBDBD8;   /* hairline on canvas-coloured tiles */
  --line-check:#D5D5D2;    /* unchecked checkbox ring */
  --hover:#F4F4F2;         /* white → hover */
  --hover-2:#ECECEA;       /* surface → hover */
  --row-hover:#FAFAF8;     /* table row hover */
  --ink-hover:#2A2A28;

  /* --- charts --- */
  --hatch:#C4C4C1;         /* hatched-area stroke */
  --chart-line:#BDBDBA;
  --chart-dot:#9A9A96;
  --chart-guide:#ABABA8;

  /* --- avatar tonal fills (design system §04) --- */
  --av-1:#D8D3C8; --av-2:#C9CFD8; --av-3:#D2D8C9; --av-4:#B8B4AC;

  /* --- semantic (deliberately restrained so lime stays the hero) --- */
  --bad:#B4412E;  --bad-bg:#F6E7E3;  --bad-line:#EAC9C1;
  --warn:#8A6116; --warn-bg:#FBF1DC; --warn-line:#EEDDB4;
  /* UI-UX-RULES §8: status green must read as "done" and stay clearly distinct from the
     amber warn token — the old olive-on-lime (#5C7311/#E9F9B0) sat too close to amber.
     Brand lime stays in --lime*; --ok is status-only. */
  --ok:#1F7A3E;   --ok-bg:#E3F4E8;   --ok-line:#BFE3CA;
  /* UI-UX-RULES §3: one scrim for every overlay — ~70% dim plus blur. */
  --scrim:rgba(17,17,17,.7); --scrim-blur:blur(6px);
  --info:#41566B; --info-bg:#E8EDF2; --info-line:#D3DCE6;

  /* --- shape --- */
  --r-card:28px; --r-tile:24px; --r-inner:16px; --r-input:12px; --r-tag:12px; --r-pill:999px;
  --shadow-float:0 18px 50px rgba(17,17,17,.14);   /* modals/drawers only */

  /* --- type --- */
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--canvas);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,h5{font-weight:500;letter-spacing:-.02em;margin:0;line-height:1.2}
p{margin:0 0 .6em}
a{color:var(--ink);cursor:pointer;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--text-2)}
a.plain{text-decoration:none;color:inherit}
strong,b{font-weight:600}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
::placeholder{color:var(--muted-2)}
::selection{background:var(--lime);color:var(--ink)}
hr,.divider{border:0;height:1px;background:var(--line-soft);margin:16px 0}

/* ---------- type scale (design system §02) ---------- */
.t-hero{font-size:56px;font-weight:500;letter-spacing:-.04em;line-height:1}
.t-heading{font-size:34px;font-weight:500;letter-spacing:-.03em;line-height:1.1}
.t-title{font-size:22px;font-weight:500;letter-spacing:-.02em}
.t-card{font-size:16px;font-weight:500;letter-spacing:-.01em}
.t-body{font-size:15px}
.t-caption{font-size:12.5px;color:var(--muted-2)}
.t-eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.data-xl{font-size:52px;font-weight:500;letter-spacing:-.04em;line-height:1}
.data-lg{font-size:44px;font-weight:500;letter-spacing:-.04em;line-height:1.1}
.data-md{font-size:34px;font-weight:500;letter-spacing:-.03em;line-height:1}
.data-sm{font-size:26px;font-weight:500;letter-spacing:-.03em;line-height:1}
.muted{color:var(--muted)}
.muted2{color:var(--muted-2)}
.small{font-size:12.5px}

/* ---------- logo mark (beaker glyph, lime liquid fill) ---------- */
.mark{width:44px;height:44px;border-radius:14px;background:var(--ink);display:grid;place-items:center;flex:0 0 auto}
.mark.sm{width:34px;height:34px;border-radius:11px}
.mark .mark-ico{display:block;width:36px;height:36px}
.mark.sm .mark-ico{width:28px;height:28px}
.wordmark{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink);text-decoration:none}

/* ---------- app shell: fixed full-height left navigation ----------
   Main content reserves the rail width. Navigation scrolls independently on short
   screens; mobile uses the off-canvas menu below. */
.appshell{display:flex;gap:20px;align-items:flex-start;margin:0 0 0 292px;padding:16px 24px 72px}
.appshell>main{flex:1;min-width:0;max-width:1228px;margin:0 auto}
.sidebar{width:292px;background:var(--card);border-radius:0;border-right:1px solid var(--line-soft);padding:30px 16px 16px;
  display:flex;flex-direction:column;gap:2px;position:fixed;top:0;left:0;bottom:0;z-index:20;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.sidebar>*{flex-shrink:0}
/* viewport-fit=cover (index.html): a landscape phone with a notch keeps the rail and the content clear of it.
   env() is 0 on every other screen, and the phone tier below re-sets both paddings. */
.sidebar{padding-left:calc(16px + env(safe-area-inset-left,0px))}
.appshell{padding-right:calc(24px + env(safe-area-inset-right,0px))}
.sidebar:hover{scrollbar-width:thin}
.sidebar::-webkit-scrollbar{width:0}
.sidebar:hover::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.sidebar .sb-brand{display:flex;align-items:center;gap:12px;padding:6px 10px 10px;text-decoration:none;color:var(--ink)}
.sidebar .sb-eyebrow{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);padding:8px 16px 10px}
#tabnav .sb-eyebrow:first-child{padding-top:6px}
.sidebar .sb-item{appearance:none;border:0;background:transparent;width:100%;display:flex;align-items:center;gap:14px;
  padding:12px 16px;border-radius:var(--r-pill);font:inherit;font-size:15px;font-weight:500;color:var(--ink);cursor:pointer;
  text-align:left;text-decoration:none;line-height:1.2;position:relative;transition:background .12s}
.sidebar .sb-item:hover{background:var(--hover)}
.sidebar .sb-item.on{background:var(--ink);color:#FFFFFF}
/* Round 2 Wave 3a: chevron marker (not a checkbox-like box) — CSS-only, no markup change */
.sidebar .sb-item .sb-ico{width:auto;height:auto;border:0;border-radius:0;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1;
  color:var(--muted-2);font-weight:500}
.sidebar .sb-item .sb-ico::before{content:"\203A"}
.sidebar .sb-item.on .sb-ico{color:var(--lime);font-weight:700}
.sidebar .sb-item .sb-svg{width:16px;height:16px;flex:0 0 auto;display:inline-block;margin-left:-2px;margin-right:-2px}
.sidebar .sb-item .sb-svg svg{display:block;width:16px;height:16px}
.sidebar .sb-item .sb-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar .sb-item .sb-chev{color:var(--muted-2);font-size:13px;line-height:1;flex:0 0 auto;transition:transform .15s}
.sidebar .sb-item.open .sb-chev{transform:rotate(90deg)}
.sidebar .sb-item.on .sb-chev{color:var(--muted-3)}
.sidebar .sb-item .count{margin-left:0;font-size:12px;line-height:20px;padding:0 9px}
.sidebar .sb-item .sb-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);flex:0 0 auto}
.sidebar .sb-sub{display:flex;flex-direction:column;gap:2px;margin:2px 0 6px 21px;padding-left:18px;border-left:1px solid var(--line-soft)}
.sidebar .sb-sub .sb-item{padding:9px 16px;font-size:14px;color:var(--muted)}
.sidebar .sb-sub .sb-item:hover{color:var(--ink)}
.sidebar .sb-sub .sb-item.on{background:var(--surface);color:var(--ink)}
.sidebar .sb-sub.hide{display:none}
@media(max-width:1099.98px){
  .appshell{padding:16px calc(16px + env(safe-area-inset-right,0px)) 60px 16px}
  /* Keep the rail fixed on tablets; tighten the topbar at narrower widths. */
  .topbar{gap:10px}
  .tb-btn{padding:0 14px}
  .tb-user{padding:4px 12px 4px 4px}
  .tb-user .tb-uname{max-width:120px}
}

/* ---------- UX-M-1 (Phase 1 W3): off-canvas sidebar below 760px ----------
   Below the breakpoint the rail slides over content from the topbar menu button.
   z-index sits UNDER .drawer-overlay (60) and .modal-overlay (90) so a drawer or modal
   opened from a nav destination still covers it. */
.sb-toggle{display:none}
.sb-overlay{display:none}
@media(max-width:760px){
  .appshell{margin-left:0}
  .sb-toggle{appearance:none;border:0;background:var(--card);color:var(--ink);border-radius:var(--r-pill);
    height:38px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:13.5px;
    font-weight:500;cursor:pointer;white-space:nowrap;flex:0 0 auto}
  .sb-toggle:hover{background:var(--hover)}
  .sb-toggle .sb-toggle-ico{font-size:15px;line-height:1}
  /* visibility (not just the transform) is what takes the closed drawer out of the tab
     order and off the accessibility tree — translated-off content stays focusable and
     screen-reader reachable, so a phone user could tab into ~15 invisible nav rows. It is
     delayed by the slide duration on the way OUT so the animation still plays, and applies
     instantly on the way IN (the open rule doesn't transition it). */
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:82vw;max-width:300px;z-index:56;
    border-radius:0 var(--r-card) var(--r-card) 0;max-height:100vh;padding:16px 12px;
    transform:translateX(-102%);visibility:hidden;
    transition:transform .22s ease, visibility 0s .22s}
  body.sb-open .sidebar{transform:translateX(0);visibility:visible;
    transition:transform .22s ease;box-shadow:0 0 44px rgba(17,17,17,.22)}
  .sb-overlay{display:block;position:fixed;inset:0;background:rgba(17,17,17,.42);z-index:55;
    opacity:0;pointer-events:none;transition:opacity .22s ease}
  body.sb-open .sb-overlay{opacity:1;pointer-events:auto}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
  .sidebar,.sb-overlay{transition:none}
}

/* ---------- Mobile pass — app shell (ux3-m-shell) ----------
   Phone tier = the shell's existing 760px breakpoint. Everything here is scoped to it, so the
   desktop layout is untouched. Definition of done (docs: mobile brief): no horizontal page scroll,
   >=44px targets, a sticky topbar that never wraps, a drawer that locks body scroll, popovers that
   fit the viewport, floating things (recorder, 2FA nudge, toast) that never cover primary buttons. */
/* --topbar-h: height of the sticky phone topbar. Anything else that sticks to the top of the viewport on a phone
   (save bars, table headers, bulk bars) offsets itself by this so it never slides under the topbar. 0 above 760px. */
:root{--topbar-h:0px;--ribbon-h:0px}
:root:has([id$="staging-ribbon"]){--ribbon-h:18px}     /* the staging ribbon is a fixed 18px strip (liferisk_mcp/staging.py); matched by suffix because tests/test_staging.py keeps its literal id out of theme.css */
@media(max-width:760px){
  :root{--topbar-h:calc(60px + var(--ribbon-h))}
  .appshell{padding:calc(12px + var(--ribbon-h)) 12px calc(72px + env(safe-area-inset-bottom))}
  /* topbar: one row, sticky, canvas-coloured so content scrolls under it cleanly. The negative margin
     cancels the .appshell padding so the bar is full-bleed. */
  .topbar{position:sticky;top:var(--ribbon-h);z-index:30;height:auto;min-height:60px;margin:-12px -12px 10px;
    padding:8px 12px;background:var(--canvas);flex-wrap:nowrap;gap:8px}
  .topbar .tb-left{min-width:0;overflow:hidden}
  .topbar .tb-right{flex:0 0 auto;min-width:0}
  .sb-toggle{height:44px;min-width:44px;padding:0 18px;font-size:14px}
  .sb-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  /* the drawer: dynamic viewport height so the browser chrome / keyboard never clips the last nav rows;
     body scroll is locked while it is open; every row is a >=44px target with 8px between neighbours */
  .sidebar{top:var(--ribbon-h);max-height:calc(100dvh - var(--ribbon-h));height:calc(100dvh - var(--ribbon-h));padding:calc(12px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom))}
  body.sb-open{overflow:hidden}
  .sidebar .sb-item{min-height:44px}
  .sidebar .sb-sub .sb-item{padding:11px 16px;min-height:44px}
  .sidebar .sb-brand{min-height:48px}
  .sidebar .sb-eyebrow{padding-top:14px}
  /* popovers hanging off the topbar (profile + the global +) become fixed panels that always fit */
  #userDrop,#addMenu{position:fixed;top:calc(var(--topbar-h) + 4px + env(safe-area-inset-top));right:12px;left:12px;width:auto;
    min-width:0;max-height:calc(100dvh - var(--topbar-h) - 16px - env(safe-area-inset-top))}
  #userDrop .ud-item,#addMenu .ud-item{min-height:44px;font-size:15px}
  #userDrop .linkbtn{min-height:44px;display:inline-flex;align-items:center}
  /* banners: text first, actions on their own row, every control a real target */
  body .trial-banner{border-radius:var(--r-inner);flex-direction:column;align-items:stretch;text-align:center;gap:10px;padding:12px 14px}
  body .trial-banner .tb-actions{flex-wrap:wrap;justify-content:center;gap:8px}
  body .trial-banner .tb-upgrade,body .trial-banner .tb-manage{min-height:44px;padding:0 18px}
  body .trial-banner .tb-close{min-width:44px;min-height:44px;font-size:20px}
  /* the 2FA nudge sits in the page flow (see place in the two-step script), full width */
  main>#tfGrace{position:static;max-width:none;margin:0 0 14px;box-shadow:none;z-index:auto}
  #tfGrace .tf-row{display:flex;gap:8px;flex-wrap:wrap}
  #tfGrace .btn{min-height:44px;flex:1 1 120px}
  /* toast: top of the screen so it never sits on a bottom sheet / footer / recorder. It carries
     inline position styles, hence !important. */
  #wsToast{top:calc(8px + var(--ribbon-h) + env(safe-area-inset-top))!important;bottom:auto!important;left:12px!important;right:12px!important;
    transform:none!important;text-align:center;border-radius:14px!important;padding:12px 16px!important;max-width:none!important}
  /* anything else that sticks to the top of the viewport clears the sticky topbar (the list bulk bar is defined later in
     index.html at the same specificity, hence the body prefix) */
  body .bulkbar{top:calc(var(--topbar-h) + 8px)}
  /* meeting recorder: a bottom sheet, not a floating card that covers a corner */
  body #recorder{left:0;right:0;bottom:0;width:auto;max-width:none;border-radius:var(--r-card) var(--r-card) 0 0;
    max-height:min(88dvh,640px);padding:18px 16px calc(16px + env(safe-area-inset-bottom));z-index:75}
  #recorder .btn.minibtn{min-height:44px;padding:0 18px;flex:1 1 auto}
  #recorder input,#recorder select{font-size:16px;min-height:44px}
  #recorder .modal-x{width:44px;height:44px}
}
/* landscape phone (short + coarse pointer): the 2FA nudge sits in the page flow too (placeGrace moves it into <main>) */
@media(max-height:500px) and (pointer:coarse){
  main>#tfGrace{position:static;max-width:none;margin:0 0 14px;box-shadow:none;z-index:auto}
  #tfGrace .tf-row{display:flex;gap:8px;flex-wrap:wrap}
  #tfGrace .btn{min-height:44px;flex:1 1 120px}
}

/* ---------- topbar: Team (admin) / Settings / user chip, above every page (§3.1) ---------- */
.topbar{height:44px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.topbar .tb-left{flex:1;min-width:0}
.topbar .tb-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.tb-btn{appearance:none;border:0;background:var(--card);color:var(--ink);border-radius:var(--r-pill);
  height:44px;padding:0 20px;display:inline-flex;align-items:center;gap:9px;font:inherit;font-size:13.5px;
  font-weight:500;cursor:pointer;white-space:nowrap}
.tb-btn:hover{background:var(--hover)}
.tb-btn.on{background:var(--ink);color:#FFFFFF}
.tb-btn svg{width:16px;height:16px;flex:0 0 auto;display:block}
.tb-btn.hide{display:none}
.tb-user{appearance:none;border:0;background:var(--card);border-radius:var(--r-pill);height:44px;
  padding:4px 16px 4px 4px;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font:inherit}
.tb-user:hover{background:var(--hover)}
/* Wave 4: subtle highlight while the Settings view is open — Team/Settings no longer have
   their own topbar buttons to carry that state, so the chip picks it up instead. */
.tb-user.on{background:var(--hover-2)}
.tb-user .tb-uname{font-size:13.5px;font-weight:500;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-user .sb-chev{color:var(--muted-2);font-size:11px;line-height:1}
/* the user dropdown now hangs off the topbar chip, anchored below it (not the old sidebar float) */
.usermenu{position:relative}
/* Dropdown menus (#userDrop, #clientMenu) are position:absolute, anchored below their
   trigger — not viewport-centred like .modal/.drawer, so they can't lean on a vh-based
   max-height alone. The base max-height/overflow below is the fallback; fitDropdown() in
   index.html sets an inline max-height at open time, capped to the real space between the
   trigger and the viewport bottom, so a long menu (or a short window) scrolls internally
   instead of running off-screen with no way back (Round 2 §3.1 follow-up). */
.userdrop{position:absolute;top:calc(100% + 8px);right:0;left:auto;z-index:60;background:var(--card);border-radius:20px;
  box-shadow:var(--shadow-float);min-width:256px;padding:10px;max-height:calc(100vh - 24px);overflow-y:auto}
.userdrop.hide{display:none}
/* group label + divider inside a dropdown (the + menu's "This workflow" group) */
.ud-group{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);padding:8px 14px 4px}
.ud-sep{height:1px;background:var(--line-soft);margin:6px 8px}
/* org/seats tile (Round 2 §3.1 follow-up) — moved out of the sidebar's old .sb-foot into
   the user dropdown, directly under the identity block. Same look as the sidebar tile it
   replaced (surface bg, 24px radius, lime progress), sized down for the narrower dropdown. */
.ud-tile{background:var(--surface);border-radius:var(--r-tile);padding:14px 14px 12px;margin:0 2px 8px}
.ud-tile.hide{display:none}
.ud-tile .t{font-size:13.5px;font-weight:500;line-height:1.3}
.ud-tile .progress{background:var(--card);height:6px;margin-top:10px}
.ud-tile .progress>div{background:var(--lime)}
.ud-tile .c{font-size:12.5px;color:var(--muted);margin-top:8px}
.ud-tile .c a{color:var(--ink);font-weight:500}

/* ---------- pill navigation (design system §03 Navigation) ---------- */
.pnav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pnav>a,.pnav>button{appearance:none;border:0;background:var(--card);color:var(--ink);border-radius:var(--r-pill);
  padding:14px 24px;font:inherit;font-size:14px;font-weight:500;line-height:1.2;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;position:relative}
.pnav>a:hover,.pnav>button:hover{background:var(--hover);color:var(--ink)}
.pnav>a.on,.pnav>button.on{background:var(--ink);color:#FFFFFF}
.pnav>a.on::before,.pnav>button.on::before{content:"";display:inline-block;width:12px;height:12px;
  border:1.5px solid var(--lime);border-radius:3px;flex:0 0 auto}
.pnav.on-surface>a,.pnav.on-surface>button{background:var(--surface)}
.pnav.on-surface>a:hover,.pnav.on-surface>button:hover{background:var(--hover-2)}
.pnav.on-surface>a.on,.pnav.on-surface>button.on{background:var(--ink)}
.pnav.compact>a,.pnav.compact>button{padding:10px 18px;font-size:13.5px}

/* ---------- buttons (design system §03 Actions) — pills only ---------- */
.btn{appearance:none;border:0;border-radius:var(--r-pill);padding:12px 22px;font:inherit;font-size:14px;font-weight:500;
  line-height:1.2;cursor:pointer;background:var(--card);color:var(--ink);display:inline-flex;align-items:center;
  justify-content:center;gap:8px;white-space:nowrap;text-decoration:none;transition:background .12s,color .12s}
.btn:hover{background:var(--hover);color:var(--ink)}
.btn.primary{background:var(--ink);color:#FFFFFF}
.btn.primary:hover{background:var(--ink-hover);color:#FFFFFF}
.btn.ghost{background:var(--surface);color:var(--ink)}          /* secondary on a white card */
.btn.ghost:hover{background:var(--hover-2)}
.btn.white{background:var(--card)}                              /* secondary on the canvas */
.btn.lime{background:var(--lime);color:var(--ink)}              /* the ONE most valuable action */
.btn.lime:hover{background:var(--lime-hover)}
.btn.outline{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.outline:hover{background:var(--hover)}
.btn.danger{background:var(--bad-bg);color:var(--bad)}
.btn.danger:hover{background:#F0D9D3}
.btn.link{background:transparent;padding:0;border-radius:0;text-decoration:underline;text-underline-offset:2px}
.btn.sm,.minibtn{padding:8px 16px;font-size:12.5px}
.btn.xs{padding:6px 12px;font-size:12px}
.btn.lg{padding:15px 26px;font-size:14px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn.icon,.icobtn{width:42px;height:42px;padding:0;border-radius:50%;flex:0 0 auto;font-size:14px}
.icobtn{appearance:none;border:0;background:var(--surface);color:var(--ink);display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer;line-height:1}
.icobtn:hover{background:var(--hover-2)}
.icobtn.white{background:var(--card)} .icobtn.white:hover{background:var(--hover)}
.icobtn.ink{background:var(--ink);color:#FFFFFF} .icobtn.ink:hover{background:var(--ink-hover)}
.icobtn.lime{background:var(--lime)} .icobtn.lime:hover{background:var(--lime-hover)}
.icobtn.sm{width:32px;height:32px;font-size:12.5px}
.icobtn.xs{width:26px;height:26px;font-size:11.5px}
.icobtn.danger{color:var(--bad)} .icobtn.danger:hover{background:var(--bad-bg)}
.icobtn:disabled{opacity:.45;cursor:default}
.icobtn svg{display:block}

/* ---------- pills / status chips (design system §04 Status & data tags) ---------- */
.pill{display:inline-block;border-radius:var(--r-pill);padding:6px 12px;font-size:12px;font-weight:500;line-height:1.2;
  background:var(--surface);color:var(--text-2);white-space:nowrap;vertical-align:middle}
.pill.ink{background:var(--ink);color:#FFFFFF}
.pill.lime{background:var(--lime-pale);color:var(--ink)}
.pill.lime-solid{background:var(--lime);color:var(--ink)}
.pill.outline{background:var(--card);border:1px solid var(--line);color:var(--muted)}
.pill.outline-ink{background:var(--card);border:1px solid var(--line);color:var(--ink)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.info{background:var(--info-bg);color:var(--info)}
.pill.sm{padding:3px 9px;font-size:11px}
.pill.xs{padding:2px 7px;font-size:10.5px}
/* a11y: a .tag/.pill used as a real <button> (not a span) resets native button chrome only —
   the pill/tag rules above still own background/color/padding/radius */
button.tag,button.pill{appearance:none;border:0;font:inherit;cursor:pointer}
/* data tags: rounded-square lime call-outs for chart values / deltas */
.tag{display:inline-block;background:var(--lime);color:var(--ink);border-radius:var(--r-tag);padding:6px 12px;
  font-size:12.5px;font-weight:500;line-height:1.2;white-space:nowrap}
.tag.ink{background:var(--ink);color:var(--lime)}
.tag.surface{background:var(--surface);color:var(--text-2)}
.tag.sm{padding:4px 9px;font-size:11.5px;border-radius:9px}

/* ---------- cards (design system §05) — 28px, flat, no border ---------- */
.card{background:var(--card);border:0;border-radius:var(--r-card);padding:26px 28px;box-shadow:none;margin:0 0 20px}
.card.surface{background:var(--surface)}
.card.ink{background:var(--ink);color:#FFFFFF}
.card.lime{background:var(--lime);color:var(--ink)}
.card.lime-pale{background:var(--lime-pale)}
.card.warn{background:var(--warn-bg);color:var(--warn)}
.card.warn a{font-weight:600;color:inherit}
.card.dashed{background:var(--surface);border:1px dashed #C9C9C6}
.card.tight{padding:20px 22px}
.card.flush{padding:0;overflow:hidden}
.card h2{font-size:22px;font-weight:500;letter-spacing:-.02em;margin:0 0 4px}
.card h3{font-size:16px;font-weight:500;letter-spacing:-.01em;margin:0 0 10px}
.card .sub{font-size:12.5px;color:var(--muted-2);margin:0 0 16px}
.card.ink .sub,.card.ink .muted{color:var(--on-ink-muted)}
.card.lime .sub{color:var(--on-lime-2)} .card.lime .muted{color:var(--on-lime)}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.card-head .ttl{display:flex;flex-direction:column;gap:4px}
.card-head .ttl h3{margin:0}
.card-head .acts{display:flex;gap:8px;align-items:center}
.card-kicker{font-size:12.5px;color:var(--muted-2)}

/* ---------- forms ---------- */
label{display:block;font-size:12.5px;color:var(--muted);margin:0 0 6px}
input,select,textarea{width:100%;font:inherit;font-size:14px;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-input);padding:10px 14px;line-height:1.3}
input:hover,select:hover,textarea:hover{border-color:#D5D5D2}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,17,17,.06)}
input:disabled,select:disabled,textarea:disabled{background:var(--surface);color:var(--muted)}
input[type="checkbox"],input[type="radio"]{width:auto;accent-color:var(--ink);margin:0}
input[type="date"],input[type="time"]{min-height:41px}
select{appearance:none;-webkit-appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%239A9A96' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center}
select[multiple]{background-image:none;padding-right:14px}
textarea{resize:vertical;min-height:96px}
input[type="file"]{padding:8px 10px;font-size:12.5px}
input[type="file"]::file-selector-button{font:inherit;font-size:12.5px;font-weight:500;border:0;border-radius:var(--r-pill);
  background:var(--surface);padding:6px 14px;margin-right:10px;cursor:pointer;color:var(--ink)}
.field{margin-bottom:14px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:12px}
/* Two- and three-up form rows stack on a phone (UX audit B/F82) — a 1fr 1fr pair is ~150px a
   side at 320px, too narrow for a date or an email. */
@media(max-width:600px){.row,.row3{grid-template-columns:1fr}}
fieldset{border:0;padding:0;margin:0}
/* search: surface pill with an ink circular button (design system §04) */
.search{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:var(--r-pill);padding:6px 6px 6px 20px}
.search input{border:0;background:transparent;padding:6px 0;box-shadow:none;font-size:14px}
.search input:focus{box-shadow:none}
.search .icobtn{background:var(--ink);color:#FFFFFF}
.search.on-canvas{background:var(--card)}
/* toggle switch 46×28: ink track + lime knob on; #E0E0DD track + white knob off */
.switch{position:relative;display:inline-block;width:46px;height:28px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch .sl{position:absolute;inset:0;background:#E0E0DD;border-radius:var(--r-pill);transition:.18s;cursor:pointer}
.switch .sl:before{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;background:#FFFFFF;border-radius:50%;transition:.18s}
.switch input:checked+.sl{background:var(--ink)}
.switch input:checked+.sl:before{transform:translateX(18px);background:var(--lime)}
.switch input:focus-visible+.sl{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- segmented control: surface track, ink thumb ---------- */
.seg{display:inline-flex;background:var(--surface);border-radius:var(--r-pill);padding:4px;gap:2px;align-items:center;border:0}
.seg>button,.seg>a{appearance:none;border:0;background:transparent;border-radius:var(--r-pill);padding:8px 16px;font:inherit;
  font-size:12.5px;font-weight:500;color:var(--muted);cursor:pointer;line-height:1.2;text-decoration:none;white-space:nowrap}
.seg>button:hover,.seg>a:hover{color:var(--ink)}
.seg>button.on,.seg>a.on{background:var(--ink);color:#FFFFFF}
.seg.on-canvas{background:var(--card)}
/* filter chips (quiet outlined pills) */
.chip,.tk-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:7px 14px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer;line-height:1.2;white-space:nowrap}
.chip:hover,.tk-chip:hover{color:var(--ink);background:var(--hover)}
.chip.on,.tk-chip.on{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.chip.miss{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.chip.static{cursor:default}
.chips{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- avatars (design system §04) ---------- */
.avatar{width:44px;height:44px;border-radius:50%;background:var(--av-1);color:var(--ink);display:inline-grid;
  place-items:center;font-size:13px;font-weight:500;letter-spacing:.01em;flex:0 0 auto;border:0;cursor:default;
  font-family:inherit;text-decoration:none;line-height:1}
.avatar.sm{width:30px;height:30px;font-size:11px}
.avatar.md{width:36px;height:36px;font-size:12px}
.avatar.lg{width:48px;height:48px;font-size:15px}
.avatar.xl{width:52px;height:52px;font-size:16px}
.avatar.ink{background:var(--ink);color:#FFFFFF}
.avatar.ink.on-lime{color:var(--lime)}
.avatar.lime{background:var(--lime);color:var(--ink)}
.avatar.av-1{background:var(--av-1)} .avatar.av-2{background:var(--av-2)}
.avatar.av-3{background:var(--av-3)} .avatar.av-4{background:var(--av-4)}
.avatar[role="button"],button.avatar{cursor:pointer}
.avatar-stack{display:flex;align-items:center}
.avatar-stack .avatar{border:3px solid var(--canvas)}
.avatar-stack .avatar+.avatar{margin-left:-12px}
.card .avatar-stack .avatar{border-color:var(--card)}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;font-weight:400;color:var(--muted);padding:0 8px 12px;border-bottom:1px solid var(--line-soft);
  text-transform:none;letter-spacing:0;white-space:nowrap}
td{padding:14px 8px;border-bottom:1px solid var(--line-row);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tfoot td{border-bottom:0;border-top:1px solid var(--line-soft);font-weight:500}
td.r,th.r{text-align:right}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--ink)}
th.sortable .sortind{font-size:9px;margin-left:4px;color:var(--ink);visibility:hidden}
th.sortable.sorted .sortind{visibility:visible}
tr.clickable,tr[data-eng],tr[data-c]{cursor:pointer}
tbody tr.clickable:hover td,tbody tr.hoverable:hover td{background:var(--row-hover)}
.tbl-wrap{overflow-x:auto}

/* ---------- lists ---------- */
.listrows{list-style:none;padding:0;margin:0;font-size:13.5px}
.listrows li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 8px;border-radius:12px;
  border-bottom:1px solid var(--line-row);cursor:pointer}
.listrows li:last-child{border-bottom:0}
.listrows li:hover{background:var(--row-hover)}
.listrows .nm{font-weight:500}
.listrows li.empty{cursor:default;color:var(--muted)}
.listrows li.empty:hover{background:transparent}
.empty{color:var(--muted);font-size:13px;padding:10px 0}
/* task-style check rows (dashboard "Today's tasks") */
.checkrow{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:12px;font-size:13.5px}
.checkrow:hover{background:var(--row-hover)}
.checkrow .box{width:20px;height:20px;border-radius:7px;border:1.5px solid var(--line-check);display:grid;place-items:center;
  font-size:11px;flex:0 0 auto;cursor:pointer;background:transparent;appearance:none;font:inherit;padding:0}
.checkrow.done .box{background:var(--lime);border-color:var(--lime)}
.checkrow.done span{color:var(--muted-2);text-decoration:line-through}

/* ---------- alerts / notices ---------- */
.alert,.warn-box,.notice{border-radius:var(--r-inner);padding:12px 16px;font-size:13.5px;margin-bottom:20px}
.alert.ok,.notice.ok{background:var(--ok-bg);color:var(--ok)}
.alert.gap,.alert.warn,.notice.warn,.warn-box{background:var(--warn-bg);color:var(--warn)}
.alert.bad,.notice.bad{background:var(--bad-bg);color:var(--bad)}
.alert.info,.notice.info{background:var(--info-bg);color:var(--info)}
.alert a{font-weight:600;color:inherit}

/* ---------- charts ---------- */
.bars{display:flex;align-items:flex-end;gap:12px;height:190px;padding-top:26px}
.bars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end;position:relative;min-width:0}
.bars .bar{width:100%;background:var(--surface);border-radius:12px;min-height:6px}
.card.surface .bars .bar{background:var(--card)}
.bars .bar.top{background:repeating-linear-gradient(45deg,var(--lime-hover) 0 3px,var(--lime) 3px 8px)}
.card.surface .bars .bar.top{background:repeating-linear-gradient(45deg,var(--lime-hover) 0 3px,var(--lime) 3px 8px)}
.bars .lbl{font-size:12px;color:var(--muted);white-space:nowrap}
.bars .val{position:absolute;top:-26px;left:50%;transform:translateX(-50%);z-index:1}
.chart-axis{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);padding-top:10px}
.hatch-swatch{display:inline-block;width:20px;height:10px;border-radius:3px;border:1px solid var(--line);
  background:repeating-linear-gradient(45deg,#C9C9C6 0 2px,#FFFFFF 2px 6px);vertical-align:middle}
.progress{height:8px;background:var(--surface);border-radius:var(--r-pill);overflow:hidden}
.progress>div{height:100%;background:var(--ink);width:0;transition:width .4s}
.progress.lime>div{background:var(--lime)}

/* ---------- layout helpers ---------- */
.page{max-width:1560px;min-width:0;margin:0 auto;padding:28px 48px 72px}
/* Round 2 Wave 3a: hero simplified to H1 + one action row, vertically centred, dashboard
   only consumer — crumbs/date-pill rules dropped as dead code along with the markup. */
.hero{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:6px 0 34px}
.hero .hero-l{display:flex;flex-direction:column;min-width:0}
/* Compact enough to share one calm row with dashboard actions at wide desktop sizes. */
.hero h1{font-size:clamp(32px,22px + 2.4vw,48px);font-weight:500;letter-spacing:-.035em;line-height:1.08;margin:0}
.hero .hero-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap}
/* Round 3 §5.1: fluid 24px→34px between ~380px and ~900px viewports, flat either side */
.pagehead h2{font-size:clamp(24px,17px + 1.9vw,34px);font-weight:500;letter-spacing:-.03em;line-height:1.05;margin:0}
.grid2{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:20px;align-items:start}
.grid2.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* Round 3 §5.1 fix: a bare 1fr track has an implicit minmax(auto,1fr) minimum — same class of bug as the .appshell align-items gap above — so a wide child (the revenue "Trail by insurer" donut + legend row, or any .tbl-wrap table) still pushed the single collapsed column past the viewport. minmax(0,1fr) matches the desktop rule's own minimum and lets each card's own overflow-x:auto (.tbl-wrap) do the clipping instead. */
@media(max-width:880px){.grid2,.grid2.even{grid-template-columns:minmax(0,1fr)}}
.stack{display:flex;flex-direction:column;gap:20px}
.rowbreak{height:20px}
.foot{text-align:center;color:var(--muted-2);font-size:12px;margin-top:26px}
.crumb{font-size:13px;color:var(--muted);margin-bottom:14px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--ink);text-decoration:underline}
.crumb .sep{color:var(--muted-3)}
.crumb .here{color:var(--ink);font-weight:500}

/* ---------- overlays: modal / drawer / busy ---------- */
.modal-overlay{position:fixed;inset:0;background:var(--scrim);-webkit-backdrop-filter:var(--scrim-blur);backdrop-filter:var(--scrim-blur);z-index:90;display:flex;align-items:center;justify-content:center;padding:24px}
.modal-overlay.hide{display:none}
.modal{background:var(--card);border-radius:var(--r-card);max-width:760px;width:100%;max-height:88vh;display:flex;flex-direction:column;
  box-shadow:var(--shadow-float);overflow:hidden}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 10px}
.modal-head h3{margin:0;font-size:18px;font-weight:500;letter-spacing:-.01em}
.modal-x{appearance:none;background:var(--surface);border:0;width:34px;height:34px;border-radius:50%;font-size:18px;line-height:1;
  cursor:pointer;color:var(--ink);display:inline-grid;place-items:center;padding:0}
.modal-x:hover{background:var(--hover-2)}
.modal-body{padding:4px 22px 14px;overflow:auto}
.modal-foot{padding:10px 22px 18px;display:flex;gap:8px;justify-content:flex-end}
.modal-foot:empty{display:none}
/* UI-UX-RULES §3: create/edit/upload/review flows open as a large centred overlay sheet
   (not a side drawer), page behind dimmed ~70% with blur. Every flow goes through
   openDrawer(), so this one rule converts all of them. */
.drawer-overlay{position:fixed;inset:0;background:var(--scrim);-webkit-backdrop-filter:var(--scrim-blur);backdrop-filter:var(--scrim-blur);z-index:60;display:flex;justify-content:center;align-items:center;padding:24px}
.drawer-overlay.hide{display:none}
.drawer{width:min(860px,100%);max-height:min(92vh,100%);background:var(--card);border-radius:var(--r-card);box-shadow:var(--shadow-float);
  display:flex;flex-direction:column;animation:drawerIn .16s ease;overflow:hidden}
.drawer-overlay.wide .drawer{width:min(1080px,100%)}
@keyframes drawerIn{from{transform:translateY(12px);opacity:.5}to{transform:none;opacity:1}}
@media (max-width:600px){.drawer-overlay,.modal-overlay{padding:0}.drawer,.drawer-overlay.wide .drawer{width:100%;height:100%;border-radius:0}
  .modal{max-height:100vh;height:100%;border-radius:0}}
@media (prefers-reduced-motion:reduce){.drawer{animation:none}}
/* §1: negatives left, positives right — the first negative action is pushed to the left edge. */
/* §1 order is set by uiOrderActions() + .is-neg spacing in index.html (UI kit). */
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px 10px}
.drawer-head h3{font-size:18px;font-weight:500;letter-spacing:-.01em;margin:0}
.drawer-body{padding:4px 22px 14px;overflow:auto;flex:1}
.drawer-foot{display:flex;gap:8px;justify-content:flex-end;padding:10px 22px 18px;border-top:1px solid var(--line-soft)}
/* UX round 4 §3: sheet density. Fields sit 8px apart, labels are 12px with a 4px gap to the control, and a textarea grows with its
   content instead of scrolling inside a sheet that also scrolls. Scoped to the sheet bodies so page forms keep their rhythm. */
.drawer-body .field,.modal-body .field{margin-bottom:8px}
.drawer-body label,.modal-body label{font-size:12px;margin-bottom:4px}
.drawer-body .row,.drawer-body .row3,.modal-body .row,.modal-body .row3{gap:8px 12px;margin-bottom:8px}
textarea.autogrow{resize:none;overflow-y:auto;min-height:64px;max-height:40vh}
/* .sheet-2col: two columns when the sheet is wide (>=720px of sheet), one below. Container query on the .sheet-host wrapper,
   so it follows the sheet's width and not the window's. */
.sheet-host{container-type:inline-size;container-name:sheet}   /* wrapper around a .sheet-2col grid, only where it is used */
.sheet-2col{display:grid;grid-template-columns:minmax(0,1fr);gap:0 28px;align-items:start}
.sheet-2col>.sheet-col{min-width:0}
.sheet-2col>.sheet-full{grid-column:1/-1}
@container sheet (min-width:720px){.sheet-2col{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* ---------- loading feedback (spinner; the floating #loadPill lives in index.html) ---------- */
@keyframes bspinner{to{transform:rotate(360deg)}}
.spinner{width:18px;height:18px;border:2px solid rgba(17,17,17,.15);border-top-color:var(--ink);border-radius:50%;
  animation:bspinner .7s linear infinite;display:inline-block;flex:0 0 auto}
.card.ink .spinner{border-color:rgba(255,255,255,.2);border-top-color:var(--lime)}

/* ---------- misc primitives ---------- */
.kv{font-size:13.5px;margin:3px 0} .kv b{color:var(--ink);font-weight:500}
.badge{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:var(--r-pill);flex-shrink:0;text-align:center}
.badge.pass,.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.missing,.badge.bad{background:var(--bad-bg);color:var(--bad)}
.badge.manual,.badge.warn{background:var(--warn-bg);color:var(--warn)}
.count{display:inline-block;min-width:16px;text-align:center;background:var(--lime);color:var(--ink);font-size:10px;font-weight:600;
  line-height:16px;border-radius:var(--r-pill);padding:0 5px;margin-left:6px}
.count.bad{background:var(--bad);color:#FFFFFF}
pre.md,pre.code{white-space:pre-wrap;background:var(--surface);border:0;border-radius:var(--r-inner);padding:14px 16px;
  font-family:var(--mono);font-size:12px;max-height:340px;overflow:auto}
details.acc{background:var(--surface);border:0;border-radius:var(--r-inner);margin:0 0 10px;padding:0}
details.acc>summary{list-style:none;cursor:pointer;padding:12px 16px;font-size:13.5px;font-weight:500;color:var(--ink);
  display:flex;align-items:center;gap:8px;user-select:none}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::before{content:"\203A";color:var(--muted);font-weight:600;transition:transform .15s;display:inline-block}
details.acc[open]>summary::before{transform:rotate(90deg)}
details.acc>summary .sumhint{font-weight:400;font-size:11.5px;color:var(--muted-2);margin-left:auto;text-align:right}
details.acc .accbody{padding:4px 16px 16px}
.hide{display:none}
/* body scroll-lock while a modal/drawer/full-screen chat is open (Round 2 §3.1) — the
   JS toggle is ref-counted (see web/index.html lockScroll/unlockScroll). */
body.no-scroll{overflow:hidden}

/* ---------- Mobile pass — touch targets and form fonts (phone tier) ----------
   Rule: every button, icon button, tab, chip and toggle is a >=44px target and iOS never zooms a focused
   field (inputs >=16px). Pills that are too small to grow visibly get an invisible hit area instead (the
   .m-hit helper below). Scoped to <=760px plus a landscape phone (short + coarse pointer, the overlay kit's own tier),
   so the desktop / tablet density is unchanged. */
@media(max-width:760px),(max-height:500px) and (pointer:coarse){
  .btn,.btn.sm,.btn.xs,.minibtn{min-height:44px}
  .btn.link{min-height:44px;padding:0 4px}
  .icobtn,.icobtn.sm,.icobtn.xs,.btn.icon{width:44px;height:44px;min-width:44px;font-size:15px}
  .miniico,button.miniico{width:44px;height:44px;min-width:44px}
  th[tabindex],th.sortable{height:44px;padding-bottom:0;vertical-align:middle}
  .tb-btn,.pnav>a,.pnav>button,.pnav.compact>a,.pnav.compact>button{min-height:44px}
  .chip,.tk-chip{min-height:44px;padding:0 16px}
  .seg>button,.seg>a{min-height:44px;padding:0 16px;font-size:13.5px;display:inline-flex;align-items:center;justify-content:center}
  .seg{padding:0}
  /* !important on purpose: dozens of page-level rules set 12.5-14px on one field or another, and iOS zooms the
     page whenever a focused field is under 16px. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),select,textarea{font-size:16px!important}
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select{min-height:44px}
  input[type="date"],input[type="time"]{min-height:44px}
  /* checkboxes / radios / switches: the glyph stays, the hit area grows */
  input[type="checkbox"],input[type="radio"]{width:22px;height:22px}
  .switch{width:52px;height:32px}
  .switch .sl:before{width:26px;height:26px}
  .switch input:checked+.sl:before{transform:translateX(20px)}
  .switch::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}   /* 32px track, 44px hit area (the label is the target) */
  .m-hit{position:relative}
  .m-hit::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
  .listrows li{min-height:44px}
  /* the sticky topbar must not cover what scrollIntoView / focus scrolls to */
  .view .card,.view>*,[data-adm-pane],[data-card]{scroll-margin-top:calc(var(--topbar-h) + 12px)}
  input,select,textarea{scroll-margin:calc(var(--topbar-h) + 16px) 0 96px}
  /* a bare checkbox / radio inside a <label> is tapped through the label: make the label the 44px target */
  label:not(.switch):has(>input[type="checkbox"]),label:not(.switch):has(>input[type="radio"]){min-height:44px}
}