/* ============================================================
   SplitLab — design system
   Shopify-adjacent but elevated. Cool indigo accent, violet lab tint.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* neutrals — cool, low chroma */
  --bg:        oklch(0.984 0.003 255);
  --surface:   oklch(1 0 0);
  --surface-2: oklch(0.975 0.004 255);
  --surface-3: oklch(0.955 0.006 255);
  --border:    oklch(0.915 0.006 258);
  --border-strong: oklch(0.86 0.008 258);
  --ink:       oklch(0.27 0.018 264);
  --ink-2:     oklch(0.46 0.018 264);
  --ink-3:     oklch(0.50 0.018 264); /* darkened for WCAG-AA text contrast (~4.5:1 on white) */
  --ink-4:     oklch(0.54 0.016 264); /* darkened — used for muted meta text + faint decoration */

  /* accent — indigo */
  --accent:    oklch(0.55 0.16 264);
  --accent-ink: oklch(0.45 0.17 264);
  --accent-hover: oklch(0.49 0.17 264);
  --accent-soft: oklch(0.95 0.03 264);
  --accent-soft-2: oklch(0.9 0.05 264);
  --accent-border: oklch(0.86 0.07 264);

  /* lab violet — secondary */
  --violet:    oklch(0.55 0.16 295);
  --violet-soft: oklch(0.95 0.03 295);

  /* semantic */
  --good:      oklch(0.58 0.13 158);
  --good-soft: oklch(0.95 0.04 158);
  --good-border: oklch(0.85 0.08 158);
  --warn:      oklch(0.7 0.12 70);
  --warn-ink:  oklch(0.52 0.12 65);
  --warn-soft: oklch(0.95 0.045 78);
  --warn-border: oklch(0.86 0.08 78);
  --bad:       oklch(0.57 0.19 25);
  --bad-soft:  oklch(0.96 0.025 25);
  --bad-border: oklch(0.87 0.07 25);

  /* radii + shadow */
  --r-sm: 7px;
  --r:    11px;
  --r-lg: 16px;
  --r-xl: 22px;
  --shadow-sm: 0 1px 2px oklch(0.4 0.03 264 / 0.06), 0 1px 1px oklch(0.4 0.03 264 / 0.04);
  --shadow: 0 2px 4px oklch(0.4 0.03 264 / 0.05), 0 4px 12px oklch(0.4 0.03 264 / 0.06);
  --shadow-lg: 0 8px 24px oklch(0.4 0.03 264 / 0.1), 0 2px 6px oklch(0.4 0.03 264 / 0.06);
  --shadow-pop: 0 16px 50px oklch(0.3 0.03 264 / 0.18), 0 4px 12px oklch(0.3 0.03 264 / 0.1);

  --font: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
::selection { background: var(--accent-soft-2); }

.num { font-family: var(--mono); font-feature-settings: 'tnum' 1; letter-spacing: -0.01em; }

/* scrollbars */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 3px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }
*::-webkit-scrollbar-track { background: transparent; }

/* ---- generic motion ---- */
@keyframes fadeUp { from { transform: translateY(9px); } to { transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { transform: scale(0.98) translateY(5px); } to { transform: none; } }
@keyframes growBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.anim-fadeup { animation: none; }
.anim-pop { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .anim-fadeup { animation: fadeUp 0.5s cubic-bezier(0.22,1,0.36,1) backwards; }
  .anim-pop { animation: popIn 0.34s cubic-bezier(0.22,1,0.36,1) backwards; }
}

/* ---- skeleton ---- */
.skel {
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: var(--r-sm);
}

/* ---- focus ring ---- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---- spinner ---- */
.spinner { width: 15px; height: 15px; border-radius: 999px; border: 2px solid oklch(1 0 0 / 0.4); border-top-color: #fff; display: inline-block; animation: spin .7s linear infinite; }

/* ---- range inputs ---- */
input[type="range"] { height: 6px; }

/* hover affordance hint */
.recipe-card:active { transform: translateY(-1px) scale(0.995); }

/* ===== mobile responsive ===== */
.sl-hamburger { display: none; }
@media (max-width: 768px) {
  /* collapse the fixed sidebar into an off-canvas drawer + show a hamburger */
  .sl-hamburger {
    display: inline-grid; place-items: center; position: sticky; top: 8px; margin: 10px 0 -8px 12px;
    width: 38px; height: 38px; border-radius: var(--r-sm); border: 1px solid var(--border);
    background: var(--surface); color: var(--ink-2); cursor: pointer; z-index: 40; box-shadow: var(--shadow-sm);
  }
  .sl-sidebar {
    position: fixed !important; left: 0; top: 0 !important; bottom: 0; height: 100% !important;
    z-index: 60; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-lg);
  }
  .sl-shell.nav-open .sl-sidebar { transform: none; }
  .sl-overlay { position: fixed; inset: 0; background: oklch(0.2 0.02 264 / 0.45); z-index: 55; }
}
/* stack multi-column layouts on narrow screens (inline grids need !important) */
@media (max-width: 760px) {
  .sl-two-col { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  .sl-row { flex-direction: column !important; align-items: stretch !important; }
  /* wide data rows (experiment list, results table): stack cells, hide the column header */
  .sl-grid-row { grid-template-columns: 1fr !important; gap: 6px !important; }
  .sl-grid-head { display: none !important; }
}