/* =========================================================================
   Sahayak Product Design System — Core Component Library (SHARED)
   -------------------------------------------------------------------------
   Generalised from static/css/ca/components.css into the product-neutral
   `sah-` namespace. Hand-written, 100% token-driven: EVERY colour / space /
   radius / shadow references a var(--sah-*) from shared/tokens.css. A
   hard-coded value here is a DEFECT.

   Load order (see shared/_base.html): tokens.css → app.css → components.css

   Contents
     1. Buttons            .sah-btn (+ variants/sizes/states)
     2. Forms              .sah-field / .sah-input / select / textarea / check / radio
     3. Cards              .sah-card / .sah-stat-card
     4. Data tables        .sah-table (+ empty-state + loading skeleton)
     5. Modals / dialogs   .sah-modal
     6. State primitives    empty / loading / error / toast
     7. Status badges      .sah-badge (compliant / overdue / pending / …)
     7b. Progress / gauge  .sah-progress (compliance score)
     8. Small helpers
   ========================================================================= */

/* ====================================================================== *
   1. BUTTONS
 * ====================================================================== */
.sah-btn {
  --_btn-bg: var(--sah-primary-600);
  --_btn-bg-hover: var(--sah-primary-700);
  --_btn-fg: var(--sah-text-on-primary);
  --_btn-border: var(--_btn-bg);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sah-space-2);
  padding: var(--sah-space-2) var(--sah-space-4);
  font-family: var(--sah-font-sans); font-size: var(--sah-text-sm); font-weight: var(--sah-weight-semibold);
  line-height: 1.2; white-space: nowrap;
  color: var(--_btn-fg);
  background: var(--_btn-bg);
  border: var(--sah-border-width) solid var(--_btn-border);
  border-radius: var(--sah-radius-md);
  cursor: pointer; text-decoration: none; user-select: none;
  transition: background var(--sah-transition-fast), border-color var(--sah-transition-fast),
              color var(--sah-transition-fast), box-shadow var(--sah-transition-fast);
}
.sah-btn:hover { background: var(--_btn-bg-hover); border-color: var(--_btn-bg-hover); text-decoration: none; }
.sah-btn:focus-visible { outline: none; box-shadow: var(--sah-ring); }
.sah-btn:active { transform: translateY(0.5px); }

/* Variants */
.sah-btn--secondary {
  --_btn-bg: var(--sah-surface); --_btn-bg-hover: var(--sah-surface-muted);
  --_btn-fg: var(--sah-text); --_btn-border: var(--sah-border-strong);
}
.sah-btn--secondary:hover { border-color: var(--sah-gray-400); }
.sah-btn--accent {  /* per-product brand accent — sparing use only */
  --_btn-bg: var(--sah-accent); --_btn-bg-hover: var(--sah-accent);
  --_btn-fg: var(--sah-gray-0); --_btn-border: var(--sah-accent);
}
.sah-btn--ghost {
  --_btn-bg: transparent; --_btn-bg-hover: var(--sah-surface-muted);
  --_btn-fg: var(--sah-text); --_btn-border: transparent;
}
.sah-btn--ghost:hover { border-color: transparent; }
.sah-btn--danger {
  --_btn-bg: var(--sah-error-600); --_btn-bg-hover: var(--sah-error-700);
  --_btn-fg: var(--sah-gray-0); --_btn-border: var(--sah-error-600);
}
.sah-btn--success {
  --_btn-bg: var(--sah-success-600); --_btn-bg-hover: var(--sah-success-700);
  --_btn-fg: var(--sah-gray-0); --_btn-border: var(--sah-success-600);
}

/* Sizes */
.sah-btn--sm { padding: var(--sah-space-1) var(--sah-space-3); font-size: var(--sah-text-xs); }
.sah-btn--lg { padding: var(--sah-space-3) var(--sah-space-6); font-size: var(--sah-text-base); }
.sah-btn--block { display: flex; width: 100%; }
.sah-btn--icon { padding: var(--sah-space-2); }

/* States */
.sah-btn:disabled, .sah-btn.is-disabled, .sah-btn[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed; pointer-events: none;
}
/* Loading: hide label, show spinner */
.sah-btn.is-loading { color: transparent !important; pointer-events: none; }
.sah-btn.is-loading::after {
  content: ""; position: absolute; width: 1em; height: 1em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--sah-radius-full);
  color: var(--_btn-fg);
  animation: sah-spin 0.6s linear infinite;
}

/* ====================================================================== *
   2. FORMS  (full state coverage)
 * ====================================================================== */
.sah-field { display: flex; flex-direction: column; gap: var(--sah-space-1); margin-bottom: var(--sah-space-4); }
.sah-label {
  font-size: var(--sah-text-sm); font-weight: var(--sah-weight-medium); color: var(--sah-text);
  display: inline-flex; align-items: center; gap: var(--sah-space-1);
}
.sah-label .sah-req { color: var(--sah-error-600); font-weight: var(--sah-weight-bold); }
.sah-label .sah-optional { color: var(--sah-text-subtle); font-weight: var(--sah-weight-normal); font-size: var(--sah-text-xs); }

.sah-input, .sah-select, .sah-textarea {
  width: 100%;
  padding: var(--sah-space-2) var(--sah-space-3);
  font-family: var(--sah-font-sans); font-size: var(--sah-text-base); color: var(--sah-text);
  background: var(--sah-surface);
  border: var(--sah-border-width) solid var(--sah-border-strong);
  border-radius: var(--sah-radius-md);
  transition: border-color var(--sah-transition-fast), box-shadow var(--sah-transition-fast);
  appearance: none;
}
.sah-input::placeholder, .sah-textarea::placeholder { color: var(--sah-text-subtle); }
.sah-input:hover, .sah-select:hover, .sah-textarea:hover { border-color: var(--sah-gray-400); }
.sah-input:focus, .sah-select:focus, .sah-textarea:focus {
  outline: none; border-color: var(--sah-primary-500); box-shadow: var(--sah-ring);
}
.sah-textarea { min-height: 84px; resize: vertical; line-height: var(--sah-leading-normal); }

/* Select: token-coloured chevron */
.sah-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--sah-space-3) center;
  padding-right: var(--sah-space-8);
}

/* Disabled / readonly */
.sah-input:disabled, .sah-select:disabled, .sah-textarea:disabled,
.sah-input[readonly] {
  background: var(--sah-surface-muted); color: var(--sah-text-muted);
  cursor: not-allowed; border-color: var(--sah-border);
}

/* Helper + error text */
.sah-help { font-size: var(--sah-text-xs); color: var(--sah-text-muted); }
.sah-error-text {
  font-size: var(--sah-text-xs); color: var(--sah-error-700);
  display: inline-flex; align-items: center; gap: var(--sah-space-1);
}

/* Validation states (set .is-error / .is-success on .sah-field) */
.sah-field.is-error .sah-input,
.sah-field.is-error .sah-select,
.sah-field.is-error .sah-textarea { border-color: var(--sah-error-600); }
.sah-field.is-error .sah-input:focus,
.sah-field.is-error .sah-select:focus,
.sah-field.is-error .sah-textarea:focus { box-shadow: 0 0 0 3px var(--sah-error-bg); }
.sah-field.is-error .sah-label { color: var(--sah-error-700); }
.sah-field.is-success .sah-input,
.sah-field.is-success .sah-select,
.sah-field.is-success .sah-textarea { border-color: var(--sah-success-600); }

/* Input group (prefix / suffix, e.g. ₹ or .pdf) */
.sah-input-group { display: flex; align-items: stretch; }
.sah-input-group .sah-input { border-radius: 0; }
.sah-input-group > :first-child { border-top-left-radius: var(--sah-radius-md); border-bottom-left-radius: var(--sah-radius-md); }
.sah-input-group > :last-child { border-top-right-radius: var(--sah-radius-md); border-bottom-right-radius: var(--sah-radius-md); }
.sah-input-addon {
  display: inline-flex; align-items: center; padding: 0 var(--sah-space-3);
  background: var(--sah-surface-muted); color: var(--sah-text-muted); font-size: var(--sah-text-sm);
  border: var(--sah-border-width) solid var(--sah-border-strong);
}
.sah-input-group .sah-input-addon + .sah-input { border-left: 0; }
.sah-input-group .sah-input + .sah-input-addon { border-left: 0; }

/* Checkbox + radio (custom, accessible) */
.sah-check { display: inline-flex; align-items: flex-start; gap: var(--sah-space-2); font-size: var(--sah-text-sm); color: var(--sah-text); cursor: pointer; }
.sah-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sah-check .sah-check-box {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px;
  border: var(--sah-border-width) solid var(--sah-border-strong); background: var(--sah-surface);
  border-radius: var(--sah-radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--sah-transition-fast), border-color var(--sah-transition-fast);
}
.sah-check--radio .sah-check-box { border-radius: var(--sah-radius-full); }
.sah-check input:focus-visible + .sah-check-box { box-shadow: var(--sah-ring); }
.sah-check input:checked + .sah-check-box { background: var(--sah-primary-600); border-color: var(--sah-primary-600); }
.sah-check input:checked + .sah-check-box::after {
  content: ""; width: 10px; height: 10px;
  background: var(--sah-gray-0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.sah-check--radio input:checked + .sah-check-box::after { width: 8px; height: 8px; border-radius: var(--sah-radius-full); -webkit-mask: none; mask: none; }
.sah-check input:disabled + .sah-check-box { background: var(--sah-surface-muted); border-color: var(--sah-border); }
.sah-check.is-disabled { color: var(--sah-text-subtle); cursor: not-allowed; }

/* ====================================================================== *
   3. CARDS
 * ====================================================================== */
.sah-card {
  background: var(--sah-surface);
  border: var(--sah-border-width) solid var(--sah-border);
  border-radius: var(--sah-radius-lg);
  box-shadow: var(--sah-shadow-xs);
}
.sah-card--pad { padding: var(--sah-space-5); }
.sah-card--hover { transition: box-shadow var(--sah-transition), border-color var(--sah-transition); }
.sah-card--hover:hover { box-shadow: var(--sah-shadow-md); border-color: var(--sah-border-strong); }
.sah-card-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sah-space-3);
  padding: var(--sah-space-4) var(--sah-space-5);
  border-bottom: var(--sah-border-width) solid var(--sah-border);
}
.sah-card-title { font-size: var(--sah-text-lg); font-weight: var(--sah-weight-semibold); color: var(--sah-gray-900); margin: 0; }
.sah-card-body { padding: var(--sah-space-5); }
.sah-card-footer {
  padding: var(--sah-space-4) var(--sah-space-5);
  border-top: var(--sah-border-width) solid var(--sah-border);
  background: var(--sah-gray-50);
  border-bottom-left-radius: var(--sah-radius-lg); border-bottom-right-radius: var(--sah-radius-lg);
  display: flex; gap: var(--sah-space-2); justify-content: flex-end;
}

/* Stat / metric card */
.sah-stat-card { padding: var(--sah-space-5); display: flex; flex-direction: column; gap: var(--sah-space-1); }
.sah-stat-label { font-size: var(--sah-text-sm); color: var(--sah-text-muted); }
.sah-stat-value { font-size: var(--sah-text-3xl); font-weight: var(--sah-weight-bold); color: var(--sah-gray-900); line-height: 1.1; }
.sah-stat-delta { font-size: var(--sah-text-xs); font-weight: var(--sah-weight-semibold); display: inline-flex; align-items: center; gap: var(--sah-space-1); }
.sah-stat-delta--up { color: var(--sah-success-700); }
.sah-stat-delta--down { color: var(--sah-error-700); }

/* ====================================================================== *
   4. DATA TABLES  (with built-in empty-state + loading skeleton)
 * ====================================================================== */
.sah-table-wrap {
  background: var(--sah-surface);
  border: var(--sah-border-width) solid var(--sah-border);
  border-radius: var(--sah-radius-lg);
  overflow: hidden;
}
.sah-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--sah-text-sm); }
.sah-table thead th {
  background: var(--sah-surface-muted); color: var(--sah-text-muted);
  font-size: var(--sah-text-xs); font-weight: var(--sah-weight-semibold);
  text-transform: uppercase; letter-spacing: var(--sah-tracking-wide); text-align: left;
  padding: var(--sah-space-3) var(--sah-space-4);
  border-bottom: var(--sah-border-width) solid var(--sah-border);
  white-space: nowrap;
}
.sah-table tbody td {
  padding: var(--sah-space-3) var(--sah-space-4); color: var(--sah-text);
  border-bottom: var(--sah-border-width) solid var(--sah-border);
}
.sah-table tbody tr:last-child td { border-bottom: 0; }
.sah-table tbody tr:hover { background: var(--sah-gray-50); }
.sah-table .sah-num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--sah-font-mono); font-size: var(--sah-text-sm); }
.sah-table--compact td, .sah-table--compact th { padding: var(--sah-space-2) var(--sah-space-3); }
.sah-table-cell-muted { color: var(--sah-text-muted); }

/* Empty-state row inside a table */
.sah-table .sah-table-empty td { padding: 0; border-bottom: 0; }

/* Loading skeleton */
.sah-skeleton {
  display: block; height: 0.85em; border-radius: var(--sah-radius-sm);
  background: linear-gradient(90deg, var(--sah-gray-100) 25%, var(--sah-gray-200) 37%, var(--sah-gray-100) 63%);
  background-size: 400% 100%;
  animation: sah-shimmer 1.4s ease infinite;
}
.sah-skeleton--text { width: 80%; }
.sah-skeleton--sm { width: 40%; }
.sah-skeleton--circle { width: 28px; height: 28px; border-radius: var(--sah-radius-full); }

/* ====================================================================== *
   5. MODALS / DIALOGS  (so "Add X" opens a modal, not an empty table)
 * ====================================================================== */
.sah-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: var(--sah-space-4);
  background: var(--sah-overlay);
  opacity: 0; visibility: hidden;
  transition: opacity var(--sah-transition), visibility var(--sah-transition);
}
.sah-modal.is-open { opacity: 1; visibility: visible; }
.sah-modal-panel {
  width: 100%; max-width: 480px; max-height: calc(100vh - 2 * var(--sah-space-8));
  display: flex; flex-direction: column;
  background: var(--sah-surface); border-radius: var(--sah-radius-xl);
  box-shadow: var(--sah-shadow-lg);
  transform: translateY(8px) scale(0.98); transition: transform var(--sah-transition);
  overflow: hidden;
}
.sah-modal.is-open .sah-modal-panel { transform: translateY(0) scale(1); }
.sah-modal--sm .sah-modal-panel { max-width: 380px; }
.sah-modal--lg .sah-modal-panel { max-width: 720px; }
.sah-modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sah-space-3);
  padding: var(--sah-space-4) var(--sah-space-5);
  border-bottom: var(--sah-border-width) solid var(--sah-border);
}
.sah-modal-title { font-size: var(--sah-text-lg); font-weight: var(--sah-weight-semibold); color: var(--sah-gray-900); margin: 0; }
.sah-modal-close {
  border: 0; background: transparent; cursor: pointer; color: var(--sah-text-muted);
  width: 32px; height: 32px; border-radius: var(--sah-radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--sah-transition-fast), color var(--sah-transition-fast);
}
.sah-modal-close:hover { background: var(--sah-surface-muted); color: var(--sah-text); }
.sah-modal-body { padding: var(--sah-space-5); overflow-y: auto; }
.sah-modal-footer {
  display: flex; gap: var(--sah-space-2); justify-content: flex-end;
  padding: var(--sah-space-4) var(--sah-space-5);
  border-top: var(--sah-border-width) solid var(--sah-border);
  background: var(--sah-gray-50);
}

/* ====================================================================== *
   6. STATE PRIMITIVES  (empty / loading / error / toast)
 * ====================================================================== */
/* Empty state */
.sah-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sah-space-3); padding: var(--sah-space-12) var(--sah-space-6); color: var(--sah-text-muted);
}
.sah-empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--sah-radius-full);
  background: var(--sah-primary-50); color: var(--sah-primary-600);
}
.sah-empty-title { font-size: var(--sah-text-lg); font-weight: var(--sah-weight-semibold); color: var(--sah-gray-800); margin: 0; }
.sah-empty-desc { font-size: var(--sah-text-sm); color: var(--sah-text-muted); max-width: 360px; margin: 0; }

/* Spinner + inline loading */
.sah-spinner {
  display: inline-block; width: 20px; height: 20px;
  border: 2px solid var(--sah-gray-200); border-top-color: var(--sah-primary-600);
  border-radius: var(--sah-radius-full); animation: sah-spin 0.6s linear infinite;
}
.sah-spinner--lg { width: 32px; height: 32px; border-width: 3px; }
.sah-loading { display: flex; align-items: center; justify-content: center; gap: var(--sah-space-3); padding: var(--sah-space-12); color: var(--sah-text-muted); font-size: var(--sah-text-sm); }

/* Error state */
.sah-error-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sah-space-3); padding: var(--sah-space-12) var(--sah-space-6);
}
.sah-error-state .sah-empty-icon { background: var(--sah-error-bg); color: var(--sah-error-600); }
.sah-error-state .sah-empty-title { color: var(--sah-error-700); }

/* Inline alert banners */
.sah-alert {
  display: flex; gap: var(--sah-space-3); align-items: flex-start;
  padding: var(--sah-space-3) var(--sah-space-4); border-radius: var(--sah-radius-md);
  border: var(--sah-border-width) solid transparent; font-size: var(--sah-text-sm);
}
.sah-alert--info { background: var(--sah-info-bg); border-color: var(--sah-info-border); color: var(--sah-info-700); }
.sah-alert--success { background: var(--sah-success-bg); border-color: var(--sah-success-border); color: var(--sah-success-700); }
.sah-alert--warning { background: var(--sah-warning-bg); border-color: var(--sah-warning-border); color: var(--sah-warning-700); }
.sah-alert--error { background: var(--sah-error-bg); border-color: var(--sah-error-border); color: var(--sah-error-700); }

/* Toast (success/error notifications). Container is fixed; JS injects .sah-toast */
.sah-toast-container {
  position: fixed; top: var(--sah-space-5); right: var(--sah-space-5); z-index: 1100;
  display: flex; flex-direction: column; gap: var(--sah-space-2); max-width: 360px;
}
.sah-toast {
  display: flex; align-items: flex-start; gap: var(--sah-space-3);
  padding: var(--sah-space-3) var(--sah-space-4);
  background: var(--sah-gray-900); color: var(--sah-gray-0);
  border-radius: var(--sah-radius-md); box-shadow: var(--sah-shadow-lg);
  font-size: var(--sah-text-sm);
  animation: sah-toast-in var(--sah-transition);
}
.sah-toast--success { background: var(--sah-success-700); }
.sah-toast--error { background: var(--sah-error-700); }
.sah-toast--info { background: var(--sah-info-700); }
.sah-toast.is-leaving { animation: sah-toast-out var(--sah-transition) forwards; }
.sah-toast-close { margin-left: auto; background: transparent; border: 0; color: inherit; opacity: 0.8; cursor: pointer; }
.sah-toast-close:hover { opacity: 1; }

/* ====================================================================== *
   7. STATUS BADGES  (semantic colours)
 * ====================================================================== */
.sah-badge {
  display: inline-flex; align-items: center; gap: var(--sah-space-1);
  padding: 0.15rem var(--sah-space-2);
  font-size: var(--sah-text-xs); font-weight: var(--sah-weight-semibold); line-height: 1.4;
  border-radius: var(--sah-radius-full);
  border: var(--sah-border-width) solid transparent;
}
.sah-badge .sah-dot { width: 6px; height: 6px; border-radius: var(--sah-radius-full); background: currentColor; }
.sah-badge--compliant { background: var(--sah-success-bg); color: var(--sah-success-700); border-color: var(--sah-success-border); }
.sah-badge--overdue   { background: var(--sah-error-bg);   color: var(--sah-error-700);   border-color: var(--sah-error-border); }
.sah-badge--pending   { background: var(--sah-warning-bg); color: var(--sah-warning-700); border-color: var(--sah-warning-border); }
.sah-badge--info      { background: var(--sah-info-bg);    color: var(--sah-info-700);    border-color: var(--sah-info-border); }
.sah-badge--neutral   { background: var(--sah-surface-muted); color: var(--sah-text-muted); border-color: var(--sah-border); }
.sah-badge--primary   { background: var(--sah-primary-50); color: var(--sah-primary-700); border-color: var(--sah-primary-200); }

/* ====================================================================== *
   7b. PROGRESS / GAUGE  (compliance score)
 * ====================================================================== */
.sah-progress {
  width: 100%; height: 8px; border-radius: var(--sah-radius-full);
  background: var(--sah-gray-200); overflow: hidden;
}
.sah-progress-fill { height: 100%; border-radius: var(--sah-radius-full); background: var(--sah-primary-600); transition: width var(--sah-transition); }
.sah-progress-fill--green { background: var(--sah-success-600); }
.sah-progress-fill--amber { background: var(--sah-warning-600); }
.sah-progress-fill--red   { background: var(--sah-error-600); }
.sah-score-big { font-size: 2.5rem; font-weight: var(--sah-weight-bold); line-height: 1; color: var(--sah-gray-900); }

/* ====================================================================== *
   8. SMALL HELPERS  (layout only — token-driven)
 * ====================================================================== */
.sah-stack > * + * { margin-top: var(--sah-space-4); }
.sah-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sah-space-3); }
.sah-grid { display: grid; gap: var(--sah-space-4); }
.sah-grid--3 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.sah-grid--2 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.sah-muted { color: var(--sah-text-muted); }
.sah-icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; vertical-align: -0.15em; }

/* ====================================================================== *
   Keyframes
 * ====================================================================== */
@keyframes sah-spin { to { transform: rotate(360deg); } }
@keyframes sah-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes sah-toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes sah-toast-out { to { opacity: 0; transform: translateX(16px); } }

@media (prefers-reduced-motion: reduce) {
  .sah-skeleton, .sah-spinner, .sah-btn.is-loading::after, .sah-toast { animation: none; }
}

/* ======================================================================== *
 * ======================================================================== *
   9. +1 POLISH LAYER  (ADDITIVE — all-new selectors)
   ------------------------------------------------------------------------
   The sellability/delight layer that the 7 products opt into via the shared
   macros in templates/shared/_ui.html, _patterns.html and _landing.html.
   100% token-driven. NOTHING here restyles an existing selector, so every
   product renders identically until it adopts a macro.

     9a. Deadline-urgency chips        .sah-chip
     9b. Empty-state enrichments       .sah-empty (additive variants only)
     9c. Onboarding / first-run        .sah-onboard / .sah-getting-started
     9d. Dashboard insights            .sah-insight / .sah-next-actions / .sah-score-context
     9e. Skeleton blocks               .sah-skeleton-block
     9f. Landing / conversion          .sah-hero / .sah-vprops / .sah-proof / .sah-pricing
     9g. Micro-interactions + a11y     .sah-lift, focus polish
 * ======================================================================== */

/* ---- 9a. Deadline-urgency chip ---------------------------------------- */
.sah-chip {
  display: inline-flex; align-items: center; gap: var(--sah-space-2);
  padding: 0.15rem var(--sah-space-2) 0.15rem var(--sah-space-2);
  font-size: var(--sah-text-xs); font-weight: var(--sah-weight-semibold); line-height: 1.4;
  border-radius: var(--sah-radius-full);
  border: var(--sah-border-width) solid transparent; white-space: nowrap;
}
.sah-chip-dot { width: 7px; height: 7px; border-radius: var(--sah-radius-full); background: currentColor; flex: 0 0 auto; }
.sah-chip-count { font-variant-numeric: tabular-nums; }
.sah-chip-label { font-weight: var(--sah-weight-medium); }
.sah-chip--red    { background: var(--sah-error-bg);   color: var(--sah-error-700);   border-color: var(--sah-error-border); }
.sah-chip--amber  { background: var(--sah-warning-bg); color: var(--sah-warning-700); border-color: var(--sah-warning-border); }
.sah-chip--green  { background: var(--sah-success-bg); color: var(--sah-success-700); border-color: var(--sah-success-border); }
.sah-chip--neutral{ background: var(--sah-surface-muted); color: var(--sah-text-muted); border-color: var(--sah-border); }

/* ---- 9b. Empty-state enrichments (variants + button spacing) ---------- */
.sah-empty .sah-btn { margin-top: var(--sah-space-2); }
.sah-empty--muted { padding-top: var(--sah-space-8); padding-bottom: var(--sah-space-8); }

/* ---- 9c. Onboarding / first-run --------------------------------------- */
.sah-onboard {
  background: linear-gradient(180deg, var(--sah-primary-50), var(--sah-surface) 60%);
  border: var(--sah-border-width) solid var(--sah-primary-200);
  border-radius: var(--sah-radius-xl);
  padding: var(--sah-space-6);
  margin-bottom: var(--sah-space-6);
  box-shadow: var(--sah-shadow-xs);
}
.sah-onboard-head { display: flex; gap: var(--sah-space-4); align-items: flex-start; margin-bottom: var(--sah-space-5); }
.sah-onboard-spark {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--sah-radius-lg);
  background: var(--sah-primary-600); color: var(--sah-text-on-primary);
}
.sah-onboard-title { font-size: var(--sah-text-xl); font-weight: var(--sah-weight-semibold); color: var(--sah-gray-900); margin: 0; }
.sah-onboard-intro { color: var(--sah-text-muted); font-size: var(--sah-text-md); margin: var(--sah-space-1) 0 0; }
.sah-onboard-progress { font-size: var(--sah-text-xs); font-weight: var(--sah-weight-semibold); color: var(--sah-primary-700); margin: var(--sah-space-2) 0 0; text-transform: uppercase; letter-spacing: var(--sah-tracking-wide); }
.sah-onboard-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sah-space-3); }
.sah-onboard-step {
  display: flex; align-items: center; gap: var(--sah-space-3);
  background: var(--sah-surface);
  border: var(--sah-border-width) solid var(--sah-border);
  border-radius: var(--sah-radius-lg);
  padding: var(--sah-space-3) var(--sah-space-4);
}
.sah-onboard-num {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--sah-radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sah-primary-50); color: var(--sah-primary-700);
  font-weight: var(--sah-weight-bold); font-size: var(--sah-text-sm);
}
.sah-onboard-step.is-done .sah-onboard-num { background: var(--sah-success-bg); color: var(--sah-success-700); }
.sah-onboard-step.is-done .sah-onboard-step-title { color: var(--sah-text-muted); text-decoration: line-through; }
.sah-onboard-step-body { flex: 1 1 auto; min-width: 0; }
.sah-onboard-step-title { font-size: var(--sah-text-base); font-weight: var(--sah-weight-medium); color: var(--sah-text); margin: 0; }
.sah-onboard-step-desc { font-size: var(--sah-text-sm); color: var(--sah-text-muted); margin: 2px 0 0; }
.sah-onboard-foot { margin-top: var(--sah-space-5); }

/* Compact checklist variant */
.sah-getting-started { padding: var(--sah-space-4) var(--sah-space-5); }
.sah-gs-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sah-space-2); }
.sah-gs-title { font-size: var(--sah-text-base); font-weight: var(--sah-weight-semibold); color: var(--sah-gray-900); }
.sah-gs-count { font-size: var(--sah-text-xs); font-weight: var(--sah-weight-semibold); color: var(--sah-text-muted); font-variant-numeric: tabular-nums; }
.sah-checklist { list-style: none; margin: var(--sah-space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sah-space-2); }
.sah-checklist-item { display: flex; align-items: center; gap: var(--sah-space-2); font-size: var(--sah-text-sm); }
.sah-checklist-mark {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: var(--sah-radius-full);
  border: var(--sah-border-width) solid var(--sah-border-strong);
  display: inline-flex; align-items: center; justify-content: center; color: var(--sah-success-700);
}
.sah-checklist-mark .sah-icon { width: 0.85em; height: 0.85em; }
.sah-checklist-item.is-done .sah-checklist-mark { background: var(--sah-success-bg); border-color: var(--sah-success-border); }
.sah-checklist-item.is-done span:last-child { color: var(--sah-text-muted); text-decoration: line-through; }

/* ---- 9d. Dashboard insights ------------------------------------------- */
.sah-insight {
  display: flex; align-items: flex-start; gap: var(--sah-space-3);
  padding: var(--sah-space-4) var(--sah-space-5);
  border: var(--sah-border-width) solid transparent;
  border-left-width: 3px;
  border-radius: var(--sah-radius-lg);
  margin-bottom: var(--sah-space-4);
}
.sah-insight-icon { flex: 0 0 auto; display: inline-flex; margin-top: 1px; }
.sah-insight-body { flex: 1 1 auto; min-width: 0; }
.sah-insight-title { font-size: var(--sah-text-base); font-weight: var(--sah-weight-semibold); margin: 0; color: var(--sah-gray-900); }
.sah-insight-detail { font-size: var(--sah-text-sm); margin: 2px 0 0; color: var(--sah-text-muted); }
.sah-insight .sah-btn { flex: 0 0 auto; }
.sah-insight--critical { background: var(--sah-error-bg);   border-color: var(--sah-error-border);   border-left-color: var(--sah-error-600); }
.sah-insight--critical .sah-insight-icon { color: var(--sah-error-600); }
.sah-insight--warning  { background: var(--sah-warning-bg); border-color: var(--sah-warning-border); border-left-color: var(--sah-warning-600); }
.sah-insight--warning .sah-insight-icon { color: var(--sah-warning-700); }
.sah-insight--success  { background: var(--sah-success-bg); border-color: var(--sah-success-border); border-left-color: var(--sah-success-600); }
.sah-insight--success .sah-insight-icon { color: var(--sah-success-600); }
.sah-insight--info     { background: var(--sah-info-bg);    border-color: var(--sah-info-border);    border-left-color: var(--sah-info-600); }
.sah-insight--info .sah-insight-icon { color: var(--sah-info-600); }

/* Next-action strip */
.sah-next-actions { display: grid; gap: var(--sah-space-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-bottom: var(--sah-space-4); }
.sah-next-action {
  display: flex; align-items: center; gap: var(--sah-space-3);
  background: var(--sah-surface);
  border: var(--sah-border-width) solid var(--sah-border);
  border-radius: var(--sah-radius-lg);
  padding: var(--sah-space-3) var(--sah-space-4);
  text-decoration: none; color: inherit;
  transition: box-shadow var(--sah-transition-fast), border-color var(--sah-transition-fast), transform var(--sah-transition-fast);
}
a.sah-next-action:hover { text-decoration: none; box-shadow: var(--sah-shadow-sm); border-color: var(--sah-border-strong); transform: translateY(-1px); }
.sah-next-action-bar { flex: 0 0 auto; width: 4px; align-self: stretch; border-radius: var(--sah-radius-full); background: var(--sah-primary-400); }
.sah-next-action--red .sah-next-action-bar   { background: var(--sah-error-600); }
.sah-next-action--amber .sah-next-action-bar { background: var(--sah-warning-600); }
.sah-next-action--green .sah-next-action-bar { background: var(--sah-success-600); }
.sah-next-action--info .sah-next-action-bar  { background: var(--sah-info-600); }
.sah-next-action-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sah-next-action-title { font-size: var(--sah-text-sm); font-weight: var(--sah-weight-semibold); color: var(--sah-gray-900); }
.sah-next-action-detail { font-size: var(--sah-text-xs); color: var(--sah-text-muted); }
.sah-next-action-go { flex: 0 0 auto; color: var(--sah-text-subtle); font-weight: var(--sah-weight-bold); }
a.sah-next-action:hover .sah-next-action-go { color: var(--sah-primary-600); }

/* Score context strip */
.sah-score-context { display: flex; flex-direction: column; gap: var(--sah-space-3); }
.sah-score-context-top { display: flex; align-items: center; gap: var(--sah-space-4); }
.sah-score-context-meta { display: flex; flex-direction: column; gap: var(--sah-space-1); }
.sah-score-context-label { font-size: var(--sah-text-sm); color: var(--sah-text-muted); }
.sah-score-context-note { font-size: var(--sah-text-sm); color: var(--sah-text-muted); margin: 0; }

/* ---- 9e. Skeleton blocks ---------------------------------------------- */
.sah-skeleton-block { display: flex; flex-direction: column; gap: var(--sah-space-3); padding: var(--sah-space-2) 0; }
.sah-skeleton-row { display: flex; gap: var(--sah-space-4); }
.sah-skeleton-row .sah-skeleton { flex: 1 1 0; }

/* Busy overlay (SahUI.busy) — dim a panel + center a spinner while it loads. */
.sah-busy-overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sah-surface) 70%, transparent);
  border-radius: inherit;
}
@supports not (background: color-mix(in srgb, white 70%, transparent)) {
  .sah-busy-overlay { background: rgba(255, 255, 255, 0.72); }
}
.is-busy { pointer-events: none; }

/* ---- 9f. Landing / conversion sections -------------------------------- */
.sah-section-head { text-align: center; max-width: 640px; margin: 0 auto var(--sah-space-8); }
.sah-section-head h2 { margin-bottom: var(--sah-space-2); }

.sah-hero { padding: var(--sah-space-16) 0 var(--sah-space-12); }
.sah-hero-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.sah-hero-eyebrow {
  font-size: var(--sah-text-sm); font-weight: var(--sah-weight-semibold);
  text-transform: uppercase; letter-spacing: var(--sah-tracking-wide);
  color: var(--sah-accent); margin: 0 0 var(--sah-space-3);
}
.sah-hero-title { font-size: var(--sah-text-3xl); line-height: var(--sah-leading-tight); margin: 0 0 var(--sah-space-4); }
.sah-hero-sub { font-size: var(--sah-text-lg); color: var(--sah-text-muted); margin: 0 auto var(--sah-space-6); max-width: 600px; }
.sah-hero-actions { display: flex; flex-wrap: wrap; gap: var(--sah-space-3); justify-content: center; }
.sah-hero-aside { margin-top: var(--sah-space-10); }

.sah-vprops { padding: var(--sah-space-12) 0; }
.sah-vprops-grid { display: grid; gap: var(--sah-space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sah-vprop { display: flex; flex-direction: column; gap: var(--sah-space-2); }
.sah-vprop-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--sah-radius-lg);
  background: var(--sah-primary-50); color: var(--sah-primary-600); font-size: var(--sah-text-xl);
}
.sah-vprop-title { font-size: var(--sah-text-lg); margin: 0; }
.sah-vprop-desc { font-size: var(--sah-text-sm); color: var(--sah-text-muted); margin: 0; line-height: var(--sah-leading-relaxed); }

.sah-proof { padding: var(--sah-space-12) 0; text-align: center; }
.sah-proof-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sah-space-8) var(--sah-space-12); margin-bottom: var(--sah-space-8); }
.sah-proof-stat { display: flex; flex-direction: column; gap: var(--sah-space-1); }
.sah-proof-stat-value { font-size: var(--sah-text-3xl); font-weight: var(--sah-weight-bold); color: var(--sah-primary-700); line-height: 1; }
.sah-proof-stat-label { font-size: var(--sah-text-sm); color: var(--sah-text-muted); }
.sah-proof-quote { max-width: 640px; margin: 0 auto; }
.sah-proof-quote blockquote { font-size: var(--sah-text-lg); color: var(--sah-text); margin: 0 0 var(--sah-space-2); font-weight: var(--sah-weight-medium); }
.sah-proof-quote figcaption { font-size: var(--sah-text-sm); color: var(--sah-text-muted); }
.sah-proof-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sah-space-4); margin-top: var(--sah-space-6); }
.sah-proof-logo {
  padding: var(--sah-space-2) var(--sah-space-4); border-radius: var(--sah-radius-md);
  background: var(--sah-surface-muted); color: var(--sah-text-muted);
  font-weight: var(--sah-weight-semibold); font-size: var(--sah-text-sm);
}

.sah-pricing { padding: var(--sah-space-12) 0; }
.sah-pricing-grid { display: grid; gap: var(--sah-space-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
.sah-tier { position: relative; padding: var(--sah-space-6); display: flex; flex-direction: column; gap: var(--sah-space-2); }
.sah-tier--featured { border-color: var(--sah-primary-400); box-shadow: var(--sah-shadow-md); }
.sah-tier-badge {
  position: absolute; top: 0; right: var(--sah-space-5); transform: translateY(-50%);
  background: var(--sah-primary-600); color: var(--sah-text-on-primary);
  font-size: var(--sah-text-xs); font-weight: var(--sah-weight-semibold);
  padding: 2px var(--sah-space-3); border-radius: var(--sah-radius-full);
}
.sah-tier-name { font-size: var(--sah-text-sm); font-weight: var(--sah-weight-semibold); text-transform: uppercase; letter-spacing: var(--sah-tracking-wide); color: var(--sah-text-muted); margin: 0; }
.sah-tier-price { font-size: var(--sah-text-3xl); font-weight: var(--sah-weight-bold); color: var(--sah-gray-900); margin: 0; line-height: 1.1; }
.sah-tier-period { font-size: var(--sah-text-sm); font-weight: var(--sah-weight-normal); color: var(--sah-text-muted); margin-left: var(--sah-space-1); }
.sah-tier-blurb { font-size: var(--sah-text-sm); color: var(--sah-text-muted); margin: 0 0 var(--sah-space-2); }
.sah-tier-features { list-style: none; margin: var(--sah-space-2) 0 var(--sah-space-4); padding: 0; display: flex; flex-direction: column; gap: var(--sah-space-2); flex: 1 1 auto; }
.sah-tier-features li { display: flex; align-items: flex-start; gap: var(--sah-space-2); font-size: var(--sah-text-sm); color: var(--sah-text); }
.sah-tier-check { flex: 0 0 auto; color: var(--sah-success-600); display: inline-flex; margin-top: 1px; }
.sah-tier-check .sah-icon { width: 1em; height: 1em; }
.sah-tier-note { font-size: var(--sah-text-xs); color: var(--sah-text-muted); margin: var(--sah-space-2) 0 0; text-align: center; }

.sah-final-cta { padding: var(--sah-space-12) 0; }
.sah-final-cta-inner {
  max-width: var(--sah-container-max); margin: 0 auto; text-align: center;
  background: var(--sah-bg-deep); color: var(--sah-on-deep);    /* deep teal closing band */
  border-radius: var(--sah-radius-xl); padding: var(--sah-space-12) var(--sah-space-6);
}
.sah-final-cta-title { color: var(--sah-on-deep); margin: 0 0 var(--sah-space-3); }
.sah-final-cta-sub { color: var(--sah-on-deep-muted); font-size: var(--sah-text-lg); margin: 0 auto var(--sah-space-6); max-width: 560px; }
/* Primary CTA on the deep band: white bg + deep-teal text (high contrast, ≥7:1). */
.sah-final-cta .sah-btn {
  --_btn-bg: var(--sah-on-deep); --_btn-bg-hover: #ffffff;
  --_btn-fg: var(--sah-accent-deep); --_btn-border: var(--sah-on-deep);
}
.sah-final-cta .sah-btn--ghost {
  --_btn-bg: transparent; --_btn-bg-hover: rgba(255,255,255,0.12);
  --_btn-fg: var(--sah-on-deep); --_btn-border: rgba(255,255,255,0.45);
}

/* ---- 9g. Micro-interactions + a11y polish ----------------------------- */
.sah-lift { transition: box-shadow var(--sah-transition), transform var(--sah-transition); }
.sah-lift:hover { box-shadow: var(--sah-shadow-md); transform: translateY(-2px); }
.sah-text-xs { font-size: var(--sah-text-xs); }

@media (prefers-reduced-motion: reduce) {
  .sah-next-action, .sah-lift, .sah-card--hover { transition: none; }
  a.sah-next-action:hover, .sah-lift:hover { transform: none; }
}

/* ======================================================================== *
   10. DARK-PREMIUM OVERRIDES  (rebrand)
   ------------------------------------------------------------------------
   Layered AFTER the base library so the dark-premium rebrand can do the few
   things a pure token swap can't: the display typeface on headlines/figures,
   the hero glow + eyebrow pill, the accent CTA glow, the dark secondary CTA,
   the emerald price + card hover, and the two spots that read a "darkest grey"
   as a SURFACE (final-CTA band, toast) which the token flip turned light.
 * ======================================================================== */

/* ---- Display typeface (Inter 600) on headlines + figures --------------- */
.sah-hero-title,
.sah-tier-price,
.sah-score-big,
.sah-card-num,
.sah-stat-value { font-family: var(--sah-font-display); letter-spacing: -0.01em; }

/* ---- Hero: light canvas with an optional very-faint teal radial -------- */
.sah-hero {
  background:
    radial-gradient(ellipse 90% 50% at 50% -20%, var(--sah-accent-subtle) 0%, transparent 60%),
    var(--sah-canvas);
}
/* Eyebrow: light accent pill (subtle tint fill, accent text, hairline border). */
.sah-hero-eyebrow {
  display: inline-block;
  background: var(--sah-accent-subtle);
  color: var(--sah-accent);
  border: var(--sah-border-width) solid var(--sah-border);
  border-radius: var(--sah-radius-full);
  padding: var(--sah-space-1) var(--sah-space-3);
}

/* ---- Primary / accent CTA: lift + emerald glow on hover --------------- */
.sah-btn:not(.sah-btn--secondary):not(.sah-btn--ghost):not(.sah-btn--danger):not(.sah-btn--success):hover {
  filter: brightness(1.08);
  box-shadow: var(--sah-accent-glow);
}

/* ---- Secondary CTA: transparent, hairline border, muted text ---------- */
.sah-btn--secondary {
  --_btn-bg: transparent; --_btn-bg-hover: transparent;
  --_btn-fg: var(--sah-text-muted); --_btn-border: var(--sah-border);
}
.sah-btn--secondary:hover { color: var(--sah-text); border-color: var(--sah-accent); }

/* ---- Pricing tiers: dark cards, emerald price, accent hover ----------- */
.sah-tier { transition: border-color var(--sah-transition), background var(--sah-transition); }
.sah-tier:hover { border-color: var(--border-accent); background: var(--bg-elevated); }
.sah-tier-price { color: var(--sah-accent); }
.sah-tier-period { color: var(--sah-text-subtle); }

/* ---- Cards: accent border on hover (interactive cards) ---------------- */
.sah-card--hover:hover { border-color: var(--border-accent); }

/* ---- Deadline chip geometry (colours already come from the tokens) ---- */
.sah-chip {
  border-radius: var(--sah-radius-sm);
  font-size: 0.78rem;
  font-weight: var(--sah-weight-medium);
  padding: 3px 8px;
}

/* ---- Deep bands: toast uses the same deep-teal anchor as the final-CTA.
   (The final-CTA band is defined canonically in §9f with --sah-bg-deep; no
   override needed here.) The status toasts keep their semantic colours. */
.sah-toast {
  background: var(--sah-bg-deep);
  color: var(--sah-on-deep);
  border: var(--sah-border-width) solid var(--sah-bg-deep);
}