/* Aria shared style base. v3 (2026-05) - tightened tokens, quieter palette,
   higher-contrast focus rings, gentler shadows, calmer motion. Mirrors patterns
   from Linear, Stripe, Attio, Radix and shadcn while keeping AiR's blue/cyan.
   Every class the JS sidebar emits is preserved. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  /* ============ BRAND (recognisable, slightly evolved) ============ */
  --air-blue:#0046a8;            /* tightened from #004aad to feel less neon */
  --air-blue-deep:#003280;
  --air-blue-soft:#e8efff;
  --air-blue-soft-2:#dde7ff;
  /* Accent removed 2026-06-04: brand uses primary + secondary only.
     --air-cyan is kept as an ALIAS for --air-blue so all existing var() lookups
     resolve, but visually there is no separate accent any more. */
  --air-cyan:#0046a8;             /* alias of --air-blue */
  --air-cyan-soft:#e8efff;        /* alias of --air-blue-soft */
  --aria-coral:#ff8a5b;          /* reserved for Aria-the-agent voice only */
  --aria-coral-soft:#ffe6d9;

  /* ============ TOKEN ALIASES (design audit point 9) ============ */
  /* --brand: cobalt, reserved for Aria character / marketing backdrop only */
  --brand:#1862c8;
  /* --primary: royal, primary actions / focus */
  --primary:var(--air-blue);
  --primary-deep:var(--air-blue-deep);
  --primary-soft:var(--air-blue-soft);
  /* --accent: cyan, Aria-specific UI accent only */
  --accent:var(--air-blue);
  --accent-soft:var(--air-cyan-soft);

  /* ============ SEMANTIC ============ */
  --success:#0e9f6e;--success-soft:#d6f0e4;
  --warning:#c47913;--warning-soft:#fbecd0;
  --danger:#dc2b2b;--danger-soft:#fde2e2;
  --info:#0046a8;--info-soft:#e8efff;

  /* ============ SURFACES ============ */
  --bg:#eaeef5;            /* darker page bg so white cards lift off */
  --surface:#ffffff;
  --surface-alt:#f6f8fc;
  --surface-sunken:#eef1f7;
  --surface-overlay:rgba(255,255,255,0.96);

  /* ============ SIDEBAR (dark, quieter) ============ */
  --nav-bg:#0a1837;
  --nav-bg-elev:#142450;
  --nav-text:#b8c2db;
  --nav-text-strong:#ffffff;
  --nav-text-subtle:#6b7896;
  --nav-active-bg:rgba(0,73,172,0.16);
  --nav-active-text:#7dd3fc;
  --nav-border:rgba(255,255,255,0.07);

  /* ============ TEXT ============ */
  --text:#0a1837;
  --text-muted:#586478;
  --text-subtle:#8b95a8;

  /* ============ BORDERS ============ */
  --border:#e6e9f0;
  --border-strong:#cfd5e0;
  --border-focus:var(--air-blue);

  /* ============ RADII ============ */
  --r-xs:6px;--r-sm:8px;--r:10px;--r-md:12px;--r-lg:16px;--r-pill:100px;

  /* ============ MOTION (calm, never bouncy) ============ */
  --t-fast:0.12s cubic-bezier(0.2,0,0,1);
  --t-med:0.2s cubic-bezier(0.2,0,0,1);
  --t-slow:0.3s cubic-bezier(0.2,0,0,1);
  --t:var(--t-med);

  /* ============ FOCUS (offset, high contrast - WCAG 2.2) ============ */
  --focus-ring:0 0 0 2px var(--surface), 0 0 0 4px var(--air-blue);
  --focus:var(--focus-ring); /* alias kept for legacy refs */

  /* ============ SHADOWS (softer, lower alpha) ============ */
  --shadow-xs:0 1px 2px rgba(10,24,55,0.04);
  --shadow-sm:0 1px 3px rgba(10,24,55,0.05), 0 1px 2px rgba(10,24,55,0.03);
  --shadow:0 4px 12px rgba(10,24,55,0.06), 0 1px 3px rgba(10,24,55,0.04);
  --shadow-lg:0 12px 28px rgba(10,24,55,0.10), 0 4px 8px rgba(10,24,55,0.04);
  --shadow-xl:0 24px 48px rgba(10,24,55,0.16);

  /* ============ TYPOGRAPHY SCALE (design audit point 8) ============ */
  /* Display 28/650, H1 22/650, H2 17/600, H3 15/600, Body 14/500, Caption 12/500.
     All-caps labels 10.5/700/0.6px tracking. */
  --fz-micro:10.5px;
  --fz-eyebrow:10.5px;
  --fz-meta:12px;        /* caption */
  --fz-label:12px;
  --fz-body:14px;
  --fz-body-lg:14.5px;
  --fz-h4:13.5px;
  --fz-h3:15px;
  --fz-h2:17px;
  --fz-h1:22px;
  --fz-display:28px;
  /* aliases mapped to the canonical scale */
  --fs-display:var(--fz-display);
  --fs-h1:var(--fz-h1);
  --fs-h2:var(--fz-h2);
  --fs-h3:var(--fz-h3);
  --fs-body:var(--fz-body);
  --fs-caption:var(--fz-meta);
  --fs-allcaps:10.5px;
  --fw-display:650;
  --fw-h1:650;
  --fw-h2:600;
  --fw-h3:600;
  --fw-body:500;
  --fw-caption:500;
  --fw-allcaps:700;
  --ls-allcaps:0.6px;

  --lh-tight:1.2;--lh-snug:1.35;--lh-body:1.5;--lh-prose:1.7;
  --ls-display:-0.6px;--ls-h1:-0.4px;--ls-h2:-0.3px;
  --ls-eyebrow:0.6px;--ls-uppercase:0.5px;

  /* ============ SPACING (4px grid) ============ */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;
  --s-6:24px;--s-7:32px;--s-8:40px;--s-9:56px;--s-10:72px;
}

/* ============ TYPE UTILITIES ============ */
.h1{font-size:var(--fs-h1);font-weight:var(--fw-h1);letter-spacing:var(--ls-h1);line-height:var(--lh-tight);color:var(--text)}
.h2{font-size:var(--fs-h2);font-weight:var(--fw-h2);letter-spacing:var(--ls-h2);line-height:var(--lh-snug);color:var(--text)}
.h3{font-size:var(--fs-h3);font-weight:var(--fw-h3);line-height:var(--lh-snug);color:var(--text)}
.h4{font-size:var(--fz-h4);font-weight:650;line-height:var(--lh-snug);color:var(--text)}
.eyebrow{font-size:var(--fz-eyebrow);font-weight:650;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--text-subtle)}
.meta{font-size:var(--fz-meta);color:var(--text-muted);line-height:var(--lh-body)}
.muted{color:var(--text-muted)}
.subtle{color:var(--text-subtle)}
.prose{font-size:var(--fz-body-lg);line-height:var(--lh-prose);max-width:64ch}

.stack-1>*+*{margin-top:var(--s-1)}
.stack-2>*+*{margin-top:var(--s-2)}
.stack-3>*+*{margin-top:var(--s-3)}
.stack-4>*+*{margin-top:var(--s-4)}
.stack-5>*+*{margin-top:var(--s-5)}
.stack-6>*+*{margin-top:var(--s-6)}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important;
  color:var(--text);background:var(--bg);
  font-size:var(--fz-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
/* Force Space Grotesk on every element - browsers don't inherit on form controls,
   and page-level inline <style> blocks sometimes win the cascade. !important keeps us consistent. */
*,*::before,*::after{font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important}
input,textarea,select,button,optgroup{font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important}
button,a{cursor:pointer;color:inherit;text-decoration:none}
button{border:none;background:none}
::selection{background:var(--air-cyan-soft);color:var(--text)}

/* Global focus ring - offset, high contrast (WCAG 2.2 Focus Appearance) */
*:focus{outline:none}
*:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-sm)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role="button"]:focus-visible{
  outline:none;box-shadow:var(--focus-ring);
}

/* Skip-to-content */
.skip-link{
  position:absolute;top:-100px;left:0;background:var(--air-blue);color:#fff;
  padding:10px 16px;z-index:1000;font-weight:600;text-decoration:none;
  border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{top:0}

/* ============ LAYOUT ============ */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}

/* ============ SIDEBAR ============ */
nav.sidebar, aside.sidebar, .sidebar{
  background:var(--nav-bg);color:var(--nav-text);
  padding:18px 12px 14px;display:flex;flex-direction:column;gap:2px;
  position:sticky;top:0;height:100vh;max-height:100dvh;
  border-right:1px solid var(--nav-border);
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.35) transparent;
  scrollbar-gutter:stable;
}
nav.sidebar::-webkit-scrollbar, aside.sidebar::-webkit-scrollbar, .sidebar::-webkit-scrollbar{width:10px}
nav.sidebar::-webkit-scrollbar-track, aside.sidebar::-webkit-scrollbar-track, .sidebar::-webkit-scrollbar-track{background:transparent}
nav.sidebar::-webkit-scrollbar-thumb, aside.sidebar::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.28);border-radius:6px;border:2px solid transparent;background-clip:padding-box}
nav.sidebar::-webkit-scrollbar-thumb:hover, aside.sidebar::-webkit-scrollbar-thumb:hover, .sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.5);background-clip:padding-box;border:2px solid transparent}

.logo{display:flex;align-items:center;gap:12px;padding:4px 8px 14px;text-decoration:none}
.logo-mark{width:36px;height:36px;border-radius:9px;flex-shrink:0;display:block}
.logo-text{font-size:20px;font-weight:700;letter-spacing:-0.4px;color:var(--nav-text-strong)}
.logo-text .i{color:var(--air-cyan)}

.user-card{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border:1px solid var(--nav-border);background:var(--nav-bg-elev);
  border-radius:var(--r-sm);margin:0 0 14px;
  transition:background var(--t-fast);
}
.user-card:hover{background:rgba(255,255,255,0.04)}
.user-avatar{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--air-blue-deep),var(--air-blue));
  color:white;display:grid;place-items:center;font-weight:700;font-size:12px;
  flex-shrink:0;
}
.user-info{min-width:0;overflow:hidden;flex:1}
.user-name{font-size:13px;font-weight:600;color:var(--nav-text-strong);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.user-role{font-size:11px;color:var(--nav-text-subtle)}

.nav-group{margin-bottom:2px}
.nav-label{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  font-size:var(--fs-allcaps);font-weight:var(--fw-allcaps);text-transform:uppercase;letter-spacing:var(--ls-allcaps);
  color:rgba(184,194,219,0.75);padding:12px 10px 6px;cursor:pointer;
  background:transparent;border:0;font-family:inherit;
  transition:color var(--t-fast);
}
.nav-label:hover{color:var(--nav-text)}
.nav-label .chev{
  width:13px;height:13px;transition:transform var(--t-fast);opacity:0.6;
}
.nav-group.collapsed .chev{transform:rotate(-90deg)}
.nav-group.collapsed .nav-group-items{display:none}

.nav-item{
  display:flex;align-items:center;gap:11px;padding:7px 10px;
  border-radius:var(--r-sm);color:var(--nav-text);font-weight:500;font-size:13.5px;
  transition:background var(--t-fast),color var(--t-fast);
  position:relative;
}
.nav-item:hover{background:rgba(255,255,255,0.05);color:var(--nav-text-strong)}
.nav-item.active{background:var(--nav-active-bg);color:var(--nav-active-text);font-weight:600}
.nav-item.active::before{
  content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:2px;
  background:var(--air-cyan);border-radius:0 2px 2px 0;
}
.nav-item .icon{width:17px;height:17px;flex-shrink:0;opacity:0.85}
.nav-item:hover .icon,.nav-item.active .icon{opacity:1}
.nav-item-label{flex:1;min-width:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.nav-item .badge{
  background:var(--air-cyan);color:#06243a;font-size:10px;font-weight:700;
  padding:2px 7px;border-radius:var(--r-pill);min-width:18px;text-align:center;
}

.sidebar-footer{margin-top:auto;padding-top:14px;border-top:1px solid var(--nav-border)}
.footer-link{
  display:flex;align-items:center;gap:8px;padding:8px 10px;
  color:var(--nav-text-subtle);font-size:13px;width:100%;text-align:left;
  border-radius:var(--r-sm);transition:color var(--t-fast),background var(--t-fast);
}
.footer-link:hover{color:var(--nav-text-strong);background:rgba(255,255,255,0.04)}
.footer-link svg{width:16px;height:16px}

/* ============ MAIN AREA ============ */
.main{padding:var(--s-6) var(--s-7) var(--s-9);max-width:1500px}
.page-title{
  font-size:var(--fz-h1);font-weight:650;letter-spacing:var(--ls-h1);
  line-height:var(--lh-tight);margin-bottom:var(--s-1);color:var(--text);
}
.page-meta{
  color:var(--text-muted);margin-bottom:var(--s-6);
  font-size:var(--fz-body);line-height:var(--lh-body);max-width:64ch;
}

/* ============ TOPBAR ============ */
.topbar{display:flex;align-items:start;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-6);flex-wrap:wrap}
.topbar-left{flex:1;min-width:0}
.topbar-right{display:flex;align-items:center;gap:var(--s-2);flex-shrink:0}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 13px;border-radius:var(--r-sm);
  font-size:13.5px;font-weight:600;line-height:1;letter-spacing:-0.1px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),box-shadow var(--t-fast);
  min-height:34px;user-select:none;white-space:nowrap;
}
.btn:hover:not(:disabled){border-color:var(--border-strong);background:var(--surface-alt)}
.btn:active:not(:disabled){background:var(--surface-sunken)}
.btn.primary{background:var(--air-blue);color:#fff;border-color:var(--air-blue);box-shadow:0 1px 0 rgba(255,255,255,0.08) inset,0 1px 2px rgba(10,24,55,0.1)}
.btn.primary:hover:not(:disabled){background:var(--air-blue-deep);border-color:var(--air-blue-deep)}
.btn.primary:active:not(:disabled){background:var(--air-blue-deep)}
.btn.secondary{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.btn.secondary:hover:not(:disabled){background:var(--surface-alt)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--text-muted)}
.btn.ghost.cancel{color:var(--text-muted)}
.btn.ghost:hover:not(:disabled){background:var(--surface-sunken);color:var(--text);border-color:transparent}
.btn.danger{border-color:var(--danger);color:var(--danger);background:var(--surface)}
.btn.danger:hover:not(:disabled){background:var(--danger-soft);border-color:var(--danger)}
.btn.danger.primary{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn.danger.primary:hover:not(:disabled){background:#b41f1f;border-color:#b41f1f}
.btn.sm{padding:5px 9px;min-height:28px;font-size:12.5px;border-radius:var(--r-xs)}
.btn.lg{padding:11px 17px;min-height:42px;font-size:14.5px;border-radius:var(--r)}
.btn.block{display:flex;width:100%}
.btn:disabled{opacity:0.5;cursor:not-allowed}
.btn.loading{position:relative;color:transparent;pointer-events:none}
.btn.loading::after{
  content:"";position:absolute;inset:0;margin:auto;
  width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;animation:spin 0.7s linear infinite;color:var(--text);
}
.btn.primary.loading::after{color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ CARDS ============ */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--s-5);margin-bottom:var(--s-4);
  box-shadow:var(--shadow-xs);transition:box-shadow var(--t-fast),border-color var(--t-fast);
}
.card.interactive:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.card-head{display:flex;align-items:start;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-4)}
.card-title{font-size:var(--fz-h4);font-weight:650;color:var(--text);line-height:var(--lh-snug);letter-spacing:-0.1px}
.card-sub{font-size:var(--fz-meta);color:var(--text-muted);margin-top:2px;line-height:var(--lh-body)}

/* ============ FORMS ============ */
.form-field{margin-bottom:var(--s-4)}
.form-field label,.field-label{
  display:block;font-size:var(--fz-label);font-weight:600;color:var(--text-muted);
  margin-bottom:6px;letter-spacing:0.1px;
}
.form-field input,.form-field select,.form-field textarea,
input.text-input,select.text-input,textarea.text-input{
  width:100%;padding:9px 12px;border:1px solid var(--border-strong);
  border-radius:var(--r-sm);font-size:var(--fz-body);font-family:inherit;line-height:var(--lh-body);
  outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
  background:var(--surface);color:var(--text);min-height:36px;
}
.form-field textarea,textarea.text-input{min-height:88px;line-height:1.55;padding:10px 12px}
.form-field input::placeholder,.form-field textarea::placeholder,
input.text-input::placeholder,textarea.text-input::placeholder{color:var(--text-muted)}
.form-field input:hover,.form-field select:hover,.form-field textarea:hover,
input.text-input:hover,select.text-input:hover,textarea.text-input:hover{border-color:#b9c1d1}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus,
input.text-input:focus,select.text-input:focus,textarea.text-input:focus{
  border-color:var(--air-blue);box-shadow:0 0 0 3px rgba(0,73,172,0.18);
}
.form-field input:disabled,.form-field select:disabled,.form-field textarea:disabled{
  background:var(--surface-sunken);color:var(--text-muted);cursor:not-allowed;
}
.form-field .hint,.field-hint{font-size:12px;color:var(--text-subtle);margin-top:4px;line-height:1.5}
.form-field .error,.field-error{font-size:12px;color:var(--danger);margin-top:4px}
.form-field input[aria-invalid="true"],.form-field select[aria-invalid="true"],.form-field textarea[aria-invalid="true"],
input.text-input.error{border-color:var(--danger)}
.form-field input[aria-invalid="true"]:focus,input.text-input.error:focus{box-shadow:0 0 0 3px rgba(220,43,43,0.18)}

/* ============ PILLS / BADGES ============ */
.conn-pill{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
  border-radius:var(--r-pill);font-size:11.5px;font-weight:600;
  background:var(--warning-soft);color:var(--warning);
  border:1px solid rgba(196,121,19,0.25);
}
.conn-pill.live{background:var(--success-soft);color:var(--success);border-color:rgba(14,159,110,0.25)}
.conn-pill.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(14,159,110,0.2);animation:pulse-dot 2.4s ease-in-out infinite}
.conn-pill.error{background:var(--danger-soft);color:var(--danger);border-color:rgba(220,43,43,0.25)}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 3px rgba(14,159,110,0.2)}50%{box-shadow:0 0 0 5px rgba(14,159,110,0.3)}}

.status-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 8px;border-radius:var(--r-pill);
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;
  line-height:1.5;
}
.status-pill.ok,.status-pill.advance,.status-pill.success,.status-pill.live{background:var(--success-soft);color:var(--success)}
.status-pill.warn,.status-pill.pending{background:var(--warning-soft);color:var(--warning)}
.status-pill.err,.status-pill.failed,.status-pill.reject,.status-pill.rejected{background:var(--danger-soft);color:var(--danger)}
.status-pill.info{background:var(--info-soft);color:var(--info)}
.status-pill.neutral{background:var(--surface-sunken);color:var(--text-muted)}

/* ============ TABS ============ */
.tabs{display:flex;gap:var(--s-1);border-bottom:1px solid var(--border);margin-bottom:var(--s-6);flex-wrap:wrap}
.tab{
  padding:9px var(--s-4);font-size:var(--fz-body);font-weight:600;color:var(--text-muted);
  border-bottom:2px solid transparent;cursor:pointer;
  transition:color var(--t-fast),border-color var(--t-fast);
  border-radius:6px 6px 0 0;margin-bottom:-1px;
}
.tab:hover{color:var(--text)}
.tab.active{color:var(--text);border-bottom-color:var(--air-blue)}
.panel{display:none}
.panel.active{display:block;animation:fade-in 0.18s ease-out}
@keyframes fade-in{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}

/* ============ TABLES ============ */
table.data{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
table.data th{
  text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.5px;color:var(--text-subtle);padding:10px var(--s-3);
  border-bottom:1px solid var(--border);background:var(--surface-alt);
  position:sticky;top:0;
}
table.data td{padding:10px var(--s-3);border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle}
table.data tbody tr{transition:background var(--t-fast)}
table.data tbody tr:hover{background:var(--surface-alt)}
table.data tbody tr:last-child td{border-bottom:0}

/* ============ EMPTY STATE ============ */
.empty{
  padding:var(--s-8) var(--s-6);text-align:center;color:var(--text-subtle);
  background:var(--surface-alt);border:1px dashed var(--border-strong);border-radius:var(--r-md);
}
.empty .empty-icon{
  width:44px;height:44px;margin:0 auto var(--s-3);display:grid;place-items:center;
  background:var(--air-blue-soft);color:var(--air-blue);border-radius:50%;
  font-size:20px;
}
.empty .empty-title{font-size:var(--fz-h4);font-weight:650;color:var(--text);margin-bottom:var(--s-1);line-height:var(--lh-snug)}
.empty .empty-desc{font-size:13px;color:var(--text-muted);margin:0 auto var(--s-4);max-width:48ch;line-height:var(--lh-body)}
.empty .empty-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* ============ SKELETON LOADERS ============ */
.skel{
  background:linear-gradient(90deg,var(--surface-sunken) 0%,#f8fafc 50%,var(--surface-sunken) 100%);
  background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite;
  border-radius:var(--r-sm);
}
.skel-text{height:14px;margin-bottom:8px;width:100%}
.skel-text.short{width:50%}
.skel-text.medium{width:75%}
.skel-row{height:64px;margin-bottom:8px}
.skel-card{height:140px;margin-bottom:12px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ============ TOAST ============ */
.toast-stack{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:200;pointer-events:none}
.toast{
  pointer-events:auto;background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--air-blue);border-radius:var(--r-sm);
  padding:12px 14px;box-shadow:var(--shadow-lg);
  min-width:280px;max-width:380px;font-size:13.5px;color:var(--text);
  animation:toast-in 0.22s cubic-bezier(0.2,0,0,1);
}
.toast.success{border-left-color:var(--success)}
.toast.warning{border-left-color:var(--warning)}
.toast.danger{border-left-color:var(--danger)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ============ GRID HELPERS ============ */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}

/* ============ MODAL ============ */
dialog.aria-modal{
  border:none;border-radius:var(--r-md);padding:0;background:transparent;
  max-width:520px;width:90%;box-shadow:var(--shadow-xl);
}
dialog.aria-modal::backdrop{background:rgba(10,24,55,0.45);backdrop-filter:blur(2px)}
dialog.aria-modal .modal-body{background:var(--surface);border-radius:var(--r-md);padding:24px}
dialog.aria-modal h3{font-size:18px;font-weight:650;margin-bottom:8px;letter-spacing:-0.2px}
dialog.aria-modal p{color:var(--text-muted);font-size:14px;line-height:1.55;margin-bottom:18px}
dialog.aria-modal .modal-actions{display:flex;gap:10px;justify-content:flex-end}

/* ============ MOBILE ============ */
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{display:none}
  .main{padding:16px}
  .grid-2,.grid-3{grid-template-columns:1fr}
}

/* ============ MOTION PREF ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
}

/* ============================================================
   DESIGN AUDIT v4 ADDITIONS (2026-05-16)
   Unified status pill, standardised empty-state v2, skeleton
   rows, page-title + date chip, ask-aria entry, AA contrast.
   ============================================================ */

/* ---- Page title + subtitle pattern (audit point 4) ---- */
.page-title{
  font-size:var(--fs-h1);font-weight:var(--fw-h1);
  letter-spacing:var(--ls-h1);line-height:var(--lh-tight);
  color:var(--text);margin-bottom:4px;
}
.page-subtitle{
  font-size:var(--fs-body);font-weight:var(--fw-body);
  color:var(--text-muted);line-height:var(--lh-body);
  margin-bottom:var(--s-6);max-width:64ch;
}

/* ---- Date chip top-right (audit point 4) ---- */
.date-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:var(--r-pill);
  font-size:12px;font-weight:600;color:var(--text-muted);
  background:var(--surface);border:1px solid var(--border);
}
.date-chip svg{width:13px;height:13px;opacity:0.75}

/* ---- Unified status pill (audit point 3) ----
   States: idle | working | live | error.
   One visual language. Place on every page top-bar. */
.aria-status{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:600;line-height:1;
  border:1px solid var(--border);background:var(--surface);
  color:var(--text-muted);transition:all var(--t-fast);
  white-space:nowrap;
}
.aria-status .aria-status-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--text-subtle);flex-shrink:0;
}
.aria-status[data-state="working"]{
  background:var(--info-soft);color:var(--air-blue);
  border-color:rgba(0,70,168,0.18);
}
.aria-status[data-state="working"] .aria-status-dot{
  background:var(--air-blue);
  animation:aria-status-pulse 1.6s ease-in-out infinite;
}
.aria-status[data-state="live"]{
  background:var(--success-soft);color:var(--success);
  border-color:rgba(14,159,110,0.22);
}
.aria-status[data-state="live"] .aria-status-dot{
  background:var(--success);
  animation:aria-status-pulse 2.4s ease-in-out infinite;
}
.aria-status[data-state="error"]{
  background:var(--danger-soft);color:var(--danger);
  border-color:rgba(220,43,43,0.22);
}
.aria-status[data-state="error"] .aria-status-dot{background:var(--danger)}
.aria-status[data-state="idle"]{
  background:var(--surface);color:var(--text-muted);
  border-color:var(--border);
}
@keyframes aria-status-pulse{
  0%,100%{box-shadow:0 0 0 0 currentColor;opacity:1}
  50%{box-shadow:0 0 0 4px transparent;opacity:0.6}
}

/* ---- Skeleton row utility (audit point 11) ---- */
.skel-row-table{
  display:grid;grid-template-columns:1fr 100px 100px 80px;
  gap:14px;padding:12px 14px;border-bottom:1px solid var(--border);
  align-items:center;
}
.skel-row-table .skel{height:14px;border-radius:4px}

/* ---- Empty-state v2 (audit point 5) ---- */
.empty-v2{
  padding:var(--s-8) var(--s-6);text-align:center;
  background:var(--surface);border:1px dashed var(--border-strong);
  border-radius:var(--r-md);
}
.empty-v2 .empty-icon{
  width:32px;height:32px;margin:0 auto var(--s-3);
  display:grid;place-items:center;color:var(--text-muted);
}
.empty-v2 .empty-icon svg{width:32px;height:32px;stroke-width:1.5}
.empty-v2 .empty-title{
  font-size:15px;font-weight:650;color:var(--text);
  margin-bottom:6px;line-height:1.35;
}
.empty-v2 .empty-desc{
  font-size:13.5px;font-weight:500;color:var(--text-muted);
  line-height:1.55;margin:0 auto var(--s-4);max-width:48ch;
}
.empty-v2 .empty-actions{
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
}

/* ---- Onboarding card (audit point 5: consolidated dashboard) ---- */
.onboarding-card{
  background:linear-gradient(135deg,#fff 0%,var(--air-blue-soft) 100%);
  border:1px solid var(--border);
  border-radius:var(--r-md);padding:32px 28px;
  margin-bottom:var(--s-6);
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
}
.onboarding-card .onb-title{
  font-size:var(--fs-h2);font-weight:var(--fw-h2);
  color:var(--text);margin-bottom:6px;letter-spacing:-0.2px;
}
.onboarding-card .onb-sub{
  font-size:14px;color:var(--text-muted);line-height:1.55;
  margin-bottom:18px;max-width:56ch;
}
.onboarding-card .onb-actions{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:760px){
  .onboarding-card{grid-template-columns:1fr}
}

/* ---- Status pill text contrast bumps (audit point 10) ---- */
.status-pill.warn,.status-pill.pending{color:#8a5305}
.status-pill.err,.status-pill.failed,.status-pill.reject,.status-pill.rejected{color:#a01f1f}

/* ---- Hide nav badge inheritance for completeness ---- */
.nav-item .badge.muted{background:rgba(255,255,255,0.10);color:var(--nav-text)}


/* === Accessibility additions (2026-05-22) === */
/* Skip-to-main link: hidden off-screen until keyboard focus reveals it. */
.skip-link{
  position:absolute;top:0;left:8px;
  background:var(--air-blue,#0046a8);color:#fff;
  padding:8px 14px;border-radius:0 0 8px 8px;
  font-size:14px;font-weight:600;
  z-index:9999;
  transform:translateY(-110%);
  transition:transform 120ms ease;
  text-decoration:none;
}
.skip-link:focus{
  transform:translateY(0);
  outline:3px solid #fff;outline-offset:-3px;
}
/* button.nav-item: reset native button chrome so it visually matches a.nav-item. */
button.nav-item{
  background:transparent;border:0;
  font:inherit;color:inherit;
  text-align:left;width:100%;
  cursor:pointer;
}

/* Live/status pills retired 2026-05-29. The notification bell in the top-right
   replaces all of these connection indicators. Hidden globally rather than
   removed from every page to avoid 37-file churn. */
.aria-status, .conn-pill { display: none !important; }


/* ============================================================
   POLISH LAYER v5 (2026-06)
   ============================================================
   Purely additive UX/UI polish from 2025-26 best practice
   research (WCAG 2.2, Linear/Vercel/Stripe patterns).
   
   HARD RULE: nothing in this block changes width/height,
   margin, padding, position, or display. Only colors,
   borders, transitions, transforms, opacity, cursors,
   text-rendering, focus indicators, and behaviour helpers.
   
   Anything that COULD shift layout is gated behind:
     @media (pointer: coarse)  — touch devices only
     @media (max-width: 768px) — narrow viewports only
   
   The existing @media (prefers-reduced-motion: reduce)
   block at top of file ALREADY squashes every transition
   to 0.01ms via `*`, so all transitions added here are
   automatically disabled for users who opted out. We do
   NOT need to repeat that override per rule.
   ============================================================ */

/* --- (1) Text rendering: anti-aliased text on macOS / iOS WebKit ---
   Crisper rendering on retina displays. Zero layout impact. */
html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* --- (2) Smooth scroll for in-page anchor jumps ---
   prefers-reduced-motion is honoured automatically via the existing
   universal motion override at line 470. */
html{ scroll-behavior:smooth; }

/* --- (3) Selection colour using V2 primary at 22% ---
   Existing rule used --air-cyan-soft (pale flat fill). This makes the
   highlight feel branded without being loud. */
::selection{
  background:rgba(11,63,167,0.22);
  color:inherit;
}

/* --- (4) Universal :focus-visible polish ---
   Existing focus ring is via box-shadow var(--focus-ring). This adds
   coverage for elements that don't currently match — summary, details,
   [tabindex] — and preserves the same shadow look so visually nothing
   changes for users hitting buttons/links. */
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
[contenteditable="true"]:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
  border-radius:var(--r-sm);
}

/* --- (5) Hover-state guard: disabled buttons must NOT respond to hover ---
   Doesn't change disabled visual (existing rules keep handling that). Just
   makes sure :hover bg-color etc. doesn't fire on disabled or aria-disabled.
   Implemented via pointer-events:none on truly inert elements. */
button:disabled,
.btn:disabled,
[role="button"][aria-disabled="true"],
a[aria-disabled="true"]{
  cursor:not-allowed;
}
button:disabled:hover,
.btn:disabled:hover,
[role="button"][aria-disabled="true"]:hover,
a[aria-disabled="true"]:hover{
  /* Cancel any inherited hover lift / transform. */
  transform:none;
}

/* --- (6) Tactile :active feedback for non-disabled interactive elements ---
   Linear/Notion pattern: when the user clicks a button, it sinks 1px on press.
   transform-only so it doesn't reflow anything around it. Only fires on
   pointer-fine devices to avoid double-feedback on touch. */
@media (pointer:fine){
  button:not(:disabled):active,
  .btn:not(:disabled):not(.btn-link):active,
  [role="button"]:not([aria-disabled="true"]):active{
    transform:translateY(1px);
  }
}

/* --- (7) Buttons get a smooth micro-interaction transition ---
   150ms is the Linear/Stripe sweet spot for snappy-feeling controls.
   Limited to properties that don't trigger layout (color/border/shadow/transform).
   Existing per-button transitions still win where defined. */
button, .btn, [role="button"]{
  transition:
    background-color 150ms ease,
    border-color     150ms ease,
    color            150ms ease,
    box-shadow       150ms ease,
    transform        100ms ease,
    opacity          150ms ease;
}

/* --- (8) Tabular numerals for any numeric-tag class ---
   Counts, money, percentages line up cleanly without changing the font.
   We DO NOT apply this universally to all numbers — only to common
   numeric helper classes already used in the app. Confined to digits,
   so no layout impact on prose. */
.num, .count, .money, .stat, .stat-value, .price, .kpi-value,
[data-num], [data-count], [data-money]{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
}

/* --- (9) Tabular numerals inside table cells that are clearly numeric ---
   Lines up totals in financial / metric tables. Targets cells with
   text-align:right (the conventional numeric alignment). */
table td[align="right"], table th[align="right"]{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
}

/* --- (10) Polished scrollbars on the main content area too ---
   Sidebar already had thin scrollbars (line 185-192). Now main content
   matches the chrome. Doesn't change scroll width, just colour. */
html, .main, main, .scroll{
  scrollbar-width:thin;
  scrollbar-color:rgba(28,35,48,0.22) transparent;
}
.main::-webkit-scrollbar, main::-webkit-scrollbar, .scroll::-webkit-scrollbar{
  width:10px;height:10px;
}
.main::-webkit-scrollbar-track, main::-webkit-scrollbar-track, .scroll::-webkit-scrollbar-track{
  background:transparent;
}
.main::-webkit-scrollbar-thumb, main::-webkit-scrollbar-thumb, .scroll::-webkit-scrollbar-thumb{
  background:rgba(28,35,48,0.22);
  border-radius:6px;
  border:2px solid transparent;
  background-clip:padding-box;
}
.main::-webkit-scrollbar-thumb:hover, main::-webkit-scrollbar-thumb:hover, .scroll::-webkit-scrollbar-thumb:hover{
  background:rgba(28,35,48,0.42);
  background-clip:padding-box;
  border:2px solid transparent;
}

/* --- (11) Inputs/selects/textareas pick up a subtle focus glow ---
   Existing focus state colours the border via the form-field block.
   This adds a 100ms ease so focus rings don't pop in suddenly. */
input, textarea, select{
  transition:
    border-color 150ms ease,
    box-shadow   150ms ease,
    background-color 150ms ease;
}

/* --- (12) Text links: predictable underline-on-hover affordance ---
   Doesn't affect any link that already declares its own text-decoration —
   only adds where a link relies on the browser default. Scoped to
   prose-style links inside .main body to avoid touching nav/header links. */
.main a:not(.btn):not(.nav-item):not(.tab):not(.chip):not([role="button"]):hover,
.main a:not(.btn):not(.nav-item):not(.tab):not(.chip):not([role="button"]):focus-visible{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}

/* --- (13) Spinners pause for prefers-reduced-motion users ---
   Catches spinners that animate via custom class names (existing
   universal `*` motion override handles transition-duration, but
   long-running animations need explicit play-state pause). */
@media (prefers-reduced-motion:reduce){
  .spinner, .loader, [class*="spin"], [class*="loading"]{
    animation-play-state:paused !important;
  }
}

/* --- (14) Touch-device target floor ---
   ONLY applied on coarse pointers (touch). Desktop layout completely
   unchanged. WCAG 2.2 minimum is 24x24 CSS px; Apple/Material/Fluent
   converge on 44-48px for touch. min-height:44px on actual interactive
   controls, NOT chip/badge/tag presentational pills. */
@media (pointer:coarse){
  button:not(.chip):not(.badge):not(.pill):not(.tag):not(.icon-only),
  .btn:not(.chip):not(.badge):not(.pill):not(.tag):not(.icon-only),
  [role="button"]:not(.chip):not(.badge):not(.pill):not(.tag):not(.icon-only),
  input[type="button"], input[type="submit"], input[type="reset"]{
    min-height:44px;
  }
}

/* --- (15) Disabled form inputs visibly inert ---
   Existing disabled :hover guards above cover buttons. This catches
   inputs/textareas/selects so they don't look interactive when frozen. */
input:disabled, textarea:disabled, select:disabled{
  opacity:0.6;
  cursor:not-allowed;
}

/* === end POLISH LAYER v5 === */


/* ============================================================
   MAKEOVER LAYER v6 (2026-06)
   ============================================================
   Senior UX/UI design pass. Purely additive, builds on top of
   v5 polish + existing tokens (--air-blue, --shadow-*, etc.).
   
   HARD RULE — same as v5 — nothing in this block changes width,
   height, margin, padding, position, or display. Only colour,
   shadow, border-radius, transform, transition, opacity,
   letter-spacing, font-weight, font-feature-settings, text-shadow,
   filter, background gradient changes.
   
   Anything that could shift layout is gated behind:
     @media (pointer:coarse)
     @media (max-width:768px)
     @media (prefers-reduced-motion:reduce)
   
   2025/26 patterns applied (Linear, Vercel, Stripe, shadcn/ui):
   - Two-tier shadow elevation (contact + ambient)
   - translateY(-2px) card hover lift (compositor-friendly, no reflow)
   - Subtle primary-CTA gradient + inset highlight
   - Active sidebar nav with left accent stripe (::before pseudo, no flow)
   - Form input depth on focus
   - Table row hover background
   - Typography refinement: tightened letter-spacing on big numbers
   - Status pills with soft gradients
   - Lucide icon harmonisation (stroke-width:2 inside dashboard surfaces)
   - Selection brand-blue 22% (already from v5; v6 keeps consistent)
   ============================================================ */

/* --- (1) Deeper, layered shadows on CARDS without removing borders ---
   Original .card stayed flat-with-thin-border which Joe called out as
   "old boxes and lines". We give every card a softer ambient shadow at
   rest, and a proper lift + dual-shadow on hover (2025 Stripe/Linear). */
.card{
  box-shadow:
    0 1px 2px rgba(10,24,55,0.04),
    0 1px 1px rgba(10,24,55,0.02);
  transition:
    box-shadow 220ms cubic-bezier(.2,.7,.3,1),
    transform 220ms cubic-bezier(.2,.7,.3,1),
    border-color 180ms ease;
}
.card:hover{
  box-shadow:
    0 4px 10px rgba(10,24,55,0.07),
    0 16px 36px rgba(10,24,55,0.08);
  transform:translateY(-2px);
  border-color:rgba(207,213,224,0.7);
}
/* Interactive cards already had hover handling — bump them a touch more. */
.card.interactive:hover{
  transform:translateY(-3px);
  box-shadow:
    0 6px 14px rgba(10,24,55,0.10),
    0 22px 44px rgba(10,24,55,0.10);
}
/* Selection state on cards (when used as cards-as-tabs). */
.card.selected, .card.active{
  border-color:var(--air-blue);
  box-shadow:
    0 0 0 1px var(--air-blue),
    0 6px 14px rgba(0,70,168,0.12),
    0 16px 32px rgba(0,70,168,0.10);
}

/* --- (2) Primary CTA gets the V2 gradient treatment + tactile press ---
   Old: flat blue fill. New: top→bottom gradient + subtle inset highlight
   at the top edge (Linear/Vercel pattern). Press still uses the inherited
   :active translateY(1px) from v5. */
.btn.primary{
  background:linear-gradient(180deg, #1163CC 0%, var(--air-blue) 100%);
  border-color:var(--air-blue);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 1px 2px rgba(0,40,120,0.30),
    0 1px 1px rgba(0,40,120,0.18);
}
.btn.primary:hover:not(:disabled){
  background:linear-gradient(180deg, var(--air-blue) 0%, var(--air-blue-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 2px 4px rgba(0,40,120,0.32),
    0 4px 12px rgba(0,40,120,0.20);
}
/* Danger primary CTA gets a parallel treatment. */
.btn.danger.primary{
  background:linear-gradient(180deg, #e64545 0%, var(--danger) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 1px 2px rgba(150,30,30,0.28),
    0 1px 1px rgba(150,30,30,0.16);
}
.btn.danger.primary:hover:not(:disabled){
  background:linear-gradient(180deg, var(--danger) 0%, #b41f1f 100%);
}
/* Secondary/ghost get a softer hover bg + small lift via box-shadow */
.btn.secondary:hover:not(:disabled),
.btn:not(.primary):not(.danger):not(.ghost):hover:not(:disabled){
  box-shadow:
    0 1px 2px rgba(10,24,55,0.06),
    0 2px 6px rgba(10,24,55,0.06);
}

/* --- (3) Sidebar active nav item: stronger emphasis with left accent ---
   Old: subtle bg + cyan text. New: keep bg, add a 3px primary accent stripe
   on the left edge via ::before (absolute, no layout flow impact). */
.nav-item{ position:relative; }
.nav-item.active::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:3px; height:18px;
  background:var(--air-cyan);
  border-radius:0 3px 3px 0;
  transform:translateY(-50%);
  box-shadow:0 0 12px rgba(125,211,252,0.6);
}
.nav-item:not(.active):hover{
  background:rgba(255,255,255,0.04);
}
/* Group header eyebrows — slightly more presence. */
.nav-group-label{
  color:var(--nav-text-subtle);
  opacity:0.85;
}

/* --- (4) Form input depth — replace flat resting state with subtle gradient ---
   On focus we already have the 3px blue glow from base CSS. v6 adds a
   subtle inner gradient that goes flat on focus for a "lifts up" feel. */
.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select,
.form-field textarea,
input.text-input,
select.text-input,
textarea.text-input{
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface-alt) 100%);
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}
.form-field input:hover:not(:disabled):not([type="checkbox"]):not([type="radio"]),
.form-field select:hover:not(:disabled),
.form-field textarea:hover:not(:disabled),
input.text-input:hover:not(:disabled),
select.text-input:hover:not(:disabled),
textarea.text-input:hover:not(:disabled){
  border-color:#a8b3c8;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
input.text-input:focus,
select.text-input:focus,
textarea.text-input:focus{
  background:var(--surface);
}

/* --- (5) Table row hover ---
   No row-hover today; dashboards with tables get a subtle highlight
   on hover so rows feel scannable. */
table tbody tr{
  transition:background-color 120ms ease;
}
table tbody tr:hover{
  background-color:rgba(0,70,168,0.04);
}

/* --- (6) Status pills: subtle gradient + softer ring for depth ---
   Current pills are flat-soft-bg. v6 adds a top-to-bottom gradient
   variant of the soft tone for a printed-label feel, plus a 1px
   inner ring to crisp the edge. */
.status-pill{
  background:linear-gradient(180deg, rgba(255,255,255,0.45) 0%, transparent 100%), var(--surface-alt);
  box-shadow:inset 0 0 0 1px rgba(10,24,55,0.04);
}
.status-pill.success, .status-pill.ok, .status-pill.live, .status-pill.sent{
  background:linear-gradient(180deg, rgba(255,255,255,0.55) 0%, transparent 100%), var(--success-soft);
  color:#0a6e4d;
  box-shadow:inset 0 0 0 1px rgba(14,159,110,0.20);
}
.status-pill.warn, .status-pill.pending, .status-pill.queued{
  background:linear-gradient(180deg, rgba(255,255,255,0.50) 0%, transparent 100%), var(--warning-soft);
  box-shadow:inset 0 0 0 1px rgba(196,121,19,0.20);
}
.status-pill.err, .status-pill.failed, .status-pill.reject, .status-pill.rejected{
  background:linear-gradient(180deg, rgba(255,255,255,0.50) 0%, transparent 100%), var(--danger-soft);
  box-shadow:inset 0 0 0 1px rgba(220,43,43,0.22);
}
.status-pill.info{
  background:linear-gradient(180deg, rgba(255,255,255,0.50) 0%, transparent 100%), var(--info-soft);
  color:#003280;
  box-shadow:inset 0 0 0 1px rgba(0,70,168,0.18);
}

/* --- (7) Big numerical stats / KPI values — tight tracking + tabular ---
   For dashboards with stat values, large numbers feel more
   intentional with -0.02em letter-spacing. Tabular nums from v5 still
   applies. Cap at >=24px so we don't squish body numbers. */
.stat-value, .kpi-value, .h1, .page-title{
  letter-spacing:-0.015em;
}
.stat-value, .kpi-value{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
}

/* --- (8) Lucide icon harmonisation inside dashboard chrome ---
   For inline <svg> icons inside buttons / nav items / status pills,
   harmonise stroke-width to 2 (the Lucide default) and ensure clean
   colour inheritance. Limited to icons that don't have an explicit
   stroke-width set on them. */
.btn > svg, .nav-item > svg, .status-pill > svg, .chip > svg, .tag > svg,
.page-title svg, .empty-state svg{
  stroke-width:2;
  vertical-align:middle;
}
/* Stroke-current pattern: svgs that use currentColor on stroke. */
.btn > svg:not([fill]), .nav-item > svg:not([fill]){
  fill:none;
  stroke:currentColor;
}

/* --- (9) Empty state polish: subtle radial bg + crisper typography ---
   Existing empty states are plain. v6 adds a soft radial gradient
   backdrop so they feel intentional rather than "missing data". */
.empty-state{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0,70,168,0.04) 0%, transparent 70%),
    var(--surface);
}
.empty-state .title, .empty-state h3, .empty-state h4{
  letter-spacing:-0.01em;
}

/* --- (10) Loading skeleton refinement ---
   v5 already pauses .spinner animation for reduced-motion. v6 makes the
   skeleton shimmer feel more polished with a gradient sweep. */
.skeleton, .skeleton-row{
  background:
    linear-gradient(90deg,
      var(--surface-alt) 0%,
      rgba(255,255,255,0.6) 40%,
      var(--surface-alt) 80%);
  background-size:200% 100%;
  animation:aap-shimmer 1.6s linear infinite;
  border-radius:var(--r-sm);
}
@keyframes aap-shimmer{
  from{ background-position:200% 0; }
  to  { background-position:-200% 0; }
}
@media (prefers-reduced-motion:reduce){
  .skeleton, .skeleton-row{ animation:none; }
}

/* --- (11) Modal/overlay polish: blurred backdrop + deeper shadow ---
   Existing dialogs use --shadow-xl. v6 adds a subtle backdrop-filter blur
   (browser support is ubiquitous in 2026) and a softer dark veil. */
dialog::backdrop, .modal-backdrop{
  background:rgba(10,24,55,0.42);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.modal, dialog{
  box-shadow:
    0 0 0 1px rgba(10,24,55,0.05),
    0 8px 24px rgba(10,24,55,0.10),
    0 32px 64px rgba(10,24,55,0.18);
}

/* --- (12) Page title / hero accent ---
   Top-of-page titles get a refined hierarchy: the h1 stays size-unchanged
   but tightens letter-spacing for that "premium SaaS" feel, and gains
   a subtle gradient text-fill on .page-title-accent (opt-in class only). */
.page-title{
  letter-spacing:-0.022em;
  font-weight:700;
}
.page-title-accent{
  background:linear-gradient(135deg, var(--air-blue) 0%, #1862c8 60%, var(--air-cyan) 100%);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

/* --- (13) Chips / tags refinement ---
   Slightly more substantial — a 1px inner ring + soft top highlight. */
.chip, .tag{
  background:linear-gradient(180deg, rgba(255,255,255,0.5) 0%, transparent 100%), var(--surface-alt);
  box-shadow:inset 0 0 0 1px rgba(10,24,55,0.06);
  transition:background 140ms ease, box-shadow 140ms ease, color 140ms ease;
}
.chip:hover, .tag:hover{
  box-shadow:inset 0 0 0 1px rgba(0,70,168,0.20);
}
.chip.active, .chip[aria-selected="true"], .tag.active{
  background:linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 100%), var(--air-blue-soft);
  color:var(--air-blue-deep);
  box-shadow:inset 0 0 0 1px rgba(0,70,168,0.30);
}

/* --- (14) Notifications bell + active-indicator dot polish ---
   Existing dot is a flat circle. v6 gives it a soft glow ring. */
.bell-dot, .notif-dot, .has-unread::after{
  box-shadow:
    0 0 0 2px var(--surface),
    0 0 8px rgba(220,43,43,0.5);
}

/* --- (15) Focus ring upgrade for keyboard users ---
   Existing focus uses --focus-ring. v6 adds a soft outer halo for
   keyboard navigation that's harder to miss (still WCAG 2.2 compliant).
   Only on :focus-visible (not mouse focus). */
*:focus-visible{
  box-shadow:
    var(--focus-ring),
    0 0 0 6px rgba(0,70,168,0.10);
}

/* === end MAKEOVER LAYER v6 === */


/* ============================================================
   PRESENCE LAYER v7 (2026-06)
   ============================================================
   v6 changes were too subtle without hover. v7 gives every key
   surface visible character AT REST. Same hard rule: no layout
   shifts (no width/height/margin/padding/position/display).
   All effects are colour, gradient, shadow, border-radius,
   transform, transition, opacity, letter-spacing, filter.
   ============================================================ */

/* --- (1) Stat / KPI cards: gradient bg + left accent stripe + pop ---
   Old: flat white card. New: very pale blue-to-white gradient + 4px
   primary accent stripe at the left (via ::before pseudo, no flow
   impact) + larger letter-spaced number. */
.kpi{
  background:
    linear-gradient(135deg, #FFFFFF 0%, #F1F6FF 80%, #E8EFFF 100%);
  position:relative;
  box-shadow:
    0 1px 2px rgba(10,24,55,0.05),
    0 2px 8px rgba(10,24,55,0.04);
  transition:
    transform 220ms cubic-bezier(.2,.7,.3,1),
    box-shadow 220ms cubic-bezier(.2,.7,.3,1);
}
.kpi::before{
  content:"";
  position:absolute;
  left:0; top:14%;
  width:3px; height:72%;
  background:linear-gradient(180deg, var(--air-blue) 0%, #2E87E5 100%);
  border-radius:0 3px 3px 0;
  opacity:0.85;
}
.kpi:hover{
  transform:translateY(-3px);
  box-shadow:
    0 6px 14px rgba(10,24,55,0.08),
    0 18px 36px rgba(0,70,168,0.10);
}
.kpi-val{
  letter-spacing:-0.025em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
  background:linear-gradient(135deg, var(--air-blue) 0%, #1163CC 60%, #2E87E5 100%);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.kpi-lbl{
  color:var(--text-muted);
}

/* --- (2) Hero block: gradient overlay with radial accent ---
   Hero is `.hero{background: linear-gradient(135deg, #004aad, #003580)}`
   per-page inline. v7 LAYERS a subtle radial glow in the top-right via
   the parent's background-image stack, plus a deeper bottom-left
   shadow inside the same gradient. We use box-shadow inset for a
   pseudo-light-source feel. */
.hero{
  background-image:
    radial-gradient(80% 80% at 88% -8%, rgba(125,211,252,0.28) 0%, transparent 60%),
    radial-gradient(80% 80% at -8% 108%, rgba(11,63,167,0.18) 0%, transparent 60%),
    linear-gradient(135deg, #004aad, #003580) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 4px 16px rgba(0,40,120,0.18),
    0 12px 32px rgba(0,40,120,0.12);
  position:relative;
  overflow:hidden;
}
.hero h1{
  letter-spacing:-0.025em;
  text-shadow:0 1px 2px rgba(0,0,0,0.10);
}
.hero p{
  text-shadow:0 1px 1px rgba(0,0,0,0.06);
}

/* --- (3) Every card gets a richer resting shadow + subtle gradient ---
   Previously .card stayed flat with thin border + tiny shadow at rest.
   v7 swaps the resting shadow for a more pronounced double-stack so
   cards feel like real surfaces even without hovering. v6 hover-lift
   stays in place. */
.card{
  background:
    linear-gradient(180deg, var(--surface) 0%, #FCFDFF 100%);
  box-shadow:
    0 1px 2px rgba(10,24,55,0.06),
    0 4px 10px rgba(10,24,55,0.04);
}

/* --- (4) Primary CTA: stronger gradient + glow ring ---
   v6 had a subtle top-to-bottom gradient. v7 deepens it and adds a
   soft outer glow ring so primary buttons look genuinely interactive. */
.btn.primary{
  background:linear-gradient(180deg, #1A6FE0 0%, #0046a8 50%, #003280 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.08),
    0 1px 3px rgba(0,40,120,0.35),
    0 2px 6px rgba(0,40,120,0.18);
}
.btn.primary:hover:not(:disabled){
  background:linear-gradient(180deg, #2280EE 0%, #1163CC 50%, var(--air-blue-deep) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 2px 4px rgba(0,40,120,0.34),
    0 6px 16px rgba(0,40,120,0.26),
    0 0 0 4px rgba(0,70,168,0.08);
}

/* --- (5) Notification bell: prominence + rest animation ---
   Existing bell is a plain icon. v7 gives the bell wrapper an accent
   ring when it has unread + a soft pulsing glow. */
.bell-wrap, .notif-bell{
  position:relative;
}
.bell-wrap.has-unread, .notif-bell.has-unread{
  box-shadow:
    0 0 0 1px rgba(220,43,43,0.30),
    0 0 16px rgba(220,43,43,0.20);
}

/* --- (6) Section labels (eyebrow / page headings) ---
   Make "Customers" / "Recent submissions" / etc. feel like proper
   section dividers — accent dot + tighter tracking + a bit more weight. */
h2, h3, .section-title, .page-title{
  letter-spacing:-0.018em;
}
h2, .section-title{
  position:relative;
  padding-left:14px;
}
h2::before, .section-title::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:4px; height:60%;
  background:linear-gradient(180deg, var(--air-blue) 0%, #2E87E5 100%);
  border-radius:2px;
  transform:translateY(-50%);
}

/* --- (7) Hover lift on actionable rows / list items in cards ---
   For lists inside cards (customer rows, submission rows etc.),
   give them a tiny accent on hover. */
.card .list-row, .card > div[data-row], .card > a[data-row]{
  transition:background 120ms ease, transform 120ms ease;
}
.card .list-row:hover, .card > div[data-row]:hover, .card > a[data-row]:hover{
  background:rgba(0,70,168,0.04);
}

/* --- (8) Sidebar group header more visible ---
   PIPELINE / SOURCING / INTERVIEW WORKFLOW eyebrow gains a subtle
   accent dot so the navigation tree feels structured. */
.nav-group-label{
  position:relative;
}
.nav-group-label::before{
  content:"";
  position:absolute;
  left:-4px; top:50%;
  width:3px; height:3px; border-radius:50%;
  background:var(--air-cyan);
  transform:translateY(-50%);
  opacity:0.5;
}

/* --- (9) "View roles" secondary buttons get hover lift ---
   Generic .btn (not primary) needs a hover-state with subtle lift. */
.btn:not(.primary):not(.danger):not(.ghost):hover:not(:disabled){
  transform:translateY(-1px);
  background:#FAFCFE;
  border-color:var(--air-blue);
  color:var(--air-blue);
}

/* === end PRESENCE LAYER v7 === */


/* ============================================================
   BOLD REDESIGN v8 (2026-06)
   ============================================================
   Joe's call: prior layers were too timid because per-page inline
   CSS overrode the shared shell. v8 uses higher specificity +
   !important on the cosmetic-only properties so the design lifts
   on EVERY page that uses these classes.
   
   HARD RULE: same as v5/v6/v7. !important is used only on:
   background, border, border-radius, box-shadow, color, font-weight,
   letter-spacing, transition. NEVER on width, height, margin,
   padding, position, display, top/left/right/bottom.
   
   This is intentional surgical use of !important to override
   page-local inline CSS for purely cosmetic properties. Layout
   stays exactly as each page declared it.
   ============================================================ */

/* --- (1) Section / card surfaces: warm off-white + soft elevation ---
   Page-local CSS typically declares .section{ background:white;border:1px solid border }
   v8 overrides: subtle gradient bg, no flat border, soft layered shadow,
   gentle hover lift via transform (compositor-only). */
.section, .card{
  background:linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 100%) !important;
  border:1px solid rgba(228,232,242,0.55) !important;
  box-shadow:
    0 1px 2px rgba(10,24,55,0.04),
    0 4px 12px rgba(10,24,55,0.05),
    0 12px 24px rgba(10,24,55,0.04) !important;
  transition:
    transform 240ms cubic-bezier(.2,.7,.3,1),
    box-shadow 240ms cubic-bezier(.2,.7,.3,1),
    border-color 200ms ease !important;
}
.section:hover, .card:hover{
  transform:translateY(-2px);
  box-shadow:
    0 4px 10px rgba(10,24,55,0.07),
    0 18px 36px rgba(10,24,55,0.08),
    0 30px 60px rgba(10,24,55,0.05) !important;
  border-color:rgba(0,70,168,0.18) !important;
}

/* --- (2) Section header / title — accent dot + primary colour ---
   Page-local .section-title is dark text. v8 makes it lighter/smaller
   but introduces an accent dot + a primary-blue colour so each section
   reads as a proper header. */
.section-title{
  color:var(--air-blue) !important;
  font-weight:700 !important;
  letter-spacing:-0.012em !important;
}
.section-head{
  border-bottom-color:rgba(0,70,168,0.10) !important;
}

/* --- (3) Form inputs: modern shadcn-style "depressed" feel ---
   Page-local .text-input is a flat white box. v8 swaps to: cooler
   gradient resting bg, 1.5px softer border, soft inset shadow,
   and a proper focus glow + ring. */
.text-input,
input.text-input,
select.text-input,
textarea.text-input,
.field-input input[type="text"],
.field-input input[type="email"],
.field-input input[type="url"],
.field-input input[type="number"],
.field-input input[type="tel"],
.field-input select,
.field-input textarea,
input[type="text"]:not(.skip-restyle),
input[type="email"]:not(.skip-restyle),
input[type="url"]:not(.skip-restyle),
input[type="number"]:not(.skip-restyle),
input[type="tel"]:not(.skip-restyle),
input[type="search"]:not(.skip-restyle){
  background:linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%) !important;
  border:1.5px solid #D4DBE8 !important;
  border-radius:10px !important;
  box-shadow:
    inset 0 1px 2px rgba(10,24,55,0.04),
    0 1px 0 rgba(255,255,255,0.5) !important;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease !important;
  color:var(--text) !important;
}
.text-input:hover:not(:focus):not(:disabled),
input.text-input:hover:not(:focus):not(:disabled),
input[type="text"]:hover:not(:focus):not(:disabled),
input[type="email"]:hover:not(:focus):not(:disabled){
  border-color:#A8B3C8 !important;
  background:linear-gradient(180deg, #F2F5FA 0%, #FFFFFF 100%) !important;
}
.text-input:focus,
input.text-input:focus,
select.text-input:focus,
textarea.text-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
.field-input input:focus,
.field-input select:focus,
.field-input textarea:focus{
  background:#FFFFFF !important;
  border-color:var(--air-blue) !important;
  box-shadow:
    inset 0 1px 1px rgba(10,24,55,0.03),
    0 0 0 4px rgba(0,70,168,0.16),
    0 1px 3px rgba(0,70,168,0.10) !important;
}
input:disabled, select:disabled, textarea:disabled{
  background:#F0F3F8 !important;
  color:#8B95A8 !important;
  cursor:not-allowed;
}

/* --- (4) Form labels & descriptions — proper typography hierarchy ---
   Page-local .field-label is plain bold dark text. v8 tightens tracking,
   uses semi-bold instead of full bold, and adds a subtle uppercase-mode
   for the "section eyebrow" feel. */
.field-label{
  color:#1C2330 !important;
  font-weight:600 !important;
  letter-spacing:-0.005em !important;
}
.field-desc{
  color:#5B6478 !important;
  font-size:12.5px;
  line-height:1.55;
}

/* --- (5) Required asterisk styling ---
   Currently rendered as a raw red `*`. Style as a small badge. */
label > .req, .field-label .req, label .required-marker, .field-label::after{
  color:#dc2b2b !important;
  font-weight:700;
}
/* Add an "(optional)" treatment for muted hints. */
.field-label .optional, .field-label small{
  color:var(--text-muted) !important;
  font-weight:500 !important;
  font-size:11px;
  text-transform:none;
  letter-spacing:0;
  margin-left:6px;
}

/* --- (6) Dictation mic button — proper interactive chrome ---
   Page-local class is .aria-dictate-btn. Make it a proper rounded
   button with hover state. */
.aria-dictate-btn{
  background:linear-gradient(180deg, #FFFFFF 0%, #F2F5FA 100%) !important;
  border:1.5px solid #D4DBE8 !important;
  border-radius:50% !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 1px 2px rgba(10,24,55,0.06) !important;
  color:#5B6478 !important;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 100ms ease,
    box-shadow 160ms ease !important;
}
.aria-dictate-btn:hover{
  background:linear-gradient(180deg, #F8FAFC 0%, #E8EFFF 100%) !important;
  border-color:var(--air-blue) !important;
  color:var(--air-blue) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 2px 6px rgba(0,70,168,0.18) !important;
  transform:translateY(-1px);
}
.aria-dictate-btn:active{ transform:translateY(0); }
.aria-dictate-btn.recording, .aria-dictate-btn.is-recording{
  background:linear-gradient(180deg, #FFE2E2 0%, #FFCCCC 100%) !important;
  border-color:#dc2b2b !important;
  color:#dc2b2b !important;
}

/* --- (7) Settings sub-nav links — refined active state ---
   Page-local .settings-link.active is white-on-white. v8 makes it
   primary-blue tinted bg with strong primary text. */
.settings-link.active{
  background:linear-gradient(135deg, var(--air-blue-soft) 0%, #DCE9FF 100%) !important;
  color:var(--air-blue-deep) !important;
  font-weight:700 !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,70,168,0.18),
    0 1px 2px rgba(10,24,55,0.06) !important;
}
.settings-link:hover{
  color:var(--air-blue) !important;
  background:rgba(0,70,168,0.04) !important;
}

/* --- (8) Page title — gradient ramp + tighter tracking ---
   Page-local .page-title is just bold dark. v8 gives it a gradient
   fill so the headline feels premium. */
.page-title{
  background:linear-gradient(135deg, var(--air-blue-deep) 0%, var(--air-blue) 60%, #1862c8 100%) !important;
  background-clip:text !important;
  -webkit-background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  letter-spacing:-0.022em !important;
  font-weight:700 !important;
}
.page-meta{
  color:#5B6478 !important;
}

/* --- (9) Toggles — primary brand colour when on (was generic green) ---
   Page-local toggle uses success-green when on. v8 changes to primary
   blue for consistency with brand. */
.toggle input:checked + .toggle-slider{
  background:linear-gradient(180deg, var(--air-blue) 0%, var(--air-blue-deep) 100%) !important;
  box-shadow:
    inset 0 1px 2px rgba(0,40,120,0.18),
    0 0 0 1px rgba(0,70,168,0.20) !important;
}

/* --- (10) Radio rows — selected state more emphatic ---
   Already styled in page-local CSS with primary-soft bg. v8 deepens
   the gradient + adds a glow. */
.radio-row.selected, .radio-row[aria-selected="true"]{
  background:linear-gradient(135deg, var(--air-blue-soft) 0%, #DCE9FF 100%) !important;
  border-color:var(--air-blue) !important;
  box-shadow:
    inset 0 0 0 1px var(--air-blue),
    0 4px 12px rgba(0,70,168,0.10) !important;
}

/* --- (11) Buttons (.btn, .btn.primary, .btn.secondary) — final pop ---
   Re-apply v7 primary CTA gradient but with !important so page-local
   .btn.primary{background:var(--air-blue);color:white} can't flatten it. */
.btn.primary{
  background:linear-gradient(180deg, #1A6FE0 0%, #0046a8 50%, #003280 100%) !important;
  border-color:var(--air-blue-deep) !important;
  color:#fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 1px 3px rgba(0,40,120,0.35),
    0 4px 12px rgba(0,40,120,0.22) !important;
  font-weight:600 !important;
}
.btn.primary:hover:not(:disabled){
  background:linear-gradient(180deg, #2280EE 0%, #1163CC 50%, var(--air-blue-deep) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 2px 6px rgba(0,40,120,0.34),
    0 8px 20px rgba(0,40,120,0.28),
    0 0 0 4px rgba(0,70,168,0.10) !important;
}
.btn.primary:active:not(:disabled){
  transform:translateY(1px);
}
.btn:not(.primary):not(.danger):not(.ghost){
  background:linear-gradient(180deg, #FFFFFF 0%, #F6F8FC 100%) !important;
  border:1.5px solid #D4DBE8 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 1px 2px rgba(10,24,55,0.06) !important;
  font-weight:600 !important;
}
.btn:not(.primary):not(.danger):not(.ghost):hover:not(:disabled){
  background:linear-gradient(180deg, #FAFCFE 0%, #EDF1F8 100%) !important;
  border-color:var(--air-blue) !important;
  color:var(--air-blue) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 2px 6px rgba(0,70,168,0.14) !important;
}

/* --- (12) Locked / readonly input look — clearly inert ---
   Page-local CSS uses opacity:0.7 or grey bg. v8 codifies. */
input[readonly], input.locked, .text-input[readonly]{
  background:linear-gradient(180deg, #F0F3F8 0%, #E8ECF3 100%) !important;
  border:1.5px solid #D8DEE8 !important;
  color:#5B6478 !important;
  box-shadow:none !important;
  cursor:not-allowed;
}

/* === end BOLD REDESIGN v8 === */


/* ============================================================
   WELCOME STATES v9 (2026-06)
   ============================================================
   Polish the empty/welcome states on the consultant search pages
   (Boolean sourcing, Similar Profile, Spec CV) and similar
   surfaces. Targets .empty-state + .results-shell + .card with
   welcome content. Zero layout shift; cosmetic-only.
   ============================================================ */

/* --- (1) Empty-state container gains a soft radial backdrop ---
   Was plain text-centered area. v9 adds a subtle radial primary glow
   so the panel feels intentional rather than blank. */
.empty-state{
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(0,70,168,0.06) 0%, transparent 70%) !important;
  border-radius:var(--r-md);
}
.empty-state .title{
  color:var(--text) !important;
  font-weight:700 !important;
  letter-spacing:-0.014em !important;
  font-size:17px !important;
  background:linear-gradient(135deg, var(--air-blue-deep) 0%, var(--air-blue) 70%, #1862c8 100%) !important;
  background-clip:text !important;
  -webkit-background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}
.empty-state > div:not(.icon):not(.title){
  color:var(--text-muted) !important;
  line-height:1.6;
  font-size:13.5px;
  max-width:480px;
  margin-left:auto;
  margin-right:auto;
}

/* --- (2) Results shell as a proper welcome card ---
   The right panel on search pages is `.results-shell` which has just
   min-height:300px. v9 turns it into a soft surface with subtle
   gradient bg so it doesn't look like an empty void. */
.results-shell{
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(46,135,229,0.06) 0%, transparent 60%),
    radial-gradient(80% 60% at 0% 100%, rgba(11,63,167,0.05) 0%, transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 100%) !important;
  border-radius:var(--r-md);
  border:1px solid rgba(228,232,242,0.55);
  box-shadow:
    0 1px 2px rgba(10,24,55,0.04),
    0 4px 12px rgba(10,24,55,0.05),
    0 12px 24px rgba(10,24,55,0.04);
}

/* --- (3) "Recent searches" empty inner state ---
   Inner empty states keep the subtle bg but smaller. */
.empty-state[style*="padding:18px 0"]{
  background:transparent !important;
}

/* --- (4) Sourcing form: NEW SEARCH eyebrow style ---
   Page-local CSS uses .form-title or similar that may not get the
   v8 .section-title treatment. Catch generic eyebrows. */
.form-title, .eyebrow, .form-eyebrow, .label-eyebrow{
  color:var(--air-blue) !important;
  font-weight:700 !important;
  letter-spacing:0.06em !important;
}

/* --- (5) Removed: padding overrides would shift layout ---
   The page-local CSS already gives empty-state proper padding (60px 20px). */

/* === end WELCOME STATES v9 === */


/* ============================================================
   DICTATION REC v10 (2026-06)
   ============================================================
   v8 over-shadowed aria-dictation's inline .rec rule, hiding the
   active recording state. v10 re-asserts the red + pulse so users
   can see the mic is live. Uses !important to beat v8's base rule.
   ============================================================ */
.aria-dictate-btn.rec,
.aria-dictate-wrap > .aria-dictate-btn.rec{
  background:linear-gradient(180deg, #d4423a 0%, #c0392b 100%) !important;
  color:#fff !important;
  border-color:#a0301f !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 0 0 4px rgba(192,57,43,0.18),
    0 2px 6px rgba(192,57,43,0.40),
    0 0 0 0 rgba(192,57,43,0.4) !important;
  animation:ariaDictatePulseV10 1.2s ease-out infinite !important;
}
.aria-dictate-btn.rec:hover,
.aria-dictate-wrap > .aria-dictate-btn.rec:hover{
  background:linear-gradient(180deg, #e04a40 0%, #b02d20 100%) !important;
  border-color:#902618 !important;
  color:#fff !important;
}
@keyframes ariaDictatePulseV10{
  0%   { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 0 0 rgba(192,57,43,0.45), 0 2px 6px rgba(192,57,43,0.40); }
  70%  { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 0 12px rgba(192,57,43,0), 0 2px 6px rgba(192,57,43,0.30); }
  100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 0 0 rgba(192,57,43,0), 0 2px 6px rgba(192,57,43,0.40); }
}
@media (prefers-reduced-motion:reduce){
  .aria-dictate-btn.rec,
  .aria-dictate-wrap > .aria-dictate-btn.rec{ animation:none !important; }
}
/* === end DICTATION REC v10 === */


/* ============================================================
   === FABLE LAYER v11 (2026-06) ===
   ============================================================
   Fresh-eye parity + finish pass. v5-v10 styled the canonical
   class names (.empty-state, .btn.primary, .modal-backdrop,
   .status-pill) but many pages speak sibling vocabularies
   (.empty, .btn-primary, .modal-bg, .status-badge) that received
   nothing. v11 closes those gaps and adds finishing detail.

   HARD RULE - identical to v5-v10: no width/height/margin/padding/
   position/display/inset changes on regular elements. Cosmetic
   properties only. !important used solely to beat page-local
   cosmetic declarations.
   ============================================================ */

/* --- (1) Welcome-state parity: .empty (34 pages) gets the v9 .empty-state radial + gradient title --- */
.empty{
  background:radial-gradient(60% 50% at 50% 0%, rgba(0,70,168,0.05) 0%, transparent 70%);
  border-radius:var(--r-md,12px);
}
.empty-title, .empty .title{
  background:linear-gradient(135deg, #003280 0%, #0046a8 70%, #1862c8 100%) !important;
  background-clip:text !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  font-weight:700 !important;
  letter-spacing:-0.014em !important;
}
.empty-desc{
  color:#5B6478 !important;
}

/* --- (2) Primary CTA parity: .btn-primary (7 consultant pages) matches the v8 .btn.primary gradient --- */
.btn-primary{
  background:linear-gradient(180deg, #1A6FE0 0%, #0046a8 50%, #003280 100%) !important;
  color:#fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 1px 3px rgba(0,40,120,0.35),
    0 4px 12px rgba(0,40,120,0.22) !important;
  transition:background 160ms ease, box-shadow 160ms ease, transform 100ms ease !important;
}
.btn-primary:hover:not(:disabled){
  background:linear-gradient(180deg, #2280EE 0%, #1163CC 50%, #003280 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 2px 6px rgba(0,40,120,0.34),
    0 8px 20px rgba(0,40,120,0.28),
    0 0 0 4px rgba(0,70,168,0.10) !important;
}
.btn-primary:active:not(:disabled){ transform:translateY(1px); }

/* --- (3) Search pill focus-within: inner input is outline:none, so the wrapper carries the ring --- */
.search{
  transition:border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.search:hover{ border-color:#A8B3C8; }
.search:focus-within{
  border-color:#0046a8 !important;
  box-shadow:
    0 0 0 4px rgba(0,70,168,0.14),
    0 1px 3px rgba(0,70,168,0.10);
  background:#fff;
}

/* --- (4) Badge depth parity: .status-badge / .stage-pill get the v6 printed-label inner ring, tinted via currentColor --- */
.status-badge, .stage-pill{
  background-image:linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 100%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
}

/* --- (5) Table finish: crisper thead seam + tabular digits so counts and dates align down columns --- */
.role-table thead, table.results thead{
  box-shadow:inset 0 -2px 0 rgba(0,70,168,0.08);
}
.role-table td, table.results td{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
}
.role-table thead th[data-sort]:hover .sort-arrow{ color:#0046a8; }

/* --- (6) Match-score bars: .fit-bar fill becomes a brand gradient over a sunken track --- */
.fit-bar{
  background:#EDF1F8 !important;
  box-shadow:inset 0 1px 2px rgba(10,24,55,0.10);
}
.fit-bar > span{
  background:linear-gradient(90deg, #0046a8 0%, #2E87E5 100%) !important;
  border-radius:inherit;
  box-shadow:0 0 6px rgba(46,135,229,0.35);
}

/* --- (7) Dropzone: soft radial tint at rest, brand glow on hover/drag-over --- */
.dropzone{
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(0,70,168,0.04) 0%, transparent 70%),
    #FAFCFF !important;
  border-color:#C7D2E4 !important;
  transition:border-color 160ms ease, background 200ms ease, box-shadow 200ms ease !important;
}
.dropzone:hover, .dropzone.dragover, .dropzone.is-dragover{
  border-color:#0046a8 !important;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(46,135,229,0.10) 0%, transparent 75%),
    #F4F8FF !important;
  box-shadow:0 0 0 4px rgba(0,70,168,0.07);
}

/* --- (8) Modal veil parity: .modal-bg matches the v6 dialog::backdrop blur treatment --- */
.modal-bg, .modal-overlay{
  background:rgba(10,24,55,0.42) !important;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

/* --- (9) Roles table card: elevation parity with .card/.section (missed the v8 surface pass) --- */
.table-card{
  background:linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 100%) !important;
  border:1px solid rgba(228,232,242,0.55) !important;
  box-shadow:
    0 1px 2px rgba(10,24,55,0.04),
    0 4px 12px rgba(10,24,55,0.05),
    0 12px 24px rgba(10,24,55,0.04) !important;
}

/* --- (10) Focus-within depth: the card you are typing in reads as the active surface --- */
.card:focus-within, .section:focus-within{
  border-color:rgba(0,70,168,0.22) !important;
  box-shadow:
    0 1px 2px rgba(10,24,55,0.05),
    0 6px 16px rgba(0,70,168,0.07),
    0 16px 32px rgba(10,24,55,0.05) !important;
}

/* --- (11) Dashboard rows: hover affordance on customer engagement / submission rows --- */
.customer-row, .submission-card{
  transition:border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.customer-row:hover, .submission-card:hover{
  border-color:rgba(0,70,168,0.30);
  background:linear-gradient(180deg, #FFFFFF 0%, #F7FAFF 100%);
  box-shadow:0 2px 8px rgba(10,24,55,0.06);
}

/* --- (12) Cursor consistency: clickable chrome always shows pointer --- */
.chip, .tag, .sp-tab, .settings-link, summary,
button:not(:disabled), [role="button"]:not([aria-disabled="true"]), label[for]{
  cursor:pointer;
}

/* === end FABLE LAYER v11 === */

/* ============================================================
   === P3 EMOJI SWEEP v12 (2026-06) ===
   RAG status dots replacing emoji circles. Additive only,
   same hard rule as v5-v11: no changes to existing rules.
   ============================================================ */
.rag-dot{display:inline-block;width:8px;height:8px;border-radius:999px;vertical-align:middle;margin-right:2px;flex-shrink:0}
.rag-dot--green{background:var(--success,#16a34a)}
.rag-dot--amber{background:var(--warning,#d97706)}
.rag-dot--red{background:var(--danger,#dc2626)}
.rag-dot--grey{background:var(--border-strong,#cbd5e1)}
/* === end P3 EMOJI SWEEP v12 === */


/* ============ VELARI TRIAL: slim sidebar + chrome ============
   Hides workflows that Aria now handles conversationally on the new home
   page. The agent IS the primary surface for Velari users, so the sourcing
   tools, separate analytics, and AiRtalent partnership are not shown in
   the sidebar. Roles / Candidates / Calendar stay for browsing. Pure CSS,
   scoped to body.org-velari - non-Velari users see the full nav. */
body.org-velari .nav-group[data-group="sourcing"],
body.org-velari .nav-group[data-group="interviews"],
body.org-velari .nav-group[data-group="airtalent"],
body.org-velari .nav-group[data-group="analytics"]{
  display:none !important;
}
body.org-velari .nav-item[data-key="ask"]{
  /* Home IS Aria for Velari users - the sidebar "Ask Aria" item is redundant. */
  display:none !important;
}
/* end Velari trial sidebar */


/* ===== Aria Agent: per-message thumbs feedback (slice 11) =====
   Sits below each assistant message in the chat panel. Buttons are 24px
   tap targets in a subtle row that doesn't fight the message text. */
.aap-msg-block { display: flex; flex-direction: column; gap: 6px; max-width: 100%; }
.aap-fb {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 2px; padding: 2px 0;
  font-size: 12px; color: rgba(20,38,75,0.45);
}
.aap-fb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 24px; padding: 0;
  border: 1px solid rgba(20,38,75,0.10);
  background: transparent; color: rgba(20,38,75,0.55);
  border-radius: 6px; cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.aap-fb-btn:hover { background: rgba(20,38,75,0.05); color: rgba(20,38,75,0.85); }
.aap-fb-btn.chosen { background: rgba(0,73,172,0.10); color: #0049ac; border-color: rgba(0,73,172,0.35); }
.aap-fb-btn:disabled { cursor: default; opacity: 0.75; }
.aap-fb-ack { margin-left: 6px; font-size: 11.5px; color: rgba(20,38,75,0.55); }

/* ===== Confidence band pill (slice 10) =====
   Tiny chip we drop next to the fit-bar so the user can scan strong vs weak at a glance. */
.conf {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.1px;
  border: 1px solid transparent; vertical-align: middle;
}
.conf-strong { background: rgba(22,192,137,0.12); color: #0e8a5f; border-color: rgba(22,192,137,0.30); }
.conf-okay   { background: rgba(0,73,172,0.10);  color: #0049ac; border-color: rgba(0,73,172,0.25); }
.conf-weak   { background: rgba(245,158,11,0.12); color: #b8740c; border-color: rgba(245,158,11,0.30); }
.conf-poor   { background: rgba(220,38,38,0.08); color: #9c2424; border-color: rgba(220,38,38,0.25); }


/* ===== Reasoning trail (slice 5) — collapsible "thinking" block under each Aria message ===== */
.aap-think {
  margin: 4px 0 2px 0;
  font-size: 12px;
  color: rgba(20,38,75,0.55);
  max-width: 100%;
}
.aap-think summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(20,38,75,0.04);
  border: 1px solid rgba(20,38,75,0.08);
  color: rgba(20,38,75,0.65);
  user-select: none;
  font-weight: 500;
}
.aap-think summary::-webkit-details-marker { display: none; }
.aap-think[open] summary { background: rgba(0,73,172,0.06); color: var(--air-blue, #0049ac); border-color: rgba(0,73,172,0.18); }
.aap-think-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(0,73,172,0.65);
  display: inline-block;
}
.aap-think-list {
  margin: 6px 0 4px 0;
  padding: 6px 12px;
  border-left: 2px solid rgba(0,73,172,0.18);
  list-style: none;
  font-size: 12px;
  line-height: 1.5;
}
.aap-think-list li { padding: 2px 0; }
.aap-think-name        { font-weight: 600; }
.aap-think-name.ok     { color: #0e8a5f; }
.aap-think-name.fail   { color: #9c2424; }
.aap-think-name.pending{ color: rgba(20,38,75,0.55); }
.aap-think-detail      { color: rgba(20,38,75,0.55); }
.aap-think-latency     { color: rgba(20,38,75,0.4); margin-left: 6px; font-variant-numeric: tabular-nums; }


/* ===== Streaming bubble (deferred C) - subtle caret while text streams in ===== */
.aap-msg.aap-streaming {
  white-space: pre-wrap;
}
.aap-msg.aap-streaming::after {
  content: "";
  display: inline-block;
  width: 6px; height: 14px;
  vertical-align: text-bottom;
  margin-left: 2px;
  background: rgba(0,73,172,0.55);
  animation: aap-caret 0.8s steps(2) infinite;
}
@keyframes aap-caret { 50% { opacity: 0; } }


/* ===== Aria chat markdown styles ===== */
.aap-msg .aap-heading {
  font-family: inherit; font-weight: 700;
  margin: 14px 0 6px;
  color: #0a1837;
}
.aap-msg h3.aap-heading { font-size: 16.5px; }
.aap-msg h4.aap-heading { font-size: 15px; }
.aap-msg h5.aap-heading { font-size: 14px; }
.aap-msg .aap-heading-inline {
  display: block; margin-top: 6px; font-size: 14.5px; font-weight: 700; color: #0a1837;
}
.aap-msg .aap-inline-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(20,38,75,0.06);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12.5px;
  color: #1f2e54;
}
.aap-msg .aap-hr {
  border: none; border-top: 1px solid rgba(20,38,75,0.10);
  margin: 14px 0;
}