/* ==========================================================
   tailwind-lite.css — Minimal Tailwind utility CSS
   Generated from index.html + dashboard.html class usage only.
   Replaces cdn.tailwindcss.com (~380KB JS) with ~8KB CSS.
   ========================================================== */

/* ── Reset ────────────────────────────────────────────────── */
*, ::before, ::after { box-sizing: border-box; }

/* ── Display ─────────────────────────────────────────────── */
.flex        { display: flex; }
.hidden      { display: none; }
.relative    { position: relative; }
.absolute    { position: absolute; }
.overflow-hidden   { overflow: hidden; }
.overflow-x-auto   { overflow-x: auto; }

/* ── Flex ────────────────────────────────────────────────── */
.flex-1      { flex: 1 1 0%; }
.flex-wrap   { flex-wrap: wrap; }
.items-center { align-items: center; }
.ml-auto     { margin-left: auto; }

/* ── Width / Height ──────────────────────────────────────── */
.w-full      { width: 100%; }
.min-h-screen { min-height: 100vh; }
.min-w-\[160px\] { min-width: 160px; }
.max-w-7xl   { max-width: 80rem; }

/* ── Spacing ─────────────────────────────────────────────── */
.mx-auto     { margin-left: auto; margin-right: auto; }
.mb-1        { margin-bottom: 0.25rem; }
.mb-3        { margin-bottom: 0.75rem; }
.mb-4        { margin-bottom: 1rem; }
.mr-2        { margin-right: 0.5rem; }
.mt-1        { margin-top: 0.25rem; }
.gap-1       { gap: 0.25rem; }
.gap-3       { gap: 0.75rem; }
.p-12        { padding: 3rem; }
.pl-9        { padding-left: 2.25rem; }
.px-4        { padding-left: 1rem; padding-right: 1rem; }
.py-5        { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6        { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* ── Position helpers ─────────────────────────────────────── */
.top-1\/2    { top: 50%; }
.left-3      { left: 0.75rem; }
.-translate-y-1\/2 { transform: translateY(-50%); }

/* ── Z-index ─────────────────────────────────────────────── */
.z-10        { z-index: 10; }

/* ── Border ──────────────────────────────────────────────── */
.border-b    { border-bottom-width: 1px; border-bottom-style: solid; }

/* ── Typography ──────────────────────────────────────────── */
.font-black     { font-weight: 900; }
.font-bold      { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-medium    { font-weight: 500; }
.leading-tight  { line-height: 1.25; }
.tracking-tight  { letter-spacing: -0.025em; }
.tracking-wider  { letter-spacing: 0.05em; }
.uppercase      { text-transform: uppercase; }
.text-center    { text-align: center; }
.text-sm        { font-size: 0.875rem; line-height: 1.25rem; }
.text-xs        { font-size: 0.75rem; line-height: 1rem; }
.text-2xl       { font-size: 1.5rem; line-height: 2rem; }
.text-4xl       { font-size: 2.25rem; line-height: 2.5rem; }
.text-\[9px\]   { font-size: 9px; }
.text-\[10px\]  { font-size: 10px; }
.text-\[11px\]  { font-size: 11px; }

/* ── Custom font family (from tailwind.config) ────────────── */
/* index.html uses Outfit, dashboard.html uses Space Grotesk */
.font-heading { font-family: 'Space Grotesk', 'Outfit', sans-serif; }
.font-body    { font-family: 'DM Sans', sans-serif; }

/* ── Responsive: sm breakpoint (640px) ───────────────────── */
@media (min-width: 640px) {
    .sm\:inline   { display: inline; }
    .sm\:px-6     { padding-left: 1.5rem; padding-right: 1.5rem; }
    .sm\:text-\[10px\] { font-size: 10px; }
}

/* ── Responsive: lg breakpoint (1024px) ──────────────────── */
@media (min-width: 1024px) {
    .lg\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
}