@layer theme.components {

.spec-table {
  overflow-x: auto;
  overflow-y: hidden;
  max-inline-size: var(--width-table);
  margin-block-start: 28px;
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-lg);
  background: var(--color-bg-page);
  box-shadow: var(--shadow-table);
  scrollbar-color: var(--color-border-strong) transparent;
  scrollbar-width: thin;
}
.spec-table::-webkit-scrollbar { block-size: 8px; }
.spec-table::-webkit-scrollbar-track { background: transparent; }
.spec-table::-webkit-scrollbar-thumb {
  border: 2px solid var(--color-bg-page);
  border-radius: var(--radius-sm);
  background: var(--color-border-strong);
}
.spec-table table {
  width: 100%;
  min-width: var(--width-table-min);
  border-collapse: collapse;
  table-layout: fixed;
}
.spec-table thead { background: var(--color-bg-table-head); }
.spec-table thead th { text-align: start; font-size: var(--font-size-caption); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); padding: 10px 12px 9px; white-space: nowrap; }
.spec-table thead th:first-child { width: 30%; color: var(--color-text); }
.spec-table thead th:nth-child(2) { width: 32%; }
.spec-table thead th:nth-child(3) { width: 38%; }
.spec-table table:has(thead th:nth-child(4)) thead th:first-child { width: 26%; }
.spec-table table:has(thead th:nth-child(4)) thead th:nth-child(2) { width: 27%; }
.spec-table table:has(thead th:nth-child(4)) thead th:nth-child(3) { width: 31%; }
.spec-table table:has(thead th:nth-child(4)) thead th:nth-child(4) { width: 16%; }
.spec-table tbody th, .spec-table td { font-size: var(--font-size-small); line-height: 1.45; padding: 9px 12px; border-block-start: 1px solid var(--color-border); vertical-align: top; text-align: start; }
.spec-table tbody th { font-weight: 600; white-space: nowrap; }
.spec-table td { color: var(--color-text-body); }
.section-spec-table__note { max-inline-size: var(--width-table); margin-block-start: 20px; color: var(--color-text-muted); }
.section-spec-table__cta { margin-block-start: 24px; }

}