/* Primer 10 — page-specific components.
   The shared deep-dive parts (.algo / .panes / .diagbox / .acc / .knobs /
   .platforms / .procedure / .deepnav / .stats3) live in primer.css. */

/* This page's canvases are deliberately tiny and blown up, so the pixel grid
   (and therefore the aliasing) stays visible. */
canvas { image-rendering: pixelated; }

/* ── §2 the TAA lab ─────────────────────────────────────────────────────── */
.taa__controls { display: grid; grid-template-columns: 1fr 300px; gap: 24px; margin-top: 20px; align-items: start; }
.taa__control { margin-bottom: 16px; }
.taa__row { display: flex; justify-content: space-between; font-family: var(--font-heading); font-size: 14px; margin-bottom: 6px; }
.taa__en { color: var(--color-neutral-500); font-size: 11px; }
.taa__val { color: var(--color-accent-700); }
.taa__ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-neutral-500); margin-top: 3px; }
.taa__buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.taa__btn {
  font-family: var(--font-heading); font-size: 14px; padding: 7px 16px;
  border-radius: var(--radius-sm); border: 1px solid var(--color-neutral-400);
  background: var(--color-surface); color: var(--color-neutral-800); cursor: pointer;
}
.taa__btn:hover { border-color: var(--color-accent); color: var(--color-accent-700); }
.taa__btn--play { border-color: var(--color-accent-500); color: var(--color-accent-700); }
.taa__btn--play[aria-pressed="true"] { background: var(--color-accent-500); color: #fff; }

.taa__check {
  display: flex; align-items: flex-start; gap: 9px;
  font-family: var(--font-heading); font-size: 14px; color: var(--color-neutral-800);
  cursor: pointer; margin-bottom: 12px;
}
.taa__check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--color-accent); flex: none; }
.taa__check small { display: block; font-size: 11.5px; color: var(--color-neutral-600); }

/* ── §4 comparison table ────────────────────────────────────────────────── */
.cmp {
  display: grid; grid-template-columns: 150px 1fr 1fr;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  overflow: hidden; margin: 24px 0 0; background: var(--color-surface);
}
.cmp__h { padding: 12px 16px; background: var(--color-neutral-200); border-bottom: 1px solid var(--color-divider); font-family: var(--font-heading); font-size: 14px; }
.cmp__h--k { font-size: 13px; color: var(--color-neutral-600); }
.cmp__h--tsr { background: var(--color-accent-100); color: var(--color-accent-700); }
.cmp__k { padding: 13px 16px; border-bottom: 1px solid var(--color-divider); font-family: var(--font-heading); font-size: 13.5px; color: var(--color-neutral-700); }
.cmp__v { padding: 13px 16px; border-bottom: 1px solid var(--color-divider); border-left: 1px solid var(--color-divider); font-size: 13.5px; line-height: 1.6; color: var(--color-neutral-800); }
.cmp__v--tsr { background: var(--color-neutral-100); }
.cmp__h + .cmp__h, .cmp__h--tsr { border-left: 1px solid var(--color-divider); }

.fig--tall { min-height: 132px; gap: 12px; }
.fig--tall .fig__box { padding: 9px 13px; font-size: 13px; }

@media (max-width: 680px) {
  .taa__controls { grid-template-columns: 1fr; }
  /* the three-column table becomes labelled rows */
  .cmp { grid-template-columns: 1fr; }
  .cmp__h--k { display: none; }
  .cmp__k { background: var(--color-neutral-200); font-weight: 600; }
  .cmp__v { border-left: 0; }
  .cmp__v::before { content: attr(data-col) " — "; color: var(--color-neutral-500); font-family: var(--font-mono); font-size: 11px; }
}