/* ============================================================================
 * NEUROCHECK — Aestimor's signature checkbox.
 * Originally designed by Michael D. Marrazzo III (Aestimor CRM, 2025) and hand-
 * modded one at a time; here it is finally ONE reusable component, faithful to
 * the original: gradient fill, drawn checkmark, reward halo, sparkles, a pop.
 * A quiet dopamine micro-reward — the detail you feel but can't name.
 * Pure CSS + a native <input type=checkbox>. Works light + dark. No JS.
 * ==========================================================================*/
.neurocheck{
  --nc-accent-1:#8b5cf6;   /* his purple */
  --nc-accent-2:#6366f1;   /* his indigo */
  --nc-size:22px; --nc-radius:8px;
  --nc-fill-ms:150ms; --nc-tick-ms:190ms; --nc-pop-ms:180ms; --nc-halo-ms:520ms;
  --nc-ease:cubic-bezier(.2,.7,.2,1);
  --nc-track:rgba(20,20,18,.05); --nc-track-border:rgba(20,20,18,.22); --nc-text:inherit;
  display:inline-flex; align-items:center; gap:11px; cursor:pointer; user-select:none;
}
@media (prefers-color-scheme:dark){ .neurocheck{ --nc-track:rgba(255,255,255,.06); --nc-track-border:rgba(255,255,255,.16) } }
:root[data-theme="dark"] .neurocheck{ --nc-track:rgba(255,255,255,.06); --nc-track-border:rgba(255,255,255,.16) }
:root[data-theme="light"] .neurocheck{ --nc-track:rgba(20,20,18,.05); --nc-track-border:rgba(20,20,18,.22) }
.neurocheck--disabled{ opacity:.5; cursor:not-allowed }
.neurocheck input{ position:absolute; opacity:0; width:1px; height:1px; margin:-1px; clip:rect(0 0 0 0) }
.nc-box{ position:relative; width:var(--nc-size); height:var(--nc-size); border-radius:var(--nc-radius); display:grid; place-items:center; isolation:isolate; flex:0 0 auto }
.nc-box::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:var(--nc-track); border:1px solid var(--nc-track-border); box-shadow:0 1px 2px rgba(0,0,0,.10) inset; transition:border-color .15s ease }
.neurocheck:hover .nc-box::before{ border-color:var(--nc-accent-2) }
/* gradient fill — expands from the centre on check */
.nc-box::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; background:linear-gradient(135deg,var(--nc-accent-1),var(--nc-accent-2)); transform:scale(.2); opacity:0; transition:transform var(--nc-fill-ms) var(--nc-ease),opacity var(--nc-fill-ms) var(--nc-ease); z-index:0 }
.nc-gloss{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; mix-blend-mode:overlay; opacity:0; transition:opacity var(--nc-fill-ms) var(--nc-ease) }
.nc-gloss::before{ content:""; position:absolute; inset:1px 1px calc(100% - 6px) 1px; border-radius:inherit; background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0)) }
.nc-tick{ position:relative; width:14px; height:12px; z-index:1 }
.nc-tick path{ stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; fill:none; stroke-dasharray:22; stroke-dashoffset:22; transition:stroke-dashoffset var(--nc-tick-ms) var(--nc-ease) }
.nc-halo{ position:absolute; inset:-8px; border-radius:inherit; pointer-events:none; opacity:0; z-index:-1 }
.nc-halo::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(60% 60% at 50% 50%,rgba(139,92,246,.42),rgba(139,92,246,0) 60%); filter:blur(8px) }
.nc-sparkles{ position:absolute; inset:0; pointer-events:none; opacity:0 }
.nc-sparkles::before,.nc-sparkles::after{ content:""; position:absolute; width:5px; height:5px; border-radius:2px; transform:rotate(18deg) scale(.6); background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.3)); filter:blur(.3px) }
.nc-sparkles::before{ top:-3px; left:8px } .nc-sparkles::after{ bottom:-3px; right:6px }
.nc-text{ font-size:13px; font-weight:500; letter-spacing:.2px; color:var(--nc-text) }
.neurocheck input:focus-visible + .nc-box{ outline:3px solid rgba(139,92,246,.4); outline-offset:4px }
/* ---- checked ---- */
.neurocheck input:checked + .nc-box::after{ opacity:1; transform:scale(1) }
.neurocheck input:checked + .nc-box::before{ border-color:transparent }
.neurocheck input:checked + .nc-box .nc-gloss{ opacity:.7 }
.neurocheck input:checked + .nc-box .nc-tick path{ stroke-dashoffset:0 }
/* ---- the dopamine reward (fires once, on check) ---- */
.neurocheck input:checked + .nc-box{ animation:ncPop var(--nc-pop-ms) var(--nc-ease) 1 }
.neurocheck input:checked + .nc-box .nc-halo{ animation:ncHalo var(--nc-halo-ms) ease 1 }
.neurocheck input:checked + .nc-box .nc-sparkles{ animation:ncSparkle var(--nc-tick-ms) ease 1 }
@keyframes ncPop{ 0%{transform:scale(1)} 60%{transform:scale(1.09)} 100%{transform:scale(1)} }
@keyframes ncHalo{ 0%{opacity:.95; transform:scale(.9)} 100%{opacity:0; transform:scale(1.15)} }
@keyframes ncSparkle{ 0%{opacity:0} 35%{opacity:1} 100%{opacity:0; transform:scale(1.25)} }
@media (prefers-reduced-motion:reduce){ .neurocheck *,.neurocheck input:checked + .nc-box{ animation:none!important; transition-duration:.01ms!important } }