/* Component: spec-plate (WB-2026-10-26-05). Semantic --nt- tokens only; lint: scripts/lint-css-values.py --components. */
@layer components {
.nt-plate {
  display: grid; align-content: center; gap: var(--nt-space-2xs);
  aspect-ratio: 1; min-block-size: min-content; padding: var(--nt-space-m);
  overflow-wrap: anywhere; hyphens: auto;
  background: var(--nt-color-surface-raised);
  border: var(--nt-rule-hair) solid var(--nt-color-rule);
  border-radius: var(--nt-radius-photo);
  font-family: var(--nt-font-ui); color: var(--nt-color-ink-2);
}
.nt-plate__brand { font: 500 var(--nt-step--2) / 1.2 var(--nt-font-ui); color: var(--nt-color-ink-3); }
.nt-plate__model { font: 600 var(--nt-step-0) / var(--nt-leading-tight) var(--nt-font-display); color: var(--nt-color-ink); text-wrap: balance; }
.nt-plate__fact { font: 500 var(--nt-step--1) / 1.2 var(--nt-font-ui); font-variant-numeric: tabular-nums lining-nums; }
.nt-plate--sm { aspect-ratio: auto; min-block-size: 7rem; padding: var(--nt-space-s); align-content: start; } /* top-aligned so a long name grows down, never past the top edge */
.nt-plate--sm .nt-plate__model { font-size: var(--nt-step--1); }
}