/* ==========================================================================
   lesson-22.css — 第 22 课 · 耗时真测台 + KV 显存账
   ========================================================================== */

.l22-lab {
  border: 1px solid var(--border-color);
  background: var(--surface);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.l22-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.l22-slider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
}

.l22-slider input[type='range'] {
  flex: 1;
  min-width: 8rem;
  accent-color: var(--accent);
}

.l22-slider b {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 2em;
  text-align: right;
}

.l22-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.l22-bench-btn,
.l22-cache-toggle,
.l22-kvmem {
  border: 1px solid var(--border-strong);
  background: var(--border-strong);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  border-radius: var(--radius);
  letter-spacing: 0.04em;
}

.l22-bench-btn:hover:not(:disabled),
.l22-cache-toggle:hover,
.l22-kvmem:hover { background: var(--accent); border-color: var(--accent); }

.l22-bench-btn:disabled { opacity: 0.6; cursor: wait; }

.l22-cache-toggle,
.l22-kvmem {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-color);
}

.l22-cache-toggle:hover,
.l22-kvmem:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
}

.l22-cache-toggle.is-on,
.l22-kvmem.is-on {
  border-color: var(--accent-dim);
  color: var(--accent-dim);
}

.l22-status {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
  min-height: 1.4em;
}

/* ---- 图表 ---- */
.l22-chart {
  border: 1px solid var(--border-color);
  background: var(--bg);
  padding: var(--space-3);
}

.l22-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
}

.l22-key::before { content: '　'; }

.l22-key--measured { color: var(--accent-dim); }
.l22-key--an { color: var(--text-dim); }
.l22-key--cache { color: var(--text-dim); }

/* ---- KV 显存账 ---- */
.l22-kv {
  border: 1px dashed var(--border-strong);
  background: var(--bg);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.l22-kv h4 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
}

.l22-kv-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
}

.l22-kv-row b { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

.l22-kv-bar {
  height: 0.75rem;
  border: 1px solid var(--border-color);
  background: var(--surface);
  position: relative;
}

.l22-kv-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
}

.l22-kv-note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
}

/* ---- 角标：实测 / 解析 / 回放 ---- */
.l22-badge {
  display: inline-block;
  border: 1px solid var(--accent-dim);
  color: var(--accent-dim);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 0 var(--space-2);
  border-radius: var(--radius);
}

.l22-badge--an,
.l22-badge--ref {
  border-color: var(--border-strong);
  color: var(--text-dim);
}

/* ---- 参考机回放面板 ---- */
.l22-ref {
  margin-top: var(--space-4);
  border: 1px solid var(--border-color);
  background: var(--surface);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.l22-ref-title {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
}

.l22-ref-note { color: var(--text-dim); font-size: var(--text-xs); }

.l22-ref-svg { display: block; }

.l22-ref-ratio {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
}