/* =====================================================================
   Kids Toto — custom layer (Tailwind handles everything utility-based;
   this file only covers what utilities can't: range-input thumbs,
   keyframes, and print rules).
   ===================================================================== */

:root{
  --accent:#4338CA;
}

html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif}
.font-display{font-family:'Fraunces',serif}
.font-mono-data{font-family:'JetBrains Mono',monospace}

/* ---------- step transition ---------- */
.step-panel{display:none}
.step-panel.active{display:block;animation:pf-rise .45s cubic-bezier(.16,1,.3,1)}
@keyframes pf-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ---------- range sliders ---------- */
input[type="range"].pf-slider{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--pct,60%), #E2E8F0 var(--pct,60%), #E2E8F0 100%);
  cursor:pointer;
}
input[type="range"].pf-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:#fff;border:4px solid var(--accent);box-shadow:0 2px 6px rgba(15,23,42,.25);
  margin-top:0;transition:transform .15s;
}
input[type="range"].pf-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type="range"].pf-slider::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid var(--accent);cursor:pointer;
}
input[type="range"].pf-slider::-moz-range-track{height:6px;border-radius:99px;background:#E2E8F0}
input[type="range"].pf-slider::-moz-range-progress{height:6px;border-radius:99px;background:var(--accent)}

/* ---------- chip selected pulse ---------- */
.pf-chip{transition:all .16s ease}
.pf-chip.selected{animation:pf-pop .22s ease}
@keyframes pf-pop{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}

/* ---------- strength / fit bars ---------- */
.pf-fillbar{width:0%;transition:width 1.1s cubic-bezier(.16,1,.3,1)}

/* ---------- evidence trail (signature element) ---------- */
.pf-evidence-item{position:relative;padding-left:1.25rem}
.pf-evidence-item::before{
  content:'';position:absolute;left:0;top:.35rem;width:8px;height:8px;border-radius:50%;
  background:#F59E0B;box-shadow:0 0 0 3px rgba(245,158,11,.18);
}

/* ---------- loading spinner ---------- */
.pf-spin{animation:pf-spin 1s linear infinite}
@keyframes pf-spin{to{transform:rotate(360deg)}}

/* ---------- background grid texture for hero ---------- */
.pf-grid-bg{
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:42px 42px;
}

/* ---------- print ---------- */
@media print{
  .pf-no-print{display:none!important}
  body{background:#fff}
  #cert-section{box-shadow:none!important}
}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:99px}