/* =====================================================================================
 *  HAALTD INVOICE  —  css/style.css
 *  A premium iOS / macOS–inspired design system layered over Bootstrap 5.
 *
 *  Structure:
 *    1. Design tokens (:root)          6. Auth screen
 *    2. Base / reset                   7. App shell (topbar, sidebar, main)
 *    3. Typography                     8. Components (buttons, forms, cards, KPI)
 *    4. Scrollbars                     9. Modals, toasts, connectivity pill
 *    5. Splash                        10. Bootstrap overrides & responsive
 * ===================================================================================== */

/* =====================================================================================
 *  1. DESIGN TOKENS
 * ===================================================================================== */
:root {
  /* ===================================================================================
   *  "LEDGER"  —  the entire visual layer lives here.
   *
   *  The existing variable NAMES are kept deliberately: every view already consumes
   *  them, so replacing the values re-skins the whole app at once instead of leaving
   *  eleven files to be hand-edited and half of them missed. New semantic names are
   *  added alongside as aliases for anything written from here on.
   * ================================================================================= */

  /* ---- SURFACES: warm off-white, not grey. The warmth is what keeps a finance UI
     from feeling clinical; a neutral grey canvas reads as a spreadsheet. --------- */
  --paper:           #FCFCFD;
  --bg:              #F2F2EE;   /* deepened warm off-white page. Nothing in the UI is pure
                                   white anymore (that reads clinical) — cards are warmed
                                   off-white too, and the page sits a shade below them so
                                   they still read as raised objects. The Mercury way. */
  --surface:         #FDFDFB;   /* warm off-white card, not pure #FFFFFF */
  --surface-2:       #F6F6F2;   /* a step below surface, warmed to match */
  --surface-sunken:  #EDEDE8;   /* deepest inset, matched to the new page */
  --sunken:          #EEEEF2;

  /* ---- INK: text is NAVY, never black. This single decision does more for the
     "financial institution" read than any accent choice. 15.8:1 on paper. ------- */
  --ink:             #0A1F44;
  --text:            #0A1F44;
  --ink-2:           #4A5878;
  --text-secondary:  #4A5878;
  --ink-3:           #7A87A3;
  --text-tertiary:   #7A87A3;
  --text-on-accent:  #FFFFFF;
  --on-accent:       #FFFFFF;

  /* ---- ACCENTS: desaturated and darkened against the iOS system palette.
     A ledger flags; it does not alarm. Consumer-bright makes money feel like a
     game, which is the opposite of what an invoice should feel like. ------------ */
  --accent:          #2C5CE6;
  --blue:            #2C5CE6;
  --accent-press:    #1E48C4;
  --blue-hover:      #1E48C4;
  --accent-wash:     rgba(44, 92, 230, .08);
  --blue-soft:       rgba(44, 92, 230, .08);

  --positive:        #0E7C5A;
  --green:           #0E7C5A;
  --positive-wash:   rgba(14, 124, 90, .10);

  --attention:       #B54708;
  --amber:           #B54708;
  --attention-wash:  rgba(181, 71, 8, .10);

  --critical:        #9F1239;
  --red:             #9F1239;
  --critical-wash:   rgba(159, 18, 57, .09);

  --purple:          #5B4BC4;
  --teal:            #0E7490;

  /* ---- LINES: navy-tinted, never neutral grey. A grey hairline on warm paper
     looks dirty; tinting it with the ink colour keeps the page coherent. -------- */
  /* ---- INVOICE STATUS RAMP (v2.11.1) -------------------------------------------
     Two tiers per status on purpose. The BAR tier is the vivid one you see at a
     glance; the INK tier is a deeper shade used for label text, because the vivid
     amber that reads beautifully as a 5px bar only manages ~3.9:1 against white and
     would fail contrast as small bold type. Same hue, different job.
     --------------------------------------------------------------------------- */
  --st-draft-bar:   #94A3B8;
  --st-draft-ink:   #5A6883;
  --st-due-bar:     #F59E0B;   /* amber — the standard for "payment expected"        */
  --st-due-ink:     #B45309;
  --st-late-bar:    #EF4444;   /* red — overdue, and only overdue                    */
  --st-late-ink:    #DC2626;
  --st-paid-bar:    #10B981;   /* emerald — brighter than --positive, which is teal  */
  --st-paid-ink:    #047857;
  --st-void-bar:    #A8B2C4;
  --st-void-ink:    #657189;   /* darkened from #7A87A3: muted is the intent, 3.6:1 was not */
  --st-rail:        rgba(10, 31, 68, .09);

  --line:            rgba(10, 31, 68, .10);
  --separator:       rgba(10, 31, 68, .10);
  --line-strong:     rgba(10, 31, 68, .17);
  --separator-strong:rgba(10, 31, 68, .17);
  --border:          rgba(10, 31, 68, .12);

  --glass-bg:        rgba(252, 252, 253, .78);
  --glass-blur:      saturate(180%) blur(20px);

  /* ---- RADII: tightened from 12–22px. Soft corners read consumer; these read
     instrument. The change is small in pixels and large in character. ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-pill: 999px;

  /* ---- ELEVATION: structure comes from borders. Shadow is reserved for things
     that genuinely float — menus, modals, toasts. ------------------------------ */
  --lift-1:     0 1px 2px rgba(10, 31, 68, .04);
  --shadow-sm:  0 1px 2px rgba(10, 31, 68, .04);
  --lift-2:     0 4px 12px -2px rgba(10, 31, 68, .08), 0 2px 4px -2px rgba(10, 31, 68, .05);
  --shadow-md:  0 4px 12px -2px rgba(10, 31, 68, .08), 0 2px 4px -2px rgba(10, 31, 68, .05);
  --lift-3:     0 16px 32px -8px rgba(10, 31, 68, .16);
  --shadow-lg:  0 16px 32px -8px rgba(10, 31, 68, .16);
  --shadow-glass: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 16px rgba(10,31,68,.05);

  /* ---- SPACE (4px base) ---------------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px;

  --topbar-h: 60px;
  --sidebar-w: 232px;

  /* ---- MOTION -------------------------------------------------------------- */
  --ease:      cubic-bezier(.2, .8, .2, 1);     /* decelerating; things settle */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);     /* longer tail, for entrances */
  --dur:       .2s;
  --dur-slow:  .45s;

  /* ---- TYPE: three roles, each with a job.
       display — Inter Tight, tighter tracking, for headings and figures with weight
       ui      — Inter, everything else
       ledger  — IBM Plex Mono, for amounts in tables so decimals align down a column */
  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --font:         "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-ui:      "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-ledger:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* =====================================================================================
 *  2. BASE / RESET
 * ===================================================================================== */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  overflow-x: hidden;
  /* iOS safe-area padding for notched devices */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

[hidden] { display: none !important; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); }

:focus-visible {
  outline: 3px solid var(--blue-soft);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* =====================================================================================
 *  3. TYPOGRAPHY
 * ===================================================================================== */
h1,h2,h3,h4,h5 { font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.text-secondary-ios { color: var(--text-secondary); }
/* .mono already marks every money cell across the views, so it becomes the ledger
   column rather than introducing a second class that would have to be threaded through
   eleven files by hand. */
.mono {
  font-family: var(--font-ledger);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-size: .92em;
  letter-spacing: -.02em;
}

/* =====================================================================================
 *  4. SCROLLBARS (thin macOS style)
 * ===================================================================================== */
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.22) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.22);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.34); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* =====================================================================================
 *  5. SPLASH
 * ===================================================================================== */
.app-splash {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-6); background: var(--bg);
  transition: opacity var(--dur) var(--ease);
}
.app-splash.is-hidden { opacity: 0; pointer-events: none; }
.app-splash__logo { width: 68px; height: 68px; border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.app-splash__spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--separator); border-top-color: var(--blue);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =====================================================================================
 *  6. AUTH SCREEN
 * ===================================================================================== */
.auth-screen {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-6); padding: var(--sp-6);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(0,122,255,0.10), transparent 60%),
    var(--bg);
}
.auth-card {
  width: 100%; max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  text-align: center;
  animation: rise var(--dur) var(--ease);
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.auth-card__logo { width: 60px; height: 60px; border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.auth-card__title { margin: var(--sp-4) 0 var(--sp-1); font-size: 1.5rem; }
.auth-card__subtitle { margin: 0 0 var(--sp-6); color: var(--text-secondary); font-size: 0.95rem; }
.auth-form { text-align: left; display: flex; flex-direction: column; gap: var(--sp-4); }
.field__label {
  display: block; font-size: 0.8rem; font-weight: 500;
  color: var(--text-secondary); margin-bottom: var(--sp-1); padding-left: 2px;
}
.auth-toggle { margin: var(--sp-5) 0 0; font-size: 0.9rem; color: var(--text-secondary); }
.auth-toggle a { font-weight: 500; margin-left: 4px; }
.auth-footer { font-size: 0.8rem; color: var(--text-tertiary); }
.auth-alert {
  text-align: left; font-size: 0.88rem; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); margin-bottom: var(--sp-4);
  background: rgba(255,59,48,0.10); color: var(--critical); border: 1px solid rgba(255,59,48,0.2);
}
.auth-alert.is-success { background: rgba(52,199,89,0.12); color: var(--positive); border-color: rgba(52,199,89,0.25); }

/* =====================================================================================
 *  7. APP SHELL
 * ===================================================================================== */
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidebar main";
}

/* --- Top bar --- */
.app-topbar {
  grid-area: topbar;
  position: sticky; top: 0; z-index: 1030;
  display: flex; align-items: center; gap: var(--sp-4);
  height: var(--topbar-h); padding: 0 var(--sp-5);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--separator);
  box-shadow: var(--shadow-glass);
}
.topbar__menu-btn {
  display: none; border: 0; background: transparent; font-size: 1.4rem;
  color: var(--text); padding: 4px 8px; border-radius: var(--r-sm); cursor: pointer;
}
.topbar__menu-btn:hover { background: var(--surface-sunken); }
.topbar__brand { display: flex; align-items: center; gap: var(--sp-2); color: var(--text); font-weight: 600; }
.topbar__logo { width: 30px; height: 30px; border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.topbar__brand-text { letter-spacing: -0.02em; }

.topbar__search {
  position: relative; flex: 1; max-width: 460px; margin: 0 auto;
}
.topbar__search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-tertiary); font-size: 0.95rem; pointer-events: none;
}
.topbar__search-input {
  width: 100%; height: 38px; padding: 0 14px 0 36px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--surface-sunken); color: var(--text); font-size: 0.9rem;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.topbar__search-input::placeholder { color: var(--text-tertiary); }
.topbar__search-input:focus {
  outline: none; background: var(--surface);
  border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft);
}

.topbar__right { display: flex; align-items: center; gap: var(--sp-3); }

/* Connectivity pill */
.conn-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: rgba(52,199,89,0.12); font-size: 0.78rem; font-weight: 500; color: var(--positive);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.conn-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.conn-pill.is-offline { background: rgba(142,142,147,0.16); color: var(--text-secondary); }
.conn-pill.is-offline .conn-pill__dot { background: var(--text-tertiary); }
.conn-pill.is-syncing { background: rgba(255,159,10,0.16); color: var(--attention); }
.conn-pill.is-syncing .conn-pill__dot { background: var(--amber); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* User chip */
.user-chip {
  display: flex; align-items: center; gap: var(--sp-2);
  border: 0; background: transparent; cursor: pointer;
  padding: 4px 6px; border-radius: var(--r-pill);
}
.user-chip:hover { background: var(--surface-sunken); }
.user-chip__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 600; font-size: 0.85rem;
  color: var(--text-on-accent); background: linear-gradient(135deg, var(--blue), var(--purple));
}
.user-chip__meta { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.user-chip__name { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.user-chip__role { font-size: 0.7rem; color: var(--text-tertiary); text-transform: capitalize; }
.user-chip__caret { font-size: 0.7rem; color: var(--text-tertiary); }
.user-dropdown { border-radius: var(--r-md); border: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: 6px; }
.user-dropdown__email { font-size: 0.8rem; color: var(--text-secondary); }
.user-dropdown .dropdown-item { border-radius: var(--r-sm); font-size: 0.9rem; display: flex; align-items: center; gap: 8px; }

/* --- Sidebar --- */
.app-sidebar {
  grid-area: sidebar;
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  display: flex; flex-direction: column;
  padding: var(--sp-4) var(--sp-3);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--separator);
  overflow-y: auto;
}
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px 12px; border-radius: var(--r-md);
  color: var(--text-secondary); font-size: 0.92rem; font-weight: 500;
  cursor: pointer; border: 0; background: transparent; width: 100%; text-align: left;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-item i { font-size: 1.1rem; width: 22px; text-align: center; }
.nav-item:hover { background: var(--surface-sunken); color: var(--text); }
.nav-item.is-active { background: var(--blue); color: var(--text-on-accent); box-shadow: var(--shadow-sm); }
.nav-item.is-active i { color: var(--text-on-accent); }
.sidebar__footer { padding: var(--sp-3) var(--sp-2) 0; border-top: 1px solid var(--separator); margin-top: var(--sp-3); }
.sidebar__version { font-size: 0.72rem; color: var(--text-tertiary); }

/* Sidebar head (Menu label + collapse toggle) */
.sidebar__head { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px 10px; margin-bottom: 4px; }
.sidebar__label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }
.sidebar__collapse {
  border: 0; background: transparent; color: var(--text-tertiary);
  width: 28px; height: 28px; border-radius: var(--r-md); cursor: pointer;
  display: grid; place-items: center; font-size: 0.95rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sidebar__collapse:hover { background: var(--surface-sunken); color: var(--text); }

/* Workspace chip in the footer */
.workspace-chip { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--r-md); }
.workspace-chip__logo img { width: 30px; height: 30px; border-radius: var(--r-md); box-shadow: var(--shadow-sm); display: block; }
.workspace-chip__meta { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.workspace-chip__name { font-size: 0.85rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.workspace-chip__sub { font-size: 0.72rem; color: var(--text-tertiary); }

/* Smooth width animation between expanded and collapsed */
.app-shell { transition: grid-template-columns var(--dur) var(--ease); }

/* ---- Collapsed (icon rail) mode ---- */
.app-shell.is-collapsed { grid-template-columns: 76px 1fr; }
.app-shell.is-collapsed .app-sidebar { padding-left: 10px; padding-right: 10px; }
.app-shell.is-collapsed .sidebar__label,
.app-shell.is-collapsed .nav-item span,
.app-shell.is-collapsed .workspace-chip__meta { display: none; }
.app-shell.is-collapsed .sidebar__head { justify-content: center; padding: 2px 0 10px; }
.app-shell.is-collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
.app-shell.is-collapsed .nav-item i { width: auto; }
.app-shell.is-collapsed .workspace-chip { justify-content: center; }
.app-shell.is-collapsed .sidebar__collapse i { transform: rotate(180deg); }
.app-shell.is-collapsed .topbar__brand-text { display: none; }

/* Tooltip on nav items when collapsed */
.app-shell.is-collapsed .nav-item { position: relative; }
.app-shell.is-collapsed .nav-item::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: var(--text); color: #fff; font-size: 0.8rem; font-weight: 500;
  padding: 6px 10px; border-radius: var(--r-md); white-space: nowrap;
  opacity: 0; pointer-events: none; z-index: 1060; box-shadow: var(--shadow-md);
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}
.app-shell.is-collapsed .nav-item:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* On mobile the off-canvas drawer is used, so the collapse head is hidden */
@media (max-width: 991px) {
  .sidebar__head { display: none; }
  .app-shell.is-collapsed { grid-template-columns: 1fr; }
}

.sidebar-backdrop {
  position: fixed; inset: 0; z-index: 1020;
  background: rgba(0,0,0,0.35);
}

/* --- Main --- */
.app-main { grid-area: main; min-width: 0; padding: var(--sp-6); }
.view-root { max-width: 1200px; margin: 0 auto; animation: fade var(--dur) var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* View header + empty state (used by the placeholder and future views) */
.view-header { margin-bottom: var(--sp-6); }
.view-header__title { font-size: 1.7rem; margin: 0 0 4px; }
.view-header__subtitle { color: var(--text-secondary); margin: 0; font-size: 0.95rem; }

.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--sp-3);
  padding: var(--sp-10) var(--sp-6); min-height: 320px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.empty-state__icon {
  width: 64px; height: 64px; border-radius: var(--r-lg);
  display: grid; place-items: center; font-size: 1.8rem;
  color: var(--blue); background: var(--blue-soft);
}
.empty-state__title { font-size: 1.15rem; margin: 0; }
.empty-state__text { color: var(--text-secondary); margin: 0; max-width: 380px; }

/* =====================================================================================
 *  8. COMPONENTS — buttons, forms, cards, KPI, segmented control, iOS switch
 * ===================================================================================== */

/* iOS-style buttons */
/* Gradient fill and a lift on hover. The gradient is shallow on purpose — two stops a
   few degrees apart in the same hue reads as depth; a rainbow reads as a toy, and this
   button moves money. The glow is the brand colour at low alpha rather than a grey
   shadow, so the button looks lit from within instead of pasted on. */
.btn-ios-primary {
  background: linear-gradient(135deg, var(--blue), var(--blue-hover));
  color: var(--text-on-accent);
  border: 0; border-radius: var(--r-md); padding: 11px 18px;
  font-weight: 600; font-size: 0.95rem;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
  box-shadow: 0 1px 2px rgba(10, 31, 68, .16), 0 6px 16px -6px color-mix(in srgb, var(--blue) 55%, transparent);
}
.btn-ios-primary:hover {
  color: var(--text-on-accent); transform: translateY(-1px); filter: saturate(1.06);
  box-shadow: 0 1px 2px rgba(10, 31, 68, .16), 0 12px 24px -8px color-mix(in srgb, var(--blue) 70%, transparent);
}
.btn-ios-primary:active { transform: translateY(0) scale(.985); }

/* Secondary stays deliberately quiet — if both buttons shout, neither leads. */
.btn-ios-secondary {
  transition: transform .2s var(--ease), background .2s var(--ease),
              border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-ios-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(10, 31, 68, .06), 0 8px 18px -8px rgba(10, 31, 68, .22);
}
.btn-ios-secondary:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .btn-ios-primary, .btn-ios-secondary { transition: none !important; }
  .btn-ios-primary:hover, .btn-ios-secondary:hover { transform: none; }
}
.btn-ios-primary:disabled { opacity: 0.5; }

.btn-ios-secondary {
  background: var(--surface-sunken); color: var(--blue);
  border: 0; border-radius: var(--r-md); padding: 11px 18px; font-weight: 600; font-size: 0.95rem;
  transition: background var(--dur) var(--ease), transform 0.08s var(--ease);
}
.btn-ios-secondary:hover { background: var(--surface-sunken); color: var(--blue-hover); }
.btn-ios-secondary:active { transform: scale(0.98); }

.btn-ios-ghost {
  background: transparent; color: var(--blue); border: 0; padding: 9px 12px;
  border-radius: var(--r-md); font-weight: 500;
}
.btn-ios-ghost:hover { background: var(--blue-soft); }

.btn-ios-danger { background: var(--red); color: #fff; border: 0; border-radius: var(--r-md); padding: 11px 18px; font-weight: 600; }
.btn-ios-danger:hover { background: var(--critical); color: #fff; }

/* Cards */
.ios-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
}

/* KPI banner + command centre moved into js/views/dashboard.js injectStyles in
 * v2.32.0 — the redesigned hero (.dcx) and KPI band (.kpz) own their own styles,
 * the way the About screen does. Nothing else referenced these classes. */
.kpi-card__delta.mut { color: var(--ink-3); }

@media (max-width: 640px) {
  .dash-center { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px; }
  .dash-center__spark { width: 100%; max-width: none; }
  .dash-center__val { font-size: 2.2rem; }
  .kpi-banner { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kpi-card { padding: 14px 14px 14px 16px; }
  .kpi-card__value { font-size: 1.2rem; }
}

/* ===================================================================================
 *  DASHBOARD MOTION — calm and responsive (Stripe/Mercury restraint)
 *  No self-playing animation: nothing draws, grows, pulses or breathes on its own while
 *  you're trying to read your numbers. The life comes from RESPONSE — the content fades
 *  up once on load (the existing .dash-in cascade), numbers count up (the odometer), and
 *  everything answers to hover. That's "alive to touch", not "animated at you".
 * ================================================================================= */

/* the "you are here" dot on the sparkline sits still — no pulse */

/* cards respond to hover: a soft lift, nothing more */
.kpi-card { transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.kpi-card:hover { box-shadow: var(--lift-2); transform: translateY(-1px); }
.dash-center { transition: box-shadow var(--dur) var(--ease); }
.dash-center:hover { box-shadow: var(--lift-2); }

.dash-center__cta { transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.dash-center__cta:active { transform: scale(.98); }

/* chart cards lift on hover like the KPI cards */
.chart-card { transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.chart-card:hover { box-shadow: var(--lift-2); transform: translateY(-1px); }

/* list rows softly illuminate + nudge on hover — response, not animation */
.dash-cols .prev-row, .dash-cols .act-row, .top-row {
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.dash-cols .prev-row:hover, .dash-cols .act-row:hover, .top-row:hover {
  background: var(--surface-2); transform: translateX(2px);
}

/* Segmented control (iOS) */
.segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-sunken); border-radius: var(--r-md);
}
.segmented__item {
  border: 0; background: transparent; padding: 7px 16px; border-radius: var(--r-md);
  font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.segmented__item.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* iOS switch toggle (the signature control) */
.ios-switch { position: relative; display: inline-block; width: 51px; height: 31px; }
.ios-switch input { opacity: 0; width: 0; height: 0; }
.ios-switch__slider {
  position: absolute; inset: 0; cursor: pointer; border-radius: var(--r-pill);
  background: var(--surface-sunken); transition: background var(--dur) var(--ease);
}
.ios-switch__slider::before {
  content: ""; position: absolute; height: 27px; width: 27px; left: 2px; top: 2px;
  background: #fff; border-radius: 50%; box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease);
}
.ios-switch input:checked + .ios-switch__slider { background: var(--green); }
.ios-switch input:checked + .ios-switch__slider::before { transform: translateX(20px); }

/* Status badges (invoice states) */
/* --- Status badges: traffic-light, with a live status dot -------------------------
   Green = settled. Amber = money still owed. Red = overdue. Grey = not yet live.   */
.badge-ios {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: .01em;
  padding: 4px 11px 4px 8px; border-radius: var(--r-pill);
  border: 1px solid transparent; white-space: nowrap; line-height: 1.5;
}
.badge-ios::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto; box-shadow: var(--lift-1);
}
.badge-pre_invoice   { background: rgba(142,142,147,0.14); color: var(--ink-2); border-color: rgba(142,142,147,0.28); }
.badge-due           { background: rgba(249,115,22,0.14); color: var(--attention); border-color: rgba(249,115,22,0.34); }
.badge-partially_paid{ background: rgba(249,115,22,0.16); color: var(--attention); border-color: rgba(249,115,22,0.38); }
.badge-overdue       { background: rgba(220,38,38,0.12);   color: var(--critical); border-color: rgba(220,38,38,0.32); }
.badge-overdue::before { animation: badgePulse 1.8s ease-in-out infinite; }
@keyframes badgePulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(1.3); } }
.badge-paid {
  background: linear-gradient(135deg, rgba(15,157,88,.16), rgba(52,199,89,.12));
  color: var(--positive); border-color: rgba(15,157,88,0.34);
}
.badge-cancelled { background: rgba(220,38,38,0.10); color: #991B1B; border-color: rgba(220,38,38,0.26); text-decoration: line-through; }

/* Dark mode: lift the badge colours so they stay vivid */
/* Status ramp, dark: bars stay vivid, ink tier lightens so it reads on a dark surface. */
html[data-theme="dark"] {
  --st-draft-bar: #94A3B8; --st-draft-ink: #A9B4C7;
  --st-due-bar:   #FBBF24; --st-due-ink:   #FCD34D;
  --st-late-bar:  #F87171; --st-late-ink:  #FCA5A5;
  --st-paid-bar:  #34D399; --st-paid-ink:  #6EE7B7;
  --st-void-bar:  #6B7688; --st-void-ink:  #8A94A6;
  --st-rail:      rgba(255, 255, 255, .13);
}

html[data-theme="dark"] .badge-pre_invoice   { background: rgba(142,142,147,0.20); color: var(--ink-3); }
html[data-theme="dark"] .badge-due           { background: rgba(245,158,11,0.18);  color: #FCD34D; border-color: rgba(245,158,11,0.35); }
html[data-theme="dark"] .badge-partially_paid{ background: rgba(251,146,60,0.18);  color: #FDBA74; border-color: rgba(251,146,60,0.35); }
html[data-theme="dark"] .badge-overdue       { background: rgba(248,113,113,0.18); color: #FCA5A5; border-color: rgba(248,113,113,0.35); }
html[data-theme="dark"] .badge-paid          { background: rgba(52,211,153,0.18);  color: #6EE7B7; border-color: rgba(52,211,153,0.35); }
html[data-theme="dark"] .badge-ios::before   { box-shadow: var(--lift-1); }
.badge-cancelled     { background: rgba(60,60,67,0.14);    color: #48484A; text-decoration: line-through; }

/* Toolbar (card header row) + section titles */
.toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--separator);
}
.section-title { font-size: 1.05rem; margin: 0; }

/* Data table (shared by dashboard / invoices / customers) */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table thead th {
  text-align: left; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--text-tertiary);
  padding: 10px var(--sp-5); background: var(--surface-2);
  border-bottom: 1px solid var(--separator); white-space: nowrap;
}
.data-table tbody td { padding: 13px var(--sp-5); border-bottom: 1px solid var(--separator); color: var(--text); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background var(--dur) var(--ease); }
.data-table tbody tr:hover { background: var(--surface-sunken); }
.text-end { text-align: right !important; }

/* ===================================================================================
 *  EXPOSED STATUS PICKER (invoice editor) — all choices visible, no hidden dropdown
 * ================================================================================= */
.status-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: .84rem; font-weight: 550; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 9px 14px; cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease), box-shadow .18s var(--ease);
}
.status-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: 0 0 auto; transition: background .15s var(--ease); }
.status-pill--draft .status-pill__dot { background: var(--st-draft-bar, #9AA6C0); }
.status-pill--due   .status-pill__dot { background: var(--st-due-bar); }
.status-pill--late  .status-pill__dot { background: var(--st-late-bar); }
.status-pill--paid  .status-pill__dot { background: var(--st-paid-bar); }
.status-pill--void  .status-pill__dot { background: var(--st-void-bar, #9AA6C0); }
.status-pill:hover { border-color: var(--line-strong); color: var(--ink); }
/* selected pill glows softly in its own status color */
.status-pill.is-on { color: var(--ink); font-weight: 650; background: var(--surface); }
.status-pill--due.is-on   { border-color: var(--st-due-bar);  box-shadow: 0 0 0 3px rgba(245,158,11,.14), 0 0 14px -3px rgba(245,158,11,.4); }
.status-pill--late.is-on  { border-color: var(--st-late-bar); box-shadow: 0 0 0 3px rgba(239,68,68,.14), 0 0 14px -3px rgba(239,68,68,.4); }
.status-pill--paid.is-on  { border-color: var(--st-paid-bar); box-shadow: 0 0 0 3px rgba(16,185,129,.14), 0 0 14px -3px rgba(16,185,129,.4); }
.status-pill--draft.is-on,
.status-pill--void.is-on  { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(44,92,230,.12), 0 0 14px -3px rgba(44,92,230,.35); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .status-pill { transition: none; } }

/* ===================================================================================
 *  INVOICE LIST — refined + glow (scoped to .inv-table so no other table changes)
 *  Borderless rows, warm hover, status-tinted light, and a hover-revealed action pill.
 *  Every effect is soft LIGHT (diffuse colored shadow), never a neon outline.
 * ================================================================================= */
.inv-table { border-collapse: separate; border-spacing: 0; }
.inv-table thead th { background: transparent; border-bottom: 0; padding-top: 6px; padding-bottom: 12px; }
.inv-table tbody td { border-bottom: 0; padding-top: 15px; padding-bottom: 15px; }
.inv-table tbody tr {
  transition: background .18s var(--ease), box-shadow .22s var(--ease), transform .18s var(--ease);
}
.inv-table tbody tr td:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.inv-table tbody tr td:last-child  { border-radius: 0 var(--r-md) var(--r-md) 0; }
/* hover: lift + warm background + status-tinted shadow (the "glow") */
.inv-table tbody tr:hover { background: var(--surface-2); transform: translateY(-1px); box-shadow: 0 6px 20px -6px rgba(10,31,68,.14); }
.inv-table tbody tr:has(.inv-trk--late):hover { box-shadow: 0 6px 20px -6px rgba(239,68,68,.28); }
.inv-table tbody tr:has(.inv-trk--due):hover  { box-shadow: 0 6px 20px -6px rgba(245,158,11,.26); }
.inv-table tbody tr:has(.inv-trk--paid):hover { box-shadow: 0 6px 20px -6px rgba(16,185,129,.24); }

/* status track: soft always-on colored halo */
.inv-table .inv-trk--late .inv-trk__bar { filter: drop-shadow(0 0 5px rgba(239,68,68,.42)); }
.inv-table .inv-trk--due  .inv-trk__bar { filter: drop-shadow(0 0 5px rgba(245,158,11,.38)); }
.inv-table .inv-trk--paid .inv-trk__bar { filter: drop-shadow(0 0 5px rgba(16,185,129,.38)); }

/* actions live IN the Actions column, always visible, as one segmented pill group —
   a single deliberate control rather than seven scattered icons. Thin dividers set the
   money action (record payment) and the destructive action (delete) apart from the
   neutral middle. */
.inv-table td.row-acts { text-align: right; white-space: nowrap; }
.row-actgrp {
  display: inline-flex; align-items: center; gap: 1px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 3px;
  transition: box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.inv-table tbody tr:hover .row-actgrp { border-color: var(--line-strong); box-shadow: var(--lift-1); }
.row-actgrp .row-act { width: 32px; height: 32px; border-radius: var(--r-pill); color: var(--ink-2); }
.row-actgrp .row-act:hover:not(:disabled) { background: var(--surface); box-shadow: var(--lift-1); color: var(--ink); }
.row-actgrp .row-act--green { color: var(--st-paid-ink); }
.row-actgrp .row-act--wa    { color: #1DA850; }
.row-actgrp .row-act--red   { color: var(--st-late-ink); }
.row-actgrp .row-act--green:hover:not(:disabled) { background: var(--positive-wash); box-shadow: 0 0 12px -3px rgba(16,185,129,.45); }
.row-actgrp .row-act--wa:hover:not(:disabled)    { background: rgba(37,211,102,.12); box-shadow: 0 0 12px -3px rgba(37,211,102,.45); }
.row-actgrp .row-act--red:hover:not(:disabled)   { background: var(--critical-wash); box-shadow: 0 0 12px -3px rgba(239,68,68,.45); }
.row-actgrp__sep { width: 1px; height: 18px; background: var(--line); margin: 0 3px; flex: 0 0 auto; }

/* the Number cell doubles as a quick selection target — a subtle cue on hover */
.inv-table td.inv-numcell { cursor: pointer; border-radius: var(--r-sm); transition: background .15s var(--ease); }
.inv-table td.inv-numcell:hover { background: var(--accent-wash); }
.inv-table tbody tr.is-sel td.inv-numcell { background: var(--accent-wash); }

/* browsers without :has() still get the refined look, just no status-tinted shadow */
@supports not (selector(:has(*))) {
  .inv-table tbody tr:hover { box-shadow: 0 6px 20px -6px rgba(10,31,68,.16); }
}

@media (prefers-reduced-motion: reduce) {
  .inv-table tbody tr, .row-actgrp { transition: none !important; }
  .inv-table tbody tr:hover { transform: none; }
}

/* Skeleton loaders */
.skeleton {
  background: linear-gradient(90deg, var(--surface-sunken) 25%, #E9E9EF 37%, var(--surface-sunken) 63%);
  background-size: 400% 100%; border-radius: var(--r-sm); animation: shimmer 1.3s ease-in-out infinite;
}
.skeleton--label { height: 12px; width: 55%; margin-bottom: 12px; }
.skeleton--value { height: 26px; width: 78%; }
.skeleton--row   { height: 18px; width: 100%; margin: 14px 0; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* =====================================================================================
 *  9. MODALS, TOASTS
 * ===================================================================================== */
.ios-modal {
  border: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  background: var(--surface); overflow: hidden;
}
.ios-modal .modal-header { border-bottom: 1px solid var(--separator); padding: var(--sp-5); }
.ios-modal .modal-title { font-size: 1.1rem; }
.ios-modal .modal-body { padding: var(--sp-5); }
.ios-modal .modal-footer { border-top: 1px solid var(--separator); padding: var(--sp-4) var(--sp-5); gap: var(--sp-2); }
/* Modal backdrop — frosted glass. The frozen page shows through, softly blurred, so a
   sheet reads as sitting *over* your content rather than on a flat grey plate. Kept to a
   moderate radius: the page behind is static while a sheet is open, so there's no
   per-frame re-composite cost like there would be over scrolling content. */
.modal-backdrop.show {
  background: rgba(0, 0, 0, 0.30);
  opacity: 1;
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
}
/* Older engines without backdrop-filter fall back to a slightly deeper scrim so there's
   still clear separation between the sheet and the page. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .modal-backdrop.show { background: rgba(0, 0, 0, 0.46); }
}

.toast-stack {
  position: fixed; z-index: 2000; right: var(--sp-5); bottom: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2); max-width: 360px;
}

/* =====================================================================================
 *  10. BOOTSTRAP OVERRIDES  &  RESPONSIVE
 * ===================================================================================== */
.form-control, .form-select {
  border: 1px solid var(--separator); border-radius: var(--r-md);
  padding: 10px 12px; font-size: 0.92rem; background: var(--surface); color: var(--text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-control:focus, .form-select:focus {
  border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); outline: none;
}
.form-control::placeholder { color: var(--text-tertiary); }

.btn-close:focus { box-shadow: 0 0 0 4px var(--blue-soft); }

.dropdown-menu { --bs-dropdown-border-color: var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); }

/* Bootstrap color utility remaps toward the iOS palette */
.text-danger { color: var(--red) !important; }
.text-success { color: var(--green) !important; }

/* Tablet / mobile: sidebar becomes an off-canvas drawer */
@media (max-width: 991px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }
  .topbar__menu-btn { display: inline-flex; align-items: center; }
  .topbar__brand-text { display: none; }
  .app-sidebar {
    position: fixed; top: 0; left: 0; z-index: 1040;
    height: 100vh; width: 84vw; max-width: 300px;
    padding-top: calc(var(--topbar-h) + var(--sp-3));
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease);
    box-shadow: var(--shadow-lg);
  }
  .app-sidebar.is-open { transform: translateX(0); }
}

@media (max-width: 575px) {
  .app-main { padding: var(--sp-4); }
  .topbar__search { display: none; }        /* free up room on phones */
  .user-chip__meta { display: none; }
  .conn-pill__label { display: none; }
  .conn-pill { padding: 6px; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* =====================================================================================
 *  11. NATIVE APP SHELL — install banner + standalone hardening
 * ===================================================================================== */

/* Remove the grey tap flash everywhere (app-like feel) */
a, button, .nav-item, .user-chip, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* Install / add-to-home banner */
.pwa-install {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 2500; display: flex; align-items: center; gap: 12px;
  width: calc(100% - 32px); max-width: 440px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 12px 14px;
  animation: rise var(--dur) var(--ease);
}
.pwa-install__icon { width: 44px; height: 44px; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); flex: 0 0 auto; }
.pwa-install__text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pwa-install__text strong { font-size: 0.92rem; color: var(--text); }
.pwa-install__text span { font-size: 0.8rem; color: var(--text-secondary); }
.pwa-install__cta { flex: 0 0 auto; padding: 8px 16px; }
.pwa-install__close { flex: 0 0 auto; border: 0; background: transparent; color: var(--text-tertiary); font-size: 1.05rem; cursor: pointer; padding: 4px; border-radius: var(--r-md); }
.pwa-install__close:hover { background: var(--surface-sunken); color: var(--text); }

/* =====================================================================================
 *  GLOBAL UI LOCK — the single biggest thing that separates a native app from a web page.
 *  Chrome, labels, buttons, nav and headings are NOT selectable: tapping, holding or
 *  dragging never highlights stray words. Applies everywhere (browser and installed),
 *  because the app should feel the same in both.
 *
 *  Two deliberate exceptions:
 *    1. INPUT  — anything the user types into must stay fully selectable/editable.
 *    2. DATA   — real business data (invoice numbers, amounts, emails, addresses,
 *                table cells, notes) stays copyable. Mark extra spots with
 *                class="selectable" or data-selectable.
 * =================================================================================== */
html, body { overscroll-behavior: none; }
body {
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
  -webkit-touch-callout: none;          /* no long-press callout menu */
  -webkit-tap-highlight-color: transparent;
}

/* 1 — INPUT EXCEPTION (crucial: never lock what people type into) */
input, textarea, select, [contenteditable], [contenteditable] * {
  -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
  -webkit-touch-callout: default;
}

/* 2 — DATA EXCEPTION (business data must stay copyable) */
.data-table td,
.selectable, [data-selectable],
.inv-doc,
.notif-sub,
.ip-bank-grid b {
  -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
  -webkit-touch-callout: default;
}

/* Images and icons are never draggable — dragging a logo out of the window is a web tell */
img, svg, .bi, .workspace-chip__logo, .abt-hero__icon, .pwa-banner__icon {
  -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; user-drag: none;
}
img { pointer-events: auto; }

/* Native-feeling scroll + no text cursor over chrome */
button, .nav-item, .user-chip, [role="button"], .set-tab, .ver-chip { cursor: pointer; }

/* Installed mode: also kill the rubber-band and native context menu entirely */
html.is-standalone, html.is-standalone body { overscroll-behavior: none; overflow-x: hidden; }

/* =====================================================================================
 *  DARK MODE — a true dark palette (not an inversion). Applied by js/core/theme.js via
 *  <html data-theme="dark">. Every surface, hairline, glass and shadow is re-tuned for
 *  low light; brand colors are lifted slightly so they stay vivid on dark backgrounds.
 * =================================================================================== */
html[data-theme="dark"] {
  /* A variant, not an inversion. Surfaces stay blue-black so the navy identity
     survives; the accent lifts in luminance so it still reads on a dark field. */
  --paper:           #0A0F1C;
  --bg:              #0A0F1C;
  --surface:         #101827;
  --surface-2:       #141D2E;
  --surface-sunken:  #1A2437;
  --sunken:          #1A2437;

  --ink:             #EEF2F9;
  --text:            #EEF2F9;
  --ink-2:           #9AA8C4;
  --text-secondary:  #9AA8C4;
  --ink-3:           #6B7A99;
  --text-tertiary:   #6B7A99;

  --accent:          #6690FF;
  --blue:            #6690FF;
  --accent-press:    #7FA2FF;
  --blue-hover:      #7FA2FF;
  --accent-wash:     rgba(102, 144, 255, .14);
  --blue-soft:       rgba(102, 144, 255, .14);

  --positive:        #34D399;
  --green:           #34D399;
  --positive-wash:   rgba(52, 211, 153, .13);
  --attention:       #FBA94C;
  --amber:           #FBA94C;
  --attention-wash:  rgba(251, 169, 76, .13);
  --critical:        #FB7185;
  --red:             #FB7185;
  --critical-wash:   rgba(251, 113, 133, .13);
  --purple:          #A78BFA;
  --teal:            #22D3EE;

  --line:            rgba(238, 242, 249, .10);
  --separator:       rgba(238, 242, 249, .10);
  --line-strong:     rgba(238, 242, 249, .18);
  --separator-strong:rgba(238, 242, 249, .18);
  --border:          rgba(238, 242, 249, .12);

  --glass-bg:        rgba(16, 24, 39, .78);

  --lift-1:     0 1px 2px rgba(0,0,0,.40);
  --shadow-sm:  0 1px 2px rgba(0,0,0,.40);
  --lift-2:     0 4px 12px -2px rgba(0,0,0,.50);
  --shadow-md:  0 4px 12px -2px rgba(0,0,0,.50);
  --lift-3:     0 16px 32px -8px rgba(0,0,0,.60);
  --shadow-lg:  0 16px 32px -8px rgba(0,0,0,.60);
  --shadow-glass: 0 1px 0 rgba(255,255,255,.05) inset, 0 1px 20px rgba(0,0,0,.35);

  color-scheme: dark;
}

/* Form controls need explicit surfaces in dark */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background-color: var(--surface-sunken);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .form-control::placeholder { color: var(--text-tertiary); }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
  background-color: var(--surface-sunken);
  color: var(--text);
}
/* Native pickers (date/time/color) render legibly */
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="number"] { color-scheme: dark; }

/* Zebra rows / hover states */
html[data-theme="dark"] .data-table tbody tr:hover { background: var(--surface-2); }

/* The invoice preview is paper — it stays light in both themes */
html[data-theme="dark"] .inv-doc { box-shadow: var(--lift-3); }

/* Smooth the switch between themes */
html.theme-anim, html.theme-anim body,
html.theme-anim .app-shell, html.theme-anim .ios-card,
html.theme-anim .topbar, html.theme-anim .sidebar {
  transition: background-color .28s ease, color .28s ease, border-color .28s ease;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-anim, html.theme-anim body, html.theme-anim .app-shell,
  html.theme-anim .ios-card, html.theme-anim .topbar, html.theme-anim .sidebar { transition: none; }
}

/* Derived "Amount paid" display in the invoice editor (payments ledger owns the value) */
.inv-paid-box {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-sunken); padding: 8px 8px 8px 14px;
}
.inv-paid-box__v { font-weight: 700; font-size: 1rem; color: var(--text); font-variant-numeric: tabular-nums; }
.inv-paid-box__btn { font-size: .82rem; font-weight: 600; white-space: nowrap; }

/* ===================================================================================
 *  PAYMENTS SECTION
 * ================================================================================= */
/* =====================================================================================
 *  PAYMENTS — KPI MODULES   (v2.12.0)
 *  Standalone cards, not boxes with a number in them. Each carries its own trend behind
 *  the figure so the number arrives with context, and the third does actual work rather
 *  than reporting: it summarises collection state and offers the follow-up.
 * =================================================================================== */
/* ===================================================================================
 *  PAYMENTS — Phase 3 showpiece (cash-flow hero + elevated cards), calm-but-alive
 * ================================================================================= */
.pv-cash { margin-bottom: 18px; }
.cash {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--lift-1);
  padding: 22px 24px; overflow: hidden;
  transition: box-shadow var(--dur) var(--ease);
}
.cash:hover { box-shadow: var(--lift-2); }
.cash__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.cash__cap { font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.cash__val { font-family: var(--font-ledger); font-size: 2.5rem; font-weight: 500; letter-spacing: -.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.cash__sub { font-size: .85rem; color: var(--ink-2); margin: 10px 0 0; }
.cash__sub b.up { color: var(--st-paid-ink); font-weight: 650; }
.cash__sub b.down { color: var(--st-late-ink); font-weight: 650; }
.cash__range { display: flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px; flex: 0 0 auto; }
.cash__range button { font: inherit; font-size: .78rem; font-weight: 550; color: var(--ink-3); background: transparent; border: 0; border-radius: var(--r-pill); padding: 6px 13px; cursor: pointer; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.cash__range button:hover { color: var(--ink); }
.cash__range button.on { color: var(--accent); background: var(--surface); box-shadow: var(--lift-1); }
.cash__chart { margin-top: 14px; }
.cash__svg { display: block; height: 168px; }
/* during a range morph the fill briefly lifts its glow — the flow feels alive */
.cash__fill { transition: opacity .3s var(--ease); }
.cash__fill.is-morphing { filter: drop-shadow(0 0 8px rgba(44,92,230,.35)); }
.cash__line { transition: filter .3s var(--ease); }
.cash__range button { position: relative; }
.cash__x { display: flex; justify-content: space-between; font-size: .68rem; color: var(--ink-3); margin-top: 6px; }
@media (max-width: 640px) {
  .cash__top { flex-direction: column; }
  .cash__val { font-size: 2rem; }
  .cash__svg { height: 130px; }
}

/* history cards: status-tinted glow on hover, warm lift (elevation of the existing .pvg) */
.pvg { transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.pvg:hover { transform: translateY(-1px); box-shadow: var(--lift-2); }
.pvg:has(.badge-paid):hover { box-shadow: 0 8px 24px -8px rgba(16,185,129,.30); }
.pvg:has(.badge-overdue):hover { box-shadow: 0 8px 24px -8px rgba(239,68,68,.28); }
@supports not (selector(:has(*))) { .pvg:hover { box-shadow: var(--lift-2); } }
@media (prefers-reduced-motion: reduce) { .cash, .pvg { transition: none; } .pvg:hover { transform: none; } }

.pv-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 14px; margin-bottom: 20px;
}

.pv-kpi {
  --kpi: var(--accent);
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 18px 18px;
  box-shadow: 0 1px 2px rgba(10, 31, 68, .05);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.pv-kpi:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: 0 1px 2px rgba(10, 31, 68, .05), 0 10px 26px -10px rgba(10, 31, 68, .22);
}
.pv-kpi--good   { --kpi: var(--st-paid-bar); }
.pv-kpi--accent { --kpi: var(--accent); }
.pv-kpi--state  { --kpi: var(--st-due-bar); }
.pv-kpi--muted  { --kpi: var(--text-tertiary); }
.pv-kpi--state.is-alert { --kpi: var(--st-late-bar); border-color: rgba(239, 68, 68, .28); }

/* The sparkline sits behind the content, bottom-aligned, so the figure stays readable
   and the trend is peripheral — glanceable, never competing with the number. */
.pv-kpi__spark {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46px;
  color: var(--kpi); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 100%);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 100%);
}
.pv-spark { width: 100%; height: 100%; display: block; }

.pv-kpi__h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; position: relative; }
.pv-kpi__ico {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-size: .8rem; color: var(--kpi); background: color-mix(in srgb, var(--kpi) 12%, transparent);
}
.pv-kpi__l { font-size: .76rem; font-weight: 550; color: var(--text-secondary); letter-spacing: .002em; }
.pv-kpi__v {
  position: relative; margin: 0; font-family: var(--font-ledger);
  font-size: 1.5rem; font-weight: 600; letter-spacing: -.022em;
  color: var(--text); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.pv-kpi__s { position: relative; margin: 4px 0 0; font-size: .74rem; color: var(--text-tertiary); }
.pv-kpi__s--ok { color: var(--st-paid-ink); font-weight: 550; display: flex; align-items: center; gap: 5px; }

/* ---- collection state: three counts, one of which must be impossible to miss ---- */
.pv-state { position: relative; display: flex; gap: 16px; margin: 2px 0 12px; }
.pv-state__i { display: flex; flex-direction: column; line-height: 1.15; }
.pv-state__i b {
  font-family: var(--font-ledger); font-size: 1.32rem; font-weight: 600;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.pv-state__i em { font-style: normal; font-size: .68rem; color: var(--text-tertiary); margin-top: 2px; }
.pv-state__i--paid b { color: var(--st-paid-ink); }
.pv-state__i--due  b { color: var(--st-due-ink); }
.pv-state__i--late b { color: var(--st-late-ink); }
/* Overdue is the only count that is allowed to shout. */
.pv-kpi--state.is-alert .pv-state__i--late b { text-shadow: 0 0 16px rgba(239, 68, 68, .35); }

.pv-followup {
  position: relative; width: 100%; display: inline-flex; align-items: center;
  justify-content: center; gap: 7px; padding: 9px 14px; border: 0; cursor: pointer;
  border-radius: 10px; font-size: .8rem; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #EF4444, #DC2626);
  box-shadow: 0 1px 2px rgba(220, 38, 38, .3), 0 6px 16px -6px rgba(220, 38, 38, .5);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.pv-followup:hover {
  transform: translateY(-1px); filter: saturate(1.08);
  box-shadow: 0 1px 2px rgba(220, 38, 38, .3), 0 10px 22px -6px rgba(220, 38, 38, .62);
}
.pv-followup:active { transform: translateY(0); }

/* ---- segmented control: one indicator that moves ---- */
.pv-seg {
  position: relative; display: flex; gap: 2px; padding: 3px; margin: 12px 0 4px;
  background: var(--surface-sunken); border: 1px solid var(--line);
  border-radius: 11px; overflow-x: auto; scrollbar-width: none;
}
.pv-seg::-webkit-scrollbar { display: none; }
.pv-seg__ind {
  position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; opacity: 0;
  border-radius: 8px; background: var(--surface); pointer-events: none;
  box-shadow: 0 1px 2px rgba(10, 31, 68, .10), 0 0 0 1px rgba(10, 31, 68, .05);
  transition: transform .24s var(--ease), width .24s var(--ease), opacity .18s var(--ease);
}
.pv-chip {
  position: relative; z-index: 1; flex: 0 0 auto; border: 0; background: transparent;
  padding: 7px 13px; border-radius: 8px; cursor: pointer; white-space: nowrap;
  font-size: .81rem; font-weight: 550; color: var(--text-secondary);
  transition: color .18s var(--ease);
}
.pv-chip:hover { color: var(--text); }
.pv-chip.is-on { color: var(--text); font-weight: 650; }

/* ---- row action menu: glass, because it floats over content ---- */
.pvg-more {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid transparent; background: transparent; cursor: pointer;
  color: var(--text-tertiary); display: grid; place-items: center; font-size: .9rem;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.pvg-more:hover { background: var(--surface-sunken); border-color: var(--line); color: var(--text); }
.pvg-more[aria-expanded="true"] { background: var(--accent-wash); color: var(--accent); border-color: transparent; }

.pvg-menu {
  position: fixed; z-index: 5200; width: 208px; padding: 5px;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 2px rgba(10, 31, 68, .06), 0 14px 34px -8px rgba(10, 31, 68, .26);
  opacity: 0; transform: translateY(-5px) scale(.97); transform-origin: top right;
  pointer-events: none; transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.pvg-menu.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.pvg-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 0; background: transparent; cursor: pointer; padding: 9px 11px;
  border-radius: 8px; font-size: .82rem; font-weight: 500; color: var(--text);
  transition: background .14s var(--ease);
}
.pvg-menu button > i { color: var(--text-tertiary); font-size: .88rem; }
.pvg-menu button:hover { background: rgba(10, 31, 68, .06); }
.pvg-menu button:hover > i { color: var(--accent); }

html[data-theme="dark"] .pvg-menu {
  background: rgba(28, 28, 34, .82); border-color: rgba(255, 255, 255, .10);
  box-shadow: 0 14px 34px -8px rgba(0, 0, 0, .6);
}
html[data-theme="dark"] .pvg-menu button:hover { background: rgba(255, 255, 255, .07); }
html[data-theme="dark"] .pv-kpi:hover { box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .pv-seg__ind { box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08); }

@media (prefers-reduced-motion: reduce) {
  .pv-kpi, .pv-seg__ind, .pv-chip, .pvg-menu, .pvg-more, .pv-followup { transition: none !important; }
  .pv-kpi:hover, .pv-followup:hover { transform: none; }
}
.pv-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pv-search { position: relative; flex: 1; min-width: 200px; }
.pv-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); pointer-events: none; }
.pv-search input { padding-left: 36px; }
.pv-count { font-size: .8rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; margin-left: auto; }
.pv-method { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--text-secondary); }
.pv-method > i { color: var(--blue); }
.pv-amt { font-weight: 700; color: var(--green); }
.pv-picker { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; }
.pv-pick { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left;
  border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-md); padding: 11px 14px; cursor: pointer; transition: all .14s; }
.pv-pick:hover { border-color: var(--green); background: var(--surface-sunken); }
.pv-pick__l strong, .pv-pick__r strong { display: block; font-size: .9rem; color: var(--text); }
.pv-pick__l span, .pv-pick__r span { display: block; font-size: .76rem; color: var(--text-tertiary); }
.pv-pick__r { text-align: right; }
.pv-pick__r strong { color: var(--green); }

/* ===================================================================================
 *  RENDER PERFORMANCE
 *  Modals and popovers are isolated so their internal updates (a typing amount field,
 *  a moving progress bar) can never force layout or paint work on the page behind them.
 * ================================================================================= */
.modal-content.hm-modal { contain: layout paint; }
.notif-panel, .vup { contain: layout paint; }

/* The payment progress bar animates width; promote just that element to its own layer
   so the browser moves it on the GPU instead of repainting the modal. */
.pay-bar__new { will-change: width; }

/* Honour reduced-motion everywhere (also disables the decorative infinite loops). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ===================================================================================
 *  INVOICE TABS — Active / Completed / Cancelled / All
 * ================================================================================= */
/* =====================================================================================
 *  INVOICE TABS  —  lifecycle rail + one focused figure   (v2.10.0)
 *  Replaces four competing summary cards. The rail is a quiet segmented control; the
 *  number that matters sits under it and changes with the tab, so there is one thing
 *  to read rather than four to compare.
 * =================================================================================== */
.inv-tabs { margin-bottom: 18px; }

.inv-tabs__rail {
  display: flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: var(--r-lg);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.inv-tabs__rail::-webkit-scrollbar { display: none; }

.inv-tab {
  /* Justified: each tab takes an equal share so the rail reads as one complete
     control rather than a cluster of pills with dead space to the right. flex-basis 0
     with grow makes the shares equal regardless of label length; on a narrow screen
     the min-width floor kicks in and the rail scrolls instead of crushing. */
  flex: 1 1 0; min-width: max-content; justify-content: center;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border: 0; border-radius: calc(var(--r-lg) - 4px);
  background: transparent; color: var(--text-secondary);
  font-size: .85rem; font-weight: 550; white-space: nowrap; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.inv-tab > i { font-size: .9rem; opacity: .75; }
.inv-tab:hover { background: rgba(10, 31, 68, .045); color: var(--text); }
.inv-tab.is-empty { opacity: .5; }
.inv-tab.is-empty:hover { opacity: .85; }

/* The active pill lifts onto its own surface — the Mercury move: one raised element,
   no borders shouting, colour carried by the count rather than the whole chip. */
.inv-tab.is-active {
  background: var(--surface); color: var(--text); font-weight: 650;
  box-shadow: 0 1px 2px rgba(10, 31, 68, .10), 0 0 0 1px rgba(10, 31, 68, .05);
  opacity: 1;
}
.inv-tab.is-active > i { opacity: 1; color: var(--accent); }
/* Tabs borrow the same ramp, so the tab you are on and the rows beneath it agree. */
.inv-tab--due.is-active > i       { color: var(--st-due-ink); }
.inv-tab--overdue.is-active > i   { color: var(--st-late-ink); }
.inv-tab--paid.is-active > i      { color: var(--st-paid-ink); }
.inv-tab--cancelled.is-active > i { color: var(--st-void-ink); }

.inv-tab__n {
  min-width: 19px; padding: 0 5px; height: 19px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(10, 31, 68, .07); color: var(--text-secondary);
  font-size: .7rem; font-weight: 650; font-variant-numeric: tabular-nums;
}
.inv-tab.is-active .inv-tab__n { background: var(--accent-wash); color: var(--accent); }
.inv-tab--due.is-active .inv-tab__n      { background: rgba(245, 158, 11, .14); color: var(--st-due-ink); }
.inv-tab--overdue.is-active .inv-tab__n { background: rgba(239, 68, 68, .13);  color: var(--st-late-ink); }
.inv-tab--paid.is-active .inv-tab__n    { background: rgba(16, 185, 129, .14); color: var(--st-paid-ink); }

/* ---- the one figure that matters ---- */
.inv-tabs__summary {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  padding: 14px 2px 0;
}
.inv-sum__figure {
  font-family: var(--font-ledger); font-size: 1.55rem; font-weight: 600;
  letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums;
}
.inv-sum__figure--overdue { color: var(--st-late-ink); }
.inv-sum__figure--paid    { color: var(--st-paid-ink); }
.inv-sum__caption { font-size: .82rem; color: var(--text-tertiary); }

.inv-sum__nudge {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; border: 1px solid transparent;
  background: rgba(239, 68, 68, .11); color: var(--st-late-ink);
  font-size: .78rem; font-weight: 600; cursor: pointer;
  font-variant-numeric: tabular-nums; transition: border-color .16s;
}
.inv-sum__nudge:hover { border-color: var(--st-late-bar); }

/* =====================================================================================
 *  STATUS TRACK  —  Pre-invoice -> Due -> Paid          (recoloured v2.11.1)
 *  One colour family per track, set once via --tone on the wrapper. Amber means payment
 *  is expected, red means it is late, green means it is settled. Those three are the
 *  conventions people already read without being taught, so the track uses them and
 *  nothing else — the accent blue was decorative here and carried no meaning.
 *
 *  Two tiers per status: --tone for the bar, --ink for the label. The vivid amber that
 *  works at 5px would fail contrast as small bold text, so the label uses a deeper shade
 *  of the same hue rather than a different colour.
 * =================================================================================== */
/* Named --trk-* on purpose. These were --tone / --ink, and --ink is ALREADY a global
   token (the app's primary text navy). Setting it here quietly redefined it for every
   descendant of a track — harmless today because a track holds only a bar and a label,
   but a trap for whoever next puts something inside one. */
.inv-trk--draft { --trk-tone: var(--st-draft-bar); --trk-ink: var(--st-draft-ink); }
.inv-trk--due   { --trk-tone: var(--st-due-bar);   --trk-ink: var(--st-due-ink);   }
.inv-trk--late  { --trk-tone: var(--st-late-bar);  --trk-ink: var(--st-late-ink);  }
.inv-trk--paid  { --trk-tone: var(--st-paid-bar);  --trk-ink: var(--st-paid-ink);  }
.inv-trk--void  { --trk-tone: var(--st-void-bar);  --trk-ink: var(--st-void-ink);  }

/* NOTE: this rule deliberately does NOT declare --tone / --ink.
   It used to, and because it sits AFTER the .inv-trk--* modifiers and has identical
   specificity (one class each), it won — pinning every track to the grey draft tone no
   matter which modifier the markup carried. The fallbacks now live inside each var()
   below instead, so there is no competing declaration and source order cannot matter. */
.inv-trk {
  display: inline-flex; flex-direction: column; gap: 6px; min-width: 96px;
}

.inv-trk__bar { position: relative; display: flex; gap: 4px; }

.inv-trk__seg {
  position: relative; width: 22px; height: 5px; border-radius: 3px;
  background: var(--st-rail); overflow: hidden;
  transition: background .22s var(--ease), opacity .22s var(--ease);
}

/* Stages already passed: the same hue, stepped back, so the eye reads one journey
   rather than a row of unrelated chips. */
.inv-trk__seg.is-done { background: var(--trk-tone, var(--st-draft-bar)); opacity: .32; }
.inv-trk__seg.is-now  { background: var(--trk-tone, var(--st-draft-bar)); }
.inv-trk__seg.is-void { background: var(--st-void-bar); opacity: .30; }

.inv-trk__fill { position: absolute; inset: 0 auto 0 0; background: var(--st-paid-bar); opacity: .5; }

/* Cancelled: literally struck out. A line straight through the track and the label,
   in grey, so a voided invoice reads as voided from across the room. */
.inv-trk--void .inv-trk__bar::after {
  content: ""; position: absolute; left: -3px; right: -3px; top: 50%;
  height: 1.5px; border-radius: 1px; background: var(--st-void-ink);
  transform: translateY(-50%);
}

.inv-trk__label {
  font-size: .78rem; font-weight: 600; color: var(--trk-ink, var(--st-draft-ink)); white-space: nowrap;
  letter-spacing: -.005em;
}

/* =====================================================================================
 *  STATUS MOTION  (v2.11.2)
 *  -------------------------------------------------------------------------------------
 *  Motion here is doing a job, not decorating. Three rules kept it from becoming noise:
 *
 *    1. Entrance animations run ONCE per render and are short (<420ms all in). The list
 *       re-renders on every filter change, so anything longer would feel like lag.
 *    2. Only ONE thing loops — the overdue glow. If everything pulses, nothing stands
 *       out, and the whole point is that late money should catch your eye first.
 *    3. Everything animates transform/opacity only, so it runs on the compositor and
 *       cannot cause layout thrash on a long invoice table.
 * =================================================================================== */

@keyframes trkSegIn {
  from { transform: scaleX(.15); opacity: 0; }
  to   { transform: scaleX(1);   opacity: 1; }
}

/* Segments sweep in left-to-right, so the eye travels the lifecycle in the direction it
   actually runs. 45ms apart — enough to read as a sequence, quick enough not to wait. */
.inv-trk__seg {
  transform-origin: left center;
  animation: trkSegIn .34s cubic-bezier(.22, 1, .36, 1) backwards;
}
.inv-trk__seg:nth-child(1) { animation-delay: 0ms; }
.inv-trk__seg:nth-child(2) { animation-delay: 45ms; }
.inv-trk__seg:nth-child(3) { animation-delay: 90ms; }

/* ---- OVERDUE: the one thing that keeps moving ---------------------------------- */
@keyframes lateGlow {
  0%, 100% { box-shadow: 0 0 5px 0 rgba(239, 68, 68, .55); }
  50%      { box-shadow: 0 0 11px 2px rgba(239, 68, 68, .85); }
}
.inv-trk--late .inv-trk__seg.is-now {
  animation: trkSegIn .34s cubic-bezier(.22, 1, .36, 1) backwards,
             lateGlow 2.1s ease-in-out 420ms infinite;
}
/* A quiet halo behind the label too, so the row reads as urgent at a glance even when
   the bar is off to the side of a wide table. */
.inv-trk--late .inv-trk__label { text-shadow: 0 0 14px rgba(239, 68, 68, .28); }

/* ---- PAID: a single sheen, then stillness -------------------------------------- */
@keyframes paidSheen {
  from { transform: translateX(-120%); }
  to   { transform: translateX(320%); }
}
.inv-trk--paid .inv-trk__bar { position: relative; overflow: hidden; border-radius: 3px; }
.inv-trk--paid .inv-trk__bar::after {
  content: ""; position: absolute; inset: 0; width: 34%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .78), transparent);
  animation: paidSheen 1.05s cubic-bezier(.4, 0, .2, 1) 260ms 1 backwards;
}
.inv-trk--paid .inv-trk__seg.is-now { box-shadow: 0 0 8px 0 rgba(16, 185, 129, .5); }

/* ---- PARTIAL: the fill grows to its true share --------------------------------- */
@keyframes fillGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.inv-trk__fill {
  transform-origin: left center;
  animation: fillGrow .52s cubic-bezier(.22, 1, .36, 1) 150ms backwards;
}

/* ---- the overdue nudge chip breathes in time with the tracks -------------------- */
@keyframes nudgeBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .32); }
  50%      { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
}
.inv-sum__nudge { animation: nudgeBreathe 2.4s ease-in-out infinite; }
.inv-sum__nudge > i { animation: none; }

/* ---- tab counts acknowledge a change ------------------------------------------- */
@keyframes countPop {
  0%   { transform: scale(.72); opacity: .35; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.inv-tab__n { animation: countPop .3s cubic-bezier(.22, 1, .36, 1); }

/* ---- the headline figure settles in -------------------------------------------- */
@keyframes figureIn {
  from { transform: translateY(5px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
.inv-sum__figure { animation: figureIn .3s cubic-bezier(.22, 1, .36, 1); }

/* Honour the OS setting completely — including the looping glow, which is exactly the
   kind of thing motion sensitivity exists to stop. Colour still carries every meaning. */
@media (prefers-reduced-motion: reduce) {
  .inv-trk__seg,
  .inv-trk--late .inv-trk__seg.is-now,
  .inv-trk--paid .inv-trk__bar::after,
  .inv-trk__fill,
  .inv-sum__nudge,
  .inv-tab__n,
  .inv-sum__figure { animation: none !important; }
  .inv-trk--late .inv-trk__label { text-shadow: none; }
}
.inv-trk--void .inv-trk__label {
  text-decoration: line-through;
  text-decoration-color: var(--st-void-ink);
  text-decoration-thickness: 1.5px;
}

@media (prefers-reduced-motion: reduce) {
  .inv-tab, .inv-trk__seg { transition: none; }
}

/* Dark mode: the two hover/count washes above are hardcoded ink-on-light, so they
   vanish against a dark surface. Restate them rather than leaving invisible chips. */
html[data-theme="dark"] .inv-tab:hover      { background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .inv-tab__n         { background: rgba(255, 255, 255, .09); }
html[data-theme="dark"] .inv-tab.is-active  { box-shadow: 0 1px 2px rgba(0, 0, 0, .40), 0 0 0 1px rgba(255, 255, 255, .08); }
/* The rail colour is now a token (--st-rail) with its own dark value, so the blanket
   override that used to live here would win over the .is-done / .is-now states and
   flatten every track to grey. Removed deliberately — .is-dead no longer exists either. */

/* ===================================================================================
 *  INVOICE FILTERS + PAYMENT TIMELINE
 * ================================================================================= */
.toolbar--filters { flex-wrap: wrap; gap: 10px; }
.inv-filter-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 1; }
/* The selects, the search field and the date trigger are one row of peers, so they
   share one visual language: hairline border, 9px vertical rhythm, accent ring on
   focus. Previously each came from a different place (Bootstrap form-select, the
   topbar search, the picker) and it showed. */
.inv-f {
  max-width: 172px; font-size: .85rem; font-weight: 500;
  padding: 9px 30px 9px 13px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background-color: var(--surface); color: var(--text);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.inv-f:hover { border-color: var(--line-strong); }
.inv-f:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(44,92,230,.12), 0 0 16px -2px rgba(44,92,230,.30);
  outline: none;
}
.inv-f.is-set {
  border-color: var(--accent); color: var(--accent); font-weight: 600;
  background-color: var(--accent-wash);
}

.inv-filter-bar .topbar__search-input {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); padding: 9px 13px 9px 36px; font-size: .85rem;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.inv-filter-bar .topbar__search-input:hover { border-color: var(--line-strong); }
.inv-filter-bar .topbar__search-input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); outline: none;
}

.inv-clear {
  font-size: .8rem; font-weight: 600; color: var(--critical); white-space: nowrap;
  padding: 9px 12px; border-radius: var(--r-md);
  transition: background .16s var(--ease);
}
.inv-clear:hover { background: var(--critical-wash); }

html[data-theme="dark"] .inv-f:hover,
html[data-theme="dark"] .inv-filter-bar .topbar__search-input:hover { border-color: rgba(255,255,255,.22); }

.pay-tl { display: flex; flex-direction: column; gap: 2px; }
.pay-tl__empty {
  display: flex; align-items: center; gap: 8px; padding: 14px; border: 1px dashed var(--border);
  border-radius: var(--r-md); color: var(--text-tertiary); font-size: .83rem; margin: 0;
}
.pay-tl__item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 4px; position: relative; }
.pay-tl__item::before {
  content: ""; position: absolute; left: 17px; top: 34px; bottom: -2px; width: 2px; background: var(--separator);
}
.pay-tl__item:last-child::before { display: none; }
.pay-tl__dot {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(52,199,89,.12); color: var(--green); font-size: .9rem; z-index: 1;
}
.pay-tl__body { flex: 1; min-width: 0; }
.pay-tl__top { display: flex; align-items: baseline; gap: 10px; }
.pay-tl__top strong { font-size: 1rem; color: var(--green); font-variant-numeric: tabular-nums; }
.pay-tl__amt-left { margin-left: auto; font-size: .76rem; color: var(--text-tertiary); }
.pay-tl__meta { font-size: .77rem; color: var(--text-secondary); margin-top: 1px; }
.pay-tl__note { font-size: .76rem; color: var(--text-tertiary); font-style: italic; margin-top: 2px; }

/* Payment timeline — richer metadata rows */
.pay-tl__badge {
  font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--surface-sunken); color: var(--text-secondary); letter-spacing: .01em;
}
.pay-tl__meta > i { font-size: .72rem; margin-right: 3px; opacity: .8; }
.pay-tl__meta--dim { color: var(--text-tertiary); font-size: .73rem; margin-top: 1px; }
.pay-tl__sep { opacity: .5; margin: 0 2px; }

/* Payments table — "when" cell showing business date, weekday and exact entry time */
.pv-when { display: flex; flex-direction: column; line-height: 1.35; }
.pv-when strong { font-size: .86rem; color: var(--text); }
.pv-when > span { font-size: .72rem; color: var(--text-tertiary); }
.pv-when__rec { font-variant-numeric: tabular-nums; opacity: .85; }

/* ===================================================================================
 *  PAYMENT HISTORY — grouped by invoice, transactions nested beneath
 * ================================================================================= */
.pvg { padding: 0; overflow: hidden; }
/* =====================================================================================
 *  PAYMENT HISTORY  —  rebuilt v2.12.1
 *  The progress bar is gone. A 4px stripe under a header is a dashboard cliché, and it
 *  was duplicating information the outstanding figure already states precisely. In its
 *  place: a vertical rail down the transaction list, so a run of payments reads as a
 *  sequence of events against one invoice — which is what it is.
 * =================================================================================== */
.pvg {
  border-radius: 16px; overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.pvg:hover {
  transform: translateY(-2px); border-color: var(--line-strong);
  box-shadow: 0 1px 2px rgba(10, 31, 68, .05), 0 14px 32px -12px rgba(10, 31, 68, .24);
}

.pvg-head {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px 16px; flex-wrap: nowrap;
}
.pvg-head__l { min-width: 0; flex: 1; }
.pvg-head__r { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; margin-left: auto; }

/* ---- Phase-3.1: payment-progress bar + status-tinted glow (advanced, native) ---- */
.pvg { position: relative; overflow: hidden; }
/* a thin status-tinted top edge that lights up on hover — the card "knows" its state */
.pvg::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--line); opacity: 0; transition: opacity .2s var(--ease);
}
.pvg--paid::before { background: linear-gradient(90deg, transparent, var(--st-paid-bar), transparent); }
.pvg--part::before { background: linear-gradient(90deg, transparent, var(--st-due-bar), transparent); }
.pvg--late::before { background: linear-gradient(90deg, transparent, var(--st-late-bar), transparent); }
.pvg:hover::before { opacity: .9; }
.pvg--paid:hover { box-shadow: 0 10px 30px -10px rgba(16,185,129,.32); }
.pvg--part:hover { box-shadow: 0 10px 30px -10px rgba(245,158,11,.30); }
.pvg--late:hover { box-shadow: 0 10px 30px -10px rgba(239,68,68,.30); }
.pvg:active { transform: translateY(0) scale(.997); }

.pvg-prog { padding: 0 20px 14px; }
.pvg-prog__bar { height: 6px; border-radius: var(--r-pill); background: var(--surface-sunken); overflow: hidden; }
.pvg-prog__fill {
  display: block; height: 100%; border-radius: inherit; min-width: 6px;
  transition: width .5s var(--ease);
}
.pvg-prog__fill--paid { background: linear-gradient(90deg, var(--st-paid-bar), #34D399); box-shadow: 0 0 10px -2px rgba(16,185,129,.55); }
.pvg-prog__fill--part { background: linear-gradient(90deg, var(--st-due-bar), #FBBF24); box-shadow: 0 0 10px -2px rgba(245,158,11,.5); }
.pvg-prog__fill--late { background: linear-gradient(90deg, var(--st-late-bar), #F87171); box-shadow: 0 0 10px -2px rgba(239,68,68,.5); }
@media (prefers-reduced-motion: reduce) { .pvg-prog__fill, .pvg::before { transition: none; } }

/* The old 4px stripe. Kept as a no-op rather than deleted so any stale markup during a
   cached-CSS window degrades to nothing instead of a naked coloured bar. */
.pvg-bar, .pvg-bar span { display: none; }

/* ---- the rail ---- */
.pvg-txns { position: relative; padding: 2px 20px 6px 20px; }
.pvg-txns::before {
  content: ""; position: absolute; left: 34px; top: 8px; bottom: 22px; width: 1.5px;
  background: linear-gradient(180deg, var(--line), transparent);
  border-radius: 1px;
}

.pvg-txn {
  position: relative; display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 0; border-bottom: 0;
}
.pvg-txn + .pvg-txn { border-top: 1px solid var(--separator); }

.pvg-txn__ico {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: 29px; height: 29px; border-radius: 50%;
  display: grid; place-items: center; font-size: .78rem;
  background: var(--surface); color: var(--st-paid-ink);
  border: 1.5px solid var(--st-paid-bar);
  box-shadow: 0 0 0 4px var(--surface);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.pvg-txn:hover .pvg-txn__ico {
  transform: scale(1.08);
  box-shadow: 0 0 0 4px var(--surface), 0 0 12px rgba(16, 185, 129, .45);
}

.pvg-txn__main { flex: 1; min-width: 0; }
.pvg-txn__l1 { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.pvg-txn__l1 strong {
  font-family: var(--font-ledger); font-size: 1.02rem; font-weight: 600;
  letter-spacing: -.015em; color: var(--text); font-variant-numeric: tabular-nums;
}
.pvg-txn__method {
  font-size: .66rem; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--surface-sunken); color: var(--text-secondary); letter-spacing: .01em;
}
.pvg-txn__ref { font-size: .71rem; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.pvg-txn__l2 { font-size: .73rem; color: var(--text-tertiary); margin-top: 3px; }
.pvg-txn__note { font-size: .75rem; color: var(--text-tertiary); font-style: italic; margin-top: 3px; }
.pvg-dot { opacity: .45; margin: 0 4px; }

.pvg-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 20px; background: var(--surface-sunken);
  border-top: 1px solid var(--line);
  font-size: .78rem; color: var(--text-tertiary);
}
.pvg-foot strong {
  font-family: var(--font-ledger); font-size: 1rem; font-weight: 600;
  color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.015em;
}

.pvg-num {
  display: block; font-size: 1.02rem; font-weight: 650; color: var(--text);
  text-decoration: none; letter-spacing: -.015em;
  transition: color .16s var(--ease);
}
.pvg-num:hover { color: var(--accent); }
.pvg-cust { display: block; font-size: .8rem; color: var(--text-secondary); margin-top: 2px; }
.pvg-owed { font-size: .76rem; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

html[data-theme="dark"] .pvg:hover { box-shadow: 0 14px 32px -12px rgba(0, 0, 0, .62); }

@media (prefers-reduced-motion: reduce) {
  .pvg, .pvg-txn__ico, .pvg-num { transition: none !important; }
  .pvg:hover { transform: none; }
  .pvg-txn:hover .pvg-txn__ico { transform: none; }
}

/* ===================================================================================
 *  PHASE 4 — deep search, date range, batch selection
 * ================================================================================= */
.toolbar--filters .topbar__search.is-busy .topbar__search-icon { animation: searchPulse .9s ease-in-out infinite; color: var(--blue); }
@keyframes searchPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

@keyframes fadeDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Selection bar */
.inv-selbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 11px 16px; margin-top: 10px; border-radius: var(--r-md);
  background: var(--text); color: var(--surface); box-shadow: var(--shadow-md);
  animation: fadeDown .2s var(--ease); }
.inv-selbar__n { font-size: .86rem; }
.inv-selbar__n strong { font-size: 1rem; }
.inv-selbar__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.inv-selbar .btn-ios-ghost { color: rgba(255,255,255,.7); }
.inv-selbar .btn-ios-ghost:hover { color: #fff; background: rgba(255,255,255,.12); }

/* Checkbox column */
.inv-ck { width: 38px; padding-right: 0 !important; }
.ck { position: relative; display: inline-flex; cursor: pointer; }
.ck input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.ck span { width: 18px; height: 18px; border-radius: var(--r-xs); border: 1.5px solid var(--border);
  background: var(--surface); transition: all .14s; display: block; position: relative; }
.ck input:checked + span { background: var(--blue); border-color: var(--blue); }
.ck input:checked + span::after { content: ""; position: absolute; left: 5px; top: 1.5px;
  width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ck input:indeterminate + span { background: var(--blue); border-color: var(--blue); }
.ck input:indeterminate + span::after { content: ""; position: absolute; left: 3.5px; top: 7px;
  width: 9px; height: 2px; background: #fff; border-radius: var(--r-xs); }
.inv-row.is-sel { background: var(--blue-soft) !important; }

/* Batch progress */
.inv-batch { margin-top: 8px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.inv-batch__bar { height: 6px; border-radius: var(--r-xs); background: var(--surface-sunken); overflow: hidden; }
.inv-batch__bar span { display: block; height: 100%; width: 0; border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--blue), var(--teal)); transition: width .25s ease; }
.inv-batch__t { font-size: .78rem; color: var(--text-secondary); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* ===================================================================================
 *  ENTERPRISE TOOLBAR — the date range now lives in js/core/daterange.js (bespoke
 *  picker with its own scoped styles). The old preset buttons, dual native date
 *  inputs and period dropdown have been purged entirely.
 * ================================================================================= */
/* Selection command bar — a floating pill, not a slab */
.selbar { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 10px 12px 10px 10px;
  border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--lift-3);
  animation: selIn .22s var(--ease); flex-wrap: wrap; }
@keyframes selIn { from { opacity: 0; transform: translateY(-6px) scale(.99); } to { opacity: 1; transform: none; } }
.selbar__badge { flex: 0 0 auto; min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--r-xl);
  display: grid; place-items: center; font-size: 1.05rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--accent-press)); box-shadow: var(--lift-2);
  font-variant-numeric: tabular-nums; }
.selbar__meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.selbar__t { font-size: .82rem; font-weight: 700; color: var(--text); }
.selbar__s { font-size: .76rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.selbar__acts { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.selbar__btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-secondary); font-size: .82rem; font-weight: 650;
  padding: 8px 13px; border-radius: var(--r-lg); cursor: pointer; transition: all .14s var(--ease); white-space: nowrap; }
.selbar__btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); transform: translateY(-1px); }
.selbar__btn--go { background: linear-gradient(135deg, var(--blue), var(--accent-press)); border-color: transparent; color: #fff;
  box-shadow: var(--lift-2); }
.selbar__btn--go:hover { color: #fff; filter: brightness(1.07); border-color: transparent; }
.selbar__x { border: 0; background: transparent; color: var(--text-tertiary); width: 32px; height: 32px;
  border-radius: var(--r-md); cursor: pointer; display: grid; place-items: center; font-size: .78rem; }
.selbar__x:hover { background: var(--surface-sunken); color: var(--text); }
@media (max-width: 640px) { .selbar__btn span { display: none; } .selbar__btn { padding: 8px 11px; } }

/* ===================================================================================
 *  PREDICTIVE DATA ENTRY — the quiet hint shown when the app fills fields from history
 * ================================================================================= */
.pred-hint {
  grid-column: 1 / -1;
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 12px 11px 14px; margin-top: 4px;
  background: linear-gradient(135deg, var(--blue-soft), rgba(88,86,214,.08));
  border: 1px solid rgba(37,99,235,.20); border-radius: var(--r-md);
  animation: predIn .26s cubic-bezier(.25,1,.5,1);
}
@keyframes predIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.pred-hint > i { color: var(--blue); font-size: .95rem; margin-top: 1px; flex: 0 0 auto; }
.pred-hint strong { display: block; font-size: .82rem; color: var(--text); font-weight: 650; }
.pred-hint span { display: block; font-size: .76rem; color: var(--text-secondary); line-height: 1.45; margin-top: 1px; }
.pred-x { margin-left: auto; border: 0; background: transparent; color: var(--text-tertiary);
  width: 24px; height: 24px; border-radius: var(--r-sm); cursor: pointer; flex: 0 0 auto; display: grid; place-items: center; }
.pred-x:hover { background: rgba(120,130,150,.14); color: var(--text); }

/* ===================================================================================
 *  PAYMENT EDITING — an explicit, always-visible action.
 *  This was previously hidden until hover, which made it undiscoverable: a correction
 *  tool you can't find is a correction tool that doesn't exist. It is now a labelled
 *  button that states plainly what it does.
 * ================================================================================= */
.pay-edit {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary);
  font-size: .74rem; font-weight: 650; padding: 5px 11px; border-radius: var(--r-md); cursor: pointer;
  white-space: nowrap; transition: all .15s var(--ease);
}
.pay-edit:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); transform: translateY(-1px); }
.pay-edit:active { transform: translateY(0); }
.pay-edit > i { font-size: .72rem; }
@media (max-width: 560px) { .pay-edit span { display: none; } .pay-edit { padding: 6px 9px; } }

/* ===================================================================================
 *  NATURAL LANGUAGE SEARCH — the chips showing what the app understood
 * ================================================================================= */
.nl-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 9px 12px; margin-top: 8px;
  background: linear-gradient(135deg, var(--blue-soft), rgba(88,86,214,.07));
  border: 1px solid rgba(37,99,235,.18); border-radius: var(--r-md);
  animation: nlIn .24s cubic-bezier(.25,1,.5,1); }
@keyframes nlIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.nl-chips__l { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700;
  color: var(--blue); letter-spacing: .02em; text-transform: uppercase; }
.nl-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600;
  padding: 4px 11px; border-radius: var(--r-pill); background: var(--surface); color: var(--text);
  border: 1px solid rgba(37,99,235,.22); box-shadow: var(--lift-1); }
.nl-chip > i { font-size: .72rem; color: var(--blue); }
.nl-chips__x { margin-left: auto; border: 0; background: transparent; color: var(--text-tertiary);
  width: 24px; height: 24px; border-radius: var(--r-sm); cursor: pointer; display: grid; place-items: center; }
.nl-chips__x:hover { background: rgba(120,130,150,.14); color: var(--text); }

/* Pre-invoice expiry alerts */
.stale-alerts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.stale { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid rgba(217,119,6,.28); box-shadow: var(--shadow-sm);
  animation: nlIn .26s cubic-bezier(.25,1,.5,1); }
.stale__dot { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(249,115,22,.14); color: var(--attention); font-size: .95rem; position: relative; }
.stale__dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid rgba(249,115,22,.35); animation: staleRing 2s ease-in-out infinite; }
@keyframes staleRing { 0%,100% { opacity: .8; transform: scale(1); } 50% { opacity: 0; transform: scale(1.25); } }
.stale__b { flex: 1; min-width: 0; }
.stale__t { font-size: .86rem; font-weight: 650; color: var(--text); }
.stale__s { font-size: .77rem; color: var(--text-secondary); }
.stale__go { border: 0; background: var(--attention); color: #fff; font-size: .78rem; font-weight: 650;
  padding: 7px 14px; border-radius: var(--r-md); cursor: pointer; white-space: nowrap;
  box-shadow: var(--lift-2); transition: filter .14s; }
.stale__go:hover { filter: brightness(1.07); }
.stale__x { border: 0; background: transparent; color: var(--text-tertiary); width: 28px; height: 28px;
  border-radius: var(--r-md); cursor: pointer; display: grid; place-items: center; }
.stale__x:hover { background: var(--surface-sunken); color: var(--text); }

/* ===================================================================================
 *  MULTI-CURRENCY — dashboard breakdown (presentation only, never converted)
 * ================================================================================= */
.cur-card { margin-bottom: 16px; }
.cur-card__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.cur-card__h > span { font-size: .74rem; color: var(--text-tertiary); }
.cur-grid { display: flex; flex-direction: column; gap: 12px; }
.cur-row { display: flex; align-items: center; gap: 14px; }
.cur-badge { flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--r-lg); display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue); font-size: 1.05rem; font-weight: 800; }
.cur-b { flex: 1; min-width: 0; }
.cur-t { display: flex; align-items: baseline; gap: 8px; }
.cur-t strong { font-size: .88rem; color: var(--text); letter-spacing: .02em; }
.cur-t span { font-size: .74rem; color: var(--text-tertiary); }
.cur-bar { height: 5px; border-radius: var(--r-xs); background: var(--surface-sunken); overflow: hidden; margin-top: 5px; }
.cur-bar span { display: block; height: 100%; border-radius: var(--r-xs); background: linear-gradient(90deg, var(--green), var(--blue)); }
.cur-v { text-align: right; flex: 0 0 auto; }
.cur-v strong { display: block; font-size: .92rem; color: var(--text); font-variant-numeric: tabular-nums; }
.cur-v span { display: block; font-size: .73rem; color: var(--text-tertiary); }
.hm-hint { font-size: .72rem; color: var(--text-tertiary); margin: 5px 0 0; line-height: 1.4; }

/* ===================================================================================
 *  SEND TO ACCOUNTANT — bundle modal
 * ================================================================================= */
.acct-hero { display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--surface-sunken); border-radius: var(--r-lg); }
.acct-hero__n { flex: 0 0 auto; min-width: 46px; height: 46px; padding: 0 10px; border-radius: var(--r-xl);
  display: grid; place-items: center; font-size: 1.3rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--accent-press)); box-shadow: var(--lift-2);
  font-variant-numeric: tabular-nums; }
.acct-hero__t { font-size: .88rem; font-weight: 700; color: var(--text); }
.acct-hero__s { font-size: .78rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.acct-hero__zip { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 700; color: var(--text-secondary);
  background: var(--surface); border: 1px solid var(--border); padding: 5px 11px; border-radius: var(--r-pill); white-space: nowrap; }
.acct-hero__zip > i { color: var(--blue); }
.acct-save { display: flex; align-items: center; gap: 9px; margin-top: 14px; cursor: pointer;
  font-size: .8rem; color: var(--text-secondary); }
.acct-save input { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; }
@keyframes acctPulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* Accountant modal — three routes, plainly compared */
.acct-routes { display: grid; gap: 7px; margin-top: 16px; }
.acct-route { display: flex; gap: 11px; align-items: flex-start; padding: 10px 12px;
  background: var(--surface-sunken); border-radius: var(--r-md); }
.acct-route > i { flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--surface); color: var(--blue); font-size: .82rem; box-shadow: var(--shadow-sm); }
.acct-route strong { display: block; font-size: .8rem; color: var(--text); font-weight: 700; }
.acct-route span { display: block; font-size: .74rem; color: var(--text-secondary); line-height: 1.45; margin-top: 1px; }
.acct-route.is-off { opacity: .5; }
.acct-route.is-off > i { color: var(--text-tertiary); }

.acct-more { margin-top: 14px; border-top: 1px solid var(--separator); padding-top: 12px; }
.acct-more > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-size: .8rem; font-weight: 650; color: var(--text-secondary); padding: 5px 0;
  border-radius: var(--r-md); transition: color .15s var(--ease); }
.acct-more > summary::-webkit-details-marker { display: none; }
.acct-more > summary:hover, .acct-more[open] > summary { color: var(--blue); }
.acct-more > summary > i { color: var(--text-tertiary); }
.acct-more > summary::after { content: "\F282"; font-family: "bootstrap-icons"; margin-left: auto;
  font-size: .7rem; color: var(--text-tertiary); transition: transform .18s var(--ease); }
.acct-more[open] > summary::after { transform: rotate(180deg); }
.acct-more__b { padding-top: 10px; animation: predIn .2s cubic-bezier(.25,1,.5,1); }
.acct-cap { display: flex; gap: 7px; align-items: flex-start; font-size: .73rem; color: var(--text-tertiary);
  margin: 12px 0 0; line-height: 1.45; }
.acct-cap b { color: var(--text-secondary); }
.acct-primary { box-shadow: var(--lift-3); }
.w-100 { width: 100%; }

/* ===================================================================================
 *  SPOTLIGHT — the Payments search surfaces invoices you can act on
 * ================================================================================= */
.pv-search { position: relative; }
.spot { position: absolute; top: calc(100% + 7px); left: 0; right: 0; z-index: 200;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 5px;
  box-shadow: var(--lift-3); max-height: 340px; overflow-y: auto;
  animation: acIn .16s cubic-bezier(.25,1,.5,1); contain: layout paint; }
.spot__h { font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-tertiary); padding: 8px 10px 6px; }
.spot__i { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; border: 0;
  background: transparent; padding: 9px 10px; border-radius: var(--r-lg); cursor: pointer; transition: background .12s; }
.spot__i:hover { background: var(--blue-soft); }
.spot__ic { flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--surface-sunken); color: var(--blue); font-size: .85rem; }
.spot__ic.is-late { background: rgba(220,38,38,.12); color: var(--red); }
.spot__b { flex: 1; min-width: 0; }
.spot__n { display: block; font-size: .85rem; font-weight: 700; color: var(--text); }
.spot__c { display: block; font-size: .74rem; color: var(--text-secondary); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.spot__r { text-align: right; flex: 0 0 auto; }
.spot__v { display: block; font-size: .86rem; font-weight: 700; color: var(--attention); font-variant-numeric: tabular-nums; }
.spot__s { display: block; font-size: .68rem; color: var(--text-tertiary); }
.spot__s.is-late { color: var(--red); font-weight: 700; }

/* ===================================================================================
 *  AVATARS — a face for every customer, no setup required
 * ================================================================================= */
.ava { display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 50%;
  font-weight: 700; letter-spacing: .01em; line-height: 1; overflow: hidden;
  box-shadow: var(--lift-1); user-select: none; }
.ava--img { background: var(--surface-sunken); }
.ava--img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Customer form — avatar row */
.cf-ava-row { display: flex; align-items: center; gap: 16px; }
.cf-ava-b { flex: 1; min-width: 0; }

/* =====================================================================================
 *  RECORD A PAYMENT  —  rebuilt v2.15.0  ("Statement")
 *  -----------------------------------------------------------------------------------
 *  One integrated surface, Mercury-leaning. Search is inline at the top and always
 *  visible; the form reveals beneath it when an invoice is picked (data-picked). No
 *  stages, no separate find screen.
 *
 *  Softness: fields are UNDERLINE-ONLY -- no boxes, no fills. They sit on the panel's
 *  own off-white and are separated by air and hairlines, not borders. One restrained
 *  accent, spent only on focus underlines and the single primary action. The amount is
 *  the largest figure but is not a spectacle -- it has no box and no rail.
 *
 *  Every colour is a token, so dark mode inherits with no extra rules.
 * =================================================================================== */

.rec { position: relative; padding: 24px 26px 26px; overflow: visible; margin-bottom: 16px; }

.rec__head { margin-bottom: 18px; }
.rec__title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); margin: 0; }
.rec__sub { font-size: .8rem; color: var(--ink-3); margin: 4px 0 0; line-height: 1.4; }

/* pick row: search + native selector side by side; both choose the invoice */
.rec__pickrow { display: flex; align-items: end; gap: 16px; }
.rec__search { position: relative; flex: 1 1 60%; min-width: 0; }
.rec__search-i { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); font-size: .95rem; color: var(--ink-3); pointer-events: none; transition: color var(--dur) var(--ease); }
.rec__search:focus-within .rec__search-i { color: var(--accent); }
.rec__q { width: 100%; height: 44px; padding: 0 4px 0 30px; font: inherit; font-size: .95rem; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; outline: none; transition: border-color var(--dur) var(--ease); }
.rec__q::placeholder { color: var(--ink-3); }
.rec__q:hover { border-bottom-color: var(--line-strong); }
.rec__q:focus { border-bottom-color: var(--accent); }

.rec__pick { position: relative; flex: 1 1 40%; min-width: 0; }
.rec__pick-s { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 44px; padding: 0 30px 0 4px; font: inherit; font-size: .95rem; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; outline: none; cursor: pointer; transition: border-color var(--dur) var(--ease); }
.rec__pick-s:hover { border-bottom-color: var(--line-strong); }
.rec__pick-s:focus { border-bottom-color: var(--accent); }
.rec__pick-s:disabled { color: var(--ink-3); cursor: not-allowed; }
.rec__pick-c { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: .7rem; color: var(--ink-3); pointer-events: none; }

.rec__none { margin-top: 14px; font-size: .82rem; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.rec__none i { font-size: .95rem; color: var(--positive); }
.rec__none b { color: var(--ink-2); font-weight: 600; }

/* slim clearable line for the picked invoice */
.rec__sel { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 4px; border-bottom: 1px solid var(--line); animation: rec-in var(--dur) var(--ease-out) both; }
.rec__sel-k { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rec__sel-n { font-family: var(--font-ledger); font-size: .9rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.rec__sel-c { font-size: .82rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec__sel-v { flex: 0 0 auto; font-family: var(--font-ledger); font-size: .9rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rec__sel-l { font-family: var(--font); font-size: .7rem; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.rec__sel-x { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 2px; color: var(--ink-3); background: transparent; border: 0; border-radius: var(--r-pill); cursor: pointer; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.rec__sel-x:hover { color: var(--ink); background: var(--surface-2); }
.rec__sel-x i { font-size: .78rem; }

/* form body: ALWAYS visible and fully legible. No opacity dimming (it washes out the
   already-muted labels). The "not ready yet" signal comes from the disabled amount field
   and the disabled Record button, the way Stripe/Mercury do it -- nothing is greyed into
   illegibility, the primary action is simply inactive until an invoice is chosen. */
.rec__body { display: block; margin-top: 4px; }
.rec[data-picked="0"] .rec__amount-f,
.rec[data-picked="0"] .rec__cell-in,
.rec[data-picked="0"] .rec__method { pointer-events: none; }
@keyframes rec-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* disabled amount + button read as intentionally inactive, not broken */
.rec__amount input:disabled { color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); opacity: 1; cursor: not-allowed; }

/* amount — largest figure, underline only, no box or rail */
.rec__amount { margin: 22px 0; }
.rec__amount-l { display: block; font-size: .8rem; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.rec__amount-f { position: relative; display: flex; align-items: baseline; gap: 8px; padding: 4px 2px 10px; border-bottom: 1.5px solid var(--line); transition: border-color var(--dur) var(--ease); }
.rec__amount-f:focus-within { border-bottom-color: var(--accent); }
.rec__amount-f.is-over { border-bottom-color: var(--critical); }
.rec__cur { font-family: var(--font-ledger); font-size: 1.5rem; font-weight: 500; color: var(--ink-3); line-height: 1; transition: color var(--dur) var(--ease); }
.rec__amount-f:focus-within .rec__cur { color: var(--ink-2); }
.rec__amount-f.is-over .rec__cur { color: var(--critical); }
.rec__amount input { flex: 1; min-width: 0; width: 100%; font-family: var(--font-ledger); font-size: 2rem; font-weight: 500; line-height: 1; letter-spacing: -.015em; color: var(--ink); font-variant-numeric: tabular-nums; background: transparent; border: 0; outline: none; padding: 0; }
.rec__amount input::placeholder { color: var(--ink-3); opacity: .5; }
.rec__amount input::-webkit-outer-spin-button, .rec__amount input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* chips */
.rec__alloc { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.rec-chip { font: inherit; font-size: .78rem; font-weight: 500; color: var(--ink-2); background: transparent; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 13px; cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease); }
.rec-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.rec-chip.is-on { color: var(--accent); background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }

/* metadata — underline fields */
.rec__meta { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.rec__cell { display: flex; flex-direction: column; min-width: 0; position: relative; }
.rec__cell-l { font-size: .78rem; font-weight: 500; color: var(--ink-2); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
.rec__opt { font-size: .72rem; color: var(--ink-3); font-weight: 400; }
.rec__cell-in { font: inherit; font-size: .9rem; color: var(--ink); height: 36px; padding: 0 2px; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; outline: none; width: 100%; transition: border-color var(--dur) var(--ease); }
.rec__cell-in::placeholder { color: var(--ink-3); opacity: .7; }
.rec__cell-in:hover { border-bottom-color: var(--line-strong); }
.rec__cell-in:focus { border-bottom-color: var(--accent); }
.rec__cell-in::-webkit-calendar-picker-indicator { opacity: .45; cursor: pointer; }

/* method */
.rec__method { display: flex; align-items: center; gap: 9px; width: 100%; height: 36px; padding: 0 2px; font: inherit; font-size: .9rem; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; cursor: pointer; text-align: left; outline: none; transition: border-color var(--dur) var(--ease); }
.rec__method:hover { border-bottom-color: var(--line-strong); }
.rec__method[aria-expanded="true"] { border-bottom-color: var(--accent); }
.rec__method > i:first-child { font-size: .92rem; color: var(--ink-2); }
.rec__method > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec__method-c { font-size: .66rem; color: var(--ink-3); transition: transform var(--dur) var(--ease); }
.rec__method[aria-expanded="true"] .rec__method-c { transform: rotate(180deg); }
.rec__menu { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--lift-3); padding: 5px; max-height: 260px; overflow-y: auto; animation: rec-menu-in .16s var(--ease-out) both; }
/* opens upward when there is no room below (method field is near the card's bottom edge,
   so a downward menu would overlap the Payment history card beneath it) */
.rec__menu--up { top: auto; bottom: calc(100% + 6px); animation-name: rec-menu-in-up; }
@keyframes rec-menu-in-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes rec-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.rec__menu-i { display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; font-size: .86rem; color: var(--ink); background: transparent; border: 0; border-radius: var(--r-sm); padding: 8px 10px; cursor: pointer; text-align: left; transition: background var(--dur) var(--ease); }
.rec__menu-i > i:first-child { font-size: .88rem; color: var(--ink-2); width: 18px; text-align: center; }
.rec__menu-i > span { flex: 1; }
.rec__menu-i:hover { background: var(--surface-2); }
.rec__menu-k { font-size: .8rem; color: var(--accent); opacity: 0; }
.rec__menu-i.is-on { color: var(--accent); font-weight: 550; }
.rec__menu-i.is-on > i:first-child { color: var(--accent); }
.rec__menu-i.is-on .rec__menu-k { opacity: 1; }

/* confirm */
.rec__confirm { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); }
.rec__say { flex: 1; min-width: 0; font-size: .85rem; color: var(--ink-2); margin: 0; line-height: 1.45; }
.rec__say b { color: var(--ink); font-weight: 600; }
.rec__say.is-good { color: var(--st-paid-ink); }
.rec__say.is-good b { color: var(--st-paid-ink); }
.rec__say.is-bad { color: var(--critical); }
.rec__say.is-bad b { color: var(--critical); }
.rec__go { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px; font: inherit; font-size: .88rem; font-weight: 600; letter-spacing: -.005em; color: var(--on-accent); background: var(--accent); border: 0; border-radius: var(--r-md); cursor: pointer; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.rec__go:hover:not(:disabled) { background: var(--accent-press); box-shadow: var(--lift-2); }
.rec__go:active:not(:disabled) { transform: scale(.985); }
.rec__go:disabled { background: var(--sunken); color: var(--ink-3); cursor: not-allowed; }
.rec__go-i { font-size: .88rem; }
.rec__go-i--spin { animation: rec-spin .7s linear infinite; }
@keyframes rec-spin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  .rec { padding: 20px 18px 20px; }
  .rec__pickrow { flex-direction: column; align-items: stretch; gap: 14px; }
  .rec__meta { grid-template-columns: 1fr; gap: 18px; }
  .rec__confirm { flex-direction: column; align-items: stretch; }
  .rec__go { width: 100%; }
  .rec__sel { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .rec__body, .rec__sel, .rec__menu { animation: none !important; }
  .rec__go, .rec__go:hover:not(:disabled), .rec-chip, .rec__q, .rec__cell-in, .rec__method, .rec__method-c, .rec__search-i, .rec__amount-f, .rec__cur, .rec__sel-x { transition: none !important; }
  .rec__go:hover:not(:disabled) { transform: none; }
  .rec__go-i--spin { animation: rec-spin 1s linear infinite; }
}


/* History filter chips */
/* The .pv-chips / .pv-chip block that lived here has been removed. It was defined AFTER
   the segmented control at ~line 1002, so at equal specificity it won and repainted the
   active segment as a solid blue pill — the indicator was sliding underneath it,
   invisible. .pv-chips is no longer emitted at all; .pv-chip is styled with the control.

/* ===================================================================================
 *  ACCOUNTANT EXPORTS — how the PDFs travel
 * ================================================================================= */
.exp-modes, .acct-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .exp-modes, .acct-modes { grid-template-columns: 1fr; } }

.exp-mode { display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
  border: 2px solid var(--border); background: var(--surface); border-radius: var(--r-xl); padding: 14px;
  transition: all .16s var(--ease); }
.exp-mode:hover { border-color: var(--text-tertiary); transform: translateY(-2px); }
.exp-mode.is-on { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.exp-mode > i { font-size: 1.25rem; color: var(--text-tertiary); margin-bottom: 4px; }
.exp-mode.is-on > i { color: var(--blue); }
.exp-mode__t { font-size: .88rem; font-weight: 700; color: var(--text); }
.exp-mode__s { font-size: .74rem; color: var(--text-tertiary); line-height: 1.45; }

.acct-modes { margin: 8px 0 4px; }
.acct-mode { display: flex; align-items: flex-start; gap: 9px; text-align: left; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--surface); border-radius: var(--r-lg); padding: 10px 11px;
  transition: all .15s var(--ease); }
.acct-mode:hover { border-color: var(--text-tertiary); }
.acct-mode.is-on { border-color: var(--blue); background: var(--blue-soft); }
.acct-mode > i { font-size: .95rem; color: var(--text-tertiary); margin-top: 1px; flex: 0 0 auto; }
.acct-mode.is-on > i { color: var(--blue); }
.acct-mode span { display: flex; flex-direction: column; min-width: 0; }
.acct-mode strong { font-size: .78rem; color: var(--text); font-weight: 700; }
.acct-mode span > strong + * , .acct-mode span { font-size: .7rem; color: var(--text-tertiary); line-height: 1.4; }

/* =====================================================================================
 *  ROW ACTION BUTTONS  (invoice list, and any table that reuses .row-act)
 *  One geometry for every action button in a row, whether it holds a Bootstrap icon
 *  glyph or an inline SVG. Previously the WhatsApp button carried inline
 *  display:inline-flex + min-height:44px, which baseline-aligned it below its
 *  siblings and clipped it against the cell padding.
 *
 *  vertical-align:middle is the load-bearing line: an inline-flex box's baseline is
 *  its bottom margin edge, so without this it drops relative to inline-block siblings.
 *  The 44x44 touch target lives on an ::after overlay, so the column width stays sane.
 * ===================================================================================== */
.row-act {
  width: 36px; height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; position: relative;
  border: 0; background: transparent; color: var(--blue);
  border-radius: var(--r-md); flex: 0 0 auto;
  transition: background var(--dur) var(--ease);
}
.row-act + .row-act { margin-left: 2px; }
.row-act::after {                      /* vertical-only hit expansion to 44px */
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}                                      /* NOT expanded horizontally: at 36px pitch,
                                          44px-wide overlays would overlap and the
                                          later sibling would swallow its neighbour's taps. */
.row-act:hover:not(:disabled) { background: var(--blue-soft); }
.row-act:disabled { opacity: .3; cursor: default; }
/* Every action icon is a Bootstrap Icons glyph, so they share one optical weight and
   one grid. A hand-rolled SVG here (the WhatsApp mark used to be one) renders as a
   solid shape among outline glyphs and visually dominates the row. */
.row-act > i { font-size: 1rem; line-height: 1; display: block; }

/* Colour variants — kept here rather than as inline style attributes */
.row-act--green { color: var(--green); }
.row-act--red   { color: var(--red); }
.row-act--wa    { color: #25D366; }
.row-act--wa:hover:not(:disabled) { background: rgba(37, 211, 102, .12); }
.row-act--green:hover:not(:disabled) { background: rgba(52, 199, 89, .12); }
.row-act--red:hover:not(:disabled)   { background: rgba(255, 59, 48, .12); }

/* The actions cell must never be the thing that clips a button */
.data-table td.row-acts { white-space: nowrap; overflow: visible; }

/* =====================================================================================
 *  WHATSAPP CONFIRMATION DIALOG
 *  The message preview is deliberately shaped like a WhatsApp bubble — what you see
 *  in this box is byte-for-byte what the client receives.
 * ===================================================================================== */
.wa-cf__lead { margin: 0 0 14px; color: var(--text); font-size: .95rem; line-height: 1.45; }
.wa-cf__card {
  background: var(--surface-sunken); border: 1px solid var(--separator);
  border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 9px;
}
.wa-cf__row { display: flex; align-items: flex-start; gap: 10px; font-size: .86rem; color: var(--text-secondary); line-height: 1.4; }
.wa-cf__row > i { color: var(--text-tertiary); font-size: .95rem; line-height: 1.35; flex: 0 0 auto; }
.wa-cf__row--warn { color: var(--amber, var(--attention)); }
.wa-cf__row--warn > i { color: currentColor; }
.wa-cf__label {
  font-size: .7rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-tertiary); margin-bottom: 7px;
}
.wa-cf__bubble {
  position: relative; background: #DCF8C6; color: #111;
  border-radius: 12px 12px 12px 4px; padding: 11px 14px;
  font-size: .88rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.wa-cf__note {
  margin-top: 14px; font-size: .8rem; color: var(--text-secondary);
  display: flex; align-items: flex-start; gap: 8px; line-height: 1.45;
}
.wa-cf__note > i { flex: 0 0 auto; line-height: 1.4; }
.wa-cf__go.is-armed { background: #25D366; border-color: #25D366; }
.wa-cf__go.is-armed:hover { background: #1FB855; }

/* The green bubble is a WhatsApp convention, so it stays green in dark mode —
   only the text colour is pinned so it never goes light-on-light. */
html[data-theme="dark"] .wa-cf__bubble { background: #075E54; color: #E9EDEF; }

/* Bootstrap ships modal-sm / -lg / -xl but no explicit medium; this names the default
   width so `size: 'modal-md'` is a real instruction rather than an inert class. */
.modal-dialog.modal-md { max-width: 500px; }

/* Touch devices: the button itself becomes the full 44x44 target. */
@media (pointer: coarse) {
  .row-act { width: 44px; height: 44px; }
  .row-act + .row-act { margin-left: 0; }
}

/* =====================================================================================
 *  "VIEW ALL ACTIVITY" — the one deliberately black control on the dashboard.
 *  Everything else on this surface is blue or ghost, so black reads as a different
 *  KIND of action: leave this glance, go read the record. In dark mode it inverts to
 *  near-white, because a black button on a black card is just a hole.
 * ===================================================================================== */
.btn-allactivity {
  width: 100%; margin-top: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ink); color: #fff; border: 0;
  border-radius: var(--r-md); padding: 12px 18px;
  font-size: .85rem; font-weight: 650; letter-spacing: .01em; cursor: pointer;
  box-shadow: var(--lift-2);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
}
.btn-allactivity:hover { background: #23232B; box-shadow: var(--lift-3); }
.btn-allactivity:active { transform: scale(.985); }
.btn-allactivity > i { font-size: .82rem; transition: transform .22s var(--ease); }
.btn-allactivity:hover > i { transform: translateX(3px); }

html[data-theme="dark"] .btn-allactivity {
  background: var(--ink); color: var(--ink); box-shadow: var(--lift-2);
}
html[data-theme="dark"] .btn-allactivity:hover { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .btn-allactivity, .btn-allactivity > i { transition: none; }
  .btn-allactivity:active { transform: none; }
}

/* =====================================================================================
 *  LEDGER — TYPOGRAPHY ROLES & MOTION
 *
 *  Motion philosophy: every animation here moves ONLY transform and opacity, both of
 *  which the compositor handles without touching layout or paint. Anything that
 *  animates width, height, top or margin will jank on a mid-range phone, and this app
 *  gets used on phones in truck yards.
 *
 *  Restraint matters as much as the motion itself. Things settle into place, they don't
 *  bounce or slide across the screen. A ledger that flings its numbers around does not
 *  read as trustworthy.
 * ===================================================================================== */

h1, h2, h3, .view-header__title, .section-title, .kpi-card__value,
.dash-hero__amount, .metric__v {
  font-family: var(--font-display);
  letter-spacing: -.02em;
}

/* THE SIGNATURE — the ledger column.
   Amounts inside data tables are monospaced and right-aligned so decimal points stack
   down the column, exactly as they would in a ruled account book. Headline figures stay
   proportional, so this reads as a deliberate accounting convention rather than a font
   accident that escaped into the layout. */
.led,
.data-table td.num,
.data-table td.amount,
.data-table .money {
  font-family: var(--font-ledger);
  font-variant-numeric: tabular-nums;
  font-size: .92em;
  letter-spacing: -.02em;
  text-align: right;
}
.data-table th.num, .data-table th.amount { text-align: right; }

/* Invoice references read as identifiers, not prose. */
.ref, .inv-number, .data-table td .invoice-ref {
  font-family: var(--font-ledger);
  font-size: .93em;
  font-weight: 500;
  letter-spacing: -.02em;
}

/* Any large figure: tabular so digits don't shuffle width as values change. */
.fig, .kpi-card__value, .dash-hero__amount, .metric__v, .donut-legend__val, .top-row__val {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}

/* ------------------------------------------------------------------ REVEAL ---------
   Sections arrive rather than appearing. Applied by js/core/motion.js on scroll, so
   content below the fold animates when it's reached instead of all at once at load. */
.rv { opacity: 0; transform: translateY(14px); will-change: transform, opacity; }
.rv.rv-in {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay: var(--rv-d, 0ms);
}
.rv.rv-done { will-change: auto; }

/* ------------------------------------------------------------------ HOVER ----------
   1px of lift. Enough to feel responsive, not enough to look like the card is escaping.
   Only on devices with a real pointer — on touch this fires on tap and looks broken. */
@media (hover: hover) and (pointer: fine) {
  .ios-card, .kpi-card, .chart-card {
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
  }
  .ios-card:hover, .kpi-card:hover, .chart-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--lift-2);
    border-color: var(--line-strong);
  }
  .data-table tbody tr { transition: background var(--dur) var(--ease); }
}

/* Rows get a navy edge on hover — a ledger's ruled margin, reacting to the cursor. */
.data-table tbody tr { position: relative; }
.data-table tbody tr::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent); transform: scaleY(0); transform-origin: center;
  transition: transform .22s var(--ease);
}
.data-table tbody tr:hover::after { transform: scaleY(1); }

/* ------------------------------------------------------------------ BUTTONS -------- */
.btn-ios-primary, .btn-ios-secondary, .btn-ios-ghost, .btn-allactivity, .row-act {
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn-ios-primary:active, .btn-ios-secondary:active, .btn-allactivity:active { transform: scale(.975); }

/* Keyboard focus is visible and on-brand. Never removed — it's how the app is usable
   without a mouse, and a 2px navy ring is not a design compromise. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ------------------------------------------------------------------ SKELETON -------
   A sweep across the surface rather than a pulsing block: it reads as "loading", not
   as "broken". background-position is cheap here because the element is a solid fill. */
.skeleton, .act-sk {
  background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--surface-2) 37%, var(--surface-sunken) 63%);
  background-size: 400% 100%;
  animation: sweep 1.4s ease-in-out infinite;
  border-radius: var(--r-md);
}
@keyframes sweep { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ------------------------------------------------------------------ ACCENTS --------
   Status badges get a dot in their own colour: scannable at a glance without relying
   on colour alone, which matters for anyone with a colour vision deficiency. */
.badge::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; display: inline-block; margin-right: 5px;
  vertical-align: middle; position: relative; top: -1px;
}

/* Sidebar: the active item earns a navy rule, not just a tint. */
.sidebar__link { position: relative; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.sidebar__link::before {
  content: ""; position: absolute; left: 0; top: 50%; height: 0; width: 3px;
  background: var(--accent); border-radius: 0 3px 3px 0;
  transform: translateY(-50%); transition: height .24s var(--ease);
}
.sidebar__link.is-active::before { height: 60%; }

/* Ring/donut draws itself once, so the collection rate lands rather than being there. */
@keyframes drawRing { from { stroke-dashoffset: var(--ring-len, 240); } }
.ring-anim { animation: drawRing 1s var(--ease-out) both; }

/* ------------------------------------------------------------ REDUCED MOTION -------
   Everything above is decoration on top of a layout that already works. Turning it all
   off must leave the app fully usable, not half-faded. */
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; }
  .skeleton, .act-sk { animation: none; }
  .ring-anim { animation: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* =====================================================================================
 *  LEDGER — COMPONENT LAYER
 *
 *  The token swap alone only changed colours, radii and type. This block rebuilds the
 *  COMPONENTS to match the approved direction: structure carried by hairlines instead
 *  of shadows, tighter density, uppercase micro-labels on data, and a nav that marks
 *  the active item with a rule rather than a solid fill.
 *
 *  Appended deliberately: later rules of equal specificity win, so this overrides the
 *  original component definitions without editing 1,600 lines in place and risking a
 *  half-migrated stylesheet.
 * ===================================================================================== */

/* ------------------------------------------------------------------ TOP BAR -------- */
.app-topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: none;                       /* structure comes from the hairline */
  backdrop-filter: none;
}
.topbar__logo, .workspace-chip__logo img { border-radius: var(--r-md); box-shadow: none; }
.topbar__brand-text { font-family: var(--font-display); letter-spacing: -.015em; font-weight: 600; }
.topbar__search-input {
  background: var(--surface-sunken);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: .86rem;
}
.topbar__search-input:focus {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

/* ------------------------------------------------------------------ SIDEBAR -------- */
.app-sidebar { background: var(--surface); border-right: 1px solid var(--line); }
.sidebar__label {
  font-size: .66rem; letter-spacing: .09em; font-weight: 600; color: var(--ink-3);
}

/* The active item gets a navy rule and a wash, not a solid blue slab. A filled pill is
   the heaviest thing on the page and pulls the eye away from the data, which is the
   thing that actually matters on every one of these screens. */
.nav-item {
  position: relative;
  border-radius: var(--r-md);
  padding: 9px 12px;
  font-size: .855rem;
  font-weight: 500;
  color: var(--ink-2);
  gap: 10px;
}
.nav-item i { font-size: 1rem; width: 20px; }
.nav-item:hover { background: var(--surface-sunken); color: var(--ink); }
.nav-item.is-active {
  background: var(--accent-wash);
  color: var(--accent);
  font-weight: 600;
  box-shadow: none;
}
.nav-item.is-active i { color: var(--accent); }
.nav-item::before {
  content: ""; position: absolute; left: -8px; top: 50%; width: 3px; height: 0;
  background: var(--accent); border-radius: 0 3px 3px 0;
  transform: translateY(-50%); transition: height .24s var(--ease);
}
.nav-item.is-active::before { height: 56%; }

.workspace-chip__name { font-family: var(--font-display); font-weight: 600; }

/* ------------------------------------------------------------------ CARDS ---------- */
/* Bordered, not floating. A page of drop-shadowed cards reads as a dashboard template;
   hairline-bounded panels read as a document. */
.ios-card, .chart-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: none;
}
.section-title {
  font-family: var(--font-display);
  font-size: .92rem; font-weight: 600; letter-spacing: -.01em;
}
.view-header__title { font-size: 1.55rem; font-weight: 600; letter-spacing: -.025em; }
.view-header__subtitle { font-size: .88rem; color: var(--ink-2); }

/* ---- KPI strip: one surface divided by hairlines, not six floating cards.
   Six cards imply six unrelated things; these are six readings of one business. ---- */
.kpi-banner {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  gap: 0;
}
.kpi-card {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: var(--sp-5);
}
.kpi-card:last-child { border-right: 0; }
.kpi-card__label { font-size: .72rem; color: var(--ink-3); font-weight: 500; letter-spacing: .01em; }
.kpi-card__value { font-size: 1.35rem; font-weight: 600; }
.kpi-card__delta { font-size: .72rem; font-weight: 500; color: var(--ink-3); }
.kpi-card__delta.is-up { color: var(--positive); }
.kpi-card__delta.is-down { color: var(--attention); }
@media (hover: hover) and (pointer: fine) {
  .kpi-card:hover { transform: none; box-shadow: none; background: var(--surface-2); }
}

/* ------------------------------------------------------------------ TABLES --------- */
/* Column headers become micro-labels: small, uppercase, tracked out, on a sunken bar.
   This is the single strongest signal that a table is a ledger and not a list. */
.data-table thead th {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  padding: 10px var(--sp-5);
  white-space: nowrap;
}
.data-table tbody td {
  padding: 12px var(--sp-5);
  border-bottom: 1px solid var(--line);
  font-size: .855rem;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: var(--surface-2); }

/* ------------------------------------------------------------------ BADGES --------- */
.badge-ios {
  border: 0;
  border-radius: var(--r-sm);
  font-size: .69rem;
  font-weight: 600;
  padding: 3px 9px;
  letter-spacing: .005em;
}
/* These are the LATER of two definitions of the same classes, so they win regardless
   of what the earlier block says — which is why Overdue kept rendering amber after the
   ramp was introduced, and why Cancelled was rendering in critical red rather than grey.
   Repointed at the status ramp so badges, tracks and tabs finally agree. */
.badge-pre_invoice    { background: var(--surface-sunken);        color: var(--st-draft-ink); }
.badge-due            { background: rgba(245, 158, 11, .13);      color: var(--st-due-ink); }
.badge-partially_paid { background: rgba(245, 158, 11, .13);      color: var(--st-due-ink); }
.badge-overdue        { background: rgba(239, 68, 68, .12);       color: var(--st-late-ink); }
.badge-paid           { background: rgba(16, 185, 129, .13);      color: var(--st-paid-ink); }
.badge-paid_in_full   { background: rgba(16, 185, 129, .13);      color: var(--st-paid-ink); }
.badge-cancelled      { background: var(--surface-sunken);        color: var(--st-void-ink); text-decoration: line-through; }
html[data-theme="dark"] .badge-pre_invoice,
html[data-theme="dark"] .badge-due,
html[data-theme="dark"] .badge-partially_paid,
html[data-theme="dark"] .badge-overdue,
html[data-theme="dark"] .badge-paid,
html[data-theme="dark"] .badge-cancelled { border: 0; }

/* ------------------------------------------------------------------ BUTTONS -------- */
.btn-ios-primary, .btn-ios-secondary, .btn-ios-ghost {
  border-radius: var(--r-md);
  font-size: .82rem;
  font-weight: 600;
  padding: 9px 15px;
  letter-spacing: .005em;
}
.btn-ios-primary { background: var(--accent); color: #fff; box-shadow: none; }
.btn-ios-primary:hover { background: var(--accent-press); }
.btn-ios-secondary {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn-ios-secondary:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); }

/* ------------------------------------------------------------------ FORMS ---------- */
.form-control, .form-select {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: .875rem;
  padding: 9px 12px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
  background: var(--surface);
  color: var(--ink);
}
.form-control::placeholder { color: var(--ink-3); }
.hm-label {
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
}

/* ------------------------------------------------------------------ SEGMENTED ------ */
.segmented { background: var(--surface-sunken); border-radius: var(--r-md); padding: 3px; }
.segmented__item {
  border-radius: var(--r-sm); font-size: .78rem; font-weight: 500; color: var(--ink-2);
}
.segmented__item.is-active {
  background: var(--surface); color: var(--ink); box-shadow: var(--lift-1); font-weight: 600;
}

/* ------------------------------------------------------------------ EMPTY ---------- */
.empty-state { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: none; }
.empty-state__icon { background: var(--surface-sunken); color: var(--ink-3); border-radius: var(--r-lg); }
.empty-state__title { font-family: var(--font-display); font-weight: 600; }

/* ------------------------------------------------------------------ MISC PURGE -----
   Hardcoded colours that predate the token layer, brought back under it. ---------- */
.btn-ios-secondary:hover { background: var(--surface-2); }
.badge-scheduled { background: var(--accent-wash); color: var(--accent); }
.dash-hero { background: var(--ink); }
html[data-theme="dark"] .dash-hero { background: var(--surface); border: 1px solid var(--line-strong); }
.dash-hero::after { display: none; }        /* the glow belonged to the old blue hero */

/* ==================================================================================
 *  PHONE — a different layout, not a narrower one.
 *  On a desktop you're reviewing; on a phone you're acting: checking whether someone
 *  paid, chasing from a yard. So navigation moves to the thumb and the drawer goes.
 * ================================================================================ */
.tabbar { display: none; }

@media (max-width: 767.98px) {
  .tabbar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .tabbar__item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    border: 0; background: transparent; color: var(--ink-3);
    font-size: .625rem; font-weight: 500; padding: 6px 0 4px;
    border-radius: var(--r-md); cursor: pointer;
    transition: color var(--dur) var(--ease);
  }
  .tabbar__item i { font-size: 1.15rem; line-height: 1; }
  .tabbar__item.is-active { color: var(--accent); }

  /* Leave room for the bar, plus the home indicator on iPhones. */
  .app-main, .view-root { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }

  /* The hamburger and drawer are redundant once the thumb bar exists. */
  .topbar__menu-btn { display: none; }

  .kpi-banner { grid-template-columns: repeat(2, 1fr); }
  .kpi-card:nth-child(2n) { border-right: 0; }
  .kpi-card:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--line); }
  .view-header__title { font-size: 1.3rem; }
  .data-table thead th, .data-table tbody td { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}

/* =====================================================================================
 *  LEDGER — SCREEN-BY-SCREEN CONSISTENCY PASS
 *
 *  Views inject their own <style> blocks, written before the system existed. Those rules
 *  live in the document and would otherwise sit outside it — cards floating on shadows
 *  next to cards bounded by hairlines, on the same page.
 *
 *  Rather than rewrite nine files of string-concatenated CSS (high risk, easy to break a
 *  quoted style mid-string), this brings the bespoke containers onto the system from the
 *  outside. Same result, nothing to break.
 * ===================================================================================== */

/* ---- Bespoke panels: bordered, not floating ------------------------------------- */
.notif-panel, .kbd-card, .vup, .preset-card, .thm-card, .hdr-tile, .tpl-tile,
.fnt-tile, .set-savebar, .dr-panel, .ac-panel, .pvg-card, .doc-card, .tmpl-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
.notif-panel, .dr-panel, .ac-panel, .set-savebar { box-shadow: var(--lift-3); }
.kbd-card, .vup, .preset-card, .thm-card, .pvg-card, .doc-card, .tmpl-card { box-shadow: none; }

/* Selectable tiles: the chosen one is marked by a navy border and wash, never a
   drop shadow. Shadow says "floating"; selection is a state, not a plane. */
.preset-card.is-active, .thm-card.is-active, .hdr-tile.is-active,
.tpl-tile.is-active, .fnt-tile.is-active, .sig-font-tile.is-active {
  border-color: var(--accent);
  background: var(--accent-wash);
  box-shadow: none;
}

/* ---- Chips and pills ------------------------------------------------------------- */
.act-chip, .pay-chip, .ph-chip, .set-tab, .dr-input {
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-2);
  font-weight: 500;
}
.act-chip.is-on, .pay-chip.is-on, .set-tab.is-active {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.dr-input { border-radius: var(--r-md); }

/* ---- Activity timeline: align with the card system ------------------------------ */
.act-ico { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-lg); }
.act-day { font-size: .66rem; letter-spacing: .09em; color: var(--ink-3); }
.act-fold { border-radius: var(--r-lg); border-color: var(--line-strong); }
.act-bubble, .wa-cf__bubble { border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-xs); }

/* ---- Payments grid ---------------------------------------------------------------
   The .pvg-bar rules that lived here are gone with the bar itself (v2.12.1). They did
   not set `display`, so they were not overriding the hide — just dead weight. */

/* ---- Toasts and modals: the only things that genuinely float -------------------- */
.toast-ios, .modal-content {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--lift-3);
  background: var(--surface);
}
.modal-header, .modal-footer { border-color: var(--line); }
.modal-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; }

/* ---- Dashboard chase card, brought onto the attention token -------------------- */
.chase { border-left-width: 3px; border-radius: var(--r-xl); box-shadow: none; }
.chase__row { border-radius: var(--r-md); }

/* ---- Notification rows ----------------------------------------------------------- */
.notif-item { border-bottom: 1px solid var(--line); }
.notif-item:hover { background: var(--surface-2); }
.notif-item__icon { border-radius: var(--r-md); }

/* ---- Anything still carrying a legacy pill radius on a rectangular control ------ */
.segmented, .segmented__item { border-radius: var(--r-md); }
.segmented__item { border-radius: var(--r-sm); }

/* =====================================================================================
 *  NATIVE FEEL
 *  The details that stop an installed PWA reading as a website in a frame.
 * ===================================================================================== */

/* ---- PULL TO REFRESH ------------------------------------------------------------- */
.ptr {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 4px); left: 50%;
  margin-left: -18px; width: 36px; height: 36px; z-index: 1200;
  display: grid; place-items: center; pointer-events: none; opacity: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); box-shadow: var(--lift-2);
  color: var(--ink-3);
  transform: translateY(0);
  transition: opacity .18s var(--ease);
}
.ptr.is-armed { color: var(--accent); border-color: var(--accent); }
.ptr__spin { display: grid; place-items: center; transition: transform .2s var(--ease); }
.ptr.is-armed .ptr__spin { transform: rotate(180deg); }
.ptr.is-loading .ptr__spin { animation: ptrSpin .7s linear infinite; transform: none; }
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* ---- PRESS FEEDBACK -------------------------------------------------------------
   :active is unreliable on touch — iOS won't apply it without a touch listener, and
   it lingers after scroll-cancelled taps. A class driven by touch events is honest. */
.is-pressed { transform: scale(.96); opacity: .85; transition: transform .08s ease-out; }
.tabbar__item.is-pressed { transform: scale(.92); }

/* ---- KEYBOARD ---------------------------------------------------------------------
   --kb is published by native.js from visualViewport. Without this the tab bar sits
   behind the soft keyboard and a focused field can end up underneath it. */
html.kb-open .tabbar { transform: translateY(100%); pointer-events: none; }
.tabbar { transition: transform .22s var(--ease); }
html.kb-open .app-main, html.kb-open .view-root { padding-bottom: var(--kb, 0px) !important; }

/* ---- INSTALLED APP ----------------------------------------------------------------
   Installed, the app owns the status bar area, so the top bar must extend under it or
   content collides with the clock and battery. In a browser tab this must NOT apply —
   the browser chrome is already there. */
html.is-standalone .app-topbar {
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
}
html.is-standalone .app-sidebar { padding-top: calc(env(safe-area-inset-top, 0px) + var(--sp-5)); }

/* ---- TOUCH CHROME -----------------------------------------------------------------
   UI chrome shouldn't be selectable — long-pressing a nav item and getting a text
   selection handle is the single clearest "this is a web page" tell. Content stays
   selectable, because copying an invoice number is a real thing people do. */
.app-topbar, .app-sidebar, .tabbar, .nav-item, .btn-ios-primary, .btn-ios-secondary,
.btn-ios-ghost, .row-act, .segmented, .badge-ios, .act-chip, .kpi-card__label {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.data-table td, .act-sum, .view-header, .balance__fig, .mono, .led { -webkit-user-select: text; user-select: text; }

/* Buttons and scrollers declare their gesture intent, so the browser doesn't wait
   ~300ms to find out whether a tap was the start of a double-tap zoom. */
button, .nav-item, .tabbar__item, .row-act, .segmented__item { touch-action: manipulation; }
.app-main, .view-root, .modal-body { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }

/* Rubber-banding the whole document reveals the page background behind the app and
   instantly breaks the illusion. Scroll belongs to the panes, not the document. */
html, body { overscroll-behavior: none; }

@media (prefers-reduced-motion: reduce) {
  .ptr__spin, .is-pressed, .tabbar { transition: none; animation: none; }
}

/* =====================================================================================
 *  NATIVE — SCREEN TRANSITIONS, SHEETS, SWIPE
 * ===================================================================================== */

/* ---- PAGE TRANSITIONS ------------------------------------------------------------
   Native apps move DIRECTIONALLY: going deeper pushes in from the right, going back
   slides out to it. That direction is the whole point — it tells you where you are in
   the hierarchy without a single word of UI. A crossfade in both directions looks
   smooth and communicates nothing.
   Transform and opacity only, so no layout runs mid-transition. */
.view-root { will-change: auto; }
.view-root.vt-push-in  { animation: vtPushIn .28s var(--ease) both; }
.view-root.vt-pop-in   { animation: vtPopIn  .28s var(--ease) both; }
@keyframes vtPushIn { from { opacity: 0; transform: translate3d(18px, 0, 0); } }
@keyframes vtPopIn  { from { opacity: 0; transform: translate3d(-18px, 0, 0); } }

/* ---- BOTTOM SHEETS ----------------------------------------------------------------
   On a phone a centred dialog is a desktop idiom: it floats in dead space and its
   buttons land where the thumb can't reach. A sheet rises from the bottom edge, which
   is both the native convention and where the hand already is. */
@media (max-width: 767.98px) {
  .modal-dialog {
    margin: 0; position: fixed; left: 0; right: 0; bottom: 0;
    max-width: none !important; width: 100%;
    transform: translateY(100%);
    transition: transform .3s var(--ease);
  }
  .modal.show .modal-dialog { transform: translateY(0); }
  .modal-content, .hm-modal {
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-bottom: 0;
    max-height: 92vh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* The grabber: a universally understood "drag me down". */
  .modal-content::before {
    content: ""; display: block; width: 36px; height: 4px; margin: 8px auto 0;
    background: var(--line-strong); border-radius: var(--r-pill); flex: 0 0 auto;
  }
  .modal-header { border-bottom: 1px solid var(--line); padding-top: 10px; }
  .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  /* Footer buttons go full width and stack — thumb targets, not desktop button rows. */
  .modal-footer { flex-direction: column-reverse; gap: 8px; border-top: 1px solid var(--line); }
  .modal-footer > .btn-ios-primary,
  .modal-footer > .btn-ios-secondary { width: 100%; justify-content: center; padding: 13px 16px; }
  .modal-dialog.is-dragging { transition: none; }
}

/* ---- SWIPE ACTIONS ----------------------------------------------------------------
   Revealed by dragging a row left. The row itself translates; the actions sit behind it
   and are never animated, so the whole gesture is one composited transform. */
.swipe { position: relative; overflow: hidden; }
.swipe__body { position: relative; z-index: 1; background: var(--surface); transition: transform .24s var(--ease); }
.swipe__body.is-dragging { transition: none; }
.swipe__acts {
  position: absolute; inset: 0 0 0 auto; z-index: 0;
  display: flex; align-items: stretch;
}
.swipe__act {
  width: 76px; border: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; color: #fff; font-size: .7rem; font-weight: 600;
}
.swipe__act i { font-size: 1.1rem; }
.swipe__act--send { background: var(--accent); }
.swipe__act--wa   { background: #25D366; }
.swipe__act--del  { background: var(--critical); }

/* ---- OFFLINE ---------------------------------------------------------------------
   A quiet strip, not a modal. Being offline isn't an error — the write queue is
   handling it — so it should inform without interrupting. */
.net-strip {
  position: fixed; left: 0; right: 0; z-index: 1150;
  top: calc(env(safe-area-inset-top, 0px) + var(--topbar-h));
  background: var(--attention); color: #fff;
  font-size: .76rem; font-weight: 600; text-align: center; padding: 6px 12px;
  transform: translateY(-100%);
  /* translateY alone does NOT hide this. The strip sits at z-index 1150, above the
     topbar's 1030, so sliding it up parks it ON TOP of the topbar rather than behind
     it — and with no text it is still 12px of padding, reading as a coloured rule
     welded under the header. visibility is what actually removes it, and it is
     stacking-independent so no future z-index change can bring the line back.
     Delayed on hide so the slide-out finishes first; immediate on show. */
  visibility: hidden;
  transition: transform .25s var(--ease), visibility 0s .25s;
}
.net-strip.is-on {
  transform: translateY(0);
  visibility: visible;
  transition: transform .25s var(--ease), visibility 0s 0s;
}
.net-strip.is-back { background: var(--positive); }

@media (prefers-reduced-motion: reduce) {
  .view-root.vt-push-in, .view-root.vt-pop-in { animation: none; }
  .modal-dialog, .swipe__body, .net-strip { transition: none; }
}

/* =====================================================================================
 *  INVOICE LIST — TWO RENDERINGS, ONE SOURCE
 *  A seven-column table on a 390px screen is unreadable at any font size: you either
 *  scroll sideways hunting for the amount, or shrink the text past legibility. So the
 *  phone gets cards carrying the three facts that matter — who, how much, how urgent.
 *
 *  Both renderings sit in the DOM and CSS picks. The alternative — a resize listener
 *  re-rendering the list — flickers and loses scroll position on every rotation.
 * ===================================================================================== */
.inv-cards { display: none; }

@media (max-width: 767.98px) {
  .inv-table { display: none; }
  .inv-cards { display: block; }

  .inv-card { border-bottom: 1px solid var(--line); }
  .inv-card:last-child { border-bottom: 0; }
  .inv-card .swipe__body { padding: 14px var(--sp-4); cursor: pointer; }

  .inv-card__top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
  .inv-card__no { font-size: .82rem; font-weight: 600; color: var(--ink); }
  .inv-card__who { font-size: .875rem; color: var(--ink); font-weight: 500; margin-bottom: 8px; }

  .inv-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
  .inv-card__due  { font-size: .74rem; color: var(--ink-3); }
  /* Days-late is overdue information, so it takes the overdue colour. It was amber,
     which put it in the same visual family as "payment expected" — the opposite of
     what it means. Red is reserved for late, and this is late. */
  .inv-card__late {
    font-size: .7rem; font-weight: 600; color: var(--st-late-ink);
    background: rgba(239, 68, 68, .11); padding: 3px 8px; border-radius: var(--r-pill);
  }
  /* The amount is the reason the screen exists, so it gets the most weight on the card. */
  .inv-card__amt {
    font-family: var(--font-display); font-variant-numeric: tabular-nums;
    font-size: 1.02rem; font-weight: 600; letter-spacing: -.02em;
    text-align: right; line-height: 1.2; color: var(--ink);
  }
  .inv-card__amt em {
    display: block; font-style: normal; font-size: .68rem;
    font-weight: 400; color: var(--ink-3); letter-spacing: 0;
  }
}

/* ===================================================================================
 *  CUSTOMERS — Phase 4 (rich directory + profile drawer), Zoho-competitive
 * ================================================================================= */
.csum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.csumc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--lift-1); padding: 15px 16px; transition: box-shadow .18s var(--ease), transform .18s var(--ease); }
.csumc:hover { box-shadow: var(--lift-2); transform: translateY(-1px); }
.csumc__l { font-size: .72rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.csumc__v { font-family: var(--font-ledger); font-size: 1.4rem; font-weight: 500; margin-top: 6px; letter-spacing: -.02em; }

.cust-toggle { display: flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 3px; }
.cust-toggle button { width: 36px; height: 34px; border: 0; background: transparent; border-radius: var(--r-sm); color: var(--ink-3); cursor: pointer; display: grid; place-items: center; transition: background .15s var(--ease), color .15s var(--ease); }
.cust-toggle button.on { background: var(--surface); color: var(--accent); box-shadow: var(--lift-1); }

/* avatar with gradient ring */
.cava { border-radius: var(--r-pill); flex: 0 0 auto; position: relative; display: grid; place-items: center; color: #fff; font-weight: 650; font-size: 1.05rem; box-shadow: var(--lift-1); }
.cava::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; padding: 3px; background: linear-gradient(135deg, var(--accent), #8B5CF6); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; pointer-events: none; }

/* grid of value cards */
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ccard { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--lift-1); padding: 18px; cursor: pointer; overflow: hidden; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.ccard:hover { box-shadow: var(--lift-2); transform: translateY(-2px); }
.ccard:active { transform: translateY(0) scale(.995); }
.ccard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ccard__top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ccard__id { min-width: 0; }
.ccard__name { font-family: var(--font-display); font-weight: 650; font-size: 1rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccard__loc { font-size: .8rem; color: var(--ink-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccard__stats { display: flex; gap: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.ccard__st { flex: 1; min-width: 0; }
.ccard__st b { font-family: var(--font-ledger); font-size: 1rem; font-weight: 600; display: block; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccard__st em { font-size: .66rem; color: var(--ink-3); font-style: normal; text-transform: uppercase; letter-spacing: .04em; }
.ccard__st--owed b { color: var(--st-late-ink); }
.ccard__bell { position: absolute; top: 16px; right: 16px; font-size: .85rem; color: var(--st-paid-ink); }

/* list mode: value columns + avatar */
.cust-table .clist-name { display: flex; align-items: center; gap: 11px; }
.cust-table tbody tr { cursor: pointer; }
.cust-table tbody tr:hover { background: var(--surface-2); }

/* ---- profile drawer ---- */
#cust-drawer { position: fixed; inset: 0; z-index: 1200; pointer-events: none; }
#cust-drawer.is-open { pointer-events: auto; }
.scrim { position: absolute; inset: 0; background: rgba(10, 31, 68, .28); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .42s var(--ease); }
#cust-drawer.is-open .scrim { opacity: 1; }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 92vw); background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(253,253,251,.62)); backdrop-filter: blur(34px) saturate(1.7); -webkit-backdrop-filter: blur(34px) saturate(1.7); border-left: 1px solid rgba(255,255,255,.55); box-shadow: -24px 0 70px -24px rgba(10, 31, 68, .34), inset 1px 0 0 rgba(255,255,255,.5); padding: 24px; padding-top: 22px; overflow-y: auto; transform: translateX(100%); transition: transform .42s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
#cust-drawer.is-open .drawer { transform: none; }
/* a soft sheen along the top inner edge — the "glass catching light" that reads as premium */
.drawer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 120px; background: linear-gradient(180deg, rgba(255,255,255,.35), transparent); pointer-events: none; }
html[data-theme="dark"] .drawer { background: linear-gradient(180deg, rgba(30,41,59,.72), rgba(20,29,46,.62)); border-left-color: rgba(255,255,255,.08); box-shadow: -24px 0 70px -24px rgba(0,0,0,.5), inset 1px 0 0 rgba(255,255,255,.06); }
.dwr-x { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); cursor: pointer; display: grid; place-items: center; color: var(--ink-2); transition: background .15s, color .15s; }
.dwr-x:hover { background: var(--surface-2); color: var(--ink); }
.dwr-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding-right: 40px; }
.dwr-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
.dwr-loc { font-size: .85rem; color: var(--ink-3); margin-top: 2px; }
.dwr-acts { display: flex; gap: 8px; margin-bottom: 4px; }
.dwr-act { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); font: inherit; font-size: .85rem; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: all .15s var(--ease); }
.dwr-act:hover { background: var(--surface-2); color: var(--ink); }
.dwr-act--primary { background: var(--accent); color: #fff; border-color: transparent; box-shadow: var(--lift-1); }
.dwr-act--primary:hover { background: var(--accent-press); color: #fff; }
.dwr-ltv { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; margin: 16px 0; box-shadow: var(--lift-1); }
.dwr-ltv__cap { font-size: .72rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.dwr-ltv__v { font-family: var(--font-ledger); font-size: 1.7rem; font-weight: 500; margin: 6px 0 6px; letter-spacing: -.02em; }
.dwr-ltv__svg { display: block; height: 66px; }
.dwr-ltv__empty, .dwr-empty { font-size: .82rem; color: var(--ink-3); padding: 8px 0; }
.dwr-stat3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.dwr-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; }
.dwr-stat b { font-family: var(--font-ledger); font-size: 1.05rem; display: block; letter-spacing: -.01em; }
.dwr-stat em { font-size: .64rem; color: var(--ink-3); font-style: normal; text-transform: uppercase; letter-spacing: .04em; }
.dwr-sec { font-family: var(--font-display); font-size: .78rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin: 18px 0 8px; }
.dwr-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .86rem; color: var(--ink); text-decoration: none; }
.dwr-row i { color: var(--ink-3); width: 18px; text-align: center; }
a.dwr-row:hover { color: var(--accent); }
.dwr-inv { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; border-radius: var(--r-md); background: var(--surface-2); margin-bottom: 7px; font-size: .84rem; text-decoration: none; color: var(--ink); transition: background .15s var(--ease); }
.dwr-inv:hover { background: var(--surface-sunken); }
.dwr-inv__n { display: flex; align-items: center; gap: 8px; font-family: var(--font-ledger); font-weight: 600; }
.dwr-inv__n em { font-family: var(--font); font-style: normal; }
.dwr-inv b { font-family: var(--font-ledger); }

@media (max-width: 640px) {
  .csum { grid-template-columns: 1fr 1fr; }
  .cgrid { grid-template-columns: 1fr; }
  .drawer { width: 100vw; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scrim, .drawer, .ccard, .csumc { transition: none !important; }
}

/* ===================================================================================
 *  CUSTOMERS LIST MODE — native elevation (was reading as a plain spreadsheet)
 * ================================================================================= */
.cust-table { border-collapse: separate; border-spacing: 0; }
.cust-table thead th {
  background: transparent; border-bottom: 0; color: var(--ink-3);
  font-size: .7rem; letter-spacing: .05em; padding: 8px 16px 12px;
}
.cust-table tbody td { border-bottom: 0; padding: 12px 16px; vertical-align: middle; }
.cust-table tbody tr {
  cursor: pointer; transition: background .16s var(--ease), box-shadow .2s var(--ease), transform .16s var(--ease);
}
.cust-table tbody tr td:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.cust-table tbody tr td:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.cust-table tbody tr:hover {
  background: var(--surface-2); transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px rgba(10,31,68,.16);
}
.cust-table .clist-name { display: flex; align-items: center; gap: 12px; }
.cust-table .clist-name strong { font-weight: 650; }
.cust-table .mono { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ===================================================================================
 *  DOCUMENTS — Phase 6 (native document library with live text previews)
 * ================================================================================= */
.doc-toggle { display: flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 3px; }
.doc-toggle button { width: 36px; height: 34px; border: 0; background: transparent; border-radius: var(--r-sm); color: var(--ink-3); cursor: pointer; display: grid; place-items: center; transition: background .15s var(--ease), color .15s var(--ease); }
.doc-toggle button.on { background: var(--surface); color: var(--accent); box-shadow: var(--lift-1); }

.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.dcard { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--lift-1); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; height: 230px; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.dcard:hover { box-shadow: var(--lift-2); transform: translateY(-2px); }
.dcard:active { transform: translateY(0) scale(.995); }
.dcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dcard__glow { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; transition: opacity .2s var(--ease); z-index: 2; }
.dcard:hover .dcard__glow { opacity: .9; }
.dcard__paper { flex: 1; padding: 16px 16px 0; background: linear-gradient(180deg, var(--surface), var(--surface-2)); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .62rem; line-height: 1.5; color: var(--ink-3); overflow: hidden; white-space: pre-wrap; word-break: break-word; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.dcard__foot { padding: 12px 15px; border-top: 1px solid var(--line); background: var(--surface); }
.dcard__title { display: flex; align-items: center; gap: 9px; font-weight: 650; font-size: .9rem; margin-bottom: 7px; }
.dcard__t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcard__ico { width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--accent-wash); color: var(--accent); display: grid; place-items: center; font-size: .85rem; flex: 0 0 auto; }
.dcard__meta { display: flex; align-items: center; gap: 8px; font-size: .72rem; color: var(--ink-3); flex-wrap: wrap; }
.dcard__dot { opacity: .5; }
.dcard__link { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 8px; font-weight: 600; color: var(--ink-2); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* hover-reveal edit/delete overlay */
.dcard__acts { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; opacity: 0; transition: opacity .18s var(--ease); z-index: 3; }
.dcard:hover .dcard__acts { opacity: 1; }
.dcard__act { width: 30px; height: 30px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); color: var(--ink-2); cursor: pointer; display: grid; place-items: center; box-shadow: var(--lift-1); transition: background .15s, color .15s; }
.dcard__act:hover { background: var(--surface-2); color: var(--ink); }
.dcard__act.doc-del:hover { color: var(--critical); }

/* list mode: elevated, avatar-forward */
.doc-table { border-collapse: separate; border-spacing: 0; }
.doc-table thead th { background: transparent; border-bottom: 0; color: var(--ink-3); font-size: .7rem; letter-spacing: .05em; padding: 8px 16px 12px; }
.doc-table tbody td { border-bottom: 0; padding: 12px 16px; vertical-align: middle; }
.doc-table tbody tr { cursor: pointer; transition: background .16s var(--ease), box-shadow .2s var(--ease), transform .16s var(--ease); }
.doc-table tbody tr td:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.doc-table tbody tr td:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.doc-table tbody tr:hover { background: var(--surface-2); transform: translateY(-1px); box-shadow: 0 6px 18px -8px rgba(10,31,68,.16); }
.dlist-name { display: flex; align-items: center; gap: 11px; }
.dlist-prev { font-size: .74rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }

@media (max-width: 640px) { .dgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .dgrid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .dcard, .dcard__glow, .dcard__acts, .doc-table tbody tr { transition: none !important; } }

/* ===================================================================================
 *  EMAIL TEMPLATES — Phase 7 (mini-preview cards + split-screen live preview)
 * ================================================================================= */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.tcard { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--lift-1); overflow: hidden; padding-bottom: 4px; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.tcard:hover { box-shadow: var(--lift-2); transform: translateY(-2px); }
.tcard.is-active { border-color: rgba(16,185,129,.28); }
.tcard.is-active:hover { box-shadow: 0 10px 30px -10px rgba(16,185,129,.28); }
.tcard__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; }
.tcard__name { font-family: var(--font-display); font-weight: 650; font-size: 1rem; letter-spacing: -.01em; }
.tcard__covers { font-size: .76rem; color: var(--ink-3); margin-top: 2px; }
.tmail { margin: 0 18px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.tmail__bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.tmail__dot { width: 8px; height: 8px; border-radius: 50%; }
.tmail__subj { padding: 10px 14px 4px; font-size: .82rem; font-weight: 650; color: var(--ink); }
.tmail__body { padding: 0 14px 14px; font-size: .78rem; color: var(--ink-2); line-height: 1.5; }
.tmail__var { background: var(--accent-wash); color: var(--accent); border-radius: 4px; padding: 0 4px; font-weight: 600; font-size: .92em; white-space: nowrap; }
.tcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; }
.tcard__vars { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.tvar { font-size: .68rem; font-weight: 600; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 7px; }
.tedit { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); font: inherit; font-size: .82rem; font-weight: 600; color: var(--ink-2); cursor: pointer; flex: 0 0 auto; transition: background .15s, color .15s; }
.tedit:hover { background: var(--surface-2); color: var(--ink); }

/* split-screen editor */
.tsplit { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tchips { display: flex; flex-wrap: wrap; gap: 6px; }
.tchip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); border-radius: var(--r-pill); padding: 5px 10px; font-size: .78rem; line-height: 1; cursor: pointer; transition: border-color .15s, color .15s; }
.tchip i { font-size: .72rem; }
.tchip:hover { border-color: var(--accent); color: var(--accent); }
.tphone { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; display: flex; flex-direction: column; }
.tphone__label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.tphone__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--lift-1); }
.tphone__from { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.tphone__ava { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #8B5CF6); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .8rem; flex: 0 0 auto; }
.tphone__meta b { font-size: .85rem; }
.tphone__meta div { font-size: .72rem; color: var(--ink-3); }
.tphone__subj { padding: 12px 14px 6px; font-weight: 650; font-size: .92rem; }
.tphone__body { padding: 0 14px 16px; font-size: .85rem; color: var(--ink-2); line-height: 1.6; }
@media (max-width: 720px) { .tsplit { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tcard, .tedit, .tchip { transition: none !important; } }

/* Documents — document-type segmented toggle (Customer document / General note) */
.doc-typeseg { display: inline-flex; gap: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 3px; }
.doc-typeseg button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: var(--ink-2); border-radius: var(--r-sm); padding: 8px 14px; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease); }
.doc-typeseg button i { font-size: .9rem; opacity: .8; }
.doc-typeseg button.on { background: var(--surface); color: var(--accent); box-shadow: var(--lift-1); }
.doc-typeseg button.on i { opacity: 1; }
@media (max-width: 480px) { .doc-typeseg { width: 100%; } .doc-typeseg button { flex: 1; justify-content: center; } }

/* =====================================================================================
 *  CHROME v2  —  dark command rail  (v2.36.0)
 *
 *  Appended deliberately rather than edited in place. A scripted pass over this file in
 *  v2.34.1 corrupted a comment block and silently commented out live CSS; appending
 *  cannot damage what is already here, and the cascade does the rest. The superseded
 *  rules above are inert but harmless.
 *
 *  Why the rail is dark: every screen we rebuilt — the dashboard hero, the About
 *  screen — speaks the aurora language. The sidebar is the one element on screen at all
 *  times, so leaving it light made the app read as two products stitched together. Dark
 *  chrome makes the frame the frame and the content the picture.
 * =================================================================================== */

/* ---------------------------------------------------------------- the rail --------- */
.app-sidebar {
  position: relative;
  overflow: hidden auto;
  padding: var(--sp-4) 12px;
  background: radial-gradient(125% 110% at 25% 0%, #182142 0%, #0A0F22 52%, #05070F 100%);
  border-right: 0;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.app-sidebar::-webkit-scrollbar { width: 6px; }
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 3px; }

/* One soft aurora field at the top. Static: a rail is on screen permanently, and
   something moving in the corner of your eye all day is a cost, not a delight. */
.app-sidebar::before {
  content: "";
  position: absolute; top: -22%; left: -35%;
  width: 170%; height: 46%;
  background: radial-gradient(circle, rgba(99,102,241,.42) 0%, rgba(79,70,229,.14) 34%, transparent 66%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.sidebar__head, .sidebar__nav, .sidebar__footer { position: relative; z-index: 1; }
.sidebar__label { color: rgba(226,232,255,.42); letter-spacing: .1em; }
.sidebar__collapse { color: rgba(226,232,255,.55); }
.sidebar__collapse:hover { background: rgba(255,255,255,.09); color: #fff; }

/* ---------------------------------------------------------------- nav items -------- */
.nav-item {
  position: relative;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: .855rem;
  font-weight: 600;
  color: rgba(226,232,255,.66);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-item i { font-size: 1.02rem; width: 20px; color: inherit; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }

/* The active marker is an edge bar with a glow rather than a filled block: it reads at a
   glance without the item shouting louder than the content it points at. */
.nav-item.is-active {
  background: rgba(255,255,255,.12);
  color: #fff;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.nav-item.is-active i { color: #fff; }
.nav-item.is-active::before {
  content: "";
  position: absolute; left: -12px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px;
  border-radius: 0 3px 3px 0;
  background: #7DD3FC;
  box-shadow: 0 0 12px rgba(125,211,252,.9);
}
.nav-item:focus-visible { outline: 2px solid #7DD3FC; outline-offset: 2px; }

/* ---------------------------------------------------------------- workspace chip --- */
.sidebar__footer {
  border-top: 1px solid rgba(255,255,255,.09);
  padding-top: var(--sp-3);
}
.workspace-chip {
  padding: 9px;
  border-radius: 13px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
}
.workspace-chip__logo img { width: 28px; height: 28px; border-radius: 9px; box-shadow: none; }
.workspace-chip__name { color: #fff; font-size: .8rem; }
.workspace-chip__sub { color: rgba(226,232,255,.5); }
.sidebar__version { color: rgba(226,232,255,.45); }

/* ---------------------------------------------------------------- top bar ---------- */
.app-topbar {
  gap: var(--sp-3);
  border-bottom: 1px solid var(--separator);
}
.topbar__logo { width: 32px; height: 32px; border-radius: 10px; }
.topbar__brand-text { font-weight: 800; letter-spacing: -.025em; }

/* A search field should look like somewhere you can type, not like a disabled input. */
.topbar__search { max-width: 460px; }
.topbar__search-input {
  height: 40px;
  border-radius: 12px;
  background: var(--surface-sunken);
  border: 1px solid transparent;
  font-size: .86rem;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.topbar__search-input:focus {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--blue-soft);
}
.topbar__search::after {
  content: "/";
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: .68rem; font-weight: 700; line-height: 1;
  color: var(--text-tertiary);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.topbar__search:focus-within::after { opacity: 0; }

/* ---------------------------------------------------------------- user chip -------- */
/* Card with a presence dot. The previous chip stacked a name over a lowercase role with
   no visual anchor, which is what made it read as an unfinished control. */
.user-chip {
  gap: 10px;
  padding: 5px 13px 5px 5px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--lift-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.user-chip:hover { background: var(--surface); transform: translateY(-1px); box-shadow: var(--lift-2); }
.user-chip:active { transform: translateY(0); }
.user-chip__avatar {
  width: 34px; height: 34px;
  border-radius: 11px;
  background: radial-gradient(120% 120% at 30% 0%, #1B2444 0%, #0A0F22 100%);
  color: #8FC2FF;
  font-weight: 900; font-size: .82rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.user-chip__name { font-size: .82rem; font-weight: 750; letter-spacing: -.01em; }
.user-chip__role {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 700;
  color: var(--text-tertiary);
  text-transform: capitalize;
}
.user-chip__role::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--positive);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--positive) 22%, transparent);
}
.user-chip__caret { font-size: .66rem; margin-left: 2px; }

/* ---------------------------------------------------------------- notifications ---- */
.notif-bell {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  display: grid; place-items: center;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.notif-bell:hover { background: var(--surface-sunken); color: var(--text); }
.notif-badge {
  position: absolute; top: 4px; right: 4px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--critical);
  color: #fff;
  font-size: .62rem; font-weight: 800; line-height: 17px;
  text-align: center;
  border: 2px solid var(--surface);
  box-shadow: 0 2px 8px -2px rgba(240,68,56,.8);
}

.notif-panel {
  position: fixed;
  z-index: 1200;
  width: min(388px, calc(100vw - 24px));
  max-height: min(72vh, 560px);
  display: flex; flex-direction: column;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: 0 28px 70px -22px rgba(10,14,30,.42), 0 0 0 1px rgba(255,255,255,.05) inset;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(.985);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.notif-panel.is-open { opacity: 1; transform: none; }

.notif-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--separator);
  font-size: .95rem; font-weight: 750; color: var(--text);
}
.notif-actions { display: flex; gap: 4px; }
.notif-readall, .notif-unreadall {
  border: 0; background: transparent;
  font: inherit; font-size: .75rem; font-weight: 650;
  color: var(--accent);
  padding: 5px 9px; border-radius: 8px; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.notif-readall:hover, .notif-unreadall:hover { background: var(--blue-soft); }
.notif-list { overflow-y: auto; -webkit-overflow-scrolling: touch; }

.notif-item { position: relative; display: flex; align-items: stretch; }
.notif-item + .notif-item { border-top: 1px solid var(--separator); }
/* Unread gets a wash and a left edge, so "new" is legible without reading anything. */
.notif-item.is-unread { background: linear-gradient(90deg, var(--blue-soft), transparent 62%); }
.notif-item.is-unread::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent);
}
.notif-hit {
  flex: 1; min-width: 0;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 8px 13px 16px;
  border: 0; background: transparent; text-align: left;
  font: inherit; color: var(--text); cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.notif-hit:hover { background: var(--surface-sunken); }
.notif-ico {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 11px;
  display: grid; place-items: center;
  font-size: .9rem;
}
.notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-title { font-size: .845rem; font-weight: 650; line-height: 1.35; color: var(--text); }
.notif-sub {
  font-size: .78rem; color: var(--text-secondary); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notif-meta { font-size: .73rem; color: var(--text-tertiary); }
.notif-who { font-weight: 650; color: var(--text-secondary); }
.notif-dot { display: none; }   /* the row already carries its own edge marker */
.notif-toggle {
  flex: 0 0 auto;
  width: 38px;
  border: 0; background: transparent;
  color: var(--text-tertiary);
  cursor: pointer; font-size: .95rem;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.notif-toggle:hover { color: var(--accent); background: var(--surface-sunken); }

.notif-empty { padding: 40px 22px; text-align: center; }
.notif-empty i { font-size: 1.75rem; color: var(--text-tertiary); display: block; margin-bottom: 10px; }
.notif-empty p { margin: 0; font-size: .88rem; font-weight: 600; color: var(--text); }
.notif-empty span { display: block; margin-top: 4px; font-size: .78rem; color: var(--text-tertiary); }

/* ---------------------------------------------------------------- responsive ------- */
@media (max-width: 640px) {
  .topbar__search::after { display: none; }
  .user-chip { padding: 4px; border-radius: 12px; }
  .user-chip__meta, .user-chip__caret { display: none; }
  .notif-panel { width: calc(100vw - 16px); }
}

@media (prefers-reduced-motion: reduce) {
  .user-chip, .nav-item, .notif-panel, .notif-hit, .topbar__search-input { transition: none; }
  .user-chip:hover { transform: none; }
}

/* =====================================================================================
 *  CHROME v2.1  —  gap fix, glass rail, flowing collapse  (v2.36.1)
 * =================================================================================== */

/* ---------------------------------------------------------------- 1. THE GAP -------
 *  v2.36.0 set `position: relative` on the rail so the aurora ::before had something to
 *  anchor to. That overrode the original `position: sticky`, which turned the existing
 *  `top: var(--topbar-h)` from a sticky threshold into a literal 60px downward shift —
 *  the awkward space under the header.
 *
 *  `sticky` is itself a positioned element, so absolutely-positioned children anchor to
 *  it perfectly well. The glow never needed `relative` in the first place.
 * ---------------------------------------------------------------------------------- */
.app-sidebar {
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));

  /* ------------------------------------------------------------ 2. GLASS -----------
   *  Translucent rather than solid, so the warm page ground tints through and the panel
   *  stops reading as a painted block. backdrop-filter earns its keep in two places: the
   *  mobile drawer, where it genuinely sits over content, and at the right edge where
   *  the main column scrolls beneath the rounded corner.
   * -------------------------------------------------------------------------------- */
  background:
    linear-gradient(180deg, rgba(20, 28, 62, .90) 0%, rgba(9, 13, 30, .93) 45%, rgba(4, 6, 15, .95) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, .09),
    inset 1px 1px 0 rgba(255, 255, 255, .07),
    8px 0 34px -22px rgba(4, 6, 16, .8);
}

/* A single specular highlight down the inner edge — the detail that separates "dark
   translucent panel" from "glass". */
.app-sidebar::after {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 42%);
  pointer-events: none;
  z-index: 2;
}

/* ---------------------------------------------------------------- 3. COLLAPSE ------
 *  Labels were `display: none`, which cannot be animated — the rail snapped between two
 *  states. They now collapse their own width and fade, so the whole rail flows.
 * ---------------------------------------------------------------------------------- */
.app-shell { transition: grid-template-columns .34s cubic-bezier(.22, 1, .36, 1); }
.app-sidebar { transition: padding .34s cubic-bezier(.22, 1, .36, 1); }

.nav-item span,
.sidebar__label,
.workspace-chip__meta {
  display: block;
  min-width: 0;
  max-width: 180px;
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
  transition:
    max-width .34s cubic-bezier(.22, 1, .36, 1),
    opacity .18s linear,
    margin .34s cubic-bezier(.22, 1, .36, 1);
}
.app-shell.is-collapsed .nav-item span,
.app-shell.is-collapsed .sidebar__label,
.app-shell.is-collapsed .workspace-chip__meta {
  display: block;          /* beats the earlier display:none so it can animate */
  max-width: 0;
  opacity: 0;
  margin-left: -11px;
}
.app-shell.is-collapsed .workspace-chip__meta { margin-left: -10px; }

.nav-item {
  justify-content: flex-start;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    padding .34s cubic-bezier(.22, 1, .36, 1);
}
.app-shell.is-collapsed .nav-item { justify-content: center; padding-left: 10px; padding-right: 10px; }
.app-shell.is-collapsed .workspace-chip { justify-content: center; padding-left: 6px; padding-right: 6px; }
.app-shell.is-collapsed .sidebar__head { justify-content: center; }

/* The chevron should point the way it will go. */
.sidebar__collapse i { display: block; transition: transform .34s cubic-bezier(.22, 1, .36, 1); }
.app-shell.is-collapsed .sidebar__collapse i { transform: rotate(180deg); }

/* Collapsed, the labels are gone — so the icons need to say what they are on hover.
   `data-tip` is already set on every nav item by app.js. */
.app-shell.is-collapsed .nav-item { position: relative; }
.app-shell.is-collapsed .nav-item::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) translateX(-4px);
  padding: 6px 11px;
  border-radius: 9px;
  background: #0B1024;
  color: #fff;
  font-size: .76rem; font-weight: 650; letter-spacing: -.005em;
  white-space: nowrap;
  box-shadow: 0 10px 26px -10px rgba(4,6,16,.8), 0 0 0 1px rgba(255,255,255,.1);
  opacity: 0;
  pointer-events: none;
  z-index: 60;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.app-shell.is-collapsed .nav-item:hover::after,
.app-shell.is-collapsed .nav-item:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
/* The active marker sits at the rail edge, so it must not be clipped when collapsed. */
.app-shell.is-collapsed .nav-item.is-active::before { left: -10px; }

@media (prefers-reduced-motion: reduce) {
  .app-shell,
  .app-sidebar,
  .nav-item,
  .nav-item span,
  .sidebar__label,
  .workspace-chip__meta,
  .sidebar__collapse i,
  .app-shell.is-collapsed .nav-item::after { transition: none; }
}

/* On a phone the sidebar is a drawer over content, where the blur is doing real work. */
@media (max-width: 900px) {
  .app-sidebar {
    position: fixed;
    top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
  }
}

/* =====================================================================================
 *  CHROME v2.2  —  real frosted glass + the install card  (v2.37.0)
 * =================================================================================== */

/* ---------------------------------------------------------------- frosted rail -----
 *  v2.36.1 was translucent, but on a desktop the rail sits over a FLAT page colour, so
 *  backdrop-filter had nothing interesting to blur and the panel still read as paint.
 *
 *  Real frosted glass is three things, and only one of them is blur:
 *    1. you can see the ground through it            -> lower alpha
 *    2. it has surface texture                       -> grain
 *    3. light catches its edges                      -> specular highlight + rim
 * ---------------------------------------------------------------------------------- */
.app-sidebar {
  background:
    linear-gradient(180deg, rgba(22, 31, 68, .78) 0%, rgba(10, 15, 34, .82) 46%, rgba(5, 8, 18, .86) 100%);
  -webkit-backdrop-filter: blur(30px) saturate(190%) brightness(.92);
  backdrop-filter: blur(30px) saturate(190%) brightness(.92);
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, .10),
    inset 0 1px 0 rgba(255, 255, 255, .13),
    10px 0 40px -26px rgba(4, 6, 16, .85);
}

/* Grain: the texture that makes a surface read as frosted rather than tinted. Sits above
   the aurora glow, below the content. */
.app-sidebar::before {
  background: radial-gradient(circle at 30% 0%, rgba(99,102,241,.34) 0%, rgba(79,70,229,.11) 34%, transparent 66%);
  height: 100%;
  top: -10%;
  opacity: .9;
}

/* Rim light along the top inner edge, where a real pane would catch the room. */
.app-sidebar::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.05) 26%, rgba(255,255,255,0) 60%);
  width: 1px;
}

/* Give the blur something worth blurring: the main column slides under the rail's edge
   instead of butting up against it. */
.app-main { position: relative; z-index: 0; }
.app-sidebar { z-index: 5; }

/* =====================================================================================
 *  CHROME v2.3  —  a rail you can see THROUGH  (v2.37.1)
 *
 *  "Glass" here meant transparency, not frosted texture: you should be able to see the
 *  page behind the rail. v2.37.0 added grain and read as busy rather than see-through.
 *
 *  The tension is legibility. Pure transparency over a light page turns the panel to a
 *  mid grey and white labels fall below readable contrast. The alpha below is the most
 *  see-through the rail can be while keeping label text at 4.5:1 or better — measured,
 *  not guessed.
 * =================================================================================== */
.app-sidebar {
  background:
    linear-gradient(180deg, rgba(17, 24, 56, .70) 0%, rgba(9, 14, 32, .74) 48%, rgba(5, 8, 18, .78) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, .10),
    inset 0 1px 0 rgba(255, 255, 255, .10),
    8px 0 30px -24px rgba(4, 6, 16, .7);
}
.app-sidebar::after {
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 30%, rgba(255,255,255,0) 62%);
}

/* Labels brightened to survive the transparency. Measured at alpha .70 the blended rail
   sits around rgb(83,88,109); at the old .66 text alpha that gave 3.53:1, which is below
   readable. Raising the TEXT keeps the rail as see-through as asked rather than solving
   it by darkening the glass back down. */
.nav-item { color: rgba(233, 238, 255, .90); }
.nav-item:hover { color: #fff; }
.sidebar__label { color: rgba(226, 232, 255, .62); }
.workspace-chip__sub { color: rgba(226, 232, 255, .70); }
.sidebar__collapse { color: rgba(233, 238, 255, .78); }

/* =====================================================================================
 *  CHROME v3  —  off-milky rail  (v2.38.0)   Stripe × Mercury
 *
 *  The dark rail was the right call for tying the app to the aurora identity, but it
 *  competed with the content. This is the opposite discipline: the chrome recedes and
 *  the numbers carry the page.
 *
 *  What makes it read as Stripe/Mercury rather than "a white sidebar":
 *    - warm off-white, never pure #FFF. The page is #F2F2EE; the rail sits a shade above
 *      it, so the boundary is a change in temperature rather than a line.
 *    - the active item is a RAISED white pill, not a coloured block. Colour appears once,
 *      on the icon. Restraint is the whole aesthetic.
 *    - hairline separators at ~7% instead of grey rules.
 *    - one weight step between active and inactive, not two.
 * =================================================================================== */
.app-sidebar {
  background:
    linear-gradient(180deg, rgba(253, 253, 251, .82) 0%, rgba(248, 248, 244, .76) 55%, rgba(245, 245, 240, .74) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(175%);
  backdrop-filter: blur(24px) saturate(175%);
  box-shadow:
    inset -1px 0 0 rgba(10, 31, 68, .07),
    inset 0 1px 0 rgba(255, 255, 255, .8),
    6px 0 26px -22px rgba(10, 31, 68, .28);
}

/* A whisper of warmth at the top instead of the aurora field — enough to stop the panel
   reading as flat paint, far too little to notice as a colour. */
.app-sidebar::before {
  background: radial-gradient(circle at 28% 0%, rgba(255, 236, 214, .55) 0%, rgba(255, 240, 226, .18) 38%, transparent 68%);
  mix-blend-mode: normal;
  opacity: .85;
  height: 46%;
  top: 0;
}
.app-sidebar::after {
  background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 40%, rgba(255,255,255,0) 78%);
}

/* ---- nav ---- */
.sidebar__label { color: var(--text-tertiary); }
.sidebar__collapse { color: var(--text-tertiary); }
.sidebar__collapse:hover { background: rgba(10, 31, 68, .05); color: var(--text); }

.nav-item { color: var(--text-secondary); font-weight: 600; }
.nav-item i { color: var(--text-tertiary); }
.nav-item:hover { background: rgba(10, 31, 68, .045); color: var(--text); }
.nav-item:hover i { color: var(--text-secondary); }

/* Raised white pill. The lift comes from a 1px ring plus a soft shadow, the way a Stripe
   segmented control does it — not from a fill colour shouting for attention. */
.nav-item.is-active {
  background: #FFFFFF;
  color: var(--text);
  font-weight: 700;
  box-shadow:
    0 1px 2px rgba(10, 31, 68, .07),
    0 4px 12px -6px rgba(10, 31, 68, .16),
    inset 0 0 0 1px rgba(10, 31, 68, .06);
}
/* Colour appears exactly once. */
.nav-item.is-active i { color: var(--accent); }
.nav-item.is-active::before {
  background: var(--accent);
  box-shadow: none;
  width: 3px;
  height: 18px;
  opacity: .9;
}
.nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- workspace ---- */
.sidebar__footer { border-top: 1px solid rgba(10, 31, 68, .08); }
.workspace-chip {
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(10, 31, 68, .07);
  box-shadow: 0 1px 2px rgba(10, 31, 68, .05);
}
.workspace-chip__name { color: var(--text); }
.workspace-chip__sub { color: var(--text-tertiary); }
.sidebar__version { color: var(--text-tertiary); }

/* Collapsed tooltips stay dark — a floating label needs to sit ON the page, not blend
   into the rail it came from. */
.app-shell.is-collapsed .nav-item::after {
  background: #141C2E;
  box-shadow: 0 10px 26px -10px rgba(10, 31, 68, .5), 0 0 0 1px rgba(255, 255, 255, .08);
}

/* Dark theme: the same idea, one shade above the page rather than below it. */
html[data-theme="dark"] .app-sidebar {
  background: linear-gradient(180deg, rgba(24, 32, 50, .80) 0%, rgba(19, 26, 42, .76) 100%);
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, .07),
    inset 0 1px 0 rgba(255, 255, 255, .06),
    6px 0 26px -22px rgba(0, 0, 0, .6);
}
html[data-theme="dark"] .app-sidebar::before {
  background: radial-gradient(circle at 28% 0%, rgba(99, 102, 241, .22) 0%, transparent 62%);
}
html[data-theme="dark"] .app-sidebar::after {
  background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 60%);
}
html[data-theme="dark"] .nav-item.is-active {
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
html[data-theme="dark"] .workspace-chip {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .09);
}

/* The muted tier is fine for body copy on a card, but on the rail these sat at 3.48:1.
   Section label and workspace sub-line moved up a tier. Measured, not guessed. */
.sidebar__label { color: #636F8B; }
.workspace-chip__sub { color: var(--text-secondary); }
html[data-theme="dark"] .sidebar__label { color: rgba(226, 232, 255, .70); }
html[data-theme="dark"] .workspace-chip__sub { color: rgba(226, 232, 255, .74); }

/* =====================================================================================
 *  CHROME v3.1  —  dark mode: the rail disappears  (v2.38.1)
 *
 *  In light mode the rail sits a shade ABOVE the page — that is what makes it read as
 *  milky glass. Carrying the same idea into dark mode was wrong: a panel lighter than
 *  the page reads as a raised slab and fights the content.
 *
 *  In dark, the rail takes the page colour exactly and vanishes. Structure comes from a
 *  single 5% hairline, not from a change in tone.
 * =================================================================================== */
html[data-theme="dark"] .app-sidebar {
  /* --bg is #0A0F1C. Matching it means the boundary is the hairline and nothing else. */
  background: linear-gradient(180deg, rgba(10, 15, 28, .94) 0%, rgba(10, 15, 28, .96) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .05);
}
/* No glow and no rim: both existed to give a raised panel its edges, and there is no
   longer a raised panel. */
html[data-theme="dark"] .app-sidebar::before { background: none; opacity: 0; }
html[data-theme="dark"] .app-sidebar::after { background: none; }

/* With no panel to sit on, the active item carries the whole job of showing where you
   are — so it gets a touch more presence than its light-mode counterpart. */
html[data-theme="dark"] .nav-item.is-active {
  background: rgba(255, 255, 255, .085);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}
html[data-theme="dark"] .nav-item:hover { background: rgba(255, 255, 255, .055); }
html[data-theme="dark"] .workspace-chip {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .075);
}
html[data-theme="dark"] .sidebar__footer { border-top-color: rgba(255, 255, 255, .07); }

/* =====================================================================================
 *  MOBILE DASHBOARD  —  Phase 1  (v2.40.0)
 *
 *  A different screen, not a narrower one. Everything here is scoped to the phone
 *  breakpoint AND to html.dm-on, which js/views/dashboard.js sets only while the mobile
 *  dashboard is mounted — so the shell overrides below can never leak into another view.
 *
 *  Tokens are --m-* rather than the global ones: this screen can be re-skinned without
 *  touching a stylesheet that ten other views depend on.
 * ================================================================================== */

@media (max-width: 767.98px) {

  html.dm-on {
    /* ---- surfaces ---- */
    --m-bg:        #F2F2EE;
    --m-surface:   #FDFDFB;
    --m-surface-2: #F6F6F2;
    --m-hair:      rgba(10, 31, 68, .10);
    --m-hair-2:    rgba(10, 31, 68, .17);
    --m-ink:       #0A1F44;
    --m-ink-2:     #4A5878;
    /* Was #7A87A3, which measured 3.2:1 against the page and 3.5:1 against a card —
       under the 4.5 AA minimum for text this size, and a large part of why the
       screen read as washed out. Now 4.6:1 / 5.0:1. */
    --m-ink-3:     #626E8A;
    /* The CTA is monochrome on purpose. The moment it turns --accent it stops reading
       as a native primary action and starts reading as a framework button. */
    --m-chip-on:   #0A1F44;
    --m-chip-ink:  #FDFDFB;
    --m-cta-bg:    #1A1C1E;   /* dark charcoal — matches --m-char so every primary button is consistent (was navy #0A1F44) */
    --m-cta-ink:   #FFFFFF;
    --m-glass:     rgba(242, 242, 238, .72);
    --m-scrim:     linear-gradient(to top, #F2F2EE 42%, rgba(242,242,238,.86) 68%, rgba(242,242,238,0));

    --m-gutter: 16px;
    --m-nav-h:  52px;
    --m-r-card: 18px;
    --m-r-tile: 12px;
  }

  /* Deepened from the global #0A0F1C so cards separate crisply on OLED. Still navy-black,
     so there is no seam against the tab bar or any other view. */
  html.dm-on[data-theme="dark"] {
    --m-bg:        #070B15;
    --m-surface:   #111A2B;
    --m-surface-2: #18233A;
    --m-hair:      rgba(238, 242, 249, .08);
    --m-hair-2:    rgba(238, 242, 249, .15);
    --m-ink:       #EEF2F9;
    --m-ink-2:     #9AA8C4;
    --m-ink-3:     #7B8AA9;   /* was #6B7A99 = 4.04:1 on a card, under AA. Now 5.0:1. */
    --m-chip-on:   #EEF2F9;
    --m-chip-ink:  #070B15;
    --m-cta-bg:    #F7F8FB;
    --m-cta-ink:   #070B15;
    --m-glass:     rgba(7, 11, 21, .72);
    --m-scrim:     linear-gradient(to top, #070B15 42%, rgba(7,11,21,.86) 68%, rgba(7,11,21,0));
  }

  /* ---- shell: this screen owns its own navigation bar, the way a native screen does --
     Scoped to dm-on, so every other view keeps the app top bar and its search. */
  html.dm-on .app-topbar { display: none; }
  html.dm-on .app-shell  { grid-template-rows: 0 1fr; background: var(--m-bg); }
  html.dm-on .app-main   { padding: 0 !important; background: var(--m-bg); }
  html.dm-on .view-root  { padding: 0 !important; max-width: none; animation: none; }
  html.dm-on, html.dm-on body { background: var(--m-bg); overflow-x: clip; }

  /* ---- page ---- */
  .dm {
    display: grid; grid-template-rows: auto auto 1fr;
    min-width: 0; min-height: 100dvh;
    color: var(--m-ink);
  }
  /* Grid and flex children default to min-width:auto and refuse to shrink below their
     content. Without this the month rail widens its own track instead of scrolling, and
     takes the whole page sideways. This one line is most of the anti-clipping story. */
  .dm > * { min-width: 0; }
  .dm *, .dm *::before, .dm *::after { box-sizing: border-box; }

  /* Chrome is not selectable — long-pressing a nav item and getting a selection handle
     is the clearest "this is a web page" tell there is. Money and invoice numbers stay
     selectable, because copying an invoice number is a real thing people do. */
  .dm__nav, .dm__period, .dm__dock, .sect__eyebrow, .kpi__label {
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  }
  .dm .money, .dm .mono { -webkit-user-select: none; user-select: none; }
  .dm button, .dm a, .dm [role="button"] {
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }

  /* ---- nav ---- */
  .dm__nav {
    position: sticky; top: 0; z-index: 30;
    height: calc(var(--m-nav-h) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) var(--m-gutter) 0;
    display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center;
    background: var(--m-glass);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
  .dm__ws {
    margin: 0; min-width: 0;
    font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.02em;
    color: var(--m-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .dm__gear {
    width: 44px; height: 44px; margin-right: -10px;
    display: grid; place-items: center;
    border: 0; background: transparent; color: var(--m-ink-2);
    font-size: 19px; text-decoration: none; cursor: pointer; border-radius: 50%;
  }

  /* ---- period ---- */
  .dm__period {
    position: sticky; top: calc(var(--m-nav-h) + env(safe-area-inset-top, 0px)); z-index: 29;
    padding: 6px 0 10px;
    background: var(--m-glass);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--m-hair);
  }
  .dm__month {
    margin: 0 var(--m-gutter) 10px;
    font-family: var(--font-display);
    font-size: clamp(24px, 6.8vw, 28px); font-weight: 650; letter-spacing: -.03em; line-height: 1.15;
    color: var(--m-ink);
  }

  /* proximity snap, not mandatory: mandatory fights a fast flick and feels magnetic.
     pan-x means a horizontal drag can never steal vertical scroll. contain-x means
     swiping past the last month never fires the browser's back gesture. */
  .mrail {
    display: flex; gap: 6px; align-items: center;
    padding: 0 var(--m-gutter);
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--m-gutter);
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 26px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 26px), transparent 100%);
  }
  .mrail::-webkit-scrollbar { display: none; }

  .mrail__chip {
    position: relative; flex: 0 0 auto; scroll-snap-align: center;
    height: 32px; padding: 0 12px;
    display: inline-flex; align-items: center; gap: 5px;
    border: 0; border-radius: 999px; background: transparent;
    font: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: .055em;
    color: var(--m-ink-3); text-transform: uppercase; white-space: nowrap; cursor: pointer;
    transition: background .18s cubic-bezier(.2,.8,.2,1), color .18s cubic-bezier(.2,.8,.2,1);
  }
  /* The chip stays visually 32px to match the reference; the hit target is a transparent
     44px overlay. Reference proportions and the 44px rule, with no compromise on either. */
  .mrail__chip::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    height: 44px; transform: translateY(-50%);
  }
  .mrail__chip[aria-selected="true"] { background: var(--m-chip-on); color: var(--m-chip-ink); }
  .mrail__chip.is-empty { opacity: .5; }
  .mrail__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .65; }
  .mrail__chip[aria-selected="true"] .mrail__dot { opacity: .8; }

  /* ---- scroller ---- */
  .dm__scroll {
    padding: 18px var(--m-gutter) calc(150px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 26px;
    min-width: 0;
  }

  /* ---- figures ---- */
  .kpiduo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi {
    min-width: 0; min-height: 104px;
    display: grid; grid-template-rows: auto auto auto; align-content: start; gap: 7px;
    padding: 14px;
    background: var(--m-surface); border: 1px solid var(--m-hair);
    border-radius: var(--m-r-card);
  }
  .kpi__label { min-width: 0; font-size: 12px; font-weight: 500; color: var(--m-ink-2); overflow-wrap: anywhere; }
  .kpi__val {
    min-width: 0;
    font-family: var(--font); font-variant-numeric: tabular-nums;
    font-size: clamp(20px, 7.2vw, 27px); font-weight: 600; letter-spacing: -.03em; line-height: 1.05;
    color: var(--m-ink); white-space: nowrap;
  }
  .kpi__meta { font-size: 11.5px; color: var(--m-ink-3); min-width: 0; }
  .kpi__cur {
    position: relative;
    display: inline-flex; align-items: center; gap: 4px; margin-left: 6px;
    padding: 1px 6px; border-radius: 999px;
    border: 1px solid var(--m-hair-2); background: transparent;
    font: inherit; font-size: 10.5px; font-weight: 600; color: var(--m-ink-3);
    vertical-align: 2px; cursor: pointer;
  }
  /* Visually a small inline chip; a 44px hit target for the thumb. Same device as the
     rail chips — reference proportions without breaking the touch minimum. */
  .kpi__cur::before {
    content: ""; position: absolute; left: -8px; right: -8px; top: 50%;
    height: 44px; transform: translateY(-50%);
  }

  /* ---- sections ---- */
  .dm .sect { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .dm .sect__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0 2px; }
  .dm .sect__eyebrow {
    min-width: 0; margin: 0;
    font-size: 11px; font-weight: 600; letter-spacing: .10em; text-transform: uppercase;
    color: var(--m-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .dm .sect__link {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end;
    min-width: 44px; min-height: 44px; padding: 0 2px;
    border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--m-ink-2); text-decoration: none; cursor: pointer;
  }
  .dm .sect__link i { font-size: 11px; }

  /* ---- needs chasing ---- */
  .chase {
    display: flex; gap: 10px;
    margin: 0 calc(var(--m-gutter) * -1); padding: 0 var(--m-gutter) 2px;
    overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--m-gutter);
    overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: none;
  }
  .chase::-webkit-scrollbar { display: none; }
  .chase__card {
    flex: 0 0 clamp(220px, 72vw, 262px); scroll-snap-align: start; min-width: 0;
    display: grid; gap: 9px; padding: 14px;
    background: var(--m-surface); border: 1px solid var(--m-hair); border-radius: var(--m-r-card);
  }
  .chase__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: baseline; }
  .chase__who {
    min-width: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var(--m-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .chase__owed { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: 14.5px; font-weight: 600; color: var(--m-ink); white-space: nowrap; }
  .chase__age { font-size: 11.5px; font-weight: 600; }
  .chase__bar { height: 3px; border-radius: 2px; background: var(--m-hair); overflow: hidden; }
  .chase__bar i { display: block; height: 100%; border-radius: 2px; }
  .chase__acts { display: flex; gap: 6px; }
  .chase__act {
    flex: 1 1 0; min-width: 0; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    border: 1px solid var(--m-hair); border-radius: 10px;
    background: var(--m-surface-2); color: var(--m-ink-2);
    font: inherit; font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer;
  }

  /* ---- transactions ----
     grid, not flex: icon fixed / meta flexible AND truncatable / amount intrinsic.
     Names truncate, money never does — the ellipsis always lands where it can afford to. */
  .txns { background: var(--m-surface); border: 1px solid var(--m-hair); border-radius: var(--m-r-card); overflow: hidden; }
  .txn {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center; gap: 12px;
    padding: 12px 14px; min-height: 64px; width: 100%;
    border: 0; border-bottom: 1px solid var(--m-hair);
    background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer;
  }
  .txn:last-child { border-bottom: 0; }
  .txn__ico {
    width: 40px; height: 40px; border-radius: var(--m-r-tile);
    display: grid; place-items: center;
    background: var(--m-surface-2); color: var(--m-ink-2); font-size: 17px;
  }
  .txn__ico.is-pay { background: var(--positive-wash); color: var(--st-paid-bar); }
  .txn__meta { min-width: 0; display: grid; gap: 3px; }
  .txn__who {
    min-width: 0; font-size: 14.5px; font-weight: 550; letter-spacing: -.01em; color: var(--m-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .txn__sub { min-width: 0; font-size: 11.5px; color: var(--m-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .txn__sub .mono { font-family: var(--font-ledger); font-size: 11px; font-weight: 500; }
  .txn__right { display: grid; justify-items: end; gap: 5px; }
  .txn__amt { font-variant-numeric: tabular-nums; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var(--m-ink); white-space: nowrap; }
  .txn__amt.is-pay { color: var(--st-paid-ink); }
  .txns__empty { margin: 0; padding: 26px 16px; font-size: 13px; color: var(--m-ink-3); text-align: center; }

  /* Status carries a colour AND a word. Colour alone fails for anyone who cannot see it. */
  .dm .stat {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px 2px 6px; border-radius: 999px;
    font-size: 10.5px; font-weight: 650; white-space: nowrap;
  }
  .dm .stat i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
  .dm .stat--due   { color: var(--st-due-ink);   background: rgba(245, 158, 11, .13); }
  .dm .stat--late  { color: var(--st-late-ink);  background: rgba(239, 68, 68, .13); }
  .dm .stat--paid  { color: var(--st-paid-ink);  background: rgba(16, 185, 129, .13); }
  .dm .stat--draft { color: var(--st-draft-ink); background: rgba(148, 163, 184, .16); }

  /* ---- insights ---- */
  .dm-ins { display: grid; gap: 14px; min-width: 0; }
  .insights {
    display: grid; grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center; gap: 12px;
    width: 100%; min-height: 56px; padding: 10px 14px;
    background: var(--m-surface); border: 1px solid var(--m-hair); border-radius: var(--m-r-card);
    font: inherit; color: inherit; text-align: left; cursor: pointer;
  }
  .insights__ico {
    width: 38px; height: 38px; border-radius: var(--m-r-tile); display: grid; place-items: center;
    background: var(--m-surface-2); color: var(--m-ink-2); font-size: 15px;
  }
  .insights__t2 { min-width: 0; display: grid; gap: 2px; }
  .insights__t { min-width: 0; font-size: 14px; font-weight: 550; color: var(--m-ink); }
  .insights__s { min-width: 0; font-size: 11.5px; color: var(--m-ink-3); }
  .insights__c { color: var(--m-ink-3); font-size: 13px; transition: transform .2s cubic-bezier(.2,.8,.2,1); }
  .insights[aria-expanded="true"] .insights__c { transform: rotate(90deg); }
  .dm-ins__body { display: grid; gap: 14px; min-width: 0; }
  .dm-ins__body > * { min-width: 0; }

  /* ---- dock ----
     The scrim never eats a tap, so content passes visibly beneath the pill rather than
     under a solid tray. The pill steps aside while you read; the tab bar never moves. */
  .dm__dock {
    position: fixed; left: 0; right: 0; z-index: 35;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    padding: 22px var(--m-gutter) 12px;
    background: var(--m-scrim);
    pointer-events: none;
    transition: transform .26s cubic-bezier(.2, .8, .2, 1);
  }
  .dm__dock.is-away { transform: translateY(calc(100% + 12px)); }
  .dm__cta {
    pointer-events: auto;
    width: 100%; min-height: 52px;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    border: 0; border-radius: 999px;
    background: var(--m-cta-bg); color: var(--m-cta-ink);
    font: inherit; font-size: 14px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase;
    cursor: pointer; transition: transform .12s ease-out;
  }
  .dm__cta:active { transform: scale(.98); }
  /* Without this the pill floats over the soft keyboard, mirroring the existing tab-bar rule. */
  html.kb-open .dm__dock { transform: translateY(calc(100% + 12px)); pointer-events: none; }

  /* ---- skeleton: same shape as the real thing, or the page changes size on load ---- */
  .dm .sk {
    background: var(--m-surface); border: 1px solid var(--m-hair); border-radius: var(--m-r-card);
    position: relative; overflow: hidden;
  }
  .dm .sk::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, var(--m-surface-2), transparent);
    transform: translateX(-100%);
    animation: dmSk 1.3s cubic-bezier(.4, 0, .6, 1) infinite;
  }
  @keyframes dmSk { to { transform: translateX(100%); } }

  /* ---- currency sheet ---- */
  .cur-sheet__r {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline;
    padding: 12px 2px; border-bottom: 1px solid var(--m-hair);
    font-size: 14px; font-weight: 550;
  }
  .cur-sheet__r:last-of-type { border-bottom: 0; }
  .cur-sheet__r .money { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .cur-sheet__note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--m-ink-3); }

  @media (prefers-reduced-motion: reduce) {
    .mrail__chip, .dm__cta, .dm__dock, .insights__c { transition: none; }
    .dm .sk::after { animation: none; }
  }
}

/* =====================================================================================
 *  MOBILE DASHBOARD — DESIGN PASS  (v2.41.0)
 *
 *  Three structural moves, then the small things that separate "nice" from "beautiful":
 *    1. The primary figure becomes a FILLED navy card. One object owns the screen.
 *    2. Every figure carries its own six-month shape and a change since last month.
 *    3. Transaction tiles are tinted BY STATUS, so the list reads as colour first.
 *
 *  Colour still only ever means something. Every tint encodes a status, every line
 *  encodes a trend. Nothing here is decorative — that restraint is the whole difference
 *  between this and a themed dashboard.
 * ================================================================================== */

@media (max-width: 767.98px) {

  html.dm-on {
    --hero-a: #13294F;
    --hero-b: #0A1F44;
    --hero-ink:   #FFFFFF;
    --hero-ink-2: rgba(255, 255, 255, .74);
    --hero-ink-3: rgba(255, 255, 255, .58);   /* .38 measured 3.4:1 on navy. This is 6.2:1. */
    --hero-line:  rgba(255, 255, 255, .34);
    --hero-glow:  rgba(120, 165, 255, .30);

    /* Two shadows per level: a tight contact shadow that sits the card on the page, and a
       wide soft one for the ambient. A single shadow always reads as a sticker. */
    --m-lift:      0 1px 2px rgba(10, 31, 68, .05), 0 10px 26px -14px rgba(10, 31, 68, .22);
    --m-lift-hero: 0 2px 4px rgba(10, 31, 68, .10), 0 18px 38px -18px rgba(10, 31, 68, .45);
    --m-up:   #0E7C5A;
    --m-down: #B4451F;
    --sev-warm-ink: #B4451F;   /* #F97316 is fine as a bar, 3.0:1 as text. This is 5.9:1. */

    --m-r-card: 20px;
    --m-r-tile: 13px;
  }
  html.dm-on[data-theme="dark"] {
    --hero-a: #1B2E56;
    --hero-b: #111E38;
    --hero-ink:   #F2F6FF;
    --hero-ink-2: rgba(242, 246, 255, .74);
    --hero-ink-3: rgba(242, 246, 255, .58);
    --hero-line:  rgba(160, 190, 255, .48);
    --hero-glow:  rgba(96, 140, 235, .34);
    /* Shadows are invisible on a near-black page and only muddy it. Depth comes from
       surface lightness — except under the hero, which earns one soft ambient pool. */
    --m-lift: none;
    --m-lift-hero: 0 18px 40px -22px rgba(0, 0, 0, .92);
    --m-up:   #34D399;
    --m-down: #F87171;
    --sev-warm-ink: #FDBA74;
  }

  /* ---- the pair ---- */
  .kpiduo { align-items: stretch; }
  .kpi {
    min-height: 132px;
    grid-template-rows: auto auto auto 1fr;
    box-shadow: var(--m-lift);
  }

  .kpi--hero {
    position: relative; overflow: hidden;
    border-color: transparent;
    background: linear-gradient(157deg, var(--hero-a) 0%, var(--hero-b) 100%);
    /* The inset hairline is the glass edge — it is what stops a filled card looking
       like a rectangle of paint. */
    box-shadow: var(--m-lift-hero), inset 0 1px 0 rgba(255, 255, 255, .10);
  }
  /* A single soft light source, top-right. Flat fills are most of what "dead" means. */
  .kpi--hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 90% at 92% -10%, var(--hero-glow), transparent 60%);
  }
  /* Fine grain. Static, rasterised once, no animation — it removes the plastic
     flatness that a pure CSS gradient always has on a large filled surface. */
  .kpi--hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    /* No mix-blend-mode: it disables compositor fast paths, and this layer sits inside
       a card that animates on entry. Plain low-opacity grain costs nothing. */
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .kpi--hero > * { position: relative; z-index: 1; }
  .kpi--hero .kpi__label { color: var(--hero-ink-2); }
  .kpi--hero .kpi__val   { color: var(--hero-ink); }
  .kpi--hero .kpi__meta  { color: var(--hero-ink-3); }
  .kpi--hero .kpi__cur   { border-color: rgba(255, 255, 255, .30); color: var(--hero-ink-2); }

  /* ---- change since last month ---- */
  .delta {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .delta i { font-size: 12px; line-height: 1; margin-left: -2px; }
  .delta--up   { color: var(--m-up); }
  .delta--down { color: var(--m-down); }
  .kpi--hero .delta--up   { color: #6EE7B7; }
  .kpi--hero .delta--down { color: #FCA5A5; }

  /* ---- six-month shape ---- */
  .spark { display: block; width: 100%; height: 30px; margin-top: auto; overflow: visible; }
  .spark path.l { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .spark path.f { stroke: none; }
  /* Draws itself in. stroke-dashoffset is composited, so this costs no layout. */
  .spark path.l { stroke-dasharray: 320; stroke-dashoffset: 320; animation: sparkDraw .9s cubic-bezier(.4, 0, .2, 1) .18s forwards; }
  .spark circle { opacity: 0; animation: sparkDot .3s ease-out .95s forwards; }
  @keyframes sparkDraw { to { stroke-dashoffset: 0; } }
  @keyframes sparkDot  { to { opacity: 1; } }

  /* ---- transaction tiles carry the status ---- */
  .txn { position: relative; transition: background .14s ease-out; }
  .txn:active { background: var(--m-surface-2); }
  .txn__ico.t-due   { background: rgba(245, 158, 11, .14); color: var(--st-due-ink); }
  .txn__ico.t-late  { background: rgba(239, 68, 68, .14);  color: var(--st-late-ink); }
  .txn__ico.t-paid  { background: rgba(16, 185, 129, .14); color: var(--st-paid-ink); }
  .txn__ico.t-draft { background: var(--m-surface-2);      color: var(--m-ink-3); }
  /* A 2px rail on an overdue row: findable while scrolling, costs no horizontal space. */
  .txn.is-late::before {
    content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
    border-radius: 0 2px 2px 0; background: var(--st-late-bar);
  }
  /* Inset dividers, starting where the text starts. A full-bleed rule chops the list into
     slabs; an inset one lets it read as a single object. */
  .txn { border-bottom: 0; }
  .txn:not(:last-child)::after {
    content: ""; position: absolute; left: 66px; right: 0; bottom: 0;
    height: 1px; background: var(--m-hair);
  }

  /* ---- eyebrow gets a status dot ---- */
  .dm .sect__eyebrow { display: inline-flex; align-items: center; gap: 7px; }
  .eb-dot { width: 5px; height: 5px; border-radius: 50%; flex: 0 0 auto; }

  /* ---- chase card ---- */
  .chase__card { box-shadow: var(--m-lift); }
  .chase__top { grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
  .dm .av {
    width: 32px; height: 32px; border-radius: 10px; flex: 0 0 auto;
    display: grid; place-items: center;
    font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  }
  /* Age as a gradient: amber into red. The bar says how bad, not merely how long. */
  .chase__bar i { background: linear-gradient(90deg, var(--st-due-bar), var(--st-late-bar)); }
  .chase__act { transition: background .14s ease-out; }
  .chase__act:active { background: var(--m-hair); }

  /* ---- the selected month sits slightly proud ---- */
  .mrail__chip[aria-selected="true"] { box-shadow: 0 2px 10px -4px rgba(10, 31, 68, .55); }
  html.dm-on[data-theme="dark"] .mrail__chip[aria-selected="true"] { box-shadow: 0 2px 12px -4px rgba(0, 0, 0, .8); }

  /* ---- insights + dock press ---- */
  .insights { box-shadow: var(--m-lift); transition: background .14s ease-out; }
  .insights:active { background: var(--m-surface-2); }
  .txns { box-shadow: var(--m-lift); }

  /* ---- the screen assembles rather than appearing ---- */
  @keyframes dmIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .dm-in { animation: dmIn .42s cubic-bezier(.2, .8, .2, 1) both; }
  .dm__scroll > .dm-in:nth-child(1) { animation-delay: .02s; }
  .dm__scroll > .dm-in:nth-child(2) { animation-delay: .07s; }
  .dm__scroll > .dm-in:nth-child(3) { animation-delay: .12s; }
  .dm__scroll > .dm-in:nth-child(4) { animation-delay: .17s; }
  /* Drop the compositor layer once it has landed. */
  .dm-in { will-change: opacity, transform; }
  .dm-in.is-done { will-change: auto; }

  @media (prefers-reduced-motion: reduce) {
    .dm-in { animation: none; }
    .spark path.l { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
    .spark circle { opacity: 1; animation: none; }
    .txn, .insights, .chase__act { transition: none; }
  }
}

/* =====================================================================================
 *  MOBILE DASHBOARD — CHARCOAL LEDGER  (v2.42.0)
 *
 *  Append-only. Redefines the --m-* tokens to a charcoal system (light + dark) and adds
 *  the new components under fresh class names (panels / mchase / mtxn) so no existing
 *  rule is touched or overridden by accident. The app-wide frosted tab bar + centred FAB
 *  are keyed by #app-tabbar so they win the cascade without editing the original .tabbar
 *  rules. The scroll model, gestures and every data function are unchanged.
 * ================================================================================== */

@media (max-width: 767.98px) {

  /* ---- charcoal tokens (light) ---- */
  html.dm-on {
    --m-bg:        #F4F4F2;
    --m-surface:   #FFFFFF;
    --m-surface-2: #F5F5F3;
    --m-hair:      rgba(17, 18, 20, .09);
    --m-hair-2:    rgba(17, 18, 20, .14);
    --m-ink:       #16181B;
    --m-ink-2:     #525A6B;   /* 7.0:1 on #FFF */
    --m-ink-3:     #69707F;   /* 4.7:1 on #FFF */
    --m-char:      #1A1C1E;
    --m-coral:     #D93A2F;   /* text-grade coral: 4.7:1 on #FFF */
    --m-coral-wash:rgba(217, 58, 47, .10);
    --m-green:     #0F8A5F;   /* 4.6:1 on #FFF */
    --m-green-wash:rgba(15, 138, 95, .11);
    --m-amber:     #A65500;   /* 4.7:1 on #FFF */
    --m-amber-wash:rgba(166, 85, 0, .11);
    --m-amber-2:   #C06400;   /* vivid amber for solid tiles + dots (white glyph ≥3:1) */
    --m-onbrand:   #FFFFFF;   /* glyph/text sitting on a solid brand tile */
    --m-glass:     rgba(244, 244, 242, .62);
    --m-lift:      0 1px 2px rgba(16, 24, 40, .04), 0 10px 22px -14px rgba(16, 24, 40, .16);
    --m-nav-h:     64px;
    --m-ring-page: #F4F4F2;
  }
  html.dm-on[data-theme="dark"] {
    --m-bg:        #121316;
    --m-surface:   #1B1D21;
    --m-surface-2: #25272C;
    --m-hair:      rgba(255, 255, 255, .09);
    --m-hair-2:    rgba(255, 255, 255, .15);
    --m-ink:       #F3F4F6;
    --m-ink-2:     #A6ACB8;
    --m-ink-3:     #838A98;   /* 4.8:1 on #1B1D21 */
    --m-char:      #F3F4F6;
    --m-coral:     #FF7A70;
    --m-coral-wash:rgba(255, 107, 97, .15);
    --m-green:     #3BD79E;
    --m-green-wash:rgba(55, 211, 154, .15);
    --m-amber:     #F5B851;
    --m-amber-wash:rgba(245, 184, 81, .15);
    --m-amber-2:   #F5B851;   /* dark tiles reuse the bright amber */
    --m-onbrand:   #0C110F;   /* near-black glyph on bright brand tiles */
    --m-glass:     rgba(18, 19, 22, .6);
    --m-lift:      0 1px 2px rgba(0, 0, 0, .4), 0 12px 26px -16px rgba(0, 0, 0, .7);
    --m-ring-page: #0A0F1C;
  }

  /* ---- nav: two-line brand ---- */
  .dm__nav--v2 { border-bottom: 1px solid var(--m-hair); }
  .dm__brand { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .dm__eb {
    font: 600 10.5px/1 var(--font); letter-spacing: .15em; text-transform: uppercase; color: var(--m-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .dm__nav--v2 .dm__ws { font-size: 20px; line-height: 1.05; }
  .dm__nav--v2 .dm__gear {
    width: 44px; height: 44px; margin-right: 0; border-radius: 13px;
    background: var(--m-surface); border: 1px solid var(--m-hair); box-shadow: var(--m-lift);
    color: var(--m-ink); font-size: 18px;
  }

  /* ---- timeline: month + underline on the active one ---- */
  .mrail--v2 { gap: 2px; }
  .mrail__chip--v2 {
    height: auto; padding: 8px 12px 12px; border-radius: 0; background: transparent !important;
    flex-direction: column; gap: 4px; text-transform: none; letter-spacing: .01em;
    font-size: 13px; font-weight: 600; color: var(--m-ink-3);
  }
  .mrail__chip--v2 .mrail__lbl { display: inline-flex; align-items: baseline; gap: 2px; position: relative; }
  .mrail__yr { font-size: 9px; font-weight: 600; opacity: .7; }
  .mrail__chip--v2[aria-selected="true"] { color: var(--m-ink); }
  .mrail__chip--v2[aria-selected="true"] .mrail__lbl::after {
    content: ""; position: absolute; left: -2px; right: -2px; bottom: -6px;
    height: 2.5px; border-radius: 2px; background: var(--m-char);
  }
  .mrail__chip--v2 .mrail__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--m-ink-3); opacity: .55; }

  /* ---- metric panels ---- */
  .panels { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
  .panel {
    min-width: 0; position: relative; overflow: hidden; padding: 14px 14px 0;
    background: var(--m-surface); border: 1px solid var(--m-hair);
    border-radius: var(--m-r-card); box-shadow: var(--m-lift);
  }
  .panel__lbl {
    display: block; font: 500 11px/1.2 var(--font); color: var(--m-ink-2); margin-bottom: 9px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .panel__val {
    display: block; font-family: var(--font-display); font-variant-numeric: tabular-nums;
    font-size: clamp(20px, 7vw, 24px); font-weight: 650; letter-spacing: -.02em; line-height: 1;
    color: var(--m-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .panel__sub { display: flex; align-items: center; gap: 5px; min-width: 0; margin: 7px 0 12px; font: 450 11.5px/1 var(--font); color: var(--m-ink-3); }
  .panel__sub .lead { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .panel__sub .delta { flex: 0 0 auto; }
  .panel__cur {
    position: relative; flex: 0 0 auto; margin-left: 2px; padding: 1px 6px; border-radius: 999px;
    border: 1px solid var(--m-hair-2); background: transparent; font: 600 10px/1 var(--font); color: var(--m-ink-3);
  }
  .panel__cur::before { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%); }
  .panel__spark { margin: 0 -14px; }
  .panel__spark .spark { width: 100%; height: 46px; }

  /* ---- chase: one prominent card + round actions ---- */
  .mchase {
    position: relative; display: flex; align-items: center; gap: 14px; overflow: hidden; padding: 16px;
    background: var(--m-surface); border: 1px solid var(--m-hair); border-radius: var(--m-r-card); box-shadow: var(--m-lift);
  }
  .mchase__accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--m-coral); }
  .mchase__body { flex: 1 1 auto; min-width: 0; text-align: left; background: transparent; border: 0; padding: 0; }
  .mchase__amt {
    display: block; font-family: var(--font-display); font-variant-numeric: tabular-nums;
    font-size: 22px; font-weight: 650; letter-spacing: -.02em; color: var(--m-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mchase__who { display: block; font: 600 14px/1.2 var(--font); color: var(--m-ink); margin: 7px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mchase__sub { display: block; font: 500 12px/1.2 var(--font); color: var(--m-coral); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mchase__acts { display: flex; gap: 9px; flex: 0 0 auto; }
  .mchase__round {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; text-decoration: none;
    background: var(--m-surface); border: 1px solid var(--m-hair); color: var(--m-char); box-shadow: var(--m-lift);
  }
  .mchase__round--solid { background: var(--m-char); border-color: var(--m-char); color: var(--m-surface); }

  /* ---- transactions ---- */
  .msect__title { margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: var(--m-ink); display: flex; align-items: baseline; gap: 8px; min-width: 0; }
  .msect__cnt { font-family: var(--font-ledger); font-size: 12px; font-weight: 500; color: var(--m-ink-3); flex: 0 0 auto; }
  .mtxns { background: var(--m-surface); border: 1px solid var(--m-hair); border-radius: var(--m-r-card); box-shadow: var(--m-lift); padding: 4px 6px; }
  .mtxn {
    display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 12px 8px;
    background: transparent; border: 0; border-radius: var(--m-r-tile); text-align: left; position: relative;
    transition: background .12s, transform .12s;
  }
  .mtxn:active { background: var(--m-surface-2); transform: scale(.99); }
  .mtxn + .mtxn { border-top: 1px solid var(--m-hair); }
  .mtxn.is-late::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 2px; border-radius: 2px; background: var(--m-coral); }
  .mtxn__ico { width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center; font-size: 17px; background: var(--m-surface-2); border: 1px solid var(--m-hair); color: var(--m-char); }
  .mtxn__ico.t-paid { background: var(--m-green-wash); border-color: transparent; color: var(--m-green); }
  .mtxn__ico.t-late { background: var(--m-coral-wash); border-color: transparent; color: var(--m-coral); }
  .mtxn__ico.t-due  { background: var(--m-amber-wash); border-color: transparent; color: var(--m-amber); }
  .mtxn__ico.t-draft{ background: var(--m-surface-2); color: var(--m-ink-3); }
  .mtxn__meta { flex: 1 1 auto; min-width: 0; }
  .mtxn__t { display: block; font: 600 14px/1.25 var(--font); color: var(--m-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mtxn__s { display: block; font: 450 12px/1.3 var(--font); color: var(--m-ink-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mtxn__s .mono { font-family: var(--font-ledger); font-size: 11px; }
  .mtxn__r { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; max-width: 44%; }
  .mtxn__amt { font-family: var(--font-ledger); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; color: var(--m-ink); white-space: nowrap; }
  .mtxn__amt.is-pay { color: var(--m-green); }
  .mtxn__badge { font: 700 9.5px/1 var(--font); letter-spacing: .03em; text-transform: uppercase; padding: 4px 8px; border-radius: 20px; white-space: nowrap; }
  .mtxn__badge.b-paid { color: var(--m-green); background: var(--m-green-wash); }
  .mtxn__badge.b-late { color: var(--m-coral); background: var(--m-coral-wash); }
  .mtxn__badge.b-due  { color: var(--m-amber); background: var(--m-amber-wash); }
  .mtxn__badge.b-draft{ color: var(--m-ink-3); background: var(--m-surface-2); }
  .mtxn__ring { width: 30px; height: 30px; }
  .mtxn__ring-t { stroke: var(--m-hair-2); }
  .mtxn__ring-p { stroke: var(--m-green); }
  .mtxns__empty { padding: 22px 14px; text-align: center; color: var(--m-ink-3); font-size: 13px; }
  .panel.sk { min-height: 104px; }

  /* ---- app-wide frosted floating tab bar + centred FAB (keyed by id to win the cascade) ---- */
  #app-tabbar.tabbar {
    left: 14px; right: 14px; width: auto; max-width: 420px; margin: 0 auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    height: 66px; display: flex; align-items: center; justify-content: space-around; gap: 2px;
    padding: 0 8px; border-radius: 26px;
    background: rgba(255, 255, 255, .72); border: 1px solid rgba(17, 18, 20, .07);
    box-shadow: 0 20px 48px -18px rgba(16, 24, 40, .34), 0 2px 8px -4px rgba(16, 24, 40, .12), inset 0 1px 0 rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(26px) saturate(185%); backdrop-filter: blur(26px) saturate(185%);
  }
  html[data-theme="dark"] #app-tabbar.tabbar {
    background: rgba(26, 28, 33, .78); border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 22px 52px -18px rgba(0, 0, 0, .72), inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  #app-tabbar .tabbar__item { flex: 1; min-width: 44px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #737A88; background: transparent; border: 0; }
  #app-tabbar .tabbar__item span { font-size: 9.5px; font-weight: 600; letter-spacing: .01em; }
  #app-tabbar .tabbar__item.is-active { color: #1A1C1E; }
  html[data-theme="dark"] #app-tabbar .tabbar__item { color: #838A98; }
  html[data-theme="dark"] #app-tabbar .tabbar__item.is-active { color: #F3F4F6; }

  /* icon wrapper stacks the outline + solid glyph in one cell; active swaps + springs */
  .tabbar__ico { display: grid; place-items: center; width: 26px; height: 26px; }
  .tabbar__ico .ni { grid-area: 1 / 1; width: 26px; height: 26px; }
  #app-tabbar .tabbar__item.is-active .tabbar__ico { animation: tabpop .42s cubic-bezier(.34, 1.56, .64, 1); }
  @keyframes tabpop { 0% { transform: scale(.68); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }

  #app-tabbar .tabbar__fab {
    flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; margin: -22px 6px 0;
    display: grid; place-items: center; color: #fff; background: #1A1C1E; border: 0;
    box-shadow: 0 12px 26px -6px rgba(16, 24, 40, .55), 0 0 0 5px var(--m-ring-page, #F4F4F2);
  }
  #app-tabbar .tabbar__fab .ni { width: 26px; height: 26px; }
  #app-tabbar .tabbar__fab .ni--out { stroke-width: 2; }
  html[data-theme="dark"] #app-tabbar .tabbar__fab { background: #F3F4F6; color: #121316; box-shadow: 0 12px 26px -6px rgba(0, 0, 0, .6), 0 0 0 5px #0A0F1C; }
  #app-tabbar .tabbar__fab:active { transform: scale(.94); }

  @media (prefers-reduced-motion: reduce) {
    .mtxn, .mchase__round, #app-tabbar .tabbar__fab { transition: none; }
    #app-tabbar .tabbar__item.is-active .tabbar__ico { animation: none; }
  }
}

/* =====================================================================================
 *  MOBILE INVOICES — CHARCOAL LEDGER  (v2.43.0)
 *
 *  Append-only. The phone invoices screen (js/views/invoices.js mobile path) reuses the
 *  dashboard's native scope: its container is `.dm iv`, so the shell grid, the frosted
 *  `.dm__nav--v2` header, the `.dm__period` sticky region, `.dm__scroll`, the `.sect`
 *  section styles, the `--m-*` charcoal tokens and the `.sk` shimmer all come for free.
 *  This block adds only what is new to invoices: the sticky search field, the underline
 *  tab rail, the active-tab summary panel, and the swipeable invoice cards. Nothing above
 *  is edited; every selector is a fresh class scoped to the phone breakpoint.
 * ================================================================================== */

@media (max-width: 767.98px) {

  /* ---- sticky sub-header holds search + tabs; the frost/border come from .dm__period -- */
  .iv__sticky { padding: 8px 0 0; }

  /* ---- search ---- */
  .isearch {
    position: relative; display: flex; align-items: center; gap: 9px;
    margin: 0 var(--m-gutter) 10px; height: 46px; padding: 0 4px 0 13px;
    background: var(--m-surface); border: 1px solid var(--m-hair);
    border-radius: 13px; box-shadow: var(--m-lift);
  }
  .isearch__ico { flex: 0 0 auto; font-size: 15px; color: var(--m-ink-3); }
  .isearch__in {
    flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: transparent; outline: none;
    font: 450 15px/1 var(--font); color: var(--m-ink); -webkit-appearance: none; appearance: none;
  }
  .isearch__in::-webkit-search-cancel-button { display: none; }
  .isearch__in::placeholder { color: var(--m-ink-3); }
  .isearch__x {
    flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center;
    border: 0; background: transparent; color: var(--m-ink-3); font-size: 16px; cursor: pointer;
  }
  .isearch.is-busy .isearch__x { visibility: hidden; }
  .isearch.is-busy::after {
    content: ""; position: absolute; right: 14px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px;
    border: 2px solid var(--m-hair-2); border-top-color: var(--m-char); border-radius: 50%;
    animation: ivSpin .7s linear infinite;
  }
  @keyframes ivSpin { to { transform: rotate(360deg); } }

  /* ---- charcoal-tinted "understood" chips (restyle the existing .nl-chips in scope) ---- */
  html.dm-on .nl-chips { margin: 0 var(--m-gutter) 10px; padding: 0; gap: 6px; }
  html.dm-on .nl-chips__l { font-size: .7rem; color: var(--m-ink-3); letter-spacing: .04em; }
  html.dm-on .nl-chips__l > i { color: var(--m-char); }
  html.dm-on .nl-chip {
    background: var(--m-surface); border: 1px solid var(--m-hair); color: var(--m-ink);
    box-shadow: var(--m-lift); border-radius: 999px; padding: 5px 11px;
  }
  html.dm-on .nl-chip > i { color: var(--m-ink-3); }
  html.dm-on .nl-chips__x { color: var(--m-ink-3); }
  html.dm-on .nl-chips__x:hover { background: var(--m-surface-2); color: var(--m-ink); }

  /* ---- tab rail: label + count, underline the active one ---- */
  .itabs {
    display: flex; gap: 2px; align-items: stretch; padding: 0 var(--m-gutter);
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
  }
  .itabs::-webkit-scrollbar { display: none; }
  .itab {
    position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
    height: 44px; padding: 0 6px 8px; border: 0; background: transparent; cursor: pointer;
    font: 600 13.5px/1 var(--font); color: var(--m-ink-3); white-space: nowrap;
  }
  .itab__n {
    font-family: var(--font-ledger); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 600;
    padding: 1px 6px; border-radius: 999px; background: var(--m-surface-2); color: var(--m-ink-3);
  }
  .itab.is-active { color: var(--m-ink); }
  .itab.is-active .itab__n { background: var(--m-char); color: var(--m-surface); }
  .itab.is-active::after {
    content: ""; position: absolute; left: 6px; right: 6px; bottom: 4px; height: 2.5px; border-radius: 2px; background: var(--m-char);
  }
  .itab.is-empty { opacity: .5; }
  .itab.is-empty .itab__n { opacity: .8; }

  /* ---- active-tab summary panel ---- */
  .ivhero {
    position: relative; overflow: hidden; padding: 16px 16px 18px;
    background: var(--m-surface); border: 1px solid var(--m-hair);
    border-radius: var(--m-r-card); box-shadow: var(--m-lift);
  }
  .ivhero__lbl { display: block; font: 600 10.5px/1 var(--font); letter-spacing: .13em; text-transform: uppercase; color: var(--m-ink-3); }
  .ivhero__val {
    display: block; margin: 11px 0 6px; font-family: var(--font-display); font-variant-numeric: tabular-nums;
    font-size: clamp(28px, 9vw, 34px); font-weight: 650; letter-spacing: -.02em; line-height: 1;
    color: var(--m-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ivhero--out .ivhero__val  { color: var(--m-coral); }
  .ivhero--coll .ivhero__val { color: var(--m-green); }
  .ivhero__cap { display: block; font: 450 12.5px/1.3 var(--font); color: var(--m-ink-3); }
  .ivhero__nudge {
    margin-top: 13px; display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
    padding: 8px 13px; border-radius: 999px; border: 1px solid var(--m-coral);
    background: var(--m-coral-wash); color: var(--m-coral); cursor: pointer;
    font: 600 12px/1 var(--font);
  }
  .ivhero__nudge i { font-size: 13px; }
  .ivhero__nudge:active { transform: scale(.97); }

  /* ---- invoice cards ---- */
  .minvs { display: flex; flex-direction: column; gap: 10px; }
  .minv {
    background: var(--m-surface); border: 1px solid var(--m-hair);
    border-radius: var(--m-r-card); box-shadow: var(--m-lift);
  }
  .minv .swipe__body { background: var(--m-surface); border-radius: inherit; }
  .minv__body { display: flex; align-items: center; gap: 12px; padding: 13px 14px; cursor: pointer; }
  .minv.is-late::before {
    content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--m-coral); z-index: 2;
  }
  .minv__ico {
    width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto; display: grid; place-items: center;
    font-size: 19px; background: var(--m-surface-2); border: none; color: var(--m-ink-2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 4px 11px -5px rgba(20,22,26,.35);
    position: relative; overflow: hidden;
  }
  /* A soft top-light gloss so the solid tiles read like real app icons, not flat chips. */
  .minv__ico:not(.t-draft)::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(157deg, rgba(255,255,255,.22), rgba(255,255,255,0) 42%, rgba(0,0,0,.10));
  }
  .minv__ico i { line-height: 1; position: relative; z-index: 1; }
  .minv__ico svg.minv__tring { width: 23px; height: 23px; position: relative; z-index: 1; }
  .minv__ico.t-paid  { background: var(--m-green);   color: var(--m-onbrand); }
  .minv__ico.t-late  { background: var(--m-coral);   color: var(--m-onbrand); }
  .minv__ico.t-due   { background: var(--m-amber-2); color: var(--m-onbrand); }
  .minv__ico.t-draft { background: var(--m-surface-2); color: var(--m-ink-3); box-shadow: inset 0 0 0 1px var(--m-hair); }
  .minv__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .minv__no { font-family: var(--font-ledger); font-size: 11.5px; font-weight: 600; letter-spacing: .01em; color: var(--m-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .minv__who { font: 600 15px/1.25 var(--font); color: var(--m-ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .minv__sub { font: 450 12px/1.2 var(--font); color: var(--m-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .minv__late { color: var(--m-coral); font-weight: 600; }
  .minv__sch  { color: var(--m-amber); }
  .minv__sch i { font-size: 10.5px; }
  .minv__r { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 50%; }
  .minv__amt { font-family: var(--font-ledger); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; color: var(--m-ink); white-space: nowrap; }
  .minv .swipe__act--send { background: var(--m-char); color: var(--m-surface); }

  /* ---- empty / not-found / offline ---- */
  .ivempty { text-align: center; padding: 46px 24px; }
  .ivempty__ico {
    display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; margin-bottom: 14px;
    background: var(--m-surface); border: 1px solid var(--m-hair); box-shadow: var(--m-lift); color: var(--m-ink-3); font-size: 24px;
  }
  .ivempty__t { margin: 0 0 6px; font-family: var(--font-display); font-size: 18px; font-weight: 650; color: var(--m-ink); }
  .ivempty__s { margin: 0 auto; max-width: 30ch; font: 450 13.5px/1.45 var(--font); color: var(--m-ink-3); }

  .minvs.sk { min-height: 280px; }

  @media (prefers-reduced-motion: reduce) {
    .isearch.is-busy::after, .ivhero__nudge { transition: none; }
    .isearch.is-busy::after { animation: none; }
  }
}

/* ── Invoices status polish (v2.43.1): coloured badge dots, stated part-paid.
   Scoped to .iv so the dashboard's own badges are untouched. ── */
@media (max-width: 767.98px) {
  .iv .mtxn__badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px 4px 6px; }
  .iv .mtxn__badge::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex: 0 0 auto;
  }
  /* Vivid amber dot for the owed family (the text stays AA-dark, the dot carries the hue). */
  .iv .mtxn__badge.b-due::before,
  .iv .mtxn__badge.b-part::before { background: var(--m-amber-2); }
  /* Partially paid: amber, same owed family as Pending. */
  .iv .mtxn__badge.b-part { color: var(--m-amber); background: var(--m-amber-wash); }
  /* Cancelled reads as voided: muted card, struck number + amount. */
  .minv.is-cancelled .minv__body { opacity: .68; }
  .minv.is-cancelled .minv__amt,
  .minv.is-cancelled .minv__no { text-decoration: line-through; text-decoration-thickness: 1.5px; }
  /* Tactile press — the whole card dips slightly when tapped (independent of the swipe layer). */
  .minv { transition: transform .13s cubic-bezier(.2,.7,.3,1); }
  .minv:active { transform: scale(.988); }
}

/* ==========================================================================================
   MOBILE PAYMENTS — CHARCOAL LEDGER (v2.44.0)
   A native cash-in screen. Reuses .dm / .dm__nav--v2 / .dm__scroll / .dm__period / .isearch /
   .sk / .dm-in from the dashboard + invoices; everything below is payments-specific and new.
   Green = money in, throughout. Append-only.
   ========================================================================================== */

/* five-step green scale for the method split — defined per theme, consumed by .pv-seg / dots */
html.dm-on .pv { --pg0: var(--m-green); --pg1: #3AA981; --pg2: #67C1A1; --pg3: #9AD7C1; --pg4: #CBEBE0; }
html.dm-on[data-theme="dark"] .pv { --pg0: var(--m-green); --pg1: #2FB085; --pg2: #248C6A; --pg3: #1D6D53; --pg4: #17533F; }

@media (max-width: 767.98px) {
  .pv { min-height: 100%; }
  .pv__acts { display: flex; align-items: center; gap: 10px; }
  .pv .dm__gear { width: 44px; height: 44px; flex: 0 0 auto; }
  .pv-rec {
    width: 44px; height: 44px; border-radius: 13px; border: none; flex: 0 0 auto;
    display: grid; place-items: center; font-size: 19px; cursor: pointer;
    background: var(--m-char); color: var(--m-bg);
    box-shadow: 0 5px 14px -5px rgba(20,22,26,.5);
  }
  .pv-rec:active { transform: scale(.94); }

  .pv__scroll { display: flex; flex-direction: column; gap: 16px; }

  /* ---- hero ---- */
  .pv-hero {
    margin: 4px var(--m-gutter) 0; padding: 18px 18px 14px; border-radius: var(--m-r-card);
    background: var(--m-surface); box-shadow: var(--m-lift); overflow: hidden;
  }
  .pv-hero__eb { margin: 0 0 6px; font: 700 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--m-ink-3); }
  .pv-hero__val { margin: 0; font: 800 clamp(30px, 9vw, 40px)/1.02 var(--font-display); letter-spacing: -.02em; color: var(--m-green); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pv-hero__sub { margin: 7px 0 0; font: 500 12.5px/1.35 var(--font); color: var(--m-ink-2); }
  .pv-hero__delta { font-weight: 800; }
  .pv-hero__delta.is-up { color: var(--m-green); }
  .pv-hero__delta.is-down { color: var(--m-coral); }
  .pv-hero__chart { margin: 12px -18px 0; }
  .pv-area { display: block; width: 100%; height: 118px; color: var(--m-green); }
  .pv-hero__ranges { display: flex; gap: 6px; margin: 12px 0 0; }
  .pv-range {
    flex: 1 1 0; height: 44px; border-radius: 11px; border: none; cursor: pointer;
    font: 700 12px/1 var(--font); letter-spacing: .02em;
    background: var(--m-surface-2); color: var(--m-ink-2);
  }
  .pv-range.is-on { background: var(--m-char); color: var(--m-bg); }
  .pv-range:active { transform: scale(.97); }

  /* ---- method split ---- */
  .pv-split { margin: 0 var(--m-gutter); padding: 16px 18px; border-radius: var(--m-r-card); background: var(--m-surface); box-shadow: var(--m-lift); }
  .pv-split__h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
  .pv-split__t { font: 700 14px/1 var(--font-display); color: var(--m-ink); }
  .pv-split__n { font: 600 11.5px/1 var(--font); color: var(--m-ink-3); }
  .pv-bar { display: flex; height: 12px; border-radius: 7px; overflow: hidden; background: var(--m-surface-2); }
  .pv-seg { height: 100%; min-width: 3px; }
  .pv-seg + .pv-seg { border-left: 2px solid var(--m-surface); }
  .pv-seg.s0, .pv-leg__dot.s0 { background: var(--pg0); }
  .pv-seg.s1, .pv-leg__dot.s1 { background: var(--pg1); }
  .pv-seg.s2, .pv-leg__dot.s2 { background: var(--pg2); }
  .pv-seg.s3, .pv-leg__dot.s3 { background: var(--pg3); }
  .pv-seg.s4, .pv-leg__dot.s4 { background: var(--pg4); }
  .pv-legend { display: flex; flex-direction: column; gap: 9px; margin-top: 13px; }
  .pv-leg { display: flex; align-items: center; gap: 9px; }
  .pv-leg__dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
  .pv-leg__i { font-size: 13px; color: var(--m-ink-3); flex: 0 0 auto; }
  .pv-leg__l { font: 600 13px/1 var(--font); color: var(--m-ink); flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pv-leg__v { font: 700 13px/1 var(--font-ledger); color: var(--m-ink); font-variant-numeric: tabular-nums; flex: 0 0 auto; }

  /* ---- sticky search + period chips ---- */
  .pv__sticky { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .pvchips { display: flex; gap: 8px; padding: 0 var(--m-gutter); overflow-x: auto; scrollbar-width: none; }
  .pvchips::-webkit-scrollbar { display: none; }
  .pvchip {
    flex: 0 0 auto; height: 44px; padding: 0 17px; border-radius: 22px; border: none; cursor: pointer;
    font: 700 12.5px/1 var(--font); letter-spacing: .01em; background: var(--m-surface-2); color: var(--m-ink-2);
  }
  .pvchip.is-on { background: var(--m-char); color: var(--m-bg); }
  .pvchip:active { transform: scale(.97); }

  /* ---- day-grouped feed ---- */
  .pv-feed { display: flex; flex-direction: column; gap: 22px; padding-bottom: 8px; }
  .pv-day__h { display: flex; align-items: baseline; justify-content: space-between; padding: 0 calc(var(--m-gutter) + 2px) 9px; }
  .pv-day__d { font: 700 12px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--m-ink-3); }
  .pv-day__sum { font: 700 13px/1 var(--font-ledger); color: var(--m-green); font-variant-numeric: tabular-nums; }
  .pv-day__cards { display: flex; flex-direction: column; gap: 10px; padding: 0 var(--m-gutter); }

  .pcard {
    display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: var(--m-r-card);
    background: var(--m-surface); box-shadow: var(--m-lift); cursor: pointer;
    transition: transform .13s cubic-bezier(.2,.7,.3,1);
  }
  .pcard:active { transform: scale(.988); }
  .ptile {
    width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto; display: grid; place-items: center;
    font-size: 18px; background: var(--m-green); color: var(--m-onbrand); position: relative; overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 4px 11px -5px rgba(20,22,26,.35);
  }
  .ptile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(157deg, rgba(255,255,255,.22), rgba(255,255,255,0) 42%, rgba(0,0,0,.10)); }
  .ptile i { position: relative; z-index: 1; line-height: 1; }
  .pcard__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .pcard__who { font: 600 15px/1.2 var(--font); color: var(--m-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pcard__sub { font: 500 12px/1.25 var(--font); color: var(--m-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pcard__num { font-family: var(--font-ledger); font-weight: 600; color: var(--m-ink-2); }
  .pcard__amt { flex: 0 0 auto; font: 800 15.5px/1 var(--font-ledger); color: var(--m-green); font-variant-numeric: tabular-nums; }

  /* ---- empty + skeleton ---- */
  .pv-empty { text-align: center; padding: 54px 30px; }
  .pv-empty__i { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center; font-size: 24px; background: var(--m-surface-2); color: var(--m-ink-3); }
  .pv-empty__t { margin: 0 0 5px; font: 700 17px/1.2 var(--font-display); color: var(--m-ink); }
  .pv-empty__s { margin: 0; font: 500 13.5px/1.4 var(--font); color: var(--m-ink-3); }
  .pcard--sk { pointer-events: none; }
  .sk--day { display: block; width: 90px; height: 12px; border-radius: 6px; }
  .sk--l1 { display: block; width: 60%; height: 13px; border-radius: 6px; }
  .sk--l2 { display: block; width: 40%; height: 11px; border-radius: 6px; margin-top: 7px; }
  .sk--amt { width: 62px; height: 16px; border-radius: 6px; flex: 0 0 auto; }
  .pcard--sk .ptile.sk { box-shadow: none; }

  @media (prefers-reduced-motion: reduce) {
    .pcard, .pv-rec, .pv-range, .pvchip { transition: none; }
  }
}

/* ---- record picker (rendered inside a modal, OUTSIDE the dm-on token scope: uses app tokens) ---- */
.pvpick-wrap { display: flex; flex-direction: column; }
.pvpick-hint { margin: 0 0 12px; font-size: 13.5px; color: var(--text); opacity: .7; }
.pvpick-search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 13px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 12px; }
.pvpick-search i { color: var(--text); opacity: .5; }
.pvpick-search input { flex: 1 1 auto; border: none; background: none; outline: none; font-size: 15px; color: var(--text); }
.pvpick-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; }
.pvpick { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.pvpick:hover, .pvpick:active { background: var(--surface-2); }
.pvpick__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pvpick__num { font-family: var(--font-ledger); font-weight: 600; font-size: 13px; color: var(--text); }
.pvpick__who { font-size: 13px; color: var(--text); opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvpick__owed { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; font-family: var(--font-ledger); font-weight: 700; font-size: 14px; color: var(--text); }
.pvpick__owed em { font: 500 10px/1 var(--font); font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--text); opacity: .5; }
.pvpick-none { text-align: center; padding: 24px; color: var(--text); opacity: .6; font-size: 14px; }

/* ==========================================================================================
   MOBILE CUSTOMERS — CHARCOAL LEDGER (v2.45.0)
   Reuses .dm / .dm__nav--v2 / .dm__scroll / .pv__scroll / .pv__sticky / .pvchips / .pv-rec /
   .isearch / .pv-empty / .sk / .dm-in / .cava. Everything below is customers-specific. Append-only.
   ========================================================================================== */
@media (max-width: 767.98px) {
  .cx .dm__gear { width: 44px; height: 44px; flex: 0 0 auto; }
  .cx .cava::after { display: none; }               /* drop the blue accent halo on charcoal cards */
  .cx .cava { box-shadow: 0 4px 11px -5px rgba(20,22,26,.35); }

  /* ---- book summary hero ---- */
  .cx-hero {
    margin: 4px var(--m-gutter) 0; padding: 18px 20px 16px; border-radius: var(--m-r-card);
    background: var(--m-surface); box-shadow: var(--m-lift);
  }
  .cx-hero__top { display: flex; flex-direction: column; gap: 3px; }
  .cx-hero__eb { font: 700 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--m-ink-3); }
  .cx-hero__count { display: flex; align-items: baseline; gap: 9px; font: 800 40px/1 var(--font-display); letter-spacing: -.03em; color: var(--m-ink); font-variant-numeric: tabular-nums; }
  .cx-hero__count span { font: 600 13px/1 var(--font); letter-spacing: 0; text-transform: none; color: var(--m-ink-3); }
  .cx-hero__stats { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
  .cx-hstat { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 15px; border-radius: 15px; background: var(--m-surface-2); }
  .cx-hstat__l { font: 600 12px/1 var(--font); color: var(--m-ink-3); flex: 0 0 auto; }
  .cx-hstat__v { font: 800 16px/1 var(--font-ledger); color: var(--m-ink); font-variant-numeric: tabular-nums; text-align: right; }
  .cx-hstat__v.is-owed { color: var(--m-coral); }

  /* ---- section headers (A–Z rail, or the Owing total) ---- */
  .cx-list { display: flex; flex-direction: column; }
  .cx-sec { display: flex; align-items: baseline; justify-content: space-between; padding: 18px calc(var(--m-gutter) + 2px) 8px; }
  .cx-sec__l { font: 800 13px/1 var(--font-display); letter-spacing: .02em; color: var(--m-ink-2); }
  .cx-sec--az .cx-sec__l { color: var(--m-green); }
  .cx-sec__r { font: 700 13px/1 var(--font-ledger); color: var(--m-coral); font-variant-numeric: tabular-nums; }

  /* ---- customer cards ---- */
  .cx-cards { display: flex; flex-direction: column; gap: 9px; padding: 0 var(--m-gutter); }
  .cx-card {
    display: flex; align-items: center; gap: 13px; padding: 11px 13px 11px 12px; border-radius: 20px;
    background: var(--m-surface); box-shadow: var(--m-lift); cursor: pointer;
    transition: transform .13s cubic-bezier(.2,.7,.3,1);
  }
  .cx-card:active { transform: scale(.985); }
  .cx-card .cava { width: 52px; height: 52px; font-size: 1.05rem; box-shadow: 0 4px 12px -5px rgba(20,22,26,.4); }
  .cx-card__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .cx-card__name { font: 650 16px/1.2 var(--font); color: var(--m-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cx-card__bell { font-size: 11px; color: var(--m-amber-2); margin-left: 5px; }
  .cx-card__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .cx-card__sub { flex: 1 1 auto; min-width: 0; font: 500 13px/1.3 var(--font); color: var(--m-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cx-card__owed { flex: 0 0 auto; font: 800 14.5px/1 var(--font-ledger); color: var(--m-coral); font-variant-numeric: tabular-nums; }
  .cx-card__chev { flex: 0 0 auto; font-size: 15px; color: var(--m-ink-3); opacity: .45; margin-left: -1px; }

  .cx-card--sk { pointer-events: none; }

  /* profile drawer: fill the phone rather than a desktop-width panel */
  .drawer { width: min(440px, 100vw); }

  @media (prefers-reduced-motion: reduce) { .cx-card { transition: none; } }
}

/* Invoice status lock (v2.46.0): existing invoices lock the status picker until unlocked. */
.status-lock { position: relative; }
.status-lock.is-locked .status-pick { opacity: .45; filter: saturate(.55); pointer-events: none; user-select: none; }
.status-unlock {
  position: absolute; inset: 0; margin: auto; height: 40px; width: max-content; max-width: 100%;
  display: inline-flex; align-items: center; gap: 8px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 22px; background: var(--surface);
  box-shadow: var(--lift-1); color: var(--text); font-weight: 650; font-size: .84rem; cursor: pointer;
  white-space: nowrap;
}
.status-unlock i { color: var(--text-tertiary); font-size: .9rem; }
.status-unlock:hover { background: var(--surface-2); }
.status-unlock:active { transform: scale(.97); }

/* ==========================================================================================
   MOBILE INVOICE VIEW — CHARCOAL LEDGER (v2.46.0)
   A sleek read-only invoice document. Reuses .dm / .dm__nav--v2 / .dm__scroll / .mono /
   .mtxn__badge / .b-* / .pv-rec / .pv-empty / .sk. Append-only.
   ========================================================================================== */
@media (max-width: 767.98px) {
  .ivx__nav { gap: 6px; }
  .ivx__back {
    width: 44px; height: 44px; flex: 0 0 auto; margin-left: -8px; border: none; background: none;
    display: grid; place-items: center; font-size: 22px; color: var(--m-ink); cursor: pointer;
  }
  .ivx__back:active { transform: scale(.9); }
  .ivx__no { font-size: 17px; font-weight: 700; letter-spacing: .01em; }
  .ivx .dm__eb { margin-bottom: 1px; }
  .ivx__scroll { display: flex; flex-direction: column; gap: 14px; }
  .ivx__load { padding-top: 20px; }

  /* status + amount hero */
  .ivx-top {
    margin: 6px var(--m-gutter) 0; padding: 20px; border-radius: var(--m-r-card);
    background: var(--m-surface); box-shadow: var(--m-lift); text-align: center;
  }
  .ivx-top .mtxn__badge { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 12px; }
  .ivx-top .mtxn__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .ivx-top__lbl { font: 600 11px/1 var(--font); text-transform: uppercase; letter-spacing: .1em; color: var(--m-ink-3); }
  .ivx-top__amt { margin-top: 7px; font: 800 clamp(32px,10vw,44px)/1 var(--font-display); letter-spacing: -.02em; color: var(--m-coral); font-variant-numeric: tabular-nums; }
  .ivx-top--paid .ivx-top__amt { color: var(--m-green); }
  .ivx-top__meta { margin-top: 12px; font: 500 12.5px/1.4 var(--font); color: var(--m-ink-3); }

  /* generic card */
  .ivx-card { margin: 0 var(--m-gutter); padding: 16px 18px; border-radius: var(--m-r-card); background: var(--m-surface); box-shadow: var(--m-lift); }
  .ivx-card__h { font: 700 11px/1 var(--font); text-transform: uppercase; letter-spacing: .09em; color: var(--m-ink-3); margin-bottom: 13px; }

  /* billed-to */
  .ivx-party { display: flex; align-items: center; gap: 13px; }
  .ivx-ava { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 13px; display: grid; place-items: center; font: 700 15px/1 var(--font-display); color: var(--m-onbrand); background: var(--m-char); }
  .ivx-party__body { min-width: 0; }
  .ivx-party__name { font: 700 16px/1.2 var(--font-display); color: var(--m-ink); }
  .ivx-party__sub { font: 500 12.5px/1.45 var(--font); color: var(--m-ink-3); word-break: break-word; }

  /* items */
  .ivx-items { display: flex; flex-direction: column; }
  .ivx-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--m-hair); }
  .ivx-item:first-child { border-top: none; padding-top: 0; }
  .ivx-item__main { min-width: 0; }
  .ivx-item__desc { font: 600 14.5px/1.3 var(--font); color: var(--m-ink); }
  .ivx-item__veh { font: 500 12px/1.3 var(--font); color: var(--m-ink-3); margin-top: 2px; }
  .ivx-item__qty { font: 500 12px/1 var(--font-ledger); color: var(--m-ink-3); margin-top: 4px; font-variant-numeric: tabular-nums; }
  .ivx-item__amt { flex: 0 0 auto; font: 700 14.5px/1.3 var(--font-ledger); color: var(--m-ink); font-variant-numeric: tabular-nums; }

  /* totals */
  .ivx-tot { margin-top: 6px; padding-top: 13px; border-top: 2px solid var(--m-hair-2, var(--m-hair)); display: flex; flex-direction: column; gap: 9px; }
  .ivx-tot__row { display: flex; align-items: baseline; justify-content: space-between; font: 500 13.5px/1 var(--font); color: var(--m-ink-2); }
  .ivx-tot__row span:last-child { font-family: var(--font-ledger); font-weight: 600; color: var(--m-ink); font-variant-numeric: tabular-nums; }
  .ivx-tot__row--total { padding-top: 9px; border-top: 1px solid var(--m-hair); font-weight: 700; color: var(--m-ink); }
  .ivx-tot__row--total span:last-child { font-weight: 800; font-size: 15px; }
  .ivx-tot__row--paid span:last-child { color: var(--m-green); }
  .ivx-tot__row--due { padding-top: 9px; border-top: 1px solid var(--m-hair); }
  .ivx-tot__row--due span { color: var(--m-coral) !important; font-weight: 800; }

  .ivx-notes { margin: 0; font: 500 13.5px/1.5 var(--font); color: var(--m-ink-2); white-space: pre-wrap; }

  /* actions */
  .ivx-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 2px var(--m-gutter) 0; }
  .ivx-act {
    flex: 1 1 0; min-width: 0; height: 48px; border-radius: 14px; border: 1px solid var(--m-hair);
    background: var(--m-surface); color: var(--m-ink); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font: 700 13.5px/1 var(--font); box-shadow: var(--m-lift);
  }
  .ivx-act i { font-size: 15px; }
  .ivx-act:active { transform: scale(.97); }
  .ivx-act--primary { flex-basis: 100%; background: var(--m-char); color: var(--m-bg); border-color: transparent; }

  .ivx-tail { text-align: center; padding: 4px 30px 2px; font: 500 12px/1.4 var(--font); color: var(--m-ink-3); }

  @media (prefers-reduced-motion: reduce) { .ivx__back, .ivx-act, .pv-rec { transition: none; } }
}

/* ==========================================================================================
   NAV: DOCKED BOTTOM BAR + HAMBURGER MENU SHEET + PORTRAIT GUARD (v2.47.0)
   Appended last so the docked bar overrides the earlier floating-pill #app-tabbar rules.
   ========================================================================================== */
@media (max-width: 767.98px) {
  /* Dock the bar flush to the bottom edge (was a floating rounded pill). */
  #app-tabbar.tabbar {
    left: 0; right: 0; width: 100%; max-width: none; margin: 0; bottom: 0;
    height: auto; min-height: 58px;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 0 0; border: none; border-top: 1px solid rgba(17, 18, 20, .07);
    box-shadow: 0 -10px 34px -18px rgba(16, 24, 40, .30), inset 0 1px 0 rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  }
  html[data-theme="dark"] #app-tabbar.tabbar {
    background: rgba(24, 26, 30, .86); border-top: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 -10px 34px -18px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05);
  }
  #app-tabbar .tabbar__item--menu i { font-size: 23px; }
  /* Clear the docked bar. */
  .app-main, .view-root { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---- Glassmorphic "all sections" sheet ---- */
.appmenu { position: fixed; inset: 0; z-index: 3000; visibility: hidden; }
.appmenu.is-open { visibility: visible; }
.appmenu__scrim {
  position: absolute; inset: 0; background: rgba(9, 12, 18, .40); opacity: 0;
  transition: opacity .34s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.appmenu.is-open .appmenu__scrim { opacity: 1; }
.appmenu__sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 16px calc(22px + env(safe-area-inset-bottom, 0px));
  border-radius: 30px 30px 0 0;
  background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, .65);
  box-shadow: 0 -26px 64px -22px rgba(16, 24, 40, .42);
  transform: translateY(102%); transition: transform .44s cubic-bezier(.22, 1, .36, 1);
}
.appmenu.is-open .appmenu__sheet { transform: translateY(0); }
html[data-theme="dark"] .appmenu__sheet {
  background: rgba(22, 26, 34, .80); border-top: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 -26px 64px -22px rgba(0, 0, 0, .72);
}
/* The whole top strip is the drag handle (bigger than the visible pill so it's easy to
   grab); the pill itself is drawn with ::before. touch-action:none keeps the browser
   from stealing the downward drag before draggableSheet can act on it. */
.appmenu__grip {
  width: 100%; height: auto; padding: 8px 0 14px; margin: 0;
  background: none; border-radius: 0; cursor: grab; touch-action: none;
}
.appmenu__grip:active { cursor: grabbing; }
.appmenu__grip::before {
  content: ""; display: block; width: 40px; height: 5px; margin: 0 auto;
  border-radius: 3px; background: rgba(120, 130, 145, .45);
}
.appmenu__head { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 14px; }
.appmenu__title { font: 700 15px/1 var(--font-display, sans-serif); letter-spacing: -.01em; color: var(--text); }
.appmenu__x { width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(120, 130, 145, .14); color: var(--text); display: grid; place-items: center; cursor: pointer; font-size: 15px; margin-right: -6px; }
.appmenu__x:active { transform: scale(.92); }
.appmenu__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px;
  max-height: min(58vh, 460px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.appmenu__tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  min-height: 92px; padding: 15px 6px; border-radius: 20px; cursor: pointer; color: var(--text);
  border: 1px solid rgba(17, 18, 20, .06); background: rgba(255, 255, 255, .5);
  transition: transform .14s ease, background .2s ease;
}
.appmenu__tile:active { transform: scale(.95); }
html[data-theme="dark"] .appmenu__tile { border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .05); }
.appmenu__ico { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-size: 21px; background: rgba(120, 130, 145, .14); color: var(--text); transition: background .2s ease; }
.appmenu__lbl { font: 600 11.5px/1.2 var(--font, sans-serif); text-align: center; }
.appmenu__tile.is-active { background: #1A1C1E; border-color: transparent; color: #fff; box-shadow: 0 10px 24px -10px rgba(16, 24, 40, .5); }
.appmenu__tile.is-active .appmenu__ico { background: rgba(255, 255, 255, .18); color: #fff; }
html[data-theme="dark"] .appmenu__tile.is-active { background: #F3F4F6; color: #121316; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .appmenu__tile.is-active .appmenu__ico { background: rgba(0, 0, 0, .12); color: #121316; }
@media (prefers-reduced-motion: reduce) {
  .appmenu__sheet, .appmenu__scrim, .appmenu__tile { transition: none; }
}

/* ---- Portrait guard: phones in landscape see this instead of the desktop layout ----
   Gated to phone-sized touch devices only (coarse pointer + short height), so a real PC,
   laptop or tablet NEVER triggers it and the desktop layout is left completely untouched. */
#rotate-lock { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #rotate-lock {
    display: flex; position: fixed; inset: 0; z-index: 9000; align-items: center; justify-content: center;
    background: var(--surface, #0b0d0e); color: var(--text, #fff); text-align: center;
  }
  .rotate-lock__box { max-width: 320px; padding: 24px; }
  .rotate-lock__icon { font-size: 46px; color: var(--accent, #6690FF); }
  .rotate-lock__title { margin: 15px 0 6px; font: 700 19px/1.2 var(--font-display, sans-serif); letter-spacing: -.02em; }
  .rotate-lock__sub { margin: 0; font-size: 13.5px; line-height: 1.5; opacity: .7; }
}

/* ==========================================================================================
   MOBILE DASHBOARD GREETING (v2.48.0) — UK time, fine daypart, a line that talks to you.
   Ambient time-of-day glow behind an editorial greeting. Under dm-on, so uses --m-* tokens.
   ========================================================================================== */
@media (max-width: 767.98px) {
  .dm .dgz {
    position: relative; overflow: hidden; margin: 8px var(--m-gutter) 2px;
    border-radius: var(--m-r-card); background: var(--m-surface); box-shadow: var(--m-lift);
  }
  .dm .dgz__sky { position: relative; height: 92px; overflow: hidden; }
  .dm .dgz__arc { display: block; width: 100%; height: 100%; }
  .dm .dgz__period {
    position: absolute; top: 12px; left: 18px; font: 700 10.5px/1 var(--font);
    letter-spacing: .16em; text-transform: uppercase; color: currentColor; opacity: .8;
  }
  /* the sky itself — the visual time of day */
  .dm .dgz--dawn  .dgz__sky { background: linear-gradient(158deg, #FFE7CB, #FFC59A 68%, #FFB489); color: rgba(74, 46, 22, .8); }
  .dm .dgz--day   .dgz__sky { background: linear-gradient(158deg, #D7ECFF, #ADD2FF 74%, #99C5FF); color: rgba(20, 44, 78, .66); }
  .dm .dgz--dusk  .dgz__sky { background: linear-gradient(158deg, #FFD1A6, #E59BC8 58%, #B487D8); color: rgba(56, 26, 60, .66); }
  .dm .dgz--night .dgz__sky { background: linear-gradient(158deg, #2E3A6E, #1B2348 68%, #141B3A); color: rgba(233, 238, 250, .85); }
  html[data-theme="dark"] .dm .dgz--dawn .dgz__sky { background: linear-gradient(158deg, #5B4736, #48331F 68%, #3C2A18); color: rgba(255, 232, 208, .78); }
  html[data-theme="dark"] .dm .dgz--day  .dgz__sky { background: linear-gradient(158deg, #274460, #1B334f 74%, #16304a); color: rgba(214, 233, 255, .78); }
  html[data-theme="dark"] .dm .dgz--dusk .dgz__sky { background: linear-gradient(158deg, #4c3054, #3a2445 58%, #2c1c38); color: rgba(255, 223, 244, .76); }

  .dm .dgz__body { position: relative; padding: 15px 20px 17px; }
  .dm .dgz__hi { margin: 0; font: 800 clamp(22px, 6.6vw, 28px)/1.14 var(--font-display); letter-spacing: -.02em; color: var(--m-ink); }
  .dm .dgz__hi em { font-style: normal; }
  .dm .dgz__meta { margin: 9px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 600 12px/1.2 var(--font); color: var(--m-ink-3); }
  .dm .dgz__meta > i { font-size: 13px; margin-right: 1px; }
  .dm .dgz__clock { font-family: var(--font-ledger); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--m-ink-2); }
  .dm .dgz__dot { opacity: .45; }

  .dm .dgz__say {
    position: relative; margin-top: 14px; display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-radius: 15px; background: var(--m-surface-2);
    font: 600 12.5px/1.35 var(--font); color: var(--m-ink-2);
  }
  .dm .dgz__say i { flex: 0 0 auto; font-size: 16px; }
  .dm .dgz__say--coral i { color: var(--m-coral); }
  .dm .dgz__say--amber i { color: var(--m-amber-2); }
  .dm .dgz__say--green i { color: var(--m-green); }
  .dm .dgz__say--calm  i { color: var(--m-ink-3); }
}

/* ==========================================================================================
   NAV + INVOICE-VIEW FIXES (v2.49.0)
   The base .dm__nav is a 2-column grid sized for ONE right-side action. The Payments/Customers
   navs carry two buttons and the invoice view carries three parts, so they overflowed that
   44px column and clipped. These variants give the grid the right shape. Append-only.
   ========================================================================================== */
@media (max-width: 767.98px) {
  /* Payments + Customers: brand | (record + export) */
  .pv__nav { grid-template-columns: minmax(0, 1fr) auto; }
  .pv__acts { justify-content: flex-end; }

  /* Invoice view: back | brand | edit */
  .ivx__nav { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 8px; }
  .ivx__nav .ivx__back { margin-left: -8px; }
  .ivx__no { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Action row: never cramped; WhatsApp wears its brand green. */
  .ivx-act { white-space: nowrap; min-width: 90px; gap: 6px; }
  .ivx-act i { font-size: 15px; }
  .ivx-act--wa { background: rgba(37, 211, 102, .12); color: #1AA457; border-color: transparent; }
  .ivx-act--wa i { color: #25D366; }
  html[data-theme="dark"] .ivx-act--wa { background: rgba(37, 211, 102, .16); color: #57E191; }
  html[data-theme="dark"] .ivx-act--wa i { color: #4BE38A; }
}

/* ==========================================================================================
   GREETING: WEATHER + INTERACTIVE ACTION LINE, and the NUDGE SHEET (v2.50.0)
   Append-only. Extends the v2.48.0 .dgz greeting: a frosted weather chip on the sky, a
   drifting-cloud overlay when it's wet, and the data-aware line turned into a tappable
   action (pill CTA). Plus the "Send a nudge" bottom sheet (.ndg*) in the .appmenu glass
   language, with an in-sheet confirm layer that beats the sheet's own z-index.
   Colour still means one thing: coral = owed, green only on WhatsApp, charcoal = action.
   ========================================================================================== */
@media (max-width: 767.98px) {
  /* ---- weather chip on the sky ---- */
  .dm .dgz__wx {
    position: absolute; top: 11px; right: 12px; display: inline-flex; align-items: center; gap: 6px;
    height: 28px; padding: 0 11px 0 9px; border: 0; border-radius: 999px; cursor: pointer; color: currentColor;
    background: rgba(255, 255, 255, .20); -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 2px 8px rgba(0, 0, 0, .10);
    font: 650 12.5px/1 var(--font); letter-spacing: -.01em;
  }
  .dm .dgz--night .dgz__wx, .dm .dgz--dusk .dgz__wx {
    background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .20), 0 2px 8px rgba(0, 0, 0, .18);
  }
  .dm .dgz__wx:active { transform: scale(.94); }
  .dm .dgz__wx i { font-size: 14px; opacity: .95; }
  .dm .dgz__wx-temp { font-family: var(--font-ledger); font-weight: 600; font-variant-numeric: tabular-nums; }
  .dm .dgz__wxfx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

  /* ---- interactive "talks to you" action line (pill CTA, no chevron) ---- */
  .dm .dgz__say--tap {
    width: 100%; text-align: left; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
    align-items: flex-start; transition: transform .12s ease, background .2s ease;
  }
  .dm .dgz__say--tap:active { transform: scale(.985); background: var(--m-surface); }
  .dm .dgz__say-main { display: flex; flex-direction: column; gap: 9px; min-width: 0; flex: 1; }
  .dm .dgz__say-txt { color: var(--m-ink-2); }
  .dm .dgz__say-cta {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px;
    border-radius: 999px; font: 700 12px/1 var(--font); letter-spacing: -.01em; color: #fff;
  }
  .dm .dgz__say-cta i { font-size: 12px; }
  .dm .dgz__say--coral .dgz__say-cta { background: var(--m-coral); }
  .dm .dgz__say--green .dgz__say-cta { background: var(--m-green); }
  .dm .dgz__say--amber .dgz__say-cta { background: var(--m-amber-2, #A65500); }

  /* ---- nudge sheet ---- */
  .ndg { position: fixed; inset: 0; z-index: 3200; }
  .ndg__scrim {
    position: absolute; inset: 0; background: rgba(9, 12, 18, .40); opacity: 0;
    transition: opacity .34s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  .ndg.is-open .ndg__scrim { opacity: 1; }
  .ndg__sheet {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    border-radius: 30px 30px 0 0; background: rgba(255, 255, 255, .74);
    -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, .65); box-shadow: 0 -26px 64px -22px rgba(16, 24, 40, .42);
    transform: translateY(102%); transition: transform .44s cubic-bezier(.22, 1, .36, 1);
  }
  .ndg.is-open .ndg__sheet { transform: translateY(0); }
  html[data-theme="dark"] .ndg__sheet {
    background: rgba(22, 26, 34, .80); border-top: 1px solid rgba(255, 255, 255, .10); box-shadow: 0 -26px 64px -22px rgba(0, 0, 0, .72);
  }
  .ndg__grip { width: 40px; height: 5px; border-radius: 3px; background: rgba(120, 130, 145, .45); margin: 2px auto 12px; cursor: pointer; }
  .ndg__head { display: flex; align-items: flex-start; justify-content: space-between; margin: 0 2px 2px; }
  .ndg__title { font: 800 19px/1.1 var(--font-display); letter-spacing: -.02em; color: var(--m-ink); }
  .ndg__sub { margin: 3px 0 0; font: 600 12.5px/1.3 var(--font); color: var(--m-ink-3); }
  .ndg__sub b { color: var(--m-coral); font-weight: 700; }
  .ndg__x {
    width: 34px; height: 34px; border: none; border-radius: 50%; background: rgba(120, 130, 145, .14);
    color: var(--m-ink); display: grid; place-items: center; font-size: 14px; margin: -2px -4px 0 0; cursor: pointer;
  }
  .ndg__x:active { transform: scale(.92); }
  .ndg__all {
    width: 100%; margin: 14px 0 6px; height: 46px; border: 0; border-radius: 14px; cursor: pointer;
    background: var(--m-char); color: var(--m-surface); font: 700 14px/1 var(--font); letter-spacing: -.01em;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  }
  .ndg__all:active { transform: scale(.985); }
  .ndg__all.is-busy { opacity: .6; pointer-events: none; }
  .ndg__all i { font-size: 16px; }
  .ndg__hint { margin: 9px 2px 7px; font: 600 10.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--m-ink-3); opacity: .85; }
  .ndg__list { display: flex; flex-direction: column; gap: 9px; max-height: 52vh; overflow: auto; -webkit-overflow-scrolling: touch; }
  .ndg__row { padding: 12px 13px 11px; border-radius: 16px; background: var(--m-surface); border: 1px solid var(--m-hair); transition: opacity .25s ease; }
  html[data-theme="dark"] .ndg__row { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); }
  .ndg__rtop { display: flex; align-items: center; gap: 12px; }
  .ndg__ava {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
    color: #fff; font: 800 14px/1 var(--font-display); letter-spacing: -.01em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  }
  .ndg__meta { flex: 1; min-width: 0; }
  .ndg__nm { display: block; font: 700 14.5px/1.2 var(--font); color: var(--m-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ndg__dl { display: block; margin-top: 3px; font: 600 11.5px/1 var(--font); color: var(--m-coral); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ndg__dl .n { color: var(--m-ink-3); font-family: var(--font-ledger); }
  .ndg__owed { flex: 0 0 auto; font: 700 15px/1 var(--font-ledger); font-variant-numeric: tabular-nums; color: var(--m-ink); }
  .ndg__acts { display: flex; gap: 8px; margin-top: 11px; }
  .ndg__btn {
    flex: 1; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font: 700 12.5px/1 var(--font); letter-spacing: -.01em; text-decoration: none; cursor: pointer;
    border: 1px solid var(--m-hair-2); background: transparent; color: var(--m-ink);
  }
  .ndg__btn:active { transform: scale(.96); }
  .ndg__btn i { font-size: 15px; }
  .ndg__btn--wa { border-color: transparent; background: rgba(37, 211, 102, .12); color: #1AA457; }
  .ndg__btn--wa i { color: #25D366; }
  .ndg__btn--mail { border-color: transparent; background: var(--m-char); color: var(--m-surface); }
  html[data-theme="dark"] .ndg__btn--wa { background: rgba(37, 211, 102, .16); color: #57E191; }
  html[data-theme="dark"] .ndg__btn--wa i { color: #4BE38A; }
  .ndg__none { font: 600 12px/1.3 var(--font); color: var(--m-ink-3); padding: 4px 2px; }
  .ndg__row.is-sent { opacity: .5; }
  .ndg__row.is-sent .ndg__acts { display: none; }
  .ndg__row.is-sent .ndg__rtop::after {
    content: "\F26E"; font-family: "bootstrap-icons"; margin-left: 4px; color: var(--m-green); font-size: 18px; flex: 0 0 auto;
  }

  /* ---- in-sheet confirm (layers above the whole screen) ---- */
  .ndg__confirm { position: fixed; inset: 0; z-index: 3300; display: flex; align-items: flex-end; }
  .ndg__confirm[hidden] { display: none; }
  .ndg__cscrim { position: absolute; inset: 0; background: rgba(9, 12, 18, .46); opacity: 0; transition: opacity .22s ease; }
  .ndg__confirm.is-open .ndg__cscrim { opacity: 1; }
  .ndg__ccard {
    position: relative; z-index: 1; width: 100%; padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 26px 26px 0 0; background: var(--m-surface); box-shadow: 0 -20px 60px -20px rgba(16, 24, 40, .5);
    transform: translateY(101%); transition: transform .34s cubic-bezier(.22, 1, .36, 1);
  }
  html[data-theme="dark"] .ndg__ccard { background: var(--m-surface-2); box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .7); }
  .ndg__confirm.is-open .ndg__ccard { transform: translateY(0); }
  .ndg__ctitle { font: 800 17px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--m-ink); }
  .ndg__cmsg { margin: 7px 0 15px; font: 500 13px/1.45 var(--font); color: var(--m-ink-2); }
  .ndg__cbtn {
    width: 100%; height: 48px; margin-top: 9px; border: 0; border-radius: 14px; cursor: pointer;
    font: 700 14px/1 var(--font); letter-spacing: -.01em; display: inline-flex; align-items: center; justify-content: center;
  }
  .ndg__cbtn:active { transform: scale(.985); }
  .ndg__cbtn--p { background: var(--m-char); color: var(--m-surface); margin-top: 0; }
  .ndg__cbtn--s { background: var(--m-surface-2); color: var(--m-ink); box-shadow: inset 0 0 0 1px var(--m-hair-2); }
  html[data-theme="dark"] .ndg__cbtn--s { background: rgba(255, 255, 255, .06); }
  .ndg__cbtn--x { background: transparent; color: var(--m-ink-3); height: 44px; }

  @media (prefers-reduced-motion: reduce) {
    .ndg__sheet, .ndg__scrim, .ndg__ccard, .ndg__cscrim, .dgz__say--tap, .ndg__btn, .ndg__all { transition: none; }
  }
}

/* ==========================================================================================
   METRIC PANELS: calmer sparkline (v2.51.0). Append-only. sparkSVG() now emits a smoothed,
   non-scaling-stroke curve (class .spark--v2); this only sets its even 2px width. The draw
   animation on .spark path.l still applies (the element keeps the .spark class).
   ========================================================================================== */
@media (max-width: 767.98px) {
  .dm .spark--v2 path.l { stroke-width: 2; }
}

/* ==========================================================================================
   PAYMENT DETAIL SHEET (.pdx) — v2.51.0. Append-only. Tapping a transaction in Payments
   opens this native read-only receipt instead of the invoice editor. Same .appmenu glass
   language as the nudge sheet; the "Email receipt" confirm reuses the .ndg__confirm* layer.
   Colour discipline: the received amount is the only green; charcoal is the primary action.
   ========================================================================================== */
@media (max-width: 767.98px) {
  .pdx { position: fixed; inset: 0; z-index: 3200; }
  .pdx__scrim {
    position: absolute; inset: 0; background: rgba(9, 12, 18, .40); opacity: 0;
    transition: opacity .34s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  .pdx.is-open .pdx__scrim { opacity: 1; }
  .pdx__sheet {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 10px 18px calc(20px + env(safe-area-inset-bottom, 0px));
    border-radius: 30px 30px 0 0; background: rgba(255, 255, 255, .74);
    -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, .65); box-shadow: 0 -26px 64px -22px rgba(16, 24, 40, .42);
    transform: translateY(102%); transition: transform .44s cubic-bezier(.22, 1, .36, 1);
  }
  .pdx.is-open .pdx__sheet { transform: translateY(0); }
  html[data-theme="dark"] .pdx__sheet {
    background: rgba(22, 26, 34, .80); border-top: 1px solid rgba(255, 255, 255, .10); box-shadow: 0 -26px 64px -22px rgba(0, 0, 0, .72);
  }
  .pdx__grip { width: 40px; height: 5px; border-radius: 3px; background: rgba(120, 130, 145, .45); margin: 2px auto 14px; cursor: pointer; }
  .pdx__head { display: flex; align-items: center; gap: 12px; }
  .pdx__tile {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
    background: rgba(18, 165, 111, .12); color: var(--m-green); font-size: 19px;
  }
  html[data-theme="dark"] .pdx__tile { background: rgba(18, 165, 111, .18); }
  .pdx__htxt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .pdx__hlbl { font: 700 14px/1.2 var(--font); color: var(--m-ink); }
  .pdx__hsub { font: 500 11.5px/1.2 var(--font); color: var(--m-ink-3); margin-top: 2px; }
  .pdx__x {
    flex: 0 0 auto; width: 34px; height: 34px; border: none; border-radius: 50%; background: rgba(120, 130, 145, .14);
    color: var(--m-ink); display: grid; place-items: center; font-size: 14px; cursor: pointer;
  }
  .pdx__x:active { transform: scale(.92); }
  .pdx__amt {
    margin: 16px 2px 4px; font-family: var(--font-display); font-variant-numeric: tabular-nums;
    font-size: clamp(30px, 10vw, 38px); font-weight: 750; letter-spacing: -.02em; line-height: 1; color: var(--m-green);
  }
  .pdx__prog { margin: 14px 2px 4px; }
  .pdx__progbar { height: 6px; border-radius: 999px; background: var(--m-hair); overflow: hidden; }
  html[data-theme="dark"] .pdx__progbar { background: rgba(255, 255, 255, .09); }
  .pdx__progbar span { display: block; height: 100%; border-radius: 999px; background: var(--m-green); }
  .pdx__progtxt { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; font: 600 11.5px/1.2 var(--font); color: var(--m-ink-3); }
  .pdx__rem { color: var(--m-coral); }
  .pdx__done { color: var(--m-green); }
  .pdx__rows { margin: 16px 0 4px; border-top: 1px solid var(--m-hair); }
  .pdx__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 2px; border-bottom: 1px solid var(--m-hair); }
  .pdx__k { flex: 0 0 auto; font: 500 12.5px/1.3 var(--font); color: var(--m-ink-3); }
  .pdx__v { min-width: 0; text-align: right; font: 600 13px/1.35 var(--font); color: var(--m-ink); display: inline-flex; align-items: center; gap: 7px; justify-content: flex-end; flex-wrap: wrap; }
  .pdx__v .mono { font-family: var(--font-ledger); }
  .pdx__acts { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
  .pdx__btn {
    width: 100%; height: 50px; border: 0; border-radius: 15px; cursor: pointer; display: inline-flex; align-items: center;
    justify-content: center; gap: 9px; font: 700 14px/1 var(--font); letter-spacing: -.01em;
  }
  .pdx__btn i { font-size: 16px; }
  .pdx__btn:active { transform: scale(.985); }
  .pdx__btn--p { background: var(--m-char); color: var(--m-surface); }
  .pdx__btn--s { background: var(--m-surface-2); color: var(--m-ink); box-shadow: inset 0 0 0 1px var(--m-hair-2); }
  html[data-theme="dark"] .pdx__btn--s { background: rgba(255, 255, 255, .06); }
  .pdx__btn[disabled] { opacity: .55; pointer-events: none; }

  @media (prefers-reduced-motion: reduce) {
    .pdx__sheet, .pdx__scrim { transition: none; }
  }
}

/* ==========================================================================================
   NUDGE SHEET AVATAR PHOTO (v2.52.0). Append-only. Shows the customer's uploaded picture in
   the nudge row; the gradient monogram sits behind as the fallback if there's no photo or it
   fails to load.
   ========================================================================================== */
@media (max-width: 767.98px) {
  .ndg__ava--img { position: relative; overflow: hidden; padding: 0; background: none; }
  .ndg__ava--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; z-index: 1; }
  .ndg__ava-fb { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit;
    color: #fff; font: 800 14px/1 var(--font-display); letter-spacing: -.01em; z-index: 0; }
}

/* ==========================================================================================
   SHEET FIXES (v2.53.0). Append-only.
   1) touch-action: none lets JS own the drag gesture on the sheet (the grip/header/body);
      the scrollable list keeps pan-y so it still scrolls. Without this the browser claimed
      the gesture first and the drag felt dead on a real device.
   2) While a sheet is open, the background scroller is frozen (overflow:hidden preserves
      scrollTop, so nothing jumps) — fixes the feed jumping to the top when a sheet opens.
   ========================================================================================== */
@media (max-width: 767.98px) {
  .ndg__sheet, .pdx__sheet, .dxs__sheet { touch-action: none; }
  .ndg__list { touch-action: pan-y; overscroll-behavior: contain; }
  .dxs__paper { touch-action: pan-y; overscroll-behavior: contain; }
  .ndg__grip, .pdx__grip, .ndg__head, .pdx__head, .dxs__grip, .dxs__head { touch-action: none; }

  /* Lock only INNER scrollers while a sheet is open. overflow:hidden on an inner element
     preserves its scrollTop, so nothing jumps; locking <html>/<body> would reset the root
     scroll to 0 (which is the very jump we're fixing), so we never touch them. bsmodal-open
     is the Bootstrap-modal equivalent (transaction preview, forms, confirms); dxs-open is
     the document detail sheet. */
  html.ndg-open .app-main, html.pdx-open .app-main, html.bsmodal-open .app-main, html.dxs-open .app-main, html.ums-open .app-main, html.avd-open .app-main, html.ds-open .app-main, html.rcx-open .app-main, html.ivq-open .app-main,
  html.ndg-open .view-root, html.pdx-open .view-root, html.bsmodal-open .view-root, html.dxs-open .view-root, html.ums-open .view-root, html.avd-open .view-root, html.ds-open .view-root, html.rcx-open .view-root, html.ivq-open .view-root { overflow: hidden !important; }
}

/* ==========================================================================================
   PHONE DOCUMENTS (.dx) + DETAIL SHEET (.dxs) — v2.55.0. Append-only. The Documents section
   in the shared Navy-Ledger language: own nav bar, a library-summary hero, sticky search +
   filter chips, and a grouped list of tap-through cards. Reuses .dm / .dm__nav--v2 /
   .dm__scroll / .pv__scroll / .pv__sticky / .pvchips / .pv-rec / .isearch / .pv-empty / .sk /
   .dm-in from the other sections; everything below is documents-specific. Tapping a card opens
   the .dxs glass sheet — the same drag-to-dismiss engine as the payment (.pdx) sheet.
   ========================================================================================== */
@media (max-width: 767.98px) {

  /* ---- library summary hero (navy in light, elevated surface in dark) ---- */
  .dx-hero {
    margin: 4px var(--m-gutter) 0; padding: 16px 18px 15px; border-radius: var(--m-r-card);
    box-shadow: var(--m-lift);
    --hero-ink: #EAECEF; --hero-mut: #9BA0A8; --hero-tile: rgba(255, 255, 255, .07);
    background: var(--m-char); color: var(--hero-ink);
  }
  html.dm-on[data-theme="dark"] .dx-hero {
    --hero-ink: var(--m-ink); --hero-mut: var(--m-ink-3); --hero-tile: var(--m-surface);
    background: var(--m-surface-2);
  }
  .dx-hero__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .dx-hero__eb { font: 700 10.5px/1.2 var(--font); letter-spacing: .13em; text-transform: uppercase; color: var(--hero-mut); }
  .dx-hero__count { display: flex; align-items: baseline; gap: 5px; font: 600 12.5px/1 var(--font); color: var(--hero-mut); }
  .dx-hero__count b { font: 600 20px/1 var(--font-ledger); letter-spacing: -.02em; color: var(--hero-ink); font-variant-numeric: tabular-nums; }
  .dx-hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 14px; }
  .dx-hstat { background: var(--hero-tile); border-radius: 13px; padding: 9px 11px; min-width: 0; }
  .dx-hstat__l { font: 600 10.5px/1.2 var(--font); color: var(--hero-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dx-hstat__v { display: block; margin-top: 4px; font: 500 16px/1 var(--font-ledger); color: var(--hero-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

  /* ---- section header + cards ---- */
  .dx-list { display: flex; flex-direction: column; padding-bottom: 8px; }
  .dx-sec { display: flex; align-items: baseline; justify-content: space-between; padding: 16px calc(var(--m-gutter) + 2px) 9px; }
  .dx-sec__l { font: 800 12.5px/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; color: var(--m-ink-2); }
  .dx-sec__r { font: 700 12px/1 var(--font-ledger); color: var(--m-ink-3); font-variant-numeric: tabular-nums; }

  .dx-cards { display: flex; flex-direction: column; gap: 9px; padding: 0 var(--m-gutter); }
  .dx-card {
    display: flex; align-items: center; gap: 12px; padding: 12px 13px; border-radius: 18px;
    background: var(--m-surface); box-shadow: var(--m-lift); cursor: pointer;
    transition: transform .13s cubic-bezier(.2, .7, .3, 1);
  }
  .dx-card:active { transform: scale(.985); }
  .dx-card__ico {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    background: rgba(10, 31, 68, .06); color: var(--m-ink); font-size: 20px;
  }
  html.dm-on[data-theme="dark"] .dx-card__ico { background: rgba(255, 255, 255, .06); }
  .dx-card__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .dx-card__title { font: 700 14.5px/1.25 var(--font-display); letter-spacing: -.01em; color: var(--m-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dx-card__prev { font: 500 12px/1.3 var(--font); color: var(--m-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dx-card__meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; min-width: 0; }
  .dx-card__dot { flex: 0 0 auto; font: 600 11px/1 var(--font-ledger); color: var(--m-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .dx-card__chev { flex: 0 0 auto; font-size: 15px; color: var(--m-ink-3); opacity: .5; }

  /* linked-entity / type chip (used on cards and inside the sheet) */
  .dx-chip {
    display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 62%;
    font: 600 11px/1.2 var(--font); color: var(--m-ink-2); background: rgba(10, 31, 68, .05);
    border-radius: 999px; padding: 3px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .dx-chip i { flex: 0 0 auto; font-size: 11px; }
  html.dm-on[data-theme="dark"] .dx-chip { background: rgba(255, 255, 255, .06); }
  .dx-chip--note { color: var(--m-amber); background: var(--m-amber-wash); max-width: none; }

  .dx-card--sk { pointer-events: none; }
  .dx-card--sk .dx-card__ico.sk { border-radius: 12px; }

  @media (prefers-reduced-motion: reduce) { .dx-card { transition: none; } }
}

/* ------------------------------------------------------------------------------------------
   DOCUMENT DETAIL SHEET (.dxs) — same glass language + drag engine as .pdx. The navy CTA
   token (--m-cta-bg) is the primary action; the document body sits in a sunken "paper" panel.
   ------------------------------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .dxs { position: fixed; inset: 0; z-index: 3200; }
  .dxs__scrim {
    position: absolute; inset: 0; background: rgba(9, 12, 18, .40); opacity: 0;
    transition: opacity .34s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  .dxs.is-open .dxs__scrim { opacity: 1; }
  .dxs__sheet {
    position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: 90vh;
    padding: 10px 18px calc(20px + env(safe-area-inset-bottom, 0px));
    border-radius: 30px 30px 0 0; background: rgba(255, 255, 255, .74);
    -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, .65); box-shadow: 0 -26px 64px -22px rgba(16, 24, 40, .42);
    transform: translateY(102%); transition: transform .44s cubic-bezier(.22, 1, .36, 1);
  }
  .dxs.is-open .dxs__sheet { transform: translateY(0); }
  html[data-theme="dark"] .dxs__sheet {
    background: rgba(22, 26, 34, .80); border-top: 1px solid rgba(255, 255, 255, .10); box-shadow: 0 -26px 64px -22px rgba(0, 0, 0, .72);
  }
  .dxs__grip { flex: 0 0 auto; width: 40px; height: 5px; border-radius: 3px; background: rgba(120, 130, 145, .45); margin: 2px auto 14px; cursor: pointer; }
  .dxs__head { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
  .dxs__tile {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
    background: rgba(10, 31, 68, .08); color: var(--m-ink); font-size: 19px;
  }
  html[data-theme="dark"] .dxs__tile { background: rgba(255, 255, 255, .08); }
  .dxs__htxt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .dxs__hlbl { font: 700 14px/1.2 var(--font); color: var(--m-ink); }
  .dxs__hsub { font: 500 11.5px/1.2 var(--font); color: var(--m-ink-3); margin-top: 2px; }
  .dxs__x {
    flex: 0 0 auto; width: 34px; height: 34px; border: none; border-radius: 50%; background: rgba(120, 130, 145, .14);
    color: var(--m-ink); display: grid; place-items: center; font-size: 14px; cursor: pointer;
  }
  .dxs__x:active { transform: scale(.92); }
  .dxs__title { flex: 0 0 auto; margin: 15px 2px 0; font: 800 22px/1.15 var(--font-display); letter-spacing: -.02em; color: var(--m-ink); }
  .dxs__chips { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 7px; margin: 11px 2px 0; }
  .dxs__paper {
    flex: 1 1 auto; min-height: 84px; max-height: 40vh; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    margin: 14px 0 2px; padding: 13px 14px; border-radius: 14px; background: var(--m-surface-2); border: 1px solid var(--m-hair);
  }
  .dxs__paper pre { margin: 0; font: 400 12.5px/1.65 var(--font-ledger); color: var(--m-ink-2); white-space: pre-wrap; word-wrap: break-word; }
  .dxs__empty { font: 500 13px/1.4 var(--font); color: var(--m-ink-3); }
  .dxs__meta3 { flex: 0 0 auto; display: flex; align-items: stretch; margin: 15px 0 4px; }
  .dxs__m { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
  .dxs__m b { font: 600 14px/1 var(--font-ledger); color: var(--m-ink); font-variant-numeric: tabular-nums; text-align: center; }
  .dxs__m em { font-style: normal; font: 600 10px/1 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--m-ink-3); }
  .dxs__msep { width: 1px; background: var(--m-hair); margin: 2px 0; }
  .dxs__acts { flex: 0 0 auto; display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
  .dxs__actrow { display: flex; gap: 9px; }
  .dxs__btn {
    flex: 1; height: 48px; border: 0; border-radius: 14px; cursor: pointer; display: inline-flex; align-items: center;
    justify-content: center; gap: 8px; font: 700 13.5px/1 var(--font); letter-spacing: -.01em;
  }
  .dxs__btn i { font-size: 16px; }
  .dxs__btn:active { transform: scale(.985); }
  .dxs__btn--p { background: var(--m-cta-bg); color: var(--m-cta-ink); }
  .dxs__btn--s { background: var(--m-surface-2); color: var(--m-ink); box-shadow: inset 0 0 0 1px var(--m-hair-2); }
  html[data-theme="dark"] .dxs__btn--s { background: rgba(255, 255, 255, .06); }
  .dxs__btn--del { flex: 0 0 52px; background: var(--m-coral-wash); color: var(--m-coral); }

  @media (prefers-reduced-motion: reduce) { .dxs__sheet, .dxs__scrim { transition: none; } }
}

/* ==========================================================================================
   PHONE EMAIL TEMPLATES (.et) — v2.56.0. Append-only. Preview-first: the live email is the
   hero, with a native iOS-Settings-style grouped list (inline Active toggles) below. Distinct
   from Documents on purpose — each section gets its own personality. Reuses .dm / .dm__nav--v2
   / .dm__scroll / .pv__scroll / .dm__gear / .sk.
   ========================================================================================== */
@media (max-width: 767.98px) {

  /* ---- live preview hero ---- */
  .et-pv { padding: 6px var(--m-gutter) 2px; }
  .et-pv__top { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 8px; }
  .et-pv__eb { display: inline-flex; align-items: center; gap: 5px; font: 700 10.5px/1 var(--font); letter-spacing: .13em; text-transform: uppercase; color: var(--m-ink-3); }
  .et-pv__eb i { font-size: 12px; }
  .et-status { flex: 0 0 auto; font: 700 10.5px/1.4 var(--font); border-radius: 999px; padding: 2px 10px; letter-spacing: .02em; }
  .et-status--on { color: var(--m-green); background: var(--m-green-wash); }
  .et-status--off { color: var(--m-ink-3); background: rgba(10, 31, 68, .07); }
  html.dm-on[data-theme="dark"] .et-status--off { background: rgba(255, 255, 255, .08); }
  .et-pv__name { margin: 0 4px 10px; font: 800 17px/1.15 var(--font-display); letter-spacing: -.02em; color: var(--m-ink); }

  .et-mail {
    background: var(--m-surface); border: 1px solid var(--m-hair); border-radius: 20px; overflow: hidden;
    box-shadow: 0 14px 34px -20px rgba(16, 24, 40, .40);
    transition: opacity .28s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
  }
  .et-mail--enter { opacity: 0; transform: translateY(10px); }
  .et-mail__from { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-bottom: 1px solid var(--m-hair); }
  .et-mail__ava { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--m-char); color: var(--m-onbrand); font: 700 12.5px/1 var(--font); }
  .et-mail__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .et-mail__who b { font: 600 13px/1.2 var(--font); color: var(--m-ink); }
  .et-mail__who span { font: 500 11.5px/1.2 var(--font); color: var(--m-ink-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .et-mail__time { flex: 0 0 auto; font: 500 11px/1 var(--font-ledger); color: var(--m-ink-3); opacity: .7; }
  .et-mail__subj { padding: 13px 16px 6px; font: 650 14.5px/1.35 var(--font-display); letter-spacing: -.01em; color: var(--m-ink); }
  .et-mail__body { position: relative; padding: 0 16px 16px; font: 400 13px/1.7 var(--font); color: var(--m-ink-2); max-height: 210px; overflow: hidden; }
  .et-mail__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 42px; background: linear-gradient(to top, var(--m-surface), rgba(255, 255, 255, 0)); }
  html.dm-on[data-theme="dark"] .et-mail__fade { background: linear-gradient(to top, var(--m-surface), rgba(30, 34, 42, 0)); }
  .et-mail__ph { opacity: .4; }
  .et-var { background: rgba(10, 31, 68, .09); color: var(--m-ink); border-radius: 5px; padding: 0 5px; font-weight: 600; white-space: nowrap; }
  html.dm-on[data-theme="dark"] .et-var { background: rgba(255, 255, 255, .11); }

  .et-pv__edit {
    width: 100%; height: 46px; margin-top: 12px; border: 0; border-radius: 13px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--m-char); color: var(--m-surface); font: 700 13.5px/1 var(--font); letter-spacing: -.01em;
  }
  .et-pv__edit i { font-size: 16px; }
  .et-pv__edit:active { transform: scale(.985); }

  /* ---- native grouped list ---- */
  .et-sec { padding: 18px calc(var(--m-gutter) + 2px) 9px; font: 800 12.5px/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; color: var(--m-ink-2); }
  .et-sec__hint { font: 600 12px/1 var(--font); letter-spacing: 0; text-transform: none; color: var(--m-ink-3); }
  .et-list { margin: 0 var(--m-gutter); background: var(--m-surface); border: 1px solid var(--m-hair); border-radius: 16px; overflow: hidden; box-shadow: var(--m-lift); }
  .et-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; transition: background .15s ease; }
  .et-row::after { content: ""; position: absolute; left: 58px; right: 0; bottom: 0; height: 1px; background: var(--m-hair); }
  .et-row:last-child::after { display: none; }
  .et-row:active { background: var(--m-surface-2); }
  .et-row.is-sel { background: var(--m-surface-2); }
  .et-row.is-sel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--m-char); }
  .et-row__ico { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; background: rgba(10, 31, 68, .06); color: var(--m-ink); font-size: 16px; transition: background .15s, color .15s; }
  html.dm-on[data-theme="dark"] .et-row__ico { background: rgba(255, 255, 255, .06); }
  .et-row.is-sel .et-row__ico { background: var(--m-char); color: var(--m-onbrand); }
  .et-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .et-row__nm { font: 600 14px/1.25 var(--font-display); color: var(--m-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .et-row__uf { font: 500 11.5px/1.2 var(--font); color: var(--m-ink-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .et-sw { flex: 0 0 auto; width: 46px; height: 28px; border: 0; border-radius: 999px; padding: 0; cursor: pointer; position: relative; background: rgba(10, 31, 68, .17); transition: background .2s ease; }
  html.dm-on[data-theme="dark"] .et-sw { background: rgba(255, 255, 255, .18); }
  .et-sw__k { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .22); transition: transform .2s cubic-bezier(.3, 1.3, .5, 1); }
  .et-sw.is-on { background: var(--m-green); }
  .et-sw.is-on .et-sw__k { transform: translateX(18px); }

  .et-row--sk, .et-mail--sk { pointer-events: none; }
  .et-row--sk .et-row__ico.sk { border-radius: 9px; }

  @media (prefers-reduced-motion: reduce) { .et-mail, .et-sw__k, .et-row__ico { transition: none; } }
}

/* Info sheet variable chips (rendered inside a desktop-token buildModal, so global tokens). */
.et-ivars { display: flex; flex-wrap: wrap; gap: 6px; }
.et-ivar { font: 600 .78rem/1.3 ui-monospace, Menlo, Consolas, monospace; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 9px; }

/* ==========================================================================================
   PHONE ACTIVITY (.av) — v2.57.0. Append-only. A glowing, colour-coded timeline in the
   Charcoal-Ledger language: sticky filter chips, a rail that flows from each marker's hue,
   and markers filled in their own meaning (green = money in, amber = chasing, coral =
   cancelled/deleted, navy = neutral, grey = automation). Reuses .dm / .dm__nav--v2 /
   .dm__scroll / .pv__scroll / .sk. Distinct on purpose — no hero, the events are the content.
   ========================================================================================== */
@media (max-width: 767.98px) {

  /* sticky filter chips */
  .av-chips { position: sticky; top: 0; z-index: 4; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 6px var(--m-gutter) 12px; background: linear-gradient(180deg, var(--m-bg) 74%, transparent); }
  .av-chips::-webkit-scrollbar { display: none; }
  .av-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--m-hair-2); background: var(--m-surface); color: var(--m-ink-2); border-radius: 999px; padding: 7px 14px; font: 600 12.5px/1 var(--font); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
  .av-chip i { font-size: 12px; opacity: .7; }
  .av-chip.is-on { background: var(--m-char); color: var(--m-surface); border-color: var(--m-char); }
  .av-chip.is-on i { opacity: 1; }

  /* new-activity pill (shared #act-new element, restyled for the ledger) */
  html.dm-on .act-new { position: sticky; top: 52px; z-index: 6; display: flex; justify-content: center; pointer-events: none; padding-top: 4px; }
  html.dm-on .act-new button { pointer-events: auto; border: 0; background: var(--m-char); color: var(--m-surface); font: 700 12.5px/1 var(--font); padding: 9px 16px; border-radius: 999px; cursor: pointer; box-shadow: 0 10px 26px -6px rgba(16, 24, 40, .40); }

  /* day divider */
  .av-list { padding: 0 var(--m-gutter) 26px; }
  .av-day { display: flex; align-items: center; gap: 11px; padding: 16px 4px 12px; }
  .av-list > .av-day:first-child { padding-top: 6px; }
  .av-day__lbl { font: 700 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--m-ink-2); }
  .av-day__line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--m-hair-2), transparent); }
  .av-day__n { font: 500 11px/1 var(--font-ledger); color: var(--m-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

  /* activity row: soft tinted icon tile, one line + quiet meta, whole row tappable */
  .av-item { display: flex; gap: 12px; padding: 10px 0; }
  .av-item[data-log], .av-item[data-fold] { cursor: pointer; border-radius: 12px; margin: 0 -8px; padding: 10px 8px; transition: background .13s ease; }
  .av-item[data-log]:active, .av-item[data-fold]:active { background: var(--m-surface-2); }
  .av-ic { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 11px; display: grid; place-items: center; font-size: 17px; }
  .av-ic--green { background: var(--m-green-wash); color: var(--m-green); }
  .av-ic--amber { background: var(--m-amber-wash); color: var(--m-amber); }
  .av-ic--coral { background: var(--m-coral-wash); color: var(--m-coral); }
  .av-ic--navy  { background: rgba(10, 31, 68, .06); color: var(--m-ink); }
  .av-ic--gray  { background: rgba(138, 147, 172, .14); color: var(--m-ink-3); }
  html.dm-on[data-theme="dark"] .av-ic--navy { background: rgba(255, 255, 255, .06); }
  .av-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .av-sum { font: 500 13.5px/1.45 var(--font); color: var(--m-ink); }
  .av-sum b { font-weight: 700; }
  .av-sum--muted { color: var(--m-ink-3); }
  .av-meta { font: 500 11.5px/1.3 var(--font); color: var(--m-ink-3); }

  .av-end { text-align: center; color: var(--m-ink-3); font: 500 12px/1 var(--font); padding: 22px 0 8px; }

  .av-item--sk { pointer-events: none; padding: 10px 0; }
  .av-item--sk .av-ic.sk { border-radius: 11px; }

  @media (prefers-reduced-motion: reduce) { .av-chip { transition: none; } .av-item[data-log], .av-item[data-fold] { transition: none; } }
}

/* ==========================================================================================
   CUSTOM NAV ICON SYSTEM (v2.58.0) — hand-drawn SVG glyphs shared by the desktop sidebar, the
   floating tab bar and the "All sections" sheet. Outline everywhere; the tab bar swaps to the
   filled glyph on the active tab (true native behaviour). currentColor lets each surface tint.
   ========================================================================================== */
.ni { display: block; stroke-linecap: round; stroke-linejoin: round; }
.ni--out { fill: none; stroke: currentColor; stroke-width: 1.8; }
.ni--solid { fill: currentColor; stroke: none; display: none; }
#app-tabbar .tabbar__item.is-active .ni--out { display: none; }
#app-tabbar .tabbar__item.is-active .ni--solid { display: block; }
.nav-item .ni { width: 20px; height: 20px; }
.appmenu__ico .ni { width: 24px; height: 24px; }

/* ==========================================================================================
   PHONE USERS / TEAM (.um) + PROFILE SHEET (.ums) — v2.59.0. Append-only. A premium roster
   grouped by role with gradient avatars + status dots; tapping a member opens a glass profile
   sheet (native segmented role control + access toggle). Reuses .dm / .dm__nav--v2 /
   .dm__scroll / .pv__scroll / .pv-rec / .dm__gear / .pv-empty / .sk / .dm-in.
   ========================================================================================== */
@media (max-width: 767.98px) {
  .um-list { padding: 4px var(--m-gutter) 24px; }
  .um-sec { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 4px 9px; }
  .um-sec b { font: 800 12px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--m-ink-2); }
  .um-sec span { font: 500 11px/1 var(--font-ledger); color: var(--m-ink-3); font-variant-numeric: tabular-nums; }
  .um-cards { display: flex; flex-direction: column; gap: 9px; }

  .um-card { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 16px; background: var(--m-surface); box-shadow: var(--m-lift); cursor: pointer; transition: transform .13s cubic-bezier(.2, .7, .3, 1); }
  .um-card:active { transform: scale(.985); }
  .um-card.is-off { opacity: .6; }
  .um-av { position: relative; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 15px/1 var(--font-display); }
  .um-dot { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid var(--m-surface); }
  .um-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .um-nm { display: flex; align-items: center; gap: 6px; font: 700 14.5px/1.2 var(--font-display); color: var(--m-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .um-you { flex: 0 0 auto; font: 700 9.5px/1.4 var(--font); letter-spacing: .03em; color: var(--m-green); background: var(--m-green-wash); border-radius: 999px; padding: 1px 7px; }
  .um-sub { font: 500 12px/1.3 var(--font); color: var(--m-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .um-sub--pend { color: var(--m-amber); }
  .um-role { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font: 700 11px/1.4 var(--font); border-radius: 999px; padding: 4px 10px; }
  .um-role i { font-size: 11px; }
  .um-role--adm { background: var(--m-char); color: var(--m-surface); }
  .um-role--edt { background: rgba(10, 31, 68, .08); color: #2B3A5C; }
  .um-role--vwr { background: rgba(10, 31, 68, .045); color: var(--m-ink-3); }
  html.dm-on[data-theme="dark"] .um-role--edt { background: rgba(255, 255, 255, .09); color: #C7D2E8; }
  html.dm-on[data-theme="dark"] .um-role--vwr { background: rgba(255, 255, 255, .05); }
  .um-card--sk { pointer-events: none; }
  .um-card--sk .um-av.sk { border-radius: 50%; }
  @media (prefers-reduced-motion: reduce) { .um-card { transition: none; } }

  /* ---- profile sheet ---- */
  .ums { position: fixed; inset: 0; z-index: 3200; }
  .ums__scrim { position: absolute; inset: 0; background: rgba(9, 12, 18, .40); opacity: 0; transition: opacity .34s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .ums.is-open .ums__scrim { opacity: 1; }
  .ums__sheet { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 8px 18px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 30px 30px 0 0;
    background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, .65); box-shadow: 0 -26px 64px -22px rgba(16, 24, 40, .42);
    transform: translateY(102%); transition: transform .44s cubic-bezier(.22, 1, .36, 1); }
  .ums.is-open .ums__sheet { transform: translateY(0); }
  html[data-theme="dark"] .ums__sheet { background: rgba(22, 26, 34, .82); border-top: 1px solid rgba(255, 255, 255, .10); box-shadow: 0 -26px 64px -22px rgba(0, 0, 0, .72); }
  .ums__grip { flex: 0 0 auto; width: 40px; height: 5px; border-radius: 3px; background: rgba(120, 130, 145, .45); margin: 4px auto 2px; cursor: pointer; }
  .ums__x-row { display: flex; justify-content: flex-end; }
  .ums__x { width: 34px; height: 34px; border: none; border-radius: 50%; background: rgba(120, 130, 145, .14); color: var(--m-ink); display: grid; place-items: center; font-size: 14px; cursor: pointer; }
  .ums__x:active { transform: scale(.92); }

  .ums__profile { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: -6px; }
  .ums__av { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 26px/1 var(--font-display); box-shadow: 0 12px 26px -10px rgba(16, 24, 40, .5); }
  .ums__nm { margin-top: 12px; font: 800 22px/1.15 var(--font-display); letter-spacing: -.02em; color: var(--m-ink); }
  .ums__em { margin-top: 2px; font: 500 13px/1.3 var(--font); color: var(--m-ink-3); }
  .ums__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 12px; }
  .ums__chip { display: inline-flex; align-items: center; gap: 5px; font: 700 11.5px/1.4 var(--font); border-radius: 999px; padding: 4px 11px; color: var(--m-ink-2); background: rgba(10, 31, 68, .06); }
  html.dm-on[data-theme="dark"] .ums__chip { background: rgba(255, 255, 255, .07); }
  .ums__cdot { width: 6px; height: 6px; border-radius: 50%; }
  .ums__chip--adm { background: var(--m-char); color: var(--m-surface); }
  .ums__chip--on { background: var(--m-green-wash); color: var(--m-green); }
  .ums__chip--pend { background: var(--m-amber-wash); color: var(--m-amber); }
  .ums__chip--you { background: var(--m-green-wash); color: var(--m-green); }

  .ums__lbl { font: 800 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--m-ink-3); margin: 20px 2px 9px; }
  .ums__seg { display: flex; gap: 3px; padding: 4px; border-radius: 13px; background: var(--m-surface-2); box-shadow: inset 0 0 0 1px var(--m-hair); }
  .ums__segb { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 0; background: none; cursor: pointer; padding: 9px 0; border-radius: 10px; font: 600 13px/1 var(--font); color: var(--m-ink-2); }
  .ums__segb i { font-size: 13px; }
  .ums__segb.is-on { background: var(--m-char); color: var(--m-surface); box-shadow: 0 2px 8px -2px rgba(16, 24, 40, .4); }
  .ums__segb:disabled { opacity: .5; cursor: default; }

  .ums__row { display: flex; align-items: center; gap: 12px; margin: 18px 2px 0; }
  .ums__rmain { flex: 1; min-width: 0; }
  .ums__rt { display: block; font: 600 14px/1.2 var(--font); color: var(--m-ink); }
  .ums__rs { display: block; font: 500 11.5px/1.3 var(--font); color: var(--m-ink-3); margin-top: 1px; }
  .ums__sw { flex: 0 0 auto; width: 50px; height: 30px; border: 0; border-radius: 999px; padding: 0; position: relative; cursor: pointer; background: rgba(10, 31, 68, .17); transition: background .2s ease; }
  html.dm-on[data-theme="dark"] .ums__sw { background: rgba(255, 255, 255, .18); }
  .ums__swk { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s cubic-bezier(.3, 1.3, .5, 1); }
  .ums__sw.is-on { background: var(--m-green); }
  .ums__sw.is-on .ums__swk { transform: translateX(20px); }
  .ums__sw:disabled { opacity: .5; cursor: default; }

  .ums__meta { display: flex; align-items: center; gap: 8px; margin: 18px 2px 0; font: 500 12.5px/1.3 var(--font); color: var(--m-ink-3); }
  .ums__remove { width: 100%; margin-top: 18px; height: 46px; border: 1px solid rgba(217, 58, 47, .25); background: rgba(217, 58, 47, .05); color: #C0392B; border-radius: 13px; font: 700 13.5px/1 var(--font); display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
  .ums__remove:active { transform: scale(.985); }
  html[data-theme="dark"] .ums__remove { color: var(--m-coral); border-color: rgba(255, 122, 112, .3); background: rgba(255, 122, 112, .08); }
  .ums__self { margin-top: 18px; display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: 13px; background: var(--m-surface-2); font: 500 12.5px/1.45 var(--font); color: var(--m-ink-3); }
  .ums__self i { margin-top: 1px; }

  @media (prefers-reduced-motion: reduce) { .ums__sheet, .ums__scrim, .ums__swk { transition: none; } }
}

/* roles-info modal (desktop-token buildModal, so global tokens) */
.umi { display: flex; flex-direction: column; gap: 14px; }
.umi__row { display: flex; align-items: flex-start; gap: 12px; }
.umi__ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); font-size: 17px; }
.umi__ic--adm { background: #1A1C1E; color: #fff; }
.umi__row b { font-size: .95rem; color: var(--ink); }
.umi__row p { margin: 2px 0 0; font-size: .85rem; color: var(--ink-2); line-height: 1.45; }

/* ==========================================================================================
   ACTIVITY DETAIL SHEET (.avd) — v2.61.0. Append-only. A native glass sheet for a single
   event: a tinted hero tile, the summary, a clean When / By / Type card, and a one-tap
   "Open" into the related item. Same drag engine + scroll-lock as the other sheets.
   ========================================================================================== */
@media (max-width: 767.98px) {
  .avd { position: fixed; inset: 0; z-index: 3200; }
  .avd__scrim { position: absolute; inset: 0; background: rgba(9, 12, 18, .40); opacity: 0; transition: opacity .34s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .avd.is-open .avd__scrim { opacity: 1; }
  .avd__sheet { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 8px 18px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 30px 30px 0 0;
    background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, .65); box-shadow: 0 -26px 64px -22px rgba(16, 24, 40, .42);
    transform: translateY(102%); transition: transform .44s cubic-bezier(.22, 1, .36, 1); }
  .avd.is-open .avd__sheet { transform: translateY(0); }
  html[data-theme="dark"] .avd__sheet { background: rgba(22, 26, 34, .82); border-top: 1px solid rgba(255, 255, 255, .10); box-shadow: 0 -26px 64px -22px rgba(0, 0, 0, .72); }
  .avd__grip { flex: 0 0 auto; width: 40px; height: 5px; border-radius: 3px; background: rgba(120, 130, 145, .45); margin: 4px auto 2px; cursor: pointer; }
  .avd__x-row { display: flex; justify-content: flex-end; }
  .avd__x { width: 34px; height: 34px; border: none; border-radius: 50%; background: rgba(120, 130, 145, .14); color: var(--m-ink); display: grid; place-items: center; font-size: 14px; cursor: pointer; }
  .avd__x:active { transform: scale(.92); }

  .avd__hero { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: -4px; }
  .avd__tile { width: 60px; height: 60px; border-radius: 17px; display: grid; place-items: center; font-size: 26px; }
  .avd__cat { margin-top: 14px; font: 700 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--m-ink-3); }
  .avd__title { margin-top: 8px; font: 700 18px/1.4 var(--font-display); letter-spacing: -.01em; color: var(--m-ink); max-width: 300px; }

  .avd__card { margin-top: 20px; background: var(--m-surface-2); border-radius: 16px; padding: 2px 14px; }
  .avd__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; }
  .avd__row + .avd__row { border-top: 1px solid var(--m-hair); }
  .avd__k { flex: 0 0 auto; font: 600 12.5px/1 var(--font); color: var(--m-ink-3); }
  .avd__v { min-width: 0; font: 600 13.5px/1.35 var(--font); color: var(--m-ink); display: flex; align-items: center; gap: 8px; text-align: right; justify-content: flex-end; }
  .avd__av { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--m-char); color: var(--m-onbrand); font: 700 9px/1 var(--font); display: grid; place-items: center; }
  .avd__av--sys { background: var(--m-ink-3); }

  .avd__open { width: 100%; margin-top: 20px; height: 50px; border: 0; border-radius: 14px; background: var(--m-char); color: var(--m-surface); font: 700 14px/1 var(--font); display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
  .avd__open i { font-size: 16px; }
  .avd__open:active { transform: scale(.985); }
  .avd__open span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  @media (prefers-reduced-motion: reduce) { .avd__sheet, .avd__scrim { transition: none; } }
}

/* ==========================================================================================
   PHONE SETTINGS (.stx) — v2.62.0. Native master/detail. The aurora is the brand hero; the
   tabs become a grouped list; tapping a category slides a page in from the right. The reused
   tab content is re-dressed as native grouped controls, with a floating save bar. Append-only.
   ========================================================================================== */
@media (max-width: 767.98px) {
  .stx { position: relative; display: block; }
  .stx-master { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .stx-eyebrow { padding: 10px 22px 12px; font: 700 10.5px/1 var(--font); letter-spacing: .13em; text-transform: uppercase; color: var(--m-ink-3); }

  /* aurora brand hero */
  .stx-hero { position: relative; height: 154px; margin: 0 var(--m-gutter); border-radius: 24px; overflow: hidden; background: #0C0F16; box-shadow: 0 18px 40px -18px rgba(12, 15, 22, .55); }
  .stx-hero .aur { position: absolute; inset: 0; border-radius: 0; }
  .stx-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 15, 22, .04) 0%, rgba(12, 15, 22, .5) 100%); }
  .stx-hero__inner { position: relative; z-index: 2; height: 100%; display: flex; align-items: flex-end; gap: 13px; padding: 16px; }
  .stx-hero__mono, .stx-hero__logo { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font: 800 19px/1 var(--font-display); overflow: hidden; }
  .stx-hero__logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; background: #fff; }
  .stx-hero__txt { min-width: 0; padding-bottom: 2px; }
  .stx-hero__name { display: block; font: 800 20px/1.1 var(--font-display); letter-spacing: -.01em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stx-hero__sub { display: block; margin-top: 2px; font: 500 12px/1.2 var(--font); color: rgba(255, 255, 255, .7); }

  /* grouped category list */
  .stx-sec { padding: 18px 22px 8px; font: 800 11px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--m-ink-3); }
  .stx-grp { margin: 0 var(--m-gutter); background: var(--m-surface); border: 1px solid var(--m-hair); border-radius: 16px; overflow: hidden; }
  .stx-row { position: relative; width: 100%; display: flex; align-items: center; gap: 13px; padding: 11px 14px; background: none; border: 0; cursor: pointer; text-align: left; }
  .stx-row:active { background: var(--m-surface-2); }
  .stx-row::after { content: ""; position: absolute; left: 57px; right: 0; bottom: 0; height: 1px; background: var(--m-hair); }
  .stx-row:last-child::after { display: none; }
  .stx-row__ic { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 16px; }
  .stx-row__lb { flex: 1; font: 500 14.5px/1.2 var(--font); color: var(--m-ink); }
  .stx-row__val { font: 500 12.5px/1 var(--font); color: var(--m-ink-3); margin-right: 4px; white-space: nowrap; }
  .stx-row__chev { color: var(--m-ink-3); opacity: .5; font-size: 15px; }

  /* detail page (slides in) */
  .stx-page { position: fixed; inset: 0; z-index: 1045; background: var(--m-bg); display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .34s cubic-bezier(.32, .72, 0, 1); box-shadow: -16px 0 40px -20px rgba(16, 24, 40, .4); }
  .stx-page.is-in { transform: translateX(0); }
  .stx-nav { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 10px calc(6px + env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--m-hair); background: var(--m-bg); }
  .stx-back { display: inline-flex; align-items: center; gap: 1px; background: none; border: 0; color: var(--m-char); font: 600 15px/1 var(--font); cursor: pointer; padding: 6px; }
  .stx-back i { font-size: 21px; }
  .stx-ptitle { flex: 1; text-align: center; font: 800 17px/1.2 var(--font-display); letter-spacing: -.01em; color: var(--m-ink); margin: 0; }
  .stx-nav__sp { flex: 0 0 84px; }
  .stx-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px var(--m-gutter) 132px; }

  /* re-dress the reused tab content as native grouped controls */
  .stx-body .ios-card { background: var(--m-surface); border: 1px solid var(--m-hair); border-radius: 16px; box-shadow: none; padding: 15px; margin-bottom: 16px !important; }
  .stx-body .section-title { font: 800 13px/1.2 var(--font-display); letter-spacing: -.01em; text-transform: none; color: var(--m-ink); margin: 0 0 6px; }
  .stx-body .text-secondary-ios { color: var(--m-ink-3); }
  .stx-body .set-grid { display: flex; flex-direction: column; gap: 13px; }
  .stx-body .hm-field label, .stx-body .hm-label, .stx-body label.hm-label { font: 600 11.5px/1.2 var(--font) !important; color: var(--m-ink-3) !important; text-transform: none !important; letter-spacing: 0 !important; }
  .stx-body .form-control, .stx-body .form-select, .stx-body textarea.form-control { background: var(--m-surface-2); border: 1px solid var(--m-hair-2); border-radius: 11px; color: var(--m-ink); font-size: 15px; padding: 10px 12px; box-shadow: none; }
  .stx-body .form-control:focus, .stx-body .form-select:focus { border-color: var(--m-ink); box-shadow: none; outline: none; }
  .stx-body .btn-ios-primary { background: var(--m-char); color: var(--m-surface); border: 0; }
  .stx-body .btn-ios-secondary { background: var(--m-surface-2); color: var(--m-ink); border: 1px solid var(--m-hair-2); }

  /* floating save bar */
  .stx-page .set-savebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: block !important; padding: 12px var(--m-gutter) calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--m-bg) 34%); border: 0; margin: 0; }
  .stx-page .set-savebar__inner { display: flex; align-items: center; gap: 10px; background: var(--m-surface); border: 1px solid var(--m-hair); border-radius: 16px; padding: 10px 12px; box-shadow: 0 12px 30px -12px rgba(16, 24, 40, .4); }
  .stx-page .set-savebar__label { flex: 1; font: 500 12.5px/1.2 var(--font); color: var(--m-ink-3); min-width: 0; }
  .stx-page .set-savebar__btns { display: flex; gap: 8px; flex: 0 0 auto; }
  .stx-page .set-savebar .btn-ios-secondary { background: none; border: 0; color: var(--m-ink-3); padding: 8px 10px; }
  .stx-page .set-savebar .btn-ios-primary { background: var(--m-char); color: var(--m-surface); border: 0; border-radius: 11px; padding: 9px 16px; }

  @media (prefers-reduced-motion: reduce) { .stx-page { transition: none; } }
}

/* ==========================================================================================
   DASHBOARD NATIVE REDESIGN (.dgh greeting, .dpanel panels, .dchz chase, .ds/.wxs/.mts sheets)
   v2.63.0. Append-only. Calmer, spacious, everything tappable. Global native non-select too.
   ========================================================================================== */
@media (max-width: 767.98px) {
  /* native-style non-selectable text app-wide (inputs stay selectable) */
  html.dm-on, html.dm-on * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  html.dm-on input, html.dm-on textarea, html.dm-on select, html.dm-on [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

  /* greeting */
  .dgh { position: relative; padding: 20px var(--m-gutter) 22px; overflow: hidden; }
  .dgh__sky { position: absolute; top: -60px; right: -40px; width: 220px; height: 180px; pointer-events: none; background: radial-gradient(ellipse at 70% 30%, rgba(255, 205, 130, .42), transparent 66%); }
  .dgh--evening .dgh__sky, .dgh--night .dgh__sky { background: radial-gradient(ellipse at 72% 28%, rgba(120, 150, 220, .34), transparent 66%); }
  .dgh--dawn .dgh__sky, .dgh--dusk .dgh__sky { background: radial-gradient(ellipse at 70% 30%, rgba(255, 170, 150, .40), transparent 66%); }
  .dgh__row { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .dgh__hi { margin: 0; font: 800 27px/1.12 var(--font-display); letter-spacing: -.02em; color: var(--m-ink); }
  .dgh__hi em { font-style: normal; color: #C08A3E; }
  .dgh--evening .dgh__hi em, .dgh--night .dgh__hi em { color: #7C93C8; }
  .dgh__date { margin: 10px 0 0; font: 500 13px/1.2 var(--font); color: var(--m-ink-3); }
  .dgh__dot { margin: 0 6px; opacity: .6; }
  .dgh__wx { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 15px; background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 16px -8px rgba(10, 31, 68, .25); cursor: pointer; }
  html[data-theme="dark"] .dgh__wx { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
  .dgh__wx:active { transform: scale(.96); }
  .dgh__wx i { font-size: 20px; color: #E0821A; }
  .dgh__wx-t { font: 600 16px/1 var(--font-ledger); color: var(--m-ink); }
  .dgh__wx--wait { width: 0; height: 0; overflow: hidden; }

  /* ===== premium header (v3) — gilded monogram, wordmark, notifications, settings ===== */
  .dm__nav--v3 { display: flex; align-items: center; gap: 12px; grid-template-columns: none; border-bottom: 1px solid var(--m-hair); }
  .dm__nav--v3 .dm__brand { display: flex; flex-direction: row; align-items: center; gap: 11px; min-width: 0; flex: 1; }
  .dm__mono { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 13px; display: grid; place-items: center; position: relative; overflow: hidden;
    background: linear-gradient(145deg, #23262b, #0f1113); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08); }
  .dm__mono b { font: 800 15px/1 var(--font-display); letter-spacing: -.02em; background: linear-gradient(180deg, #EAD9A6, #B08525); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .dm__mono::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .14) 50%, transparent 60%); transform: translateX(-120%); animation: dmMonoSheen 7s ease-in-out 1.5s infinite; }
  .dm__wm { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .dm__name { font: 700 18px/1 var(--font-display); letter-spacing: -.02em; color: var(--m-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dm__cap { font: 600 9.5px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--m-ink-3); }
  .dm__actions { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
  .dm__ico { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--m-hair); background: var(--m-surface); color: var(--m-ink-2);
    display: grid; place-items: center; font-size: 18px; cursor: pointer; text-decoration: none; position: relative; box-shadow: 0 2px 6px -3px rgba(0, 0, 0, .15); transition: transform .12s cubic-bezier(.22, .61, .36, 1); }
  .dm__ico:active { transform: scale(.92); }
  .dm__badge { position: absolute; top: 5px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--m-coral); color: #fff;
    font: 700 9.5px/16px var(--font); text-align: center; box-shadow: 0 0 0 2px var(--m-surface); }

  /* ===== greeting (v3) — animated words + rotating message ===== */
  .dgh__hi .dgh__w { display: inline-block; opacity: 0; transform: translateY(14px); animation: dghRise .6s cubic-bezier(.22, .61, .36, 1) forwards; animation-delay: calc(.12s + var(--i) * .06s); }
  .dgh__hi.is-shown .dgh__w { opacity: 1; transform: none; animation: none; }
  .dgh__nm { background: linear-gradient(120deg, #C79A3C, #9A6A18); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .dgh--evening .dgh__nm, .dgh--night .dgh__nm { background: linear-gradient(120deg, #8FA6D8, #5C6FA6); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .dgh__say { position: relative; height: 20px; margin-top: 12px; }
  .dgh__line { position: absolute; inset: 0; font: 500 13.5px/1.45 var(--font); color: var(--m-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: opacity .4s cubic-bezier(.22, .61, .36, 1), transform .4s cubic-bezier(.22, .61, .36, 1); }
  .dgh__line.out { opacity: 0; transform: translateY(-6px); }
  .dgh__line b { color: var(--m-ink); font-weight: 700; }

  /* ===== month rail (v3) — contained pill selector ===== */
  .mrail--v3 { position: relative; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 4px; margin: 0 var(--m-gutter); background: var(--m-surface-2); border-radius: 16px; }
  .mrail--v3::-webkit-scrollbar { display: none; }
  .mrail__pill { position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 12px; background: var(--m-char); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .4); z-index: 1;
    transition: transform .34s cubic-bezier(.22, .61, .36, 1), width .34s cubic-bezier(.22, .61, .36, 1); }
  .mrail--v3 .mrail__chip { position: relative; z-index: 2; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: transparent; padding: 9px 15px; border-radius: 12px; cursor: pointer; box-shadow: none; color: var(--m-ink-2); transition: color .28s; }
  .mrail--v3 .mrail__chip::before { display: none; }
  .mrail--v3 .mrail__chip[aria-selected="true"] { color: #fff; background: transparent; box-shadow: none; }
  .mrail--v3 .mrail__lbl { font: 700 13px/1 var(--font); letter-spacing: .02em; }
  .mrail__yr { font: 600 8.5px/1 var(--font); letter-spacing: .04em; opacity: .5; }
  .mrail--v3 .mrail__chip[aria-selected="true"] .mrail__yr { opacity: .75; }
  .mrail__now { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--m-amber); }
  .mrail--v3 .mrail__chip[aria-selected="true"] .mrail__now { background: #fff; }

  /* notifications panel — a touch more rounding on mobile */
  html.dm-on .notif-panel { border-radius: 20px; }

  /* panels */
  .dpanels { display: flex; gap: 11px; padding: 0 var(--m-gutter); }
  .dpanel { position: relative; flex: 1; min-width: 0; text-align: left; height: 146px; padding: 15px 15px 0; border-radius: 20px; background: var(--m-surface); border: 1px solid var(--m-hair); box-shadow: var(--m-lift); overflow: hidden; cursor: pointer; }
  .dpanel:active { transform: scale(.985); }
  .dpanel__lbl { display: block; font: 600 11px/1 var(--font); letter-spacing: .03em; text-transform: uppercase; color: var(--m-ink-3); }
  .dpanel__val { display: block; margin-top: 11px; font: 600 26px/1 var(--font-ledger); letter-spacing: -.02em; }
  .dpanel--out .dpanel__val { color: var(--m-ink); }
  .dpanel--coll .dpanel__val { color: var(--m-green); }
  .dpanel__sub { display: block; margin-top: 7px; font: 500 12px/1.2 var(--font); color: var(--m-ink-3); }
  .dpanel__spark { position: absolute; left: 0; right: 0; bottom: 0; height: 42px; opacity: .55; pointer-events: none; }
  .dpanel__spark svg { width: 100%; height: 100%; display: block; }

  /* chase */
  .dchz { display: flex; flex-direction: column; gap: 11px; }
  .dchz__card { display: flex; align-items: center; gap: 13px; padding: 14px; border-radius: 18px; background: var(--m-surface); border: 1px solid var(--m-hair); box-shadow: var(--m-lift); }
  .dchz__av { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 15px/1 var(--font-display); }
  .dchz__main { flex: 1; min-width: 0; }
  .dchz__name { display: block; font: 700 15px/1.2 var(--font-display); color: var(--m-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dchz__sub { display: block; margin-top: 2px; font: 500 12.5px/1.2 var(--font); color: var(--m-ink-3); }
  .dchz__nudge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 10px 15px; border: 0; border-radius: 12px; background: var(--m-char); color: var(--m-surface); font: 700 13px/1 var(--font); cursor: pointer; }
  .dchz__nudge:active { transform: scale(.95); }

  /* shared sheet shell */
  .ds { position: fixed; inset: 0; z-index: 3200; }
  .ds__scrim { position: absolute; inset: 0; background: rgba(9, 12, 18, .40); opacity: 0; transition: opacity .34s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .ds.is-open .ds__scrim { opacity: 1; }
  .ds__sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 94vh; border-radius: 30px 30px 0 0; overflow: hidden; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%); border-top: 1px solid rgba(255, 255, 255, .65); box-shadow: 0 -26px 64px -22px rgba(16, 24, 40, .42); transform: translateY(102%); transition: transform .44s cubic-bezier(.22, 1, .36, 1); }
  .ds.is-open .ds__sheet { transform: translateY(0); }
  html[data-theme="dark"] .ds__sheet { background: rgba(22, 26, 34, .85); border-top-color: rgba(255, 255, 255, .1); }
  .ds__grip { width: 40px; height: 5px; border-radius: 3px; background: rgba(120, 130, 145, .45); margin: 8px auto 0; position: relative; z-index: 3; }
  .ds__body { position: relative; max-height: calc(94vh - 14px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 18px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .ds__x { position: absolute; top: 8px; right: 4px; z-index: 4; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(120, 130, 145, .16); color: var(--m-ink); display: grid; place-items: center; font-size: 13px; cursor: pointer; }
  html[data-theme="dark"] .wxs .ds__x, .wxs .ds__x { background: rgba(255, 255, 255, .18); color: #fff; }

  /* ---- weather sheet (v2.65 — weathery: edge-to-edge dynamic sky, tinted grip,
     Apple-style temperature, GPU-only FX) ---- */
  .ds--wx .ds__grip { display: none; }                       /* the sky owns its own grip */
  .ds--wx .ds__sheet { background: #6C7C90; }                /* safe fallback under the sky */
  html[data-theme="dark"] .ds--wx .ds__sheet { background: #17233c; }
  .wxs.ds__body { padding: 0 0 calc(22px + env(safe-area-inset-bottom, 0px)); background: var(--m-surface); overscroll-behavior: contain; }
  .wxs .ds__x { top: 12px; background: rgba(255, 255, 255, .2); color: #fff; }

  /* the sky — fills the sheet's top edge, gradient set per-mood via --wx-g */
  .wxs-sky { position: relative; overflow: hidden; padding: 0 0 20px; color: #fff; isolation: isolate; contain: paint;
    background: var(--wx-g, linear-gradient(180deg, #2E80C8, #7FB4DE)); }
  .wxs-grip { width: 40px; height: 5px; border-radius: 3px; margin: 9px auto 0; position: relative; z-index: 4; background: rgba(255, 255, 255, .55); }
  .wxs-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
  .wxs-hero { position: relative; z-index: 3; text-align: center; padding: 12px 0 2px; }
  .wxs-glyph { width: 62px; height: 62px; margin: 0 auto; display: block; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .22));
    --wc: #F3F6FB; --wa: #FFD873; --wm: #EAF0FF; --wr: #9FC2F5; }

  /* Apple-style temperature: thin numerals, small raised hairline degree */
  .wxs-temp { display: inline-block; position: relative; margin-top: 4px; font-family: var(--font-display); font-weight: 250;
    font-size: 88px; line-height: .86; letter-spacing: -.045em; text-shadow: 0 2px 22px rgba(0, 0, 0, .16); }
  .wxs-deg { position: absolute; top: .02em; right: -.5em; font-size: .42em; font-weight: 250; letter-spacing: 0; }
  .wxs-cond { font: 600 16px/1.2 var(--font); margin-top: 6px; letter-spacing: .01em; }
  .wxs-hilo { font: 500 13px/1 var(--font-ledger); margin-top: 5px; opacity: .94; }
  .wxs-hilo .lo { opacity: .72; }
  .wxs-loc { display: inline-flex; align-items: center; gap: 5px; font: 500 12.5px/1.2 var(--font); opacity: .86; margin-top: 10px; }
  .wxs-loc i { font-size: 12px; }

  /* content below the sky sits on the card surface, with its own gutter */
  .wxs-stats { display: flex; gap: 9px; margin: 16px 16px 0; }
  .wxs-stat { flex: 1; background: var(--m-surface-2); border-radius: 14px; padding: 12px 8px; text-align: center; }
  .wxs-stat i { font-size: 16px; color: var(--m-ink-3); }
  .wxs-stat b { display: block; font: 600 16px/1 var(--font-ledger); color: var(--m-ink); margin-top: 6px; }
  .wxs-stat em { display: block; font: 600 10px/1.2 var(--font); font-style: normal; color: var(--m-ink-3); margin-top: 4px; letter-spacing: .02em; }
  .wxs-fc { margin: 14px 16px 0; background: var(--m-surface); border: 1px solid var(--m-hair); border-radius: 16px; padding: 2px 14px; }
  .wxs-day { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
  .wxs-day + .wxs-day { border-top: 1px solid var(--m-hair); }
  .wxs-day__n { flex: 1; font: 600 13.5px/1.2 var(--font); color: var(--m-ink); }
  .wxs-day__g { width: 24px; height: 24px; flex: 0 0 auto; --wc: #B7C1D0; --wa: #E0A020; --wm: #94A0B8; --wr: #6E97DD; }
  html[data-theme="dark"] .wxs-day__g { --wc: #5b6478; --wm: #7f8aa4; }
  .wxs-day__t { width: 88px; text-align: right; font: 500 13px/1 var(--font-ledger); color: var(--m-ink); }
  .wxs-day__t .lo { color: var(--m-ink-3); }
  .wxs-upd { display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; font: 500 11.5px/1.2 var(--font); color: var(--m-ink-3); margin-top: 14px; }
  .wxs-upd i { font-size: 12px; }

  /* sky moods (condition + time of day) — gradient + grip tint */
  .wxs--clear     .wxs-sky { --wx-g: linear-gradient(180deg, #2E80C8 0%, #4F97D2 44%, #7FB4DE 100%); }
  .wxs--dawn      .wxs-sky { --wx-g: linear-gradient(180deg, #E79C6A 0%, #E7A79C 40%, #8FB2DC 100%); }
  .wxs--dusk      .wxs-sky { --wx-g: linear-gradient(180deg, #E0885A 0%, #B56E86 46%, #5B5A9E 100%); }
  .wxs--cloud     .wxs-sky { --wx-g: linear-gradient(180deg, #6C7C90 0%, #8493A6 48%, #9EABBB 100%); }
  .wxs--rain      .wxs-sky { --wx-g: linear-gradient(180deg, #3E4658 0%, #525B6D 48%, #6A7385 100%); }
  .wxs--rainNight .wxs-sky { --wx-g: linear-gradient(180deg, #232C43 0%, #333D56 50%, #454F6B 100%); }
  .wxs--night     .wxs-sky { --wx-g: linear-gradient(180deg, #0A1730 0%, #152A50 52%, #2A4472 100%); }
  .wxs--cloud .wxs-grip { background: rgba(255, 255, 255, .5); }
  .wxs--rain .wxs-grip, .wxs--rainNight .wxs-grip { background: rgba(255, 255, 255, .42); }
  .wxs--night .wxs-grip { background: rgba(210, 220, 245, .4); }

  /* FX primitives (all animation is transform/opacity → GPU composited) */
  .wxfx-sun { position: absolute; top: -50px; right: -34px; width: 210px; height: 210px; border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 241, 205, .85), rgba(255, 225, 160, .26) 42%, transparent 66%); }
  .wxfx-moon { position: absolute; top: -30px; right: -16px; width: 150px; height: 150px; border-radius: 50%;
    background: radial-gradient(circle at 60% 42%, rgba(226, 232, 250, .5), rgba(150, 170, 220, .14) 44%, transparent 64%); }
  .wxfx-cloud { position: absolute; border-radius: 50%; background: #fff; will-change: transform; }
  .wxfx-cloud.c1 { width: 120px; height: 44px; top: 24px; left: -30px; opacity: .30; box-shadow: 56px 8px 0 -6px #fff, 110px -4px 0 -12px #fff; animation: wxDriftA 30s ease-in-out infinite; }
  .wxfx-cloud.c2 { width: 150px; height: 52px; top: 6px; right: -56px; opacity: .42; box-shadow: -60px 12px 0 -8px #fff, -120px 4px 0 -16px #fff; animation: wxDriftB 40s ease-in-out infinite; }
  .wxfx-rain { position: absolute; inset: 0; }
  .wxfx-rain i { position: absolute; top: -14%; width: 1.6px; height: 15px; border-radius: 2px;
    background: linear-gradient(180deg, transparent, rgba(220, 232, 255, .7)); animation: wxFall linear infinite; will-change: transform; }
  .wxfx-star { position: absolute; width: 2.5px; height: 2.5px; border-radius: 50%; background: #fff; animation: wxTw 3.4s ease-in-out infinite; will-change: transform, opacity; }

  /* metric sheet */
  .mts-hero { text-align: center; padding: 8px 0 6px; }
  .mts-hero__lbl { font: 700 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--m-ink-3); }
  .mts-hero__val { font: 600 38px/1 var(--font-ledger); letter-spacing: -.02em; color: var(--m-ink); margin-top: 6px; }
  .mts-hero__sub { font: 500 12.5px/1.3 var(--font); color: var(--m-ink-3); margin-top: 4px; }
  .mts-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; margin: 18px 0 10px; }
  .mts-bar span { display: block; height: 100%; }
  .mts-tiles { display: flex; gap: 9px; margin-bottom: 18px; }
  .mts-tile { flex: 1; background: var(--m-surface-2); border-radius: 13px; padding: 11px 12px; }
  .mts-tile__k { display: flex; align-items: center; gap: 6px; font: 600 11px/1 var(--font); color: var(--m-ink-3); }
  .mts-tile__k i { width: 8px; height: 8px; border-radius: 50%; }
  .mts-tile__v { display: block; font: 600 17px/1 var(--font-ledger); color: var(--m-ink); margin-top: 5px; }
  .mts-lbl { font: 800 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--m-ink-3); margin: 2px 2px 8px; }
  .mts-list { background: var(--m-surface); border: 1px solid var(--m-hair); border-radius: 16px; padding: 4px 14px; }
  .mts-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
  .mts-row + .mts-row { border-top: 1px solid var(--m-hair); }
  .mts-av { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 12px/1 var(--font-display); }
  .mts-row__n { flex: 1; min-width: 0; font: 600 13.5px/1.2 var(--font); color: var(--m-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mts-row__v { font: 600 13px/1 var(--font-ledger); color: var(--m-ink); }
  .mts-trend { margin-bottom: 18px; }
  .mts-bars { width: 100%; height: 64px; display: block; }
  .mts-up { color: var(--m-green); font-weight: 700; }
  .mts-dn { color: var(--m-coral); font-weight: 700; }
  .mts-cta { width: 100%; margin-top: 20px; height: 50px; border: 0; border-radius: 14px; background: var(--m-char); color: var(--m-surface); font: 700 14px/1 var(--font); display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
  .mts-cta:active { transform: scale(.985); }

  /* ---- dashboard widgets (v2.66) — premium "At a glance": a smart Focus hero that
     adapts to the book, plus a swipeable rail of instrument tiles. Motion is
     transform/opacity/stroke only, GPU-composited. ---- */
  .dwx { margin-top: 18px; }
  .dwx__h { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 12px; }
  .dwx__h h3 { margin: 0; font: 700 15px/1 var(--font-display); letter-spacing: -.01em; color: var(--m-ink); }
  .dwx__live { display: inline-flex; align-items: center; gap: 6px; font: 700 10px/1 var(--font); letter-spacing: .07em; color: var(--m-ink-3); }
  .dwx__live .p { width: 7px; height: 7px; border-radius: 50%; background: var(--m-green); animation: dwxPulse 2.4s infinite; }

  /* --- smart Focus hero --- */
  .dfocus { position: relative; overflow: hidden; border-radius: 22px; padding: 20px 20px 18px; color: #fff;
    background: linear-gradient(150deg, #101a33 0%, #17233f 46%, #1b1c22 100%);
    box-shadow: 0 20px 40px -22px rgba(12, 18, 38, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: background .6s cubic-bezier(.22, .61, .36, 1); }
  .dfocus--due { background: linear-gradient(150deg, #14213c 0%, #2a2410 60%, #201a12 100%); }
  .dfocus--clear { background: linear-gradient(150deg, #0c2a20 0%, #123d2c 48%, #14231c 100%); }
  .dfocus--overdue { background: linear-gradient(150deg, #3b1216 0%, #2b1016 55%, #1c1014 100%); }
  .dfocus__glow { position: absolute; top: -70px; right: -40px; width: 230px; height: 230px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(217, 58, 47, .42), transparent 62%); transition: background .6s ease; }
  .dfocus--due .dfocus__glow { background: radial-gradient(circle, rgba(240, 160, 42, .42), transparent 62%); }
  .dfocus--clear .dfocus__glow { background: radial-gradient(circle, rgba(15, 138, 95, .5), transparent 62%); }
  .dfocus--overdue .dfocus__glow { background: radial-gradient(circle, rgba(232, 72, 60, .55), transparent 62%); }
  .dfocus__sheen { position: absolute; inset: 0; pointer-events: none; will-change: transform;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .10) 46%, transparent 62%);
    transform: translateX(-120%); animation: dwxSheen 6.5s ease-in-out 1s infinite; }
  .dfocus__eyebrow { display: inline-flex; align-items: center; gap: 7px; font: 700 10px/1 var(--font); letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
  .dfocus__eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--m-coral); box-shadow: 0 0 10px var(--m-coral); }
  .dfocus--due .dfocus__eyebrow .dot { background: #F0A02A; box-shadow: 0 0 10px #F0A02A; }
  .dfocus--clear .dfocus__eyebrow .dot { background: #3ce6a4; box-shadow: 0 0 10px #3ce6a4; }
  .dfocus__num { position: relative; z-index: 2; font: 600 46px/1 var(--font-ledger); letter-spacing: -.03em; margin-top: 14px; }
  .dfocus__lbl { position: relative; z-index: 2; min-height: 19px; margin-top: 7px; font: 500 13px/1.4 var(--font); color: rgba(255, 255, 255, .8); }
  .dfocus__lbl b { color: #fff; font-weight: 700; }
  .dfocus__line { display: inline-block; transition: opacity .45s cubic-bezier(.22, .61, .36, 1), transform .45s cubic-bezier(.22, .61, .36, 1); }
  .dfocus__line.out { opacity: 0; transform: translateY(-6px); }
  .dfocus__cta { position: relative; z-index: 2; display: flex; gap: 9px; margin-top: 16px; }
  .dfocus__btn { height: 44px; border: 0; border-radius: 13px; font: 700 13px/1 var(--font); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; -webkit-tap-highlight-color: transparent;
    transition: transform .12s cubic-bezier(.22, .61, .36, 1); }
  .dfocus__btn i { font-size: 16px; }
  .dfocus__btn--primary { flex: 1; background: #fff; color: #14203a; }
  .dfocus--clear .dfocus__btn--primary { color: #0d3527; }
  .dfocus__btn--ghost { flex: 0 0 auto; padding: 0 16px; background: rgba(255, 255, 255, .13); color: #fff; }
  .dfocus__btn:active { transform: scale(.96); }

  /* --- tile rail --- */
  .dwx__rail { margin: 14px calc(var(--m-gutter) * -1) 0; }
  .dwx__track { display: flex; gap: 12px; padding: 4px var(--m-gutter); overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .dwx__track::-webkit-scrollbar { display: none; }
  .dtile { scroll-snap-align: start; flex: 0 0 63%; max-width: 232px; min-height: 158px; box-sizing: border-box;
    display: flex; flex-direction: column; padding: 16px; border-radius: 20px; position: relative; overflow: hidden; text-align: left;
    background: var(--m-surface); border: 1px solid var(--m-hair); box-shadow: 0 10px 24px -18px rgba(20, 25, 45, .5);
    -webkit-tap-highlight-color: transparent; opacity: 0; transform: translateY(16px) scale(.98);
    transition: opacity .5s cubic-bezier(.22, .61, .36, 1), transform .5s cubic-bezier(.22, .61, .36, 1); }
  .dtile.in { opacity: 1; transform: none; }
  button.dtile { cursor: pointer; font: inherit; color: inherit; -webkit-appearance: none; appearance: none; }
  button.dtile:active, .dtile.press { transform: scale(.975); }
  .dtile__ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; margin-bottom: auto; }
  .dtile__ic i { font-size: 17px; }
  .dtile__lbl { margin-top: 12px; font: 700 10px/1.2 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--m-ink-3); }
  .dtile__val { margin-top: 6px; font: 600 27px/1 var(--font-ledger); letter-spacing: -.02em; color: var(--m-ink); }
  .dtile__val .u { font: 600 13px/1 var(--font); color: var(--m-ink-3); margin-left: 3px; }
  .dtile__sub { margin-top: 6px; font: 500 11.5px/1.35 var(--font); color: var(--m-ink-2); }
  .dtile__sub b { color: var(--m-ink); font-weight: 700; }
  .dtile__sub .up { color: var(--m-green); font-weight: 700; }
  .dtile__sub .dn { color: var(--m-amber); font-weight: 700; }
  .dtile__flame { margin-top: 8px; font-size: 26px; line-height: 1; }

  .dtile--money { background: linear-gradient(155deg, #12946a, #0B6E4C); border: 0; color: #fff; box-shadow: 0 16px 30px -16px rgba(11, 110, 76, .75); }
  .dtile--money .dtile__lbl, .dtile--money .dtile__sub { color: rgba(255, 255, 255, .85); }
  .dtile--money .dtile__val { color: #fff; }
  .dtile--money .dtile__ic { background: rgba(255, 255, 255, .16); color: #fff; }
  .dtile--money .dtile__coin { position: absolute; right: -24px; bottom: -24px; width: 120px; height: 120px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .18), transparent 60%); }
  .dtile--navy .dtile__ic { background: #EAF0FF; color: var(--m-ink); }
  .dtile--green .dtile__ic { background: #E7F5EF; color: var(--m-green); }
  .dtile--amber .dtile__ic { background: #FBEFE1; color: var(--m-amber); }
  html[data-theme="dark"] .dtile--navy .dtile__ic { background: #1c2740; color: #cdd8f0; }
  html[data-theme="dark"] .dtile--green .dtile__ic { background: #123227; }
  html[data-theme="dark"] .dtile--amber .dtile__ic { background: #332415; }

  .dtile .spark { width: 100%; height: 38px; margin-top: 8px; }
  .dtile__ring { width: 66px; height: 66px; margin-top: 8px; }
  .dtile__ring .bg { fill: none; stroke: var(--m-surface-2); stroke-width: 7; }
  .dtile__ring .fg { fill: none; stroke: var(--m-green); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.22, .61, .36, 1); }
  .dtile__ring .rt { font: 600 16px/1 var(--font-ledger); fill: var(--m-ink); }
  .dtile__ring .ru { font: 600 8px/1 var(--font); fill: var(--m-ink-3); letter-spacing: .08em; }
  .dbars { display: flex; align-items: flex-end; gap: 5px; height: 36px; margin-top: 10px; }
  .dbars i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #3457a8, #26407e); min-height: 4px; transform: scaleY(0); transform-origin: bottom; transition: transform .7s cubic-bezier(.22, .61, .36, 1); }

  .ddots { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
  .ddots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, .14); transition: width .3s cubic-bezier(.22, .61, .36, 1), background .3s; }
  .ddots i.on { width: 20px; border-radius: 4px; background: var(--m-char); }
  html[data-theme="dark"] .ddots i { background: rgba(255, 255, 255, .2); }
  html[data-theme="dark"] .ddots i.on { background: #fff; }

  /* ---- native Insights screen (v2.67) ---- */
  .inss-host { position: fixed; inset: 0; z-index: 4000; background: var(--m-bg);
    transform: translateX(100%); transition: transform .34s cubic-bezier(.22, .61, .36, 1); will-change: transform; }
  .inss-host--in { transform: none; }
  html.inss-open, html.inss-open body { overflow: hidden; }
  .inss { display: flex; flex-direction: column; height: 100%; }
  .inss__head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) var(--m-gutter) 10px;
    background: linear-gradient(180deg, var(--m-bg) 74%, transparent); }
  .inss__back { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--m-hair);
    background: var(--m-surface); color: var(--m-ink); display: grid; place-items: center; font-size: 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .inss__back:active { transform: scale(.94); }
  .inss__title { font: 700 20px/1 var(--font-display); letter-spacing: -.02em; color: var(--m-ink); }
  .inss__sp { flex: 1; }
  .inss__range, .inss-seg { position: relative; display: inline-flex; background: rgba(0, 0, 0, .07); border-radius: 11px; padding: 3px; }
  html[data-theme="dark"] .inss__range, html[data-theme="dark"] .inss-seg { background: rgba(255, 255, 255, .1); }
  .inss__range button { position: relative; z-index: 2; border: 0; background: transparent; font: 600 11.5px/1 var(--font); color: var(--m-ink-3); padding: 7px 11px; border-radius: 8px; cursor: pointer; transition: color .25s; }
  .inss__range button.on { color: #fff; }
  .inss__pill { position: absolute; z-index: 1; top: 3px; bottom: 3px; border-radius: 8px; background: var(--m-char); transition: transform .3s cubic-bezier(.22, .61, .36, 1), width .3s cubic-bezier(.22, .61, .36, 1); }
  .inss__scroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 2px var(--m-gutter) calc(40px + env(safe-area-inset-bottom, 0px)); }
  .inss__scroll::-webkit-scrollbar { display: none; }

  .rev { opacity: 0; transform: translateY(16px); transition: opacity .55s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1); }
  .rev.in { opacity: 1; transform: none; }

  .inss-card { background: var(--m-surface); border: 1px solid var(--m-hair); border-radius: 22px; box-shadow: 0 12px 26px -20px rgba(20, 25, 45, .5); padding: 16px; margin-top: 14px; }
  .inss-card__h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
  .inss-card__t { margin: 0; font: 700 15px/1.1 var(--font-display); letter-spacing: -.01em; color: var(--m-ink); }
  .inss-card__s { margin: 3px 0 0; font: 500 11.5px/1.3 var(--font); color: var(--m-ink-3); }
  .inss-empty { font: 500 12.5px/1.4 var(--font); color: var(--m-ink-3); padding: 8px 0; }

  .inss-hero { display: flex; gap: 16px; align-items: center; position: relative; overflow: hidden; color: #fff;
    border-radius: 24px; padding: 18px 20px; margin-top: 6px;
    background: linear-gradient(150deg, #101a33, #1b1c22); box-shadow: 0 20px 40px -22px rgba(12, 18, 38, .7); }
  .inss-hero__glow { position: absolute; top: -60px; right: -30px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(15, 138, 95, .4), transparent 62%); pointer-events: none; }
  .inss-hero__ring { width: 104px; height: 104px; flex: 0 0 auto; position: relative; z-index: 2; }
  .inss-hero__ring .bg { fill: none; stroke: rgba(255, 255, 255, .13); stroke-width: 9; }
  .inss-hero__ring .fg { fill: none; stroke: #3ce6a4; stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.22, .61, .36, 1) .2s; }
  .inss-hero__ring .rt { font: 600 26px/1 var(--font-ledger); fill: #fff; }
  .inss-hero__ring .ru { font: 600 9px/1 var(--font); fill: rgba(255, 255, 255, .6); letter-spacing: .1em; }
  .inss-hero__meta { position: relative; z-index: 2; flex: 1; }
  .inss-hero__lbl { font: 700 10px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
  .inss-hero__stats { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
  .inss-hs__v { font: 600 17px/1 var(--font-ledger); letter-spacing: -.02em; }
  .inss-hs__k { font: 500 10.5px/1.2 var(--font); color: rgba(255, 255, 255, .62); margin-top: 3px; }

  .inss-chart { position: relative; touch-action: pan-y; }
  .inss-chart svg { display: block; width: 100%; height: 150px; }
  .inss-ax { fill: var(--m-ink-3); font: 500 9.5px var(--font); }
  .inss-line { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .inss-scrub { position: absolute; top: 0; bottom: 20px; width: 1px; background: var(--m-hair); opacity: 0; transition: opacity .2s; pointer-events: none; }
  .inss-scrub.on { opacity: 1; }
  .inss-tip { position: absolute; top: 0; transform: translateX(-50%); background: var(--m-char); color: #fff; border-radius: 10px; padding: 7px 10px; font: 600 10.5px/1.3 var(--font); white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .4); }
  .inss-tip.on { opacity: 1; }
  .inss-tip b { font-family: var(--font-ledger); font-weight: 600; }
  .inss-tip .g { color: #7ef0c0; } .inss-tip .b { color: #9ec2ff; }
  .inss-key { display: flex; gap: 16px; margin-top: 10px; }
  .inss-key span { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--font); color: var(--m-ink-2); }
  .inss-key i { width: 9px; height: 9px; border-radius: 3px; }

  .inss-donut { display: flex; gap: 18px; align-items: center; }
  .inss-donut__svg { width: 132px; height: 132px; flex: 0 0 auto; }
  .inss-donut__svg circle { fill: none; stroke-width: 19; transition: opacity .25s, stroke-width .2s; }
  .inss-donut__c { font: 600 24px/1 var(--font-ledger); fill: var(--m-ink); }
  .inss-donut__cs { font: 600 9px/1 var(--font); fill: var(--m-ink-3); letter-spacing: .08em; }
  .inss-leg { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .inss-leg__r { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 10px; cursor: pointer; border: 0; background: transparent; width: 100%; text-align: left; transition: background .2s; -webkit-tap-highlight-color: transparent; }
  .inss-leg__r:active, .inss-leg__r.sel { background: var(--m-surface-2); }
  .inss-leg__dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
  .inss-leg__n { flex: 1; font: 600 12.5px/1 var(--font); color: var(--m-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .inss-leg__pct { font: 600 12px/1 var(--font-ledger); color: var(--m-ink-3); }
  .inss-leg__v { width: 26px; text-align: right; font: 600 12px/1 var(--font-ledger); color: var(--m-ink); }

  .inss-bars { display: flex; align-items: flex-end; gap: 9px; height: 120px; padding-top: 6px; }
  .inss-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; justify-content: flex-end; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .inss-bar__col { width: 100%; max-width: 34px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #3e70d8, #2450b0); transform: scaleY(0); transform-origin: bottom; transition: transform .8s cubic-bezier(.22, .61, .36, 1); }
  .inss-bar.sel .inss-bar__col { background: linear-gradient(180deg, #0f9e6d, #0b6e4c); }
  .inss-bar__x { font: 600 10px/1 var(--font); color: var(--m-ink-3); height: 11px; }
  .inss-bar.sel .inss-bar__x { color: var(--m-ink); }

  .inss-seg button { position: relative; z-index: 2; border: 0; background: transparent; font: 600 11px/1 var(--font); color: var(--m-ink-3); padding: 7px 12px; border-radius: 7px; cursor: pointer; transition: color .25s; }
  .inss-seg button.on { color: var(--m-ink); }
  .inss-seg__pill { position: absolute; z-index: 1; top: 3px; bottom: 3px; border-radius: 7px; background: var(--m-surface); box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .2); transition: transform .3s cubic-bezier(.22, .61, .36, 1), width .3s cubic-bezier(.22, .61, .36, 1); }
  .inss-tpl { display: flex; flex-direction: column; gap: 13px; margin-top: 4px; }
  .inss-tp { display: flex; align-items: center; gap: 12px; }
  .inss-tp__av { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 12px/1 var(--font-display); }
  .inss-tp__b { flex: 1; min-width: 0; }
  .inss-tp__top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
  .inss-tp__n { font: 700 13px/1 var(--font-display); color: var(--m-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .inss-tp__v { flex: 0 0 auto; font: 600 13px/1 var(--font-ledger); color: var(--m-ink); }
  .inss-tp__track { height: 7px; border-radius: 4px; background: var(--m-surface-2); overflow: hidden; }
  .inss-tp__fill { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #2e63c4, #5b8be6); width: 0; transition: width .9s cubic-bezier(.22, .61, .36, 1); }

  .inss-cur { display: flex; flex-direction: column; gap: 14px; }
  .inss-cur__r { display: flex; align-items: center; gap: 12px; }
  .inss-cur__badge { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; background: var(--m-surface-2); display: grid; place-items: center; font: 700 14px/1 var(--font-ledger); color: var(--m-ink); }
  .inss-cur__b { flex: 1; min-width: 0; }
  .inss-cur__top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
  .inss-cur__top strong { font: 700 13px/1 var(--font-display); color: var(--m-ink); }
  .inss-cur__top span { font: 500 11px/1 var(--font); color: var(--m-ink-3); }
  .inss-cur__track { height: 6px; border-radius: 4px; background: var(--m-surface-2); overflow: hidden; }
  .inss-cur__track span { display: block; height: 100%; border-radius: 4px; background: var(--m-green); }
  .inss-cur__v { text-align: right; flex: 0 0 auto; }
  .inss-cur__v strong { display: block; font: 600 13px/1 var(--font-ledger); color: var(--m-ink); }
  .inss-cur__v span { display: block; font: 500 10.5px/1.2 var(--font); color: var(--m-ink-3); margin-top: 3px; }

  .inss-acv { display: flex; flex-direction: column; }
  .inss-ai { display: flex; gap: 12px; padding: 9px 0; position: relative; }
  .inss-ai__rail { position: absolute; left: 16px; top: 0; bottom: 0; width: 2px; background: var(--m-hair); }
  .inss-ai:first-child .inss-ai__rail { top: 18px; }
  .inss-ai:last-child .inss-ai__rail { bottom: calc(100% - 18px); }
  .inss-ai__ic { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 15px; position: relative; z-index: 2; }
  .inss-ai__t { font: 600 12.5px/1.35 var(--font); color: var(--m-ink); }
  .inss-ai__m { font: 500 11px/1.2 var(--font); color: var(--m-ink-3); margin-top: 2px; }
  .inss-cta { margin-top: 12px; width: 100%; height: 44px; border: 0; border-radius: 13px; background: var(--m-surface-2); color: var(--m-ink); font: 700 13px/1 var(--font); display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .inss-cta:active { transform: scale(.98); }

  @media (prefers-reduced-motion: reduce) {
    .ds__sheet, .ds__scrim { transition: none; }
    .dfocus__sheen, .dwx__live .p { animation: none; }
    .dtile { opacity: 1; transform: none; transition: none; }
    .dtile__ring .fg, .dbars i, .dfocus__line { transition: none; }
    .inss-host { transition: none; }
    .rev { opacity: 1; transform: none; transition: none; }
    .inss-hero__ring .fg, .inss-line, .inss-bar__col, .inss-tp__fill { transition: none; }
    .dm__mono::after { animation: none; }
    .dgh__hi .dgh__w { animation: none; opacity: 1; transform: none; }
    .dgh__line { transition: none; }
  }
}

/* Widget keyframes — global (used only by the mobile dashboard widgets). */
@keyframes dwxPulse { 0% { box-shadow: 0 0 0 0 rgba(15, 138, 95, .45); } 70% { box-shadow: 0 0 0 7px rgba(15, 138, 95, 0); } 100% { box-shadow: 0 0 0 0 rgba(15, 138, 95, 0); } }
@keyframes dwxSheen { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }
@keyframes dghRise { to { opacity: 1; transform: none; } }
@keyframes dmMonoSheen { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }

/* Weather FX keyframes — kept at top level (global) but only ever used by the mobile
   weather sheet. Transform/opacity only, so every one of these composites on the GPU. */
@keyframes wxDriftA { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(22px, 0, 0); } }
@keyframes wxDriftB { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-20px, 0, 0); } }
@keyframes wxFall { 0% { transform: translate3d(0, -10px, 0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate3d(0, 240px, 0); opacity: .12; } }
@keyframes wxTw { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .wxfx-cloud, .wxfx-rain i, .wxfx-star { animation: none !important; }
}


/* ===================== NATIVE DASHBOARD REDESIGN (v2.70) ===================== */
/* hide legacy desktop chrome on phones so it can't flash back (e.g. on Settings) */
@media (max-width: 767.98px){ .app-topbar{ display:none !important; } .notif-bell{ display:none !important; } }

/* seamless + frosted sticky top */
html.dm-on .dm__nav, html.dm-on .dm__period{ background: transparent; border-bottom: 0; box-shadow:none;
  transition: background .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1); }
html.dm-on .dm.is-scrolled .dm__nav{
  background: rgba(244,244,242,.72); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); }
html[data-theme="dark"].dm-on .dm.is-scrolled .dm__nav{ background: rgba(18,19,22,.72); }

/* ===== v2.74 — seamless premium header (Direction A · Dissolve) =====
   Chrome dissolves into the ambient at rest; frost fades in on scroll (handled above).
   Monogram elevated, editorial gold masthead, true frosted-glass action buttons, glow-dot. */
html.dm-on .dm__nav--v3{ padding: 6px var(--m-gutter) 12px; gap: 12px; border-bottom: 0; }
html.dm-on .dm__nav--v3 .dm__brand{ gap: 11px; }

/* monogram — top-lit charcoal + hairline gold ring */
html.dm-on .dm__mono{ width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(150deg,#2b2f36 2%,#121418 96%);
  box-shadow: 0 8px 18px -8px rgba(6,8,14,.72), inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(214,178,110,.16); }
html.dm-on .dm__mono b{ font: 800 15px/1 var(--font-display); letter-spacing: -.02em;
  background: linear-gradient(180deg,#F0DFAE,#B0842A); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)); }

/* editorial masthead — gold eyebrow above a tight name */
html.dm-on .dm__wm{ gap: 3px; }
html.dm-on .dm__eb{ font: 700 8.5px/1 var(--font); letter-spacing: .20em; text-transform: uppercase;
  background: linear-gradient(120deg,#C79A3C,#9A6A18); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.dm-on .dm__name{ font: 700 17px/1 var(--font-display); letter-spacing: -.02em; color: var(--m-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* action buttons — true frosted glass */
html.dm-on .dm__ico{ width: 38px; height: 38px; border-radius: 50%; color: var(--m-ink-2);
  display: grid; place-items: center; cursor: pointer; text-decoration: none; position: relative;
  background: rgba(255,255,255,.52); border: 1px solid rgba(255,255,255,.70);
  box-shadow: 0 2px 8px -3px rgba(10,31,68,.18), inset 0 1px 0 rgba(255,255,255,.65), inset 0 0 0 .5px rgba(10,31,68,.05);
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  transition: transform .12s cubic-bezier(.22,.61,.36,1); }
html.dm-on .dm__ico:active{ transform: scale(.92); }
html.dm-on .dm__gi{ width: 19px; height: 19px; display: block; }

/* notifications — calm coral glow-dot (driven by unread state) */
html.dm-on .dm__badge{ top: 6px; right: 7px; min-width: 8px; width: 8px; height: 8px; padding: 0; border-radius: 50%;
  background: var(--m-coral); color: transparent; font-size: 0; line-height: 0;
  box-shadow: 0 0 0 2px var(--m-bg), 0 0 8px rgba(217,58,47,.7); }

/* dark mode — dark glass buttons + matched dot ring */
html.dm-on[data-theme="dark"] .dm__ico{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14);
  box-shadow: 0 2px 10px -4px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.10); color: var(--m-ink-2); }
html.dm-on[data-theme="dark"] .dm__badge{ box-shadow: 0 0 0 2px var(--m-bg), 0 0 8px rgba(217,58,47,.6); }

@media (prefers-reduced-motion: reduce){ html.dm-on .dm__mono::after{ animation: none; } }

/* month pills — month-only, tighter, no clipping */
html.dm-on .mrail--v3 .mrail__chip{ padding:8px 15px; gap:0; }
html.dm-on .mrail--v3 .mrail__lbl{ font:600 12.5px/1 var(--font); letter-spacing:.02em; }
html.dm-on .mrail--v3 .mrail__now{ bottom:3px; width:4px; height:4px; }

/* greeting — cinematic daypart backdrop + rotating title */
html.dm-on .dgh{ position:relative; padding:18px var(--m-gutter) 12px; overflow:visible; background:none; border:0; box-shadow:none; }
html.dm-on .dgh__bd{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
  -webkit-mask-image:radial-gradient(128% 120% at 55% 10%, #000 40%, transparent 82%);
  mask-image:radial-gradient(128% 120% at 55% 10%, #000 40%, transparent 82%); }
html.dm-on .dgh__wash{ position:absolute; top:-120px; right:-70px; width:360px; height:320px; border-radius:50%; pointer-events:none; filter:blur(14px); opacity:.95; transition:background 1s cubic-bezier(.22,.61,.36,1); animation:dghDrift1 15s ease-in-out infinite; }
html.dm-on .dgh__wash2{ position:absolute; bottom:-120px; left:-90px; width:300px; height:260px; border-radius:50%; pointer-events:none; filter:blur(22px); opacity:.7; transition:background 1s cubic-bezier(.22,.61,.36,1); animation:dghDrift2 19s ease-in-out infinite; }
html.dm-on .dgh.tod-morning  .dgh__wash{ background:radial-gradient(circle at 56% 42%,rgba(255,198,120,.36),rgba(255,198,120,.10) 46%,rgba(255,198,120,0) 72%); }
html.dm-on .dgh.tod-morning  .dgh__wash2{ background:radial-gradient(circle at 50% 50%,rgba(255,225,170,.20),rgba(255,225,170,0) 70%); }
html.dm-on .dgh.tod-afternoon .dgh__wash{ background:radial-gradient(circle at 56% 42%,rgba(255,214,150,.26),rgba(150,196,255,.12) 52%,rgba(150,196,255,0) 76%); }
html.dm-on .dgh.tod-afternoon .dgh__wash2{ background:radial-gradient(circle at 50% 50%,rgba(150,196,255,.16),rgba(150,196,255,0) 70%); }
html.dm-on .dgh.tod-evening  .dgh__wash{ background:radial-gradient(circle at 56% 42%,rgba(255,138,86,.32),rgba(214,96,150,.18) 46%,rgba(214,96,150,0) 74%); }
html.dm-on .dgh.tod-evening  .dgh__wash2{ background:radial-gradient(circle at 50% 50%,rgba(140,84,196,.20),rgba(140,84,196,0) 72%); }
html.dm-on .dgh.tod-night    .dgh__wash{ background:radial-gradient(circle at 56% 42%,rgba(120,140,240,.28),rgba(74,86,180,.14) 50%,rgba(74,86,180,0) 76%); }
html.dm-on .dgh.tod-night    .dgh__wash2{ background:radial-gradient(circle at 50% 50%,rgba(60,72,150,.22),rgba(60,72,150,0) 72%); }
html.dm-on .dgh__row{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; position:relative; z-index:2; }
html.dm-on .dgh__hello{ flex:1; min-width:0; }
html.dm-on .dgh__t{ position:relative; min-height:72px; overflow:visible; display:flex; flex-direction:column; justify-content:center; }
html.dm-on .dgh__line{ margin:0; font:700 27px/1.18 var(--font-display); letter-spacing:-.02em; color:var(--m-ink);
  position:relative; inset:auto; white-space:normal; text-overflow:clip; overflow:visible; max-width:100%;
  opacity:0; filter:blur(7px); transform:translateY(6px);
  transition:opacity .5s cubic-bezier(.22,.61,.36,1), filter .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1); }
html.dm-on .dgh__line.is-on{ opacity:1; filter:blur(0); transform:none; }
html.dm-on .dgh__line.is-out{ position:absolute; inset:0 auto auto 0; right:0; display:flex; flex-direction:column; justify-content:center; opacity:0; filter:blur(7px); transform:translateY(-6px); }
html.dm-on .dgh__line em{ font-style:normal; background:linear-gradient(120deg,#C79A3C,#9A6A18); -webkit-background-clip:text; background-clip:text; color:transparent; }
html.dm-on .dgh__date{ position:relative; z-index:2; margin:12px 0 0; font:500 13px/1.35 var(--font); color:var(--m-ink-3); }
html.dm-on .dgh__dot{ margin:0 7px; opacity:.5; }

/* widgets: full-width hero + refined tiles */
html.dm-on .dwx{ padding:0; margin:0; }
html.dm-on .dfocus{ margin:14px 0 0; border-radius:24px; padding:20px var(--m-gutter); }
html.dm-on .dfocus__eyebrow{ font:700 10px/1 var(--font); letter-spacing:.14em; }
html.dm-on .dfocus__num{ font:600 36px/1 var(--font-ledger); letter-spacing:-.03em; margin:14px 0 8px; }
html.dm-on .dfocus__lbl{ font:500 14px/1.45 var(--font); }
html.dm-on .dfocus__cta{ margin-top:16px; gap:10px; }
html.dm-on .dfocus__btn{ height:46px; border-radius:14px; font:700 13.5px/1 var(--font); letter-spacing:-.01em; }
html.dm-on .dwx__rail{ padding:18px var(--m-gutter) 0; margin:0; }
html.dm-on .dwx__track{ padding:0; gap:12px; scroll-snap-type:x mandatory; scroll-behavior:smooth; }
html.dm-on .ddots{ padding-top:12px; }
html.dm-on .dtile{ border-radius:22px; padding:18px; min-height:150px; flex:0 0 100%; max-width:none; scroll-snap-align:start; scroll-snap-stop:always; }
html.dm-on .dtile__lbl{ font:700 11px/1 var(--font); letter-spacing:.06em; }
html.dm-on .dtile__val{ font:600 23px/1 var(--font-ledger); letter-spacing:-.03em; margin-top:11px; }
html.dm-on .dtile__sub{ font:500 12px/1.35 var(--font); margin-top:8px; }
html.dm-on .dtile--out .dtile__ic{ background:rgba(217,58,47,.1); color:var(--m-coral); }
html.dm-on .dtile--coll{ background:linear-gradient(160deg,#0f8a5f,#0b6e4c); border:0; color:#fff; }
html.dm-on .dtile--coll .dtile__ic{ background:rgba(255,255,255,.16); color:#fff; }
html.dm-on .dtile--coll .dtile__lbl, html.dm-on .dtile--coll .dtile__sub{ color:rgba(255,255,255,.8); }
html.dm-on .dtile--coll .dtile__val{ color:#fff; }
html.dm-on .dtile__ring .rt{ font-size:18px; }

/* needs chasing — tappable row */
html.dm-on .dchz__card{ cursor:pointer; }
html.dm-on .dchz__name{ font:700 15px/1.2 var(--font-display); }
html.dm-on .dchz__sub{ font:500 13px/1.2 var(--font); }
html.dm-on .msect__title{ font-size:18px; font-weight:700; }
html.dm-on .dchz__go{ flex:0 0 auto; color:var(--m-ink-3); font-size:15px; margin-left:2px; }

/* customer chase detail sheet */
html.dm-on .ds--chase .ds__sheet{ max-height:86%; }
.chs{ padding:4px var(--m-gutter) calc(20px + env(safe-area-inset-bottom,0px)); }
.chs__head{ display:flex; align-items:center; gap:14px; padding:2px 0 16px; }
.chs__av{ width:56px; height:56px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; color:#fff; font:700 19px/1 var(--font-display); }
.chs__n{ font:700 18px/1.1 var(--font-display); letter-spacing:-.02em; color:var(--m-ink); }
.chs__s{ font:500 12.5px/1.2 var(--font); color:var(--m-coral); margin-top:4px; }
.chs__stats{ display:flex; gap:10px; margin-bottom:16px; }
.chs__stats > div{ flex:1; background:var(--m-surface); border:1px solid var(--m-hair); border-radius:16px; padding:13px; }
.chs__stats b{ display:block; font:600 19px/1 var(--font-ledger); color:var(--m-ink); }
.chs__stats span{ display:block; font:600 9.5px/1 var(--font); letter-spacing:.05em; text-transform:uppercase; color:var(--m-ink-3); margin-top:7px; }
.chs__list{ background:var(--m-surface); border:1px solid var(--m-hair); border-radius:16px; overflow:hidden; margin-bottom:18px; }
.chs__ir{ display:flex; align-items:center; justify-content:space-between; padding:14px; border-top:1px solid var(--m-hair); }
.chs__ir:first-child{ border-top:0; }
.chs__ir b{ font:600 13px/1 var(--font); color:var(--m-ink); }
.chs__ir small{ display:block; font:500 11px/1 var(--font); color:var(--m-coral); margin-top:4px; }
.chs__v{ font:600 14px/1 var(--font-ledger); color:var(--m-ink); }
.chs__empty{ padding:16px; font:500 12.5px/1.4 var(--font); color:var(--m-ink-3); }
.chs__cta{ display:flex; gap:10px; }
.chs__btn{ flex:1; height:50px; border:0; border-radius:14px; font:700 14px/1 var(--font); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.chs__btn--p{ background:var(--m-char); color:#fff; }
.chs__btn--s{ background:var(--m-surface); border:1px solid var(--m-hair); color:var(--m-ink); }

/* notifications — full-width native bottom sheet on mobile */
html.dm-on .notif-panel{ position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
  width:100% !important; max-width:100% !important; max-height:80vh; border-radius:22px 22px 0 0;
  transform:translateY(100%); transition:transform .4s cubic-bezier(.22,.61,.36,1); box-shadow:0 -22px 50px -20px rgba(10,12,20,.4); }
html.dm-on .notif-panel.is-open{ transform:none; }

@keyframes dghDrift1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-16px,12px) scale(1.07); } }
@keyframes dghDrift2{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(18px,-14px) scale(1.09); } }

@media (prefers-reduced-motion: reduce){
  html.dm-on .dgh__wash, html.dm-on .dgh__wash2{ animation:none; }
  html.dm-on .dgh__line{ transition:none; }
}

/* ===== ambient daypart backdrop (full-bleed, blends behind header+rail+greeting) ===== */
html.dm-on .dm{ position:relative; z-index:0; }
html.dm-on .dm__amb{ position:absolute; top:calc(env(safe-area-inset-top,0px) + 68px); left:0; right:0; height:420px; z-index:-1; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 6%,#000 18%,#000 52%,rgba(0,0,0,.5) 80%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 6%,#000 18%,#000 52%,rgba(0,0,0,.5) 80%,transparent 100%);
  transition:background 1s cubic-bezier(.22,.61,.36,1); }
html.dm-on .dm__amb-g{ position:absolute; inset:0; opacity:.4; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html.dm-on .dm__amb.tod-morning{ background:radial-gradient(150% 98% at 84% 2%,rgba(255,196,120,.56),rgba(255,196,120,.20) 44%,transparent 82%),radial-gradient(132% 102% at 6% 12%,rgba(255,224,168,.46),rgba(255,224,168,.14) 48%,transparent 84%); }
html.dm-on .dm__amb.tod-afternoon{ background:radial-gradient(150% 98% at 84% 2%,rgba(255,206,140,.5),rgba(255,206,140,.16) 46%,transparent 82%),radial-gradient(132% 102% at 8% 12%,rgba(150,196,255,.42),rgba(150,196,255,.13) 48%,transparent 84%); }
html.dm-on .dm__amb.tod-evening{ background:radial-gradient(150% 100% at 82% 2%,rgba(255,178,138,.58),rgba(255,178,138,.18) 44%,transparent 82%),radial-gradient(128% 102% at 12% 12%,rgba(210,150,205,.48),rgba(210,150,205,.15) 48%,transparent 84%),radial-gradient(150% 106% at 52% -4%,rgba(150,150,225,.32),transparent 78%); }
html.dm-on .dm__amb.tod-night{ background:radial-gradient(150% 100% at 82% 2%,rgba(120,140,235,.5),rgba(120,140,235,.16) 44%,transparent 84%),radial-gradient(130% 104% at 10% 12%,rgba(90,100,190,.44),rgba(90,100,190,.14) 48%,transparent 86%); }
html[data-theme="dark"].dm-on .dm__amb{ opacity:.5; }

/* ===== tighter native spacing ===== */
html.dm-on .dm__scroll{ gap:15px; padding-top:6px; }
html.dm-on .dgh{ padding:2px var(--m-gutter) 4px; }

/* ===== premium, larger overview widgets ===== */
html.dm-on .dtile{ display:flex; flex-direction:column; border-radius:22px; padding:18px; min-height:172px; flex:0 0 100%; max-width:none; scroll-snap-align:start; scroll-snap-stop:always; overflow:hidden; }
html.dm-on .dwx__track{ scroll-padding-inline:0; overscroll-behavior-x:contain; }
html.dm-on .dtile__ic{ width:42px; height:42px; border-radius:13px; margin:0; }
html.dm-on .dtile__ic i{ font-size:20px; }
html.dm-on .dtile__lbl{ margin-top:14px; font:700 12px/1 var(--font); letter-spacing:.08em; }
html.dm-on .dtile__val{ margin-top:12px; font:600 32px/1 var(--font-ledger); letter-spacing:-.03em; }
html.dm-on .dtile__sub{ margin-top:7px; font:500 14px/1.3 var(--font); }
html.dm-on .dtile .spark{ margin:auto -18px -18px; width:calc(100% + 36px); height:54px; }
html.dm-on .dm .spark--v2 path.l{ stroke-width:2.4; }
/* Outstanding -> premium light coral card */
html.dm-on .dtile--out{ background:linear-gradient(165deg,#ffffff,#fdf1ef); border:1px solid rgba(217,58,47,.16); box-shadow:0 16px 34px -22px rgba(120,20,15,.4); }
html.dm-on .dtile--out .dtile__ic{ background:rgba(217,58,47,.1); color:var(--m-coral); }
html.dm-on .dtile--out .dtile__lbl{ color:var(--m-coral); }
/* Collected -> richer green hero */
html.dm-on .dtile--coll{ background:linear-gradient(160deg,#12a06e,#0b6e4c); border:0; color:#fff; box-shadow:0 18px 36px -22px rgba(6,60,42,.6); }

/* =====================================================================================
   v2.75 — UNIFIED GLASS HERO (Item 2): the month rail + greeting fuse into one glass
   panel floating over the daypart glow. The rail is the panel's top, the greeting its
   bottom, joined flush. Header + status bar stay clean cream (seamless top preserved).
   ===================================================================================== */

/* --- panel TOP: the month rail container (was sticky; now scrolls as one piece) --- */
html.dm-on .dm__period{
  position: static; top: auto; z-index: 3;
  margin: 8px var(--m-gutter) 0; padding: 6px;
  border-radius: 24px 24px 0 0;
  background: rgba(255,255,255,.40);
  border: 1px solid rgba(255,255,255,.66); border-bottom: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(28px) saturate(200%); backdrop-filter: blur(28px) saturate(200%);
}
/* rail sits edge-to-edge inside the panel; its own track goes transparent */
html.dm-on .dm__period .mrail--v3{ margin: 0; padding: 2px; background: transparent; border-radius: 14px; }

/* the sliding pill becomes a bright glass pane (Treatment B) */
html.dm-on .dm__period .mrail__pill{
  background: rgba(255,255,255,.90); border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 6px 14px -6px rgba(10,31,68,.30), inset 0 1px 0 #fff;
}
/* living tint — a whisper of the daypart colour inside the active glass pill */
html.dm-on .dm__period.tod-morning  .mrail__pill{ background-image: linear-gradient(180deg, rgba(255,214,150,.30), rgba(255,214,150,0)); }
html.dm-on .dm__period.tod-afternoon .mrail__pill{ background-image: linear-gradient(180deg, rgba(255,214,150,.24), rgba(150,196,255,0)); }
html.dm-on .dm__period.tod-evening   .mrail__pill{ background-image: linear-gradient(180deg, rgba(255,180,150,.30), rgba(255,180,150,0)); }
html.dm-on .dm__period.tod-night     .mrail__pill{ background-image: linear-gradient(180deg, rgba(150,168,255,.28), rgba(150,168,255,0)); }
/* active month reads on light glass (ink, not white) + amber now-dot */
html.dm-on .dm__period .mrail--v3 .mrail__chip[aria-selected="true"]{ color: var(--m-ink); }
html.dm-on .dm__period .mrail--v3 .mrail__chip[aria-selected="true"] .mrail__now{ background: var(--m-amber); }
html.dm-on .dm__period .mrail--v3 .mrail__chip{ color: var(--m-ink-2); }

/* --- panel BOTTOM: the greeting (flush against the rail, rounded bottom) --- */
html.dm-on .dm__scroll{ padding-top: 0; }
html.dm-on .dgh{
  margin: 0; padding: 16px 18px 18px;
  border-radius: 0 0 24px 24px;
  background: rgba(255,255,255,.40);
  border: 1px solid rgba(255,255,255,.66); border-top: 0;
  box-shadow: 0 26px 54px -28px rgba(10,31,68,.52);
  -webkit-backdrop-filter: blur(28px) saturate(200%); backdrop-filter: blur(28px) saturate(200%);
}
html.dm-on .dgh__row{ align-items: flex-start; }
html.dm-on .dgh__eyebrow{ margin: 0 0 9px; font: 700 8.5px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--m-ink-3); }
html.dm-on .dgh__t{ min-height: 58px; }
html.dm-on .dgh__line{ font: 700 25px/1.12 var(--font-display); }
html.dm-on .dgh__date{ margin: 12px 0 0; }

/* weather pill becomes glass-in-glass */
html.dm-on .dgh__wx{ padding: 8px 12px; border-radius: 14px;
  background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.66);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 10px -6px rgba(10,31,68,.25);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html.dm-on .dgh__wx i{ font-size: 18px; }
html.dm-on .dgh__wx-t{ font: 600 15px/1 var(--font-ledger); }

/* --- dark mode --- */
html.dm-on[data-theme="dark"] .dm__period,
html.dm-on[data-theme="dark"] .dgh{ background: rgba(20,26,40,.5); border-color: rgba(255,255,255,.12); }
html.dm-on[data-theme="dark"] .dm__period{ border-bottom: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
html.dm-on[data-theme="dark"] .dgh{ border-top: 0; box-shadow: 0 20px 46px -26px rgba(0,0,0,.6); }
html.dm-on[data-theme="dark"] .dm__period .mrail__pill{ background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.2); box-shadow: 0 6px 14px -6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14); }
html.dm-on[data-theme="dark"] .dm__period .mrail--v3 .mrail__chip[aria-selected="true"]{ color: var(--m-ink); }
html.dm-on[data-theme="dark"] .dgh__wx{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }

/* reduced motion: pill still moves but without the tint cross-fade jitter */
@media (prefers-reduced-motion: reduce){ html.dm-on .dm__period .mrail__pill{ transition: transform .2s, width .2s; } }

/* =====================================================================================
   v2.76 — WIDGETS (Item 3): uniform 2-col grid (no swipe carousel) + new Invoiced tile
   + harmonized status hero. Odd tile counts auto-span the last card full-width.
   ===================================================================================== */

/* section label above the grid */
html.dm-on .dsec{ display:flex; align-items:center; justify-content:space-between; margin:20px 2px 12px; }
html.dm-on .dsec__t{ font:700 11px/1 var(--font); letter-spacing:.16em; text-transform:uppercase; color:var(--m-ink-3); }
html.dm-on .dsec__a{ display:inline-flex; align-items:center; gap:2px; border:0; background:transparent; cursor:pointer;
  font:600 12.5px/1 var(--font); color:var(--m-ink-2); padding:4px; -webkit-tap-highlight-color:transparent; }
html.dm-on .dsec__a i{ font-size:12px; }

/* the grid */
html.dm-on .dgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
html.dm-on .dgrid .dtile{ flex:initial; max-width:none; min-height:150px; padding:16px; scroll-snap-align:none; }
html.dm-on .dgrid .dtile:last-child:nth-child(odd){ grid-column:1 / -1; }   /* auto-complete: no lonely gap */

/* uniform tile rhythm inside the grid */
html.dm-on .dgrid .dtile__ic{ width:38px; height:38px; border-radius:12px; }
html.dm-on .dgrid .dtile__ic i{ font-size:19px; }
html.dm-on .dgrid .dtile__lbl{ margin-top:12px; font:700 10px/1 var(--font); letter-spacing:.09em; }
html.dm-on .dgrid .dtile__val{ margin-top:9px; font:600 22px/1 var(--font-ledger); letter-spacing:-.03em; }
html.dm-on .dgrid .dtile__sub{ margin-top:6px; font:500 11.5px/1.3 var(--font); }
html.dm-on .dgrid .dtile .spark{ margin:auto -16px -16px; width:calc(100% + 32px); height:38px; }
html.dm-on .dgrid .dbars{ margin-top:auto; height:30px; }
html.dm-on .dgrid .dtile--out .dtile__val,
html.dm-on .dgrid .dtile--navy .dtile__val{ margin-bottom:4px; }

/* Invoiced tile — blue accent (distinct from navy/coral/green/amber) */
html.dm-on .dtile--inv{ background:var(--m-surface); border:1px solid var(--m-hair); }
html.dm-on .dtile--inv .dtile__ic{ background:rgba(46,99,196,.10); color:#2E63C4; }
html.dm-on .dtile--inv .dtile__lbl{ color:#2E63C4; }
html[data-theme="dark"].dm-on .dtile--inv .dtile__ic{ background:#152241; color:#8fb0ff; }

/* Gets-paid-in ring tile — ring + meta row */
html.dm-on .dtile--ring{ justify-content:center; }
html.dm-on .dtile__ringrow{ display:flex; align-items:center; gap:13px; }
html.dm-on .dtile--ring .dtile__ring{ width:64px; height:64px; flex:0 0 auto; margin:0; }
html.dm-on .dtile__ringmeta{ min-width:0; display:flex; flex-direction:column; gap:6px; }
html.dm-on .dtile__ringmeta .dtile__lbl{ margin:0; }
html.dm-on .dtile__ringmeta .dtile__sub{ margin:0; }

/* ---- harmonized status hero ---- */
html.dm-on .dfocus{ border-radius:24px; padding:20px; isolation:isolate;
  box-shadow:0 28px 56px -30px rgba(12,18,38,.72), inset 0 1px 0 rgba(255,255,255,.09); }
html.dm-on .dfocus--overdue{ box-shadow:0 28px 56px -30px rgba(60,15,13,.72), inset 0 1px 0 rgba(255,255,255,.09); }
html.dm-on .dfocus--clear{ box-shadow:0 28px 56px -30px rgba(8,50,36,.66), inset 0 1px 0 rgba(255,255,255,.09); }
html.dm-on .dfocus--due{ box-shadow:0 28px 56px -30px rgba(60,45,10,.66), inset 0 1px 0 rgba(255,255,255,.09); }
html.dm-on .dfocus__glow{ top:-84px; right:-30px; width:264px; height:264px; }
html.dm-on .dfocus__eyebrow{ letter-spacing:.16em; color:rgba(255,255,255,.82); }
html.dm-on .dfocus__num{ font:600 36px/1 var(--font-ledger); letter-spacing:-.03em; margin:14px 0 6px; }
html.dm-on .dfocus__cta{ margin-top:18px; gap:10px; }
html.dm-on .dfocus__btn{ height:48px; border-radius:15px; font:700 13.5px/1 var(--font); }
html.dm-on .dfocus__btn--primary{ background:#fff; color:#1a1208; box-shadow:0 8px 20px -8px rgba(0,0,0,.45); }
html.dm-on .dfocus--clear .dfocus__btn--primary{ color:#0d3527; }
html.dm-on .dfocus--overdue .dfocus__btn--primary{ color:#3a0f0d; }
html.dm-on .dfocus__btn--ghost{ padding:0 18px; background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }

/* =====================================================================================
   v2.77 — TAB BAR (Item 5): premium charcoal-glass floating bar, gilded active state
   with a glass pill, redesigned icons, and an extra-premium gold FAB. Always charcoal
   (both themes); keyed by #app-tabbar to win the cascade. No display prop (stays hidden
   on desktop via the base rule).
   ===================================================================================== */
#app-tabbar.tabbar,
html[data-theme="dark"] #app-tabbar.tabbar{
  background: rgba(22,24,28,.64);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 54px -18px rgba(0,0,0,.62), 0 3px 10px -4px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.13);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
}
.tabbar__defs{ position:absolute; pointer-events:none; }

/* items: muted on charcoal, gilded when active */
#app-tabbar .tabbar__item,
html[data-theme="dark"] #app-tabbar .tabbar__item{ position: relative; color: rgba(255,255,255,.56); }
#app-tabbar .tabbar__item.is-active,
html[data-theme="dark"] #app-tabbar .tabbar__item.is-active{ color: #E7C876; }
/* gilded active icon (gradient) + gilded label */
#app-tabbar .tabbar__item.is-active .ni--solid{ fill: url(#tabgold); }
#app-tabbar .tabbar__item.is-active > span:last-child{
  background: linear-gradient(120deg,#F2E4B6,#C79A3C); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* glass highlight pill behind the active tab */
#app-tabbar .tabbar__item::before{
  content:""; position:absolute; inset: 8px 6px; border-radius: 15px; z-index: 0;
  background: rgba(255,255,255,.10); opacity: 0; transform: scale(.82);
  transition: opacity .28s cubic-bezier(.34,1.56,.64,1), transform .28s cubic-bezier(.34,1.56,.64,1);
}
#app-tabbar .tabbar__item.is-active::before{ opacity: 1; transform: scale(1); background: rgba(231,200,118,.15); }
#app-tabbar .tabbar__item .tabbar__ico,
#app-tabbar .tabbar__item > span{ position: relative; z-index: 1; }

/* --- charcoal + gold FAB (matches the H monogram) --- */
#app-tabbar .tabbar__fab,
html[data-theme="dark"] #app-tabbar .tabbar__fab{
  position: relative; color: #F0DFAE; overflow: visible;
  background: linear-gradient(150deg, #2b2f36 2%, #121418 96%);
  box-shadow:
    0 16px 30px -10px rgba(0,0,0,.6),
    0 0 0 5px var(--m-ring-page, #F2F2EE),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(214,178,110,.24);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
html[data-theme="dark"] #app-tabbar .tabbar__fab{ box-shadow:
    0 16px 30px -10px rgba(0,0,0,.7),
    0 0 0 5px var(--m-ring-page, #0A0F1C),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(214,178,110,.26); }
/* gilded + glyph + faint sheen sweep on the tile */
#app-tabbar .tabbar__fab .ni--out{ stroke: url(#tabgold); stroke-width: 2.3; }
#app-tabbar .tabbar__fab::after{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background: linear-gradient(125deg, rgba(255,255,255,.14) 8%, transparent 42%);
}
#app-tabbar .tabbar__fab:active{ transform: scale(.94); }
/* tap-to-close: the + spins into an × while the dial is open (rotate the glyph, not the tile) */
#app-tabbar .tabbar__fab .ni{ transition: transform .34s cubic-bezier(.34,1.56,.64,1); }
html.dial-open #app-tabbar .tabbar__fab .ni{ transform: rotate(135deg); }

/* =====================================================================================
   v2.78 — FAB SPEED-DIAL: three quick-create actions float up over the FAB.
   ===================================================================================== */
.speeddial{ display: contents; }
.speeddial__scrim{ position: fixed; inset: 0; z-index: 1035; background: rgba(12,14,20,.44);
  opacity: 0; pointer-events: none; transition: opacity .3s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.speeddial.is-open .speeddial__scrim{ opacity: 1; pointer-events: auto; }

.speeddial__actions{ position: fixed; left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
  z-index: 1046; display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none; }
.dial-act{ display: flex; align-items: center; gap: 12px; border: 0; cursor: pointer;
  background: #FDFDFB; border-radius: 16px; padding: 9px 16px 9px 10px;
  box-shadow: 0 18px 34px -14px rgba(12,18,38,.42), 0 2px 6px -3px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.8);
  opacity: 0; transform: translateY(26px) scale(.9); pointer-events: none;
  transition: opacity .34s cubic-bezier(.34,1.56,.64,1), transform .34s cubic-bezier(.34,1.56,.64,1);
  -webkit-tap-highlight-color: transparent; }
.speeddial.is-open .dial-act{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.speeddial.is-open .dial-act:nth-last-child(1){ transition-delay: .02s; }
.speeddial.is-open .dial-act:nth-last-child(2){ transition-delay: .07s; }
.speeddial.is-open .dial-act:nth-last-child(3){ transition-delay: .12s; }
.dial-act:active{ transform: scale(.96); }
.dial-act__ic{ width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; }
.dial-act__ic svg{ width: 20px; height: 20px; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dial-act__t{ font: 700 14px/1 var(--font-display); letter-spacing: -.01em; color: var(--m-ink); padding-right: 4px; }
.dial-act--inv .dial-act__ic{ background: rgba(46,99,196,.12); } .dial-act--inv .dial-act__ic svg{ stroke: #2E63C4; }
.dial-act--cust .dial-act__ic{ background: rgba(166,85,0,.14); } .dial-act--cust .dial-act__ic svg{ stroke: var(--m-amber); }
.dial-act--pay .dial-act__ic{ background: rgba(15,138,95,.14); } .dial-act--pay .dial-act__ic svg{ stroke: var(--m-green); }
html[data-theme="dark"] .dial-act{ background: #1c1e22; box-shadow: 0 18px 34px -14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); }
html[data-theme="dark"] .dial-act__t{ color: #F3F4F6; }
@media (prefers-reduced-motion: reduce){
  .dial-act{ transition: opacity .2s; transform: none; }
  html.dial-open #app-tabbar .tabbar__fab .ni{ transform: none; }
}

/* =====================================================================================
   v2.79 — PERFORMANCE: only the first paint animates. Every render after that (realtime
   echo, manual refresh, month change) swaps instantly, so nothing flashes out and back
   in. Plus paint/layout isolation on cards and a calmer, longer greeting cross-fade.
   ===================================================================================== */
html.dm-settled .dm-in{ animation: none !important; opacity: 1 !important; transform: none !important; }
html.dm-settled .dtile{ opacity: 1 !important; transform: none !important; }

/* isolate self-contained cards so unchanged subtrees skip layout + paint work */
html.dm-on .dtile, html.dm-on .dfocus{ contain: layout paint; }
html.dm-on .mrail__pill{ will-change: transform, width; }

/* natural, languid greeting cross-fade (blur dissolve) */
html.dm-on .dgh__line{
  transition: opacity .7s cubic-bezier(.4,0,.2,1), filter .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}

/* =====================================================================================
   v2.80 — greeting rotation overhaul + skeleton polish
   ===================================================================================== */

/* Rotation: a clean cross-dissolve. Both lines are absolutely stacked in a fixed-height
   stage, so nothing reflows or "crumples" — they just dissolve with a whisper of scale. */
html.dm-on .dgh__t{ position: relative; min-height: 62px; }
html.dm-on .dgh__line{
  position: absolute; top: 0; left: 0; right: 0; bottom: auto; margin: 0; display: block;
  opacity: 0; filter: none; transform: scale(.986); transform-origin: left top;
  transition: opacity .85s cubic-bezier(.4,0,.2,1), transform .85s cubic-bezier(.4,0,.2,1);
}
html.dm-on .dgh__line.is-on{ opacity: 1; filter: none; transform: scale(1); }
html.dm-on .dgh__line.is-out{ opacity: 0; filter: none; transform: scale(1.014); }
@media (prefers-reduced-motion: reduce){
  html.dm-on .dgh__line{ transition: opacity .3s linear; transform: none; }
  html.dm-on .dgh__line.is-on, html.dm-on .dgh__line.is-out{ transform: none; }
}

/* Skeleton: matches the real layout so there's no jump, with a visible shimmer sweep. */
html.dm-on .msk{ display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
html.dm-on .msk__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
html.dm-on .msk__b{ border-radius: 22px; }
html.dm-on .msk__lbl{ height: 12px; width: 34%; border-radius: 6px; margin: 6px 2px -2px; }
html.dm-on .dm .sk::after,
html.dm-on .msk .sk::after{
  background: linear-gradient(90deg, transparent, rgba(10,31,68,.055) 46%, rgba(10,31,68,.055) 54%, transparent);
}

/* v2.81 — the in-app monogram now hosts the Folded logo SVG (was a gold letter) */
html.dm-on .dm__mono{ background: none; overflow: hidden; padding: 0;
  box-shadow: 0 8px 18px -8px rgba(6,8,14,.72), inset 0 0 0 1px rgba(214,178,110,.18); }
html.dm-on .dm__mono .dm__logo{ width: 100%; height: 100%; display: block; }

/* =====================================================================================
   v2.82 — UNIFIED GLASS HEADER (uhead): brand row + month pills in one premium glass
   panel; greeting moved out to a plain section below with breathing room.
   Light glass in light mode, charcoal glass in dark. Overrides the old dhero glass.
   ===================================================================================== */
html.dm-on .uhead{ position: relative; z-index: 5; overflow: hidden;
  margin: calc(env(safe-area-inset-top, 0px) + 10px) var(--m-gutter) 0;
  border-radius: 26px; padding: 11px 11px 9px;
  background: rgba(255,255,255,.48); border: 1px solid rgba(255,255,255,.66);
  box-shadow: 0 24px 48px -26px rgba(10,31,68,.52), inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(214,178,110,.10);
  -webkit-backdrop-filter: blur(28px) saturate(200%); backdrop-filter: blur(28px) saturate(200%); }
/* whisper of gold hairline across the top edge */
html.dm-on .uhead::before{ content:""; position:absolute; left:16px; right:16px; top:0; height:1px; z-index:2;
  background: linear-gradient(90deg, transparent, rgba(214,178,110,.5), transparent); }

/* brand row */
html.dm-on .uhead__brand{ display:flex; align-items:center; gap:12px; padding:3px 4px 12px; }
html.dm-on .uhead__logo{ width:41px; height:41px; flex:0 0 auto; border-radius:12px; overflow:hidden;
  box-shadow:0 7px 15px -6px rgba(0,0,0,.55), inset 0 0 0 1px rgba(214,178,110,.22); }
html.dm-on .uhead__logo .dm__logo{ width:100%; height:100%; display:block; }
html.dm-on .uhead__wm{ display:flex; flex-direction:column; min-width:0; flex:1; }
html.dm-on .uhead__nm{ font:900 19px/.98 var(--font-display); letter-spacing:-.03em; color:var(--m-ink); white-space:nowrap; }
html.dm-on .uhead__sub{ font:700 8px/1 var(--font-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--m-ink-3); margin-top:5px; }

/* control capsule (bell + sliders) — flat segmented, frosted */
html.dm-on .uhead__cap{ margin-left:auto; display:flex; align-items:center; gap:0; border-radius:20px; overflow:hidden;
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.7); box-shadow:inset 0 1px 0 rgba(255,255,255,.8); }
html.dm-on .uhead__cap .dm__ico{ position:relative; width:42px; height:38px; min-width:0; border-radius:0; border:0;
  background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; color:var(--m-ink-2); }
html.dm-on .uhead__cap .dm__ico::after{ display:none; }   /* kill any inherited sheen */
html.dm-on .uhead__cap .dm__ico + .dm__ico::before{ content:""; position:absolute; left:0; top:9px; bottom:9px; width:1px; background:rgba(10,31,68,.12); }
html.dm-on .uhead__cap .dm__gi{ width:19px; height:19px; }
html.dm-on .uhead__cap .dm__badge{ top:5px; right:9px; }

/* month pills inside the same glass */
html.dm-on .uhead .dm__period{ position:static; margin:0; padding:0; background:none; border:0; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none; border-radius:0; }
html.dm-on .uhead .dm__period::before, html.dm-on .uhead .dm__period::after{ display:none; }
html.dm-on .uhead .mrail--v3{ margin:0; padding:4px; background:rgba(10,31,68,.05); border-radius:16px; }
html.dm-on .uhead .dm__period .mrail__pill{ background:rgba(255,255,255,.92); background-image:none;
  border:1px solid rgba(255,255,255,.9); box-shadow:0 4px 10px -4px rgba(10,31,68,.25), inset 0 1px 0 #fff; }

/* greeting — plain, separate, with breathing room */
html.dm-on .dgh{ margin:0; padding:26px var(--m-gutter) 0; background:none; border:0; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none; border-radius:0; }
html.dm-on .dgh::before, html.dm-on .dgh::after{ display:none; }
html.dm-on .dm__scroll{ padding-top:0; }

/* let the glass refract the day's glow: sit it just behind the panel */
html.dm-on .dm__amb{ top: calc(env(safe-area-inset-top, 0px) + 10px); }

/* ---------- dark mode: charcoal glass ---------- */
html[data-theme="dark"].dm-on .uhead{ background: rgba(30,34,42,.62); border-color: rgba(255,255,255,.1);
  box-shadow: 0 24px 48px -22px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(214,178,110,.10); }
html[data-theme="dark"].dm-on .uhead__nm{ color: #fff; }
html[data-theme="dark"].dm-on .uhead__sub{ color: #95a3c7; }
html[data-theme="dark"].dm-on .uhead__cap{ background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.14); box-shadow: none; }
html[data-theme="dark"].dm-on .uhead__cap .dm__ico{ color: #c9d3ea; }
html[data-theme="dark"].dm-on .uhead__cap .dm__ico + .dm__ico::before{ background: rgba(255,255,255,.14); }
html[data-theme="dark"].dm-on .uhead .mrail--v3{ background: rgba(0,0,0,.24); }
html[data-theme="dark"].dm-on .uhead .dm__period .mrail__pill{ background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }

/* dark-mode: keep the active month legible on the translucent pill */
html[data-theme="dark"].dm-on .uhead .dm__period .mrail--v3 .mrail__chip[aria-selected="true"]{ color: #fff; }
html[data-theme="dark"].dm-on .uhead .mrail--v3 .mrail__chip{ color: rgba(255,255,255,.6); }

/* =====================================================================================
   v2.83 — hero greeting in its own premium glass panel (separate from the header, so no
   join line), + the "Paid on time" ring tile. Light glass / charcoal in dark.
   ===================================================================================== */
html.dm-on .dgh{ position: relative; overflow: hidden;
  margin: 14px var(--m-gutter) 0; padding: 18px 18px 20px; border-radius: 26px;
  background: rgba(255,255,255,.44); border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 22px 46px -26px rgba(10,31,68,.5), inset 0 1px 0 rgba(255,255,255,.82), inset 0 0 0 1px rgba(214,178,110,.08);
  -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%); }
html.dm-on .dgh::before{ content:""; position:absolute; left:16px; right:16px; top:0; height:1px; z-index:2;
  background: linear-gradient(90deg, transparent, rgba(214,178,110,.42), transparent); }
html[data-theme="dark"].dm-on .dgh{ background: rgba(30,34,42,.6); border-color: rgba(255,255,255,.1);
  box-shadow: 0 22px 46px -22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(214,178,110,.08); }

/* =====================================================================================
   v2.84 — HEADER SPLIT ("Haaltd" gold) + month pills UNIFIED WITH THE GREETING in one
   glass hero. Full-width greeting with an animated (crumple-proof) stage. Refined the
   needs-attention hero. Overrides v2.82/v2.83 (.uhead / .dgh glass).
   ===================================================================================== */

/* ---- header (separate, seamless, Haaltd gold) ---- */
html.dm-on .hdr{ position: relative; z-index: 6; display: flex; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top,0px) + 6px) var(--m-gutter) 12px; background: transparent;
  transition: background .3s ease, box-shadow .3s ease; }
html.dm-on .dm.is-scrolled .hdr{ background: rgba(242,242,238,.78); box-shadow: 0 1px 0 rgba(10,31,68,.06);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); }
html[data-theme="dark"].dm-on .dm.is-scrolled .hdr{ background: rgba(16,18,22,.78); box-shadow: 0 1px 0 rgba(255,255,255,.05); }
html.dm-on .hdr__logo{ width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; overflow: hidden;
  box-shadow: 0 7px 15px -6px rgba(0,0,0,.5), inset 0 0 0 1px rgba(214,178,110,.2); }
html.dm-on .hdr__logo .dm__logo{ width: 100%; height: 100%; display: block; }
html.dm-on .hdr__wm{ display: flex; flex-direction: column; min-width: 0; flex: 1; }
html.dm-on .hdr__nm{ font: 900 23px/.95 var(--font-display); letter-spacing: -.02em;
  background: linear-gradient(118deg,#E9CE86 0%,#C79A3C 52%,#9A6A18 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.dm-on .hdr__cap{ margin-left: auto; display: flex; align-items: center; border-radius: 20px; overflow: hidden;
  background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 3px 10px -5px rgba(10,31,68,.22), inset 0 1px 0 rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); }
html.dm-on .hdr__cap .dm__ico{ position: relative; width: 42px; height: 38px; border-radius: 0; border: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--m-ink-2); }
html.dm-on .hdr__cap .dm__ico::after{ display: none; }
html.dm-on .hdr__cap .dm__ico + .dm__ico::before{ content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 1px; background: rgba(10,31,68,.12); }
html.dm-on .hdr__cap .dm__gi{ width: 19px; height: 19px; }
html.dm-on .hdr__cap .dm__badge{ top: 5px; right: 9px; }
html[data-theme="dark"].dm-on .hdr__cap{ background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.14); box-shadow: none; }
html[data-theme="dark"].dm-on .hdr__cap .dm__ico{ color: #c9d3ea; }
html[data-theme="dark"].dm-on .hdr__cap .dm__ico + .dm__ico::before{ background: rgba(255,255,255,.14); }

/* ---- unified glass hero: month pills + greeting ---- */
html.dm-on .hero{ position: relative; z-index: 5; overflow: hidden;
  margin: 4px var(--m-gutter) 0; border-radius: 28px; padding: 12px 12px 20px;
  background: rgba(255,255,255,.46); border: 1px solid rgba(255,255,255,.66);
  box-shadow: 0 26px 50px -26px rgba(10,31,68,.5), inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(214,178,110,.09);
  -webkit-backdrop-filter: blur(30px) saturate(200%); backdrop-filter: blur(30px) saturate(200%); }
html.dm-on .hero::before{ content:""; position:absolute; left:18px; right:18px; top:0; height:1px; z-index:2;
  background: linear-gradient(90deg, transparent, rgba(214,178,110,.5), transparent); }
html[data-theme="dark"].dm-on .hero{ background: rgba(30,34,42,.6); border-color: rgba(255,255,255,.1);
  box-shadow: 0 26px 50px -22px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(214,178,110,.09); }

/* pills inside the hero */
html.dm-on .hero .dm__period{ position: static; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; }
html.dm-on .hero .dm__period::before, html.dm-on .hero .dm__period::after{ display: none; }
html.dm-on .hero .mrail--v3{ margin: 0; padding: 4px; background: rgba(10,31,68,.05); border-radius: 16px; }
html.dm-on .hero .dm__period .mrail__pill{ background: rgba(255,255,255,.92); background-image: none; border: 1px solid rgba(255,255,255,.9); box-shadow: 0 4px 10px -4px rgba(10,31,68,.25), inset 0 1px 0 #fff; }
html.dm-on .hero .dm__period .mrail--v3 .mrail__chip[aria-selected="true"]{ color: var(--m-ink); }
html[data-theme="dark"].dm-on .hero .mrail--v3{ background: rgba(0,0,0,.24); }
html[data-theme="dark"].dm-on .hero .dm__period .mrail__pill{ background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
html[data-theme="dark"].dm-on .hero .mrail--v3 .mrail__chip{ color: rgba(255,255,255,.6); }
html[data-theme="dark"].dm-on .hero .dm__period .mrail--v3 .mrail__chip[aria-selected="true"]{ color: #fff; }

/* ---- greeting: plain inside the hero, full width, animated crumple-proof stage ---- */
html.dm-on .hero .dgh{ margin: 0; padding: 16px 6px 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; }
html.dm-on .hero .dgh::before, html.dm-on .hero .dgh::after{ display: none; }
html.dm-on .dgh__ebrow{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
html.dm-on .dgh__ebrow .dgh__eyebrow{ margin: 0; }
html.dm-on .dgh__t{ position: relative; min-height: 62px; overflow: hidden; transition: height .55s cubic-bezier(.4,0,.2,1); }
html.dm-on .dgh__t .dgh__line{ position: absolute; left: 0; right: 0; top: 0; margin: 0;
  font: 800 26px/1.14 var(--font-display); letter-spacing: -.02em; color: var(--m-ink);
  opacity: 0; filter: none; transform: scale(.99); transform-origin: left top;
  transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); }
html.dm-on .dgh__t .dgh__line.is-on{ opacity: 1; transform: scale(1); }
html.dm-on .dgh__t .dgh__line.is-out{ opacity: 0; transform: scale(1.012); }
html[data-theme="dark"].dm-on .dgh__t .dgh__line{ color: #fff; }
html.dm-on .dgh__date{ margin: 12px 0 0; }
@media (prefers-reduced-motion: reduce){
  html.dm-on .dgh__t{ transition: none; }
  html.dm-on .dgh__t .dgh__line{ transition: opacity .3s linear; transform: none; }
}

/* ---- ambient glow sits behind the hero (header stays clean cream) ---- */
html.dm-on .dm__amb{ top: calc(env(safe-area-inset-top,0px) + 58px); }

/* ---- refined needs-attention hero: deeper radial bloom ---- */
html.dm-on .dfocus--overdue{ background: radial-gradient(120% 130% at 82% 6%, #5a1512, transparent 58%), linear-gradient(158deg, #3c100e, #190706); }
html.dm-on .dfocus--clear{ background: radial-gradient(120% 130% at 82% 6%, #0f5a3c, transparent 58%), linear-gradient(158deg, #0c3f2b, #06231a); }
html.dm-on .dfocus--due{ background: radial-gradient(120% 130% at 82% 6%, #6a4a12, transparent 58%), linear-gradient(158deg, #4a3410, #241905); }

/* =====================================================================================
   v2.85 — edge-to-edge heroes (greeting + needs-attention) + a shorter, more horizontal
   greeting. Negative side margins cancel the .dm__scroll gutter so the cards reach the
   screen edges; the greeting's reserved height drops to one line (it grows only when a
   message actually wraps).
   ===================================================================================== */
html.dm-on .hero{ margin: 4px calc(-1 * var(--m-gutter)) 0; border-radius: 24px; padding: 12px 16px 14px; }
html.dm-on .dfocus{ margin: 16px calc(-1 * var(--m-gutter)) 0; }

/* compact, horizontal greeting */
html.dm-on .hero .dgh{ padding: 12px 0 0; }
html.dm-on .dgh__ebrow{ margin-bottom: 8px; }
html.dm-on .dgh__t{ min-height: 34px; }
html.dm-on .dgh__date{ margin-top: 8px; }

/* =====================================================================================
   v2.86 — INVOICE EDITOR (.ive) + VIEWER (.ivx): charcoal-native 2026 (item 2).
   Scoped to .ive / .ivx so no other screen is touched. All field IDs preserved.
   ===================================================================================== */
.ive{ --ink:#0A1F44; --ink2:#4A5878; --ink3:#7C879C; --hair:rgba(10,31,68,.09);
  max-width: 620px; margin: 0 auto; padding: 0 16px calc(120px + env(safe-area-inset-bottom,0px));
  font-family: var(--font-ui, "Inter", system-ui, sans-serif); }
.ive__top{ display:flex; align-items:center; justify-content:space-between; padding: calc(env(safe-area-inset-top,0px) + 14px) 0 2px; }
.ive__back{ width:38px; height:38px; border:0; border-radius:50%; background:rgba(10,31,68,.05); color:var(--ink); display:grid; place-items:center; cursor:pointer; }
.ive__back svg{ width:20px; height:20px; }
.ive__topacts{ display:flex; gap:8px; }
.ive__topacts .btn-ios-secondary{ background:transparent; border:0; color:var(--ink2); font:700 14px/1 var(--font-ui); padding:8px 6px; box-shadow:none; }
.ive__title{ font: 800 30px/1.04 var(--font-display); letter-spacing:-.03em; color:var(--ink); margin:8px 2px 2px; }
.ive__sub{ font:500 13px/1 var(--font-ui); color:var(--ink3); margin:0 2px 6px; }
.ive__sec{ font:700 8.5px/1 var(--font-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--ink3); margin:22px 4px 10px; }
.ive__card{ background:#fff; border:1px solid var(--hair); border-radius:18px; box-shadow:0 12px 26px -22px rgba(10,31,68,.4); overflow:hidden; }
.ive .hm-field{ padding:13px 16px; margin:0; display:block; }
.ive .hm-field + .hm-field{ border-top:1px solid var(--hair); }
.ive .hm-label{ display:block; font:600 11px/1 var(--font-ui); color:var(--ink3); margin-bottom:8px; letter-spacing:0; text-transform:none; }
.ive .hm-opt{ color:var(--ink3); font-weight:500; }
.ive .form-control{ width:100%; border:0; background:transparent; padding:0; font:600 16px/1.3 var(--font-ui); color:var(--ink); box-shadow:none; border-radius:0; min-height:0; }
.ive textarea.form-control{ resize:none; }
.ive .form-control::placeholder{ color:#aab1c0; font-weight:500; }
.ive .inv-help, .ive .text-secondary-ios{ font-size:.72rem; color:var(--ink3); margin:7px 0 0; }
.ive .pred-hint{ padding:0 16px 12px; font:500 12px/1.4 var(--font-ui); color:var(--m-amber,#A65500); }

/* customer / ship-to search-select slots */
.ive #inv-customer-slot .ss-control, .ive #inv-shipto-slot .ss-control{ border:0!important; background:rgba(10,31,68,.04)!important; border-radius:12px!important; min-height:46px; }

/* status picker */
.ive .status-pick{ display:flex; flex-wrap:wrap; gap:7px; }
.ive .status-pill{ border-radius:11px; padding:9px 12px; font:700 12px/1 var(--font-ui); }
.ive .status-unlock{ margin-top:10px; font:600 12px/1 var(--font-ui); color:var(--ink3); background:rgba(10,31,68,.04); border:0; border-radius:10px; padding:9px 12px; display:inline-flex; gap:7px; align-items:center; cursor:pointer; }

/* line items */
.ive__card--items{ padding:6px; }
.ive .inv-item{ padding:12px; border-radius:14px; }
.ive .inv-item + .inv-item{ border-top:1px solid var(--hair); border-radius:0; }
.ive .inv-item__main{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; align-items:end; }
.ive .inv-item__desc{ grid-column:1 / -1; }
.ive .inv-item .hm-field{ padding:0; border:0!important; width:auto!important; }
.ive .inv-item .form-control{ background:rgba(10,31,68,.04); border-radius:10px; padding:10px 12px; font-size:15px; }
.ive .inv-item .it-remove{ position:absolute; top:8px; right:8px; color:var(--m-coral,#D93A2F)!important; background:transparent; border:0; }
.ive .inv-item{ position:relative; }
.ive__addline{ display:flex; align-items:center; justify-content:center; gap:9px; width:calc(100% - 0px); margin:6px 0 0; padding:13px; border-radius:14px; border:1.5px dashed rgba(10,31,68,.18); background:rgba(10,31,68,.015); color:var(--m-amber,#A65500); font:700 13px/1 var(--font-ui); cursor:pointer; }
.ive__addline-i{ width:24px; height:24px; border-radius:8px; display:grid; place-items:center; background:rgba(199,154,60,.14); color:var(--m-gold,#B0842A); }

/* amount-paid box */
.ive .inv-paid-box{ display:flex; align-items:center; gap:12px; }
.ive .inv-paid-box__v{ font:700 17px/1 var(--font-ledger, "IBM Plex Mono", monospace); color:var(--ink); }
.ive .inv-paid-box__btn{ color:var(--m-green,#0F8A5F)!important; background:rgba(15,138,95,.1); border:0; border-radius:10px; padding:8px 11px; font:700 12px/1 var(--font-ui); }

/* charcoal totals */
.ive__tot{ margin-top:16px; border-radius:20px; overflow:hidden; padding:16px 18px; color:#fff;
  background: radial-gradient(120% 130% at 88% 0%, #33373f, transparent 60%), linear-gradient(160deg, #26292F, #0F1114); }
.ive__tot-r{ display:flex; justify-content:space-between; align-items:center; padding:6px 0; font:500 13px/1 var(--font-ui); color:rgba(255,255,255,.66); }
.ive__tot-r strong{ font:600 13px/1 var(--font-ledger,"IBM Plex Mono",monospace); color:#fff; }
.ive__tot-r--grand{ border-top:1px solid rgba(255,255,255,.12); margin-top:6px; padding-top:14px; }
.ive__tot-r--grand span:first-child{ font:700 12px/1 var(--font-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--m-gold-lt,#E4C878); }
.ive__tot-r--grand span:last-child{ font:800 26px/1 var(--font-display); letter-spacing:-.02em; color:#fff; }
.ive__tot-r--out strong{ color:#f0c9a0; }

/* fixed bottom action bar */
.ive__bar{ position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex; gap:10px;
  padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg, rgba(242,242,238,0), var(--m-bg,#F2F2EE) 30%); }
.ive__bar .btn-ios-primary{ flex:1; height:56px; border:0; border-radius:17px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px;
  font:700 16px/1 var(--font-ui); background:linear-gradient(150deg,#2b2f36,#121418); color:var(--m-gold-lt,#E4C878);
  box-shadow:0 16px 30px -12px rgba(0,0,0,.5), inset 0 0 0 1px rgba(214,178,110,.22); }
.ive__bar .btn-ios-danger{ flex:0 0 auto; height:56px; padding:0 18px; border:0; border-radius:17px; background:#fff; color:var(--m-coral,#D93A2F); font:700 14px/1 var(--font-ui); box-shadow:0 10px 22px -12px rgba(10,31,68,.35); cursor:pointer; }
.ive__bar-ro{ flex:1; text-align:center; color:var(--ink3); font:600 14px/56px var(--font-ui); }
@media (min-width:640px){ .ive__bar{ left:50%; transform:translateX(-50%); max-width:620px; } }

/* ---- VIEWER (.ivx) ---- */
.ivx .ivx__scroll{ max-width:620px; margin:0 auto; padding:6px 20px calc(150px + env(safe-area-inset-bottom,0px)); }
.ivx-top{ background:none!important; border:0!important; box-shadow:none!important; padding:8px 0 4px!important; color:var(--m-ink,#0A1F44); }
.ivx-top__lbl{ font:600 13px/1 var(--font-ledger,"IBM Plex Mono",monospace); color:#7C879C; }
.ivx-top__amt{ font:900 44px/1 var(--font-display); letter-spacing:-.03em; color:var(--m-ink,#0A1F44); margin:8px 0 10px; }
.ivx-top__meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font:500 12.5px/1 var(--font-ui); color:#7C879C; }
.ivx-party{ display:flex; align-items:center; gap:13px; background:#fff; border:1px solid rgba(10,31,68,.09); border-radius:18px; padding:15px 16px; margin:18px 0 0; box-shadow:0 12px 26px -22px rgba(10,31,68,.4); }
.ivx-party__name{ font:700 16px/1.2 var(--font-display); color:var(--m-ink,#0A1F44); }
.ivx-party__body{ font:500 12.5px/1.4 var(--font-ui); color:#7C879C; margin-top:3px; }
.ivx-card{ background:#fff; border:1px solid rgba(10,31,68,.09); border-radius:18px; padding:6px 16px; margin-top:18px; box-shadow:0 12px 26px -22px rgba(10,31,68,.4); }
.ivx-card__h{ font:700 8.5px/1 var(--font-ui); letter-spacing:.18em; text-transform:uppercase; color:#7C879C; padding:14px 0 6px; }
.ivx-item{ display:flex; justify-content:space-between; gap:12px; padding:13px 0; border-top:1px solid rgba(10,31,68,.08); }
.ivx-item__desc{ font:600 15px/1.35 var(--font-ui); color:var(--m-ink,#0A1F44); }
.ivx-item__qty, .ivx-item__veh{ font:500 12px/1.3 var(--font-ui); color:#7C879C; margin-top:3px; }
.ivx-item__amt{ font:700 15px/1 var(--font-ledger,"IBM Plex Mono",monospace); color:var(--m-ink,#0A1F44); white-space:nowrap; }
.ivx-act{ display:flex; align-items:center; justify-content:center; gap:9px; height:56px; border-radius:17px; font:700 15px/1 var(--font-ui); cursor:pointer; border:0; }
.ivx-act--primary{ background:linear-gradient(150deg,#2b2f36,#121418); color:var(--m-gold-lt,#E4C878); box-shadow:0 16px 30px -12px rgba(0,0,0,.5), inset 0 0 0 1px rgba(214,178,110,.22); }
.ivx-act--wa{ background:#fff; color:var(--m-ink,#0A1F44); border:1px solid rgba(10,31,68,.09); }

/* editor is a focused screen — hide the global tab bar while it's open */
html.editor-open #app-tabbar{ display: none !important; }
/* viewer actions: clean full-width stack */
.ivx-actions{ display: flex; flex-direction: column; gap: 10px; padding: 20px 0 0; }
.ivx-actions .ivx-act{ width: 100%; }

/* =====================================================================================
   v2.87 — ADD/EDIT CUSTOMER form → charcoal native (item 3). Scoped to the modal that
   contains #hm-cust-form via :has(), so no other modal/form is affected.
   ===================================================================================== */
.hm-modal:has(#hm-cust-form){ --ink:#0A1F44; --ink3:#7C879C; --hair:rgba(10,31,68,.09); }
.hm-modal:has(#hm-cust-form) .modal-header{ border-bottom:0; padding:20px 20px 4px; }
.hm-modal:has(#hm-cust-form) .modal-title{ font:800 26px/1.05 var(--font-display); letter-spacing:-.03em; color:var(--ink); }
.hm-modal:has(#hm-cust-form) .modal-body{ padding:12px 20px 8px; }

/* the form becomes one clean native card */
#hm-cust-form.hm-form-grid{ display:flex; flex-direction:column; gap:0; background:#fff; border:1px solid var(--hair); border-radius:18px; box-shadow:0 12px 26px -22px rgba(10,31,68,.4); overflow:hidden; }
#hm-cust-form .hm-field{ grid-column:auto!important; width:auto!important; max-width:none!important; margin:0; padding:13px 16px; }
#hm-cust-form .hm-field + .hm-field{ border-top:1px solid var(--hair); }
#hm-cust-form .hm-label{ display:block; font:600 11px/1 var(--font-ui); color:var(--ink3); margin-bottom:8px; letter-spacing:0; text-transform:none; }
#hm-cust-form .hm-hint{ color:var(--ink3); }
#hm-cust-form .form-control{ width:100%; border:0; background:rgba(10,31,68,.04); border-radius:11px; padding:11px 13px; font:600 15px/1.3 var(--font-ui); color:var(--ink); box-shadow:none; min-height:0; }
#hm-cust-form textarea.form-control{ resize:none; }
#hm-cust-form .form-control::placeholder{ color:#aab1c0; font-weight:500; }
/* phone group + slots keep inline */
#hm-cust-form .hm-phone-group{ display:flex; gap:8px; align-items:stretch; }
#hm-cust-form .hm-phone-group [data-slot="dial"]{ flex:0 0 auto; }
#hm-cust-form [data-slot="dial"] .ss-control, #hm-cust-form [data-slot="country"] .ss-control{ border:0!important; background:rgba(10,31,68,.04)!important; border-radius:11px!important; }
#hm-cust-form .cf-ava-row{ display:flex; align-items:center; gap:14px; }
#hm-cust-form .hm-toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* footer save → charcoal-gold CTA (already a bottom bar) */
.hm-modal:has(#hm-cust-form) .modal-footer{ border-top:0; padding:8px 20px calc(18px + env(safe-area-inset-bottom,0px)); }
.hm-modal:has(#hm-cust-form) .modal-footer .btn-ios-primary{ flex:1; height:54px; border:0; border-radius:16px; font:700 16px/1 var(--font-ui);
  background:linear-gradient(150deg,#2b2f36,#121418); color:var(--m-gold-lt,#E4C878);
  box-shadow:0 14px 26px -12px rgba(0,0,0,.5), inset 0 0 0 1px rgba(214,178,110,.22); }
.hm-modal:has(#hm-cust-form) .modal-footer .btn-ios-secondary{ height:54px; border-radius:16px; background:#fff; border:1px solid var(--hair); color:var(--ink); }

/* =====================================================================================
   v2.88 — RECORD PAYMENT (.rec) → same design language (item 4). Light touch: charcoal-gold
   CTA, gold accents, prominent amount. Scoped to .rec so nothing else changes.
   ===================================================================================== */
.rec__go{ height:52px!important; border-radius:16px!important; font-size:.98rem!important; font-weight:700!important;
  background:linear-gradient(150deg,#2b2f36,#121418)!important; color:var(--m-gold-lt,#E4C878)!important;
  box-shadow:0 14px 26px -12px rgba(0,0,0,.5), inset 0 0 0 1px rgba(214,178,110,.22)!important; }
.rec__go:hover:not(:disabled){ box-shadow:0 18px 30px -12px rgba(0,0,0,.55), inset 0 0 0 1px rgba(214,178,110,.3)!important; }
.rec__title{ font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; color:var(--m-ink,#0A1F44); }
/* prominent amount cell */
.rec #rec-amt{ font-family:var(--font-display)!important; font-weight:800!important; font-size:1.5rem!important; letter-spacing:-.02em; color:var(--m-ink,#0A1F44); }
.rec #rec-sym{ font-weight:800; color:var(--m-ink-3,#7C879C); }
/* method + chips accent → gold */
.rec__chip.is-on, .rec #rec-chips .is-on{ background:rgba(199,154,60,.14)!important; color:var(--m-gold,#B0842A)!important; border-color:rgba(199,154,60,.4)!important; }

/* =====================================================================================
   v2.89 — "All sections" grid menu: premium polish (item 5). Keeps the grid; refines the
   glass sheet, title, tiles and active state. Scoped to .appmenu.
   ===================================================================================== */
.appmenu__sheet{ background: rgba(248,248,245,.72)!important;
  -webkit-backdrop-filter: blur(36px) saturate(190%)!important; backdrop-filter: blur(36px) saturate(190%)!important;
  border-top: 1px solid rgba(255,255,255,.9)!important;
  box-shadow: 0 -30px 64px -20px rgba(10,20,40,.4), inset 0 1px 0 rgba(255,255,255,.9)!important; }
.appmenu__sheet::after{ content:""; position:absolute; left:20px; right:20px; top:0; height:1px; z-index:2;
  background: linear-gradient(90deg, transparent, rgba(214,178,110,.5), transparent); pointer-events:none; }
html[data-theme="dark"] .appmenu__sheet{ background: rgba(24,27,33,.8)!important; border-top-color: rgba(255,255,255,.1)!important; }

.appmenu__title{ font: 800 23px/1 var(--font-display, sans-serif)!important; letter-spacing:-.03em!important; color: var(--m-ink,#0A1F44); }
.appmenu__head{ margin: 4px 6px 16px!important; }

.appmenu__grid{ gap: 12px!important; }
.appmenu__tile{ min-height: 100px!important; border-radius: 22px!important;
  background: rgba(255,255,255,.7)!important; border: 1px solid rgba(255,255,255,.8)!important;
  box-shadow: 0 14px 30px -24px rgba(10,31,68,.5), inset 0 1px 0 rgba(255,255,255,.7)!important; gap: 11px!important; }
.appmenu__ico{ width: 48px!important; height: 48px!important; border-radius: 15px!important;
  background: linear-gradient(155deg, rgba(10,31,68,.06), rgba(10,31,68,.03))!important; color: var(--m-ink,#0A1F44)!important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.appmenu__ico svg{ width: 23px; height: 23px; }
.appmenu__lbl{ font: 650 12px/1.2 var(--font-ui, sans-serif)!important; color: var(--m-ink,#0A1F44); letter-spacing:-.01em; }

/* active tile → charcoal gradient + GOLD icon */
.appmenu__tile.is-active{ border-color: transparent!important;
  background: radial-gradient(120% 130% at 85% 0%, #33373f, transparent 60%), linear-gradient(155deg, #26292F, #0F1114)!important;
  box-shadow: 0 18px 34px -16px rgba(0,0,0,.55), inset 0 0 0 1px rgba(214,178,110,.18)!important; color:#fff!important; }
.appmenu__tile.is-active .appmenu__ico{ background: rgba(255,255,255,.1)!important; color: var(--m-gold-lt,#E4C878)!important; box-shadow:none; }
.appmenu__tile.is-active .appmenu__lbl{ color:#fff; }
html[data-theme="dark"] .appmenu__tile{ background: rgba(255,255,255,.06)!important; border-color: rgba(255,255,255,.1)!important; }
html[data-theme="dark"] .appmenu__tile .appmenu__ico{ color:#fff!important; background: rgba(255,255,255,.1)!important; }

/* =====================================================================================
   v2.90 — GLOBAL PERFORMANCE / SMOOTHNESS. Goal: let animations run at the display's full
   refresh (90/120Hz) by keeping them to GPU-composited transform/opacity, promoting animated
   chrome to their own layers, and cutting the most expensive backdrop-filter work.
   ===================================================================================== */

/* Promote elements that animate to their own GPU layer so transforms don't jank the main thread.
   (will-change alone promotes — we must NOT set a transform here, or it overrides each element's
   own slide/translate animation.) */
.appmenu__sheet, .appmenu__scrim, #app-tabbar, #app-tabbar .tabbar__fab, #app-tabbar .tabbar__pill,
.ive__bar, .dm__amb, .dgh__t .dgh__line, .app-speeddial, .fab-dial{
  will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}

/* THE MENU FIX — the stated lag. (1) The scrim had its own full-screen backdrop-blur stacked
   behind the sheet's blur; drop it (plain dim reads the same, costs nothing). (2) Trim the sheet
   blur so it's cheap to recompute while sliding — visually near-identical. */
.appmenu__scrim{ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.appmenu__sheet{ -webkit-backdrop-filter: blur(22px) saturate(150%) !important; backdrop-filter: blur(22px) saturate(150%) !important; }
.appmenu__grid{ will-change: scroll-position; }

/* Snappier, compositor-only sheet motion. */
.appmenu__sheet{ transition: transform .40s cubic-bezier(.22, 1, .36, 1) !important; }

/* Kill the 300ms tap delay and grey flash for a native, instant feel. */
html.dm-on, html.dm-on *{ -webkit-tap-highlight-color: transparent; }
.appmenu__tile, .dtile, .ive__card, .ivx-act, .rec__go, .btn-ios-primary,
button, [role="button"]{ touch-action: manipulation; }

/* Momentum scrolling + overscroll containment on the app's scroll surfaces. */
.dm__scroll, .ivx__scroll, .ive, .appmenu__grid, .pv__scroll, .modal-body{
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}

/* Honour reduced-motion: no transforms/transitions, and drop will-change so we don't hold layers. */
@media (prefers-reduced-motion: reduce){
  .appmenu__sheet, .appmenu__scrim, #app-tabbar, #app-tabbar .tabbar__fab,
  .ive__bar, .dm__amb, .dgh__t .dgh__line, .app-speeddial, .fab-dial{ will-change: auto; }
}

/* =====================================================================================
   v2.91 — NATIVE GLASS REDESIGN · ITEM 1: seamless sticky glass header + mesh canvas.
   The page gets a calm, timeless MESH backdrop (so frosted glass reads everywhere); the
   day-part colour is removed from the page and now lives only in the hero (Item 3). The
   header becomes a seamless, notch-blending frosted-glass bar — no gold, no hairlines —
   with a company-name eyebrow, a "Dashboard" large-title, and a frosted control capsule
   (bell + Cog·6 gear). Appended last so it overrides the earlier .hdr / .dm__amb blocks.
   ===================================================================================== */

/* ---- mesh canvas: neutral & timeless; fixed so content scrolls over it (native feel) ---- */
html.dm-on .dm__amb{
  position: fixed; inset: 0; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%; z-index: -1; opacity: 1;
  -webkit-mask-image: none; mask-image: none;
  transition: none;
  background:
    radial-gradient(90% 42% at 82% 0%,  rgba(140,164,255,.40), transparent 60%),
    radial-gradient(80% 40% at 8% 2%,   rgba(198,150,255,.34), transparent 60%),
    radial-gradient(115% 80% at 10% 22%, rgba(150,168,255,.26), transparent 56%),
    radial-gradient(130% 100% at 92% 46%, rgba(120,222,214,.26), transparent 56%),
    radial-gradient(120% 90% at 2% 92%,  rgba(255,182,204,.24), transparent 56%),
    linear-gradient(180deg, #EFF1FB 0%, #EAECF6 100%);
}
html[data-theme="dark"].dm-on .dm__amb{
  opacity: 1;
  background:
    radial-gradient(90% 42% at 82% 0%,  rgba(96,116,236,.34), transparent 60%),
    radial-gradient(80% 40% at 8% 2%,   rgba(150,96,240,.26), transparent 60%),
    radial-gradient(115% 80% at 10% 22%, rgba(96,116,236,.20), transparent 56%),
    radial-gradient(130% 100% at 92% 46%, rgba(34,168,160,.24), transparent 56%),
    radial-gradient(120% 90% at 2% 92%,  rgba(226,80,138,.18), transparent 56%),
    linear-gradient(180deg, #0A0D18 0%, #06080F 100%);
}
/* the fixed mesh must cover the flat page colour on the dashboard; the base colour now
   matches the status-bar colour so nothing cream peeks during rubber-band overscroll */
html.dm-on .app-shell, html.dm-on .app-main, html.dm-on, html.dm-on body{ background: #EEF0F8; }
html[data-theme="dark"].dm-on .app-shell, html[data-theme="dark"].dm-on .app-main,
html[data-theme="dark"].dm-on, html[data-theme="dark"].dm-on body{ background: #0B0E18; }
html.dm-on .dm__amb-g{ opacity: .35; }

/* ---- seamless sticky glass header (blends under the notch) ---- */
html.dm-on .hdr{
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 13px;
  padding: calc(env(safe-area-inset-top,0px) + 14px) 18px 16px;
  border-radius: 0 0 30px 30px; border: 0;
  /* Seamless top: the header starts as the status-bar colour (so there is no line where the
     OS status bar meets it) and the frosted glass fades in a bit further down. */
  background:
    linear-gradient(115deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.12) 34%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(238,240,248,.96) 0%, rgba(240,242,250,.74) 30%, rgba(252,253,255,.5) 70%, rgba(255,255,255,.42) 100%);
  box-shadow: 0 14px 36px -22px rgba(30,40,80,.40);
  -webkit-backdrop-filter: blur(34px) saturate(190%); backdrop-filter: blur(34px) saturate(190%);
  transition: box-shadow .3s ease;
}
html.dm-on .dm.is-scrolled .hdr{
  background:
    linear-gradient(115deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.12) 34%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(238,240,248,.97) 0%, rgba(241,243,251,.8) 30%, rgba(253,254,255,.56) 70%, rgba(255,255,255,.48) 100%);
  box-shadow: 0 18px 42px -24px rgba(30,40,80,.5);
  -webkit-backdrop-filter: blur(34px) saturate(190%); backdrop-filter: blur(34px) saturate(190%);
}
html[data-theme="dark"].dm-on .hdr,
html[data-theme="dark"].dm-on .dm.is-scrolled .hdr{
  background:
    linear-gradient(115deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 40%, transparent 66%),
    linear-gradient(180deg, rgba(11,14,24,.96) 0%, rgba(16,19,28,.76) 30%, rgba(20,23,32,.55) 70%, rgba(18,20,28,.48) 100%);
  box-shadow: 0 16px 42px -22px rgba(0,0,0,.7);
}

/* logo chip — cool charcoal, no gold ring */
html.dm-on .hdr__logo{
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 14px; overflow: hidden;
  box-shadow: 0 8px 18px -8px rgba(20,30,70,.55), inset 0 1px 0 rgba(255,255,255,.22);
}
html[data-theme="dark"].dm-on .hdr__logo{ box-shadow: 0 8px 20px -8px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.14); }

/* wordmark stack: eyebrow + large-title */
html.dm-on .hdr__wm{ display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
html.dm-on .hdr__eb{
  font: 700 10.5px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: #7C88A6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.dm-on .hdr__ttl{
  font: 800 23px/1 var(--font-display); letter-spacing: -.025em; color: #0C1430;
  background: none; -webkit-background-clip: initial; background-clip: initial;
}
html[data-theme="dark"].dm-on .hdr__eb{ color: #8A96B4; }
html[data-theme="dark"].dm-on .hdr__ttl{ color: #F3F6FC; }

/* frosted control capsule — no divider hairline */
html.dm-on .hdr__cap{
  margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 2px;
  padding: 5px; border-radius: 22px; overflow: visible; border: 0;
  background: rgba(255,255,255,.5);
  box-shadow: 0 6px 16px -10px rgba(20,30,70,.4), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
}
html[data-theme="dark"].dm-on .hdr__cap{
  background: rgba(255,255,255,.08);
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1);
}
html.dm-on .hdr__cap .dm__ico{
  position: relative; width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; color: #3B4664;
  display: grid; place-items: center; cursor: pointer;
}
html.dm-on .hdr__cap .dm__ico:active{ transform: scale(.9); }
html.dm-on .hdr__cap .dm__ico::after{ display: none; }
html.dm-on .hdr__cap .dm__ico + .dm__ico::before{ display: none; } /* remove the divider line */
html.dm-on .hdr__cap .dm__gi{ width: 20px; height: 20px; }
html[data-theme="dark"].dm-on .hdr__cap .dm__ico{ color: #CBD4EC; }

/* bell live-dot */
html.dm-on .hdr__cap .dm__badge{
  top: 6px; right: 8px; min-width: 8px; width: 8px; height: 8px; padding: 0; border-radius: 50%;
  background: #FF5A5F; box-shadow: 0 0 0 2.5px rgba(255,255,255,.92);
}
html[data-theme="dark"].dm-on .hdr__cap .dm__badge{ box-shadow: 0 0 0 2.5px rgba(24,27,36,1); }

/* =====================================================================================
   v2.92 — NATIVE GLASS REDESIGN · ITEM 2: standalone edge-to-edge month/year timeline
   (Style 1). Pulled out of the hero into its own `.dm__tl` band directly below the header.
   Months float on the mesh (no track); the ACTIVE month is an encapsulated frosted-glass
   pill that slides between months (reusing positionRailPill); the selected chip reveals
   its year; a soft year tag (no line) marks the strip's first year and each year change;
   an indigo dot marks the current month. Isolated from `.dm__period` (used by other views).
   ===================================================================================== */
html.dm-on .dm__tl{
  position: static; margin: 4px calc(-1 * var(--m-gutter)) 0; padding: 0;
  background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.dm-on .dm__tl .mrail--v3{
  position: relative; display: flex; align-items: flex-end; gap: 2px;
  margin: 0; padding: 6px 14px 12px; background: none; border: 0; border-radius: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  scroll-snap-type: x proximity;
}
html.dm-on .dm__tl .mrail--v3::-webkit-scrollbar{ display: none; }

/* the encapsulated, sliding frosted-glass pill (active month) */
html.dm-on .dm__tl .mrail__pill{
  position: absolute; top: 6px; left: 0; height: 52px; width: 0; z-index: 0; border: 0; border-radius: 16px;
  background: rgba(255,255,255,.6); background-image: none;
  box-shadow: 0 10px 22px -10px rgba(20,30,70,.4), inset 0 1px 0 rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  will-change: transform, width; transform: translateZ(0); backface-visibility: hidden;
  transition: transform .42s cubic-bezier(.22,1,.36,1), width .42s cubic-bezier(.22,1,.36,1);
}
html[data-theme="dark"].dm-on .dm__tl .mrail__pill{
  background: rgba(255,255,255,.14);
  box-shadow: 0 12px 26px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.16);
}

/* chips */
html.dm-on .dm__tl .mrail--v3 .mrail__chip{
  position: relative; z-index: 1; flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; height: 52px; padding: 8px 16px;
  border: 0; background: transparent; box-shadow: none; border-radius: 16px; cursor: pointer;
  scroll-snap-align: center; transition: color .28s;
}
html.dm-on .dm__tl .mrail--v3 .mrail__chip::before{ display: none; }
html.dm-on .dm__tl .mrail__lbl{ font: 800 13.5px/1 var(--font-display); letter-spacing: .03em; color: #8791A8; }
html[data-theme="dark"].dm-on .dm__tl .mrail__lbl{ color: #8A96B4; }
html.dm-on .dm__tl .mrail__yr{
  height: 11px; line-height: 11px; font: 600 9.5px/11px var(--font-ledger); letter-spacing: .06em;
  color: #AEB6CA; opacity: 0; transition: opacity .28s;
}
html[data-theme="dark"].dm-on .dm__tl .mrail__yr{ color: #6E7A98; }
html.dm-on .dm__tl .mrail--v3 .mrail__chip[aria-selected="true"]{ color: var(--m-ink); background: transparent; box-shadow: none; }
html.dm-on .dm__tl .mrail__chip[aria-selected="true"] .mrail__lbl{ color: #0C1430; }
html[data-theme="dark"].dm-on .dm__tl .mrail__chip[aria-selected="true"] .mrail__lbl{ color: #F3F6FC; }
html.dm-on .dm__tl .mrail__chip[aria-selected="true"] .mrail__yr{ opacity: 1; color: #5E6B88; }
html[data-theme="dark"].dm-on .dm__tl .mrail__chip[aria-selected="true"] .mrail__yr{ color: #AEB7D2; }

/* current-month dot (indigo accent, replaces the old amber/white dot) */
html.dm-on .dm__tl .mrail__now{
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: #4B63FF; box-shadow: 0 0 8px rgba(75,99,255,.6);
}
html.dm-on .dm__tl .mrail__chip[aria-selected="true"] .mrail__now{ background: #4B63FF; }

/* soft year tag at year starts — no line */
html.dm-on .dm__tl .mrail__ytag{
  flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; justify-content: center;
  margin: 0 2px; padding: 3px 8px; border-radius: 9px;
  font: 600 10px/1 var(--font-ledger); letter-spacing: .08em; color: #5E6B88; background: rgba(10,31,68,.06);
}
html[data-theme="dark"].dm-on .dm__tl .mrail__ytag{ color: #AEB7D2; background: rgba(255,255,255,.07); }

/* =====================================================================================
   v2.94 — NATIVE GLASS REDESIGN · ITEM 3: fluid greeting hero card. The greeting ("AT A
   GLANCE" eyebrow + weather pill + rotating H1 insight + timestamp) becomes ONE compact,
   horizontal frosted-glass card. The day-part colour lives ONLY inside this card (per its
   tod-* class); the page mesh stays neutral. Numbers/names accent = indigo (matches the
   timeline). CSS-only: markup + rotation mechanism unchanged. Appended last to win.
   ===================================================================================== */

/* the card */
html.dm-on .hero{
  position: relative; z-index: 15; overflow: hidden; border: 0;
  margin: 12px 0 0; border-radius: 26px; padding: 17px 18px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.4));
  box-shadow: 0 20px 44px -24px rgba(30,40,80,.4), inset 0 1px 0 rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%);
}
html.dm-on .hero::before, html.dm-on .hero::after{ display: none; }   /* kill the old gold hairline */
html[data-theme="dark"].dm-on .hero{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  box-shadow: 0 22px 48px -26px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1);
}

/* day-part glow — LIGHT (contained inside the card) */
html.dm-on .hero.tod-morning{ background:
  radial-gradient(130% 120% at 92% -10%, rgba(255,196,120,.6), transparent 60%),
  radial-gradient(120% 130% at -8% 120%, rgba(255,224,168,.4), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.4)); }
html.dm-on .hero.tod-afternoon{ background:
  radial-gradient(130% 120% at 92% -10%, rgba(255,206,140,.55), transparent 60%),
  radial-gradient(120% 130% at -8% 120%, rgba(150,196,255,.34), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.4)); }
html.dm-on .hero.tod-evening{ background:
  radial-gradient(130% 120% at 92% -10%, rgba(255,178,138,.6), transparent 60%),
  radial-gradient(120% 130% at -8% 120%, rgba(210,150,205,.42), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.38)); }
html.dm-on .hero.tod-night{ background:
  radial-gradient(130% 120% at 92% -10%, rgba(120,140,235,.5), transparent 60%),
  radial-gradient(120% 130% at -8% 120%, rgba(90,100,190,.4), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.36)); }

/* day-part glow — DARK */
html[data-theme="dark"].dm-on .hero.tod-morning{ background:
  radial-gradient(130% 120% at 92% -10%, rgba(255,196,120,.28), transparent 60%),
  radial-gradient(120% 130% at -8% 120%, rgba(255,214,150,.18), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035)); }
html[data-theme="dark"].dm-on .hero.tod-afternoon{ background:
  radial-gradient(130% 120% at 92% -10%, rgba(255,196,120,.26), transparent 60%),
  radial-gradient(120% 130% at -8% 120%, rgba(96,116,236,.26), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035)); }
html[data-theme="dark"].dm-on .hero.tod-evening{ background:
  radial-gradient(130% 120% at 92% -10%, rgba(255,150,110,.28), transparent 60%),
  radial-gradient(120% 130% at -8% 120%, rgba(190,120,200,.24), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); }
html[data-theme="dark"].dm-on .hero.tod-night{ background:
  radial-gradient(130% 120% at 92% -10%, rgba(120,140,235,.34), transparent 60%),
  radial-gradient(120% 130% at -8% 120%, rgba(80,92,180,.28), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); }

/* greeting content sits flush inside the card */
html.dm-on .hero .dgh{ margin: 0; padding: 0; background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; }

/* top row: eyebrow + weather pill */
html.dm-on .dgh__ebrow{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
html.dm-on .dgh__eyebrow{ margin: 0; font: 700 10.5px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: #7A86A4; }
html[data-theme="dark"].dm-on .dgh__eyebrow{ color: #8A96B4; }

/* weather pill (uses the real wxMeta bootstrap icon) */
html.dm-on .dgh__wx{ flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px;
  border-radius: 14px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.62); box-shadow: 0 6px 14px -8px rgba(20,30,70,.35), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html[data-theme="dark"].dm-on .dgh__wx{ background: rgba(255,255,255,.1); box-shadow: 0 6px 16px -8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12); }
html.dm-on .dgh__wx:active{ transform: scale(.95); }
html.dm-on .dgh__wx i{ font-size: 16px; color: #F5A623; }
html.dm-on .dgh__wx-t{ font: 800 14px/1 var(--font-display); color: #1B2440; }
html[data-theme="dark"].dm-on .dgh__wx-t{ color: #EEF2FB; }

/* rotating H1 insight — compact single-line stage, indigo accent on numbers/names */
html.dm-on .dgh__t{ position: relative; min-height: 30px; overflow: visible; }
html.dm-on .dgh__line{ font: 700 23px/1.16 var(--font-display); letter-spacing: -.02em; color: #0C1430;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-theme="dark"].dm-on .dgh__line{ color: #F3F6FC; }
html.dm-on .dgh__line em{ font-style: normal; background: none; -webkit-background-clip: initial; background-clip: initial; color: #3B4FE3; }
html[data-theme="dark"].dm-on .dgh__line em{ color: #94A4FF; }
html.dm-on .dgh__line b{ color: #3B4FE3; font-weight: 800; }
html[data-theme="dark"].dm-on .dgh__line b{ color: #94A4FF; }

/* timestamp */
html.dm-on .dgh__date{ position: relative; z-index: 2; margin: 10px 0 0; font: 500 13px/1.3 var(--font); color: #69738C; }
html[data-theme="dark"].dm-on .dgh__date{ color: #8E99B4; }
html.dm-on .dgh__dot{ margin: 0 6px; opacity: .5; }

/* =====================================================================================
   v2.95 — greeting polish: buttery rotation + GOLD accent sheen. Fixes the crumpled/cut-off/
   laggy line-swap by moving to a blur-dissolve + drift cross-fade with the stage height
   gliding to each line (no clipping, GPU-composited). Names/figures accent = premium GOLD
   with a swift one-shot sheen sweep each time a line appears. Appended last to win.
   ===================================================================================== */
html.dm-on .dgh__t{ position: relative; overflow: visible; transition: height .55s cubic-bezier(.22,1,.36,1); }
html.dm-on .dgh__line{
  position: absolute; top: 0; left: 0; right: 0; margin: 0;
  font: 700 23px/1.22 var(--font-display); letter-spacing: -.02em; color: #0C1430;
  white-space: normal; overflow: visible; text-overflow: clip;
  opacity: 0; transform: translateY(10px); filter: blur(6px);
  will-change: opacity, transform, filter;
  transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1), filter .6s cubic-bezier(.4,0,.2,1);
}
html[data-theme="dark"].dm-on .dgh__line{ color: #F3F6FC; }
html.dm-on .dgh__line.is-on{ opacity: 1; transform: translateY(0); filter: blur(0); }
html.dm-on .dgh__line.is-out{ display: block; inset: 0 0 auto 0; opacity: 0; transform: translateY(-9px); filter: blur(6px); }
@media (prefers-reduced-motion: reduce){
  html.dm-on .dgh__line{ transition: opacity .3s linear; transform: none; filter: none; }
  html.dm-on .dgh__line.is-on, html.dm-on .dgh__line.is-out{ transform: none; filter: none; }
}

/* GOLD accent + swift one-shot sheen sweep on entry */
html.dm-on .dgh__line em, html.dm-on .dgh__line b{
  font-style: normal; font-weight: 800;
  background: linear-gradient(100deg,#A9791E 0%,#D8A83A 28%,#F6DE8C 50%,#D8A83A 72%,#A9791E 100%);
  background-size: 220% 100%; background-position: 120% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
html[data-theme="dark"].dm-on .dgh__line em, html[data-theme="dark"].dm-on .dgh__line b{
  background: linear-gradient(100deg,#C9962E 0%,#F0CE6A 28%,#FFEDB0 50%,#F0CE6A 72%,#C9962E 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
html.dm-on .dgh__line.is-on em, html.dm-on .dgh__line.is-on b{ animation: dghGoldSweep 1.25s cubic-bezier(.4,0,.2,1) .08s both; }
@keyframes dghGoldSweep{ 0%{ background-position: 120% 0; } 100%{ background-position: -20% 0; } }
@media (prefers-reduced-motion: reduce){
  html.dm-on .dgh__line.is-on em, html.dm-on .dgh__line.is-on b{ animation: none; background-position: 50% 0; }
}

/* =====================================================================================
   v2.96 — NATIVE GLASS REDESIGN · focus ("needs attention") card. The solid dark slab
   becomes a frosted-glass card in the same family as the hero, with a SEMANTIC glow per
   state (red = overdue / amber = due / green = clear). All hooks preserved: odometer
   (data-odo), CTA (data-dfocus-cta), line rotation (.dfocus__line). Appended last to win.
   ===================================================================================== */
html.dm-on .dfocus{
  position: relative; overflow: hidden; isolation: isolate; color: var(--m-ink);
  margin: 14px 0 0; border-radius: 26px; padding: 18px 19px 17px; border: 0;
  -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
}
html.dm-on .dfocus__glow, html.dm-on .dfocus__sheen{ display: none; }   /* glow now lives in the card bg */

/* --- state backgrounds (light) --- */
html.dm-on .dfocus--overdue{
  background: radial-gradient(130% 120% at 88% -12%, rgba(255,84,88,.34), transparent 58%),
              radial-gradient(120% 130% at -12% 120%, rgba(255,150,120,.2), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.42));
  box-shadow: 0 22px 48px -24px rgba(150,30,30,.42), inset 0 1px 0 rgba(255,255,255,.85);
}
html.dm-on .dfocus--due{
  background: radial-gradient(130% 120% at 88% -12%, rgba(245,170,40,.34), transparent 58%),
              radial-gradient(120% 130% at -12% 120%, rgba(255,205,120,.2), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.42));
  box-shadow: 0 22px 48px -24px rgba(150,110,20,.4), inset 0 1px 0 rgba(255,255,255,.85);
}
html.dm-on .dfocus--clear{
  background: radial-gradient(130% 120% at 88% -12%, rgba(30,190,130,.32), transparent 58%),
              radial-gradient(120% 130% at -12% 120%, rgba(120,222,190,.2), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.42));
  box-shadow: 0 22px 48px -24px rgba(20,120,80,.38), inset 0 1px 0 rgba(255,255,255,.85);
}
/* --- state backgrounds (dark) --- */
html[data-theme="dark"].dm-on .dfocus--overdue{
  background: radial-gradient(130% 120% at 88% -12%, rgba(255,82,86,.3), transparent 58%),
              radial-gradient(120% 130% at -12% 120%, rgba(255,120,96,.16), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: 0 24px 52px -26px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1);
}
html[data-theme="dark"].dm-on .dfocus--due{
  background: radial-gradient(130% 120% at 88% -12%, rgba(245,175,50,.28), transparent 58%),
              radial-gradient(120% 130% at -12% 120%, rgba(255,200,110,.14), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: 0 24px 52px -26px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1);
}
html[data-theme="dark"].dm-on .dfocus--clear{
  background: radial-gradient(130% 120% at 88% -12%, rgba(34,200,140,.28), transparent 58%),
              radial-gradient(120% 130% at -12% 120%, rgba(120,222,190,.14), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: 0 24px 52px -26px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1);
}

/* eyebrow + dot (state coloured) */
html.dm-on .dfocus__eyebrow{ font: 700 10.5px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; }
html.dm-on .dfocus--overdue .dfocus__eyebrow{ color: #B23A34; } html[data-theme="dark"].dm-on .dfocus--overdue .dfocus__eyebrow{ color: #FF9E98; }
html.dm-on .dfocus--due .dfocus__eyebrow{ color: #9A6B12; }     html[data-theme="dark"].dm-on .dfocus--due .dfocus__eyebrow{ color: #F0C070; }
html.dm-on .dfocus--clear .dfocus__eyebrow{ color: #0E7A52; }   html[data-theme="dark"].dm-on .dfocus--clear .dfocus__eyebrow{ color: #6EE7B7; }
html.dm-on .dfocus__eyebrow .dot{ width: 7px; height: 7px; border-radius: 50%; }
html.dm-on .dfocus--overdue .dfocus__eyebrow .dot{ background: #F0534B; box-shadow: 0 0 10px rgba(240,83,75,.8); }
html.dm-on .dfocus--due .dfocus__eyebrow .dot{ background: #F0A02A; box-shadow: 0 0 10px rgba(240,160,42,.8); }
html.dm-on .dfocus--clear .dfocus__eyebrow .dot{ background: #1EBE82; box-shadow: 0 0 10px rgba(30,190,130,.8); }

/* the big figure (state coloured, ledger mono, keeps odometer) */
html.dm-on .dfocus__num{ font: 600 38px/1 var(--font-ledger); letter-spacing: -.03em; margin: 12px 0 6px; }
html.dm-on .dfocus--overdue .dfocus__num{ color: #C5271E; } html[data-theme="dark"].dm-on .dfocus--overdue .dfocus__num{ color: #FF6B63; }
html.dm-on .dfocus--due .dfocus__num{ color: #B67912; }     html[data-theme="dark"].dm-on .dfocus--due .dfocus__num{ color: #F5B84A; }
html.dm-on .dfocus--clear .dfocus__num{ color: #0E7A52; }   html[data-theme="dark"].dm-on .dfocus--clear .dfocus__num{ color: #34D399; }

/* supporting line */
html.dm-on .dfocus__lbl{ font: 500 13.5px/1.45 var(--font); color: #5A6478; }
html[data-theme="dark"].dm-on .dfocus__lbl{ color: #AEB7C8; }
html.dm-on .dfocus__lbl b{ font-weight: 700; color: #1B2440; }
html[data-theme="dark"].dm-on .dfocus__lbl b{ color: #FFFFFF; }

/* buttons: primary = solid state gradient, ghost = glass */
html.dm-on .dfocus__cta{ margin-top: 16px; gap: 10px; }
html.dm-on .dfocus__btn{ height: 48px; border: 0; border-radius: 15px; font: 700 13.5px/1 var(--font); letter-spacing: -.01em; box-shadow: none; }
html.dm-on .dfocus__btn--primary{ flex: 1; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
html.dm-on .dfocus--overdue .dfocus__btn--primary{ background: linear-gradient(180deg,#F0534B,#D3352C); color: #fff; box-shadow: 0 12px 24px -10px rgba(211,53,44,.6), inset 0 1px 0 rgba(255,255,255,.3); }
html.dm-on .dfocus--due .dfocus__btn--primary{ background: linear-gradient(180deg,#F2A93C,#D98716); color: #fff; box-shadow: 0 12px 24px -10px rgba(217,135,22,.55), inset 0 1px 0 rgba(255,255,255,.3); }
html.dm-on .dfocus--clear .dfocus__btn--primary{ background: linear-gradient(180deg,#22C98A,#12A06B); color: #fff; box-shadow: 0 12px 24px -10px rgba(18,160,107,.5), inset 0 1px 0 rgba(255,255,255,.3); }
html.dm-on .dfocus__btn--ghost{ flex: 0 0 auto; padding: 0 20px; border: 0;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  background: rgba(255,255,255,.6); color: #3A4152; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
html[data-theme="dark"].dm-on .dfocus__btn--ghost{ background: rgba(255,255,255,.1); color: #EEF2FB; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
html.dm-on .dfocus__btn:active{ transform: scale(.96); }
html.dm-on .dfocus__btn i{ font-size: 16px; }

/* =====================================================================================
   v2.97 — NATIVE GLASS REDESIGN · "Your month" tiles. Every tile becomes frosted glass in
   the same family as the hero/focus card, with a COLOURED DATA ACCENT (icon + figure) for
   identity instead of a heavy fill. The two solid-green tiles (Collected, Money) convert to
   glass + a subtle green glow; ring/bars/streak recolour to read on glass. All wiring kept
   (odometer, data-dwx, ring/bar draw-in). Scoped to html.dm-on .dgrid. Appended last.
   ===================================================================================== */
html.dm-on .dgrid .dtile{
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.4));
  border: 0; border-radius: 20px;
  box-shadow: 0 16px 34px -24px rgba(30,40,80,.34), inset 0 1px 0 rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
}
html[data-theme="dark"].dm-on .dgrid .dtile{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  box-shadow: 0 18px 38px -26px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.09);
}
html.dm-on .dgrid .dtile__val{ color: var(--m-ink); }
html[data-theme="dark"].dm-on .dgrid .dtile__val{ color: #F3F6FC; }
html.dm-on .dgrid .dtile__lbl{ color: #8791A8; }
html.dm-on .dgrid .dtile__sub{ color: var(--m-ink-2); }
html.dm-on .dgrid .dtile__sub b{ color: var(--m-ink); }

/* Outstanding — coral */
html.dm-on .dgrid .dtile--out{ background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.4)); border: 0;
  box-shadow: 0 16px 34px -24px rgba(120,20,15,.3), inset 0 1px 0 rgba(255,255,255,.8); }
html[data-theme="dark"].dm-on .dgrid .dtile--out{ background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  box-shadow: 0 18px 38px -26px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.09); }
html.dm-on .dgrid .dtile--out .dtile__ic{ background: rgba(217,58,47,.12); color: #D93A2F; }
html.dm-on .dgrid .dtile--out .dtile__lbl{ color: #C24A42; }
html.dm-on .dgrid .dtile--out .dtile__val{ color: #C5271E; }
html[data-theme="dark"].dm-on .dgrid .dtile--out .dtile__val{ color: #FF6B63; }

/* Invoiced — blue */
html.dm-on .dgrid .dtile--inv{ background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.4)); border: 0;
  box-shadow: 0 16px 34px -24px rgba(30,40,80,.34), inset 0 1px 0 rgba(255,255,255,.8); }
html[data-theme="dark"].dm-on .dgrid .dtile--inv{ background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  box-shadow: 0 18px 38px -26px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.09); }
html.dm-on .dgrid .dtile--inv .dtile__ic{ background: rgba(46,99,196,.12); color: #2E63C4; }
html.dm-on .dgrid .dtile--inv .dtile__lbl{ color: #3B6BCB; }
html.dm-on .dgrid .dtile--inv .dtile__val{ color: #2E63C4; }
html[data-theme="dark"].dm-on .dgrid .dtile--inv .dtile__val{ color: #8FB0FF; }

/* Collected + Money — glass with a soft green glow, ink text, green figures */
html.dm-on .dgrid .dtile--coll, html.dm-on .dgrid .dtile--money{
  background: radial-gradient(120% 130% at 88% -12%, rgba(30,190,130,.22), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.4));
  color: var(--m-ink); border: 0;
  box-shadow: 0 16px 34px -24px rgba(20,120,80,.34), inset 0 1px 0 rgba(255,255,255,.8);
}
html[data-theme="dark"].dm-on .dgrid .dtile--coll, html[data-theme="dark"].dm-on .dgrid .dtile--money{
  background: radial-gradient(120% 130% at 88% -12%, rgba(34,200,140,.2), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  box-shadow: 0 18px 38px -26px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.09);
}
html.dm-on .dgrid .dtile--coll .dtile__ic, html.dm-on .dgrid .dtile--money .dtile__ic{ background: rgba(18,160,110,.14); color: #12A06E; }
html.dm-on .dgrid .dtile--coll .dtile__lbl, html.dm-on .dgrid .dtile--money .dtile__lbl{ color: #0E8A5C; }
html.dm-on .dgrid .dtile--coll .dtile__val, html.dm-on .dgrid .dtile--money .dtile__val{ color: #0E7A52; }
html[data-theme="dark"].dm-on .dgrid .dtile--coll .dtile__val, html[data-theme="dark"].dm-on .dgrid .dtile--money .dtile__val{ color: #34D399; }
html.dm-on .dgrid .dtile--coll .dtile__sub, html.dm-on .dgrid .dtile--money .dtile__sub{ color: var(--m-ink-2); }
html[data-theme="dark"].dm-on .dgrid .dtile--coll .dtile__sub, html[data-theme="dark"].dm-on .dgrid .dtile--money .dtile__sub{ color: #9AA6C4; }
html.dm-on .dgrid .dtile--money .dtile__coin{ display: none; }

/* accent icon chips for the remaining variants */
html.dm-on .dgrid .dtile--green .dtile__ic{ background: rgba(18,160,110,.12); color: #12A06E; }
html.dm-on .dgrid .dtile--amber .dtile__ic{ background: rgba(240,160,42,.14); color: #D9861A; }
html.dm-on .dgrid .dtile--navy .dtile__ic{ background: rgba(46,99,196,.12); color: #2E63C4; }
html[data-theme="dark"].dm-on .dgrid .dtile--green .dtile__ic{ background: rgba(52,211,153,.14); color: #34D399; }
html[data-theme="dark"].dm-on .dgrid .dtile--amber .dtile__ic{ background: rgba(240,160,42,.16); color: #F0B44E; }
html[data-theme="dark"].dm-on .dgrid .dtile--navy .dtile__ic{ background: rgba(61,110,245,.16); color: #8FB0FF; }

/* progress ring + bars on glass */
html.dm-on .dgrid .dtile__ring .bg{ stroke: rgba(20,30,60,.1); }
html[data-theme="dark"].dm-on .dgrid .dtile__ring .bg{ stroke: rgba(255,255,255,.12); }
html.dm-on .dgrid .dtile__ring .fg{ stroke: #12A06E; }
html.dm-on .dgrid .dtile__ring .rt{ fill: var(--m-ink); }
html[data-theme="dark"].dm-on .dgrid .dtile__ring .rt{ fill: #F3F6FC; }
html.dm-on .dgrid .dbars i{ background: linear-gradient(180deg, #3D6EF5, #2848b0); }

/* =====================================================================================
   v2.98 — NATIVE GLASS REDESIGN · bottom tab bar. Replaces the always-charcoal + gold bar
   with THEME-AWARE frosted glass (light glass in light, dark glass in dark), an INDIGO
   active accent (matches the timeline "now" dot), and an INDIGO gradient FAB with a white
   plus. Gold stays reserved for money figures. Keyed by #app-tabbar; appended last to win.
   Structure/geometry (floating, 58px elevated FAB, speed-dial) unchanged.
   ===================================================================================== */
/* FAB cut-out ring matches the dashboard's base colour */
html.dm-on{ --m-ring-page: #EEF0F8; }
html[data-theme="dark"].dm-on{ --m-ring-page: #0B0E18; }

/* the bar */
#app-tabbar.tabbar{
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 20px 44px -18px rgba(30,40,80,.4), 0 2px 8px -4px rgba(16,24,40,.1), inset 0 1px 0 rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(30px) saturate(185%); backdrop-filter: blur(30px) saturate(185%);
}
html[data-theme="dark"] #app-tabbar.tabbar{
  background: rgba(22,24,30,.6); border-color: rgba(255,255,255,.1);
  box-shadow: 0 24px 54px -18px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.12);
}

/* items — muted, active indigo */
#app-tabbar .tabbar__item,
html[data-theme="dark"] #app-tabbar .tabbar__item{ color: #737C8C; }
html[data-theme="dark"] #app-tabbar .tabbar__item{ color: #838A98; }
#app-tabbar .tabbar__item.is-active,
html[data-theme="dark"] #app-tabbar .tabbar__item.is-active{ color: #4B63FF; }
html[data-theme="dark"] #app-tabbar .tabbar__item.is-active{ color: #93A2FF; }

/* active icon fill + label → indigo (was gilded gold) */
#app-tabbar .tabbar__item.is-active .ni--solid{ fill: #4B63FF; }
html[data-theme="dark"] #app-tabbar .tabbar__item.is-active .ni--solid{ fill: #93A2FF; }
#app-tabbar .tabbar__item.is-active > span:last-child{
  background: none; -webkit-background-clip: initial; background-clip: initial; color: #4B63FF;
}
html[data-theme="dark"] #app-tabbar .tabbar__item.is-active > span:last-child{ color: #93A2FF; }

/* active highlight pill → indigo */
#app-tabbar .tabbar__item.is-active::before{ background: rgba(75,99,255,.12); }
html[data-theme="dark"] #app-tabbar .tabbar__item.is-active::before{ background: rgba(120,140,255,.18); }

/* FAB — indigo gradient + white plus */
#app-tabbar .tabbar__fab,
html[data-theme="dark"] #app-tabbar .tabbar__fab{
  background: linear-gradient(150deg, #6C7CFF 0%, #3D4FE0 96%); color: #fff;
  box-shadow: 0 16px 30px -8px rgba(61,79,224,.6), 0 0 0 5px var(--m-ring-page, #EEF0F8), inset 0 1px 0 rgba(255,255,255,.35);
}
html[data-theme="dark"] #app-tabbar .tabbar__fab{
  box-shadow: 0 16px 30px -8px rgba(61,79,224,.7), 0 0 0 5px var(--m-ring-page, #0B0E18), inset 0 1px 0 rgba(255,255,255,.28);
}
#app-tabbar .tabbar__fab .ni--out{ stroke: #fff; stroke-width: 2.3; }
#app-tabbar .tabbar__fab .ni--solid{ fill: #fff; }
#app-tabbar .tabbar__fab::after{
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,.28) 8%, transparent 44%);
}

/* =====================================================================================
   v2.99 — NATIVE GLASS REDESIGN · enhanced "Needs chasing" + "Recent activity". Chase cards
   gain a profile photo (avatar_url, initials fallback), a detailed status + severity pill, a
   reminder line (cadence + real last/next when the reminders log loads), and circular Call/
   WhatsApp/Email quick-actions beside the indigo Nudge. Stream rows gain a type label. Both
   section headers get an eyebrow + count. Scoped html.dm-on; appended last.
   ===================================================================================== */

/* refined section headers */
html.dm-on .sect__head--rich{ align-items: flex-start; }
html.dm-on .sect__hl{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html.dm-on .sect__eyebrow{ font: 700 10px/1 var(--font-display); letter-spacing: .19em; text-transform: uppercase; color: #8791A8; }
html[data-theme="dark"].dm-on .sect__eyebrow{ color: #7C88A6; }
html.dm-on .sect__eyebrow.gold{ color: #96795A; }
html[data-theme="dark"].dm-on .sect__eyebrow.gold{ color: #C9A96A; }
html.dm-on .msect__title{ display: flex; align-items: center; gap: 9px; }
html.dm-on .sect__count{ font: 700 12px/1 var(--font-display); padding: 3px 9px; border-radius: 20px; background: rgba(217,58,47,.12); color: #C5271E; }
html[data-theme="dark"].dm-on .sect__count{ background: rgba(255,107,99,.16); color: #FF6B63; }

/* chase card — glass + richer layout */
html.dm-on .dchz__card{
  display: block; padding: 15px 16px 14px; border-radius: 22px; border: 0; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.42));
  box-shadow: 0 18px 40px -24px rgba(30,40,80,.34), inset 0 1px 0 rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(26px) saturate(185%); backdrop-filter: blur(26px) saturate(185%);
}
html[data-theme="dark"].dm-on .dchz__card{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  box-shadow: 0 20px 44px -26px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
}
html.dm-on .dchz__row{ display: flex; align-items: center; gap: 13px; }
html.dm-on .dchz__av{ position: relative; width: 50px; height: 50px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
html.dm-on .dchz__ini{ color: #fff; font: 700 16px/1 var(--font-display); }
html.dm-on .dchz__img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.dm-on .dchz__main{ flex: 1; min-width: 0; }
html.dm-on .dchz__name{ display: block; font: 700 16px/1.2 var(--font-display); color: var(--m-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.dm-on .dchz__amt{ display: block; margin-top: 2px; font: 500 12.5px/1.25 var(--font); color: var(--m-ink-3); }
html.dm-on .dchz__amt b{ font-family: var(--font-ledger); font-weight: 600; color: #C5271E; }
html[data-theme="dark"].dm-on .dchz__amt b{ color: #FF6B63; }
html.dm-on .dchz__sev{ flex: 0 0 auto; align-self: flex-start; font: 700 10.5px/1 var(--font-display); letter-spacing: .02em; padding: 5px 10px; border-radius: 20px; white-space: nowrap; }
html.dm-on .dchz__sev.hi{ background: rgba(217,58,47,.13); color: #C5271E; }
html[data-theme="dark"].dm-on .dchz__sev.hi{ background: rgba(255,107,99,.18); color: #FF8983; }
html.dm-on .dchz__sev.mid{ background: rgba(240,160,42,.16); color: #B67912; }
html[data-theme="dark"].dm-on .dchz__sev.mid{ background: rgba(245,184,74,.18); color: #F5B84A; }

/* reminder line */
html.dm-on .dchz__remind{ display: flex; align-items: center; gap: 7px; margin: 12px 0 0; padding: 8px 11px; border-radius: 12px; font: 600 12px/1.3 var(--font); background: rgba(75,99,255,.08); color: #3D4FE0; }
html[data-theme="dark"].dm-on .dchz__remind{ background: rgba(120,140,255,.12); color: #93A2FF; }
html.dm-on .dchz__remind i{ font-size: 13px; flex: 0 0 auto; }

/* circular quick-actions + nudge */
html.dm-on .dchz__acts{ display: flex; align-items: center; gap: 9px; margin-top: 13px; }
html.dm-on .dchz__qa{ width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 17px; cursor: pointer; text-decoration: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  background: rgba(255,255,255,.7); box-shadow: 0 6px 14px -8px rgba(20,30,70,.3), inset 0 1px 0 rgba(255,255,255,.9); }
html[data-theme="dark"].dm-on .dchz__qa{ background: rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
html.dm-on .dchz__qa:active{ transform: scale(.92); }
html.dm-on .dchz__qa--call{ color: #2E63C4; } html[data-theme="dark"].dm-on .dchz__qa--call{ color: #8FB0FF; }
html.dm-on .dchz__qa--wa{ color: #12A06E; }   html[data-theme="dark"].dm-on .dchz__qa--wa{ color: #34D399; }
html.dm-on .dchz__qa--mail{ color: #B67912; } html[data-theme="dark"].dm-on .dchz__qa--mail{ color: #F5B84A; }
html.dm-on .dchz__nudge{ margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 11px 18px; border: 0; border-radius: 13px; color: #fff; font: 700 13.5px/1 var(--font); cursor: pointer;
  background: linear-gradient(180deg, #5B6CFF, #3D4FE0); box-shadow: 0 10px 20px -8px rgba(61,79,224,.5), inset 0 1px 0 rgba(255,255,255,.3); }
html.dm-on .dchz__nudge i{ font-size: 14px; }
html.dm-on .dchz__nudge:active{ transform: scale(.96); }

/* transaction type label */
html.dm-on .mtxn__type{ font-weight: 700; color: var(--m-ink-2); }

/* =====================================================================================
   v3.00 — INVOICE CREATE/EDIT as a premium 4-step flow (shared: phone + PC). Progressive
   enhancement over the existing .ive form: every field ID/logic is unchanged; JS folds the
   sections into steps. Adds the invoice-type toggle (Vehicle/Machinery ↔ Parking/Rental)
   and the parking line fields. Scoped to .ive so no other screen is affected.
   ===================================================================================== */
.ive--wiz .ive__prog{ display:flex; gap:5px; margin:12px 2px 18px; }
.ive--wiz .ive__prog i{ flex:1; height:5px; border-radius:3px; background:rgba(10,31,68,.12); transition:background .3s ease; }
.ive--wiz .ive__prog i.on{ background:linear-gradient(90deg,#5B6CFF,#3D4FE0); }
html[data-theme="dark"] .ive--wiz .ive__prog i{ background:rgba(255,255,255,.14); }

.ive--wiz.is-wiz .ive__step[hidden]{ display:none; }
.ive--wiz.is-wiz .ive__step{ animation:iveStepIn .3s cubic-bezier(.22,1,.36,1); }
@keyframes iveStepIn{ from{ opacity:0; transform:translateX(12px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .ive--wiz.is-wiz .ive__step{ animation:none; } }

/* invoice-type toggle */
.ive__type{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:2px 0 20px; }
.ive__typeb{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:14px; border-radius:16px;
  border:1.5px solid var(--hair); background:var(--surface); cursor:pointer; text-align:left; transition:border-color .2s, background .2s; }
.ive__typeb-ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:20px;
  background:rgba(75,99,255,.1); color:#3D4FE0; margin-bottom:4px; }
.ive__typeb-t{ font:700 15px/1.15 var(--font-display,Inter,sans-serif); color:var(--ink); }
.ive__typeb-d{ font:500 11px/1.25 var(--font-ui,Inter,sans-serif); color:var(--ink3); }
.ive__typeb.is-on{ border-color:#5B6CFF; background:rgba(75,99,255,.07); }
.ive__typeb.is-on .ive__typeb-ic{ background:linear-gradient(150deg,#6C7CFF,#3D4FE0); color:#fff; }
html[data-theme="dark"] .ive__typeb{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); }
html[data-theme="dark"] .ive__typeb-t{ color:#F3F6FC; }

/* parking vs vehicle line fields (toggled by the root .ive--parking class) */
.inv-item__parking{ display:none; }
.ive--parking .inv-item__vehicle{ display:none; }
.ive--parking .inv-item__parking{ display:block; }
.inv-item__prow{ display:flex; gap:9px; }
.inv-item__prow > *{ flex:1; min-width:0; }

/* sticky wizard footer */
.ive--wiz .ive__wizbar{ position:sticky; bottom:0; z-index:5; display:flex; align-items:center; gap:10px;
  margin:18px -16px 0; padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg, rgba(255,255,255,0), var(--surface) 34%);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
html[data-theme="dark"] .ive--wiz .ive__wizbar{ background:linear-gradient(180deg, rgba(10,13,24,0), rgba(10,13,24,.92) 34%); }
.ive__navback{ flex:0 0 auto; height:50px; padding:0 20px; border:0; border-radius:14px; cursor:pointer;
  font:700 14.5px/1 var(--font-display,Inter,sans-serif); background:rgba(10,31,68,.06); color:var(--ink2); }
html[data-theme="dark"] .ive__navback{ background:rgba(255,255,255,.08); color:#CBD4EC; }
.ive__navnext{ flex:1; height:50px; border:0; border-radius:14px; cursor:pointer; color:#fff;
  font:700 15px/1 var(--font-display,Inter,sans-serif); display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(150deg,#6C7CFF,#3D4FE0); box-shadow:0 12px 24px -10px rgba(61,79,224,.6), inset 0 1px 0 rgba(255,255,255,.3); }
.ive--wiz .ive__wizbar #inv-save{ flex:1; }
.ive--wiz .ive__wizbar #inv-save[hidden], .ive__navnext[hidden], .ive__navback[hidden]{ display:none; }

/* review step */
.ivw-review{ display:flex; flex-direction:column; gap:11px; }
.ivw-rc{ border-radius:16px; padding:14px 15px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--hair); }
html[data-theme="dark"] .ivw-rc{ background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.ivw-rl{ display:flex; justify-content:space-between; gap:12px; font:500 13px/1.4 var(--font-ui,Inter,sans-serif); margin-bottom:8px; }
.ivw-rl:last-child{ margin-bottom:0; }
.ivw-rl span:first-child{ color:var(--ink3); }
.ivw-rl span:last-child{ color:var(--ink); font-weight:600; text-align:right; }
.ivw-ritem{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--hair); font-size:13px; }
.ivw-ritem:first-child{ border-top:0; }
.ivw-ritem b{ color:var(--ink); font-weight:600; } .ivw-ritem .amt{ font-family:var(--font-ledger,monospace); color:var(--ink); }
.ivw-rc__h{ font:700 10px/1 var(--font-ui,Inter,sans-serif); letter-spacing:.13em; text-transform:uppercase; color:var(--ink3); margin:0 0 10px; }

/* v3.0.2 — an open customer/searchable dropdown must escape the card (which is overflow:hidden
   for its rounded corners). Only lift the clip while a panel is actually open. */
.ive__card:has(.hm-select__panel.is-open){ overflow: visible; position: relative; z-index: 40; }

/* =====================================================================================
   v3.1.0 — INVOICE DETAIL as one premium glass "document" sheet + floating action dock.
   Phone-only viewer (desktop opens the editor). Scoped to .ivx. Uses --m-* tokens (flip in
   dark) plus explicit glass values. Replaces the stacked ivx-top/ivx-card layout.
   ===================================================================================== */
.dm.ivx{
  background:
    radial-gradient(90% 20% at 82% 0%, rgba(140,164,255,.28), transparent 60%),
    radial-gradient(80% 16% at 4% 5%, rgba(198,150,255,.18), transparent 60%),
    linear-gradient(180deg, #EEF0F8, #E9EBF4);
}
html[data-theme="dark"] .dm.ivx{
  background:
    radial-gradient(90% 20% at 82% 0%, rgba(96,116,236,.28), transparent 60%),
    radial-gradient(80% 16% at 4% 5%, rgba(150,96,240,.16), transparent 60%),
    linear-gradient(180deg, #0A0D18, #070910);
}
.ivx .ivx__nav{ background: transparent; border: 0; box-shadow: none; }
.ivx .ivx__no{ font-family: var(--font-ledger, "IBM Plex Mono", monospace); font-weight: 600; letter-spacing: -.01em; }

/* the document sheet */
.ivx .ivx-sheet{ position: relative; border-radius: 26px; overflow: hidden; --tone: 120,140,255;
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.48));
  box-shadow: 0 26px 54px -26px rgba(30,40,80,.4), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(30px) saturate(188%); backdrop-filter: blur(30px) saturate(188%); }
html[data-theme="dark"] .ivx .ivx-sheet{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: 0 28px 60px -28px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.09); }
.ivx-sheet--overdue{ --tone: 217,58,47; }
.ivx-sheet--due{ --tone: 217,134,26; }
.ivx-sheet--paid{ --tone: 18,160,110; }
.ivx-sheet--pending{ --tone: 75,99,255; }
.ivx-sheet--cancelled,.ivx-sheet--draft{ --tone: 130,138,160; }
.ivx-sheet__glow{ position: absolute; inset: 0 0 auto 0; height: 160px; pointer-events: none;
  background: radial-gradient(90% 130% at 50% -30%, rgba(var(--tone),.17), transparent 62%); }

.ivx-sheet__top{ position: relative; padding: 20px 20px 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ivx-sheet__lbl{ font: 600 12px/1 var(--font-ui, Inter, sans-serif); color: var(--m-ink-3); }
.ivx-sheet__amt{ margin-top: 6px; font-family: var(--font-ledger, "IBM Plex Mono", monospace); font-weight: 600; font-size: 36px; letter-spacing: -.03em; line-height: 1; color: var(--m-ink); }
.ivx-sheet--overdue .ivx-sheet__amt{ color: #C5271E; } html[data-theme="dark"] .ivx-sheet--overdue .ivx-sheet__amt{ color: #FF6B63; }
.ivx-sheet--due .ivx-sheet__amt{ color: #B67912; } html[data-theme="dark"] .ivx-sheet--due .ivx-sheet__amt{ color: #F5B84A; }
.ivx-sheet--paid .ivx-sheet__amt{ color: #0E7A52; } html[data-theme="dark"] .ivx-sheet--paid .ivx-sheet__amt{ color: #34D399; }
.ivx-sheet__meta{ margin-top: 9px; font: 500 12px/1.3 var(--font-ui, Inter, sans-serif); color: var(--m-ink-3); }
.ivx-sheet__div{ height: 1px; margin: 0 20px; background: var(--m-hair); }

.ivx-sheet__party{ position: relative; padding: 14px 20px; display: flex; align-items: center; gap: 12px; }
.ivx-sheet__party .ivx-av,.ivx-sheet__party .dm__av{ flex: 0 0 auto; }
.ivx-party__name{ font: 700 15px/1.2 var(--font-display, Inter, sans-serif); color: var(--m-ink); }
.ivx-party__sub{ font: 500 12px/1.35 var(--font-ui, Inter, sans-serif); color: var(--m-ink-3); margin-top: 2px; }

.ivx .ivx-items{ padding: 6px 20px 2px; }
.ivx .ivx-item{ display: flex; align-items: center; gap: 11px; padding: 9px 0; border: 0; }
.ivx .ivx-item__ic{ width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; display: grid; place-items: center; font-size: 15px; background: rgba(75,99,255,.1); color: #3D4FE0; }
html[data-theme="dark"] .ivx .ivx-item__ic{ background: rgba(120,140,255,.16); color: #93A2FF; }
.ivx .ivx-item__main{ flex: 1; min-width: 0; }
.ivx .ivx-item__desc{ font: 600 13.5px/1.25 var(--font-ui, Inter, sans-serif); color: var(--m-ink); }
.ivx .ivx-item__qty{ font-family: var(--font-ledger, "IBM Plex Mono", monospace); font-size: 11px; color: var(--m-ink-3); margin-top: 2px; }
.ivx .ivx-item__amt{ font-family: var(--font-ledger, "IBM Plex Mono", monospace); font-weight: 600; font-size: 13.5px; color: var(--m-ink); flex: 0 0 auto; }

.ivx .ivx-tot{ padding: 12px 20px 18px; }
.ivx .ivx-tot__row{ display: flex; justify-content: space-between; font: 500 12.5px/1 var(--font-ui, Inter, sans-serif); color: var(--m-ink-3); margin-bottom: 8px; }
.ivx .ivx-tot__row span:last-child{ font-family: var(--font-ledger, "IBM Plex Mono", monospace); font-weight: 600; color: var(--m-ink-2); }
.ivx .ivx-tot__row--paid span:last-child{ color: #0E7A52; } html[data-theme="dark"] .ivx .ivx-tot__row--paid span:last-child{ color: #34D399; }
.ivx .ivx-tot__row--total{ margin: 9px 0 0; padding-top: 10px; border-top: 1px dashed var(--m-hair-2, rgba(20,30,60,.16)); color: var(--m-ink); }
.ivx .ivx-tot__row--total span{ font-weight: 800 !important; }
.ivx .ivx-tot__row--total span:last-child{ color: var(--m-ink); font-size: 16px; }
.ivx-sheet--overdue .ivx-tot__row--total, .ivx-sheet--overdue .ivx-tot__row--total span:last-child{ color: #C5271E; }
html[data-theme="dark"] .ivx-sheet--overdue .ivx-tot__row--total, html[data-theme="dark"] .ivx-sheet--overdue .ivx-tot__row--total span:last-child{ color: #FF6B63; }

.ivx-sheet__notes{ padding: 14px 20px 18px; font: 500 13px/1.5 var(--font-ui, Inter, sans-serif); color: var(--m-ink-2); }
.ivx-sheet__noteh{ display: block; font: 700 10px/1 var(--font-ui, Inter, sans-serif); letter-spacing: .13em; text-transform: uppercase; color: var(--m-ink-3); margin-bottom: 7px; }

/* floating action dock (in-flow, above the tab bar via scroll padding) */
.ivx .ivx-dock{ display: flex; align-items: center; gap: 9px; margin-top: 4px; padding: 9px; border-radius: 22px;
  position: sticky; bottom: 8px; z-index: 6;
  background: rgba(255,255,255,.66); box-shadow: 0 20px 44px -18px rgba(30,40,80,.44), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(30px) saturate(185%); backdrop-filter: blur(30px) saturate(185%); }
html[data-theme="dark"] .ivx .ivx-dock{ background: rgba(22,24,30,.7); box-shadow: 0 22px 50px -18px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.1); }
.ivx-dock__pay{ flex: 1; height: 50px; border: 0; border-radius: 15px; color: #fff; cursor: pointer;
  font: 700 14.5px/1 var(--font-display, Inter, sans-serif); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(150deg, #6C7CFF, #3D4FE0); box-shadow: 0 12px 22px -10px rgba(61,79,224,.6), inset 0 1px 0 rgba(255,255,255,.3); }
.ivx-dock__c{ width: 50px; height: 50px; flex: 0 0 auto; border: 0; border-radius: 15px; display: grid; place-items: center; font-size: 18px; cursor: pointer;
  background: rgba(255,255,255,.7); color: #3B4664; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
html[data-theme="dark"] .ivx-dock__c{ background: rgba(255,255,255,.09); color: #CBD4EC; }
.ivx-dock__c--wa{ color: #1AA457; } html[data-theme="dark"] .ivx-dock__c--wa{ color: #57E191; }
.ivx-dock__pay:active,.ivx-dock__c:active{ transform: scale(.96); }

/* =====================================================================================
   v3.2.0 — INDIGO ACTION SYSTEM (global). Pushes the Native Glass 2026 indigo accent
   (§4.7) into every remaining dark/charcoal button, active state and modal across the
   inner screens — both light + dark, phone + desktop where shared. Append-only; every
   ID and JS hook is untouched (pure restyle). Indigo values reuse the exact tokens
   already shipped in the .ivx / .ive / #app-tabbar blocks so the whole app is one system.
   Rule of the system: INDIGO = navigation / primary / active / interactive.
   GOLD stays reserved for money & names. Coral = destructive. Green/amber unchanged.
   ===================================================================================== */

/* ---- indigo action tokens ---------------------------------------------------------- */
:root{
  --ind:#4B63FF; --ind-2:#3D4FE0;
  --ind-grad:linear-gradient(150deg,#6C7CFF,#3D4FE0);
  --ind-soft:rgba(75,99,255,.10); --ind-soft-2:rgba(75,99,255,.15);
  --ind-glow:0 14px 30px -12px rgba(61,79,224,.55);
  --coral-grad:linear-gradient(150deg,#F0574C,#C5271E);
  --coral-glow:0 14px 30px -12px rgba(197,39,30,.5);
}
html[data-theme="dark"]{
  --ind:#93A2FF; --ind-2:#6C7CFF;
  --ind-soft:rgba(129,144,255,.16); --ind-soft-2:rgba(129,144,255,.22);
  --ind-glow:0 14px 30px -12px rgba(70,85,232,.5);
  --coral-grad:linear-gradient(150deg,#FF7C74,#E04A40);
}
/* NB: --ind-grad stays the same mid-indigo fill in both themes (matches the shipped
   .ivx-dock / tab-bar FAB), with white label — one consistent indigo button everywhere. */

/* ---- global buttons (shared phone + desktop) --------------------------------------- */
.btn-ios-primary{
  background:var(--ind-grad)!important; color:#fff!important;
  box-shadow:0 1px 2px rgba(20,26,60,.18), var(--ind-glow)!important;
}
.btn-ios-primary:hover{ color:#fff!important; filter:saturate(1.05) brightness(1.02); }
.btn-ios-primary:disabled{ opacity:.5; }
.btn-ios-secondary{ color:var(--ind)!important; }
.btn-ios-secondary:hover{ color:var(--ind)!important; }
.btn-ios-ghost{ color:var(--ind)!important; }
.btn-ios-ghost:hover{ background:var(--ind-soft)!important; }
.btn-ios-danger{ background:var(--coral-grad)!important; color:#fff!important; box-shadow:var(--coral-glow)!important; }
.btn-ios-danger:hover{ color:#fff!important; filter:brightness(1.03); }
@media (max-width:767.98px){ .modal-footer > .btn-ios-danger{ width:100%; justify-content:center; padding:13px 16px; } }

/* ---- generic modal → premium glass sheet (beats the runtime-injected .hm-modal) ---- */
.modal-content.hm-modal{
  background:
    radial-gradient(84% 90px at 50% 0, var(--ind-soft), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.56)) !important;
  border:1px solid rgba(255,255,255,.7)!important;
  box-shadow:0 26px 64px -26px rgba(30,40,80,.42), inset 0 1px 0 rgba(255,255,255,.92)!important;
  -webkit-backdrop-filter:blur(30px) saturate(190%); backdrop-filter:blur(30px) saturate(190%);
}
html[data-theme="dark"] .modal-content.hm-modal{
  background:
    radial-gradient(84% 90px at 50% 0, var(--ind-soft), transparent 72%),
    linear-gradient(180deg, rgba(32,36,48,.86), rgba(22,26,36,.8)) !important;
  border-color:rgba(255,255,255,.1)!important;
  box-shadow:0 26px 64px -28px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.modal-content.hm-modal .modal-header{ border-bottom:0!important; padding:14px 20px 2px!important; }
.modal-content.hm-modal .modal-title{ font:800 22px/1.12 var(--font-display,"Inter Tight",sans-serif)!important; letter-spacing:-.03em; color:var(--m-ink,var(--ink,#0A1F44)); }
html[data-theme="dark"] .modal-content.hm-modal .modal-title{ color:#EAEEF9; }
.modal-content.hm-modal .modal-footer{ border-top:0!important; }
/* frosted round close */
.modal-content.hm-modal .btn-close{ width:34px; height:34px; border-radius:50%; opacity:.85;
  background-color:rgba(10,31,68,.06); background-position:center; background-size:13px 13px;
  transition:background-color .15s var(--ease), transform .1s var(--ease); }
.modal-content.hm-modal .btn-close:hover{ background-color:var(--ind-soft); opacity:1; }
.modal-content.hm-modal .btn-close:active{ transform:scale(.92); }
html[data-theme="dark"] .modal-content.hm-modal .btn-close{ background-color:rgba(255,255,255,.08); filter:invert(1) grayscale(1) brightness(1.7); }

/* confirm() → centered icon dialog (JS adds .hm-confirm / .hm-confirm--danger + body markup) */
.hm-modal.hm-confirm .modal-header{ display:none!important; }
.hm-modal.hm-confirm .modal-body{ text-align:center; padding-top:24px!important; }
.hm-cf__ic{ width:62px; height:62px; border-radius:19px; display:grid; place-items:center; margin:0 auto 15px;
  font-size:27px; color:#fff; background:var(--ind-grad); box-shadow:var(--ind-glow); }
.hm-cf__ic.hm-cf__ic--danger{ background:var(--coral-grad); box-shadow:var(--coral-glow); }
.hm-cf__ttl{ font:800 22px/1.14 var(--font-display,"Inter Tight",sans-serif); letter-spacing:-.03em; color:var(--m-ink,var(--ink,#0A1F44)); margin:0 0 8px; }
.hm-cf__msg{ font:500 14px/1.5 var(--font-ui,Inter,sans-serif); color:var(--m-ink-2,var(--text-secondary,#4A5878)); margin:0; }
html[data-theme="dark"] .hm-cf__ttl{ color:#EAEEF9; } html[data-theme="dark"] .hm-cf__msg{ color:#A6B2CC; }

/* ---- customer form modal → indigo CTA + theme-aware glass card --------------------- */
.hm-modal:has(#hm-cust-form) .modal-footer .btn-ios-primary{
  background:var(--ind-grad)!important; color:#fff!important;
  box-shadow:0 1px 2px rgba(20,26,60,.18), var(--ind-glow)!important; }
html[data-theme="dark"] .hm-modal:has(#hm-cust-form){ --ink:#EAEEF9; --ink3:#8A96B0; --hair:rgba(255,255,255,.1); }
html[data-theme="dark"] #hm-cust-form.hm-form-grid{ background:rgba(255,255,255,.04)!important; border-color:rgba(255,255,255,.09)!important; box-shadow:none!important; }
html[data-theme="dark"] #hm-cust-form .form-control{ background:rgba(255,255,255,.06)!important; color:#EAEEF9!important; }
html[data-theme="dark"] #hm-cust-form .form-control::placeholder{ color:#6F7C99!important; }
html[data-theme="dark"] .hm-modal:has(#hm-cust-form) .modal-footer .btn-ios-secondary{ background:rgba(255,255,255,.06)!important; color:#EAEEF9!important; border-color:rgba(255,255,255,.12)!important; }

/* =====================================================================================
   Inner-screen CTAs / rounds → indigo (phone, html.dm-on). White label in both themes.
   ===================================================================================== */
html.dm-on .pv-rec,
html.dm-on .ndg__all,
html.dm-on .ndg__btn--mail,
html.dm-on .ndg__cbtn--p,
html.dm-on .pdx__btn--p,
html.dm-on .dxs__btn--p,
html.dm-on .et-pv__edit,
html.dm-on .avd__open,
html.dm-on .chs__btn--p,
html.dm-on .mts-cta,
html.dm-on .dchz__nudge,
html.dm-on .mchase__round--solid,
html.dm-on .minv .swipe__act--send,
html.dm-on .act-new button,
html.dm-on .stx-body .btn-ios-primary,
html.dm-on .stx-page .set-savebar .btn-ios-primary{
  background:var(--ind-grad)!important; color:#fff!important; border-color:transparent!important;
  box-shadow:var(--ind-glow)!important;
}
html.dm-on .pv-rec{ box-shadow:0 8px 18px -7px rgba(61,79,224,.55)!important; }

/* record payment CTA (both devices — beats the v2.88 charcoal-gold !important) */
.rec__go{ background:var(--ind-grad)!important; color:#fff!important;
  box-shadow:0 14px 26px -12px rgba(61,79,224,.5), inset 0 1px 0 rgba(255,255,255,.28)!important; }
.rec__go:hover:not(:disabled){ box-shadow:0 18px 32px -12px rgba(61,79,224,.58), inset 0 1px 0 rgba(255,255,255,.3)!important; }
.rec__chip.is-on, .rec #rec-chips .is-on{ background:var(--ind-soft)!important; color:var(--ind)!important; border-color:var(--ind-soft-2)!important; }

/* =====================================================================================
   Inner-screen ACTIVE states (chips / tabs / segmented / badges) → indigo
   ===================================================================================== */
html.dm-on .pv-range.is-on,
html.dm-on .pvchip.is-on,
html.dm-on .av-chip.is-on,
html.dm-on .um-role--adm,
html.dm-on .ums__chip--adm{
  background:var(--ind-grad)!important; color:#fff!important; border-color:transparent!important;
}
html.dm-on .ums__segb.is-on{
  background:var(--ind-grad)!important; color:#fff!important;
  box-shadow:0 2px 8px -2px rgba(61,79,224,.55)!important;
}
html.dm-on .itab.is-active .itab__n{ background:var(--ind-grad)!important; color:#fff!important; }
html.dm-on .itab.is-active::after{ background:var(--ind)!important; }

/* email templates — selected row accent → indigo */
html.dm-on .et-row.is-sel::before{ background:var(--ind)!important; }
html.dm-on .et-row.is-sel .et-row__ico{ background:var(--ind-grad)!important; color:#fff!important; }

/* loading spinner accent → indigo */
html.dm-on .spinner-mobile, html.dm-on .dm-spin{ border-top-color:var(--ind)!important; }

/* =====================================================================================
   "All sections" grid menu — active tile charcoal-gold → indigo (beats v2.89 !important).
   Also drop the gold chrome hairline (gold is money-only now) for a clean indigo sheet.
   ===================================================================================== */
.appmenu__tile.is-active{
  border-color:transparent!important;
  background:radial-gradient(120% 130% at 85% 0%, #7C8CFF, transparent 60%), var(--ind-grad)!important;
  box-shadow:0 18px 34px -16px rgba(61,79,224,.55), inset 0 1px 0 rgba(255,255,255,.25)!important;
  color:#fff!important;
}
.appmenu__tile.is-active .appmenu__ico{ background:rgba(255,255,255,.18)!important; color:#fff!important; }
.appmenu__tile.is-active .appmenu__lbl{ color:#fff!important; }
/* dark needs higher specificity than `html[data-theme="dark"] .appmenu__tile` base */
html[data-theme="dark"] .appmenu__tile.is-active{
  border-color:transparent!important;
  background:radial-gradient(120% 130% at 85% 0%, #7C8CFF, transparent 60%), var(--ind-grad)!important;
  box-shadow:0 18px 34px -16px rgba(61,79,224,.5), inset 0 1px 0 rgba(255,255,255,.2)!important; color:#fff!important;
}
html[data-theme="dark"] .appmenu__tile.is-active .appmenu__ico{ background:rgba(255,255,255,.18)!important; color:#fff!important; }
.appmenu__sheet::after{ background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent)!important; }
html[data-theme="dark"] .appmenu__sheet::after{ background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent)!important; }

/* =====================================================================================
   v3.2.1 — SEAMLESS HEADER TOP. The frosted header used to start at .96 opacity, so the
   backdrop-blur pulled the mesh through at the very top and it read a hair different from
   the flat OS status-bar colour (theme-color) → a faint edge under the notch. Fix: the top
   of the header is now a FLAT colour identical to theme-color (--hdr-top = #EEF0F8 / #0B0E18),
   held opaque across the safe-area, then the frosted glass fades in below. An opaque ::before
   caps the exact safe-area height so tall-notch phones are flat too. Glass is kept (the
   header stays translucent + blurred below the cap, and frosts content on scroll). Light+dark.
   ===================================================================================== */
html.dm-on{ --hdr-top:#EEF0F8; }
html[data-theme="dark"].dm-on{ --hdr-top:#0B0E18; }

html.dm-on .hdr{
  background:
    linear-gradient(180deg,
      var(--hdr-top) 0%,
      var(--hdr-top) 46%,
      rgba(241,243,251,.60) 74%,
      rgba(255,255,255,.40) 100%);
  box-shadow: 0 14px 34px -24px rgba(30,40,80,.32);
}
html[data-theme="dark"].dm-on .hdr{
  background:
    linear-gradient(180deg,
      var(--hdr-top) 0%,
      var(--hdr-top) 46%,
      rgba(18,21,30,.58) 74%,
      rgba(20,23,32,.42) 100%);
  box-shadow: 0 14px 40px -24px rgba(0,0,0,.66);
}
/* opaque cap over the exact safe-area (env in a length is reliable) → dead-flat notch blend */
html.dm-on .hdr::before{
  content:""; position:absolute; left:0; right:0; top:0;
  height: calc(env(safe-area-inset-top,0px) + 10px);
  background: var(--hdr-top); pointer-events:none; z-index:0;
}
html.dm-on .hdr > *{ position:relative; z-index:1; }

/* scrolled: still frosts content underneath, same seamless flat top */
html.dm-on .dm.is-scrolled .hdr{
  background:
    linear-gradient(180deg,
      var(--hdr-top) 0%,
      var(--hdr-top) 30%,
      rgba(241,243,251,.66) 66%,
      rgba(255,255,255,.46) 100%);
}
html[data-theme="dark"].dm-on .dm.is-scrolled .hdr{
  background:
    linear-gradient(180deg,
      var(--hdr-top) 0%,
      var(--hdr-top) 30%,
      rgba(18,21,30,.60) 66%,
      rgba(20,23,32,.46) 100%);
}

/* =====================================================================================
   v3.2.2 — CINEMATIC SPLASH. Replaces the static logo+spinner in #app-splash with an
   onyx, 120fps-ready opening: the glossy monogram blooms in, the headline reveals
   letter-by-letter (liquid pop), then the footer credit fades up. Pure compositor
   animation (transform/opacity/filter only). Honours prefers-reduced-motion. The boot
   handoff is unchanged; app.js hideSplash() adds a minimum-display gate so it completes.
   ===================================================================================== */
.app-splash{
  /* v3.8.6 — was a five-stop onyx mesh. Flattened to the app's own page colour so the
     whole launch chain is one colour; the `#app-splash` id rule below sets it too, but
     this `!important` class rule would otherwise be the thing that comes back to bite
     anyone who ever removes the id rule. */
  background: #FFFFFF !important;
  transition: opacity .5s ease;
}
html[data-theme="dark"] .app-splash{ background: #000000 !important; }
.app-splash .spl{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; }
/* v3.8.6 — the `.spl` glow + vignette overlays that used to sit here are DELETED. The
   shipping markup is `.spl2` (see index.html), so they were dead rules, but they were
   mesh gradients keyed to a splash generation we no longer use and would have come back
   the moment anyone reintroduced a `.spl` wrapper. */
.spl__logo{ position:relative; z-index:2; width:84px; height:84px;
  filter:drop-shadow(0 20px 42px rgba(76,99,255,.55));
  opacity:0; transform:scale(.8); animation:splLogoIn .8s cubic-bezier(.2,.8,.2,1) .18s both; }
.spl__logo svg{ width:100%; height:100%; display:block; }
.spl__tag{ position:relative; z-index:2; margin-top:26px; max-width:290px; text-align:center;
  font-family:var(--font-display,'Inter Tight',sans-serif); font-weight:600; font-size:25px; line-height:1.32; letter-spacing:-.012em; color:#F3F5FC; }
.spl__w{ display:inline-block; white-space:nowrap; }
.spl__l{ display:inline-block; opacity:0; will-change:transform,opacity,filter;
  animation:splLetterIn .56s cubic-bezier(.22,1.1,.36,1) both; animation-delay:calc(var(--i) * 34ms + 480ms); }
.spl__foot{ position:absolute; left:0; right:0; bottom:calc(34px + env(safe-area-inset-bottom,0px)); z-index:2;
  text-align:center; padding:0 34px; font:500 11px/1.5 var(--font-ui,Inter,sans-serif); letter-spacing:.02em; color:#7A8296;
  opacity:0; animation:splFootIn .8s ease both; animation-delay:2250ms; }
@keyframes splLogoIn{ 0%{opacity:0;transform:scale(.78) translateY(6px);filter:blur(4px)} 100%{opacity:1;transform:scale(1) translateY(0);filter:blur(0)} }
@keyframes splLetterIn{ 0%{opacity:0;transform:translateY(.44em) scale(.7);filter:blur(6px)} 55%{opacity:1;filter:blur(0)} 72%{transform:translateY(-.05em) scale(1.05)} 100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)} }
@keyframes splFootIn{ 0%{opacity:0;transform:translateY(6px)} 100%{opacity:.9;transform:translateY(0)} }
@media (prefers-reduced-motion: reduce){
  .spl__l,.spl__logo,.spl__foot{ animation-duration:.01ms!important; animation-delay:0ms!important; opacity:1; transform:none; filter:none; }
  .spl__foot{ opacity:.9; }
}

/* =====================================================================================
   v3.2.3 — PARKING & RENTALS section (.pk). Recurring-billing UI in the indigo system.
   Component-scoped (both devices, §4.8); local --pk-* tokens map ink/surface/glass per
   theme; reuses --ind / --ind-grad / --ind-soft / --coral / --coral-grad from v3.2.0.
   ===================================================================================== */
.pk{ max-width:720px; margin:0 auto; padding:0 0 calc(40px + env(safe-area-inset-bottom,0px));
  --pk-ink:#0A1F44; --pk-ink2:#4A5878; --pk-ink3:#7C879C; --pk-surf2:#F2F3F8; --pk-line:rgba(10,31,68,.09);
  --pk-glass:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.48)); --pk-brd:rgba(255,255,255,.7);
  --pk-lift:0 20px 46px -24px rgba(30,40,80,.34); --pk-inset:inset 0 1px 0 rgba(255,255,255,.9); }
html[data-theme="dark"] .pk{ --pk-ink:#EAEEF9; --pk-ink2:#A6B2CC; --pk-ink3:#6F7C99; --pk-surf2:#1A2032; --pk-line:rgba(255,255,255,.10);
  --pk-glass:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035)); --pk-brd:rgba(255,255,255,.12);
  --pk-lift:0 22px 52px -26px rgba(0,0,0,.6); --pk-inset:inset 0 1px 0 rgba(255,255,255,.09); }
.pk-glass{ background:var(--pk-glass); border:1px solid var(--pk-brd); box-shadow:var(--pk-lift),var(--pk-inset);
  -webkit-backdrop-filter:blur(26px) saturate(190%); backdrop-filter:blur(26px) saturate(190%); }

.pk-head{ display:flex; align-items:center; justify-content:space-between; padding:8px 20px 6px; }
.pk-eb{ font:700 11px/1 var(--font-display,Inter,sans-serif); letter-spacing:.14em; text-transform:uppercase; color:var(--pk-ink3); }
.pk-title{ font:800 27px/1.05 var(--font-display,"Inter Tight",sans-serif); letter-spacing:-.03em; color:var(--pk-ink); margin:5px 0 0; }
.pk-add{ width:44px; height:44px; border:0; border-radius:50%; display:grid; place-items:center; font-size:19px; color:#fff; background:var(--ind-grad); box-shadow:var(--ind-glow); cursor:pointer; }
.pk-add:active{ transform:scale(.92); }

.pk-hero{ margin:8px 16px 2px; border-radius:24px; padding:18px; position:relative; overflow:hidden; }
.pk-hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(90% 120% at 12% 0,var(--ind-soft),transparent 60%); pointer-events:none; }
.pk-hero__lab{ font:700 10.5px/1 Inter; letter-spacing:.14em; text-transform:uppercase; color:var(--pk-ink3); }
.pk-hero__big{ font:800 34px/1 var(--font-display,"Inter Tight",sans-serif); letter-spacing:-.03em; color:var(--pk-ink); margin-top:8px; }
.pk-hero__big small{ font:700 15px/1 inherit; color:var(--pk-ink3); }
.pk-hero__row{ display:flex; gap:22px; margin-top:14px; }
.pk-hero__row div{ font:600 12px/1.3 Inter; color:var(--pk-ink3); }
.pk-hero__row b{ display:block; font:700 17px/1 var(--font-ledger,"IBM Plex Mono",monospace); color:var(--pk-ink); margin-bottom:3px; }
.pk-hero__row b.ind{ color:var(--ind); } .pk-hero__row b.cor{ color:var(--coral); }

.pk-chips{ display:flex; gap:8px; flex-wrap:wrap; padding:12px 16px 2px; }
.pk-chip{ border:1px solid var(--pk-brd); background:var(--pk-glass); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); color:var(--pk-ink2); font:600 13.5px/1 Inter; padding:9px 15px; border-radius:999px; cursor:pointer; }
.pk-chip.on{ background:var(--ind-grad); color:#fff; border-color:transparent; box-shadow:0 10px 22px -10px rgba(60,79,224,.5); }

.pk-plan{ display:block; width:calc(100% - 32px); text-align:left; margin:11px 16px 0; border-radius:20px; padding:14px 15px; position:relative; overflow:hidden; cursor:pointer; color:inherit; font:inherit; }
.pk-plan::before{ content:""; position:absolute; left:0; right:0; top:0; height:54px; background:radial-gradient(90% 120% at 18% 0,var(--pk-tone,var(--ind-soft)),transparent 70%); pointer-events:none; }
.pk-plan:active{ transform:scale(.99); }
.pk-plan__top{ display:flex; align-items:center; gap:12px; }
.pk-bay{ width:46px; height:46px; flex:0 0 auto; border-radius:14px; display:grid; place-items:center; color:#fff; font-size:20px; background:var(--ind-grad); }
.pk-plan__mid{ min-width:0; display:flex; flex-direction:column; }
.pk-plan__nm{ font:700 15.5px/1.15 Inter; color:var(--pk-ink); }
.pk-plan__sub{ font:500 12px/1.3 Inter; color:var(--pk-ink3); margin-top:3px; }
.pk-plan__amt{ margin-left:auto; text-align:right; flex:0 0 auto; }
.pk-plan__amt b{ font:700 16px/1 var(--font-ledger,"IBM Plex Mono",monospace); color:var(--pk-ink); }
.pk-plan__amt span{ display:block; font:600 10.5px/1 Inter; color:var(--pk-ink3); margin-top:4px; }
.pk-plan__foot{ display:flex; align-items:center; gap:8px; margin-top:12px; padding-top:11px; border-top:1px solid var(--pk-line); }
.pk-pill{ font:700 10.5px/1 Inter; letter-spacing:.03em; text-transform:uppercase; padding:6px 10px; border-radius:999px; }
.pk-pill--act{ background:var(--ind-soft); color:var(--ind); }
.pk-pill--over{ background:rgba(197,39,30,.12); color:var(--coral); } html[data-theme="dark"] .pk-pill--over{ background:rgba(255,107,99,.16); }
.pk-pill--pause{ background:rgba(182,121,18,.14); color:#B67912; } html[data-theme="dark"] .pk-pill--pause{ color:#F5B84A; }
.pk-pill--end{ background:var(--pk-surf2); color:var(--pk-ink3); }
.pk-next{ margin-left:auto; font:600 12px/1 Inter; color:var(--pk-ink2); }
.pk-next i{ color:var(--ind); margin-right:5px; }

.pk-empty{ text-align:center; padding:52px 30px; color:var(--pk-ink3); }
.pk-empty i{ font-size:34px; color:var(--ind); opacity:.75; }
.pk-empty p{ margin:14px 0 16px; font:500 14px/1.5 Inter; color:var(--pk-ink2); }
.pk-setup code{ font-family:var(--font-ledger,monospace); background:var(--pk-surf2); padding:2px 6px; border-radius:6px; color:var(--pk-ink2); }
.pk-setup__hint{ display:block; font:500 12px/1.5 Inter; color:var(--pk-ink3); margin-top:12px; }
.pk-skel{ height:78px; margin:11px 16px 0; border-radius:20px; background:var(--pk-surf2); opacity:.6; animation:pkPulse 1.3s ease-in-out infinite; }
.pk-skel--sm{ height:44px; margin:8px 0; }
@keyframes pkPulse{ 50%{ opacity:.3; } }

/* form modal */
.pk-form__sub{ margin:0 0 6px; font:500 13.5px/1.4 Inter; color:var(--pk-ink3); }
.pk-f{ margin-top:14px; } .pk-f > label{ display:block; font:600 12px/1 Inter; color:var(--pk-ink2); margin:0 0 7px 2px; }
.pk-opt{ color:var(--pk-ink3); font-weight:500; }
.pk-frow{ display:flex; gap:10px; } .pk-frow .pk-f{ flex:1; margin-top:14px; }
.pk-inp{ width:100%; height:50px; border-radius:14px; background:var(--pk-surf2); border:1px solid var(--pk-line); padding:0 14px; font:500 15px/1 Inter; color:var(--pk-ink); }
.pk-inp:focus{ outline:none; border-color:var(--ind); }
select.pk-inp{ -webkit-appearance:none; appearance:none; }
.pk-seg{ display:flex; background:var(--pk-surf2); border-radius:13px; padding:4px; gap:4px; }
.pk-seg__b{ flex:1; border:0; background:transparent; color:var(--pk-ink2); font:600 13px/1 Inter; padding:9px 0; border-radius:10px; cursor:pointer; }
.pk-seg__b.on{ background:var(--ind-grad); color:#fff; }
.pk-tgl{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding:13px 15px; border-radius:14px; background:var(--pk-surf2); cursor:pointer; }
.pk-tgl b{ font:600 14px/1.2 Inter; color:var(--pk-ink); } .pk-tgl small{ display:block; font:500 11.5px/1.3 Inter; color:var(--pk-ink3); margin-top:3px; }
.pk-tgl input{ display:none; }
.pk-sw{ width:48px; height:29px; border-radius:99px; background:var(--pk-line); position:relative; flex:0 0 auto; transition:background .2s; }
.pk-sw::after{ content:""; position:absolute; top:3px; left:3px; width:23px; height:23px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .2s; }
.pk-tgl input:checked ~ .pk-sw{ background:var(--ind-grad); } .pk-tgl input:checked ~ .pk-sw::after{ transform:translateX(19px); }

/* detail modal */
.pk-d__nm{ font:800 20px/1.1 var(--font-display,"Inter Tight",sans-serif); letter-spacing:-.02em; color:var(--pk-ink); }
.pk-nextcard{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding:14px 15px; border-radius:14px; background:var(--ind-soft); }
.pk-nextcard b{ font:700 13px/1.2 Inter; color:var(--ind); } .pk-nextcard b i{ margin-right:5px; }
.pk-nextcard small{ display:block; font:500 11.5px/1.3 Inter; color:var(--pk-ink3); margin-top:4px; }
.pk-nextcard__d{ font:700 14px/1 var(--font-ledger,"IBM Plex Mono",monospace); color:var(--pk-ink); }
.pk-nextcard--muted{ background:var(--pk-surf2); } .pk-nextcard--muted b{ color:var(--pk-ink); }
.pk-h{ font:700 10.5px/1 Inter; letter-spacing:.14em; text-transform:uppercase; color:var(--pk-ink3); margin:20px 2px 4px; }
.pk-hist__r{ display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--pk-line); }
.pk-hist__d{ width:34px; height:34px; flex:0 0 auto; border-radius:10px; display:grid; place-items:center; font-size:14px; background:var(--pk-surf2); color:var(--pk-ink2); }
.pk-hist__mid{ display:flex; flex-direction:column; min-width:0; }
.pk-hist__nm{ font:600 13.5px/1.2 Inter; color:var(--pk-ink); }
.pk-hist__sub{ font:500 11px/1.2 Inter; color:var(--pk-ink3); margin-top:2px; }
.pk-hist__amt{ margin-left:auto; text-align:right; font:600 13.5px/1 var(--font-ledger,"IBM Plex Mono",monospace); color:var(--pk-ink); }
.pk-st{ display:block; font:600 9.5px/1 Inter; text-transform:uppercase; margin-top:4px; }
.pk-st.paid{ color:#0E7A52; } html[data-theme="dark"] .pk-st.paid{ color:#34D399; }
.pk-st.due{ color:#B67912; } html[data-theme="dark"] .pk-st.due{ color:#F5B84A; }
.pk-st.over{ color:var(--coral); }
.pk-hist__empty{ padding:16px 0; font:500 13px/1.5 Inter; color:var(--pk-ink3); text-align:center; }
/* detail footer = a row (override the mobile full-width stacking) */
.pk-detailmodal .modal-footer{ flex-direction:row!important; gap:10px!important; }
.pk-detailmodal .modal-footer > .btn-ios-secondary{ width:auto!important; }
.pk-detailmodal .modal-footer > .btn-ios-primary{ flex:1; width:auto!important; }
.pk-icobtn{ flex:0 0 52px!important; width:52px!important; padding:0!important; }

/* =====================================================================================
   v3.2.4 — GESTURE-QUIET GLASS. While html.is-gesturing is set (native.js, during active
   scroll/drag), the biggest backdrop-filter surfaces render a cheaper blur so frames don't
   drop on mid-range phones; full glass returns ~140ms after motion stops. Transient state,
   so !important is used to win over the per-surface rules regardless of theme/specificity.
   ===================================================================================== */
html.is-gesturing .hdr,
html.is-gesturing #app-tabbar.tabbar,
html.is-gesturing .app-topbar,
html.is-gesturing .app-sidebar,
html.is-gesturing .hero,
html.is-gesturing .dfocus,
html.is-gesturing .dgrid .dtile,
html.is-gesturing .dchz__card,
html.is-gesturing .dm__tl,
html.is-gesturing .dm__nav,
html.is-gesturing .dgh,
html.is-gesturing .appmenu__sheet,
html.is-gesturing .ums__sheet,
html.is-gesturing .ndg__sheet,
html.is-gesturing .pdx__sheet,
html.is-gesturing .dxs__sheet,
html.is-gesturing .notif-panel,
html.is-gesturing .pvg-menu,
html.is-gesturing .modal-content.hm-modal,
html.is-gesturing .pk-glass,
html.is-gesturing .pk-hero,
html.is-gesturing .pk-plan,
html.is-gesturing .pk-chip {
  -webkit-backdrop-filter: blur(6px) saturate(150%) !important;
  backdrop-filter: blur(6px) saturate(150%) !important;
}

/* =====================================================================================
   v3.3.0 — RECURRING BILLING module (.rb). Enterprise recurring-contract UI in the indigo
   system. Component-scoped (both devices); local --rb-* tokens per theme; reuses the
   v3.2.0 indigo tokens. Supersedes the v3.2.3 parking (.pk) view.
   ===================================================================================== */
.rb{ max-width:720px; margin:0 auto; padding:0 0 calc(40px + env(safe-area-inset-bottom,0px));
  --rb-ink:#0A1F44; --rb-ink2:#4A5878; --rb-ink3:#7C879C; --rb-surf2:#F2F3F8; --rb-line:rgba(10,31,68,.09);
  --rb-glass:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.48)); --rb-brd:rgba(255,255,255,.7);
  --rb-lift:0 20px 46px -24px rgba(30,40,80,.34); --rb-inset:inset 0 1px 0 rgba(255,255,255,.9); --rb-green:#0E7A52; }
html[data-theme="dark"] .rb{ --rb-ink:#EAEEF9; --rb-ink2:#A6B2CC; --rb-ink3:#6F7C99; --rb-surf2:#1A2032; --rb-line:rgba(255,255,255,.10);
  --rb-glass:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035)); --rb-brd:rgba(255,255,255,.12);
  --rb-lift:0 22px 52px -26px rgba(0,0,0,.6); --rb-inset:inset 0 1px 0 rgba(255,255,255,.09); --rb-green:#34D399; }
.rb-glass{ background:var(--rb-glass); border:1px solid var(--rb-brd); box-shadow:var(--rb-lift),var(--rb-inset);
  -webkit-backdrop-filter:blur(26px) saturate(190%); backdrop-filter:blur(26px) saturate(190%); }

.rb-head{ display:flex; align-items:center; justify-content:space-between; padding:8px 20px 6px; }
.rb-eb{ font:700 11px/1 var(--font-display,Inter,sans-serif); letter-spacing:.14em; text-transform:uppercase; color:var(--rb-ink3); }
.rb-title{ font:800 27px/1.05 var(--font-display,"Inter Tight",sans-serif); letter-spacing:-.03em; color:var(--rb-ink); margin:5px 0 0; }
.rb-add{ width:44px; height:44px; border:0; border-radius:50%; display:grid; place-items:center; font-size:19px; color:#fff; background:var(--ind-grad); box-shadow:var(--ind-glow); cursor:pointer; }
.rb-add:active{ transform:scale(.92); }

.rb-hero{ margin:8px 16px 0; border-radius:24px; padding:18px; position:relative; overflow:hidden; }
.rb-hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(90% 120% at 12% 0,var(--ind-soft),transparent 60%); pointer-events:none; }
.rb-hero__lab{ font:700 10.5px/1 Inter; letter-spacing:.14em; text-transform:uppercase; color:var(--rb-ink3); }
.rb-hero__big{ font:800 33px/1 var(--font-display,"Inter Tight",sans-serif); letter-spacing:-.03em; color:var(--rb-ink); margin-top:8px; }
.rb-hero__big small{ font:700 15px/1 inherit; color:var(--rb-ink3); }
.rb-hero__row{ display:flex; gap:20px; margin-top:14px; }
.rb-hero__row div{ font:600 11.5px/1.3 Inter; color:var(--rb-ink3); }
.rb-hero__row b{ display:block; font:700 16px/1 var(--font-ledger,"IBM Plex Mono",monospace); color:var(--rb-ink); margin-bottom:3px; }
.rb-hero__row b.ind{ color:var(--ind); }

.rb-batch{ margin:14px 16px 4px; height:60px; border-radius:18px; border:0; width:calc(100% - 32px);
  display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  font:800 16.5px/1 var(--font-display,"Inter Tight",sans-serif); letter-spacing:-.01em; color:#fff; background:var(--ind-grad);
  box-shadow:0 1px 1px rgba(20,26,60,.2),0 18px 34px -12px rgba(61,79,224,.7); }
.rb-batch:active{ transform:scale(.99); }
.rb-batch:disabled{ opacity:.75; }
.rb-batch i{ font-size:19px; }
.rb-batch__sub{ display:block; text-align:center; font:500 11.5px/1 Inter; color:var(--rb-ink3); margin:9px 16px 2px; }
.rb-spin{ width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; display:inline-block; vertical-align:-3px; animation:rbSpin .7s linear infinite; }
@keyframes rbSpin{ to{ transform:rotate(360deg); } }

.rb-seclab{ font:700 10.5px/1 Inter; letter-spacing:.14em; text-transform:uppercase; color:var(--rb-ink3); margin:18px 20px 2px; }
.rb-c{ display:flex; align-items:center; gap:13px; width:calc(100% - 32px); text-align:left; margin:10px 16px 0; border-radius:18px; padding:14px 15px; cursor:pointer; color:inherit; font:inherit; }
.rb-c:active{ transform:scale(.99); }
.rb-c.is-paused{ opacity:.62; }
.rb-c__ic{ width:44px; height:44px; flex:0 0 auto; border-radius:13px; display:grid; place-items:center; color:#fff; font-size:18px; background:var(--ind-grad); }
.rb-c__mid{ min-width:0; flex:1; display:flex; flex-direction:column; }
.rb-c__nm{ font:700 15px/1.15 Inter; color:var(--rb-ink); }
.rb-c__desc{ font:500 12px/1.3 Inter; color:var(--rb-ink3); margin-top:3px; }
.rb-c__amt{ text-align:right; flex:0 0 auto; }
.rb-c__amt b{ font:700 15.5px/1 var(--font-ledger,"IBM Plex Mono",monospace); color:var(--rb-ink); }
.rb-c__amt span{ display:block; font:600 10px/1 Inter; color:var(--ind); margin-top:4px; text-transform:uppercase; letter-spacing:.03em; }
.rb-c__top{ display:flex; align-items:center; gap:13px; margin:2px 0 2px; }

.rb-empty{ text-align:center; padding:52px 30px; color:var(--rb-ink3); }
.rb-empty i{ font-size:34px; color:var(--ind); opacity:.75; }
.rb-empty p{ margin:14px 0 16px; font:500 14px/1.5 Inter; color:var(--rb-ink2); }
.rb-setup code{ font-family:var(--font-ledger,monospace); background:var(--rb-surf2); padding:2px 6px; border-radius:6px; color:var(--rb-ink2); }
.rb-setup__hint{ display:block; font:500 12px/1.5 Inter; color:var(--rb-ink3); margin-top:12px; }
.rb-skel{ height:78px; margin:10px 16px 0; border-radius:18px; background:var(--rb-surf2); opacity:.6; animation:rbPulse 1.3s ease-in-out infinite; }
.rb-skel--btn{ height:60px; }
@keyframes rbPulse{ 50%{ opacity:.3; } }

/* form */
.rb-form__sub{ margin:0 0 6px; font:500 13.5px/1.4 Inter; color:var(--rb-ink3); }
.rb-f{ margin-top:14px; } .rb-f > label{ display:block; font:600 12px/1 Inter; color:var(--rb-ink2); margin:0 0 7px 2px; }
.rb-frow{ display:flex; gap:10px; } .rb-frow .rb-f{ flex:1; margin-top:14px; }
.rb-inp{ width:100%; height:50px; border-radius:14px; background:var(--rb-surf2); border:1px solid var(--rb-line); padding:0 14px; font:500 15px/1 Inter; color:var(--rb-ink); }
.rb-inp:focus{ outline:none; border-color:var(--ind); }
select.rb-inp{ -webkit-appearance:none; appearance:none; }
.rb-tgl{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding:13px 15px; border-radius:14px; background:var(--rb-surf2); cursor:pointer; }
.rb-tgl b{ font:600 14px/1.2 Inter; color:var(--rb-ink); } .rb-tgl small{ display:block; font:500 11.5px/1.3 Inter; color:var(--rb-ink3); margin-top:3px; }
.rb-tgl input{ display:none; }
.rb-sw{ width:48px; height:29px; border-radius:99px; background:var(--rb-line); position:relative; flex:0 0 auto; transition:background .2s; }
.rb-sw::after{ content:""; position:absolute; top:3px; left:3px; width:23px; height:23px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .2s; }
.rb-tgl input:checked ~ .rb-sw{ background:var(--ind-grad); } .rb-tgl input:checked ~ .rb-sw::after{ transform:translateX(19px); }

/* success modal */
.rb-donemodal .modal-body{ text-align:center; padding-top:22px!important; }
.rb-done__ic{ width:64px; height:64px; border-radius:20px; display:grid; place-items:center; margin:0 auto 14px; font-size:29px; color:#fff; background:var(--ind-grad); box-shadow:var(--ind-glow); }
.rb-done__ttl{ font:800 22px/1.14 var(--font-display,"Inter Tight",sans-serif); letter-spacing:-.03em; color:var(--rb-ink,var(--ink,#0A1F44)); margin:0 0 8px; }
html[data-theme="dark"] .rb-done__ttl{ color:#EAEEF9; }
.rb-done__sub{ font:500 14px/1.5 Inter; color:var(--rb-ink2,var(--text-secondary)); margin:0 auto; max-width:290px; }
html[data-theme="dark"] .rb-done__sub{ color:#A6B2CC; }
.rb-sum{ display:flex; gap:10px; margin-top:18px; }
.rb-sum div{ flex:1; text-align:center; padding:14px 8px; border-radius:14px; background:var(--rb-surf2,#F2F3F8); }
html[data-theme="dark"] .rb-sum div{ background:#1A2032; }
.rb-sum b{ display:block; font:800 22px/1 var(--font-display,"Inter Tight",sans-serif); color:var(--rb-ink,#0A1F44); }
html[data-theme="dark"] .rb-sum b{ color:#EAEEF9; }
.rb-sum b.ind{ color:var(--ind); }
.rb-sum span{ font:600 10px/1.2 Inter; color:var(--rb-ink3,#7C879C); text-transform:uppercase; letter-spacing:.03em; display:block; margin-top:6px; }
.rb-emailed{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:14px; font:600 12.5px/1.3 Inter; color:var(--rb-green,#0E7A52); text-align:center; }
.rb-emailed--warn{ color:#B67912; } html[data-theme="dark"] .rb-emailed--warn{ color:#F5B84A; }

/* detail modal */
.rb-d__nm{ font:800 20px/1.1 var(--font-display,"Inter Tight",sans-serif); letter-spacing:-.02em; color:var(--rb-ink); }
.rb-statecard{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding:14px 15px; border-radius:14px; background:var(--ind-soft); }
.rb-statecard.is-off{ background:var(--rb-surf2); }
.rb-statecard b{ font:700 13px/1.2 Inter; color:var(--rb-ink); }
.rb-statecard small{ display:block; font:500 11.5px/1.3 Inter; color:var(--rb-ink3); margin-top:4px; }
.rb-toggle{ width:48px; height:29px; border-radius:99px; border:0; background:var(--rb-line); position:relative; flex:0 0 auto; cursor:pointer; transition:background .2s; }
.rb-toggle > span{ position:absolute; top:3px; left:3px; width:23px; height:23px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .2s; }
.rb-toggle.on{ background:var(--ind-grad); } .rb-toggle.on > span{ transform:translateX(19px); }
.rb-detailmodal .modal-footer{ flex-direction:row!important; gap:10px!important; }
.rb-detailmodal .modal-footer > .btn-ios-secondary{ width:auto!important; }
.rb-detailmodal .modal-footer > .btn-ios-primary{ flex:1; width:auto!important; }
.rb-icobtn{ flex:0 0 52px!important; width:52px!important; padding:0!important; }

/* =====================================================================================
   v3.3.1 — STABILITY FIXES.
   (1) Lock the real scroll container while a modal/sheet is open, so the page behind can't
       scroll or repaint under it. Bootstrap only sets body.modal-open, but the app scrolls
       inside .app-main / .view-root / .dm — so lock those too. The modal itself lives in
       #modal-root (outside these), so its own scrolling is unaffected.
   ===================================================================================== */
body.modal-open .app-main,
body.modal-open .view-root,
body.modal-open .dm {
  overflow: hidden !important;
  touch-action: none;
}

/* =====================================================================================
   v3.4.0 — RECURRING BILLING advanced form (grouped sections, live total, breakdown).
   Reuses .rb-* tokens from v3.3.0.
   ===================================================================================== */
.rb-group{ font:700 10px/1 Inter; letter-spacing:.16em; text-transform:uppercase; color:var(--ind); margin:20px 2px 2px; display:flex; align-items:center; gap:8px; }
.rb-group i{ font-size:12px; }
.rb-group::after{ content:""; flex:1; height:1px; background:var(--rb-line); }
.rb-total{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding:15px 16px; border-radius:15px; background:var(--ind-soft); }
.rb-total small{ font:600 11px/1.3 Inter; color:var(--rb-ink3); display:block; }
.rb-total b{ font:800 22px/1 var(--font-display,"Inter Tight",sans-serif); color:var(--ind); letter-spacing:-.02em; }
.rb-total .brk{ font:600 11px/1.5 Inter; color:var(--rb-ink3); text-align:right; }
.rb-suffix{ position:relative; }
.rb-suffix input{ padding-right:38px; }
.rb-suffix span{ position:absolute; right:13px; top:50%; transform:translateY(-50%); font:600 13px/1 Inter; color:var(--rb-ink3); }
.rb-dline{ display:flex; justify-content:space-between; padding:7px 2px; font:600 12.5px/1 Inter; color:var(--rb-ink2); }
.rb-dline b{ font-family:var(--font-ledger,"IBM Plex Mono",monospace); color:var(--rb-ink); }
.rb-dline--tot{ border-top:1px solid var(--rb-line); margin-top:4px; padding-top:11px; }
.rb-dline--tot b{ font-size:16px; }

/* =====================================================================================
   v3.4.1 — Recurring contract cards get a chevron affordance (they open the native detail
   card), and the detail card gains a destructive "Delete contract" action.
   ===================================================================================== */
.rb-c__go{ flex:0 0 auto; margin-left:2px; color:var(--rb-ink3); font-size:15px; opacity:.65; }
.rb-del{ width:100%; margin-top:20px; padding:13px; border:0; border-radius:14px; cursor:pointer;
  background:rgba(197,39,30,.10); color:var(--coral); font:700 14px/1 Inter; display:flex; align-items:center; justify-content:center; gap:8px; }
html[data-theme="dark"] .rb-del{ background:rgba(255,107,99,.14); }
.rb-del:active{ transform:scale(.99); }
.rb-del i{ font-size:15px; }

/* =====================================================================================
   v3.4.2 — Recurring quick-actions sheet (native long-press / right-click menu).
   ===================================================================================== */
.rb-qa__hd{ display:flex; align-items:center; gap:12px; padding:2px 2px 12px; margin-bottom:6px; border-bottom:1px solid var(--rb-line,rgba(10,31,68,.09)); }
.rb-qa__meta{ min-width:0; }
.rb-qa__nm{ font:800 17px/1.15 var(--font-display,"Inter Tight",sans-serif); letter-spacing:-.02em; color:var(--rb-ink,#0A1F44); }
html[data-theme="dark"] .rb-qa__nm{ color:#EAEEF9; }
.rb-qa__sub{ font:500 12px/1.3 Inter; color:var(--rb-ink3,#7C879C); margin-top:2px; }
.rb-qa__row{ width:100%; display:flex; align-items:center; gap:14px; padding:15px 12px; border:0; background:transparent; cursor:pointer;
  font:600 15.5px/1 Inter; color:var(--rb-ink,#0A1F44); border-radius:13px; text-align:left; }
html[data-theme="dark"] .rb-qa__row{ color:#EAEEF9; }
.rb-qa__row i{ font-size:19px; color:var(--ind); width:24px; text-align:center; }
.rb-qa__row:active{ background:var(--rb-surf2,#F2F3F8); }
html[data-theme="dark"] .rb-qa__row:active{ background:#1A2032; }
.rb-qa__row.danger{ color:var(--coral); }
.rb-qa__row.danger i{ color:var(--coral); }

/* =====================================================================================
   v3.4.4 — ITEM 1 · PREMIUM FINISH for the indigo inner screens.
   The v3.2.0 indigo colour system is kept as-is; this pass adds the *craft* that makes it
   read as premium: frosted-glass surfaces with a lit top edge, refined soft-filled fields
   with an indigo focus ring, "liquid" button depth (inner highlight + layered shadow), and
   one consistent active-chip treatment. Append-only, scoped, both themes, phone + desktop
   where shared. Reuses the v3.2.0 tokens (--ind / --ind-grad / --ind-soft / --ind-glow /
   --coral-glow). No markup or JS changed — pure restyle; every ID/hook preserved.
   ===================================================================================== */

/* ---- premium glass + field tokens ---- */
:root{
  --pf-glass: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.52));
  --pf-glass-edge: rgba(255,255,255,.9);
  --pf-glass-brd: rgba(255,255,255,.7);
  --pf-glass-sh: 0 22px 48px -26px rgba(30,40,80,.34), inset 0 1px 0 rgba(255,255,255,.9);
  --pf-field: rgba(255,255,255,.66);
  --pf-field-brd: rgba(10,31,68,.10);
  --pf-field-sh: inset 0 1px 2px rgba(10,31,68,.05);
  --pf-ink: var(--m-ink, var(--ink, #0A1F44));
  --pf-liquid-sh: 0 1px 0 rgba(255,255,255,.28) inset, 0 16px 30px -12px rgba(61,79,224,.6), 0 2px 6px -2px rgba(30,40,80,.24);
  --pf-liquid-sh-h: 0 1px 0 rgba(255,255,255,.32) inset, 0 20px 38px -12px rgba(61,79,224,.66), 0 2px 6px -2px rgba(30,40,80,.28);
}
html[data-theme="dark"]{
  --pf-glass: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.04));
  --pf-glass-edge: rgba(255,255,255,.09);
  --pf-glass-brd: rgba(255,255,255,.10);
  --pf-glass-sh: 0 26px 56px -28px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.09);
  --pf-field: rgba(255,255,255,.05);
  --pf-field-brd: rgba(255,255,255,.10);
  --pf-field-sh: inset 0 1px 2px rgba(0,0,0,.25);
  --pf-ink:#EAEEF9;
}

/* ---- 1. RECORD PAYMENT — glass card, refined fields, consistent chips, liquid CTA ---- */
.ios-card.rec{
  background:
    radial-gradient(120% 120px at 50% 0, var(--ind-soft), transparent 70%),
    var(--pf-glass) !important;
  border:1px solid var(--pf-glass-brd)!important;
  box-shadow: var(--pf-glass-sh)!important;
  -webkit-backdrop-filter: blur(26px) saturate(185%); backdrop-filter: blur(26px) saturate(185%);
  border-radius: 22px!important;
}
.rec .rec__amount-f{
  border-bottom:0!important; padding:12px 14px!important; border-radius:14px!important;
  background: var(--pf-field)!important; border:1px solid var(--pf-field-brd)!important;
  box-shadow: var(--pf-field-sh)!important; align-items:baseline!important;
}
.rec .rec__amount-f:focus-within{ border-color: var(--ind)!important; box-shadow: 0 0 0 3px var(--ind-soft), var(--pf-field-sh)!important; }
.rec #rec-amt{ color: var(--pf-ink)!important; }
.rec .rec__cell-in,
.rec .rec__method{
  height:46px!important; padding:0 14px!important; border:1px solid var(--pf-field-brd)!important;
  border-radius:13px!important; background: var(--pf-field)!important; box-shadow: var(--pf-field-sh)!important;
  color: var(--pf-ink)!important; transition: border-color .16s ease, box-shadow .16s ease;
}
.rec .rec__cell-in:hover, .rec .rec__method:hover{ border-color: rgba(75,99,255,.35)!important; }
.rec .rec__cell-in:focus, .rec .rec__method:focus-within, .rec .rec__method:focus{
  border-color: var(--ind)!important; box-shadow: 0 0 0 3px var(--ind-soft)!important; }
.rec .rec__method{ gap:10px!important; }
.rec .rec__method-c{ margin-left:auto!important; opacity:.55; }
.rec .rec__cell-l, .rec .rec__amount-l{ font-weight:600!important; letter-spacing:-.01em; }
.rec .rec-chip{
  border:1px solid var(--pf-field-brd)!important; background: var(--pf-field)!important;
  color: var(--m-ink-2, var(--ink-2,#4A5878))!important; border-radius:999px!important;
  padding:8px 15px!important; font-weight:600!important; box-shadow: var(--pf-field-sh)!important;
}
.rec .rec-chip.is-on, .rec #rec-chips .is-on{
  background: var(--ind-grad)!important; color:#fff!important; border-color:transparent!important;
  box-shadow: 0 6px 14px -6px rgba(61,79,224,.55)!important;
}
.rec__go{
  background: var(--ind-grad)!important; color:#fff!important; border-radius:16px!important;
  box-shadow: var(--pf-liquid-sh)!important;
}
.rec__go:hover:not(:disabled){ box-shadow: var(--pf-liquid-sh-h)!important; }
.rec__go:active:not(:disabled){ transform: scale(.985); }

/* ---- 2. GLASS MODAL — refined fields + glass secondary + liquid primary ---- */
.modal-content.hm-modal #hm-cust-form.hm-form-grid{
  background: transparent!important; border:0!important; box-shadow:none!important; padding:0!important;
}
.modal-content.hm-modal .form-control{
  border-radius:13px!important; border:1px solid var(--pf-field-brd)!important;
  background: var(--pf-field)!important; box-shadow: var(--pf-field-sh)!important;
  color: var(--pf-ink)!important; padding:13px 14px!important;
}
.modal-content.hm-modal .form-control:focus{
  border-color: var(--ind)!important; box-shadow: 0 0 0 3px var(--ind-soft)!important; outline:0!important;
}
.btn-ios-primary{ box-shadow: var(--pf-liquid-sh)!important; }
.btn-ios-primary:hover{ box-shadow: var(--pf-liquid-sh-h)!important; }
.btn-ios-secondary{
  background: var(--pf-field)!important; border:1px solid var(--pf-field-brd)!important;
  color: var(--ind)!important; box-shadow: var(--pf-field-sh)!important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.btn-ios-secondary:hover{ background: var(--ind-soft)!important; }
.hm-cf__ic{ border-radius:20px!important; box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, var(--ind-glow)!important; }
.hm-cf__ic.hm-cf__ic--danger{ box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, var(--coral-glow)!important; }

/* ---- 3. Sibling inner-screen sheet CTAs — carry the same liquid depth (already indigo) ---- */
html.dm-on .dxs__btn--p,
html.dm-on .ndg__cbtn--p,
html.dm-on .ndg__all,
html.dm-on .pdx__btn--p,
html.dm-on .chs__btn--p,
html.dm-on .mts-cta,
html.dm-on .avd__open,
html.dm-on .et-pv__edit{
  box-shadow: var(--pf-liquid-sh)!important;
}
/* refined soft-filled fields inside the glass bottom-sheets (documents/payments/nudge) */
html.dm-on .dxs .form-control,
html.dm-on .pdx .form-control,
html.dm-on .ndg .form-control{
  border-radius:13px!important; border:1px solid var(--pf-field-brd)!important;
  background: var(--pf-field)!important; box-shadow: var(--pf-field-sh)!important; color: var(--pf-ink)!important;
}
html.dm-on .dxs .form-control:focus,
html.dm-on .pdx .form-control:focus,
html.dm-on .ndg .form-control:focus{
  border-color: var(--ind)!important; box-shadow: 0 0 0 3px var(--ind-soft)!important; outline:0!important;
}

/* ---- 4. "All sections" menu — subtle tile lift (active already indigo from v3.2.0) ---- */
.appmenu__tile{ transition: transform .14s ease, box-shadow .2s ease; }
.appmenu__tile:not(.is-active):hover{ box-shadow: 0 14px 30px -20px rgba(30,40,80,.4), inset 0 1px 0 var(--pf-glass-edge)!important; }
.appmenu__tile.is-active .appmenu__ico{ box-shadow: 0 1px 0 rgba(255,255,255,.25) inset!important; }

/* =====================================================================================
   v3.5.0 — SMART RECURRING BILLING (.rc / .rcx). Full native redesign of the Recurring
   section: glass hero, plan cards, attention strip, native bottom sheets (long-press
   actions, alive detail, pre-flight review, change-price, smart pause, new/edit form).
   Component-scoped, both themes. Reuses v3.2.0 indigo tokens (--ind, --ind-grad) and the
   v3.4.4 --pf-* glass finish. Supersedes the v3.3.0–v3.4.2 .rb blocks (now dead, kept
   per append-only rule). Sheets follow §4.4 (scroll-lock class html.rcx-open registered).
   ===================================================================================== */
.rc{ max-width:720px; margin:0 auto; padding:0 0 calc(40px + env(safe-area-inset-bottom,0px));
  --rc-ink:#0A1F44; --rc-ink2:#4A5878; --rc-ink3:#7C879C;
  --rc-glass:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.5)); --rc-brd:rgba(255,255,255,.72);
  --rc-lift:0 22px 48px -26px rgba(30,40,80,.34); --rc-inset:inset 0 1px 0 rgba(255,255,255,.9);
  --rc-field:rgba(255,255,255,.66); --rc-fieldbrd:rgba(10,31,68,.10); --rc-green:#0E7A52; --rc-over:#C5271E;
  --rc-amber:#B67912; --rc-amberbg:rgba(182,121,18,.12); --rc-amberbrd:rgba(182,121,18,.28);
  --rc-sheet:linear-gradient(180deg,rgba(252,253,255,.9),rgba(248,249,253,.86)); }
html[data-theme="dark"] .rc{ --rc-ink:#EAEEF9; --rc-ink2:#A6B2CC; --rc-ink3:#6F7C99;
  --rc-glass:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.04)); --rc-brd:rgba(255,255,255,.12);
  --rc-lift:0 22px 52px -26px rgba(0,0,0,.6); --rc-inset:inset 0 1px 0 rgba(255,255,255,.09);
  --rc-field:rgba(255,255,255,.05); --rc-fieldbrd:rgba(255,255,255,.10); --rc-green:#34D399; --rc-over:#F0574C;
  --rc-amber:#F5B84A; --rc-amberbg:rgba(245,184,74,.14); --rc-amberbrd:rgba(245,184,74,.28);
  --rc-sheet:linear-gradient(180deg,rgba(26,32,46,.94),rgba(18,22,34,.9)); }

.rc-glass{ background:var(--rc-glass); border:1px solid var(--rc-brd); box-shadow:var(--rc-lift),var(--rc-inset);
  -webkit-backdrop-filter:blur(26px) saturate(190%); backdrop-filter:blur(26px) saturate(190%); }

/* header */
.rc-head{ display:flex; align-items:center; justify-content:space-between; padding:8px 20px 4px; }
.rc-eb{ font:700 11px/1 var(--font-display,Inter,sans-serif); letter-spacing:.14em; text-transform:uppercase; color:var(--rc-ink3); }
.rc-title{ font:800 30px/1.02 var(--font-display,"Inter Tight",sans-serif); letter-spacing:-.03em; color:var(--rc-ink); margin:5px 0 0; }
.rc-add{ width:46px; height:46px; border:0; border-radius:50%; display:grid; place-items:center; font-size:20px; color:#fff; background:var(--ind-grad); box-shadow:var(--ind-glow,0 14px 30px -12px rgba(61,79,224,.55)); cursor:pointer; }
.rc-add:active{ transform:scale(.92); }
.rc-body{ padding:2px 0 0; }

/* skeletons */
.rc-skel{ height:96px; margin:12px 16px; border-radius:20px; background:linear-gradient(100deg,var(--rc-field),rgba(127,135,156,.16),var(--rc-field)); background-size:200% 100%; animation:rcSk 1.2s ease infinite; }
.rc-skel--btn{ height:58px; }
@keyframes rcSk{ to{ background-position:-200% 0; } }

/* entrance */
.dm-on .rc .dm-in{ opacity:0; transform:translateY(9px); animation:rcIn .5s cubic-bezier(.22,1,.36,1) forwards; animation-delay:var(--d,0s); }
@keyframes rcIn{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .dm-on .rc .dm-in{ animation:none; opacity:1; transform:none; } }

/* attention strip */
.rc-attn{ display:flex; align-items:center; gap:12px; width:calc(100% - 32px); text-align:left; margin:10px 16px 0; padding:13px 14px; border-radius:16px; cursor:pointer; background:var(--rc-amberbg); border:1px solid var(--rc-amberbrd); color:var(--rc-ink); }
.rc-attn:active{ transform:scale(.99); }
.rc-attn__ic{ width:38px; height:38px; flex:0 0 auto; border-radius:11px; display:grid; place-items:center; color:#fff; font-size:16px; background:linear-gradient(150deg,#F5B84A,#C58A12); box-shadow:0 1px 0 rgba(255,255,255,.3) inset; }
.rc-attn__tx{ flex:1; min-width:0; }
.rc-attn__tx b{ display:block; font:700 13.5px/1.15 Inter; color:var(--rc-ink); }
.rc-attn__tx small{ font:500 12px/1.3 Inter; color:var(--rc-ink2); }
.rc-attn__go{ color:var(--rc-amber); font-size:14px; }

/* hero */
.rc-hero{ margin:12px 16px 0; border-radius:24px; padding:18px; position:relative; overflow:hidden; }
.rc-hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(90% 120% at 12% 0,var(--ind-soft,rgba(75,99,255,.12)),transparent 60%); pointer-events:none; }
.rc-hero__lab{ font:700 10.5px/1 Inter; letter-spacing:.14em; text-transform:uppercase; color:var(--rc-ink3); }
.rc-hero__big{ font:800 37px/1 var(--font-display,"Inter Tight",sans-serif); letter-spacing:-.03em; color:var(--rc-ink); margin-top:9px; position:relative; }
.rc-hero__big small{ font:700 16px/1 inherit; color:var(--rc-ink3); }
.rc-gold{ background:var(--gold-grad,linear-gradient(135deg,#E4C878,#C79A3C)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.rc-hero__row{ display:flex; gap:22px; margin-top:16px; position:relative; }
.rc-hero__row div{ font:600 11px/1.3 Inter; color:var(--rc-ink3); }
.rc-hero__row b{ display:block; font:700 17px/1 var(--font-ledger,"IBM Plex Mono",monospace); color:var(--rc-ink); margin-bottom:4px; }
.rc-hero__row b.ind{ color:var(--ind); }

/* primary bill button */
.rc-bill{ margin:16px 16px 0; height:58px; border-radius:18px; border:0; width:calc(100% - 32px); display:flex; align-items:center; justify-content:center; gap:9px; cursor:pointer;
  font:800 16.5px/1 var(--font-display,"Inter Tight",sans-serif); letter-spacing:-.01em; color:#fff; background:var(--ind-grad);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 18px 34px -12px rgba(61,79,224,.66), 0 2px 6px -2px rgba(30,40,80,.25); }
.rc-bill:active{ transform:scale(.99); }
.rc-bill i{ font-size:18px; }
.rc-bill__sub{ display:block; text-align:center; font:500 11.5px/1.3 Inter; color:var(--rc-ink3); margin:10px 16px 2px; }

/* section labels + plan cards */
.rc-sec{ font:700 10.5px/1 Inter; letter-spacing:.14em; text-transform:uppercase; color:var(--rc-ink3); margin:20px 20px 2px; }
.rc-mini-empty{ font:500 13px/1.4 Inter; color:var(--rc-ink3); margin:10px 20px; }
.rc-card{ display:flex; align-items:center; gap:13px; width:calc(100% - 32px); text-align:left; margin:10px 16px 0; border-radius:18px; padding:13px 14px; cursor:pointer; color:inherit; font:inherit; -webkit-tap-highlight-color:transparent; }
.rc-card:active{ transform:scale(.99); }
.rc-card.is-paused{ opacity:.6; }
.rc-card--flag{ border-color:var(--rc-amberbrd)!important; }
.rc-card__ic{ width:44px; height:44px; flex:0 0 auto; border-radius:13px; display:grid; place-items:center; color:#fff; font-size:18px; background:var(--ind-grad); box-shadow:0 1px 0 rgba(255,255,255,.25) inset; }
.rc-card__ic--lg{ width:52px; height:52px; border-radius:15px; font-size:22px; }
.rc-card__ic--warn{ background:linear-gradient(150deg,#F5B84A,#C58A12); }
.rc-card__mid{ min-width:0; flex:1; display:flex; flex-direction:column; }
.rc-card__nm{ font:700 15px/1.15 Inter; color:var(--rc-ink); display:flex; align-items:center; gap:6px; }
.rc-flagdot{ color:var(--rc-amber); font-size:12px; }
.rc-card__sub{ font:500 12px/1.3 Inter; color:var(--rc-ink3); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rc-card__right{ text-align:right; flex:0 0 auto; }
.rc-card__right b{ font:700 15.5px/1 var(--font-ledger,"IBM Plex Mono",monospace); color:var(--rc-ink); }
.rc-card__right span{ display:block; font:600 10px/1 Inter; color:var(--rc-ink3); margin-top:5px; }
.rc-card__go{ color:var(--rc-ink3); opacity:.5; font-size:13px; }

.rc-empty{ text-align:center; padding:52px 30px; color:var(--rc-ink3); }
.rc-empty i{ font-size:34px; opacity:.5; }
.rc-empty p{ margin:12px 0 14px; font:500 14px/1.5 Inter; }
.rc-empty .btn-ios-primary{ display:inline-flex; align-items:center; gap:8px; }
.rc-setup i{ color:var(--ind); opacity:.8; }
.rc-spin{ width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; display:inline-block; vertical-align:-3px; animation:rcSpin .7s linear infinite; }
@keyframes rcSpin{ to{ transform:rotate(360deg); } }

/* ============================ NATIVE BOTTOM SHEET (.rcx) ============================ */
.rcx{ position:fixed; inset:0; z-index:3200; }
.rcx__scrim{ position:absolute; inset:0; background:rgba(9,12,20,.5); opacity:0; transition:opacity .32s ease; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.rcx.is-open .rcx__scrim{ opacity:1; }
.rcx__sheet{ position:absolute; left:0; right:0; bottom:0; max-width:720px; margin:0 auto; border-radius:28px 28px 0 0; padding:0; transform:translateY(102%); transition:transform .44s cubic-bezier(.22,1,.36,1); max-height:92vh; display:flex; flex-direction:column; will-change:transform; }
.rcx.is-open .rcx__sheet{ transform:translateY(0); }
.rcx__grip{ width:40px; height:5px; border-radius:3px; background:rgba(130,140,160,.5); margin:8px auto 4px; flex:0 0 auto; cursor:grab; }
.rcx__scroll{ overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:6px 16px calc(18px + env(safe-area-inset-bottom,0px)); }

/* action rows */
.rcx-ahd{ display:flex; align-items:center; gap:12px; padding:6px 4px 14px; border-bottom:1px solid var(--rc-fieldbrd); margin-bottom:6px; }
.rcx-ameta{ min-width:0; flex:1; }
.rcx-anm{ font:800 17px/1.1 var(--font-display,"Inter Tight",sans-serif); color:var(--rc-ink); }
.rcx-asub{ font:500 12px/1.3 Inter; color:var(--rc-ink3); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rcx-asub.warn{ color:var(--rc-amber); font-weight:600; }
.rcx-row{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; border:0; background:transparent; cursor:pointer; padding:14px 8px; border-radius:14px; font:600 15px/1 Inter; color:var(--rc-ink); }
.rcx-row:active{ background:var(--rc-field); }
.rcx-row > i:first-child{ font-size:18px; color:var(--ind); width:24px; text-align:center; }
.rcx-row span{ flex:1; }
.rcx-row__go{ color:var(--rc-ink3); opacity:.45; font-size:13px; }
.rcx-row.danger{ color:var(--rc-over); }
.rcx-row.danger > i:first-child{ color:var(--rc-over); }
.rcx-cancel{ width:100%; margin-top:8px; height:50px; border-radius:15px; border:1px solid var(--rc-fieldbrd); background:var(--rc-field); color:var(--ind); font:700 15px/1 Inter; cursor:pointer; }

/* attention list rows */
.rcx-ttl{ font:800 22px/1.05 var(--font-display,"Inter Tight",sans-serif); color:var(--rc-ink); letter-spacing:-.02em; padding:2px 4px 0; }
.rcx-sub{ font:500 12.5px/1.4 Inter; color:var(--rc-ink3); margin:4px 4px 12px; }
.rcx-arow{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:0; background:transparent; cursor:pointer; padding:12px 6px; border-radius:14px; border-bottom:1px solid var(--rc-fieldbrd); }
.rcx-arow:last-child{ border-bottom:0; }
.rcx-arow:active{ background:var(--rc-field); }

/* detail */
.rc-dt__top{ display:flex; align-items:center; gap:13px; padding:4px 2px 14px; }
.rc-dt__meta{ flex:1; min-width:0; display:flex; flex-direction:column; }
.rc-dt__nm{ font:800 19px/1.1 var(--font-display,"Inter Tight",sans-serif); color:var(--rc-ink); }
.rc-dt__amt{ text-align:right; flex:0 0 auto; }
.rc-dt__amt b{ font:800 20px/1 var(--font-display,"Inter Tight",sans-serif); color:var(--rc-ink); }
.rc-dt__amt span{ display:block; font:600 11px/1 Inter; color:var(--rc-ink3); margin-top:3px; }
.rc-dt__warn{ display:flex; gap:8px; align-items:flex-start; padding:11px 13px; border-radius:13px; background:var(--rc-amberbg); color:var(--rc-amber); font:600 12.5px/1.4 Inter; margin-bottom:12px; }
.rc-dt__gl{ font:700 10.5px/1 Inter; letter-spacing:.14em; text-transform:uppercase; color:var(--rc-ink3); margin:16px 2px 8px; }
.rc-state{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; border-radius:16px; background:var(--ind-soft,rgba(75,99,255,.12)); }
.rc-state.is-off{ background:var(--rc-field); }
.rc-state b{ font:700 13px/1.2 Inter; color:var(--rc-ink); display:flex; align-items:center; gap:6px; }
.rc-state small{ display:block; font:500 11.5px/1.35 Inter; color:var(--rc-ink3); margin-top:4px; }
.rc-state__d{ font:700 15px/1 var(--font-ledger,"IBM Plex Mono",monospace)!important; color:var(--ind)!important; flex:0 0 auto; }
.rc-life{ display:flex; gap:10px; margin-top:12px; }
.rc-life > div{ flex:1; text-align:center; padding:12px 6px; border-radius:14px; background:var(--rc-field); border:1px solid var(--rc-fieldbrd); }
.rc-life b{ display:block; font:800 16px/1 var(--font-display,"Inter Tight",sans-serif); color:var(--rc-ink); }
.rc-life span{ font:600 10px/1.2 Inter; color:var(--rc-ink3); text-transform:uppercase; letter-spacing:.04em; margin-top:5px; display:block; }
.rc-brk{ border-radius:14px; background:var(--rc-field); border:1px solid var(--rc-fieldbrd); padding:2px 14px; }
.rc-brk__l{ display:flex; justify-content:space-between; padding:11px 0; font:600 13px/1 Inter; color:var(--rc-ink2); border-bottom:1px solid var(--rc-fieldbrd); }
.rc-brk__l:last-child{ border-bottom:0; }
.rc-brk__l b{ font-family:var(--font-ledger,"IBM Plex Mono",monospace); color:var(--rc-ink); }
.rc-brk__l--tot span{ font-weight:800; color:var(--rc-ink); }
.rc-brk__l--tot b{ font-weight:800; }
.rc-hist{ display:flex; justify-content:space-between; align-items:center; width:100%; text-align:left; border:0; background:transparent; cursor:pointer; padding:12px 4px; font:600 13px/1 Inter; color:var(--rc-ink2); border-bottom:1px solid var(--rc-fieldbrd); }
.rc-hist:active{ background:var(--rc-field); }
.rc-hist i{ color:var(--rc-ink3); margin-right:7px; }
.rc-paid{ color:var(--rc-green); font:700 12px/1 Inter; }
.rc-over{ color:var(--rc-over); font:700 12px/1 Inter; }
.rc-due{ color:var(--rc-ink3); font:700 12px/1 Inter; }
.rc-dt__foot{ display:flex; gap:10px; margin-top:16px; }
.rc-form__foot{ margin-top:20px; }
.rc-icobtn{ width:52px; height:52px; flex:0 0 auto; border-radius:15px; border:1px solid var(--rc-fieldbrd); background:var(--rc-field); color:var(--rc-ink); font-size:18px; cursor:pointer; }
.rc-icobtn:active{ transform:scale(.95); }
.rc-icobtn2{ flex:0 0 auto; padding:0 20px; height:54px; border-radius:16px; border:1px solid var(--rc-fieldbrd); background:var(--rc-field); color:var(--rc-ink); font:700 15px/1 Inter; cursor:pointer; }
.rc-primary{ flex:1; height:54px; border-radius:16px; border:0; color:#fff; background:var(--ind-grad); font:800 15.5px/1 var(--font-display,"Inter Tight",sans-serif); display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 16px 30px -12px rgba(61,79,224,.6); }
.rc-primary:active{ transform:scale(.99); }
.rc-primary:disabled{ opacity:.5; }
.rc-del{ width:100%; margin-top:12px; height:48px; border-radius:14px; border:1px solid transparent; background:transparent; color:var(--rc-over); font:700 14px/1 Inter; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.rc-del:active{ background:rgba(197,39,30,.08); }

/* pre-flight */
.rc-pf__hd{ padding:2px 4px 8px; }
.rc-pf__list{ margin:2px 0; }
.rc-pf__row{ display:flex; align-items:center; gap:12px; padding:12px 8px; border-radius:14px; border-bottom:1px solid var(--rc-fieldbrd); cursor:pointer; }
.rc-pf__row--flag{ background:var(--rc-amberbg); border-bottom:0; margin:2px 0; }
.rc-ck{ width:24px; height:24px; flex:0 0 auto; border-radius:8px; border:2px solid var(--rc-fieldbrd); display:grid; place-items:center; color:transparent; font-size:13px; transition:background .15s ease, border-color .15s ease; }
.rc-ck.on{ background:var(--ind-grad); border-color:transparent; color:#fff; }
.rc-pf__mid{ flex:1; min-width:0; }
.rc-pf__mid b{ font:700 14px/1.1 Inter; color:var(--rc-ink); display:block; }
.rc-pf__mid small{ font:500 11.5px/1.3 Inter; color:var(--rc-ink3); display:block; margin-top:3px; }
.rc-pf__mid small.warn{ color:var(--rc-amber); font-weight:600; }
.rc-pf__amt{ font:700 14px/1 var(--font-ledger,"IBM Plex Mono",monospace); color:var(--rc-ink); flex:0 0 auto; }
.rc-pf__tot{ display:flex; justify-content:space-between; align-items:center; padding:14px 6px 12px; font:600 13px/1 Inter; color:var(--rc-ink3); }
.rc-pf__tot b{ font:800 22px/1 var(--font-display,"Inter Tight",sans-serif); color:var(--rc-ink); }
.rc-pf__go{ width:100%; }
.rc-pf__empty{ text-align:center; padding:20px 0 24px; }
.rc-pf__empty i{ font-size:46px; color:var(--rc-green); }

/* change price */
.rc-pc__now{ display:flex; justify-content:space-between; align-items:center; padding:14px; border-radius:14px; background:var(--rc-field); border:1px solid var(--rc-fieldbrd); }
.rc-pc__now span{ font:600 12px/1 Inter; color:var(--rc-ink3); }
.rc-pc__now b{ font:700 15px/1 var(--font-ledger,"IBM Plex Mono",monospace); color:var(--rc-ink); }
.rc-pc__arrow{ text-align:center; color:var(--ind); font-size:18px; margin:8px 0; }

/* forms (shared: pause, price, new/edit) */
.rc-grp{ display:flex; align-items:center; gap:8px; font:700 10.5px/1 Inter; letter-spacing:.12em; text-transform:uppercase; color:var(--rc-ink3); margin:18px 2px 10px; }
.rc-grp i{ font-size:13px; color:var(--ind); }
.rc-f{ margin-bottom:12px; }
.rc-f > label{ display:block; font:600 12px/1 Inter; color:var(--rc-ink2); margin-bottom:6px; }
.rc-opt{ color:var(--rc-ink3); font-weight:500; }
.rc-frow{ display:flex; gap:10px; }
.rc-frow .rc-f{ flex:1; }
.rc-inp{ width:100%; height:48px; padding:0 14px; border-radius:13px; border:1px solid var(--rc-fieldbrd); background:var(--rc-field); color:var(--rc-ink); font:600 15px/1 Inter; box-sizing:border-box; transition:border-color .15s ease, box-shadow .15s ease; -webkit-appearance:none; appearance:none; }
select.rc-inp{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%237C879C' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:34px; }
.rc-inp:focus{ outline:0; border-color:var(--ind); box-shadow:0 0 0 3px var(--ind-soft,rgba(75,99,255,.16)); }
.rc-suffix{ position:relative; }
.rc-suffix .rc-inp{ padding-right:38px; }
.rc-suffix > span{ position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--rc-ink3); font:700 14px/1 Inter; pointer-events:none; }
.rc-total{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-top:2px; padding:14px; border-radius:14px; background:var(--ind-soft,rgba(75,99,255,.1)); }
.rc-total small{ display:block; font:600 11px/1 Inter; color:var(--rc-ink3); text-transform:uppercase; letter-spacing:.05em; }
.rc-total b{ display:block; font:800 22px/1 var(--font-display,"Inter Tight",sans-serif); color:var(--rc-ink); margin-top:6px; }
.rc-brkline{ text-align:right; font:600 11px/1.5 Inter; color:var(--rc-ink3); max-width:52%; }
.rc-tgl{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; cursor:pointer; }
.rc-tgl span:first-child{ flex:1; }
.rc-tgl b{ display:block; font:700 14px/1.2 Inter; color:var(--rc-ink); }
.rc-tgl small{ display:block; font:500 11.5px/1.35 Inter; color:var(--rc-ink3); margin-top:3px; }
.rc-tgl input{ position:absolute; opacity:0; pointer-events:none; }
.rc-sw{ width:50px; height:30px; flex:0 0 auto; border-radius:16px; background:var(--rc-fieldbrd); position:relative; transition:background .2s ease; }
.rc-sw::after{ content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.25); transition:transform .2s cubic-bezier(.22,1,.36,1); }
.rc-tgl input:checked + .rc-sw{ background:var(--ind-grad); }
.rc-tgl input:checked + .rc-sw::after{ transform:translateX(20px); }
.rc-note{ display:flex; gap:8px; align-items:flex-start; padding:12px 13px; border-radius:13px; background:rgba(14,122,82,.08); color:var(--rc-green); font:600 12px/1.45 Inter; margin:6px 0 16px; }
html[data-theme="dark"] .rc-note{ background:rgba(52,211,153,.1); }
.rc-note--ind{ background:var(--ind-soft,rgba(75,99,255,.1)); color:var(--ind); }
.rc-note i{ margin-top:1px; flex:0 0 auto; }

/* pre-flight done summary */
.rc-done__ic{ width:64px; height:64px; margin:8px auto 6px; border-radius:20px; display:grid; place-items:center; font-size:32px; color:#fff; background:var(--ind-grad); box-shadow:0 16px 30px -12px rgba(61,79,224,.6); }
.rc-done__ttl{ text-align:center; font:800 21px/1.1 var(--font-display,"Inter Tight",sans-serif); color:var(--rc-ink); margin:8px 0 4px; }
.rc-done__sub{ text-align:center; font:500 13px/1.45 Inter; color:var(--rc-ink3); margin:0 10px 16px; }
.rc-sum{ display:flex; gap:10px; }
.rc-sum > div{ flex:1; text-align:center; padding:14px 6px; border-radius:14px; background:var(--rc-field); border:1px solid var(--rc-fieldbrd); }
.rc-sum b{ display:block; font:800 18px/1 var(--font-display,"Inter Tight",sans-serif); color:var(--rc-ink); }
.rc-sum b.ind{ color:var(--ind); }
.rc-sum span{ font:600 10px/1.2 Inter; color:var(--rc-ink3); text-transform:uppercase; letter-spacing:.04em; margin-top:5px; display:block; }
.rc-emailed{ display:flex; gap:8px; align-items:center; justify-content:center; margin-top:12px; padding:11px; border-radius:12px; background:rgba(14,122,82,.08); color:var(--rc-green); font:600 12.5px/1 Inter; }
html[data-theme="dark"] .rc-emailed{ background:rgba(52,211,153,.1); }
.rc-emailed--warn{ background:var(--rc-amberbg); color:var(--rc-amber); }

/* =====================================================================================
   v3.5.1 — Recurring sheets: fix the see-through backdrop bleed. The v3.5.0 sheets used
   the translucent .rc-glass surface with saturate(190%); over the app's own indigo
   (hero, primary button, card icons) the blur+over-saturation smeared into a blue blob
   and the semi-transparent fields vanished into it. Native sheets sit on a near-SOLID
   material — so give .rcx sheets an opaque premium surface + a stronger scrim, while the
   main-screen .rc-hero/.rc-card keep their translucent glass (they read fine on the app
   background). Scoped to .rcx only; append-only.
   ===================================================================================== */
.rcx__scrim{ background:rgba(6,8,14,.62); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
html[data-theme="dark"] .rcx__scrim{ background:rgba(2,4,9,.68); }

/* near-opaque, premium sheet material — overrides .rc-glass on the sheet element only */
.rcx .rcx__sheet{
  background:linear-gradient(180deg,#FFFFFF 0%,#F7F8FC 100%);
  border:1px solid rgba(255,255,255,.9);
  border-top:1px solid rgba(255,255,255,1);
  -webkit-backdrop-filter:blur(30px) saturate(120%); backdrop-filter:blur(30px) saturate(120%);
  box-shadow:0 -1px 0 rgba(10,31,68,.06), 0 -24px 60px -24px rgba(15,23,42,.4), inset 0 1px 0 rgba(255,255,255,1);
}
html[data-theme="dark"] .rcx .rcx__sheet{
  background:linear-gradient(180deg,rgba(28,33,47,.995) 0%,rgba(19,23,33,.99) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-top:1px solid rgba(255,255,255,.14);
  box-shadow:0 -1px 0 rgba(0,0,0,.5), 0 -24px 60px -24px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1);
}
/* the grip a touch more refined on the solid surface */
.rcx .rcx__grip{ background:rgba(120,131,156,.42); }
html[data-theme="dark"] .rcx .rcx__grip{ background:rgba(160,172,200,.34); }

/* v3.5.1 — crisper fields on the now-solid sheet (scoped to .rcx recurring sheets) */
.rcx .rc-inp{ background:#FFFFFF; border-color:rgba(10,31,68,.14); box-shadow:inset 0 1px 2px rgba(10,31,68,.045); }
.rcx .rc-inp:focus{ border-color:var(--ind); box-shadow:0 0 0 3px var(--ind-soft,rgba(75,99,255,.16)); }
html[data-theme="dark"] .rcx .rc-inp{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.13); box-shadow:none; }
.rcx .rc-total{ border:1px solid rgba(75,99,255,.14); }

/* =====================================================================================
   v3.6.0 — NATIVE SPLASH 2026 + v3.6.1 pacing + v3.6.2 hand-off. Theme-aware mesh matching
   the app (seamless hand-off), new indigo glass mark, gold 'Haaltd', slim loader, native
   footer. Motion is 100% compositor-only (transform/opacity). The splash now EXITS with a
   subtle zoom-out+fade (see .is-hidden) that reveals the app materialising beneath. Mirrors
   the inline #splash-critical (identical rules + keyframe names). #app-splash bg uses
   id+!important to beat the old v3.2.2 .app-splash{...!important}. Honours reduced-motion.
   ===================================================================================== */

#app-splash{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:#FFFFFF!important;
  transition:opacity .5s ease,transform .5s cubic-bezier(.4,0,.2,1)}
html[data-theme="dark"] #app-splash{background:#000000!important}
#app-splash.is-hidden{opacity:0;transform:scale(1.04);pointer-events:none}
.spl2{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}
.spl2__stage{position:relative;width:124px;height:124px;display:grid;place-items:center}
.spl2__halo{position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(76,99,255,.24),transparent 64%);opacity:0;will-change:opacity,transform;animation:spl2Halo .8s ease .14s both,spl2Breath 3s ease-in-out 1.7s infinite}
html[data-theme="dark"] .spl2__halo{background:radial-gradient(circle,rgba(96,124,255,.32),transparent 64%)}
.spl2__ring{position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(108,124,255,.42),rgba(108,124,255,0) 62%);opacity:0;transform:scale(.5);will-change:transform,opacity;animation:spl2Ring 1.5s cubic-bezier(.2,.7,.3,1) .18s both}
.spl2__ring2{position:absolute;width:104px;height:104px;border-radius:50%;border:1.5px solid rgba(108,124,255,.55);opacity:0;transform:scale(.7);will-change:transform,opacity;animation:spl2Ring2 1.55s cubic-bezier(.2,.7,.25,1) .34s both}
html[data-theme="dark"] .spl2__ring2{border-color:rgba(140,160,255,.6)}
.spl2__logo{position:relative;width:100px;height:100px;border-radius:27%;overflow:hidden;opacity:0;transform:scale(.72);will-change:transform,opacity;animation:spl2Logo .8s cubic-bezier(.2,.85,.25,1) .14s both;box-shadow:0 26px 50px -16px rgba(56,60,196,.6),0 6px 16px -6px rgba(30,34,120,.4)}
.spl2__logo svg{width:100%;height:100%;display:block}
.spl2__sheen{position:absolute;top:-20%;left:-40%;width:34%;height:140%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.78),transparent);transform:translateX(-150%) skewX(-18deg);opacity:0;will-change:transform,opacity;animation:spl2Sheen 1.4s ease .78s both}
.spl2__word{margin-top:32px;font-family:"Inter Tight",system-ui,-apple-system,sans-serif;font-weight:800;font-size:32px;letter-spacing:-.02em;line-height:1;background:linear-gradient(100deg,transparent 44%,rgba(255,249,232,.85) 50%,transparent 56%),linear-gradient(118deg,#E9CE86,#C79A3C 52%,#9A6A18);background-size:300% 100%,100% 100%;background-position:160% 0,0 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;transform:translateY(12px);will-change:transform,opacity,background-position;animation:spl2Rise .62s cubic-bezier(.2,.8,.2,1) .46s both,spl2Shine 5.6s ease-in-out 1s infinite}
html[data-theme="dark"] .spl2__word{background:linear-gradient(100deg,transparent 44%,rgba(255,252,240,.92) 50%,transparent 56%),linear-gradient(118deg,#F1DA98,#D8B25E 55%,#B98A2C);background-size:300% 100%,100% 100%;background-position:160% 0,0 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent}
.spl2__tag{margin-top:13px;font-family:"Inter",system-ui,-apple-system,sans-serif;font-weight:500;font-size:14.5px;letter-spacing:.004em;color:#5A6172;opacity:0;transform:translateY(12px);will-change:transform,opacity;animation:spl2Rise .62s cubic-bezier(.2,.8,.2,1) .66s both}
html[data-theme="dark"] .spl2__tag{color:#AEB6CC}
.spl2__bar{position:relative;margin-top:28px;width:48px;height:3px;border-radius:3px;overflow:hidden;background:rgba(75,99,255,.16);opacity:0;animation:spl2Rise .6s ease .9s both}
html[data-theme="dark"] .spl2__bar{background:rgba(147,162,255,.18)}
.spl2__bar i{position:absolute;top:0;left:0;height:100%;width:46%;border-radius:3px;background:linear-gradient(90deg,transparent,#4B63FF,transparent);will-change:transform;animation:spl2Bar 1.35s ease-in-out 1.1s infinite}
html[data-theme="dark"] .spl2__bar i{background:linear-gradient(90deg,transparent,#93A2FF,transparent)}
.spl2__foot{position:absolute;left:0;right:0;bottom:calc(36px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:7px;padding:0 40px;opacity:0;transform:translateY(10px);animation:spl2Rise .64s ease 1.18s both}
.spl2__rule{width:26px;height:1px;border-radius:1px;background:linear-gradient(90deg,transparent,rgba(30,40,80,.30),transparent)}
html[data-theme="dark"] .spl2__rule{background:linear-gradient(90deg,transparent,rgba(200,210,255,.30),transparent)}
.spl2__sig{font-family:"Inter",system-ui,-apple-system,sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:#868EA4}
html[data-theme="dark"] .spl2__sig{color:#8C95B0}
.spl2__ded{font-family:"Inter",system-ui,-apple-system,sans-serif;font-weight:600;font-size:13px;letter-spacing:.005em;color:#6C7488}
html[data-theme="dark"] .spl2__ded{color:#B7BFD5}
@keyframes spl2Logo{0%{opacity:0;transform:scale(.72)}55%{opacity:1}70%{transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
@keyframes spl2Halo{0%{opacity:0}100%{opacity:.55}}
@keyframes spl2Breath{0%,100%{opacity:.4}50%{opacity:.72}}
@keyframes spl2Ring{0%{opacity:0;transform:scale(.5)}22%{opacity:.55}100%{opacity:0;transform:scale(2.15)}}
@keyframes spl2Ring2{0%{opacity:0;transform:scale(.7)}25%{opacity:.7}100%{opacity:0;transform:scale(1.9)}}
@keyframes spl2Sheen{0%{opacity:0;transform:translateX(-150%) skewX(-18deg)}14%{opacity:.85}42%{opacity:0}100%{opacity:0;transform:translateX(330%) skewX(-18deg)}}
@keyframes spl2Rise{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}}
@keyframes spl2Shine{0%{background-position:160% 0,0 0}42%{background-position:-60% 0,0 0}100%{background-position:-60% 0,0 0}}
@keyframes spl2Bar{0%{transform:translateX(-120%)}100%{transform:translateX(255%)}}
@media (prefers-reduced-motion:reduce){.spl2__ring,.spl2__ring2,.spl2__sheen,.spl2__bar i,.spl2__halo{animation:none!important}.spl2__halo{opacity:.5}.spl2__logo,.spl2__word,.spl2__tag,.spl2__bar,.spl2__foot{animation-duration:.01ms!important;animation-delay:0ms!important;opacity:1;transform:none;background-position:0 0}.spl2__word{background-position:160% 0,0 0!important}#app-splash.is-hidden{transform:none!important}}
@media (min-width:768px){.spl2__stage{width:150px;height:150px}.spl2__halo{width:280px;height:280px}.spl2__ring{width:146px;height:146px}.spl2__ring2{width:128px;height:128px}.spl2__logo{width:124px;height:124px}.spl2__word{margin-top:38px;font-size:40px}.spl2__tag{margin-top:15px;font-size:17px}.spl2__bar{margin-top:32px;width:60px;height:4px}.spl2__foot{bottom:calc(46px + env(safe-area-inset-bottom,0px));gap:8px}.spl2__rule{width:32px}.spl2__sig{font-size:11.5px}.spl2__ded{font-size:15px}}@media (min-width:1200px){.spl2__stage{width:186px;height:186px}.spl2__halo{width:344px;height:344px}.spl2__ring{width:182px;height:182px}.spl2__ring2{width:158px;height:158px}.spl2__logo{width:156px;height:156px;box-shadow:0 36px 70px -18px rgba(56,60,196,.6),0 10px 22px -8px rgba(30,34,120,.4)}.spl2__word{margin-top:48px;font-size:54px}.spl2__tag{margin-top:19px;font-size:22px}.spl2__bar{margin-top:40px;width:78px;height:4px}.spl2__foot{bottom:calc(58px + env(safe-area-inset-bottom,0px));gap:10px}.spl2__rule{width:40px}.spl2__sig{font-size:13px;letter-spacing:.28em}.spl2__ded{font-size:17px}}

/* v3.6.2 — COORDINATED HAND-OFF. Previously the shell mounted behind an opaque splash, so
   the dashboard's own .dash-in cascade finished unseen and the app 'landed static'. app.js now
   defers the shell reveal + view mount to the hand-off moment (revealShell), so that cascade
   plays in view as the splash zooms out. Here we fade the landing view in and drop the topbar,
   for a premium 'app materialises' entrance. Compositor-only; reduced-motion opts out. */
html.app-entering #app-shell{animation:appEnter .5s cubic-bezier(.2,.8,.2,1) both}
html.app-entering #auth-screen{animation:appEnterRise .55s cubic-bezier(.2,.8,.2,1) both}
html.app-entering .app-topbar{animation:appBarEnter .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes appEnter{from{opacity:0}to{opacity:1}}
@keyframes appEnterRise{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}
@keyframes appBarEnter{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html.app-entering #app-shell,html.app-entering #auth-screen,html.app-entering .app-topbar{animation:none!important}}


/* =====================================================================================
   v3.7.0 — INVOICE LIST QUICK ACTIONS (.ivq)  ·  Native Glass 2026
   Long-press (phone) / right-click (desktop) on an invoice row -> a native bottom
   sheet of quick actions. Reuses the proven v3.4.2 .rb-qa* / v3.5.0 .rcx pattern
   (openSheet + draggableSheet + scroll-lock class html.ivq-open) but is fully
   self-contained (own --iq-* tokens) so it works phone AND desktop (§4.8). Send
   fans out to two premium floating options (To Customer / To Accountant).
   Append-only, component-scoped. Register html.ivq-open in the scroll-lock rule.
   ===================================================================================== */
.ivq{
  position:fixed; inset:0; z-index:3200;
  --iq-ink:#0A1F44; --iq-ink2:#4A5878; --iq-ink3:#7C879C;
  --iq-hair:rgba(10,31,68,.09); --iq-field:rgba(10,31,68,.045);
  --iq-green:#0E7A52; --iq-coral:#C5271E; --iq-amber:#B67912;
  --iq-sheet:linear-gradient(180deg,rgba(252,253,255,.93),rgba(247,249,253,.89));
  --iq-optbg:linear-gradient(180deg,#FFFFFF,#FAFBFE);
  --iq-optbrd:rgba(10,31,68,.08);
  --iq-lift:0 24px 60px -28px rgba(20,28,60,.42);
  --iq-inset:inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="dark"] .ivq{
  --iq-ink:#EAEEF9; --iq-ink2:#A6B2CC; --iq-ink3:#7A87A4;
  --iq-hair:rgba(255,255,255,.10); --iq-field:rgba(255,255,255,.05);
  --iq-green:#34D399; --iq-coral:#F0574C; --iq-amber:#F5B84A;
  --iq-sheet:linear-gradient(180deg,rgba(27,33,48,.96),rgba(18,22,34,.93));
  --iq-optbg:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  --iq-optbrd:rgba(255,255,255,.11);
  --iq-lift:0 26px 64px -28px rgba(0,0,0,.66);
  --iq-inset:inset 0 1px 0 rgba(255,255,255,.09);
}

/* scrim */
.ivq__scrim{ position:absolute; inset:0; background:rgba(6,8,14,.6); opacity:0;
  transition:opacity .34s ease; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.ivq.is-open .ivq__scrim{ opacity:1; }
html[data-theme="dark"] .ivq__scrim{ background:rgba(2,4,9,.66); }

/* sheet */
.ivq__sheet{ position:absolute; left:0; right:0; bottom:0; max-width:560px; margin:0 auto;
  background:var(--iq-sheet); border:1px solid var(--iq-optbrd); border-bottom:0;
  border-radius:30px 30px 0 0; box-shadow:var(--iq-lift),var(--iq-inset);
  -webkit-backdrop-filter:blur(30px) saturate(190%); backdrop-filter:blur(30px) saturate(190%);
  transform:translateY(102%); transition:transform .46s cubic-bezier(.22,1,.36,1);
  max-height:92vh; display:flex; flex-direction:column; will-change:transform; }
.ivq.is-open .ivq__sheet{ transform:translateY(0); }
.ivq__grip{ width:40px; height:5px; border-radius:3px; background:rgba(120,131,156,.42);
  margin:9px auto 2px; flex:0 0 auto; cursor:grab; }
html[data-theme="dark"] .ivq__grip{ background:rgba(160,172,200,.34); }
.ivq__scroll{ overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:6px 14px calc(16px + env(safe-area-inset-bottom,0px)); }

/* stage: cross-fade between the actions list and the send panel */
.ivq-stage{ position:relative; }
.ivq-pane{ transition:opacity .24s ease, transform .3s cubic-bezier(.22,1,.36,1); }
.ivq-pane[hidden]{ display:none; }
.ivq.is-send .ivq-pane--acts{ opacity:0; transform:translateX(-10px); pointer-events:none; }
.ivq-pane--send{ opacity:0; transform:translateX(12px); }
.ivq.is-send .ivq-pane--send{ opacity:1; transform:none; }

/* header (status-toned) */
.ivq-ahd{ display:flex; align-items:center; gap:13px; padding:8px 6px 15px;
  border-bottom:1px solid var(--iq-hair); margin-bottom:6px; }
.ivq-ahd__ic{ position:relative; width:46px; height:46px; flex:0 0 46px; border-radius:14px;
  display:grid; place-items:center; font-size:19px; color:rgb(var(--tone,75,99,255));
  background:rgba(var(--tone,75,99,255),.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 8px 18px -10px rgba(var(--tone,75,99,255),.55); }
.ivq-ahd__ic::after{ content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(120% 90% at 50% 0,rgba(var(--tone,75,99,255),.26),transparent 70%); }
.ivq-ahd__meta{ display:block; min-width:0; flex:1 1 auto; }
.ivq-ahd__no{ display:block; font:600 11.5px/1 var(--font-ledger,"IBM Plex Mono",monospace); color:var(--iq-ink3); letter-spacing:.02em; }
.ivq-ahd__who{ display:block; font:800 17px/1.15 var(--font-display,"Inter Tight",sans-serif); color:var(--iq-ink);
  margin-top:5px; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ivq-ahd__amt{ display:block; flex:0 0 auto; text-align:right; padding-left:10px; }
.ivq-ahd__amt b{ display:block; font:800 16.5px/1 var(--font-ledger,"IBM Plex Mono",monospace); color:var(--iq-ink); font-variant-numeric:tabular-nums; }
.ivq-ahd__amt span{ display:block; margin-top:6px; font:700 9.5px/1 var(--font,Inter); text-transform:uppercase;
  letter-spacing:.09em; color:rgb(var(--tone,75,99,255)); }

/* action rows */
.ivq-rows{ display:flex; flex-direction:column; }
.ivq-row{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; border:0;
  background:transparent; cursor:pointer; padding:13px 8px; border-radius:14px;
  color:var(--iq-ink); -webkit-tap-highlight-color:transparent;
  transition:background .16s ease, transform .12s ease; }
.ivq-row:active{ background:var(--iq-field); transform:scale(.99); }
.ivq-row__ic{ width:38px; height:38px; flex:0 0 38px; border-radius:11px; display:grid; place-items:center;
  font-size:17px; background:var(--ind-soft); color:var(--ind); }
.ivq-row__lbl{ flex:1 1 auto; min-width:0; font:600 15.5px/1.2 var(--font,Inter); }
.ivq-row__go{ flex:0 0 auto; color:var(--iq-ink3); opacity:.4; font-size:13px; }
.ivq-row--wa .ivq-row__ic{ background:rgba(14,122,82,.12); color:var(--iq-green); }
html[data-theme="dark"] .ivq-row--wa .ivq-row__ic{ background:rgba(52,211,153,.16); }
.ivq-row.danger{ color:var(--iq-coral); }
.ivq-row.danger .ivq-row__ic{ background:rgba(197,39,30,.10); color:var(--iq-coral); }
html[data-theme="dark"] .ivq-row.danger .ivq-row__ic{ background:rgba(240,87,76,.16); }
.ivq-sep{ height:1px; background:var(--iq-hair); margin:5px 10px; }

.ivq-cancel{ width:100%; margin-top:10px; height:52px; border-radius:16px; border:1px solid var(--iq-hair);
  background:var(--iq-field); color:var(--ind); font:700 15.5px/1 var(--font,Inter); cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:transform .12s ease; }
.ivq-cancel:active{ transform:scale(.985); }

/* ---- SEND: two premium floating options ---- */
.ivq-shd{ display:flex; align-items:center; gap:12px; padding:2px 2px 16px; }
.ivq-back{ width:36px; height:36px; flex:0 0 36px; border-radius:12px; border:1px solid var(--iq-hair);
  background:var(--iq-field); color:var(--iq-ink2); display:grid; place-items:center; font-size:16px;
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .12s ease; }
.ivq-back:active{ transform:scale(.94); }
.ivq-shd__tt{ display:block; min-width:0; flex:1 1 auto; }
.ivq-shd__t{ display:block; font:800 19px/1.05 var(--font-display,"Inter Tight",sans-serif); color:var(--iq-ink); letter-spacing:-.02em; }
.ivq-shd__s{ display:block; font:500 12px/1.3 var(--font,Inter); color:var(--iq-ink3); margin-top:4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.ivq-opts{ display:flex; flex-direction:column; gap:12px; padding:0 2px 6px; }
.ivq-opt{ position:relative; display:flex; align-items:center; gap:15px; width:100%; text-align:left;
  cursor:pointer; padding:17px 15px; border-radius:20px; border:1px solid var(--iq-optbrd);
  background:var(--iq-optbg); overflow:hidden; -webkit-tap-highlight-color:transparent;
  box-shadow:0 16px 34px -22px rgba(20,28,60,.45), inset 0 1px 0 rgba(255,255,255,.72);
  transition:transform .14s ease, box-shadow .22s ease; }
html[data-theme="dark"] .ivq-opt{ box-shadow:0 18px 38px -24px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.07); }
.ivq-opt:active{ transform:translateY(1px) scale(.99); }
.ivq-opt::before{ content:""; position:absolute; left:0; right:0; top:0; height:72px; pointer-events:none;
  background:radial-gradient(130% 100% at 18% 0,rgba(var(--tone),.16),transparent 72%); }
.ivq-opt__ic{ position:relative; width:52px; height:52px; flex:0 0 52px; border-radius:16px; display:grid;
  place-items:center; font-size:23px; color:#fff;
  background:linear-gradient(150deg,rgb(var(--tone-hi)),rgb(var(--tone)));
  box-shadow:0 12px 24px -10px rgba(var(--tone),.6), inset 0 1px 0 rgba(255,255,255,.4); }
.ivq-opt__body{ display:block; min-width:0; flex:1 1 auto; }
.ivq-opt__t{ display:block; font:800 16.5px/1.12 var(--font-display,"Inter Tight",sans-serif); color:var(--iq-ink); letter-spacing:-.01em; }
.ivq-opt__s{ display:block; font:500 12.5px/1.35 var(--font,Inter); color:var(--iq-ink3); margin-top:4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ivq-opt__go{ flex:0 0 auto; color:rgb(var(--tone)); opacity:.85; font-size:17px; }
.ivq-opt--cust{ --tone:18,160,110; --tone-hi:52,211,153; }
.ivq-opt--acct{ --tone:75,99,255; --tone-hi:108,124,255; }

@media (prefers-reduced-motion: reduce){
  .ivq__sheet, .ivq__scrim, .ivq-pane, .ivq-row, .ivq-opt, .ivq-cancel, .ivq-back{ transition:none; }
}


/* =====================================================================================
   v3.7.0 — INVOICE VIEW CARD premium lift (.ivx--v2)  ·  Native Glass 2026
   A calmer, more editorial evolution of the v3.1.0 glass document: status pill + live
   dot, balance in the reserved GOLD money gradient, contact chips, refined line items &
   totals (grand total gold), and a dock unified with the list quick-actions via a More
   (•••) button that opens the same .ivq sheet. Scoped to .ivx--v2 (added to the viewer
   root when building) so the shipped v3.1.0 look is untouched until enabled. Append-only.
   ===================================================================================== */
.ivx--v2 .ivx-sheet{ border-radius:28px; }

/* hero (replaces the flex top row) */
.ivx--v2 .ivxh{ position:relative; padding:22px 22px 18px; }
.ivx--v2 .ivxh__pill{ display:inline-flex; align-items:center; gap:7px; height:29px; padding:0 13px 0 11px;
  border-radius:999px; font:700 12px/1 var(--font,Inter); letter-spacing:.01em; color:rgb(var(--tone));
  background:rgba(var(--tone),.12); border:1px solid rgba(var(--tone),.22); }
.ivx--v2 .ivxh__dot{ width:7px; height:7px; border-radius:50%; background:rgb(var(--tone));
  box-shadow:0 0 9px rgba(var(--tone),.75); }
.ivx--v2 .ivxh__cap{ margin-top:16px; font:600 12.5px/1 var(--font,Inter); color:var(--m-ink-3); letter-spacing:.01em; }
.ivx--v2 .ivxh__amt{ margin-top:9px; font:800 clamp(38px,12.5vw,47px)/1 var(--font-display,"Inter Tight",sans-serif);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  background:linear-gradient(122deg,#E9CE86 0%,#C79A3C 52%,#9A6A18 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
html[data-theme="dark"] .ivx--v2 .ivxh__amt{ background:linear-gradient(122deg,#F3E2A8,#D6B26E 58%,#B98F3E);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.ivx--v2 .ivxh__sub{ margin-top:11px; font:600 12.5px/1 var(--font,Inter); color:rgb(var(--tone)); }
.ivx--v2.ivx--settled .ivxh__sub, .ivx--v2 .ivxh__sub.muted{ color:var(--m-ink-3); font-weight:500; }
.ivx--v2 .ivxh__meta{ display:flex; gap:8px; margin-top:15px; flex-wrap:wrap; }
.ivx--v2 .ivx-chip{ display:inline-flex; align-items:center; gap:6px; height:31px; padding:0 12px; border-radius:10px;
  font:600 12px/1 var(--font,Inter); color:var(--m-ink-2); background:rgba(10,31,68,.045); border:1px solid var(--m-hair); }
html[data-theme="dark"] .ivx--v2 .ivx-chip{ background:rgba(255,255,255,.05); }
.ivx--v2 .ivx-chip i{ font-size:13px; color:var(--m-ink-3); }

/* party + contact chips */
.ivx--v2 .ivx-party2{ display:flex; align-items:flex-start; gap:13px; padding:16px 22px; }
.ivx--v2 .ivx-party2 .ivx-ava{ width:46px; height:46px; flex:0 0 46px; border-radius:14px; display:grid; place-items:center;
  font:800 15px/1 var(--font-display,"Inter Tight",sans-serif); color:#fff;
  background:linear-gradient(150deg,#33507F,#0A1F44); box-shadow:0 8px 18px -10px rgba(10,31,68,.6), inset 0 1px 0 rgba(255,255,255,.2); }
.ivx--v2 .ivx-party2__body{ min-width:0; flex:1; }
.ivx--v2 .ivx-party__name{ font:800 16px/1.15 var(--font-display,"Inter Tight",sans-serif); color:var(--m-ink); letter-spacing:-.01em; }
.ivx--v2 .ivx-cc{ display:flex; flex-direction:column; gap:6px; margin-top:9px; }
.ivx--v2 .ivx-cc__i{ display:inline-flex; align-items:center; gap:8px; font:500 12.5px/1.2 var(--font,Inter); color:var(--m-ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ivx--v2 .ivx-cc__i i{ font-size:13px; color:var(--m-ink-3); flex:0 0 auto; }

/* line items */
.ivx--v2 .ivx-items{ padding:8px 22px 4px; }
.ivx--v2 .ivx-items__h{ font:700 10px/1 var(--font,Inter); letter-spacing:.14em; text-transform:uppercase; color:var(--m-ink-3); margin:2px 0 8px; }
.ivx--v2 .ivx-item{ display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--m-hair); }
.ivx--v2 .ivx-item:first-of-type{ border-top:0; }
.ivx--v2 .ivx-item__ic{ width:38px; height:38px; border-radius:11px; flex:0 0 38px; display:grid; place-items:center;
  font-size:16px; background:var(--ind-soft); color:var(--ind); }
.ivx--v2 .ivx-item__main{ flex:1; min-width:0; }
.ivx--v2 .ivx-item__desc{ font:650 14px/1.3 var(--font,Inter); color:var(--m-ink); }
.ivx--v2 .ivx-item__qty{ font:500 11.5px/1 var(--font-ledger,"IBM Plex Mono",monospace); color:var(--m-ink-3); margin-top:4px; }
.ivx--v2 .ivx-item__amt{ font:700 14px/1 var(--font-ledger,"IBM Plex Mono",monospace); color:var(--m-ink); flex:0 0 auto; font-variant-numeric:tabular-nums; }

/* totals */
.ivx--v2 .ivx-tot{ padding:14px 22px 20px; }
.ivx--v2 .ivx-tot__row{ display:flex; justify-content:space-between; font:500 13px/1 var(--font,Inter); color:var(--m-ink-2); margin-bottom:9px; }
.ivx--v2 .ivx-tot__row span:last-child{ font:600 13px/1 var(--font-ledger,"IBM Plex Mono",monospace); color:var(--m-ink); font-variant-numeric:tabular-nums; }
.ivx--v2 .ivx-tot__row--paid span:last-child{ color:var(--m-green); }
.ivx--v2 .ivx-tot__row--total{ align-items:baseline; margin:12px 0 0; padding-top:13px; border-top:1px solid var(--m-hair); }
.ivx--v2 .ivx-tot__row--total > span:first-child{ font:800 12px/1 var(--font,Inter); letter-spacing:.06em; text-transform:uppercase; color:var(--m-ink-2); }
.ivx--v2 .ivx-tot__row--total > span:last-child{ font:800 19px/1 var(--font-display,"Inter Tight",sans-serif); font-variant-numeric:tabular-nums;
  background:linear-gradient(122deg,#E9CE86,#C79A3C 55%,#9A6A18); -webkit-background-clip:text; background-clip:text; color:transparent; }
html[data-theme="dark"] .ivx--v2 .ivx-tot__row--total > span:last-child{ background:linear-gradient(122deg,#F3E2A8,#D6B26E 58%,#B98F3E); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* dock — unified with the list quick-actions (More opens the .ivq sheet) */
.ivx--v2 .ivx-dock__more{ width:50px; height:50px; flex:0 0 auto; border:0; border-radius:15px; display:grid; place-items:center;
  font-size:19px; cursor:pointer; color:var(--ind); background:rgba(75,99,255,.10); box-shadow:inset 0 1px 0 rgba(255,255,255,.6); }
html[data-theme="dark"] .ivx--v2 .ivx-dock__more{ background:rgba(129,144,255,.16); color:#93A2FF; box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.ivx--v2 .ivx-dock__more:active{ transform:scale(.96); }

/* v3.7.0 — .ivq small states: disabled send option + send-only sheet reveal */
.ivq-opt[disabled]{ opacity:.5; cursor:default; }
.ivq-opt[disabled]:active{ transform:none; }
.ivq--send-only .ivq-pane--send{ opacity:1 !important; transform:none !important; }


/* =====================================================================================
   v3.7.2 — RECURRING "Auto-bill" toggle card (.rc-auto)  ·  Native Glass 2026
   An in-app on/off control for the automatic monthly billing feature (backend v3.7.1).
   Reads public.recurring_billing_status, writes via haaltd_recurring_autobill_set().
   Capability-probed: the card only renders when the backend feature is deployed, so
   older databases show nothing. Sits between the MRR hero and "Bill this month".
   Append-only, scoped to .rc. Premium gold switch (money accent) when ON.
   ===================================================================================== */
.rc-auto{ margin:12px 16px 0; border-radius:20px; padding:15px 16px; position:relative; overflow:hidden; }
.rc-auto::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(90% 120% at 88% 0,rgba(199,154,60,.16),transparent 62%); }
.rc-auto.is-on::before{ opacity:1; }

.rc-auto__hd{ display:flex; align-items:center; gap:13px; position:relative; }
.rc-auto__ic{ width:44px; height:44px; flex:0 0 44px; border-radius:13px; display:grid; place-items:center; font-size:20px;
  background:var(--ind-soft,rgba(75,99,255,.12)); color:var(--ind,#4B63FF);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5); transition:background .28s ease, color .28s ease, box-shadow .28s ease; }
.rc-auto.is-on .rc-auto__ic{ background:linear-gradient(150deg,rgba(228,200,120,.26),rgba(199,154,60,.16)); color:#B9871F;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 8px 18px -10px rgba(199,154,60,.55); }
html[data-theme="dark"] .rc-auto.is-on .rc-auto__ic{ color:#E4C878; }

.rc-auto__tt{ flex:1; min-width:0; }
.rc-auto__t{ font:800 15.5px/1.1 var(--font-display,"Inter Tight",sans-serif); color:var(--rc-ink); letter-spacing:-.01em;
  display:flex; align-items:center; gap:8px; }
.rc-auto__pill{ display:none; font:800 9px/1 Inter; letter-spacing:.09em; text-transform:uppercase; padding:4px 8px;
  border-radius:999px; color:#3a2a06; background:var(--gold-grad,linear-gradient(135deg,#E4C878,#C79A3C)); }
.rc-auto.is-on .rc-auto__pill{ display:inline-block; }
.rc-auto__s{ font:500 12px/1.35 Inter; color:var(--rc-ink3); margin-top:5px; }

/* the premium switch — grey (off) -> gold (on) */
.rc-sw{ position:relative; flex:0 0 auto; width:52px; height:32px; border-radius:999px; cursor:pointer; border:0; padding:0;
  background:rgba(120,131,156,.34); -webkit-tap-highlight-color:transparent;
  transition:background .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease; }
html[data-theme="dark"] .rc-sw{ background:rgba(160,172,200,.28); }
.rc-sw::after{ content:""; position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.26), 0 1px 2px rgba(0,0,0,.2); transition:transform .3s cubic-bezier(.22,1,.36,1), width .18s ease; }
.rc-auto.is-on .rc-sw{ background:linear-gradient(135deg,#E4C878,#C79A3C); box-shadow:0 8px 18px -8px rgba(199,154,60,.6); }
.rc-sw[aria-checked="true"]{ background:linear-gradient(135deg,#E4C878,#C79A3C); box-shadow:0 8px 18px -8px rgba(199,154,60,.6); }
.rc-auto.is-on .rc-sw::after{ transform:translateX(20px); }
.rc-sw[aria-checked="true"]::after{ transform:translateX(20px); }
.rc-sw:active::after{ width:30px; }
.rc-sw[aria-busy="true"]{ opacity:.6; pointer-events:none; }

/* ON: one quiet meta row (next run + last run), only when there's something to show */
.rc-auto__meta{ display:none; margin-top:13px; padding-top:12px; border-top:1px solid var(--rc-fieldbrd);
  gap:8px; align-items:center; flex-wrap:wrap; position:relative; }
.rc-auto.is-on .rc-auto__meta{ display:flex; }
.rc-auto__chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:10px;
  background:var(--rc-field); border:1px solid var(--rc-fieldbrd); color:var(--rc-ink2); font:600 11.5px/1 Inter; }
.rc-auto__chip i{ color:var(--rc-ink3); font-size:12px; }
.rc-auto__chip.ok i{ color:var(--rc-green); }

@media (prefers-reduced-motion: reduce){ .rc-auto__ic, .rc-sw, .rc-sw::after, .rc-auto::before{ transition:none; } }


/* =====================================================================================
   v3.7.2 — RECURRING "Auto-bill" settings sheet (.rca-*)  ·  Native Glass 2026
   Opens when the Auto-bill card body is tapped. Renders inside the proven .rcx sheet
   shell (openSheet). Shows status + editable schedule (day / UK time / send emails) and
   a plain-words explanation. Writes via haaltd_recurring_autobill_config(). Append-only,
   scoped to .rca-*. Reuses the .rc-sw premium switch and --rc-* / --gold-grad tokens.
   ===================================================================================== */
.rca-hd{ display:flex; align-items:center; gap:13px; padding:2px 2px 16px; }
.rca-hd__ic{ width:46px; height:46px; flex:0 0 46px; border-radius:14px; display:grid; place-items:center; font-size:21px;
  color:#B9871F; background:linear-gradient(150deg,rgba(228,200,120,.26),rgba(199,154,60,.16));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 8px 18px -10px rgba(199,154,60,.5); }
html[data-theme="dark"] .rca-hd__ic{ color:#E4C878; }
.rca-hd__tt{ flex:1; min-width:0; }
.rca-hd__t{ font:800 19px/1.05 var(--font-display,"Inter Tight",sans-serif); color:var(--rc-ink); letter-spacing:-.02em;
  display:flex; align-items:center; gap:9px; }
.rca-hd__pill{ font:800 9px/1 Inter; letter-spacing:.09em; text-transform:uppercase; padding:4px 8px; border-radius:999px;
  color:var(--rc-ink3); background:var(--rc-field); border:1px solid var(--rc-fieldbrd); }
.rca-hd.is-on .rca-hd__pill{ color:#3a2a06; background:var(--gold-grad,linear-gradient(135deg,#E4C878,#C79A3C)); border-color:transparent; }
.rca-hd__s{ display:block; font:500 12px/1.3 Inter; color:var(--rc-ink3); margin-top:4px; }

/* master on/off row */
.rca-master{ display:flex; align-items:center; gap:13px; padding:15px 14px; border-radius:16px;
  background:var(--rc-field); border:1px solid var(--rc-fieldbrd); }
.rca-master__tt{ flex:1; min-width:0; }
.rca-master__t{ display:block; font:700 15px/1.1 Inter; color:var(--rc-ink); }
.rca-master__s{ display:block; font:500 12px/1.35 Inter; color:var(--rc-ink3); margin-top:4px; }

/* section label */
.rca-sec{ font:700 10.5px/1 Inter; letter-spacing:.14em; text-transform:uppercase; color:var(--rc-ink3); margin:20px 6px 6px; }

/* setting rows */
.rca-rows{ border-radius:16px; background:var(--rc-field); border:1px solid var(--rc-fieldbrd); overflow:hidden; }
.rca-row{ display:flex; align-items:center; gap:13px; padding:13px 14px; border-bottom:1px solid var(--rc-fieldbrd); }
.rca-row:last-child{ border-bottom:0; }
.rca-row__ic{ width:30px; flex:0 0 30px; text-align:center; font-size:16px; color:var(--ind); }
.rca-row__l{ flex:1; min-width:0; }
.rca-row__t{ display:block; font:600 14.5px/1.15 Inter; color:var(--rc-ink); }
.rca-row__s{ display:block; font:500 11.5px/1.3 Inter; color:var(--rc-ink3); margin-top:3px; }
.rca-disabled{ opacity:.42; pointer-events:none; }

/* stepper control */
.rca-step{ display:inline-flex; align-items:center; gap:2px; flex:0 0 auto; padding:3px; border-radius:12px;
  background:var(--rc-glass); border:1px solid var(--rc-fieldbrd); }
.rca-step button{ width:34px; height:34px; border:0; border-radius:9px; background:transparent; color:var(--ind); font-size:16px;
  display:grid; place-items:center; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .14s ease; }
.rca-step button:active{ background:var(--rc-field); }
.rca-step__v{ min-width:58px; text-align:center; font:700 14px/1 var(--font-ledger,"IBM Plex Mono",monospace);
  color:var(--rc-ink); font-variant-numeric:tabular-nums; }

/* status block */
.rca-status{ border-radius:16px; background:var(--rc-field); border:1px solid var(--rc-fieldbrd); padding:4px 14px; }
.rca-st{ display:flex; align-items:center; gap:11px; padding:12px 0; border-bottom:1px solid var(--rc-fieldbrd); }
.rca-st:last-child{ border-bottom:0; }
.rca-st__ic{ width:28px; flex:0 0 28px; text-align:center; font-size:15px; color:var(--rc-ink3); }
.rca-st__ic.ok{ color:var(--rc-green); }
.rca-st__l{ flex:1; min-width:0; font:600 13px/1.2 Inter; color:var(--rc-ink); }
.rca-st__l small{ display:block; font:500 11.5px/1.3 Inter; color:var(--rc-ink3); margin-top:3px; }
.rca-st__v{ flex:0 0 auto; font:700 13px/1 var(--font-ledger,"IBM Plex Mono",monospace); color:var(--rc-ink2); }

/* explanation */
.rca-note{ display:flex; gap:10px; margin:16px 4px 4px; }
.rca-note i{ color:var(--ind); font-size:15px; flex:0 0 auto; margin-top:1px; }
.rca-note p{ margin:0; font:500 12px/1.55 Inter; color:var(--rc-ink3); }
.rca-note b{ color:var(--rc-ink2); font-weight:700; }


/* =====================================================================================
   v3.7.3 — BOTTOM NAV OVERHAUL. The floating pill left a white gap under it and the FAB
   could vanish (see native.js kb-open fix). This makes the bar EDGE-TO-EDGE and FLUSH to
   the phone bottom — its frosted surface fills the safe-area inset, so there's no gap and
   it reads as a true native tab bar. The FAB stays elevated but its cut-out ring is the
   BAR's own surface colour (not the page), so it renders correctly in every section and
   theme. Appended last; keyed by #app-tabbar to win the cascade.
   ===================================================================================== */
:root{ --nav-surface:#F7F8FC; }
html[data-theme="dark"]{ --nav-surface:#161821; }

#app-tabbar.tabbar{
  left:0; right:0; top:auto; bottom:0; width:100%; max-width:none; margin:0;
  height:auto; min-height:58px;
  display:flex; align-items:center; justify-content:space-around; gap:2px;
  padding:7px 12px calc(7px + env(safe-area-inset-bottom, 0px));   /* fills the safe area → no gap */
  border:0; border-top:1px solid rgba(17,18,20,.06); border-radius:20px 20px 0 0;
  background:rgba(249,250,252,.9);
  -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 -10px 30px -20px rgba(16,24,40,.28), inset 0 1px 0 rgba(255,255,255,.8);
  will-change:auto;
}
html[data-theme="dark"] #app-tabbar.tabbar{
  background:rgba(20,22,29,.9); border-top-color:rgba(255,255,255,.08);
  box-shadow:0 -12px 34px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
}

#app-tabbar .tabbar__item{ flex:1; min-width:44px; height:52px; }

/* elevated FAB — ring is the bar surface (page-colour-independent), plus real elevation */
#app-tabbar .tabbar__fab{
  margin:-24px 6px 0; width:56px; height:56px; border-radius:50%;
  box-shadow:
    0 10px 24px -6px rgba(61,79,224,.55),
    0 2px 6px rgba(16,24,40,.20),
    0 0 0 4px var(--nav-surface),
    inset 0 1px 0 rgba(255,255,255,.35);
}
html[data-theme="dark"] #app-tabbar .tabbar__fab{
  box-shadow:
    0 10px 24px -6px rgba(61,79,224,.60),
    0 2px 6px rgba(0,0,0,.40),
    0 0 0 4px var(--nav-surface),
    inset 0 1px 0 rgba(255,255,255,.28);
}

/* the speed-dial should clear the taller, flush bar */
.speeddial__actions{ bottom:calc(84px + env(safe-area-inset-bottom, 0px)) !important; }


/* =====================================================================================
   v3.7.4 — SEAMLESS SOLID NAV. The frosted (translucent) bar made its safe-area strip read
   as a separate white band over the phone's white bottom. Make the bar a SOLID opaque
   surface all the way down so it blends into the bottom with no seam — white in light, a
   solid near-page dark in dark. Ring colour follows. Appended last; keyed by #app-tabbar.
   ===================================================================================== */
:root{ --nav-surface:#FFFFFF; }
html[data-theme="dark"]{ --nav-surface:#12141B; }

#app-tabbar.tabbar{
  background:#FFFFFF;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border-top:1px solid rgba(17,18,20,.08);
  box-shadow:0 -8px 24px -18px rgba(16,24,40,.22);
}
html[data-theme="dark"] #app-tabbar.tabbar{
  background:#12141B;
  border-top-color:rgba(255,255,255,.07);
  box-shadow:0 -8px 24px -18px rgba(0,0,0,.6);
}

/* paint the very bottom safe-area edge to match, so no system sliver ever shows a seam */
html.dm-on body::after{
  content:""; position:fixed; left:0; right:0; bottom:0;
  height:env(safe-area-inset-bottom,0px); background:#FFFFFF; z-index:1039; pointer-events:none;
}
html[data-theme="dark"].dm-on body::after{ background:#12141B; }


/* =====================================================================================
   v3.7.5 — TIGHTEN NAV TO THE BOTTOM. viewport-fit=cover exposes a large gesture-nav inset
   on Android; reserving the FULL inset (7px + env) left a tall empty white band below the
   labels — the "gap". Cap the reserved inset so the bar hugs the bottom (the thin, centred
   gesture pill overlays harmlessly), while still leaving a little clearance for a real home
   indicator. Appended last; keyed by #app-tabbar.
   ===================================================================================== */
#app-tabbar.tabbar{
  min-height:54px;
  padding-top:6px;
  padding-bottom:calc(6px + min(env(safe-area-inset-bottom, 0px), 10px));
}
#app-tabbar .tabbar__item{ height:46px; }
html.dm-on body::after{ height:min(env(safe-area-inset-bottom, 0px), 10px); }

/* =====================================================================================
 *  v3.7.7 — PREMIUM BOTTOM NAV (floating glass dock) + FAB-in-Recurring fix
 *  ------------------------------------------------------------------------------------
 *  Append-only, keyed by #app-tabbar to win the cascade over the v2.42 pill block and the
 *  v2.7x charcoal/gold FAB block. The bar is now mounted on <body> (js/core/app.js), so it
 *  can't rely on html.dm-on tokens — every colour here is literal / theme-explicit. Gold is
 *  retired from all chrome (buttons/nav) per §4.7; the active state + FAB are now INDIGO.
 * ================================================================================== */
@media (max-width: 767.98px) {

  /* ---- the dock ---- */
  #app-tabbar.tabbar {
    left: 16px; right: 16px; width: auto; max-width: 430px; margin: 0 auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
    height: 64px; gap: 2px; padding: 0 10px; border-radius: 30px;
    background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.64));
    border: 1px solid rgba(17,18,20,.05);
    box-shadow: 0 20px 44px -18px rgba(16,24,40,.32), 0 6px 16px -8px rgba(16,24,40,.14), inset 0 1px 0 rgba(255,255,255,.96);
    -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  }
  html[data-theme="dark"] #app-tabbar.tabbar {
    background: linear-gradient(180deg, rgba(33,36,44,.88), rgba(23,25,31,.76));
    border-color: rgba(255,255,255,.09);
    box-shadow: 0 22px 50px -18px rgba(0,0,0,.72), 0 6px 16px -8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07);
  }

  /* ---- items (muted → indigo when active) ---- */
  #app-tabbar .tabbar__item,
  html[data-theme="dark"] #app-tabbar .tabbar__item { color: #6B7280; }
  html[data-theme="dark"] #app-tabbar .tabbar__item { color: rgba(255,255,255,.52); }
  #app-tabbar .tabbar__item > span:last-child { font-size: 10px; font-weight: 600; letter-spacing: .01em; }

  #app-tabbar .tabbar__item.is-active,
  html[data-theme="dark"] #app-tabbar .tabbar__item.is-active { color: #4B63FF; }
  html[data-theme="dark"] #app-tabbar .tabbar__item.is-active { color: #93A2FF; }

  /* filled glyph follows the indigo item colour (kill the gold gradient fill) */
  #app-tabbar .tabbar__item.is-active .ni--solid { fill: currentColor; }
  /* indigo label (kill the gold text-clip) */
  #app-tabbar .tabbar__item.is-active > span:last-child {
    background: none; -webkit-background-clip: border-box; background-clip: border-box;
    -webkit-text-fill-color: currentColor; color: currentColor;
  }

  /* soft indigo active pill (replaces the gold wash); fully re-specced geometry */
  #app-tabbar .tabbar__item::before {
    content: ""; position: absolute; z-index: 0;
    inset: auto; left: 50%; top: 8px; right: auto; bottom: auto;
    width: 52px; height: 34px; border-radius: 14px; transform: translateX(-50%);
    background: transparent; opacity: 1;
    transition: background .22s ease;
  }
  #app-tabbar .tabbar__item.is-active::before { transform: translateX(-50%); opacity: 1; background: rgba(75,99,255,.12); }
  html[data-theme="dark"] #app-tabbar .tabbar__item.is-active::before { background: rgba(129,144,255,.18); }

  #app-tabbar .tabbar__ico { position: relative; z-index: 1; width: 26px; height: 26px; }
  #app-tabbar .tabbar__ico .ni { width: 25px; height: 25px; }

  /* ---- FAB — on-brand indigo gradient, notched, page-coloured ring ---- */
  #app-tabbar .tabbar__fab,
  html[data-theme="dark"] #app-tabbar .tabbar__fab {
    position: relative; flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%;
    margin: -26px 8px 0; display: grid; place-items: center; color: #fff; border: 0; overflow: visible;
    background: linear-gradient(155deg, #6C7CFF 0%, #4B5EF5 48%, #3D4FE0 100%);
    box-shadow: 0 16px 30px -8px rgba(61,79,224,.6), 0 0 0 5px #F4F4F2,
                inset 0 1.5px 0 rgba(255,255,255,.42), inset 0 -8px 16px -6px rgba(30,34,120,.5);
  }
  html[data-theme="dark"] #app-tabbar .tabbar__fab {
    box-shadow: 0 16px 30px -8px rgba(61,79,224,.66), 0 0 0 5px #121316,
                inset 0 1.5px 0 rgba(255,255,255,.4), inset 0 -8px 16px -6px rgba(19,21,90,.6);
  }
  #app-tabbar .tabbar__fab::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: linear-gradient(125deg, rgba(255,255,255,.28) 6%, transparent 44%);
  }
  #app-tabbar .tabbar__fab .ni { width: 27px; height: 27px; position: relative; z-index: 1; }
  #app-tabbar .tabbar__fab .ni--out { stroke: #fff; stroke-width: 2.4; }

  /* ---- speed-dial: indigo chips (bar is body-mounted → no dm-on tokens) ---- */
  #app-speeddial .dial-act__ic,
  .speeddial .dial-act--inv .dial-act__ic,
  .speeddial .dial-act--cust .dial-act__ic,
  .speeddial .dial-act--pay .dial-act__ic { background: rgba(75,99,255,.12); }
  #app-speeddial .dial-act__ic svg,
  .speeddial .dial-act--inv .dial-act__ic svg,
  .speeddial .dial-act--cust .dial-act__ic svg,
  .speeddial .dial-act--pay .dial-act__ic svg { stroke: #4B63FF; }
  #app-speeddial .dial-act__t { color: #0A1F44; }
  html[data-theme="dark"] #app-speeddial .dial-act__ic,
  html[data-theme="dark"] .speeddial .dial-act--inv .dial-act__ic,
  html[data-theme="dark"] .speeddial .dial-act--cust .dial-act__ic,
  html[data-theme="dark"] .speeddial .dial-act--pay .dial-act__ic { background: rgba(129,144,255,.2); }
  html[data-theme="dark"] #app-speeddial .dial-act__ic svg,
  html[data-theme="dark"] .speeddial .dial-act--inv .dial-act__ic svg,
  html[data-theme="dark"] .speeddial .dial-act--cust .dial-act__ic svg,
  html[data-theme="dark"] .speeddial .dial-act--pay .dial-act__ic svg { stroke: #93A2FF; }
  html[data-theme="dark"] #app-speeddial .dial-act__t { color: #EAEEF9; }
}

/* =====================================================================================
 *  v3.7.8 — APP PAGE → pure white (light) / true black (dark)
 *  ------------------------------------------------------------------------------------
 *  Owner request: the page should melt into the phone's edges. Retargets the two page-
 *  derived tokens (--m-bg, --m-ring-page) and the frosted-glass tint; the unified launch
 *  surface (index.html critical CSS + theme.js paintMeta + <meta theme-color>) is moved to
 *  the same #FFFFFF / #000000 in lockstep, so the seamless-open work (v3.7.6) is preserved.
 *  Cards keep their own --m-surface fill, so they still read on the new page. Append-only.
 * ================================================================================== */
html.dm-on                    { --m-bg: #FFFFFF; --m-ring-page: #FFFFFF; --m-glass: rgba(255, 255, 255, .62); }
html.dm-on[data-theme="dark"] { --m-bg: #000000; --m-ring-page: #000000; --m-glass: rgba(0, 0, 0, .60); }

/* The body-mounted FAB ring hardcodes a page colour (it can't inherit dm-on vars on every
   screen), so re-punch it to the new page — no grey halo around the +. */
@media (max-width: 767.98px) {
  #app-tabbar .tabbar__fab {
    box-shadow: 0 16px 30px -8px rgba(61,79,224,.6), 0 0 0 5px #FFFFFF,
                inset 0 1.5px 0 rgba(255,255,255,.42), inset 0 -8px 16px -6px rgba(30,34,120,.5);
  }
  html[data-theme="dark"] #app-tabbar .tabbar__fab {
    box-shadow: 0 16px 30px -8px rgba(61,79,224,.66), 0 0 0 5px #000000,
                inset 0 1.5px 0 rgba(255,255,255,.4), inset 0 -8px 16px -6px rgba(19,21,90,.6);
  }
}

/* -------------------------------------------------------------------------------------
 *  v3.7.8 (cont.) — the page is ALSO painted by LATER literal rules and a full-screen
 *  ambient mesh (.dm__amb, the colourful "mixed" layer the owner flagged). Override every
 *  one so the surface is truly flat pure-white / true-black, edge to edge, on every screen.
 * ----------------------------------------------------------------------------------- */

/* 1) neutralise the dashboard ambient mesh (this is the mixed colour) */
html.dm-on .dm__amb,
html.dm-on .dm__amb-g { display: none !important; }

/* 2) the flat page fill (also covers rubber-band overscroll) */
html.dm-on .app-shell, html.dm-on .app-main, html.dm-on, html.dm-on body { background: #FFFFFF; }
html[data-theme="dark"].dm-on .app-shell, html[data-theme="dark"].dm-on .app-main,
html[data-theme="dark"].dm-on, html[data-theme="dark"].dm-on body { background: #000000; }

/* 3) header top cap (= theme-color = page, so the notch area is seamless) */
html.dm-on { --hdr-top: #FFFFFF; }
html[data-theme="dark"].dm-on { --hdr-top: #000000; }

/* 4) invoice-detail document screen base */
.dm.ivx { background: #FFFFFF; }
html[data-theme="dark"] .dm.ivx { background: #000000; }

/* =====================================================================================
 *  v3.7.9 — DASHBOARD (surgical): metric carousel dots · segmented Chasing/Activity panel
 *  · premium visible glass. Owner kept the header + month-rail glass and the Focus hero;
 *  only these two components change, plus the glass is dialled up so it reads on the new
 *  pure-white / true-black page. Append-only, scoped html.dm-on.
 * ================================================================================== */
@media (max-width: 767.98px) {

  /* ---- metric carousel: turn the dashboard .dgrid into a peeking swipe rail (keeps every
     existing .dgrid .dtile theme rule, light + dark) ---- */
  html.dm-on .dwx .dgrid { display: flex; gap: 12px; grid-template-columns: none;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 12px calc(var(--m-gutter) * -1) 0; padding: 4px var(--m-gutter) 2px; }
  html.dm-on .dwx .dgrid::-webkit-scrollbar { display: none; }
  html.dm-on .dwx .dgrid .dtile { flex: 0 0 79%; max-width: 290px; min-height: 150px;
    scroll-snap-align: start; scroll-snap-stop: always; }

  /* ---- metric carousel paging dots (JS builds the dots) ---- */
  html.dm-on .dwx__dots { display: flex; justify-content: center; gap: 6px; margin: 13px 0 0; }
  html.dm-on .dwx__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--m-hair-2);
    transition: width .25s ease, background .25s ease; }
  html.dm-on .dwx__dots i.on { width: 18px; border-radius: 3px; background: var(--ind, #4B63FF); }
  html[data-theme="dark"].dm-on .dwx__dots i.on { background: var(--ind, #93A2FF); }

  /* ---- segmented Chasing / Activity control (premium glass tray) ---- */
  html.dm-on .dseg { display: flex; gap: 5px; padding: 5px; border-radius: 15px; margin: 0;
    background: linear-gradient(180deg, rgba(247,248,252,.92), rgba(235,238,246,.72));
    border: 1px solid rgba(17,22,50,.09);
    box-shadow: 0 10px 24px -14px rgba(20,30,70,.26), inset 0 1px 0 rgba(255,255,255,.95);
    -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%); }
  html[data-theme="dark"].dm-on .dseg { background: linear-gradient(180deg, rgba(40,43,51,.92), rgba(26,28,34,.72));
    border-color: rgba(255,255,255,.11); box-shadow: 0 12px 26px -16px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.09); }
  html.dm-on .dseg__b { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: 0; background: transparent; padding: 9px 0; border-radius: 11px; cursor: pointer;
    font: 700 12.5px/1 var(--font); color: var(--m-ink-3); transition: color .2s ease; }
  html.dm-on .dseg__b.is-on { color: var(--m-ink); background: var(--m-surface);
    box-shadow: 0 8px 18px -8px rgba(16,24,40,.30), inset 0 1px 0 rgba(255,255,255,.9); }
  html[data-theme="dark"].dm-on .dseg__b.is-on { background: #2E313A;
    box-shadow: 0 8px 18px -8px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.10); }
  html.dm-on .dseg__n { font: 800 10px/1 var(--font); color: #fff; background: var(--m-coral);
    border-radius: 999px; padding: 2px 6px; }

  /* ---- segmented panels: the control is the header, so hide each inner section's
     eyebrow+title; keep the See-all / View-all link; neutralise inner spacing + entrance ---- */
  html.dm-on .dsegx__body { margin-top: 2px; }
  html.dm-on .dsegx__panel[hidden] { display: none; }
  html.dm-on .dsegx__panel > .sect { margin: 0 !important; gap: 4px;
    animation: none !important; opacity: 1 !important; transform: none !important; contain: none; }
  html.dm-on .dsegx__panel .sect__hl { display: none; }
  html.dm-on .dsegx__panel .sect__head { min-height: 0; padding: 0; margin: 0; justify-content: flex-end; }

  /* ---- premium visible GLASS: month rail (bg/border/shadow only — layout untouched) ---- */
  html.dm-on .mrail--v3 { padding: 5px; border-radius: 17px;
    background: linear-gradient(180deg, rgba(247,248,252,.92), rgba(235,238,246,.72));
    border: 1px solid rgba(17,22,50,.09);
    box-shadow: 0 10px 24px -14px rgba(20,30,70,.28), inset 0 1px 0 rgba(255,255,255,.95);
    -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%); }
  html[data-theme="dark"].dm-on .mrail--v3 { background: linear-gradient(180deg, rgba(40,43,51,.92), rgba(26,28,34,.72));
    border-color: rgba(255,255,255,.11); box-shadow: 0 12px 26px -16px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.09); }

  /* ---- weather chip ---- */
  html.dm-on .dgh__wx { background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(243,245,251,.7));
    border: 1px solid rgba(17,22,50,.10);
    box-shadow: 0 8px 18px -10px rgba(20,30,70,.30), inset 0 1px 0 rgba(255,255,255,.95); }
  html[data-theme="dark"].dm-on .dgh__wx { background: linear-gradient(180deg, rgba(44,47,55,.9), rgba(30,32,38,.7));
    border-color: rgba(255,255,255,.13); box-shadow: 0 10px 22px -12px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.09); }

  /* ---- header capsule ---- */
  html.dm-on .hdr__cap { background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(244,246,251,.62));
    border: 1px solid rgba(17,22,50,.10); box-shadow: 0 8px 18px -10px rgba(20,30,70,.28), inset 0 1px 0 rgba(255,255,255,.9); }
  html[data-theme="dark"].dm-on .hdr__cap { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
}

/* =====================================================================================
 *  v3.8.0 — DASHBOARD OVERHAUL: one-card carousel + premium dots · chase dropdowns ·
 *  smart activity category badges · sleeker light month-rail glass. Append-only, html.dm-on.
 * ================================================================================== */
@media (max-width: 767.98px) {

  /* ---- carousel: one full-width card per page (Focus hero + tiles share the track) ---- */
  html.dm-on .dwx--v4 .dgrid { gap: 14px; align-items: stretch; scroll-snap-type: x mandatory;
    margin: 4px calc(var(--m-gutter) * -1) 0; padding: 4px var(--m-gutter); }
  html.dm-on .dwx--v4 .dgrid > .dtile,
  html.dm-on .dwx--v4 .dgrid > .dfocus { flex: 0 0 100%; max-width: none; margin: 0;
    scroll-snap-align: center; scroll-snap-stop: always; }
  html.dm-on .dwx--v4 .dgrid > .dfocus { min-height: 186px; }

  /* ---- premium pagination dots (one per card) ---- */
  html.dm-on .dwx__dots { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 15px 0 0; }
  html.dm-on .dwx__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--m-hair-2);
    transition: width .3s cubic-bezier(.2,.8,.2,1), background .3s ease; }
  html.dm-on .dwx__dots i.on { width: 26px; border-radius: 4px; background: linear-gradient(150deg,#6C7CFF,#3D4FE0); }
  html[data-theme="dark"].dm-on .dwx__dots i.on { background: linear-gradient(150deg,#93A2FF,#6C7CFF); }

  /* ---- chase dropdowns: card = vertical container; head toggles; body collapses ---- */
  html.dm-on .dchz__card { padding: 0; overflow: hidden; cursor: default; }
  html.dm-on .dchz__head { width: 100%; display: flex; align-items: center; gap: 13px; padding: 15px 16px;
    border: 0; background: transparent; text-align: left; cursor: pointer; font: inherit; color: inherit; }
  html.dm-on .dchz__chev { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center;
    color: var(--m-ink-3); transition: transform .32s cubic-bezier(.2,.8,.2,1); }
  html.dm-on .dchz__chev i { font-size: 15px; }
  html.dm-on .dchz__card.open .dchz__chev { transform: rotate(180deg); }
  html.dm-on .dchz__body { max-height: 0; overflow: hidden; opacity: 0; padding: 0 16px;
    transition: max-height .34s cubic-bezier(.2,.8,.2,1), opacity .26s ease, padding .3s ease; }
  html.dm-on .dchz__card.open .dchz__body { max-height: 300px; opacity: 1; padding: 0 16px 15px; }
  html.dm-on .dchz__card.open .dchz__body .dchz__remind { margin-top: 0; }

  /* ---- smart activity category badges + tags ---- */
  html.dm-on .mtxn__s { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
  html.dm-on .mtxn__tag { font: 700 9px/1 var(--font); letter-spacing: .05em; text-transform: uppercase;
    padding: 3px 7px; border-radius: 6px; flex: 0 0 auto; }
  html.dm-on .mtxn__ico.cat-park  { background: rgba(46,99,196,.12);  color: #2E63C4; border-color: transparent; }
  html.dm-on .mtxn__tag.cat-park  { background: rgba(46,99,196,.11);  color: #2E63C4; }
  html.dm-on .mtxn__ico.cat-mach  { background: rgba(166,85,0,.13);   color: #A65500; border-color: transparent; }
  html.dm-on .mtxn__tag.cat-mach  { background: rgba(166,85,0,.11);   color: #A65500; }
  html.dm-on .mtxn__ico.cat-truck { background: rgba(91,100,114,.14);  color: #566072; border-color: transparent; }
  html.dm-on .mtxn__tag.cat-truck { background: rgba(91,100,114,.12);  color: #566072; }
  html.dm-on .mtxn__ico.cat-gen   { background: rgba(199,154,60,.16);  color: #B98A2C; border-color: transparent; }
  html.dm-on .mtxn__tag.cat-gen   { background: rgba(199,154,60,.13);  color: #B98A2C; }
  html.dm-on .mtxn__ico.cat-yard  { background: rgba(14,124,107,.13);  color: #0E7C6B; border-color: transparent; }
  html.dm-on .mtxn__tag.cat-yard  { background: rgba(14,124,107,.11);  color: #0E7C6B; }
  html.dm-on .mtxn__ico.cat-svc   { background: rgba(75,99,255,.12);   color: #4B63FF; border-color: transparent; }
  html.dm-on .mtxn__tag.cat-svc   { background: rgba(75,99,255,.10);   color: #4B63FF; }
  html.dm-on .mtxn__ico.cat-pay   { background: rgba(15,138,95,.13);   color: #0F8A5F; border-color: transparent; }
  html.dm-on .mtxn__ico.cat-neutral { background: var(--m-surface-2); color: var(--m-ink-3); }
  html[data-theme="dark"].dm-on .mtxn__ico.cat-park  { background: rgba(127,166,255,.16); color: #9FB8FF; }
  html[data-theme="dark"].dm-on .mtxn__tag.cat-park  { background: rgba(127,166,255,.14); color: #9FB8FF; }
  html[data-theme="dark"].dm-on .mtxn__ico.cat-mach  { background: rgba(245,184,81,.16);  color: #F5B851; }
  html[data-theme="dark"].dm-on .mtxn__tag.cat-mach  { background: rgba(245,184,81,.14);  color: #F5B851; }
  html[data-theme="dark"].dm-on .mtxn__ico.cat-truck { background: rgba(154,163,178,.18); color: #B4BCC9; }
  html[data-theme="dark"].dm-on .mtxn__tag.cat-truck { background: rgba(154,163,178,.15); color: #B4BCC9; }
  html[data-theme="dark"].dm-on .mtxn__ico.cat-gen   { background: rgba(231,200,120,.16); color: #E7C878; }
  html[data-theme="dark"].dm-on .mtxn__tag.cat-gen   { background: rgba(231,200,120,.14); color: #E7C878; }
  html[data-theme="dark"].dm-on .mtxn__ico.cat-yard  { background: rgba(79,214,192,.16);  color: #4FD6C0; }
  html[data-theme="dark"].dm-on .mtxn__tag.cat-yard  { background: rgba(79,214,192,.14);  color: #4FD6C0; }
  html[data-theme="dark"].dm-on .mtxn__ico.cat-svc   { background: rgba(129,144,255,.18); color: #A9B6FF; }
  html[data-theme="dark"].dm-on .mtxn__tag.cat-svc   { background: rgba(129,144,255,.15); color: #A9B6FF; }
  html[data-theme="dark"].dm-on .mtxn__ico.cat-pay   { background: rgba(59,215,158,.16);  color: #3BD79E; }

  /* ---- sleeker light-mode month-rail glass (dark keeps its v3.7.9 look via higher specificity) ---- */
  html.dm-on .mrail--v3 {
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,248,252,.60));
    border: 1px solid rgba(17,22,50,.06);
    box-shadow: 0 10px 26px -16px rgba(20,30,70,.20), inset 0 1px 0 rgba(255,255,255,1);
    -webkit-backdrop-filter: blur(24px) saturate(190%); backdrop-filter: blur(24px) saturate(190%);
  }
}

/* =====================================================================================
 *  v3.8.1 — Focus hero restored to its SMART states (navy+gold override removed); metric
 *  cards get a premium-but-minimal polish: clean surface, subtle per-metric colour wash,
 *  refined depth, more confident figures. Chase avatar opens the sheet (JS). Append-only.
 * ================================================================================== */
@media (max-width: 767.98px) {
  /* premium depth + confident type on the minimal surface tiles */
  html.dm-on .dwx--v4 .dgrid > .dtile {
    border-radius: 22px; padding: 18px; position: relative; isolation: isolate;
    box-shadow: 0 16px 34px -22px rgba(20,25,45,.42), inset 0 1px 0 rgba(255,255,255,.7);
  }
  html[data-theme="dark"].dm-on .dwx--v4 .dgrid > .dtile {
    box-shadow: 0 18px 36px -24px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.05);
  }
  html.dm-on .dwx--v4 .dgrid > .dtile .dtile__val { font: 600 30px/1 var(--font-ledger); letter-spacing: -.03em; }
  html.dm-on .dwx--v4 .dgrid > .dtile .dtile__spark { height: 40px; margin-top: auto; }

  /* subtle per-metric colour wash (top-right) over the clean surface — unique, still minimal */
  html.dm-on .dwx--v4 .dgrid > .dtile--out    { background: radial-gradient(135% 95% at 100% 0%, rgba(217,58,47,.09), transparent 60%), var(--m-surface); }
  html.dm-on .dwx--v4 .dgrid > .dtile--inv    { background: radial-gradient(135% 95% at 100% 0%, rgba(75,99,255,.08), transparent 60%), var(--m-surface); }
  html.dm-on .dwx--v4 .dgrid > .dtile--coll,
  html.dm-on .dwx--v4 .dgrid > .dtile--money,
  html.dm-on .dwx--v4 .dgrid > .dtile--green  { background: radial-gradient(135% 95% at 100% 0%, rgba(15,138,95,.10), transparent 60%), var(--m-surface); }
  html.dm-on .dwx--v4 .dgrid > .dtile--navy   { background: radial-gradient(135% 95% at 100% 0%, rgba(75,99,255,.10), transparent 60%), var(--m-surface); }
  html.dm-on .dwx--v4 .dgrid > .dtile--amber  { background: radial-gradient(135% 95% at 100% 0%, rgba(240,160,42,.11), transparent 60%), var(--m-surface); }
  html[data-theme="dark"].dm-on .dwx--v4 .dgrid > .dtile--out   { background: radial-gradient(135% 95% at 100% 0%, rgba(255,122,112,.12), transparent 60%), var(--m-surface); }
  html[data-theme="dark"].dm-on .dwx--v4 .dgrid > .dtile--inv   { background: radial-gradient(135% 95% at 100% 0%, rgba(129,144,255,.11), transparent 60%), var(--m-surface); }
  html[data-theme="dark"].dm-on .dwx--v4 .dgrid > .dtile--coll,
  html[data-theme="dark"].dm-on .dwx--v4 .dgrid > .dtile--money,
  html[data-theme="dark"].dm-on .dwx--v4 .dgrid > .dtile--green { background: radial-gradient(135% 95% at 100% 0%, rgba(59,215,158,.12), transparent 60%), var(--m-surface); }
  html[data-theme="dark"].dm-on .dwx--v4 .dgrid > .dtile--navy  { background: radial-gradient(135% 95% at 100% 0%, rgba(129,144,255,.14), transparent 60%), var(--m-surface); }
  html[data-theme="dark"].dm-on .dwx--v4 .dgrid > .dtile--amber { background: radial-gradient(135% 95% at 100% 0%, rgba(245,184,81,.12), transparent 60%), var(--m-surface); }

  /* the avatar is now interactive (opens the sheet) — give it an affordance */
  html.dm-on .dchz__av { cursor: pointer; }
  html.dm-on .dchz__av:active { transform: scale(.94); transition: transform .12s; }
}

/* v3.8.1 (cont.) — the smart Focus hero reads as a premium card: solid surface + hairline +
   depth UNDER its state-coloured glow (the glow + figure still change red/amber/green by status). */
@media (max-width: 767.98px) {
  html.dm-on .dwx--v4 .dgrid > .dfocus {
    background-color: var(--m-surface);
    border: 1px solid var(--m-hair);
    box-shadow: 0 20px 42px -24px rgba(20,25,45,.5), inset 0 1px 0 rgba(255,255,255,.6);
  }
  html[data-theme="dark"].dm-on .dwx--v4 .dgrid > .dfocus {
    box-shadow: 0 22px 46px -26px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.05);
  }
}

/* =====================================================================================
 *  v3.8.2 — MONTH RAIL: ONE visible glass tray that contains all the months (was
 *  background:none — the months floated). iOS-segmented feel: a recessed frosted tray +
 *  a single white sliding pill on the selected month. Overrides .dm__tl .mrail--v3
 *  (appended last, equal specificity → wins). Both themes.
 * ================================================================================== */
html.dm-on .dm__tl { padding: 12px 0 2px; }
html.dm-on .dm__tl .mrail--v3 {
  margin: 0 var(--m-gutter); padding: 5px; gap: 2px; border-radius: 18px; align-items: center;
  background: linear-gradient(180deg, rgba(237,240,246,.92), rgba(228,231,240,.72));
  border: 1px solid rgba(17,22,50,.08);
  box-shadow: inset 0 1px 2px rgba(20,30,70,.07), 0 12px 26px -16px rgba(20,30,70,.22);
  -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%);
}
html[data-theme="dark"].dm-on .dm__tl .mrail--v3 {
  background: linear-gradient(180deg, rgba(41,43,50,.92), rgba(29,31,37,.72));
  border-color: rgba(255,255,255,.09);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4), 0 14px 28px -16px rgba(0,0,0,.6);
}
/* the single sliding pill — a clean raised thumb inside the tray */
html.dm-on .dm__tl .mrail__pill {
  top: 5px; height: 46px; border-radius: 14px;
  background: #FFFFFF; background-image: none;
  box-shadow: 0 6px 16px -6px rgba(20,30,70,.34), inset 0 1px 0 #FFFFFF;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-theme="dark"].dm-on .dm__tl .mrail__pill {
  background: #34373F;
  box-shadow: 0 8px 18px -8px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.1);
}
html.dm-on .dm__tl .mrail--v3 .mrail__chip { height: 46px; padding: 6px 16px; }
html.dm-on .dm__tl .mrail__now { bottom: 5px; }
/* keep the year tag from adding a second "container" look inside the tray */
html.dm-on .dm__tl .mrail__ytag { background: transparent; padding: 3px 4px; }

/* =====================================================================================
 *  v3.8.3 — BOLD dark state Focus hero (owner-approved): the first carousel card is a
 *  dramatic dark state card (overdue=red / due=amber / clear=green) with a white figure —
 *  still smart, far more premium than the light-surface version. Plus a taller premium
 *  segmented tab and cleaner pagination-dot spacing. Append-only, html.dm-on.
 * ================================================================================== */
@media (max-width: 767.98px) {
  /* --- bold dark hero --- */
  html.dm-on .dwx--v4 .dgrid > .dfocus {
    border: 0; color: #fff; background-color: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html.dm-on .dwx--v4 .dgrid > .dfocus--overdue {
    background: radial-gradient(130% 120% at 85% -10%, #6b1a16, transparent 60%), linear-gradient(160deg, #3a1210, #180706);
    box-shadow: 0 26px 54px -28px rgba(80,15,12,.82), inset 0 1px 0 rgba(255,255,255,.08);
  }
  html.dm-on .dwx--v4 .dgrid > .dfocus--due {
    background: radial-gradient(130% 120% at 85% -10%, #6a4a12, transparent 60%), linear-gradient(160deg, #3a2c0a, #1a1206);
    box-shadow: 0 26px 54px -28px rgba(70,50,10,.72), inset 0 1px 0 rgba(255,255,255,.08);
  }
  html.dm-on .dwx--v4 .dgrid > .dfocus--clear {
    background: radial-gradient(130% 120% at 85% -10%, #0f5a3c, transparent 60%), linear-gradient(160deg, #0c3f2b, #06231a);
    box-shadow: 0 26px 54px -28px rgba(10,60,40,.72), inset 0 1px 0 rgba(255,255,255,.08);
  }
  html.dm-on .dwx--v4 .dgrid > .dfocus .dfocus__num { color: #fff; background: none; -webkit-text-fill-color: #fff; }
  html.dm-on .dwx--v4 .dgrid > .dfocus .dfocus__lbl,
  html.dm-on .dwx--v4 .dgrid > .dfocus .dfocus__line { color: rgba(255,255,255,.84); }
  html.dm-on .dwx--v4 .dgrid > .dfocus .dfocus__line b { color: #fff; }
  html.dm-on .dwx--v4 .dgrid > .dfocus--overdue .dfocus__eyebrow { color: #FF9E98; }
  html.dm-on .dwx--v4 .dgrid > .dfocus--due .dfocus__eyebrow { color: #F5C06A; }
  html.dm-on .dwx--v4 .dgrid > .dfocus--clear .dfocus__eyebrow { color: #6EE7B7; }
  html.dm-on .dwx--v4 .dgrid > .dfocus .dfocus__btn--ghost {
    background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.18);
  }
  /* the primary button keeps its state-coloured gradient (already defined) — perfect on dark */

  /* --- taller, more premium segmented tabs --- */
  html.dm-on .dseg { padding: 6px; border-radius: 18px; }
  html.dm-on .dseg__b { padding: 14px 0; border-radius: 13px; font-size: 14px; }

  /* --- cleaner pagination-dot spacing (more room from card + tabs) --- */
  html.dm-on .dwx__dots { margin: 18px 0 4px; }
  html.dm-on .dsegx { margin-top: 6px; }
}

/* =====================================================================================
 *  v3.8.3 — MONTH RAIL: "Indigo Liquid Glass" (owner-approved, preview A).
 *  ------------------------------------------------------------------------------------
 *  The rail is now ONE glass shell: a pinned year badge + a month scroller sharing a
 *  frosted tray, with an indigo gradient thumb that glides on a spring curve.
 *    · the year is printed ONCE (the `.mrail__ytag` head tag and the `.mrail__yr` line
 *      under the selected chip are both gone from the markup — see dashboard.js)
 *    · the current month carries a RED dot (white-ringed when it sits under the thumb)
 *    · months in the future are dimmed but still selectable
 *    · both scroller edges mask-fade so months dissolve instead of being chopped
 *  Appended last, so it wins the cascade over the v3.8.2 `.dm__tl .mrail--v3` tray at
 *  equal specificity. Scoped to `html.dm-on` (phone dashboard). Both themes.
 * ================================================================================== */
html.dm-on .dm__tl--v5 { padding: 14px 0 8px; position: relative; }
/* an indigo bloom behind the tray — glass needs something to refract or it reads flat */
html.dm-on .dm__tl--v5::before {
  content: ''; position: absolute; left: 50%; top: 16px; transform: translateX(-50%);
  width: 82%; height: 52px; border-radius: 999px; pointer-events: none; z-index: -1;
  background: radial-gradient(58% 100% at 50% 50%, rgba(90,112,255,.22), transparent 72%);
  filter: blur(18px);
}
html[data-theme="dark"].dm-on .dm__tl--v5::before {
  background: radial-gradient(58% 100% at 50% 50%, rgba(124,144,255,.26), transparent 72%);
}

/* ---- the glass shell: [ year badge | month scroller ] ---- */
html.dm-on .mrail__shell {
  position: relative; display: flex; align-items: center;
  margin: 0 var(--m-gutter); padding: 5px; border-radius: 22px; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.80), rgba(238,241,251,.56)),
    linear-gradient(120deg, rgba(108,124,255,.12), rgba(108,124,255,0) 48%, rgba(108,124,255,.09));
  border: 1px solid rgba(255,255,255,.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(20,30,70,.05),
    0 2px 6px -2px rgba(20,30,70,.10),
    0 20px 38px -24px rgba(38,52,120,.50);
  -webkit-backdrop-filter: blur(28px) saturate(200%); backdrop-filter: blur(28px) saturate(200%);
}
html[data-theme="dark"].dm-on .mrail__shell {
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035)),
    linear-gradient(120deg, rgba(132,150,255,.16), rgba(132,150,255,0) 48%, rgba(132,150,255,.11));
  border-color: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), inset 0 -1px 0 rgba(0,0,0,.4),
    0 22px 40px -26px rgba(0,0,0,.9);
}

/* ---- the ONE year badge ---- */
html.dm-on .mrail__yc {
  flex: 0 0 auto; display: flex; align-items: center; height: 44px;
  padding: 0 11px 0 5px; margin-right: 5px; position: relative;
}
html.dm-on .mrail__yc::after {
  content: ''; position: absolute; right: 0; top: 9px; bottom: 9px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(20,30,70,.14), transparent);
}
html[data-theme="dark"].dm-on .mrail__yc::after {
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.16), transparent);
}
html.dm-on .mrail__ycv {
  font: 700 11.5px/1 var(--font-ledger); letter-spacing: .06em; color: #3D4FE0;
  padding: 6px 9px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(108,124,255,.17), rgba(108,124,255,.08));
  box-shadow: inset 0 0 0 1px rgba(108,124,255,.22), inset 0 1px 0 rgba(255,255,255,.6);
}
html[data-theme="dark"].dm-on .mrail__ycv {
  color: #AAB6FF; background: linear-gradient(180deg, rgba(132,150,255,.24), rgba(132,150,255,.12));
  box-shadow: inset 0 0 0 1px rgba(132,150,255,.28);
}
/* digits cross-fade when the strip scrolls into another year (JS adds .is-swap) */
@keyframes mrailYearSwap { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
html.dm-on .mrail__ycv.is-swap { animation: mrailYearSwap .26s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) { html.dm-on .mrail__ycv.is-swap { animation: none; } }

/* ---- the scroller ---- */
html.dm-on .mrail__shell .mrail--v5 {
  position: relative; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; gap: 1px;
  background: none; border: 0; box-shadow: none; border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 22px), transparent 100%);
}
html.dm-on .mrail__shell .mrail--v5::-webkit-scrollbar { display: none; }

/* ---- the sliding thumb ---- */
html.dm-on .mrail__shell .mrail__pill {
  top: 0; bottom: 0; height: 44px; border-radius: 16px; z-index: 1; border: 0;
  background: linear-gradient(150deg, #6C7CFF 0%, #4E5FEE 52%, #3D4FE0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(10,16,60,.30),
    0 6px 14px -6px rgba(61,79,224,.78), 0 2px 5px -2px rgba(61,79,224,.5);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: transform .5s cubic-bezier(.22,1.06,.36,1), width .5s cubic-bezier(.22,1.06,.36,1);
}
html.dm-on .mrail__shell .mrail__pill::after {
  content: ''; position: absolute; inset: 1px 1px 46% 1px; border-radius: 15px 15px 11px 11px;
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0)); pointer-events: none;
}
html[data-theme="dark"].dm-on .mrail__shell .mrail__pill {
  background: linear-gradient(150deg, #7E8DFF 0%, #5D6FF6 52%, #4453E8 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36), 0 8px 18px -8px rgba(84,104,255,.8);
}
@media (prefers-reduced-motion: reduce) {
  html.dm-on .mrail__shell .mrail__pill { transition: transform .2s, width .2s; }
}

/* ---- chips ---- */
html.dm-on .mrail__shell .mrail--v5 .mrail__chip {
  position: relative; z-index: 2; flex: 0 0 auto; height: 44px; min-width: 60px;
  padding: 0 14px; border-radius: 16px; background: transparent; border: 0;
  display: flex; align-items: center; justify-content: center; scroll-snap-align: center;
  transition: color .3s ease, opacity .3s ease;
}
html.dm-on .mrail__shell .mrail__lbl {
  font: 800 12.5px/1 var(--font-display); letter-spacing: .1em; color: #6D7796;
  transition: color .3s ease;
}
html[data-theme="dark"].dm-on .mrail__shell .mrail__lbl { color: #808BAC; }
html.dm-on .mrail__shell .mrail__chip.is-future { opacity: .45; }
html.dm-on .mrail__shell .mrail__chip[aria-selected="true"] { opacity: 1; }
html.dm-on .mrail__shell .mrail__chip[aria-selected="true"] .mrail__lbl,
html[data-theme="dark"].dm-on .mrail__shell .mrail__chip[aria-selected="true"] .mrail__lbl {
  color: #FFFFFF; text-shadow: 0 1px 2px rgba(18,26,80,.38);
}

/* ---- today: a RED dot, white-ringed when it sits under the indigo thumb ---- */
html.dm-on .mrail__shell .mrail__now {
  position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: #FF3B30;
  box-shadow: 0 0 0 2.5px rgba(255,59,48,.15);
}
html.dm-on .mrail__shell .mrail__chip[aria-selected="true"] .mrail__now {
  background: #FF4A3D; box-shadow: 0 0 0 2px rgba(255,255,255,.95);
}
html[data-theme="dark"].dm-on .mrail__shell .mrail__now {
  background: #FF453A; box-shadow: 0 0 0 2.5px rgba(255,69,58,.22);
}

/* =====================================================================================
 *  v3.8.4 — SEGMENTED TABS: "Crystal Slider" (owner-approved, preview A).
 *  ------------------------------------------------------------------------------------
 *  The v3.7.9 control swapped a background colour, which read as a blink. It is now a
 *  proper iOS segmented control: a recessed frosted tray with a crystal-white thumb that
 *  SLIDES between halves (transform + width only — compositor-cheap), a per-tab icon that
 *  turns indigo and scales up when active, and a glossy count badge that dims when its
 *  tab is not.  The thumb stays WHITE on purpose: the month rail (§v3.8.3) owns the
 *  indigo thumb, so indigo = "which period", crystal = "which list".
 *  Appended last; the dark rules are written at `[data-theme] .dseg--v6` specificity so
 *  they outrank the v3.7.9 `[data-theme="dark"] .dseg` tray they replace.
 * ================================================================================== */
html.dm-on .dsegx { margin-top: 10px; }
html.dm-on .dseg--v6 {
  position: relative; display: flex; gap: 0; padding: 5px; margin: 0 0 10px;
  border-radius: 20px; isolation: isolate;
  background: linear-gradient(180deg, rgba(236,239,248,.94), rgba(227,231,243,.74));
  border: 1px solid rgba(17,22,50,.06);
  box-shadow: inset 0 1px 3px rgba(20,30,70,.10), inset 0 -1px 0 rgba(255,255,255,.7),
    0 14px 30px -22px rgba(38,52,120,.40);
  -webkit-backdrop-filter: blur(24px) saturate(190%); backdrop-filter: blur(24px) saturate(190%);
}
html[data-theme="dark"].dm-on .dseg--v6 {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border-color: rgba(255,255,255,.10);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.05),
    0 16px 32px -24px rgba(0,0,0,.85);
}

/* ---- the sliding thumb (JS sets width + translateX) ---- */
html.dm-on .dseg--v6 .dseg__thumb {
  position: absolute; left: 0; top: 5px; bottom: 5px; width: 0; z-index: 0;
  border-radius: 16px; pointer-events: none;
  background: linear-gradient(180deg, #FFFFFF, #F7F9FE);
  box-shadow: inset 0 1px 0 #FFFFFF, inset 0 0 0 1px rgba(108,124,255,.14),
    0 8px 18px -7px rgba(30,42,110,.32), 0 1px 3px rgba(30,42,110,.14);
  transition: transform .46s cubic-bezier(.22,1.06,.36,1), width .46s cubic-bezier(.22,1.06,.36,1);
}
html[data-theme="dark"].dm-on .dseg--v6 .dseg__thumb {
  background: linear-gradient(180deg, #3B3F4C, #2F323D);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), inset 0 0 0 1px rgba(150,166,255,.15),
    0 10px 20px -8px rgba(0,0,0,.8);
}
@media (prefers-reduced-motion: reduce) {
  html.dm-on .dseg--v6 .dseg__thumb { transition: transform .18s, width .18s; }
}

/* ---- the two halves ---- */
html.dm-on .dseg--v6 .dseg__b {
  position: relative; z-index: 1; flex: 1; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; border: 0; background: none !important;
  box-shadow: none !important; padding: 13px 0; border-radius: 16px; cursor: pointer;
  font: 650 13.5px/1 var(--font); letter-spacing: -.005em; color: #7A8299;
  transition: color .28s ease;
}
html[data-theme="dark"].dm-on .dseg--v6 .dseg__b { color: #858DA6; }
html.dm-on .dseg--v6 .dseg__b.is-on { color: #2C3556; }
html[data-theme="dark"].dm-on .dseg--v6 .dseg__b.is-on { color: #EEF1F8; }
html.dm-on .dseg--v6 .dseg__t { font-weight: 700; }

/* ---- icons ---- */
html.dm-on .dseg--v6 .dseg__i {
  width: 16px; height: 16px; flex: 0 0 auto; opacity: .55;
  transition: opacity .28s ease, color .28s ease, transform .38s cubic-bezier(.22,1.06,.36,1);
}
html.dm-on .dseg--v6 .dseg__b.is-on .dseg__i { opacity: 1; color: #4B63FF; transform: scale(1.06); }
html[data-theme="dark"].dm-on .dseg--v6 .dseg__b.is-on .dseg__i { color: #93A2FF; }

/* ---- count badge ---- */
html.dm-on .dseg--v6 .dseg__n {
  font: 800 10px/1 var(--font); color: #fff; border-radius: 999px; padding: 4px 6.5px;
  background: linear-gradient(180deg, #FF6257, #E23B2E);
  box-shadow: 0 2px 6px -2px rgba(226,59,46,.65), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .3s cubic-bezier(.22,1.06,.36,1), opacity .3s ease;
}
html.dm-on .dseg--v6 .dseg__b:not(.is-on) .dseg__n { transform: scale(.9); opacity: .75; }

/* ---- close the dead gap the hidden inner section header used to leave ---- */
html.dm-on .dsegx__body { margin-top: 0; }
html.dm-on .dsegx__panel .sect__head { margin: -4px 0 2px !important; }

/* =====================================================================================
 *  v3.8.7 — FLOATING NAV → DOCKED "Expanding Pill Dock" (owner-approved, preview B docked).
 *  ------------------------------------------------------------------------------------
 *  Inactive tabs are icon-only; the active one morphs into a solid indigo capsule with
 *  its label. The bar now spans the full width and sits FLUSH on the bottom edge — the
 *  home-indicator inset became padding, so the glass reaches the physical edge instead of
 *  floating above it.
 *
 *  Two things here are load-bearing and were found by measuring, not by eye:
 *   1. The items live in two `.tabbar__side` groups (see app.js buildTabBar) that are each
 *      `flex:1 1 0`, so the FAB is arithmetically centred. As direct flex children, the
 *      expanding pill reflowed the row and pushed the FAB off centre.
 *   2. Below 390px the pill goes ICON-ONLY. At 375px and 360px "Payments" rendered as
 *      "Paymen" — the label was being chopped mid-word. Verified no clipping 320→430px.
 *
 *  Appended last; keyed by #app-tabbar to win over the v2.42 pill block, the v2.7x FAB
 *  block and the v3.7.7 floating dock. Bar is body-mounted → every colour is literal.
 * ================================================================================== */
@media (max-width: 767.98px) {

  #app-tabbar.tabbar--dock {
    left: 0; right: 0; bottom: 0;
    width: 100%; max-width: none; margin: 0;
    height: auto;
    display: flex; align-items: center; gap: 0;
    padding: 9px 7px calc(env(safe-area-inset-bottom, 0px) + 9px);
    border-radius: 26px 26px 0 0;
    background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(247,249,253,.80));
    border: 0;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.98),
      0 -1px 0 rgba(17,22,50,.07),
      0 -18px 40px -20px rgba(28,40,100,.30);
    -webkit-backdrop-filter: blur(32px) saturate(195%); backdrop-filter: blur(32px) saturate(195%);
  }
  html[data-theme="dark"] #app-tabbar.tabbar--dock {
    background: linear-gradient(180deg, rgba(28,30,37,.92), rgba(18,19,24,.86));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.09),
      0 -1px 0 rgba(255,255,255,.10),
      0 -18px 40px -20px rgba(0,0,0,.8);
  }

  /* ---- two equal halves → the FAB is always dead centre ---- */
  #app-tabbar.tabbar--dock .tabbar__side {
    flex: 1 1 0; min-width: 0; display: flex; align-items: center;
    justify-content: space-evenly; gap: 2px;
  }

  /* the v3.7.7 per-item wash is replaced by the pill itself */
  #app-tabbar.tabbar--dock .tabbar__item::before { display: none !important; }

  /* ---- items: a capsule that grows when active ---- */
  #app-tabbar.tabbar--dock .tabbar__item {
    position: relative; z-index: 1; flex: 0 1 auto; min-width: 44px; height: 44px;
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    gap: 0; padding: 0 7px; border-radius: 14px; border: 0; background: transparent;
    color: #78819A;
    transition: background .34s cubic-bezier(.22,1.06,.36,1), color .26s ease,
                gap .34s cubic-bezier(.22,1.06,.36,1), padding .34s cubic-bezier(.22,1.06,.36,1);
  }
  html[data-theme="dark"] #app-tabbar.tabbar--dock .tabbar__item { color: rgba(255,255,255,.52); }

  #app-tabbar.tabbar--dock .tabbar__item.is-active {
    color: #FFFFFF; gap: 5px; padding: 0 10px;
    background: linear-gradient(150deg, #6C7CFF 0%, #4E5FEE 52%, #3D4FE0 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 6px 14px -6px rgba(61,79,224,.7);
  }
  html[data-theme="dark"] #app-tabbar.tabbar--dock .tabbar__item.is-active {
    color: #FFFFFF;
    background: linear-gradient(150deg, #7E8DFF 0%, #5D6FF6 52%, #4453E8 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 8px 18px -8px rgba(84,104,255,.75);
  }

  #app-tabbar.tabbar--dock .tabbar__ico { width: 22px; height: 22px; flex: 0 0 auto; }
  #app-tabbar.tabbar--dock .tabbar__ico .ni { width: 22px; height: 22px; }
  /* the filled glyph follows the pill's own colour (kills the legacy gold gradient fill) */
  #app-tabbar.tabbar--dock .tabbar__item.is-active .ni--solid { fill: currentColor; }

  /* label stays in the DOM for screen readers, collapsed until the tab is active */
  #app-tabbar.tabbar--dock .tabbar__item > span:last-child {
    font-size: 11px; font-weight: 700; letter-spacing: -.01em; line-height: 1;
    max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
    background: none; -webkit-background-clip: border-box; background-clip: border-box;
    -webkit-text-fill-color: currentColor; color: currentColor;
    transition: max-width .34s cubic-bezier(.22,1.06,.36,1), opacity .24s ease;
  }
  #app-tabbar.tabbar--dock .tabbar__item.is-active > span:last-child { max-width: 96px; opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    #app-tabbar.tabbar--dock .tabbar__item,
    #app-tabbar.tabbar--dock .tabbar__item > span:last-child { transition-duration: .12s; }
  }

  /* ---- FAB ---- */
  #app-tabbar.tabbar--dock .tabbar__fab,
  html[data-theme="dark"] #app-tabbar.tabbar--dock .tabbar__fab {
    position: relative; z-index: 2; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
    margin: -26px 4px 0; display: grid; place-items: center; color: #fff; border: 0; overflow: visible;
    background: linear-gradient(155deg, #7A88FF 0%, #4B5EF5 48%, #3A4BDE 100%);
    /* The ring fakes a cut-out through the bar, so it must BE the page colour. It was
       still #F4F4F2 / #121316 — stale values from before v3.7.8 flattened the page, which
       made the notch read as a grey halo rather than a hole. */
    box-shadow:
      0 0 0 5px #FFFFFF,
      0 16px 30px -10px rgba(61,79,224,.6),
      inset 0 1.5px 0 rgba(255,255,255,.46),
      inset 0 -8px 16px -6px rgba(30,34,120,.5);
  }
  html[data-theme="dark"] #app-tabbar.tabbar--dock .tabbar__fab {
    box-shadow:
      0 0 0 5px #000000,
      0 16px 30px -10px rgba(74,94,255,.68),
      inset 0 1.5px 0 rgba(255,255,255,.40),
      inset 0 -8px 16px -6px rgba(19,21,90,.6);
  }
  #app-tabbar.tabbar--dock .tabbar__fab::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: linear-gradient(125deg, rgba(255,255,255,.30) 6%, transparent 46%);
  }
  #app-tabbar.tabbar--dock .tabbar__fab .ni { width: 25px; height: 25px; position: relative; z-index: 1; }

  /* the docked bar is taller than the floating one — give content room to clear it */
  .app-main, .view-root {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* v3.8.8 — icon-only fallback, now DRIVEN BY MEASUREMENT rather than a guessed width.
     v3.8.7 used `@media (max-width: 389.98px)`, which silently swallowed the labels on the
     owner's own phone (~386px CSS width) — the feature they approved never appeared. The
     bar now probes each tab's real geometry at runtime (`fitTabLabels()` in app.js) and adds
     `.is-compact` only when a label genuinely would not fit. That adapts to any width, any
     font, and any future tab name, instead of a number that goes stale. */
  #app-tabbar.tabbar--dock.is-compact .tabbar__item.is-active { gap: 0; padding: 0 13px; }
  #app-tabbar.tabbar--dock.is-compact .tabbar__item.is-active > span:last-child {
    max-width: 0; opacity: 0;
  }
  /* while probing, kill the transitions so we measure settled geometry, not a mid-animation
     frame — otherwise the fit test reads whatever width the spring happens to be passing. */
  #app-tabbar.tabbar--dock.is-probing .tabbar__item,
  #app-tabbar.tabbar--dock.is-probing .tabbar__item > span:last-child {
    transition: none !important;
  }
}

/* =====================================================================================
 *  v3.8.9 — NEEDS CHASING: detailed customer cards (owner-approved preview).
 *  ------------------------------------------------------------------------------------
 *  The old card showed a single line of advice ("Firm reminder due") and threw away
 *  everything the app already had loaded. It now shows, per customer: three terse facts
 *  (oldest age / last nudge / next reminder), EVERY overdue invoice with its number, due
 *  date, days late and amount, and the last payment received — the context that stops a
 *  wrong chase. Data sources already existed: nudgeGroups(), remByInv, payments.
 *
 *  LOAD-BEARING: the v3.7.x collapse animated `max-height: 0 → 300px`. A detailed body is
 *  taller than 300px, so the actions row was silently CLIPPED (caught in preview). This
 *  block replaces it with a `grid-template-rows: 0fr → 1fr` collapse, which animates to the
 *  content's true height — no magic number left to outgrow.
 *  Appended last; scoped to `.dchz__card--v8` so the older `.dchz__card` rules can't bleed.
 * ================================================================================== */
html.dm-on .dchz { display: flex; flex-direction: column; gap: 10px; }

html.dm-on .dchz__card--v8 {
  border-radius: 20px; overflow: hidden; border: 1px solid rgba(17,22,50,.06);
  background: linear-gradient(180deg, #FFFFFF, #FCFDFF);
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 14px 30px -22px rgba(28,40,100,.40);
  transition: box-shadow .3s ease;
}
html.dm-on .dchz__card--v8.open {
  box-shadow: 0 2px 4px rgba(16,24,40,.06), 0 22px 44px -24px rgba(28,40,100,.55);
}
html[data-theme="dark"].dm-on .dchz__card--v8 {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 18px 34px -24px rgba(0,0,0,.85);
}

/* ---- header ---- */
html.dm-on .dchz__card--v8 .dchz__head {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 12px; padding: 13px 14px; background: none; border: 0; text-align: left;
}
html.dm-on .dchz__card--v8 .dchz__av {
  position: relative; width: 44px; height: 44px; border-radius: 15px; flex: 0 0 auto;
  display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 4px 10px -4px rgba(20,30,70,.35), inset 0 1px 0 rgba(255,255,255,.35);
}
html.dm-on .dchz__card--v8 .dchz__ini { font: 800 15px/1 var(--font-display); color: #fff; }
html.dm-on .dchz__card--v8 .dchz__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.dm-on .dchz__card--v8 .dchz__main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
html.dm-on .dchz__card--v8 .dchz__nrow { display: flex; align-items: center; gap: 7px; min-width: 0; }
/* severity is a compact chip beside the name, so the NAME gets the full width back — the
   old layout put "43d overdue" in its own column and truncated "Peywand O…". */
html.dm-on .dchz__card--v8 .dchz__name {
  font: 750 15px/1.15 var(--font-display); color: var(--m-ink); letter-spacing: -.012em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
html.dm-on .dchz__card--v8 .dchz__sev {
  flex: 0 0 auto; font: 800 10px/1 var(--font); padding: 4px 7px; border-radius: 7px;
  letter-spacing: .02em;
}
html.dm-on .dchz__card--v8 .dchz__sev.sev1 { color: #9A6400; background: rgba(240,160,42,.15); }
html.dm-on .dchz__card--v8 .dchz__sev.sev2 { color: #C2410C; background: rgba(234,88,12,.15); }
html.dm-on .dchz__card--v8 .dchz__sev.sev3 { color: #B42318; background: rgba(217,45,32,.15); }
html[data-theme="dark"].dm-on .dchz__card--v8 .dchz__sev.sev1 { color: #F5C46B; background: rgba(240,160,42,.20); }
html[data-theme="dark"].dm-on .dchz__card--v8 .dchz__sev.sev2 { color: #FDA974; background: rgba(234,88,12,.22); }
html[data-theme="dark"].dm-on .dchz__card--v8 .dchz__sev.sev3 { color: #FF9A8F; background: rgba(217,45,32,.24); }

html.dm-on .dchz__card--v8 .dchz__amt {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font: 500 12.5px/1 var(--font); color: var(--m-ink-3);
}
html.dm-on .dchz__card--v8 .dchz__amt b {
  font: 800 14px/1 var(--font-ledger); color: #B42318; letter-spacing: -.01em;
}
html[data-theme="dark"].dm-on .dchz__card--v8 .dchz__amt b { color: #FF9A8F; }
html.dm-on .dchz__card--v8 .dchz__dot { opacity: .5; }
html.dm-on .dchz__card--v8 .dchz__cad {
  font: 700 9.5px/1 var(--font); letter-spacing: .03em; text-transform: uppercase;
  padding: 3.5px 6px; border-radius: 6px; margin-left: 2px;
}
html.dm-on .dchz__card--v8 .dchz__cad.gentle  { color: #3D4FE0; background: rgba(108,124,255,.13); }
html.dm-on .dchz__card--v8 .dchz__cad.firm    { color: #C2410C; background: rgba(234,88,12,.13); }
html.dm-on .dchz__card--v8 .dchz__cad.serious { color: #B42318; background: rgba(217,45,32,.14); }
html[data-theme="dark"].dm-on .dchz__card--v8 .dchz__cad.gentle  { color: #A9B6FF; background: rgba(129,144,255,.18); }
html[data-theme="dark"].dm-on .dchz__card--v8 .dchz__cad.firm    { color: #FDA974; background: rgba(234,88,12,.20); }
html[data-theme="dark"].dm-on .dchz__card--v8 .dchz__cad.serious { color: #FF9A8F; background: rgba(217,45,32,.22); }

html.dm-on .dchz__card--v8 .dchz__chev {
  color: var(--m-ink-4); transition: transform .34s cubic-bezier(.22,1.06,.36,1);
}
html.dm-on .dchz__card--v8.open .dchz__chev { transform: rotate(180deg); }

/* ---- body: height-agnostic collapse (replaces the 300px max-height) ---- */
html.dm-on .dchz__card--v8 .dchz__body {
  max-height: none; overflow: hidden; opacity: 0; padding: 0 14px;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .38s cubic-bezier(.22,1.06,.36,1), opacity .28s ease, padding .38s ease;
}
html.dm-on .dchz__card--v8 .dchz__bodyin { min-height: 0; overflow: hidden; }
html.dm-on .dchz__card--v8.open .dchz__body {
  max-height: none; grid-template-rows: 1fr; opacity: 1; padding: 0 14px 13px;
}
@media (prefers-reduced-motion: reduce) {
  html.dm-on .dchz__card--v8 .dchz__body { transition-duration: .12s; }
}

/* ---- three facts ---- */
html.dm-on .dchz__facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 2px 0 11px;
}
html.dm-on .dchz__fact {
  display: flex; align-items: center; gap: 6px; padding: 9px 8px; border-radius: 13px;
  background: rgba(17,22,50,.035); min-width: 0;
}
html[data-theme="dark"].dm-on .dchz__fact { background: rgba(255,255,255,.05); }
html.dm-on .dchz__fact i { font-size: 13px; color: #6C7CFF; flex: 0 0 auto; }
html[data-theme="dark"].dm-on .dchz__fact i { color: #93A2FF; }
html.dm-on .dchz__fact > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.dm-on .dchz__fact b {
  font: 750 12px/1.1 var(--font); color: var(--m-ink); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.dm-on .dchz__fact em {
  font: 650 8px/1 var(--font); color: var(--m-ink-4); font-style: normal;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* ---- the invoice lines (the detail that was missing entirely) ---- */
html.dm-on .dchz__invs {
  list-style: none; margin: 0 0 10px; padding: 0;
  border-radius: 14px; overflow: hidden; background: rgba(17,22,50,.028);
}
html[data-theme="dark"].dm-on .dchz__invs { background: rgba(255,255,255,.04); }
html.dm-on .dchz__inv {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 9px 11px; border-bottom: 1px solid rgba(17,22,50,.05);
}
html[data-theme="dark"].dm-on .dchz__inv { border-bottom-color: rgba(255,255,255,.06); }
html.dm-on .dchz__inv:last-child { border-bottom: 0; }
html.dm-on .dchz__invdot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
html.dm-on .dchz__invdot.sev1 { background: #F0A02A; box-shadow: 0 0 0 3px rgba(240,160,42,.15); }
html.dm-on .dchz__invdot.sev2 { background: #EA580C; box-shadow: 0 0 0 3px rgba(234,88,12,.15); }
html.dm-on .dchz__invdot.sev3 { background: #D92D20; box-shadow: 0 0 0 3px rgba(217,45,32,.15); }
html.dm-on .dchz__invb { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html.dm-on .dchz__invn {
  font: 600 11.5px/1 var(--font-ledger); color: var(--m-ink); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.dm-on .dchz__invd { font: 500 10px/1 var(--font); color: var(--m-ink-4); }
html.dm-on .dchz__invd b { font-weight: 700; color: #C2410C; }
html[data-theme="dark"].dm-on .dchz__invd b { color: #FDA974; }
html.dm-on .dchz__inva {
  font: 700 12.5px/1 var(--font-ledger); color: var(--m-ink); letter-spacing: -.01em; flex: 0 0 auto;
}
html.dm-on .dchz__inv--more .dchz__invn { color: var(--m-ink-4); font-weight: 700; }
html.dm-on .dchz__inv--more .dchz__inva { color: var(--m-ink-3); }

/* ---- last money in ---- */
html.dm-on .dchz__pay {
  display: flex; align-items: center; gap: 7px; margin: 0 0 11px; padding: 8px 11px;
  border-radius: 12px; background: rgba(15,138,95,.09);
  font: 600 11px/1 var(--font); color: #0F8A5F;
}
html[data-theme="dark"].dm-on .dchz__pay { background: rgba(59,215,158,.12); color: #5FD9AC; }
html.dm-on .dchz__pay i { font-size: 13px; }

/* ---- actions ---- */
html.dm-on .dchz__card--v8 .dchz__acts { display: flex; align-items: center; gap: 8px; }
html.dm-on .dchz__card--v8 .dchz__qa {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(17,22,50,.045); font-size: 15px; flex: 0 0 auto;
}
html[data-theme="dark"].dm-on .dchz__card--v8 .dchz__qa { background: rgba(255,255,255,.07); }
html.dm-on .dchz__card--v8 .dchz__qa--call { color: #2A6DB0; }
html.dm-on .dchz__card--v8 .dchz__qa--wa   { color: #1FA855; }
html.dm-on .dchz__card--v8 .dchz__qa--mail { color: #B26A00; }
html.dm-on .dchz__card--v8 .dchz__nudge {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 16px; border-radius: 12px; border: 0; color: #fff;
  font: 750 12.5px/1 var(--font); letter-spacing: -.005em;
  background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 6px 14px -6px rgba(61,79,224,.7), inset 0 1px 0 rgba(255,255,255,.3);
}

/* =====================================================================================
 *  v3.9.0 — ACTIVITY STREAM rebuilt in the chase cards' language (owner-approved).
 *  ------------------------------------------------------------------------------------
 *  Problems in the live list, from the owner's screenshot: rows wrapped mid-line
 *  ("Burnman / INV-2026-0011 / · 09 Aug 2026" over three lines), each row was its own
 *  floating card so six entries read as six unrelated objects, the same date repeated on
 *  four consecutive rows, and the part-paid RING showed that something was partial without
 *  ever saying how much.
 *
 *  Now: one grouped card with hairline rows, day separators, single-line ellipsis on every
 *  line, ledger figures right-aligned, and a third line per row saying what the record
 *  MEANS for the money (outstanding / settled / days late / progress bar).
 *
 *  "VIEW ALL" — the old `.sect__head` rendered eyebrow + title + link, but the segmented
 *  tabs already name the panel, so title and eyebrow were suppressed as duplicates and the
 *  link was left floating in the gap where a heading used to be. Both panels now drop the
 *  header entirely and end with a footer row instead. See mChaseHTML()/mStreamHTML().
 * ================================================================================== */
html.dm-on .mstx {
  list-style: none; margin: 0; padding: 0;
  border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(17,22,50,.06);
  background: linear-gradient(180deg, #FFFFFF, #FCFDFF);
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 14px 30px -22px rgba(28,40,100,.40);
}
html[data-theme="dark"].dm-on .mstx {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 18px 34px -24px rgba(0,0,0,.85);
}

/* ---- day separators ---- */
html.dm-on .mstx__day {
  padding: 9px 14px 7px; background: rgba(17,22,50,.028);
  border-bottom: 1px solid rgba(17,22,50,.05);
}
html[data-theme="dark"].dm-on .mstx__day {
  background: rgba(255,255,255,.035); border-bottom-color: rgba(255,255,255,.06);
}
html.dm-on .mstx__day span {
  font: 700 9px/1 var(--font); letter-spacing: .09em; text-transform: uppercase;
  color: var(--m-ink-4);
}

/* ---- rows ---- */
html.dm-on .mstx__row { position: relative; border-bottom: 1px solid rgba(17,22,50,.05); }
html[data-theme="dark"].dm-on .mstx__row { border-bottom-color: rgba(255,255,255,.06); }
html.dm-on .mstx__hit {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto;
  align-items: flex-start; gap: 11px; padding: 12px 14px;
  background: none; border: 0; text-align: left; cursor: pointer;
}
html.dm-on .mstx__row.is-late::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: #D92D20; z-index: 1;
}

html.dm-on .mstx__ico {
  width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center;
  font-size: 15px; flex: 0 0 auto; margin-top: 1px;
}
html.dm-on .mstx__ico.k-pay     { color: #0F8A5F; background: rgba(15,138,95,.11); }
html.dm-on .mstx__ico.k-park    { color: #3D4FE0; background: rgba(108,124,255,.12); }
html.dm-on .mstx__ico.k-mach    { color: #B26A00; background: rgba(240,160,42,.14); }
html.dm-on .mstx__ico.k-truck   { color: #2A6DB0; background: rgba(42,109,176,.12); }
html.dm-on .mstx__ico.k-neutral { color: #6B7390; background: rgba(17,22,50,.055); }
html[data-theme="dark"].dm-on .mstx__ico.k-pay     { color: #5FD9AC; background: rgba(59,215,158,.14); }
html[data-theme="dark"].dm-on .mstx__ico.k-park    { color: #A9B6FF; background: rgba(129,144,255,.16); }
html[data-theme="dark"].dm-on .mstx__ico.k-mach    { color: #F5C46B; background: rgba(240,160,42,.16); }
html[data-theme="dark"].dm-on .mstx__ico.k-truck   { color: #7FB6F0; background: rgba(42,109,176,.20); }
html[data-theme="dark"].dm-on .mstx__ico.k-neutral { color: #9AA3BE; background: rgba(255,255,255,.07); }

html.dm-on .mstx__b { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
html.dm-on .mstx__l1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
html.dm-on .mstx__who {
  font: 700 13.5px/1.15 var(--font-display); color: var(--m-ink); letter-spacing: -.012em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.dm-on .mstx__sub {
  font: 500 10.5px/1.2 var(--font); color: var(--m-ink-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.dm-on .mstx__ref { font-family: var(--font-ledger); font-weight: 600; letter-spacing: -.01em; }

/* category tag — same chip grammar as the chase cadence chip */
html.dm-on .mstx__tag {
  flex: 0 0 auto; font: 800 8px/1 var(--font); letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 5px; border-radius: 5px;
}
html.dm-on .mstx__tag.k-park    { color: #3D4FE0; background: rgba(108,124,255,.13); }
html.dm-on .mstx__tag.k-mach    { color: #B26A00; background: rgba(240,160,42,.16); }
html.dm-on .mstx__tag.k-truck   { color: #2A6DB0; background: rgba(42,109,176,.13); }
html.dm-on .mstx__tag.k-neutral { color: #6B7390; background: rgba(17,22,50,.06); }
html[data-theme="dark"].dm-on .mstx__tag.k-park    { color: #A9B6FF; background: rgba(129,144,255,.18); }
html[data-theme="dark"].dm-on .mstx__tag.k-mach    { color: #F5C46B; background: rgba(240,160,42,.18); }
html[data-theme="dark"].dm-on .mstx__tag.k-truck   { color: #7FB6F0; background: rgba(42,109,176,.22); }
html[data-theme="dark"].dm-on .mstx__tag.k-neutral { color: #9AA3BE; background: rgba(255,255,255,.07); }

/* line 3 — the consequence line */
html.dm-on .mstx__l3 {
  font: 600 10px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.dm-on .mstx__bad  { color: #B42318; }
html.dm-on .mstx__warn { color: #C2410C; }
html.dm-on .mstx__good { color: #0F8A5F; }
html.dm-on .mstx__mute { color: var(--m-ink-4); font-weight: 500; }
html[data-theme="dark"].dm-on .mstx__bad  { color: #FF9A8F; }
html[data-theme="dark"].dm-on .mstx__warn { color: #FDA974; }
html[data-theme="dark"].dm-on .mstx__good { color: #5FD9AC; }

/* part-paid progress — replaces the unlabelled ring */
html.dm-on .mstx__prog { display: flex; align-items: center; gap: 7px; min-width: 0; }
html.dm-on .mstx__progbar {
  flex: 0 0 54px; height: 4px; border-radius: 3px; overflow: hidden; background: rgba(17,22,50,.10);
}
html[data-theme="dark"].dm-on .mstx__progbar { background: rgba(255,255,255,.14); }
html.dm-on .mstx__progbar i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #6C7CFF, #3D4FE0);
}
html.dm-on .mstx__progtx {
  font: 600 10px/1 var(--font); color: var(--m-ink-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* right column pins to the top so the figure lines up with the customer name */
html.dm-on .mstx__r {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  flex: 0 0 auto; align-self: flex-start;
}
html.dm-on .mstx__amt {
  font: 700 13px/1 var(--font-ledger); color: var(--m-ink); letter-spacing: -.015em; white-space: nowrap;
}
html.dm-on .mstx__amt.is-in { color: #0F8A5F; }
html[data-theme="dark"].dm-on .mstx__amt.is-in { color: #5FD9AC; }
html.dm-on .mstx__chip {
  font: 800 8.5px/1 var(--font); letter-spacing: .05em; text-transform: uppercase;
  padding: 3.5px 6px; border-radius: 6px; white-space: nowrap;
}
html.dm-on .mstx__chip.c-ok   { color: #0F8A5F; background: rgba(15,138,95,.12); }
html.dm-on .mstx__chip.c-late { color: #B42318; background: rgba(217,45,32,.13); }
html.dm-on .mstx__chip.c-part { color: #C2410C; background: rgba(234,88,12,.13); }
html.dm-on .mstx__chip.c-due  { color: #3D4FE0; background: rgba(108,124,255,.13); }
html.dm-on .mstx__chip.c-off  { color: #6B7390; background: rgba(17,22,50,.06); }
html[data-theme="dark"].dm-on .mstx__chip.c-ok   { color: #5FD9AC; background: rgba(59,215,158,.14); }
html[data-theme="dark"].dm-on .mstx__chip.c-late { color: #FF9A8F; background: rgba(217,45,32,.20); }
html[data-theme="dark"].dm-on .mstx__chip.c-part { color: #FDA974; background: rgba(234,88,12,.18); }
html[data-theme="dark"].dm-on .mstx__chip.c-due  { color: #A9B6FF; background: rgba(129,144,255,.18); }
html[data-theme="dark"].dm-on .mstx__chip.c-off  { color: #9AA3BE; background: rgba(255,255,255,.07); }

html.dm-on .mstx__empty {
  padding: 22px 16px; text-align: center;
  font: 500 12.5px/1.5 var(--font); color: var(--m-ink-4);
}

/* ---- the relocated "View all": a footer row, on both panels ---- */
html.dm-on .mstx__foot { border-top: 1px solid rgba(17,22,50,.06); }
html[data-theme="dark"].dm-on .mstx__foot { border-top-color: rgba(255,255,255,.07); }
html.dm-on .mstx__footbtn,
html.dm-on .dchz__foot {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 5px;
  height: 46px; border: 0; background: none; cursor: pointer;
  font: 750 12px/1 var(--font); letter-spacing: -.005em; color: #3D4FE0;
}
html[data-theme="dark"].dm-on .mstx__footbtn,
html[data-theme="dark"].dm-on .dchz__foot { color: #A9B6FF; }
html.dm-on .mstx__footbtn i, html.dm-on .dchz__foot i { font-size: 11px; }
html.dm-on .dchz__foot {
  margin-top: 2px; border-radius: 16px; background: rgba(17,22,50,.035);
}
html[data-theme="dark"].dm-on .dchz__foot { background: rgba(255,255,255,.05); }

/* =====================================================================================
 *  v3.9.1 — INSIGHTS ENTRY: a live preview card (owner-approved, preview A).
 *  ------------------------------------------------------------------------------------
 *  The entry used to be a bare nav row — "Insights / Charts, top customers, activity" —
 *  a label with no information sitting beneath two data-dense panels, so it read as a menu
 *  item rather than a destination. It now shows this month's invoiced with its
 *  month-on-month change, a six-month two-line trend, and three feet (collected,
 *  collection rate, top customer). Figures come from monthlySeries()/topCustomers().
 *
 *  NOTE for anyone touching the chart: BOTH series share one scale (see mInsightsHTML).
 *  Normalising each to its own max drew "collected" ABOVE "invoiced", which is impossible.
 *  The legend exists so the two lines are identifiable rather than decorative.
 * ================================================================================== */
html.dm-on .dm-ins { margin-top: 12px; }

html.dm-on .insx {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border-radius: 22px; padding: 15px 15px 13px; position: relative; overflow: hidden;
  border: 1px solid rgba(17,22,50,.06);
  background:
    radial-gradient(120% 90% at 88% -20%, rgba(108,124,255,.13), transparent 62%),
    linear-gradient(180deg, #FFFFFF, #FBFCFF);
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 16px 34px -24px rgba(28,40,100,.45);
}
html[data-theme="dark"].dm-on .insx {
  border-color: rgba(255,255,255,.09);
  background:
    radial-gradient(120% 90% at 88% -20%, rgba(132,150,255,.16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
  box-shadow: 0 20px 38px -26px rgba(0,0,0,.85);
}

html.dm-on .insx__top { display: flex; align-items: flex-start; gap: 12px; }
html.dm-on .insx__lead { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
html.dm-on .insx__eyebrow {
  font: 700 8.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--m-ink-4);
}
html.dm-on .insx__fig {
  font: 800 27px/1 var(--font-ledger); letter-spacing: -.03em; color: var(--m-ink);
}
html.dm-on .insx__cap { font: 500 11px/1.2 var(--font); color: var(--m-ink-3); }
html.dm-on .insx__cap b { font-weight: 800; margin-left: 3px; }
html.dm-on .insx__cap b.up { color: #0F8A5F; }
html.dm-on .insx__cap b.down { color: #B42318; }
html[data-theme="dark"].dm-on .insx__cap b.up { color: #5FD9AC; }
html[data-theme="dark"].dm-on .insx__cap b.down { color: #FF9A8F; }

html.dm-on .insx__go {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center;
  color: #fff; font-size: 13px;
  background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 6px 14px -6px rgba(61,79,224,.7), inset 0 1px 0 rgba(255,255,255,.3);
}

html.dm-on .insx__chart { display: block; margin: 12px -2px 9px; }
html.dm-on .insx__chart svg { width: 100%; height: 56px; display: block; overflow: visible; }

html.dm-on .insx__leg { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
html.dm-on .insx__lg {
  display: inline-flex; align-items: center; gap: 5px;
  font: 650 9px/1 var(--font); letter-spacing: .04em; text-transform: uppercase;
}
html.dm-on .insx__lg::before { content: ''; width: 12px; height: 2.5px; border-radius: 2px; background: currentColor; }
html.dm-on .insx__lg.inv { color: #4B63FF; }
html.dm-on .insx__lg.col { color: #0F8A5F; }
html[data-theme="dark"].dm-on .insx__lg.inv { color: #93A2FF; }
html[data-theme="dark"].dm-on .insx__lg.col { color: #5FD9AC; }

html.dm-on .insx__feet {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-top: 9px; padding-top: 11px; border-top: 1px solid rgba(17,22,50,.06);
}
html[data-theme="dark"].dm-on .insx__feet { border-top-color: rgba(255,255,255,.08); }
html.dm-on .insx__foot { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html.dm-on .insx__foot em {
  font: 650 8px/1 var(--font); font-style: normal; letter-spacing: .06em; text-transform: uppercase;
  color: var(--m-ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.dm-on .insx__foot b {
  font: 750 12.5px/1 var(--font-ledger); color: var(--m-ink); letter-spacing: -.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* =====================================================================================
 *  v3.9.2 — INSIGHTS SCREEN in the dashboard's language (owner-approved, light hero).
 *  ------------------------------------------------------------------------------------
 *  What was wrong, found by building a harness for the real screen rather than guessing:
 *    · the hero was a dark navy slab — the only dark object on a white screen, left over
 *      from before v3.7.8 flattened the app — with cramped, wrapping stat labels
 *    · the chart blue was #2E63C4, a second blue with no reason to differ from the app's
 *      indigo #4B63FF
 *    · customer avatars were circles; the chase cards use rounded squares
 *    · both segmented controls were the old dark pill, not the approved Crystal Slider
 *    · card headings were grey sentences, not the terse uppercase eyebrows used elsewhere
 *    · monthly bars carried NO figures — height only
 *
 *  Every JS hook is preserved (#ins-rate, #ins-area, [data-ins-chart], #ins-scrub,
 *  #ins-tip, .inss-donut__svg, #ins-leg, #ins-donut-c/cs, .inss-tp__fill[data-w],
 *  #ins-tpl, [data-ins-seg]/.inss-seg__pill, [data-ins-range]/.inss__pill, #ins-bars,
 *  [data-ins-close], [data-ins-activity]) so wireInsights() needed no rewrite.
 *  Appended last; scoped to `.inss--v2`.
 * ================================================================================== */
html.dm-on .inss--v2 { background: #FFFFFF; }
html[data-theme="dark"].dm-on .inss--v2 { background: #000000; }

/* ---- header ---- */
html.dm-on .inss--v2 .inss__head {
  display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 14px 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  border-bottom: 1px solid rgba(17,22,50,.06);
  -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%);
}
html[data-theme="dark"].dm-on .inss--v2 .inss__head {
  background: linear-gradient(180deg, rgba(10,11,14,.92), rgba(10,11,14,.72));
  border-bottom-color: rgba(255,255,255,.08);
}
html.dm-on .inss--v2 .inss__back {
  width: 36px; height: 36px; border-radius: 12px; border: 0; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 16px; color: var(--m-ink);
  background: rgba(17,22,50,.05);
}
html[data-theme="dark"].dm-on .inss--v2 .inss__back { background: rgba(255,255,255,.08); color: #F4F6FC; }
html.dm-on .inss--v2 .inss__title {
  flex: 1 1 auto; font: 800 19px/1 var(--font-display); letter-spacing: -.02em; color: var(--m-ink);
}
html.dm-on .inss--v2 .inss__sp { display: none; }

/* ---- both segmented controls: the Crystal Slider ---- */
html.dm-on .inss--v2 .inss__range,
html.dm-on .inss--v2 .inss-seg {
  position: relative; display: flex; padding: 3px; border-radius: 13px; flex: 0 0 auto;
  background: linear-gradient(180deg, rgba(236,239,248,.94), rgba(227,231,243,.74));
  border: 1px solid rgba(17,22,50,.06);
  box-shadow: inset 0 1px 3px rgba(20,30,70,.10);
}
html[data-theme="dark"].dm-on .inss--v2 .inss__range,
html[data-theme="dark"].dm-on .inss--v2 .inss-seg {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.55);
}
html.dm-on .inss--v2 .inss-seg { width: 100%; padding: 4px; border-radius: 14px; margin-bottom: 11px; }
html.dm-on .inss--v2 .inss__pill,
html.dm-on .inss--v2 .inss-seg__pill {
  position: absolute; left: 0; top: 3px; bottom: 3px; width: 0; border-radius: 10px; z-index: 0;
  background: linear-gradient(180deg, #FFFFFF, #F7F9FE);
  box-shadow: inset 0 1px 0 #FFF, inset 0 0 0 1px rgba(108,124,255,.14), 0 5px 12px -5px rgba(30,42,110,.3);
  transition: transform .42s cubic-bezier(.22,1.06,.36,1), width .42s cubic-bezier(.22,1.06,.36,1);
}
html.dm-on .inss--v2 .inss-seg__pill { top: 4px; bottom: 4px; border-radius: 11px; }
html[data-theme="dark"].dm-on .inss--v2 .inss__pill,
html[data-theme="dark"].dm-on .inss--v2 .inss-seg__pill {
  background: linear-gradient(180deg, #3B3F4C, #2F323D);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), inset 0 0 0 1px rgba(150,166,255,.15);
}
html.dm-on .inss--v2 .inss__range button {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  padding: 7px 12px; border-radius: 10px;
  font: 750 11.5px/1 var(--font); color: #7A8299; transition: color .26s ease;
}
html.dm-on .inss--v2 .inss-seg button {
  position: relative; z-index: 1; flex: 1; border: 0; background: none; cursor: pointer;
  padding: 9px 0; border-radius: 11px;
  font: 700 12px/1 var(--font); color: #7A8299; transition: color .26s ease;
}
html.dm-on .inss--v2 .inss__range button.on,
html.dm-on .inss--v2 .inss-seg button.on { color: #2C3556; }
html[data-theme="dark"].dm-on .inss--v2 .inss__range button,
html[data-theme="dark"].dm-on .inss--v2 .inss-seg button { color: #858DA6; }
html[data-theme="dark"].dm-on .inss--v2 .inss__range button.on,
html[data-theme="dark"].dm-on .inss--v2 .inss-seg button.on { color: #EEF1F8; }

/* ---- scroll + card shell ---- */
html.dm-on .inss--v2 .inss__scroll {
  padding: 14px var(--m-gutter) calc(env(safe-area-inset-bottom, 0px) + 24px);
  display: flex; flex-direction: column; gap: 12px;
}
html.dm-on .inss--v2 .inss-card,
html.dm-on .inss--v2 .inss-hero {
  /* the scroller is a flex column — without this, cards shrink to fit the viewport and
     their charts are clipped mid-render */
  flex: 0 0 auto;
  border-radius: 20px; padding: 14px; overflow: hidden;
  border: 1px solid rgba(17,22,50,.06);
  background: linear-gradient(180deg, #FFFFFF, #FCFDFF);
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 14px 30px -22px rgba(28,40,100,.40);
}
html[data-theme="dark"].dm-on .inss--v2 .inss-card,
html[data-theme="dark"].dm-on .inss--v2 .inss-hero {
  color: #F4F6FC;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 18px 34px -24px rgba(0,0,0,.85);
}
html.dm-on .inss--v2 .inss-card__h {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px;
}
html.dm-on .inss--v2 .inss-card__h--stack { display: block; }
html.dm-on .inss--v2 .inss-card__hl { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
html.dm-on .inss--v2 .inss__eyebrow {
  font: 700 8.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--m-ink-4);
}
html.dm-on .inss--v2 .inss-card__t {
  margin: 0; font: 750 15.5px/1.15 var(--font-display); letter-spacing: -.018em; color: var(--m-ink);
}
html.dm-on .inss--v2 .inss__badge {
  flex: 0 0 auto; font: 700 9px/1 var(--font); letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 8px; border-radius: 8px; color: var(--m-ink-4); background: rgba(17,22,50,.05);
}
html[data-theme="dark"].dm-on .inss--v2 .inss__badge { background: rgba(255,255,255,.07); color: #9AA3BE; }

/* ---- hero ---- */
html.dm-on .inss--v2 .inss-hero {
  /* The v2.x hero was `display:flex; color:#fff` on a dark slab. Both must be undone
     explicitly: leaving the flex made the ring and the four stat cells share ONE row
     (cells squeezed, labels truncated to "INV…"), and leaving the white text made the
     captions invisible on the new light card. Caught in the shipped-build render. */
  display: block; color: var(--m-ink);
  background:
    radial-gradient(120% 90% at 90% -20%, rgba(108,124,255,.14), transparent 60%),
    linear-gradient(180deg, #FFFFFF, #FBFCFF);
}
html[data-theme="dark"].dm-on .inss--v2 .inss-hero {
  color: #F4F6FC;
  background:
    radial-gradient(120% 90% at 90% -20%, rgba(132,150,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
html.dm-on .inss--v2 .inss-hero__glow { display: none; }
html.dm-on .inss--v2 .inss-hero__top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
html.dm-on .inss--v2 .inss-hero__ringwrap { position: relative; width: 86px; height: 86px; flex: 0 0 auto; }
html.dm-on .inss--v2 .inss-hero__ring { width: 86px; height: 86px; display: block; flex: none; position: static; }
html.dm-on .inss--v2 .inss-hero__ring .bg { fill: none; stroke: rgba(17,22,50,.08); stroke-width: 10; }
html[data-theme="dark"].dm-on .inss--v2 .inss-hero__ring .bg { stroke: rgba(255,255,255,.10); }
html.dm-on .inss--v2 .inss-hero__ring .fg { fill: none; stroke: #0F8A5F; stroke-width: 10; stroke-linecap: round; }
html[data-theme="dark"].dm-on .inss--v2 .inss-hero__ring .fg { stroke: #3BD79E; }
html.dm-on .inss--v2 .inss-hero__rv {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; pointer-events: none;
}
html.dm-on .inss--v2 .inss-hero__rv b {
  font: 800 19px/1 var(--font-ledger); letter-spacing: -.03em; color: var(--m-ink);
}
html.dm-on .inss--v2 .inss-hero__rv em {
  font: 650 7.5px/1 var(--font); font-style: normal; letter-spacing: .08em;
  text-transform: uppercase; color: var(--m-ink-4);
}
html.dm-on .inss--v2 .inss-hero__lead { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
html.dm-on .inss--v2 .inss-hero__fig {
  font: 800 26px/1 var(--font-ledger); letter-spacing: -.03em; color: var(--m-ink);
}
html.dm-on .inss--v2 .inss-hero__cap { font: 500 11px/1.25 var(--font); color: var(--m-ink-3); }
html.dm-on .inss--v2 .inss-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
html.dm-on .inss--v2 .inss-hs {
  display: flex; flex-direction: column; gap: 3px; padding: 10px;
  border-radius: 13px; background: rgba(17,22,50,.035); min-width: 0;
}
html[data-theme="dark"].dm-on .inss--v2 .inss-hs { background: rgba(255,255,255,.05); }
html.dm-on .inss--v2 .inss-hs b {
  font: 800 15px/1 var(--font-ledger); letter-spacing: -.02em; color: var(--m-ink);
}
html.dm-on .inss--v2 .inss-hs em {
  font: 650 8px/1 var(--font); font-style: normal; letter-spacing: .06em; text-transform: uppercase;
  color: var(--m-ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- chart ---- */
html.dm-on .inss--v2 .inss-key { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(17,22,50,.06); }
html[data-theme="dark"].dm-on .inss--v2 .inss-key { border-top-color: rgba(255,255,255,.08); }
html.dm-on .inss--v2 .inss-key span {
  font: 650 9px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--m-ink-3);
}

/* ---- donut legend ---- */
html.dm-on .inss--v2 .inss-leg__r {
  display: grid; grid-template-columns: 8px 1fr 34px auto; align-items: center; gap: 7px;
  border: 0; background: none; padding: 0; cursor: pointer; text-align: left;
}
html.dm-on .inss--v2 .inss-leg__n { font: 650 11px/1 var(--font); color: var(--m-ink); }
html.dm-on .inss--v2 .inss-leg__b {
  height: 4px; border-radius: 3px; background: rgba(17,22,50,.08); overflow: hidden;
}
html[data-theme="dark"].dm-on .inss--v2 .inss-leg__b { background: rgba(255,255,255,.12); }
html.dm-on .inss--v2 .inss-leg__b i { display: block; height: 100%; border-radius: 3px; }
html.dm-on .inss--v2 .inss-leg__v { font: 750 11px/1 var(--font-ledger); color: var(--m-ink); }
html.dm-on .inss--v2 .inss-leg__pct { display: none; }

/* ---- bars ---- */
html.dm-on .inss--v2 .inss-bars { display: flex; align-items: flex-end; gap: 6px; height: 132px; }
html.dm-on .inss--v2 .inss-bar {
  flex: 1 1 0; min-width: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px;
}
html.dm-on .inss--v2 .inss-bar__v {
  font: 700 8.5px/1 var(--font-ledger); color: var(--m-ink-4); letter-spacing: -.02em; white-space: nowrap;
}
html.dm-on .inss--v2 .inss-bar.sel .inss-bar__v { color: #4B63FF; }
html[data-theme="dark"].dm-on .inss--v2 .inss-bar.sel .inss-bar__v { color: #93A2FF; }
html.dm-on .inss--v2 .inss-bar__col {
  width: 100%; border-radius: 7px 7px 3px 3px; background: rgba(108,124,255,.20);
  transform-origin: bottom;
}
html[data-theme="dark"].dm-on .inss--v2 .inss-bar__col { background: rgba(132,150,255,.22); }
html.dm-on .inss--v2 .inss-bar.sel .inss-bar__col {
  background: linear-gradient(180deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 6px 14px -6px rgba(61,79,224,.6);
}
html.dm-on .inss--v2 .inss-bar__x { font: 650 9px/1 var(--font); color: var(--m-ink-4); }

/* ---- top customers ---- */
html.dm-on .inss--v2 .inss-tpl { display: flex; flex-direction: column; gap: 11px; }
html.dm-on .inss--v2 .inss-tp { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px; }
/* rounded square, matching the chase avatars — these were circles */
html.dm-on .inss--v2 .inss-tp__av {
  width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center;
  font: 800 13px/1 var(--font-display); color: #fff; flex: 0 0 auto;
  box-shadow: 0 4px 10px -4px rgba(20,30,70,.35), inset 0 1px 0 rgba(255,255,255,.3);
}
html.dm-on .inss--v2 .inss-tp__b { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
html.dm-on .inss--v2 .inss-tp__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
html.dm-on .inss--v2 .inss-tp__n {
  font: 700 12.5px/1 var(--font-display); color: var(--m-ink); letter-spacing: -.012em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.dm-on .inss--v2 .inss-tp__v {
  font: 750 12px/1 var(--font-ledger); color: var(--m-ink); letter-spacing: -.015em; flex: 0 0 auto;
}
html.dm-on .inss--v2 .inss-tp__track {
  height: 5px; border-radius: 3px; background: rgba(17,22,50,.07); overflow: hidden;
}
html[data-theme="dark"].dm-on .inss--v2 .inss-tp__track { background: rgba(255,255,255,.10); }
html.dm-on .inss--v2 .inss-tp__fill {
  display: block; height: 100%; border-radius: 3px; width: 0;
  background: linear-gradient(90deg, #6C7CFF, #3D4FE0);
  transition: width .7s cubic-bezier(.22,1.06,.36,1);
}

/* ---- currency ---- */
html.dm-on .inss--v2 .inss-cur { display: flex; flex-direction: column; gap: 12px; }
html.dm-on .inss--v2 .inss-cur__r { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; }
html.dm-on .inss--v2 .inss-cur__badge {
  width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center;
  font: 800 16px/1 var(--font-ledger); color: #3D4FE0; background: rgba(108,124,255,.12); flex: 0 0 auto;
}
html[data-theme="dark"].dm-on .inss--v2 .inss-cur__badge { color: #A9B6FF; background: rgba(129,144,255,.16); }
html.dm-on .inss--v2 .inss-cur__b { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
html.dm-on .inss--v2 .inss-cur__top { display: flex; align-items: baseline; gap: 8px; }
html.dm-on .inss--v2 .inss-cur__top strong { font: 800 12px/1 var(--font-ledger); letter-spacing: .04em; color: var(--m-ink); }
html.dm-on .inss--v2 .inss-cur__top span { font: 500 10px/1 var(--font); color: var(--m-ink-4); }
html.dm-on .inss--v2 .inss-cur__track { height: 5px; border-radius: 3px; background: rgba(17,22,50,.07); overflow: hidden; }
html[data-theme="dark"].dm-on .inss--v2 .inss-cur__track { background: rgba(255,255,255,.10); }
html.dm-on .inss--v2 .inss-cur__track span {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #6C7CFF, #3D4FE0);
}
html.dm-on .inss--v2 .inss-cur__v { text-align: right; display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
html.dm-on .inss--v2 .inss-cur__v strong {
  font: 750 12px/1 var(--font-ledger); color: var(--m-ink); letter-spacing: -.015em;
}
html.dm-on .inss--v2 .inss-cur__v span { font: 600 9.5px/1 var(--font); color: var(--m-ink-4); }

/* ---- activity ---- */
html.dm-on .inss--v2 .inss-acv { display: flex; flex-direction: column; }
html.dm-on .inss--v2 .inss-ai {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px;
  padding: 10px 0; border-bottom: 1px solid rgba(17,22,50,.05);
}
html[data-theme="dark"].dm-on .inss--v2 .inss-ai { border-bottom-color: rgba(255,255,255,.06); }
html.dm-on .inss--v2 .inss-ai:last-child { border-bottom: 0; }
html.dm-on .inss--v2 .inss-ai__rail { display: none; }
html.dm-on .inss--v2 .inss-ai__ic {
  width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center;
  font-size: 14px; flex: 0 0 auto; border: 0;
}
html.dm-on .inss--v2 .inss-ai__b { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
html.dm-on .inss--v2 .inss-ai__t {
  font: 650 12px/1.25 var(--font); color: var(--m-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.dm-on .inss--v2 .inss-ai__m { font: 500 10px/1 var(--font); color: var(--m-ink-4); }

/* ---- footer CTA, matching the dashboard panels ---- */
html.dm-on .inss--v2 .inss-cta {
  width: calc(100% + 28px); margin: 8px -14px -14px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  height: 44px; border: 0; border-top: 1px solid rgba(17,22,50,.06); background: none; cursor: pointer;
  font: 750 12px/1 var(--font); color: #3D4FE0; border-radius: 0;
}
html[data-theme="dark"].dm-on .inss--v2 .inss-cta { border-top-color: rgba(255,255,255,.07); color: #A9B6FF; }

/* =====================================================================================
 *  v3.9.3 — GLOBAL CONFIRM → a real iOS alert (owner-approved).
 *  ------------------------------------------------------------------------------------
 *  The old confirm() was a Bootstrap modal wearing a bottom-sheet costume: a floating
 *  centred card that still carried a DRAG GRABBER, a flat grey scrim rather than a blur,
 *  and stacked full-width sheet buttons inside an alert-shaped container.
 *
 *  This is the first half of the global modal work. The app has ELEVEN modal surfaces:
 *  this shared confirm (13 call sites) plus TEN separately-implemented bottom sheets
 *  (appmenu / avd / ds / dxs / ivq / ivx / ndg / pdx / rcx / ums). Those are still on
 *  their own markup and are the next batch — see §6.
 *
 *  Not themed with app indigo on purpose: an alert is system furniture, so it uses iOS
 *  material + the system tint. Destructive actions are red, never indigo.
 * ================================================================================== */
.iosal { position: fixed; inset: 0; z-index: 2000; }
.iosal__scrim {
  position: absolute; inset: 0; background: rgba(16,20,34,.34);
  -webkit-backdrop-filter: blur(9px) saturate(120%); backdrop-filter: blur(9px) saturate(120%);
  opacity: 0; transition: opacity .2s ease;
}
html[data-theme="dark"] .iosal__scrim { background: rgba(0,0,0,.56); }
.iosal.is-in .iosal__scrim { opacity: 1; }
.iosal.is-out .iosal__scrim { opacity: 0; }

.iosal__wrap {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 24px;
}
.iosal__box {
  width: 270px; max-width: 100%; border-radius: 22px; overflow: hidden;
  background: rgba(249,250,252,.86);
  box-shadow: 0 30px 60px -20px rgba(10,16,40,.42), 0 2px 6px rgba(10,16,40,.10);
  -webkit-backdrop-filter: blur(32px) saturate(190%); backdrop-filter: blur(32px) saturate(190%);
  opacity: 0; transform: scale(1.12);
  transition: opacity .2s ease, transform .26s cubic-bezier(.22,1.06,.36,1);
}
html[data-theme="dark"] .iosal__box {
  background: rgba(42,44,52,.82);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.75);
}
.iosal.is-in .iosal__box { opacity: 1; transform: scale(1); }
.iosal.is-out .iosal__box { opacity: 0; transform: scale(.96); transition-duration: .14s; }
@media (prefers-reduced-motion: reduce) {
  .iosal__box, .iosal__scrim { transition-duration: .01s; }
  .iosal__box { transform: none !important; }
}

/* The dialog itself takes focus on open (see modals.js) purely to move screen-reader
   focus into the alert — it must never paint a ring. The BUTTONS keep theirs for keyboard
   users. */
.iosal__box:focus, .iosal__box:focus-visible { outline: none; }
.iosal__body { padding: 19px 17px 16px; text-align: center; }
.iosal__t {
  margin: 0 0 4px; font: 700 16px/1.28 var(--font-display, "Inter Tight", sans-serif);
  letter-spacing: -.015em; color: var(--m-ink, #0A1F44);
}
html[data-theme="dark"] .iosal__t { color: #F4F6FC; }
.iosal__m {
  margin: 0; font: 400 12.5px/1.4 var(--font-ui, Inter, sans-serif);
  color: var(--m-ink-2, #4A5878);
}
html[data-theme="dark"] .iosal__m { color: #B9C1D6; }

/* hairline-divided actions — the iOS signature */
.iosal__acts { display: flex; border-top: .5px solid rgba(17,22,50,.16); }
html[data-theme="dark"] .iosal__acts { border-top-color: rgba(255,255,255,.16); }
.iosal__b {
  flex: 1 1 0; min-width: 0; border: 0; background: none; cursor: pointer;
  padding: 12px 8px; font: 400 16px/1.2 var(--font-ui, Inter, sans-serif); color: #3D4FE0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .12s ease;
}
.iosal__b:active { background: rgba(17,22,50,.07); }
html[data-theme="dark"] .iosal__b:active { background: rgba(255,255,255,.08); }
.iosal__b + .iosal__b { border-left: .5px solid rgba(17,22,50,.16); }
html[data-theme="dark"] .iosal__b + .iosal__b { border-left-color: rgba(255,255,255,.16); }
.iosal__b.is-primary { font-weight: 650; }
.iosal__b.is-danger { color: #D92D20; font-weight: 650; }
html[data-theme="dark"] .iosal__b { color: #93A2FF; }
html[data-theme="dark"] .iosal__b.is-danger { color: #FF6B5E; }
.iosal__b:focus-visible { outline: 2px solid #4B63FF; outline-offset: -3px; }

/* JS adds .is-stacked when the two labels cannot sit side by side (measured, not guessed).
   column-reverse puts the confirm on top and Cancel at the bottom from the same DOM order,
   which is what iOS does. */
.iosal__acts.is-stacked { flex-direction: column-reverse; }
.iosal__acts.is-stacked .iosal__b { flex: 0 0 auto; white-space: normal; }
.iosal__acts.is-stacked .iosal__b + .iosal__b {
  border-left: 0; border-bottom: .5px solid rgba(17,22,50,.16);
}
html[data-theme="dark"] .iosal__acts.is-stacked .iosal__b + .iosal__b {
  border-bottom-color: rgba(255,255,255,.16);
}

/* =====================================================================================
 *  v3.9.4 — GLOBAL MODALS, PART 2: unify the SHEET SCRIM with the v3.9.3 iOS alert.
 *  ------------------------------------------------------------------------------------
 *  WHY THIS IS SMALL, AND WHY THAT IS THE RIGHT ANSWER. v3.9.3's note proposed migrating
 *  the ten bottom sheets onto a new shared primitive, on the assumption they had drifted.
 *  Measuring their CSS showed that assumption was WRONG — they are already one language:
 *      radius   30px on 8 of 9   (rcx alone was 28px)
 *      grabber  40x5px on all
 *      material rgba(255,255,255,.74) on all (ums .78)
 *      scrim    rgba(9,12,18,.40) + blur(2px) — IDENTICAL on all
 *  Rewriting ten working features (each already wired to HaaltdNative.draggableSheet for
 *  drag-to-dismiss) would have been a large, risky change buying almost nothing.
 *
 *  What WAS wrong is a defect v3.9.3 introduced: the new alert blurs the backdrop by 9px
 *  while every sheet blurred by 2px, so the two modal types sat on visibly different
 *  scrims. That is what this fixes — plus rcx's odd 28px radius.
 *
 *  CSS ONLY. No JS touched, so no sheet's behaviour can regress.
 *  `.ivx-sheet` is deliberately excluded: it is a full-screen invoice viewer, not a modal.
 * ================================================================================== */
.ndg__scrim, .pdx__scrim, .ums__scrim, .appmenu__scrim, .avd__scrim,
.ds__scrim, .dxs__scrim, .ivq__scrim, .rcx__scrim, .nt3__scrim {
  background: rgba(16,20,34,.34) !important;
  -webkit-backdrop-filter: blur(9px) saturate(120%) !important;
          backdrop-filter: blur(9px) saturate(120%) !important;
}
html[data-theme="dark"] .ndg__scrim, html[data-theme="dark"] .pdx__scrim,
html[data-theme="dark"] .ums__scrim, html[data-theme="dark"] .appmenu__scrim,
html[data-theme="dark"] .avd__scrim, html[data-theme="dark"] .ds__scrim,
html[data-theme="dark"] .dxs__scrim, html[data-theme="dark"] .ivq__scrim,
html[data-theme="dark"] .rcx__scrim,
/* v3.26.0 — notifications joins the family; a copied lookalike would drift the moment
   this shared rule is retuned. */
html[data-theme="dark"] .nt3__scrim { background: rgba(0,0,0,.56) !important; }

/* the one true outlier: every other sheet is 30px */
.rcx__sheet { border-radius: 30px 30px 0 0 !important; }

/* =====================================================================================
 *  v3.9.5 — SETTINGS master list, in the app's language (owner-approved).
 *  ------------------------------------------------------------------------------------
 *  Replaced: a ~280px BLACK hero slab (the only dark object on a white screen, running an
 *  aurora animation that is invisible in light mode — the same problem the Insights hero
 *  had before v3.9.2); nine arbitrary icon colours including #1A1C1E black for Company;
 *  separators running the full width under the icons; headings and cards that predated
 *  the current card language.
 *
 *  The aurora itself is NOT deleted — it remains its own feature on the About page.
 *  Scope: the MASTER LIST only. The nine detail pages (.stx-page / renderTab) are
 *  unchanged and are the next job — see §6.
 * ================================================================================== */
html.dm-on .setv-master {
  /* v3.10.2 BUGFIX — the last ~110px of this list was unreachable, hidden behind the
     floating tab bar. The bar is 66px tall sitting 12px above the safe area, and the
     centre FAB rises higher still, which is why every other phone view clears 150px
     (.dm__scroll, .ivx__scroll). The v2.62.0 master this replaced cleared 96px; the
     v3.9.5 rewrite dropped that to a flat 40px with no safe-area term at all, so on a
     phone the About row and the version footer sat under the bar with nothing below
     them to scroll to. Measured at 393x852: padding-bottom 40px against 78px of bar. */
  padding: calc(env(safe-area-inset-top, 0px) + 6px) var(--m-gutter) calc(150px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column;
}
html.dm-on .setv-head { padding: 0 2px 12px; }
html.dm-on .setv-title {
  margin: 0; font: 800 30px/1.05 var(--font-display); letter-spacing: -.03em; color: var(--m-ink);
}

/* ---- hero: a light card, and a tappable row into Company ---- */
html.dm-on .setv-hero {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px;
  width: 100%; text-align: left; cursor: pointer; margin-bottom: 20px;
  padding: 14px; border-radius: 20px; border: 1px solid rgba(17,22,50,.06);
  background:
    radial-gradient(120% 90% at 88% -20%, rgba(108,124,255,.13), transparent 62%),
    linear-gradient(180deg, #FFFFFF, #FBFCFF);
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 16px 34px -24px rgba(28,40,100,.45);
}
html[data-theme="dark"].dm-on .setv-hero {
  border-color: rgba(255,255,255,.09);
  background:
    radial-gradient(120% 90% at 88% -20%, rgba(132,150,255,.16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
  box-shadow: 0 20px 38px -26px rgba(0,0,0,.85);
}
html.dm-on .setv-hero__mono, html.dm-on .setv-hero__logo {
  width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center;
  font: 800 17px/1 var(--font-display); color: #fff; letter-spacing: .01em;
  background: linear-gradient(150deg, #6C7CFF, #3D4FE0); overflow: hidden; flex: 0 0 auto;
  box-shadow: 0 6px 14px -6px rgba(61,79,224,.65), inset 0 1px 0 rgba(255,255,255,.3);
}
html.dm-on .setv-hero__logo img { width: 100%; height: 100%; object-fit: cover; }
html.dm-on .setv-hero__txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
html.dm-on .setv-hero__name {
  font: 750 16px/1.15 var(--font-display); letter-spacing: -.018em; color: var(--m-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.dm-on .setv-hero__sub {
  font: 650 8.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--m-ink-4);
}
/* hidden unless the workspace has a second member — see paintRoleChip() in settings.js */
html.dm-on .setv-hero__role {
  font: 800 9px/1 var(--font); letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 8px; border-radius: 7px; color: #3D4FE0; background: rgba(108,124,255,.13);
}
html[data-theme="dark"].dm-on .setv-hero__role { color: #A9B6FF; background: rgba(129,144,255,.18); }
html.dm-on .setv-hero__role[hidden] { display: none; }
html.dm-on .setv-hero__chev { font-size: 13px; color: var(--m-ink-4); }

/* ---- groups ---- */
html.dm-on .setv-sec {
  font: 700 8.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
  color: var(--m-ink-4); padding: 0 4px 8px;
}
html.dm-on .setv-grp {
  border-radius: 20px; overflow: hidden; margin-bottom: 20px;
  border: 1px solid rgba(17,22,50,.06);
  background: linear-gradient(180deg, #FFFFFF, #FCFDFF);
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 14px 30px -22px rgba(28,40,100,.40);
}
html[data-theme="dark"].dm-on .setv-grp {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 18px 34px -24px rgba(0,0,0,.85);
}

/* ---- rows ---- */
html.dm-on .setv-row {
  position: relative; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px;
  padding: 11px 13px; min-height: 56px;
}
/* separator inset to the LABEL, iOS-style — the old one ran under the icon too */
html.dm-on .setv-row + .setv-row::before {
  content: ''; position: absolute; left: 57px; right: 0; top: 0; height: 1px;
  background: rgba(17,22,50,.06);
}
html[data-theme="dark"].dm-on .setv-row + .setv-row::before { background: rgba(255,255,255,.07); }
html.dm-on .setv-row__ic {
  width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center;
  font-size: 15px; flex: 0 0 auto;
}
html.dm-on .setv-row__ic.k-ind { color: #3D4FE0; background: rgba(108,124,255,.13); }
html.dm-on .setv-row__ic.k-grn { color: #0F8A5F; background: rgba(15,138,95,.12); }
html.dm-on .setv-row__ic.k-amb { color: #B26A00; background: rgba(240,160,42,.15); }
html.dm-on .setv-row__ic.k-vio { color: #7C5CE0; background: rgba(124,92,224,.13); }
html.dm-on .setv-row__ic.k-tea { color: #12808C; background: rgba(21,154,168,.13); }
html.dm-on .setv-row__ic.k-gry { color: #6B7390; background: rgba(17,22,50,.06); }
html[data-theme="dark"].dm-on .setv-row__ic.k-ind { color: #A9B6FF; background: rgba(129,144,255,.17); }
html[data-theme="dark"].dm-on .setv-row__ic.k-grn { color: #5FD9AC; background: rgba(59,215,158,.14); }
html[data-theme="dark"].dm-on .setv-row__ic.k-amb { color: #F5C46B; background: rgba(240,160,42,.17); }
html[data-theme="dark"].dm-on .setv-row__ic.k-vio { color: #B9A6FF; background: rgba(124,92,224,.20); }
html[data-theme="dark"].dm-on .setv-row__ic.k-tea { color: #6FD3DE; background: rgba(21,154,168,.18); }
html[data-theme="dark"].dm-on .setv-row__ic.k-gry { color: #9AA3BE; background: rgba(255,255,255,.07); }

html.dm-on .setv-row__b { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.dm-on .setv-row__lb {
  font: 650 14.5px/1.2 var(--font); letter-spacing: -.01em; color: var(--m-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.dm-on .setv-row__sub {
  font: 500 10.5px/1.2 var(--font); color: var(--m-ink-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.dm-on .setv-row__val {
  font: 600 11.5px/1 var(--font-ledger); color: var(--m-ink-4); letter-spacing: -.01em; white-space: nowrap;
}
html.dm-on .setv-row__chev { font-size: 12px; color: var(--m-ink-4); }
html.dm-on .setv-row:active, html.dm-on .setv-hero:active { background-color: rgba(17,22,50,.035); }
html[data-theme="dark"].dm-on .setv-row:active { background-color: rgba(255,255,255,.05); }

html.dm-on .setv-foot {
  margin: 4px 0 0; text-align: center; font: 500 10.5px/1 var(--font); color: var(--m-ink-4);
}


/* ==================================================================================
 *  v3.9.8 — SETTINGS DETAIL PAGES → NATIVE iOS 2026  (batch 1 of 4: shell + Company)
 *
 *  The master list was redone in v3.9.5; the NINE pushed detail pages still wore the
 *  old `ios-card` / floating-label markup. This block gives the pushed page a real
 *  iOS shell — large title in the body, a nav title that only fades in once you
 *  scroll, indigo back link — plus the grouped-inset-list language (label left,
 *  value right, section footers carrying the explanatory copy) and a save dock that
 *  is HIDDEN until something is actually dirty.
 *
 *  Scope: `.stx-page.sx` (the shell, applied to all nine pages) and `.sx-*` (the new
 *  row/group primitives, used by Company in this batch and by the remaining pages as
 *  they are converted). The master list is untouched.
 *
 *  ALSO FIXES THE SCROLL BUG. `.stx-page` is a fixed overlay, but unlike all nine
 *  bottom sheets it never registered an `html.*-open` scroll-lock class (README §4.4),
 *  so the page BEHIND it stayed scrollable — on iOS the drag was handed to the
 *  document instead of `.stx-body` and the settings page felt stuck. `stx-open` is
 *  now registered here, and `.stx-body` gets the `touch-action`/`overscroll-behavior`
 *  containment every other scroller in the app already had. settings.js saves and
 *  restores the root scroll position around the lock so closing a page doesn't jump
 *  the master list back to the top.
 * ================================================================================== */

/* ---- scroll lock ----------------------------------------------------------------
   MEASURED, not assumed. The sheets' rule (~5529) puts `overflow:hidden` on
   `.app-main` / `.view-root`, and ON THIS LAYOUT that alone does NOT stop the
   document scrolling: `.app-shell` has `min-height:100vh` (not a definite height),
   so its `1fr` row still sizes to its content. Measured in Chromium at 393x852
   against THIS stylesheet, 2400px of content: sheets-rule-only leaves
   documentElement.scrollHeight at 2400; adding the shell cap below takes it to 852
   and clamps the scroll. (Measure with the real stylesheet actually loaded — a
   first pass at this test loaded none and was therefore meaningless.) The clamp to
   scrollTop 0 is why settings.js saves and restores the position.                  */
html.stx-open .app-shell {
  height: 100vh; height: 100dvh; overflow: hidden !important;
}
html.stx-open .app-main,
html.stx-open .view-root,
html.stx-open .dm { overflow: hidden !important; }

/* ---- the pushed page's own scroller, hardened ---- */
html.dm-on .stx-page .stx-body {
  touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}

/* ---------- page + nav ---------- */
html.dm-on .stx-page.sx { background: var(--m-bg); }

html.dm-on .sx .stx-nav {
  position: relative; z-index: 4; border-bottom: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 6px) 8px 6px calc(env(safe-area-inset-left, 0px) + 4px);
  background: transparent; transition: background .22s ease, box-shadow .22s ease;
}
html.dm-on .sx.is-scrolled .stx-nav {
  background: var(--m-glass);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 1px 0 rgba(17,22,50,.07);
}
html[data-theme="dark"].dm-on .sx.is-scrolled .stx-nav { box-shadow: 0 1px 0 rgba(255,255,255,.08); }

html.dm-on .sx .stx-back {
  color: #3D4FE0; font: 500 16.5px/1 var(--font); letter-spacing: -.015em; gap: 0; padding: 6px 4px;
}
html[data-theme="dark"].dm-on .sx .stx-back { color: #93A2FF; }
html.dm-on .sx .stx-back i { font-size: 20px; margin-right: -1px; }

/* the centred nav title only appears once the big title has scrolled away */
html.dm-on .sx .stx-ptitle {
  font: 700 16px/1.2 var(--font-display); letter-spacing: -.015em;
  opacity: 0; transform: translateY(5px); transition: opacity .2s ease, transform .2s ease;
}
html.dm-on .sx.is-scrolled .stx-ptitle { opacity: 1; transform: none; }
html.dm-on .sx .stx-nav__sp { flex: 0 0 76px; }

/* ---------- body + large title ---------- */
html.dm-on .sx .stx-body { padding: 0 var(--m-gutter) 160px; }
html.dm-on .sx .sx-lt { padding: 2px 2px 14px; }
html.dm-on .sx .sx-lt h1 {
  margin: 0; font: 800 32px/1.02 var(--font-display); letter-spacing: -.035em; color: var(--m-ink);
}

/* ---------- identity card (Company) ---------- */
.sx-id {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px;
  padding: 13px; margin-bottom: 22px; border-radius: 22px;
  border: 1px solid rgba(17,22,50,.06);
  background:
    radial-gradient(120% 90% at 88% -20%, rgba(108,124,255,.13), transparent 62%),
    linear-gradient(180deg, #FFFFFF, #FBFCFF);
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 16px 34px -24px rgba(28,40,100,.45);
}
html[data-theme="dark"] .sx-id {
  border-color: rgba(255,255,255,.09);
  background:
    radial-gradient(120% 90% at 88% -20%, rgba(132,150,255,.16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
  box-shadow: 0 20px 38px -26px rgba(0,0,0,.85);
}
.sx-id__logo {
  width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(150deg, #6C7CFF, #3D4FE0); color: #fff; flex: 0 0 auto;
  font: 800 19px/1 var(--font-display); letter-spacing: .01em;
  box-shadow: 0 6px 14px -6px rgba(61,79,224,.65), inset 0 1px 0 rgba(255,255,255,.3);
}
.sx-id__logo.has-img { background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.08), inset 0 0 0 1px rgba(17,22,50,.07); }
.sx-id__logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.sx-id__b { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sx-id__nm {
  font: 750 16.5px/1.15 var(--font-display); letter-spacing: -.02em; color: var(--m-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sx-id__sub {
  font: 500 11.5px/1.25 var(--font); color: var(--m-ink-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sx-id__acts { display: flex; flex-direction: column; align-items: stretch; gap: 5px; flex: 0 0 auto; }
.sx-id__act {
  border: 0; cursor: pointer; margin: 0; text-align: center;
  font: 650 12.5px/1 var(--font); letter-spacing: -.01em; color: #3D4FE0;
  padding: 9px 13px; border-radius: 12px; background: rgba(108,124,255,.12);
}
html[data-theme="dark"] .sx-id__act { color: #A9B6FF; background: rgba(129,144,255,.18); }
.sx-id__act:active { transform: scale(.96); }
.sx-id__rm {
  border: 0; background: none; cursor: pointer; padding: 2px 4px;
  font: 600 11px/1 var(--font); color: var(--m-coral);
}

/* ---------- section header / footer ---------- */
.sx-hd {
  margin: 0; padding: 0 6px 8px;
  font: 700 8.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--m-ink-4);
}
.sx-ft {
  margin: 0; padding: 9px 8px 0;
  font: 500 11.5px/1.45 var(--font); color: var(--m-ink-4);
}
.sx-ft + .sx-hd,
.sx-grp + .sx-hd { padding-top: 22px; }

/* ---------- grouped inset list ---------- */
.sx-grp {
  border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(17,22,50,.06);
  background: linear-gradient(180deg, #FFFFFF, #FCFDFF);
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 14px 30px -22px rgba(28,40,100,.40);
}
html[data-theme="dark"] .sx-grp {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 18px 34px -24px rgba(0,0,0,.85);
}
.sx-row {
  position: relative; display: grid; grid-template-columns: minmax(96px, auto) 1fr; align-items: center;
  gap: 10px; padding: 0 14px; min-height: 50px;
}
.sx-row + .sx-row::before {
  content: ''; position: absolute; left: 14px; right: 0; top: 0; height: 1px; background: rgba(17,22,50,.06);
}
html[data-theme="dark"] .sx-row + .sx-row::before { background: rgba(255,255,255,.07); }
.sx-row__lb {
  font: 600 14.5px/1.2 var(--font); letter-spacing: -.012em; color: var(--m-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sx-inp {
  width: 100%; min-width: 0; border: 0; background: none; outline: none; padding: 13px 0;
  font: 500 14.5px/1.25 var(--font); letter-spacing: -.01em; color: var(--m-ink-2); text-align: right;
}
.sx-inp::placeholder { color: var(--m-ink-4); opacity: .75; }
.sx-inp:focus { color: var(--m-ink); }
.sx-row:focus-within { background: rgba(108,124,255,.05); }
html[data-theme="dark"] .sx-row:focus-within { background: rgba(129,144,255,.09); }
/* a long value (the street line) stacks under a small label instead of ellipsising */
.sx-row--stack { grid-template-columns: 1fr; gap: 0; padding-top: 10px; padding-bottom: 12px; }
.sx-row--stack .sx-row__lb {
  font: 600 11.5px/1 var(--font); letter-spacing: -.005em; color: var(--m-ink-4); padding-top: 2px;
}
.sx-row--stack .sx-inp { text-align: left; padding: 4px 0 0; color: var(--m-ink); }

/* ---------- save dock: hidden until dirty ---------- */
html.dm-on .sx .set-savebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; border: 0; margin: 0;
  padding: 26px var(--m-gutter) calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(255,255,255,0), var(--m-bg) 30%);
  transform: translateY(120%); opacity: 0; pointer-events: none;
  transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
html[data-theme="dark"].dm-on .sx .set-savebar { background: linear-gradient(180deg, rgba(0,0,0,0), var(--m-bg) 30%); }
html.dm-on .sx .set-savebar.is-dirty { transform: none; opacity: 1; pointer-events: auto; }
html.dm-on .sx .set-savebar #set-save:disabled { opacity: 1; }
html.dm-on .sx .set-savebar__inner {
  display: flex; align-items: center; gap: 10px; padding: 9px 9px 9px 15px; border-radius: 20px;
  border: 1px solid rgba(17,22,50,.07);
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.93));
  -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 22px 44px -20px rgba(28,40,100,.42);
}
html[data-theme="dark"].dm-on .sx .set-savebar__inner {
  border-color: rgba(255,255,255,.11);
  background: linear-gradient(180deg, rgba(32,36,47,.96), rgba(24,27,36,.94));
  box-shadow: 0 20px 44px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08);
}
html.dm-on .sx .set-savebar__label {
  flex: 1; min-width: 0; font: 600 12.5px/1.2 var(--font); color: var(--m-ink-2);
}
/* the v3.4.4 "liquid" block styles .btn-ios-secondary with !important — match it to win */
html.dm-on .sx .set-savebar .btn-ios-secondary {
  background: none !important; border: 0 !important; box-shadow: none !important;
  color: var(--m-ink-3) !important; padding: 9px 10px; border-radius: 12px;
  font: 600 13.5px/1 var(--font);
}
html.dm-on .sx .set-savebar .btn-ios-primary {
  border: 0; border-radius: 14px; padding: 12px 20px; color: #fff;
  font: 700 13.5px/1 var(--font); letter-spacing: -.01em;
}

@media (prefers-reduced-motion: reduce) {
  html.dm-on .sx .stx-nav, html.dm-on .sx .stx-ptitle, html.dm-on .sx .set-savebar { transition: none; }
}

/* ==================================================================================
 *  v3.9.9 — SETTINGS BATCH 2: Payment & banking · Regional · Reminders
 *  New row primitives on top of the v3.9.8 .sx-* language: select rows, unit-suffixed
 *  number rows, toggle rows, stacked note rows, plus two readers:
 *  a live Regional format preview and a Reminders cadence timeline.
 * ================================================================================== */

/* ---- mono values (account numbers, sort codes, IBAN) ---- */
.sx-inp--mono {
  font: 500 14px/1.25 var(--font-ledger); letter-spacing: .01em;
}

/* ---- number row with a unit suffix ---- */
.sx-row__v { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.sx-row__v .sx-inp { width: auto; max-width: 100%; flex: 0 1 auto; padding-right: 0; }
.sx-row__v { gap: 5px; }
.sx-unit {
  font: 500 13px/1 var(--font); color: var(--m-ink-4); flex: 0 0 auto; white-space: nowrap;
}

/* ---- select row: native <select>, iOS chevron, value in ink ---- */
.sx-selw { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.sx-sel {
  -webkit-appearance: none; appearance: none; border: 0; background: none; outline: none;
  padding: 13px 2px 13px 0; max-width: 100%; text-align: right; direction: rtl;
  font: 500 14.5px/1.25 var(--font); letter-spacing: -.01em; color: var(--m-ink-2); cursor: pointer;
  text-overflow: ellipsis;
}
.sx-sel option { direction: ltr; }
.sx-selw::after {
  content: '\F282'; font-family: 'bootstrap-icons'; font-size: 10px; color: var(--m-ink-4);
  flex: 0 0 auto; pointer-events: none;
}

/* ---- toggle row ---- */
.sx-row--tog {
  grid-template-columns: 1fr auto; align-items: center; gap: 14px;
  padding-top: 12px; padding-bottom: 12px; min-height: 56px;
}
.sx-tog__b { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sx-tog__lb { font: 600 14.5px/1.25 var(--font); letter-spacing: -.012em; color: var(--m-ink); }
.sx-tog__sub { font: 500 11.5px/1.4 var(--font); color: var(--m-ink-4); }
.sx-row--tog .ios-switch { flex: 0 0 auto; }
/* the global switch is GREEN (money colour). On these screens a switch is an
   interactive control, so it follows the indigo action system (§4.7). */
.sx-row--tog .ios-switch input:checked + .ios-switch__slider {
  background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 6px 14px -8px rgba(61,79,224,.9);
}

/* ---- stacked note (multi-line policy text) ---- */
.sx-note { padding: 11px 14px 13px; }
.sx-note__lb {
  display: block; font: 600 11.5px/1 var(--font); color: var(--m-ink-4); margin-bottom: 5px;
}
.sx-note textarea {
  width: 100%; border: 0; background: none; outline: none; resize: none; padding: 0;
  font: 500 14.5px/1.5 var(--font); letter-spacing: -.01em; color: var(--m-ink);
}
.sx-note textarea::placeholder { color: var(--m-ink-4); opacity: .75; }

/* ---- Regional: live format preview ---- */
.sx-prev {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 16px; margin-bottom: 22px; border-radius: 20px;
  border: 1px solid rgba(17,22,50,.06);
  background:
    radial-gradient(120% 90% at 88% -20%, rgba(108,124,255,.13), transparent 62%),
    linear-gradient(180deg, #FFFFFF, #FBFCFF);
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 16px 34px -24px rgba(28,40,100,.45);
}
html[data-theme="dark"] .sx-prev {
  border-color: rgba(255,255,255,.09);
  background:
    radial-gradient(120% 90% at 88% -20%, rgba(132,150,255,.16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
  box-shadow: 0 20px 38px -26px rgba(0,0,0,.85);
}
.sx-prev__c { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sx-prev__k {
  font: 700 8.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--m-ink-4);
}
.sx-prev__amt {
  font: 800 24px/1 var(--font-display); letter-spacing: -.03em; color: var(--m-ink);
  font-variant-numeric: tabular-nums;
}
.sx-prev__date {
  text-align: right; font: 600 13px/1.3 var(--font-ledger); color: var(--m-ink-2); white-space: nowrap;
}
.sx-prev__tz { display: block; font: 500 10.5px/1.3 var(--font); color: var(--m-ink-4); }

/* ---- Reminders: the cadence timeline ---- */
.sx-cad {
  padding: 13px 14px 12px; display: flex; flex-direction: column; gap: 9px;
}
.sx-cad__row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sx-cad__pip {
  font: 650 11px/1 var(--font); letter-spacing: -.005em; padding: 6px 9px; border-radius: 9px;
  color: var(--m-ink-2); background: rgba(17,22,50,.05); white-space: nowrap;
}
html[data-theme="dark"] .sx-cad__pip { color: var(--m-ink-2); background: rgba(255,255,255,.07); }
.sx-cad__pip--due {
  color: #fff; background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 6px 12px -7px rgba(61,79,224,.85);
}
/* the dark base-pip rule outranks the plain `--due` one, so it needs its own override */
html[data-theme="dark"] .sx-cad__pip--due {
  color: #fff; background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
}
.sx-cad__pip--late { color: #B26A00; background: rgba(240,160,42,.16); }
html[data-theme="dark"] .sx-cad__pip--late { color: #F5C46B; background: rgba(240,160,42,.18); }
.sx-cad__pip--tail { color: #C5271E; background: rgba(217,58,47,.11); }
html[data-theme="dark"] .sx-cad__pip--tail { color: #FF8A82; background: rgba(255,107,99,.16); }
.sx-cad__arw { font-size: 9px; color: var(--m-ink-4); flex: 0 0 auto; }
.sx-cad__cap {
  margin: 0;   /* bootstrap gives <p> a 1rem bottom margin — it padded the card out */
  font: 500 11px/1.4 var(--font); color: var(--m-ink-4);
}

/* the first section header sits closer to the large title than a mid-page one */
html.dm-on .sx .sx-lt + .sx-hd { padding-top: 4px; }


/* ==================================================================================
 *  v3.10.0 — SETTINGS BATCH 3 / part 1: Invoice template
 *  Preview hero (the PDF, at the TOP), preset gallery, layout, colour, typeface.
 * ================================================================================== */

/* ---- live preview hero ------------------------------------------------------- */
.sx-pv {
  position: relative; display: block; width: 100%; padding: 0; margin: 0 0 22px;
  border: 1px solid rgba(17,22,50,.08); border-radius: 22px; overflow: hidden; cursor: pointer;
  background: #fff; text-align: left;
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 22px 44px -26px rgba(28,40,100,.55);
}
html[data-theme="dark"] .sx-pv {
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 24px 46px -26px rgba(0,0,0,.9);
}
.sx-pv__paper {
  position: relative; height: 232px; overflow: hidden; background: #fff;
}
/* the PDF iframe fills the card and never eats the tap — the whole card opens it */
.sx-pv__paper > div,
.sx-pv__paper iframe,
.sx-pv__paper img {
  position: absolute; inset: 0; width: 100%; height: auto; min-height: 0 !important;
  border: 0; display: block; pointer-events: none;
}
.sx-pv__paper img { object-fit: cover; object-position: top center; height: 100%; }
/* a soft fade at the foot so the crop reads as "there is more", not as a cut */
.sx-pv__fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 78px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.96) 78%);
}
.sx-pv__bar {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 13px 12px; border-top: 1px solid rgba(17,22,50,.06);
  background: linear-gradient(180deg, #FFFFFF, #FBFCFF);
}
/* The hero is a WHITE DOCUMENT in both themes — invoice PDFs are always light, and a
   dark chrome strip under a white page reads as two objects instead of one. So the bar
   keeps its light material and its own ink in dark mode. */
html[data-theme="dark"] .sx-pv__bar {
  border-top-color: rgba(17,22,50,.07);
  background: linear-gradient(180deg, #FFFFFF, #F6F8FE);
}
html[data-theme="dark"] .sx-pv__k { color: #6B7390; }
html[data-theme="dark"] .sx-pv__go { color: #3D4FE0; background: rgba(108,124,255,.12); }
.sx-pv__k {
  display: flex; align-items: center; gap: 7px;
  font: 700 8.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--m-ink-4);
}
.sx-pv__dot {
  width: 6px; height: 6px; border-radius: 50%; background: #12A06E; flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(18,160,110,.16);
}
.sx-pv__go {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  font: 650 12.5px/1 var(--font); letter-spacing: -.01em; color: #3D4FE0;
  padding: 8px 12px; border-radius: 12px; background: rgba(108,124,255,.12);
}
html[data-theme="dark"] .sx-pv__go { color: #A9B6FF; background: rgba(129,144,255,.18); }
.sx-pv:active { transform: scale(.995); }

/* ---- horizontal card rail (presets) ------------------------------------------- */
.sx-rail {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x;
  scrollbar-width: none; padding: 2px var(--m-gutter) 4px;
  margin: 0 calc(-1 * var(--m-gutter));
}
.sx-rail::-webkit-scrollbar { display: none; }
.sx-rail .preset-card {
  flex: 0 0 auto; width: 96px; scroll-snap-align: start; cursor: pointer; text-align: left;
  padding: 8px; border-radius: 16px; border: 1px solid rgba(17,22,50,.07);
  background: linear-gradient(180deg, #FFFFFF, #FCFDFF); transition: none;
  box-shadow: 0 1px 2px rgba(16,24,40,.05);
}
html[data-theme="dark"] .sx-rail .preset-card {
  border-color: rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
}
.sx-rail .preset-card.is-active {
  border-color: #6C7CFF; box-shadow: 0 0 0 2.5px rgba(108,124,255,.22), 0 10px 22px -14px rgba(61,79,224,.7);
}
.sx-rail .preset-thumb {
  height: 58px; padding: 7px; border-radius: 10px; background: #fff;
  border: 1px solid rgba(17,22,50,.08); box-shadow: none; overflow: hidden;
}
.sx-rail .preset-thumb__band { height: 11px; border-radius: 3px; margin: -7px -7px 7px; }
.sx-rail .preset-thumb__row { height: 4px; margin-bottom: 4px; }
.sx-rail .preset-thumb__total { height: 6px; margin-top: 6px; }
.sx-rail .preset-card__name {
  margin-top: 7px; font: 650 11.5px/1.15 var(--font); letter-spacing: -.01em; color: var(--m-ink);
}
.sx-rail .preset-card__sub { font: 500 10px/1.2 var(--font); color: var(--m-ink-4); }

/* ---- two-up tiles (layout, typeface) ------------------------------------------ */
.sx-tiles { display: grid; gap: 10px; }
.sx-tiles--2 { grid-template-columns: 1fr 1fr; }
.sx-tiles--3 { grid-template-columns: 1fr 1fr 1fr; }
.sx-tile {
  cursor: pointer; text-align: left; padding: 10px; border-radius: 18px;
  border: 1px solid rgba(17,22,50,.07);
  background: linear-gradient(180deg, #FFFFFF, #FCFDFF);
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 12px 26px -22px rgba(28,40,100,.4);
}
html[data-theme="dark"] .sx-tile {
  border-color: rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
  box-shadow: 0 16px 30px -24px rgba(0,0,0,.85);
}
.sx-tile.is-on {
  border-color: #6C7CFF; box-shadow: 0 0 0 2.5px rgba(108,124,255,.22), 0 12px 26px -18px rgba(61,79,224,.6);
}
.sx-tile__nm {
  display: block; font: 650 13px/1.2 var(--font); letter-spacing: -.012em; color: var(--m-ink); margin-top: 8px;
}
.sx-tile__ds { display: block; font: 500 10.5px/1.3 var(--font); color: var(--m-ink-4); margin-top: 1px; }
.sx-tile__mini {
  display: block; height: 64px; border-radius: 11px; background: #fff; overflow: hidden;
  border: 1px solid rgba(17,22,50,.08); padding: 8px;
}
.sx-tile__band { display: block; height: 13px; border-radius: 3px; background: var(--acc, #3D4FE0); margin: -8px -8px 8px; }
.sx-tile__mini--editorial .sx-tile__band { height: 3px; width: 26px; margin: 2px 0 10px; border-radius: 2px; }
.sx-tile__l { display: block; height: 4px; border-radius: 2px; background: #E4E8F2; margin-bottom: 5px; }
.sx-tile__l--w { width: 62%; }
.sx-tile__l--s { width: 38%; }
.sx-tile__aa {
  display: block; height: 64px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(17,22,50,.035); font-size: 27px; line-height: 1; color: var(--m-ink);
}
html[data-theme="dark"] .sx-tile__aa { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .sx-tile__mini { background: #F7F8FC; }

/* ---- accent swatch strip ------------------------------------------------------ */
.sx-sw {
  display: flex; gap: 9px; align-items: center; overflow-x: auto; scrollbar-width: none;
  touch-action: pan-x; overscroll-behavior-x: contain;
  padding: 12px var(--m-gutter); margin: 0 calc(-1 * var(--m-gutter));
}
.sx-sw::-webkit-scrollbar { display: none; }
.sx-sw .acc-swatch {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(17,22,50,.12); transition: transform .14s ease;
}
.sx-sw .acc-swatch.is-active {
  box-shadow: 0 0 0 2px var(--m-bg), 0 0 0 4.5px #6C7CFF; transform: scale(1.04);
}
.sx-sw .acc-custom {
  position: relative; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; overflow: hidden; margin: 0;
  color: var(--m-ink-3); font-size: 13px; border: 1px dashed rgba(17,22,50,.28); background: none;
}
html[data-theme="dark"] .sx-sw .acc-custom { border-color: rgba(255,255,255,.28); }
.sx-sw .acc-custom input[type=color] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ---- colour rows (header / footer) -------------------------------------------- */
.sx-row--clr { grid-template-columns: minmax(96px, auto) 1fr; }
.sx-clr { display: flex; align-items: center; justify-content: flex-end; gap: 9px; min-width: 0; }
.sx-clr__hex {
  font: 600 12px/1 var(--font-ledger); color: var(--m-ink-3); letter-spacing: .02em;
}
.sx-clr__chip {
  position: relative; width: 28px; height: 28px; border-radius: 9px; flex: 0 0 auto; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(17,22,50,.14); cursor: pointer;
}
.sx-clr__chip input[type=color] { position: absolute; inset: -6px; opacity: 0; cursor: pointer; }
.clr-reset {
  border: 0; background: none; cursor: pointer; padding: 0 0 0 2px;
  font: 600 11.5px/1 var(--font); color: #3D4FE0; flex: 0 0 auto;
}
html[data-theme="dark"] .clr-reset { color: #93A2FF; }

/* a small spacer between two note cards in the same section */
.sx-gap { height: 10px; }
/* preview status dot states */
.sx-pv__dot--busy { background: #B26A00; box-shadow: 0 0 0 3px rgba(240,160,42,.18); }
.sx-pv__dot--off  { background: #98A1B8; box-shadow: 0 0 0 3px rgba(152,161,184,.18); }

/* section spacing after the new block types (the v3.9.8 rule only covered .sx-grp/.sx-ft) */
.sx-rail + .sx-hd,
.sx-tiles + .sx-hd,
.sx-sw + .sx-hd,
.sx-pv + .sx-hd { padding-top: 22px; }
.sx-rail + .sx-ft,
.sx-tiles + .sx-ft { padding-top: 10px; }
.sx-sw + .sx-grp { margin-top: 2px; }

/* ==================================================================================
 *  v3.10.0 — BATCH 3 / part 2: payment heading, notes, terms,
 *  signature, show on invoice.
 * ================================================================================== */

/* ---- payment heading: a live banner + wrapping chips ---- */
.sx-ph { padding: 13px 14px 14px; }
.sx-ph__bar {
  display: block; border-radius: 9px; padding: 8px 11px; margin-bottom: 12px;
  background: var(--acc, #2563EB); color: #fff;
  font: 800 10px/1.2 var(--font); letter-spacing: .12em;
}
.sx-ph__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.sx-ph__chips .ph-chip {
  border: 1px solid rgba(17,22,50,.10); background: none; cursor: pointer;
  border-radius: 11px; padding: 8px 11px;
  font: 650 10.5px/1 var(--font); letter-spacing: .05em; color: var(--m-ink-2);
  transition: none;
}
html[data-theme="dark"] .sx-ph__chips .ph-chip { border-color: rgba(255,255,255,.12); color: var(--m-ink-2); }
.sx-ph__chips .ph-chip.is-on {
  color: #fff; border-color: transparent;
  background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 6px 13px -8px rgba(61,79,224,.9);
}

/* ---- iOS segmented control (signature mode) ---- */
.sx-seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px;
  border-radius: 13px; background: rgba(17,22,50,.055); margin-bottom: 14px;
}
html[data-theme="dark"] .sx-seg { background: rgba(255,255,255,.07); }
.sx-seg__i {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; background: none; cursor: pointer; padding: 9px 8px; border-radius: 10px;
  font: 650 13px/1 var(--font); letter-spacing: -.01em; color: var(--m-ink-3);
}
.sx-seg__i.on {
  color: var(--m-ink); background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(16,24,40,.14), 0 3px 8px -4px rgba(16,24,40,.2);
}
html[data-theme="dark"] .sx-seg__i.on { color: #fff; background: rgba(255,255,255,.16); box-shadow: none; }

/* ---- signature ink stage ---- */
.sx-sig { padding: 14px; }
.sx-sig__paper {
  position: relative; border-radius: 15px; overflow: hidden; padding: 22px 18px 14px;
  background: linear-gradient(180deg, #FEFEFC, #FAFAF5);
  border: 1px solid rgba(17,22,50,.08);
}
html[data-theme="dark"] .sx-sig__paper { border-color: rgba(255,255,255,.1); }
.sx-sig__ink {
  font-size: 40px; line-height: 1.05; color: #1a2c66; transform: rotate(-3deg);
  padding-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: clip;
  filter: drop-shadow(0 1px 0 rgba(26,44,102,.14));
}
.sx-sig__line { margin-top: 9px; border-bottom: 1.5px solid #CFD3DD; }
.sx-sig__cap { margin-top: 8px; font: 500 10.5px/1.4 var(--font); color: #6B7390; }
.sx-sig__cap b { display: block; font: 700 12.5px/1.2 var(--font); color: #101632; }
/* the signature block is a piece of the printed page — it stays light in dark mode */
html[data-theme="dark"] .sx-sig__paper {
  background: linear-gradient(180deg, #FEFEFC, #F4F4EE);
}
.sx-sig__rail {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  touch-action: pan-x; overscroll-behavior-x: contain; padding: 12px 14px 2px; margin: 0 -14px;
}
.sx-sig__rail::-webkit-scrollbar { display: none; }
.sx-sig__rail .sig-tile {
  flex: 0 0 auto; width: 92px; cursor: pointer; text-align: center; padding: 9px 6px 7px;
  border-radius: 14px; border: 1px solid rgba(17,22,50,.08); background: #FFFFFF; transition: none;
  box-shadow: 0 1px 2px rgba(16,24,40,.05);
}
html[data-theme="dark"] .sx-sig__rail .sig-tile { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }
.sx-sig__rail .sig-tile.on {
  border-color: #6C7CFF; box-shadow: 0 0 0 2.5px rgba(108,124,255,.22);
}
.sx-sig__rail .sig-tile__ink {
  font-size: 21px; line-height: 1.15; color: #1a2c66; min-height: 30px;
  display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap;
}
html[data-theme="dark"] .sx-sig__rail .sig-tile__ink { color: #A9B6FF; }
.sx-sig__rail .sig-tile__name {
  font: 500 10px/1 var(--font); color: var(--m-ink-4); margin-top: 5px;
}
/* upload variant */
.sx-sig__up { display: flex; align-items: center; gap: 13px; }
.sx-sig__thumb {
  flex: 0 0 auto; width: 108px; height: 58px; border-radius: 13px; display: grid; place-items: center;
  background: #fff; border: 1px dashed rgba(17,22,50,.22); color: var(--m-ink-4); font-size: 18px; overflow: hidden;
}
.sx-sig__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }


/* ==================================================================================
 *  v3.10.1 — BATCH 4: Appearance · Exports · Backup · About
 * ================================================================================== */

/* ---- theme tiles ---- */
.sx-tiles .thm-card {
  cursor: pointer; text-align: left; padding: 9px; border-radius: 18px; transition: none;
  border: 1px solid rgba(17,22,50,.07);
  background: linear-gradient(180deg, #FFFFFF, #FCFDFF);
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 12px 26px -22px rgba(28,40,100,.4);
}
html[data-theme="dark"] .sx-tiles .thm-card {
  border-color: rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
}
.sx-tiles .thm-card.is-active {
  border-color: #6C7CFF; box-shadow: 0 0 0 2.5px rgba(108,124,255,.22), 0 12px 26px -18px rgba(61,79,224,.6);
}
.sx-tiles .thm-mock {
  height: 70px; border-radius: 11px; border: 1px solid rgba(17,22,50,.08); overflow: hidden; position: relative;
}
.sx-tiles .thm-mock--light { background: #FFFFFF; }
.sx-tiles .thm-mock--dark { background: #0B0E18; }
.sx-tiles .thm-mock--system { background: linear-gradient(110deg, #FFFFFF 0 50%, #0B0E18 50% 100%); }
.sx-tiles .thm-mock__bar { position: absolute; top: 0; left: 0; right: 0; height: 13px; background: rgba(125,132,155,.30); }
.sx-tiles .thm-mock__side { position: absolute; top: 13px; left: 0; bottom: 0; width: 30%; background: rgba(125,132,155,.20); }
.sx-tiles .thm-mock__body { position: absolute; top: 21px; left: 34%; right: 7px; display: flex; flex-direction: column; gap: 5px; }
.sx-tiles .thm-mock__body i { display: block; height: 6px; border-radius: 3px; background: rgba(125,132,155,.42); }
.sx-tiles .thm-mock__body i.s { width: 58%; }
.sx-tiles .thm-card__row { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
.sx-tiles .thm-card__row > i { font-size: 12px; color: var(--m-ink-3); }
.sx-tiles .thm-card__name { font: 650 12.5px/1.2 var(--font); letter-spacing: -.012em; color: var(--m-ink); }
.sx-tiles .thm-card__tick { margin-left: auto; color: #3D4FE0; font-size: 12px; opacity: 0; }
.sx-tiles .thm-card.is-active .thm-card__tick { opacity: 1; }
.sx-tiles .thm-card__desc { display: block; font: 500 10.5px/1.3 var(--font); color: var(--m-ink-4); margin-top: 2px; }

/* ---- pick row: a group where one row carries the tick (iOS single-select) ---- */
.sx-row--pick { grid-template-columns: 1fr auto; align-items: center; gap: 12px; cursor: pointer;
  padding-top: 12px; padding-bottom: 12px; min-height: 58px; text-align: left; width: 100%;
  background: none; border: 0; }
.sx-pick__b { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sx-pick__t { font: 600 14.5px/1.25 var(--font); letter-spacing: -.012em; color: var(--m-ink); }
.sx-pick__s { font: 500 11.5px/1.4 var(--font); color: var(--m-ink-4); }
.sx-pick__tick { flex: 0 0 auto; font-size: 15px; color: #3D4FE0; opacity: 0; }
html[data-theme="dark"] .sx-pick__tick { color: #93A2FF; }
.sx-row--pick.is-on .sx-pick__tick { opacity: 1; }

/* ---- action row: a tappable row whose label is the action ---- */
.sx-act {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 0 14px; min-height: 54px; margin: 0;
}
.sx-act + .sx-act::before, .sx-row + .sx-act::before, .sx-act + .sx-row::before {
  content: ''; position: absolute; left: 14px; right: 0; top: 0; height: 1px; background: rgba(17,22,50,.06);
}
html[data-theme="dark"] .sx-act + .sx-act::before,
html[data-theme="dark"] .sx-row + .sx-act::before,
html[data-theme="dark"] .sx-act + .sx-row::before { background: rgba(255,255,255,.07); }
.sx-act__ic {
  width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto;
  font-size: 14px; color: #3D4FE0; background: rgba(108,124,255,.12);
}
html[data-theme="dark"] .sx-act__ic { color: #A9B6FF; background: rgba(129,144,255,.18); }
.sx-act__ic--grn { color: #0F8A5F; background: rgba(15,138,95,.12); }
html[data-theme="dark"] .sx-act__ic--grn { color: #5FD9AC; background: rgba(59,215,158,.14); }
.sx-act__b { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sx-act__t { font: 650 14.5px/1.2 var(--font); letter-spacing: -.012em; color: #3D4FE0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-theme="dark"] .sx-act__t { color: #93A2FF; }
.sx-act__s { font: 500 11px/1.3 var(--font); color: var(--m-ink-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-act__go { font-size: 12px; color: var(--m-ink-4); flex: 0 0 auto; }

/* ---- count tiles ---- */
.sx-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sx-stat {
  padding: 13px 14px; border-radius: 18px; border: 1px solid rgba(17,22,50,.07);
  background: linear-gradient(180deg, #FFFFFF, #FCFDFF);
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 12px 26px -22px rgba(28,40,100,.4);
}
html[data-theme="dark"] .sx-stat {
  border-color: rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
}
.sx-stat__n {
  display: block; font: 800 24px/1 var(--font-display); letter-spacing: -.03em; color: var(--m-ink);
  font-variant-numeric: tabular-nums;
}
.sx-stat__l { display: block; font: 500 11px/1.2 var(--font); color: var(--m-ink-4); margin-top: 4px; }
.sx-stat .bk-dots { color: var(--m-ink-4); letter-spacing: .1em; font-size: 18px; }

/* ---- fact row (label + explanation, no control) ---- */
.sx-fact {
  position: relative; display: block; padding: 12px 14px;
}
.sx-fact + .sx-fact::before {
  content: ''; position: absolute; left: 14px; right: 0; top: 0; height: 1px; background: rgba(17,22,50,.06);
}
html[data-theme="dark"] .sx-fact + .sx-fact::before { background: rgba(255,255,255,.07); }
.sx-fact b { display: block; font: 650 13.5px/1.25 var(--font); letter-spacing: -.012em; color: var(--m-ink); }
.sx-fact span { display: block; font: 500 11.5px/1.45 var(--font); color: var(--m-ink-4); margin-top: 2px; }

/* status line under an action group */
.sx-status { margin: 9px 8px 0; font: 600 11.5px/1.4 var(--font); color: var(--m-ink-3); }
.sx-status:empty { margin: 0; }

/* ==================================================================================
 *  ABOUT — not rewritten. aboutTab() is already a native grouped-list screen with its
 *  own `.abt-*` language, tap-to-copy rows and the aurora hero, and rebuilding it onto
 *  `.sx-*` would risk all of that wiring for no visible gain. Instead its containers
 *  are brought onto the same card spec as the rest of Settings.
 * ================================================================================== */
.stx-body .abt-grid { column-count: 1; margin-top: 22px; }
.stx-body .abt-sec { margin: 0 0 22px; }
.stx-body .abt-hd {
  margin: 0 0 8px; padding: 0 6px;
  font: 700 8.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--m-ink-4);
}
.stx-body .abt-ft {
  margin: 9px 0 0; padding: 0 8px; font: 500 11.5px/1.45 var(--font); color: var(--m-ink-4);
}
.stx-body .abt-group {
  border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(17,22,50,.06);
  background: linear-gradient(180deg, #FFFFFF, #FCFDFF);
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 14px 30px -22px rgba(28,40,100,.40);
}
html[data-theme="dark"] .stx-body .abt-group {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 18px 34px -24px rgba(0,0,0,.85);
}
.stx-body .abt-row { min-height: 50px; padding: 11px 14px; }
.stx-body .abt-row + .abt-row::before { left: 14px; background: rgba(17,22,50,.06); }
html[data-theme="dark"] .stx-body .abt-row + .abt-row::before { background: rgba(255,255,255,.07); }
.stx-body .abt-k { font: 600 14.5px/1.2 var(--font); letter-spacing: -.012em; color: var(--m-ink); }
.stx-body .abt-v { font: 500 14px/1.2 var(--font); color: var(--m-ink-2); }
.stx-body .abt-row--act .abt-k { color: #3D4FE0; font-weight: 650; }
html[data-theme="dark"] .stx-body .abt-row--act .abt-k { color: #93A2FF; }
.stx-body .abt-hero { border-radius: 22px; }
.stx-body .abt-hero__in { padding: 34px 22px 30px; }
.stx-body .abt-foot { margin: 8px 0 0; font: 500 11px/1.6 var(--font); color: var(--m-ink-4); }

/* desktop reading-measure cap for the batch-4 blocks (matches the v3.10.0 bridge) */
@media (min-width: 768px) {
  #set-content .sx-stats,
  #set-content .sx-status,
  #set-content .abt-group,
  #set-content .abt-hd,
  #set-content .abt-ft,
  #set-content .abt-hero { max-width: 720px; }
}

/* ==================================================================================
 *  v3.10.1 — ABOUT without the aurora + a native SOFTWARE UPDATE flow
 * ================================================================================== */

/* ---- About hero: a light app card (the aurora slab is gone) ---- */
.abx-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 30px 20px 24px; margin-bottom: 22px; border-radius: 24px;
  border: 1px solid rgba(17,22,50,.06); background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 20px 42px -26px rgba(28,40,100,.5);
}
html[data-theme="dark"] .abx-hero {
  border-color: rgba(255,255,255,.09); color: #EEF2FF;
  background: radial-gradient(125% 130% at 50% 0%, #121A3C 0%, #080C1D 58%, #04060F 100%);
  box-shadow: 0 26px 50px -28px rgba(0,0,0,.92), inset 0 0 0 1px rgba(255,255,255,.06);
}
.abx-hero > * { position: relative; z-index: 1; }

/* ==================================================================================
 *  THE AURORA, ONE PER THEME.
 *  The old aurora was `mix-blend-mode: screen` over a near-black slab. Screen only ever
 *  LIGHTENS, so those same gradients over a white card do literally nothing — which is
 *  why the answer was never "tone it down", it was a second technique. Light mode uses
 *  MULTIPLY with pale tints, which only darkens, so the fields read as a soft coloured
 *  wash on white. Dark mode keeps SCREEN over the deep navy panel, where they glow.
 *  Both animate transform/opacity only — no layout, no paint, no blur() (a blurred
 *  layer is re-rasterised every frame and is the most expensive thing you can park
 *  behind a screen people leave open; radial gradients composite for free).
 * ================================================================================== */
.abx-aur {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  border-radius: inherit; contain: strict;
}
.abx-aur__b {
  position: absolute; display: block; height: 210%; aspect-ratio: 1; width: auto; border-radius: 50%;
  mix-blend-mode: multiply; will-change: transform; backface-visibility: hidden;
}
.abx-aur__b--1 { top: -76%; left: -22%;
  background: radial-gradient(circle at 50% 50%, rgba(129,140,248,.40) 0%, rgba(129,140,248,.16) 26%, transparent 58%);
  animation: abxA 23s ease-in-out infinite; }
.abx-aur__b--2 { top: -66%; right: 0; left: auto;
  background: radial-gradient(circle at 50% 50%, rgba(125,190,255,.30) 0%, rgba(125,190,255,.11) 25%, transparent 56%);
  animation: abxB 31s ease-in-out infinite; }
.abx-aur__b--3 { bottom: -78%; left: 8%; top: auto;
  background: radial-gradient(circle at 50% 50%, rgba(196,181,253,.42) 0%, rgba(196,181,253,.16) 26%, transparent 58%);
  animation: abxC 27s ease-in-out infinite; }
.abx-aur__b--4 { bottom: -70%; right: -20%; top: auto; left: auto;
  background: radial-gradient(circle at 50% 50%, rgba(244,186,214,.28) 0%, rgba(244,186,214,.10) 24%, transparent 55%);
  animation: abxD 37s ease-in-out infinite; }
html[data-theme="dark"] .abx-aur__b { mix-blend-mode: screen; }
html[data-theme="dark"] .abx-aur__b--1 {
  background: radial-gradient(circle at 50% 50%, rgba(99,102,241,.52) 0%, rgba(79,70,229,.20) 24%, transparent 58%); }
html[data-theme="dark"] .abx-aur__b--2 {
  background: radial-gradient(circle at 50% 50%, rgba(34,211,238,.40) 0%, rgba(6,182,212,.15) 23%, transparent 56%); }
html[data-theme="dark"] .abx-aur__b--3 {
  background: radial-gradient(circle at 50% 50%, rgba(192,132,252,.46) 0%, rgba(168,85,247,.17) 24%, transparent 58%); }
html[data-theme="dark"] .abx-aur__b--4 {
  background: radial-gradient(circle at 50% 50%, rgba(244,114,182,.36) 0%, rgba(236,72,153,.13) 22%, transparent 54%); }
@keyframes abxA { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(16%,20%,0) scale(1.22); } }
@keyframes abxB { 0%,100% { transform: translate3d(0,0,0) scale(1.08); } 50% { transform: translate3d(-20%,13%,0) scale(.9); } }
@keyframes abxC { 0%,100% { transform: translate3d(0,0,0) scale(1); } 40% { transform: translate3d(14%,-16%,0) scale(1.24); } 72% { transform: translate3d(-10%,8%,0) scale(1.06); } }
@keyframes abxD { 0%,100% { transform: translate3d(0,0,0) scale(1.12); } 33% { transform: translate3d(-15%,-17%,0) scale(.9); } 66% { transform: translate3d(17%,9%,0) scale(1.18); } }
/* grain breaks the banding that makes a soft blend read as cheap on an 8-bit panel */
.abx-aur__grain {
  position: absolute; inset: -50%; opacity: .10; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .abx-aur__grain { opacity: .16; }
/* light: keep the corners clean white. dark: pull the eye to the centre. */
.abx-aur__vig {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(112% 98% at 50% 32%, transparent 34%, rgba(255,255,255,.9) 100%);
}
html[data-theme="dark"] .abx-aur__vig {
  background: radial-gradient(120% 100% at 50% 35%, transparent 34%, rgba(2,4,10,.72) 100%);
}
.abx-aur.is-paused .abx-aur__b { animation-play-state: paused; will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  .abx-aur__b { animation: none; }
}
/* NO plate behind the icon. The PNG is already a finished app icon with a squircle and
   transparent corners; a rounded-rect plate underneath shows as white slivers along
   the curve — invisible on white, obvious on black. The art carries its own shape, so
   the container only casts the shadow. */
.abx-hero__icon {
  width: 88px; height: 88px; display: block; margin-bottom: 15px; background: none; border-radius: 0;
  filter: drop-shadow(0 14px 26px rgba(28,40,100,.42)) drop-shadow(0 2px 4px rgba(16,24,40,.16));
}
html[data-theme="dark"] .abx-hero__icon {
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.75)) drop-shadow(0 0 22px rgba(108,124,255,.28));
}
.abx-hero__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.abx-hero__name {
  margin: 0; font: 800 22px/1.1 var(--font-display); letter-spacing: -.03em; color: var(--m-ink);
}
.abx-hero__co { margin: 4px 0 0; font: 500 13px/1.3 var(--font); color: var(--m-ink-3); }
html[data-theme="dark"] .abx-hero__name { color: #F4F6FF; }
html[data-theme="dark"] .abx-hero__co { color: rgba(226,232,255,.66); }
.abx-hero__meta { display: flex; align-items: center; gap: 7px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.abx-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 11px;
  font: 600 11.5px/1 var(--font); color: var(--m-ink-2); background: rgba(17,22,50,.05);
}
html[data-theme="dark"] .abx-chip { color: rgba(232,236,255,.86); background: rgba(255,255,255,.10); }
.abx-chip--ver { font-family: var(--font-ledger); letter-spacing: .02em; }

/* ---- Software update card ---- */
.abx-upd {
  position: relative; border-radius: 20px; overflow: hidden; margin-bottom: 22px;
  border: 1px solid rgba(17,22,50,.06);
  background: linear-gradient(180deg, #FFFFFF, #FCFDFF);
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 14px 30px -22px rgba(28,40,100,.40);
}
html[data-theme="dark"] .abx-upd {
  border-color: rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
  box-shadow: 0 18px 34px -24px rgba(0,0,0,.85);
}
.abx-upd__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 14px; }
.abx-upd__ic {
  width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto;
  font-size: 17px; color: #0F8A5F; background: rgba(15,138,95,.12);
}
html[data-theme="dark"] .abx-upd__ic { color: #5FD9AC; background: rgba(59,215,158,.14); }
.abx-upd.is-ready .abx-upd__ic {
  color: #fff; background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 8px 18px -9px rgba(61,79,224,.9);
}
.abx-upd__b { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.abx-upd__t { font: 700 14.5px/1.2 var(--font); letter-spacing: -.015em; color: var(--m-ink); }
.abx-upd__s { font: 500 11.5px/1.35 var(--font); color: var(--m-ink-4); }
.abx-upd__go {
  flex: 0 0 auto; border: 0; cursor: pointer; padding: 10px 15px; border-radius: 13px; color: #fff;
  font: 700 13px/1 var(--font); letter-spacing: -.01em;
  background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 10px 20px -10px rgba(61,79,224,.85), inset 0 1px 0 rgba(255,255,255,.28);
}
.abx-upd__chk {
  flex: 0 0 auto; border: 0; background: none; cursor: pointer; padding: 9px 6px;
  font: 650 12.5px/1 var(--font); color: #3D4FE0;
}
html[data-theme="dark"] .abx-upd__chk { color: #93A2FF; }
.abx-upd__chk:disabled { color: var(--m-ink-4); }
.abx-spin {
  display: inline-block; width: 13px; height: 13px; border-radius: 50%; vertical-align: -2px;
  border: 2px solid rgba(120,130,160,.28); border-top-color: currentColor; animation: abxSpin .7s linear infinite;
}
@keyframes abxSpin { to { transform: rotate(360deg); } }

/* ==================================================================================
 *  UPDATE SHEET (.vupx) — the phone install flow. Same material, radius, grabber and
 *  scrim as the app's nine other sheets (v3.9.4 unified those values).
 * ================================================================================== */
.vupx-scrim {
  position: fixed; inset: 0; z-index: 3199; background: rgba(16,20,34,.34);
  -webkit-backdrop-filter: blur(9px) saturate(1.2); backdrop-filter: blur(9px) saturate(1.2);
  opacity: 0; transition: opacity .3s ease;
}
.vupx-scrim.is-open { opacity: 1; }
.vupx {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3200;
  border-radius: 30px 30px 0 0; overflow: hidden;
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.74);
  -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%);
  box-shadow: 0 -20px 60px -20px rgba(16,24,40,.4), inset 0 1px 0 rgba(255,255,255,.9);
  transform: translateY(102%); transition: transform .44s cubic-bezier(.22,1,.36,1);
}
html[data-theme="dark"] .vupx {
  background: rgba(28,31,40,.82);
  box-shadow: 0 -20px 60px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08);
}
.vupx.is-open { transform: none; }
.vupx__grip { width: 40px; height: 5px; border-radius: 3px; background: rgba(17,22,50,.18); margin: 0 auto 16px; }
html[data-theme="dark"] .vupx__grip { background: rgba(255,255,255,.22); }
.vupx__ic {
  width: 62px; height: 62px; border-radius: 19px; display: grid; place-items: center; margin: 2px auto 14px;
  font-size: 26px; color: #fff; background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 14px 28px -12px rgba(61,79,224,.85), inset 0 1px 0 rgba(255,255,255,.3);
}
.vupx--fail .vupx__ic { background: linear-gradient(150deg, #F5A64A, #D9713A); box-shadow: 0 14px 28px -12px rgba(217,113,58,.8); }
.vupx__t {
  margin: 0; text-align: center; font: 800 21px/1.15 var(--font-display); letter-spacing: -.03em; color: var(--m-ink);
}
.vupx__s {
  margin: 7px 0 0; text-align: center; font: 500 13px/1.45 var(--font); color: var(--m-ink-3);
}
.vupx__notes {
  margin: 18px 0 0; padding: 14px 15px; border-radius: 16px; list-style: none;
  background: rgba(17,22,50,.04); display: flex; flex-direction: column; gap: 9px;
}
html[data-theme="dark"] .vupx__notes { background: rgba(255,255,255,.06); }
.vupx__notes li {
  position: relative; padding-left: 17px; font: 500 12.5px/1.45 var(--font); color: var(--m-ink-2);
}
.vupx__notes li::before {
  content: ''; position: absolute; left: 3px; top: .58em; width: 5px; height: 5px; border-radius: 50%;
  background: #6C7CFF;
}
.vupx__bar {
  height: 4px; border-radius: 3px; margin: 18px 0 0; overflow: hidden; background: rgba(17,22,50,.09);
}
html[data-theme="dark"] .vupx__bar { background: rgba(255,255,255,.12); }
.vupx__bar span {
  display: block; height: 100%; width: 40%; border-radius: 3px;
  background: linear-gradient(90deg, #6C7CFF, #3D4FE0);
  animation: vupxBar 1.25s ease-in-out infinite;
}
@keyframes vupxBar { 0% { transform: translateX(-110%); } 100% { transform: translateX(320%); } }
.vupx__acts { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.vupx__go {
  width: 100%; border: 0; cursor: pointer; height: 54px; border-radius: 17px; color: #fff;
  font: 700 15.5px/1 var(--font); letter-spacing: -.01em;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 14px 28px -12px rgba(61,79,224,.85), inset 0 1px 0 rgba(255,255,255,.28);
}
.vupx__go:disabled { opacity: .82; }
.vupx__later {
  width: 100%; border: 0; background: none; cursor: pointer; height: 46px; border-radius: 15px;
  font: 650 14.5px/1 var(--font); color: var(--m-ink-3);
}
.vupx--fail .vupx__go { background: linear-gradient(150deg, #F5A64A, #D9713A); box-shadow: 0 14px 28px -12px rgba(217,113,58,.8); }


/* ==================================================================================
 *  v3.10.0 — SETTINGS PRIMITIVES ON DESKTOP (a defect fix, and an honest one).
 *
 *  v3.9.8/3.9.9 scoped every `.sx-*` rule to `html.dm-on`, which is added by
 *  renderMaster() and therefore exists ONLY on the phone. But `renderTab()` is shared:
 *  renderDesktop() renders the SAME companyTab()/paymentTab()/regionalTab()/
 *  remindersTab() markup into `.setmain #set-content`. So on desktop those four pages
 *  rendered as UNSTYLED rows — bare inputs, no cards. Measured at 1280x900 against the
 *  real stylesheet: `.sx-grp` reported `background-image: none` and `border-radius: 0px`.
 *  That breaks the standing device-scope rule in README §4.8.
 *
 *  Fix: the CONTENT primitives above are no longer scoped to `html.dm-on` (their class
 *  names are unique to Settings, so there is nothing to collide with). Only the pushed
 *  PAGE SHELL — `.stx-page.sx`, its nav, large title and save dock — stays phone-only,
 *  because that screen genuinely does not exist on desktop.
 *
 *  The primitives are written against the phone `--m-*` tokens, which are themselves
 *  declared inside `@media (max-width: 767.98px)`. This bridges them to the desktop
 *  palette above 768px so the same rules resolve correctly on both.
 * ================================================================================== */
@media (min-width: 768px) {
  #set-content {
    --m-bg:        var(--surface);
    --m-surface:   var(--surface);
    --m-surface-2: var(--surface-2);
    --m-hair:      var(--line);
    --m-hair-2:    var(--line);
    --m-ink:       var(--ink);
    --m-ink-2:     var(--ink-2);
    --m-ink-3:     var(--ink-3);
    --m-ink-4:     var(--ink-3);
    --m-coral:     var(--negative, #C5271E);
    /* the phone rails bleed to the screen edge with a negative gutter; inside a
       desktop card there is no edge to reach, so the bleed is zeroed. */
    --m-gutter:    0px;
  }
  /* a comfortable reading measure — full-width rows on a 1200px card look abandoned */
  #set-content .sx-grp,
  #set-content .sx-hd,
  #set-content .sx-ft,
  #set-content .sx-id,
  #set-content .sx-prev,
  #set-content .sx-pv,
  #set-content .sx-tiles,
  #set-content .sx-rail,
  #set-content .sx-sw { max-width: 720px; }
  #set-content .sx-row { min-height: 54px; }
  #set-content .sx-pv__paper { height: 320px; }
}

/* a read-only value on the right of a row (no input) */
.sx-val {
  text-align: right; font: 500 14.5px/1.25 var(--font); letter-spacing: -.01em; color: var(--m-ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.abx-upd.is-fail .abx-upd__ic { color: #B26A00; background: rgba(240,160,42,.16); }
html[data-theme="dark"] .abx-upd.is-fail .abx-upd__ic { color: #F5C46B; background: rgba(240,160,42,.18); }

/* =====================================================================================
 *  v3.11.0 — DASHBOARD HEADER: "MONOLITH NOTCH" (owner-approved).
 *  ------------------------------------------------------------------------------------
 *  The header and the month rail are now ONE unified pane of liquid glass running from
 *  behind the notch down through the months, edge to edge. What changed and why:
 *    · the rail's separate inset tray is GONE — the header glass IS the tray, which is
 *      what lets the months run full width instead of stopping short at a floating pill.
 *    · the pinned year badge is GONE (it ate ~75px of the left edge). The year is printed
 *      once, inside the selected thumb, absolutely positioned so revealing it costs no
 *      layout and never changes a chip's width.
 *    · iOS pass: large-title stack (title leads, company name as a quiet subtitle), two
 *      separate circular panes of glass for the chrome actions, softer capsule thumb.
 *    · no divider hairline — one uninterrupted pane of material.
 *    · SMART: `.is-tight` condenses the slab the moment the page moves; `.is-away` clears
 *      it off-screen on sustained downward scroll. Driven by wireHeaderScroll() in
 *      js/views/dashboard.js.
 *
 *  SPECIFICITY NOTE — READ BEFORE EDITING. `style.css` already carries
 *  `html.dm-on .dm.is-scrolled .hdr { background: … }` at (0,4,1). A rule written as
 *  `html.dm-on .hdr--v7` is only (0,3,1) and LOSES to it, which rendered the glass at
 *  ~59% opacity instead of ~99% and let page content ghost straight through the months.
 *  Every selector here that paints the slab therefore carries `.dm`. Keep it that way.
 *
 *  Appended last, scoped to `html.dm-on` (phone dashboard only). Both themes.
 *  The `.mrail--v3` rules above are STILL LIVE for other views (users, hero) — do not
 *  delete them; this block introduces `.mrail--v6` and touches nothing else.
 * ================================================================================== */

html.dm-on {
  --sa-top: env(safe-area-inset-top, 0px);
  --hdr-top-0: rgba(255,255,255,0);
  --hdr-h: calc(var(--sa-top) + 137px);   /* expanded height — reserves the scroll gutter */
}
html[data-theme="dark"].dm-on { --hdr-top-0: rgba(0,0,0,0); }

/* Status-bar cap: a flat strip the exact colour of the page + theme-color, pinned above
   everything. Invisible at rest; it is what lets the slab leave completely without live
   content sliding under the clock and battery. */
html.dm-on .dm::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; z-index: 39;
  height: var(--sa-top); background: var(--hdr-top); pointer-events: none;
}

/* ---------------------------------------------------------------- the slab --------- */
html.dm-on .dm .hdr--v7 {
  position: fixed; left: 0; right: 0; top: 0; z-index: 40;
  display: block; gap: 0; padding: 0; border: 0; overflow: visible;
  border-radius: 0 0 34px 34px;
  background:
    radial-gradient(118% 80% at 88% -8%, rgba(108,124,255,.15), transparent 58%),
    radial-gradient(96%  72% at 4% 106%, rgba(108,124,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(249,250,254,.95) 0%, rgba(240,243,252,.92) 62%, rgba(235,239,251,.91) 100%);
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.85),
    0 1px 0 rgba(20,30,70,.045),
    0 26px 48px -30px rgba(38,52,120,.46);
  -webkit-backdrop-filter: blur(34px) saturate(200%);
          backdrop-filter: blur(34px) saturate(200%);
  /* v3.12.1 — TRANSFORM IS THE ONLY THING THIS TRANSITIONS, deliberately.
     `box-shadow` and `border-radius` were both in this list and both force a full repaint
     of a backdrop-filtered layer on EVERY frame of the hide — the single most expensive
     thing you can animate here. They now snap on the class change, which is invisible
     because the slab is travelling off-screen at the same moment.
     `--hdr-dur` is written by wireHeaderScroll() from the scroll velocity: ~230ms off a
     hard flick, ~400ms off a slow drag. */
  transform: translateY(0);
  transition: transform var(--hdr-dur, 380ms) cubic-bezier(.32,.72,0,1);
  will-change: transform;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
html[data-theme="dark"].dm-on .dm .hdr--v7 {
  background:
    radial-gradient(118% 80% at 88% -8%, rgba(128,148,255,.20), transparent 58%),
    radial-gradient(96%  72% at 4% 106%, rgba(128,148,255,.11), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.055) 62%, rgba(255,255,255,.048) 100%),
    linear-gradient(180deg, rgba(6,7,11,.84) 0%, rgba(8,9,14,.80) 100%);
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.10),
    0 1px 0 rgba(0,0,0,.6),
    0 28px 52px -30px rgba(0,0,0,.92);
}

/* the content gutter the fixed slab used to occupy. Constant, so the slab can change
   height without ever reflowing the page underneath it. */
html.dm-on .hdr--v7 ~ .dm__scroll { padding-top: calc(var(--hdr-h) + 8px); }

/* notch cap: the very top stays the flat OS status-bar colour (no seam under the notch),
   then dissolves into the glass. */
/* v3.12.2 — z-index 1: the cap must be the TOPMOST painted layer in the notch region, above
   the specular sweep, so the page's first pixel is exactly `--hdr-top` and therefore exactly
   `theme-color`. Content sits at z-index 2. Do not flatten these back to a single layer.

   v3.12.3 — THE STOPS ARE A SMOOTHSTEP, AND THAT IS THE WHOLE POINT.
   Getting every colour value right was not enough. The old two-stop ramp held flat black for
   14px and then climbed to L=24 over the next 25px: a hard CORNER in the luminance slope,
   sitting right under the status bar. The eye exaggerates a slope discontinuity (Mach
   banding) and reads it as a hairline even though no line is drawn — and on OLED it is worse,
   because true black is pixels-off, so any departure from it is stark.

   So the stops below are 1 − smoothstep(t), which has ZERO derivative where the flat run
   ends. There is no corner to band on, at any point in the profile. The dark tail is long
   (132px) so the whole transition happens across the identity row instead of in a 25px band
   under the status bar; light stays short (56px) because its step is only ~5/255 and a long
   white cap would flatten the glass for no benefit.

   Verify by PROFILING, not by eye: sample a content-free column and check the second
   difference of luminance stays under ~0.5. A screenshot on a bright monitor hides this. */
html.dm-on .hdr--v7::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1;
  height: calc(var(--sa-top) + 56px); pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255,255,255,1)    0,
    rgba(255,255,255,1)    calc(var(--sa-top) + 6px),
    rgba(255,255,255,.974) calc(var(--sa-top) + 11px),
    rgba(255,255,255,.903) calc(var(--sa-top) + 16px),
    rgba(255,255,255,.798) calc(var(--sa-top) + 21px),
    rgba(255,255,255,.671) calc(var(--sa-top) + 26px),
    rgba(255,255,255,.534) calc(var(--sa-top) + 31px),
    rgba(255,255,255,.399) calc(var(--sa-top) + 36px),
    rgba(255,255,255,.276) calc(var(--sa-top) + 41px),
    rgba(255,255,255,.170) calc(var(--sa-top) + 46px),
    rgba(255,255,255,.086) calc(var(--sa-top) + 51px),
    rgba(255,255,255,0)    calc(var(--sa-top) + 56px));
}
html[data-theme="dark"].dm-on .hdr--v7::before {
  height: calc(var(--sa-top) + 132px);
  background: linear-gradient(180deg,
    rgba(0,0,0,1)    0,
    rgba(0,0,0,1)    calc(var(--sa-top) + 8px),
    rgba(0,0,0,.974) calc(var(--sa-top) + 20px),
    rgba(0,0,0,.903) calc(var(--sa-top) + 32px),
    rgba(0,0,0,.798) calc(var(--sa-top) + 44px),
    rgba(0,0,0,.671) calc(var(--sa-top) + 56px),
    rgba(0,0,0,.534) calc(var(--sa-top) + 68px),
    rgba(0,0,0,.399) calc(var(--sa-top) + 80px),
    rgba(0,0,0,.276) calc(var(--sa-top) + 92px),
    rgba(0,0,0,.170) calc(var(--sa-top) + 104px),
    rgba(0,0,0,.086) calc(var(--sa-top) + 116px),
    rgba(0,0,0,0)    calc(var(--sa-top) + 132px));
}
/* specular sweep — what makes the material read as liquid rather than paint.
   v3.12.2 — z-index 0, BELOW the notch cap (which is z-index 1). Both used to sit at 0,
   so the sweep painted OVER the cap and added rgba(255,255,255,.07) to the one region that
   has to be an EXACT theme-color match. In dark that turned the page's first pixel row
   into #111111 against a #000000 status bar — the seam. See the cap rule below. */
html.dm-on .hdr--v7::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(112deg, rgba(255,255,255,.44) 0%, rgba(255,255,255,.11) 30%, rgba(255,255,255,0) 56%);
}
html[data-theme="dark"].dm-on .hdr--v7::after {
  background: linear-gradient(112deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 32%, rgba(255,255,255,0) 58%);
}
html.dm-on .hdr--v7 > * { position: relative; z-index: 2; }   /* above the cap (1) and sweep (0) */

/* ---------------------------------------------------- row 1 · identity ------------- */
html.dm-on .hdr--v7 .hdr__id {
  display: flex; align-items: center; gap: 13px;
  padding: calc(var(--sa-top) + 12px) 18px 12px;
  transition: padding .3s cubic-bezier(.32,.72,0,1);
}
html.dm-on .hdr--v7 .hdr__logo {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 13px; overflow: hidden;
  box-shadow: 0 10px 20px -10px rgba(38,52,120,.60), inset 0 1px 0 rgba(255,255,255,.26);
  transition: width .3s cubic-bezier(.32,.72,0,1), height .3s cubic-bezier(.32,.72,0,1),
              border-radius .3s cubic-bezier(.32,.72,0,1);
}
html[data-theme="dark"].dm-on .hdr--v7 .hdr__logo {
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.16);
}

/* iOS large-title stack: the title leads, the company sits under it as a quiet subtitle
   (the old tracked-out uppercase eyebrow above the title was editorial, not native). */
html.dm-on .hdr--v7 .hdr__wm {
  display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; overflow: hidden;
}
/* v3.12.1 — the title SCALES rather than changing font-size. Animating font-size
   re-typesets and re-rasterises the glyphs on every frame; a transform is composited.
   This is also what UIKit does to a large title. The layout box stays 26px either way, so
   the row height is unchanged — it is set by the 34/39px chrome buttons, not by this. */
html.dm-on .hdr--v7 .hdr__ttl {
  order: 1;
  font: 700 26px/1.06 var(--font-display); letter-spacing: -.033em; color: #0B1226;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transform-origin: left center;
  transition: transform .3s cubic-bezier(.32,.72,0,1);
}
html.dm-on .hdr--v7 .hdr__eb {
  order: 2;
  font: 500 12.5px/1.25 var(--font); letter-spacing: -.005em; text-transform: none;
  color: #7A85A3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-height: 17px; opacity: 1;
  transition: max-height .3s cubic-bezier(.32,.72,0,1), opacity .22s ease;
}
html[data-theme="dark"].dm-on .hdr--v7 .hdr__ttl { color: #F5F7FD; }
html[data-theme="dark"].dm-on .hdr--v7 .hdr__eb  { color: #8B96B4; }

/* iOS 26 controls: two separate circular panes of glass, not one joined capsule */
html.dm-on .hdr--v7 .hdr__cap {
  margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 9px;
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.dm-on .hdr--v7 .hdr__cap .dm__ico {
  position: relative; width: 39px; height: 39px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: #384464;
  border: 1px solid rgba(255,255,255,.92);
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,247,253,.70));
  box-shadow: 0 8px 18px -12px rgba(20,30,70,.5), inset 0 1px 0 rgba(255,255,255,1);
  -webkit-backdrop-filter: blur(18px) saturate(185%); backdrop-filter: blur(18px) saturate(185%);
  transition: width .3s cubic-bezier(.32,.72,0,1), height .3s cubic-bezier(.32,.72,0,1),
              transform .18s ease;
}
html.dm-on .hdr--v7 .hdr__cap .dm__ico:active { transform: scale(.9); }
html.dm-on .hdr--v7 .hdr__cap .dm__ico::after { display: none; }
html.dm-on .hdr--v7 .hdr__cap .dm__ico + .dm__ico::before { display: none; }
html.dm-on .hdr--v7 .hdr__cap .dm__gi { width: 19.5px; height: 19.5px; }
html[data-theme="dark"].dm-on .hdr--v7 .hdr__cap .dm__ico {
  color: #CFD7EE; border-color: rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.065));
  box-shadow: 0 8px 20px -12px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.13);
}
html.dm-on .hdr--v7 .hdr__cap .dm__badge {
  top: 4px; right: 4px; min-width: 9px; width: 9px; height: 9px; padding: 0; border-radius: 50%;
  background: #FF3B30; box-shadow: 0 0 0 2.5px rgba(255,255,255,.96);
}
html[data-theme="dark"].dm-on .hdr--v7 .hdr__cap .dm__badge { box-shadow: 0 0 0 2.5px #0E1016; }

/* ---------------------------------------------------- row 2 · the rail ------------- */
/* no divider — one uninterrupted pane of material */
html.dm-on .hdr--v7 .hdr__rail { position: relative; padding: 0 0 8px; }
html.dm-on .hdr--v7 .dm__tl--v6 {
  padding: 0; margin: 0; background: none; border: 0; box-shadow: none; position: static;
}
html.dm-on .hdr--v7 .dm__tl--v6::before { display: none; }

/* the scroller: FULL WIDTH — no tray, no side margins. The slab IS the tray. */
html.dm-on .hdr--v7 .mrail--v6 {
  position: relative; display: flex; align-items: center; gap: 2px;
  margin: 0; padding: 4px 14px 7px; border: 0; border-radius: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  overflow-x: auto; overflow-y: hidden;
  scroll-behavior: auto;
  scroll-snap-type: x proximity; scroll-padding-inline: 14px;
  overscroll-behavior-x: contain; touch-action: pan-x;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 54px, #000 calc(100% - 54px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 54px, #000 calc(100% - 54px), transparent 100%);
}
html.dm-on .hdr--v7 .mrail--v6::-webkit-scrollbar { display: none; }

/* the sliding thumb — a soft iOS capsule */
/* v3.12.5 — a SOLID accent chip, not frosted glass. Three things made this read as a glass
   lozenge and all three are gone:
     · a `::after` gloss filling the top 50% put a visible horizontal seam across the middle
       of the pill — the main offender, and the reason it looked translucent;
     · a bright inner rim (.45 light / .36 dark) washed the top edge out to near-lavender;
     · a 22px glow at .85 hazed the slab around it, very visible against the near-black dark
       header once v3.12.3 made the top of that header genuinely black.
   What is left is one confident block of indigo with a subtle top-lit edge and a short
   contact shadow. If depth is ever wanted back, reintroduce the gloss at a FRACTION of the
   old strength — do not restore the 50% overlay, it is what created the seam. */
html.dm-on .hdr--v7 .mrail--v6 .mrail__pill {
  position: absolute; left: 0; top: 4px; bottom: auto; width: 0; height: 50px; z-index: 1; border: 0;
  border-radius: 21px;
  background: linear-gradient(180deg, #6474FF 0%, #4B5CEC 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 1px 2px rgba(20,30,90,.20),
    0 6px 14px -9px rgba(61,79,224,.55);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: transform .5s cubic-bezier(.32,.94,.34,1), width .5s cubic-bezier(.32,.94,.34,1);
  will-change: transform, width;
}
html.dm-on .hdr--v7 .mrail--v6 .mrail__pill::after { display: none; }
html[data-theme="dark"].dm-on .hdr--v7 .mrail--v6 .mrail__pill {
  background: linear-gradient(180deg, #6C7BFF 0%, #4B5BEE 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 5px 14px -10px rgba(90,110,255,.45);
}
@media (prefers-reduced-motion: reduce) {
  html.dm-on .hdr--v7 .mrail--v6 .mrail__pill { transition: transform .2s, width .2s; }
}

/* chips */
html.dm-on .hdr--v7 .mrail--v6 .mrail__chip {
  position: relative; z-index: 2; flex: 0 0 auto;
  height: 50px; min-width: 66px; padding: 0 13px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; box-shadow: none; border-radius: 21px;
  scroll-snap-align: center; cursor: pointer;
  transition: opacity .3s ease;
}
html.dm-on .hdr--v7 .mrail--v6 .mrail__chip::before { display: none; }
html.dm-on .hdr--v7 .mrail__hd {
  display: flex; align-items: center; gap: 6px;
  transition: transform .34s cubic-bezier(.32,.94,.34,1);
}
html.dm-on .hdr--v7 .mrail__lbl {
  font: 600 14px/1 var(--font-display); letter-spacing: -.01em; color: #79839F;
  transition: color .3s ease;
}
html[data-theme="dark"].dm-on .hdr--v7 .mrail__lbl { color: #838EAF; }
html.dm-on .hdr--v7 .mrail__chip.is-future { opacity: .42; }
html.dm-on .hdr--v7 .mrail__chip[aria-selected="true"] { opacity: 1; }
html.dm-on .hdr--v7 .mrail__chip[aria-selected="true"] .mrail__hd { transform: translateY(-5px); }
html.dm-on .hdr--v7 .mrail__chip[aria-selected="true"] .mrail__lbl,
html[data-theme="dark"].dm-on .hdr--v7 .mrail__chip[aria-selected="true"] .mrail__lbl {
  color: #FFFFFF; font-weight: 700; text-shadow: 0 1px 2px rgba(16,24,78,.34);
}

/* the year — printed ONCE, inside the selected thumb where it can never lie. Absolutely
   positioned, so revealing it costs no layout and never changes a chip's width. */
html.dm-on .hdr--v7 .mrail__yv {
  position: absolute; left: 0; right: 0; bottom: 8px; text-align: center;
  font: 600 9px/1 var(--font); letter-spacing: .02em;
  color: rgba(255,255,255,.80);
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .3s ease, transform .34s cubic-bezier(.32,.94,.34,1);
}
html.dm-on .hdr--v7 .mrail__chip[aria-selected="true"] .mrail__yv { opacity: 1; transform: none; }

/* today — an inline leading dot. Only one chip ever carries it and it never moves, so
   there is no width jump when the selection changes. */
html.dm-on .hdr--v7 .mrail__now {
  position: static; flex: 0 0 auto; transform: none;
  width: 5px; height: 5px; border-radius: 50%; background: #FF3B30;
  box-shadow: 0 0 0 2.5px rgba(255,59,48,.15);
}
html.dm-on .hdr--v7 .mrail__chip[aria-selected="true"] .mrail__now {
  background: #FFFFFF; box-shadow: 0 0 0 2.5px rgba(255,255,255,.26);
}
html[data-theme="dark"].dm-on .hdr--v7 .mrail__now {
  background: #FF453A; box-shadow: 0 0 0 2.5px rgba(255,69,58,.20);
}

/* =====================================================================================
 *  STATE 2 — CONDENSED (`.is-tight`). The moment the page moves, the large title packs
 *  down into a compact nav bar and the rail rises to meet it. Because the slab is fixed
 *  and the scroll gutter below is constant, none of this reflows the page.
 * ================================================================================== */
html.dm-on .dm .hdr--v7.is-tight {
  border-radius: 0 0 26px 26px;
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.85),
    0 1px 0 rgba(20,30,70,.07),
    0 30px 56px -30px rgba(38,52,120,.58);
  background:
    radial-gradient(118% 80% at 88% -8%, rgba(108,124,255,.14), transparent 58%),
    radial-gradient(96%  72% at 4% 106%, rgba(108,124,255,.09), transparent 62%),
    linear-gradient(180deg, rgba(250,251,254,.995) 0%, rgba(243,246,253,.988) 62%, rgba(239,243,252,.985) 100%);
}
html[data-theme="dark"].dm-on .dm .hdr--v7.is-tight {
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.10),
    0 1px 0 rgba(0,0,0,.7),
    0 32px 60px -30px rgba(0,0,0,.96);
  background:
    radial-gradient(118% 80% at 88% -8%, rgba(128,148,255,.18), transparent 58%),
    radial-gradient(96%  72% at 4% 106%, rgba(128,148,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.055) 62%, rgba(255,255,255,.048) 100%),
    linear-gradient(180deg, rgba(6,7,11,.985) 0%, rgba(8,9,14,.978) 100%);
}
html.dm-on .hdr--v7.is-tight .hdr__id { padding: calc(var(--sa-top) + 7px) 18px 7px; }
html.dm-on .hdr--v7.is-tight .hdr__logo { width: 32px; height: 32px; border-radius: 10px; }
html.dm-on .hdr--v7.is-tight .hdr__ttl { transform: scale(.673); }   /* 26px → 17.5px */
html.dm-on .hdr--v7.is-tight .hdr__eb  { max-height: 0; opacity: 0; }
html.dm-on .hdr--v7.is-tight .hdr__cap .dm__ico { width: 34px; height: 34px; }
html.dm-on .hdr--v7.is-tight .hdr__cap .dm__gi { width: 18px; height: 18px; }

/* =====================================================================================
 *  STATE 3 — AWAY (`.is-away`). Keep scrolling DOWN and the slab clears the screen
 *  entirely; the flat `.dm::before` status cap is what keeps live content from sliding
 *  under the clock and battery. One flick UP brings it straight back, condensed;
 *  returning to the top re-expands it.
 * ================================================================================== */
html.dm-on .dm .hdr--v7.is-away {
  transform: translateY(-100%);
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  html.dm-on .hdr--v7 { transition: none; }
  html.dm-on .hdr--v7 .hdr__ttl, html.dm-on .hdr--v7 .hdr__id,
  html.dm-on .hdr--v7 .hdr__logo, html.dm-on .hdr--v7 .hdr__eb,
  html.dm-on .hdr--v7 .hdr__cap .dm__ico { transition: none; }
}


/* =====================================================================================
 *  v3.12.0 — GREETING HERO: "THE BRIEF" (owner-approved).
 *  ------------------------------------------------------------------------------------
 *  The hero now wears the SAME liquid glass as the v3.11.0 header slab — same gradient,
 *  same specular sweep, same lit rim, same blur — so the two read as one material. The
 *  old card was a warm amber panel that belonged to the pre-3.11 header.
 *    · day-part is a WHISPER now: a low-alpha bloom in the top-right (warm at dawn, cool
 *      at midnight) over a base identical to the header, instead of a full warm wash.
 *    · new signal row: three recessed panes — Today / 7 days / Pacing. Built by
 *      dghSignals() and deliberately forward-looking, so they do not repeat the metric
 *      carousel (Outstanding / Collected) or the Focus hero (overdue) below.
 *    · new Next-up rail (`#dgh-next`), the soonest UPCOMING invoice; omitted entirely
 *      when there is nothing upcoming.
 *    · the rotating smart line is UNCHANGED — `#dgh-t`, `.dgh__line`, the cross-dissolve
 *      and the dghFit height animation all still work exactly as before.
 *
 *  SPECIFICITY NOTE: the card selectors carry `.dm` for the same reason the header's do
 *  (see the v3.11.0 block) — earlier `.hero` rules sit at (0,3,1) and would otherwise tie.
 *  `.hero::before/::after` are force-disabled by the v2.9x block that removed the old gold
 *  hairline, which is why the bloom and sheen are real elements emitted by mHeroHTML().
 *
 *  Appended last, scoped to `html.dm-on` (phone dashboard only). Both themes.
 * ================================================================================== */

/* ---- the glass card: the header recipe, inset ---- */
html.dm-on .dm .hero--v2 {
  position: relative; z-index: 15; overflow: hidden; border: 0;
  margin: 12px 0 0; border-radius: 28px; padding: 0;
  background:
    radial-gradient(112% 82% at 88% -12%, rgba(108,124,255,.13), transparent 58%),
    radial-gradient(96%  74% at 2% 108%, rgba(108,124,255,.09), transparent 62%),
    linear-gradient(180deg, rgba(249,250,254,.92) 0%, rgba(240,243,252,.86) 62%, rgba(235,239,251,.84) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(20,30,70,.05),
    0 22px 44px -26px rgba(38,52,120,.44);
  -webkit-backdrop-filter: blur(32px) saturate(195%);
          backdrop-filter: blur(32px) saturate(195%);
}
html[data-theme="dark"].dm-on .dm .hero--v2 {
  background:
    radial-gradient(112% 82% at 88% -12%, rgba(128,148,255,.18), transparent 58%),
    radial-gradient(96%  74% at 2% 108%, rgba(128,148,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.05) 62%, rgba(255,255,255,.042) 100%),
    linear-gradient(180deg, rgba(8,9,14,.6) 0%, rgba(10,11,16,.55) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 24px 48px -28px rgba(0,0,0,.9);
}
html.dm-on .dm .hero--v2::before, html.dm-on .dm .hero--v2::after { display: none; }

/* specular sweep — the same one the header wears, so they read as one material */
html.dm-on .hero--v2 .dgh__sheen {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(112deg, rgba(255,255,255,.40) 0%, rgba(255,255,255,.10) 30%, rgba(255,255,255,0) 56%);
}
html[data-theme="dark"].dm-on .hero--v2 .dgh__sheen {
  background: linear-gradient(112deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 32%, rgba(255,255,255,0) 58%);
}

/* ---- day-part: a WHISPER, not a wash. The base material stays identical to the header;
       this only tints the top-right bloom so 6am feels warm and midnight feels cool. ---- */
html.dm-on .hero--v2 .dgh__bloom {
  position: absolute; inset: -30% -20% auto -20%; height: 78%; z-index: 0; pointer-events: none;
  border-radius: 50%; filter: blur(30px); opacity: .85;
}
html.dm-on .hero--v2.tod-morning   .dgh__bloom { background: radial-gradient(50% 60% at 78% 62%, rgba(255,186,104,.34), transparent 70%); }
html.dm-on .hero--v2.tod-afternoon .dgh__bloom { background: radial-gradient(50% 60% at 78% 62%, rgba(255,203,138,.28), transparent 70%); }
html.dm-on .hero--v2.tod-evening   .dgh__bloom { background: radial-gradient(50% 60% at 78% 62%, rgba(255,158,126,.30), transparent 70%); }
html.dm-on .hero--v2.tod-night     .dgh__bloom { background: radial-gradient(50% 60% at 78% 62%, rgba(126,146,255,.30), transparent 70%); }
html[data-theme="dark"].dm-on .hero--v2.tod-morning   .dgh__bloom { background: radial-gradient(50% 60% at 78% 62%, rgba(255,186,104,.22), transparent 70%); }
html[data-theme="dark"].dm-on .hero--v2.tod-afternoon .dgh__bloom { background: radial-gradient(50% 60% at 78% 62%, rgba(255,203,138,.18), transparent 70%); }
html[data-theme="dark"].dm-on .hero--v2.tod-evening   .dgh__bloom { background: radial-gradient(50% 60% at 78% 62%, rgba(255,150,118,.20), transparent 70%); }
html[data-theme="dark"].dm-on .hero--v2.tod-night     .dgh__bloom { background: radial-gradient(50% 60% at 78% 62%, rgba(126,146,255,.24), transparent 70%); }

html.dm-on .hero--v2 .dgh--v2 {
  position: relative; z-index: 1;
  margin: 0; padding: 16px 17px 14px; background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0;
}

/* ---- row 1: live meta + weather ---- */
html.dm-on .dgh--v2 .dgh__top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 11px;
}
html.dm-on .dgh--v2 .dgh__meta {
  margin: 0; min-width: 0; display: flex; align-items: center; gap: 6px;
  font: 500 12.5px/1.2 var(--font); color: #6E7994;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme="dark"].dm-on .dgh--v2 .dgh__meta { color: #8B96B4; }
html.dm-on .dgh--v2 .dgh__dp { width: 15px; height: 15px; flex: 0 0 auto; opacity: .95; }
html.dm-on .dgh--v2 .dgh__dot { margin: 0 1px; opacity: .45; }
html.dm-on .dgh--v2 #dgz-clock { font-variant-numeric: tabular-nums; font-weight: 600; color: #55607C; }
html[data-theme="dark"].dm-on .dgh--v2 #dgz-clock { color: #A6B0CC; }

/* weather pill — a small circular-family pane, matching the header's chrome buttons */
html.dm-on .dgh--v2 .dgh__wx {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px;
  border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.92);
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,247,253,.70));
  box-shadow: 0 8px 18px -12px rgba(20,30,70,.5), inset 0 1px 0 rgba(255,255,255,1);
  -webkit-backdrop-filter: blur(18px) saturate(185%); backdrop-filter: blur(18px) saturate(185%);
  transition: transform .18s ease;
}
html[data-theme="dark"].dm-on .dgh--v2 .dgh__wx {
  border-color: rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.065));
  box-shadow: 0 8px 20px -12px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.13);
}
html.dm-on .dgh--v2 .dgh__wx:active { transform: scale(.94); }
html.dm-on .dgh--v2 .dgh__wx i { font-size: 15px; color: #F0A32B; line-height: 1; }
html.dm-on .dgh--v2 .dgh__wx-t { font: 700 13.5px/1 var(--font-display); color: #1B2440; font-variant-numeric: tabular-nums; }
html[data-theme="dark"].dm-on .dgh--v2 .dgh__wx-t { color: #EEF2FB; }
html.dm-on .dgh--v2 .dgh__wx--wait { display: none; }

/* ---- row 2: the rotating smart line (mechanism unchanged) ---- */
html.dm-on .dgh--v2 .dgh__t { position: relative; overflow: visible; min-height: 30px; }
html.dm-on .dgh--v2 .dgh__line {
  font: 700 24px/1.16 var(--font-display); letter-spacing: -.028em; color: #0B1226; margin: 0;
}
html[data-theme="dark"].dm-on .dgh--v2 .dgh__line { color: #F4F6FC; }

/* ---- row 3: the signal row — three recessed panes of glass ---- */
html.dm-on .dgh--v2 .dgh__sig {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 14px 0 0;
}
html.dm-on .dgh--v2 .dgh__cell {
  position: relative; display: flex; flex-direction: column; gap: 3px;
  padding: 9px 10px 10px; border-radius: 15px; min-width: 0;
  border: 1px solid rgba(255,255,255,.85);
  background: linear-gradient(180deg, rgba(255,255,255,.80), rgba(250,251,254,.52));
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 6px 14px -12px rgba(20,30,70,.42);
}
html[data-theme="dark"].dm-on .dgh--v2 .dgh__cell {
  border-color: rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}
html.dm-on .dgh--v2 .dgh__ct {
  display: flex; align-items: center; gap: 4px;
  font: 600 9px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: #8792AE;
}
html[data-theme="dark"].dm-on .dgh--v2 .dgh__ct { color: #7F8BAB; }
html.dm-on .dgh--v2 .dgh__ci { width: 11px; height: 11px; flex: 0 0 auto; }
html.dm-on .dgh--v2 .dgh__cv {
  font: 700 16px/1.1 var(--font-display); letter-spacing: -.03em; color: #0B1226;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme="dark"].dm-on .dgh--v2 .dgh__cv { color: #F4F6FC; }
html.dm-on .dgh--v2 .dgh__cs {
  font: 500 10.5px/1.2 var(--font); color: #79839F;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme="dark"].dm-on .dgh--v2 .dgh__cs { color: #7C87A6; }
/* tone: the pacing cell is the only one that carries a direction */
html.dm-on .dgh--v2 .dgh__cell.up   .dgh__cv { color: #0E7A52; }
html.dm-on .dgh--v2 .dgh__cell.down .dgh__cv { color: #C5271E; }
html[data-theme="dark"].dm-on .dgh--v2 .dgh__cell.up   .dgh__cv { color: #34D399; }
html[data-theme="dark"].dm-on .dgh--v2 .dgh__cell.down .dgh__cv { color: #FF6B63; }

/* ---- row 4: next up ---- */
html.dm-on .dgh--v2 .dgh__next {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 8px 0 0;
  padding: 9px 11px; border-radius: 15px; cursor: pointer; text-align: left;
  border: 1px solid rgba(255,255,255,.85);
  background: linear-gradient(180deg, rgba(255,255,255,.80), rgba(250,251,254,.52));
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 6px 14px -12px rgba(20,30,70,.42);
  transition: transform .18s ease;
}
html[data-theme="dark"].dm-on .dgh--v2 .dgh__next {
  border-color: rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}
html.dm-on .dgh--v2 .dgh__next:active { transform: scale(.985); }
html.dm-on .dgh--v2 .dgh__nxi {
  width: 27px; height: 27px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(150deg, #7C8BFF, #4453E8);
  box-shadow: 0 6px 13px -7px rgba(61,79,224,.85), inset 0 1px 0 rgba(255,255,255,.4);
}
html.dm-on .dgh--v2 .dgh__nxi svg { width: 14px; height: 14px; }
html.dm-on .dgh--v2 .dgh__nxb { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
html.dm-on .dgh--v2 .dgh__nxk {
  font: 600 8.5px/1 var(--font-display); letter-spacing: .13em; text-transform: uppercase; color: #8792AE;
}
html[data-theme="dark"].dm-on .dgh--v2 .dgh__nxk { color: #7F8BAB; }
html.dm-on .dgh--v2 .dgh__nxt {
  font: 500 12.5px/1.25 var(--font); color: #46506D;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme="dark"].dm-on .dgh--v2 .dgh__nxt { color: #AEB8D2; }
html.dm-on .dgh--v2 .dgh__nxt b { font-weight: 700; color: #0B1226; }
html[data-theme="dark"].dm-on .dgh--v2 .dgh__nxt b { color: #F4F6FC; }
html.dm-on .dgh--v2 .dgh__nxc { flex: 0 0 auto; width: 15px; height: 15px; color: #A3ACC4; }
html[data-theme="dark"].dm-on .dgh--v2 .dgh__nxc { color: #6C7793; }



/* =====================================================================================
 *  v3.12.4 — COLOR-SCHEME MUST BE AUTHORITATIVE, OR THE STATUS BAR FOLLOWS THE OS.
 *  ------------------------------------------------------------------------------------
 *  `html[data-theme="dark"]` already declared `color-scheme: dark` (~line 989), but the
 *  LIGHT theme declared nothing — so it computed to `normal`, which means "ask the OS".
 *  Force light against a dark OS and the page turns white while the browser still treats
 *  the document as dark and derives its chrome (canvas, scrollbars, and on Android the
 *  system bar) from `prefers-color-scheme`. That mismatch is the seam that only appeared
 *  when SWITCHING themes, and it is why it never reproduced on a fresh load where the two
 *  happened to agree.
 *
 *  The app's own mode is authoritative from boot (theme.js collapses the media-scoped
 *  theme-color tags for exactly this reason) — `color-scheme` has to say the same thing.
 *  Do not remove the light declaration thinking it is a no-op; `normal` is NOT `light`.
 * ================================================================================== */
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* ==================================================================================
 *  v3.13.0 — GREETING HERO: "Liquid Brief".
 *  The Editorial Brief structure (bare typography, hairline three-up, list-row
 *  Next-up — NO nested boxes) wrapped in ONE pane of liquid glass.
 *
 *  WHY THE OPTICS ARE PAINTED, NOT BLURRED. The page is flat #FFFFFF / #000000, so
 *  backdrop-filter has nothing behind it to refract and the v3.12.0 card came out a
 *  dull grey slab. The glass here MANUFACTURES its optics: a coloured light field
 *  under the frost, a bright refracting rim on all four edges, a specular gloss, and
 *  a deep lift shadow. backdrop-filter is kept for real content passing beneath.
 *
 *  Same DOM as v3.12.0 (all wiring ids preserved) — classes .hero--v4 / .dgh--v4.
 * ================================================================================== */

/* ---- the pane ---- */
html.dm-on .dm .hero--v4 {
  position: relative; z-index: 15; overflow: hidden; border: 0;
  margin: 10px 0 0; border-radius: 30px; padding: 0;
  background:
    radial-gradient(128% 98% at 93% -22%, rgba(104,120,255,.30), transparent 58%),
    radial-gradient(108% 88% at 0% 114%, rgba(120,138,255,.18), transparent 62%),
    linear-gradient(180deg, rgba(252,253,255,.90) 0%, rgba(239,243,254,.80) 54%, rgba(227,233,252,.76) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(72,90,164,.13),
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -1.5px 0 rgba(255,255,255,.55),
    0 8px 18px -14px rgba(26,38,98,.30),
    0 36px 66px -30px rgba(26,38,98,.50);
  -webkit-backdrop-filter: blur(34px) saturate(200%);
          backdrop-filter: blur(34px) saturate(200%);
}
html[data-theme="dark"].dm-on .dm .hero--v4 {
  background:
    radial-gradient(128% 98% at 93% -22%, rgba(130,150,255,.40), transparent 58%),
    radial-gradient(108% 88% at 0% 114%, rgba(112,132,255,.17), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.06) 54%, rgba(255,255,255,.042) 100%),
    linear-gradient(180deg, rgba(9,10,16,.56), rgba(4,5,9,.66));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.105),
    inset 0 1.5px 0 rgba(255,255,255,.24),
    inset 0 -1.5px 0 rgba(255,255,255,.07),
    0 12px 26px -18px rgba(0,0,0,.85),
    0 38px 72px -32px rgba(0,0,0,1);
}
html.dm-on .dm .hero--v4::before, html.dm-on .dm .hero--v4::after { display: none; }

/* ---- the specular gloss: a single swept highlight off the top-left corner, the way
       light lands on a real lens. Real element — .hero::before/::after are spent. ---- */
html.dm-on .hero--v4 .dgh__sheen {
  position: absolute; inset: 1px; z-index: 0; pointer-events: none; border-radius: 29px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 18%),
    linear-gradient(116deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.12) 22%, rgba(255,255,255,0) 48%);
}
html[data-theme="dark"].dm-on .hero--v4 .dgh__sheen {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 22%),
    linear-gradient(116deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.035) 24%, rgba(255,255,255,0) 52%);
}

/* ---- the light field under the frost. This is what the blur has to work on, and it
       is what stops the pane reading as grey. Day-part tints it: warm at dawn, cool
       at midnight — a whisper, never a wash. ---- */
html.dm-on .hero--v4 .dgh__bloom {
  position: absolute; inset: -34% -18% auto -18%; height: 84%; z-index: 0; pointer-events: none;
  border-radius: 50%; filter: blur(32px); opacity: .9;
}
html.dm-on .hero--v4.tod-morning   .dgh__bloom { background: radial-gradient(52% 62% at 76% 64%, rgba(255,186,104,.25), transparent 70%); }
html.dm-on .hero--v4.tod-afternoon .dgh__bloom { background: radial-gradient(52% 62% at 76% 64%, rgba(255,205,142,.21), transparent 70%); }
html.dm-on .hero--v4.tod-evening   .dgh__bloom { background: radial-gradient(52% 62% at 76% 64%, rgba(255,158,126,.23), transparent 70%); }
html.dm-on .hero--v4.tod-night     .dgh__bloom { background: radial-gradient(52% 62% at 76% 64%, rgba(126,146,255,.28), transparent 70%); }
html[data-theme="dark"].dm-on .hero--v4.tod-morning   .dgh__bloom { background: radial-gradient(52% 62% at 76% 64%, rgba(255,186,104,.20), transparent 70%); }
html[data-theme="dark"].dm-on .hero--v4.tod-afternoon .dgh__bloom { background: radial-gradient(52% 62% at 76% 64%, rgba(255,205,142,.16), transparent 70%); }
html[data-theme="dark"].dm-on .hero--v4.tod-evening   .dgh__bloom { background: radial-gradient(52% 62% at 76% 64%, rgba(255,150,118,.18), transparent 70%); }
html[data-theme="dark"].dm-on .hero--v4.tod-night     .dgh__bloom { background: radial-gradient(52% 62% at 76% 64%, rgba(126,146,255,.24), transparent 70%); }

html.dm-on .hero--v4 .dgh--v4 {
  position: relative; z-index: 1;
  margin: 0; padding: 17px 18px 15px; background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0;
}

/* ---- hairline token: one line weight for the whole brief, tuned to sit ON glass ---- */
html.dm-on .dgh--v4 { --dgh-hair: rgba(14,22,56,.11); --dgh-hair-v: rgba(14,22,56,.085); }
html[data-theme="dark"].dm-on .dgh--v4 { --dgh-hair: rgba(255,255,255,.14); --dgh-hair-v: rgba(255,255,255,.10); }

/* ---- row 1: live meta + weather jewel ---- */
html.dm-on .dgh--v4 .dgh__top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 9px;
}
html.dm-on .dgh--v4 .dgh__meta {
  margin: 0; min-width: 0; display: flex; align-items: center; gap: 6px;
  font: 550 12.5px/1 var(--font); letter-spacing: -.004em; color: #66718C;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme="dark"].dm-on .dgh--v4 .dgh__meta { color: #8892AE; }
html.dm-on .dgh--v4 .dgh__dp { width: 15px; height: 15px; flex: 0 0 auto; opacity: .98; }
html.dm-on .dgh--v4 .dgh__dot { margin: 0 1px; opacity: .42; }
html.dm-on .dgh--v4 #dgz-clock { font-variant-numeric: tabular-nums; font-weight: 680; color: #414C69; }
html[data-theme="dark"].dm-on .dgh--v4 #dgz-clock { color: #B3BCD6; }

/* the chip is a second, brighter pane of glass — a jewel sitting ON the pane */
html.dm-on .dgh--v4 .dgh__wx {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px 0 9px; border-radius: 999px; border: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.80));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.9),
    inset 0 1px 0 rgba(255,255,255,1),
    0 6px 14px -8px rgba(24,34,84,.40);
  transition: transform .18s cubic-bezier(.32,.72,0,1);
}
html[data-theme="dark"].dm-on .dgh--v4 .dgh__wx {
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.20);
}
html.dm-on .dgh--v4 .dgh__wx:active { transform: scale(.94); }
html.dm-on .dgh--v4 .dgh__wx i { font-size: 14.5px; color: #F0A32B; line-height: 1; }
html.dm-on .dgh--v4 .dgh__wx-t { font: 700 13.5px/1 var(--font-display); color: #1B2440; font-variant-numeric: tabular-nums; }
html[data-theme="dark"].dm-on .dgh--v4 .dgh__wx-t { color: #EEF2FB; }
html.dm-on .dgh--v4 .dgh__wx--wait { display: none; }

/* ---- row 2: the rotating smart line, a real large title (mechanism unchanged) ---- */
html.dm-on .dgh--v4 .dgh__t { position: relative; overflow: visible; min-height: 33px; }
html.dm-on .dgh--v4 .dgh__line {
  font: 800 30px/1.1 var(--font-display); letter-spacing: -.036em; color: #070C1A; margin: 0;
}
html[data-theme="dark"].dm-on .dgh--v4 .dgh__line { color: #F8FAFE; }

/* ---- row 3: the signal row — an editorial three-up, NO boxes on the glass ---- */
html.dm-on .dgh--v4 .dgh__sig {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin: 15px 0 0; padding: 13px 0 0; border-top: 1px solid var(--dgh-hair);
  background: none; border-radius: 0;
}
html.dm-on .dgh--v4 .dgh__cell {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 0 0 0 13px; border: 0; border-radius: 0; background: none; box-shadow: none;
}
html.dm-on .dgh--v4 .dgh__cell + .dgh__cell::before {
  content: ''; position: absolute; left: 0; top: 2px; bottom: 3px; width: 1px;
  background: var(--dgh-hair-v);
}
html.dm-on .dgh--v4 .dgh__cell:first-child { padding-left: 0; }
html.dm-on .dgh--v4 .dgh__ct {
  display: flex; align-items: center; gap: 4px;
  font: 650 9.5px/1 var(--font-display); letter-spacing: .11em; text-transform: uppercase; color: #8B95B0;
}
html[data-theme="dark"].dm-on .dgh--v4 .dgh__ct { color: #7B86A6; }
html.dm-on .dgh--v4 .dgh__ci { width: 11px; height: 11px; flex: 0 0 auto; opacity: .85; }
html.dm-on .dgh--v4 .dgh__cv {
  font: 750 20px/1.06 var(--font-display); letter-spacing: -.038em; color: #070C1A;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme="dark"].dm-on .dgh--v4 .dgh__cv { color: #F8FAFE; }
html.dm-on .dgh--v4 .dgh__cs {
  font: 500 11px/1.2 var(--font); color: #7F8AA4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme="dark"].dm-on .dgh--v4 .dgh__cs { color: #79849F; }
html.dm-on .dgh--v4 .dgh__cell.up   .dgh__cv { color: #0E7A52; }
html.dm-on .dgh--v4 .dgh__cell.down .dgh__cv { color: #C5271E; }
html[data-theme="dark"].dm-on .dgh--v4 .dgh__cell.up   .dgh__cv { color: #34D399; }
html[data-theme="dark"].dm-on .dgh--v4 .dgh__cell.down .dgh__cv { color: #FF6B63; }

/* ---- row 4: Next up — a native list row, not a pill ---- */
html.dm-on .dgh--v4 .dgh__next {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  margin: 12px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--dgh-hair);
  border-radius: 0; background: none; box-shadow: none; -webkit-appearance: none;
  transition: opacity .18s ease;
}
html[data-theme="dark"].dm-on .dgh--v4 .dgh__next { background: none; box-shadow: none; }
html.dm-on .dgh--v4 .dgh__next:active { transform: none; opacity: .55; }
html.dm-on .dgh--v4 .dgh__nxi {
  flex: 0 0 auto; width: 27px; height: 27px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #FFFFFF; background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 4px 10px -5px rgba(61,79,224,.85), inset 0 1px 0 rgba(255,255,255,.35);
}
html[data-theme="dark"].dm-on .dgh--v4 .dgh__nxi {
  color: #FFFFFF; background: linear-gradient(150deg, #7385FF, #4457E6);
  box-shadow: 0 4px 10px -5px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.28);
}
html.dm-on .dgh--v4 .dgh__nxi svg { width: 14px; height: 14px; }
html.dm-on .dgh--v4 .dgh__nxb { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
html.dm-on .dgh--v4 .dgh__nxk {
  font: 650 9.5px/1 var(--font-display); letter-spacing: .11em; text-transform: uppercase; color: #8B95B0;
}
html[data-theme="dark"].dm-on .dgh--v4 .dgh__nxk { color: #7B86A6; }
html.dm-on .dgh--v4 .dgh__nxt {
  font: 500 13.5px/1.25 var(--font); color: #66718C;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme="dark"].dm-on .dgh--v4 .dgh__nxt { color: #A3AECA; }
html.dm-on .dgh--v4 .dgh__nxt b { font-weight: 700; color: #0B1226; }
html[data-theme="dark"].dm-on .dgh--v4 .dgh__nxt b { color: #F4F6FC; }
html.dm-on .dgh--v4 .dgh__nxc { flex: 0 0 auto; width: 15px; height: 15px; color: #AEB6C8; }
html[data-theme="dark"].dm-on .dgh--v4 .dgh__nxc { color: #626D89; }

/* ==================================================================================
 *  v3.13.0 — MONTH RAIL: "Precision Rail" + the PHANTOM SCROLL fix (JS side is in
 *  dashboard.js: centreRail / railPlace / mountMobile).
 *  The rail becomes a full-bleed instrument band: a recessed track that runs the whole
 *  width of the slab (no side margins, no tray inset), a ruler-even month rhythm, and a
 *  slimmer solid indigo capsule. Months dissolve into the edges over a long gradient
 *  instead of being chopped by a hard mask.
 *  Classes: .dm__tl--v7 / .mrail--v7
 * ================================================================================== */

/* the band: full bleed, recessed, hairline-separated from the identity row */
/* the band carries the recess AND the bottom padding, so the track runs all the way to
   the slab's bottom edge instead of stopping short above a lighter strip.
   ⚠ NO BORDER, NO HAIRLINE. The owner rejected the divider — but simply deleting it
   leaves a hard step in the recess, which the eye reads as a line anyway (Mach band,
   see v3.12.3). The recess therefore RAMPS IN over ~22px on 1 − smoothstep-shaped stops,
   so there is no derivative corner anywhere down the profile for the eye to catch. */
html.dm-on .hdr--v7 .hdr__rail {
  position: relative; padding: 9px 0 10px; border-radius: 0 0 25px 25px; border: 0;
  background: linear-gradient(180deg,
    rgba(18,26,62,0) 0px,
    rgba(18,26,62,0.0016) 4px,
    rgba(18,26,62,0.0058) 9px,
    rgba(18,26,62,0.0119) 13px,
    rgba(18,26,62,0.0192) 18px,
    rgba(18,26,62,0.0268) 22px,
    rgba(18,26,62,0.0341) 27px,
    rgba(18,26,62,0.0402) 31px,
    rgba(18,26,62,0.0444) 36px,
    rgba(18,26,62,0.046) 40px,
    rgba(18,26,62,0.0413) 68%,
    rgba(18,26,62,0.031) 79%,
    rgba(18,26,62,0.0207) 90%,
    rgba(18,26,62,0.016) 100%);
}
html[data-theme="dark"].dm-on .hdr--v7 .hdr__rail {
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0.0137) 4px,
    rgba(0,0,0,0.0505) 9px,
    rgba(0,0,0,0.1037) 13px,
    rgba(0,0,0,0.1668) 18px,
    rgba(0,0,0,0.2332) 22px,
    rgba(0,0,0,0.2963) 27px,
    rgba(0,0,0,0.3495) 31px,
    rgba(0,0,0,0.3863) 36px,
    rgba(0,0,0,0.4) 40px,
    rgba(0,0,0,0.3594) 68%,
    rgba(0,0,0,0.27) 79%,
    rgba(0,0,0,0.1806) 90%,
    rgba(0,0,0,0.14) 100%);
}
html.dm-on .hdr--v7 .dm__tl--v7 {
  position: relative; padding: 0; margin: 0; border: 0; box-shadow: none; background: none;
}
html.dm-on .hdr--v7 .dm__tl--v7::before { display: none; }

/* the scroller: edge to edge, long soft dissolves so months fade rather than get cut */
html.dm-on .hdr--v7 .mrail--v7 {
  position: relative; display: flex; align-items: center; gap: 0;
  margin: 0; padding: 3px 12px 5px; border: 0; border-radius: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  overflow-x: auto; overflow-y: hidden;
  scroll-behavior: auto;
  scroll-snap-type: x proximity; scroll-padding-inline: 12px;
  overscroll-behavior-x: contain; touch-action: pan-x;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg,
      rgba(0,0,0,0) 0, rgba(0,0,0,.28) 14px, rgba(0,0,0,.86) 44px, #000 72px,
      #000 calc(100% - 72px), rgba(0,0,0,.86) calc(100% - 44px), rgba(0,0,0,.28) calc(100% - 14px), rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(90deg,
      rgba(0,0,0,0) 0, rgba(0,0,0,.28) 14px, rgba(0,0,0,.86) 44px, #000 72px,
      #000 calc(100% - 72px), rgba(0,0,0,.86) calc(100% - 44px), rgba(0,0,0,.28) calc(100% - 14px), rgba(0,0,0,0) 100%);
}
html.dm-on .hdr--v7 .mrail--v7::-webkit-scrollbar { display: none; }

/* the capsule — slimmer than v6, still ONE solid block of indigo (v3.12.5's finding) */
html.dm-on .hdr--v7 .mrail--v7 .mrail__pill {
  position: absolute; left: 0; top: 3px; bottom: auto; width: 0; height: 44px; z-index: 1; border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #6474FF 0%, #4B5CEC 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 1px 2px rgba(20,30,90,.20),
    0 6px 14px -9px rgba(61,79,224,.55);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: transform .5s cubic-bezier(.32,.94,.34,1), width .5s cubic-bezier(.32,.94,.34,1);
  will-change: transform, width;
}
html.dm-on .hdr--v7 .mrail--v7 .mrail__pill::after { display: none; }
html[data-theme="dark"].dm-on .hdr--v7 .mrail--v7 .mrail__pill {
  background: linear-gradient(180deg, #6C7BFF 0%, #4B5BEE 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 5px 14px -10px rgba(90,110,255,.45);
}
@media (prefers-reduced-motion: reduce) {
  html.dm-on .hdr--v7 .mrail--v7 .mrail__pill { transition: transform .2s, width .2s; }
}

/* chips — a ruler-even rhythm: every month is the same width, so the strip reads as one
   continuous instrument rather than a row of loose buttons */
html.dm-on .hdr--v7 .mrail--v7 .mrail__chip {
  position: relative; z-index: 2; flex: 0 0 auto;
  height: 44px; min-width: 64px; width: 64px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; box-shadow: none; border-radius: 999px;
  scroll-snap-align: center; cursor: pointer;
  transition: opacity .3s ease;
}
html.dm-on .hdr--v7 .mrail--v7 .mrail__chip::before { display: none; }
html.dm-on .hdr--v7 .mrail--v7 .mrail__hd {
  display: flex; align-items: center; gap: 5px;
  transition: transform .34s cubic-bezier(.32,.94,.34,1);
}
html.dm-on .hdr--v7 .mrail--v7 .mrail__lbl {
  font: 650 12.5px/1 var(--font-display); letter-spacing: .045em; color: #7A849F;
  transition: color .3s ease;
}
html[data-theme="dark"].dm-on .hdr--v7 .mrail--v7 .mrail__lbl { color: #838EAF; }
html.dm-on .hdr--v7 .mrail--v7 .mrail__chip.is-future { opacity: .40; }
html.dm-on .hdr--v7 .mrail--v7 .mrail__chip[aria-selected="true"] { opacity: 1; }
html.dm-on .hdr--v7 .mrail--v7 .mrail__chip[aria-selected="true"] .mrail__hd { transform: translateY(-5px); }
html.dm-on .hdr--v7 .mrail--v7 .mrail__chip[aria-selected="true"] .mrail__lbl,
html[data-theme="dark"].dm-on .hdr--v7 .mrail--v7 .mrail__chip[aria-selected="true"] .mrail__lbl {
  color: #FFFFFF; font-weight: 750; text-shadow: 0 1px 2px rgba(16,24,78,.30);
}

/* the year — still printed ONCE, inside the capsule, absolutely positioned so revealing
   it costs no layout and never changes a chip's width */
html.dm-on .hdr--v7 .mrail--v7 .mrail__yv {
  position: absolute; left: 0; right: 0; bottom: 7px; text-align: center;
  font: 600 8.5px/1 var(--font); letter-spacing: .06em;
  color: rgba(255,255,255,.82);
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .3s ease, transform .34s cubic-bezier(.32,.94,.34,1);
}
html.dm-on .hdr--v7 .mrail--v7 .mrail__chip[aria-selected="true"] .mrail__yv { opacity: 1; transform: none; }

/* today — an inline leading dot; exactly one chip ever carries it */
html.dm-on .hdr--v7 .mrail--v7 .mrail__now {
  position: static; flex: 0 0 auto; transform: none;
  width: 4.5px; height: 4.5px; border-radius: 50%; background: #FF3B30;
  box-shadow: 0 0 0 2.5px rgba(255,59,48,.15);
}
html.dm-on .hdr--v7 .mrail--v7 .mrail__chip[aria-selected="true"] .mrail__now {
  background: #FFFFFF; box-shadow: 0 0 0 2.5px rgba(255,255,255,.26);
}
html[data-theme="dark"].dm-on .hdr--v7 .mrail--v7 .mrail__now {
  background: #FF453A; box-shadow: 0 0 0 2.5px rgba(255,69,58,.20);
}

/* ==================================================================================
 *  v3.13.2 — TOP SEAM: BELT AND BRACES ON THE NOTCH CAP.
 *
 *  v3.12.2 fixed the seam by ORDERING two pseudo-elements: the specular sweep at
 *  z-index 0, the opaque notch cap at z-index 1. That is correct, and it was also the
 *  ENTIRE defence — one stray `z-index` on `.hdr--v7::after` and rgba(255,255,255,.07)
 *  lands back on the page's first pixel row: #111111 in dark against a #000000 status
 *  bar. That is the exact value measured off the owner's phone (17,17,17).
 *
 *  So the sweep is now ALSO clipped out of the region the cap paints opaque. Ordering
 *  and clipping each fix it alone; breaking one cannot resurface the seam.
 *
 *  WHY clip-path AND NOT mask-image: both work, but `mask-image` pushes the header onto
 *  a different compositing path, which perturbs the HERO's backdrop-filter below it
 *  (measured: 8291 subpixels, max 6/255). `clip-path` does not — with it the header
 *  region is pixel-identical to v3.13.1 (0 differing subpixels, both themes) and the
 *  only residual anywhere on screen is the animated gold sweep's phase.
 *
 *  The clip starts exactly where the cap stops being FULLY opaque (sa+6px light,
 *  sa+8px dark), so nothing below that point changes. Do not extend it further down
 *  "to be safe": past the opaque run the cap is translucent BY DESIGN, and clipping
 *  there would dim the sweep for real.
 *
 *  Guard: preview/seam.test.js re-runs this with the z-index defence deliberately
 *  broken and asserts the top rows are still #000000.
 * ================================================================================== */
html.dm-on .hdr--v7::after {
  -webkit-clip-path: inset(calc(var(--sa-top) + 6px) 0 0 0);
          clip-path: inset(calc(var(--sa-top) + 6px) 0 0 0);
}
html[data-theme="dark"].dm-on .hdr--v7::after {
  -webkit-clip-path: inset(calc(var(--sa-top) + 8px) 0 0 0);
          clip-path: inset(calc(var(--sa-top) + 8px) 0 0 0);
}

/* ==================================================================================
 *  v3.14.0 — INVOICE LIST: the Settings language.
 *  The list adopts the Settings language the owner approved: a bare large title on the
 *  page (no header bar), section eyebrows, and INSET GROUPED CARDS with hairlines that
 *  start past the glyph tile. The six floating cards become one ledger.
 *  Root: .ivl  (mirrors .setv-* structure, invoice-specific names)
 * ================================================================================== */

html.dm-on .ivl {
  padding: calc(var(--sat, 0px) + 6px) var(--m-gutter) calc(150px + var(--sab, 0px));
  display: flex; flex-direction: column; min-height: 100%;
}

/* ---- large title + one trailing action, iOS large-title rhythm ---- */
html.dm-on .ivl__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px 14px;
}
html.dm-on .ivl__title {
  margin: 0; font: 800 30px/1.05 var(--font-display); letter-spacing: -.03em; color: var(--m-ink);
}
html.dm-on .ivl__act {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--m-ink-2); font-size: 16px;
  background: rgba(11,18,38,.05); box-shadow: inset 0 0 0 1px rgba(11,18,38,.05);
}
html[data-theme="dark"].dm-on .ivl__act {
  color: #C3CBE2; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}

/* ---- search: an iOS inset field, not a floating pill ---- */
html.dm-on .ivl__search { position: relative; margin: 0 0 12px; }
html.dm-on .ivl__search i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 14.5px; color: #8B95AE; pointer-events: none;
}
html.dm-on .ivl__search input {
  width: 100%; height: 38px; padding: 0 12px 0 34px; border: 0; border-radius: 12px;
  font: 500 15px/1 var(--font); color: var(--m-ink);
  background: rgba(11,18,38,.05); box-shadow: inset 0 0 0 1px rgba(11,18,38,.04);
  -webkit-appearance: none;
}
html.dm-on .ivl__search input::placeholder { color: #98A1B8; }
html[data-theme="dark"].dm-on .ivl__search input {
  color: #F2F5FC; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
html[data-theme="dark"].dm-on .ivl__search input::placeholder { color: #79839E; }

/* ---- filter rail: scrolling pills, the iOS category-chip pattern ---- */
html.dm-on .ivl__rail {
  display: flex; gap: 7px; overflow-x: auto; margin: 0 calc(var(--m-gutter) * -1) 16px;
  padding: 2px var(--m-gutter) 4px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 16px, #000 calc(100% - 40px), rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 16px, #000 calc(100% - 40px), rgba(0,0,0,0) 100%);
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
html.dm-on .ivl__rail::-webkit-scrollbar { display: none; }
html.dm-on .ivl__chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border: 0; border-radius: 999px; scroll-snap-align: center;
  font: 650 13px/1 var(--font-display); letter-spacing: -.01em; color: var(--m-ink-2);
  background: rgba(11,18,38,.05); box-shadow: inset 0 0 0 1px rgba(11,18,38,.04);
  transition: background .2s ease, color .2s ease;
}
html[data-theme="dark"].dm-on .ivl__chip {
  color: #AEB7CE; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
html.dm-on .ivl__chip .n {
  font: 700 11px/1 var(--font-display); font-variant-numeric: tabular-nums;
  padding: 3px 6px; border-radius: 999px; background: rgba(11,18,38,.07); color: #6B7690;
}
html[data-theme="dark"].dm-on .ivl__chip .n { background: rgba(255,255,255,.09); color: #9AA4BE; }
html.dm-on .ivl__chip.is-on {
  color: #FFFFFF; background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 5px 12px -7px rgba(61,79,224,.85), inset 0 1px 0 rgba(255,255,255,.22);
}
html.dm-on .ivl__chip.is-on .n { background: rgba(255,255,255,.24); color: #FFFFFF; }

/* ---- the hero: ONE honest figure. Outstanding, never mixed with invoiced totals. ---- */
html.dm-on .ivl-hero {
  position: relative; overflow: hidden; border: 0; width: 100%; text-align: left;
  border-radius: 22px; padding: 15px 17px 15px; margin: 0 0 20px;
  display: flex; flex-direction: column; gap: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,248,255,.90));
  box-shadow: inset 0 0 0 1px rgba(72,90,164,.10), inset 0 1.5px 0 rgba(255,255,255,1),
              0 10px 26px -20px rgba(26,38,98,.42);
}
html[data-theme="dark"].dm-on .ivl-hero {
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.038));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1.5px 0 rgba(255,255,255,.16);
}
html.dm-on .ivl-hero__glow {
  position: absolute; inset: -60% -20% auto -20%; height: 120%; pointer-events: none;
  border-radius: 50%; filter: blur(34px);
  background: radial-gradient(50% 60% at 78% 62%, rgba(104,120,255,.20), transparent 70%);
}
html[data-theme="dark"].dm-on .ivl-hero__glow {
  background: radial-gradient(50% 60% at 78% 62%, rgba(128,148,255,.26), transparent 70%);
}
html.dm-on .ivl-hero__lbl {
  position: relative; font: 650 9.5px/1 var(--font-display); letter-spacing: .12em;
  text-transform: uppercase; color: #8B95B0;
}
html[data-theme="dark"].dm-on .ivl-hero__lbl { color: #7B86A6; }
html.dm-on .ivl-hero__val {
  position: relative; font: 750 33px/1.06 var(--font-display); letter-spacing: -.04em;
  color: var(--m-ink); font-variant-numeric: tabular-nums;
}
html.dm-on .ivl-hero__cap { position: relative; font: 500 13px/1.3 var(--font); color: #6B7690; }
html[data-theme="dark"].dm-on .ivl-hero__cap { color: #98A2BC; }
html.dm-on .ivl-hero__nudge {
  position: relative; align-self: stretch; margin: 13px 0 0; border: 0;
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 10px 0 11px; border-radius: 12px;
  font: 650 12.5px/1 var(--font-display); color: #C5271E;
  background: rgba(197,39,30,.09); box-shadow: inset 0 0 0 1px rgba(197,39,30,.13);
}
html[data-theme="dark"].dm-on .ivl-hero__nudge {
  color: #FF8078; background: rgba(255,107,99,.12); box-shadow: inset 0 0 0 1px rgba(255,107,99,.16);
}
html.dm-on .ivl-hero__nudge i { font-size: 12.5px; }
html.dm-on .ivl-hero__nudge .go { margin-left: auto; font-size: 11.5px; opacity: .75; }

/* ---- section eyebrow + total, exactly the Settings .setv-sec rhythm ---- */
html.dm-on .ivl-sec {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 0 4px 8px; margin: 0;
  font: 700 11px/1 var(--font-display); letter-spacing: .10em; text-transform: uppercase; color: #8B95B0;
}
html[data-theme="dark"].dm-on .ivl-sec { color: #7B86A6; }
html.dm-on .ivl-sec b {
  font: 700 11px/1 var(--font-display); letter-spacing: .04em; color: #6B7690;
  font-variant-numeric: tabular-nums;
}
html[data-theme="dark"].dm-on .ivl-sec b { color: #98A2BC; }

/* ---- the grouped card: one ledger, hairlines inset past the tile ---- */
html.dm-on .ivl-grp {
  border-radius: 22px; overflow: hidden; margin: 0 0 20px;
  background: #FCFDFF;
  box-shadow: inset 0 0 0 1px rgba(72,90,164,.09), 0 8px 22px -18px rgba(26,38,98,.38);
}
html[data-theme="dark"].dm-on .ivl-grp {
  background: #131519;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
/* The row IS the .swipe primitive (js/ui native swipeable + iqAttach long-press bind to
   it), so the article stays the clipping container and .swipe__body stays the moving,
   OPAQUE layer — a translucent body would show the Send/WhatsApp actions through it. */
html.dm-on .ivl-row { position: relative; overflow: hidden; }
html.dm-on .ivl-row .swipe__body {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border: 0; text-align: left;
  background: #FCFDFF;
}
html[data-theme="dark"].dm-on .ivl-row .swipe__body { background: #131519; }
html.dm-on .ivl-row + .ivl-row .swipe__body::before {
  content: ''; position: absolute; left: 66px; right: 0; top: 0; height: 1px;
  background: rgba(14,22,56,.09);
}
html[data-theme="dark"].dm-on .ivl-row + .ivl-row .swipe__body::before { background: rgba(255,255,255,.09); }
html.dm-on .ivl-row .swipe__body:active { background: #F4F6FC; }
html[data-theme="dark"].dm-on .ivl-row .swipe__body:active { background: #1A1D23; }
html.dm-on .ivl-row .swipe__act { width: 76px; }

/* the glyph tile — soft pastel fill + saturated glyph, the Settings k-* treatment */
html.dm-on .ivl-row__ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
}
html.dm-on .ivl-row__ic.t-late  { background: rgba(197,39,30,.10);  color: #C5271E; }
html.dm-on .ivl-row__ic.t-due   { background: rgba(245,170,40,.16); color: #B67912; }
html.dm-on .ivl-row__ic.t-paid  { background: rgba(14,122,82,.11);  color: #0E7A52; }
html.dm-on .ivl-row__ic.t-draft { background: rgba(75,99,255,.10);  color: #4B63FF; }
html[data-theme="dark"].dm-on .ivl-row__ic.t-late  { background: rgba(255,107,99,.14); color: #FF8078; }
html[data-theme="dark"].dm-on .ivl-row__ic.t-due   { background: rgba(245,184,74,.14); color: #F5B84A; }
html[data-theme="dark"].dm-on .ivl-row__ic.t-paid  { background: rgba(52,211,153,.13); color: #34D399; }
html[data-theme="dark"].dm-on .ivl-row__ic.t-draft { background: rgba(147,162,255,.14); color: #93A2FF; }

html.dm-on .ivl-row__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.dm-on .ivl-row__who {
  font: 650 15px/1.2 var(--font-display); letter-spacing: -.015em; color: var(--m-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.dm-on .ivl-row__sub {
  font: 500 12px/1.25 var(--font); color: #8B95AE;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme="dark"].dm-on .ivl-row__sub { color: #79849F; }
html.dm-on .ivl-row__sub .no { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11.5px; letter-spacing: -.01em; }

html.dm-on .ivl-row__r { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
html.dm-on .ivl-row__amt {
  font: 700 15.5px/1 var(--font-display); letter-spacing: -.03em; color: var(--m-ink);
  font-variant-numeric: tabular-nums;
}
html.dm-on .ivl-row__st { font: 650 11px/1 var(--font-display); letter-spacing: .01em; }
html.dm-on .ivl-row__st.t-late  { color: #C5271E; }
html.dm-on .ivl-row__st.t-due   { color: #B67912; }
html.dm-on .ivl-row__st.t-paid  { color: #0E7A52; }
html.dm-on .ivl-row__st.t-draft { color: #7C86A2; }
html[data-theme="dark"].dm-on .ivl-row__st.t-late  { color: #FF8078; }
html[data-theme="dark"].dm-on .ivl-row__st.t-due   { color: #F5B84A; }
html[data-theme="dark"].dm-on .ivl-row__st.t-paid  { color: #34D399; }
html[data-theme="dark"].dm-on .ivl-row__st.t-draft { color: #79849F; }

html.dm-on .ivl-row__chev { flex: 0 0 auto; font-size: 12.5px; color: #B9C0D0; margin-left: -2px; }
html[data-theme="dark"].dm-on .ivl-row__chev { color: #5A6480; }

html.dm-on .ivl-foot {
  text-align: center; margin: 4px 0 0;
  font: 500 12px/1.3 var(--font); color: #98A1B8;
}
html[data-theme="dark"].dm-on .ivl-foot { color: #6B7590; }

/* the scroll region + the search clear button, which the shipped shell emits and the
   preview candidate did not. .ivl already owns the page padding, so the body is plain. */
html.dm-on .ivl__body { display: block; }
html.dm-on .ivl__searchx {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border: 0; border-radius: 50%; background: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; color: #A6AFC4;
}
html[data-theme="dark"].dm-on .ivl__searchx { color: #6B7590; }
html.dm-on .ivl__chip.is-empty { opacity: .5; }
html.dm-on .ivl-hero.sk, html.dm-on .ivl-grp.sk { box-shadow: none; }

/* ==================================================================================
 *  v3.15.0 — INVOICE LIST, second pass: TYPE on the tile, STATUS on the pip.
 *  Appended (never edited in place) so the cascade decides — see §4.7 scoping rule.
 *  Three changes carry the weight:
 *    · the glyph tile now says WHAT the invoice is for (truck / parking / machinery)
 *      and the status rides it as a corner pip, so no two states look alike;
 *    · the hero gains a collected / due / late bar under the headline figure;
 *    · a collapsing top bar, because the rows used to scroll under the Dynamic Island
 *      with nothing behind them.
 *  DRAFT MOVES OFF INDIGO. §4.7 reserves indigo for navigation and interactive
 *  elements; a draft is neither. It is slate now, and cancelled is a quieter slate.
 * ================================================================================== */

/* ---- hero: the collection bar + its legend --------------------------------------- */
html.dm-on .ivl-hero { padding: 15px 17px 14px; gap: 2px; }
html.dm-on .ivl-hero__val { font-size: 34px; }

html.dm-on .iv3-bar { position: relative; display: flex; gap: 3px; height: 7px; margin: 12px 0 9px; }
html.dm-on .iv3-bar__s { border-radius: 999px; min-width: 6px; }
html.dm-on .iv3-bar__s.s-paid { background: linear-gradient(90deg, #17A06C, #0E7A52); }
html.dm-on .iv3-bar__s.s-due  { background: linear-gradient(90deg, #E7A426, #B67912); }
html.dm-on .iv3-bar__s.s-late { background: linear-gradient(90deg, #DE4034, #C5271E); }
html[data-theme="dark"].dm-on .iv3-bar__s.s-paid { background: linear-gradient(90deg, #34D399, #12A06E); }
html[data-theme="dark"].dm-on .iv3-bar__s.s-due  { background: linear-gradient(90deg, #F5B84A, #D9911F); }
html[data-theme="dark"].dm-on .iv3-bar__s.s-late { background: linear-gradient(90deg, #FF8078, #E2554C); }

html.dm-on .iv3-leg { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
html.dm-on .iv3-leg__i {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  font: 500 11px/1 var(--font); color: #7C86A0; white-space: nowrap;
}
html[data-theme="dark"].dm-on .iv3-leg__i { color: #8792AD; }
html.dm-on .iv3-leg__i b {
  font: 700 11.5px/1 var(--font-display); color: var(--m-ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
html.dm-on .iv3-leg__d { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
html.dm-on .iv3-leg__i.s-paid .iv3-leg__d { background: #0E7A52; }
html.dm-on .iv3-leg__i.s-due  .iv3-leg__d { background: #B67912; }
html.dm-on .iv3-leg__i.s-late .iv3-leg__d { background: #C5271E; }
html[data-theme="dark"].dm-on .iv3-leg__i.s-paid .iv3-leg__d { background: #34D399; }
html[data-theme="dark"].dm-on .iv3-leg__i.s-due  .iv3-leg__d { background: #F5B84A; }
html[data-theme="dark"].dm-on .iv3-leg__i.s-late .iv3-leg__d { background: #FF8078; }
html.dm-on .ivl-hero__nudge { margin-top: 12px; }

/* ---- section eyebrow: a count beside the title ---------------------------------- */
html.dm-on .ivl-sec .c {
  font: 700 10px/1 var(--font-display); letter-spacing: .04em; color: #A3ACC2; padding-left: 6px;
}
html[data-theme="dark"].dm-on .ivl-sec .c { color: #6E7893; }

/* ---- the tile: TYPE glyph, STATUS pip ------------------------------------------- */
html.dm-on .ivl-row__ic { position: relative; overflow: visible; }
html.dm-on .ivl-row__ic.t-part  { background: rgba(245,170,40,.16); color: #B67912; }
html.dm-on .ivl-row__ic.t-draft { background: rgba(100,116,139,.12); color: #5B6779; }
html.dm-on .ivl-row__ic.t-void  { background: rgba(100,116,139,.10); color: #7C879B; }
html[data-theme="dark"].dm-on .ivl-row__ic.t-part  { background: rgba(245,184,74,.14); color: #F5B84A; }
html[data-theme="dark"].dm-on .ivl-row__ic.t-draft { background: rgba(148,163,184,.14); color: #A8B3C8; }
html[data-theme="dark"].dm-on .ivl-row__ic.t-void  { background: rgba(148,163,184,.10); color: #78849A; }

html.dm-on .ivl-row__pip {
  position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8.5px; color: #FFFFFF; box-shadow: 0 0 0 2px #FCFDFF;
}
html[data-theme="dark"].dm-on .ivl-row__pip { box-shadow: 0 0 0 2px #131519; }
html.dm-on .t-late  .ivl-row__pip { background: #C5271E; }
html.dm-on .t-due   .ivl-row__pip { background: #B67912; }
html.dm-on .t-part  .ivl-row__pip { background: #B67912; }
html.dm-on .t-paid  .ivl-row__pip { background: #0E7A52; }
html.dm-on .t-draft .ivl-row__pip { background: #7A8699; }
html.dm-on .t-void  .ivl-row__pip { background: #9AA4B6; }
html[data-theme="dark"].dm-on .t-late  .ivl-row__pip { background: #FF6B63; color: #1A0B0A; }
html[data-theme="dark"].dm-on .t-due   .ivl-row__pip { background: #F5B84A; color: #1E1405; }
html[data-theme="dark"].dm-on .t-part  .ivl-row__pip { background: #F5B84A; color: #1E1405; }
html[data-theme="dark"].dm-on .t-paid  .ivl-row__pip { background: #34D399; color: #04170F; }
html[data-theme="dark"].dm-on .t-draft .ivl-row__pip { background: #94A3B8; color: #10151E; }
html[data-theme="dark"].dm-on .t-void  .ivl-row__pip { background: #6B7688; color: #10151E; }

/* ---- the sub-line and the WHEN line --------------------------------------------- */
html.dm-on .ivl-row__sub .ty { font-weight: 600; color: #7B86A0; }
html[data-theme="dark"].dm-on .ivl-row__sub .ty { color: #8A94AE; }
html.dm-on .ivl-row__st { font-size: 11.5px; letter-spacing: -.005em; }
html.dm-on .ivl-row__st.t-part { color: #B67912; }
html.dm-on .ivl-row__st.t-void { color: #98A1B5; }
html.dm-on .ivl-row__st.t-mut  { color: #9099AF; font-weight: 600; }
html[data-theme="dark"].dm-on .ivl-row__st.t-part { color: #F5B84A; }
html[data-theme="dark"].dm-on .ivl-row__st.t-void { color: #6E7893; }
html[data-theme="dark"].dm-on .ivl-row__st.t-mut  { color: #6E7893; }

/* Overdue rows carry a whisper of tone so the eye finds them without being shouted at.
   The row stays OPAQUE — the gradient is a layer ON a solid fill, never instead of it,
   or the swipe actions show through (see the v3.14.0 note above). */
html.dm-on .ivl-row.is-late .swipe__body {
  background: linear-gradient(90deg, rgba(197,39,30,.055), rgba(197,39,30,0) 62%), #FCFDFF;
}
html[data-theme="dark"].dm-on .ivl-row.is-late .swipe__body {
  background: linear-gradient(90deg, rgba(255,107,99,.075), rgba(255,107,99,0) 62%), #131519;
}
html.dm-on .ivl-row.is-paid .ivl-row__amt { color: #6C7791; font-weight: 650; }
html[data-theme="dark"].dm-on .ivl-row.is-paid .ivl-row__amt { color: #8A94AE; }
html.dm-on .ivl-row.is-cancelled .ivl-row__amt {
  color: #98A1B5; font-weight: 600; text-decoration: line-through; text-decoration-thickness: 1px;
}
html[data-theme="dark"].dm-on .ivl-row.is-cancelled .ivl-row__amt { color: #6E7893; }

/* ---- the collapsing top bar ------------------------------------------------------ */
html.dm-on .iv3-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: calc(env(safe-area-inset-top, 0px) + 46px);
  padding: env(safe-area-inset-top, 0px) 14px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 1px 0 rgba(14,22,56,.07);
  opacity: 0; transform: translate3d(0,-8px,0); pointer-events: none;
  transition: opacity .22s var(--ease, ease), transform .22s var(--ease, ease);
}
html[data-theme="dark"].dm-on .iv3-top {
  background: rgba(10,11,14,.72); box-shadow: 0 1px 0 rgba(255,255,255,.08);
}
html.dm-on .iv3-top.is-on { opacity: 1; transform: translate3d(0,0,0); pointer-events: auto; }
html.dm-on .iv3-top__b { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 0; }
html.dm-on .iv3-top__t { font: 700 16px/1 var(--font-display); letter-spacing: -.02em; color: var(--m-ink); }
html.dm-on .iv3-top__s {
  font: 600 11.5px/1 var(--font-display); color: #8B95B0; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62vw;
}
html[data-theme="dark"].dm-on .iv3-top__s { color: #8792AD; }
html.dm-on .iv3-top .ivl__act { width: 32px; height: 32px; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { html.dm-on .iv3-top { transition: none; } }

/* ==================================================================================
 *  v3.16.0 — INVOICE VIEW rebuilt in the Settings language. Root `.ivx--v3`.
 *  Appended, never edited in place (§4.7 scoping rule).
 *
 *  ⚠ THE BUG THIS CLOSES: v3.7.0 set `ivx-sheet--<tone>` on the SHEET, but the pill,
 *  its dot and the sub-line were NOT tone-driven — a 44-day-late invoice announced
 *  itself in INDIGO, the app's navigation colour. Here the tone lives on the hero root
 *  (`.ivx3-hero--late|due|part|paid|draft|void`) and every child reads from it. If you
 *  add a hero element, drive it from that class or you will reintroduce this.
 *
 *  ⚠ GOLD IS STILL THE MONEY COLOUR (§4.7) — the headline keeps the gold gradient for
 *  anything not late. Coral takes it over ONLY when the invoice is late, because gold
 *  on a 44-day-late balance reads celebratory. Owner approved both halves.
 * ================================================================================== */

/* `.ivx__scroll` is a flex column with a 14px gap and its own padding (both inside
   earlier blocks). The v3 scroll region owns its spacing, so neutralise them. */
html.dm-on .ivx--v3 .ivx3__scroll { display: block; }


html.dm-on .ivx--v3 {
  padding: 0; min-height: 100%;
}
html.dm-on .ivx3__scroll {
  padding: calc(var(--sat, 0px) + 6px) var(--m-gutter) calc(150px + var(--sab, 0px));
  min-height: 100%;
}

/* ---- the bare large title: back row, number, customer ---------------------------- */
html.dm-on .ivx3-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 2px 10px;
}
html.dm-on .ivx3-back {
  display: inline-flex; align-items: center; gap: 3px; border: 0; background: none; padding: 0;
  font: 600 15px/1 var(--font-display); letter-spacing: -.01em; color: #4B63FF;
}
html[data-theme="dark"].dm-on .ivx3-back { color: #93A2FF; }
html.dm-on .ivx3-back i { font-size: 17px; margin-left: -4px; }
html.dm-on .ivx3-act {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--m-ink-2); font-size: 16px;
  background: rgba(11,18,38,.05); box-shadow: inset 0 0 0 1px rgba(11,18,38,.05);
}
html[data-theme="dark"].dm-on .ivx3-act {
  color: #C3CBE2; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
html.dm-on .ivx3-head { padding: 0 2px 16px; }
html.dm-on .ivx3-head__t {
  margin: 0; font: 800 28px/1.05 var(--font-display); letter-spacing: -.03em; color: var(--m-ink);
  font-variant-numeric: tabular-nums;
}
html.dm-on .ivx3-head__s {
  margin: 5px 0 0; font: 500 14px/1.25 var(--font); color: #7C86A0;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
html[data-theme="dark"].dm-on .ivx3-head__s { color: #8792AD; }
html.dm-on .ivx3-head__s b { font-weight: 650; color: var(--m-ink-2); }
html[data-theme="dark"].dm-on .ivx3-head__s b { color: #C3CBE2; }

/* ---- hero card: the status, and the one figure that matters --------------------- */
html.dm-on .ivx3-hero {
  position: relative; overflow: hidden; border-radius: 22px; padding: 16px 17px 15px; margin: 0 0 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,248,255,.90));
  box-shadow: inset 0 0 0 1px rgba(72,90,164,.10), inset 0 1.5px 0 rgba(255,255,255,1),
              0 10px 26px -20px rgba(26,38,98,.42);
}
html[data-theme="dark"].dm-on .ivx3-hero {
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.038));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1.5px 0 rgba(255,255,255,.16);
}
html.dm-on .ivx3-hero__glow {
  position: absolute; inset: -70% -20% auto -20%; height: 130%; pointer-events: none;
  border-radius: 50%; filter: blur(36px);
}
html.dm-on .ivx3-hero--late .ivx3-hero__glow { background: radial-gradient(50% 60% at 76% 60%, rgba(217,58,47,.20), transparent 70%); }
html.dm-on .ivx3-hero--due  .ivx3-hero__glow { background: radial-gradient(50% 60% at 76% 60%, rgba(217,134,26,.20), transparent 70%); }
html.dm-on .ivx3-hero--part .ivx3-hero__glow { background: radial-gradient(50% 60% at 76% 60%, rgba(217,134,26,.20), transparent 70%); }
html.dm-on .ivx3-hero--paid .ivx3-hero__glow { background: radial-gradient(50% 60% at 76% 60%, rgba(18,160,110,.20), transparent 70%); }
html.dm-on .ivx3-hero--draft .ivx3-hero__glow,
html.dm-on .ivx3-hero--void  .ivx3-hero__glow { background: radial-gradient(50% 60% at 76% 60%, rgba(130,138,160,.16), transparent 70%); }

/* the status pill — TONE-DRIVEN, which is the bug this redesign closes */
html.dm-on .ivx3-pill {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 27px; padding: 0 11px 0 9px; border-radius: 999px;
  font: 700 12.5px/1 var(--font-display); letter-spacing: -.005em;
}
html.dm-on .ivx3-pill i { font-size: 11px; }
html.dm-on .ivx3-hero--late  .ivx3-pill { color: #C5271E; background: rgba(197,39,30,.10); box-shadow: inset 0 0 0 1px rgba(197,39,30,.16); }
html.dm-on .ivx3-hero--due   .ivx3-pill,
html.dm-on .ivx3-hero--part  .ivx3-pill { color: #B67912; background: rgba(245,170,40,.16); box-shadow: inset 0 0 0 1px rgba(182,121,18,.16); }
html.dm-on .ivx3-hero--paid  .ivx3-pill { color: #0E7A52; background: rgba(14,122,82,.11); box-shadow: inset 0 0 0 1px rgba(14,122,82,.16); }
html.dm-on .ivx3-hero--draft .ivx3-pill,
html.dm-on .ivx3-hero--void  .ivx3-pill { color: #5B6779; background: rgba(100,116,139,.12); box-shadow: inset 0 0 0 1px rgba(100,116,139,.16); }
html[data-theme="dark"].dm-on .ivx3-hero--late  .ivx3-pill { color: #FF8078; background: rgba(255,107,99,.14); box-shadow: inset 0 0 0 1px rgba(255,107,99,.18); }
html[data-theme="dark"].dm-on .ivx3-hero--due   .ivx3-pill,
html[data-theme="dark"].dm-on .ivx3-hero--part  .ivx3-pill { color: #F5B84A; background: rgba(245,184,74,.14); box-shadow: inset 0 0 0 1px rgba(245,184,74,.18); }
html[data-theme="dark"].dm-on .ivx3-hero--paid  .ivx3-pill { color: #34D399; background: rgba(52,211,153,.13); box-shadow: inset 0 0 0 1px rgba(52,211,153,.18); }
html[data-theme="dark"].dm-on .ivx3-hero--draft .ivx3-pill,
html[data-theme="dark"].dm-on .ivx3-hero--void  .ivx3-pill { color: #A8B3C8; background: rgba(148,163,184,.14); box-shadow: inset 0 0 0 1px rgba(148,163,184,.18); }

html.dm-on .ivx3-hero__cap {
  position: relative; display: block; margin: 13px 0 0;
  font: 650 9.5px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: #8B95B0;
}
html[data-theme="dark"].dm-on .ivx3-hero__cap { color: #7B86A6; }
html.dm-on .ivx3-hero__amt {
  position: relative; display: block; margin: 7px 0 0;
  font: 780 40px/1 var(--font-display); letter-spacing: -.045em; font-variant-numeric: tabular-nums;
  /* GOLD is the money colour (§4.7) and it stays for money that is not late. */
  background: linear-gradient(122deg, #E9CE86 0%, #C79A3C 52%, #9A6A18 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme="dark"].dm-on .ivx3-hero__amt {
  background: linear-gradient(122deg, #F3E2A8, #D6B26E 58%, #B98F3E);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* …but gold on a 44-day-late balance reads celebratory. Coral takes over when late. */
html.dm-on .ivx3-hero--late .ivx3-hero__amt { background: none; color: #C5271E; }
html[data-theme="dark"].dm-on .ivx3-hero--late .ivx3-hero__amt { background: none; color: #FF6B63; }

html.dm-on .ivx3-hero__sub {
  position: relative; display: block; margin: 8px 0 0;
  font: 600 13px/1.3 var(--font-display); color: #7C86A0;
}
html[data-theme="dark"].dm-on .ivx3-hero__sub { color: #8792AD; }
html.dm-on .ivx3-hero--late .ivx3-hero__sub { color: #C5271E; }
html[data-theme="dark"].dm-on .ivx3-hero--late .ivx3-hero__sub { color: #FF8078; }
html.dm-on .ivx3-hero--due .ivx3-hero__sub  { color: #B67912; }
html[data-theme="dark"].dm-on .ivx3-hero--due .ivx3-hero__sub { color: #F5B84A; }
html.dm-on .ivx3-hero--paid .ivx3-hero__sub { color: #0E7A52; }
html[data-theme="dark"].dm-on .ivx3-hero--paid .ivx3-hero__sub { color: #34D399; }

/* part-paid progress */
html.dm-on .ivx3-prog { position: relative; margin: 14px 0 0; }
html.dm-on .ivx3-prog__t { height: 6px; border-radius: 999px; background: rgba(11,18,38,.08); overflow: hidden; }
html[data-theme="dark"].dm-on .ivx3-prog__t { background: rgba(255,255,255,.10); }
html.dm-on .ivx3-prog__f { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #17A06C, #0E7A52); }
html[data-theme="dark"].dm-on .ivx3-prog__f { background: linear-gradient(90deg, #34D399, #12A06E); }
html.dm-on .ivx3-prog__l {
  display: flex; justify-content: space-between; margin: 7px 0 0;
  font: 500 11.5px/1 var(--font); color: #7C86A0;
}
html[data-theme="dark"].dm-on .ivx3-prog__l { color: #8792AD; }
html.dm-on .ivx3-prog__l b { font-weight: 700; color: var(--m-ink); font-variant-numeric: tabular-nums; }

/* the two quiet facts under the figure */
html.dm-on .ivx3-facts {
  position: relative; display: flex; gap: 8px; margin: 15px 0 0; padding: 13px 0 0;
  border-top: 1px solid rgba(14,22,56,.08);
}
html[data-theme="dark"].dm-on .ivx3-facts { border-top-color: rgba(255,255,255,.09); }
html.dm-on .ivx3-fact { flex: 1; min-width: 0; }
html.dm-on .ivx3-fact__k {
  display: block; font: 650 9.5px/1 var(--font-display); letter-spacing: .10em;
  text-transform: uppercase; color: #A3ACC2;
}
html[data-theme="dark"].dm-on .ivx3-fact__k { color: #6E7893; }
html.dm-on .ivx3-fact__v {
  display: block; margin: 5px 0 0; font: 650 13px/1.2 var(--font-display);
  color: var(--m-ink); letter-spacing: -.01em;
}

/* ---- section eyebrow, the Settings rhythm --------------------------------------- */
html.dm-on .ivx3-sec {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 0 4px 8px;
  font: 700 11px/1 var(--font-display); letter-spacing: .10em; text-transform: uppercase; color: #8B95B0;
}
html[data-theme="dark"].dm-on .ivx3-sec { color: #7B86A6; }
html.dm-on .ivx3-sec b {
  font: 700 11px/1 var(--font-display); letter-spacing: .04em; color: #6B7690; font-variant-numeric: tabular-nums;
}
html[data-theme="dark"].dm-on .ivx3-sec b { color: #98A2BC; }

/* ---- the grouped card ------------------------------------------------------------ */
html.dm-on .ivx3-grp {
  border-radius: 22px; overflow: hidden; margin: 0 0 22px; background: #FCFDFF;
  box-shadow: inset 0 0 0 1px rgba(72,90,164,.09), 0 8px 22px -18px rgba(26,38,98,.38);
}
html[data-theme="dark"].dm-on .ivx3-grp { background: #131519; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
html.dm-on .ivx3-row {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  width: 100%; border: 0; background: none; text-align: left;
}
html.dm-on .ivx3-row + .ivx3-row::before {
  content: ''; position: absolute; left: 66px; right: 0; top: 0; height: 1px; background: rgba(14,22,56,.09);
}
html[data-theme="dark"].dm-on .ivx3-row + .ivx3-row::before { background: rgba(255,255,255,.09); }
html.dm-on .ivx3-row__ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
  background: rgba(75,99,255,.09); color: #4B63FF;
}
html[data-theme="dark"].dm-on .ivx3-row__ic { background: rgba(147,162,255,.13); color: #93A2FF; }
html.dm-on .ivx3-row__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.dm-on .ivx3-row__t {
  font: 650 15px/1.25 var(--font-display); letter-spacing: -.015em; color: var(--m-ink);
}
html.dm-on .ivx3-row__s {
  font: 500 12px/1.3 var(--font); color: #8B95AE;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme="dark"].dm-on .ivx3-row__s { color: #79849F; }
html.dm-on .ivx3-row__amt {
  flex: 0 0 auto; font: 700 15px/1 var(--font-display); letter-spacing: -.03em;
  color: var(--m-ink); font-variant-numeric: tabular-nums;
}
html.dm-on .ivx3-row__chev { flex: 0 0 auto; font-size: 12.5px; color: #B9C0D0; }
html[data-theme="dark"].dm-on .ivx3-row__chev { color: #5A6480; }

/* billed-to header row: avatar + name */
html.dm-on .ivx3-who { display: flex; align-items: center; gap: 12px; padding: 14px 14px 13px; position: relative; }
html.dm-on .ivx--v3 .ivx-ava {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 750 15px/1 var(--font-display); letter-spacing: -.02em; color: #FFFFFF;
  background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 8px 18px -12px rgba(61,79,224,.9);
}
html.dm-on .ivx3-who__n { font: 700 16.5px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--m-ink); }
html.dm-on .ivx3-who__s { margin-top: 3px; font: 500 12.5px/1.2 var(--font); color: #8B95AE; }
html[data-theme="dark"].dm-on .ivx3-who__s { color: #79849F; }

/* line items */
html.dm-on .ivx3-item__q {
  font: 500 12px/1.3 var(--font); color: #8B95AE; font-variant-numeric: tabular-nums;
}
html[data-theme="dark"].dm-on .ivx3-item__q { color: #79849F; }
html.dm-on .ivx3-item__q .d { color: #A3ACC2; }
html[data-theme="dark"].dm-on .ivx3-item__q .d { color: #6E7893; }
html.dm-on .ivx3-row--item .ivx3-row__t { font-size: 14.5px; line-height: 1.3; white-space: normal; }
html.dm-on .ivx3-row--item .ivx3-row__ic.k-park { background: rgba(75,99,255,.09); color: #4B63FF; }
html[data-theme="dark"].dm-on .ivx3-row--item .ivx3-row__ic.k-park { background: rgba(147,162,255,.13); color: #93A2FF; }

/* totals */
html.dm-on .ivx3-tot { padding: 4px 16px 6px; }
html.dm-on .ivx3-tot__r {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0;
  font: 500 14px/1.2 var(--font); color: #6B7690; font-variant-numeric: tabular-nums;
}
html[data-theme="dark"].dm-on .ivx3-tot__r { color: #98A2BC; }
html.dm-on .ivx3-tot__r span:last-child { font-weight: 600; color: var(--m-ink-2); }
html[data-theme="dark"].dm-on .ivx3-tot__r span:last-child { color: #C3CBE2; }
html.dm-on .ivx3-tot__r--paid span:last-child { color: #0E7A52; }
html[data-theme="dark"].dm-on .ivx3-tot__r--paid span:last-child { color: #34D399; }
html.dm-on .ivx3-tot__r--grand {
  margin-top: 4px; padding: 13px 0 12px; border-top: 1px solid rgba(14,22,56,.09);
  font: 700 15px/1 var(--font-display); color: var(--m-ink);
}
html[data-theme="dark"].dm-on .ivx3-tot__r--grand { border-top-color: rgba(255,255,255,.09); }
html.dm-on .ivx3-tot__r--grand span:last-child {
  font: 780 20px/1 var(--font-display); letter-spacing: -.03em; color: var(--m-ink);
}
html.dm-on .ivx3-tot__r--grand.is-late span:last-child { color: #C5271E; }
html[data-theme="dark"].dm-on .ivx3-tot__r--grand.is-late span:last-child { color: #FF6B63; }

/* notes */
html.dm-on .ivx3-note {
  padding: 14px 16px; font: 500 13.5px/1.5 var(--font); color: #5F6B85;
}
html[data-theme="dark"].dm-on .ivx3-note { color: #A6B0C8; }

/* the timeline row set (issued / sent / due) */
html.dm-on .ivx3-tl { padding: 6px 16px 10px; }
html.dm-on .ivx3-tl__i { position: relative; display: flex; gap: 12px; padding: 9px 0 9px 2px; }
html.dm-on .ivx3-tl__d {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; margin-top: 4px;
  background: #C7CEDD; box-shadow: 0 0 0 3px rgba(199,206,221,.20);
}
html[data-theme="dark"].dm-on .ivx3-tl__d { background: #4A5570; box-shadow: 0 0 0 3px rgba(74,85,112,.22); }
html.dm-on .ivx3-tl__i.is-on .ivx3-tl__d { background: #0E7A52; box-shadow: 0 0 0 3px rgba(14,122,82,.16); }
html[data-theme="dark"].dm-on .ivx3-tl__i.is-on .ivx3-tl__d { background: #34D399; box-shadow: 0 0 0 3px rgba(52,211,153,.18); }
html.dm-on .ivx3-tl__i.is-late .ivx3-tl__d { background: #C5271E; box-shadow: 0 0 0 3px rgba(197,39,30,.16); }
html[data-theme="dark"].dm-on .ivx3-tl__i.is-late .ivx3-tl__d { background: #FF6B63; box-shadow: 0 0 0 3px rgba(255,107,99,.18); }
html.dm-on .ivx3-tl__i::before {
  content: ''; position: absolute; left: 6px; top: 17px; bottom: -4px; width: 1px; background: rgba(14,22,56,.10);
}
html[data-theme="dark"].dm-on .ivx3-tl__i::before { background: rgba(255,255,255,.10); }
html.dm-on .ivx3-tl__i:last-child::before { display: none; }
html.dm-on .ivx3-tl__t { font: 650 13.5px/1.2 var(--font-display); color: var(--m-ink); }
html.dm-on .ivx3-tl__s { margin-top: 2px; font: 500 12px/1.2 var(--font); color: #8B95AE; }
html[data-theme="dark"].dm-on .ivx3-tl__s { color: #79849F; }
html.dm-on .ivx3-tl__i.is-late .ivx3-tl__s { color: #C5271E; font-weight: 600; }
html[data-theme="dark"].dm-on .ivx3-tl__i.is-late .ivx3-tl__s { color: #FF8078; }

/* ---- the dock, with real clearance ---------------------------------------------- */
html.dm-on .ivx3-dock {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--sab, 0px)); z-index: 30;
  display: flex; align-items: center; gap: 8px; padding: 9px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.68));
  -webkit-backdrop-filter: blur(26px) saturate(185%); backdrop-filter: blur(26px) saturate(185%);
  box-shadow: 0 18px 40px -22px rgba(26,38,98,.5), inset 0 1px 0 rgba(255,255,255,.9),
              inset 0 0 0 1px rgba(72,90,164,.08);
}
html[data-theme="dark"].dm-on .ivx3-dock {
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
  box-shadow: 0 20px 46px -24px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.10),
              inset 0 0 0 1px rgba(255,255,255,.07);
}
html.dm-on .ivx3-dock__p {
  flex: 1; min-width: 0; height: 46px; border: 0; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 15px/1 var(--font-display); letter-spacing: -.01em; color: #FFFFFF;
  background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 10px 20px -12px rgba(61,79,224,.95), inset 0 1px 0 rgba(255,255,255,.22);
}
html.dm-on .ivx3-dock__c {
  flex: 0 0 auto; width: 46px; height: 46px; border: 0; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
  color: var(--m-ink-2); background: rgba(11,18,38,.05); box-shadow: inset 0 0 0 1px rgba(11,18,38,.05);
}
html[data-theme="dark"].dm-on .ivx3-dock__c {
  color: #C3CBE2; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
html.dm-on .ivx3-dock__c--wa { color: #0E7A52; }
html[data-theme="dark"].dm-on .ivx3-dock__c--wa { color: #34D399; }

/* the billed-to name block is a column, not two inline spans */
html.dm-on .ivx3-who__b { display: flex; flex-direction: column; min-width: 0; }
html.dm-on .ivx3-who__n, html.dm-on .ivx3-who__s { display: block; }

/* ==================================================================================
 *  v3.17.0 — INVOICE EDITOR (the 4-step wizard) in the Settings language. Root
 *  `.ive--v3`. Appended, never edited in place (§4.7 scoping rule).
 *  ⚠ SHARED phone + desktop (§4.8) — verify at 393px AND at desktop width. The desktop
 *  block at the end is not decoration: a viewport-centred action bar sits off-centre
 *  under the wizard once the app's sidebar is there, so it goes STICKY inside the column.
 *  ⚠ The wiring binds to `.ive__step`, `#inv-prog i`, `.ive__typeb` and `.status-pill`.
 *  Those class names are still on the elements alongside the `ive3-*` skin classes.
 *  Rename one and the wizard silently stops stepping.
 * ================================================================================== */


.ive--v3 {
  --ink: #0A1F44; --ink2: #4A5878; --ink3: #7C879C; --hair: rgba(14,22,56,.09);
  max-width: 620px; margin: 0 auto;
  /* ⚠ WAS 132px, WHICH WAS 132px OF DEAD SCROLL. That clearance is only needed under a
     `position: fixed` action bar. `.ive__wizbar` is `position: sticky` (~7987), so it is
     still IN FLOW and already occupies its own height — the padding was added on top of
     it. Owner-reported as being able to "scroll down freely, plenty of space left".
     Keep this a small breathing gap; do not restore a bar-sized value. */
  padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
  background: transparent;
}
html[data-theme="dark"] .ive--v3 { --ink: #EEF2F9; --ink2: #C3CBE2; --ink3: #8792AD; --hair: rgba(255,255,255,.09); }

/* the page itself is pure white / true black, like Settings, the list and the viewer */
html.editor-open, html.editor-open body, html.editor-open .app-shell, html.editor-open .app-main { background: #FFFFFF; }
html[data-theme="dark"].editor-open, html[data-theme="dark"].editor-open body,
html[data-theme="dark"].editor-open .app-shell, html[data-theme="dark"].editor-open .app-main { background: #000000; }

/* ---- top row: cancel + step counter, then the progress bar --------------------- */
.ive3-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 2px 0;
}
.ive3-cancel {
  border: 0; background: none; padding: 0;
  font: 600 15px/1 var(--font-display); letter-spacing: -.01em; color: #4B63FF;
}
html[data-theme="dark"] .ive3-cancel { color: #93A2FF; }
.ive3-count {
  font: 650 12px/1 var(--font-display); letter-spacing: .02em; color: var(--ink3);
  font-variant-numeric: tabular-nums;
}
.ive3-prog { display: flex; gap: 5px; margin: 14px 2px 20px; }
.ive3-prog i { flex: 1; height: 4px; border-radius: 3px; background: rgba(11,18,38,.10); transition: background .3s ease; }
html[data-theme="dark"] .ive3-prog i { background: rgba(255,255,255,.13); }
.ive3-prog i.on { background: linear-gradient(90deg, #6C7CFF, #3D4FE0); }

.ive3-title { font: 800 30px/1.05 var(--font-display); letter-spacing: -.03em; color: var(--ink); margin: 0 2px 5px; }
.ive3-sub { font: 500 14px/1.35 var(--font); color: var(--ink3); margin: 0 2px 20px; }

/* ---- section eyebrow + grouped card, the Settings rhythm ------------------------ */
.ive3-sec {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 0 4px 8px; margin: 22px 0 0;
  font: 700 11px/1 var(--font-display); letter-spacing: .10em; text-transform: uppercase; color: #8B95B0;
}
html[data-theme="dark"] .ive3-sec { color: #7B86A6; }
.ive3-sec b { font: 700 11px/1 var(--font-display); letter-spacing: .04em; color: #6B7690; font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .ive3-sec b { color: #98A2BC; }
.ive3-grp {
  border-radius: 22px; overflow: hidden; margin: 0 0 4px; background: #FCFDFF;
  box-shadow: inset 0 0 0 1px rgba(72,90,164,.09), 0 8px 22px -18px rgba(26,38,98,.38);
}
html[data-theme="dark"] .ive3-grp { background: #131519; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }

/* -----------------------------------------------------------------------------------
 *  v3.38.5 — THE CUSTOMER LIST WAS BEING CLIPPED BY THE CARD AROUND IT.
 *  THE ACTUAL BUG, seen at last rather than guessed at. `.ive3-grp` above carries
 *  `overflow: hidden` for its rounded corners. The customer picker's `.hm-select__panel`
 *  is `position: absolute` INSIDE that group, so the open dropdown — search box, RECENT
 *  heading, the customer list — was cut off at the card's bottom edge, leaving a stranded
 *  scrollbar and a half-row. That is the "names clipping through", on BOTH phone and PC.
 *
 *  ⚠ FIFTH TIME AN `overflow:hidden` / backdrop-filter ANCESTOR HAS EATEN A FLOATING LAYER
 *  here (#app-tabbar, #user-panel, .invdock, .hsel__panel, now this). BEFORE ADDING ANY
 *  POPOVER, CHECK EVERY ANCESTOR FOR overflow AND backdrop-filter.
 *
 *  The clip is relaxed ONLY while a panel is open, so the rounded card is unchanged at
 *  rest. `:has()` is safe here — it matches one container on a form, not a table row (see
 *  the v3.35.0 note about never putting `:has()` in a hover selector).
 *
 *  ⚠ DELIBERATELY NOT INSIDE @media (min-width: 768px), and deliberately placed ABOVE the
 *  v3.32.0 banner so tools/check-pc-scope.js does not scan it. The owner reports this bug
 *  on the phone AND the PC; it is the one sanctioned shared fix in the desktop work stream.
 * -------------------------------------------------------------------------------- */
.ive3-grp:has(.hm-select__panel.is-open),
.ive .hm-field:has(.hm-select__panel.is-open) { overflow: visible; }
.ive .hm-field:has(.hm-select__panel.is-open) { position: relative; z-index: 60; }
.hm-select__panel.is-open { z-index: 60; }

/* fields keep their markup (.hm-field / .hm-label / .form-control) — IDs and wiring
   are untouched; only the skin changes. */
.ive--v3 .hm-field { padding: 12px 16px; margin: 0; display: block; }
.ive--v3 .hm-field + .hm-field { border-top: 1px solid var(--hair); }
.ive--v3 .hm-label {
  display: block; font: 600 11.5px/1 var(--font); color: var(--ink3);
  margin-bottom: 7px; letter-spacing: 0; text-transform: none;
}
.ive--v3 .form-control, .ive--v3 .form-select {
  width: 100%; border: 0; background: transparent; padding: 0; box-shadow: none; border-radius: 0;
  font: 600 16px/1.3 var(--font); color: var(--ink); min-height: 0;
}
.ive--v3 .form-control::placeholder { color: #A6AEC0; font-weight: 500; }
html[data-theme="dark"] .ive--v3 .form-control::placeholder { color: #6E7893; }
.ive--v3 .inv-help, .ive--v3 .text-secondary-ios { font: 500 12px/1.4 var(--font); color: var(--ink3); margin: 7px 0 0; }

/* ---- step 1: the type chooser --------------------------------------------------- */
.ive3-type { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 4px; }
.ive3-typeb {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 15px 14px 14px; border: 0; border-radius: 20px; text-align: left; cursor: pointer;
  background: #FCFDFF; box-shadow: inset 0 0 0 1px rgba(72,90,164,.09), 0 8px 22px -18px rgba(26,38,98,.38);
}
html[data-theme="dark"] .ive3-typeb { background: #131519; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.ive3-typeb-ic {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 19px;
  background: rgba(11,18,38,.05); color: var(--ink2);
}
html[data-theme="dark"] .ive3-typeb-ic { background: rgba(255,255,255,.07); color: #C3CBE2; }
.ive3-typeb-t { font: 700 15px/1.15 var(--font-display); letter-spacing: -.015em; color: var(--ink); }
.ive3-typeb-d { font: 500 11.5px/1.3 var(--font); color: var(--ink3); }
.ive3-typeb.is-on { box-shadow: inset 0 0 0 1.5px #4B63FF, 0 10px 24px -18px rgba(61,79,224,.7); }
.ive3-typeb.is-on .ive3-typeb-ic { background: linear-gradient(150deg, #6C7CFF, #3D4FE0); color: #FFFFFF; }
.ive3-typeb__ck {
  position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%;
  display: none; align-items: center; justify-content: center; font-size: 10px; color: #FFFFFF;
  background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
}
.ive3-typeb.is-on .ive3-typeb__ck { display: inline-flex; }

/* ---- step 2: the status picker, rebuilt on the v3.15 tone system ---------------- */
.ive3-stat { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ive3-statb {
  display: flex; align-items: center; gap: 8px; padding: 11px 12px; border: 0; border-radius: 14px;
  font: 650 13px/1 var(--font-display); letter-spacing: -.01em; color: var(--ink2); cursor: pointer;
  background: rgba(11,18,38,.04); box-shadow: inset 0 0 0 1px rgba(11,18,38,.05);
}
html[data-theme="dark"] .ive3-statb { color: #AEB7CE; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.ive3-statb__d { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: #A3ACC2; }
.ive3-statb.t-draft .ive3-statb__d { background: #7A8699; }
.ive3-statb.t-due   .ive3-statb__d { background: #B67912; }
.ive3-statb.t-part  .ive3-statb__d { background: #B67912; }
.ive3-statb.t-paid  .ive3-statb__d { background: #0E7A52; }
.ive3-statb.t-late  .ive3-statb__d { background: #C5271E; }
.ive3-statb.t-void  .ive3-statb__d { background: #9AA4B6; }
html[data-theme="dark"] .ive3-statb.t-due .ive3-statb__d, html[data-theme="dark"] .ive3-statb.t-part .ive3-statb__d { background: #F5B84A; }
html[data-theme="dark"] .ive3-statb.t-paid .ive3-statb__d { background: #34D399; }
html[data-theme="dark"] .ive3-statb.t-late .ive3-statb__d { background: #FF6B63; }
/* selected: the row takes the STATUS tone, not the indigo of a control */
.ive3-statb.is-on.t-draft, .ive3-statb.is-on.t-void { color: #5B6779; background: rgba(100,116,139,.12); box-shadow: inset 0 0 0 1.5px rgba(100,116,139,.35); }
.ive3-statb.is-on.t-due, .ive3-statb.is-on.t-part { color: #B67912; background: rgba(245,170,40,.16); box-shadow: inset 0 0 0 1.5px rgba(182,121,18,.38); }
.ive3-statb.is-on.t-paid { color: #0E7A52; background: rgba(14,122,82,.11); box-shadow: inset 0 0 0 1.5px rgba(14,122,82,.35); }
.ive3-statb.is-on.t-late { color: #C5271E; background: rgba(197,39,30,.10); box-shadow: inset 0 0 0 1.5px rgba(197,39,30,.35); }
html[data-theme="dark"] .ive3-statb.is-on.t-draft, html[data-theme="dark"] .ive3-statb.is-on.t-void { color: #A8B3C8; background: rgba(148,163,184,.14); box-shadow: inset 0 0 0 1.5px rgba(148,163,184,.38); }
html[data-theme="dark"] .ive3-statb.is-on.t-due, html[data-theme="dark"] .ive3-statb.is-on.t-part { color: #F5B84A; background: rgba(245,184,74,.14); box-shadow: inset 0 0 0 1.5px rgba(245,184,74,.38); }
html[data-theme="dark"] .ive3-statb.is-on.t-paid { color: #34D399; background: rgba(52,211,153,.13); box-shadow: inset 0 0 0 1.5px rgba(52,211,153,.38); }
html[data-theme="dark"] .ive3-statb.is-on.t-late { color: #FF8078; background: rgba(255,107,99,.14); box-shadow: inset 0 0 0 1.5px rgba(255,107,99,.38); }

/* quick due-date chips — the fastest path to the answer people actually pick */
.ive3-quick { display: flex; gap: 7px; flex-wrap: wrap; margin: 9px 0 0; }
.ive3-quickb {
  border: 0; border-radius: 999px; padding: 7px 12px; cursor: pointer;
  font: 650 12.5px/1 var(--font-display); color: var(--ink2);
  background: rgba(11,18,38,.05); box-shadow: inset 0 0 0 1px rgba(11,18,38,.04);
}
html[data-theme="dark"] .ive3-quickb { color: #AEB7CE; background: rgba(255,255,255,.07); }
.ive3-quickb.is-on { color: #FFFFFF; background: linear-gradient(150deg, #6C7CFF, #3D4FE0); }

/* ---- step 3: one card per line item -------------------------------------------- */
.ive3-item { border-radius: 22px; overflow: hidden; margin: 0 0 10px; background: #FCFDFF;
  box-shadow: inset 0 0 0 1px rgba(72,90,164,.09), 0 8px 22px -18px rgba(26,38,98,.38); }
html[data-theme="dark"] .ive3-item { background: #131519; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.ive3-item__h {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px;
  border-bottom: 1px solid var(--hair);
}
.ive3-item__ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  font-size: 15px; background: rgba(75,99,255,.09); color: #4B63FF;
}
html[data-theme="dark"] .ive3-item__ic { background: rgba(147,162,255,.13); color: #93A2FF; }
.ive3-item__n { flex: 1; min-width: 0; font: 700 13px/1 var(--font-display); letter-spacing: .01em; color: var(--ink2); }
.ive3-item__t {
  font: 750 16px/1 var(--font-display); letter-spacing: -.03em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ive3-item__x {
  flex: 0 0 auto; width: 28px; height: 28px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 12px;
  color: #C5271E; background: rgba(197,39,30,.08);
}
html[data-theme="dark"] .ive3-item__x { color: #FF8078; background: rgba(255,107,99,.12); }
/* qty + price share a row; the line total lives in the header, so its read-only field is gone */
.ive3-item__pair { display: grid; grid-template-columns: 1fr 1fr; }
.ive3-item__pair .hm-field + .hm-field { border-top: 0; border-left: 1px solid var(--hair); }
.ive3-addline {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  margin: 2px 0 0; padding: 14px; border-radius: 18px; cursor: pointer;
  border: 1.5px dashed rgba(75,99,255,.30); background: rgba(75,99,255,.04);
  color: #4B63FF; font: 700 13.5px/1 var(--font-display);
}
html[data-theme="dark"] .ive3-addline { border-color: rgba(147,162,255,.30); background: rgba(147,162,255,.05); color: #93A2FF; }
.ive3-addline i { font-size: 15px; }

/* ---- step 4: review ------------------------------------------------------------- */
.ive3-rev { padding: 2px 0; }
.ive3-rev__r { display: flex; align-items: center; gap: 12px; padding: 12px 16px; position: relative; }
.ive3-rev__r + .ive3-rev__r::before {
  content: ''; position: absolute; left: 16px; right: 0; top: 0; height: 1px; background: var(--hair);
}
.ive3-rev__k { flex: 0 0 108px; font: 500 13px/1.2 var(--font); color: var(--ink3); }
.ive3-rev__v { flex: 1; min-width: 0; font: 650 14.5px/1.3 var(--font-display); color: var(--ink); text-align: right; }
.ive3-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 25px; padding: 0 10px; border-radius: 999px;
  font: 700 12px/1 var(--font-display);
}
.ive3-pill.t-draft { color: #5B6779; background: rgba(100,116,139,.12); }
.ive3-pill.t-due   { color: #B67912; background: rgba(245,170,40,.16); }
.ive3-pill.t-paid  { color: #0E7A52; background: rgba(14,122,82,.11); }
.ive3-pill.t-late  { color: #C5271E; background: rgba(197,39,30,.10); }
html[data-theme="dark"] .ive3-pill.t-draft { color: #A8B3C8; background: rgba(148,163,184,.14); }
html[data-theme="dark"] .ive3-pill.t-due   { color: #F5B84A; background: rgba(245,184,74,.14); }
html[data-theme="dark"] .ive3-pill.t-paid  { color: #34D399; background: rgba(52,211,153,.13); }
html[data-theme="dark"] .ive3-pill.t-late  { color: #FF8078; background: rgba(255,107,99,.14); }

.ive3-tot { padding: 4px 16px 6px; }
.ive3-tot__r {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0;
  font: 500 14px/1.2 var(--font); color: var(--ink3); font-variant-numeric: tabular-nums;
}
.ive3-tot__r span:last-child { font-weight: 600; color: var(--ink2); }
.ive3-tot__r--grand {
  margin-top: 4px; padding: 13px 0 12px; border-top: 1px solid var(--hair);
  font: 700 15px/1 var(--font-display); color: var(--ink);
}
.ive3-tot__r--grand span:last-child {
  font: 780 22px/1 var(--font-display); letter-spacing: -.03em;
  background: linear-gradient(122deg, #E9CE86 0%, #C79A3C 52%, #9A6A18 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme="dark"] .ive3-tot__r--grand span:last-child {
  background: linear-gradient(122deg, #F3E2A8, #D6B26E 58%, #B98F3E);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- the wizard bar -------------------------------------------------------------- */
.ive3-bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 20; display: flex; align-items: center; gap: 8px; padding: 9px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.68));
  -webkit-backdrop-filter: blur(26px) saturate(185%); backdrop-filter: blur(26px) saturate(185%);
  box-shadow: 0 18px 40px -22px rgba(26,38,98,.5), inset 0 1px 0 rgba(255,255,255,.9),
              inset 0 0 0 1px rgba(72,90,164,.08);
}
html[data-theme="dark"] .ive3-bar {
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
  box-shadow: 0 20px 46px -24px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.10),
              inset 0 0 0 1px rgba(255,255,255,.07);
}
@media (min-width: 640px) { .ive3-bar { left: 50%; transform: translateX(-50%); width: 620px; } }
.ive3-bar__back {
  flex: 0 0 auto; height: 46px; padding: 0 18px; border: 0; border-radius: 16px; cursor: pointer;
  font: 650 14.5px/1 var(--font-display); color: var(--ink2);
  background: rgba(11,18,38,.05); box-shadow: inset 0 0 0 1px rgba(11,18,38,.05);
}
html[data-theme="dark"] .ive3-bar__back { color: #C3CBE2; background: rgba(255,255,255,.07); }
.ive3-bar__next {
  flex: 1; min-width: 0; height: 46px; border: 0; border-radius: 16px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 15px/1 var(--font-display); letter-spacing: -.01em; color: #FFFFFF;
  background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 10px 20px -12px rgba(61,79,224,.95), inset 0 1px 0 rgba(255,255,255,.22);
}

/* ---- desktop: the wizard gets room, fields sit two-up ---------------------------- */
@media (min-width: 768px) {
  /* ⚠ THIS LINE IS WHY v3.38.1 "FIXED" THE DEAD SCROLL ON THE PHONE AND NOT ON THE PC.
     The base `.ive--v3` rule (~14142) was corrected to 24px, but this desktop override
     re-applied the original 132px and I never saw it — I grepped the base rule, measured
     the phone, and shipped. `.ive__wizbar` is `position: sticky`, so it is in flow and
     already occupies its height; the padding is pure dead scroll on BOTH devices.
     LESSON: after changing a property, grep for EVERY rule that sets it, not just the
     one you edited — then measure at phone AND desktop widths. */
  .ive--v3 { max-width: 720px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .ive3-title { font-size: 34px; }
  .ive3-item__pair { grid-template-columns: 1fr 1fr 1fr; }
  .ive3-two { display: grid; grid-template-columns: 1fr 1fr; }
  .ive3-two .hm-field + .hm-field { border-top: 0; border-left: 1px solid var(--hair); }
  .ive3-bar { width: 720px; }
}

/* the weight field: a number and its unit on one line, the unit as a compact chip */
.ive3-unit { display: flex; gap: 8px; align-items: center; }
.ive3-unit .form-control { flex: 1; min-width: 0; }
.ive3-unit .form-select {
  width: auto; flex: 0 0 auto; padding: 7px 10px; border-radius: 10px;
  font: 650 13px/1 var(--font-display); color: var(--ink2);
  background: rgba(11,18,38,.05); box-shadow: inset 0 0 0 1px rgba(11,18,38,.05);
  -webkit-appearance: none; appearance: none; text-align: center;
}
html[data-theme="dark"] .ive3-unit .form-select { color: #C3CBE2; background: rgba(255,255,255,.07); }

/* review: line-item rows are a glyph + name + amount, not a fixed label column */
.ive3-rev__r--item { gap: 11px; }
.ive3-rev__r--item .ive3-item__ic { width: 32px; height: 32px; border-radius: 10px; font-size: 14px; }
.ive3-rev__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ive3-rev__t { font: 650 14.5px/1.25 var(--font-display); letter-spacing: -.015em; color: var(--ink); }
.ive3-rev__m { font: 500 12px/1.2 var(--font); color: var(--ink3); font-variant-numeric: tabular-nums; }
.ive3-rev__a { flex: 0 0 auto; font: 700 15px/1 var(--font-display); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ive3-pill__d { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }

/* On desktop the bar must follow the CONTENT column, not the viewport: the app has a
   sidebar, so a viewport-centred bar sits off-centre under the wizard. Sticky keeps it
   inside the column at every width. */
@media (min-width: 768px) {
  .ive3-bar { position: sticky; left: auto; right: auto; bottom: 12px; width: auto; transform: none; margin-top: 22px; }
}

/* ---- v3.17.0 — a create action on the invoice list, in the nav bar's own indigo ---- */
html.dm-on .ivl__acts { display: flex; align-items: center; gap: 8px; }
html.dm-on .ivl__new {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 0;
  display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF;
  background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 8px 18px -10px rgba(61,79,224,.95), inset 0 1px 0 rgba(255,255,255,.22);
}
html.dm-on .ivl__new:active { transform: scale(.94); }

/* ---- v3.17.0 — the v2.86 `.ive .inv-item` skin fights the v3 card and must be undone.
   Caught by rendering the REAL markup in the harness rather than the candidate's: the
   old rules pill-shaded every input, dropped the hairlines, and pinned the remove button
   to the card's top-right corner over the header. Note `border:0!important` /
   `width:auto!important` in the v2.86 block — these overrides need !important to win. */
.ive--v3 .inv-item { padding: 0; border-radius: 22px; position: relative; }
.ive--v3 .inv-item + .inv-item { border-top: 0; border-radius: 22px; }
.ive--v3 .inv-item .hm-field {
  padding: 12px 16px !important; border: 0 !important; width: auto !important; display: block;
}
.ive--v3 .inv-item .hm-field + .hm-field { border-top: 1px solid var(--hair) !important; }
.ive--v3 .inv-item .ive3-item__pair .hm-field + .hm-field {
  border-top: 0 !important; border-left: 1px solid var(--hair) !important;
}
.ive--v3 .inv-item .ive3-item__pair + .ive3-item__pair .hm-field,
.ive--v3 .inv-item .inv-item__vehicle > .hm-field,
.ive--v3 .inv-item .inv-item__parking > .hm-field,
.ive--v3 .inv-item .inv-item__vehicle > .ive3-item__pair .hm-field,
.ive--v3 .inv-item .inv-item__parking > .ive3-item__pair .hm-field {
  border-top: 1px solid var(--hair) !important;
}
.ive--v3 .inv-item .ive3-item__pair .hm-field:first-child { border-left: 0 !important; }
.ive--v3 .inv-item .form-control, .ive--v3 .inv-item .form-select {
  background: transparent; border-radius: 0; padding: 0; font-size: 16px;
}
.ive--v3 .inv-item .ive3-unit .form-select {
  padding: 7px 10px; border-radius: 10px; font-size: 13px;
  background: rgba(11,18,38,.05); box-shadow: inset 0 0 0 1px rgba(11,18,38,.05);
}
html[data-theme="dark"] .ive--v3 .inv-item .ive3-unit .form-select { background: rgba(255,255,255,.07); }
/* the remove button belongs in the header row, not pinned over it */
.ive--v3 .inv-item .it-remove {
  position: static; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(197,39,30,.08); color: #C5271E !important; display: grid; place-items: center;
}
html[data-theme="dark"] .ive--v3 .inv-item .it-remove { background: rgba(255,107,99,.12); color: #FF8078 !important; }

/* The v2.86 `.ive .status-pick` is a wrapping flex row and outranks a bare `.ive3-stat`,
   so the six statuses flowed inline instead of the approved two-column grid. Match on
   both classes to win, and give the group its own padding — the pills are the card's
   only content, so nothing else was providing it. */
.ive--v3 .status-pick.ive3-stat {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 16px;
}
.ive--v3 .status-pick.ive3-stat .status-pill { justify-content: flex-start; }
.ive--v3 .status-lock .status-unlock { margin: 0 16px 14px; }
@media (min-width: 768px) { .ive--v3 .status-pick.ive3-stat { grid-template-columns: repeat(3, 1fr); } }

/* the outstanding row sits under the gold total: quieter, and coral only when it is the
   whole invoice still owed on something already late is NOT knowable here — the editor
   does not judge lateness, so it stays neutral. */
.ive--v3 .ive3-tot__r--out { padding-top: 2px; }
.ive--v3 .ive3-tot__r--out span:last-child { font-weight: 700; color: var(--ink2); }

/* Dark mode: the global `html[data-theme="dark"] .form-control` skin outranks a plain
   `.ive--v3 .form-control` (it carries an element selector), so every field in the wizard
   painted as a filled navy slab inside an already-carded row. Only visible in dark —
   render both themes. */
html[data-theme="dark"] .ive--v3 .form-control,
html[data-theme="dark"] .ive--v3 textarea.form-control,
html[data-theme="dark"] .ive--v3 .inv-item .form-control {
  background: transparent; border: 0; box-shadow: none; color: var(--ink);
}
html[data-theme="dark"] .ive--v3 .form-control:focus,
html[data-theme="dark"] .ive--v3 .inv-item .form-control:focus {
  background: transparent; box-shadow: none; outline: none;
}
.ive--v3 .form-control:focus, .ive--v3 .inv-item .form-control:focus {
  background: transparent; box-shadow: none; outline: none;
}

/* ==================================================================================
 *  v3.18.0 — PAYMENTS (phone) in the Settings language. Root `.pv--v3`.
 *  Appended, never edited in place (§4.7 scoping rule).
 *
 *  ⚠ THE BUG THIS CLOSES: the "How it came in" bar rendered as an EMPTY GREY TRACK in
 *  production. `.pv-seg` is a NAME COLLISION — it is also the desktop segmented control
 *  (~line 1165), which sets `margin: 12px 0 4px`. Inside a 12px-tall `.pv-bar` with
 *  `overflow:hidden`, that stray top margin pushed every segment exactly its own height
 *  below the clip. Measured: bar top 479.45, segment top 491.45. The legend dots shared
 *  the same `s0..s4` colour classes and painted fine, which is why it read as "styled but
 *  empty" rather than obviously broken. The bar is `.pv3-bar__s` now. DO NOT reuse
 *  `.pv-seg` for anything on this screen.
 *
 *  Green is money-in throughout, matching the collected segment of the invoice list's
 *  collection bar. Payments have no status, so the tile tone is green for every row —
 *  a method-coloured tile would be decoration, not information.
 * ================================================================================== */


html.dm-on .pv--v3 { padding: 0; }
html.dm-on .pv3__scroll {
  padding: calc(var(--sat, env(safe-area-inset-top, 0px)) + 6px) var(--m-gutter)
           calc(150px + var(--sab, env(safe-area-inset-bottom, 0px)));
  display: block;
}

/* ---- bare large title + actions -------------------------------------------------- */
html.dm-on .pv3-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 2px 2px 14px;
}
html.dm-on .pv3-title {
  margin: 0; font: 800 34px/1.02 var(--font-display); letter-spacing: -.035em; color: var(--m-ink);
}
html.dm-on .pv3-acts { display: flex; align-items: center; gap: 8px; }
html.dm-on .pv3-act {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--m-ink-2); font-size: 16px;
  background: rgba(11,18,38,.05); box-shadow: inset 0 0 0 1px rgba(11,18,38,.05);
}
html[data-theme="dark"].dm-on .pv3-act {
  color: #C3CBE2; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
html.dm-on .pv3-new {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 0;
  display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF;
  background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 8px 18px -10px rgba(61,79,224,.95), inset 0 1px 0 rgba(255,255,255,.22);
}

/* ---- search + period rail, the invoice-list idiom -------------------------------- */
html.dm-on .pv3-search {
  position: relative; display: flex; align-items: center; gap: 9px; height: 42px;
  padding: 0 13px; margin: 0 0 12px; border-radius: 14px;
  background: rgba(11,18,38,.045); box-shadow: inset 0 0 0 1px rgba(11,18,38,.035);
}
html[data-theme="dark"].dm-on .pv3-search {
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
html.dm-on .pv3-search i { font-size: 15px; color: #8B95B0; }
html.dm-on .pv3-search input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 0;
  font: 500 15px/1 var(--font); color: var(--m-ink);
}
html.dm-on .pv3-search input::placeholder { color: #98A1B5; }
html[data-theme="dark"].dm-on .pv3-search input::placeholder { color: #6E7893; }

html.dm-on .pv3-rail {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--m-gutter)) 18px; padding: 2px var(--m-gutter) 6px;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
          mask-image: linear-gradient(90deg, #000 88%, transparent);
}
html.dm-on .pv3-rail::-webkit-scrollbar { display: none; }
html.dm-on .pv3-chip {
  flex: 0 0 auto; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: 650 13.5px/1 var(--font-display); letter-spacing: -.01em; color: var(--m-ink-2);
  background: rgba(11,18,38,.05); box-shadow: inset 0 0 0 1px rgba(11,18,38,.04);
}
html[data-theme="dark"].dm-on .pv3-chip { color: #AEB7CE; background: rgba(255,255,255,.07); box-shadow: none; }
html.dm-on .pv3-chip.is-on {
  color: #FFFFFF; background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 8px 18px -12px rgba(61,79,224,.9);
}

/* ---- hero: money in, so GREEN, with the chart it already had --------------------- */
html.dm-on .pv3-hero {
  position: relative; overflow: hidden; border-radius: 22px; padding: 16px 17px 14px; margin: 0 0 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,250,247,.92));
  box-shadow: inset 0 0 0 1px rgba(72,90,164,.10), inset 0 1.5px 0 rgba(255,255,255,1),
              0 10px 26px -20px rgba(26,38,98,.42);
}
html[data-theme="dark"].dm-on .pv3-hero {
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.038));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1.5px 0 rgba(255,255,255,.16);
}
html.dm-on .pv3-hero__glow {
  position: absolute; inset: -70% -20% auto -20%; height: 130%; pointer-events: none;
  border-radius: 50%; filter: blur(36px);
  background: radial-gradient(50% 60% at 76% 55%, rgba(18,160,110,.20), transparent 70%);
}
html.dm-on .pv3-hero__lbl {
  position: relative; display: block;
  font: 650 9.5px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: #8B95B0;
}
html[data-theme="dark"].dm-on .pv3-hero__lbl { color: #7B86A6; }
html.dm-on .pv3-hero__val {
  position: relative; display: block; margin: 8px 0 0;
  font: 780 38px/1 var(--font-display); letter-spacing: -.045em; font-variant-numeric: tabular-nums;
  color: #0E7A52;
}
html[data-theme="dark"].dm-on .pv3-hero__val { color: #34D399; }
html.dm-on .pv3-hero__sub {
  position: relative; display: block; margin: 8px 0 0;
  font: 500 13px/1.3 var(--font); color: #7C86A0;
}
html[data-theme="dark"].dm-on .pv3-hero__sub { color: #8792AD; }
html.dm-on .pv3-delta { font-weight: 700; }
html.dm-on .pv3-delta.is-up { color: #0E7A52; }
html.dm-on .pv3-delta.is-down { color: #C5271E; }
html[data-theme="dark"].dm-on .pv3-delta.is-up { color: #34D399; }
html[data-theme="dark"].dm-on .pv3-delta.is-down { color: #FF6B63; }

html.dm-on .pv3-chart { position: relative; margin: 12px -17px 0; }
html.dm-on .pv3-chart .pv-area { display: block; width: 100%; height: 96px; color: #0E7A52; }
html[data-theme="dark"].dm-on .pv3-chart .pv-area { color: #34D399; }

/* range: a proper iOS segmented control, not four separate buttons */
html.dm-on .pv3-range {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
  margin: 14px 0 0; padding: 3px; border-radius: 12px;
  background: rgba(11,18,38,.05); box-shadow: inset 0 0 0 1px rgba(11,18,38,.04);
}
html[data-theme="dark"].dm-on .pv3-range { background: rgba(255,255,255,.07); box-shadow: none; }
html.dm-on .pv3-range button {
  height: 32px; border: 0; border-radius: 10px; background: none; cursor: pointer;
  font: 650 12.5px/1 var(--font-display); letter-spacing: .01em; color: var(--m-ink-2);
}
html[data-theme="dark"].dm-on .pv3-range button { color: #AEB7CE; }
html.dm-on .pv3-range button.is-on {
  color: var(--m-ink); background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(10,31,68,.10), 0 0 0 1px rgba(10,31,68,.04);
}
html[data-theme="dark"].dm-on .pv3-range button.is-on {
  color: #FFFFFF; background: rgba(255,255,255,.14); box-shadow: none;
}

/* ---- section eyebrow + grouped card, identical rhythm to the invoice list -------- */
html.dm-on .pv3-sec {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 0 4px 8px;
  font: 700 11px/1 var(--font-display); letter-spacing: .10em; text-transform: uppercase; color: #8B95B0;
}
html[data-theme="dark"].dm-on .pv3-sec { color: #7B86A6; }
html.dm-on .pv3-sec b {
  font: 700 12.5px/1 var(--font-display); letter-spacing: -.02em; color: #0E7A52;
  font-variant-numeric: tabular-nums; text-transform: none;
}
html[data-theme="dark"].dm-on .pv3-sec b { color: #34D399; }
html.dm-on .pv3-sec .c {
  font: 700 10px/1 var(--font-display); letter-spacing: .04em; color: #A3ACC2; padding-left: 6px;
}
html[data-theme="dark"].dm-on .pv3-sec .c { color: #6E7893; }
html.dm-on .pv3-grp {
  border-radius: 22px; overflow: hidden; margin: 0 0 22px; background: #FCFDFF;
  box-shadow: inset 0 0 0 1px rgba(72,90,164,.09), 0 8px 22px -18px rgba(26,38,98,.38);
}
html[data-theme="dark"].dm-on .pv3-grp { background: #131519; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }

/* ---- rows: the ledger row, same anatomy as an invoice row ------------------------ */
html.dm-on .pv3-row {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  width: 100%; border: 0; background: none; text-align: left; cursor: pointer;
}
html.dm-on .pv3-row + .pv3-row::before {
  content: ''; position: absolute; left: 66px; right: 0; top: 0; height: 1px; background: rgba(14,22,56,.09);
}
html[data-theme="dark"].dm-on .pv3-row + .pv3-row::before { background: rgba(255,255,255,.09); }
html.dm-on .pv3-row__ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
  background: rgba(14,122,82,.10); color: #0E7A52;
}
html[data-theme="dark"].dm-on .pv3-row__ic { background: rgba(52,211,153,.12); color: #34D399; }
html.dm-on .pv3-row__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.dm-on .pv3-row__who {
  font: 650 15.5px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--m-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.dm-on .pv3-row__sub {
  font: 500 12px/1.25 var(--font); color: #8B95AE;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme="dark"].dm-on .pv3-row__sub { color: #79849F; }
html.dm-on .pv3-row__sub .no { font-family: var(--font-ledger, "IBM Plex Mono", monospace); font-size: 11.5px; }
html.dm-on .pv3-row__r { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
html.dm-on .pv3-row__amt {
  font: 700 15.5px/1 var(--font-display); letter-spacing: -.03em; color: #0E7A52;
  font-variant-numeric: tabular-nums;
}
html[data-theme="dark"].dm-on .pv3-row__amt { color: #34D399; }
html.dm-on .pv3-row__t { font: 600 11.5px/1 var(--font-display); color: #9099AF; }
html[data-theme="dark"].dm-on .pv3-row__t { color: #6E7893; }
html.dm-on .pv3-row__chev { flex: 0 0 auto; font-size: 12.5px; color: #B9C0D0; margin-left: 2px; }
html[data-theme="dark"].dm-on .pv3-row__chev { color: #5A6480; }

/* ---- method split: the bar that has been empty in production -------------------- */
html.dm-on .pv3-bar {
  display: flex; gap: 3px; height: 8px; margin: 0 0 14px; padding: 0;
  border: 0; background: none; border-radius: 0; overflow: visible;
}
html.dm-on .pv3-bar__s { height: 8px; border-radius: 999px; min-width: 6px; margin: 0; }
html.dm-on .pv3-bar__s.s0 { background: #0E7A52; }
html.dm-on .pv3-bar__s.s1 { background: #17A06C; }
html.dm-on .pv3-bar__s.s2 { background: #4FBF95; }
html.dm-on .pv3-bar__s.s3 { background: #8FD8BC; }
html.dm-on .pv3-bar__s.s4 { background: #C2E9D8; }
html[data-theme="dark"].dm-on .pv3-bar__s.s0 { background: #34D399; }
html[data-theme="dark"].dm-on .pv3-bar__s.s1 { background: #1FA772; }
html[data-theme="dark"].dm-on .pv3-bar__s.s2 { background: #167F58; }
html[data-theme="dark"].dm-on .pv3-bar__s.s3 { background: #10684A; }
html[data-theme="dark"].dm-on .pv3-bar__s.s4 { background: #0B5039; }
html.dm-on .pv3-split { padding: 14px 16px 4px; }
html.dm-on .pv3-mrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
html.dm-on .pv3-mrow__d { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
html.dm-on .pv3-mrow__d.s0 { background: #0E7A52; }
html.dm-on .pv3-mrow__d.s1 { background: #17A06C; }
/* dark: the four dots were near-identical at small size — widen the steps */
html.dm-on .pv3-mrow__d.s2 { background: #4FBF95; }
html.dm-on .pv3-mrow__d.s3 { background: #8FD8BC; }
html.dm-on .pv3-mrow__d.s4 { background: #C2E9D8; }
html[data-theme="dark"].dm-on .pv3-mrow__d.s0 { background: #34D399; }
html[data-theme="dark"].dm-on .pv3-mrow__d.s1 { background: #1FA772; }
html[data-theme="dark"].dm-on .pv3-mrow__d.s2 { background: #167F58; }
html[data-theme="dark"].dm-on .pv3-mrow__d.s3 { background: #10684A; }
html[data-theme="dark"].dm-on .pv3-mrow__d.s4 { background: #0B5039; }
html.dm-on .pv3-mrow__i { font-size: 14px; color: #8B95AE; flex: 0 0 auto; }
html[data-theme="dark"].dm-on .pv3-mrow__i { color: #79849F; }
html.dm-on .pv3-mrow__l {
  flex: 1; min-width: 0; font: 600 14px/1.2 var(--font-display); letter-spacing: -.01em; color: var(--m-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.dm-on .pv3-mrow__v {
  flex: 0 0 auto; font: 700 14px/1 var(--font-display); letter-spacing: -.02em;
  color: var(--m-ink); font-variant-numeric: tabular-nums;
}
html.dm-on .pv3-mrow__p { flex: 0 0 auto; font: 600 11.5px/1 var(--font-display); color: #9099AF; width: 34px; text-align: right; }
html[data-theme="dark"].dm-on .pv3-mrow__p { color: #6E7893; }

/* search clear button + the loading skeleton, both in the v3 skin */
html.dm-on .pv3-search__x { border: 0; background: none; padding: 0; font-size: 15px; color: #98A1B5; }
html[data-theme="dark"].dm-on .pv3-search__x { color: #6E7893; }
html.dm-on .pv3-row--sk { pointer-events: none; }
html.dm-on .pv3-row--sk .pv3-row__ic.sk { background: rgba(11,18,38,.06); box-shadow: none; }
html[data-theme="dark"].dm-on .pv3-row--sk .pv3-row__ic.sk { background: rgba(255,255,255,.07); }

/* ==================================================================================
 *  v3.19.0 — CUSTOMERS (phone) in the Settings language. Root `.cx--v3`.
 *  Appended, never edited in place (§4.7 scoping rule).
 *
 *  ⚠ A–Z LETTERS ARE INLINE DIVIDERS INSIDE ONE CARD (`.cx3-az`), not a card per letter.
 *  The old markup opened a fresh `.cx-cards` block per letter, so a book whose initials
 *  happen to differ rendered one floating card per customer — all gap, no list.
 *
 *  ⚠ OUTSTANDING PER CUSTOMER IS AMBER, NOT CORAL. Coral means LATE everywhere else in
 *  the app (§4.7 tone system); all this screen knows is a customer's outstanding balance,
 *  not whether any of it has passed its due date. Owner approved. Do not "restore" red.
 *
 *  The avatar keeps its per-customer gradient but becomes a 40px ROUNDED SQUARE, like
 *  every other tile in the app — `.cava` sets a circle inline, hence the !important.
 * ================================================================================== */


html.dm-on .cx--v3 { padding: 0; }
html.dm-on .cx3__scroll {
  padding: calc(var(--sat, env(safe-area-inset-top, 0px)) + 6px) var(--m-gutter)
           calc(150px + var(--sab, env(safe-area-inset-bottom, 0px)));
  display: block;
}

/* ---- bare large title ------------------------------------------------------------ */
html.dm-on .cx3-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 2px 2px 14px;
}
html.dm-on .cx3-title {
  margin: 0; font: 800 34px/1.02 var(--font-display); letter-spacing: -.035em; color: var(--m-ink);
}
html.dm-on .cx3-acts { display: flex; align-items: center; gap: 8px; }
html.dm-on .cx3-act {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--m-ink-2); font-size: 16px;
  background: rgba(11,18,38,.05); box-shadow: inset 0 0 0 1px rgba(11,18,38,.05);
}
html[data-theme="dark"].dm-on .cx3-act {
  color: #C3CBE2; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
html.dm-on .cx3-new {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 0;
  display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF;
  background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 8px 18px -10px rgba(61,79,224,.95), inset 0 1px 0 rgba(255,255,255,.22);
}

/* ---- search + rail ---------------------------------------------------------------- */
html.dm-on .cx3-search {
  position: relative; display: flex; align-items: center; gap: 9px; height: 42px;
  padding: 0 13px; margin: 0 0 12px; border-radius: 14px;
  background: rgba(11,18,38,.045); box-shadow: inset 0 0 0 1px rgba(11,18,38,.035);
}
html[data-theme="dark"].dm-on .cx3-search {
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
html.dm-on .cx3-search i { font-size: 15px; color: #8B95B0; }
html.dm-on .cx3-search input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 0;
  font: 500 15px/1 var(--font); color: var(--m-ink);
}
html.dm-on .cx3-search input::placeholder { color: #98A1B5; }
html[data-theme="dark"].dm-on .cx3-search input::placeholder { color: #6E7893; }
html.dm-on .cx3-search__x { border: 0; background: none; padding: 0; font-size: 15px; color: #98A1B5; }

html.dm-on .cx3-rail {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--m-gutter)) 18px; padding: 2px var(--m-gutter) 6px;
}
html.dm-on .cx3-rail::-webkit-scrollbar { display: none; }
html.dm-on .cx3-chip {
  flex: 0 0 auto; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: 650 13.5px/1 var(--font-display); letter-spacing: -.01em; color: var(--m-ink-2);
  background: rgba(11,18,38,.05); box-shadow: inset 0 0 0 1px rgba(11,18,38,.04);
  display: inline-flex; align-items: center; gap: 7px;
}
html[data-theme="dark"].dm-on .cx3-chip { color: #AEB7CE; background: rgba(255,255,255,.07); box-shadow: none; }
html.dm-on .cx3-chip .n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 11px/1 var(--font-display); background: rgba(11,18,38,.07); color: var(--m-ink-2);
}
html[data-theme="dark"].dm-on .cx3-chip .n { background: rgba(255,255,255,.10); color: #AEB7CE; }
html.dm-on .cx3-chip.is-on {
  color: #FFFFFF; background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 8px 18px -12px rgba(61,79,224,.9);
}
html.dm-on .cx3-chip.is-on .n { background: rgba(255,255,255,.24); color: #FFFFFF; }

/* ---- hero: what the book is owed, not how many rows it has ---------------------- */
html.dm-on .cx3-hero {
  position: relative; overflow: hidden; border-radius: 22px; padding: 16px 17px 14px; margin: 0 0 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,248,255,.90));
  box-shadow: inset 0 0 0 1px rgba(72,90,164,.10), inset 0 1.5px 0 rgba(255,255,255,1),
              0 10px 26px -20px rgba(26,38,98,.42);
}
html[data-theme="dark"].dm-on .cx3-hero {
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.038));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1.5px 0 rgba(255,255,255,.16);
}
html.dm-on .cx3-hero__glow {
  position: absolute; inset: -70% -20% auto -20%; height: 130%; pointer-events: none;
  border-radius: 50%; filter: blur(36px);
  background: radial-gradient(50% 60% at 76% 55%, rgba(217,134,26,.16), transparent 70%);
}
html.dm-on .cx3-hero__lbl {
  position: relative; display: block;
  font: 650 9.5px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: #8B95B0;
}
html[data-theme="dark"].dm-on .cx3-hero__lbl { color: #7B86A6; }
html.dm-on .cx3-hero__val {
  position: relative; display: block; margin: 8px 0 0;
  font: 780 36px/1 var(--font-display); letter-spacing: -.045em; color: var(--m-ink);
  font-variant-numeric: tabular-nums;
}
html.dm-on .cx3-hero__cap {
  position: relative; display: block; margin: 7px 0 0;
  font: 500 13px/1.3 var(--font); color: #7C86A0;
}
html[data-theme="dark"].dm-on .cx3-hero__cap { color: #8792AD; }
html.dm-on .cx3-facts {
  position: relative; display: flex; gap: 8px; margin: 15px 0 0; padding: 13px 0 0;
  border-top: 1px solid rgba(14,22,56,.08);
}
html[data-theme="dark"].dm-on .cx3-facts { border-top-color: rgba(255,255,255,.09); }
html.dm-on .cx3-fact { flex: 1; min-width: 0; }
html.dm-on .cx3-fact__k {
  display: block; font: 650 9.5px/1 var(--font-display); letter-spacing: .10em;
  text-transform: uppercase; color: #A3ACC2;
}
html[data-theme="dark"].dm-on .cx3-fact__k { color: #6E7893; }
html.dm-on .cx3-fact__v {
  display: block; margin: 5px 0 0; font: 650 13px/1.2 var(--font-display);
  color: var(--m-ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}

/* ---- section eyebrow + one grouped card per letter ------------------------------ */
html.dm-on .cx3-sec {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 0 4px 8px;
  font: 700 11px/1 var(--font-display); letter-spacing: .10em; text-transform: uppercase; color: #8B95B0;
}
html[data-theme="dark"].dm-on .cx3-sec { color: #7B86A6; }
html.dm-on .cx3-sec b {
  font: 700 12.5px/1 var(--font-display); letter-spacing: -.02em; color: #B67912;
  font-variant-numeric: tabular-nums; text-transform: none;
}
html[data-theme="dark"].dm-on .cx3-sec b { color: #F5B84A; }
html.dm-on .cx3-sec .c {
  font: 700 10px/1 var(--font-display); letter-spacing: .04em; color: #A3ACC2; padding-left: 6px;
}
html[data-theme="dark"].dm-on .cx3-sec .c { color: #6E7893; }
html.dm-on .cx3-grp {
  border-radius: 22px; overflow: hidden; margin: 0 0 22px; background: #FCFDFF;
  box-shadow: inset 0 0 0 1px rgba(72,90,164,.09), 0 8px 22px -18px rgba(26,38,98,.38);
}
html[data-theme="dark"].dm-on .cx3-grp { background: #131519; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }

/* ---- the row --------------------------------------------------------------------- */
html.dm-on .cx3-row {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  width: 100%; border: 0; background: none; text-align: left; cursor: pointer;
}
html.dm-on .cx3-row + .cx3-row::before {
  content: ''; position: absolute; left: 66px; right: 0; top: 0; height: 1px; background: rgba(14,22,56,.09);
}
html[data-theme="dark"].dm-on .cx3-row + .cx3-row::before { background: rgba(255,255,255,.09); }
/* the avatar is a rounded square like every other tile in the app, not a circle */
html.dm-on .cx3-row .cava {
  width: 40px !important; height: 40px !important; flex: 0 0 auto; border-radius: 13px !important;
  display: inline-flex; align-items: center; justify-content: center;
  font: 750 14px/1 var(--font-display); letter-spacing: -.02em; color: #FFFFFF;
}
html.dm-on .cx3-row__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.dm-on .cx3-row__n {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font: 650 15.5px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--m-ink);
}
html.dm-on .cx3-row__n span {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.dm-on .cx3-row__bell { flex: 0 0 auto; font-size: 11px; color: #B67912; }
html[data-theme="dark"].dm-on .cx3-row__bell { color: #F5B84A; }
html.dm-on .cx3-row__s {
  font: 500 12px/1.25 var(--font); color: #8B95AE;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme="dark"].dm-on .cx3-row__s { color: #79849F; }
html.dm-on .cx3-row__r { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
html.dm-on .cx3-row__owed {
  font: 700 15px/1 var(--font-display); letter-spacing: -.03em; color: #B67912;
  font-variant-numeric: tabular-nums;
}
html[data-theme="dark"].dm-on .cx3-row__owed { color: #F5B84A; }
html.dm-on .cx3-row__t { font: 600 11px/1 var(--font-display); color: #9099AF; }
html[data-theme="dark"].dm-on .cx3-row__t { color: #6E7893; }
html.dm-on .cx3-row__clear { font: 600 12px/1 var(--font-display); color: #9AA4B8; }
html[data-theme="dark"].dm-on .cx3-row__clear { color: #5E687F; }
html.dm-on .cx3-row__chev { flex: 0 0 auto; font-size: 12.5px; color: #B9C0D0; margin-left: 2px; }
html[data-theme="dark"].dm-on .cx3-row__chev { color: #5A6480; }

/* the A–Z divider, inside the single grouped card */
html.dm-on .cx3-az {
  position: relative; padding: 7px 14px 6px 14px; background: rgba(11,18,38,.025);
  font: 700 10.5px/1 var(--font-display); letter-spacing: .10em; color: #9AA4B8;
}
html[data-theme="dark"].dm-on .cx3-az { background: rgba(255,255,255,.035); color: #6E7893; }
html.dm-on .cx3-az + .cx3-row::before { display: none; }
html.dm-on .cx3-sec b.mut {
  color: #98A1B5; font-weight: 600; letter-spacing: 0; font-size: 11.5px; text-transform: none;
}
html[data-theme="dark"].dm-on .cx3-sec b.mut { color: #6E7893; }

/* loading skeleton in the v3 skin */
html.dm-on .cx3-row--sk { pointer-events: none; }
html.dm-on .cx3-row--sk .cava.sk {
  width: 40px !important; height: 40px !important; border-radius: 13px !important;
  background: rgba(11,18,38,.06) !important;
}
html[data-theme="dark"].dm-on .cx3-row--sk .cava.sk { background: rgba(255,255,255,.07) !important; }

/* ==================================================================================
 *  v3.20.0 — RECURRING (phone) in the Settings language. Root `.rc--v3`.
 *  Appended, never edited in place (§4.7 scoping rule).
 *
 *  ⚠ AUTO-BILL IS INDIGO NOW, NOT GOLD. Gold is the money colour (§4.7); a switch is an
 *  interactive control, and interactive is indigo everywhere else in the app. The only
 *  gold left on this screen is the monthly figure in the hero, which IS money.
 *
 *  ⚠ ONE GROUPED CARD PER SECTION, not a floating card per plan — same fix as Customers
 *  in v3.19.0. A flagged plan puts the ISSUE in its sub-line and wears an amber tile with
 *  a warning pip; the old build showed a red dot and made you open the plan to find out.
 * ================================================================================== */


html.dm-on .rc--v3 { padding: 0; }
html.dm-on .rc3__scroll {
  padding: calc(var(--sat, env(safe-area-inset-top, 0px)) + 6px) var(--m-gutter)
           calc(150px + var(--sab, env(safe-area-inset-bottom, 0px)));
  display: block;
}

/* ---- bare large title ------------------------------------------------------------ */
html.dm-on .rc3-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 2px 2px 14px;
}
html.dm-on .rc3-title {
  margin: 0; font: 800 34px/1.02 var(--font-display); letter-spacing: -.035em; color: var(--m-ink);
}
html.dm-on .rc3-new {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 0;
  display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF;
  background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 8px 18px -10px rgba(61,79,224,.95), inset 0 1px 0 rgba(255,255,255,.22);
}

/* ---- hero ------------------------------------------------------------------------- */
html.dm-on .rc3-hero {
  position: relative; overflow: hidden; border-radius: 22px; padding: 16px 17px 14px; margin: 0 0 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,248,243,.92));
  box-shadow: inset 0 0 0 1px rgba(72,90,164,.10), inset 0 1.5px 0 rgba(255,255,255,1),
              0 10px 26px -20px rgba(26,38,98,.42);
}
html[data-theme="dark"].dm-on .rc3-hero {
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.038));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1.5px 0 rgba(255,255,255,.16);
}
html.dm-on .rc3-hero__glow {
  position: absolute; inset: -70% -20% auto -20%; height: 130%; pointer-events: none;
  border-radius: 50%; filter: blur(36px);
  background: radial-gradient(50% 60% at 76% 55%, rgba(199,154,60,.18), transparent 70%);
}
html.dm-on .rc3-hero__lbl {
  position: relative; display: block;
  font: 650 9.5px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: #8B95B0;
}
html[data-theme="dark"].dm-on .rc3-hero__lbl { color: #7B86A6; }
html.dm-on .rc3-hero__val {
  position: relative; display: flex; align-items: baseline; gap: 4px; margin: 8px 0 0;
  font: 780 36px/1 var(--font-display); letter-spacing: -.045em; font-variant-numeric: tabular-nums;
  /* GOLD is the money colour (§4.7) and this figure is the point of the screen. */
  background: linear-gradient(122deg, #E9CE86 0%, #C79A3C 52%, #9A6A18 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme="dark"].dm-on .rc3-hero__val {
  background: linear-gradient(122deg, #F3E2A8, #D6B26E 58%, #B98F3E);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html.dm-on .rc3-hero__per {
  font: 650 15px/1 var(--font-display); letter-spacing: -.02em;
  -webkit-text-fill-color: #9AA4B8; color: #9AA4B8;
}
html[data-theme="dark"].dm-on .rc3-hero__per { -webkit-text-fill-color: #6E7893; color: #6E7893; }
html.dm-on .rc3-hero__cap {
  position: relative; display: block; margin: 7px 0 0;
  font: 500 13px/1.3 var(--font); color: #7C86A0;
}
html[data-theme="dark"].dm-on .rc3-hero__cap { color: #8792AD; }
html.dm-on .rc3-facts {
  position: relative; display: flex; gap: 8px; margin: 15px 0 0; padding: 13px 0 0;
  border-top: 1px solid rgba(14,22,56,.08);
}
html[data-theme="dark"].dm-on .rc3-facts { border-top-color: rgba(255,255,255,.09); }
html.dm-on .rc3-fact { flex: 1; min-width: 0; }
html.dm-on .rc3-fact__k {
  display: block; font: 650 9.5px/1 var(--font-display); letter-spacing: .10em;
  text-transform: uppercase; color: #A3ACC2;
}
html[data-theme="dark"].dm-on .rc3-fact__k { color: #6E7893; }
html.dm-on .rc3-fact__v {
  display: block; margin: 5px 0 0; font: 650 13px/1.2 var(--font-display);
  color: var(--m-ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}

/* the attention nudge, same shape as the invoice list's overdue row */
html.dm-on .rc3-nudge {
  position: relative; display: flex; align-items: center; gap: 9px; width: 100%;
  margin: 12px 0 0; padding: 10px 12px; border: 0; border-radius: 14px; cursor: pointer;
  text-align: left; font: 650 13px/1.25 var(--font-display); letter-spacing: -.01em;
  color: #B67912; background: rgba(245,170,40,.12);
  box-shadow: inset 0 0 0 1px rgba(182,121,18,.16);
}
html[data-theme="dark"].dm-on .rc3-nudge {
  color: #F5B84A; background: rgba(245,184,74,.12); box-shadow: inset 0 0 0 1px rgba(245,184,74,.18);
}
html.dm-on .rc3-nudge__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.dm-on .rc3-nudge__s {
  font: 500 11.5px/1.2 var(--font); opacity: .85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.dm-on .rc3-nudge .go { font-size: 12px; opacity: .7; }

/* ---- section eyebrow + grouped card ---------------------------------------------- */
html.dm-on .rc3-sec {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 0 4px 8px;
  font: 700 11px/1 var(--font-display); letter-spacing: .10em; text-transform: uppercase; color: #8B95B0;
}
html[data-theme="dark"].dm-on .rc3-sec { color: #7B86A6; }
html.dm-on .rc3-sec b {
  font: 700 12.5px/1 var(--font-display); letter-spacing: -.02em; color: #6B7690;
  font-variant-numeric: tabular-nums; text-transform: none;
}
html[data-theme="dark"].dm-on .rc3-sec b { color: #98A2BC; }
html.dm-on .rc3-sec .c {
  font: 700 10px/1 var(--font-display); letter-spacing: .04em; color: #A3ACC2; padding-left: 6px;
}
html[data-theme="dark"].dm-on .rc3-sec .c { color: #6E7893; }
html.dm-on .rc3-grp {
  border-radius: 22px; overflow: hidden; margin: 0 0 22px; background: #FCFDFF;
  box-shadow: inset 0 0 0 1px rgba(72,90,164,.09), 0 8px 22px -18px rgba(26,38,98,.38);
}
html[data-theme="dark"].dm-on .rc3-grp { background: #131519; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }

/* ---- auto-bill: a Settings row with a real switch, in INDIGO not gold ------------ */
html.dm-on .rc3-auto { display: flex; align-items: center; gap: 12px; padding: 13px 14px; width: 100%; }
html.dm-on .rc3-auto__ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
  background: rgba(11,18,38,.05); color: var(--m-ink-2);
}
html[data-theme="dark"].dm-on .rc3-auto__ic { background: rgba(255,255,255,.07); color: #C3CBE2; }
html.dm-on .rc3-auto.is-on .rc3-auto__ic {
  background: linear-gradient(150deg, #6C7CFF, #3D4FE0); color: #FFFFFF;
  box-shadow: 0 8px 18px -12px rgba(61,79,224,.9);
}
html.dm-on .rc3-auto__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
html.dm-on .rc3-auto__t {
  font: 650 15.5px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--m-ink);
}
html.dm-on .rc3-auto__s { font: 500 12px/1.3 var(--font); color: #8B95AE; }
html[data-theme="dark"].dm-on .rc3-auto__s { color: #79849F; }
html.dm-on .rc3-sw {
  flex: 0 0 auto; width: 51px; height: 31px; border: 0; border-radius: 999px; cursor: pointer;
  position: relative; background: rgba(11,18,38,.12); transition: background .22s ease;
}
html[data-theme="dark"].dm-on .rc3-sw { background: rgba(255,255,255,.16); }
html.dm-on .rc3-sw::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 2px 5px rgba(10,31,68,.28); transition: transform .22s var(--ease, ease);
}
html.dm-on .rc3-sw[aria-checked="true"] { background: linear-gradient(150deg, #6C7CFF, #3D4FE0); }
html.dm-on .rc3-sw[aria-checked="true"]::after { transform: translateX(20px); }
html.dm-on .rc3-auto__meta {
  display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px 13px;
}
html.dm-on .rc3-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px;
  font: 600 11.5px/1 var(--font-display); color: var(--m-ink-2); background: rgba(11,18,38,.05);
}
html[data-theme="dark"].dm-on .rc3-chip { color: #AEB7CE; background: rgba(255,255,255,.07); }
html.dm-on .rc3-chip.ok { color: #0E7A52; background: rgba(14,122,82,.10); }
html[data-theme="dark"].dm-on .rc3-chip.ok { color: #34D399; background: rgba(52,211,153,.12); }

/* ---- the primary action ----------------------------------------------------------- */
html.dm-on .rc3-bill {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  height: 50px; margin: 0 0 8px; border: 0; border-radius: 17px; cursor: pointer;
  font: 700 15.5px/1 var(--font-display); letter-spacing: -.01em; color: #FFFFFF;
  background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 12px 24px -14px rgba(61,79,224,.95), inset 0 1px 0 rgba(255,255,255,.22);
}
html.dm-on .rc3-bill__s {
  display: block; margin: 0 0 22px; padding: 0 4px;
  font: 500 12px/1.35 var(--font); color: #8B95AE; text-align: center;
}
html[data-theme="dark"].dm-on .rc3-bill__s { color: #79849F; }

/* ---- the plan row ----------------------------------------------------------------- */
html.dm-on .rc3-row {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  width: 100%; border: 0; background: none; text-align: left; cursor: pointer;
}
html.dm-on .rc3-row + .rc3-row::before {
  content: ''; position: absolute; left: 66px; right: 0; top: 0; height: 1px; background: rgba(14,22,56,.09);
}
html[data-theme="dark"].dm-on .rc3-row + .rc3-row::before { background: rgba(255,255,255,.09); }
html.dm-on .rc3-row__ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
  background: rgba(75,99,255,.09); color: #4B63FF;
}
html[data-theme="dark"].dm-on .rc3-row__ic { background: rgba(147,162,255,.13); color: #93A2FF; }
html.dm-on .rc3-row.is-flag .rc3-row__ic { background: rgba(245,170,40,.16); color: #B67912; }
html[data-theme="dark"].dm-on .rc3-row.is-flag .rc3-row__ic { background: rgba(245,184,74,.14); color: #F5B84A; }
html.dm-on .rc3-row.is-paused .rc3-row__ic { background: rgba(100,116,139,.12); color: #5B6779; }
html[data-theme="dark"].dm-on .rc3-row.is-paused .rc3-row__ic { background: rgba(148,163,184,.14); color: #A8B3C8; }
html.dm-on .rc3-row__pip {
  position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8px; color: #FFFFFF; background: #B67912; box-shadow: 0 0 0 2px #FCFDFF;
}
html[data-theme="dark"].dm-on .rc3-row__pip { background: #F5B84A; color: #1E1405; box-shadow: 0 0 0 2px #131519; }
html.dm-on .rc3-row__ic { position: relative; overflow: visible; }
html.dm-on .rc3-row__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.dm-on .rc3-row__n {
  font: 650 15.5px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--m-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.dm-on .rc3-row__s {
  font: 500 12px/1.25 var(--font); color: #8B95AE;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme="dark"].dm-on .rc3-row__s { color: #79849F; }
html.dm-on .rc3-row__r { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
html.dm-on .rc3-row__amt {
  font: 700 15px/1 var(--font-display); letter-spacing: -.03em; color: var(--m-ink);
  font-variant-numeric: tabular-nums;
}
html.dm-on .rc3-row__t { font: 600 11.5px/1 var(--font-display); color: #9099AF; }
html[data-theme="dark"].dm-on .rc3-row__t { color: #6E7893; }
html.dm-on .rc3-row.is-paused .rc3-row__amt { color: #8B95AE; font-weight: 650; }
html[data-theme="dark"].dm-on .rc3-row.is-paused .rc3-row__amt { color: #79849F; }
html.dm-on .rc3-row__chev { flex: 0 0 auto; font-size: 12.5px; color: #B9C0D0; margin-left: 2px; }
html[data-theme="dark"].dm-on .rc3-row__chev { color: #5A6480; }


/* =====================================================================================
 *  v3.21.0 — DOCUMENTS (phone) in the Settings language. Root `.dx--v3`.
 *  Appended, never edited in place (§4.7 scoping rule).
 *
 *  ⚠ NO GOLD ANYWHERE ON THIS SCREEN. Gold is the money colour (§4.7) and there is no
 *  money on a document library. The old header wore a gold `.dm__eb` eyebrow purely as
 *  decoration. Do not put it back.
 *
 *  ⚠ THE HERO IS A LIGHT CARD. The old `.dx-hero` was a DARK NAVY SLAB — the only dark
 *  object on a white screen, the same defect Insights had before v3.9.2.
 *
 *  ⚠ ONE GROUPED CARD PER SECTION, not a floating card per document — the fix Customers
 *  got in v3.19.0 and Recurring in v3.20.0.
 *
 *  ⚠ SCOPE: PHONE ONLY. `mountDesktop()` / `shell()` / `renderList()` / `gridHTML()` /
 *  `listTableHTML()` are a separate render path and are UNTOUCHED, per the owner's
 *  standing "phone now, desktop later".
 * ================================================================================== */

html.dm-on .dx--v3 { padding: 0; }
html.dm-on .dx3__scroll {
  padding: calc(var(--sat, env(safe-area-inset-top, 0px)) + 6px) var(--m-gutter)
           calc(150px + var(--sab, env(safe-area-inset-bottom, 0px)));
  display: block;
}

/* ---- bare large title, no eyebrow ------------------------------------------------- */
html.dm-on .dx3-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 2px 2px 14px;
}
html.dm-on .dx3-title {
  margin: 0; font: 800 34px/1.02 var(--font-display); letter-spacing: -.035em; color: var(--m-ink);
}
html.dm-on .dx3-new {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 0;
  display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF;
  background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 8px 18px -10px rgba(61,79,224,.95), inset 0 1px 0 rgba(255,255,255,.22);
}

/* ---- hero: a LIGHT card, indigo-tinted (no money on this screen, so no gold) ------ */
html.dm-on .dx3-hero {
  position: relative; overflow: hidden; border-radius: 22px; padding: 16px 17px 14px; margin: 0 0 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,246,253,.92));
  box-shadow: inset 0 0 0 1px rgba(72,90,164,.10), inset 0 1.5px 0 rgba(255,255,255,1),
              0 10px 26px -20px rgba(26,38,98,.42);
}
html[data-theme="dark"].dm-on .dx3-hero {
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.038));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1.5px 0 rgba(255,255,255,.16);
}
html.dm-on .dx3-hero__glow {
  position: absolute; inset: -70% -20% auto -20%; height: 130%; pointer-events: none;
  border-radius: 50%; filter: blur(36px);
  background: radial-gradient(50% 60% at 76% 55%, rgba(75,99,255,.16), transparent 70%);
}
html.dm-on .dx3-hero__lbl {
  position: relative; display: block;
  font: 650 9.5px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: #8B95B0;
}
html[data-theme="dark"].dm-on .dx3-hero__lbl { color: #7B86A6; }
html.dm-on .dx3-hero__val {
  position: relative; display: flex; align-items: baseline; gap: 7px; margin: 8px 0 0;
  font: 780 36px/1 var(--font-display); letter-spacing: -.045em; color: var(--m-ink);
  font-variant-numeric: tabular-nums;
}
html.dm-on .dx3-hero__per {
  font: 650 15px/1 var(--font-display); letter-spacing: -.02em; color: #9AA4B8;
}
html[data-theme="dark"].dm-on .dx3-hero__per { color: #6E7893; }
html.dm-on .dx3-hero__cap {
  position: relative; display: block; margin: 7px 0 0;
  font: 500 13px/1.3 var(--font); color: #7C86A0;
}
html[data-theme="dark"].dm-on .dx3-hero__cap { color: #8792AD; }
html.dm-on .dx3-facts {
  position: relative; display: flex; gap: 8px; margin: 15px 0 0; padding: 13px 0 0;
  border-top: 1px solid rgba(14,22,56,.08);
}
html[data-theme="dark"].dm-on .dx3-facts { border-top-color: rgba(255,255,255,.09); }
html.dm-on .dx3-fact { flex: 1; min-width: 0; }
html.dm-on .dx3-fact__k {
  display: block; font: 650 9.5px/1 var(--font-display); letter-spacing: .10em;
  text-transform: uppercase; color: #A3ACC2;
}
html[data-theme="dark"].dm-on .dx3-fact__k { color: #6E7893; }
html.dm-on .dx3-fact__v {
  display: block; margin: 5px 0 0; font: 650 13px/1.2 var(--font-display);
  color: var(--m-ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}

/* ---- search + filter rail, the invoice-list idiom -------------------------------- */
html.dm-on .dx3-search {
  position: relative; display: flex; align-items: center; gap: 9px; height: 42px;
  padding: 0 13px; margin: 0 0 12px; border-radius: 14px;
  background: rgba(11,18,38,.045); box-shadow: inset 0 0 0 1px rgba(11,18,38,.035);
}
html[data-theme="dark"].dm-on .dx3-search {
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
html.dm-on .dx3-search i { font-size: 15px; color: #8B95B0; }
html.dm-on .dx3-search input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 0;
  font: 500 15px/1 var(--font); color: var(--m-ink);
}
html.dm-on .dx3-search input::-webkit-search-cancel-button { display: none; }
html.dm-on .dx3-search input::placeholder { color: #98A1B5; }
html[data-theme="dark"].dm-on .dx3-search input::placeholder { color: #6E7893; }
html.dm-on .dx3-search__x {
  flex: 0 0 auto; border: 0; background: none; padding: 0; cursor: pointer; color: #A3ACC2; font-size: 14px;
}

html.dm-on .dx3-rail {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--m-gutter)) 20px; padding: 2px var(--m-gutter) 6px;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
          mask-image: linear-gradient(90deg, #000 88%, transparent);
}
html.dm-on .dx3-rail::-webkit-scrollbar { display: none; }
html.dm-on .dx3-chip {
  flex: 0 0 auto; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: 650 13.5px/1 var(--font-display); letter-spacing: -.01em; color: var(--m-ink-2);
  background: rgba(11,18,38,.05); box-shadow: inset 0 0 0 1px rgba(11,18,38,.04);
}
html[data-theme="dark"].dm-on .dx3-chip { color: #AEB7CE; background: rgba(255,255,255,.07); box-shadow: none; }
html.dm-on .dx3-chip.is-on {
  color: #FFFFFF; background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 8px 18px -12px rgba(61,79,224,.9);
}

/* ---- section eyebrow + ONE grouped card ------------------------------------------ */
html.dm-on .dx3-sec {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 0 4px 8px;
  font: 700 11px/1 var(--font-display); letter-spacing: .10em; text-transform: uppercase; color: #8B95B0;
}
html[data-theme="dark"].dm-on .dx3-sec { color: #7B86A6; }
html.dm-on .dx3-sec .c {
  font: 700 10px/1 var(--font-display); letter-spacing: .04em; color: #A3ACC2; padding-left: 6px;
}
html[data-theme="dark"].dm-on .dx3-sec .c { color: #6E7893; }
html.dm-on .dx3-grp {
  border-radius: 22px; overflow: hidden; margin: 0 0 22px; background: #FCFDFF;
  box-shadow: inset 0 0 0 1px rgba(72,90,164,.09), 0 8px 22px -18px rgba(26,38,98,.38);
}
html[data-theme="dark"].dm-on .dx3-grp { background: #131519; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }

/* ---- the document row, the invoice row's anatomy --------------------------------- */
html.dm-on .dx3-row {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  width: 100%; border: 0; background: none; text-align: left; cursor: pointer;
}
html.dm-on .dx3-row + .dx3-row::before {
  content: ''; position: absolute; left: 66px; right: 0; top: 0; height: 1px; background: rgba(14,22,56,.09);
}
html[data-theme="dark"].dm-on .dx3-row + .dx3-row::before { background: rgba(255,255,255,.09); }
html.dm-on .dx3-row__ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px; position: relative;
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
  background: rgba(75,99,255,.09); color: #4B63FF;
}
html[data-theme="dark"].dm-on .dx3-row__ic { background: rgba(147,162,255,.13); color: #93A2FF; }
/* a general note is not linked to anyone — slate, so the indigo tiles read as "attached" */
html.dm-on .dx3-row.is-note .dx3-row__ic { background: rgba(100,116,139,.12); color: #5B6779; }
html[data-theme="dark"].dm-on .dx3-row.is-note .dx3-row__ic { background: rgba(148,163,184,.14); color: #A8B3C8; }
html.dm-on .dx3-row__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.dm-on .dx3-row__n {
  font: 650 15.5px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--m-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.dm-on .dx3-row__s {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  font: 500 12px/1.25 var(--font); color: #8B95AE;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme="dark"].dm-on .dx3-row__s { color: #79849F; }
html.dm-on .dx3-row__s i { font-size: 11px; opacity: .8; flex: 0 0 auto; }
html.dm-on .dx3-row__s span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html.dm-on .dx3-row__r { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
html.dm-on .dx3-row__d {
  font: 650 13px/1 var(--font-display); letter-spacing: -.02em; color: var(--m-ink-2);
  font-variant-numeric: tabular-nums;
}
html[data-theme="dark"].dm-on .dx3-row__d { color: #AEB7CE; }
/* size is a quiet fact, NOT a monospace code fragment the way the old build set it */
html.dm-on .dx3-row__z {
  font: 600 11.5px/1 var(--font-display); color: #9099AF; font-variant-numeric: tabular-nums;
}
html[data-theme="dark"].dm-on .dx3-row__z { color: #6E7893; }
html.dm-on .dx3-row__chev { flex: 0 0 auto; font-size: 12.5px; color: #B9C0D0; margin-left: 2px; }
html[data-theme="dark"].dm-on .dx3-row__chev { color: #5A6480; }

/* ---- empty state ------------------------------------------------------------------ */
html.dm-on .dx3-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 46px 24px 40px;
}
html.dm-on .dx3-empty__i {
  width: 54px; height: 54px; border-radius: 18px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 22px; margin: 0 0 14px;
  background: rgba(75,99,255,.09); color: #4B63FF;
}
html[data-theme="dark"].dm-on .dx3-empty__i { background: rgba(147,162,255,.13); color: #93A2FF; }
html.dm-on .dx3-empty__t {
  margin: 0; font: 700 17px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--m-ink);
}
html.dm-on .dx3-empty__s {
  margin: 6px 0 0; font: 500 13px/1.4 var(--font); color: #8B95AE; max-width: 260px;
}
html[data-theme="dark"].dm-on .dx3-empty__s { color: #79849F; }

/* No caption line on this hero (it would restate a fact), so the value sits directly
   above the hairline — close the gap the caption used to occupy. */
html.dm-on .dx3-hero__val + .dx3-facts { margin-top: 12px; }

/* ---- loading skeleton -------------------------------------------------------------
   ⚠ The old skeleton reused `.sk`, which is scoped `.dm .sk` (style.css ~4215). The v3
   root is `.dx.dx--v3`, NOT `.dm dx`, so that shimmer does not reach it and the rows
   would render as invisible zero-height spans. This block is self-contained. */
html.dm-on .dx3-sk { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
html.dm-on .dx3-sk + .dx3-sk { box-shadow: inset 0 1px 0 rgba(14,22,56,.09); }
html[data-theme="dark"].dm-on .dx3-sk + .dx3-sk { box-shadow: inset 0 1px 0 rgba(255,255,255,.09); }
html.dm-on .dx3-sk__i { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px; }
html.dm-on .dx3-sk__b { flex: 1; min-width: 0; }
html.dm-on .dx3-sk__l1 { display: block; width: 62%; height: 13px; border-radius: 6px; }
html.dm-on .dx3-sk__l2 { display: block; width: 38%; height: 11px; border-radius: 6px; margin-top: 7px; }
html.dm-on .dx3-sk__i, html.dm-on .dx3-sk__l1, html.dm-on .dx3-sk__l2 {
  position: relative; overflow: hidden; background: rgba(11,18,38,.06);
}
html[data-theme="dark"].dm-on .dx3-sk__i,
html[data-theme="dark"].dm-on .dx3-sk__l1,
html[data-theme="dark"].dm-on .dx3-sk__l2 { background: rgba(255,255,255,.07); }
html.dm-on .dx3-sk__i::after, html.dm-on .dx3-sk__l1::after, html.dm-on .dx3-sk__l2::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  animation: dx3sk 1.35s ease-in-out infinite;
}
html[data-theme="dark"].dm-on .dx3-sk__i::after,
html[data-theme="dark"].dm-on .dx3-sk__l1::after,
html[data-theme="dark"].dm-on .dx3-sk__l2::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
}
@keyframes dx3sk { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  html.dm-on .dx3-sk__i::after, html.dm-on .dx3-sk__l1::after, html.dm-on .dx3-sk__l2::after { animation: none; }
}


/* =====================================================================================
 *  v3.22.0 — USERS / TEAM (phone) in the Settings language. Root `.um--v3`.
 *  Appended, never edited in place (§4.7 scoping rule).
 *
 *  ⚠ NO GOLD. The old header wore a gold `.dm__eb` eyebrow ("TEAM"). Gold is the money
 *  colour (§4.7) and there is no money on this screen.
 *
 *  ⚠ THE AVATAR IS A 40px ROUNDED SQUARE, not a 56px circle — every other tile in the app
 *  is a rounded square, and Customers made exactly this change in v3.19.0.
 *
 *  ⚠ THE ROLE PILL IS GONE FROM THE ROW. The row sits inside a section already headed
 *  ADMINS / EDITORS / VIEWERS, so the pill restated the heading on every line while
 *  squeezing the email into truncation ("sara.mahmood@haaltd.co…"). Same call as the
 *  "General note" sub-line in Documents v3.21.0.
 *
 *  ⚠ SCOPE: PHONE ONLY. mountDesktop() / shell() are a separate render path, UNTOUCHED.
 * ================================================================================== */

html.dm-on .um--v3 { padding: 0; }
html.dm-on .um3__scroll {
  padding: calc(var(--sat, env(safe-area-inset-top, 0px)) + 6px) var(--m-gutter)
           calc(150px + var(--sab, env(safe-area-inset-bottom, 0px)));
  display: block;
}

/* ---- bare large title -------------------------------------------------------------- */
html.dm-on .um3-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 2px 2px 14px;
}
html.dm-on .um3-title {
  margin: 0; font: 800 34px/1.02 var(--font-display); letter-spacing: -.035em; color: var(--m-ink);
}
html.dm-on .um3-acts { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
html.dm-on .um3-ghost {
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
  background: rgba(11,18,38,.05); color: var(--m-ink-2);
}
html[data-theme="dark"].dm-on .um3-ghost { background: rgba(255,255,255,.07); color: #C3CBE2; }
html.dm-on .um3-new {
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: #FFFFFF;
  background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 8px 18px -10px rgba(61,79,224,.95), inset 0 1px 0 rgba(255,255,255,.22);
}

/* ---- hero --------------------------------------------------------------------------- */
html.dm-on .um3-hero {
  position: relative; overflow: hidden; border-radius: 22px; padding: 16px 17px 14px; margin: 0 0 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,246,253,.92));
  box-shadow: inset 0 0 0 1px rgba(72,90,164,.10), inset 0 1.5px 0 rgba(255,255,255,1),
              0 10px 26px -20px rgba(26,38,98,.42);
}
html[data-theme="dark"].dm-on .um3-hero {
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.038));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1.5px 0 rgba(255,255,255,.16);
}
html.dm-on .um3-hero__glow {
  position: absolute; inset: -70% -20% auto -20%; height: 130%; pointer-events: none;
  border-radius: 50%; filter: blur(36px);
  background: radial-gradient(50% 60% at 76% 55%, rgba(75,99,255,.16), transparent 70%);
}
html.dm-on .um3-hero__lbl {
  position: relative; display: block;
  font: 650 9.5px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: #8B95B0;
}
html[data-theme="dark"].dm-on .um3-hero__lbl { color: #7B86A6; }
html.dm-on .um3-hero__val {
  position: relative; display: flex; align-items: baseline; gap: 7px; margin: 8px 0 0;
  font: 780 36px/1 var(--font-display); letter-spacing: -.045em; color: var(--m-ink);
  font-variant-numeric: tabular-nums;
}
html.dm-on .um3-hero__per { font: 650 15px/1 var(--font-display); letter-spacing: -.02em; color: #9AA4B8; }
html[data-theme="dark"].dm-on .um3-hero__per { color: #6E7893; }
html.dm-on .um3-facts {
  position: relative; display: flex; gap: 8px; margin: 12px 0 0; padding: 13px 0 0;
  border-top: 1px solid rgba(14,22,56,.08);
}
html[data-theme="dark"].dm-on .um3-facts { border-top-color: rgba(255,255,255,.09); }
html.dm-on .um3-fact { flex: 1; min-width: 0; }
html.dm-on .um3-fact__k {
  display: block; font: 650 9.5px/1 var(--font-display); letter-spacing: .10em;
  text-transform: uppercase; color: #A3ACC2;
}
html[data-theme="dark"].dm-on .um3-fact__k { color: #6E7893; }
html.dm-on .um3-fact__v {
  display: block; margin: 5px 0 0; font: 650 13px/1.2 var(--font-display);
  color: var(--m-ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}

/* the pending-invite nudge, the same shape and tone as Recurring's attention row */
html.dm-on .um3-nudge {
  position: relative; display: flex; align-items: center; gap: 9px; width: 100%;
  margin: 12px 0 0; padding: 10px 12px; border: 0; border-radius: 14px;
  text-align: left; font: 650 13px/1.25 var(--font-display); letter-spacing: -.01em;
  color: #B67912; background: rgba(245,170,40,.12);
  box-shadow: inset 0 0 0 1px rgba(182,121,18,.16);
}
html[data-theme="dark"].dm-on .um3-nudge {
  color: #F5B84A; background: rgba(245,184,74,.12); box-shadow: inset 0 0 0 1px rgba(245,184,74,.18);
}
html.dm-on .um3-nudge__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.dm-on .um3-nudge__s {
  font: 500 11.5px/1.2 var(--font); opacity: .85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- section eyebrow + ONE grouped card -------------------------------------------- */
html.dm-on .um3-sec {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 0 4px 8px;
  font: 700 11px/1 var(--font-display); letter-spacing: .10em; text-transform: uppercase; color: #8B95B0;
}
html[data-theme="dark"].dm-on .um3-sec { color: #7B86A6; }
html.dm-on .um3-sec .c {
  font: 700 10px/1 var(--font-display); letter-spacing: .04em; color: #A3ACC2; padding-left: 6px;
}
html[data-theme="dark"].dm-on .um3-sec .c { color: #6E7893; }
html.dm-on .um3-grp {
  border-radius: 22px; overflow: hidden; margin: 0 0 22px; background: #FCFDFF;
  box-shadow: inset 0 0 0 1px rgba(72,90,164,.09), 0 8px 22px -18px rgba(26,38,98,.38);
}
html[data-theme="dark"].dm-on .um3-grp { background: #131519; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }

/* ---- the person row ---------------------------------------------------------------- */
html.dm-on .um3-row {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  width: 100%; border: 0; background: none; text-align: left; cursor: pointer;
}
html.dm-on .um3-row + .um3-row::before {
  content: ''; position: absolute; left: 66px; right: 0; top: 0; height: 1px; background: rgba(14,22,56,.09);
}
html[data-theme="dark"].dm-on .um3-row + .um3-row::before { background: rgba(255,255,255,.09); }
/* ⚠ `.um-av` is a 56px CIRCLE in the v2 sheet and the gradient is written inline by
   umRowHTML(), so width/height/border-radius here need !important to win. Deliberate. */
html.dm-on .um3-row .um3-av {
  flex: 0 0 auto; position: relative; overflow: visible;
  width: 40px !important; height: 40px !important; border-radius: 13px !important;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 14px/1 var(--font-display); letter-spacing: .01em; color: #FFFFFF;
}
html.dm-on .um3-row.is-off .um3-av { opacity: .55; }
html.dm-on .um3-pip {
  position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%;
  box-shadow: 0 0 0 2px #FCFDFF;
}
html[data-theme="dark"].dm-on .um3-pip { box-shadow: 0 0 0 2px #131519; }
html.dm-on .um3-row__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.dm-on .um3-row__n {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  font: 650 15.5px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--m-ink);
}
html.dm-on .um3-row__n > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.dm-on .um3-you {
  flex: 0 0 auto; padding: 3px 7px; border-radius: 999px;
  font: 700 9.5px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase;
  color: #3D4FE0; background: rgba(75,99,255,.12);
}
html[data-theme="dark"].dm-on .um3-you { color: #93A2FF; background: rgba(147,162,255,.15); }
html.dm-on .um3-row__s {
  font: 500 12px/1.25 var(--font); color: #8B95AE;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme="dark"].dm-on .um3-row__s { color: #79849F; }
/* the STATUS WORD only — tinting the whole sub-line made a pending row the loudest
   thing on the screen and buried the signal it was meant to carry */
html.dm-on .um3-row__s b { font-weight: 650; }
html.dm-on .um3-row__s b.is-pend { color: #B67912; }
html[data-theme="dark"].dm-on .um3-row__s b.is-pend { color: #F5B84A; }
html.dm-on .um3-row__s b.is-off { color: #7A8496; }
html[data-theme="dark"].dm-on .um3-row__s b.is-off { color: #8A94A8; }
html.dm-on .um3-row__chev { flex: 0 0 auto; font-size: 12.5px; color: #B9C0D0; margin-left: 2px; }
html[data-theme="dark"].dm-on .um3-row__chev { color: #5A6480; }

/* ---- empty state -------------------------------------------------------------------- */
html.dm-on .um3-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 46px 24px 40px;
}
html.dm-on .um3-empty__i {
  width: 54px; height: 54px; border-radius: 18px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 22px; margin: 0 0 14px;
  background: rgba(75,99,255,.09); color: #4B63FF;
}
html[data-theme="dark"].dm-on .um3-empty__i { background: rgba(147,162,255,.13); color: #93A2FF; }
html.dm-on .um3-empty__t {
  margin: 0; font: 700 17px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--m-ink);
}
html.dm-on .um3-empty__s {
  margin: 6px 0 0; font: 500 13px/1.4 var(--font); color: #8B95AE; max-width: 260px;
}
html[data-theme="dark"].dm-on .um3-empty__s { color: #79849F; }

/* ---- loading skeleton (self-contained: `.sk` is scoped `.dm .sk`, out of reach here) - */
html.dm-on .um3-sk { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
html.dm-on .um3-sk + .um3-sk { box-shadow: inset 0 1px 0 rgba(14,22,56,.09); }
html[data-theme="dark"].dm-on .um3-sk + .um3-sk { box-shadow: inset 0 1px 0 rgba(255,255,255,.09); }
html.dm-on .um3-sk__i { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px; }
html.dm-on .um3-sk__b { flex: 1; min-width: 0; }
html.dm-on .um3-sk__l1 { display: block; width: 55%; height: 13px; border-radius: 6px; }
html.dm-on .um3-sk__l2 { display: block; width: 72%; height: 11px; border-radius: 6px; margin-top: 7px; }
html.dm-on .um3-sk__i, html.dm-on .um3-sk__l1, html.dm-on .um3-sk__l2 {
  position: relative; overflow: hidden; background: rgba(11,18,38,.06);
}
html[data-theme="dark"].dm-on .um3-sk__i,
html[data-theme="dark"].dm-on .um3-sk__l1,
html[data-theme="dark"].dm-on .um3-sk__l2 { background: rgba(255,255,255,.07); }
html.dm-on .um3-sk__i::after, html.dm-on .um3-sk__l1::after, html.dm-on .um3-sk__l2::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  animation: dx3sk 1.35s ease-in-out infinite;
}
html[data-theme="dark"].dm-on .um3-sk__i::after,
html[data-theme="dark"].dm-on .um3-sk__l1::after,
html[data-theme="dark"].dm-on .um3-sk__l2::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
}
@media (prefers-reduced-motion: reduce) {
  html.dm-on .um3-sk__i::after, html.dm-on .um3-sk__l1::after, html.dm-on .um3-sk__l2::after { animation: none; }
}


/* =====================================================================================
 *  v3.23.0 — EMAIL TEMPLATES (phone) in the Settings language. Root `.et--v3`.
 *  Appended, never edited in place (§4.7 scoping rule).
 *
 *  ⚠ THE SWITCHES ARE INDIGO NOW, NOT GREEN. This is the exact finding from Recurring
 *  v3.20.0: a switch is an interactive control, and interactive is indigo everywhere in
 *  this app. Green is the money-in colour (the Payments hero, the collected segment of
 *  the invoice list's collection bar). Nothing on this screen is money. Do not put it
 *  back. The Active/Off status pill loses its green for the same reason — "active" is a
 *  state, not an amount received.
 *
 *  ⚠ NO GOLD. The old header wore a gold `.dm__eb` eyebrow over the company name.
 *
 *  ⚠ SCOPE: PHONE ONLY. renderDesktop() is a separate render path and is UNTOUCHED.
 * ================================================================================== */

html.dm-on .et--v3 { padding: 0; }
html.dm-on .et3__scroll {
  padding: calc(var(--sat, env(safe-area-inset-top, 0px)) + 6px) var(--m-gutter)
           calc(150px + var(--sab, env(safe-area-inset-bottom, 0px)));
  display: block;
}

/* ---- bare large title -------------------------------------------------------------- */
html.dm-on .et3-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 2px 2px 14px;
}
html.dm-on .et3-title {
  margin: 0; font: 800 34px/1.02 var(--font-display); letter-spacing: -.035em; color: var(--m-ink);
}
html.dm-on .et3-ghost {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
  background: rgba(11,18,38,.05); color: var(--m-ink-2);
}
html[data-theme="dark"].dm-on .et3-ghost { background: rgba(255,255,255,.07); color: #C3CBE2; }

/* ---- hero ---------------------------------------------------------------------------- */
html.dm-on .et3-hero {
  position: relative; overflow: hidden; border-radius: 22px; padding: 16px 17px 14px; margin: 0 0 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,246,253,.92));
  box-shadow: inset 0 0 0 1px rgba(72,90,164,.10), inset 0 1.5px 0 rgba(255,255,255,1),
              0 10px 26px -20px rgba(26,38,98,.42);
}
html[data-theme="dark"].dm-on .et3-hero {
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.038));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1.5px 0 rgba(255,255,255,.16);
}
html.dm-on .et3-hero__glow {
  position: absolute; inset: -70% -20% auto -20%; height: 130%; pointer-events: none;
  border-radius: 50%; filter: blur(36px);
  background: radial-gradient(50% 60% at 76% 55%, rgba(75,99,255,.16), transparent 70%);
}
html.dm-on .et3-hero__lbl {
  position: relative; display: block;
  font: 650 9.5px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: #8B95B0;
}
html[data-theme="dark"].dm-on .et3-hero__lbl { color: #7B86A6; }
html.dm-on .et3-hero__val {
  position: relative; display: flex; align-items: baseline; gap: 7px; margin: 8px 0 0;
  font: 780 36px/1 var(--font-display); letter-spacing: -.045em; color: var(--m-ink);
  font-variant-numeric: tabular-nums;
}
html.dm-on .et3-hero__per { font: 650 15px/1 var(--font-display); letter-spacing: -.02em; color: #9AA4B8; }
html[data-theme="dark"].dm-on .et3-hero__per { color: #6E7893; }
html.dm-on .et3-hero__cap {
  position: relative; display: block; margin: 7px 0 0;
  font: 500 13px/1.35 var(--font); color: #7C86A0;
}
html[data-theme="dark"].dm-on .et3-hero__cap { color: #8792AD; }

/* ---- section eyebrow + ONE grouped card ---------------------------------------------- */
html.dm-on .et3-sec {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 0 4px 8px;
  font: 700 11px/1 var(--font-display); letter-spacing: .10em; text-transform: uppercase; color: #8B95B0;
}
html[data-theme="dark"].dm-on .et3-sec { color: #7B86A6; }
html.dm-on .et3-sec .c {
  font: 700 10px/1 var(--font-display); letter-spacing: .04em; color: #A3ACC2; padding-left: 6px;
}
html[data-theme="dark"].dm-on .et3-sec .c { color: #6E7893; }
html.dm-on .et3-grp {
  border-radius: 22px; overflow: hidden; margin: 0 0 22px; background: #FCFDFF;
  box-shadow: inset 0 0 0 1px rgba(72,90,164,.09), 0 8px 22px -18px rgba(26,38,98,.38);
}
html[data-theme="dark"].dm-on .et3-grp { background: #131519; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }

/* ---- the template row ----------------------------------------------------------------- */
html.dm-on .et3-row {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  width: 100%; border: 0; background: none; text-align: left; cursor: pointer;
}
html.dm-on .et3-row + .et3-row::before {
  content: ''; position: absolute; left: 66px; right: 0; top: 0; height: 1px; background: rgba(14,22,56,.09);
}
html[data-theme="dark"].dm-on .et3-row + .et3-row::before { background: rgba(255,255,255,.09); }
/* the SELECTED row is a tinted field, not a left bar — the bar read as a scroll artefact */
html.dm-on .et3-row.is-sel { background: rgba(75,99,255,.055); }
html[data-theme="dark"].dm-on .et3-row.is-sel { background: rgba(147,162,255,.09); }
html.dm-on .et3-row__ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
  background: rgba(75,99,255,.09); color: #4B63FF;
}
html[data-theme="dark"].dm-on .et3-row__ic { background: rgba(147,162,255,.13); color: #93A2FF; }
/* an OFF template falls back to built-in wording — slate, so "on" reads at a glance */
html.dm-on .et3-row.is-off .et3-row__ic { background: rgba(100,116,139,.12); color: #5B6779; }
html[data-theme="dark"].dm-on .et3-row.is-off .et3-row__ic { background: rgba(148,163,184,.14); color: #A8B3C8; }
html.dm-on .et3-row__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.dm-on .et3-row__n {
  font: 650 15.5px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--m-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.dm-on .et3-row__s {
  font: 500 12px/1.25 var(--font); color: #8B95AE;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme="dark"].dm-on .et3-row__s { color: #79849F; }

/* ⚠ INDIGO. See the block header. `.et-sw` in the v2 sheet is green and sets its own
   background, so this is a distinct class rather than an override. */
html.dm-on .et3-sw {
  flex: 0 0 auto; width: 51px; height: 31px; border: 0; border-radius: 999px; cursor: pointer;
  position: relative; background: rgba(11,18,38,.12); transition: background .22s ease;
}
html[data-theme="dark"].dm-on .et3-sw { background: rgba(255,255,255,.16); }
html.dm-on .et3-sw::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 2px 5px rgba(10,31,68,.28); transition: transform .22s var(--ease, ease);
}
html.dm-on .et3-sw[aria-checked="true"] { background: linear-gradient(150deg, #6C7CFF, #3D4FE0); }
html.dm-on .et3-sw[aria-checked="true"]::after { transform: translateX(20px); }

/* ---- the preview -------------------------------------------------------------------- */
html.dm-on .et3-pv__hd {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 4px 8px;
}
html.dm-on .et3-pv__lbl {
  font: 700 11px/1 var(--font-display); letter-spacing: .10em; text-transform: uppercase; color: #8B95B0;
}
html[data-theme="dark"].dm-on .et3-pv__lbl { color: #7B86A6; }
/* the status pill is NOT green — "active" is a state, not money received */
html.dm-on .et3-stat {
  padding: 4px 9px; border-radius: 999px;
  font: 700 10px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase;
  color: #3D4FE0; background: rgba(75,99,255,.12);
}
html[data-theme="dark"].dm-on .et3-stat { color: #93A2FF; background: rgba(147,162,255,.15); }
html.dm-on .et3-stat.is-off { color: #6B7690; background: rgba(100,116,139,.12); }
html[data-theme="dark"].dm-on .et3-stat.is-off { color: #A8B3C8; background: rgba(148,163,184,.14); }

html.dm-on .et3-mail {
  border-radius: 22px; overflow: hidden; margin: 0 0 12px; background: #FCFDFF;
  box-shadow: inset 0 0 0 1px rgba(72,90,164,.09), 0 8px 22px -18px rgba(26,38,98,.38);
}
html[data-theme="dark"].dm-on .et3-mail { background: #131519; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
html.dm-on .et3-mail__from {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid rgba(14,22,56,.08);
}
html[data-theme="dark"].dm-on .et3-mail__from { border-bottom-color: rgba(255,255,255,.09); }
html.dm-on .et3-mail__ava {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 12px/1 var(--font-display); color: #FFFFFF;
  background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
}
html.dm-on .et3-mail__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.dm-on .et3-mail__who b {
  font: 650 14px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--m-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.dm-on .et3-mail__who span {
  font: 500 11.5px/1.2 var(--font); color: #8B95AE;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme="dark"].dm-on .et3-mail__who span { color: #79849F; }
html.dm-on .et3-mail__time { flex: 0 0 auto; font: 600 11.5px/1 var(--font-display); color: #A3ACC2; }
html.dm-on .et3-mail__subj {
  padding: 13px 14px 0; font: 650 14.5px/1.35 var(--font-display); letter-spacing: -.015em; color: var(--m-ink);
}
html.dm-on .et3-mail__body {
  padding: 8px 14px 14px; font: 500 13.5px/1.6 var(--font); color: var(--m-ink-2);
}
html[data-theme="dark"].dm-on .et3-mail__body { color: #AEB7CE; }
/* ⚠ NO FADE-OUT CLIP. The old preview cut the email mid-sentence behind a gradient, so it
   promised a whole message and delivered two thirds. The body is clamped to a whole number
   of lines and the sign-off is always rendered, so what you see ends where the email ends. */
html.dm-on .et3-mail__msg {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6;
  overflow: hidden;
}
html.dm-on .et3-mail__sign { margin-top: 12px; }
html.dm-on .et3-var {
  display: inline; padding: 1px 5px; border-radius: 6px;
  font-weight: 650; color: #3D4FE0; background: rgba(75,99,255,.10);
}
html[data-theme="dark"].dm-on .et3-var { color: #A9B5FF; background: rgba(147,162,255,.14); }
html.dm-on .et3-edit {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  height: 50px; margin: 0 0 22px; border: 0; border-radius: 17px; cursor: pointer;
  font: 700 15.5px/1 var(--font-display); letter-spacing: -.01em; color: #FFFFFF;
  background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 12px 24px -14px rgba(61,79,224,.95), inset 0 1px 0 rgba(255,255,255,.22);
}

/* ---- empty + skeleton ------------------------------------------------------------------ */
html.dm-on .et3-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; padding: 46px 24px 40px;
}
html.dm-on .et3-empty__i {
  width: 54px; height: 54px; border-radius: 18px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 22px; margin: 0 0 14px;
  background: rgba(75,99,255,.09); color: #4B63FF;
}
html[data-theme="dark"].dm-on .et3-empty__i { background: rgba(147,162,255,.13); color: #93A2FF; }
html.dm-on .et3-empty__t { margin: 0; font: 700 17px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--m-ink); }
html.dm-on .et3-empty__s { margin: 6px 0 0; font: 500 13px/1.4 var(--font); color: #8B95AE; max-width: 260px; }
html[data-theme="dark"].dm-on .et3-empty__s { color: #79849F; }

html.dm-on .et3-sk { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
html.dm-on .et3-sk + .et3-sk { box-shadow: inset 0 1px 0 rgba(14,22,56,.09); }
html[data-theme="dark"].dm-on .et3-sk + .et3-sk { box-shadow: inset 0 1px 0 rgba(255,255,255,.09); }
html.dm-on .et3-sk__i { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px; }
html.dm-on .et3-sk__b { flex: 1; min-width: 0; }
html.dm-on .et3-sk__l1 { display: block; width: 52%; height: 13px; border-radius: 6px; }
html.dm-on .et3-sk__l2 { display: block; width: 70%; height: 11px; border-radius: 6px; margin-top: 7px; }
html.dm-on .et3-sk__i, html.dm-on .et3-sk__l1, html.dm-on .et3-sk__l2 {
  position: relative; overflow: hidden; background: rgba(11,18,38,.06);
}
html[data-theme="dark"].dm-on .et3-sk__i,
html[data-theme="dark"].dm-on .et3-sk__l1,
html[data-theme="dark"].dm-on .et3-sk__l2 { background: rgba(255,255,255,.07); }
html.dm-on .et3-sk__i::after, html.dm-on .et3-sk__l1::after, html.dm-on .et3-sk__l2::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  animation: dx3sk 1.35s ease-in-out infinite;
}
html[data-theme="dark"].dm-on .et3-sk__i::after,
html[data-theme="dark"].dm-on .et3-sk__l1::after,
html[data-theme="dark"].dm-on .et3-sk__l2::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
}
@media (prefers-reduced-motion: reduce) {
  html.dm-on .et3-sk__i::after, html.dm-on .et3-sk__l1::after, html.dm-on .et3-sk__l2::after { animation: none; }
}

/* ⚠ `fillSample()` and `greeting()` emit the v2 `.et-var` class, and they are SHARED with
   the editor's live preview (~line 424), so the JS must not be changed to `.et3-var`.
   Restyle it under the v3 root instead — otherwise the token pills render in the old grey
   and the preview does not match its own sign-off pill sitting directly beneath it.
   Caught by rendering the shipped build rather than trusting the candidate harness. */
html.dm-on .et--v3 .et-var {
  display: inline; padding: 1px 5px; border-radius: 6px; white-space: nowrap;
  font-weight: 650; color: #3D4FE0; background: rgba(75,99,255,.10);
}
html[data-theme="dark"].dm-on .et--v3 .et-var { color: #A9B5FF; background: rgba(147,162,255,.14); }


/* =====================================================================================
 *  v3.24.0 — ACTIVITY (phone) in the Settings language. Root `.av--v3`.
 *  Appended, never edited in place (§4.7 scoping rule).
 *
 *  ⚠ THERE IS NO HERO ON THIS SCREEN, AND THAT IS DELIBERATE. Every other screen in the
 *  pass got one because it had an actionable fact to surface — money owed, pending
 *  invites, templates silently switched off. A feed does not. The only candidate summary
 *  ("9 events today") is ALREADY the day header's count, and adding it would be the exact
 *  duplication removed from the Documents hero in v3.21.0. Do not add one for symmetry.
 *
 *  ⚠ GREEN IS CORRECT HERE, unlike on the Email templates switches. `payment.recorded`
 *  and `invoice.paid` markers are green because they ARE money in (§4.7). The v3.23.0 rule
 *  bans green on interactive controls, not on money semantics. Leave these alone.
 *
 *  ⚠ SCOPE: PHONE ONLY. mountDesktop() / shellHTML() are a separate path, UNTOUCHED.
 * ================================================================================== */

html.dm-on .av--v3 { padding: 0; }
html.dm-on .av3__scroll {
  padding: calc(var(--sat, env(safe-area-inset-top, 0px)) + 6px) var(--m-gutter)
           calc(150px + var(--sab, env(safe-area-inset-bottom, 0px)));
  display: block;
}
html.dm-on .av3-head { padding: 2px 2px 14px; }
html.dm-on .av3-title {
  margin: 0; font: 800 34px/1.02 var(--font-display); letter-spacing: -.035em; color: var(--m-ink);
}

/* ---- filter rail — the invoice-list idiom, WITH the edge fade ------------------------
   ⚠ The old `.av-chips` had no mask, so "Customers" was sliced flat at the screen edge
   and looked like a clipped layout rather than a scrollable rail. Icons are dropped: six
   filters with icons cannot fit, and the icon was decorative on every one of them. */
html.dm-on .av3-rail {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--m-gutter)) 20px; padding: 2px var(--m-gutter) 6px;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
          mask-image: linear-gradient(90deg, #000 88%, transparent);
}
html.dm-on .av3-rail::-webkit-scrollbar { display: none; }
html.dm-on .av3-chip {
  flex: 0 0 auto; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: 650 13.5px/1 var(--font-display); letter-spacing: -.01em; color: var(--m-ink-2);
  background: rgba(11,18,38,.05); box-shadow: inset 0 0 0 1px rgba(11,18,38,.04);
}
html[data-theme="dark"].dm-on .av3-chip { color: #AEB7CE; background: rgba(255,255,255,.07); box-shadow: none; }
html.dm-on .av3-chip.is-on {
  color: #FFFFFF; background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 8px 18px -12px rgba(61,79,224,.9);
}

/* ---- day eyebrow + ONE grouped card per day ----------------------------------------- */
html.dm-on .av3-day {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 4px 8px;
  font: 700 11px/1 var(--font-display); letter-spacing: .10em; text-transform: uppercase; color: #8B95B0;
}
html[data-theme="dark"].dm-on .av3-day { color: #7B86A6; }
html.dm-on .av3-day .c {
  font: 700 10px/1 var(--font-display); letter-spacing: .04em; color: #A3ACC2;
}
html[data-theme="dark"].dm-on .av3-day .c { color: #6E7893; }
html.dm-on .av3-grp {
  border-radius: 22px; overflow: hidden; margin: 0 0 22px; background: #FCFDFF;
  box-shadow: inset 0 0 0 1px rgba(72,90,164,.09), 0 8px 22px -18px rgba(26,38,98,.38);
}
html[data-theme="dark"].dm-on .av3-grp { background: #131519; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }

/* ---- the event row -------------------------------------------------------------------- */
html.dm-on .av3-row {
  position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
  width: 100%; border: 0; background: none; text-align: left;
}
html.dm-on .av3-row + .av3-row::before,
html.dm-on .av3-row + .av3-sub::before {
  content: ''; position: absolute; left: 66px; right: 0; top: 0; height: 1px; background: rgba(14,22,56,.09);
}
html[data-theme="dark"].dm-on .av3-row + .av3-row::before,
html[data-theme="dark"].dm-on .av3-row + .av3-sub::before { background: rgba(255,255,255,.09); }
html.dm-on .av3-row__ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
}
/* tones: navy is the neutral ink identity; green/amber/coral carry meaning, not decoration */
html.dm-on .av3-row__ic.t-navy  { background: rgba(36,59,107,.10);  color: #243B6B; }
html.dm-on .av3-row__ic.t-green { background: rgba(15,138,95,.12);  color: #0F8A5F; }
html.dm-on .av3-row__ic.t-amber { background: rgba(182,121,18,.13); color: #B67912; }
html.dm-on .av3-row__ic.t-coral { background: rgba(200,62,62,.12);  color: #C83E3E; }
html.dm-on .av3-row__ic.t-gray  { background: rgba(100,116,139,.12); color: #5B6779; }
html[data-theme="dark"].dm-on .av3-row__ic.t-navy  { background: rgba(147,162,255,.13); color: #93A2FF; }
html[data-theme="dark"].dm-on .av3-row__ic.t-green { background: rgba(52,199,142,.14);  color: #34C78E; }
html[data-theme="dark"].dm-on .av3-row__ic.t-amber { background: rgba(245,184,74,.14);  color: #F5B84A; }
html[data-theme="dark"].dm-on .av3-row__ic.t-coral { background: rgba(255,122,122,.14); color: #FF7A7A; }
html[data-theme="dark"].dm-on .av3-row__ic.t-gray  { background: rgba(148,163,184,.14); color: #A8B3C8; }
html.dm-on .av3-row__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
html.dm-on .av3-row__s {
  font: 600 14.5px/1.35 var(--font-display); letter-spacing: -.015em; color: var(--m-ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
html.dm-on .av3-row__s.is-muted { color: #7C86A0; font-weight: 550; }
html[data-theme="dark"].dm-on .av3-row__s.is-muted { color: #8792AD; }
html.dm-on .av3-row__m {
  font: 500 12px/1.25 var(--font); color: #8B95AE;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme="dark"].dm-on .av3-row__m { color: #79849F; }
html.dm-on .av3-row[data-fold] { cursor: pointer; }
html.dm-on .av3-row__caret { flex: 0 0 auto; font-size: 12px; color: #B9C0D0; margin-top: 13px; transition: transform .2s ease; }
html[data-theme="dark"].dm-on .av3-row__caret { color: #5A6480; }
html.dm-on .av3-row.is-open .av3-row__caret { transform: rotate(90deg); }
/* folded children sit indented inside the same card, on a faint field */
html.dm-on .av3-sub { background: rgba(11,18,38,.022); }
html[data-theme="dark"].dm-on .av3-sub { background: rgba(255,255,255,.025); }
html.dm-on .av3-sub .av3-row { padding-left: 30px; }
html.dm-on .av3-sub .av3-row__ic { width: 30px; height: 30px; border-radius: 10px; font-size: 13px; }
html.dm-on .av3-sub .av3-row + .av3-row::before { left: 72px; }
html.dm-on .av3-sub .av3-row__s { font-size: 13.5px; }

html.dm-on .av3-end {
  text-align: center; padding: 4px 0 10px;
  font: 500 12.5px/1.4 var(--font); color: #9AA4B8;
}
html[data-theme="dark"].dm-on .av3-end { color: #6E7893; }

/* the "new activity" pill that appears when rows arrive while scrolled down */
html.dm-on .av3-new {
  display: block; margin: 0 auto 14px; padding: 9px 16px; border: 0; border-radius: 999px; cursor: pointer;
  font: 650 13px/1 var(--font-display); color: #FFFFFF;
  background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 10px 22px -12px rgba(61,79,224,.95);
}

/* ---- empty + skeleton ------------------------------------------------------------------ */
html.dm-on .av3-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; padding: 46px 24px 40px;
}
html.dm-on .av3-empty__i {
  width: 54px; height: 54px; border-radius: 18px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 22px; margin: 0 0 14px;
  background: rgba(75,99,255,.09); color: #4B63FF;
}
html[data-theme="dark"].dm-on .av3-empty__i { background: rgba(147,162,255,.13); color: #93A2FF; }
html.dm-on .av3-empty__t { margin: 0; font: 700 17px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--m-ink); }
html.dm-on .av3-empty__s { margin: 6px 0 0; font: 500 13px/1.4 var(--font); color: #8B95AE; max-width: 270px; }
html[data-theme="dark"].dm-on .av3-empty__s { color: #79849F; }

html.dm-on .av3-sk { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
html.dm-on .av3-sk + .av3-sk { box-shadow: inset 0 1px 0 rgba(14,22,56,.09); }
html[data-theme="dark"].dm-on .av3-sk + .av3-sk { box-shadow: inset 0 1px 0 rgba(255,255,255,.09); }
html.dm-on .av3-sk__i { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px; }
html.dm-on .av3-sk__b { flex: 1; min-width: 0; }
html.dm-on .av3-sk__l1 { display: block; width: 78%; height: 13px; border-radius: 6px; }
html.dm-on .av3-sk__l2 { display: block; width: 42%; height: 11px; border-radius: 6px; margin-top: 7px; }
html.dm-on .av3-sk__i, html.dm-on .av3-sk__l1, html.dm-on .av3-sk__l2 {
  position: relative; overflow: hidden; background: rgba(11,18,38,.06);
}
html[data-theme="dark"].dm-on .av3-sk__i,
html[data-theme="dark"].dm-on .av3-sk__l1,
html[data-theme="dark"].dm-on .av3-sk__l2 { background: rgba(255,255,255,.07); }
html.dm-on .av3-sk__i::after, html.dm-on .av3-sk__l1::after, html.dm-on .av3-sk__l2::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  animation: dx3sk 1.35s ease-in-out infinite;
}
html[data-theme="dark"].dm-on .av3-sk__i::after,
html[data-theme="dark"].dm-on .av3-sk__l1::after,
html[data-theme="dark"].dm-on .av3-sk__l2::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
}
@media (prefers-reduced-motion: reduce) {
  html.dm-on .av3-sk__i::after, html.dm-on .av3-sk__l1::after, html.dm-on .av3-sk__l2::after { animation: none; }
}


/* =====================================================================================
 *  v3.26.0 — NOTIFICATIONS (phone) in the Settings language. Root `.nt3`.
 *  Appended, never edited in place (§4.7 scoping rule).
 *
 *  ⚠ THE REAL FINDING: THIS WAS THE ONE MODAL IN THE APP THAT WAS NOT A SHEET.
 *  §v3.9.4 measured all nine bottom sheets and found them already one language —
 *  30px radius, a 40x5 grabber, and an IDENTICAL scrim. The notification panel had
 *  none of the three: 22px radius, no grabber, and NO SCRIM AT ALL, so it slid up over
 *  live content with nothing dimmed and no way to tell it was modal. It is now a member
 *  of that family, and `.nt3__scrim` is added to the shared scrim rule rather than given
 *  a lookalike of its own — a copy would drift the moment the shared one is retuned.
 *
 *  ⚠ IT ALSO HAD NO BOTTOM SAFE-AREA INSET. Anchored to `bottom:0` with no
 *  `env(safe-area-inset-bottom)`, the last row sat under the home bar on every notched
 *  phone — the exact class of bug the owner had just had fixed at the top of the screen.
 *
 *  ⚠ COLOURS: the old panel used the DESKTOP token set (--blue, --critical, --positive,
 *  --purple, --accent). Interactive is indigo here like everywhere else (§v3.23.0), and
 *  green stays only where it means money in (§4.7) — a received payment.
 * ================================================================================== */

html.dm-on .nt3__scrim {
  position: fixed; inset: 0; z-index: 2999; opacity: 0;
  transition: opacity .32s cubic-bezier(.22,.61,.36,1);
}
html.dm-on .nt3__scrim.is-open { opacity: 1; }

/* ---- the sheet ---------------------------------------------------------------------- */
html.dm-on .notif-panel.nt3 {
  position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  top: auto !important; width: 100% !important; max-width: 100% !important;
  z-index: 3000; display: flex; flex-direction: column;
  max-height: min(82vh, 720px);
  border: 0; border-radius: 30px 30px 0 0;   /* 30px — the shared sheet radius */
  background: var(--m-bg);
  box-shadow: 0 -22px 50px -20px rgba(10,12,20,.42);
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow: hidden;
}
html.dm-on .notif-panel.nt3.is-open { transform: none; }

/* the grabber — 40x5, the shared spec */
html.dm-on .nt3__grip {
  width: 40px; height: 5px; border-radius: 3px; flex: 0 0 auto;
  background: rgba(130,140,160,.5); margin: 8px auto 2px; cursor: grab;
}

/* ---- header --------------------------------------------------------------------------
   ⚠ NEVER TWO BULK BUTTONS AT ONCE. The old header showed "Mark all read" AND "Mark all
   unread" side by side, competing with each other and with the title. They are mutually
   exclusive by meaning: only one of them can ever do anything. `nt3Bulk()` shows read-all
   while anything is unread, and undo-all only once everything is read. */
html.dm-on .nt3__hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 18px 12px; flex: 0 0 auto;
}
html.dm-on .nt3__t {
  margin: 0; display: flex; align-items: baseline; gap: 8px;
  font: 800 22px/1.1 var(--font-display); letter-spacing: -.03em; color: var(--m-ink);
}
html.dm-on .nt3__n {
  font: 700 12px/1 var(--font-display); letter-spacing: -.01em;
  color: #3D4FE0; background: rgba(75,99,255,.12); padding: 4px 8px; border-radius: 999px;
}
html[data-theme="dark"].dm-on .nt3__n { color: #93A2FF; background: rgba(147,162,255,.15); }
html.dm-on .nt3__bulk {
  flex: 0 0 auto; border: 0; cursor: pointer; padding: 8px 13px; border-radius: 999px;
  font: 650 13px/1 var(--font-display); letter-spacing: -.01em;
  color: #3D4FE0; background: rgba(75,99,255,.10);
}
html[data-theme="dark"].dm-on .nt3__bulk { color: #A9B5FF; background: rgba(147,162,255,.14); }
html.dm-on .nt3__bulk.is-quiet { color: var(--m-ink-2); background: rgba(11,18,38,.05); }
html[data-theme="dark"].dm-on .nt3__bulk.is-quiet { color: #AEB7CE; background: rgba(255,255,255,.07); }

/* ---- list + day sections -------------------------------------------------------------- */
html.dm-on .nt3__list {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 0 var(--m-gutter) 18px;
}
html.dm-on .nt3-sec {
  padding: 10px 4px 8px;
  font: 700 11px/1 var(--font-display); letter-spacing: .10em; text-transform: uppercase; color: #8B95B0;
}
html[data-theme="dark"].dm-on .nt3-sec { color: #7B86A6; }
html.dm-on .nt3-grp {
  border-radius: 22px; overflow: hidden; margin: 0 0 6px; background: #FCFDFF;
  box-shadow: inset 0 0 0 1px rgba(72,90,164,.09), 0 8px 22px -18px rgba(26,38,98,.38);
}
html[data-theme="dark"].dm-on .nt3-grp { background: #131519; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }

/* ---- the row ---------------------------------------------------------------------------
   ⚠ NO LEFT BAR ON UNREAD. The old one drew a thick blue bar down the left edge of the
   row AND filled the row with blue — two signals for one state, and against a card edge
   the bar reads as a scroll artefact (the same reason it was dropped from the Email
   templates selected row in v3.23.0). Unread is now ONE signal: the indigo dot. */
html.dm-on .nt3-row { position: relative; display: flex; align-items: stretch; }
html.dm-on .nt3-row + .nt3-row::before {
  content: ''; position: absolute; left: 66px; right: 0; top: 0; height: 1px;
  background: rgba(14,22,56,.09); z-index: 1;
}
html[data-theme="dark"].dm-on .nt3-row + .nt3-row::before { background: rgba(255,255,255,.09); }
html.dm-on .nt3-row.is-unread { background: rgba(75,99,255,.045); }
html[data-theme="dark"].dm-on .nt3-row.is-unread { background: rgba(147,162,255,.07); }
html.dm-on .nt3-hit {
  flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 4px 12px 14px; border: 0; background: none; text-align: left; cursor: pointer;
}
html.dm-on .nt3-ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
}
html.dm-on .nt3-ic.t-indigo { background: rgba(75,99,255,.10);  color: #4B63FF; }
html.dm-on .nt3-ic.t-green  { background: rgba(15,138,95,.12);  color: #0F8A5F; }
html.dm-on .nt3-ic.t-amber  { background: rgba(182,121,18,.13); color: #B67912; }
html.dm-on .nt3-ic.t-coral  { background: rgba(200,62,62,.12);  color: #C83E3E; }
html.dm-on .nt3-ic.t-slate  { background: rgba(100,116,139,.12); color: #5B6779; }
html[data-theme="dark"].dm-on .nt3-ic.t-indigo { background: rgba(147,162,255,.13); color: #93A2FF; }
html[data-theme="dark"].dm-on .nt3-ic.t-green  { background: rgba(52,199,142,.14);  color: #34C78E; }
html[data-theme="dark"].dm-on .nt3-ic.t-amber  { background: rgba(245,184,74,.14);  color: #F5B84A; }
html[data-theme="dark"].dm-on .nt3-ic.t-coral  { background: rgba(255,122,122,.14); color: #FF7A7A; }
html[data-theme="dark"].dm-on .nt3-ic.t-slate  { background: rgba(148,163,184,.14); color: #A8B3C8; }
html.dm-on .nt3-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
html.dm-on .nt3-t {
  font: 650 15px/1.3 var(--font-display); letter-spacing: -.02em; color: var(--m-ink);
}
/* ⚠ the body WRAPS to two lines. It used to be nowrap+ellipsis on a 390px sheet, which
   cut "…due 25…" off mid-date — the useful half of the sentence. */
html.dm-on .nt3-s {
  font: 500 12.5px/1.4 var(--font); color: #7C86A0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
html[data-theme="dark"].dm-on .nt3-s { color: #8792AD; }
html.dm-on .nt3-m { font: 500 11.5px/1.2 var(--font); color: #9AA4B8; }
html[data-theme="dark"].dm-on .nt3-m { color: #6E7893; }
html.dm-on .nt3-m b { font-weight: 650; color: #7C86A0; }
html[data-theme="dark"].dm-on .nt3-m b { color: #8792AD; }

/* ⚠ THE READ TOGGLE WAS A BARE ○ ON EVERY ROW — indistinguishable from an unselected
   radio button, so it read as "pick one of these" rather than "mark this read". It is now
   the unread dot itself: filled indigo when unread, a faint ring when read. One control,
   one meaning, and the state and the affordance are the same object. */
html.dm-on .nt3-tog {
  flex: 0 0 auto; width: 42px; border: 0; background: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: center; padding: 18px 0 0;
}
html.dm-on .nt3-tog span {
  width: 10px; height: 10px; border-radius: 50%; display: block;
  background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 0 0 3px rgba(75,99,255,.14);
}
html.dm-on .nt3-row.is-read .nt3-tog span {
  background: none; box-shadow: inset 0 0 0 1.5px rgba(11,18,38,.16);
}
html[data-theme="dark"].dm-on .nt3-row.is-read .nt3-tog span {
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.20);
}

/* ---- empty ------------------------------------------------------------------------------ */
html.dm-on .nt3-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 24px 44px;
}
html.dm-on .nt3-empty__i {
  width: 54px; height: 54px; border-radius: 18px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 22px; margin: 0 0 14px;
  background: rgba(75,99,255,.09); color: #4B63FF;
}
html[data-theme="dark"].dm-on .nt3-empty__i { background: rgba(147,162,255,.13); color: #93A2FF; }
html.dm-on .nt3-empty__t { margin: 0; font: 700 17px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--m-ink); }
html.dm-on .nt3-empty__s { margin: 6px 0 0; font: 500 13px/1.4 var(--font); color: #8B95AE; max-width: 270px; }
html[data-theme="dark"].dm-on .nt3-empty__s { color: #79849F; }

@media (prefers-reduced-motion: reduce) {
  html.dm-on .notif-panel.nt3, html.dm-on .nt3__scrim { transition: none; }
}



/* =====================================================================================
 *  v3.30.0 — INVOICE PREVIEW, PHONE HAND-OFF (`.sx-pvp`).
 *  Android Chrome will not render a PDF inside an <iframe>; it substitutes a download
 *  stub. The phone therefore shows this state instead of a frame, and the tap opens the
 *  file in the browser's own viewer. Owner chose this over bundling pdf.js.
 * ================================================================================== */
html.dm-on .sx-pvp {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 3px; height: 100%; min-height: 190px; padding: 26px 22px;
}
html.dm-on .sx-pvp__ic {
  width: 52px; height: 52px; border-radius: 17px; margin: 0 0 12px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 21px;
  background: rgba(75,99,255,.09); color: #4B63FF;
}
html[data-theme="dark"].dm-on .sx-pvp__ic { background: rgba(147,162,255,.13); color: #93A2FF; }
html.dm-on .sx-pvp__t {
  font: 700 16px/1.25 var(--font-display); letter-spacing: -.02em; color: var(--m-ink);
}
html.dm-on .sx-pvp__s {
  font: 500 12.5px/1.45 var(--font); color: #8B95AE; max-width: 250px;
}
html[data-theme="dark"].dm-on .sx-pvp__s { color: #79849F; }


/* v3.49.1 — phone half of "Delete customer" in the Edit customer form. The destructive
   action is the quietest button: red text, no fill, stacked LAST (the footer is
   column-reverse ~2896, so DOM-first is bottom-most). Desktop half: end of file. */
@media (max-width: 767.98px) {
  .hm-modal:has(#hm-cust-form) .modal-footer .hm-cf-del {
    display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
    height: 46px; padding: 0 16px; margin: 0; border: 0; border-radius: 16px; background: transparent;
    box-shadow: none; cursor: pointer; font: 600 15px/1 var(--font-ui, Inter, sans-serif); color: var(--red, #D92D20);
    -webkit-tap-highlight-color: transparent;
  }
  .hm-modal:has(#hm-cust-form) .modal-footer .hm-cf-del:active { background: rgba(217, 45, 32, .08); }
}

/* =====================================================================================
 *  v3.49.3 — PHONE: eight editor defects + the Settings save bar, found by rendering the REAL views.
 *  Owner: "during invoice creation on phone, the PDF icon is looking bad … fix any other
 *  issues." Every one of these had a DESKTOP rule (the v3.39.0 deck, ~18520-18890) and NO
 *  phone rule, so on the phone the browser's own default showed through.
 *  ⚠ PHONE-ONLY, and placed ABOVE the PC banner on purpose: check-pc-scope forbids
 *  anything phone-scoped after it.
 * ================================================================================== */
@media (max-width: 767.98px) {
  /* 1. THE EMPTY BAND ABOVE "Cancel". The app top bar is `display:none!important` on the
     phone (~6472), but its GRID ROW (--topbar-h, 60px) is only collapsed by `html.dm-on`
     (~3933) — and the editor sets `editor-open`, not `dm-on`. So every step started 91px
     down while every other phone screen starts at ~8px. .ive3-top already pads the safe
     area itself. */
  html.editor-open .app-shell { grid-template-rows: 0 1fr; }
  html.editor-open .app-main { padding-top: 0 !important; }

  /* 2. THE PDF BUTTON — was an unstyled native button (grey box, black border, serif-ish
     system font). A soft indigo pill, the same family as the Cancel link beside it. */
  .ive--v3 .ive3-topacts { display: inline-flex; align-items: center; gap: 10px; }
  .ive--v3 .ive3-ghost {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; margin: 0;
    border: 0; border-radius: 999px; background: rgba(75, 99, 255, .10); color: #4B63FF;
    font: 650 13px/1 var(--font-display); letter-spacing: -.01em; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .ive--v3 .ive3-ghost i { font-size: 13px; line-height: 1; }
  .ive--v3 .ive3-ghost:active { transform: scale(.96); background: rgba(75, 99, 255, .16); }
  html[data-theme="dark"] .ive--v3 .ive3-ghost { background: rgba(147, 162, 255, .14); color: #A6B2FF; }

  /* 3. "CANCEL INVOICE" on Review — also an unstyled native button. Quiet and destructive:
     red text, a red hairline, full width, set apart from the totals above it. */
  .ive--v3 .ive3-dangerwrap { margin: 18px 0 4px; }
  .ive--v3 .ive3-danger {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; margin: 0;
    border: 1px solid rgba(217, 45, 32, .28); border-radius: 16px; background: transparent;
    color: #C5271E; font: 650 15px/1 var(--font-display); letter-spacing: -.01em; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .ive--v3 .ive3-danger:active { background: rgba(217, 45, 32, .07); }
  html[data-theme="dark"] .ive--v3 .ive3-danger { color: #FF8078; border-color: rgba(255, 107, 99, .32); }

  /* 4. "STATUS LOCKED — TAP TO CHANGE" sat on top of Pre-invoice / Due. `.status-unlock` is
     a centred overlay (`inset:0; margin:auto`, ~5014), but `.ive--v3 .status-lock
     .status-unlock { margin: 0 16px 14px }` (~14505) replaced the margin and dropped it into
     the corner. The desktop was repaired in v3.39.0 (~18759); the phone never was. */
  .ive--v3 .status-lock .status-unlock {
    margin: auto; height: 38px; padding: 0 16px; border-radius: 19px; gap: 8px;
    border: 1px solid var(--hair); background: #FFFFFF; color: var(--ink);
    font: 650 13px/1 var(--font-display); box-shadow: 0 10px 24px -12px rgba(11, 18, 38, .35);
  }
  .ive--v3 .status-lock .status-unlock i { color: #4B63FF; }
  html[data-theme="dark"] .ive--v3 .status-lock .status-unlock { background: #1A1F2E; border-color: rgba(255, 255, 255, .12); color: #EEF2F9; }
  html[data-theme="dark"] .ive--v3 .status-lock .status-unlock i { color: #A6B2FF; }

  /* 5. MAKE | MODEL | SERIAL / VIN IN ONE ROW, placeholders clipped to "e.g. Sc". An old
     rule makes `.inv-item__vehicle` a 2-column grid, so the Make/Model PAIR took half a row
     and VIN the other half — the opposite of the markup's own comment ("A VIN takes a row
     of its own"). One column: the pair spans the row, VIN and Weight get theirs. Only the
     COLUMNS change, never `display`, so the vehicle/parking show-hide rules still rule. */
  .ive--v3 .inv-item .inv-item__vehicle,
  .ive--v3 .inv-item .inv-item__parking { grid-template-columns: minmax(0, 1fr); }

  /* 6. "SHIP-TO COUNTRY (OPTIONAL)" read as a filled value (bold ink) because it is the
     select's first option. Empty → placeholder grey (class set in invoicesEditor.js). And
     in dark the native select painted its own slate band behind the text. */
  .ive--v3 #inv-shipto { background-color: transparent; }
  .ive--v3 #inv-shipto.is-empty { color: var(--ink3); font-weight: 500; }
  html[data-theme="dark"] .ive--v3 #inv-shipto { color-scheme: dark; }

  /* 7. THE LINE-ITEM CARD WAS BEIGE. `.ive3-item` is #FCFDFF like every other group card
     (~14301), but a later bare `.inv-item { background: var(--surface-2) }` (equal
     specificity, later in the file) repainted it rgb(246,246,242) — a warm grey that read
     as disabled beside the cool white cards around it. Dark was unaffected. */
  .ive--v3 .inv-item.ive3-item { background: #FCFDFF; }
  html[data-theme="dark"] .ive--v3 .inv-item.ive3-item { background: #131519; }

  /* 8. SETTINGS SAVE BAR: "Unsaved changes" RAN UNDER "Discard". The label is
     `white-space:nowrap` (injectStyles, settings.js) and needs 128px; at 390 it gets 113,
     at 360 only 83 — the words slid beneath the Discard button. Let it wrap onto two lines
     ("Unsaved / changes"), and drop the pencil below 375 where even that is tight. */
  .set-savebar .set-savebar__label { min-width: 0; flex: 1 1 auto; white-space: normal; line-height: 1.15; }

  /* 9. IN DARK MODE THE STEP BAR NEVER SHOWED PROGRESS. `html[data-theme=dark] .ive3-prog i`
     (0,2,2) outranks `.ive3-prog i.on` (0,2,1), so all four segments stayed grey on every
     step. Found only by sampling the pixels: at a glance a grey bar reads as "a bar". */
  html[data-theme="dark"] .ive3-prog i.on { background: linear-gradient(90deg, #6C7CFF, #3D4FE0); }
}
@media (max-width: 374.98px) {
  .set-savebar .set-savebar__label > i { display: none; }
}

/* v3.49.4 — "Delete customer" beside Edit in the customer DRAWER (the phone's customer
   sheet). Icon-only and red, the quietest button in the row; the prompt says what goes. */
.dwr-acts .dwr-act--del { flex: 0 0 46px; padding: 0; color: #C5271E; }
.dwr-acts .dwr-act--del:hover { background: rgba(197, 39, 30, .07); color: #C5271E; }
html[data-theme="dark"] .dwr-acts .dwr-act--del { color: #FF8078; }

/* v3.50.0 — the desktop sign-in's drawn H and rendered field are desktop-only (shown by the ≥768 block at EOF) */
.auth-card__mark, .auth-field { display: none; }


/* =====================================================================================
 *  v3.51.0 — "HAALTD SURFACES" · shared + PHONE  (desktop half: the EOF block)
 *  Owner: "the modals and confirmations, push notifications and messages … look very
 *  classic and boring … must be premium and modern. On both PC and phones."
 *  ⚠ THIS BLOCK DELIBERATELY CHANGES THE PHONE (owner-requested, item 2). It sits ABOVE the
 *    v3.32.0 PC banner on purpose: check-pc-scope requires everything after the banner to be
 *    desktop-scoped, and above the banner these are still the LAST phone rules.
 *  One family, three pieces (all public APIs unchanged):
 *    .hts / .ht-toast   js/ui/toast.js   — phone: TOP banners, never over the tab bar or +
 *    .hxc               js/ui/modals.js confirm() — phone: floating bottom card, thumb reach
 *    sheet glass        buildModal sheets + the update sheet — opaque enough that page colour
 *                       can no longer wash through (the red dashboard card read as pink).
 *  Colour law: indigo is the accent; red ONLY for destructive; green/amber only as status tints.
 * ================================================================================== */

/* ---------- toasts: the stack (JS positions each toast with --y / --s / --o) ---------- */
.toast-stack.hts {
  position: fixed; z-index: 2100; pointer-events: none;
  left: 50%; right: auto; bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 8px);
  width: min(440px, calc(100% - 20px)); max-width: none; transform: translateX(-50%);
  display: block; gap: 0; transition: height .3s cubic-bezier(.2, .9, .25, 1);
}
.hts .ht-toast {
  position: absolute; left: 0; right: 0; top: 0; min-width: 0; max-width: none; margin: 0;
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 11px;
  padding: 11px 10px 11px 11px; border-radius: 20px;
  background: rgba(255, 255, 255, .95); border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  box-shadow: 0 1px 2px rgba(20, 26, 60, .07), 0 20px 44px -18px rgba(20, 26, 60, .38);
  transform-origin: 50% 0;
  transform: translate3d(var(--dx, 0px), calc(var(--y, 0px) + var(--dy, 0px)), 0) scale(var(--s, 1));
  opacity: var(--o, 1); pointer-events: auto; touch-action: pan-x; user-select: none;
  transition: transform .46s cubic-bezier(.2, .9, .25, 1.04), opacity .3s ease;
}
.hts .ht-toast:not(.is-in) { transform: translate3d(0, -120%, 0) scale(.96); opacity: 0; }
.hts .ht-toast.is-out { opacity: 0; transform: translate3d(var(--dx, 0px), calc(var(--y, 0px) - 18px), 0) scale(.96); transition: transform .3s ease, opacity .22s ease; }
.hts .ht-toast.is-flick-up { transform: translate3d(0, -140%, 0) scale(.96); }
.hts .ht-toast.is-flick-side { transform: translate3d(calc(var(--dx, 0px) * 2.2), var(--y, 0px), 0); }
.hts .ht-toast.is-drag { transition: none; }
.hts .ht-toast > * { transition: opacity .2s ease; }
.hts .ht-toast.is-back > * { opacity: 0; }
.hts .ht-toast__icon {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-size: 16px; line-height: 1; color: #4B63FF; background: rgba(75, 99, 255, .13);
}
.hts .ht-toast__icon .bi::before { font-weight: 700 !important; }
.hts .ht-toast--success .ht-toast__icon { color: #0E9F6E; background: rgba(16, 163, 106, .14); }
.hts .ht-toast--error   .ht-toast__icon { color: #E5484D; background: rgba(229, 72, 77, .13); }
.hts .ht-toast--warning .ht-toast__icon { color: #C77A06; background: rgba(245, 158, 11, .16); }
.hts .ht-toast__content { min-width: 0; }
.hts .ht-toast__title { margin: 0 0 1px; font: 650 14.5px/1.3 var(--font, Inter), Inter, system-ui, sans-serif; letter-spacing: -.01em; color: #0A1F44; }
.hts .ht-toast__msg { margin: 0; font: 450 13.5px/1.4 var(--font, Inter), Inter, system-ui, sans-serif; color: #56617F; overflow-wrap: anywhere; }
/* a toast with no title: the message IS the headline */
.hts .ht-toast__content > .ht-toast__msg:only-child { font-weight: 560; font-size: 14.5px; color: #0A1F44; }
.hts .ht-toast__act {
  border: 0; cursor: pointer; padding: 7px 11px; border-radius: 11px; white-space: nowrap;
  font: 650 13.5px/1 var(--font, Inter), Inter, system-ui, sans-serif; color: #4B63FF; background: rgba(75, 99, 255, .1);
}
.hts .ht-toast__close {
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  font-size: 17px; line-height: 1; color: #8A93AD; background: transparent;
}
.hts .ht-toast__close:hover { background: rgba(18, 26, 58, .06); color: #0A1F44; }
html[data-theme="dark"] .hts .ht-toast {
  background: rgba(30, 34, 50, .94); border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 22px 48px -18px rgba(0, 0, 0, .75);
}
html[data-theme="dark"] .hts .ht-toast__title,
html[data-theme="dark"] .hts .ht-toast__content > .ht-toast__msg:only-child { color: #EEF1FA; }
html[data-theme="dark"] .hts .ht-toast__msg { color: #9CA5BF; }
html[data-theme="dark"] .hts .ht-toast__icon { color: #93A2FF; background: rgba(108, 124, 255, .17); }
html[data-theme="dark"] .hts .ht-toast--success .ht-toast__icon { color: #4FD1A1; background: rgba(79, 209, 161, .15); }
html[data-theme="dark"] .hts .ht-toast--error   .ht-toast__icon { color: #FF7A7F; background: rgba(255, 122, 127, .15); }
html[data-theme="dark"] .hts .ht-toast--warning .ht-toast__icon { color: #F5B84A; background: rgba(245, 184, 74, .15); }
html[data-theme="dark"] .hts .ht-toast__act { color: #A9B5FF; background: rgba(108, 124, 255, .16); }
html[data-theme="dark"] .hts .ht-toast__close { color: #6F7894; }
html[data-theme="dark"] .hts .ht-toast__close:hover { background: rgba(255, 255, 255, .07); color: #EEF1FA; }

/* ---------- confirm (.hxc): phone = a floating bottom card ---------- */
.hxc { position: fixed; inset: 0; z-index: 2000; }
.hxc__scrim {
  position: absolute; inset: 0; background: rgba(8, 12, 30, .38);
  -webkit-backdrop-filter: blur(6px) saturate(1.1); backdrop-filter: blur(6px) saturate(1.1);
  opacity: 0; transition: opacity .26s ease;
}
.hxc.is-in .hxc__scrim { opacity: 1; }
.hxc.is-out .hxc__scrim { opacity: 0; transition-duration: .2s; }
.hxc__wrap {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
  padding: 0 10px calc(env(safe-area-inset-bottom, 0px) + 10px); pointer-events: none;
}
.hxc__box {
  pointer-events: auto; width: 100%; max-width: 440px; box-sizing: border-box; outline: none;
  padding: 26px 20px 16px; border-radius: 30px; text-align: center;
  background: linear-gradient(180deg, #FFFFFF, #FAFBFE); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 30px 70px -24px rgba(10, 16, 50, .5), 0 2px 6px rgba(10, 16, 50, .06);
  transform: translateY(calc(100% + 24px)); transition: transform .48s cubic-bezier(.2, .9, .25, 1.03);
}
.hxc.is-in .hxc__box { transform: none; }
.hxc.is-out .hxc__box { transform: translateY(40%); opacity: 0; transition: transform .22s ease, opacity .18s ease; }
.hxc__badge {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center;
  font-size: 24px; line-height: 1; color: #4B63FF; background: rgba(75, 99, 255, .12);
}
.hxc.is-danger .hxc__badge { color: #E5484D; background: rgba(229, 72, 77, .12); }
.hxc__t { margin: 0 0 8px; font: 800 20px/1.22 var(--font-display, "Inter Tight"), "Inter Tight", Inter, sans-serif; letter-spacing: -.02em; color: #0A1F44; text-wrap: balance; }
.hxc__m { margin: 0 0 22px; font: 450 15px/1.5 var(--font, Inter), Inter, system-ui, sans-serif; color: #56617F; text-wrap: pretty; }
.hxc__acts { display: flex; flex-direction: column-reverse; gap: 10px; }
.hxc__b {
  height: 52px; border: 0; border-radius: 16px; cursor: pointer; padding: 0 18px;
  font: 650 16px/1 var(--font, Inter), Inter, system-ui, sans-serif; letter-spacing: -.005em;
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.hxc__b:active { transform: scale(.98); }
.hxc__b--cancel { color: #0A1F44; background: rgba(18, 26, 58, .06); }
.hxc__b--ok {
  color: #fff; background: linear-gradient(150deg, #6C7CFF, #3D4FE0);
  box-shadow: 0 1px 2px rgba(20, 26, 60, .18), 0 14px 30px -12px rgba(61, 79, 224, .6), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.hxc.is-danger .hxc__b--ok {
  background: linear-gradient(150deg, #F2575C, #D2303A);
  box-shadow: 0 1px 2px rgba(60, 10, 10, .18), 0 14px 30px -12px rgba(214, 48, 58, .6), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.hxc__b:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(75, 99, 255, .4); }
html[data-theme="dark"] .hxc__scrim { background: rgba(0, 0, 0, .56); }
html[data-theme="dark"] .hxc__box {
  background: linear-gradient(180deg, #1B1F2F, #161A28); border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .06);
}
html[data-theme="dark"] .hxc__badge { color: #93A2FF; background: rgba(108, 124, 255, .16); }
html[data-theme="dark"] .hxc.is-danger .hxc__badge { color: #FF7A7F; background: rgba(255, 122, 127, .15); }
html[data-theme="dark"] .hxc__t { color: #EEF1FA; }
html[data-theme="dark"] .hxc__m { color: #9CA5BF; }
html[data-theme="dark"] .hxc__b--cancel { color: #EEF1FA; background: rgba(255, 255, 255, .08); }
@media (prefers-reduced-motion: reduce) {
  .hts .ht-toast, .hxc__box, .hxc__scrim { transition: opacity .15s linear !important; }
  .hts .ht-toast:not(.is-in), .hts .ht-toast.is-out, .hxc__box, .hxc.is-out .hxc__box { transform: translate3d(0, var(--y, 0px), 0) scale(var(--s, 1)) !important; }
  .hxc__box { transform: none !important; }
  .hxc:not(.is-in) .hxc__box, .hxc.is-out .hxc__box { opacity: 0; }
}

/* ---------- phone sheets: glass that page colour cannot wash through ---------- */
@media (max-width: 767.98px) {
  /* the glass is the ~8151 rule's layered `background` shorthand with !important (which also
     forces the colour layer transparent), bottoming out at 56% white — so the page shows
     through as a colour wash. Same layers, same indigo highlight, denser glass. */
  .modal-content.hm-modal {
    background:
      radial-gradient(84% 90px at 50% 0, var(--ind-soft), transparent 72%),
      linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(250, 251, 254, .9)) !important;
  }
  html[data-theme="dark"] .modal-content.hm-modal {
    background:
      radial-gradient(84% 90px at 50% 0, var(--ind-soft), transparent 72%),
      linear-gradient(180deg, rgba(32, 36, 48, .95), rgba(22, 26, 36, .92)) !important;
  }
  html:not([data-theme="dark"]) body .vupx { background: rgba(255, 255, 255, .93); }
}

/* ---------- v3.56.0: the desktop rail's active marker ----------
   `.nav-mark` is one element appended to #sidebar-nav by app.js buildNav(). It replaces
   the active item's `::after` edge bar, which FREES `::after` for the collapsed tooltip
   — that is why the active item can finally be labelled when the rail is folded.
   It is inert everywhere except the >= 768px block below, so the phone drawer that
   shares #sidebar-nav renders exactly as it did in v3.55.0: an element that is
   `display: none` contributes no pixels. THIS LINE BELONGS HERE, above the banner —
   it is a shared rule, and check-pc-scope.js fails the build if it sits after it. */
.nav-mark { display: none; }


/* =====================================================================================
 *  v3.32.0 — "PC NATIVE 2026"  ·  Stripe x Mercury  ·  DESKTOP DASHBOARD + SHELL CHROME
 *  ------------------------------------------------------------------------------------
 *  APPEND-ONLY, and EVERY rule below lives inside @media (min-width: 768px).
 *  The phone (<= 767.98px) cannot see a single declaration in this block. Verified by
 *  tools/check-pc-scope.js, which fails the build if any selector escapes the query.
 *
 *  Read before touching this block:
 *   - The user panel (.pcum) is mounted on <body>, NEVER inside .app-topbar. A
 *     backdrop-filter nested inside another backdrop-filter samples the PARENT's already
 *     filtered output rather than the page, so the panel barely blurs and whatever is
 *     behind it bleeds straight through. Same reason app.js reparents #app-tabbar.
 *   - Stacked text inside a grid cell needs an explicit display:block. Several lists here
 *     shipped as run-together single lines in preview because inline <span>s were assumed
 *     to stack.
 *   - Animate transform/opacity ONLY. The hero's three light bodies are composited layers
 *     with will-change:transform; nothing in this block animates layout.
 * ================================================================================== */
@media (min-width: 768px) {

  /* ---------------------------------------------------------------- tokens */
  :root {
    --pc-indigo: #4B63FF;
    --pc-indigo-2: #6C7CFF;
    --pc-indigo-3: #3D4FE0;
    --pc-grad: linear-gradient(150deg, #6C7CFF, #3D4FE0);
    --pc-gold-a: #E7C87C;
    --pc-gold-b: #C0912F;

    --pc-page-1: #EEF0F8;
    --pc-page-2: #E6E9F4;

    --pc-ink: #0B1020;
    --pc-ink-2: #495172;
    --pc-ink-3: #7B839E;

    --pc-hair: rgba(18, 26, 58, .075);
    --pc-hair-2: rgba(18, 26, 58, .12);

    --pc-card: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .58));
    --pc-card-solid: #FFFFFF;
    --pc-lift: 0 20px 44px -30px rgba(26, 36, 78, .38), 0 2px 6px -3px rgba(26, 36, 78, .07), inset 0 1px 0 rgba(255, 255, 255, .92);
    --pc-lift-hi: 0 30px 60px -30px rgba(26, 36, 78, .44), 0 4px 10px -4px rgba(26, 36, 78, .10), inset 0 1px 0 rgba(255, 255, 255, .95);

    --pc-coral: #C5271E;
    --pc-amber: #B67912;
    --pc-green: #0E7A52;

    --pc-r: 20px;
    --pc-r-sm: 13px;
    --pc-ease: cubic-bezier(.22, .9, .28, 1);
    --pc-ease-out: cubic-bezier(.16, 1, .3, 1);
    --pc-gut: 30px;
  }

  html[data-theme="dark"] {
    --pc-page-1: #0B0E18;
    --pc-page-2: #070910;
    --pc-ink: #EEF1F8;
    --pc-ink-2: #A2ABC4;
    --pc-ink-3: #79819A;
    --pc-hair: rgba(255, 255, 255, .075);
    --pc-hair-2: rgba(255, 255, 255, .13);
    --pc-card: linear-gradient(180deg, rgba(255, 255, 255, .072), rgba(255, 255, 255, .036));
    --pc-card-solid: #12151F;
    --pc-lift: 0 22px 50px -30px rgba(0, 0, 0, .66), inset 0 1px 0 rgba(255, 255, 255, .085);
    --pc-lift-hi: 0 34px 68px -30px rgba(0, 0, 0, .74), inset 0 1px 0 rgba(255, 255, 255, .11);
    --pc-coral: #FF6B63;
    --pc-amber: #F5B84A;
    --pc-green: #34D399;
  }

  /* ---------------------------------------------------------------- page field
     One mesh for the whole desktop app, fixed so it never scrolls with content. */
  html.pc-on body::before {
    content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
      radial-gradient(1100px 620px at 78% -12%, rgba(108, 124, 255, .20), transparent 62%),
      radial-gradient(900px 560px at 8% -6%, rgba(139, 108, 255, .15), transparent 60%),
      linear-gradient(168deg, var(--pc-page-1), var(--pc-page-2));
  }
  html[data-theme="dark"].pc-on body::before {
    background:
      radial-gradient(1100px 620px at 78% -12%, rgba(94, 112, 255, .17), transparent 62%),
      radial-gradient(900px 560px at 8% -6%, rgba(126, 92, 255, .12), transparent 60%),
      linear-gradient(168deg, var(--pc-page-1), var(--pc-page-2));
  }
  html.pc-on body { background: transparent; }
  html.pc-on .app-shell { background: transparent; }
  html.pc-on .app-main { background: transparent; }

  /* ================================================================= TOP BAR */
  html.pc-on .app-topbar {
    height: 60px; padding: 0 20px 0 18px; gap: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .56));
    border-bottom: 1px solid var(--pc-hair);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
    -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  }
  html[data-theme="dark"].pc-on .app-topbar {
    background: linear-gradient(180deg, rgba(16, 19, 29, .78), rgba(11, 14, 24, .62));
    border-bottom-color: var(--pc-hair);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset;
  }
  html.pc-on .topbar__brand-text { font-family: var(--font-display), Inter, sans-serif; font-weight: 700; letter-spacing: -.022em; font-size: 15.5px; color: var(--pc-ink); }
  html.pc-on .topbar__logo { width: 26px; height: 26px; border-radius: 8px; }

  /* --- the page title that flies up into the bar (macOS pattern) --- */
  html.pc-on .pct { display: flex; align-items: center; gap: 10px; margin-left: 4px; min-width: 0;
    opacity: 0; transform: translateY(9px); pointer-events: none;
    transition: opacity .26s var(--pc-ease), transform .34s var(--pc-ease); }
  html.pc-on .app-topbar.has-title .pct { opacity: 1; transform: none; }
  html.pc-on .pct__bar { width: 1px; height: 18px; background: var(--pc-hair-2); }
  html.pc-on .pct__t { font-family: var(--font-display), Inter, sans-serif; font-weight: 650; font-size: 14.5px; letter-spacing: -.018em; color: var(--pc-ink); white-space: nowrap; }

  /* --- command search --- */
  html.pc-on .topbar__search { max-width: 460px; }
  html.pc-on .topbar__search-input {
    height: 36px; border-radius: 11px; font-size: 13.5px;
    background: rgba(255, 255, 255, .58); border: 1px solid var(--pc-hair);
    color: var(--pc-ink); box-shadow: inset 0 1px 2px rgba(20, 28, 60, .04);
    transition: box-shadow .2s var(--pc-ease), border-color .2s var(--pc-ease), background .2s var(--pc-ease);
  }
  html[data-theme="dark"].pc-on .topbar__search-input { background: rgba(255, 255, 255, .05); }
  html.pc-on .topbar__search-input:focus {
    border-color: rgba(75, 99, 255, .5); background: var(--pc-card-solid);
    box-shadow: 0 0 0 3.5px rgba(75, 99, 255, .13);
  }
  html.pc-on .topbar__search-icon { color: var(--pc-ink-3); }

  /* --- right cluster --- */
  html.pc-on .topbar__right { gap: 8px; }
  html.pc-on .pcbtn {
    width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center;
    border: 1px solid var(--pc-hair); border-radius: 10px; background: rgba(255, 255, 255, .5);
    color: var(--pc-ink-2); cursor: pointer; position: relative;
    transition: transform .16s var(--pc-ease), background .18s var(--pc-ease), color .18s var(--pc-ease), box-shadow .18s var(--pc-ease);
  }
  html[data-theme="dark"].pc-on .pcbtn { background: rgba(255, 255, 255, .05); }
  html.pc-on .pcbtn i { font-size: 15px; }
  html.pc-on .pcbtn:hover { background: var(--pc-card-solid); color: var(--pc-ink); transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(26, 36, 78, .4); }
  html.pc-on .pcbtn:active { transform: translateY(0) scale(.96); }
  html.pc-on .pcbtn__dot {
    position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--pc-indigo); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
  }
  html[data-theme="dark"].pc-on .pcbtn__dot { box-shadow: 0 0 0 2px #12151F; }

  /* theme segmented control */
  html.pc-on .pcseg {
    display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 11px;
    background: rgba(20, 28, 60, .055); border: 1px solid var(--pc-hair); position: relative;
  }
  html[data-theme="dark"].pc-on .pcseg { background: rgba(255, 255, 255, .05); }
  html.pc-on .pcseg__b {
    width: 30px; height: 26px; display: grid; place-items: center; border: 0; background: transparent;
    border-radius: 8px; color: var(--pc-ink-3); cursor: pointer; position: relative; z-index: 1;
    transition: color .2s var(--pc-ease);
  }
  html.pc-on .pcseg__b i { font-size: 13.5px; }
  html.pc-on .pcseg__b.is-on { color: #FFF; }
  html.pc-on .pcseg__b:not(.is-on):hover { color: var(--pc-ink); }
  html.pc-on .pcseg__thumb {
    position: absolute; top: 3px; left: 3px; width: 30px; height: 26px; border-radius: 8px;
    background: var(--pc-grad); box-shadow: 0 4px 10px -4px rgba(61, 79, 224, .7);
    transition: transform .32s var(--pc-ease-out);
  }
  html.pc-on .pcseg[data-i="1"] .pcseg__thumb { transform: translateX(32px); }
  html.pc-on .pcseg[data-i="2"] .pcseg__thumb { transform: translateX(64px); }

  html.pc-on .pcdiv { width: 1px; height: 22px; background: var(--pc-hair-2); margin: 0 2px; }

  /* --- user chip --- */
  html.pc-on .user-chip {
    height: 38px; padding: 0 9px 0 5px; gap: 9px; border-radius: 12px;
    background: rgba(255, 255, 255, .5); border: 1px solid var(--pc-hair);
    transition: background .18s var(--pc-ease), box-shadow .18s var(--pc-ease), transform .16s var(--pc-ease);
  }
  html[data-theme="dark"].pc-on .user-chip { background: rgba(255, 255, 255, .05); }
  html.pc-on .user-chip:hover { background: var(--pc-card-solid); box-shadow: 0 6px 16px -9px rgba(26, 36, 78, .45); transform: translateY(-1px); }
  html.pc-on .user-chip__avatar {
    width: 28px; height: 28px; border-radius: 9px; background: var(--pc-grad); color: #FFF;
    font: 700 12.5px/1 var(--font-display), Inter, sans-serif; display: grid; place-items: center;
    box-shadow: 0 4px 10px -5px rgba(61, 79, 224, .8), inset 0 1px 0 rgba(255, 255, 255, .35);
  }
  html.pc-on .user-chip__meta { display: block; line-height: 1; }
  html.pc-on .user-chip__name { font: 640 13px/1 var(--font), Inter, sans-serif; color: var(--pc-ink); letter-spacing: -.008em; }
  html.pc-on .user-chip__role { display: none; }   /* "Admin" retired — single-user app */
  html.pc-on .user-chip__caret { font-size: 10px; color: var(--pc-ink-3); transition: transform .26s var(--pc-ease); }
  html.pc-on .user-chip[aria-expanded="true"] .user-chip__caret { transform: rotate(180deg); }

  /* --- native user panel --- */
  /* ⚠ MOUNTED ON <body>, NEVER INSIDE .app-topbar. A backdrop-filter nested inside
     another backdrop-filter samples the PARENT's already-filtered output, not the page,
     so the panel barely blurs and the hero bleeds straight through it. Fixed position
     on body + a higher base opacity is what makes it read as a solid native panel. */
  html.pc-on .pcum {
    position: fixed; top: 54px; right: 18px; width: 292px; z-index: 1200;
    border-radius: 18px; padding: 7px; overflow: hidden;
    background: linear-gradient(180deg, rgba(252, 253, 255, .97), rgba(246, 248, 253, .94));
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 30px 70px -28px rgba(20, 28, 66, .5), 0 3px 10px -4px rgba(20, 28, 66, .14), inset 0 1px 0 rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
    transform-origin: top right;
    animation: pcumIn .3s var(--pc-ease-out) both;
  }
  html[data-theme="dark"].pc-on .pcum {
    background: linear-gradient(180deg, rgba(31, 34, 46, .975), rgba(21, 24, 34, .955));
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 34px 76px -28px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .1);
  }
  @keyframes pcumIn { from { opacity: 0; transform: translateY(-8px) scale(.96); } to { opacity: 1; transform: none; } }

  html.pc-on .pcum__id { display: flex; align-items: center; gap: 11px; padding: 11px 11px 13px; }
  html.pc-on .pcum__av {
    width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; background: var(--pc-grad);
    color: #FFF; font: 700 17px/1 var(--font-display), Inter, sans-serif; display: grid; place-items: center;
    box-shadow: 0 8px 18px -8px rgba(61, 79, 224, .8), inset 0 1px 0 rgba(255, 255, 255, .35);
  }
  html.pc-on .pcum__nm { font: 680 14.5px/1.2 var(--font-display), Inter, sans-serif; color: var(--pc-ink); letter-spacing: -.015em; }
  html.pc-on .pcum__em { font: 450 12px/1.3 var(--font), Inter, sans-serif; color: var(--pc-ink-3); margin-top: 3px; }
  html.pc-on .pcum__hr { height: 1px; background: var(--pc-hair); margin: 3px 9px; }
  html.pc-on .pcum__i {
    width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 11px; border: 0;
    background: transparent; border-radius: 11px; cursor: pointer; text-align: left;
    font: 520 13.2px/1 var(--font), Inter, sans-serif; color: var(--pc-ink); text-decoration: none;
    transition: background .14s var(--pc-ease), color .14s var(--pc-ease);
  }
  html.pc-on .pcum__i i { font-size: 15px; color: var(--pc-ink-2); width: 17px; text-align: center; transition: color .14s; }
  html.pc-on .pcum__i:hover { background: rgba(75, 99, 255, .1); color: var(--pc-indigo); }
  html.pc-on .pcum__i:hover i { color: var(--pc-indigo); }
  html.pc-on .pcum__i .pcum__k { margin-left: auto; font: 500 11px/1 var(--font-ledger), monospace; color: var(--pc-ink-3); }
  html.pc-on .pcum__i--dan { color: var(--pc-coral); }
  html.pc-on .pcum__i--dan i { color: var(--pc-coral); }
  html.pc-on .pcum__i--dan:hover { background: rgba(197, 39, 30, .1); color: var(--pc-coral); }
  html.pc-on .pcum__i--dan:hover i { color: var(--pc-coral); }
  html.pc-on .pcum__ft {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px 7px; margin-top: 3px;
    border-top: 1px solid var(--pc-hair);
  }
  html.pc-on .pcum__wsl { width: 20px; height: 20px; border-radius: 6px; overflow: hidden; }
  html.pc-on .pcum__wsl img { width: 100%; height: 100%; display: block; }
  html.pc-on .pcum__ws { font: 600 11.5px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-2); }
  html.pc-on .pcum__v { margin-left: auto; font: 500 10.5px/1 var(--font-ledger), monospace; color: var(--pc-ink-3); }

  /* ================================================================= SIDEBAR */
  html.pc-on .app-sidebar {
    background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .3));
    border-right: 1px solid var(--pc-hair);
    -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  }
  html[data-theme="dark"].pc-on .app-sidebar {
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .018));
  }
  html.pc-on .sidebar__label { font: 700 9.5px/1 var(--font), Inter, sans-serif; letter-spacing: .13em; color: var(--pc-ink-3); }
  html.pc-on .nav-item {
    height: 38px; border-radius: 11px; gap: 11px; padding: 0 11px; margin: 1.5px 10px;
    font: 540 13.2px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-2); letter-spacing: -.006em;
    position: relative; border: 0; background: transparent; width: calc(100% - 20px);
    transition: color .16s var(--pc-ease), background .16s var(--pc-ease);
  }
  html.pc-on .nav-item .ni { width: 19px; height: 19px; stroke-width: 1.7; }
  html.pc-on .nav-item::before {
    content: ""; position: absolute; inset: 0; border-radius: 11px; background: rgba(75, 99, 255, .1);
    opacity: 0; transform: scale(.96); transition: opacity .2s var(--pc-ease), transform .26s var(--pc-ease-out);
  }
  html.pc-on .nav-item:hover { color: var(--pc-ink); }
  html.pc-on .nav-item:hover::before { opacity: .6; transform: none; }
  html.pc-on .nav-item.is-active { color: var(--pc-indigo); font-weight: 620; }
  html[data-theme="dark"].pc-on .nav-item.is-active { color: #A6B2FF; }
  html.pc-on .nav-item.is-active::before { opacity: 1; transform: none; }
  html.pc-on .nav-item.is-active::after {
    content: ""; position: absolute; left: -6px; top: 50%; width: 3px; height: 17px; margin-top: -8.5px;
    border-radius: 0 3px 3px 0; background: var(--pc-grad);
  }
  html.pc-on .nav-item > span, html.pc-on .nav-item > svg { position: relative; z-index: 1; }
  html.pc-on .workspace-chip {
    border-radius: 13px; border: 1px solid var(--pc-hair); background: rgba(255, 255, 255, .5);
  }
  html[data-theme="dark"].pc-on .workspace-chip { background: rgba(255, 255, 255, .045); }

  /* ============================================================ VIEW SHELL */
  /* ⚠ `overflow-y: visible`, NOT `auto`. THIS ONE DECLARATION CAUSED TWO SHIPPED BUGS —
     do not "tidy" it back to `auto`; `tools/check-scrollport.js` will fail the build.

     v3.32.0 set this to `auto`, intending .app-main to be the desktop scroll pane. It
     never became one: `.app-shell` is `min-height: 100vh` with a `1fr` row, so .app-main
     grows with its content and its scrollHeight always equals its clientHeight. What it
     DID become is a scroll container that cannot scroll, and that is a genuinely bad
     object to have under the pointer:

       (a) STICKY DIED APP-WIDE. Every `position: sticky` descendant resolves against
           .app-main's box, so it computes to `sticky`, reports the right `top`, and then
           never moves. Found in v3.40.0, worked around per-page with `:has()` twice.
       (b) THE WHEEL WAS SWALLOWED. `.app-main` also carries `overscroll-behavior-y:
           contain` (~2844, there for the PHONE's rubber-banding). A wheel over the
           content area therefore targets a scroll container that cannot scroll and is
           told not to pass the gesture to its ancestors. Whether the browser chains
           anyway is version- and device-dependent, which is why this reproduced on the
           owner's machine and not in a synthetic-wheel test — and why the ONLY two
           desktop pages that scrolled for them were Payments and Customers, the exact
           two carrying the `:has()` override.

     On desktop the DOCUMENT is the scroller. Making that true everywhere fixes the wheel,
     fixes sticky app-wide, and lets the two per-page patches go. */
  html.pc-on .app-main { overflow-y: visible; }

  /* The phone's containment must not apply to a desktop pane that no longer scrolls —
     left set, it is the other half of the trap above, waiting for someone to reintroduce
     a scroller here. */
  html.pc-on .app-main, html.pc-on .view-root { overscroll-behavior-y: auto; }
  html.pc-on .view-root { padding: 0; }
  .pcx { padding: 26px var(--pc-gut) 64px; max-width: 1480px; margin: 0 auto; }

  /* ---- large page title (shrinks into the topbar) ---- */
  .pcx-head { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 20px; }
  .pcx-head__l { min-width: 0; }
  .pcx-head__t {
    margin: 0; font-family: var(--font-display), Inter, sans-serif; font-weight: 700;
    font-size: 34px; line-height: 1.04; letter-spacing: -.035em; color: var(--pc-ink);
  }
  .pcx-head__s { margin: 7px 0 0; font: 450 13.5px/1.35 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }
  .pcx-head__a { margin-left: auto; display: flex; align-items: center; gap: 9px; padding-bottom: 3px; }

  .pcx-ghost {
    height: 38px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px;
    border-radius: 11px; border: 1px solid var(--pc-hair-2); background: rgba(255, 255, 255, .58);
    font: 560 13px/1 var(--font), Inter, sans-serif; color: var(--pc-ink); cursor: pointer;
    transition: transform .16s var(--pc-ease), box-shadow .18s var(--pc-ease), background .18s var(--pc-ease);
  }
  html[data-theme="dark"] .pcx-ghost { background: rgba(255, 255, 255, .06); }
  .pcx-ghost:hover { transform: translateY(-1px); background: var(--pc-card-solid); box-shadow: 0 8px 18px -10px rgba(26, 36, 78, .45); }
  .pcx-ghost:active { transform: translateY(0) scale(.98); }
  .pcx-ghost i { font-size: 14px; color: var(--pc-ink-2); }
  .pcx-ghost--ico { width: 38px; padding: 0; justify-content: center; }

  .pcx-prim {
    height: 38px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px;
    border-radius: 11px; border: 0; background: var(--pc-grad); color: #FFF;
    font: 620 13px/1 var(--font), Inter, sans-serif; cursor: pointer; position: relative; overflow: hidden;
    box-shadow: 0 10px 22px -12px rgba(61, 79, 224, .9), inset 0 1px 0 rgba(255, 255, 255, .3);
    transition: transform .16s var(--pc-ease), box-shadow .2s var(--pc-ease);
  }
  .pcx-prim:hover { transform: translateY(-1.5px); box-shadow: 0 16px 30px -12px rgba(61, 79, 224, .95), inset 0 1px 0 rgba(255, 255, 255, .34); }
  .pcx-prim:active { transform: translateY(0) scale(.98); }
  .pcx-prim i { font-size: 14px; }
  .pcx-prim::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .34) 50%, transparent 70%);
    transform: translateX(-100%); transition: opacity .2s;
  }
  .pcx-prim:hover::after { opacity: 1; animation: pcSheen .85s var(--pc-ease) ; }
  @keyframes pcSheen { to { transform: translateX(100%); } }

  /* ============================================================== THE HERO */
  .pch {
    position: relative; overflow: hidden; border-radius: 26px; margin-bottom: 18px;
    padding: 26px 30px 24px; min-height: 188px; isolation: isolate;
    background: linear-gradient(180deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .44));
    border: 1px solid rgba(255, 255, 255, .72);
    box-shadow: 0 26px 58px -34px rgba(26, 36, 90, .44), 0 3px 8px -4px rgba(26, 36, 90, .08), inset 0 1px 0 rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(28px) saturate(185%); backdrop-filter: blur(28px) saturate(185%);
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: start;
  }
  html[data-theme="dark"] .pch {
    background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035));
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 30px 66px -34px rgba(0, 0, 0, .72), inset 0 1px 0 rgba(255, 255, 255, .095);
  }
  /* liquid: two slow-drifting light bodies under the glass */
  .pch__lq { position: absolute; inset: -40%; z-index: -1; pointer-events: none; }
  .pch__b { position: absolute; border-radius: 50%; filter: blur(58px); will-change: transform; }
  .pch__b--1 {
    width: 46%; height: 130%; right: 4%; top: -22%;
    background: radial-gradient(circle, rgba(108, 124, 255, .58), transparent 66%);
    animation: pchDrift1 22s var(--pc-ease) infinite alternate;
  }
  .pch__b--2 {
    width: 40%; height: 120%; left: 14%; top: -8%;
    background: radial-gradient(circle, rgba(154, 108, 255, .38), transparent 66%);
    animation: pchDrift2 27s var(--pc-ease) infinite alternate;
  }
  .pch__b--3 {
    width: 34%; height: 110%; right: 26%; bottom: -34%;
    background: radial-gradient(circle, rgba(88, 190, 255, .26), transparent 66%);
    animation: pchDrift3 31s var(--pc-ease) infinite alternate;
  }
  html[data-theme="dark"] .pch__b--1 { background: radial-gradient(circle, rgba(98, 116, 255, .5), transparent 66%); }
  html[data-theme="dark"] .pch__b--2 { background: radial-gradient(circle, rgba(140, 96, 255, .34), transparent 66%); }
  html[data-theme="dark"] .pch__b--3 { background: radial-gradient(circle, rgba(64, 160, 255, .22), transparent 66%); }
  @keyframes pchDrift1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-7%, 6%, 0) scale(1.14); } }
  @keyframes pchDrift2 { from { transform: translate3d(0, 0, 0) scale(1.06); } to { transform: translate3d(9%, -7%, 0) scale(.92); } }
  @keyframes pchDrift3 { from { transform: translate3d(0, 0, 0) scale(.95); } to { transform: translate3d(-11%, -9%, 0) scale(1.16); } }
  /* the lit top edge + a raked specular band — what makes it read as glass, not tint */
  .pch__sheen {
    position: absolute; inset: 1px; border-radius: 25px; pointer-events: none; z-index: 0;
    background: linear-gradient(168deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .1) 22%, transparent 46%);
  }
  html[data-theme="dark"] .pch__sheen { background: linear-gradient(168deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .02) 24%, transparent 48%); }

  .pch__l { position: relative; z-index: 1; min-width: 0; }
  .pch__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font: 650 10.5px/1 var(--font), Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase;
    color: var(--pc-ink-3);
  }
  .pch__pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--pc-green); position: relative; }
  .pch__pulse::after {
    content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.4px solid var(--pc-green);
    opacity: 0; animation: pchPing 2.6s var(--pc-ease) infinite;
  }
  @keyframes pchPing { 0% { opacity: .7; transform: scale(.6); } 70%, 100% { opacity: 0; transform: scale(1.5); } }

  .pch__greet {
    margin: 11px 0 0; font-family: var(--font-display), Inter, sans-serif; font-weight: 700;
    font-size: 39px; line-height: 1.02; letter-spacing: -.04em; color: var(--pc-ink);
  }
  .pch__greet em {
    font-style: normal;
    background: linear-gradient(135deg, var(--pc-gold-a), var(--pc-gold-b));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  }
  .pch__sub { margin: 9px 0 0; font: 450 13.5px/1.4 var(--font), Inter, sans-serif; color: var(--pc-ink-2); }

  /* hero stat pods */
  .pch__pods { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
  .pch__pod {
    flex: 0 1 auto; min-width: 152px; padding: 11px 15px 12px; border-radius: 14px;
    background: rgba(255, 255, 255, .56); border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); cursor: pointer;
    transition: transform .18s var(--pc-ease), box-shadow .2s var(--pc-ease), background .18s var(--pc-ease);
  }
  html[data-theme="dark"] .pch__pod { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .085); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
  .pch__pod:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(26, 36, 90, .5), inset 0 1px 0 rgba(255, 255, 255, .85); }
  .pch__pl { display: flex; align-items: center; gap: 6px; font: 560 10.5px/1 var(--font), Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--pc-ink-3); }
  .pch__pd { width: 5.5px; height: 5.5px; border-radius: 50%; }
  .pch__pv {
    margin-top: 8px; font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--pc-ink);
  }
  .pch__pv--gold { background: linear-gradient(135deg, var(--pc-gold-a), var(--pc-gold-b)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

  /* ------- weather ------- */
  .pch__wx {
    position: relative; z-index: 1; align-self: stretch; display: flex; flex-direction: column;
    justify-content: space-between; padding-left: 28px; min-width: 232px;
    border-left: 1px solid var(--pc-hair);
  }
  .pcwx__top { display: flex; align-items: flex-start; gap: 14px; }
  .pcwx__art { width: 56px; height: 56px; flex: 0 0 56px; }
  .pcwx__t {
    font-family: var(--font-display), Inter, sans-serif; font-weight: 660; font-size: 38px;
    line-height: .92; letter-spacing: -.045em; color: var(--pc-ink); font-variant-numeric: tabular-nums;
  }
  .pcwx__t sup { font-size: .46em; font-weight: 500; vertical-align: super; margin-left: 1px; color: var(--pc-ink-3); }
  .pcwx__cond { margin-top: 7px; font: 560 12.5px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-2); }
  .pcwx__loc { margin-top: 5px; display: flex; align-items: center; gap: 5px; font: 450 11.5px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }
  .pcwx__loc i { font-size: 11px; }
  .pcwx__days { display: flex; gap: 6px; margin-top: 16px; }
  .pcwx__d {
    flex: 1; text-align: center; padding: 8px 4px 9px; border-radius: 11px;
    background: rgba(255, 255, 255, .44); border: 1px solid rgba(255, 255, 255, .6);
    transition: transform .18s var(--pc-ease), background .18s var(--pc-ease);
  }
  html[data-theme="dark"] .pcwx__d { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .07); }
  .pcwx__d:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .68); }
  .pcwx__dn { font: 620 9.5px/1 var(--font), Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--pc-ink-3); }
  .pcwx__di { margin: 6px auto 5px; width: 19px; height: 19px; display: block; }
  .pcwx__dt { font: 600 11.5px/1 var(--font-ledger), monospace; color: var(--pc-ink); font-variant-numeric: tabular-nums; }
  .pcwx__dt span { color: var(--pc-ink-3); font-weight: 400; }

  /* sun rays turn; cloud eases side to side. Both transform-only. */
  .pcwx-sun { transform-origin: 32px 32px; animation: pcwxSpin 34s linear infinite; }
  @keyframes pcwxSpin { to { transform: rotate(360deg); } }
  .pcwx-cloud { animation: pcwxFloat 7s var(--pc-ease) infinite alternate; }
  @keyframes pcwxFloat { from { transform: translateX(-1.6px); } to { transform: translateX(1.6px); } }
  .pcwx-drop { animation: pcwxRain 1.5s linear infinite; }
  .pcwx-drop:nth-of-type(2) { animation-delay: .35s; }
  .pcwx-drop:nth-of-type(3) { animation-delay: .7s; }
  @keyframes pcwxRain { 0% { opacity: 0; transform: translateY(-3px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(7px); } }

  /* ============================================================== KPI BAND */
  .pck { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
  .pck__c {
    position: relative; overflow: hidden; border-radius: var(--pc-r); padding: 17px 18px 0;
    background: var(--pc-card); border: 1px solid var(--pc-hair); box-shadow: var(--pc-lift);
    -webkit-backdrop-filter: blur(20px) saturate(175%); backdrop-filter: blur(20px) saturate(175%);
    cursor: pointer; min-height: 138px; display: flex; flex-direction: column;
    transition: transform .2s var(--pc-ease), box-shadow .24s var(--pc-ease);
  }
  .pck__c:hover { transform: translateY(-3px); box-shadow: var(--pc-lift-hi); }
  .pck__c::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 78px; pointer-events: none;
    background: radial-gradient(120% 100% at 50% 0%, rgba(var(--tone), .13), transparent 72%);
  }
  .pck__hd { display: flex; align-items: center; gap: 9px; position: relative; }
  .pck__ico {
    width: 27px; height: 27px; flex: 0 0 27px; border-radius: 9px; display: grid; place-items: center;
    background: rgba(var(--tone), .13); color: rgb(var(--tone)); font-size: 13px;
  }
  .pck__lb { font: 560 11.5px/1 var(--font), Inter, sans-serif; letter-spacing: .02em; color: var(--pc-ink-2); }
  .pck__v {
    margin-top: 13px; font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 26px; font-weight: 600; letter-spacing: -.035em; color: var(--pc-ink); position: relative;
  }
  .pck__dl { margin-top: 7px; display: flex; align-items: center; gap: 6px; font: 500 11.5px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3); position: relative; }
  .pck__chip {
    display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 7px;
    font: 620 10.5px/1 var(--font), Inter, sans-serif;
  }
  .pck__chip--up { background: rgba(14, 122, 82, .12); color: var(--pc-green); }
  .pck__chip--dn { background: rgba(197, 39, 30, .12); color: var(--pc-coral); }
  .pck__spark { margin: auto -18px 0; height: 40px; display: block; width: calc(100% + 36px); }
  .pck__line { fill: none; stroke: rgb(var(--tone)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 400; stroke-dashoffset: 400; animation: pckDraw 1.15s var(--pc-ease-out) .25s forwards; }
  .pck__fill { fill: rgb(var(--tone)); opacity: 0; animation: pckFade .8s var(--pc-ease) .6s forwards; }
  @keyframes pckDraw { to { stroke-dashoffset: 0; } }
  @keyframes pckFade { to { opacity: .11; } }

  /* ============================================================== GRID/CARDS */
  .pcg { display: grid; gap: 16px; margin-bottom: 16px; }
  .pcg--82 { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
  .pcg--75 { grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); }
  @media (max-width: 1160px) { .pcg--82, .pcg--75 { grid-template-columns: minmax(0, 1fr); } .pck { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  .pcc {
    position: relative; border-radius: var(--pc-r); overflow: hidden;
    background: var(--pc-card); border: 1px solid var(--pc-hair); box-shadow: var(--pc-lift);
    -webkit-backdrop-filter: blur(20px) saturate(175%); backdrop-filter: blur(20px) saturate(175%);
    display: flex; flex-direction: column;
  }
  .pcc__hd { display: flex; align-items: center; gap: 12px; padding: 17px 20px 13px; }
  .pcc__t { font: 660 14.5px/1.2 var(--font-display), Inter, sans-serif; letter-spacing: -.018em; color: var(--pc-ink); }
  .pcc__s { font: 450 12px/1.3 var(--font), Inter, sans-serif; color: var(--pc-ink-3); margin-top: 3px; }
  .pcc__r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
  .pcc__key { display: flex; align-items: center; gap: 13px; font: 500 11.5px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-2); }
  .pcc__key span { display: inline-flex; align-items: center; gap: 6px; }
  .pcc__key i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
  .pcc__bd { padding: 0 20px 18px; }
  .pcc__ft {
    margin-top: auto; padding: 11px 20px; border-top: 1px solid var(--pc-hair);
    display: flex; align-items: center; justify-content: center;
  }
  .pcc__more {
    display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; cursor: pointer;
    font: 580 12.5px/1 var(--font), Inter, sans-serif; color: var(--pc-indigo);
    transition: gap .18s var(--pc-ease);
  }
  html[data-theme="dark"] .pcc__more { color: #A6B2FF; }
  .pcc__more:hover { gap: 11px; }
  .pcc__pill {
    display: inline-flex; padding: 3px 8px; border-radius: 8px; font: 620 10.5px/1.5 var(--font), Inter, sans-serif;
    background: rgba(75, 99, 255, .12); color: var(--pc-indigo);
  }
  html[data-theme="dark"] .pcc__pill { color: #A6B2FF; }
  .pcc__pill--hot { background: rgba(197, 39, 30, .13); color: var(--pc-coral); }

  /* segmented control inside a card head */
  .pcsw { display: flex; padding: 3px; border-radius: 10px; background: rgba(20, 28, 60, .055); position: relative; }
  html[data-theme="dark"] .pcsw { background: rgba(255, 255, 255, .055); }
  .pcsw__b { border: 0; background: transparent; padding: 5px 11px; border-radius: 7px; cursor: pointer; position: relative; z-index: 1;
    font: 570 11.5px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3); transition: color .2s var(--pc-ease); }
  .pcsw__b.is-on { color: var(--pc-ink); }
  .pcsw__th { position: absolute; top: 3px; left: 3px; height: calc(100% - 6px); border-radius: 7px;
    background: var(--pc-card-solid); box-shadow: 0 2px 6px -2px rgba(26, 36, 78, .3);
    transition: transform .3s var(--pc-ease-out), width .3s var(--pc-ease-out); }

  /* ---- area chart ---- */
  .pcch { width: 100%; height: 232px; display: block; overflow: visible; }
  .pcch__grid { stroke: var(--pc-hair); stroke-width: 1; }
  .pcch__lbl { font: 500 10.5px var(--font-ledger), monospace; fill: var(--pc-ink-3); }
  .pcch__xl { font: 520 11px var(--font), Inter, sans-serif; fill: var(--pc-ink-3); }
  .pcch__ln { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: pckDraw 1.5s var(--pc-ease-out) .2s forwards; }
  .pcch__ar { opacity: 0; animation: pcchAr 1s var(--pc-ease) .7s forwards; }
  @keyframes pcchAr { to { opacity: 1; } }
  .pcch__pt { opacity: 0; animation: pcchAr .5s var(--pc-ease) 1.2s forwards; }
  .pcch__pt circle { transition: r .18s var(--pc-ease); }
  html[data-theme="dark"] .pcch__pt circle { stroke: #151926; }
  .pcch__pt:hover circle { r: 6; }

  /* ---- customer balance rows ---- */
  .pcbl { display: flex; flex-direction: column; }
  .pcbl__r {
    display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 11px;
    padding: 11px 20px; cursor: pointer; position: relative;
    transition: background .16s var(--pc-ease);
  }
  .pcbl__r:hover { background: rgba(75, 99, 255, .055); }
  .pcbl__av {
    width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
    font: 670 11px/1 var(--font), Inter, sans-serif; color: #FFF; background: var(--pc-grad);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
  }
  .pcbl__nm { display: block; font: 580 13px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pcbl__bar { display: block; margin-top: 6px; height: 4px; border-radius: 3px; background: rgba(20, 28, 60, .07); overflow: hidden; }
  html[data-theme="dark"] .pcbl__bar { background: rgba(255, 255, 255, .07); }
  .pcbl__fill { display: block; height: 100%; border-radius: 3px; background: var(--pc-grad); transform-origin: left;
    transform: scaleX(0); animation: pcblGrow .95s var(--pc-ease-out) forwards; }
  @keyframes pcblGrow { to { transform: scaleX(1); } }
  .pcbl__amt {
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600;
    background: linear-gradient(135deg, var(--pc-gold-a), var(--pc-gold-b));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }

  /* ---- needs chasing table ---- */
  .pcq__r {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) 108px 104px auto;
    align-items: center; gap: 13px; padding: 12px 20px; position: relative; cursor: pointer;
    transition: background .16s var(--pc-ease);
  }
  .pcq__r + .pcq__r::before { content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 1px; background: var(--pc-hair); }
  .pcq__r:hover { background: rgba(75, 99, 255, .055); }
  .pcq__r:hover .pcq__acts { opacity: 1; }
  .pcq__av {
    width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
    font: 670 12px/1 var(--font), Inter, sans-serif; color: #FFF;
    background: linear-gradient(150deg, #FF8A6B, #E0533D); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
  }
  .pcq__nm { display: block; font: 600 13.2px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pcq__no { display: block; margin-top: 4px; font: 500 11px/1 var(--font-ledger), monospace; color: var(--pc-ink-3); }
  .pcq__late { display: block; font: 620 11.5px/1 var(--font), Inter, sans-serif; color: var(--pc-amber); }
  .pcq__late.is-bad { color: var(--pc-coral); }
  .pcq__track { display: block; margin-top: 6px; height: 3px; border-radius: 2px; background: rgba(20, 28, 60, .07); overflow: hidden; }
  html[data-theme="dark"] .pcq__track { background: rgba(255, 255, 255, .07); }
  .pcq__prog { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #E8A33D, #D9483A);
    transform-origin: left; transform: scaleX(0); animation: pcblGrow .95s var(--pc-ease-out) forwards; }
  .pcq__amt {
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600;
    text-align: right; white-space: nowrap;
    background: linear-gradient(135deg, var(--pc-gold-a), var(--pc-gold-b));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .pcq__acts { display: flex; gap: 6px; opacity: .62;
    transition: opacity .2s var(--pc-ease); }
  .pcq__b {
    height: 30px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px; border-radius: 9px;
    border: 1px solid var(--pc-hair-2); background: var(--pc-card-solid); color: var(--pc-ink-2);
    font: 580 11.5px/1 var(--font), Inter, sans-serif; cursor: pointer;
    transition: transform .14s var(--pc-ease), color .16s, border-color .16s;
  }
  .pcq__b i { font-size: 12.5px; }
  .pcq__b:hover { color: var(--pc-indigo); border-color: rgba(75, 99, 255, .4); transform: translateY(-1px); }
  .pcq__b--ico { width: 30px; padding: 0; justify-content: center; }
  .pcq__b--go { background: var(--pc-grad); border-color: transparent; color: #FFF; box-shadow: 0 6px 14px -8px rgba(61, 79, 224, .9); }
  .pcq__b--go:hover { color: #FFF; }

  /* ---- activity timeline ---- */
  .pca { padding: 4px 20px 6px; }
  .pca__d { font: 640 9.5px/1 var(--font), Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase;
    color: var(--pc-ink-3); padding: 12px 0 9px; }
  .pca__r { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: flex-start;
    padding: 8px 0; position: relative; }
  .pca__ln { position: absolute; left: 13.5px; top: 30px; bottom: -8px; width: 1px; background: var(--pc-hair); }
  .pca__r:last-child .pca__ln { display: none; }
  .pca__ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 12px;
    background: rgba(var(--tone), .13); color: rgb(var(--tone)); position: relative; z-index: 1; }
  .pca__t { display: block; font: 540 12.8px/1.4 var(--font), Inter, sans-serif; color: var(--pc-ink); }
  .pca__t b { font-weight: 660; }
  .pca__m { display: block; margin-top: 3px; font: 450 11.3px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }
  .pca__w { font: 500 11px/1 var(--font-ledger), monospace; color: var(--pc-ink-3); white-space: nowrap; padding-top: 2px; }

  /* ---- pre-invoice nudge strip ---- */
  .pcn {
    display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-radius: 16px; margin-bottom: 16px;
    background: linear-gradient(100deg, rgba(230, 160, 40, .13), rgba(230, 160, 40, .05));
    border: 1px solid rgba(200, 140, 30, .2);
  }
  .pcn__ic { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; display: grid; place-items: center;
    background: rgba(200, 140, 30, .16); color: var(--pc-amber); font-size: 15px; }
  .pcn__t { font: 600 13.2px/1.3 var(--font), Inter, sans-serif; color: var(--pc-ink); }
  .pcn__s { margin-top: 3px; font: 450 11.8px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }
  .pcn__a { margin-left: auto; display: flex; gap: 8px; align-items: center; }
  .pcn__x { width: 30px; height: 30px; border-radius: 9px; border: 0; background: transparent; color: var(--pc-ink-3); cursor: pointer; }
  .pcn__x:hover { background: rgba(20, 28, 60, .06); color: var(--pc-ink); }

  /* ============================================================== ENTRANCE */
  .pcin { opacity: 0; transform: translateY(12px); animation: pcInUp .62s var(--pc-ease-out) both; animation-delay: var(--d, 0ms); }
  @keyframes pcInUp { to { opacity: 1; transform: none; } }

  /* ============================================================== A11Y/MOTION */
  @media (prefers-reduced-motion: reduce) {
    .pcin, .pch__b, .pcwx-sun, .pcwx-cloud, .pcwx-drop, .pch__pulse::after,
    .pck__line, .pck__fill, .pcch__ln, .pcch__ar, .pcch__pt, .pcbl__fill, .pcq__prog {
      animation: none !important;
    }
    .pcin { opacity: 1; transform: none; }
    .pck__line, .pcch__ln { stroke-dashoffset: 0; }
    .pck__fill { opacity: .11; } .pcch__ar, .pcch__pt { opacity: 1; }
    .pcbl__fill, .pcq__prog { transform: scaleX(1); }
    .pcx-prim, .pck__c, .pcc, .pch__pod, .pcq__b, .pcbtn, .user-chip { transition: none; }
  }

  /* ==================================================================================
     BUGFIX — the phone tab bar was rendering on desktop.
     `.tabbar{display:none}` (0,1,0) loses to the un-mediaqueried
     `#app-tabbar.tabbar{display:flex}` added in v3.7.3 (1,1,0), so the dock unhid at
     every width and — with all its positioning inside max-width:767.98px — dropped into
     normal flow as a 114px strip of scrambled buttons at the end of the page.
     Re-hidden here at >=768px only. The phone still gets display:flex from three
     separate max-width:767.98px rules, so it is untouched.
     ================================================================================ */
  #app-tabbar, #app-speeddial, #app-menu { display: none !important; }
}

/* =====================================================================================
 *  v3.32.1 — NOTIFICATIONS ON DESKTOP: one bell, and a panel that matches the app.
 *  ------------------------------------------------------------------------------------
 *  ⚠ TWO BELLS. v3.32.0 added a decorative bell to .topbar__right, not realising
 *  notifications.js mountBell() already injects `.notif-bell` as that container's FIRST
 *  child. Two bells rendered, and openPanel() anchors to ITS bell — the leftmost one — so
 *  the popover opened out over the middle of the page. The duplicate is gone from
 *  index.html; the real bell is restyled here to match the .pcbtn cluster.
 *
 *  ⚠ THE PANEL HEADER HAD NO DESKTOP STYLES AT ALL. The v3.26.0 sheet markup
 *  (.nt3__grip / .nt3__hd / .nt3__t / .nt3__bulk / .nt3__n) is emitted on BOTH devices,
 *  but every .nt3__* rule in this file is scoped to `html.dm-on`. On desktop that left a
 *  raw <h2> at browser-default size, a bare unstyled <button>, and a phone drag-grabber
 *  floating above them. Only the ROWS looked right, because desktopListHTML() emits the
 *  legacy .notif-* classes which notifications.js styles inline.
 *
 *  Everything below is inside @media (min-width: 768px) — checked by
 *  tools/check-pc-scope.js, which also scans this block.
 * ================================================================================== */
@media (min-width: 768px) {

  /* ---- the one true bell, dressed as a .pcbtn ---- */
  html.pc-on .topbar__right .notif-bell {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; font-size: 15px;
    border: 1px solid var(--pc-hair); background: rgba(255, 255, 255, .5); color: var(--pc-ink-2);
    transition: transform .16s var(--pc-ease), background .18s var(--pc-ease), color .18s var(--pc-ease), box-shadow .18s var(--pc-ease);
  }
  html[data-theme="dark"].pc-on .topbar__right .notif-bell { background: rgba(255, 255, 255, .05); }
  html.pc-on .topbar__right .notif-bell:hover {
    background: var(--pc-card-solid); color: var(--pc-ink); transform: translateY(-1px);
    box-shadow: 0 6px 14px -8px rgba(26, 36, 78, .4);
  }
  html.pc-on .topbar__right .notif-bell:active { transform: translateY(0) scale(.96); }
  /* Indigo, not critical-red: a notification count is navigation, not an alarm (§4.7). */
  html.pc-on .topbar__right .notif-badge {
    top: 3px; right: 3px; min-width: 16px; height: 16px; border-radius: 8px;
    background: var(--pc-grad); font-size: 9.5px; font-weight: 700;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .92);
  }
  html[data-theme="dark"].pc-on .topbar__right .notif-badge { box-shadow: 0 0 0 2px #12151F; }

  /* ---- the popover shell ---- */
  html.pc-on .notif-panel.nt3 {
    width: min(392px, calc(100vw - 24px)); max-height: min(72vh, 580px);
    border-radius: 18px; padding: 0; overflow: hidden;
    background: linear-gradient(180deg, rgba(252, 253, 255, .97), rgba(246, 248, 253, .94));
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 30px 70px -28px rgba(20, 28, 66, .5), 0 3px 10px -4px rgba(20, 28, 66, .14), inset 0 1px 0 rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
    transform-origin: top right;
  }
  html[data-theme="dark"].pc-on .notif-panel.nt3 {
    background: linear-gradient(180deg, rgba(31, 34, 46, .975), rgba(21, 24, 34, .955));
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 34px 76px -28px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .1);
  }
  /* the drag grabber is a phone affordance; a popover is not draggable */
  html.pc-on .notif-panel .nt3__grip { display: none; }

  /* ---- header ---- */
  html.pc-on .notif-panel .nt3__hd {
    display: flex; align-items: center; gap: 10px; padding: 14px 15px 12px;
    border-bottom: 1px solid var(--pc-hair);
  }
  html.pc-on .notif-panel .nt3__t {
    margin: 0; display: flex; align-items: center; gap: 8px;
    font: 660 14.5px/1.2 var(--font-display), Inter, sans-serif;
    letter-spacing: -.018em; color: var(--pc-ink);
  }
  html.pc-on .notif-panel .nt3__n {
    display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 8px;
    font: 620 10.5px/1.5 var(--font), Inter, sans-serif;
    background: rgba(75, 99, 255, .12); color: var(--pc-indigo);
  }
  html[data-theme="dark"].pc-on .notif-panel .nt3__n { color: #A6B2FF; }
  html.pc-on .notif-panel .nt3__bulk {
    margin-left: auto; height: 28px; padding: 0 11px; border: 0; border-radius: 9px; cursor: pointer;
    font: 580 11.8px/1 var(--font), Inter, sans-serif; white-space: nowrap;
    background: rgba(75, 99, 255, .11); color: var(--pc-indigo);
    transition: background .16s var(--pc-ease), transform .14s var(--pc-ease);
  }
  html[data-theme="dark"].pc-on .notif-panel .nt3__bulk { color: #A6B2FF; background: rgba(147, 162, 255, .15); }
  html.pc-on .notif-panel .nt3__bulk:hover { background: rgba(75, 99, 255, .19); transform: translateY(-1px); }
  html.pc-on .notif-panel .nt3__bulk.is-quiet { color: var(--pc-ink-2); background: rgba(20, 28, 60, .06); }
  html[data-theme="dark"].pc-on .notif-panel .nt3__bulk.is-quiet { color: var(--pc-ink-2); background: rgba(255, 255, 255, .07); }

  /* ---- rows ---- */
  html.pc-on .notif-panel .nt3__list { padding: 7px; }
  /* ⚠ THREE LEGACY RULES FIGHT THE ROUNDED ROW AND ALL THREE MUST BE UNDONE HERE:
     line ~2776 `.notif-item{border-bottom}`, ~3435 `.notif-item + .notif-item{border-top}`
     and ~3438 `.notif-item.is-unread::before`, a SQUARE-CORNERED blue bar that pokes out
     of a 12px-radius row. Unread now reads as a soft indigo wash plus the existing dot. */
  html.pc-on .notif-panel .notif-item { border-radius: 12px; border-bottom: 0; }
  html.pc-on .notif-panel .notif-item + .notif-item { border-top: 0; }
  html.pc-on .notif-panel .notif-item::before { display: none; }
  html.pc-on .notif-panel .notif-item.is-unread { background: rgba(75, 99, 255, .075); }
  html[data-theme="dark"].pc-on .notif-panel .notif-item.is-unread { background: rgba(147, 162, 255, .1); }
  html.pc-on .notif-panel .notif-item:hover { background: rgba(75, 99, 255, .13); }
  html.pc-on .notif-panel .notif-hit { border-radius: 12px; }
  html.pc-on .notif-panel .notif-hit { gap: 11px; padding: 10px 11px; align-items: flex-start; }
  html.pc-on .notif-panel .notif-ico { width: 30px; height: 30px; border-radius: 10px; flex: 0 0 30px; }
  html.pc-on .notif-panel .notif-title { font: 580 13px/1.35 var(--font), Inter, sans-serif; color: var(--pc-ink); }
  html.pc-on .notif-panel .notif-sub { font: 450 12px/1.4 var(--font), Inter, sans-serif; color: var(--pc-ink-2); }
  html.pc-on .notif-panel .notif-meta { font: 500 11px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3); margin-top: 4px; }
  html.pc-on .notif-panel .notif-dot { background: var(--pc-indigo); }
  html.pc-on .notif-panel .notif-toggle { color: var(--pc-ink-3); border-radius: 9px; }
  html.pc-on .notif-panel .notif-toggle:hover { color: var(--pc-indigo); background: rgba(75, 99, 255, .1); }
  html.pc-on .notif-panel .notif-empty { padding: 34px 20px; color: var(--pc-ink-3); }
}


/* =====================================================================================
 *  v3.33.0 — GLOBAL DESKTOP PRIMITIVES  ·  "PC NATIVE 2026" everywhere  (Item 2)
 *  ------------------------------------------------------------------------------------
 *  APPEND-ONLY. Every rule below is inside @media (min-width: 768px) and is checked by
 *  tools/check-pc-scope.js. The phone (<= 767.98px) sees none of it.
 *
 *  ⚠ WHY EVERY SELECTOR CARRIES `html.pc-on`, EVEN WHERE IT LOOKS REDUNDANT:
 *  `.ff__*` (js/views/settings.js ~2373) and `.ht-toast*` (js/ui/toast.js ~44) are
 *  injected into <head> AT RUNTIME, so they land AFTER this file in document order. A
 *  plain `.ff__input {}` here would tie on specificity and LOSE on order — silently, with
 *  no error. `html.pc-on .x` is (0,2,1) and wins cleanly. If you strip the prefix as
 *  "tidying", those two families quietly stop being styled on desktop.
 * ================================================================================== */
@media (min-width: 768px) {

  /* ============================================================ BUTTONS */
  html.pc-on .btn-ios-primary,
  html.pc-on .btn-ios-secondary,
  html.pc-on .btn-ios-ghost,
  html.pc-on .btn-ios-danger,
  html.pc-on .btn-ios-success {
    height: 38px; padding: 0 16px; border-radius: 11px; gap: 8px;
    font: 600 13px/1 var(--font), Inter, sans-serif; letter-spacing: -.006em;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; position: relative; overflow: hidden;
    transition: transform .16s var(--pc-ease), box-shadow .2s var(--pc-ease),
                background .18s var(--pc-ease), border-color .18s var(--pc-ease), color .18s var(--pc-ease);
  }
  html.pc-on .btn-ios-primary i, html.pc-on .btn-ios-secondary i,
  html.pc-on .btn-ios-ghost i, html.pc-on .btn-ios-danger i, html.pc-on .btn-ios-success i { font-size: 14px; }

  html.pc-on .btn-ios-primary {
    background: var(--pc-grad); color: #FFF; border: 0;
    box-shadow: 0 10px 22px -12px rgba(61, 79, 224, .9), inset 0 1px 0 rgba(255, 255, 255, .3);
  }
  html.pc-on .btn-ios-primary:hover:not(:disabled) {
    transform: translateY(-1.5px);
    box-shadow: 0 16px 30px -12px rgba(61, 79, 224, .95), inset 0 1px 0 rgba(255, 255, 255, .34);
  }
  /* the raking sheen, same gesture as the dashboard's New invoice */
  html.pc-on .btn-ios-primary::after {
    content: ""; position: absolute; inset: 0; opacity: 0; transform: translateX(-100%);
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .34) 50%, transparent 70%);
    transition: opacity .2s;
  }
  html.pc-on .btn-ios-primary:hover:not(:disabled)::after { opacity: 1; animation: pcSheen .85s var(--pc-ease); }

  html.pc-on .btn-ios-secondary {
    background: rgba(255, 255, 255, .58); color: var(--pc-ink);
    border: 1px solid var(--pc-hair-2);
  }
  html[data-theme="dark"].pc-on .btn-ios-secondary { background: rgba(255, 255, 255, .06); }
  html.pc-on .btn-ios-secondary:hover:not(:disabled) {
    transform: translateY(-1px); background: var(--pc-card-solid);
    box-shadow: 0 8px 18px -10px rgba(26, 36, 78, .45);
  }

  html.pc-on .btn-ios-ghost {
    background: transparent; color: var(--pc-ink-2); border: 1px solid transparent;
  }
  html.pc-on .btn-ios-ghost:hover:not(:disabled) { background: rgba(75, 99, 255, .1); color: var(--pc-indigo); }

  html.pc-on .btn-ios-danger {
    background: linear-gradient(150deg, #F0645A, #C5271E); color: #FFF; border: 0;
    box-shadow: 0 10px 22px -12px rgba(197, 39, 30, .85), inset 0 1px 0 rgba(255, 255, 255, .26);
  }
  html.pc-on .btn-ios-danger:hover:not(:disabled) { transform: translateY(-1.5px); box-shadow: 0 16px 30px -12px rgba(197, 39, 30, .9); }

  html.pc-on .btn-ios-success {
    background: linear-gradient(150deg, #2BB981, #0E7A52); color: #FFF; border: 0;
    box-shadow: 0 10px 22px -12px rgba(14, 122, 82, .85), inset 0 1px 0 rgba(255, 255, 255, .26);
  }
  html.pc-on .btn-ios-success:hover:not(:disabled) { transform: translateY(-1.5px); box-shadow: 0 16px 30px -12px rgba(14, 122, 82, .9); }

  html.pc-on .btn-ios-primary:active:not(:disabled),
  html.pc-on .btn-ios-secondary:active:not(:disabled),
  html.pc-on .btn-ios-ghost:active:not(:disabled),
  html.pc-on .btn-ios-danger:active:not(:disabled),
  html.pc-on .btn-ios-success:active:not(:disabled) { transform: translateY(0) scale(.98); }

  html.pc-on .btn-ios-primary:disabled, html.pc-on .btn-ios-secondary:disabled,
  html.pc-on .btn-ios-ghost:disabled, html.pc-on .btn-ios-danger:disabled,
  html.pc-on .btn-ios-success:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

  html.pc-on .btn-ios-primary:focus-visible, html.pc-on .btn-ios-secondary:focus-visible,
  html.pc-on .btn-ios-ghost:focus-visible, html.pc-on .btn-ios-danger:focus-visible,
  html.pc-on .btn-ios-success:focus-visible {
    outline: none; box-shadow: 0 0 0 3.5px rgba(75, 99, 255, .32);
  }

  /* ============================================================ FIELDS */
  html.pc-on .ff__input,
  html.pc-on .form-control,
  html.pc-on .form-select,
  html.pc-on textarea.form-control {
    border-radius: 11px; border: 1px solid var(--pc-hair-2);
    /* ⚠ background-COLOR, never the `background` shorthand. The shorthand resets
       background-repeat/position/size, which nukes the <select> caret added below. */
    background-color: rgba(255, 255, 255, .6); color: var(--pc-ink);
    font: 450 13.5px/1.4 var(--font), Inter, sans-serif;
    box-shadow: inset 0 1px 2px rgba(20, 28, 60, .035);
    transition: border-color .18s var(--pc-ease), box-shadow .18s var(--pc-ease), background .18s var(--pc-ease);
  }
  html[data-theme="dark"].pc-on .ff__input,
  html[data-theme="dark"].pc-on .form-control,
  html[data-theme="dark"].pc-on .form-select { background-color: rgba(255, 255, 255, .05); }

  html.pc-on .ff__input:focus,
  html.pc-on .form-control:focus,
  html.pc-on .form-select:focus {
    outline: none; border-color: rgba(75, 99, 255, .55); background-color: var(--pc-card-solid);
    box-shadow: 0 0 0 3.5px rgba(75, 99, 255, .14);
  }
  html.pc-on .ff__input.is-invalid, html.pc-on .form-control.is-invalid {
    border-color: rgba(197, 39, 30, .5); box-shadow: 0 0 0 3.5px rgba(197, 39, 30, .12);
  }
  html.pc-on .ff > label { font: 500 12px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }
  html.pc-on .ff__input:focus + label { color: var(--pc-indigo); }

  /* A <select> styled to match a text input becomes indistinguishable from one. Give it
     an indigo chevron so it reads as a dropdown before you click it. The arrow is an
     inline SVG data URI (no extra request); the stroke colour is baked per theme in the
     rule below, because a data URI cannot read currentColor. */
  html.pc-on .form-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234B63FF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 15px 15px;
    cursor: pointer;
  }
  html[data-theme="dark"].pc-on .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A6B2FF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  }
  html.pc-on .form-select:disabled { cursor: not-allowed; opacity: .5; }

  /* ============================================================ SWITCH */
  html.pc-on .ios-switch__slider { background: rgba(20, 28, 60, .16); transition: background .22s var(--pc-ease); }
  html[data-theme="dark"].pc-on .ios-switch__slider { background: rgba(255, 255, 255, .16); }
  html.pc-on .ios-switch input:checked + .ios-switch__slider {
    background: var(--pc-grad); box-shadow: 0 4px 12px -5px rgba(61, 79, 224, .75);
  }
  html.pc-on .ios-switch input:focus-visible + .ios-switch__slider { box-shadow: 0 0 0 3.5px rgba(75, 99, 255, .3); }

  /* ============================================================ BADGES */
  html.pc-on .badge-ios {
    border-radius: 8px; padding: 4px 9px; font: 620 10.8px/1.35 var(--font), Inter, sans-serif;
    letter-spacing: .015em; border: 0; gap: 0;
  }
  /* ⚠ THE DOT IS `.badge-ios::before` (style.css ~614) AND IT CARRIES AN ANIMATION.
     `.badge-overdue::before` runs `badgePulse` forever. Hiding the pseudo-element with
     `content:none` also stops that timer — which is the point: on a desktop invoice list
     of 40 rows, 40 infinitely pulsing dots is 40 permanent compositor layers. On the
     phone the dot stays exactly as it is. */
  html.pc-on .badge-ios::before { content: none; }
  html.pc-on .badge-paid, html.pc-on .badge-paid_in_full { background: rgba(14, 122, 82, .13); color: var(--pc-green); }
  html.pc-on .badge-overdue { background: rgba(197, 39, 30, .13); color: var(--pc-coral); }
  html.pc-on .badge-due, html.pc-on .badge-partially_paid { background: rgba(183, 121, 18, .15); color: var(--pc-amber); }
  html.pc-on .badge-pre_invoice, html.pc-on .badge-scheduled { background: rgba(75, 99, 255, .13); color: var(--pc-indigo); }
  html[data-theme="dark"].pc-on .badge-pre_invoice, html[data-theme="dark"].pc-on .badge-scheduled { color: #A6B2FF; }
  html.pc-on .badge-cancelled { background: rgba(122, 131, 158, .16); color: var(--pc-ink-3); }

  /* ============================================================ CHIPS */
  html.pc-on .chip {
    height: 32px; padding: 0 13px; border-radius: 10px; gap: 7px;
    display: inline-flex; align-items: center; cursor: pointer;
    font: 550 12.5px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
    background: rgba(255, 255, 255, .55); border: 1px solid var(--pc-hair-2);
    transition: transform .15s var(--pc-ease), background .16s var(--pc-ease), color .16s var(--pc-ease), border-color .16s var(--pc-ease);
  }
  html[data-theme="dark"].pc-on .chip { background: rgba(255, 255, 255, .05); }
  html.pc-on .chip:hover { transform: translateY(-1px); color: var(--pc-ink); background: var(--pc-card-solid); }
  html.pc-on .chip.is-active, html.pc-on .chip.selected {
    background: rgba(75, 99, 255, .12); border-color: rgba(75, 99, 255, .4); color: var(--pc-indigo); font-weight: 620;
  }
  html[data-theme="dark"].pc-on .chip.is-active, html[data-theme="dark"].pc-on .chip.selected { color: #A6B2FF; }

  /* ============================================================ SEGMENTED */
  html.pc-on .segmented, html.pc-on .seg {
    padding: 3px; border-radius: 11px; background: rgba(20, 28, 60, .055);
    border: 1px solid var(--pc-hair); display: inline-flex; gap: 2px;
  }
  html[data-theme="dark"].pc-on .segmented, html[data-theme="dark"].pc-on .seg { background: rgba(255, 255, 255, .05); }
  html.pc-on .segmented__item, html.pc-on .seg__i {
    border: 0; background: transparent; padding: 6px 13px; border-radius: 8px; cursor: pointer;
    font: 570 12.2px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
    transition: color .18s var(--pc-ease), background .2s var(--pc-ease);
  }
  html.pc-on .segmented__item:hover, html.pc-on .seg__i:hover { color: var(--pc-ink); }
  html.pc-on .segmented__item.is-active, html.pc-on .seg__i.is-active {
    background: var(--pc-grad); color: #FFF; box-shadow: 0 4px 10px -4px rgba(61, 79, 224, .7);
  }

  /* ============================================================ TABLES */
  /* ⚠ BOOTSTRAP PAINTS AN OPAQUE BAND BEHIND EVERY CELL AND IT BREAKS DARK MODE.
     `.table > :not(caption) > * > *` carries `box-shadow: inset 0 0 0 9999px var(--bs-table-bg)`
     with --bs-table-bg defaulting to white. In light mode that is invisible over a white
     card; in DARK mode it paints a white slab, and our light --pc-ink text then sits on
     white and disappears. Overriding `color` alone does not help — the band has to go.
     Reset the Bootstrap custom properties rather than fighting the shadow selector. */
  html.pc-on .table {
    border-collapse: separate; border-spacing: 0; width: 100%; margin: 0;
    --bs-table-bg: transparent;
    --bs-table-color: var(--pc-ink);
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-border-color: transparent;
    color: var(--pc-ink);
  }
  html.pc-on .table > :not(caption) > * > * { box-shadow: none; background-color: transparent; }
  html.pc-on .table > thead > tr > th {
    font: 620 10.5px/1 var(--font), Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase;
    color: var(--pc-ink-3); padding: 11px 14px; border: 0; border-bottom: 1px solid var(--pc-hair);
    background: transparent; white-space: nowrap;
  }
  html.pc-on .table > tbody > tr > td {
    padding: 12px 14px; border: 0; font: 450 13px/1.4 var(--font), Inter, sans-serif; color: var(--pc-ink);
    vertical-align: middle;
  }
  html.pc-on .table > tbody > tr + tr > td { border-top: 1px solid var(--pc-hair); }
  html.pc-on .table > tbody > tr { transition: background .14s var(--pc-ease); }
  html.pc-on .table > tbody > tr:hover { background: rgba(75, 99, 255, .055); }
  html.pc-on .table .num {
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums; text-align: right;
  }

  /* ============================================================ EMPTY STATE */
  html.pc-on .empty-state {
    border-radius: var(--pc-r); padding: 52px 28px; gap: 12px;
    background: var(--pc-card); border: 1px solid var(--pc-hair); box-shadow: var(--pc-lift);
    -webkit-backdrop-filter: blur(20px) saturate(175%); backdrop-filter: blur(20px) saturate(175%);
  }
  html.pc-on .empty-state__icon {
    width: 56px; height: 56px; border-radius: 17px; font-size: 23px;
    background: rgba(75, 99, 255, .1); color: var(--pc-indigo);
  }
  html[data-theme="dark"].pc-on .empty-state__icon { color: #A6B2FF; }
  html.pc-on .empty-state__title {
    font: 680 17px/1.25 var(--font-display), Inter, sans-serif; letter-spacing: -.022em; color: var(--pc-ink);
  }
  html.pc-on .empty-state__text { font: 450 13.2px/1.5 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }

  /* ============================================================ TOASTS */
  html.pc-on .ht-toast {
    border-radius: 14px; padding: 13px 15px; gap: 11px; min-width: 288px; max-width: 380px;
    background: linear-gradient(180deg, rgba(252, 253, 255, .97), rgba(246, 248, 253, .94));
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 24px 54px -26px rgba(20, 28, 66, .5), 0 2px 8px -3px rgba(20, 28, 66, .12), inset 0 1px 0 rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(26px) saturate(185%); backdrop-filter: blur(26px) saturate(185%);
  }
  html[data-theme="dark"].pc-on .ht-toast {
    background: linear-gradient(180deg, rgba(31, 34, 46, .975), rgba(21, 24, 34, .955));
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 28px 62px -26px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .1);
  }
  html.pc-on .ht-toast__title { font: 640 13px/1.3 var(--font), Inter, sans-serif; color: var(--pc-ink); }
  html.pc-on .ht-toast__msg { font: 450 12.5px/1.45 var(--font), Inter, sans-serif; color: var(--pc-ink-2); }
  html.pc-on .ht-toast__icon { font-size: 17px; }
  html.pc-on .ht-toast__close { color: var(--pc-ink-3); border-radius: 8px; width: 24px; height: 24px; }
  html.pc-on .ht-toast__close:hover { background: rgba(75, 99, 255, .1); color: var(--pc-indigo); }

  /* ============================================================ MODALS */
  html.pc-on .modal-content {
    border-radius: 20px; border: 1px solid rgba(255, 255, 255, .85); overflow: hidden;
    background: linear-gradient(180deg, rgba(252, 253, 255, .98), rgba(246, 248, 253, .96));
    box-shadow: 0 40px 90px -34px rgba(20, 28, 66, .55), inset 0 1px 0 rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
  }
  html[data-theme="dark"].pc-on .modal-content {
    background: linear-gradient(180deg, rgba(31, 34, 46, .985), rgba(21, 24, 34, .97));
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 44px 96px -34px rgba(0, 0, 0, .82), inset 0 1px 0 rgba(255, 255, 255, .1);
  }
  html.pc-on .modal-header { padding: 18px 22px 14px; border-bottom: 1px solid var(--pc-hair); }
  html.pc-on .modal-title {
    font: 680 16px/1.25 var(--font-display), Inter, sans-serif; letter-spacing: -.022em; color: var(--pc-ink);
  }
  html.pc-on .modal-body { padding: 18px 22px; font: 450 13.4px/1.55 var(--font), Inter, sans-serif; color: var(--pc-ink-2); }
  html.pc-on .modal-footer { padding: 14px 22px 18px; border-top: 1px solid var(--pc-hair); gap: 9px; }
  html.pc-on .modal-backdrop.show { opacity: .42; backdrop-filter: blur(3px); }

  @media (prefers-reduced-motion: reduce) {
    html.pc-on .btn-ios-primary, html.pc-on .btn-ios-secondary, html.pc-on .btn-ios-ghost,
    html.pc-on .btn-ios-danger, html.pc-on .btn-ios-success, html.pc-on .chip,
    html.pc-on .table > tbody > tr { transition: none; }
    html.pc-on .btn-ios-primary:hover::after { animation: none; opacity: 0; }
  }
}


/* =====================================================================================
 *  v3.34.0 — DESKTOP INVOICES LIST  (Item 3, part 1)
 *  ------------------------------------------------------------------------------------
 *  APPEND-ONLY, all inside @media (min-width: 768px), checked by tools/check-pc-scope.js.
 *
 *  ⚠ THE SELECTION DOCK (.invdock) IS MOUNTED ON <body> BY invoices.js, NEVER INSIDE THE
 *  LIST CARD. `.ios-card` carries a backdrop-filter, which makes it a containing block for
 *  position:fixed descendants, and it has overflow:hidden — a dock inside would be
 *  positioned against the card and then clipped away entirely.
 * ================================================================================== */
@media (min-width: 768px) {

  /* ---- the page shell reuses the dashboard's .pcx page frame ---- */

  /* ============================================================ TAB RAIL
     Owner reverted the column-per-status "invoice book" here — it read as a second,
     heavier header competing with the page title. Back to the compact pill rail with a
     single headline figure: the rail navigates, the figure summarises, nothing shouts. */
  html.pc-on .inv-tabs {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px;
    padding: 10px 14px; margin-bottom: 14px; border-radius: var(--pc-r);
    background: var(--pc-card); border: 1px solid var(--pc-hair); box-shadow: var(--pc-lift);
    -webkit-backdrop-filter: blur(20px) saturate(175%); backdrop-filter: blur(20px) saturate(175%);
  }
  /* ⚠ `.inv-tabs__rail` (style.css ~1277) ships its own sunken background + border. On
     desktop the rail already sits inside a card, so that second inset tray read as a
     beige strip nested in a white panel. Cleared here; the phone keeps its tray. */
  html.pc-on .inv-tabs__rail {
    display: flex; flex-wrap: wrap; gap: 4px; min-width: 0;
    padding: 0; background: transparent; border: 0; border-radius: 0; overflow: visible;
  }
  html.pc-on .inv-tab {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px;
    border: 1px solid transparent; border-radius: 9px; background: transparent; cursor: pointer;
    font: 555 12.4px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-2); white-space: nowrap;
    transition: background .16s var(--pc-ease), color .16s var(--pc-ease);
  }
  html.pc-on .inv-tab i { font-size: 12.5px; opacity: .8; }
  html.pc-on .inv-tab:hover { background: rgba(75, 99, 255, .08); color: var(--pc-ink); }
  html.pc-on .inv-tab__n {
    min-width: 18px; height: 17px; padding: 0 5px; border-radius: 5.5px; display: inline-grid; place-items: center;
    font: 660 10.2px/1 var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    background: rgba(20, 28, 60, .07); color: var(--pc-ink-3);
  }
  html[data-theme="dark"].pc-on .inv-tab__n { background: rgba(255, 255, 255, .08); }
  html.pc-on .inv-tab.is-active {
    background: var(--pc-grad); color: #FFF; font-weight: 620;
    box-shadow: 0 6px 16px -8px rgba(61, 79, 224, .8);
  }
  html.pc-on .inv-tab.is-active i { opacity: 1; }
  html.pc-on .inv-tab.is-active .inv-tab__n { background: rgba(255, 255, 255, .24); color: #FFF; }
  html.pc-on .inv-tab.is-empty:not(.is-active) { opacity: .45; }

  /* The real markup (renderTabs, invoices.js ~970) emits .inv-tabs__summary with
     .inv-sum__figure / .inv-sum__caption / .inv-sum__nudge — NOT the names used while
     prototyping. animateFigure() counts the figure up, so it must stay a plain text node. */
  html.pc-on .inv-tabs__summary {
    display: flex; align-items: center; gap: 10px; text-align: right; white-space: nowrap;
  }
  html.pc-on .inv-sum__figure {
    display: block;
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 20px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05;
    background: linear-gradient(135deg, var(--pc-gold-a), var(--pc-gold-b));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  html.pc-on .inv-sum__caption { display: block; margin-top: 3px; font: 450 11px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }
  html.pc-on .inv-tabs__summary > span:first-child { display: flex; flex-direction: column; align-items: flex-end; }
  html.pc-on .inv-sum__nudge {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
    border: 1px solid rgba(197, 39, 30, .28); border-radius: 9px; cursor: pointer;
    background: rgba(197, 39, 30, .1); color: var(--pc-coral);
    font: 600 11.8px/1 var(--font), Inter, sans-serif;
    transition: transform .14s var(--pc-ease), background .16s var(--pc-ease);
  }
  html.pc-on .inv-sum__nudge:hover { transform: translateY(-1px); background: rgba(197, 39, 30, .16); }
  html.pc-on .inv-sum__nudge i { font-size: 12px; }

  /* ============================================================ THE LIST CARD */
  html.pc-on .pcx .ios-card {
    border-radius: var(--pc-r); overflow: hidden; padding: 0;
    background: var(--pc-card); border: 1px solid var(--pc-hair); box-shadow: var(--pc-lift);
    -webkit-backdrop-filter: blur(20px) saturate(175%); backdrop-filter: blur(20px) saturate(175%);
  }

  /* ---- filter row ----------------------------------------------------------------
     Was: five boxed controls at 36px with heavy borders, which turned the filter into
     the visual peer of the table it filters. Now: search keeps its box because it takes
     typing; everything else is a borderless 30px chip that only draws a border once it
     is actually filtering. Quiet by default, obvious when active. */
  html.pc-on .toolbar--filters {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 9px 12px; border-bottom: 1px solid var(--pc-hair); background: transparent;
  }
  html.pc-on .inv-filter-bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; flex: 1; min-width: 0; }
  html.pc-on .inv-filter-bar .topbar__search { max-width: 260px; }
  html.pc-on .inv-filter-bar .topbar__search-input { height: 30px; border-radius: 9px; font-size: 12.5px; }
  html.pc-on .inv-filter-bar .topbar__search-icon { font-size: 12.5px; }

  html.pc-on .inv-f {
    height: 30px; padding: 0 26px 0 9px; border-radius: 8px; width: auto; min-width: 0;
    border: 1px solid transparent; background-color: transparent; box-shadow: none;
    font: 545 12.2px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
    background-position: right 7px center; background-size: 13px 13px;
    transition: background-color .16s var(--pc-ease), color .16s var(--pc-ease), border-color .16s var(--pc-ease);
  }
  html.pc-on .inv-f:hover { background-color: rgba(75, 99, 255, .08); color: var(--pc-ink); }
  /* `.is-set` is what afterFilter() (invoices.js ~962) already toggles when a control
     is off its default — reuse it rather than inventing a second state class. */
  html.pc-on .inv-f.is-set {
    background-color: rgba(75, 99, 255, .12); border-color: rgba(75, 99, 255, .34);
    color: var(--pc-indigo); font-weight: 620;
  }
  html[data-theme="dark"].pc-on .inv-f.is-set { color: #A6B2FF; }

  html.pc-on .dr-wrap {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px;
    border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--pc-ink-2);
    transition: background .16s var(--pc-ease), border-color .16s var(--pc-ease);
  }
  html.pc-on .dr-wrap:hover { background: rgba(75, 99, 255, .08); }
  html.pc-on .dr-wrap:focus-within { border-color: rgba(75, 99, 255, .45); background: rgba(75, 99, 255, .1); }
  html.pc-on .dr-wrap i { font-size: 12px; color: var(--pc-ink-3); }
  html.pc-on .dr-wrap input {
    border: 0; background: transparent; outline: none; width: 142px; color: inherit;
    font: 545 12.2px/1 var(--font), Inter, sans-serif;
  }
  html.pc-on .inv-clear { height: 30px; padding: 0 10px; border-radius: 8px; font-size: 12px; }
  html.pc-on #inv-count { font: 500 11.5px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }

  /* natural-language chips fold into the same row rather than owning a strip of their own */
  html.pc-on .nl-chips {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 8px 14px; border-bottom: 1px solid var(--pc-hair); background: rgba(75, 99, 255, .04);
  }
  html.pc-on .nl-chip {
    display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px;
    border-radius: 7px; background: rgba(75, 99, 255, .12); color: var(--pc-indigo);
    font: 570 11px/1 var(--font), Inter, sans-serif; border: 0;
  }
  html[data-theme="dark"].pc-on .nl-chip { color: #A6B2FF; }

  /* ============================================================ SELECTION DOCK
     The old inline .selbar sat between the toolbar and the table, so ticking a row
     PUSHED the whole list down and the row you just clicked moved under the cursor.
     This floats instead: a glass pill anchored to the bottom of the CONTENT area (not
     the window — it is inset by --sidebar-w so it centres over the table). Nothing
     reflows, and the actions stay reachable however far you have scrolled. */
  /* the dock floats OVER the list, so the card needs room underneath it or the last
     row sits behind the glass */
  html.pc-on .inv-table.is-picking { margin-bottom: 62px; }

  html.pc-on .invdock-wrap {
    position: fixed; left: var(--sidebar-w, 232px); right: 0; bottom: 26px; z-index: 900;
    display: flex; justify-content: center; pointer-events: none;
  }
  html.pc-on .invdock {
    pointer-events: auto; display: flex; align-items: center; gap: 12px;
    padding: 9px 10px 9px 12px; border-radius: 16px;
    background: linear-gradient(180deg, rgba(252, 253, 255, .97), rgba(246, 248, 253, .94));
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 26px 60px -22px rgba(20, 28, 66, .55), 0 3px 10px -4px rgba(20, 28, 66, .16), inset 0 1px 0 rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
    animation: pcDockIn .34s var(--pc-ease-out) both;
  }
  html[data-theme="dark"].pc-on .invdock {
    background: linear-gradient(180deg, rgba(31, 34, 46, .975), rgba(21, 24, 34, .955));
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 30px 66px -22px rgba(0, 0, 0, .82), inset 0 1px 0 rgba(255, 255, 255, .1);
  }
  @keyframes pcDockIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
  html.pc-on .invdock__n {
    min-width: 30px; height: 30px; padding: 0 9px; border-radius: 10px; display: grid; place-items: center;
    background: var(--pc-grad); color: #FFF;
    font: 700 13px/1 var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    box-shadow: 0 5px 13px -6px rgba(61, 79, 224, .85);
  }
  html.pc-on .invdock__meta { display: flex; flex-direction: column; gap: 3px; }
  html.pc-on .invdock__t { font: 620 12.8px/1 var(--font), Inter, sans-serif; color: var(--pc-ink); white-space: nowrap; }
  html.pc-on .invdock__s {
    font: 550 11.4px/1 var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    color: var(--pc-ink-3); white-space: nowrap;
  }
  html.pc-on .invdock__all {
    border: 0; background: transparent; padding: 0; cursor: pointer;
    font: 600 11.4px/1 var(--font), Inter, sans-serif; color: var(--pc-indigo); white-space: nowrap;
  }
  html[data-theme="dark"].pc-on .invdock__all { color: #A6B2FF; }
  html.pc-on .invdock__all:hover { text-decoration: underline; }
  html.pc-on .invdock__sep { width: 1px; align-self: stretch; margin: 2px 1px; background: var(--pc-hair-2); }
  html.pc-on .invdock__b {
    height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px;
    border-radius: 10px; border: 1px solid var(--pc-hair-2); background: var(--pc-card-solid);
    color: var(--pc-ink-2); cursor: pointer; font: 570 12px/1 var(--font), Inter, sans-serif; white-space: nowrap;
    transition: transform .14s var(--pc-ease), color .16s, border-color .16s;
  }
  html.pc-on .invdock__b i { font-size: 13px; }
  html.pc-on .invdock__b:hover { transform: translateY(-1px); color: var(--pc-indigo); border-color: rgba(75, 99, 255, .42); }
  html.pc-on .invdock__b--go {
    background: var(--pc-grad); border-color: transparent; color: #FFF;
    box-shadow: 0 6px 15px -8px rgba(61, 79, 224, .9);
  }
  html.pc-on .invdock__b--go:hover { color: #FFF; }
  html.pc-on .invdock__x {
    width: 30px; height: 30px; border-radius: 9px; border: 0; background: transparent;
    color: var(--pc-ink-3); cursor: pointer; display: grid; place-items: center;
  }
  html.pc-on .invdock__x:hover { background: rgba(20, 28, 60, .07); color: var(--pc-ink); }

  /* ============================================================ THE TABLE */
  html.pc-on .inv-table {
    width: 100%; border-collapse: separate; border-spacing: 0; margin: 0;
    /* Same Bootstrap reset as v3.33.0 — the inset 9999px white band would otherwise
       paint over every cell in dark mode. See the v3.33.0 note. */
    --bs-table-bg: transparent; --bs-table-color: var(--pc-ink);
    --bs-table-accent-bg: transparent; --bs-table-border-color: transparent;
    color: var(--pc-ink);
  }
  html.pc-on .inv-table > :not(caption) > * > * { box-shadow: none; background-color: transparent; }
  html.pc-on .inv-table thead th {
    position: sticky; top: 0; z-index: 2;
    font: 640 10.2px/1 var(--font), Inter, sans-serif; letter-spacing: .085em; text-transform: uppercase;
    color: var(--pc-ink-3); padding: 12px 14px; border: 0; white-space: nowrap;
    background: rgba(246, 247, 251, .92);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--pc-hair);
  }
  html[data-theme="dark"].pc-on .inv-table thead th { background: rgba(20, 23, 33, .92); }
  html.pc-on .inv-table tbody td {
    padding: 13px 14px; border: 0; border-top: 1px solid var(--pc-hair);
    font: 450 13px/1.4 var(--font), Inter, sans-serif; color: var(--pc-ink); vertical-align: middle;
  }
  html.pc-on .inv-table tbody tr:first-child td { border-top: 0; }
  html.pc-on .inv-row { transition: background .14s var(--pc-ease); cursor: pointer; }
  html.pc-on .inv-row:hover { background: rgba(75, 99, 255, .055); }
  html.pc-on .inv-row.is-sel { background: rgba(75, 99, 255, .1); }
  html.pc-on .inv-row.is-sel:hover { background: rgba(75, 99, 255, .14); }
  /* an indigo rail marks the selected row without shifting any column */
  html.pc-on .inv-row td:first-child { position: relative; }
  html.pc-on .inv-row.is-sel td:first-child::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pc-grad);
  }
  /* ⚠ TWO LEGACY RULES FIGHT THE SELECTED ROW:
     line ~747 `.inv-table tbody tr.is-sel td.inv-numcell{background:var(--accent-wash)}`
     painted a second, differently-tinted block behind JUST the number cell, so a selected
     row read as a row with a box stuck on it; and line ~1767 `.inv-row.is-sel` carries
     `!important`, so the row tint has to be !important too or it never applies. */
  html.pc-on .inv-table tbody tr.is-sel td.inv-numcell { background: transparent; }
  html.pc-on .inv-row.is-sel { background: rgba(75, 99, 255, .1) !important; }
  html.pc-on .inv-row.is-sel:hover { background: rgba(75, 99, 255, .14) !important; }
  /* ⚠ REAL DATA WRAPS WHERE THE PROTOTYPE DID NOT. Invoice numbers ("INV-2026-016") and
     UK long dates ("02 Sept 2026") both broke onto two lines once the real column count
     (nine columns + seven row actions) squeezed the table. Numbers and dates are atomic
     — never let them wrap; give the customer column the flex instead. */
  html.pc-on .inv-numcell { white-space: nowrap; }
  html.pc-on .inv-numcell strong {
    font-family: var(--font-ledger), monospace; font-weight: 600; font-size: 12.6px;
    letter-spacing: -.01em; color: var(--pc-ink); white-space: nowrap;
  }
  html.pc-on .inv-table tbody td:nth-child(5),
  html.pc-on .inv-table tbody td:nth-child(6) { white-space: nowrap; }
  html.pc-on .inv-table tbody td:nth-child(3) { min-width: 130px; }
  html.pc-on .inv-table .mono { font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums; }
  /* money reads gold, per §4.7 — figures and names only */
  html.pc-on .inv-table td.mono.text-end {
    font-size: 13px; font-weight: 600;
    background: linear-gradient(135deg, var(--pc-gold-a), var(--pc-gold-b));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  html.pc-on .inv-table td.mono.text-end .text-secondary-ios {
    -webkit-text-fill-color: var(--pc-ink-3); color: var(--pc-ink-3); font-weight: 400;
  }
  html.pc-on .inv-table .text-secondary-ios { color: var(--pc-ink-3); font-size: 12.4px; }

  /* checkbox column */
  /* The tick column is quiet until it is wanted: 0 opacity at rest, revealed on row
     hover, and held open for every row once a selection exists (.is-picking on the
     table) so the column never appears to flicker mid-task. It always occupies its
     44px, so nothing shifts when it fades in. */
  html.pc-on .inv-ck { width: 44px; padding-left: 16px !important; padding-right: 0 !important; }
  html.pc-on .inv-table tbody .ck { opacity: 0; transition: opacity .16s var(--pc-ease); }
  html.pc-on .inv-row:hover .ck,
  html.pc-on .inv-table.is-picking tbody .ck,
  html.pc-on .inv-row.is-sel .ck { opacity: 1; }
  html.pc-on .ck input { position: absolute; opacity: 0; width: 0; height: 0; }
  html.pc-on .ck span {
    display: block; width: 17px; height: 17px; border-radius: 5.5px;
    border: 1.6px solid var(--pc-hair-2); background: var(--pc-card-solid);
    position: relative; cursor: pointer; transition: background .16s var(--pc-ease), border-color .16s var(--pc-ease);
  }
  html.pc-on .ck input:checked + span { background: var(--pc-grad); border-color: transparent; }
  html.pc-on .ck input:checked + span::after {
    content: ""; position: absolute; left: 5px; top: 1.5px; width: 4.5px; height: 9px;
    border: solid #FFF; border-width: 0 2px 2px 0; transform: rotate(43deg);
  }
  html.pc-on .ck input:focus-visible + span { box-shadow: 0 0 0 3.5px rgba(75, 99, 255, .3); }

  /* row actions — present but quiet, full strength on row hover */
  html.pc-on .row-acts { width: 1%; white-space: nowrap; }
  html.pc-on .row-actgrp { display: flex; gap: 5px; justify-content: flex-end; opacity: .5; transition: opacity .18s var(--pc-ease); }
  html.pc-on .inv-row:hover .row-actgrp { opacity: 1; }
  html.pc-on .row-act {
    width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px;
    border: 1px solid var(--pc-hair-2); background: var(--pc-card-solid); color: var(--pc-ink-2);
    cursor: pointer; font-size: 13px;
    transition: transform .14s var(--pc-ease), color .16s, border-color .16s;
  }
  html.pc-on .row-act:hover { transform: translateY(-1px); color: var(--pc-indigo); border-color: rgba(75, 99, 255, .42); }
  html.pc-on .row-act--danger:hover { color: var(--pc-coral); border-color: rgba(197, 39, 30, .42); }

  /* ---- the status track ---- */
  /* Bar over label, left-aligned. Stacking keeps the Status column narrow, which matters
     when nine columns share the width; a row layout pushed Issued/Due off on 1440px. */
  html.pc-on .inv-trk { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 5px; }
  html.pc-on .inv-trk__bar { display: flex; gap: 3px; }
  html.pc-on .inv-trk__seg { width: 17px; height: 4px; border-radius: 2px; background: rgba(20, 28, 60, .1); }
  html[data-theme="dark"].pc-on .inv-trk__seg { background: rgba(255, 255, 255, .1); }
  /* ⚠ THE TONE COMES FROM `--trk-tone` / `--trk-ink`, set by the `.inv-trk--draft|due|
     late|paid|void` MODIFIER CLASSES (style.css ~1365) — not from an inline custom
     property. Prototyping against an invented `--trk` made every segment fall back to
     indigo while the label stayed correct, so Paid rows showed a green label above a
     blue bar. Always read the modifier contract before styling this component. */
  html.pc-on .inv-trk__seg.is-done, html.pc-on .inv-trk__seg.is-now { background: var(--trk-tone, var(--pc-indigo)); }
  html.pc-on .inv-trk__seg.is-void { background: var(--st-void-bar, rgba(122, 131, 158, .3)); }
  html.pc-on .inv-trk__lb {
    font: 600 11.2px/1 var(--font), Inter, sans-serif;
    color: var(--trk-ink, var(--pc-ink-2)); white-space: nowrap;
  }

  @media (prefers-reduced-motion: reduce) {
    html.pc-on .invdock { animation: none; }
    
    html.pc-on .inv-tab, html.pc-on .inv-row, html.pc-on .row-act, html.pc-on .invdock__b { transition: none; }
  }
}


/* =====================================================================================
 *  v3.35.0 — INVOICES LIST: PERFORMANCE + INTERACTION OVERHAUL   (owner-reported)
 *  APPEND-ONLY, all inside @media (min-width: 768px), checked by tools/check-pc-scope.js.
 * ================================================================================== */
@media (min-width: 768px) {

  /* ================================================================= PERFORMANCE */

  /* ⚠ 1. NEVER `transform` A <tr>. It promotes the row to its own layer, breaks the
     table's border collapsing, and on a table row the 1px lift visibly shifts the text
     baseline — that is the "jumping". Removed outright. */
  html.pc-on .inv-table tbody tr { transform: none !important; }

  /* ⚠ 2. NEVER `box-shadow` A <tr> ON HOVER. A shadow on a table row cannot be composited
     — it repaints the row and its neighbours on every pointer move. */
  html.pc-on .inv-table tbody tr:hover,
  html.pc-on .inv-table tbody tr:has(.inv-trk--late):hover,
  html.pc-on .inv-table tbody tr:has(.inv-trk--due):hover,
  html.pc-on .inv-table tbody tr:has(.inv-trk--paid):hover { box-shadow: none; }

  /* ⚠ 3. `:has()` IN A HOVER SELECTOR IS RE-EVALUATED CONTINUOUSLY. Three of them across
     every row was a standing cost on an interaction that must never drop a frame. The
     status tint on hover is dropped entirely — the row already shows its status in the
     Status column, and a hover shadow was never worth a continuously-evaluated selector. */

  /* ⚠ 4. `filter: drop-shadow()` ON EVERY ROW WAS THE BIGGEST SINGLE COST. It was
     always-on (not just hover) for late/due/paid tracks, so an 11-row table held 11
     permanent filter layers, repainting on every scroll frame. The glow is replaced by
     a flat tone — visually near-identical at 4px tall, free to render. */
  html.pc-on .inv-table .inv-trk--late .inv-trk__bar,
  html.pc-on .inv-table .inv-trk--due  .inv-trk__bar,
  html.pc-on .inv-table .inv-trk--paid .inv-trk__bar { filter: none; }

  /* ⚠ 5. MY OWN v3.34.0 MISTAKE: a `backdrop-filter: blur(12px)` on the STICKY table
     header. A blurred sticky element re-samples everything behind it on every scroll
     frame — the single worst thing to put on a scroll surface. Opaque background now. */
  html.pc-on .inv-table thead th {
    background: #F7F8FB;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html[data-theme="dark"].pc-on .inv-table thead th { background: #14171F; }

  /* Only the row background transitions, and only colour. */
  html.pc-on .inv-table tbody tr {
    transition: background-color .13s linear;
    will-change: auto;
  }
  html.pc-on .inv-table tbody td { transition: none; }

  /* ================================================================= HOVER, REBUILT */

  /* One wash for the whole row, plus a left rail carrying the status tone. The rail is a
     border on the first cell — no pseudo-element, no layout, no repaint beyond the cell. */
  html.pc-on .inv-table tbody tr td:first-child {
    border-left: 3px solid transparent;
    padding-left: 13px !important;
  }
  /* Indigo, deliberately — NOT the status tone. `--trk-tone` is set on `.inv-trk` inside
     the Status cell, so it does not cascade to the row's first cell; reading it here
     would silently resolve to the fallback on every row and only look intentional. The
     rail means "you are here", which is navigation, so indigo is the right colour anyway. */
  html.pc-on .inv-row:hover > td:first-child { border-left-color: var(--pc-indigo); }
  html.pc-on .inv-row.is-sel > td:first-child { border-left-color: var(--pc-indigo); }
  html.pc-on .inv-row.is-sel > td:first-child::before { display: none; }

  html.pc-on .inv-row:hover { background-color: rgba(75, 99, 255, .05) !important; }
  html.pc-on .inv-row.is-sel { background-color: rgba(75, 99, 255, .095) !important; }
  html.pc-on .inv-row.is-sel:hover { background-color: rgba(75, 99, 255, .13) !important; }

  /* ⚠ 6. THE NUMBER CELL HAD ITS OWN HOVER BACKGROUND (~747), so moving across a row
     lit a second, differently-tinted rectangle inside it. That is the "some parts change
     colour". The whole row is the hover target now; the cell has none of its own. */
  html.pc-on .inv-table td.inv-numcell,
  html.pc-on .inv-table td.inv-numcell:hover,
  html.pc-on .inv-table tbody tr.is-sel td.inv-numcell { background: transparent; border-radius: 0; }

  /* rounded row caps fought the full-width wash; square them */
  html.pc-on .inv-table tbody tr td:first-child,
  html.pc-on .inv-table tbody tr td:last-child { border-radius: 0; }

  /* ================================================================= ACTIONS */

  /* ⚠ 7. THE ACTIONS WERE CLIPPED because seven 32px buttons inside a padded pill make a
     ~250px column, and with nine other columns the table simply outgrew the card. The
     pill wrapper is gone: flat 28px icons, no chrome of their own, sitting quiet at 45%
     and coming up on row hover. Saves ~70px and removes a hover target that used to
     animate its own border and shadow. */
  html.pc-on .row-actgrp {
    display: inline-flex; align-items: center; gap: 2px;
    background: transparent !important; border: 0 !important; padding: 0 !important;
    box-shadow: none !important; opacity: .45; transition: opacity .13s linear;
  }
  html.pc-on .inv-row:hover .row-actgrp { opacity: 1; box-shadow: none !important; }
  html.pc-on .row-actgrp .row-act {
    width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent;
    color: var(--pc-ink-2); font-size: 13.5px; box-shadow: none !important;
    transition: background-color .12s linear, color .12s linear;
  }
  html.pc-on .row-actgrp .row-act:hover:not(:disabled) {
    background: rgba(75, 99, 255, .13) !important; color: var(--pc-indigo); box-shadow: none !important;
  }
  html.pc-on .row-actgrp .row-act--green:hover:not(:disabled) { background: rgba(14, 122, 82, .14) !important; color: var(--pc-green); }
  html.pc-on .row-actgrp .row-act--wa:hover:not(:disabled)    { background: rgba(37, 211, 102, .14) !important; color: #1DA850; }
  html.pc-on .row-actgrp .row-act--red:hover:not(:disabled)   { background: rgba(197, 39, 30, .13) !important; color: var(--pc-coral); }
  html.pc-on .row-actgrp .row-act:disabled { opacity: .3; }
  html.pc-on .row-actgrp__sep { width: 1px; height: 15px; background: var(--pc-hair-2); margin: 0 3px; }
  html.pc-on .inv-table td.row-acts { padding-right: 14px !important; }

  /* ⚠ 8. AND LET IT SCROLL. `.pcx .ios-card { overflow: hidden }` from v3.34.0 clipped
     the overflow instead of letting #inv-list scroll it, so the Actions column was cut
     off with no way to reach it. The card clips its CORNERS via the radius on the inner
     scroller instead. */
  html.pc-on .pcx .ios-card { overflow: visible; }
  html.pc-on #inv-list {
    overflow-x: auto; overflow-y: visible;
    border-bottom-left-radius: var(--pc-r); border-bottom-right-radius: var(--pc-r);
    scrollbar-width: thin;
  }
  html.pc-on #inv-list::-webkit-scrollbar { height: 9px; }
  html.pc-on #inv-list::-webkit-scrollbar-thumb { background: var(--pc-hair-2); border-radius: 5px; }
  html.pc-on #inv-list::-webkit-scrollbar-track { background: transparent; }
  html.pc-on .inv-table { min-width: 1040px; }

  /* ================================================================= DATE FIELD */

  /* ⚠ 9. `.dr-wrap` carries `flex: 1` from the stylesheet daterange.js injects at
     runtime. v3.34.0 restyled it without resetting that, so the field stretched to fill
     the whole row the moment it took focus — the "clipping / old layer" artefact. */
  html.pc-on .dr-wrap { flex: 0 0 auto !important; max-width: none !important; min-width: 0 !important; }
  html.pc-on .dr-wrap > .bi { position: static !important; transform: none !important; }
  html.pc-on .dr-wrap input { width: 150px; padding: 0 !important; }

  /* the popover is body-mounted and fixed, but wears the OLD token set — bring it into
     the PC language so it stops looking like a different application */
  html.pc-on .dr-pop {
    border-radius: 16px; overflow: hidden; padding: 0;
    background: linear-gradient(180deg, rgba(252, 253, 255, .98), rgba(246, 248, 253, .96));
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 30px 70px -28px rgba(20, 28, 66, .5), inset 0 1px 0 rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
  }
  html[data-theme="dark"].pc-on .dr-pop {
    background: linear-gradient(180deg, rgba(31, 34, 46, .985), rgba(21, 24, 34, .97));
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 34px 76px -28px rgba(0, 0, 0, .82), inset 0 1px 0 rgba(255, 255, 255, .1);
  }
  html.pc-on .dr-d { border-radius: 8px; font: 500 12.4px/1 var(--font), Inter, sans-serif; }
  html.pc-on .dr-d:hover::before { background: rgba(75, 99, 255, .12) !important; }

  @media (prefers-reduced-motion: reduce) {
    html.pc-on .inv-table tbody tr, html.pc-on .row-actgrp, html.pc-on .row-act { transition: none; }
  }
}


/* =====================================================================================
 *  v3.36.0 — HaaltdSelect: the app's own dropdown (shared, desktop only)
 *  Behaviour and rationale live in js/ui/select.js. All rules inside min-width:768px.
 * ================================================================================== */
@media (min-width: 768px) {

  /* The <select> must stay focusable-adjacent and in the DOM, but never visible. NOT
     display:none — some browsers skip form participation for display:none controls, and
     the views read .value off it. Clipped to zero instead. */
  html.pc-on select.hsel__native {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0 !important;
  }

  /* ---- the face ---- */
  html.pc-on .hsel__btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 30px; padding: 0 9px; border-radius: 8px;
    border: 1px solid transparent; background: transparent; cursor: pointer;
    font: 545 12.2px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
    white-space: nowrap; max-width: 210px;
    transition: background-color .14s linear, color .14s linear, border-color .14s linear;
  }
  html.pc-on .hsel__val { overflow: hidden; text-overflow: ellipsis; }
  html.pc-on .hsel__ico { font-size: 12.5px; color: var(--pc-ink-3); }
  html.pc-on .hsel__caret {
    font-size: 10.5px; color: var(--pc-ink-3); margin-left: 1px;
    transition: transform .2s var(--pc-ease);
  }
  html.pc-on .hsel__btn:hover { background-color: rgba(75, 99, 255, .08); color: var(--pc-ink); }
  html.pc-on .hsel__btn.is-open { background-color: rgba(75, 99, 255, .12); color: var(--pc-indigo); }
  html.pc-on .hsel__btn.is-open .hsel__caret { transform: rotate(180deg); color: var(--pc-indigo); }
  html.pc-on .hsel__btn.is-set {
    background-color: rgba(75, 99, 255, .12); border-color: rgba(75, 99, 255, .34);
    color: var(--pc-indigo); font-weight: 620;
  }
  html[data-theme="dark"].pc-on .hsel__btn.is-open,
  html[data-theme="dark"].pc-on .hsel__btn.is-set { color: #A6B2FF; }
  html[data-theme="dark"].pc-on .hsel__btn.is-open .hsel__caret { color: #A6B2FF; }
  html.pc-on .hsel__btn:focus-visible { outline: none; box-shadow: 0 0 0 3.5px rgba(75, 99, 255, .3); }

  /* ---- the panel (portaled to <body>) ---- */
  html.pc-on .hsel__panel {
    position: fixed; z-index: 1400; min-width: 168px; max-height: 320px; overflow-y: auto;
    padding: 6px; border-radius: 14px;
    background: linear-gradient(180deg, rgba(252, 253, 255, .98), rgba(246, 248, 253, .96));
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 26px 60px -26px rgba(20, 28, 66, .5), 0 2px 8px -3px rgba(20, 28, 66, .13), inset 0 1px 0 rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
    transform-origin: top left;
    animation: hselIn .17s var(--pc-ease-out) both;
    scrollbar-width: thin;
  }
  html.pc-on .hsel__panel.is-flipped { transform-origin: bottom left; }
  html[data-theme="dark"].pc-on .hsel__panel {
    background: linear-gradient(180deg, rgba(31, 34, 46, .985), rgba(21, 24, 34, .97));
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 30px 66px -26px rgba(0, 0, 0, .82), inset 0 1px 0 rgba(255, 255, 255, .1);
  }
  @keyframes hselIn { from { opacity: 0; transform: translateY(-5px) scale(.975); } to { opacity: 1; transform: none; } }
  html.pc-on .hsel__panel.is-out { animation: hselOut .12s linear both; }
  @keyframes hselOut { to { opacity: 0; transform: translateY(-3px); } }
  html.pc-on .hsel__panel::-webkit-scrollbar { width: 9px; }
  html.pc-on .hsel__panel::-webkit-scrollbar-thumb { background: var(--pc-hair-2); border-radius: 5px; }

  html.pc-on .hsel__opt {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 8px 10px; border: 0; background: transparent; border-radius: 9px; cursor: pointer;
    font: 520 12.8px/1.25 var(--font), Inter, sans-serif; color: var(--pc-ink); text-align: left;
  }
  html.pc-on .hsel__optl { flex: 1; min-width: 0; }
  html.pc-on .hsel__tick { font-size: 13px; opacity: 0; color: var(--pc-indigo); }
  html[data-theme="dark"].pc-on .hsel__tick { color: #A6B2FF; }
  html.pc-on .hsel__opt.is-on { font-weight: 620; }
  html.pc-on .hsel__opt.is-on .hsel__tick { opacity: 1; }
  /* Highlight follows the KEYBOARD cursor, and mousemove moves that cursor — so pointer
     and keyboard can never disagree about which row is active. */
  html.pc-on .hsel__opt.is-active { background: rgba(75, 99, 255, .12); color: var(--pc-indigo); }
  html[data-theme="dark"].pc-on .hsel__opt.is-active { color: #A6B2FF; }

  @media (prefers-reduced-motion: reduce) {
    html.pc-on .hsel__panel, html.pc-on .hsel__panel.is-out { animation: none; }
    html.pc-on .hsel__caret, html.pc-on .hsel__btn { transition: none; }
  }
}


/* =====================================================================================
 *  v3.37.0 — DESKTOP INVOICE VIEW CARD  (Item 3, part 2)
 *  Desktop had NO viewer: #/invoices/view/:id bounced to the editor. Rationale and the
 *  "no Duplicate action" rule live in renderViewerDesktop() in js/views/invoices.js.
 * ================================================================================== */
@media (min-width: 768px) {

  /* ---- two columns: the document, and a rail of everything about it ---- */
  html.pc-on .ivd { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 16px; align-items: start; }
  @media (max-width: 1240px) { html.pc-on .ivd { grid-template-columns: minmax(0, 1fr); } }

  /* ============================================================ THE PAPER
     The invoice itself, presented as a sheet. Deliberately the ONLY opaque white surface
     on the screen — everything else is glass — so it reads as the document and the rest
     reads as chrome around it. */
  html.pc-on .ivp {
    background: #FFFFFF; border-radius: var(--pc-r); border: 1px solid var(--pc-hair);
    box-shadow: 0 24px 54px -34px rgba(26, 36, 90, .4), 0 2px 6px -3px rgba(26, 36, 90, .07);
    overflow: hidden; color: #1A2035;
  }
  /* The sheet stays light in dark mode — a paper document that inverts stops being paper,
     and this is the surface that gets printed and PDF'd. Text tones are fixed locally so
     they never inherit a dark --pc-ink. */
  html[data-theme="dark"].pc-on .ivp {
    background: #F7F8FC; border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 26px 60px -34px rgba(0, 0, 0, .7);
  }

  html.pc-on .ivp__top {
    display: flex; align-items: flex-start; gap: 24px; padding: 30px 34px 24px;
    border-bottom: 1px solid rgba(18, 26, 58, .08);
  }
  html.pc-on .ivp__brand { display: flex; align-items: center; gap: 11px; }
  html.pc-on .ivp__logo {
    width: 40px; height: 40px; border-radius: 12px; background: var(--pc-grad); color: #FFF;
    display: grid; place-items: center; font: 700 17px/1 var(--font-display), Inter, sans-serif;
    box-shadow: 0 7px 16px -8px rgba(61, 79, 224, .8);
  }
  html.pc-on .ivp__co { display: block; font: 680 15px/1.2 var(--font-display), Inter, sans-serif; letter-spacing: -.02em; color: #101627; }
  html.pc-on .ivp__cosub { display: block; margin-top: 3px; font: 450 11.8px/1.3 var(--font), Inter, sans-serif; color: #6B7492; }
  html.pc-on .ivp__id { margin-left: auto; text-align: right; }
  html.pc-on .ivp__kind { font: 650 10.2px/1 var(--font), Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8A92AC; }
  html.pc-on .ivp__no {
    margin-top: 7px; font-family: var(--font-ledger), monospace; font-size: 19px; font-weight: 600;
    letter-spacing: -.02em; color: #101627;
  }

  html.pc-on .ivp__parties { display: grid; grid-template-columns: 1fr 1fr auto; gap: 26px; padding: 22px 34px; }
  html.pc-on .ivp__plabel { font: 650 10px/1 var(--font), Inter, sans-serif; letter-spacing: .11em; text-transform: uppercase; color: #8A92AC; }
  html.pc-on .ivp__pname { margin-top: 9px; font: 640 14px/1.3 var(--font), Inter, sans-serif; color: #101627; }
  html.pc-on .ivp__paddr { margin-top: 5px; font: 450 12.4px/1.6 var(--font), Inter, sans-serif; color: #5C6480; white-space: pre-line; }
  html.pc-on .ivp__dates { text-align: right; display: flex; flex-direction: column; gap: 13px; }
  html.pc-on .ivp__dk { font: 600 10px/1 var(--font), Inter, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: #8A92AC; }
  html.pc-on .ivp__dv { margin-top: 5px; font: 550 12.8px/1 var(--font-ledger), monospace; color: #101627; white-space: nowrap; }
  html.pc-on .ivp__dv--late { color: #C5271E; }

  /* ---- line items ---- */
  html.pc-on .ivp__tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
  html.pc-on .ivp__tbl th {
    font: 650 9.8px/1 var(--font), Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase;
    color: #8A92AC; padding: 11px 12px; border-top: 1px solid rgba(18, 26, 58, .08);
    border-bottom: 1px solid rgba(18, 26, 58, .08); background: rgba(18, 26, 58, .022); text-align: left;
  }
  html.pc-on .ivp__tbl th:first-child { padding-left: 34px; }
  html.pc-on .ivp__tbl th:last-child, html.pc-on .ivp__tbl td:last-child { text-align: right; padding-right: 34px; }
  html.pc-on .ivp__tbl th.num, html.pc-on .ivp__tbl td.num { text-align: right; }
  html.pc-on .ivp__tbl td {
    padding: 13px 12px; border-bottom: 1px solid rgba(18, 26, 58, .05);
    font: 450 12.9px/1.45 var(--font), Inter, sans-serif; color: #26304C; vertical-align: top;
  }
  html.pc-on .ivp__tbl td:first-child { padding-left: 34px; }
  html.pc-on .ivp__tbl td.num { font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums; color: #101627; }
  html.pc-on .ivp__li { display: flex; align-items: flex-start; gap: 10px; }
  html.pc-on .ivp__lic {
    width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; display: grid; place-items: center;
    background: rgba(75, 99, 255, .1); color: #4B63FF; font-size: 12.5px;
  }
  html.pc-on .ivp__lid { display: block; font-weight: 550; color: #101627; }
  html.pc-on .ivp__lim { display: block; margin-top: 3px; font-size: 11.8px; color: #79819C; }

  /* ---- totals ---- */
  html.pc-on .ivp__sum { display: flex; justify-content: flex-end; padding: 20px 34px 26px; }
  html.pc-on .ivp__sumbox { width: 296px; }
  html.pc-on .ivp__srow {
    display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0;
    font: 450 12.8px/1 var(--font), Inter, sans-serif; color: #5C6480;
  }
  html.pc-on .ivp__srow b { font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums; font-weight: 550; color: #101627; }
  html.pc-on .ivp__srow--paid b { color: #0E7A52; }
  html.pc-on .ivp__stotal {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: 9px; padding-top: 13px; border-top: 1.5px solid rgba(18, 26, 58, .12);
  }
  html.pc-on .ivp__stotal span { font: 640 12.4px/1 var(--font), Inter, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #5C6480; }
  html.pc-on .ivp__stotal b {
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 24px; font-weight: 650; letter-spacing: -.035em;
    background: linear-gradient(135deg, var(--pc-gold-a), var(--pc-gold-b));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  html.pc-on .ivp__due {
    display: flex; justify-content: space-between; align-items: baseline; margin-top: 11px;
    padding: 11px 13px; border-radius: 11px; background: rgba(75, 99, 255, .085);
    font: 600 12.4px/1 var(--font), Inter, sans-serif; color: #3D4FE0;
  }
  html.pc-on .ivp__due b { font-family: var(--font-ledger), monospace; font-size: 15px; font-weight: 650; }
  html.pc-on .ivp__due--settled { background: rgba(14, 122, 82, .1); color: #0E7A52; }
  html.pc-on .ivp__note {
    margin: 0 34px 26px; padding: 15px 17px; border-radius: 12px; background: rgba(18, 26, 58, .035);
    font: 450 12.3px/1.6 var(--font), Inter, sans-serif; color: #5C6480; white-space: pre-line;
  }
  html.pc-on .ivp__note b { display: block; margin-bottom: 5px; font: 640 10.4px/1 var(--font), Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #8A92AC; }

  /* ============================================================ THE RAIL */
  html.pc-on .ivr { display: flex; flex-direction: column; gap: 13px; position: sticky; top: 22px; }
  html.pc-on .ivr__c {
    border-radius: var(--pc-r); padding: 17px 18px;
    background: var(--pc-card); border: 1px solid var(--pc-hair); box-shadow: var(--pc-lift);
    -webkit-backdrop-filter: blur(20px) saturate(175%); backdrop-filter: blur(20px) saturate(175%);
  }
  html.pc-on .ivr__t {
    font: 650 10.4px/1 var(--font), Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase;
    color: var(--pc-ink-3); margin-bottom: 13px;
  }

  /* status hero */
  html.pc-on .ivr__hero { position: relative; overflow: hidden; }
  html.pc-on .ivr__glow {
    position: absolute; inset: -50% -20% auto -20%; height: 150%; pointer-events: none;
    background: radial-gradient(circle at 50% 0%, var(--tone-soft, rgba(75, 99, 255, .22)), transparent 68%);
  }
  /* ⚠ THE display:block TRAP, AGAIN. Stacked <span>s inside a flex/grid cell are inline
     by default and run together on one line — "OverdueÂ22 days late", "H & AA LtdUnit 4".
     This has now bitten three separate components. Any two-line label pair needs block. */
  html.pc-on .ivr__st { position: relative; display: flex; align-items: center; gap: 10px; }
  html.pc-on .ivr__st > span:last-child,
  html.pc-on .ivp__brand > span:last-child,
  html.pc-on .ivr__cust > span:last-child,
  html.pc-on .ivp__li > span:last-child { display: block; min-width: 0; }
  html.pc-on .ivr__sti {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; display: grid; place-items: center;
    background: var(--tone-soft, rgba(75, 99, 255, .14)); color: var(--tone, var(--pc-indigo)); font-size: 15px;
  }
  html.pc-on .ivr__stl { display: block; font: 680 14.5px/1.15 var(--font-display), Inter, sans-serif; letter-spacing: -.018em; color: var(--pc-ink); }
  html.pc-on .ivr__sts { display: block; margin-top: 4px; font: 450 11.8px/1.3 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }
  html.pc-on .ivr__amt {
    position: relative; margin-top: 15px;
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 29px; font-weight: 620; letter-spacing: -.04em; line-height: 1;
    background: linear-gradient(135deg, var(--pc-gold-a), var(--pc-gold-b));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  html.pc-on .ivr__amtl { position: relative; margin-top: 6px; font: 500 11.4px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }
  html.pc-on .ivr__bar { position: relative; margin-top: 14px; height: 5px; border-radius: 3px; background: rgba(20, 28, 60, .09); overflow: hidden; }
  html[data-theme="dark"].pc-on .ivr__bar { background: rgba(255, 255, 255, .09); }
  html.pc-on .ivr__barf {
    height: 100%; border-radius: 3px; background: linear-gradient(90deg, #2BB981, #0E7A52);
    transform-origin: left; transform: scaleX(0); animation: pcBarIn .9s var(--pc-ease-out) .15s forwards;
  }
  @keyframes pcBarIn { to { transform: scaleX(1); } }
  html.pc-on .ivr__barl { position: relative; display: flex; justify-content: space-between; margin-top: 8px; font: 500 11.3px/1 var(--font-ledger), monospace; color: var(--pc-ink-3); }

  /* actions */
  html.pc-on .ivr__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  html.pc-on .ivr__acts .btn-ios-primary, html.pc-on .ivr__acts .btn-ios-secondary { width: 100%; }
  html.pc-on .ivr__acts .is-wide { grid-column: 1 / -1; }

  /* customer */
  html.pc-on .ivr__cust { display: flex; align-items: center; gap: 11px; }
  html.pc-on .ivr__av {
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; display: grid; place-items: center;
    background: var(--pc-grad); color: #FFF; font: 670 14px/1 var(--font), Inter, sans-serif;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
  }
  html.pc-on .ivr__cn { display: block; font: 620 13.4px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink); }
  html.pc-on .ivr__ce { display: block; margin-top: 3px; font: 450 11.6px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }
  html.pc-on .ivr__clinks { display: flex; gap: 6px; margin-top: 13px; }
  html.pc-on .ivr__cl {
    flex: 1; height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: 9px; border: 1px solid var(--pc-hair-2); background: var(--pc-card-solid);
    color: var(--pc-ink-2); text-decoration: none; font: 560 11.8px/1 var(--font), Inter, sans-serif;
    transition: transform .14s var(--pc-ease), color .16s, border-color .16s;
  }
  html.pc-on .ivr__cl:hover { transform: translateY(-1px); color: var(--pc-indigo); border-color: rgba(75, 99, 255, .42); }

  /* timeline */
  html.pc-on .ivr__tl { display: flex; flex-direction: column; }
  html.pc-on .ivr__ev { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: flex-start; padding: 7px 0; position: relative; }
  html.pc-on .ivr__evl { position: absolute; left: 11.5px; top: 26px; bottom: -7px; width: 1px; background: var(--pc-hair); }
  html.pc-on .ivr__ev:last-child .ivr__evl { display: none; }
  html.pc-on .ivr__evi {
    width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 11px;
    background: var(--tone-soft, rgba(75, 99, 255, .13)); color: var(--tone, var(--pc-indigo)); position: relative; z-index: 1;
  }
  html.pc-on .ivr__evt { font: 530 12.3px/1.35 var(--font), Inter, sans-serif; color: var(--pc-ink); }
  html.pc-on .ivr__evw { font: 500 10.8px/1 var(--font-ledger), monospace; color: var(--pc-ink-3); white-space: nowrap; padding-top: 2px; }

  @media (prefers-reduced-motion: reduce) {
    html.pc-on .ivr__barf { animation: none; transform: scaleX(1); }
    html.pc-on .ivr__cl, html.pc-on .ivr__acts .btn-ios-primary { transition: none; }
  }
}


/* =====================================================================================
 *  v3.38.0 — NO ROW HOVER, SELECTION REBUILT, NO H-SCROLLBAR, NO KEY-HINT SYMBOLS
 * ================================================================================== */
@media (min-width: 768px) {

  /* ================================================================= 1. NO ROW HOVER
     Every hover treatment on the list is removed — no wash, no rail, no lift, no shadow.
     A dense table of figures does not need the pointer to repaint a 1400px-wide band to
     tell you where it is; the cursor already does that, for free, on the GPU. What
     replaces it is a CURSOR SHAPE and nothing else.

     ⚠ These carry !important because they must beat both the v3.34.0/v3.35.0 rules above
     AND `.inv-row.is-sel{...!important}` at style.css ~1767. */
  html.pc-on .inv-row,
  html.pc-on .inv-row:hover,
  html.pc-on .inv-table tbody tr:hover {
    background-color: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
  }
  html.pc-on .inv-row > td:first-child,
  html.pc-on .inv-row:hover > td:first-child { border-left-color: transparent !important; }
  html.pc-on .inv-table td.inv-numcell,
  html.pc-on .inv-table td.inv-numcell:hover { background-color: transparent !important; }
  html.pc-on .inv-row { cursor: pointer; }

  /* Actions stop hiding behind hover too — they were only faint because hover revealed
     them, and with no hover there is nothing to reveal them with. */
  html.pc-on .row-actgrp { opacity: 1 !important; transition: none !important; }
  html.pc-on .row-actgrp .row-act { color: var(--pc-ink-3); }
  /* The ONE interaction that stays: the button under the pointer. It is a 28px box, not
     a full-width row, so it costs nothing to paint. */
  html.pc-on .row-actgrp .row-act:hover:not(:disabled) { color: var(--pc-indigo); }

  /* Keyboard focus must still be visible — removing hover must not remove a11y. */
  html.pc-on .inv-row:focus-visible {
    outline: 2px solid var(--pc-indigo); outline-offset: -2px;
  }

  /* ================================================================= 2. SELECTION
     Rebuilt from the root. No background wash on the row — that was the awkward part.
     A selected row is marked by two things only, both of them local to one cell:
       · the tick itself, filled indigo
       · a 3px indigo rail down the leading edge
     Nothing else on the row changes, so selecting is instant regardless of table width. */
  html.pc-on .inv-row.is-sel,
  html.pc-on .inv-row.is-sel:hover {
    background-color: transparent !important; background-color: transparent !important;
  }
  html.pc-on .inv-row.is-sel > td:first-child { border-left-color: var(--pc-indigo) !important; }
  html.pc-on .inv-table tbody tr.is-sel td.inv-numcell { background-color: transparent !important; }
  /* the number goes indigo and semibold — a text-colour change, one cell, no repaint band */
  html.pc-on .inv-row.is-sel .inv-numcell strong { color: var(--pc-indigo); font-weight: 700; }
  html[data-theme="dark"].pc-on .inv-row.is-sel .inv-numcell strong { color: #A6B2FF; }

  /* the tick box: always present now (no hover to reveal it), quiet until checked */
  html.pc-on .inv-table tbody .ck { opacity: 1 !important; }
  html.pc-on .ck span {
    width: 16px; height: 16px; border-radius: 5px;
    border: 1.6px solid var(--pc-hair-2); background: transparent;
    transition: background-color .1s linear, border-color .1s linear;
  }
  html.pc-on .ck input:checked + span {
    background: var(--pc-grad); border-color: transparent;
  }
  html.pc-on .ck:hover span { border-color: rgba(75, 99, 255, .55); }

  /* ================================================================= 3. NO H-SCROLL
     ⚠ THE "SWIPE LINE" WAS MINE. v3.35.0 set `.inv-table { min-width: 1040px }` plus
     `overflow-x: auto`, which guarantees a horizontal scrollbar on any window narrower
     than that — a bar across the bottom of the table on every screen. The table is made
     to FIT instead: no min-width, no overflow, fixed layout, and the columns that can
     shrink do. */
  html.pc-on .inv-table { min-width: 0; table-layout: auto; }
  html.pc-on #inv-list { overflow-x: hidden; overflow-y: visible; }
  html.pc-on #inv-list::-webkit-scrollbar { display: none; }
  /* give the flexible columns somewhere to give: customer wraps, dates and money never */
  html.pc-on .inv-table tbody td:nth-child(3) { min-width: 0; }
  html.pc-on .inv-table thead th:nth-child(5), html.pc-on .inv-table thead th:nth-child(6),
  html.pc-on .inv-table tbody td:nth-child(5), html.pc-on .inv-table tbody td:nth-child(6) {
    white-space: nowrap; width: 1%;
  }
  html.pc-on .inv-table thead th:last-child, html.pc-on .inv-table td.row-acts { width: 1%; }
  html.pc-on .inv-table tbody td, html.pc-on .inv-table thead th { padding-left: 11px; padding-right: 11px; }
  html.pc-on .inv-table tbody td:first-child, html.pc-on .inv-table thead th:first-child { padding-left: 13px !important; }

  /* ⚠ REMOVING THE SCROLLBAR IS NOT ENOUGH — THE TABLE HAS TO FIT.
     At 1512px it does (1138px of content in 1138px). At 1280px it still wanted 1040px
     in 938px, so hiding the bar alone would just have CLIPPED the Actions column, which
     is the bug from v3.34.0 all over again. Below 1400px the Issued column is dropped:
     Due is the date that drives the work, Issued is on the card. That frees ~110px and
     the table fits with room to spare. */
  @media (max-width: 1399.98px) {
    html.pc-on .inv-table thead th:nth-child(5),
    html.pc-on .inv-table tbody td:nth-child(5) { display: none; }
  }
  /* Narrower still: drop the separate Total column and keep Outstanding, which is the
     number being chased. Both remain on the invoice card. */
  @media (max-width: 1179.98px) {
    html.pc-on .inv-table thead th:nth-child(7),
    html.pc-on .inv-table tbody td:nth-child(7) { display: none; }
    /* and shed two of the seven row actions — preview and download are both one click
       away on the invoice card, and losing them here beats a scrollbar */
    html.pc-on .row-actgrp .inv-pdf, html.pc-on .row-actgrp .inv-dl { display: none; }
  }

  /* ================================================================= 4. NO KEY HINTS
     ⚠ GLOBAL. `.topbar__search::after` (style.css ~3316) renders a "/" chip inside every
     search field. It is a browser-app convention and reads as a stray symbol in a desktop
     app. Removed everywhere, not just on this screen. The shortcut still WORKS — only the
     badge is gone. Same for the ⌘ hints in the account panel. */
  html.pc-on .topbar__search::after { display: none !important; content: none !important; }
  html.pc-on .topbar__search-input { padding-right: 14px !important; }
  html.pc-on .pcum__k { display: none !important; }

  @media (prefers-reduced-motion: reduce) {
    html.pc-on .ck span { transition: none; }
  }
}

/* =====================================================================================
 *  v3.38.2 — THE LAST TWO HOVER ARTEFACTS ON DESKTOP TABLES  (owner-reported, measured)
 *  ------------------------------------------------------------------------------------
 *  v3.38.0 removed the hover treatments I knew about, but two survived because they are
 *  not on the ROW — which is all my earlier selectors targeted. Both were found by
 *  measuring the live DOM before and after a pointer move, not by reading CSS:
 *
 *  1. THE CREAM HIGHLIGHT — `.data-table tbody tr:hover td` (~2575) sets a background on
 *     the CELL. Row-level `background: transparent` never reached it, which is exactly
 *     why only SOME cells lit up: the ones that had no background of their own. Measured:
 *     cells went transparent -> rgb(246,246,242) on hover while the row stayed transparent.
 *
 *  2. THE 1px JUMP — `.data-table tbody tr` is `position: relative` (~2373) carrying an
 *     absolutely-positioned `::after` rail that animates `transform: scaleY(0 -> 1)` on
 *     hover (~2379). A transform on a pseudo-element of a TABLE ROW promotes the row and
 *     shifts the table. Measured: table top moved 320.58 -> 319.58 on hover, with row
 *     heights and table height unchanged — a pure, pointless 1px nudge of the whole table.
 *
 *  Scoped to `.data-table` so every desktop table (invoices, customers, documents) is
 *  covered — the owner asked for the jump gone GLOBALLY, not just on invoices.
 * ================================================================================== */
@media (min-width: 768px) {
  html.pc-on .data-table tbody tr,
  html.pc-on .data-table tbody tr:hover { background-color: transparent !important; }
  html.pc-on .data-table tbody tr:hover > td,
  html.pc-on .data-table tbody tr:hover > th { background-color: transparent !important; }

  /* the animated accent rail: gone, along with the containing block that let it shift
     the table. `position: static` is safe here — nothing in the desktop skin positions
     against the ROW; the selection rail is a border on the first CELL. */
  html.pc-on .data-table tbody tr { position: static !important; }
  html.pc-on .data-table tbody tr::after { content: none !important; display: none !important; }

  /* and nothing on a desktop table row transitions or transforms, ever */
  html.pc-on .data-table tbody tr { transition: none !important; transform: none !important; }
}

/* =====================================================================================
 *  v3.38.3 — THE 1px JUMP: IT WAS THE CARD, NOT THE ROW.
 *  ------------------------------------------------------------------------------------
 *  `.ios-card:hover, .kpi-card:hover, .chart-card:hover` (~2364) lifts the whole panel by
 *  translateY(-1px). On a card that CONTAINS a 16-row table, that means the entire table
 *  hops a pixel the moment the cursor crosses anywhere over the card — which is exactly
 *  what the owner kept seeing and what I twice mis-attributed to the ROW. Measured:
 *  card transform `none -> matrix(1,0,0,1,0,-1)` on hover, table height unchanged.
 *
 *  A lift is a fine affordance on a small, clickable card. It is wrong on a large static
 *  container you are merely pointing INTO. Killed on desktop for containers; the KPI and
 *  chart cards on the dashboard keep their own v3.32.0 hover, which is defined later and
 *  is scoped to those elements.
 * ================================================================================== */
@media (min-width: 768px) {
  html.pc-on .pcx .ios-card:hover,
  html.pc-on .ivp:hover,
  html.pc-on .inv-tabs:hover { transform: none !important; box-shadow: var(--pc-lift) !important; }
  html.pc-on .pcx .ios-card { transition: none !important; }
}


/* =====================================================================================
 *  v3.38.3 — THE GOLD FIGURES VANISHED ON HOVER. MY BUG, AND THE SAME ONE AS TWICE BEFORE.
 *  ------------------------------------------------------------------------------------
 *  Total and Outstanding are gradient text: `background: linear-gradient(...)` +
 *  `background-clip: text` + `-webkit-text-fill-color: transparent`. The v3.38.2 hover
 *  reset used the `background` SHORTHAND to clear cell tints — which also clears
 *  background-image AND background-clip. Result: transparent text clipped from nothing,
 *  i.e. invisible. Measured: on hover `background-image: gradient -> NONE`,
 *  `background-clip: text -> border-box`.
 *
 *  ⚠ THIS IS THE THIRD TIME THE `background` SHORTHAND HAS CAUSED A BUG IN THIS PROJECT
 *  (v3.34.0 select caret, v3.36.0 dropdown button, now this). RULE: in any override whose
 *  job is to clear a TINT, write `background-color`. Only use the shorthand when you
 *  genuinely intend to reset image, position, repeat, size and clip as well.
 *
 *  The block below is belt-and-braces: it re-asserts the gradient on the money cells in
 *  every state, so no future hover/selection/zebra rule can erase them again.
 * ================================================================================== */
@media (min-width: 768px) {
  html.pc-on .inv-table td.mono.text-end,
  html.pc-on .inv-table tr:hover td.mono.text-end,
  html.pc-on .inv-table tr.is-sel td.mono.text-end {
    background-image: linear-gradient(135deg, var(--pc-gold-a), var(--pc-gold-b)) !important;
    background-color: transparent !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }
  /* the "—" placeholder in a settled row is NOT money and must stay plain ink */
  html.pc-on .inv-table td.mono.text-end .text-secondary-ios {
    -webkit-text-fill-color: var(--pc-ink-3) !important; color: var(--pc-ink-3) !important;
  }
}


/* =====================================================================================
 *  v3.39.0 — DESKTOP INVOICE EDITOR  ·  "DECK"  (Item 3, part 3)
 *  -------------------------------------------------------------------------------------
 *  SECOND ATTEMPT. The first laid all four steps out as one long scrolling page and the
 *  owner rejected it — "boring every time scrolling down all the way to other steps",
 *  the action bar "awkward", the statuses "so bad".
 *
 *  The deck: stage rail (left, every stage clickable) | ONE step (centre, swapped in
 *  place, no page scroll) | LIVE INVOICE DOCUMENT (right, repaints on every keystroke).
 *
 *  ⚠ EVERY SELECTOR CARRIES html.pc-on AND SITS INSIDE @media (min-width: 768px).
 *  tools/check-pc-scope.js enforces the query; `html.pc-on` is what beats the
 *  runtime-injected .ff__* / .ht-toast* rules (README v3.33.0).
 *
 *  ⚠ `.is-deck` AND `.ive--v3` ARE THE SAME ELEMENT — write `.is-deck.ive--v3`, never
 *  `.is-deck .ive--v3`. The descendant form matched nothing in the first attempt and
 *  ~25 rules were silently dead.
 *
 *  ⚠ `background-color`, NEVER the `background` shorthand, on anything clearing a tint.
 *  Three separate bugs here already (v3.34.0, v3.36.0, v3.38.2).
 * ================================================================================== */
@media (min-width: 768px) {

  /* =================================================================================
   *  1. THE DECK FRAME — a fixed-height three-column workspace, not a document
   * =============================================================================== */
  html.pc-on .ive--v3.is-deck {
    --ink: var(--pc-ink); --ink2: var(--pc-ink-2); --ink3: var(--pc-ink-3); --hair: var(--pc-hair);
    max-width: 1420px; margin: 0 auto;
    padding: 18px var(--pc-gut) 22px;
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 340px;
    /* header, then the working row. Explicit tracks: with columns alone the row grid is
       ONE implicit track and every `grid-row: 2` lands back on the header. */
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 18px;
    align-items: stretch;
    /* the deck fills the viewport under the topbar so the centre pane scrolls, not the
       page — that is what removes the long scroll the owner objected to */
    height: calc(100vh - 57px);
    overflow: hidden;
  }
  html.pc-on.editor-open, html.pc-on.editor-open body,
  html.pc-on.editor-open .app-shell, html.pc-on.editor-open .app-main { background: transparent; }
  /* the page itself must not scroll — the pane does */
  html.pc-on.editor-open .app-main { overflow: hidden; }

  /* =================================================================================
   *  2. HEADER
   * =============================================================================== */
  html.pc-on .is-deck .ive3-top {
    grid-column: 1 / -1; grid-row: 1;
    display: flex; align-items: center; gap: 10px;
    padding: 0 0 14px; margin: 0;
  }
  html.pc-on .is-deck .ive3-topacts { order: -1; flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; }
  html.pc-on .is-deck .ive3-count {
    order: -1; margin-right: auto;
    font: 700 23px/1.1 var(--font-display), Inter, sans-serif;
    letter-spacing: -.028em; color: var(--pc-ink); font-variant-numeric: normal;
  }
  html.pc-on .is-deck .ive3-cancel,
  html.pc-on .is-deck .ive3-ghost {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px;
    border-radius: 9px; cursor: pointer; white-space: nowrap;
    border: 1px solid var(--pc-hair-2); background-color: transparent;
    font: 600 12.6px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
    transition: background-color .18s var(--pc-ease), color .18s var(--pc-ease), border-color .18s var(--pc-ease);
  }
  html.pc-on .is-deck .ive3-cancel:hover,
  html.pc-on .is-deck .ive3-ghost:hover { background-color: var(--pc-card-solid); color: var(--pc-ink); }

  /* =================================================================================
   *  3. STAGE RAIL — the four `#inv-prog` <i>s, now a real navigator
   * =============================================================================== */
  html.pc-on .is-deck .ive__prog.ive3-prog {
    grid-column: 1; grid-row: 2; align-self: start;
    display: flex; flex-direction: column; gap: 3px;
    margin: 0; padding: 0; position: relative;
  }
  /* the connecting spine, behind the markers */
  html.pc-on .is-deck .ive3-prog::before {
    content: ''; position: absolute; left: 25px; top: 26px; bottom: 26px; width: 2px;
    background-color: var(--pc-hair-2); border-radius: 2px;
  }
  html.pc-on .is-deck .ive3-prog i {
    flex: 0 0 auto; height: auto; border-radius: 12px; background: none;
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px; cursor: pointer; position: relative; z-index: 1;
    font-style: normal; text-align: left;
    transition: background-color .18s var(--pc-ease);
  }
  html.pc-on .is-deck .ive-stg__n {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px;
    display: grid; place-items: center;
    font: 650 12px/1 var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    color: var(--pc-ink-3); background-color: var(--pc-card-solid);
    box-shadow: inset 0 0 0 1.5px var(--pc-hair-2);
    transition: color .2s var(--pc-ease), background-color .2s var(--pc-ease), box-shadow .2s var(--pc-ease);
  }
  html.pc-on .is-deck .ive-stg__x { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  html.pc-on .is-deck .ive-stg__k {
    font: 620 13px/1.2 var(--font), Inter, sans-serif; letter-spacing: -.01em; color: var(--pc-ink-2);
    transition: color .2s var(--pc-ease);
  }
  html.pc-on .is-deck .ive-stg__d { font: 450 11.2px/1.3 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }
  html.pc-on .is-deck .ive3-prog i:hover { background-color: rgba(20, 28, 60, .045); }
  html[data-theme="dark"].pc-on .is-deck .ive3-prog i:hover { background-color: rgba(255, 255, 255, .05); }
  /* completed stages: the marker fills, quietly */
  html.pc-on .is-deck .ive3-prog i.on .ive-stg__n {
    color: var(--pc-indigo); background-color: rgba(75, 99, 255, .12);
    box-shadow: inset 0 0 0 1.5px rgba(75, 99, 255, .3);
  }
  /* the stage you are on */
  html.pc-on .is-deck .ive3-prog i.is-here { background-color: rgba(75, 99, 255, .085); }
  html.pc-on .is-deck .ive3-prog i.is-here .ive-stg__k { color: var(--pc-ink); }
  html.pc-on .is-deck .ive3-prog i.is-here .ive-stg__n {
    color: #FFFFFF; background-color: transparent; background-image: var(--pc-grad);
    box-shadow: 0 8px 16px -8px rgba(61, 79, 224, .95), inset 0 0 0 1.5px transparent;
  }
  html.pc-on .is-deck .ive3-prog i:focus-visible { outline: 2px solid var(--pc-indigo); outline-offset: 2px; }

  /* =================================================================================
   *  4. THE PANE — exactly one step, and it is the only thing that scrolls
   * =============================================================================== */
  html.pc-on .is-deck .ive__step {
    grid-column: 2; grid-row: 2;
    min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 20px 22px 96px; margin: 0;
    border-radius: var(--pc-r);
    background-color: transparent; background-image: var(--pc-card);
    border: 1px solid var(--pc-hair); box-shadow: var(--pc-lift);
    animation: ivDeckIn .28s var(--pc-ease-out) both !important;
  }
  html.pc-on .is-deck .ive__step[hidden] { display: none; }
  @keyframes ivDeckIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    html.pc-on .is-deck .ive__step { animation: none !important; }
  }
  html.pc-on .is-deck .ive3-title {
    font: 660 19px/1.25 var(--font-display), Inter, sans-serif;
    letter-spacing: -.022em; color: var(--pc-ink); margin: 0 0 4px;
  }
  html.pc-on .is-deck .ive3-sub { font: 450 13px/1.45 var(--font), Inter, sans-serif; color: var(--pc-ink-3); margin: 0 0 18px; }
  html.pc-on .is-deck .ive3-sec {
    padding: 0 2px 8px; margin: 22px 0 0;
    font: 650 10px/1 var(--font), Inter, sans-serif; letter-spacing: .11em; color: var(--pc-ink-3);
  }
  html.pc-on .is-deck .ive3-sec b { font: 650 10px/1 var(--font), Inter, sans-serif; letter-spacing: .06em; color: var(--pc-ink-3); }

  /* =================================================================================
   *  5. FIELDS — labelled boxed inputs on a grid, the desktop idiom
   *  The phone's grouped card is hairline-separated rows with borderless inputs (iOS).
   *  Its dividers carry !important, so the resets must too.
   * =============================================================================== */
  html.pc-on .is-deck .ive3-grp {
    border-radius: var(--pc-r-sm); margin: 0; overflow: visible; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
    background-color: transparent; background-image: none;
    border: 0; box-shadow: none;
  }
  html.pc-on .is-deck.ive--v3 .hm-field,
  html.pc-on .is-deck .hm-field { padding: 0; margin: 0; display: block; min-width: 0; }
  html.pc-on .is-deck.ive--v3 .hm-field + .hm-field { border-top: 0 !important; }
  html.pc-on .is-deck .hm-label {
    display: block; margin-bottom: 6px;
    font: 600 10.5px/1 var(--font), Inter, sans-serif; letter-spacing: .07em;
    text-transform: uppercase; color: var(--pc-ink-3);
  }
  /* padding is the one thing the v3.33.0 primitive does not set, and
     `.ive--v3 .form-control { padding: 0 }` wins over Bootstrap — so a desktop input in
     the editor rendered as a bordered box with its text jammed against the edge. */
  html.pc-on .is-deck.ive--v3 .form-control,
  html.pc-on .is-deck.ive--v3 .form-select,
  html.pc-on .is-deck.ive--v3 textarea.form-control {
    width: 100%; padding: 9px 12px; border-radius: 10px;
    border: 1px solid var(--pc-hair-2);
    background-color: rgba(255, 255, 255, .68);
    font: 450 13.6px/1.4 var(--font), Inter, sans-serif; color: var(--pc-ink);
    box-shadow: inset 0 1px 2px rgba(20, 28, 60, .035);
  }
  html[data-theme="dark"].pc-on .is-deck.ive--v3 .form-control,
  html[data-theme="dark"].pc-on .is-deck.ive--v3 .form-select,
  html[data-theme="dark"].pc-on .is-deck.ive--v3 textarea.form-control { background-color: rgba(255, 255, 255, .05); }
  html.pc-on .is-deck.ive--v3 .form-control:focus,
  html.pc-on .is-deck.ive--v3 .form-select:focus {
    border-color: rgba(75, 99, 255, .55); background-color: var(--pc-card-solid);
    box-shadow: 0 0 0 3px rgba(75, 99, 255, .13);
  }
  html.pc-on .is-deck.ive--v3 .inv-help,
  html.pc-on .is-deck.ive--v3 .text-secondary-ios { font: 450 11.6px/1.45 var(--font), Inter, sans-serif; margin-top: 6px; }
  /* HaaltdSelect's button is a TOOLBAR FILTER PILL by default — 30px tall, transparent,
     `max-width: 210px`. In a form field it IS the input; the max-width is the part that
     silently truncates a country name. */
  html.pc-on .is-deck .hm-field .hsel__btn {
    width: 100%; max-width: none; height: auto; min-height: 37px;
    justify-content: flex-start; padding: 9px 12px; border-radius: 10px;
    border-color: var(--pc-hair-2); background-color: rgba(255, 255, 255, .68);
    font: 450 13.6px/1.4 var(--font), Inter, sans-serif; color: var(--pc-ink);
    box-shadow: inset 0 1px 2px rgba(20, 28, 60, .035);
  }
  html[data-theme="dark"].pc-on .is-deck .hm-field .hsel__btn { background-color: rgba(255, 255, 255, .05); }
  html.pc-on .is-deck .hm-field .hsel__btn .hsel__val { flex: 1; min-width: 0; text-align: left; }
  html.pc-on .is-deck .hm-field .hsel__btn .hsel__caret { margin-left: auto; }
  html.pc-on .is-deck .ive3-unit .hsel__btn {
    width: auto; max-width: none; min-height: 35px; padding: 0 10px;
    background-color: rgba(20, 28, 60, .05); border-color: transparent;
  }
  html.pc-on .is-deck .ive3-grp > .hm-field:has(#inv-customer-slot),
  html.pc-on .is-deck .ive3-grp > .hm-field:has(#inv-shipto-slot),
  html.pc-on .is-deck .ive3-grp > .hm-field:has(#inv-due),
  html.pc-on .is-deck .ive3-grp > .hm-field:has(#inv-sched),
  html.pc-on .is-deck .ive3-grp > .hm-field:has(#inv-notes),
  html.pc-on .is-deck .ive3-grp > .hm-field:has(#inv-pay-timeline),
  html.pc-on .is-deck .ive3-grp > .status-lock,
  html.pc-on .is-deck .ive3-grp > select.visually-hidden { grid-column: 1 / -1; }

  /* =================================================================================
   *  6. STAGE 1 — type chooser
   * =============================================================================== */
  /* one per row: at a 440px pane a two-up grid gives each card ~200px, which wraps both
     the name AND the field list onto two lines each */
  html.pc-on .is-deck .ive3-type { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 4px; }
  /* ⚠ the title and the field list are flex SIBLINGS of the icon, so `display: block`
     cannot stack them — a flex item is laid out by its container. Wrapping is what folds
     the description onto its own line. */
  html.pc-on .is-deck .ive3-typeb {
    flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0 13px;
    padding: 13px 46px 13px 14px; border-radius: var(--pc-r-sm);
    background-color: transparent; background-image: none;
    border: 1.5px solid var(--pc-hair-2); box-shadow: none;
    transition: border-color .18s var(--pc-ease), background-color .18s var(--pc-ease);
  }
  html.pc-on .is-deck .ive3-typeb:hover { border-color: rgba(75, 99, 255, .4); background-color: rgba(75, 99, 255, .035); }
  html.pc-on .is-deck .ive3-typeb-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; font-size: 17px; }
  html.pc-on .is-deck .ive3-typeb-t {
    flex: 1 1 calc(100% - 51px); min-width: 0;
    font: 620 13.8px/1.25 var(--font), Inter, sans-serif; letter-spacing: -.012em; color: var(--pc-ink);
  }
  html.pc-on .is-deck .ive3-typeb-d {
    flex: 1 1 100%; margin: 2px 0 0 51px;
    font: 450 11.5px/1.35 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  html.pc-on .is-deck .ive3-typeb.is-on {
    border-color: var(--pc-indigo); background-color: rgba(75, 99, 255, .06);
    box-shadow: 0 0 0 3px rgba(75, 99, 255, .1);
  }
  html.pc-on .is-deck .ive3-typeb__ck { top: 50%; right: 15px; margin-top: -10px; }

  /* =================================================================================
   *  7. STAGE 2 — THE STATUS CONTROL, REBUILT
   *  The owner: "the statuses as well, they look so bad." They were six tinted pills in
   *  a 3-col grid — six competing colour blocks fighting for the eye on a form whose
   *  subject is not colour. Now a single segmented LIST: one row per status, a tone dot,
   *  a quiet resting state, and the selected row alone carrying its status colour.
   * =============================================================================== */
  html.pc-on .is-deck.ive--v3 .status-pick.ive3-stat {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0;
    border-radius: var(--pc-r-sm); overflow: hidden;
    border: 1px solid var(--pc-hair-2);
  }
  html.pc-on .is-deck .ive3-statb {
    justify-content: flex-start; gap: 9px; padding: 11px 12px;
    border-radius: 0; box-shadow: none;
    background-color: transparent;
    border-right: 1px solid var(--pc-hair); border-bottom: 1px solid var(--pc-hair);
    font: 550 12.6px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
    transition: background-color .16s var(--pc-ease), color .16s var(--pc-ease);
  }
  html.pc-on .is-deck .ive3-statb:nth-child(3n) { border-right: 0; }
  html.pc-on .is-deck .ive3-statb:nth-last-child(-n+3) { border-bottom: 0; }
  html.pc-on .is-deck .ive3-statb:hover { background-color: rgba(20, 28, 60, .04); color: var(--pc-ink); }
  html[data-theme="dark"].pc-on .is-deck .ive3-statb:hover { background-color: rgba(255, 255, 255, .05); }
  html.pc-on .is-deck .ive3-statb__d { width: 7px; height: 7px; }
  /* only the CHOSEN status is coloured — the other five stay ink */
  html.pc-on .is-deck .ive3-statb.is-on { font-weight: 620; box-shadow: none; }
  html.pc-on .is-deck .ive3-statb.is-on::after {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background-color: currentColor;
  }
  html.pc-on .is-deck .ive3-statb { position: relative; }
  html.pc-on .is-deck.ive--v3 .status-lock .status-unlock {
    /* `.status-unlock` is `inset:0; margin:auto` — a centred overlay. But
       `.ive--v3 .status-lock .status-unlock { margin: 0 16px 14px }` (~14505) replaces
       that `margin:auto` and drops the pill into the corner, over the first two
       statuses. Restore the centring. */
    margin: auto; height: 34px; border-radius: 9px;
    font: 600 12.2px/1 var(--font), Inter, sans-serif;
    border: 1px solid var(--pc-hair-2); background-color: var(--pc-card-solid); color: var(--pc-ink);
    box-shadow: var(--pc-lift);
  }
  html.pc-on .is-deck .ive3-quick { gap: 6px; margin-top: 9px; }
  html.pc-on .is-deck .ive3-quickb {
    padding: 6px 12px; font: 600 11.8px/1 var(--font), Inter, sans-serif;
    background-color: rgba(20, 28, 60, .05); box-shadow: none;
  }
  html[data-theme="dark"].pc-on .is-deck .ive3-quickb { background-color: rgba(255, 255, 255, .07); }
  html.pc-on .is-deck .ive3-quickb.is-on { color: #FFFFFF; background-color: transparent; background-image: var(--pc-grad); }

  /* =================================================================================
   *  8. STAGE 3 — line items, two rows each instead of eight
   *  The card is a 12-col grid and the wrappers are `display: contents`, so they still
   *  exist and still toggle by invoice type — they just stop forming rows.
   * =============================================================================== */
  html.pc-on .is-deck .ive3-item {
    border-radius: var(--pc-r-sm); margin-bottom: 11px; overflow: visible;
    padding: 0 15px 14px;
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 11px 10px;
    background-color: transparent; background-image: none;
    border: 1px solid var(--pc-hair-2); box-shadow: none;
  }
  /* ⚠ a two-line label pushes its OWN input down and the row stops aligning, because
     each field is its own grid item rather than sharing a row box. */
  html.pc-on .is-deck .ive3-item .hm-label {
    font-size: 9.6px; letter-spacing: .05em; margin-bottom: 5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.pc-on .is-deck .ive3-item__h {
    grid-column: 1 / -1; margin: 0 -15px; padding: 10px 14px;
    border-bottom: 1px solid var(--pc-hair);
  }
  html.pc-on .is-deck .ive3-item__ic { width: 27px; height: 27px; border-radius: 9px; font-size: 13px; }
  html.pc-on .is-deck .ive3-item__n {
    font: 650 10.5px/1 var(--font), Inter, sans-serif; letter-spacing: .1em;
    text-transform: uppercase; color: var(--pc-ink-3);
  }
  html.pc-on .is-deck .ive3-item__t {
    font: 550 14px/1 var(--font-ledger), monospace; font-variant-numeric: tabular-nums; color: var(--pc-ink);
  }
  html.pc-on .is-deck .ive3-item__pair { display: contents; }
  html.pc-on .is-deck .inv-item__vehicle { display: contents; }
  html.pc-on .is-deck .inv-item__parking { display: none; }
  html.pc-on .is-deck.ive--parking .inv-item__vehicle { display: none; }
  html.pc-on .is-deck.ive--parking .inv-item__parking { display: contents; }
  html.pc-on .is-deck.ive--v3 .inv-item .hm-field + .hm-field,
  html.pc-on .is-deck.ive--v3 .inv-item .ive3-item__pair .hm-field + .hm-field,
  html.pc-on .is-deck.ive--v3 .inv-item .ive3-item__pair + .ive3-item__pair .hm-field,
  html.pc-on .is-deck.ive--v3 .inv-item .inv-item__vehicle > .hm-field,
  html.pc-on .is-deck.ive--v3 .inv-item .inv-item__parking > .hm-field,
  html.pc-on .is-deck.ive--v3 .inv-item .inv-item__vehicle > .ive3-item__pair .hm-field,
  html.pc-on .is-deck.ive--v3 .inv-item .inv-item__parking > .ive3-item__pair .hm-field {
    border-top: 0 !important; border-left: 0 !important;
  }
  html.pc-on .is-deck.ive--v3 .inv-item .form-control,
  html.pc-on .is-deck.ive--v3 .inv-item .form-select { padding: 8px 11px; border-radius: 9px; font-size: 13.2px; }
  html.pc-on .is-deck.ive--v3 .inv-item input[type="date"] { padding: 8px 11px; font-size: 13.2px; }
  /* ⚠ A `date` INPUT HAS A HARD MINIMUM AND IT IS BIGGER THAN IT LOOKS. Measured by
     cloning one at `width: auto`: Chromium needs **132px** to render `dd/mm/yyyy` plus
     the calendar button at this font. Four-across gave each field 114px, so both period
     fields clipped to "mm/dd/" — and no amount of shaving padding closes a 50px gap.
     The two date fields therefore get a row of their own, six columns each (239px).
     If you re-tighten this grid, re-measure the clone; do not eyeball a date input. */
  html.pc-on .is-deck .inv-item__desc { grid-column: span 6; }
  html.pc-on .is-deck .ive3-item .hm-field:has(.it-qty),
  html.pc-on .is-deck .ive3-item .hm-field:has(.it-price) { grid-column: span 3; }
  /* vehicle: make | model, then VIN | weight */
  html.pc-on .is-deck .ive3-item .hm-field:has(.it-make),
  html.pc-on .is-deck .ive3-item .hm-field:has(.it-model) { grid-column: span 6; }
  html.pc-on .is-deck .ive3-item .hm-field:has(.it-vin) { grid-column: span 8; }
  html.pc-on .is-deck .ive3-item .hm-field:has(.it-weight-val) { grid-column: span 4; }
  /* parking: bay | yard, then the two dates on their own row */
  html.pc-on .is-deck .ive3-item .hm-field:has(.it-bay),
  html.pc-on .is-deck .ive3-item .hm-field:has(.it-loc),
  html.pc-on .is-deck .ive3-item .hm-field:has(.it-pstart),
  html.pc-on .is-deck .ive3-item .hm-field:has(.it-pend) { grid-column: span 6; }
  html.pc-on .is-deck .ive3-unit { gap: 6px; }
  html.pc-on .is-deck.ive--v3 .inv-item .ive3-unit .form-select {
    width: auto; flex: 0 0 auto; padding: 8px 7px; text-align: center;
    background-color: rgba(20, 28, 60, .05); background-image: none;
  }
  html.pc-on .is-deck .ive3-addline {
    padding: 12px; border-radius: var(--pc-r-sm); border-width: 1px;
    font: 620 12.8px/1 var(--font), Inter, sans-serif;
  }
  html.pc-on .is-deck .ive3-addline:hover { background-color: rgba(75, 99, 255, .075); }
  html.pc-on .is-deck .inv-paid-box {
    display: flex; align-items: center; gap: 10px; padding: 5px 6px 5px 12px; border-radius: 10px;
    background-color: rgba(20, 28, 60, .04); border: 1px solid var(--pc-hair-2);
  }
  html[data-theme="dark"].pc-on .is-deck .inv-paid-box { background-color: rgba(255, 255, 255, .05); }
  html.pc-on .is-deck .inv-paid-box__v { font: 550 14px/1 var(--font-ledger), monospace; color: var(--pc-ink); }
  html.pc-on .is-deck .inv-paid-box__btn {
    margin-left: auto; height: 28px; padding: 0 11px; border-radius: 8px; border: 0; cursor: pointer;
    font: 600 11.8px/1 var(--font), Inter, sans-serif; color: var(--pc-indigo);
    background-color: rgba(75, 99, 255, .1);
  }

  /* =================================================================================
   *  9. STAGE 4 — the review card, and totals that are NOT a second summary
   *  The live document already carries the money, so stage 4 is a confirmation, not a
   *  duplicate: the totals block is suppressed here and the review does the talking.
   * =============================================================================== */
  html.pc-on .is-deck .ive__step[data-step="4"] .ive3-grp { display: block; }
  html.pc-on .is-deck .ive3-rev__r { padding: 11px 2px; }
  html.pc-on .is-deck .ive3-rev__r + .ive3-rev__r::before { left: 2px; }
  html.pc-on .is-deck .ive3-rev__k { flex-basis: 96px; font: 450 12.4px/1.2 var(--font), Inter, sans-serif; }
  html.pc-on .is-deck .ive3-rev__v { font: 550 13.2px/1.3 var(--font), Inter, sans-serif; }
  html.pc-on .is-deck .ive3-rev__t { font: 550 13px/1.25 var(--font), Inter, sans-serif; }
  html.pc-on .is-deck .ive3-rev__m { font: 450 11.4px/1.2 var(--font), Inter, sans-serif; }
  html.pc-on .is-deck .ive3-rev__a { font: 550 13px/1 var(--font-ledger), monospace; }
  html.pc-on .is-deck .ive3-tot { padding: 0; }
  html.pc-on .is-deck .ive3-tot__r { padding: 8px 2px; font: 450 12.6px/1.2 var(--font), Inter, sans-serif; }
  html.pc-on .is-deck .ive3-tot__r--grand { padding: 12px 2px 4px; font: 620 13px/1 var(--font), Inter, sans-serif; }
  html.pc-on .is-deck .ive3-tot__r--grand span:last-child { font-size: 22px; }
  html.pc-on .is-deck .ive3-dangerwrap { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--pc-hair); }
  html.pc-on .is-deck .ive3-danger {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 34px; padding: 0 14px; border-radius: 9px; cursor: pointer;
    border: 1px solid rgba(197, 39, 30, .28); background-color: transparent; color: var(--pc-coral);
    font: 600 12.4px/1 var(--font), Inter, sans-serif;
  }

  /* =================================================================================
   *  10. THE ACTION BAR — floating inside the pane, not a slab across the page
   *  The owner: "the Create Invoice button in the bottom is looking awkward." It was a
   *  full-width bar spanning two columns with an explanatory sentence in it. Now it
   *  hovers at the foot of the pane it belongs to, Back and Continue together.
   * =============================================================================== */
  html.pc-on .is-deck .ive3-bar {
    grid-column: 2; grid-row: 2; align-self: end; justify-self: stretch;
    position: relative; left: auto; right: auto; bottom: auto; width: auto; transform: none;
    z-index: 6; margin: 0 1px 1px; padding: 18px 21px 20px;
    border: 0; border-radius: 0 0 var(--pc-r) var(--pc-r);
    display: flex; align-items: center; justify-content: flex-end; gap: 9px;
    background-color: transparent;
    /* a fade out of the pane, not a card floating on top of one — the owner called the
       full-width slab awkward and it was: a second surface for two buttons */
    background-image: linear-gradient(180deg, rgba(250, 251, 254, 0), rgba(250, 251, 254, .96) 42%);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: none;
  }
  html[data-theme="dark"].pc-on .is-deck .ive3-bar {
    background-image: linear-gradient(180deg, rgba(18, 21, 31, 0), rgba(18, 21, 31, .96) 42%);
    box-shadow: none;
  }
  html.pc-on .is-deck .ive3-bar__back {
    flex: 0 0 auto; height: 36px; padding: 0 15px; border-radius: 9px;
    font: 600 12.8px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
    background-color: transparent; box-shadow: inset 0 0 0 1px var(--pc-hair-2);
  }
  html.pc-on .is-deck .ive3-bar__back:hover { background-color: rgba(20, 28, 60, .05); color: var(--pc-ink); }
  html.pc-on .is-deck .ive3-bar__next {
    flex: 0 0 auto; min-width: 0; height: 36px; padding: 0 18px; border-radius: 9px;
    font: 620 13px/1 var(--font), Inter, sans-serif;
    background-color: transparent; background-image: var(--pc-grad);
    box-shadow: 0 12px 24px -14px rgba(61, 79, 224, .95), inset 0 1px 0 rgba(255, 255, 255, .26);
  }
  html.pc-on .is-deck .ive3-bar__ro { margin-left: auto; font: 600 12.4px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }

  /* =================================================================================
   *  11. THE LIVE DOCUMENT
   *  Repainted by the delegated listeners in wireLive(), so a STATUS change, a customer,
   *  a date or a keystroke all show here immediately. This is the panel the first
   *  attempt got wrong.
   * =============================================================================== */
  html.pc-on .is-deck .ivdoc {
    grid-column: 3; grid-row: 2;
    min-height: 0; display: flex; flex-direction: column; gap: 10px;
  }
  html.pc-on .is-deck .ivdoc__bar { display: flex; align-items: center; gap: 8px; padding: 0 3px; }
  html.pc-on .is-deck .ivdoc__eyebrow {
    font: 650 10px/1 var(--font), Inter, sans-serif; letter-spacing: .12em;
    text-transform: uppercase; color: var(--pc-ink-3);
  }
  /* a small live indicator: it pulses ONCE per repaint rather than forever — a permanent
     animation on a always-mounted panel is what makes a UI feel cheap (v3.31.0) */
  html.pc-on .is-deck .ivdoc__dot {
    width: 6px; height: 6px; border-radius: 50%; background-color: var(--pc-green);
    animation: ivdocPing .9s var(--pc-ease-out) 1;
  }
  @keyframes ivdocPing { 0% { box-shadow: 0 0 0 0 rgba(14, 122, 82, .5); } 100% { box-shadow: 0 0 0 7px rgba(14, 122, 82, 0); } }
  @media (prefers-reduced-motion: reduce) { html.pc-on .is-deck .ivdoc__dot { animation: none; } }

  /* ⚠ THE SHEET STAYS LIGHT IN DARK MODE — deliberate, matching the v3.37.0 viewer. It
     is a paper document and it is what gets printed; one that inverts stops reading as
     paper. Its tones are pinned locally so they never inherit a dark --pc-ink. */
  html.pc-on .is-deck .ivdoc__sheet {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    border-radius: var(--pc-r); padding: 22px 22px 18px;
    background-color: #FFFFFF; border: 1px solid var(--pc-hair);
    box-shadow: var(--pc-lift-hi);
  }
  html.pc-on .is-deck .ivdoc__hd { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid rgba(18, 26, 58, .09); }
  html.pc-on .is-deck .ivdoc__co { display: block; font: 680 15px/1.2 var(--font-display), Inter, sans-serif; letter-spacing: -.02em; color: #101627; }
  html.pc-on .is-deck .ivdoc__cosub { display: block; margin-top: 3px; font: 650 9.6px/1 var(--font), Inter, sans-serif; letter-spacing: .13em; text-transform: uppercase; color: #8A92AC; }
  html.pc-on .is-deck .ivdoc__id { margin-left: auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
  html.pc-on .is-deck .ivdoc__no { font: 550 12.8px/1 var(--font-ledger), monospace; color: #101627; }
  html.pc-on .is-deck .ivdoc__st {
    display: inline-flex; align-items: center; height: 21px; padding: 0 9px; border-radius: 999px;
    font: 650 10.4px/1 var(--font), Inter, sans-serif; letter-spacing: .02em;
  }
  html.pc-on .is-deck .ivdoc__st.t-draft { color: #5B6779; background-color: rgba(100, 116, 139, .13); }
  html.pc-on .is-deck .ivdoc__st.t-due,
  html.pc-on .is-deck .ivdoc__st.t-part { color: #96630E; background-color: rgba(245, 170, 40, .18); }
  html.pc-on .is-deck .ivdoc__st.t-paid { color: #0E7A52; background-color: rgba(14, 122, 82, .12); }
  html.pc-on .is-deck .ivdoc__st.t-late { color: #C5271E; background-color: rgba(197, 39, 30, .11); }
  html.pc-on .is-deck .ivdoc__st.t-void { color: #6B7280; background-color: rgba(107, 114, 128, .13); }
  html.pc-on .is-deck .ivdoc__parties { display: flex; gap: 18px; padding: 15px 0 16px; border-bottom: 1px solid rgba(18, 26, 58, .09); }
  html.pc-on .is-deck .ivdoc__pk { display: block; font: 650 9.4px/1 var(--font), Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8A92AC; }
  html.pc-on .is-deck .ivdoc__pv { display: block; margin-top: 6px; font: 620 13px/1.3 var(--font), Inter, sans-serif; color: #101627; }
  html.pc-on .is-deck .ivdoc__pm { display: block; margin-top: 3px; font: 450 11.4px/1.3 var(--font), Inter, sans-serif; color: #6B7492; }
  html.pc-on .is-deck .ivdoc__dates { margin-left: auto; text-align: right; display: grid; grid-template-columns: auto; gap: 3px; }
  html.pc-on .is-deck .ivdoc__dates .ivdoc__pk + .ivdoc__pv2 { margin-bottom: 7px; }
  html.pc-on .is-deck .ivdoc__pv2 { display: block; margin-top: 4px; font: 550 12px/1 var(--font-ledger), monospace; color: #101627; white-space: nowrap; }
  /* ⚠ WITHOUT `table-layout: fixed` AND EXPLICIT WIDTHS the three numeric columns size
     to content and collide — "14£420.00£5,880.00" with no gap between them. */
  html.pc-on .is-deck .ivdoc__tbl {
    width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 4px;
    table-layout: fixed;
  }
  html.pc-on .is-deck .ivdoc__tbl th:nth-child(1), html.pc-on .is-deck .ivdoc__tbl td:nth-child(1) { width: 46%; }
  html.pc-on .is-deck .ivdoc__tbl th:nth-child(2), html.pc-on .is-deck .ivdoc__tbl td:nth-child(2) { width: 12%; }
  html.pc-on .is-deck .ivdoc__tbl th:nth-child(3), html.pc-on .is-deck .ivdoc__tbl td:nth-child(3) { width: 20%; }
  html.pc-on .is-deck .ivdoc__tbl th:nth-child(4), html.pc-on .is-deck .ivdoc__tbl td:nth-child(4) { width: 22%; }
  html.pc-on .is-deck .ivdoc__tbl th.num, html.pc-on .is-deck .ivdoc__tbl td.num { padding-left: 8px; }
  /* ⚠ Bootstrap paints `box-shadow: inset 0 0 0 9999px var(--bs-table-bg)` behind every
     cell. Reset the custom properties rather than fighting the shadow selector. */
  html.pc-on .is-deck .ivdoc__tbl { --bs-table-bg: transparent; --bs-table-color: inherit; --bs-table-accent-bg: transparent; }
  html.pc-on .is-deck .ivdoc__tbl th {
    padding: 12px 0 7px; text-align: left; border-bottom: 1px solid rgba(18, 26, 58, .09);
    font: 650 9.4px/1 var(--font), Inter, sans-serif; letter-spacing: .11em;
    text-transform: uppercase; color: #8A92AC;
  }
  html.pc-on .is-deck .ivdoc__tbl th.num, html.pc-on .is-deck .ivdoc__tbl td.num { text-align: right; }
  html.pc-on .is-deck .ivdoc__tbl td {
    padding: 10px 0; border-bottom: 1px solid rgba(18, 26, 58, .055);
    font: 450 12.2px/1.35 var(--font), Inter, sans-serif; color: #3C4459; vertical-align: top;
  }
  html.pc-on .is-deck .ivdoc__tbl td.num { font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums; color: #101627; white-space: nowrap; }
  html.pc-on .is-deck .ivdoc__li { display: flex; align-items: flex-start; gap: 9px; }
  html.pc-on .is-deck .ivdoc__lic {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
    font-size: 11px; color: #4B63FF; background-color: rgba(75, 99, 255, .1);
  }
  html.pc-on .is-deck .ivdoc__lit { min-width: 0; color: #101627; font-weight: 500; }
  html.pc-on .is-deck .ivdoc__empty td { color: #9AA2B6; font-style: italic; padding: 18px 0; text-align: center; }
  html.pc-on .is-deck .ivdoc__sum { margin-top: 14px; margin-left: auto; width: 62%; }
  html.pc-on .is-deck .ivdoc__sr {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0;
    font: 450 12px/1.2 var(--font), Inter, sans-serif; color: #5C6480;
  }
  html.pc-on .is-deck .ivdoc__sr b { font: 550 12.2px/1 var(--font-ledger), monospace; font-variant-numeric: tabular-nums; color: #101627; }
  html.pc-on .is-deck .ivdoc__sr--paid b { color: #0E7A52; }
  html.pc-on .is-deck .ivdoc__tot {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-top: 6px; padding-top: 11px; border-top: 1px solid rgba(18, 26, 58, .12);
  }
  html.pc-on .is-deck .ivdoc__tot span { font: 640 11px/1 var(--font), Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #5C6480; }
  /* GOLD is the money colour (§4.7) and this is the figure the whole screen is about */
  html.pc-on .is-deck .ivdoc__tot b {
    font: 700 21px/1 var(--font-display), Inter, sans-serif; letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    background-image: linear-gradient(122deg, #E9CE86 0%, #C79A3C 52%, #9A6A18 100%);
    background-color: transparent;
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }

  /* =================================================================================
   *  12. NARROWER DESKTOPS
   *  Below 1180px the document panel cannot hold a table and a form at once, so it
   *  drops and the deck becomes rail + pane. Below 1000px the rail goes horizontal.
   * =============================================================================== */
  @media (max-width: 1179.98px) {
    html.pc-on .ive--v3.is-deck { grid-template-columns: 200px minmax(0, 1fr); }
    html.pc-on .is-deck .ivdoc { display: none; }
  }
  @media (max-width: 999.98px) {
    html.pc-on .ive--v3.is-deck {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto minmax(0, 1fr);
    }
    html.pc-on .is-deck .ive__prog.ive3-prog { grid-column: 1; grid-row: 2; flex-direction: row; gap: 6px; margin-bottom: 14px; }
    html.pc-on .is-deck .ive3-prog::before { display: none; }
    html.pc-on .is-deck .ive3-prog i { flex: 1; padding: 9px 10px; }
    html.pc-on .is-deck .ive-stg__d { display: none; }
    html.pc-on .is-deck .ive__step { grid-column: 1; grid-row: 3; }
    html.pc-on .is-deck .ive3-bar { grid-column: 1; grid-row: 3; }
  }
}

/* =====================================================================================
 *  v3.40.0 — DESKTOP PAYMENTS · "THE LEDGER"
 *  -----------------------------------------------------------------------------------
 *  Landed from the _preview-pcpay.css candidate after sign-off; the candidate file and
 *  its <link> in _verify-pcpay.html were deleted in the same commit, because a stale
 *  candidate stylesheet makes every later measurement lie (the v3.38.0 lesson).
 *
 *  EVERYTHING sits inside @media (min-width: 768px) and is prefixed html.pc-on, so
 *  tools/check-pc-scope.js can prove none of it reaches a phone.
 *
 *  ⚠ FOUR THINGS IN HERE ARE LOAD-BEARING AND NON-OBVIOUS:
 *
 *  1. `.pvled` MUST NOT carry `overflow: hidden` OR `backdrop-filter`. Both make it a
 *     scroll container / containing block, and the sticky group headers then pin to the
 *     CARD instead of the viewport — they scroll away with it and the ledger loses the
 *     one thing that makes a long statement readable. It is therefore a SOLID surface,
 *     not a glass one. (Also cheaper: v3.35.0 — never repeat filters down a long list.)
 *
 *  2. `#pv-rec` MUST get `overflow: visible` back. `html.pc-on .pcx .ios-card` sets
 *     `overflow: hidden`, and `.spot` (invoice spotlight) and `.rec__menu` (method list)
 *     are BOTH `position: absolute` inside that card. Putting Payments in a `.pcx` frame
 *     clips them out of existence — the sixth time an overflow ancestor has eaten a
 *     floating layer in this project. `html.pc-on .pvx #pv-rec` is (1,2,1) and wins on
 *     specificity, so no !important is needed.
 *
 *  3. `.pv-kpi:hover` LIFTS `translateY(-2px)`. In a four-cell hairline strip that makes
 *     a quarter of the board hop as the cursor crosses it — exactly the v3.38.2 bug.
 *     The lift and the shadow are both neutralised, not overridden with a smaller lift.
 *
 *  4. HaaltdSelect's button is a TOOLBAR FILTER PILL by default (30px, transparent,
 *     max-width: 210px). `#rec-pick` is a FORM FIELD, so it needs the underline skin
 *     below or a long "INV-2026-007 — K. Rahman & Sons — £4,400.00 due" silently
 *     truncates at 210px.
 * ================================================================================== */

@media (min-width: 768px) {

  /* ============================================================ 0 · STICKY, RESCUED
     ⚠ HISTORICAL — FIXED GLOBALLY IN v3.41.1, KEPT SO THE REASONING SURVIVES.
     `html.pc-on .app-main` used to be `overflow-y: auto` (v3.32.0), which MADE .app-main A
     SCROLL CONTAINER — and because `.app-shell` is `min-height: 100vh` with a `1fr` row,
     .app-main grew with its content and NEVER actually scrolled. The DOCUMENT scrolls.
     A scroll container that does not scroll is a sticky graveyard: every
     `position: sticky` descendant resolves against .app-main's box, so it computes to
     `sticky`, reports the right `top`, and then never moves. Measured: group header
     `position: sticky`, `top: 97px`, and at scrollY 700 it was still at y=10, sliding
     under the toolbar.

     This is almost certainly why no desktop view has used sticky before — v3.39.0's deck
     mode gets its sticky rail by giving the PANE a fixed height and scrolling that.

     Rather than change a global that four other screens sit on, the scrollport is opened
     up for THIS PAGE ONLY, via a static `:has()` — not the `:has()`-in-a-hover-selector
     that v3.35.0 rightly bans, and the same static form v3.39.0 uses for field spans.
     Remove this rule and the ledger still works; the headers just stop pinning. */
  /* v3.41.1 — RETIRED. `html.pc-on .app-main` is now `overflow-y: visible` globally
     (~16639), so this page-scoped patch is redundant. Kept as a comment because the
     paragraph above explains WHY sticky needs it; the fix simply moved upstream. */

  /* ⚠ `.pcx { max-width: 1480px }` HAS NEVER APPLIED ANYWHERE. `.view-root` (~446) is
     `max-width: 1200px`, and nothing in the desktop blocks lifts it — so every `.pcx`
     page, including the dashboard and the invoices list, has been capped at 1200px and
     the 1480 has been dead since v3.32.0. Measured: the ledger came out 774px wide with
     the rail beside it, which forced the toolbar onto two lines and left the reference
     column at its 110px minimum.

     Lifted HERE ONLY, scoped to this page, because a ledger with six columns and a rail
     genuinely needs the width and because widening every other desktop screen is not
     this item's job. Worth raising as its own change — the two screens will not match
     until it is. */
  /* v3.46.0 — RETIRED. One scoped rule covers every .pcx page now (see the end of
     this file). */

  /* ============================================================ 1 · PAGE + BOARD */

  html.pc-on .pvx { --pvl-rowpad: 18px; }

  /* ---- the board: one panel where there used to be a chart card plus four KPI cards.
     Headline + range down the left, chart filling the right, and the four figures as a
     hairline-divided foot strip. renderCashflow() and renderStats() are UNTOUCHED — this
     is entirely a re-layout of the markup they already emit, which is why switchRange()'s
     queries for .cash__line / .cash__fill / .cash__range button all still resolve. */
  html.pc-on .pvx .pvbd {
    margin-bottom: 18px; border-radius: var(--pc-r); overflow: hidden;
    background: var(--pc-card); border: 1px solid var(--pc-hair); box-shadow: var(--pc-lift);
    -webkit-backdrop-filter: blur(20px) saturate(175%); backdrop-filter: blur(20px) saturate(175%);
  }

  html.pc-on .pvx .pv-cash { margin-bottom: 0; }
  html.pc-on .pvx .pvbd .cash {
    background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible;
    padding: 26px 28px 20px;
    display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: 36px; align-items: center;
  }
  html.pc-on .pvx .pvbd .cash:hover { box-shadow: none; }

  html.pc-on .pvx .pvbd .cash__top { display: block; }
  html.pc-on .pvx .pvbd .cash__cap {
    font: 620 10.6px/1 var(--font), Inter, sans-serif; letter-spacing: .1em;
    text-transform: uppercase; color: var(--pc-ink-3); margin: 0 0 12px;
  }
  /* GOLD is the money colour and a headline received figure is exactly what §4.7
     reserves it for. Chrome around it stays indigo. */
  html.pc-on .pvx .pvbd .cash__val {
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 40px; font-weight: 600; letter-spacing: -.035em; line-height: 1;
    background: linear-gradient(135deg, var(--pc-gold-a), var(--pc-gold-b));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  html.pc-on .pvx .pvbd .cash__sub {
    margin: 11px 0 0; font: 450 12.4px/1.4 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  html.pc-on .pvx .pvbd .cash__sub b.up { color: var(--pc-green); font-weight: 640; }
  html.pc-on .pvx .pvbd .cash__sub b.down { color: var(--pc-coral); font-weight: 640; }

  html.pc-on .pvx .pvbd .cash__range {
    display: inline-flex; gap: 2px; margin-top: 18px; padding: 3px;
    background: rgba(20, 28, 60, .055); border: 1px solid var(--pc-hair); border-radius: 11px;
  }
  html[data-theme="dark"].pc-on .pvx .pvbd .cash__range { background: rgba(255, 255, 255, .06); }
  html.pc-on .pvx .pvbd .cash__range button {
    height: 27px; padding: 0 13px; border-radius: 8px; border: 0; background: transparent;
    font: 560 11.8px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3); cursor: pointer;
    transition: color .16s var(--pc-ease), background .16s var(--pc-ease);
  }
  html.pc-on .pvx .pvbd .cash__range button:hover { color: var(--pc-ink); }
  html.pc-on .pvx .pvbd .cash__range button.on {
    background: var(--pc-grad); color: #FFF; box-shadow: 0 6px 14px -8px rgba(61, 79, 224, .85);
  }

  html.pc-on .pvx .pvbd .cash__chart { margin-top: 0; }
  html.pc-on .pvx .pvbd .cash__svg { height: 148px; }
  html.pc-on .pvx .pvbd .cash__x {
    margin-top: 8px; font: 450 10.6px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }

  /* ---- the foot strip: the four .pv-kpi articles, un-carded ---- */
  html.pc-on .pvx .pvbd .pv-stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0; margin: 0; border-top: 1px solid var(--pc-hair);
  }
  html.pc-on .pvx .pvbd .pv-kpi {
    position: relative; overflow: hidden; border-radius: 0; box-shadow: none;
    background: transparent; border: 0; border-left: 1px solid var(--pc-hair);
    padding: 15px 22px 17px;
  }
  html.pc-on .pvx .pvbd .pv-kpi:first-child { border-left: 0; }
  /* ⚠ see note 3 at the top of this file — the lift is removed, not softened. */
  html.pc-on .pvx .pvbd .pv-kpi:hover {
    transform: none; box-shadow: none; border-color: var(--pc-hair);
    background-color: rgba(75, 99, 255, .035);
  }
  html[data-theme="dark"].pc-on .pvx .pvbd .pv-kpi:hover { background-color: rgba(255, 255, 255, .03); }
  html.pc-on .pvx .pvbd .pv-kpi:first-child:hover { border-left-color: transparent; }
  /* The sparkline is a backdrop for a tall card; in a 90px strip cell it becomes the
     loudest thing in the board. Pinned to a low band and dropped to a whisper. */
  html.pc-on .pvx .pvbd .pv-kpi__spark {
    opacity: .24; top: auto; bottom: 0; height: 28px;
  }
  html.pc-on .pvx .pvbd .pv-kpi__spark svg { height: 30px; }

  html.pc-on .pvx .pvbd .pv-kpi__h { gap: 7px; margin-bottom: 8px; }
  html.pc-on .pvx .pvbd .pv-kpi__ico {
    width: 22px; height: 22px; border-radius: 7px; font-size: 11.5px;
  }
  html.pc-on .pvx .pvbd .pv-kpi__l {
    font: 560 11.4px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
    letter-spacing: .002em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.pc-on .pvx .pvbd .pv-kpi__v {
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 21px; font-weight: 580; letter-spacing: -.03em; color: var(--pc-ink);
  }
  html.pc-on .pvx .pvbd .pv-kpi__s {
    margin-top: 4px; font: 450 11.2px/1.3 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  html.pc-on .pvx .pvbd .pv-kpi__s--ok { color: var(--pc-green); font-weight: 560; }

  html.pc-on .pvx .pvbd .pv-state { gap: 18px; margin: 0 0 10px; }
  html.pc-on .pvx .pvbd .pv-state__i b {
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 19px; font-weight: 600; letter-spacing: -.03em;
  }
  html.pc-on .pvx .pvbd .pv-state__i--paid b { color: var(--pc-green); }
  html.pc-on .pvx .pvbd .pv-state__i--due  b { color: var(--pc-amber); }
  html.pc-on .pvx .pvbd .pv-state__i--late b { color: var(--pc-coral); text-shadow: none; }
  html.pc-on .pvx .pvbd .pv-state__i em {
    font: 450 10.6px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3); margin-top: 4px;
  }

  /* A full-bleed red slab is wrong in a summary strip — this is a link with urgency,
     not an alarm. Coral text on a coral wash, 28px, sized to its label. */
  html.pc-on .pvx .pvbd .pv-followup {
    display: inline-flex; align-items: center; gap: 6px; width: auto; height: 28px;
    margin: 0; padding: 0 11px; border-radius: 9px; cursor: pointer;
    background: rgba(197, 39, 30, .1); border: 1px solid rgba(197, 39, 30, .26);
    color: var(--pc-coral); font: 600 11.4px/1 var(--font), Inter, sans-serif;
    box-shadow: none; text-shadow: none;
    transition: background .16s var(--pc-ease), transform .14s var(--pc-ease);
  }
  html.pc-on .pvx .pvbd .pv-followup:hover {
    background: rgba(197, 39, 30, .17); transform: translateY(-1px); box-shadow: none;
  }
  html.pc-on .pvx .pvbd .pv-followup i { font-size: 11.5px; }

  /* ============================================================ 2 · THE TWO-COLUMN PAGE */

  html.pc-on .pvx .pvgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
  /* Measured, not chosen. The five columns plus padding need 780px; the rail takes 344px
     plus an 18px gap, the sidebar 260px and the gutters 60px. 780+344+18+260+60 = 1462,
     so 1500 is the first safe step — 1440 was measured leaving the ledger 758px and
     spilling the edit button 25px past the card. */
  @media (min-width: 1500px) {
    html.pc-on .pvx .pvgrid { grid-template-columns: minmax(0, 1fr) 344px; }
  }

  /* ============================================================ 3 · THE LEDGER */

  /* ⚠ see note 1 at the top: no overflow:hidden, no backdrop-filter, or the sticky group
     headers stop pinning to the viewport. Solid surface by design. */
  html.pc-on .pvx .pvled {
    position: relative; overflow: visible; border-radius: var(--pc-r);
    background: var(--pc-card-solid); border: 1px solid var(--pc-hair); box-shadow: var(--pc-lift);
    /* one grid definition, shared by the column head and every data row */
    /* FIVE columns, not six. The Date and Recorded columns were two dates on one row
       meaning different things, which is what made the history hard to read; they are
       now one "When it was paid" cell. */
    /* ⚠ THE FLEXIBLE COLUMN IS `minmax(0, 1fr)`, NOT `minmax(110px, 1fr)`. A hard minimum
       on a grid column does not shrink — the whole track list overflows its card instead,
       and the overflow lands on the LAST column, so the edit button was measured poking
       25px past the ledger's right edge at 1440 and 3px at 1100. With a 0 minimum the
       reference chip ellipsises and the grid can never spill. The breakpoints below are
       set so it never actually has to. */
    --pvl-cols: 244px 150px minmax(0, 1fr) 152px 32px;
    --pvl-gap: 14px;
  }

  /* A GRID, not a flex row. As flex-wrap the count was pushed onto a second line the
     moment search + pills + figure exceeded the card — measured at 806px, which is the
     ledger's width at 1512 with the rail beside it, so it wrapped on the owner's own
     screen. As a grid the count is pinned to the right of row 1 and only the pills wrap,
     inside their own cell. */
  html.pc-on .pvx .pvled__bar {
    display: grid; grid-template-columns: minmax(140px, 208px) minmax(0, 1fr) auto;
    align-items: center; gap: 8px 10px;
    padding: 11px 14px; border-bottom: 1px solid var(--pc-hair);
    border-radius: var(--pc-r) var(--pc-r) 0 0;
  }
  html.pc-on .pvx .pvled__q { max-width: 208px; min-width: 0; margin: 0; }
  html.pc-on .pvx .pvled__q .topbar__search-input { height: 31px; border-radius: 9px; font-size: 12.5px; }
  html.pc-on .pvx .pvled__q .topbar__search-icon { font-size: 12.5px; }
  html.pc-on .pvx .pvled__f { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }

  /* `.pv-f` mirrors the invoices list's `.inv-f`: a quiet borderless pill that only draws
     a border once it is actually filtering. HaaltdSelect carries `.is-set` across to its
     own button in paint(), so no second state class is needed.
     ⚠ SCOPED TO `select.pv-f`. HaaltdSelect COPIES the select's className onto its button
     (minus form-select/form-control), so an unqualified `.pv-f` rule also hits the button
     — and the 26px right padding reserved for the native caret then sits BESIDE the
     component's own caret. Measured: 26px of dead space per pill, 400px of buttons in a
     351px cell, and the three pills wrapped onto two rows at 1512. */
  html.pc-on .pvx select.pv-f {
    height: 30px; padding: 0 26px 0 9px; border-radius: 8px; width: auto; min-width: 0;
    border: 1px solid transparent; background-color: transparent; box-shadow: none;
    font: 545 12.2px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
  }
  html.pc-on .pvx .pvled__clr {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
    border: 0; border-radius: 8px; background: transparent; cursor: pointer;
    color: var(--pc-ink-3); font: 545 12.2px/1 var(--font), Inter, sans-serif;
    transition: background .16s var(--pc-ease), color .16s var(--pc-ease);
  }
  html.pc-on .pvx .pvled__clr:hover { background: rgba(197, 39, 30, .1); color: var(--pc-coral); }
  html.pc-on .pvx .pvled__clr i { font-size: 12px; }

  html.pc-on .pvx .pvled__n {
    justify-self: end; white-space: nowrap;
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 12px; font-weight: 560; color: var(--pc-ink-3);
  }

  /* ---- column head. Sticky under the 60px toolbar; the group headers stack 37px below
     it. Both offsets are measured, not guessed — re-measure if .app-topbar's height
     changes from the 60px the v3.32.0 block sets. */
  html.pc-on .pvx .pvled__cols {
    position: sticky; top: 60px; z-index: 4;
    display: grid; grid-template-columns: var(--pvl-cols); column-gap: var(--pvl-gap);
    align-items: center; height: 37px; padding: 0 var(--pvl-rowpad);
    background: var(--pc-card-solid); border-bottom: 1px solid var(--pc-hair);
    font: 620 10.2px/1 var(--font), Inter, sans-serif; letter-spacing: .085em;
    text-transform: uppercase; color: var(--pc-ink-3);
  }
  html.pc-on .pvx .pvled__cols .pvl-c-a { text-align: right; }

  /* ---- a group ---- */
  html.pc-on .pvx .pvl-g { position: relative; }
  html.pc-on .pvx .pvl-g + .pvl-g { border-top: 1px solid var(--pc-hair); }
  html.pc-on .pvx .pvl-g:last-child { border-radius: 0 0 var(--pc-r) var(--pc-r); }

  /* the status rail runs the FULL height of the group, so the tone reads as belonging to
     the whole block of transactions rather than to its title bar. One element, one paint,
     no per-row cost (v3.35.0). */
  html.pc-on .pvx .pvl-g::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 5;
    background: var(--pc-ink-3); opacity: .22;
  }
  html.pc-on .pvx .pvl-g:last-child::before { border-bottom-left-radius: var(--pc-r); }
  html.pc-on .pvx .pvl-g--paid::before { background: var(--pc-green); opacity: 1; }
  html.pc-on .pvx .pvl-g--part::before { background: var(--pc-amber); opacity: 1; }
  html.pc-on .pvx .pvl-g--late::before { background: var(--pc-coral); opacity: 1; }
  html.pc-on .pvx .pvl--flat .pvl-g::before { display: none; }

  html.pc-on .pvx .pvl-g__h {
    position: sticky; top: 97px; z-index: 3;
    display: grid; grid-template-columns: 32px minmax(120px, 1.4fr) minmax(0, 1fr) auto auto 30px;
    align-items: center; column-gap: 14px;
    padding: 11px var(--pvl-rowpad); background: var(--pc-card-solid);
    border-bottom: 1px solid var(--pc-hair);
  }

  html.pc-on .pvx .pvl-g__av { width: 32px; height: 32px; }
  html.pc-on .pvx .pvl-g__av .ava { width: 32px !important; height: 32px !important; font-size: 11.5px !important; box-shadow: none; }
  html.pc-on .pvx .pvl-g__mk {
    width: 32px; height: 32px; border-radius: 10px; display: inline-grid; place-items: center;
    background: rgba(75, 99, 255, .11); color: var(--pc-indigo); font-size: 14px;
  }
  html[data-theme="dark"].pc-on .pvx .pvl-g__mk { color: #A6B2FF; }

  html.pc-on .pvx .pvl-g__id { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  html.pc-on .pvx .pvl-g__n {
    font-family: var(--font-ledger), monospace; font-size: 13.4px; font-weight: 640;
    letter-spacing: -.018em; color: var(--pc-indigo); text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html[data-theme="dark"].pc-on .pvx .pvl-g__n { color: #A6B2FF; }
  html.pc-on .pvx a.pvl-g__n:hover { text-decoration: underline; text-underline-offset: 3px; }
  html.pc-on .pvx .pvl-g__n--txt {
    font-family: var(--font-display), Inter, sans-serif; font-size: 13.8px; font-weight: 640;
    color: var(--pc-ink); letter-spacing: -.012em;
  }
  html.pc-on .pvx .pvl-g__c {
    font: 450 11.6px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  html.pc-on .pvx .pvl-g__meter { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  html.pc-on .pvx .pvl-g__bar {
    height: 5px; border-radius: 3px; overflow: hidden; background: rgba(20, 28, 60, .085);
  }
  html[data-theme="dark"].pc-on .pvx .pvl-g__bar { background: rgba(255, 255, 255, .1); }
  html.pc-on .pvx .pvl-g__bar i { display: block; height: 100%; border-radius: 3px; background: var(--pc-indigo); }
  html.pc-on .pvx .pvl-g__bar--paid i { background: var(--pc-green); }
  html.pc-on .pvx .pvl-g__bar--part i { background: var(--pc-amber); }
  html.pc-on .pvx .pvl-g__bar--late i { background: var(--pc-coral); }
  html.pc-on .pvx .pvl-g__meter em {
    font: 450 11px/1 var(--font), Inter, sans-serif; font-style: normal; color: var(--pc-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  html.pc-on .pvx .pvl-g__v { text-align: right; white-space: nowrap; }
  html.pc-on .pvx .pvl-g__v b {
    display: block;
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 15px; font-weight: 620; letter-spacing: -.03em;
    background: linear-gradient(135deg, var(--pc-gold-a), var(--pc-gold-b));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  html.pc-on .pvx .pvl-g__v em {
    display: block; margin-top: 3px; font-style: normal;
    font: 450 10.8px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  html.pc-on .pvx .pvl-g__h .badge-ios { white-space: nowrap; }
  html.pc-on .pvx .pvl-g__h .pvg-more {
    width: 30px; height: 30px; border-radius: 9px; border: 1px solid transparent;
    background: transparent; color: var(--pc-ink-3);
    transition: background .16s var(--pc-ease), color .16s var(--pc-ease);
  }
  html.pc-on .pvx .pvl-g__h .pvg-more:hover { background: rgba(75, 99, 255, .1); color: var(--pc-indigo); border-color: transparent; }

  /* ---- the sibling-invoice tag on a by-invoice header ---- */
  html.pc-on .pvx .pvl-g__sib {
    display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 5.5px;
    background: rgba(75, 99, 255, .1); color: var(--pc-indigo);
    font: 600 10px/1.5 var(--font), Inter, sans-serif; letter-spacing: .008em; vertical-align: 1px;
  }
  html[data-theme="dark"].pc-on .pvx .pvl-g__sib { background: rgba(130, 145, 255, .14); color: #A6B2FF; }

  /* ---- CUSTOMER → INVOICE → PAYMENTS -------------------------------------------------
     A customer group is two levels deep, so the invoice sub-header needs to read as a
     rung BELOW the customer header and ABOVE the rows: indented behind a hairline,
     tinted, and quieter than the group header but louder than a transaction. */
  html.pc-on .pvx .pvl-sub { position: relative; }
  html.pc-on .pvx .pvl-sub + .pvl-sub { border-top: 1px solid var(--pc-hair); }
  html.pc-on .pvx .pvl-sub__h {
    display: grid; grid-template-columns: auto auto minmax(40px, 1fr) auto 28px;
    align-items: center; column-gap: 12px;
    padding: 8px var(--pvl-rowpad) 8px calc(var(--pvl-rowpad) + 16px);
    background: rgba(75, 99, 255, .035); border-bottom: 1px solid var(--pc-hair);
  }
  html[data-theme="dark"].pc-on .pvx .pvl-sub__h { background: rgba(255, 255, 255, .022); }
  /* the indent tick that ties the sub-header back to its customer */
  html.pc-on .pvx .pvl-sub__h::before {
    content: ''; position: absolute; left: var(--pvl-rowpad); top: 0; width: 1px; height: 100%;
    background: var(--pc-hair-2);
  }
  html.pc-on .pvx .pvl-sub__n {
    font-family: var(--font-ledger), monospace; font-size: 12.4px; font-weight: 620;
    letter-spacing: -.018em; color: var(--pc-indigo); text-decoration: none; white-space: nowrap;
  }
  html[data-theme="dark"].pc-on .pvx .pvl-sub__n { color: #A6B2FF; }
  html.pc-on .pvx a.pvl-sub__n:hover { text-decoration: underline; text-underline-offset: 3px; }
  html.pc-on .pvx .pvl-sub__h .badge-ios { white-space: nowrap; }
  html.pc-on .pvx .pvl-sub__meter { min-width: 0; }
  html.pc-on .pvx .pvl-sub__meter .pvl-g__bar { height: 4px; }
  html.pc-on .pvx .pvl-sub__v { text-align: right; white-space: nowrap; }
  html.pc-on .pvx .pvl-sub__v b {
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 12.2px; font-weight: 600; letter-spacing: -.026em; color: var(--pc-ink);
  }
  html.pc-on .pvx .pvl-sub__v em {
    font-style: normal; margin-left: 5px;
    font: 450 10.8px/1 var(--font-ledger), monospace; color: var(--pc-ink-3);
  }
  html.pc-on .pvx .pvl-sub__h .pvg-more { width: 28px; height: 28px; border-radius: 8px; }

  /* an invoice with nothing paid against it — the case that never used to appear here */
  html.pc-on .pvx .pvl-sub__none,
  html.pc-on .pvx .pvl-sub__hidden {
    display: flex; align-items: center; gap: 8px; margin: 0;
    padding: 11px var(--pvl-rowpad) 11px calc(var(--pvl-rowpad) + 17px);
    border-bottom: 1px solid var(--pc-hair);
    font: 450 11.8px/1.3 var(--font), Inter, sans-serif; font-style: italic; color: var(--pc-ink-3);
  }
  html.pc-on .pvx .pvl-sub__none i, html.pc-on .pvx .pvl-sub__hidden i { font-size: 12px; font-style: normal; }
  html.pc-on .pvx .pvl-sub--none .pvl-sub__h { background: transparent; }
  html.pc-on .pvx .pvl-sub__hidden { border-bottom: 0; font-style: normal; }
  /* rows sit one rung in from the sub-header they belong to */
  html.pc-on .pvx .pvl-sub .pvl-r { padding-left: calc(var(--pvl-rowpad) + 17px); }
  html.pc-on .pvx .pvl-sub .pvl-r::before {
    content: ''; position: absolute; left: var(--pvl-rowpad); top: 0; width: 1px; height: 100%;
    background: var(--pc-hair-2);
  }
  html.pc-on .pvx .pvl-g--cust .pvl-r { position: relative; }
  html.pc-on .pvx .pvl-g--cust .pvl-sub:last-child .pvl-r:last-child { border-bottom: 0; }

  /* ---- a transaction row -----------------------------------------------------------
     NO HOVER TREATMENT, by the standing v3.38.0 decision: a dense table does not need
     the pointer to repaint a wide band to say where it is. The only hover in the row is
     on the two small buttons. Rows 2 and 3 (trail, note) are explicit so that when only
     one of them exists the other collapses to a zero-height track. */
  html.pc-on .pvx .pvl-r {
    display: grid; grid-template-columns: var(--pvl-cols); column-gap: var(--pvl-gap); row-gap: 0;
    align-items: center; padding: 9px var(--pvl-rowpad);
    border-bottom: 1px solid var(--pc-hair);
  }
  html.pc-on .pvx .pvl-g:last-child .pvl-r:last-child { border-bottom: 0; }

  /* WHEN IT WAS PAID — weekday and full date on top, the audit stamp beneath. */
  html.pc-on .pvx .pvl-r__d { grid-row: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  html.pc-on .pvx .pvl-r__d b {
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 12.8px; font-weight: 600; letter-spacing: -.022em; color: var(--pc-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.pc-on .pvx .pvl-r__d em {
    font-style: normal; font: 450 10.8px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  html.pc-on .pvx .pvl-r__m {
    grid-row: 1; display: flex; align-items: center; gap: 7px; min-width: 0;
    font: 500 12.2px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
  }
  html.pc-on .pvx .pvl-r__mi {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px; display: inline-grid; place-items: center;
    font-size: 11.5px; color: var(--pc-indigo); background: rgba(75, 99, 255, .085);
  }
  html[data-theme="dark"].pc-on .pvx .pvl-r__mi { color: #A6B2FF; background: rgba(130, 145, 255, .12); }
  html.pc-on .pvx .pvl-r__m span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* REFERENCE — the field you actually reconcile against, so it gets a column, a mono
     face, a tinted chip and a copy button rather than being folded into a subtitle. */
  html.pc-on .pvx .pvl-r__ref { grid-row: 1; display: flex; align-items: center; gap: 4px; min-width: 0; }
  html.pc-on .pvx .pvl-ref {
    display: inline-block; max-width: 100%; padding: 3px 8px; border-radius: 7px;
    background: rgba(75, 99, 255, .085); border: 1px solid rgba(75, 99, 255, .16);
    font-family: var(--font-ledger), monospace; font-size: 11.6px; font-weight: 560;
    letter-spacing: .01em; color: var(--pc-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html[data-theme="dark"].pc-on .pvx .pvl-ref { background: rgba(130, 145, 255, .12); border-color: rgba(130, 145, 255, .2); }
  /* ⚠ THE DARK OVERRIDE MUST BE REPEATED FOR THE EMPTY STATE. `html[data-theme="dark"]`
     is an attribute selector and counts as a class, so the dark `.pvl-ref` rule is (0,4,0)
     and outranks the (0,3,0) `--none` modifier that follows it — "No reference" rendered
     as a filled chip in dark mode while looking correct in light. */
  html.pc-on .pvx .pvl-ref--none,
  html[data-theme="dark"].pc-on .pvx .pvl-ref--none {
    background: transparent; border-color: transparent; padding-left: 0; color: var(--pc-ink-3);
    font-family: var(--font), Inter, sans-serif; font-weight: 450; font-style: italic;
  }
  html.pc-on .pvx .pvl-cp {
    flex: 0 0 auto; width: 24px; height: 24px; display: inline-grid; place-items: center;
    border: 0; border-radius: 7px; background: transparent; color: var(--pc-ink-3); cursor: pointer;
    opacity: .55; transition: opacity .14s linear, background .14s linear, color .14s linear;
  }
  html.pc-on .pvx .pvl-cp:hover { opacity: 1; background: rgba(75, 99, 255, .1); color: var(--pc-indigo); }
  html.pc-on .pvx .pvl-cp.is-done { opacity: 1; color: var(--pc-green); background: rgba(14, 122, 82, .12); }
  html.pc-on .pvx .pvl-cp i { font-size: 11.5px; }

  html.pc-on .pvx .pvl-r__a { grid-row: 1; text-align: right; min-width: 0; }
  html.pc-on .pvx .pvl-r__a b {
    display: block; white-space: nowrap;
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 13.8px; font-weight: 620; letter-spacing: -.028em; color: var(--pc-ink);
  }
  /* the running balance after this payment — quiet, but it is the thing that makes a run
     of transactions read as a story */
  html.pc-on .pvx .pvl-r__left {
    display: block; margin-top: 3px; font-style: normal; white-space: nowrap;
    font: 450 10.8px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  html.pc-on .pvx .pvl-r__left--clear { color: var(--pc-green); font-weight: 560; }

  html.pc-on .pvx .pvl-r__x { grid-row: 1; display: flex; justify-content: flex-end; }
  html.pc-on .pvx .pvl-edit {
    width: 28px; height: 28px; display: inline-grid; place-items: center; padding: 0;
    border: 1px solid transparent; border-radius: 8px; background: transparent;
    color: var(--pc-ink-3); cursor: pointer;
    transition: background .16s var(--pc-ease), color .16s var(--pc-ease);
  }
  html.pc-on .pvx .pvl-edit:hover { background: rgba(75, 99, 255, .1); color: var(--pc-indigo); }
  html.pc-on .pvx .pvl-edit i { font-size: 12px; }
  html.pc-on .pvx .pvl-edit span { display: none; }

  html.pc-on .pvx .pvl-r__trail {
    grid-row: 2; grid-column: 2 / 5; margin-top: 5px; display: flex; align-items: center; gap: 6px;
    font: 450 11.2px/1.3 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.pc-on .pvx .pvl-r__trail i { font-size: 11px; opacity: .8; }
  html.pc-on .pvx .pvl-r__note {
    grid-row: 3; grid-column: 2 / 5; margin: 5px 0 1px; padding-left: 9px;
    border-left: 2px solid var(--pc-hair-2);
    font: 450 11.6px/1.45 var(--font), Inter, sans-serif; font-style: italic; color: var(--pc-ink-2);
  }

  html.pc-on .pvx .pvl-empty { padding: 56px 24px 60px; text-align: center; }
  html.pc-on .pvx .pvl-empty__i {
    display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 15px;
    background: rgba(75, 99, 255, .1); color: var(--pc-indigo); font-size: 19px; margin-bottom: 14px;
  }
  html.pc-on .pvx .pvl-empty h3 {
    margin: 0; font: 640 15.5px/1.2 var(--font-display), Inter, sans-serif;
    letter-spacing: -.02em; color: var(--pc-ink);
  }
  html.pc-on .pvx .pvl-empty p { margin: 7px 0 0; font: 450 12.8px/1.45 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }

  /* ============================================================ 4 · THE RAIL */

  html.pc-on .pvx .pvrail { display: grid; gap: 16px; align-content: start; min-width: 0; }

  /* ⚠ THE RAIL IS DELIBERATELY NOT STICKY. It was, at `top: 78px`, and that is the
     classic sticky trap: A STICKY ELEMENT TALLER THAN THE VIEWPORT CAN NEVER BE SCROLLED
     TO THE END OF. Measured with the page scrolled fully to the bottom — rail 878px tall,
     pinned 78px down, bottom edge stranded at y=956:
         1512x940  →  16px of the mix panel unreachable
         1512x800  → 156px unreachable
         1440x760  → 196px unreachable
     The rail's height is not a constant either — it grows when an invoice is picked (the
     selected line plus the allocation chips) and with the number of methods in the mix —
     so a `@media (min-height: …)` guard would be exactly the guessed number that v3.8.7
     got burned by. Scrolling normally, nothing is ever out of reach, and the header's
     "Record a payment" button scrolls the form back and focuses it. If sticky is wanted
     later it needs a ResizeObserver comparing rail height to viewport height, not a
     media query. */

  /* ⚠ see note 2 at the top: overflow MUST come back or the spotlight and the method
     menu are clipped away by `html.pc-on .pcx .ios-card { overflow: hidden }`. */
  html.pc-on .pvx #pv-rec {
    overflow: visible; margin: 0; padding: 20px 20px 22px;
    background: var(--pc-card-solid); border: 1px solid var(--pc-hair);
    border-radius: var(--pc-r); box-shadow: var(--pc-lift);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html.pc-on .pvx #pv-rec .rec__head { margin-bottom: 15px; }
  html.pc-on .pvx #pv-rec .rec__title {
    font: 660 14.6px/1.2 var(--font-display), Inter, sans-serif; letter-spacing: -.022em; color: var(--pc-ink);
  }
  html.pc-on .pvx #pv-rec .rec__sub { margin-top: 5px; font: 450 11.8px/1.45 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }

  /* a 348px rail cannot hold two fields side by side — both horizontal rows fold */
  html.pc-on .pvx #pv-rec .rec__pickrow { flex-direction: column; align-items: stretch; gap: 12px; }
  html.pc-on .pvx #pv-rec .rec__search,
  html.pc-on .pvx #pv-rec .rec__pick { flex: 1 1 auto; }
  html.pc-on .pvx #pv-rec .rec__q { height: 38px; font-size: 13px; }
  html.pc-on .pvx #pv-rec .rec__meta { grid-template-columns: 1fr; gap: 13px; margin-bottom: 18px; }
  html.pc-on .pvx #pv-rec .rec__cell-l { font: 545 11.6px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-2); margin-bottom: 6px; }

  /* ⚠ `.ios-card.rec` AND EVERY `.rec .rec__*` FIELD ARE OWNED BY AN UNSCOPED
     `!important` BLOCK (~8714) — the glass card, the 46px boxed fields, the pill chips
     and the gradient CTA all carry `!important`, so ordinary appended rules lose no
     matter how specific they are. The look is right and is kept; only the SIZING is
     wrong for a 348px rail, and matching `!important` is the only way to reach it.
     Do not "tidy" these away — measure first, they will silently stop applying. */
  html.pc-on .pvx #pv-rec .rec__cell-in,
  html.pc-on .pvx #pv-rec .rec__method {
    height: 40px !important; padding: 0 12px !important; border-radius: 11px !important;
    font-size: 12.9px;
  }
  html.pc-on .pvx #pv-rec .rec__amount-f { padding: 10px 12px !important; border-radius: 13px !important; }

  html.pc-on .pvx #pv-rec .rec__amount { margin: 16px 0; }
  html.pc-on .pvx #pv-rec .rec__amount-l { font: 545 11.6px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-2); }
  html.pc-on .pvx #pv-rec .rec__amount input { font-size: 30px; }
  html.pc-on .pvx #pv-rec .rec__cur { font-size: 21px; }
  html.pc-on .pvx #pv-rec .rec-chip {
    height: 28px !important; padding: 0 12px !important; display: inline-flex; align-items: center;
    border-radius: 999px !important; font-size: 11.6px !important; font-weight: 560 !important;
  }

  html.pc-on .pvx #pv-rec .rec__confirm { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 16px; }
  html.pc-on .pvx #pv-rec .rec__say { font: 450 11.8px/1.45 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }
  html.pc-on .pvx #pv-rec .rec__say b { color: var(--pc-ink); }
  html.pc-on .pvx #pv-rec .rec__say.is-good, html.pc-on .pvx #pv-rec .rec__say.is-good b { color: var(--pc-green); }
  html.pc-on .pvx #pv-rec .rec__say.is-bad, html.pc-on .pvx #pv-rec .rec__say.is-bad b { color: var(--pc-coral); }
  html.pc-on .pvx #pv-rec .rec__go {
    width: 100%; height: 42px; border-radius: 13px !important;
    font: 620 13px/1 var(--font), Inter, sans-serif; letter-spacing: -.008em;
  }
  html.pc-on .pvx #pv-rec .rec__go:disabled {
    background: rgba(20, 28, 60, .07) !important; color: var(--pc-ink-3) !important; box-shadow: none !important;
  }
  html[data-theme="dark"].pc-on .pvx #pv-rec .rec__go:disabled { background: rgba(255, 255, 255, .07) !important; }

  /* ⚠ see note 4: HaaltdSelect's default face is a 30px toolbar pill capped at 210px.
     In this field it IS the input, so it takes the underline skin of the rest of the
     form. The decorative `.rec__pick-c` chevron is removed once the component's own
     caret exists, or there are two. */
  html.pc-on .pvx #pv-rec .rec__pick .hsel__btn {
    width: 100%; max-width: none; height: 38px; justify-content: flex-start;
    padding: 0 24px 0 2px; border-radius: 0; border: 0; border-bottom: 1px solid var(--pc-hair-2);
    background-color: transparent; font: 450 13px/1 var(--font), Inter, sans-serif; color: var(--pc-ink);
  }
  html.pc-on .pvx #pv-rec .rec__pick .hsel__btn:hover { background-color: transparent; border-bottom-color: var(--pc-indigo); }
  html.pc-on .pvx #pv-rec .rec__pick .hsel__btn.is-open { background-color: transparent; border-bottom-color: var(--pc-indigo); }
  html.pc-on .pvx #pv-rec .rec__pick .hsel__val { flex: 1; min-width: 0; text-align: left; }
  html.pc-on .pvx #pv-rec .rec__pick .hsel__caret { position: absolute; right: 2px; }
  html.pc-on .pvx #pv-rec .rec__pick:has(.hsel__btn) .rec__pick-c { display: none; }
  html.pc-on .pvx #pv-rec .rec__pick .hsel__btn:disabled { color: var(--pc-ink-3); cursor: not-allowed; }

  html.pc-on .pvx #pv-rec .rec__sel { margin-top: 14px; padding: 11px 2px; align-items: flex-start; }
  /* In a 344px rail the picked line's "name · total" ran out of room and ellipsised
     mid-figure — "Peywand Omer · £3,000...." — which reads as a rendering fault. Stacked
     instead of squeezed: nothing here is optional enough to truncate. */
  html.pc-on .pvx #pv-rec .rec__sel-k { flex-direction: column; align-items: flex-start; gap: 4px; }
  html.pc-on .pvx #pv-rec .rec__sel-n { font-size: 12.6px; }
  html.pc-on .pvx #pv-rec .rec__sel-c { font-size: 11.4px; white-space: normal; overflow: visible; }
  html.pc-on .pvx #pv-rec .rec__sel-v { font-size: 12.4px; align-self: flex-start; }
  html.pc-on .pvx #pv-rec .rec__none { font-size: 11.8px; }

  /* ---- method mix -------------------------------------------------------------------
     Methods are not statuses, so there is no semantic colour to borrow. An indigo ramp
     tells the bands apart without claiming anything about them. */
  html.pc-on .pvx .pvmix {
    padding: 18px 20px 20px; border-radius: var(--pc-r);
    background: var(--pc-card-solid); border: 1px solid var(--pc-hair); box-shadow: var(--pc-lift);
  }
  html.pc-on .pvx .pvmix[hidden] { display: none; }
  html.pc-on .pvx .pvmix__t {
    margin: 0; font: 660 13.6px/1.2 var(--font-display), Inter, sans-serif;
    letter-spacing: -.02em; color: var(--pc-ink);
  }
  html.pc-on .pvx .pvmix__s { margin: 5px 0 14px; font: 450 11.4px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }
  html.pc-on .pvx .pvmix__bar {
    display: flex; gap: 2px; height: 9px; border-radius: 5px; overflow: hidden; margin-bottom: 15px;
  }
  html.pc-on .pvx .pvmix__seg { display: block; height: 100%; }
  html.pc-on .pvx .pvmix__seg--1 { background: #4B63FF; }
  html.pc-on .pvx .pvmix__seg--2 { background: #7B87FF; }
  html.pc-on .pvx .pvmix__seg--3 { background: #A3A9FF; }
  html.pc-on .pvx .pvmix__seg--4 { background: #C4C7FA; }
  html.pc-on .pvx .pvmix__seg--5 { background: #DCDEF3; }
  html[data-theme="dark"].pc-on .pvx .pvmix__seg--4 { background: #5B62A8; }
  html[data-theme="dark"].pc-on .pvx .pvmix__seg--5 { background: #414670; }

  html.pc-on .pvx .pvmix__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  html.pc-on .pvx .pvmix__i {
    display: grid; grid-template-columns: 8px 15px minmax(0, 1fr) auto auto;
    align-items: center; column-gap: 9px; padding: 5px 0;
  }
  html.pc-on .pvx .pvmix__k { width: 8px; height: 8px; border-radius: 3px; }
  html.pc-on .pvx .pvmix__k--1 { background: #4B63FF; }
  html.pc-on .pvx .pvmix__k--2 { background: #7B87FF; }
  html.pc-on .pvx .pvmix__k--3 { background: #A3A9FF; }
  html.pc-on .pvx .pvmix__k--4 { background: #C4C7FA; }
  html.pc-on .pvx .pvmix__k--5 { background: #DCDEF3; }
  html[data-theme="dark"].pc-on .pvx .pvmix__k--4 { background: #5B62A8; }
  html[data-theme="dark"].pc-on .pvx .pvmix__k--5 { background: #414670; }
  html.pc-on .pvx .pvmix__i > i { font-size: 12px; color: var(--pc-ink-3); }
  html.pc-on .pvx .pvmix__l {
    font: 500 12.2px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.pc-on .pvx .pvmix__n {
    min-width: 18px; height: 17px; padding: 0 5px; border-radius: 5.5px; display: inline-grid; place-items: center;
    font: 640 10.2px/1 var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    background: rgba(20, 28, 60, .07); color: var(--pc-ink-3);
  }
  html[data-theme="dark"].pc-on .pvx .pvmix__n { background: rgba(255, 255, 255, .08); }
  html.pc-on .pvx .pvmix__v {
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 12px; font-weight: 580; letter-spacing: -.025em; color: var(--pc-ink); white-space: nowrap;
  }

  /* ============================================================ 5 · NARROWER SCREENS
     Below 1500px the rail is already under the ledger, so the table has the full page
     and nothing needs dropping until the window itself is small. Measured, not guessed. */
  @media (max-width: 1199.98px) {
    html.pc-on .pvx .pvled { --pvl-cols: 218px 132px minmax(0, 1fr) 138px 30px; }
    html.pc-on .pvx .pvbd .cash { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    html.pc-on .pvx .pvbd .pv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html.pc-on .pvx .pvbd .pv-kpi:nth-child(3) { border-left: 0; }
    html.pc-on .pvx .pvbd .pv-kpi:nth-child(n+3) { border-top: 1px solid var(--pc-hair); }
  }
  @media (max-width: 879.98px) {
    html.pc-on .pvx .pvled { --pvl-cols: 196px 32px minmax(0, 1fr) 126px 28px; --pvl-rowpad: 13px; }
    html.pc-on .pvx .pvled__cols .pvl-c-m { font-size: 0; }
    html.pc-on .pvx .pvl-r__m span { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    html.pc-on .pvx .pv-followup, html.pc-on .pvx .pvl-cp, html.pc-on .pvx .pvl-edit,
    html.pc-on .pvx .pvled__clr, html.pc-on .pvx #pv-rec .rec__go,
    html.pc-on .pvx .pvbd .cash__range button { transition: none; }
  }
}

/* =====================================================================================
 *  DESKTOP CUSTOMERS — "THE ACCOUNT BOOK"  ·  PC Native 2026  (v3.41.0)
 *  -------------------------------------------------------------------------------
 *  Replaces the old desktop Customers screen: an alphabetical grid of cards behind a
 *  grid/list toggle, in which 20 of 42 money figures were clipped at 1512 (measured:
 *  scrollWidth 94 against clientWidth 75) and which got WORSE on a bigger display,
 *  because more width meant more columns and narrower cards.
 *
 *  Fourteen names you already know is not a lookup problem, so the screen is built
 *  around the questions a desktop actually has to answer — WHO OWES ME, HOW OLD IS IT,
 *  and WHO HAS GONE QUIET: one board (outstanding + an ageing strip + a hairline count
 *  strip), then directory | profile rail, with a customer's whole ledger — every
 *  invoice and every payment under it — opening in place beneath their row.
 *
 *  THREE THINGS IN HERE ARE LOAD-BEARING:
 *
 *  1. `.cxdir` MUST NOT carry `overflow: hidden` OR `backdrop-filter`. Either makes it a
 *     scroll container / containing block and the sticky column head pins to the CARD
 *     instead of the viewport. Solid surface by design (also cheaper down a long list —
 *     v3.35.0: never repeat a filter down a list you scroll).
 *
 *  2. THE FLEXIBLE COLUMN IS `minmax(0, 1fr)`. A grid column with a hard minimum does
 *     not shrink, it overflows, and the overflow lands on the LAST column — which here
 *     would be the chevron poking out of the card edge.
 *
 *  3. NO ROW HOVER (standing v3.38.0 decision). The row does carry an `.is-sel` state,
 *     because clicking one loads the rail and opens the ledger and you need to see which
 *     one you are on — that is selection, not the pointer repainting a wide band.
 *
 *  Everything below is inside @media (min-width: 768px) and prefixed html.pc-on, so
 *  tools/check-pc-scope.js can prove none of it reaches a phone.
 * ================================================================================== */

@media (min-width: 768px) {

  /* ================================================== 0 · SCROLLPORT + WIDTH

     ⚠ `html.pc-on .app-main { overflow-y: auto }` (v3.32.0, ~16639) makes .app-main a
     scroll container, but `.app-shell` is `min-height: 100vh` with a `1fr` row, so it
     grows with its content and never scrolls — the DOCUMENT scrolls. Sticky children
     resolve against a container that never moves: they compute to `sticky`, report the
     right `top`, and stay put. Opened up for THIS PAGE ONLY via a static `:has()`,
     exactly as v3.40.0 did for `.pvx`. Remove it and the table still works, the column
     head just stops pinning. */
  /* v3.41.1 — RETIRED, same as Payments: the scrollport fix is global now (~16639). */

  /* ⚠ `.pcx { max-width: 1480px }` has never applied — `.view-root` caps at 1200px
     (~446). Lifted here, matching what v3.40.0 did for Payments, because a five-column
     directory with a rail beside it needs the width. Measured on the old screen: 312px
     of a 1512 viewport sat empty while the amounts inside the cards truncated. */
  /* v3.46.0 — RETIRED. One scoped rule covers every .pcx page now (see the end of
     this file). */

  html.pc-on .cxx { --cxd-pad: 18px; --cxd-gap: 14px; }

  /* ================================================== 1 · THE BOARD

     One object, not four cards. Headline + footnote down the left, the ageing strip
     filling the right, and the four counts on a hairline foot — the same anatomy as
     the Payments board (§4.11.4). Short and self-contained, so it is GLASS. */
  html.pc-on .cxx .cxbd {
    margin-bottom: 18px; border-radius: var(--pc-r); overflow: hidden;
    background: var(--pc-card); border: 1px solid var(--pc-hair); box-shadow: var(--pc-lift);
    -webkit-backdrop-filter: blur(20px) saturate(175%); backdrop-filter: blur(20px) saturate(175%);
  }

  html.pc-on .cxx .cxbd__body {
    display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 30px; padding: 22px 24px 20px; align-items: start;
  }
  /* ⚠ MEASURED FOLD POINT. The widest thing in an age cell is a ten-character figure at
     94px ("£30,816.00"); with 2x14 padding a cell needs 122, so the four-across strip
     needs 488. Headline column 300 + 30 gap + 488 + 48 body padding = 866 of page
     content, and content(W) = W - 340, so the two-column board holds only from 1206.
     Measured failing at 1180 (age cell 87, figure 94) and at 1100 (67). Folded below
     1280 — the first standard audit width clear of 1206 — and one-column the strip gets
     the whole body: 170 a cell at 1180, 150 at 1100, 125 at 768. */
  @media (max-width: 1279px) {
    html.pc-on .cxx .cxbd__body { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  }

  html.pc-on .cxx .cxbd__cap {
    display: block; font: 620 10.4px/1 var(--font), Inter, sans-serif;
    letter-spacing: .085em; text-transform: uppercase; color: var(--pc-ink-3);
  }

  /* GOLD IS MONEY AND ONLY HEADLINE MONEY (§4.11.3). This figure and the rail's lifetime
     value are the only two gold things on the page; every row-level amount stays ink. */
  html.pc-on .cxx .cxbd__v {
    margin-top: 9px;
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 38px; font-weight: 640; letter-spacing: -.036em; line-height: 1;
    background: linear-gradient(135deg, var(--pc-gold-a), var(--pc-gold-b));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  html.pc-on .cxx .cxbd__sub {
    margin-top: 10px; font: 450 12.4px/1.4 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  html.pc-on .cxx .cxbd__flag { color: var(--pc-coral); font-weight: 600; }
  html.pc-on .cxx .cxbd__alt {
    display: flex; align-items: center; gap: 7px; margin-top: 12px; padding-top: 11px;
    border-top: 1px solid var(--pc-hair);
    font: 450 11.8px/1.4 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  html.pc-on .cxx .cxbd__alt i { font-size: 12.5px; color: var(--pc-ink-3); }

  /* ---- the ageing strip: one stacked bar, four labelled figures beneath ---- */
  html.pc-on .cxx .cxbd__bar {
    display: flex; height: 9px; border-radius: 5px; overflow: hidden; gap: 2px;
    background: rgba(20, 28, 60, .06);
  }
  html[data-theme="dark"].pc-on .cxx .cxbd__bar { background: rgba(255, 255, 255, .07); }
  html.pc-on .cxx .cxbd__seg { display: block; height: 100%; border-radius: 3px; }
  html.pc-on .cxx .cxbd__seg--ok   { background: var(--pc-indigo); opacity: .55; }
  html.pc-on .cxx .cxbd__seg--due  { background: var(--pc-amber); }
  html.pc-on .cxx .cxbd__seg--late { background: var(--pc-coral); opacity: .72; }
  html.pc-on .cxx .cxbd__seg--bad  { background: var(--pc-coral); }
  html.pc-on .cxx .cxbd__seg--none { background: transparent; }

  html.pc-on .cxx .cxbd__ages {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 16px;
  }
  /* NO LIFT ON THESE CELLS. A translateY inside a hairline strip makes a quarter of the
     board hop as the pointer crosses it — the v3.38.2 bug. They are not interactive. */
  html.pc-on .cxx .cxbd__age {
    min-width: 0; padding: 0 14px; border-left: 1px solid var(--pc-hair);
  }
  html.pc-on .cxx .cxbd__age:first-child { border-left: 0; padding-left: 0; }
  html.pc-on .cxx .cxbd__age-k {
    display: flex; align-items: center; gap: 6px;
    font: 600 10.4px/1 var(--font), Inter, sans-serif; letter-spacing: .06em;
    text-transform: uppercase; color: var(--pc-ink-3); white-space: nowrap;
  }
  html.pc-on .cxx .cxbd__age-k::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: currentColor; opacity: .5;
  }
  html.pc-on .cxx .cxbd__age-k--ok::before   { background: var(--pc-indigo); opacity: .55; }
  html.pc-on .cxx .cxbd__age-k--due::before  { background: var(--pc-amber); opacity: 1; }
  html.pc-on .cxx .cxbd__age-k--late::before { background: var(--pc-coral); opacity: .72; }
  html.pc-on .cxx .cxbd__age-k--bad::before  { background: var(--pc-coral); opacity: 1; }
  html.pc-on .cxx .cxbd__age-v {
    display: block; margin-top: 9px;
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 16.5px; font-weight: 620; letter-spacing: -.03em; color: var(--pc-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.pc-on .cxx .cxbd__age-c {
    display: block; margin-top: 4px; font-style: normal;
    font: 450 11.2px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.pc-on .cxx .cxbd__age:not(.is-on) .cxbd__age-v { color: var(--pc-ink-3); opacity: .55; }
  html.pc-on .cxx .cxbd__age:not(.is-on) .cxbd__age-k { opacity: .6; }

  /* ---- the foot strip ---- */
  html.pc-on .cxx .cxbd__foot {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--pc-hair); background: rgba(20, 28, 60, .015);
  }
  html[data-theme="dark"].pc-on .cxx .cxbd__foot { background: rgba(255, 255, 255, .015); }
  html.pc-on .cxx .cxbd__fc {
    min-width: 0; padding: 13px 24px; border-left: 1px solid var(--pc-hair);
    display: flex; align-items: baseline; gap: 9px;
  }
  html.pc-on .cxx .cxbd__fc:first-child { border-left: 0; }
  html.pc-on .cxx .cxbd__fc b {
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 15.5px; font-weight: 620; letter-spacing: -.03em; color: var(--pc-ink);
  }
  /* ⚠ NO GREEN HERE. "Active" is a CATEGORY, and §4.11.3 bans reaching for the status
     colours to differentiate categories — green means paid. Amber stays on "gone quiet"
     only, and only when the count is non-zero, because that one is genuinely an
     attention state rather than a bucket label. */
  html.pc-on .cxx .cxbd__fc b.cxbd__fc--due { color: var(--pc-amber); }
  html.pc-on .cxx .cxbd__fc em {
    font-style: normal; font: 500 11.6px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* ================================================== 2 · THE TWO-COLUMN PAGE

     Measured, not chosen. The directory's fixed tracks are 240 + 150 + 152 + 26 = 568,
     plus four 14px gaps (56) and 2×18 row padding (36) = 660; the contact column needs
     ~164 before an ordinary email ellipsises, so the table's floor is 810.

     ⚠ THE SIDEBAR IS 232px (--sidebar-w), NOT the 260 quoted in the v3.40.0 comment, and
     `.app-main` adds 24px of padding a side that the Payments arithmetic does not
     mention. MEASURED at 1512: .view-root comes out 1232 wide, so the page content is
     1232 - 60 (gutters) = 1172, and the table is 1172 - 344 - 18 = 810.
         content(W) = W - 232 (sidebar) - 48 (.app-main padding) - 60 (gutters)
         table(W)   = content - 344 (rail) - 18 (gap) = W - 702

     ⚠ THE THRESHOLD IS 1480, NOT 1512, AND THE 32px IS DELIBERATE. The owner's screen is
     1512, but a classic (non-overlay) scrollbar takes 15px off the layout viewport, so a
     threshold set at 1512 would drop that exact machine to one column the moment the
     page is long enough to scroll — a guessed number of precisely the kind that put a
     v3.8.7 feature on nobody's screen. At 1480 the table is 778 and the contact column
     132; at 1497 (1512 less a scrollbar) 795 and 149; at 1512, 810 and 164. */
  html.pc-on .cxx .cxgrid {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start;
  }
  @media (min-width: 1480px) {
    html.pc-on .cxx .cxgrid { grid-template-columns: minmax(0, 1fr) 344px; }

    /* ⚠ v3.42.4 — SAME FIX AS RECURRING, SAME REASON. The note above says never make this
       rail sticky because it runs past 900px populated. That holds for a rail at its
       NATURAL height; capping it at the viewport and giving it its own overflow removes
       the condition, because it can no longer be taller than the screen. Without it, a
       workspace with few customers leaves the record pinned beside hundreds of pixels of
       bare page — measured on Recurring with one plan: a 208px list against a 1118px
       rail, 911px of void. The list card stretches so the remainder reads as list
       surface rather than background. */
    html.pc-on .cxx .cxdir { align-self: stretch; }
    html.pc-on .cxx .cxrail {
      position: sticky; top: 60px;
      max-height: calc(100vh - 60px - 22px);
      overflow-y: auto; overscroll-behavior: contain;
      border-radius: var(--pc-r);
    }
    html.pc-on .cxx .cxrail::-webkit-scrollbar { width: 10px; }
    html.pc-on .cxx .cxrail::-webkit-scrollbar-track { background: transparent; }
    html.pc-on .cxx .cxrail::-webkit-scrollbar-thumb {
      background: rgba(20, 28, 60, .18); border-radius: 6px;
      border: 3px solid transparent; background-clip: content-box;
    }
    html[data-theme="dark"].pc-on .cxx .cxrail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); background-clip: content-box; }
  }

  /* ================================================== 3 · THE DIRECTORY

     ⚠ see note 1 at the top: no overflow:hidden, no backdrop-filter, or the sticky
     column head stops pinning to the viewport. Solid surface by design. */
  html.pc-on .cxx .cxdir {
    position: relative; overflow: visible; border-radius: var(--pc-r);
    background: var(--pc-card-solid); border: 1px solid var(--pc-hair); box-shadow: var(--pc-lift);
    /* ⚠ note 2: the flexible track is minmax(0, 1fr), never a hard minimum. */
    --cxd-cols: 232px minmax(0, 1fr) 146px 150px 26px;
  }

  /* A GRID, not a flex row — as flex-wrap the count is pushed onto a second line the
     moment search + pills exceed the card, which is exactly what happens at the width
     the table has with the rail beside it. */
  html.pc-on .cxx .cxdir__bar {
    display: grid; grid-template-columns: minmax(140px, 216px) minmax(0, 1fr) auto;
    align-items: center; gap: 8px 10px;
    padding: 11px 14px; border-bottom: 1px solid var(--pc-hair);
    border-radius: var(--pc-r) var(--pc-r) 0 0;
  }
  html.pc-on .cxx .cxdir__q { max-width: 216px; min-width: 0; margin: 0; }
  html.pc-on .cxx .cxdir__q .topbar__search-input { height: 31px; border-radius: 9px; font-size: 12.5px; }
  html.pc-on .cxx .cxdir__q .topbar__search-icon { font-size: 12.5px; }
  html.pc-on .cxx .cxdir__f { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }

  /* ⚠ SCOPED TO `select.cx-f`. HaaltdSelect COPIES the select's className onto its own
     button (trap 7), so an unqualified `.cx-f` rule also hits the button and the 26px
     reserved for the native caret lands beside the component's own caret. */
  html.pc-on .cxx select.cx-f {
    height: 30px; padding: 0 26px 0 9px; border-radius: 8px; width: auto; min-width: 0;
    border: 1px solid transparent; background-color: transparent; box-shadow: none;
    font: 545 12.2px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
  }
  html.pc-on .cxx .cxdir__clr {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
    border: 0; border-radius: 8px; background: transparent; cursor: pointer;
    color: var(--pc-ink-3); font: 545 12.2px/1 var(--font), Inter, sans-serif;
    transition: background .16s var(--pc-ease), color .16s var(--pc-ease);
  }
  html.pc-on .cxx .cxdir__clr:hover { background: rgba(197, 39, 30, .1); color: var(--pc-coral); }
  html.pc-on .cxx .cxdir__clr i { font-size: 12px; }
  html.pc-on .cxx .cxdir__n {
    justify-self: end; white-space: nowrap;
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 12px; font-weight: 560; color: var(--pc-ink-3);
  }

  /* ---- column head, sticky under the 60px toolbar ---- */
  html.pc-on .cxx .cxdir__cols {
    position: sticky; top: 60px; z-index: 4;
    display: grid; grid-template-columns: var(--cxd-cols); column-gap: var(--cxd-gap);
    align-items: center; height: 37px; padding: 0 var(--cxd-pad);
    background: var(--pc-card-solid); border-bottom: 1px solid var(--pc-hair);
    font: 620 10.2px/1 var(--font), Inter, sans-serif; letter-spacing: .085em;
    text-transform: uppercase; color: var(--pc-ink-3);
  }
  html.pc-on .cxx .cxdir__cols .cxd-c-t,
  html.pc-on .cxx .cxdir__cols .cxd-c-b { text-align: right; }

  /* ---- a customer row ---------------------------------------------------------------
     ⚠ note 3: NO HOVER BAND. `.is-sel` is a selection state (this row is loaded in the
     rail), which is information, not pointer noise. */
  html.pc-on .cxx .cxd-r {
    position: relative; display: grid; grid-template-columns: var(--cxd-cols);
    column-gap: var(--cxd-gap); align-items: center;
    padding: 11px var(--cxd-pad); border-bottom: 1px solid var(--pc-hair);
    cursor: pointer; outline: none;
  }
  html.pc-on .cxx .cxd-w:last-child .cxd-r:last-child { border-bottom: 0; }
  html.pc-on .cxx .cxd-w.is-open .cxd-r { border-bottom-color: transparent; }
  html.pc-on .cxx .cxd-w.is-open .cxd-r__x i { transform: rotate(90deg); }
  html.pc-on .cxx .cxd-r__x i { transition: transform .16s var(--pc-ease); }
  html.pc-on .cxx .cxd-r::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--pc-indigo); opacity: 0; transition: opacity .16s var(--pc-ease);
  }
  html.pc-on .cxx .cxd-r.is-sel { background: rgba(75, 99, 255, .055); }
  html[data-theme="dark"].pc-on .cxx .cxd-r.is-sel { background: rgba(130, 145, 255, .085); }
  html.pc-on .cxx .cxd-r.is-sel::before { opacity: 1; }
  html.pc-on .cxx .cxd-r:focus-visible { box-shadow: inset 0 0 0 2px rgba(75, 99, 255, .5); }

  html.pc-on .cxx .cxd-r__n { display: flex; align-items: center; gap: 11px; min-width: 0; }
  html.pc-on .cxx .cxp-av {
    flex: 0 0 auto; display: inline-grid; place-items: center; border-radius: 12px;
    overflow: hidden; color: #fff; letter-spacing: -.01em;
    font: 640 12.4px/1 var(--font-display), Inter, sans-serif;
    box-shadow: 0 2px 7px -3px rgba(20, 28, 70, .5);
  }
  html.pc-on .cxx .cxp-av img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
  html.pc-on .cxx .cxd-r__id { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  html.pc-on .cxx .cxd-r__id b {
    font: 620 13.4px/1.15 var(--font-display), Inter, sans-serif; letter-spacing: -.016em;
    color: var(--pc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.pc-on .cxx .cxd-r__id em {
    font-style: normal; font: 450 11.2px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Indigo, not green — a reminder being switched on is a setting, not a paid status. */
  html.pc-on .cxx .cxd-r__bell {
    flex: 0 0 auto; margin-left: auto; padding-left: 6px;
    font-size: 10.5px; color: var(--pc-indigo); opacity: .7;
  }
  html[data-theme="dark"].pc-on .cxx .cxd-r__bell { color: #A6B2FF; opacity: .8; }

  html.pc-on .cxx .cxd-r__c { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  html.pc-on .cxx .cxd-r__mail {
    font: 500 12.1px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink-2); text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.pc-on .cxx a.cxd-r__mail:hover { color: var(--pc-indigo); text-decoration: underline; text-underline-offset: 3px; }
  html[data-theme="dark"].pc-on .cxx a.cxd-r__mail:hover { color: #A6B2FF; }
  html.pc-on .cxx .cxd-r__tel {
    font-style: normal; font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 11.2px; font-weight: 450; color: var(--pc-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.pc-on .cxx .cxd-r__none {
    font-style: italic; font: italic 450 11.6px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }

  html.pc-on .cxx .cxd-r__t, html.pc-on .cxx .cxd-r__b { text-align: right; min-width: 0; }
  html.pc-on .cxx .cxd-r__t b, html.pc-on .cxx .cxd-r__b b {
    display: block; white-space: nowrap;
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 13.4px; font-weight: 620; letter-spacing: -.028em; color: var(--pc-ink);
  }
  html.pc-on .cxx .cxd-r__t em, html.pc-on .cxx .cxd-r__b em {
    display: block; margin-top: 3px; font-style: normal; white-space: nowrap;
    font: 450 10.8px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
    overflow: hidden; text-overflow: ellipsis;
  }
  html.pc-on .cxx .cxd-r__t em.is-quiet { color: var(--pc-amber); font-weight: 545; }

  /* COLOUR IS STATUS. Coral only for genuinely past due; amber for owed-but-not-late;
     green for a settled account; quiet ink for one that has never been invoiced. */
  html.pc-on .cxx .cxd-r__b--late b  { color: var(--pc-coral); }
  html.pc-on .cxx .cxd-r__b--late em { color: var(--pc-coral); font-weight: 545; }
  html.pc-on .cxx .cxd-r__b--due em  { color: var(--pc-amber); font-weight: 545; }
  html.pc-on .cxx .cxd-r__b--clear b { color: var(--pc-ink-3); font-weight: 450; }
  html.pc-on .cxx .cxd-r__b--clear em { color: var(--pc-green); font-weight: 545; }
  html.pc-on .cxx .cxd-r__b--nil b   { color: var(--pc-ink-3); font-weight: 450; }

  html.pc-on .cxx .cxd-r__x { display: flex; justify-content: flex-end; color: var(--pc-ink-3); }
  html.pc-on .cxx .cxd-r__x i { font-size: 12px; opacity: .5; }
  html.pc-on .cxx .cxd-r.is-sel .cxd-r__x i { opacity: 1; color: var(--pc-indigo); }
  html[data-theme="dark"].pc-on .cxx .cxd-r.is-sel .cxd-r__x i { color: #A6B2FF; }

  /* ============================================ 3b · THE CUSTOMER'S LEDGER

     Opened in place beneath the row rather than in the rail: a 344px column cannot hold
     a payment line (date + recording stamp + method + reference + amount is five things
     wide), and the main column has 810px at 1512, which it can. Two levels — invoice,
     then the payments under it — the same shape as the by-customer grouping in
     Payments (v3.40.0). */
  html.pc-on .cxx .cxl {
    padding: 4px var(--cxd-pad) 16px calc(var(--cxd-pad) + 45px);
    border-bottom: 1px solid var(--pc-hair);
    background: rgba(75, 99, 255, .028);
  }
  html[data-theme="dark"].pc-on .cxx .cxl { background: rgba(130, 145, 255, .045); }
  html.pc-on .cxx .cxd-w:last-child .cxl { border-bottom: 0; border-radius: 0 0 var(--pc-r) var(--pc-r); }

  html.pc-on .cxx .cxl-cap {
    display: flex; align-items: center; gap: 7px; padding: 4px 0 12px;
    font: 620 10.2px/1 var(--font), Inter, sans-serif; letter-spacing: .085em;
    text-transform: uppercase; color: var(--pc-ink-3);
  }
  html.pc-on .cxx .cxl-cap i { font-size: 11.5px; }

  html.pc-on .cxx .cxl-none, html.pc-on .cxx .cxl-wait {
    display: flex; align-items: center; gap: 8px; padding: 10px 0 4px;
    font: 450 12px/1.4 var(--font), Inter, sans-serif; font-style: italic; color: var(--pc-ink-3);
  }
  html.pc-on .cxx .cxl-none i, html.pc-on .cxx .cxl-wait i { font-size: 12.5px; font-style: normal; }

  /* ---- one invoice ---- */
  html.pc-on .cxx .cxl-i {
    position: relative; margin-bottom: 10px; border-radius: 14px; overflow: hidden;
    background: var(--pc-card-solid); border: 1px solid var(--pc-hair);
  }
  html.pc-on .cxx .cxl-i:last-child { margin-bottom: 0; }
  /* the status rail runs the full height of the invoice block, so the tone belongs to
     the whole thing rather than to its title bar — one element, one paint */
  html.pc-on .cxx .cxl-i::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 2;
    background: var(--pc-ink-3); opacity: .2;
  }
  html.pc-on .cxx .cxl-i--paid::before { background: var(--pc-green); opacity: 1; }
  html.pc-on .cxx .cxl-i--part::before { background: var(--pc-amber); opacity: 1; }
  html.pc-on .cxx .cxl-i--late::before { background: var(--pc-coral); opacity: 1; }

  html.pc-on .cxx .cxl-i__h {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center; column-gap: 14px; padding: 11px 14px 11px 17px;
    border-bottom: 1px solid var(--pc-hair);
  }
  html.pc-on .cxx .cxl-i__id { min-width: 0; }
  html.pc-on .cxx .cxl-i__n {
    font-family: var(--font-ledger), monospace; font-size: 12.8px; font-weight: 640;
    letter-spacing: -.018em; color: var(--pc-indigo); text-decoration: none;
  }
  html[data-theme="dark"].pc-on .cxx .cxl-i__n { color: #A6B2FF; }
  html.pc-on .cxx a.cxl-i__n:hover { text-decoration: underline; text-underline-offset: 3px; }
  html.pc-on .cxx .cxl-i__id em {
    display: block; margin-top: 3px; font-style: normal;
    font: 450 10.9px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.pc-on .cxx .cxl-i__v { text-align: right; white-space: nowrap; }
  html.pc-on .cxx .cxl-i__v b {
    display: block; font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 13.4px; font-weight: 620; letter-spacing: -.028em; color: var(--pc-ink);
  }
  html.pc-on .cxx .cxl-i__v em {
    display: block; margin-top: 3px; font-style: normal;
    font: 450 10.8px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  html.pc-on .cxx .cxl-i__v em i { font-style: normal; color: var(--pc-coral); font-weight: 560; }

  /* ---- a payment against that invoice ----
     ⚠ THE CLOCK BELONGS TO THE RECORDING, NOT THE PAYMENT. `paid_at` comes from an
     <input type="date"> and carries no time; `created_at` is the only real timestamp. */
  html.pc-on .cxx .cxl-i__p { padding: 0 14px 0 17px; }
  html.pc-on .cxx .cxl-p {
    display: grid; grid-template-columns: minmax(0, 1fr) 122px 120px 92px;
    column-gap: 12px; align-items: center; padding: 9px 0;
    border-bottom: 1px solid var(--pc-hair);
  }
  html.pc-on .cxx .cxl-p:last-child { border-bottom: 0; }
  html.pc-on .cxx .cxl-p__d { min-width: 0; }
  html.pc-on .cxx .cxl-p__d b {
    display: block; font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 12.2px; font-weight: 600; letter-spacing: -.022em; color: var(--pc-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.pc-on .cxx .cxl-p__d em {
    display: block; margin-top: 3px; font-style: normal;
    font: 450 10.6px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.pc-on .cxx .cxl-p__m {
    display: flex; align-items: center; gap: 7px; min-width: 0;
    font: 500 11.8px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
  }
  html.pc-on .cxx .cxl-p__mi {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; display: inline-grid;
    place-items: center; font-size: 10.8px; color: var(--pc-indigo); background: rgba(75, 99, 255, .085);
  }
  html[data-theme="dark"].pc-on .cxx .cxl-p__mi { color: #A6B2FF; background: rgba(130, 145, 255, .12); }
  html.pc-on .cxx .cxl-p__m span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.pc-on .cxx .cxl-p__r { display: flex; align-items: center; gap: 4px; min-width: 0; }
  html.pc-on .cxx .cxl-ref {
    display: inline-block; max-width: 100%; padding: 3px 7px; border-radius: 6px;
    background: rgba(75, 99, 255, .085); border: 1px solid rgba(75, 99, 255, .16);
    font-family: var(--font-ledger), monospace; font-size: 11px; font-weight: 560;
    color: var(--pc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html[data-theme="dark"].pc-on .cxx .cxl-ref { background: rgba(130, 145, 255, .12); border-color: rgba(130, 145, 255, .2); }
  /* ⚠ `html[data-theme="dark"]` counts as a class (trap 8), so the dark `.cxl-ref` rule
     outranks a later `--none` modifier — the empty state needs its own dark override or
     "No reference" renders as a filled chip in dark only. */
  html.pc-on .cxx .cxl-ref--none,
  html[data-theme="dark"].pc-on .cxx .cxl-ref--none {
    background: transparent; border-color: transparent; padding-left: 0; color: var(--pc-ink-3);
    font-family: var(--font), Inter, sans-serif; font-weight: 450; font-style: italic;
  }
  html.pc-on .cxx .cxl-cp {
    flex: 0 0 auto; width: 22px; height: 22px; display: inline-grid; place-items: center;
    border: 0; border-radius: 6px; background: transparent; color: var(--pc-ink-3); cursor: pointer;
    opacity: .55; transition: opacity .14s linear, background .14s linear, color .14s linear;
  }
  html.pc-on .cxx .cxl-cp:hover { opacity: 1; background: rgba(75, 99, 255, .1); color: var(--pc-indigo); }
  html.pc-on .cxx .cxl-cp.is-done { opacity: 1; color: var(--pc-green); background: rgba(14, 122, 82, .12); }
  html.pc-on .cxx .cxl-cp i { font-size: 10.8px; }
  html.pc-on .cxx .cxl-p__a { text-align: right; white-space: nowrap; }
  html.pc-on .cxx .cxl-p__a b {
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 12.8px; font-weight: 620; letter-spacing: -.028em; color: var(--pc-ink);
  }
  html.pc-on .cxx .cxl-p__n {
    grid-column: 1 / -1; margin: 5px 0 1px; padding-left: 9px;
    border-left: 2px solid var(--pc-hair-2);
    font: 450 11.2px/1.45 var(--font), Inter, sans-serif; font-style: italic; color: var(--pc-ink-2);
  }
  html.pc-on .cxx .cxl-p--none {
    display: flex; align-items: center; gap: 8px; grid-template-columns: none;
    font: 450 11.4px/1.3 var(--font), Inter, sans-serif; font-style: italic; color: var(--pc-ink-3);
  }
  html.pc-on .cxx .cxl-p--none i { font-size: 11.5px; font-style: normal; }

  /* ⚠ MEASURED, AND THE FIRST VERSION OF THIS SUM WAS WRONG. It costed the payment row
     against the table width and forgot both the 45px ledger indent and the invoice
     block's own padding, so it claimed 189px for the date cell at 768 when the real
     figure was 104 — and "Tuesday, 01 Sept 2026" needs 148. It only surfaced once the
     fixture had payments in it to clip; with an empty payments array the audit was
     measuring an empty row and passing.

         .cxl inner      = table - 18 (right) - 63 (left, incl. the 45 indent)
         .cxl-i inner    = that - 2 (border)
         .cxl-i__p inner = that - 31 (14 right + 17 left)
     At the narrowest table the audit reaches (660 at 768) that leaves 546. The fixed
     tracks are now 122 + 120 + 92 = 334 plus three 12px gaps = 370, so the date cell
     gets 176 against the 148 it needs. At 1512 it gets 326. Re-measure this sum before
     adding a fifth column to a payment row. */

  html.pc-on .cxx .cxd-empty { padding: 56px 24px 60px; text-align: center; }
  html.pc-on .cxx .cxd-empty__i {
    display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 15px;
    background: rgba(75, 99, 255, .1); color: var(--pc-indigo); font-size: 19px; margin-bottom: 14px;
  }
  html.pc-on .cxx .cxd-empty h3 {
    margin: 0; font: 640 15.5px/1.2 var(--font-display), Inter, sans-serif;
    letter-spacing: -.02em; color: var(--pc-ink);
  }
  html.pc-on .cxx .cxd-empty p {
    margin: 7px auto 0; max-width: 340px;
    font: 450 12.8px/1.45 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }

  /* ================================================== 4 · THE RAIL

     ⚠ DELIBERATELY NOT STICKY. Trap 2: a sticky element taller than the viewport can
     never be scrolled to the end of, and this one is ~900px populated (the old drawer
     measured 940 and scrolled internally). Measure it POPULATED before ever making it
     sticky, and use a ResizeObserver rather than a min-height media query. */
  html.pc-on .cxx .cxrail { min-width: 0; }
  html.pc-on .cxx .cxr {
    border-radius: var(--pc-r); padding: 20px 20px 22px;
    background: var(--pc-card-solid); border: 1px solid var(--pc-hair); box-shadow: var(--pc-lift);
  }

  html.pc-on .cxx .cxr--empty { text-align: center; padding: 46px 24px 50px; }
  html.pc-on .cxx .cxr-empty__i {
    display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 16px;
    background: rgba(75, 99, 255, .1); color: var(--pc-indigo); font-size: 20px; margin-bottom: 14px;
  }
  html[data-theme="dark"].pc-on .cxx .cxr-empty__i { background: rgba(130, 145, 255, .13); color: #A6B2FF; }
  html.pc-on .cxx .cxr--empty h3 {
    margin: 0; font: 640 14.8px/1.2 var(--font-display), Inter, sans-serif;
    letter-spacing: -.02em; color: var(--pc-ink);
  }
  html.pc-on .cxx .cxr--empty p {
    margin: 8px 0 0; font: 450 12.2px/1.5 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }

  html.pc-on .cxx .cxr-top { display: flex; align-items: center; gap: 13px; }
  html.pc-on .cxx .cxr-top__id { min-width: 0; }
  html.pc-on .cxx .cxr-name {
    font: 660 16.5px/1.2 var(--font-display), Inter, sans-serif; letter-spacing: -.026em;
    color: var(--pc-ink); overflow-wrap: anywhere;
  }
  html.pc-on .cxx .cxr-loc { margin-top: 4px; font: 450 11.8px/1.3 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }
  html.pc-on .cxx .cxr-vat {
    margin-top: 3px; font-family: var(--font-ledger), monospace; font-size: 10.8px;
    font-weight: 450; color: var(--pc-ink-3);
  }

  html.pc-on .cxx .cxr-acts { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 15px; }
  html.pc-on .cxx .cxr-act {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 36px; padding: 0 14px; border-radius: var(--pc-r-sm); cursor: pointer;
    border: 1px solid var(--pc-hair-2); background: transparent; color: var(--pc-ink-2);
    font: 580 12.6px/1 var(--font), Inter, sans-serif;
    transition: background .16s var(--pc-ease), color .16s var(--pc-ease), border-color .16s var(--pc-ease);
  }
  html.pc-on .cxx .cxr-act:hover { background: rgba(75, 99, 255, .08); color: var(--pc-indigo); border-color: transparent; }
  html.pc-on .cxx .cxr-act--p {
    border: 0; background: var(--pc-grad); color: #fff;
    box-shadow: 0 10px 22px -12px rgba(61, 79, 224, .9), inset 0 1px 0 rgba(255, 255, 255, .28);
  }
  html.pc-on .cxx .cxr-act--p:hover { color: #fff; background: var(--pc-grad); }
  html.pc-on .cxx .cxr-act i { font-size: 12.5px; }

  /* the panel's own headline money — the second and last gold figure on the page */
  html.pc-on .cxx .cxr-ltv {
    margin-top: 18px; padding: 15px 15px 10px; border-radius: 15px;
    border: 1px solid var(--pc-hair); background: rgba(20, 28, 60, .022);
  }
  html[data-theme="dark"].pc-on .cxx .cxr-ltv { background: rgba(255, 255, 255, .025); }
  html.pc-on .cxx .cxr-ltv__cap {
    display: block; font: 620 10.2px/1 var(--font), Inter, sans-serif;
    letter-spacing: .085em; text-transform: uppercase; color: var(--pc-ink-3);
  }
  html.pc-on .cxx .cxr-ltv__v {
    margin-top: 8px;
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 25px; font-weight: 640; letter-spacing: -.032em; line-height: 1;
    background: linear-gradient(135deg, var(--pc-gold-a), var(--pc-gold-b));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  /* ltvChart() draws with stroke="var(--accent)"; on desktop that must read indigo. */
  html.pc-on .cxx .cxr-ltv .dwr-ltv__svg { display: block; margin-top: 10px; height: 52px; --accent: var(--pc-indigo); }
  html.pc-on .cxx .cxr-ltv .dwr-ltv__empty {
    margin-top: 10px; font: 450 11.6px/1.4 var(--font), Inter, sans-serif;
    font-style: italic; color: var(--pc-ink-3);
  }

  html.pc-on .cxx .cxr-figs {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px;
    border: 1px solid var(--pc-hair); border-radius: 15px; overflow: hidden;
  }
  /* ⚠ MEASURED. A 344px rail less 2x20 card padding is 304, less two 1px dividers is
     302, so a third is 100.6. At 14px "£52,300.00" measures 80 and the cell offered 75 —
     the paid and outstanding figures both ellipsised on a customer with a six-figure
     history. At 13px the figure is 74 and the cell offers 80. Do not put a fourth
     figure in this strip without re-measuring. */
  html.pc-on .cxx .cxr-fig { min-width: 0; padding: 12px 10px 13px; border-left: 1px solid var(--pc-hair); }
  html.pc-on .cxx .cxr-fig:first-child { border-left: 0; }
  html.pc-on .cxx .cxr-fig b {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 13px; font-weight: 620; letter-spacing: -.03em; color: var(--pc-ink);
  }
  html.pc-on .cxx .cxr-fig b.is-paid { color: var(--pc-green); }
  html.pc-on .cxx .cxr-fig b.is-due  { color: var(--pc-amber); }
  html.pc-on .cxx .cxr-fig b.is-late { color: var(--pc-coral); }
  html.pc-on .cxx .cxr-fig em {
    display: block; margin-top: 4px; font-style: normal;
    font: 450 10.8px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }

  html.pc-on .cxx .cxr-flag {
    display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 10px 12px;
    border-radius: 12px; background: rgba(197, 39, 30, .08);
    font: 450 11.8px/1.45 var(--font), Inter, sans-serif; color: var(--pc-coral);
  }
  html.pc-on .cxx .cxr-flag b { font-weight: 640; }
  html.pc-on .cxx .cxr-flag i { font-size: 12.5px; margin-top: 1px; }
  html.pc-on .cxx .cxr-flag--quiet { background: rgba(182, 121, 18, .1); color: var(--pc-amber); }

  html.pc-on .cxx .cxr-sec {
    display: flex; align-items: baseline; gap: 8px; margin: 20px 0 8px;
    font: 620 10.2px/1 var(--font), Inter, sans-serif; letter-spacing: .085em;
    text-transform: uppercase; color: var(--pc-ink-3);
  }
  html.pc-on .cxx .cxr-sec__n {
    margin-left: auto; padding: 2px 7px; border-radius: 6px; text-transform: none; letter-spacing: 0;
    background: rgba(75, 99, 255, .1); color: var(--pc-indigo); font: 600 10px/1.5 var(--font), Inter, sans-serif;
  }
  html[data-theme="dark"].pc-on .cxx .cxr-sec__n { background: rgba(130, 145, 255, .14); color: #A6B2FF; }

  html.pc-on .cxx .cxr-row {
    display: flex; align-items: center; gap: 10px; padding: 9px 0;
    border-bottom: 1px solid var(--pc-hair); text-decoration: none;
    font: 450 12.2px/1.35 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
  }
  html.pc-on .cxx .cxr-row:last-of-type { border-bottom: 0; }
  html.pc-on .cxx .cxr-row i { flex: 0 0 auto; width: 15px; font-size: 12.5px; color: var(--pc-ink-3); }
  html.pc-on .cxx .cxr-row span { min-width: 0; overflow-wrap: anywhere; }
  html.pc-on .cxx a.cxr-row:hover { color: var(--pc-indigo); }
  html[data-theme="dark"].pc-on .cxx a.cxr-row:hover { color: #A6B2FF; }
  /* indigo, matching the row bell — a reminder switched on is a setting, not a status */
  html.pc-on .cxx .cxr-row--on i { color: var(--pc-indigo); }
  html[data-theme="dark"].pc-on .cxx .cxr-row--on i { color: #A6B2FF; }

  html.pc-on .cxx .cxr-fs { margin: 0; }
  html.pc-on .cxx .cxr-f {
    display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 10px;
    padding: 7px 0; border-bottom: 1px solid var(--pc-hair);
  }
  html.pc-on .cxx .cxr-f:last-child { border-bottom: 0; }
  html.pc-on .cxx .cxr-f dt {
    font: 500 11.4px/1.35 var(--font), Inter, sans-serif; color: var(--pc-ink-3); font-weight: 500;
  }
  html.pc-on .cxx .cxr-f dd {
    margin: 0; min-width: 0; overflow-wrap: anywhere;
    font: 500 11.9px/1.35 var(--font), Inter, sans-serif; color: var(--pc-ink);
  }
  html.pc-on .cxx .cxr-f--mono dd {
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 11.4px; font-weight: 450;
  }
  html.pc-on .cxx .cxr-f dd a { color: var(--pc-ink); text-decoration: none; }
  html.pc-on .cxx .cxr-f dd a:hover { color: var(--pc-indigo); text-decoration: underline; text-underline-offset: 3px; }
  html[data-theme="dark"].pc-on .cxx .cxr-f dd a:hover { color: #A6B2FF; }
  /* an empty field is shown, not dropped — a blank postcode is information */
  html.pc-on .cxx .cxr-f__nil { color: var(--pc-ink-3); font-style: italic; font-weight: 450; }
  html.pc-on .cxx .cxr-on { display: inline-flex; align-items: center; gap: 6px; color: var(--pc-ink); }
  html.pc-on .cxx .cxr-on i { font-size: 10.5px; color: var(--pc-indigo); }
  html[data-theme="dark"].pc-on .cxx .cxr-on i { color: #A6B2FF; }

  html.pc-on .cxx .cxr-addr {
    padding: 10px 12px; border-radius: 12px; border: 1px solid var(--pc-hair);
    font: 450 11.9px/1.55 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
  }
  html.pc-on .cxx .cxr-hint {
    display: flex; align-items: flex-start; gap: 8px; margin-top: 18px; padding-top: 14px;
    border-top: 1px solid var(--pc-hair);
    font: 450 11.4px/1.45 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  html.pc-on .cxx .cxr-hint i { font-size: 12px; margin-top: 1px; }

  html.pc-on .cxx .cxr-note {
    padding: 10px 12px; border-radius: 12px; border-left: 2px solid var(--pc-hair-2);
    background: rgba(20, 28, 60, .022);
    font: 450 11.9px/1.5 var(--font), Inter, sans-serif; font-style: italic; color: var(--pc-ink-2);
  }
  html[data-theme="dark"].pc-on .cxx .cxr-note { background: rgba(255, 255, 255, .025); }

  html.pc-on .cxx .cxr-inv {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px;
    padding: 10px 0; border-bottom: 1px solid var(--pc-hair); text-decoration: none;
  }
  html.pc-on .cxx .cxr-inv:last-child { border-bottom: 0; }
  html.pc-on .cxx .cxr-inv__l { min-width: 0; }
  html.pc-on .cxx .cxr-inv__l b {
    display: block; font-family: var(--font-ledger), monospace; font-size: 12.4px; font-weight: 620;
    letter-spacing: -.016em; color: var(--pc-indigo);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html[data-theme="dark"].pc-on .cxx .cxr-inv__l b { color: #A6B2FF; }
  html.pc-on .cxx .cxr-inv:hover .cxr-inv__l b { text-decoration: underline; text-underline-offset: 3px; }
  html.pc-on .cxx .cxr-inv__l em {
    display: block; margin-top: 3px; font-style: normal;
    font: 450 10.8px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  html.pc-on .cxx .cxr-inv__r { text-align: right; white-space: nowrap; }
  html.pc-on .cxx .cxr-inv__r b {
    display: block; font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 12.8px; font-weight: 620; letter-spacing: -.028em; color: var(--pc-ink);
  }
  html.pc-on .cxx .cxr-inv__r em { display: block; margin-top: 4px; }
  /* ⚠ NOT CORAL. This line appears against any invoice with a balance, including one
     that is not due for three weeks; coral would say "late" about an invoice that is
     merely unpaid, which is the exact mistake the old screen made on every row. The
     badge beside it already carries the real status. */
  html.pc-on .cxx .cxr-inv__o {
    grid-column: 1 / -1; font: 450 10.8px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  html.pc-on .cxx .cxr-none {
    padding: 12px 0 4px; font: 450 11.8px/1.4 var(--font), Inter, sans-serif;
    font-style: italic; color: var(--pc-ink-3);
  }

  @media (prefers-reduced-motion: reduce) {
    html.pc-on .cxx .cxd-r::before,
    html.pc-on .cxx .cxr-act,
    html.pc-on .cxx .cxdir__clr { transition: none; }
  }
}

/* =====================================================================================
 *  DESKTOP RECURRING BILLING — "THE BILLING RUN"  ·  PC Native 2026  (v3.41.2)
 *  -------------------------------------------------------------------------------
 *  Replaces a screen that was not a widened phone but literally the phone: one 720px
 *  column fixed mid-page, leaving 512px empty at 1512 and 920px at 1920 and getting no
 *  better with more room. `cardHTML()` also printed contractTotal() — the amount PER
 *  CHARGE — with no unit, so a £22,080 YEARLY plan sat in identical type above a £384
 *  MONTHLY one, and three of twelve plans were not monthly with nothing saying so.
 *
 *  A recurring book is a SCHEDULE, not a list. Auto-bill fires on the 25th and either
 *  produces invoices or quietly does not, so this screen exists to make that run
 *  trustworthy: what bills, when, for how much, who gets told, and what would stop it.
 *
 *  ⚠⚠ THIS SCREEN RUNS WITH `html.dm-on` SET, ON DESKTOP, ON PURPOSE. Every sheet it
 *  opens (detail, actions, pause, price change, pre-flight, form) is `.rc3-*`/`.rcx-*`
 *  phone markup whose ~52 rules are scoped `html.dm-on`, and those sheets are SHARED
 *  WITH THE PHONE. Strip the class and they render as bare HTML — the v3.20.0 bug.
 *  So the phone's classnames are LIVE alongside these. Everything here uses the
 *  `rbx / rbbd / rbtl / rbdir / rbd / rbr / rbfx` namespace, and the first draft's
 *  `.rcx` wrapper collided with the action sheet (`position: fixed; inset: 0;
 *  z-index: 3200`) and turned the whole page into an overlay under the sidebar.
 *  GREP style.css BEFORE INVENTING A CLASSNAME IN THIS BLOCK.
 *
 *  Load-bearing, same three as Customers: `.rbdir` must not carry overflow:hidden or
 *  backdrop-filter (sticky column head); the flexible track is minmax(0, 1fr); and there
 *  is no row hover — `.is-sel` is selection, and the only hover band is on the
 *  disclosure headers, which are controls.
 *
 *  Everything below is inside @media (min-width: 768px) and prefixed html.pc-on, so
 *  tools/check-pc-scope.js can prove none of it reaches a phone.
 * ================================================================================== */

@media (min-width: 768px) {

  /* ⚠ `.pcx { max-width: 1480px }` is dead because `.view-root` caps at 1200 (~446),
     exactly as for `.pvx` and `.cxx`. Lifted for this page too, so the three rebuilt
     desktop sections agree with each other. (The global rollout is still the §6 item.) */
  /* v3.46.0 — RETIRED. One scoped rule covers every .pcx page now (see the end of
     this file). */

  /* The scrollport fix is GLOBAL as of v3.41.1 — `.app-main` is `overflow-y: visible`
     app-wide, so this section needs no `:has()` patch for its sticky column head. */

  html.pc-on .rbx { --rbd-pad: 18px; --rbd-gap: 12px; }

  /* ================================================== 1 · BOARD

     Two halves, one object: what the book is worth on the left, what the NEXT RUN will
     actually do on the right. The right half is the point of the screen — auto-bill
     fires on the 25th whether or not anything is wrong, so the count that matters is
     "will bill" against "blocked", not "how many plans exist". */
  html.pc-on .rbx .rbbd {
    margin-bottom: 14px; border-radius: var(--pc-r); overflow: hidden;
    background: var(--pc-card); border: 1px solid var(--pc-hair); box-shadow: var(--pc-lift);
    -webkit-backdrop-filter: blur(20px) saturate(175%); backdrop-filter: blur(20px) saturate(175%);
  }
  html.pc-on .rbx .rbbd__body {
    display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 30px; padding: 22px 24px 20px; align-items: start;
  }
  /* the run panel needs 3 figures at ~130 plus the blocked line; below this it stacks */
  @media (max-width: 1279px) {
    html.pc-on .rbx .rbbd__body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  }

  html.pc-on .rbx .rbbd__cap {
    display: block; font: 620 10.4px/1 var(--font), Inter, sans-serif;
    letter-spacing: .085em; text-transform: uppercase; color: var(--pc-ink-3);
  }
  /* GOLD IS HEADLINE MONEY AND ONLY THAT (§4.11.3). This figure and the rail's charge
     are the only gold on the page; the run total is ink, because it is a projection. */
  html.pc-on .rbx .rbbd__v {
    margin-top: 9px; display: flex; align-items: baseline; gap: 4px;
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 36px; font-weight: 640; letter-spacing: -.036em; line-height: 1;
    background: linear-gradient(135deg, var(--pc-gold-a), var(--pc-gold-b));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  html.pc-on .rbx .rbbd__per { font-size: 16px; font-weight: 560; letter-spacing: -.02em; }
  html.pc-on .rbx .rbbd__sub {
    margin-top: 10px; font: 450 12.4px/1.45 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  html.pc-on .rbx .rbbd__alt {
    display: flex; align-items: flex-start; gap: 7px; margin-top: 11px; padding-top: 10px;
    border-top: 1px solid var(--pc-hair);
    font: 450 11.8px/1.4 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  html.pc-on .rbx .rbbd__alt i { font-size: 12.5px; margin-top: 1px; }

  html.pc-on .rbx .rbbd__runhead {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 22px;
  }
  html.pc-on .rbx .rbbd__auto { display: flex; align-items: center; gap: 9px; }
  html.pc-on .rbx .rbbd__auto-t {
    font: 545 11.6px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3); white-space: nowrap;
  }
  html.pc-on .rbx .rbbd__auto.is-on .rbbd__auto-t { color: var(--pc-ink-2); }
  /* ⚠ INDIGO, NOT GREEN. Green-on-a-switch has shipped twice in this project (Auto-bill
     v3.20.0, every Email-templates switch v3.23.0). A switch is a CONTROL. */
  html.pc-on .rbx .rbbd__sw {
    position: relative; width: 38px; height: 22px; border-radius: 11px; border: 0; padding: 0;
    background: rgba(20, 28, 60, .16); cursor: pointer; flex: 0 0 auto;
    transition: background .18s var(--pc-ease);
  }
  html[data-theme="dark"].pc-on .rbx .rbbd__sw { background: rgba(255, 255, 255, .18); }
  html.pc-on .rbx .rbbd__sw::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 48, .3);
    transition: transform .18s var(--pc-ease);
  }
  html.pc-on .rbx .rbbd__auto.is-on .rbbd__sw { background: var(--pc-indigo); }
  html.pc-on .rbx .rbbd__auto.is-on .rbbd__sw::after { transform: translateX(16px); }

  html.pc-on .rbx .rbbd__run {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px;
    border: 1px solid var(--pc-hair); border-radius: 15px; overflow: hidden;
  }
  html.pc-on .rbx .rbbd__runfig { min-width: 0; padding: 13px 14px 14px; border-left: 1px solid var(--pc-hair); }
  html.pc-on .rbx .rbbd__runfig:first-child { border-left: 0; }
  html.pc-on .rbx .rbbd__runfig b {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 22px; font-weight: 640; letter-spacing: -.034em; line-height: 1; color: var(--pc-ink);
  }
  html.pc-on .rbx .rbbd__runfig--v b { font-size: 22px; }
  html.pc-on .rbx .rbbd__runfig b.is-bad { color: var(--pc-coral); }
  html.pc-on .rbx .rbbd__runfig em {
    display: block; margin-top: 6px; font-style: normal; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    font: 450 11.4px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }

  html.pc-on .rbx .rbbd__block {
    display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px;
    padding: 11px 13px; border-radius: 13px; cursor: pointer; text-align: left;
    border: 1px solid rgba(197, 39, 30, .22); background: rgba(197, 39, 30, .08);
    font: 450 12px/1.4 var(--font), Inter, sans-serif; color: var(--pc-coral);
    transition: background .16s var(--pc-ease);
  }
  html.pc-on .rbx .rbbd__block:hover { background: rgba(197, 39, 30, .13); }
  html.pc-on .rbx .rbbd__block span { min-width: 0; }
  html.pc-on .rbx .rbbd__block b { display: block; font-weight: 640; margin-bottom: 2px; }
  html.pc-on .rbx .rbbd__block .go { margin-left: auto; font-size: 12px; opacity: .7; }
  html.pc-on .rbx .rbbd__clear {
    display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 11px 13px;
    border-radius: 13px; border: 1px solid var(--pc-hair);
    font: 450 12px/1.4 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  /* green here is legitimate: it is a STATUS — everything due is billable */
  html.pc-on .rbx .rbbd__clear i { color: var(--pc-green); font-size: 13px; }

  /* ⚠ auto-fit, NOT repeat(5, 1fr). Five fixed columns put "Last billed / Aug · 5" in a
     32px cell at 1024 and clipped "Due this month" and "Need attention" at 768 —
     measured. These labels are longer than the Customers board's, so the strip has to be
     allowed to wrap rather than divide the width five ways whatever it is. */
  /* ================================================== 1b · NEEDS FIXING
     A to-do list, not a count. Each entry names the customers affected and says what
     the consequence is, and clicking it isolates exactly those plans in the list. */
  html.pc-on .rbx .rbfx {
    margin: 0 24px 18px; border-radius: 15px; border: 1px solid var(--pc-hair);
    background: rgba(20, 28, 60, .02); overflow: hidden;
  }
  html[data-theme="dark"].pc-on .rbx .rbfx { background: rgba(255, 255, 255, .022); }
  html.pc-on .rbx .rbfx__h {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    padding: 10px 14px; border: 0; background: transparent; cursor: pointer;
    font: 620 10.4px/1 var(--font), Inter, sans-serif; letter-spacing: .085em;
    text-transform: uppercase; color: var(--pc-ink-3);
    transition: background .15s var(--pc-ease);
  }
  html.pc-on .rbx .rbfx__h:hover { background: rgba(75, 99, 255, .05); }
  html.pc-on .rbx .rbfx__h:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(75, 99, 255, .5); }
  html.pc-on .rbx .rbfx__x { font-size: 10px; transition: transform .26s var(--pc-ease); }
  html.pc-on .rbx .rbfx.is-open .rbfx__x { transform: rotate(90deg); }
  /* shut, the header carries the whole story on one line */
  html.pc-on .rbx .rbfx__sum {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-transform: none; letter-spacing: 0;
    font: 500 11.4px/1.3 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
  }
  html.pc-on .rbx .rbfx.is-open .rbfx__sum { display: none; }
  html.pc-on .rbx .rbfx__body {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .26s var(--pc-ease);
  }
  html.pc-on .rbx .rbfx.is-open .rbfx__body { grid-template-rows: 1fr; }
  html.pc-on .rbx .rbfx__inner {
    overflow: hidden; min-height: 0;
    visibility: hidden; transition: visibility 0s linear .26s;
  }
  html.pc-on .rbx .rbfx.is-open .rbfx__inner { visibility: visible; transition-delay: 0s; }
  html.pc-on .rbx .rbfx.is-open .rbfx__inner { border-top: 1px solid var(--pc-hair); }
  html.pc-on .rbx .rbfx__h i { font-size: 12px; }
  html.pc-on .rbx .rbfx__n {
    margin-left: auto; flex: 0 0 auto; padding: 2px 8px; border-radius: 6px; letter-spacing: 0; text-transform: none;
    background: rgba(197, 39, 30, .1); color: var(--pc-coral);
    font: 620 10.6px/1.5 var(--font), Inter, sans-serif;
  }
  html.pc-on .rbx .rbfx__i {
    display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left;
    padding: 11px 14px; border: 0; border-top: 1px solid var(--pc-hair);
    background: transparent; cursor: pointer;
    transition: background .16s var(--pc-ease);
  }
  html.pc-on .rbx .rbfx__i:first-of-type { border-top: 0; }
  html.pc-on .rbx .rbfx__i:hover { background: rgba(75, 99, 255, .05); }
  html.pc-on .rbx .rbfx__i > i:first-child { font-size: 13px; margin-top: 1px; flex: 0 0 auto; }
  html.pc-on .rbx .rbfx__i--bad > i:first-child { color: var(--pc-coral); }
  html.pc-on .rbx .rbfx__i--unknown > i:first-child { color: var(--pc-amber); }
  html.pc-on .rbx .rbfx__b { min-width: 0; flex: 1; }
  html.pc-on .rbx .rbfx__b b {
    display: block; font: 620 12.4px/1.3 var(--font), Inter, sans-serif; color: var(--pc-ink);
  }
  html.pc-on .rbx .rbfx__i--bad .rbfx__b b { color: var(--pc-coral); }
  html.pc-on .rbx .rbfx__i--unknown .rbfx__b b { color: var(--pc-amber); }
  html.pc-on .rbx .rbfx__b em {
    display: block; margin-top: 3px; font-style: normal;
    font: 500 11.4px/1.35 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html.pc-on .rbx .rbfx__f {
    display: block; margin-top: 3px;
    font: 450 11px/1.35 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  html.pc-on .rbx .rbfx__i .go { margin-top: 2px; font-size: 12px; color: var(--pc-ink-3); opacity: .6; flex: 0 0 auto; }

  html.pc-on .rbx .rbbd__foot {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(162px, 1fr));
    border-top: 1px solid var(--pc-hair); background: rgba(20, 28, 60, .015);
  }
  html[data-theme="dark"].pc-on .rbx .rbbd__foot { background: rgba(255, 255, 255, .015); }
  html.pc-on .rbx .rbbd__fc {
    min-width: 0; padding: 12px 18px; border-left: 1px solid var(--pc-hair);
    display: flex; align-items: baseline; gap: 8px;
  }
  html.pc-on .rbx .rbbd__fc:first-child { border-left: 0; }
  /* below this the value and its label stack, so a cell needs only the width of the
     longer of the two (~82px) instead of the sum (~140px) */
  @media (max-width: 1279px) {
    html.pc-on .rbx .rbbd__fc { flex-direction: column; align-items: flex-start; gap: 5px; }
  }
  html.pc-on .rbx .rbbd__fc b {
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 15px; font-weight: 620; letter-spacing: -.03em; color: var(--pc-ink); white-space: nowrap;
  }
  html.pc-on .rbx .rbbd__fc b.rbbd__fc--due { color: var(--pc-amber); }
  html.pc-on .rbx .rbbd__fc em {
    font-style: normal; font: 500 11.4px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* ================================================== 2 · THE MONTH

     A list sorted by date gives you the order. It does not tell you that most of the
     money lands in the last week, or where the auto-bill line falls relative to what is
     already due. The bars are per-day totals, the line is the running total, and the two
     verticals are today and the run day. */
  html.pc-on .rbx .rbtl {
    margin-bottom: 18px; padding: 14px 20px 8px; border-radius: var(--pc-r);
    background: var(--pc-card-solid); border: 1px solid var(--pc-hair); box-shadow: var(--pc-lift);
  }
  html.pc-on .rbx .rbtl__head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  }
  html.pc-on .rbx .rbtl__cap {
    display: flex; align-items: center; gap: 7px;
    font: 620 10.4px/1 var(--font), Inter, sans-serif; letter-spacing: .085em;
    text-transform: uppercase; color: var(--pc-ink-3);
  }
  html.pc-on .rbx .rbtl__cap i { font-size: 11.5px; }
  html.pc-on .rbx .rbtl__legend {
    display: flex; align-items: center; gap: 7px;
    font: 450 11px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  html.pc-on .rbx .rbtl__k { width: 9px; height: 9px; border-radius: 2px; margin-left: 8px; }
  html.pc-on .rbx .rbtl__k--bar { background: var(--pc-indigo); }
  html.pc-on .rbx .rbtl__k--cum { background: var(--pc-gold-a); border-radius: 1px; height: 3px; }
  html.pc-on .rbx .rbtl__k--run { background: var(--pc-amber); width: 3px; height: 11px; border-radius: 1px; }

  /* ⚠ preserveAspectRatio="none" — the viewBox is 1000 wide and the card is not, so the
     day axis must stretch with the card or the bars drift off their labels. Stroke
     widths are therefore given in vector units and will scale horizontally; that is
     intentional for the fill, and the line uses vector-effect to stay crisp. */
  html.pc-on .rbx .rbtl__svg { display: block; width: 100%; height: 96px; margin-top: 12px; }
  html.pc-on .rbx .rbtl__area { fill: rgba(182, 121, 18, .10); stroke: none; }
  html[data-theme="dark"].pc-on .rbx .rbtl__area { fill: rgba(224, 168, 74, .12); }
  html.pc-on .rbx .rbtl__line {
    fill: none; stroke: var(--pc-gold-a); stroke-width: 2; vector-effect: non-scaling-stroke;
    stroke-linejoin: round; stroke-linecap: round;
  }
  html.pc-on .rbx .rbtl__bar { fill: var(--pc-indigo); opacity: .78; }
  html.pc-on .rbx .rbtl__bar--bad { fill: var(--pc-coral); opacity: 1; }
  html.pc-on .rbx .rbtl__now {
    stroke: var(--pc-ink-3); stroke-width: 1; vector-effect: non-scaling-stroke;
    stroke-dasharray: 3 3; opacity: .55;
  }
  html.pc-on .rbx .rbtl__run {
    stroke: var(--pc-amber); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: .85;
  }
  html.pc-on .rbx .rbtl__axis { position: relative; height: 26px; }
  html.pc-on .rbx .rbtl__t {
    position: absolute; top: 6px; transform: translateX(-50%); white-space: nowrap;
    font: 500 10.6px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  html.pc-on .rbx .rbtl__t.is-now { color: var(--pc-ink-2); font-weight: 620; }
  html.pc-on .rbx .rbtl__t.is-run { color: var(--pc-amber); font-weight: 620; }
  html.pc-on .rbx .rbtl__none {
    display: flex; align-items: center; gap: 9px; padding: 4px 0 8px;
    font: 450 12.2px/1.4 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  html.pc-on .rbx .rbtl__none i { font-size: 13px; color: var(--pc-green); }

  /* ================================================== 3 · TABLE | RAIL

     Same arithmetic as Customers (v3.41.0), and the same corrected constants: the
     sidebar is 232 (--sidebar-w) and `.app-main` adds 24px a side.
         content(W) = W - 232 - 48 - 60 ;  table(W) = content - 344 - 18 = W - 702
     Fixed tracks here are 96 + 132 + 128 + 26 = 382, plus four 12px gaps (48) and 2x18
     row padding (36) = 466, so the plan column gets 344 at 1512 and 312 at 1480.
     Two columns from 1480, NOT 1512 — a classic scrollbar takes 15px off the owner's
     1512 layout viewport and a threshold on the exact width would drop it to one column
     the moment the page scrolled. */
  html.pc-on .rbx .rbgrid {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start;
  }
  @media (min-width: 1480px) {
    html.pc-on .rbx .rbgrid { grid-template-columns: minmax(0, 1fr) 344px; }

    /* ⚠ THE RAIL IS STICKY *AND* SELF-SCROLLING, AND THE SECOND HALF IS WHY THE FIRST IS
       SAFE. Trap 2 says never make a rail sticky, because one taller than the viewport
       can never be scrolled to its end. That is true of a sticky element with its natural
       height — but capping it at the viewport and giving it its own overflow removes the
       condition entirely: it is never taller than the screen, so there is nothing to
       strand.

       MEASURED, on a workspace with ONE plan (the owner's, 09 Sep 2026): the table came
       out 208px and the rail 1118px, so scrolling down to read the record left **911px of
       empty page** beside it and the screen looked broken. Sticky + internal scroll fixes
       both ends of that: the record stays in view while you scan the list, and the page
       height is set by the list rather than by the tallest record.

       `align-items: start` on .rbgrid is REQUIRED — a stretched grid item is already the
       height of its row, so sticky would have nothing to move within. */
    /* ⚠ AND THE LIST CARD STRETCHES TO MEET IT. The grid row is as tall as its tallest
       child, which is now the capped rail — so with a short list the table card ended
       after 208px and the remaining ~700px showed raw page background beside a pinned
       rail, which is what made the screen look empty. Stretching the card turns that into
       list surface, which is what a list panel with nothing more in it should look like. */
    html.pc-on .rbx .rbdir { align-self: stretch; }

    html.pc-on .rbx .rbrail {
      position: sticky; top: 60px;
      max-height: calc(100vh - 60px - 22px);
      overflow-y: auto; overscroll-behavior: contain;
      /* the scrollbar sits inside the card's rounded edge, so give it somewhere to live */
      border-radius: var(--pc-r);
    }
    html.pc-on .rbx .rbrail::-webkit-scrollbar { width: 10px; }
    html.pc-on .rbx .rbrail::-webkit-scrollbar-track { background: transparent; }
    html.pc-on .rbx .rbrail::-webkit-scrollbar-thumb {
      background: rgba(20, 28, 60, .18); border-radius: 6px;
      border: 3px solid transparent; background-clip: content-box;
    }
    html[data-theme="dark"].pc-on .rbx .rbrail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); background-clip: content-box; }
  }

  /* ⚠ no overflow:hidden, no backdrop-filter — either makes this a containing block and
     the sticky column head pins to the CARD instead of the viewport. */
  html.pc-on .rbx .rbdir {
    position: relative; overflow: visible; border-radius: var(--pc-r);
    background: var(--pc-card-solid); border: 1px solid var(--pc-hair); box-shadow: var(--pc-lift);
    /* the flexible track is minmax(0, 1fr) — a hard minimum would overflow onto the
       LAST column and push the chevron out of the card */
    /* ⚠ RE-MEASURED FOR THE STATUS COLUMN (v3.41.2). Fixed tracks are
       92 + 232 + 132 + 26 = 482, plus four 12px gaps (48) and 2x18 row padding (36) =
       566, so the plan column gets 244 at 810 (1512, two-column) and 374 at 1180.
       The "Next run" column is GONE — rows are grouped under run-date headers instead,
       which is what buys the plan name back the width the Status column needed. Status
       is the widest fixed track because it carries a badge over a sentence naming the
       actual recipient. */
    --rbd-cols: minmax(0, 1fr) 92px 232px 132px 26px;
  }
  html.pc-on .rbx .rbdir__bar {
    display: grid; grid-template-columns: minmax(140px, 224px) minmax(0, 1fr) auto;
    align-items: center; gap: 8px 10px; padding: 11px 14px;
    border-bottom: 1px solid var(--pc-hair); border-radius: var(--pc-r) var(--pc-r) 0 0;
  }
  html.pc-on .rbx .rbdir__q { max-width: 224px; min-width: 0; margin: 0; }
  html.pc-on .rbx .rbdir__q .topbar__search-input { height: 31px; border-radius: 9px; font-size: 12.5px; }
  html.pc-on .rbx .rbdir__q .topbar__search-icon { font-size: 12.5px; }
  html.pc-on .rbx .rbdir__f { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
  /* ⚠ SCOPED TO `select.rc-f`. HaaltdSelect copies the select's className onto its own
     button, so an unqualified `.rc-f` rule also hits the button and the 26px reserved
     for the native caret lands beside the component's own caret. */
  html.pc-on .rbx select.rc-f {
    height: 30px; padding: 0 26px 0 9px; border-radius: 8px; width: auto; min-width: 0;
    border: 1px solid transparent; background-color: transparent; box-shadow: none;
    font: 545 12.2px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
  }
  html.pc-on .rbx .rbdir__n {
    justify-self: end; white-space: nowrap;
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 12px; font-weight: 560; color: var(--pc-ink-3);
  }

  html.pc-on .rbx .rbdir__cols {
    position: sticky; top: 60px; z-index: 4;
    display: grid; grid-template-columns: var(--rbd-cols); column-gap: var(--rbd-gap);
    align-items: center; height: 37px; padding: 0 var(--rbd-pad);
    background: var(--pc-card-solid); border-bottom: 1px solid var(--pc-hair);
    font: 620 10.2px/1 var(--font), Inter, sans-serif; letter-spacing: .085em;
    text-transform: uppercase; color: var(--pc-ink-3);
  }
  html.pc-on .rbx .rbdir__cols .rbd-c-a, html.pc-on .rbx .rbdir__cols .rbd-c-n { text-align: right; }

  /* NO ROW HOVER (standing v3.38.0 decision). `.is-sel` is a selection state — this row
     is loaded in the rail — which is information, not pointer noise. */
  html.pc-on .rbx .rbd-r {
    position: relative; display: grid; grid-template-columns: var(--rbd-cols);
    column-gap: var(--rbd-gap); align-items: center;
    padding: 11px var(--rbd-pad); border-bottom: 1px solid var(--pc-hair);
    cursor: pointer; outline: none;
  }
  html.pc-on .rbx .rbd-r:last-child { border-bottom: 0; border-radius: 0 0 var(--pc-r) var(--pc-r); }
  html.pc-on .rbx .rbd-r::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--pc-indigo); opacity: 0; transition: opacity .16s var(--pc-ease);
  }
  html.pc-on .rbx .rbd-r.is-sel { background: rgba(75, 99, 255, .055); }
  html[data-theme="dark"].pc-on .rbx .rbd-r.is-sel { background: rgba(130, 145, 255, .085); }
  html.pc-on .rbx .rbd-r.is-sel::before { opacity: 1; }
  html.pc-on .rbx .rbd-r:focus-visible { box-shadow: inset 0 0 0 2px rgba(75, 99, 255, .5); }
  html.pc-on .rbx .rbd-r--off .rbd-r__p, html.pc-on .rbx .rbd-r--off .rbd-r__a { opacity: .62; }

  html.pc-on .rbx .rbd-r__p { display: flex; align-items: center; gap: 11px; min-width: 0; }
  html.pc-on .rbx .rbd-r__ic {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 11px; display: inline-grid;
    place-items: center; font-size: 14px;
    background: rgba(75, 99, 255, .09); color: var(--pc-indigo);
  }
  html[data-theme="dark"].pc-on .rbx .rbd-r__ic { background: rgba(130, 145, 255, .13); color: #A6B2FF; }
  /* colour is STATUS: amber for a housekeeping flag, coral for one that stops the run */
  html.pc-on .rbx .rbd-r__ic.is-warn,
  html[data-theme="dark"].pc-on .rbx .rbd-r__ic.is-warn { background: rgba(182, 121, 18, .13); color: var(--pc-amber); }
  html.pc-on .rbx .rbd-r__ic.is-bad,
  html[data-theme="dark"].pc-on .rbx .rbd-r__ic.is-bad { background: rgba(197, 39, 30, .12); color: var(--pc-coral); }

  html.pc-on .rbx .rbd-r__id { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  html.pc-on .rbx .rbd-r__id b {
    font: 620 13.4px/1.15 var(--font-display), Inter, sans-serif; letter-spacing: -.016em;
    color: var(--pc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.pc-on .rbx .rbd-r__id em {
    font-style: normal; font: 450 11.4px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.pc-on .rbx .rbd-r__id em.is-warn { color: var(--pc-amber); font-weight: 545; }
  html.pc-on .rbx .rbd-r__id em.is-bad { color: var(--pc-coral); font-weight: 545; }

  /* the cycle, stated. The phone row printed the charge bare, so a £22,080 YEARLY plan
     and a £384 MONTHLY one were identical typography with nothing to separate them. */
  html.pc-on .rbx .rbd-r__c { min-width: 0; }
  html.pc-on .rbx .rbd-cyc {
    display: inline-block; max-width: 100%; padding: 3px 8px; border-radius: 7px;
    background: rgba(20, 28, 60, .05); border: 1px solid var(--pc-hair);
    font: 560 11px/1.35 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html[data-theme="dark"].pc-on .rbx .rbd-cyc { background: rgba(255, 255, 255, .05); }

  /* ---- run-date group: a macOS-style disclosure ----------------------------------
     ⚠ THE BODY ANIMATES WITH grid-template-rows 0fr -> 1fr, NOT max-height. A max-height
     guess has to be larger than the tallest group, which makes short groups open on a
     lazy delay and tall ones jump at the end; the grid technique animates the real
     height with no magic number. The inner wrapper needs `overflow: hidden` and
     `min-height: 0` or the rows leak out of the collapsed track. */
  html.pc-on .rbx .rbd-gw { border-bottom: 1px solid var(--pc-hair); }
  html.pc-on .rbx .rbd-gw:last-child { border-bottom: 0; }
  html.pc-on .rbx .rbd-gb {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .26s var(--pc-ease);
  }
  html.pc-on .rbx .rbd-gw.is-open .rbd-gb { grid-template-rows: 1fr; }
  /* ⚠ `visibility: hidden`, not just `overflow: hidden`. A clipped row still has layout,
     so it stays in the tab order — you could tab into three invisible plans. visibility
     removes it, and the 0s-delayed transition means it disappears only AFTER the collapse
     animation, so the rows do not vanish before the height finishes. */
  html.pc-on .rbx .rbd-gb__i {
    overflow: hidden; min-height: 0;
    visibility: hidden; transition: visibility 0s linear .26s;
  }
  html.pc-on .rbx .rbd-gw.is-open .rbd-gb__i { visibility: visible; transition-delay: 0s; }
  html.pc-on .rbx .rbd-gw.is-open .rbd-gb__i { border-top: 1px solid var(--pc-hair); }

  html.pc-on .rbx .rbd-g {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 10px var(--rbd-pad); border: 0; cursor: pointer;
    background: rgba(20, 28, 60, .022);
    transition: background .15s var(--pc-ease);
  }
  /* the ONLY hover band on this screen, and it is on a control, not a data row */
  html.pc-on .rbx .rbd-g:hover { background: rgba(75, 99, 255, .06); }
  html.pc-on .rbx .rbd-g:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(75, 99, 255, .5); }
  html.pc-on .rbx .rbd-g__x {
    flex: 0 0 auto; font-size: 10.5px; color: var(--pc-ink-3);
    transition: transform .26s var(--pc-ease);
  }
  html.pc-on .rbx .rbd-gw.is-open .rbd-g__x { transform: rotate(90deg); }

  /* a shut group must still show that it contains something wrong */
  html.pc-on .rbx .rbd-g__p { display: flex; align-items: center; gap: 5px; }
  html.pc-on .rbx .rbd-pip {
    display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 6px;
    font: 620 10px/1.5 var(--font), Inter, sans-serif; font-style: normal;
  }
  html.pc-on .rbx .rbd-pip i { font-size: 9px; }
  html.pc-on .rbx .rbd-pip--bad { background: rgba(197, 39, 30, .11); color: var(--pc-coral); }
  html.pc-on .rbx .rbd-pip--warn { background: rgba(182, 121, 18, .13); color: var(--pc-amber); }
  html[data-theme="dark"].pc-on .rbx .rbd-g { background: rgba(255, 255, 255, .025); }
  html[data-theme="dark"].pc-on .rbx .rbd-g:hover { background: rgba(130, 145, 255, .1); }
  html.pc-on .rbx .rbd-g__l {
    display: flex; align-items: center; gap: 7px; min-width: 0;
    font: 620 12px/1.3 var(--font), Inter, sans-serif; color: var(--pc-ink);
  }
  html.pc-on .rbx .rbd-g__l i { font-size: 12px; }
  html.pc-on .rbx .rbd-g__l em {
    font-style: normal; padding: 2px 7px; border-radius: 6px;
    background: rgba(75, 99, 255, .1); color: var(--pc-indigo);
    font: 560 10.4px/1.4 var(--font), Inter, sans-serif;
  }
  html[data-theme="dark"].pc-on .rbx .rbd-g__l em { background: rgba(130, 145, 255, .14); color: #A6B2FF; }
  html.pc-on .rbx .rbd-g--bad { background: rgba(197, 39, 30, .06); }
  html.pc-on .rbx .rbd-g--bad .rbd-g__l { color: var(--pc-coral); }
  html.pc-on .rbx .rbd-g--off .rbd-g__l { color: var(--pc-ink-3); }
  html.pc-on .rbx .rbd-g--now .rbd-g__l em { background: rgba(182, 121, 18, .14); color: var(--pc-amber); }
  html.pc-on .rbx .rbd-g__n {
    margin-left: auto; white-space: nowrap;
    font: 450 11.2px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  html.pc-on .rbx .rbd-g__v {
    white-space: nowrap; min-width: 96px; text-align: right;
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 12.6px; font-weight: 620; letter-spacing: -.028em; color: var(--pc-ink);
  }

  html.pc-on .rbx .rbd-r__a, html.pc-on .rbx .rbd-r__n { text-align: right; min-width: 0; }
  html.pc-on .rbx .rbd-r__a b, html.pc-on .rbx .rbd-r__n b {
    display: block; white-space: nowrap;
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 13.4px; font-weight: 620; letter-spacing: -.028em; color: var(--pc-ink);
  }
  html.pc-on .rbx .rbd-r__a em, html.pc-on .rbx .rbd-r__n em {
    display: block; margin-top: 3px; font-style: normal; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    font: 450 10.8px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  html.pc-on .rbx .rbd-r__n--soon em { color: var(--pc-amber); font-weight: 545; }
  html.pc-on .rbx .rbd-r__n--due b, html.pc-on .rbx .rbd-r__n--due em { color: var(--pc-coral); }
  html.pc-on .rbx .rbd-r__n--off b { color: var(--pc-ink-3); font-weight: 500; }

  /* ---- notification status. COLOUR IS STATUS, and 'unknown' gets its own quiet tone
     rather than being coloured like a failure — see rcxNotify(): "no send recorded" is
     an honest gap in the evidence, not a negative. ---- */
  html.pc-on .rbx .rbd-r__st { min-width: 0; }
  html.pc-on .rbx .rbd-nf {
    display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
    padding: 2px 8px; border-radius: 7px; white-space: nowrap;
    font: 580 10.8px/1.55 var(--font), Inter, sans-serif;
    overflow: hidden; text-overflow: ellipsis;
  }
  html.pc-on .rbx .rbd-nf i { font-size: 10px; flex: 0 0 auto; }
  html.pc-on .rbx .rbd-nf--sent { background: rgba(14, 122, 82, .11); color: var(--pc-green); }
  html.pc-on .rbx .rbd-nf--due { background: rgba(75, 99, 255, .1); color: var(--pc-indigo); }
  html[data-theme="dark"].pc-on .rbx .rbd-nf--due { background: rgba(130, 145, 255, .14); color: #A6B2FF; }
  html.pc-on .rbx .rbd-nf--off { background: rgba(20, 28, 60, .05); color: var(--pc-ink-3); }
  html[data-theme="dark"].pc-on .rbx .rbd-nf--off { background: rgba(255, 255, 255, .06); }
  html.pc-on .rbx .rbd-nf--bad { background: rgba(197, 39, 30, .1); color: var(--pc-coral); }
  html.pc-on .rbx .rbd-nf--unknown { background: rgba(182, 121, 18, .11); color: var(--pc-amber); }
  html.pc-on .rbx .rbd-r__st em {
    display: block; margin-top: 4px; font-style: normal; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    font: 450 10.6px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }

  html.pc-on .rbx .rbd-r__x { display: flex; justify-content: flex-end; color: var(--pc-ink-3); }
  html.pc-on .rbx .rbd-r__x i { font-size: 12px; opacity: .5; }
  html.pc-on .rbx .rbd-r.is-sel .rbd-r__x i { opacity: 1; color: var(--pc-indigo); }
  html[data-theme="dark"].pc-on .rbx .rbd-r.is-sel .rbd-r__x i { color: #A6B2FF; }

  html.pc-on .rbx .rbd-empty { padding: 54px 24px 58px; text-align: center; }
  html.pc-on .rbx .rbd-empty__i {
    display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 15px;
    background: rgba(75, 99, 255, .1); color: var(--pc-indigo); font-size: 19px; margin-bottom: 14px;
  }
  html.pc-on .rbx .rbd-empty h3 {
    margin: 0; font: 640 15.5px/1.2 var(--font-display), Inter, sans-serif;
    letter-spacing: -.02em; color: var(--pc-ink);
  }
  html.pc-on .rbx .rbd-empty p {
    margin: 7px auto 0; max-width: 340px;
    font: 450 12.8px/1.45 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }

  /* ================================================== 4 · RAIL
     ⚠ NOT sticky. It runs past 900px populated, and a sticky element taller than the
     viewport can never be scrolled to the end of. */
  html.pc-on .rbx .rbrail { min-width: 0; }
  html.pc-on .rbx .rbr {
    border-radius: var(--pc-r); padding: 20px 20px 22px;
    background: var(--pc-card-solid); border: 1px solid var(--pc-hair); box-shadow: var(--pc-lift);
  }
  html.pc-on .rbx .rbr--empty { text-align: center; padding: 46px 24px 50px; }
  html.pc-on .rbx .rbr-empty__i {
    display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 16px;
    background: rgba(75, 99, 255, .1); color: var(--pc-indigo); font-size: 20px; margin-bottom: 14px;
  }
  html[data-theme="dark"].pc-on .rbx .rbr-empty__i { background: rgba(130, 145, 255, .13); color: #A6B2FF; }
  html.pc-on .rbx .rbr--empty h3 {
    margin: 0; font: 640 14.8px/1.2 var(--font-display), Inter, sans-serif;
    letter-spacing: -.02em; color: var(--pc-ink);
  }
  html.pc-on .rbx .rbr--empty p {
    margin: 8px 0 0; font: 450 12.2px/1.5 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }

  html.pc-on .rbx .rbr-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; }
  html.pc-on .rbx .rbr-ic {
    width: 40px; height: 40px; border-radius: 13px; display: inline-grid; place-items: center;
    font-size: 17px; background: rgba(75, 99, 255, .09); color: var(--pc-indigo);
  }
  html[data-theme="dark"].pc-on .rbx .rbr-ic { background: rgba(130, 145, 255, .13); color: #A6B2FF; }
  html.pc-on .rbx .rbr-name {
    font: 660 15.8px/1.22 var(--font-display), Inter, sans-serif; letter-spacing: -.024em;
    color: var(--pc-ink); overflow-wrap: anywhere;
  }
  html.pc-on .rbx .rbr-desc { margin-top: 4px; font: 450 11.9px/1.4 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }
  html.pc-on .rbx .rbr-ref {
    margin-top: 4px; display: inline-block; padding: 2px 7px; border-radius: 6px;
    background: rgba(75, 99, 255, .085);
    font-family: var(--font-ledger), monospace; font-size: 10.6px; font-weight: 560; color: var(--pc-ink-2);
  }
  html[data-theme="dark"].pc-on .rbx .rbr-ref { background: rgba(130, 145, 255, .12); }
  html.pc-on .rbx .rbr-state {
    flex: 0 0 auto; padding: 3px 9px; border-radius: 7px; white-space: nowrap;
    background: rgba(20, 28, 60, .05); color: var(--pc-ink-3);
    font: 600 10.6px/1.5 var(--font), Inter, sans-serif;
  }
  html[data-theme="dark"].pc-on .rbx .rbr-state { background: rgba(255, 255, 255, .06); }
  html.pc-on .rbx .rbr-state.is-on { background: rgba(14, 122, 82, .12); color: var(--pc-green); }

  html.pc-on .rbx .rbr-acts { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; margin-top: 15px; }
  html.pc-on .rbx .rbr-act {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 36px; padding: 0 13px; border-radius: var(--pc-r-sm); cursor: pointer;
    border: 1px solid var(--pc-hair-2); background: transparent; color: var(--pc-ink-2);
    font: 580 12.5px/1 var(--font), Inter, sans-serif;
    transition: background .16s var(--pc-ease), color .16s var(--pc-ease), border-color .16s var(--pc-ease);
  }
  html.pc-on .rbx .rbr-act:hover { background: rgba(75, 99, 255, .08); color: var(--pc-indigo); border-color: transparent; }
  html.pc-on .rbx .rbr-act--p {
    border: 0; background: var(--pc-grad); color: #fff;
    box-shadow: 0 10px 22px -12px rgba(61, 79, 224, .9), inset 0 1px 0 rgba(255, 255, 255, .28);
  }
  html.pc-on .rbx .rbr-act--p:hover { color: #fff; background: var(--pc-grad); }
  html.pc-on .rbx #rbx-more { width: 36px; padding: 0; }

  /* the end-of-plan decision: two choices and the consequence of each, before pressing */
  html.pc-on .rbx .rbr-dec {
    margin-top: 14px; padding: 13px 14px; border-radius: 14px;
    border: 1px solid rgba(197, 39, 30, .22); background: rgba(197, 39, 30, .06);
  }
  html.pc-on .rbx .rbr-dec__h {
    display: flex; align-items: flex-start; gap: 8px;
    font: 640 12.4px/1.35 var(--font), Inter, sans-serif; color: var(--pc-coral);
  }
  html.pc-on .rbx .rbr-dec__h i { font-size: 13px; margin-top: 1px; flex: 0 0 auto; }
  html.pc-on .rbx .rbr-dec__p {
    margin: 7px 0 0; font: 450 11.6px/1.45 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
  }
  html.pc-on .rbx .rbr-dec__b { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  html.pc-on .rbx .rbr-dec__go, html.pc-on .rbx .rbr-dec__end {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 34px; padding: 0 10px; border-radius: var(--pc-r-sm); cursor: pointer;
    font: 600 12.1px/1 var(--font), Inter, sans-serif;
    transition: background .16s var(--pc-ease), color .16s var(--pc-ease);
  }
  html.pc-on .rbx .rbr-dec__go {
    border: 0; background: var(--pc-grad); color: #fff;
    box-shadow: 0 8px 18px -10px rgba(61, 79, 224, .9), inset 0 1px 0 rgba(255, 255, 255, .28);
  }
  html.pc-on .rbx .rbr-dec__end {
    border: 1px solid rgba(197, 39, 30, .3); background: transparent; color: var(--pc-coral);
  }
  html.pc-on .rbx .rbr-dec__end:hover { background: rgba(197, 39, 30, .1); }
  html.pc-on .rbx .rbr-dec i.bi { font-size: 12px; }

  html.pc-on .rbx .rbr-flags { margin-top: 13px; display: flex; flex-direction: column; gap: 7px; }
  html.pc-on .rbx .rbr-flag {
    display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px; border-radius: 11px;
    background: rgba(182, 121, 18, .1); color: var(--pc-amber);
    font: 450 11.7px/1.4 var(--font), Inter, sans-serif;
  }
  html.pc-on .rbx .rbr-flag.is-bad { background: rgba(197, 39, 30, .09); color: var(--pc-coral); }
  html.pc-on .rbx .rbr-flag i { font-size: 12px; margin-top: 1px; }

  html.pc-on .rbx .rbr-amt {
    margin-top: 16px; padding: 15px 15px 14px; border-radius: 15px;
    border: 1px solid var(--pc-hair); background: rgba(20, 28, 60, .022);
  }
  html[data-theme="dark"].pc-on .rbx .rbr-amt { background: rgba(255, 255, 255, .025); }
  html.pc-on .rbx .rbr-amt__cap {
    display: block; font: 620 10.2px/1 var(--font), Inter, sans-serif;
    letter-spacing: .085em; text-transform: uppercase; color: var(--pc-ink-3);
  }
  html.pc-on .rbx .rbr-amt__v {
    margin-top: 8px; display: flex; align-items: baseline; gap: 3px;
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 25px; font-weight: 640; letter-spacing: -.032em; line-height: 1;
    background: linear-gradient(135deg, var(--pc-gold-a), var(--pc-gold-b));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  html.pc-on .rbx .rbr-amt__per { font-size: 13px; font-weight: 560; }
  html.pc-on .rbx .rbr-amt__s {
    margin-top: 7px; font: 450 11.4px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }

  html.pc-on .rbx .rbr-sec {
    display: flex; align-items: baseline; gap: 8px; margin: 20px 0 8px;
    font: 620 10.2px/1 var(--font), Inter, sans-serif; letter-spacing: .085em;
    text-transform: uppercase; color: var(--pc-ink-3);
  }
  html.pc-on .rbx .rbr-sec__n {
    margin-left: auto; padding: 2px 7px; border-radius: 6px; text-transform: none; letter-spacing: 0;
    background: rgba(75, 99, 255, .1); color: var(--pc-indigo);
    font: 600 10px/1.5 var(--font), Inter, sans-serif;
  }
  html[data-theme="dark"].pc-on .rbx .rbr-sec__n { background: rgba(130, 145, 255, .14); color: #A6B2FF; }

  html.pc-on .rbx .rbr-fs { margin: 0; }
  html.pc-on .rbx .rbr-f {
    display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px;
    padding: 7px 0; border-bottom: 1px solid var(--pc-hair);
  }
  html.pc-on .rbx .rbr-f:last-child { border-bottom: 0; }
  html.pc-on .rbx .rbr-f dt { font: 500 11.4px/1.35 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }
  html.pc-on .rbx .rbr-f dd {
    margin: 0; min-width: 0; text-align: right; overflow-wrap: anywhere;
    font: 500 11.9px/1.35 var(--font), Inter, sans-serif; color: var(--pc-ink);
  }
  html.pc-on .rbx .rbr-f--mono dd {
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 11.6px; font-weight: 450;
  }
  html.pc-on .rbx .rbr-f dd b { font-weight: 640; }
  /* an empty field is shown, not dropped — a plan with no end date is a fact */
  html.pc-on .rbx .rbr-nil { color: var(--pc-ink-3); font-style: italic; font-weight: 450; }
  html.pc-on .rbx .rbr-bad { color: var(--pc-coral); font-weight: 545; }

  html.pc-on .rbx .rbr-nf {
    display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border-radius: 12px;
    font: 450 11.7px/1.45 var(--font), Inter, sans-serif;
    background: rgba(20, 28, 60, .04); color: var(--pc-ink-2);
  }
  html[data-theme="dark"].pc-on .rbx .rbr-nf { background: rgba(255, 255, 255, .05); }
  html.pc-on .rbx .rbr-nf i { font-size: 13px; margin-top: 1px; flex: 0 0 auto; }
  html.pc-on .rbx .rbr-nf b { display: block; font-weight: 640; margin-bottom: 2px; }
  html.pc-on .rbx .rbr-nf em {
    display: block; margin-top: 4px; font-style: normal;
    font-family: var(--font-ledger), monospace; font-size: 10.8px; color: var(--pc-ink-3);
  }
  html.pc-on .rbx .rbr-nf--sent { background: rgba(14, 122, 82, .1); color: var(--pc-green); }
  html.pc-on .rbx .rbr-nf--bad { background: rgba(197, 39, 30, .09); color: var(--pc-coral); }
  html.pc-on .rbx .rbr-nf--unknown { background: rgba(182, 121, 18, .1); color: var(--pc-amber); }
  html.pc-on .rbx .rbr-nf--due { background: rgba(75, 99, 255, .09); color: var(--pc-indigo); }
  html[data-theme="dark"].pc-on .rbx .rbr-nf--due { background: rgba(130, 145, 255, .13); color: #A6B2FF; }

  /* ⚠ MEASURED. With the send/chase/failure split a row can carry three lines per
     invoice, and "invoice emailed" + a full stamp does not fit beside a number on a
     344px rail — the stamp wrapped under the label and the rows lost their alignment.
     The stamp gets its own line on the grid's second row instead. */
  html.pc-on .rbx .rbr-nfl {
    display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 2px 8px;
    align-items: baseline; padding: 8px 0;
    border-bottom: 1px solid var(--pc-hair);
    font: 450 11.4px/1.35 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
  }
  html.pc-on .rbx .rbr-nfl:last-of-type { border-bottom: 0; }
  html.pc-on .rbx .rbr-nfl i { font-size: 11.5px; color: var(--pc-green); flex: 0 0 auto; }
  html.pc-on .rbx .rbr-nfl.is-bad i { color: var(--pc-coral); }
  html.pc-on .rbx .rbr-nfl span { min-width: 0; display: flex; gap: 6px; flex-wrap: wrap; }
  html.pc-on .rbx .rbr-nfl b {
    font-family: var(--font-ledger), monospace; font-size: 11.2px; font-weight: 620; color: var(--pc-ink);
  }
  html.pc-on .rbx .rbr-nfl em {
    grid-column: 2; font-style: normal; white-space: nowrap;
    font-family: var(--font-ledger), monospace; font-size: 10.4px; color: var(--pc-ink-3);
  }

  html.pc-on .rbx .rbr-inv {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid var(--pc-hair); text-decoration: none;
  }
  html.pc-on .rbx .rbr-inv:last-child { border-bottom: 0; }
  html.pc-on .rbx .rbr-inv__l { min-width: 0; }
  html.pc-on .rbx .rbr-inv__l b {
    display: block; font-family: var(--font-ledger), monospace; font-size: 12.4px; font-weight: 620;
    letter-spacing: -.016em; color: var(--pc-indigo);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html[data-theme="dark"].pc-on .rbx .rbr-inv__l b { color: #A6B2FF; }
  html.pc-on .rbx .rbr-inv:hover .rbr-inv__l b { text-decoration: underline; text-underline-offset: 3px; }
  html.pc-on .rbx .rbr-inv__l em {
    display: block; margin-top: 3px; font-style: normal;
    font: 450 10.8px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  html.pc-on .rbx .rbr-inv__r { text-align: right; white-space: nowrap; }
  html.pc-on .rbx .rbr-inv__r b {
    display: block; font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 12.8px; font-weight: 620; letter-spacing: -.028em; color: var(--pc-ink);
  }
  html.pc-on .rbx .rbr-inv__r em { display: block; margin-top: 4px; }
  html.pc-on .rbx .rbr-none {
    padding: 12px 0 4px; font: 450 11.8px/1.4 var(--font), Inter, sans-serif;
    font-style: italic; color: var(--pc-ink-3);
  }

  @media (prefers-reduced-motion: reduce) {
    html.pc-on .rbx .rbd-r::before, html.pc-on .rbx .rbr-act,
    html.pc-on .rbx .rbbd__sw, html.pc-on .rbx .rbbd__sw::after,
    html.pc-on .rbx .rbbd__block,
    html.pc-on .rbx .rbd-gb, html.pc-on .rbx .rbd-g, html.pc-on .rbx .rbd-g__x,
    html.pc-on .rbx .rbfx__body, html.pc-on .rbx .rbfx__x, html.pc-on .rbx .rbfx__h,
    html.pc-on .rbx .rbd-gb__i, html.pc-on .rbx .rbfx__inner { transition: none; }
  }
}

/* =====================================================================================
 *  DESKTOP ACTIVITY — "THE AUDIT LOG"  ·  PC Native 2026  (v3.44.0)
 *  -------------------------------------------------------------------------------
 *  Replaces an 840px FIXED column of one-line rows — 392px of empty page at 1512 and
 *  800px at 1920 — whose entire skin was written by `injectStyles()`, a <style> tag built
 *  from a JavaScript string array at mount. That put it outside style.css, outside
 *  tools/check-pc-scope.js, and beyond diffing. ⚠ DO NOT REINTRODUCE CSS-IN-JS HERE.
 *
 *  A feed answers "what just happened". On a desktop, in an app where more than one
 *  person moves money, the question is WHO changed WHAT and WHEN — so this is columns you
 *  can scan (When · Who · What happened · Record), a date range, an actor filter, and
 *  automated runs folded to one line.
 *
 *  ⚠ NO BOARD AND NO HERO, DELIBERATELY. Every other rebuilt section has one because it
 *  has an actionable figure; a log has none. The only candidate ("40 events") is already
 *  the day header's count, and adding it would repeat the duplication removed from the
 *  Documents hero in v3.21.0 and refused for the Activity phone in v3.24.0.
 *
 *  ⚠ `html.dm-on` IS NOT SET on this screen's desktop path, unlike Recurring — so no
 *  phone namespace is live and `.av3-*` cannot collide. Note `html.avd-open` (~5529) is a
 *  DOCUMENT-level class for the activity detail sheet; everything here is
 *  `html.pc-on .avx .avd-*`, a descendant, so the two never meet.
 * ================================================================================== */

@media (min-width: 768px) {

  /* The 840px fixed column left 392px empty at 1512 and 800px at 1920 — the width was
     never the constraint, the single-line row was. */
  /* v3.46.0 — RETIRED. One scoped rule covers every .pcx page now (see the end of
     this file). */

  html.pc-on .avx { --avd-pad: 18px; --avd-gap: 14px; }

  /* ================================================== 1 · THE LOG

     ⚠ no overflow:hidden and no backdrop-filter — either makes this a containing block
     and both the column head AND the day headers stop pinning. Solid surface by design;
     v3.35.0 also says never repeat a filter down a list you scroll, and this one is
     infinite. */
  html.pc-on .avx .avdir {
    position: relative; overflow: visible; border-radius: var(--pc-r);
    background: var(--pc-card-solid); border: 1px solid var(--pc-hair); box-shadow: var(--pc-lift);
    /* MEASURED at 1512: no rail on this screen, so content is
       1512 - 232 (sidebar) - 48 (.app-main padding) - 60 (gutters) = 1172.
       Fixed tracks 92 + 156 + 210 + 26 = 484, plus four 14px gaps (56) and 2x18 row
       padding (36) = 576, so "What happened" gets 596. At 1280 it still gets 364. */
    --avd-cols: 92px 156px minmax(0, 1fr) 210px 26px;
  }

  html.pc-on .avx .avdir__bar {
    display: grid; grid-template-columns: minmax(160px, 260px) minmax(0, 1fr) auto;
    align-items: center; gap: 8px 10px; padding: 11px 14px;
    border-bottom: 1px solid var(--pc-hair); border-radius: var(--pc-r) var(--pc-r) 0 0;
  }
  html.pc-on .avx .avdir__q { max-width: 260px; min-width: 0; margin: 0; }
  html.pc-on .avx .avdir__q .topbar__search-input { height: 31px; border-radius: 9px; font-size: 12.5px; }
  html.pc-on .avx .avdir__q .topbar__search-icon { font-size: 12.5px; }
  html.pc-on .avx .avdir__f { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
  /* ⚠ SCOPED TO `select.av-f`. HaaltdSelect copies the select's className onto its own
     button, so an unqualified `.av-f` rule also hits the button and the 26px reserved for
     the native caret lands beside the component's own caret. */
  html.pc-on .avx select.av-f {
    height: 30px; padding: 0 26px 0 9px; border-radius: 8px; width: auto; min-width: 0;
    border: 1px solid transparent; background-color: transparent; box-shadow: none;
    font: 545 12.2px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
  }
  html.pc-on .avx .avdir__clr {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
    border: 0; border-radius: 8px; background: transparent; cursor: pointer;
    color: var(--pc-ink-3); font: 545 12.2px/1 var(--font), Inter, sans-serif;
    transition: background .16s var(--pc-ease), color .16s var(--pc-ease);
  }
  html.pc-on .avx .avdir__clr:hover { background: rgba(197, 39, 30, .1); color: var(--pc-coral); }
  html.pc-on .avx .avdir__n {
    justify-self: end; white-space: nowrap;
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 12px; font-weight: 560; color: var(--pc-ink-3);
  }

  html.pc-on .avx .avdir__cols {
    position: sticky; top: 60px; z-index: 5;
    display: grid; grid-template-columns: var(--avd-cols); column-gap: var(--avd-gap);
    align-items: center; height: 37px; padding: 0 var(--avd-pad);
    background: var(--pc-card-solid); border-bottom: 1px solid var(--pc-hair);
    font: 620 10.2px/1 var(--font), Inter, sans-serif; letter-spacing: .085em;
    text-transform: uppercase; color: var(--pc-ink-3);
  }

  /* ---- day header. Sticks UNDER the column head, so scrolling a long feed always tells
     you which day you are looking at. 60 (toolbar) + 37 (column head) = 97. ---- */
  html.pc-on .avx .avd-day {
    position: sticky; top: 97px; z-index: 4;
    display: flex; align-items: baseline; gap: 10px;
    padding: 8px var(--avd-pad); border-bottom: 1px solid var(--pc-hair);
    background: rgba(20, 28, 60, .028);
    font: 620 11.4px/1.3 var(--font), Inter, sans-serif; color: var(--pc-ink);
  }
  html[data-theme="dark"].pc-on .avx .avd-day { background: rgba(255, 255, 255, .035); }
  html.pc-on .avx .avd-day em {
    margin-left: auto; font-style: normal;
    font: 450 11px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }

  /* ---- one event ----
     NO ROW HOVER (standing v3.38.0 decision). The row is not selectable here — there is
     no rail — so it carries no selected state either; the only interactive things are the
     record link and the fold, which are controls. */
  html.pc-on .avx .avd-r {
    display: grid; grid-template-columns: var(--avd-cols); column-gap: var(--avd-gap);
    align-items: center; padding: 9px var(--avd-pad);
    border-bottom: 1px solid var(--pc-hair);
  }
  html.pc-on .avx .avd-r:last-child { border-bottom: 0; }

  html.pc-on .avx .avd-r__t { min-width: 0; }
  html.pc-on .avx .avd-r__t b {
    display: block; font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 12.4px; font-weight: 620; letter-spacing: -.02em; color: var(--pc-ink);
  }
  html.pc-on .avx .avd-r__t em {
    display: block; margin-top: 3px; font-style: normal; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    font: 450 10.6px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }

  html.pc-on .avx .avd-r__w { display: flex; align-items: center; gap: 8px; min-width: 0;
    font: 500 12px/1.3 var(--font), Inter, sans-serif; color: var(--pc-ink-2); }
  html.pc-on .avx .avd-r__w span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.pc-on .avx .avd-av {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px; display: inline-grid;
    place-items: center; color: #fff; background: var(--pc-grad);
    font: 640 9.6px/1 var(--font-display), Inter, sans-serif;
  }
  /* ⚠ AUTOMATION IS CHROME, NOT A STATUS. The old row labelled every machine-run event
     "Someone", which is worse than saying nothing. It is named, and its avatar is a quiet
     grey gear rather than an indigo initial, so a person and a job are told apart at a
     glance without spending a status colour on it. */
  html.pc-on .avx .avd-av--sys { background: rgba(20, 28, 60, .09); color: var(--pc-ink-3); }
  html[data-theme="dark"].pc-on .avx .avd-av--sys { background: rgba(255, 255, 255, .1); color: var(--pc-ink-3); }
  html.pc-on .avx .avd-av--sys i { font-size: 9px; }

  html.pc-on .avx .avd-r__s { display: flex; align-items: center; gap: 10px; min-width: 0; }
  html.pc-on .avx .avd-ic {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 9px; display: inline-grid;
    place-items: center; font-size: 12px;
    color: var(--mk, var(--pc-indigo));
    background: color-mix(in srgb, var(--mk, var(--pc-indigo)) 12%, transparent);
  }
  html.pc-on .avx .avd-sum {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 500 12.6px/1.35 var(--font), Inter, sans-serif; color: var(--pc-ink);
  }
  html.pc-on .avx .avd-sum b { font-family: var(--font-ledger), monospace; font-weight: 640; }

  html.pc-on .avx .avd-r__e { min-width: 0; }
  html.pc-on .avx .avd-link {
    max-width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
    font-family: var(--font-ledger), monospace; font-size: 12px; font-weight: 600;
    letter-spacing: -.016em; color: var(--pc-indigo);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
  }
  html[data-theme="dark"].pc-on .avx .avd-link { color: #A6B2FF; }
  html.pc-on .avx .avd-link:hover { text-decoration: underline; text-underline-offset: 3px; }
  html.pc-on .avx .avd-ent, html.pc-on .avx .avd-none {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 450 11.8px/1.35 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  html.pc-on .avx .avd-r__x { display: flex; justify-content: flex-end; color: var(--pc-ink-3); }
  html.pc-on .avx .avd-r__x i { font-size: 11.5px; opacity: .4; }

  /* an automation failure is the one thing in a log worth colouring */
  html.pc-on .avx .avd-r--bad { background: rgba(197, 39, 30, .045); }
  html[data-theme="dark"].pc-on .avx .avd-r--bad { background: rgba(197, 39, 30, .1); }
  html.pc-on .avx .avd-r--bad .avd-sum { color: var(--pc-coral); font-weight: 545; }

  /* ---- a folded run ---- */
  html.pc-on .avx .avd-foldb {
    display: flex; align-items: center; gap: 9px; min-width: 0; width: 100%;
    padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  }
  html.pc-on .avx .avd-foldb__x {
    font-size: 10px; color: var(--pc-ink-3); flex: 0 0 auto;
    transition: transform .2s var(--pc-ease);
  }
  html.pc-on .avx .avd-r--fold.is-open .avd-foldb__x { transform: rotate(90deg); }
  html.pc-on .avx .avd-r--fold { background: rgba(20, 28, 60, .016); }
  html[data-theme="dark"].pc-on .avx .avd-r--fold { background: rgba(255, 255, 255, .022); }
  html.pc-on .avx .avd-sub { border-left: 2px solid var(--pc-indigo); }
  html.pc-on .avx .avd-sub .avd-r { padding-left: calc(var(--avd-pad) + 12px); }
  html.pc-on .avx .avd-sub .avd-r:last-child { border-bottom: 1px solid var(--pc-hair); }

  /* ---- the new-entries pill ---- */
  html.pc-on .avx .avd-new { display: flex; justify-content: center; padding: 10px 0 2px; }
  html.pc-on .avx .avd-new button {
    display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px;
    border: 0; border-radius: 999px; cursor: pointer; background: var(--pc-grad); color: #fff;
    font: 580 12.2px/1 var(--font), Inter, sans-serif;
    box-shadow: 0 10px 22px -12px rgba(61, 79, 224, .9);
  }
  html.pc-on .avx .avd-new i { font-size: 11px; }

  html.pc-on .avx .avd-sk { height: 46px; border-radius: 10px; margin: 10px var(--avd-pad); }
  html.pc-on .avx .avd-end {
    padding: 20px; text-align: center;
    font: 450 11.6px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  html.pc-on .avx .avd-empty { padding: 56px 24px 60px; text-align: center; }
  html.pc-on .avx .avd-empty__i {
    display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 15px;
    background: rgba(75, 99, 255, .1); color: var(--pc-indigo); font-size: 19px; margin-bottom: 14px;
  }
  html.pc-on .avx .avd-empty h3 {
    margin: 0; font: 640 15.5px/1.2 var(--font-display), Inter, sans-serif;
    letter-spacing: -.02em; color: var(--pc-ink);
  }
  html.pc-on .avx .avd-empty p {
    margin: 7px auto 0; max-width: 340px;
    font: 450 12.8px/1.45 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }

  @media (prefers-reduced-motion: reduce) {
    html.pc-on .avx .avd-foldb__x, html.pc-on .avx .avdir__clr { transition: none; }
  }
}

/* =====================================================================================
 *  DESKTOP DOCUMENTS — "NOTES & RECORDS"  ·  PC Native 2026  (v3.45.0)
 *  -------------------------------------------------------------------------------
 *  Replaces a 4-up card grid in which a general NOTE and a signed customer document were
 *  rendered identically, each topped by a large blank preview panel. `doc_type` already
 *  told them apart; the screen did not.
 *
 *  ⚠ THE STICKY IS PAPER, NOT A STATUS COLOUR — `--dxn-*`, NOT `--pc-amber`. §4.11.3
 *  reserves green / amber / coral for paid, due and overdue, and this screen sits one
 *  click from screens that use them in earnest. A note tinted amber reads as a warning.
 *  The dark variant lowers the value and keeps the hue: the same paper under a lamp, not
 *  a yellow rectangle punched through a dark screen. Do not swap these for the status
 *  variables.
 *
 *  ⚠ THE `.dxn:hover` LIFT IS THE ONE EXCEPTION ON THIS SCREEN and it is deliberate: the
 *  v3.38.2 rule is about a translate on a wide row in a LIST, which makes a band of the
 *  page hop as the pointer crosses. A small card in a grid is the case that rule was
 *  never about. Rows below have no hover at all.
 * ================================================================================== */

@media (min-width: 768px) {

  /* v3.46.0 — RETIRED. One scoped rule covers every .pcx page now (see the end of
     this file). */
  html.pc-on .dxx { --dxd-pad: 18px; --dxd-gap: 14px; }

  /* ---- search bar, above both sections ---- */
  html.pc-on .dxx .dxdir__bar {
    display: grid; grid-template-columns: minmax(200px, 340px) auto;
    align-items: center; gap: 10px; margin-bottom: 20px;
  }
  html.pc-on .dxx .dxdir__q { max-width: 340px; min-width: 0; margin: 0; }
  html.pc-on .dxx .dxdir__q .topbar__search-input { height: 34px; border-radius: 10px; font-size: 13px; }
  html.pc-on .dxx .dxdir__n {
    justify-self: end; white-space: nowrap;
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 12px; font-weight: 560; color: var(--pc-ink-3);
  }

  html.pc-on .dxx .dxn-head, html.pc-on .dxx .dxd-head {
    display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
    font: 620 10.4px/1 var(--font), Inter, sans-serif; letter-spacing: .085em;
    text-transform: uppercase; color: var(--pc-ink-3);
  }
  html.pc-on .dxx .dxd-head { margin-top: 26px; }
  html.pc-on .dxx .dxn-head i, html.pc-on .dxx .dxd-head i { font-size: 12px; }
  html.pc-on .dxx .dxn-head em, html.pc-on .dxx .dxd-head em {
    font-style: normal; padding: 2px 7px; border-radius: 6px; letter-spacing: 0;
    background: rgba(20, 28, 60, .06); color: var(--pc-ink-3);
    font: 600 10px/1.5 var(--font), Inter, sans-serif;
  }
  html[data-theme="dark"].pc-on .dxx .dxn-head em,
  html[data-theme="dark"].pc-on .dxx .dxd-head em { background: rgba(255, 255, 255, .07); }
  html.pc-on .dxx .dxn-head i { color: var(--dxn-ink); }

  /* ================================================== NOTES

     ⚠ THIS IS PAPER, NOT A STATUS COLOUR. §4.11.3 reserves green / amber / coral for
     paid, due and overdue, and this screen sits one click from screens that use them in
     earnest. A note tinted `--pc-amber` would read as a warning. So the sticky has its
     own tokens — a warm paper tone that belongs to no status and is used nowhere else —
     and the indigo chrome rule is untouched, because this is content, not chrome.
     Do NOT swap these for the status variables. */
  html.pc-on .dxx {
    --dxn-bg:   #FFF6D8;
    --dxn-bg2:  #FFEFC0;
    --dxn-edge: #F0DEA4;
    --dxn-ink:  #7A5B12;
    --dxn-ink2: #9A7620;
  }
  /* dark: the same paper seen under a lamp, not a bright yellow rectangle punched
     through a dark screen — lowered value, kept hue, ink lifted to stay legible */
  html[data-theme="dark"].pc-on .dxx {
    --dxn-bg:   #3A3114;
    --dxn-bg2:  #332B11;
    --dxn-edge: #4E4220;
    --dxn-ink:  #F3DFA6;
    --dxn-ink2: #C9B173;
  }

  html.pc-on .dxx .dxn-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px;
  }
  html.pc-on .dxx .dxn {
    position: relative; display: flex; flex-direction: column; min-height: 150px;
    padding: 15px 15px 12px; cursor: pointer; overflow: hidden;
    /* the fold: square top-right corner, everything else rounded — the one shape cue
       that says "note" without a skeuomorphic curl */
    border-radius: var(--pc-r-sm) 0 var(--pc-r-sm) var(--pc-r-sm);
    background: linear-gradient(160deg, var(--dxn-bg), var(--dxn-bg2));
    border: 1px solid var(--dxn-edge);
    box-shadow: 0 2px 5px -2px rgba(90, 70, 10, .18);
    transition: transform .16s var(--pc-ease), box-shadow .16s var(--pc-ease);
  }
  html[data-theme="dark"].pc-on .dxx .dxn { box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .5); }
  /* ⚠ the ONE lift on this screen, and it is on a small card, not a wide row — the
     v3.38.2 rule is about hover bands across a list, which this is not. */
  html.pc-on .dxx .dxn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(90, 70, 10, .3); }
  html[data-theme="dark"].pc-on .dxx .dxn:hover { box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .6); }
  html.pc-on .dxx .dxn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(75, 99, 255, .55); }
  /* the turned corner */
  html.pc-on .dxx .dxn::after {
    content: ''; position: absolute; top: 0; right: 0; width: 18px; height: 18px;
    background: linear-gradient(225deg, var(--pc-card-solid) 50%, var(--dxn-edge) 50%);
  }
  html.pc-on .dxx .dxn__t {
    font: 660 13.2px/1.3 var(--font-display), Inter, sans-serif; letter-spacing: -.016em;
    color: var(--dxn-ink); padding-right: 16px; margin-bottom: 7px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* the content IS the card — a note is its text, so it gets the room, not a blank
     preview panel above a filename */
  html.pc-on .dxx .dxn__b {
    flex: 1; min-height: 0; overflow: hidden;
    font: 450 11.9px/1.55 var(--font), Inter, sans-serif; color: var(--dxn-ink2);
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  }
  html.pc-on .dxx .dxn__b--empty { font-style: italic; opacity: .7; }
  html.pc-on .dxx .dxn__f {
    display: flex; justify-content: space-between; gap: 8px; margin-top: 10px;
    padding-top: 8px; border-top: 1px solid var(--dxn-edge);
    font-family: var(--font-ledger), monospace; font-size: 10.2px; color: var(--dxn-ink2);
    white-space: nowrap;
  }

  /* ================================================== CUSTOMER DOCUMENTS */
  html.pc-on .dxx .dxd-card {
    border-radius: var(--pc-r); overflow: visible;
    background: var(--pc-card-solid); border: 1px solid var(--pc-hair); box-shadow: var(--pc-lift);
    /* MEASURED at 1512: content is 1512 - 232 - 48 - 60 = 1172. Fixed 220 + 170 + 150 +
       26 = 566, plus four 14px gaps (56) and 2x18 padding (36) = 658, so the document
       column gets 514. At 1024 it still gets 154. */
    --dxd-cols: minmax(0, 1fr) 220px 170px 150px 26px;
  }
  html.pc-on .dxx .dxd-cols {
    position: sticky; top: 60px; z-index: 4;
    display: grid; grid-template-columns: var(--dxd-cols); column-gap: var(--dxd-gap);
    align-items: center; height: 37px; padding: 0 var(--dxd-pad);
    background: var(--pc-card-solid); border-bottom: 1px solid var(--pc-hair);
    border-radius: var(--pc-r) var(--pc-r) 0 0;
    font: 620 10.2px/1 var(--font), Inter, sans-serif; letter-spacing: .085em;
    text-transform: uppercase; color: var(--pc-ink-3);
  }
  html.pc-on .dxx .dxd-cols .dxd-c-r { text-align: right; }

  /* ⚠ MEASURED COLLAPSE POINT. The fixed tracks are 220 + 170 + 150 + 26 = 566, plus four
     14px gaps (56) and 2x18 padding (36) = 658. Table width is content width here (no
     rail): 684 at 1024, but only 560 at 900 and 660 at 768 — so below ~1280 the
     `minmax(0, 1fr)` document column was squeezed to a REAL ZERO and the title had
     nowhere to render. Audited: clientWidth 0 at 8 of 18 width/theme combinations.
     Below 1280 the Customer and Invoice columns are dropped and their content moves to
     the row's own sub-line, which the markup always emits. */
  @media (max-width: 1279px) {
    html.pc-on .dxx .dxd-card { --dxd-cols: minmax(0, 1fr) 150px 26px; }
    html.pc-on .dxx .dxd-r__c, html.pc-on .dxx .dxd-r__i,
    html.pc-on .dxx .dxd-cols span:nth-child(2),
    html.pc-on .dxx .dxd-cols span:nth-child(3) { display: none; }
    html.pc-on .dxx .dxd-r__sub { display: block; }
  }
  /* wide: the two facts have their own columns, so the sub-line would only repeat them */
  html.pc-on .dxx .dxd-r__sub { display: none; }

  /* NO ROW HOVER (standing v3.38.0 decision). */
  html.pc-on .dxx .dxd-r {
    display: grid; grid-template-columns: var(--dxd-cols); column-gap: var(--dxd-gap);
    align-items: center; padding: 11px var(--dxd-pad);
    border-bottom: 1px solid var(--pc-hair); cursor: pointer; outline: none;
  }
  html.pc-on .dxx .dxd-r:last-child { border-bottom: 0; border-radius: 0 0 var(--pc-r) var(--pc-r); }
  html.pc-on .dxx .dxd-r:focus-visible { box-shadow: inset 0 0 0 2px rgba(75, 99, 255, .5); }
  html.pc-on .dxx .dxd-r__n { display: flex; align-items: center; gap: 11px; min-width: 0; }
  html.pc-on .dxx .dxd-ic {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px; display: inline-grid;
    place-items: center; font-size: 13px;
    background: rgba(75, 99, 255, .09); color: var(--pc-indigo);
  }
  html[data-theme="dark"].pc-on .dxx .dxd-ic { background: rgba(130, 145, 255, .13); color: #A6B2FF; }
  html.pc-on .dxx .dxd-r__id { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  html.pc-on .dxx .dxd-r__id b {
    font: 620 13.2px/1.2 var(--font-display), Inter, sans-serif; letter-spacing: -.016em;
    color: var(--pc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.pc-on .dxx .dxd-r__id em {
    font-style: normal; font: 450 11.2px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.pc-on .dxx .dxd-r__sub { color: var(--pc-ink-2); font-weight: 500; }
  html.pc-on .dxx .dxd-r__c {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 500 12.2px/1.35 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
  }
  html.pc-on .dxx .dxd-r__i { min-width: 0; }
  html.pc-on .dxx .dxd-inv {
    display: inline-block; max-width: 100%; padding: 3px 8px; border-radius: 7px;
    background: rgba(75, 99, 255, .09);
    font-family: var(--font-ledger), monospace; font-size: 11.2px; font-weight: 580;
    color: var(--pc-indigo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html[data-theme="dark"].pc-on .dxx .dxd-inv { background: rgba(130, 145, 255, .13); color: #A6B2FF; }
  html.pc-on .dxx .dxd-none {
    font: 450 11.6px/1.35 var(--font), Inter, sans-serif; font-style: italic; color: var(--pc-ink-3);
  }
  html.pc-on .dxx .dxd-r__u { text-align: right; min-width: 0; }
  html.pc-on .dxx .dxd-r__u b {
    display: block; white-space: nowrap;
    font-family: var(--font-ledger), monospace; font-variant-numeric: tabular-nums;
    font-size: 12.4px; font-weight: 600; letter-spacing: -.022em; color: var(--pc-ink);
  }
  html.pc-on .dxx .dxd-r__u em {
    display: block; margin-top: 3px; font-style: normal; white-space: nowrap;
    font-family: var(--font-ledger), monospace; font-size: 10.4px; color: var(--pc-ink-3);
  }
  html.pc-on .dxx .dxd-r__x { display: flex; justify-content: flex-end; color: var(--pc-ink-3); }
  html.pc-on .dxx .dxd-r__x i { font-size: 12px; opacity: .45; }

  html.pc-on .dxx .dxd-empty { padding: 54px 24px 58px; text-align: center; }
  html.pc-on .dxx .dxd-empty__i {
    display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 15px;
    background: rgba(75, 99, 255, .1); color: var(--pc-indigo); font-size: 19px; margin-bottom: 14px;
  }
  html.pc-on .dxx .dxd-empty h3 {
    margin: 0; font: 640 15.5px/1.2 var(--font-display), Inter, sans-serif;
    letter-spacing: -.02em; color: var(--pc-ink);
  }
  html.pc-on .dxx .dxd-empty p {
    margin: 7px auto 0; max-width: 340px;
    font: 450 12.8px/1.45 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }

  /* the invoice-count hint under the editor's invoice select */
  html.pc-on .doc-invhint, .doc-invhint {
    display: block; margin-top: 6px;
    font: 450 11.4px/1.3 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }

  @media (prefers-reduced-motion: reduce) {
    html.pc-on .dxx .dxn { transition: none; }
    html.pc-on .dxx .dxn:hover { transform: none; }
  }
}


/* =====================================================================================
 *  THE WIDTH ROLLOUT  ·  v3.46.0
 *  -------------------------------------------------------------------------------
 *  `.pcx { max-width: 1480px }` (~16669) has never applied to anything, because
 *  `.view-root` caps at 1200px (~446). Five sections lifted it one at a time with their
 *  own `:has()` rule — Payments (v3.40.0), Customers (v3.41.0), Recurring (v3.42.0),
 *  Activity (v3.44.0), Documents (v3.45.0) — which left the dashboard and the invoices
 *  list 280px narrower than everything else at 1920. All five are retired for this.
 *
 *  ⚠ SCOPED TO `:has(.pcx)`, NOT APPLIED TO `.view-root` GLOBALLY, AND THE DIFFERENCE
 *  MATTERS. Email Templates, Users and Settings are still on the OLD idiom — no `.pcx`
 *  frame, no `--pc-gut` padding, `.ios-card` sections built for a 1200px column. Lifting
 *  `.view-root` unconditionally would stretch those three shipped screens to 1640px at
 *  1920 with nothing designed to fill it. `:has(.pcx)` widens exactly the pages that have
 *  the frame — the seven rebuilt ones today, and any future section automatically, the
 *  moment it adopts `.pcx`.
 *
 *  MEASURED: at 1920 the dashboard and invoices go 1200 -> 1480 (440px of empty page ->
 *  160). At 1512 they go 1200 -> 1232, which is the whole width available, so the two
 *  screens finally agree with the other five at every size.
 * ================================================================================== */
@media (min-width: 768px) {
  html.pc-on .view-root:has(.pcx) { max-width: none; }
}

/* =====================================================================================
 *  DESKTOP EMAIL TEMPLATES — "WHAT THEY RECEIVE"  ·  PC Native 2026  (v3.47.0)
 *  -------------------------------------------------------------------------------
 *  Replaces six cards that showed a subject and ~120 characters of body WITH THE TOKENS
 *  STILL SHOWING, so the one question this screen exists to answer — what does my
 *  customer actually receive — was the one thing it would not show. List on the left,
 *  the real email on the right, at a width an email client actually renders at.
 *
 *  `fillSample` / `greeting` / `recipient` / `SAMPLE` are REUSED from the phone, never
 *  reimplemented: two preview renderers drifting apart is how a preview starts lying.
 *
 *  ⚠ THE SWITCHES AND THE STATUS PILL ARE INDIGO, NOT GREEN. This is the v3.20.0
 *  Auto-bill finding, restated for the phone at v3.24.0 and again here: a switch is an
 *  interactive control and interactive is indigo everywhere in this app; green is the
 *  money-in colour and nothing on this screen is money. "Active" is a state, not an
 *  amount received. Do not put the green back.
 *
 *  ⚠ AND `.etx-note--off` IS AMBER, NOT CORAL. A switched-off template is not a failure —
 *  the email still goes out, with the built-in wording. Coral would say it is broken.
 * ================================================================================== */

@media (min-width: 768px) {

  /* the frame is `.pcx`, so v3.46.0's `:has(.pcx)` rule widens this automatically —
     nothing page-specific is needed for width any more */
  html.pc-on .etx { --etx-rail: 360px; }

  html.pc-on .etx .etx-note {
    display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px;
    padding: 12px 15px; border-radius: 14px;
    border: 1px solid var(--pc-hair); background: var(--pc-card-solid);
    font: 450 12.4px/1.45 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
  }
  html.pc-on .etx .etx-note i { font-size: 14px; margin-top: 1px; color: var(--pc-green); }
  html.pc-on .etx .etx-note b { font-weight: 640; color: var(--pc-ink); }
  /* ⚠ AMBER, NOT CORAL. A switched-off template is not a failure — the email still goes
     out, just with the built-in wording. Coral would say something is broken. */
  html.pc-on .etx .etx-note--off {
    border-color: rgba(182, 121, 18, .25); background: rgba(182, 121, 18, .08);
  }
  html.pc-on .etx .etx-note--off i { color: var(--pc-amber); }

  /* ================================================== LIST | PREVIEW
     MEASURED at 1512: content is 1512 - 232 - 48 - 60 = 1172. The list needs 360 for a
     name over a "used for" line plus a 40px switch; the preview takes the remaining 794,
     which is close to the 600–800px an email client actually renders at, so the sample
     wraps the way the real thing will. Below 1180 the preview would fall under 620 and
     start lying about line breaks, so the two stack instead. */
  html.pc-on .etx .etgrid {
    display: grid; grid-template-columns: var(--etx-rail) minmax(0, 1fr);
    gap: 18px; align-items: start;
  }
  @media (max-width: 1179px) {
    html.pc-on .etx .etgrid { grid-template-columns: minmax(0, 1fr); }
  }

  html.pc-on .etx .etlist {
    border-radius: var(--pc-r); overflow: hidden;
    background: var(--pc-card-solid); border: 1px solid var(--pc-hair); box-shadow: var(--pc-lift);
  }
  html.pc-on .etx .etr {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center; gap: 12px; padding: 12px 14px;
    border-bottom: 1px solid var(--pc-hair); cursor: pointer; outline: none;
    position: relative;
  }
  html.pc-on .etx .etr:last-child { border-bottom: 0; }
  /* selection, not hover — the row loads the preview, so you need to see which one */
  html.pc-on .etx .etr.is-sel { background: rgba(75, 99, 255, .055); }
  html[data-theme="dark"].pc-on .etx .etr.is-sel { background: rgba(130, 145, 255, .085); }
  html.pc-on .etx .etr.is-sel::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pc-indigo);
  }
  html.pc-on .etx .etr:focus-visible { box-shadow: inset 0 0 0 2px rgba(75, 99, 255, .5); }
  html.pc-on .etx .etr__ic {
    width: 34px; height: 34px; border-radius: 11px; display: inline-grid; place-items: center;
    font-size: 14px; background: rgba(75, 99, 255, .09); color: var(--pc-indigo);
  }
  html[data-theme="dark"].pc-on .etx .etr__ic { background: rgba(130, 145, 255, .13); color: #A6B2FF; }
  html.pc-on .etx .etr__id { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  html.pc-on .etx .etr__id b {
    font: 620 13.2px/1.2 var(--font-display), Inter, sans-serif; letter-spacing: -.016em;
    color: var(--pc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.pc-on .etx .etr__id em {
    font-style: normal; font: 450 11.2px/1.25 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* an off row is legibly off, not just missing a badge */
  html.pc-on .etx .etr.is-off .etr__ic { background: rgba(20, 28, 60, .05); color: var(--pc-ink-3); }
  html[data-theme="dark"].pc-on .etx .etr.is-off .etr__ic { background: rgba(255, 255, 255, .06); }
  html.pc-on .etx .etr.is-off .etr__id b { color: var(--pc-ink-3); }

  /* ⚠ THE SWITCH IS INDIGO, NOT GREEN — the v3.20.0 Auto-bill finding, restated on the
     phone at v3.24.0 and again here. A switch is an interactive control; interactive is
     indigo everywhere in this app. Green is the money-in colour and nothing here is
     money. Do not put the green back. */
  html.pc-on .etx .etr__sw {
    position: relative; width: 38px; height: 22px; border-radius: 11px; border: 0; padding: 0;
    background: rgba(20, 28, 60, .16); cursor: pointer; flex: 0 0 auto;
    transition: background .18s var(--pc-ease);
  }
  html[data-theme="dark"].pc-on .etx .etr__sw { background: rgba(255, 255, 255, .18); }
  html.pc-on .etx .etr__sw::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 48, .3);
    transition: transform .18s var(--pc-ease);
  }
  html.pc-on .etx .etr__sw.is-on { background: var(--pc-indigo); }
  html.pc-on .etx .etr__sw.is-on::after { transform: translateX(16px); }
  html.pc-on .etx .etr__sw:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(75, 99, 255, .35); }

  /* ================================================== THE EMAIL */
  html.pc-on .etx .etpv {
    border-radius: var(--pc-r); padding: 18px 20px 20px;
    background: var(--pc-card-solid); border: 1px solid var(--pc-hair); box-shadow: var(--pc-lift);
  }
  html.pc-on .etx .etpv__hd { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  html.pc-on .etx .etpv__lbl {
    font: 620 10.4px/1 var(--font), Inter, sans-serif; letter-spacing: .085em;
    text-transform: uppercase; color: var(--pc-ink-3);
  }
  /* ⚠ NOT GREEN. "Active" is a state, not an amount received — same rule as the switch. */
  html.pc-on .etx .etpv__st {
    padding: 3px 9px; border-radius: 7px;
    background: rgba(75, 99, 255, .1); color: var(--pc-indigo);
    font: 620 10.4px/1.5 var(--font), Inter, sans-serif;
  }
  html[data-theme="dark"].pc-on .etx .etpv__st { background: rgba(130, 145, 255, .14); color: #A6B2FF; }
  html.pc-on .etx .etpv__st.is-off,
  html[data-theme="dark"].pc-on .etx .etpv__st.is-off {
    background: rgba(182, 121, 18, .13); color: var(--pc-amber);
  }
  html.pc-on .etx .etpv__edit {
    margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
    height: 32px; padding: 0 13px; border-radius: var(--pc-r-sm); cursor: pointer;
    border: 1px solid var(--pc-hair-2); background: transparent; color: var(--pc-ink-2);
    font: 580 12.4px/1 var(--font), Inter, sans-serif;
    transition: background .16s var(--pc-ease), color .16s var(--pc-ease), border-color .16s var(--pc-ease);
  }
  html.pc-on .etx .etpv__edit:hover { background: rgba(75, 99, 255, .08); color: var(--pc-indigo); border-color: transparent; }
  html.pc-on .etx .etpv__warn {
    display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; padding: 10px 12px;
    border-radius: 12px; background: rgba(182, 121, 18, .1); color: var(--pc-amber);
    font: 450 11.9px/1.45 var(--font), Inter, sans-serif;
  }
  html.pc-on .etx .etpv__warn i { font-size: 13px; margin-top: 1px; }

  /* the mail window: a real one, at a real width */
  html.pc-on .etx .etmail {
    border-radius: 16px; overflow: hidden;
    border: 1px solid var(--pc-hair); background: var(--pc-card-solid);
  }
  html.pc-on .etx .etmail__from {
    display: flex; align-items: center; gap: 11px; padding: 13px 16px;
    border-bottom: 1px solid var(--pc-hair); background: rgba(20, 28, 60, .018);
  }
  html[data-theme="dark"].pc-on .etx .etmail__from { background: rgba(255, 255, 255, .022); }
  html.pc-on .etx .etmail__ava {
    width: 34px; height: 34px; border-radius: 11px; display: inline-grid; place-items: center;
    background: var(--pc-grad); color: #fff;
    font: 640 12px/1 var(--font-display), Inter, sans-serif;
  }
  html.pc-on .etx .etmail__who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  html.pc-on .etx .etmail__who b { font: 620 12.8px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink); }
  html.pc-on .etx .etmail__who span { font: 450 11.2px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }
  html.pc-on .etx .etmail__time {
    margin-left: auto; font: 450 11px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  html.pc-on .etx .etmail__subj {
    padding: 15px 20px 0;
    font: 660 15.5px/1.35 var(--font-display), Inter, sans-serif; letter-spacing: -.02em;
    color: var(--pc-ink);
  }
  /* ⚠ NO CLAMP AND NO FADE. The v3.24.0 note on the phone: the old preview sliced the
     message mid-sentence behind a gradient, so it promised a whole email and delivered
     two thirds. There is room here — the message renders in full and the sign-off is
     always present, so what you see ends where the email ends. */
  html.pc-on .etx .etmail__body { padding: 14px 20px 20px; }
  html.pc-on .etx .etmail__msg {
    font: 450 13.4px/1.65 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
  }
  html.pc-on .etx .etmail__msg p { margin: 0 0 10px; }
  html.pc-on .etx .etmail__msg--none em { color: var(--pc-ink-3); }
  html.pc-on .etx .etmail__sign {
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--pc-hair);
    font: 450 13px/1.6 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
  }
  /* the filled-in sample values, so a variable is visibly a variable */
  html.pc-on .etx .et-var {
    padding: 1px 5px; border-radius: 5px;
    background: rgba(75, 99, 255, .1); color: var(--pc-indigo); font-weight: 560;
  }
  html[data-theme="dark"].pc-on .etx .et-var { background: rgba(130, 145, 255, .14); color: #A6B2FF; }
  /* a variable this template does NOT fill in — sent to the customer as literal braces */
  html.pc-on .etx .et-var--miss,
  html[data-theme="dark"].pc-on .etx .et-var--miss {
    background: rgba(182, 121, 18, .14); color: var(--pc-amber);
    text-decoration: underline dotted; text-underline-offset: 2px;
  }
  html.pc-on .etx .etpv__ph { color: var(--pc-ink-3); font-style: italic; }

  html.pc-on .etx .etpv__vars {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 16px;
    padding-top: 14px; border-top: 1px solid var(--pc-hair);
  }
  html.pc-on .etx .etpv__vars-l {
    margin-right: 4px; font: 620 10.2px/1 var(--font), Inter, sans-serif;
    letter-spacing: .085em; text-transform: uppercase; color: var(--pc-ink-3);
  }
  html.pc-on .etx .etpv__vars code {
    padding: 3px 8px; border-radius: 7px; border: 1px solid var(--pc-hair);
    background: rgba(20, 28, 60, .03);
    font-family: var(--font-ledger), monospace; font-size: 11px; color: var(--pc-ink-2);
  }
  html[data-theme="dark"].pc-on .etx .etpv__vars code { background: rgba(255, 255, 255, .04); }

  @media (prefers-reduced-motion: reduce) {
    html.pc-on .etx .etr__sw, html.pc-on .etx .etr__sw::after,
    html.pc-on .etx .etpv__edit { transition: none; }
  }
}

/* =====================================================================================
 *  DESKTOP USERS — "WHO HAS ACCESS"  ·  PC Native 2026  (v3.48.0)
 *  -------------------------------------------------------------------------------
 *  Grouped by role, because that is how access is audited: you want to see who is an
 *  admin, not read a flat table and add it up. Each group carries what the role can
 *  actually DO, beside the people who have it — the old screen put that in one blue
 *  paragraph at the top, read once and never again, and never while you were looking at
 *  the person you were about to change.
 *
 *  ⚠ THE OWNER ROW IS DERIVED, NOT STORED. There is no `is_owner` column anywhere in the
 *  app or the schema; the owner is the EARLIEST-CREATED profile, which is a real fact in
 *  `created_at`. Its stored role remains `admin` — this is a LABEL, and the missing role
 *  picker is a GUARDRAIL IN THE UI, NOT ENFORCEMENT. Another admin could still demote it
 *  through the API. Real protection needs an `is_owner` column and an RLS policy.
 *
 *  ⚠ THE SWITCHES ARE INDIGO, NOT GREEN (v3.20.0 Auto-bill finding, third restatement).
 *  The ONE green here is the signed-in status tick, which is a state of being admitted,
 *  not a control. Avatars are the indigo ramp: this screen spends colour in earnest three
 *  cells to the right (amber for an unaccepted invite), and six saturated avatars beside
 *  that would make the status colours read as decoration.
 * ================================================================================== */

@media (min-width: 768px) {

  html.pc-on .umx { --umr-pad: 16px; }

  /* ---- the standing note ---- */
  html.pc-on .umx .umx-note {
    display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px;
    padding: 12px 15px; border-radius: 14px;
    border: 1px solid var(--pc-hair); background: var(--pc-card-solid);
    font: 450 12.4px/1.45 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
  }
  html.pc-on .umx .umx-note i { font-size: 14px; margin-top: 1px; color: var(--pc-indigo); }
  html.pc-on .umx .umx-note b { font-weight: 640; color: var(--pc-ink); }
  /* ⚠ AMBER, NOT CORAL. Being the only admin is not a failure — it is a risk worth
     naming. Coral would say something is already wrong. */
  html.pc-on .umx .umx-note--warn {
    border-color: rgba(182, 121, 18, .25); background: rgba(182, 121, 18, .08);
  }
  html.pc-on .umx .umx-note--warn i { color: var(--pc-amber); }
  html.pc-on .umx .umx-note--warn b { color: var(--pc-amber); }

  /* ---- role group header ---- */
  html.pc-on .umx .umgrp {
    display: flex; align-items: baseline; gap: 10px; margin: 24px 0 10px;
  }
  html.pc-on .umx .umgrp:first-child { margin-top: 0; }
  html.pc-on .umx .umgrp__l {
    display: inline-flex; align-items: center; gap: 6px;
    font: 620 10.4px/1 var(--font), Inter, sans-serif; letter-spacing: .085em;
    text-transform: uppercase; color: var(--pc-ink); white-space: nowrap;
  }
  html.pc-on .umx .umgrp__l i { font-size: 12px; color: var(--pc-indigo); }
  html.pc-on .umx .umgrp__d {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 450 11.6px/1.3 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  html.pc-on .umx .umgrp__n {
    margin-left: auto; padding: 2px 8px; border-radius: 6px;
    background: rgba(20, 28, 60, .06); color: var(--pc-ink-3);
    font: 600 10.6px/1.5 var(--font), Inter, sans-serif;
  }
  html[data-theme="dark"].pc-on .umx .umgrp__n { background: rgba(255, 255, 255, .07); }

  /* the owner's group reads as the account the workspace belongs to, not as a rank */
  html.pc-on .umx .umgrp__l--own i { color: var(--pc-gold-b); }
  html.pc-on .umx .umcard--own { border-color: rgba(160, 120, 30, .3); }
  html[data-theme="dark"].pc-on .umx .umcard--own { border-color: rgba(224, 168, 74, .28); }
  html.pc-on .umx .umr__own {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px;
    background: rgba(182, 121, 18, .1); color: var(--pc-gold-b);
    font: 600 12px/1.4 var(--font), Inter, sans-serif; white-space: nowrap;
  }
  html[data-theme="dark"].pc-on .umx .umr__own { background: rgba(224, 168, 74, .14); color: var(--pc-gold-a); }
  html.pc-on .umx .umr__own i { font-size: 11px; }

  html.pc-on .umx .umcard {
    border-radius: var(--pc-r); overflow: hidden;
    background: var(--pc-card-solid); border: 1px solid var(--pc-hair); box-shadow: var(--pc-lift);
  }

  /* ---- one person ----
     MEASURED at 1512: content is 1172. Fixed 250 + 150 + 96 = 496, plus three 16px gaps
     (48) and 2x16 padding (32) = 576, so the name column gets 596. NO ROW HOVER
     (standing v3.38.0 decision) — the row is not clickable here, every control on it is. */
  html.pc-on .umx .umr {
    display: grid; grid-template-columns: minmax(0, 1fr) 250px 150px 96px;
    align-items: center; column-gap: 16px;
    padding: 12px var(--umr-pad); border-bottom: 1px solid var(--pc-hair);
  }
  html.pc-on .umx .umr:last-child { border-bottom: 0; }
  html.pc-on .umx .umr.is-off { background: rgba(20, 28, 60, .022); }
  html[data-theme="dark"].pc-on .umx .umr.is-off { background: rgba(255, 255, 255, .022); }
  html.pc-on .umx .umr.is-off .umr__av { filter: grayscale(1); opacity: .6; }
  html.pc-on .umx .umr.is-off .umr__id b { color: var(--pc-ink-3); }

  html.pc-on .umx .umr__n { display: flex; align-items: center; gap: 12px; min-width: 0; }
  html.pc-on .umx .umr__av {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 12px; display: inline-grid;
    place-items: center; color: #fff; letter-spacing: -.01em;
    font: 640 13px/1 var(--font-display), Inter, sans-serif;
    box-shadow: 0 2px 7px -3px rgba(20, 28, 70, .5);
  }
  html.pc-on .umx .umr__id { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  html.pc-on .umx .umr__id b {
    display: flex; align-items: center; gap: 8px; min-width: 0;
    font: 620 13.4px/1.2 var(--font-display), Inter, sans-serif; letter-spacing: -.016em;
    color: var(--pc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.pc-on .umx .umr__you {
    flex: 0 0 auto; padding: 2px 7px; border-radius: 6px; letter-spacing: 0;
    background: rgba(75, 99, 255, .1); color: var(--pc-indigo);
    font: 600 10px/1.5 var(--font), Inter, sans-serif;
  }
  html[data-theme="dark"].pc-on .umx .umr__you { background: rgba(130, 145, 255, .14); color: #A6B2FF; }
  html.pc-on .umx .umr__id em {
    font-style: normal; font: 450 11.4px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* ⚠ COLOUR IS STATUS. An unaccepted invitation is amber (waiting, not wrong); a
     deactivated account is quiet ink (deliberate, not broken); a live one gets green,
     which is the ONE legitimate green on this screen because it is a state of being
     admitted, not a control. The switch below is indigo. */
  html.pc-on .umx .umr__st {
    display: flex; align-items: center; gap: 7px; min-width: 0;
    font: 500 11.9px/1.3 var(--font), Inter, sans-serif;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html.pc-on .umx .umr__st i { font-size: 12px; flex: 0 0 auto; }
  html.pc-on .umx .umr__st--on { color: var(--pc-ink-3); }
  html.pc-on .umx .umr__st--on i { color: var(--pc-green); }
  html.pc-on .umx .umr__st--wait { color: var(--pc-amber); }
  html.pc-on .umx .umr__st--off { color: var(--pc-ink-3); }

  html.pc-on .umx .umr__r { min-width: 0; }
  /* ⚠ SCOPED TO `select.um-f`. HaaltdSelect copies the select's className onto its own
     button, so an unqualified `.um-f` rule also hits the button and the caret space is
     reserved twice. */
  html.pc-on .umx select.um-f {
    height: 32px; padding: 0 28px 0 10px; border-radius: 9px; width: 100%; min-width: 0;
    border: 1px solid var(--pc-hair); background-color: transparent; box-shadow: none;
    font: 545 12.4px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
  }
  html.pc-on .umx select.um-f:disabled { opacity: .55; }

  html.pc-on .umx .umr__a { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
  /* ⚠ INDIGO, NOT GREEN — the v3.20.0 Auto-bill finding again. A switch is a control. */
  html.pc-on .umx .umr__sw {
    position: relative; width: 38px; height: 22px; border-radius: 11px; border: 0; padding: 0;
    background: rgba(20, 28, 60, .16); cursor: pointer; flex: 0 0 auto;
    transition: background .18s var(--pc-ease);
  }
  html[data-theme="dark"].pc-on .umx .umr__sw { background: rgba(255, 255, 255, .18); }
  html.pc-on .umx .umr__sw::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 48, .3);
    transition: transform .18s var(--pc-ease);
  }
  html.pc-on .umx .umr__sw.is-on { background: var(--pc-indigo); }
  html.pc-on .umx .umr__sw.is-on::after { transform: translateX(16px); }
  html.pc-on .umx .umr__sw:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(75, 99, 255, .35); }

  /* a destructive control, so it is quiet until you reach for it */
  html.pc-on .umx .umr__del {
    width: 30px; height: 30px; border: 0; border-radius: 9px; background: transparent;
    color: var(--pc-ink-3); cursor: pointer; display: inline-grid; place-items: center;
    transition: background .16s var(--pc-ease), color .16s var(--pc-ease);
  }
  html.pc-on .umx .umr__del:hover { background: rgba(197, 39, 30, .1); color: var(--pc-coral); }
  html.pc-on .umx .umr__del i { font-size: 12.5px; }
  /* your own row has neither control — the safeguard, stated rather than hidden */
  html.pc-on .umx .umr__self {
    font: 450 11.2px/1.3 var(--font), Inter, sans-serif; font-style: italic;
    color: var(--pc-ink-3); white-space: nowrap;
  }

  html.pc-on .umx .umd-empty { padding: 54px 24px 58px; text-align: center; }
  html.pc-on .umx .umd-empty__i {
    display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 15px;
    background: rgba(75, 99, 255, .1); color: var(--pc-indigo); font-size: 19px; margin-bottom: 14px;
  }
  html.pc-on .umx .umd-empty h3 {
    margin: 0; font: 640 15.5px/1.2 var(--font-display), Inter, sans-serif;
    letter-spacing: -.02em; color: var(--pc-ink);
  }
  html.pc-on .umx .umd-empty p {
    margin: 7px auto 0; max-width: 340px;
    font: 450 12.8px/1.45 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }

  /* ⚠ MEASURED, AND MY FIRST GUESS OF 1099 WAS 80px TOO LOW. Fixed tracks 250 + 150 + 96
     = 496, plus three 16px gaps (48) and 2x16 padding (32) = 576. The name cell also
     spends 48 on the avatar and its gap, so the TEXT gets `table - 624`. The longest real
     name here — "Rebecca Whitmore-Castleford" — needs 179, so the table must be at least
     803, i.e. a viewport of 1143. At 1100 the text had 134 and clipped; audited at 2 of
     22 width/theme combinations. Reflowed below 1180, the first standard step clear of
     1143. Three columns then give the text 402 at 1100 and 302 at 768. */
  @media (max-width: 1179px) {
    html.pc-on .umx .umr { grid-template-columns: minmax(0, 1fr) 150px 96px; row-gap: 8px; }
    html.pc-on .umx .umr__st { grid-column: 1 / -1; padding-left: 48px; }
  }

  @media (prefers-reduced-motion: reduce) {
    html.pc-on .umx .umr__sw, html.pc-on .umx .umr__sw::after,
    html.pc-on .umx .umr__del { transition: none; }
  }
}

/* =====================================================================================
 *  DESKTOP SETTINGS — "THE SETTINGS DOCUMENT"  ·  PC Native 2026  (v3.49.0)
 *  -------------------------------------------------------------------------------
 *  Settings is FORM-HEAVY, so the list-and-rail shape of the other seven desktop
 *  sections does not transfer. The five staged forms are ONE document (Company,
 *  Payment & banking, Regional & tax, Reminders, Accountant) with a sticky contents
 *  rail + scroll-spy; Invoice design is a studio (controls | a sticky sheet of the REAL
 *  PDF); Appearance, Backup & restore and About are pages. The save bar is a dock that
 *  exists only while something is staged, and names where. See settings.js ~"v3.49.0".
 *
 *  ⚠ CONTAINER QUERIES, NOT VIEWPORT MEDIA, for every layout switch below. The sidebar
 *  is 232 wide, 76 collapsed, and an off-canvas drawer below 992 — a viewport breakpoint
 *  is wrong by 156px in one of those states. Containers: `stg` (.stg, the page frame)
 *  and `stgmain` (.stg-main, the column right of the rail).
 *
 *  ⚠ THE OLD DESKTOP SKIN IS STILL IN injectStyles() (settings.js), and the hook classes
 *  (.preset-card, .exp-mode, .thm-card, .fnt-tile …) still carry pre-v3.10 skins from it
 *  and from ~2150/~2718. Every place that reuses a hook class restates or `all: unset`s.
 *  The injected .setnav/.setwrap/.set-savebar rules are now DEAD on desktop; left in
 *  place because injectStyles also serves the phone, which is frozen.
 *
 *  WIDTHS (measured, sidebar 232, .pcx gutters 2x30):  W = viewport - 292
 *    main   = W - 212 (rail) - 36 (gap)             = W - 248
 *    fields = main - 2 (border) - 56 (pad) - 232 (row head) - 36 (gap) = W - 574
 *    a third-width field = (fields - 5x16) / 3 + 16. Country ("United Kingdom", 13.4px)
 *    needs ~128 -> fields >= 480 -> W >= 1054.  Below W 1060 the row head stacks ABOVE
 *    its fields (fields = W - 306, ample).
 *    The rail is dropped below a container of 840 (viewport 1132 with the sidebar): the
    container at 1100 measured 760, main 512, and a half field 219 — the tagline clipped.
    Below 992 the sidebar is an off-canvas drawer, so the container is viewport - 108.
 *  Container queries on .stg rather than viewport media, because the sidebar collapses
 *  (232 -> 76) and a viewport breakpoint would be wrong by 156px in that state.
 * ================================================================================== */
@media (min-width: 768px) {

  html.pc-on .stg { container: stg / inline-size; }

  html.pc-on .stg-wrap {
    display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: 36px; align-items: start;
  }

  /* ---------------------------------------------------------------- contents rail */
  /* ⚠ TRAP 2: measured before making it sticky — 9 items + 3 group titles = 452px, which
     fits under the 84px offset down to a 560px-tall window. */
  html.pc-on .stg-toc { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 14px; }
  html.pc-on .stg-toc__g { display: flex; flex-direction: column; gap: 1px; }
  html.pc-on .stg-toc__gt {
    margin: 0 0 5px; padding: 0 11px;
    font: 600 11.4px/1.3 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  html.pc-on .stg-toc__i {
    display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 11px;
    border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer;
    font: 540 13.2px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-2); white-space: nowrap;
    transition: background .16s var(--pc-ease), color .16s var(--pc-ease);
  }
  html.pc-on .stg-toc__i > span:not(.stg-toc__dot) { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  html.pc-on .stg-toc__i i { font-size: 14px; width: 16px; text-align: center; color: var(--pc-ink-3); flex: 0 0 auto; }
  html.pc-on .stg-toc__i:hover { color: var(--pc-ink); }
  html.pc-on .stg-toc__i.is-on { background: rgba(75, 99, 255, .1); color: var(--pc-indigo); font-weight: 610; }
  html.pc-on .stg-toc__i.is-on i { color: var(--pc-indigo); }
  html[data-theme="dark"].pc-on .stg-toc__i.is-on { background: rgba(130, 145, 255, .13); color: #A6B2FF; }
  html[data-theme="dark"].pc-on .stg-toc__i.is-on i { color: #A6B2FF; }
  html.pc-on .stg-toc__i:focus-visible { outline: none; box-shadow: 0 0 0 3.5px rgba(75, 99, 255, .3); }
  /* unsaved marker — INDIGO: unsaved is a state of the editor, not a money status */
  html.pc-on .stg-toc__dot {
    margin-left: auto; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
    background: var(--pc-indigo); box-shadow: 0 0 0 3px rgba(75, 99, 255, .16);
    opacity: 0; transform: scale(.4); transition: opacity .18s var(--pc-ease), transform .18s var(--pc-ease);
  }
  html.pc-on .stg-toc__i.has-dirty .stg-toc__dot { opacity: 1; transform: none; }
  html[data-theme="dark"].pc-on .stg-toc__dot { background: #8C9BFF; }

  /* ---------------------------------------------------------------- sections */
  html.pc-on .stg-doc { padding-bottom: 72px; }
  html.pc-on .stg-sec { margin-bottom: 38px; scroll-margin-top: 84px; }
  html.pc-on .stg-sec__h { display: flex; align-items: center; gap: 13px; margin: 0 0 14px; }
  html.pc-on .stg-sec__ic {
    width: 34px; height: 34px; border-radius: 11px; display: inline-grid; place-items: center; flex: 0 0 auto;
    background: rgba(75, 99, 255, .1); color: var(--pc-indigo); font-size: 15px;
  }
  html[data-theme="dark"].pc-on .stg-sec__ic { background: rgba(130, 145, 255, .14); color: #A6B2FF; }
  html.pc-on .stg-sec__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  html.pc-on .stg-sec__t h2 {
    margin: 0; font: 680 18px/1.15 var(--font-display), Inter, sans-serif; letter-spacing: -.022em; color: var(--pc-ink);
  }
  html.pc-on .stg-sec__t p { margin: 0; font: 450 12.8px/1.35 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }

  /* OPAQUE, not glass (§4.11.5): a long form, and it sits beside a sticky rail */
  html.pc-on .stg-card {
    border-radius: var(--pc-r); background: var(--pc-card-solid);
    border: 1px solid var(--pc-hair); box-shadow: var(--pc-lift);
  }
  html.pc-on .stg-row {
    display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 36px;
    padding: 24px 28px; border-top: 1px solid var(--pc-hair);
  }
  html.pc-on .stg-card > .stg-row:first-child { border-top: 0; }
  html.pc-on .stg-row__h h3 {
    margin: 2px 0 0; font: 620 13.6px/1.3 var(--font-display), Inter, sans-serif; letter-spacing: -.012em; color: var(--pc-ink);
  }
  html.pc-on .stg-row__h p { margin: 6px 0 0; font: 450 12.3px/1.5 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }
  html.pc-on .stg-row__h p strong { font-weight: 620; color: var(--pc-ink-2); }
  html.pc-on .stg-row__f {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; align-content: start; min-width: 0;
  }

  /* ---------------------------------------------------------------- fields */
  html.pc-on .stg-f { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; grid-column: span 3; }
  html.pc-on .stg-f--2 { grid-column: span 2; }
  html.pc-on .stg-f--4 { grid-column: span 4; }
  html.pc-on .stg-f--6 { grid-column: 1 / -1; }
  html.pc-on .stg-f__l { font: 560 12px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.pc-on .stg-f__h { font: 450 11.6px/1.4 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }

  html.pc-on .stg .stg-in,
  html.pc-on .stg select.stg-sel {
    width: 100%; min-width: 0; height: 38px; padding: 0 12px; margin: 0; border-radius: 10px;
    border: 1px solid var(--pc-hair-2); background: rgba(20, 28, 60, .022); box-shadow: none;
    font: 460 13.4px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink); outline: none;
    transition: border-color .16s var(--pc-ease), box-shadow .16s var(--pc-ease), background .16s var(--pc-ease);
  }
  html[data-theme="dark"].pc-on .stg .stg-in,
  html[data-theme="dark"].pc-on .stg select.stg-sel { background: rgba(255, 255, 255, .035); }
  html.pc-on .stg .stg-in::placeholder { color: var(--pc-ink-3); opacity: .7; }
  html.pc-on .stg .stg-in:hover { border-color: rgba(18, 26, 58, .22); }
  html[data-theme="dark"].pc-on .stg .stg-in:hover { border-color: rgba(255, 255, 255, .22); }
  html.pc-on .stg .stg-in:focus {
    border-color: var(--pc-indigo); background: var(--pc-card-solid);
    box-shadow: 0 0 0 3.5px rgba(75, 99, 255, .18);
  }
  html[data-theme="dark"].pc-on .stg .stg-in:focus { border-color: #8C9BFF; box-shadow: 0 0 0 3.5px rgba(130, 145, 255, .22); }
  html.pc-on .stg .stg-in--mono {
    font: 500 13px/1.2 var(--font-ledger), 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .01em;
  }
  html.pc-on .stg .stg-ta { height: auto; min-height: 64px; padding: 10px 12px; line-height: 1.5; resize: vertical; }

  html.pc-on .stg .stg-inw { position: relative; display: block; }
  html.pc-on .stg .stg-inw .stg-in { padding-right: 52px; font-family: var(--font-ledger), 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }
  html.pc-on .stg .stg-inw__u {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none;
    font: 500 12.2px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }

  /* HaaltdSelect: its default is a toolbar pill; here it has to read as a FIELD.
     ⚠ TRAP 7: the button carries `stg-sel` too, so the select rule above is `select.stg-sel`. */
  html.pc-on .stg .hsel__btn.stg-sel {
    width: 100%; max-width: none; height: 38px; padding: 0 12px; border-radius: 10px; justify-content: flex-start; gap: 8px;
    border: 1px solid var(--pc-hair-2); background-color: rgba(20, 28, 60, .022);
    font: 460 13.4px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink);
  }
  html[data-theme="dark"].pc-on .stg .hsel__btn.stg-sel { background-color: rgba(255, 255, 255, .035); color: var(--pc-ink); }
  html.pc-on .stg .hsel__btn.stg-sel .hsel__val { flex: 1; min-width: 0; text-align: left; }
  html.pc-on .stg .hsel__btn.stg-sel .hsel__caret { margin-left: auto; }
  html.pc-on .stg .hsel__btn.stg-sel:hover { background-color: rgba(20, 28, 60, .022); border-color: rgba(18, 26, 58, .22); color: var(--pc-ink); }
  html.pc-on .stg .hsel__btn.stg-sel.is-open { border-color: var(--pc-indigo); color: var(--pc-ink); box-shadow: 0 0 0 3.5px rgba(75, 99, 255, .18); }

  /* ---------------------------------------------------------------- identity */
  html.pc-on .stg-id {
    display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px;
    border: 1px dashed var(--pc-hair-2); background: rgba(20, 28, 60, .018);
  }
  html[data-theme="dark"].pc-on .stg-id { background: rgba(255, 255, 255, .025); }
  html.pc-on .stg-logo {
    width: 52px; height: 52px; border-radius: 14px; flex: 0 0 auto; display: inline-grid; place-items: center;
    background: var(--pc-grad); color: #fff; overflow: hidden;
    font: 700 17px/1 var(--font-display), Inter, sans-serif; letter-spacing: -.02em;
    box-shadow: 0 8px 18px -10px rgba(61, 79, 224, .9), inset 0 1px 0 rgba(255, 255, 255, .3);
  }
  html.pc-on .stg-logo.has-img { background: #fff; box-shadow: inset 0 0 0 1px var(--pc-hair); }
  html.pc-on .stg-logo img { max-width: 86%; max-height: 86%; object-fit: contain; }
  html.pc-on .stg-id__b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  html.pc-on .stg-id__b b { font: 620 13.4px/1.2 var(--font-display), Inter, sans-serif; color: var(--pc-ink); }
  html.pc-on .stg-id__b span { font: 450 12px/1.4 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }
  html.pc-on .stg-id__a { margin-left: auto; display: flex; gap: 8px; flex: 0 0 auto; }
  html.pc-on .stg-id__a .pcx-ghost { height: 34px; }

  /* ---------------------------------------------------------------- regional preview */
  html.pc-on .stg-pv {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding: 13px 16px; border-radius: 13px;
    background: rgba(75, 99, 255, .055); border: 1px solid rgba(75, 99, 255, .14);
  }
  html[data-theme="dark"].pc-on .stg-pv { background: rgba(130, 145, 255, .08); border-color: rgba(130, 145, 255, .18); }
  html.pc-on .stg-pv__k { font: 600 11.6px/1.2 var(--font), Inter, sans-serif; color: var(--pc-indigo); white-space: nowrap; }
  html[data-theme="dark"].pc-on .stg-pv__k { color: #A6B2FF; }
  /* a SAMPLE amount, not headline money — ink, not gold (§4.11.3) */
  html.pc-on .stg-pv__amt {
    font: 600 21px/1 var(--font-ledger), 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;
    letter-spacing: -.02em; color: var(--pc-ink); white-space: nowrap;
  }
  html.pc-on .stg-pv__d {
    margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 0;
    font: 500 13px/1.2 var(--font-ledger), 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; color: var(--pc-ink-2);
  }
  html.pc-on .stg-pv__tz { font: 450 11.4px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink-3); white-space: nowrap; }

  /* ---------------------------------------------------------------- reminders cadence */
  html.pc-on .stg .stg-cad {
    padding: 18px 28px 16px; gap: 11px; border-bottom: 1px solid var(--pc-hair);
    border-radius: var(--pc-r) var(--pc-r) 0 0; background: rgba(20, 28, 60, .018);
  }
  html[data-theme="dark"].pc-on .stg .stg-cad { background: rgba(255, 255, 255, .02); }
  html.pc-on .stg .stg-cad + .stg-row { border-top: 0; }
  html.pc-on .stg .sx-cad__row { gap: 7px; }
  html.pc-on .stg .sx-cad__pip {
    font: 560 11.8px/1 var(--font-ledger), 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;
    padding: 6px 10px; border-radius: 8px; color: var(--pc-ink-2); background: rgba(20, 28, 60, .06); box-shadow: none;
  }
  html[data-theme="dark"].pc-on .stg .sx-cad__pip { color: var(--pc-ink-2); background: rgba(255, 255, 255, .07); }
  /* colour is STATUS here, as everywhere: the due date, then due-and-late, then the tail */
  html.pc-on .stg .sx-cad__pip--due { color: #fff; background: var(--pc-grad); box-shadow: 0 6px 12px -8px rgba(61, 79, 224, .9); }
  html[data-theme="dark"].pc-on .stg .sx-cad__pip--due { color: #fff; background: var(--pc-grad); }
  html.pc-on .stg .sx-cad__pip--late { color: var(--pc-amber); background: rgba(182, 121, 18, .11); }
  html[data-theme="dark"].pc-on .stg .sx-cad__pip--late { color: var(--pc-amber); background: rgba(245, 184, 74, .13); }
  html.pc-on .stg .sx-cad__pip--tail { color: var(--pc-coral); background: rgba(197, 39, 30, .09); }
  html[data-theme="dark"].pc-on .stg .sx-cad__pip--tail { color: var(--pc-coral); background: rgba(255, 107, 99, .14); }
  html.pc-on .stg .sx-cad__arw { color: var(--pc-ink-3); opacity: .6; }
  html.pc-on .stg .sx-cad__cap { font: 450 12.3px/1.45 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }

  /* ---------------------------------------------------------------- toggle row */
  html.pc-on .stg-tog { display: flex; align-items: center; gap: 18px; }
  html.pc-on .stg-tog__b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  html.pc-on .stg-tog__b b { font: 600 13.4px/1.25 var(--font), Inter, sans-serif; color: var(--pc-ink); }
  html.pc-on .stg-tog__b span { font: 450 12.2px/1.45 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }
  html.pc-on .stg-tog .ios-switch { margin-left: auto; flex: 0 0 auto; }

  /* ---------------------------------------------------------------- option cards */
  html.pc-on .stg-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* ⚠ `.exp-mode` still carries its pre-v3.10 card skin (~2153): a COLUMN layout, a 2px
     border and a translateY(-2px) hover lift. Every one is restated here. */
  html.pc-on .stg-opt {
    display: flex; flex-direction: row; align-items: flex-start; transform: none; gap: 12px; padding: 14px 16px; border-radius: 13px; text-align: left;
    border: 1px solid var(--pc-hair-2); background: transparent; cursor: pointer; min-width: 0;
    transition: border-color .16s var(--pc-ease), background .16s var(--pc-ease), box-shadow .16s var(--pc-ease);
  }
  html.pc-on .stg-opt:hover { border-color: rgba(75, 99, 255, .38); transform: none; }
  html.pc-on .stg-opt.is-on { border-color: var(--pc-indigo); background: rgba(75, 99, 255, .05); box-shadow: 0 0 0 1px var(--pc-indigo) inset; }
  html[data-theme="dark"].pc-on .stg-opt.is-on { border-color: #8C9BFF; background: rgba(130, 145, 255, .08); box-shadow: 0 0 0 1px #8C9BFF inset; }
  html.pc-on .stg-opt:focus-visible { outline: none; box-shadow: 0 0 0 3.5px rgba(75, 99, 255, .3); }
  html.pc-on .stg-opt__r {
    width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; margin-top: 1px;
    border: 1.5px solid var(--pc-hair-2); background: var(--pc-card-solid); transition: all .16s var(--pc-ease);
  }
  html.pc-on .stg-opt.is-on .stg-opt__r { border-color: var(--pc-indigo); background: var(--pc-indigo); box-shadow: inset 0 0 0 4px var(--pc-card-solid); }
  html.pc-on .stg-opt__b { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  html.pc-on .stg-opt__b b { display: flex; align-items: center; gap: 8px; font: 620 13.4px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink); }
  html.pc-on .stg-opt__b b i { font-size: 14px; color: var(--pc-indigo); }
  html[data-theme="dark"].pc-on .stg-opt__b b i { color: #A6B2FF; }
  html.pc-on .stg-opt__b span { font: 450 12.2px/1.45 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }

  /* ---------------------------------------------------------------- the save dock */
  /* Hidden at rest: a disabled button that sits there permanently tells you nothing.
     Centred over the CONTENT, inset by --sidebar-w like the invoices dock (~17619). */
  html.pc-on .stg-dock {
    position: fixed; left: var(--sidebar-w, 232px); right: 0; bottom: 24px; z-index: 900;
    display: flex; justify-content: center; pointer-events: none;
  }
  html.pc-on .app-shell.is-collapsed .stg-dock { left: 76px; }
  /* below 992 the sidebar is an off-canvas drawer (~823), so there is no inset to centre past */
  @media (max-width: 991.98px) { html.pc-on .stg-dock, html.pc-on .app-shell.is-collapsed .stg-dock { left: 0; } }
  html.pc-on .stg-dock__p {
    display: flex; align-items: center; gap: 22px; padding: 8px 8px 8px 18px; border-radius: 17px;
    background: rgba(255, 255, 255, .9); border: 1px solid rgba(18, 26, 58, .09);
    -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
    box-shadow: 0 24px 50px -22px rgba(26, 36, 78, .5), 0 3px 10px -4px rgba(26, 36, 78, .12), inset 0 1px 0 rgba(255, 255, 255, .9);
    opacity: 0; transform: translateY(18px) scale(.98); visibility: hidden;
    transition: opacity .22s var(--pc-ease), transform .26s var(--pc-ease-out), visibility 0s linear .26s;
  }
  html[data-theme="dark"].pc-on .stg-dock__p {
    background: rgba(24, 28, 44, .94); border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 26px 56px -22px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .08);
  }
  html.pc-on .stg-dock.is-dirty .stg-dock__p,
  html.pc-on .stg-dock.is-msg .stg-dock__p {
    opacity: 1; transform: none; visibility: visible; pointer-events: auto;
    transition: opacity .22s var(--pc-ease), transform .26s var(--pc-ease-out), visibility 0s;
  }
  html.pc-on .stg-dock__l { display: flex; align-items: center; gap: 11px; min-width: 0; font: 560 13px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink); white-space: nowrap; }
  html.pc-on .stg-dock__l > i { color: var(--pc-green); font-size: 15px; }
  html.pc-on .stg-dock__pulse {
    width: 8px; height: 8px; border-radius: 50%; background: var(--pc-indigo); flex: 0 0 auto;
    box-shadow: 0 0 0 4px rgba(75, 99, 255, .16);
  }
  html.pc-on .stg-dock__t b { font-weight: 640; }
  html.pc-on .stg-dock__t em { font-style: normal; margin-left: 7px; color: var(--pc-ink-3); font-weight: 450; }
  html.pc-on .stg-dock__b { display: flex; gap: 8px; }
  html.pc-on .stg-dock .pcx-prim:disabled { opacity: .5; cursor: default; }


  /* ---------------------------------------------------------------- narrower */
  @container stg (max-width: 1059px) {
    html.pc-on .stg-row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    html.pc-on .stg-row__h p { max-width: 620px; }
  }
  @container stg (max-width: 839px) {
    html.pc-on .stg-wrap { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    html.pc-on .stg-toc {
      top: 60px; z-index: 5; flex-direction: row; gap: 4px; overflow-x: auto; padding: 8px 0; margin: -8px 0 0;
      background: linear-gradient(180deg, var(--pc-page-1) 80%, transparent);
      scrollbar-width: none;
    }
    html.pc-on .stg-toc::-webkit-scrollbar { display: none; }
    html.pc-on .stg-toc__g { flex-direction: row; gap: 2px; }
    html.pc-on .stg-toc__gt { display: none; }
    html.pc-on .stg-toc__i { width: auto; }
    html.pc-on .stg-sec { scroll-margin-top: 128px; }
  }
  @container stg (max-width: 560px) {
    html.pc-on .stg-f--2 { grid-column: span 3; }
    html.pc-on .stg-f--4 { grid-column: 1 / -1; }
    html.pc-on .stg-opts { grid-template-columns: minmax(0, 1fr); }
    html.pc-on .stg-row { padding: 20px 20px; }
  }

  @media (prefers-reduced-motion: reduce) {
    html.pc-on .stg-toc__i, html.pc-on .stg-toc__dot, html.pc-on .stg-opt, html.pc-on .stg-opt__r,
    html.pc-on .stg .stg-in, html.pc-on .stg-dock__p { transition: none; }
  }
}

/* =====================================================================================
 *  DESKTOP SETTINGS · INVOICE DESIGN — "THE STUDIO" (v3.49.0)
 *  controls | a sticky sheet of the REAL PDF.
 *  WIDTHS (measured): the studio needs main >= 880 for a 400px sheet beside ~450px of
 *  controls. main = container - 248 with the rail, so on THIS page the rail folds into
 *  the top strip below a container of 1128 (viewport 1420 with the sidebar) and the
 *  studio keeps the width. Below main 880 the sheet stacks above the controls.
 *  SHEET: A4 is 210 x 297. Width = min(column, (100vh - 150) x 0.7071) so the whole page
 *  is always visible under the 84px sticky offset — ⚠ TRAP 2: a sticky element taller
 *  than the viewport can never be scrolled to its end, so the height is derived from
 *  the viewport, never from the column.
 * ================================================================================== */
@media (min-width: 768px) {

  html.pc-on .stg-main { container: stgmain / inline-size; }

  html.pc-on .stg-studio {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(400px, 46%, 580px); gap: 28px; align-items: start;
    padding-bottom: 72px;
  }
  html.pc-on .stg-studio__c { min-width: 0; }
  html.pc-on .stg-studio .stg-sec { margin-bottom: 16px; }
  html.pc-on .stg-studio .stg-row { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 24px; }
  html.pc-on .stg-studio .stg-row__h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  html.pc-on .stg-studio .stg-row__h p { margin: 0; }
  html.pc-on .stg-studio .stg-row__f > :not(.stg-f) { grid-column: 1 / -1; min-width: 0; }

  /* ---- neutralise the pre-v3.10 skins the hook classes still carry (injectStyles ~2649,
     style.css ~2718/2728): borders, lifts, transforms. `all: unset` then restate. ---- */
  html.pc-on .stg-studio .preset-card, html.pc-on .stg-studio .tplc, html.pc-on .stg-studio .fnt-tile,
  html.pc-on .stg-studio .acc-swatch, html.pc-on .stg-studio .ph-chip, html.pc-on .stg-studio .sig-tile,
  html.pc-on .stg-studio .sig-mode, html.pc-on .stg-studio .clr-reset {
    all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  html.pc-on .stg-studio .clr-reset[hidden] { display: none; }
  html.pc-on .stg-studio :is(.preset-card, .tplc, .fnt-tile, .acc-swatch, .ph-chip, .sig-tile, .sig-mode, .clr-reset):focus-visible {
    outline: none; box-shadow: 0 0 0 3.5px rgba(75, 99, 255, .32);
  }

  /* ---- style presets ---- */
  html.pc-on .stg-pres { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
  html.pc-on .stg-studio .stg-pre { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
  html.pc-on .stg-pre__pg {
    position: relative; display: block; aspect-ratio: 4 / 3.1; border-radius: 9px; overflow: hidden;
    background: #fff; box-shadow: inset 0 0 0 1px rgba(18, 26, 58, .1); padding: 26% 12% 0;
    transition: box-shadow .16s var(--pc-ease);
  }
  html.pc-on .stg-pre__band { position: absolute; left: 0; right: 0; top: 0; height: 18%; background: var(--acc); }
  html.pc-on .stg-pre__pg i { display: block; height: 4px; border-radius: 2px; background: rgba(18, 26, 58, .1); margin-bottom: 5px; }
  html.pc-on .stg-pre__pg i.s { width: 58%; }
  html.pc-on .stg-pre__tot { position: absolute; right: 12%; bottom: 13%; width: 32%; height: 7px; border-radius: 2px; background: var(--acc); }
  html.pc-on .stg-pre__nm { font: 560 12px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.pc-on .stg-studio .stg-pre:hover .stg-pre__pg { box-shadow: inset 0 0 0 1px rgba(75, 99, 255, .45); }
  /* selection is CHROME, so the ring is indigo even on the Crimson preset */
  html.pc-on .stg-studio .stg-pre.is-active .stg-pre__pg { box-shadow: 0 0 0 2px var(--pc-card-solid), 0 0 0 4px var(--pc-indigo); }
  html.pc-on .stg-studio .stg-pre.is-active .stg-pre__nm { color: var(--pc-indigo); font-weight: 640; }
  html[data-theme="dark"].pc-on .stg-studio .stg-pre.is-active .stg-pre__pg { box-shadow: 0 0 0 2px var(--pc-card-solid), 0 0 0 4px #8C9BFF; }
  html[data-theme="dark"].pc-on .stg-studio .stg-pre.is-active .stg-pre__nm { color: #A6B2FF; }

  /* ---- layout + typeface tiles ---- */
  html.pc-on .stg-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html.pc-on .stg-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.pc-on .stg-studio .stg-tile {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 13px; min-width: 0;
    border: 1px solid var(--pc-hair-2); transition: border-color .16s var(--pc-ease), background .16s var(--pc-ease);
  }
  html.pc-on .stg-studio .stg-tile:hover { border-color: rgba(75, 99, 255, .38); }
  html.pc-on .stg-studio .stg-tile.on, html.pc-on .stg-studio .stg-tile.is-active {
    border-color: var(--pc-indigo); background: rgba(75, 99, 255, .05); box-shadow: inset 0 0 0 1px var(--pc-indigo);
  }
  html[data-theme="dark"].pc-on .stg-studio .stg-tile.on, html[data-theme="dark"].pc-on .stg-studio .stg-tile.is-active {
    border-color: #8C9BFF; background: rgba(130, 145, 255, .08); box-shadow: inset 0 0 0 1px #8C9BFF;
  }
  html.pc-on .stg-tile__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  html.pc-on .stg-tile__t b { font: 620 13.2px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink); }
  html.pc-on .stg-tile__t span { font: 450 11.8px/1.3 var(--font), Inter, sans-serif; color: var(--pc-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.pc-on .stg-mini {
    position: relative; flex: 0 0 auto; width: 46px; height: 58px; border-radius: 5px; background: #fff; overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(18, 26, 58, .12); padding: 18px 7px 0;
  }
  html.pc-on .stg-mini__band { position: absolute; left: 0; right: 0; top: 0; height: 11px; background: var(--acc); }
  html.pc-on .stg-mini--editorial .stg-mini__band { left: 7px; right: auto; top: 7px; width: 14px; height: 3px; border-radius: 2px; }
  html.pc-on .stg-mini i { display: block; height: 3px; border-radius: 2px; background: rgba(18, 26, 58, .12); margin-bottom: 4px; }
  html.pc-on .stg-mini i.w { background: rgba(18, 26, 58, .22); }
  html.pc-on .stg-mini i.s { width: 60%; }
  html.pc-on .stg-mini--editorial i { margin-bottom: 7px; }
  html.pc-on .stg-tile--font { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; }
  html.pc-on .stg-aa { font-size: 26px; line-height: 1; color: var(--pc-ink); }

  /* ---- accent ---- */
  html.pc-on .stg-sw { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  html.pc-on .stg-studio .stg-sw__i {
    width: 28px; height: 28px; border-radius: 50%; background: var(--c); position: relative; flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); transition: box-shadow .16s var(--pc-ease);
  }
  html.pc-on .stg-studio .stg-sw__i.is-active { box-shadow: 0 0 0 2px var(--pc-card-solid), 0 0 0 4px var(--c); }
  html.pc-on .stg-studio .stg-sw__pick {
    display: inline-grid; place-items: center; background: transparent; border: 1.5px dashed var(--pc-hair-2);
    color: var(--pc-ink-3); font-size: 12px; cursor: pointer; overflow: hidden;
  }
  html.pc-on .stg-sw__pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
  html.pc-on .stg-clrs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
  html.pc-on .stg-clr {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 13px; border-radius: 12px;
    border: 1px solid var(--pc-hair-2); min-width: 0;
  }
  html.pc-on .stg-clr__l { font: 560 12.6px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink); white-space: nowrap; }
  html.pc-on .stg-studio .stg-clr__rs { margin-left: auto; font: 560 11.6px/1 var(--font), Inter, sans-serif; color: var(--pc-indigo); white-space: nowrap; }
  html[data-theme="dark"].pc-on .stg-studio .stg-clr__rs { color: #A6B2FF; }
  html.pc-on .stg-clr__hex { margin-left: auto; font: 500 11.8px/1 var(--font-ledger), 'IBM Plex Mono', monospace; color: var(--pc-ink-2); }
  html.pc-on .stg-clr__rs:not([hidden]) + .stg-clr__hex { margin-left: 0; }
  html.pc-on .stg-clr__chip { position: relative; width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); overflow: hidden; }
  html.pc-on .stg-clr__chip input { position: absolute; inset: -4px; width: 32px; height: 32px; opacity: 0; cursor: pointer; }

  /* ---- payment heading ---- */
  html.pc-on .stg-ph { display: flex; flex-direction: column; gap: 12px; }
  /* this bar is a piece of the PRINTED page, so it wears the invoice accent, not indigo */
  html.pc-on .stg-ph__bar {
    align-self: flex-start; padding: 7px 12px; border-radius: 6px; background: var(--acc); color: #fff;
    font: 650 11px/1 var(--font), Inter, sans-serif; letter-spacing: .08em;
  }
  html.pc-on .stg-ph__chips { display: flex; flex-wrap: wrap; gap: 7px; }
  html.pc-on .stg-studio .stg-chip {
    padding: 7px 11px; border-radius: 9px; border: 1px solid var(--pc-hair-2);
    font: 580 11.4px/1 var(--font), Inter, sans-serif; letter-spacing: .03em; color: var(--pc-ink-2);
    transition: border-color .16s var(--pc-ease), color .16s var(--pc-ease), background .16s var(--pc-ease);
  }
  html.pc-on .stg-studio .stg-chip:hover { border-color: rgba(75, 99, 255, .38); color: var(--pc-ink); }
  html.pc-on .stg-studio .stg-chip.is-on { border-color: var(--pc-indigo); background: rgba(75, 99, 255, .08); color: var(--pc-indigo); }
  html[data-theme="dark"].pc-on .stg-studio .stg-chip.is-on { border-color: #8C9BFF; background: rgba(130, 145, 255, .12); color: #A6B2FF; }

  /* ---- signature ---- */
  html.pc-on .stg-seg { display: inline-flex; padding: 3px; border-radius: 11px; background: rgba(20, 28, 60, .06); align-self: flex-start; gap: 2px; }
  html[data-theme="dark"].pc-on .stg-seg { background: rgba(255, 255, 255, .07); }
  html.pc-on .stg-studio .stg-seg__i {
    display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border-radius: 8px;
    font: 580 12.4px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
  }
  html.pc-on .stg-studio .stg-seg__i.on { background: var(--pc-card-solid); color: var(--pc-ink); box-shadow: 0 1px 3px rgba(20, 28, 60, .16); }
  html[data-theme="dark"].pc-on .stg-studio .stg-seg__i.on { background: rgba(255, 255, 255, .14); }
  /* ⚠ THE INK PAPER STAYS LIGHT IN DARK MODE — it is a piece of the printed page, and
     invoice PDFs are always light (v3.10.0). */
  html.pc-on .stg-ink {
    margin-top: 12px; padding: 18px 22px 14px; border-radius: 12px; background: #FDFDFB;
    box-shadow: inset 0 0 0 1px rgba(18, 26, 58, .1);
  }
  html.pc-on .stg-ink__s { font-size: 36px; line-height: 1.1; color: #1B2A5C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.pc-on .stg-ink__ln { height: 1px; background: rgba(18, 26, 58, .25); margin: 6px 0 8px; max-width: 280px; }
  html.pc-on .stg-ink__cap { font: 450 11.6px/1.4 var(--font), Inter, sans-serif; color: #6B7390; }
  html.pc-on .stg-ink__cap b { display: block; font-weight: 640; color: #0B1020; }
  html.pc-on .stg-sigf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
  html.pc-on .stg-studio .stg-sigf__i {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px; border-radius: 11px;
    border: 1px solid var(--pc-hair-2); min-width: 0; transition: border-color .16s var(--pc-ease);
  }
  html.pc-on .stg-studio .stg-sigf__i:hover { border-color: rgba(75, 99, 255, .38); }
  html.pc-on .stg-studio .stg-sigf__i.on { border-color: var(--pc-indigo); background: rgba(75, 99, 255, .05); box-shadow: inset 0 0 0 1px var(--pc-indigo); }
  html[data-theme="dark"].pc-on .stg-studio .stg-sigf__i.on { border-color: #8C9BFF; background: rgba(130, 145, 255, .08); box-shadow: inset 0 0 0 1px #8C9BFF; }
  html.pc-on .stg-sigf__i .sig-tile__ink { font-size: 22px; line-height: 1.2; color: var(--pc-ink); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.pc-on .stg-sigf__n { font: 500 11px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }
  html.pc-on .stg-sigup { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
  html.pc-on .stg-sigup__th {
    width: 150px; height: 64px; border-radius: 10px; background: #FDFDFB; display: grid; place-items: center;
    box-shadow: inset 0 0 0 1px rgba(18, 26, 58, .1); color: #9AA0B4; overflow: hidden;
  }
  html.pc-on .stg-sigup__th img { max-width: 90%; max-height: 80%; }

  html.pc-on .stg-togs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }

  /* ---- the sheet ---- */
  html.pc-on .stg-paper { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  html.pc-on .stg-paper__bar { display: flex; align-items: center; gap: 12px; min-height: 34px; }
  html.pc-on .stg-paper__k { display: inline-flex; align-items: center; gap: 8px; font: 620 12.6px/1 var(--font), Inter, sans-serif; color: var(--pc-ink); white-space: nowrap; }
  html.pc-on .stg-paper__s { font: 450 12px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  html.pc-on .stg-paper__fs { margin-left: auto; height: 32px; padding: 0 11px; font-size: 12.4px; }
  html.pc-on .stg-paper .sx-pv__dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--pc-indigo); box-shadow: 0 0 0 3.5px rgba(75, 99, 255, .18); display: inline-block; flex: 0 0 auto;
  }
  html.pc-on .stg-paper .sx-pv__dot--busy { animation: stgPulse 1s ease-in-out infinite; }
  /* a preview that could not be built is a FAILURE — coral is the honest colour for it */
  html.pc-on .stg-paper .sx-pv__dot--off { background: var(--pc-coral); box-shadow: 0 0 0 3.5px rgba(197, 39, 30, .16); }
  @keyframes stgPulse { 50% { opacity: .35; } }
  html.pc-on .stg-paper__sheet {
    position: relative; width: min(100%, calc((100vh - 150px) * 0.7071)); aspect-ratio: 210 / 297; margin: 0 auto;
    border-radius: 6px; overflow: hidden; background: #fff;
    box-shadow: 0 34px 70px -34px rgba(26, 36, 78, .55), 0 3px 10px -4px rgba(26, 36, 78, .14), 0 0 0 1px rgba(18, 26, 58, .06);
  }
  html[data-theme="dark"].pc-on .stg-paper__sheet { box-shadow: 0 34px 70px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08); }
  /* renderInvoicePreview() writes its frame with INLINE sizes (min-height 560, radius) —
     only !important reaches them. The sheet, not the frame, owns the shape here. */
  html.pc-on .stg-paper__sheet > div, html.pc-on .stg-paper__sheet iframe {
    height: 100% !important; min-height: 0 !important; border-radius: 0 !important;
  }

  /* ---- widths ---- */
  @container stg (max-width: 1127px) {
    html.pc-on .stg-wrap:has(.stg-studio) { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    html.pc-on .stg-wrap:has(.stg-studio) .stg-toc {
      top: 60px; z-index: 5; flex-direction: row; gap: 4px; overflow-x: auto; padding: 8px 0; margin: -8px 0 0;
      background: linear-gradient(180deg, var(--pc-page-1) 80%, transparent); scrollbar-width: none;
    }
    html.pc-on .stg-wrap:has(.stg-studio) .stg-toc__g { flex-direction: row; gap: 2px; }
    html.pc-on .stg-wrap:has(.stg-studio) .stg-toc__gt { display: none; }
    html.pc-on .stg-wrap:has(.stg-studio) .stg-toc__i { width: auto; }
    html.pc-on .stg-wrap:has(.stg-studio) .stg-paper { top: 128px; }
    html.pc-on .stg-wrap:has(.stg-studio) .stg-paper__sheet { width: min(100%, calc((100vh - 194px) * 0.7071)); }
  }
  @container stgmain (max-width: 879px) {
    html.pc-on .stg-studio { grid-template-columns: minmax(0, 1fr); }
    html.pc-on .stg-paper { position: static; order: -1; }
    /* ⚠ must out-rank the `.stg-wrap:has(.stg-studio)` viewport-derived width above */
    html.pc-on .stg-wrap .stg-studio .stg-paper__sheet { width: min(100%, 420px); }
  }
  @container stgmain (max-width: 520px) {
    html.pc-on .stg-tiles--3, html.pc-on .stg-sigf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html.pc-on .stg-clrs, html.pc-on .stg-togs { grid-template-columns: minmax(0, 1fr); }
  }
  @media (prefers-reduced-motion: reduce) {
    html.pc-on .stg-paper .sx-pv__dot--busy { animation: none; }
    html.pc-on .stg-pre__pg, html.pc-on .stg-studio .stg-tile, html.pc-on .stg-studio .stg-chip,
    html.pc-on .stg-studio .stg-sw__i, html.pc-on .stg-studio .stg-sigf__i { transition: none; }
  }
}
@media (min-width: 768px) {
  /* the ink and navy swatches vanish into a dark card without an edge */
  html[data-theme="dark"].pc-on .stg-studio .stg-sw__i { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
  html[data-theme="dark"].pc-on .stg-studio .stg-sw__i.is-active { box-shadow: 0 0 0 2px var(--pc-card-solid), 0 0 0 4px var(--c), 0 0 0 5px rgba(255, 255, 255, .25); }
}

/* =====================================================================================
 *  DESKTOP SETTINGS · APPEARANCE · BACKUP & RESTORE · ABOUT (v3.49.0)
 * ================================================================================== */
@media (min-width: 768px) {

  html.pc-on .stg-page { max-width: none; padding-bottom: 72px; }

  /* ---- appearance ---- */
  html.pc-on .stg-thms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  /* ⚠ `.thm-card` carries the batch-4 phone tile skin (style.css ~2728 lift + ring). */
  html.pc-on .stg .stg-thm {
    all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 12px; min-width: 0;
    padding: 10px 10px 14px; border-radius: 15px; border: 1px solid var(--pc-hair-2);
    transition: border-color .16s var(--pc-ease), background .16s var(--pc-ease);
  }
  html.pc-on .stg .stg-thm:hover { border-color: rgba(75, 99, 255, .38); }
  html.pc-on .stg .stg-thm:focus-visible { box-shadow: 0 0 0 3.5px rgba(75, 99, 255, .3); }
  html.pc-on .stg .stg-thm.is-active { border-color: var(--pc-indigo); background: rgba(75, 99, 255, .05); box-shadow: inset 0 0 0 1px var(--pc-indigo); }
  html[data-theme="dark"].pc-on .stg .stg-thm.is-active { border-color: #8C9BFF; background: rgba(130, 145, 255, .08); box-shadow: inset 0 0 0 1px #8C9BFF; }
  html.pc-on .stg .stg-thm.is-active .stg-opt__r { border-color: var(--pc-indigo); background: var(--pc-indigo); box-shadow: inset 0 0 0 4px var(--pc-card-solid); }
  /* a miniature of THIS app's chrome in each theme — fixed colours, because it depicts a
     theme rather than following one */
  html.pc-on .stg-thm__mock {
    display: grid; grid-template-columns: 26% 1fr; aspect-ratio: 16 / 9.5; border-radius: 10px; overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(18, 26, 58, .1);
  }
  html.pc-on .stg-thm__mock--light { background: #EEF0F8; }
  html.pc-on .stg-thm__mock--dark { background: #0B0E18; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
  html.pc-on .stg-thm__mock { position: relative; }
  html.pc-on .stg-thm__half { position: absolute; inset: 0; border-radius: 0; box-shadow: none; clip-path: polygon(64% 0, 100% 0, 100% 100%, 36% 100%); }
  html.pc-on .stg-thm__side { background: rgba(255, 255, 255, .55); border-right: 1px solid rgba(18, 26, 58, .06); }
  html.pc-on .stg-thm__mock--dark .stg-thm__side { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .06); }
  html.pc-on .stg-thm__body { padding: 12% 10% 0; display: flex; flex-direction: column; gap: 7%; }
  html.pc-on .stg-thm__body i { display: block; height: 14%; border-radius: 4px; background: #fff; box-shadow: 0 2px 6px -3px rgba(20, 28, 60, .3); }
  html.pc-on .stg-thm__body i.h { height: 8%; width: 42%; background: #4B63FF; box-shadow: none; }
  html.pc-on .stg-thm__body i.s { width: 60%; }
  html.pc-on .stg-thm__mock--dark .stg-thm__body i { background: #161A26; box-shadow: none; }
  html.pc-on .stg-thm__mock--dark .stg-thm__body i.h { background: #6C7CFF; }
  html.pc-on .stg-thm__t { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 3px; align-items: center; padding: 0 4px; }
  html.pc-on .stg-thm__t .stg-opt__r { grid-row: 1 / 3; align-self: start; margin-top: 1px; }
  html.pc-on .stg-thm__t b { font: 620 13.4px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink); }
  html.pc-on .stg-thm__t span:not(.stg-opt__r) { grid-column: 2; font: 450 12px/1.3 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }

  html.pc-on .stg-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
  html.pc-on .stg-facts > div { padding: 12px 14px; border-radius: 12px; background: rgba(20, 28, 60, .03); min-width: 0; }
  html[data-theme="dark"].pc-on .stg-facts > div { background: rgba(255, 255, 255, .035); }
  html.pc-on .stg-facts dt { font: 500 11.6px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink-3); margin: 0 0 5px; }
  html.pc-on .stg-facts dd { margin: 0; font: 620 13.4px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink); }

  /* ---- backup ---- */
  /* one hairline-divided figure strip, the board foot used across the desktop (§4.11.4) */
  html.pc-on .stg-stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--pc-hair);
    border-radius: var(--pc-r) var(--pc-r) 0 0; background: rgba(20, 28, 60, .018);
  }
  html[data-theme="dark"].pc-on .stg-stats { background: rgba(255, 255, 255, .02); }
  html.pc-on .stg-stats + .stg-row { border-top: 0; }
  html.pc-on .stg-stat { display: flex; flex-direction: column; gap: 6px; padding: 18px 28px; border-left: 1px solid var(--pc-hair); min-width: 0; }
  html.pc-on .stg-stat:first-child { border-left: 0; }
  html.pc-on .stg-stat__n { font: 600 24px/1 var(--font-ledger), 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--pc-ink); }
  html.pc-on .stg-stat__l { font: 500 12px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }
  html.pc-on .stg-bk { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 13px; border: 1px solid var(--pc-hair-2); }
  html.pc-on .stg-bk__b { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap; }
  html.pc-on .stg-bk__k { font: 500 12px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }
  html.pc-on .stg-bk__b b { font: 600 14px/1.2 var(--font-ledger), 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; color: var(--pc-ink); }
  html.pc-on .stg-bk__age { font: 450 12px/1.2 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }
  html.pc-on .stg-bk .pcx-prim { margin-left: auto; flex: 0 0 auto; }
  html.pc-on .stg .stg-restore { align-self: flex-start; cursor: pointer; }
  html.pc-on .stg-status { margin: 0; font: 450 12.2px/1.45 var(--font), Inter, sans-serif; color: var(--pc-ink-2); }
  html.pc-on .stg-status:empty { display: none; }
  html.pc-on .stg-csvs { display: flex; flex-wrap: wrap; gap: 10px; }
  html.pc-on .stg-safes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  html.pc-on .stg-safe { display: flex; gap: 12px; padding: 13px 14px; border-radius: 12px; background: rgba(20, 28, 60, .03); min-width: 0; }
  html[data-theme="dark"].pc-on .stg-safe { background: rgba(255, 255, 255, .035); }
  html.pc-on .stg-safe > i { font-size: 15px; color: var(--pc-indigo); margin-top: 1px; }
  html[data-theme="dark"].pc-on .stg-safe > i { color: #A6B2FF; }
  html.pc-on .stg-safe span { font: 450 12.2px/1.45 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }
  html.pc-on .stg-safe b { display: block; margin-bottom: 2px; font: 620 13px/1.3 var(--font), Inter, sans-serif; color: var(--pc-ink); }

  /* ---- about: the shared markup, re-skinned. The hero is GLASS (short, self-contained);
     every list is an opaque card like the rest of the page. ---- */
  html.pc-on .stg-page--about .stg-sec { margin-bottom: 14px; }
  html.pc-on .stg .abt { max-width: none; }
  html.pc-on .stg .abx-hero {
    border-radius: var(--pc-r); border: 1px solid rgba(255, 255, 255, .72);
    box-shadow: var(--pc-lift);
  }
  html[data-theme="dark"].pc-on .stg .abx-hero { border-color: rgba(255, 255, 255, .1); }
  html.pc-on .stg .abx-upd { border-radius: var(--pc-r-sm); border: 1px solid var(--pc-hair); background: var(--pc-card-solid); box-shadow: none; }
  html.pc-on .stg .abt-grid { gap: 18px 22px; }
  html.pc-on .stg .abt-hd {
    text-transform: none; letter-spacing: -.01em; margin: 0 0 8px 2px;
    font: 620 13.4px/1.3 var(--font-display), Inter, sans-serif; color: var(--pc-ink);
  }
  html.pc-on .stg .abt-group {
    border-radius: var(--pc-r); background: var(--pc-card-solid); border: 1px solid var(--pc-hair);
    box-shadow: var(--pc-lift); overflow: hidden;
  }
  html.pc-on .stg .abt-row { padding-left: 18px; padding-right: 18px; }
  html.pc-on .stg .abt-k { font: 500 13px/1.3 var(--font), Inter, sans-serif; color: var(--pc-ink-2); }
  html.pc-on .stg .abt-v { font: 560 13px/1.3 var(--font), Inter, sans-serif; color: var(--pc-ink); }
  html.pc-on .stg #abt-ver, html.pc-on .stg #abt-screen { font-family: var(--font-ledger), 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }
  html.pc-on .stg .abt-ft { font: 450 12.2px/1.5 var(--font), Inter, sans-serif; color: var(--pc-ink-3); margin: 8px 2px 0; }
  html.pc-on .stg .abt-foot { color: var(--pc-ink-3); }
  html.pc-on .stg .abx-chip--ver { font-family: var(--font-ledger), 'IBM Plex Mono', monospace; }

  @container stgmain (max-width: 640px) {
    html.pc-on .stg-thms, html.pc-on .stg-facts { grid-template-columns: minmax(0, 1fr); }
    html.pc-on .stg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html.pc-on .stg-stat:nth-child(3) { border-left: 0; }
    html.pc-on .stg-safes { grid-template-columns: minmax(0, 1fr); }
    html.pc-on .stg-bk { flex-wrap: wrap; }
  }
  @media (prefers-reduced-motion: reduce) { html.pc-on .stg .stg-thm { transition: none; } }
}

/* =====================================================================================
 *  v3.49.1 — "DELETE CUSTOMER" IN THE EDIT CUSTOMER FORM (owner decision, README §6.f)
 *  The destructive action is the QUIETEST button in the footer: red text, no fill — never
 *  a peer of Save. Phone: stacks last (the footer is column-reverse ~2896, so DOM-first is
 *  bottom-most). Desktop: sits on the far left, away from Cancel/Save.
 *  ⚠ The PHONE half of this rule is NOT here: nothing phone-scoped may follow the PC banner
 *  (check-pc-scope). It sits just above the banner — search "v3.49.1 — phone half".
 * ================================================================================== */
@media (min-width: 768px) {
  html.pc-on .hm-modal:has(#hm-cust-form) .modal-footer .hm-cf-del {
    display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px; margin: 0 auto 0 0;
    flex: 0 0 auto; border-radius: 12px; background: transparent; border: 1px solid transparent; box-shadow: none;
    cursor: pointer; font: 600 13.6px/1 var(--font), Inter, sans-serif; color: var(--pc-coral); white-space: nowrap;
    transition: background .16s var(--pc-ease), border-color .16s var(--pc-ease);
  }
  html.pc-on .hm-modal:has(#hm-cust-form) .modal-footer .hm-cf-del:hover { background: rgba(197, 39, 30, .07); border-color: rgba(197, 39, 30, .18); }
  html[data-theme="dark"].pc-on .hm-modal:has(#hm-cust-form) .modal-footer .hm-cf-del:hover { background: rgba(255, 107, 99, .1); border-color: rgba(255, 107, 99, .22); }
  html.pc-on .hm-modal:has(#hm-cust-form) .modal-footer .hm-cf-del:focus-visible { outline: none; box-shadow: 0 0 0 3.5px rgba(197, 39, 30, .22); }
}

/* v3.49.4 — "Delete customer" on the desktop customer rail, beside Edit (owner: "Add
   delete button"). Icon-only, coral on hover — never a peer of New invoice. */
@media (min-width: 768px) {
  html.pc-on .cxx .cxr-acts { grid-template-columns: 1fr auto auto; }
  html.pc-on .cxx .cxr-act--del { width: 38px; padding: 0; color: var(--pc-coral); }
  html.pc-on .cxx .cxr-act--del:hover { background: rgba(197, 39, 30, .08); color: var(--pc-coral); border-color: rgba(197, 39, 30, .2); }
  html[data-theme="dark"].pc-on .cxx .cxr-act--del:hover { background: rgba(255, 107, 99, .12); border-color: rgba(255, 107, 99, .26); }
}

/* =====================================================================================
 *  v3.49.5 — IN THE INSTALLED DESKTOP APP, <body> WAS THE SCROLL CONTAINER.
 *  Owner: the Settings contents rail was "a dead button" — it highlighted, never scrolled.
 *  Only in the INSTALLED app (standalone window), never in a browser tab, which is why
 *  every harness and smoke run passed. The cause is ~930:
 *      html.is-standalone, html.is-standalone body { overflow-x: hidden }
 *  `overflow-x: hidden` forces `overflow-y` to compute to `auto`; with BOTH html and body
 *  non-visible, body's overflow no longer propagates to the viewport, and body — whose
 *  height is the viewport — becomes a scroll container. The window then never scrolls:
 *  `window.scrollTo`, `scrollY` and window `scroll` listeners are all dead (Settings rail
 *  + spy, Activity's "scroll to top", the dashboard/invoices scroll readers).
 *  `clip` clips horizontally WITHOUT creating a scroll container, so the viewport is the
 *  scroller again, exactly as in a browser tab. Desktop only — the phone keeps ~930.
 *  Proved by tools/check-standalone-scroll.js (boots the real app with is-standalone).
 * ================================================================================== */
@media (min-width: 768px) {
  html.pc-on.is-standalone, html.pc-on.is-standalone body { overflow-x: clip; }
}

/* =====================================================================================
 *  v3.50.0 — DESKTOP SIGN-IN (#auth-screen), ≥768 only. The launch hands off to this when
 *  nobody is signed in, and it used to be the PHONE card on the old beige page (--bg) —
 *  none of PC Native 2026. Now it sits on the same field as the launch (the PC mesh from
 *  the rendered field, still — no lines), so launch → sign-in is one surface. The drawn
 *  H replaces the glossy icon tile, exactly as on the launch. Same markup, same copy.
 *  The phone card is untouched: every rule here is html.pc-on inside min-width:768.
 * ================================================================================== */
@media (min-width: 768px) {
  html.pc-on .auth-screen { position: relative; isolation: isolate; overflow: hidden; background: transparent; gap: 0; padding: 40px 24px 96px; }
  /* the launch's field, rendered once (still, dithered) into .auth-field by the launch's
     field script — the CSS glow this replaces banded into rings like the first launch cut. */
  html.pc-on .auth-field { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .5s ease; }
  html.pc-on .auth-field.is-on { opacity: 1; }
  html.pc-on .auth-card {
    max-width: 420px; padding: 40px 40px 34px; border-radius: 24px; text-align: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .68));
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 40px 80px -40px rgba(30, 40, 110, .38), 0 2px 6px -2px rgba(30, 40, 110, .08), inset 0 1px 0 #fff;
    -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
    animation: authCardIn .7s cubic-bezier(.2, .9, .25, 1) both;
  }
  html[data-theme="dark"].pc-on .auth-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .035));
    border-color: rgba(255, 255, 255, .09);
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .09);
    /* the dark field's glow sits right behind the card: at 170% the glass turned blue */
    -webkit-backdrop-filter: blur(24px) saturate(112%) brightness(.82); backdrop-filter: blur(24px) saturate(112%) brightness(.82);
  }
  html.pc-on .auth-card__logo { display: none; }
  html.pc-on .auth-card__mark { display: block; width: 52px; height: 52px; margin: 0 auto; overflow: visible; }
  html.pc-on .auth-card__mark .spl3__post { animation-delay: .12s; }
  html.pc-on .auth-card__mark .spl3__post--r { animation-delay: .22s; }
  html.pc-on .auth-card__mark .spl3__rule { animation-delay: .46s; }
  html.pc-on .auth-card__title { margin: 22px 0 6px; font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -.03em; line-height: 1.1; color: var(--pc-ink); }
  html.pc-on .auth-card__subtitle { margin: 0 0 28px; font-size: 14px; color: var(--pc-ink-2); }
  html.pc-on .auth-form { gap: 16px; }
  html.pc-on .auth-card .field__label { margin: 0 0 7px; padding: 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0; color: var(--pc-ink-2); }
  html.pc-on .auth-card .form-control {
    height: 44px; padding: 0 14px; border-radius: 13px; font-size: 14.5px; color: var(--pc-ink);
    background: rgba(255, 255, 255, .92); border: 1px solid rgba(18, 26, 58, .12); box-shadow: 0 1px 2px rgba(18, 26, 58, .04);
    transition: border-color .16s var(--pc-ease), box-shadow .16s var(--pc-ease);
  }
  html.pc-on .auth-card .form-control::placeholder { color: var(--pc-ink-3); opacity: .8; }
  html.pc-on .auth-card .form-control:focus { outline: none; border-color: var(--pc-indigo); box-shadow: 0 0 0 4px rgba(75, 99, 255, .16); background: #fff; }
  html[data-theme="dark"].pc-on .auth-card .form-control { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .12); box-shadow: none; }
  html[data-theme="dark"].pc-on .auth-card .form-control:focus { border-color: #8C9BFF; box-shadow: 0 0 0 4px rgba(108, 124, 255, .22); background: rgba(255, 255, 255, .06); }
  html.pc-on .auth-card .btn-ios-primary {
    height: 46px; margin-top: 8px; border: 0; border-radius: 13px; text-transform: none; letter-spacing: -.005em;
    font-size: 15px; font-weight: 600; color: #fff; background: var(--pc-grad);
    box-shadow: 0 14px 28px -14px rgba(61, 79, 224, .75), inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: transform .16s var(--pc-ease), box-shadow .16s var(--pc-ease), filter .16s var(--pc-ease);
  }
  html.pc-on .auth-card .btn-ios-primary:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 18px 32px -14px rgba(61, 79, 224, .85), inset 0 1px 0 rgba(255, 255, 255, .22); }
  html.pc-on .auth-card .btn-ios-primary:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(75, 99, 255, .28); }
  html.pc-on .auth-alert { border-radius: 12px; font-size: 13px; }
  html.pc-on .auth-footer { position: absolute; left: 0; right: 0; bottom: 30px; margin: 0; text-align: center; font-size: 12.5px; font-weight: 500; color: var(--pc-ink-3); }
  @keyframes authCardIn { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
  @media (prefers-reduced-motion: reduce) {
    html.pc-on .auth-card { animation: none; }
    html.pc-on .auth-card__mark .spl3__post, html.pc-on .auth-card__mark .spl3__rule { animation: none; stroke-dashoffset: 0; }
  }
}

/* =====================================================================================
 *  v3.51.0 — "HAALTD SURFACES" · DESKTOP (≥768). The phone/shared half sits ABOVE the
 *  v3.32.0 banner. Every rule here is html.pc-on inside min-width:768 (check-pc-scope).
 *    toasts   bottom-right STACK (newest in front, two peek behind, hover fans out)
 *    confirm  a centred 440px dialog — was the phone's 302px iOS alert in a 1600px window
 *    dialogs  FIT THE WINDOW: header + footer always visible, the body scrolls (the New
 *             customer dialog's Add button was below the window edge — measured)
 *    notifications  grouped New / Earlier (notifications.js), section labels here
 *    update prompt  a compact centred dialog — was the phone sheet stretched full width
 * ================================================================================== */
@media (min-width: 768px) {
  /* ---------- toasts ---------- */
  html.pc-on .toast-stack.hts {
    left: auto; right: 24px; top: auto; bottom: 24px; width: 372px; transform: none;
  }
  html.pc-on .hts .ht-toast {
    top: auto; bottom: 0; min-width: 0; max-width: none; transform-origin: 50% 100%;
    grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 11px;
    padding: 12px 10px 12px 12px; border-radius: 14px;
    background: #FFFFFF; border: 1px solid rgba(18, 26, 58, .08);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 24px 48px -24px rgba(20, 28, 70, .42), 0 2px 6px -2px rgba(20, 28, 70, .08);
    user-select: text; touch-action: auto;
  }
  html.pc-on .hts .ht-toast:not(.is-in) { transform: translate3d(0, 18px, 0) scale(.97); opacity: 0; }
  html.pc-on .hts .ht-toast.is-out { transform: translate3d(14px, var(--y, 0px), 0) scale(.97); opacity: 0; }
  html[data-theme="dark"].pc-on .hts .ht-toast {
    background: #1A1E2D; border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 26px 52px -24px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .05);
  }
  html.pc-on .hts .ht-toast__icon { width: 30px; height: 30px; font-size: 15px; }
  html.pc-on .hts .ht-toast__title { font: 640 13.5px/1.3 var(--font), Inter, sans-serif; color: var(--pc-ink); }
  html.pc-on .hts .ht-toast__msg { font: 450 13px/1.45 var(--font), Inter, sans-serif; color: var(--pc-ink-2); }
  html.pc-on .hts .ht-toast__content > .ht-toast__msg:only-child { font-weight: 560; font-size: 13.5px; color: var(--pc-ink); }
  html.pc-on .hts .ht-toast__act { font-size: 12.5px; padding: 7px 10px; border-radius: 9px; }
  /* close appears on hover — a quiet card, not a row of x's */
  html.pc-on .hts .ht-toast__close { width: 26px; height: 26px; font-size: 16px; border-radius: 8px; opacity: 0; transition: opacity .15s ease, background .15s ease; }
  html.pc-on .hts .ht-toast:hover .ht-toast__close, html.pc-on .hts .ht-toast__close:focus-visible { opacity: 1; }
  html.pc-on .hts .ht-toast__close:hover { background: rgba(75, 99, 255, .1); color: var(--pc-indigo); }
  html.pc-on .hts .ht-toast__close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(75, 99, 255, .35); }

  /* ---------- confirm: a centred dialog ---------- */
  html.pc-on .hxc__scrim { background: rgba(14, 18, 40, .26); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  html[data-theme="dark"].pc-on .hxc__scrim { background: rgba(0, 0, 0, .5); }
  html.pc-on .hxc__wrap { align-items: center; padding: 24px; }
  html.pc-on .hxc__box {
    width: 440px; max-width: calc(100vw - 48px); text-align: left;
    display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px;
    padding: 24px 24px 20px; border-radius: 20px;
    background: #FFFFFF; border: 1px solid rgba(18, 26, 58, .07);
    box-shadow: 0 40px 90px -36px rgba(20, 28, 70, .55), 0 3px 10px -4px rgba(20, 28, 70, .12);
    transform: translateY(10px) scale(.965); opacity: 0;
    transition: transform .34s cubic-bezier(.2, .9, .25, 1.05), opacity .2s ease;
  }
  html.pc-on .hxc.is-in .hxc__box { transform: none; opacity: 1; }
  html.pc-on .hxc.is-out .hxc__box { transform: scale(.975); opacity: 0; transition: transform .18s ease, opacity .16s ease; }
  html[data-theme="dark"].pc-on .hxc__box {
    background: #1A1E2D; border-color: rgba(255, 255, 255, .09);
    box-shadow: 0 44px 96px -36px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  html.pc-on .hxc__badge { width: 44px; height: 44px; margin: 0; border-radius: 13px; font-size: 20px; }
  html.pc-on .hxc__text { min-width: 0; padding-top: 1px; }
  html.pc-on .hxc__t { margin: 0 0 6px; font: 700 17.5px/1.3 var(--font-display), "Inter Tight", Inter, sans-serif; letter-spacing: -.02em; color: var(--pc-ink); text-wrap: pretty; }
  html.pc-on .hxc__m { margin: 0; font: 450 14px/1.55 var(--font), Inter, sans-serif; color: var(--pc-ink-2); }
  html.pc-on .hxc__acts { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; gap: 10px; margin-top: 24px; }
  html.pc-on .hxc__b { height: 38px; padding: 0 16px; border-radius: 11px; font: 620 14px/1 var(--font), Inter, sans-serif; }
  html.pc-on .hxc__b:active { transform: translateY(1px); }
  html.pc-on .hxc__b--cancel {
    color: var(--pc-ink); background: #FFFFFF; border: 1px solid rgba(18, 26, 58, .13);
    box-shadow: 0 1px 2px rgba(18, 26, 58, .05);
  }
  html.pc-on .hxc__b--cancel:hover { background: #F6F7FB; }
  html[data-theme="dark"].pc-on .hxc__b--cancel { color: var(--pc-ink); background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); box-shadow: none; }
  html[data-theme="dark"].pc-on .hxc__b--cancel:hover { background: rgba(255, 255, 255, .09); }
  html.pc-on .hxc__b--ok { box-shadow: 0 10px 22px -12px rgba(61, 79, 224, .75), inset 0 1px 0 rgba(255, 255, 255, .22); }
  html.pc-on .hxc.is-danger .hxc__b--ok { box-shadow: 0 10px 22px -12px rgba(214, 48, 58, .75), inset 0 1px 0 rgba(255, 255, 255, .22); }
  html.pc-on .hxc__b--ok:hover { filter: brightness(1.06); transform: translateY(-1px); }
  html.pc-on .hxc__b:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(75, 99, 255, .38); }
  html.pc-on .hxc.is-danger .hxc__b--ok:focus-visible { box-shadow: 0 0 0 3px rgba(229, 72, 77, .38); }

  /* ---------- dialogs (buildModal): fit the window ---------- */
  html.pc-on .modal-dialog { margin-top: 28px; margin-bottom: 28px; }
  html.pc-on .modal-dialog-centered { min-height: calc(100% - 56px); }
  html.pc-on .modal-content { max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); }
  html.pc-on .modal-content > .modal-header, html.pc-on .modal-content > .modal-footer { flex: 0 0 auto; }
  html.pc-on .modal-content > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  html.pc-on .modal-header .modal-title { font-size: 17px; }
  html.pc-on .modal-header .btn-close {
    width: 32px; height: 32px; padding: 0; border-radius: 10px; opacity: .6; background-size: 11px;
    transition: opacity .15s ease, background-color .15s ease;
  }
  html.pc-on .modal-header .btn-close:hover { opacity: 1; background-color: rgba(18, 26, 58, .06); }
  html[data-theme="dark"].pc-on .modal-header .btn-close:hover { background-color: rgba(255, 255, 255, .08); }
  html.pc-on .modal-footer { background: rgba(18, 26, 58, .018); }
  html[data-theme="dark"].pc-on .modal-footer { background: rgba(255, 255, 255, .02); }
  html.pc-on .modal-backdrop.show { background: #0E1228; opacity: .26; }
  html[data-theme="dark"].pc-on .modal-backdrop.show { background: #000; opacity: .5; }
  html.pc-on .modal.fade .modal-dialog { transform: translateY(10px) scale(.97); transition: transform .34s cubic-bezier(.2, .9, .25, 1.05); }
  html.pc-on .modal.show .modal-dialog { transform: none; }

  /* ---------- notifications: New / Earlier ---------- */
  html.pc-on .notif-panel .notif-sec {
    padding: 10px 11px 5px; font: 640 11px/1.2 var(--font), Inter, sans-serif;
    letter-spacing: .02em; color: var(--pc-ink-3);
  }
  html.pc-on .notif-panel .notif-sec:first-child { padding-top: 5px; }

  /* ---------- update prompt: a compact centred dialog ---------- */
  html.pc-on body .vupx {
    left: 50%; right: auto; top: 50%; bottom: auto; width: 440px; max-width: calc(100vw - 48px); box-sizing: border-box;
    padding: 28px 26px 22px; border-radius: 20px; text-align: center; pointer-events: none; opacity: 0;
    background: #FFFFFF; border: 1px solid rgba(18, 26, 58, .07);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 40px 90px -36px rgba(20, 28, 70, .55), 0 3px 10px -4px rgba(20, 28, 70, .12);
    transform: translate(-50%, -46%) scale(.965);
    transition: transform .34s cubic-bezier(.2, .9, .25, 1.05), opacity .2s ease;
  }
  html.pc-on body .vupx.is-open { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
  html[data-theme="dark"].pc-on body .vupx { background: #1A1E2D; border-color: rgba(255, 255, 255, .09); box-shadow: 0 44px 96px -36px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .06); }
  html.pc-on body .vupx .vupx__grip { display: none; }
  html.pc-on body .vupx-scrim { background: rgba(14, 18, 40, .26); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  html[data-theme="dark"].pc-on body .vupx-scrim { background: rgba(0, 0, 0, .5); }
  html.pc-on body .vupx .vupx__acts { flex-direction: row-reverse; justify-content: center; gap: 10px; }
  html.pc-on body .vupx .vupx__go, html.pc-on body .vupx .vupx__later { width: auto; flex: 0 0 auto; height: 40px; padding: 0 18px; border-radius: 11px; font-size: 14px; }
  html.pc-on body .vupx .vupx__later { border: 1px solid rgba(18, 26, 58, .13); background: #FFFFFF; color: var(--pc-ink); }
  html[data-theme="dark"].pc-on body .vupx .vupx__later { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); color: var(--pc-ink); }

  @media (prefers-reduced-motion: reduce) {
    html.pc-on .hts .ht-toast, html.pc-on .hxc__box, html.pc-on body .vupx, html.pc-on .modal.fade .modal-dialog { transition: opacity .15s linear !important; }
    html.pc-on .hxc__box, html.pc-on .modal.fade .modal-dialog { transform: none !important; }
    html.pc-on body .vupx { transform: translate(-50%, -50%) !important; }
  }
}

/* =====================================================================================
 *  v3.52.0 — KEYBOARD SHORTCUTS: PANEL HINTS + THE REFERENCE SHEET (§6.g3)
 *  ------------------------------------------------------------------------------------
 *  Owner, 11 Sep 2026: "There is no shortcut key hint in the app, please add it to the
 *  user panel. This feature is very important."
 *
 *  APPEND-ONLY, and EVERY rule below lives inside @media (min-width: 768px) prefixed
 *  html.pc-on — tools/check-pc-scope.js fails the build otherwise. The phone cannot see a
 *  declaration of it, and does not need to: `.pcum` is `hidden` on the phone and
 *  openUserPanel() returns early below 768.
 *
 *  Family: v3.51.0 "HAALTD SURFACES". `.hks__box` copies `.hxc__box`'s desktop rule
 *  exactly — 20px radius, #FFFFFF / #1A1E2D, the same shadow pair, the same spring
 *  entrance — so the sheet reads as a sibling of the confirm dialog, not a new object.
 *
 *  ⚠ WHY A NEW CLASS FOR THE HINTS. `.pcum__k` is `display: none !important` (~18640,
 *  v3.38.0) because the owner asked for every ⌘ badge in the app to go. They have now
 *  asked for hints back IN THIS PANEL ONLY. `.pcum__kb` is a separate class so that rule
 *  stays exactly as it is and nothing else in the app grows a badge again.
 *
 *  ⚠ THE OLD `?` OVERLAY (`.kbd-overlay`, styles injected by shortcuts.js) IS STILL THE
 *  PHONE PATH. It is not dead code — shortcuts.js picks the sheet only on desktop, so a
 *  Bluetooth keyboard on a narrow window still gets something styled rather than nothing.
 * ================================================================================== */

@media (min-width: 768px) {

  /* ---------------------------------------------------------------- panel hints */
  html.pc-on .pcum__kb { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
  html.pc-on .pcum__kb kbd {
    min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    font: 550 11px/1 var(--font-ledger), ui-monospace, monospace; font-variant-numeric: tabular-nums;
    color: var(--pc-ink-2); background: #FFFFFF;
    border: 1px solid rgba(18, 26, 58, .13); border-radius: 6px;
    box-shadow: 0 1px 0 rgba(18, 26, 58, .05);
    transition: color .14s var(--pc-ease), border-color .14s var(--pc-ease);
  }
  html.pc-on .pcum__i:hover .pcum__kb kbd { color: var(--pc-indigo); border-color: rgba(75, 99, 255, .3); }
  html[data-theme="dark"].pc-on .pcum__kb kbd {
    color: var(--pc-ink-2); background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .13); box-shadow: none;
  }
  html[data-theme="dark"].pc-on .pcum__i:hover .pcum__kb kbd { color: #A6B2FF; border-color: rgba(166, 178, 255, .34); }

  /* ---------------------------------------------------------------- the sheet
     Width arithmetic — two columns, and it must survive the narrowest desktop (768):
       column 293 x2 + 30 column-gap + 44 padding = 660
       660 + 24 scrim padding x2 = 708  <  768   ✓  (measured: 18/18 widths x themes clean)
     Keys cell 88px — the widest sequence is `G` + then + `D`:
       22 + 5 + 26 + 5 + 22 = 80, and `Ctrl` + `S` = 38 + 5 + 22 = 65. Both clear 88. */
  .hks { position: fixed; inset: 0; z-index: 2100; }
  html.pc-on .hks__scrim {
    position: absolute; inset: 0; background: rgba(14, 18, 40, .26);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .24s var(--pc-ease);
  }
  html.pc-on .hks.is-in .hks__scrim { opacity: 1; }
  html.pc-on .hks.is-out .hks__scrim { opacity: 0; transition-duration: .18s; }
  html[data-theme="dark"].pc-on .hks__scrim { background: rgba(0, 0, 0, .5); }

  html.pc-on .hks__wrap {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    padding: 24px; overflow: auto;
  }
  html.pc-on .hks__box {
    width: 660px; max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: 20px; background: #FFFFFF; border: 1px solid rgba(18, 26, 58, .07);
    box-shadow: 0 40px 90px -36px rgba(20, 28, 70, .55), 0 3px 10px -4px rgba(20, 28, 70, .12);
    transform: translateY(10px) scale(.965); opacity: 0;
    transition: transform .34s cubic-bezier(.2, .9, .25, 1.05), opacity .2s ease;
  }
  html.pc-on .hks.is-in .hks__box { transform: none; opacity: 1; }
  html.pc-on .hks.is-out .hks__box { transform: scale(.975); opacity: 0; transition: transform .18s ease, opacity .16s ease; }
  html[data-theme="dark"].pc-on .hks__box {
    background: #1A1E2D; border-color: rgba(255, 255, 255, .09);
    box-shadow: 0 44px 96px -36px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .06);
  }

  html.pc-on .hks__head {
    flex: 0 0 auto; display: grid; grid-template-columns: 44px minmax(0, 1fr) 32px;
    align-items: start; column-gap: 15px; padding: 22px 22px 15px;
  }
  html.pc-on .hks__badge {
    width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
    font-size: 19px; color: var(--pc-indigo); background: rgba(75, 99, 255, .1);
  }
  html[data-theme="dark"].pc-on .hks__badge { color: #A6B2FF; background: rgba(108, 124, 255, .16); }
  html.pc-on .hks__text { min-width: 0; padding-top: 2px; }
  html.pc-on .hks__t {
    margin: 0 0 5px; font: 700 17.5px/1.3 var(--font-display), "Inter Tight", Inter, sans-serif;
    letter-spacing: -.02em; color: var(--pc-ink);
  }
  html.pc-on .hks__s { margin: 0; font: 450 13px/1.5 var(--font), Inter, sans-serif; color: var(--pc-ink-2); }
  html.pc-on .hks__s kbd { margin: 0 1px; }
  html.pc-on .hks__x {
    width: 32px; height: 32px; border: 0; background: transparent; border-radius: 10px;
    color: var(--pc-ink-3); font-size: 13px; cursor: pointer; display: grid; place-items: center;
    transition: background .15s var(--pc-ease), color .15s var(--pc-ease);
  }
  html.pc-on .hks__x:hover { background: rgba(18, 26, 58, .06); color: var(--pc-ink); }
  html[data-theme="dark"].pc-on .hks__x:hover { background: rgba(255, 255, 255, .08); }
  html.pc-on .hks__x:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(75, 99, 255, .38); }

  html.pc-on .hks__find {
    flex: 0 0 auto; margin: 0 22px; display: grid; grid-template-columns: 30px minmax(0, 1fr);
    align-items: center; height: 38px; border-radius: 11px;
    background: rgba(18, 26, 58, .038); border: 1px solid rgba(18, 26, 58, .08);
    transition: border-color .15s var(--pc-ease), box-shadow .15s var(--pc-ease);
  }
  html.pc-on .hks__find:focus-within { border-color: rgba(75, 99, 255, .45); box-shadow: 0 0 0 3px rgba(75, 99, 255, .14); }
  html[data-theme="dark"].pc-on .hks__find { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .1); }
  html.pc-on .hks__find > i { justify-self: center; font-size: 12.5px; color: var(--pc-ink-3); }
  html.pc-on .hks__q {
    border: 0; background: transparent; outline: none; padding: 0 12px 0 0; min-width: 0;
    font: 450 13.5px/1 var(--font), Inter, sans-serif; color: var(--pc-ink);
  }
  html.pc-on .hks__q::placeholder { color: var(--pc-ink-3); }

  html.pc-on .hks__body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 18px 22px 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 30px; align-content: start;
  }
  html.pc-on .hks__col { min-width: 0; }
  html.pc-on .hks__grp + .hks__grp { margin-top: 19px; }
  html.pc-on .hks__gt {
    margin: 0 0 7px; font: 640 10.5px/1 var(--font), Inter, sans-serif;
    letter-spacing: .07em; text-transform: uppercase; color: var(--pc-ink-3);
  }
  html.pc-on .hks__r {
    display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center;
    column-gap: 12px; min-height: 30px; padding: 3px 0;
  }
  html.pc-on .hks__r.is-off { display: none; }
  html.pc-on .hks__grp.is-off { display: none; }
  html.pc-on .hks__keys { display: inline-flex; align-items: center; gap: 5px; }
  html.pc-on .hks__then { font: 450 10.5px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }
  html.pc-on .hks__d {
    display: flex; align-items: center; gap: 7px; min-width: 0;
    font: 480 13px/1.35 var(--font), Inter, sans-serif; color: var(--pc-ink);
  }
  html.pc-on .hks__ctx {
    flex: 0 0 auto; padding: 2px 6px; border-radius: 6px;
    font: 600 10px/1.35 var(--font), Inter, sans-serif; letter-spacing: .01em;
    color: var(--pc-ink-3); background: rgba(18, 26, 58, .055);
  }
  html[data-theme="dark"].pc-on .hks__ctx { background: rgba(255, 255, 255, .07); }
  html.pc-on .hks__none {
    grid-column: 1 / -1; padding: 26px 0 22px; text-align: center;
    font: 450 13px/1.5 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }

  html.pc-on .hks kbd {
    min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    font: 550 11.5px/1 var(--font-ledger), ui-monospace, monospace; font-variant-numeric: tabular-nums;
    color: var(--pc-ink); background: #FFFFFF;
    border: 1px solid rgba(18, 26, 58, .14); border-radius: 7px;
    box-shadow: 0 1px 0 rgba(18, 26, 58, .06), inset 0 1px 0 #FFFFFF;
  }
  html[data-theme="dark"].pc-on .hks kbd {
    color: var(--pc-ink); background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  }

  html.pc-on .hks__ft {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px 22px; border-top: 1px solid var(--pc-hair); background: rgba(18, 26, 58, .018);
    font: 450 12px/1.4 var(--font), Inter, sans-serif; color: var(--pc-ink-3);
  }
  html[data-theme="dark"].pc-on .hks__ft { background: rgba(255, 255, 255, .02); }
  html.pc-on .hks__ft kbd { height: 19px; min-width: 19px; padding: 0 5px; font-size: 10.5px; border-radius: 6px; }
  html.pc-on .hks__ftr { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }

  @media (prefers-reduced-motion: reduce) {
    html.pc-on .hks__box, html.pc-on .hks__scrim { transition: opacity .15s linear !important; }
    html.pc-on .hks__box { transform: none !important; }
  }
}


/* =====================================================================================
 *  v3.53.0 — DESKTOP RIGHT-CLICK MENUS (.hcm), "PC NATIVE 2026", Mac idiom (§6.g5)
 *  ------------------------------------------------------------------------------------
 *  Owner, 12 Sep 2026: "the right click designs ... currently they show the phone design
 *  not PC/Desktop, smooth and premium. Mac design. Keep the phone untouched." Then:
 *  "check any other sections for right click and implement the same."
 *
 *  WHAT THIS REPLACED: every contextmenu handler opened a PHONE BOTTOM SHEET (`.ivq`,
 *  `.rcx`) and there was not one desktop rule for either. A right-click on a 1512px
 *  window slid a 500px sheet with a drag grip and a Cancel button up from the bottom
 *  edge, behind a full-screen scrim, hiding the table you were working in.
 *
 *  APPEND-ONLY, every rule inside @media (min-width: 768px) prefixed html.pc-on.
 *  The surface is deliberately the SAME glass as `.pcum`, the desktop account panel —
 *  same blur, saturate, border and lift — so the two read as one family.
 *  Component: js/ui/contextmenu.js.
 * ================================================================================== */

@media (min-width: 768px) {

  .hcm { position: fixed; inset: 0; z-index: 2200; }
  /* The layer itself must not eat the page: only the menus take pointer events, so the
     click that dismisses is caught on the root and everything else stays live. */
  html.pc-on .hcm { background: transparent; }

  html.pc-on .hcm__menu {
    position: fixed; min-width: 246px; max-width: 300px; padding: 5px;
    border-radius: 13px; overflow: visible;
    background: linear-gradient(180deg, rgba(252, 253, 255, .97), rgba(246, 248, 253, .94));
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 26px 58px -24px rgba(20, 28, 66, .48), 0 2px 8px -3px rgba(20, 28, 66, .14),
                inset 0 1px 0 rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
    opacity: 0; transform: scale(.96);
    transition: opacity .13s var(--pc-ease), transform .13s var(--pc-ease);
  }
  html.pc-on .hcm__menu.is-in { opacity: 1; transform: none; }
  html[data-theme="dark"].pc-on .hcm__menu {
    background: linear-gradient(180deg, rgba(31, 34, 46, .975), rgba(21, 24, 34, .955));
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 30px 64px -24px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .1);
  }

  /* --- the context line. Rows are dense; without it you cannot tell which one you hit. */
  html.pc-on .hcm__hd { padding: 8px 10px 9px; }
  html.pc-on .hcm__hdt {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    font: 500 10.5px/1 var(--font-ledger), ui-monospace, monospace; font-variant-numeric: tabular-nums;
    color: var(--pc-ink-3);
  }
  html.pc-on .hcm__hdn {
    margin-top: 4px; font: 620 12.8px/1.25 var(--font), Inter, sans-serif; color: var(--pc-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.pc-on .hcm__hda { color: var(--pc-ink-2); }
  html.pc-on .hcm__hda.is-overdue { color: var(--pc-coral); }
  html.pc-on .hcm__hda.is-paid { color: var(--pc-green); }

  html.pc-on .hcm__sep { height: 1px; background: var(--pc-hair); margin: 4px 8px; }

  html.pc-on .hcm__i {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 0 9px; height: 29px;
    border: 0; background: transparent; border-radius: 8px; cursor: default; text-align: left;
    font: 500 13px/1 var(--font), Inter, sans-serif; color: var(--pc-ink); text-decoration: none;
    transition: background .1s var(--pc-ease), color .1s var(--pc-ease);
  }
  html.pc-on .hcm__i > i:first-child { font-size: 14px; color: var(--pc-ink-2); width: 16px; text-align: center; transition: color .1s; }
  html.pc-on .hcm__i .hcm__lbl { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.pc-on .hcm__i .hcm__go { flex: 0 0 auto; font-size: 10px; color: var(--pc-ink-3); transition: color .1s; }
  /* Hover AND keyboard land on the same class, so arrow-keying looks identical to the mouse. */
  html.pc-on .hcm__i:hover, html.pc-on .hcm__i.is-on {
    background: rgba(75, 99, 255, .1); color: var(--pc-indigo);
  }
  html.pc-on .hcm__i:hover > i:first-child, html.pc-on .hcm__i.is-on > i:first-child,
  html.pc-on .hcm__i:hover .hcm__go, html.pc-on .hcm__i.is-on .hcm__go { color: var(--pc-indigo); }
  html[data-theme="dark"].pc-on .hcm__i:hover, html[data-theme="dark"].pc-on .hcm__i.is-on { color: #A6B2FF; }
  html[data-theme="dark"].pc-on .hcm__i:hover > i:first-child, html[data-theme="dark"].pc-on .hcm__i.is-on > i:first-child,
  html[data-theme="dark"].pc-on .hcm__i:hover .hcm__go, html[data-theme="dark"].pc-on .hcm__i.is-on .hcm__go { color: #A6B2FF; }

  html.pc-on .hcm__i--dan { color: var(--pc-coral); }
  html.pc-on .hcm__i--dan > i:first-child { color: var(--pc-coral); }
  html.pc-on .hcm__i--dan:hover, html.pc-on .hcm__i--dan.is-on { background: rgba(197, 39, 30, .1); color: var(--pc-coral); }
  html.pc-on .hcm__i--dan:hover > i:first-child, html.pc-on .hcm__i--dan.is-on > i:first-child { color: var(--pc-coral); }

  html.pc-on .hcm__i[aria-disabled="true"] { color: var(--pc-ink-3); pointer-events: none; }
  html.pc-on .hcm__i[aria-disabled="true"] > i:first-child { color: var(--pc-ink-3); opacity: .55; }

  /* WhatsApp keeps its own green — it is a third-party mark, not a status colour. */
  html.pc-on .hcm__i--wa > i:first-child { color: #25A667; }
  html.pc-on .hcm__i--wa:hover > i:first-child, html.pc-on .hcm__i--wa.is-on > i:first-child { color: #25A667; }

  /* --- submenu. Mac flies it out sideways; it does NOT slide the parent away. */
  html.pc-on .hcm__menu--sub { min-width: 212px; }

  /* --- the row you right-clicked stays marked while the menu is up.
     ⚠ This is NOT the row-hover forbidden by §4.11.6 — that rule bans a band repainting
     as the pointer merely crosses a table. This paints on an explicit right-click and
     answers "which row is this menu about?", which the menu header alone cannot at a
     glance. It clears the moment the menu closes. */
  html.pc-on tr.inv-row.is-ctx > td,
  html.pc-on .ivl-row.is-ctx,
  html.pc-on .rc-card.is-ctx,
  html.pc-on .rbd-r.is-ctx { background: rgba(75, 99, 255, .07) !important; }
  html[data-theme="dark"].pc-on tr.inv-row.is-ctx > td,
  html[data-theme="dark"].pc-on .ivl-row.is-ctx,
  html[data-theme="dark"].pc-on .rc-card.is-ctx,
  html[data-theme="dark"].pc-on .rbd-r.is-ctx { background: rgba(108, 124, 255, .13) !important; }

  @media (prefers-reduced-motion: reduce) {
    html.pc-on .hcm__menu { transition: opacity .1s linear !important; transform: none !important; }
  }
}


/* =====================================================================================
 *  v3.55.0 — THE ROLE PICKER IN THE INVITE MODAL, ON DESKTOP (.ums__seg)
 *  ------------------------------------------------------------------------------------
 *  Owner, 12 Sep 2026, with a screenshot: "The buttons are looking grey boxes, awkward."
 *
 *  ⚠ THE CAUSE, AND THE LESSON: `.ums__seg` / `.ums__segb` were defined ONLY inside
 *    `@media (max-width: 767.98px)` (~5882). `openInvite()` is a SHARED modal — the same
 *    markup opens on the phone and the desktop — so above 768px those classes matched
 *    NOTHING and the browser drew its own square grey buttons. Nothing was overriding the
 *    design; there was no design there to apply. ANY shared modal built from `ums__`,
 *    `hm-` or other phone-era classes is capable of the same thing. Before adding one,
 *    check the class has a rule on BOTH sides of 768.
 *
 *  ⚠ IT WAS NOT MERELY UGLY. The `.is-on` highlight is phone-only too, so all three roles
 *    rendered identically and the admin could not see which one was selected — on the one
 *    screen where the difference is who may delete invoices.
 *
 *  APPEND-ONLY, entirely inside @media (min-width: 768px) prefixed html.pc-on; the phone
 *  rules at ~5882 are untouched and phone-regression stays 24/0.
 *
 *  Family: `.pcseg`, the topbar theme switch (~16781) — same 11px radius, same 3px
 *  padding, same tinted trough and hairline, same indigo gradient thumb that slides.
 *  Indigo rather than the phone's near-black `--m-char` because §4.11 makes indigo the
 *  desktop chrome colour and this is a chrome control.
 * ================================================================================== */

@media (min-width: 768px) {

  html.pc-on .ums__seg {
    display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 11px;
    background: rgba(20, 28, 60, .055); border: 1px solid var(--pc-hair);
    position: relative; box-shadow: none;          /* kills the phone's inset ring */
  }
  html[data-theme="dark"].pc-on .ums__seg { background: rgba(255, 255, 255, .05); }

  html.pc-on .ums__segb {
    flex: 1 1 0; min-width: 0; height: 32px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 0; background: transparent; border-radius: 8px; cursor: pointer;
    position: relative; z-index: 1;
    font: 600 13px/1 var(--font), Inter, sans-serif; letter-spacing: -.005em;
    color: var(--pc-ink-3); white-space: nowrap;
    transition: color .2s var(--pc-ease);
  }
  html.pc-on .ums__segb i { font-size: 13px; }
  html.pc-on .ums__segb:not(.is-on):hover { color: var(--pc-ink); }
  html.pc-on .ums__segb:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(75, 99, 255, .38); }

  /* ⚠ THE PHONE PAINTS THE SELECTED CHIP WITH `background: var(--m-char)` — near-black.
     On desktop the selection is the sliding indigo thumb below, so the button's own
     background must be cleared or a charcoal block sits on top of it. Same for the phone's
     drop shadow. */
  html.pc-on .ums__segb.is-on { background: transparent; box-shadow: none; color: #FFF; }
  html.pc-on .ums__segb:disabled { opacity: .5; cursor: default; }

  /* The thumb. No extra element in the markup — `.ums__seg` has no children beyond the
     buttons, and adding one would mean touching users.js and therefore the phone. It is
     drawn as a pseudo-element and positioned from `data-i`, which the JS already knows.
     Three roles, equal widths, so each step is exactly one third of the trough. */
  html.pc-on .ums__seg::before {
    content: ""; position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px;
    width: calc((100% - 6px - 4px) / 3);
    border-radius: 8px; background: var(--pc-grad);
    box-shadow: 0 4px 10px -4px rgba(61, 79, 224, .7);
    transition: transform .32s var(--pc-ease-out);
  }
  html.pc-on .ums__seg[data-i="1"]::before { transform: translateX(calc(100% + 2px)); }
  html.pc-on .ums__seg[data-i="2"]::before { transform: translateX(calc(200% + 4px)); }

  /* Fallback: if `data-i` is ever missing the thumb would sit under "Admin" and lie about
     the selection, so it is hidden and the selected button carries its own fill instead. */
  html.pc-on .ums__seg:not([data-i])::before { display: none; }
  html.pc-on .ums__seg:not([data-i]) .ums__segb.is-on {
    background: var(--pc-grad); box-shadow: 0 4px 10px -4px rgba(61, 79, 224, .7);
  }

  @media (prefers-reduced-motion: reduce) {
    html.pc-on .ums__seg::before { transition: none; }
  }
}


/* =====================================================================================
 *  v3.56.0 — DESKTOP NAV CHROME: the rail's active state, hover and folded tooltips
 *  ------------------------------------------------------------------------------------
 *  Signed off against the owner's three mockups (13 Sep 2026), which were MEASURED, not
 *  eyeballed, against a pristine v3.55.0 render at the same 1512x900 @2x:
 *    · sidebar right edge  css 231-232  -> --sidebar-w 232  UNCHANGED
 *    · topbar bottom edge  css  60-61   -> --topbar-h  60   UNCHANGED, full width
 *    · collapsed rail edge css  75-76   -> 76             UNCHANGED
 *    · active pill  css 23 -> 208.5, h 36 -> rail pad 12 + item margin 10, h 38 UNCHANGED
 *    · marker bar   css 15-18, h 16     -> where the old left:-6px bar already sat
 *  The ANATOMY is v3.55.0's anatomy. Only the TREATMENT changed. A "column" rail and
 *  grouped sections were built, previewed and REJECTED — do not reintroduce them.
 *
 *  THE ONE THING TO UNDERSTAND BEFORE EDITING ANY OF THIS:
 *  `.nav-item::before` and `::after` are `position:absolute; inset:0`, but the phone-era
 *  rail left `width:3px; height:18px` on them (~2503, ~3778, ~16903) for its old edge
 *  bar. left + right + width all set is OVER-CONSTRAINED: the browser DROPS `right` and
 *  the box collapses to a 3x18 sliver. That single fact broke THREE things in shipped
 *  v3.55.0, all fixed below, all verified by measurement on a pristine build:
 *    1. hover  — the desktop rail had NO visible hover feedback at all;
 *    2. active — in LIGHT the active item had no background whatsoever (sampled
 *                245,240,243 against an inactive 243,239,243). Dark only looked right by
 *                accident, via the phone rule at ~3859;
 *    3. tooltip — `content: none` does not clear an inherited `width`, so the folded
 *                tooltip painted a 23px box with its label spilling out of it.
 *  Every `width: auto; height: auto` below is LOAD-BEARING. Do not tidy them away.
 * ================================================================================== */

@media (min-width: 768px) {

  /* ======================================================= THE RAIL SURFACE ======= */
  /* ⚠ pc-on has never reset three things the phone-era rail left behind: an inset white
     rim (~3736 light / ~3849 dark), a cream warm-glow `::before` (~3744) and a `::after`
     sheen (~3751). They are why today's light rail reads faintly PEACH at the top while
     the mockup's is cool and neutral. Measured against the page: the mockup rail carries
     no warmth at all. */
  html.pc-on .app-sidebar { box-shadow: none; padding: 14px 12px 12px; }
  html.pc-on .app-sidebar::before,
  html.pc-on .app-sidebar::after { content: none; }

  html.pc-on .sidebar__head { padding: 2px 10px 12px; margin-bottom: 2px; }
  html.pc-on .sidebar__label {
    font: 700 10px/1 var(--font), Inter, sans-serif; letter-spacing: .14em;
    text-transform: uppercase; color: var(--pc-ink-3);
  }
  html.pc-on .sidebar__collapse {
    width: 26px; height: 26px; border-radius: 8px; font-size: 12px;
    color: var(--pc-ink-3); background: transparent;
    transition: background .16s var(--pc-ease), color .16s var(--pc-ease);
  }
  html.pc-on .sidebar__collapse:hover { background: rgba(20, 28, 60, .06); color: var(--pc-ink); }
  html[data-theme="dark"].pc-on .sidebar__collapse:hover { background: rgba(255, 255, 255, .08); color: var(--pc-ink); }

  /* ======================================================= NAV ITEMS ============== */
  html.pc-on .nav-item {
    height: 38px; border-radius: 11px; gap: 12px; padding: 0 12px; margin: 2px 10px;
    width: calc(100% - 20px); position: relative; border: 0;
    font: 560 13.6px/1 var(--font), Inter, sans-serif; color: var(--pc-ink-2);
    letter-spacing: -.008em;
    transition: color .16s var(--pc-ease), background .16s var(--pc-ease), box-shadow .18s var(--pc-ease);
  }
  html.pc-on .nav-item .ni { width: 19px; height: 19px; stroke-width: 1.7; }

  /* ⚠ `width: auto; height: auto` IS LOAD-BEARING — DO NOT TIDY IT AWAY.
     The pc hover wash (~16894) is `position:absolute; inset:0`, but the phone-era rail
     left `.nav-item::before { left:-8px; width:3px }` at ~2503 and
     `.nav-item.is-active::before { width:3px; height:18px }` at ~3778 behind it.
     left + right + width all set is OVER-CONSTRAINED, so the browser DROPS `right` and
     the wash collapses to a 3x18 sliver at the item's left edge. Measured on PRISTINE
     v3.55.0 in BOTH themes: computed `::before` is 3px x 18px. The shipped consequence
     is that the desktop rail has NO VISIBLE HOVER FEEDBACK AT ALL.
     This is trap 8's cousin: not specificity, but a later declaration in a DIFFERENT
     property changing how an earlier one resolves. */
  html.pc-on .nav-item::before {
    inset: 0; width: auto; height: auto; border-radius: 11px;
    background: rgba(20, 28, 60, .05); box-shadow: none;
  }
  html[data-theme="dark"].pc-on .nav-item::before { background: rgba(255, 255, 255, .06); }
  html.pc-on .nav-item:hover { color: var(--pc-ink); }
  html.pc-on .nav-item:hover::before { opacity: 1; transform: none; }

  /* ---- ACTIVE: the white elevated card from the mockup ---------------------------
     ⚠ WHY THIS HAS TO BE STATED HERE. The light theme already defines exactly this card
     at ~3767 (`background:#FFFFFF` + the same three shadows) — but
     `html.pc-on .nav-item { background: transparent }` at ~16887, added to kill the old
     `--blue` fill, is (0,2,1) against that rule's (0,2,0) and wins. pc-on removed the
     card and never replaced it, leaving the state to a `::before` that cannot render.
     Net effect shipped today: on desktop LIGHT the active item has no background at all.
     Dark only looks right by accident, via `html[data-theme="dark"] .nav-item.is-active`
     at ~3859 — a phone rule doing desktop's job. */
  html.pc-on .nav-item.is-active {
    color: var(--pc-indigo); font-weight: 640;
    background: #FFFFFF;
    box-shadow:
      0 1px 2px rgba(10, 31, 68, .05),
      0 8px 20px -10px rgba(10, 31, 68, .26),
      inset 0 0 0 1px rgba(10, 31, 68, .045);
  }
  html.pc-on .nav-item.is-active::before { opacity: 0; }   /* the card IS the state */
  html.pc-on .nav-item.is-active .ni { stroke-width: 1.9; }
  html[data-theme="dark"].pc-on .nav-item.is-active {
    color: #A6B2FF;
    background: rgba(255, 255, 255, .085);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 8px 20px -12px rgba(0, 0, 0, .7);
  }

  /* ⚠ THE ACTIVE BAR MOVES OUT OF `::after` AND INTO ITS OWN ELEMENT.
     It has to. `.app-shell.is-collapsed .nav-item::after` (~422) is the collapsed
     TOOLTIP, and `html.pc-on .nav-item.is-active::after` (~16903) overrode its `content`
     with "" — so the active item is the one item in the rail with no label when folded.
     The mockup shows a tooltip on the ACTIVE item, which is impossible until the bar
     stops squatting on that pseudo-element. */
  html.pc-on .nav-item.is-active::after { content: none; }

  /* left 4px inside .sidebar__nav = css 16 from the rail wall; the mockup measures the
     bar at 15-18. Same place the old left:-6px bar sat, now owned by the rail so it
     cannot orphan itself when the rail folds. */
  html.pc-on .nav-mark {
    display: block; position: absolute; left: 4px; top: var(--y, 0px);
    width: 3px; height: 16px; margin-top: -8px; border-radius: 0 3px 3px 0;
    background: var(--pc-grad); opacity: 0;
    transition: top .3s var(--pc-ease), opacity .2s var(--pc-ease);
  }
  html.pc-on .sidebar__nav.has-mark .nav-mark { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { html.pc-on .nav-mark { transition: none; } }

  /* ======================================================= FOOTER ================= */
  html.pc-on .sidebar__footer { border-top: 1px solid var(--pc-hair); padding: 10px 2px 0; margin-top: 10px; }
  html.pc-on .workspace-chip {
    border-radius: 12px; border: 1px solid var(--pc-hair); background: rgba(255, 255, 255, .55);
    padding: 7px 9px; gap: 9px; min-width: 0;
  }
  html[data-theme="dark"].pc-on .workspace-chip { background: rgba(255, 255, 255, .05); }
  html.pc-on .workspace-chip__logo img { width: 26px; height: 26px; border-radius: 8px; }
  /* the mockup clips "Workspace" — a min-width:auto flex child refusing to shrink. */
  html.pc-on .workspace-chip__meta { min-width: 0; overflow: hidden; }
  html.pc-on .workspace-chip__name {
    font: 650 12.8px/1.25 var(--font-display), Inter, sans-serif; color: var(--pc-ink);
    overflow: hidden; text-overflow: ellipsis;
  }
  html.pc-on .workspace-chip__sub { font: 500 10.5px/1.25 var(--font), Inter, sans-serif; color: var(--pc-ink-3); }
  /* ⚠ .ver-chip's CSS is INJECTED AT RUNTIME by version.js (~568) as single-class rules,
     so a bare `.ver-chip` selector here would lose — qualify it, exactly as v3.51.0 had
     to for the update prompt. Indigo not green: §4.11.3 keeps green for paid/due/overdue.
     Amber on a waiting update is kept — that one IS status. */
  html.pc-on .app-sidebar .ver-chip {
    font: 500 10.5px/1 var(--font-ledger), monospace; letter-spacing: 0;
    color: var(--pc-ink-3); padding: 9px 4px 2px;
  }
  html.pc-on .app-sidebar .ver-chip:hover { color: var(--pc-ink-2); background: transparent; }
  html.pc-on .app-sidebar .ver-chip__dot { background: var(--pc-indigo); }
  html.pc-on .app-sidebar .ver-chip.has-update .ver-chip__dot { background: var(--pc-amber); }

  /* ======================================================= COLLAPSED (76px) ======= */
  html.pc-on .app-shell.is-collapsed .app-sidebar { padding-left: 8px; padding-right: 8px; }
  html.pc-on .app-shell.is-collapsed .sidebar__head { justify-content: center; padding: 2px 0 12px; }
  html.pc-on .app-shell.is-collapsed .nav-item {
    width: 40px; height: 40px; margin: 3px auto; padding: 0; border-radius: 12px; justify-content: center;
  }
  html.pc-on .app-shell.is-collapsed .nav-item::before { border-radius: 12px; }
  /* the mockup shows no edge bar when folded — the white squircle carries the state */
  html.pc-on .app-shell.is-collapsed .nav-mark { display: none; }
  html.pc-on .app-shell.is-collapsed .sidebar__footer { padding: 10px 0 0; }
  html.pc-on .app-shell.is-collapsed .workspace-chip { padding: 6px; border-color: transparent; background: transparent; }
  html.pc-on .app-shell.is-collapsed .ver-chip { justify-content: center; }

  /* ⚠ THE RAIL MUST STOP CLIPPING WHEN FOLDED. `.app-sidebar` is `overflow: hidden auto`
     (~3212), so the collapsed tooltip — which lives at `left: calc(100% + 10px)` — is
     sliced off at the rail's right wall. Shipped today the tooltip renders as a ~10px
     dark stub. `overflow-x: visible` cannot be combined with `overflow-y: auto` (the
     spec computes the visible axis to auto), so the whole box goes visible while folded.
     Folded content is 10 items x 46 + head 40 + footer 60 = ~560px, which fits any rail
     taller than ~620px; below that the scroll is restored and tooltips clip again,
     which is the right trade at that height. */
  html.pc-on .app-shell.is-collapsed .app-sidebar { overflow: visible; }
  @media (max-height: 640px) {
    html.pc-on .app-shell.is-collapsed .app-sidebar { overflow: hidden auto; }
  }

  /* Tooltips — now reachable on EVERY item including the active one. Fill #0B1020,
     sampled from the mockup (it is --pc-ink, not the 2022 blob's #141C2E). */
  html.pc-on .app-shell.is-collapsed .nav-item::after {
    content: attr(data-tip); z-index: 30;
    /* ⚠ THE THIRD SITE OF THE SAME TRAP. `html.pc-on .nav-item.is-active::after` (~16903)
       still carries `width:3px; height:18px` from the old edge bar; `content: none`
       above does NOT clear them. Without these two the tooltip paints a 23px-wide
       background (3 + 20 padding) with the label spilling out of it, unreadable over
       the page. Reset the geometry, not just the content. */
    width: auto; height: auto; white-space: nowrap;
    left: calc(100% + 10px); padding: 6px 10px; border-radius: 9px;
    font: 600 12px/1 var(--font), Inter, sans-serif; letter-spacing: -.004em;
    background: #0B1020; color: #fff;
    box-shadow: 0 14px 30px -14px rgba(10, 20, 60, .65), 0 0 0 1px rgba(255, 255, 255, .07);
    transition: opacity .14s var(--pc-ease), transform .14s var(--pc-ease);
  }
  html[data-theme="dark"].pc-on .app-shell.is-collapsed .nav-item::after {
    background: #272C3B; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .1);
  }

  /* ======================================================= TOP BAR ================ */
  /* ⚠ --topbar-h STAYS 60. Nine desktop rules pin sticky table heads to `top: 60px`
     (~19605, 20271, 20334, 21178, 21233, 21743, 22023, 22885, 23106). */
  html.pc-on .topbar__search { max-width: 540px; }
  html.pc-on .topbar__search-input {
    height: 38px; border-radius: 11px; font-size: 13.5px;
    background: rgba(20, 28, 60, .045); border: 1px solid transparent; box-shadow: none;
  }
  html[data-theme="dark"].pc-on .topbar__search-input { background: rgba(255, 255, 255, .055); }
  html.pc-on .topbar__search-input:hover { background: rgba(20, 28, 60, .065); }
  html[data-theme="dark"].pc-on .topbar__search-input:hover { background: rgba(255, 255, 255, .08); }
  html.pc-on .topbar__search-input:focus {
    background: var(--pc-card-solid); border-color: rgba(75, 99, 255, .5);
    box-shadow: 0 0 0 3.5px rgba(75, 99, 255, .13);
  }
  /* squircle avatar with two-letter initials, as the mockup shows ("HA", not "H") */
  html.pc-on .user-chip__avatar {
    width: 30px; height: 30px; border-radius: 9px;
    font: 700 11.5px/1 var(--font), Inter, sans-serif; letter-spacing: .01em;
    background: var(--pc-grad); box-shadow: 0 2px 7px -3px rgba(60, 78, 220, .6);
  }
  html.pc-on .user-chip { gap: 9px; padding: 3px 9px 3px 3px; border-radius: 11px; }
}


/* =====================================================================================
 *  v3.57.0 — THE NOTIFICATION BADGE. Owner, 13 Sep 2026: "It looks crumpled when there
 *  are notifications, the numbers take over the ring icon."
 *  ------------------------------------------------------------------------------------
 *  THE CAUSE. `.notif-badge` (~3385) is `top: 4px; right: 4px` — INSIDE the button, not
 *  on its corner — and only its RIGHT edge is pinned, so every extra character grows it
 *  LEFTWARD, across the bell. Measured on the 34px desktop bell before the fix:
 *      "1"  16.1px wide, 22.3% of the button covered
 *      "3"  18.1px wide, 25.1%
 *      "12" 22.1px wide, 30.6%
 *      "99+" 30.8px wide, 41.5%  <- a 30.8px pill inside a 34px button
 *  The 2px opaque ring then notches out whatever rim survived. That is the "crumpled".
 *
 *  AFTER: 17.0 x 17.0 (an exact circle) at one digit, 23.1px at three characters,
 *  14.6% / 21.5% coverage — and what it covers is the button's EMPTY corner, not the
 *  glyph. Verified both themes at 1 / 3 / 12 / 9+: inside the topbar, 6px clear of the
 *  theme segment, .topbar__right does not clip it.
 *
 *  ⚠ The count is capped at "9+" in notifications.js (~318, was "99+"). "99+" is a 29px
 *  badge on a 34px control even when it hangs off the corner. The bell is DESKTOP-ONLY
 *  (`.notif-bell { display: none !important }` at ~6472), so the cap cannot reach the phone.
 * ================================================================================== */

@media (min-width: 768px) {

  /* the badge must be allowed out of the button's box */
  html.pc-on .topbar__right .notif-bell { overflow: visible; }

  html.pc-on .topbar__right .notif-badge {
    /* -6/-6 puts the badge's centre almost exactly on the button's corner, so it reads
       as attached to the bell rather than painted over it. The glyph is untouched. */
    top: -5px; right: -5px; bottom: auto; left: auto;
    /* 3px of side padding, not 5: at ONE digit the padding must not beat min-width, or
       the badge renders as a 21px oval instead of a 17px circle. */
    min-width: 17px; height: 17px; padding: 0 3px;
    border-radius: 8.5px;
    display: grid; place-items: center;
    font: 700 10px/1 var(--font), Inter, sans-serif;
    font-variant-numeric: tabular-nums;   /* "11" must not look narrower than "10" */
    letter-spacing: .01em; text-align: center;
    background: var(--pc-grad); color: #fff;
    /* the ring separates the badge from the bell; 2px of the TOPBAR's colour, plus a
       soft indigo lift so it sits above the chrome rather than inside it. */
    box-shadow: 0 0 0 2px var(--pc-badge-ring), 0 2px 7px -2px rgba(60, 78, 220, .6);
  }
  html.pc-on { --pc-badge-ring: #F4F5FA; }
  html[data-theme="dark"].pc-on { --pc-badge-ring: #12151F; }

  /* ⚠ the bell is the FIRST child of .topbar__right (index.html ~503 — do not reorder),
     so the badge overhangs to the RIGHT, towards the theme segment. Two extra px of gap
     keeps the ring off its neighbour at every count. */
  html.pc-on .topbar__right .notif-bell { margin-right: 2px; }
}


/* =====================================================================================
 *  v3.57.0 — THE ACTIVITY FEED'S STICKY DAY HEADERS. Owner, 13 Sep 2026: "when scrolling
 *  down, the events all get crumpled and altogether, making it hard to see it."
 *  ------------------------------------------------------------------------------------
 *  TWO faults, both reproduced at 1512x900 with 6 days x 9 events, both fixed here.
 *
 *  1. THE HEADERS PILED UP. activity.js (~615) appended header + rows + header + rows
 *     into ONE flat container, and every `.avd-day` is `position: sticky; top: 97px`.
 *     A sticky box is only pushed out of the way by the bottom of ITS OWN containing
 *     block; with no per-day wrapper that block was the entire feed, so nothing ever
 *     evicted a header. Measured at scrollY 1150: THREE headers in the sticky band, two
 *     at the IDENTICAL top of 97px, printing over each other ("Yesterday" and
 *     "11 Sept 2026" as one smear). Fixed by the `.avd-grp` wrapper in activity.js —
 *     that wrapper is load-bearing, not decoration.
 *
 *  2. THE STUCK HEADER WAS SEE-THROUGH. `background: rgba(20, 28, 60, .028)` is 2.8%
 *     opaque, so rows scrolled straight THROUGH the header meant to hide them. The tint
 *     is kept to the exact same value, now painted over the card's own solid colour.
 *
 *  AFTER: one header in the band instead of three, background rgb(255,255,255),
 *  document height unchanged.
 * ================================================================================== */

@media (min-width: 768px) {

  /* --- fault 1: one containing block per day, so each header evicts the last --- */
  html.pc-on .avx .avd-grp { display: block; position: relative; }

  /* ⚠ `.avd-r:last-child { border-bottom: 0 }` (~21785) meant "the last row IN THE LIST".
     Once each day is wrapped it would mean "the last row of EVERY day", erasing the
     separator between days. Re-aim it at the final row of the final group. */
  html.pc-on .avx .avd-grp .avd-r:last-child { border-bottom: 1px solid var(--pc-hair); }
  html.pc-on .avx .avd-grp:last-of-type .avd-r:last-child { border-bottom: 0; }

  /* --- fault 2: an OPAQUE header. The designed tint is kept exactly, but painted over
         the card's own solid colour instead of over whatever is scrolling past. --- */
  html.pc-on .avx .avd-day {
    background:
      linear-gradient(rgba(20, 28, 60, .028), rgba(20, 28, 60, .028)),
      var(--pc-card-solid);
  }
  html[data-theme="dark"].pc-on .avx .avd-day {
    background:
      linear-gradient(rgba(255, 255, 255, .035), rgba(255, 255, 255, .035)),
      var(--pc-card-solid);
  }
}