:root{
  /* Z-index scale (2026-10-22). Overlays and modals from 1000 up take a
     token, so the shared modal layers, what opens inside them, toasts and
     sign-in gates keep one order. Values under 1000 (dropdowns, the drawer,
     the form builder) stay as they are: they are ordered among themselves
     and never meet a dialog. */
  --z-app-overlay:1000;  /* full-panel tools: composer, contract editor, form preview */
  --z-app-modal:1400;    /* self-built in-page modals; shared dialogs open above them */
  --z-modal:1500;        /* shared modal layer 1 (#modal-overlay) */
  --z-modal-2:1600;
  --z-modal-3:1700;
  --z-modal-pop:1900;    /* menus and popovers that can open inside a modal */
  --z-palette:2500;      /* sidebar search */
  --z-float:4000;        /* tooltips, drag ghosts */
  --z-call:9000;         /* telehealth call */
  --z-picker:9500;       /* date and time pickers: above modals and a call */
  --z-banner:9999;       /* build update, import progress */
  --z-toast:10000;
  --z-gate:99999;        /* sign-in, session expiry, step-up, EULA */
  /* Calendar timed-view hour row height. MUST stay in sync with the
     CAL_HOUR_PX JS constant (search CAL_HOUR_PX). Both define how many px
     equal one hour in day/week views; all event positioning, buffer bands,
     the now-line, and drag-snap math derive from it. */
  --cal-hour-px: 132px;
  /* Dark surfaces - sidebar, topbar, drawers, modals */
  --bg:#14102e;--bg-panel:#1d1840;--bg-card:#272150;--bg-card-hover:#322a63;
  /* Charcoal top bar, matches the mobile app header (mobile --charcoal) */
  --charcoal:#23212b;
  /* Sidebar surface. Lifted one step (Sep 2026): the old bottom stop and footer
     were near black and rows sat at 4% white, so the rail read as a black sheet.
     --sb-grad-mid is sidebar-only on purpose; --bg-panel also paints drawers. */
  --sb-grad-top:#2a2258;--sb-grad-mid:#241d4f;--sb-grad-bot:#211a4a;--sb-foot-bg:#1c1641;--sb-glass-border:rgba(199,184,255,.35);--sb-item-rest:rgba(255,255,255,.07);--sb-item-hover:rgba(255,255,255,.12);
  --sb-text-strong:#ffffff;--sb-icon:rgba(255,255,255,.72);--sb-user-name:rgba(255,255,255,.85);
  --sb-active-top:rgba(155,85,255,.28);--sb-active-bot:rgba(107,33,234,.20);--sb-active-glow:rgba(107,33,234,.30);--sb-active-sheen:rgba(255,255,255,.18);
  --sb-agency-text:#ffb199;
  --bg-input:#181232;--purple:#6b21ea;--purple-light:#9b55ff;--purple-soft:#c7b8ff;--purple-dim:rgba(107,33,234,.12);
  --purple-border:rgba(107,33,234,.35);--orange:#ff4000;--orange-light:#ff6133;--orange-text:#c23100;
  --orange-dim:rgba(255,64,0,.12);--orange-border:rgba(255,64,0,.35);
  --text:#ede8ff;--text-muted:#b8aee0;--text-dim:#8a7fc0;
  --border:rgba(255,255,255,.08);--radius:10px;--radius-lg:14px;
  --shadow:0 4px 32px rgba(0,0,0,.5);--shadow-p:0 0 24px rgba(107,33,234,.18);
  --sidebar-w:220px;
  /* Light surfaces - main content area */
  --main-bg:#f2f0f8;--main-card:#ffffff;--main-card-hover:#faf9ff;
  --main-bg-sunk:#e8e5f0;                    /* recessed well a level below --main-bg (conversation thread) */
  --main-border:rgba(107,33,234,.12);--main-text:#1a1030;--main-text-muted:#5a4d7a;
  --main-input:#ffffff;--main-input-border:rgba(107,33,234,.2);

  /* ============ ADDITIONS (May 12 2026) ============ */
  /* Brand interaction states */
  --purple-hover:#5816c2;--purple-active:#4a0fa3;
  --orange-hover:#e63a00;--orange-active:#cc3300;

  /* Semantic palette */
  --success:#10b981;--success-light:#34d399;--success-dim:rgba(52,211,153,.12);--success-text:#059669;
  --warning:#f59e0b;--warning-light:#fbbf24;--warning-dim:rgba(245,158,11,.12);--warning-text:#92400e;--warning-text-strong:#713f12;
  --danger:#ef4444;--danger-light:#f87171;--danger-dim:rgba(239,68,68,.12);--danger-text:#dc2626;
  --info:#3b82f6;--info-dim:rgba(59,130,246,.12);--info-text:#1e40af;

  /* Gift card types (Card Variations badge). Categorical, so not the semantic
     palette; values are the ones the badge used inline before 2026-10-09. */
  --type-service:#1D9E75;--type-service-dim:rgba(29,158,117,.14);
  --type-package:#0ea5e9;--type-package-dim:rgba(14,165,233,.14);
  --type-series:#d97706;--type-series-dim:rgba(245,158,11,.14);
  --type-membership:#a855f7;--type-membership-dim:rgba(168,85,247,.14);

  /* Form states */
  --text-placeholder:#9ca3af;--text-disabled:#d0d0d8;
  --focus-ring:0 0 0 3px rgba(107,33,234,.25);

  /* Overlays + shadows */
  --overlay:rgba(0,0,0,.5);
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:0 10px 25px rgba(0,0,0,.12);

  /* Radii */
  --radius-sm:4px;--radius-md:8px;--radius-full:9999px;

  /* ============ ADDITIONS (June 9 2026) - Type, weight, line-height, space scales ============ */
  /* Codifies the implicit scales already in use (inline-style catalog, June 9). Numeric names map 1:1 to current px values: Phase 0 is a visual no-op. Off-grid drift (9/15/17px type, 3/5/9px space) is intentionally NOT tokenized; those sites stay inline for Phase 3 review. See MySpark-Inline-Style-Migration-Spec.md. */
  /* Type scale */
  --fs-10:10px;--fs-11:11px;--fs-12:12px;--fs-13:13px;--fs-14:14px;
  --fs-16:16px;--fs-18:18px;--fs-20:20px;--fs-22:22px;
  /* Weight scale */
  --fw-400:400;--fw-500:500;--fw-600:600;--fw-700:700;--fw-800:800;
  /* Line-height scale (numeric x10: --lh-15 = 1.5) */
  --lh-10:1;--lh-12:1.2;--lh-13:1.3;--lh-14:1.4;--lh-15:1.5;--lh-16:1.6;--lh-17:1.7;
  /* Space scale (2px grid) */
  --space-0:0;--space-2:2px;--space-4:4px;--space-6:6px;--space-8:8px;
  --space-10:10px;--space-12:12px;--space-14:14px;--space-16:16px;
  --space-18:18px;--space-20:20px;--space-24:24px;
  /* Light-surface system tokens (June 8 2026), see MySpark-Design-Tokens.docx */
  --divider:rgba(107,33,234,.18);          /* stronger than --main-border for section separation */
  --subnav-bar:#ddd8ee;                      /* tab bar band, clearly distinct from content by tone */
  --subnav-tab-hover:var(--main-text);       /* hover target for inactive tabs */
  --on-accent:#ffffff;                       /* text and marks on a filled purple/orange surface */
  --on-success:#0a1c0e;                      /* text on a filled --success-light chip */
  --cal-completed:#6b7280;                   /* completed visit on the calendar grid */
  --cal-glass:rgba(255,255,255,.24);         /* see-through chip on a calendar tile */
  --cal-glass-dark:rgba(0,0,0,.10);          /* the same chip on a light surface (month chips, drawer) */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:Lato,sans-serif;background:var(--main-bg);color:var(--main-text);font-size:14px;line-height:1.5}
.hidden{display:none!important}
/* Every single-choice dropdown wears the app chevron (2026-10-09), not the
   browser arrow, which sat against the right edge. A select cannot carry
   ::after, so the chevron is two 2px diagonal strokes drawn as backgrounds, in
   the select's own text color softened, so it follows light and dark surfaces
   with no raw color. !important because many selects set background as a
   shorthand or inline, which would otherwise wipe it; only the arrow, the
   image layers and the right padding are forced. :where() keeps the selector
   weight at zero. Skipped: list boxes (multiple/size), .ctl-sel and
   .conv-assign-select (their wrappers draw the chevron) and GrapesJS fields. */
select:where(:not([multiple],[size],.ctl-sel,.conv-assign-select,.gjs-field select)){
  -webkit-appearance:none!important;appearance:none!important;padding-right:34px!important;
  background-image:linear-gradient(45deg,transparent calc(50% - 1px),color-mix(in srgb,currentColor 65%,transparent) calc(50% - 1px),color-mix(in srgb,currentColor 65%,transparent) calc(50% + 1px),transparent calc(50% + 1px)),linear-gradient(135deg,transparent calc(50% - 1px),color-mix(in srgb,currentColor 65%,transparent) calc(50% - 1px),color-mix(in srgb,currentColor 65%,transparent) calc(50% + 1px),transparent calc(50% + 1px))!important;
  background-position:calc(100% - 21px) calc(50% + 1px),calc(100% - 16px) calc(50% + 1px)!important;
  background-size:5px 5px,5px 5px!important;background-repeat:no-repeat!important}
/* Compact selects (11px, 28px tall): the chevron sits closer in. */
.fb-cond-block select{padding-right:24px!important;background-position:calc(100% - 15px) calc(50% + 1px),calc(100% - 10px) calc(50% + 1px)!important;background-size:5px 5px,5px 5px!important}
#mkd-overlay{position:fixed;inset:0;background:var(--main-bg);z-index:var(--z-app-modal);display:flex;flex-direction:column;overflow:hidden}
/* Branded light theme + simplifications, scoped to the designer overlay only.
   GrapesJS sets its theme on :root, so we override the concrete classes directly
   for a deterministic light look that matches the app. */
#mkd-overlay{--gjs-main-font:Lato,Helvetica,sans-serif}
#mkd-overlay .gjs-one-bg,#mkd-overlay .gjs-pn-commands,#mkd-overlay .gjs-pn-views,#mkd-overlay .gjs-pn-views-container,#mkd-overlay .gjs-blocks-c{background-color:var(--main-card)}
#mkd-overlay .gjs-pn-panel,#mkd-overlay .gjs-pn-views,#mkd-overlay .gjs-pn-commands{box-shadow:none;border-color:var(--main-border)}
#mkd-overlay .gjs-two-color,#mkd-overlay .gjs-four-color,#mkd-overlay .gjs-sm-sector-label,#mkd-overlay .gjs-block-label,#mkd-overlay .gjs-clm-label{color:var(--main-text)}
#mkd-overlay .gjs-pn-btn{color:var(--main-text-muted)}
#mkd-overlay .gjs-pn-btn:hover{color:var(--main-text)}
#mkd-overlay .gjs-pn-btn.gjs-pn-active{color:var(--purple)}
#mkd-overlay .gjs-three-bg{background-color:var(--purple)}
/* Section/category headers + form fields to light */
#mkd-overlay .gjs-block-category .gjs-title,#mkd-overlay .gjs-sm-sector-title,#mkd-overlay .gjs-trait-category .gjs-title{background-color:var(--main-bg);color:var(--main-text);border-bottom-color:var(--main-border)}
#mkd-overlay .gjs-field{background-color:var(--main-input);color:var(--main-text);border:1px solid var(--main-input-border)}
#mkd-overlay .gjs-field input,#mkd-overlay .gjs-field select,#mkd-overlay .gjs-field textarea{color:var(--main-text)}
/* Compact blocks: 3 per row, smaller icon + label */
#mkd-overlay .gjs-block{width:29%;min-width:0;min-height:58px;padding:.55em .4em;margin:6px 2% 4px;font-size:10px;border-color:var(--main-border);box-shadow:none}
#mkd-overlay .gjs-block:hover{box-shadow:0 0 0 2px var(--purple)}
#mkd-overlay .gjs-block-svg,#mkd-overlay .gjs-block svg{width:24px;height:24px}
#mkd-overlay .gjs-block-label{font-size:9px;font-family:Lato,sans-serif}
/* Style manager lives in the custom #mkd-style "Customize" sidebar, so hide
   GrapesJS's own right panel (empty now) and the class/state selector manager,
   which is not relevant for email editing. */
#mkd-overlay .gjs-pn-views,#mkd-overlay .gjs-pn-views-container{display:none!important}
#mkd-overlay .gjs-clm,#mkd-overlay .gjs-clm-tags,#mkd-overlay .gjs-sm-sels{display:none!important}
/* With the right panel gone, let the canvas fill its container (no blank gap). */
#mkd-overlay .gjs-cv-canvas{width:100%!important;right:0!important}
/* Style sectors always expanded (no collapsing) in the Customize sidebar; the
   headers are static labels, not clickable, no collapse chevron. */
#mkd-style .gjs-sm-sector .gjs-sm-properties{display:block!important}
#mkd-style .gjs-sm-title,#mkd-style .gjs-sm-sector-title{pointer-events:none;cursor:default}
#mkd-style .gjs-caret,#mkd-style [class*="caret"]{display:none!important}
/* Make the exit-preview control an obvious labeled button */
#mkd-overlay .gjs-off-prv{background:var(--orange);color:#fff;border-radius:6px;padding:6px 10px;display:inline-flex;align-items:center;gap:6px;box-shadow:var(--shadow-md)}
#mkd-overlay .gjs-off-prv svg{width:18px;height:18px;fill:#fff}
#mkd-overlay .gjs-off-prv::after{content:'Exit preview';font-size:12px;font-weight:700;font-family:Lato,sans-serif}
/* Admin-only sidebar items. Body class is set/unset in applyRolePermissions.
   Belt-and-suspenders: even if JS gating misses, the CSS hides them.
   The Manage label (#sb-admin-label) is NOT here: it heads Staff, which every
   role sees. Hiding it below admin merged Staff into the Growth group. */
body:not(.role-admin) #sb-automations,
body:not(.role-admin) #sb-settings{display:none!important}
body:not(.subaccount-litbiz) #sb-agency-tools,
body:not(.agency-staff) #sb-agency-tools{display:none!important}
body:not(.agency-admin) .at-tab-admin{display:none!important}
/* Role tier backstop, mirrors applyRolePermissions JS hides. */
body.role-user #sb-conversations,
body.role-user #sb-forms,
body.role-user #pos-nav-discounts{display:none!important}
body:not(.role-power-up) #sb-memberships{display:none!important}
body:not(.role-power-up) #pos-nav-invoices{display:none!important}
body:not(.role-manager-up) #sb-reporting,
body:not(.role-manager-up) #sb-catalog,
body:not(.role-manager-up) #sb-marketing,
body:not(.role-manager-up) #pos-nav-transactions,
body:not(.role-manager-up) #pos-nav-disputes{display:none!important}
/* ── AGENCY TOOLS PANEL ─────────────────────────────────── */
#panel-agency-tools{padding:24px 28px 60px}
.at-tabs{display:flex;background:var(--subnav-bar);border-bottom:2px solid var(--divider);margin:-24px -28px 24px;flex-shrink:0;padding:0}
.at-tab{padding:13px 18px;font-size:13px;font-weight:600;color:var(--main-text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .18s;background:none;border-top:none;border-left:none;border-right:none;font-family:Lato,sans-serif;white-space:nowrap}
.at-tab:hover{color:var(--main-text)}
.at-tab.active{color:var(--purple);border-bottom-color:var(--purple)}
.at-tab-content{display:block}.at-placeholder{padding:60px 20px;text-align:center;color:var(--main-text-muted);font-size:15px;background:var(--main-card);border:1px dashed var(--main-border);border-radius:var(--radius-lg)}
.at-placeholder a{margin-top:16px;display:inline-block}
.at-sec-label{display:flex;align-items:center;gap:10px;margin:28px 0 14px}
.at-sec-label:first-child{margin-top:0}
.at-sec-label-text{font-family:'Exo 2',sans-serif;font-size:11px;font-weight:700;color:var(--main-text-muted);text-transform:uppercase;letter-spacing:.12em}
.at-sec-label-line{flex:1;height:1px;background:var(--main-border)}

/* Service tier panels */
.at-svc-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.at-svc-tab{padding:7px 14px;border-radius:var(--radius);background:var(--main-card);border:1px solid var(--main-border);color:var(--main-text);font-family:'Exo 2',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.at-svc-tab:hover{border-color:var(--purple)}
.at-svc-tab.active{background:var(--purple);border-color:var(--purple);color:#fff}
.at-svc-panel{display:none}
.at-svc-panel.active{display:block}
.at-svc-panel-hdr{padding:14px 16px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-bottom:none}
.at-svc-panel-name{font-family:'Exo 2',sans-serif;font-size:15px;font-weight:700;color:var(--main-text);margin-bottom:4px}
.at-svc-panel-desc{font-size:12px;color:var(--main-text-muted);line-height:1.5}
.at-tiers-grid{display:grid;gap:12px;padding:14px;background:var(--main-card);border:1px solid var(--main-border);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg);grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.at-tiers-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:700px){.at-tiers-grid{grid-template-columns:1fr!important}}
.at-tier-card{padding:16px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:var(--radius);display:flex;flex-direction:column}
.at-tier-card.featured{border-color:var(--purple);box-shadow:0 0 0 1px var(--purple)}
.at-tier-name{font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;color:var(--main-text);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.at-tier-price{font-family:'Exo 2',sans-serif;font-size:24px;font-weight:800;color:var(--purple);margin-bottom:6px;line-height:1}
.at-tier-price span{font-size:12px;font-weight:500;color:var(--main-text-muted);margin-left:2px}
.at-tier-note{font-size:11px;color:var(--main-text-muted);margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--main-border);line-height:1.5}
.at-tier-features{list-style:none;padding:0;margin:0;font-size:12px;color:var(--main-text);line-height:1.7}
.at-tier-features li{padding-left:14px;position:relative}
.at-tier-features li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--purple)}

/* Top-ups and overage, under the MySpark+ tier cards only. Its own card rather
   than a continuation of .at-tiers-grid, because it answers a different
   question (what happens when you need more) and does not vary by tier. */
.at-up{margin-top:12px;padding:16px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg)}
.at-up-h{font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;color:var(--main-text);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.at-up-sub{font-size:12px;color:var(--main-text-muted);line-height:1.5;margin-bottom:14px}
.at-up-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:700px){.at-up-cols{grid-template-columns:1fr}}
.at-up-col{padding:12px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:var(--radius)}
.at-up-col-h{font-size:11px;font-weight:700;color:var(--purple);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.at-up-list{list-style:none;padding:0;margin:0;font-size:12px;color:var(--main-text);line-height:1.6}
.at-up-list li{margin-bottom:5px}
.at-up-ch{display:block;font-weight:600;color:var(--main-text-muted);font-size:11px}
.at-up-note{margin-top:8px;padding-top:8px;border-top:1px solid var(--main-border);font-size:11px;color:var(--main-text-muted);line-height:1.5}
.at-up-foot{margin-top:12px;font-size:12px;color:var(--main-text);line-height:1.5}

/* Accordion (SOP, Playbook) */

::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--purple-border);border-radius:3px}

/* AUTH */
#auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 25% 20%,rgba(107,33,234,.22) 0%,transparent 55%),
             radial-gradient(ellipse at 75% 80%,rgba(255,64,0,.12) 0%,transparent 50%),var(--bg)}
.auth-card{background:var(--bg-panel);border:1px solid var(--purple-border);border-radius:var(--radius-lg);
  padding:44px 40px;width:380px;box-shadow:var(--shadow),var(--shadow-p)}
.auth-logo{text-align:center;margin-bottom:32px}
.auth-logo img{width:80px;height:80px;object-fit:contain;border-radius:12px}
.auth-logo h1{font-family:'Exo 2',sans-serif;font-size:22px;font-weight:800;margin-top:12px;color:#fff}
.auth-logo h1 span{color:var(--orange)}
.auth-subtitle{font-size:12px;color:var(--text-muted);margin-top:3px}
.auth-error{background:var(--orange-dim);border:1px solid var(--orange-border);color:var(--orange-light);
  padding:10px 14px;border-radius:var(--radius);font-size:13px;margin-bottom:14px}

/* FORMS */
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:11px;font-weight:600;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.form-group input,.form-group select,.form-group textarea{width:100%;background:var(--bg-input);
  border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:9px 12px;
  font-family:Lato,sans-serif;font-size:14px;transition:border-color .2s;outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-dim)}
/* iPhone Safari zooms the page into any focused field under 16px, and the
   page stays zoomed after. On touch devices, the signed-out fields a phone
   user meets (sign-in, 2FA code, forgot password, the emailed reset link)
   get 16px. Scoped so desktop layouts keep their 14px fields. */
@media (pointer:coarse){
  #auth-screen .form-group input,#fp-email,#rp-pass,#rp-pass2,#totp-login-code{font-size:var(--fs-16)}
}
.form-group textarea{resize:vertical;min-height:80px}
.form-group select option{background:var(--bg-card)}
.pkg-field{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:9px 12px;font-family:Lato,sans-serif;font-size:14px;outline:none;box-sizing:border-box}
.pkg-field:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-dim)}
.pkg-field option{background:var(--bg-card)}
/* Radio and checkbox inputs should NOT inherit the full-width style above */
.form-group input[type="radio"],.form-group input[type="checkbox"]{width:auto;padding:0}
/* Date/time pickers: render custom white icons so the picker is always
   visible regardless of how the browser handles color-scheme. The native
   indicator is made transparent but stays clickable on top. */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Opt-in: bottom-align the inputs in a two-field row so a label that wraps to
   two lines grows upward instead of shoving its own input out of line with
   its neighbour. Needed once the settings cards became half-width. NOT applied
   to .form-row globally: rows pairing an input with a textarea want the
   default top alignment. */
.form-row.align-inputs{align-items:end}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
/* Add Contact form (032 _contactFormBodyHTML). Core fields always show; address,
   more details and emergency contact open from the link row. */
.cf-hint{font-size:12px;color:var(--text-muted);margin:0 0 12px}
.cf-link{font-size:12px;color:var(--purple);text-decoration:none}
.cf-link:hover{text-decoration:underline}
.cf-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:2px 0 14px}
.cf-sec{border-top:1px solid var(--border);padding-top:12px;margin-bottom:4px}
.form-row.cf-csz{grid-template-columns:2fr 1fr 1fr}
@media (max-width:600px){.form-row.cf-csz{grid-template-columns:1fr 1fr;row-gap:0}.form-row.cf-csz > .form-group:first-child{grid-column:1 / -1}}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--radius);
  font-family:Lato,sans-serif;font-size:13px;font-weight:600;cursor:pointer;border:none;
  transition:all .18s;white-space:nowrap}
.btn-primary{background:var(--orange);color:#fff}
.btn-action{background:var(--orange);color:#fff;border:none;border-radius:var(--radius)}
.btn-action:hover{background:var(--orange-hover)}
.btn-action:active{background:var(--orange-active)}
.btn-action:disabled{opacity:.5;cursor:not-allowed}
/* Both orange classes are the one commit action: same hover, press and disabled. */
.btn-primary:hover{background:var(--orange-hover)}
.btn-primary:active{background:var(--orange-active)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-purple{background:var(--purple);color:#fff}.btn-purple:hover{background:var(--purple-light)}
.btn-ghost{background:transparent;color:var(--main-text-muted);border:1px solid var(--main-border)}
.btn-ghost:hover{background:var(--main-bg);color:var(--main-text);border-color:var(--purple-border)}
.btn-danger{background:rgba(239,68,68,.12);color:var(--danger-light);border:1px solid rgba(239,68,68,.22)}
.btn-danger:hover{background:rgba(239,68,68,.22)}
.btn-sm{padding:5px 11px;font-size:12px}
.btn-icon{padding:7px;background:transparent;border:1px solid var(--border);color:rgba(237,232,255,.82)}
.btn-icon:hover{background:var(--bg-card);color:var(--text)}
.btn-full{width:100%;justify-content:center}
/* Universal press feedback so every button responds the instant it is clicked,
   instead of feeling dead until the action renders. Composes with per-variant
   :active background rules. Disabled/busy buttons never press. */
.btn:active:not(:disabled):not(.btn-busy){transform:translateY(1px);filter:brightness(.94)}
.btn:disabled{opacity:.55;cursor:not-allowed}
/* Busy state for async actions (Layer 3): block input, show a spinner, dim. The
   label is swapped to a "working" word by _withBusyBtn. */
.btn-busy{pointer-events:none;opacity:.8;cursor:progress}
.btn-spin{width:13px;height:13px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;display:inline-block;animation:btnspin .6s linear infinite;flex:0 0 auto;vertical-align:middle}
@keyframes btnspin{to{transform:rotate(360deg)}}
.icon-btn-xs{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:4px;
  display:inline-flex;align-items:center;border-radius:4px;transition:all .15s}
.icon-btn-xs:hover{color:var(--orange);background:var(--orange-dim)}
.icon-btn-xs svg{width:13px;height:13px}

/* APP LAYOUT */
#app{display:flex;height:100vh;overflow:hidden}

/* SIDEBAR */
#sidebar{width:var(--sidebar-w);flex-shrink:0;background:linear-gradient(180deg,var(--sb-grad-top) 0%,var(--sb-grad-mid) 60%,var(--sb-grad-bot) 100%);
  border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:50}
.sb-logo{display:flex;align-items:center;gap:10px;padding:16px 18px}
/* Wordmark when expanded, flame mark on the icon rail. Both keep the row 64px tall. */
.sb-logo-wordmark{display:block;width:auto;height:48px;margin:-8px 0}
.sb-logo-mark{display:none;width:auto;height:32px}
.sb-nav{flex:1;overflow-y:auto;padding:6px 8px 10px}
/* A group whose items are all hidden (role or plan gate) hides its label too. */
.sb-group:not(:has(.sb-item:not(.hidden))){display:none}
.sb-item{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--radius);
  font-size:14px;font-weight:500;color:var(--text);cursor:pointer;transition:all .18s;
  background:var(--sb-item-rest);border:1px solid transparent;width:100%;text-align:left;font-family:Lato,sans-serif;margin-bottom:2px}
.sb-item:hover{background:var(--sb-item-hover);color:var(--text)}
.sb-item:focus-visible{outline:2px solid var(--purple-light);outline-offset:-2px}
.sb-item.active{
  background:linear-gradient(180deg,var(--sb-active-top) 0%,var(--sb-active-bot) 100%);
  color:var(--purple-soft);font-weight:600;position:relative;
  border:1px solid var(--sb-glass-border);
  box-shadow:0 2px 10px var(--sb-active-glow),inset 0 1px 0 var(--sb-active-sheen);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sb-item.active svg{color:var(--orange)}
.sb-item svg{width:18px;height:18px;flex-shrink:0;color:var(--sb-icon);transition:color .18s}
.sb-item:hover svg{color:var(--purple-light)}
.sb-section-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-muted);padding:10px 12px 4px}
.sb-bottom{border-top:1px solid var(--border);padding:10px 8px;background:var(--sb-foot-bg)}
.sb-user{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius);cursor:pointer;transition:all .18s}
.sb-user:hover{background:var(--bg-card)}
.sb-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:'Exo 2',sans-serif;font-size:11px;font-weight:700;color:var(--sb-text-strong);flex-shrink:0}
.sb-user-name{font-size:13px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sb-user-name)}
.sb-user-text{flex:1;min-width:0}
/* Business name, where the role used to be (039 renderSidebarWorkspace). */
.sb-user-org{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-user-org.agency-view{color:var(--sb-agency-text);font-weight:600}
/* Icon rail: body.sb-collapsed (040-user-menu.js) narrows the sidebar to icons.
   Labels are visually hidden, not display:none, so each item keeps its
   accessible name. */
#sidebar{position:relative;transition:width .18s ease}
.sb-nav{overflow-x:hidden}
.sb-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-collapse-btn{position:absolute;top:22px;right:-12px;z-index:2;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  background:var(--bg-card);color:var(--text-muted);border:1px solid var(--sb-glass-border);transition:color .18s,background .18s}
.sb-collapse-btn:hover{background:var(--bg-card-hover);color:var(--text)}
.sb-collapse-btn:focus-visible{outline:2px solid var(--purple-light);outline-offset:2px}
.sb-collapse-btn svg{width:14px;height:14px;transition:transform .18s}
body.sb-collapsed{--sidebar-w:64px}
body.sb-collapsed .sb-collapse-btn svg{transform:rotate(180deg)}
body.sb-collapsed .sb-logo{justify-content:center;padding:16px 0}
body.sb-collapsed .sb-logo-wordmark{display:none}
body.sb-collapsed .sb-logo-mark{display:block}
body.sb-collapsed .sb-item{justify-content:center;gap:0;padding:8px 0}
body.sb-collapsed .sb-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;padding:0}
body.sb-collapsed .sb-section-label{font-size:0;height:1px;padding:0;margin:8px 10px;background:var(--border)}
body.sb-collapsed .sb-user{justify-content:center;padding:8px 0}
body.sb-collapsed .sb-user>div:not(.sb-avatar){display:none}
body.sb-collapsed .user-menu-popup{right:auto;width:200px}
/* Search row above the nav (173-sidebar-search.js). Styled as a field, not a page. */
.sb-search-btn{width:calc(100% - 16px);margin:6px 8px 0;color:var(--text-muted);border-color:var(--border)}
/* Agency Tools is the only item not under a group label, so it would sit flush
   under the search row. */
#sb-agency-tools{margin-top:6px}
.sb-search-btn:hover{color:var(--text)}
.sb-search-kbd{margin-left:auto;font-family:inherit;font-size:10px;line-height:1;color:var(--text-dim);
  border:1px solid var(--border);border-radius:4px;padding:3px 5px}
body.sb-collapsed .sb-search-btn{width:calc(100% - 16px)}
body.sb-collapsed .sb-search-kbd{display:none}
/* Search palette. Above modals (1500), below toasts (10000). */
.sbs-overlay{position:fixed;inset:0;z-index:var(--z-palette);background:var(--overlay);display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 0}
.sbs-panel{width:560px;max-width:100%;max-height:70vh;display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg-card);border:1px solid var(--purple-border);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.sbs-input{flex-shrink:0;background:transparent;border:0;border-bottom:1px solid var(--border);color:var(--text);
  font-family:Lato,sans-serif;font-size:15px;padding:14px 16px;outline:none}
.sbs-input::placeholder{color:var(--text-dim)}
.sbs-results{overflow-y:auto;padding:6px}
.sbs-group{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);padding:10px 10px 4px}
.sbs-row{display:flex;align-items:baseline;gap:12px;width:100%;text-align:left;background:transparent;border:0;
  border-radius:var(--radius);padding:8px 10px;color:var(--text);font-family:Lato,sans-serif;font-size:14px;cursor:pointer}
.sbs-row.sbs-sel{background:var(--sb-item-hover)}
.sbs-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbs-sub{margin-left:auto;flex-shrink:1;min-width:0;max-width:50%;font-size:12px;color:var(--text-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbs-empty{padding:14px 12px;font-size:13px;color:var(--text-muted)}
body.sb-collapsed .sb-badge{position:absolute;top:6px;right:12px;margin:0;min-width:0;width:8px;height:8px;padding:0;font-size:0}

/* TOP BAR */
#main-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
#top-bar{height:52px;background:var(--charcoal);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 20px;gap:10px;flex-shrink:0;position:relative}
/* Realtime inbound-message pill: absolutely centered in the top bar so it never
   reflows or overlaps the title/controls. Hidden = opacity:0 + no pointer events
   (stays in DOM, zero layout impact). Height stays within the 52px bar. */
.ws-banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(-6px);
  display:flex;align-items:center;gap:2px;max-width:440px;height:34px;padding:0 4px 0 12px;
  background:var(--main-card);border:1px solid var(--main-border);border-radius:17px;
  box-shadow:0 4px 14px rgba(0,0,0,.28);opacity:0;pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;z-index:60;overflow:hidden;white-space:nowrap}
.ws-banner.ws-banner-show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) translateY(0)}
.ws-banner-main{display:flex;align-items:center;gap:4px;min-width:0;max-width:404px;
  background:none;border:none;cursor:pointer;padding:0;font-size:12.5px;color:var(--main-text);
  overflow:hidden;font-family:Lato,sans-serif}
.ws-banner-label{font-weight:700;color:var(--purple);flex:0 0 auto}
.ws-banner-name{font-weight:600;flex:0 0 auto}
.ws-banner-text{color:var(--main-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ws-banner-x{flex:0 0 auto;background:none;border:none;cursor:pointer;color:var(--main-text-muted);
  font-size:17px;line-height:1;padding:2px 6px;margin-left:2px;border-radius:8px}
.ws-banner-x:hover{color:var(--main-text);background:var(--main-card-hover)}
.top-bar-title{font-family:'Exo 2',sans-serif;font-size:16px;font-weight:700;flex:1;color:#ffffff}
.sync-status{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-muted)}
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--text-dim)}
.sync-dot.synced{background:var(--success-light)}.sync-dot.syncing{background:var(--orange);animation:blink 1s infinite}
.sync-dot.error{background:var(--danger-light)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* NOTIF BELL */
.notif-wrap{position:relative}
.notif-btn{position:relative;background:transparent;border:1px solid var(--border);border-radius:var(--radius);
  padding:7px;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;transition:all .18s}
.notif-btn:hover{background:var(--bg-card);color:var(--text)}
.notif-btn svg{width:16px;height:16px}
.notif-badge{position:absolute;top:-4px;right:-4px;background:var(--orange);color:#fff;
  font-size:9px;font-weight:700;border-radius:10px;padding:1px 5px;min-width:16px;text-align:center}
.notif-drop{position:absolute;top:calc(100% + 8px);right:0;width:360px;
  background:var(--main-card);border:1px solid var(--purple-border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);z-index:300;overflow:hidden}
.notif-drop-head{padding:12px 16px;border-bottom:1px solid var(--divider);
  display:flex;align-items:center;justify-content:space-between;color:var(--main-text)}
.notif-drop-title{font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;color:var(--main-text)}
.notif-drop-list{max-height:320px;overflow-y:auto}
.notif-item{padding:11px 16px;border-bottom:1px solid var(--main-border);cursor:pointer;
  transition:background .15s;display:flex;align-items:flex-start;gap:10px}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--main-card-hover)}
.notif-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.ni-overdue{background:rgba(239,68,68,.2);color:var(--danger-light)}
.ni-due{background:var(--orange-dim);color:var(--orange)}
.ni-appt{background:var(--purple-dim);color:var(--purple-light)}
.notif-text{font-size:12px;color:var(--main-text);line-height:1.45}
.notif-sub{font-size:10px;color:var(--main-text);margin-top:2px}
.notif-empty{padding:28px;text-align:center;color:var(--main-text-muted);font-size:13px}
.notif-item .icon-btn-xs{color:var(--main-text-muted)}
.ni-event{background:var(--purple-dim);color:var(--purple-light)}
.ni-success{background:var(--success-dim);color:var(--success-light)}
.ni-info{background:var(--info-dim);color:var(--info)}
.ni-warn{background:var(--orange-dim);color:var(--orange)}
.ni-alert{background:var(--danger-dim);color:var(--danger-light)}
.notif-digest{padding:8px 14px;border-bottom:1px solid var(--divider);font-size:11px;
  color:var(--main-text-muted);line-height:1.5}
.notif-digest b{color:var(--main-text);font-weight:700}
.notif-digest .nd-alert b{color:var(--danger-light)}
@keyframes notifPulse{0%{box-shadow:0 0 0 0 rgba(243,128,32,.55)}70%{box-shadow:0 0 0 6px rgba(243,128,32,0)}100%{box-shadow:0 0 0 0 rgba(243,128,32,0)}}
.notif-badge:not(.hidden){animation:notifPulse 2s ease-out infinite}
.notif-time{font-size:10px;color:var(--main-text-muted);margin-top:2px;opacity:.85}
/* Collapsed category groups in the bell (e.g. "5 appointments tomorrow"). */
.notif-group{border-bottom:1px solid var(--main-border)}
.notif-group:last-child{border-bottom:none}
.notif-group-head{display:flex;align-items:center;gap:11px;padding:11px 16px;cursor:pointer}
.notif-group-head:hover{background:var(--main-card-hover)}
.notif-group-head .flex-1{min-width:0}
.notif-group-count{font-size:10px;font-weight:700;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--purple-dim);color:var(--purple);display:inline-flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0}
.notif-group-head .ng-chev{color:var(--main-text-muted);transition:transform .15s;flex-shrink:0}
.notif-group.open .ng-chev{transform:rotate(90deg)}
.notif-group-body{display:none}
.notif-group.open .notif-group-body{display:block;box-shadow:inset 2px 0 0 var(--purple-border)}
.notif-group-body .notif-item{padding-left:22px;background:var(--main-bg)}
/* Child of an event group: the header already said who it is from, so the
   timestamp leads and the repeated sentence sits under it, dimmed. */
.notif-repeat-sub{font-size:10px;color:var(--main-text-muted);margin-top:2px;opacity:.8}
.notif-actions{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--divider);position:sticky;top:0;background:var(--main-card);z-index:1}
.notif-actions .btn[disabled]{opacity:.4;cursor:default}

/* PANELS */
#panels{flex:1;overflow:hidden;position:relative;background:var(--main-bg)}
/* Page frame (Sep 2026, after the Berry admin template): every page sits on a
   rounded sheet inside the dark frame. #main-wrap paints the top bar's
   charcoal, which shows at the sheet's rounded corners and down its right edge.
   #panels already clips its children (overflow:hidden), so the radius holds for
   every page. Narrow windows keep the edge-to-edge layout. */
:root{--sheet-radius:18px;--sheet-gap:12px}
#main-wrap{background:var(--charcoal)}
#top-bar{border-bottom-color:transparent}
#panels{margin-right:var(--sheet-gap);border-radius:var(--sheet-radius) var(--sheet-radius) 0 0}
#plan-dunning-banner{margin-right:var(--sheet-gap)}
@media(max-width:700px){#panels{margin-right:0;border-radius:0}#plan-dunning-banner{margin-right:0}}
.panel{position:absolute;inset:0;overflow-y:auto;padding:22px 24px;background:var(--main-bg);color:var(--main-text);
  --text:var(--main-text);
  --text-muted:var(--main-text-muted);
  --bg-card:var(--main-card);
  --bg-card-hover:var(--main-card-hover);
  --bg-input:var(--main-input);
  --border:var(--main-border);
}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;gap:12px}
.page-title{font-family:'Exo 2',sans-serif;font-size:20px;font-weight:700}
.page-subtitle{font-size:12px;color:var(--main-text-muted);margin-top:2px}

/* DASHBOARD */
.dash-greeting{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dash-greeting h2{font-family:'Exo 2',sans-serif;font-weight:800;margin-bottom:0;color:var(--main-text)}
.dash-greeting h2 span{color:var(--orange)}
.dash-datetime{font-size:13px;color:var(--main-text-muted)}
.acct-row{transition:border-color .12s ease,box-shadow .12s ease}
.acct-row:hover{border-color:var(--purple);box-shadow:0 4px 16px rgba(107,33,234,.13)}
.acct-row-main{cursor:pointer}
.acct-stat{text-align:left}
.acct-stat .n{font-family:'Exo 2',sans-serif;font-weight:800;line-height:1;font-size:18px}
.acct-stat .l{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--main-text-muted);margin-top:3px;white-space:nowrap}
.acct-chev{display:inline-flex;align-items:center;color:var(--main-text-muted);transition:transform .18s ease;margin-left:2px}
.acct-expand{border-top:1px dashed var(--main-border);padding:12px 16px;align-items:center;gap:8px;flex-wrap:wrap;background:var(--main-card-hover);border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.acct-expand .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--main-text-muted);font-weight:700;margin-right:4px}
.stat-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);
  padding:14px 16px;border-top:2px solid var(--purple);box-shadow:0 2px 12px rgba(107,33,234,.07)}
.stat-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--main-text-muted);font-weight:600;margin-bottom:4px}
.stat-val{font-family:'Exo 2',sans-serif;font-size:24px;font-weight:800;color:var(--main-text)}
.dash-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg)}
.dash-card-title-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.dash-card-title-row .dash-card-title{margin-bottom:0}
.dash-card-title{font-family:'Exo 2',sans-serif;font-weight:700;margin-bottom:14px;color:var(--main-text);
  display:flex;align-items:center;gap:8px}
.dash-scroll-list{max-height:340px;overflow-y:auto;padding-right:4px}
.dash-scroll-list::-webkit-scrollbar{width:6px}
.dash-scroll-list::-webkit-scrollbar-thumb{background:var(--main-border);border-radius:3px}
.dash-scope-pill{display:inline-flex;background:var(--main-bg);border:1px solid var(--main-border);border-radius:999px;padding:2px;font-size:11px;font-weight:600}
.dash-scope-pill button{background:transparent;border:none;color:var(--main-text-muted);padding:3px 10px;border-radius:999px;cursor:pointer;font-size:11px;font-weight:600;font-family:inherit}
.dash-scope-pill button.active{background:var(--purple);color:#fff}

/* Activity feed */
.dash-act-row{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.dash-act-row:last-child{border-bottom:none}
.dash-act-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(107,33,234,.18)}
.dash-act-icon svg{width:12px;height:12px;color:var(--purple-light)}
.dash-act-text{font-size:12px;color:var(--main-text);line-height:1.4}
.dash-act-when{font-size:10px;color:var(--main-text-muted);margin-top:2px}

.dash-task-row{display:flex;gap:9px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--border)}
.dash-task-row:last-child{border-bottom:none}
.dash-task-chk{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);
  flex-shrink:0;margin-top:2px;cursor:pointer;transition:border-color .18s}
.dash-task-chk:hover{border-color:var(--orange)}
.dash-task-open{flex:1;min-width:0;cursor:pointer;border-radius:4px}
/* Keyboard focus for the dashboard's role=button rows (016, 073). */
.dash-task-chk:focus-visible,.dash-task-open:focus-visible,.dash-bd-row:focus-visible{outline:3px solid var(--purple-border);outline-offset:2px}
.dash-task-name{font-size:13px;font-weight:500;color:var(--main-text)}
.dash-task-due{font-size:11px;color:var(--main-text-muted)}.dash-task-due.overdue{color:var(--danger-light)}.dash-task-due.due-today{color:var(--warning-light)}
.dash-empty{font-size:13px;color:var(--main-text-muted);padding:12px 0;text-align:center}

/* ── Dashboard layout (Sep 2026) ─────────────────────────────────────────
   Header (greeting, scope, quick actions), a hero row of two large cards with
   two stat tiles beside them, My Week, schedule + revenue, then the list
   cards and Journeys. Hero tiles are placed by class (016 _renderDashHero). */
:root{--dash-hero-circle:rgba(255,255,255,.08);--dash-hero-tile:rgba(255,255,255,.16);--dash-hero-spark:rgba(255,255,255,.35)}
.dash-greeting{align-items:center;margin-bottom:12px}
.dash-greeting h2{font-size:21px}
.dash-header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dash-header-actions .dash-scope-pill{background:var(--main-card);padding:3px}
.dash-header-actions .dash-scope-pill button{padding:6px 12px;font-size:12px}
.dash-quick-actions{display:flex;gap:8px;flex-wrap:wrap}
.dash-qa-btn{height:36px;padding:0 13px;display:flex;align-items:center;gap:7px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);cursor:pointer;font-family:inherit;color:var(--main-text);transition:border-color .15s,background .15s}
.dash-qa-btn:hover{border-color:var(--purple);background:var(--main-card-hover)}
.dash-qa-btn svg{width:15px;height:15px;color:var(--purple);flex-shrink:0}
.dash-qa-btn-label{font-size:13px;font-weight:700}
.dash-quick-actions .dash-qa-btn:first-child{background:var(--purple);border-color:var(--purple);color:var(--sb-text-strong)}
.dash-quick-actions .dash-qa-btn:first-child svg{color:var(--sb-text-strong)}
.dash-quick-actions .dash-qa-btn:first-child:hover{background:var(--purple-hover)}
.dash-qa-btn:focus-visible,.dash-card-link:focus-visible,.dash-tl-row:focus-visible,.dash-tl-more:focus-visible{outline:3px solid var(--purple-border);outline-offset:2px}
/* Hero row */
.dash-hero{display:grid;grid-template-columns:1.25fr 1.25fr 1fr;grid-template-rows:1fr 1fr;grid-template-areas:"next total rev" "next total tasks";gap:12px;margin-bottom:12px;min-height:150px}
.dash-hero.no-rev{grid-template-areas:"next total tasks" "next total tasks"}
.dash-hero-block{position:relative;overflow:hidden;border-radius:var(--radius-lg);min-width:0}
.dh-next{grid-area:next}.dh-total{grid-area:total}.dh-rev{grid-area:rev}.dh-tasks{grid-area:tasks}
.dh-next,.dh-total{padding:16px 18px;color:var(--sb-text-strong)}
.dh-next{background:linear-gradient(135deg,var(--purple),var(--purple-active))}
/* Sidebar tokens, not --bg-*: those are redefined light inside the main area. */
.dh-total{background:linear-gradient(135deg,var(--sb-grad-top),var(--sb-foot-bg))}
.dh-next::before,.dh-next::after,.dh-total::before,.dh-total::after{content:'';position:absolute;width:210px;height:210px;border-radius:50%;background:var(--dash-hero-circle);pointer-events:none}
.dh-next::after,.dh-total::after{top:-95px;right:-95px}
.dh-next::before,.dh-total::before{top:-135px;right:-15px;opacity:.6}
.dash-hero-ico{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--purple-dim);color:var(--purple)}
.dash-hero-ico svg{width:19px;height:19px}
.dh-next .dash-hero-ico,.dh-total .dash-hero-ico{background:var(--dash-hero-tile);color:var(--sb-text-strong)}
.dash-hero-val{font-family:'Exo 2',sans-serif;font-weight:800;line-height:1.1;color:var(--main-text)}
.dh-next .dash-hero-val,.dh-total .dash-hero-val{font-size:28px;margin-top:8px;color:var(--sb-text-strong);position:relative}
.dash-hero-label{font-size:12.5px;font-weight:700;color:var(--main-text-muted)}
.dh-next .dash-hero-label,.dh-total .dash-hero-label{color:var(--purple-soft);margin-top:2px}
.dash-hero-sub{font-size:12.5px;color:var(--main-text-muted);margin-top:3px}
.dh-next .dash-hero-sub,.dh-total .dash-hero-sub{color:var(--sb-text-strong);position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-spark{position:absolute;right:18px;bottom:16px;display:flex;align-items:flex-end;gap:4px;height:42px}
.dash-spark i{width:7px;border-radius:3px;background:var(--dash-hero-spark)}
.dash-spark i.now{background:var(--sb-text-strong)}
.dh-rev,.dh-tasks{display:flex;align-items:center;gap:12px;padding:8px 14px;background:var(--main-card);border:1px solid var(--main-border)}
.dh-rev .dash-hero-val,.dh-tasks .dash-hero-val{font-size:20px}
.dh-rev .dash-hero-ico,.dh-tasks .dash-hero-ico{width:36px;height:36px}
.dh-rev .dash-hero-label,.dh-tasks .dash-hero-label{font-size:12px}
.dh-body{min-width:0}
.dh-rev .dash-hero-sub,.dh-tasks .dash-hero-sub{font-size:11.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Hero tiles are buttons (016 _dashHeroGo): lift on hover, ring on focus. */
.dh-go{cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.dh-go:hover{transform:translateY(-2px);box-shadow:var(--shadow-p)}
.dh-go:focus-visible{outline:3px solid var(--purple-border);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.dh-go,.dh-go:hover{transition:none;transform:none}}
.dash-chip{display:inline-block;font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:9px;white-space:nowrap;margin-right:4px}
.dash-chip.up{background:var(--success-dim);color:var(--success-text)}
.dash-chip.dn{background:var(--danger-dim);color:var(--danger-text)}
/* Card chrome */
.dash-card{padding:14px;box-shadow:var(--shadow-sm)}
#panel-dashboard{padding-top:16px}
.dash-card-title-row{margin-bottom:10px}
.dash-card-title{font-size:14px}
/* Icon tile, as the contact drawer cards (.dov-ico): the 14px glyph sits in a
   26px purple-dim tile, so the markup keeps its bare svg. */
.dash-card-title svg{width:26px;height:26px;padding:6px;box-sizing:border-box;border-radius:8px;background:var(--purple-dim);color:var(--purple);flex-shrink:0}
.dash-card-link{background:none;border:0;padding:4px 2px;font:700 12px Lato,sans-serif;color:var(--purple);cursor:pointer}
.dash-card-link:hover{text-decoration:underline}
/* My week: two lines per day */
.dash-week-card{margin-bottom:12px}
.dash-week-sum{font-size:12px;font-weight:700;color:var(--main-text-muted)}
#dash-week .week-sched-grid{gap:8px;grid-template-columns:repeat(7,minmax(0,1fr))}
#dash-week .week-sched-day{min-width:0}
#dash-week .week-sched-day{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;text-align:left;padding:6px 10px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius)}
#dash-week .week-sched-day-name{margin:0;color:var(--main-text-muted)}
#dash-week .week-sched-day-num{font-size:16px;margin:0;color:var(--main-text)}
#dash-week .week-sched-status{display:none}
#dash-week .week-sched-hours{flex-basis:100%;order:5;font-size:11.5px;font-weight:700;color:var(--main-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dash-week .week-sched-hours em{font-weight:400;color:var(--main-text-muted)}
#dash-week .week-sched-appts{margin-left:auto;font-size:11px;font-weight:800;color:var(--orange-text)}
#dash-week .week-sched-day:has(.sched-off){background:var(--main-bg)}
#dash-week .week-sched-day:has(.sched-off) .week-sched-day-num{color:var(--main-text-muted)}
#dash-week .week-sched-day:has(.sched-off) .week-sched-hours{color:var(--main-text-muted)}
#dash-week .week-sched-day.is-today{background:linear-gradient(135deg,var(--purple),var(--purple-active));border-color:transparent}
#dash-week .week-sched-day.is-today .week-sched-day-name,#dash-week .week-sched-day.is-today .week-sched-hours em{color:var(--purple-soft)}
#dash-week .week-sched-day.is-today .week-sched-day-num,#dash-week .week-sched-day.is-today .week-sched-hours{color:var(--sb-text-strong)}
#dash-week .week-sched-day.is-today .week-sched-appts{color:var(--sb-agency-text)}
/* Rows */
.dash-row{display:grid;gap:12px;margin-bottom:12px}
.dash-row-main{grid-template-columns:1.6fr 1fr}
.dash-row-main.no-rev{grid-template-columns:1fr}
.dash-row-lists{grid-template-columns:repeat(3,1fr)}
.dash-list-card .dash-scroll-list{max-height:150px}
/* Today's schedule timeline */
.dash-tl{margin-left:52px;border-left:2px solid var(--main-border)}
.dash-tl-row{position:relative;display:block;width:100%;text-align:left;background:none;border:0;padding:3px 0 3px 14px;font-family:inherit;cursor:pointer}
.dash-tl-time{position:absolute;left:-58px;top:9px;width:46px;text-align:right;font-size:11.5px;font-weight:700;color:var(--main-text-muted)}
.dash-tl-dot{position:absolute;left:-7px;top:11px;width:12px;height:12px;border-radius:50%;background:var(--main-card);border:2px solid var(--purple)}
.dash-tl-appt{display:flex;align-items:center;gap:8px;background:var(--main-bg);border-radius:9px;padding:5px 10px;font-size:13px;color:var(--main-text)}
.dash-tl-row:hover .dash-tl-appt{background:var(--purple-dim)}
.dash-tl-main{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-tl-sub{font-size:12px;color:var(--main-text-muted)}
.dash-tl-pv{font-size:11px;font-weight:800;color:var(--purple);background:var(--purple-dim);padding:2px 7px;border-radius:7px;flex-shrink:0}
.dash-tl-row.done .dash-tl-time,.dash-tl-row.done .dash-tl-dot,.dash-tl-row.done .dash-tl-main,.dash-tl-row.done .dash-tl-pv,.dash-tl-row.done .dash-pay:not(.unpaid):not(.partial){opacity:.55}
.dash-tl-row.done .dash-tl-dot{background:var(--purple)}
.dash-tl-now{position:relative;border-top:2px dashed var(--orange);margin:4px 0 4px -2px}
.dash-tl-now span{position:absolute;left:-52px;top:-9px;width:46px;text-align:right;font-size:10.5px;font-weight:900;color:var(--orange-text)}
.dash-tl-more{background:none;border:0;padding:6px 0 0 14px;margin-left:52px;font:700 12px Lato,sans-serif;color:var(--purple);cursor:pointer}
.dash-pay{font-size:10px;font-weight:800;padding:2px 7px;border-radius:8px;flex-shrink:0;letter-spacing:.03em}
.dash-pay.paid{background:var(--success-dim);color:var(--success-text)}
.dash-pay.partial{background:var(--warning-dim);color:var(--warning-text)}
.dash-pay.unpaid{background:var(--danger-dim);color:var(--danger-text)}
.dash-pay.comp{background:var(--main-bg);color:var(--main-text-muted)}
/* Revenue */
.dash-rev-range{height:28px;padding:0 8px;border:1px solid var(--main-border);border-radius:8px;background:var(--main-card);font:700 12px Lato,sans-serif;color:var(--main-text-muted)}
.dash-rev-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.dash-rev-total{font-family:'Exo 2',sans-serif;font-size:18px;font-weight:800;color:var(--main-text)}
.dash-rev-cmp{font-size:12px;color:var(--main-text-muted)}
.dash-rev-bars{display:flex;align-items:flex-end;gap:3px;height:84px;margin-top:10px;border-bottom:1px solid var(--main-border)}
.dash-rev-bars i{flex:1;min-width:0;border-radius:3px 3px 0 0;background:var(--purple-border)}
.dash-rev-bars i.today{background:var(--purple)}
/* Weekly and monthly bars: fewer, so a wider gap keeps them apart. */
.dash-rev-bars.wide{gap:6px}
.dash-rev-bars i:hover{background:var(--purple-light)}
.dash-rev-axis{display:flex;justify-content:space-between;font-size:10.5px;color:var(--main-text-muted);margin-top:4px}
/* Loading placeholders, app-wide (006 _skel/_skelRows; 016 _renderDashSkeletons):
   grey bars in the content's shape until the first load settles. A soft
   shimmer; none with reduced motion. */
.skel{height:12px;margin:8px 0;border-radius:6px;background:linear-gradient(90deg,var(--main-border) 25%,var(--main-card-hover) 50%,var(--main-border) 75%);background-size:200% 100%;animation:skel 1.3s ease-in-out infinite}
.skel.on-dark{background:var(--dash-hero-tile);animation:none}
.skel-num{display:inline-block;width:44px;height:18px;margin:0;vertical-align:middle}
.skel-block{display:block}
.skel-wrap{padding:14px 4px}
.skel-cell{padding:12px 10px!important}
.skel-cell .skel{margin:0}
/* A skeleton inside a centering flex box would shrink to nothing. */
/* 006 _dataStrip: a thin shimmer, or the failed state, above a surface that
   keeps its structure while data loads (the calendar grid). */
.state-strip{margin-bottom:8px}
.state-strip:empty{display:none}
.state-strip .skel-wrap{padding:0}
.state-strip .skel{height:4px;margin:0;border-radius:2px}
.state-strip .empty-state{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg)}
/* A report dimmed under the strip still reads "$0.00"; hide it instead (the
   space is kept) until the data lands. */
#panel-reporting .is-refreshing{visibility:hidden}
.dh-next.skel-block,.dh-total.skel-block{padding-top:26px}
@keyframes skel{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
/* 016: a failed load keeps the dashboard's placeholders, frozen. */
#panel-dashboard.is-load-failed .skel{animation:none}
#dash-load-state{margin-bottom:14px}
/* Fill the screen: the header, hero and My Week take their natural height and
   the two card rows share the rest, so a taller monitor shows taller cards
   (lists scroll inside them). Phones get a normal scrolling page below. */
#panel-dashboard{display:flex;flex-direction:column}
#panel-dashboard>*{flex:none}
#panel-dashboard>.dash-row-main{flex:1.15 1 0;min-height:230px}
#panel-dashboard>.dash-row-lists{flex:1 1 0;min-height:200px;margin-bottom:0}
.dash-row>.dash-card{display:flex;flex-direction:column;min-height:0}
#dash-appts{flex:1;min-height:0;overflow-y:auto}
#panel-dashboard .dash-list-card .dash-scroll-list{flex:1;min-height:0;max-height:none}
#dash-revenue-svg{flex:1;min-height:0;display:flex;flex-direction:column}
#dash-revenue-svg .dash-rev-bars{flex:1;height:auto;min-height:70px}
@media(max-width:1280px){
  .dash-hero{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;grid-template-areas:"next total" "rev tasks"}
  .dash-hero.no-rev{grid-template-areas:"next total" "tasks tasks"}
  .dash-row-lists{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  #panel-dashboard{display:block}
  #panel-dashboard .dash-list-card .dash-scroll-list{max-height:260px}
  .dash-hero,.dash-hero.no-rev{grid-template-columns:1fr;grid-template-areas:"next" "total" "rev" "tasks"}
  .dash-hero.no-rev{grid-template-areas:"next" "total" "tasks"}
  .dash-row-main,.dash-row-lists{grid-template-columns:1fr}
  #dash-week .week-sched-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* CONTACT TABLE */
.toolbar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.search-box{position:relative;flex:1;min-width:160px;max-width:260px}
.search-box svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;color:var(--text-muted);pointer-events:none}
.search-box input{padding-left:32px;background:var(--main-input);border:1px solid var(--main-input-border);
  border-radius:var(--radius);color:var(--text);height:36px;width:100%;
  font-family:Lato,sans-serif;font-size:13px;outline:none;transition:border-color .2s}
.search-box input:focus{border-color:var(--purple)}
.filter-sel{background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);
  color:var(--main-text);padding:0 10px;height:36px;font-family:Lato,sans-serif;font-size:13px;outline:none;cursor:pointer}
.filter-sel:focus{border-color:var(--purple)}
.filter-sel option{background:var(--main-card);color:var(--main-text)}
.tbl-wrap{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 2px 12px rgba(107,33,234,.07)}
.ct-table{width:100%;border-collapse:collapse;table-layout:fixed}
.ct-table thead{background:var(--main-bg)}
.ct-table th{padding:10px 14px;text-align:left;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--main-text-muted);cursor:pointer;
  white-space:nowrap;user-select:none;border-bottom:1px solid var(--main-border)}
.ct-table th:hover{color:var(--main-text)}
.ct-table th.sort-asc::after{content:' \2191'}
.ct-table th.sort-desc::after{content:' \2193'}
.ct-table td{padding:11px 14px;border-bottom:1px solid var(--main-border);vertical-align:middle;color:var(--main-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-table td.ct-tags-cell{white-space:normal;overflow:visible}
.ct-table tbody tr:last-child td{border-bottom:none}
.ct-table tbody tr:hover{background:var(--main-card-hover);cursor:pointer}
/* SOAP editor autosave (js/021): footer status and the restore offer */
.soap-draft-status{margin-right:auto;font-size:12px;color:var(--main-text-muted);align-self:center}
.soap-draft-offer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:9px 12px;margin-bottom:14px;border:1px solid var(--purple-border);background:var(--purple-dim);border-radius:var(--radius);font-size:13px;color:var(--main-text)}
.soap-draft-offer-acts{display:flex;gap:8px}
/* Superbills > New Statement: presets, preview, notices (js/163) */
.sb-presets{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.sb-preset{border:1px solid var(--main-border);background:var(--main-card);color:var(--main-text);border-radius:var(--radius);padding:5px 10px;font-size:12px;font-weight:600;cursor:pointer}
.sb-preset:hover{border-color:var(--purple-border)}
.sb-preset.is-on{background:var(--purple-dim);border-color:var(--purple-border);color:var(--purple)}
.sb-notice{margin-top:12px;padding:10px 12px;border:1px solid var(--main-border);border-radius:var(--radius-sm);background:var(--main-bg)}
.sb-notice-title{font-size:13px;font-weight:700;color:var(--main-text);margin-bottom:6px}
.sb-preview{margin-top:12px;padding:10px 12px;border:1px solid var(--main-border);border-radius:var(--radius-sm)}
.sb-preview-head{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:700;color:var(--main-text);margin-bottom:6px}
.sb-preview-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.sb-preview-tbl th{text-align:left;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--main-text-muted);padding:4px 6px;border-bottom:1px solid var(--main-border)}
.sb-preview-tbl td{padding:6px;border-bottom:1px solid var(--main-border);color:var(--main-text)}
.sb-preview-tbl tr:last-child td{border-bottom:none}
.sb-preview-tbl .sb-pv-svc{color:var(--main-text-muted)}
.sb-preview-tbl .sb-pv-fee{text-align:right}
.sb-preview-tbl .sb-pv-gap{color:var(--warning-text);font-weight:700}
/* Superbills > New Statement patient picker (js/163, on 005's shared search). */
.sb-st-opt{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:left;border:1px solid var(--main-border);background:var(--main-bg);color:var(--main-text);border-radius:var(--radius-sm);padding:7px 10px;cursor:pointer;margin-top:5px}
.sb-st-opt:hover,.sb-st-opt:focus-visible{border-color:var(--purple-border);background:var(--purple-dim)}
.sb-st-opt-name{font-size:13px;font-weight:600}
.sb-st-opt-sub{font-size:12px;color:var(--main-text-muted)}
.sb-st-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 6px 4px 10px;border:1px solid var(--purple-border);background:var(--purple-dim);color:var(--purple);border-radius:var(--radius);font-size:13px;font-weight:600}
.sb-st-chip button{border:none;background:transparent;color:inherit;cursor:pointer;font-size:12px;padding:0 4px}
/* Superbills > Superbill History table (js/163). Rows carry actions, not a click. */
.sb-hist-tbl tbody tr:hover{cursor:default}
.sb-hist-tbl .sb-hist-name{font-weight:600}
.sb-hist-tbl .sb-hist-sub{font-size:11px;color:var(--main-text-muted);margin-top:2px}
.sb-hist-tbl .sb-hist-acts{text-align:right;white-space:nowrap}
.sb-hist-tbl .sb-hist-acts .btn+.btn{margin-left:6px}
.dsoap-badge.is-statement{margin-left:4px;background:var(--purple-dim);border-color:var(--purple-border);color:var(--purple)}
.dsoap-badge.is-visit{margin-left:4px;background:var(--main-bg);border-color:var(--main-border);color:var(--main-text-muted)}
/* ICD-10 search picker (superbill coding window + favorites, js/163) */
.sb-icd{position:relative;margin-bottom:10px}
.sb-icd-results{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow-y:auto;margin-top:6px}
.sb-icd-results:empty{display:none}
.sb-icd-opt{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;border:1px solid transparent;background:transparent;color:var(--main-text);border-radius:var(--radius-sm);padding:7px 10px;font-size:13px;cursor:pointer}
.sb-icd-opt:hover,.sb-icd-opt.is-on{background:var(--purple-dim);border-color:var(--main-input-border)}
.sb-icd-code{font-weight:700;flex:0 0 74px}
.sb-icd-desc{flex:1;min-width:0;color:var(--main-text-muted)}
.sb-icd-tag{flex:none;font-size:10px;font-weight:700;padding:2px 7px;border-radius:var(--radius-full);background:var(--purple-dim);color:var(--purple)}
.sb-icd-tag.is-warn{background:var(--warning-dim);color:var(--warning-text)}
.sb-icd-note{font-size:12px;color:var(--main-text-muted);padding:6px 2px}
.ct-table tbody tr.clsoap-row:focus-visible{outline:3px solid var(--purple-border);outline-offset:-3px;background:var(--main-card-hover)}
.ct-name-cell{display:flex;align-items:center;gap:10px;color:var(--main-text);min-width:0}
.ct-name-cell>div:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:'Exo 2',sans-serif;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.ct-tags{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.tag-pill{padding:2px 7px;border-radius:20px;font-size:10px;font-weight:600}
.ct-tagpill{display:inline-flex;align-items:center;gap:3px}
.ct-tag-x{background:none;border:none;cursor:pointer;font-size:12px;line-height:1;padding:0;margin-left:1px;color:inherit;opacity:.55}
.ct-tag-x:hover{opacity:1}
.ct-tag-add{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px dashed var(--main-border);background:none;color:var(--main-text-muted);cursor:pointer;font-size:13px;line-height:1;padding:0}
.ct-tag-add:hover{color:var(--purple);border-color:var(--purple)}
.ct-tagmenu{position:fixed;z-index:var(--z-modal-pop);background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);box-shadow:0 8px 24px rgba(107,33,234,.18);padding:6px;width:200px;max-height:280px;overflow:auto}
.ct-tagmenu input{width:100%;box-sizing:border-box;padding:6px 8px;margin-bottom:6px;border:1px solid var(--main-border);border-radius:var(--radius-sm);font-size:12px;background:var(--main-bg);color:var(--main-text)}
.ct-tagmenu-opt{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:var(--radius-sm);cursor:pointer;font-size:12px;color:var(--main-text)}
.ct-tagmenu-opt:hover{background:var(--main-bg)}
.ct-tagmenu-empty{padding:8px;font-size:12px;color:var(--main-text-muted)}
.ct-tagmenu-opt.is-active{background:var(--main-bg)}
.ct-tagmenu-opt.is-picked{color:var(--purple-light);background:var(--purple-dim)}
.ct-tagmenu-create{color:var(--purple-light);font-weight:600}
.bulk-tag-list{max-height:220px;overflow:auto;margin-top:6px;padding:4px;border:1px solid var(--main-border);border-radius:var(--radius-sm)}
/* Zero the checkbox's default top margin so it centers in the row
   (browsers add a few px of top margin by default). */
.ct-table .cb-col input{vertical-align:middle;margin:0}
/* The actions cell holds just the edit icon; don't let the generic cell
   ellipsis clip it into a stray "..". */
.ct-table td.ct-act{overflow:visible;text-overflow:clip;white-space:nowrap;text-align:right;padding-right:22px}
/* Contacts list toolbar: search, filter pills, More menu, Add Contact on one
   row; wraps under about 900px. A pill is a native select behind a CSS
   chevron and turns purple while its filter narrows the list. */
.ctl-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.ctl-search{flex:1 1 180px;max-width:440px}
.ctl-search input{height:38px}
.ctl-pill{position:relative;display:inline-flex}
.ctl-pill::after{content:'';position:absolute;right:13px;top:50%;width:6px;height:6px;margin-top:-5px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);color:var(--main-text-muted);pointer-events:none}
.ctl-sel{appearance:none;-webkit-appearance:none;height:34px;padding:0 30px 0 14px;border:1px solid var(--main-input-border);border-radius:var(--radius-full);background:var(--main-input);color:var(--main-text-muted);font-family:Lato,sans-serif;font-size:12.5px;font-weight:700;cursor:pointer;outline:none}
.ctl-sel:focus-visible{border-color:var(--purple);box-shadow:var(--focus-ring)}
.ctl-sel option{background:var(--main-card);color:var(--main-text);font-weight:400}
.ctl-pill.is-on .ctl-sel{background:var(--purple-dim);border-color:var(--purple-border);color:var(--purple)}
.ctl-pill.is-on::after{color:var(--purple)}
.ctl-grow{flex:1}
.ctl-more-wrap{position:relative}
.ctl-more{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--main-border);border-radius:var(--radius);background:var(--main-card);color:var(--main-text-muted);cursor:pointer}
.ctl-more svg{width:18px;height:18px}
.ctl-more:hover,.ctl-more[aria-expanded="true"]{color:var(--purple);border-color:var(--purple-border)}
.ctl-more:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.ctl-menu{position:absolute;right:0;top:44px;z-index:50;min-width:200px;padding:6px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);box-shadow:var(--shadow-md)}
.ctl-mi{display:block;width:100%;padding:8px 10px;border:none;border-radius:var(--radius-sm);background:none;color:var(--main-text);font-family:Lato,sans-serif;font-size:13px;text-align:left;cursor:pointer;white-space:nowrap}
.ctl-mi:hover,.ctl-mi:focus-visible{background:var(--main-bg);outline:none}
.ctl-arch{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:9px 14px;border-radius:var(--radius);background:var(--warning-dim);color:var(--warning-text);font-size:13px;font-weight:700}
.ctl-arch-btn{margin-left:auto;padding:4px 10px;border:1px solid var(--warning-light);border-radius:var(--radius-md);background:var(--main-card);color:var(--warning-text);font-family:Lato,sans-serif;font-size:12px;font-weight:800;cursor:pointer}
.ctl-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--main-border);font-size:12.5px;color:var(--main-text-muted)}
.ctl-foot #contacts-pg{margin-left:auto}
.ctl-foot .pagination{margin:0}
.ctl-ps{height:30px;padding:0 6px;border:1px solid var(--main-input-border);border-radius:var(--radius-md);background:var(--main-input);color:var(--main-text);font-family:Lato,sans-serif;font-size:12.5px;cursor:pointer}
/* Quick views, active-filter tokens and the result count, one row under the toolbar. */
.ctl-views{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.ctl-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.ctl-view{padding:5px 12px;border:1px solid var(--main-border);border-radius:var(--radius-full);background:var(--main-card);color:var(--main-text-muted);font-family:Lato,sans-serif;font-size:12.5px;font-weight:700;cursor:pointer}
.ctl-view:hover{color:var(--main-text);border-color:var(--purple-border)}
.ctl-view.is-on{background:var(--purple-dim);border-color:var(--purple-border);color:var(--purple)}
.ctl-view:focus-visible,.ctl-clear:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.ctl-sep{width:1px;height:20px;margin:0 4px;background:var(--divider)}
.ctl-token{display:inline-flex;align-items:center;gap:6px;max-width:280px;padding:3px 5px 3px 10px;border:1px dashed var(--purple-border);border-radius:var(--radius-full);background:var(--main-card);color:var(--main-text);font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctl-token b{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted)}
.ctl-token button{flex-shrink:0;width:18px;height:18px;padding:0;border:none;border-radius:50%;background:var(--purple-dim);color:var(--purple);font-size:13px;line-height:1;cursor:pointer}
.ctl-clear{padding:4px 6px;border:none;background:none;color:var(--purple);font-family:Lato,sans-serif;font-size:12.5px;font-weight:700;cursor:pointer}
.ctl-count{margin-left:auto;font-size:12.5px;color:var(--main-text-muted);white-space:nowrap}
/* Contacts list rows: fixed height, one line per cell, columns sized by class.
   The container query hides Added, then moves Type under the name. */
#panel-contacts .tbl-wrap{container-type:inline-size;container-name:ctlist;overflow:clip}
/* Bulk bar floats at the bottom of the screen while rows are selected, inside
   the card, so ticking a box never shifts the rows (a bar above the table
   pushed them down under the cursor). clip, not hidden, on the card, or the
   card becomes the scroller and the bar stops sticking. */
.ctl-bulk{position:sticky;bottom:14px;z-index:5;margin:10px 12px;padding:10px 14px;border:1px solid var(--purple-border);border-radius:var(--radius-lg);background:var(--main-card);box-shadow:var(--shadow-md)}
.ctl-bulk .bulk-count{color:var(--purple);font-weight:800}
.ctl-bulk .bulk-select-all-btn{color:var(--purple)}
.ct-table tbody tr.is-sel td{background:var(--purple-dim)}
/* List states: skeleton shaped like a row, and empties with an icon tile. */
.ct-skel .skel{margin:0}
.ct-skel .skel-cell,.ct-table tr.ct-skel td{cursor:default}
.ct-skel-box{width:15px;height:15px;border-radius:var(--radius-sm)}
.ct-skel-av{flex-shrink:0;width:30px!important;height:30px;border-radius:50%}
.ct-skel-line{height:10px}
.ct-skel-line+.ct-skel-line{margin-top:6px}
.ct-skel-pill{width:52px;height:16px;border-radius:var(--radius-full)}
.ct-table tbody tr.ct-skel:hover,.ct-table tbody tr.ct-empty-row:hover{background:none;cursor:default}
.ct-empty{padding:48px 20px;text-align:center}
.ct-empty-ico{width:44px;height:44px;margin:0 auto 12px;border-radius:12px;background:var(--purple-dim);color:var(--purple);display:flex;align-items:center;justify-content:center}
.ct-empty-ico svg{width:22px;height:22px}
.ct-empty h3{margin:0 0 4px;font-family:"Exo 2",sans-serif;font-size:16px;font-weight:700;color:var(--main-text)}
.ct-empty p{max-width:46ch;margin:0 auto;font-size:13px;color:var(--main-text-muted);white-space:normal}
.ct-empty-btns{display:flex;gap:8px;justify-content:center;margin-top:14px}
.ct-table td{height:58px;padding-top:0;padding-bottom:0}
.ct-table .ct-c-name{width:30%}
.ct-table .ct-c-biz{width:14%}
.ct-table .ct-c-contact{width:22%}
.ct-table .ct-c-tags{width:20%}
.ct-table .ct-c-type{width:116px}
.ct-table .ct-c-act{width:120px}
.ct-table .ct-c-add{width:108px}
.ct-table .ct-c-menu{width:56px}
.ct-table td.ct-c-tags{white-space:nowrap;overflow:hidden}
.ct-c-tags .ct-tags{flex-wrap:nowrap;overflow:hidden;gap:4px}
.ct-nm{display:flex;align-items:center;gap:6px;min-width:0}
.ct-nm-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:700;color:var(--main-text)}
.ct-flag{flex-shrink:0;display:inline-flex;align-items:center;gap:3px;padding:1px 7px 1px 5px;border:1px solid transparent;border-radius:var(--radius-full);font-size:10.5px;font-weight:800}
.ct-flag svg{width:11px;height:11px}
.ct-flag.is-critical{background:var(--danger-dim);color:var(--danger-text);border-color:var(--danger-light)}
.ct-flag.is-warning{background:var(--warning-dim);color:var(--warning-text);border-color:var(--warning-light)}
.ct-flag.is-info{background:var(--info-dim);color:var(--info-text);border-color:var(--info-dim)}
.ct-off{flex-shrink:0;padding:1px 7px;border-radius:var(--radius-full);background:var(--main-bg);color:var(--main-text-muted);font-size:10.5px;font-weight:800;letter-spacing:.04em;}
.ct-cc{min-width:0;font-size:12.5px;line-height:1.35;color:var(--main-text)}
.ct-cc>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-cc-2{color:var(--main-text-muted)}
.ct-type{display:inline-block;padding:2px 8px;border-radius:var(--radius-sm);background:var(--main-bg);color:var(--main-text-muted);font-size:10.5px;font-weight:800;letter-spacing:.04em;}
.ct-type.t-client{background:var(--success-dim);color:var(--success-text)}
.ct-type.t-lead{background:var(--info-dim);color:var(--info-text)}
.ct-type.t-lapsed{background:var(--warning-dim);color:var(--warning-text)}
.ct-type.t-partner{background:var(--purple-dim);color:var(--purple)}
.ct-type-sub{display:none;flex-shrink:0}
.ct-when{font-size:12.5px;color:var(--main-text-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.ct-when.is-recent{color:var(--main-text);font-weight:700}
.ct-tagpill{max-width:130px;min-width:46px;flex:0 1 auto}
.ct-tagpill-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-tag-more{flex-shrink:0;padding:2px 7px;border:none;border-radius:var(--radius-full);background:var(--main-bg);color:var(--main-text-muted);font-family:Lato,sans-serif;font-size:11px;font-weight:800;cursor:pointer}
.ct-tag-more:hover{color:var(--purple)}
.ct-c-tags .ct-tag-add{flex-shrink:0;opacity:0}
.ct-table tr:hover .ct-tag-add,.ct-tag-add:focus-visible{opacity:1}
.ct-tagspop{position:fixed;z-index:var(--z-modal-pop);display:flex;flex-wrap:wrap;gap:4px;max-width:260px;padding:8px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);box-shadow:var(--shadow-md)}
.ct-table td.ct-act .icon-btn-xs{opacity:.4}
.ct-table tr:hover td.ct-act .icon-btn-xs,.ct-table td.ct-act .icon-btn-xs:focus-visible{opacity:1}
.ct-table td.ct-act .icon-btn-xs.is-danger:hover{color:var(--danger-text)}
.ct-table tr.is-archived td>*{opacity:.65}
@container ctlist (max-width: 1000px){ .ct-table .ct-c-add{display:none} .ct-nm{flex-wrap:wrap;row-gap:3px} .ct-nm-t{flex-basis:100%} }
@container ctlist (max-width: 820px){ .ct-table .ct-c-type{display:none} .ct-type-sub{display:inline-flex} }

/* CALENDAR */
.cal-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.cal-toolbar-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-width:0}
.cal-nav{display:flex;align-items:center;gap:6px}
.cal-period{font-family:'Exo 2',sans-serif;font-size:22px;font-weight:800;white-space:nowrap;color:var(--main-text);letter-spacing:-0.2px;min-width:0}
@media (max-width:600px){.cal-period{font-size:18px}}
.cal-period-wrap{position:relative;min-width:0}
.timed-ev:focus-visible,.cal-ev:focus-visible{outline:2px solid var(--purple);outline-offset:1px;z-index:4}
.day-col-head-btn{background:none;border:0;padding:1px 8px;border-radius:var(--radius);font:inherit;color:inherit;cursor:pointer}
.day-col-head-btn:hover{background:var(--purple-dim);color:var(--purple)}
.cal-chips{display:inline-flex;gap:3px;align-items:center;flex-shrink:0}
.cal-chip{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 4px;border-radius:6px;background:var(--cal-glass);color:var(--on-accent);font-size:11px;font-weight:900;line-height:1;flex-shrink:0;cursor:default;box-sizing:border-box}
.cal-chip svg{display:block;width:12px;height:12px}
.cal-chip sup{font-size:8.5px;margin-left:1px;line-height:1}
.cal-chip-dot{position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 1.5px var(--on-accent)}
.cal-chip-dot.is-danger{background:var(--danger)}
.cal-chip-dot.is-warning{background:var(--warning)}
.cal-chip-dot.is-info{background:var(--info)}
.cal-chip.compact{min-width:15px;height:15px;padding:0 3px;border-radius:5px;font-size:9.5px;background:var(--cal-glass-dark);color:inherit}
.cal-chip.compact svg{width:10px;height:10px}
.cal-chip.compact .cal-chip-dot{width:6px;height:6px;top:-2px;right:-2px;box-shadow:0 0 0 1px var(--main-card)}
.cal-tip{position:fixed;z-index:var(--z-float);max-width:260px;background:var(--main-text);color:var(--on-accent);border-radius:8px;padding:6px 9px;font-size:12px;line-height:1.45;box-shadow:var(--shadow-lg);pointer-events:none}
.cal-tip b{display:block;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;opacity:.75;margin-bottom:2px}
.cal-tip.is-card b{font-size:12.5px;letter-spacing:0;text-transform:none;opacity:1;margin-bottom:1px}
/* Time block label: bold with a soft light halo so it reads over the hatch stripes. */
.tb-label{font-weight:800;color:var(--main-text);text-shadow:0 0 3px var(--main-card),0 0 3px var(--main-card),0 0 1px var(--main-card)}
.cal-chips.on-light .cal-chip{background:var(--cal-glass-dark);color:var(--main-text)}
.cal-chips.on-light .cal-chip-dot{box-shadow:0 0 0 1.5px var(--main-card)}
.cal-list-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.cal-list-chips{display:flex;flex-wrap:wrap;gap:6px}
.cal-list-custom{display:inline-flex;align-items:center;gap:6px}
.cal-list-more{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 0 4px;font-size:12.5px;color:var(--main-text-muted)}
.cal-list-chip-n{font-variant-numeric:tabular-nums;opacity:.7;margin-left:2px}
.cal-list{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:12px 14px}
.cal-list-summary{margin-bottom:6px}
.cal-list-day{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;background:var(--main-card);padding:10px 0 6px}
.cal-list-day-l{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted)}
.cal-list-day.is-today .cal-list-day-l{color:var(--orange)}
.cal-list-day-r{flex:1;height:2px;background:var(--divider)}
.cal-list-day-n{font-size:12px;color:var(--main-text-muted);font-variant-numeric:tabular-nums}
.cal-list-row{display:grid;grid-template-columns:118px 4px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 10px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer}
.cal-list-row:hover{background:var(--main-card-hover);border-color:var(--main-border)}
.cal-list-row:focus-visible{outline:2px solid var(--purple);outline-offset:1px}
.cal-list-row.is-inactive{opacity:.6}
.cal-list-time{font-family:'Exo 2',sans-serif;font-size:13.5px;font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums;color:var(--main-text)}
.cal-list-time span{display:block;font-family:Lato,sans-serif;font-size:11.5px;font-weight:400;color:var(--main-text-muted);white-space:nowrap}
.cal-list-rail{align-self:stretch;border-radius:3px;min-height:34px}
.cal-list-who{min-width:0}
.cal-list-who b{display:block;font-size:14px;color:var(--main-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-list-who span{display:block;font-size:12.5px;color:var(--main-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-list-right{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.cal-list-prov{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--main-text-muted)}
@media (max-width:760px){.cal-list-row{grid-template-columns:78px 4px minmax(0,1fr)}.cal-list-right{grid-column:1 / -1;justify-content:flex-start}}
.cal-slot-ghost{position:absolute;left:3px;right:3px;z-index:2;pointer-events:none;border:1.5px dashed var(--purple);border-radius:6px;background:var(--purple-dim);color:var(--purple);font-size:11px;font-weight:800;padding:0 6px;display:flex;align-items:center;box-sizing:border-box;overflow:hidden;white-space:nowrap}
button.cal-period{background:none;border:0;padding:2px 8px;margin-left:-8px;border-radius:var(--radius);cursor:pointer;display:inline-flex;align-items:center;gap:10px}
button.cal-period:hover,button.cal-period[aria-expanded="true"]{background:var(--purple-dim)}
button.cal-period::after{content:'';width:7px;height:7px;border-right:2px solid var(--purple);border-bottom:2px solid var(--purple);transform:translateY(-3px) rotate(45deg);flex-shrink:0}
.cal-mm{position:absolute;top:calc(100% + 6px);left:-8px;z-index:210;width:280px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:12px}
.cal-mm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cal-mm-title{font-family:'Exo 2',sans-serif;font-size:14px;font-weight:700;color:var(--main-text)}
.cal-mm-nav{width:28px;height:28px;border-radius:var(--radius);border:1px solid var(--main-border);background:var(--main-card);color:var(--main-text-muted);cursor:pointer;font-size:15px;line-height:1}
.cal-mm-nav:hover{background:var(--purple-dim);color:var(--purple)}
.cal-mm-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.cal-mm-dow{font-size:10.5px;font-weight:800;color:var(--main-text-muted);padding:4px 0}
.cal-mm-day{position:relative;border:0;background:none;border-radius:8px;padding:6px 0;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--main-text);cursor:pointer}
.cal-mm-day:hover{background:var(--purple-dim)}
.cal-mm-day.out{color:var(--main-text-muted);opacity:.55}
.cal-mm-day.today{color:var(--orange);font-weight:800}
.cal-mm-day.sel{background:var(--purple);color:var(--on-accent);font-weight:800}
.cal-mm-day.has::after{content:'';position:absolute;left:50%;bottom:2px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--orange)}
.cal-mm-day.sel.has::after{background:var(--on-accent)}
.view-toggle{display:flex;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);overflow:hidden}
.view-btn{padding:6px 14px;font-size:12px;font-weight:600;color:var(--main-text-muted);
  cursor:pointer;background:transparent;border:none;font-family:Lato,sans-serif;transition:all .18s}
.view-btn:hover{color:var(--text)}.view-btn.active{background:var(--purple);color:var(--on-accent)}
.svc-detail-tab{padding:10px 18px;font-size:13px;font-weight:600;color:var(--main-text-muted);
  background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all .15s;margin-bottom:-1px;font-family:Lato,sans-serif}
.svc-detail-tab:hover{color:var(--main-text)}
.svc-detail-tab.active{color:var(--purple);border-bottom-color:var(--purple)}
/* Reusable: white card content inside dark modal context. */
/* Use on any element where bg=main-card so descendants get correct text color. */
.light-card{background:var(--main-card);color:var(--main-text);border:1px solid var(--main-border);border-radius:6px}
.light-card.clickable{cursor:pointer;transition:background .1s}
.light-card.clickable:hover{background:var(--main-bg)}
.cal-legend{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.legend-item{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--main-text);background:var(--main-card);border:1px solid var(--main-border);border-radius:999px;padding:3px 10px 3px 6px;cursor:pointer;font-family:inherit}
.legend-item:hover{border-color:var(--purple-border)}
.cal-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:12px}
.cal-strip-tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);padding:8px 12px;cursor:pointer;font-family:inherit;box-shadow:var(--shadow-sm)}
.cal-strip-tile:hover{background:var(--main-card-hover);border-color:var(--purple-border)}
.cal-strip-lbl{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted)}
.cal-strip-n{font-family:'Exo 2',sans-serif;font-size:20px;font-weight:700;line-height:1.1;color:var(--main-text);font-variant-numeric:tabular-nums}
.cal-strip-tile.warn .cal-strip-n{color:var(--warning-text)}
.cal-strip-tile.ok .cal-strip-n{color:var(--success-text)}
.cal-strip-tile.bad .cal-strip-n{color:var(--danger-text)}
@media (max-width:860px){.cal-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.cal-strip-wl{grid-column:span 2}}
/* Waitlist (168): a strip tile on day and list, a header button on week and month. */
.cal-strip-tile.cal-strip-wl{background:var(--purple-dim);border-color:var(--purple-border)}
.cal-strip-wl .cal-strip-lbl,.cal-strip-wl .cal-strip-n{color:var(--purple)}
.cal-strip-sub{font-size:11px;font-weight:700;color:var(--purple)}
.cal-strip-sub:empty{display:none}
.cal-wl-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;font-family:inherit;font-size:12px;font-weight:700;color:var(--purple);background:var(--main-card);border:1px solid var(--purple-border);border-radius:var(--radius);cursor:pointer}
.cal-wl-btn:hover{background:var(--purple-dim)}
.cal-wl-badge{min-width:18px;padding:1px 6px;border-radius:var(--radius-full);background:var(--purple);color:var(--on-accent);font-size:11px;line-height:1.4;text-align:center}
.wl-dialog-add{margin-left:auto}
.wl-open-now{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px;margin:0 0 12px;background:var(--purple-dim);border:1px solid var(--purple-border);border-radius:var(--radius)}
.wl-open-now-txt{font-size:13px;line-height:1.5;color:var(--main-text)}
.wl-open-now-txt strong{color:var(--purple)}
.wl-open-now-txt small{display:block;font-size:12px;color:var(--main-text-muted)}
.wl-open-now-btn{white-space:nowrap;color:var(--purple);border-color:var(--purple-border)}
.legend-item[aria-pressed="false"]{color:var(--main-text-muted);opacity:.55;text-decoration:line-through}
.legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}
/* Calendar heights: 100vh less the header, toolbar and legend. 216 since the
   sub-tab bar left the Calendar (2026-10-06; it took 44px). Phones only; on
   desktop the flex fill below .cal-timed overrides both. */
.cal-month{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 2px 12px rgba(107,33,234,.07);min-height:calc(100vh - 216px);display:flex;flex-direction:column}
.cal-dow-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--main-bg);border-bottom:1px solid var(--main-border)}
.cal-dow-row div{text-align:center;padding:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--main-text-muted)}
/* minmax(0,1fr), not 1fr: a bare 1fr floors at min-content, and a nowrap chip
   with a long service name stretched its column and pushed Saturday off-screen. */
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));flex:1;grid-auto-rows:1fr}
.cal-cell{min-width:0;min-height:80px;border-right:1px solid var(--main-border);border-bottom:1px solid var(--main-border);padding:6px;cursor:pointer;transition:background .12s}
.cal-cell:nth-child(7n){border-right:none}
.cal-cell:hover{background:#f5f3ff}
.cal-cell.other-month .cal-day-num{opacity:.25}
.cal-cell.today .cal-day-num{background:var(--purple);color:var(--on-accent);border-radius:50%}
.cal-cell.cal-blackout{background:repeating-linear-gradient(45deg,rgba(248,113,113,.04),rgba(248,113,113,.04) 10px,rgba(248,113,113,.09) 10px,rgba(248,113,113,.09) 20px)}
.cal-day-num{font-size:12px;font-weight:600;margin-bottom:3px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;color:var(--main-text)}
.cal-ev{font-size:10px;padding:2px 5px;border-radius:3px;margin-bottom:2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}
.cal-ev:hover{filter:brightness(1.2)}
.cal-more{display:block;text-align:left;background:none;border:0;font:inherit;font-size:10.5px;font-weight:800;color:var(--purple);padding:1px 4px;cursor:pointer}
.cal-more:hover{text-decoration:underline}
.cal-timed{display:flex;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);overflow:auto;box-shadow:0 2px 12px rgba(107,33,234,.07);height:calc(100vh - 216px)}
/* cal-timed viewport fill: day + week match month's responsive height. The box
   fills the viewport and reflows on resize. Flex children (time gutter + day
   columns) stretch to the box height so their backgrounds extend cleanly below
   the last hour. The .tgrid-row 68px height is NOT changed, so all event
   positioning, buffer bands, and drag math stay pixel-exact. */
.cal-timed > div{min-height:max-content}
/* Desktop: the toolbar, legend, strip and list bar stay put; only #cal-body
   scrolls. The panel stops scrolling and the grid fills whatever height is
   left, so no hand-tuned 100vh offset can drift into a second scrollbar.
   Day view's inline min-width is dropped so its lanes (min 180px each) scroll
   sideways inside .cal-timed, under the sticky time column. Phones keep the
   whole-panel scroll above. */
@media (min-width:701px){
  #panel-calendar{overflow:hidden;display:flex;flex-direction:column}
  #cal-calendar-view{flex:1;min-height:0;display:flex;flex-direction:column}
  #cal-calendar-view > .cal-toolbar,#cal-calendar-view > .cal-legend,#cal-calendar-view > .cal-strip,#cal-calendar-view > .cal-list-bar{flex-shrink:0}
  #cal-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto}
  #cal-body > .cal-timed{flex:1;min-height:0;height:auto;min-width:0!important}
  #cal-body > .cal-month{flex:1 0 auto;min-height:0}
}
.time-col{width:52px;flex-shrink:0;background:var(--main-bg);border-right:1px solid var(--main-border);display:flex;flex-direction:column;position:sticky;left:0;z-index:3}
.time-col-head{min-height:56px;border-bottom:1px solid var(--main-border);flex-shrink:0;position:sticky;top:0;z-index:6;background:var(--main-bg)}
.time-col-allday{height:28px;border-bottom:1px solid var(--main-border);font-size:9px;color:var(--text-dim);display:flex;align-items:center;justify-content:flex-end;padding:0 6px;background:var(--main-bg);flex-shrink:0;position:sticky;top:56px;z-index:6}
.day-col-allday{min-height:28px;border-bottom:1px solid var(--main-border);padding:3px 5px;display:flex;flex-wrap:wrap;gap:3px;align-items:center;background:var(--main-card);flex-shrink:0;position:sticky;top:56px;z-index:2}
.cal-allday-chip{font-size:10px;font-weight:700;padding:3px 8px;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;letter-spacing:.02em}
.time-slot{height:var(--cal-hour-px);padding:3px 5px;font-size:10px;color:var(--main-text-muted);
  border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:flex-end;flex-shrink:0;position:relative}
/* Quarter-hour increment ticks on the right edge of the time gutter (day/week).
   The half-hour tick is longer and stronger than the :15/:45 ticks. */
.ts-tick{position:absolute;right:0;border-top:1px solid var(--main-text-muted);pointer-events:none}
.ts-q1{top:25%;width:7px;opacity:.45}
.ts-h{top:50%;width:14px;opacity:.75}
.ts-q3{top:75%;width:7px;opacity:.45}
.day-col{flex:1;min-width:88px;border-right:1px solid var(--main-border);display:flex;flex-direction:column}
.day-col:last-child{border-right:none}
.day-col-head{min-height:56px;background:var(--main-card);padding:6px 4px 5px;text-align:center;position:sticky;top:0;z-index:2;
  border-bottom:1px solid var(--main-border);font-size:11px;font-weight:600;color:var(--main-text);flex-shrink:0;display:flex;flex-direction:column;justify-content:center}
.day-col-head.today{color:var(--orange)}
.tgrid-row{height:var(--cal-hour-px);border-bottom:1px solid var(--main-border);position:relative;cursor:pointer}
.tgrid-row::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 16px,rgba(255,255,255,.05) 16px,rgba(255,255,255,.05) 17px)}
.tgrid-row:hover{background:rgba(255,255,255,.012)}
.tgrid-row.off-hours{background:rgba(0,0,0,.18)}
.cal-offhours-band{position:absolute;left:0;right:0;background:rgba(0,0,0,.18);z-index:0;pointer-events:none}
.timed-ev{position:absolute;border-radius:4px;padding:2px 0 0;font-size:11px;font-weight:600;
  overflow:hidden;cursor:pointer;z-index:1;border:1px solid rgba(255,255,255,.15);color:#fff;transition:filter .15s;line-height:1.3}
.timed-ev:hover{filter:brightness(1.15)}
.timed-ev-cancelled{opacity:.45}
.timed-ev-rescheduled{opacity:.45;text-decoration:line-through;background:var(--text-placeholder) !important;cursor:pointer}
.timed-ev-completed{background:var(--cal-completed) !important;opacity:.75}
.cal-now-line{position:absolute;left:0;right:0;height:2px;background:var(--danger);z-index:10;pointer-events:none}
.cal-now-dot{position:absolute;left:-4px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--danger)}

/* TASKS */
.task-chip-row{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.task-chip-sep{display:inline-block;width:1px;height:20px;background:var(--border,#e5e7eb);margin:0 4px;align-self:center;flex-shrink:0}
.chip{padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;
  border:1px solid var(--border);color:var(--text-muted);background:transparent;
  font-family:Lato,sans-serif;transition:all .18s}
.chip:hover{color:var(--text);border-color:var(--purple-border)}
.chip.active{background:var(--purple-dim);color:var(--purple-light);border-color:var(--purple-border)}
.chip-orange.active{background:var(--orange-dim);color:var(--orange);border-color:var(--orange-border)}
.task-list{display:flex;flex-direction:column;gap:8px}
/* Bulk select (028 toggleTSelect, tBulk*). List view only; the bar floats while tasks are picked. */
.task-sel-btn{display:flex;align-items:center;gap:6px;margin-left:auto;padding:6px 12px;border-radius:var(--radius);
  border:1px solid var(--main-input-border);background:var(--main-card);font-size:12px;font-weight:700;color:var(--main-text);cursor:pointer}
.task-sel-btn svg{width:14px;height:14px}
.task-sel-btn.is-on{background:var(--purple-dim);border-color:var(--purple-border);color:var(--purple)}
.task-sel-btn+.task-view-seg{margin-left:0}
#panel-tasks.is-board .task-sel-btn{display:none}
.task-pick{width:18px;height:18px;margin-top:2px;accent-color:var(--purple);cursor:pointer;flex-shrink:0}
.task-card.is-picked{background:var(--purple-dim);border-color:var(--purple-border)}
#panel-tasks.is-selecting .task-card{user-select:none}
.task-grp-all{margin-left:auto;background:none;border:none;font-family:Lato,sans-serif;font-size:12px;font-weight:700;
  text-transform:none;letter-spacing:0;color:var(--purple);cursor:pointer}
.task-grp-all:hover{color:var(--orange-text)}
.task-allbar{display:flex;align-items:center;gap:10px;background:var(--purple-dim);border:1px solid var(--purple-border);
  border-radius:var(--radius);padding:8px 14px;margin-bottom:12px;font-size:13px;color:var(--main-text)}
.task-allbar button{background:none;border:none;color:var(--purple);font-weight:700;font-size:13px;cursor:pointer;text-decoration:underline}
.task-abar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(160%);transition:transform .2s;
  width:max-content;max-width:calc(100vw - 32px);display:flex;align-items:center;gap:6px;flex-wrap:wrap;z-index:60;
  background:var(--sb-grad-mid);color:var(--on-accent);border-radius:16px;box-shadow:var(--shadow-lg);padding:8px 8px 8px 16px}
.task-abar.is-on{transform:translateX(-50%) translateY(0)}
.task-abar-count{font-weight:800;margin-right:8px;white-space:nowrap}
.task-ab{position:relative}
.task-ab>button{display:flex;align-items:center;gap:6px;white-space:nowrap;border:none;border-radius:var(--radius);padding:8px 12px;
  font-size:13px;font-weight:700;color:var(--on-accent);background:rgba(255,255,255,.1);cursor:pointer}
.task-ab>button:hover{background:rgba(255,255,255,.2)}
.task-ab>button svg{width:12px;height:12px}
.task-ab>button.is-primary{background:var(--success-text)}
.task-ab>button.is-danger:hover{background:var(--danger-text)}
.task-ab-menu{position:absolute;bottom:calc(100% + 8px);left:0;min-width:180px;display:none;flex-direction:column;padding:4px;
  background:var(--main-card);color:var(--main-text);border:1px solid var(--main-border);border-radius:var(--radius);box-shadow:var(--shadow-md)}
.task-ab-menu.is-open{display:flex}
.task-ab-menu>button,.task-ab-pick{display:flex;align-items:center;gap:8px;justify-content:space-between;background:none;border:none;text-align:left;
  padding:8px 10px;border-radius:var(--radius-sm);font-size:13px;color:var(--main-text);cursor:pointer}
.task-ab-menu>button:hover,.task-ab-pick:hover{background:var(--main-bg);color:var(--orange-text)}
.task-ab-assign{max-height:320px;overflow-y:auto}
.task-ab-pick{white-space:nowrap}
.task-ab-pick input{font:inherit;font-size:12px;border:1px solid var(--main-input-border);border-radius:var(--radius-sm);padding:2px 4px}
.task-ab-menu:has(.task-ab-pick){min-width:250px}
.task-ab-sep{height:1px;background:var(--main-border);margin:4px 0}
.task-abar-cancel{background:none;border:none;color:rgba(255,255,255,.7);font-size:13px;font-weight:700;padding:8px 10px;cursor:pointer}
.task-abar-cancel:hover{color:var(--on-accent)}
/* List / Board switch (028 setTView). Board hides the status chips: the columns are the status. */
.task-view-seg{display:inline-flex;margin-left:auto;background:var(--main-bg-sunk);border-radius:var(--radius);padding:3px}
.task-view-seg button{display:flex;align-items:center;gap:6px;border:none;background:none;padding:5px 12px;border-radius:7px;
  font-size:12px;font-weight:700;color:var(--main-text-muted);cursor:pointer}
.task-view-seg button svg{width:13px;height:13px}
.task-view-seg button.on{background:var(--main-card);color:var(--purple);box-shadow:var(--shadow-sm)}
#panel-tasks.is-board .task-status-chip,#panel-tasks.is-board #tasks-list,#panel-tasks.is-board #tasks-pg{display:none}
/* Board: three status columns; cards drag between them (028 renderTaskBoard). */
.task-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.task-col{background:var(--main-bg-sunk);border-radius:var(--radius-lg);padding:10px;min-height:220px;transition:background .15s,box-shadow .15s}
.task-col.is-drop{background:var(--purple-dim);box-shadow:inset 0 0 0 2px var(--purple-border)}
.task-col-head{display:flex;align-items:center;gap:8px;padding:2px 4px 10px;font-family:'Exo 2',sans-serif;font-size:12px;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--main-text-muted)}
.task-col-dot{width:8px;height:8px;border-radius:50%;background:var(--purple)}
.task-col.is-in-progress .task-col-dot{background:var(--orange)}
.task-col.is-done .task-col-dot{background:var(--success-light)}
.task-col-cards{display:flex;flex-direction:column;gap:8px}
.task-col-empty{font-size:12px;color:var(--main-text-muted);text-align:center;padding:24px 8px;border:1px dashed var(--main-border);border-radius:12px}
.task-col-more{display:block;width:100%;margin-top:8px;background:none;border:1px dashed var(--main-border);border-radius:12px;
  padding:7px;color:var(--purple);font-size:12px;font-weight:700;cursor:pointer}
.task-col-more:hover{color:var(--orange-text)}
.task-bcard{background:var(--main-card);border:1px solid var(--main-border);border-radius:12px;padding:10px 10px 10px 12px;cursor:grab;
  box-shadow:0 1px 4px rgba(107,33,234,.06);transition:border-color .15s,opacity .15s}
.task-bcard:hover{border-color:var(--purple-border)}
.task-bcard:focus-visible{outline:3px solid var(--purple-border);outline-offset:2px}
.task-bcard.is-dragging{opacity:.4}
.task-bcard-top{display:flex;align-items:flex-start;gap:6px}
.task-bcard-title{flex:1;min-width:0;font-weight:700;font-size:13.5px;line-height:1.35;color:var(--main-text)}
.task-bcard.is-done .task-bcard-title{text-decoration:line-through;color:var(--main-text-muted)}
.task-bcard .task-hi{margin-top:6px}
.task-bcard-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.task-bcard .task-contact{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-bcard .task-due{min-width:0;text-align:left;font-size:11.5px}
.task-bcard .task-due.is-done{color:var(--success-text);font-weight:700}
.task-bcard .task-av{margin-left:auto}
@media(max-width:820px){.task-board{grid-template-columns:1fr}}
/* Quick add (028 onTQuickKey): a row-shaped input above the list. */
.task-quick{display:flex;align-items:center;gap:10px;background:var(--main-card);border:1px dashed var(--purple-border);
  border-radius:var(--radius-lg);padding:6px 10px 6px 16px;margin-bottom:14px;transition:border-color .18s,box-shadow .18s}
.task-quick:focus-within{border-style:solid;border-color:var(--purple);box-shadow:var(--focus-ring)}
.task-quick svg{width:16px;height:16px;color:var(--purple);flex-shrink:0}
.task-quick input{flex:1;min-width:0;border:none;background:none;font:inherit;font-size:14px;color:var(--main-text);outline:none;padding:7px 0}
.task-quick input::placeholder{color:var(--text-placeholder)}
.task-quick input:disabled{opacity:.6}
.task-quick-more{background:none;border:none;color:var(--purple);font-size:12px;font-weight:700;cursor:pointer;padding:4px 6px;white-space:nowrap}
.task-quick-more:hover{color:var(--orange-text)}
.task-clear{font-size:12px;font-weight:700;color:var(--purple);background:none;border:none;cursor:pointer;padding:4px 6px}
.task-clear:hover{color:var(--orange-text)}
/* Tasks panel: due-date groups of rows. The whole row opens Edit; the status
   circle, contact chip and menu keep their own clicks (028-tasks.js). */
.task-grp+.task-grp{margin-top:10px}
.task-grp-head{display:flex;align-items:center;gap:8px;margin:0 2px 8px;font-family:'Exo 2',sans-serif;font-size:12px;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--main-text-muted)}
.task-grp-n{font-family:Lato,sans-serif;font-size:11px;font-weight:700;letter-spacing:0;color:var(--main-text-muted);
  background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-full);padding:0 8px}
.task-grp-head.is-late{color:var(--danger-text)}
.task-grp-head.is-late .task-grp-n{background:var(--danger-dim);border-color:transparent;color:var(--danger-text)}
.task-grp-head.is-today{color:var(--warning-text)}
.task-grp-head.is-today .task-grp-n{background:var(--warning-dim);border-color:transparent;color:var(--warning-text)}
.task-grp-toggle{display:flex;align-items:center;gap:8px;background:none;border:none;padding:0;cursor:pointer;
  font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit}
.task-grp-toggle svg{width:12px;height:12px;transition:transform .15s}
.task-grp-toggle[aria-expanded="true"] svg{transform:rotate(90deg)}
.task-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);cursor:pointer;
  padding:12px 12px 12px 16px;display:flex;gap:12px;align-items:flex-start;transition:border-color .18s,background .18s;box-shadow:0 1px 6px rgba(107,33,234,.06)}
.task-card:hover{border-color:var(--purple-border);background:var(--main-card-hover)}
.task-card:focus-visible{outline:3px solid var(--purple-border);outline-offset:2px}
.task-chk{width:20px;height:20px;border-radius:50%;border:2px solid var(--main-input-border);background:none;padding:0;
  flex-shrink:0;margin-top:1px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s}
.task-chk:hover{border-color:var(--orange)}.task-chk.done{background:var(--success-light);border-color:var(--success-light)}
.task-chk.in-progress{border-color:var(--orange);border-style:dashed}
.task-chk svg{width:10px;height:10px;color:var(--on-accent)}
.task-chk:not(.done) svg{display:none}
.task-body{flex:1;min-width:0}
.task-title-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.task-title{font-size:14px;font-weight:700;color:var(--main-text)}
.task-title.done{text-decoration:line-through;color:var(--text-muted)}
/* Checklist progress mark (028 _tPaintChecklist): "2/5", green when all done. */
.task-clp{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--main-text-muted);flex-shrink:0}
.task-clp svg{width:12px;height:12px}
.task-clp.is-done{color:var(--success-text)}
/* Checklist in the task modal (028 _tclRender). */
.task-cl{display:flex;flex-direction:column;gap:6px}
.task-cl-list{display:flex;flex-direction:column;gap:2px}
.task-cl-item{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:var(--radius-md);background:var(--main-card)}
.task-cl-item:hover{background:var(--main-card-hover)}
.task-cl-item.is-dragging{opacity:.4}
.task-cl-handle{width:14px;height:14px;color:var(--main-text-muted);cursor:grab;flex-shrink:0;opacity:.6}
.task-cl-check{width:16px;height:16px;flex-shrink:0;accent-color:var(--purple);cursor:pointer}
.task-cl-text{flex:1;min-width:0;font-size:13.5px;color:var(--main-text);cursor:text;overflow-wrap:anywhere}
.task-cl-text.is-done{text-decoration:line-through;color:var(--main-text-muted)}
.task-cl-edit{flex:1;min-width:0;font:inherit;font-size:13.5px;padding:3px 6px;border:1px solid var(--main-input-border);border-radius:var(--radius-sm)}
.task-cl-x{flex-shrink:0;width:22px;height:22px;border:none;background:none;border-radius:var(--radius-sm);color:var(--main-text-muted);font-size:16px;line-height:1;cursor:pointer}
.task-cl-x:hover{background:var(--danger-dim);color:var(--danger-text)}
.task-cl-add{width:100%;font:inherit;font-size:13.5px;padding:7px 10px;border:1px dashed var(--purple-border);border-radius:var(--radius-md);background:var(--main-card)}
.task-cl-add:focus{outline:none;border-style:solid;border-color:var(--purple);box-shadow:var(--focus-ring)}
.task-cl-note{font-size:11.5px;color:var(--main-text-muted);margin-top:4px}
/* Repeating task mark (028 _tPaintRepeat); the tooltip says how often. */
.task-rep{display:inline-flex;align-items:center;color:var(--main-text-muted);flex-shrink:0;margin-top:1px}
.task-rep svg{width:13px;height:13px}
.task-st{font-size:11px;font-weight:700;color:var(--orange-text);background:var(--orange-dim);border-radius:var(--radius-full);padding:1px 8px}
.task-hi{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--danger-text);background:var(--danger-dim);border-radius:var(--radius-sm);padding:1px 6px}
.task-hi svg{width:10px;height:10px}
/* Keeps the line breaks staff type (pasted lists), capped at two lines; the full text is in Edit. */
.task-desc{font-size:12px;color:var(--main-text-muted);margin-top:2px;line-height:1.5;white-space:pre-line;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.task-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.task-contact{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--purple);background:var(--purple-dim);
  border:none;border-radius:var(--radius-full);padding:2px 8px 2px 6px;cursor:pointer}
.task-contact:hover{color:var(--orange-text)}
.task-contact svg{width:11px;height:11px}
.task-side{display:flex;align-items:center;gap:14px;flex-shrink:0;margin-top:1px}
.task-due{font-size:12px;color:var(--main-text-muted);white-space:nowrap;min-width:92px;text-align:right}
.task-due.late{color:var(--danger-text);font-weight:700}
.task-due.today{color:var(--warning-text);font-weight:700}
.task-who{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--main-text);min-width:90px}
.task-who.none{color:var(--main-text-muted)}
.task-av{width:20px;height:20px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:'Exo 2',sans-serif;font-size:9px;font-weight:700;color:var(--on-accent);background-color:var(--purple);
  background-size:cover;background-position:center}
@media(max-width:760px){
  .task-card{flex-wrap:wrap}
  .task-side{width:100%;padding-left:32px;gap:10px}
  .task-due{text-align:left;min-width:0}
  .task-due:empty{display:none}
  .task-who{min-width:0}
  .task-side .drow-kebab{margin-left:auto}
}
.pri-badge{font-size:10px;font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:4px}
.ph{background:rgba(239,68,68,.15);color:var(--danger-light)}
.pm{background:rgba(245,158,11,.15);color:var(--warning-light)}
.pl{background:rgba(16,185,129,.15);color:var(--success-light)}

/* POS */
/* Checkout two thirds, sell tiles and shortcuts one third (2026-10-09). */
.pos-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:14px;align-items:start}
/* Checkout is never shorter than the tiles and shortcuts beside it: its
   column stretches to the row, the card fills it, and the sale column
   inside takes the height (the slack lands under the item list). */
.pos-grid>.pos-co-col{align-self:stretch;display:flex;flex-direction:column}
.pos-co-col>.pos-co-card{flex:1 0 auto;display:flex;flex-direction:column}
.pos-co-card>.pos-co{flex:1 0 auto}
/* Inside Checkout: the sale on the left, the Summary card (totals, payment,
   Charge) on the right. Under ~640px of card the two stack, summary last, so
   Square's card form (min-width 250px) is never squeezed. */
.pos-co-card{container-type:inline-size;container-name:posco}
.pos-co{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:stretch}
@container posco (max-width:640px){.pos-co{grid-template-columns:minmax(0,1fr)}}
/* The sale column is at least as tall as the Summary card: the space under
   the item list (.pos-items-fill) takes the slack, so the sections below end
   level with the card and new items fill it before the page grows. */
.pos-co-main{min-width:0;display:flex;flex-direction:column}
.pos-items-fill{flex:1 0 0}
.pos-co-sum{align-self:start}
/* One rhythm in the sale column: the same full-width line between every
   section, 16px either side, labels 8px over their controls, no short
   underline under a label. */
.pos-co-main .pos-sec-div{margin:16px 0}
.pos-co-main .sec-label{display:block;border-bottom:0;padding-bottom:0;margin-bottom:8px}
.pos-co-main .tip-row{margin-top:0}
/* Block, so the line box adds no strut space above "+ Add a note". */
.pos-co-main .pos-text-btn{display:block}
.pos-co-sum{min-width:0;background:var(--main-bg);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:14px}
.pos-co-sum-title{font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;color:var(--main-text);margin-bottom:8px}
.pos-co-sum .pos-totals{border-top:0;padding-top:0;margin-top:0}
.pos-gw-note{margin-top:8px;font-size:11px;color:var(--text-muted)}
.pos-co-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pos-clear-btn{background:none;border:0;padding:4px 2px;font:inherit;font-size:12px;font-weight:700;color:var(--purple);cursor:pointer}
.pos-clear-btn:hover{text-decoration:underline}
.pos-clear-btn:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:var(--radius)}
.pos-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:18px;margin-bottom:12px;box-shadow:0 1px 6px rgba(107,33,234,.06)}
.pos-card:last-child{margin-bottom:0}
/* Uncollected subscription money for the customer picked in the register.
   Orange, the same "money is owed" colour the subscriptions list uses for an
   overdue cycle. A notice, never an error: nothing here blocks the sale. */
.pos-outstanding{margin-top:10px;padding:10px 12px;border-radius:var(--radius);
  background:var(--orange-dim);border:1px solid var(--orange-border)}
.pos-outstanding-title{font-size:12px;font-weight:700;color:var(--orange);margin-bottom:8px}
.pos-outstanding-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 0}
.pos-outstanding-what{font-size:13px;font-weight:600;color:var(--main-text)}
.pos-outstanding-meta{font-size:12px;color:var(--main-text-muted);flex:1}
.pos-outstanding-btn{background:var(--orange);color:#fff;border:1px solid var(--orange)}
.pos-outstanding-note{font-size:11px;color:var(--main-text-muted);margin-top:8px;line-height:1.5}
.pos-card-title{font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;color:var(--main-text);
  margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.pos-item-add{display:flex;gap:7px;margin-bottom:10px;align-items:flex-end}
/* Customer and "Credit sale and tip to" share a row (2026-10-09), stacking
   when the Checkout card is narrower than 420px. */
.pos-pair-wrap{container-type:inline-size;container-name:pospair}
.pos-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:end}
@container pospair (max-width:340px){.pos-pair{grid-template-columns:minmax(0,1fr);gap:10px}}
.pos-pair .ss-inp{height:38px}
/* Divider between the Items section and the customer in the one Checkout card. */
.pos-sec-div{height:1px;background:var(--border);margin:12px 0 14px}
/* Quick action tiles, the POS second column (2026-10-09): one stack. */
.pos-quick{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:12px}
.pos-quick-btn{display:flex;align-items:center;gap:10px;min-width:0;text-align:left;cursor:pointer;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:12px;box-shadow:var(--shadow-sm);font:inherit;color:var(--main-text);transition:background .12s,border-color .12s,transform .12s}
.pos-quick-btn:hover{background:var(--main-card-hover);border-color:var(--purple-border)}
.pos-quick-btn:active{transform:scale(.98)}
.pos-quick-btn:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.pos-quick-ic{width:34px;height:34px;flex-shrink:0;border-radius:var(--radius);display:flex;align-items:center;justify-content:center}
.pos-quick-ic svg{width:18px;height:18px}
.pos-quick-ic-mem{background:var(--purple-dim);color:var(--purple)}
.pos-quick-ic-ser{background:var(--info-dim);color:var(--info-text)}
.pos-quick-ic-gc{background:var(--success-dim);color:var(--success-text)}
.pos-quick-ic-inv{background:var(--warning-dim);color:var(--warning-text)}
/* Shortcuts under the sell tiles (2026-10-09): a divider, then one card of
   compact rows. A row draws its top rule only after a visible sibling, so a
   role that hides some never shows a stray line. */
.pos-nav-div{height:1px;background:var(--main-border);margin:16px 0 14px}
.pos-nav{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.pos-nav-btn{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;background:none;border:none;font:inherit;font-size:13px;color:var(--main-text);text-align:left;cursor:pointer;transition:background .12s}
.pos-nav-btn:not(.hidden)~.pos-nav-btn:not(.hidden){border-top:1px solid var(--main-border)}
.pos-nav-btn:hover{background:var(--main-card-hover)}
.pos-nav-btn:focus-visible{outline:2px solid var(--purple);outline-offset:-2px}
.pos-nav-btn>svg:first-child{width:16px;height:16px;flex-shrink:0;color:var(--purple)}
.pos-nav-lbl{flex:1;min-width:0}
.pos-nav-chev{width:14px;height:14px;flex-shrink:0;color:var(--main-text-muted)}
.pos-sale-note{margin-top:6px;font-size:12px;font-weight:600;color:var(--success-text)}
/* Transactions tab (approved mockup 2026-10-10). The layout answers to the
   panel's width, not the screen's, so an open sidebar never breaks it. */
#pay-transactions-view{container-type:inline-size;container-name:txn}
.txn-held{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px;padding:9px 12px;border:1px solid var(--warning-light);border-radius:var(--radius-md);background:var(--warning-dim);color:var(--warning-text);font-size:12.5px}
.txn-held-btn{margin-left:auto;padding:0;border:none;background:none;color:var(--warning-text);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.txn-held-rows{flex-basis:100%;margin-top:4px}
/* Refund requests (161 _rrRefresh): the held-money line's shape, purple so the two read apart. */
.txn-held.rr-banner{border-color:var(--purple-border);background:var(--purple-dim);color:var(--main-text)}
.rr-banner .txn-held-btn{color:var(--purple)}
.rr-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--main-border);font-size:13px}
.rr-row-t{flex:1;min-width:220px}
.rr-row-t b{display:block;color:var(--main-text)}
.rr-row-t span{display:block;font-size:12px;color:var(--main-text-muted)}
.rr-row-a{display:flex;gap:6px;flex-wrap:wrap}
.rr-row-t .rr-legs{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.rr-row-t .rr-leg{display:inline-block;font-size:11.5px;padding:2px 8px;border-radius:var(--radius-full);border:1px solid var(--main-border);color:var(--main-text-muted)}
.rr-row-t .rr-leg.is-odd{border-color:var(--warning);background:var(--warning-dim);color:var(--warning-text);font-weight:700}
.rr-links{margin-left:auto;display:flex;gap:14px}
.rr-links .txn-held-btn{margin-left:0}
.rr-links .txn-held-btn.is-cur{color:var(--main-text);text-decoration:none}
.rr-filters{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 2px}
.rr-filter{font-family:Lato,sans-serif;font-weight:700;font-size:11.5px;padding:4px 10px;border-radius:var(--radius-full);border:1px solid var(--main-border);background:var(--main-card);color:var(--main-text-muted);cursor:pointer}
.rr-filter.is-on{background:var(--purple-dim);color:var(--purple);border-color:var(--purple-border)}
.rr-more{font-size:12px;color:var(--main-text-muted);padding-top:8px}
.rr-st{font-size:10.5px;font-weight:800;letter-spacing:.04em;padding:3px 8px;border-radius:var(--radius-full);white-space:nowrap}
.rr-st-ok{background:var(--success-dim);color:var(--success-text)}
.rr-st-no{background:var(--danger-dim);color:var(--danger-text)}
.rr-st-mu{background:var(--purple-dim);color:var(--main-text-muted)}
.rr-st-wt{background:var(--warning-dim);color:var(--warning-text)}
.rr-row-t .rr-why{display:block;font-size:12px;color:var(--main-text);margin-top:2px}
.rr-chip{font-size:10px;font-weight:700;letter-spacing:.04em;padding:3px 7px;border-radius:var(--radius-full);background:var(--warning-dim);color:var(--warning-text)}
.rr-offer{margin-bottom:12px}
.txn-sum{display:grid;grid-template-columns:minmax(280px,1.4fr) repeat(4,minmax(0,1fr));gap:12px;margin-bottom:10px}
.txn-hero{position:relative;overflow:hidden;padding:16px 18px;border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--purple),var(--purple-active));color:var(--sb-text-strong)}
.txn-hero::before,.txn-hero::after{content:'';position:absolute;width:210px;height:210px;border-radius:50%;background:var(--dash-hero-circle);pointer-events:none}
.txn-hero::after{top:-95px;right:-95px}
.txn-hero::before{top:-135px;right:-15px;opacity:.6}
.txn-hero-lbl{position:relative;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--purple-soft)}
.txn-hero-val{position:relative;margin-top:6px;font-family:'Exo 2',sans-serif;font-size:30px;font-weight:700}
.txn-hero-row{position:relative;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px;font-size:12px}
.txn-delta{padding:3px 9px;border-radius:var(--radius-full);background:var(--dash-hero-tile);font-weight:700}
.txn-ytd{color:var(--purple-soft)}
.txn-tile{display:flex;flex-direction:column;justify-content:space-between;min-height:92px;padding:12px 14px;border:1px solid var(--main-border);border-radius:var(--radius-lg);background:var(--main-card);box-shadow:var(--shadow-sm);color:var(--main-text);font:inherit;text-align:left;cursor:pointer}
.txn-tile:hover{border-color:var(--purple-border);background:var(--main-card-hover)}
.txn-tile:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.txn-tile.is-on{border-color:var(--purple);box-shadow:0 0 0 2px var(--purple-dim)}
.txn-tile-lbl{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted)}
.txn-tile-val{margin-top:6px;font-family:'Exo 2',sans-serif;font-size:20px;font-weight:700}
.txn-tile-val.is-neg{color:var(--danger-text)}
.txn-tile-sub{margin-top:2px;font-size:11.5px;color:var(--main-text-muted)}
.txn-note{display:flex;gap:8px;align-items:center;margin-bottom:10px;padding:8px 12px;border-radius:var(--radius-md);background:var(--info-dim);color:var(--info-text);font-size:12.5px}
.txn-card .txn-note{margin:10px 14px}
.txn-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0 8px}
.txn-in{height:36px;padding:0 10px;border:1px solid var(--main-input-border);border-radius:var(--radius-md);background:var(--main-input);color:var(--main-text);font:inherit;font-size:13px}
.txn-search{flex:1;min-width:200px}
.txn-dates{display:flex;gap:6px;align-items:center}
.txn-dates-to{font-size:12px;color:var(--main-text-muted)}
.txn-export{margin-left:auto}
.txn-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-height:28px;margin-bottom:12px}
.txn-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 6px 0 11px;border:1px solid var(--purple-border);border-radius:var(--radius-full);background:var(--purple-dim);color:var(--purple-active);font-size:12px;font-weight:700}
.txn-chip button{padding:0 4px;border:none;background:none;color:inherit;font-size:14px;line-height:1;cursor:pointer}
.txn-chip-add{height:28px;padding:0 11px;border:1px dashed var(--purple-border);border-radius:var(--radius-full);background:none;color:var(--purple);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.txn-chip-clear{padding:0 4px;border:none;background:none;color:var(--purple);font:inherit;font-size:12px;cursor:pointer}
.txn-count{margin-left:auto;font-size:12px;color:var(--main-text-muted);white-space:nowrap}
.txn-menu{position:absolute;z-index:var(--z-modal-pop);width:240px;padding:12px;border:1px solid var(--main-border);border-radius:var(--radius-lg);background:var(--main-card);box-shadow:var(--shadow-lg)}
.txn-menu label{display:block;margin:0 0 4px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted)}
.txn-menu .txn-in{width:100%;margin-bottom:10px}
.txn-menu .txn-in:last-child{margin-bottom:0}
.txn-card{overflow:hidden;border:1px solid var(--main-border);border-radius:var(--radius-lg);background:var(--main-card);box-shadow:var(--shadow-sm)}
.txn-t{width:100%;border-collapse:collapse}
.txn-t th{padding:10px 14px;border-bottom:1px solid var(--divider);background:var(--main-card);font-size:10.5px;font-weight:800;letter-spacing:.05em;text-align:left;text-transform:uppercase;color:var(--main-text-muted)}
.txn-t td{padding:11px 14px;border-bottom:1px solid var(--main-border);vertical-align:top;font-size:13px}
.txn-t tbody tr.txn-row{cursor:pointer}
.txn-t tbody tr.txn-row:hover td{background:var(--main-card-hover)}
.txn-t .txn-r{text-align:right}
.txn-date{white-space:nowrap}
.txn-date b{display:block;font-weight:700}
.txn-date span,.txn-more{font-size:11.5px;color:var(--main-text-muted)}
.txn-amt{font-family:'Exo 2',sans-serif;font-size:14px;font-weight:700}
.txn-refund{display:block;font-size:11.5px;font-weight:700;color:var(--danger-text)}
.txn-muted{color:var(--main-text-muted)}
.txn-agency{font-weight:700;color:var(--purple)}
.txn-staff{font-weight:600}
.txn-pills{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.txn-t tfoot td{border-bottom:none;background:var(--purple-dim);font-weight:700}
.txn-foot-lbl{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted)}
.txn-list{display:none}
.txn-li{padding:12px 14px;border-bottom:1px solid var(--main-border);cursor:pointer}
.txn-li:hover{background:var(--main-card-hover)}
.txn-li-top,.txn-li-mid{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.txn-li-name{font-weight:700}
.txn-li-mid{align-items:center;margin-top:4px;font-size:12px;color:var(--main-text-muted)}
.txn-li-bot{margin-top:3px;font-size:12px;color:var(--main-text-muted)}
.txn-li-foot{display:flex;justify-content:space-between;padding:12px 14px;background:var(--purple-dim);font-weight:700}
.txn-pg{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;font-size:12px;color:var(--main-text-muted)}
.txn-pg .pagination{margin:0}
@container txn (max-width:1099px){
  .txn-sum{grid-template-columns:repeat(4,minmax(0,1fr))}
  .txn-hero{grid-column:1 / -1}
}
@container txn (max-width:719px){
  .txn-sum{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .txn-tile{min-height:76px;padding:10px 12px}
  .txn-tile-val{font-size:17px}
  .txn-search{flex-basis:100%;order:3}
  .txn-export-lbl{display:none}
  .txn-count{display:none}
  .txn-card:not(.is-state) .txn-t{display:none}
  .txn-card:not(.is-state) .txn-list{display:block}
}
/* Memberships tab (approved mockup 2026-10-11, canvas board 1). Reuses the
   Transactions hero, tiles, card, table and narrow list (txn-*); these rules
   add the layout, meters, card state, row menu and side cards. Like txn, the
   layout answers to the panel's width, not the screen's. */
#panel-memberships{container-type:inline-size;container-name:memb}
.mem-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.mem-sub{font-size:13px;color:var(--main-text-muted)}
.mem-sum{display:grid;grid-template-columns:minmax(280px,1.6fr) repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.mem-hero{min-height:92px}
.mem-tile-bad{border-color:var(--danger-light)}
.mem-tile-warn .txn-tile-val{color:var(--warning-text)}
.mem-layout{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.mem-main{flex:999 1 640px;min-width:0}
.mem-side{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:12px}
.mem-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 14px;border-bottom:1px solid var(--divider)}
.mem-pills{display:flex;flex-wrap:wrap;gap:6px}
.mem-pill-n{opacity:.65;font-weight:500}
.mem-tools{display:flex;flex-wrap:wrap;gap:8px}
.mem-search{min-width:180px}
.mem-chips{margin:10px 14px 0}
.mem-t td{vertical-align:middle}
.mem-who{display:flex;align-items:center;gap:10px;min-width:0}
.mem-av{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--purple-dim);color:var(--purple);font-size:12px;font-weight:800}
.mem-who-txt{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.mem-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.mem-plan{font-weight:700}
.mem-plan-sub{font-size:12px}
.mem-credit-cell{min-width:150px}
.mem-meter-top{display:flex;justify-content:space-between;margin-bottom:5px;font-size:12px;font-weight:700}
.mem-meter{height:6px;border-radius:var(--radius-full);background:var(--main-bg-sunk);overflow:hidden}
.mem-meter-fill{height:100%;border-radius:var(--radius-full);background:var(--purple)}
.mem-meter-fill.is-idle{background:var(--warning-light)}
.mem-meter-note{margin-top:4px;font-size:11.5px;font-weight:700;color:var(--warning-text)}
.mem-num{font-weight:700;white-space:nowrap}
.mem-card{display:inline-block;padding:3px 8px;border-radius:var(--radius-full);font-size:11px;font-weight:700;white-space:nowrap}
.mem-card.is-ok{background:var(--success-dim);color:var(--success-text)}
.mem-card.is-warn{background:var(--warning-dim);color:var(--warning-text)}
.mem-card.is-bad{background:var(--danger-dim);color:var(--danger-text)}
.mem-kebab{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:var(--radius-md);background:none;color:var(--main-text-muted);cursor:pointer}
.mem-kebab:hover{background:var(--purple-dim);color:var(--purple)}
.mem-kebab:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.mem-rowmenu{position:absolute;z-index:var(--z-modal-pop);min-width:190px;padding:6px;border:1px solid var(--main-border);border-radius:var(--radius-lg);background:var(--main-card);box-shadow:var(--shadow-lg)}
.mem-rowmenu-item{display:block;width:100%;padding:9px 10px;border:none;border-radius:var(--radius-md);background:none;color:var(--main-text);font:inherit;font-size:13px;font-weight:600;text-align:left;cursor:pointer}
.mem-rowmenu-item:hover,.mem-rowmenu-item:focus-visible{outline:none;background:var(--purple-dim)}
.mem-rowmenu-item.is-danger{color:var(--danger-text)}
.mem-rowmenu-item.is-danger:hover{background:var(--danger-dim)}
.mem-side-card{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--main-border);border-radius:var(--radius-lg);background:var(--main-card);box-shadow:var(--shadow-sm)}
.mem-side-head{display:flex;align-items:center;gap:8px}
.mem-side-ic{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--radius-md);background:var(--purple-dim);color:var(--purple)}
.mem-side-title{flex:1;font-family:'Exo 2',sans-serif;font-size:14px;font-weight:700}
.mem-side-n{font-size:12px;font-weight:700;color:var(--main-text-muted)}
.mem-side-empty{font-size:12.5px;color:var(--main-text-muted)}
.mem-att{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--main-border);border-radius:var(--radius-md);background:var(--main-card-hover)}
.mem-att-dot{flex-shrink:0;width:8px;height:8px;margin-top:6px;border-radius:50%}
.mem-att-dot.is-bad{background:var(--danger)}
.mem-att-dot.is-warn{background:var(--warning)}
.mem-att-dot.is-info{background:var(--info)}
.mem-att-dot.is-purple{background:var(--purple)}
.mem-att-body{flex:1;min-width:0}
.mem-att-title{font-size:13px;font-weight:700}
.mem-att-sub{font-size:12px;color:var(--main-text-muted)}
.mem-mix{display:flex;flex-direction:column;gap:4px}
.mem-mix-top{display:flex;justify-content:space-between;gap:8px;font-size:12px}
.mem-mix-name{font-weight:700}
/* Plans tab (canvas board 2). */
.mem-plans-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mem-back{display:inline-flex;align-items:center;gap:4px;padding-left:8px}
.mem-seg{display:inline-flex;overflow:hidden;border:1px solid var(--main-input-border);border-radius:var(--radius-md);background:var(--main-card)}
.mem-seg-btn{height:38px;padding:0 14px;border:none;background:none;color:var(--main-text-muted);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.mem-seg-btn.is-on{background:var(--purple);color:var(--sb-text-strong)}
.mem-seg-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.mem-plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.mem-plan-card{display:flex;flex-direction:column;gap:14px;padding:18px;border:1px solid var(--main-border);border-radius:var(--radius-lg);background:var(--main-card);box-shadow:var(--shadow-sm)}
.mem-plan-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.mem-plan-name{font-family:'Exo 2',sans-serif;font-size:17px;font-weight:800}
.mem-plan-term{font-size:12px;color:var(--main-text-muted)}
.mem-plan-price{display:flex;align-items:baseline;gap:4px;font-size:13px}
.mem-plan-amt{font-family:'Exo 2',sans-serif;font-size:28px;font-weight:800}
.mem-perks{display:flex;flex-direction:column;gap:7px;margin:0;padding:12px 0 0;border-top:1px solid var(--divider);list-style:none;font-size:13px}
.mem-perks li{display:flex;gap:8px;align-items:flex-start}
.mem-perks svg{flex-shrink:0;margin-top:2px;color:var(--purple)}
.mem-plan-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px}
.mem-plan-stat{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--main-border);border-radius:var(--radius-md);background:var(--main-card-hover)}
.mem-plan-stat-v{font-family:'Exo 2',sans-serif;font-size:16px;font-weight:700}
.mem-plan-acts{display:flex;gap:6px;align-items:center;margin-top:auto}
.mem-plan-save{display:flex;align-items:center}
.mem-plan-save-pill{display:inline-flex;padding:3px 10px;border-radius:999px;background:var(--success-dim);color:var(--success-text);font-size:12px;font-weight:700}
/* Cards in one row share row heights, so a two-line plan name or a longer
   perk list no longer staggers the price, stats and buttons across cards. */
@supports (grid-template-rows:subgrid){
.mem-plans{row-gap:0}
.mem-plan-card{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:14px;margin-bottom:14px}
.mem-plan-acts{margin-top:0;align-self:end}
}
.mem-plan-edit{flex:1}
.mem-icon-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:38px;height:38px;border:1px solid var(--main-input-border);border-radius:var(--radius-md);background:var(--main-card);color:var(--main-text-muted);cursor:pointer}
.mem-icon-btn:hover{border-color:var(--purple-border);color:var(--purple)}
.mem-icon-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* Plan builder (canvas board 3): steps, form beside a live preview. The
   preview column wraps below the form when the modal is narrow. */
.mp-steps{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 16px}
.mp-step{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 6px;border:1px solid var(--main-border);border-radius:var(--radius-full);background:var(--main-card);color:var(--main-text-muted);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.mp-step:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.mp-step-n{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--main-bg-sunk);color:var(--main-text-muted);font-size:12px}
.mp-step.is-on{border-color:var(--purple-border);background:var(--purple-dim);color:var(--purple)}
.mp-step.is-on .mp-step-n,.mp-step.is-done .mp-step-n{background:var(--purple);color:var(--sb-text-strong)}
.mp-layout{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.mp-form{flex:999 1 480px;min-width:0}
.mp-aside{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--radius-lg);background:var(--main-bg)}
.mp-pane{min-width:0}
.mp-pane-lbl{margin-bottom:12px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted)}
.mp-aside .mp-pane-lbl{margin-bottom:0}
.mp-row2{display:flex;flex-wrap:wrap;gap:10px}
.mp-row2 .form-group{flex:1;min-width:140px}
.mp-check{margin:4px 0 12px;align-items:center}
.mp-check > input[type=checkbox]{flex:none;margin:0}
.mp-inline-num{width:64px;height:32px;margin:0 2px;padding:0 8px;border:1px solid var(--main-input-border);border-radius:var(--radius-md);background:var(--main-input);color:var(--main-text);font:inherit;font-size:13px}
.mp-inline-num:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-dim)}
.mp-inline-num:disabled{opacity:.5}
.mp-help{margin-top:2px;font-size:12px;line-height:1.45;color:var(--main-text-muted)}
.mp-field{margin:10px 0 0}
.mp-num{max-width:140px}
.mp-prefix,.mp-suffix{display:flex;align-items:center;max-width:200px;border:1px solid var(--main-input-border);border-radius:var(--radius-md);background:var(--main-input)}
.mp-prefix:focus-within,.mp-suffix:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-dim)}
.mp-prefix span,.mp-suffix span{padding:0 10px;font-size:13px;color:var(--main-text-muted)}
.mp-prefix span{padding-right:0}
/* The affix wrapper owns the border and the focus ring, like .date-pair. The
   wrapper class doubles in the selector to outrank `.surface-light .form-group
   input` and `.form-group input:focus`. */
.form-group .mp-prefix.mp-prefix input,.form-group .mp-suffix.mp-suffix input{border:none;border-radius:0;background:transparent;box-shadow:none}
.form-group .mp-prefix.mp-prefix input:focus,.form-group .mp-suffix.mp-suffix input:focus{border:none;box-shadow:none;outline:none}
.form-group .mp-suffix input{padding-right:0}
.mp-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.mp-box > .mp-check{margin:0}
.mp-rw-fields > .mp-check{margin:14px 0 4px}
.mem-edit-facts{margin-top:2px;font-size:13px;color:var(--main-text-muted)}
.mem-edit-plan{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--main-border);border-radius:var(--radius-md);background:var(--main-card)}
.mem-edit-plan-name{font-weight:700}
.mem-edit-plan-sub{margin-top:2px;font-size:12px;color:var(--main-text-muted)}
.mem-edit-help{display:block;margin-top:4px;font-size:12px;font-weight:400;color:var(--main-text-muted)}
.mem-edit-renew{margin:4px 0 14px;align-items:flex-start;font-size:14px}
.mp-check.mem-edit-renew > input[type=checkbox]{margin-top:3px}
.mp-vars > .mp-auto{margin:0 0 8px}
.mp-rw-fields{margin-top:6px}
.mp-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mp-box{display:flex;flex-direction:column;gap:10px;margin-top:14px;padding:14px;border:1px solid var(--main-border);border-radius:var(--radius-lg)}
.mp-box-title{font-family:'Exo 2',sans-serif;font-weight:700}
.mp-ro{display:flex;flex-wrap:wrap;gap:8px}
.mp-ro-opt{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--main-input-border);border-radius:var(--radius-md);font-size:13px;cursor:pointer}
.mp-ro-opt.is-on{border-color:var(--purple);background:var(--purple-dim);font-weight:700}
.mp-add-line{margin-top:4px}
.mp-line{display:flex;flex-direction:column;gap:10px;margin-bottom:10px;padding:14px;border:1px solid var(--main-border);border-radius:var(--radius-lg);background:var(--main-card-hover)}
.mp-line-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.mp-line-row .form-group{margin:0}
.mp-line-svc{flex:3;min-width:200px}
.mp-line-per{width:120px}
.mp-line-del{color:var(--danger-text)}
.mp-line-warn{font-size:12px;font-weight:700;color:var(--danger-text)}
.mp-line-note,.mp-vars-empty,.mp-line-empty{font-size:12px;color:var(--main-text-muted)}
.mp-line-empty{padding:12px 0}
.mp-vars,.mp-addons{display:flex;flex-direction:column;gap:6px}
.mp-vars-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mp-var-list{display:flex;flex-wrap:wrap;gap:6px 14px}
.mp-var{display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}
.mp-ss-meta{margin-top:2px;font-size:11px;color:var(--main-text-muted)}
.mp-note{margin-top:12px;padding:10px 12px;border-radius:var(--radius-md);background:var(--info-dim);color:var(--info-text);font-size:12.5px}
.mp-prev{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--main-border);border-radius:var(--radius-lg);background:var(--main-card)}
.mp-prev-name{font-family:'Exo 2',sans-serif;font-size:18px;font-weight:800}
.mp-prev-term{padding-top:10px;border-top:1px solid var(--divider);font-size:12px;color:var(--main-text-muted)}
.mp-value{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--main-border);border-radius:var(--radius-lg);background:var(--main-card)}
.mp-value-row{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.mp-good{color:var(--success-text)}
.mp-value-note,.mp-value-empty{font-size:12px;color:var(--main-text-muted)}
.mp-value-note.is-warn{color:var(--warning-text);font-weight:700}
.mp-rev-row{display:flex;gap:12px;font-size:13px}
.mp-rev-k{flex:0 0 130px;font-weight:700;color:var(--main-text-muted)}
.mp-foot-gap{flex:1}
/* Member detail (canvas board 4). Cards reuse .mem-side-card. */
.mem-att-dot.is-ok{background:var(--success)}
.mem-att-dot.is-muted{background:var(--main-text-muted)}
.md-drow{cursor:pointer}
.md-drow:hover{background:var(--main-card-hover)}
.md-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.md-av{width:48px;height:48px;font-size:15px}
.md-head-txt{min-width:0}
.md-name{font-family:'Exo 2',sans-serif;font-size:20px;font-weight:800}
.md-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--main-text-muted)}
.md-acts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--divider)}
.md-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:12px}
.md-card{margin-bottom:12px}
.md-grid .md-card{margin-bottom:0}
.md-line{display:flex;flex-direction:column;gap:6px}
.md-line-top{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.md-meter{display:flex;gap:2px;height:8px;border-radius:var(--radius-full);background:var(--main-bg-sunk);overflow:hidden}
.md-seg{height:100%}
.md-seg.is-used{background:var(--purple)}
.md-seg.is-cycle{background:var(--purple-border)}
.md-seg.is-roll{background:var(--warning-light)}
.md-legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--main-text-muted)}
.md-roll{font-weight:700;color:var(--warning-text)}
.md-big{font-family:'Exo 2',sans-serif;font-size:28px;font-weight:800}
.md-expire{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:var(--radius-md);background:var(--warning-dim);color:var(--warning-text-strong);font-size:12px;font-weight:700}
.md-next{padding:9px 12px;border-radius:var(--radius-md);font-size:12.5px;font-weight:700}
.md-next.is-purple{background:var(--purple-dim);color:var(--purple)}
.md-next.is-info{background:var(--info-dim);color:var(--info-text)}
.md-next.is-warn{background:var(--warning-dim);color:var(--warning-text-strong)}
.md-next.is-bad{background:var(--danger-dim);color:var(--danger-text)}
.md-tl{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--main-border);font-size:13px}
.md-tl .mem-att-dot{margin-top:0}
.md-tl-date{flex:0 0 96px;color:var(--main-text-muted)}
.md-tl-what{flex:1;min-width:0}
.md-tl-amt{font-weight:700;white-space:nowrap}
/* Change plan at the next bill (phase 4b). */
.md-pending{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px;padding:10px 12px;border-radius:var(--radius-md);background:var(--info-dim);color:var(--info-text);font-size:12.5px}
.mem-switch{margin-top:3px;font-size:11.5px;font-weight:700;color:var(--info-text)}
.cp-intro{margin:0 0 14px;font-size:13px;color:var(--main-text-muted)}
.cp-list{display:flex;flex-direction:column;gap:8px}
.cp-opt{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--main-input-border);border-radius:var(--radius-md);cursor:pointer}
.cp-opt:has(input:checked){border-color:var(--purple);background:var(--purple-dim)}
.cp-opt input{margin-top:4px}
.cp-opt-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.cp-opt-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cp-opt-price{font-weight:700;white-space:nowrap}
.cp-opt-perks{font-size:12px;color:var(--main-text-muted)}
.cp-when{margin:0 0 12px}
.cp-quote{margin-top:14px;padding:12px 14px;border:1px solid var(--main-border);border-radius:var(--radius-md);background:var(--main-card-hover);font-size:13px}
.cp-q-row{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.cp-q-total{margin-top:6px;padding-top:8px;border-top:1px solid var(--divider);font-size:14px}
.cp-q-note{margin-top:8px;font-size:12px;color:var(--main-text-muted)}
/* Send Card Update Link dialog. */
.cl-row{display:flex;gap:12px;font-size:13px}
.cl-row.is-off{color:var(--main-text-muted)}
.cl-k{flex:0 0 60px;font-weight:700}
/* Lifetime value line on the member detail. */
.md-life{display:flex;flex-direction:column;gap:3px;padding-top:10px;border-top:1px solid var(--divider)}
.md-life.is-own{padding-top:0;border-top:none}
.md-life-k{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted)}
.md-life-v{font-size:13px}
@container memb (max-width:1099px){
  .mem-sum{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mem-hero{grid-column:1 / -1}
}
@container memb (max-width:719px){
  .mem-sum{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .mem-sum .txn-tile{min-height:76px;padding:10px 12px}
  .mem-search{flex:1 1 100%}
  .mem-main .mem-t{display:none}
  .mem-main .mem-list{display:block}
}
.list-cap-note{margin:0 0 8px;font-size:12px;color:var(--main-text-muted)}
.pos-quick-btn.is-empty .pos-quick-sub{color:var(--warning-text)}
.pos-nav-count{flex-shrink:0;min-width:20px;padding:1px 7px;border-radius:999px;background:var(--danger-dim);color:var(--danger-text);font-size:11px;font-weight:700;line-height:16px;text-align:center}
/* Back to Point of Sale, on every Payments screen but the register (2026-10-09). */
.pay-back{display:inline-flex;align-items:center;gap:4px;margin:0 0 14px;padding:4px 0;background:none;border:none;font:inherit;font-size:13px;font-weight:700;color:var(--purple);cursor:pointer}
.pay-back svg{width:14px;height:14px}
.pay-head{display:flex;align-items:center;gap:8px;margin:0 0 14px}
.pay-head .pay-back{margin:0}
.pay-crumb-sep{font-size:14px;color:var(--main-text-muted)}
.pay-crumb{margin:0;font-family:'Exo 2',sans-serif;font-size:17px;font-weight:800;color:var(--main-text)}
.pay-back:hover{text-decoration:underline}
.pay-back:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:var(--radius-sm)}
.pos-quick-txt{min-width:0}
.pos-quick-title{display:block;font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;color:var(--main-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pos-quick-sub{display:block;font-size:11px;color:var(--main-text-muted);margin-top:1px}
.pos-item-add input{flex:1;background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);
  color:var(--main-text);padding:8px 11px;font-family:Lato,sans-serif;font-size:13px;outline:none}
.pos-item-add input:focus{border-color:var(--purple)}
/* Checkout card fields and their small caps labels (2026-10-09: were inline,
   in two token families). One look for every input on the card. */
.pos-mini-lbl{display:block;margin-bottom:4px;font-size:11px;font-weight:700;color:var(--main-text-muted);text-transform:uppercase;letter-spacing:.06em}
.pos-inp{width:100%;background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);color:var(--main-text);padding:9px 12px;font-family:Lato,sans-serif;font-size:14px;outline:none}
.pos-inp:focus{border-color:var(--purple)}
.pos-inp-grow{flex:1;width:auto;min-width:0}
.pos-inp-code{text-transform:uppercase}
.pos-inp-tip{width:150px}
.pos-inp-notes{margin-top:6px;resize:vertical}
.pos-inp-reward{width:80px;padding:3px 7px;font-size:12px}
.pos-coupon-applied{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;background:var(--success-dim);border:1px solid color-mix(in srgb,var(--success-light) 30%,transparent);border-radius:var(--radius)}
.pos-item-add .price-f{width:90px;flex:none}
.pos-line{display:flex;align-items:center;justify-content:space-between;
  padding:7px 0;border-bottom:1px solid var(--main-border)}
.pos-line:last-child{border-bottom:none}
.pos-line-desc{font-size:15px;font-weight:700;color:var(--main-text)}
.pos-line-price{font-size:15px;font-weight:700;color:var(--main-text)}
.pos-line-rm{background:none;border:none;color:var(--danger-light);cursor:pointer;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:4px;transition:opacity .15s}
.pos-line-rm:hover{opacity:.7}
/* A cart line with its add-ons or package contents under it (2026-10-09):
   the group carries the divider, the sub rows line their amounts up with
   the price above (the remove button is 28px plus a 10px gap). */
.pos-line-grp{border-bottom:1px solid var(--main-border)}
.pos-line-grp:last-child{border-bottom:none}
.pos-line-grp>.pos-line{border-bottom:none}
.pos-line-sub{display:flex;justify-content:space-between;gap:10px;padding:0 38px 6px 10px;font-size:12px;color:var(--main-text-muted)}
.pos-svc-addons{margin-bottom:8px}
.pos-addon-opt{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px;color:var(--main-text);cursor:pointer}
.pos-addon-opt input{width:auto;margin:0}
.pos-addon-nm{flex:1;min-width:0}
.pos-addon-pr{color:var(--main-text-muted)}
.pos-addon-total{margin-top:4px;font-size:12px;font-weight:700;color:var(--main-text)}
.pos-addon-total:empty{display:none}
#pos-addon-rows .pos-tr{padding-left:10px}
.pos-tr.pos-tr-sep{border-top:1px solid var(--main-border);margin-top:3px;padding-top:6px}
.pos-line-rm svg{width:18px;height:18px}
.pos-totals{border-top:1px solid var(--main-border);padding-top:12px;margin-top:4px}
.pos-tr{display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:13px;color:var(--main-text-muted)}
/* The card fee quoted under a total when it depends on the card's type (145 feeConditionalLine). */
.fee-cond-line{display:block;padding:4px 0 0;font-size:12px;line-height:1.4;color:var(--main-text-muted)}
.pos-tr.grand{font-family:'Exo 2',sans-serif;font-size:18px;font-weight:800;color:var(--main-text);
  padding-top:10px;border-top:1px solid var(--border);margin-top:6px}
.tip-row{display:flex;gap:5px;margin-top:7px}
.tip-btn{flex:1;padding:7px 4px;border-radius:var(--radius);background:var(--main-bg);
  border:1px solid var(--border);color:var(--text-muted);font-family:Lato,sans-serif;
  font-size:11px;font-weight:600;cursor:pointer;transition:all .18s;text-align:center}
.tip-btn:hover{border-color:var(--purple-border);color:var(--text)}
.tip-btn.active{background:var(--purple-dim);color:var(--purple-light);border-color:var(--purple-border)}

/* SETTINGS */
.s-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:18px;box-shadow:0 1px 6px rgba(107,33,234,.06)}
.s-card.full{grid-column:1/-1}
.s-card-title{font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;margin-bottom:14px;color:var(--main-text);
  display:flex;align-items:center;gap:8px}
.s-card-title svg{width:14px;height:14px;color:var(--orange)}
/* Profile and Branding (2026-10-20): one card, side-label sections. Title and
   one line on the left, a six-column field grid on the right. Stacks below 860. */
.pf-card{padding:0}
.pf-sec{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;padding:22px 24px;border-top:1px solid var(--main-border)}
.pf-sec:first-child{border-top:0}
.pf-title{font-family:'Exo 2',sans-serif;font-weight:700;font-size:14px;color:var(--main-text);margin:3px 0 4px}
.pf-desc{margin:0;color:var(--main-text-muted);font-size:12.5px;line-height:1.5}
.pf-fields{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 16px;max-width:720px}
.pf-fields>.form-group{margin:0;min-width:0;display:flex;flex-direction:column;gap:5px}
.pf-c1{grid-column:span 1}.pf-c2{grid-column:span 2}.pf-c3{grid-column:span 3}.pf-c4{grid-column:span 4}.pf-c6{grid-column:span 6}
.pf-card .form-group label,.pf-lbl{display:block;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted);margin:0}
.pf-card .form-group textarea{min-height:72px}
.pf-help{font-size:12px;color:var(--main-text-muted);line-height:1.45}
.pf-label-row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.pf-count{font-size:11px;color:var(--text-dim);font-variant-numeric:tabular-nums}
/* Logo and Color: one column of same-width controls, the live preview beside it. */
.pf-brand-ctl{display:flex;flex-direction:column;gap:18px;min-width:0}
.pf-stack{display:flex;flex-direction:column;gap:8px;min-width:0}
.pf-acts{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pf-acts-end{margin-left:auto}
.pf-logo{height:64px;border:1px solid var(--main-border);border-radius:var(--radius);background:var(--main-bg);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:6px}
#bi-logo-status:empty{display:none}
.pf-link{background:none;border:0;padding:0;font-family:Lato,sans-serif;font-size:12px;font-weight:700;color:var(--purple);cursor:pointer}
.pf-link:hover{text-decoration:underline}
.pf-link-muted{color:var(--main-text-muted)}
.pf-color-field{display:flex;align-items:center;border:1px solid var(--main-border);border-radius:var(--radius);background:var(--main-input);padding:4px}
.pf-color-field:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-dim)}
.pf-color-field input[type="color"]{width:30px;height:28px;flex:none;border:0;padding:0;background:none;border-radius:var(--radius-sm);cursor:pointer}
.pf-color-field input[type="text"]{border:0;box-shadow:none;background:transparent;padding:6px 8px;font-family:Menlo,Monaco,monospace;font-size:13px}
.pf-color-field input[type="text"]:focus{box-shadow:none}
.pf-chip{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:var(--radius-full)}
.pf-chip-ok{background:var(--success-dim);color:var(--success-text)}
.pf-chip-warn{background:var(--warning-dim);color:var(--warning-text)}
.pf-brand-pv .pf-chip{align-self:flex-start}
.pf-pv-card{flex:1;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.pf-pv-logo{display:flex;height:30px}
.pf-pv-logo img{max-height:100%;max-width:160px;object-fit:contain}
.pf-pv-head{font-family:'Exo 2',sans-serif;font-size:13px;color:var(--purple)}
.pf-pv-when{font-size:12px;color:var(--main-text-muted)}
.pf-pv-btn{align-self:flex-start;background:var(--purple);color:#fff;border-radius:var(--radius-sm);padding:7px 14px;font-weight:700;font-size:12px}
/* Hours and Scheduling (2026-10-20) uses the same sections. */
.pf-body{display:flex;flex-direction:column;gap:12px;max-width:720px;min-width:0}
.pf-body>.form-group{margin:0}
.pf-tz{max-width:320px}
.pf-head-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pf-head-row .pf-count{font-size:12px;color:var(--main-text-muted)}
.pf-week .bh-row{padding:4px 0}
.bh-closed{display:none;font-size:12px;font-weight:700;color:var(--main-text-muted);background:var(--main-bg);border-radius:var(--radius-full);padding:4px 12px}
.bh-row.is-closed .bh-times{display:none}
.bh-row.is-closed .bh-closed{display:inline-block}
.bh-times{display:inline-flex;align-items:center;gap:9px}
.pf-rules{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) 40px;column-gap:12px;align-items:center}
.pf-rule-h{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted);padding-bottom:6px}
.pf-rule-c{padding:8px 0;border-top:1px solid var(--main-border);font-size:13px;color:var(--main-text);font-variant-numeric:tabular-nums;min-height:38px;display:flex;align-items:center}
.pf-rule-none{grid-column:1/-1;color:var(--main-text-muted);font-size:12.5px}
.pf-rule-end{justify-content:flex-end}
.pf-rules-add{border-top:1px solid var(--main-border);padding-top:10px;margin-top:-12px}
.pf-rule-in{display:flex;align-items:center;gap:6px;min-width:0}
.pf-rule-in input{width:80px;min-width:0;background:var(--main-input);border:1px solid var(--main-border);border-radius:var(--radius);color:var(--main-text);padding:7px 10px;font-family:Lato,sans-serif;font-size:13px;outline:none}
.pf-rule-in input:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-dim)}
.pf-unit{font-size:12px;color:var(--main-text-muted)}
.pf-rules-add .pf-rule-end{display:flex}
.pf-toggle-row{display:flex;gap:12px;align-items:flex-start}
.pf-toggle-row .bh-toggle{flex-shrink:0;margin-top:1px}
.pf-toggle-title{display:block;font-size:13px;color:var(--main-text);margin-bottom:2px}
.pf-wrap{container:pfwrap/inline-size}
@container pfwrap (max-width:860px){.pf-sec{grid-template-columns:minmax(0,1fr);gap:14px;padding:18px}.pf-fields{max-width:none}}
@container pfwrap (max-width:520px){.pf-c1,.pf-c2,.pf-c3,.pf-c4{grid-column:span 6}}
.bh-row{display:flex;align-items:center;gap:9px;padding:5px 0}
.bh-label{width:36px;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase}
.bh-toggle{width:38px;height:20px;border-radius:10px;background:var(--border);cursor:pointer;
  position:relative;flex-shrink:0;transition:background .2s}
.bh-toggle.on{background:var(--purple)}
.bh-toggle::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;
  border-radius:50%;background:#fff;transition:left .2s}
.bh-toggle.on::after{left:21px}
.notif-preview-banner{background:var(--purple-dim);border:1px solid var(--purple-border);border-radius:var(--radius);padding:10px 14px;font-size:12px;color:var(--text-muted);margin-bottom:14px}
.notif-preview-subject{font-size:14px;font-weight:600;color:var(--text);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.notif-preview-subject-label{font-size:11px;color:var(--text-muted);font-weight:500;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.5px}
.notif-preview-iframe-wrap{border:1px solid var(--main-border);border-radius:var(--radius);overflow:hidden;background:#fff}
.notif-preview-iframe{width:100%;border:none;display:block;min-height:400px}
.notif-sms-bubble{max-width:340px;padding:12px 14px;background:var(--purple-dim);border:1px solid var(--purple-border);border-radius:14px;border-bottom-left-radius:4px;font-size:14px;line-height:1.45;color:var(--main-text);white-space:pre-wrap;word-break:break-word}
.notif-sms-meta{font-size:11px;color:var(--main-text-muted);margin-top:8px}
.bh-sep{font-size:11px;color:var(--text-muted)}
/* In the appointment modal date/time row, expand time pickers to fill their
   grid cell and match the date input's height. */
#apt-datetime-row .time-pair{width:100%;height:38px}
#apt-datetime-row .time-text{font-size:14px;padding:9px 12px}
#apt-datetime-row .time-clk-btn{width:34px}
#apt-datetime-row .date-pair{width:100%;height:38px}
#apt-datetime-row .date-text{font-size:14px;padding:9px 12px}
#apt-datetime-row .date-clk-btn{width:34px}
/* Free-text time input with a clickable clock-icon picker button.
   The text field accepts loose entry like "9", "9 am", "9:30pm", "21:00";
   on blur the value is normalized and displayed as "9:00 AM". The clock
   button opens the OS-native time picker via showPicker(). */
.time-pair{display:inline-flex;align-items:stretch;border:1px solid var(--border);border-radius:6px;background:var(--bg-input);overflow:hidden;height:30px;width:130px;position:relative}
.time-pair:focus-within{border-color:var(--purple)}
.time-pair.is-disabled{opacity:.45}
.time-text{background:transparent;border:none;color:var(--text);padding:4px 6px 4px 10px;font-size:12px;font-family:Lato,sans-serif;outline:none;width:100%;min-width:0}
.time-text.invalid{color:var(--danger-light)}
.time-text:disabled{cursor:not-allowed}
.time-clk-btn{background:transparent;border:none;border-left:1px solid var(--border);color:var(--text-muted);padding:0 7px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px}
.time-clk-btn:hover:not(:disabled){color:var(--text);background:rgba(255,255,255,.04)}
.time-clk-btn:disabled{cursor:not-allowed;opacity:.5}
/* Custom time picker popover (hour / minute / AM-PM columns + OK button). */
.time-pop{position:fixed;z-index:var(--z-picker);background:var(--main-card);border:1px solid var(--main-border);
  border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:8px 8px 10px;width:208px;
  font-family:Lato,sans-serif;color:var(--main-text)}
.tp-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;height:200px}
.tp-col{overflow-y:auto;text-align:center;scrollbar-width:thin}
.tp-col::-webkit-scrollbar{width:5px}
.tp-col::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:3px}
.tp-opt{padding:8px 6px;font-size:14px;color:var(--main-text);cursor:pointer;border-radius:6px;
  margin:1px 4px;transition:background .1s}
.tp-opt:hover{background:rgba(107,33,234,.08)}
.tp-opt.selected{background:rgba(107,33,234,.14);color:var(--purple);font-weight:700}
.tp-ok{display:block;margin:8px auto 2px;padding:6px 26px;background:var(--purple);color:#fff;
  border:none;border-radius:6px;font-weight:700;cursor:pointer;font-family:Lato,sans-serif;font-size:13px}
.tp-ok:hover{background:#5b1bd1}
/* Date picker mirrors time picker structure */
.date-pair{display:inline-flex;align-items:stretch;border:1px solid var(--border);border-radius:6px;background:var(--bg-input);overflow:hidden;height:30px;width:160px;position:relative}
.date-pair:focus-within{border-color:var(--purple)}
.date-pair.is-disabled{opacity:.45}
.date-text{background:transparent;border:none;color:var(--text);padding:4px 6px 4px 10px;font-size:12px;font-family:Lato,sans-serif;outline:none;width:100%;min-width:0}
.date-text.invalid{color:var(--danger-light)}
.date-text:disabled{cursor:not-allowed}
.date-clk-btn{background:transparent;border:none;border-left:1px solid var(--border);color:var(--text-muted);padding:0 7px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px}
.date-clk-btn:hover:not(:disabled){color:var(--text);background:rgba(255,255,255,.04)}
.date-clk-btn:disabled{cursor:not-allowed;opacity:.5}
/* Modal form-group context: date picker fills its grid cell and matches
   input height. Mirrors the time picker's modal sizing pattern. */
.form-group .date-pair{width:100%;height:38px}
.form-group .date-text{font-size:13px;padding:9px 12px}
.form-group .date-clk-btn{width:34px}
/* A time picker beside a date picker in a modal grid (reschedule, class
   roster move) matches it. Scoped to the grid rows: the override From/Until
   pickers sit in form-groups inside a flex row and keep their compact size. */
.form-row > .form-group .time-pair,.form-row-3 > .form-group .time-pair{width:100%;height:38px}
.form-row > .form-group .time-text,.form-row-3 > .form-group .time-text{font-size:13px;padding:9px 12px}
.form-row > .form-group .time-clk-btn,.form-row-3 > .form-group .time-clk-btn{width:34px}
/* The pair wrapper owns the border. `.form-group input` otherwise draws a
   second box (and a focus ring) inside it; `.surface-light .form-group input`
   too, hence the pair in the selector to outrank it. */
.form-group .date-pair .date-text,.form-group .time-pair .time-text{border:none;border-radius:0;background:transparent;width:100%}
.form-group .date-pair .date-text:focus,.form-group .time-pair .time-text:focus{box-shadow:none}

.date-pop{position:fixed;z-index:var(--z-picker);background:var(--main-card);border:1px solid var(--main-border);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:10px;width:260px;font-family:Lato,sans-serif;color:var(--main-text)}
.dp-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dp-title{font-size:14px;font-weight:700;color:var(--main-text)}
.dp-nav{background:none;border:none;color:var(--main-text-muted);cursor:pointer;padding:4px 10px;border-radius:6px;font-size:12px}
.dp-nav:hover{background:rgba(107,33,234,.08);color:var(--purple)}
.dp-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.dp-dow > div{text-align:center;font-size:11px;font-weight:700;color:var(--main-text-muted);padding:4px 0;text-transform:uppercase;letter-spacing:.05em}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-day{background:none;border:none;color:var(--main-text);font-size:13px;padding:7px 0;cursor:pointer;border-radius:6px;font-family:Lato,sans-serif;transition:background .1s}
.dp-day:hover:not(:disabled){background:rgba(107,33,234,.08)}
.dp-day-out{color:var(--main-text-muted);opacity:.35;cursor:default}
.dp-day-today{font-weight:700;color:var(--purple)}
.dp-day-selected{background:rgba(107,33,234,.14);color:var(--purple);font-weight:700}
.dp-day-selected.dp-day-today{background:var(--purple);color:#fff}
.dp-foot{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--main-border)}
.dp-foot-btn{background:none;border:none;color:var(--purple);cursor:pointer;font-size:12px;font-weight:700;padding:4px 8px;border-radius:6px;font-family:Lato,sans-serif}
.dp-foot-btn:hover{background:rgba(107,33,234,.08)}

.role-badge{font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;flex-shrink:0}
.role-admin{background:var(--orange-dim);color:var(--orange)}
.role-user{background:var(--purple-dim);color:var(--purple-light)}
.tag-mgr{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
/* Tags manager (Contacts, More, Tags): add row under the list. */
.tag-add-row{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--main-border)}
.tag-add-row .form-group{margin:0}
.tag-manage-item{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:12px;font-weight:600}
.tag-rm{background:none;border:none;cursor:pointer;font-size:14px;color:currentColor;opacity:.6;padding:0;line-height:1;margin-left:2px}
.tag-rm:hover{opacity:1;color:var(--danger-text)}

/* SEARCHABLE SELECT */
.ss-wrap{position:relative}
.ss-inp{width:100%;background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);
  color:var(--main-text);padding:9px 12px;font-family:Lato,sans-serif;font-size:14px;outline:none;transition:border-color .2s}
.ss-inp:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-dim)}
.ss-drop{position:absolute;top:100%;left:0;right:0;background:var(--main-card);
  border:1px solid var(--purple-border);border-radius:var(--radius);margin-top:3px;
  max-height:200px;overflow-y:auto;z-index:400;box-shadow:var(--shadow)}
.ss-opt{padding:9px 12px;font-size:13px;cursor:pointer;transition:background .12s;color:var(--main-text)}
.ss-opt:hover{background:#f5f3ff}
.ss-empty{padding:12px;font-size:13px;color:var(--main-text-muted);text-align:center;background:var(--main-card)}
/* A contact row's email and phone, and the same line under the box once picked. */
.ss-opt-sub{font-size:11px;color:var(--main-text-muted);margin-top:2px}
.ss-picked{font-size:11px;color:var(--main-text-muted);margin-top:4px;padding-left:2px}
.ss-picked:empty{display:none}

/* DRAWER */
#drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:200;
  opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(2px)}
#drawer-overlay.open{opacity:1;pointer-events:all}
:root{--tele-dock-w:680px}
#contact-drawer{position:fixed;top:50%;left:50%;transform:translate(-50%,-48%) scale(.97);width:860px;max-width:95vw;height:85vh;
  background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);z-index:201;
  display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;box-shadow:var(--shadow-lg)}
/* Drawer-content wraps the head, tabs, and body. Without this flex layout,
   drawer-body's flex:1 + overflow-y:auto don't apply because drawer-content
   isn't a flex container. Result: content overflows the drawer with no
   scrollbar, especially noticeable on smaller screens with long lists. */
#drawer-content{display:flex;flex-direction:column;height:100%;min-height:0;flex:1;border-radius:inherit;overflow:hidden}
/* Part wrappers (header, card strip, tab bar) repaint on their own; contents
   keeps their children in drawer-content's flex column as before. */
.dw-part{display:contents}
#contact-drawer.open{opacity:1;pointer-events:all;transform:translate(-50%,-50%) scale(1)}

/* ── Charting during a video visit ───────────────────────────────────────
   While a telehealth visit is running, the contact drawer stops being a
   centered modal and becomes a right-hand dock beside the call, so a provider
   can write notes and SOAP while they talk.

   This REPOSITIONS THE REAL DRAWER rather than rebuilding one inside the call
   overlay. A second copy would duplicate every element id in it, and the SOAP
   editor keys its rich-text bootstrap off element ids: a duplicate is exactly
   how that editor silently saved blank notes once before. Reusing the real
   drawer keeps inline edits, the PHI fetch, the tabs and the unsaved-changes
   guard working with no new code.

   The call overlay yields the same width so the two sit side by side rather
   than stacking. Below TELE_DOCK_MIN the dock is pointless (nothing legible
   fits beside a video), so the drawer stays a full-screen modal over the call
   and the audio keeps running underneath. */
/* The call overlay's own layout. This MUST live here and not as an inline
   style on the element: an inline `inset:0` outranks every stylesheet
   selector, so the dock below could never shrink it and the contact panel just
   painted on top of a full-width call. */
#tele-overlay{position:fixed;inset:0;z-index:var(--z-call);background:var(--main-bg)}
/* During a call the dialog layers move above it, in the same order, so a SOAP
   note, a confirm or an in-modal menu opened from the docked chart is not
   drawn under the video. The docked drawer sits at call + 100; pickers,
   banners, toasts and gates are already above. */
body.tele-call{
  --z-app-overlay:9150;
  --z-app-modal:9200;
  --z-modal:9250;
  --z-modal-2:9300;
  --z-modal-3:9350;
  --z-modal-pop:9400;
  --z-float:9450;
}
/* Yield width only while the panel is actually OPEN. Gating this on
   body.tele-call alone would leave a dead column beside the video whenever the
   provider closed the panel mid-visit. */
body.tele-call.tele-chart-open #tele-overlay{right:var(--tele-dock-w)}
body.tele-call #contact-drawer{
  top:0;left:auto;right:0;bottom:0;
  width:var(--tele-dock-w);max-width:none;height:100vh;
  border-radius:0;border-top:0;border-right:0;border-bottom:0;
  /* Above the call overlay (12000) so the dock is never clipped by it. */
  z-index:calc(var(--z-call) + 100);
  transform:translateX(12px)}
body.tele-call #contact-drawer.open{transform:translateX(0)}
/* No dimming during a call: the video beside it must stay clearly visible. */
body.tele-call #drawer-overlay{display:none}

@media (max-width:1280px){
  /* Too narrow to dock. Fall back to the normal centered modal ON TOP of the
     call; the visit keeps running behind it. */
  body.tele-call.tele-chart-open #tele-overlay{right:0}
  body.tele-call #contact-drawer{
    top:50%;left:50%;right:auto;bottom:auto;
    width:860px;max-width:95vw;height:85vh;
    border:1px solid var(--main-border);border-radius:var(--radius-lg);
    transform:translate(-50%,-48%) scale(.97)}
  body.tele-call #contact-drawer.open{transform:translate(-50%,-50%) scale(1)}
  body.tele-call #drawer-overlay{display:block}
}
/* Telehealth start modal, device check and call overlay (164). Classes, not
   inline styles, so the state toggles below can be plain class changes. */
.tele-line{font-size:13px;color:var(--main-text-muted);margin-bottom:10px}
.tele-line.is-live{color:var(--main-text)}
.tele-rem{font-size:12px;color:var(--main-text-muted);margin-bottom:14px}
.tele-rem b{color:var(--main-text)}
.tele-over{font-size:12px;color:var(--warning-text);margin-bottom:12px}
.tele-help{font-size:13px;color:var(--main-text);line-height:1.6}
.tele-intro{font-size:13px;color:var(--main-text-muted);margin-bottom:12px}
.tele-cam-note{font-size:12px;color:var(--main-text-muted);margin-top:8px}
.tele-cam-note.is-bad{color:var(--danger)}
.tele-check-frame{position:relative;background:var(--main-bg);border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;max-height:260px}
.tele-check-vid{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.tele-mic{margin-top:14px}
.tele-mic-label{font-size:12px;color:var(--main-text-muted);margin-bottom:6px}
.tele-meter{height:8px;background:var(--main-bg);border-radius:var(--radius-full);overflow:hidden}
.tele-meter-fill{height:100%;width:0%;background:var(--purple);border-radius:var(--radius-full);transition:width .1s}
.tele-hint{font-size:12px;color:var(--main-text-muted);margin-top:6px}
.tele-hint.is-ok{color:var(--main-text)}
.tele-ov{position:absolute;inset:0;display:flex;flex-direction:column}
.tele-stage{flex:1;position:relative;min-height:0}
.tele-remote{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--main-bg)}
.tele-waiting{position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;color:var(--main-text-muted);font-size:15px}
.tele-status{font-size:13px;color:var(--main-text-muted)}
.tele-local{position:absolute;right:16px;bottom:16px;width:180px;max-width:28%;border-radius:var(--radius);background:var(--main-bg)}
.tele-bar{display:flex;gap:10px;justify-content:center;padding:14px;background:var(--main-card);border-top:1px solid var(--divider)}
/* Contact drawer hero (2026-09-25). Same gradient recipe as the dashboard's
   .dh-next. The circles live on .dwh-bg, which clips them, so the hero itself
   can stay overflow:visible and the ⋯ menu can hang below it. */
.dwh{position:relative;z-index:3;flex-shrink:0;padding:16px 20px 14px;color:var(--sb-text-strong);
  background:linear-gradient(135deg,var(--purple),var(--purple-active))}
.dwh-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.dwh-bg::before,.dwh-bg::after{content:'';position:absolute;width:230px;height:230px;border-radius:50%;background:var(--dash-hero-circle)}
.dwh-bg::after{top:-110px;right:-80px}
.dwh-bg::before{top:-150px;right:40px;opacity:.6}
.dwh-top{position:relative;display:flex;gap:14px;align-items:flex-start}
.dwh-av{width:52px;height:52px;border-radius:14px;background:var(--dash-hero-tile);display:flex;align-items:center;justify-content:center;
  font-family:'Exo 2',sans-serif;font-weight:800;font-size:19px;flex-shrink:0}
.dwh-who{flex:1;min-width:0}
.dwh-name{font-family:'Exo 2',sans-serif;font-weight:800;font-size:21px;line-height:1.15;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dwh-name-txt{min-width:0;overflow-wrap:anywhere}
.dwh-pill{display:inline-flex;align-items:center;gap:5px;font-family:Lato,sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.05em;
  padding:2px 8px;border-radius:var(--radius-full);background:var(--dash-hero-tile)}
.dwh-dot{width:7px;height:7px;border-radius:50%;background:var(--success-light)}
.dwh-dot.is-inactive{background:var(--text-disabled)}
.dwh-meta{font-size:12.5px;opacity:.88;margin-top:3px}
.dwh-reach{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.dwh-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 10px;border-radius:var(--radius-full);background:var(--dash-hero-tile);
  color:var(--sb-text-strong);font-size:12.5px;text-decoration:none;white-space:nowrap}
.dwh-chip span{overflow:hidden;text-overflow:ellipsis}
.dwh-chip:hover{background:var(--sb-active-sheen)}
.dwh-chip svg{width:13px;height:13px;flex-shrink:0}
.dwh-ctl{position:relative;display:flex;gap:6px;flex-shrink:0}
.dwh-ib{width:32px;height:32px;border:none;border-radius:9px;background:var(--dash-hero-tile);color:var(--sb-text-strong);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.dwh-ib:hover{background:var(--sb-active-sheen)}
.dwh-ib svg{width:16px;height:16px}
.dwh-qa{position:relative;display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.dwh-qa-btn{display:inline-flex;align-items:center;gap:6px;border:none;border-radius:var(--radius-md);padding:7px 12px;font-family:inherit;
  font-size:12.5px;font-weight:800;cursor:pointer;background:var(--dash-hero-tile);color:var(--sb-text-strong)}
.dwh-qa-btn:hover{background:var(--sb-active-sheen)}
.dwh-qa-btn.is-primary{background:var(--main-card);color:var(--purple);box-shadow:var(--shadow-sm)}
.dwh-qa-btn.is-primary:hover{background:var(--main-card-hover)}
/* The one money action on the header (Take Payment), orange per the design language. */
.dwh-qa-btn.is-commit{background:var(--orange);color:var(--sb-text-strong)}
.dwh-qa-btn.is-commit:hover{background:var(--orange-hover)}
.dwh-qa-btn svg{width:14px;height:14px}
.dwh-qa-btn:focus-visible,.dwh-ib:focus-visible,.dwh-chip:focus-visible{outline:2px solid var(--sb-text-strong);outline-offset:2px}
.dwh-menu{position:absolute;top:38px;right:0;z-index:60;min-width:230px;padding:6px;background:var(--main-card);color:var(--main-text);
  border:1px solid var(--main-border);border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.dwh-menu-item{display:block;width:100%;text-align:left;background:none;border:none;padding:8px 10px;border-radius:var(--radius-sm);
  font-family:inherit;font-size:13px;color:var(--main-text);cursor:pointer}
.dwh-menu-item:hover{background:var(--main-card-hover)}
.dwh-menu-item small{display:block;font-size:11px;color:var(--main-text-muted)}
.dwh-menu-item.is-danger{color:var(--danger-text)}
.dwh-menu-sep{height:1px;background:var(--main-border);margin:4px 0}
/* Appointment overview (177, 2026-09-29): an existing visit in the appointment
   modal. The hero reuses the drawer's .dwh recipe so the two read as one
   product. The modal head is hidden (the hero carries the close button, the
   title stays for aria-labelledby); the shell is a column whose header parts
   stay put while the body scrolls. Hidden until mounted so the plain form
   never flashes; the footer is the save bar and shows only when dirty. */
.modal.modal-appt{max-width:860px}
/* Every existing visit opens at one height (Patrick, 2026-10-01); the cards
   scroll inside #aov-scroll, so a short visit shows more page, not a smaller box. */
.modal.apt-ov{overflow:hidden;height:min(90vh,1000px)}
.apt-ov .modal-head{display:none}
.apt-mode-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:14px}
.apt-ov .modal-body{padding:0;display:flex;flex-direction:column;overflow:hidden}
.apt-ov:not(.is-mounted) #apt-shell{visibility:hidden}
.apt-ov:not(.is-dirty) .modal-foot{display:none}
.apt-ov #apt-shell{display:flex;flex-direction:column;flex:1;min-height:0}
.apt-ov #apt-hero,.apt-ov #apt-safety,.apt-ov #apt-steps{flex-shrink:0}
.apt-ov #apt-body{flex:1;min-height:0;overflow-y:auto;padding:20px}
.aov-tile{flex-direction:column;gap:0;line-height:1.05}
.aov-tile-mo{font-family:Lato,sans-serif;font-size:10.5px;font-weight:900;letter-spacing:.08em}
.aov-tile-dn{font-size:22px}
.aov-tile-dw{font-family:Lato,sans-serif;font-size:10.5px;font-weight:700;opacity:.85}
.aov-link{background:none;border:none;padding:0;font:inherit;font-weight:900;color:var(--sb-text-strong);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.apt-ov .modal-foot{border-top:2px solid var(--orange);background:var(--main-card)}
.aov-savebar{display:flex;align-items:center;gap:8px;width:100%}
.aov-sb-what{flex:1;min-width:0;font-size:12.5px;color:var(--main-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aov-sb-what b{color:var(--main-text)}
.apt-ov.is-mounted #apt-body{display:none}
.apt-ov #aov-scroll{flex:1;min-height:0;overflow-y:auto;padding:16px 20px;background:var(--main-bg)}
/* Stepper: read-only, the hero's buttons move it. */
.aov-steps{display:flex;align-items:center;gap:0;padding:10px 20px;background:var(--main-bg);border-bottom:1px solid var(--main-border);overflow-x:auto;scrollbar-width:none}
.aov-st{display:flex;align-items:center;gap:7px;flex-shrink:0;font-size:12px;font-weight:800;color:var(--main-text-muted);white-space:nowrap}
.aov-st-c{width:22px;height:22px;border-radius:50%;border:2px solid var(--main-input-border);background:var(--main-card);display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.aov-st-l small{display:block;font-weight:400;font-size:10.5px;color:var(--main-text-muted)}
.aov-st.is-done{color:var(--main-text)}
.aov-st.is-done .aov-st-c{background:var(--purple);border-color:var(--purple);color:var(--sb-text-strong)}
.aov-st.is-now{color:var(--purple)}
.aov-st.is-now .aov-st-c{border-color:var(--purple);box-shadow:var(--focus-ring)}
.aov-bar{flex:1;min-width:14px;height:2px;margin:0 8px;background:var(--divider)}
.aov-bar.is-done{background:var(--purple)}
.aov-end{font-size:12.5px;font-weight:800;padding:3px 10px;border-radius:var(--radius-full)}
.aov-end.is-bad{background:var(--danger-dim);color:var(--danger-text)}
.aov-end.is-warn{background:var(--warning-dim);color:var(--warning-text)}
/* Cards: auto-fit, so the 860 modal gets two columns and the 680 telehealth
   dock or a phone gets one without a breakpoint. */
/* Cards in one row share a height (Patrick, 2026-10-01). In the Payment
   column the last visible card takes the slack, so its bottom edge meets the
   Visit card's. */
.aov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;align-items:stretch}
.dov-ico.is-money{background:var(--success-dim);color:var(--success-text)}
.dov-ico.is-note{background:var(--warning-dim);color:var(--warning-text)}
.aov-row{display:flex;align-items:center;gap:10px;padding:7px 8px;margin:0 -8px;border-top:1px solid var(--main-border);border-radius:var(--radius-md);font-size:13px}
.aov-row:first-of-type{border-top:none}
.aov-k{flex-shrink:0;color:var(--main-text-muted)}
.aov-v{flex:1;min-width:0;text-align:right;font-weight:700;color:var(--main-text);overflow-wrap:anywhere}
.aov-pen{display:none;flex-shrink:0;width:13px;height:13px;color:var(--purple);opacity:0}
.aov-pen svg{width:13px;height:13px}
.aov-row.is-notes{border-top:none;align-items:flex-start}
.aov-note{flex:1;min-width:0;padding:10px 12px;font-size:13px;line-height:1.45;color:var(--main-text);background:var(--warning-dim);border-radius:var(--radius);white-space:pre-wrap;overflow-wrap:anywhere}
.aov-note.is-empty{background:none;padding:0;color:var(--main-text-muted)}
.aov-edit{margin:4px 0 8px;padding:10px 12px;background:var(--main-card-hover);border:1px solid var(--purple-border);border-radius:var(--radius-md)}
.aov-edit .form-group:last-child{margin-bottom:0}
.aov-edit.is-simple>.form-group>label:first-child{display:none}
.aov-edit #apt-notes-wrap textarea{min-height:80px}
.aov-row.is-editable{cursor:pointer}
.aov-row.is-editable:hover,.aov-row.is-editable:focus-visible{background:var(--main-card-hover);outline:none}
.aov-row.is-editable .aov-pen{display:inline-flex}
.aov-row.is-editable:hover .aov-pen,.aov-row.is-editable:focus-visible .aov-pen{opacity:.75}
.aov-row.is-open{background:var(--purple-dim)}
.aov-row.is-open .aov-pen{opacity:1}
.aov-row.is-changed .aov-v,.aov-row.is-changed .aov-note{box-shadow:inset 3px 0 0 var(--orange);padding-left:8px}
.aov-total{display:flex;justify-content:space-between;gap:10px;margin-top:4px;padding-top:9px;border-top:2px solid var(--divider);font-size:13px;font-weight:800;color:var(--main-text)}
#aov-warn-slot .warn-box{margin:10px 0 0}
.aov-hist{display:flex;flex-direction:column;gap:2px;padding:7px 0;border-top:1px solid var(--main-border);font-size:13px}
.aov-hist:first-of-type{border-top:none;padding-top:0}
.aov-hist-t{font-weight:700;color:var(--main-text)}
.aov-hist-s{font-size:12px;color:var(--main-text-muted)}
.aov-hist .dov-link{align-self:flex-start}
.aov-bal{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--main-text-muted)}
.aov-bal-v{font-family:'Exo 2',sans-serif;font-weight:800;font-size:22px;color:var(--main-text)}
.aov-kv{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--main-border);font-size:13px;color:var(--main-text-muted)}
.aov-kv span:last-child{font-weight:700;color:var(--main-text)}
.aov-payrow{display:flex;align-items:center;gap:10px;width:100%;padding:9px 0;background:none;border:none;border-top:1px solid var(--main-border);font-family:inherit;text-align:left;cursor:pointer}
.aov-payrow:first-child{border-top:none}
.aov-payrow:hover{background:var(--main-card-hover)}
.aov-payrow-main{flex:1;min-width:0;display:flex;flex-direction:column}
.aov-payrow-t{font-size:13px;font-weight:700;color:var(--main-text)}
.aov-payrow-s{font-size:12px;color:var(--main-text-muted)}
.aov-payrows{display:flex;flex-direction:column}
.aov-paystat{flex-shrink:0;font-size:10.5px;font-weight:800;letter-spacing:.04em;padding:3px 8px;border-radius:var(--radius-sm)}
.aov-paystat.is-good{background:var(--success-dim);color:var(--success-text)}
.aov-paystat.is-warn{background:var(--warning-dim);color:var(--warning-text)}
.aov-paystat.is-bad{background:var(--danger-dim);color:var(--danger-text)}
.aov-paystat.is-muted{background:var(--main-bg);color:var(--main-text-muted)}
/* The calendar tile's compact payment pill (_paymentPillHTML compact). */
.cal-paypill{font-size:10px;font-weight:700;padding:1px 4px;border-radius:6px;line-height:1.2;flex-shrink:0;margin-left:6px;margin-right:4px}
.cal-staff-init{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;font-size:9px;font-weight:700;color:var(--on-accent)}
.cal-paypill.is-paid{background:var(--success-light);color:var(--on-success)}
.cal-paypill.is-partial{background:var(--warning-light);color:var(--warning-text-strong)}
@media (max-width:560px){.aov-st-l{display:none}.aov-st.is-now .aov-st-l{display:inline}}
/* New booking (177 _apptNbMount): numbered sections on the left, a Summary
   column on the right holding price, time and the conflict checks. Hidden until
   mounted so the plain form never flashes. One column under 820px. */
.apt-nb:not(.is-mounted) .modal-body{visibility:hidden}
.apt-nb .modal-body{padding:0;overflow:hidden;display:flex}
.aov-nb{display:grid;grid-template-columns:minmax(0,1fr) 300px;flex:1;min-height:0;width:100%}
.aov-nb-form{min-height:0;overflow-y:auto;padding:16px 20px 20px}
.aov-nb-side{min-height:0;overflow-y:auto;padding:16px;background:var(--main-bg);border-left:1px solid var(--main-border)}
@media (max-width:820px){
  .apt-nb .modal-body{overflow-y:auto;display:block}
  .aov-nb{grid-template-columns:1fr}
  .aov-nb-form,.aov-nb-side{overflow:visible}
  .aov-nb-side{border-left:none;border-top:1px solid var(--main-border)}
}
.apt-nb .apt-mode-tabs{display:inline-flex;gap:2px;padding:3px;margin-bottom:16px;border:1px solid var(--main-border);border-radius:var(--radius-md);background:var(--main-bg)}
.apt-nb .apt-mode-tabs .svc-detail-tab{border:none;border-radius:6px;padding:6px 12px;font-size:12.5px;font-weight:800;margin:0}
.apt-nb .apt-mode-tabs .svc-detail-tab.active{background:var(--main-card);color:var(--purple);box-shadow:var(--shadow-sm)}
.aov-sec{margin-bottom:6px}
.aov-sec-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.aov-num{width:22px;height:22px;border-radius:7px;background:var(--purple-dim);color:var(--purple);display:inline-flex;align-items:center;justify-content:center;font-family:'Exo 2',sans-serif;font-weight:800;font-size:12px}
.aov-sec-t{font-family:'Exo 2',sans-serif;font-weight:700;font-size:14px;color:var(--main-text)}
.aov-more{margin-bottom:16px}
/* A sale's list price, struck through beside what it books at (2026-10-14). */
.aov-was{color:var(--main-text-muted);font-weight:400;margin-right:6px}
#aov-nb-video{margin-bottom:16px}
#aov-nb-video .form-group{margin-bottom:0}
.aov-sum-when{font-family:'Exo 2',sans-serif;font-weight:800;font-size:15px;color:var(--main-text)}
.aov-sum-who{font-size:12px;color:var(--main-text-muted);margin:2px 0 8px}
.aov-sum-line{min-width:0}
.aov-sum-line small{display:block;font-size:11.5px;color:var(--main-text-muted);margin-top:1px}
.aov-past{margin-top:10px;padding:8px 10px;border-radius:var(--radius-md);background:var(--warning-dim);color:var(--warning-text);font-size:12.5px;font-weight:700}
.aov-ok{margin-top:10px;padding:8px 10px;border-radius:var(--radius-md);background:var(--success-dim);color:var(--success-text);font-size:12.5px;font-weight:700}
#aov-nb-checks .warn-box{margin:10px 0 0}
/* Pricing options as cards over the hidden af-variation select. */
.aov-sel-hidden{display:none}
.aov-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.aov-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 11px;border:1px solid var(--main-input-border);border-radius:var(--radius-md);background:var(--main-card);font-family:inherit;text-align:left;cursor:pointer}
.aov-opt:hover{border-color:var(--purple)}
.aov-opt.is-on{border-color:var(--purple);box-shadow:var(--focus-ring)}
.aov-opt:disabled{opacity:.6;cursor:not-allowed}
.aov-opt-t{font-size:13px;font-weight:900;color:var(--main-text)}
.aov-opt-s{font-size:12px;color:var(--main-text-muted)}
/* Secondary "add" action (+ Add another service), the drawer's dashed
   +Allergy / +Alert recipe rather than a solid primary button. */
/* Couples/group buffers per provider (033 _apptGroupBuffersHTML): the name,
   then Before and After side by side, so it holds together in a half-width
   card as well as the full form. */
.apt-gbuf{padding:10px 12px;background:var(--bg-input);border:1px solid var(--main-input-border);border-radius:var(--radius)}
.apt-gbuf-row+.apt-gbuf-row{margin-top:10px;padding-top:10px;border-top:1px solid var(--main-border)}
.apt-gbuf-name{font-size:13px;font-weight:700;color:var(--text);margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apt-gbuf-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.apt-gbuf-f{display:flex;flex-direction:column;gap:3px;margin:0;text-transform:none;letter-spacing:0}
.apt-gbuf-f span{font-size:11px;font-weight:700;color:var(--text-muted)}
.aov-add{margin-top:8px;padding:7px 12px;border:1px dashed var(--purple-border);border-radius:var(--radius-md);background:none;
  font-family:inherit;font-size:12.5px;font-weight:800;color:var(--purple);cursor:pointer}
.aov-add:hover{background:var(--purple-dim);border-color:var(--purple)}
/* Package segments: a rail with one node per child appointment. */
.aov-segs{position:relative;margin-left:6px;padding-left:18px;border-left:2px solid var(--divider)}
.aov-seg{position:relative;display:flex;flex-direction:column;gap:1px;padding:4px 0 10px}
.aov-seg:last-child{padding-bottom:2px}
.aov-seg-dot{position:absolute;left:-25px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--purple);border:2px solid var(--main-card)}
.aov-seg-t{font-size:13px;font-weight:800;color:var(--main-text)}
.aov-seg-s{font-size:12px;color:var(--main-text-muted)}
.aov-seg-note{font-size:11.5px;color:var(--main-text-muted)}
/* New booking day strip and open-time chips: shortcuts over the Date and
   Time boxes, which stay free to type. */
.aov-strip{margin-bottom:12px}
.aov-dp{display:flex;align-items:center;gap:6px;margin:4px 0 8px}
.aov-dp-wk{flex:1;min-width:0;font-size:12.5px;font-weight:800;color:var(--main-text)}
.aov-nav{width:28px;height:28px;border:1px solid var(--main-border);background:var(--main-card);border-radius:var(--radius-md);color:var(--main-text-muted);font-size:16px;line-height:1;cursor:pointer}
.aov-nav:hover{color:var(--purple);border-color:var(--purple-border)}
.aov-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.aov-day{display:flex;flex-direction:column;align-items:center;padding:6px 2px;border:1px solid var(--main-border);border-radius:var(--radius-md);background:var(--main-card);font-family:inherit;cursor:pointer}
.aov-day:hover{border-color:var(--purple-border)}
.aov-day-d{font-size:10px;font-weight:800;letter-spacing:.05em;color:var(--main-text-muted)}
.aov-day-n{font-family:'Exo 2',sans-serif;font-weight:800;font-size:16px;color:var(--main-text)}
.aov-day.is-off,.aov-day.is-past{opacity:.5}
.aov-day.is-on{background:var(--purple);border-color:var(--purple);opacity:1}
.aov-day.is-on .aov-day-d,.aov-day.is-on .aov-day-n{color:var(--sb-text-strong)}
.aov-slots{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.aov-slot{padding:5px 11px;border:1px solid var(--main-input-border);border-radius:var(--radius-full);background:var(--main-card);font-family:inherit;font-size:12px;font-weight:800;color:var(--main-text);cursor:pointer}
.aov-slot:hover{border-color:var(--purple)}
.aov-slot.is-on{background:var(--purple);border-color:var(--purple);color:var(--sb-text-strong)}
.aov-hint{font-size:11.5px;color:var(--main-text-muted);margin-top:6px}
/* Extra service lines pick their provider under Provider and Time here. */
.apt-nb .apt-addl-prov,.apt-ov .apt-addl-prov{display:none}
/* A new booking is always Scheduled (Patrick, 2026-09-29): no Status box. The
   select stays in the DOM so the save still sends it. */
.apt-nb #apt-row-status{display:none}
.drawer-tabs{display:flex;border-bottom:2px solid var(--divider);flex-shrink:0;background:var(--subnav-bar);padding:0 20px;overflow-x:auto;scrollbar-width:none}
.drawer-tabs::-webkit-scrollbar{display:none}
.drawer-tab{padding:9px 14px;font-size:13px;font-weight:600;color:var(--main-text-muted);
  cursor:pointer;border-bottom:2px solid transparent;transition:all .18s;
  background:none;border-top:none;border-left:none;border-right:none;font-family:Lato,sans-serif;white-space:nowrap;flex-shrink:0}
.drawer-tab:hover{color:var(--main-text)}
.drawer-tab.active{color:var(--purple);border-bottom-color:var(--purple)}
.drawer-body{flex:1;overflow-y:auto;padding:18px 20px;min-height:0;-webkit-overflow-scrolling:touch}
.alerts-pop{position:absolute;top:100%;left:0;margin-top:6px;width:300px;max-width:80vw;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);box-shadow:var(--shadow);z-index:60;padding:10px}
.alerts-pop-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.alerts-pop-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--main-text-muted)}
.alerts-pop-row{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:4px;margin-bottom:5px}
.alerts-pop-empty{font-size:12px;color:var(--main-text-muted);padding:6px 2px}
/* Contact drawer safety band (2026-09-25): allergies and alerts named, always
   visible above the tabs. z-index lifts an open popover over the tab bar. */
.dsafe{position:relative;z-index:2;display:flex;flex-direction:column;gap:6px;padding:10px 20px;
  background:var(--main-card);border-bottom:1px solid var(--divider);flex-shrink:0}
/* One row per group; the label column is fixed so every answer starts on the same line. */
.dsafe-row{display:flex;align-items:flex-start;gap:10px;min-width:0}
.dsafe-items{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1;min-width:0;min-height:26px}
.dsafe-lbl{flex:0 0 124px;font-size:10.5px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--main-text-muted);line-height:26px}
.dsafe-chip{position:relative;display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 10px;border:1px solid transparent;
  border-radius:var(--radius-full);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;background:var(--main-bg);color:var(--main-text)}
.dsafe-chip svg{width:12px;height:12px;flex-shrink:0}
.dsafe-chip-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px}
.dsafe-chip.is-severe,.dsafe-chip.is-critical{background:var(--danger-dim);color:var(--danger-text);border-color:var(--danger-light)}
.dsafe-chip.is-moderate,.dsafe-chip.is-warning{background:var(--warning-dim);color:var(--warning-text);border-color:var(--warning-light)}
.dsafe-chip.is-mild,.dsafe-chip.is-info{background:var(--info-dim);color:var(--info-text);border-color:var(--info-dim)}
.dsafe-add{border:1px dashed var(--purple-border);background:none;color:var(--purple);font-family:inherit;font-size:12px;font-weight:700;
  padding:3px 9px;border-radius:var(--radius-full);cursor:pointer}
.dsafe-add:hover{background:var(--purple-dim)}
.dsafe-none{font-size:12px;font-weight:700;color:var(--success-text)}
.dsafe-wait{font-size:12px;color:var(--main-text-muted)}
.dsafe-fail{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--danger-text)}
.dsafe-fail svg{width:14px;height:14px;flex-shrink:0}
.dsafe-retry{border:1px solid var(--danger);background:none;color:var(--danger-text);font-family:inherit;font-size:11.5px;font-weight:700;
  padding:2px 9px;border-radius:var(--radius-full);cursor:pointer}
/* Can Discuss With (175): authorized contacts in the safety band. Purple, not
   a severity color: it is permission, not a warning. */
.dsafe-chip.is-cap{background:var(--purple-dim);color:var(--purple);border-color:var(--purple-border)}
/* Authorized contact detail rows (popover and the Profile card). */
.dcap-row{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px solid var(--main-border)}
.dcap-row:first-child{border-top:none}
.dcap-row.is-inactive{opacity:.6}
.dcap-main{flex:1;min-width:0}
.dcap-name{font-size:13px;font-weight:800;color:var(--main-text)}
.dcap-rel{font-weight:600;color:var(--main-text-muted)}
.dcap-state{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:var(--radius-full);font-size:10px;font-weight:800;letter-spacing:.04em;
  background:var(--main-bg);color:var(--main-text-muted)}
.dcap-scope{font-size:12.5px;color:var(--main-text);margin-top:1px}
.dcap-meta{font-size:12px;color:var(--main-text-muted);overflow-wrap:anywhere}
.dcap-meta a{color:var(--purple);text-decoration:none}
.dcap-notes{font-size:12px;color:var(--main-text-muted);font-style:italic;margin-top:2px}
.dcap-acts{display:flex;gap:6px;flex-shrink:0}
.dcap-revoke{color:var(--danger-text)}
.dcap-sub{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-4px 0 8px;font-size:12px;color:var(--main-text-muted)}
.dcap-history{margin-top:8px}
.dcap-history summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--main-text-muted)}
.dcap-pop-foot{margin-top:8px;padding-top:8px;border-top:1px solid var(--main-border);text-align:right}
/* A popover opened from a chip must not inherit the chip's color, weight or nowrap. */
.dsafe .alerts-pop{color:var(--main-text);font-weight:400;white-space:normal;text-align:left;cursor:default}
/* Contact drawer stat tiles (2026-09-25): five across, each a jump to its tab. */
.dstats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:10px 20px;background:var(--main-bg);
  border-bottom:1px solid var(--divider);flex-shrink:0}
.dstat{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:8px 10px;text-align:left;font-family:inherit;cursor:pointer;
  background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius)}
.dstat:hover{border-color:var(--purple-border)}
.dstat:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.dstat-l{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted)}
.dstat-l svg{width:12px;height:12px;color:var(--purple);flex-shrink:0}
.dstat-v{max-width:100%;margin-top:2px;font-family:'Exo 2',sans-serif;font-weight:700;font-size:14.5px;color:var(--main-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dstat-v.is-muted{font-weight:600;color:var(--main-text-muted)}
.dstat-s{max-width:100%;font-size:11px;color:var(--main-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The 680px telehealth dock and a narrow drawer keep three tiles. The dock
   only exists at 1281px and up (below that the drawer stays a modal). */
@media (min-width:1281px){
  body.tele-call .dstats{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.tele-call .dstat.is-opt{display:none}
}
@media (max-width:760px){
  .dstats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dstat.is-opt{display:none}
}
/* Contact drawer Overview tab (174). Two columns of cards; one below 760px
   and in the 680px telehealth dock. The Up next card is the dashboard's dark
   hero recipe (.dh-total). */
.dov{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:1281px){ body.tele-call .dov{grid-template-columns:minmax(0,1fr)} }
@media (max-width:760px){ .dov{grid-template-columns:minmax(0,1fr)} }
.dov-card{min-width:0;padding:14px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.dov-card.is-span{grid-column:1/-1}
.dov-card-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.dov-card-t{display:flex;align-items:center;gap:8px;font-family:'Exo 2',sans-serif;font-weight:700;font-size:14px;color:var(--main-text)}
.dov-ico{width:26px;height:26px;border-radius:8px;background:var(--purple-dim);color:var(--purple);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.dov-ico svg{width:14px;height:14px}
.dov-links{display:flex;gap:10px}
.dov-link{background:none;border:none;padding:0;font-family:inherit;font-size:12px;font-weight:700;color:var(--purple);cursor:pointer}
.dov-link:hover{text-decoration:underline}
.dov-link.is-danger{color:var(--danger-text)}
/* Calendar quick view (023). The body scrolls when a tall package outgrows the
   viewport: 16px of viewport margin plus the popover's 38px vertical padding. */
#appt-quickview:focus{outline:none}
.aqv{position:fixed;z-index:calc(var(--z-app-overlay) + 200);width:320px;left:-9999px;top:0;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:18px 20px 20px}
.aqv-tail{position:absolute;width:14px;height:14px;background:var(--main-card);transform:rotate(45deg);top:22px}
.aqv-body{max-height:calc(100vh - 54px);overflow-y:auto;overscroll-behavior:contain}
.aqv-head{display:flex;align-items:flex-start;gap:10px}
.aqv-tile{width:44px;height:48px;flex-shrink:0;border-radius:var(--radius-md);background:var(--purple-dim);color:var(--purple);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05}
.aqv-tile-mo{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.aqv-tile-dn{font-size:18px;font-weight:700}
.aqv-tile-dw{font-size:10px;font-weight:600}
.aqv-when{flex:1;min-width:0}
.aqv-time{font-size:17px;font-weight:600;color:var(--main-text);line-height:1.2}
.aqv-pills{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:6px}
.aqv-pill{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:var(--radius-full)}
.aqv-pill.is-paid{background:var(--success-dim);color:var(--success-text)}
.aqv-pill.is-partial{background:var(--warning-dim);color:var(--warning-text-strong)}
.aqv-pill.is-muted{background:var(--main-bg);color:var(--main-text-muted)}
.aqv-icons{display:flex;gap:2px;flex-shrink:0}
.aqv-ib{width:28px;height:28px;padding:0;border:none;background:transparent;border-radius:var(--radius-sm);color:var(--main-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.aqv-ib:hover{background:var(--main-bg);color:var(--main-text)}
.aqv-ib svg{width:16px;height:16px}
.aqv-name{display:inline-flex;align-items:center;gap:4px;margin-top:14px;padding:0;border:none;background:none;font-family:inherit;text-align:left;font-size:18px;font-weight:600;line-height:1.2;color:var(--purple);cursor:pointer}
.aqv-name svg{width:13px;height:13px;opacity:.6}
.aqv-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.aqv-chips:empty{display:none}
.aqv-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:3px 9px;border-radius:var(--radius-full);background:var(--main-bg);font-size:12px;color:var(--main-text-muted);text-decoration:none}
.aqv-chip svg{width:12px;height:12px;flex-shrink:0}
.aqv-chip.is-online{color:var(--purple)}
a.aqv-chip:hover{color:var(--main-text)}
.aqv-sec{margin-top:14px;padding-top:12px;border-top:1px solid var(--divider)}
.aqv-sec-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;font-size:11px;font-weight:600;color:var(--main-text-muted)}
.aqv-svc{font-size:14px;font-weight:600;color:var(--main-text)}
.aqv-sub{font-size:12px;color:var(--main-text-muted);margin-top:2px}
.aqv-sub.is-addon{padding-left:10px}
.aqv-sub.is-note{margin-top:6px}
.aqv-sub.is-lead{margin:0 0 4px}
.aqv-line{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:8px}
.aqv-line-n{font-size:13px;font-weight:600;color:var(--main-text)}
.aqv-line-t{font-size:12px;color:var(--main-text-muted);flex-shrink:0}
.aqv-addons{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.aqv-addon{padding:3px 9px;border-radius:var(--radius-sm);background:var(--main-bg);font-size:12px;color:var(--main-text-muted)}
/* Allergy and alert rows. The severity key picks the tier, the same keys as
   .dsafe-chip.is-* on the overview; the colors are the ones WARNING_SEVERITY
   and ALLERGY_SEVERITY carry. */
.aqv-flags{margin-top:14px}
.aqv-flag{display:flex;align-items:baseline;gap:8px;margin-top:6px;padding:6px 9px;border-left:3px solid var(--aqv-flag-c);border-radius:4px;background:var(--aqv-flag-bg)}
.aqv-flag-k{flex-shrink:0;min-width:50px;font-size:9px;font-weight:700;text-transform:uppercase;color:var(--aqv-flag-c)}
.aqv-flag-v{font-size:13px;font-weight:600;line-height:1.35;color:var(--main-text)}
.aqv-flag-note{font-weight:400;color:var(--main-text-muted)}
.aqv-flag.is-severe,.aqv-flag.is-critical{--aqv-flag-c:var(--danger);--aqv-flag-bg:var(--danger-dim)}
.aqv-flag.is-moderate,.aqv-flag.is-warning{--aqv-flag-c:var(--warning);--aqv-flag-bg:var(--warning-dim)}
.aqv-flag.is-mild,.aqv-flag.is-info{--aqv-flag-c:var(--info);--aqv-flag-bg:var(--info-dim)}
.aqv-actions{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.aqv-qa{display:flex;gap:5px}
.aqv-qa-btn{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:3px;padding:8px 4px;border:1px solid var(--main-border);border-radius:var(--radius);background:transparent;font-family:inherit;font-size:12px;font-weight:600;color:var(--main-text);white-space:nowrap;cursor:pointer}
.aqv-qa-btn:hover{background:var(--main-bg)}
.aqv-qa-btn.is-primary{background:var(--purple);border-color:var(--purple);color:var(--on-accent)}
.aqv-qa-btn.is-primary:hover{background:var(--purple-hover);border-color:var(--purple-hover)}
.aqv-qa-btn svg{width:12px;height:12px;flex-shrink:0}
.aqv-wide{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:9px;border-radius:var(--radius);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
.aqv-wide svg{width:14px;height:14px}
.aqv-wide.is-video{background:transparent;border:1px solid var(--purple);color:var(--purple)}
.aqv-wide.is-video:hover{background:var(--purple-dim)}
.aqv-wide.is-commit{padding:11px;border:none;background:var(--orange);color:var(--on-accent);font-size:15px}
.aqv-wide.is-commit:hover{background:var(--orange-hover)}
.aqv-qa-btn:focus-visible,.aqv-wide:focus-visible,.aqv-ib:focus-visible,.aqv-name:focus-visible,.aqv-chip:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.dov-links.is-split{align-items:center;gap:0}
.dov-links.is-split .dov-link + .dov-link{margin-left:10px;padding-left:10px;border-left:1px solid var(--main-border)}
.dov-empty{font-size:13px;color:var(--main-text-muted)}
.dov-meta{font-size:11.5px;color:var(--main-text-muted);margin-top:4px}
.dov-note{padding:10px 12px;font-size:13px;line-height:1.45;color:var(--main-text);background:var(--warning-dim);border-radius:var(--radius);
  white-space:pre-wrap;overflow-wrap:anywhere;max-height:120px;overflow:hidden}
.dov-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--main-border)}
.dov-row:first-child{border-top:none;padding-top:0}
.dov-row-main{flex:1;min-width:0}
.dov-row-t{font-size:13px;font-weight:700;color:var(--main-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dov-row-s{font-size:12px;color:var(--main-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dov-chk{width:18px;height:18px;flex-shrink:0;padding:0;border:2px solid var(--purple-border);border-radius:5px;background:var(--main-card);cursor:pointer}
.dov-chk:hover{background:var(--purple-dim)}
.dov-amt{font-family:'Exo 2',sans-serif;font-weight:800;font-size:14px;color:var(--purple)}
.dov-up{position:relative;overflow:hidden;border:none;color:var(--sb-text-strong);background:linear-gradient(135deg,var(--sb-grad-top),var(--sb-foot-bg))}
.dov-up::after{content:'';position:absolute;width:200px;height:200px;border-radius:50%;background:var(--dash-hero-circle);top:-90px;right:-70px;pointer-events:none}
.dov-up .dov-card-t{color:var(--sb-text-strong)}
.dov-up .dov-ico{background:var(--dash-hero-tile);color:var(--sb-text-strong)}
.dov-up .dov-empty,.dov-up .skel{position:relative}
.dov-up-status{position:relative;display:inline-block;margin-bottom:6px;font-size:10px;font-weight:800;letter-spacing:.05em;
  padding:2px 8px;border-radius:var(--radius-full);background:var(--dash-hero-tile)}
.dov-up-when{position:relative;font-family:'Exo 2',sans-serif;font-weight:800;font-size:21px;line-height:1.15}
.dov-up-what{position:relative;margin-top:4px;font-size:13px;opacity:.9}
.dov-up-act{position:relative;display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.dov-up-btn{border:none;border-radius:var(--radius-md);padding:6px 12px;font-family:inherit;font-size:12.5px;font-weight:800;cursor:pointer;
  background:var(--dash-hero-tile);color:var(--sb-text-strong)}
.dov-up-btn:hover{background:var(--sb-active-sheen)}
.dov-up-btn.is-primary{background:var(--main-card);color:var(--purple)}
.dov-reach{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:760px){ .dov-reach{grid-template-columns:minmax(0,1fr)} }
.dov-reach-i{padding:9px 11px;border:1px solid var(--main-border);border-radius:var(--radius)}
.dov-reach-l{font-size:12px;color:var(--main-text-muted)}
.dov-reach-v{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:var(--main-text)}
.dov-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--text-disabled)}
.dov-dot.is-ok{background:var(--success)}
/* Contact drawer Profile tab (019, the old Info tab) as cards. Two columns;
   one in the telehealth dock and below 760px. */
/* Cards in a row stretch to the same height, so rows end on one line instead
   of leaving ragged gaps (Patrick, 2026-09-28: "seems sloppy"). */
.dprof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
@media (min-width:1281px){ body.tele-call .dprof{grid-template-columns:minmax(0,1fr)} }
@media (max-width:760px){ .dprof{grid-template-columns:minmax(0,1fr)} }
.dprof-card{min-width:0;padding:14px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.dprof-card.is-span{grid-column:1/-1}
.dprof-sub{font-size:11px;font-weight:700;color:var(--main-text-muted);margin:2px 0 8px}
.ie-multi{display:flex;flex-wrap:wrap;gap:6px 14px}
/* Inside .info-item, whose label rules (the drawer's is the most specific)
   make the small uppercase field label. */
.info-item .ie-multi-opt,#contact-drawer .dprof .info-item .ie-multi-opt{display:inline-flex;margin:0;align-items:center;gap:6px;font-size:14px;color:var(--main-text);text-transform:none;letter-spacing:0;font-weight:400}
.ie-multiline{white-space:pre-wrap}
.dprof-h{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--main-border);
  font-family:'Exo 2',sans-serif;font-weight:700;font-size:14px;color:var(--main-text)}
#contact-drawer .dprof-card .info-grid{margin-bottom:0;gap:10px 16px}
#contact-drawer .dprof-card .info-grid.is-addr{grid-template-columns:2fr 1fr 1fr}
#contact-drawer .dprof-card .info-grid.is-addr .info-item[style*="grid-column"]{grid-column:1/-1}
#contact-drawer .dprof .info-item label{font-size:10.5px;font-weight:800;letter-spacing:.05em;margin-bottom:1px}
#contact-drawer .dprof .ie-val{font-size:13.5px}
#contact-drawer .dprof .ie-val em{color:var(--text-placeholder)}
/* Sub-sections inside a card (Consent and preferences) sit tighter than
   the tab-level section labels they used to be. */
#contact-drawer .dprof .sec-label{margin:16px 0 6px;padding-bottom:0;border-bottom:none;font-size:10.5px;color:var(--main-text-muted)}
#contact-drawer .dprof .dprof-h+.sec-label{margin-top:0}
/* The whole row is the edit target now, so the pencil only shows on hover or
   keyboard focus instead of beside every value. */
/* Every Profile pencil shows on hover only: a field row, or the line of a
   block that is not a row (Tags, the consent lines). */
#contact-drawer .dprof .ie-row .ie-pencil,#contact-drawer .dprof .ie-line .ie-pencil{opacity:0}
#contact-drawer .dprof .ie-row:hover .ie-pencil,#contact-drawer .dprof .ie-line:hover .ie-pencil,#contact-drawer .dprof .ie-pencil:focus-visible{opacity:1;color:var(--purple)}
/* A closed field row is the edit target (_ieRowClick). */
.info-item.ie-row{margin:-6px -8px;padding:6px 8px;border-radius:var(--radius-md);cursor:text}
.info-item.ie-row:hover{background:var(--main-card-hover);box-shadow:inset 0 0 0 1px var(--main-border)}
.info-item.ie-row:hover .ie-pencil{opacity:1;color:var(--purple)}
/* Contact drawer activity timeline (018 _dActTimelineHtml): grouped by day on
   a rail, an icon node per kind. Also used by the Overview's Recent activity. */
.dtl-day{margin:14px 0 6px;font-size:11px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--main-text-muted)}
.dtl .dtl-day:first-child{margin-top:0}
.dtl-rail{position:relative;padding-left:32px}
.dtl-rail::before{content:'';position:absolute;left:10px;top:6px;bottom:6px;width:2px;border-radius:1px;background:var(--divider)}
.dtl-ev{position:relative;padding:5px 0 10px}
.dtl-node{position:absolute;left:-32px;top:4px;width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  background:var(--main-bg);color:var(--main-text-muted);box-shadow:0 0 0 3px var(--main-card)}
.dtl-node svg{width:12px;height:12px}
.dtl-node.is-visit{background:var(--purple-dim);color:var(--purple)}
.dtl-node.is-msg{background:var(--info-dim);color:var(--info-text)}
.dtl-node.is-money{background:var(--success-dim);color:var(--success-text)}
.dtl-node.is-form{background:var(--warning-dim);color:var(--warning-text)}
.dtl-node.is-bad{background:var(--danger-dim);color:var(--danger-text)}
.dtl-main{min-width:0}
.dtl-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.dtl-t{font-size:13px;font-weight:800;color:var(--main-text)}
.dtl-tm{flex-shrink:0;font-size:11.5px;color:var(--main-text-muted);white-space:nowrap}
.dtl-s{font-size:12px;color:var(--main-text-muted);overflow-wrap:anywhere}
.dtl-filt{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.dtl-fc{border:1px solid var(--main-border);background:var(--main-card);border-radius:var(--radius-full);padding:4px 11px;font-family:inherit;
  font-size:12px;font-weight:700;color:var(--main-text-muted);cursor:pointer}
.dtl-fc span{opacity:.7;font-weight:800}
.dtl-fc:hover{border-color:var(--purple-border)}
.dtl-fc.is-on{background:var(--purple-dim);border-color:var(--purple-border);color:var(--purple)}
/* Contact drawer Notes & Tasks tab: the two old tabs as two cards. Side by
   side; stacked in the telehealth dock and below 760px. */
.dnt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
@media (min-width:1281px){ body.tele-call .dnt{grid-template-columns:minmax(0,1fr)} }
@media (max-width:760px){ .dnt{grid-template-columns:minmax(0,1fr)} }
.dnt-card{min-width:0;padding:14px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.dnt-card .sec-label{margin-top:0}
/* Contact drawer Payments tab (020) in cards. dpay-tile and credit-balance-card
   are drawer-only classes; card-on-file is shared, so its tweaks are scoped. */
.dpay-card{margin-bottom:12px;padding:14px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
/* Contact drawer list rows (2026-09-28): appointments (Upcoming/Past) and
   Forms & Contracts. A leading tile (date or kind icon), title and one meta
   line, status pills and actions on the right. */
.drow{display:flex;align-items:center;gap:12px;margin-bottom:8px;padding:10px 14px;background:var(--main-card);
  border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.drow.is-open{align-items:flex-start;flex-wrap:wrap}
.drow-tile{flex-shrink:0;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.drow-tile svg{width:16px;height:16px}
.drow-tile.is-form{background:var(--warning-dim);color:var(--warning-text)}
.drow-tile.is-contract{background:var(--purple-dim);color:var(--purple)}
.drow-tile.is-send{background:var(--info-dim);color:var(--info-text)}
.drow-date{flex-shrink:0;width:42px;padding:4px 0;border-radius:9px;background:var(--purple-dim);color:var(--purple);text-align:center;line-height:1.05}
.drow-date-m{display:block;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.drow-date-d{display:block;font-family:'Exo 2',sans-serif;font-size:17px;font-weight:800}
.drow-main{flex:1;min-width:0}
.drow-t{font-size:13.5px;font-weight:700;color:var(--main-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drow-s{margin-top:2px;font-size:12px;color:var(--main-text-muted);overflow-wrap:anywhere}
.drow-s2{margin-top:2px;font-size:11.5px;font-style:italic;color:var(--main-text-muted)}
.drow-dot{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;vertical-align:1px}
.drow-side{display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.drow-btn{flex-shrink:0;padding:5px;border:none;border-radius:var(--radius-sm);background:none;color:var(--main-text-muted);line-height:0;cursor:pointer}
.drow-btn svg{width:15px;height:15px}
.drow-btn:hover{background:var(--main-bg);color:var(--purple)}
.drow-btn.is-danger:hover{color:var(--danger-text)}
.drow-toggle{cursor:pointer}
.drow-body{flex-basis:100%;margin-top:4px;border-top:1px solid var(--main-border)}
.drow-field{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--main-border)}
.drow-field:last-child{border-bottom:none}
.drow-field-k{flex:0 0 40%;font-size:12px;font-weight:600;color:var(--main-text-muted)}
.drow-field-v{flex:1;min-width:0;font-size:13px;color:var(--main-text);overflow-wrap:anywhere}
.drow-grp{margin:14px 0 8px;font-size:11px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--main-text-muted)}
.drow-grp:first-child{margin-top:4px}
.dpill{flex-shrink:0;padding:2px 8px;border-radius:var(--radius-full);font-size:10px;font-weight:800;letter-spacing:.05em;}
.dpill.is-ok{background:var(--success-dim);color:var(--success-text)}
.dpill.is-warn{background:var(--warning-dim);color:var(--warning-text)}
.dpill.is-info{background:var(--info-dim);color:var(--info-text)}
.dpill.is-bad{background:var(--danger-dim);color:var(--danger-text)}
.dpill.is-muted{background:var(--main-border);color:var(--main-text-muted)}
/* Past appointment states fade their content, never the row: the open
   action menu hangs from the row and must read in full. */
.dappt.completed .drow-date,.dappt.completed .drow-main,.dappt.completed .drow-side{opacity:.6}
.dappt.cancelled .drow-date,.dappt.cancelled .drow-main,.dappt.cancelled .drow-side{opacity:.45}
.dappt.rescheduled .drow-date,.dappt.rescheduled .drow-main,.dappt.rescheduled .drow-side{opacity:.5}
.dappt.rescheduled .drow-t{text-decoration:line-through}
.dappt.completed .drow-date,.dappt.cancelled .drow-date,.dappt.rescheduled .drow-date{background:var(--main-bg);color:var(--main-text-muted)}
.dappt.waiting_room .drow-date{background:var(--warning-dim);color:var(--warning-text)}
.drow-kebab{position:relative;flex-shrink:0}
.dpay-card.is-list{padding:4px 14px}
#contact-drawer .dpay-card .sec-label{margin-top:0}
#contact-drawer .dpay-card .card-on-file{box-shadow:none}
#contact-drawer .dpay-tile{background:var(--main-card);border-color:var(--main-border);box-shadow:var(--shadow-sm)}
#contact-drawer .dpay-tile-label{font-size:10.5px;font-weight:800;letter-spacing:.05em;color:var(--main-text-muted)}
#contact-drawer .dpay-tile-val{color:var(--main-text)}
#contact-drawer .credit-balance-card{background:var(--purple-dim);border-color:var(--purple-border)}
#contact-drawer .credit-balance-amt{color:var(--purple)}
#contact-drawer .credit-balance-label{color:var(--main-text-muted)}
/* Payments > Overview layout (2026-09-28): tile row, credit actions, and the
   credit history card, formerly inline styles. */
.dpay-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
#contact-drawer .dpay-tile-val.is-text{font-size:13px}
.dpay-credit-acts{display:flex;gap:6px}
.dpay-sub-h{padding:10px 0 4px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--main-text-muted)}
#contact-drawer .credit-hist-row{border-bottom-color:var(--main-border)}
.credit-hist-note{flex:1;min-width:0;font-size:12px;color:var(--main-text);overflow-wrap:anywhere}
.credit-hist-date{flex-shrink:0;font-size:11px;color:var(--main-text-muted)}
/* Payments sub-tabs (2026-09-28): Series, Transactions, Subscriptions and Gift
   Cards on the shared .drow/.dpill rows, formerly inline styles. */
.dtl-filt.is-flush{margin-bottom:0}
.dpay-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.dpay-bar.is-end{justify-content:flex-end}
.dpay-bar .dpay-sub-h{padding:0}
.dpay-empty{padding:14px 0;font-size:13px;color:var(--main-text-muted);text-align:center}
.dpay-empty.is-boxed{padding:20px 0;border:1px dashed var(--main-border);border-radius:var(--radius)}
.dpay-loading{padding:20px 0}
.drow.is-compact{padding:8px 12px;background:var(--main-bg);box-shadow:none}
.dser-count{font-size:11px;color:var(--main-text-muted)}
.dser-card{margin-bottom:10px}
.dser-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.dser-name{font-size:14px;font-weight:700;color:var(--main-text)}
.dser-credits{font-size:13px;color:var(--main-text)}
.dser-meta{margin-top:2px;font-size:11.5px;color:var(--main-text-muted)}
.dser-ledger{margin-top:10px}
.dser-lrow{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-top:1px solid var(--divider);font-size:11.5px;color:var(--main-text-muted)}
.dser-delta{font-weight:700;color:var(--main-text)}
.dser-delta.is-pos{color:var(--success-text)}
.dser-acts{display:flex;justify-content:flex-end;margin-top:10px}
.dser-adj{display:flex;flex-direction:column;gap:14px}
.dser-adj-head{font-size:13px;color:var(--main-text)}
.dser-adj-sub{margin-top:2px;font-size:12px;color:var(--main-text-muted)}
.dser-adj-note{flex:2}
.dser-adj-hint{font-size:11.5px;color:var(--main-text-muted)}
.dtx-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--main-border);cursor:pointer}
.dtx-row:last-child{border-bottom:none}
.dtx-row.is-muted .dtx-main,.dtx-row.is-muted .dtx-amt{opacity:.55}
.dtx-main{flex:1;min-width:0}
.dtx-t{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13px;font-weight:600;color:var(--main-text)}
.dtx-s{font-size:11.5px;color:var(--main-text-muted)}
.dtx-side{display:flex;align-items:center;gap:7px;flex-shrink:0;color:var(--main-text-muted)}
.dtx-side svg{width:14px;height:14px}
.dtx-amt{font-family:'Exo 2',sans-serif;font-size:14px;font-weight:700;color:var(--main-text)}
.dpager{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.dpager-btn{padding:5px 12px;border:1px solid var(--main-border);border-radius:var(--radius-sm);background:var(--main-card);color:var(--main-text);font-family:inherit;font-size:12px;cursor:pointer}
.dpager-btn:disabled{opacity:.5;cursor:not-allowed}
.dpager-lbl{font-size:12px;color:var(--main-text-muted)}
.dsub{border-left:3px solid var(--main-border)}
.dsub.is-ok{border-left-color:var(--success-light)}
.dsub.is-warn{border-left-color:var(--warning-light)}
.dsub.is-bad{border-left-color:var(--danger-light)}
.dsub-was{margin-right:4px;text-decoration:line-through}
.dsub-now{color:var(--success-text)}
.dgc-code-row{display:flex;align-items:center;gap:4px}
.dgc-code{font-family:monospace;font-size:13px;font-weight:700;letter-spacing:.05em;color:var(--main-text)}
.dgc-bal{font-family:'Exo 2',sans-serif;font-size:14px;font-weight:700;color:var(--orange)}
/* Memberships sub-tab (058) and its auto-renew chip, shared with the
   Memberships admin tab (057). */
.mem-ar{display:inline-flex;align-items:center;gap:4px;font-size:11px}
.mem-ar-dot{width:6px;height:6px;border-radius:50%;background:var(--text-dim)}
.mem-ar.is-on .mem-ar-dot{background:var(--success-light)}
.mem-rw-bal{font-weight:700;color:var(--main-text)}
.mem-acts{gap:6px}
/* Contact drawer SOAP list badges (021). */
.dsoap-badge{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:var(--radius-full);border:1px solid transparent;
  font-size:10px;font-weight:800;letter-spacing:.04em;vertical-align:1px}
.dsoap-badge.is-locked{background:var(--main-bg);border-color:var(--main-border);color:var(--main-text-muted)}
.dsoap-badge.is-late{background:var(--warning-dim);border-color:var(--warning-light);color:var(--warning-text)}
/* SOAP template editor: Use by Default For (151). */
.cltpl-svc-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cltpl-svc-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border:1px solid var(--purple-border);background:var(--purple-dim);color:var(--purple);border-radius:var(--radius-full);font-size:12px;font-weight:600}
.cltpl-svc-chip button{border:none;background:transparent;color:inherit;cursor:pointer;font-size:11px;padding:0 4px}
.cltpl-svc-from{font-weight:400;font-size:11px;color:var(--warning-text)}
/* SOAP Templates list: move up / down (151). */
.cltpl-move{display:flex;flex-direction:column;gap:2px;flex-shrink:0}
.cltpl-move .icon-btn-xs[disabled]{opacity:.35;cursor:default}
/* Whose Note? picker for group visits (021). */
.soap-who-list{display:flex;flex-direction:column;gap:6px}
.soap-who-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;border:1px solid var(--main-border);background:var(--main-card);color:var(--main-text);border-radius:var(--radius);padding:10px 12px;cursor:pointer}
.soap-who-opt:hover,.soap-who-opt:focus-visible{border-color:var(--purple-border);background:var(--purple-dim)}
.soap-who-name{font-size:14px;font-weight:600}
.soap-who-tag{font-size:11px;font-weight:600;color:var(--main-text-muted)}
/* SOAP viewer: Older / Newer (021). Position counts from the newest. */
.soap-view-nav{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin:-4px 0 10px}
.soap-view-pos{font-size:12px;color:var(--main-text-muted);min-width:44px;text-align:center}
/* Drawer SOAP tab: Vitals Trend (021). */
.soap-trend{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);padding:10px 12px;margin-bottom:12px}
.soap-trend-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px;font-size:12px;font-weight:700;color:var(--text)}
.soap-trend-sub{font-size:11px;font-weight:400;color:var(--text-muted)}
.soap-trend-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.soap-trend-card{border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 8px}
.soap-trend-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.soap-trend-val{font-size:14px;font-weight:700;color:var(--text);margin:2px 0}
.soap-trend-delta{font-size:11px;font-weight:600;color:var(--text-muted);margin-left:6px}
.soap-trend-delta.is-down{color:var(--success-text)}
.soap-trend-svg{display:block;width:100%;height:28px;fill:none;stroke:var(--purple);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
/* SOAP viewer: a note that locked unsigned (021). */
.soap-unsigned-banner{display:flex;align-items:center;gap:8px;padding:9px 12px;margin-bottom:8px;border:1px solid var(--warning-light);border-radius:var(--radius);background:var(--warning-dim);color:var(--warning-text);font-size:12px}
/* Clinical > SOAP Notes: Needs My Signature toggle (152). */
.clsoap-mine{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--main-border);border-radius:var(--radius);background:var(--main-card);color:var(--main-text);font-size:13px;font-weight:600;cursor:pointer}
.clsoap-mine:hover{border-color:var(--purple-border)}
.clsoap-mine.is-on{background:var(--purple-dim);border-color:var(--purple-border);color:var(--purple)}
.clsoap-mine:focus-visible{outline:3px solid var(--purple-border);outline-offset:2px}
/* One chip set for the drawer and Clinical > SOAP Notes (_soapChipsHTML, 021). */
.dsoap-badge:first-child{margin-left:0}
.dsoap-badge.is-draft{background:var(--main-bg);border-color:var(--main-border);color:var(--main-text)}
.dsoap-badge.is-draft.is-soon{background:var(--warning-dim);border-color:var(--warning-light);color:var(--warning-text)}
.dsoap-badge.is-unsigned{background:var(--warning-dim);border-color:var(--warning-light);color:var(--warning-text)}
.dsoap-badge.is-signed{background:var(--success-dim);border-color:var(--success-light);color:var(--success-text)}
.dsoap-badge.is-amended{background:var(--purple-dim);border-color:var(--purple-border);color:var(--purple)}
.dsoap-badge.is-appt{background:var(--info-dim);border-color:transparent;color:var(--info-text)}
/* Segmented control for the Activity sub-views (Timeline, Upcoming, Past). */
.dseg{display:inline-flex;padding:2px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-md)}
.dseg-b{border:none;background:none;padding:5px 12px;border-radius:6px;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--main-text-muted);cursor:pointer}
.dseg-b:hover{color:var(--main-text)}
.dseg-b.is-on{background:var(--purple);color:var(--sb-text-strong)}
/* Compact header once the body scrolls (_drawerCompactOnScroll). The safety
   band stays; meta, contact chips and tiles hide, the hero tightens. */
#contact-drawer.is-compact .dwh-meta,#contact-drawer.is-compact .dwh-reach,#contact-drawer.is-compact .dstats{display:none}
#contact-drawer.is-compact .dwh{padding:10px 20px}
#contact-drawer.is-compact .dwh-av{width:36px;height:36px;font-size:14px;border-radius:10px}
#contact-drawer.is-compact .dwh-name{font-size:17px}
#contact-drawer.is-compact .dwh-qa{margin-top:8px}
#contact-drawer.is-compact .dwh-qa-btn{padding:5px 10px}
.ie-line{display:flex;align-items:center;gap:6px;min-height:22px}
.ie-val{font-size:14px;color:var(--main-text);min-width:0;word-break:break-word}
.ie-modal-p{margin:0;font-size:13px;line-height:1.5;color:var(--main-text);word-break:break-word}
.ie-pencil{background:none;border:none;cursor:pointer;color:var(--main-text-muted);padding:2px;border-radius:6px;flex-shrink:0;opacity:.45;transition:opacity .12s,color .12s;line-height:0}
.ie-pencil:hover{color:var(--purple);opacity:1}
.ie-input{width:100%;height:34px;padding:5px 9px;font-size:13px;border:1px solid var(--main-border);border-radius:8px;background:var(--main-card);color:var(--main-text);font-family:inherit}
.ie-input:focus:not(:focus-visible){outline:none;border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-dim)}
/* Unsaved-changes bar. Two layers on purpose: .ie-savebar is an OPAQUE
   full-bleed band whose negative margins cover drawer-body's padding, so
   fields scrolling underneath never show through; .ie-savebar-inner is the
   tinted pill. Putting the translucent --purple-dim on the sticky element
   itself let content bleed through it. top:-18px cancels drawer-body's 18px
   top padding (same trick as .d-sticky-sub) so the band clamps flush under
   the tab row with nothing showing above it; its own 10px padding is the gap. */
.ie-savebar{position:sticky;top:-18px;z-index:6;background:var(--main-card);margin:-18px -20px 12px;padding:10px 20px}
.ie-savebar-inner{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--purple-dim);border:1px solid var(--purple-border);border-radius:10px;padding:8px 12px}
.ie-savebar-txt{font-size:12px;font-weight:700;color:var(--purple)}
.ie-tags{display:flex;flex-wrap:wrap;gap:5px}
/* Sticky sub-tab header inside drawer-body. Keeps chips and action button
   visible while the list scrolls. Negative margins pull the background to
   the body edges so it cleanly covers padding. */
.d-sticky-sub{position:sticky;top:-18px;background:var(--main-card);z-index:5;
  margin:-18px -20px 12px;padding:18px 20px 10px}
.sec-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text-muted);margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid var(--border)}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.info-item label{font-size:10px;color:var(--main-text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:2px}
.info-item span{font-size:14px;color:var(--main-text)}
.info-item a{color:var(--main-text);text-decoration:none}.info-item a:hover{color:var(--purple)}
.note-item{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:10px 12px;margin-bottom:7px}
.note-date{font-size:11px;color:rgba(255,255,255,.5)}.note-text{font-size:13px;line-height:1.55;white-space:pre-wrap;margin-top:4px;color:var(--text)}
.appt-row-menu{position:absolute;top:100%;right:0;margin-top:4px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);min-width:160px;z-index:50;padding:4px;display:flex;flex-direction:column}
.appt-row-menu-item{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;color:var(--text);text-align:left;padding:8px 10px;font-size:13px;font-weight:500;border-radius:var(--radius-sm);cursor:pointer;transition:background .12s}
.appt-row-menu-item:hover{background:var(--bg-card-hover);color:var(--orange)}
.appt-row-menu-item svg{flex-shrink:0;color:var(--text-muted)}
.appt-row-menu-item:hover svg{color:var(--orange)}
.appt-row-menu-danger{color:var(--danger-light)}
.appt-row-menu-danger svg{color:var(--danger-light)}
.appt-row-menu-danger:hover{background:var(--danger-dim);color:var(--danger-light)}
.appt-row-menu-danger:hover svg{color:var(--danger-light)}
.appt-row-menu-sep{height:1px;background:var(--border);margin:4px 0}
.sb-sm{font-size:10px;font-weight:600;padding:1px 6px;border-radius:3px;text-transform:uppercase}
.sched{background:var(--orange-dim);color:var(--orange)}
/* P3-1 confirmed. Greener and stronger than .compl so a confirmed upcoming
   appointment does not read as an already-finished one at a glance. rgba here
   rather than a token to match the other status badges in this block. */
.confd{background:rgba(34,197,94,.18);color:var(--success-light)}
.compl{background:rgba(52,211,153,.15);color:var(--success-light)}
.canc{background:rgba(255,255,255,.08);color:var(--text-muted)}
.reschd{background:rgba(251,191,36,.15);color:var(--warning-light)}
.noshow{background:rgba(249,115,22,.15);color:#f97316}
.task-sm{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);
  padding:8px 11px;margin-bottom:6px;display:flex;align-items:flex-start;gap:8px;color:#ffffff}
.tch-sm{width:15px;height:15px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;margin-top:2px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s}
.tch-sm.done{background:var(--success-light);border-color:var(--success-light)}
.tch-sm.in-progress{border-color:var(--orange);border-style:dashed}
.tch-sm svg{width:9px;height:9px;color:#fff}
.tsk-done{text-decoration:line-through;color:rgba(255,255,255,.4)}
.sec-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}

/* MODAL */
#modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;
  transition:opacity .2s;backdrop-filter:blur(4px);padding:20px}
#modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--bg-panel);border:1px solid var(--purple-border);border-radius:var(--radius-lg);
  width:100%;max-width:540px;max-height:90vh;display:flex;flex-direction:column;
  box-shadow:var(--shadow),var(--shadow-p);transform:scale(.96);transition:transform .2s}
#modal-overlay.open .modal{transform:scale(1)}
/* The box takes focus when a modal has no fields (_modalFocusIn); it is a
   container, not a control, so no ring. [tabindex] outranks the later global
   [tabindex]:focus-visible rule. */
.modal:focus,.modal[tabindex]:focus-visible{outline:none}
.modal-lg{max-width:640px}.modal-xl{max-width:760px}.modal-xxl{max-width:1100px}
/* openModal's size argument. sm: confirms, pickers, short forms. md: content that
   needs the room (stock history's six-column table scrolls sideways at 540). */
.modal-sm{max-width:420px}.modal-md{max-width:680px}
#bulk-body-rte:empty:before{content:attr(data-ph);color:var(--main-text-muted);pointer-events:none}
/* GrapesJS RTE toolbar: let actions size to content with padding so the text
   merge-var buttons (Name/Email/Biz/Phone) aren't scrunched into each other. */
/* vendor: GrapesJS runtime classes. The blog editor loads GrapesJS from a CDN and emits these
   class names itself, so no source file references them. Not dead; keep. */
.gjs-rte-action{width:auto!important;min-width:24px;padding:0 7px!important;display:inline-flex!important;align-items:center;justify-content:center}
#bulk-body-rte img{max-width:100%;height:auto;cursor:pointer}
#bulk-body-rte h2{font-size:22px;font-weight:700;margin:0 0 8px;line-height:1.25}
#bulk-body-rte h3{font-size:18px;font-weight:700;margin:0 0 6px;line-height:1.3}
#bulk-body-rte p{margin:0 0 10px}
/* Automation editor inputs used class .msp-input but it was never defined, so
   they rendered unstyled/cramped. Give them the standard input treatment. */
.msp-input{padding:9px 11px;background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);color:var(--main-text);font-size:14px;box-sizing:border-box;font-family:inherit;line-height:1.4}
.msp-input:focus:not(:focus-visible){outline:none;border-color:var(--purple)}
select.msp-input{height:38px;cursor:pointer}
textarea.msp-input{resize:vertical}
.modal-wide{max-width:min(1280px,calc(100vw - 80px));min-height:min(70vh,640px)}
.modal-head{padding:16px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-title{font-family:'Exo 2',sans-serif;font-size:16px;font-weight:700;color:#ffffff}
.modal-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px;color:var(--text)}
.modal-foot{padding:12px 20px;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;flex-shrink:0}
.modal-foot:empty{display:none}
/* Why the footer's action is disabled (166 _tpSyncActionBtn: Sell a Series,
   Sell a Gift Card), left of the buttons as the register's sits under Charge. */
.modal-foot-why{margin-right:auto;align-self:center;font-size:12px;color:var(--main-text-muted)}
/* Transaction detail modal (approved mockup 2026-10-11). The modal answers
   to its own width, so a narrow window stacks the people row and footer. */
.txd-modal{container-type:inline-size;container-name:txd}
.txd-hero{position:relative;overflow:hidden;margin-bottom:14px;padding:16px 18px;border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--purple),var(--purple-active));color:var(--sb-text-strong)}
.txd-hero::before,.txd-hero::after{content:'';position:absolute;width:210px;height:210px;border-radius:50%;background:var(--dash-hero-circle);pointer-events:none}
.txd-hero::after{top:-95px;right:-95px}
.txd-hero::before{top:-135px;right:-15px;opacity:.6}
.txd-hero-top{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.txd-hero-lbl{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--purple-soft)}
.txd-total{margin-top:4px;font-family:'Exo 2',sans-serif;font-size:30px;font-weight:700}
.txd-refunded{margin-top:2px;font-size:12px;font-weight:700;color:var(--purple-soft)}
.txd-meta{position:relative;margin-top:8px;font-size:12.5px;color:var(--purple-soft)}
.txd-pills{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.txd-hpill{padding:4px 9px;border-radius:var(--radius-sm);background:var(--dash-hero-tile);color:var(--sb-text-strong);font-size:10px;font-weight:800;letter-spacing:.04em;white-space:nowrap}
.txd-hpill.is-bad{background:var(--danger)}
.txd-hpill.is-warn{background:var(--warning);color:var(--main-text)}
.txd-alert{margin-bottom:12px;padding:10px 14px;border:1px solid;border-radius:var(--radius-md);font-size:12.5px}
.txd-alert-k{margin-bottom:3px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.txd-alert-line{font-size:13px;font-weight:700;color:var(--main-text)}
.txd-alert-help{margin-top:3px;color:var(--main-text-muted)}
.txd-alert.is-danger{background:var(--danger-dim);border-color:var(--danger-light)}
.txd-alert.is-danger .txd-alert-k{color:var(--danger-text)}
.txd-alert.is-warn{background:var(--warning-dim);border-color:var(--warning-light)}
.txd-alert.is-warn .txd-alert-k{color:var(--warning-text)}
.txd-alert.is-muted{background:var(--main-bg);border-color:var(--main-border)}
.txd-alert.is-muted .txd-alert-k{color:var(--main-text-muted)}
.txd-people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.txd-k{margin-bottom:3px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted)}
.txd-v{font-size:13.5px;font-weight:700;color:var(--main-text)}
.txd-v.is-muted{font-weight:400;color:var(--main-text-muted)}
.txd-sub{margin-top:2px}
.txd-link{padding:0;border:none;background:none;color:var(--purple);font:inherit;font-weight:700;text-align:left;cursor:pointer}
.txd-link:hover{text-decoration:underline}
.txd-link:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
.txd-sub .txd-link{font-size:12px}
.txd-card{margin-bottom:12px;padding:14px;border:1px solid var(--main-border);border-radius:var(--radius-lg);background:var(--main-card);box-shadow:var(--shadow-sm)}
.txd-card-title{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-family:'Exo 2',sans-serif;font-size:14px;font-weight:700;color:var(--main-text)}
.txd-ico{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--radius-md);background:var(--purple-dim);color:var(--purple);font-size:13px;font-weight:800}
.txd-row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:13px;color:var(--main-text)}
.txd-row.is-item{border-bottom:1px solid var(--main-border)}
.txd-row.is-muted{color:var(--main-text-muted)}
.txd-row.is-good{color:var(--success-text)}
.txd-row.is-credit{color:var(--purple)}
.txd-row.is-total{margin-top:6px;padding-top:10px;border-top:1px solid var(--divider);font-family:'Exo 2',sans-serif;font-size:17px;font-weight:700}
.txd-empty{padding:5px 0;font-size:13px;color:var(--main-text-muted)}
.txd-paid{margin-top:8px;padding-top:8px;border-top:1px solid var(--main-border)}
.txd-note{font-size:12px;color:var(--main-text-muted)}
.txd-note.is-bad{font-weight:700;color:var(--danger-text)}
.txd-note.is-warn{font-weight:700;color:var(--warning-text)}
.txd-rf{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--main-border)}
.txd-rf:last-child{border-bottom:none}
.txd-rf-dot{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--success-dim);color:var(--success-text);font-size:12px}
.txd-rf-main{flex:1;min-width:0}
.txd-rf-when{font-size:13px;font-weight:700;color:var(--main-text)}
.txd-rf-why{font-size:12px;color:var(--main-text-muted)}
.txd-rf-amt{font-family:'Exo 2',sans-serif;font-weight:700;color:var(--danger-text);white-space:nowrap}
.txd-notes{margin-bottom:12px;font-size:13px;color:var(--main-text-muted)}
.txd-refs{display:grid;gap:6px;font-size:12px;color:var(--main-text-muted)}
.txd-ref{display:flex;align-items:center;gap:8px;min-width:0}
.txd-ref-k{flex:0 0 150px}
.txd-ref code{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--main-text)}
.txd-ref .icon-btn-xs{flex-shrink:0}
.txd-foot-gap{flex:1}
.txd-modal .modal-foot{justify-content:flex-start;align-items:center}
@container txd (max-width:480px){
  .txd-people{grid-template-columns:repeat(2,minmax(0,1fr))}
  .txd-total{font-size:26px}
  .txd-ref-k{flex-basis:96px}
  .txd-foot-gap{flex-basis:100%;height:0}
}
.warn-box{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);
  border-radius:var(--radius);padding:12px 14px;font-size:13px;color:var(--warning-light);margin-bottom:12px}
.warn-box strong{color:#fde68a}

/* ============================================================
   MASTER LIGHT-SURFACE SYSTEM (June 8 2026)
   Pass 1: inert until a surface opts in via .surface-light or
   migrates a bar to .subnav-tab. Promote to global .modal/.drawer
   in pass 2 after launch. See MySpark-Design-Tokens.docx.
   ============================================================ */

/* Light-surface system tokens (--divider, --subnav-bar, --subnav-tab-hover)
   live in the top :root block. */

/* Reusable light-surface remap. Apply to a shell to flip every
   var()-driven child to the light palette. Mirrors the .panel remap. */
.surface-light{
  background:var(--main-card);
  color:var(--main-text);
  --text:var(--main-text);
  --text-muted:var(--main-text-muted);
  --text-dim:#6d6390;
  --bg-card:var(--main-card);
  --bg-card-hover:var(--main-card-hover);
  --bg-input:var(--main-input);
  --bg-panel:var(--main-card);
  --border:var(--main-border);
}
/* Shell holdouts the token remap can't reach (raw hex in base rules) */
.surface-light .modal-title{color:var(--main-text)}
.surface-light .modal-head{border-bottom-color:var(--divider)}
.surface-light .modal-foot{border-top-color:var(--divider)}
.surface-light .form-group input,
.surface-light .form-group select,
.surface-light .form-group textarea{border:1px solid var(--main-input-border)}
.surface-light .btn-icon{color:var(--main-text-muted);border-color:var(--divider)}
.surface-light .btn-icon:hover{background:var(--main-card-hover);color:var(--main-text)}
/* Drawer tabs on light */
.surface-light .drawer-tabs{background:var(--subnav-bar);border-bottom:2px solid var(--divider)}
.surface-light .drawer-tab{color:var(--main-text-muted)}
.surface-light .drawer-tab:hover{color:var(--main-text)}
.surface-light .drawer-tab.active{color:var(--purple);border-bottom-color:var(--purple)}
/* Drawer body on light */
.surface-light .d-sticky-sub{background:var(--main-card)}
.surface-light .sec-label{color:var(--main-text);font-size:11px;font-weight:800;letter-spacing:.06em;border-bottom-color:var(--divider);margin-top:28px}
.surface-light .sec-label:first-child{margin-top:0}
.surface-light .info-item label{color:var(--main-text-muted)}
.surface-light .info-item a:hover{color:var(--purple)}
.surface-light .note-item{background:var(--main-bg);border-color:var(--main-border)}
.surface-light .note-date{color:var(--main-text-muted)}
.surface-light .task-sm{background:var(--main-bg);border-color:var(--main-border);color:var(--main-text)}
.surface-light .canc{background:var(--main-bg);color:var(--main-text-muted)}
.surface-light .tsk-done{color:var(--main-text-muted)}
/* Drawer info: breathing room + full-width section dividers */
.surface-light .info-grid{gap:14px 8px}
.surface-light .info-item label{margin-bottom:3px}
.surface-light .sec-row{border-bottom:1px solid var(--divider);padding-bottom:6px;margin-bottom:10px}
.surface-light .sec-row .sec-label{border-bottom:none;padding-bottom:0}
/* Warn-box readable on light surfaces */
.surface-light .warn-box{color:var(--warning-text-strong)}
.surface-light .warn-box strong{color:var(--warning-text-strong)}

/* Collapsed subnav. Replaces pay-panel-tab / cal-panel-tab /
   at-tab (NOT .pay-tab, that's a segmented control). */

/* TAG SELECTOR */
.tag-sel-wrap{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.tag-opt{padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;
  border:1px solid var(--border);color:var(--text-muted);background:transparent;
  transition:all .15s;font-family:Lato,sans-serif}
.tag-opt.selected{color:var(--purple-light);border-color:var(--purple-border);background:var(--purple-dim)}
.tag-opt.is-active{outline:2px solid var(--purple-border);outline-offset:1px}
.tag-opt-create{color:var(--purple-light);border-style:dashed}
.ie-tags-q{margin-bottom:6px}
.divider{height:1px;background:var(--border);margin:12px 0}

/* PAGINATION */
.pagination{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:14px}
.pg-btn{width:30px;height:30px;border-radius:var(--radius);background:var(--main-card);
  border:1px solid var(--main-border);color:var(--main-text-muted);font-size:12px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s;font-family:Lato,sans-serif}
.pg-btn:hover{border-color:var(--purple-border);color:var(--main-text)}
.pg-btn.active{background:var(--purple);color:#fff;border-color:var(--purple)}
.pg-btn:disabled{opacity:.3;cursor:default;pointer-events:none}
.pg-info{font-size:12px;color:var(--main-text-muted);padding:0 3px}

/* CARD ON FILE */
.card-on-file{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-brand-icon{width:36px;height:24px;background:rgba(255,255,255,.12);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:rgba(255,255,255,.8);flex-shrink:0}
.card-details{flex:1}
.card-number{font-size:13px;font-weight:600;color:var(--text)}
.card-exp{font-size:11px;color:rgba(255,255,255,.55)}
.card-on-file.on-light{background:var(--main-card);border-color:var(--main-border)}
.card-on-file.on-light .card-brand-icon{background:var(--purple-dim);color:var(--purple)}
.card-on-file.on-light .card-number{color:var(--main-text)}
.card-on-file.on-light .card-exp{color:var(--main-text-muted)}
.sq-card-form{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:12px;min-height:44px}

/* BULK ACTION BAR */
.bulk-bar{background:var(--main-card);border:1px solid var(--purple-border);border-radius:var(--radius);
  padding:10px 14px;margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;box-shadow:0 1px 6px rgba(107,33,234,.08)}
.bulk-count{font-size:13px;font-weight:600;color:var(--purple-light)}
.bulk-select-all-btn{background:none;border:none;color:var(--purple-light);cursor:pointer;
  font-family:Lato,sans-serif;font-size:12px;font-weight:600;padding:0;text-decoration:underline}
.cb-col{width:36px;padding:10px 8px!important}
input[type=checkbox]{cursor:pointer;accent-color:var(--purple);width:15px;height:15px}

/* EMPTY STATE */
.empty-state{text-align:center;padding:44px 20px;color:var(--main-text-muted)}
.empty-state svg{width:38px;height:38px;margin:0 auto 12px;display:block;opacity:.3}
.empty-state h3{font-family:'Exo 2',sans-serif;font-size:15px;margin-bottom:5px;color:var(--main-text)}
.empty-state p{font-size:13px;color:var(--main-text-muted)}
/* Compact: cards, drawers and modals. No icon, tight padding. */
.empty-state.compact{padding:14px 8px}
.empty-state.compact h3{font-size:13px;margin-bottom:3px}
/* A load that failed (006 _loadFailed). Never shown as an empty list. */
.empty-state.is-error h3{color:var(--danger-text)}
.empty-state .btn{margin-top:12px}

/* TOAST */
#toast-container{position:fixed;bottom:20px;right:20px;z-index:var(--z-toast);display:flex;flex-direction:column;gap:7px}
.toast{background:var(--bg-card);border:1px solid var(--purple-border);border-radius:var(--radius);
  padding:10px 14px;font-size:13px;color:var(--text);box-shadow:var(--shadow);
  animation:toastIn .3s ease;display:flex;align-items:center;gap:8px;max-width:280px}
.toast.success{border-color:rgba(52,211,153,.4)}.toast.error{border-color:var(--orange-border)}.toast.warn{border-color:rgba(245,158,11,.4)}.toast.info{border-color:var(--info)}
@keyframes toastIn{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}

/* User menu popup */
.sb-bottom{position:relative}
.user-menu-popup{position:absolute;bottom:100%;left:8px;right:8px;background:var(--bg-card);
  border:1px solid var(--purple-border);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow);z-index:100;margin-bottom:5px}
.um-item{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px;
  font-weight:500;cursor:pointer;transition:background .15s;color:var(--text-muted);
  background:none;border:none;width:100%;text-align:left;font-family:Lato,sans-serif}
.um-item:hover{background:rgba(255,255,255,.04);color:var(--text)}
.um-item svg{width:14px;height:14px;flex-shrink:0}
.um-item.danger{color:var(--danger-light)}
.um-item.danger:hover{background:rgba(239,68,68,.1);color:var(--danger-light)}
.um-div{height:1px;background:var(--border)}
/* Products */
/* Notification enhancements */
.notif-read-item{opacity:.8}

/* PAYMENT PANEL TABS */

/* SUBSCRIPTIONS */
/* Match the white-card pattern used elsewhere (stat-card, prod-card). The
   row sits inside .panel which sets light-theme tokens, but we make the
   tokens self-contained so the row renders correctly anywhere. */
/* Actions column fits FOUR buttons on one line. Each row is its own grid, so a
   column sized to content would make rows disagree on where the columns sit;
   a fixed width keeps them aligned. 210px held three (Edit, Pause, Cancel) and
   wrapped the fourth onto its own line the day Mark Paid appeared. Max real
   count is four: Mark Paid when a cycle is uncollected, Edit always, Pause or
   Resume, and Cancel. */
.sub-row{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:13px 16px;display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr 300px;gap:12px;align-items:center;cursor:pointer;transition:border-color .18s,box-shadow .18s;margin-bottom:7px;box-shadow:0 1px 6px rgba(107,33,234,.06);
  --text:var(--main-text);
  --text-muted:var(--main-text-muted);
  --text-dim:#6d6390;
  --border:var(--main-border);
  --bg-card:var(--main-card);
  color:var(--main-text);
}
.sub-row:hover{border-color:var(--purple-border);box-shadow:0 2px 12px rgba(107,33,234,.1)}
.sub-row.active{border-left:3px solid var(--success-light)}
.sub-row.paused{border-left:3px solid var(--orange);opacity:.85}
.sub-row.past_due{border-left:3px solid var(--warning-light)}
.sub-row.suspended{border-left:3px solid var(--danger-light)}
.sub-row.cancelled{border-left:3px solid var(--text-dim);opacity:.55}
.sub-name{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub-biz{font-size:11px;color:var(--text-muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub-cycle-badge{font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;background:var(--purple-dim);color:var(--purple-light);display:inline-block;margin-top:3px}
.sub-date-cell{font-size:12px;color:var(--text-muted)}
.sub-date-cell strong{display:block;font-size:13px;font-weight:600;color:var(--text)}
.sub-actions{display:flex;gap:6px;justify-content:flex-end;align-items:center;flex-wrap:wrap}

.cat-mgr-body{padding:12px 16px;border-top:1px solid var(--main-border);display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.cat-chip-item{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;background:var(--purple-dim);color:var(--purple-light);border:1px solid var(--purple-border)}
.cat-chip-rm{background:none;border:none;cursor:pointer;color:rgba(155,85,255,.45);font-size:15px;padding:0;line-height:1;display:flex;align-items:center;transition:color .15s}
.cat-chip-rm:hover{color:var(--danger-light)}

/* INVENTORY */
/* Product stock badges. Once named .inv-badge like the (since removed) invoice
   status pill, which gave these the invoice styling. */
.stk-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;margin-top:3px}
.inv-ok{background:rgba(52,211,153,.12);color:var(--success-light)}
.inv-low{background:rgba(245,158,11,.15);color:var(--warning-light)}
.inv-out{background:rgba(239,68,68,.15);color:var(--danger-light)}

/* CAL TABS */

/* APPTS LIST VIEW */
.svc-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* CONVERSATIONS PANEL */
.conv-wrap{display:flex;flex-direction:column;height:100%;margin:-22px -24px;background:var(--main-bg)}
.conv-toolbar{display:flex;align-items:center;gap:12px;padding:14px 24px;background:var(--main-card);border-bottom:1px solid var(--main-border);flex-shrink:0}
.conv-filter-group{display:flex;gap:6px;align-items:center}
.conv-filter-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--main-text-muted);margin-right:4px}
.conv-pill{padding:5px 12px;border-radius:var(--radius-full);background:var(--main-bg);color:var(--main-text-muted);font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--main-border);transition:all .15s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.conv-pill:hover{background:var(--main-card-hover);color:var(--main-text)}
/* The hidden attribute needs help here: .conv-pill sets display:inline-flex,
   which beats the browser's own [hidden]{display:none}, so el.hidden=true was
   silently doing nothing and the Unrouted pill stayed on screen showing a 0.
   Same for the count badge, which is hidden when its count is zero. */
.conv-pill[hidden],.conv-pill-count[hidden]{display:none!important}
.conv-pill.active{background:var(--purple);color:#fff;border-color:var(--purple)}
.conv-pill .conv-pill-count{font-size:10px;background:rgba(255,255,255,.18);padding:1px 6px;border-radius:var(--radius-full);font-weight:700}
.conv-pill:not(.active) .conv-pill-count{background:var(--purple-dim);color:var(--purple)}
.conv-toolbar-spacer{flex:1}
.conv-refresh{padding:6px 10px;background:none;border:1px solid var(--main-border);border-radius:var(--radius);color:var(--main-text-muted);cursor:pointer;font-size:12px;display:inline-flex;align-items:center;gap:6px}
.conv-refresh:hover{background:var(--main-card-hover);color:var(--main-text)}
.conv-actionbar{display:flex;align-items:center;gap:14px;padding:12px 24px;background:var(--main-card);border-bottom:1px solid var(--main-border);flex-shrink:0;flex-wrap:wrap}
.conv-search-wrap{position:relative;flex:1 1 320px;min-width:200px;max-width:480px}
.conv-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--main-text-muted);pointer-events:none}
.conv-search-input{width:100%;padding:8px 36px 8px 34px;border:1px solid var(--main-input-border);border-radius:var(--radius);background:var(--main-input);color:var(--main-text);font-size:13px;font-family:inherit;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
.conv-search-input:focus:not(:focus-visible){outline:none;border-color:var(--purple);box-shadow:var(--focus-ring)}
.conv-search-input::placeholder{color:var(--text-placeholder)}
.conv-search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;color:var(--main-text-muted);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm)}
.conv-search-clear:hover{color:var(--main-text);background:var(--main-card-hover)}
.conv-search-clear svg{width:14px;height:14px;display:block}
.conv-search-input:placeholder-shown ~ .conv-search-clear{display:none}
/* Contacts panel search clear-X. Matches conversations pattern. */
/* Contacts search clear-X. Explicit dimensions so svg renders inside the button.
   Button has fixed 22x22 size, svg centered via flex. Auto-hides when input empty. */
.c-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;background:none;border:none;cursor:pointer;padding:0;
  color:var(--main-text-muted);font-size:18px;line-height:1;font-family:inherit;
  display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm)}
.c-search-clear:hover{color:var(--main-text);background:var(--main-card-hover)}
.search-box input:placeholder-shown ~ .c-search-clear{display:none}
.search-box input{padding-right:34px}
.gclr-btn{position:fixed;z-index:100000;width:20px;height:20px;display:none;
  align-items:center;justify-content:center;cursor:pointer;border:none;padding:0;margin:0;
  background:transparent;color:var(--main-text-muted);border-radius:50%;
  font-size:15px;line-height:1;font-family:inherit}
.gclr-btn:hover{color:var(--main-text);background:var(--main-card-hover)}
.conv-stats{display:flex;align-items:center;gap:18px;flex-shrink:0;flex-wrap:wrap}
.conv-stat{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--main-text-muted);white-space:nowrap}
.conv-stat svg{width:14px;height:14px;flex-shrink:0;color:var(--main-text-muted)}
.conv-stat-value{font-size:13px;font-weight:600;color:var(--main-text)}
.conv-stat-value.muted{color:var(--main-text-muted);font-weight:500}
.conv-stat-value.warn{color:var(--warning-text)}
/* The Unanswered stat is a toggle for the waiting-only list. */
.conv-stat-btn{background:none;border:1px solid transparent;border-radius:var(--radius-full);padding:3px 8px;margin:-4px -8px;font-family:inherit;cursor:pointer}
.conv-stat-btn:hover{background:var(--main-card-hover)}
/* Who else on staff read the latest patient message, under the thread. */
.conv-read-by{font-size:11px;color:var(--main-text-muted);padding:2px 6px;align-self:flex-start}
.conv-stat-btn.active{background:var(--purple-dim);border-color:var(--purple)}
.conv-stat-btn.active span{color:var(--purple)}
.conv-actionbar-spacer{flex:1}
.conv-new-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:var(--orange);color:#fff;border:none;border-radius:var(--radius);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s;flex-shrink:0}
.conv-new-btn:hover:not(:disabled){background:var(--orange-hover)}
.conv-new-btn:active:not(:disabled){background:var(--orange-active)}
.conv-new-btn:disabled{opacity:.55;cursor:not-allowed}
.conv-new-btn svg{width:14px;height:14px}
.conv-composer-overlay{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:var(--z-app-overlay);padding:20px}.conv-composer-card{width:100%;max-width:560px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;background:var(--bg-panel);border:1px solid var(--purple-border);border-radius:var(--radius-lg);overflow:hidden}
.conv-composer-card .modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.conv-composer-card .modal-title{font-size:16px;font-weight:700;color:#fff}
.surface-light.conv-composer-card .modal-title{color:var(--main-text)}
.conv-composer-close{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}
.conv-composer-close:hover{background:var(--bg-card-hover);color:var(--text)}
.conv-composer-close svg{width:18px;height:18px}
.conv-composer-card .modal-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px;color:var(--text)}
.conv-composer-card .modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--border)}
.conv-composer-section{margin-bottom:18px}
.conv-composer-section:last-child{margin-bottom:0}
.conv-composer-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);margin-bottom:8px}
.conv-composer-search-wrap{position:relative}
.conv-composer-search{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-input);color:var(--text);font-size:13px;font-family:inherit;box-sizing:border-box}
.conv-composer-search:focus:not(:focus-visible){outline:none;border-color:var(--purple);box-shadow:var(--focus-ring)}
.conv-composer-search::placeholder{color:var(--text-placeholder)}
.conv-composer-results{margin-top:8px;max-height:240px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card)}.conv-composer-result{display:flex;gap:10px;padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .12s}
.conv-composer-result:last-child{border-bottom:none}
.conv-composer-result:hover{background:var(--bg-card-hover)}
.conv-composer-result-avatar{width:32px;height:32px;border-radius:var(--radius-full);background:var(--purple-dim);color:var(--purple);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;text-transform:uppercase}
.conv-composer-result-body{flex:1;min-width:0}
.conv-composer-result-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-composer-result-meta{font-size:11px;color:var(--text-muted);display:flex;gap:10px;flex-wrap:wrap}
.conv-composer-result-meta span{display:inline-flex;align-items:center;gap:3px}
.conv-composer-empty{padding:20px;text-align:center;color:var(--text-muted);font-size:12px}
.conv-composer-pinned{display:flex;gap:10px;align-items:center;padding:10px 12px;background:var(--purple-dim);border:1px solid var(--purple-border);border-radius:var(--radius);margin-bottom:0}.conv-composer-pinned-clear{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.conv-composer-pinned-clear:hover{background:var(--bg-card-hover);color:var(--text)}
.conv-composer-pinned-clear svg{width:14px;height:14px}
.conv-composer-channel-row{display:flex;gap:8px}
.conv-composer-channel-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-full);background:var(--bg-card);color:var(--text-muted);font-size:13px;font-weight:600;border:1px solid var(--border);cursor:pointer;font-family:inherit;transition:all .15s}
.conv-composer-channel-pill:hover:not(:disabled){background:var(--bg-card-hover);color:var(--text)}
.conv-composer-channel-pill.active{background:var(--purple);color:#fff;border-color:var(--purple)}
.conv-composer-channel-pill:disabled{opacity:.4;cursor:not-allowed}
.conv-composer-channel-pill svg{width:14px;height:14px}
.conv-composer-subject{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-input);color:var(--text);font-size:13px;font-family:inherit;box-sizing:border-box;margin-bottom:8px}
.conv-composer-subject:focus:not(:focus-visible){outline:none;border-color:var(--purple);box-shadow:var(--focus-ring)}
.conv-composer-subject::placeholder{color:var(--text-placeholder)}.conv-composer-body-input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-input);color:var(--text);font-size:13px;font-family:inherit;box-sizing:border-box;resize:vertical;min-height:120px;line-height:1.5}
.conv-composer-body-input:focus:not(:focus-visible){outline:none;border-color:var(--purple);box-shadow:var(--focus-ring)}
.conv-composer-body-input::placeholder{color:var(--text-placeholder)}
.conv-composer-body-input:disabled{opacity:.6;cursor:not-allowed}
.conv-composer-error{padding:10px 12px;background:var(--danger-dim);color:var(--danger-text);border:1px solid var(--danger);border-radius:var(--radius);font-size:12px;margin-top:12px}.conv-composer-cancel{padding:8px 14px;background:none;border:1px solid var(--border);border-radius:var(--radius);color:var(--text-muted);font-size:13px;font-weight:500;cursor:pointer;font-family:inherit}
.conv-composer-cancel:hover{background:var(--bg-card-hover);color:var(--text)}
.conv-composer-send{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;margin-left:auto;background:var(--orange);color:#fff;border:none;border-radius:var(--radius);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}
.conv-composer-send:hover:not(:disabled){background:var(--orange-hover)}
.conv-composer-send:active:not(:disabled){background:var(--orange-active)}
.conv-composer-send:disabled{opacity:.45;background:var(--main-border);color:var(--main-text-muted);cursor:not-allowed}
.conv-composer-send svg{width:14px;height:14px}
.conv-main{flex:1;display:flex;min-height:0;overflow:hidden}
.conv-list{width:380px;flex-shrink:0;border-right:1px solid var(--main-border);background:var(--main-card);overflow-y:auto}
.conv-list>.skel-wrap{padding:16px}
.conv-list>.empty-state.compact{padding:40px 20px}
.conv-thread>.skel-wrap{padding:24px}
.conv-slot{display:contents}
.conv-template-iframe{display:block;width:100%;height:300px;border:0}
.conv-list-item{padding:14px 16px;border-bottom:1px solid var(--main-border);cursor:pointer;display:flex;gap:12px;transition:background .12s;border-left:3px solid transparent}
.conv-list-item:hover{background:var(--main-card-hover)}
.conv-list-item.active{background:var(--purple-dim);border-left-color:var(--purple)}
.conv-list-item.unread{background:var(--main-bg)}
.conv-list-item.unread.active{background:var(--purple-dim)}
.conv-avatar{width:36px;height:36px;border-radius:var(--radius-full);background:var(--purple-dim);color:var(--purple);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;text-transform:uppercase}
.conv-list-body{flex:1;min-width:0}
.conv-list-row1{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:3px}
.conv-list-name{font-size:13px;font-weight:600;color:var(--main-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-list-item.unread .conv-list-name{font-weight:700}
.conv-list-time{font-size:11px;color:var(--main-text-muted);flex-shrink:0;white-space:nowrap}
.conv-list-item.unread .conv-list-time{color:var(--purple);font-weight:600}
.conv-list-preview{font-size:12px;color:var(--main-text-muted);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.conv-list-item.unread .conv-list-preview{color:var(--main-text)}
.conv-list-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:4px}
.conv-list-channel{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--main-text-muted)}
.conv-list-assignee{font-size:11px;color:var(--main-text-muted)}
.conv-list-channel + .conv-list-assignee::before{content:"\00b7";margin-right:6px}
.conv-list-you{color:var(--main-text);font-weight:600}
/* Same custom chevron as .ctl-pill: the native arrow sat flush against the
   text and off-center next to the header buttons. Height matches
   .conv-thread-action. */
.conv-assign-wrap{position:relative;display:inline-flex}
.conv-assign-wrap::after{content:'';position:absolute;right:11px;top:50%;width:5px;height:5px;margin-top:-4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);color:var(--main-text-muted);pointer-events:none}
.conv-assign-select{appearance:none;-webkit-appearance:none;font-size:12px;line-height:1.2;border:1px solid var(--main-border);border-radius:var(--radius);background:var(--main-card);color:var(--main-text);padding:6px 28px 6px 12px;cursor:pointer;font-family:inherit;max-width:170px;text-overflow:ellipsis}
.conv-assign-select:hover{background:var(--main-card-hover)}
.conv-assign-select:focus-visible{outline:none;border-color:var(--purple);box-shadow:var(--focus-ring)}
.conv-list-channel svg{width:11px;height:11px}
.conv-list-unread-dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--purple);flex-shrink:0;margin-left:auto}
.conv-thread{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--main-bg-sunk)}
.conv-thread-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--main-text-muted);padding:40px;text-align:center}
.conv-thread-empty svg{width:48px;height:48px;margin-bottom:14px;opacity:.4}
.conv-thread-empty h3{font-size:15px;font-weight:600;margin-bottom:6px;color:var(--main-text)}
.conv-thread-empty p{font-size:13px;max-width:280px}
.conv-thread-head{background:var(--main-card);border-bottom:1px solid var(--main-border);padding:14px 20px;flex-shrink:0;display:flex;align-items:center;gap:12px}
.conv-thread-head-info{flex:1;min-width:0}
.conv-thread-head-name{font-size:14px;font-weight:700;color:var(--main-text)}
.conv-thread-head-meta{font-size:12px;color:var(--main-text-muted);margin-top:2px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
/* The channel icon had no size rule, so the SVG filled its box at full size
   and pushed the label onto its own line. */
.conv-thread-head-ch{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-weight:600}
.conv-thread-head-ch svg{width:13px;height:13px;flex-shrink:0}
.conv-thread-head-contact{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Below 1280px the header buttons take their own row under the name, so the
   name, channel and contact line are not squeezed into a sliver. */
@media (max-width:1280px){.conv-thread-head-actions{flex-basis:100%;flex-wrap:wrap;padding-left:48px}}
@media (max-width:900px){.conv-thread-head-actions{padding-left:0}}
.conv-thread-head-actions{display:flex;gap:6px}
.conv-thread-action{padding:6px 12px;font-size:12px;border-radius:var(--radius);background:none;border:1px solid var(--main-border);color:var(--main-text-muted);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.conv-thread-action:hover{background:var(--main-card-hover);color:var(--main-text)}
.conv-thread-action.danger{color:var(--danger-text);border-color:var(--danger-dim)}
.conv-thread-action.danger:hover{background:var(--danger-dim);color:var(--danger-text)}
.sb-badge{margin-left:auto;flex-shrink:0;background:var(--purple);color:var(--sb-text-strong);font-size:10px;font-weight:700;min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.sb-badge-alert{background:var(--orange)}
.sb-item{position:relative}
.conv-thread-action svg{width:13px;height:13px}
.conv-thread-status{display:inline-block;font-size:10px;padding:2px 8px;border-radius:var(--radius-full);letter-spacing:.06em;font-weight:700}
.conv-thread-status.open{background:var(--success-dim);color:var(--success-text)}
.conv-thread-status.closed{background:var(--main-border);color:var(--main-text-muted)}
.conv-thread-status.archived{background:var(--text-disabled);color:var(--main-text-muted)}
.conv-thread-messages{flex:1;overflow-y:auto;padding:24px 28px;display:flex;flex-direction:column;gap:14px;max-width:880px;width:calc(100% - 32px);margin:16px auto;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.conv-msg{max-width:82%;display:flex;flex-direction:column;gap:4px}
.conv-msg.outbound{align-self:flex-end;align-items:flex-end}
.conv-msg.inbound{align-self:flex-start;align-items:flex-start}
.conv-msg-bubble{padding:10px 14px;border-radius:var(--radius-lg);font-size:13px;line-height:1.5;overflow-wrap:anywhere;word-break:break-word;min-width:0;max-width:100%}
.conv-msg.outbound .conv-msg-bubble{background:var(--purple);color:#fff;border-bottom-right-radius:var(--radius-sm)}
.conv-msg.inbound .conv-msg-bubble{background:var(--main-card);color:var(--main-text);border:1px solid var(--main-border);border-bottom-left-radius:var(--radius-sm)}
.conv-msg-subject{font-weight:600;margin-bottom:4px;font-size:12px;opacity:.95}
.conv-msg-body{white-space:pre-wrap}
.conv-msg.outbound .conv-msg-bubble.failed{background:var(--danger);}
/* A run of messages from one side stacks tight; only the last keeps the
   tail corner and the meta line. The container gap is 14px. */
.conv-msg.is-grouped{margin-bottom:-10px}
.conv-msg.outbound.is-grouped .conv-msg-bubble{border-bottom-right-radius:var(--radius-lg)}
.conv-msg.inbound.is-grouped .conv-msg-bubble{border-bottom-left-radius:var(--radius-lg)}
.conv-presence{padding:6px 20px;font-size:12px;color:var(--main-text-muted);background:var(--main-card);border-bottom:1px solid var(--main-border);flex-shrink:0}
.conv-presence.is-typing{color:var(--warning-text);background:var(--warning-dim);font-weight:600}
.conv-quick-replies{display:flex;flex-wrap:wrap;gap:6px}
.conv-quick-reply{font-size:12px;font-weight:600;padding:3px 10px;border-radius:var(--radius-full);border:1px solid var(--main-border);background:var(--main-bg);color:var(--main-text-muted);cursor:pointer;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-quick-reply:hover{border-color:var(--purple);color:var(--purple);background:var(--purple-dim)}
.conv-msg-meta{font-size:10px;color:var(--main-text-muted);display:flex;align-items:center;gap:6px;padding:0 6px}
.conv-msg-source{text-transform:uppercase;letter-spacing:.05em;font-weight:600;opacity:.8}
.conv-msg-sms-pill{display:inline-block;background:var(--success-dim);color:var(--success-text);border-radius:8px;padding:1px 6px;font-size:9px;font-weight:700;letter-spacing:.05em;margin-right:4px}
.conv-sms-blocker{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:12px;background:var(--warning-dim);color:var(--warning-text);border:1px solid var(--warning-light);border-bottom:none;border-radius:var(--radius) var(--radius) 0 0}
.conv-composer-wrap{flex-shrink:0;padding:0 0 16px;max-width:880px;width:calc(100% - 32px);margin:0 auto;box-sizing:border-box}
.conv-phi-reminder{display:flex;align-items:center;gap:6px;margin-top:8px;padding:6px 10px;font-size:11px;color:var(--main-text-muted);background:var(--warning-dim);border:1px solid var(--warning-border,var(--warning));border-radius:var(--radius-sm);line-height:1.4}
.conv-phi-reminder svg{flex-shrink:0;color:var(--warning-text)}
.conv-phi-reminder.conv-phi-reminder-dark{margin-top:8px;background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3);color:var(--text-muted)}
.conv-phi-reminder.conv-phi-reminder-dark svg{color:var(--warning-light)}
/* SMS consent state for the open thread. Makes the reply window visible so a
   conversation converts into real consent instead of expiring silently. */
.conv-consent-note{display:flex;align-items:flex-start;gap:9px;padding:10px 20px;font-size:12px;line-height:1.45;background:var(--warning-dim);border-bottom:1px solid var(--warning-border,var(--warning));color:var(--main-text);flex-shrink:0}
.conv-consent-note.blocked{background:var(--danger-dim);border-bottom-color:var(--danger-dim)}
.conv-consent-note svg{flex-shrink:0;width:14px;height:14px;margin-top:1px;color:var(--warning-text)}
.conv-consent-note.blocked svg{color:var(--danger-text)}
.conv-consent-body{flex:1;min-width:0}
.conv-consent-title{font-weight:700}
.conv-consent-sub{color:var(--main-text-muted);margin-top:2px}
.conv-composer{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.conv-composer textarea{width:100%;min-height:60px;max-height:160px;border:none;outline:none;resize:none;background:transparent;font-family:inherit;font-size:14px;line-height:1.55;color:var(--main-text);padding:0;box-sizing:border-box}
.conv-composer textarea::placeholder{color:var(--main-text-muted)}
.conv-composer-actions{display:flex;align-items:center;gap:12px;padding-top:8px;border-top:1px solid var(--main-border)}
.conv-composer-meta{font-size:11px;color:var(--main-text-muted);display:flex;align-items:center;gap:10px}
.conv-composer-meta .char-count.over{color:var(--danger-text);font-weight:600}
.conv-composer-disabled{padding:14px 16px;font-size:13px;color:var(--main-text-muted);text-align:center;background:var(--main-card);border:1px dashed var(--main-border);border-radius:var(--radius-lg)}
.conv-composer-disabled button{background:none;border:none;color:var(--purple);font-weight:600;cursor:pointer;padding:0;font-size:inherit;text-decoration:underline}
.conv-msg.sending .conv-msg-bubble{opacity:.6}
.conv-msg-retry{margin-left:8px;background:none;border:none;color:var(--danger-text);cursor:pointer;font-weight:600;font-size:11px;text-decoration:underline;padding:0}
.conv-msg-date-divider{align-self:center;font-size:10px;color:var(--main-text-muted);background:var(--main-card);padding:3px 10px;border-radius:var(--radius-full);border:1px solid var(--main-border);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
/* Conversations attachments (email) */
.conv-composer-actions{justify-content:flex-start}
.conv-attach-btn{display:inline-flex;align-items:center;justify-content:center;padding:6px;background:none;border:1px solid var(--main-border);border-radius:var(--radius);color:var(--main-text-muted);cursor:pointer;transition:color .15s,border-color .15s}
.conv-attach-btn:hover{color:var(--purple);border-color:var(--purple)}
.conv-composer-attach{display:flex;align-items:flex-start;gap:8px;margin-top:8px}
.conv-attach-chips{display:flex;flex-wrap:wrap;gap:6px}
.conv-attach-chips:empty{display:none}
.conv-attach-chip{display:inline-flex;align-items:center;gap:6px;max-width:220px;padding:4px 8px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:var(--radius);font-size:12px;color:var(--main-text)}
.conv-attach-chip svg{flex:0 0 auto;color:var(--main-text-muted)}
.conv-attach-chip.uploading{opacity:.7}
.conv-attach-chip.error{border-color:var(--danger);color:var(--danger-text)}
.conv-attach-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-attach-chip-size{flex:0 0 auto;color:var(--main-text-muted);font-size:11px}
.conv-attach-chip-x{flex:0 0 auto;background:none;border:none;color:var(--main-text-muted);cursor:pointer;font-size:16px;line-height:1;padding:0 2px}
.conv-attach-chip-x:hover{color:var(--danger-text)}
.conv-attach-chip-spin{flex:0 0 auto;width:12px;height:12px;border:2px solid var(--main-text-muted);border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite}
.conv-msg-attachments{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.conv-msg-att{display:inline-flex;align-items:center;gap:6px;max-width:240px;padding:5px 9px;border-radius:var(--radius);font-size:12px;text-decoration:none;overflow-wrap:anywhere}
.conv-msg-att svg{flex:0 0 auto}
.conv-msg-att-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-msg-att-size{flex:0 0 auto;opacity:.75;font-size:11px}
.conv-msg-att.disabled{cursor:default;opacity:.6}
.conv-msg-att.image{padding:0;max-width:220px;border-radius:var(--radius);overflow:hidden}
.conv-msg-att.image img{display:block;max-width:220px;max-height:220px;width:auto;height:auto}
.conv-msg.outbound .conv-msg-att.file{background:rgba(255,255,255,.16);color:#fff}
.conv-msg.outbound .conv-msg-att.file:hover{background:rgba(255,255,255,.26)}
.conv-msg.inbound .conv-msg-att.file{background:var(--main-bg);color:var(--main-text);border:1px solid var(--main-border)}
.conv-msg.inbound .conv-msg-att.file:hover{border-color:var(--purple)}

/* FORMS PANEL. No tab bar since 2026-10-15: each view's toolbar starts with
   the Forms / Contracts switcher (.cat-seg), Catalog's list shape below. */
.fm-toolbar .fm-search{margin-left:0}
.fm-toolbar .fm-primary{margin-left:auto}
.fm-toolbar .fm-primary+.btn{margin-left:0}
.fm-toolbar .btn .cat-seg-n{margin-left:2px}
.fm-check{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--main-text-muted);cursor:pointer}
.fm-check input{accent-color:var(--purple)}
.fm-list-t col.fm-c-nm{width:auto}
.fm-list-t col.fm-c-st{width:110px}
.fm-list-t col.fm-c-subs{width:170px}
.fm-list-t col.fm-c-upd{width:120px}
.fm-subs-t col.fm-c-from{width:34%}
.fm-subs-t col.fm-c-when{width:190px}
.fm-new{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:var(--radius-full);background:var(--purple-dim);color:var(--purple);font-size:11px;font-weight:700}
.prod-sub .fm-new{margin-left:0}
.fm-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--purple);margin-right:7px;vertical-align:middle}
.fm-subs-t tr:not(.is-unread) .gc-var-nm{font-weight:500}
.fm-more{display:flex;justify-content:center;margin-top:12px}
.fm-back{display:flex;align-items:center;gap:8px;margin-bottom:14px;min-width:0}
.fm-back-sep{color:var(--main-text-muted)}
.fm-back-title{font-family:'Exo 2',sans-serif;font-size:15px;font-weight:700;color:var(--main-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm-modal-p{color:var(--main-text-muted);margin:0 0 10px;line-height:1.55}
.fm-del-autos{font-size:12.5px;padding:9px 12px;border-radius:var(--radius);background:var(--main-bg);line-height:1.5}
.fm-del-autos.is-warn{background:var(--warning-dim);color:var(--warning-text)}
.fm-danger-text{color:var(--danger-text)}
.fm-share{display:flex;flex-direction:column;gap:12px;max-width:860px}
.fm-share-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:14px;color:var(--main-text)}
.fm-share-h{font-family:'Exo 2',sans-serif;font-size:14px;font-weight:700;margin-bottom:3px}
.fm-share-sub{font-size:12px;color:var(--main-text-muted);margin-bottom:9px}
.fm-share-row{display:flex;gap:8px;align-items:center}
.fm-share-in{flex:1;min-width:0;background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);color:var(--main-text);padding:8px 12px;font-size:12px;font-family:monospace;outline:none}
.fm-share-card .fb-code-block{margin-bottom:9px}
.fm-share-warn{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;max-width:860px;margin-bottom:12px;padding:10px 14px;border-radius:var(--radius);background:var(--warning-dim);color:var(--warning-text);font-size:12.5px;line-height:1.5}
.fm-share-warn .btn{margin-left:auto}
/* Contract template editor (079), its own layer under #modal-overlay so a
   confirm can sit on top. The form column pads its scroll box so focus rings
   are not clipped at the sides. */
.cte-backdrop{position:fixed;inset:0;background:var(--overlay);z-index:var(--z-app-overlay);display:flex;align-items:center;justify-content:center;padding:20px}
/* Over the Send Agreement dialog (#modal-overlay, 1500), under the confirm layers (1600+). */
.cte-backdrop.cte-over{z-index:calc(var(--z-modal) + 50)}
.cte-box{background:var(--main-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:1100px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.cte-head{padding:16px 24px;border-bottom:1px solid var(--main-border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.cte-title{font-family:'Exo 2',sans-serif;font-size:17px;font-weight:700;color:var(--main-text)}
.cte-x{background:none;border:none;color:var(--main-text-muted);cursor:pointer;font-size:22px;line-height:1;padding:4px 8px;border-radius:var(--radius)}
.cte-x:hover{color:var(--main-text);background:var(--main-card-hover)}
.cte-main{padding:16px 20px;overflow:hidden;flex:1;display:flex;gap:20px;min-height:0}
.cte-form{flex:1.2;display:flex;flex-direction:column;overflow-y:auto;min-width:0;padding:6px 8px 6px 6px}
.cte-field{margin-bottom:16px}
.cte-half{max-width:260px}
.cte-lbl{display:block;font-size:12px;font-weight:700;color:var(--main-text);margin-bottom:6px}
.cte-lbl-note{color:var(--main-text-muted);font-weight:400}
.cte-lbl-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cte-lbl-row .cte-lbl{margin-bottom:0}
.cte-in{width:100%;padding:9px 12px;background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);color:var(--main-text);font-size:14px;font-family:inherit}
textarea.cte-in{resize:vertical;font-size:13px;line-height:1.5}
.cte-var-wrap{position:relative}
.cte-varmenu{position:absolute;right:0;top:34px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);box-shadow:var(--shadow-md);width:260px;max-height:340px;overflow-y:auto;z-index:10}
.cte-rte{border:1px solid var(--main-input-border);border-radius:var(--radius);background:var(--main-input);overflow:hidden}
.cte-rte:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-dim)}
.cte-tb{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 8px;background:var(--main-card);border-bottom:1px solid var(--main-border)}
.cte-tb-sel{padding:5px 8px;background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius-sm);color:var(--main-text);font-size:12px;cursor:pointer}
.cte-tb-sep{width:1px;height:18px;background:var(--main-border);margin:0 4px}
.cte-tb-btn{min-width:28px;height:28px;padding:0 6px;background:none;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--main-text);font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.cte-tb-btn:hover{background:var(--main-card-hover);border-color:var(--main-border)}
/* The frame (.cte-rte:focus-within) draws the ring: an outline on the body would be clipped by the frame's overflow. */
.cte-body:focus-visible{outline:none}
.cte-body{min-height:240px;max-height:50vh;overflow-y:auto;padding:14px;color:var(--main-text);font-size:14px;font-family:Lato,sans-serif;line-height:1.5;outline:none}
.cte-hint{display:block;font-size:11.5px;line-height:1.5;color:var(--main-text-muted);margin-top:6px}
.cte-check{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px;padding:12px 14px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);cursor:pointer;font-size:13px;color:var(--main-text)}
.cte-check input{margin-top:3px;flex-shrink:0;width:16px;height:16px;cursor:pointer;accent-color:var(--purple)}
.cte-check .cte-hint{margin-top:2px}
.cte-prev-col{flex:1;display:flex;flex-direction:column;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);overflow:hidden;min-width:0}
.cte-prev-head{padding:10px 14px;border-bottom:1px solid var(--main-border);display:flex;align-items:center;justify-content:space-between}
.cte-prev-head .cte-hint{margin-top:0}
.cte-prev-title{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--main-text-muted)}
.cte-prev{flex:1;overflow-y:auto;padding:24px;background:#ffffff;color:var(--main-text);font-family:Lato,sans-serif;font-size:13px;line-height:1.6}
.cte-prev-empty{color:var(--text-placeholder);font-style:italic}
.cte-prev-sign{margin-top:22px;padding-top:16px;border-top:1px solid var(--main-border)}
.cte-prev-agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:18px}
.cte-prev-agree input{margin-top:3px;flex-shrink:0}
.cte-prev-sigline{width:60%;max-width:260px;padding-top:6px;border-top:1px solid var(--main-text);font-size:11px;color:var(--main-text-muted);margin-top:34px}
.cte-foot{padding:14px 24px;border-top:1px solid var(--main-border);display:flex;justify-content:space-between;gap:12px;flex-shrink:0}
.cte-foot-r{display:flex;gap:8px}
@media (max-width:860px){.cte-main{flex-direction:column;overflow-y:auto}.cte-form{overflow:visible}.cte-prev-col{min-height:240px}}
/* Send Contract dialog (078) on #modal-overlay, modal-xxl. */
.sc-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:20px;min-height:0}
.sc-form{min-width:0;padding:2px 6px 2px 2px}
.sc-sec{font-family:'Exo 2',sans-serif;font-size:13.5px;font-weight:700;color:var(--main-text);margin:18px 0 10px;padding-top:14px;border-top:1px solid var(--main-border)}
.sc-form>.sc-sec:first-child{margin-top:0;padding-top:0;border-top:none}
.sc-gap{margin-top:12px}
.sc-search-wrap{position:relative}
.sc-results{position:absolute;left:0;right:0;top:44px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);box-shadow:var(--shadow-md);max-height:280px;overflow-y:auto;z-index:10}
.sc-res-row{display:block;width:100%;text-align:left;padding:9px 12px;border:none;border-top:1px solid var(--main-border);background:none;font-family:inherit;font-size:13px;color:var(--main-text);cursor:pointer}
.sc-res-row:first-child{border-top:none}
.sc-res-row:hover,.sc-res-row:focus-visible{background:var(--main-card-hover)}
.sc-res-row.is-off{cursor:not-allowed;opacity:.6}
.sc-res-row.is-off:hover{background:none}
.sc-res-add{color:var(--purple);font-weight:700}
.sc-res-sub{font-size:11.5px;color:var(--main-text-muted);margin-top:2px}
.sc-res-warn{font-size:11px;color:var(--danger-text);margin-top:2px}
.sc-res-note{padding:12px;color:var(--main-text-muted);font-size:12px;text-align:center}
.sc-res-note.is-error{color:var(--danger-text)}
.sc-chip{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px 8px 12px;background:var(--purple-dim);border:1px solid var(--purple-border);border-radius:var(--radius);font-size:13px;color:var(--main-text)}
.sc-tmpl-row{display:flex;gap:6px;align-items:center}
.sc-tmpl-row .cte-in{flex:1;min-width:0}
.sc-tmpl-menu{flex:none}
.sc-catalog{margin-bottom:8px}
.sc-item{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.sc-item .sc-item-lbl{flex:2;min-width:0}
.sc-item .sc-item-price{flex:1;min-width:0}
.sc-days{max-width:120px}
.fb-check.is-off{opacity:.5}
.sc-prev-col{min-height:420px}
@media (max-width:860px){.sc-grid{grid-template-columns:1fr}.sc-prev-col{min-height:280px}}
/* Sent-contract detail (078) on #modal-overlay, modal-lg. */
.ced-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.ced-head-r{margin-left:auto;display:flex;align-items:center;gap:6px}
.ced-card{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;padding:14px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);margin-bottom:6px}
.ced-k{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--main-text-muted);margin-bottom:4px}
.ced-v{font-size:13.5px;font-weight:600;color:var(--main-text)}
.ced-sub{display:block;font-size:11.5px;font-weight:400;color:var(--main-text-muted);margin-top:2px}
.ced-sec{font-family:'Exo 2',sans-serif;font-size:13.5px;font-weight:700;color:var(--main-text);margin:18px 0 8px;cursor:default}
.ced-tl{border:1px solid var(--main-border);border-radius:var(--radius);overflow:hidden;background:var(--main-card)}
.ced-tl-row{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:13px;color:var(--main-text)}
.ced-tl-row+.ced-tl-row{border-top:1px solid var(--main-border)}
.ced-tl-ic{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--purple-dim);color:var(--purple)}
.ced-tl-ic.is-signed{background:var(--success-dim);color:var(--success-text)}
.ced-tl-ic.is-voided{background:var(--danger-dim);color:var(--danger-text)}
.ced-tl-lbl{flex:1;min-width:0}
.ced-tl-ts{font-size:12px;color:var(--main-text-muted);white-space:nowrap}
.ced-doc summary{cursor:pointer;list-style:revert}
.ced-doc-body{max-height:400px;border:1px solid var(--main-border);border-radius:var(--radius)}
.ced-ref{margin-top:14px;font-family:monospace}
@media (max-width:600px){.ced-card{grid-template-columns:1fr}}
.ce-list-t col.ce-c-who{width:28%}
.ce-list-t col.ce-c-st{width:110px}
.ce-list-t col.ce-c-day{width:110px}
.ce-list-t col.ce-c-act{width:150px}
.ce-arch{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:var(--radius-full);background:var(--main-bg);color:var(--main-text-muted);font-size:10px;font-weight:700;vertical-align:middle}
.ce-pager{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px;font-size:12px;color:var(--main-text-muted)}
.ce-pager>span:first-child{margin-right:auto}
.ce-pager-n{font-weight:700;color:var(--main-text)}
.ct-tmpl-t col.ct-tmpl-c-n{width:80px}
.ct-tmpl-t col.ct-tmpl-c-upd{width:120px}
@media (max-width:860px){
  .fm-list-t col.fm-c-upd,.fm-list-t td.fm-upd,.fm-list-t th:nth-child(4){display:none}
  .fm-toolbar .fm-search{flex:1 1 100%;max-width:none;order:3}
  .ce-list-t col.ce-c-act,.ce-list-t td:nth-child(5),.ce-list-t th:nth-child(5){display:none}
}

@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
/* ===== FORM BUILDER ===== */
#fb-overlay{position:fixed;inset:0;background:var(--main-bg);z-index:150;display:flex;flex-direction:column;overflow:hidden;--bg-panel:var(--main-card);--bg-card:var(--main-bg);--bg-card-hover:var(--main-card-hover);--bg-input:var(--main-input);--text:var(--main-text);--text-muted:var(--main-text-muted);--text-dim:var(--main-text-muted);--border:var(--main-border)}
.fb-topbar{height:52px;background:var(--bg-panel);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 14px;gap:8px;flex-shrink:0}
.fb-topbar .fm-back-sep{flex:none}
.fb-name-inp{background:transparent;border:1px solid transparent;color:var(--text);font-family:'Exo 2',sans-serif;font-size:15px;font-weight:700;outline:none;flex:1;min-width:0;padding:4px 8px;border-radius:6px;transition:background .15s,border-color .15s}
.fb-name-inp:hover{border-color:var(--border)}
.fb-name-inp:focus{background:var(--bg-input)}
.fb-status-sel{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:5px 9px;font-size:12px;font-family:Lato,sans-serif;outline:none;height:32px}
.fb-body{display:flex;flex:1;overflow:hidden;min-height:0}
.fb-picker{position:fixed;z-index:160;width:300px;max-height:min(440px,70vh);overflow-y:auto;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding-bottom:8px}
.fb-pal-search-wrap{position:sticky;top:0;z-index:4;background:var(--bg-panel);padding:10px 10px 8px;border-bottom:1px solid var(--border)}
.fb-pal-search{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:12px;font-family:Lato,sans-serif;padding:7px 9px 7px 30px;outline:none;box-sizing:border-box}
.fb-pal-search:focus{border-color:var(--purple)}
.fb-pal-search-ic{position:absolute;left:19px;top:18px;color:var(--text-dim);pointer-events:none}
.fb-pal-grp{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-dim);padding:11px 12px 6px;cursor:pointer;user-select:none}
.fb-pal-grp:hover{color:var(--text-muted)}
.fb-pal-grp span{flex:1}
.fb-pal-chev{flex-shrink:0;transition:transform .15s}
.fb-pal-chev.closed{transform:rotate(-90deg)}
.fb-pal-grp-count{background:var(--purple-dim);color:var(--purple-light);font-size:9px;padding:1px 6px;border-radius:8px;letter-spacing:0}
.fb-pal-grid{display:flex;flex-direction:column;gap:1px;padding:0 6px}
.fb-pal-item{display:flex;align-items:center;gap:9px;padding:7px 8px;border:1px solid transparent;border-radius:var(--radius);cursor:pointer;font-size:12.5px;font-weight:600;color:var(--text);background:transparent;transition:background .12s}
.fb-pal-item:hover{background:var(--purple-dim);color:var(--text)}
.fb-pal-item:active{cursor:grabbing}
.fb-pal-item svg{width:15px;height:15px;flex-shrink:0;color:var(--purple)}
.fb-pal-item span{line-height:1.25}
.fb-pal-newcf{display:flex;align-items:center;justify-content:center;gap:6px;width:calc(100% - 20px);margin:8px 10px 0;padding:9px;font-size:11px;font-weight:600;color:var(--purple);background:var(--purple-dim);border:1px dashed var(--purple-border);border-radius:var(--radius);cursor:pointer;font-family:Lato,sans-serif}
.fb-pal-newcf:hover{background:var(--purple-soft)}
.fb-pal-empty{font-size:11px;color:var(--text-dim);padding:14px 12px;text-align:center}
.fb-pal-subcat{font-size:10px;font-weight:600;color:var(--text-muted);padding:8px 12px 3px}
.fb-pal-cf-actions{display:flex;gap:5px;padding:8px 10px 0}
.fb-pal-cf-actions .fb-pal-newcf{margin:0;flex:1;width:auto}
.fb-pal-manage{display:flex;align-items:center;justify-content:center;gap:6px;flex:1;padding:9px;font-size:11px;font-weight:600;color:var(--text-muted);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;font-family:Lato,sans-serif}
.fb-pal-manage:hover{border-color:var(--purple-border);color:var(--text)}
/* Custom field manager modal */
.cf-mgr-cat{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;overflow:hidden}
.cf-mgr-cat-head{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg-card)}
.cf-mgr-cat-name{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;font-weight:600;padding:6px 8px;outline:none;font-family:Lato,sans-serif}
.cf-mgr-cat-name:focus{border-color:var(--purple)}
.cf-mgr-fields{padding:4px 10px}
.cf-mgr-field-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border)}
.cf-mgr-field-row:last-child{border-bottom:none}
.cf-mgr-field-label{flex:1;font-size:13px;font-weight:500}
.cf-mgr-empty{font-size:12px;color:var(--text-dim);padding:8px 10px}
.cf-mgr-addcat{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.cf-mgr-addcat input{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;padding:7px 9px;outline:none;font-family:Lato,sans-serif}
.fb-canvas-area{flex:1;overflow-y:auto;padding:28px 32px;background:var(--main-bg)}
.fb-pg-tabs-row{display:flex;align-items:center;gap:6px;margin:0 auto 14px;max-width:720px;flex-wrap:wrap}
.fb-pg-tab{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 5px;border-radius:var(--radius-full);font-size:12.5px;font-weight:700;cursor:pointer;border:1px solid var(--main-border);color:var(--main-text-muted);background:var(--main-card);font-family:inherit;max-width:220px}
.fb-pg-tab:hover{border-color:var(--purple-border);color:var(--main-text)}
.fb-pg-tab.active{background:var(--purple-dim);color:var(--purple);border-color:var(--purple-border)}
.fb-pg-tab.is-drop{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-dim)}
.fb-pg-tab[draggable="true"]{cursor:grab}
.fb-pg-mv[disabled]{opacity:.35;cursor:default}
.fb-key-warn .fb-cond-in{margin-top:4px;flex-basis:100%}
.fb-pg-n{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--main-bg);font-size:11px;flex:none}
.fb-pg-tab.active .fb-pg-n{background:var(--purple);color:#ffffff}
.fb-pg-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-pg-head{display:flex;align-items:center;gap:10px;margin:-6px 0 14px;padding-bottom:12px;border-bottom:1px dashed var(--main-border)}
.fb-pg-of{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--main-text-muted);white-space:nowrap}
.fb-pg-name{flex:1;min-width:0;border:1px solid transparent;background:transparent;border-radius:6px;padding:4px 8px;font-family:inherit;font-size:14px;font-weight:700;color:#222222;outline:none}
.fb-pg-name:hover{border-color:var(--main-border)}
.fb-pg-name:focus{border-color:var(--purple)}
.fb-canvas-center{max-width:720px;margin:0 auto}
.fb-page-canvas{background:#ffffff;border-radius:12px;padding:28px;min-height:280px;transition:background .2s;box-shadow:var(--shadow-sm)}
.fb-canvas-title{font-size:19px;font-weight:700;line-height:1.3;margin-bottom:16px;pointer-events:none;word-break:break-word}
.fb-canvas-submit{margin-top:20px;pointer-events:none}
.fb-fields-wrap{position:relative}
.fb-dropzone{height:14px;margin:0;position:relative;z-index:2;border-radius:3px;transition:height .12s,background .12s}
.fb-dropzone.dz-over{height:24px;background:var(--purple-dim)}
.fb-dz-line{position:absolute;top:50%;left:0;right:0;height:2px;background:var(--purple);border-radius:1px;transform:translateY(-50%);opacity:0;transition:opacity .1s}
.fb-dropzone.dz-over .fb-dz-line{opacity:1}
/* Shared drag-to-reorder drop-line indicator. box-shadow draws the line with no
   layout shift (a border would push the row and feel sluggish). The line sits on
   the edge nearest the cursor so it shows exactly where the item will land. */
.dnd-line-above{box-shadow:inset 0 2px 0 0 var(--purple)}
.dnd-line-below{box-shadow:inset 0 -2px 0 0 var(--purple)}
.fb-fields-wrap{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;grid-auto-flow:row dense}
.fb-field-wrap{position:relative;grid-column:span 2}
.fb-field-wrap.half-w{grid-column:span 1}
.fb-dropzone{grid-column:span 2}
.fb-fc{position:relative;background:transparent;border:1px solid transparent;border-radius:var(--radius);padding:8px 10px 10px 26px;cursor:pointer;transition:border-color .14s,box-shadow .14s;display:flex;align-items:flex-start;gap:8px}
.fb-fc:hover{border-color:var(--main-border);border-style:dashed}
.fb-fc.sel{border-color:var(--purple);border-style:solid;box-shadow:0 0 0 3px var(--purple-dim)}
.fb-fc.is-dragging{opacity:.3;border-style:dashed}
.fb-fc .dh{position:absolute;left:6px;top:10px;color:#bbb;cursor:grab;opacity:0;transition:opacity .12s}
.fb-fc:hover .dh,.fb-fc.sel .dh{opacity:1;color:#888}
.fb-fc .dh:active{cursor:grabbing}
.fb-fc .fp{flex:1;min-width:0}
.fb-fc .ft{font-size:9px;font-weight:700;text-transform:uppercase;color:#bbb;flex-shrink:0;padding-top:2px}
.fb-fc .fa{position:absolute;top:4px;right:6px;display:flex;gap:2px;opacity:0;transition:opacity .12s;background:#ffffff;border-radius:6px;box-shadow:var(--shadow-sm)}
.fb-fc:hover .fa,.fb-fc.sel .fa{opacity:1}
.fb-fc .fa .icon-btn-xs{color:#888}
.fb-fc .fa .icon-btn-xs:hover{color:#ff4000;background:rgba(255,64,0,.08)}
.fb-lbl{font-size:12.5px;font-weight:600;color:#222;margin-bottom:5px}
.fb-lbl .req{color:#ff4000;margin-left:2px}
.fb-mi{height:34px;background:var(--bg-input);border:1px solid var(--border);border-radius:8px}
.fb-mita{height:72px;background:#f8f8f8;border:1px solid var(--text-disabled);border-radius:8px}
.fb-msel{height:34px;background:#f8f8f8;border:1px solid var(--text-disabled);border-radius:8px;display:flex;align-items:center;padding:0 10px;font-size:11px;color:#bbb;justify-content:space-between}
.fb-mopt{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#444;padding:3px 0}
.fb-mopt-dot{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--text-disabled);flex-shrink:0}
.fb-mopt-box{width:11px;height:11px;border-radius:3px;border:1.5px solid var(--text-disabled);flex-shrink:0}
.fb-empty-drop{grid-column:1/-1;border:2px dashed var(--text-disabled);border-radius:var(--radius);padding:32px 20px;text-align:center;color:var(--main-text-muted);font-size:13px}
.fb-sp{width:340px;flex-shrink:0;background:var(--bg-panel);border-left:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column}
@media (max-width:1199px){.fb-sp{width:290px}.fb-canvas-area{padding:20px}}
.fb-sp-body{padding:4px 16px 20px;flex:1}
.fb-sl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin:10px 0 4px;display:block}
.fb-si{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:7px 9px;font-family:Lato,sans-serif;font-size:13px;outline:none;margin-bottom:8px}
.fb-si:focus{border-color:var(--purple)}
.fb-ss{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:7px 9px;font-family:Lato,sans-serif;font-size:13px;outline:none;margin-bottom:8px;height:36px}
.fb-toggle-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding:2px 0}
.fb-toggle-lbl{font-size:13px;font-weight:500;color:var(--text)}
.fb-sp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px 4px}
.fb-sp-back{display:inline-flex;align-items:center;gap:4px;background:none;border:none;padding:4px 0;font-family:inherit;font-size:12px;font-weight:700;color:var(--purple);cursor:pointer}
.fb-sp-back:hover{text-decoration:underline}
.fb-sp-kind{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.fb-sec{font-family:'Exo 2',sans-serif;font-size:13.5px;font-weight:700;color:var(--text);margin:18px 0 8px;padding-top:14px;border-top:1px solid var(--border)}
.fb-sp-body>.fb-sec:first-child{border-top:none;padding-top:8px;margin-top:6px}
.fb-hint{font-size:11.5px;line-height:1.5;color:var(--text-muted);margin:-2px 0 10px}
.fb-check{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text);cursor:pointer;margin:4px 0}
.fb-check input{accent-color:var(--purple)}
.fb-color-row{display:flex;gap:6px;align-items:center}
.fb-color-row .fb-si{flex:1;margin-bottom:0}
.fb-color-row+.fb-sl,.fb-color-row+.fb-color-row{margin-top:10px}
.fb-color-sw{width:36px;height:34px;flex:none;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;padding:2px;background:var(--bg-input)}
.fb-custom{margin-top:12px;padding-top:4px;border-top:1px dashed var(--border)}
.fb-saves-to{margin:4px 0 10px;padding:7px 10px;border-radius:var(--radius);background:var(--purple-dim);color:var(--purple);font-size:12px;font-weight:700}
.fb-key-warn{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:4px 0 10px;padding:8px 10px;border-radius:var(--radius);background:var(--warning-dim);color:var(--warning-text);font-size:12px;line-height:1.45}
.fb-key-warn .btn{margin-left:auto}
.fb-sl-quiet{margin-top:16px}
.fb-si-mono{font-family:monospace;font-size:12px}
.fb-to-contact{position:absolute;top:8px;right:10px;font-size:10.5px;font-weight:700;color:var(--purple);background:var(--purple-dim);padding:1px 7px;border-radius:var(--radius-full);pointer-events:none}
.fb-fc:hover .fb-to-contact,.fb-fc.sel .fb-to-contact{opacity:0}
.fb-dz-add{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;border:none;background:var(--purple);color:#ffffff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .12s;z-index:3}
.fb-dropzone:hover .fb-dz-add,.fb-dz-add:focus-visible{opacity:1}
.fb-dropzone:hover .fb-dz-line{opacity:.35}
.fb-dropzone.dz-over .fb-dz-add{opacity:0}
.fb-add-row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.fb-add-page{border-color:var(--main-border);color:var(--main-text-muted)}
.fb-add-page:hover{color:var(--purple);border-color:var(--purple-border)}
.fb-prev-pager{margin-top:18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fb-prev-step{margin-left:auto;font-size:12px;color:var(--main-text-muted)}
.fb-add{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px dashed var(--purple-border);border-radius:var(--radius-full);background:transparent;color:var(--purple);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.fb-add:hover{background:var(--purple-dim)}
.fb-opt-item{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.fb-opt-item input{min-width:0;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:7px 9px;font-size:13px;outline:none;font-family:Lato,sans-serif}
.fb-opt-item input:focus{border-color:var(--purple)}
.fb-opt-item .fb-opt-lbl{flex:2}
.fb-opt-item .fb-opt-val{flex:1;font-family:monospace;font-size:11.5px;color:var(--text-muted)}
.fb-wide-btn{width:100%;justify-content:center;margin-top:2px}
.fb-check-row{display:flex;gap:16px;margin-bottom:6px}
.fb-file-grp{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin:8px 0 3px}
.fb-cond-block{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:10px;margin-bottom:6px;display:flex;flex-direction:column;gap:6px}
.fb-cond-lead{font-size:12px;font-weight:700;color:var(--text)}
.fb-cond-in{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:7px 9px;font-size:13px;outline:none;font-family:Lato,sans-serif}
.fb-cond-in:focus{border-color:var(--purple)}
.fb-cond-block .btn{align-self:flex-start}
.fb-cond-rule{display:flex;flex-direction:column;gap:6px;padding-bottom:8px;border-bottom:1px dashed var(--border)}
.fb-cond-match{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:2px 6px;font-size:12px;font-weight:700;font-family:inherit}
.fb-cond-tag .is-warn{color:var(--warning-text)}
.fb-cond-tag{margin-top:6px;font-size:11.5px;font-weight:600;color:var(--purple)}
.fb-cond-tag.is-warn{color:var(--warning-text)}
.fb-col-row{display:flex;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:8px}
.fb-col-btn{flex:1;padding:6px;font-size:11px;font-weight:600;cursor:pointer;background:transparent;border:none;color:var(--text-muted);font-family:Lato,sans-serif;text-align:center;transition:all .12s}
.fb-col-btn.active{background:var(--purple);color:#fff}
/* Embed panel */
.fb-code-block{background:var(--main-bg);border:1px solid var(--main-border);border-radius:var(--radius);padding:12px;font-family:monospace;font-size:11px;color:var(--main-text);white-space:pre-wrap;word-break:break-all;max-height:160px;overflow-y:auto;line-height:1.6;margin-bottom:8px}
/* Preview overlay */
.fb-prev-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:600;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.fb-prev-card{background:#f4f4f8;border-radius:14px;width:100%;max-width:800px;max-height:92vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.6)}
/* #form-embed:start (extracted into book.mysparkplus.app/form.html by scripts/frontend/build-form-embed.js; uses --text-disabled, --purple, --orange, defined in that shell's :root) */
.fb-form-fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;grid-auto-flow:row dense}
.fb-form-fields-grid > .fb-prev-field{grid-column:span 2}
.fb-form-fields-grid > .fb-prev-field.half-w{grid-column:span 1}
.fb-form-fields-grid > hr{grid-column:span 2}
.fb-prev-head{padding:22px 24px 16px;border-bottom:1px solid #e0e0e8}
.fb-prev-head h2{font-size:18px;font-weight:700;color:#111;margin:0}
.fb-prev-body{padding:20px 24px 28px}
.fb-prev-field{margin-bottom:16px}
.fb-prev-label{display:block;font-size:14px;font-weight:700;color:#222;margin-bottom:6px}
.fb-prev-sublabel{display:block;font-size:12.5px;font-weight:600;margin-bottom:4px;opacity:.8}
.fb-prev-row{display:flex;gap:10px}
/* A missing answer (2026-10-26): red, apart from the button's color, said
   under the field and summed up at the top. */
.fb-field-bad .fb-prev-input,.fb-field-bad .fb-prev-select,.fb-field-bad .fb-prev-sig{border-color:var(--danger-text)!important}
.fb-field-err{margin-top:6px;font-size:13px;font-weight:700;line-height:1.45;color:var(--danger-text)}
.fb-err-summary{margin:0 0 16px;padding:12px 14px;border:1px solid var(--danger-text);border-radius:10px;font-size:14px;color:var(--danger-text)}
.fb-err-summary-h{font-weight:800;margin-bottom:2px}
.fb-err-link{display:inline-flex;align-items:center;min-height:32px;margin-right:14px;padding:0;background:none;border:none;font:inherit;font-weight:700;color:inherit;text-decoration:underline;cursor:pointer}
.fb-done{text-align:center;padding:40px 20px}
.fb-done-h{margin:0 0 14px;font-size:16px;font-weight:700}
.fb-done-link{font-weight:700;color:inherit}
/* The public form page (2026-10-26, approved mockup): the clinic's header,
   the title and time, step progress, the fields on a card, Next or Submit
   pinned to the bottom of a phone, a step list beside the form on a wide
   screen, and the sent screen. --fb-brand is the form's button color, set on
   the body; the main tokens are the app's, given light values in the
   standalone page's shell. */
.fb-page-body{margin:0;background:var(--main-bg);color:var(--main-text)}
.fb-top{background:var(--main-card);border-bottom:1px solid var(--main-border)}
.fb-top-in{max-width:1040px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;gap:12px}
.fb-top-logo{display:block;max-height:44px;max-width:180px;width:auto;height:auto}
.fb-top-mono{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--fb-brand,var(--purple));background:color-mix(in srgb,var(--fb-brand,var(--purple)) 12%,transparent)}
.fb-top-name{font-size:17px;font-weight:800;line-height:1.2}
.fb-top-sub{font-size:12px;color:var(--main-text-muted)}
.fb-shell{max-width:720px;margin:0 auto;padding:22px 16px 32px}
.fb-title{margin:0;font-size:26px;font-weight:800;line-height:1.2}
.fb-sub{margin:6px 0 16px;font-size:14px;line-height:1.5;color:var(--main-text-muted)}
.fb-progress{margin:0 0 16px}
.fb-progress-segs{display:grid;gap:6px}
.fb-seg{height:6px;border-radius:3px;background:var(--main-border)}
.fb-seg.on{background:var(--fb-brand,var(--purple))}
.fb-progress-label{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:13px;color:var(--main-text-muted)}
.fb-progress-label #fb-step-label{font-weight:700;color:var(--main-text)}
.fb-step-next{text-align:right}
.fb-shell-main{min-width:0}
.fb-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:16px;padding:20px 18px}
.fb-bar{display:flex;align-items:center;gap:10px;margin-top:16px}
.fb-bar-left{justify-content:flex-start}
.fb-bar-center{justify-content:center}
.fb-bar-right{justify-content:flex-end}
.fb-bar-full .fb-btn{flex:1}
.fb-btn{min-height:50px;padding:0 26px;border:none;font:inherit;font-size:16px;font-weight:800;cursor:pointer}
.fb-btn:disabled{opacity:.7;cursor:default}
.fb-btn-ghost{background:var(--main-card);color:var(--main-text);border:1.5px solid var(--main-border)}
#fb-pager #fb-next-btn,#fb-pager #fb-submit-btn{flex:1}
.fb-opt{font-weight:600;opacity:.7}
.fb-steps{display:none}
.fb-steps ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.fb-step{display:flex;align-items:center;gap:12px;min-height:44px;font-size:15px;font-weight:700;color:var(--main-text-muted)}
.fb-step.on{color:var(--main-text)}
.fb-step-n{width:28px;height:28px;border-radius:50%;border:2px solid var(--main-border);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0}
.fb-step.on .fb-step-n{background:var(--fb-brand,var(--purple));border-color:var(--fb-brand,var(--purple));color:var(--main-card)}
.fb-step.done .fb-step-n{border-color:var(--fb-brand,var(--purple));color:var(--fb-brand,var(--purple))}
.fb-sent{max-width:520px;margin:0 auto;padding:36px 4px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.fb-sent-tick{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:8px;color:var(--main-card);background:var(--fb-brand,var(--purple))}
.fb-sent-card{width:100%;margin-top:14px;text-align:left;background:var(--main-card);border:1px solid var(--main-border);border-radius:16px;padding:14px 16px}
.fb-sent-k{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted)}
.fb-sent-phone{display:inline-flex;align-items:center;min-height:44px;font-weight:800;color:var(--main-text)}
@media (max-width:640px){
  .fb-page-body .fb-bar{position:sticky;bottom:0;z-index:5;margin:16px -16px 0;padding:12px 16px 16px;background:var(--main-card);border-top:1px solid var(--main-border)}
  .fb-title{font-size:23px}
}
@media (min-width:900px){
  .fb-shell-paged{max-width:1040px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;align-items:start;padding-top:36px}
  .fb-shell-paged .fb-steps{display:block;padding-top:6px}
  .fb-shell-paged .fb-progress-segs{display:none}
  #fb-pager{justify-content:flex-end}
  #fb-pager #fb-next-btn,#fb-pager #fb-submit-btn{flex:0 0 auto}
  .fb-card{padding:28px}
}
.fb-prev-cell{flex:1 1 0;min-width:0}
.fb-prev-addr .fb-prev-city{flex:2 1 0}
/* A phone (2026-10-26): half-width fields and the address row stack, so no
   field is squeezed to a third of the screen. */
@media (max-width:560px){
  .fb-form-fields-grid > .fb-prev-field.half-w{grid-column:span 2}
  .fb-prev-addr{flex-wrap:wrap}
  .fb-prev-addr .fb-prev-city{flex:1 1 100%}
}
.fb-prev-label .req{color:#ff4000}
.fb-prev-input{width:100%;border:1px solid var(--text-disabled);border-radius:7px;padding:9px 12px;font-size:14px;color:#111;background:#fff;outline:none;font-family:Lato,sans-serif;transition:border-color .2s}
.fb-prev-input:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(107,33,234,.1)}
.fb-prev-select{width:100%;border:1px solid var(--text-disabled);border-radius:7px;padding:9px 12px;font-size:14px;color:#111;background:#fff;outline:none;font-family:Lato,sans-serif;height:42px}
.fb-prev-opt-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:14px;color:#333;cursor:pointer}
.fb-prev-opt-row input{width:16px;height:16px;cursor:pointer;accent-color:var(--purple)}
/* Answer choices as cards (2026-10-26, approved mockup): a whole row to tap,
   filled with the form's color when picked. --fb-choice is set on the group. */
.fb-choices{display:flex;flex-direction:column;gap:8px}
.fb-choice{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 14px;border:1.5px solid var(--text-disabled);border-radius:12px;background:var(--main-card);font-size:15px;font-weight:600;line-height:1.35;cursor:pointer}
.fb-choice input{flex-shrink:0;width:20px;height:20px;margin:0;cursor:pointer;accent-color:var(--fb-choice,var(--purple))}
.fb-choice:has(input:checked){border-color:var(--fb-choice,var(--purple));background:color-mix(in srgb,var(--fb-choice,var(--purple)) 8%,var(--main-card))}
.fb-choice:has(input:focus-visible){outline:2px solid var(--fb-choice,var(--purple));outline-offset:2px}
.fb-field-bad .fb-choice{border-color:var(--danger-text)}
.fb-prev-submit{display:inline-block;padding:11px 28px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;border:none;font-family:Lato,sans-serif;transition:filter .15s}
.fb-prev-submit:hover{filter:brightness(1.1)}
.fb-prev-tnc{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:#444}
.fb-prev-tnc input{margin-top:2px;width:15px;height:15px;cursor:pointer;accent-color:var(--purple)}
.fb-prev-sig{display:block;width:100%;height:100px;border:1px solid var(--text-disabled);border-radius:7px;background:#fff;cursor:crosshair;touch-action:none}
.sig-clear-btn{display:inline-flex;align-items:center;min-height:36px;padding:0 2px;margin-top:4px;background:none;border:none;font:inherit;font-size:13px;font-weight:700;color:inherit;opacity:.7;cursor:pointer}
/* #form-embed:end */
/* RICH TEXT EDITOR */
.fb-rte-wrap{border:1px solid var(--text-disabled);border-radius:8px;overflow:hidden;margin-bottom:8px}
.fb-rte-bar{display:flex;gap:2px;padding:5px 7px;background:#f0f0f4;border-bottom:1px solid var(--text-disabled);flex-wrap:wrap}
.fb-rte-btn{padding:3px 8px;border:none;background:transparent;cursor:pointer;border-radius:4px;font-size:12px;font-weight:600;color:#444;font-family:Lato,sans-serif;transition:background .12s}
.fb-rte-btn:hover{background:#ddd}
.fb-rte-body{min-height:80px;max-height:160px;overflow-y:auto;padding:10px 12px;font-size:13px;color:#222;line-height:1.6;outline:none;background:#fff}
.fb-rte-body a{color:var(--purple)}
/* FILE TYPE CHECKBOXES */
.fb-file-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-bottom:6px}
.fb-file-chk{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-muted);cursor:pointer;padding:2px 0}
.fb-file-chk input{width:13px;height:13px;cursor:pointer;accent-color:var(--purple);flex-shrink:0}
/* CONTENT ELEMENT PREVIEWS */
.fb-content-el{padding:8px 10px;border-radius:var(--radius);background:#f4f4f8}
.fb-content-header{font-weight:700;color:#111;line-height:1.3}
.fb-content-para{font-size:13px;color:#555;line-height:1.6}
.fb-content-divider{border:none;border-top:1.5px solid var(--text-disabled);margin:4px 0}
/* ALIGNMENT ROW */
.fb-align-row{display:flex;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:8px}
.fb-align-btn{flex:1;padding:6px;font-size:11px;font-weight:600;cursor:pointer;background:transparent;border:none;color:var(--text-muted);font-family:Lato,sans-serif;text-align:center;transition:all .12s}
.fb-align-btn.active{background:var(--purple);color:#fff}
/* CUSTOM FIELDS */
.cf-cat-section{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:8px;overflow:hidden}
.cf-cat-head{display:flex;align-items:center;gap:8px;padding:10px 14px;user-select:none}
.cf-cat-name{font-size:13px;font-weight:600;flex:1}
.cf-cat-count{font-size:11px;color:var(--text-muted)}
.cf-cat-body{padding:10px 14px;border-top:1px solid var(--border)}
.cf-field-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border)}
.cf-field-row:last-child{border-bottom:none}
.cf-field-key{font-size:10px;font-family:monospace;color:var(--text-muted);background:var(--bg-card);padding:2px 6px;border-radius:4px;flex-shrink:0}
.cf-field-type-badge{font-size:9px;font-weight:700;padding:2px 5px;border-radius:3px;background:var(--purple-dim);color:var(--purple-light);flex-shrink:0}
/* CONTACT DRAWER CUSTOM FIELDS */

/* STAFF PANEL */
/* Staff has no tab bar since 2026-10-15: the Catalog switcher under the header,
   with the active view's toolbar docked beside it, the same shape as .rpt-head. */
.staff-head{display:flex;align-items:flex-end;flex-wrap:wrap;gap:10px 18px;margin-bottom:16px}
.staff-head-tools{flex:1 1 600px;min-width:0}
.staff-head-tools:empty{display:none}
.cat-seg-b .cat-seg-n.stt-badge{background:var(--orange);color:var(--sb-text-strong);border-radius:999px;padding:0 6px;font-size:10.5px;line-height:16px}
.staff-head-tools .sched-bar,.staff-head-tools .ts-bar{margin-bottom:0}
/* Team list (108 _stRenderTeamList), 2026-10-15 redesign. */
.st-bar{display:flex;align-items:center;gap:var(--space-10);flex-wrap:wrap}
.st-search{width:220px;max-width:100%}
.st-sp{flex:1}
.st-list{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg)}
.st-row{display:grid;grid-template-columns:minmax(200px,2fr) minmax(100px,.8fr) minmax(170px,1.6fr) minmax(110px,1fr) minmax(110px,auto);
  align-items:center;gap:var(--space-12);padding:var(--space-10) var(--space-14);border-top:1px solid var(--main-border)}
.st-row:first-child{border-top:none}
.st-head{font-size:var(--fs-10);font-weight:var(--fw-800);letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted);padding-top:var(--space-8);padding-bottom:var(--space-8)}
.st-who{display:flex;align-items:center;gap:var(--space-10);min-width:0}
.st-who-t{min-width:0}
.st-name{font-size:var(--fs-13);font-weight:var(--fw-700);color:var(--main-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-pos{font-size:var(--fs-12);color:var(--main-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-today{display:flex;align-items:center;gap:var(--space-8);flex-wrap:wrap;min-width:0}
.st-sub{font-size:var(--fs-12);color:var(--main-text-muted)}
/* Edit Team Member panes (041 _euPane). */
.eu-pane{min-height:120px}
/* One modal for the person (041, 2026-10-23): a rail of tabs beside the pane.
   The rail sticks while the pane scrolls; below 760px it becomes a strip. */
.eu-shell{display:flex;gap:var(--space-20);align-items:flex-start}
.eu-rail{position:sticky;top:0;flex:none;width:170px;display:flex;flex-direction:column;gap:2px;padding:var(--space-6);border-radius:var(--radius);background:var(--main-card-hover);border:1px solid var(--main-border)}
.eu-rail-b{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);padding:var(--space-10) var(--space-12);border:0;border-radius:8px;background:none;font:inherit;font-size:var(--fs-14);font-weight:var(--fw-700);color:var(--main-text);text-align:left;cursor:pointer}
.eu-rail-b:hover{background:var(--purple-dim)}
.eu-rail-b.on{background:var(--main-card);color:var(--purple);box-shadow:0 1px 3px rgba(26,16,48,.12)}
.eu-rail-b:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.eu-dot{width:8px;height:8px;border-radius:50%;background:var(--orange);visibility:hidden}
.eu-rail-b.is-dirty .eu-dot{visibility:visible}
.eu-main{flex:1;min-width:0}
/* A fixed body height, so the modal does not resize between tabs; the pane
   scrolls inside it. Shorter screens get what fits. flex:none is what makes
   the height apply: .modal-body is flex:1, and a 0% flex basis in a modal of
   no set height sizes to the content and overrides `height`. The stable
   gutter keeps the scrollbar's space, so short tabs do not shift sideways. */
.eu-modal .modal-body{flex:none;height:min(660px,calc(90vh - 150px));box-sizing:border-box;scrollbar-gutter:stable}
.eu-host{min-height:120px}
.eu-foot-msg{margin-right:auto;font-size:var(--fs-13);font-weight:var(--fw-700);color:var(--main-text-muted)}
.eu-foot-msg.is-ok{color:var(--success-text)}
.eu-foot-msg.is-err{color:var(--danger-text)}
@media(max-width:760px){
  .eu-shell{flex-direction:column;gap:var(--space-12)}
  .eu-rail{position:static;width:auto;flex-direction:row;overflow-x:auto}
  .eu-rail-b{flex:none;white-space:nowrap}
}
.eu-hint{font-weight:var(--fw-400);color:var(--text-muted)}
.eu-help{font-size:var(--fs-11);color:var(--text-muted);margin-top:4px;line-height:1.45}
.eu-acc{border-top:1px solid var(--border);margin-top:var(--space-6)}
.eu-acc-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-14);padding:var(--space-12) 0;border-bottom:1px solid var(--border)}
.eu-acc-row:last-child{border-bottom:none}
.eu-acc-t{font-size:var(--fs-13);font-weight:var(--fw-700);color:var(--text)}
.eu-acc-row .btn{flex:none}
.eu-acc-acts{display:flex;gap:var(--space-6);flex:none}
/* 2FA code step: "Remember this device for 30 days" (2026-10-24). */
.totp-remember{display:flex;align-items:center;gap:var(--space-8);font-size:var(--fs-13);color:var(--text);cursor:pointer;margin:var(--space-4) 0 var(--space-8)}
/* Add Team Member (033, 2026-10-23): two sections, role cards, the color as
   one line, and the Added view's Finish setting them up rows. */
.uf-sec{margin-bottom:var(--space-18)}
.uf-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-10)}
.uf-sec-t{display:block;font-size:var(--fs-14);font-weight:var(--fw-800);color:var(--main-text);margin-bottom:var(--space-10)}
.uf-roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-10)}
.uf-role{display:flex;flex-direction:column;gap:4px;padding:var(--space-12) var(--space-14);border-radius:12px;border:2px solid var(--main-border);background:var(--main-card);text-align:left;font:inherit;cursor:pointer}
.uf-role:hover{border-color:var(--purple-border)}
.uf-role.on{border-color:var(--purple);background:var(--purple-dim)}
.uf-role:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uf-role-n{font-size:var(--fs-14);font-weight:var(--fw-800);color:var(--main-text)}
.uf-role.on .uf-role-n{color:var(--purple)}
.uf-role-d{font-size:var(--fs-12);line-height:1.4;color:var(--main-text-muted)}
.uf-compare{margin-top:var(--space-10);border:1px solid var(--main-border);border-radius:var(--radius)}
.uf-cmp-row{display:flex;justify-content:space-between;gap:var(--space-12);padding:var(--space-8) var(--space-12);font-size:var(--fs-13);color:var(--main-text)}
.uf-cmp-row+.uf-cmp-row{border-top:1px solid var(--main-border)}
.uf-cmp-row b{flex:none;color:var(--purple)}
.uf-seat{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-12);margin-bottom:var(--space-16);padding:var(--space-12) var(--space-14);border-radius:var(--radius);background:var(--danger-dim);border:1px solid var(--danger-light);color:var(--danger-text);font-size:var(--fs-14)}
.uf-seat .eu-link{flex:none}
.uf-color{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-10) var(--space-14);border-radius:var(--radius);background:var(--main-bg)}
.uf-color-dot{flex:none;width:26px;height:26px;border-radius:50%;background:var(--ccp-c,var(--purple))}
.uf-color-t{flex:1;font-size:var(--fs-14);color:var(--main-text-muted)}
.uf-color-t b{color:var(--main-text)}
.uf-color-pick{margin-top:var(--space-6)}
.uf-done{display:flex;align-items:center;gap:var(--space-14);margin-bottom:var(--space-18)}
.uf-done-ic{flex:none;width:44px;height:44px;border-radius:50%;background:var(--success-dim);color:var(--success-text);display:flex;align-items:center;justify-content:center}
.uf-done-t{font-size:var(--fs-16);font-weight:var(--fw-800);color:var(--main-text)}
.uf-steps-h{margin:-6px 0 var(--space-10)}
.uf-steps{display:flex;flex-direction:column;gap:var(--space-8)}
.uf-step{display:flex;align-items:center;gap:var(--space-12);width:100%;padding:var(--space-12) var(--space-14);border-radius:12px;border:1px solid var(--main-border);background:var(--main-card);text-align:left;font:inherit;cursor:pointer}
.uf-step:hover{border-color:var(--purple-border);background:var(--main-card-hover)}
.uf-step:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uf-step-n{flex:none;width:32px;height:32px;border-radius:9px;background:var(--main-bg);color:var(--main-text-muted);display:flex;align-items:center;justify-content:center;font-weight:var(--fw-800);font-size:var(--fs-13)}
.uf-step-n.is-need{background:var(--warning-dim);color:var(--warning-text)}
.uf-step-x{flex:1;display:flex;flex-direction:column}
.uf-step-t{font-size:var(--fs-14);font-weight:var(--fw-800);color:var(--main-text)}
.uf-step-d{font-size:var(--fs-12);color:var(--main-text-muted)}
.uf-step-d.is-need{color:var(--warning-text)}
.uf-step-go{color:var(--purple);font-weight:var(--fw-800);font-size:var(--fs-16)}
/* Edit Team Member header (041 _euHead): avatar, name, position and email. */
.eu-head{display:flex;align-items:center;gap:var(--space-12);min-width:0}
.eu-head-av{flex:none;display:flex}
.eu-head-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.eu-head-sub{font-family:Lato,sans-serif;font-size:var(--fs-13);font-weight:var(--fw-400);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eu-warn{font-size:var(--fs-13);color:var(--warning-text-strong);background:var(--warning-dim);border-radius:var(--radius);padding:var(--space-10) var(--space-12);margin-bottom:var(--space-14)}
.eu-err{font-size:var(--fs-12);color:var(--danger-text);margin-top:4px}
.form-group input.eu-bad{border-color:var(--danger-text)}
.eu-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-12)}
.eu-link{background:none;border:0;padding:0;font:inherit;font-size:var(--fs-13);font-weight:var(--fw-700);color:var(--purple);cursor:pointer}
.eu-link:hover{color:var(--purple-hover)}
/* Calendar color picker (189-color-picker.js). One shaded panel: Current,
   Presets and the clinic's Custom Colors on the left, the calendar preview on
   the right, and a New Custom Color pop-up holding the shade square, hue bar
   and hex field. Per-element colors arrive as custom properties: --ccp-c (the
   color), --ccp-ink (readable text on it), --ccp-hue (pure hue behind the
   shade square). */
.ccp-panel{--ccp-c:var(--purple);--ccp-ink:var(--main-card);position:relative;display:flex;gap:var(--space-20);align-items:flex-start;flex-wrap:wrap;margin-top:var(--space-6);padding:var(--space-16) var(--space-18);border-radius:12px;background:var(--main-bg);border:1px solid var(--main-border)}
.ccp-main{flex:1 1 334px;min-width:0;display:flex;flex-direction:column;gap:var(--space-14)}
.ccp-sec{display:flex;flex-direction:column;gap:var(--space-6)}
.ccp-sec-line{padding-top:var(--space-12);border-top:1px solid var(--main-border)}
.ccp-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-10)}
.ccp-sec-t{font-size:var(--fs-12);font-weight:var(--fw-700);color:var(--main-text-muted)}
.ccp-sec-sub{font-weight:var(--fw-400)}
.ccp-grid{display:flex;flex-wrap:wrap;gap:var(--space-8);max-width:334px}
.ccp-sw{position:relative;flex:none;width:30px;height:30px;padding:0;border:0;border-radius:50%;cursor:pointer;background:var(--ccp-c);color:var(--ccp-ink);box-shadow:inset 0 0 0 1px rgba(26,16,48,.14);display:flex;align-items:center;justify-content:center}
.ccp-sw svg{display:none}
.ccp-sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--main-bg),0 0 0 4px var(--main-text)}
.ccp-sw[aria-pressed="true"] svg{display:block}
.ccp-sw:focus-visible{outline:none;box-shadow:0 0 0 2px var(--main-bg),0 0 0 4px var(--purple-light)}
.ccp-used{position:absolute;top:-4px;right:-4px;width:15px;height:15px;box-sizing:border-box;border-radius:50%;border:2px solid var(--main-bg);background:var(--main-text);color:var(--main-card);font-size:7px;font-weight:var(--fw-800);line-height:11px;text-align:center}
.ccp-cur{display:flex;align-items:center;gap:var(--space-10);padding-bottom:var(--space-12);border-bottom:1px solid var(--main-border);font-size:var(--fs-13);color:var(--main-text)}
.ccp-cur.hidden{display:none}
.ccp-cur-x{flex:1;min-width:0}
.ccp-cur-t{color:var(--main-text-muted)}
.ccp-custom{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8)}
.ccp-cw{position:relative;display:inline-flex}
.ccp-rm{position:absolute;top:-6px;right:-6px;width:18px;height:18px;padding:0;border-radius:50%;border:2px solid var(--main-bg);background:var(--danger-text);color:var(--main-card);font-size:11px;font-weight:var(--fw-800);line-height:12px;cursor:pointer}
.ccp-rm:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.ccp-add{flex:none;width:30px;height:30px;padding:0;border-radius:50%;border:2px dashed var(--main-text-muted);background:var(--main-card);color:var(--main-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.ccp-add[aria-expanded="true"]{border-style:solid;border-color:var(--purple);color:var(--purple)}
.ccp-add:disabled{opacity:.45;cursor:not-allowed}
.ccp-add:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.ccp-empty{font-size:var(--fs-12);color:var(--main-text-muted)}
.ccp-side{flex:0 1 250px;min-width:200px;display:flex;flex-direction:column;gap:var(--space-8)}
.ccp-pv{box-sizing:border-box;border-radius:8px;padding:var(--space-10) var(--space-12);background:var(--ccp-c);color:var(--ccp-ink);display:flex;flex-direction:column;gap:2px;font-size:var(--fs-13)}
.ccp-pv b{font-weight:var(--fw-800)}
/* Tag mode: the preview is a sample tag chip. */
.ccp-pv.ccp-pv-tag{display:inline-flex;padding:var(--space-4) var(--space-12);border-radius:999px;font-size:var(--fs-12);font-weight:var(--fw-700)}
.ccp-note{box-sizing:border-box;font-size:var(--fs-12);color:var(--warning-text-strong);background:var(--warning-dim);border-radius:8px;padding:var(--space-6) var(--space-10)}
/* The pop-up hangs below the panel; the modal pane scrolls to it on open. */
.ccp-pop{position:absolute;left:var(--space-18);top:calc(100% + var(--space-8));z-index:5;width:300px;box-sizing:border-box;display:flex;flex-direction:column;gap:var(--space-12);padding:var(--space-14);border-radius:12px;background:var(--main-card);border:1px solid var(--main-border);box-shadow:0 16px 40px rgba(26,16,48,.22)}
.ccp-pop.hidden{display:none}
.ccp-pop-t{font-family:'Exo 2',sans-serif;font-size:var(--fs-14);font-weight:var(--fw-800);color:var(--main-text)}
.ccp-pop-b{display:flex;justify-content:flex-end;gap:var(--space-8)}
.ccp-sv{position:relative;height:150px;border-radius:var(--radius);cursor:crosshair;touch-action:none;user-select:none;background:linear-gradient(to top,black,transparent),linear-gradient(to right,white,var(--ccp-hue,red))}
.ccp-hue{position:relative;height:14px;margin:0 var(--space-8);border-radius:999px;cursor:pointer;touch-action:none;user-select:none;background:linear-gradient(to right,hsl(0 100% 50%),hsl(60 100% 50%),hsl(120 100% 50%),hsl(180 100% 50%),hsl(240 100% 50%),hsl(300 100% 50%),hsl(360 100% 50%))}
.ccp-hdl{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;padding:0;border-radius:50%;border:3px solid var(--main-card);background:var(--ccp-c);box-shadow:0 0 0 1px rgba(26,16,48,.5),0 2px 6px rgba(0,0,0,.35);cursor:grab}
.ccp-hue .ccp-hdl{top:50%}
.ccp-hdl:focus-visible{outline:none;box-shadow:0 0 0 1px rgba(26,16,48,.5),var(--focus-ring)}
.ccp-hex{display:flex;align-items:center;gap:var(--space-10)}
.ccp-hex label{margin:0;font-size:var(--fs-13);font-weight:var(--fw-700);color:var(--text-muted);text-transform:none;letter-spacing:0}
.ccp-hex input{width:110px;text-transform:uppercase}
.ccp-hex input.ccp-bad{border-color:var(--danger-text)}
.ccp-dot{flex:none;width:30px;height:30px;border-radius:50%;background:var(--ccp-c);box-shadow:inset 0 0 0 1px rgba(26,16,48,.14)}
.st-acts{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:var(--space-6)}
.st-link{border:none;background:none;padding:0;font:inherit;font-size:var(--fs-12);font-weight:var(--fw-700);color:var(--purple);cursor:pointer}
.st-link:hover{text-decoration:underline}
.st-empty{padding:var(--space-16);font-size:var(--fs-13);color:var(--main-text-muted)}
/* Compare Roles, under the Team list (2026-10-23). */
.st-roles{margin-top:var(--space-20);padding-top:var(--space-12);border-top:1px solid var(--main-border);font-size:var(--fs-13);color:var(--main-text-muted)}
.st-svcs{font-size:var(--fs-13);color:var(--main-text)}
.st-mute{color:var(--main-text-muted)}
.st-chip-ok{background:var(--success-dim);color:var(--success-text)}
.st-chip{display:inline-flex;align-items:center;font-size:var(--fs-11);font-weight:var(--fw-800);padding:2px 8px;border-radius:999px;white-space:nowrap}
.st-chip-p{background:var(--purple-dim);color:var(--purple)}
.st-chip-on{background:var(--info-dim);color:var(--info-text)}
.st-chip-warn{background:var(--warning-dim);color:var(--warning-text)}
.st-chip-no{background:var(--danger-dim);color:var(--danger-text)}
.st-chip-muted{background:var(--main-bg-sunk);color:var(--main-text-muted)}
.appt-row-menu.st-menu{background:var(--main-card);border-color:var(--main-border);box-shadow:var(--shadow-lg);z-index:60}
.st-menu .appt-row-menu-item{color:var(--main-text);font-weight:700;font-size:12.5px}
.st-menu .appt-row-menu-item:hover{background:var(--purple-dim);color:var(--purple)}
.st-menu .appt-row-menu-danger,.st-menu .appt-row-menu-danger:hover{color:var(--danger-text)}
.st-menu .appt-row-menu-danger:hover{background:var(--danger-dim)}
.st-menu .appt-row-menu-sep{background:var(--main-border)}
@media (max-width:760px){
  .st-head{display:none}
  .st-row{grid-template-columns:1fr auto;row-gap:var(--space-6)}
  .st-row > :nth-child(2),.st-row > :nth-child(3){grid-column:1}
  .st-row > .st-svcs{display:none}
  .st-acts{grid-column:2;grid-row:1}
}
.add-tile{border:2px dashed var(--border);border-radius:var(--radius-lg);background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;min-height:120px;color:var(--main-text-muted);font-weight:600;transition:border-color .15s,color .15s}
.add-tile:hover{border-color:var(--purple);color:var(--purple)}
/* REPORTING TABLE */
.rpt-filter-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.rpt-table{width:100%;border-collapse:collapse;font-size:13px;background:var(--main-card)}
.rpt-table th{text-align:left;padding:8px 12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--main-text-muted);border-bottom:1px solid var(--main-border);background:var(--main-bg)}
.rpt-table td{padding:10px 12px;border-bottom:1px solid var(--main-border);vertical-align:middle;color:var(--main-text)}
.rpt-table tr:last-child td{border-bottom:none}
.data-table{width:100%;border-collapse:collapse;font-size:13px;background:var(--main-card)}
.data-table th{text-align:left;padding:10px 16px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--main-text-muted);border-bottom:1px solid var(--main-border);background:var(--main-bg);white-space:nowrap}
.data-table td{padding:12px 16px;border-bottom:1px solid var(--main-border);vertical-align:middle;color:var(--main-text)}
.data-table tr:last-child td{border-bottom:none}
.data-table tbody tr:hover{background:var(--main-card-hover)}
.rpt-total-row td{font-weight:700;background:var(--main-bg);color:var(--main-text)}
.rpt-total-row td.fw-800{font-weight:var(--fw-800)}
/* Lead sources (2026-10-14): the settings list and its add row. */
.ls-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
/* Lead source chips, not the LitBiz SOP .ls-chip pill (line ~6484): sharing
   that name gave these the SOP look from 2026-10-14. */
.ls-src-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--radius);background:var(--main-bg-sunk);border:1px solid var(--main-border);font-size:12px;color:var(--main-text)}
.ls-add{display:flex;gap:6px;max-width:360px}
/* Services report (2026-10-14): a category's subtotal row, and the change against the previous period. */
.rpt-group-row td{font-weight:700;font-size:12px;background:var(--main-bg);color:var(--main-text-muted)}
/* Report tiles (approved mockup, 2026-10-22): the change is a chip, as the
   dashboard's (.dash-chip up/dn); no change or New stays a muted chip. */
.rpt-delta{display:inline-block;font-family:Lato,sans-serif;font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:9px;white-space:nowrap;margin-left:8px;vertical-align:middle;background:var(--main-bg-sunk);color:var(--main-text-muted)}
.rpt-delta-up{background:var(--success-dim);color:var(--success-text)}
.rpt-delta-down{background:var(--danger-dim);color:var(--danger-text)}
/* Shared report shapes (2026-10-14): the card, tile and grid every Reporting
   view repeated inline. Same values as the inline styles they replaced. */
.rpt-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:14px 16px;box-shadow:var(--shadow-sm)}
.rpt-card.rpt-mb{margin-bottom:18px}
.rpt-card-flush{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.rpt-card-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.rpt-card-title{font-size:13px;font-weight:700;color:var(--main-text)}
/* A section heading between report cards (Dead Stock). */
.rpt-sec-title{margin:var(--space-20) 0 var(--space-8)}
.rpt-kpi-l{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--main-text-muted);font-weight:800}
.rpt-kpi-v{margin-top:5px;font-family:'Exo 2',sans-serif;font-size:24px;font-weight:700;color:var(--main-text)}
.rpt-kpi-s{font-size:11px;color:var(--main-text-muted);margin-top:3px}
.rpt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:18px}
.rpt-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:18px}
.rpt-r,.data-table .rpt-r,.rpt-table .rpt-r{text-align:right}
.rpt-actions{display:flex;justify-content:flex-end;gap:8px;margin-bottom:10px}
/* Staff drill-down (2026-10-14): summary strip and row type labels. */
.drill-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:12px}
.drill-kpi{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);padding:10px 12px}
.drill-kpi-v{margin-top:3px;font-family:'Exo 2',sans-serif;font-size:18px;font-weight:700;color:var(--main-text)}
.drill-type{font-size:10px;font-weight:700;}
.drill-type-tip,.drill-tip{color:var(--success-light)}
.drill-type-appt{color:var(--purple-light)}
.drill-type-other{color:var(--text-muted)}
.drill-disc{color:var(--orange)}
.drill-type-refund{color:var(--orange)}
/* A text link that is a real button, so Tab reaches it. */
.rpt-link{background:none;border:none;padding:0;font:inherit;font-size:12px;color:var(--purple);cursor:pointer}
.rpt-link:hover{text-decoration:underline}
.rpt-link:focus-visible,.rpt-click:focus-visible,.rpt-row-click:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.rpt-click{cursor:pointer}
.rpt-click:hover{border-color:var(--purple-soft)}
/* A table row that opens its record. */
.rpt-row-click{cursor:pointer}
.rpt-row-click:hover td{background:var(--main-card-hover)}
/* WEEK SCHEDULE DASHBOARD */
.dash-week{margin:0}
/* AGENCY DASHBOARD TABS */.agency-tab-content{padding:28px 32px}
/* Agency Users master-detail panel */
.au-wrap{display:flex;gap:0;border:1px solid var(--main-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--main-card);min-height:520px}
.au-side{width:260px;flex-shrink:0;border-right:1px solid var(--main-border);display:flex;flex-direction:column;background:rgba(107,33,234,.06)}
.au-side-search{padding:16px 14px;border-bottom:1px solid var(--main-border)}
.au-side-list{overflow-y:auto;flex:1}
.au-side-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--main-border);font-size:13px;color:var(--main-text);transition:background .12s}
.au-side-item:hover{background:var(--main-card-hover)}
.au-side-item.active{background:var(--purple-dim);border-left:3px solid var(--orange);padding-left:11px}
.au-side-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au-side-badge{font-size:11px;color:var(--main-text-muted);flex-shrink:0;font-weight:600}
.au-main{flex:1;display:flex;flex-direction:column;min-width:0}
.au-toolbar{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--main-border);flex-wrap:wrap}
.au-toolbar .input{flex:1;min-width:200px}
.au-table{width:100%;border-collapse:collapse;font-size:13px}
.au-table th{text-align:left;padding:10px 16px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--main-text-muted);border-bottom:1px solid var(--main-border);font-weight:700}
.au-table td{padding:13px 16px;border-bottom:1px solid var(--main-border);color:var(--main-text);vertical-align:middle}
.au-table tr:hover td{background:var(--main-card-hover)}
.au-pill-ok{display:inline-block;background:var(--success-dim);color:var(--success-text);border:1px solid var(--success);font-size:11px;font-weight:700;padding:3px 10px;border-radius:var(--radius-full)}
.au-pill-pending{display:inline-block;background:var(--warning-dim);color:var(--warning-text);border:1px solid var(--warning);font-size:11px;font-weight:700;padding:3px 10px;border-radius:var(--radius-full)}
.au-pager{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:12px}
.au-empty{padding:48px 24px;text-align:center;color:var(--main-text-muted);font-size:14px}
.au-wrap .input{padding:11px 14px}
.au-side-item{padding-top:13px;padding-bottom:13px}
.agency-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.agency-toolbar input[type="text"],.agency-toolbar select{background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:7px 10px;font-size:13px;height:34px;font-family:inherit}
/* Demo clinic buttons in the agency clinic toolbar (137 agencyOpenDemoClinic). */
.agency-demo-actions{display:flex;gap:8px;align-items:center}

/* CUSTOM FIELD READ-ONLY */

/* CALENDAR SCHEDULE BLOCKS */
.cal-off-block{position:absolute;left:2px;right:2px;border-radius:5px;padding:5px 7px;font-size:11px;font-weight:700;z-index:3;pointer-events:none;overflow:hidden}
.cal-off-block-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.cal-off-block-reason{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;font-weight:400;opacity:.8}
/* AM/PM TIME HINT *//* ACCOUNT CREDITS */
.credit-balance-card{background:linear-gradient(135deg,#6b21ea22,#ff400012);border:1px solid var(--purple-border);border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}
.credit-balance-amt{font-family:'Exo 2',sans-serif;font-size:22px;font-weight:800;color:var(--purple-light)}
.credit-balance-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.credit-hist-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px}
.credit-hist-row:last-child{border-bottom:none}
.credit-pos{color:var(--success-light);font-weight:700}
.credit-neg{color:var(--danger-light);font-weight:700}
.dpay-tile{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px}
.dpay-tile-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:4px}
.dpay-tile-val{font-family:'Exo 2',sans-serif;font-size:18px;font-weight:800;color:var(--text);line-height:1.2}

/* Media Library */
/* DRILL-DOWN TABLE */
.drill-table{width:100%;border-collapse:collapse;font-size:12px}
.drill-table th{text-align:left;padding:7px 10px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);border-bottom:1px solid var(--border)}
.drill-table td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.drill-table tr:last-child td{border-bottom:none}
/* MY WEEK REDESIGN */
.week-sched-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.week-sched-day{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:10px 8px;text-align:center}
.week-sched-day.is-today{border-color:var(--purple);background:rgba(107,33,234,.08)}
.week-sched-day-name{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--text-muted);margin-bottom:3px;letter-spacing:.05em}
.week-sched-day-num{font-size:18px;font-weight:800;font-family:'Exo 2',sans-serif;line-height:1;margin-bottom:6px}
.week-sched-status{font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;margin-bottom:3px;display:inline-block}
.sched-on{background:#34d39920;color:var(--success-light)}
.sched-off{background:#f8717120;color:var(--danger-light)}
.week-sched-hours{font-size:10px;color:var(--text-muted);line-height:1.4}

/* MULTI-COLUMN DAY VIEW */
.cal-mc-col{flex:1;min-width:180px;border-left:1px solid var(--main-border);display:flex;flex-direction:column}
/* === CALENDAR DRAG === */
.timed-ev[draggable="true"]{cursor:grab}
.timed-ev[draggable="true"]:active{cursor:grabbing}
.timed-ev[data-cal-drag="1"]{cursor:grab}
.timed-ev[data-cal-drag="1"]:active{cursor:grabbing}
.timed-ev.cal-dragging{opacity:.4}
.cal-drop-target{position:absolute;left:3px;right:3px;border-radius:6px;pointer-events:none;z-index:5;transition:top .05s ease}
.cal-drop-target.ok{background:rgba(52,211,153,.20);border:2px dashed var(--success);box-shadow:0 0 0 2px rgba(52,211,153,.15)}
.cal-drop-target.bad{background:rgba(248,113,113,.20);border:2px dashed var(--danger);box-shadow:0 0 0 2px rgba(248,113,113,.15)}
.cal-drop-target-label{position:absolute;top:4px;left:8px;font-size:11px;font-weight:700;color:var(--main-text);background:var(--main-card);padding:2px 6px;border-radius:4px;box-shadow:var(--shadow-sm)}
.cal-drop-confirm{position:fixed;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:14px;z-index:var(--z-modal-pop);min-width:280px;max-width:340px}
.cal-drop-confirm-title{font-size:13px;font-weight:700;color:var(--main-text);margin:0 0 8px}
.cal-drop-confirm-row{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--main-text-muted);margin-bottom:4px}
.cal-drop-confirm-row strong{color:var(--main-text)}
.cal-drop-confirm-actions{display:flex;gap:8px;margin-top:12px;justify-content:flex-end}
.cal-ev[draggable="true"]{cursor:grab}
.cal-ev[draggable="true"]:active{cursor:grabbing}
.cal-ev.cal-dragging{opacity:.4}
.cal-cell.cal-drop-cell-ok{background:rgba(52,211,153,.18) !important;box-shadow:inset 0 0 0 2px var(--success)}
.cal-cell.cal-drop-cell-bad{background:rgba(248,113,113,.18) !important;box-shadow:inset 0 0 0 2px var(--danger)}
.cal-drop-confirm-time-input{padding:4px 8px;border:1px solid var(--main-border);border-radius:var(--radius-sm);background:var(--main-input);color:var(--main-text);font-size:12px;font-weight:700;width:90px;text-align:right;font-family:inherit}
.cal-drop-confirm-time-input:focus:not(:focus-visible){outline:none;border-color:var(--purple);box-shadow:var(--focus-ring)}
.cal-ctx-menu{position:fixed;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:4px;z-index:var(--z-modal-pop);min-width:160px}
.cal-ctx-menu-item{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:13px;color:var(--main-text);cursor:pointer;border-radius:var(--radius-sm)}
.cal-ctx-menu-item:hover{background:var(--main-card-hover)}
.cal-move-picker{position:fixed;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:14px;z-index:calc(var(--z-modal-pop) + 1);min-width:260px}
.cal-move-picker-title{font-size:13px;font-weight:700;color:var(--main-text);margin:0 0 10px}
.cal-move-picker-row{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.cal-move-picker-row label{font-size:11px;color:var(--main-text-muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.cal-move-picker-row input{padding:8px 10px;border:1px solid var(--main-border);border-radius:var(--radius-sm);background:var(--main-input);color:var(--main-text);font-size:13px;font-family:inherit}
.cal-move-picker-row input:focus:not(:focus-visible){outline:none;border-color:var(--purple);box-shadow:var(--focus-ring)}
.cal-move-picker-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.cal-mc-head{height:56px;display:flex;align-items:center;gap:8px;padding:0 10px;border-bottom:1px solid var(--divider);background:var(--subnav-bar);position:sticky;top:0;z-index:2;flex-shrink:0}
.cal-mc-name{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--main-text)}
.cal-mc-role{font-size:10px;color:var(--main-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* MANAGE VIEW PANEL */
.cal-manage-panel{width:280px;position:fixed;top:0;right:0;height:100vh;background:var(--main-card);border-left:1px solid var(--main-border);overflow-y:auto;z-index:200;box-shadow:-4px 0 20px rgba(0,0,0,.35);display:flex;flex-direction:column;color:var(--main-text)}
.cal-manage-head{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--divider);flex-shrink:0}
.cal-manage-head-title{font-family:'Exo 2',sans-serif;font-size:14px;font-weight:700}
.cal-manage-section{padding:12px 16px;border-bottom:1px solid var(--divider)}
.cal-manage-section-hd{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--main-text-muted);margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}
.cal-staff-row{display:flex;align-items:center;gap:8px;padding:5px 4px;border-radius:6px;cursor:pointer;transition:background .1s}
.cal-staff-row:hover{background:var(--main-card-hover)}
.cal-sf-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.cal-sf-name{font-size:13px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-sf-role{font-size:10px;color:var(--main-text-muted);flex-shrink:0}
.cal-sf-cb{accent-color:var(--purple);width:14px;height:14px;cursor:pointer;flex-shrink:0}
.cal-manage-panel .icon-btn-xs{color:var(--main-text-muted)}
.cal-manage-btn{padding:6px 12px;font-size:12px;font-weight:600;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);color:var(--main-text);cursor:pointer;display:flex;align-items:center;gap:5px;font-family:Lato,sans-serif;transition:all .12s;white-space:nowrap}
.cal-manage-btn:hover{background:var(--main-card-hover);border-color:var(--purple-border);color:var(--main-text)}
.cal-manage-btn.active{background:var(--purple-dim);border-color:var(--purple-border);color:var(--purple-light)}
.svc-ms-wrap{position:relative}
.svc-ms-display:focus-visible,.svc-ms-opt:focus-visible,.svc-ms-x:focus-visible,.bh-toggle:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.modal.modal-svc{max-width:860px}
.ce-form.svc-ed{container-type:inline-size;container-name:ceform svced}
.svc-ed-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}
.svc-ed-main,.svc-ed-side{min-width:0}
.cal-ev-room{font-size:10px;color:rgba(255,255,255,.7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 5px 0;line-height:1.4}
.cal-ev-room.is-day{font-size:11px;padding:1px 6px 0}
.svc-ed-side{background:var(--main-bg);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:12px 14px}
.svc-ed-sw>*{padding:10px 0}
.svc-ed-sw>*+*{border-top:1px solid var(--main-border)}
.svc-ed-sw>:last-child{padding-bottom:0}
.svc-ed-side .form-row{gap:8px}
.svc-grp .form-row-3{align-items:end}
@container svced (max-width:700px){.svc-ed-grid{grid-template-columns:minmax(0,1fr)}}
.so-dots{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:8px}
.so-dots span{width:12px;height:12px;border-radius:3px;background:var(--purple-dim);border:1px solid var(--purple)}
.so-dots em{font-style:normal;font-size:11px;color:var(--main-text-muted);margin-left:2px}
.ce-sw-row{display:flex;align-items:center;gap:12px}
.ce-sw-row .ce-hint{margin-top:2px}
.ce-sw-label{font-size:13px;font-weight:600;color:var(--main-text)}
.svc-av-body{margin-top:10px}
.svc-res-status{flex:none;color:var(--success-light)}
.svc-res-custom{font-size:13px;color:var(--main-text);padding:8px 10px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius)}
.svc-ao-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;white-space:nowrap;background:var(--purple-dim);color:var(--purple)}
.svc-ao-pill-p{font-weight:400;opacity:.8}
button.svc-ms-x{background:none;border:none;padding:0;font:inherit;color:inherit}
.svc-ms-display{min-height:38px;border:1px solid var(--main-input-border);border-radius:6px;padding:5px 10px;cursor:pointer;display:flex;align-items:center;gap:4px;flex-wrap:wrap;background:var(--main-input)}
.svc-ms-chips{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-height:22px}
.svc-ms-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;color:#fff;white-space:nowrap}
.svc-ms-arrow{color:var(--text-muted);font-size:11px;flex-shrink:0;margin-left:4px}
.svc-ms-dd{position:absolute;top:calc(100% + 3px);left:0;right:0;background:var(--main-card);border:1px solid var(--main-border);border-radius:6px;z-index:500;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.svc-ms-search{width:100%;border:none;border-bottom:1px solid var(--main-border);padding:8px 10px;background:transparent;color:var(--main-text);font-size:12px;outline:none;box-sizing:border-box}
.svc-ms-options{max-height:180px;overflow-y:auto}
.svc-ms-opt{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:pointer;font-size:12px;color:var(--main-text)}
.svc-ms-opt:hover{background:var(--main-bg)}
.svc-ms-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0} /* unused */
/* Settings rail (2026-10-19, approved mockup A, light rail), replacing the
   twelve-tab bar. Four groups, nine areas; 187-settings-shell.js drives it. */
.set-layout{display:grid;grid-template-columns:232px minmax(0,1fr);gap:20px;align-items:start}
.set-rail{position:sticky;top:12px;display:flex;flex-direction:column;gap:0;padding:12px 10px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.set-search{position:relative;margin-bottom:12px}
.set-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:13px;height:13px;color:var(--main-text-muted);pointer-events:none}
.set-search input{width:100%;box-sizing:border-box;padding:8px 10px 8px 30px;border-radius:var(--radius-md);background:var(--main-bg);border:1px solid var(--main-border);color:var(--main-text);font:13px Lato,sans-serif;outline:none}
.set-search input:focus{border-color:var(--purple-border)}
/* Groups sit between hairlines; purple labels set them apart from the links (variant B, 2026-10-19). */
.set-grp{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-top:1px solid var(--main-border)}
.set-lbl{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--purple);opacity:.75;padding:0 10px 7px}
.set-a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-md);font:500 13.5px Lato,sans-serif;color:var(--main-text);background:none;border:0;text-align:left;cursor:pointer}
.set-a:hover{background:var(--main-card-hover)}
.set-a:focus-visible{outline:2px solid var(--purple-border);outline-offset:1px}
.set-a.on{font-weight:700;background:var(--purple-dim);color:var(--purple)}
.set-dot{width:7px;height:7px;border-radius:50%;flex:none}
/* Rail status (2026-10-22): the marker beside the name, the words on a
   line of their own under it. Red has stopped; amber is waiting. */
.set-a{flex-wrap:wrap;justify-content:flex-start}
.set-a .set-dot{order:-1}
.set-dot.is-none{visibility:hidden}
.set-why{padding-left:15px}
.set-dot.is-bad{background:var(--danger)}
.set-dot.is-warn{background:var(--warning)}
.set-why{flex-basis:100%;order:3;font-size:11.5px;font-weight:700;line-height:1.3;margin-top:1px}
.set-why.is-bad{color:var(--danger-text)}
.set-why.is-warn{color:var(--warning-text)}
.set-pane{min-width:0}
.set-title{margin:2px 0 14px;font:700 18px "Exo 2",sans-serif;color:var(--main-text)}
.set-res{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-md);box-shadow:0 8px 24px rgba(26,16,48,.16);padding:4px;z-index:20}
.set-res-b{display:block;width:100%;text-align:left;border:0;background:none;padding:7px 9px;border-radius:6px;cursor:pointer;font:13px Lato,sans-serif;color:var(--main-text)}
.set-res-b:hover,.set-res-b.hl{background:var(--purple-dim)}
.set-res-b small{display:block;color:var(--main-text-muted);font-size:11.5px}
.set-res-none{padding:8px 9px;font-size:12px;color:var(--main-text-muted)}
/* Security and Activity (2026-10-21): Sign-In Protection, Signed-In Devices,
   Export All Data, Activity Log. Cards are the shared ob-pcard / pf-sec; tags
   and notes reuse nt-tag, nt-note, nt-warn from Notifications. */
.sec-chips{display:flex;gap:6px;flex-wrap:wrap}
.sec-field{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:var(--main-text-muted)}
.sec-select{width:100%;max-width:220px}
.sec-select-wide{max-width:300px}
#require-2fa-people:empty{display:none}
/* Items side by side (a chip and its note, a button pair). Not .sec-row, which
   is the label-left, button-right header row from the drawer. */
.sec-inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sec-meter{height:6px;margin-top:6px;border-radius:var(--radius-full);background:var(--main-bg-sunk);overflow:hidden}
.sec-meter>span{display:block;height:100%;background:var(--purple)}
.sec-list{list-style:none;margin:0;padding:0;border:1px solid var(--main-border);border-radius:var(--radius);overflow:hidden}
.sec-list>li{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;border-top:1px solid var(--main-border)}
.sec-list>li:first-child{border-top:0}
.sec-list>li.sec-grp{background:var(--main-bg-sunk);padding:7px 12px;font-size:12.5px;font-weight:700;color:var(--main-text)}
.sec-who{flex:1;min-width:180px}
.sec-who b{display:block;font-size:13px;color:var(--main-text)}
.sec-who small,.sec-what small{display:block;font-size:12px;color:var(--main-text-muted)}
.sec-tag-ag{background:var(--orange-dim);color:var(--orange-text)}
.sec-link{align-self:center}
.sec-feed{list-style:none;margin:0;padding:0;border:1px solid var(--main-border);border-radius:var(--radius);overflow:hidden}
.sec-feed>li{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:12px;align-items:start;padding:10px 12px;border-top:1px solid var(--main-border)}
.sec-feed>li:first-child{border-top:0}
.sec-feed>li.sec-day{display:block;background:var(--main-bg-sunk);padding:6px 12px;font-size:12px;font-weight:700;color:var(--main-text-muted)}
.sec-feed time{font-size:12px;color:var(--main-text-muted);white-space:nowrap}
.sec-what{min-width:0}
.sec-what b{font-size:13px;color:var(--main-text)}
.sec-what details{margin-top:4px;font-size:12px;color:var(--main-text-muted);overflow-wrap:anywhere}
.sec-what summary{cursor:pointer;width:max-content;color:var(--purple);font-weight:700}
.sec-what code{font-family:Menlo,Monaco,Consolas,monospace;font-size:11px}
.sec-pager{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--main-text-muted)}
@container pfwrap (max-width:560px){.sec-feed>li{grid-template-columns:minmax(0,1fr)}}
/* One client and grouped record opens (2026-10-21). */
.sec-pick{position:relative}
/* Activity Log filters (2026-10-22): one grid row, every control 40px, so the
   labels sit on one line; whole fields wrap on narrow screens. */
.al-fil-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;align-items:end}
.al-fil-row.hidden{display:none}
.al-fil-row .sec-field{min-width:0}
.al-fil-row .msp-input,.al-fil-row .sec-select{height:40px;width:100%;max-width:none}
.al-fil-row .date-pair{height:40px;width:100%;border-radius:var(--radius);border-color:var(--main-input-border);background:var(--main-input)}
.al-fil-row .sec-picked{height:40px}
.al-act-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.al-more-acts{display:flex;gap:8px;align-items:center;height:40px}
#al-comms-note:empty{display:none}
.al-switch{display:inline-flex;align-items:center;gap:10px;height:40px;font-size:13px;font-weight:400;color:var(--main-text);cursor:pointer}
.al-switch input{position:absolute;opacity:0;width:1px;height:1px}
.al-switch-ui{position:relative;width:36px;height:20px;flex:none;border-radius:var(--radius-full);background:var(--purple-border);transition:background .15s}
.al-switch-ui::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--main-card);transition:left .15s}
.al-switch input:checked+.al-switch-ui{background:var(--purple)}
.al-switch input:checked+.al-switch-ui::after{left:19px}
.al-switch input:focus-visible+.al-switch-ui{outline:2px solid var(--purple);outline-offset:2px}
.sec-pick-dd{position:absolute;top:calc(100% + 4px);left:0;min-width:260px;max-height:280px;overflow-y:auto;z-index:20;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);box-shadow:var(--shadow-md)}
.sec-dim{color:var(--main-text-muted);font-weight:400}
.sec-picked{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 6px 0 12px;border-radius:var(--radius-full);background:var(--purple-dim);border:1px solid var(--purple-border);color:var(--purple);font-size:13px;font-weight:700}
.sec-picked button{border:0;background:none;color:inherit;font-size:16px;line-height:1;padding:0 4px;cursor:pointer}
.sec-who-sum{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--main-border);border-radius:var(--radius)}
.sec-who-sum>b{font-size:14px;color:var(--main-text)}
.sec-ppl{display:flex;gap:6px;flex-wrap:wrap}
.sec-ppl span{font-size:12px;padding:3px 9px;border-radius:var(--radius-full);background:var(--main-bg-sunk);color:var(--main-text)}
.sec-ppl span b{font-weight:900}
.sec-more{font-size:12px;color:var(--main-text-muted)}
.sec-sub{margin:4px 0 0;padding-left:16px;font-size:12px;color:var(--main-text-muted)}
.sec-tag-chg{background:var(--purple-dim);color:var(--purple)}
/* Email and Text (2026-10-21): one card per channel, the status as a chip in
   each header, a verified domain as one line with its records folded. */
/* A card's head already draws the line above its first section (2026-10-21:
   every titled Settings card, not only Email and Text). */
.ob-pcard>.ob-pcard-head+.pf-sec,.ob-pcard>.ob-pcard-head+div>.pf-sec:first-child,.msg-card .msg-stop:empty+.pf-sec{border-top:0}
.pf-logo-col{max-width:300px}
/* My Profile modal (2026-10-22): the Settings side-label sections inside the
   modal, stacking when the modal is narrow. */
.pf-modal{container:pfmodal/inline-size}
.pf-modal .pf-sec{grid-template-columns:180px minmax(0,1fr);gap:20px;padding:16px 0}
.pf-modal>.pf-sec:first-child,.pf-modal>.pf-first+.pf-sec{border-top:0}
.pf-modal .pf-body{max-width:none}
.pf-modal .form-group{margin:0}
.pf-modal .form-group>label{display:block;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted);margin:0 0 5px}
.pf-modal .form-group .pf-help{margin-top:4px}
.pf-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@container pfmodal (max-width:560px){.pf-modal .pf-sec{grid-template-columns:minmax(0,1fr);gap:10px}.pf-two{grid-template-columns:minmax(0,1fr)}}
.pf-tabs{margin-bottom:6px}
.pf-first{padding:12px 14px;border-radius:var(--radius);background:var(--purple-dim);border:1px solid var(--purple-border);font-size:13px;color:var(--main-text);line-height:1.5;margin-bottom:6px}
.pf-leave{margin-top:12px;padding:12px 14px;border:1px solid var(--purple-border);border-radius:var(--radius);background:var(--purple-dim);font-size:12.5px;color:var(--main-text);line-height:1.5}
.pf-leave b{display:block;margin-bottom:4px}
.pf-leave .pf-acts{margin-top:10px}
/* Logo and Color (2026-10-22): the controls on the left, one preview on the
   right that spans both rows. Narrow: the preview drops under them. */
.pf-brand-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,1fr)}
.pf-brand-secs{min-width:0}
.pf-brand-secs>.pf-sec:first-child{border-top:0}
.pf-brand-secs .pf-brand-ctl{max-width:300px}
/* Half the card, its preview centered in it: a narrow column sat hard against the right edge on wide screens (2026-10-22). */
.pf-brand-pv-col{padding:22px 24px;border-left:1px solid var(--main-border);justify-content:center;align-items:center}
.pf-brand-pv-col>*{width:100%;max-width:360px}
.pf-brand-pv-col>.pf-chip{width:auto;align-self:center}
@container pfwrap (max-width:860px){.pf-brand-grid{grid-template-columns:minmax(0,1fr)}.pf-brand-pv-col{border-left:0;border-top:1px solid var(--main-border);padding:18px}}
.pf-sec-chip{display:inline-block;margin:0 0 4px}
/* Activity Log client search options are buttons (2026-10-21). */
.al-opt{display:block;width:100%;text-align:left;border:0;background:none;font:inherit}
.al-opt:focus{background:var(--purple-dim);outline:none}
.msg-stop:empty{display:none}
.msg-stop{margin:14px 24px 0;padding:10px 12px;border-radius:var(--radius);background:var(--danger-dim);color:var(--danger-text);font-size:12.5px;line-height:1.5}
.msg-stop b{display:block}
.pf-chip-bad{background:var(--danger-dim);color:var(--danger-text)}
.pf-chip-mu{background:var(--purple-dim);color:var(--main-text-muted)}
.msg-conn{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--main-border);border-radius:var(--radius);padding:12px}
.msg-conn-meta{flex:1;min-width:200px;font-size:12px;color:var(--main-text-muted);line-height:1.5}
.msg-conn-meta b{display:block;color:var(--main-text);font-size:13px;font-family:Menlo,Monaco,Consolas,monospace;font-weight:600;word-break:break-all}
.msg-conn-meta b.is-plain{font-family:Lato,sans-serif;font-weight:700}
.msg-stat{font-size:22px;font-weight:700;color:var(--main-text);font-variant-numeric:tabular-nums}
.msg-in-row{display:flex;gap:8px;flex-wrap:wrap}
.msg-in-row input{flex:1;min-width:200px;background:var(--main-input);border:1px solid var(--main-border);border-radius:var(--radius);color:var(--main-text);padding:9px 12px;font-size:14px}
.msg-in-row input:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-dim);outline:none}
.msg-recs{border:1px solid var(--main-border);border-radius:var(--radius);overflow-x:auto;background:var(--main-card)}
.msg-recs table{width:100%;border-collapse:collapse;min-width:560px}
.msg-recs th{text-align:left;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted);padding:8px 10px}
.msg-recs td{padding:9px 10px;border-top:1px solid var(--main-border);vertical-align:top;font-size:11.5px;color:var(--main-text)}
.msg-recs .msg-rec-grp td{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted);background:var(--purple-dim)}
.msg-rec-val{display:flex;align-items:flex-start;gap:6px}
.msg-rec-val>span{flex:1;font-family:Menlo,Monaco,Consolas,monospace;word-break:break-all;line-height:1.4}
.msg-rec-ty{display:inline-block;font-size:10px;font-weight:800;padding:1px 7px;border-radius:var(--radius-sm);background:var(--purple-dim);color:var(--purple);text-transform:uppercase}
.msg-rec-pri{font-size:10px;color:var(--main-text-muted);margin-top:3px}
.msg-copy{background:transparent;border:none;cursor:pointer;padding:3px;color:var(--main-text-muted);display:flex;align-items:center;border-radius:var(--radius-sm);flex-shrink:0}
.msg-copy:hover{background:var(--main-bg);color:var(--main-text)}
.msg-copy.is-done{color:var(--success-text)}
.msg-link-bad{color:var(--danger-text)}
/* Narrow: each record stacks (type and status, then name, then value) so the
   Status column is never scrolled out of view. */
@container pfwrap (max-width:640px){
  .msg-recs table{display:block;min-width:0}
  .msg-recs thead{display:none}
  .msg-recs tbody,.msg-recs tr.msg-rec-grp,.msg-recs tr.msg-rec-grp td{display:block}
  .msg-recs tr:not(.msg-rec-grp){display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px;border-top:1px solid var(--main-border)}
  .msg-recs tr:not(.msg-rec-grp) td{padding:0;border-top:0;min-width:0}
  .msg-recs tr:not(.msg-rec-grp) td:nth-child(1){order:1;flex:1 0 auto}
  .msg-recs tr:not(.msg-rec-grp) td:nth-child(4){order:2;flex:0 0 auto}
  .msg-recs tr:not(.msg-rec-grp) td:nth-child(2){order:3;flex:0 0 100%}
  .msg-recs tr:not(.msg-rec-grp) td:nth-child(3){order:4;flex:0 0 100%}
  .msg-recs tr:not(.msg-rec-grp) td:nth-child(2)::before{content:"Name / Host";display:block;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted);margin-bottom:2px}
  .msg-recs tr:not(.msg-rec-grp) td:nth-child(3)::before{content:"Value";display:block;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted);margin-bottom:2px}
}
.msg-steps{display:flex;gap:6px;flex-wrap:wrap}
.msg-step{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:var(--radius-full);border:1px solid var(--main-border);color:var(--main-text-muted)}
.msg-step.is-on{background:var(--purple-dim);color:var(--purple);border-color:var(--purple-border)}
.msg-step.is-done{color:var(--success-text)}
.msg-wiz .form-group{margin:0}
.msg-wiz input,.msg-wiz select,.msg-wiz textarea{background:var(--main-input);border:1px solid var(--main-border);border-radius:var(--radius);color:var(--main-text);padding:9px 12px;font-size:14px;width:100%;box-sizing:border-box;margin-top:6px;font-family:inherit}
.msg-wiz textarea{min-height:80px;resize:vertical}
.msg-wiz textarea.is-short{min-height:60px}
.msg-wiz .form-group label{display:block;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted)}
.msg-wiz-title{font-size:14px;font-weight:700;color:var(--main-text)}
.msg-wiz-nav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:6px}
.msg-wiz-nav>div{display:flex;gap:10px}
.msg-sub{font-size:13px;line-height:1.8;color:var(--main-text)}
.msg-sub span{color:var(--main-text-muted)}
.set-flash{animation:set-flash 1.6s ease}
@keyframes set-flash{0%,30%{box-shadow:0 0 0 3px var(--purple-border)}100%{box-shadow:0 1px 6px var(--purple-dim)}}
@media (prefers-reduced-motion:reduce){.set-flash{animation:none;box-shadow:0 0 0 3px var(--purple-border)}}
/* Save model (Phase 3): status beside a control, and the area save bar. */
.set-st{display:inline-flex;align-items:center;margin-left:8px;font-size:12px;color:var(--main-text-muted);min-height:16px;vertical-align:middle}
.set-st.ok{color:var(--success-text)}
.set-st.bad{color:var(--danger-text)}
.set-bar{position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--main-card);border:1px solid var(--purple-border);border-radius:var(--radius);padding:10px 14px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.set-bar-msg{font-size:13px;font-weight:700;color:var(--main-text)}
.set-bar-err{font-size:12px;color:var(--danger-text);flex:1;min-width:0}
.set-bar-act{display:flex;gap:8px;margin-left:auto}
/* Narrow: the rail becomes a block above the area, groups side by side. */
@media (max-width:900px){
  .set-layout{grid-template-columns:1fr}
  .set-rail{position:static;flex-direction:row;flex-wrap:wrap;gap:10px 18px}
  .set-search{flex:1 0 100%;margin-bottom:0}
  .set-grp{border-top:0;padding:0}
}

/* CONTACT IMPORT */
.import-upload-zone{border:2px dashed var(--border);border-radius:var(--radius);
  padding:44px 20px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.import-upload-zone:hover,.import-upload-zone.drag-over{border-color:var(--purple-border);background:var(--purple-dim)}
.import-map-table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:16px}
.import-map-table th{text-align:left;padding:6px 10px;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);border-bottom:1px solid var(--border)}
.import-map-table td{padding:7px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.import-map-sel{background:var(--bg-input);border:1px solid var(--border);border-radius:6px;
  padding:5px 8px;font-size:12px;color:var(--text);outline:none;width:100%}
.import-map-sel:focus{border-color:var(--purple-border)}
.import-stat-card{flex:1;border-radius:10px;padding:14px;text-align:center}
.import-stat-num{font-size:26px;font-weight:700;line-height:1}
.import-stat-label{font-size:12px;margin-top:4px}
.import-dupe-list{max-height:200px;overflow-y:auto;border:1px solid var(--border);border-radius:8px}
.import-dupe-row{display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;border-bottom:1px solid var(--border)}
.import-dupe-row:last-child{border-bottom:none}

/* ============================================================
   Help Center
   ============================================================ */
.help-root {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  height: 100%;
  min-height: 500px;
  background: var(--main-bg);
  color: var(--main-text);
}
@media (max-width: 768px) {
  .help-root { grid-template-columns: 1fr; }
  .help-sidebar { border-right: none; border-bottom: 1px solid var(--main-border); padding-bottom: 16px; }
}

.help-sidebar {
  padding: 16px 12px 16px 0;
  border-right: 1px solid var(--main-border);
  overflow-y: auto;
}
.help-sidebar h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--main-text-muted);
  margin: 4px 0 8px 12px;
  font-weight: 600;
}
.help-cat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--main-text);
  user-select: none;
  transition: background 0.12s;
}
.help-cat:hover { background: var(--main-card-hover); }
.help-cat.active { background: var(--purple-dim); color: var(--purple); font-weight: 600; }
.help-cat .help-cat-icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
.help-cat .help-cat-admin { margin-left: auto; font-size: 9px; text-transform: uppercase; opacity: 0.7; letter-spacing: 0.5px; font-weight: 700; color: var(--purple); }
/* Sits ABOVE the category list (see helpRenderSidebar in js/144), so the
   divider is on the bottom. It was under the list until 2026-09-13, where 18
   categories pushed it off screen. */
.help-support-block { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--main-border); }
.help-support-block .help-support-hint { font-size: 11px; color: var(--main-text-muted); margin: 0 12px 8px; line-height: 1.4; }
.help-support-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--purple);
  background: var(--purple-dim);
  color: var(--purple);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}
.help-support-btn:hover { background: var(--purple); color: #ffffff; }
.help-support-btn .help-support-icon { font-size: 16px; line-height: 1; flex-shrink: 0; }

.help-content { padding: 16px 4px 32px; overflow-y: auto; }

.help-search-wrap { position: relative; margin-bottom: 20px; }
.help-search {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1px solid var(--main-input-border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--main-input);
  color: var(--main-text);
  outline: none;
  font-family: inherit;
}
.help-search:focus { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-dim); }
.help-search::placeholder { color: var(--main-text-muted); }
.help-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.6;
  font-size: 14px;
}

.help-header { margin-bottom: 16px; }
.help-header h1 { font-size: 22px; font-weight: 700; margin: 0 0 4px; color: var(--main-text); }
.help-header .help-header-sub { color: var(--main-text-muted); font-size: 14px; }

.help-article-grid { display: grid; gap: 10px; }
.help-article-card {
  padding: 16px 18px;
  border: 1px solid var(--main-border);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--main-card);
  transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s;
}
.help-article-card:hover {
  border-color: var(--purple);
  transform: translateY(-1px);
  box-shadow: 0 2px 12px var(--purple-dim);
  background: var(--main-card-hover);
}
.help-article-card .help-article-title { font-weight: 600; font-size: 15px; color: var(--main-text); margin-bottom: 4px; }
.help-article-card .help-article-summary { color: var(--main-text-muted); font-size: 13px; line-height: 1.5; }
.help-article-card .help-article-meta { display: flex; gap: 10px; align-items: center; margin-top: 10px; font-size: 11px; color: var(--main-text-muted); }
.help-article-card .help-pill {
  display: inline-block;
  padding: 2px 8px;
  background: var(--purple-dim);
  color: var(--purple);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.help-empty { padding: 40px 20px; text-align: center; color: var(--main-text-muted); }

.help-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--purple);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 0;
  margin-bottom: 16px;
  font-family: inherit;
}
.help-back:hover { text-decoration: underline; }

.help-reader { max-width: 760px; }
.help-reader h1 { font-size: 26px; font-weight: 700; margin: 0 0 8px; color: var(--main-text); }
.help-reader .help-reader-meta { color: var(--main-text-muted); font-size: 12px; margin-bottom: 24px; display: flex; gap: 10px; align-items: center; }
.help-reader .help-p { font-size: 15px; line-height: 1.65; color: var(--main-text); margin: 12px 0; }
.help-reader .help-h2 { font-size: 17px; font-weight: 600; margin: 28px 0 10px; color: var(--main-text); }
.help-reader .help-ul, .help-reader .help-ol, .help-reader .help-steps { margin: 12px 0; padding-left: 24px; }
.help-reader .help-ul li, .help-reader .help-ol li { font-size: 14px; line-height: 1.6; color: var(--main-text); margin: 6px 0; }
.help-reader .help-steps { list-style: none; padding-left: 0; counter-reset: step; }
.help-reader .help-steps li {
  counter-increment: step;
  position: relative;
  padding: 12px 14px 12px 48px;
  margin: 8px 0;
  background: var(--main-card);
  border: 1px solid var(--main-border);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--main-text);
}
.help-reader .help-steps li::before {
  content: counter(step);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  background: var(--purple);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.help-reader .help-tip, .help-reader .help-warn {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.55;
}
.help-reader .help-tip { background: rgba(16, 185, 129, 0.08); border-left: 3px solid #10b981; color: var(--main-text); }
.help-reader .help-warn { background: var(--orange-dim); border-left: 3px solid var(--orange); color: var(--main-text); }
.help-reader .help-callout-label { font-weight: 700; flex-shrink: 0; }
.help-reader .help-tip .help-callout-label { color: #10b981; }
.help-reader .help-warn .help-callout-label { color: var(--orange); }
.help-reader .help-table-wrap { margin: 18px 0; overflow-x: auto; border: 1px solid var(--main-border); border-radius: 10px; }
.help-reader .help-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.help-reader .help-table th { text-align: center; font-weight: 700; color: var(--main-text); background: var(--main-card); padding: 10px 12px; border-bottom: 1px solid var(--main-border); white-space: nowrap; }
.help-reader .help-table th:first-child { text-align: left; }
.help-reader .help-table td { padding: 9px 12px; border-bottom: 1px solid var(--main-border); text-align: center; color: var(--main-text); }
.help-reader .help-table tr:last-child td { border-bottom: none; }
.help-reader .help-td-label { text-align: left; font-weight: 600; }
.help-reader .help-cell { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.help-reader .help-cell-yes { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.help-reader .help-cell-no { color: var(--main-text-muted); }
.help-reader .help-cell-view { background: rgba(55, 138, 221, 0.15); color: #378add; }

.help-search-hit { background: rgba(255, 200, 0, 0.35); border-radius: 2px; padding: 0 2px; color: var(--main-text); font-weight: 600; }

/* Inline info-icon tooltip (used on coupon usage rules). Bubble uses --main-text
   as background and --main-card as text so it inverts correctly in both themes.
   NOT .help-tip: that is the help ARTICLE callout (.help-reader .help-tip above).
   This was named .help-tip until 2026-09-13, and its width/height leaked into every
   Tip callout in the help reader, squeezing each one into a 14px box. */
.info-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 5px; border-radius: var(--radius-full); border: 1px solid var(--main-border); background: var(--main-bg); color: var(--main-text-muted); font-size: 9px; font-weight: 700; font-style: normal; line-height: 1; cursor: help; vertical-align: middle; user-select: none; flex-shrink: 0; text-transform: none; letter-spacing: 0; }
/* text-transform: none because a .form-group label uppercases its children,
   which turned the "i" into "I" in every labelled tip. */
.info-tip:hover, .info-tip:focus:not(:focus-visible) { border-color: var(--purple); color: var(--purple); outline: none; }
.info-tip .info-tip__pop { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 210px; padding: 8px 10px; border-radius: var(--radius); background: var(--main-text); color: var(--main-card); font-size: 11px; font-weight: 500; font-style: normal; line-height: 1.45; text-align: left; opacity: 0; visibility: hidden; transition: opacity .12s ease; z-index:var(--z-float); pointer-events: none; box-shadow: var(--shadow-lg); white-space: normal; }
.info-tip .info-tip__pop::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--main-text); }
.info-tip:hover .info-tip__pop, .info-tip:focus .info-tip__pop, .info-tip:focus-within .info-tip__pop { opacity: 1; visibility: visible; }

/* ===================== INVOICES (Payments > Invoices) ===================== */
.ta-r{text-align:right}
/* List */
.inv-chips{display:flex;gap:6px;flex-wrap:wrap}
.inv-chip{padding:5px 12px;border-radius:var(--radius-full);border:1px solid var(--main-border);background:var(--main-card);color:var(--main-text-muted);font-size:12px;cursor:pointer}
.inv-chip.active{background:var(--purple);border-color:var(--purple);color:#fff}
.inv-search{max-width:220px}
.inv-lines-empty{padding:28px;text-align:center;color:var(--main-text-muted);font-size:13px}
.inv-num{font-weight:600;color:var(--main-text)}
.inv-danger-link{color:var(--danger)}
.gc-orders td{vertical-align:top;font-size:13px}
.gc-orders td>div{overflow:hidden;text-overflow:ellipsis}
.gc-sub{margin-top:2px;font-size:11px;color:var(--main-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-muted{color:var(--main-text-muted)}
.gc-bal{font-weight:700;color:var(--main-text)}
.gc-bal.is-zero{color:var(--main-text-muted)}
.gc-toolbar{flex-wrap:wrap;gap:8px}
.gc-toolbar .gc-search{margin-left:auto}
.gc-badge{display:inline-block;padding:2px 9px;border-radius:var(--radius-full);font-size:11px;font-weight:600;white-space:nowrap}
.gc-badge-active{background:var(--success-dim);color:var(--success-text)}
.gc-badge-partial{background:var(--warning-dim);color:var(--warning-text)}
.gc-badge-redeemed{background:var(--main-bg);color:var(--main-text-muted);box-shadow:inset 0 0 0 1px var(--main-border)}
.gc-badge-refunded{background:var(--danger-dim);color:var(--danger-text)}
.gc-badge-voided{background:var(--danger-dim);color:var(--danger-text)}
/* Sell a Gift Card (130 gcOpenSell and its blocks), moved from inline styles
   2026-10-09; a computed-style diff showed no change on screen. */
.gc-sell-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,330px);gap:22px;align-items:start}
.form-group label.gc-check-label{display:flex;align-items:center;gap:8px;cursor:pointer}
.gc-check-label .gc-check{width:auto;margin:0}
.gc-sell-note{margin-top:4px;font-size:11px;color:var(--main-text-muted)}
.sell-hint{font-weight:400;color:var(--main-text-muted)}
.gc-sell-msg-count{margin-top:4px;font-size:11px;color:var(--main-text-muted);text-align:right}
#gc-sell-msg{resize:vertical;min-height:64px}
.gc-sell-side{position:sticky;top:0}
.gc-sell-cap{margin-bottom:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--main-text-muted)}
.gc-sell-cap.gc-sell-cap-sm{font-size:10px}
.gc-sell-art-note{margin-top:6px;font-size:10px;text-align:center;color:var(--main-text-muted)}
.gc-sell-pay{margin-top:16px;padding-top:14px;border-top:1px solid var(--main-border)}
/* Adjustments directly under the Payment heading (Sell a Gift Card, Sell a
   Series): the 28px between sections doubled up under a heading. */
.surface-light .form-group>label+.sec-label{margin-top:10px}
.sell-adj{margin-top:8px}
.sell-adj .form-row{margin-bottom:6px}
.sell-f2{flex:2}
.sell-f1{flex:1}
.sell-apply{width:100%;height:38px}
.sell-status{font-size:11px;color:var(--main-text-muted)}
.sell-seg{display:flex;height:38px;overflow:hidden;border:1px solid var(--main-border);border-radius:var(--radius)}
.sell-seg>button{flex:1}
.sell-gap{margin-bottom:10px}
.gc-sell-amt-val{font-size:18px;font-weight:800;color:var(--main-text)}
.gc-sell-denoms{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.gc-sell-amt-inp{width:100%;background:var(--main-input);border:1px solid var(--main-border);border-radius:var(--radius);color:var(--main-text);padding:9px 12px;font-family:Lato,sans-serif;font-size:14px;outline:none}
.gc-design-empty{font-size:12px;color:var(--main-text-muted)}
/* Card Variation modal (2026-10-10). A checkbox column carries its own label
   and an option row as tall as the field beside it, so the box lines up with
   the field instead of floating at the column's top or bottom. */
.gcp-types{display:flex;gap:8px;flex-wrap:wrap}
.gcp-type-hint{margin-top:6px;font-size:12px;color:var(--text-muted)}
.gcp-lbl-note{font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-muted)}
.form-group label.gcp-opt{display:flex;align-items:center;gap:8px;min-height:37px;margin:0;cursor:pointer;text-transform:none;letter-spacing:0;font-size:13px;font-weight:400;color:var(--text)}
.gcp-opt input[type=checkbox]{width:16px;height:16px;margin:0;flex:none;accent-color:var(--purple)}
.gcp-opt-hint{margin-top:4px;font-size:11px;color:var(--text-muted)}
.gcp-warn{margin-top:6px;font-size:12px;color:var(--warning-text)}
/* Online Booking: the gift card page (moved from Gift Cards, 2026-10-10). */
/* Designs tab cards (2026-10-10): a column, name clamped to two lines, the
   Edit/Remove row pinned to the foot so every card in a row lines up. */
.gc-dc{display:flex;flex-direction:column;border:1px solid var(--main-border);border-radius:var(--radius);overflow:hidden;background:var(--main-card)}
.gc-dc-body{display:flex;flex-direction:column;flex:1;padding:10px 12px}
.gc-dc-body.is-lib{padding:8px 12px}
.gc-dc-name{font-size:13px;font-weight:600;line-height:1.35;color:var(--main-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.gc-dc-body.is-lib .gc-dc-name{font-size:12px}
.gc-dc-acts{display:flex;gap:6px;margin-top:auto;padding-top:8px;border-top:1px solid var(--main-border)}
.gc-dc-body .gc-dc-name{margin-bottom:8px}
.gc-dc-body.is-lib .gc-dc-name{margin-bottom:0}
.gc-design-row{display:flex;align-items:stretch;gap:8px}
.gc-design-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;flex:1;min-width:0}
.gc-design-page{margin-top:6px;text-align:center;font-size:12px;color:var(--main-text-muted)}
/* Arrows run the full height of the grid: big targets either side. */
.gc-design-row .gc-design-arrow{flex:none;align-self:stretch;width:36px;padding:0;justify-content:center;font-size:24px;line-height:1}
.gc-design-row .gc-design-arrow:disabled{opacity:.35;cursor:default}
.gc-design-tile{cursor:pointer;border-radius:8px;overflow:hidden;border:2px solid var(--main-border)}
.gc-design-tile.is-on{border-color:var(--purple)}
.gc-design-tile:focus-visible{outline:none;box-shadow:0 0 0 3px var(--purple-dim)}
.gc-design-art{width:100%}
.gc-design-name{padding:5px 7px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--main-text-muted)}
/* Sell a Series (066 srSellRender, srSellUpdateSummary), from inline styles
   2026-10-09; the shared .sell-* rules above serve both sell modals. */
.sr-sell-wrap{max-width:540px}
.sr-sell-summary{margin-bottom:14px;padding:12px 14px;font-size:13px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius)}
.sr-sum-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.sr-sum-strong{color:var(--main-text)}
.sr-sum-meta{margin-top:4px;font-size:12px;color:var(--main-text-muted)}
.sr-sum-price{text-align:right}
.sr-sum-line{font-size:12px;color:var(--main-text-muted)}
.sr-sum-off{font-size:12px;color:var(--success-light)}
.sr-sum-total{font-family:'Exo 2',sans-serif;font-size:20px;font-weight:700;color:var(--orange)}
.sr-sum-total.sr-sum-total-after{margin-top:2px}
.gc-type-badge{display:inline-block;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:700;}
.gc-type-service{background:var(--type-service-dim);color:var(--type-service)}
.gc-type-package{background:var(--type-package-dim);color:var(--type-package)}
.gc-type-series{background:var(--type-series-dim);color:var(--type-series)}
.gc-type-membership{background:var(--type-membership-dim);color:var(--type-membership)}
.gc-type-monetary{background:var(--purple-dim);color:var(--purple-light)}
/* Gift Cards, Issued tab (approved mockup, 2026-10-10): section tabs, four
   stat tiles that open Reports, a sortable table with a footer pager. */
.gc-tabs{display:flex;align-items:flex-end;gap:12px;border-bottom:1px solid var(--divider);margin-bottom:18px}
.gc-tabs-scroll{display:flex;align-items:flex-end;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.gc-body{container:gcbody/inline-size}
.gc-tab{position:relative;flex:none;background:none;border:0;padding:9px 14px 11px;font-size:13px;font-weight:700;color:var(--main-text-muted);cursor:pointer;white-space:nowrap}
.gc-tab:hover{color:var(--subnav-tab-hover)}
.gc-tab.active{color:var(--purple)}
.gc-tab.active::after{content:'';position:absolute;left:10px;right:10px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--purple)}
.gc-tabs .gc-tabs-sell{margin-bottom:7px;flex:none}
.gc-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}
.gc-stats>.skel-wrap,.gc-stats>.empty-state{grid-column:1/-1}
.gc-stat{text-align:left;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:14px;cursor:pointer;color:var(--main-text);font:inherit;transition:border-color .15s,background .15s}
.gc-stat:hover{border-color:var(--purple-border);background:var(--main-card-hover)}
.gc-stat-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.gc-stat-ic{width:26px;height:26px;flex:none;border-radius:var(--radius-md);background:var(--purple-dim);color:var(--purple);display:flex;align-items:center;justify-content:center}
.gc-stat-ic.is-ok{background:var(--success-dim);color:var(--success-text)}
.gc-stat-ic.is-warn{background:var(--warning-dim);color:var(--warning-text)}
.gc-stat-lbl{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted)}
.gc-stat-val{font-family:'Exo 2',sans-serif;font-size:22px;font-weight:700;line-height:1.15}
.gc-stat-sub{margin-top:3px;font-size:12px;color:var(--main-text-muted)}
.gc-toolbar{margin-bottom:12px}
.gc-toolbar .search-box.gc-search{max-width:320px}
.gc-orders col.gc-c-card{width:230px}
.gc-orders col.gc-c-issued{width:170px}
.gc-orders col.gc-c-bal{width:170px}
.gc-orders col.gc-c-status{width:120px}
.gc-orders col.gc-c-act{width:52px}
.gc-orders th.ta-r,.gc-orders td.ta-r{text-align:right}
/* Rows size to their content with real padding. .ct-table td is a fixed 58px
   with no vertical padding; top-aligned, that glued each row's first line to
   the border above (under the header on the first row). */
.ct-table.gc-orders td{height:auto;padding-top:11px;padding-bottom:11px}
/* The data cells stay top-aligned so stacked lines read together; the row
   menu centers in the row, however many lines the tallest cell has. */
.ct-table.gc-orders td.ct-act{vertical-align:middle}
.gc-orders th.gc-sortable{cursor:pointer;user-select:none}
.gc-orders th.sort-asc,.gc-orders th.sort-desc{color:var(--purple)}
.gc-code-wrap{display:inline-flex;align-items:center;gap:6px}
.gc-code{font-family:monospace;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--main-text)}
.gc-orders .gc-copy{padding:3px;opacity:0;transition:opacity .12s}
.gc-orders tr:hover .gc-copy,.gc-orders .gc-copy:focus-visible{opacity:1}
.gc-chip-n{margin-left:6px;min-width:20px;padding:1px 6px;border-radius:var(--radius-full);background:var(--main-bg);font-size:11px;font-weight:700;color:var(--main-text-muted);display:inline-block;text-align:center}
.gc-chip-n:empty{display:none}
.inv-chip.active .gc-chip-n{background:rgba(255,255,255,.22);color:#fff}
.gc-filter-pill{display:inline-flex;align-items:center;font-weight:700}
.gc-filter-x{margin-left:6px;font-size:14px;line-height:1}
#gc-orders-table.is-stale{opacity:.55;transition:opacity .15s}
.gc-holder{display:flex;align-items:center;gap:6px;min-width:0}
.gc-holder-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-note-pip{flex:none;padding:1px 7px;border-radius:var(--radius-full);background:var(--warning-dim);color:var(--warning-text);font-size:10.5px;font-weight:800}
.gc-note-field{margin:0 0 12px}
.gc-buyer-msg{margin:0 0 12px}
.gc-buyer-msg-k{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}
.gc-buyer-msg-t{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);padding:8px 10px;font-size:13px;line-height:1.5;font-style:italic;color:var(--main-text);white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:4px}
.gc-note-field textarea{resize:vertical;min-height:52px}
.gc-note-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.gc-note-hint{font-size:11.5px;color:var(--text-muted)}
.gc-bar{width:110px;max-width:100%;height:4px;margin:5px 0 2px auto;border-radius:var(--radius-full);background:var(--main-bg-sunk);overflow:hidden}
.gc-bar i{display:block;height:100%;border-radius:inherit;background:var(--warning)}
.gc-tfoot{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:10px 14px;border-top:1px solid var(--main-border);font-size:12px;color:var(--main-text-muted)}
.gc-pager{margin-left:auto;display:flex;align-items:center;gap:4px}
.gc-pgb{min-width:30px;height:28px;padding:0 8px;border:1px solid var(--main-border);background:var(--main-card);border-radius:var(--radius-md);font-size:12px;font-weight:700;color:var(--main-text);cursor:pointer}
.gc-pgb:hover:not(:disabled){border-color:var(--purple-border)}
.gc-pgb.active{background:var(--purple);border-color:var(--purple);color:#fff}
.gc-pgb:disabled{opacity:.45;cursor:not-allowed}
.gc-pg-gap{padding:0 4px}
.appt-row-menu.gc-row-menu{position:fixed;top:0;right:0;margin-top:0;min-width:190px;z-index:var(--z-modal-pop);background:var(--main-card);border-color:var(--main-border);box-shadow:var(--shadow-lg)}
.gc-row-menu .appt-row-menu-item{color:var(--main-text);font-weight:700;font-size:12.5px}
.gc-row-menu .appt-row-menu-item svg{color:var(--main-text-muted)}
.gc-row-menu .appt-row-menu-item:hover{background:var(--purple-dim);color:var(--purple)}
.gc-row-menu .appt-row-menu-item:hover svg{color:var(--purple)}
.gc-row-menu .appt-row-menu-danger,.gc-row-menu .appt-row-menu-danger svg,.gc-row-menu .appt-row-menu-danger:hover,.gc-row-menu .appt-row-menu-danger:hover svg{color:var(--danger-text)}
.gc-row-menu .appt-row-menu-danger:hover{background:var(--danger-dim)}
.gc-row-menu .appt-row-menu-sep{background:var(--main-border)}
/* Card Variations list (approved mockup, 2026-10-10). */
.gc-vars-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.gc-vars-lead{max-width:460px;font-size:13px;color:var(--main-text-muted)}
.gc-vars-toolbar .gc-vars-new{flex:none}
.gc-vars col.gc-vc-type{width:120px}
.gc-vars col.gc-vc-val{width:200px}
.gc-vars col.gc-vc-iss{width:96px}
.gc-vars col.gc-vc-st{width:110px}
.gc-vars col.gc-vc-act{width:52px}
.ct-table.gc-vars td{height:auto;padding-top:11px;padding-bottom:11px;font-size:13px;vertical-align:middle}
.gc-vars tbody tr{cursor:pointer}
.gc-vars th.ta-r,.gc-vars td.ta-r{text-align:right}
.gc-vars th.gc-sortable{cursor:pointer;user-select:none}
.gc-vars th.sort-asc,.gc-vars th.sort-desc{color:var(--purple)}
.gc-var-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:var(--main-text)}
.gc-vars tr.is-off .gc-var-nm{color:var(--main-text-muted)}
.gc-var-lock{display:flex;align-items:center;gap:4px}
.gc-var-val div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-var-iss-l{display:none}
.gc-vstat{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--main-text-muted)}
.gc-vstat::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.gc-vstat.is-on{color:var(--success-text)}
/* Narrow: each variation stacks. Name and status on top, type, value and
   issued count below; the menu stays so Delete is reachable. */
@container gcbody (max-width:600px){
  .gc-vars colgroup,.gc-vars thead{display:none}
  .gc-vars,.gc-vars tbody{display:block}
  .gc-vars tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;column-gap:10px;row-gap:6px;align-items:center;padding:12px 4px 12px 14px;border-bottom:1px solid var(--main-border)}
  .gc-vars tbody tr:last-child{border-bottom:0}
  .ct-table.gc-vars td{display:block;height:auto;padding:0;border:0}
  .ct-table.gc-vars td.ct-act{grid-column:4;grid-row:1/3;padding-right:0}
  .gc-vars td:nth-child(1){grid-column:1/3;grid-row:1}
  .gc-vars td.gc-var-st{grid-column:3;grid-row:1;text-align:right}
  .gc-vars td.gc-var-type{grid-column:1;grid-row:2}
  .gc-vars td.gc-var-val{grid-column:2;grid-row:2}
  .gc-vars td.gc-var-iss{grid-column:3;grid-row:2;font-size:12px;color:var(--main-text-muted)}
  .gc-var-iss-l{display:inline}
}
/* Coupons list (approved mockup, 2026-10-10): the Card Variations table
   (.gc-vars) with coupon columns and four statuses. */
.cpn-body{container:cpnbody/inline-size}
.gc-vstat.is-danger{color:var(--danger-text)}
.gc-vstat.is-warn{color:var(--warning-text)}
.gc-vars tbody tr.is-ro{cursor:default}
.cpn-list col.cpn-c-disc{width:110px}
.cpn-list col.cpn-c-uses{width:96px}
.cpn-list col.cpn-c-exp{width:130px}
.cpn-list col.cpn-c-st{width:150px}
.cpn-head{display:flex;align-items:center;gap:6px;min-width:0}
.cpn-code{flex:none;padding:2px 8px;border:1px dashed var(--main-border);border-radius:var(--radius-sm);background:var(--main-bg);font-family:monospace;font-size:12.5px;font-weight:700;letter-spacing:.05em;color:var(--main-text)}
.cpn-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--main-text-muted)}
.cpn-disc{font-weight:700;color:var(--main-text)}
@container cpnbody (max-width:760px){
  .gc-toolbar .search-box.gc-search{max-width:none;flex-basis:100%;order:-1;margin-left:0}
}
/* Narrow: code, name and rules on top with the status; discount and uses,
   then the expiry, below. The menu stays so Delete is reachable. */
@container cpnbody (max-width:600px){
  .cpn-list colgroup,.cpn-list thead{display:none}
  .cpn-list,.cpn-list tbody{display:block}
  .cpn-list tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:10px;row-gap:6px;align-items:center;padding:12px 4px 12px 14px;border-bottom:1px solid var(--main-border)}
  .cpn-list tbody tr:last-child{border-bottom:0}
  .ct-table.cpn-list td{display:block;height:auto;padding:0;border:0}
  .ct-table.cpn-list td.ct-act{grid-column:3;grid-row:1/4;padding-right:0}
  .cpn-list td:nth-child(1){grid-column:1;grid-row:1}
  .cpn-list td.gc-var-st{grid-column:2;grid-row:1;text-align:right}
  .cpn-list td.cpn-disc{grid-column:1;grid-row:2}
  .cpn-list td.cpn-uses{grid-column:2;grid-row:2;font-size:12px;color:var(--main-text-muted)}
  .cpn-list td.cpn-exp{grid-column:1/3;grid-row:3;font-size:12px;color:var(--main-text-muted)}
  .cpn-list td.cpn-exp.is-never{display:none}
  .cpn-list .gc-var-iss-l{display:inline}
}
/* Coupon editor (openCouponModal, approved mockup 2026-10-10). One grid
   (.form-row) for every field, one check-row pattern, a $ or % affix on
   number fields, and a neutral summary line instead of the orange box. */
.cpn-sec{border-top:1px solid var(--border);padding-top:14px;margin-top:2px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.cpn-sec-sub{font-size:12px;color:var(--text-muted);margin:2px 0 10px}
.cpn-sec + .form-row,.cpn-sec + .cpn-checks,.cpn-sec + .form-group{margin-top:10px}
.cpn-inline{display:flex;gap:8px;align-items:center}
.cpn-inline > input,.cpn-inline > select,.cpn-inline > .cpn-affix{flex:1;min-width:0}
.cpn-inline > .btn,.cpn-inline > .dseg{flex:none;white-space:nowrap}
.cpn-per{flex:none;font-size:13px;color:var(--text-muted)}
.form-group .cpn-inline > input.cpn-num-sm{flex:0 0 72px}
.cpn-form .dseg{background:var(--bg-input);border-color:var(--border);height:38px;box-sizing:border-box}
.cpn-form .dseg-b{display:flex;align-items:center;justify-content:center}
.cpn-form .dseg.is-full{display:flex;width:100%}
.cpn-form .dseg.is-full .dseg-b{flex:1}
.cpn-affix{position:relative}
.cpn-affix-s{position:absolute;top:50%;transform:translateY(-50%);left:12px;font-size:14px;color:var(--text-muted);pointer-events:none}
.form-group .cpn-affix input{padding-left:26px}
.cpn-affix.is-suffix .cpn-affix-s{left:auto;right:12px}
.form-group .cpn-affix.is-suffix input{padding-left:12px;padding-right:30px}
.cpn-summary{margin:0 0 14px;padding:8px 12px;border:1px solid var(--purple-border);border-radius:var(--radius);background:var(--purple-dim);font-size:13px;font-weight:600;color:var(--text)}
.cpn-checks{display:flex;flex-direction:column;margin:0 0 14px}
.cpn-checks.is-inline{flex-direction:row;flex-wrap:wrap;gap:0 22px;margin-top:-4px}
.cpn-check{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-top:1px solid var(--border);font-size:13px;color:var(--text);cursor:pointer}
.cpn-check:first-child,.cpn-checks.is-inline .cpn-check{border-top:0}
.cpn-checks.is-inline .cpn-check{padding:4px 0}
/* Where it can be used: five places in two columns, one under 560px. */
.cpn-checks.is-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;margin-top:4px}
.cpn-checks.is-grid .cpn-check:nth-child(-n+2){border-top:0}
@media (max-width:560px){
  .cpn-checks.is-grid{grid-template-columns:minmax(0,1fr)}
  .cpn-checks.is-grid .cpn-check:nth-child(2){border-top:1px solid var(--border)}
}
.cpn-check input[type=checkbox]{flex:none;margin:1px 0 0}
.cpn-check-t{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.cpn-check-h{display:block;margin-top:2px;font-size:12px;color:var(--text-muted)}
.cpn-code-inp{text-transform:uppercase}
.cpn-days{width:60px;padding:4px 8px;margin:0 2px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-input);color:var(--text);font-family:inherit;font-size:13px;outline:none}
.cpn-days:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-dim)}
.cpn-days:disabled{opacity:.5;cursor:not-allowed}
.cpn-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cpn-pills:empty{display:none}
.cpn-hint{margin-top:6px;font-size:12px;color:var(--text-muted)}
/* Products list (approved mockup, 2026-10-10): the .gc-vars table with
   product columns, a thumbnail, and option rows under a chevron. */
.prod-body{container:prodbody/inline-size}
.prod-bar .filter-sel{width:auto}
/* Catalog editors (inline-style cleanup, 2026-10-13). Tokens only; names
   start ce-. Manage Categories, Add-On Library, Manage Resources. */
.btn.ce-mini-btn{font-size:11px;padding:4px 10px}
.btn.ce-mini-btn.ce-danger{color:var(--danger-light)}
.ce-mr-auto{margin-right:auto}
.ce-grow{flex:1;min-width:0}
.ce-intro{font-size:12px;color:var(--main-text-muted);margin-bottom:14px;line-height:1.6}
.ce-empty-line{color:var(--text-muted);font-size:13px;padding:16px 0;text-align:center}
.ce-empty-box{color:var(--main-text-muted);font-size:13px;padding:24px 0;text-align:center;border:1px dashed var(--main-border);border-radius:var(--radius);margin-bottom:14px}
.ce-cat-list{max-height:50vh;overflow-y:auto;display:flex;flex-direction:column;gap:6px;margin-bottom:18px;padding-right:4px}
.ce-cat-edit{display:flex;align-items:center;gap:8px;padding:8px;background:var(--main-bg);border:1px solid var(--purple-border);border-radius:6px}
.ce-cat-edit input{flex:1;height:34px;font-size:13px}
.ce-cat-row{display:flex;align-items:center;gap:8px;padding:8px 12px}
.ce-cat-nm{flex:1;font-size:13px;font-weight:500}
.ce-add-row{display:flex;gap:8px;border-top:1px solid var(--main-border);padding-top:14px}
.ce-add-row input{flex:1;min-width:0;height:36px;padding:0 12px;font-family:Lato,sans-serif;font-size:13px;color:var(--text);background:var(--bg-input);border:1px solid var(--main-input-border);border-radius:var(--radius);outline:none;transition:border-color .2s}
.ce-add-row input:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-dim)}
.ce-add-row .btn{height:36px;flex:none}
.ce-add-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.ce-add-top>.ce-intro,.ce-add-top>.ce-hint{flex:1;margin:0}
.ce-add-top>.btn{flex:none}
.ce-list{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.ce-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:var(--radius)}
.ce-item.is-drag{cursor:move}
.ce-item.is-off{opacity:.55}
.ce-item-top{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.ce-item-nm{font-size:13px;font-weight:600;color:var(--main-text)}
.ce-item-meta{font-size:12px;font-weight:600;color:var(--main-text-muted)}
.ce-item-off{font-size:10px;color:var(--danger-text)}
.ce-drag{font-size:14px;color:var(--text-muted);flex-shrink:0}
/* Service editor, Resources tab (sr-): requirement boxes of resource chips. */
.svc-ms-x{cursor:pointer;margin-left:3px;opacity:.75}
/* Service editor (svc-): tabs, details, availability, group box, pricing
   rows and the add-ons tab. */
.ce-hint{font-size:11px;color:var(--text-muted);margin-top:4px}
.ce-pad-center{color:var(--main-text-muted);font-size:13px;padding:14px 0;text-align:center}
.ce-pad-center.is-24{padding:24px 0}
.form-group label.gc-check-label.is-plain{text-transform:none;letter-spacing:0}
.svc-photo-img{width:64px;height:64px;border-radius:10px;object-fit:cover;border:1px solid var(--main-border)}
.svc-photo-empty{width:64px;height:64px;border-radius:10px;border:1px dashed var(--main-border);color:var(--text-muted);font-size:11px;align-items:center;justify-content:center;text-align:center}
.svc-ms-ck{margin-left:auto;color:var(--success-light);font-weight:700}
.svc-grp{margin:10px 0 0;padding:14px;background:var(--main-bg);border:1px solid var(--main-input-border);border-radius:6px}
.svc-grp-note{font-size:11px;color:var(--text-muted);margin-top:8px;padding:10px 12px;background:var(--main-bg);border-radius:4px;line-height:1.5}
.svc-po-empty{font-size:12px;color:var(--text-muted);padding:8px 0}
.price-opt-row{display:flex;gap:10px;align-items:flex-end;border-radius:var(--radius)}
.price-opt-row .form-group{flex:1;margin:0}
.price-opt-row .po-status{margin:0 0 6px;flex:0 0 auto}
.price-opt-row.is-inactive .form-group input{opacity:.6}
.price-opt-row .form-group.is-wide{flex:2}
.price-opt-row .form-group label{font-size:10px;color:var(--text-muted)}
.price-opt-row .form-group input{background:var(--bg-card);border:1px solid var(--border);color:var(--text)}
.po-buf-note{font-size:11px;color:var(--warning-text);margin:-4px 2px 2px}
.po-buf-clear{background:none;border:none;padding:0;font:inherit;font-weight:700;color:var(--purple);cursor:pointer}
.price-opt-row .po-remove,.pkg-card .po-remove{background:transparent;border:1px solid var(--border);color:var(--text-muted);font-size:16px;line-height:1;padding:8px 11px;border-radius:var(--radius);flex-shrink:0;cursor:pointer}
.svc-ao-empty{font-size:12px;color:var(--main-text-muted);padding:14px 0;text-align:center;border:1px dashed var(--main-border);border-radius:var(--radius)}
/* Series (so-) and package (pkg-) editors. */
/* Catalog editors: section titles, link buttons, the status chip in the title. */
.ce-sec{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted);margin:6px 0 2px}
.ce-link{background:none;border:none;padding:0;font:inherit;font-size:12px;font-weight:700;color:var(--purple);cursor:pointer;align-self:flex-start}
.ce-link:hover{text-decoration:underline}
.ce-status-chip{margin-left:10px;vertical-align:middle;font-family:inherit;font-size:11px;font-weight:700;padding:2px 10px;border-radius:var(--radius-full);border:1px solid var(--main-border);background:var(--main-bg);color:var(--main-text-muted);cursor:pointer;text-transform:none;letter-spacing:0}
.ce-status-chip.is-on{background:var(--success-dim);border-color:var(--success-dim);color:var(--success-text)}
.prd-ph-add{width:64px;height:64px;border-radius:var(--radius);border:1px dashed var(--main-input-border);background:none;color:var(--main-text-muted);font-size:22px;cursor:pointer}
.prd-ph-add:hover{border-color:var(--purple);color:var(--purple)}
button.bh-toggle{border:none;padding:0;font:inherit}
/* Service editor (board 1): pricing rows without repeated labels, the
   booking page row, the staff title's Select All. */
.price-opt-row{background:none;border:0;padding:0}
.ce-sec .svc-staff-all{text-transform:none;letter-spacing:0;font-size:12px}
.svc-page-row{display:flex;gap:12px;align-items:flex-start}
.svc-page-ph{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 64px}
.svc-page-ph .svc-photo-img{cursor:pointer}
button.svc-photo-empty{background:none;font-size:20px;cursor:pointer;font-family:inherit}
button.svc-photo-empty:hover{border-color:var(--purple);color:var(--purple)}
/* Catalog editors on a phone (2026-10-13): the editor body is the
   container, so this answers to the modal's width, not the page's. Three
   field rows stack; the hours rows and product variation rows wrap. */
.ce-form{container:ceform/inline-size}
@container ceform (max-width:480px){
  .ce-form .form-row-3{grid-template-columns:minmax(0,1fr)}
  .ce-form .bh-row{flex-wrap:wrap;row-gap:6px}
  .ce-form .bh-row .time-pair{flex:1 1 38%}
  .ce-form .prd-var-row{flex-wrap:wrap}
  .ce-form .prd-var-c.is-wide{flex:1 1 calc(100% - 40px)}
  .ce-form .prd-var-c{flex:1 1 30%}
  .ce-form .prd-var-c.is-100{flex:1 1 30%;width:auto}
}
/* A folded group of rarely used fields (Catalog editors, 2026-10-13). */
.so-sold-note{font-size:12px;color:var(--warning-text);background:var(--warning-dim);border-radius:var(--radius);padding:8px 12px}
.pkg-oa-empty{font-size:12px;color:var(--main-text-muted);padding:8px 10px;border:1px dashed var(--main-border);border-radius:var(--radius)}
/* Package lines as a table (approved mockup, board 2, 2026-10-13). */
.pkg-td-svc{min-width:0}
.pkg-card{border:1px solid var(--main-border);border-radius:var(--radius-lg);background:var(--main-card);padding:10px 12px}
.pkg-card-top{display:flex;align-items:center;gap:8px}
.pkg-card-top .pkg-td-svc{flex:1.3;min-width:0}
.pkg-card-top .pkg-card-var{flex:1;min-width:0}
.pkg-card .po-remove{padding:6px 10px}
.pkg-num{flex:none;width:20px;height:20px;border-radius:50%;background:var(--purple-dim);color:var(--purple);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.pkg-card-sub{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px;padding-left:46px}
.pkg-card-l{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted);margin-bottom:3px}
.pkg-card-v{font-size:12.5px;color:var(--main-text-muted);padding-top:7px}
.pkg-card .pkg-field{padding:6px 8px;font-size:12.5px;height:32px}
.pkg-card-foot{padding-left:46px}
.pkg-l-drag:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:4px}
.pkg-save{margin-top:8px;padding:8px 10px;border-radius:var(--radius);background:var(--main-card);border:1px solid var(--main-border);font-size:12.5px;color:var(--main-text)}
.pkg-save.is-saves{background:var(--success-dim);border-color:var(--success-dim);color:var(--success-text)}
.pkg-save.is-up{background:var(--warning-dim);border-color:var(--warning-dim);color:var(--warning-text)}
.pkg-save-row{display:flex;justify-content:space-between;gap:8px}
.pkg-save-row strong{font-weight:800}
.pkg-save-sub{font-size:11px;opacity:.8;margin-top:2px}
.pkg-len-bar{display:flex;height:10px;border-radius:5px;overflow:hidden;gap:2px;margin:4px 0 6px;background:var(--main-bg)}
.pkg-len-seg{background:var(--purple)}
.pkg-len-seg.is-alt{background:var(--purple-light)}
.pkg-len-gap{background:var(--main-border)}
.pkg-oa-opt .pkg-oa-price{width:84px;flex:none;height:30px;padding:4px 8px;font-size:12px}
@container svced (max-width:560px){.pkg-card-sub{grid-template-columns:repeat(2,minmax(0,1fr));padding-left:0}.pkg-card-foot{padding-left:0}.pkg-card-top{flex-wrap:wrap}.pkg-card-top .pkg-card-var{flex-basis:100%;order:5}}
.pkg-start{display:block;font-size:10.5px;color:var(--main-text-muted);margin-top:3px}
/* Narrow: each row becomes a card. Service across the top with remove,
   Option under it, then Min, Value and For, then the wait. */
.pkg-l-drag{cursor:grab;padding:0 2px 6px;color:var(--main-text-muted);font-size:15px;line-height:1;user-select:none;flex:0 0 auto}
/* Products (prd-): category manager, product editor, Adjust Stock, Stock
   History. */
.prd-cat-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
input.prd-cat-new{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:8px 12px;font-size:14px;outline:none;box-sizing:border-box}
.form-group select.prd-sel,select.prd-sel{width:100%;height:42px}
.form-group select.prd-sel.is-38{height:38px}
.prd-was{text-decoration:line-through;color:var(--text-muted);font-size:11px;margin-right:5px}
.prd-photos-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.prd-note{font-size:12px;color:var(--text-muted);margin-bottom:12px}
.prd-note.is-tight{margin-bottom:10px}
.form-row.prd-flush,.form-group.prd-flush{margin-bottom:0}
input.prd-in,.form-group input.prd-in{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:9px 11px;font-family:Lato,sans-serif;font-size:13px;outline:none;box-sizing:border-box}
.prd-var-row{display:flex;gap:8px;align-items:flex-end;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:10px;margin-bottom:8px}
.prd-var-c{flex:1}
.prd-var-c.is-wide{flex:2}
.prd-var-c.is-100{flex:0 1 auto;width:100px}
/* In the editor's left column (2026-10-14) a variation takes two lines:
   Name beside its remove button, then SKU, Price and Regular. */
.svc-ed-main .prd-var-row{flex-wrap:wrap}
.svc-ed-main .prd-var-c.is-wide{flex:1 1 calc(100% - 40px);order:0}
.svc-ed-main .prd-var-rm{order:1;align-self:flex-end}
.svc-ed-main .prd-var-c:not(.is-wide){order:2;flex:1 1 28%;width:auto;min-width:0}
.prd-var-l{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:3px}
.icon-btn-xs.prd-var-rm{margin-bottom:5px}
.prd-ph{position:relative;width:64px}
.prd-ph-img{width:64px;height:64px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--border)}
.prd-ph-img.is-main{border:2px solid var(--purple)}
.icon-btn-xs.prd-ph-x{position:absolute;top:-6px;right:-6px}
.icon-btn-xs.prd-ph-star{position:absolute;bottom:-6px;right:-6px}
.prd-sub-t{font-size:12px;font-weight:700;color:var(--text);margin-bottom:6px}
.form-row.prd-rc-row{align-items:center;margin-bottom:8px}
.prd-rc-l{font-size:13px;font-weight:600;color:var(--text)}
.prd-rc-s{font-size:11px;font-weight:400;color:var(--text-muted)}
.form-group.prd-mt10{margin-top:10px}
.prd-lot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px}
.prd-tbl-wrap{overflow-x:auto}
.prd-more{text-align:center;margin-top:10px}
.data-table td.prd-td-muted{color:var(--text-muted)}
.prd-nowrap{white-space:nowrap}
/* Service editor: Assigned Staff label with Select All on the same line. */
.svc-staff-all{background:none;border:none;padding:0;font-family:inherit;font-size:12px;font-weight:700;color:var(--purple);cursor:pointer}
.svc-staff-all:hover{text-decoration:underline}
.svc-staff-all:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:var(--radius-sm)}
/* Catalog view switcher (mockup A, 2026-10-12): replaces the tab bar. The
   Tasks segmented look; scrolls sideways rather than wrap at narrow widths. */
.cat-seg{display:inline-flex;gap:2px;max-width:100%;overflow-x:auto;background:var(--main-bg-sunk);border-radius:var(--radius);padding:3px;scrollbar-width:none}
.cat-seg::-webkit-scrollbar{display:none}
.cat-seg-b{display:flex;align-items:center;gap:6px;flex:none;border:none;background:none;padding:6px 12px;border-radius:7px;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--main-text-muted);cursor:pointer;white-space:nowrap}
.cat-seg-b:hover{color:var(--main-text)}
.cat-seg-b.on{background:var(--main-card);color:var(--purple);box-shadow:var(--shadow-sm)}
.cat-seg-b:focus-visible{outline:2px solid var(--purple);outline-offset:1px}
.cat-seg-n{font-size:11px;font-weight:700;color:var(--main-text-muted)}
.cat-seg-b.on .cat-seg-n{color:var(--purple)}
/* Marketing panel shell (2026-10-16): Catalog's switcher and bar, plus the
   setup card shown until the marketing domain is verified, and the
   Marketing settings modal (Domain, Sending rules, Suppression). */
.mkt-toolbar{justify-content:space-between;margin-bottom:12px}
.mkt-usage{display:flex;align-items:center;margin-left:auto}
.mkt-setup{max-width:560px;margin:24px auto;padding:28px;text-align:center;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.mkt-setup-t{font-size:16px;font-weight:700;color:var(--main-text);margin-bottom:6px}
.mkt-setup-s{font-size:13px;line-height:1.55;color:var(--main-text-muted);margin-bottom:16px}
.mkt-set .cat-seg{margin-bottom:16px}
.mkt-set-body{min-height:180px}
.mkt-set-h{font-size:12px;font-weight:700;color:var(--main-text);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.mkt-set-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--main-text)}
.mkt-set-num{width:72px;padding:7px 10px;background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);color:var(--main-text);font-size:13px}
.mkt-set-note{font-size:12px;line-height:1.5;color:var(--main-text-muted);margin:10px 0 14px}
.mkt-set-add{display:flex;gap:8px;margin-bottom:14px}
.mkt-set-in{flex:1;min-width:0;padding:8px 12px;background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);color:var(--main-text);font-size:13px}
.mkt-set-num:focus,.mkt-set-in:focus{outline:none;border-color:var(--purple);box-shadow:var(--focus-ring)}
/* Marketing Overview: trend beside Needs attention and domain health. */
.mkov-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:12px;margin-bottom:18px;align-items:start}
.mkov-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.mkov-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:14px 16px;box-shadow:var(--shadow-sm);min-width:0}
.mkov-h{font-size:13px;font-weight:700;color:var(--main-text);margin-bottom:6px}
.mkov-empty{font-size:12.5px;color:var(--main-text-muted);padding:4px 0}
.mkov-att-row{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px solid var(--main-border);font-size:12.5px;color:var(--main-text)}
.mkov-att-row:first-child{border-top:none}
.mkov-att-main{flex:1;min-width:0;overflow-wrap:anywhere}
.mkov-att-sub{font-size:11.5px;color:var(--main-text-muted);margin-top:1px}
.mkov-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:none;background:var(--main-text-muted)}
.mkov-dot-ok{background:var(--success)}
.mkov-dot-warn{background:var(--warning)}
.mkov-dot-bad{background:var(--danger)}
@media (max-width:900px){.mkov-grid{grid-template-columns:1fr}}
/* Marketing Emails view (Phase 3): status chips, table, pills, report drawer. */
.mkt-chipbar{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin-bottom:12px}
.mkt-range{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto;font-size:12.5px;color:var(--main-text-muted)}
.mkt-date{padding:5px 8px;background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);color:var(--main-text);font-size:12.5px}
.mkt-empty{border:1px dashed var(--main-border);border-radius:var(--radius-lg);padding:32px;text-align:center;color:var(--main-text-muted);font-size:13px}
.mkt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mkt-camp-tbl .mkt-c-st{width:122px}
.mkt-camp-tbl .mkt-c-when{width:136px}
.mkt-camp-tbl .mkt-c-num{width:100px}
.mkt-camp-tbl .mkt-c-rate{width:64px}
.mkt-camp-tbl .mkt-c-act{width:156px}
.mkt-camp-tbl .mkt-num{text-align:right;font-variant-numeric:tabular-nums}
.mkt-camp-nm{font-weight:700;font-size:13px;color:var(--main-text);overflow:hidden;text-overflow:ellipsis}
.mkt-camp-sub{font-size:11.5px;color:var(--main-text-muted);overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.mkt-camp-when{font-size:12.5px;color:var(--main-text-muted)}
.mkt-camp-row{cursor:pointer}
.mkt-camp-act .btn{margin-left:6px}
.mkt-kebab{padding:5px 8px}
.mkt-pill{display:inline-block;padding:2px 9px;border-radius:var(--radius-full);font-size:10.5px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.mkt-pill-draft,.mkt-pill-canceled{background:var(--main-bg);color:var(--main-text-muted)}
.mkt-pill-scheduled,.mkt-pill-recurring{background:var(--purple-dim);color:var(--purple)}
.mkt-pill-sending{background:var(--warning-dim);color:var(--warning-text)}
.mkt-pill-sent{background:var(--success-dim);color:var(--success-text)}
.mkt-pill-failed{background:var(--danger-dim);color:var(--danger-text)}
.mkt-pill-paused{background:var(--orange-dim);color:var(--orange-text)}
/* The Email column keeps its room: rates go first, then When and
   Recipients. All of them stay in the report drawer. */
@media (max-width:1180px){.mkt-camp-tbl .mkt-rate,.mkt-camp-tbl .mkt-c-rate{display:none}}
@media (max-width:860px){.mkt-camp-tbl .mkt-wh{display:none}}
/* Phase 6: links and bookings in the report drawer, and the Emails calendar. */
.mkt-rep{margin:12px 0 4px;padding-top:12px;border-top:1px solid var(--main-border)}
.mkt-rep-booked{font-size:13px;color:var(--main-text);margin-bottom:10px}
.mkt-rep-booked b{font-size:18px;font-variant-numeric:tabular-nums;margin-right:4px}
.mkt-rep-h{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--main-text-muted);margin-bottom:4px}
.mkt-rep-t{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed}
.mkt-rep-t th{text-align:left;font-size:10.5px;font-weight:700;color:var(--main-text-muted);padding:5px 6px;border-bottom:1px solid var(--main-border)}
.mkt-rep-t td{padding:6px;border-bottom:1px solid var(--main-border);color:var(--main-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkt-rep-t th:not(:first-child),.mkt-rep-t td:not(:first-child){width:64px}
.mkt-rep-t .mkt-num{text-align:right;font-variant-numeric:tabular-nums}
.mkt-viewtog{flex:none}
.mkt-cal-nav{display:flex;align-items:center;gap:8px;margin-left:auto}
.mkt-cal-label{font-size:14px;font-weight:700;color:var(--main-text);min-width:140px;text-align:center}
.mkt-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--main-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--main-card)}
.mkt-cal-hd{padding:6px 8px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--main-text-muted);background:var(--main-bg);border-bottom:1px solid var(--main-border)}
.mkt-cal-day{min-height:96px;padding:6px;border-right:1px solid var(--main-border);border-bottom:1px solid var(--main-border);display:flex;flex-direction:column;gap:3px;min-width:0}
.mkt-cal-day:nth-child(7n){border-right:none}
.mkt-cal-day.out{background:var(--main-bg)}
.mkt-cal-day.out .mkt-cal-d{color:var(--main-text-muted);opacity:.6}
.mkt-cal-d{font-size:12px;font-weight:700;color:var(--main-text)}
.mkt-cal-day.today .mkt-cal-d{color:var(--purple)}
.mkt-cal-wd{display:none}
.mkt-cal-ev{display:block;width:100%;text-align:left;border:none;border-radius:6px;padding:3px 6px;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none;letter-spacing:0}
.mkt-cal-ev span{font-weight:400;opacity:.85}
@media (max-width:900px){.mkt-cal{grid-template-columns:1fr}.mkt-cal-hd,.mkt-cal-day.empty{display:none}.mkt-cal-day{min-height:0;border-right:none}.mkt-cal-wd{display:inline}}
/* The report drawer: openModal's box docked to the right edge. */
#modal-overlay:has(.modal-drawer){justify-content:flex-end;padding:0}
.modal.modal-drawer{max-width:620px;height:100%;max-height:none;border-radius:var(--radius-lg) 0 0 var(--radius-lg);transform:translateX(24px)}
#modal-overlay.open .modal.modal-drawer{transform:none}
.mkt-drw-head{margin-bottom:12px}
.mkt-drw-name{font-size:16px;font-weight:700;color:var(--main-text);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mkt-drw-sub{font-size:12.5px;color:var(--main-text-muted);margin-top:2px;overflow-wrap:anywhere}
.mkt-drw .cat-seg{margin-bottom:14px}
.mkt-drw-body{min-height:200px}
.mkt-drw-foot{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;width:100%}
.mkt-btn-danger{color:var(--danger-text)}
.mkt-drw-note{padding:10px 12px;border-radius:var(--radius);font-size:12.5px;margin-bottom:12px}
.mkt-drw-note-warn{background:var(--orange-dim);color:var(--orange-text)}
.mkt-drw-note-bad{background:var(--danger-dim);color:var(--danger-text)}
.mkt-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px;margin-bottom:12px}
.mkt-tile{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);padding:10px 12px;min-width:0}
.mkt-tile-l{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted)}
.mkt-tile-v{font-size:20px;font-weight:700;color:var(--main-text);font-variant-numeric:tabular-nums;margin-top:2px}
.mkt-tile-s{font-size:11px;color:var(--main-text-muted)}
.mkt-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:14px 0 0;font-size:12.5px}
.mkt-facts dt{color:var(--main-text-muted)}
.mkt-facts dd{margin:0;color:var(--main-text);overflow-wrap:anywhere}
/* New email composer (Phase 4): step rail, the step, and a live panel with
   the recipient count and a sandboxed preview. */
.cmp-load{min-height:240px}
.cmp{display:grid;grid-template-columns:168px minmax(0,1fr) 280px;gap:20px;align-items:start;min-height:440px}
.cmp-rail{display:flex;flex-direction:column;gap:2px;position:sticky;top:0}
.cmp-st{display:flex;align-items:center;gap:10px;padding:8px 6px;border:none;background:none;border-radius:var(--radius);font-family:inherit;font-size:13px;font-weight:700;color:var(--main-text-muted);cursor:pointer;text-align:left}
.cmp-st:disabled{cursor:default;opacity:.55}
.cmp-st:not(:disabled):hover{background:var(--main-bg)}
.cmp-st-n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:11px;font-weight:800;border:1.5px solid var(--main-border);color:var(--main-text-muted)}
.cmp-st.done .cmp-st-n{background:var(--success);border-color:var(--success);color:var(--on-accent)}
.cmp-st.on{color:var(--purple)}
.cmp-st.on .cmp-st-n{background:var(--purple);border-color:var(--purple);color:var(--on-accent)}
.cmp-main{min-width:0}
.cmp-step{min-width:0}
.cmp-st-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-h{font-size:16px;font-weight:700;color:var(--main-text);margin:0 0 2px}
.cmp-hint{font-size:12.5px;color:var(--main-text-muted);margin-bottom:12px}
.cmp-lock{padding:10px 12px;border-radius:var(--radius);background:var(--purple-dim);color:var(--purple);font-size:12.5px;margin-bottom:12px}
.cmp-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-bottom:12px}
.cmp-opts-row{grid-template-columns:repeat(3,minmax(0,1fr))}
.cmp-opt-wrap{display:contents}
.cmp-opt-wrap[hidden]{display:none}
.cmp-opt{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:11px 12px;border:1px solid var(--main-border);border-radius:var(--radius);background:var(--main-card);font-family:inherit;cursor:pointer;color:var(--main-text)}
.cmp-opt:hover:not(:disabled){border-color:var(--purple-border)}
.cmp-opt.on{border-color:var(--purple);box-shadow:var(--focus-ring)}
.cmp-opt:disabled{opacity:.5;cursor:not-allowed}
.cmp-rad{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--main-border);flex:none;margin-top:1px}
.cmp-opt.on .cmp-rad{border:5px solid var(--purple)}
.cmp-opt-t{display:flex;flex-direction:column;gap:2px;font-size:13px;min-width:0}
.cmp-opt-t span{font-size:12px;color:var(--main-text-muted)}
.cmp-cfg{margin-bottom:14px}
.cmp-in{width:100%;box-sizing:border-box;padding:8px 10px;background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);color:var(--main-text);font-size:13px;font-family:inherit}
.cmp-in:focus{outline:none;border-color:var(--purple);box-shadow:var(--focus-ring)}
.cmp-in-auto{width:auto}
.cmp-in-num{width:96px}
.cmp-note{font-size:12.5px;color:var(--main-text-muted);padding:6px 0}
.cmp-tpls{margin-top:2px}
.cmp-field{margin-bottom:14px}
.cmp-field > label:first-child{display:block;font-size:12px;font-weight:700;color:var(--main-text);margin-bottom:5px}
.cmp-check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--main-text);cursor:pointer}
.cmp-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--main-text);margin-top:8px}
.cmp-test .cmp-in{flex:1;min-width:180px;width:auto}
.cmp-summary{padding:12px 14px;border:1px solid var(--main-border);border-radius:var(--radius);background:var(--main-bg);font-size:12.5px;line-height:1.55;color:var(--main-text);margin:4px 0 12px}
.cmp-summary:empty{display:none}
.cmp-side{position:sticky;top:0;border-left:1px solid var(--main-border);padding-left:18px;min-width:0}
.cmp-side-l{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--main-text-muted)}
.cmp-big{font-size:32px;font-weight:800;color:var(--main-text);font-variant-numeric:tabular-nums;line-height:1.1;margin:2px 0 6px;transition:opacity .15s}
.cmp-big.cmp-busy{opacity:.4}
.cmp-break{margin-bottom:8px}
.cmp-break-row{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--main-text-muted);padding:3px 0;border-top:1px dashed var(--main-border)}
.cmp-break-row b{color:var(--main-text);font-variant-numeric:tabular-nums}
.cmp-warn{padding:8px 10px;border-radius:var(--radius);background:var(--warning-dim);color:var(--warning-text);font-size:12px;font-weight:600;margin-bottom:8px}
.cmp-pv{margin-top:10px;border:1px solid var(--main-border);border-radius:var(--radius);overflow:hidden}
.cmp-pv-bar{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;background:var(--main-bg);font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--main-text-muted)}
.cmp-pv-tog{display:inline-flex;gap:2px}
.cmp-pv-tog button{border:none;background:none;font-family:inherit;font-size:11px;font-weight:700;color:var(--main-text-muted);padding:2px 6px;border-radius:6px;cursor:pointer;text-transform:none;letter-spacing:0}
.cmp-pv-tog button.on{background:var(--main-card);color:var(--purple)}
.cmp-pv-frame{background:var(--main-bg-sunk);min-height:120px;overflow:hidden;position:relative}
.cmp-pv-if{display:block;border:none;background:var(--on-accent);transform-origin:top left}
.cmp-pv-empty{font-size:12px;color:var(--main-text-muted);padding:24px 12px;text-align:center}
/* Templates grid (Phase 5): scaled snapshots of each email. */
.mkd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.mkd-card{display:flex;flex-direction:column;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;min-width:0}
.mkd-thumb{display:block;padding:12px 14px 0;border:none;background:var(--main-bg-sunk);cursor:pointer;font-family:inherit}
.mkd-thumb:focus-visible{outline:2px solid var(--purple);outline-offset:-2px}
.mkd-thumb-box{height:160px;overflow:hidden;border-radius:6px 6px 0 0;background:var(--on-accent);position:relative}
.mkd-thumb-if{width:640px;height:900px;border:none;transform-origin:top left;pointer-events:none;background:var(--on-accent)}
.mkd-thumb-empty{display:grid;place-items:center;height:100%;font-size:12px;color:var(--main-text-muted)}
.mkd-meta{padding:10px 12px 6px;min-width:0}
.mkd-name{display:block;font-size:13px;font-weight:700;color:var(--main-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkd-sub{display:block;font-size:11.5px;color:var(--main-text-muted);margin-top:1px}
.mkd-act{display:flex;gap:6px;align-items:center;padding:0 12px 12px}
.mkd-act .mkt-kebab{margin-left:auto}
.mkd-new{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:260px;border:1.5px dashed var(--main-border);border-radius:var(--radius-lg);background:none;font-family:inherit;font-size:13px;font-weight:700;color:var(--main-text-muted);cursor:pointer}
.mkd-new:hover{border-color:var(--purple);color:var(--purple)}
.mkd-new-plus{font-size:24px;line-height:1;color:var(--purple)}
.mkd-new-sub{font-size:11.5px;font-weight:400}
.mkd-starters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mkd-starter{display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px;border:1px solid var(--main-border);border-radius:var(--radius);background:var(--main-card);cursor:pointer;font-family:inherit;min-width:0}
.mkd-starter:hover{border-color:var(--purple)}
.mkd-starter .mkd-thumb-box{height:150px;margin-bottom:6px;border:1px solid var(--main-border)}
@media (max-width:640px){.mkd-starters{grid-template-columns:1fr 1fr}}
/* Audience builder drawer (Phase 5): filters added one at a time. */
.seg-b{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:16px;align-items:start}
.seg-b-main{min-width:0}
.seg-b-name{font-size:15px;font-weight:700;margin-bottom:12px}
.seg-b-match{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--main-text-muted);margin-bottom:10px}
.seg-rule{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:9px 10px;border:1px solid var(--main-border);border-radius:var(--radius);background:var(--main-card);font-size:13px;color:var(--main-text)}
.seg-rule-k{font-weight:700}
.seg-chips{width:100%;margin-top:4px}
.seg-x{margin-left:auto;border:none;background:none;font-size:18px;line-height:1;color:var(--main-text-muted);cursor:pointer;padding:0 4px}
.seg-x:hover{color:var(--danger-text)}
.seg-join{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--purple);margin:5px 0 5px 10px}
.seg-add{margin-top:10px;padding:7px 12px;border:1.5px dashed var(--main-border);border-radius:var(--radius);background:none;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--purple);cursor:pointer}
.seg-add:hover{border-color:var(--purple)}
.seg-b-excl{margin-top:16px;padding-top:12px;border-top:1px solid var(--main-border)}
.seg-b-side{top:0}
@media (max-width:620px){.seg-b{grid-template-columns:1fr}.seg-b-side{border-left:none;padding-left:0;border-top:1px solid var(--main-border);padding-top:12px}}
.cmp-foot{display:flex;align-items:center;gap:8px;width:100%}
.cmp-foot-gap{flex:1}
@media (max-width:980px){.cmp{grid-template-columns:minmax(0,1fr)}.cmp-rail{flex-direction:row;flex-wrap:wrap;position:static}.cmp-side{position:static;border-left:none;padding-left:0;border-top:1px solid var(--main-border);padding-top:14px}.cmp-opts-row{grid-template-columns:1fr}}
/* Reporting switcher (mockup B, 2026-10-14): the same buttons in one sunk
   strip, cut into groups by a short rule, each group named underneath. */
/* One row: the switcher, then the active report's date bar (moved in by
   setRptView). Wraps to two rows when the panel is narrow. */
.rpt-head{display:flex;align-items:flex-start;flex-wrap:wrap;gap:10px 18px;margin-bottom:16px}
.rpt-head-tools{flex:1 1 320px;min-width:0}
.rpt-head-tools .rpt-filter-bar{margin-bottom:0}
.rpt-nav{display:flex;align-items:flex-start;max-width:100%;overflow-x:auto;scrollbar-width:none}
.rpt-nav::-webkit-scrollbar{display:none}
.rpt-seg-g{display:flex;flex-direction:column;flex:none}
.rpt-seg-row{position:relative;display:flex;gap:2px;background:var(--main-bg-sunk);padding:3px}
.rpt-seg-g:first-child .rpt-seg-row{border-radius:var(--radius) 0 0 var(--radius)}
.rpt-seg-g:last-child .rpt-seg-row{border-radius:0 var(--radius) var(--radius) 0}
.rpt-seg-g+.rpt-seg-g .rpt-seg-row{padding-left:9px}
.rpt-seg-g+.rpt-seg-g .rpt-seg-row::before{content:'';position:absolute;left:3px;top:9px;bottom:9px;width:1px;background:var(--main-border)}
/* Too narrow for the joined bar (14 reports since 2026-10-14): each group
   becomes its own pill and the groups wrap, rather than scroll out of sight.
   101 _rptNavFit sets the class by measuring the joined bar. */
.rpt-nav.rpt-nav-wrap{flex-wrap:wrap;gap:6px 8px;overflow-x:visible}
.rpt-nav-wrap .rpt-seg-g .rpt-seg-row{border-radius:var(--radius);padding-left:3px}
.rpt-nav-wrap .rpt-seg-g+.rpt-seg-g .rpt-seg-row::before{display:none}
.rpt-nav-wrap .rpt-seg-gl{padding-left:9px}
.rpt-seg-gl{padding:5px 0 0 12px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted);white-space:nowrap}
.prod-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.prod-bar .btn svg{margin-left:4px}
.prod-bar .btn-purple svg{margin:0 4px 0 0}
.prod-sub{margin-right:auto;font-size:12px;color:var(--main-text-muted)}
.prod-bulk-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);padding:8px 12px;margin-bottom:12px}
.prod-bulk-bar.hidden{display:none}
.prod-bulk-count{font-size:12px;font-weight:600;color:var(--main-text)}
.prod-cat-mgr{border:1px solid var(--main-border);border-radius:var(--radius);background:var(--main-card);padding:12px 14px;margin-bottom:12px}
.prod-cat-mgr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:13px;font-weight:600;color:var(--main-text)}
.prod-list-t col.prod-c-price{width:130px}
.prod-list-t col.prod-c-stock{width:130px}
.prod-list-t col.prod-c-sold{width:96px}
.prod-list-t col.prod-c-margin{width:76px}
.prod-list-t col.prod-c-st{width:100px}
.prod-cell{display:flex;align-items:center;gap:8px;min-width:0}
.prod-cell-txt{min-width:0}
.prod-pick{flex:none;margin:0}
.prod-tog{flex:none;margin-left:-6px;transition:transform .12s}
.prod-tog.is-open{transform:rotate(90deg)}
.prod-thumb{flex:none;width:34px;height:34px;border-radius:var(--radius-md);object-fit:cover}
.prod-thumb.is-empty{display:inline-flex;align-items:center;justify-content:center;background:var(--main-bg);color:var(--main-text-muted)}
.prod-disc-tag{color:var(--purple)}
.prod-price{white-space:nowrap;font-weight:700;color:var(--main-text)}
.prod-opt-n{margin-top:0}
.prod-lot{color:var(--warning-text)}
.prod-lot.is-past{color:var(--danger-text)}
.prod-stk .stk-badge{margin-top:0;white-space:nowrap}
.gc-vars tr.prod-opt td{background:var(--main-bg);padding-top:7px;padding-bottom:7px}
.prod-opt td.prod-opt-nm{padding-left:62px}
.prod-opt .gc-var-nm{font-weight:600}
.prod-opt .prod-price{font-weight:600}
/* Narrow: product and status on top, price and stock, then sales and
   margin; option rows show name, price and stock on one line. */
@container prodbody (max-width:760px){
  .gc-toolbar .search-box.gc-search{max-width:none;flex-basis:100%;order:-1;margin-left:0}
}
@container prodbody (max-width:600px){
  .prod-list-t colgroup,.prod-list-t thead{display:none}
  .prod-list-t,.prod-list-t tbody{display:block}
  .prod-list-t tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:10px;row-gap:6px;align-items:center;padding:12px 4px 12px 14px;border-bottom:1px solid var(--main-border)}
  .prod-list-t tbody tr:last-child{border-bottom:0}
  .ct-table.prod-list-t td{display:block;height:auto;padding:0;border:0;text-align:left}
  .ct-table.prod-list-t td.ct-act{grid-column:3;grid-row:1/4;padding-right:0}
  .prod-list-t td:nth-child(1){grid-column:1;grid-row:1}
  .prod-list-t td.gc-var-st{grid-column:2;grid-row:1;text-align:right}
  .prod-list-t td.prod-pr{grid-column:1;grid-row:2}
  .prod-list-t td.prod-stk{grid-column:2;grid-row:2;text-align:right}
  .prod-list-t td.prod-sold{grid-column:1;grid-row:3;font-size:12px;color:var(--main-text-muted)}
  .prod-list-t td.prod-sold .gc-sub{display:inline;margin-left:6px}
  .prod-list-t td.prod-mg{grid-column:2;grid-row:3;text-align:right;font-size:12px;color:var(--main-text-muted)}
  .prod-list-t td.prod-mg.is-empty{display:none}
  .prod-list-t .gc-var-iss-l{display:inline}
  .gc-vars tr.prod-opt{grid-template-columns:minmax(0,1fr) auto auto;padding:8px 14px 8px 54px;background:var(--main-bg)}
  .ct-table.prod-list-t tr.prod-opt td{background:none;padding:0;grid-row:1}
  .prod-list-t tr.prod-opt td.prod-opt-nm{grid-column:1}
  .prod-list-t tr.prod-opt td.prod-pr{grid-column:2}
  .prod-list-t tr.prod-opt td.prod-stk{grid-column:3}
  .prod-list-t tr.prod-opt td.prod-pad{display:none}
}
/* Invoices list (approved mockup, 2026-10-10): the .gc-vars table with
   invoice columns; the row opens the invoice, the menu holds the rest. */
.inv-body{container:invbody/inline-size}
.gc-vstat.is-info{color:var(--info-text)}
.inv-list-t col.inv-c-num{width:120px}
.inv-list-t col.inv-c-total{width:110px}
.inv-list-t col.inv-c-due{width:170px}
.inv-list-t col.inv-c-st{width:100px}
.inv-total{font-weight:700;color:var(--main-text)}
.inv-owed{font-weight:700;color:var(--main-text)}
.inv-overdue{color:var(--danger-text);font-weight:600}
@container invbody (max-width:760px){
  .gc-toolbar .search-box.gc-search{max-width:none;flex-basis:100%;order:-1;margin-left:0}
}
/* Narrow: number and status on top, recipient and total, then the due line. */
@container invbody (max-width:600px){
  .inv-list-t colgroup,.inv-list-t thead{display:none}
  .inv-list-t,.inv-list-t tbody{display:block}
  .inv-list-t tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:10px;row-gap:4px;align-items:center;padding:12px 4px 12px 14px;border-bottom:1px solid var(--main-border)}
  .inv-list-t tbody tr:last-child{border-bottom:0}
  .ct-table.inv-list-t td{display:block;height:auto;padding:0;border:0}
  .ct-table.inv-list-t td.ct-act{grid-column:3;grid-row:1/4;padding-right:0}
  .inv-list-t td.inv-num{grid-column:1;grid-row:1}
  .inv-list-t td.gc-var-st{grid-column:2;grid-row:1;text-align:right}
  .inv-list-t td.inv-rcp{grid-column:1;grid-row:2}
  .inv-list-t td.inv-total{grid-column:2;grid-row:2;text-align:right}
  .inv-list-t td.inv-due{grid-column:1/3;grid-row:3;font-size:12px;color:var(--main-text-muted)}
  .inv-list-t td.inv-due>div{display:inline;margin:0}
  .inv-list-t td.inv-due>div+div{margin-left:8px}
}
/* Discounts list (approved mockup, 2026-10-10): the .gc-vars table with
   discount columns and four statuses from the flag and the date window. */
.dsc-body{container:dscbody/inline-size}
.dsc-lead{max-width:600px;margin-bottom:14px;font-size:12px;line-height:1.6;color:var(--main-text-muted)}
.dsc-list col.dsc-c-off{width:150px}
.dsc-list col.dsc-c-price{width:130px}
.dsc-list col.dsc-c-when{width:170px}
.dsc-list col.dsc-c-st{width:110px}
.dsc-off{font-weight:700;color:var(--main-text)}
.ct-table.dsc-list td.dsc-off{white-space:normal}
.gc-var-nm.is-dim{color:var(--main-text-muted)}
@container dscbody (max-width:760px){
  .gc-toolbar .search-box.gc-search{max-width:none;flex-basis:100%;order:-1;margin-left:0}
}
/* Narrow: name and status on top, the offer and sale price, then when and
   the type. 860, not 600, since the Type column (2026-10-15): six fixed
   columns left the name no room below it. */
@container dscbody (max-width:860px){
  .dsc-list colgroup,.dsc-list thead{display:none}
  .dsc-list,.dsc-list tbody{display:block}
  .dsc-list tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:10px;row-gap:4px;align-items:center;padding:12px 4px 12px 14px;border-bottom:1px solid var(--main-border)}
  .dsc-list tbody tr:last-child{border-bottom:0}
  .ct-table.dsc-list td{display:block;height:auto;padding:0;border:0}
  .ct-table.dsc-list td.ct-act{grid-column:3;grid-row:1/4;padding-right:0}
  .dsc-list td.dsc-nm-cell{grid-column:1;grid-row:1}
  .dsc-list td.gc-var-st{grid-column:2;grid-row:1;text-align:right}
  .dsc-list td.dsc-off{grid-column:1;grid-row:2}
  .dsc-list td.dsc-price{grid-column:2;grid-row:2;text-align:right}
  .dsc-list td.dsc-when{grid-column:1;grid-row:3;font-size:12px;color:var(--main-text-muted)}
  .dsc-list td.dsc-type{grid-column:2;grid-row:3;text-align:right}
}
/* Series list (approved mockup, 2026-10-10): the .gc-vars table with
   credit columns and Sell kept on the row. */
.ser-body{container:serbody/inline-size}
.ser-list col.ser-c-cr{width:80px}
.ser-list col.ser-c-price{width:140px}
.ser-list col.ser-c-exp{width:160px}
.ser-list col.ser-c-st{width:96px}
.ser-cr{font-weight:700;color:var(--main-text)}
@container serbody (max-width:760px){
  .gc-toolbar .search-box.gc-search{max-width:none;flex-basis:100%;order:-1;margin-left:0}
}
/* Narrow: name and status on top, credits and price, then expiry with Sell. */
@container serbody (max-width:600px){
  .ser-list colgroup,.ser-list thead{display:none}
  .ser-list,.ser-list tbody{display:block}
  .ser-list tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:10px;row-gap:4px;align-items:center;padding:12px 4px 12px 14px;border-bottom:1px solid var(--main-border)}
  .ser-list tbody tr:last-child{border-bottom:0}
  .ct-table.ser-list td{display:block;height:auto;padding:0;border:0;text-align:left}
  .ct-table.ser-list td.ct-act{grid-column:3;grid-row:1/4;padding-right:0}
  .ser-list td.ser-nm-cell{grid-column:1;grid-row:1}
  .ser-list td.gc-var-st{grid-column:2;grid-row:1;text-align:right}
  .ser-list td.ser-cr{grid-column:1;grid-row:2;font-weight:600}
  .ser-list td.ser-price{grid-column:2;grid-row:2;text-align:right}
  .ser-list td.ser-exp{grid-column:1;grid-row:3;font-size:12px;color:var(--main-text-muted)}
  .ser-list .gc-var-iss-l{display:inline}
}
/* Packages list (approved mockup, 2026-10-10): the .gc-vars table with a
   service count and the bundle price against what it replaces. */
.pkg-body{container:pkgbody/inline-size}
.pkg-list col.pkg-c-n{width:90px}
.pkg-list col.pkg-c-price{width:160px}
.pkg-list col.pkg-c-st{width:96px}
.pkg-n{font-weight:700;color:var(--main-text)}
.pkg-saves{color:var(--success-text)}
@container pkgbody (max-width:760px){
  .gc-toolbar .search-box.gc-search{max-width:none;flex-basis:100%;order:-1;margin-left:0}
}
/* Narrow: name and status on top, the service count and price below. */
@container pkgbody (max-width:600px){
  .pkg-list colgroup,.pkg-list thead{display:none}
  .pkg-list,.pkg-list tbody{display:block}
  .pkg-list tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:10px;row-gap:4px;align-items:center;padding:12px 4px 12px 14px;border-bottom:1px solid var(--main-border)}
  .pkg-list tbody tr:last-child{border-bottom:0}
  .ct-table.pkg-list td{display:block;height:auto;padding:0;border:0;text-align:left}
  .ct-table.pkg-list td.ct-act{grid-column:3;grid-row:1/3;padding-right:0}
  .pkg-list td.pkg-nm-cell{grid-column:1;grid-row:1}
  .pkg-list td.gc-var-st{grid-column:2;grid-row:1;text-align:right}
  .pkg-list td.pkg-n{grid-column:1;grid-row:2;font-weight:600}
  .pkg-list td.pkg-price{grid-column:2;grid-row:2;text-align:right}
  .pkg-list .gc-var-iss-l{display:inline}
}
/* Service Catalog list (approved mockup, 2026-10-10): the .gc-vars table
   with category, staff, duration and price; the row opens the service. */
.svc-body{container:svcbody/inline-size}
.svc-body .gc-toolbar .svc-filters{gap:8px}
.svc-body .filter-sel{width:auto}
/* Name a fixed share; Staff takes what is left (2026-10-13). */
.svc-list-t col.svc-c-nm{width:30%}
.svc-list-t col.svc-c-cat{width:140px}
.svc-list-t col.svc-c-dur{width:120px}
.svc-list-t col.svc-c-price{width:170px}
.svc-list-t col.svc-c-st{width:96px}
.svc-list-t col.svc-c-onl{width:88px}
/* Online column (2026-10-20): Allow Online Booking at a glance. */
.svc-onl{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:var(--radius-full);background:var(--main-bg);color:var(--main-text-muted)}
.svc-onl.is-on{background:var(--purple-dim);color:var(--purple)}
.svc-clip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The instant tip for cut-off text ([data-clip], 006-utils). Inverts like .info-tip. */
.clip-tip{position:fixed;z-index:var(--z-float);max-width:360px;padding:6px 9px;border-radius:var(--radius);background:var(--main-text);color:var(--main-card);font-size:12px;line-height:1.4;pointer-events:none;box-shadow:var(--shadow-sm);opacity:0;visibility:hidden}
.clip-tip.is-on{opacity:1;visibility:visible}
/* .ct-table td sets the text colour and is more specific; name the cell too. */
.svc-cat,.ct-table td.svc-cat{color:var(--main-text-muted)}
.svc-staff-unset{color:var(--warning-text);font-weight:600}
@container svcbody (max-width:1000px){.svc-mgr-l{display:none}.svc-mgr{padding-left:8px;padding-right:8px}}
@container svcbody (max-width:760px){
  .gc-toolbar .search-box.gc-search{max-width:none;flex-basis:100%;order:-1;margin-left:0}
}
/* Narrow: name and status on top, category and price, then staff and duration. */
@container svcbody (max-width:600px){
  .svc-list-t colgroup,.svc-list-t thead{display:none}
  .svc-list-t,.svc-list-t tbody{display:block}
  .svc-list-t tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:10px;row-gap:4px;align-items:center;padding:12px 4px 12px 14px;border-bottom:1px solid var(--main-border)}
  .svc-list-t tbody tr:last-child{border-bottom:0}
  .ct-table.svc-list-t td{display:block;height:auto;padding:0;border:0;text-align:left}
  .ct-table.svc-list-t td.ct-act{grid-column:3;grid-row:1/5;padding-right:0}
  .svc-list-t td.svc-nm-cell{grid-column:1;grid-row:1}
  .svc-list-t td.gc-var-st{grid-column:2;grid-row:1;text-align:right}
  .svc-list-t td.svc-cat{grid-column:1;grid-row:2;font-size:12px}
  .svc-list-t td.svc-price{grid-column:2;grid-row:2;text-align:right}
  .svc-list-t td.svc-staff{grid-column:1;grid-row:3;font-size:12px;color:var(--main-text-muted)}
  .svc-list-t td.svc-dur{grid-column:2;grid-row:3;text-align:right;font-size:12px;color:var(--main-text-muted)}
  .svc-list-t td.svc-onl-cell{grid-column:1;grid-row:4}
}
/* Breakpoints follow the panel's width, not the window's: the sidebar and
   any open drawer narrow the panel at any window size. */
@container gcbody (max-width:860px){.gc-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.gc-stat-val{font-size:19px}}
@container gcbody (max-width:1000px){.gc-orders col.gc-c-card{width:200px}.gc-orders col.gc-c-issued{width:130px}.gc-orders col.gc-c-bal{width:140px}.gc-orders col.gc-c-status{width:100px}.gc-orders col.gc-c-act{width:44px}}
/* Narrow: each row stacks as a card. Code, holder, date on the left;
   balance and status on the right. The row opens the detail, which holds
   every action, so the menu column drops. */
@container gcbody (max-width:760px){
  .gc-orders colgroup,.gc-orders thead{display:none}
  .gc-orders,.gc-orders tbody{display:block}
  .gc-orders tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;padding:12px 14px;border-bottom:1px solid var(--main-border)}
  .gc-orders tbody tr:last-child{border-bottom:0}
  .ct-table.gc-orders td{display:block;height:auto;padding:0;border:0}
  .ct-table.gc-orders td.ct-act{display:none}
  .gc-orders td:nth-child(1){grid-column:1;grid-row:1}
  .gc-orders td:nth-child(2){grid-column:1;grid-row:2}
  .gc-orders td:nth-child(3){grid-column:1;grid-row:3}
  .gc-orders td:nth-child(4){grid-column:2;grid-row:1/3}
  .gc-orders td:nth-child(5){grid-column:2;grid-row:3;text-align:right}
  .gc-orders .gc-bar{width:72px}
  .gc-tfoot-range{display:none}
  .gc-toolbar .search-box.gc-search{max-width:none;flex-basis:100%;order:-1;margin-left:0}
}
.modal-foot .gc-foot-void{margin-right:auto;border-color:transparent;background:none;padding-left:4px;padding-right:4px}
/* Status badges */
/* Builder overlay */
/* The invoice builder is a modal-xxl (150, 2026-10-09): Bill to over Line
   items on the left, discount, details and totals on the right. */
.inv-ov-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.inv-ov-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.inv-ov-main,.inv-ov-side{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:18px;box-shadow:0 1px 6px rgba(107,33,234,.06)}
.inv-sec-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--main-text-muted);margin-bottom:8px}
.inv-locked-banner{background:var(--orange-dim);color:var(--orange);padding:10px 14px;border-radius:var(--radius);font-size:13px;margin-bottom:16px;max-width:1100px;margin-left:auto;margin-right:auto}
.inv-field-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.inv-toggle{font-size:13px;color:var(--main-text);display:flex;align-items:center;gap:5px;cursor:pointer}
/* Bill to: room between the contact / one-off choice and the box under it. */
.inv-rmode-row{margin-bottom:12px}
.inv-adhoc{display:flex;flex-direction:column;gap:8px}
.inv-lbl{display:block;font-size:12px;color:var(--main-text-muted);margin-bottom:4px}
.inv-ta{width:100%;min-height:54px;resize:vertical}
/* Line editor */
.inv-add-wrap{margin-top:14px;padding-top:14px;border-top:1px solid var(--divider)}
.inv-pick{margin-top:8px;padding:10px 12px;border:1px solid var(--main-border);border-radius:var(--radius);background:var(--main-bg)}
.inv-pick-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.inv-pick-name{font-size:13px;font-weight:700;color:var(--main-text)}
.inv-pick-cancel{cursor:pointer;color:var(--purple-light)}
.inv-pick-var{width:100%;margin-bottom:8px}
.inv-pick-row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.inv-pick-row>div{flex:1 1 120px;min-width:0}
.inv-pick-row .ss-inp{width:100%}
.inv-pick-desc-wrap{flex:1 1 100%}
.inv-pick-add{flex:0 0 110px}
.inv-find-meta{color:var(--main-text-muted);font-size:11px}
.inv-find-custom{color:var(--purple);font-weight:600}
.inv-find-sep{border-top:1px solid var(--border)}
.inv-add-btn{width:100%;padding:9px 11px;font-size:13px;display:inline-flex;align-items:center;justify-content:center;min-height:38px}
.inv-qty-in{width:64px}
.inv-price-in{width:96px}
.inv-line-row{display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--divider)}
.inv-line-desc-cell{flex:1;min-width:0}
.inv-line-name{font-size:13px;color:var(--main-text)}
.inv-line-desc{width:100%}
.inv-tax-cell{font-size:12px;color:var(--main-text-muted);display:flex;align-items:center;gap:4px;white-space:nowrap}
.inv-line-total{width:82px;text-align:right;font-size:13px;color:var(--main-text);font-weight:600}
.inv-line-rm{border:none;background:none;color:var(--main-text-muted);font-size:18px;line-height:1;cursor:pointer;padding:0 4px}
.inv-line-rm:hover{color:var(--danger)}
/* Totals */
.inv-totals{margin-top:16px;padding-top:12px;border-top:1px solid var(--main-border)}
.inv-tot-row{display:flex;justify-content:space-between;font-size:13px;color:var(--main-text-muted);padding:3px 0}
.inv-tot-grand{font-size:15px;font-weight:700;color:var(--main-text);border-top:1px solid var(--divider);margin-top:5px;padding-top:8px}
/* Take-payment modal (shared tender panel host inv-tender-panel) */
.inv-pay-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.inv-pay-who{font-size:13px;color:var(--main-text-muted)}
.inv-pay-lines{display:flex;flex-direction:column}
.inv-pay-line{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:13px;color:var(--main-text);border-bottom:1px solid var(--divider)}
.inv-pay-qty{color:var(--main-text-muted);font-size:12px}
.inv-pay-doc{margin-top:8px}
.inv-pay-balance{font-weight:700;color:var(--orange)}
.inv-pay-block{margin-top:16px;padding-top:14px;border-top:1px solid var(--main-border)}
.inv-pay-amount-wrap{margin:6px 0 4px;max-width:200px}
.inv-pay-hint{font-size:11px;color:var(--main-text-muted);margin-bottom:6px}
.inv-pay-adj{display:block;margin-top:14px}
.inv-pay-totals{background:var(--bg-input);border-radius:6px;padding:10px 12px;margin:12px 0 14px;font-size:12px}
.inv-pay-row{display:flex;justify-content:space-between;padding:2px 0;color:var(--text-muted)}
.inv-pay-credit{color:var(--success-light)}
.inv-pay-total{padding:6px 0 2px;border-top:1px solid var(--border);margin-top:4px;font-weight:700;color:var(--text);font-size:14px}
.inv-pay-left{color:var(--orange)}
.inv-pay-panel{border-top:1px solid var(--border);padding-top:14px}
.inv-pay-wrap{margin-top:8px}
.inv-pay-formrow{margin-bottom:6px}
.inv-pay-grow2{flex:2}
/* Collect Payment modal (shared tender panel host sub-tender-panel). A
   subscription cycle, or any other pending row, settled where it already is.
   Deliberately its own names rather than reusing .inv-pay-*: the two modals
   look alike today and a change to the invoice one must not move this. */
.sub-pay-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.sub-pay-what{font-size:14px;font-weight:700;color:var(--main-text)}
.sub-pay-who{font-size:13px;color:var(--main-text-muted)}
.sub-pay-totals{background:var(--bg-input);border-radius:6px;padding:10px 12px;margin:10px 0 12px;font-size:12px}
.sub-pay-row{display:flex;justify-content:space-between;padding:2px 0;color:var(--text-muted)}
.sub-pay-total{font-weight:700;color:var(--text);font-size:15px}
.sub-pay-hint{font-size:11px;color:var(--main-text-muted);margin-bottom:10px}
.sub-pay-panel{border-top:1px solid var(--border);padding-top:14px}
.inv-pay-grow1{flex:1}
.inv-pay-apply{width:100%;height:38px}
.inv-pay-disctype{display:flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;height:38px}
.inv-pay-disctype .view-btn{flex:1}
/* Mark-paid modal */
@media (max-width:720px){.inv-ov-grid{grid-template-columns:1fr}}

/* SOAP rich section editor: prose + inline checkbox lines (Settings > Clinical
   templates and the note editor). Checkbox state round-trips in the section
   text as leading ☐ / ☑ markers; no separate storage. */
.soap-rt{width:100%;min-height:90px;max-height:340px;overflow-y:auto;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:9px 12px;font-family:Lato,sans-serif;font-size:13px;line-height:1.7;outline:none;box-sizing:border-box;white-space:pre-wrap}
.soap-rt:focus{border-color:var(--purple)}
.soap-rt-line{min-height:1.2em}
.soap-cb{cursor:pointer;user-select:none;display:inline-block;margin-right:3px;font-size:15px;line-height:1;color:var(--purple)}
.soap-rt[contenteditable="false"]{opacity:.85}

/* New-build banner. Shown when /version.json reports a build id different from
   the one stamped into this page, i.e. a deploy landed while the tab stayed
   open. Bottom-LEFT on purpose: #toast-container owns bottom-right. */
.build-update-bar{position:fixed;bottom:20px;left:20px;z-index:var(--z-banner);display:flex;align-items:center;gap:12px;
  max-width:340px;padding:12px 14px;background:var(--bg-card);border:1px solid var(--purple-border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);animation:bubIn .3s ease}
.build-update-bar .bub-txt{display:flex;flex-direction:column;gap:2px;line-height:1.35}
.build-update-bar .bub-txt strong{font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;color:var(--text)}
.build-update-bar .bub-txt span{font-size:12px;color:var(--text-muted)}
.build-update-bar .bub-x{background:none;border:none;cursor:pointer;color:var(--text-dim);font-size:13px;
  line-height:1;padding:4px;flex-shrink:0;font-family:Lato,sans-serif}
.build-update-bar .bub-x:hover{color:var(--text)}
@keyframes bubIn{from{transform:translateY(120%);opacity:0}to{transform:translateY(0);opacity:1}}
@media (max-width:720px){.build-update-bar{left:12px;right:12px;bottom:12px;max-width:none}}

/* Mobile App tab: labeled permission dropdowns (2026-08-04, regrouped 2026-10-23) */
.mob-user{border-bottom:1px solid var(--main-border)}
.mob-user:last-child{border-bottom:none}
.mob-acc-toggle{display:inline-block;vertical-align:middle}
/* bh-toggle's off track is a translucent white (built for dark surfaces);
   on this light band it vanishes. Solid track, off state only. */
.mob-acc-toggle:not(.on){background:var(--main-border)}
.mob-perm-cell{display:flex;flex-direction:column;gap:5px;width:132px}
.mob-perm-lbl{font-size:11px;color:var(--main-text-muted);line-height:1.3;min-height:28px;display:flex;align-items:flex-end}
.mob-perm-sel{width:100%;font-size:12px;background:var(--main-card);color:var(--main-text);
  border:1px solid var(--main-border);border-radius:6px;padding:4px 6px}
.mob-perm-sel:disabled{opacity:.4;background:var(--main-bg)}
/* Mobile App tab of Edit Team Member (2026-10-23): grouped permissions. */
.mob-user.mob-eu{border-bottom:none;display:flex;flex-direction:column;gap:var(--space-12)}
.mob-eu-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-14);padding:var(--space-12) var(--space-14);border:1px solid var(--main-border);border-radius:var(--radius)}
.mob-eu-t{font-size:var(--fs-14);font-weight:var(--fw-700);color:var(--main-text)}
.mob-eu-acts{flex:none;display:flex;align-items:center;gap:var(--space-10)}
.mob-eu-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-10)}
.mob-grp{padding:var(--space-10) var(--space-14);border-radius:12px;background:var(--main-bg);border:1px solid var(--main-border)}
.mob-grp-t{font-size:var(--fs-14);font-weight:var(--fw-700);color:var(--main-text);margin-bottom:var(--space-8)}
.mob-grp-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-10)}
.mob-grp-cells .mob-perm-cell{width:auto}
.mob-grp-cells .mob-perm-lbl{min-height:0}
.mob-row-off .mob-grp{opacity:.35;pointer-events:none}
.mob-eu-phi{margin-top:var(--space-12);padding:var(--space-10) var(--space-14);border-radius:8px;background:var(--warning-dim);font-size:var(--fs-12);color:var(--warning-text-strong)}
.mob-eu-phi-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-10)}
.mob-eu-phi-row .eu-link{flex:none}
.mob-eu-phi-list{margin:var(--space-6) 0 0;padding-left:18px;line-height:1.6}

/* ── Conversations Stage 5: snooze + bulk actions (2026-08-04) ───────────── */
/* Bulk selection bar. Sits between the toolbar and the list, only present when
   something is selected, so the normal inbox is unchanged. */
.conv-bulk-bar{display:flex;align-items:center;gap:8px;padding:10px 24px;background:var(--purple-dim);border-bottom:1px solid var(--main-border);flex-shrink:0;flex-wrap:wrap}
.conv-bulk-count{font-size:12px;font-weight:700;color:var(--purple);margin-right:4px}
.conv-bulk-btn{padding:5px 12px;border-radius:var(--radius-full);background:var(--main-card);color:var(--main-text);font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--main-border);transition:all .15s}
.conv-bulk-btn:hover{background:var(--main-card-hover);border-color:var(--purple)}
.conv-bulk-btn.ghost{background:none;color:var(--main-text-muted)}
.conv-bulk-btn.ghost:hover{color:var(--main-text)}

/* Row checkbox. Its own click target, separate from the row's open-thread
   handler, which is why the label carries a stopPropagation of its own. */
.conv-list-check{display:flex;align-items:center;flex-shrink:0;cursor:pointer;padding-right:2px}
.conv-list-check input{cursor:pointer;accent-color:var(--purple);width:14px;height:14px}
.conv-list-item.picked{background:var(--purple-dim)}

/* Snooze controls live in the row meta line. Hidden until the row is hovered or
   focused within, so three extra buttons per row do not add permanent noise to
   a list staff scan all day. Keyboard users get them via :focus-within. */
.conv-snooze-group{display:inline-flex;gap:4px;opacity:0;transition:opacity .12s}
/* With a mouse the presets float over the date on hover instead of reserving
   invisible width in the meta row, which squeezed the chips beside them (the
   inbox pattern: actions replace the date while you point at the row). Touch
   keeps them in the row, always shown, where the meta row can wrap. */
@media (hover:hover){.conv-list-item{position:relative}.conv-snooze-group{position:absolute;right:14px;top:11px;padding-left:8px}.conv-list-item:hover .conv-list-time,.conv-list-item:focus-within .conv-list-time{visibility:hidden}}
.conv-list-item:hover .conv-snooze-group,
.conv-list-item:focus-within .conv-snooze-group{opacity:1}
/* Touch screens have no hover, so the snooze presets never showed there. */
@media (hover:none){.conv-snooze-group{opacity:1}}
.conv-list-item:focus-visible{outline:2px solid var(--purple);outline-offset:-2px}
.conv-side{width:260px;flex-shrink:0;border-left:1px solid var(--main-border);background:var(--main-card);overflow-y:auto;font-size:13px;color:var(--main-text)}
.conv-side-sec{padding:12px 16px;border-bottom:1px solid var(--main-border);line-height:1.45}
.conv-side-h{font-size:11px;font-weight:700;color:var(--main-text-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.conv-side-muted{color:var(--main-text-muted)}
.conv-side-reach{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:baseline}
.conv-side-reach-k{font-size:11px;font-weight:700;color:var(--main-text-muted)}
.conv-side-ok{color:var(--success-text)}
.conv-side-warn{color:var(--warning-text)}
.conv-side-bad{color:var(--danger-text)}
.conv-side-tags{display:flex;flex-wrap:wrap;gap:4px}
.conv-side-tag{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--purple-dim);color:var(--purple)}
.conv-side-open{background:none;border:1px solid var(--main-border);border-radius:var(--radius-sm);padding:6px 12px;font-size:12px;font-weight:600;color:var(--purple);cursor:pointer}
.conv-side-open:hover{border-color:var(--purple)}
.conv-side-open{display:inline-flex;align-items:center;gap:6px}
.conv-side-open svg{width:13px;height:13px;flex-shrink:0}
/* The side panel shows from 1100px and carries Open contact; the header
   button only stays where the panel is folded into the chip strip. */
@media (min-width:1101px){.conv-head-contact{display:none}}
.conv-strip{display:none;flex-wrap:wrap;gap:6px;padding:8px 20px;background:var(--main-card);border-bottom:1px solid var(--main-border);flex-shrink:0}
.conv-strip-chip{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--main-border);color:var(--main-text-muted)}
.conv-strip-chip.is-warn{color:var(--warning-text);border-color:var(--warning-light)}
@media (max-width:1100px){.conv-side{display:none}.conv-strip{display:flex}}
.conv-compose-mode{display:flex;gap:4px;margin-bottom:8px}
.conv-compose-mode button{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;border:1px solid var(--main-border);background:var(--main-card);color:var(--main-text-muted);cursor:pointer}
.conv-compose-mode button.is-on{background:var(--purple-dim);color:var(--purple);border-color:var(--purple-border)}
.conv-compose-mode button.is-note.is-on{background:var(--warning-dim);color:var(--warning-text);border-color:var(--warning-light)}
.conv-composer-wrap.is-note .conv-composer{background:var(--warning-dim);border-color:var(--warning-light)}
.conv-mention-menu{display:flex;flex-direction:column;gap:2px;padding:4px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.conv-mention-item{text-align:left;padding:6px 10px;border:0;background:none;border-radius:var(--radius-sm);font-size:13px;color:var(--main-text);cursor:pointer}
.conv-mention-item:hover,.conv-mention-item.is-on{background:var(--purple-dim);color:var(--purple)}
.conv-note{align-self:stretch;background:var(--warning-dim);border:1px solid var(--warning-light);border-radius:var(--radius);padding:8px 12px;font-size:13px;color:var(--main-text)}
.conv-note-head{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--warning-text)}
.conv-note-head svg{width:12px;height:12px;flex-shrink:0}
.conv-note-label{font-weight:700}
.conv-note-del{margin-left:auto;background:none;border:0;padding:0;color:var(--main-text-muted);font-size:11px;cursor:pointer}
.conv-note-del:hover{color:var(--danger-text)}
.conv-note-body{margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere}
.conv-msg-dstat{display:inline-flex;align-items:center;gap:3px;margin-left:4px}
.conv-msg-dstat svg{width:12px;height:12px;flex-shrink:0}
.conv-msg-dstat.is-ok{color:var(--success-text)}
.conv-msg-dstat.is-bad{color:var(--danger-text);font-weight:600}
.conv-thread-back{display:none;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;padding:0;border-radius:var(--radius-sm);border:1px solid var(--main-border);background:var(--main-card);color:var(--main-text);cursor:pointer}
.conv-thread-back svg{width:16px;height:16px}
/* Narrower desktop windows: let the toolbars and thread actions wrap instead
   of running off the edge. */
@media (max-width:1100px){
  .conv-toolbar{flex-wrap:wrap;row-gap:8px}
  .conv-list{width:330px}
  .conv-thread-head{flex-wrap:wrap}
  .conv-thread-head-actions{flex-wrap:wrap}
}
/* Under 900px: one pane at a time. _convSyncPaneMode sets .has-thread on
   .conv-wrap; with a thread open the search and filter bars step aside. */
@media (max-width:900px){
  .conv-actionbar,.conv-toolbar,.conv-bulk-bar{padding-left:16px;padding-right:16px}
  .conv-search-wrap{max-width:none}
  .conv-main .conv-list{width:auto;flex:1;border-right:0}
  .conv-main .conv-thread{display:none}
  .conv-wrap.has-thread .conv-list{display:none}
  .conv-wrap.has-thread .conv-thread{display:flex}
  .conv-wrap.has-thread .conv-actionbar,
  .conv-wrap.has-thread .conv-toolbar,
  .conv-wrap.has-thread .conv-bulk-bar{display:none}
  .conv-thread-back{display:inline-flex}
  .conv-thread-head{padding:10px 12px}
  .conv-thread-messages{width:calc(100% - 16px);margin:8px auto;padding:16px}
  .conv-composer-wrap{width:calc(100% - 16px)}
}
.conv-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.conv-snooze-btn{padding:1px 7px;border-radius:var(--radius-sm);background:var(--main-bg);color:var(--main-text-muted);font-size:10px;font-weight:700;cursor:pointer;border:1px solid var(--main-border);line-height:1.6}
.conv-snooze-btn:hover{background:var(--main-card-hover);color:var(--purple);border-color:var(--purple)}
.conv-kbd-list{display:flex;flex-direction:column;gap:8px}
.conv-kbd-row{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--main-text)}
.conv-kbd{min-width:28px;text-align:center;font-family:inherit;font-size:12px;font-weight:700;padding:2px 8px;border-radius:var(--radius-sm);border:1px solid var(--main-border);border-bottom-width:2px;background:var(--main-bg);color:var(--main-text)}
.conv-snippet-vars{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:2px 0 6px}
.conv-snippet-vars-label{font-size:11px;color:var(--main-text-muted);margin-right:2px}
.conv-snippet-var{font-size:11px;padding:2px 8px;border-radius:var(--radius-full);border:1px solid var(--main-border);background:var(--main-card);color:var(--purple);cursor:pointer}
.conv-snippet-var:hover{border-color:var(--purple);background:var(--purple-dim)}
.conv-wait-chip{font-size:10px;font-weight:700;white-space:nowrap;padding:1px 7px;border-radius:var(--radius-full);color:var(--main-text-muted);background:var(--main-bg)}
.conv-wait-chip.is-warn{color:var(--warning-text);background:var(--warning-dim)}
.conv-wait-chip.is-late{color:var(--danger-text);background:var(--danger-dim)}
.conv-list-snoozed{font-size:10px;font-weight:700;color:var(--purple);background:var(--purple-dim);padding:1px 7px;border-radius:var(--radius-full)}

/* ── Conversations Stage 5: saved replies (2026-08-04) ───────────────────── */
.conv-snippet-btn{padding:6px 10px;background:none;border:1px solid var(--main-border);border-radius:var(--radius);color:var(--main-text-muted);cursor:pointer;font-size:12px;display:inline-flex;align-items:center;gap:6px}
.conv-snippet-btn:hover{background:var(--main-card-hover);color:var(--main-text)}
/* Anchored to the composer actions row, which is position:relative in context. */
.conv-snippet-menu{position:absolute;bottom:100%;left:0;margin-bottom:6px;min-width:280px;max-width:380px;max-height:300px;overflow-y:auto;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:calc(var(--z-app-overlay) + 200);padding:4px}
.conv-snippet-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:7px 10px;background:none;border:none;border-radius:var(--radius-sm);cursor:pointer;text-align:left}
.conv-snippet-item:hover{background:var(--main-card-hover)}
.conv-snippet-title{font-size:12px;font-weight:700;color:var(--main-text)}
.conv-snippet-preview{font-size:11px;color:var(--main-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.conv-snippet-empty{padding:10px;font-size:12px;color:var(--main-text-muted)}
.conv-snippet-manage{display:block;width:100%;margin-top:4px;padding:7px 10px;background:none;border:none;border-top:1px solid var(--main-border);color:var(--purple);font-size:12px;font-weight:600;cursor:pointer;text-align:left}
.conv-snippet-manage:hover{background:var(--main-card-hover)}

/* Manage modal */
.conv-snippet-overlay{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:var(--z-app-modal);padding:20px}
.conv-snippet-modal{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);width:100%;max-width:560px;max-height:82vh;overflow-y:auto;padding:22px}
.conv-snippet-modal-title{font-family:'Exo 2',sans-serif;font-size:17px;font-weight:700;color:var(--main-text)}
.conv-snippet-modal-sub{font-size:12px;color:var(--main-text-muted);margin:4px 0 16px;line-height:1.5}
.conv-snippet-list{display:flex;flex-direction:column;gap:12px}
.conv-snippet-row,.conv-snippet-add{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--main-border);border-radius:var(--radius);background:var(--main-bg)}
.conv-snippet-add{margin-top:16px;border-style:dashed}
.conv-snippet-add-label{font-size:12px;font-weight:700;color:var(--main-text)}
.conv-snippet-input,.conv-snippet-textarea,.conv-snippet-select{width:100%;padding:7px 10px;border:1px solid var(--main-input-border);border-radius:var(--radius-sm);background:var(--main-input);color:var(--main-text);font-size:12px;font-family:inherit;box-sizing:border-box}
.conv-snippet-textarea{resize:vertical;line-height:1.5}
.conv-snippet-input:focus:not(:focus-visible),.conv-snippet-textarea:focus:not(:focus-visible),.conv-snippet-select:focus:not(:focus-visible){outline:none;border-color:var(--purple);box-shadow:var(--focus-ring)}
.conv-snippet-row-actions{display:flex;align-items:center;gap:8px}
.conv-snippet-row-actions .conv-snippet-select{width:auto;flex:1}
.conv-snippet-foot{display:flex;justify-content:flex-end;margin-top:16px}
/* The saved-replies menu is position:absolute and anchors to this row. Without
   an explicit positioned ancestor it would escape to the viewport. */
.conv-composer-actions{position:relative}

/* ---------------------------------------------------------------------------
   STAFF > SCHEDULING
   Week roster (staff rows x day columns) plus a per-person month view.

   READS AS A ROSTER, NOT A TABLE: each staff/day cell holds one BLOCK PER
   RESOLVED WINDOW, tinted with that staff member's own colour, so a row scans
   as one person and an hours-off carve-out splits into two blocks by itself.
   A day with no windows is left EMPTY, so the eye lands on who is working.
   An earlier cut printed a time range in every cell, which read as a
   spreadsheet.

   PALETTE: content-area chrome, so the --main-* ramp (--main-card /
   --main-border / --main-text), NOT --bg-*. --bg is #14102e, the dark SIDEBAR
   colour; using it painted near-black blocks across a light panel.
   --------------------------------------------------------------------------- */
.sched-bar{display:flex;align-items:center;gap:var(--space-10);margin-bottom:var(--space-12);flex-wrap:wrap}
.sched-nav{display:flex;align-items:center;gap:var(--space-6)}
.sched-range{min-width:170px;text-align:center;font-weight:var(--fw-600);color:var(--main-text);font-size:var(--fs-13)}
.sched-spacer{flex:1}

.sched-seg{display:inline-flex;border:1px solid var(--main-border);border-radius:var(--radius-sm);overflow:hidden}
.sched-seg-btn{border:none;background:var(--main-card);color:var(--main-text-muted);
  padding:5px 12px;font-size:var(--fs-12);cursor:pointer}
.sched-seg-btn:hover{background:var(--main-card-hover)}
.sched-seg-btn.active{background:var(--purple);color:#fff}

/* Roster scrolls horizontally rather than crushing columns. */
.sched-roster-wrap{overflow-x:auto;border:1px solid var(--main-border);
  border-radius:var(--radius-lg);background:var(--main-card)}
.sched-roster{display:grid;grid-template-columns:190px repeat(7,minmax(120px,1fr));min-width:940px}

.sched-r-head{padding:8px 6px;text-align:center;font-size:var(--fs-12);
  color:var(--main-text-muted);border-bottom:1px solid var(--main-border);background:var(--main-card-hover)}
.sched-r-head-today{color:var(--purple);font-weight:var(--fw-600)}
.sched-r-dow{font-weight:var(--fw-600)}
.sched-r-date{font-size:var(--fs-11)}

/* Left rail: who, and how many hours they are scheduled this week. */
.sched-r-name{padding:10px 12px;border-bottom:1px solid var(--main-border);
  border-right:1px solid var(--main-border);background:var(--main-card);
  display:flex;flex-direction:column;justify-content:center;gap:2px}
.sched-r-nm{font-size:var(--fs-13);color:var(--main-text);font-weight:var(--fw-600);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sched-r-sub{font-size:var(--fs-11);color:var(--main-text-muted)}
/* Schedule polish (approved mockup, 2026-10-15). The name rail and its
   header stay put while the week scrolls sideways on a narrow screen. */
.sched-roster > .sched-r-name{position:sticky;left:0;z-index:2}
.sched-r-acts{display:flex;gap:4px;margin-top:3px}
.sched-r-ico{position:relative;width:24px;height:24px;border-radius:6px;border:1px solid var(--main-border);background:var(--main-card);
  color:var(--purple);display:grid;place-items:center;cursor:pointer;font-size:var(--fs-12);font-weight:var(--fw-800);padding:0}
.sched-r-ico:hover{background:var(--purple-dim)}
.sched-r-badge{position:absolute;top:-6px;right:-6px;min-width:15px;height:15px;border-radius:999px;background:var(--orange);
  color:var(--sb-text-strong);font-size:9px;font-weight:var(--fw-800);display:grid;place-items:center;padding:0 3px}
.sched-r-head .sched-r-date{font-family:'Exo 2',Lato,sans-serif;font-size:var(--fs-14);font-weight:var(--fw-700);color:var(--main-text)}
.sched-r-head-today{background:var(--purple-dim)}
.sched-r-head-today .sched-r-date{color:var(--purple)}
.sched-legend{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6) var(--space-14);font-size:var(--fs-11);
  font-weight:var(--fw-700);color:var(--main-text-muted);margin-bottom:var(--space-10)}
.sched-legend > span{display:inline-flex;align-items:center;gap:6px}
.sched-legend-sw{display:inline-block;width:14px;height:10px;border-radius:3px;padding:0}
.sched-legend-tip{margin-left:auto}
.sched-ro-banner{display:flex;align-items:center;gap:var(--space-12);flex-wrap:wrap;background:var(--purple-dim);
  border:1px solid var(--purple-border);border-radius:var(--radius-lg);padding:var(--space-10) var(--space-14);margin-bottom:var(--space-12)}
.sched-ro-t{flex:1;min-width:200px;font-size:var(--fs-13);color:var(--main-text)}
.sched-ro-s{font-size:var(--fs-12);color:var(--main-text-muted)}
.sched-empty-hint{margin-top:var(--space-10);font-size:var(--fs-13);color:var(--main-text-muted)}
.sched-eff-date{width:170px}
.sched-tl-wrap{margin-bottom:var(--space-10)}
.sched-tl{position:relative;height:30px;border-radius:var(--radius-sm);background:var(--main-bg-sunk);overflow:hidden}
.sched-tl-b{position:absolute;top:4px;bottom:4px;border-radius:5px}
.sched-tl-ticks{position:relative;height:16px;margin-top:3px}
.sched-tl-ticks span{position:absolute;transform:translateX(-50%);font-size:var(--fs-10);font-weight:var(--fw-700);color:var(--main-text-muted);white-space:nowrap}
.sched-tl-ticks span:first-child{transform:none}
.sched-tl-ticks span:last-child{transform:translateX(-100%)}

.sched-c{min-height:64px;padding:5px;border-bottom:1px solid var(--main-border);
  border-right:1px solid var(--main-border);background:var(--main-card);
  display:flex;flex-direction:column;justify-content:center;gap:3px;cursor:pointer}
.sched-c:hover{background:var(--main-card-hover)}
.sched-c:focus-visible{outline:2px solid var(--purple);outline-offset:-2px}
/* Shaded column, not a top border. The inset border drew a heavy bar on EVERY
   cell's top edge, so a seven-row roster stacked seven bars down the column. */
.sched-c-today{background:var(--purple-dim)}
.sched-c-today:hover{background:var(--purple-dim)}

/* A day is a list of time ranges. Times are a fixed column so they stay aligned
   down the row; the label takes the slack; the calendar glyph is pinned right so
   it can never push the times out of alignment. */
.sched-line{display:grid;grid-template-columns:auto 1fr;align-items:center;
  gap:var(--space-6);font-size:var(--fs-11);line-height:var(--lh-13);
  padding:2px 4px;border-radius:var(--radius-sm);background:var(--purple);color:#fff}
/* Time over label, as the mockup draws a block. */
.sched-roster .sched-line,.sched-month .sched-line{display:block;padding:3px 6px;border-radius:6px}
.sched-roster .sched-line-l,.sched-month .sched-line-l{display:block;font-size:10px;font-weight:var(--fw-700);opacity:.85}
.sched-roster .sched-line-t,.sched-month .sched-line-t{display:block;font-weight:var(--fw-800)}

.sched-line-t{white-space:nowrap;font-variant-numeric:tabular-nums}
.sched-line-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.9}
/* Colour by what the block IS. Four variants, scannable down a dense week.
   The two break tones are DERIVED from --charcoal with color-mix rather than
   being new hex values, so there is one grey in the system and these are
   provably two shades of it. Appointments keep the brand purple because that is
   the block a manager is looking for; Scheduled takes --info so working-but-not-
   bookable is distinguishable at a glance rather than being a second purple. */
/* Read-only cell: no pointer, no hover affordance. Below manager the roster is
   a thing you look at. */
.sched-c-ro{cursor:default}
/* Restored 2026-10-15: a00e707f deleted these because the class was built by
   string concatenation, so no source named them. 156 _schedLine now maps each
   variant to its full literal class name, which keeps them findable. */
.sched-line-appt{background:var(--purple)}
/* Light fills from the approved mockup (2026-10-15): only bookable time is a
   solid block, so "when can a patient book" reads first down a column. */
.sched-line-sched{background:var(--info-dim);color:var(--info-text);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--info) 30%, transparent)}
.sched-line-bpaid{background:var(--success-dim);color:var(--success-text)}
.sched-line-bunpaid{background:repeating-linear-gradient(45deg,var(--main-bg-sunk),var(--main-bg-sunk) 4px,var(--main-card) 4px,var(--main-card) 8px);
  color:var(--main-text-muted);box-shadow:inset 0 0 0 1px var(--divider)}
/* A GAP is absence of work, so it reads as empty rather than as a block. */
.sched-line-gap{background:none;color:var(--main-text-muted)}
/* A DAY OFF that was taken off a working day. Not a gap -- something happened
   here, and on a roster that is the cell worth spotting. Outlined rather than
   filled: it is an absence, so it should not weigh as much as a shift. */
.sched-line-off{background:var(--warning-dim);color:var(--warning-text);
  border:1px dashed var(--warning);display:flex;gap:var(--space-6);
  align-items:baseline;flex-wrap:wrap}
.sched-off-was{opacity:.85;text-decoration:line-through}

/* Month view reuses the same cell and blocks, taller, with a date number. */
.sched-month{display:grid;grid-template-columns:repeat(7,1fr);
  border:1px solid var(--main-border);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--main-card)}
.sched-c-month{min-height:78px;justify-content:flex-start}
.sched-c-num{font-size:var(--fs-12);font-weight:var(--fw-600);color:var(--main-text)}
.sched-c-empty{background:var(--main-bg);cursor:default}
.sched-c-empty:hover{background:var(--main-bg)}
.sched-radio{display:inline-flex;align-items:center;gap:var(--space-6);font-size:var(--fs-13);
  color:var(--text);cursor:pointer}
.sched-modal-times{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-10);margin-bottom:var(--space-6)}

.sched-err{margin-top:var(--space-10);padding:var(--space-10);border-radius:var(--radius-sm);
  background:var(--danger-dim);border:1px solid var(--danger);color:var(--danger-text);
  font-size:var(--fs-13)}
.sched-conflicts{margin:var(--space-6) 0 0;padding-left:var(--space-16)}
.sched-conflicts li{margin-top:2px}

/* Class .inp was used throughout Staff > Scheduling but NEVER DEFINED, so every
   time input and select in the tab rendered with raw browser defaults. That is
   why the kind selector did not match the time fields beside it: nothing was
   styling either of them, and a <select> and an <input type=time> disagree by
   default about height, padding and font.

   Same situation, and same fix, as .msp-input above (see the note there). The
   metrics are copied from it deliberately rather than invented, so the two
   blocks stay one look.

   An explicit height on BOTH is what actually lines them up: padding alone
   leaves the select a pixel or two short, because it does not inherit the
   input's line-box the same way. */
.inp{padding:9px 11px;background:var(--main-input);border:1px solid var(--main-input-border);
  border-radius:var(--radius);color:var(--main-text);font-size:var(--fs-14);
  box-sizing:border-box;font-family:inherit;line-height:1.4;height:38px}
.inp:focus:not(:focus-visible){outline:none;border-color:var(--purple)}
select.inp{cursor:pointer}
textarea.inp{height:auto;resize:vertical}

/* Schedule-hours editor: a day as a list of time ranges. */
/* ONE LINE per range: x, start, to, end, what-it-is. It used to wrap, and once
   the kind selector replaced the checkbox the row no longer fit, so every range
   rendered as two stacked lines and the selector read as belonging to the range
   below it. Wrapping is kept only where the row genuinely cannot fit. */
.sched-seg-row{display:flex;align-items:center;gap:var(--space-8);
  padding:var(--space-6) 0;flex-wrap:nowrap}
/* Fixed, and not allowed to shrink: a time input that flexes down clips the
   AM/PM and the stepper. */
.sched-seg-row .inp{width:130px;flex:0 0 auto}
.sched-seg-dash{font-size:var(--fs-12);color:var(--text-muted)}
/* The bookable tick. Whole label is the hit target, and it does not shrink:
   this is the control that decides whether the range reaches the widget. */
/* Remove-this-range. Leads the row rather than trailing it, so the destructive
   control is never adjacent to Save. Sized to a comfortable hit target even
   though the glyph is small. */
.sched-seg-x{flex:0 0 auto;width:26px;height:26px;line-height:1;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;border-radius:var(--radius-sm);cursor:pointer;
  font-size:var(--fs-18);color:var(--danger-text)}
.sched-seg-x:hover{background:var(--danger-dim)}
/* What the range IS. One control, four options, because it is one decision.
   Takes the width left over rather than reserving a fixed 170px, which is what
   pushed the row onto a second line. min-width:0 lets it actually shrink; a
   flex item defaults to min-width:auto and refuses to go below its longest
   option ("Working, not bookable"). */
/* Selector, NOT `.sched-seg-kind` alone: the element also carries class `inp`,
   so `.sched-seg-row .inp` above (two classes) outranks a single-class rule and
   would pin this to 130px and flex:none, putting the row right back onto two
   lines. Same specificity, declared later, so this wins. */
.sched-seg-row .sched-seg-kind{flex:1 1 150px;min-width:0;max-width:220px;width:auto;cursor:pointer}
/* Only where the row truly cannot fit, e.g. the modal on a phone. */
@media (max-width:640px){
  .sched-seg-row{flex-wrap:wrap}
  .sched-seg-row .sched-seg-kind{flex:1 1 100%}
}
/* Time nobody is scheduled. Derived from the gap between two ranges, never
   stored: since breaks became rows, a hole means genuinely not present. */
/* Clear-all sits with Add, not with Save: it edits the list, it does not
   write. Pushed right so it is not the button next to the cursor. */
.sched-seg-clearall{margin-left:var(--space-8);color:var(--danger-text)}
.sched-seg-gap{padding:var(--space-4) 0 var(--space-4) 34px;
  font-size:var(--fs-12);color:var(--text-muted);font-style:italic}

/* VERSION PICKER: which schedule the editor is showing. Content-panel ramp
   (--main-*), like .s-card and the rest of this modal -- --bg is the dark
   SIDEBAR colour and paints near-black blocks on a light panel. */
.sched-av-vrow{display:flex;flex-wrap:wrap;gap:var(--space-6);margin-top:var(--space-6)}
.sched-av-vbtn{padding:var(--space-6) var(--space-10);cursor:pointer;
  font-size:var(--fs-12);border-radius:var(--radius-sm);
  background:var(--main-card);border:1px solid var(--main-border);color:var(--main-text)}
.sched-av-vbtn:hover{border-color:var(--purple)}
/* #fff, not a token: there is no on-purple text token, and .btn-purple /
   .dash-scope-pill button.active both use the literal. style-drift freezes the
   hex SET, and #fff is long since in it. */
.sched-av-vbtn.is-on{background:var(--purple);border-color:var(--purple);color:#fff}
/* FIXED COLUMNS, not flex-wrap. Wrapping let the two lunch pickers fall to a
   second line and align to the row's left edge instead of under the Lunch
   checkbox, so every enabled day read as staggered. */
/* FRACTIONAL tracks, not fixed px. input[type=time] carries a large intrinsic
   min-content width (the browser's spinner + clock affordance), which beat the
   fixed 112px tracks and pushed the lunch columns outside the modal. minmax(0,
   1fr) cannot overflow its container, and min-width:0 on the inputs lets them
   actually shrink to their track. */
/* Schedule tab: Copy To's panel and a day's own error line. */
.sched-av-day-err{margin-top:var(--space-6)}
.sched-av-copy{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-10);margin-top:var(--space-8);padding:var(--space-10) var(--space-12);border-radius:var(--radius);background:var(--main-bg)}
.sched-av-copy-t{font-size:var(--fs-13);font-weight:var(--fw-700);color:var(--main-text)}
/* Coming Up's title, and the week beside it (2026-10-23). */
.sched-av-start-t{font-size:var(--fs-14);font-weight:var(--fw-700);color:var(--main-text)}
.sched-av-cols{display:flex;gap:var(--space-14);align-items:flex-start;flex-wrap:wrap}
.sched-av-week{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:var(--space-12)}
/* Schedule tab cleanup (2026-10-23): one bar for Starts and Fill From, two
   totals with a warning, one row per day, and the booking rules as a row. */
.sched-av-vnote{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-12);margin-top:var(--space-6)}
.sav-bar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-12) var(--space-20);padding:var(--space-10) var(--space-14);margin-bottom:var(--space-14);border-radius:12px;background:var(--main-bg)}
.sav-bar-g{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8)}
.sav-bar-g .lbl{margin:0}
.sav-bar-sep{width:1px;align-self:stretch;background:var(--main-border)}
.sav-seg{display:inline-flex;padding:3px;gap:2px;border-radius:9px;background:var(--main-card);border:1px solid var(--main-border)}
.sav-seg-o{position:relative;margin:0;cursor:pointer}
.sav-seg-o input{position:absolute;opacity:0;width:1px;height:1px}
.sav-seg-o span{display:block;padding:5px 12px;border-radius:7px;font-size:var(--fs-13);font-weight:var(--fw-700);color:var(--main-text-muted)}
.sav-seg-o input:checked+span{background:var(--purple-dim);color:var(--purple)}
.sav-seg-o input:focus-visible+span{box-shadow:var(--focus-ring)}
.sav-tot{display:flex;flex-wrap:wrap;gap:var(--space-6) var(--space-20);align-items:baseline}
.sav-tot-f{display:flex;align-items:baseline;gap:var(--space-8)}
.sav-tot-v{font-size:var(--fs-22);font-weight:var(--fw-800);color:var(--main-text);font-variant-numeric:tabular-nums}
.sav-tot-v.is-warn{color:var(--warning-text)}
.sav-tot-u{font-size:var(--fs-13);color:var(--main-text-muted)}
.sav-nobook{padding:var(--space-10) var(--space-12);border-radius:var(--radius);background:var(--warning-dim);color:var(--warning-text-strong);font-size:var(--fs-13);line-height:1.45}
.sav-days{border:1px solid var(--main-border);border-radius:12px;overflow:hidden}
.sav-day{display:flex;gap:var(--space-12);align-items:flex-start;padding:var(--space-10) var(--space-12);background:var(--main-card)}
.sav-day+.sav-day{border-top:1px solid var(--main-border)}
.sav-day.is-closed{background:var(--main-card-hover)}
.sav-day.is-err{box-shadow:inset 3px 0 0 var(--danger-text)}
.sav-day-h{flex:none;width:92px;padding-top:5px}
.sav-day-n{font-size:var(--fs-14);font-weight:var(--fw-800);color:var(--main-text)}
.sav-day.is-closed .sav-day-n{color:var(--main-text-muted)}
.sav-day-s{font-size:var(--fs-12);color:var(--main-text-muted)}
.sav-day-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-6)}
.sav-day-a{display:flex;gap:2px;margin:var(--space-4) 0 0 -6px}
.sav-ico{width:28px;height:28px;padding:0;border:0;border-radius:8px;background:none;color:var(--main-text-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.sav-ico:hover{background:var(--main-bg);color:var(--main-text)}
.sav-ico:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.sav-copy-b[aria-expanded="true"]{background:var(--purple-dim);color:var(--purple)}
.sav-closed{display:flex;align-items:center;gap:var(--space-10);padding-top:5px;font-size:var(--fs-13);color:var(--main-text-muted)}
/* Scoped to the day list so it outranks `.sched-av-day-list .sched-seg-row`,
   which comes later in this file and would otherwise drop the left padding. */
.sched-av-day-list .sched-seg-row.is-compact{padding:0 0 0 var(--space-8);border-left:3px solid var(--main-border);flex-wrap:wrap;row-gap:var(--space-6)}
.sched-seg-row.is-compact input.inp{width:116px;min-width:116px}
.sched-seg-row.is-compact[data-kind="bookable"]{border-left-color:var(--success)}
.sched-seg-row.is-compact[data-kind="break_paid"]{border-left-color:var(--info)}
.sched-seg-row.is-compact[data-kind="break_unpaid"]{border-left-color:var(--warning)}
.sched-seg-row .sched-seg-kind.is-chip{flex:none;width:auto;min-width:172px;max-width:210px;border-radius:999px;font-size:var(--fs-12);font-weight:var(--fw-700);padding:5px 10px;background-color:var(--main-bg);color:var(--main-text-muted);border-color:transparent}
.sched-seg-kind.is-chip[data-kind="bookable"]{background-color:var(--success-dim);color:var(--success-text)}
.sched-seg-kind.is-chip[data-kind="break_paid"]{background-color:var(--info-dim);color:var(--info-text)}
.sched-seg-kind.is-chip[data-kind="break_unpaid"]{background-color:var(--warning-dim);color:var(--warning-text)}
.sav-rules{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8) var(--space-16);padding:var(--space-10) var(--space-12);border-radius:var(--radius);background:var(--main-card-hover);border:1px solid var(--main-border)}
.sav-rules .lbl{margin:0}
.sav-rule{display:flex;align-items:center;gap:var(--space-6);margin:0;font-size:var(--fs-13);color:var(--main-text);text-transform:none;letter-spacing:0;font-weight:var(--fw-400)}
.sav-num{width:68px;text-align:right}
.sav-rules-h{flex-basis:100%;font-size:var(--fs-12);color:var(--main-text-muted)}
.sched-av-up{flex:0 1 220px;min-width:200px;display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-12) var(--space-14);border-radius:12px;background:var(--main-bg);border:1px solid var(--main-border)}
.sched-av-up .eu-link{align-self:flex-start}
.sched-av-up-item{padding:var(--space-8) var(--space-10);border-radius:8px;background:var(--main-card);border:1px solid var(--main-border)}
.sched-av-up-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-6)}
.sched-av-up-d{font-size:var(--fs-13);font-weight:var(--fw-700);color:var(--main-text)}
.sched-av-up-chip{flex:none;font-size:var(--fs-11);font-weight:var(--fw-800);padding:2px 7px;border-radius:999px}
.sched-av-up-chip.is-change{background:var(--purple-dim);color:var(--purple)}
.sched-av-up-chip.is-off{background:var(--warning-dim);color:var(--warning-text)}
.sched-av-up-chip.is-day{background:var(--success-dim);color:var(--success-text)}
.sched-av-up-chip.is-req{background:var(--info-dim);color:var(--info-text)}
.sched-av-day-list .sched-seg-row{padding:var(--space-2) 0}
/* Add sits tight under the ranges it extends, not floating a row away. */
.sched-av-day-list .btn-sm{margin-top:var(--space-4)}

/* Staff > Timesheets. Payroll review before export.
   FULL WIDTH, but the columns are FIXED and the slack goes into ONE of them.
   The washed-out look came from seven fluid columns stretching across a 2000px
   monitor, which put a name and its hours a foot apart. Capping the table fixed
   that and left an odd empty gutter instead, so: everything carrying a figure
   gets a fixed width and stays grouped, and the flags column absorbs whatever
   is left over. */
.ts-wrap{width:100%}
/* ==== Timesheets to the approved mockup (2026-10-15) ==== */
.ts-gear-wrap{position:relative;display:inline-flex}
.ts-gear{padding:6px;border:1px solid var(--main-border);border-radius:var(--radius-sm);color:var(--main-text-muted)}
.ts-gear svg{width:16px;height:16px}
.tsx-status{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8) var(--space-14);background:var(--main-card);
  border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:var(--space-10) var(--space-14);margin-bottom:var(--space-12);box-shadow:var(--shadow-sm)}
.tsx-status-t{font-size:var(--fs-13);color:var(--main-text);min-width:220px;flex:0 1 auto}
.tsx-status-hist{flex-basis:100%;font-size:var(--fs-11);color:var(--main-text-muted)}
.tsx-sp{flex:1}
.tsx-small{font-size:var(--fs-12)}
.tsx{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.tsx-row{display:grid;grid-template-columns:minmax(190px,2fr) 90px 80px 80px 110px minmax(130px,1.2fr) 32px;align-items:center;
  gap:var(--space-10);padding:var(--space-8) var(--space-14);border-top:1px solid var(--main-border);font-size:var(--fs-13);color:var(--main-text)}
.tsx-pay .tsx-row{grid-template-columns:minmax(190px,2fr) 90px 80px 80px 110px 100px minmax(130px,1.2fr) 32px}
.tsx-row:first-child{border-top:none}
.tsx-head{font-size:var(--fs-10);font-weight:var(--fw-800);letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted)}
.tsx-person{cursor:pointer}
.tsx-person:hover{background:var(--main-card-hover)}
.tsx-person:focus-visible{outline:2px solid var(--purple);outline-offset:-2px}
.tsx-person.is-open{background:var(--main-card-hover)}
.tsx-c{min-width:0}
.tsx-r{text-align:right;font-variant-numeric:tabular-nums}
.tsx-num{font-family:'Exo 2',Lato,sans-serif;font-weight:var(--fw-700)}
.tsx-ot{color:var(--orange-text);font-weight:var(--fw-800)}
.tsx-under{color:var(--warning-text)}
.tsx-mute{color:var(--main-text-muted)}
.tsx-who{display:flex;align-items:center;gap:var(--space-10)}
.tsx-name{font-weight:var(--fw-700);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tsx-sub{font-size:var(--fs-11);color:var(--main-text-muted)}
.tsx-av{width:28px;height:28px;border-radius:50%;flex:none;display:inline-grid;place-items:center;background:var(--purple);
  color:var(--sb-text-strong);font-size:var(--fs-11);font-weight:var(--fw-800)}
.tsx-flags{display:flex;gap:var(--space-4);flex-wrap:wrap}
.tsx-chev{text-align:center;color:var(--purple);font-weight:var(--fw-800)}
.tsx-chip{display:inline-flex;align-items:center;font-size:var(--fs-11);font-weight:var(--fw-800);padding:2px 8px;border-radius:999px;white-space:nowrap}
.tsx-chip-ok{background:var(--success-dim);color:var(--success-text)}
.tsx-chip-warn{background:var(--warning-dim);color:var(--warning-text)}
.tsx-chip-no{background:var(--danger-dim);color:var(--danger-text)}
.tsx-chip-muted{background:var(--main-bg-sunk);color:var(--main-text-muted)}
.tsx-punch{background:var(--main-card-hover);font-size:var(--fs-12)}
.tsx-punch .tsx-pday{padding-left:38px}
.tsx-punch .tsx-det{grid-column:span 3;color:var(--main-text-muted)}
.tsx-pay .tsx-punch .tsx-det{grid-column:span 4}
.tsx-link{border:none;background:none;padding:0;font:inherit;font-size:var(--fs-12);font-weight:var(--fw-700);color:var(--purple);cursor:pointer}
.tsx-link:hover{text-decoration:underline}
.tsx-link:disabled{color:var(--main-text-muted);cursor:not-allowed;text-decoration:none}
.tsx-empty{font-size:var(--fs-13);color:var(--main-text-muted);padding:var(--space-14)}
.tsx-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:var(--space-8)}
.tsx-tile{border:1px solid var(--main-border);border-radius:var(--radius);padding:var(--space-8) var(--space-10)}
.tsx-tile .lbl{font-size:var(--fs-10);font-weight:var(--fw-800);letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted)}
.tsx-tile-v{font-family:'Exo 2',Lato,sans-serif;font-size:var(--fs-18);font-weight:var(--fw-700);color:var(--main-text);font-variant-numeric:tabular-nums}
.tsx-okbox{background:var(--success-dim);color:var(--success-text);border-radius:var(--radius);padding:var(--space-10) var(--space-12);font-size:var(--fs-12)}
@media (max-width:900px){
  .tsx{overflow-x:auto}
  .tsx-row,.tsx-pay .tsx-row{min-width:860px}
}
/* On the Clock Now (158 _tsLoadNow): who is punched in, above the range. */
.ts-now{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8) var(--space-16);
  background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);
  padding:var(--space-10) var(--space-14);margin-bottom:var(--space-14)}
.ts-now-t{font-size:var(--fs-12);font-weight:var(--fw-700);color:var(--main-text)}
.ts-now-row{display:inline-flex;align-items:center;gap:var(--space-8);
  background:var(--success-dim);border-radius:999px;padding:3px 4px 3px 12px}
.ts-now-who{font-size:var(--fs-13);font-weight:var(--fw-600);color:var(--success-text)}
.ts-bar{display:flex;align-items:flex-end;gap:var(--space-10);flex-wrap:wrap;
  margin-bottom:var(--space-14)}
.ts-field{display:flex;flex-direction:column;gap:3px}
.ts-field .lbl{font-size:var(--fs-11);color:var(--main-text-muted);margin:0}
.ts-field .inp,.ts-field .filter-sel{min-width:150px}
.ts-spacer{flex:1}

/* STAFF > WORKPLACE. The employee's own view: clock, hours, next shifts,
   requests. Not a second dashboard -- nothing here is about a patient. */

/* Punch Out asks inline in the card (157 _tcAskPunchOut). */
.tc-confirm{display:flex;align-items:center;gap:var(--space-10);flex-wrap:wrap}
.tc-confirm-q{font-size:var(--fs-14);font-weight:var(--fw-600);color:var(--main-text)}
.wp-card{background:var(--main-card);border:1px solid var(--main-border);
  border-radius:var(--radius);padding:var(--space-16) var(--space-18)}
.wp-big-row{display:flex;align-items:center;gap:var(--space-10);flex-wrap:wrap}
.wp-big{font-size:30px;line-height:1.1;font-weight:var(--fw-700);color:var(--main-text);
  font-variant-numeric:tabular-nums}
.wp-big-u{font-size:var(--fs-13);font-weight:var(--fw-400);color:var(--main-text-muted)}

/* The week as bars. Turns a total into a shape you can read at a glance:
   which day was long, which day you were off. */
.wp-bars{display:flex;align-items:flex-end;gap:6px;height:86px;margin:var(--space-12) 0 var(--space-8);max-width:520px}
.wp-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.wp-bar{width:100%;background:var(--purple);border-radius:3px;cursor:help}
.wp-bar-ot{background:var(--warning)}
.wp-bar-none{background:var(--main-border);cursor:default}
.wp-bar-l{font-size:var(--fs-11);color:var(--main-text-muted);margin-top:4px}

/* Request + decide modal.
   `.lbl` has no base rule anywhere and `.inp` sets no width, so a bare
   label+input pair renders INLINE, side by side, staggered by whatever each
   control happens to be wide. Both are fixed here rather than by sprinkling
   inline styles through the markup. */
.wp-form .lbl{display:block;margin:0 0 4px;font-size:var(--fs-11);
  font-weight:var(--fw-600);color:var(--main-text-muted)}
.wp-form .inp{display:block;width:100%}
/* Approve Request: bookings the request would strand (160 _wpClashHtml). */
.wp-clash{background:var(--warning-dim);border:1px solid var(--warning);border-radius:var(--radius);
  padding:var(--space-10) var(--space-12);font-size:var(--fs-12);color:var(--warning-text);margin-top:var(--space-10)}
.wp-clash ul{margin:var(--space-6) 0 0;padding-left:18px}
/* Request Time Off calendar (160 _wpPaintRequestCal). */
.wp-cal{border:1px solid var(--main-border);border-radius:var(--radius);padding:var(--space-10)}
.wp-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6)}
.wp-cal-title{font-size:var(--fs-13);font-weight:var(--fw-700);color:var(--main-text)}
.wp-cal-nav{border:none;background:none;font-size:var(--fs-16);font-weight:var(--fw-700);color:var(--purple);cursor:pointer;padding:2px 10px;border-radius:var(--radius-sm)}
.wp-cal-nav:disabled{color:var(--main-text-muted);opacity:.4;cursor:default}
.wp-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.wp-cal-w{font-size:var(--fs-10);font-weight:var(--fw-700);color:var(--main-text-muted);padding:4px 0}
.wp-cal-d{border:none;background:none;font:inherit;font-size:var(--fs-12);font-weight:var(--fw-600);color:var(--main-text);padding:7px 0;border-radius:var(--radius-sm);cursor:pointer}
.wp-cal-d:hover{background:var(--purple-dim)}
.wp-cal-d.is-past{color:var(--main-text-muted);opacity:.45;cursor:default;background:none}
.wp-cal-d.is-today{box-shadow:inset 0 0 0 1px var(--purple-border)}
.wp-cal-d.has-shift{text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:4px}
.wp-cal-d.is-in{background:var(--purple-dim);color:var(--purple);border-radius:0}
.wp-cal-d.is-end{background:var(--purple);color:#fff;border-radius:var(--radius-sm)}
.wp-cal-legend{font-size:var(--fs-11);color:var(--main-text-muted);margin-top:var(--space-6)}
.wp-cal-sum{font-size:var(--fs-13);font-weight:var(--fw-600);color:var(--main-text)}
.wp-cal-sum:empty{display:none}
/* Vertical rhythm between fields, without a margin on the first one. */
.wp-form > *+*{margin-top:var(--space-12)}

/* Two fields side by side on a wide modal, stacked on a narrow one, so a date
   range never wraps into a single cramped column. */
.wp-form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12)}
.wp-form-row > *+*{margin-top:0}
@media (max-width:520px){ .wp-form-row{grid-template-columns:1fr;gap:var(--space-10)} }

/* Your own earnings. Sits under the hours it was derived from, quieter than
   the hours themselves: this is a staff portal, not a payslip. */

.wp-link{background:none;border:none;padding:0;font-size:var(--fs-11);
  color:var(--purple);cursor:pointer;font-weight:var(--fw-600)}
.wp-link:hover{text-decoration:underline}
/* Tips. Same weight as the other callouts, in the positive colour, and kept a
   note rather than promoted to .wp-pay so it never reads as the wage total. */
.wp-foot{margin-top:var(--space-10);padding-top:var(--space-8);
  border-top:1px solid var(--main-border);font-size:var(--fs-11);color:var(--main-text-muted);
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-10);flex-wrap:wrap}

.wp-chip{font-size:var(--fs-11);font-weight:var(--fw-600);padding:2px 9px;
  border-radius:var(--radius-sm);white-space:nowrap}
.wp-chip-wait{background:var(--warning-light);color:var(--warning-text)}
.wp-chip-ok{background:var(--success-dim);color:var(--success-text)}
.wp-chip-no{background:var(--danger-dim);color:var(--danger-text)}
.wp-chip-muted{background:var(--main-card-hover);color:var(--main-text-muted)}
/* ==== Workplace to the approved mockup (2026-10-15) ==== */
/* Hero: the design language's purple hero, two translucent circles. */
.wp-hero{position:relative;overflow:hidden;display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-16);
  padding:var(--space-18) var(--space-20);border-radius:var(--radius-lg);color:var(--sb-text-strong);
  background:linear-gradient(135deg,var(--purple),var(--purple-active))}
.wp-hero::before,.wp-hero::after{content:'';position:absolute;border-radius:50%;background:var(--dash-hero-circle);pointer-events:none}
.wp-hero::before{width:220px;height:220px;right:-60px;top:-110px}
.wp-hero::after{width:140px;height:140px;right:90px;top:-80px}
.wp-hero > *{position:relative;z-index:1}
.wp-hero-l{min-width:180px}
.wp-hero-lbl{font-size:var(--fs-11);font-weight:var(--fw-800);letter-spacing:.05em;text-transform:uppercase;opacity:.78}
.wp-hero-big{font-family:'Exo 2',Lato,sans-serif;font-size:34px;font-weight:var(--fw-800);line-height:1.05;font-variant-numeric:tabular-nums;margin-top:2px}
.wp-hero-big.is-off{font-size:var(--fs-20);font-weight:var(--fw-700)}
.wp-hero-sub{font-size:var(--fs-12);opacity:.85;margin-top:var(--space-4)}
.wp-hero-tiles{display:flex;gap:var(--space-10);flex-wrap:wrap}
.wp-hero-tiles:empty{display:none}
.wp-hero-tile{background:var(--dash-hero-tile);border-radius:var(--radius);padding:var(--space-8) var(--space-12)}
.wp-hero-tl{font-size:var(--fs-10);font-weight:var(--fw-800);letter-spacing:.05em;text-transform:uppercase;opacity:.78}
.wp-hero-tv{font-family:'Exo 2',Lato,sans-serif;font-size:var(--fs-16);font-weight:var(--fw-700);font-variant-numeric:tabular-nums}
.wp-hero-sp{flex:1}
.wp-hero-skel{min-height:92px;opacity:.55}
.wp-hero-btn{border:none;cursor:pointer;background:var(--main-card);color:var(--purple-active);font:inherit;
  font-size:var(--fs-14);font-weight:var(--fw-800);border-radius:var(--radius);padding:var(--space-10) var(--space-18)}
.wp-hero-btn:hover{background:var(--main-card-hover)}
.wp-hero-btn:disabled{opacity:.6;cursor:default}
.wp-hero-confirm{background:rgba(0,0,0,.22);border-radius:var(--radius);padding:var(--space-8) var(--space-10);
  display:flex;align-items:center;gap:var(--space-8);flex-wrap:wrap;font-size:var(--fs-13)}
.wp-hero-confirm .tc-confirm-q{color:var(--sb-text-strong)}
.wp-hero-yes{border:none;cursor:pointer;background:var(--main-card);color:var(--danger-text);font:inherit;font-size:var(--fs-13);
  font-weight:var(--fw-800);border-radius:var(--radius-sm);padding:6px 12px}
.wp-hero-yes:disabled{opacity:.6}
.wp-hero-no{border:none;cursor:pointer;background:none;color:var(--sb-text-strong);font:inherit;font-size:var(--fs-13);font-weight:var(--fw-700);padding:6px}
/* The clock slot is a bare container, NOT a card: the hero draws its own
   border, and wrapping it in one produced a visible box inside a box. */
.wp-clock{margin-bottom:var(--space-12)}
/* Cards: the design language's card, with an icon tile in the head. */
#wp-body .wp-card{border-radius:var(--radius-lg);padding:14px;box-shadow:var(--shadow-sm);min-width:0}
#wp-body > .wp-card{margin-bottom:var(--space-12)}
.wp-ct{display:flex;align-items:center;gap:9px;margin-bottom:var(--space-10);flex-wrap:wrap}
.wp-ct-tile{width:26px;height:26px;border-radius:7px;background:var(--purple-dim);color:var(--purple);display:grid;place-items:center;flex:none;
  font-size:var(--fs-12);font-weight:var(--fw-800)}
.wp-ct-t{font-family:'Exo 2',Lato,sans-serif;font-size:var(--fs-14);font-weight:var(--fw-700);color:var(--main-text)}
.wp-ct-act{margin-left:auto}
.wp-ct-count{background:var(--purple);color:var(--sb-text-strong)}
.wp-head-acts{display:flex;gap:var(--space-6);flex-wrap:wrap}
.wp-row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);margin-bottom:var(--space-12)}
.wp-row2-wide{grid-template-columns:1.25fr 1fr}
.wp-row2-one{grid-template-columns:1fr}
@media (max-width:860px){.wp-row2,.wp-row2-wide{grid-template-columns:1fr}}
.wp-line{display:flex;align-items:center;gap:var(--space-10);padding:var(--space-8) 0;border-top:1px solid var(--main-border);font-size:var(--fs-13);color:var(--main-text)}
.wp-ct + .wp-line{border-top:none}
.wp-line-main{flex:1;min-width:0}
.wp-line-t{display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap}
.wp-line-s{font-size:var(--fs-12);color:var(--main-text-muted);margin-top:1px}
.wp-line-d{width:96px;flex:none}
.wp-line-d.is-today{font-weight:var(--fw-800)}
.wp-line-v{font-variant-numeric:tabular-nums}
.wp-line > .wp-chip:last-child,.wp-line > .wp-link:last-child{margin-left:auto}
.wp-line .wp-chip + .wp-link{margin-left:var(--space-4)}
.wp-av{width:28px;height:28px;border-radius:50%;flex:none;display:inline-grid;place-items:center;overflow:hidden;
  background:var(--purple);color:var(--sb-text-strong);font-size:var(--fs-11);font-weight:var(--fw-800)}
.wp-av img{width:100%;height:100%;object-fit:cover}
.wp-warn-t{color:var(--warning-text);font-weight:var(--fw-700)}
.wp-empty{font-size:var(--fs-13);color:var(--main-text-muted)}
.wp-docs-about{margin:-4px 0 var(--space-8)}
.wp-docs-about + .wp-line{border-top:none}
#wp-body .wp-link,.wp-foot-link{font-size:var(--fs-12);font-weight:var(--fw-700);text-decoration:none}
#wp-body .wp-link:hover,.wp-foot-link:hover{text-decoration:underline}
.wp-link-muted{color:var(--main-text-muted)}
.wp-foot-link{margin-right:auto}
.wp-chip-info{background:var(--info-dim);color:var(--info-text)}
.wp-chip-p{background:var(--purple-dim);color:var(--purple)}
/* Hours card. */
#wp-body .wp-big-row{gap:var(--space-8) var(--space-12)}
#wp-body .wp-big{font-family:'Exo 2',Lato,sans-serif;font-size:28px}
.wp-money{margin-left:auto;font-size:var(--fs-12);color:var(--main-text-muted);cursor:default}
#wp-body .wp-bars{height:96px;max-width:none;gap:var(--space-8);margin:var(--space-10) 0 var(--space-6)}
#wp-body .wp-bar{max-width:34px;border-radius:6px 6px 3px 3px;cursor:default}
#wp-body .wp-bar-ot{background:linear-gradient(to top,var(--purple) calc(100% - var(--ot,30%)),var(--orange) calc(100% - var(--ot,30%)))}
.wp-bar-plan{background:repeating-linear-gradient(45deg,var(--main-bg-sunk),var(--main-bg-sunk) 4px,transparent 4px,transparent 8px)!important;
  border:1px dashed var(--divider)}
#wp-body .wp-bar-none{background:var(--main-border)}
.wp-bar-col.is-today .wp-bar-l{color:var(--purple);font-weight:var(--fw-800)}
#wp-body .wp-bar-l{font-size:var(--fs-11);font-weight:var(--fw-700)}
#wp-body .wp-foot{display:block;border-top:none;padding-top:0;margin-top:var(--space-6);font-size:var(--fs-12)}
/* The inbox leads the tab: it is the only thing here other people wait on. */

/* Set wage modal (admin only). */
.wg-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--space-10);margin-bottom:var(--space-8)}
.wg-field{display:flex;flex-direction:column;gap:3px}
.wg-field .lbl{margin:0}
.wg-head{font-size:var(--fs-12);font-weight:var(--fw-600);color:var(--text);
  margin:var(--space-16) 0 var(--space-8);padding-top:var(--space-12);
  border-top:1px solid var(--main-border)}
.wg-row{display:grid;grid-template-columns:1.2fr .9fr .6fr 1.3fr auto;gap:var(--space-8);
  align-items:center;padding:var(--space-6) 0;border-bottom:1px solid var(--main-border);
  font-size:var(--fs-13)}
.wg-date{color:var(--text);font-variant-numeric:tabular-nums}
.wg-amt{color:var(--text);font-weight:var(--fw-600);font-variant-numeric:tabular-nums}
.wg-tag{font-size:var(--fs-11);color:var(--main-text-muted)}
.wg-by{font-size:var(--fs-11);color:var(--main-text-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Pay tab (2026-10-23): the rate in effect and the next one first, then a card
   to add a change with a preview of what it does, then the history. */
.wg-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);flex-wrap:wrap;padding:var(--space-14) var(--space-16);border:1px solid var(--main-border);border-radius:var(--radius);margin-bottom:var(--space-14)}
.wg-k{font-size:var(--fs-11);font-weight:var(--fw-800);letter-spacing:.06em;text-transform:uppercase;color:var(--main-text-muted)}
.wg-big{font-size:var(--fs-22);font-weight:var(--fw-800);color:var(--main-text);font-variant-numeric:tabular-nums}
.wg-next{padding:var(--space-10) var(--space-14);border-radius:var(--radius);background:var(--main-bg)}
.wg-next-k{font-size:var(--fs-12);font-weight:var(--fw-800);color:var(--purple)}
.wg-next-v{font-size:var(--fs-14);font-weight:var(--fw-700);color:var(--main-text)}
.wg-card{display:flex;flex-direction:column;gap:var(--space-10);padding:var(--space-14) var(--space-16);border:1px solid var(--main-border);border-radius:var(--radius)}
.wg-card-t{font-size:var(--fs-14);font-weight:var(--fw-700);color:var(--main-text)}
.wg-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-10)}
.wg-card.is-correcting{border-color:var(--purple)}
.wg-fix{justify-self:end}
.wg-card .wg-form{margin-bottom:0}
.wg-money{position:relative;display:flex}
.wg-money .inp{padding-left:22px;width:100%}
.wg-cur{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:var(--fs-14);color:var(--main-text-muted);pointer-events:none}
.wg-preview{font-size:var(--fs-14);font-weight:var(--fw-700);color:var(--main-text);padding:var(--space-10) var(--space-12);border-radius:var(--radius);background:var(--main-bg)}
.wg-card .eu-warn{margin-bottom:0}
.wg-add{align-self:flex-start}
.wg-chip{margin-left:var(--space-8);font-size:var(--fs-11);font-weight:var(--fw-800);padding:2px 8px;border-radius:999px}
.wg-chip.is-cur{background:var(--success-dim);color:var(--success-text)}
.wg-chip.is-next{background:var(--purple-dim);color:var(--purple)}

/* ── Blog admin editor (Agency Tools, litbiz only) ─────────────────────── */
.blog-toolbar{display:flex;gap:var(--space-4);flex-wrap:wrap;padding:var(--space-6);background:var(--subnav-bar);border:1px solid var(--main-border);border-bottom:none;border-radius:var(--radius) var(--radius) 0 0}
.blog-toolbar button{border:1px solid var(--main-input-border);background:var(--main-card);border-radius:var(--radius-sm);padding:var(--space-4) var(--space-10);font-size:var(--fs-13);cursor:pointer;color:var(--main-text)}
.blog-toolbar button:hover{background:var(--main-card-hover)}
.blog-body-editor{min-height:340px;max-height:60vh;overflow-y:auto;background:var(--main-card);border:1px solid var(--main-input-border);border-radius:0 0 var(--radius) var(--radius);padding:var(--space-16);font-size:var(--fs-14);line-height:var(--lh-17);color:var(--main-text)}
.blog-body-editor:focus:not(:focus-visible){outline:none;box-shadow:var(--focus-ring)}
.blog-body-editor img{max-width:100%;border-radius:var(--radius-sm)}
.blog-body-editor h2{font-size:var(--fs-20);margin:var(--space-16) 0 var(--space-8)}
.blog-body-editor h3{font-size:var(--fs-16);margin:var(--space-12) 0 var(--space-6)}
.blog-body-editor p{margin-bottom:var(--space-10)}
.blog-body-editor ul,.blog-body-editor ol{padding-left:var(--space-24);margin-bottom:var(--space-10)}

/* ── LitBiz SOP work queue (165-litbiz-sop.js) ──────────────────────────────
   Replaces the iframed sop-tracker.html. Tokens only, no raw hex: the status
   colours reuse the same success/warning/danger tokens the rest of the app
   uses, so the queue reads correctly in both themes. */

.ls-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
@media(max-width:900px){.ls-stats{grid-template-columns:repeat(2,1fr)}}
.ls-stat{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:14px 16px;box-shadow:var(--shadow-sm)}
.ls-stat-val{font-family:'Exo 2',sans-serif;font-size:26px;font-weight:800;color:var(--main-text);line-height:1}
.ls-stat-val.good{color:var(--success)}
.ls-stat-val.warn{color:var(--warning)}
.ls-stat-val.bad{color:var(--danger)}
.ls-stat-lbl{font-size:11px;color:var(--main-text-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:6px;font-weight:600}

.ls-week{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);height:640px;overflow-y:auto}
.ls-week .ls-empty{border:none;background:none;height:100%;display:flex;flex-direction:column;justify-content:center}
.ls-day-hdr{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--main-bg);border-bottom:1px solid var(--main-border);font-family:'Exo 2',sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--main-text-muted)}
.ls-day-hdr.overdue{color:var(--danger)}
.ls-day-hdr.delayed{color:var(--warning)}
.ls-day-n{margin-left:auto;font-size:11px;font-weight:700;color:var(--main-text-muted)}
.ls-rowact{flex-shrink:0;white-space:nowrap;align-self:center;width:88px;text-align:right}

.ls-task.counted{align-items:center;position:relative;padding-top:17px}
.ls-task.counted .ls-check{margin-top:0}
.ls-count-bar{position:absolute;top:2px;left:0;right:0;height:5px;background:var(--main-bg);overflow:hidden}
.ls-count-fill{height:100%;background:var(--purple);transition:width .2s}
.ls-count-fill.complete{background:var(--success)}
.ls-sched{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.ls-sched-lbl{font-size:12px;font-weight:600;color:var(--main-text)}
.ls-sched-input{width:auto}
.ls-plus1{background:var(--purple);border:1px solid var(--purple);border-radius:var(--radius);color:#fff;font-family:Lato,sans-serif;font-size:12px;font-weight:700;padding:6px 11px;cursor:pointer;transition:opacity .15s}
.ls-plus1:hover{opacity:.85}
.ls-plus1:focus-visible{outline:none;box-shadow:var(--focus-ring)}

.ls-task{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-bottom:1px solid var(--divider)}
.ls-task:last-child{border-bottom:none}
.ls-task.done .ls-task-label{text-decoration:line-through;color:var(--main-text-muted)}
.ls-task.late{background:var(--danger-dim)}
.ls-task-main{flex:1;min-width:0}
.ls-task-label{font-size:14px;font-weight:600;color:var(--main-text);line-height:1.4}
.ls-task-why{font-size:12px;color:var(--main-text-muted);line-height:1.45;margin-top:3px}
.ls-task-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}

.ls-check{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;cursor:pointer}
.ls-check input{position:absolute;opacity:0;width:20px;height:20px;margin:0;cursor:pointer}
.ls-check-box{width:20px;height:20px;border:2px solid var(--main-input-border);border-radius:var(--radius-sm);background:var(--main-input);transition:all .15s}
.ls-check input:checked + .ls-check-box{background:var(--success);border-color:var(--success)}
.ls-check input:checked + .ls-check-box::after{content:'';position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ls-check input:focus-visible + .ls-check-box{box-shadow:var(--focus-ring)}

.ls-chip{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--radius-full);background:var(--main-bg);border:1px solid var(--main-border);color:var(--main-text-muted);white-space:nowrap}
.ls-chip-client{background:var(--purple-soft);border-color:var(--purple-border);color:var(--purple)}
.ls-chip-late{background:var(--danger-dim);border-color:var(--danger);color:var(--danger-text)}
.ls-chip-warn{background:var(--warning-dim);border-color:var(--warning);color:var(--warning-text)}
.ls-k-contractual{background:var(--info-dim);color:var(--info-text)}
.ls-k-needle{background:var(--success-dim);color:var(--success-text)}
.ls-k-hygiene{background:var(--main-bg);color:var(--main-text-muted)}
.ls-k-dep{background:var(--warning-dim);color:var(--warning-text)}

.ls-prog{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ls-prog-input{width:56px;background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);color:var(--main-text);padding:5px 7px;font-family:Lato,sans-serif;font-size:13px;text-align:center;outline:none}
.ls-prog-of{font-size:12px;color:var(--main-text-muted);white-space:nowrap}

.ls-empty{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:44px 24px;text-align:center}
.ls-empty-title{font-family:'Exo 2',sans-serif;font-size:17px;font-weight:700;color:var(--main-text);margin-bottom:6px}
.ls-empty-sub{font-size:13px;color:var(--main-text-muted);margin-bottom:16px;max-width:460px;margin-left:auto;margin-right:auto;line-height:1.5}
.ls-note{font-size:12px;color:var(--main-text-muted);line-height:1.5;background:var(--main-bg);border:1px solid var(--main-border);border-radius:var(--radius);padding:10px 12px;margin:10px 0}
.ls-cat-task{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--divider)}
.ls-cat-task:last-child{border-bottom:none}
.ls-cat-task-main{flex:1;min-width:0}

.ls-modal-backdrop{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:var(--z-app-modal);padding:20px}
.ls-modal{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.ls-modal-hdr{padding:15px 18px;border-bottom:1px solid var(--main-border);font-family:'Exo 2',sans-serif;font-size:15px;font-weight:700;color:var(--main-text)}
.ls-modal-body{padding:16px 18px;overflow-y:auto}
.ls-modal-foot{padding:13px 18px;border-top:1px solid var(--main-border);display:flex;justify-content:flex-end;gap:8px}
.ls-lbl{display:block;font-size:11px;font-weight:700;color:var(--main-text-muted);text-transform:uppercase;letter-spacing:.07em;margin:12px 0 5px}
.ls-input{width:100%;background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);color:var(--main-text);padding:9px 11px;font-family:Lato,sans-serif;font-size:14px;outline:none}
.ls-input:focus{border-color:var(--purple);box-shadow:var(--focus-ring)}
.ls-cbrow{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--main-text);padding:4px 0;cursor:pointer}

/* ── SOP catalog editor (modal) ─────────────────────────────────────────── */

.ls-modal-wide{max-width:1080px;height:86vh}
.ls-modal-hdr{display:flex;align-items:center;gap:10px}
.ls-x{margin-left:auto;background:none;border:none;color:var(--main-text-muted);font-size:15px;cursor:pointer;padding:2px 6px;border-radius:var(--radius-sm)}
.ls-x:hover{background:var(--main-bg);color:var(--main-text)}
.ls-cat-loading{padding:40px;text-align:center;color:var(--main-text-muted)}

.ls-cat-body{display:grid;grid-template-columns:238px 1fr;flex:1;min-height:0}
.ls-cat-left{border-right:1px solid var(--main-border);display:flex;flex-direction:column;min-height:0;background:var(--main-bg)}
.ls-cat-left-hdr{padding:11px 14px;font-size:11px;font-weight:700;color:var(--main-text-muted);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--main-border)}
.ls-cat-list{flex:1;overflow-y:auto;padding:6px}
.ls-cat-row{display:flex;align-items:stretch;gap:2px}
.ls-cat-row .ls-cat-item{flex:1;min-width:0;width:auto}
.ls-cat-arrows{display:flex;flex-direction:column;justify-content:center}
.ls-cat-arrow{background:none;border:none;color:var(--main-text-muted);cursor:pointer;font-size:8px;line-height:1;padding:2px 5px;border-radius:var(--radius-sm)}
.ls-cat-arrow:hover:not(:disabled){background:var(--main-card-hover);color:var(--main-text)}
.ls-cat-arrow:disabled{opacity:.25;cursor:default}
.ls-cat-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:none;border-radius:var(--radius);padding:8px 10px;font-family:Lato,sans-serif;font-size:13px;color:var(--main-text);cursor:pointer}
.ls-cat-item:hover{background:var(--main-card-hover)}
.ls-cat-item.active{background:var(--purple-soft);color:var(--purple);font-weight:700}
.ls-cat-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ls-cat-item-n{font-size:11px;font-weight:700;color:var(--main-text-muted)}
.ls-cat-item.active .ls-cat-item-n{color:var(--purple)}
.ls-cat-left-foot{display:flex;flex-direction:column;gap:5px;padding:10px;border-top:1px solid var(--main-border)}

.ls-cat-right{overflow-y:auto;padding:16px 20px;min-height:0}
.ls-cat-title-row{display:flex;align-items:center;gap:10px}
.ls-cat-title{flex:1;background:none;border:1px solid transparent;border-radius:var(--radius);color:var(--main-text);font-family:'Exo 2',sans-serif;font-size:18px;font-weight:700;padding:5px 8px;outline:none}
.ls-cat-title:hover{border-color:var(--main-border)}
.ls-cat-title:focus{border-color:var(--purple);background:var(--main-input)}
.ls-cat-desc-input{width:100%;background:none;border:1px solid transparent;border-radius:var(--radius);color:var(--main-text-muted);font-family:Lato,sans-serif;font-size:13px;padding:5px 8px;margin-top:2px;outline:none}
.ls-cat-desc-input:hover{border-color:var(--main-border)}
.ls-cat-desc-input:focus{border-color:var(--purple);background:var(--main-input);color:var(--main-text)}

.ls-cat-sec{margin-top:18px}
.ls-cat-sec-hdr{display:flex;align-items:center;gap:8px;padding-bottom:6px;border-bottom:1px solid var(--main-border)}
.ls-cat-sec-name{font-family:'Exo 2',sans-serif;font-size:12px;font-weight:700;color:var(--purple);text-transform:uppercase;letter-spacing:.08em}
.ls-cat-sec-n{font-size:11px;font-weight:700;color:var(--main-text-muted)}
.ls-addtask{margin-left:auto;background:none;border:none;color:var(--purple);font-family:Lato,sans-serif;font-size:12px;font-weight:600;cursor:pointer;padding:2px 4px}
.ls-addtask:hover{text-decoration:underline}
.ls-cat-none{font-size:12px;color:var(--main-text-muted);padding:9px 0;font-style:italic}
.ls-cat-task-acts{display:flex;gap:8px;flex-shrink:0;align-items:flex-start;padding-top:2px}
.ls-linkbtn{background:none;border:none;color:var(--purple);font-family:Lato,sans-serif;font-size:12px;font-weight:600;cursor:pointer;padding:2px 3px}
.ls-linkbtn:hover{text-decoration:underline}
.ls-linkbtn.danger{color:var(--danger-text)}

.ls-tform{background:var(--main-bg);border:1px solid var(--purple-border);border-radius:var(--radius);padding:12px 14px;margin:8px 0}
.ls-tform-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ls-tform-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.ls-kindhint{font-size:11px;color:var(--main-text-muted);margin-top:5px;line-height:1.45}

@media(max-width:820px){
  .ls-cat-body{grid-template-columns:1fr}
  .ls-cat-left{border-right:none;border-bottom:1px solid var(--main-border);max-height:170px}
  .ls-tform-row{grid-template-columns:1fr}
}

/* ── Agency dashboard: work queue left, tools right ─────────────────────────
   The queue is the thing you work out of all day and the tools are a set of
   links you reach for occasionally, so they get a sidebar rather than a full
   row of large cards competing with it. Services and Tiers stays full width
   underneath, since it is reference material. */
.at-dash-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:34px;align-items:start}
.at-dash-main{min-width:0}
.at-dash-side{min-width:0}

@media(max-width:1180px){
  .at-dash-grid{grid-template-columns:1fr;gap:0}
  .at-actions{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .at-actions{grid-template-columns:1fr}
}

/* Agency quick actions. Replaced the tool cards that linked out to the
   standalone /litbiz/*.html report builders. Stacked buttons rather than cards
   with descriptions: each is one action with an obvious name, and the sidebar
   column is a quarter of the width. */
.at-actions{display:grid;grid-template-columns:1fr;gap:12px}
.at-action{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:14px 16px;font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;color:var(--main-text);cursor:pointer;transition:border-color .15s,background .15s;box-shadow:var(--shadow-sm)}
.at-action:hover{border-color:var(--purple);background:var(--main-card-hover)}
.at-action:focus-visible{outline:none;border-color:var(--purple);box-shadow:var(--focus-ring)}
.at-action-icon{font-size:17px;line-height:1;flex-shrink:0}
.at-action-name{flex:1;min-width:0}

/* ── SOPs tab in the contact drawer ─────────────────────────────────────── */
.ls-sop-loading{padding:30px 10px;text-align:center;font-size:13px;color:var(--main-text-muted)}
.ls-sop-list{margin-top:8px}
.ls-sop-row{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--main-border);border-radius:var(--radius);margin-bottom:7px;background:var(--main-card)}
.ls-sop-main{flex:1;min-width:0}
.ls-sop-name{font-size:13px;font-weight:600;color:var(--main-text)}
.ls-sop-meta{font-size:11px;color:var(--main-text-muted);margin-top:2px;line-height:1.45}
.ls-sop-linked{display:flex;align-items:baseline;gap:9px;padding:9px 12px;border:1px solid var(--main-border);border-radius:var(--radius);background:var(--main-card)}
.ls-sop-linked-name{font-size:13px;font-weight:600;color:var(--main-text)}
.ls-sop-start{display:flex;align-items:center;gap:7px;margin-top:6px}
.ls-sop-startlbl{font-size:11px;color:var(--main-text-muted);text-transform:uppercase;letter-spacing:.06em}
.ls-sop-startinput{background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);color:var(--main-text);padding:4px 8px;font-family:Lato,sans-serif;font-size:12px;outline:none}
.ls-sop-startinput:focus{border-color:var(--purple);box-shadow:var(--focus-ring)}
.ls-sop-none{font-size:13px;color:var(--main-text-muted);padding:14px 0}
.ls-sop-picker{border:1px solid var(--purple-border);border-radius:var(--radius);padding:11px 12px;margin:8px 0;background:var(--main-bg)}
.ls-sop-picker-foot{display:flex;justify-content:flex-end;gap:7px;margin-top:9px}
.ls-sop-fields{margin-top:6px}

/* margin-top: the split links row sat right on this rule (2026-10-09). */
.tp-summary{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:8px 2px;font-size:13px;color:var(--main-text-muted);border-top:1px solid var(--main-border)}
.tp-summary strong{font-family:'Exo 2',sans-serif;font-size:18px;color:var(--main-text)}
.tp-summary.due strong{color:var(--orange)}
.tp-summary.ok strong{color:var(--success-light)}
.tp-row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-bottom:8px}
.tp-row label{display:block;font-size:11px;font-weight:600;color:var(--main-text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.tp-inp{width:100%;background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);color:var(--main-text);padding:9px 12px;font-size:14px;outline:none;box-sizing:border-box}
.tp-note{font-size:12px;color:var(--main-text-muted)}
.tp-err{font-size:12px;color:var(--danger-light);min-height:16px;margin-top:4px}
@media (max-width:860px){.pos-grid{grid-template-columns:1fr}}
/* Tender panel, single-or-split redesign (2026-09-02) */
.tp-lbl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--main-text-muted);margin:10px 0 6px}
.tp-seg{margin-bottom:0;flex-wrap:wrap}.tp-card-box{position:relative;min-height:56px}.tp-loading{position:absolute;inset:0;display:flex;align-items:center;padding:0 12px;font-size:12px;color:var(--main-text-muted);pointer-events:none}.tp-body{min-height:196px;display:flex;flex-direction:column}.tp-body-foot{margin-top:auto;padding-top:10px}.tp-seg .tip-btn{min-width:88px}
.tp-sub{border:1px solid var(--main-border);border-radius:var(--radius);padding:12px;background:var(--main-input);margin-top:10px}
/* The box hugs its card form (2026-10-09): the form's own bottom margin and an
   empty error line padded ~32px under the field. .tp-body still reserves the
   panel's height, so an error appearing never moves the Split link or Charge.
   Inside the panel the card form is not a box of its own: Square's field and
   the Authorize.net inputs carry their own borders, so a bordered wrapper made
   three nested boxes where every other method has two. Dropping its padding
   and border also gives Square 26px more width, which keeps it on its one-row
   layout (Square goes two-row at 505px or narrower). */
.tp-sub .sq-card-form{margin-bottom:0;padding:0;border:0;background:none;min-height:48px}
.tp-sub .tp-err:empty{min-height:0;margin-top:0}
/* Square writes its own validation line (.sq-card-message) under the field, in
   our DOM, and reserves 43px for it while empty (11px margins and a 21px line):
   the band under the card input on every checkout (2026-10-10). Empty, it
   goes; Square fills it on an error and it comes back. */
.tp-sub .sq-card-message:empty{display:none}
/* No in-panel Charge (166 tp-body-fit): Split follows the content, the reserve
   stays as space below it. The reserve is the tallest single method (Card,
   117px measured in Sell a Gift Card; Cash, Check and Other 103-104), not the
   196px a Charge button needs: the full one left 79px empty under Split and
   scrolled the modal with nothing under it (2026-10-10). Switching methods
   still never jumps; Split and saved-card tiles grow it, as picked. */
.tp-body.tp-body-fit{min-height:120px}
.tp-body.tp-body-fit>.tp-body-foot{margin-top:0}
.tp-gc{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--purple-dim);border:1px solid var(--purple-border);border-radius:var(--radius);padding:9px 12px;font-size:13px;color:var(--main-text)}
.tp-gc b{color:var(--main-text)}
/* The Card choices as tiles (_tpCardPickerHTML): saved cards, a new card, readers. */
.tp-card-tiles{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.tp-card-tile{display:flex;align-items:center;gap:8px;width:100%;min-height:38px;padding:7px 12px;border:1px solid var(--main-border);border-radius:var(--radius);background:var(--main-card);font-family:inherit;text-align:left;cursor:pointer}
.tp-card-tile:hover{border-color:var(--purple-border)}
.tp-card-tile.is-on{border:1.5px solid var(--purple);background:var(--purple-dim)}
.tp-card-tile:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.tp-card-tile-b{font-size:14px;font-weight:700;color:var(--main-text)}
.tp-card-tile-s{font-size:12px;color:var(--main-text-muted)}
.tp-card-tile-ok{width:18px;height:18px;margin-left:auto;flex-shrink:0;color:var(--purple)}
/* An expired saved card: shown so staff see why, never selectable (166 _tpCardExpired). */
.tp-card-tile.is-expired,.tp-card-tile.is-expired:hover{opacity:.55;cursor:not-allowed;border-color:var(--main-border)}
.tp-card-tile.is-expired .tp-card-tile-s{color:var(--danger-text)}
/* Group checkout (033 _apptGroupPayBodyHTML): how the visit is paid, then who. */
.pay-seg{display:flex;padding:3px;margin-bottom:14px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:var(--radius-full)}
.pay-seg-opt{flex:1;padding:7px 10px;border:none;border-radius:var(--radius-full);background:transparent;font-family:inherit;font-size:13px;font-weight:700;color:var(--main-text-muted);cursor:pointer}
.pay-seg-opt:hover{color:var(--main-text)}
.pay-seg-opt.is-on{background:var(--purple);color:var(--on-accent)}
.pay-who-lbl{margin:2px 0 8px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted)}
.pay-who-list{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.pay-who{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:1px solid var(--main-border);border-radius:var(--radius-md);background:var(--main-card);font-family:inherit;text-align:left;color:var(--main-text)}
button.pay-who{cursor:pointer}
button.pay-who:hover{border-color:var(--purple-border)}
.pay-who.is-on{border:1.5px solid var(--purple);background:var(--purple-dim);cursor:default}
.pay-who-av{width:30px;height:30px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--purple-dim);color:var(--purple);font-size:11px;font-weight:800}
.pay-who.is-on .pay-who-av{background:var(--main-card)}
.pay-who-main{flex:1;min-width:0;display:flex;flex-direction:column}
.pay-who-n{font-size:14px;font-weight:700}
.pay-who-s{font-size:11.5px;color:var(--main-text-muted)}
.pay-who-r{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.pay-who-amt{font-size:14px;font-weight:700}
.pay-who-chip{font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:var(--radius-full)}
.pay-who-chip.is-paid{background:var(--success-dim);color:var(--success-text)}
.pay-collect{display:flex;justify-content:center;width:100%;padding:11px;font-size:15px;font-weight:700}
.pay-who-sum{display:flex;justify-content:space-between;margin-top:10px;padding:0 2px;font-size:12px;color:var(--main-text-muted)}
.pay-addmore{display:flex;justify-content:center;width:100%;margin-bottom:18px}
.tp-link{color:var(--purple-light);font-size:13px;font-weight:700;cursor:pointer}
#sq-status-label .tp-link{font-size:inherit}
.tp-lines{display:flex;flex-direction:column;gap:10px}
.tp-line{border:1px solid var(--main-border);border-radius:var(--radius);padding:10px;background:var(--main-bg)}
.tp-line-row{display:grid;grid-template-columns:1fr 120px 32px;gap:8px;align-items:center}
.tp-line .tp-sub{margin-top:8px}
.tp-amt{text-align:right}
.tp-amt[readonly]{background:var(--main-bg);color:var(--main-text-muted);cursor:default}
.tp-rest-note{margin-top:4px;text-align:right}
.tp-orphan-new{margin-top:6px;text-align:center}
.tp-note.tp-why-err{color:var(--danger-text)}
button.tp-link{background:none;border:none;padding:0;font-family:inherit}
.pos-text-btn{background:none;border:none;padding:0;font-family:inherit;cursor:pointer;color:var(--purple-light)}
button.tp-link:focus-visible,.pos-text-btn:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:var(--radius-sm)}
.tp-x{background:none;border:none;color:var(--danger-light);font-size:22px;font-weight:800;cursor:pointer;line-height:1;padding:0}
@media (max-width:520px){.tp-line-row{grid-template-columns:1fr 96px 28px}}

/* ── Block Time multi-staff picker (js/033): pills + an add dropdown ────── */
.tbs-box{display:flex;flex-direction:column;gap:8px;padding:10px 12px;background:var(--bg-input);border:1px solid var(--main-input-border);border-radius:var(--radius)}
.tbs-pills{display:flex;flex-wrap:wrap;gap:6px}
.tbs-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 10px 7px 12px;border-radius:999px;background:var(--purple);color:var(--main-text);font-size:13px;font-weight:600;max-width:100%}
.tbs-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Background and label color are set inline from the staff member's own
   calendar color (js/033), so the x inherits the computed label color rather
   than assuming one. */
.tbs-pill-x{background:none;border:none;color:inherit;opacity:.7;font-size:16px;line-height:1;cursor:pointer;padding:0 2px}
.tbs-pill-x:hover{opacity:1}
.tbs-pill.locked{box-shadow:inset 0 0 0 1px var(--main-border)}
.tbs-empty{font-size:12px;color:var(--main-text-muted)}
.tbs-add{width:100%;background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);color:var(--main-text);padding:9px 12px;font-size:13px;outline:none}
.tbs-count{font-size:11px;font-weight:600;color:var(--main-text-muted);text-transform:none;letter-spacing:0}
.tbs-scope{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--main-text);text-transform:none;letter-spacing:0;cursor:pointer}
.tbs-scope input{width:auto;margin:0;cursor:pointer}
/* END OF DAY REPORT (167-end-of-day.js). Tokens only; print rules show the
   report alone under body.eod-printing (eodPrint clones it into #eod-print-root). */
.eod-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.eod-title{font-size:18px;font-weight:var(--fw-700);color:var(--main-text)}
.eod-sub{font-size:12px;color:var(--main-text-muted);margin-top:2px}
.eod-actions{display:flex;gap:8px}
.eod-warn{background:var(--warning-dim);color:var(--warning-text);border:1px solid var(--warning);border-radius:var(--radius);padding:8px 12px;font-size:12px;margin-bottom:14px}
.eod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
/* The seven summary cards on one row wherever the report has the room (the
   register dialog at its 1280px width, the Reporting tab on most monitors),
   instead of six and a lone Tips card underneath. */
.eod-report{container:eodrep/inline-size}
@container eodrep (min-width:900px){
  .eod-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
  .eod-grid .eod-card{padding:12px 14px}
  /* Sized to the report, so $12,345.67 fits a card down to 900px wide. */
  .eod-grid .eod-kpi .eod-val{font-size:clamp(16px,1.8cqi,20px)}
}
.modal.eod-modal{max-width:min(1280px,96vw)}
.eod-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:14px 16px;box-shadow:var(--shadow-sm)}
.eod-kpi .eod-val{font-size:22px;font-weight:var(--fw-700);color:var(--main-text);margin-top:4px}
.eod-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--main-text-muted);font-weight:var(--fw-700)}
.eod-note{font-size:11px;color:var(--main-text-muted);margin-top:3px}
.eod-two{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
@media (max-width:900px){.eod-two{grid-template-columns:1fr}}
.eod-stack{display:flex;flex-direction:column;gap:12px}
.eod-card-title{font-size:13px;font-weight:var(--fw-700);color:var(--main-text);margin-bottom:10px}
.eod-table td,.eod-table th{padding:8px 10px}
.eod-r{text-align:right;white-space:nowrap}
/* .rpt-table th sets text-align:left and outranks .eod-r alone, so the
   Count and Gross headings sat left of their right-aligned figures. */
.eod-table th.eod-r{text-align:right}
.eod-neg{color:var(--orange)}
/* The close-out line at the top of End of Day (4d): open, closed, or changed since close. */
.eod-close{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);padding:10px 14px;margin-bottom:14px;font-size:13px;color:var(--main-text)}
/* Money In and Applied From Prepaid subtotals in Collected by method. */
.eod-sub-row td{font-weight:700;color:var(--main-text-muted);border-bottom:1px solid var(--main-border)}
.eod-muted{color:var(--main-text-muted);font-size:11px;font-weight:var(--fw-400)}
.eod-empty{font-size:13px;color:var(--main-text-muted)}
.eod-line{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-bottom:1px solid var(--main-border);color:var(--main-text)}
.eod-line:last-child{border-bottom:none}
.eod-line.eod-total{font-weight:var(--fw-700);border-top:1px solid var(--main-border);margin-top:4px;padding-top:8px}
.eod-det{margin-top:4px;font-size:11px;color:var(--main-text-muted)}
.eod-det summary{cursor:pointer}
.eod-det-list{margin-top:6px}
.eod-det-row{display:grid;grid-template-columns:70px 1fr auto;gap:10px;padding:3px 0;color:var(--main-text)}
.eod-foot{margin-top:6px;padding-top:12px;border-top:1px solid var(--main-border);font-size:11px;line-height:1.6;color:var(--main-text-muted)}
.eod-foot-title{font-weight:var(--fw-700);text-transform:uppercase;letter-spacing:.05em;font-size:10px;margin-bottom:4px}
#eod-print-root{display:none}
.eod-print-biz{font-size:14px;font-weight:var(--fw-700);color:var(--main-text);margin-bottom:6px}
@media print{
  body.eod-printing>*:not(#eod-print-root){display:none!important}
  body.eod-printing{background:var(--main-card)}
  body.eod-printing #eod-print-root{display:block;padding:12px;color:var(--main-text);background:var(--main-card)}
  #eod-print-root .eod-noprint{display:none}
  #eod-print-root .eod-card{box-shadow:none;break-inside:avoid}
  #eod-print-root .eod-two{grid-template-columns:1fr 1fr}
  @page{size:letter;margin:.6in}
}
/* Tender panel cash line: cash received + change due (166) */
.tp-cash-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tp-cash-row .tp-cash{width:120px;flex:none;height:36px}
.tp-change{margin-left:auto;min-height:18px;font-size:13px;font-weight:var(--fw-700);color:var(--main-text-muted);padding:4px 10px;border-radius:var(--radius);white-space:nowrap}
.tp-change:empty{display:none}
/* Square Terminal: the wait under a "Send to reader" line. Fits the 196px .tp-body reserve. */
.tp-wait{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px;border:1px solid var(--purple-border);background:var(--purple-dim);border-radius:var(--radius)}
.tp-wait-title{font-size:11px;font-weight:var(--fw-700);text-transform:uppercase;letter-spacing:.06em;color:var(--purple-light)}
.tp-wait-title::after{content:'…';display:inline-block;animation:tp-wait-dots 1.2s steps(4,end) infinite;width:14px;text-align:left}
@keyframes tp-wait-dots{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
.tp-wait-amt{font-family:'Exo 2',sans-serif;font-size:22px;font-weight:var(--fw-800);color:var(--main-text);line-height:1.1}
.tp-wait .btn{margin-top:4px}
/* Settings > Payments > Readers: the status dot before Online / Offline / Pairing. */
.sq-reader-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--main-text-muted);vertical-align:middle}
.sq-reader-dot.ni-success{background:var(--success-light)}
.sq-reader-dot.ni-warn{background:var(--orange)}
.sq-reader-dot.ni-alert{background:var(--danger-light)}
.tp-change.due{background:var(--success-dim);color:var(--success-text)}
.tp-change.short{background:var(--danger-dim);color:var(--danger-text)}

/* A table body refetching its rows: keep them visible, dimmed, until the new rows land. */
.is-refreshing{opacity:.6;pointer-events:none;transition:opacity .15s}

/* Dashboard setup checklist */
.dash-setup{margin-bottom:12px}
/* One-line banner (Sep 2026); the list opens on demand. */
.dash-setup-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dash-setup-head .dash-card-title{margin:0}
.dash-setup-head .dash-setup-bar{flex:1 1 120px;min-width:120px;max-width:260px;margin:0}
.dash-setup-head .dash-setup-count{margin-left:0}
.dash-setup-next{margin-left:auto;background:var(--purple-dim);border:1px solid var(--purple-border);border-radius:var(--radius);padding:6px 12px;font:700 12.5px Lato,sans-serif;color:var(--purple);cursor:pointer;max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-setup-next:hover{background:var(--purple);color:var(--sb-text-strong)}
.dash-setup-list{margin-top:10px;border-top:1px solid var(--main-border);padding-top:6px}
.dash-setup .dash-card-title-row{display:flex;align-items:center;gap:12px}
.dash-setup-count{margin-left:auto;font-size:12px;color:var(--main-text-muted)}
.dash-setup-bar{height:6px;border-radius:3px;background:var(--main-border);margin:10px 0 12px;overflow:hidden}
.dash-setup-fill{height:100%;background:var(--purple);border-radius:3px;transition:width .3s}
.dash-setup-row{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px}
.dash-setup-mark{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--main-border);display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;color:var(--success-text)}
.dash-setup-row.done .dash-setup-mark{border-color:var(--success-text);background:var(--success-dim)}
.dash-setup-row.done .dash-setup-label{color:var(--main-text-muted);text-decoration:line-through}
.dash-setup-link{background:none;border:0;padding:0;font:inherit;color:var(--purple);cursor:pointer;text-align:left}
.dash-setup-link:hover{text-decoration:underline}

/* Keyboard focus ring. The rules above that clear the outline do so for
   pointer focus only (:focus:not(:focus-visible)); keyboard focus keeps this
   ring everywhere. Listed elements outrank a bare class rule, and this comes
   last, so a class rule that clears outline on every state loses to it. */
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,[tabindex]:focus-visible,[contenteditable]:focus-visible{outline:2px solid var(--purple-light);outline-offset:2px}

/* Motion is decoration here. Honor the OS setting. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Waitlist tab (168-waitlist-tab.js) */
.wl-toolbar-sub{font-size:12px;color:var(--main-text-muted)}
.wl-empty{padding:40px;text-align:center;color:var(--main-text-muted);font-size:13px;max-width:520px;margin:0 auto}
.wl-empty-title{font-size:14px;font-weight:600;margin-bottom:4px;color:var(--main-text)}
.wl-sub{font-size:11px;color:var(--main-text-muted);margin-top:2px}
.wl-name{color:var(--main-text);font-weight:600;text-decoration:none}
.wl-name:hover{text-decoration:underline}
.wl-pill{display:inline-block;padding:2px 8px;border-radius:var(--radius-full);font-size:10px;font-weight:700;letter-spacing:.05em}
.wl-pill-waiting{background:var(--purple-dim);color:var(--purple-light);border:1px solid var(--purple-border)}
.wl-pill-offered{background:var(--orange-dim);color:var(--orange-text);border:1px solid var(--orange-border)}
.wl-pill-queued{background:var(--info-dim);color:var(--info-text);border:1px solid var(--info-dim)}
.wl-pill-done{background:var(--main-card);color:var(--main-text-muted);border:1px solid var(--main-border)}
.wl-actions{white-space:nowrap;text-align:right}
.wl-remove{color:var(--orange-text)}
.wl-help{font-size:13px;color:var(--main-text-muted);margin:0 0 12px}
.wl-picked{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding:6px 0}
/* Offer a Time: real open times from the booking page's availability. */
.wl-offer-req{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);padding:10px 12px;margin-bottom:14px}
.wl-offer-req-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.wl-offer-req-name{font-size:13.5px;font-weight:700;color:var(--main-text)}
.wl-offer-daterow{display:flex;gap:8px;align-items:center}
.wl-offer-daterow input{flex:1;min-width:0}
.wl-offer-daterow .btn{white-space:nowrap;color:var(--purple);border-color:var(--purple-border)}
.wl-offer-note{margin:0 0 12px;min-height:14px}
.wl-offer-times{min-height:48px}
.wl-slot-label{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted);margin:0 0 6px}
.wl-slot-grid{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.wl-slot{font-size:13px;line-height:1.25;padding:7px 12px;border:1px solid var(--main-border);border-radius:var(--radius);background:var(--main-card);color:var(--main-text);cursor:pointer;text-align:left;font-family:inherit}
.wl-slot small{display:block;font-size:11px;color:var(--main-text-muted)}
.wl-slot:hover{border-color:var(--purple-border)}
.wl-slot.is-outside{border-style:dashed;color:var(--main-text-muted)}
.wl-slot.is-selected{background:var(--purple-dim);border:1px solid var(--purple);color:var(--purple)}
.wl-slot.is-selected small{color:var(--purple)}
.wl-offer-foot{border-top:1px solid var(--main-border);padding-top:10px;margin:4px 0 0;font-size:12px}
.wl-offer-sum{margin-right:auto;font-size:13px;color:var(--main-text-muted)}
@media (max-width:600px){.wl-offer .form-row{grid-template-columns:1fr}}

/* Recurring appointments (169-recurring-appointments.js) */
.appt-repeat-toggle-row{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border:1px solid var(--main-border);border-radius:var(--radius);background:var(--main-card)}
.appt-repeat-toggle-row .bh-toggle{margin-top:2px}
.appt-repeat-title{font-size:13px;font-weight:600;color:var(--main-text)}
.appt-repeat-help{font-size:11px;color:var(--main-text-muted);margin-top:4px;line-height:1.45}
.appt-repeat-details{margin-top:10px;padding:0 2px}
.appt-repeat-details .form-row-3{margin-bottom:0}
.appt-series-note{font-size:12px;color:var(--main-text-muted);background:var(--purple-dim);border:1px solid var(--purple-border);border-radius:var(--radius);padding:8px 10px;margin:0 0 10px}
.appt-skipped{font-size:13px;line-height:1.7;padding:6px 10px;border:1px solid var(--main-border);border-radius:var(--radius);background:var(--main-card)}

/* Unrouted inbound email: a message that reached a clinic address but could not
   be matched to a patient. Borrows the conversation panes, so it reuses their
   spacing rather than inventing a second layout. */
/* Two things would clip the contact dropdown, which is absolutely positioned and
   opens downward past whatever box contains it. overflow-y here made this pane a
   scroll container sized to its own content, cutting the dropdown and the
   attachments notice with it. Growing the pane to fill the thread instead is no
   better: it pushes the picker to the bottom, where .conv-main's overflow:hidden
   does the same thing. So the pane stays content-sized and does not scroll, which
   leaves slack underneath for the dropdown to open into. unrouted-body keeps its
   own max-height and scrollbar, so a long email still cannot run the pane off
   the screen. */
.unrouted-detail { padding: 20px; }
.unrouted-head { border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 14px; }
.unrouted-subject { font-size: 15px; font-weight: 600; color: var(--main-text); }
.unrouted-meta { font-size: 12px; color: var(--main-text-muted); margin-top: 4px; }
.unrouted-body {
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.6;
  color: var(--main-text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  max-height: 340px;
  overflow-y: auto;
}
.unrouted-actions { margin-top: 18px; }
.unrouted-pick-label { font-size: 13px; font-weight: 600; color: var(--main-text); margin-bottom: 8px; }
.unrouted-warn {
  margin-top: 16px;
  font-size: 12px;
  color: var(--main-text-muted);
  border-left: 3px solid var(--border);
  padding-left: 10px;
}

/* ============================================================
   STATUS CHIPS, DANGER BANNER, PANE SPINNER

   Six names that were written expecting a rule that never landed, found by
   check-css-class-defined.js and carried in its baseline until now. They are
   Bootstrap names in a repo that has no Bootstrap: someone reached for muscle
   memory, the class matched nothing, and the element quietly rendered with
   whatever it inherited. Same root cause as the class="form-input" selects.

   Each rule is written so the element stands on its own. Where a call site
   also sets an inline style (.alert-danger does), the inline declaration still
   wins; these rules supply what it never set, and would carry the element on
   their own if that attribute were dropped.

   .badge and .pill are the same idiom in two panels, so they share a rule. Both
   are deliberately generic names: as of this commit each appears on exactly one
   surface (blog admin, memberships), and a third caller gets this look for free,
   which is the point. Neither is a layout primitive; keep them to status text.
   ============================================================ */

/* Neutral status chip. The default reads as "no particular state". */
.badge,
.pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--radius-full);
  background:var(--main-bg);border:1px solid var(--main-border);color:var(--main-text-muted);
  font-size:11px;font-weight:600;line-height:1.6;white-space:nowrap;flex-shrink:0}

/* Affirmative state: Published, Active. Tinted fill, no border, so it reads as
   a state and not as another neutral chip sitting next to one. */
.badge-success,
.pill-green{background:var(--success-dim);border-color:transparent;color:var(--success-text)}

/* Subscription and membership status (subStatusPill in 055). Tinted fill, no
   border, per state; cancelled, exempt and completed keep the neutral .pill. */
.sub-status{font-size:10px;font-weight:800;letter-spacing:.04em;}
.sub-status-active{background:var(--success-dim);border-color:transparent;color:var(--success-text)}
.sub-status-trialing{background:var(--info-dim);border-color:transparent;color:var(--info-text)}
.sub-status-paused{background:var(--warning-dim);border-color:transparent;color:var(--warning-text)}
.sub-status-past_due,
.sub-status-suspended{background:var(--danger-dim);border-color:transparent;color:var(--danger-text)}
.sub-status-cancelled,
.sub-status-exempt,
.sub-status-completed{background:var(--main-bg);color:var(--main-text-muted)}

/* Inline danger banner. The services catalog emits this for a cancelled class
   date with layout set inline but no colour at all, so it read as plain text.
   Full rule here: the inline copy overrides the shape, this supplies the red. */

/* A gate modal (forced password change, forced 2FA enrolment, the recovery
   codes screen) hides its X. closeModal() is what actually refuses to close;
   see the lock note in 032-modals.js. This rule only stops the app offering an
   affordance that would do nothing, which is the state the old dead
   .modal-no-close class was written to produce and never did. */
.modal-locked #modal-x{display:none}

/* Service list in the appointment modal (033 _apptPkgRenderSegs): a booking's
   packages as cards, each with its services and one Package add-ons section,
   and a-la-carte services as their own cards after them. Approved mockup
   2026-09-30. */
.apl-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:12px 14px;margin-bottom:10px}
.apl-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.apl-title{font-size:14px;font-weight:700;color:var(--main-text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apl-chip{font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--radius-full);background:var(--purple-dim);color:var(--purple);flex-shrink:0}
.apl-price{margin-left:auto;font-size:13px;font-weight:700;color:var(--main-text);flex-shrink:0}
.apl-x{background:none;border:none;cursor:pointer;color:var(--main-text-muted);font-size:16px;line-height:1;padding:0 2px;flex-shrink:0}
.apl-sub{font-size:11px;color:var(--main-text-muted)}
.apl-label{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--main-text-muted);margin-bottom:6px}
.apl-seg{padding:8px 0;border-top:1px solid var(--main-border)}
.apl-seg-name{font-size:13px;font-weight:600;color:var(--main-text)}
.apl-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--purple-dim);color:var(--purple);font-size:11px;font-weight:700;margin-right:6px}
.apl-seg-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.apl-grow{flex:1;min-width:0}
.apl-person{flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--purple);border-radius:var(--radius);color:var(--main-card);font-weight:600;font-size:13px}
.apl-person-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apl-person-x{cursor:pointer;flex-shrink:0}
.apl-prov{flex:1;min-width:0;padding:9px 12px;background:var(--bg-input);border:1px solid var(--main-input-border);border-radius:var(--radius);color:var(--main-text);font-size:13px;font-weight:600}
.apl-prov.is-missing{border-color:var(--danger-light)}
.apl-var{width:100%;margin:2px 0 6px;padding:9px 12px;background:var(--bg-input);border:1px solid var(--main-input-border);border-radius:var(--radius);color:var(--main-text);font-size:13px;font-weight:600}
.apl-addons{border-top:1px solid var(--main-border);padding-top:10px;margin-top:4px}
.apl-ao{display:flex;align-items:center;gap:10px;border:1px solid var(--main-border);border-radius:var(--radius-md);padding:8px 10px;margin-bottom:6px;cursor:pointer}
.apl-ao.is-on{border-color:var(--purple-border);background:var(--purple-dim)}
.apl-ao.is-off{cursor:not-allowed;opacity:.7}
.apl-ao-name{display:block;font-size:13px;color:var(--main-text)}
.apl-ao-price{font-size:13px;font-weight:600;color:var(--main-text);text-align:right;flex-shrink:0}
.apl-was{display:block;font-size:11px;font-weight:400;color:var(--main-text-muted);text-decoration:line-through;margin-right:5px}
.apl-add{margin:4px 0 8px}
.apl-status{font-size:12px;font-weight:600;color:var(--main-text-muted);margin-bottom:8px}
.apl-warn{color:var(--danger-light)}
.apl-ok{color:var(--success)}
.apl-locked{margin-bottom:8px}
.apl-total{font-size:12px;color:var(--main-text-muted)}
.ss-grp{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--main-text-muted);padding:8px 12px 4px;background:var(--main-card)}
.aov-kv.is-sub{padding:2px 0 2px 12px;border-top:none;font-size:12px}
/* Checkout breakdown: a stamped line billed at its booked price, not today's (033 _apptBookedNote). */
.apt-booked-note{padding:1px 0 1px 12px;font-size:11px;color:var(--text-muted)}

/* Changing a paid booking's services inline (033 _apptAmend*, approved mockup
   2026-09-30): the lock note's switch, Paid/New/Changed/Removed tags, removed
   items with Undo, and the Adjustment card under Payment. */
.apl-link{background:none;border:none;padding:0;color:var(--purple);font-size:12px;font-weight:700;cursor:pointer}
.apl-tag{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:var(--radius-full);margin-left:6px;vertical-align:1px;text-transform:none;letter-spacing:0}
.apl-tag.is-paid{background:var(--success-dim);color:var(--success-text)}
.apl-tag.is-new{background:var(--purple-dim);color:var(--purple)}
.apl-tag.is-changed{background:var(--warning-dim);color:var(--warning-text)}
.apl-tag.is-gone{background:var(--danger-dim);color:var(--danger-text)}
.apl-removed{margin:6px 0}
.apl-removed-row{display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px dashed var(--main-border);border-radius:var(--radius-md);margin-bottom:6px;font-size:13px}
.apl-removed-name{color:var(--main-text-muted);text-decoration:line-through}
.apl-removed-row .apl-link{margin-left:auto}
.apl-amend-err{font-size:12px;margin-top:4px}
.apl-radio{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--main-text);margin-top:6px;cursor:pointer}
.apl-amend-partial-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.aov-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.aov-col>.dov-card:last-child:not(.hidden),.aov-col>.dov-card:has(+ .dov-card.hidden:last-child){flex-grow:1}
.aov-kv.is-gone span:first-child{text-decoration:line-through}
.aov-kv.is-strong,.aov-kv.is-strong span{color:var(--main-text);font-weight:700}
.aov-bal.is-due .aov-bal-v{color:var(--warning-text)}
.aov-bal.is-back .aov-bal-v{color:var(--success-text)}

/* Staff card Services modal: each service's add-ons nested under it (108
   _ssRefreshAddons, approved mockup 2026-09-30). Collapsed by default; the
   count chip turns amber when the provider skips some. A service that is off
   cannot open its add-ons. */
.ssa-row{display:flex;align-items:center;gap:6px;min-width:0}
.ssa-count{background:none;border:none;padding:0;font-size:12px;color:var(--main-text-muted);white-space:nowrap;cursor:pointer}
.ssa-count.is-partial{color:var(--warning-text);font-weight:600}
.ssa-caret{background:none;border:none;padding:0 2px;width:16px;font-size:11px;color:var(--main-text-muted);cursor:pointer}
.ssa-svc:not(.is-on) .ssa-count,.ssa-svc:not(.is-on) .ssa-caret{cursor:default;opacity:.55}
.ssa-svc:not(.is-on) .ssa-caret{visibility:hidden}
.ssa-addons{display:none;margin:0 0 4px 22px;padding-left:12px;border-left:1px dashed var(--main-border)}
.ssa-svc.is-open .ssa-addons{display:block}
.ssa-addon{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:12px;color:var(--main-text);cursor:pointer}
.ssa-addon-chk{flex-shrink:0}
.ssa-addon-name{flex:0 1 auto}
.ssa-addon.is-excluded .ssa-addon-name{text-decoration:line-through;color:var(--main-text-muted)}
.ssa-shared{font-size:11px;color:var(--main-text-muted)}
.ssa-sum{margin-right:auto;align-self:center;font-size:12px;color:var(--main-text-muted)}
/* Services tab of Edit Team Member: intro on the left, the tally on the right. */
.ss-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-12);margin-bottom:var(--space-12)}
.ss-head .ssa-sum{margin-right:0;flex:none}
.ss-who{color:var(--main-text)}
.ss-tools{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-10);padding:var(--space-12) var(--space-14);margin-bottom:var(--space-14);border-radius:12px;background:var(--main-bg);border:1px solid var(--main-border)}
.ss-q{flex:1 1 220px;min-width:0}
.ss-meta{flex:none;font-size:var(--fs-12);color:var(--main-text-muted)}
/* Visit slices (2026-10-01): appointment checkout's Collect now field, the
   chips for a bill the first payment locked, and this payment's own rows. */
.collect-now{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:0 12px}
.collect-now label{flex:1;margin:0;font-size:13px;font-weight:700;color:var(--text);text-transform:none;letter-spacing:0}
.collect-now input{width:130px;text-align:right;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:9px 12px;font-family:Lato,sans-serif;font-size:14px;outline:none;box-sizing:border-box}
.collect-now input:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-dim)}
.slice-lock-chip{display:inline-flex;align-items:center;margin:8px 6px 0 0;padding:5px 10px;border-radius:var(--radius);border:1px solid var(--warning);background:var(--warning-dim);color:var(--warning-light);font-size:12px;font-weight:600}
.slice-after-rows{padding:0 12px;font-size:12px}
.slice-note{margin:6px 0 14px;padding:0 12px;font-size:12px;line-height:1.5;color:var(--main-text-muted)}
/* Number fields: no browser spinner arrows (Patrick, 2026-10-01). They sat in
   amount fields where a stray click changed the amount. Arrow keys still step
   the value; the wheel guard in 075 keeps scrolling from changing it. Shared
   with the public form page; the widget and gift card pages carry a copy. */
/* #form-embed:start (number fields, see above) */
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
/* #form-embed:end */
/* Payment card (2026-10-01): the tip, fee and tax the visit's payments also
   carried, under Paid toward the visit, so the card adds up to the payments. */
.aov-also{padding-top:8px;border-top:1px solid var(--main-border)}
.aov-kv.is-gone.is-priced span:last-child{text-decoration:line-through;color:var(--main-text-muted);font-weight:400}

/* Agency login-as expiry banner. Opaque on purpose: the amber tint is layered
   over the solid card surface so the app underneath never shows through. */
.imp-expiry-banner{position:fixed;top:0;left:0;right:0;z-index:calc(var(--z-gate) - 1);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;padding:10px 16px;background:linear-gradient(var(--warning-dim),var(--warning-dim)),var(--main-card);border-bottom:1px solid var(--warning);box-shadow:0 2px 8px rgba(0,0,0,.12);color:var(--main-text);font-size:13px;text-align:center}
.imp-expiry-countdown{font-weight:700;color:var(--warning-text)}
/* Staff session ended (039-server-data-sync.js endStaffSession), shown over
   the hidden app for the moment before the reload into sign-in. */
.session-ended-flash{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:var(--z-gate);background:var(--bg-panel);border:1px solid var(--border);color:var(--text);padding:12px 20px;border-radius:var(--radius);font-size:13px;box-shadow:var(--shadow-lg)}

/* Book modal, Class tab (179-class-booking.js, 2026-10-05). The Individual /
   Recurring toggle, weekday chips and Ends choice reuse .dseg; the instructor
   picker reuses the Block Time pills (.tbs-*). */
.cls-hint{font-size:11px;color:var(--main-text-muted);margin-top:5px;line-height:1.5}
.cls-rec{margin:4px 0 14px;padding:12px 12px 0;border:1px dashed var(--purple);border-radius:var(--radius-md)}
.cls-rec-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.cls-rec-row select{width:auto;min-width:120px}
.cls-rec-inline{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--main-text-muted)}
.cls-rec-inline input{width:84px}
.cls-rec-inline input[type=date]{width:auto}
.cls-check,.form-group label.cls-check{display:flex;align-items:center;gap:8px;cursor:pointer;text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--main-text)}
.cls-check input{width:auto;margin:0}

/* Class roster (180-class-roster.js, 2026-10-05). Opens with the appointment
   overview's frame (.modal-appt.apt-ov) and hero (.dwh-*), so a class and an
   open visit read the same; these rules cover only what a roster adds. */
.cls-ro #cr-shell{display:flex;flex-direction:column;flex:1;min-height:0}
.cls-ro #cr-hero{flex-shrink:0}
.cls-ro #cr-main{display:flex;flex-direction:column;gap:12px}
.cls-cap{height:5px;margin:8px 0 2px;max-width:320px;background:color-mix(in srgb,var(--sb-text-strong) 25%,transparent);border-radius:var(--radius-full);overflow:hidden}
.cls-cap-fill{height:100%;background:var(--sb-text-strong);border-radius:var(--radius-full)}
.cls-card .dov-card-h{margin-bottom:6px}
.cls-add{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px}
.cls-empty{padding:14px 0;text-align:center;font-size:13px;color:var(--main-text-muted)}
.cls-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--main-border)}
.cls-row.is-gone{opacity:.7}
.cls-av{width:30px;height:30px;flex-shrink:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--purple-dim);color:var(--purple);font-size:11px;font-weight:800}
.cls-who{flex:1;min-width:0}
.cls-nm{font-size:13px;font-weight:700;color:var(--main-text)}
.cls-link{background:none;border:none;padding:0;font-family:inherit;text-align:left;cursor:pointer}
.cls-link:hover{color:var(--purple);text-decoration:underline;text-underline-offset:2px}
.cls-sub{font-size:11px;color:var(--main-text-muted)}
.cls-sub.is-due{color:var(--warning-text)}
.cls-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}
.cls-acts .btn{margin:0}
.pill.cls-pill-bad{background:var(--danger-dim);border-color:transparent;color:var(--danger-text)}
.cls-panel{border-color:var(--purple)}
/* A time field in a form group has no full-width rule (dates do, line 1193;
   the Book modal sizes its own row by id), so it sat narrow and short beside
   the date and duration. Same size as the date here. */
.cls-panel .time-pair{width:100%;height:38px}
.cls-panel .time-text{font-size:13px;padding:9px 12px}
.cls-scope{display:flex;flex-wrap:wrap;gap:6px 16px}
.cls-prob-h{font-size:12px;color:var(--main-text-muted);margin-bottom:4px}
.cls-prob{align-items:flex-start;padding:6px 0;border-top:1px solid var(--warning-dim)}
.cls-prob input{margin-top:3px}
.cls-panel-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.cls-pill-plain{background:var(--purple-dim);color:var(--purple)}

/* Calendar List view grouped by provider or by service / class (178): the
   group header is no longer the day, so each row carries its own date. */
.cal-list-dated{display:block}
.cal-list-dated-d{display:block;padding:6px 10px 0;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--main-text-muted)}

/* Sell a Membership (058): the plan is an ss-wrap search like Member, so the
   modal keeps its size however many plans exist. Each option shows the price
   and what the plan includes; a picked plan repeats that line under the box.
   Cards on file are radio rows; an expired card shows but cannot be picked. */
.me-plan-opt{display:flex}
.me-plan-opt.is-on{background:var(--purple-dim)}
.me-plan-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.me-plan-top{display:flex;justify-content:space-between;gap:8px}
.me-plan-name{font-size:13px;font-weight:600}
.me-plan-price{font-size:13px;font-weight:600;white-space:nowrap}
.me-plan-opt.is-on .me-plan-price::after{content:"\2713";margin-left:8px;color:var(--purple)}
.me-plan-desc{font-size:12px;color:var(--main-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-plan-info{margin-top:6px;font-size:12px;color:var(--text-muted)}
.me-plan-info:empty{display:none}
.form-group .me-ar-row{font-size:14px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--text);cursor:pointer}
.me-hint{margin-top:6px;font-size:12px;color:var(--text-muted)}
.me-hint:empty{display:none}
.me-hint.is-bad{color:var(--danger-text)}
.me-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.form-group .me-card-head label{margin-bottom:0}
.me-card-list{border:1px solid var(--border);border-radius:var(--radius)}
.form-group .me-card-row{display:flex;align-items:center;gap:10px;padding:9px 12px;margin:0;cursor:pointer;color:var(--text);
  border-bottom:1px solid var(--border);font-size:14px;font-weight:400;text-transform:none;letter-spacing:0}
.form-group .me-card-row:last-child{border-bottom:0}
.form-group .me-card-row.is-expired{cursor:not-allowed;color:var(--text-muted)}
.me-card-name{flex:1;min-width:0}
.me-card-exp{font-size:12px;color:var(--text-muted)}
.me-pill-danger{background:var(--danger-dim);border-color:transparent;color:var(--danger-text)}
.me-card-empty{padding:6px 0}
.me-card-warn{color:var(--danger-text)}
.me-sum{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:var(--radius);background:var(--purple-dim);font-size:13px}
.me-sum-row{display:flex;justify-content:space-between;gap:16px}
.me-sum-k{color:var(--text-muted);flex:none}
.me-sum-v{text-align:right}

/* Sell a Series (066): the series is an ss-wrap search like the client box.
   Each option shows the price and credits, service and expiry. The dropdown
   is moved to body, outside the modal's light scope, so text uses --main-*. */
.sr-off-opt{display:flex}
.sr-off-opt.is-on{background:var(--purple-dim)}
.sr-off-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.sr-off-top{display:flex;justify-content:space-between;gap:8px}
.sr-off-name,.sr-off-price{font-size:13px;font-weight:600}
.sr-off-price{white-space:nowrap}
/* A series on sale (2026-10-10): the list price struck before the sale price. */
.sr-was{margin-right:6px;font-weight:400;color:var(--text-muted);text-decoration:line-through}
.sr-off-opt.is-on .sr-off-price::after{content:"\2713";margin-left:8px;color:var(--purple)}
.sr-off-desc{font-size:12px;color:var(--main-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* New / Edit Discount modal (066 _dscOpenEditor). Service first, then the
   amount, then the name. The mode toggle writes the hidden #dsc-mode. */
.dsc-disc-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dsc-seg{display:flex;background:var(--main-bg);border:1px solid var(--main-border);border-radius:var(--radius);overflow:hidden;height:38px}
.dsc-seg-btn{flex:1;border:none;background:transparent;color:var(--main-text-muted);font-family:Lato,sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s,color .15s}
.dsc-seg-btn:hover{color:var(--main-text)}
.dsc-seg-btn.active{background:var(--purple);color:var(--on-accent)}
.dsc-amt{position:relative}
.dsc-amt-unit{position:absolute;top:50%;right:12px;transform:translateY(-50%);font-size:14px;font-weight:700;color:var(--main-text-muted);pointer-events:none}
.form-group .dsc-amt input{padding-right:30px}
.dsc-amt.is-price .dsc-amt-unit{left:12px;right:auto}
.form-group .dsc-amt.is-price input{padding-left:26px;padding-right:12px}
.dsc-preview{font-size:13px;color:var(--main-text-muted);margin-top:8px}
.dsc-preview strong{color:var(--main-text)}
.dsc-preview .dsc-warn{color:var(--warning-text)}
.dsc-link{background:none;border:none;padding:0;font-family:Lato,sans-serif;font-size:12px;font-weight:700;color:var(--purple);cursor:pointer;margin-top:6px}
.dsc-link:hover{text-decoration:underline}
.dsc-active{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin-top:4px}
.dsc-active input{margin-top:2px}
.dsc-active-title{font-size:13.5px;font-weight:700;color:var(--main-text)}
.dsc-active-hint{display:block;font-size:12px;color:var(--main-text-muted)}
.dsc-seg-btn:disabled{opacity:.4;cursor:not-allowed}
.dsc-seg-btn:disabled:hover{color:var(--main-text-muted)}
/* Applies To picker: picked items as removable chips under the search. */
.dsc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dsc-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 10px;border-radius:999px;background:var(--purple-dim);border:1px solid var(--purple-border);color:var(--main-text);font-size:12.5px;font-weight:600}
.dsc-chip-x{border:none;background:transparent;color:var(--main-text-muted);font-size:15px;line-height:1;width:20px;height:20px;border-radius:50%;cursor:pointer;padding:0}
.dsc-chip-x:hover{background:var(--purple-dim);color:var(--main-text)}
.ss-opt.dsc-opt-sub{padding-left:24px}
.dsc-opt-group{padding:8px 12px 4px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted)}
.dsc-opt-price{float:right;margin-left:12px;color:var(--main-text-muted)}
@media (max-width:600px){.dsc-disc-row{grid-template-columns:1fr}}

/* Promotions (approved mockup 2026-10-15): the Type filter and column in the
   list (066 _dscSectionHTML), the New Promotion type picker and the Gift Card
   Bonus editor (185). */
.dsc-list col.dsc-c-type{width:140px}
.dsc-list td.dsc-type{white-space:nowrap}
.dsc-type-sel{height:34px;padding:0 10px;border:1px solid var(--main-input-border);border-radius:var(--radius);background:var(--main-input);color:var(--main-text);font-family:Lato,sans-serif;font-size:13px}
.dsc-type-pill{display:inline-block;padding:2px 9px;border-radius:var(--radius-full);background:var(--purple-dim);color:var(--purple);font-size:11px;font-weight:800;white-space:nowrap}
.dsc-type-pill.is-bonus{background:var(--orange-dim);color:var(--orange-text)}
.gcb-types{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gcb-type{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:14px;border:1.5px solid var(--main-border);border-radius:var(--radius-lg);background:var(--main-card);color:var(--main-text);font-family:Lato,sans-serif;cursor:pointer}
.gcb-type:hover,.gcb-type.active{border-color:var(--purple);background:var(--main-card-hover)}
.gcb-type-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--radius-md);background:var(--purple-dim);color:var(--purple);margin-bottom:4px}
.gcb-type-t{font-family:'Exo 2',sans-serif;font-size:14px;font-weight:700}
.gcb-type-d{font-size:12.5px;color:var(--main-text-muted);line-height:1.45}
.gcb-tiers{display:flex;flex-direction:column;gap:8px}
.gcb-tier{display:grid;grid-template-columns:auto 110px auto 110px 1fr auto;gap:8px;align-items:center}
.gcb-tier-w{font-size:12.5px;font-weight:700;color:var(--main-text-muted)}
.gcb-tier-x{border:none;background:none;color:var(--main-text-muted);font-size:17px;line-height:1;width:24px;height:24px;border-radius:50%;cursor:pointer}
.gcb-tier-x:hover{background:var(--purple-dim);color:var(--main-text)}
.gcb-hint{font-size:12px;color:var(--main-text-muted);margin-top:5px}
.gcb-preview{background:var(--purple-dim);border-radius:var(--radius);padding:9px 12px;margin-bottom:14px;font-size:12.5px;color:var(--main-text)}
.gcb-chips{display:flex;flex-wrap:wrap;gap:8px}
.gcb-chip{padding:6px 12px;border-radius:var(--radius-full);border:1px solid var(--main-input-border);background:var(--main-input);color:var(--main-text-muted);font-family:Lato,sans-serif;font-size:12.5px;font-weight:700;cursor:pointer}
.gcb-chip.active{border-color:var(--purple-border);background:var(--purple-dim);color:var(--purple)}
.gcb-prods{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-height:180px;overflow:auto;padding:8px 10px;border:1px solid var(--main-border);border-radius:var(--radius)}
/* A row in the Pick gift cards list: not a field label, so none of the
   .form-group label caps (the .gcp-opt treatment). */
.form-group label.gcb-prod{display:flex;align-items:center;gap:10px;margin:0;min-height:30px;cursor:pointer;text-transform:none;letter-spacing:0;font-size:13px;font-weight:400;color:var(--main-text)}
.form-group label.gcb-prod input[type="checkbox"]{margin:0;flex:none;accent-color:var(--purple)}
.gcb-foot-del{margin-right:auto}
@media (max-width:600px){.gcb-types{grid-template-columns:1fr}.gcb-tier{grid-template-columns:auto 1fr auto 1fr auto}.gcb-tier-eq{display:none}}
/* Sell a Gift Card: the live bonus (185 _gcbSellPaint, _gcbChipNote). */
.gcb-banner{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-bottom:12px;padding:9px 12px;border-radius:var(--radius);background:var(--orange-dim);color:var(--orange-text);font-size:12.5px;font-weight:700}
.gcb-banner-end{margin-left:auto;font-weight:400;color:var(--main-text-muted)}
.gcb-amt-bonus{display:block;font-size:10.5px;font-weight:800;color:var(--orange-text);line-height:1.2}
.chip.active .gcb-amt-bonus{color:inherit}
.gcb-who{margin-bottom:14px;padding:10px 12px;border:1px solid var(--purple-border);border-radius:var(--radius);background:var(--purple-dim)}
.gcb-who label{display:block;margin-bottom:6px}
.gcb-who .dsc-seg{height:auto;min-height:36px;flex-wrap:wrap}
.gcb-who .dsc-seg-btn{padding:8px 10px}
.gcb-bonus-card{margin-top:8px;padding:10px 14px;border-radius:var(--radius);background:linear-gradient(135deg,var(--orange),var(--orange-active));color:var(--on-accent)}
.gcb-bonus-k{font-size:11px;opacity:.9}
.gcb-bonus-v{font-family:'Exo 2',sans-serif;font-size:18px;font-weight:800}
.gcb-sum-row{display:flex;justify-content:space-between;margin-top:8px;font-size:12.5px;font-weight:700;color:var(--orange-text)}
.gcb-next{margin-top:4px;font-size:12px;color:var(--main-text-muted)}
.gc-bonus-pip{background:var(--orange-dim);color:var(--orange-text)}
.gc-bonus-note{margin-bottom:12px;padding:8px 10px;border-radius:var(--radius);background:var(--orange-dim);color:var(--orange-text);font-size:12px;font-weight:700}

/* Register price box locked to the catalog price (125 _posPriceLock). The
   discount controls change what is charged; the box says why on hover. */
.price-f.is-locked{opacity:.65;cursor:not-allowed}

/* View as (186-view-as.js): the demo clinic's role switcher in the top bar. */
.view-as-pill{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;border:1px solid var(--purple-border);background:var(--purple-dim);color:var(--purple);font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:inherit;margin-right:8px}
.view-as-pill:hover{filter:brightness(1.08)}
.view-as-menu{position:fixed;z-index:var(--z-modal-pop);min-width:240px;padding:6px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:2px}
.view-as-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:8px 10px;border:0;border-radius:var(--radius);background:transparent;color:var(--main-text);font-size:13px;text-align:left;cursor:pointer;font-family:inherit}
.view-as-row:hover:not(:disabled){background:var(--purple-dim)}
.view-as-row:disabled{cursor:default}
.view-as-row.is-current{background:var(--purple-dim);font-weight:700}
.view-as-row.is-busy{opacity:.6}
.view-as-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.view-as-role{font-size:11px;color:var(--text-muted)}
.view-as-note{padding:8px 10px;font-size:12px;color:var(--text-muted)}

/* Journeys: board, stats and the stage editor. Moved out of the <style>
   blocks the render functions injected on every paint (2026-10-16). */
.jrn-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.jrn-seg { min-width:0; }
.jrn-gear-btn { display:inline-flex; align-items:center; justify-content:center; padding:8px; border-radius:var(--radius); border:1px solid var(--main-border); background:var(--main-card); color:var(--main-text-muted); cursor:pointer; }
.jrn-gear-btn:hover { color:var(--main-text); }
.jrn-gear-btn:focus-visible { outline:2px solid var(--purple); outline-offset:1px; }
.jrn-staff-sel { margin-left:auto; padding:8px 12px; border-radius:var(--radius); border:1px solid var(--main-input-border); background:var(--main-input); color:var(--main-text); font-size:14px; min-width:160px; }
.jrn-board-scroll { display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; align-items:flex-start; }
.jrn-col { flex:0 0 280px; background:var(--main-card); border:1px solid var(--main-border); border-radius:var(--radius-lg); display:flex; flex-direction:column; max-height:calc(100vh - 240px); }
.jrn-col-head { padding:12px 14px; border-bottom:1px solid var(--main-border); display:flex; align-items:center; gap:8px; }
.jrn-col-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.jrn-col-name { font-weight:600; font-size:13px; color:var(--main-text); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jrn-col-total { font-size:12px; font-weight:700; color:var(--purple); white-space:nowrap; }
.jrn-col-count { font-size:11px; padding:2px 7px; border-radius:10px; background:var(--main-bg); color:var(--main-text-muted); font-weight:500; }
.jrn-col-type { font-size:10px; padding:2px 6px; border-radius:4px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.jrn-col-type.won { background:var(--success-dim); color:var(--success-text); }
.jrn-col-type.lost { background:var(--danger-dim); color:var(--danger-text); }
.jrn-col-body { padding:10px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:8px; }
.jrn-col-empty { padding:24px 12px; text-align:center; color:var(--main-text-muted); font-size:12px; font-style:italic; }
.jrn-card { background:var(--main-bg); border:1px solid var(--main-border); border-left:3px solid var(--main-border); border-radius:var(--radius); padding:10px 12px; cursor:pointer; transition:box-shadow 0.15s, transform 0.05s; }
.jrn-col-add { margin:8px 10px 10px; padding:8px 12px; background:transparent; border:1px dashed var(--main-border); border-radius:var(--radius); color:var(--main-text-muted); font-size:12px; cursor:pointer; transition:background 0.15s, color 0.15s; }
.jrn-col-add:hover { background:var(--purple-dim); color:var(--purple); border-color:var(--purple); }
.jrn-card:hover { box-shadow:var(--shadow-md); }
.jrn-card.won { border-left-color:var(--success); opacity:0.85; }
.jrn-card.lost { border-left-color:var(--danger); opacity:0.75; }
.jrn-card.dragging { opacity:0.35; }
.jrn-card { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.jrn-card:focus-visible { outline:2px solid var(--purple); outline-offset:1px; }
.jrn-card-ghost { position:fixed; left:0; top:0; z-index:var(--z-float); pointer-events:none; box-shadow:var(--shadow-lg); opacity:0.95; margin:0; }
.jrn-drop-line { height:3px; border-radius:2px; background:var(--purple); flex:none; }
body.jrn-card-dragging, body.jrn-card-dragging * { cursor:grabbing !important; user-select:none; }
.jrn-col-body.drop-active { background:var(--purple-dim); outline:2px dashed var(--purple); outline-offset:-4px; }
.jrn-card-title { font-weight:600; font-size:13px; color:var(--main-text); margin-bottom:4px; line-height:1.3; }
.jrn-card-value { font-size:13px; font-weight:600; color:var(--purple); margin-bottom:4px; }
.jrn-card-meta { font-size:11px; color:var(--main-text-muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.jrn-card-chip { font-size:10px; padding:2px 6px; border-radius:4px; background:var(--main-bg); border:1px solid var(--main-border); }
.jrn-stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:18px; }
.jrn-stat { background:var(--main-card); border:1px solid var(--main-border); border-radius:var(--radius-lg); padding:14px 16px; }
.jrn-stat-label { font-size:11px; color:var(--main-text-muted); text-transform:uppercase; letter-spacing:0.4px; font-weight:600; margin-bottom:6px; }
.jrn-stat-value { font-size:22px; font-weight:700; color:var(--main-text); font-family:Syne,sans-serif; line-height:1.2; }
.jrn-stat-sub { font-size:11px; color:var(--main-text-muted); margin-top:4px; }
@media(max-width:900px){ .jrn-stats { grid-template-columns:repeat(2, 1fr); } }
.jrn-stage-wrap { margin-bottom:6px; width:100%; max-width:100%; box-sizing:border-box; }
.jrn-stage-row { display:grid; grid-template-columns: auto auto minmax(0, 1fr) 56px 124px auto; gap:6px; align-items:center; padding:6px; background:var(--main-bg); border:1px solid var(--main-border); border-radius:var(--radius); width:100%; max-width:100%; box-sizing:border-box; }
.jrn-grip { display:inline-flex; align-items:center; justify-content:center; width:24px; height:30px; padding:0; border:0; border-radius:var(--radius); background:none; color:var(--main-text-muted); cursor:grab; touch-action:none; }
.jrn-grip svg { width:16px; height:16px; }
.jrn-grip:hover { color:var(--main-text); background:var(--main-card-hover); }
.jrn-grip:focus-visible { outline:2px solid var(--purple); outline-offset:1px; }
.jrn-stage-row.grip-active { border-color:var(--purple); box-shadow:var(--shadow-md); }
body.jrn-grip-dragging, body.jrn-grip-dragging * { cursor:grabbing !important; user-select:none; }
.jrn-swatch-btn { width:30px; height:30px; border-radius:50%; border:2px solid var(--main-border); cursor:pointer; flex-shrink:0; padding:0; transition:transform 0.1s ease; }
.jrn-swatch-btn:hover { transform:scale(1.08); }
.jrn-swatch-btn.open { border-color:var(--main-text); }
.jrn-name-input { width:100%; min-width:0; box-sizing:border-box; padding:6px 10px; border:1px solid var(--main-input-border); border-radius:var(--radius); background:var(--main-input); color:var(--main-text); font-size:13px; }
.jrn-type-select { width:100%; box-sizing:border-box; padding:6px 8px; border:1px solid var(--main-input-border); border-radius:var(--radius); background:var(--main-input); color:var(--main-text); font-size:12px; }
.jrn-del-btn { flex-shrink:0; padding:4px 10px; color:var(--danger); font-weight:700; }
.jrn-stage-count { font-size:11px; color:var(--main-text-muted); white-space:nowrap; text-align:right; }
.jrn-palette { display:flex; flex-wrap:wrap; gap:8px; padding:10px 12px; margin-top:4px; background:var(--main-card); border:1px solid var(--main-border); border-radius:var(--radius); }
.jrn-palette .sw { width:28px; height:28px; border-radius:50%; cursor:pointer; border:2px solid transparent; padding:0; transition:transform 0.1s ease; }
.jrn-palette .sw:hover { transform:scale(1.15); }
.jrn-palette .sw.selected { border-color:var(--main-text); }
/* Journeys: empty, loading and danger states, once inline styles (2026-10-16). */
.jrn-loading { padding:60px 40px; text-align:center; color:var(--main-text-muted); }
.jrn-empty { padding:80px 40px; text-align:center; color:var(--main-text-muted); }
.jrn-empty-icon { opacity:0.4; margin-bottom:16px; }
.jrn-empty-title { font-family:'Syne',sans-serif; font-size:22px; font-weight:700; color:var(--main-text); margin-bottom:8px; }
.jrn-empty-text { font-size:14px; max-width:480px; margin:0 auto 24px; }
.jrn-wrap { padding:24px 30px; }
.jrn-board-loading { padding:40px; text-align:center; color:var(--main-text-muted); font-size:13px; }
.jrn-no-stages { padding:60px 40px; text-align:center; background:var(--main-card); border:1px solid var(--main-border); border-radius:var(--radius-lg); color:var(--main-text-muted); }
.jrn-hint { padding:12px 16px; margin-bottom:16px; background:var(--info-dim); color:var(--info-text); border:1px solid var(--info); border-radius:var(--radius); font-size:13px; }
.jrn-stages-empty { font-size:12px; color:var(--main-text-muted); padding:8px; }
.jrn-danger-zone { margin-top:24px; padding-top:20px; border-top:1px solid var(--main-border); }
.jrn-danger-title { font-size:13px; font-weight:600; color:var(--danger); margin-bottom:8px; }
.btn.jrn-danger-btn { color:var(--danger); border:1px solid var(--danger); }
.jrn-del-confirm { padding:8px 0; }
.jrn-del-warning { font-size:13px; padding:12px; background:var(--danger-dim); color:var(--danger-text); border-radius:var(--radius); border:1px solid var(--danger); }
.btn.jrn-del-primary { background:var(--danger); border-color:var(--danger); }
.jrn-stats-note { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:12px; font-weight:600; color:var(--main-text-muted); }
.jrn-stats-clear { border:0; background:none; padding:0; font:inherit; font-weight:700; color:var(--purple); cursor:pointer; }
.jrn-stats-clear:hover { text-decoration:underline; }

/* Automations list: recipe rows, filter chips (071-automations.js) */
.auto-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.auto-chip-n { font-variant-numeric:tabular-nums; opacity:.75; margin-left:2px; }
.auto-list { background:var(--main-card); border:1px solid var(--main-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden; }
.auto-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:start; padding:16px 18px; border-top:1px solid var(--main-border); }
.auto-row:first-child { border-top:0; }
.auto-row .bh-toggle { margin-top:2px; }
.auto-row.is-paused .auto-name, .auto-row.is-paused .auto-flow { opacity:.65; }
.auto-main { min-width:0; }
.auto-name { font-weight:700; font-size:14px; color:var(--main-text); }
.auto-desc { font-size:12px; color:var(--main-text-muted); margin-top:2px; }
.auto-flow { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; font-size:12.5px; color:var(--main-text); }
.auto-node { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:var(--radius-sm); border:1px solid var(--main-border); background:var(--main-card-hover); max-width:100%; overflow-wrap:anywhere; }
.auto-node b { font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--main-text-muted); white-space:nowrap; }
.auto-node-when { border-color:var(--purple-border); background:var(--purple-dim); }
.auto-arrow { color:var(--main-text-muted); }
.auto-stats { display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:8px; font-size:12px; color:var(--main-text-muted); font-variant-numeric:tabular-nums; }
.auto-stat-bad { color:var(--danger-text); font-weight:700; }
.auto-acts { display:flex; gap:2px; }
.auto-acts .icon-btn-xs { color:var(--main-text-muted); }
.auto-acts .icon-btn-xs svg { width:16px; height:16px; }
.auto-acts .auto-del:hover { color:var(--danger-text); }
.auto-none { padding:18px; font-size:13px; color:var(--main-text-muted); }
@media (max-width:640px) { .auto-row { grid-template-columns:auto minmax(0,1fr); } .auto-acts { grid-column:2; } }

/* Automation Activity: outcome bar, status chips */
.auto-act-head { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:12px; font-size:13px; color:var(--main-text-muted); }
.auto-bar { display:flex; height:10px; border-radius:var(--radius-full); overflow:hidden; background:var(--main-card-hover); margin-bottom:6px; }
.auto-bar span { display:block; height:100%; }
.auto-legend { display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--main-text-muted); margin-bottom:12px; font-variant-numeric:tabular-nums; }
.auto-legend i { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.auto-bar-ok { background:var(--success); }
.auto-bar-seq { background:var(--purple); }
.auto-bar-skip { background:var(--warning); }
.auto-bar-bad { background:var(--danger); }
.auto-bar-off { background:var(--text-disabled); }
.auto-act-table { border:1px solid var(--main-border); border-radius:var(--radius); overflow-x:auto; }
.auto-act-table table { width:100%; border-collapse:collapse; }
.auto-act-table th { padding:10px 12px; text-align:left; font-size:11px; font-weight:600; color:var(--main-text-muted); text-transform:uppercase; letter-spacing:.5px; background:var(--main-card-hover); border-bottom:1px solid var(--main-border); }
.auto-act-table td { padding:10px 12px; font-size:13px; border-bottom:1px solid var(--main-border); vertical-align:top; }
.auto-act-table tr:last-child td { border-bottom:0; }
.auto-when { white-space:nowrap; color:var(--main-text-muted); font-variant-numeric:tabular-nums; }
.auto-who { color:var(--purple); font-weight:600; text-decoration:none; }
.auto-detail { font-size:12px; color:var(--main-text-muted); }
.auto-st { display:inline-block; font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:var(--radius-full); white-space:nowrap; }
.auto-st-ok { background:var(--success-dim); color:var(--success-text); }
.auto-st-seq { background:var(--purple-dim); color:var(--purple); }
.auto-st-skip { background:var(--warning-dim); color:var(--warning-text); }
.auto-st-bad { background:var(--danger-dim); color:var(--danger-text); }
.auto-st-off { background:var(--main-card-hover); color:var(--main-text-muted); }

/* Automation builder: two panes, sequence rail on the left (071-automations.js) */
.modal.modal-auto{max-width:860px;container-type:inline-size}
.modal.modal-auto:not(.modal-auto-start){height:min(720px,90vh)}
.modal-auto:not(.modal-auto-start) .modal-body{padding:0;overflow:hidden;display:flex}
.modal-auto .modal-head{align-items:center}
.modal-auto .modal-title{flex:1;min-width:0}
.auto-head{display:flex;align-items:center;gap:12px}
.auto-head-col{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.auto-head .ce-status-chip{margin-left:0;flex-shrink:0}
.auto-name-input{border:0;padding:0;background:transparent;font-family:'Exo 2',sans-serif;font-size:20px;font-weight:700;color:var(--main-text);min-width:0}
.auto-desc-input{border:0;padding:0;background:transparent;font-size:12.5px;color:var(--main-text-muted);min-width:0}
.auto-edited{margin-top:var(--space-2);font-size:11.5px;color:var(--main-text-muted)}
.auto-name-input:focus,.auto-desc-input:focus{outline:none;box-shadow:0 1px 0 var(--purple)}
.auto-lbl{display:block;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted);margin-bottom:8px}
.auto-bld{display:grid;grid-template-columns:300px minmax(0,1fr);width:100%;min-height:0}
.auto-rail{background:var(--main-card-hover);border-right:1px solid var(--main-border);padding:18px 16px;overflow-y:auto;display:flex;flex-direction:column;min-height:0}
.auto-nodes{display:flex;flex-direction:column}
.auto-node-row{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:10px;padding-bottom:14px}
.auto-node-row:not(:last-child)::before{content:'';position:absolute;left:12px;top:28px;bottom:0;width:2px;background:var(--purple-dim)}
.auto-dot{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font:800 12px 'Exo 2',sans-serif;background:var(--main-card);color:var(--main-text-muted);border:1px solid var(--purple-border);position:relative}
.auto-dot.on{background:var(--purple);color:var(--on-accent);border-color:var(--purple)}
.auto-ncard{display:flex;flex-direction:column;gap:2px;text-align:left;padding:9px 11px;border-radius:10px;border:1px solid var(--main-border);background:var(--main-card);cursor:pointer;min-width:0;font:inherit;color:var(--main-text)}
.auto-ncard:hover{border-color:var(--purple-border)}
.auto-ncard.on{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-dim)}
.auto-nk{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted)}
.auto-nt{font-size:13.5px;font-weight:700;overflow-wrap:anywhere}
.auto-ns{font-size:12px;color:var(--main-text-muted);overflow-wrap:anywhere}
.auto-add{margin-left:36px;padding:8px;border:1px dashed var(--purple);border-radius:8px;background:transparent;color:var(--purple);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.auto-rule-sep{height:1px;background:var(--main-border);margin:16px 0 14px}
.auto-add-inline{margin-left:0}
.auto-cond-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8);margin-bottom:var(--space-8)}
.auto-cond-row > select.msp-input{flex:1 1 140px;min-width:0}
.auto-cond-row > .msp-input{flex:1 1 140px;min-width:0}
.auto-cond-chips{display:flex;flex-wrap:wrap;gap:var(--space-6) var(--space-12);flex:1 1 100%}
.auto-pane{padding:22px 26px;overflow-y:auto;min-width:0;min-height:0;color:var(--main-text)}
.auto-pane label.u-block{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted)}
.auto-pane-head{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:14px}
.auto-pane-head .auto-pane-icon + .auto-pane-title{margin-right:auto}
.auto-pane-icon{width:26px;height:26px;border-radius:8px;background:var(--purple);color:var(--on-accent);display:grid;place-items:center;flex-shrink:0}
.auto-pane-title{margin:0;font-family:'Exo 2',sans-serif;font-size:17px;font-weight:700;color:var(--main-text)}
.auto-say{padding:10px 12px;border-radius:8px;background:var(--purple-dim);font-size:13.5px;color:var(--main-text)}
.auto-warn{border:1px solid var(--orange);border-radius:var(--radius);padding:10px 12px;font-size:13px;color:var(--main-text)}
.auto-note{padding:9px 12px;border-radius:8px;border:1px solid var(--main-border);background:var(--main-card-hover);font-size:12.5px;color:var(--main-text-muted)}
.auto-seg{display:inline-flex;border:1px solid var(--purple-border);border-radius:8px;overflow:hidden}
.auto-seg-b{padding:8px 14px;border:0;background:var(--main-card);color:var(--main-text-muted);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.auto-seg-b + .auto-seg-b{border-left:1px solid var(--purple-border)}
.auto-seg-b.on{background:var(--purple-dim);color:var(--purple)}
.auto-wait{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px}
.auto-wait .msp-input{width:72px}
.auto-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.auto-tile{padding:12px;text-align:left;border:1px solid var(--purple-border);border-radius:10px;background:var(--main-card);cursor:pointer;font:inherit;font-size:14px;font-weight:700;color:var(--main-text)}
.auto-tile:hover{border-color:var(--purple);background:var(--purple-dim)}
.auto-check{display:flex;align-items:center;gap:8px;font-size:14px;margin-top:8px;cursor:pointer}
.auto-check-top{align-items:flex-start}
.auto-check-top input{margin-top:3px}
.auto-radios{display:flex;flex-direction:column;gap:6px}
.auto-radio{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--purple-border);border-radius:8px;font-size:14px;cursor:pointer}
.auto-radio.on{border-color:var(--purple);background:var(--purple-dim);font-weight:700}
.auto-msg-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.auto-var-wrap{position:relative}
.auto-var-btn{padding:4px 10px;border:1px solid var(--purple-border);border-radius:var(--radius-full);background:var(--main-card);color:var(--purple);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.auto-var-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:20;width:220px;max-height:260px;overflow-y:auto;background:var(--main-card);border:1px solid var(--purple-border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:4px}
.auto-var-group{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted);padding:8px 8px 4px}
.auto-var-item{display:block;width:100%;text-align:left;padding:6px 8px;border:0;border-radius:6px;background:transparent;font:inherit;font-size:13px;color:var(--main-text);cursor:pointer}
.auto-var-item:hover,.auto-var-item:focus-visible{background:var(--purple-dim)}
.auto-sms-count{text-align:right;font-size:12px;color:var(--main-text-muted);margin-top:4px;font-variant-numeric:tabular-nums}
.modal-auto .modal-foot{align-items:center}
.auto-dirty{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--main-text-muted);margin-right:auto}
.auto-dirty-dot{width:8px;height:8px;border-radius:50%;background:var(--warning)}
.auto-start-note{font-size:13px;color:var(--main-text-muted);margin-right:auto}
.auto-recipes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:12px;margin-bottom:12px}
.auto-recipe{display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px;border-radius:12px;border:1px solid var(--main-border);background:var(--main-card);cursor:pointer;font:inherit;color:var(--main-text);width:100%}
.auto-recipe:hover{border-color:var(--purple-border)}
.auto-recipe.on{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-dim)}
.auto-recipe-blank{border-style:dashed}
.auto-recipe-name{font-family:'Exo 2',sans-serif;font-size:15px;font-weight:700}
.auto-recipe-why{font-size:13px;color:var(--main-text-muted)}
.auto-recipe .auto-flow{margin-top:4px}
@container (max-width: 640px){
  .auto-bld{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .auto-rail{flex-direction:row;align-items:center;gap:8px;overflow-x:auto;overflow-y:hidden;padding:12px 16px;border-right:0;border-bottom:1px solid var(--main-border)}
  .auto-rail > .auto-lbl,.auto-rule-sep,.auto-dot,.auto-nk,.auto-ns{display:none}
  .auto-nodes{flex-direction:row;gap:8px}
  .auto-node-row{display:block;padding-bottom:0}
  .auto-node-row::before{display:none}
  .auto-ncard{flex-shrink:0;padding:7px 11px;white-space:nowrap}
  .auto-nt{font-size:12.5px;overflow-wrap:normal}
  .auto-add{flex-shrink:0;margin-left:0;white-space:nowrap;padding:7px 11px}
  .auto-pane{padding:16px}
  .auto-tiles,.auto-recipes{grid-template-columns:minmax(0,1fr)}
  .modal-auto .modal-foot .auto-dirty,.modal-auto .modal-foot .auto-test-btn{display:none}
  .modal-auto .modal-foot .btn{flex:1}
  .modal-auto .modal-foot .btn-action{flex:2}
}

/* Automation step preview (071-automations.js _autoOpenPreview) */
.auto-head-btns { display:flex; gap:6px; }
.auto-pv-out:empty { display:none; }
.auto-pv-subject { font-weight:700; font-size:14px; color:var(--main-text); margin-bottom:10px; }
.auto-pv-frame { width:100%; height:360px; border:1px solid var(--main-border); border-radius:var(--radius); background:var(--main-card); }
.auto-pv-sms { white-space:pre-wrap; font-size:14px; padding:10px 12px; border-radius:12px; background:var(--purple-dim); color:var(--main-text); max-width:420px; }

/* Online Booking preview window (105 _obPreview) */

/* Closed Days (030, 2026-10-19): ranges, Add Holidays, bookings warning */
/* The list (2026-10-20): grouped by month, one slim row per day or range. */
.cd-none{font-size:12.5px;color:var(--main-text-muted);padding:10px 12px;border:1px dashed var(--divider);border-radius:var(--radius)}
.cd-list{border:1px solid var(--main-border);border-radius:var(--radius);overflow:hidden}
.cd-group{padding:0 12px}
.cd-group+.cd-group{border-top:1px solid var(--main-border)}
.cd-month{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted);padding:10px 0 4px}
.cd-item{display:grid;grid-template-columns:52px minmax(0,1fr) auto 28px;gap:12px;align-items:center;padding:7px 0}
.cd-item+.cd-item{border-top:1px dashed var(--main-border)}
.cd-tile{display:flex;flex-direction:column;align-items:center;line-height:1.05;border-radius:var(--radius-md);background:var(--purple-dim);color:var(--purple);padding:5px 0}
.cd-tile b{font-family:'Exo 2',sans-serif;font-size:15px}
.cd-tile span{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.cd-what{min-width:0}
.cd-what b{display:block;font-size:13px;color:var(--main-text)}
.cd-what span{font-size:12px;color:var(--main-text-muted)}
.cd-span{font-size:11px;font-weight:700;color:var(--main-text-muted);background:var(--purple-dim);padding:2px 8px;border-radius:var(--radius-full);white-space:nowrap}
/* Add Closed Days window: two months, click a day or two for a range. */
.cdp{display:flex;flex-direction:column;gap:14px;container:cdp/inline-size}
.cdp-nav{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cdp-cals{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cdp-title{font-family:'Exo 2',sans-serif;font-weight:700;font-size:13px;text-align:center;margin-bottom:8px;color:var(--main-text)}
.cdp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cdp-wd{font-size:10px;font-weight:800;color:var(--text-dim);text-align:center;padding:4px 0;text-transform:uppercase}
.cdp-day{height:34px;border:0;background:none;font-family:Lato,sans-serif;font-size:13px;color:var(--main-text);border-radius:var(--radius-md);cursor:pointer;font-variant-numeric:tabular-nums}
.cdp-day:hover{background:var(--purple-dim)}
.cdp-day.is-off{color:var(--text-dim)}
.cdp-day.is-past{color:var(--text-dim);opacity:.45;cursor:default}
.cdp-day.is-past:hover{background:none}
.cdp-day.is-closed{background:var(--main-bg);color:var(--text-dim);text-decoration:line-through;cursor:default}
.cdp-day.is-in{background:var(--purple-dim);border-radius:0}
.cdp-day.is-sel{background:var(--purple);color:#fff}
.cdp-day.is-today{box-shadow:inset 0 0 0 1px var(--purple)}
.cdp-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--main-text-muted)}
.cdp-key{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:5px}
.cdp-key-sel{background:var(--purple)}
.cdp-key-closed{background:var(--main-bg);border:1px solid var(--main-border)}
.cdp-key-today{box-shadow:inset 0 0 0 1px var(--purple)}
.cdp-sum{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--main-bg);border-radius:var(--radius);padding:10px 12px}
.cdp-sum b{font-size:13px;color:var(--main-text)}
.cdp-reason{margin:0}
@container cdp (max-width:520px){.cdp-cals{grid-template-columns:minmax(0,1fr)}.cdp-cal+.cdp-cal{display:none}}
.cd-hol-year{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:13px}
.cd-seg{display:inline-flex;gap:4px}
.cd-hol{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--border);cursor:pointer}
.cd-hol.is-off{opacity:.55;cursor:default}
.cd-hol input{width:16px;height:16px;accent-color:var(--purple)}
.cd-hol-name{flex:1;font-size:13px;color:var(--text)}
.cd-hol-date{font-size:12px;color:var(--text-muted)}
.cd-warn-lead{font-size:13px;color:var(--text);line-height:1.6;margin-bottom:12px}
.cd-warn-row{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px}
.cd-warn-when{width:150px;flex-shrink:0;color:var(--text-muted)}
.cd-warn-who{flex:1;min-width:0;color:var(--text)}
.cd-warn-more{font-size:12px;color:var(--text-muted);margin-top:8px}

/* Services: which ones show online is Catalog's Allow Online Booking (2026-10-20). */
.ob-svc-source{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--main-bg);border:1px solid var(--main-border);border-radius:var(--radius);padding:10px 12px;font-size:12.5px;color:var(--main-text);line-height:1.5}
.ob-svc-source span{flex:1;min-width:220px}
/* Online Booking in side-label sections (2026-10-20), inside .pf-wrap. */
.pf-body.ob-off{opacity:.45;pointer-events:none}
.ob-page-url{display:block;font-size:12px;color:var(--main-text-muted);font-family:Menlo,Monaco,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-page-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ob-page-st{display:flex;align-items:center;gap:8px;justify-content:flex-end;min-width:76px}
/* Online Pages' Live / Off status reads as the shared chip (2026-10-21). */
.ob-st{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:var(--radius-full);background:var(--success-dim);color:var(--success-text)}
.ob-st.is-off{background:var(--purple-dim);color:var(--main-text-muted)}
.ob-rows{display:flex;flex-direction:column}
.ob-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--main-border)}
.ob-row:first-child{border-top:0;padding-top:0}
.ob-row .bh-toggle{flex-shrink:0;margin-top:1px}
.ob-row-title{display:block;font-size:13px;color:var(--main-text);margin-bottom:2px}
.ob-grow{flex:1;min-width:0}
.ob-sub{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted);border-top:1px dashed var(--main-border);padding-top:12px}
.ob-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.ob-grid2>.form-group{margin:0}
.ob-dep{display:flex;gap:6px}
.ob-dep select{flex:0 0 92px}
.ob-tips{margin:8px 0 0;max-width:260px}
.ob-readonly{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--main-text);background:var(--main-bg);border-radius:var(--radius);padding:9px 12px}
.ob-link{background:none;border:0;padding:0;font-family:Lato,sans-serif;font-size:12.5px;font-weight:700;color:var(--purple);cursor:pointer}
.ob-link:hover{text-decoration:underline}
.ob-seg{display:inline-flex;border:1px solid var(--main-border);border-radius:var(--radius);overflow:hidden;align-self:flex-start}
.ob-seg-opt{margin:0;cursor:pointer}
.pf-card .form-group label.ob-seg-opt{display:block;margin:0;text-transform:none;letter-spacing:0;font-size:inherit;font-weight:inherit}
.ob-seg-opt input{position:absolute;opacity:0;width:1px;height:1px}
.ob-seg-opt span{display:block;font-size:12px;font-weight:700;color:var(--main-text-muted);padding:7px 14px}
.ob-seg-opt input:checked+span{background:var(--purple-dim);color:var(--purple)}
.ob-seg-opt input:focus-visible+span{box-shadow:inset 0 0 0 2px var(--purple)}
/* Page row counts and the live preview (2026-10-20). */
.ob-page-cnt{display:block;font-size:11.5px;color:var(--main-text-muted);margin-top:2px}
/* One card per public page (2026-10-20): header with its Live switch, link row, sections. */
.ob-cards{display:flex;flex-direction:column;gap:16px}
.ob-pcard-head{display:flex;align-items:center;gap:12px;padding:16px 24px;border-bottom:1px solid var(--main-border);flex-wrap:wrap}
.ob-pcard-title{font-family:'Exo 2',sans-serif;font-weight:700;font-size:16px;color:var(--main-text);margin:0;flex:1;min-width:140px}
.ob-link-row{display:flex;align-items:center;gap:10px;padding:12px 24px;border-bottom:1px solid var(--main-border);flex-wrap:wrap}
.ob-link-row .ob-page-url{flex:1;min-width:180px;text-decoration:none}
.ob-link-row a.ob-page-url:hover{color:var(--purple);text-decoration:underline}
.ob-pcard .pf-sec.ob-sub-sec{grid-template-columns:200px minmax(0,1fr)}
.ob-pcard .ob-link-row+.pf-sec,.ob-pcard .ob-link-row+div>.pf-sec:first-child{border-top:0}
.ob-dim{opacity:.45;pointer-events:none}
.ob-split{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:18px;align-items:start}
.ob-stack{display:flex;flex-direction:column;gap:12px;min-width:0}
.ob-stack>.form-group{margin:0}
.ob-offers{border:1px solid var(--main-border);border-radius:var(--radius);overflow:hidden;min-width:0}
.ob-offer{display:flex;align-items:center;gap:12px;padding:10px 12px}
.ob-offer+.ob-offer{border-top:1px solid var(--main-border)}
.ob-offer .bh-toggle{flex-shrink:0}
.ob-pv{display:flex;flex-direction:column;gap:6px;min-width:0}
.ob-page-cnt.is-warn{color:var(--warning-text)}
.ob-phone{--ob-brand:var(--purple);border:7px solid var(--main-text);border-radius:26px;background:var(--main-bg);color:var(--main-text);height:400px;overflow:hidden;display:flex;flex-direction:column}
.ob-ph-top{background:var(--main-card);border-bottom:1px solid var(--main-border);padding:16px 14px 12px;text-align:center}
.ob-ph-logo{width:44px;height:44px;border-radius:12px;background:var(--purple-dim);color:var(--ob-brand);font-family:'Exo 2',sans-serif;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;margin:0 auto 6px;overflow:hidden}
.ob-ph-logo.has-img{background:transparent;width:auto;max-width:150px}
.ob-ph-logo img{max-height:44px;max-width:150px;object-fit:contain}
.ob-ph-name{font-family:'Exo 2',sans-serif;font-weight:700;font-size:15px}
.ob-ph-tag{font-size:11.5px;color:var(--main-text-muted);margin-top:2px;min-height:14px}
.ob-ph-body{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.ob-mc{background:var(--main-card);border:1.5px solid var(--main-border);border-radius:12px;padding:14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px}
.ob-gc-mini{width:92px;aspect-ratio:8/5;border-radius:8px;background:var(--ob-brand);color:var(--on-accent);display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:7px 8px;margin-bottom:4px;text-align:left}
.ob-mc .ob-gc-mini span{font-size:8px;font-weight:700;color:inherit;opacity:.9;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-mc .ob-gc-mini b{font-size:11px;color:inherit}
.ob-mc b{font-size:13.5px;color:var(--ob-brand)}
.ob-mc span{font-size:11px;color:var(--main-text-muted)}
.ob-ph-direct{font-size:11px;color:var(--main-text-muted);text-align:center}
/* The booking page's first screen in the preview: compact rows with line
   icons, as booking-widget/index.html renderModeChooser (2026-10-26). */
.ob-ph-h{font-weight:800;font-size:14px;margin-bottom:-2px}
.ob-mr{background:var(--main-card);border:1.5px solid var(--main-border);border-radius:12px;padding:10px 10px 10px 9px;display:flex;align-items:center;gap:10px;min-width:0}
.ob-mr-icon{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:color-mix(in srgb,var(--ob-brand) 12%,var(--main-card));display:flex;align-items:center;justify-content:center}
.ob-mr-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.ob-mr-text b{font-size:12.5px;color:var(--main-text)}
.ob-mr-text span{font-size:10.5px;color:var(--main-text-muted)}
.ob-mr-chev{margin-left:auto;color:var(--main-text-muted);font-size:16px}
.ob-ic{display:block;width:18px;height:18px;background:var(--ob-brand);-webkit-mask:var(--ob-ic) center/contain no-repeat;mask:var(--ob-ic) center/contain no-repeat}
.ob-ic-service{--ob-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E")}
.ob-ic-class{--ob-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")}
.ob-ic-series{--ob-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E")}
.ob-ic-membership{--ob-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E")}
.ob-ph-row{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);padding:10px 12px;display:flex;justify-content:space-between;gap:8px;font-size:12px}
.ob-ph-row b{color:var(--ob-brand)}
.ob-ph-empty{margin:auto;text-align:center;color:var(--main-text-muted);font-size:12.5px;line-height:1.5;padding:0 10px}
.ob-ph-foot{font-size:10px;color:var(--main-text-muted);text-align:center;padding:8px;border-top:1px solid var(--main-border);background:var(--main-card)}
@container pfwrap (max-width:860px){.ob-split{grid-template-columns:minmax(0,1fr)}.ob-pv{max-width:280px}.ob-pcard .pf-sec.ob-sub-sec{grid-template-columns:minmax(0,1fr);gap:12px}}

/* Payments and Taxes (139, 2026-10-20): Online Pages cards and sections, one width per section. */
.py-off{opacity:.45;pointer-events:none}
.py-rows{border:1px solid var(--main-border);border-radius:var(--radius);overflow:hidden}
.py-row{display:grid;grid-template-columns:38px minmax(0,1fr) 150px;gap:12px;align-items:center;padding:10px 12px;min-height:56px}
.py-row+.py-row{border-top:1px solid var(--main-border)}
.py-row-2{grid-template-columns:38px minmax(0,1fr)}
.py-row-sel{grid-template-columns:minmax(0,1fr) 170px}
.py-row .bh-toggle{position:relative}
.py-row-t{display:block;font-size:13px;font-weight:700;color:var(--main-text)}
.py-row-d{display:block;font-size:11.5px;color:var(--main-text-muted);margin-top:1px}
.py-warn-text{color:var(--warning-text)}
.py-row select{width:100%;height:38px}
.py-amt{display:flex;align-items:center;gap:6px}
.py-amt.is-hidden{visibility:hidden}
.py-amt input{width:100%;min-width:0;height:38px;background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);color:var(--main-text);padding:0 10px;font-family:Lato,sans-serif;font-size:14px;outline:none}
.py-amt input:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-dim)}
.py-seg{display:inline-flex;align-self:flex-start;border:1px solid var(--main-border);border-radius:var(--radius);overflow:hidden}
.py-seg button{font-family:Lato,sans-serif;font-weight:700;font-size:12.5px;padding:8px 16px;border:0;background:transparent;color:var(--main-text);cursor:pointer}
.py-seg button+button{border-left:1px solid var(--main-border)}
.py-seg button.on{background:var(--purple-dim);color:var(--purple)}
.py-conn{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--main-border);border-radius:var(--radius);padding:12px}
.py-conn-meta{flex:1;min-width:180px;font-size:12px;color:var(--main-text-muted)}
.py-conn-meta b{display:block;color:var(--main-text);font-size:13px}
.py-an-fields{margin-top:12px}
.py-fld-btn{justify-content:flex-end}
.py-how summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--purple);user-select:none}
.py-how-body{font-size:12px;color:var(--main-text-muted);line-height:1.7;margin-top:8px}
.py-how-body b{color:var(--main-text)}
.py-mono{font-family:Menlo,Monaco,monospace;font-size:11px;color:var(--main-text);word-break:break-all;margin:5px 0}
.py-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}
.py-checks label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--main-text);cursor:pointer}
.py-fine{font-size:11.5px;color:var(--main-text-muted);line-height:1.5;margin:0}
.py-more{display:flex;flex-direction:column;gap:6px}
.py-warn{background:var(--warning-dim);border:1px solid var(--warning);border-radius:var(--radius);padding:9px 12px;font-size:12px;color:var(--warning-text)}
.py-one>.form-group{margin:0;display:flex;flex-direction:column;gap:5px}
/* .py-one>.form-group zeroes the margin at the same specificity; this comes after it. */
.py-state,.py-one>.py-state{margin:10px 0 0;max-width:220px}
.py-never{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.py-never-h{font-size:11.5px;font-weight:700;color:var(--main-text-muted);margin-right:2px}
.py-never-i{font-size:11.5px;padding:3px 9px;border-radius:var(--radius-full);border:1px solid var(--main-border);color:var(--main-text-muted)}
/* The Sales Tax row under the price in every item editor (140 taxRowHtml). */
.tax-row{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px 12px;min-height:54px;border:1px solid var(--main-border);border-radius:var(--radius);background:var(--main-card)}
.tax-row.is-ro{background:var(--main-bg)}
.tax-row .bh-toggle{position:relative;flex-shrink:0}
.tax-row-t{flex:1;min-width:0}
.tax-row-h{display:block;font-size:13px;font-weight:700;color:var(--main-text)}
.tax-row-d{display:block;font-size:11.5px;color:var(--main-text-muted);margin-top:1px}
.tax-row .pf-link{white-space:nowrap}
.tax-row-chip-off{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:var(--radius-full);background:var(--purple-dim);color:var(--main-text-muted)}
/* Refund Controls (161), under the cancellation cards. */
.rc-mount:not(:empty){margin-top:16px}
/* Cancellations and Refunds (161, 2026-10-20) in the same cards. */
.py-sum{background:var(--purple-dim);border-radius:var(--radius);padding:10px 12px;font-size:12.5px;line-height:1.55;color:var(--main-text)}
.cx-fee{display:grid;grid-template-columns:repeat(2,minmax(0,170px));gap:10px}
.cx-fee .form-group{margin:0;display:flex;flex-direction:column;gap:5px}
.cx-text-acts{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:-4px}
.cx-sub{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;margin:8px 0 4px}
.cx-sub[hidden]{display:none}
.py-row-d[hidden]{display:none}
.rc-mx{width:100%;border-collapse:collapse;font-size:12.5px;border:1px solid var(--main-border);border-radius:var(--radius);overflow:hidden}
.rc-mx th,.rc-mx td{padding:8px 10px;border-top:1px solid var(--main-border);text-align:center;color:var(--main-text)}
.rc-mx th{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted);border-top:0;background:var(--main-bg)}
.rc-mx td:first-child,.rc-mx th:first-child{text-align:left}
/* Row labels are th scope="row" (2026-10-21) but keep the body cell look. */
.rc-mx tbody th{font-size:inherit;font-weight:400;letter-spacing:0;text-transform:none;color:var(--main-text);background:none;border-top:1px solid var(--main-border)}
.rc-mx .rc-y{color:var(--success-text);font-weight:700}
.rc-mx .rc-n{color:var(--main-text-muted)}
.cx-sub .py-amt{width:170px}
.cx-sub-l{font-size:12px;color:var(--main-text-muted)}
@container pfwrap (max-width:620px){.py-row{grid-template-columns:38px minmax(0,1fr)}.py-row .py-amt{grid-column:2}.py-amt.is-hidden{display:none}.py-row-sel{grid-template-columns:minmax(0,1fr)}.py-checks{grid-template-columns:minmax(0,1fr)}}

/* Required form (188, 2026-10-19): service editor, calendar dot, quick view */
.rf-opts{display:flex;flex-direction:column;gap:10px;margin-top:4px}
/* The display above beats the browser's own [hidden]{display:none}, so the options showed with Form set to None (2026-10-20). */
.rf-opts[hidden]{display:none}
.rf-opt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--main-text)}
.rf-opt input[type=checkbox]{width:16px;height:16px;accent-color:var(--purple)}
.rf-num{width:64px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:6px 8px;font-size:13px}
.rf-num:disabled{opacity:.5}
.rf-note{font-size:12px;color:var(--main-text-muted);line-height:1.5;padding:8px 10px;border-radius:var(--radius);background:var(--bg-card)}
.cal-intake-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--danger-text);flex-shrink:0}
.aqv-intake{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 2px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius)}
.aqv-intake-text{flex:1;min-width:140px;font-size:12px;color:var(--main-text-muted);line-height:1.45}
.intake-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;border:1px solid var(--border);border-radius:999px;padding:2px 9px}
.intake-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.intake-chip.is-bad{color:var(--danger-text)}
.intake-chip.is-ok{color:var(--success-text)}

/* App-wide health banner (187 _emailHealthBannerFrom, 2026-10-20) */
.app-banner{margin:0 0 14px;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius);display:flex;gap:12px;align-items:flex-start;background:var(--bg-card)}
.app-banner-main{flex:1;min-width:0}
.app-banner-title{font-size:13px;font-weight:700;margin-bottom:3px}
.app-banner-text{font-size:12px;color:var(--text);line-height:1.55}
.app-banner .btn{flex-shrink:0}
.app-banner.is-bad{border-color:var(--danger);background:var(--danger-dim)}
.app-banner.is-bad .app-banner-title{color:var(--danger)}
.app-banner.is-warn{border-color:var(--warning-light)}
.app-banner.is-warn .app-banner-title{color:var(--warning-light)}

/* Class roster: required form (188, 2026-10-20) */
.cls-intake{display:flex;align-items:center;gap:6px;color:var(--danger-text)}
.cls-intake-sum{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--main-text-muted);padding:8px 10px;margin:0 0 10px;border:1px solid var(--border);border-radius:var(--radius)}

/* Reminder Times (047, 2026-10-20) */
.rt-panel{margin:0 0 12px;padding:14px 16px;border:1px solid var(--purple-border);border-radius:var(--radius);background:var(--bg-card)}
.rt-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--main-text-muted);margin-bottom:6px}
.rt-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0}
.rt-name{width:120px;font-size:13px;font-weight:600;color:var(--main-text)}
.rt-num,.rt-unit{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:6px 8px;font-size:13px}
.rt-num{width:64px}
.rt-range{font-size:12px;color:var(--main-text-muted)}
.rt-note{font-size:12px;color:var(--main-text-muted);line-height:1.5;margin-top:6px}
.rt-foot{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;flex-wrap:wrap}

/* Settings > Notifications (047, 2026-10-21 redesign): one table style for
   the software, staff, reminder and message grids; topic accordion; tags. */
.nt-lead{margin:0 0 12px}
.nt-tbl{overflow-x:auto;border:1px solid var(--main-border);border-radius:var(--radius)}
.nt-grid{width:100%;border-collapse:collapse;font-size:12.5px}
.nt-grid th{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--main-text-muted);text-align:center;padding:8px 6px;border-bottom:1px solid var(--main-border);white-space:nowrap}
.nt-grid th:first-child{text-align:left;padding-left:12px}
.nt-grid td{padding:8px 6px;border-bottom:1px solid var(--main-border);text-align:center;vertical-align:middle;color:var(--main-text)}
.nt-grid td:first-child{text-align:left;padding-left:12px}
.nt-grid tbody tr:last-child td,.nt-grid tbody tr:last-child th{border-bottom:0}
.nt-grid tbody th.nt-when{text-align:left;padding:8px 6px 8px 12px;font-size:12.5px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--main-text);border-bottom:1px solid var(--main-border)}
.nt-grid input[type=checkbox]{width:16px;height:16px;accent-color:var(--purple);cursor:pointer}
.nt-grid input[type=checkbox]:disabled{cursor:not-allowed;opacity:.55}
.nt-grid td.nt-indent{padding-left:28px}
.nt-grp td{background:var(--main-bg)}
.nt-grp-btn{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--main-text);cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-align:left}
.nt-chev{display:inline-block;color:var(--main-text-muted);transition:transform .15s}
.nt-grp-btn[aria-expanded="true"] .nt-chev,.nt-cat-head[aria-expanded="true"] .nt-chev{transform:rotate(90deg)}
.nt-cnt{font-weight:400;color:var(--main-text-muted)}
.nt-tag{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:var(--radius-full);vertical-align:1px}
.nt-grid td>.nt-tag:only-child{margin-left:0}
.nt-tag-warn{background:var(--warning-dim);color:var(--warning-text)}
.nt-tag-mu{background:var(--purple-dim);color:var(--main-text-muted)}
.nt-dash{color:var(--main-text-muted)}
.nt-sub{display:block;font-size:11.5px;color:var(--main-text-muted);margin-top:2px}
.nt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nt-links{display:flex;gap:14px;justify-content:flex-end;flex-wrap:wrap}
.nt-note{margin:0;font-size:12px;color:var(--main-text-muted);line-height:1.5}
.nt-row{display:flex;align-items:center;gap:10px}
.nt-sw-lbl{font-weight:700;font-size:13px;color:var(--main-text)}
.nt-times{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--main-text-muted)}
.nt-times input[type=time]{width:auto}
.nt-select{max-width:340px}
.nt-warn{font-size:12.5px;color:var(--warning-text);background:var(--warning-dim);border-radius:var(--radius);padding:8px 10px}
.nt-err{color:var(--danger-text)}
.nt-cat-list{display:flex;flex-direction:column;border:1px solid var(--main-border);border-radius:var(--radius);overflow:hidden}
.nt-cat+.nt-cat{border-top:1px solid var(--main-border)}
.nt-cat-head{width:100%;display:flex;align-items:center;gap:8px;border:0;background:var(--main-bg);padding:10px 12px;cursor:pointer;text-align:left;font:inherit;font-weight:700;font-size:13px;color:var(--main-text)}
.nt-cat-sum{margin-left:auto;font-weight:400;font-size:12px;color:var(--main-text-muted)}
.nt-cat .nt-tbl{border:0;border-radius:0;border-top:1px solid var(--main-border)}
@media (prefers-reduced-motion:reduce){.nt-chev{transition:none}}
.nt-ask-title{font-family:'Exo 2',sans-serif;font-weight:700;font-size:13px;color:var(--main-text);margin:4px 0 6px}
.nt-quiet{display:flex;flex-direction:column;gap:12px}
/* My Profile, Notifications tab (040, 2026-10-21 redesign): the nt-grid table. */
.nt-pane{display:flex;flex-direction:column;gap:12px}
.nt-grid tr.nt-off td{opacity:.55}
.nt-grid select.nt-win{width:auto;padding:4px 6px;font-size:12px}

/* Plan and Billing (2026-10-21): four cards in the Settings design language.
   Meters, the Change Plan tiers and the credit packs are buttons and meters,
   so the keyboard and screen readers reach them. */
.bil-card .ob-pcard-head+.pf-sec,.bil-card .msg-stop+.pf-sec{border-top:0}
.bil-pad{padding:18px 24px}
.bil-line{font-size:13px;line-height:1.55;color:var(--main-text)}
.bil-line.is-warn{color:var(--warning-text)}
.bil-mu{color:var(--main-text-muted)}
.bil-row{display:flex;gap:8px;flex-wrap:wrap}
.bil-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bil-price b{font-family:'Exo 2',sans-serif;font-size:28px;font-weight:800;color:var(--main-text)}
.bil-price s{color:var(--main-text-muted);font-weight:700}
.bil-inc{margin:0;padding-left:18px;color:var(--main-text-muted);font-size:12.5px;line-height:1.7}
.msg-stop.is-warn{background:var(--warning-dim);color:var(--warning-text)}
.bil-card .msg-stop{margin:14px 24px}
.bil-meters{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.bil-m-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--main-text)}
.bil-m-n{font-variant-numeric:tabular-nums;color:var(--main-text-muted);font-weight:700}
.bil-buy{margin-left:8px}
.bil-m-note{font-size:11.5px;color:var(--main-text-muted);margin-top:4px;line-height:1.5}
.bil-m-note.is-warn{color:var(--warning-text)}
.bil-m-note.is-bad{color:var(--danger-text)}
.bil-bar{height:8px;background:var(--main-bg);border-radius:var(--radius-full);overflow:hidden;margin-top:6px}
.bil-bar-fill{display:block;height:100%;background:var(--purple);border-radius:var(--radius-full);transition:width .3s}
.bil-bar-fill.near{background:var(--warning)}
.bil-bar-fill.over{background:var(--danger)}
@media (prefers-reduced-motion:reduce){.bil-bar-fill{transition:none}}
.bil-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.bil-grid .form-group{margin:0}
.bil-packs{display:grid;gap:10px;margin-top:12px}
.bil-pack{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--main-border);background:var(--main-bg);border-radius:var(--radius);font:inherit;font-size:13px;color:var(--main-text);cursor:pointer;text-align:left}
.bil-pack[aria-pressed="true"],.bil-tier[aria-pressed="true"]{border-color:var(--purple);box-shadow:0 0 0 1px var(--purple)}
.bil-seg{display:inline-flex;gap:4px;padding:3px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:var(--radius);margin-bottom:14px}
.bil-seg .btn{border:0}
.bil-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.bil-tier{position:relative;display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px;border:1px solid var(--main-border);background:var(--main-bg);border-radius:var(--radius);font:inherit;font-size:13px;color:var(--main-text);cursor:pointer}
.bil-tier-name{font-family:'Exo 2',sans-serif;font-weight:700;font-size:14px}
.bil-tier-cur{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--purple)}
.bil-quote{margin-top:14px;padding:12px 14px;background:var(--main-bg);border-radius:var(--radius);display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.5;color:var(--main-text)}
.bil-quote>div{display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums}
.bil-quote .is-bad{color:var(--danger-text)}
.bil-terms{max-height:240px;overflow:auto;border:1px solid var(--divider);border-radius:var(--radius);padding:12px 14px;margin:12px 0 14px;background:var(--main-bg);font-size:11.5px;line-height:1.55;color:var(--main-text-muted)}
.bil-terms p{margin:0 0 6px}
.bil-terms-t{font-weight:800;font-size:13px;color:var(--main-text);text-align:center;margin-bottom:8px}
.bil-terms-h{font-weight:700;font-size:12px;color:var(--main-text);margin:10px 0 4px}
.bil-check{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--main-text);line-height:1.5;margin-top:12px}
.bil-check input{margin-top:3px}
.bil-err{color:var(--danger-text);font-size:12px;margin-top:6px;min-height:18px}
.bil-table-wrap{overflow-x:auto}
.bil-table{width:100%;border-collapse:collapse;font-size:13px;color:var(--main-text)}
.bil-table th{padding:0 10px 6px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--main-text-muted);text-align:left;font-weight:700}
.bil-table td{padding:8px 10px;border-top:1px solid var(--divider);vertical-align:top}
.bil-num{text-align:right;white-space:nowrap}
.bil-table th.bil-num{text-align:right}
.bil-nowrap{white-space:nowrap}
@container pfwrap (max-width:860px){.bil-pad{padding:16px 18px}.bil-card .msg-stop{margin:14px 18px}}
/* Jump to Date drawer: quick jumps, empty-day actions, lighter overlay on wide screens */
.caljump-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.caljump-quick-btn{background:transparent;border:1px solid var(--border);border-radius:var(--radius-full);color:var(--text-muted);font-size:11px;font-weight:700;padding:5px 10px;cursor:pointer;transition:color .12s,border-color .12s,background .12s}
.caljump-quick-btn:hover{color:var(--main-text);border-color:var(--main-text-muted);background:var(--main-card-hover)}
.caljump-quick-btn.active{color:var(--purple);border-color:var(--purple-border);background:var(--purple-dim)}
.caljump-empty-actions{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:14px}
.caljump-next{font-size:12px;color:var(--main-text-muted)}
.caljump-next-link{background:none;border:none;padding:0;color:var(--purple);font-size:12px;font-weight:700;cursor:pointer}
.caljump-next-link:hover{text-decoration:underline}
@media (min-width:761px){body #caljump-overlay.open{opacity:.35}}
/* ============ UTILITY LAYER (June 9 2026) - Phase 1 of inline-style migration ============ */
/* Token-backed utility classes. Every value references a :root token, never raw px.
   Built from the June 9 inline-style catalog (top static declarations).
   Color utilities intentionally NOT built: color is already token-backed inline.
   Padding PAIRS and off-grid values intentionally NOT built: they surface in Phase 3 review.
   .hidden and .clickable already existed and are reused, not redefined.
   See MySpark-Inline-Style-Migration-Spec.md. */

/* Font size */
.fs-10{font-size:var(--fs-10)}.fs-11{font-size:var(--fs-11)}.fs-12{font-size:var(--fs-12)}
.fs-13{font-size:var(--fs-13)}.fs-14{font-size:var(--fs-14)}.fs-16{font-size:var(--fs-16)}
.fs-18{font-size:var(--fs-18)}.fs-20{font-size:var(--fs-20)}.fs-22{font-size:var(--fs-22)}

/* Font weight */
.fw-400{font-weight:var(--fw-400)}.fw-500{font-weight:var(--fw-500)}.fw-600{font-weight:var(--fw-600)}
.fw-700{font-weight:var(--fw-700)}.fw-800{font-weight:var(--fw-800)}

/* Line height */
.lh-10{line-height:var(--lh-10)}.lh-12{line-height:var(--lh-12)}.lh-13{line-height:var(--lh-13)}
.lh-14{line-height:var(--lh-14)}.lh-15{line-height:var(--lh-15)}.lh-16{line-height:var(--lh-16)}
.lh-17{line-height:var(--lh-17)}

/* Margin bottom */
.mb-0{margin-bottom:var(--space-0)}.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}
.mb-6{margin-bottom:var(--space-6)}.mb-8{margin-bottom:var(--space-8)}.mb-10{margin-bottom:var(--space-10)}
.mb-12{margin-bottom:var(--space-12)}.mb-14{margin-bottom:var(--space-14)}.mb-16{margin-bottom:var(--space-16)}
.mb-18{margin-bottom:var(--space-18)}.mb-20{margin-bottom:var(--space-20)}.mb-24{margin-bottom:var(--space-24)}

/* Margin top */
.mt-0{margin-top:var(--space-0)}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}
.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}.mt-10{margin-top:var(--space-10)}
.mt-12{margin-top:var(--space-12)}.mt-14{margin-top:var(--space-14)}.mt-16{margin-top:var(--space-16)}

/* Gap */
.gap-2{gap:var(--space-2)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}
.gap-8{gap:var(--space-8)}.gap-10{gap:var(--space-10)}.gap-12{gap:var(--space-12)}
.gap-14{gap:var(--space-14)}.gap-16{gap:var(--space-16)}

/* Padding (single-value only; pairs deferred to Phase 3) */
.pad-4{padding:var(--space-4)}.pad-6{padding:var(--space-6)}.pad-8{padding:var(--space-8)}
.pad-10{padding:var(--space-10)}.pad-12{padding:var(--space-12)}.pad-14{padding:var(--space-14)}
.pad-16{padding:var(--space-16)}

/* Layout primitives */
.u-flex{display:flex}.u-grid{display:grid}.u-block{display:block}
.flex-center{display:flex;align-items:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.flex-col{display:flex;flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}
.w-full{width:100%}

/* Text */
.text-upper{text-transform:uppercase}.text-center{text-align:center}

/* Color (added June 9 2026, batch 2b recon) - unlocks multi-property migration.
   These wrap already-token-backed color values so multi-prop attributes whose
   only unmappable piece was color become fully mappable. See migration spec. */
.txt-muted{color:var(--text-muted)}.txt-main-muted{color:var(--main-text-muted)}
.txt{color:var(--text)}.txt-main{color:var(--main-text)}.txt-dim{color:var(--text-dim)}
.txt-orange{color:var(--orange-text)}
.bg-card{background:var(--bg-card)}.bg-input{background:var(--bg-input)}
.bg-main-card{background:var(--main-card)}.bg-main-input{background:var(--main-input)}