/* Complex spec table layouts — component-specific, not generalizable */

/* ── Keyboard table rows (shared: buttons-group, link-text, select-control, tgb, tag) ── */
.kbd-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  padding: 12px 24px;
  border-bottom: 1px solid var(--ds-border);
  align-items: center;
}
.kbd-row:last-child { border-bottom: none; }

/* ── Buttons: states table ── */
.states-head {
  display: grid;
  grid-template-columns: 200px repeat(4, 1fr);
  padding: 10px 24px;
  background: var(--ds-page-bg);
  border-bottom: 1px solid var(--ds-border);
}
.states-row {
  display: grid;
  grid-template-columns: 200px repeat(4, 1fr);
  padding: 16px 24px;
  align-items: center;
  border-bottom: 1px solid var(--ds-border);
}
.states-row:last-child { border-bottom: none; }

/* ── Buttons: anatomy table ── */
.anatomy-table-row {
  display: grid;
  grid-template-columns: 32px 160px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ds-border);
  align-items: start;
}
.anatomy-table-row:last-child { border-bottom: none; }

/* ── Buttons: keyboard shortcut table (distinct from .kbd-row — has gap: 16px) ── */
.kb-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--ds-border);
  align-items: center;
}
.kb-row:last-child { border-bottom: none; }

/* ── ButtonsGroup: hierarchy table ── */
.hier-head {
  display: grid;
  grid-template-columns: 110px 160px 1fr;
  padding: 10px 24px;
  background: var(--ds-page-bg);
  border-bottom: 1px solid var(--ds-border);
}
.hier-row {
  display: grid;
  grid-template-columns: 110px 160px 1fr;
  padding: 14px 24px;
  border-bottom: 1px solid var(--ds-border);
  align-items: start;
  gap: 12px;
}
.hier-row:last-child { border-bottom: none; }

/* ── Badge: anatomy row ── */
.anat-row {
  display: grid;
  grid-template-columns: 32px 140px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ds-border);
  align-items: start;
}
.anat-row:last-child { border-bottom: none; }

/* ── Spec tables with fixed first col ── */
.spec-2 {
  display: grid;
  grid-template-columns: 80px repeat(2, 1fr);
}

.spec-3 {
  display: grid;
  grid-template-columns: 80px repeat(3, 1fr);
}

/* ── Link Text: token browser table ── */
.tb-head {
  display: grid;
  grid-template-columns: 240px 260px 1fr;
  padding: 10px 24px;
  background: var(--ds-page-bg);
  border-bottom: 1px solid var(--ds-border);
}
.tb-row {
  display: grid;
  grid-template-columns: 240px 260px 1fr;
  padding: 11px 24px;
  border-bottom: 1px solid var(--ds-border);
  align-items: center;
}
.tb-row:last-child { border-bottom: none; }

/* ── Grid page: viewport spec table (7-col) ── */
.vp-head {
  display: grid;
  grid-template-columns: 200px 120px 80px 72px 72px 100px 110px;
  padding: 10px 24px;
  background: var(--ds-page-bg);
  border-bottom: 1px solid var(--ds-border);
}
.vp-row {
  display: grid;
  grid-template-columns: 200px 120px 80px 72px 72px 100px 110px;
  padding: 18px 24px;
  align-items: center;
  border-bottom: 1px solid var(--ds-border);
}
.vp-row:last-child { border-bottom: none; }

/* ── Typography: type scale table ── */
.scale-head {
  display: grid;
  grid-template-columns: 120px 1fr 68px 68px 80px;
  gap: 16px;
  padding: 10px 24px;
  background: var(--ds-page-bg);
  border-bottom: 1px solid var(--ds-border);
}
.scale-row {
  display: grid;
  grid-template-columns: 120px 1fr 68px 68px 80px;
  gap: 16px;
  padding: 16px 24px;
  align-items: center;
  border-bottom: 1px solid var(--ds-border);
}
.scale-row:last-child { border-bottom: none; }

/* ── Colors: color ramp step row ── */
.ramp-step {
  display: grid;
  grid-template-columns: 52px 68px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--ds-border);
  font-size: var(--ds-text-sm);
}
.ramp-step:last-child { border-bottom: none; }

/* ── Colors: neutral scale row ── */
.neutral-row {
  display: grid;
  grid-template-columns: 76px 100px 1fr 1fr;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--ds-border);
  font-size: var(--ds-text-sm);
}
.neutral-row:last-child { border-bottom: none; }

/* ── Chip: grid table (120px label + 2 fluid cols) ── */
.gc-3-chip { grid-template-columns: var(--ds-grid-label-md) repeat(2, 1fr); }

/* ── TGB: grid table (120px label + 3 fluid cols) ── */
.gc-4-tgb { grid-template-columns: var(--ds-grid-label-md) repeat(3, 1fr); }

/* ── Input: grid tables (100px label — no DS token at this size) ── */
.gc-4-input { grid-template-columns: 100px repeat(3, 1fr); }
.gc-5-input { grid-template-columns: 100px 80px 80px 80px 1fr; }

/* ── Chip: inline token header table (extracted from inline styles) ── */
.spec-inline-chip-header {
  display: grid;
  grid-template-columns: 1fr 110px 120px;
  padding: 10px 16px;
  background: var(--ds-surface-0);
  border-bottom: 1px solid var(--ds-border);
}

/* ── Chip: inline token data rows (same columns as header, with align-items) ── */
.spec-inline-chip-row {
  display: grid;
  grid-template-columns: 1fr 110px 120px;
  padding: 10px 16px;
  background: var(--ds-surface-0);
  border-bottom: 1px solid var(--ds-border);
  align-items: center;
}
.spec-inline-chip-row:last-child { border-bottom: none; }

/* ── Chip: keyboard table (140px key + fluid description) ── */
.gt-kb-row {
  grid-template-columns: 140px 1fr;
}

/* ── Tag: inline accessibility table header (extracted from inline styles) ── */
.spec-inline-tag-header {
  display: grid;
  grid-template-columns: 1fr 130px 150px 160px;
  padding: 10px 20px;
  background: var(--ds-page-bg);
  border-bottom: 1px solid var(--ds-border);
}

/* ── Tag: inline data rows (same columns as header) ── */
.spec-inline-tag-row {
  display: grid;
  grid-template-columns: 1fr 130px 150px 160px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--ds-border);
  align-items: center;
}
.spec-inline-tag-row:last-child { border-bottom: none; }

/* ── Buttons: icon-only states table (6-col: label + 5 variants) ── */
.states-head-6 {
  display: grid;
  grid-template-columns: 200px repeat(5, 1fr);
  padding: 10px 24px;
  background: var(--ds-page-bg);
  border-bottom: 1px solid var(--ds-border);
}
.states-row-6 {
  display: grid;
  grid-template-columns: 200px repeat(5, 1fr);
  padding: 16px 24px;
  align-items: center;
  border-bottom: 1px solid var(--ds-border);
}
.states-row-6:last-child { border-bottom: none; }

/* ── Tabs: inline size token table (extracted from inline styles) ── */
.spec-inline-tabs-states {
  display: grid;
  grid-template-columns: 80px 90px 70px 80px 80px 1fr;
  padding: 10px 24px;
  background: var(--ds-page-bg);
  border-bottom: 1px solid var(--ds-border);
}

/* ── Mobile scroll wrapper for wide spec tables ── */
@media (max-width: 639px) {
  .kbd-row,
  .states-head,
  .states-row,
  .tb-head,
  .tb-row,
  .vp-head,
  .vp-row,
  .scale-head,
  .scale-row,
  .ramp-step,
  .neutral-row,
  .hier-head,
  .hier-row,
  .spec-inline-chip-header,
  .spec-inline-chip-row,
  .spec-inline-tag-header,
  .spec-inline-tag-row,
  .states-head-6,
  .states-row-6,
  .spec-inline-tabs-states { overflow-x: auto; }
}