/* ==========================================================================
   knd.css — KR App Design System
   v2.0.0 · Kindful Restoration · 2026-04-10

   Table of contents
   -----------------
   §01  Design tokens (:root) — colors, typography, spacing, z-index, motion
   §02  Reset + base HTML
   §03  Page themes (.knd-page, .knd-page--portal)
   §04  Navigation (.knd-nav, .g-nav, command palette)
   §05  Buttons (.btn, .btn-primary, .knd-btn + variants)
   §06  Cards (.knd-card, .card, .plan-card)
   §07  Form elements (.form-input, .form-select, .form-field, validation)
   §08  Badges (.knd-badge, .status-badge + clinical status)
   §09  Tables (.knd-table, .table-wrap, sortable, sticky)
   §10  Modals (.modal-overlay, .modal-box, size variants)
   §11  (reserved — edit drawer removed 2026-04-10; profile uses inline-edit rows)
   §12  Toast + alert bars (.knd-toast, .alert-bar)
   §13  Spinner + loading states (.knd-spinner, .skeleton)
   §14  Empty states (.empty-state)
   §15  Pill + chip system (.chip, .filter-chip, .status-chip)
   §16  Avatars (.avatar, sizes xs–xl)
   §17  Tooltips + popovers ([data-tip])
   §18  Progress bars (.progress-bar)
   §19  Toggle switches (.toggle-switch)
   §20  Grid + layout helpers (.grid-2/3/4, .grid-sidebar)
   §21  Portal launcher (app-grid, app-card)
   §22  Page-specific styles (CRM, ECM, IHSP, HP, Docs, Comms, Settings)
   §23  Print styles
   §24  Utility overrides

   Breakpoints (use these exact values in @media queries):
     480px  → xs (mobile portrait)
     640px  → sm (mobile landscape)
     768px  → md (tablet portrait)
     1024px → lg (tablet landscape / clinical workstation)
     1280px → xl (desktop)
   ========================================================================== */


/* --------------------------------------------------------------------------
   §01 Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand — periwinkle purple-blue, per portal-redesign-mockup.html */
  --color-brand:           #667eea;
  --color-brand-dark:      #764ba2;
  --color-brand-gradient:  linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --color-brand-light:     #f0f4ff;
  --color-brand-border:    #b3c2f8;

  /* Portal (dark) */
  --color-portal-bg:       linear-gradient(160deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);

  /* Surfaces */
  --color-surface:         #ffffff;
  --color-bg:              #f7fafc;
  --color-bg-2:            #edf2f7;
  --color-border:          #e2e8f0;
  --color-border-light:    #f7fafc;

  /* Text */
  --color-text:            #2d3748;
  --color-text-2:          #374151;
  --color-text-secondary:  #4a5568;
  --color-text-muted:      #718096;
  --color-text-xmuted:     #9ca3af;
  --color-text-inverse:    #ffffff;

  /* Status */
  --color-success:         #276749;
  --color-success-bg:      #f0fff4;
  --color-success-border:  #9ae6b4;
  --color-warning:         #92400e;
  --color-warning-bg:      #fffbeb;
  --color-warning-border:  #fcd34d;
  --color-danger:          #c53030;
  --color-danger-bg:       #fff5f5;
  --color-danger-border:   #feb2b2;
  --color-info:            #2b6cb0;
  --color-info-bg:         #ebf8ff;
  --color-info-border:     #90cdf4;

  /* AI assistant */
  --ai-bg:   #f9f7ff;
  --ai-bdr:  #c4b5fd;
  --ai-text: #6d28d9;

  /* ECM status — referred (purple) */
  --status-referred-bg:        #faf5ff;
  --status-referred:           #553c9a;
  --status-referred-border:    #d6bcfa;

  /* Status badges */
  --status-enrolled-bg:        #f0fff4;
  --status-enrolled:           #276749;
  --status-enrolled-border:    #9ae6b4;
  --status-scheduled-bg:       #ebf8ff;
  --status-scheduled:          #2b6cb0;
  --status-scheduled-border:   #90cdf4;
  --status-pending-bg:         #fffbeb;
  --status-pending:            #92400e;
  --status-pending-border:     #fcd34d;
  --status-noshow-bg:          #f7fafc;
  --status-noshow:             #4a5568;
  --status-noshow-border:      #cbd5e0;
  --status-onhold-bg:          #fff5f0;
  --status-onhold:             #c05621;
  --status-onhold-border:      #fbd38d;
  --status-discharged-bg:      #fff5f5;
  --status-discharged:         #c53030;
  --status-discharged-border:  #feb2b2;
  --status-unsigned-bg:        #fffbeb;
  --status-unsigned:           #92400e;
  --status-unsigned-border:    #fcd34d;
  --status-signed-bg:          #f0fff4;
  --status-signed:             #276749;
  --status-signed-border:      #9ae6b4;

  /* Calendar + program badge accent colors */
  --cal-deadline:              #f6ad55;
  --prog-ecm:                  #7c3aed;
  --prog-hp:                   #0369a1;

  /* Program badge chip colors (docs-prog-badge, doc-prog-badge) */
  --prog-badge-ecm-bg:         #ede9fe;
  --prog-badge-ecm-text:       #5b21b6;
  --prog-badge-chw-bg:         #dcfce7;
  --prog-badge-chw-text:       #166534;
  --prog-badge-hp-bg:          #fef9c3;
  --prog-badge-hp-text:        #713f12;
  --prog-badge-ihsp-bg:        #dbeafe;
  --prog-badge-ihsp-text:      #1e40af;

  /* Spacing (4px base unit) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Border radii */
  --radius-sm:   4px;
  --radius:      6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.30);

  /* Typography — sizes */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-2xs:  10px;  /* legal/dense metadata (badges, microlabels) */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-meta: 12px;  /* table metadata, captions, secondary UI text */

  /* Typography — weights */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Typography — line heights */
  --leading-tight: 1.3;   /* headings, dense table rows */
  --leading-base:  1.5;   /* labels, small text */
  --leading-body:  1.6;   /* body text, descriptions */

  /* Typography — letter spacing */
  --tracking-tight:  -0.01em;  /* large headings */
  --tracking-normal:  0;       /* body text */
  --tracking-wide:    0.5px;   /* uppercase labels, overlines */

  /* Spacing (4px base) — extended */
  --space-0:  0px;
  --space-16: 64px;

  /* Layout */
  --nav-height:         62px;
  --banner-height:      46px;
  --sidebar-width:      210px;
  --staging-bar-height: 0px;   /* overridden to 30px on body.is-staging */

  /* Container widths */
  --container-sm: 860px;
  --container-md: 960px;
  --container-lg: 1100px;

  /* Z-index layer map */
  --z-base:     1;      /* in-flow raised elements */
  --z-sticky:   10;     /* sticky table headers, member banner */
  --z-dropdown: 100;    /* inline dropdowns, popovers, datepickers */
  --z-drawer:   200;    /* slide-in edit panels */
  --z-modal:    300;    /* dialog overlays */
  --z-toast:    400;    /* toast notifications */
  --z-tooltip:  500;    /* floating tooltips */
  --z-nav:      600;    /* top nav bar (always on top) */
  --z-critical: 9000;   /* emergency overlays (session expiry) */

  /* Transitions & motion */
  --transition:        var(--transition-base) ease;
  --transition-fast:   80ms ease;
  --transition-base:   150ms ease;
  --transition-slow:   250ms ease;
  --transition-reveal: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fade:   150ms ease-in-out;

  /* Opacity */
  --opacity-disabled: 0.5;
  --opacity-overlay:  0.6;

  /* Focus ring */
  --focus-ring-width:  2px;
  --focus-ring-offset: 2px;
  --focus-ring-color:  var(--color-brand);
}


/* --------------------------------------------------------------------------
   §02 Reset + base HTML
   -------------------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { max-width: 100%; display: block; }

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

/* Focus rings — visible for keyboard nav only */
:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
/* Suppress outline on mouse-click (keyboard focus rings preserved above) */
:focus:not(:focus-visible) {
  outline: none;
}


/* --------------------------------------------------------------------------
   §03 Page themes (.knd-page, .knd-page--portal)
   -------------------------------------------------------------------------- */

/* App pages: brand gradient background, centered/scrollable */
.knd-page {
  background: var(--color-brand-gradient);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Portal launcher: dark navy */
.knd-page--portal {
  background: var(--color-portal-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Page content wrapper — constrains and pads app page content */
.knd-page-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-5);
}

/* Full-width page body (e.g. forms list) */
.knd-page-body--full {
  justify-content: flex-start;
  padding: var(--space-8) var(--space-8);
}

/* Content max-width containers */
.knd-container       { width: 100%; max-width:  860px; margin: 0 auto; }
.knd-container--wide { width: 100%; max-width:  960px; margin: 0 auto; }
.knd-container--lg   { width: 100%; max-width: 1100px; margin: 0 auto; }


/* --------------------------------------------------------------------------
   §04a Nav bar (.knd-nav, .knd-nav--portal)
   -------------------------------------------------------------------------- */

/* App nav — gradient bar, used on all non-portal pages */
.knd-nav {
  width: 100%;
  background: rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  padding: 0 var(--space-8);
  height: 60px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 999; /* above widget backdrop (998) so nav trigger stays clickable */
}

.knd-nav-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  pointer-events: none; /* let clicks pass through to buttons behind it */
}
.knd-nav-center > * { pointer-events: auto; }

.knd-nav-logo {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  object-fit: contain;
}

.knd-nav-title {
  color: var(--color-text-inverse);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.2px;
}

.knd-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.knd-nav-user {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-sm);
  font-weight: 500;
  padding-right: var(--space-3);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

/* Transparent ghost buttons for use inside the nav */
.knd-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.90);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.knd-nav-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.40);
  color: white;
}

/* Portal nav — semi-transparent on dark bg */
.knd-nav--portal {
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 var(--space-10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.knd-nav-brand {
  display: flex;
  align-items: center;
}

.knd-nav--portal .knd-nav-brand-logo {
  width: 52px;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.knd-nav--portal .knd-nav-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: white;
}


/* --------------------------------------------------------------------------
   §05 Buttons (.knd-btn + variants)
   -------------------------------------------------------------------------- */

.knd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), transform var(--transition),
              box-shadow var(--transition), opacity var(--transition),
              border-color var(--transition);

  /* Default = primary */
  background: var(--color-brand);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-sm);
}

.knd-btn:hover {
  background: var(--color-brand-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  color: var(--color-text-inverse);
}

.knd-btn:active  { transform: translateY(0); }
.knd-btn:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }

/* Secondary */
.knd-btn--secondary {
  background: var(--color-surface);
  color: var(--color-brand);
  border: 1.5px solid var(--color-brand);
  box-shadow: none;
}

.knd-btn--secondary:hover {
  background: var(--color-brand-light);
  color: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

/* Ghost (on white backgrounds) */
.knd-btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border: none;
  box-shadow: none;
}

.knd-btn--ghost:hover {
  background: var(--color-bg);
  color: var(--color-brand);
  box-shadow: none;
  transform: none;
}

/* Ghost on gradient/dark backgrounds */
.knd-btn--ghost-inv {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.90);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: none;
}

.knd-btn--ghost-inv:hover {
  background: rgba(255, 255, 255, 0.22);
  color: white;
  box-shadow: none;
}

/* Danger */
.knd-btn--danger {
  background: var(--color-danger);
  color: var(--color-text-inverse);
}

.knd-btn--danger:hover { background: #c53030; color: white; }

/* Sizes */
.knd-btn--sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

.knd-btn--lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-md);
}

/* Loading / disabled state */
.knd-btn--loading,
.knd-btn:disabled {
  opacity: 0.70;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}


/* --------------------------------------------------------------------------
   §06 Cards (.knd-card)
   -------------------------------------------------------------------------- */

.knd-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.knd-card-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.knd-card-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.2px;
}

.knd-card-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.knd-card-body { padding: var(--space-6); }

.knd-card-footer {
  padding: var(--space-4) var(--space-6);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}


/* --------------------------------------------------------------------------
   §07 Form elements (.knd-input, .knd-select, .knd-textarea, labels)
   -------------------------------------------------------------------------- */

.knd-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.knd-input,
.knd-select,
.knd-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
  line-height: 1.5;
}

.knd-input:focus,
.knd-select:focus,
.knd-textarea:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.knd-input::placeholder,
.knd-textarea::placeholder { color: var(--color-text-muted); }

.knd-select {
  appearance: none;
  padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23718096' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

.knd-textarea { resize: vertical; }

/* State modifiers */
.knd-input--error,
.knd-textarea--error,
.knd-select--error {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.10);
}

.knd-input--success { border-color: var(--color-success); }

/* Helper / error text below inputs */
.knd-field-help  { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); }
.knd-field-error { font-size: var(--text-xs); color: var(--color-danger);     margin-top: var(--space-2); }

/* Form group and grid helpers */
.knd-form-group { margin-bottom: var(--space-5); }
.knd-form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }


/* --------------------------------------------------------------------------
   §08a Badges (.knd-badge + variants)
   -------------------------------------------------------------------------- */

.knd-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-pill);
  line-height: 1.4;
  white-space: nowrap;
}

.knd-badge--live        { background: var(--color-success-bg); color: var(--color-success); }
.knd-badge--maintenance { background: var(--color-warning-bg); color: var(--color-warning); }
.knd-badge--coming-soon { background: var(--color-info-bg);    color: var(--color-info); }
.knd-badge--external    { background: rgba(113,128,150,0.10);  color: var(--color-text-secondary); }
.knd-badge--draft       { background: var(--color-brand-light); color: var(--color-brand-dark); }
.knd-badge--danger      { background: var(--color-danger-bg);  color: var(--color-danger); }
.knd-badge--info        { background: var(--color-info-bg);    color: var(--color-info); }

/* Pulse dot for live badge */
.knd-pulse-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  animation: knd-pulse 2s ease-in-out infinite;
}

@keyframes knd-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}


/* Status badge — global semantic badge used across all micro-apps */
.status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600;
  border: 1px solid;
  white-space: nowrap;
}
.status-badge.enrolled   { background: var(--status-enrolled-bg);   color: var(--status-enrolled);   border-color: var(--status-enrolled-border); }
.status-badge.scheduled  { background: var(--status-scheduled-bg);  color: var(--status-scheduled);  border-color: var(--status-scheduled-border); }
.status-badge.pending    { background: var(--status-pending-bg);    color: var(--status-pending);    border-color: var(--status-pending-border); }
.status-badge.no-show    { background: var(--status-noshow-bg);     color: var(--status-noshow);     border-color: var(--status-noshow-border); }
.status-badge.on-hold    { background: var(--status-onhold-bg);     color: var(--status-onhold);     border-color: var(--status-onhold-border); }
.status-badge.discharged { background: var(--status-discharged-bg); color: var(--status-discharged); border-color: var(--status-discharged-border); }
.status-badge.signed     { background: var(--status-signed-bg);     color: var(--status-signed);     border-color: var(--status-signed-border); }
.status-badge.unsigned   { background: var(--status-unsigned-bg);   color: var(--status-unsigned);   border-color: var(--status-unsigned-border); }
.status-badge.draft      { background: var(--color-bg);             color: var(--color-text-muted);  border-color: var(--color-border); }
.status-badge.complete   { background: var(--color-info-bg);        color: var(--color-info);        border-color: var(--color-info-border); }


/* --------------------------------------------------------------------------
   §09 Tables (.knd-table)
   -------------------------------------------------------------------------- */

.knd-table-wrap {
  margin: 0 var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--color-surface);
}

.knd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.knd-table thead tr { background: var(--color-bg); }

.knd-table th {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  text-align: left;
  background: var(--color-bg-2);
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}

.knd-table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.knd-table tr:last-child td { border-bottom: none; }

.knd-table tbody tr:hover td { background: var(--color-brand-light); }


/* --------------------------------------------------------------------------
   §10 Modals (.knd-modal)
   -------------------------------------------------------------------------- */

.knd-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.knd-overlay.is-open { display: flex; }

.knd-modal {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: knd-modal-in 0.18s ease;
}

@keyframes knd-modal-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.knd-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.knd-modal-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
}

.knd-modal-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}

.knd-modal-close:hover { background: var(--color-bg); color: var(--color-text); }

.knd-modal-body {
  padding: var(--space-3) var(--space-6);
  color: var(--color-text-secondary);
  overflow-y: auto;
  flex: 1;
}

.knd-modal-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-shrink: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Modal subtitle — small descriptor below modal title */
.knd-modal-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
  font-weight: 400;
}

/* Modal section — grouped field block with label and divider */
.modal-section {
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.modal-section--last {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.modal-section__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.modal-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-3);
}
/* Required field asterisk */
.form-req {
  color: var(--color-danger, #e53e3e);
  margin-left: 2px;
}


/* --------------------------------------------------------------------------
   §12 Toast notifications (.knd-toast)
   -------------------------------------------------------------------------- */

#knd-toast-root {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
}

.knd-toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  max-width: 380px;
  pointer-events: all;
  animation: knd-toast-in 0.2s ease;
}

@keyframes knd-toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

.knd-toast--success { background: #f0fff4; color: #276749; border-left: 4px solid var(--color-success); }
.knd-toast--error   { background: #fff5f5; color: #c53030; border-left: 4px solid var(--color-danger);  }
.knd-toast--info    { background: #ebf8ff; color: #2b6cb0; border-left: 4px solid var(--color-info);    }
.knd-toast--warning { background: #fffaf0; color: #7b341e; border-left: 4px solid var(--color-warning); }

.knd-toast-icon { font-size: var(--text-md); flex-shrink: 0; }
.knd-toast-msg  { flex: 1; }


/* --------------------------------------------------------------------------
   §13 Spinner (.knd-spinner)
   -------------------------------------------------------------------------- */

.knd-spinner {
  display: inline-block;
  border-radius: 50%;
  border: 2px solid rgba(102, 126, 234, 0.20);
  border-top-color: var(--color-brand);
  animation: knd-spin 0.7s linear infinite;
  flex-shrink: 0;

  /* default size */
  width: 20px;
  height: 20px;
}

.knd-spinner--sm  { width: 14px; height: 14px; border-width: 1.5px; }
.knd-spinner--lg  { width: 32px; height: 32px; border-width: 3px;   }

.knd-spinner--white {
  border-color: rgba(255, 255, 255, 0.25);
  border-top-color: white;
}

@keyframes knd-spin { to { transform: rotate(360deg); } }


/* --------------------------------------------------------------------------
   §12b Info / alert blocks
   -------------------------------------------------------------------------- */

.knd-info-block {
  background: var(--color-info-bg);
  border-left: 4px solid var(--color-info);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.knd-info-block h3 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.knd-info-block ul { margin-left: var(--space-5); margin-top: var(--space-2); }
.knd-info-block li { margin-bottom: var(--space-1); }

.knd-error-block {
  background: var(--color-danger-bg);
  border: 1px solid rgba(229, 62, 62, 0.25);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  color: #c53030;
}

/* Full-page error/access-denied screens (403, 500) */
.knd-error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: var(--space-8);
}
.knd-error-page__icon {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-4);
  opacity: 0.4;
}
.knd-error-page__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
  color: var(--color-text);
}
.knd-error-page__body {
  color: var(--color-text-muted);
  max-width: 420px;
  line-height: var(--leading-body);
}
.knd-error-page__btn {
  margin-top: var(--space-6);
  padding: var(--space-2) var(--space-5);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}


/* --------------------------------------------------------------------------
   §13b Loading skeletons (.skeleton)
   Use skeletons (not spinners) when data load > 200ms is expected.
   Spinner only for in-flight button actions.
   -------------------------------------------------------------------------- */

.skeleton {
  background: linear-gradient(90deg, var(--color-bg-2) 25%, var(--color-bg) 50%, var(--color-bg-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.4s ease infinite;
  border-radius: var(--radius);
}
@keyframes skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-text   { height: 14px; margin-bottom: 8px; }
.skeleton-title  { height: 20px; width: 60%; margin-bottom: 12px; }
.skeleton-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.skeleton-badge  { width: 80px; height: 22px; border-radius: var(--radius-pill); }
.skeleton-row    { height: 44px; margin-bottom: 4px; }
.skeleton-card   { height: 120px; border-radius: var(--radius-lg); }


/* --------------------------------------------------------------------------
   §14 Empty states (.empty-state)
   Every list, table, and feed must have an empty state. Never leave blank.
   -------------------------------------------------------------------------- */

.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-8);
}
.empty-state-icon {
  font-size: 40px;
  margin-bottom: var(--space-4);
  opacity: 0.5;
}
.empty-state-title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.empty-state-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  max-width: 360px;
  margin-inline: auto;
  line-height: var(--leading-body);
}


/* --------------------------------------------------------------------------
   §15 Pill + chip system (.chip)
   Consolidates filter-chip, task-meta-pill, status-chip into one system.
   -------------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  cursor: default;
  white-space: nowrap;
  line-height: var(--leading-base);
}
.chip--interactive {
  cursor: pointer;
  transition: var(--transition-base);
}
.chip--interactive:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
  background: var(--color-brand-light);
}
.chip--active   { border-color: var(--color-brand); color: var(--color-brand); background: var(--color-brand-light); }
.chip--success  { border-color: var(--color-success-border); color: var(--color-success); background: var(--color-success-bg); }
.chip--warning  { border-color: var(--status-unsigned-border); color: var(--status-unsigned); background: var(--status-unsigned-bg); }
.chip--danger   { border-color: var(--color-danger-border); color: var(--color-danger); background: var(--color-danger-bg); }
.chip--info     { border-color: var(--color-info-border); color: var(--color-info); background: var(--color-info-bg); }
.chip--neutral  { border-color: var(--color-border); color: var(--color-text-muted); background: var(--color-bg); }


/* --------------------------------------------------------------------------
   §16 Avatars (.avatar)
   Initials-based by default. Add .avatar-photo for image variant.
   -------------------------------------------------------------------------- */

.avatar {
  border-radius: 50%;
  background: var(--color-brand-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  color: white;
  flex-shrink: 0;
  line-height: 1;
}
.avatar-xs  { width: 22px; height: 22px; font-size: 9px; }
.avatar-sm  { width: 28px; height: 28px; font-size: 10px; }
.avatar-md  { width: 36px; height: 36px; font-size: 13px; }
.avatar-lg  { width: 48px; height: 48px; font-size: 16px; }
.avatar-xl  { width: 64px; height: 64px; font-size: 22px; }
.avatar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}


/* --------------------------------------------------------------------------
   §12c Alert bars (.alert-bar)
   Persistent compliance/system alerts. Left-border accent.
   -------------------------------------------------------------------------- */

.alert-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  border-left: 4px solid;
}
.alert-bar--unsigned { background: var(--status-unsigned-bg); color: var(--status-unsigned); border-color: var(--status-unsigned-border); }
.alert-bar--critical { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger-border); }
.alert-bar--info     { background: var(--color-info-bg); color: var(--color-info); border-color: var(--color-info-border); }
.alert-bar--success  { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); }
.alert-bar--warning  { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning-border); }


/* --------------------------------------------------------------------------
   §10d Modal size variants (.modal-box--*)
   -------------------------------------------------------------------------- */

.modal-box--sm   { max-width: 440px; }
.modal-box--md   { max-width: 620px; }
.modal-box--lg   { max-width: 800px; }
.modal-box--xl   { max-width: 960px; }
.modal-box--full { max-width: 96vw; }


/* --------------------------------------------------------------------------
   §07c Unified form field wrapper (.form-field)
   Label + input + hint/error coupling. Use for all new forms.
   -------------------------------------------------------------------------- */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.form-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}
.form-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.form-error {
  font-size: var(--text-xs);
  color: var(--color-danger);
  font-weight: var(--font-weight-medium);
}
.form-field--error .form-input,
.form-field--error .form-select {
  border-color: var(--color-danger);
}
.form-field--error .form-input:focus,
.form-field--error .form-select:focus {
  box-shadow: 0 0 0 3px var(--color-danger-bg);
}
.form-field--success .form-input,
.form-field--success .form-select {
  border-color: var(--color-success-border);
}


/* --------------------------------------------------------------------------
   §18 Progress bars (.progress-bar)
   -------------------------------------------------------------------------- */

.progress-bar {
  height: 6px;
  background: var(--color-bg-2);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  transition: width var(--transition-slow); /* allow-jank: progress bar visual fill */
}
.progress-bar-fill--success { background: var(--color-success); }
.progress-bar-fill--warning { background: var(--color-warning); }
.progress-bar-fill--danger  { background: var(--color-danger); }
.progress-bar--lg { height: 10px; }


/* --------------------------------------------------------------------------
   §19 Toggle switches (.toggle-switch)
   Boolean on/off for settings. Replaces checkboxes where appropriate.
   -------------------------------------------------------------------------- */

.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
  user-select: none;
}
.toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-track {
  width: 36px;
  height: 20px;
  background: var(--color-border);
  border-radius: var(--radius-pill);
  transition: background var(--transition-base);
  flex-shrink: 0;
  position: relative;
}
.toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform var(--transition-base);
  box-shadow: var(--shadow-sm);
}
.toggle-switch input:checked + .toggle-track {
  background: var(--color-brand);
}
.toggle-switch input:checked + .toggle-track::after {
  transform: translateX(16px);
}
.toggle-switch input:focus-visible + .toggle-track {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}
.toggle-switch input:disabled + .toggle-track {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}


/* --------------------------------------------------------------------------
   §20 Grid + layout helpers
   -------------------------------------------------------------------------- */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.grid-sidebar { display: grid; grid-template-columns: var(--sidebar-width) 1fr; gap: var(--space-6); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-sidebar { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}


/* --------------------------------------------------------------------------
   §21 Portal launcher (app-grid & app-card)
   -------------------------------------------------------------------------- */

/* Hero */
.knd-portal-hero {
  text-align: center;
  padding: var(--space-12) var(--space-5) var(--space-10);
}

.knd-portal-hero h2 {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: white;
  letter-spacing: -0.5px;
  margin-bottom: var(--space-3);
}

.knd-portal-hero p {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.50);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.6;
}

/* App grid */
.knd-app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-6);
  width: 100%;
  max-width: 960px;
  padding: 0 var(--space-10) var(--space-12);
}

/* App card */
.knd-app-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-xl);
  padding: 28px var(--space-6) var(--space-6);
  text-decoration: none;
  color: white;
  transition: background var(--transition), border-color var(--transition),
              transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.knd-app-card:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.40);
  color: white;
}

.knd-app-card.is-disabled {
  opacity: 0.50;
  cursor: default;
  pointer-events: none;
}

.knd-app-card.is-maintenance {
  opacity: 0.65;
  cursor: default;
  pointer-events: none;
}

/* Accent strip at top of card */
.knd-app-card-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

/* App icon */
.knd-app-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  margin-bottom: var(--space-5);
  flex-shrink: 0;
}

/* App name / subtitle */
.knd-app-name {
  font-size: 17px;
  font-weight: 700;
  color: white;
  margin-bottom: 4px;
  letter-spacing: -0.2px;
}

.knd-app-fullname {
  font-size: var(--text-xs);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-3);
}

.knd-app-description {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.55;
  flex: 1;
}

/* Portal badge variants (on dark bg) */
.knd-portal-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--space-5);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  align-self: flex-start;
}

.knd-portal-badge--live {
  background: rgba(72, 187, 120, 0.20);
  color: #68d391;
  border: 1px solid rgba(72, 187, 120, 0.30);
}

.knd-portal-badge--maintenance {
  background: rgba(237, 137, 54, 0.20);
  color: #f6ad55;
  border: 1px solid rgba(237, 137, 54, 0.30);
}

.knd-portal-badge--soon {
  background: rgba(160, 174, 192, 0.15);
  color: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.knd-portal-badge--external {
  background: rgba(159, 122, 234, 0.20);
  color: #b794f4;
  border: 1px solid rgba(159, 122, 234, 0.30);
}


/* --------------------------------------------------------------------------
   §24 Page-level utilities
   -------------------------------------------------------------------------- */

/* Screen-reader-only (accessible label, visually hidden) */
.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;
}

/* Step indicator */
.knd-step-indicator {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Section heading row (title left, actions right) */
.knd-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Char counter */
.knd-char-count {
  text-align: right;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* Divider */
.knd-divider {
  height: 1px;
  background: var(--color-border);
  border: none;
  margin: var(--space-6) 0;
}

/* Page footer */
.knd-footer {
  padding: var(--space-6) var(--space-10);
  text-align: center;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.30);
  line-height: 1.9;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: auto;
  width: 100%;
}

.knd-footer a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
}

.knd-footer a:hover { color: rgba(255, 255, 255, 0.75); }

/* App-page footer (inside white card) */
.knd-card-page-footer {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.9;
}

.knd-card-page-footer a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.knd-card-page-footer a:hover { color: var(--color-text-secondary); }

/* Flex helpers */
.knd-flex        { display: flex; }
.knd-flex-center { display: flex; align-items: center; }
.knd-flex-between{ display: flex; align-items: center; justify-content: space-between; }
.knd-gap-2       { gap: var(--space-2); }
.knd-gap-3       { gap: var(--space-3); }
.knd-gap-4       { gap: var(--space-4); }
.knd-mt-4        { margin-top: var(--space-4); }
.knd-mt-6        { margin-top: var(--space-6); }
.knd-mb-4        { margin-bottom: var(--space-4); }
.knd-mb-6        { margin-bottom: var(--space-6); }

/* Login page */
.knd-login-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-5);
}

.knd-login-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-12) var(--space-8);
  width: 380px;
  max-width: 100%;
  text-align: center;
}

.knd-login-logo {
  width: 72px;
  height: auto;
  border-radius: var(--radius-lg);
  margin: 0 auto var(--space-5);
  box-shadow: var(--shadow-md);
}

.knd-login-org {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}

.knd-login-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
  letter-spacing: -0.3px;
}

.knd-login-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  line-height: 1.5;
}

.knd-login-footer {
  margin-top: var(--space-8);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
  line-height: 1.7;
}

/* Inactivity warning toast */
#knd-inactivity-warning {
  display: none;
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  background: #fffaf0;
  border: 1.5px solid var(--color-warning);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  color: #7b341e;
  z-index: 2100;
  text-align: center;
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   §24b Toolbar (.knd-toolbar)
   A sticky action bar that sits directly below the nav bar on pages
   that have too many actions to fit comfortably in nav_actions.
   Use when a page has more than 3 action buttons (e.g. IHSP Step 2).
   -------------------------------------------------------------------------- */

.knd-toolbar {
  position: sticky;
  top: 60px;           /* flush below the 60px knd-nav */
  z-index: 40;
  width: 100%;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-8);
  min-height: 52px;
}

/* Status text inside the toolbar (e.g. "Saved as Draft · 2:45 PM") */
.knd-toolbar-status {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-left: var(--space-4);
  white-space: nowrap;
}

/* Vertical divider between button groups in the toolbar */
.knd-toolbar-sep {
  width: 1px;
  height: 24px;
  background: var(--color-border);
  margin: 0 var(--space-2);
  flex-shrink: 0;
}

/* Toolbar buttons — compact .knd-btn--sm equivalents with no shadow */
.knd-toolbar .knd-btn {
  box-shadow: none;
  transform: none;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
}

.knd-toolbar .knd-btn:hover {
  transform: none;
  box-shadow: none;
}

/* Dark toolbar — secondary and danger variants */
.knd-toolbar .knd-btn.knd-btn--secondary {
  background: rgba(255,255,255,0.10);
  color: var(--color-text-inverse);
  border: 1.5px solid rgba(255,255,255,0.30);
}
.knd-toolbar .knd-btn.knd-btn--secondary:hover {
  background: rgba(255,255,255,0.20);
  border-color: rgba(255,255,255,0.55);
  color: var(--color-text-inverse);
  transform: none;
  box-shadow: none;
}
.knd-toolbar .knd-btn.knd-btn--danger {
  background: rgba(245,101,101,0.85);
  border-color: rgba(245,101,101,0.6);
  color: var(--color-text-inverse);
}
.knd-toolbar .knd-btn.knd-btn--danger:hover {
  background: #e53e3e;
  border-color: #e53e3e;
  transform: none;
  box-shadow: none;
}

@media (max-width: 600px) {
  .knd-nav             { padding: 0 var(--space-3); }
  .knd-nav-title       { display: none; }
  .knd-page-body       { padding: var(--space-5) var(--space-3); }
  .knd-page-body--full { padding: var(--space-4) var(--space-3); }
  .knd-footer          { padding: var(--space-4) var(--space-3); }
  .knd-card            { padding: var(--space-4); }
  .knd-app-grid        { padding: 0 var(--space-3) var(--space-6);
                         grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
                         gap: var(--space-3); }
  .knd-btn             { min-height: 44px; }
}

@media print {
  .knd-toolbar { display: none; }
  .g-nav, .g-nav-ctx { display: none !important; }
}

@media (max-width: 768px) {
  .knd-toolbar {
    padding: var(--space-2) var(--space-4);
    gap: var(--space-1);
    justify-content: flex-start;
    overflow-x: auto;
  }
}


/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .knd-nav { padding: 0 var(--space-5); }
  .knd-nav--portal { padding: 0 var(--space-5); }

  .knd-app-grid { padding: 0 var(--space-5) var(--space-8); grid-template-columns: 1fr 1fr; gap: var(--space-4); }

  .knd-page-body--full { padding: var(--space-6) var(--space-5); }

  .knd-form-row { grid-template-columns: 1fr; }

  .knd-footer { padding: var(--space-6) var(--space-5); }

  .knd-portal-hero { padding: var(--space-8) var(--space-5) var(--space-6); }
  .knd-portal-hero h2 { font-size: var(--text-2xl); }
}

@media (max-width: 480px) {
  .knd-app-grid  { grid-template-columns: 1fr; }
  .knd-login-card { padding: var(--space-8) var(--space-5); }
  .knd-nav-title  { display: none; }
}


/* --------------------------------------------------------------------------
   §22a Auth — login page + nav user zone
   -------------------------------------------------------------------------- */

/* Microsoft "Sign in with Microsoft" button */
.knd-ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: #2f2f2f;
  color: #ffffff;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition);
  margin-top: var(--space-2);
}

.knd-ms-btn:hover {
  background: #1a1a1a;
  color: #ffffff;
}

.knd-ms-icon {
  flex-shrink: 0;
  display: block;
}

/* Nav user zone — always flush-right; contains widget trigger + user name + sign out */
.knd-nav-user-zone {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto; /* push to far right regardless of sibling widths */
  flex-shrink: 0;
}

/* CRM field badge — shown on form field labels to indicate the field syncs with CRM.
   Text content is updated dynamically to show the CRM folder/group name. */
.contact-field-tag {
  font-size: var(--text-xs);
  color: #2b6cb0;
  font-weight: 500;
  margin-left: 5px;
  text-transform: none;
  letter-spacing: 0;
}


/* ==========================================================================
   §04  Navigation (.g-nav, .g-shell, .g-content, command palette)
   Mirrors the portal-redesign-mockup nav design.
   Used by base_portal.html — gradually adopted by all blueprints in Track U.
   ========================================================================== */

/* Shell tokens */
:root {
  --nav-height:    62px;
  --banner-height: 46px;
}
body.is-staging { --staging-bar-height: 30px; }

/* ── Top nav bar ── */
.g-nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-height);
  background: var(--color-brand-gradient);
  display: flex; align-items: center;
  padding: 0 20px;
  gap: 16px;
  z-index: var(--z-drawer);
  box-shadow: 0 2px 12px rgba(102,126,234,0.25);
}

/* Brand */
.g-nav-brand {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; text-decoration: none;
}
.g-nav-logo {
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.25);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: white;
  overflow: hidden;
}
.g-nav-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.g-nav-appname {
  font-size: 15px; font-weight: 700;
  color: white; letter-spacing: -0.01em;
}
.g-nav-appname small { font-weight: 300; opacity: 0.75; font-size: 13px; margin-left: 4px; }

/* Global search */
.g-nav-search {
  flex: 1; max-width: 340px; position: relative;
  display: flex; align-items: center; cursor: pointer;
}
.g-nav-search input {
  width: 100%;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-pill);
  padding: 8px 56px 8px 36px;
  font-size: 13px; color: white;
  transition: var(--transition);
  font-family: inherit;
  cursor: pointer;
}
.g-nav-search:hover input { background: rgba(255,255,255,0.25); }
.g-nav-search input::placeholder { color: rgba(255,255,255,0.65); }
.g-nav-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 14px; color: rgba(255,255,255,0.7); pointer-events: none;
}
.g-nav-search-kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 10px; color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px; padding: 2px 5px; pointer-events: none;
  font-family: inherit; white-space: nowrap;
}

/* ── Command Palette Overlay ── */
.search-palette-overlay {
  position: fixed; inset: 0; z-index: var(--z-critical);
  background: rgba(15,15,30,0.6);
  backdrop-filter: blur(4px);
  display: none; align-items: flex-start; justify-content: center;
  padding-top: 10vh;
}
.search-palette-overlay.is-open { display: flex; }
.search-palette {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,0.22);
  width: 100%; max-width: 600px;
  overflow: hidden;
}
.search-palette__input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
}
.search-palette__icon { font-size: 16px; flex-shrink: 0; opacity: 0.5; }
.search-palette__input-row input {
  flex: 1; border: none; background: transparent;
  font-size: 15px; color: var(--color-text); font-family: inherit;
}
.search-palette__input-row input::placeholder { color: var(--color-text-muted); }
.search-palette__esc {
  font-size: 11px; color: var(--color-text-muted);
  background: var(--color-surface-alt); border: 1px solid var(--color-border);
  border-radius: 4px; padding: 2px 6px; cursor: pointer;
  font-family: inherit; flex-shrink: 0;
}
.search-palette__pills {
  display: flex; gap: 6px; padding: 10px 16px 8px;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.search-palette__pill {
  font-size: 12px; font-weight: 500;
  padding: 3px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text-muted);
  cursor: pointer; transition: var(--transition);
}
.search-palette__pill:hover { background: var(--color-surface-alt); }
.search-palette__pill.active {
  background: var(--color-brand-soft); color: var(--color-brand-dark);
  border-color: var(--color-brand-border);
}
.search-palette__results {
  max-height: 420px; overflow-y: auto;
  padding: 4px 0 8px;
}
.search-palette__group { padding: 0; }
.search-palette__group-label {
  padding: 10px 16px 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text-muted);
}
.search-palette__result {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 16px; cursor: pointer;
  text-decoration: none; color: var(--color-text);
  transition: background var(--transition-fast);
}
.search-palette__result:hover,
.search-palette__result.is-selected { background: var(--color-brand-light); }
.search-palette__result-icon { font-size: 16px; flex-shrink: 0; width: 24px; text-align: center; }
.search-palette__result-body { flex: 1; min-width: 0; }
.search-palette__result-title { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-palette__result-sub { font-size: 11px; color: var(--color-text-muted); }
.search-palette__result-badge { flex-shrink: 0; }
.search-palette__hint { padding: 20px 16px; font-size: 13px; color: var(--color-text-muted); text-align: center; }
.search-palette__empty { padding: 28px 16px; text-align: center; }
.search-palette__empty-icon { font-size: 28px; margin-bottom: 8px; }
.search-palette__empty-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.search-palette__empty-sub { font-size: 12px; color: var(--color-text-muted); margin-bottom: 12px; }
.search-palette__recent {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; cursor: pointer; font-size: 13px;
  color: var(--color-text-muted); transition: background var(--transition-fast);
}
.search-palette__recent:hover { background: var(--color-surface-alt); }
.search-palette__recent-remove {
  margin-left: auto; font-size: 14px; opacity: 0.4;
  cursor: pointer; padding: 0 4px;
}
.search-palette__recent-remove:hover { opacity: 1; }

/* Legacy dropdown kept for module-specific search forms (not global nav) */
.g-search-dropdown { display: none; }
.g-search-hint { padding: 10px 14px; font-size: 12px; color: var(--color-text-muted); text-align: center; }

/* Nav tabs */
.g-nav-tabs {
  display: flex; align-items: center; gap: 2px;
  flex-shrink: 0;
}
.g-nav-tab {
  padding: 6px 14px;
  border-radius: var(--radius);
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.75);
  background: transparent; border: none;
  cursor: pointer; transition: var(--transition);
  display: flex; align-items: center; gap: 6px;
  text-decoration: none; white-space: nowrap;
}
.g-nav-tab:hover { background: rgba(255,255,255,0.15); color: white; }
.g-nav-tab.active { background: rgba(255,255,255,0.2); color: white; font-weight: 600; }
.g-nav-badge {
  background: var(--color-danger);
  color: white; font-size: 10px; font-weight: 700;
  min-width: 16px; height: 16px;
  border-radius: var(--radius-pill);
  padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* Contextual page slot — populated by {% block nav_title %} / nav_actions.
   When empty, :empty hides the wrapper so unaffected pages render unchanged.
   When present, its margin-left:auto absorbs the free space and the adjacent
   .g-nav-user loses its own auto-margin so the two cluster on the right. */
.g-nav-ctx {
  display: flex; align-items: center; gap: var(--space-3);
  margin-left: auto; flex-shrink: 0;
  color: rgba(255,255,255,0.92);
  font-size: var(--text-sm);
  padding: 0 var(--space-3);
}
.g-nav-ctx:empty { display: none; }
.g-nav-ctx__title {
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 280px;
}
.g-nav-ctx + .g-nav-user { margin-left: var(--space-3); }

/* User zone */
.g-nav-user {
  display: flex; align-items: center; gap: 10px;
  margin-left: auto; flex-shrink: 0;
}
.g-nav-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: white;
  border: 2px solid rgba(255,255,255,0.4);
  flex-shrink: 0;
}
.g-nav-username { font-size: 13px; color: rgba(255,255,255,0.9); font-weight: 500; }
.g-nav-signout {
  font-size: 12px; color: rgba(255,255,255,0.6);
  background: none; border: none; padding: 4px 8px;
  border-radius: var(--radius); cursor: pointer; transition: var(--transition);
  text-decoration: none;
}
.g-nav-signout:hover { background: rgba(255,255,255,0.15); color: white; }

/* Global search dropdown */
.g-search-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: white; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  overflow: hidden; display: none; z-index: var(--z-modal);
}
.g-search-dropdown.open { display: block; }
.g-search-result {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; cursor: pointer;
  transition: background var(--transition);
  text-decoration: none; color: var(--color-text);
}
.g-search-result:hover { background: var(--color-brand-light); }
.g-search-result-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-brand-gradient);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: white; flex-shrink: 0;
}
.g-search-result-name { font-weight: 600; font-size: 13px; }
.g-search-result-meta { font-size: 11px; color: var(--color-text-muted); }
.g-search-hint { padding: 10px 14px; font-size: 12px; color: var(--color-text-muted); text-align: center; }

/* ── Shell content area ── */
.g-shell {
  padding-top: calc(var(--nav-height) + var(--staging-bar-height));
  min-height: 100vh;
  background: var(--color-bg);
}

/* Member banner strip (used by member-context pages)
   R1b upgrade: chip slots, separator, actions zone (Finding #3) */
.g-member-banner {
  position: sticky;
  top: calc(var(--nav-height) + var(--staging-bar-height));
  z-index: 190;
  height: var(--banner-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-8);
  gap: var(--space-4);
}
.g-member-banner__name {
  font-weight: 700; font-size: var(--text-md);
  color: var(--color-text); white-space: nowrap;
}
.g-member-banner__sep {
  width: 1px; height: 20px; background: var(--color-border); flex-shrink: 0;
}
.g-member-banner__chips {
  display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
  overflow: hidden; max-height: var(--banner-height);
}
.g-member-banner__chip {
  font-size: var(--text-xs); color: var(--color-text-muted);
  white-space: nowrap;
}
.g-member-banner__chip strong {
  color: var(--color-text-secondary); font-weight: 500;
}
.g-member-banner__actions {
  margin-left: auto; display: flex; gap: var(--space-2); flex-shrink: 0;
}
.g-shell--with-banner { padding-top: calc(var(--nav-height) + var(--staging-bar-height)); }

/* Canonical member-banner aliases (design spec §4) — production uses .g-member-banner BEM */
.member-banner { position: sticky; top: var(--nav-height); z-index: 190; height: var(--banner-height); background: var(--color-surface); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; padding: 0 var(--space-8); gap: var(--space-4); }
.member-banner-back { background: none; border: none; cursor: pointer; color: var(--color-text-muted); font-size: var(--text-sm); padding: 0; }
.member-banner-name { font-weight: 700; font-size: var(--text-md); color: var(--color-text); white-space: nowrap; }
.member-banner-meta { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.member-banner-right { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; flex-shrink: 0; }
.banner-photo { width: 32px; height: 32px; border-radius: 50%; background: var(--color-brand); color: white; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; overflow: hidden; }

/* ── Status badge classes (from shared/status.py) ── */
.status-draft     { background: #edf2f7; color: #718096; }
.status-complete  { background: var(--color-success-bg); color: #276749; }
.status-signed    { background: var(--color-info-bg);    color: #2b6cb0; }
.status-archived  { background: #f7fafc; color: #a0aec0; }
.status-pending   { background: var(--color-warning-bg); color: #744210; }
.status-scheduled { background: var(--color-info-bg);    color: #2b6cb0; }
.status-enrolled  { background: var(--color-success-bg); color: #276749; }
.status-active    { background: var(--color-success-bg); color: #276749; }
.status-discharged{ background: #f7fafc; color: #a0aec0; }
.status-open      { background: var(--color-brand-light); color: #434190; }
.status-in-progress { background: var(--color-warning-bg); color: #744210; }
.status-cancelled { background: #fff5f5; color: #c53030; }
.status-no-show   { background: #fff5f5; color: #c53030; }
.status-confirmed { background: var(--color-success-bg); color: #276749; }
.status-sent      { background: var(--color-info-bg);    color: #2b6cb0; }
.status-partial   { background: var(--color-warning-bg); color: #744210; }
.status-voided    { background: #f7fafc; color: #a0aec0; }
.status-referred  { background: var(--status-referred-bg); color: var(--status-referred); }
.status-screening { background: var(--color-warning-bg); color: #744210; }

/* Priority badges */
.priority-low    { background: var(--color-success-bg); color: #276749; }
.priority-normal { background: var(--color-info-bg);    color: #2b6cb0; }
.priority-high   { background: var(--color-warning-bg); color: #744210; }
.priority-urgent { background: var(--color-danger-bg);  color: #c53030; }


/* ==========================================================================
   19. Portal layout & components
   Canonical CSS — verbatim from portal-redesign-mockup.html (v8/v9).
   This section is the single source of truth for all layout classes.
   Templates must use these exact class names. Do not override below.
   ========================================================================== */

/* ── Home View ─────────────────────────────────────────────────── */
.home-wrap {
  max-width: 1200px; margin: 0 auto;
  padding: 28px 24px;
}
.home-greeting { margin-bottom: 24px; }
.home-greeting h1 {
  font-size: 22px; font-weight: 700; color: var(--color-text);
  margin-bottom: 2px;
}
.home-greeting p { font-size: 13px; color: var(--color-text-muted); }

.home-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}

/* Alert bar at top if needed */
.home-alert-bar {
  grid-column: 1 / -1;
  background: var(--status-unsigned-bg);
  border: 1px solid var(--status-unsigned-border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: var(--status-unsigned);
}
.home-alert-bar-icon { font-size: 16px; }
.home-alert-bar-text { flex: 1; font-weight: 500; }
.home-alert-bar a { color: var(--status-unsigned); text-decoration: underline; font-weight: 600; }

/* Card */
.card {
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--color-border);
}
.card-title {
  font-size: 13px; font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.card-action {
  font-size: 12px; color: var(--color-brand); font-weight: 500;
  background: none; border: none; cursor: pointer;
}
.card-action:hover { text-decoration: underline; }

/* Attention queue */
.attention-list { padding: 8px 0; }
.attention-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; cursor: pointer;
  transition: background var(--transition);
  border-bottom: 1px solid var(--color-border);
}
.attention-item:last-child { border-bottom: none; }
.attention-item:hover { background: var(--color-bg); }
.attention-icon {
  width: 34px; height: 34px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.attention-icon.warn { background: var(--status-unsigned-bg); }
.attention-icon.info { background: var(--color-info-bg); }
.attention-icon.neutral { background: var(--color-bg); }
.attention-label { font-size: 13px; font-weight: 500; color: var(--color-text); flex: 1; }
.attention-count {
  font-size: 13px; font-weight: 700;
  padding: 2px 8px; border-radius: var(--radius-pill);
}
.attention-count.warn { background: var(--status-unsigned-bg); color: var(--status-unsigned); }
.attention-count.info { background: var(--color-info-bg); color: var(--color-info); }
.attention-count.neutral { background: var(--color-bg); color: var(--color-text-secondary); }
.attention-arrow { color: var(--color-text-muted); font-size: 12px; }

/* My members list */
.member-list { padding: 6px 0; }
.member-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 16px; cursor: pointer;
  transition: background var(--transition);
}
.member-row:hover { background: var(--color-bg); }
.member-row-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-brand-gradient);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: white; flex-shrink: 0;
}
.member-row-info { flex: 1; min-width: 0; }
.member-row-name { font-size: 13px; font-weight: 600; color: var(--color-text); }
.member-row-meta { font-size: 11px; color: var(--color-text-muted); }
.member-row-right { display: flex; align-items: center; gap: 8px; }
.member-row-activity { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }
.member-list-empty { padding: 20px 16px; text-align: center; font-size: 13px; color: var(--color-text-muted); }

/* Quick start */
.quick-start-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; padding: 12px;
}
.quick-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 12px; font-weight: 500; color: var(--color-text-secondary);
  cursor: pointer; transition: var(--transition);
  text-align: left;
}
.quick-btn:hover {
  background: var(--color-brand-light);
  border-color: var(--color-brand);
  color: var(--color-brand);
}
.quick-btn-icon { font-size: 15px; flex-shrink: 0; }

/* Right column */
.home-right { display: flex; flex-direction: column; gap: 16px; }

/* Recent members (card grid) */
.recent-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px; padding: 12px;
}
.recent-card {
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer; transition: var(--transition);
  background: var(--color-bg);
}
.recent-card:hover {
  border-color: var(--color-brand);
  background: var(--color-brand-light);
}
.recent-card-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-brand-gradient);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: white; margin-bottom: 8px;
}
.recent-card-name { font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.recent-card-meta { font-size: 11px; color: var(--color-text-muted); margin-bottom: 6px; }

/* Notification dots */
.notif-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.notif-dot.warn { background: #f6ad55; }
.notif-dot.sms  { background: var(--color-brand); }

/* ── §08 Status badges ────────────────────────────────────────── */
.status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600;
  border: 1px solid;
  white-space: nowrap;
}
.status-badge.enrolled   { background: var(--status-enrolled-bg);   color: var(--status-enrolled);   border-color: var(--status-enrolled-border); }
.status-badge.scheduled  { background: var(--status-scheduled-bg);  color: var(--status-scheduled);  border-color: var(--status-scheduled-border); }
.status-badge.pending    { background: var(--status-pending-bg);    color: var(--status-pending);    border-color: var(--status-pending-border); }
.status-badge.no-show    { background: var(--status-noshow-bg);     color: var(--status-noshow);     border-color: var(--status-noshow-border); }
.status-badge.on-hold    { background: var(--status-onhold-bg);     color: var(--status-onhold);     border-color: var(--status-onhold-border); }
.status-badge.discharged { background: var(--status-discharged-bg); color: var(--status-discharged); border-color: var(--status-discharged-border); }

/* ── Members view (CRM directory) ─────────────────────────────── */
.dir-wrap { max-width: 1200px; margin: 0 auto; padding: 24px; }
.dir-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dir-header h2 { font-size: 20px; font-weight: 700; }
.dir-controls {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.dir-search {
  flex: 1; max-width: 320px;
  padding: 8px 14px 8px 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 13px; font-family: inherit;
 background: white;
  position: relative;
}
.dir-search:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(102,126,234,0.12); }
.dir-search-wrap { position: relative; flex: 1; max-width: 320px; }
.dir-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); font-size: 14px; pointer-events: none; }

.filter-chip {
  padding: 5px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 500;
  background: white; color: var(--color-text-secondary);
  cursor: pointer; transition: var(--transition);
}
.filter-chip:hover, .filter-chip.active {
  background: var(--color-brand-light);
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius); font-size: 13px; font-weight: 500; border: none; cursor: pointer; transition: var(--transition); font-family: inherit; }
.btn-primary { background: var(--color-brand); color: white; }
.btn-primary:hover { background: var(--color-brand-dark); }
.btn-secondary { background: white; color: var(--color-text-secondary); border: 1px solid var(--color-border); }
.btn-secondary:hover { background: var(--color-bg); }
.btn-link { background: none; border: none; padding: 0; color: var(--color-brand); font-size: inherit; font-family: inherit; cursor: pointer; text-decoration: none; }
.btn-link:hover { text-decoration: underline; }

/* Dense table */
.table-wrap { background: white; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: clip; box-shadow: var(--shadow-sm); }
.knd-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.knd-table th {
  padding: 10px 14px; text-align: left;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--color-text-muted); text-transform: uppercase;
  background: var(--color-bg); border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.knd-table th.sortable { cursor: pointer; user-select: none; }
.knd-table th.sortable:hover { color: var(--color-brand); }
.knd-table td {
  padding: 10px 14px; font-size: 13px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  overflow: hidden;
}
.knd-table tbody tr { cursor: pointer; transition: background var(--transition); }
.knd-table tbody tr:hover { background: var(--color-brand-light); }
.knd-table tbody tr:last-child td { border-bottom: none; }
.td-name { font-weight: 600; }
.td-name a { color: var(--color-text); }
.td-name-last { text-transform: uppercase; font-weight: 700; }
.td-meta { font-size: 12px; color: var(--color-text-muted); }
.td-date { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }

.tag-pill {
  display: inline-block; padding: 1px 7px;
  border-radius: var(--radius-pill); font-size: 11px; font-weight: 500;
  background: var(--color-brand-light); color: var(--color-brand);
  border: 1px solid #c3d1f7; margin: 1px;
}

.table-footer {
  padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--color-border);
  font-size: 12px; color: var(--color-text-muted);
  background: var(--color-bg);
}
.table-footer-pages { display: flex; gap: 4px; }
.page-btn { padding: 4px 10px; border: 1px solid var(--color-border); border-radius: var(--radius); background: white; font-size: 12px; cursor: pointer; }
.page-btn.active { background: var(--color-brand); color: white; border-color: var(--color-brand); }

/* ── Filter drawer (members directory) ─────────────────────────── */
.filter-drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 199;
  opacity: 0; visibility: hidden; transition: opacity var(--transition-base), visibility var(--transition-base);
}
.filter-drawer-overlay.open { opacity: 1; visibility: visible; }

.filter-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 320px; max-width: 90vw;
  background: white; box-shadow: -4px 0 24px rgba(0,0,0,0.15); z-index: var(--z-drawer);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--transition-slow) ease;
}
.filter-drawer.open { transform: translateX(0); }

.filter-drawer-head {
  padding: 16px 20px; border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 700;
}
.filter-drawer-close {
  width: 28px; height: 28px; border: none; background: var(--color-bg);
  border-radius: var(--radius); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted); transition: var(--transition);
}
.filter-drawer-close:hover { background: var(--color-border); color: var(--color-text); }

.filter-drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; }

.filter-section { margin-bottom: 20px; }
.filter-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: 8px;
}
.filter-check-list { display: flex; flex-direction: column; gap: 6px; }
.filter-check-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; cursor: pointer;
}
.filter-check-item input { margin: 0; }

.filter-input {
  width: 100%; padding: 8px 12px; border: 1px solid var(--color-border);
  border-radius: var(--radius); font-size: 13px; font-family: inherit;
}
.filter-input:focus { border-color: var(--color-brand); }

.filter-drawer-foot {
  padding: 16px 20px; border-top: 1px solid var(--color-border);
  display: flex; gap: 8px;
}
.filter-clear-btn {
  flex: 1; padding: var(--space-2) var(--space-3); min-height: 32px;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius); font-size: var(--text-sm); cursor: pointer;
  font-family: var(--font-body); color: var(--color-text);
}
.filter-clear-btn:hover { background: var(--color-border); }
.filter-apply-btn {
  flex: 2; padding: var(--space-2) var(--space-3); min-height: 32px;
  background: var(--color-brand); border: 1px solid var(--color-brand);
  border-radius: var(--radius); font-size: var(--text-sm); cursor: pointer;
  font-family: var(--font-body); color: white; font-weight: 600;
}
.filter-apply-btn:hover { background: var(--color-brand-dark); }

/* ── Member context view ───────────────────────────────────────── */
.member-view-wrap { display: flex; min-height: calc(100vh - var(--nav-height) - var(--staging-bar-height) - var(--banner-height)); }

.member-sidebar {
  width: var(--sidebar-width); flex-shrink: 0;
  background: white; border-right: 1px solid var(--color-border);
  padding: 16px 0;
  position: sticky; top: calc(var(--nav-height) + var(--staging-bar-height) + var(--banner-height));
  height: calc(100vh - var(--nav-height) - var(--staging-bar-height) - var(--banner-height));
  overflow-y: auto;
  align-self: stretch;
}
.member-nav-section { margin-bottom: 8px; }
.member-nav-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-text-muted);
  padding: 8px 16px 4px;
}
.member-nav-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px 8px 24px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--color-text-secondary);
  border: none; background: none; width: 100%; text-align: left;
  transition: var(--transition); min-width: 0;
}
.member-nav-item:hover { background: var(--color-bg); color: var(--color-text); }
.member-nav-item.active {
  background: var(--color-brand-light);
  color: var(--color-brand); font-weight: 600;
  border-left: 3px solid var(--color-brand);
  padding-left: 21px;
}
.nav-count {
  font-size: 11px; font-weight: 600; padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--color-border); color: var(--color-text-muted);
}
.member-nav-item.active .nav-count {
  background: var(--color-brand-light); color: var(--color-brand);
}

.member-content { flex: 1; padding: 24px; overflow: auto; }
.member-content-section { display: none; }
.member-content-section.active { display: block; }

/* Overview grid */
.overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.overview-stat-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 16px; }
.stat-card {
  background: white; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 16px;
  text-align: center; box-shadow: var(--shadow-sm);
}
.stat-card-value { font-size: 28px; font-weight: 700; color: var(--color-brand); line-height: 1; margin-bottom: 4px; }
.stat-card-label { font-size: 11px; color: var(--color-text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }

/* Field list */
.field-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.field-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
}
.field-row:nth-last-child(-n+2) { border-bottom: none; }
.field-label { font-size: 11px; font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.field-value { font-size: 13px; color: var(--color-text); font-weight: 400; }
.field-value.empty { color: var(--color-text-muted); font-style: italic; }
.field-value.mono { font-family: ui-monospace, monospace; letter-spacing: 0.02em; }

/* Linked records */
.linked-records-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.linked-record-card {
  border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 12px; cursor: pointer; transition: var(--transition);
  background: var(--color-bg);
}
.linked-record-card:hover { border-color: var(--color-brand); background: var(--color-brand-light); }
.linked-record-type { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 4px; }
.linked-record-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.linked-record-meta { font-size: 11px; color: var(--color-text-muted); }

/* Timeline */
.timeline { padding: 0 2px; }
.timeline-date-sep {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-text-muted);
  padding: 12px 0 6px; display: flex; align-items: center; gap: 10px;
}
.timeline-date-sep::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }

.timeline-item {
  display: flex; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}
.timeline-item:last-child { border-bottom: none; }
.timeline-marker {
  flex-shrink: 0; margin-top: 2px;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.timeline-marker.note { background: var(--color-brand-light); }
.timeline-marker.status { background: var(--color-info-bg); }
.timeline-marker.sms { background: var(--status-enrolled-bg); }
.timeline-marker.doc { background: var(--status-pending-bg); }
.timeline-body { flex: 1; }
.timeline-header { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.timeline-type { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.timeline-meta { font-size: 11px; color: var(--color-text-muted); }
.timeline-text { font-size: 13px; color: var(--color-text); line-height: 1.5; }

/* Plans list */
.plans-list { display: flex; flex-direction: column; gap: 10px; }
.plan-card {
  background: white; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.plan-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.plan-card:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.plan-card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.plan-card-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.plan-card-subtitle { font-size: 12px; color: var(--color-text-muted); }
.plan-card-meta { display: flex; gap: 16px; font-size: 12px; color: var(--color-text-muted); }
.plan-card-actions { display: flex; gap: 6px; margin-top: 12px; }
.btn-sm { padding: 5px 12px; font-size: 12px; border-radius: var(--radius); border: 1px solid var(--color-border); background: white; cursor: pointer; color: var(--color-text-secondary); transition: var(--transition); font-family: inherit; }
.btn-sm:hover { background: var(--color-bg); }
.btn-sm.primary { background: var(--color-brand); color: white; border-color: var(--color-brand); }
.btn-sm.primary:hover { background: var(--color-brand-dark); }

/* AI action buttons */
.btn-ai { display: flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: var(--radius); font-size: 12px; font-weight: 600; background: var(--color-brand-gradient); color: white; border: none; cursor: pointer; transition: var(--transition); font-family: inherit; }
.btn-ai:hover { opacity: 0.88; }
.btn-ai-sm { padding: 4px 12px; background: var(--ai-text); color: white; border: none; border-radius: var(--radius); font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; transition: var(--transition); }
.btn-ai-sm:hover { filter: brightness(0.88); }

/* Unsigned alert bar */
.unsigned-bar {
  background: var(--status-unsigned-bg);
  border: 1px solid var(--status-unsigned-border);
  border-radius: var(--radius);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--status-unsigned);
  margin-bottom: 10px;
}
.unsigned-bar-icon { font-size: 14px; }
.unsigned-bar-text { flex: 1; font-weight: 500; }
.plan-completion { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); margin-top: 8px; }
.plan-type-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius); font-size: 11px; font-weight: 600; background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-secondary); }

/* ── Inbox ─────────────────────────────────────────────────────── */
.inbox-wrap { max-width: 900px; margin: 0 auto; padding: 24px; }
.inbox-layout { display: grid; grid-template-columns: 300px 1fr; gap: 0; background: white; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: clip; box-shadow: var(--shadow-sm); min-height: 500px; }
.inbox-threads { border-right: 1px solid var(--color-border); }
.inbox-thread-search { padding: 12px; border-bottom: 1px solid var(--color-border); }
.inbox-thread-search input { width: 100%; padding: 6px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: 12px; font-family: inherit; }
.inbox-thread {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition);
}
.inbox-thread:hover { background: var(--color-bg); }
.inbox-thread.active { background: var(--color-brand-light); }
.inbox-thread.unread .inbox-thread-name { font-weight: 700; }
.inbox-thread-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-brand-gradient);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: white; flex-shrink: 0;
}
.inbox-thread-info { flex: 1; min-width: 0; }
.inbox-thread-name { font-size: 13px; font-weight: 500; }
.inbox-thread-preview { font-size: 12px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-thread-meta { text-align: right; flex-shrink: 0; }
.inbox-thread-time { font-size: 11px; color: var(--color-text-muted); }
.inbox-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-brand); margin: 4px auto 0; }
.inbox-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; padding: 40px; text-align: center; color: var(--color-text-muted); }
.inbox-empty-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.4; }
.inbox-conversation { padding: 24px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--color-text-muted); }

/* ── Docs ──────────────────────────────────────────────────────── */
.docs-wrap { max-width: 1000px; margin: 0 auto; padding: 24px; }

/* ── Settings placeholder ──────────────────────────────────────── */
.settings-wrap { max-width: 800px; margin: 0 auto; padding: 24px; }
.settings-placeholder { background: white; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 48px; text-align: center; color: var(--color-text-muted); box-shadow: var(--shadow-sm); }
.settings-placeholder h3 { font-size: 18px; color: var(--color-text-secondary); margin-bottom: 8px; }

/* ── §17 Tooltip system ─────────────────────────────────────────── */
/* CSS pseudo-element tooltips REMOVED — they cannot escape ancestor
   overflow:clip / overflow:hidden boundaries (table-wrap, td).
   All [data-tip] tooltips now use the global #kndTooltip floating
   element (position:fixed, appended to body) in base_portal.html. */

/* ── Calendar view ────────────────────────────────────────────── */
.cal-wrap { max-width: 1200px; margin: 0 auto; padding: 24px; }
.cal-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.cal-header h2 { font-size: 20px; font-weight: 700; }
.cal-nav-btn { padding: 5px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); background: white; font-size: 13px; cursor: pointer; font-family: inherit; transition: var(--transition); }
.cal-nav-btn:hover { background: var(--color-bg); }
.cal-today-btn { background: var(--color-brand-light); border-color: var(--color-brand); color: var(--color-brand); font-weight: 600; }
.cal-view-toggle { display: flex; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; margin-left: auto; }
.cal-vbtn { padding: 5px 14px; font-size: 12px; font-weight: 500; border: none; background: white; color: var(--color-text-muted); cursor: pointer; font-family: inherit; transition: var(--transition); }
.cal-vbtn.active { background: var(--color-brand); color: white; }
.cal-grid { display: grid; grid-template-columns: 52px repeat(7, 1fr); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: auto; background: white; box-shadow: var(--shadow-sm); }
.cal-corner { background: var(--color-bg); border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border); }
.cal-day-header { background: var(--color-bg); border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border); padding: 10px 8px; text-align: center; }
.cal-day-header.today { background: var(--color-brand-light); }
.cal-day-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.cal-day-num { font-size: 18px; font-weight: 700; color: var(--color-text); line-height: 1.2; }
.cal-day-header.today .cal-day-num { color: var(--color-brand); }
.cal-time-cell { background: var(--color-bg); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); height: 56px; display: flex; align-items: flex-start; justify-content: flex-end; padding: 3px 6px 0 0; }
.cal-time-label { font-size: 10px; color: var(--color-text-muted); font-weight: 500; white-space: nowrap; }
.cal-cell { height: 56px; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); position: relative; }
.cal-cell:last-child { border-right: none; }
.cal-event { position: absolute; left: 2px; right: 2px; border-radius: var(--radius); padding: 3px 6px; font-size: 11px; font-weight: 600; cursor: pointer; overflow: hidden; z-index: 2; transition: var(--transition); line-height: 1.3; }
.cal-event:hover { filter: brightness(0.93); transform: scale(1.01); z-index: 3; }
.cal-event.intake     { background: #ebf8ff; color: #2b6cb0; border-left: 3px solid #2b6cb0; }
.cal-event.chw_visit  { background: #f0fff4; color: #276749; border-left: 3px solid #276749; }
.cal-event.home_visit { background: #faf5ff; color: #553c9a; border-left: 3px solid #553c9a; }
.cal-event.phone_call { background: var(--color-bg); color: var(--color-text-secondary); border-left: 3px solid var(--color-text-muted); }
.cal-event.follow_up  { background: #fffbeb; color: #92400e; border-left: 3px solid #f6ad55; }
.cal-legend { display: flex; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.cal-legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--color-text-muted); }
.cal-legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.cal-legend-dot--intake { background: #ebf8ff; border-left: 2px solid #2b6cb0; }
.cal-legend-dot--home-visit { background: #faf5ff; border-left: 2px solid #553c9a; }
.cal-legend-dot--chw-visit { background: #f0fff4; border-left: 2px solid #276749; }
.cal-legend-dot--follow-up { background: var(--color-bg); border-left: 2px solid var(--color-text-muted); }
.cal-legend-dot--task { background: #fffbeb; border-left: 2px dotted #f6ad55; }
.cal-legend-dot--task-overdue { background: #fff5f5; border-left: 2px dotted #c53030; }
.cal-legend-dot--external { background: #f0f0f5; border-left: 2px dashed var(--color-text-muted); }
.cal-legend-label { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); }

/* ── Calendar: View toggle (btn alias) ──────────────────────── */
.cal-view-btn { padding: 5px 14px; font-size: 12px; font-weight: 500; border: none; background: white; color: var(--color-text-muted); cursor: pointer; font-family: inherit; transition: var(--transition); }
.cal-view-btn.active { background: var(--color-brand); color: white; }

/* ── Calendar: Navigation ───────────────────────────────────── */
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-period { font-size: 14px; font-weight: 600; color: var(--color-text); min-width: 150px; text-align: center; }

/* ── Calendar: Sync indicator ───────────────────────────────── */
.cal-sync-indicator { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--color-text-muted); margin-bottom: 10px; }
.cal-sync-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); flex-shrink: 0; }
.cal-sync-dot.warn { background: var(--color-warning); }

/* ── Calendar: Week view ────────────────────────────────────── */
.cal-week { background: white; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.cal-week-header { display: grid; grid-template-columns: 52px repeat(7, 1fr); border-bottom: 1px solid var(--color-border); }
.cal-week-header-cell { padding: 8px 6px; text-align: center; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); border-right: 1px solid var(--color-border); background: var(--color-bg); }
.cal-week-header-cell:first-child { border-right: 1px solid var(--color-border); }
.cal-week-header-cell:last-child { border-right: none; }
.cal-week-header-cell.today { background: var(--color-brand-light); }
.cal-week-header-cell .day-num { display: block; font-size: 18px; font-weight: 700; color: var(--color-text); line-height: 1.2; }
.cal-week-header-cell.today .day-num { color: var(--color-brand); }
.cal-week-body { display: grid; grid-template-columns: 52px repeat(7, 1fr); max-height: 620px; overflow-y: auto; }
.cal-time-col { display: flex; flex-direction: column; }
.cal-time-slot { height: 48px; display: flex; align-items: flex-start; justify-content: flex-end; padding: 2px 6px 0 0; font-size: 10px; color: var(--color-text-muted); font-weight: 500; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-bg); }
.cal-day-col { position: relative; border-right: 1px solid var(--color-border); min-height: 0; }
.cal-day-col:last-child { border-right: none; }
.cal-day-col.today-col { background: rgba(102,126,234,0.03); }
.cal-hour-line { height: 48px; border-bottom: 1px solid var(--color-border); }
.cal-event-time { font-size: 9px; font-weight: 500; opacity: 0.8; }

/* ── Calendar: Event source variants (week view) ────────────── */
.cal-event--intake     { background: #ebf8ff; color: #2b6cb0; border-left: 3px solid #2b6cb0; }
.cal-event--home-visit { background: #faf5ff; color: #553c9a; border-left: 3px solid #553c9a; }
.cal-event--chw-visit  { background: #f0fff4; color: #276749; border-left: 3px solid #276749; }
.cal-event--follow-up  { background: #fffbeb; color: #92400e; border-left: 3px solid #f6ad55; }
.cal-event--task       { background: var(--color-warning-bg, #fffbeb); color: var(--color-warning, #92400e); border-left: 3px dotted var(--color-warning, #f6ad55); font-style: italic; }
.cal-event--task-overdue { background: var(--color-danger-bg, #fff5f5); color: var(--color-danger, #c53030); border-left: 3px dotted var(--color-danger, #c53030); font-style: italic; }
.cal-event--external   { background: #f0f0f5; color: var(--color-text-secondary); border-left: 3px dashed var(--color-text-muted); }

/* ── Calendar: Month view ───────────────────────────────────── */
.cal-month { background: white; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.cal-month-header { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--color-border); background: var(--color-bg); }
.cal-month-header-cell { padding: 8px 6px; text-align: center; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); border-right: 1px solid var(--color-border); }
.cal-month-header-cell:last-child { border-right: none; }
.cal-month-body { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-month-cell { min-height: 90px; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 4px 5px; position: relative; cursor: pointer; transition: background var(--transition); }
.cal-month-cell:nth-child(7n) { border-right: none; }
.cal-month-cell:hover { background: var(--color-bg); }
.cal-month-cell.today { background: rgba(102,126,234,0.05); }
.cal-month-cell.other-month { background: var(--color-bg); }
.cal-month-cell.other-month .cal-month-date { color: var(--color-text-muted); opacity: 0.5; }
.cal-month-date { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 3px; }
.cal-month-cell.today .cal-month-date { color: var(--color-brand); font-weight: 700; }
.cal-month-event { font-size: 10px; font-weight: 500; padding: 1px 4px; border-radius: 3px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: var(--transition); }
.cal-month-event:hover { filter: brightness(0.93); }
.cal-month-event--intake     { background: #ebf8ff; color: #2b6cb0; border-left: 2px solid #2b6cb0; }
.cal-month-event--home-visit { background: #faf5ff; color: #553c9a; border-left: 2px solid #553c9a; }
.cal-month-event--chw-visit  { background: #f0fff4; color: #276749; border-left: 2px solid #276749; }
.cal-month-event--follow-up  { background: #fffbeb; color: #92400e; border-left: 2px solid #f6ad55; }
.cal-month-event--task       { background: var(--color-warning-bg, #fffbeb); color: var(--color-warning, #92400e); border-left: 2px dotted var(--color-warning, #f6ad55); }
.cal-month-event--task-overdue { background: var(--color-danger-bg, #fff5f5); color: var(--color-danger, #c53030); border-left: 2px dotted var(--color-danger, #c53030); }
.cal-month-event--external   { background: #f0f0f5; color: var(--color-text-secondary); border-left: 2px dashed var(--color-text-muted); }
.cal-month-more { font-size: 10px; color: var(--color-brand); font-weight: 600; padding: 1px 4px; cursor: pointer; }
.cal-month-more:hover { text-decoration: underline; }

/* ── Calendar: Sync card / expired banner (settings) ────────── */
.cal-sync-card { background: white; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 16px 20px; box-shadow: var(--shadow-sm); }
.cal-sync-expired-banner { background: var(--color-warning-bg, #fffbeb); border: 1px solid var(--color-warning, #f6ad55); border-radius: var(--radius-lg); padding: 14px 18px; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cal-sync-expired-banner .warn-text { font-size: 13px; color: var(--color-warning, #92400e); font-weight: 500; }

/* ── Appointment modal: linked-record pills ─────────────────── */
.linked-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 4px 4px; border: 1.5px solid var(--color-border); border-radius: 6px; cursor: pointer; background: white; font-size: 11px; transition: border-color 0.1s, background 0.1s; margin-bottom: 4px; }
.linked-pill:hover { border-color: var(--color-text-muted); background: var(--color-bg); }
.linked-pill.checked { border-color: var(--color-brand); background: var(--color-brand-light, #f0f4ff); }
.linked-pill input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--color-brand); margin: 0; cursor: pointer; }
.linked-pill-desc { font-size: 10px; color: var(--color-text-muted); }
.linked-tag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 500; }
.linked-tag.ecm { background: #faf5ff; color: #553c9a; }
.linked-tag.task { background: #fffbeb; color: #92400e; }
.linked-tag.ihsp { background: #ebf8ff; color: #2b6cb0; }
.linked-tag.chw { background: #f0fff4; color: #276749; }
.linked-tag.doc { background: #f7fafc; color: #4a5568; }

/* ── Appointment modal: auto-duration ───────────────────────── */
.duration-auto { font-size: 13px; font-weight: 500; color: var(--color-brand); padding: 5px 10px; background: var(--color-brand-light, #f0f4ff); border-radius: var(--radius); display: inline-block; }

/* ── Appointment modal: sync toggle ─────────────────────────── */
.sync-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; margin-top: 4px; border-top: 1px solid var(--color-border); }
.toggle-switch { position: relative; width: 40px; height: 24px; background: var(--color-text-muted); border-radius: 12px; cursor: pointer; transition: background var(--transition); flex-shrink: 0; border: none; padding: 0; }
.toggle-switch.on { background: var(--color-brand); }
.toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: white; border-radius: 50%; transition: transform var(--transition); box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.toggle-switch.on::after { transform: translateX(16px); }
.sync-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 500; }
.sync-badge.connected { background: #f0fff4; color: #276749; }
.sync-badge.disconnected { background: var(--color-bg); color: var(--color-text-muted); }

/* Today widget */
.today-appt { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--color-border); cursor: pointer; transition: background var(--transition); }
.today-appt:hover { background: var(--color-bg); }
.today-appt:last-child { border-bottom: none; }
.today-appt-time { font-size: 11px; font-weight: 700; color: var(--color-text-secondary); width: 42px; flex-shrink: 0; text-align: right; }
.today-appt-type-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.today-appt-info { flex: 1; min-width: 0; }
.today-appt-title { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-appt-meta  { font-size: 11px; color: var(--color-text-muted); }

/* ── Settings / Profile ───────────────────────────────────────── */
.settings-tabs-bar { display: flex; border-bottom: 2px solid var(--color-border); margin-bottom: 20px; }
.settings-tab { padding: 8px 18px; font-size: 13px; font-weight: 500; border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; font-family: inherit; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: var(--transition); }
.settings-tab:hover { color: var(--color-text); }
.settings-tab.active { color: var(--color-brand); border-bottom-color: var(--color-brand); font-weight: 600; }
.settings-panel { display: none; }
.settings-panel.active { display: block; }
.settings-section { background: white; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.settings-section-title { font-size: 11px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; }
.form-row { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.form-row:last-child { margin-bottom: 0; }
.form-label { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); width: 140px; flex-shrink: 0; }
.form-input { flex: 1; padding: 7px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 13px; font-family: inherit; }
.form-input:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(102,126,234,.1); }
.sig-canvas-wrap { background: var(--color-bg); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); padding: 20px; text-align: center; }
.sig-canvas { background: white; border: 1px solid var(--color-border); border-radius: var(--radius); width: 100%; height: 110px; cursor: crosshair; display: block; margin: 10px 0; }
.sig-preview-wrap { display: flex; align-items: center; gap: 16px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 16px 20px; }
.sig-preview-name { font-size: 26px; font-family: 'Times New Roman', serif; /* allow-font: signature preview — serif mimics handwriting */ font-style: italic; color: #1a202c; border-bottom: 1.5px solid #1a202c; padding-bottom: 4px; line-height: 1.2; }
.sig-preview-meta { font-size: 11px; color: var(--color-text-muted); margin-top: 4px; }
.policy-ack-list { display: flex; flex-direction: column; gap: 0; }
.policy-ack-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.policy-ack-item:last-child { border-bottom: none; }
.policy-ack-item label { font-size: 13px; color: var(--color-text); cursor: pointer; line-height: 1.5; }
.compliance-track { margin-bottom: 18px; }
.compliance-track-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.compliance-track-name { font-size: 12px; font-weight: 700; min-width: 160px; }
.compliance-progress-bar { flex: 1; height: 6px; background: var(--color-border); border-radius: 999px; overflow: hidden; }
.compliance-bar-fill { height: 100%; border-radius: 999px; }
.compliance-bar-fill.done  { background: var(--color-success); }
.compliance-bar-fill.warn  { background: #f6ad55; }
.compliance-bar-fill.crit  { background: var(--color-danger); }
.compliance-score { font-size: 11px; font-weight: 700; color: var(--color-text-muted); white-space: nowrap; }

/* ── §10b Sign modal ──────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 900; display: none; align-items: center; justify-content: center; padding: 24px; }
.modal-overlay.open { display: flex; }
.modal-box { background: white; border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,0.2); max-width: 520px; width: 100%; overflow: hidden; }
.modal-header { padding: 18px 24px; border-bottom: 1px solid var(--color-border); display: flex; align-items: flex-start; justify-content: space-between; background: white; }
.modal-title { font-size: 15px; font-weight: 700; }
.modal-subtitle { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.modal-close { background: none; border: none; font-size: 20px; color: var(--color-text-muted); cursor: pointer; line-height: 1; padding: 0 4px; border-radius: var(--radius); }
.modal-close:hover { background: var(--color-bg); }
.modal-body { padding: 20px 24px; max-height: 70vh; overflow-y: auto; }
.modal-footer { padding: 14px 24px; border-top: 1px solid var(--color-border); display: flex; gap: 8px; justify-content: flex-end; background: var(--color-bg); }
.modal-step { display: none; }
.modal-step.active { display: block; }
.step-row { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.step-dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.step-dot.active { background: var(--color-brand); color: white; }
.step-dot.done   { background: var(--color-success); color: white; }
.step-dot.future { background: var(--color-border); color: var(--color-text-muted); }
.step-line { flex: 1; height: 2px; }
.step-line.done { background: var(--color-success); }
.step-line.future { background: var(--color-border); }
.step-label { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; }

/* ── New plan modal (2-step) ───────────────────────────────────── */
.new-plan-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  z-index: 700; display: none; align-items: center; justify-content: center;
}
.new-plan-overlay.open { display: flex; }
.new-plan-box {
  background: white; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); width: 520px; max-width: 94vw;
  max-height: 88vh; overflow-y: auto;
}
.new-plan-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--color-border);
}
.new-plan-header h3 { font-size: 16px; font-weight: 700; margin: 0; }
.new-plan-close { background: none; border: none; font-size: 18px; color: var(--color-text-muted); cursor: pointer; padding: 4px; line-height: 1; }
.new-plan-close:hover { color: var(--color-text); }
.new-plan-body { padding: 20px; }
.new-plan-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 14px 20px; border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}

.plan-step { display: none; }
.plan-step.active { display: block; }
.plan-step-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 14px; }

.plan-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.plan-type-card {
  border: 2px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 14px 12px; cursor: pointer; transition: var(--transition); text-align: center;
}
.plan-type-card:hover { border-color: var(--color-brand); background: var(--color-brand-light); }
.plan-type-card.selected { border-color: var(--color-brand); background: var(--color-brand-light); }
.plan-type-card-icon { font-size: 22px; margin-bottom: 6px; }
.plan-type-card-name { font-size: 13px; font-weight: 600; }
.plan-type-card-desc { font-size: 11px; color: var(--color-text-muted); margin-top: 3px; }

.ai-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.ai-toggle-btn {
  padding: 12px; border-radius: var(--radius-lg); border: 2px solid var(--color-border);
  background: white; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600;
  transition: var(--transition); display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ai-toggle-btn:hover { border-color: var(--color-brand); background: var(--color-brand-light); }
.ai-toggle-btn.ai-btn { border-color: #c4b5fd; background: #f9f7ff; color: #5b21b6; }
.ai-toggle-btn.ai-btn:hover { border-color: #7c3aed; background: #ede9fe; }
.ai-toggle-btn-icon { font-size: 20px; }
.ai-toggle-btn-sub { font-size: 10px; font-weight: 400; color: var(--color-text-muted); }

.ai-processing { display: none; text-align: center; padding: 28px 20px; }
.ai-processing.active { display: block; }
.ai-spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid #e9d5ff; border-top-color: #7c3aed;
  animation: spin 0.8s linear infinite; margin: 0 auto 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ai-processing-text { font-size: 14px; font-weight: 600; color: var(--color-text); margin-bottom: 6px; }
.ai-processing-sub { font-size: 12px; color: var(--color-text-muted); }
.ai-steps { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; text-align: left; }
.ai-step-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-muted); }
.ai-step-row.done { color: var(--color-success); font-weight: 500; }
.ai-step-row.active-step { color: var(--color-brand); font-weight: 600; }

/* Plan signed status */
.status-badge.signed  { background: var(--status-signed-bg);   color: var(--status-signed);   border-color: var(--status-signed-border); }
.status-badge.draft   { background: var(--color-bg);            color: var(--color-text-muted); border-color: var(--color-border); }
.status-badge.complete{ background: var(--color-info-bg);       color: var(--color-info);       border-color: var(--color-info-border); }

/* Linked records grouped layout */
.lr-group { margin-bottom: 14px; }
.lr-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.lr-group-label::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }
.lr-group-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* ── Agenda view ────────────────────────────────────────────────── */
.agenda-day { margin-bottom: 22px; }
.agenda-day-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-bottom: 7px; border-bottom: 2px solid var(--color-border); }
.agenda-day-hdr.today-hdr { border-bottom-color: var(--color-brand); }
.agenda-day-name { font-size: 14px; font-weight: 700; }
.agenda-day-name.today-label { color: var(--color-brand); }
.agenda-day-date { font-size: 12px; color: var(--color-text-muted); }
.agenda-day-count { font-size: 11px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 999px; padding: 1px 8px; color: var(--color-text-muted); margin-left: auto; }
.agenda-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; background: white; border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: 6px; cursor: pointer; transition: var(--transition); }
.agenda-item:hover { border-color: var(--color-brand); box-shadow: var(--shadow-sm); }
.agenda-item.overdue-item { background: var(--color-danger-bg); border-color: var(--color-danger-border); }
.agenda-time { font-size: 11px; font-weight: 700; color: var(--color-text-secondary); width: 50px; flex-shrink: 0; text-align: right; padding-top: 2px; line-height: 1.5; }
.agenda-time.allday { font-weight: 500; color: var(--color-text-muted); }
.agenda-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; margin-top: 3px; }
.agenda-body { flex: 1; min-width: 0; }
.agenda-title { font-size: 13px; font-weight: 600; }
.agenda-meta { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }
.agenda-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.agenda-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.agenda-badge.appt { background: var(--color-brand-light); color: var(--color-brand); }
.agenda-badge.task-due { background: var(--color-warning-bg); color: var(--color-warning); }
.agenda-badge.task-overdue { background: var(--color-danger-bg); color: var(--color-danger); }
.agenda-badge.task-done { background: var(--color-success-bg); color: var(--color-success); }

/* ── Caseload team owner groups ─────────────────────────────────── */
.caseload-mode-toggle { display: flex; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.caseload-mode-btn { padding: 5px 14px; font-size: 12px; font-weight: 500; border: none; background: white; color: var(--color-text-muted); cursor: pointer; font-family: inherit; transition: var(--transition); }
.caseload-mode-btn.active { background: var(--color-brand); color: white; }
.knd-table .owner-group-row td { padding: 0; }
.owner-group-hdr { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.owner-group-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--color-brand-gradient); color: white; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.owner-group-name { font-size: 12px; font-weight: 700; color: var(--color-text-secondary); }
.owner-group-count { font-size: 11px; color: var(--color-text-muted); margin-left: 4px; }
.owner-group-me { font-size: 10px; background: var(--color-brand-light); color: var(--color-brand); border-radius: 999px; padding: 1px 7px; font-weight: 600; }

/* ── Utilities ─────────────────────────────────────────────────── */
.section-title { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.text-muted { color: var(--color-text-muted); }
.hidden { display: none !important; }
.gap-8 { gap: 8px; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* ── Program tab bar (caseload) ─────────────────────────────────── */
.program-tabs { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 2px solid var(--color-border); }
.program-tab { padding: 8px 18px; font-size: 13px; font-weight: 500; border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; transition: var(--transition); font-family: inherit; border-bottom: 3px solid transparent; margin-bottom: -2px; display: flex; align-items: center; gap: 7px; }
.program-tab:hover { color: var(--color-text); background: var(--color-bg); }
.program-tab.active { color: var(--color-brand); border-bottom-color: var(--color-brand); font-weight: 600; background: transparent; }
.prog-count { font-size: 11px; font-weight: 700; background: var(--color-bg); border: 1px solid var(--color-border); padding: 0 6px; border-radius: var(--radius-pill); }
.program-tab.active .prog-count { background: var(--color-brand-light); border-color: #bfcfff; color: var(--color-brand); }

/* ── Status matrix ─────────────────────────────────────────────── */
.status-summary-panel { background: white; border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: 16px; box-shadow: var(--shadow-sm); overflow: hidden; }
.status-summary-header { padding: 10px 16px; border-bottom: 1px solid var(--color-border); background: var(--color-bg); display: flex; align-items: center; gap: 8px; }
.status-summary-header-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.status-summary-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.status-dim-col { padding: 14px 16px; border-right: 1px solid var(--color-border); }
.status-dim-col:last-child { border-right: none; }
.status-dim-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 8px; }
.status-dim-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; border: 1px solid; }
.status-dim-note { font-size: 11px; color: var(--color-text-muted); margin-top: 6px; line-height: 1.4; }

/* status dimension badge colors */
.status-dim-badge.enrolled,
.sd-current, .sd-billable { background: var(--status-enrolled-bg);  color: var(--status-enrolled);  border-color: var(--status-enrolled-border); }
.status-dim-badge.scheduled,
.sd-submitted              { background: var(--status-scheduled-bg); color: var(--status-scheduled); border-color: var(--status-scheduled-border); }
.status-dim-badge.pending   { background: var(--status-pending-bg);  color: var(--status-pending);  border-color: var(--status-pending-border); }
.status-dim-badge.on-hold,
.sd-hold                    { background: var(--status-onhold-bg);   color: var(--status-onhold);   border-color: var(--status-onhold-border); }
.status-dim-badge.discharged,
.sd-missing, .sd-incomplete { background: var(--status-discharged-bg); color: var(--status-discharged); border-color: var(--status-discharged-border); }
.status-dim-badge.no-show   { background: var(--status-noshow-bg);   color: var(--status-noshow);   border-color: var(--status-noshow-border); }
.sd-action                  { background: var(--status-unsigned-bg); color: var(--status-unsigned); border-color: var(--status-unsigned-border); }

/* clinical indicator dot (in directory/caseload rows) */
.clinical-dot { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 500; padding: 1px 7px; border-radius: var(--radius-pill); border: 1px solid; white-space: nowrap; }
.clinical-dot.current    { background: var(--status-signed-bg);   color: var(--status-signed);   border-color: var(--status-signed-border); }
.clinical-dot.action     { background: var(--status-unsigned-bg); color: var(--status-unsigned); border-color: var(--status-unsigned-border); }
.clinical-dot.incomplete { background: var(--color-danger-bg);    color: var(--color-danger);    border-color: var(--color-danger-border); }

/* ── PII masking ─────────────────────────────────────────────────── */
.pii-val { transition: var(--transition); }
.pii-masked  { font-family: ui-monospace, monospace; color: var(--color-text-muted); letter-spacing: 0.05em; user-select: none; }
.pii-reveal-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-bg); font-size: 11px; font-weight: 600; cursor: pointer; transition: var(--transition); font-family: inherit; color: var(--color-text-secondary); flex-shrink: 0; }
.pii-reveal-btn:hover  { border-color: var(--color-brand); color: var(--color-brand); background: var(--color-brand-light); }
.pii-reveal-btn.active { background: var(--status-unsigned-bg); border-color: var(--status-unsigned-border); color: var(--status-unsigned); }
.pii-warning-bar { position: fixed; top: calc(var(--nav-height) + var(--staging-bar-height)); left: 0; right: 0; z-index: 149; background: var(--status-unsigned-bg); border-bottom: 1px solid var(--status-unsigned-border); padding: 4px 20px; font-size: 11px; color: var(--status-unsigned); font-weight: 500; text-align: center; display: none; }
.pii-warning-bar.visible { display: block; }

/* ── Email in comms ─────────────────────────────────────────────── */
.email-entry { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; cursor: pointer; border-bottom: 1px solid var(--color-border); transition: background var(--transition); }
.email-entry:hover { background: var(--color-bg); }
.email-entry.unread .email-entry-subject { font-weight: 700; }
.email-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; background: var(--color-info-bg); }
.email-entry-info { flex: 1; min-width: 0; }
.email-entry-from { font-size: 13px; font-weight: 500; }
.email-entry-subject { font-size: 12px; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-entry-preview { font-size: 11px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-entry-time { font-size: 11px; color: var(--color-text-muted); flex-shrink: 0; text-align: right; }

.email-area { display: flex; flex-direction: column; flex: 1; height: 100%; }
.email-area-header { padding: 14px 18px; border-bottom: 1px solid var(--color-border); background: var(--color-bg); }
.email-area-subject { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.email-area-meta { font-size: 12px; color: var(--color-text-muted); }
.email-area-body { flex: 1; padding: 20px 18px; font-size: 13px; line-height: 1.7; overflow-y: auto; color: var(--color-text); }
.email-area-footer { padding: 12px 18px; border-top: 1px solid var(--color-border); display: flex; gap: 8px; }

.email-compose-panel { flex: 1; display: flex; flex-direction: column; }
.email-compose-fields { padding: 12px 18px; border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 0; }
.email-field-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--color-border); }
.email-field-row:last-child { border-bottom: none; }
.email-field-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); width: 36px; flex-shrink: 0; }
.email-field-val { flex: 1; border: none; font-size: 13px; font-family: inherit; background: transparent; color: var(--color-text); }
.email-body-input { flex: 1; padding: 16px 18px; font-size: 13px; font-family: inherit; border: none; resize: none; color: var(--color-text); min-height: 160px; }
.email-send-bar { padding: 12px 18px; border-top: 1px solid var(--color-border); display: flex; gap: 8px; }

/* ── Caseload view ─────────────────────────────────────────────── */
.caseload-wrap { max-width: 1400px; margin: 0 auto; padding: 24px; }
.caseload-wrap .knd-table { table-layout: auto; }
.caseload-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.caseload-header h2 { font-size: 20px; font-weight: 700; }
.caseload-stats { display: flex; gap: 16px; margin-top: 4px; }
.caseload-stat { font-size: 12px; color: var(--color-text-muted); }
.caseload-stat strong { color: var(--color-text); }
.view-toggle { display: flex; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.view-toggle-btn { padding: 6px 14px; font-size: 12px; font-weight: 500; background: white; border: none; cursor: pointer; color: var(--color-text-muted); transition: var(--transition); font-family: inherit; }
.view-toggle-btn.active { background: var(--color-brand); color: white; }

.caseload-list { display: none; }
.caseload-list.active { display: block; }
.caseload-board { display: none; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-3); }
.caseload-board.active { display: flex; }

.kanban-col { flex: 1; min-width: 220px; max-width: 300px; }
.kanban-col-header { padding: 10px 14px; border-radius: var(--radius) var(--radius) 0 0; border: 1px solid var(--color-border); border-bottom: none; background: var(--color-bg); display: flex; align-items: center; justify-content: space-between; }
.kanban-col-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); }
.kanban-col-count { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--color-border); color: var(--color-text-muted); }
.kanban-col.attention .kanban-col-header { background: var(--status-unsigned-bg); border-color: var(--status-unsigned-border); }
.kanban-col.attention .kanban-col-title { color: var(--status-unsigned); }
.kanban-col.attention .kanban-col-count { background: var(--status-unsigned-border); color: var(--status-unsigned); }
.kanban-body { border: 1px solid var(--color-border); border-radius: 0 0 var(--radius) var(--radius); background: var(--color-bg); padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.kanban-card { background: white; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 12px; cursor: pointer; transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); }
.kanban-card:hover { border-color: var(--color-brand); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kanban-card:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.kanban-card-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.kanban-card-meta { font-size: 11px; color: var(--color-text-muted); margin-bottom: 8px; }
.kanban-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.kanban-card-alerts { display: flex; gap: 4px; }
.kanban-quick { display: flex; gap: 4px; }
.icon-btn { padding: 4px 8px; border: 1px solid var(--color-border); border-radius: var(--radius); background: white; font-size: 12px; cursor: pointer; transition: var(--transition); color: var(--color-text-secondary); font-family: inherit; }
.icon-btn:hover { background: var(--color-brand-light); border-color: var(--color-brand); color: var(--color-brand); }

.caseload-table-actions { display: flex; gap: 4px; }

/* ── §22 Tasks view ────────────────────────────────────────────── */
.tasks-wrap { max-width: 1100px; margin: 0 auto; padding: 24px; }
.tasks-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.tasks-kpi { background: white; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.tasks-kpi-value { font-size: 26px; font-weight: 700; line-height: 1; margin-bottom: 2px; }
.tasks-kpi-label { font-size: 11px; color: var(--color-text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.tasks-kpi.overdue .tasks-kpi-value { color: var(--color-danger); }
.tasks-kpi.today .tasks-kpi-value { color: var(--color-warning); }
.tasks-kpi.open .tasks-kpi-value { color: var(--color-brand); }
.tasks-kpi.done .tasks-kpi-value { color: var(--color-success); }

.task-priority { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.task-priority.high   { background: var(--color-danger); }
.task-priority.medium { background: #f6ad55; }
.task-priority.low    { background: var(--color-text-muted); }

.task-type-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 500; background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-secondary); }
.task-due.overdue { color: var(--color-danger); font-weight: 600; }
.task-due.today   { color: var(--color-warning); font-weight: 600; }
.task-status-done { text-decoration: line-through; color: var(--color-text-muted); }

.new-task-bar { display: flex; gap: 8px; align-items: center; background: white; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 10px 14px; margin-bottom: 14px; box-shadow: var(--shadow-sm); }
.new-task-input { flex: 1; border: none; font-size: 13px; font-family: inherit; color: var(--color-text); background: transparent; }
.new-task-input::placeholder { color: var(--color-text-muted); }

/* ── Tasks — token-compliant status pills ───────────────────────── */
.t-status {
  display:inline-flex;align-items:center;
  padding:3px 10px;border-radius:var(--radius-pill);font-size:11px;font-weight:600;
  cursor:pointer;user-select:none;white-space:nowrap;
  border:1.5px solid transparent;transition:opacity var(--transition);
}
.t-status::after {
  content:'';display:inline-block;width:0;height:0;margin-left:5px;
  border-left:3px solid transparent;border-right:3px solid transparent;
  border-top:4px solid currentColor;opacity:.55;vertical-align:middle;
}
.t-status:hover { opacity:.82; }
.t-status.open        { background:var(--status-scheduled-bg); color:var(--status-scheduled);   border-color:var(--status-scheduled-border); }
.t-status.in_progress { background:var(--status-pending-bg);   color:var(--status-pending);     border-color:var(--status-pending-border); }
.t-status.done        { background:var(--status-enrolled-bg);  color:var(--status-enrolled);    border-color:var(--status-enrolled-border); }
.t-status.cancelled   { background:var(--status-noshow-bg);    color:var(--status-noshow);      border-color:var(--status-noshow-border); }
.t-status-wrap { position:relative;display:inline-block; }
.t-status-menu {
  display:none;position:absolute;top:calc(100% + 4px);left:0;z-index:710;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);min-width:150px;overflow:hidden;
}
.t-status-menu.open { display:block; }
.t-status-menu button {
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:8px 14px;
  border:none;background:none;font-size:12px;font-weight:500;cursor:pointer;
  transition:background var(--transition);
}
.t-status-menu button:hover { background:var(--color-bg); }
/* Rich text toolbar */
.rt-toolbar {
  display:flex;gap:2px;padding:4px 6px;
  background:var(--color-bg);border:1px solid var(--color-border);
  border-bottom:none;border-radius:var(--radius) var(--radius) 0 0;
}
.rt-toolbar button {
  padding:3px 8px;border:none;border-radius:var(--radius-sm);background:none;
  font-size:12px;font-weight:700;cursor:pointer;color:var(--color-text);
  transition:background var(--transition);
}
.rt-toolbar button:hover { background:var(--color-border); }
.rt-body {
  min-height:80px;padding:8px 10px;
  border:1px solid var(--color-border);border-radius:0 0 var(--radius) var(--radius);
  font-size:13px;line-height:1.5;
  background:var(--color-surface);overflow-y:auto;
}
.rt-body:focus { border-color:var(--color-brand);box-shadow:0 0 0 3px rgba(102,126,234,.12); }
.rt-body ul,.rt-body ol { padding-left:20px;margin:4px 0; }
/* Kanban */
.kanban-col.kanban-drag-over { box-shadow:inset 0 0 0 2px var(--color-brand); }
.task-kanban-card {
  background:var(--color-surface);border-radius:var(--radius);
  border:1px solid var(--color-border);border-left-width:3px;border-left-style:solid;
  padding:10px 12px;margin-bottom:8px;
  box-shadow:var(--shadow-sm);cursor:pointer;
  transition:box-shadow var(--transition),transform var(--transition);
}
.task-kanban-card:hover { box-shadow:var(--shadow-md);transform:translateY(-1px); }
.task-kanban-card.prio-high   { border-left-color:var(--color-danger); }
.task-kanban-card.prio-medium { border-left-color:#f6ad55; }
.task-kanban-card.prio-low    { border-left-color:var(--color-text-muted); }
.task-kanban-card.prio-none   { border-left-color:var(--color-border); }
.tkc-meta   { display:flex;align-items:center;justify-content:space-between;margin-bottom:6px; }
.tkc-title  { font-size:13px;font-weight:600;line-height:1.3;margin-bottom:5px; }
.tkc-footer { display:flex;align-items:center;justify-content:space-between;margin-top:6px; }
.tkc-avatar {
  width:20px;height:20px;border-radius:50%;background:var(--color-brand-gradient);
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;color:white;flex-shrink:0;
}
/* Detail modal — animated overlay */
#taskDetailModal .tdm-overlay {
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;
  display:flex;align-items:flex-start;justify-content:center;
  padding:24px 16px;overflow-y:auto;
  opacity:0;transition:opacity 150ms ease;
}
#taskDetailModal .tdm-overlay.visible { opacity:1; }
#taskDetailModal .tdm-box {
  background:var(--color-surface);border-radius:var(--radius-lg);
  width:100%;max-width:820px;
  box-shadow:var(--shadow-xl);position:relative;
  display:flex;flex-direction:column;min-height:0;
  transform:scale(.97);transition:transform 150ms ease;
}
#taskDetailModal .tdm-overlay.visible .tdm-box { transform:scale(1); }
#taskDetailModal .tdm-header {
  padding:16px 20px 0;border-bottom:1px solid var(--color-border);flex-shrink:0;
}
#taskDetailModal .tdm-header-title-row {
  display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;
}
#taskDetailModal .tdm-header-meta-row {
  display:flex;align-items:center;gap:8px;padding-bottom:12px;flex-wrap:wrap;
  justify-content:flex-end;
}
#taskDetailModal .tdm-body { padding:24px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:16px; }
#taskDetailModal .tdm-section {
  border:1px solid var(--color-border);border-radius:var(--radius);
  padding:18px 20px;
}
#taskDetailModal .tdm-section-label {
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--color-text-muted);margin-bottom:14px;
}
#taskDetailModal .tdm-field-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
#taskDetailModal .tdm-field label {
  display:block;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--color-text-muted);margin-bottom:6px;
}
.task-type-icon { font-size:16px;cursor:default;line-height:1;display:inline-block; }
#kndTooltip {
  position: fixed; z-index: 9999; pointer-events: none;
  background: rgba(26,32,44,0.95); color: #fff;
  font-size: 11px; font-weight: 500; line-height: 1.5;
  white-space: normal; text-align: center;
  min-width: 60px; max-width: 260px;
  padding: 6px 11px; border-radius: var(--radius);
  font-family: var(--font-body);
  opacity: 0; transition: opacity var(--transition-base);
  box-shadow: var(--shadow-md);
}
.task-id-badge {
  font-family:monospace;font-size:10px;color:var(--color-text-muted);
  background:var(--color-bg);border-radius:var(--radius-sm);
  padding:1px 5px;cursor:pointer;white-space:nowrap;
  border:1px solid var(--color-border);
  transition:border-color var(--transition),color var(--transition);
}
.task-id-badge:hover { border-color:var(--color-brand);color:var(--color-brand); }
.task-title-cell { cursor:pointer;font-weight:500; }
tr.prio-high   td:first-child { border-left:3px solid var(--color-danger); }
tr.prio-medium td:first-child { border-left:3px solid #f6ad55; }
tr.prio-low    td:first-child { border-left:3px solid var(--color-text-muted); }
.tasks-kpi { cursor:pointer;transition:box-shadow var(--transition),transform var(--transition); }
.tasks-kpi:hover { box-shadow:var(--shadow-md);transform:translateY(-1px); }
.tasks-kpi.active-filter { box-shadow:0 0 0 2px var(--color-brand);transform:none; }
#tdmSaveIndicator { font-size:11px;color:var(--color-success);opacity:0;transition:opacity .3s;margin-left:auto; }
.tasks-empty { padding:56px 20px;text-align:center; }
.tasks-empty-icon  { font-size:36px;margin-bottom:12px;opacity:.35;line-height:1; }
.tasks-empty-title { font-size:15px;font-weight:600;color:var(--color-text);margin-bottom:4px; }
.tasks-empty-sub   { font-size:13px;color:var(--color-text-muted);margin-bottom:16px; }
/* ── Tasks — Group-by pills ─────────────────────────────────────────────── */
.groupby-pill {
  padding:4px 11px; border:1px solid var(--color-border); border-radius:var(--radius-pill);
  font-size:11px; font-weight:500; background:white; color:var(--color-text-secondary);
  cursor:pointer; transition:var(--transition); font-family:inherit;
}
.groupby-pill:hover { border-color:var(--color-brand); color:var(--color-brand); }
.groupby-pill.active { background:var(--color-brand); color:white; border-color:var(--color-brand); }
/* ── Tasks — Assignee filter chips ──────────────────────────────────────── */
/* ── Tasks — Assignee TomSelect filter ──────────────────────────────────── */
#assigneeFilterBar .ts-wrapper { min-width: 200px; max-width: 280px; }
#assigneeFilterBar .ts-control {
  border: 1.5px solid var(--color-border); border-radius: var(--radius);
  padding: 4px 10px; font-size: 12px; font-weight: 500;
  background: white; font-family: var(--font-body);
  min-height: 0; cursor: pointer;
}
#assigneeFilterBar .ts-control:hover { border-color: var(--color-brand); }
#assigneeFilterBar .ts-dropdown { font-size: 12px; font-family: var(--font-body); border-radius: var(--radius); }
#assigneeFilterBar .ts-dropdown .active { background: var(--color-brand-light); color: var(--color-brand); }
.ts-assignee-opt, .ts-assignee-item { display: flex; align-items: center; gap: 8px; }
.ts-assignee-opt .ac-av, .ts-assignee-item .ac-av {
  width: 20px; height: 20px; border-radius: 50%; background: var(--color-brand-gradient);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: white; flex-shrink: 0;
}
/* ── Tasks — Group header rows ───────────────────────────────────────────── */
.task-group-hdr td {
  background:var(--color-bg-muted,#f8f9fa); padding:7px 10px 7px 12px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--color-text-secondary); border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border); user-select:none; cursor:pointer;
}
.task-group-hdr:hover td { background:var(--color-brand-light); }
.task-group-chevron {
  display:inline-block; margin-right:6px; transition:transform .15s ease; font-size:9px;
}
.task-group-chevron.collapsed { transform:rotate(-90deg); }
.task-group-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; border-radius:var(--radius-pill);
  background:var(--color-border); color:var(--color-text-secondary);
  font-size:10px; font-weight:600; margin-left:8px; vertical-align:middle;
}
/* Two-column modal layout */
.tdm-content { display:grid;grid-template-columns:1fr; }
@media (min-width:680px) { .tdm-content { grid-template-columns:60% 40%; } }
.tdm-left  { padding:20px 14px 20px 20px;min-width:0; }
.tdm-right { padding:20px 20px 20px 14px;border-top:1px solid var(--color-border); }
@media (min-width:680px) {
  .tdm-right { border-top:none;border-left:1px solid var(--color-border); }
}
.tdm-bottom { grid-column:1 / -1;border-top:1px solid var(--color-border);padding:20px; }
/* Comment composer */
.tdm-composer { display:flex;gap:10px;align-items:flex-start;margin-bottom:20px; }
.tdm-composer-avatar {
  width:28px;height:28px;border-radius:50%;background:var(--color-brand-gradient);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:white;flex-shrink:0;margin-top:2px;
}
.tdm-composer-right { flex:1;min-width:0; }
.tdm-composer-input {
  width:100%;min-height:38px;max-height:140px;overflow-y:auto;
  padding:8px 12px;border:1.5px solid var(--color-border);border-radius:var(--radius);
  font-size:13px;line-height:1.5;background:var(--color-surface);
  box-sizing:border-box;
}
.tdm-composer-input:empty::before { content:attr(data-placeholder);color:var(--color-text-muted);pointer-events:none; }
.tdm-composer-input:focus { border-color:var(--color-brand);box-shadow:0 0 0 3px rgba(102,126,234,.12); }
.tdm-composer-actions { display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:6px; }
.tdm-composer-hint { font-size:11px;color:var(--color-text-muted); }
/* Activity feed */
.tdm-comment-entry { display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--color-border); }
.tdm-comment-entry:last-child { border-bottom:none; }
.tdm-comment-av {
  width:28px;height:28px;border-radius:50%;background:var(--color-brand-gradient);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:white;flex-shrink:0;
}
.tdm-comment-body { flex:1;min-width:0; }
.tdm-comment-meta { display:flex;align-items:baseline;gap:6px;margin-bottom:3px; }
.tdm-comment-author { font-size:12px;font-weight:700;color:var(--color-text); }
.tdm-comment-time   { font-size:11px;color:var(--color-text-muted); }
.tdm-comment-text   { font-size:13px;color:var(--color-text);line-height:1.5;white-space:pre-wrap;word-break:break-word; }
.tdm-audit-entry { display:flex;gap:8px;align-items:center;padding:5px 0;
                   font-size:12px;color:var(--color-text-muted); }
.tdm-audit-dot { width:6px;height:6px;border-radius:50%;background:var(--color-border);flex-shrink:0; }
/* @mention chip */
.tdm-mention {
  background:var(--color-brand-light);color:var(--color-brand);
  border-radius:var(--radius-sm);padding:1px 5px;
  font-weight:600;font-size:13px;white-space:nowrap;
}
/* @mention popover */
#tdmMentionPop {
  position:fixed;z-index:9999;display:none;
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
  max-height:200px;overflow-y:auto;min-width:210px;
}
.tdm-mention-opt {
  display:flex;align-items:center;gap:8px;
  padding:7px 12px;cursor:pointer;font-size:13px;
}
.tdm-mention-opt:hover,.tdm-mention-opt.mop-active { background:var(--color-bg); }
.tdm-mention-av {
  width:22px;height:22px;border-radius:50%;background:var(--color-brand-gradient);
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;color:white;flex-shrink:0;
}

/* ── Comms view (upgraded inbox) ────────────────────────────────── */
.comms-wrap { max-width: 1000px; margin: 0 auto; padding: 24px; }
.comms-layout { display: grid; grid-template-columns: 300px 1fr; background: white; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: clip; box-shadow: var(--shadow-sm); min-height: 580px; }
.comms-threads { border-right: 1px solid var(--color-border); display: flex; flex-direction: column; overflow: hidden; }
.comms-thread-header { padding: 12px; border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 8px; }
.comms-channel-tabs { display: flex; gap: 2px; }
.comms-channel-tab { padding: 4px 10px; border-radius: var(--radius); font-size: 12px; font-weight: 500; border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; transition: var(--transition); font-family: inherit; }
.comms-channel-tab.active { background: var(--color-brand-light); color: var(--color-brand); font-weight: 600; }
.comms-thread-list { flex: 1; overflow-y: auto; }

.call-entry { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; border-bottom: 1px solid var(--color-border); transition: background var(--transition); }
.call-entry:hover { background: var(--color-bg); }
.call-entry.missed .call-entry-name { color: var(--color-danger); }
.call-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.call-icon.outbound { background: var(--color-info-bg); }
.call-icon.inbound  { background: var(--color-success-bg); }
.call-icon.missed   { background: var(--color-danger-bg); }
.call-entry-info { flex: 1; min-width: 0; }
.call-entry-name { font-size: 13px; font-weight: 500; }
.call-entry-meta { font-size: 11px; color: var(--color-text-muted); }
.call-entry-right { text-align: right; flex-shrink: 0; }
.call-entry-time { font-size: 11px; color: var(--color-text-muted); }
.call-entry-dur  { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); }

.comms-area { display: flex; flex-direction: column; overflow: hidden; }
.comms-area-header { padding: 14px 18px; border-bottom: 1px solid var(--color-border); background: var(--color-bg); display: flex; align-items: center; justify-content: space-between; }
.comms-area-name { font-size: 14px; font-weight: 700; }
.comms-area-meta { font-size: 12px; color: var(--color-text-muted); margin-top: 1px; }
.comms-area-actions { display: flex; gap: 6px; }
.comms-messages { flex: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.comms-input-bar { padding: 12px; border-top: 1px solid var(--color-border); display: flex; gap: 8px; }
.comms-input { flex: 1; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: 13px; font-family: inherit; }
.comms-input:focus { border-color: var(--color-brand); }
.comms-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; padding: 40px; text-align: center; color: var(--color-text-muted); }
@media (max-width: 768px) {
  .comms-layout { grid-template-columns: 1fr; min-height: auto; }
  .comms-threads { border-right: none; border-bottom: 1px solid var(--color-border); max-height: 260px; }
}

/* Call quick-button in member banner */
.quick-call-btn { display: flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--color-success-bg); border: 1px solid var(--color-success-border); color: var(--color-success); font-size: 12px; font-weight: 600; cursor: pointer; transition: var(--transition); font-family: inherit; }
.quick-call-btn:hover { background: #c6f6d5; }

/* Member comms tabs (SMS / Calls) */
.mc-comms-tabs { display: flex; gap: 2px; margin-bottom: 14px; border-bottom: 1px solid var(--color-border); padding-bottom: 0; }
.mc-comms-tab { padding: 7px 16px; font-size: 13px; font-weight: 500; border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; transition: var(--transition); font-family: inherit; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mc-comms-tab.active { color: var(--color-brand); border-bottom-color: var(--color-brand); font-weight: 600; }
.mc-comms-panel { display: none; }
.mc-comms-panel.active { display: block; }

.call-log-entry { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.call-log-entry:last-child { border-bottom: none; }
.call-log-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.call-log-info { flex: 1; }
.call-log-type { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.call-log-meta { font-size: 11px; color: var(--color-text-muted); margin-top: 1px; }
.call-log-note { font-size: 12px; color: var(--color-text); margin-top: 3px; font-style: italic; }
.call-log-dur { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); white-space: nowrap; }

/* Member tasks (in member context) */
.task-list { display: flex; flex-direction: column; gap: 8px; }
.member-task-card { background: white; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px; }
.member-task-card.overdue { border-left: 3px solid var(--color-danger); }
.member-task-check { margin-top: 2px; flex-shrink: 0; }
.member-task-body { flex: 1; }
.member-task-title { font-size: 13px; font-weight: 500; color: var(--color-text); }
.member-task-meta { font-size: 11px; color: var(--color-text-muted); margin-top: 3px; }
.member-task-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }

/* ── ECM form view ─────────────────────────────────────────────── */
.ecm-form-wrap { max-width: 960px; margin: 0 auto; padding: 24px; }
.ecm-group-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--color-info-bg); color: var(--color-info); border: 1px solid var(--color-info-border);
}
.ecm-sync-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; background: var(--color-info-bg);
  border: 1px solid var(--color-info-border); border-radius: var(--radius-lg);
  margin-bottom: 16px; font-size: 12px; color: var(--color-info);
}
.sync-pill {
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; margin-left: auto;
}
.sync-pill.draft    { background: var(--status-unsigned-bg); color: var(--status-unsigned); border: 1px solid var(--status-unsigned-border); }
.sync-pill.synced   { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }
.sync-pill.saving   { background: var(--color-brand-light); color: var(--color-brand); border: 1px solid #c3d1f7; }

/* File attachment row */
.file-attach-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  margin-top: 10px;
}
.file-attach-name { font-size: 12px; font-weight: 500; flex: 1; }
.file-attach-meta { font-size: 11px; color: var(--color-text-muted); }
.file-attach-area {
  border: 1px dashed var(--color-border); border-radius: var(--radius);
  padding: 14px; text-align: center; font-size: 12px; color: var(--color-text-muted);
  margin-top: 10px; cursor: pointer; transition: var(--transition);
}
.file-attach-area:hover { border-color: var(--color-brand); background: var(--color-brand-light); color: var(--color-brand); }

/* Unit tracker */
.unit-tracker {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding: 14px; background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius); margin-top: 10px;
}
.unit-tracker-item { text-align: center; }
.unit-tracker-value { font-size: 22px; font-weight: 700; color: var(--color-brand); }
.unit-tracker-label { font-size: 10px; color: var(--color-text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.unit-tracker-value.warn { color: var(--status-unsigned); }
.unit-tracker-value.good { color: var(--color-success); }

/* ── Docs create view ───────────────────────────────────────────── */
.docs-create-wrap { max-width: 860px; margin: 0 auto; padding: 24px; }
.docs-step-bar {
  display: flex; align-items: center; gap: 0;
  margin-bottom: 24px; background: white;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.docs-step-item {
  flex: 1; padding: 14px 16px; text-align: center;
  font-size: 12px; font-weight: 500; color: var(--color-text-muted);
  border-right: 1px solid var(--color-border); position: relative;
}
.docs-step-item:last-child { border-right: none; }
.docs-step-item.active { background: var(--color-brand-light); color: var(--color-brand); font-weight: 700; }
.docs-step-item.done { background: var(--color-success-bg); color: var(--color-success); }
.docs-step-num { font-size: 16px; font-weight: 700; margin-bottom: 2px; }

.form-template-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.form-template-card {
  border: 2px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 14px 12px; cursor: pointer; transition: var(--transition);
  position: relative; background: white;
}
.form-template-card:hover { border-color: var(--color-brand); }
.form-template-card.selected { border-color: var(--color-brand); background: var(--color-brand-light); }
.form-template-check {
  position: absolute; top: 10px; right: 10px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-brand); color: white;
  display: none; align-items: center; justify-content: center; font-size: 11px;
}
.form-template-card.selected .form-template-check { display: flex; }
.form-template-icon { font-size: 20px; margin-bottom: 6px; }
.form-template-name { font-size: 12px; font-weight: 600; margin-bottom: 3px; }
.form-template-pages { font-size: 11px; color: var(--color-text-muted); }

.selected-forms-list { margin-bottom: 16px; }
.selected-form-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; background: white;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  margin-bottom: 6px;
}
.selected-form-row-icon { font-size: 16px; flex-shrink: 0; }
.selected-form-row-name { font-size: 13px; font-weight: 500; flex: 1; }
.selected-form-row-meta { font-size: 11px; color: var(--color-text-muted); }
.selected-form-row-remove { background: none; border: none; color: var(--color-text-muted); cursor: pointer; font-size: 14px; padding: 2px 6px; }

/* Delivery options */
.delivery-option {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border: 2px solid var(--color-border);
  border-radius: var(--radius-lg); cursor: pointer; margin-bottom: 8px;
  transition: var(--transition);
}
.delivery-option:hover { border-color: var(--color-brand); }
.delivery-option.selected { border-color: var(--color-brand); background: var(--color-brand-light); }
.delivery-option-icon { font-size: 20px; flex-shrink: 0; }
.delivery-option-title { font-size: 13px; font-weight: 600; }
.delivery-option-desc { font-size: 11px; color: var(--color-text-muted); }

/* ── §10c Task create modal ────────────────────────────────────── */
.task-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  z-index: 700; display: none; align-items: center; justify-content: center;
}
.task-modal-overlay.open { display: flex; }
.task-modal-box {
  background: white; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); width: 540px; max-width: 94vw;
  max-height: 88vh; overflow-y: auto;
}
.task-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--color-border);
}
.task-modal-header h3 { font-size: 16px; font-weight: 700; }
.task-modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.task-modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 14px 20px; border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}

.priority-picker { display: flex; gap: 6px; }
.priority-opt {
  flex: 1; padding: 7px 10px; border: 2px solid var(--color-border);
  border-radius: var(--radius); font-size: 12px; font-weight: 600;
  cursor: pointer; text-align: center; transition: var(--transition);
  background: white; font-family: inherit;
}
.priority-opt.high   { border-color: var(--color-danger-border); color: var(--color-danger); background: var(--color-danger-bg); }
.priority-opt.medium { border-color: var(--status-unsigned-border); color: var(--status-unsigned); background: var(--status-unsigned-bg); }
.priority-opt.low    { border-color: var(--color-border); color: var(--color-text-muted); }
.priority-opt.selected.high   { border-color: var(--color-danger); box-shadow: 0 0 0 3px rgba(197,48,48,0.12); }
.priority-opt.selected.medium { border-color: var(--status-unsigned); box-shadow: 0 0 0 3px rgba(146,64,14,0.12); }
.priority-opt.selected.low    { border-color: var(--color-brand); color: var(--color-brand); box-shadow: 0 0 0 3px rgba(102,126,234,0.12); }

.task-type-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.task-type-opt {
  width: 36px; height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--color-border); border-radius: var(--radius);
  font-size: 18px; line-height: 1;
  cursor: pointer; transition: var(--transition); background: var(--color-surface);
  color: var(--color-text-secondary);
}
.task-type-opt:hover { border-color: var(--color-brand); background: var(--color-brand-light); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.task-type-opt.selected { border-color: var(--color-brand); background: var(--color-brand-light); box-shadow: 0 0 0 2px rgba(102,126,234,.18); }
.prog-opt {
  padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-pill);
  background: none; color: var(--color-text-secondary); font-family: inherit;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.prog-opt:hover { border-color: var(--color-brand); color: var(--color-brand); background: var(--color-brand-light); }
.prog-opt.selected { border-color: var(--color-brand); background: var(--color-brand-light); color: var(--color-brand); box-shadow: 0 0 0 2px rgba(102,126,234,.18); }

/* ── Task modal — unified two-panel redesign ─────────────────────────────── */
.task-modal-wide { width:920px; max-width:96vw; max-height:90vh; background:white; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden; }
.task-modal-panels { display:flex; flex:1; min-height:0; }
.task-panel-left { flex:0 0 58%; display:flex; flex-direction:column; overflow-y:auto; padding:20px 16px 20px 20px; }
.task-panel-right { flex:0 0 42%; display:flex; flex-direction:column; border-left:1px solid var(--color-border); overflow:hidden; }
.task-modal-header-bar { display:flex; align-items:center; gap:8px; padding:14px 20px 12px; border-bottom:1px solid var(--color-border); flex-shrink:0; }
.task-num-badge { font-family:monospace; font-size:13px; font-weight:700; color:var(--color-text-muted); background:var(--color-bg); border:1px solid var(--color-border); border-radius:4px; padding:2px 7px; white-space:nowrap; flex-shrink:0; cursor:pointer; }
.task-num-badge:hover { border-color:var(--color-brand); color:var(--color-brand); }
.task-autosave-indicator { font-size:11px; color:var(--color-text-muted); transition:color .2s; flex-shrink:0; }
.task-autosave-indicator.saving { color:var(--color-brand); }
.task-autosave-indicator.saved  { color:var(--color-success); }
.task-title-input { width:100%; border:none; font-size:20px; font-weight:700; font-family:inherit; color:var(--color-text); background:transparent; padding:0 0 4px; margin-bottom:12px; border-bottom:2px solid transparent; transition:border-color var(--transition); box-sizing:border-box; }
.task-title-input:focus { border-bottom-color:var(--color-brand); }
.task-title-input::placeholder { color:var(--color-text-muted); font-weight:400; }
.task-meta-bar { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:14px; }
.task-meta-pill { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border:1px solid var(--color-border); border-radius:var(--radius-pill); font-size:12px; font-weight:500; cursor:pointer; background:white; font-family:inherit; color:var(--color-text-secondary); transition:var(--transition); white-space:nowrap; position:relative; }
.task-meta-pill:hover { border-color:var(--color-brand); color:var(--color-brand); background:var(--color-brand-light); }
.task-meta-pill.active { border-color:var(--color-brand); color:var(--color-brand); background:var(--color-brand-light); font-weight:600; }
.task-meta-pill.prio-high   { border-color:var(--color-danger-border); color:var(--color-danger); background:var(--color-danger-bg); }
.task-meta-pill.prio-medium { border-color:var(--status-unsigned-border); color:var(--status-unsigned); background:var(--status-unsigned-bg); }
.task-meta-pill.prio-low    { border-color:var(--color-border); color:var(--color-text-muted); }
.task-meta-popover { position:absolute; top:calc(100% + 5px); left:0; z-index:710; background:white; border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); min-width:180px; padding:6px 0; display:none; }
.task-meta-popover.open { display:block; }
.task-meta-popover-item { display:flex; align-items:center; gap:8px; padding:7px 14px; cursor:pointer; font-size:13px; transition:background var(--transition); color:var(--color-text); }
.task-meta-popover-item:hover { background:var(--color-bg); }
.task-desc-area { display:flex; flex-direction:column; flex:1; }
.task-activity-header { padding:14px 16px 10px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--color-text-muted); border-bottom:1px solid var(--color-border); flex-shrink:0; }
.task-activity-feed { flex:1; overflow-y:auto; padding:12px 16px; }
.task-activity-event { display:flex; gap:8px; align-items:flex-start; padding:4px 0; font-size:12px; color:var(--color-text-muted); }
.task-activity-event-dot { width:6px; height:6px; border-radius:50%; background:var(--color-border); flex-shrink:0; margin-top:4px; }
.task-activity-comment { display:flex; gap:8px; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--color-border); }
.task-activity-comment:last-child { border-bottom:none; }
.task-comment-av { width:26px; height:26px; border-radius:50%; background:var(--color-brand-gradient); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:white; flex-shrink:0; }
.task-comment-input-area { border-top:1px solid var(--color-border); padding:10px 12px; flex-shrink:0; display:flex; gap:8px; align-items:flex-start; }
.task-comment-box { flex:1; min-height:34px; max-height:110px; overflow-y:auto; padding:7px 10px; border:1.5px solid var(--color-border); border-radius:var(--radius); font-size:13px; font-family:inherit; box-sizing:border-box; resize:none; line-height:1.4; }
.task-comment-box:focus { border-color:var(--color-brand); box-shadow:0 0 0 3px rgba(102,126,234,.12); }
.task-comment-box:empty::before { content:attr(data-placeholder); color:var(--color-text-muted); pointer-events:none; }
@media (max-width:680px) {
  .task-modal-panels { flex-direction:column; }
  .task-panel-left,.task-panel-right { flex:none; width:100%; }
  .task-panel-right { border-left:none; border-top:1px solid var(--color-border); max-height:40vh; }
  .task-modal-wide { width:100%; max-width:100vw; max-height:100vh; border-radius:0; }
}

.member-search-box {
  position: relative;
}
.member-search-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: white; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown); overflow: hidden; display: none;
}
.member-search-results.open { display: block; }
.member-search-result {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; cursor: pointer; transition: background var(--transition);
  border-bottom: 1px solid var(--color-border);
}
.member-search-result:last-child { border-bottom: none; }
.member-search-result:hover { background: var(--color-brand-light); }
.member-selected-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px; background: var(--color-brand-light);
  border: 1px solid #c3d1f7; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 500;
}
.member-selected-chip button { background: none; border: none; color: var(--color-text-muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 0 0 4px; }

/* ── Care plan form view ───────────────────────────────────────── */
.plan-form-wrap { max-width: 900px; margin: 0 auto; padding: 24px; }

.plan-form-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: white; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); margin-bottom: 20px;
  box-shadow: var(--shadow-sm); flex-wrap: wrap;
}
.plan-form-back {
  display: flex; align-items: center; gap: 4px;
  font-size: 13px; color: var(--color-text-muted);
  background: none; border: none; padding: 4px 8px;
  border-radius: var(--radius); cursor: pointer; transition: var(--transition);
}
.plan-form-back:hover { background: var(--color-bg); color: var(--color-text); }
.plan-form-title { font-size: 14px; font-weight: 700; color: var(--color-text); }
.plan-form-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.autosave-badge {
  font-size: 11px; color: var(--color-text-muted);
  display: flex; align-items: center; gap: 4px;
}
.autosave-badge.saving  { color: var(--color-brand); }
.autosave-badge.unsaved { color: var(--color-warning); }
.autosave-badge.saved   { color: var(--color-success); }

.lock-badge {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600;
  background: var(--color-info-bg); color: var(--color-info);
  border: 1px solid var(--color-info-border);
}
.drift-badge {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; cursor: pointer;
  background: var(--status-unsigned-bg); color: var(--status-unsigned);
  border: 1px solid var(--status-unsigned-border);
}
.btn-ai {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: var(--radius);
  font-size: 12px; font-weight: 600;
  background: linear-gradient(135deg,#667eea,#764ba2);
  color: white; border: none; cursor: pointer; transition: var(--transition);
  font-family: inherit;
}
.btn-ai:hover { opacity: 0.88; }

/* Form sections (collapsible) */
.form-section {
  background: white; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); margin-bottom: 12px;
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.form-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; cursor: pointer;
  transition: background var(--transition);
  user-select: none;
}
.form-section-header:hover { background: var(--color-bg); }
.form-section-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; color: var(--color-text);
}
.form-section-icon { font-size: 16px; }
.form-section-chevron {
  font-size: 12px; color: var(--color-text-muted);
  transition: transform var(--transition);
}
.form-section.open .form-section-chevron { transform: rotate(180deg); }
.form-section-body { display: none; padding: 16px; border-top: 1px solid var(--color-border); }
.form-section.open .form-section-body { display: block; }
.form-section-complete { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }
.form-section-incomplete { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--status-unsigned-bg); color: var(--status-unsigned); border: 1px solid var(--status-unsigned-border); }

/* Form fields inside sections */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group.span2, .form-grid > .span2 { grid-column: span 2; }
.form-label { font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.form-input, .form-select, .form-textarea {
  padding: 8px 12px; border: 1px solid var(--color-border);
  border-radius: var(--radius); font-size: 13px; font-family: inherit;
  color: var(--color-text); background: white;
  transition: border-color var(--transition);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(102,126,234,0.12);
}
.form-textarea { resize: vertical; min-height: 80px; line-height: 1.5; overflow-y: auto; }
.form-textarea--tall { min-height: 120px; }
.form-select { height: 36px; }
.form-input.ai-filled { background: #f9f7ff; border-color: #c4b5fd; }
.ai-filled-label { font-size: 10px; color: #7c3aed; font-weight: 600; margin-top: 2px; }

/* Goal rows */
.goal-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 10px; align-items: start;
  padding: 12px; background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  margin-bottom: 8px;
}
.goal-row:last-child { margin-bottom: 0; }
.goal-num { font-size: 11px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.add-goal-btn { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px dashed var(--color-brand); border-radius: var(--radius); background: var(--color-brand-light); color: var(--color-brand); font-size: 12px; font-weight: 500; cursor: pointer; width: 100%; margin-top: 10px; justify-content: center; transition: var(--transition); font-family: inherit; }
.add-goal-btn:hover { background: #e0e7ff; }

/* Signature block */
.sig-block {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 16px; background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius);
}
.sig-field { display: flex; flex-direction: column; gap: 6px; }
.sig-label { font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.sig-canvas-placeholder {
  height: 70px; border: 1px dashed var(--color-border);
  border-radius: var(--radius); background: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--color-text-muted); cursor: pointer;
}
.sig-applied {
  height: 70px; border: 1px solid var(--color-success-border);
  border-radius: var(--radius); background: var(--color-success-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--color-success); font-weight: 600;
}

/* ── New plan modal ─────────────────────────────────────────────── */
.new-plan-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  z-index: 700; display: none; align-items: center; justify-content: center;
}
.new-plan-overlay.open { display: flex; }
.new-plan-box {
  background: white; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); width: 520px; max-width: 94vw;
  max-height: 88vh; overflow-y: auto;
}
.new-plan-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--color-border);
}
.new-plan-header h3 { font-size: 16px; font-weight: 700; }
.new-plan-close { background: none; border: none; font-size: 18px; color: var(--color-text-muted); cursor: pointer; padding: 4px; line-height: 1; }
.new-plan-body { padding: 20px; }

.plan-step { display: none; }
.plan-step.active { display: block; }
.plan-step-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 14px; }

.plan-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.plan-type-card {
  border: 2px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 14px 12px; cursor: pointer; transition: var(--transition); text-align: center;
}
.plan-type-card:hover { border-color: var(--color-brand); background: var(--color-brand-light); }
.plan-type-card.selected { border-color: var(--color-brand); background: var(--color-brand-light); }
.plan-type-card-icon { font-size: 22px; margin-bottom: 6px; }
.plan-type-card-name { font-size: 13px; font-weight: 600; }
.plan-type-card-desc { font-size: 11px; color: var(--color-text-muted); margin-top: 3px; }

.ai-toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px;
}
.ai-toggle-btn {
  padding: 12px; border-radius: var(--radius-lg); border: 2px solid var(--color-border);
  background: white; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600;
  transition: var(--transition); display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ai-toggle-btn:hover { border-color: var(--color-brand); background: var(--color-brand-light); }
.ai-toggle-btn.ai-btn { border-color: #c4b5fd; background: #f9f7ff; color: #5b21b6; }
.ai-toggle-btn.ai-btn:hover { border-color: #7c3aed; background: #ede9fe; }
.ai-toggle-btn-icon { font-size: 20px; }
.ai-toggle-btn-sub { font-size: 10px; font-weight: 400; color: var(--color-text-muted); }

.ai-processing {
  display: none; text-align: center; padding: 28px 20px;
}
.ai-processing.active { display: block; }
.ai-spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid #e9d5ff; border-top-color: #7c3aed;
  animation: spin 0.8s linear infinite; margin: 0 auto 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ai-processing-text { font-size: 14px; font-weight: 600; color: var(--color-text); margin-bottom: 6px; }
.ai-processing-sub { font-size: 12px; color: var(--color-text-muted); }
.ai-steps { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; text-align: left; }
.ai-step-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-muted); }
.ai-step-row.done { color: var(--color-success); font-weight: 500; }
.ai-step-row.active-step { color: var(--color-brand); font-weight: 600; }

.new-plan-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 14px 20px; border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}

/* ── Tooltips — superseded by #kndTooltip (see §17 comment) ──── */

/* ── §07b Field validation states ─────────────────────────────── */
.form-input.error, .form-select.error { border-color: var(--color-danger); box-shadow: 0 0 0 3px rgba(229,62,62,.1); }
.form-input.success, .form-select.success { border-color: #48bb78; }
.field-error { font-size: 11px; color: var(--color-danger); margin-top: 3px; font-weight: 500; }
.field-hint { font-size: 11px; color: var(--color-text-muted); margin-top: 3px; }
.form-input[type="tel"] { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.form-input.mono { font-family: ui-monospace, monospace; letter-spacing: 0.05em; }

/* Address row */
.address-row { display: grid; grid-template-columns: 1fr 80px 72px; gap: 8px; }

/* Service chip picker */
.chip-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-pick { display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; border: 1.5px solid var(--color-border);
  cursor: pointer; transition: var(--transition); background: white; }
.chip-pick.selected { background: var(--color-brand-light); border-color: var(--color-brand); color: var(--color-brand); }
.chip-pick.selected::before { content: '✓ '; }

/* Google Places hint */
.places-hint { font-size: 10px; color: var(--color-brand); font-weight: 600; margin-top: 2px; }

/* Overdue badge */
.overdue-badge { display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 700; color: var(--color-danger);
  background: var(--color-danger-bg); border: 1px solid #fca5a5;
  border-radius: var(--radius-pill); padding: 1px 7px; }

/* Task priority dots */
.priority-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.priority-dot.high { background: var(--color-danger); }
.priority-dot.med  { background: var(--color-warning); }
.priority-dot.low  { background: var(--color-text-muted); }

/* ── Mockup annotation ─────────────────────────────────────────── */
.mockup-note {
  position: fixed; bottom: 16px; right: 16px;
  background: rgba(30,30,40,0.9); color: white;
  padding: 10px 14px; border-radius: var(--radius-lg);
  font-size: 11px; line-height: 1.6; max-width: 280px;
  z-index: var(--z-tooltip);
}
.mockup-note strong { display: block; margin-bottom: 4px; font-size: 12px; }

/* ── v8: Field groups (collapsible, member overview) ─────────── */
.fg { background:white; border:1px solid var(--color-border); border-radius:var(--radius-lg); margin-bottom:8px; overflow:hidden; }
.fg-head { display:flex; align-items:center; gap:8px; padding:11px 16px; cursor:pointer; user-select:none; transition:background .12s; }
.fg-head:hover { background:var(--color-bg); }
.fg-icon { font-size:14px; flex-shrink:0; }
.fg-title { font-size:13px; font-weight:600; flex:1; }
.fg-fill { font-size:11px; color:var(--color-text-muted); }
.fg-fill .complete { color:var(--color-success); font-weight:600; }
.fg-chevron { font-size:10px; color:var(--color-text-muted); transition:transform .2s; }
.fg.open .fg-chevron { transform:rotate(180deg); }
.fg-body { display:none; border-top:1px solid var(--color-border); }
.fg.open .fg-body { display:block; }
.fg-grid { display:grid; grid-template-columns:1fr 1fr; }
.fg-grid .fg-row:nth-child(odd):not(.full) { border-right:1px solid var(--color-border); }
.fg-row { display:flex; flex-direction:column; gap:2px; padding:10px 16px; border-bottom:1px solid var(--color-border); transition:background .12s; position:relative; cursor:pointer; min-width:0; }
.fg-row:hover { background:#f7f7ff; }
.fg-row:hover .ie-hint { opacity:1; }
.fg-row.full { grid-column:1/-1; }
.fg-row:last-child { border-bottom:none; }
.fg-lbl { font-size:11px; font-weight:600; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.05em; }
.fg-val { font-size:13px; color:var(--color-text); overflow-wrap:break-word; min-width:0; }
.fg-val.empty { color:var(--color-text-muted); font-style:italic; }
.fg-val.mono { font-family:ui-monospace,monospace; font-size:12px; }
.ie-hint { position:absolute; right:10px; top:50%; transform:translateY(-50%); opacity:0; font-size:10px; font-weight:600; color:var(--color-brand); background:#eef2ff; border:1px solid var(--color-brand); padding:2px 7px; border-radius:var(--radius-pill); pointer-events:none; transition:opacity .12s; }
.fg-row.editing { background:#eef2ff !important; }
.fg-row.editing .fg-lbl { color:var(--color-brand); }
.ie-input { width:100%; padding:4px 8px; border:1.5px solid var(--color-brand); border-radius:var(--radius); font-family:inherit; font-size:13px; background:white; margin-top:2px; }
.ie-input:focus { box-shadow:0 0 0 3px rgba(102,126,234,.15); }
.ie-actions { display:flex; gap:6px; margin-top:4px; }
.ie-save { padding:2px 10px; background:var(--color-brand); color:white; border:none; border-radius:var(--radius); font-size:11px; font-weight:600; cursor:pointer; font-family:inherit; }
.ie-cancel { padding:2px 8px; background:white; color:var(--color-text-muted); border:1px solid var(--color-border); border-radius:var(--radius); font-size:11px; cursor:pointer; font-family:inherit; }
.fg-val.ai-f { background:#f9f7ff; border-left:2px solid #c4b5fd; padding-left:6px; border-radius:2px; }
.fg-val.places-f { background:#f0f9ff; border-left:2px solid #7dd3fc; padding-left:6px; border-radius:2px; }

/* ── Address inline composer (fg-row smart edit) ─────────────── */
.fg-addr-edit {
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  margin-top:var(--space-2);
  animation:fgAddrExpand 180ms ease-out;
}
@keyframes fgAddrExpand {
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:translateY(0); }
}
.fg-addr-street-wrap { position:relative; }
.fg-addr-row { display:grid; grid-template-columns:80px 1fr; gap:var(--space-2); }
.fg-addr-row .fg-addr-state { text-align:center; font-weight:600; }
.fg-places-drop {
  display:none;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  margin-top:var(--space-1);
  background:white;
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  z-index:var(--z-dropdown);
  max-height:260px;
  overflow-y:auto;
}
.fg-places-drop.show { display:block; }
.fg-places-row {
  display:flex;
  align-items:flex-start;
  gap:var(--space-2);
  padding:var(--space-2) var(--space-3);
  cursor:pointer;
  border-bottom:1px solid var(--color-border);
  font-size:var(--text-sm);
}
.fg-places-row:last-child { border-bottom:none; }
.fg-places-row:hover { background:var(--color-surface-hover,#f7f8fa); }
.fg-places-icon { font-size:var(--text-base); line-height:1.2; flex-shrink:0; }
.fg-places-main { font-weight:600; color:var(--color-text); }
.fg-places-sub  { font-size:var(--text-xs); color:var(--color-text-muted); margin-top:1px; }
.places-item--hover { background: var(--color-brand-light); }

/* ── Field-group deep-link flash (look-here hint) ────────────── */
.fg.fg-flash { animation:fgFlash .6s ease-in-out 3; }
@keyframes fgFlash {
  0%   { box-shadow:0 0 0 0 rgba(245,158,11,0); }
  50%  { box-shadow:0 0 0 2px rgba(245,158,11,.55); }
  100% { box-shadow:0 0 0 0 rgba(245,158,11,0); }
}

/* ── v8: "Other" reveal ──────────────────────────────────────── */
.other-reveal { display:none; margin-top:6px; }
.other-reveal.show { display:block; }
.other-reveal .form-input { font-size:12px; border-color:#a78bfa; background:#f9f7ff; }

/* ── v8: Multi-value contact list (read) ─────────────────────── */
.mv-list { display:flex; flex-direction:column; gap:6px; margin-bottom:4px; }
.mv-item { display:flex; align-items:center; gap:8px; }
.mv-item .mv-label { font-size:10px; color:var(--color-text-muted); font-weight:600; min-width:44px; }
.mv-item .mv-val { flex:1; font-size:13px; color:var(--color-text); }
.mv-add { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--color-brand); font-weight:600; background:none; border:1px dashed var(--color-brand); border-radius:var(--radius-pill); padding:3px 11px; cursor:pointer; font-family:inherit; transition:background .12s; }
.mv-add:hover { background:#eef2ff; }

/* ── v8: Providers read list ─────────────────────────────────── */
.provider-list { display:flex; flex-direction:column; gap:6px; }
.provider-item { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--color-bg); border-radius:var(--radius); font-size:12px; }
.provider-item .prov-name { font-weight:600; flex:1; }
.provider-item .prov-type-tag { font-size:10px; color:var(--color-text-muted); background:white; border:1px solid var(--color-border); border-radius:var(--radius-pill); padding:1px 7px; flex-shrink:0; }
.provider-item .prov-phone { font-size:11px; color:var(--color-text-muted); }

/* ── v8: File attachments ────────────────────────────────────── */
.attach-zone { border:2px dashed var(--color-border); border-radius:var(--radius-lg); padding:18px; text-align:center; color:var(--color-text-muted); font-size:12px; cursor:pointer; transition:border-color .15s,background .15s; margin-bottom:10px; }
.attach-zone:hover { border-color:var(--color-brand); background:#f7f8ff; color:var(--color-brand); }
.attach-zone-icon { font-size:20px; margin-bottom:4px; }
.attach-list { display:flex; flex-direction:column; gap:6px; }
.attach-item { display:flex; align-items:center; gap:8px; padding:8px 12px; background:white; border:1px solid var(--color-border); border-radius:var(--radius); font-size:12px; }
.attach-item-icon { font-size:18px; flex-shrink:0; }
.attach-item-name { font-weight:600; color:var(--color-text); flex:1; }
.attach-item-meta { font-size:10px; color:var(--color-text-muted); }
.attach-item-type { font-size:10px; background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-pill); padding:1px 7px; color:var(--color-text-muted); flex-shrink:0; }
.attach-item-del { background:none; border:none; color:var(--color-text-muted); cursor:pointer; font-size:13px; padding:2px 4px; border-radius:var(--radius); transition:color .12s; }
.attach-item-del:hover { color:var(--color-danger); }

/* ── v8: IHSP form sections ───────────────────────────────────── */
.ihsp-list-field { border:1px solid var(--color-border); border-radius:var(--radius); padding:8px 10px; min-height:60px; font-size:13px; line-height:1.6; color:var(--color-text); background:var(--color-bg-alt); cursor:text; }
.ihsp-list-field:focus { border-color:var(--color-brand); background:#fff; box-shadow:0 0 0 2px rgba(99,102,241,.08); }
.ihsp-list-item { padding:4px 0; border-bottom:1px dashed var(--color-border); display:flex; align-items:flex-start; gap:6px; }
.ihsp-list-item::before { content:"•"; color:var(--color-text-muted); flex-shrink:0; margin-top:1px; }
.ihsp-list-item:last-child { border-bottom:none; }
.ai-filled-item { background:rgba(139,92,246,.04); border-radius:3px; padding:3px 6px; }
.housing-history-entry { background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius); padding:12px; margin-bottom:8px; }
.housing-history-entry:last-child { margin-bottom:0; }
.ihsp-sig-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.ihsp-doc-item { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--color-border-light); font-size:13px; cursor:pointer; }
.ihsp-doc-item:last-child { border-bottom:none; }
.ihsp-doc-item input[type=checkbox] { accent-color:var(--color-brand); width:14px; height:14px; flex-shrink:0; }
.ihsp-doc-item .doc-unchecked { text-decoration:line-through; color:var(--color-text-muted); }
.ihsp-sub-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin:10px 0 5px; }
.ihsp-sub-label.amber { color:#b45309; }
.ihsp-sub-label.green { color:#15803d; }
.ihsp-sub-label.brand { color:var(--color-brand); }

.housing-history-entry {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px;
}

/* ── HP Form — Homelessness Prevention ───────────────────────── */
.hp-wrap { display: flex; min-height: calc(100vh - var(--nav-height)); background: var(--color-bg); }

.hp-sidebar {
  width: 220px; flex-shrink: 0; background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column;
  position: sticky; top: var(--nav-height); height: calc(100vh - var(--nav-height));
  overflow-y: auto;
}
.hp-sidebar-member { padding: 20px 16px 16px; border-bottom: 1px solid var(--color-border); }
.hp-sidebar-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-brand-gradient); color: #fff;
  font-size: 15px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.hp-sidebar-name { font-weight: 600; font-size: 13px; color: var(--color-text); line-height: 1.3; }
.hp-sidebar-cin { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; font-family: monospace; }
.hp-sidebar-elig { margin-top: 8px; }

.hp-nav { padding: 12px 0; flex: 1; }
.hp-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; cursor: pointer; font-size: 13px;
  color: var(--color-text-secondary); border-left: 3px solid transparent;
  transition: all var(--transition);
}
.hp-nav-item:hover { background: var(--color-bg); color: var(--color-text); }
.hp-nav-item.active { background: var(--color-brand-light); color: var(--color-brand); border-left-color: var(--color-brand); font-weight: 600; }
.hp-nav-num {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-bg-2); color: var(--color-text-muted);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hp-nav-item.active .hp-nav-num { background: var(--color-brand); color: #fff; }
.hp-nav-item.done .hp-nav-num { background: var(--color-success); color: #fff; }

.hp-sidebar-flags { padding: 12px 14px; border-top: 1px solid var(--color-border); background: var(--color-bg); display: flex; flex-direction: column; gap: 6px; }
.hp-sidebar-flags-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); margin-bottom: 2px; }
.hp-flag { display: flex; align-items: flex-start; gap: 7px; padding: 7px 9px; border-radius: var(--radius); border: 1px solid; font-size: 11px; line-height: 1.4; }
.hp-flag-icon { flex-shrink: 0; font-size: 12px; margin-top: 1px; }
.hp-flag-danger { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger); }
.hp-flag-warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning); }
.hp-flag-info { background: var(--color-info-bg); border-color: var(--color-info-border); color: var(--color-info); }

.hp-main { flex: 1; padding: 28px 32px; overflow-y: auto; max-width: 860px; }
.hp-part-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-brand); margin-bottom: 4px; }
.hp-part-title { font-size: 20px; font-weight: 700; color: var(--color-text); margin-bottom: 2px; }
.hp-part-sub { font-size: 13px; color: var(--color-text-muted); margin-bottom: 20px; }

.hp-progress-bar-wrap { background: var(--color-bg-2); border-radius: var(--radius-pill); height: 6px; margin-bottom: 20px; overflow: hidden; }
.hp-progress-bar-fill { height: 100%; background: var(--color-brand-gradient); border-radius: var(--radius-pill); transition: width .3s ease; /* allow-jank: progress bar visual fill */ }
.hp-progress-label { font-size: 11px; color: var(--color-text-muted); text-align: right; margin-top: -18px; margin-bottom: 14px; }

.hp-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--radius-pill); margin-left: 8px; vertical-align: middle; }
.hp-tag-auto { background: var(--color-brand-light); color: var(--color-brand); }
.hp-tag-exhibit { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }
.hp-tag-calc { background: var(--color-info-bg); color: var(--color-info); }

.hp-note-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: 16px; overflow: hidden; }
.hp-note-card-header { padding: 10px 16px; background: var(--color-bg); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 10px; }
.hp-note-card-body { padding: 16px; }
.hp-note-card-date { font-size: 12px; font-weight: 600; color: var(--color-text); }
.hp-note-card-type { font-size: 11px; color: var(--color-text-muted); }
.hp-note-card-actions { margin-left: auto; display: flex; gap: 6px; }

/* Enhanced note card body - grid layout for fields */
.hp-note-body { padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.hp-note-body .fg-row { margin-bottom: 0; display: flex; flex-direction: column; gap: 4px; }
.hp-note-body .fg-lbl { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); }
.hp-note-body .fg-val { font-size: 13px; }
.hp-note-body textarea { width: 100%; min-height: 64px; resize: vertical; }
.hp-note-full { grid-column: 1 / -1; }
.hp-note-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }

/* Note radio group - pill-style buttons */
.hp-note-radio-group { display: flex; gap: 6px; flex-wrap: wrap; }
.hp-note-radio-group label {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; padding: 5px 12px;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-surface); cursor: pointer; transition: var(--transition);
}
.hp-note-radio-group label:hover { border-color: var(--color-brand); background: var(--color-brand-light); }
.hp-note-radio-group input[type=radio] { display: none; }
.hp-note-radio-group input[type=radio]:checked + span { font-weight: 600; }
.hp-note-radio-group label:has(input:checked) { border-color: var(--color-brand); background: var(--color-brand-light); color: var(--color-brand); }

/* Date mode toggle */
.hp-mode-toggle { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.hp-mode-btn {
  padding: 8px 18px; font-size: 12px; font-weight: 600;
  background: var(--color-surface); color: var(--color-text-secondary);
  border: none; cursor: pointer; transition: var(--transition);
}
.hp-mode-btn:hover { background: var(--color-bg); }
.hp-mode-btn.active { background: var(--color-brand); color: #fff; }

/* PDF Preview shell */
.hp-pdf-shell { background: #3c3c3c; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; }
.hp-pdf-toolbar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid #555; }
.hp-pdf-dot { width: 10px; height: 10px; border-radius: 50%; }
.hp-pdf-filename { flex: 1; text-align: center; font-size: 11px; color: #aaa; }
.hp-pdf-print-btn { font-size: 11px; color: #ccc; background: rgba(255,255,255,.1); border: none; padding: 4px 10px; border-radius: var(--radius); cursor: pointer; }
.hp-pdf-print-btn:hover { background: rgba(255,255,255,.2); }

.hp-pdf-page { background: #fff; margin: 16px; padding: 24px 28px; border-radius: 2px; box-shadow: 0 2px 8px rgba(0,0,0,.3); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* allow-font: PDF print preview — system stack for print fidelity */ }

.hp-pdf-org-header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--color-brand); padding-bottom: 10px; margin-bottom: 14px; }
.hp-pdf-org-name { font-size: 13px; font-weight: 700; color: var(--color-brand); }
.hp-pdf-org-sub { font-size: 10px; color: #666; margin-top: 2px; }
.hp-pdf-doc-title { font-size: 13px; font-weight: 700; text-align: right; }
.hp-pdf-doc-period { font-size: 10px; color: #666; text-align: right; }

.hp-pdf-member-block { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px; background: #f8f9fa; border: 1px solid #e5e7eb; border-radius: 4px; margin-bottom: 14px; }
.hp-pdf-member-cell label { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #888; }
.hp-pdf-member-cell span { font-size: 11px; color: #111; font-weight: 500; }

.hp-pdf-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-brand); margin: 14px 0 8px; }

.hp-pdf-entry { border: 1px solid #e5e7eb; border-radius: 4px; padding: 10px 12px; margin-bottom: 8px; }
.hp-pdf-entry-header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.hp-pdf-date { font-size: 11px; font-weight: 700; color: #111; }
.hp-pdf-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; }
.hp-pdf-badge-chw { background: #eef2ff; color: #4f46e5; }
.hp-pdf-badge-ecm { background: #f0fff4; color: #276749; }
.hp-pdf-badge-cs { background: #ebf8ff; color: #2b6cb0; }
.hp-pdf-badge-stable { background: #f0fff4; color: #276749; }
.hp-pdf-badge-atrisk { background: #fffbeb; color: #92400e; }
.hp-pdf-badge-crisis { background: #fff5f5; color: #c53030; }
.hp-pdf-badge-low { background: #f0fff4; color: #276749; }
.hp-pdf-badge-moderate { background: #fffbeb; color: #92400e; }
.hp-pdf-badge-high { background: #fff5f5; color: #c53030; }
.hp-pdf-badge-improved { background: #f0fff4; color: #276749; }
.hp-pdf-badge-nochange { background: #f3f4f6; color: #6b7280; }
.hp-pdf-badge-declined { background: #fff5f5; color: #c53030; }

.hp-pdf-field { margin-bottom: 5px; }
.hp-pdf-field label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #888; display: block; }
.hp-pdf-field span { font-size: 11px; color: #222; }
.hp-pdf-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.hp-pdf-compliance-bar { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 10px; background: #f0fff4; border: 1px solid #c6f6d5; border-radius: 4px; margin-top: 14px; font-size: 10px; color: #276749; }
.hp-pdf-compliance-bar span { display: flex; align-items: center; gap: 4px; }

.hp-pdf-sig-block { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.hp-pdf-sig-line { border-top: 1px solid #333; padding-top: 4px; font-size: 9px; color: #666; text-align: center; }

.hp-pdf-footer { margin-top: 16px; padding-top: 8px; border-top: 1px solid #e5e7eb; font-size: 9px; color: #888; text-align: center; line-height: 1.5; }

@media print {
  .hp-pdf-shell { background: none !important; }
  .hp-pdf-toolbar { display: none !important; }
  .hp-pdf-page { margin: 0 !important; padding: 16px !important; box-shadow: none !important; border-radius: 0 !important; }
  .hp-pdf-entry { break-inside: avoid; page-break-inside: avoid; }
  .hp-pdf-section-title { break-after: avoid; page-break-after: avoid; }
  .hp-pdf-sig-block { break-inside: avoid; page-break-inside: avoid; }
  .hp-pdf-footer { break-inside: avoid; page-break-inside: avoid; }
}

.hp-billing-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.hp-billing-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 14px; text-align: center; }
.hp-billing-value { font-size: 24px; font-weight: 700; color: var(--color-brand); }
.hp-billing-value.good { color: var(--color-success); }
.hp-billing-value.warn { color: var(--status-unsigned); }
.hp-billing-label { font-size: 10px; color: var(--color-text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }

/* ── Member identity strip (Overview tab) ────────────────────── */
.member-identity-strip {
  display: flex; align-items: flex-start; gap: 16px;
  background: white; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 16px;
  box-shadow: var(--shadow-sm); margin-bottom: 16px;
}
.member-photo-wrap { position: relative; flex-shrink: 0; }
.member-photo {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--color-brand-gradient);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; border: 3px solid var(--color-border);
}
.member-photo-initials { font-size: 28px; font-weight: 700; color: white; user-select: none; }
.member-photo-img { width: 100%; height: 100%; object-fit: cover; display: none; }
.member-photo-img.loaded { display: block; }
.member-photo-edit-btn {
  position: absolute; bottom: 0; right: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: white; border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; transition: var(--transition);
}
.member-photo-edit-btn:hover { background: var(--color-brand-light); border-color: var(--color-brand); }
.member-identity-info { flex: 1; min-width: 0; }
.member-identity-name { font-size: 18px; font-weight: 700; color: var(--color-text); margin-bottom: 8px; letter-spacing: -0.01em; }
.member-identity-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-muted); flex-wrap: wrap; margin-bottom: 4px; }
.member-identity-sep { color: var(--color-border); }

/* Banner photo (small, 32px) */
.banner-photo {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-brand-gradient);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: white;
  border: 2px solid rgba(255,255,255,0.3);
  overflow: hidden; flex-shrink: 0;
}
.banner-photo img { width: 100%; height: 100%; object-fit: cover; display: none; }
.banner-photo img.loaded { display: block; }

/* Photo upload zone (in edit drawer) */
.photo-upload-zone {
  border: 2px dashed var(--color-border); border-radius: var(--radius-lg);
  padding: 24px 16px; text-align: center; cursor: pointer;
  transition: var(--transition); background: var(--color-bg);
}
.photo-upload-zone:hover { border-color: var(--color-brand); background: var(--color-brand-light); }

/* ── Directory: responsive column visibility ── */
@media (max-width: 900px) { .col-service, .col-assigned { display: none; } }
@media (max-width: 680px) { .col-activity { display: none; } }
@media (max-width: 500px) { .col-status { display: none; } }

/* ══════════════════════════════════════════════════════════════════
   Section 20 — Micro-app template styles (IHSP / CHW / ECM)
   Extracted from inline <style> blocks for knd.css compliance.
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   Extracted from ihsp-step1
   ══════════════════════════════════════════════════════ */

  /* ── Page container ── */
  .s1-container {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    max-width: 900px;
    width: 100%;
    padding: 48px;
  }
  @media (max-width: 640px) { .s1-container { padding: 28px 20px; } }

  /* ── Phase cards ── */
  .s1-phase-card {
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: 24px;
  }
  .s1-phase-header {
    padding: 14px 20px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-base);
  }
  .s1-phase-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-brand);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
  }
  .s1-phase-body { padding: 24px; }

  /* ── Mode tabs (Search / New Contact) ── */
  .s1-tabs { display: flex; margin-bottom: 20px; }
  .s1-tab {
    flex: 1;
    padding: 11px 16px;
    border: 2px solid var(--color-border);
    background: white;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all var(--transition);
  }
  .s1-tab:first-child { border-radius: var(--radius) 0 0 var(--radius); border-right: none; }
  .s1-tab:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }
  .s1-tab:hover:not(.s1-tab--active) { border-color: var(--color-brand); color: var(--color-brand-dark); }
  .s1-tab--active { background: var(--color-brand); border-color: var(--color-brand); color: white; }

  /* ── CRM search row & results (inline, not modal) ── */
  .crm-search-row { display: flex; gap: 8px; margin-bottom: 12px; }
  .crm-search-input {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--text-base);
    transition: border-color var(--transition);
  }
  .crm-search-input:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(102,126,234,0.15); }
  .crm-search-btn {
    padding: 10px 20px;
    background: var(--color-brand);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
    white-space: nowrap;
  }
  .crm-search-btn:hover { background: var(--color-brand-dark); }
  .crm-search-btn:disabled { opacity: 0.6; cursor: not-allowed; }
  .crm-results {
    overflow-y: auto;
    max-height: 280px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
  }
  .crm-result-item {
    padding: 13px 16px;
    border-bottom: 1px solid var(--color-bg);
    cursor: pointer;
    transition: background var(--transition);
  }
  .crm-result-item:last-child { border-bottom: none; }
  .crm-result-item:hover { background: var(--color-brand-light); }
  .crm-result-name { font-weight: 600; font-size: var(--text-base); color: var(--color-text); margin-bottom: 3px; }
  .crm-result-meta { font-size: var(--text-xs); color: var(--color-text-muted); }
  .crm-status-msg { padding: 20px; text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); }

  /* ── Contact card (shown after selecting a search result) ── */
  .contact-card-inner {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 20px;
    background: var(--color-bg);
    border-radius: var(--radius);
    border: 1.5px solid var(--color-brand);
    margin-top: 12px;
  }
  .contact-card-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--color-brand);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    font-weight: 700;
    flex-shrink: 0;
  }
  .contact-card-detail { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 3px; }

  /* ── Notes textarea ── */
  #intakeText {
    width: 100%;
    min-height: 320px;
    padding: 16px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    resize: vertical;
    transition: border-color var(--transition);
    box-sizing: border-box;
  }
  #intakeText:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(102,126,234,0.15); }
  #intakeText::placeholder { color: var(--color-text-muted); }

  /* ── Loading / error ── */
  .s1-loading { display: none; text-align: center; padding: 20px; }
  .s1-loading.active { display: block; }
  .s1-loading p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 12px; }
  .s1-error { display: none; background: var(--color-danger-bg); border: 1px solid rgba(229,62,62,0.25); color: #c53030; padding: 16px; border-radius: var(--radius); margin-bottom: 20px; font-size: var(--text-sm); line-height: 1.5; }
  .s1-error.active { display: block; }

  /* ── Existing records badge (search results) ── */
  .ihsp-existing-badge {
    font-size: 11px; color: #b45309; background: #fef9c3;
    border-radius: 4px; padding: 1px 6px; margin-left: 5px;
  }
  /* ── Existing records warning panel (Phase B) ── */
  .ihsp-existing-panel {
    background: #fffbeb; border: 1.5px solid #f59e0b;
    border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px;
  }
  .ihsp-existing-panel-title { font-weight: 700; color: #92400e; margin-bottom: 8px; font-size: var(--text-sm); }
  .ihsp-existing-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px; background: white; border: 1px solid #fcd34d;
    border-radius: var(--radius-sm); margin-bottom: 4px;
    text-decoration: none; color: var(--color-text); font-size: var(--text-sm);
  }
  .ihsp-existing-link:hover { background: #fef3c7; }


/* ══════════════════════════════════════════════════════
   Extracted from ihsp-step2
   ══════════════════════════════════════════════════════ */

  /* ── Auto-save status ── */
  #autoSaveStatus { font-size:var(--text-xs); color:var(--color-text-muted); margin-left:8px; transition:opacity 0.3s; white-space:nowrap; }
  #autoSaveStatus.saving { color:var(--color-text-muted); }
  #autoSaveStatus.saved  { color:#48bb78; }
  #autoSaveStatus.error  { color:#c53030; }

  /* ── Page wrapper ── */
  .s2-page-body { flex:1; background:var(--color-bg); padding:0 0 var(--space-8); display:flex; flex-direction:column; align-items:center; }

  /* ── Sticky toolbar ── */
  .knd-toolbar {
    position:sticky; top:0; z-index:var(--z-dropdown);
    background:rgba(15,23,42,0.92); backdrop-filter:blur(12px);
    display:flex; align-items:center; gap:8px;
    padding:10px var(--space-5); flex-wrap:wrap;
    border-bottom:1px solid rgba(255,255,255,0.08);
    width:100%;
  }
  .knd-toolbar .btn { color:#fff; border-color:rgba(255,255,255,0.2); }
  .knd-toolbar .btn:hover { background:rgba(255,255,255,0.12); }
  .knd-toolbar .btn.btn-primary { background:#48bb78; border-color:#48bb78; color:#fff; }
  .knd-toolbar .btn.btn-primary:hover { background:#38a169; }
  .knd-toolbar-sep { width:1px; height:20px; background:rgba(255,255,255,0.15); margin:0 4px; }

  /* ── Container ── */
  .s2-container { max-width:980px; width:100%; margin:0 auto; padding:var(--space-6) var(--space-5) 0; }

  /* ── Cards ── */
  .s2-card {
    background:#fff; border-radius:var(--radius-xl);
    box-shadow:var(--shadow-xl); margin-bottom:var(--space-6);
    overflow:hidden;
  }
  .s2-card-header {
    display:flex; align-items:center; gap:8px;
    padding:18px 28px; font-size:var(--text-lg); font-weight:700;
    color:var(--color-text);
    cursor:pointer; border-bottom:1.5px solid var(--color-border);
    user-select:none; transition:background var(--transition);
  }
  .s2-card-header:hover { background:var(--color-bg); }
  .s2-card-header::after { content:'▲'; margin-left:auto; font-size:11px; color:var(--color-text-muted); transition:transform var(--transition-base); }
  .s2-card-header.collapsed::after { transform:rotate(180deg); }
  .s2-card-body { padding:28px; }
  .s2-card-body.hidden { display:none; }
  .s2-section-icon { font-size:18px; }

  /* ── "From Contact Record" badge ── */
  .from-contact-badge {
    display:inline-flex; align-items:center; gap:5px;
    font-size:var(--text-xs); color:#2b6cb0; background:#ebf8ff;
    border:1px solid #90cdf4; border-radius:var(--radius-pill);
    padding:2px 10px; margin-left:auto;
    font-weight:500; pointer-events:none; /* badge is decorative — don't intercept card click */
  }
  /* When a badge sits inside a card header, let it own the auto-left-margin and
     leave the collapse arrow directly after it (no double auto-margin push) */
  .s2-card-header:has(.from-contact-badge)::after { margin-left:8px; }

  /* ── Header card ── */
  .s2-header-card { padding:28px; }
  .s2-header-card .s2-doc-title { font-size:var(--text-xl); font-weight:800; color:var(--color-text); }
  .s2-header-card .s2-doc-sub { font-size:var(--text-sm); color:var(--color-text-muted); margin-top:4px; }

  /* ── Print-only document header ── */
  .s2-print-header { display:none; }

  /* ── Member info grid ── */
  .member-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; }
  @media (max-width:640px) { .member-info-grid { grid-template-columns:1fr; } }
  .info-field { display:flex; flex-direction:column; gap:4px; }
  .info-field.full-width { grid-column:1/-1; }
  .info-label {
    font-size:var(--text-xs); font-weight:600; color:var(--color-text-muted);
    text-transform:uppercase; letter-spacing:0.4px;
  }
  /* .contact-field-tag — shared style now in knd.css */
  .info-value {
    min-height:36px; padding:6px 10px;
    border:1.5px solid var(--color-border); border-radius:var(--radius-sm);
    font-size:var(--text-base); color:var(--color-text);
    line-height:1.5; background:var(--color-surface);
    transition:border-color var(--transition);
  }
  .info-value:hover { border-color:var(--color-text-muted); }
  .info-value:focus { border-color:#48bb78; box-shadow:0 0 0 3px rgba(72,187,120,0.15); }
  /* When a Tom Select widget lives inside .info-value, strip the wrapper border to avoid double-border */
  .info-value:has(.ts-wrapper) { border:none; padding:0; background:transparent; min-height:unset; }
  .poc-field {
    min-height:36px; padding:6px 10px; width:100%;
    border:1.5px solid var(--color-border); border-radius:var(--radius-sm);
    font-size:var(--text-base); color:var(--color-text);
    background:var(--color-surface); font-family:var(--font-body);
    transition:border-color var(--transition);
  }
  .poc-field:hover { border-color:var(--color-text-muted); }
  .poc-field:focus { border-color:#48bb78; box-shadow:0 0 0 3px rgba(72,187,120,0.15); }

  /* ── Tooltip ── */
  .tt-wrap { position:relative; display:inline-flex; align-items:center; gap:4px; }
  .tt-btn { background:none; border:none; cursor:pointer; color:var(--color-text-muted); font-size:13px; padding:0; line-height:1; }
  .tooltip-box {
    display:none; position:absolute; bottom:calc(100% + 6px); left:0;
    background:#1a202c; color:#fff; font-size:var(--text-xs);
    padding:6px 10px; border-radius:var(--radius-sm); white-space:nowrap;
    box-shadow:var(--shadow-md); z-index:var(--z-drawer); max-width:220px; white-space:normal;
  }
  .tt-btn.active + .tooltip-box { display:block; }

  /* ── Content lists (identified needs, service types) ── */
  .content-list { list-style:none; padding:0; margin:0; }
  .content-list li {
    display:flex; align-items:flex-start; gap:8px; padding:8px 0;
    border-bottom:1px solid var(--color-border); font-size:var(--text-base);
  }
  .content-list li:last-child { border-bottom:none; }
  .content-list li .item-text { flex:1; min-height:24px; }
  .content-list li .item-text:focus { background:rgba(72,187,120,0.05); border-radius:3px; }
  .list-add-btn { margin-top:10px; }

  /* ── Goals ── */
  .goal-block {
    border:1.5px solid var(--color-border); border-radius:var(--radius);
    padding:20px; margin-bottom:16px; background:var(--color-bg);
  }
  .goal-num { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:#48bb78; color:#fff; font-size:12px; font-weight:700; flex-shrink:0; }
  .goal-label { font-size:var(--text-xs); font-weight:600; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:4px; margin-top:10px; }
  .goal-field { width:100%; min-height:36px; padding:6px 10px; border:1.5px solid var(--color-border); border-radius:var(--radius-sm); font-size:var(--text-base); color:var(--color-text); background:#fff; font-family:var(--font-body); resize:vertical; }
  .goal-field:focus { border-color:#48bb78; box-shadow:0 0 0 3px rgba(72,187,120,0.15); }
  .goal-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
  .goal-actions { display:flex; gap:6px; margin-top:12px; }

  /* ── Housing history ── */
  .history-entry {
    display:flex; gap:8px; align-items:flex-start;
    padding:12px; border:1.5px solid var(--color-border);
    border-radius:var(--radius-sm); margin-bottom:8px;
    background:#fff;
  }
  .history-date { min-width:80px; font-size:var(--text-sm); font-weight:600; color:var(--color-text-muted); min-height:24px; padding:2px 4px; }
  .history-date:focus { background:rgba(72,187,120,0.05); border-radius:3px; }
  .history-entry-body { flex:1; }
  .history-text { width:100%; min-height:48px; padding:6px 10px; border:1.5px solid var(--color-border); border-radius:var(--radius-sm); font-size:var(--text-base); font-family:var(--font-body); resize:vertical; }
  .history-text:focus { border-color:#48bb78; box-shadow:0 0 0 3px rgba(72,187,120,0.15); }

  /* ── Authorization table ── */
  .auth-table { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
  .auth-table th { background:var(--color-bg); font-weight:600; padding:10px 12px; text-align:left; border-bottom:2px solid var(--color-border); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:0.4px; color:var(--color-text-muted); }
  .auth-table td { padding:8px 12px; border-bottom:1px solid var(--color-border); vertical-align:middle; }
  .auth-table tr:last-child td { border-bottom:none; }
  .auth-table td[contenteditable] { min-height:24px; }
  .auth-table td[contenteditable]:focus { background:rgba(72,187,120,0.05); }
  .auth-table input[type=date] { border:1.5px solid var(--color-border); border-radius:var(--radius-sm); padding:4px 8px; font-family:var(--font-body); font-size:var(--text-sm); }

  /* ── Spinner / loading ── */
  .spinner-overlay { position:fixed; inset:0; background:rgba(15,23,42,0.5); display:flex; align-items:center; justify-content:center; z-index:9999; }
  .spinner { width:40px; height:40px; border:4px solid rgba(255,255,255,0.2); border-top-color:#48bb78; border-radius:50%; animation:spin 0.7s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }

  /* ── CRM modals ── */
  .crm-select-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:var(--z-tooltip); display:none; align-items:center; justify-content:center; }
  .crm-select-overlay.active { display:flex; }
  .crm-select-modal { background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-xl); padding:28px; width:90%; max-width:540px; max-height:80vh; display:flex; flex-direction:column; gap:16px; }
  .crm-search-input { width:100%; padding:10px 14px; border:1.5px solid var(--color-border); border-radius:var(--radius-sm); font-family:var(--font-body); font-size:var(--text-base); }
  .crm-search-input:focus { border-color:#48bb78; box-shadow:0 0 0 3px rgba(72,187,120,0.15); }
  .crm-results { overflow-y:auto; flex:1; }
  .crm-result-item { padding:12px 14px; border-bottom:1px solid var(--color-border); cursor:pointer; border-radius:var(--radius-sm); transition:background var(--transition); }
  .crm-result-item:hover { background:rgba(72,187,120,0.08); }
  .crm-result-name { font-weight:600; font-size:var(--text-base); }
  .crm-result-meta { font-size:var(--text-xs); color:var(--color-text-muted); margin-top:2px; }
  .crm-confirm-modal { background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-xl); padding:28px; width:90%; max-width:460px; }

  /* ── Tom Select (consolidated, DESIGN.md §7) ───
     Single base block replaces 3 previously-duplicated per-app blocks in
     ihsp-step2 / chw-step2 / ecm-step2. Base values match the cascade winner
     that was effectively live in production (the ecm-step2 copy — last-wins).
     Focus accent uses #ed8936 (brand orange) so every Tom Select widget in
     CRM, IHSP, CHW, ECM, intake, and settings looks identical.
     Variants (ihsp-ro-select compact + .ts-wrapper.invalid) live further down. */
  .ts-control { border:1.5px solid var(--color-border) !important; border-radius:var(--radius) !important; background:var(--color-surface) !important; padding:6px 10px !important; min-height:40px !important; box-shadow:none !important; cursor:text !important; font-family:var(--font-body) !important; font-size:var(--text-base) !important; }
  .ts-control:hover { border-color:var(--color-text-muted) !important; }
  .ts-wrapper.focus .ts-control { border-color:#ed8936 !important; box-shadow:0 0 0 3px rgba(237,137,54,0.18) !important; }
  .ts-control input { font-family:var(--font-body) !important; font-size:var(--text-base) !important; }
  .ts-control .item .remove { margin-left:4px; opacity:0.7; } .ts-control .item .remove:hover { opacity:1; }
  .ts-dropdown { border:1.5px solid var(--color-border) !important; border-radius:var(--radius) !important; box-shadow:var(--shadow-xl) !important; font-family:var(--font-body) !important; font-size:var(--text-base) !important; }
  .ts-dropdown .option { padding:8px 12px !important; cursor:pointer; }
  .ts-dropdown .option:hover, .ts-dropdown .option.active { background:rgba(237,137,54,0.10) !important; }
  .ts-dropdown .option.selected { background:rgba(237,137,54,0.18) !important; }
  /* ── /Tom Select ─── */

  /* ── Digital signatures (CHW pattern) ── */
  .sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
  @media (max-width: 600px) { .sig-grid { grid-template-columns: 1fr; } }
  .sig-block { border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 12px; }
  .sig-block-title { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary); margin-bottom: 8px; }
  .sig-canvas-wrap { border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); display: inline-block; background: #fff; margin-top: 6px; position: relative; }
  .sig-canvas-wrap canvas { display: block; cursor: crosshair; touch-action: none; }
  .sig-canvas-clear { position: absolute; top: 4px; right: 6px; background: rgba(0,0,0,0.06); border: none; border-radius: 3px; font-size: var(--text-xs); color: var(--color-text-muted); padding: 2px 8px; cursor: pointer; }
  .sig-canvas-clear:hover { background: rgba(0,0,0,0.12); }
  .sig-stamp { font-size: var(--text-xs); color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; padding: 4px 10px; border-radius: var(--radius-sm); margin-top: 6px; display: none; }
  .sig-stamp.signed { display: block; }
  .sig-sign-btn { margin-top: 6px; padding: 4px 14px; font-size: var(--text-sm); background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-body); }
  .sig-sign-btn:hover { background: #dcfce7; }
  .sig-sign-btn:disabled { opacity: 0.6; cursor: default; }

  /* ── Footer / dates / signatures ── */
  .footer-section { margin-top: 24px; padding-top: 16px; border-top: 2px solid var(--color-border); }
  .dates-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 16px; }
  .date-field { display: flex; flex-direction: column; }
  .date-label { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 4px; }
  .date-value { font-size: 12px; color: var(--color-text); padding: 6px 8px; background: var(--color-bg); border-radius: 3px; border: 1px solid var(--color-border); }

  /* ── Form meta bar (last edited by) ── */
  .form-meta-bar { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px;
                   padding: 6px 14px; font-size: 0.78rem; color: #166534;
                   margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
  .form-meta-bar strong { font-weight: 600; }
  @media print { .form-meta-bar { display: none !important; } }

  /* ── Date input styling ── */
  input.poc-field[type="date"] {
    font-family: inherit; font-size: inherit;
 width: 100%; color: inherit; cursor: text;
  }
  @media print { input.poc-field[type="date"] { border: none !important; background: transparent !important; } }

  /* ── Page footer ── */

  /* ── Loading overlay ── */
  .loading-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:9999; align-items:center; justify-content:center; }
  .loading-overlay.active { display:flex; }
  .loading-content { background:white; padding:32px; border-radius:var(--radius-lg); text-align:center; max-width:400px; }

  /* ── SMART Goals ── */
  .smart-subsection { margin-bottom:12px; }
  .subsection-label { font-weight:600; color:var(--color-text); margin-bottom:4px; font-size:13px; }
  .subsection-content { font-size:12px; line-height:1.5; color:var(--color-text-secondary); padding-left:12px; }

  /* ── History add/delete buttons ── */
  .history-delete-btn { flex-shrink:0; background:none; border:1px solid #fc8181; color:#c53030; border-radius:4px; font-size:11px; font-weight:700; padding:2px 7px; cursor:pointer; line-height:1.6; transition:background var(--transition); align-self:flex-start; }
  .history-delete-btn:hover { background:#fff5f5; }
  .history-add-btn { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; background:#ebf8ff; color:#2b6cb0; border:1px solid #90cdf4; border-radius:5px; font-family:var(--font-body); font-size:11px; font-weight:600; cursor:pointer; transition:background var(--transition); }
  .history-add-btn:hover { background:#bee3f8; }

  /* ── CRM modals extra ── */
  .crm-modal-header { display:flex; align-items:center; justify-content:space-between; }
  .crm-modal-header h3 { font-size:18px; color:var(--color-text); }
  .crm-close-btn { background:none; border:none; font-size:24px; cursor:pointer; color:var(--color-text-muted); line-height:1; padding:0 4px; }
  .crm-close-btn:hover { color:var(--color-text); }
  .crm-search-row { display:flex; gap:8px; }
  .crm-search-btn { padding:10px 18px; background:#4299e1; color:white; border:none; border-radius:var(--radius); font-family:var(--font-body); font-size:var(--text-base); font-weight:600; cursor:pointer; transition:background var(--transition); white-space:nowrap; }
  .crm-search-btn:hover:not(:disabled) { background:#3182ce; }
  .crm-search-btn:disabled { opacity:0.6; cursor:not-allowed; }
  .crm-status-msg { padding:20px; text-align:center; font-size:14px; color:var(--color-text-muted); }

  /* Print attribution footer — hidden on screen, visible only in print */
  #print-attribution { display: none; }

  /* ── Print ── */
  @media print {
    .knd-toolbar, .s2-header-card { display:none !important; }
    .s2-print-header { display:flex !important; justify-content:space-between; align-items:flex-start; border-bottom:2px solid #4299e1; padding-bottom:12px; margin-bottom:16px; }
    .s2-container { padding:0 !important; max-width:100% !important; }
    .s2-card { box-shadow:none !important; border-radius:0 !important; border:1px solid #e2e8f0; page-break-inside:avoid; margin-bottom:12px !important; }
    .s2-card-header { padding:10px 16px !important; font-size:13px !important; }
    .s2-card-header::after { display:none !important; }
    .s2-card-body { padding:16px !important; }
    .s2-card-body.hidden { display:block !important; }
    .knd-nav, #saveStatus { display:none; }
    .s2-page-body { background:white; padding:0; }
    .history-entry { page-break-inside:avoid; }
    .sig-canvas-clear, .sig-sign-btn, .history-delete-btn, .history-add-btn { display:none; }
    #print-attribution { display:block !important; position:fixed; bottom:0.25in; right:0.5in; font-size:8px; color:#999; font-family:sans-serif; /* allow-font: print media — system font for attribution footer */ }
    @font-face { font-family:'Merriweather'; src:local('Merriweather'); } /* allow-font: @font-face declaration, not a usage */
  }
  /* ── Contact drift banner (Phase 3B) ── */
  .drift-banner { background:#fffbeb; border:1.5px solid #f59e0b; border-radius:var(--radius-md); padding:12px 16px; margin:8px 0 4px; font-size:var(--text-sm); }
  .drift-banner-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
  .drift-banner-ts { color:var(--color-text-muted); margin-left:auto; font-size:11px; }
  .drift-banner-dismiss { background:none; border:none; cursor:pointer; color:var(--color-text-muted); font-size:14px; padding:0 4px; line-height:1; }
  .drift-banner-dismiss:hover { color:var(--color-danger); }
  .drift-table { width:100%; border-collapse:collapse; margin-bottom:10px; font-size:12px; }
  .drift-table th { text-align:left; padding:4px 8px; color:var(--color-text-muted); font-weight:600; border-bottom:1px solid var(--color-border); }
  .drift-table td { padding:4px 8px; border-bottom:1px solid rgba(0,0,0,0.04); }
  .drift-table td:first-child { font-weight:500; }
  .drift-val-local { color:var(--color-text-muted); }
  .drift-val-ghl { color:#c05621; font-weight:600; }
  .drift-banner-actions { display:flex; gap:8px; margin-top:4px; flex-wrap:wrap; }
  .drift-load-btn { background:#276749 !important; color:white !important; border-color:#1e543a !important; }
  .drift-load-btn:hover { background:#1e543a !important; }
  .drift-load-btn:disabled { opacity:0.6; cursor:wait; }
  .drift-push-btn { background:#2b6cb0 !important; color:white !important; border-color:#2563a0 !important; }
  .drift-push-btn:hover { background:#2563a0 !important; }
  .drift-push-btn:disabled { opacity:0.6; cursor:wait; }
  .drift-row-actions { white-space:nowrap; padding:2px 6px; text-align:center; }
  .drift-row-btn { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border:1px solid #d0d5dd; border-radius:4px; background:#fff; cursor:pointer; font-size:12px; line-height:1; color:#344054; transition:background .15s; vertical-align:middle; margin:0 1px; }
  .drift-row-btn:hover:not(:disabled) { background:#f2f4f7; }
  .drift-row-btn:disabled { opacity:.4; cursor:default; }

  /* ── Compact member summary card (Issue 2) ── */
  .ihsp-member-summary { display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px 20px; margin-bottom:8px; }
  .ihsp-member-col { display:flex; flex-direction:column; gap:3px; }
  .ihsp-member-row { display:flex; align-items:baseline; gap:6px; min-height:20px; }
  .ihsp-member-label { font-size:10px; font-weight:700; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:0.3px; min-width:60px; flex-shrink:0; }
  .ihsp-member-value { font-size:var(--text-sm); color:var(--color-text); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ihsp-member-date { border:none; background:transparent; font-size:var(--text-sm); color:var(--color-text); padding:0; font-family:inherit; width:100%; }
  .ihsp-member-csz { display:flex; gap:3px; }
  .ihsp-member-edit-link { font-size:var(--text-xs); color:var(--color-brand); display:block; text-align:right; margin-top:4px; margin-bottom:12px; text-decoration:none; }
  .ihsp-member-edit-link:hover { text-decoration:underline; }
  .ihsp-plan-fields { border-top:1.5px solid var(--color-border); padding-top:14px; }
  .ihsp-plan-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
  @media (max-width:640px) {
    .ihsp-member-summary { grid-template-columns:1fr 1fr; }
    .ihsp-plan-row { grid-template-columns:1fr 1fr; }
  }
  /* Lock Tom Select in compact card */
  .ihsp-ro-select + .ts-wrapper .ts-control { min-height:20px !important; padding:1px 4px !important; border:none !important; background:transparent !important; box-shadow:none !important; cursor:default !important; }
  .ihsp-ro-select + .ts-wrapper .ts-control input { display:none !important; }

  /* ── Textarea narrative fields (Issue 4) ── */
  .ihsp-textarea { width:100%; padding:8px 10px; border:1.5px solid var(--color-border); border-radius:var(--radius-sm); font-size:var(--text-base); font-family:var(--font-body); color:var(--color-text); line-height:1.6; resize:vertical; transition:border-color var(--transition); }
  .ihsp-textarea:focus { border-color:#48bb78; box-shadow:0 0 0 3px rgba(72,187,120,0.15); }
  .ihsp-textarea::placeholder { color:var(--color-text-muted); font-style:italic; }
  @media print { .ihsp-textarea { border:none !important; resize:none; } }

  /* ── Housing history layout (Issue 6) ── */
  .housing-history-entry { display:flex; gap:8px; align-items:flex-start; padding:12px; border:1.5px solid var(--color-border); border-radius:var(--radius-sm); margin-bottom:8px; background:#fff; }
  .housing-history-entry .history-entry-body { flex:1; display:grid; grid-template-columns:160px 1fr; gap:8px; align-items:flex-start; }
  .housing-history-entry .history-date { min-width:unset; font-size:var(--text-sm); font-weight:600; color:var(--color-text-muted); padding:2px 4px; }
  .housing-history-entry .history-date:focus { background:rgba(72,187,120,0.05); border-radius:3px; }
  .housing-history-entry .history-delete-btn { align-self:flex-start; margin-top:2px; }

  /* ── SMART goal sub-labels (Issue 7) ── */
  .ihsp-sub-label { font-size:var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; }
  .ihsp-sub-label.amber { color:#c05621; }
  .ihsp-sub-label.green { color:#276749; }
  .ihsp-sub-label.brand { color:#553c9a; }

  /* ── Documentation checklist item (Issue 8) ── */
  .ihsp-doc-item { display:flex; align-items:baseline; gap:6px; padding:3px 0; border-bottom:1px solid rgba(0,0,0,0.04); font-size:var(--text-sm); }
  .ihsp-doc-item:last-child { border-bottom:none; }
  .ihsp-doc-status { font-size:var(--text-xs); color:var(--color-text-muted); margin-left:4px; }


/* ══════════════════════════════════════════════════════
   Extracted from ihsp-forms
   ══════════════════════════════════════════════════════ */

  /* Forms-page-specific styles */
  .forms-toolbar {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
  }
  .forms-search {
    flex: 1; min-width: 180px;
    padding: 9px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--text-base);
    transition: border-color var(--transition);
  }
  .forms-search:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(102,126,234,0.15); }
  .forms-filter {
    padding: 9px 32px 9px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--text-base);
    background: white;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23718096' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
  }
  .forms-filter:focus { border-color: var(--color-brand); }
  .forms-count { font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; }

  /* Table adjustments */
  .knd-table td { vertical-align: middle; }
  .td-name { font-weight: 600; color: var(--color-text); }
  .td-name a { color: inherit; text-decoration: none; }
  .td-name a:hover { color: var(--color-brand); }
  .td-date { font-size: var(--text-sm); color: var(--color-text-muted); }
  .td-meta { font-size: var(--text-sm); color: var(--color-text-muted); }

  /* Row actions */
  .row-actions { display: flex; gap: var(--space-2); align-items: center; }

  /* Mobile — hide low-priority columns rather than scroll */
  @media (max-width: 768px) {
    .col-referral, .col-created, .col-updated-by { display: none; }
    .forms-toolbar { padding: var(--space-3) var(--space-4); gap: var(--space-2); }
  }
  @media (max-width: 480px) {
    .col-provider { display: none; }
    .knd-table    { font-size: var(--text-xs); }
  }
  .btn-open   { background: #ebf8ff; color: #2b6cb0; border: 1px solid #90cdf4; }
  .btn-open:hover { background: #bee3f8; }
  .btn-del    { background: #fff5f5; color: #c53030; border: 1px solid #fc8181; }
  .btn-del:hover  { background: #fed7d7; }

  /* State boxes (loading / empty / error) */
  .state-box { text-align: center; padding: 60px 24px; color: var(--color-text-muted); }
  .state-box .icon { font-size: 48px; margin-bottom: 16px; }
  .state-box h3 { font-size: var(--text-xl); font-weight: 600; color: var(--color-text-secondary); margin-bottom: 8px; }
  .state-box p { font-size: var(--text-base); line-height: 1.6; max-width: 380px; margin: 0 auto 20px; }

  /* Pagination */
  .table-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px var(--space-6); border-top: 1px solid var(--color-border);
    gap: var(--space-3); flex-wrap: wrap;
  }
  .table-footer.hidden { display: none; }
  .pagination-info { font-size: var(--text-sm); color: var(--color-text-muted); }
  .pagination-controls { display: flex; align-items: center; gap: 6px; }
  .page-btn {
    padding: 6px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: white; font-family: var(--font-body); font-size: var(--text-sm);
    font-weight: 600; color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition);
  }
  .page-btn:hover:not(:disabled) { background: var(--color-brand-light); border-color: #c3d1f7; }
  .page-btn:disabled { opacity: 0.4; cursor: default; }
  .page-btn.active { background: var(--color-brand); color: white; border-color: var(--color-brand); }


/* ══════════════════════════════════════════════════════
   Extracted from chw-step1
   ══════════════════════════════════════════════════════ */

  /* ── Page container ── */
  .s1-container {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    max-width: 900px;
    width: 100%;
    padding: 48px;
  }
  @media (max-width: 640px) { .s1-container { padding: 28px 20px; } }

  /* ── Phase cards ── */
  .s1-phase-card {
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: 24px;
  }
  .s1-phase-header {
    padding: 14px 20px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-base);
  }
  .s1-phase-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #48bb78;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
  }
  .s1-phase-body { padding: 24px; }

  /* ── Mode tabs (Search / New Contact) ── */
  .s1-tabs { display: flex; margin-bottom: 20px; }
  .s1-tab {
    flex: 1;
    padding: 11px 16px;
    border: 2px solid var(--color-border);
    background: white;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all var(--transition);
  }
  .s1-tab:first-child { border-radius: var(--radius) 0 0 var(--radius); border-right: none; }
  .s1-tab:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }
  .s1-tab:hover:not(.s1-tab--active) { border-color: #48bb78; color: #276749; }
  .s1-tab--active { background: #48bb78; border-color: #48bb78; color: white; }

  /* ── CRM search row & results (inline, not modal) ── */
  .crm-search-row { display: flex; gap: 8px; margin-bottom: 12px; }
  .crm-search-input {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--text-base);
    transition: border-color var(--transition);
  }
  .crm-search-input:focus { border-color: #48bb78; box-shadow: 0 0 0 3px rgba(72,187,120,0.15); }
  .crm-search-btn {
    padding: 10px 20px;
    background: #48bb78;
    color: white;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
    white-space: nowrap;
  }
  .crm-search-btn:hover { background: #276749; }
  .crm-search-btn:disabled { opacity: 0.6; cursor: not-allowed; }
  .crm-results {
    overflow-y: auto;
    max-height: 280px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
  }
  .crm-result-item {
    padding: 13px 16px;
    border-bottom: 1px solid var(--color-bg);
    cursor: pointer;
    transition: background var(--transition);
  }
  .crm-result-item:last-child { border-bottom: none; }
  .crm-result-item:hover { background: rgba(72,187,120,0.07); }
  .crm-result-name { font-weight: 600; font-size: var(--text-base); color: var(--color-text); margin-bottom: 3px; }
  .crm-result-meta { font-size: var(--text-xs); color: var(--color-text-muted); }
  .crm-status-msg { padding: 20px; text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); }

  /* ── Contact card (shown after selecting a search result) ── */
  .contact-card-inner {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 20px;
    background: var(--color-bg);
    border-radius: var(--radius);
    border: 1.5px solid #48bb78;
    margin-top: 12px;
  }
  .contact-card-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #48bb78;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    font-weight: 700;
    flex-shrink: 0;
  }
  .contact-card-detail { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 3px; }

  /* ── Form type toggle pills ── */
  .toggle-group { display: flex; gap: 8px; flex-wrap: wrap; }
  .toggle-pill {
    padding: 8px 20px; border-radius: 999px; border: 2px solid var(--color-border);
    font-family: var(--font-body); font-size: var(--text-base); font-weight: 600;
    cursor: pointer; background: white; color: var(--color-text-secondary); transition: all var(--transition);
  }
  .toggle-pill:hover { border-color: #48bb78; color: #276749; }
  .toggle-pill.active { background: #48bb78; border-color: #48bb78; color: white; }

  /* ── Notes textarea ── */
  #intakeText {
    width: 100%;
    min-height: 320px;
    padding: 16px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    resize: vertical;
    transition: border-color var(--transition);
    box-sizing: border-box;
  }
  #intakeText:focus { border-color: #48bb78; box-shadow: 0 0 0 3px rgba(72,187,120,0.15); }
  #intakeText::placeholder { color: var(--color-text-muted); }

  /* ── Loading / error ── */
  .s1-loading { display: none; text-align: center; padding: 20px; }
  .s1-loading.active { display: block; }
  .s1-loading p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 12px; }
  .s1-error { display: none; background: var(--color-danger-bg); border: 1px solid rgba(229,62,62,0.25); color: #c53030; padding: 16px; border-radius: var(--radius); margin-bottom: 20px; font-size: var(--text-sm); line-height: 1.5; }
  .s1-error.active { display: block; }

  /* ── Existing records badge (search results) ── */
  .chw-existing-badge {
    font-size: 11px; color: #276749; background: #dcfce7;
    border-radius: 4px; padding: 1px 6px; margin-left: 5px;
  }
  /* ── Existing records warning panel (Phase B) ── */
  .chw-existing-panel {
    background: #f0fdf4; border: 1.5px solid #48bb78;
    border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px;
  }
  .chw-existing-panel-title { font-weight: 700; color: #276749; margin-bottom: 8px; font-size: var(--text-sm); }
  .chw-existing-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px; background: white; border: 1px solid #bbf7d0;
    border-radius: var(--radius-sm); margin-bottom: 4px;
    text-decoration: none; color: var(--color-text); font-size: var(--text-sm);
  }
  .chw-existing-link:hover { background: #dcfce7; }


/* ══════════════════════════════════════════════════════
   Extracted from chw-step2
   ══════════════════════════════════════════════════════ */

  /* ── Layout ── */
  .s2-container { max-width: 980px; width: 100%; margin: 0 auto; }
  .s2-card { background: white; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); padding: 40px 48px; margin-bottom: var(--space-6); }
  @media (max-width: 640px) { .s2-card { padding: 24px 16px; } }

  /* ── Editable field ── */
  .poc-field {
    min-height: 32px; padding: 6px 10px;
    border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: var(--text-base);
    color: var(--color-text); line-height: 1.5;
    transition: border-color var(--transition);
  }
  .poc-field:hover  { border-color: var(--color-text-muted); }
  .poc-field:focus  { border-color: #48bb78; box-shadow: 0 0 0 3px rgba(72,187,120,0.15); }
  .poc-field[data-empty="true"]:not(:focus)::before {
    content: attr(data-placeholder); color: var(--color-text-muted);
    font-style: italic; pointer-events: none;
  }
  .poc-field-lg { min-height: 80px; overflow: hidden; }
  .poc-field-lg ul, .poc-field-lg ol { margin: 4px 0; padding-left: 24px; }
  .poc-field-lg li { margin-bottom: 2px; }
  .poc-field-xl { min-height: 120px; overflow: hidden; }
  .poc-field-xl ul, .poc-field-xl ol { margin: 4px 0; padding-left: 24px; }
  .poc-field-xl li { margin-bottom: 2px; }

  /* ── Grid for member info ── */
  .poc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
  @media (max-width: 600px) { .poc-grid { grid-template-columns: 1fr; } }
  .poc-grid-full { grid-column: 1 / -1; }

  /* ── Section icon ── */
  .s2-section-icon { font-size: 18px; }

  /* ── Field label ── */
  .poc-label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary); margin-bottom: 4px; }
  /* .contact-field-tag — shared style now in knd.css */

  /* ── Checkbox grid ── */
  .chk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-bottom: 8px; }
  @media (max-width: 768px) {
    .chk-grid  { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .sig-grid  { grid-template-columns: 1fr; }
    .poc-field, .poc-field-lg { min-height: 44px; }
  }
  .chk-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); }
  .chk-item:hover { border-color: #48bb78; background: #f0fff4; }
  .chk-item.checked { border-color: #48bb78; background: #f0fff4; }
  .chk-item input[type=checkbox] { margin-top: 2px; accent-color: #48bb78; width: 16px; height: 16px; flex-shrink: 0; }
  .chk-item label { font-size: var(--text-sm); color: var(--color-text); cursor: pointer; }

  /* ── Goals ── */
  .goal-block { border: 1.5px solid var(--color-border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
  .goal-block-header { font-weight: 600; font-size: var(--text-base); color: var(--color-text); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
  .goal-num { background: #48bb78; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }

  /* ── Signature block ── */
  .sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  @media (max-width: 600px) { .sig-grid { grid-template-columns: 1fr; } }
  .sig-block { border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 12px; }
  .sig-block-title { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary); margin-bottom: 8px; }

  /* ── Loading overlay ── */
  .ai-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.65); z-index: 9999; align-items: center; justify-content: center; flex-direction: column; gap: 16px; }
  .ai-overlay.active { display: flex; }
  .ai-overlay p { color: white; font-size: var(--text-base); font-weight: 500; }

  /* ── CRM modals ── */
  .crm-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 9998; align-items: center; justify-content: center; }
  .crm-overlay.active { display: flex; }
  .crm-modal { background: white; border-radius: var(--radius-lg); padding: 28px; max-width: 520px; width: 94%; max-height: 80vh; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-xl); }
  .crm-modal h3 { font-size: var(--text-lg); font-weight: 600; color: var(--color-text); }
  .crm-modal-hdr { display: flex; align-items: center; justify-content: space-between; }
  .crm-close { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--color-text-muted); }
  .crm-close:hover { color: var(--color-text); }
  .crm-search-row { display: flex; gap: 8px; }
  .crm-input { flex: 1; padding: 10px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius); font-family: var(--font-body); font-size: var(--text-base); }
  .crm-input:focus { border-color: var(--color-brand); }
  .crm-btn { padding: 10px 18px; background: var(--color-brand); color: white; border: none; border-radius: var(--radius); font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; cursor: pointer; }
  .crm-results { overflow-y: auto; max-height: 300px; border: 1px solid var(--color-border); border-radius: var(--radius); }
  .crm-item { padding: 12px 16px; border-bottom: 1px solid var(--color-bg); cursor: pointer; }
  .crm-item:hover { background: var(--color-brand-light); }
  .crm-item-name { font-weight: 600; font-size: var(--text-base); color: var(--color-text); }
  .crm-item-meta { font-size: var(--text-xs); color: var(--color-text-muted); }
  .crm-msg { padding: 20px; text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); }

  /* ── Long-form only sections (hidden in short mode) ── */
  .long-only { display: none; }
  body.form-long .long-only { display: block; }
  body.form-long .long-only.long-grid { display: grid; }

  /* ── Toolbar ── */
  .knd-toolbar { position: sticky; top: 0; z-index: var(--z-dropdown); background: rgba(15,23,42,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.08); padding: 10px 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

  /* ── Tooltip ── */
  .tt-wrap { display: inline-flex; align-items: center; gap: 4px; position: relative; }
  .tt-btn  { background: none; border: none; cursor: pointer; color: #9ca3af;
             font-size: 0.8rem; padding: 0 2px; line-height: 1; vertical-align: middle; }
  .tt-btn:hover { color: #6366f1; }
  .tooltip-box { display: none; position: absolute; top: calc(100% + 4px); left: 0;
                 background: #1f2937; color: #f9fafb; font-size: 0.75rem;
                 padding: 8px 12px; border-radius: 6px; width: 230px; z-index: var(--z-modal);
                 line-height: 1.5; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
  .tooltip-box.tt-visible { display: block; }
  @media print { .tt-btn, .tooltip-box { display: none !important; } }

  /* ── Form meta bar (last edited by) ── */
  .form-meta-bar { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px;
                   padding: 6px 14px; font-size: 0.78rem; color: #166534;
                   margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
  .form-meta-bar strong { font-weight: 600; }
  @media print { .form-meta-bar { display: none !important; } }

  /* ── Date input to match contenteditable fields ── */
  input.poc-field[type="date"] {
    font-family: inherit; font-size: inherit;
 width: 100%; color: inherit; cursor: text;
  }
  @media print { input.poc-field[type="date"] { border: none !important; background: transparent !important; } }

  /* ── Goal group delete button ── */
  .goal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
  .goal-del-btn { background: none; border: 1px solid #fca5a5; color: #ef4444; border-radius: 4px;
                  font-size: 0.75rem; padding: 2px 8px; cursor: pointer; }
  .goal-del-btn:hover { background: #fef2f2; }
  .goal-add-wrap { margin-top: 12px; }

  /* ── Section card header / body (matches IHSP design) ── */
  .s2-card-header {
    display: flex; align-items: center; gap: 8px;
    padding: 18px 24px; cursor: pointer; user-select: none;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-base); font-weight: 700; color: var(--color-text);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    transition: background var(--transition);
  }
  .s2-card-header:hover { background: var(--color-bg); }
  .s2-card-header::after {
    content: '▲'; margin-left: auto; font-size: 11px;
    color: var(--color-text-muted); transition: transform var(--transition-base);
  }
  .s2-card-header.collapsed::after { transform: rotate(180deg); }
  /* When a badge sits inside the header, let it own the auto-margin */
  .s2-card-header:has(.from-contact-badge)::after { margin-left: 8px; }
  .s2-card-body { padding: 24px; }
  .s2-card-body.hidden { display: none; }
  @media print {
    .s2-card-header::after { display: none !important; }
    .s2-card-body.hidden { display: block !important; }
  }

  /* ── "From Contact Record" badge ── */
  .from-contact-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--text-xs); color: #2b6cb0; background: #ebf8ff;
    border: 1px solid #90cdf4; border-radius: var(--radius-pill);
    padding: 2px 10px; margin-left: auto;
    font-weight: 500; pointer-events: none;
  }

  /* ── Auto-save status indicator ── */
  #autoSaveStatus { font-size: var(--text-xs); color: rgba(255,255,255,0.5); margin-right: 4px; transition: opacity 0.3s; white-space: nowrap; }
  #autoSaveStatus.saving { color: rgba(255,255,255,0.8); }
  #autoSaveStatus.saved  { color: #68d391; }
  #autoSaveStatus.error  { color: #fc8181; }

  /* ── Rich text toolbar ── */
  .rich-toolbar {
    position: fixed; z-index: var(--z-drawer); display: none;
    background: white; border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
    padding: 4px 6px; align-items: center; gap: 2px;
  }
  .rich-toolbar.visible { display: flex; }
  .rich-toolbar button {
    background: none; border: 1px solid transparent; border-radius: 3px;
    padding: 2px 6px; cursor: pointer; font-size: 13px; color: var(--color-text);
    min-width: 28px; height: 28px; line-height: 1;
  }
  .rich-toolbar button:hover { background: #f0f0f0; border-color: var(--color-border); }
  .rich-sep { width: 1px; height: 20px; background: var(--color-border); margin: 0 4px; }
  .rich-toolbar input[type="color"] {
    width: 28px; height: 28px; border: 1px solid var(--color-border);
    border-radius: 3px; padding: 1px; cursor: pointer; background: none;
  }
  @media print { .rich-toolbar { display: none !important; } }

  /* ── Language combo dropdown ── */
  .lang-combo { position: relative; }
  .lang-input { width: 100%; box-sizing: border-box; font: inherit; }
  .lang-dropdown {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 150;
    background: white; border: 1px solid var(--color-border); border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-md); max-height: 180px; overflow-y: auto;
  }
  .lang-dropdown.open { display: block; }
  .lang-option {
    padding: 6px 10px; cursor: pointer; font-size: var(--text-sm);
  }
  .lang-option:hover, .lang-option.active { background: #edf2f7; }
  @media print { .lang-dropdown { display: none !important; } }

  /* ── Digital signatures ── */
  .sig-canvas-wrap { border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); display: inline-block; background: #fff; margin-top: 6px; position: relative; }
  .sig-canvas-wrap canvas { display: block; cursor: crosshair; touch-action: none; }
  .sig-canvas-clear { position: absolute; top: 4px; right: 6px; background: rgba(0,0,0,0.06); border: none; border-radius: 3px; font-size: var(--text-xs); color: var(--color-text-muted); padding: 2px 8px; cursor: pointer; }
  .sig-canvas-clear:hover { background: rgba(0,0,0,0.12); }
  .sig-stamp { font-size: var(--text-xs); color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; padding: 4px 10px; border-radius: var(--radius-sm); margin-top: 6px; display: none; }
  .sig-stamp.signed { display: block; }
  .sig-sign-btn { margin-top: 6px; padding: 4px 14px; font-size: var(--text-sm); background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-body); }
  .sig-sign-btn:hover { background: #dcfce7; }
  .sig-sign-btn:disabled { opacity: 0.6; cursor: default; }

  /* Tom Select theme: consolidated in ihsp-step2 section — see "Tom Select (consolidated, DESIGN.md §7)" */
  /* ── Contact drift banner (Phase 3B) ── */
  .drift-banner { background:#fffbeb; border:1.5px solid #f59e0b; border-radius:var(--radius-md); padding:12px 16px; margin:8px 0 4px; font-size:var(--text-sm); }
  .drift-banner-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
  .drift-banner-ts { color:var(--color-text-muted); margin-left:auto; font-size:11px; }
  .drift-banner-dismiss { background:none; border:none; cursor:pointer; color:var(--color-text-muted); font-size:14px; padding:0 4px; line-height:1; }
  .drift-banner-dismiss:hover { color:var(--color-danger); }
  .drift-table { width:100%; border-collapse:collapse; margin-bottom:10px; font-size:12px; }
  .drift-table th { text-align:left; padding:4px 8px; color:var(--color-text-muted); font-weight:600; border-bottom:1px solid var(--color-border); }
  .drift-table td { padding:4px 8px; border-bottom:1px solid rgba(0,0,0,0.04); }
  .drift-table td:first-child { font-weight:500; }
  .drift-val-local { color:var(--color-text-muted); }
  .drift-val-ghl { color:#c05621; font-weight:600; }
  .drift-banner-actions { display:flex; gap:8px; margin-top:4px; flex-wrap:wrap; }
  .drift-load-btn { background:#48bb78 !important; color:white !important; border-color:#38a169 !important; }
  .drift-load-btn:hover { background:#38a169 !important; }
  .drift-load-btn:disabled { opacity:0.6; cursor:wait; }
  .drift-push-btn { background:#2b6cb0 !important; color:white !important; border-color:#2563a0 !important; }
  .drift-push-btn:hover { background:#2563a0 !important; }
  .drift-push-btn:disabled { opacity:0.6; cursor:wait; }
  .drift-row-actions { white-space:nowrap; padding:2px 6px; text-align:center; }
  .drift-row-btn { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border:1px solid #d0d5dd; border-radius:4px; background:#fff; cursor:pointer; font-size:12px; line-height:1; color:#344054; transition:background .15s; vertical-align:middle; margin:0 1px; }
  .drift-row-btn:hover:not(:disabled) { background:#f2f4f7; }
  .drift-row-btn:disabled { opacity:.4; cursor:default; }


/* ══════════════════════════════════════════════════════
   Extracted from chw-forms
   ══════════════════════════════════════════════════════ */

  .forms-toolbar {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
  }
  .forms-search {
    flex: 1; min-width: 180px;
    padding: 9px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--text-base);
    transition: border-color var(--transition);
  }
  .forms-search:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(102,126,234,0.15); }
  .forms-filter {
    padding: 9px 32px 9px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--text-base);
    background: white;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23718096' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
  }
  .forms-filter:focus { border-color: var(--color-brand); }
  .forms-count { font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; }

  .knd-table td { vertical-align: middle; }
  .td-name { font-weight: 600; color: var(--color-text); }
  .td-name a { color: inherit; text-decoration: none; }
  .td-name a:hover { color: var(--color-brand); }
  .td-date { font-size: var(--text-sm); color: var(--color-text-muted); }
  .td-meta { font-size: var(--text-sm); color: var(--color-text-muted); }

  /* Mobile — hide low-priority columns rather than scroll */
  @media (max-width: 768px) {
    .col-created, .col-updated-by { display: none; }
    .forms-toolbar { padding: var(--space-3) var(--space-4); gap: var(--space-2); }
  }
  @media (max-width: 480px) {
    .knd-table { font-size: var(--text-xs); }
  }

  .badge-short { background: #ebf8ff; color: #2b6cb0; border: 1px solid #90cdf4; border-radius: 6px; padding: 2px 8px; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
  .badge-long  { background: #faf5ff; color: #553c9a; border: 1px solid #d6bcfa; border-radius: 6px; padding: 2px 8px; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }

  .row-actions { display: flex; gap: var(--space-2); align-items: center; }
  .btn-open { background: #e6fffa; color: #276749; border: 1px solid #81e6d9; }
  .btn-open:hover { background: #b2f5ea; }
  .btn-del  { background: #fff5f5; color: #c53030; border: 1px solid #fc8181; }
  .btn-del:hover { background: #fed7d7; }

  .state-box { text-align: center; padding: 60px 24px; color: var(--color-text-muted); }
  .state-box .icon { font-size: 48px; margin-bottom: 16px; }
  .state-box h3 { font-size: var(--text-xl); font-weight: 600; color: var(--color-text-secondary); margin-bottom: 8px; }
  .state-box p { font-size: var(--text-base); line-height: 1.6; max-width: 380px; margin: 0 auto 20px; }

  .table-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px var(--space-6); border-top: 1px solid var(--color-border);
    gap: var(--space-3); flex-wrap: wrap;
  }
  .table-footer.hidden { display: none; }
  .pagination-info { font-size: var(--text-sm); color: var(--color-text-muted); }
  .pagination-controls { display: flex; align-items: center; gap: 6px; }
  .page-btn {
    padding: 6px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: white; font-family: var(--font-body); font-size: var(--text-sm);
    font-weight: 600; color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition);
  }
  .page-btn:hover:not(:disabled) { background: var(--color-brand-light); border-color: #c3d1f7; }
  .page-btn:disabled { opacity: 0.4; cursor: default; }
  .page-btn.active { background: var(--color-brand); color: white; border-color: var(--color-brand); }


/* ══════════════════════════════════════════════════════
   Extracted from ecm-step1
   ══════════════════════════════════════════════════════ */

  /* ── Step 1 container ── */
  .s1-container {
    background: white; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
    max-width: 820px; width: 100%; padding: 48px;
  }
  @media (max-width: 640px) { .s1-container { padding: 28px 20px; } }

  /* Mode toggle pills */
  .mode-toggle { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
  .mode-pill {
    flex: 1; min-width: 180px; padding: 11px 20px; border-radius: var(--radius-pill);
    border: 2px solid var(--color-border); font-family: var(--font-body);
    font-size: var(--text-base); font-weight: 600; cursor: pointer;
    background: white; color: var(--color-text-secondary); transition: all var(--transition);
    text-align: center;
  }
  .mode-pill:hover { border-color: #ed8936; color: #c05621; }
  .mode-pill.active { background: #ed8936; border-color: #ed8936; color: white; }

  /* Search panel */
  .search-row { display: flex; gap: 10px; margin-bottom: 16px; }
  .search-input {
    flex: 1; padding: 11px 16px; border: 1.5px solid var(--color-border);
    border-radius: var(--radius); font-family: var(--font-body); font-size: var(--text-base);
    transition: border-color var(--transition);
  }
  .search-input:focus { border-color: #ed8936; box-shadow: 0 0 0 3px rgba(237,137,54,0.15); }
  .search-btn {
    padding: 11px 22px; background: var(--color-brand); color: white;
    border: none; border-radius: var(--radius); font-family: var(--font-body);
    font-size: var(--text-base); font-weight: 600; cursor: pointer; transition: background var(--transition);
    white-space: nowrap;
  }
  .search-btn:hover:not(:disabled) { background: var(--color-brand-dark); }
  .search-btn:disabled { opacity: 0.6; cursor: not-allowed; }

  /* Search results list */
  .results-list {
    border: 1.5px solid var(--color-border); border-radius: var(--radius);
    max-height: 320px; overflow-y: auto;
  }
  .result-item {
    padding: 14px 18px; border-bottom: 1px solid var(--color-bg);
    cursor: pointer; transition: background var(--transition); display: flex; align-items: center; gap: 14px;
  }
  .result-item:last-child { border-bottom: none; }
  .result-item:hover { background: #fff8f0; }
  .result-avatar {
    width: 38px; height: 38px; border-radius: 50%; background: #fed7aa; color: #c05621;
    font-weight: 700; font-size: var(--text-base); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .result-info { flex: 1; min-width: 0; }
  .result-name { font-weight: 600; color: var(--color-text); margin-bottom: 2px; }
  .result-meta { font-size: var(--text-xs); color: var(--color-text-muted); }
  .result-status-msg { padding: 28px; text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); }

  /* Contact confirmation card */
  .contact-card {
    border: 2px solid #ed8936; border-radius: var(--radius-lg);
    padding: 24px 28px; margin-top: 20px; display: none;
  }
  .contact-card.visible { display: block; }
  .contact-card-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
  .contact-avatar-lg {
    width: 52px; height: 52px; border-radius: 50%; background: #fed7aa; color: #c05621;
    font-weight: 700; font-size: var(--text-xl); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .contact-card-name { font-size: var(--text-xl); font-weight: 700; color: var(--color-text); margin-bottom: 4px; }
  .contact-card-meta { font-size: var(--text-sm); color: var(--color-text-muted); }
  .contact-card-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 20px; }
  .contact-card-field { font-size: var(--text-sm); }
  .contact-card-field span { color: var(--color-text-muted); display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; margin-bottom: 2px; }

  /* Error / loading */
  .s1-error { display: none; background: var(--color-danger-bg); border: 1px solid rgba(229,62,62,0.25); color: #c53030; padding: 14px 16px; border-radius: var(--radius); margin-bottom: 20px; font-size: var(--text-sm); line-height: 1.5; }
  .s1-error.active { display: block; }
  .s1-loading { display: none; text-align: center; padding: 32px; }
  .s1-loading.active { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .s1-loading p { font-size: var(--text-sm); color: var(--color-text-muted); }

  /* Create form section */
  .create-form-section { display: none; }
  .create-form-section.active { display: block; }
  .search-section { display: block; }
  .search-section.hidden { display: none; }

  /* Form fields for create mode */
  .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
  .field-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
  @media (max-width: 540px) { .field-grid, .field-grid-3 { grid-template-columns: 1fr; } }

  .form-field label { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
  .form-field input, .form-field select {
    width: 100%; padding: 10px 14px; border: 1.5px solid var(--color-border);
    border-radius: var(--radius); font-family: var(--font-body); font-size: var(--text-base);
    color: var(--color-text); transition: border-color var(--transition); background: white;
    box-sizing: border-box;
  }
  .form-field input:focus, .form-field select:focus { border-color: #ed8936; box-shadow: 0 0 0 3px rgba(237,137,54,0.15); }
  .form-section-label { font-size: var(--text-md); font-weight: 700; color: var(--color-text); margin: 24px 0 14px; border-bottom: 1px solid var(--color-border); padding-bottom: 8px; }
  .form-field--required label::after { content: ' *'; color: #e53e3e; }

  /* Existing-ECM indicators */
  .ecm-existing-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: #fffbeb; color: #92400e; border: 1px solid #fcd34d;
    border-radius: var(--radius-pill); padding: 2px 8px;
    font-size: var(--text-xs); font-weight: 600; white-space: nowrap; flex-shrink: 0;
  }
  .ecm-existing-warn {
    background: #fffbeb; border: 1.5px solid #fcd34d;
    border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px;
  }
  .ecm-existing-warn-title {
    font-size: var(--text-sm); font-weight: 700; color: #92400e; margin-bottom: 8px;
  }
  .ecm-existing-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px; background: white; border: 1px solid #fcd34d;
    border-radius: var(--radius-sm); margin-bottom: 4px;
    text-decoration: none; color: var(--color-text); font-size: var(--text-sm);
  }
  .ecm-existing-link:hover { background: #fef3c7; }
  .ecm-existing-link:last-child { margin-bottom: 0; }


/* ══════════════════════════════════════════════════════
   Extracted from ecm-step2
   ══════════════════════════════════════════════════════ */

  /* ── Layout ── */
  .s2-wrap { max-width: 980px; width: 100%; margin: 0 auto; }

  /* ── Toolbar ── */
  .ecm-toolbar {
    position: sticky; top: 0; z-index: var(--z-dropdown);
    background: rgba(15,23,42,0.93); backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 10px 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .ecm-toolbar .toolbar-left  { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; }
  .ecm-toolbar .toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  /* Dark toolbar — secondary and danger button variants */
  .ecm-toolbar .btn.btn-secondary { background:rgba(255,255,255,0.10); color:#fff; border:1.5px solid rgba(255,255,255,0.30); box-shadow:none; }
  .ecm-toolbar .btn.btn-secondary:hover { background:rgba(255,255,255,0.20); border-color:rgba(255,255,255,0.55); color:#fff; transform:none; box-shadow:none; }
  .ecm-toolbar .btn.btn-danger { background:rgba(245,101,101,0.85); border-color:rgba(245,101,101,0.6); color:#fff; box-shadow:none; }
  .ecm-toolbar .btn.btn-danger:hover { background:#e53e3e; border-color:#e53e3e; transform:none; box-shadow:none; }
  .ecm-no-badge {
    font-family: monospace; font-size: var(--text-xs); color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
    padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap;
  }
  .sync-pill {
    font-size: var(--text-xs); font-weight: 600; padding: 4px 10px;
    border-radius: var(--radius-pill); white-space: nowrap;
  }
  .sync-pill--draft  { background: rgba(245,158,11,0.2); color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }
  .sync-pill--synced { background: rgba(16,185,129,0.2); color: #34d399; border: 1px solid rgba(16,185,129,0.3); }
  .sync-pill--saving { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.1); }

  /* ── Section cards ── */
  .ecm-card {
    background: white; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
    margin: var(--space-5) 0; overflow: hidden;
  }
  .ecm-card-header {
    padding: 18px 28px; border-bottom: 1px solid var(--color-border);
    display: flex; align-items: center; gap: 12px;
  }
  .ecm-card-icon { font-size: 20px; }
  .ecm-card-title { font-size: var(--text-lg); font-weight: 700; color: var(--color-text); }
  .ecm-card-sub   { font-size: var(--text-xs); color: var(--color-text-muted); margin-left: auto; }
  .ecm-card-body  { padding: 24px 28px; }
  @media (max-width: 640px) { .ecm-card-body { padding: 16px 16px; } .ecm-card-header { padding: 14px 16px; } }

  /* ── "From Contact Record" badge on Group 1 ── */
  .from-contact-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--text-xs); color: #2b6cb0; background: #ebf8ff;
    border: 1px solid #90cdf4; border-radius: var(--radius-pill);
    padding: 2px 10px; margin-left: auto;
  }

  /* ── Form field styling ── */
  .field-label {
    display: block; font-size: var(--text-xs); font-weight: 600;
    color: var(--color-text-secondary); text-transform: uppercase;
    letter-spacing: 0.4px; margin-bottom: 5px;
  }
  .field-label.required::after { content: ' *'; color: #e53e3e; }
  .field-wrap { margin-bottom: var(--space-4); }
  /* .contact-field-tag — shared style now in knd.css */
  .ecm-input, .ecm-select, .ecm-textarea {
    width: 100%; padding: 10px 14px; border: 1.5px solid var(--color-border);
    border-radius: var(--radius); font-family: var(--font-body); font-size: var(--text-base);
    color: var(--color-text); background: white; transition: border-color var(--transition);
    box-sizing: border-box;
  }
  .ecm-input:focus, .ecm-select:focus, .ecm-textarea:focus {
 border-color: #ed8936; box-shadow: 0 0 0 3px rgba(237,137,54,0.15);
  }
  .ecm-textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
  .ecm-textarea--lg { min-height: 200px; }

  /* ── File attachment list ── */
  .ecm-file-list { margin-bottom: 14px; }
  .ecm-file-empty { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 12px; }
  .ecm-file-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: var(--radius-sm);
    background: #f7fafc; border: 1px solid var(--color-border);
    margin-bottom: 6px;
  }
  .ecm-file-icon { font-size: 18px; flex-shrink: 0; }
  .ecm-file-info { flex: 1; min-width: 0; }
  .ecm-file-name {
    display: block; font-size: var(--text-sm); font-weight: 500;
    color: #2b6cb0; text-decoration: none; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  .ecm-file-name:hover { text-decoration: underline; }
  .ecm-file-meta { font-size: var(--text-xs); color: var(--color-text-muted); }
  .ecm-file-synced { color: #38a169; font-weight: 600; }
  .ecm-file-del {
    background: none; border: none; cursor: pointer; color: #a0aec0;
    font-size: 14px; padding: 2px 6px; border-radius: var(--radius-sm);
    transition: color var(--transition-base), background var(--transition-base); flex-shrink: 0;
  }
  .ecm-file-del:hover { color: #e53e3e; background: #fff5f5; }
  .ecm-file-drop-zone { display: flex; align-items: center; gap: 0; }

  /* ── Grid layouts ── */
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-5); }
  .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4) var(--space-5); }
  .grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--space-4) var(--space-5); }
  @media (max-width: 720px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 540px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
  .span-2 { grid-column: span 2; }
  .span-full { grid-column: 1 / -1; }

  /* ── Monthly billing grid (18 boxes) ── */
  .billing-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
  }
  @media (max-width: 720px) { .billing-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 420px) { .billing-grid { grid-template-columns: repeat(2, 1fr); } }
  .billing-box-wrap { display: flex; flex-direction: column; }
  .billing-box-label {
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
    color: var(--color-text-muted); text-align: center; margin-bottom: 4px;
  }
  .billing-box {
    padding: 8px 6px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: var(--text-sm); text-align: center;
    width: 100%; box-sizing: border-box; transition: border-color var(--transition);
  }
  .billing-box:focus { border-color: #ed8936; box-shadow: 0 0 0 2px rgba(237,137,54,0.15); }

  /* ── Dates of Billed grid (compact) ── */
  .dates-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
  }
  @media (max-width: 720px) { .dates-grid { grid-template-columns: repeat(3, 1fr); } }
  .dates-input {
    padding: 8px 6px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: var(--text-xs); width: 100%; box-sizing: border-box;
    transition: border-color var(--transition);
  }
  .dates-input:focus { border-color: #ed8936; }

  /* ── Loading ── */
  .page-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; gap: 16px; }
  .page-loading p { color: rgba(255,255,255,0.6); font-size: var(--text-base); }

  /* ── Checkbox groups (MULTIPLE_OPTIONS GHL fields) ── */
  .ecm-checkbox-group {
    display: flex; flex-wrap: wrap; gap: 6px 10px;
    padding: 10px 12px; border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm); background: var(--color-surface);
    min-height: 44px; align-items: flex-start;
  }
  .ecm-checkbox-option {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--text-sm); color: var(--color-text); cursor: pointer;
    padding: 3px 6px; border-radius: 4px; white-space: nowrap;
    transition: background var(--transition);
  }
  .ecm-checkbox-option:hover { background: rgba(237,137,54,0.08); }
  .ecm-checkbox-option input[type=checkbox] { accent-color: #ed8936; cursor: pointer; }
  .ecm-checkbox-loading { font-size: var(--text-sm); color: var(--color-text-muted); font-style: italic; }

  /* ── Schema warning banner ── */
  .schema-warning-banner {
    background: rgba(237,137,54,0.12); border: 1px solid rgba(237,137,54,0.4);
    border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: var(--space-4);
    font-size: var(--text-sm); color: #ed8936; display: none;
  }
  @media print { .ecm-checkbox-option input[type=checkbox] { display: none !important; } }

  /* ── Leave-page modal ── */
  .leave-modal-body p { margin-bottom: 8px; }

  /* ── Locked banner ── */
  .lock-banner {
    background: #fffbeb; border: 1px solid #fcd34d; border-radius: var(--radius);
    padding: 12px 16px; margin-bottom: var(--space-5); font-size: var(--text-sm);
    color: #92400e; display: none; align-items: center; gap: 10px;
  }
  .lock-banner.visible { display: flex; }

  /* ── Auto-save indicator ── */
  .save-indicator { font-size: var(--text-xs); color: rgba(255,255,255,0.4); white-space: nowrap; }

  /* ── Collapsible groups ── */
  .ecm-card-header.collapsible {
    cursor: pointer; user-select: none;
  }
  .ecm-card-header.collapsible::after {
    content: '▲'; font-size: 11px; color: var(--color-text-muted);
    margin-left: auto; flex-shrink: 0; transition: transform var(--transition-base);
  }
  .ecm-card-header.collapsible.collapsed::after {
    transform: rotate(180deg);
  }
  .ecm-card-body.collapsible-body {
    display: none;
  }
  .ecm-card-body.collapsible-body.expanded {
    display: block;
  }

  @media print {
    .ecm-toolbar { display: none !important; }
    .ecm-card { box-shadow: none !important; border: 1px solid #e2e8f0; page-break-inside: avoid; }
    .ecm-card-body.collapsible-body { display: block !important; }
  }

  /* Tom Select theme: consolidated in ihsp-step2 section — see "Tom Select (consolidated, DESIGN.md §7)" */
  /* ── Contact drift banner (Phase 3B) ── */
  .drift-banner { background:#fffbeb; border:1.5px solid #f59e0b; border-radius:var(--radius-md); padding:12px 16px; margin:8px 0 4px; font-size:var(--text-sm); }
  .drift-banner-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
  .drift-banner-ts { color:var(--color-text-muted); margin-left:auto; font-size:11px; }
  .drift-banner-dismiss { background:none; border:none; cursor:pointer; color:var(--color-text-muted); font-size:14px; padding:0 4px; line-height:1; }
  .drift-banner-dismiss:hover { color:var(--color-danger); }
  .drift-table { width:100%; border-collapse:collapse; margin-bottom:10px; font-size:12px; }
  .drift-table th { text-align:left; padding:4px 8px; color:var(--color-text-muted); font-weight:600; border-bottom:1px solid var(--color-border); }
  .drift-table td { padding:4px 8px; border-bottom:1px solid rgba(0,0,0,0.04); }
  .drift-table td:first-child { font-weight:500; }
  .drift-val-local { color:var(--color-text-muted); }
  .drift-val-ghl { color:#c05621; font-weight:600; }
  .drift-banner-actions { display:flex; gap:8px; margin-top:4px; flex-wrap:wrap; }
  .drift-load-btn { background:#ed8936 !important; color:white !important; border-color:#dd7020 !important; }
  .drift-load-btn:hover { background:#dd7020 !important; }
  .drift-load-btn:disabled { opacity:0.6; cursor:wait; }
  .drift-push-btn { background:#2b6cb0 !important; color:white !important; border-color:#2563a0 !important; }
  .drift-push-btn:hover { background:#2563a0 !important; }
  .drift-push-btn:disabled { opacity:0.6; cursor:wait; }
  .drift-row-actions { white-space:nowrap; padding:2px 6px; text-align:center; }
  .drift-row-btn { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border:1px solid #d0d5dd; border-radius:4px; background:#fff; cursor:pointer; font-size:12px; line-height:1; color:#344054; transition:background .15s; vertical-align:middle; margin:0 1px; }
  .drift-row-btn:hover:not(:disabled) { background:#f2f4f7; }
  .drift-row-btn:disabled { opacity:.4; cursor:default; }


/* ══════════════════════════════════════════════════════
   Extracted from ecm-forms
   ══════════════════════════════════════════════════════ */

  .forms-toolbar {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
  }
  .forms-search {
    flex: 1; min-width: 180px;
    padding: 9px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--text-base);
    transition: border-color var(--transition);
  }
  .forms-search:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(102,126,234,0.15); }
  .forms-filter {
    padding: 9px 32px 9px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--text-base);
    background: white;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23718096' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
  }
  .forms-filter:focus { border-color: var(--color-brand); }
  .forms-count { font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; }

  .knd-table td { vertical-align: middle; }
  .td-ecmno { font-family: monospace; font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
  .td-name { font-weight: 600; color: var(--color-text); }
  .td-name a { color: inherit; text-decoration: none; }
  .td-name a:hover { color: var(--color-brand); }
  .td-date { font-size: var(--text-sm); color: var(--color-text-muted); }
  .td-meta { font-size: var(--text-sm); color: var(--color-text-muted); }

  .sync-pill-synced { background:#f0fff4; color:#276749; border:1px solid #9ae6b4; border-radius:var(--radius-pill); padding:2px 9px; font-size:var(--text-xs); font-weight:600; white-space:nowrap; }
  .sync-pill-draft  { background:#fffbeb; color:#92400e; border:1px solid #fcd34d; border-radius:var(--radius-pill); padding:2px 9px; font-size:var(--text-xs); font-weight:600; white-space:nowrap; }

  .row-actions { display: flex; gap: var(--space-2); align-items: center; white-space: nowrap; }
  .td-actions  { white-space: nowrap; min-width: 110px; }

  /* knd.css sets overflow:hidden on .table-wrap to clip border-radius.
     ECM forms uses border-radius:0, so we don't need the clip — override to
     allow horizontal scroll when 9 columns don't fit the viewport. */
  #tableWrapper .table-wrap { overflow-x: auto; }
  .btn-open { background: #e6fffa; color: #276749; border: 1px solid #81e6d9; }
  .btn-open:hover { background: #b2f5ea; }
  .btn-del  { background: #fff5f5; color: #c53030; border: 1px solid #fc8181; }
  .btn-del:hover { background: #fed7d7; }

  .state-box { text-align: center; padding: 60px 24px; color: var(--color-text-muted); }
  .state-box .icon { font-size: 48px; margin-bottom: 16px; }
  .state-box h3 { font-size: var(--text-xl); font-weight: 600; color: var(--color-text-secondary); margin-bottom: 8px; }
  .state-box p { font-size: var(--text-base); line-height: 1.6; max-width: 380px; margin: 0 auto 20px; }

  .table-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px var(--space-6); border-top: 1px solid var(--color-border);
    gap: var(--space-3); flex-wrap: wrap;
  }
  .table-footer.hidden { display: none; }
  .pagination-info { font-size: var(--text-sm); color: var(--color-text-muted); }
  .pagination-controls { display: flex; align-items: center; gap: 6px; }
  .page-btn {
    padding: 6px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: white; font-family: var(--font-body); font-size: var(--text-sm);
    font-weight: 600; color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition);
  }
  .page-btn:hover:not(:disabled) { background: var(--color-brand-light); border-color: #c3d1f7; }
  .page-btn:disabled { opacity: 0.4; cursor: default; }
  .page-btn.active { background: var(--color-brand); color: white; border-color: var(--color-brand); }

  /* Hide low-priority columns on small screens.
     col-health + col-patient-owner hide at 1099px because the 9-column table
     min-width (~1036px) fits inside the 1100px container only when those two
     headers ("Health Plan" 120px, "Patient Owner" 136px) are not present.
     Raising from 900px → 1099px prevents the horizontal scrollbar on laptops. */
  @media (max-width: 1099px) { .col-health, .col-patient-owner { display: none; } }
  @media (max-width: 900px)  { .col-created, .col-assignee { display: none; } .forms-toolbar { padding: var(--space-3) var(--space-4); } }
  @media (max-width: 480px)  { .knd-table { font-size: var(--text-xs); } }


/* ── intake/step1.html ── */
  /* No-banner modifier — intake pages have no member banner; override sidebar sticky math */
  .member-sidebar--no-banner {
    top: calc(var(--nav-height) + var(--staging-bar-height));
    height: calc(100vh - var(--nav-height) - var(--staging-bar-height));
  }
  .member-view-wrap--no-banner {
    min-height: calc(100vh - var(--nav-height) - var(--staging-bar-height));
  }

  .intake-wrap { max-width: 860px; width: 100%; margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-8); }

  /* (.intake-toolbar removed 2026-04-11 — intake now routes title/actions
     through base_portal {% block nav_title %} / nav_actions slots per
     DESIGN.md §6.2. The duplicate sticky gradient bar is gone.) */

  /* Collapsible section toggle inside .knd-card-header */
  .intake-section-toggle {
    cursor: pointer; user-select: none; width: 100%;
    display: flex; align-items: center; gap: var(--space-3);
  }
  .intake-section-toggle .is-chevron {
    margin-left: auto; font-size: 11px; color: var(--color-text-muted);
    transition: transform var(--transition-base) ease;
  }
  .intake-section-toggle.open .is-chevron { transform: rotate(180deg); }

  /* Collapsible body — knd-card-body wrapper */
  .intake-section-body {
    overflow: hidden; max-height: 0;
    transition: max-height 0.28s ease, padding 0.2s ease; /* allow-jank: expand/collapse accordion */
    padding-top: 0; padding-bottom: 0;
  }
  .intake-section-body.open { max-height: 2400px; }

  /* File upload (preserved from old intake, aligned to EHR palette) */
  .file-upload-area {
    border: 2px dashed var(--color-border); border-radius: var(--radius-md);
    padding: 20px; text-align: center; cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
  }
  .file-upload-area:hover, .file-upload-area.drag-over {
    border-color: var(--color-brand); background: var(--color-brand-light);
  }
  .file-upload-area input[type="file"] { display: none; }
  .file-upload-icon { font-size: 28px; margin-bottom: 8px; }
  .file-upload-text { font-size: var(--text-sm); color: var(--color-text-muted); }
  .file-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
  .file-item {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    background: #f8fafc; border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); font-size: var(--text-sm);
  }
  .file-item-name { flex: 1; font-weight: 500; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .file-item-size { font-size: var(--text-xs); color: var(--color-text-muted); }
  .file-item-remove { cursor: pointer; color: var(--color-text-muted); font-size: 16px; line-height: 1; border: none; background: none; padding: 0; }
  .file-item-remove:hover { color: var(--color-danger); }

  /* Loading overlay */
  .loading-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:9999; align-items:center; justify-content:center; }
  .loading-overlay.active { display:flex; }
  .loading-box { background:#fff; padding:32px 40px; border-radius:var(--radius-lg); text-align:center; max-width:360px; }

  /* Auto-save indicator — sits in the form body, not the nav */
  .intake-autosave { font-size: var(--text-xs); color: var(--color-text-muted); }

  /* Form validation — inline error messages */
  .form-error { display:none; font-size:var(--text-xs); color:var(--color-danger); margin-top:3px; }
  .form-error.visible { display:block; }
  .form-input.invalid { border-color:var(--color-danger) !important; }
  .ts-wrapper.invalid .ts-control { border-color:var(--color-danger) !important; }

  /* Inline submit row */
  .intake-submit-row { display: flex; justify-content: flex-end; gap: 12px; margin-top: var(--space-6); padding-bottom: var(--space-8); }

  /* Edit mode info banner */
  .intake-edit-notice {
    display: flex; align-items: center; gap: 10px;
    background: var(--color-brand-light); border: 1px solid var(--color-brand-border);
    border-radius: var(--radius-md); padding: 10px 16px; margin-bottom: var(--space-4);
    font-size: var(--text-sm); color: var(--color-text-secondary);
  }

  /* Post-submit confirmation banner */
  .intake-confirm-banner {
    background: var(--color-success-bg); border: 1px solid var(--color-success);
    border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-5);
  }
  .intake-confirm-banner h3 { color: var(--color-success); font-size: var(--text-xl); margin: 0 0 4px; }
  .intake-confirm-banner p  { color: #2f855a; font-size: var(--text-sm); margin: 0; }

  /* Post-submit action cards */
  .intake-action-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-4); margin-bottom: var(--space-5);
  }
  .intake-action-card {
    border: 1.5px solid var(--color-border); border-radius: var(--radius-lg);
    overflow: hidden; transition: box-shadow var(--transition-base) ease, border-color var(--transition-base) ease;
  }
  .intake-action-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-brand-border); }
  .intake-action-card.active { border-color: var(--color-brand); }
  .intake-action-card-header {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4) var(--space-5); cursor: pointer;
    background: var(--color-surface);
  }
  .intake-action-card.active .intake-action-card-header { background: var(--color-brand-light); }
  .intake-action-card-icon { font-size: 22px; }
  .intake-action-card-label { font-size: var(--text-base); font-weight: 700; color: var(--color-text); }
  .intake-action-card-desc { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 1px; }
  .intake-action-card-chevron { margin-left: auto; font-size: 11px; color: var(--color-text-muted); transition: transform var(--transition-base); }
  .intake-action-card.active .intake-action-card-chevron { transform: rotate(180deg); }
  .intake-action-card-form { display: none; padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); background: #fafbfc; }
  .intake-action-card.active .intake-action-card-form { display: block; }

  /* Confirm bottom links row */
  .intake-confirm-links { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-2); flex-wrap: wrap; }

  @media (max-width: 640px) {
    .intake-action-grid { grid-template-columns: 1fr; }
  }

/* ── intake/step2.html ── */
  .member-info-card {
    background: white; border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-5);
    display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  }
  .member-info-card .mi-name {
    font-size: var(--text-xl); font-weight: 700; color: var(--color-text);
    flex: 1; min-width: 140px;
  }
  .mi-meta { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 2px; }

  .page-loading {
    position: fixed; inset: 0; background: rgba(255,255,255,0.75);
    display: flex; align-items: center; justify-content: center;
    z-index: var(--z-critical); backdrop-filter: blur(2px);
  }
  .page-loading.hidden { display: none; }

  @media (max-width: 640px) {
    .member-info-card { padding: var(--space-4); }
  }

/* ── intake/forms.html ── */
  .forms-toolbar {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
  }
  .forms-search {
    flex: 1; min-width: 180px;
    padding: 9px 14px;
    border: 1.5px solid var(--color-border); border-radius: var(--radius);
    font-family: var(--font-body); font-size: var(--text-base);
    transition: border-color var(--transition);
  }
  .forms-search:focus { border-color: #319795; box-shadow: 0 0 0 3px rgba(49,151,149,0.15); }
  .forms-filter {
    padding: 9px 32px 9px 14px;
    border: 1.5px solid var(--color-border); border-radius: var(--radius);
    font-family: var(--font-body); font-size: var(--text-base);
    background: white; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23718096' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
    cursor: pointer;
  }
  .forms-filter:focus { border-color: #319795; }
  .forms-count { font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; }

  .knd-table td { vertical-align: middle; }
  .td-name  { font-weight: 600; color: var(--color-text); }
  .td-name a { color: inherit; text-decoration: none; }
  .td-name a:hover { color: #319795; }
  .td-date  { font-size: var(--text-sm); color: var(--color-text-muted); }
  .td-meta  { font-size: var(--text-sm); color: var(--color-text-muted); }
  .td-phone { font-family: monospace; font-size: var(--text-sm); white-space: nowrap; }

  .row-actions-intake { display: flex; gap: var(--space-2); align-items: center; white-space: nowrap; }
  .td-actions  { white-space: nowrap; min-width: 120px; }

  #tableWrapper .table-wrap { overflow-x: auto; }
  .btn-open    { background: #e6fffa; color: #234e52; border: 1px solid #81e6d9; }
  .btn-open:hover { background: #b2f5ea; }
  .btn-sched   { background: #ebf8ff; color: #1a365d; border: 1px solid #90cdf4; }
  .btn-sched:hover { background: #bee3f8; }
  .btn-del     { background: #fff5f5; color: #c53030; border: 1px solid #fc8181; }
  .btn-del:hover { background: #fed7d7; }

  @media (max-width: 900px)  { .col-referral, .col-assignee { display: none; } .forms-toolbar { padding: var(--space-3) var(--space-4); } }
  @media (max-width: 640px)  { .col-created, .col-dob { display: none; } }
  @media (max-width: 480px)  { .knd-table { font-size: var(--text-xs); } }

/* ── docs/index.html ── */
.docs-toolbar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.docs-search {
  flex: 1; min-width: 180px;
  padding: 9px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--transition);
}
.docs-search:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(102,126,234,0.15); }
.docs-filter {
  padding: 9px 32px 9px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-base);
  background: white;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23718096' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
.docs-filter:focus { border-color: var(--color-brand); }
.docs-count { font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; }
.knd-table td { vertical-align: middle; }
.td-name { font-weight: 600; color: var(--color-text); }
.td-name a { color: inherit; text-decoration: none; }
.td-name a:hover { color: var(--color-brand); }
.td-date { font-size: var(--text-sm); color: var(--color-text-muted); }
.td-meta { font-size: var(--text-sm); color: var(--color-text-muted); }
.status-badge {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.status-draft              { background: #edf2f7; color: #4a5568; }
.status-in_progress        { background: #ebf8ff; color: #2b6cb0; }
.status-pending_signatures { background: #fffbeb; color: #92400e; }
.status-complete           { background: #f0fff4; color: #276749; }
.form-pill {
  display: inline-block;
  padding: 2px 7px; border-radius: 4px;
  font-size: 11px; font-weight: 500;
  background: #f7fafc; border: 1px solid var(--color-border);
  color: var(--color-text-secondary); white-space: nowrap;
  margin: 1px 2px;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle;
}
.row-actions { display: flex; gap: var(--space-2); align-items: center; }
.btn-open   { background: #ebf8ff; color: #2b6cb0; border: 1px solid #90cdf4; }
.btn-open:hover { background: #bee3f8; }
.state-box { text-align: center; padding: 60px 24px; color: var(--color-text-muted); }
.state-box .icon { font-size: 48px; margin-bottom: 16px; }
.state-box h3 { font-size: var(--text-xl); font-weight: 600; color: var(--color-text-secondary); margin-bottom: 8px; }
.state-box p  { font-size: var(--text-base); line-height: 1.6; max-width: 380px; margin: 0 auto 20px; }
@media (max-width: 768px) {
  .col-forms, .col-created, .col-updated-by { display: none; }
  .docs-toolbar { padding: var(--space-3) var(--space-4); gap: var(--space-2); }
}
@media (max-width: 480px) {
  .col-phone { display: none; }
}

/* ── docs/step1.html ── */
.s1-container {
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  max-width: 900px;
  width: 100%;
  padding: 48px;
}
@media (max-width: 640px) { .s1-container { padding: 28px 20px; } }
.s1-phase-card {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: 24px;
}
.s1-phase-header {
  padding: 14px 20px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-base);
}
.s1-phase-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-brand); color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.s1-phase-body { padding: 24px; }
.s1-tabs { display: flex; margin-bottom: 20px; }
.s1-tab {
  flex: 1; padding: 11px 16px;
  border: 2px solid var(--color-border); background: white;
  font-family: var(--font-body); font-size: var(--text-base);
  font-weight: 600; cursor: pointer; color: var(--color-text-secondary);
  transition: all var(--transition);
}
.s1-tab:first-child { border-radius: var(--radius) 0 0 var(--radius); border-right: none; }
.s1-tab:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }
.s1-tab:hover:not(.s1-tab--active) { border-color: var(--color-brand); color: var(--color-brand-dark); }
.s1-tab--active { background: var(--color-brand); border-color: var(--color-brand); color: white; }
.crm-search-row { display: flex; gap: 8px; margin-bottom: 12px; }
.crm-search-input {
  flex: 1; padding: 10px 14px;
  border: 1.5px solid var(--color-border); border-radius: var(--radius);
  font-family: var(--font-body); font-size: var(--text-base);
  transition: border-color var(--transition);
}
.crm-search-input:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(102,126,234,0.15); }
.crm-search-btn {
  padding: 10px 20px; background: var(--color-brand); color: white;
  border: none; border-radius: var(--radius);
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 600;
  cursor: pointer; transition: background var(--transition); white-space: nowrap;
}
.crm-search-btn:hover { background: var(--color-brand-dark); }
.crm-search-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.crm-results { overflow-y: auto; max-height: 280px; border: 1px solid var(--color-border); border-radius: var(--radius); }
.crm-result-item {
  padding: 13px 16px; border-bottom: 1px solid var(--color-bg);
  cursor: pointer; transition: background var(--transition);
}
.crm-result-item:last-child { border-bottom: none; }
.crm-result-item:hover { background: var(--color-brand-light); }
.crm-result-name { font-weight: 600; font-size: var(--text-base); color: var(--color-text); margin-bottom: 3px; }
.crm-result-meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.crm-status-msg { padding: 20px; text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); }
.contact-card-inner {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 20px; background: var(--color-bg);
  border-radius: var(--radius); border: 1.5px solid var(--color-brand); margin-top: 12px;
}
.contact-card-avatar {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--color-brand); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-lg); font-weight: 700; flex-shrink: 0;
}
.contact-card-detail { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 3px; }
.env-existing-badge {
  font-size: 11px; color: #b45309; background: #fef9c3;
  border-radius: 4px; padding: 1px 6px; margin-left: 5px;
}
.env-existing-panel {
  background: #fffbeb; border: 1.5px solid #f59e0b;
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px;
}
.env-existing-panel-title { font-weight: 700; color: #92400e; margin-bottom: 8px; font-size: var(--text-sm); }
.env-existing-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; background: white; border: 1px solid #fcd34d;
  border-radius: var(--radius-sm); margin-bottom: 4px;
  text-decoration: none; color: var(--color-text); font-size: var(--text-sm);
}
.env-existing-link:hover { background: #fef3c7; }
.sign-badge {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 3px;
  white-space: nowrap; letter-spacing: 0.2px;
}
.sign-member  { background: #ebf8ff; color: #2c5282; border: 1px solid #bee3f8; }
.sign-both    { background: #faf5ff; color: #553c9a; border: 1px solid #d6bcfa; }
.sign-staff   { background: #f0fff4; color: #276749; border: 1px solid #9ae6b4; }
.sign-none    { background: #f7fafc; color: #718096; border: 1px solid #e2e8f0; }
.form-picker-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.form-picker-label {
  font-weight: 600; font-size: var(--text-base); color: var(--color-text);
}
.form-picker-count {
  font-size: var(--text-sm); color: var(--color-text-muted);
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 999px; padding: 2px 12px; transition: all var(--transition);
}
.form-picker-count.has-selection {
  background: var(--color-brand); color: white; border-color: var(--color-brand);
}
.form-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 600px) { .form-picker-grid { grid-template-columns: 1fr; } }
.form-pick-card {
  position: relative;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
  user-select: none;
  background: white;
}
.form-pick-card:hover {
  border-color: var(--color-brand);
  background: var(--color-brand-light);
}
.form-pick-card.selected {
  border-color: var(--color-brand);
  background: rgba(102,126,234,0.06);
  box-shadow: 0 0 0 3px rgba(102,126,234,0.15);
}
.form-pick-checkbox {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 2px solid var(--color-border); border-radius: 4px;
  background: white; display: flex; align-items: center; justify-content: center;
  margin-top: 1px; transition: all var(--transition-base);
}
.form-pick-card.selected .form-pick-checkbox {
  background: var(--color-brand); border-color: var(--color-brand);
}
.form-pick-checkbox-mark {
  display: none; width: 10px; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.form-pick-card.selected .form-pick-checkbox-mark { display: block; }
.form-pick-body { flex: 1; min-width: 0; }
.form-pick-title {
  font-size: var(--text-sm); font-weight: 600; color: var(--color-text);
  line-height: 1.35; margin-bottom: 5px;
}
.form-picker-controls {
  display: flex; gap: 12px; margin-top: 10px;
  font-size: var(--text-sm);
}
.form-picker-ctrl {
  color: var(--color-brand); background: none; border: none;
  cursor: pointer; padding: 0; font-family: var(--font-body);
  font-size: var(--text-sm); font-weight: 600; min-height: 24px;
  text-decoration: underline; text-underline-offset: 2px;
  transition: color var(--transition);
}
.form-picker-ctrl:hover { color: var(--color-brand-dark); }
.s1-loading { display: none; text-align: center; padding: 20px; }
.s1-loading.active { display: block; }
.s1-error { display: none; background: var(--color-danger-bg); border: 1px solid rgba(229,62,62,0.25); color: #c53030; padding: 16px; border-radius: var(--radius); margin-bottom: 20px; font-size: var(--text-sm); line-height: 1.5; }
.s1-error.active { display: block; }

/* ── docs/envelope.html ── */
.env-layout {
  display: flex;
  height: calc(100vh - 64px);
  overflow: hidden;
}
.env-sidebar {
  width: 280px;
  min-width: 220px;
  background: white;
  border-right: 1px solid var(--color-border, #e2e8f0);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.env-sidebar-header {
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}
.env-contact-name {
  font-size: 15px;
  font-weight: 700;
  color: #805ad5;
  margin: 0 0 4px;
}
.env-status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pill-draft            { background: #e2e8f0; color: #4a5568; }
.pill-in_progress      { background: #bee3f8; color: #2b6cb0; }
.pill-pending_signatures { background: #fef3c7; color: #92400e; }
.pill-complete         { background: #c6f6d5; color: #276749; }
.env-form-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.env-form-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.env-form-item:hover { background: #f7f8ff; }
.env-form-item.active { background: #f3ebff; border-left-color: #805ad5; }
.env-form-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.dot-not_started { background: #cbd5e0; }
.dot-in_progress { background: #4299e1; }
.dot-complete    { background: #48bb78; }
.dot-signed      { background: #805ad5; }
.env-form-name {
  font-size: 13px;
  color: var(--color-text, #2d3748);
  line-height: 1.3;
  flex: 1;
}
.env-form-item.active .env-form-name { font-weight: 600; color: #553c9a; }
.env-signing-panel {
  border-top: 1px solid var(--color-border, #e2e8f0);
  padding: 12px 14px; overflow-y: auto; max-height: 220px;
}
.env-signing-panel h4 {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--color-text-muted, #718096);
  margin: 0 0 8px;
}
.sig-form-card {
  margin-bottom: 6px; padding: 7px 9px;
  background: #f7fafc; border: 1px solid #e2e8f0; border-radius: 7px;
  cursor: pointer; transition: background var(--transition-fast);
}
.sig-form-card:hover { background: #f3ebff; border-color: #d6bcfa; }
.sig-form-card:last-child { margin-bottom: 0; }
.sig-form-name {
  font-size: 11px; font-weight: 600; color: #2d3748;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 5px;
}
.sig-status-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; margin-bottom: 3px;
}
.sig-status-row:last-child { margin-bottom: 0; }
.sig-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sig-status-row.done .sig-dot    { background: #48bb78; }
.sig-status-row.pending .sig-dot { background: #cbd5e0; }
.sig-party { color: #4a5568; font-weight: 500; flex: 1; font-size: 11px; }
.sig-status-label {
  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 999px;
}
.sig-status-row.done .sig-status-label    { background: #c6f6d5; color: #276749; }
.sig-status-row.pending .sig-status-label { background: #edf2f7; color: #718096; }
.env-form-area {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column;
  background: var(--color-bg, #f7fafc);
}
.env-form-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px 10px;
  background: white;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.env-form-title-text {
  font-size: 16px; font-weight: 700; color: var(--color-text, #2d3748);
}
.env-save-status {
  font-size: 12px; color: var(--color-text-muted, #718096); min-width: 80px; text-align: right;
}
.env-save-status.saving { color: #805ad5; }
.env-save-status.saved  { color: #276749; }
.env-save-status.error  { color: #c53030; }
.env-form-body { flex: 1; padding: 24px; max-width: 860px; }
.form-field-group { margin-bottom: 22px; }
.form-field-group > label {
  display: block; font-size: 13px; font-weight: 600;
  color: #2d3748; margin-bottom: 6px; line-height: 1.4;
}
.form-field-group > label .req-star { color: #e53e3e; margin-left: 2px; }
.form-field-group input[type="text"],
.form-field-group input[type="email"],
.form-field-group input[type="tel"],
.form-field-group input[type="date"],
.form-field-group textarea {
  width: 100%; padding: 9px 13px;
  border: 1.5px solid var(--color-border, #e2e8f0);
  border-radius: 7px; font-size: 14px;
  color: var(--color-text, #2d3748); background: white;
  box-sizing: border-box; transition: border-color var(--transition-base);
  font-family: inherit;
}
.form-field-group input:focus, .form-field-group textarea:focus {
 border-color: #805ad5;
  box-shadow: 0 0 0 3px rgba(128,90,213,0.15);
}
.form-field-group textarea { min-height: 90px; resize: vertical; }
.checkbox-group {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 14px; border-left: 3px solid #d6bcfa;
  background: #faf5ff; border-radius: 0 7px 7px 0;
  margin-top: 2px;
}
.checkbox-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: #2d3748; cursor: pointer; line-height: 1.45; padding: 2px 0;
}
.checkbox-item input[type="checkbox"] {
  margin-top: 2px; flex-shrink: 0; width: 15px; height: 15px; accent-color: #805ad5;
}
.radio-group {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 14px; border-left: 3px solid #d6bcfa;
  background: #faf5ff; border-radius: 0 7px 7px 0;
  margin-top: 2px;
}
.radio-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: #2d3748; cursor: pointer; line-height: 1.45; padding: 2px 0;
}
.radio-item input[type="radio"] {
  margin-top: 2px; flex-shrink: 0; width: 15px; height: 15px; accent-color: #805ad5;
}
.sig-field-display {
  background: #f3ebff; border: 1px solid #d6bcfa; border-radius: 6px;
  padding: 10px 14px; font-size: 13px; color: #553c9a; font-style: italic;
}
.sig-field-display.signed {
  background: #c6f6d5; border-color: #9ae6b4;
  color: #276749; font-style: normal; font-weight: 600;
}
.form-section-divider {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #805ad5;
  margin: 28px 0 16px;
}
.form-section-divider::after {
  content: ''; flex: 1; height: 1px; background: #d6bcfa;
}
.table-field-wrapper { overflow-x: auto; }
.table-field-wrapper table { border-collapse: collapse; min-width: 100%; font-size: 13px; }
.table-field-wrapper th {
  background: #f3ebff; color: #553c9a; font-weight: 700;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 6px 10px; border: 1px solid #d6bcfa;
}
.table-field-wrapper td {
  padding: 4px 8px; border: 1px solid var(--color-border, #e2e8f0); background: white;
}
.table-field-wrapper td input {
  border: none; background: transparent; font-size: 13px;
  width: 100%; padding: 0; color: var(--color-text, #2d3748); font-family: inherit;
}
.table-add-row {
  font-size: 12px; color: #805ad5; background: none;
  border: 1px dashed #d6bcfa; border-radius: 6px;
  padding: 4px 12px; cursor: pointer; margin-top: 4px;
}
.table-add-row:hover { background: #f3ebff; }
.env-sign-actions {
  padding: 12px 24px; background: white;
  border-top: 1px solid var(--color-border, #e2e8f0);
  display: flex; flex-direction: column; gap: 8px;
}
.sign-party-row {
  display: flex; align-items: center; gap: 12px; min-height: 34px;
}
.sign-party-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: #718096; width: 54px; flex-shrink: 0;
}
.signed-stamp {
  font-size: 12px; color: #276749; background: #c6f6d5;
  border: 1px solid #9ae6b4; border-radius: 999px; padding: 3px 12px; font-weight: 600;
}
.env-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 8px; font-size: 14px; font-weight: 600;
  cursor: pointer; border: none; transition: opacity var(--transition-base);
}
.env-btn:hover { opacity: 0.85; }
.env-btn-purple { background: var(--color-brand); color: white; }
.env-btn-purple:hover { background: var(--color-brand-dark, #6b46c1); opacity: 1; }
.env-btn-teal   { background: #38b2ac; color: white; }
.env-btn-ghost  {
  background: white; color: #4a5568;
  border: 1px solid var(--color-border, #e2e8f0);
}
.env-btn:disabled { opacity: 0.45; cursor: not-allowed; }
#btn-export-pdf:disabled { opacity: 0.45; cursor: not-allowed; }
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: none; align-items: center; justify-content: center; z-index: 1000;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: white; border-radius: 16px; padding: 28px 32px;
  width: 660px; max-width: 95vw;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.modal-title { font-size: 18px; font-weight: 700; color: var(--color-text, #2d3748); margin: 0 0 12px; }
.modal-canvas-wrap {
  border: 2px solid #d6bcfa; border-radius: 10px;
  background: #fafafa; margin-bottom: 12px; overflow: hidden; cursor: crosshair;
}
#sig-canvas { display: block; width: 100%; touch-action: none; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.sms-url-box {
  background: var(--color-bg, #f7fafc); border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--color-brand);
  word-break: break-all; margin: 10px 0;
}
.copy-btn {
  font-size: 12px; padding: 5px 14px; background: var(--color-brand); color: white;
  border: none; border-radius: 6px; cursor: pointer;
}
.copy-btn:hover { opacity: 0.85; }
.toast {
  position: fixed; bottom: 24px; right: 24px;
  padding: 12px 20px; border-radius: 10px;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18); z-index: 2000;
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { background: #c6f6d5; color: #276749; }
.toast-error   { background: #fed7d7; color: #c53030; }
.hint-icon {
  position: relative; display: inline-flex; align-items: center;
  justify-content: center; width: 15px; height: 15px; border-radius: 50%;
  background: #e9d8fd; color: #553c9a; font-size: 9px; font-weight: 700;
  cursor: help; margin-left: 5px; vertical-align: middle; flex-shrink: 0;
  line-height: 1; text-transform: none; letter-spacing: 0;
}
.hint-icon::after {
  content: attr(data-hint);
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: #2d3748; color: white;
  font-size: 12px; font-weight: 400; line-height: 1.5;
  padding: 7px 11px; border-radius: 7px;
  min-width: 180px; max-width: 280px; white-space: normal;
  z-index: var(--z-drawer); box-shadow: 0 3px 12px rgba(0,0,0,0.22);
  pointer-events: none; display: none;
}
.hint-icon:hover::after { display: block; }
.form-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 28px; margin-top: 28px;
  border-top: 1px solid #e2e8f0;
}
@media (max-width: 640px) { .env-sidebar { width: 200px; min-width: 160px; } }
.content-blocks {
  margin-bottom: 24px;
  border: 1px solid #d6bcfa;
  border-radius: 10px;
  background: #faf5ff;
  overflow: hidden;
}
.content-block { padding: 16px 20px 12px; border-bottom: 1px solid #ede3ff; }
.content-block:last-child { border-bottom: none; }
.content-block-heading {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #805ad5; margin: 0 0 10px;
}
.content-text {
  font-size: 14px; color: #2d3748; line-height: 1.65; margin: 0 0 6px;
}
.content-text:last-child { margin-bottom: 0; }
.content-list {
  margin: 0 0 6px; padding-left: 22px;
  font-size: 14px; color: #2d3748; line-height: 1.7;
}
.content-steps {
  margin: 0 0 6px; padding-left: 22px;
  font-size: 14px; color: #2d3748; line-height: 1.65;
}
.content-steps li, .content-list li { margin-bottom: 4px; }
.content-sub-section { margin-bottom: 10px; }
.content-sub-section:last-child { margin-bottom: 0; }
.content-sub-inner { margin-bottom: 8px; }
.content-sub-label {
  font-size: 12px; font-weight: 600; color: #553c9a;
  margin-bottom: 4px; text-transform: capitalize;
}
.content-kv { font-size: 13px; color: #4a5568; margin-bottom: 3px; }
.content-kv strong { color: #2d3748; }

/* ── docs/sign.html ── */
.sign-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: calc(100vh - 64px);
  padding: 32px 16px;
  background: var(--color-bg, #f7fafc);
}
.sign-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  width: 100%;
  max-width: 620px;
  padding: 36px 40px;
}
@media (max-width: 600px) { .sign-card { padding: 24px 20px; } }
.sign-icon { font-size: 48px; margin-bottom: 12px; }
.sign-title {
  font-size: 22px; font-weight: 700;
  color: var(--color-text, #2d3748); margin: 0 0 8px;
}
.sign-sub {
  font-size: 15px; color: var(--color-text-muted, #718096);
  margin: 0 0 24px; line-height: 1.5;
}
.sign-input-label {
  display: block; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-text-muted, #718096); margin-bottom: 6px;
}
.sign-dob-input {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid var(--color-border, #e2e8f0);
  border-radius: 8px; font-size: 16px;
  color: var(--color-text, #2d3748);
  font-family: inherit; box-sizing: border-box;
  margin-bottom: 16px; transition: border-color var(--transition-base);
}
.sign-dob-input:focus {
 border-color: #805ad5;
  box-shadow: 0 0 0 3px rgba(128,90,213,0.15);
}
.sign-btn {
  width: 100%; padding: 12px;
  background: #805ad5; color: white;
  border: none; border-radius: 8px;
  font-size: 15px; font-weight: 700;
  cursor: pointer; transition: opacity var(--transition-base);
  font-family: inherit;
}
.sign-btn:hover   { opacity: 0.88; }
.sign-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sign-error {
  background: #fed7d7; border: 1px solid #fc8181;
  border-radius: 8px; padding: 10px 14px;
  font-size: 14px; color: #c53030; margin-bottom: 14px;
  display: none;
}
.sign-error.show { display: block; }
.sign-note {
  font-size: 12px; color: var(--color-text-muted, #718096);
  margin-top: 14px; text-align: center;
}
.review-banner {
  background: #c6f6d5; border: 1px solid #9ae6b4;
  border-radius: 8px; padding: 10px 14px;
  font-size: 14px; color: #276749; font-weight: 600;
  margin-bottom: 20px;
}
.review-fields { margin-bottom: 24px; }
.review-field  { margin-bottom: 10px; }
.review-field-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--color-text-muted, #718096);
  margin-bottom: 2px;
}
.review-field-value {
  font-size: 14px; color: var(--color-text, #2d3748);
  background: var(--color-bg, #f7fafc);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 6px; padding: 6px 10px;
}
.review-section-divider {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #805ad5;
  margin: 16px 0 8px; padding-bottom: 4px;
  border-bottom: 1px solid #d6bcfa;
}
.sig-section-title {
  font-size: 14px; font-weight: 700; color: var(--color-text, #2d3748);
  margin: 24px 0 8px; border-top: 1px solid var(--color-border, #e2e8f0);
  padding-top: 20px;
}
.sig-canvas-wrap {
  border: 2px solid #d6bcfa; border-radius: 10px;
  background: #fafafa; margin-bottom: 10px;
  overflow: hidden; cursor: crosshair;
}
#member-sig-canvas { display: block; width: 100%; touch-action: none; }
.sig-controls {
  display: flex; gap: 10px; justify-content: space-between; margin-bottom: 16px;
}
.sig-clear-btn {
  font-size: 13px; color: #805ad5; background: none;
  border: 1px solid #d6bcfa; border-radius: 6px;
  padding: 6px 16px; cursor: pointer; font-family: inherit;
}
.sig-clear-btn:hover { background: #f3ebff; }
.sig-hint {
  font-size: 12px; color: var(--color-text-muted, #718096); font-style: italic;
}
#submit-sig-btn { margin-top: 4px; }
.done-icon { font-size: 64px; margin-bottom: 16px; }
.done-title {
  font-size: 22px; font-weight: 700;
  color: #276749; margin: 0 0 10px;
}
.error-icon { font-size: 56px; margin-bottom: 12px; }
.error-title {
  font-size: 20px; font-weight: 700;
  color: #c53030; margin: 0 0 10px;
}
/* Decline button + modal */
.sign-decline-btn {
  background: none; border: none; font-size: 13px;
  color: var(--color-text-muted, #718096); cursor: pointer;
  font-family: inherit; text-decoration: underline; padding: 0;
}
.sign-decline-btn:hover { color: #c53030; }
.decline-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-drawer); padding: 16px;
}
.decline-modal-box {
  background: white; border-radius: 12px;
  padding: 28px; max-width: 420px; width: 100%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.20);
}
.decline-reason-input {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid var(--color-border, #e2e8f0);
  border-radius: 8px; padding: 10px 14px;
  font-family: inherit; font-size: 14px;
  resize: vertical; margin-bottom: 4px;
}
.decline-reason-input:focus {
 border-color: #fc8181;
  box-shadow: 0 0 0 3px rgba(252,129,129,0.15);
}
.decline-modal-actions {
  display: flex; gap: 12px; justify-content: flex-end; margin-top: 16px;
}
/* Signing summary badges on index */
.sign-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.sign-done     { background: #c6f6d5; color: #22543d; }
.sign-pending  { background: #fffbeb; color: #92400e; }
.sign-rejected { background: #fed7d7; color: #822727; }
/* Filter chips */
.docs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.docs-chip {
  padding: 4px 12px; border-radius: 999px; border: 1.5px solid var(--color-border);
  font-size: 12px; font-weight: 600; cursor: pointer;
  background: white; color: var(--color-text-secondary);
  font-family: inherit; transition: background var(--transition-fast), border-color var(--transition-fast);
}
.docs-chip:hover  { background: #f7fafc; border-color: var(--color-brand); }
.docs-chip.active { background: var(--color-brand); border-color: var(--color-brand); color: white; }
.form-pills-wrap  { display: flex; flex-wrap: wrap; gap: 2px; }
/* docs/envelope.html redesign */
.form-pick-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--radius);
  cursor: pointer; font-size: var(--text-sm);
  transition: background var(--transition-fast);
}
.form-pick-row:hover { background: var(--color-bg); }
.form-pick-row input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--color-brand); }
.form-pick-row.selected { background: rgba(102,126,234,0.06); }
/* docs/templates.html modal */
.tmpl-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-drawer); padding: 16px;
}
.tmpl-modal-box {
  background: white; border-radius: 12px;
  padding: 28px 32px; max-width: 480px; width: 100%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.tmpl-modal-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; }

/* ── crm/form.html ── */
.form-section { margin-bottom: var(--space-6); }
.form-section-title {
  font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: var(--space-3); padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-col-full { grid-column: 1 / -1; }
.knd-label { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary); margin-bottom: 5px; }
.knd-input, .knd-select, .knd-textarea {
  width: 100%; padding: 9px 12px; border: 1.5px solid var(--color-border);
  border-radius: var(--radius); font-family: var(--font-body); font-size: var(--text-base);
  color: var(--color-text); background: white; box-sizing: border-box;
  transition: border-color var(--transition);
}
.knd-input:focus, .knd-select:focus, .knd-textarea:focus {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(102,126,234,0.15);
}
.knd-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23718096' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}
.knd-textarea { resize: vertical; min-height: 80px; }
.field-required { color: var(--color-danger); margin-left: 2px; }
.checkbox-label { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); cursor: pointer; }
.checkbox-label input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--color-brand); }
.form-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-3); padding-top: var(--space-4);
  border-top: 1px solid var(--color-border); margin-top: var(--space-4);
}
.collapsible-toggle {
  background: none; border: none; cursor: pointer; font-size: var(--text-sm);
  color: var(--color-brand); padding: 0; font-family: var(--font-body);
  display: flex; align-items: center; gap: 6px; min-height: 24px;
}
.collapsible-toggle:focus {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: 2px;
}
.collapsible-toggle svg { transition: transform var(--transition-base); flex-shrink: 0; }
.collapsible-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
#additionalFields { display: none; margin-top: var(--space-4); }
#additionalFields.open { display: block; }
.dup-banner {
  background: #fffbeb; border: 1px solid #f6e05e;
  border-radius: var(--radius); padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  display: flex; align-items: flex-start; gap: var(--space-3);
  font-size: var(--text-sm);
}
.dup-banner a { color: var(--color-brand); font-weight: 600; }

/* ── crm/dashboard.html ── */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 960px) { .dash-grid { grid-template-columns: 1fr; } }
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
@media (max-width: 800px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .kpi-row { grid-template-columns: 1fr; } }
.kpi-card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  display: flex; flex-direction: column; gap: 4px;
}
.kpi-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-text-muted);
}
.kpi-value {
  font-size: 32px; font-weight: 700; color: var(--color-text);
  line-height: 1.1;
}
.kpi-value--danger { color: var(--color-danger); }
.kpi-sub {
  font-size: var(--text-xs); color: var(--color-text-muted);
}
.kpi-card--loading .kpi-value {
  background: var(--color-bg); border-radius: 4px;
  color: transparent; min-width: 48px;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  0%   { opacity: 0.5; }
  50%  { opacity: 1; }
  100% { opacity: 0.5; }
}
.dash-section-title {
  font-size: var(--text-sm); font-weight: 700; color: var(--color-text-secondary);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  display: flex; align-items: center; justify-content: space-between;
}
.dash-section-title a {
  font-size: var(--text-xs); font-weight: 500; text-transform: none;
  letter-spacing: 0; color: var(--color-brand); text-decoration: none;
}
.dash-section-title a:hover { text-decoration: underline; }
.pipeline-list { padding: var(--space-3) var(--space-4); }
.pipeline-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 5px 0;
}
.pipeline-label {
  font-size: var(--text-sm); color: var(--color-text);
  min-width: 130px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; flex-shrink: 0;
}
.pipeline-bar-wrap {
  flex: 1; height: 10px; background: var(--color-bg);
  border-radius: var(--radius-pill); overflow: hidden;
  border: 1px solid var(--color-border);
  min-width: 40px;
}
.pipeline-bar-fill {
  height: 100%; background: var(--color-brand);
  border-radius: var(--radius-pill);
  transition: width 0.5s ease; /* allow-jank: progress bar visual fill */
}
.pipeline-count {
  font-size: var(--text-sm); font-weight: 600;
  color: var(--color-text-muted); min-width: 28px; text-align: right;
}
.pipeline-empty {
  padding: var(--space-4); text-align: center;
  font-size: var(--text-sm); color: var(--color-text-muted);
}
.dash-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--text-sm);
}
.dash-table th {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-text-muted);
  padding: 6px var(--space-4); text-align: left;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
.dash-table td {
  padding: 7px var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-text);
}
.dash-table tbody tr:last-child td { border-bottom: none; }
.dash-table tbody tr { cursor: pointer; transition: background var(--transition-fast); }
.dash-table tbody tr:hover { background: var(--color-bg); }
.dash-table td a { color: var(--color-text); text-decoration: none; font-weight: 600; }
.dash-table td a:hover { color: var(--color-brand); }
.td-overdue { color: var(--color-danger) !important; font-weight: 600; }
.td-muted { color: var(--color-text-muted); }
.table-footer {
  padding: var(--space-3) var(--space-4);
  text-align: center; border-top: 1px solid var(--color-border);
}
.table-footer a {
  font-size: var(--text-sm); color: var(--color-brand); text-decoration: none;
}
.table-footer a:hover { text-decoration: underline; }
.activity-feed {
  padding: var(--space-2) 0;
  max-height: 480px; overflow-y: auto;
}
.timeline-item {
  display: flex; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}
.timeline-item:last-child { border-bottom: none; }
.timeline-item:hover { background: var(--color-bg); }
.activity-icon {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-brand-light); border: 1px solid #c3d1f7;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; margin-top: 1px;
}
.activity-body { flex: 1; min-width: 0; }
.activity-summary {
  font-size: var(--text-sm); color: var(--color-text);
  line-height: 1.4; margin-bottom: 2px;
}
.activity-time {
  font-size: 11px; color: var(--color-text-muted);
}
.activity-empty {
  padding: var(--space-5) var(--space-4);
  text-align: center; font-size: var(--text-sm); color: var(--color-text-muted);
}
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap;
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; }
.status-badge.enrolled   { background: rgba(72,187,120,0.12); color: #276749; }
.status-badge.enrolled   .badge-dot { background: #38a169; }
.status-badge.scheduled  { background: rgba(66,153,225,0.12); color: #2b6cb0; }
.status-badge.scheduled  .badge-dot { background: #4299e1; }
.status-badge.pending    { background: rgba(246,173,85,0.18); color: #c05621; }
.status-badge.pending    .badge-dot { background: #ed8936; }
.status-badge.no-show    { background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.status-badge.no-show    .badge-dot { background: var(--color-text-muted); }
.status-badge.other      { background: var(--color-brand-light); color: var(--color-brand-dark); }
.status-badge.other      .badge-dot { background: var(--color-brand); }
.knd-nav-cta { background: rgba(255,255,255,0.9); color: var(--color-brand-dark); }
.state-sm {
  padding: var(--space-4); text-align: center;
  color: var(--color-text-muted); font-size: var(--text-sm);
}

/* ── settings.html ── */
.tab-selector {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-bottom: 2px solid var(--color-border);
  background: var(--color-bg);
}
.tab-select-label {
  font-size: var(--text-xs); font-weight: 700; color: var(--color-text-secondary);
  text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap;
}
.tab-select {
  min-width: 200px; padding: 8px 12px;
  border: 1.5px solid var(--color-border); border-radius: var(--radius);
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 600;
  color: var(--color-brand); background: white; cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.tab-select:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(102,126,234,0.15); }
.tab-panel { display: none; padding: 32px; }
.tab-panel.active { display: block; }
.settings-section { margin-bottom: 32px; }
.settings-section:last-child { margin-bottom: 0; }
.section-heading { font-size: var(--text-md); font-weight: 700; color: var(--color-text); margin-bottom: 4px; }
.section-subtext { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 20px; line-height: 1.5; }
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
.field input, .field select {
  width: 100%; padding: 10px 14px; border: 1.5px solid var(--color-border);
  border-radius: var(--radius); font-family: var(--font-body); font-size: var(--text-base);
  color: var(--color-text); transition: border-color var(--transition); background: white;
}
.field input:focus, .field select:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(102,126,234,0.15); }
.field-row   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field-row-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-4); }
.action-row { display: flex; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }
.btn-save {
  padding: 10px 20px; background: var(--color-brand); color: white; border: none;
  border-radius: var(--radius); font-family: var(--font-body); font-size: var(--text-base);
  font-weight: 600; cursor: pointer; transition: background var(--transition); display: inline-flex; align-items: center; gap: 7px;
}
.btn-save:hover { background: var(--color-brand-dark); }
.btn-save:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-test {
  padding: 10px 20px; background: white; color: var(--color-text-secondary);
  border: 1.5px solid var(--color-border); border-radius: var(--radius);
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 600;
  cursor: pointer; transition: all var(--transition); display: inline-flex; align-items: center; gap: 7px;
}
.btn-test:hover { border-color: var(--color-brand); color: var(--color-brand); }
.btn-test:disabled { opacity: 0.6; cursor: not-allowed; }
.result-msg { margin-top: var(--space-4); font-size: var(--text-sm); padding: 10px 14px; border-radius: var(--radius); display: none; }
.result-msg.success { display: block; background: #f0fff4; color: #276749; border: 1px solid #9ae6b4; }
.result-msg.error   { display: block; background: #fff5f5; color: #c53030; border: 1px solid #fc8181; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; margin-bottom: var(--space-5); }
.status-pill.ok  { background: #f0fff4; color: #276749; border: 1px solid #9ae6b4; }
.status-pill.err { background: #fff5f5; color: #c53030; border: 1px solid #fc8181; }
.status-pill.unk { background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4) var(--space-5); }
.toggle-row-left h4 { font-size: var(--text-base); font-weight: 600; color: var(--color-text); margin-bottom: 2px; }
.toggle-row-left p { font-size: var(--text-sm); color: var(--color-text-muted); }
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: #cbd5e0; border-radius: 24px; cursor: pointer; transition: background var(--transition); }
.toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: transform var(--transition); }
.toggle-switch input:checked + .toggle-slider { background: var(--color-brand); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
.divider { height: 1px; background: var(--color-border); border: none; margin: var(--space-8) 0; }
@media (max-width: 640px) {
  .field-row, .field-row-3 { grid-template-columns: 1fr; }
  .tab-panel { padding: 20px; }
}

/* ── error_log.html ── */
.audit-toolbar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.audit-toolbar label {
  font-size: var(--text-xs); font-weight: 600;
  color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.4px;
  display: flex; flex-direction: column; gap: 4px;
}
.audit-filter {
  padding: 7px 30px 7px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body); font-size: var(--text-sm);
  color: var(--color-text);
  background: white;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23718096' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
  cursor: pointer; min-width: 130px;
}
.audit-filter:focus { border-color: var(--color-brand); }
.audit-input {
  padding: 7px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body); font-size: var(--text-sm);
  color: var(--color-text);
  background: white;
  min-width: 160px;
}
.audit-input:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(102,126,234,0.15); }
.audit-input-date { min-width: 130px; }
.audit-count { font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; margin-left: auto; }
.td-ts    { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; width: 148px; }
.td-app   { width: 75px; }
.td-src   { width: 90px; font-size: var(--text-xs); }
.td-level { width: 75px; }
.td-user  { font-size: var(--text-sm); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-msg   { min-width: 200px; max-width: 340px; }
.td-act   { width: 90px; white-space: nowrap; }
@media (max-width: 768px) { .td-user { display: none; } }
@media (max-width: 480px) { .audit-toolbar { flex-direction: column; } .audit-input, .audit-filter { width: 100%; box-sizing: border-box; } }
.badge-ihsp     { background: #ebf8ff; color: #2b6cb0; border: 1px solid #90cdf4; font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 600; white-space: nowrap; }
.badge-chw      { background: #e6fffa; color: #276749; border: 1px solid #81e6d9; font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 600; white-space: nowrap; }
.badge-ecm      { background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 600; white-space: nowrap; }
.badge-hp       { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 600; white-space: nowrap; }
.badge-docs     { background: #fdf4ff; color: #7e22ce; border: 1px solid #e9d5ff; font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 600; white-space: nowrap; }
.badge-comms    { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 600; white-space: nowrap; }
.badge-intake   { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 600; white-space: nowrap; }
.badge-member   { background: #fff1f2; color: #9f1239; border: 1px solid #fecdd3; font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 600; white-space: nowrap; }
.badge-platform { background: #f7fafc; color: #4a5568; border: 1px solid #e2e8f0; font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 600; white-space: nowrap; }
.badge-backend  { background: #fff5f5; color: #c53030; border: 1px solid #feb2b2; font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 600; }
.badge-frontend { background: #fffaf0; color: #975a16; border: 1px solid #fbd38d; font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 600; }
.badge-error    { background: #fff5f5; color: #c53030; border: 1px solid #feb2b2; font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 600; }
.badge-warning  { background: #fffaf0; color: #975a16; border: 1px solid #fbd38d; font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 600; }
.badge-resolved { background: #f0fff4; color: #276749; border: 1px solid #9ae6b4; font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 600; }
.btn-detail {
  font-size: 11px; padding: 2px 8px; border-radius: 4px; min-height: 24px;
  border: 1px solid var(--color-border); background: var(--color-bg);
  color: var(--color-brand); cursor: pointer; font-family: var(--font-body); font-weight: 600;
}
.btn-detail:hover { background: var(--color-brand-light); }
.detail-pre {
  display: none; margin-top: 6px;
  font-size: 11px; font-family: monospace;
  background: #f7fafc; border: 1px solid var(--color-border);
  border-radius: 4px; padding: 8px 10px;
  white-space: pre-wrap; word-break: break-all;
  max-width: 340px; color: var(--color-text-secondary);
}
.detail-pre.open { display: block; }
.btn-resolve {
  font-size: 11px; padding: 3px 9px; border-radius: 4px; min-height: 24px;
  border: 1px solid #9ae6b4; background: #f0fff4;
  color: #276749; cursor: pointer; font-family: var(--font-body); font-weight: 600;
}
.btn-resolve:hover { background: #c6f6d5; }
.btn-resolve:disabled { opacity: 0.5; cursor: default; }
.pagination-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--space-6); border-top: 1px solid var(--color-border);
  gap: var(--space-3); flex-wrap: wrap;
}
.pagination-bar.hidden { display: none; }
.pagination-info { font-size: var(--text-sm); color: var(--color-text-muted); }
.pagination-controls { display: flex; align-items: center; gap: 6px; }
.page-btn {
  padding: 6px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: white; font-family: var(--font-body); font-size: var(--text-sm);
  font-weight: 600; color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition);
}
.page-btn:hover:not(:disabled) { background: var(--color-brand-light); border-color: #c3d1f7; }
.page-btn:disabled { opacity: 0.4; cursor: default; }
.page-btn.active   { background: var(--color-brand); color: white; border-color: var(--color-brand); }

/* ── audit_log.html ── */
.td-ip  { font-size: var(--text-xs); color: var(--color-text-muted); font-family: monospace; white-space: nowrap; }
.td-evt { font-size: var(--text-sm); white-space: nowrap; }
.td-rec { font-size: var(--text-xs); font-family: monospace; color: var(--color-text-muted); white-space: nowrap; }
.td-detail { min-width: 80px; }
@media (max-width: 768px) { .td-ip, .td-rec { display: none; } }
@media (max-width: 480px) { .audit-input, .audit-filter, .audit-select { width: 100%; box-sizing: border-box; } }

/* ── portal/launcher.html ── */
.knd-footer { border-top: 1px solid rgba(255,255,255,0.1); }
.knd-footer, .knd-footer a { color: rgba(255,255,255,0.5); }

/* ── verify.html — Public document verification page ── */
body.verify-page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* allow-font: standalone public page — no app shell */
  background: #f0f4f8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  color: #2d3748;
}
body.verify-page *, body.verify-page *::before, body.verify-page *::after { box-sizing: border-box; margin: 0; padding: 0; }
body.verify-page .v-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  max-width: 480px;
  width: 100%;
  padding: 2.5rem 2rem 2rem;
  text-align: center;
}
body.verify-page .v-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #e2e8f0;
}
body.verify-page .v-header img { height: 38px; width: auto; }
body.verify-page .v-header-text { text-align: left; }
body.verify-page .v-org-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #4a5568;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
body.verify-page .v-app-name { font-size: 0.72rem; color: #718096; }
body.verify-page .v-seal {
  margin: 0 auto 1.5rem;
  width: 90px; height: 90px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 0.2rem;
}
body.verify-page .v-seal--verified  { background: #f0fff4; border: 3px solid #38a169; }
body.verify-page .v-seal--unverified { background: #fff5f5; border: 3px solid #e53e3e; }
body.verify-page .v-seal--notfound  { background: #fffaf0; border: 3px solid #dd6b20; }
body.verify-page .v-seal-icon { font-size: 2.2rem; line-height: 1; }
body.verify-page .v-seal-label {
  font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
body.verify-page .v-seal--verified  .v-seal-label { color: #276749; }
body.verify-page .v-seal--unverified .v-seal-label { color: #c53030; }
body.verify-page .v-seal--notfound  .v-seal-label { color: #9c4221; }
body.verify-page .v-info-block {
  background: #f7fafc; border-radius: 8px;
  padding: 1rem 1.25rem; margin-bottom: 1.25rem; text-align: left;
}
body.verify-page .v-info-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.35rem 0; font-size: 0.88rem; border-bottom: 1px solid #e2e8f0;
}
body.verify-page .v-info-row:last-child { border-bottom: none; }
body.verify-page .v-info-label {
  font-weight: 600; color: #4a5568; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.03em;
  flex-shrink: 0; margin-right: 1rem;
}
body.verify-page .v-info-value { color: #2d3748; text-align: right; word-break: break-all; }
body.verify-page .v-status-msg { font-size: 0.88rem; color: #4a5568; line-height: 1.5; margin-bottom: 1.25rem; }
body.verify-page .v-error-note { font-size: 0.82rem; color: #718096; margin-top: 1rem; line-height: 1.5; }
body.verify-page .v-footer-note { font-size: 0.72rem; color: #a0aec0; margin-top: 1.5rem; line-height: 1.5; }

/* ── terms.html / privacy.html — Public document pages ── */
body.terms-page, body.privacy-page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* allow-font: standalone public page — no app shell */
  background: linear-gradient(160deg, #1a1a2e, #16213e, #0f3460);
  min-height: 100vh;
  padding: 40px 16px 60px;
  color: #333;
}
body.terms-page *, body.terms-page *::before, body.terms-page *::after,
body.privacy-page *, body.privacy-page *::before, body.privacy-page *::after { box-sizing: border-box; margin: 0; padding: 0; }
.doc-page-wrap { max-width: 760px; margin: 0 auto; }
.doc-header { text-align: center; margin-bottom: 32px; }
.doc-logo {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 16px; text-decoration: none;
}
.doc-logo-mark {
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.doc-logo-name { font-size: 18px; font-weight: 700; color: rgba(255,255,255,0.92); letter-spacing: -0.02em; }
.doc-title { font-size: 28px; font-weight: 800; color: white; margin-bottom: 6px; letter-spacing: -0.02em; }
.doc-meta { font-size: 13px; color: rgba(255,255,255,0.50); }
.doc-card { background: white; border-radius: 16px; padding: 40px 48px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
@media (max-width: 600px) { .doc-card { padding: 28px 20px; } }
.doc-intro { font-size: 15px; line-height: 1.7; color: #444; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid #eee; }
.doc-section { margin-bottom: 28px; }
.doc-section h2 { font-size: 16px; font-weight: 700; color: #1a1a2e; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 2px solid #f0f0f8; }
.doc-section p { font-size: 14px; line-height: 1.75; color: #555; margin-bottom: 10px; }
.doc-section p:last-child { margin-bottom: 0; }
.doc-section ul { padding-left: 20px; margin: 8px 0; }
.doc-section ul li { font-size: 14px; line-height: 1.75; color: #555; margin-bottom: 4px; }
.sms-box { background: #f5f3ff; border: 1px solid #ddd6fe; border-left: 4px solid #764ba2; border-radius: 8px; padding: 16px 20px; margin: 12px 0; }
.sms-box table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sms-box table td { padding: 6px 8px; vertical-align: top; color: #4c3d82; line-height: 1.6; }
.sms-box table td:first-child { font-weight: 700; color: #3b2a6e; white-space: nowrap; padding-right: 16px; width: 36%; }
.sms-box table tr + tr td { border-top: 1px solid #ede9fe; }
.sms-box p { font-size: 14px; line-height: 1.7; color: #4c3d82; margin-bottom: 6px; }
.sms-box p:last-child { margin-bottom: 0; }
.sms-box strong { color: #3b2a6e; }
.doc-footer { margin-top: 36px; padding-top: 20px; border-top: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.doc-footer span { font-size: 12px; color: #999; }
.doc-footer a { font-size: 12px; color: #764ba2; text-decoration: none; font-weight: 600; }
.doc-footer a:hover { text-decoration: underline; }

/* ── compliance.html — Compliance & Privacy page ── */
.cp-wrap { max-width: 860px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }
.cp-hero { text-align: center; padding: 3rem 1rem 2.5rem; border-bottom: 1px solid var(--color-border); margin-bottom: 2.5rem; }
.cp-hero-badge {
  display: inline-block; background: rgba(102,126,234,.12); color: var(--color-primary);
  font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .9rem; border-radius: 20px; border: 1px solid rgba(102,126,234,.25); margin-bottom: 1rem;
}
.cp-hero h1 { font-size: 2rem; font-weight: 700; color: var(--color-text); margin: 0 0 .75rem; }
.cp-hero p { font-size: 1.05rem; color: var(--color-text-muted); max-width: 600px; margin: 0 auto; line-height: 1.7; }
.cp-updated { font-size: .8rem; color: var(--color-text-muted); margin-top: 1rem; }
.cp-badges { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-bottom: 2.5rem; }
.cp-badge { display: flex; align-items: center; gap: .45rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: .5rem 1rem; font-size: .82rem; font-weight: 500; color: var(--color-text); }
.cp-section { border: 1px solid var(--color-border); border-radius: 10px; margin-bottom: .85rem; overflow: hidden; background: var(--color-surface); }
.cp-section summary { display: flex; align-items: center; gap: .75rem; padding: 1.05rem 1.4rem; cursor: pointer; list-style: none; user-select: none; font-weight: 600; font-size: .97rem; color: var(--color-text); transition: background .15s; }
.cp-section summary::-webkit-details-marker { display: none; }
.cp-section summary:hover { background: var(--color-bg); }
.cp-section[open] > summary { border-bottom: 1px solid var(--color-border); }
.cp-chevron { margin-left: auto; font-size: .75rem; color: var(--color-text-muted); transition: transform .2s; flex-shrink: 0; }
.cp-section[open] .cp-chevron { transform: rotate(180deg); }
.cp-body { padding: 1.4rem 1.6rem 1.6rem; color: var(--color-text); line-height: 1.75; font-size: .92rem; }
.cp-body h3 { font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--color-text-muted); margin: 1.5rem 0 .6rem; }
.cp-body h3:first-child { margin-top: 0; }
.cp-body p { margin: 0 0 .85rem; }
.cp-body p:last-child { margin-bottom: 0; }
.cp-body ul { margin: 0 0 .85rem 1.2rem; padding: 0; }
.cp-body ul li { margin-bottom: .4rem; }
.cp-body code { font-size: .82rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 4px; padding: .05rem .35rem; }
.cp-checklist { list-style: none; margin-left: 0; padding: 0; }
.cp-checklist li { padding: .3rem 0 .3rem 1.7rem; position: relative; margin-bottom: .1rem; }
.cp-checklist li::before { content: '\2713'; position: absolute; left: 0; color: #4ade80; font-weight: 700; font-size: 1rem; }
.cp-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; margin-top: .6rem; }
.cp-module { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 8px; padding: 1rem 1.1rem; }
.cp-module-name { font-weight: 600; font-size: .88rem; color: var(--color-text); margin-bottom: .35rem; }
.cp-module-desc { font-size: .81rem; color: var(--color-text-muted); line-height: 1.6; margin: 0 0 .45rem; }
.cp-phi-tag { display: inline-block; font-size: .7rem; font-weight: 500; background: rgba(251,191,36,.1); color: #b45309; border: 1px solid rgba(251,191,36,.25); border-radius: 4px; padding: .12rem .45rem; }
.cp-ref { display: inline-block; font-size: .7rem; font-weight: 600; font-family: monospace; background: rgba(102,126,234,.1); color: var(--color-primary); border: 1px solid rgba(102,126,234,.2); border-radius: 4px; padding: .1rem .4rem; margin-left: .3rem; vertical-align: middle; }
.cp-contact-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 8px; padding: 1.2rem 1.4rem; display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.2rem; }
.cp-contact-avatar { width: 44px; height: 44px; border-radius: 50%; background: rgba(102,126,234,.15); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.cp-contact-name { font-weight: 600; font-size: .95rem; margin-bottom: .1rem; }
.cp-contact-role { font-size: .8rem; color: var(--color-text-muted); margin-bottom: .4rem; }
.cp-contact-link a { color: var(--color-primary); text-decoration: none; font-size: .88rem; }
.cp-contact-link a:hover { text-decoration: underline; }
.cp-note { font-size: .82rem; color: var(--color-text-muted); margin-top: 1rem; line-height: 1.65; }
@media (max-width: 600px) {
  .cp-hero h1 { font-size: 1.5rem; }
  .cp-modules { grid-template-columns: 1fr; }
  .cp-body { padding: 1rem 1.1rem 1.2rem; }
}

/* ── Home: Today's schedule widget ── */
.schedule-list { display: flex; flex-direction: column; }
.schedule-item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.schedule-item:last-child { border-bottom: none; }
.schedule-time { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-secondary); width: 52px; flex-shrink: 0; padding-top: 2px; }
.schedule-body { flex: 1; min-width: 0; }
.schedule-name { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.schedule-meta { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.schedule-empty { padding: var(--space-5) var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; }

/* ── comms/index.html — Communications Hub widget ── */
/* ── Page dark background ── */
.comms-page {
  background: var(--color-portal-bg, linear-gradient(160deg, #1a1a2e, #16213e, #0f3460));
  min-height: 100vh;
}
.comms-page .knd-nav {
  background: rgba(10,10,30,0.80);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ── Layout ── */
.comms-layout {
  display: flex;
  height: calc(100vh - 56px);
  overflow: hidden;
}

/* ── Sidebar ── */
.comms-sidebar {
  width: 300px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-right: 1px solid rgba(255,255,255,0.10);
  display: flex;
  flex-direction: column;
  position: relative;
}
.comms-sidebar-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.comms-sidebar-title {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.90);
  letter-spacing: -0.01em;
}
.comms-sidebar-search {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.comms-search-input {
  width: 100%;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  color: rgba(255,255,255,0.90);
  padding: 7px 12px;
  font-size: 13px;
  font-family: var(--font-body, sans-serif);
  transition: border-color var(--transition-base);
  box-sizing: border-box;
}
.comms-search-input:focus  { border-color: rgba(102,126,234,0.60); }
.comms-search-input::placeholder { color: rgba(255,255,255,0.30); }

/* ── Conversation list ── */
.conv-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.conv-list-empty {
  padding: 40px 20px;
  text-align: center;
  color: rgba(255,255,255,0.30);
  font-size: 13px;
  line-height: 1.7;
}
.conv-item {
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  transition: background var(--transition-fast);
  margin-bottom: 2px;
}
.conv-item:hover     { background: rgba(255,255,255,0.07); }
.conv-item.active    { background: rgba(102,126,234,0.20); }
.conv-item.has-unread .conv-name { font-weight: 700; color: white; }
.conv-item.opted-out { opacity: 0.55; }

.conv-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: white;
}
.conv-info { flex: 1; min-width: 0; }
.conv-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 2px;
}
.conv-name {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.conv-time {
  font-size: 11px;
  color: rgba(255,255,255,0.32);
  white-space: nowrap;
  flex-shrink: 0;
}
.conv-preview {
  font-size: 12px;
  color: rgba(255,255,255,0.40);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-badge {
  display: inline-block;
  background: #667eea;
  color: white;
  border-radius: 10px;
  font-size: 10px;
  min-width: 17px;
  padding: 1px 5px;
  text-align: center;
  font-weight: 700;
  line-height: 1.4;
  flex-shrink: 0;
}
.conv-stop-chip { font-size: 10px; color: rgba(229,62,62,0.80); flex-shrink: 0; }

/* ── Swipe-to-delete (conversation rows) ── */
.conv-swipe-container {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 2px;
}
.conv-delete-bg {
  position: absolute;
  inset: 0;
  background: #c53030;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}
.conv-swipe-container.swipe-open .conv-delete-bg { opacity: 1; pointer-events: auto; }
.conv-swipe-item {
  position: relative;
  z-index: var(--z-base);
  border-radius: 10px;
  transition: transform var(--transition-base) ease-out;
}
.conv-swipe-item.conv-item { margin-bottom: 0; border-radius: 10px; }

/* ── Main panel ── */
.comms-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
  position: relative;  /* anchor mode pill */
}
.comms-empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  color: rgba(255,255,255,0.22);
}
.comms-empty-icon { font-size: 48px; opacity: 0.4; }
.comms-empty-text { font-size: 14px; }

/* ── Thread header ── */
.thread-header {
  padding: 14px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  flex-shrink: 0;
}
.thread-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: white;
}
.thread-info { flex: 1; min-width: 0; }
.thread-member-name { font-size: 15px; font-weight: 700; color: white; line-height: 1.2; }
.thread-member-meta { font-size: 12px; color: rgba(255,255,255,0.42); margin-top: 2px; }
.thread-crm-link {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(102,126,234,0.18);
  border: 1px solid rgba(102,126,234,0.32);
  color: rgba(102,126,234,0.88);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}
.thread-crm-link:hover { background: rgba(102,126,234,0.35); color: white; }
.thread-delete-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(229,62,62,0.10);
  border: 1px solid rgba(229,62,62,0.25);
  color: rgba(229,62,62,0.65);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.thread-delete-btn:hover {
  background: rgba(229,62,62,0.22);
  border-color: rgba(229,62,62,0.50);
  color: #fc8181;
}

/* ── Message bubbles ── */
.thread-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.10) transparent;
}
.msg-date-sep {
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  margin: 16px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  user-select: none;
}
.msg-row {
  display: flex;
  margin-bottom: 4px;
  animation: msgFadeIn 0.16s ease;
}
@keyframes msgFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.msg-row.outbound { flex-direction: row-reverse; }
.msg-row.inbound  { flex-direction: row; }

.msg-bubble {
  max-width: 62%;
  padding: 9px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
  word-break: break-word;
}
.msg-bubble.inbound {
  background: rgba(255,255,255,0.11);
  border: 1px solid rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.90);
  border-bottom-left-radius: 4px;
}
.msg-bubble.outbound {
  background: linear-gradient(135deg, rgba(102,126,234,0.82), rgba(118,75,162,0.82));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.16);
  color: white;
  border-bottom-right-radius: 4px;
}
.msg-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.28);
  margin-top: 3px;
  padding: 0 3px;
}
.msg-row.outbound .msg-meta { text-align: right; }
.msg-status { font-size: 10px; margin-left: 3px; opacity: 0.65; }

.msg-media { margin-top: 6px; }
.msg-media img {
  max-width: 220px; max-height: 180px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  display: block;
}

/* ── Disambiguation banner ── */
.disambig-banner {
  background: rgba(246,173,85,0.10);
  border: 1px solid rgba(246,173,85,0.26);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 8px 24px 0;
  flex-shrink: 0;
}
.disambig-banner p { color: rgba(255,255,255,0.78); font-size: 13px; margin: 0 0 10px; }
.disambig-options  { display: flex; flex-wrap: wrap; gap: 8px; }
.disambig-btn {
  padding: 5px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: white; font-size: 13px;
  cursor: pointer; transition: background var(--transition-fast);
}
.disambig-btn:hover { background: rgba(102,126,234,0.35); border-color: rgba(102,126,234,0.50); }

/* ── Opted-out bar ── */
.opted-out-bar {
  background: rgba(229,62,62,0.10);
  border: 1px solid rgba(229,62,62,0.26);
  border-radius: 10px;
  padding: 9px 16px;
  margin: 8px 24px 0;
  color: rgba(255,120,120,0.88);
  font-size: 13px;
  text-align: center;
  flex-shrink: 0;
}

/* ── Compose bar ── */
.thread-compose {
  padding: 12px 24px 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  flex-shrink: 0;
}
.compose-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.compose-input {
  flex: 1;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  color: white;
  padding: 9px 14px;
  resize: none;
  min-height: 40px;
  max-height: 110px;
  font-family: var(--font-body, sans-serif);
  font-size: 14px;
  line-height: 1.45;
  overflow-y: auto;
  transition: border-color var(--transition-base);
  box-sizing: border-box;
}
.compose-input:focus  { border-color: rgba(102,126,234,0.55); }
.compose-input::placeholder { color: rgba(255,255,255,0.28); }
.compose-input:disabled { opacity: 0.35; cursor: not-allowed; }
.compose-send-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none; color: white; font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.compose-send-btn:hover:not(:disabled) { opacity: 0.88; transform: scale(1.06); }
.compose-send-btn:disabled { opacity: 0.28; cursor: not-allowed; }
.compose-footer {
  display: flex; align-items: center; justify-content: flex-end;
  margin-top: 4px;
  font-size: 11px;
  color: rgba(255,255,255,0.26);
}
.compose-footer.warn { color: #f6ad55; }
.compose-footer.over { color: #fc8181; }

/* ── Compose actions (send + new-message stacked column) ── */
.compose-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.compose-new-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(102,126,234,0.16);
  border: 1px solid rgba(102,126,234,0.30);
  color: rgba(102,126,234,0.80);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.compose-new-btn:hover {
  background: rgba(102,126,234,0.30);
  border-color: rgba(102,126,234,0.55);
  color: white;
}
.compose-new-btn:active { transform: scale(0.95); }

/* ── New Message panel ── */
.nm-fields {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px 16px;
}
.nm-field-row { margin-bottom: 18px; }
.nm-field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 6px;
}
.nm-field-input {
  width: 100%;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: white;
  box-sizing: border-box;
  transition: border-color var(--transition-base);
}
.nm-field-input:focus { border-color: rgba(102,126,234,0.55); }
.nm-field-input::placeholder { color: rgba(255,255,255,0.28); }
.nm-error {
  display: none;
  background: rgba(245,101,101,0.12);
  border: 1px solid rgba(245,101,101,0.35);
  color: #fc8181;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 18px;
}

/* ── Mode FAB (Floating Action Button) ── */
.mode-fab {
  position: absolute;
  bottom: 82px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  z-index: 50;
  box-shadow: 0 4px 16px rgba(0,0,0,0.40);
  transition: background 0.35s ease, transform var(--transition-base) ease;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: all;
}
.mode-fab:hover { transform: scale(1.08); }
.mode-fab.call-mode {
  background: linear-gradient(135deg, #48bb78, #38a169);
}
@keyframes fabRing {
  0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.40), 0 0 0 0 rgba(72,187,120,0.55); }
  50%       { box-shadow: 0 4px 16px rgba(0,0,0,0.40), 0 0 0 14px rgba(72,187,120,0); }
}
.mode-fab.ringing {
  animation: fabRing 0.9s ease-in-out infinite;
  background: linear-gradient(135deg, #48bb78, #38a169);
}

/* ── FAB icon crossfade ── */
.fab-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  transition: opacity var(--transition-slow) ease, transform var(--transition-slow) ease;
  pointer-events: none;
}
.fab-sms  { opacity: 1; transform: scale(1); }
.fab-call { opacity: 0; transform: scale(0.6); }
.mode-fab.call-mode .fab-sms  { opacity: 0; transform: scale(0.6); }
.mode-fab.call-mode .fab-call { opacity: 1; transform: scale(1); }

/* ── 3-panel sliding track ── */
.comms-panels-track {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 300%;
  display: flex;
  /* will-change intentionally omitted — GPU compositing layers intercept touch events */
  /* transition set dynamically by JS */
}
.comms-panel {
  flex: 0 0 33.333%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Dial history button (in dial header) ── */
.dial-hist-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  color: rgba(255,255,255,0.70);
  font-size: 12px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background var(--transition-fast);
  white-space: nowrap;
}
.dial-hist-btn:hover { background: rgba(255,255,255,0.16); color: white; }

/* ── Call History panel ── */
.hist-header {
  padding: 14px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-shrink: 0;
}
.hist-back-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}
.hist-back-btn:hover { background: rgba(255,255,255,0.15); }
.hist-header-title {
  font-size: 15px;
  font-weight: 700;
  color: white;
  flex: 1;
}
.hist-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 20px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.10) transparent;
}

/* ── Dialpad panel ── */
.dial-view-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 0 24px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.10) transparent;
}
.dial-header {
  padding: 14px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  flex-shrink: 0;
}
.dial-header-title {
  font-size: 15px; font-weight: 700; color: white;
  flex: 1;
}
.dial-header-badge, .dial-mode-badge {
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(102,126,234,0.85);
  background: rgba(102,126,234,0.14); border: 1px solid rgba(102,126,234,0.28);
  border-radius: 10px; padding: 3px 9px;
}
.dial-member-wrap {
  position: relative;
  margin-top: 20px;
}
.dial-member-input {
  width: 100%;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: white;
  box-sizing: border-box;
  transition: border-color var(--transition-base);
}
.dial-member-input:focus { border-color: rgba(102,126,234,0.55); }
.dial-member-input::placeholder { color: rgba(255,255,255,0.28); }
.dial-number-display {
  text-align: center;
  font-family: monospace;
  font-size: 26px;
  font-weight: 400;
  color: white;
  letter-spacing: 0.04em;
  min-height: 44px;
  padding: 14px 8px 8px;
  opacity: 0.90;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dial-number-display.dim { color: rgba(255,255,255,0.40); font-size: 14px; font-family: inherit; letter-spacing: 0; }
.dial-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 8px 0 12px;
}
.dial-key {
  height: 56px;
  border-radius: 10px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.14);
  color: white;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dial-key:hover  { background: rgba(255,255,255,0.16); }
.dial-key:active { transform: scale(0.93); background: rgba(102,126,234,0.30); }
.dial-key.symbol { font-size: 16px; color: rgba(255,255,255,0.60); }
.dial-action-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.dial-call-btn {
  flex: 1;
  height: 52px;
  border-radius: 10px;
  background: #48bb78;
  border: none;
  color: white;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition-fast), transform 0.08s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.dial-call-btn:hover  { background: #38a169; }
.dial-call-btn:active { transform: scale(0.96); }
.dial-call-btn:disabled { background: rgba(255,255,255,0.12); cursor: not-allowed; }
.dial-backspace-btn {
  width: 52px; height: 52px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.65);
  font-size: 20px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast);
}
.dial-backspace-btn:hover { background: rgba(255,255,255,0.16); }
/* In-call strip */
.dial-incall-strip {
  background: rgba(72,187,120,0.14);
  border: 1px solid rgba(72,187,120,0.30);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.dial-incall-strip.incoming {
  background: rgba(102,126,234,0.16);
  border-color: rgba(102,126,234,0.35);
}
.dial-incall-label {
  flex: 1;
  color: #68d391;
  font-size: 13px;
  font-weight: 600;
}
.dial-incall-timer {
  font-family: monospace;
  font-size: 13px;
  color: rgba(255,255,255,0.60);
  min-width: 36px;
}
.dial-incall-btns {
  display: flex; gap: 8px; flex-shrink: 0;
}
.dial-incall-btn {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.dial-incall-btn:hover  { background: rgba(255,255,255,0.18); }
.dial-incall-btn.danger  { background: rgba(245,101,101,0.20); border-color: rgba(245,101,101,0.40); color: #fc8181; }
.dial-incall-btn.danger:hover  { background: rgba(245,101,101,0.35); }
.dial-incall-btn.answer  { background: rgba(72,187,120,0.20); border-color: rgba(72,187,120,0.50); color: #68d391; font-weight: 600; }
.dial-incall-btn.answer:hover  { background: rgba(72,187,120,0.35); }
/* Recent calls */
.dial-recent-hdr {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  padding: 8px 0 6px;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: 4px;
}
.dial-recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.dial-recent-item:hover { background: rgba(255,255,255,0.07); }
.dial-recent-dir { font-size: 16px; flex-shrink: 0; }
.dial-recent-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dial-recent-name { font-size: 13px; color: rgba(255,255,255,0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dial-recent-meta { font-size: 11px; color: rgba(255,255,255,0.38); margin-top: 1px; }
.dial-recent-dur, .dial-recent-time { font-size: 11px; color: rgba(255,255,255,0.35); white-space: nowrap; flex-shrink: 0; }
.dial-status-badge {
  font-size: 9px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 6px; flex-shrink: 0;
}
.dial-status-badge.completed { background: rgba(72,187,120,0.16); color: #68d391; border: 1px solid rgba(72,187,120,0.25); }
.dial-status-badge.no-answer { background: rgba(246,173,85,0.14); color: #f6ad55; border: 1px solid rgba(246,173,85,0.25); }
.dial-status-badge.failed    { background: rgba(245,101,101,0.14); color: #fc8181; border: 1px solid rgba(245,101,101,0.25); }
.dial-status-badge.other     { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.45); border: 1px solid rgba(255,255,255,0.12); }

/* ── Toast ── */
.comms-toast {
  position: fixed; bottom: 24px; right: 24px;
  background: rgba(20,20,40,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(102,126,234,0.38);
  border-radius: 12px;
  padding: 12px 18px;
  color: white; font-size: 13px;
  max-width: 280px;
  z-index: 9999;
  animation: toastIn 0.20s ease;
  cursor: pointer;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Panel nav arrow buttons ‹ › ──────────────────────────────────────── */
.panel-nav-btn {
  flex-shrink: 0;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: rgba(255,255,255,0.80);
  font-size: 20px;
  font-weight: 700;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.panel-nav-btn:hover { background: rgba(255,255,255,0.20); color: white; }
.panel-nav-btn:active { transform: scale(0.93); }

/* ── Incoming call floating banner (body-appended, always visible) ─────── */
.incall-banner {
  position: fixed;
  top: 72px; right: 16px;
  width: 300px;
  background: rgba(12, 20, 35, 0.97);
  border: 1px solid rgba(72,187,120,0.55);
  border-radius: 16px;
  padding: 16px;
  z-index: 9900;
  display: flex; flex-direction: column; gap: 12px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.55);
  animation: bannerSlideIn 0.35s cubic-bezier(0.4,0,0.2,1);
}
@keyframes bannerSlideIn {
  from { transform: translateY(-24px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.incall-banner-top   { display: flex; align-items: center; gap: 12px; }
.incall-banner-ring  { font-size: 26px; animation: fabRing 0.9s ease-in-out infinite; }
.incall-banner-info  { flex: 1; }
.incall-banner-title { color: #68d391; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.incall-banner-from  { color: white; font-size: 17px; font-weight: 600; margin-top: 3px; }
.incall-banner-btns  { display: flex; gap: 10px; }
.incall-banner-answer {
  flex: 1; padding: 11px; border: none; border-radius: 10px;
  background: #48bb78; color: white; font-weight: 700; font-size: 14px; cursor: pointer;
  transition: opacity var(--transition-fast);
}
.incall-banner-answer:active { opacity: 0.85; }
.incall-banner-decline {
  flex: 1; padding: 11px; border: 1px solid rgba(245,101,101,0.5); border-radius: 10px;
  background: rgba(245,101,101,0.12); color: #fc8181; font-weight: 700; font-size: 14px; cursor: pointer;
  transition: opacity var(--transition-fast);
}
.incall-banner-decline:active { opacity: 0.80; }

/* ── Hide comms FAB on non-comms pages ── */
body:not([data-page="comms"]) #cw-bubble-btn { display: none !important; }

/* ── Form label markers (used across form templates) ────────── */
.req { color:var(--color-danger); margin-left:2px; font-weight:400; }
.opt { color:var(--color-text-muted); font-weight:400; text-transform:none; letter-spacing:0; font-size:10px; }


/* ==========================================================================
   §22 ECM REDESIGN — Foundation Components (R1b)
   Added: v0.2.0 (ecm-redesign branch)
   Canonical definitions from process docs/ecm-redesign-final.html
   ========================================================================== */


/* --------------------------------------------------------------------------
   R1b-B1. KND-TAB — Canonical Tab Component
   BEM: .knd-tab__list, .knd-tab__item, .knd-tab__panel
   ARIA: role="tablist", role="tab", role="tabpanel", aria-selected (Finding #4, #8)
   -------------------------------------------------------------------------- */

.knd-tab__list {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-border);
  padding: 0 var(--space-8);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.knd-tab__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 16px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  background: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  font-family: inherit;
  transition: color var(--transition), border-color var(--transition);
}

.knd-tab__item:hover {
  color: var(--color-text);
}

.knd-tab__item--active {
  color: var(--color-brand);
  border-bottom-color: var(--color-brand);
  font-weight: 600;
}

.knd-tab__item:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* Completion indicator dots */
.knd-tab__status {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.knd-tab__status--complete { background: var(--color-success); }
.knd-tab__status--partial  { background: var(--color-warning-border); }
.knd-tab__status--empty    { background: var(--color-border); }

/* Error badge on tab */
.knd-tab__badge {
  font-size: 10px; font-weight: 700; padding: 0 5px;
  border-radius: var(--radius-pill); line-height: 16px;
  min-width: 16px; text-align: center;
}
.knd-tab__badge--error {
  background: var(--color-danger); color: #fff;
}

/* Tab panel */
.knd-tab__panel {
  display: none;
  padding: var(--space-6) var(--space-8);
}
.knd-tab__panel--active {
  display: block;
}


/* --------------------------------------------------------------------------
   R1b-B3. COMPLIANCE TIMELINE (full version — Overview tab)
   Finding #5: NOT collapsible. Finding #8: role="list" + role="listitem"
   -------------------------------------------------------------------------- */

.compliance-timeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: var(--space-6) 0;
  overflow-x: auto;
}

.compliance-timeline__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;
  position: relative;
}

.compliance-timeline__dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; border: 2px solid; z-index: var(--z-base);
}
.compliance-timeline__dot--complete { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
.compliance-timeline__dot--overdue  { background: var(--color-danger-bg);  border-color: var(--color-danger);  color: var(--color-danger); }
.compliance-timeline__dot--upcoming { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning); }
.compliance-timeline__dot--future   { background: var(--color-bg-2);       border-color: var(--color-border);  color: var(--color-text-muted); }

.compliance-timeline__label {
  font-size: var(--text-xs); color: var(--color-text-secondary);
  text-align: center; margin-top: var(--space-2); font-weight: 500;
  max-width: 100px;
}

.compliance-timeline__date {
  font-size: 10px; color: var(--color-text-muted); text-align: center;
}

.compliance-timeline__line {
  flex: 1; height: 2px; background: var(--color-border);
  align-self: center; margin-top: -14px; min-width: 20px;
}
.compliance-timeline__line--done { background: var(--color-success); }


/* --------------------------------------------------------------------------
   R1b-B4. STATUS STRIP — 32px compliance dots (Finding #5: compact header)
   -------------------------------------------------------------------------- */

.status-strip {
  height: 32px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-8);
}

.status-strip__label {
  font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 500;
  margin-right: var(--space-2);
}

.status-strip__dot {
  width: 10px; height: 10px; border-radius: 50%;
  position: relative; cursor: help;
}
.status-strip__dot--complete { background: var(--color-success); }
.status-strip__dot--upcoming { background: var(--color-warning-border); }
.status-strip__dot--overdue  { background: var(--color-danger); animation: knd-pulse-dot 1.5s infinite; }
.status-strip__dot--future   { background: var(--color-border); }

@keyframes knd-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.status-strip__connector {
  width: 24px; height: 2px; background: var(--color-border);
}

/* Tooltip (pure CSS) */
.status-strip__dot[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  background: var(--color-text); color: #fff; font-size: 11px;
  padding: 4px 8px; border-radius: var(--radius-sm); white-space: nowrap;
  margin-bottom: 6px; pointer-events: none; z-index: var(--z-sticky);
}


/* --------------------------------------------------------------------------
   R1b-B6. KND-STEPPER (enrollment wizard)
   Finding #8: aria-current="step" on active step
   -------------------------------------------------------------------------- */

.knd-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) 0;
}

.knd-stepper__step {
  display: flex; align-items: center; gap: var(--space-2);
}

.knd-stepper__circle {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: 600; border: 2px solid;
}
.knd-stepper__circle--active   { background: var(--color-brand);      color: #fff;                      border-color: var(--color-brand); }
.knd-stepper__circle--complete { background: var(--color-success-bg); color: var(--color-success);      border-color: var(--color-success); }
.knd-stepper__circle--future   { background: var(--color-bg-2);       color: var(--color-text-muted);   border-color: var(--color-border); }

.knd-stepper__label {
  font-size: var(--text-xs); font-weight: 500; color: var(--color-text-secondary);
}

.knd-stepper__connector {
  width: 32px; height: 2px; background: var(--color-border);
}
.knd-stepper__connector--done { background: var(--color-success); }


/* --------------------------------------------------------------------------
   R1b-B7. ECM STATUS BADGE VARIANTS
   3-token pattern with prefix symbols per DESIGN.md
   -------------------------------------------------------------------------- */

.status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 600;
  border: 1px solid; white-space: nowrap;
}
.status-badge.lead           { background: var(--color-info-bg);      color: var(--color-info);    border-color: var(--color-info-border); }
.status-badge.referred       { background: var(--status-referred-bg);  color: var(--status-referred); border-color: var(--status-referred-border); }
.status-badge.enrolled       { background: var(--color-success-bg);   color: var(--color-success); border-color: var(--color-success-border); }
.status-badge.closed_no_enroll,
.status-badge.closed         { background: var(--color-bg-2);         color: var(--color-text-muted); border-color: var(--color-border); }
.status-badge.disenrolled    { background: var(--color-danger-bg);    color: var(--color-danger);  border-color: var(--color-danger-border); }
.status-badge.draft          { background: var(--color-bg);           color: var(--color-text-muted); border-color: var(--color-border); }
.status-badge.pending        { background: var(--color-warning-bg);   color: var(--color-warning); border-color: var(--color-warning-border); }


/* --------------------------------------------------------------------------
   R1b-B8. PAGE HEADER + CONTEXTUAL BACK LINK (Finding #2)
   Back link lives in page header, NOT in nav
   -------------------------------------------------------------------------- */

.page-header {
  padding: var(--space-6) var(--space-8) var(--space-4);
  display: flex; align-items: center; gap: var(--space-4);
}

.page-header__back {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-sm); color: var(--color-text-muted);
  text-decoration: none;
}
.page-header__back:hover { color: var(--color-brand); text-decoration: none; }

.page-header__title {
  font-size: var(--text-xl); font-weight: 700; color: var(--color-text);
}

.page-header__actions {
  margin-left: auto; display: flex; gap: var(--space-2);
}


/* --------------------------------------------------------------------------
   R1b-B10. EMPTY STATES (Finding #10)
   Teaching CTAs, no-filter, tab empty states
   -------------------------------------------------------------------------- */

.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-8);
  color: var(--color-text-muted);
}

.empty-state__icon {
  font-size: 48px; margin-bottom: var(--space-4); opacity: 0.4;
}

.empty-state__title {
  font-size: var(--text-lg); font-weight: 600; color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.empty-state__text {
  font-size: var(--text-sm); max-width: 400px; margin: 0 auto var(--space-4);
  line-height: 1.6;
}

/* Teaching CTA steps (pipeline empty) */
.empty-state__steps {
  display: flex; justify-content: center; gap: var(--space-8);
  margin-top: var(--space-6);
}

.empty-state__step {
  text-align: center; max-width: 140px;
}

.empty-state__step-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-brand-light); color: var(--color-brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--space-2);
}

.empty-state__step-label {
  font-size: var(--text-xs); color: var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   DASHBOARD CARDS (Pipeline KPI strip)
   -------------------------------------------------------------------------- */

.dashboard-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3); padding: 0 var(--space-8) var(--space-4);
}

.dashboard-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4);
  cursor: pointer; transition: box-shadow var(--transition), border-color var(--transition);
}
.dashboard-card:hover {
  box-shadow: var(--shadow-md); border-color: var(--color-brand-border);
}

.dashboard-card__value {
  font-size: var(--text-2xl); font-weight: 700; line-height: 1.2;
}

.dashboard-card__label {
  font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px;
}

.dashboard-card--danger  { border-left: 3px solid var(--color-danger); }
.dashboard-card--danger  .dashboard-card__value { color: var(--color-danger); }
.dashboard-card--warning { border-left: 3px solid var(--color-warning-border); }
.dashboard-card--warning .dashboard-card__value { color: var(--color-warning); }
.dashboard-card--success { border-left: 3px solid var(--color-success-border); }
.dashboard-card--success .dashboard-card__value { color: var(--color-success); }
.dashboard-card--info    { border-left: 3px solid var(--color-info-border); }
.dashboard-card--info    .dashboard-card__value { color: var(--color-info); }

/* Caseload summary card (Finding #6: link, not toggle) */
.dashboard-card--caseload {
  background: var(--color-brand-light); border-color: var(--color-brand-border);
  display: flex; align-items: center; justify-content: space-between;
  grid-column: span 2;
}
.dashboard-card--caseload .dashboard-card__link {
  font-size: var(--text-xs); color: var(--color-brand); font-weight: 500;
}


/* --------------------------------------------------------------------------
   COMPLIANCE STATUS CARD (case detail Overview tab)
   -------------------------------------------------------------------------- */

.compliance-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-6);
}

.compliance-card__hero {
  grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-4);
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border);
}

.compliance-card__status { font-size: var(--text-lg); font-weight: 700; }
.compliance-card__status.on-track { color: var(--color-success); }
.compliance-card__status.at-risk  { color: var(--color-warning); }
.compliance-card__status.overdue  { color: var(--color-danger); }

.compliance-card__countdown {
  font-size: var(--text-sm); color: var(--color-text-muted);
}

.compliance-card__metric { text-align: center; }
.compliance-card__metric-value {
  font-size: var(--text-2xl); font-weight: 700; line-height: 1;
}
.compliance-card__metric-label {
  font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 4px;
}


/* --------------------------------------------------------------------------
   CONTACT LOG QUICK TEMPLATES (case detail)
   -------------------------------------------------------------------------- */

.quick-templates {
  display: flex; gap: var(--space-2); flex-wrap: wrap;
  padding-bottom: var(--space-4);
}

.quick-template-btn {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 4px 10px; font-size: var(--text-xs); font-weight: 500;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); cursor: pointer;
  color: var(--color-text-secondary); font-family: inherit;
  transition: all var(--transition);
}
.quick-template-btn:hover {
  background: var(--color-brand-light); border-color: var(--color-brand-border);
  color: var(--color-brand);
}


/* --------------------------------------------------------------------------
   FORM ENHANCEMENTS (validation, auto-calc, toolbar)
   -------------------------------------------------------------------------- */

.form-toolbar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-8);
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
}
.form-toolbar__title { font-size: var(--text-md); font-weight: 600; }
.form-toolbar__badge { margin-left: var(--space-2); }

.autosave-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); color: var(--color-success); font-weight: 500;
}
.autosave-badge__dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}

/* Error state (Finding #7) */
.form-input--error { border-color: var(--color-danger); }
.field-error {
  font-size: var(--text-xs); color: var(--color-danger); margin-top: 2px;
  transition: opacity var(--transition-base) ease; /* 200ms fade on correction */
}
.field-error.fading { opacity: 0; }

/* Read-only CRM-managed fields */
.form-input--readonly {
  background: var(--color-bg-2); color: var(--color-text-muted);
  cursor: not-allowed; border-color: var(--color-border-light);
}

/* Auto-calculated date indicator */
.auto-calc-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; color: var(--color-info); background: var(--color-info-bg);
  padding: 1px 6px; border-radius: var(--radius-pill); font-weight: 500;
}


/* --------------------------------------------------------------------------
   DAYS LEFT COLUMN (pipeline table)
   -------------------------------------------------------------------------- */

.days-left { font-weight: 600; font-size: var(--text-xs); white-space: nowrap; }
.days-left.green { color: var(--color-success); }
.days-left.amber { color: var(--color-warning); }
.days-left.red   { color: var(--color-danger); font-weight: 700; }


/* --------------------------------------------------------------------------
   KANBAN BOARD (pipeline board view)
   -------------------------------------------------------------------------- */

.kanban-board {
  display: flex; gap: var(--space-4); padding: 0 var(--space-8);
  overflow-x: auto; padding-bottom: var(--space-8);
}
.kanban-col {
  min-width: 260px; flex: 1; background: var(--color-bg-2);
  border-radius: var(--radius-lg); padding: var(--space-3);
}
.kanban-col__header {
  font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary);
  padding: var(--space-2) var(--space-3); display: flex; justify-content: space-between;
}
.kanban-col__count {
  font-size: var(--text-xs); color: var(--color-text-muted);
  background: var(--color-surface); padding: 1px 8px; border-radius: var(--radius-pill);
}
.kanban-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: var(--space-3);
  margin-top: var(--space-2); cursor: pointer;
  transition: box-shadow var(--transition);
}
.kanban-card:hover { box-shadow: var(--shadow-md); }
.kanban-card__name { font-weight: 600; font-size: var(--text-sm); margin-bottom: 4px; }
.kanban-card__meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.kanban-card__footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-light);
}

/* ==========================================================================
   §22 ECM Component Helpers (moved from inline <style> blocks)
   ========================================================================== */

/* ── Case Detail helpers ── */

/* Two-column layout (60/40) for case detail overview */
.two-col { display:grid; grid-template-columns:3fr 2fr; gap:var(--space-5); }

/* Card body — companion to .card, .card-header, .card-title */
.card-body { padding:var(--space-4) var(--space-5); }
.card-body--empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; min-height: 120px;
}
.card-body:has(.knd-empty-state) {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}

/* Key-value rows for demographic/clinical data display */
.kv-row { display:flex; justify-content:space-between; align-items:baseline; padding:var(--space-2) 0; border-bottom:1px solid var(--color-bg-2); }
.kv-row:last-child { border-bottom:none; }
.kv-label { font-size:var(--text-sm); color:var(--color-text-muted); font-weight:500; }
.kv-value { font-size:var(--text-sm); color:var(--color-text); font-weight:500; text-align:right; }
.kv-value--mono { font-family:'SFMono-Regular','Consolas',monospace; font-size:var(--text-xs); }

/* Compliance status rows (right column card) */
.compliance-row { display:flex; align-items:center; justify-content:space-between; padding:var(--space-3) 0; border-bottom:1px solid var(--color-bg-2); }
.compliance-row:last-child { border-bottom:none; }
.compliance-row__left { display:flex; flex-direction:column; gap:2px; }
.compliance-row__label { font-size:var(--text-sm); font-weight:500; color:var(--color-text); }
.compliance-row__date { font-size:var(--text-xs); color:var(--color-text-muted); }

/* Activity mini-list rows */
.activity-row { display:grid; grid-template-columns:80px 80px 1fr; gap:var(--space-3); padding:var(--space-2) 0; border-bottom:1px solid var(--color-bg-2); font-size:var(--text-sm); }
.activity-row:last-child { border-bottom:none; }
.activity-row__date { color:var(--color-text-muted); font-size:var(--text-xs); }
.activity-row__type { font-weight:500; }
.activity-row__note { color:var(--color-text-secondary); }

/* Radio option — bordered card style for enrollment wizard */
.radio-option { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius); cursor:pointer; font-size:var(--text-sm); transition:border-color var(--transition),background var(--transition); margin-bottom:var(--space-2); }
.radio-option:hover { border-color:var(--color-brand-border); background:var(--color-brand-light); }
.radio-option input[type="radio"] { accent-color:var(--color-brand); width:16px; height:16px; flex-shrink:0; }
.detail-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--color-border); font-size:var(--text-sm); }
.detail-row span:first-child { color:var(--color-text-muted); }
.log-entry { padding:12px 16px; border-bottom:1px solid var(--color-border); }
.log-entry:last-child { border-bottom:none; }
.log-meta { font-size:var(--text-xs); color:var(--color-text-muted); margin-top:4px; }
.skeleton { background:linear-gradient(90deg,var(--color-bg-2) 25%,var(--color-border-light) 50%,var(--color-bg-2) 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:var(--radius); height:16px; margin-bottom:8px; }
.skeleton--lg { height:48px; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Tab count badge ── */
.knd-tab__count {
  font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 400;
}

/* ── Compliance card structure ── */
.compliance-card__hero {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.compliance-card__status { font-weight: 700; font-size: var(--text-lg); }
.compliance-card__status.on-track { color: var(--color-success); }
.compliance-card__status.at-risk { color: var(--color-warning); }
.compliance-card__status.overdue { color: var(--color-danger); }
.compliance-card__countdown { font-size: var(--text-sm); color: var(--color-text-muted); }
.compliance-card__badge { margin-left: auto; }
.compliance-card__metric {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--text-sm);
}
.compliance-card__metric:last-child { border-bottom: none; }
.compliance-card__metric span { color: var(--color-text-muted); }
.compliance-card__metric strong { font-size: var(--text-md); }

/* ── Quick info grid ── */
.quick-info-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  margin-top: var(--space-4);
}
.quick-info-section__title {
  font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-2);
  color: var(--color-text-muted); text-transform: uppercase;
}

/* ── Tab panel header row ── */
.tab-panel-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-3);
}
.tab-panel-header h3 { font-size: var(--text-base); font-weight: 600; margin: 0; }

/* ── Form helpers ── */
.crm-readonly { background:var(--color-bg-2) !important; cursor:default !important; color:var(--color-text-muted) !important; }
select.crm-readonly { pointer-events:none; appearance:none; }
.unit-tracker { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.unit-tracker-item { text-align:center; }
.unit-tracker-value { font-size:var(--text-2xl); font-weight:700; line-height:1.2; }
.unit-tracker-value.good { color:var(--color-success); }
.unit-tracker-value.warn { color:var(--color-danger); }
.unit-tracker-label { font-size:var(--text-xs); color:var(--color-text-muted); margin-top:2px; }
.ecm-sync-bar { padding:8px var(--space-8); background:var(--color-info-bg); border-bottom:1px solid var(--color-info-border); font-size:var(--text-xs); color:var(--color-info); display:flex; align-items:center; justify-content:space-between; }
.sync-pill { font-size:var(--text-xs); font-weight:500; padding:2px 8px; border-radius:var(--radius-pill); background:var(--color-bg-2); }
.sync-pill.synced { background:var(--color-success-bg); color:var(--color-success); }
.lock-banner { padding:8px var(--space-8); background:var(--color-warning-bg); border-bottom:1px solid var(--color-warning-border); font-size:var(--text-xs); color:var(--color-warning); display:none; }
.lock-banner.visible { display:flex; align-items:center; gap:8px; }
.crm-link { font-size:var(--text-xs); color:var(--color-brand); font-weight:500; text-decoration:none; margin-left:auto; }
.crm-link:hover { text-decoration:underline; }

/* ── Pipeline helpers ── */

/* Controls bar (pipeline filters row) */
.controls-bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-8) var(--space-4); flex-wrap: wrap;
}

/* View toggle (Table / Board) — BEM variant used by ECM pipeline */
.view-toggle__btn {
  padding: 8px 14px; font-size: var(--text-base); font-weight: 500;
  border: 1px solid var(--color-border); background: var(--color-surface);
  cursor: pointer; color: var(--color-text-muted); font-family: inherit;
  transition: background var(--transition), color var(--transition);
}
.view-toggle__btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.view-toggle__btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.view-toggle__btn.active {
  background: var(--color-brand); color: #fff; border-color: var(--color-brand);
}

/* ==========================================================================
   §22 CASELOAD REDESIGN — Universal Badge System + Alert Styles
   ========================================================================== */

/* ── Universal status badges (.sb--*) ─────────────────────────────────────
   One color per semantic meaning, consistent across all programs.
   Usage: <span class="sb sb--green">Enrolled</span>
   -------------------------------------------------------------------------- */
.sb {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 600;
  border: 1px solid; white-space: nowrap; line-height: 1.5;
}
.sb--green  { background: var(--color-success-bg);  color: var(--color-success);      border-color: var(--color-success-border); }
.sb--blue   { background: var(--color-info-bg);     color: var(--color-info);         border-color: var(--color-info-border); }
.sb--amber  { background: var(--color-warning-bg);  color: var(--color-warning);      border-color: var(--color-warning-border); }
.sb--red    { background: var(--color-danger-bg);   color: var(--color-danger);       border-color: var(--color-danger-border); }
.sb--orange { background: #fff7ed;                  color: #c2410c;                   border-color: #fed7aa; }
.sb--purple { background: #faf5ff;                  color: #7e22ce;                   border-color: #d8b4fe; }
.sb--teal   { background: #f0fdfa;                  color: #0f766e;                   border-color: #99f6e4; }
.sb--gray   { background: var(--color-bg-2);        color: var(--color-text-muted);   border-color: var(--color-border); }

/* ── Program pill badges ───────────────────────────────────────────────────
   Fixed-width pill with program color. Used in "all programs" caseload view.
   -------------------------------------------------------------------------- */
.prog-pill {
  display: inline-block;
  padding: 1px 8px; border-radius: var(--radius-pill);
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap;
}
.prog-pill--ecm  { background: var(--color-info-bg);  color: var(--color-info);   border: 1px solid var(--color-info-border); }
.prog-pill--hp   { background: #f0fdfa;               color: #0f766e;             border: 1px solid #99f6e4; }
.prog-pill--ihsp { background: #faf5ff;               color: #7e22ce;             border: 1px solid #d8b4fe; }
.prog-pill--chw  { background: #fff7ed;               color: #c2410c;             border: 1px solid #fed7aa; }

/* ── Alert tier badges (.alert-badge--*) ──────────────────────────────────
   Used in the Alert column and on kanban cards.
   -------------------------------------------------------------------------- */
.alert-badge {
  display: inline-flex; align-items: center;
  padding: 3px 5px; border-radius: var(--radius-pill);
  font-size: 10px; font-weight: 700; line-height: 1;
  border: 1px solid; white-space: nowrap; cursor: default;
}
.alert-badge--urgent  { background: var(--color-danger-bg);  color: var(--color-danger);  border-color: var(--color-danger-border); }
.alert-badge--warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning-border); }
.alert-badge--info    { background: var(--color-info-bg);    color: var(--color-info);    border-color: var(--color-info-border); }

/* ── Caseload alert summary strip ─────────────────────────────────────────
   Horizontal bar above the table with clickable filter chips.
   -------------------------------------------------------------------------- */
.caseload-alert-strip {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) 0 var(--space-3);
  flex-wrap: wrap;
}
.caseload-alert-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 600;
  border: 1px solid; cursor: pointer;
  transition: opacity var(--transition), box-shadow var(--transition);
}
.caseload-alert-chip:hover { opacity: 0.85; box-shadow: var(--shadow-sm); }
.caseload-alert-chip.active { box-shadow: 0 0 0 2px var(--color-brand); }
.caseload-alert-chip--urgent  { background: var(--color-danger-bg);  color: var(--color-danger);  border-color: var(--color-danger-border); }
.caseload-alert-chip--warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning-border); }
.caseload-alert-chip--total   { background: var(--color-bg-2);       color: var(--color-text-secondary); border-color: var(--color-border); }
.caseload-alert-chip--prog    { background: var(--color-bg);         color: var(--color-text-muted);     border-color: var(--color-border); }

/* ── Caseload table row states ─────────────────────────────────────────────
   Keyboard navigation highlight + urgent row tint.
   -------------------------------------------------------------------------- */
.caseload-row { cursor: pointer; transition: background var(--transition); }
.caseload-row:hover { background: var(--color-bg-2); }
.caseload-row.is-focused { background: var(--color-brand-light); outline: 2px solid var(--color-brand); outline-offset: -2px; }
.caseload-row.alert-urgent { border-left: 3px solid var(--color-danger); }
.caseload-row.alert-warning { border-left: 3px solid var(--color-warning); }

/* ── Alert tooltip ─────────────────────────────────────────────────────────
   Hover tooltip showing all alert messages for a row.
   -------------------------------------------------------------------------- */
.alert-col { position: relative; overflow: visible; }
.alert-tooltip {
  display: none; position: absolute; z-index: var(--z-tooltip);
  top: calc(100% + 4px); right: 0;
  min-width: 220px; max-width: 300px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: var(--space-2) var(--space-3); font-size: var(--text-xs);
}
.alert-col:hover .alert-tooltip { display: block; }
.alert-tooltip-item { padding: 3px 0; color: var(--color-text-secondary); }
.alert-tooltip-item.urgent  { color: var(--color-danger); }
.alert-tooltip-item.warning { color: var(--color-warning); }
.alert-tooltip-item.info    { color: var(--color-info); }

/* ── ECM # monospace cell ──────────────────────────────────────────────────*/
.ecm-no-cell {
  font-family: 'Courier New', monospace; font-size: 11px;
  color: var(--color-text-secondary); letter-spacing: 0.02em;
}

/* ── Kanban mini badge (card footer, per design/kanban.html spec) ──────────*/
.mini-badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-pill); border: 1px solid; }
.mini-badge.urgent   { background: var(--color-danger-bg);    color: var(--color-danger);    border-color: var(--color-danger-border); }
.mini-badge.unsigned { background: var(--status-unsigned-bg); color: var(--status-unsigned); border-color: var(--status-unsigned-border); }
.mini-badge.signed   { background: var(--status-signed-bg);   color: var(--status-signed);   border-color: var(--status-signed-border); }
.mini-badge.info     { background: var(--color-info-bg);      color: var(--color-info);      border-color: var(--color-info-border); }

/* ── Kanban card alert badge (deprecated — use mini-badge) ─────────────────*/
.kanban-card-alert { font-size: 11px; font-weight: 700; }
.kanban-card-alert.urgent  { color: var(--color-danger); }
.kanban-card-alert.warning { color: var(--color-warning); }

/* ── Urgent kanban column ──────────────────────────────────────────────────*/
.kanban-col.urgent .kanban-col-header { background: var(--color-danger-bg); border-color: var(--color-danger-border); }
.kanban-col.urgent .kanban-col-title  { color: var(--color-danger); }
.kanban-col.urgent .kanban-col-count  { background: var(--color-danger-border); color: var(--color-danger); }

/* ==========================================================================
   §22 ECM Pipeline — page-specific styles (moved from pipeline.html inline block)
   ========================================================================== */

/* ── Tab nav ── */
.pipeline-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid var(--color-border); }
.pipeline-tab {
  padding: 8px 20px; font-size: 13px; font-weight: 500;
  background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -2px; cursor: pointer;
  color: var(--color-text-muted); transition: color var(--transition-base);
}
.pipeline-tab.active { color: var(--color-brand); border-bottom-color: var(--color-brand); }
.pipeline-tab .tab-count {
  display: inline-block; margin-left: 6px;
  background: var(--color-surface-alt); color: var(--color-text-muted);
  border-radius: 10px; padding: 0 7px; font-size: 11px; font-weight: 600;
}
.pipeline-tab.active .tab-count { background: var(--color-brand-soft); color: var(--color-brand-dark); }

/* ── Kanban card — overdue badge ── */
.kanban-card__overdue { font-size: 10px; background: var(--color-danger-bg); color: var(--color-danger); border-radius: 8px; padding: 1px 6px; }

/* ── Kanban column — needs-attention variant ── */
.kanban-col--needs-attention .kanban-col__header { border-bottom-color: var(--color-danger); color: var(--color-danger); }
.kanban-col--needs-attention .kanban-col__count { background: var(--color-danger-bg); color: var(--color-danger); }

/* ── Pipeline terminal section (graduated/discharged cases) ── */
.pipeline-terminal { margin-top: 16px; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.pipeline-terminal summary {
  cursor: pointer; padding: 10px 16px; font-size: 12px; font-weight: 500;
  color: var(--color-text-muted); background: var(--color-surface);
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.pipeline-terminal summary::-webkit-details-marker { display: none; }
.pipeline-terminal summary .term-count { background: var(--color-surface-alt); border-radius: 10px; padding: 1px 7px; font-size: 11px; }
.pipeline-terminal__board { display: flex; gap: 12px; padding: 12px 16px; overflow-x: auto; }
.pipeline-terminal__col { min-width: 200px; }
.pipeline-terminal__col-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 8px; }

/* ==========================================================================
   §22 ECM Form Wizard — page-specific styles (moved from form.html inline block)
   ========================================================================== */

/* ── ECM form utility classes (extracted from repeated inline styles) ── */
.ecm-checkbox-row    { display:flex; align-items:center; gap:var(--space-2); padding-top:4px; }
.ecm-label-clickable { font-size:var(--text-xs); cursor:pointer; }
.ecm-btn-row         { display:flex; justify-content:space-between; gap:10px; margin-top:var(--space-4); }
.ecm-btn-row-end     { display:flex; justify-content:flex-end; margin-top:var(--space-3); }
.ecm-empty-hint      { padding:var(--space-3) 0; color:var(--color-text-muted); font-size:var(--text-xs); }
.ecm-section-label   { font-size:var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--color-text-muted); }

.ecm-wrap { display:flex; min-height:calc(100vh - var(--nav-height,56px)); background:var(--color-bg); }
.ecm-sidebar {
  width:220px; flex-shrink:0;
  background:var(--color-surface);
  border-right:1px solid var(--color-border);
  display:flex; flex-direction:column;
  position:sticky; top:var(--nav-height,56px);
  height:calc(100vh - var(--nav-height,56px));
  overflow-y:auto;
}
.ecm-banner { padding:18px 14px 14px; border-bottom:1px solid var(--color-border); }
.ecm-banner-avatar {
  width:38px; height:38px; border-radius:50%;
  background:var(--color-brand-gradient);
  color:#fff; font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:10px;
}
.ecm-banner-name { font-weight:600; font-size:13px; color:var(--color-text); line-height:1.3; }
.ecm-banner-meta { font-size:11px; color:var(--color-text-muted); margin-top:2px; font-family:monospace; }
.ecm-banner-badge { margin-top:8px; }
.ecm-nav { padding:10px 0; flex:1; }
.ecm-nav-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; cursor:pointer;
  font-size:12px; color:var(--color-text-secondary);
  border-left:3px solid transparent;
  transition:background .15s;
  user-select:none;
}
.ecm-nav-item:hover:not(.locked) { background:var(--color-bg); color:var(--color-text); }
.ecm-nav-item.active {
  background:var(--color-brand-light); color:var(--color-brand);
  border-left-color:var(--color-brand); font-weight:600;
}
.ecm-nav-item.done .ecm-nav-num { background:var(--color-success); color:#fff; }
.ecm-nav-item.locked { cursor:not-allowed; opacity:.5; }
.ecm-nav-num {
  width:22px; height:22px; border-radius:50%;
  background:var(--color-border); color:var(--color-text-muted);
  font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:background .2s, color .2s;
}
.ecm-nav-item.active .ecm-nav-num { background:var(--color-brand); color:#fff; }
.ecm-nav-label { flex:1; }
.ecm-nav-icon { font-size:10px; color:var(--color-text-muted); }
.ecm-nav-divider { margin:6px 14px; border:none; border-top:1px solid var(--color-border); }
.ecm-nav-billing {
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; cursor:pointer;
  font-size:11px; color:var(--color-text-muted);
  font-style:italic; border-left:3px solid transparent;
  transition:background .15s;
}
.ecm-nav-billing:hover { background:var(--color-bg); }
.ecm-nav-billing.active { background:var(--color-brand-light); color:var(--color-brand); border-left-color:var(--color-brand); font-weight:600; }
.ecm-field-guide { border-top:1px solid var(--color-border); }
.ecm-field-guide-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 14px; cursor:pointer; user-select:none;
  font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--color-text-muted);
}
.ecm-field-guide-header:hover { background:var(--color-bg); }
.ecm-field-guide-chevron { font-size:9px; transition:transform .2s; }
.ecm-field-guide.open .ecm-field-guide-chevron { transform:rotate(180deg); }
.ecm-field-guide-body { display:none; padding:0 0 10px; }
.ecm-field-guide.open .ecm-field-guide-body { display:block; }
.ecm-fg-step { font-size:10px; font-weight:600; color:var(--color-brand); letter-spacing:.04em; text-transform:uppercase; padding:6px 14px 4px; }
.ecm-fg-item { padding:5px 14px; }
.ecm-fg-name { font-size:11px; font-weight:600; color:var(--color-text); line-height:1.3; }
.ecm-fg-desc { font-size:11px; color:var(--color-text-muted); line-height:1.4; margin-top:1px; font-style:italic; }
.ecm-fg-required { font-size:9px; font-weight:600; color:var(--color-danger); margin-left:3px; text-transform:uppercase; letter-spacing:.04em; }
.ecm-fg-divider { height:1px; background:var(--color-border); margin:4px 14px; opacity:.5; }
.ecm-main { flex:1; padding:28px 32px; overflow-y:auto; max-width:900px; }
.ecm-step-label { font-size:11px; font-weight:600; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.ecm-step-title { font-size:20px; font-weight:700; color:var(--color-text); margin-bottom:4px; }
.ecm-step-sub { font-size:13px; color:var(--color-text-muted); margin-bottom:20px; }
.form-input[readonly], .form-select[disabled] { background:var(--color-bg); color:var(--color-text-secondary); cursor:default; }
.ecm-readonly-badge {
  display:inline-block; font-size:10px; font-weight:600;
  padding:1px 6px; border-radius:var(--radius-pill);
  background:var(--color-bg); color:var(--color-text-muted);
  border:1px solid var(--color-border); margin-left:4px;
}
.ecm-crm-link { font-size:11px; color:var(--color-brand); margin-top:3px; }
.form-input.auto-computed { background:var(--color-brand-light); color:var(--color-brand-dark); border-color:var(--color-brand-border); font-style:italic; }
.ecm-milestone-grid { display:flex; flex-direction:column; gap:6px; }
.ecm-milestone-row {
  display:grid; grid-template-columns:1fr 130px 130px 90px;
  align-items:start; gap:12px;
  padding:8px 12px; border-radius:var(--radius);
  background:var(--color-surface); border:1px solid var(--color-border);
  font-size:12px;
}
.ecm-milestone-label { font-weight:500; color:var(--color-text); }
.ecm-milestone-desc { font-size:11px; color:var(--color-text-muted); font-style:italic; margin-top:2px; line-height:1.4; }
.ecm-milestone-date { color:var(--color-text-muted); font-family:monospace; font-size:11px; padding-top:2px; }
.ecm-gate-banner {
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:var(--radius);
  background:var(--color-warning-bg); border:1px solid var(--color-warning-border);
  color:var(--color-warning); font-size:12px; margin-bottom:16px;
}
.ecm-card {
  border:1px solid var(--color-border); border-radius:var(--radius-lg);
  background:var(--color-surface); margin-bottom:12px;
  overflow:visible;
}
.ecm-card-header { display:flex; align-items:center; gap:10px; padding:12px 16px; cursor:pointer; user-select:none; }
.ecm-card-header:hover { background:var(--color-bg); border-radius:var(--radius-lg); }
.ecm-card.open .ecm-card-header { border-bottom:1px solid var(--color-border); border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.ecm-card-body { display:none; padding:16px; }
.ecm-card.open .ecm-card-body { display:block; }
.ecm-card-chevron { margin-left:auto; font-size:11px; color:var(--color-text-muted); transition:transform .2s; }
.ecm-card.open .ecm-card-chevron { transform:rotate(180deg); }
.ecm-card-title { font-size:13px; font-weight:600; color:var(--color-text); }
.ecm-card-meta { font-size:11px; color:var(--color-text-muted); margin-left:4px; }
.ecm-tag { font-size:10px; font-weight:600; padding:2px 7px; border-radius:var(--radius-pill); border:1px solid; }
.ecm-tag-enrollment { background:var(--color-brand-light); color:var(--color-brand); border-color:var(--color-brand-border); }
.ecm-tag-annual { background:var(--color-success-bg); color:var(--color-success); border-color:var(--color-success-border); }
.ecm-tag-reassessment { background:var(--color-warning-bg); color:var(--color-warning); border-color:var(--color-warning-border); }
.ecm-tag-not-started { background:var(--color-bg); color:var(--color-text-muted); border-color:var(--color-border); }
.ecm-tag-in-progress { background:var(--color-warning-bg); color:var(--color-warning); border-color:var(--color-warning-border); }
.ecm-tag-completed { background:var(--color-success-bg); color:var(--color-success); border-color:var(--color-success-border); }
.ecm-tag-achieved { background:var(--color-success-bg); color:var(--color-success); border-color:var(--color-success-border); }
.ecm-tag-discontinued { background:var(--color-danger-bg,#fff5f5); color:var(--color-danger); border-color:var(--color-danger); }
.ecm-tag-health { background:#ebf8ff; color:#2b6cb0; border-color:#bee3f8; }
.ecm-tag-housing { background:#f0fff4; color:#276749; border-color:#c6f6d5; }
.ecm-tag-behavioral { background:#faf5ff; color:#553c9a; border-color:#d6bcfa; }
.ecm-tag-social { background:#fffaf0; color:#7b341e; border-color:#fbd38d; }
.ecm-tag-employment { background:#e6fffa; color:#1d4044; border-color:#81e6d9; }
.ecm-tag-other { background:var(--color-bg); color:var(--color-text-muted); border-color:var(--color-border); }
.status-badge.ecm-created      { background:var(--color-bg);                  color:var(--color-text-muted); border-color:var(--color-border); }
.status-badge.ecm-eligible     { background:var(--color-info-bg);             color:var(--color-info);       border-color:var(--color-info-border); }
.status-badge.ecm-interested   { background:var(--color-warning-bg);          color:var(--color-warning);    border-color:var(--color-warning-border); }
.status-badge.ecm-not-interested { background:var(--color-danger-bg,#fff5f5); color:var(--color-danger);     border-color:var(--color-danger); }
.status-badge.ecm-enrolled     { background:var(--color-success-bg);          color:var(--color-success);    border-color:var(--color-success-border); }
.ecm-log-table { width:100%; border-collapse:collapse; font-size:12px; }
.ecm-log-table th { padding:6px 10px; text-align:left; font-weight:600; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--color-text-muted); border-bottom:2px solid var(--color-border); }
.ecm-log-table td { padding:7px 10px; border-bottom:1px solid var(--color-border); color:var(--color-text); }
.ecm-log-table tr:last-child td { border-bottom:none; }
.ecm-log-table tr:hover td { background:var(--color-bg); }
.ecm-monthly-table { width:100%; border-collapse:collapse; font-size:12px; }
.ecm-monthly-table th { padding:6px 8px; text-align:left; font-weight:600; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--color-text-muted); border-bottom:2px solid var(--color-border); background:var(--color-bg); }
.ecm-monthly-table td { padding:7px 8px; border-bottom:1px solid var(--color-border); }
.ecm-monthly-table tr:hover td { background:var(--color-bg); }
.ecm-upload-area {
  border:2px dashed var(--color-border); border-radius:var(--radius);
  padding:20px; text-align:center; cursor:pointer;
  color:var(--color-text-muted); font-size:12px;
  transition:border-color .2s, background .2s;
}
.ecm-upload-area:hover { border-color:var(--color-brand); background:var(--color-brand-light); }
.ecm-file-list { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.ecm-file-item { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:var(--radius); background:var(--color-bg); border:1px solid var(--color-border); font-size:12px; }
.ecm-file-name { flex:1; color:var(--color-text); font-size:12px; }
.ecm-file-size { color:var(--color-text-muted); font-size:11px; }
.ecm-section-label {
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--color-text-muted);
  margin:18px 0 10px; padding-bottom:6px;
  border-bottom:1px solid var(--color-border);
}
.badge-green { background:var(--color-success-bg); color:var(--color-success); border-color:var(--color-success-border); }
.badge-amber { background:var(--color-warning-bg); color:var(--color-warning); border-color:var(--color-warning-border); }
.badge-red   { background:var(--color-danger-bg,#fff5f5); color:var(--color-danger); border-color:var(--color-danger); }
.badge-grey  { background:var(--color-bg); color:var(--color-text-muted); border-color:var(--color-border); }
.ecm-empty-state {
  padding:40px 20px; text-align:center;
  color:var(--color-text-muted); font-size:13px;
  background:var(--color-bg); border-radius:var(--radius-lg);
  border:1px dashed var(--color-border); margin-bottom:16px;
}
.ecm-empty-state-icon { font-size:28px; margin-bottom:8px; display:block; }
.ecm-warn-banner {
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 14px; border-radius:var(--radius);
  background:var(--color-danger-bg,#fff5f5);
  border:1px solid var(--color-danger);
  color:var(--color-danger); font-size:12px; margin-bottom:14px;
}
.ecm-internal-badge {
  font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; padding:1px 5px;
  border-radius:var(--radius-pill);
  background:var(--color-warning-bg); color:var(--color-warning);
  border:1px solid var(--color-warning-border);
}
@media (max-width:768px) {
  .ecm-wrap { flex-direction:column; }
  .ecm-sidebar { width:100%; height:auto; position:relative; top:0; flex-direction:row; overflow-x:auto; overflow-y:hidden; border-right:none; border-bottom:1px solid var(--color-border); }
  .ecm-banner { display:none; }
  .ecm-nav { display:flex; flex-direction:row; padding:4px 0; }
  .ecm-nav-item { flex-direction:column; align-items:center; padding:6px 10px; gap:4px; border-left:none; border-bottom:3px solid transparent; }
  .ecm-nav-item.active { border-bottom-color:var(--color-brand); border-left-color:transparent; }
  .ecm-nav-label { font-size:9px; white-space:nowrap; }
  .ecm-main { padding:16px; }
  .form-grid, .form-grid-3 { grid-template-columns:1fr; }
}

/* ── Docs 6-step EHR wizard ────────────────────────────────────────────────── */
.docs-wrap { display:flex; min-height:calc(100vh - var(--nav-height,56px)); background:var(--color-bg); max-width:none; margin:0; padding:0; }

.docs-sidebar {
  width:240px; flex-shrink:0;
  background:var(--color-surface);
  border-right:1px solid var(--color-border);
  display:flex; flex-direction:column;
  position:sticky; top:var(--nav-height,56px);
  height:calc(100vh - var(--nav-height,56px));
  overflow-y:auto;
}

/* Member card in sidebar */
.docs-banner {
  padding:18px 14px 14px;
  border-bottom:1px solid var(--color-border);
  min-height:80px;
}
.docs-banner-avatar {
  width:40px; height:40px; border-radius:50%;
  background:var(--color-brand-gradient);
  color:#fff; font-size:15px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:10px;
}
.docs-banner-avatar.empty { background:var(--color-border); color:var(--color-text-muted); }
.docs-banner-name { font-weight:600; font-size:13px; color:var(--color-text); line-height:1.3; }
.docs-banner-meta { font-size:11px; color:var(--color-text-muted); margin-top:2px; font-family:monospace; }
.docs-banner-status { margin-top:8px; }

/* Step navigation */
.docs-nav { padding:10px 0; }
.docs-nav-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; cursor:pointer;
  font-size:12px; color:var(--color-text-secondary);
  border-left:3px solid transparent;
  transition:background .15s;
  user-select:none;
}
.docs-nav-item:hover:not(.locked) { background:var(--color-bg); color:var(--color-text); }
.docs-nav-item.active {
  background:var(--color-brand-light); color:var(--color-brand);
  border-left-color:var(--color-brand); font-weight:600;
}
.docs-nav-item.done .docs-nav-num { background:var(--color-success); color:#fff; }
.docs-nav-item.locked { cursor:not-allowed; opacity:.5; pointer-events:none; }
.docs-nav-num {
  width:22px; height:22px; border-radius:50%;
  background:var(--color-border); color:var(--color-text-muted);
  font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:background .2s, color .2s;
}
.docs-nav-item.active .docs-nav-num { background:var(--color-brand); color:#fff; }
.docs-nav-label { flex:1; }
.docs-nav-divider { margin:4px 14px; border:none; border-top:1px solid var(--color-border); }

/* Form mini-list in sidebar (steps 3-6) */
.docs-form-mini-list { padding-bottom:10px; }
.docs-form-mini-label {
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--color-text-muted); padding:8px 14px 4px;
}
.docs-form-mini-item {
  display:flex; align-items:center; gap:8px;
  padding:6px 14px; cursor:pointer; font-size:11px;
  color:var(--color-text-secondary);
  border-left:3px solid transparent;
  transition:background .12s;
}
.docs-form-mini-item:hover { background:var(--color-bg); }
.docs-form-mini-item.active {
  background:var(--color-brand-light); color:var(--color-brand);
  border-left-color:var(--color-brand); font-weight:600;
}
.docs-form-mini-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  background:var(--color-border);
}
.docs-form-mini-dot.dot-complete,
.docs-form-mini-dot.dot-signed   { background:var(--color-success); }
.docs-form-mini-dot.dot-in_progress { background:var(--color-warning); }
.docs-form-mini-dot.dot-not_started { background:var(--color-border); }

/* Main content area */
.docs-main { flex:1; padding:28px 32px; overflow-y:auto; max-width:960px; }
.docs-step { /* visible when active */ }

/* Step header */
.docs-step-header { margin-bottom:24px; }

/* Locked field badge (CRM pre-filled) */
.docs-locked-badge {
  display:inline-flex; align-items:center; gap:3px;
  font-size:10px; font-weight:600;
  padding:1px 7px; border-radius:var(--radius-pill);
  background:var(--color-bg); color:var(--color-text-muted);
  border:1px solid var(--color-border); margin-left:6px;
}

/* Send step form cards */
.docs-send-card {
  border:1px solid var(--color-border); border-radius:var(--radius-lg);
  background:var(--color-surface); margin-bottom:12px; padding:14px 16px;
}
.docs-send-card-title { font-size:13px; font-weight:600; color:var(--color-text); margin-bottom:8px; }
.docs-send-row { display:flex; align-items:center; gap:10px; margin-bottom:6px; font-size:12px; }
.docs-send-label { color:var(--color-text-muted); width:70px; flex-shrink:0; }

/* Review step */
.docs-review-card {
  border:1px solid var(--color-border); border-radius:var(--radius-lg);
  background:var(--color-surface); margin-bottom:12px; overflow:hidden;
}
.docs-review-card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; border-bottom:1px solid var(--color-border);
  background:var(--color-bg);
}
.docs-review-card-title { font-size:13px; font-weight:600; color:var(--color-text); }
.docs-review-card-body { padding:14px 16px; }
.docs-review-diff { display:grid; grid-template-columns:1fr 1fr; gap:16px; font-size:12px; }
.docs-review-col-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-muted); margin-bottom:6px; }
.docs-review-field { margin-bottom:8px; }
.docs-review-field-name { font-weight:600; color:var(--color-text); }
.docs-review-field-val { color:var(--color-text-secondary); margin-top:1px; }

/* Step footer nav bar */
.docs-step-footer {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:28px; padding-top:20px;
  border-top:1px solid var(--color-border);
}

/* Complete step */
.docs-complete-section {
  border:1px solid var(--color-border); border-radius:var(--radius-lg);
  background:var(--color-surface); padding:20px; margin-bottom:16px;
}
.docs-complete-section-title { font-size:13px; font-weight:700; color:var(--color-text); margin-bottom:14px; }
.docs-sig-form-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0; border-bottom:1px solid var(--color-border); font-size:12px;
}
.docs-sig-form-row:last-child { border-bottom:none; }

@media (max-width:768px) {
  .docs-wrap { flex-direction:column; }
  .docs-sidebar { width:100%; height:auto; position:relative; top:0; flex-direction:row; overflow-x:auto; overflow-y:hidden; border-right:none; border-bottom:1px solid var(--color-border); }
  .docs-banner { display:none; }
  .docs-form-mini-list { display:none !important; }
  .docs-nav { display:flex; flex-direction:row; padding:4px 0; flex:1; }
  .docs-nav-item { flex-direction:column; align-items:center; padding:6px 8px; gap:3px; border-left:none; border-bottom:3px solid transparent; }
  .docs-nav-item.active { border-bottom-color:var(--color-brand); border-left-color:transparent; }
  .docs-nav-label { font-size:9px; white-space:nowrap; }
  .docs-main { padding:16px; }
  .docs-review-diff { grid-template-columns:1fr; }
}

/* ─────────────────────────────────────────────────────────────
   §22 Settings page (.st-*)
   ───────────────────────────────────────────────────────────── */

/* ── Settings layout ─────────────────────────────────────── */
.st-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-6) var(--space-10);
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

/* ── Sidebar nav ─────────────────────────────────────────── */
.st-nav {
  flex: 0 0 200px;
  position: sticky;
  top: calc(var(--nav-height) + var(--space-6));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) 0;
  overflow: hidden;
}
.st-nav-group {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  padding: var(--space-4) var(--space-4) var(--space-2);
}
.st-nav-group + .st-nav-group { border-top: 1px solid var(--color-border); margin-top: var(--space-2); padding-top: var(--space-4); }
.st-nav-item {
  display: block;
  width: 100%;
  padding: 8px var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
  border-radius: 0;
}
.st-nav-item:hover  { background: var(--color-bg); color: var(--color-text); }
.st-nav-item.active { background: var(--color-brand-tint); color: var(--color-brand); font-weight: 600; }
.st-nav-admin-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-warning);
  background: var(--color-warning-bg, #fffbeb);
  border: 1px solid var(--color-warning-border, #fcd34d);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ── Content area ────────────────────────────────────────── */
.st-content { flex: 1; min-width: 0; }
.st-panel { display: none; }
.st-panel.active { display: block; }

/* ── Panel header ────────────────────────────────────────── */
.st-panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.st-panel-title { font-size: var(--text-xl); font-weight: 700; color: var(--color-text); }
.st-panel-sub   { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 2px; }

/* ── Section ─────────────────────────────────────────────── */
.st-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.st-section-title {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.st-field { margin-bottom: var(--space-4); }
.st-field:last-child { margin-bottom: 0; }
.st-field label { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-secondary); margin-bottom: 4px; }
.st-field input[type=text],
.st-field input[type=email],
.st-field input[type=password] {
  width: 100%;
  max-width: 420px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-bg);
}
.st-field input:read-only { opacity: .6; cursor: not-allowed; }
.st-field-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.st-field-row .st-field { flex: 1; min-width: 120px; }
.st-field-row .st-field input { max-width: 100%; }
.st-action-row { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }
.st-result { margin-top: var(--space-3); font-size: var(--text-sm); }
.st-result.ok  { color: var(--color-success); }
.st-result.err { color: var(--color-danger); }

/* ── Profile field (read-only display) ───────────────────── */
.st-profile-meta { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 2px; }
.st-profile-value { font-size: var(--text-sm); color: var(--color-text); font-weight: 500; }
.st-access-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.st-access-label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); width: 100px; flex-shrink: 0; }

/* ── Apps table ──────────────────────────────────────────── */
.st-apps-table { width: 100%; border-collapse: collapse; }
.st-apps-table th {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-muted); padding: 8px 12px; border-bottom: 1px solid var(--color-border);
  text-align: left;
}
.st-apps-table td { padding: 10px 12px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.st-apps-table tr:last-child td { border-bottom: none; }
.st-app-name { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.st-app-desc { font-size: 11px; color: var(--color-text-muted); }
.st-app-drawer { display: none; background: var(--color-bg); border-top: 1px solid var(--color-border); }
.st-app-drawer.open { display: table-row; }
.st-app-drawer-inner { padding: var(--space-4) var(--space-5); }
.st-app-drawer-inner .st-field { max-width: 100%; }
.toggle-switch { position: relative; display: inline-block; width: 40px; height: 24px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; cursor: pointer; background: var(--color-border); border-radius: 24px; transition: .2s; }
.toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: .2s; }
.toggle-switch input:checked + .toggle-slider { background: var(--color-success); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(16px); }

/* ── Users & Roles table ─────────────────────────────────── */
.st-users-table { width: 100%; border-collapse: collapse; }
.st-users-table th { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); padding: 8px 12px; border-bottom: 1px solid var(--color-border); text-align: left; }
.st-users-table td { padding: 10px 12px; border-bottom: 1px solid var(--color-border); vertical-align: middle; font-size: var(--text-sm); }
.st-users-table tr:last-child td { border-bottom: none; }
.st-users-table tr:hover td { background: var(--color-bg); cursor: pointer; }
.st-role-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-brand-tint); color: var(--color-brand); }
.st-role-badge.admin { background: #ede9fe; color: #5b21b6; }
.st-role-badge.super { background: #fef3c7; color: #92400e; }

/* ── RBAC side drawer ─────────────────────────────────────── */
.st-drawer-overlay { display: none; position: fixed; inset: 0; z-index: var(--z-tooltip); }
.st-drawer-overlay.open { display: block; }
.st-drawer-overlay-bg { position: absolute; inset: 0; background: rgba(0,0,0,.3); }
.st-drawer {
  position: absolute; right: 0; top: 0; bottom: 0; width: 360px;
  background: var(--color-surface); box-shadow: -4px 0 24px rgba(0,0,0,.15);
  overflow-y: auto; padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.st-drawer-title { font-size: var(--text-lg); font-weight: 700; }
.st-drawer-close { margin-left: auto; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--color-text-muted); padding: 0 4px; }
.st-drawer-header { display: flex; align-items: center; gap: var(--space-3); }

/* ── Compliance progress ──────────────────────────────────── */
.st-compliance-track { margin-bottom: var(--space-3); }
.st-compliance-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: 4px; }
.st-compliance-name { font-size: var(--text-sm); color: var(--color-text); flex: 1; }
.st-compliance-score { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); width: 60px; text-align: right; white-space: nowrap; }
.st-progress-bar { flex: 0 0 120px; height: 6px; background: var(--color-border); border-radius: 3px; overflow: hidden; }
.st-progress-fill { height: 100%; border-radius: 3px; transition: width .3s; /* allow-jank: progress bar visual fill */ }
.st-progress-fill.ok   { background: var(--color-success); }
.st-progress-fill.warn { background: var(--color-warning, #f59e0b); }
.st-progress-fill.crit { background: var(--color-danger); }

/* ── Phase banner ─────────────────────────────────────────── */
.st-phase-banner {
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  border: 1px solid #c4b5fd;
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  color: #4c1d95;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}


/* =============================================================================
   §25 Landing page — public homepage (knd-landing-* prefix, standalone)
   Uses the portal dark theme (--color-portal-bg + brand accents) per DESIGN.md §7.
   Colors: portal-bg background, rgba glass cards, brand gradient accents.
   ============================================================================= */

/* ── Keyframe ──────────────────────────────────────────────────────────────── */
@keyframes lp-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Full page wrapper ─────────────────────────────────────────────────────── */
.knd-landing-page {
  min-height: 100vh;
  background: var(--color-portal-bg);
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--color-text-inverse);
}

/* ── Nav ───────────────────────────────────────────────────────────────────── */
.knd-landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.knd-landing-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.knd-landing-nav-logo {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.knd-landing-nav-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.knd-landing-nav-btn {
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  transition: background var(--transition), color var(--transition);
}
.knd-landing-nav-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-inverse);
}

/* ── Page body — scrollable, centred ──────────────────────────────────────── */
.knd-landing-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-10) var(--space-5) var(--space-8);
  gap: var(--space-10);
}

/* ── Hero card — glass ─────────────────────────────────────────────────────── */
.knd-landing-hero {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-10);
  width: 100%;
  max-width: 560px;
  text-align: center;
  backdrop-filter: blur(8px);
  animation: lp-fade-up 0.5s ease 0.1s both;
}

.knd-landing-logo {
  width: 64px;
  height: auto;
  border-radius: var(--radius-lg);
  margin: 0 auto var(--space-5);
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.knd-landing-org {
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
}

.knd-landing-h1 {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-text-inverse);
  line-height: 1.25;
  letter-spacing: -0.3px;
  margin-bottom: var(--space-4);
}

.knd-landing-h1 strong {
  background: var(--color-brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.knd-landing-sub {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.65;
  margin: 0 auto var(--space-8);
  max-width: 400px;
}

.knd-landing-comply {
  display: inline-block;
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color var(--transition);
}
.knd-landing-comply:hover {
  color: rgba(255, 255, 255, 0.7);
}

/* ── Capabilities section ──────────────────────────────────────────────────── */
.knd-landing-caps {
  width: 100%;
  max-width: var(--container-lg);
  animation: lp-fade-up 0.5s ease 0.35s both;
}

.knd-landing-caps-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-5);
  text-align: center;
}

.knd-landing-caps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.knd-landing-cap {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.knd-landing-cap:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(102, 126, 234, 0.5);
  transform: translateY(-2px);
}

.knd-landing-cap-abbr {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-brand);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.knd-landing-cap-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}

.knd-landing-cap-desc {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
}

/* ── Compliance strip ─────────────────────────────────────────────────────── */
.knd-landing-comply-bar {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.05em;
  text-align: center;
  margin: 0;
  padding-bottom: var(--space-6);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .knd-landing-caps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .knd-landing-body  { padding: var(--space-6) var(--space-4); gap: var(--space-8); }
  .knd-landing-hero  { padding: var(--space-8) var(--space-6); }
}
@media (max-width: 480px) {
  .knd-landing-caps-grid { grid-template-columns: 1fr; }
  .knd-landing-h1        { font-size: var(--text-2xl); }
}

/* ── Behavioral animation gap fills ────────────────────────────────────────── */
@keyframes knd-modal-out      { from{opacity:1;transform:translateY(0) scale(1)}    to{opacity:0;transform:translateY(8px) scale(0.97)} }
@keyframes knd-slide-left-in  { from{opacity:0;transform:translateX(-24px)}         to{opacity:1;transform:translateX(0)} }
@keyframes knd-slide-right-in { from{opacity:0;transform:translateX(24px)}          to{opacity:1;transform:translateX(0)} }
@keyframes knd-scale-in       { from{opacity:0;transform:translateY(-4px) scale(0.96)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes knd-shake          { 0%,100%{transform:translateX(0)} 15%{transform:translateX(-4px)} 30%{transform:translateX(4px)} 45%{transform:translateX(-3px)} 60%{transform:translateX(3px)} 75%{transform:translateX(-2px)} 90%{transform:translateX(2px)} }
@keyframes knd-badge-pop      { 0%{opacity:0;transform:scale(0.5)} 60%{opacity:1;transform:scale(1.2)} 100%{opacity:1;transform:scale(1)} }
@keyframes knd-select-pop     { 0%{transform:scale(1)} 40%{transform:scale(0.94)} 100%{transform:scale(1)} }
@keyframes knd-fade-out-up    { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-8px)} }
@keyframes knd-focus-ring-in  { from{box-shadow:0 0 0 0 rgba(102,126,234,0)} to{box-shadow:0 0 0 3px rgba(102,126,234,.22)} }

.anim-toast-in    { animation: knd-toast-in       0.20s ease both; }
.anim-modal-in    { animation: knd-modal-in       0.18s ease both; }
.anim-modal-out   { animation: knd-modal-out      0.14s ease both; }
.anim-slide-left  { animation: knd-slide-left-in  0.22s ease both; }
.anim-slide-right { animation: knd-slide-right-in 0.22s ease both; }
.anim-scale-in    { animation: knd-scale-in       0.15s ease both; }
.anim-shake       { animation: knd-shake           0.40s ease both; }
.anim-badge-pop   { animation: knd-badge-pop      0.25s cubic-bezier(0.34,1.56,0.64,1) both; }
.anim-select-pop  { animation: knd-select-pop     0.18s ease both; }
.anim-fade-out-up { animation: knd-fade-out-up    0.15s ease both; }
.anim-focus-ring  { animation: knd-focus-ring-in  0.08s ease both; }

/* Card & list entrance */
@keyframes knd-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-card-in {
  animation: knd-card-in 0.22s ease both;
  animation-delay: calc(var(--anim-i, 0) * 50ms);
}

/* ── Reduced motion — comprehensive coverage ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Docs Program Linkage ─────────────────────────────────────────────────── */

/* Collapsed program selector toggle */
.docs-prog-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  background: var(--color-surface);
  transition: border-color var(--transition-base), background var(--transition-base);
}
.docs-prog-toggle:hover {
  border-color: var(--color-brand-border);
  background: var(--color-brand-light);
}
.docs-prog-toggle-icon {
  flex-shrink: 0;
  width: 1.25rem;
  text-align: center;
}
.docs-prog-toggle-label {
  flex: 1;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
.docs-prog-toggle-add {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-brand);
}

/* Expanded program picker panel */
.docs-prog-picker {
  border: 1px solid var(--color-brand-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-surface);
}
.docs-prog-picker-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-brand-light);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-brand-dark);
}
.docs-prog-optional {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  background: var(--color-bg-2);
  padding: 0.125rem 0.375rem;
  border-radius: 10px;
}
.docs-prog-options {
  display: flex;
  flex-direction: column;
  padding: 0.375rem;
  gap: 0.25rem;
}
.docs-prog-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color var(--transition-base), background var(--transition-base);
}
.docs-prog-option:hover {
  border-color: var(--color-brand-border);
  background: var(--color-brand-light);
}
.docs-prog-option--selected {
  border-color: var(--color-brand);
  background: var(--color-brand-light);
  font-weight: 500;
}
.docs-prog-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.4375rem;
  border-radius: 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.docs-prog-badge--ecm  { background: var(--prog-badge-ecm-bg);  color: var(--prog-badge-ecm-text);  }
.docs-prog-badge--chw  { background: var(--prog-badge-chw-bg);  color: var(--prog-badge-chw-text);  }
.docs-prog-badge--hp   { background: var(--prog-badge-hp-bg);   color: var(--prog-badge-hp-text);   }
.docs-prog-badge--ihsp { background: var(--prog-badge-ihsp-bg); color: var(--prog-badge-ihsp-text); }

/* Step-level docs panel (ECM/CHW/HP/IHSP program form steps) */
.step-docs {
  border: 1px solid var(--color-brand-border);
  border-left: 3px solid var(--color-brand);
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-surface);
  margin-top: 1.25rem;
}
.step-docs-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  background: var(--color-brand-light);
  border-bottom: 1px solid var(--color-brand-border);
}
.step-docs-title {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-brand-dark);
}
.step-docs-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3125rem;
  border-radius: 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  background: var(--color-brand);
  color: var(--color-text-inverse);
}
.step-docs-actions {
  display: flex;
  gap: 0.375rem;
}
.step-docs-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3125rem 0.625rem;
  border-radius: 5px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.step-docs-btn--primary {
  background: var(--color-brand);
  color: var(--color-text-inverse);
  border-color: var(--color-brand);
}
.step-docs-btn--primary:hover {
  background: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
}
.step-docs-btn--ghost {
  background: var(--color-surface);
  color: var(--color-brand);
  border-color: var(--color-brand-border);
}
.step-docs-btn--ghost:hover {
  background: var(--color-brand-light);
  border-color: var(--color-brand);
}
.step-docs-body {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.step-docs-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-surface);
}
.step-docs-icon {
  flex-shrink: 0;
  font-size: 1.125rem;
  width: 1.5rem;
  text-align: center;
}
.step-docs-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.step-docs-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.step-docs-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.step-docs-status {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.1875rem 0.5rem;
  border-radius: 10px;
}
.step-docs-status--complete { background: var(--color-success-bg);  color: var(--color-success);  border: 1px solid var(--color-success-border); }
.step-docs-status--pending  { background: var(--color-warning-bg);  color: var(--color-warning);  border: 1px solid var(--color-warning-border); }
.step-docs-status--draft    { background: var(--color-bg-2);        color: var(--color-text-muted); border: 1px solid var(--color-border); }
.step-docs-view {
  flex-shrink: 0;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-brand);
  background: var(--color-surface);
  border: 1px solid var(--color-brand-border);
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base);
}
.step-docs-view:hover {
  background: var(--color-brand-light);
  border-color: var(--color-brand);
}
.step-docs-empty {
  padding: 1rem 0.75rem;
  text-align: center;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--color-text-muted);
}

/* Program badge on CRM profile doc cards */
.doc-prog-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.4375rem;
  border-radius: 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
  margin-left: 0.375rem;
}
.doc-prog-badge--ecm  { background: var(--prog-badge-ecm-bg);  color: var(--prog-badge-ecm-text);  }
.doc-prog-badge--chw  { background: var(--prog-badge-chw-bg);  color: var(--prog-badge-chw-text);  }
.doc-prog-badge--hp   { background: var(--prog-badge-hp-bg);   color: var(--prog-badge-hp-text);   }
.doc-prog-badge--ihsp { background: var(--prog-badge-ihsp-bg); color: var(--prog-badge-ihsp-text); }

/* ── Docs Review Step ── */
.docs-review-wrap { display: flex; flex-direction: column; gap: var(--space-3); }
.docs-review-sig-bar { display: flex; align-items: center; justify-content: space-between; background: var(--color-bg-secondary, #f9fafb); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); flex-wrap: wrap; gap: var(--space-2); }
.docs-review-sig-bar-left { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.docs-review-sig-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); }
.docs-review-sig-source { font-size: var(--text-xs); color: var(--color-text-muted); }
.docs-review-overridden-badge { background: var(--prog-badge-hp-bg, #fef9c3); color: var(--prog-badge-hp-text, #713f12); font-size: var(--text-xs); padding: 1px 7px; border-radius: 12px; font-weight: 600; }
.docs-sig-override-panel { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); }
.docs-sig-override-title { font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-3); }
.docs-sig-override-options { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.docs-sig-override-opt { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); cursor: pointer; }
.docs-sig-override-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.docs-preview-toolbar { display: flex; align-items: center; justify-content: space-between; background: var(--color-bg-secondary, #f8f9fa); border: 1px solid var(--color-border); border-radius: var(--radius) var(--radius) 0 0; padding: var(--space-2) var(--space-4); flex-wrap: wrap; gap: var(--space-2); }
.docs-preview-toolbar-title { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.docs-preview-toolbar-actions { display: flex; gap: var(--space-2); }
.docs-sig-override-default-label { color: var(--color-text-muted); font-size: var(--text-xs); }
.docs-sig-override-reason-wrap { margin: var(--space-3) 0 var(--space-2); }
.docs-sig-override-reason-input { font-size: var(--text-sm); }
.docs-preview-iframe { width: 100%; min-height: 600px; border: 1px solid var(--color-border); border-radius: 0 0 var(--radius) var(--radius); background: var(--color-bg); }
.docs-list-empty { color: var(--color-text-muted); font-style: italic; padding: var(--space-4); text-align: center; }

/* ─────────────────────────────────────────────────────────────────────────
   CHW Plan of Care — Form Editor  (chw/templates/chw/form.html)
   ───────────────────────────────────────────────────────────────────────── */

/* ── CHW Form Layout ──────────────────────────────────────────────────── */
.chw-form-outer {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Sticky header */
.chw-form-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}
.chw-form-breadcrumb {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.chw-form-breadcrumb a {
  color: var(--color-brand);
  text-decoration: none;
}
.chw-form-breadcrumb a:hover { text-decoration: underline; }
.chw-form-divider {
  width: 1px; height: 20px;
  background: var(--color-border);
  flex-shrink: 0;
}
.chw-form-title {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-text);
  white-space: nowrap;
}
.chw-form-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  flex-wrap: wrap;
}
.chw-save-status {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  min-width: 80px;
  text-align: right;
}

/* Lock banner */
.chw-lock-banner {
  display: none;
  background: var(--color-warning-bg);
  border-bottom: 1px solid var(--color-warning-border);
  color: var(--color-warning);
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: center;
}

/* AI toolbar */
.chw-ai-toolbar {
  background: var(--color-brand-light);
  border-bottom: 1px solid var(--color-brand-border);
  padding: var(--space-2) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.chw-ai-toolbar-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-brand);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: var(--space-1);
}

/* Scrollable body */
.chw-form-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6) var(--space-5);
}
.chw-form-content {
  max-width: 900px;
  margin: 0 auto;
}

/* Form sections */
.chw-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.chw-section-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
}
.chw-section-header h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  flex: 1;
}
.chw-section-toggle {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  transition: transform var(--transition-slow);
}
.chw-section-toggle.open { transform: rotate(180deg); }
.chw-section-body {
  padding: var(--space-5);
}

/* CHW-scoped form-group overrides */
.chw-form-outer .form-group {
  margin-bottom: var(--space-4);
}
.chw-form-outer .form-group label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.chw-form-outer .form-group input,
.chw-form-outer .form-group textarea,
.chw-form-outer .form-group select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  box-sizing: border-box;
}
.chw-form-outer .form-group input:focus,
.chw-form-outer .form-group textarea:focus,
.chw-form-outer .form-group select:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(102,126,234,0.12);
}
.chw-form-outer .form-group input:focus:not(:focus-visible),
.chw-form-outer .form-group textarea:focus:not(:focus-visible),
.chw-form-outer .form-group select:focus:not(:focus-visible) {
  outline: none;
}
.chw-form-outer .form-group input:disabled,
.chw-form-outer .form-group textarea:disabled,
.chw-form-outer .form-group select:disabled {
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.chw-form-outer .form-group textarea { resize: vertical; min-height: 80px; }

/* 2-col grid */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 600px) { .form-grid-2 { grid-template-columns: 1fr; } }

/* SDOH 3-col checkbox grid */
.sdoh-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}
@media (max-width: 640px) { .sdoh-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .sdoh-grid { grid-template-columns: 1fr; } }
.sdoh-checkbox-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
}
.sdoh-checkbox-item input[type="checkbox"] {
  width: 15px; height: 15px;
  cursor: pointer;
  accent-color: var(--color-brand);
  flex-shrink: 0;
}

/* ICD-10 tags */
.icd10-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2);
  min-height: 36px;
  background: var(--color-surface);
  cursor: text;
}
.icd10-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-brand-light);
  color: var(--color-brand);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: 500;
}
.icd10-tag-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-brand);
  padding: 0;
  font-size: var(--text-sm);
  line-height: 1;
}
.icd10-tag-remove:hover { color: var(--color-danger); }
.icd10-input {
  border: none;
  font-size: var(--text-sm);
  flex: 1;
  min-width: 120px;
  font-family: var(--font-body);
  color: var(--color-text);
  background: transparent;
}

/* Goal cards */
.chw-goal-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.chw-goal-card-header {
  background: var(--color-bg);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
}
.chw-goal-card-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  flex: 1;
}
.chw-goal-chevron {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  transition: transform var(--transition-slow);
}
.chw-goal-chevron.open { transform: rotate(180deg); }
.chw-goal-card-body {
  padding: var(--space-4);
  display: none;
}
.chw-goal-card-body.open { display: block; }

/* Signatures */
.sig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 600px) { .sig-grid { grid-template-columns: 1fr; } }
.sig-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: var(--color-bg);
}
.sig-box-title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-3);
}
.sig-canvas-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: white;
  margin-bottom: var(--space-2);
  position: relative;
}
.sig-canvas {
  display: block;
  width: 100%;
  height: 120px;
  cursor: crosshair;
  touch-action: none;
}
.sig-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.sig-static-display {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
  margin-bottom: var(--space-2);
}

/* CHW form modals now use canonical .modal-overlay / .modal-box — no custom stack needed */

/* CPT results */
.cpt-result-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.cpt-code {
  font-family: monospace;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-brand);
  white-space: nowrap;
}
.cpt-desc { font-size: var(--text-sm); color: var(--color-text-secondary); }

/* Docs section */
.chw-docs-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.chw-docs-section-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-5);
}
.chw-docs-section-header h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.chw-docs-section-body { padding: var(--space-4) var(--space-5); }

/* AI spinner */
.chw-ai-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(102,126,234,0.3);
  border-top-color: var(--color-brand);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}

/* Signature section — date field inline in sig-actions flex row */
.chw-sig-date-group { margin-bottom: 0; flex: 1; }

/* Modal hint text */
.chw-modal-hint { font-size: var(--text-xs); color: var(--color-text-muted); }

/* CPT modal loading/empty state */
.chw-cpt-state { font-size: var(--text-sm); color: var(--color-text-muted); }
.chw-cpt-state--error { font-size: var(--text-sm); color: var(--color-danger); }

.cpt-rationale { font-size: var(--text-xs); color: var(--color-text-muted); font-style: italic; margin-top: var(--space-1); }

/* AI action buttons — use design system AI tokens (§2) */
.btn--ai {
  background: var(--ai-bg, #f9f7ff);
  border-color: var(--ai-bdr, #c4b5fd);
  color: var(--ai-text, #6d28d9);
}
.btn--ai:hover { background: var(--ai-bdr, #c4b5fd); color: var(--ai-text, #6d28d9); }

/* Signature image thumbnail (signed-state display) */
.chw-sig-thumb { max-height: 80px; max-width: 100%; display: block; }

/* Attach-doc modal list states */
.step-docs-list-state { padding: var(--space-3); color: var(--color-text-muted); font-size: var(--text-xs); }
.step-docs-list-state--error { color: var(--color-danger); }

/* Clickable row in attach-doc modal */
.step-docs-row--linkable { cursor: pointer; }

/* Attach CTA button minimum width */
.step-docs-btn--attach-cta { min-width: 60px; }

/* CHW section icon + status (mirrors IHSP .form-section-* pattern) */
.chw-section-title  { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: var(--text-sm); color: var(--color-text); }
.chw-section-icon   { font-size: 15px; line-height: 1; }
.chw-section-right  { display: flex; align-items: center; gap: var(--space-2); }
.chw-section-status { font-size: var(--text-xs); color: var(--color-text-muted); min-width: 18px; text-align: center; }
.chw-section-status.done    { color: var(--color-success); font-weight: 600; }
.chw-section-status.partial { color: var(--color-warning); }

/* CHW care plan goal colored sub-labels (mirrors .ihsp-sub-label) */
.chw-goal-sub-label { font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: var(--space-2) 0 var(--space-1); display: block; }
.chw-goal-sub-label.amber { color: #b45309; }
.chw-goal-sub-label.green { color: #15803d; }
.chw-goal-sub-label.brand { color: var(--color-brand); }