/* Copied from pbn.red's skin (Projects/pbn-red-site/skin/assets/css/skin.css) by profiles-red/src/build.py. Site changes go in profiles.css. */
/* Hallmark · genre: modern-minimal · macrostructure: Manifesto · nav: N7 (red) · footer: Ft5 · theme: custom (pbn.red brand base) · enrichment: none */
/* pbn.red skin v1 (10/19/2026): round 1 candidate C "Red box", picked by Bike with one change: the header is red.
 * Tokens, reset and the verdict box live in base.css. This file is layout and components.
 * Report poster follows the verdict: red = Pass, ink = Buy, light = Buy then test.
 */

:root {
  --c-statement: clamp(1.5rem, 2.4vw + 0.75rem, 3rem);
  --c-verdict: clamp(3rem, 6.4vw + 0.75rem, 6.25rem);
  --c-h2: clamp(2rem, 2.6vw + 1.1rem, 3.5rem);
  --c-decl: clamp(1.25rem, 1.3vw + 0.95rem, 2.125rem);
  --c-poster-domain: clamp(2.25rem, 10.5vw, 7rem);
  --c-foot-line: clamp(2rem, 4.2vw + 0.6rem, 4.5rem);
  --c-rule-ink: 2px solid var(--color-ink);
  --c-rule-thin-ink: 1px solid var(--color-ink);
  --c-slab-h: 4.25rem;
  --c-field-h: 4rem;
  --c-chart-area: var(--color-paper-2);
  --c-chart-grid: var(--color-rule-2);
  --color-red-line: oklch(74% 0.16 24);            /* hairlines on the red header */
}

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ---------- Header: N7 slab on red ---------- */
.slab { background: var(--color-red); color: var(--color-on-red); border-bottom: var(--rule-slab); position: relative; z-index: var(--z-raised); }
.slab__in { display: flex; align-items: center; justify-content: space-between; gap: 0 var(--space-md); min-height: var(--c-slab-h); flex-wrap: wrap; padding-block: var(--space-sm); }
.slab .logo { padding-block: var(--space-2xs); }
.slab__links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.slab__links a {
  display: inline-block; color: var(--color-on-red); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: var(--text-sm); font-weight: 700; text-decoration: none; padding-block: var(--space-xs); white-space: nowrap;
  text-underline-offset: 0.45em; text-decoration-thickness: 3px;
}
.slab__links a:hover, .slab__links a[aria-current="page"] { text-decoration-line: underline; }
.slab__links .slab__cta {
  background: var(--color-ink); color: var(--color-paper); padding: 0.85rem 1.1rem;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.slab__links .slab__cta:hover { background: var(--color-paper); color: var(--color-ink); text-decoration-line: none; }
.slab__links .slab__cta:active { transform: translateY(1px); }
.menu-btn {
  display: none; align-items: center; line-height: 1.2; padding: 0.85rem 1rem; border: 0; cursor: pointer;
  background: transparent; color: var(--color-on-red); box-shadow: inset 0 0 0 2px var(--color-on-red);
  font-weight: 700; font-size: var(--text-sm); letter-spacing: 0.1em; text-transform: uppercase;
}
.menu-btn:hover { background: var(--color-red-deep); }
.menu-btn:active { transform: translateY(1px); }
.menu-btn[aria-expanded="true"] { background: var(--color-ink); box-shadow: none; }

@media (max-width: 47.99rem) {
  .js .menu-btn { display: inline-flex; }
  .js .slab__in > nav { flex-basis: 100%; }
  .js .slab__links { display: none; }
  .js .slab.is-open .slab__links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%;
    border-top: 2px solid var(--color-on-red); margin-top: var(--space-xs);
  }
  .js .slab.is-open .slab__links li { border-bottom: 1px solid var(--color-red-line); }
  .js .slab.is-open .slab__links li:last-child { border-bottom: 0; }
  .js .slab.is-open .slab__links a { display: flex; align-items: center; min-height: 3.25rem; padding-inline: 0; }
  .js .slab.is-open .slab__links .slab__cta { justify-content: center; margin-block: var(--space-sm); padding-inline: 1rem; }
}
/* Four header links (10/20: PBN services joined) need more room, so that header switches to the menu below 60rem.
   Headers with fewer links (engine reports) keep the 48rem switch above. */
@media (min-width: 48rem) and (max-width: 59.99rem) {
  .js .slab:has(.slab__links > li:nth-child(4)) .menu-btn { display: inline-flex; }
  .js .slab:has(.slab__links > li:nth-child(4)) .slab__in > nav { flex-basis: 100%; }
  .js .slab:has(.slab__links > li:nth-child(4)) .slab__links { display: none; }
  .js .slab.is-open:has(.slab__links > li:nth-child(4)) .slab__links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%;
    border-top: 2px solid var(--color-on-red); margin-top: var(--space-xs);
  }
  .js .slab.is-open .slab__links li { border-bottom: 1px solid var(--color-red-line); }
  .js .slab.is-open .slab__links li:last-child { border-bottom: 0; }
  .js .slab.is-open .slab__links a { display: flex; align-items: center; min-height: 3.25rem; padding-inline: 0; }
  .js .slab.is-open .slab__links .slab__cta { justify-content: center; margin-block: var(--space-sm); padding-inline: 1rem; }
}

/* ---------- Home hero: the argument ---------- */
.hero { padding-block: clamp(2.5rem, 5.5vw, 5.5rem) clamp(3.5rem, 6vw, 6rem); }
.hero h1 { font-weight: 900; font-size: var(--text-display); line-height: 0.98; letter-spacing: -0.042em; max-width: 21ch; }
.hero__lede { margin-top: var(--space-lg); font-size: clamp(1.2rem, 0.5vw + 1rem, 1.45rem); font-weight: 500; line-height: 1.38; max-width: 36ch; }
ul.stack {
  list-style: none; padding: 0; margin: clamp(2.25rem, 4.5vw, 4rem) 0 0;
  display: grid; justify-items: start; gap: clamp(0.4rem, 0.8vw, 0.7rem);
  padding-inline-start: clamp(0rem, 14vw, 18rem);
}
.stack > li {
  font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: var(--c-statement);
  line-height: 1.04; letter-spacing: -0.028em; padding: 0.14em 0.36em 0.2em 0.3em; max-width: 100%;
}
.stack > li:nth-child(2) { margin-inline-start: clamp(0.5rem, 3vw, 3.5rem); }
.stack > li:nth-child(3) { margin-inline-start: clamp(1rem, 6vw, 7rem); }
.stack > li:nth-child(4) { margin-inline-start: clamp(1.5rem, 9vw, 10.5rem); margin-block-start: clamp(0.4rem, 1vw, 0.9rem); padding: 0; }
.st--ink { background: var(--color-ink); color: var(--color-paper); }
.st--red { background: var(--color-red); color: var(--color-on-red); }
.stack .vbox { font-size: var(--c-verdict); padding: 0.1em 0.34em 0.16em 0.26em; }
.stack__note {
  margin-top: clamp(1.75rem, 3vw, 2.5rem); padding-inline-start: clamp(1.5rem, 9vw, 10.5rem);
  margin-inline-start: clamp(0rem, 14vw, 18rem); color: var(--color-ink-2); max-width: 60ch;
}
.stack__note .mono { font-size: 0.95em; color: var(--color-ink); }
@media (prefers-reduced-motion: no-preference) {
  .js .stack > li { opacity: 0; transform: translateX(-14px); animation: c-land var(--dur-short) var(--ease-out) forwards; }
  .js .stack > li:nth-child(1) { animation-delay: 60ms; }
  .js .stack > li:nth-child(2) { animation-delay: 140ms; }
  .js .stack > li:nth-child(3) { animation-delay: 220ms; }
  .js .stack > li:nth-child(4) { animation-delay: 280ms; }
}
@keyframes c-land { to { opacity: 1; transform: none; } }

/* links in running text */
.tlink { font-weight: 700; text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; white-space: nowrap; }
.tlink:hover { text-decoration-color: var(--color-red); text-decoration-thickness: 3px; }
.tlink:active { color: var(--color-red-deep); }

/* ---------- The red form slab ---------- */
.check { background: var(--color-red); color: var(--color-on-red); padding-block: clamp(3.5rem, 6.5vw, 6rem); }
.check h2 { font-size: var(--c-h2); font-weight: 900; letter-spacing: -0.035em; max-width: 19ch; }
.check__lead { margin-top: var(--space-md); font-size: var(--text-md); font-weight: 500; line-height: 1.4; max-width: 44ch; }
.check form { margin-top: clamp(1.75rem, 3vw, 2.5rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; max-width: 54rem; }
.check label { grid-column: 1 / -1; font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--space-xs); }
.check input {
  min-width: 0; height: var(--c-field-h); border: 0; border-radius: 0; padding: 0 1.1rem;
  background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); font-weight: 500;
}
.check input::placeholder { color: var(--color-muted); }
.check input:focus-visible { outline: 3px solid var(--color-paper); outline-offset: 3px; }
.btn-ink {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  border: 0; border-radius: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  background: var(--color-ink); color: var(--color-paper);
  font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: var(--text-md); letter-spacing: -0.01em;
  line-height: 1.2; padding: 0.75rem 1.6rem;
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn-ink:hover { background: var(--color-ink-2); }
.btn-ink:active { transform: translateY(1px); }
.btn-ink:disabled, .btn-ink[aria-disabled="true"] { background: var(--color-muted); cursor: not-allowed; transform: none; }
.check .btn-ink { padding-block: calc((var(--c-field-h) - 1.2em) / 2); }
.check .btn-ink:focus-visible { outline: 3px solid var(--color-paper); outline-offset: 3px; }
.check__fine { margin-top: var(--space-md); font-size: var(--text-sm); font-weight: 500; max-width: 60ch; }

/* ---------- Verdict lines ---------- */
.rules { padding-block: clamp(4rem, 7vw, 7rem) clamp(3.5rem, 6vw, 6rem); }
.sec-h { font-size: var(--c-h2); font-weight: 900; letter-spacing: -0.035em; max-width: 18ch; }
.sec-lead { margin-top: var(--space-md); font-size: var(--text-md); line-height: 1.45; max-width: 46ch; color: var(--color-ink-2); }
.decl { list-style: none; padding: 0; margin: clamp(2rem, 3.5vw, 3rem) 0 0; border-top: var(--c-rule-ink); }
.decl li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg);
  padding-block: clamp(0.8rem, 1.3vw, 1.15rem); border-bottom: var(--c-rule-thin-ink);
}
.decl__q { font-family: var(--font-display); font-weight: 800; font-size: var(--c-decl); letter-spacing: -0.028em; line-height: 1.1; }
.decl .vbox { font-size: clamp(1.2rem, 0.9vw + 0.95rem, 1.85rem); flex: none; }
.decl li.decl__last .decl__q { font-weight: 900; }
.rules__flags { margin-top: var(--space-lg); color: var(--color-ink-2); max-width: 70ch; }
.rules__flags b { color: var(--color-ink); }

/* ---------- Sample reports ---------- */
.samples { padding-block: 0 clamp(4rem, 7vw, 7rem); }
.samples__list { list-style: none; padding: 0; margin: clamp(2rem, 3.5vw, 3rem) 0 0; border-top: var(--c-rule-ink); }
.samples__list li { border-bottom: var(--c-rule-thin-ink); }
.sample {
  display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr) auto; align-items: center; gap: var(--space-md) var(--space-xl);
  padding-block: clamp(1.1rem, 1.8vw, 1.6rem); text-decoration: none;
}
.sample .vbox { font-size: clamp(1.4rem, 1.2vw + 1rem, 2.1rem); justify-self: start; }
.sample__domain { display: block; font-family: var(--font-display); font-weight: 900; font-size: var(--c-decl); letter-spacing: -0.03em; line-height: 1.1; }
.sample__line { display: block; margin-top: var(--space-2xs); color: var(--color-ink-2); max-width: 60ch; }
.sample__go { font-weight: 700; white-space: nowrap; text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.sample:hover .sample__domain { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.12em; }
.sample:hover .sample__go { text-decoration-color: var(--color-red); text-decoration-thickness: 3px; }
.sample:active { transform: translateY(1px); }
.samples__more { margin-top: var(--space-lg); color: var(--color-ink-2); max-width: 72ch; }

/* ---------- How it checks: the quiet band ---------- */
.how { background: var(--color-paper-2); padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.how .sec-h { font-size: clamp(1.75rem, 1.8vw + 1.1rem, 2.6rem); }
.how__cols { margin-top: clamp(1.75rem, 3vw, 2.5rem); columns: 2 21rem; column-gap: clamp(2rem, 5vw, 5rem); }
.how__cols p { break-inside: avoid; margin-bottom: var(--space-lg); color: var(--color-ink-2); max-width: 52ch; }
.how__cols b { color: var(--color-ink); font-weight: 800; }

/* ---------- The test ---------- */
.test { padding-block: clamp(4rem, 7vw, 7rem); }
.test h2 { font-size: clamp(2.25rem, 3.4vw + 1rem, 4.25rem); font-weight: 900; letter-spacing: -0.038em; line-height: 1.04; max-width: 16ch; }
.hl { background: var(--color-ink); color: var(--color-paper); font-style: italic; padding: 0 0.2em 0.04em 0.14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.test p { margin-top: var(--space-lg); font-size: var(--text-md); line-height: 1.45; max-width: 52ch; color: var(--color-ink-2); }
@media (min-width: 64rem) {
  .test { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
  .test h2 { grid-row: 1 / span 2; }
  .test p { margin-top: 0.6rem; }
  .test p + p { margin-top: var(--space-md); }
}

/* ---------- The done-for-you offer under a report's verdict (10/23/2026, dd/skin.py hire_band; site and live pages) ---------- */
.hireband { background: var(--color-paper-2); border-top: var(--rule-slab); border-bottom: var(--rule-hair); padding-block: clamp(1.75rem, 3.5vw, 2.75rem); }
.hireband__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md) clamp(1.5rem, 4vw, 4rem); align-items: center; }
.hireband h2 { font-size: clamp(1.5rem, 1.5vw + 1rem, 2.4rem); font-weight: 900; letter-spacing: -0.032em; max-width: 26ch; }
.hireband p { margin-top: var(--space-xs); color: var(--color-ink-2); max-width: 60ch; }
.hireband .btn-ink { padding-block: 0.95rem; }
.hireband .btn-ink:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
@media (max-width: 47.99rem) {
  .hireband__in { grid-template-columns: minmax(0, 1fr); }
  .hireband .btn-ink { width: 100%; }
}
@media print { .hireband { display: none; } }

/* ---------- Ft5 statement footer ---------- */
.foot { border-top: var(--rule-slab); padding-block: clamp(3.5rem, 6vw, 5.5rem) var(--space-xl); }
.foot__line { font-family: var(--font-display); font-weight: 900; font-size: var(--c-foot-line); line-height: 1; letter-spacing: -0.04em; max-width: 17ch; }
.foot__cta { display: inline-block; margin-top: var(--space-lg); font-size: var(--text-md); }
.foot__meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl);
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: var(--space-md); border-top: var(--rule-hair);
  font-size: var(--text-sm); color: var(--color-muted);
}
.foot__meta .logo img { --logo-w: 96px; }
.foot__src { max-width: 62ch; }

/* ---------- Report poster: color follows the verdict ---------- */
.poster { padding-block: clamp(2.25rem, 4.5vw, 4rem) clamp(2.5rem, 4.5vw, 4rem); }
.poster--pass { background: var(--color-red); color: var(--color-on-red); }
.poster--buy  { background: var(--color-ink); color: var(--color-paper); }
.poster--test { background: var(--color-paper-2); color: var(--color-ink); }
.poster__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-lg); font-size: var(--text-sm); font-weight: 500; }
.poster__meta .mono { font-size: 0.95em; }
.poster h1 { margin-top: clamp(1.25rem, 3vw, 2.25rem); letter-spacing: normal; }
.poster__domain { display: block; font-weight: 900; font-style: italic; font-size: var(--c-poster-domain); line-height: 0.92; letter-spacing: -0.05em; padding-inline-end: 0.06em; }
.poster__sub { display: block; margin-top: var(--space-sm); font-weight: 800; font-size: clamp(1.15rem, 1vw + 0.9rem, 1.6rem); letter-spacing: -0.01em; }
.poster__call { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.poster__call .vbox { font-size: clamp(2.5rem, 4vw + 1rem, 4.5rem); }
.poster--pass .vbox { background: var(--color-paper); color: var(--color-red); }
.poster--buy .vbox  { background: var(--color-paper); color: var(--color-ink); }
.poster__reason { font-size: clamp(1.2rem, 1.2vw + 0.9rem, 1.9rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; max-width: 32ch; }
.poster__agree { margin-top: var(--space-md); font-size: var(--text-sm); font-weight: 500; }
.poster--pass :focus-visible, .poster--buy :focus-visible { outline-color: var(--color-paper); }

/* share row on the report poster (10/22/2026): Copy verdict, and on a live buy a copy without the domain.
   Hidden without JS (the buttons need the clipboard). White buttons on the red and ink posters, ink on the grey one. */
.share { display: none; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-lg); }
.js .share { display: flex; }
.share__btn {
  appearance: none; border: 0; border-radius: 0; cursor: pointer; min-height: 44px; padding: 0.55rem 1.05rem;
  background: var(--color-ink); color: var(--color-paper); font: inherit; font-weight: 800; font-size: var(--text-sm);
}
.share__btn:hover { background: var(--color-ink-2); }
.poster--pass .share__btn, .poster--buy .share__btn { background: var(--color-paper); color: var(--color-ink); }
.poster--pass .share__btn:hover, .poster--buy .share__btn:hover { background: var(--color-paper-2); }
.share__btn--quiet { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.share__btn--quiet:hover { background: transparent; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.poster--pass .share__btn--quiet, .poster--buy .share__btn--quiet { background: transparent; color: var(--color-paper); }
.poster--pass .share__btn--quiet:hover, .poster--buy .share__btn--quiet:hover { background: transparent; }
.share__note { flex: 1 1 100%; font-size: var(--text-sm); font-weight: 500; }
.share__text {
  flex-basis: 100%; max-width: 62rem; padding: 0.55rem 0.8rem; background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-data); font-size: var(--text-sm); overflow-wrap: anywhere; user-select: all;
}
.poster--test .share__text { box-shadow: inset 0 0 0 2px var(--color-ink); }

/* key numbers as a line, then the reasons and flags */
.keys { border-bottom: var(--c-rule-ink); }
.keys dl { display: flex; flex-wrap: wrap; gap: var(--space-sm) clamp(1.5rem, 4vw, 3.5rem); padding-block: clamp(1.25rem, 2.5vw, 1.75rem) var(--space-sm); margin: 0; }
.keys dl > div { display: flex; align-items: baseline; gap: 0.45em; }
.keys dd { margin: 0; order: -1; font-family: var(--font-display); font-weight: 900; font-size: var(--text-xl); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.keys dt { font-weight: 500; color: var(--color-ink-2); }
.keys .why { list-style: none; padding: var(--space-sm) 0 clamp(1.5rem, 2.8vw, 2rem); margin: 0; display: grid; gap: var(--space-xs); }
.why li { display: grid; grid-template-columns: 0.85rem minmax(0, 1fr); gap: var(--space-sm); align-items: baseline; color: var(--color-ink-2); max-width: 80ch; }
.why li::before { content: ""; width: 0.7rem; height: 0.7rem; box-shadow: inset 0 0 0 2px var(--color-ink); transform: translateY(0.05em); }
.why li.is-reason { color: var(--color-ink); font-weight: 700; }
.why li.is-reason::before { box-shadow: none; background: var(--color-ink); }
.why li.is-reason.is-pass::before { background: var(--color-red); }

/* ---------- Report tabs ---------- */
.report { padding-block: clamp(2rem, 4vw, 3rem) clamp(3.5rem, 6vw, 6rem); }
.tablist { display: none; flex-wrap: wrap; gap: var(--space-xs); padding-bottom: var(--space-lg); border-bottom: var(--c-rule-ink); }
.js .tablist { display: flex; }
.tab {
  appearance: none; border: 0; border-radius: 0; cursor: pointer; min-height: 44px; white-space: nowrap;
  padding: 0.65rem 1.1rem; background: var(--color-paper); color: var(--color-ink);
  box-shadow: inset 0 0 0 2px var(--color-ink); font-weight: 800; font-size: var(--text-base);
  transition: background-color var(--dur-micro) var(--ease-out);
}
.tab:hover { background: var(--color-paper-2); }
.tab:active { transform: translateY(1px); }
.tab[aria-selected="true"] { background: var(--color-ink); color: var(--color-paper); }
.panel { padding-block: clamp(2rem, 3.5vw, 3rem) var(--space-md); }
.panel + .panel { border-top: var(--c-rule-ink); }
.js .panel + .panel { border-top: 0; }
.panel h2 { font-size: clamp(1.75rem, 1.9vw + 1rem, 2.75rem); font-weight: 900; letter-spacing: -0.032em; max-width: 24ch; }
.panel h3 { font-size: var(--text-lg); font-weight: 900; letter-spacing: -0.02em; margin-top: clamp(2.25rem, 4vw, 3rem); }
.panel__lead { margin-top: var(--space-sm); font-size: var(--text-md); line-height: 1.45; max-width: 58ch; color: var(--color-ink-2); }
.panel p { max-width: 68ch; }
.panel .body { margin-top: var(--space-md); color: var(--color-ink-2); }

/* tables */
.tw { overflow-x: auto; margin-top: var(--space-lg); border-top: var(--c-rule-ink); }
.tw table { font-size: var(--text-sm); min-width: 40rem; }
.tw th {
  text-align: left; font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.75rem 1rem 0.65rem 0; border-bottom: var(--c-rule-thin-ink); white-space: nowrap; color: var(--color-ink);
}
.tw td { padding: 0.7rem 1rem 0.7rem 0; border-bottom: var(--rule-hair); vertical-align: top; line-height: 1.4; overflow-wrap: normal; }
.tw td.mono, .tw td.host, .tw td.n { white-space: nowrap; }
.tw td.mono, .tw td .mono { font-size: var(--text-xs); }
.tw td.n, .tw th.n { text-align: right; font-variant-numeric: tabular-nums; }
.tw td.host { font-weight: 700; }
.tw td.wrap-any { white-space: normal; overflow-wrap: anywhere; }
.tw tr.is-flag td { background: var(--color-red-wash); }
.tw tr.is-flag td:first-child { padding-left: 0.6rem; }
.tw .cut { display: block; max-width: 34ch; }
.tag { display: inline-block; font-weight: 800; font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.15em 0.45em; white-space: nowrap; box-shadow: inset 0 0 0 1.5px var(--color-ink); }
.tag--spam { background: var(--color-red); color: var(--color-on-red); box-shadow: none; }
.tag--real { background: var(--color-ink); color: var(--color-paper); box-shadow: none; }
.tag--quiet { color: var(--color-muted); box-shadow: inset 0 0 0 1.5px var(--color-rule); }
.tw-note { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* phones: every report table turns into stacked rows, labels from data-label */
@media (max-width: 40rem) {
  .tw { overflow: visible; }
  .tw table { min-width: 0; }
  .tw thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tw table, .tw tbody, .tw tr, .tw td { display: block; width: 100%; }
  .tw tr { padding-block: var(--space-sm); border-bottom: var(--rule-hair); }
  .tw td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-sm); padding: 0.2rem 0; border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .tw td.n { text-align: left; }
  .tw td::before { content: attr(data-label); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); padding-top: 0.15em; }
  .tw td:first-child { font-size: var(--text-base); }
  .tw .cut { max-width: none; }
  .tw tr.is-flag { background: var(--color-red-wash); padding-inline: var(--space-sm); }
  .tw tr.is-flag td { background: none; }
  .tw tr.is-flag td:first-child { padding-left: 0; }
}

/* bars */
.bars { list-style: none; padding: 0; margin: var(--space-lg) 0 0; display: grid; gap: var(--space-xs); max-width: 46rem; }
.bars li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 3.5rem; align-items: center; gap: var(--space-md); font-size: var(--text-sm); }
.bars__label { font-weight: 700; }
.bars__track { height: 0.95rem; background: var(--color-paper-2); }
.bars__fill { display: block; height: 100%; min-width: 2px; width: calc(var(--v) / var(--max-v) * 100%); background: var(--color-red); }
.bars__fill.is-real { background: var(--color-ink); }
.bars__fill.is-neutral { background: var(--color-muted); }
.bars__n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

/* chart: SVG draws the plot only; labels are HTML so they stay readable at any width */
.chart { margin: var(--space-lg) 0 0; border-top: var(--c-rule-ink); padding-top: var(--space-lg); max-width: 60rem; }
.chart__plot { position: relative; height: clamp(11rem, 22vw, 16rem); margin-inline-end: 0.5rem; }
.chart__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart__area { fill: var(--c-chart-area); }
.chart__line { fill: none; stroke: var(--color-ink); stroke-width: 2.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart__grid { stroke: var(--c-chart-grid); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.chart__base { stroke: var(--color-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.chart__y { position: absolute; left: 0; transform: translateY(-110%); font-family: var(--font-data); font-size: var(--text-xs); color: var(--color-muted); }
.chart__dot { position: absolute; left: var(--x); top: var(--y); width: 0.75rem; height: 0.75rem; transform: translate(-50%, -50%); background: var(--color-ink); }
.chart__dot--peak { background: var(--color-red); }
.chart__lab {
  position: absolute; right: 0; top: var(--y); transform: translateY(-160%);
  font-weight: 800; font-size: var(--text-sm); white-space: nowrap; background: var(--color-paper); padding: 0 0.3em;
}
.chart__ticks { position: relative; height: 1.6em; margin-inline-end: 0.5rem; margin-top: var(--space-xs); font-family: var(--font-data); font-size: var(--text-xs); color: var(--color-muted); }
.chart__ticks span { position: absolute; left: var(--x); transform: translateX(-50%); }
.chart__ticks span:first-child { transform: none; }
.chart figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); max-width: 68ch; }
@media (max-width: 30rem) { .chart__ticks span:nth-child(even) { visibility: hidden; } .chart__lab { font-size: var(--text-xs); } }

/* the read */
.read { margin-top: var(--space-lg); display: grid; gap: 0; border-top: var(--c-rule-ink); max-width: 60rem; }
.read > div { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-md); border-bottom: var(--rule-hair); }
.read dt { font-weight: 800; }
.read dd { margin: 0; color: var(--color-ink-2); }
.read dd ul { margin: 0; padding-left: 1.1em; }
.read .vbox { font-size: 1.05rem; margin-right: 0.4em; }

.dl-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }
.dl-row .btn-ink { padding-block: 1rem; }
.dl-row p { font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- Phones ---------- */
@media (max-width: 47.99rem) {
  ul.stack { padding-inline-start: 0; }
  .stack > li:nth-child(2) { margin-inline-start: 0.6rem; }
  .stack > li:nth-child(3) { margin-inline-start: 1.2rem; }
  .stack > li:nth-child(4) { margin-inline-start: 1.8rem; }
  .stack__note { margin-inline-start: 0; padding-inline-start: 0; }
  .check form { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .check .btn-ink { width: 100%; }
  .decl li { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
  .sample { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .read > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .bars li { grid-template-columns: 7.5rem minmax(0, 1fr) 2.75rem; gap: var(--space-sm); }
  .foot__meta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 23.5rem) {
  .slab__links .slab__cta { padding-inline: 0.8rem; }
}

/* ---------- DD engine pages: batch index, compare, backtest (dd-engine/dd/skin.py) ---------- */
.batchhead { background: var(--color-paper-2); border-bottom: var(--c-rule-ink); padding-block: clamp(2rem, 4vw, 3.25rem) clamp(1.75rem, 3vw, 2.5rem); }
.batchhead h1 { letter-spacing: normal; }
.batchhead__name { display: block; font-weight: 900; font-style: italic; font-size: clamp(2.25rem, 6vw, 5rem); line-height: 0.95; letter-spacing: -0.045em; }
.batchhead__note { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); max-width: 90ch; }
.vfilters { display: flex; flex-wrap: wrap; gap: var(--space-xs); border: 0; padding: 0; margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0; }
.vfilter { position: relative; cursor: pointer; }
.vfilter input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.vfilter__box {
  display: inline-flex; align-items: baseline; gap: 0.4em; min-height: 44px; padding: 0.6rem 1rem;
  font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: var(--text-md); letter-spacing: -0.02em;
  background: var(--color-paper); color: var(--color-ink); box-shadow: inset 0 0 0 2px var(--color-ink); white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.vfilter__box b { font-style: normal; font-weight: 700; font-family: var(--font-data); font-size: var(--text-sm); }
.vfilter:hover .vfilter__box { background: var(--color-paper-3); }
.vfilter input:checked + .vfilter__box { background: var(--color-ink); color: var(--color-paper); }
.vfilter input:focus-visible + .vfilter__box { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.vbox--s { font-size: var(--text-sm); padding: 0.18em 0.42em 0.22em 0.34em; }
.tw.batch table { min-width: 64rem; }
.tw td.nowrap { white-space: nowrap; }
.tw a.dom { font-weight: 800; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.tw a.dom:hover { text-decoration-color: var(--color-red); text-decoration-thickness: 2px; }
.tw tr[hidden] { display: none; }

details.more { margin-top: var(--space-lg); border-top: var(--rule-hair); padding-top: var(--space-sm); }
details.more > summary { cursor: pointer; font-weight: 800; list-style: none; display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; box-shadow: inset 0 0 0 2px var(--color-ink); font-weight: 900; line-height: 1; }
details.more[open] > summary::before { content: "\2212"; }
details.more > summary:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.body.bad { color: var(--color-red-deep); font-weight: 700; }

/* compare.html and backtest.html keep their own markup: these give it the skin */
.doc { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3.5rem, 6vw, 6rem); }
.doc h1 { font-size: clamp(2.25rem, 4vw + 1rem, 4rem); font-weight: 900; letter-spacing: -0.04em; margin-top: var(--space-xs); }
.doc h2 { font-size: clamp(1.5rem, 1.6vw + 1rem, 2.25rem); font-weight: 900; letter-spacing: -0.03em; margin-top: clamp(2.5rem, 4vw, 3.25rem); }
.doc > p { margin-top: var(--space-md); max-width: 80ch; color: var(--color-ink-2); }
.doc > p b { color: var(--color-ink); }
.doc .small { font-size: var(--text-sm); }
.doc .mut, .tw .mut { color: var(--color-muted); }
.ok { color: var(--color-ink); }
.warn { color: var(--color-ink-2); }
.bad { color: var(--color-red-deep); }
.tw .small { font-size: var(--text-xs); margin-top: var(--space-2xs); }
.badge {
  display: inline-flex; align-items: center; white-space: nowrap; line-height: 1; text-transform: lowercase;
  font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: var(--text-sm); letter-spacing: -0.02em;
  padding: 0.18em 0.42em 0.22em 0.34em;
}
.badge.buy { background: var(--color-ink); color: var(--color-paper); }
.badge.pass { background: var(--color-red); color: var(--color-on-red); }
.badge.test { background: var(--color-paper); color: var(--color-ink); box-shadow: inset 0 0 0 0.11em var(--color-ink); }

/* ---------- Print: the whole report, no navigation ---------- */
@media print {
  .slab, .menu-btn, .tablist, .skip, .foot__cta, .dl-row .btn-ink, .vfilters, .check form, .share { display: none !important; }
  .panel[hidden], .tw tr[hidden] { display: block !important; }
  .tw tr[hidden] { display: table-row !important; }
  .js .panel + .panel { border-top: var(--c-rule-ink); }
  .poster, .keys, .tag, .vbox, .badge, .bars__fill, .bars__track, .st--red, .st--ink, .check, .chart__area, .batchhead, .tw tr.is-flag td {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .tw { overflow: visible; }
  .tw table, .tw.batch table { min-width: 0; }
  tr, .read > div, .chart, .why li { break-inside: avoid; }
  .panel h2, .panel h3 { break-after: avoid; }
  body { font-size: 10.5pt; }
  .foot { border-top-width: 2px; padding-block: 1.5rem 0; }
  .foot__line { font-size: 1.6rem; }
}
.doc .tw td a { white-space: nowrap; font-weight: 800; }
@media (max-width: 40rem) {
  .doc .tw td { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 0.3rem; }
  .doc .tw td a { white-space: normal; overflow-wrap: anywhere; }
}
.tw.batch table { min-width: 60rem; }
.tw td.col-links { min-width: 12rem; }
.tw td.col-why { min-width: 20rem; white-space: normal; }
.tw td .why-t { display: block; font-weight: 700; color: var(--color-ink); margin-bottom: var(--space-2xs); }
.tw td .chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tw td .chips .tag { font-size: var(--text-xs); letter-spacing: 0.04em; }