/* ============================================================
 * HADEF /app skin — chrome re-skin to --hadef-* tokens
 * Created: 2026-04-27 (Design System Overhaul Phase 2 foundation)
 * Spec:    vault/01-Projects/HADEF/Design System Overhaul Spec.md
 * Loads:   AFTER tokens.css, AFTER app-shell.css, BEFORE inline <style>
 *
 * INTENT
 *   Re-skin the shared chrome that every /app page renders (sidebar,
 *   top bar, page header, card surface, sub-tabs, focus rings) to
 *   read from --hadef-* tokens. Add new utility classes the page-by-
 *   page Phase 2 swarm will use (hadef-eyebrow, hadef-btn, hadef-pill,
 *   hadef-contact, hadef-empty, hadef-skeleton, hadef-tile-stat,
 *   hadef-input, hadef-modal, hadef-table).
 *
 * PROVENANCE
 *   Every value below is sourced from one of:
 *     [v4]      = api/static/marketing-v4.css (the brand reference)
 *     [merc]    = Mercury bank dashboard convention
 *     [linear]  = Linear app sidebar / status convention
 *     [stripe]  = Stripe dashboard data-density convention
 *     [hadef]   = HADEF /app-specific addition
 *
 * CASCADE NOTE
 *   This file overrides the existing class definitions in app-shell.css
 *   for .sidebar, .nav-item, .card, .page-* and .sub-tab selectors.
 *   It uses higher specificity (body + class) where needed to win the
 *   cascade without resorting to !important.
 *
 * ROLLBACK
 *   git rm api/static/customer/app-skin.css
 *   Remove the corresponding <link> tag from each /app/*.html.
 * ============================================================ */


/* ── 1. CHROME RE-SKIN: sidebar ─────────────────────────────── */

body .sidebar {
  background: var(--hadef-sidebar);
  color: var(--hadef-on-dark);
}
body .sidebar.hadef-rail-divider {
  border-right: 1px solid var(--hadef-line);
}
body .sidebar-brand .sb-wordmark {
  font-family: var(--hadef-font-sans);
  font-size: 22px;
  font-weight: var(--hadef-weight-black);
  letter-spacing: var(--hadef-track-display);
  color: var(--hadef-on-dark);
}
body .sb-show-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hadef-line-on-dark);
  border-radius: var(--hadef-radius-sm);
  transition: background var(--hadef-dur-fast) var(--hadef-ease-standard);
}
body .sb-show-pill:hover { background: rgba(255, 255, 255, 0.10); }
body .sb-show-name {
  font-size: var(--hadef-text-body-s);
  font-weight: var(--hadef-weight-semi);
  color: var(--hadef-on-dark-soft);
}
body .sidebar-nav .nav-item {
  padding: 9px 11px;
  border-radius: var(--hadef-radius-sm);
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-caption);
  font-weight: var(--hadef-weight-medium);
  color: var(--hadef-on-dark-muted);
  transition:
    background var(--hadef-dur-fast) var(--hadef-ease-standard),
    color      var(--hadef-dur-fast) var(--hadef-ease-standard);
}
body .sidebar-nav .nav-item:hover {
  background: var(--hadef-sidebar-hover);
  color: var(--hadef-on-dark);
}
body .sidebar-nav .nav-item.active {
  background: var(--hadef-sidebar-active);
  color: var(--hadef-on-dark);
}
body .sidebar-nav .nav-item.active::before {
  content: "";
  position: absolute;
  left: -10px; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--hadef-accent);
  border-radius: 0 3px 3px 0;
}
body .nav-pill-soon {
  font-family: var(--hadef-font-mono);
  font-size: 9px;
  font-weight: var(--hadef-weight-semi);
  letter-spacing: var(--hadef-track-mono-tab);
  color: var(--hadef-on-dark-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hadef-line-on-dark);
  padding: 2px 7px;
  border-radius: var(--hadef-radius-pill);
  text-transform: uppercase;
}
body .nav-pill-count {
  font-family: var(--hadef-font-mono);
  font-size: 10px;
  font-weight: var(--hadef-weight-bold);
  color: var(--hadef-accent);
  background: rgba(232, 98, 26, 0.16);
  padding: 2px 7px;
  border-radius: var(--hadef-radius-pill);
}
body .nav-divider {
  height: 1px;
  background: var(--hadef-line-on-dark);
  margin: var(--hadef-space-3) 0;
  border: none;
}
body .sidebar-footer {
  padding: var(--hadef-space-3) var(--hadef-space-4);
  border-top: 1px solid var(--hadef-line-on-dark);
}
body .user-avatar {
  width: 32px; height: 32px;
  border-radius: var(--hadef-radius-pill);
  background: var(--hadef-accent-soft);
  color: var(--hadef-accent);
  font-family: var(--hadef-font-mono);
  font-size: 11px;
  font-weight: var(--hadef-weight-bold);
}
body .user-name {
  font-size: var(--hadef-text-label);
  font-weight: var(--hadef-weight-semi);
  color: var(--hadef-on-dark-soft);
  line-height: var(--hadef-lh-snug);
}


/* ── 2. CHROME RE-SKIN: main + page header ──────────────────── */

body .main { padding: var(--hadef-space-6) var(--hadef-space-6) var(--hadef-space-9); gap: var(--hadef-space-5); }
body .main::-webkit-scrollbar { width: 6px; }
body .main::-webkit-scrollbar-thumb { background: var(--hadef-line-strong); border-radius: 3px; }

body .page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hadef-space-4);
  margin-bottom: var(--hadef-space-1);
}
body .page-h {
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-h1);
  font-weight: var(--hadef-weight-black);
  letter-spacing: var(--hadef-track-tight);
  color: var(--hadef-ink);
  line-height: var(--hadef-lh-snug);
}
body .page-sub {
  font-size: var(--hadef-text-caption);
  color: var(--hadef-muted);
  margin-top: 2px;
  line-height: var(--hadef-lh-normal);
}
body .page-eyebrow {
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-eyebrow);
  font-weight: var(--hadef-weight-medium);
  letter-spacing: var(--hadef-track-eyebrow);
  text-transform: uppercase;
  color: var(--hadef-accent);
  margin-bottom: var(--hadef-space-2);
  display: block;
}


/* ── 3. CHROME RE-SKIN: card surface ────────────────────────── */
/* v4 grammar: shadows ground, hover lifts. Not glow, not bounce. */

body .card {
  background: var(--hadef-surface);
  border: 1px solid var(--hadef-line);
  border-radius: var(--hadef-radius-lg);
  padding: var(--hadef-space-5);
  box-shadow: var(--hadef-shadow-card);
  transition:
    box-shadow var(--hadef-dur-base) var(--hadef-ease-standard),
    transform  var(--hadef-dur-base) var(--hadef-ease-standard),
    border-color var(--hadef-dur-fast) var(--hadef-ease-standard);
}
body .card:hover {
  box-shadow: var(--hadef-shadow-hover);
  transform: translateY(-2px);
  border-color: var(--hadef-line-strong);
}


/* ── 4. CHROME RE-SKIN: sub-tabs ────────────────────────────── */

body .sub-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  background: rgba(28, 25, 23, 0.04);
  border-radius: var(--hadef-radius-md);
  margin-bottom: var(--hadef-space-2);
}
body .sub-tab {
  padding: 7px 14px;
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-body-s);
  font-weight: var(--hadef-weight-semi);
  color: var(--hadef-muted);
  border-radius: var(--hadef-radius-sm);
  cursor: pointer;
  transition:
    background var(--hadef-dur-fast) var(--hadef-ease-standard),
    color      var(--hadef-dur-fast) var(--hadef-ease-standard);
}
body .sub-tab.active {
  background: var(--hadef-surface);
  color: var(--hadef-ink);
  box-shadow: var(--hadef-shadow-xs);
}
body .sub-tab:hover:not(.active) { color: var(--hadef-ink); }


/* ── 5. CHROME RE-SKIN: focus-visible everywhere ────────────── */

body :focus-visible,
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body textarea:focus-visible,
body select:focus-visible,
body [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--hadef-shadow-focus);
  border-radius: var(--hadef-radius-sm);
}


/* ── 6. CHROME RE-SKIN: skip link ───────────────────────────── */

body .skip-link {
  background: var(--hadef-accent);
  color: var(--hadef-on-accent);
  padding: 8px 16px;
  border-radius: var(--hadef-radius-sm);
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-caption);
  font-weight: var(--hadef-weight-semi);
  transition: top var(--hadef-dur-base) var(--hadef-ease-standard);
}


/* ============================================================
 * NEW UTILITY CLASSES
 * Pages opt into these by class name. Phase 2 swarm uses these
 * to replace inline declarations page by page.
 * ============================================================ */


/* ── 7. .hadef-eyebrow — the cadence-maker ──────────────────── */
/* The most important utility on the system. Every section opens with one. */

.hadef-eyebrow {
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-eyebrow);
  font-weight: var(--hadef-weight-medium);
  letter-spacing: var(--hadef-track-eyebrow);
  text-transform: uppercase;
  color: var(--hadef-accent);
  display: block;
  margin: 0 0 var(--hadef-space-3);
  line-height: var(--hadef-lh-flat);
}
.hadef-eyebrow--muted { color: var(--hadef-muted); }
.hadef-eyebrow--ondark { color: var(--hadef-accent); }


/* ── 8. .hadef-btn — button system ──────────────────────────── */

.hadef-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hadef-space-2);
  padding: 10px 18px;
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-body-s);
  font-weight: var(--hadef-weight-semi);
  line-height: var(--hadef-lh-flat);
  border: 1px solid transparent;
  border-radius: var(--hadef-radius);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--hadef-dur-fast) var(--hadef-ease-standard),
    border-color var(--hadef-dur-fast) var(--hadef-ease-standard),
    color var(--hadef-dur-fast) var(--hadef-ease-standard),
    transform var(--hadef-dur-instant) var(--hadef-ease-standard);
}
.hadef-btn:active { transform: scale(0.97); }
.hadef-btn--primary {
  background: var(--hadef-ink);
  color: var(--hadef-on-dark);
  border-color: var(--hadef-ink);
}
.hadef-btn--primary:hover {
  background: #000;
  border-color: #000;
}
.hadef-btn--accent {
  background: var(--hadef-accent);
  color: var(--hadef-on-accent);
  border-color: var(--hadef-accent);
  box-shadow: var(--hadef-shadow-accent);
}
.hadef-btn--accent:hover {
  background: var(--hadef-accent-hover);
  border-color: var(--hadef-accent-hover);
}
.hadef-btn--ghost {
  background: transparent;
  color: var(--hadef-ink);
  border-color: var(--hadef-line-strong);
}
.hadef-btn--ghost:hover {
  background: var(--hadef-bg-alt);
  border-color: var(--hadef-ink);
}
.hadef-btn--small { padding: 6px 12px; font-size: var(--hadef-text-eyebrow); }
.hadef-btn--large { padding: 12px 22px; font-size: var(--hadef-text-body); }
.hadef-btn[disabled],
.hadef-btn--disabled { opacity: 0.5; cursor: not-allowed; }


/* ── 9. .hadef-pill — badge / status / count ────────────────── */

.hadef-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--hadef-space-1);
  padding: 4px 10px;
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-eyebrow);
  font-weight: var(--hadef-weight-semi);
  letter-spacing: var(--hadef-track-mono-tab);
  text-transform: uppercase;
  border-radius: var(--hadef-radius-sm);              /* status: 8px (linear) */
  background: var(--hadef-bg-alt);
  color: var(--hadef-ink);
  line-height: var(--hadef-lh-flat);
  white-space: nowrap;
}
.hadef-pill--count   { border-radius: var(--hadef-radius-pill); }   /* counts: full pill */
.hadef-pill--accent  { background: var(--hadef-accent-soft); color: var(--hadef-accent); }
.hadef-pill--success { background: var(--hadef-green-soft);  color: var(--hadef-green); }
.hadef-pill--info    { background: var(--hadef-blue-soft);   color: var(--hadef-blue); }
.hadef-pill--warn    { background: var(--hadef-amber-soft);  color: var(--hadef-amber); }
.hadef-pill--error   { background: var(--hadef-red-soft);    color: var(--hadef-red); }
.hadef-pill--ai      { background: var(--hadef-purple-soft); color: var(--hadef-purple); }


/* ── 10. .hadef-contact — contact card (Mercury list register) */

.hadef-contact {
  display: flex;
  align-items: center;
  gap: var(--hadef-space-3);
  padding: var(--hadef-space-4);
  background: var(--hadef-surface);
  border: 1px solid var(--hadef-line);
  border-radius: var(--hadef-radius-md);
  transition: background var(--hadef-dur-fast) var(--hadef-ease-standard);
}
.hadef-contact:hover { background: rgba(28, 25, 23, 0.02); }
.hadef-contact__avatar {
  width: 32px; height: 32px;
  border-radius: var(--hadef-radius-pill);
  object-fit: cover;
  border: 1px solid var(--hadef-line);
  flex-shrink: 0;
  background: var(--hadef-bg-alt);
}
.hadef-contact__body { flex: 1; min-width: 0; }
.hadef-contact__name {
  font-size: var(--hadef-text-body-s);
  font-weight: var(--hadef-weight-semi);
  color: var(--hadef-ink);
  line-height: var(--hadef-lh-snug);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hadef-contact__meta {
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-label);
  color: var(--hadef-muted);
  margin-top: 2px;
  letter-spacing: var(--hadef-track-default);
}


/* ── 11. .hadef-empty — Stripe-register empty state ──────────── */

.hadef-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--hadef-space-8) var(--hadef-space-5);
  max-width: 360px;
  margin: 0 auto;
  gap: var(--hadef-space-3);
}
.hadef-empty__eyebrow {
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-eyebrow);
  font-weight: var(--hadef-weight-medium);
  letter-spacing: var(--hadef-track-eyebrow);
  text-transform: uppercase;
  color: var(--hadef-muted);
}
.hadef-empty__title {
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-h3);
  font-weight: var(--hadef-weight-bold);
  color: var(--hadef-ink);
  letter-spacing: var(--hadef-track-tight);
  line-height: var(--hadef-lh-snug);
}
.hadef-empty__body {
  font-size: var(--hadef-text-body-s);
  color: var(--hadef-muted);
  line-height: var(--hadef-lh-normal);
}


/* ── 12. .hadef-skeleton — Stripe-register shimmer ──────────── */
/* Cream-on-cream-alt only. Never purple/blue. */

.hadef-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--hadef-bg) 0%,
    var(--hadef-bg-alt) 50%,
    var(--hadef-bg) 100%
  );
  background-size: 200% 100%;
  animation: hadef-shimmer 1.4s linear infinite;
  border-radius: var(--hadef-radius-sm);
  height: 14px;
}
.hadef-skeleton--title { height: 22px; border-radius: var(--hadef-radius-sm); }
.hadef-skeleton--block { height: 120px; border-radius: var(--hadef-radius-md); }

@keyframes hadef-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}


/* ── 13. .hadef-table — Stripe-density data table ───────────── */

.hadef-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-body-s);
  color: var(--hadef-ink);
}
.hadef-table thead th {
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-eyebrow);
  font-weight: var(--hadef-weight-medium);
  letter-spacing: var(--hadef-track-eyebrow);
  text-transform: uppercase;
  color: var(--hadef-muted);
  text-align: left;
  padding: 10px 16px;
  border-bottom: 1px solid var(--hadef-line);
  background: transparent;
}
.hadef-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--hadef-line);
  color: var(--hadef-ink);
  line-height: var(--hadef-lh-normal);
}
.hadef-table tbody tr {
  transition: background var(--hadef-dur-fast) var(--hadef-ease-standard);
}
.hadef-table tbody tr:hover { background: rgba(28, 25, 23, 0.02); }


/* ── 14. .hadef-input — input + textarea + select ───────────── */

.hadef-input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-body-s);
  color: var(--hadef-ink);
  background: var(--hadef-surface);
  border: 1px solid var(--hadef-line);
  border-radius: var(--hadef-radius);
  line-height: var(--hadef-lh-normal);
  transition:
    border-color var(--hadef-dur-fast) var(--hadef-ease-standard),
    box-shadow var(--hadef-dur-fast) var(--hadef-ease-standard);
}
.hadef-input::placeholder { color: var(--hadef-ghost); }
.hadef-input:focus {
  outline: none;
  border-color: var(--hadef-ink);
  box-shadow: var(--hadef-shadow-focus);
}
.hadef-input--pill { border-radius: var(--hadef-radius-pill); padding-left: 18px; padding-right: 18px; }


/* ── 15. .hadef-modal — centered dialog (Linear cmd-K register) */

.hadef-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(28, 25, 23, 0.4);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  z-index: var(--hadef-z-modal);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hadef-dur-fast) var(--hadef-ease-standard);
}
.hadef-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.hadef-modal {
  background: var(--hadef-surface);
  border: 1px solid var(--hadef-line);
  border-radius: var(--hadef-radius-lg);
  box-shadow: var(--hadef-shadow-modal);
  padding: var(--hadef-space-7);
  width: min(92vw, 560px);
  max-height: 76vh;
  overflow: auto;
  transform: scale(0.96);
  transition: transform var(--hadef-dur-fast) var(--hadef-ease-standard);
}
.hadef-modal-backdrop.is-open .hadef-modal { transform: scale(1); }
.hadef-modal__title {
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-h3);
  font-weight: var(--hadef-weight-bold);
  color: var(--hadef-ink);
  letter-spacing: var(--hadef-track-tight);
  line-height: var(--hadef-lh-snug);
  margin-bottom: var(--hadef-space-2);
}


/* ── 16. .hadef-tile-stat — Mercury KPI register ─────────────── */
/* The number is the hero. Tabular nums, tight tracking, big weight. */

.hadef-tile-stat {
  display: flex;
  flex-direction: column;
  gap: var(--hadef-space-1);
}
.hadef-tile-stat__eyebrow {
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-eyebrow);
  font-weight: var(--hadef-weight-medium);
  letter-spacing: var(--hadef-track-eyebrow);
  text-transform: uppercase;
  color: var(--hadef-muted);
}
.hadef-tile-stat__number {
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-mono-stat);
  font-weight: var(--hadef-weight-black);
  font-variant-numeric: tabular-nums;
  color: var(--hadef-ink);
  line-height: var(--hadef-lh-flat);
  letter-spacing: -0.01em;
}
.hadef-tile-stat__delta {
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-eyebrow);
  font-weight: var(--hadef-weight-semi);
  color: var(--hadef-muted);
  line-height: var(--hadef-lh-snug);
}
.hadef-tile-stat__delta--up   { color: var(--hadef-green); }
.hadef-tile-stat__delta--down { color: var(--hadef-red); }


/* ── 17. .hadef-section — sectional grouping pattern ────────── */

.hadef-section {
  display: flex;
  flex-direction: column;
  gap: var(--hadef-space-4);
}
.hadef-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hadef-space-3);
}
.hadef-section__title {
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-h3);
  font-weight: var(--hadef-weight-bold);
  color: var(--hadef-ink);
  letter-spacing: var(--hadef-track-tight);
  line-height: var(--hadef-lh-snug);
}


/* ── 18. .hadef-toast — Sonner-shaped toast surface ─────────── */

.hadef-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--hadef-space-3);
  padding: var(--hadef-space-4);
  background: var(--hadef-ink);
  color: var(--hadef-on-dark);
  border-radius: var(--hadef-radius-md);
  box-shadow: var(--hadef-shadow-modal);
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-body-s);
  line-height: var(--hadef-lh-normal);
  max-width: 380px;
}
.hadef-toast--success { border-left: 3px solid var(--hadef-green); }
.hadef-toast--error   { border-left: 3px solid var(--hadef-red); }
.hadef-toast--warn    { border-left: 3px solid var(--hadef-amber); }


/* ── 19. .hadef-divider — section break ──────────────────────── */

.hadef-divider {
  border: none;
  border-top: 1px solid var(--hadef-line);
  margin: var(--hadef-space-5) 0;
}
.hadef-divider--strong { border-top-color: var(--hadef-line-strong); }


/* ── 20. Reduced motion override ────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body .card,
  body .nav-item,
  body .sub-tab,
  body .skip-link,
  .hadef-btn,
  .hadef-contact,
  .hadef-input,
  .hadef-modal,
  .hadef-modal-backdrop,
  .hadef-table tbody tr {
    transition: none;
    animation: none;
  }
  .hadef-skeleton { animation: none; background: var(--hadef-bg-alt); }
  body .card:hover { transform: none; }
}


/* ===============================================================
   Cluster A/B layout primitives — added 2026-04-27
   Built from tokens.css. No raw hex / px outside the rhythm.
   =============================================================== */

/* 1. Cream card — extends marketing-v4 four-card pattern */
.hadef-card-cream {
  background: var(--hadef-bg-alt);
  border: 1px solid var(--hadef-line);
  border-radius: var(--hadef-radius-lg);
  padding: var(--hadef-space-6);
  box-shadow: var(--hadef-shadow-card);
  transition: box-shadow var(--hadef-dur-fast) var(--hadef-ease-standard),
              transform var(--hadef-dur-fast) var(--hadef-ease-standard);
}
.hadef-card-cream:hover {
  box-shadow: var(--hadef-shadow-pop);
}

/* 2. Eyebrow row — Anthropic eyebrow pattern */
.hadef-eyebrow-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--hadef-space-3) 0;
  border-bottom: 1px solid var(--hadef-line);
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-eyebrow);
  font-weight: var(--hadef-weight-medium);
  letter-spacing: var(--hadef-track-eyebrow);
  text-transform: uppercase;
}
.hadef-eyebrow-row .label { color: var(--hadef-muted); }
.hadef-eyebrow-row .value { color: var(--hadef-ink); }

/* 3. Tabular price — display-weight numeric, mono-feel digits */
.hadef-tabular-price {
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-display-m);
  font-weight: var(--hadef-weight-black);
  line-height: var(--hadef-lh-flat);
  letter-spacing: var(--hadef-track-display);
  font-variant-numeric: tabular-nums;
  color: var(--hadef-ink);
  margin: var(--hadef-space-4) 0 var(--hadef-space-2);
}
.hadef-tabular-price .cycle {
  font-size: var(--hadef-text-body-s);
  font-weight: var(--hadef-weight-regular);
  color: var(--hadef-muted);
  margin-left: var(--hadef-space-2);
}

/* 4. Record header — Linear product page header pattern */
.hadef-record-header {
  padding: var(--hadef-space-8) 0 var(--hadef-space-6);
  border-bottom: 1px solid var(--hadef-line);
  margin-bottom: var(--hadef-space-6);
}
.hadef-record-header .eyebrow {
  display: block;
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-eyebrow);
  font-weight: var(--hadef-weight-medium);
  letter-spacing: var(--hadef-track-eyebrow);
  text-transform: uppercase;
  color: var(--hadef-accent);
  margin-bottom: var(--hadef-space-2);
}
.hadef-record-header h1 {
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-display-m);
  font-weight: var(--hadef-weight-black);
  line-height: var(--hadef-lh-tight);
  letter-spacing: var(--hadef-track-tight);
  margin: 0;
  color: var(--hadef-ink);
}

/* 5. Rail divider — soft sidebar edge */
.hadef-rail-divider {
  border-right: 1px solid var(--hadef-line);
}

/* 6. Editorial row — Anthropic /news list pattern */
.hadef-editorial-row {
  display: grid;
  grid-template-columns: var(--hadef-layout-editorial-meta-w) 1fr auto;
  gap: var(--hadef-space-5);
  padding: var(--hadef-space-5) 0;
  border-bottom: 1px solid var(--hadef-line);
  align-items: start;
}
.hadef-editorial-row .eyebrow {
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-eyebrow);
  font-weight: var(--hadef-weight-medium);
  letter-spacing: var(--hadef-track-eyebrow);
  text-transform: uppercase;
  color: var(--hadef-muted);
}
.hadef-editorial-row h3 {
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-h2);
  font-weight: var(--hadef-weight-bold);
  line-height: var(--hadef-lh-snug);
  margin: 0 0 var(--hadef-space-1);
  color: var(--hadef-ink);
}
.hadef-editorial-row .body {
  font-size: var(--hadef-text-body);
  line-height: var(--hadef-lh-normal);
  color: var(--hadef-muted);
}

/* 7. Pill CTA — full-width black pill, Anthropic CTA pattern */
.hadef-pill-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hadef-space-2);
  width: 100%;
  padding: var(--hadef-space-4) var(--hadef-space-5);
  background: var(--hadef-ink);
  color: var(--hadef-bg);
  border: none;
  border-radius: var(--hadef-radius-pill);
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-body-s);
  font-weight: var(--hadef-weight-semi);
  cursor: pointer;
  transition: opacity var(--hadef-dur-fast) var(--hadef-ease-standard);
}
.hadef-pill-cta:hover { opacity: 0.85; }
.hadef-pill-cta .arrow { font-size: var(--hadef-text-body); }

/* Popular pill — orange accent on featured pricing tile */
.hadef-card-cream.is-popular {
  border-color: var(--hadef-accent);
  position: relative;
}
.hadef-card-cream.is-popular::before {
  content: "POPULAR";
  position: absolute;
  top: var(--hadef-offset-popular-pill);
  left: var(--hadef-space-5);
  background: var(--hadef-accent);
  color: var(--hadef-on-accent);
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-eyebrow);
  font-weight: var(--hadef-weight-semi);
  letter-spacing: var(--hadef-track-eyebrow);
  padding: var(--hadef-space-1) var(--hadef-space-3);
  border-radius: var(--hadef-radius-pill);
}

/* Home: cream tiles coexist with legacy .tile shell */
body .main .tile.hadef-card-cream {
  background: var(--hadef-bg-alt);
  border: 1px solid var(--hadef-line);
  border-radius: var(--hadef-radius-lg);
  box-shadow: var(--hadef-shadow-card);
}
body .main .tile.hadef-card-cream:hover {
  box-shadow: var(--hadef-shadow-pop);
}

/* Following: cream contact cards + legacy pipeline link */
.follow-card-wrap .hadef-card-cream.contact-card.follow-card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow var(--hadef-dur-fast) var(--hadef-ease-standard);
}
.follow-card-wrap .hadef-card-cream.contact-card.follow-card:focus-visible {
  outline: 2px solid var(--hadef-accent);
  outline-offset: 2px;
}

/* ===============================================================
   Cluster C — buttons (added 2026-04-27, prompt 62)
   =============================================================== */

/* Base button — shared rhythm + focus ring */
.hadef-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hadef-space-2);
  padding: var(--hadef-space-3) var(--hadef-space-5);
  border-radius: var(--hadef-radius);
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-body-s);
  font-weight: var(--hadef-weight-semi);
  letter-spacing: var(--hadef-track-default);
  cursor: pointer;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  min-height: var(--hadef-tap-min);
  transition: background var(--hadef-dur-fast) var(--hadef-ease-standard),
              opacity var(--hadef-dur-fast) var(--hadef-ease-standard),
              transform var(--hadef-dur-instant) var(--hadef-ease-emphasized);
}
.hadef-btn:active { transform: translateY(1px); }
.hadef-btn:focus-visible {
  outline: none;
  box-shadow: var(--hadef-shadow-focus);
}
.hadef-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Primary — orange accent CTA */
.hadef-btn-primary {
  background: var(--hadef-accent);
  color: var(--hadef-on-accent);
  box-shadow: var(--hadef-shadow-accent);
}
.hadef-btn-primary:hover { background: var(--hadef-accent-hover); }

/* Secondary — ink ghost button on cream */
.hadef-btn-secondary {
  background: var(--hadef-ink);
  color: var(--hadef-bg);
}
.hadef-btn-secondary:hover { opacity: 0.85; }

/* Ghost — transparent with hairline border */
.hadef-btn-ghost {
  background: transparent;
  color: var(--hadef-ink);
  border: 1px solid var(--hadef-line);
}
.hadef-btn-ghost:hover {
  background: var(--hadef-bg-alt);
  border-color: var(--hadef-line-strong);
}

/* Icon — square, just an icon */
.hadef-btn-icon {
  width: var(--hadef-tap-min);
  height: var(--hadef-tap-min);
  padding: 0;
  background: transparent;
  color: var(--hadef-muted);
  border-radius: var(--hadef-radius-sm);
}
.hadef-btn-icon:hover {
  background: var(--hadef-bg-alt);
  color: var(--hadef-ink);
}

/* Send — pitch-specific accent treatment */
.hadef-btn-send {
  background: var(--hadef-accent-soft);
  color: var(--hadef-accent);
  border: 1px solid var(--hadef-accent);
}
.hadef-btn-send:hover { background: var(--hadef-accent); color: var(--hadef-on-accent); }

/* Size modifiers */
.hadef-btn-sm { padding: var(--hadef-space-2) var(--hadef-space-4); font-size: var(--hadef-text-caption); min-height: var(--hadef-btn-min-sm); }
.hadef-btn-lg { padding: var(--hadef-space-4) var(--hadef-space-6); font-size: var(--hadef-text-body); min-height: var(--hadef-btn-min-lg); }

/* Width modifiers */
.hadef-btn-full { width: 100%; }

/* ===============================================================
   Cluster C — inputs (added 2026-04-27, prompt 62)
   =============================================================== */

/* Form group — label + input + helper */
.hadef-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--hadef-space-2);
  margin-bottom: var(--hadef-space-5);
}
.hadef-form-group label {
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-body-s);
  font-weight: var(--hadef-weight-medium);
  color: var(--hadef-ink-soft);
}
.hadef-form-group .helper {
  font-size: var(--hadef-text-caption);
  color: var(--hadef-muted);
  margin-top: var(--hadef-space-1);
}
.hadef-form-group .error {
  font-size: var(--hadef-text-caption);
  color: var(--hadef-red);
  margin-top: var(--hadef-space-1);
}

/* Form section — grouped fields with section header */
.hadef-form-section {
  padding: var(--hadef-space-6) 0;
  border-bottom: 1px solid var(--hadef-line);
}
.hadef-form-section h3 {
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-h3);
  font-weight: var(--hadef-weight-semi);
  margin: 0 0 var(--hadef-space-4);
  color: var(--hadef-ink);
}

/* Text input — shared base */
.hadef-input,
.hadef-textarea,
.hadef-select {
  width: 100%;
  padding: var(--hadef-space-3) var(--hadef-space-4);
  background: var(--hadef-surface);
  color: var(--hadef-ink);
  border: 1px solid var(--hadef-line);
  border-radius: var(--hadef-radius-sm);
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-body);
  line-height: var(--hadef-lh-normal);
  transition: border-color var(--hadef-dur-fast) var(--hadef-ease-standard),
              box-shadow var(--hadef-dur-fast) var(--hadef-ease-standard);
}
.hadef-input::placeholder,
.hadef-textarea::placeholder { color: var(--hadef-ghost); }
.hadef-input:focus,
.hadef-textarea:focus,
.hadef-select:focus {
  outline: none;
  border-color: var(--hadef-accent);
  box-shadow: var(--hadef-shadow-focus);
}
.hadef-input:disabled,
.hadef-textarea:disabled { background: var(--hadef-bg-alt); cursor: not-allowed; }

/* Textarea — taller default */
.hadef-textarea {
  min-height: var(--hadef-textarea-min-h);
  resize: vertical;
  font-family: var(--hadef-font-sans);
}

/* Pill input — rounded for search/command */
.hadef-input-pill {
  border-radius: var(--hadef-radius-pill);
  padding: var(--hadef-space-3) var(--hadef-space-5);
  background: var(--hadef-bg-alt);
  border-color: transparent;
}

/* URL input with action — combined input + button */
.hadef-input-action {
  display: flex;
  align-items: stretch;
  background: var(--hadef-surface);
  border: 1px solid var(--hadef-line);
  border-radius: var(--hadef-radius);
  overflow: hidden;
  transition: border-color var(--hadef-dur-fast) var(--hadef-ease-standard);
}
.hadef-input-action:focus-within { border-color: var(--hadef-accent); box-shadow: var(--hadef-shadow-focus); }
.hadef-input-action input {
  flex: 1;
  border: none;
  background: transparent;
  padding: var(--hadef-space-3) var(--hadef-space-4);
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-body);
  color: var(--hadef-ink);
}
.hadef-input-action input:focus { outline: none; }
.hadef-input-action button {
  border: none;
  background: var(--hadef-accent);
  color: var(--hadef-on-accent);
  padding: 0 var(--hadef-space-5);
  font-weight: var(--hadef-weight-semi);
  cursor: pointer;
}

/* Checkbox + radio — visually consistent */
.hadef-checkbox,
.hadef-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--hadef-space-2);
  cursor: pointer;
  font-size: var(--hadef-text-body-s);
  color: var(--hadef-ink);
}
.hadef-checkbox input[type="checkbox"],
.hadef-radio input[type="radio"] {
  width: var(--hadef-size-control);
  height: var(--hadef-size-control);
  accent-color: var(--hadef-accent);
  margin: 0;
}

/* Toggle/switch */
.hadef-toggle {
  position: relative;
  display: inline-block;
  width: var(--hadef-toggle-track-w);
  height: var(--hadef-toggle-track-h);
}
.hadef-toggle input { opacity: 0; width: 0; height: 0; }
.hadef-toggle .track {
  position: absolute;
  inset: 0;
  background: var(--hadef-line);
  border-radius: var(--hadef-radius-pill);
  transition: background var(--hadef-dur-fast) var(--hadef-ease-standard);
  cursor: pointer;
}
.hadef-toggle .track::before {
  content: "";
  position: absolute;
  width: var(--hadef-toggle-thumb);
  height: var(--hadef-toggle-thumb);
  left: var(--hadef-space-hair);
  top: var(--hadef-space-hair);
  background: var(--hadef-surface);
  border-radius: var(--hadef-radius-pill);
  transition: transform var(--hadef-dur-fast) var(--hadef-ease-standard);
  box-shadow: var(--hadef-shadow-xs);
}
.hadef-toggle input:checked + .track { background: var(--hadef-accent); }
.hadef-toggle input:checked + .track::before { transform: translateX(var(--hadef-toggle-travel)); }

/* ===============================================================
   Cluster C — status / feedback (added 2026-04-27, prompt 62)
   =============================================================== */

/* Toast — bottom-right transient */
.hadef-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--hadef-space-3);
  position: fixed;
  bottom: var(--hadef-space-6);
  right: var(--hadef-space-6);
  background: var(--hadef-ink);
  color: var(--hadef-bg);
  padding: var(--hadef-space-4) var(--hadef-space-5);
  border-radius: var(--hadef-radius);
  box-shadow: var(--hadef-shadow-modal);
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-body-s);
  line-height: var(--hadef-lh-normal);
  z-index: var(--hadef-z-toast);
  max-width: var(--hadef-max-toast);
  animation: hadef-toast-in var(--hadef-dur-base) var(--hadef-ease-standard);
}
.hadef-toast-success { background: var(--hadef-green); }
.hadef-toast-error { background: var(--hadef-red); }
.hadef-toast-warn { background: var(--hadef-amber); color: var(--hadef-ink); }
@keyframes hadef-toast-in {
  from { opacity: 0; transform: translateY(var(--hadef-space-2)); }
  to { opacity: 1; transform: translateY(0); }
}

/* Inline alert — within forms or content */
.hadef-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--hadef-space-3);
  padding: var(--hadef-space-4);
  border-radius: var(--hadef-radius);
  font-size: var(--hadef-text-body-s);
  line-height: var(--hadef-lh-normal);
}
.hadef-alert-info { background: var(--hadef-blue-soft); color: var(--hadef-blue); }
.hadef-alert-success { background: var(--hadef-green-soft); color: var(--hadef-green); }
.hadef-alert-warn { background: var(--hadef-amber-soft); color: var(--hadef-amber); }
.hadef-alert-error { background: var(--hadef-red-soft); color: var(--hadef-red); }

/* Banner alert — full-width page-level */
.hadef-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hadef-space-4);
  padding: var(--hadef-space-4) var(--hadef-space-6);
  background: var(--hadef-amber-soft);
  color: var(--hadef-ink);
  border-bottom: 1px solid var(--hadef-line);
  font-size: var(--hadef-text-body-s);
}
.hadef-banner-info { background: var(--hadef-blue-soft); }
.hadef-banner-error { background: var(--hadef-red-soft); }

/* Status pill — small colored state indicator */
.hadef-pill-status {
  display: inline-flex;
  align-items: center;
  gap: var(--hadef-space-1);
  padding: var(--hadef-space-hair) var(--hadef-space-3);
  border-radius: var(--hadef-radius-pill);
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-eyebrow);
  font-weight: var(--hadef-weight-medium);
  letter-spacing: var(--hadef-track-mono-tab);
  text-transform: uppercase;
}
.hadef-pill-status::before {
  content: "";
  width: var(--hadef-dot-status);
  height: var(--hadef-dot-status);
  border-radius: 50%;
  background: currentColor;
}
.hadef-pill-active { background: var(--hadef-green-soft); color: var(--hadef-green); }
.hadef-pill-pending { background: var(--hadef-amber-soft); color: var(--hadef-amber); }
.hadef-pill-stale { background: var(--hadef-bg-alt); color: var(--hadef-muted); }
.hadef-pill-error { background: var(--hadef-red-soft); color: var(--hadef-red); }

/* Badge — count or label */
.hadef-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--hadef-size-control);
  height: var(--hadef-size-control);
  padding: 0 var(--hadef-badge-pad-x);
  border-radius: var(--hadef-radius-pill);
  background: var(--hadef-accent);
  color: var(--hadef-on-accent);
  font-size: var(--hadef-text-micro);
  font-weight: var(--hadef-weight-semi);
  line-height: var(--hadef-lh-flat);
}

/* Progress bar — onboarding wizard, plan usage */
.hadef-progress {
  width: 100%;
  height: var(--hadef-progress-track-h);
  background: var(--hadef-line);
  border-radius: var(--hadef-radius-pill);
  overflow: hidden;
}
.hadef-progress-fill {
  height: 100%;
  background: var(--hadef-accent);
  border-radius: var(--hadef-radius-pill);
  transition: width var(--hadef-dur-base) var(--hadef-ease-standard);
}

/* Skeleton loader — placeholder shimmer */
.hadef-skeleton {
  display: block;
  background: linear-gradient(90deg,
    var(--hadef-bg-alt) 0%,
    var(--hadef-surface-sunken) 50%,
    var(--hadef-bg-alt) 100%);
  background-size: 200% 100%;
  border-radius: var(--hadef-radius-sm);
  animation: hadef-skeleton-shimmer var(--hadef-dur-shimmer) var(--hadef-ease-linear) infinite;
  min-height: var(--hadef-skeleton-min-h);
}
@keyframes hadef-skeleton-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* Spinner — circular loader */
.hadef-spinner {
  display: inline-block;
  width: var(--hadef-size-control);
  height: var(--hadef-size-control);
  border: var(--hadef-border-spinner) solid var(--hadef-line);
  border-top-color: var(--hadef-accent);
  border-radius: 50%;
  animation: hadef-spinner-rotate var(--hadef-dur-spinner) var(--hadef-ease-linear) infinite;
}
@keyframes hadef-spinner-rotate {
  to { transform: rotate(360deg); }
}

/* Cluster C loads after §14 — restore pill modifier specificity */
.hadef-input--pill {
  border-radius: var(--hadef-radius-pill);
  padding-left: var(--hadef-space-5);
  padding-right: var(--hadef-space-5);
}

/* ===============================================================
   Cluster D — navigation (added 2026-04-27, prompt 63)
   =============================================================== */

/* Tab bar — page-level (Linear underline pattern) */
.hadef-tabbar {
  display: flex;
  gap: var(--hadef-space-6);
  border-bottom: 1px solid var(--hadef-line);
  margin-bottom: var(--hadef-space-6);
}
.hadef-tab {
  padding: var(--hadef-space-3) 0;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--hadef-muted);
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-body-s);
  font-weight: var(--hadef-weight-medium);
  cursor: pointer;
  transition: color var(--hadef-dur-fast) var(--hadef-ease-standard),
              border-color var(--hadef-dur-fast) var(--hadef-ease-standard);
  margin-bottom: -1px;
  text-decoration: none;
}
.hadef-tab:hover { color: var(--hadef-ink-soft); }
.hadef-tab.is-active,
.hadef-tab.active {
  color: var(--hadef-ink);
  border-bottom-color: var(--hadef-accent);
}
.hadef-tab .count {
  margin-left: var(--hadef-space-2);
  padding: 0 var(--hadef-space-2);
  background: var(--hadef-bg-alt);
  border-radius: var(--hadef-radius-pill);
  font-size: var(--hadef-text-eyebrow);
  color: var(--hadef-muted);
}

/* Sub-tabs — in-content nav (Brain feed / Prompts / Campaigns) */
.hadef-subtabs {
  display: flex;
  gap: var(--hadef-space-2);
  padding: var(--hadef-space-1);
  background: var(--hadef-bg-alt);
  border-radius: var(--hadef-radius-pill);
  width: fit-content;
  flex-wrap: wrap;
}
.hadef-subtab {
  padding: var(--hadef-space-2) var(--hadef-space-4);
  background: transparent;
  border: none;
  border-radius: var(--hadef-radius-pill);
  color: var(--hadef-muted);
  font-size: var(--hadef-text-body-s);
  font-weight: var(--hadef-weight-medium);
  cursor: pointer;
  transition: all var(--hadef-dur-fast) var(--hadef-ease-standard);
  font-family: var(--hadef-font-sans);
}
.hadef-subtab.is-active,
.hadef-subtab.active {
  background: var(--hadef-surface);
  color: var(--hadef-ink);
  box-shadow: var(--hadef-shadow-xs);
}

/* Sort tabs — Attio date-range pill toggle (7D / 30D / 3M / All) */
.hadef-sorttabs {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--hadef-line);
  border-radius: var(--hadef-radius);
  overflow: hidden;
}
.hadef-sorttab {
  padding: var(--hadef-space-2) var(--hadef-space-4);
  background: transparent;
  border: none;
  border-right: 1px solid var(--hadef-line);
  color: var(--hadef-muted);
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-eyebrow);
  font-weight: var(--hadef-weight-medium);
  letter-spacing: var(--hadef-track-mono-tab);
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--hadef-dur-fast) var(--hadef-ease-standard);
}
.hadef-sorttab:last-child { border-right: none; }
.hadef-sorttab:hover { background: var(--hadef-bg-alt); }
.hadef-sorttab.is-active,
.hadef-sorttab.active {
  background: var(--hadef-ink);
  color: var(--hadef-bg);
}

/* Filter pill — Notion-style chip with label + value */
.hadef-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--hadef-space-2);
  padding: var(--hadef-space-2) var(--hadef-space-3);
  background: var(--hadef-bg-alt);
  border: 1px solid var(--hadef-line);
  border-radius: var(--hadef-radius-pill);
  font-size: var(--hadef-text-body-s);
  color: var(--hadef-ink);
  cursor: pointer;
  transition: border-color var(--hadef-dur-fast) var(--hadef-ease-standard);
}
.hadef-filter-pill:hover { border-color: var(--hadef-line-strong); }
.hadef-filter-pill .label { color: var(--hadef-muted); }
.hadef-filter-pill .value { color: var(--hadef-ink); font-weight: var(--hadef-weight-medium); }
.hadef-filter-pill .clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--hadef-line);
  color: var(--hadef-muted);
  font-size: 10px;
  cursor: pointer;
}
.hadef-filter-pill .clear:hover { background: var(--hadef-ink); color: var(--hadef-bg); }

/* Search input — pill-shaped with icon */
.hadef-search {
  display: flex;
  align-items: center;
  gap: var(--hadef-space-2);
  padding: var(--hadef-space-2) var(--hadef-space-4);
  background: var(--hadef-bg-alt);
  border: 1px solid transparent;
  border-radius: var(--hadef-radius-pill);
  width: 320px;
  max-width: 100%;
  transition: border-color var(--hadef-dur-fast) var(--hadef-ease-standard);
}
.hadef-search:focus-within { border-color: var(--hadef-accent); background: var(--hadef-surface); }
.hadef-search .icon { color: var(--hadef-muted); flex-shrink: 0; }
.hadef-search input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-body-s);
  color: var(--hadef-ink);
  outline: none;
  min-width: 0;
}
.hadef-search input::placeholder { color: var(--hadef-ghost); }
.hadef-search .kbd {
  font-family: var(--hadef-font-mono);
  font-size: 10px;
  padding: 2px 6px;
  background: var(--hadef-surface);
  border: 1px solid var(--hadef-line);
  border-radius: var(--hadef-radius-xs);
  color: var(--hadef-muted);
}

/* Breadcrumb — for detail pages */
.hadef-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--hadef-space-2);
  font-size: var(--hadef-text-body-s);
  color: var(--hadef-muted);
}
.hadef-breadcrumb a {
  color: var(--hadef-muted);
  text-decoration: none;
  transition: color var(--hadef-dur-fast) var(--hadef-ease-standard);
}
.hadef-breadcrumb a:hover { color: var(--hadef-ink); }
.hadef-breadcrumb .separator { color: var(--hadef-line-strong); }
.hadef-breadcrumb .current { color: var(--hadef-ink); font-weight: var(--hadef-weight-medium); }

/* Command palette — Stripe CMD-K pattern */
.hadef-cmdk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 25, 23, 0.4);
  backdrop-filter: blur(4px);
  z-index: var(--hadef-z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  animation: hadef-cmdk-fade var(--hadef-dur-fast) var(--hadef-ease-standard);
}
.hadef-cmdk-panel {
  width: 560px;
  max-width: 92vw;
  background: var(--hadef-surface);
  border-radius: var(--hadef-radius-lg);
  box-shadow: var(--hadef-shadow-modal);
  overflow: hidden;
}
.hadef-cmdk-input {
  width: 100%;
  padding: var(--hadef-space-5);
  border: none;
  border-bottom: 1px solid var(--hadef-line);
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-body-l);
  color: var(--hadef-ink);
  outline: none;
  box-sizing: border-box;
}
.hadef-cmdk-input::placeholder { color: var(--hadef-ghost); }
.hadef-cmdk-list { max-height: 400px; overflow-y: auto; padding: var(--hadef-space-2); }
.hadef-cmdk-item {
  display: flex;
  align-items: center;
  gap: var(--hadef-space-3);
  padding: var(--hadef-space-3) var(--hadef-space-4);
  border-radius: var(--hadef-radius);
  cursor: pointer;
  font-size: var(--hadef-text-body-s);
  color: var(--hadef-ink);
}
.hadef-cmdk-item:hover,
.hadef-cmdk-item.is-active { background: var(--hadef-bg-alt); }
.hadef-cmdk-item .icon { color: var(--hadef-muted); }
.hadef-cmdk-item .shortcut {
  margin-left: auto;
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-eyebrow);
  color: var(--hadef-muted);
}
.hadef-cmdk-footer {
  padding: var(--hadef-space-3) var(--hadef-space-5);
  border-top: 1px solid var(--hadef-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--hadef-space-4);
  font-size: var(--hadef-text-eyebrow);
  color: var(--hadef-muted);
}
.hadef-cmdk-footer kbd {
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-eyebrow);
  padding: 2px 6px;
  background: var(--hadef-bg-alt);
  border: 1px solid var(--hadef-line);
  border-radius: var(--hadef-radius-xs);
}
@keyframes hadef-cmdk-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Pipeline — Cluster D chips win over legacy #pipelineDash filter-pill rules */
body #pipelineDash .hadef-filter-pill.filter-pill {
  font-size: var(--hadef-text-body-s);
  font-weight: var(--hadef-weight-medium);
  padding: var(--hadef-space-2) var(--hadef-space-3);
  border-radius: var(--hadef-radius-pill);
  border: 1px solid var(--hadef-line);
  background: var(--hadef-bg-alt);
  color: var(--hadef-ink);
}
body #pipelineDash .hadef-filter-pill.filter-pill:hover {
  border-color: var(--hadef-line-strong);
  background: var(--hadef-bg-alt);
}
body #pipelineDash .hadef-filter-pill.filter-pill.is-active {
  background: var(--hadef-ink);
  border-color: var(--hadef-ink);
  color: var(--hadef-bg);
}
body #pipelineDash .hadef-filter-pill.filter-pill.is-active .label,
body #pipelineDash .hadef-filter-pill.filter-pill.is-active .value {
  color: inherit;
}

/* Pipeline (/app/pipeline.html) toolbar chips */
body .pl-toolbar .hadef-filter-pill.pl-filter-btn {
  cursor: pointer;
  font-family: var(--hadef-font-sans);
}
body .pl-toolbar .hadef-filter-pill.pl-filter-btn.active {
  background: var(--hadef-ink);
  border-color: var(--hadef-ink);
  color: var(--hadef-bg);
}
body .pl-toolbar .hadef-filter-pill.pl-filter-btn.active .label,
body .pl-toolbar .hadef-filter-pill.pl-filter-btn.active .value {
  color: inherit;
}
body .pl-toolbar .hadef-filter-pill--campaign {
  cursor: default;
  gap: var(--hadef-space-2);
}
body .pl-toolbar .hadef-filter-pill--campaign select {
  cursor: pointer;
  max-width: 200px;
}

/* ===============================================================
   Cluster I — loading choreography (added 2026-04-28, prompt 69)
   =============================================================== */

/* Post-login welcome loader — full-screen hold over /app/home */
.hadef-welcome-loader {
  position: fixed;
  inset: 0;
  z-index: var(--hadef-z-modal);
  background: var(--hadef-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--hadef-space-7);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hadef-dur-base) var(--hadef-ease-standard);
}
.hadef-welcome-loader.is-active {
  opacity: 1;
  pointer-events: auto;
}
.hadef-welcome-loader.is-fading {
  opacity: 0;
  pointer-events: none;
}

/* Logomark — pulse + soft scale */
.hadef-welcome-loader .logomark {
  width: 96px;
  height: 96px;
  display: block;
  animation: hadef-welcome-pulse 2.4s var(--hadef-ease-standard) infinite;
}
@keyframes hadef-welcome-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: 0.85; }
}

/* Narrative steps stack */
.hadef-welcome-steps {
  display: flex;
  flex-direction: column;
  gap: var(--hadef-space-3);
  max-width: 320px;
  width: 100%;
  text-align: left;
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-body);
  color: var(--hadef-ink-soft);
  min-height: 132px;
}
.hadef-welcome-step {
  display: flex;
  align-items: center;
  gap: var(--hadef-space-3);
  padding: var(--hadef-space-3) 0;
  opacity: 0.3;
  transform: translateY(4px);
  transition:
    opacity var(--hadef-dur-base) var(--hadef-ease-standard),
    transform var(--hadef-dur-base) var(--hadef-ease-standard);
}
.hadef-welcome-step.is-active {
  opacity: 1;
  transform: translateY(0);
  color: var(--hadef-ink);
}
.hadef-welcome-step.is-done {
  opacity: 0.55;
  transform: translateY(0);
  color: var(--hadef-muted);
}

/* Step indicator — small dot that fills as it progresses */
.hadef-welcome-step .indicator {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--hadef-line-strong);
  flex-shrink: 0;
  transition: all var(--hadef-dur-base) var(--hadef-ease-standard);
}
.hadef-welcome-step.is-active .indicator {
  border-color: var(--hadef-accent);
  background: var(--hadef-accent);
  box-shadow: 0 0 0 4px var(--hadef-accent-glow);
  animation: hadef-welcome-dot 1.6s var(--hadef-ease-standard) infinite;
}
.hadef-welcome-step.is-done .indicator {
  border-color: var(--hadef-green);
  background: var(--hadef-green);
}
.hadef-welcome-step.is-done .indicator::after {
  content: "";
  display: block;
  width: 4px;
  height: 7px;
  margin: 1px auto 0;
  border: solid var(--hadef-on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
@keyframes hadef-welcome-dot {
  0%, 100% { box-shadow: 0 0 0 4px var(--hadef-accent-glow); }
  50% { box-shadow: 0 0 0 8px transparent; }
}

/* Skip affordance — small ghost link bottom-right */
.hadef-welcome-skip {
  position: absolute;
  bottom: var(--hadef-space-5);
  right: var(--hadef-space-5);
  background: transparent;
  border: none;
  color: var(--hadef-muted);
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-caption);
  cursor: pointer;
  padding: var(--hadef-space-2) var(--hadef-space-3);
  border-radius: var(--hadef-radius-sm);
}
.hadef-welcome-skip:hover { color: var(--hadef-ink); background: var(--hadef-bg-alt); }

/* Pitch-run progress drawer — slides in from right */
.hadef-run-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 92vw;
  background: var(--hadef-surface);
  box-shadow: var(--hadef-shadow-modal);
  z-index: calc(var(--hadef-z-modal) - 10);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--hadef-dur-base) var(--hadef-ease-standard);
}
.hadef-run-drawer.is-open { transform: translateX(0); }

.hadef-run-drawer-header {
  padding: var(--hadef-space-6);
  border-bottom: 1px solid var(--hadef-line);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hadef-space-3);
}
.hadef-run-drawer-header .eyebrow {
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-eyebrow);
  font-weight: var(--hadef-weight-medium);
  letter-spacing: var(--hadef-track-eyebrow);
  text-transform: uppercase;
  color: var(--hadef-accent);
  margin-bottom: var(--hadef-space-2);
  display: block;
}
.hadef-run-drawer-header h2 {
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-h2);
  font-weight: var(--hadef-weight-bold);
  margin: 0;
  color: var(--hadef-ink);
  line-height: var(--hadef-lh-snug);
}
.hadef-run-drawer-header .actions {
  display: flex;
  gap: var(--hadef-space-2);
  flex-shrink: 0;
}

.hadef-run-drawer-body {
  padding: var(--hadef-space-5) var(--hadef-space-6);
  overflow-y: auto;
  flex: 1;
}

/* Step list inside drawer — same DNA as welcome loader steps */
.hadef-run-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hadef-run-step {
  display: flex;
  align-items: flex-start;
  gap: var(--hadef-space-3);
  padding: var(--hadef-space-4) 0;
  border-bottom: 1px solid var(--hadef-line);
  font-size: var(--hadef-text-body-s);
  color: var(--hadef-muted);
}
.hadef-run-step:last-child { border-bottom: none; }
.hadef-run-step .indicator {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--hadef-line-strong);
  flex-shrink: 0;
  margin-top: 3px;
}
.hadef-run-step.is-active {
  color: var(--hadef-ink);
}
.hadef-run-step.is-active .indicator {
  border-color: var(--hadef-accent);
  background: var(--hadef-accent);
  box-shadow: 0 0 0 3px var(--hadef-accent-glow);
  animation: hadef-welcome-dot 1.6s var(--hadef-ease-standard) infinite;
}
.hadef-run-step.is-done {
  color: var(--hadef-muted);
}
.hadef-run-step.is-done .indicator {
  border-color: var(--hadef-green);
  background: var(--hadef-green);
  position: relative;
}
.hadef-run-step.is-done .indicator::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 7px;
  border: solid var(--hadef-on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.hadef-run-step .body {
  flex: 1;
  line-height: var(--hadef-lh-normal);
}
.hadef-run-step .body .label {
  display: block;
  font-weight: var(--hadef-weight-medium);
  color: inherit;
  margin-bottom: 2px;
}
.hadef-run-step .body .detail {
  font-size: var(--hadef-text-caption);
  color: var(--hadef-muted);
}

.hadef-run-drawer-footer {
  padding: var(--hadef-space-4) var(--hadef-space-6);
  border-top: 1px solid var(--hadef-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--hadef-text-caption);
  color: var(--hadef-muted);
  background: var(--hadef-surface);
}

/* Minimized pitch-run pill — bottom right, follows the user */
.hadef-run-pill {
  position: fixed;
  bottom: var(--hadef-space-5);
  right: var(--hadef-space-5);
  background: var(--hadef-ink);
  color: var(--hadef-bg);
  border-radius: var(--hadef-radius-pill);
  padding: var(--hadef-space-3) var(--hadef-space-4);
  display: flex;
  align-items: center;
  gap: var(--hadef-space-3);
  box-shadow: var(--hadef-shadow-pop);
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-body-s);
  z-index: var(--hadef-z-overlay);
  cursor: pointer;
  max-width: 320px;
  transition: transform var(--hadef-dur-fast) var(--hadef-ease-standard),
              box-shadow var(--hadef-dur-fast) var(--hadef-ease-standard);
}
.hadef-run-pill:hover {
  transform: translateY(-2px);
  box-shadow: var(--hadef-shadow-modal);
}
.hadef-run-pill .pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hadef-accent);
  flex-shrink: 0;
  animation: hadef-pill-pulse 1.4s var(--hadef-ease-standard) infinite;
}
@keyframes hadef-pill-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}
.hadef-run-pill .label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hadef-run-pill .elapsed {
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-caption);
  color: var(--hadef-on-dark-muted);
  font-variant-numeric: tabular-nums;
}

/* Reduced motion override */
@media (prefers-reduced-motion: reduce) {
  .hadef-welcome-loader .logomark,
  .hadef-welcome-step.is-active .indicator,
  .hadef-run-step.is-active .indicator,
  .hadef-run-pill .pulse {
    animation: none;
  }
  .hadef-welcome-loader,
  .hadef-run-drawer { transition: none; }
}

/* Cluster D — beat legacy body .sub-tabs when both classes are present */
body .hadef-subtabs.sub-tabs {
  display: flex;
  gap: var(--hadef-space-2);
  padding: var(--hadef-space-1);
  background: var(--hadef-bg-alt);
  border-radius: var(--hadef-radius-pill);
  width: fit-content;
  max-width: 100%;
}
body .hadef-subtab.sub-tab {
  padding: var(--hadef-space-2) var(--hadef-space-4);
  border-radius: var(--hadef-radius-pill);
  border: none;
  background: transparent;
  font-weight: var(--hadef-weight-medium);
}
body .hadef-subtab.sub-tab.active {
  background: var(--hadef-surface);
  color: var(--hadef-ink);
  box-shadow: var(--hadef-shadow-xs);
}

/* ===============================================================
   Cluster E — overlays (added 2026-04-27, prompt 64)
   =============================================================== */

/* Backdrop — shared by modal + side panel */
.hadef-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28, 25, 23, 0.4);
  backdrop-filter: blur(4px);
  z-index: var(--hadef-z-modal);
  animation: hadef-fade-in var(--hadef-dur-fast) var(--hadef-ease-standard);
}

/* Generic dialog — centered modal */
.hadef-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  max-width: 92vw;
  max-height: 86vh;
  background: var(--hadef-surface);
  border-radius: var(--hadef-radius-lg);
  box-shadow: var(--hadef-shadow-modal);
  z-index: calc(var(--hadef-z-modal) + 1);
  display: flex;
  flex-direction: column;
  animation: hadef-dialog-in var(--hadef-dur-base) var(--hadef-ease-standard);
}
.hadef-dialog-header {
  padding: var(--hadef-space-6) var(--hadef-space-6) var(--hadef-space-4);
  border-bottom: 1px solid var(--hadef-line);
}
.hadef-dialog-header .eyebrow {
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-eyebrow);
  font-weight: var(--hadef-weight-medium);
  letter-spacing: var(--hadef-track-eyebrow);
  text-transform: uppercase;
  color: var(--hadef-muted);
  margin-bottom: var(--hadef-space-2);
}
.hadef-dialog-header h2 {
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-h1);
  font-weight: var(--hadef-weight-bold);
  margin: 0;
  color: var(--hadef-ink);
}
.hadef-dialog-body {
  padding: var(--hadef-space-5) var(--hadef-space-6);
  overflow-y: auto;
  flex: 1;
  font-size: var(--hadef-text-body);
  line-height: var(--hadef-lh-normal);
  color: var(--hadef-ink-soft);
}
.hadef-dialog-footer {
  padding: var(--hadef-space-4) var(--hadef-space-6);
  border-top: 1px solid var(--hadef-line);
  display: flex;
  justify-content: flex-end;
  gap: var(--hadef-space-3);
}
.hadef-dialog-close {
  position: absolute;
  top: var(--hadef-space-4);
  right: var(--hadef-space-4);
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--hadef-muted);
  border-radius: var(--hadef-radius-sm);
  cursor: pointer;
  font-size: 18px;
}
.hadef-dialog-close:hover {
  background: var(--hadef-bg-alt);
  color: var(--hadef-ink);
}

/* Destructive variant — for cancel sub, delete confirm */
.hadef-dialog.is-destructive .hadef-dialog-header { border-bottom-color: var(--hadef-red-soft); }
.hadef-dialog.is-destructive .hadef-dialog-header h2 { color: var(--hadef-red); }

/* Side panel — Linear right-slide drawer */
.hadef-side-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 520px;
  max-width: 92vw;
  background: var(--hadef-surface);
  box-shadow: var(--hadef-shadow-modal);
  z-index: calc(var(--hadef-z-modal) + 1);
  display: flex;
  flex-direction: column;
  animation: hadef-panel-in var(--hadef-dur-base) var(--hadef-ease-standard);
}
.hadef-side-panel-header {
  padding: var(--hadef-space-6);
  border-bottom: 1px solid var(--hadef-line);
}
.hadef-side-panel-header .eyebrow {
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-eyebrow);
  font-weight: var(--hadef-weight-medium);
  letter-spacing: var(--hadef-track-eyebrow);
  text-transform: uppercase;
  color: var(--hadef-accent);
  margin-bottom: var(--hadef-space-2);
}
.hadef-side-panel-header h2 {
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-display-m);
  font-weight: var(--hadef-weight-black);
  line-height: var(--hadef-lh-tight);
  margin: 0;
  color: var(--hadef-ink);
}
.hadef-side-panel-body {
  padding: var(--hadef-space-6);
  overflow-y: auto;
  flex: 1;
}
.hadef-side-panel-footer {
  padding: var(--hadef-space-5) var(--hadef-space-6);
  border-top: 1px solid var(--hadef-line);
  display: flex;
  justify-content: flex-end;
  gap: var(--hadef-space-3);
  background: var(--hadef-surface);
}

/* Tooltip — hover-reveal short text */
.hadef-tooltip {
  position: absolute;
  padding: var(--hadef-space-2) var(--hadef-space-3);
  background: var(--hadef-ink);
  color: var(--hadef-bg);
  border-radius: var(--hadef-radius-sm);
  font-size: var(--hadef-text-caption);
  white-space: nowrap;
  z-index: var(--hadef-z-overlay);
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity var(--hadef-dur-fast) var(--hadef-ease-standard),
              transform var(--hadef-dur-fast) var(--hadef-ease-standard);
}
.hadef-tooltip.is-visible { opacity: 1; transform: translateY(0); }
.hadef-tooltip::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--hadef-ink);
}

/* Popover — click-reveal with rich content */
.hadef-popover {
  position: absolute;
  background: var(--hadef-surface);
  border: 1px solid var(--hadef-line);
  border-radius: var(--hadef-radius);
  box-shadow: var(--hadef-shadow-pop);
  padding: var(--hadef-space-4);
  min-width: 240px;
  z-index: var(--hadef-z-overlay);
  font-size: var(--hadef-text-body-s);
}
.hadef-popover-header {
  font-weight: var(--hadef-weight-semi);
  color: var(--hadef-ink);
  margin-bottom: var(--hadef-space-2);
}
.hadef-popover-body { color: var(--hadef-ink-soft); line-height: var(--hadef-lh-normal); }

/* Animations */
@keyframes hadef-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hadef-dialog-in {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes hadef-panel-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* ===============================================================
   Cluster G — onboarding (added 2026-04-27, prompt 66)
   =============================================================== */

/* First-run hero — large CTA on first /app/home visit */
.hadef-first-run-hero {
  padding: var(--hadef-space-9) var(--hadef-space-6);
  background: var(--hadef-bg-alt);
  border: 1px solid var(--hadef-line);
  border-radius: var(--hadef-radius-xl);
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.hadef-first-run-hero .eyebrow {
  display: inline-block;
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-eyebrow);
  font-weight: var(--hadef-weight-medium);
  letter-spacing: var(--hadef-track-eyebrow);
  text-transform: uppercase;
  color: var(--hadef-accent);
  margin-bottom: var(--hadef-space-3);
}
.hadef-first-run-hero h1 {
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-display-l);
  font-weight: var(--hadef-weight-black);
  line-height: var(--hadef-lh-tight);
  letter-spacing: var(--hadef-track-display);
  color: var(--hadef-ink);
  margin: 0 0 var(--hadef-space-4);
}
.hadef-first-run-hero p {
  font-size: var(--hadef-text-body-l);
  line-height: var(--hadef-lh-normal);
  color: var(--hadef-ink-soft);
  max-width: 560px;
  margin: 0 auto var(--hadef-space-6);
}

/* Setup progress widget — Stripe "Activate" floating pill */
.hadef-setup-progress {
  position: fixed;
  bottom: var(--hadef-space-6);
  right: var(--hadef-space-6);
  background: var(--hadef-surface);
  border: 1px solid var(--hadef-line);
  border-radius: var(--hadef-radius-lg);
  box-shadow: var(--hadef-shadow-pop);
  padding: var(--hadef-space-4);
  width: 280px;
  z-index: var(--hadef-z-overlay);
  cursor: pointer;
  transition: box-shadow var(--hadef-dur-fast) var(--hadef-ease-standard);
}
.hadef-setup-progress:hover { box-shadow: var(--hadef-shadow-modal); }
.hadef-setup-progress.is-collapsed {
  width: auto;
  padding: var(--hadef-space-3) var(--hadef-space-4);
  border-radius: var(--hadef-radius-pill);
}
.hadef-setup-progress.is-collapsed .hadef-setup-progress-body { display: none; }
.hadef-setup-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hadef-space-3);
  margin-bottom: var(--hadef-space-3);
}
.hadef-setup-progress.is-collapsed .hadef-setup-progress-header { margin-bottom: 0; }
.hadef-setup-progress-header .label {
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-eyebrow);
  font-weight: var(--hadef-weight-medium);
  letter-spacing: var(--hadef-track-eyebrow);
  text-transform: uppercase;
  color: var(--hadef-muted);
}
.hadef-setup-progress-header .count {
  font-size: var(--hadef-text-body-s);
  font-weight: var(--hadef-weight-semi);
  color: var(--hadef-ink);
}
.hadef-setup-progress-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--hadef-space-2);
}
.hadef-setup-progress-item {
  display: flex;
  align-items: center;
  gap: var(--hadef-space-2);
  font-size: var(--hadef-text-body-s);
  color: var(--hadef-ink-soft);
  padding: var(--hadef-space-1) 0;
}
.hadef-setup-progress-item .check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--hadef-line-strong);
  flex-shrink: 0;
}
.hadef-setup-progress-item.is-done { color: var(--hadef-muted); text-decoration: line-through; }
.hadef-setup-progress-item.is-done .check {
  background: var(--hadef-green);
  border-color: var(--hadef-green);
  position: relative;
}
.hadef-setup-progress-item.is-done .check::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid var(--hadef-on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Spotlight tour — overlay highlight + tooltip */
.hadef-spotlight-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 25, 23, 0.6);
  z-index: var(--hadef-z-modal);
  pointer-events: auto;
}
.hadef-spotlight-cutout {
  position: absolute;
  border-radius: var(--hadef-radius);
  box-shadow: 0 0 0 4px var(--hadef-accent-glow), 0 0 0 9999px rgba(28, 25, 23, 0.6);
  pointer-events: none;
  transition: top var(--hadef-dur-base) var(--hadef-ease-standard),
              left var(--hadef-dur-base) var(--hadef-ease-standard),
              width var(--hadef-dur-base) var(--hadef-ease-standard),
              height var(--hadef-dur-base) var(--hadef-ease-standard);
}
.hadef-spotlight-tooltip {
  position: absolute;
  width: 320px;
  background: var(--hadef-surface);
  border-radius: var(--hadef-radius-lg);
  box-shadow: var(--hadef-shadow-modal);
  padding: var(--hadef-space-5);
  z-index: calc(var(--hadef-z-modal) + 1);
}
.hadef-spotlight-tooltip h3 {
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-h3);
  font-weight: var(--hadef-weight-bold);
  color: var(--hadef-ink);
  margin: 0 0 var(--hadef-space-2);
}
.hadef-spotlight-tooltip p {
  font-size: var(--hadef-text-body-s);
  line-height: var(--hadef-lh-normal);
  color: var(--hadef-ink-soft);
  margin: 0 0 var(--hadef-space-4);
}
.hadef-spotlight-tooltip .footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--hadef-text-caption);
}
.hadef-spotlight-tooltip .step {
  font-family: var(--hadef-font-mono);
  color: var(--hadef-muted);
  letter-spacing: var(--hadef-track-mono-tab);
}
.hadef-spotlight-tooltip .actions {
  display: flex;
  gap: var(--hadef-space-2);
}

/* Tutorial card — instructional callout that can dismiss */
.hadef-tutorial-card {
  position: relative;
  padding: var(--hadef-space-5);
  background: var(--hadef-accent-soft);
  border: 1px solid var(--hadef-accent);
  border-radius: var(--hadef-radius);
  margin-bottom: var(--hadef-space-5);
}
.hadef-tutorial-card .eyebrow {
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-eyebrow);
  font-weight: var(--hadef-weight-medium);
  letter-spacing: var(--hadef-track-eyebrow);
  text-transform: uppercase;
  color: var(--hadef-accent);
  margin-bottom: var(--hadef-space-2);
}
.hadef-tutorial-card h4 {
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-h3);
  font-weight: var(--hadef-weight-semi);
  color: var(--hadef-ink);
  margin: 0 0 var(--hadef-space-2);
}
.hadef-tutorial-card p {
  color: var(--hadef-ink-soft);
  line-height: var(--hadef-lh-normal);
  margin: 0;
  padding-right: var(--hadef-space-7);
}
.hadef-tutorial-card-dismiss {
  position: absolute;
  top: var(--hadef-space-3);
  right: var(--hadef-space-3);
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--hadef-accent);
  cursor: pointer;
  font-size: 16px;
  border-radius: var(--hadef-radius-sm);
}
.hadef-tutorial-card-dismiss:hover { background: var(--hadef-accent); color: var(--hadef-on-accent); }

/* ===============================================================
   Cluster H — data viz (added 2026-04-27, prompt 67)
   =============================================================== */

/* Stat with delta — Mercury account balance pattern */
.hadef-stat {
  display: flex;
  flex-direction: column;
  gap: var(--hadef-space-2);
}
.hadef-stat .eyebrow {
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-eyebrow);
  font-weight: var(--hadef-weight-medium);
  letter-spacing: var(--hadef-track-eyebrow);
  text-transform: uppercase;
  color: var(--hadef-muted);
}
.hadef-stat .value {
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-display-l);
  font-weight: var(--hadef-weight-black);
  line-height: var(--hadef-lh-flat);
  letter-spacing: var(--hadef-track-display);
  font-variant-numeric: tabular-nums;
  color: var(--hadef-ink);
}
.hadef-stat .delta {
  display: inline-flex;
  align-items: center;
  gap: var(--hadef-space-1);
  font-size: var(--hadef-text-body-s);
  font-weight: var(--hadef-weight-medium);
  font-variant-numeric: tabular-nums;
}
.hadef-stat .delta.is-up { color: var(--hadef-green); }
.hadef-stat .delta.is-down { color: var(--hadef-red); }
.hadef-stat .delta.is-flat { color: var(--hadef-muted); }
.hadef-stat .delta .arrow { font-size: 14px; line-height: 1; }
.hadef-stat .period {
  font-size: var(--hadef-text-caption);
  color: var(--hadef-muted);
}

/* Calendar grid — month view */
.hadef-calendar {
  border: 1px solid var(--hadef-line);
  border-radius: var(--hadef-radius);
  overflow: hidden;
  background: var(--hadef-surface);
}
.hadef-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--hadef-space-4) var(--hadef-space-5);
  border-bottom: 1px solid var(--hadef-line);
  background: var(--hadef-bg-alt);
}
.hadef-calendar-header h3 {
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-h3);
  font-weight: var(--hadef-weight-semi);
  color: var(--hadef-ink);
  margin: 0;
}
.hadef-calendar-header .nav {
  display: flex;
  gap: var(--hadef-space-2);
}
.hadef-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--hadef-line);
  background: var(--hadef-bg-alt);
}
.hadef-calendar-weekday {
  padding: var(--hadef-space-2);
  text-align: center;
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-eyebrow);
  font-weight: var(--hadef-weight-medium);
  letter-spacing: var(--hadef-track-mono-tab);
  text-transform: uppercase;
  color: var(--hadef-muted);
}
.hadef-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.hadef-calendar-day {
  min-height: 96px;
  padding: var(--hadef-space-2);
  border-right: 1px solid var(--hadef-line);
  border-bottom: 1px solid var(--hadef-line);
  background: var(--hadef-surface);
  cursor: pointer;
  transition: background var(--hadef-dur-fast) var(--hadef-ease-standard);
  position: relative;
}
.hadef-calendar-day:nth-child(7n) { border-right: none; }
.hadef-calendar-day:hover { background: var(--hadef-bg-alt); }
.hadef-calendar-day.is-other-month { background: var(--hadef-bg); color: var(--hadef-ghost); }
.hadef-calendar-day.is-today { background: var(--hadef-accent-soft); }
.hadef-calendar-day.is-today .date-num { color: var(--hadef-accent); font-weight: var(--hadef-weight-bold); }
.hadef-calendar-day .date-num {
  display: block;
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-body-s);
  font-weight: var(--hadef-weight-medium);
  color: var(--hadef-ink);
  margin-bottom: var(--hadef-space-1);
}
.hadef-calendar-event {
  display: block;
  padding: 2px var(--hadef-space-1);
  background: var(--hadef-accent-soft);
  color: var(--hadef-accent);
  border-radius: var(--hadef-radius-xs);
  font-size: 11px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hadef-calendar-event-dot {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--hadef-accent);
}

/* Funnel chart — Stripe-style horizontal bars with conversion */
.hadef-funnel {
  display: flex;
  flex-direction: column;
  gap: var(--hadef-space-3);
}
.hadef-funnel-stage {
  display: grid;
  grid-template-columns: 140px 1fr 80px 60px;
  align-items: center;
  gap: var(--hadef-space-3);
}
.hadef-funnel-stage .label {
  font-size: var(--hadef-text-body-s);
  font-weight: var(--hadef-weight-medium);
  color: var(--hadef-ink);
}
.hadef-funnel-stage .bar {
  height: 32px;
  background: var(--hadef-bg-alt);
  border-radius: var(--hadef-radius-sm);
  overflow: hidden;
  position: relative;
}
.hadef-funnel-stage .bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--hadef-accent), var(--hadef-accent-hover));
  border-radius: var(--hadef-radius-sm);
  transition: width var(--hadef-dur-base) var(--hadef-ease-standard);
}
.hadef-funnel-stage .count {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: var(--hadef-text-body-s);
  font-weight: var(--hadef-weight-semi);
  color: var(--hadef-ink);
}
.hadef-funnel-stage .pct {
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-caption);
  color: var(--hadef-muted);
  text-align: right;
}
.hadef-funnel-stage .pct.is-good { color: var(--hadef-green); }
.hadef-funnel-stage .pct.is-warn { color: var(--hadef-amber); }
.hadef-funnel-stage .pct.is-bad { color: var(--hadef-red); }

/* Sparkline — tiny inline trend in a stat */
.hadef-sparkline {
  display: inline-block;
  width: 60px;
  height: 18px;
  vertical-align: middle;
  margin-left: var(--hadef-space-2);
}
.hadef-sparkline path {
  fill: none;
  stroke: var(--hadef-accent);
  stroke-width: 1.5;
}
.hadef-sparkline.is-up path { stroke: var(--hadef-green); }
.hadef-sparkline.is-down path { stroke: var(--hadef-red); }

/* ===============================================================
   Cluster F — tables (added 2026-04-27, prompt 65)
   =============================================================== */

/* Table base — Attio row table pattern */
.hadef-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--hadef-surface);
  border: 1px solid var(--hadef-line);
  border-radius: var(--hadef-radius);
  overflow: hidden;
  font-size: var(--hadef-text-body-s);
  color: var(--hadef-ink);
}

/* Header — sticky on scroll */
.hadef-table thead {
  background: var(--hadef-bg-alt);
  border-bottom: 1px solid var(--hadef-line);
}
.hadef-table thead th {
  padding: var(--hadef-space-3) var(--hadef-space-4);
  text-align: left;
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-eyebrow);
  font-weight: var(--hadef-weight-medium);
  letter-spacing: var(--hadef-track-mono-tab);
  text-transform: uppercase;
  color: var(--hadef-muted);
  border-bottom: 1px solid var(--hadef-line);
  position: sticky;
  top: 0;
  z-index: var(--hadef-z-raised);
}
.hadef-table thead th.numeric { text-align: right; }
.hadef-table thead th.sortable {
  cursor: pointer;
  user-select: none;
}
.hadef-table thead th.sortable:hover { color: var(--hadef-ink); }
.hadef-table thead th.is-sorted { color: var(--hadef-ink); }
.hadef-table thead th .sort-arrow { margin-left: var(--hadef-space-1); opacity: 0.5; }
.hadef-table thead th.is-sorted .sort-arrow { opacity: 1; color: var(--hadef-accent); }

/* Body rows — hairline separators, hover tint */
.hadef-table tbody tr {
  border-bottom: 1px solid var(--hadef-line);
  transition: background var(--hadef-dur-fast) var(--hadef-ease-standard);
}
.hadef-table tbody tr:last-child { border-bottom: none; }
.hadef-table tbody tr:hover { background: var(--hadef-bg-alt); }
.hadef-table tbody tr.is-selected { background: var(--hadef-accent-soft); }
.hadef-table tbody td {
  padding: var(--hadef-space-3) var(--hadef-space-4);
  vertical-align: middle;
  color: var(--hadef-ink);
}
.hadef-table tbody td.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hadef-table tbody td.muted { color: var(--hadef-muted); }

/* Compact density — for /app/insights detail tables */
.hadef-table-compact tbody td,
.hadef-table-compact thead th { padding: var(--hadef-space-2) var(--hadef-space-3); }

/* Comfortable density — for /app/pipeline list view */
.hadef-table-comfortable tbody td,
.hadef-table-comfortable thead th { padding: var(--hadef-space-4) var(--hadef-space-5); }

/* Avatar cell — small inline avatar + name */
.hadef-cell-avatar {
  display: flex;
  align-items: center;
  gap: var(--hadef-space-3);
}
.hadef-cell-avatar .avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--hadef-radius-pill);
  background: var(--hadef-surface-sunken);
  flex-shrink: 0;
}
.hadef-cell-avatar .name { font-weight: var(--hadef-weight-medium); }
.hadef-cell-avatar .sub { display: block; font-size: var(--hadef-text-caption); color: var(--hadef-muted); }

/* Logo + domain cell — Attio pattern */
.hadef-cell-domain {
  display: inline-flex;
  align-items: center;
  gap: var(--hadef-space-2);
  padding: 2px var(--hadef-space-2);
  background: var(--hadef-bg-alt);
  border-radius: var(--hadef-radius-sm);
  font-family: var(--hadef-font-mono);
  font-size: var(--hadef-text-caption);
  color: var(--hadef-muted);
}

/* Empty state — table-shaped */
.hadef-table-empty {
  padding: var(--hadef-space-10) var(--hadef-space-6);
  text-align: center;
  background: var(--hadef-surface);
  border: 1px dashed var(--hadef-line-strong);
  border-radius: var(--hadef-radius);
}
.hadef-table-empty .icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--hadef-space-4);
  color: var(--hadef-muted);
}
.hadef-table-empty h3 {
  font-family: var(--hadef-font-sans);
  font-size: var(--hadef-text-h2);
  font-weight: var(--hadef-weight-bold);
  margin: 0 0 var(--hadef-space-2);
  color: var(--hadef-ink);
}
.hadef-table-empty p {
  color: var(--hadef-muted);
  max-width: 360px;
  margin: 0 auto var(--hadef-space-5);
  line-height: var(--hadef-lh-normal);
}

/* Pipeline list view — wrapper over .hadef-table with action column */
.hadef-pipeline-list .hadef-table tbody tr { cursor: pointer; }
.hadef-pipeline-list .row-actions {
  display: flex;
  gap: var(--hadef-space-1);
  opacity: 0;
  transition: opacity var(--hadef-dur-fast) var(--hadef-ease-standard);
}
.hadef-pipeline-list tbody tr:hover .row-actions { opacity: 1; }