/* Component: quick-picks (WB-2026-10-26-05). Semantic --nt- tokens only; lint: scripts/lint-css-values.py --components. */
@layer components {
.nt-quick { margin-block: var(--nt-space-xl); padding: var(--nt-space-l) var(--nt-space-m); border-block-start: var(--nt-rule-heavy) solid var(--nt-color-structure); background: var(--nt-color-surface-raised); }
.nt-quick__h { margin: 0 0 var(--nt-space-m); font: 600 var(--nt-step--1) / 1.3 var(--nt-font-ui); color: var(--nt-color-ink-2); }
.nt-quick__list { margin: 0; padding: 0; list-style: none; }
.nt-quick__row { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: var(--nt-space-s); row-gap: var(--nt-space-xs); padding-block: var(--nt-space-m); border-block-start: var(--nt-rule-hair) solid var(--nt-color-rule); }
/* The pick row: same CTA as every row; marked by "Our pick" and a 2 px structure rule on its left (WB-2026-10-26-06 step 0). */
.nt-quick__row.is-pick { margin-inline-start: calc(-1 * var(--nt-space-m)); padding-inline-start: calc(var(--nt-space-m) - var(--nt-rule-heavy)); border-inline-start: var(--nt-rule-heavy) solid var(--nt-color-structure); }
.nt-quick__mark { margin-block-end: var(--nt-space-2xs); font: 600 var(--nt-step--1) / 1.3 var(--nt-font-ui); color: var(--nt-color-structure); }
.nt-quick__row:first-child { border-block-start: 0; padding-block-start: 0; }
.nt-quick__rank { font: 600 var(--nt-step-1) / 1 var(--nt-font-display); font-variant-numeric: tabular-nums lining-nums; color: var(--nt-color-ink-3); }
.nt-quick__main p { margin: 0; }
.nt-quick__name { margin-block-end: var(--nt-space-2xs); display: flex; flex-wrap: wrap; align-items: center; gap: var(--nt-space-xs); font: 600 var(--nt-step-0) / var(--nt-leading-snug) var(--nt-font-display); }
.nt-quick__name a { color: var(--nt-color-ink); text-decoration: none; }
.nt-quick__name a:hover { text-decoration: underline; }
.nt-quick__why { margin-block-start: var(--nt-space-xs); font: 400 var(--nt-step--1) / var(--nt-leading-snug) var(--nt-font-ui); color: var(--nt-color-ink-2); }
.nt-quick__cta { grid-column: 2; } /* layout: .nt-cta-stack */
.nt-quick__price { align-self: start; }
.nt-quick__price { font: 600 var(--nt-step--1) / 1 var(--nt-font-ui); font-variant-numeric: tabular-nums lining-nums; color: var(--nt-color-ink); }
/* Every row: one quiet text link on the price line, not a button (WB-2026-10-31-06, all rows since WB-2026-10-26-06). Anything that wraps under the bracket line sits at least --nt-space-s below it. */
.nt-quick__line { grid-column: 2; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--nt-space-m); row-gap: var(--nt-space-s); font: 400 var(--nt-step--1) / 1.4 var(--nt-font-ui); }
.nt-quick__line .nt-quick__price { line-height: 1.4; }
.nt-quick__link { color: var(--nt-color-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.nt-quick__link:hover { color: var(--nt-color-link-hover); text-decoration-thickness: 2px; }
.nt-quick__line .nt-score { align-self: baseline; }
@media (min-width: 900px) {
  .nt-quick__row { grid-template-columns: 1.5rem minmax(0, 1fr) auto; align-items: center; }
  .nt-quick__cta, .nt-quick__line { grid-column: 3; justify-content: end; flex-wrap: nowrap; }
  .nt-quick__price { align-self: center; }
}
}