/* ============================================================
   COMPONENTS.CSS
   Every reusable UI component — cards, buttons, tables,
   accordion, sandbox, toggle, pseudocode, formula
   ============================================================ */

/* ── Stat cards ─────────────────────────────────────────────── */
.scard {
  transition: border-color .2s, transform .2s;
  position: relative;
}
.scard:hover {
  border-color: var(--teal-md);
  transform: translateY(-3px);
}
.scard::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
  margin-top: .75rem;
  border-radius: 2px;
}
.scard:hover::after { transform: scaleX(1); }

/* ── Keyword pills ──────────────────────────────────────────── */
.kw { transition: border-color .18s, color .18s; }
.kw:hover { border-color: var(--teal-md); color: var(--teal); }

/* ── Contribution cards (abstract column) ───────────────────── */
.ccard { transition: border-color .2s, background .2s; }
.ccard:hover { border-color: var(--teal-md); background: #0f1a28; }

/* ── Pipeline step hover ────────────────────────────────────── */
.pstep { transition: background .2s, border-color .2s; }
.pstep:hover { background: #0f1a28; border-color: var(--teal-md); }

/* ── Buttons with sliding fill sweep ───────────────────────── */
.btn-sw {
  position: relative;
  overflow: hidden;
}
.btn-sw::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.12);
  transform: translateX(-101%);
  transition: transform .22s ease;
}
.btn-sw-out::before { background: var(--teal); }
.btn-sw:hover::before { transform: translateX(0); }
.btn-sw span,
.btn-sw svg { position: relative; z-index: 1; }

/* ── Accordion (method steps) ───────────────────────────────── */
.sbody {
  max-height: 0;
  overflow: hidden;
  transition: max-height .38s ease, padding .3s ease;
}
.sopen .sbody {
  max-height: 700px;
  padding: 0 1.4rem 1.4rem;
}
.schev { transition: transform .25s, color .2s; }
.sopen .schev { transform: rotate(180deg); color: var(--teal); }
.sopen .snum  { background: var(--teal-lo); }

/* ── Formula block ──────────────────────────────────────────── */
.formula {
  font-family: "JetBrains Mono", monospace;
  background: #0a1020;
  border: 1px solid rgba(240, 192, 96, 0.2);
  padding: .7rem 1rem;
  border-radius: .375rem;
  color: var(--amber);
  font-size: .76rem;
  overflow-x: auto;
  margin: .8rem 0;
  line-height: 1.6;
}

/* ── Pseudocode (line numbers via CSS counter) ──────────────── */
.pcode { counter-reset: ln; }
.pln   { counter-increment: ln; display: block; }
.pln::before {
  content: counter(ln);
  display: inline-block;
  width: 2rem;
  color: rgba(79, 209, 192, 0.2);
  user-select: none;
  text-align: right;
  margin-right: 1.2rem;
  font-size: .72rem;
}

/* ── Results tables ─────────────────────────────────────────── */
.tbl-ours { background: rgba(79, 209, 192, 0.04); }
.tbl-section td {
  background: var(--surface2);
  color: #94a3b8 !important;
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .35rem 1rem;
}

/* ── Bench tab buttons ──────────────────────────────────────── */
/*
   Tabs use data-active="true/false" — avoids Tailwind CDN
   dynamic class generation failures at runtime.
*/
.btab { transition: background .18s, color .18s, border-color .18s; }
.btab[data-active="true"]  { background: var(--teal); color: #020617; font-weight: 700; }
.btab[data-active="false"] { background: transparent; color: #94a3b8; }
.btab[data-active="false"]:hover { background: #1e293b; color: #f1f5f9; }

/* ── Bench panel fade-in ────────────────────────────────────── */
.bench-panel { animation: bpFade .22s ease; }

/* ── Result cards (F1Tenth) ─────────────────────────────────── */
.rc-good {
  border-color: rgba(52, 211, 153, 0.25);
  position: relative;
  overflow: hidden;
}
.rc-good::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: #34d399;
  border-radius: 4px 4px 0 0;
}
.rc-bad {
  border-color: rgba(239, 68, 68, 0.25);
  position: relative;
  overflow: hidden;
}
.rc-bad::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: #ef4444;
  border-radius: 4px 4px 0 0;
}

/* ── Video placeholder hatch ────────────────────────────────── */
.vph {
  background: repeating-linear-gradient(
    -45deg,
    transparent, transparent 9px,
    rgba(79, 209, 192, 0.025) 9px,
    rgba(79, 209, 192, 0.026) 10px
  );
}

/* ── Animated bar fills ─────────────────────────────────────── */
.bfill {
  width: 0;
  transition: width .9s cubic-bezier(.22, 1, .36, 1);
}

/* ── Custom toggle switch ───────────────────────────────────── */
/*
   Pure JS-driven toggle — no Tailwind peer pseudo-classes,
   which don't work with CDN at runtime.
   HTML: <div id="toggle-track">  <div id="toggle-thumb">
   JS:   updateToggleVisual(on) in tabs.js
*/
#toggle-track {
  position: relative;
  width: 34px; height: 18px;
  border-radius: 9px;
  background: var(--teal);
  transition: background .2s;
  flex-shrink: 0;
  cursor: pointer;
}
#toggle-thumb {
  position: absolute;
  top: 2px; left: 16px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: white;
  transition: left .2s;
}

/* ── Sandbox canvas ─────────────────────────────────────────── */
/*
   Canvas fills its container; JS resizes width/height each frame
   to match CSS layout size — avoids fixed-pixel overflow on mobile.
*/
#cvs {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #040c18;
  border-radius: .5rem;
  border: 1px solid #1e293b;
  cursor: crosshair;
}

/* ── Mobile menu ─────────────────────────────────────────────── */
#mob-menu { display: none; }
#mob-menu.open { display: flex; }