@layer components {
.sys-page .section:first-of-type { border-top: 1px solid var(--rule-soft); }
.sub-h { margin-top: var(--s8); font-size: var(--t-caption); color: var(--graphite); font-weight: 400; }
.sub-h + * { margin-top: var(--s4); }

.swatches { display: grid; gap: 0; border-top: 1px solid var(--rule-soft); }
.swatch { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: var(--s5);
  align-items: center; padding-block: var(--s3); border-bottom: 1px solid var(--rule-soft); }
.swatch-chip { width: 40px; height: 24px; border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--rule); }
.swatch-name { font-size: var(--t-caption); }
.swatch-value, .swatch-ratio { font-size: var(--t-machine); color: var(--graphite); }
.swatch-ratio { min-width: 6ch; text-align: right; }
@media (max-width: 640px) {
  .swatch { grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--s3); }
  .swatch-value { display: none; }
}

.ramp-colours { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.ramp-colours li { display: grid; gap: var(--s2); justify-items: center; }
.ramp-chip { width: 56px; height: 40px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--rule); }
.ramp-colours .mono { font-size: var(--t-machine); color: var(--graphite); }

.ramp { border-top: 1px solid var(--rule-soft); margin-top: var(--s6); }
.ramp li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s6);
  align-items: baseline; padding-block: var(--s5); border-bottom: 1px solid var(--rule-soft); }
.ramp-sample { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ramp-meta { font-size: var(--t-machine); color: var(--graphite); white-space: nowrap; }
@media (max-width: 640px) { .ramp li { grid-template-columns: minmax(0, 1fr); gap: var(--s2); } }

.space-scale { margin-top: var(--s6); display: grid; gap: var(--s2); }
.space-scale li { display: grid; grid-template-columns: 110px 90px auto; gap: var(--s4);
  align-items: center; }
.space-bar { height: 10px; background: var(--ink-2); border-radius: 1px; }
.space-scale .mono { font-size: var(--t-machine); }

.radii { display: flex; flex-wrap: wrap; gap: var(--s6); margin-top: var(--s6); }
.radii li { display: grid; gap: var(--s2); justify-items: center; }
.radius-box { width: 72px; height: 56px; background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--rule); }
.radii .mono { font-size: var(--t-machine); }

td.fail { color: var(--ink); font-weight: 500; }
}