/* Algorithms lab — sorting, graphs, complexity, interactive games */

.algo-lab {
  --algo-accent: var(--chip-cs);
  --algo-secondary: #9b7ed4;
  --algo-muted: var(--color-text-muted);
  max-width: 920px;
  font-family: var(--font-body);
}

/* ── Header ─────────────────────────────────────────────── */

.algo-lab__header { margin-bottom: var(--space-6); }
.algo-lab__eyebrow {
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--algo-accent); margin-bottom: var(--space-2);
}
.algo-lab__title {
  font-family: var(--font-display);
  font-size: var(--text-lg); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.25;
  margin-bottom: var(--space-3);
}
.algo-lab__intro {
  font-size: var(--text-sm); color: var(--algo-muted);
  line-height: 1.65; max-width: 62ch;
}

/* ── Tabs ───────────────────────────────────────────────── */

.algo-lab__tabs {
  display: flex; flex-wrap: wrap;
  gap: var(--space-2); margin-bottom: var(--space-6);
}
.algo-lab__tab {
  font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: oklch(from var(--color-text) l c h / 0.04);
  color: var(--algo-muted); cursor: pointer;
  transition: background var(--transition-interactive),
    color var(--transition-interactive),
    border-color var(--transition-interactive),
    box-shadow var(--transition-interactive);
}
.algo-lab__tab:hover {
  color: var(--color-text);
  border-color: oklch(from var(--algo-accent) l c h / 0.45);
}
.algo-lab__tab[aria-selected="true"] {
  color: var(--color-bg);
  background: linear-gradient(125deg, oklch(from var(--algo-accent) l c h / 0.88), var(--algo-secondary));
  border-color: transparent;
  box-shadow: 0 0 18px oklch(from var(--algo-accent) l c h / 0.22);
}

/* ── Panels ─────────────────────────────────────────────── */

.algo-lab__panel {
  display: none;
  animation: algo-lab-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.algo-lab__panel.is-active { display: block; }

@keyframes algo-lab-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .algo-lab__panel { animation: none; }
}

.algo-lab__section-label {
  font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-text-faint); margin-bottom: var(--space-4);
}

/* ── Canvas ─────────────────────────────────────────────── */

.algo-lab__canvas {
  width: 100%; display: block;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-divider);
  background: oklch(from var(--color-text) l c h / 0.03);
}
.algo-lab__canvas--sort  { height: 280px; }
.algo-lab__canvas--graph { height: 340px; flex: 1; min-width: 0; }
.algo-lab__canvas--racer { height: 300px; }

/* ── Sort controls ──────────────────────────────────────── */

.algo-lab__sort-controls { margin-bottom: var(--space-4); }

.algo-lab__algo-btns {
  display: flex; flex-wrap: wrap;
  gap: var(--space-2); margin-bottom: var(--space-3);
}
.algo-lab__algo-btn {
  font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text); cursor: pointer;
  transition: border-color var(--transition-interactive),
    background var(--transition-interactive);
}
.algo-lab__algo-btn:hover { border-color: oklch(from var(--algo-accent) l c h / 0.5); }
.algo-lab__algo-btn.is-active {
  border-color: var(--algo-accent);
  background: oklch(from var(--algo-accent) l c h / 0.12);
  box-shadow: 0 0 0 1px oklch(from var(--algo-accent) l c h / 0.2);
}

.algo-lab__sort-info {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--algo-muted); margin-bottom: var(--space-3);
}
.algo-lab__sort-info strong { color: var(--algo-accent); }

.algo-lab__ctrl-row {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.algo-lab__speed-label {
  font-size: var(--text-xs); font-weight: 600;
  color: var(--algo-muted); display: flex;
  align-items: center; gap: var(--space-2);
}
.algo-lab__slider {
  width: 7rem; accent-color: var(--algo-accent); cursor: pointer;
}

/* ── Buttons ────────────────────────────────────────────── */

.algo-lab__btn {
  font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 600;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text); cursor: pointer;
  transition: background var(--transition-interactive),
    border-color var(--transition-interactive);
}
.algo-lab__btn:hover { border-color: oklch(from var(--algo-accent) l c h / 0.5); }
.algo-lab__btn--primary {
  background: oklch(from var(--algo-accent) l c h / 0.18);
  border-color: var(--algo-accent);
}
.algo-lab__btn--primary:hover {
  background: oklch(from var(--algo-accent) l c h / 0.28);
}

/* ── Graph layout ───────────────────────────────────────── */

.algo-lab__graph-wrap {
  display: flex; gap: var(--space-4);
  align-items: stretch;
}
.algo-lab__graph-status {
  font-size: var(--text-sm); color: var(--algo-muted);
  margin-bottom: var(--space-3); min-height: 1.4em;
}
.algo-lab__graph-status--warn {
  color: #ffb16a;
}
.algo-lab__ds-box {
  min-width: 160px; max-width: 200px;
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-divider);
  background: oklch(from var(--color-text) l c h / 0.03);
  font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--color-text); word-break: break-all;
  align-self: flex-start;
}
.algo-lab__ds-label {
  font-weight: 700; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--algo-accent); display: block;
  margin-bottom: var(--space-2);
}

/* ── Racer controls ─────────────────────────────────────── */

.algo-lab__select {
  font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 600;
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text); cursor: pointer;
}
.algo-lab__mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--algo-accent);
}

/* ── Ordering wrap ──────────────────────────────────────── */

.algo-lab__order-wrap { margin-bottom: var(--space-4); }

/* ── Fine print ─────────────────────────────────────────── */

.algo-lab__fine {
  font-size: var(--text-xs); color: var(--color-text-faint);
  margin-top: var(--space-6); line-height: 1.5;
  max-width: 68ch;
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 600px) {
  .algo-lab__graph-wrap { flex-direction: column; }
  .algo-lab__ds-box { max-width: 100%; min-width: 0; }
  .algo-lab__canvas--sort  { height: 220px; }
  .algo-lab__canvas--graph { height: 280px; }
  .algo-lab__canvas--racer { height: 240px; }
}