/* Notebook template sheet (WB-2026-10-26-05): the ?v=notebook list and
   head-to-head pages. Layout and prose only; every module is a component.
   Lives in @layer templates; semantic --nt- tokens only (lint --components). */
@layer templates {
  .nt-page { background: var(--nt-color-surface); color: var(--nt-color-ink); }
  .nt-wrap { max-inline-size: 46rem; margin-inline: auto; padding: var(--nt-space-xl) var(--nt-space-m) var(--nt-space-3xl); }
  .nt-head { display: grid; gap: var(--nt-space-m); padding-block-end: var(--nt-space-m); }
  .nt-head .nt-kicker { margin-block: var(--nt-space-l) 0; }
  .nt-head > * { margin: 0; }
  /* One step up from 10/31 (step-4 to step-5), serif, balanced (WB-2026-10-31-03). */
  .nt-title { font: 600 var(--nt-step-5) / 1.08 var(--nt-font-display); letter-spacing: -0.015em; font-optical-sizing: auto; color: var(--nt-color-ink); text-wrap: balance; }
  .nt-dek { max-inline-size: 40ch; font: 400 var(--nt-step-1) / var(--nt-leading-snug) var(--nt-font-display); color: var(--nt-color-ink-2); }
  .nt-byline { display: grid; gap: var(--nt-space-xs); margin-block-start: var(--nt-space-xs); padding-block-start: var(--nt-space-m); border-block-start: var(--nt-rule-hair) solid var(--nt-color-rule); font: 400 var(--nt-step--1) / 1.4 var(--nt-font-ui); color: var(--nt-color-ink-2); }

  .nt-prose { max-inline-size: var(--nt-measure); font: 400 var(--nt-step-0) / var(--nt-leading-body) var(--nt-font-ui); color: var(--nt-color-ink); }
  .nt-prose > * { margin-block: 0 var(--nt-space-l); }
  .nt-prose h2 { margin-block: var(--nt-space-2xl) var(--nt-space-s); padding-block-start: var(--nt-space-s); border-block-start: var(--nt-rule-hair) solid var(--nt-color-rule-strong); font: 600 var(--nt-step-2) / var(--nt-leading-tight) var(--nt-font-display); color: var(--nt-color-ink); text-wrap: balance; scroll-margin-block-start: var(--nt-space-xl); }
  .nt-prose h3 { margin-block: var(--nt-space-l) var(--nt-space-xs); font: 600 var(--nt-step-1) / var(--nt-leading-snug) var(--nt-font-display); color: var(--nt-color-ink); }
  .nt-prose p { text-wrap: pretty; }
  /* Carried-over content (WB-2026-10-26-06 step 3): a long TL;DR opens the
     prose as the verdict paragraph; the page's own disclosure is a quiet note. */
  .nt-prose .nt-tldr { padding-inline-start: var(--nt-space-m); border-inline-start: var(--nt-rule-heavy) solid var(--nt-color-structure); font: 400 var(--nt-step-1) / var(--nt-leading-snug) var(--nt-font-display); color: var(--nt-color-ink); }
  .nt-prose .nt-table-note { margin-block-start: calc(-1 * var(--nt-space-s)); font: 400 var(--nt-step--1) / 1.5 var(--nt-font-ui); color: var(--nt-color-ink-3); }
  .nt-prose .nt-page-disclosure { font: 400 var(--nt-step--1) / 1.5 var(--nt-font-ui); color: var(--nt-color-ink-2); }
  .nt-prose ul, .nt-prose ol { padding-inline-start: 1.25em; }
  .nt-prose li + li { margin-block-start: var(--nt-space-2xs); }
  /* Text links only. Buttons inside the prose (PickCard, body CTAs) keep
     their own colours: this layer sits above components, so a bare
     ".nt-prose a" painted the ErGear button's label green (WB-2026-10-31-03). */
  .nt-prose a:where(:not(.c-btn, .btn)) { color: var(--nt-color-link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  .nt-prose a:where(:not(.c-btn, .btn)):hover { color: var(--nt-color-link-hover); }
  .nt-prose a[rel~="sponsored"] { font-weight: 600; }
  .nt-prose strong { font-weight: 600; }
  .nt-prose img { max-inline-size: 100%; block-size: auto; border: var(--nt-rule-hair) solid var(--nt-color-rule); }
  .nt-prose figcaption { font: 400 var(--nt-step--1) / 1.4 var(--nt-font-ui); color: var(--nt-color-ink-3); }
  .nt-prose blockquote { margin-inline: 0; padding-inline-start: var(--nt-space-m); border-inline-start: var(--nt-rule-heavy) solid var(--nt-color-rule-strong); color: var(--nt-color-ink-2); }
  .nt-prose table { inline-size: 100%; border-collapse: collapse; font: 400 var(--nt-step--1) / var(--nt-leading-snug) var(--nt-font-ui); font-variant-numeric: tabular-nums lining-nums; }
  .nt-prose th, .nt-prose td { padding: var(--nt-space-xs); border-block-start: var(--nt-rule-hair) solid var(--nt-color-rule); text-align: start; vertical-align: top; }

  /* Closing pair (WB-2026-10-26-06 step 0, Tyler's T5 note): button, then
     the review link 16 px under it. A boxed unit (button, hairline, link in
     one bordered box) was tried and dropped: on the head-to-head only one of
     the two products has a review, so a boxed V3 sat over an unboxed Plus,
     and an outlined button inside a box read as a box in a box. */
  .nt-prose > .nt-toc { margin-block: var(--nt-space-xl); } /* hairline above and below, xl outside, also inside the h2h prose (step 0) */
  .nt-close { display: flex; flex-direction: column; align-items: stretch; gap: var(--nt-space-m); margin-block: var(--nt-space-2xl); padding-block: var(--nt-space-l); border-block: var(--nt-rule-hair) solid var(--nt-color-rule); }
  .nt-close > .c-btn { inline-size: 100%; white-space: normal; }
  .nt-close > .nt-score, .nt-close > .nt-cta-review { align-self: start; }

  /* Body CTAs from the_content: the button, then its "Read our review" chip
     as a quiet link 16 px under it. */
  .nt-prose .nnt-dual-cta { display: flex; flex-direction: column; align-items: stretch; gap: var(--nt-space-m); }
  .nt-prose .nnt-dual-cta > .btn, .nt-prose p.nnt-cta-p > .btn { inline-size: 100%; box-sizing: border-box; justify-content: center; text-align: center; white-space: normal; }
  .nt-prose .nnt-dual-cta-review { align-self: start; font: 500 var(--nt-step--1) / 1.3 var(--nt-font-ui); }

  @media (min-width: 640px) {
    .nt-close, .nt-prose .nnt-dual-cta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--nt-space-m); }
    .nt-close > .c-btn, .nt-prose .nnt-dual-cta > .btn, .nt-prose p.nnt-cta-p > .btn { inline-size: auto; white-space: nowrap; }
    .nt-close > .nt-score, .nt-close > .nt-cta-review, .nt-prose .nnt-dual-cta-review { align-self: center; }
  }
  @media (min-width: 768px) {
    .nt-wrap { padding-inline: var(--nt-space-xl); }
  }
}

/* One terracotta per view (craft rule 8): body CTAs sit right under a
   PickCard or VersusLedger that already carries the filled button, so in
   the notebook prose they take the quiet outline (WB-2026-10-31-03). This sits
   outside @layer on purpose: base.css's .btn.btn-buy is unlayered, and a
   layered rule never beats an unlayered one. Delete with the legacy sheets. */
.nt-page .nt-prose a.btn.btn-buy { background: transparent; color: var(--nt-color-ink); border: var(--nt-rule-hair) solid var(--nt-color-rule-strong); }
.nt-page .nt-prose a.btn.btn-buy:hover { background: transparent; color: var(--nt-color-ink); border-color: var(--nt-color-ink-2); }
.nt-page .nt-prose p.nnt-cta-p { text-align: start; } /* match the component buttons, which align left */

/* Header Subscribe, phones, notebook views only (WB-2026-10-31-06): the quiet
   outline, so the verdict button is the only filled terracotta in the first
   screen. notebook.css loads only in the notebook bundle, so the classic
   header is untouched. Unlayered for the same reason as above (chrome.css
   .btn-primary is unlayered). Session 7 replaces the header. */
@media (max-width: 639px) {
  .site-header .btn.btn-primary { background: transparent; color: var(--nt-color-ink); border: var(--nt-rule-hair) solid var(--nt-color-rule-strong); padding-block: calc(8px - var(--nt-rule-hair)); padding-inline: calc(16px - var(--nt-rule-hair)); }
  .site-header .btn.btn-primary:hover { background: transparent; color: var(--nt-color-ink); border-color: var(--nt-color-ink-2); }
}