index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --sppu-maroon: #F63C49;
  --bg-void: #030303;
}
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-void);
  background-image:
    radial-gradient(circle at 50% 0%, rgba(225, 29, 72, 0.05) 0%, transparent 50%),
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 40px 40px, 40px 40px;
  color: #f8fafc;
  overflow-x: hidden;
}
::selection {
  background: #D61A40;
  color: white;
}
/* Material system: dark elevation tokens.
   Level 1: raised cards on the void. Level 2: elements nested inside cards. */
@layer components {
  .surface-1 {
    background: linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.008) 45%, rgba(255,255,255,0) 100%), #0b0b0d;
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 1px 2px rgba(0,0,0,0.55),
      0 20px 44px -28px rgba(0,0,0,0.9);
  }
  .surface-2 {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  }
}
.glass-panel {
  background: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
/* Hide arrows in number inputs */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Visible keyboard focus on every interactive element. */
a:focus-visible,
button:focus-visible,
[role='checkbox']:focus-visible,
[role='option']:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid #F63C49 !important;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* Mobile bottom dock: same raised-glass material as the dashboard cards. */
@media (max-width: 1023px) {
  .nav-dock {
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 55%, rgba(255,255,255,0) 100%), rgba(11,11,13,0.82);
    backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 2px rgba(0,0,0,0.6), 0 18px 40px -12px rgba(0,0,0,0.9);
  }
}

/* Actions card: slim scrollbar and a bottom vignette that fades out at the end of the list. */
.actions-scroll {
  --fade: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px * var(--fade)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 56px * var(--fade)), transparent 100%);
  scrollbar-width: none;
}
.actions-scroll::-webkit-scrollbar { display: none; }

/* Tasks micro-motion: interaction only, 250ms, ease (0.4,0,0.2,1), no spring. */
@keyframes pt-flicker {
  0% { transform: scale(1, 1); }
  40% { transform: scale(0.92, 1.1) translateY(-0.4px); }
  100% { transform: scale(1, 1); }
}
@keyframes pt-bubble {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-3.5px); opacity: 0; }
}
@keyframes pt-tickdraw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
.pt-flicker { animation: pt-flicker 250ms cubic-bezier(0.4, 0, 0.2, 1) 1; }
.pt-bubble circle { animation: pt-bubble 250ms cubic-bezier(0.4, 0, 0.2, 1) 1; }
.pt-bubble circle:nth-child(2) { animation-delay: 60ms; animation-fill-mode: backwards; }
.pt-tickdraw { animation: pt-tickdraw 250ms cubic-bezier(0.4, 0, 0.2, 1) 1; }

/* All clear: one small burst, once, 250ms ease. */
@keyframes pt-burst {
  from { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; }
  to { transform: rotate(var(--a)) translateY(-26px) scale(0.4); opacity: 0; }
}
.pt-burst-dot { animation: pt-burst 250ms cubic-bezier(0.4, 0, 0.2, 1) 1 forwards; }

/* Onboarding step change: a short eased slide and fade. No spring. */
@keyframes pt-step-in-fwd { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes pt-step-in-back { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.pt-step-fwd { animation: pt-step-in-fwd 250ms cubic-bezier(0.4, 0, 0.2, 1) both; }
.pt-step-back { animation: pt-step-in-back 250ms cubic-bezier(0.4, 0, 0.2, 1) both; }
@media (prefers-reduced-motion: reduce) { .pt-step-fwd, .pt-step-back { animation: none; } }
@keyframes pt-drop { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: none; } }


.pt-drop { animation: pt-drop 250ms cubic-bezier(0.4, 0, 0.2, 1) both; }


@media (prefers-reduced-motion: reduce) { .pt-drop { animation: none; } }
@keyframes pt-grow { from { clip-path: inset(100% 0 0 0); transform: translateY(14px); } to { clip-path: inset(0 0 0 0); transform: none; } }
.pt-grow { animation: pt-grow 250ms cubic-bezier(0.4, 0, 0.2, 1) both; }
@media (prefers-reduced-motion: reduce) { .pt-grow { animation: none; } }

/* Analytics consent banner (landing + app shell) */
.consent-banner{position:fixed;left:16px;bottom:16px;z-index:90;max-width:min(340px,calc(100vw - 32px));background:#F7F5F2;color:#141419;border:1px solid rgba(20,20,25,.14);border-radius:16px;padding:16px 16px 14px;box-shadow:0 12px 32px -12px rgba(20,20,25,.35);font-family:'Satoshi','Space Grotesk',system-ui,sans-serif}
.consent-title{margin:0 0 6px;font-weight:700;font-size:14px;letter-spacing:-.01em}
.consent-copy{margin:0;font-size:12.5px;line-height:1.55;color:rgba(20,20,25,.72)}
.consent-actions{display:flex;gap:8px;margin-top:12px}
.consent-actions button{border-radius:999px;padding:9px 16px;font:700 12px 'Satoshi','Space Grotesk',sans-serif;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.consent-accept{border:0;background:#D61A40;color:#fff}
.consent-accept:hover{transform:translateY(-1px);box-shadow:0 8px 18px -6px rgba(214,26,64,.55)}
.consent-decline{border:1px solid rgba(20,20,25,.18);background:transparent;color:rgba(20,20,25,.75)}
.consent-decline:hover{border-color:rgba(20,20,25,.45);color:#141419}
.consent-manage{border:0;background:none;text-decoration:underline;padding:9px 6px;color:rgba(20,20,25,.6)}
.consent-manage:hover{color:#141419}
.consent-panel{margin-top:12px;border-top:1px solid rgba(20,20,25,.14);padding-top:12px}
.consent-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.consent-row b{font-size:12.5px}
.consent-row span{display:block;color:rgba(20,20,25,.6);font-size:11px;line-height:1.5}
.consent-always{color:rgba(20,20,25,.5);font-size:11px;white-space:nowrap}
.consent-toggle{flex:none;width:42px;height:24px;border-radius:999px;border:1px solid rgba(20,20,25,.25);background:rgba(20,20,25,.08);position:relative;cursor:pointer;padding:0}
.consent-toggle::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(20,20,25,.3);transition:left .15s ease}
.consent-toggle[aria-checked="true"]{background:#D61A40;border-color:#D61A40}
.consent-toggle[aria-checked="true"]::after{left:20px}
@media (prefers-reduced-motion:reduce){.consent-actions button,.consent-toggle::after{transition:none}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Onboarding picker keeps its controls above the cookie banner. */
.picker-flow { min-height: calc(100dvh - 6rem); }
:root { --consent-h: 0px; }
:root.consent-open { --consent-h: 230px; }
@media (min-width: 1024px) { :root.consent-open { --consent-h: 160px; } }
:root.consent-open .picker-flow { min-height: calc(100dvh - 6rem - var(--consent-h)); }
/* Content taller than the reserve (small phones) scrolls clear of the banner. */
:root.consent-open body { padding-bottom: var(--consent-h); }

:root.consent-open .picker-flow .nt-mobile { display: none; }