/* ── Cross-document view transitions ──────────────────────────────
   Makes internal nav (visa → milestones → report, etc.) fade smoothly
   instead of hard-reloading. Chrome/Edge animate; Safari falls back to
   a normal navigation. The .nav element is tagged with a stable
   view-transition-name so the browser treats it as a persisting element
   and keeps it visually still during the swap. */
@view-transition { navigation: auto; }

.nav { view-transition-name: navier-nav; }
::view-transition-old(navier-nav),
::view-transition-new(navier-nav) { animation: none; }

::view-transition-old(root) { animation: navier-fade-out 180ms ease both; }
::view-transition-new(root) { animation: navier-fade-in  220ms ease both; }

@keyframes navier-fade-out { to { opacity: 0; } }
@keyframes navier-fade-in  { from { opacity: 0; } }

:root {
 /* ── Colours ── */
 --bg-primary:    #ffffff;
 --bg-secondary:  #f6f6f6;
 --bg-tertiary:   #f0f1f1;
 --surface:       #ffffff;
 --surface-dark:  #1a1a1a;
 --border:        rgba(0,0,0,0.06);
 --border-strong: rgba(0,0,0,0.12);
 /* ── Text ── */
 --text-primary:   #2d2f2f;
 --text-secondary: #5a5c5c;
 --text-muted:     #757777;
 --text-on-dark:   #f5f2f1;
 /* ── Brand ── */
 --accent:         #c5fe00;
 --accent-dim:     #b9ef00;
 --accent-light:   rgba(197,254,0,0.10);
 --accent-hover:   #b9ef00;
 --accent-text:    #384b00;
 /* ── Status ── */
 --success:        #00c07f;
 --success-light:  #f0fdf8;
 --warning:        #f5a623;
 --warning-light:  #fffbeb;
 --error:          #ef4444;
 --error-light:    #fef2f2;
 --gold:           #f5c842;
 --gold-light:     #fffbeb;
 /* ── Typography ── */
 --font-heading: 'Plus Jakarta Sans', sans-serif;
 --font-body:    'Inter', sans-serif;
 --font-display: 'Outfit', sans-serif;
 /* ── Spacing ── */
 --space-xs:  4px;
 --space-sm:  8px;
 --space-md:  16px;
 --space-lg:  24px;
 --space-xl:  32px;
 --space-2xl: 48px;
 --space-3xl: 64px;
 /* ── Radius ── */
 --radius-sm:   8px;
 --radius-md:   12px;
 --radius-lg:   16px;
 --radius-xl:   24px;
 --radius-2xl:  32px;
 --radius-pill: 9999px;
 /* ── Shadows ── */
 --shadow-sm: 0 1px 4px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.03);
 --shadow-md: 0 4px 24px rgba(0,0,0,0.05), 0 1px 0 rgba(255,255,255,0.8) inset;
 --shadow-lg: 0 8px 40px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.9) inset;
 --shadow-xl: 0 20px 60px rgba(0,0,0,0.10);
 /* Card lift shadows (ambient, 40-60px blur, 4-8% opacity) */
 --shadow-card:      0 2px 48px rgba(0,0,0,0.07), 0 1px 0 rgba(255,255,255,0.85) inset;
 --shadow-card-dark: 0 4px 48px rgba(0,0,0,0.22);
 /* ── Transitions ── */
 --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
 font-family: var(--font-body);
 background: var(--bg-secondary);
 color: var(--text-primary);
 line-height: 1.6;
 min-height: 100vh;
 position: relative;
}
a { color: var(--text-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--text-secondary); }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: var(--font-body); }
input, select, textarea {
 font-family: var(--font-body);
 font-size: 15px;
 outline: none;
}
h1, h2, h3, h4, h5, h6 {
 font-family: var(--font-heading);
 font-weight: 800;
}
::selection { background: var(--accent-light); color: var(--accent-text); }
/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 100px; }
/* Grid overlay */
.grid-overlay-bg {
 position: fixed;
 inset: 0;
 z-index: 0;
 pointer-events: none;
 background-image:
  linear-gradient(rgba(0,0,0,.08) 1px, transparent 1px),
  linear-gradient(90deg, rgba(0,0,0,.08) 1px, transparent 1px);
 background-size: 48px 48px;
 mask-image: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 65%, rgba(0,0,0,0.06) 100%);
 -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 65%, rgba(0,0,0,0.06) 100%);
}
/* Orb backgrounds */
.orb-lime {
 position: fixed;
 border-radius: 50%;
 pointer-events: none;
 background: radial-gradient(circle, rgba(197,254,0,0.12) 0%, transparent 65%);
 z-index: 0;
}