/* Component: compare-table (WB-2026-10-26-05, reworked WB-2026-10-31-03). Semantic --nt- tokens only; lint: scripts/lint-css-values.py --components.
   Under 640 px: stacked product cards, no horizontal scroll. From 640 px:
   the Roselli region with the real <table>, 1 px column rules, a 2 px
   structure rule under the header row. */
@layer components {
.nt-compare { margin-block: var(--nt-space-xl); }
.nt-compare__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nt-space-s); margin-block-end: var(--nt-space-m); }
.nt-compare__hint { margin: 0; font: 400 var(--nt-step--1) / 1.3 var(--nt-font-ui); color: var(--nt-color-ink-3); }
.nt-compare.is-diff-only [data-same] { display: none; }

/* Phones: cards */
.nt-compare__cards { display: grid; gap: var(--nt-space-l); }
.nt-compare__card { padding: var(--nt-space-m); border: var(--nt-rule-hair) solid var(--nt-color-rule); border-block-start: var(--nt-rule-heavy) solid var(--nt-color-structure); background: var(--nt-color-surface); }
.nt-compare__card-head { display: grid; gap: var(--nt-space-s); padding-block-end: var(--nt-space-s); }
.nt-compare__card-head .c-btn { inline-size: 100%; white-space: normal; }
.nt-compare__card .nt-compare__pname { margin: 0; font-size: var(--nt-step-0); }
.nt-compare__pairs { margin: 0; font: 400 var(--nt-step--1) / var(--nt-leading-snug) var(--nt-font-ui); font-variant-numeric: tabular-nums lining-nums; color: var(--nt-color-ink); }
.nt-compare__pair { display: grid; gap: var(--nt-space-3xs); padding-block: var(--nt-space-s); border-block-start: var(--nt-rule-hair) solid var(--nt-color-rule); }
.nt-compare__pair dt { font-weight: 600; color: var(--nt-color-ink-2); }
.nt-compare__pair dd { margin: 0; }
.nt-compare__pair[data-same] dd { color: var(--nt-color-ink-2); }
.nt-compare__region { display: none; }

/* 640 px and up: the table */
@media (min-width: 640px) {
  .nt-compare__cards { display: none; }
  .nt-compare__region { display: block; overflow: auto; max-block-size: 80vh; border: var(--nt-rule-hair) solid var(--nt-color-rule); border-radius: var(--nt-radius-data); }
}
.nt-compare__region:focus-visible { outline: var(--nt-rule-heavy) solid var(--nt-color-focus); outline-offset: 2px; }
.nt-compare table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font: 400 var(--nt-step--1) / var(--nt-leading-snug) var(--nt-font-ui); font-variant-numeric: tabular-nums lining-nums; color: var(--nt-color-ink); }
.nt-compare caption { padding: var(--nt-space-s) var(--nt-space-m); text-align: start; font: 600 var(--nt-step--1) / 1.3 var(--nt-font-ui); color: var(--nt-color-ink-2); }
.nt-compare th, .nt-compare td { padding: var(--nt-space-s) var(--nt-space-m); text-align: start; vertical-align: top; border-block-start: var(--nt-rule-hair) solid var(--nt-color-rule); background: var(--nt-color-surface); }
.nt-compare th + th, .nt-compare th + td, .nt-compare td + td { border-inline-start: var(--nt-rule-hair) solid var(--nt-color-rule); }
.nt-compare thead th { position: sticky; inset-block-start: 0; z-index: 2; vertical-align: bottom; border-block-start: 0; border-block-end: var(--nt-rule-heavy) solid var(--nt-color-structure); }
.nt-compare tbody th { font-weight: 600; color: var(--nt-color-ink-2); }
.nt-compare tr[data-same] td { color: var(--nt-color-ink-2); }
.nt-compare__pname { display: block; font: 600 var(--nt-step--1) / 1.25 var(--nt-font-display); color: var(--nt-color-ink); }
.nt-compare__plink { display: inline-block; margin-block-start: var(--nt-space-2xs); font: 500 var(--nt-step--2) / 1.2 var(--nt-font-ui); color: var(--nt-color-link); }
}