1 line
46 KiB
HTML
1 line
46 KiB
HTML
<div class="space-y-6"><header class="flex flex-wrap items-center justify-between gap-4 border-b border-border/50 pb-4"><div class="min-w-0 space-y-1"><div class="flex flex-wrap items-center gap-x-2.5 gap-y-1.5"><h1 class="font-heading text-title-lg font-bold tracking-tight text-ink-1 sm:text-2xl">Analytics</h1><span class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full bg-blue-50 px-2.5 py-0.5 text-[11px] font-semibold text-blue-600 dark:bg-blue-950/60 dark:text-blue-400 border border-blue-200/60 dark:border-blue-800/40"><span class="h-1.5 w-1.5 rounded-full bg-blue-600 dark:bg-blue-400"></span>Live System</span></div><p class="text-body-sm text-ink-3 font-normal">How hiring is performing — rates, trends, comparison and what to act on.</p></div></header><section aria-labelledby="performance" class="space-y-3"><div class="flex flex-wrap items-baseline justify-between gap-2"><div class="flex min-w-0 flex-wrap items-baseline gap-x-2"><h2 id="performance" class="font-heading text-body font-semibold text-ink-1">Hiring performance</h2><span class="text-caption text-ink-4">Across the workspace</span></div></div><div class="grid gap-3.5 grid-cols-2 sm:grid-cols-4"><div class="group relative flex flex-col justify-between rounded-xl border border-border/80 bg-surface p-4 shadow-xs backdrop-blur-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-blue-500/40"><div><div class="flex items-center justify-between gap-1.5"><p class="min-w-0 line-clamp-2 text-[10px] font-bold uppercase tracking-wider text-ink-4 sm:line-clamp-1">Total hires</p><div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg shadow-xs bg-blue-50 text-blue-600 dark:bg-blue-950/60 dark:text-blue-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-award h-3.5 w-3.5" aria-hidden="true"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"></path><circle cx="12" cy="8" r="6"></circle></svg></div></div><div class="mt-2 flex flex-wrap items-baseline gap-2"><span class="font-heading font-bold leading-none tabular-nums text-blue-600 dark:text-blue-400">5</span></div></div><div class="mt-3.5 space-y-2"><div class="h-0.5 w-full rounded-full bg-gradient-to-r opacity-40 group-hover:opacity-100 transition-opacity from-blue-500 to-indigo-500"></div></div></div><div class="group relative flex flex-col justify-between rounded-xl border border-border/80 bg-surface p-4 shadow-xs backdrop-blur-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-blue-500/40"><div><div class="flex items-center justify-between gap-1.5"><p class="min-w-0 line-clamp-2 text-[10px] font-bold uppercase tracking-wider text-ink-4 sm:line-clamp-1">Avg time-to-hire</p><div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg shadow-xs bg-surface-subtle text-ink-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></div></div><div class="mt-2 flex flex-wrap items-baseline gap-2"><span class="font-heading font-bold leading-none tabular-nums text-ink-1">2d</span></div></div><div class="mt-3.5 space-y-2"><span class="inline-flex items-center rounded-full bg-surface-subtle px-2 py-0.5 text-[10px] font-semibold text-ink-3 border border-border/60">2d median</span><div class="h-0.5 w-full rounded-full bg-gradient-to-r opacity-40 group-hover:opacity-100 transition-opacity from-gray-400 to-gray-600"></div></div></div><div class="group relative flex flex-col justify-between rounded-xl border border-border/80 bg-surface p-4 shadow-xs backdrop-blur-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-blue-500/40"><div><div class="flex items-center justify-between gap-1.5"><p class="min-w-0 line-clamp-2 text-[10px] font-bold uppercase tracking-wider text-ink-4 sm:line-clamp-1">Quality of hire</p><div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg shadow-xs bg-emerald-50 text-emerald-600 dark:bg-emerald-950/60 dark:text-emerald-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-3.5 w-3.5" aria-hidden="true"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg></div></div><div class="mt-2 flex flex-wrap items-baseline gap-2"><span class="font-heading font-bold leading-none tabular-nums text-emerald-600 dark:text-emerald-400">90</span></div></div><div class="mt-3.5 space-y-2"><span class="inline-flex items-center rounded-full bg-surface-subtle px-2 py-0.5 text-[10px] font-semibold text-ink-3 border border-border/60">avg AI score</span><div class="h-0.5 w-full rounded-full bg-gradient-to-r opacity-40 group-hover:opacity-100 transition-opacity from-emerald-500 to-teal-500"></div></div></div><div class="group relative flex flex-col justify-between rounded-xl border border-border/80 bg-surface p-4 shadow-xs backdrop-blur-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-blue-500/40"><div><div class="flex items-center justify-between gap-1.5"><p class="min-w-0 line-clamp-2 text-[10px] font-bold uppercase tracking-wider text-ink-4 sm:line-clamp-1">Conversion rate</p><div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg shadow-xs bg-surface-subtle text-ink-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-target h-3.5 w-3.5" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="6"></circle><circle cx="12" cy="12" r="2"></circle></svg></div></div><div class="mt-2 flex flex-wrap items-baseline gap-2"><span class="font-heading font-bold leading-none tabular-nums text-ink-1">0%</span></div></div><div class="mt-3.5 space-y-2"><span class="inline-flex items-center rounded-full bg-surface-subtle px-2 py-0.5 text-[10px] font-semibold text-ink-3 border border-border/60">0 of 0 applicants</span><div class="h-0.5 w-full rounded-full bg-gradient-to-r opacity-40 group-hover:opacity-100 transition-opacity from-gray-400 to-gray-600"></div></div></div></div></section><section aria-labelledby="funnel" class="space-y-3"><div class="flex flex-wrap items-baseline justify-between gap-2"><div class="flex min-w-0 flex-wrap items-baseline gap-x-2"><h2 id="funnel" class="font-heading text-body font-semibold text-ink-1">Hiring funnel</h2><span class="text-caption text-ink-4">Applied → Screened → Shortlisted → Interview → Hired</span></div></div><div class="transition-all duration-base ease-out bg-surface shadow-xs rounded-xl p-6 border border-border"><p class="text-body-sm leading-relaxed text-ink-3">No applications on file yet. The funnel appears once the first candidate applies.</p></div></section><section aria-labelledby="trend" class="space-y-3"><div class="flex flex-wrap items-baseline justify-between gap-2"><div class="flex min-w-0 flex-wrap items-baseline gap-x-2"><h2 id="trend" class="font-heading text-body font-semibold text-ink-1">Hiring trend</h2><span class="text-caption text-ink-4">Cumulative hires by month</span></div></div><div class="overflow-hidden rounded-xl border border-border bg-surface"><div class="px-4 py-8 text-center"><p class="font-heading text-body font-semibold text-ink-1">Not enough history for a trend</p><p class="mx-auto mt-1 max-w-md text-body-sm leading-relaxed text-ink-3">All 5 hires closed in Jul. A month-on-month line appears once hiring spans a second month.</p></div></div></section><section aria-labelledby="departments" class="space-y-3"><div class="flex flex-wrap items-baseline justify-between gap-2"><div class="flex min-w-0 flex-wrap items-baseline gap-x-2"><h2 id="departments" class="font-heading text-body font-semibold text-ink-1">Department performance</h2><span class="text-caption text-ink-4">4 departments compared</span></div></div><div class="overflow-hidden rounded-2xl border border-border bg-surface shadow-sm transition-all"><div class="flex flex-wrap items-center justify-between gap-3 border-b border-border px-4 py-3.5 sm:px-6"><div class="flex items-center gap-2.5"><div class="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-50 text-blue-600 dark:bg-blue-950/50 dark:text-blue-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-workflow h-4 w-4"><rect width="8" height="8" x="3" y="3" rx="2"></rect><path d="M7 11v4a2 2 0 0 0 2 2h4"></path><rect width="8" height="8" x="13" y="13" rx="2"></rect></svg></div><div><h3 class="font-heading text-body font-semibold text-ink-1">Department Performance & Hiring Flow</h3><p class="text-caption text-ink-3">Interactive pipeline mapping AI score quality & hire velocity across departments</p></div></div><div class="flex items-center rounded-xl bg-surface-subtle p-1 border border-border/60"><button type="button" class="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-caption transition-all bg-surface text-ink-1 shadow-xs font-semibold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-workflow h-3.5 w-3.5 text-blue-600"><rect width="8" height="8" x="3" y="3" rx="2"></rect><path d="M7 11v4a2 2 0 0 0 2 2h4"></path><rect width="8" height="8" x="13" y="13" rx="2"></rect></svg><span>Flowchart</span></button><button type="button" class="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-caption font-medium transition-all text-ink-3 hover:text-ink-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-table h-3.5 w-3.5 text-ink-3"><path d="M12 3v18"></path><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M3 9h18"></path><path d="M3 15h18"></path></svg><span>Scorecard</span></button></div></div><div class="grid grid-cols-2 gap-3 border-b border-border bg-surface-subtle/50 px-4 py-3 sm:grid-cols-4 sm:px-6"><div class="flex items-center gap-2.5"><div class="flex h-8 w-8 items-center justify-center rounded-lg bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trophy h-4 w-4"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"></path><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"></path><path d="M4 22h16"></path><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"></path><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"></path><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"></path></svg></div><div><p class="text-[10px] uppercase tracking-wider text-ink-4 font-semibold">Top Department</p><p class="font-heading text-body-sm font-bold text-ink-1">Security <span class="text-blue-600 font-semibold">(95)</span></p></div></div><div class="flex items-center gap-2.5"><div class="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-building2 h-4 w-4"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"></path><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"></path><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"></path><path d="M10 6h4"></path><path d="M10 10h4"></path><path d="M10 14h4"></path><path d="M10 18h4"></path></svg></div><div><p class="text-[10px] uppercase tracking-wider text-ink-4 font-semibold">Active Units</p><p class="font-heading text-body-sm font-bold text-ink-1">4 Departments</p></div></div><div class="flex items-center gap-2.5"><div class="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles h-4 w-4"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg></div><div><p class="text-[10px] uppercase tracking-wider text-ink-4 font-semibold">Overall AI Index</p><p class="font-heading text-body-sm font-bold text-emerald-600 dark:text-emerald-400">91 / 100</p></div></div><div class="flex items-center gap-2.5"><div class="flex h-8 w-8 items-center justify-center rounded-lg bg-purple-100 text-purple-700 dark:bg-purple-950 dark:text-purple-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-4 w-4"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></div><div><p class="text-[10px] uppercase tracking-wider text-ink-4 font-semibold">Top Fill Velocity</p><p class="font-heading text-body-sm font-bold text-ink-1">1d Avg</p></div></div></div><div class="p-3 sm:p-4"><div class="relative" style="opacity:0;transform:translateY(8px)"><div class="relative rounded-2xl border border-border/70 bg-gradient-to-br from-surface via-surface-subtle/30 to-surface p-4 sm:p-5 overflow-hidden shadow-xs space-y-5"><div class="grid grid-cols-1 gap-4 md:grid-cols-2"><div class="relative rounded-2xl border border-blue-500/30 bg-gradient-to-r from-blue-50/60 via-surface to-surface dark:from-blue-950/30 dark:via-surface p-4 shadow-xs transition-all hover:border-blue-500"><div class="flex items-center justify-between"><div class="flex items-center gap-3"><div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-blue-600 to-indigo-600 text-white shadow-md shadow-blue-500/25"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users h-5 w-5"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg></div><div><span class="inline-flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider text-blue-600 dark:text-blue-400"><span class="h-2 w-2 rounded-full bg-blue-600 animate-pulse"></span>Pipeline Source</span><h4 class="font-heading text-body-lg font-bold text-ink-1">Talent Engine</h4></div></div><div class="text-right"><span class="rounded-full bg-blue-100 dark:bg-blue-950 px-2.5 py-1 text-[10px] font-bold text-blue-700 dark:text-blue-400">100% AI Verified Engine</span></div></div><div class="mt-3 grid grid-cols-2 gap-3 border-t border-border/60 pt-3 text-caption"><div class="rounded-xl bg-surface-subtle p-2.5"><p class="text-[10px] text-ink-4 font-semibold uppercase tracking-wider">Total Hires</p><p class="font-heading text-body-lg font-bold tabular-nums text-ink-1 mt-0.5">5 <span class="text-caption font-normal text-ink-3">staff filled</span></p></div><div class="rounded-xl bg-surface-subtle p-2.5"><p class="text-[10px] text-ink-4 font-semibold uppercase tracking-wider">Avg AI Score</p><p class="font-heading text-body-lg font-bold tabular-nums text-blue-600 dark:text-blue-400 mt-0.5">91 <span class="text-caption font-normal text-ink-3">/ 100</span></p></div></div></div><div class="relative rounded-2xl border border-emerald-500/30 bg-gradient-to-r from-emerald-50/60 via-surface to-surface dark:from-emerald-950/30 dark:via-surface p-4 shadow-xs transition-all hover:border-emerald-500"><div class="flex items-center justify-between"><div class="flex items-center gap-3"><div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-600 to-teal-600 text-white shadow-md shadow-emerald-500/25"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles h-5 w-5"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg></div><div><span class="inline-flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400">Hiring Outcomes</span><h4 class="font-heading text-body-lg font-bold text-ink-1">Verified Quality Impact</h4></div></div><div class="text-right"><span class="rounded-full bg-emerald-100 dark:bg-emerald-950 px-2.5 py-1 text-[10px] font-bold text-emerald-700 dark:text-emerald-400">100% Active Placement</span></div></div><div class="mt-3 grid grid-cols-3 gap-2 border-t border-border/60 pt-3 text-caption"><div class="rounded-xl bg-surface-subtle p-2 text-center"><p class="text-[10px] text-ink-4 font-semibold uppercase tracking-wider">Quality Tier</p><p class="font-semibold text-emerald-600 dark:text-emerald-400 mt-0.5 text-body-sm">95+ Top</p></div><div class="rounded-xl bg-surface-subtle p-2 text-center"><p class="text-[10px] text-ink-4 font-semibold uppercase tracking-wider">Placement</p><p class="font-semibold text-ink-1 mt-0.5 text-body-sm">100% Verified</p></div><div class="rounded-xl bg-surface-subtle p-2 text-center"><p class="text-[10px] text-ink-4 font-semibold uppercase tracking-wider">Avg Rating</p><p class="font-semibold text-amber-600 dark:text-amber-400 mt-0.5 text-body-sm">4.9 / 5.0</p></div></div></div></div><div><div class="flex items-center justify-between mb-3"><h4 class="font-heading text-body-sm font-bold text-ink-1 uppercase tracking-wider text-[11px]">Department Performance Units (4)</h4><span class="text-[10px] text-ink-4">Click any department card for detailed staff roster</span></div><div class="grid grid-cols-1 gap-4 md:grid-cols-2"><div class="group relative cursor-pointer rounded-2xl border p-4 backdrop-blur-sm transition-all duration-200 hover:shadow-md bg-gradient-to-br from-blue-50/80 via-white to-blue-50/30 dark:from-blue-950/30 dark:via-gray-900 dark:to-blue-900/10 border-blue-500/40 hover:border-blue-500 shadow-[0_0_25px_rgba(37,99,235,0.15)]" style="opacity:0;transform:translateY(10px)"><div class="flex items-center justify-between gap-3"><div class="flex items-center gap-3 min-w-0"><div class="relative flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-surface border border-border shadow-xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check h-5.5 w-5.5 text-blue-600 dark:text-blue-400"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg><div class="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-amber-400 text-amber-950 shadow-xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trophy h-3 w-3"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"></path><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"></path><path d="M4 22h16"></path><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"></path><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"></path><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"></path></svg></div></div><div class="min-w-0"><div class="flex items-center gap-2"><span class="text-[11px] font-bold tabular-nums text-ink-4">#1</span><h5 class="truncate font-heading text-body font-bold text-ink-1">Security</h5><span class="rounded-full bg-amber-100 dark:bg-amber-950/60 px-2 py-0.5 text-[9px] font-bold text-amber-700 dark:text-amber-400">#1 Leader</span></div><div class="mt-1 flex items-center gap-2 text-caption text-ink-3"><span class="font-semibold text-ink-2">1 hire</span><span>•</span><span class="flex items-center gap-0.5 text-emerald-600 dark:text-emerald-400 font-medium"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3 w-3"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>1d fill velocity</span></div></div></div><div class="flex items-center gap-3 shrink-0"><div class="relative flex items-center justify-center"><svg class="h-11 w-11 -rotate-90"><circle cx="22" cy="22" r="17" fill="transparent" stroke="currentColor" stroke-width="3" class="text-border"></circle><circle cx="22" cy="22" r="17" fill="transparent" stroke="currentColor" stroke-width="3.5" stroke-dasharray="106" stroke-dashoffset="5.299999999999997" stroke-linecap="round" class="transition-all duration-700 ease-out text-blue-600"></circle></svg><span class="absolute font-heading text-body-sm font-bold tabular-nums text-ink-1">95</span></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4 text-ink-4 group-hover:text-blue-600 transition-colors group-hover:translate-x-1 duration-200"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div></div><div class="group relative cursor-pointer rounded-2xl border p-4 backdrop-blur-sm transition-all duration-200 hover:shadow-md bg-gradient-to-br from-indigo-50/50 via-white to-indigo-50/20 dark:from-indigo-950/20 dark:via-gray-900 dark:to-indigo-900/10 border-indigo-500/30 hover:border-indigo-500/80 shadow-[0_0_20px_rgba(79,70,229,0.1)]" style="opacity:0;transform:translateY(10px)"><div class="flex items-center justify-between gap-3"><div class="flex items-center gap-3 min-w-0"><div class="relative flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-surface border border-border shadow-xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trophy h-5.5 w-5.5 text-indigo-600 dark:text-indigo-400"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"></path><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"></path><path d="M4 22h16"></path><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"></path><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"></path><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"></path></svg></div><div class="min-w-0"><div class="flex items-center gap-2"><span class="text-[11px] font-bold tabular-nums text-ink-4">#2</span><h5 class="truncate font-heading text-body font-bold text-ink-1">Event Manager</h5></div><div class="mt-1 flex items-center gap-2 text-caption text-ink-3"><span class="font-semibold text-ink-2">1 hire</span><span>•</span><span class="flex items-center gap-0.5 text-emerald-600 dark:text-emerald-400 font-medium"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3 w-3"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>3d fill velocity</span></div></div></div><div class="flex items-center gap-3 shrink-0"><div class="relative flex items-center justify-center"><svg class="h-11 w-11 -rotate-90"><circle cx="22" cy="22" r="17" fill="transparent" stroke="currentColor" stroke-width="3" class="text-border"></circle><circle cx="22" cy="22" r="17" fill="transparent" stroke="currentColor" stroke-width="3.5" stroke-dasharray="106" stroke-dashoffset="9.540000000000006" stroke-linecap="round" class="transition-all duration-700 ease-out text-indigo-600"></circle></svg><span class="absolute font-heading text-body-sm font-bold tabular-nums text-ink-1">91</span></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4 text-ink-4 group-hover:text-blue-600 transition-colors group-hover:translate-x-1 duration-200"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div></div><div class="group relative cursor-pointer rounded-2xl border p-4 backdrop-blur-sm transition-all duration-200 hover:shadow-md bg-gradient-to-br from-emerald-50/50 via-white to-emerald-50/20 dark:from-emerald-950/20 dark:via-gray-900 dark:to-emerald-900/10 border-emerald-500/30 hover:border-emerald-500/80 shadow-[0_0_20px_rgba(16,185,129,0.1)]" style="opacity:0;transform:translateY(10px)"><div class="flex items-center justify-between gap-3"><div class="flex items-center gap-3 min-w-0"><div class="relative flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-surface border border-border shadow-xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-building2 h-5.5 w-5.5 text-emerald-600 dark:text-emerald-400"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"></path><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"></path><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"></path><path d="M10 6h4"></path><path d="M10 10h4"></path><path d="M10 14h4"></path><path d="M10 18h4"></path></svg></div><div class="min-w-0"><div class="flex items-center gap-2"><span class="text-[11px] font-bold tabular-nums text-ink-4">#3</span><h5 class="truncate font-heading text-body font-bold text-ink-1">Front Desk</h5></div><div class="mt-1 flex items-center gap-2 text-caption text-ink-3"><span class="font-semibold text-ink-2">2 hires</span><span>•</span><span class="flex items-center gap-0.5 text-emerald-600 dark:text-emerald-400 font-medium"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3 w-3"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>2d fill velocity</span></div></div></div><div class="flex items-center gap-3 shrink-0"><div class="relative flex items-center justify-center"><svg class="h-11 w-11 -rotate-90"><circle cx="22" cy="22" r="17" fill="transparent" stroke="currentColor" stroke-width="3" class="text-border"></circle><circle cx="22" cy="22" r="17" fill="transparent" stroke="currentColor" stroke-width="3.5" stroke-dasharray="106" stroke-dashoffset="11.659999999999997" stroke-linecap="round" class="transition-all duration-700 ease-out text-emerald-600"></circle></svg><span class="absolute font-heading text-body-sm font-bold tabular-nums text-ink-1">89</span></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4 text-ink-4 group-hover:text-blue-600 transition-colors group-hover:translate-x-1 duration-200"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div></div><div class="group relative cursor-pointer rounded-2xl border p-4 backdrop-blur-sm transition-all duration-200 hover:shadow-md bg-gradient-to-br from-purple-50/50 via-white to-purple-50/20 dark:from-purple-950/20 dark:via-gray-900 dark:to-purple-900/10 border-purple-500/30 hover:border-purple-500/80 shadow-[0_0_20px_rgba(147,51,234,0.1)]" style="opacity:0;transform:translateY(10px)"><div class="flex items-center justify-between gap-3"><div class="flex items-center gap-3 min-w-0"><div class="relative flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-surface border border-border shadow-xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles h-5.5 w-5.5 text-purple-600 dark:text-purple-400"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg></div><div class="min-w-0"><div class="flex items-center gap-2"><span class="text-[11px] font-bold tabular-nums text-ink-4">#4</span><h5 class="truncate font-heading text-body font-bold text-ink-1">Housekeeping</h5></div><div class="mt-1 flex items-center gap-2 text-caption text-ink-3"><span class="font-semibold text-ink-2">1 hire</span><span>•</span><span class="flex items-center gap-0.5 text-emerald-600 dark:text-emerald-400 font-medium"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3 w-3"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>2d fill velocity</span></div></div></div><div class="flex items-center gap-3 shrink-0"><div class="relative flex items-center justify-center"><svg class="h-11 w-11 -rotate-90"><circle cx="22" cy="22" r="17" fill="transparent" stroke="currentColor" stroke-width="3" class="text-border"></circle><circle cx="22" cy="22" r="17" fill="transparent" stroke="currentColor" stroke-width="3.5" stroke-dasharray="106" stroke-dashoffset="13.780000000000001" stroke-linecap="round" class="transition-all duration-700 ease-out text-purple-600"></circle></svg><span class="absolute font-heading text-body-sm font-bold tabular-nums text-ink-1">87</span></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4 text-ink-4 group-hover:text-blue-600 transition-colors group-hover:translate-x-1 duration-200"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div></div></div></div></div></div></div></div></section><section aria-labelledby="positions" class="space-y-3"><div class="flex flex-wrap items-baseline justify-between gap-2"><div class="flex min-w-0 flex-wrap items-baseline gap-x-2"><h2 id="positions" class="font-heading text-body font-semibold text-ink-1">Position performance</h2><span class="text-caption text-ink-4">5 roles filled</span></div></div><div class="transition-all duration-base ease-out bg-surface shadow-xs rounded-xl p-0 overflow-hidden border border-border"><div class="overflow-x-auto"><table class="w-full min-w-[36rem] border-collapse text-body-sm"><caption class="sr-only">Hires, quality, speed and review outcome by role</caption><thead><tr class="border-b border-border bg-surface-subtle"><th scope="col" class="whitespace-nowrap px-3.5 py-2.5 text-[10px] font-bold uppercase tracking-wider text-ink-4 text-left">Role</th><th scope="col" class="whitespace-nowrap px-3.5 py-2.5 text-[10px] font-bold uppercase tracking-wider text-ink-4 text-right">Hires</th><th scope="col" class="whitespace-nowrap px-3.5 py-2.5 text-[10px] font-bold uppercase tracking-wider text-ink-4 text-right">Avg score</th><th scope="col" class="whitespace-nowrap px-3.5 py-2.5 text-[10px] font-bold uppercase tracking-wider text-ink-4 text-right">Avg days</th><th scope="col" class="whitespace-nowrap px-3.5 py-2.5 text-[10px] font-bold uppercase tracking-wider text-ink-4 text-right">Reviewed</th><th scope="col" class="whitespace-nowrap px-3.5 py-2.5 text-[10px] font-bold uppercase tracking-wider text-ink-4 text-right">Rating</th></tr></thead><tbody class="divide-y divide-border"><tr class="border-b border-border/60 last:border-0 transition-colors hover:bg-surface-subtle/80"><td class="px-3.5 py-2.5 font-medium text-ink-1">Guest Relations Lead</td><td class="px-3.5 py-2.5 text-right font-semibold tabular-nums text-ink-2">1</td><td class="px-3.5 py-2.5 text-right font-bold tabular-nums text-blue-600 dark:text-blue-400">90</td><td class="px-3.5 py-2.5 text-right tabular-nums text-ink-2">2d</td><td class="px-3.5 py-2.5 text-right tabular-nums text-ink-3">0/1</td><td class="px-3.5 py-2.5 text-right"><div class="inline-flex items-center gap-1 border whitespace-nowrap transition-colors duration-fast [&_svg]:size-3 [&_svg]:shrink-0 border-transparent bg-warning-muted text-warning h-[18px] px-1.5 text-[10px] rounded-full font-bold">Pending</div></td></tr><tr class="border-b border-border/60 last:border-0 transition-colors hover:bg-surface-subtle/80"><td class="px-3.5 py-2.5 font-medium text-ink-1">Event Coordinator</td><td class="px-3.5 py-2.5 text-right font-semibold tabular-nums text-ink-2">1</td><td class="px-3.5 py-2.5 text-right font-bold tabular-nums text-blue-600 dark:text-blue-400">91</td><td class="px-3.5 py-2.5 text-right tabular-nums text-ink-2">3d</td><td class="px-3.5 py-2.5 text-right tabular-nums text-ink-3">0/1</td><td class="px-3.5 py-2.5 text-right"><div class="inline-flex items-center gap-1 border whitespace-nowrap transition-colors duration-fast [&_svg]:size-3 [&_svg]:shrink-0 border-transparent bg-warning-muted text-warning h-[18px] px-1.5 text-[10px] rounded-full font-bold">Pending</div></td></tr><tr class="border-b border-border/60 last:border-0 transition-colors hover:bg-surface-subtle/80"><td class="px-3.5 py-2.5 font-medium text-ink-1">Operations Supervisor</td><td class="px-3.5 py-2.5 text-right font-semibold tabular-nums text-ink-2">1</td><td class="px-3.5 py-2.5 text-right font-bold tabular-nums text-blue-600 dark:text-blue-400">87</td><td class="px-3.5 py-2.5 text-right tabular-nums text-ink-2">2d</td><td class="px-3.5 py-2.5 text-right tabular-nums text-ink-3">0/1</td><td class="px-3.5 py-2.5 text-right"><div class="inline-flex items-center gap-1 border whitespace-nowrap transition-colors duration-fast [&_svg]:size-3 [&_svg]:shrink-0 border-transparent bg-warning-muted text-warning h-[18px] px-1.5 text-[10px] rounded-full font-bold">Pending</div></td></tr><tr class="border-b border-border/60 last:border-0 transition-colors hover:bg-surface-subtle/80"><td class="px-3.5 py-2.5 font-medium text-ink-1">Concierge Lead</td><td class="px-3.5 py-2.5 text-right font-semibold tabular-nums text-ink-2">1</td><td class="px-3.5 py-2.5 text-right font-bold tabular-nums text-blue-600 dark:text-blue-400">88</td><td class="px-3.5 py-2.5 text-right tabular-nums text-ink-2">2d</td><td class="px-3.5 py-2.5 text-right tabular-nums text-ink-3">0/1</td><td class="px-3.5 py-2.5 text-right"><div class="inline-flex items-center gap-1 border whitespace-nowrap transition-colors duration-fast [&_svg]:size-3 [&_svg]:shrink-0 border-transparent bg-warning-muted text-warning h-[18px] px-1.5 text-[10px] rounded-full font-bold">Pending</div></td></tr><tr class="border-b border-border/60 last:border-0 transition-colors hover:bg-surface-subtle/80"><td class="px-3.5 py-2.5 font-medium text-ink-1">Lead Security Officer</td><td class="px-3.5 py-2.5 text-right font-semibold tabular-nums text-ink-2">1</td><td class="px-3.5 py-2.5 text-right font-bold tabular-nums text-blue-600 dark:text-blue-400">95</td><td class="px-3.5 py-2.5 text-right tabular-nums text-ink-2">1d</td><td class="px-3.5 py-2.5 text-right tabular-nums text-ink-3">0/1</td><td class="px-3.5 py-2.5 text-right"><div class="inline-flex items-center gap-1 border whitespace-nowrap transition-colors duration-fast [&_svg]:size-3 [&_svg]:shrink-0 border-transparent bg-warning-muted text-warning h-[18px] px-1.5 text-[10px] rounded-full font-bold">Pending</div></td></tr></tbody></table></div></div></section><section aria-labelledby="efficiency" class="space-y-3"><div class="flex flex-wrap items-baseline justify-between gap-2"><div class="flex min-w-0 flex-wrap items-baseline gap-x-2"><h2 id="efficiency" class="font-heading text-body font-semibold text-ink-1">Hiring efficiency</h2><span class="text-caption text-ink-4">2d median time-to-hire</span></div></div><div class="grid grid-cols-1 gap-4 lg:grid-cols-3"><div class="transition-all duration-base ease-out bg-surface shadow-xs rounded-xl p-6 border border-border"><div class="flex items-center gap-2 text-krow-blue"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gauge h-4 w-4" aria-hidden="true"><path d="m12 14 4-4"></path><path d="M3.34 19a10 10 0 1 1 17.32 0"></path></svg><h3 class="font-heading text-body-sm font-bold text-ink-1">Velocity</h3></div><p class="mt-2 font-heading text-title font-bold tabular-nums text-ink-1">2d<span class="ml-1.5 text-caption font-normal text-ink-3">median</span></p><p class="mt-1 text-caption leading-relaxed text-ink-3">80% of roles close within 48 hours.</p></div><div class="transition-all duration-base ease-out bg-surface shadow-xs rounded-xl p-6 border border-border"><div class="flex items-center gap-2 text-emerald-600 dark:text-emerald-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity h-4 w-4" aria-hidden="true"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path></svg><h3 class="font-heading text-body-sm font-bold text-ink-1">Fastest to fill</h3></div><div class="mt-3"><ul class="space-y-2"><li class="flex items-center justify-between gap-3 rounded-xl bg-surface-subtle px-3 py-2.5"><div class="min-w-0"><p class="truncate text-body-sm font-medium text-ink-1">Lead Security Officer</p><p class="text-[10px] text-ink-4">1 hire</p></div><div class="flex shrink-0 items-center gap-2"><span class="font-heading text-body-sm font-bold tabular-nums text-ink-1">1d</span><div class="inline-flex items-center gap-1 border font-semibold whitespace-nowrap transition-colors duration-fast [&_svg]:size-3 [&_svg]:shrink-0 border-transparent bg-success-muted text-success h-[18px] px-1.5 text-[10px] rounded-full tabular-nums">-1d</div></div></li><li class="flex items-center justify-between gap-3 rounded-xl bg-surface-subtle px-3 py-2.5"><div class="min-w-0"><p class="truncate text-body-sm font-medium text-ink-1">Guest Relations Lead</p><p class="text-[10px] text-ink-4">1 hire</p></div><div class="flex shrink-0 items-center gap-2"><span class="font-heading text-body-sm font-bold tabular-nums text-ink-1">2d</span></div></li><li class="flex items-center justify-between gap-3 rounded-xl bg-surface-subtle px-3 py-2.5"><div class="min-w-0"><p class="truncate text-body-sm font-medium text-ink-1">Operations Supervisor</p><p class="text-[10px] text-ink-4">1 hire</p></div><div class="flex shrink-0 items-center gap-2"><span class="font-heading text-body-sm font-bold tabular-nums text-ink-1">2d</span></div></li><li class="flex items-center justify-between gap-3 rounded-xl bg-surface-subtle px-3 py-2.5"><div class="min-w-0"><p class="truncate text-body-sm font-medium text-ink-1">Concierge Lead</p><p class="text-[10px] text-ink-4">1 hire</p></div><div class="flex shrink-0 items-center gap-2"><span class="font-heading text-body-sm font-bold tabular-nums text-ink-1">2d</span></div></li></ul></div></div><div class="transition-all duration-base ease-out bg-surface shadow-xs rounded-xl p-6 border border-border"><div class="flex items-center gap-2 text-amber-600 dark:text-amber-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-4 w-4" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><h3 class="font-heading text-body-sm font-bold text-ink-1">Slowest to fill</h3></div><div class="mt-3"><ul class="space-y-2"><li class="flex items-center justify-between gap-3 rounded-xl bg-surface-subtle px-3 py-2.5"><div class="min-w-0"><p class="truncate text-body-sm font-medium text-ink-1">Event Coordinator</p><p class="text-[10px] text-ink-4">1 hire</p></div><div class="flex shrink-0 items-center gap-2"><span class="font-heading text-body-sm font-bold tabular-nums text-ink-1">3d</span><div class="inline-flex items-center gap-1 border font-semibold whitespace-nowrap transition-colors duration-fast [&_svg]:size-3 [&_svg]:shrink-0 border-transparent bg-warning-muted text-warning h-[18px] px-1.5 text-[10px] rounded-full tabular-nums">+1d</div></div></li><li class="flex items-center justify-between gap-3 rounded-xl bg-surface-subtle px-3 py-2.5"><div class="min-w-0"><p class="truncate text-body-sm font-medium text-ink-1">Guest Relations Lead</p><p class="text-[10px] text-ink-4">1 hire</p></div><div class="flex shrink-0 items-center gap-2"><span class="font-heading text-body-sm font-bold tabular-nums text-ink-1">2d</span></div></li><li class="flex items-center justify-between gap-3 rounded-xl bg-surface-subtle px-3 py-2.5"><div class="min-w-0"><p class="truncate text-body-sm font-medium text-ink-1">Operations Supervisor</p><p class="text-[10px] text-ink-4">1 hire</p></div><div class="flex shrink-0 items-center gap-2"><span class="font-heading text-body-sm font-bold tabular-nums text-ink-1">2d</span></div></li><li class="flex items-center justify-between gap-3 rounded-xl bg-surface-subtle px-3 py-2.5"><div class="min-w-0"><p class="truncate text-body-sm font-medium text-ink-1">Concierge Lead</p><p class="text-[10px] text-ink-4">1 hire</p></div><div class="flex shrink-0 items-center gap-2"><span class="font-heading text-body-sm font-bold tabular-nums text-ink-1">2d</span></div></li></ul></div></div></div></section><section aria-labelledby="insights" class="space-y-3"><div class="flex flex-wrap items-baseline justify-between gap-2"><div class="flex min-w-0 flex-wrap items-baseline gap-x-2"><h2 id="insights" class="font-heading text-body font-semibold text-ink-1">AI hiring insights</h2><span class="text-caption text-ink-4">3 findings</span></div></div><ul class="grid grid-cols-1 gap-3 lg:grid-cols-2"><li class="flex items-start gap-2.5 rounded-xl border p-3.5 border-emerald-500/30 bg-emerald-50/40 dark:bg-emerald-950/20"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up mt-0.5 h-4 w-4 shrink-0 text-emerald-600 dark:text-emerald-400" aria-hidden="true"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg><div class="min-w-0"><p class="font-heading text-body-sm font-semibold text-ink-1">Security is hiring the strongest candidates</p><p class="mt-0.5 text-caption leading-relaxed text-ink-3">1 hire at an average score of 95, against 90 across the workspace.</p></div></li><li class="flex items-start gap-2.5 rounded-xl border p-3.5 border-red-500/30 bg-red-50/40 dark:bg-red-950/20"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert mt-0.5 h-4 w-4 shrink-0 text-red-600 dark:text-red-400" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg><div class="min-w-0"><p class="font-heading text-body-sm font-semibold text-ink-1">Event Coordinator takes longest to fill</p><p class="mt-0.5 text-caption leading-relaxed text-ink-3">3 days on average against a median of 2. 1 hire on that record.</p></div></li><li class="flex items-start gap-2.5 rounded-xl border p-3.5 border-border bg-surface"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lightbulb mt-0.5 h-4 w-4 shrink-0 text-krow-blue" aria-hidden="true"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"></path><path d="M9 18h6"></path><path d="M10 22h4"></path></svg><div class="min-w-0"><p class="font-heading text-body-sm font-semibold text-ink-1">5 hires have no client review</p><p class="mt-0.5 text-caption leading-relaxed text-ink-3">Quality of hire is measured on the AI score alone until a review lands. Chasing these closes the loop on outcomes.</p></div></li></ul></section></div> |