/* =============================================================
   JOB DRIVE PORTAL — DESIGN TOKENS
   Drop this into src/styles/tokens.css
   Import once in main.tsx / App.tsx
   ============================================================= */

/* ── Google Fonts ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Root tokens — light mode ──────────────────────────────── */
:root {
  /* Brand */
  --color-violet-50:   #F5F4FF;
  --color-violet-100:  #EDE9FF;
  --color-violet-200:  #D4CFFF;
  --color-violet-300:  #B5ADFF;
  --color-violet-400:  #9089FF;
  --color-violet-500:  #6C63FF;   /* PRIMARY — CTA, links, active states */
  --color-violet-600:  #5249D9;
  --color-violet-700:  #3C35B3;
  --color-violet-800:  #3C2FA3;   /* text on violet fills */
  --color-violet-900:  #231B6B;

  /* Mint / success */
  --color-mint-50:     #F0FDF9;
  --color-mint-100:    #D6F9F1;
  --color-mint-200:    #A7F2E2;
  --color-mint-300:    #6DE6CC;
  --color-mint-400:    #2DD4B0;
  --color-mint-500:    #00C896;   /* success, placements, joined */
  --color-mint-600:    #00A87D;
  --color-mint-700:    #008A65;
  --color-mint-800:    #006B4E;
  --color-mint-900:    #004D38;

  /* Coral / error */
  --color-coral-50:    #FFF4F4;
  --color-coral-100:   #FFE0E0;
  --color-coral-200:   #FFBCBC;
  --color-coral-300:   #FF9090;
  --color-coral-400:   #FF6B6B;   /* error, danger, destructive */
  --color-coral-500:   #F54040;
  --color-coral-600:   #CC2828;
  --color-coral-700:   #A31C1C;
  --color-coral-800:   #791212;
  --color-coral-900:   #500A0A;

  /* Amber / warning */
  --color-amber-50:    #FFFBEB;
  --color-amber-100:   #FFF3C4;
  --color-amber-200:   #FFEC99;   /* warning bg */
  --color-amber-300:   #FFD966;
  --color-amber-400:   #FFC233;
  --color-amber-500:   #F5A800;
  --color-amber-600:   #CC8A00;
  --color-amber-700:   #A36E00;
  --color-amber-800:   #7A5200;   /* text on amber fills */
  --color-amber-900:   #523600;

  /* Pink / accent */
  --color-pink-50:     #FFF0F9;
  --color-pink-100:    #FFD6EE;
  --color-pink-200:    #FFBAE3;
  --color-pink-300:    #FF9AD5;   /* accent highlights */
  --color-pink-400:    #FF6DC0;
  --color-pink-500:    #F040A8;
  --color-pink-600:    #CC3089;
  --color-pink-700:    #A3226C;
  --color-pink-800:    #7A1652;
  --color-pink-900:    #520D38;

  /* Neutral */
  --color-gray-50:     #FAFAFA;
  --color-gray-100:    #F4F4F5;
  --color-gray-200:    #E4E4E7;
  --color-gray-300:    #D1D1D6;
  --color-gray-400:    #A1A1AA;
  --color-gray-500:    #6B7280;
  --color-gray-600:    #52525B;
  --color-gray-700:    #3F3F46;
  --color-gray-800:    #27272A;
  --color-gray-900:    #18181B;

  /* Ink (sidebar + dark nav) */
  --color-ink-900:     #1A1A2E;
  --color-ink-800:     #16213E;
  --color-ink-700:     #0F3460;

  /* ── Semantic aliases ──────────────────────────────────── */
  --color-bg-page:         var(--color-violet-50);   /* #F5F4FF — page bg */
  --color-bg-card:         #FFFFFF;
  --color-bg-surface:      var(--color-gray-100);
  --color-bg-overlay:      rgba(26, 26, 46, 0.5);    /* modal backdrop */

  --color-text-primary:    var(--color-gray-900);
  --color-text-secondary:  var(--color-gray-500);
  --color-text-tertiary:   var(--color-gray-400);
  --color-text-inverse:    #FFFFFF;
  --color-text-brand:      var(--color-violet-500);
  --color-text-success:    var(--color-mint-700);
  --color-text-warning:    var(--color-amber-800);
  --color-text-error:      var(--color-coral-700);

  --color-border-default:  var(--color-gray-200);    /* 1px borders */
  --color-border-subtle:   var(--color-gray-100);    /* 0.5px dividers */
  --color-border-focus:    var(--color-violet-500);  /* focus rings */
  --color-border-error:    var(--color-coral-400);

  --color-brand-primary:   var(--color-violet-500);
  --color-brand-hover:     var(--color-violet-600);
  --color-brand-active:    var(--color-violet-700);
  --color-brand-subtle:    var(--color-violet-100);

  /* ── Sidebar ───────────────────────────────────────────── */
  --sidebar-bg:            var(--color-ink-900);
  --sidebar-width:         260px;
  --sidebar-text:          rgba(255,255,255,0.65);
  --sidebar-text-active:   #FFFFFF;
  --sidebar-item-active-bg:rgba(108, 99, 255, 0.2);
  --sidebar-item-hover-bg: rgba(255,255,255,0.07);
  --sidebar-border:        rgba(255,255,255,0.08);

  /* ── Typography ────────────────────────────────────────── */
  --font-base:             'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:             'JetBrains Mono', 'Fira Code', monospace;

  --text-display:  clamp(32px, 5vw, 48px);
  --text-h1:       28px;
  --text-h2:       22px;
  --text-h3:       17px;
  --text-body-lg:  16px;
  --text-body:     15px;
  --text-sm:       13px;
  --text-xs:       11px;
  --text-mono:     12px;

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;

  --tracking-tight: -0.8px;    /* h1, h2 */
  --tracking-normal: 0;
  --tracking-wide:  0.5px;     /* labels, uppercase */

  /* ── Spacing ────────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* ── Border radius ──────────────────────────────────────── */
  --radius-sm:   4px;   /* inputs, tags */
  --radius-md:   8px;   /* buttons, small cards */
  --radius-lg:   12px;  /* cards, panels */
  --radius-xl:   16px;  /* modals, large cards */
  --radius-2xl:  24px;  /* drawers */
  --radius-full: 9999px;/* pills, avatars */

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-none:    none;
  --shadow-card:    0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-dropdown:0 4px 16px rgba(0,0,0,0.10);
  --shadow-modal:   0 8px 32px rgba(26,26,46,0.18);
  --shadow-focus:   0 0 0 3px rgba(108,99,255,0.25);

  /* ── Z-index ────────────────────────────────────────────── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-drawer:   300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ── Motion ─────────────────────────────────────────────── */
  --duration-fast:    120ms;
  --duration-normal:  220ms;
  --duration-slow:    350ms;
  --ease-out:         cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-spring:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce:      cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Component tokens ────────────────────────────────────── */

  /* Button */
  --btn-height-sm:     32px;
  --btn-height-md:     40px;
  --btn-height-lg:     48px;
  --btn-px-sm:         12px;
  --btn-px-md:         16px;
  --btn-px-lg:         24px;
  --btn-radius:        var(--radius-md);
  --btn-font-size:     14px;
  --btn-font-weight:   var(--weight-medium);

  /* Input */
  --input-height:      40px;
  --input-px:          12px;
  --input-radius:      var(--radius-sm);
  --input-border:      1px solid var(--color-border-default);
  --input-bg:          #FFFFFF;
  --input-font-size:   14px;

  /* Card */
  --card-padding:      var(--space-4) var(--space-5);
  --card-radius:       var(--radius-lg);
  --card-border:       1px solid var(--color-border-subtle);
  --card-bg:           var(--color-bg-card);

  /* Badge */
  --badge-px:          8px;
  --badge-py:          3px;
  --badge-radius:      var(--radius-full);
  --badge-font-size:   11px;
  --badge-font-weight: var(--weight-medium);

  /* Avatar */
  --avatar-sm:   28px;
  --avatar-md:   40px;
  --avatar-lg:   64px;
  --avatar-xl:   96px;

  /* Sidebar */
  --sidebar-item-px:   16px;
  --sidebar-item-py:   10px;
  --sidebar-item-gap:  10px;
  --sidebar-item-radius: var(--radius-md);
}

/* ── Dark mode tokens ───────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-page:         #12121F;
    --color-bg-card:         #1C1C2E;
    --color-bg-surface:      #242436;
    --color-bg-overlay:      rgba(0,0,0,0.65);

    --color-text-primary:    #F0EFFF;
    --color-text-secondary:  #9494B8;
    --color-text-tertiary:   #6B6B90;

    --color-border-default:  rgba(255,255,255,0.10);
    --color-border-subtle:   rgba(255,255,255,0.06);

    --color-brand-subtle:    rgba(108,99,255,0.18);

    --sidebar-bg:            #0E0E1A;
    --input-bg:              #1C1C2E;

    --shadow-card:    0 1px 3px rgba(0,0,0,0.3);
    --shadow-dropdown:0 4px 16px rgba(0,0,0,0.4);
    --shadow-modal:   0 8px 32px rgba(0,0,0,0.5);
  }
}


/* =============================================================
   TAILWIND CONFIG  (tailwind.config.ts)
   ============================================================= */

/*
import type { Config } from 'tailwindcss'

const config: Config = {
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
      },
      colors: {
        violet: {
          50:  '#F5F4FF', 100: '#EDE9FF', 200: '#D4CFFF',
          300: '#B5ADFF', 400: '#9089FF', 500: '#6C63FF',
          600: '#5249D9', 700: '#3C35B3', 800: '#3C2FA3', 900: '#231B6B',
        },
        mint: {
          50:  '#F0FDF9', 100: '#D6F9F1', 200: '#A7F2E2',
          300: '#6DE6CC', 400: '#2DD4B0', 500: '#00C896',
          600: '#00A87D', 700: '#008A65', 800: '#006B4E', 900: '#004D38',
        },
        coral: {
          50:  '#FFF4F4', 100: '#FFE0E0', 200: '#FFBCBC',
          300: '#FF9090', 400: '#FF6B6B', 500: '#F54040',
          600: '#CC2828', 700: '#A31C1C', 800: '#791212', 900: '#500A0A',
        },
        ink: {
          700: '#0F3460', 800: '#16213E', 900: '#1A1A2E',
        },
      },
      borderRadius: {
        sm:   '4px',
        md:   '8px',
        lg:   '12px',
        xl:   '16px',
        '2xl':'24px',
      },
      spacing: {
        '4.5': '18px',
        '13':  '52px',
        '15':  '60px',
        '18':  '72px',
        '22':  '88px',
      },
      fontSize: {
        'xs':  ['11px', { lineHeight: '1.4', letterSpacing: '0.4px' }],
        'sm':  ['13px', { lineHeight: '1.5' }],
        'base':['15px', { lineHeight: '1.6' }],
        'lg':  ['17px', { lineHeight: '1.5', letterSpacing: '-0.2px' }],
        'xl':  ['22px', { lineHeight: '1.3', letterSpacing: '-0.4px' }],
        '2xl': ['28px', { lineHeight: '1.2', letterSpacing: '-0.8px' }],
        '3xl': ['36px', { lineHeight: '1.1', letterSpacing: '-1.5px' }],
      },
      boxShadow: {
        card:    '0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)',
        dropdown:'0 4px 16px rgba(0,0,0,0.10)',
        modal:   '0 8px 32px rgba(26,26,46,0.18)',
        focus:   '0 0 0 3px rgba(108,99,255,0.25)',
      },
      keyframes: {
        shimmer: {
          '0%':   { backgroundPosition: '-400px 0' },
          '100%': { backgroundPosition: '400px 0' },
        },
        slideUp: {
          '0%':   { transform: 'translateY(8px)', opacity: '0' },
          '100%': { transform: 'translateY(0)',   opacity: '1' },
        },
        scaleIn: {
          '0%':   { transform: 'scale(0.96)', opacity: '0' },
          '100%': { transform: 'scale(1)',    opacity: '1' },
        },
      },
      animation: {
        shimmer:  'shimmer 1.5s ease-in-out infinite',
        slideUp:  'slideUp 0.22s cubic-bezier(0.16,1,0.3,1)',
        scaleIn:  'scaleIn 0.18s ease-out',
      },
    },
  },
  plugins: [],
}

export default config
*/


/* =============================================================
   RADIX UI CSS VARIABLE OVERRIDES
   Map Radix accent/neutral scales to our brand tokens.
   Import after tokens.css in your root.
   ============================================================= */

/* Radix accent = violet */
:root {
  --accent-1:  var(--color-violet-50);
  --accent-2:  var(--color-violet-100);
  --accent-3:  var(--color-violet-200);
  --accent-4:  var(--color-violet-300);
  --accent-5:  var(--color-violet-400);
  --accent-6:  var(--color-violet-500);
  --accent-7:  var(--color-violet-600);
  --accent-8:  var(--color-violet-700);
  --accent-9:  var(--color-violet-800);
  --accent-10: var(--color-violet-900);
  --accent-contrast: #FFFFFF;

  /* Radix focus ring */
  --focus-8: var(--shadow-focus);
}


/* =============================================================
   BASE STYLES
   ============================================================= */

html {
  font-family: var(--font-base);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-color: var(--color-bg-page);
  color: var(--color-text-primary);
}

body {
  min-height: 100vh;
  line-height: var(--leading-normal);
}

* {
  box-sizing: border-box;
}

/* ── Headings ────────────────────────────────────────────────── */
h1 { font-size: var(--text-h1); font-weight: var(--weight-bold);    letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
h2 { font-size: var(--text-h2); font-weight: var(--weight-semibold); letter-spacing: -0.4px;               line-height: var(--leading-snug); }
h3 { font-size: var(--text-h3); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }

/* ── Focus ring ─────────────────────────────────────────────── */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ── Skeleton shimmer ─────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-gray-100) 25%,
    var(--color-gray-200) 37%,
    var(--color-gray-100) 63%
  );
  background-size: 800px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

/* ── Scrollbar (webkit) ──────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-gray-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-gray-400); }


/* =============================================================
   COMPONENT UTILITY CLASSES
   ============================================================= */

/* ── Card ─────────────────────────────────────────────────────── */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--card-padding);
  box-shadow: var(--shadow-card);
}

/* ── Badge / status chip ──────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--badge-py) var(--badge-px);
  border-radius: var(--badge-radius);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  line-height: 1;
  white-space: nowrap;
}

.badge-violet  { background: var(--color-violet-100);  color: var(--color-violet-800); }
.badge-mint    { background: var(--color-mint-100);    color: var(--color-mint-800); }
.badge-coral   { background: var(--color-coral-100);   color: var(--color-coral-700); }
.badge-amber   { background: var(--color-amber-200);   color: var(--color-amber-800); }
.badge-pink    { background: var(--color-pink-100);    color: var(--color-pink-800); }
.badge-gray    { background: var(--color-gray-100);    color: var(--color-gray-600); }

/* Drive status → badge class mapping:
   draft        → badge-gray
   published    → badge-mint
   ongoing      → badge-amber
   completed    → badge-violet
   cancelled    → badge-coral
   
   Interview result:
   pass         → badge-mint
   fail         → badge-coral
   hold         → badge-amber
   pending      → badge-gray
   
   Offer status:
   rolled_out   → badge-pink
   accepted     → badge-mint
   declined     → badge-coral
   joined       → badge-violet
   no_show_joining → badge-gray
*/

/* ── Button variants ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--btn-height-md);
  padding: 0 var(--btn-px-md);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  cursor: pointer;
  border: none;
  transition: background var(--duration-fast) var(--ease-out),
              transform  var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}

.btn:active   { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  background: var(--color-brand-primary);
  color: #FFFFFF;
}
.btn-primary:hover  { background: var(--color-brand-hover); }
.btn-primary:active { background: var(--color-brand-active); }

.btn-secondary {
  background: var(--color-brand-subtle);
  color: var(--color-violet-800);
  border: 1px solid var(--color-violet-200);
}
.btn-secondary:hover { background: var(--color-violet-200); }

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-default);
}
.btn-ghost:hover { background: var(--color-bg-surface); color: var(--color-text-primary); }

.btn-danger {
  background: var(--color-coral-100);
  color: var(--color-coral-700);
  border: 1px solid var(--color-coral-200);
}
.btn-danger:hover { background: var(--color-coral-200); }

.btn-sm { height: var(--btn-height-sm); padding: 0 var(--btn-px-sm); font-size: 12px; }
.btn-lg { height: var(--btn-height-lg); padding: 0 var(--btn-px-lg); font-size: 16px; }

/* ── Input ─────────────────────────────────────────────────────── */
.input {
  height: var(--input-height);
  padding: 0 var(--input-px);
  border: var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  color: var(--color-text-primary);
  font-size: var(--input-font-size);
  font-family: var(--font-base);
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow   var(--duration-fast) var(--ease-out);
}
.input::placeholder { color: var(--color-text-tertiary); }
.input:focus-visible {
  border-color: var(--color-brand-primary);
  box-shadow: var(--shadow-focus);
  outline: none;
}
.input[aria-invalid="true"] {
  border-color: var(--color-border-error);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2);
}

/* ── Profile completeness ring (SVG) ─────────────────────────── */
/*
  Usage:
  <svg viewBox="0 0 48 48" width="80" height="80">
    <circle cx="24" cy="24" r="20" fill="none" stroke="var(--color-gray-200)" stroke-width="4"/>
    <circle cx="24" cy="24" r="20" fill="none"
            stroke="var(--color-brand-primary)"
            stroke-width="4"
            stroke-linecap="round"
            stroke-dasharray="125.7"
            stroke-dashoffset="calc(125.7 - (125.7 * var(--pct) / 100))"
            transform="rotate(-90 24 24)"/>
    <text x="24" y="28" text-anchor="middle" font-size="11" font-weight="600"
          fill="var(--color-text-primary)">75%</text>
  </svg>
  Set --pct via inline style or JS.
*/

/* ── Interest button ─────────────────────────────────────────── */
.interest-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: var(--weight-medium);
  border: 1.5px solid var(--color-border-default);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.interest-btn:hover {
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
  background: var(--color-brand-subtle);
}
.interest-btn.active {
  border-color: var(--color-brand-primary);
  background: var(--color-brand-primary);
  color: #FFFFFF;
}
.interest-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Sidebar nav item ──────────────────────────────────────────── */
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sidebar-item-gap);
  padding: var(--sidebar-item-py) var(--sidebar-item-px);
  border-radius: var(--sidebar-item-radius);
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--sidebar-text);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
  text-decoration: none;
}
.nav-item:hover { background: var(--sidebar-item-hover-bg); color: var(--sidebar-text-active); }
.nav-item.active {
  background: var(--sidebar-item-active-bg);
  color: var(--sidebar-text-active);
}
.nav-item .nav-icon { font-size: 18px; flex-shrink: 0; }

/* ── Drive card (home carousel) ──────────────────────────────── */
.drive-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  min-width: 280px;
  max-width: 320px;
  box-shadow: var(--shadow-card);
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.drive-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-dropdown);
}

/* ── Document tile ──────────────────────────────────────────── */
.doc-tile {
  border: 1.5px dashed var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background   var(--duration-fast) var(--ease-out);
}
.doc-tile:hover { border-color: var(--color-brand-primary); background: var(--color-brand-subtle); }
.doc-tile.uploaded { border-style: solid; border-color: var(--color-mint-500); }
.doc-tile.mandatory.missing { border-color: var(--color-coral-400); background: var(--color-coral-50); }
.doc-tile.verified { border-color: var(--color-mint-500); background: var(--color-mint-50); }

/* ── Interview timeline ──────────────────────────────────────── */
.timeline-item {
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  position: relative;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: 0;
  width: 2px;
  background: var(--color-border-default);
}
.timeline-item:last-child::before { display: none; }
.timeline-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  border: 2px solid var(--color-border-default);
  background: var(--color-bg-card);
}
.timeline-dot.pass   { border-color: var(--color-mint-500);  background: var(--color-mint-100);  color: var(--color-mint-700); }
.timeline-dot.fail   { border-color: var(--color-coral-400); background: var(--color-coral-100); color: var(--color-coral-700); }
.timeline-dot.pending{ border-color: var(--color-amber-400); background: var(--color-amber-200); color: var(--color-amber-800); }

/* ── CompletenessBar ─────────────────────────────────────────── */
.completeness-bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-gray-200);
  overflow: hidden;
}
.completeness-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  transition: width 0.4s var(--ease-spring);
}
.completeness-bar-fill[data-pct="100"] { background: var(--color-mint-500); }