/* ============================================================================
   atomic✳HR — UX / visual REFRESH layer  (2026-07-13)
   ----------------------------------------------------------------------------
   ADDITIVE OVERRIDE ONLY. Loaded AFTER app.css so it wins on equal specificity.
   Goal: pull the app onto the atomic✳HR design system —
     • Primary action = BLACK PILL (design-system rule; purple was overused).
     • HR Purple #9140b0 stays the ACCENT (links, focus, active, hover cues).
     • Consistent pill radii, soft token shadows, calmer chips/tabs.
     • Modern drawer chrome + humane empty states (never a grey void).
   Every value uses a DS token var so light/dark themes both resolve.
   Does NOT restructure layout — only re-skins existing selectors.
   ============================================================================ */

/* ── 1. PRIMARY ACTIONS → BLACK PILL ─────────────────────────────────────────
   --action = Atomic Black (inverts to white on dark); --text-on-brand tracks it.
   Purple is demoted to accent per the brand color hierarchy. */
.btn-primary,
.btn-action.primary,
.save-btn,
.new-list-btn,
.btn-confirm {
  background: var(--action) !important;
  border-color: var(--action) !important;
  color: var(--text-on-brand) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: var(--shadow-xs);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn-primary:hover,
.btn-action.primary:hover,
.save-btn:hover,
.new-list-btn:hover,
.btn-confirm:hover {
  background: var(--action-hover) !important;
  border-color: var(--action-hover) !important;
  box-shadow: var(--shadow-sm);
}
.btn-primary:active,
.btn-action.primary:active,
.save-btn:active,
.new-list-btn:active,
.btn-confirm:active { transform: scale(.99); }

/* Pill everything that's a real button, echoing the board + wordmark roundness. */
.btn-primary,
.btn-secondary,
.btn-action,
.save-btn,
.new-list-btn,
.refresh-mini { border-radius: var(--radius-pill) !important; }

/* Secondary / ghost buttons: quiet, outline, purple-on-hover accent. */
.btn-secondary { background: var(--bg-sunken) !important; color: var(--text-body) !important; }
.btn-secondary:hover { background: var(--paper-200) !important; }
.btn-action:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

/* ── 2. LINKS / FOCUS / ACCENT — keep purple as the ★/HR cue ──────────────── */
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
}
.field-input:focus,
.new-list-row input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--focus-ring); }

/* ── 3. CARDS — soft token shadow, gentle hover lift ─────────────────────── */
.sl-card,
.new-list-form,
.user-row-card {
  box-shadow: var(--shadow-sm) !important;
  border-color: var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.sl-card:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-2px); }

/* ── 4. CHIPS / BADGES — consistent pill, calmer weight ─────────────────── */
.chip, .badge, .tag, .pill {
  border-radius: var(--radius-pill) !important;
  font-weight: var(--fw-semibold);
  letter-spacing: .01em;
}

/* ── 6. TOASTS — token shadow + a subtle accent spine per status ─────────── */
.toast {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  border-left: 3px solid var(--accent);
}
.toast-success { border-left-color: var(--success); }
.toast-error   { border-left-color: var(--danger); }
.toast-warn    { border-left-color: var(--warning); }
.toast-info    { border-left-color: var(--info); }

/* ── 7. MODAL / DRAWER CHROME — rounder, deeper, calmer ─────────────────── */
.modal, .modal-backdrop > .modal, .drawer, .bd-modal {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}
.modal-backdrop { backdrop-filter: saturate(1.1) blur(2px); }
.modal-header { border-bottom: 1px solid var(--border-subtle); }
.modal-title { font-family: var(--font-display); letter-spacing: var(--tracking-tight); }

/* ── 8. EMPTY STATES — humane, never a grey void ─────────────────────────── */
.empty, .empty-state {
  text-align: center;
  padding: 40px 24px !important;
  color: var(--text-muted);
}
.empty-icon { color: var(--ink-400); opacity: .9; }
.empty p, .empty-state p { color: var(--text-body); font-weight: var(--fw-medium); }
/* Suggested-next-action buttons inside empty states (board / person drawer). */
.empty-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-top: 14px;
}
.empty-actions .bd-ctl,
.empty-actions .btn-action { font-size: 12.5px; }
.empty-cue {
  display: block; margin: 2px auto 0; max-width: 340px;
  font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
}

/* ── 9. BOARD — align the cockpit with the DS (primary black pill, etc.) ──
   board.js injects #bdCss at runtime (after this file), so board primaries are
   also corrected at source in board.js; these back this up for equal-specificity
   safety and restyle the drawer's suggested-action empty block. */
.bd-ctl.primary {
  background: var(--action) !important;
  border-color: var(--action) !important;
  color: var(--text-on-brand) !important;
}
.bd-ctl.primary:hover { background: var(--action-hover) !important; border-color: var(--action-hover) !important; }
.bd-mtab.on { color: var(--text-strong); border-bottom-color: var(--accent) !important; }
/* board drawer humane empty block */
.bd-emptyact {
  padding: 14px 4px 4px;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.bd-emptyact .bd-emptyact-t { color: var(--text-body); font-weight: var(--fw-semibold); margin-bottom: 8px; }
.bd-emptyact .empty-actions { justify-content: flex-start; }