/* Tested-fix guide: the Canada runtimes guide template (section nav, copy-exact blocks, tables that stack into labelled rows on a phone).
   Node.js 26/24/22 security-release status guide: forked from the Rails 8.1.4.1 / 8.0.5.2 guide stylesheet (XSLT sitemap < minimatch < pnpm 12
   < Bitwarden < appimagetool < Oracle GraalVM 25 < Kubernetes CronJob < Spring < Cuba < Camunda < n8n < APScheduler < PHP2Shell check
   < OBS 33), set in the PHP security-release guide's verdict language: a filled square repeats each answer in shape as well as colour. */
article.tzg-guide { max-width: 72rem; margin-inline: auto; }
/* The H1 is a question in display type, about 75 characters: balanced, two or three lines at desktop. Its floor is 1.625rem, as on the
   sibling guides. The three fixed versions stay whole, in even figures, so a phone never splits 24.22.1 at a dot (the PHP guide's rule). */
article.tzg-guide h1 { max-width: 28ch; font-size: clamp(1.625rem, 1rem + 3vw, 3.5rem); line-height: 1.06; text-wrap: balance; }
.tzg-guide h1 .nd-v { white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
/* the intro keeps the reading measure */
article.tzg-guide .results-intro { max-width: none; }
article.tzg-guide .results-intro > [data-article-intro] > * { max-width: var(--cn-reading-max); }
/* the kicker date stays one unit on a phone */
.tzg-guide .results-intro .eyebrow time { white-space: nowrap; }
.tzg-guide .guide-byline { color: var(--wp-muted); margin: 0 0 var(--wp-8); }
.tzg-guide .guide-body { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--wp-16); margin-top: var(--wp-12); border-top: var(--wp-rule-strong) solid var(--wp-ink); }
.tzg-guide .guide-nav { padding-top: var(--wp-8); }
.tzg-guide .guide-nav ol { list-style: decimal-leading-zero; padding-left: var(--wp-6); margin: 0; }
.tzg-guide .guide-nav li { padding-left: var(--wp-2); margin-bottom: var(--wp-4); }
.tzg-guide .guide-nav li::marker { font-family: var(--wp-font-mono); color: var(--wp-muted); }
.tzg-guide .guide-nav a { display: inline-flex; align-items: center; min-height: var(--wp-tap); line-height: 1.5; }
.tzg-guide .guide-back { margin-top: var(--wp-4); }
.tzg-guide .guide-reading { min-width: 0; }
article.tzg-guide .results-section:first-child { border-top: 0; margin-top: 0; }
article.tzg-guide .results-section, article.tzg-guide .results-section h3[id] { scroll-margin-top: var(--wp-8); }
/* copy-paste blocks keep every line whole: long lines scroll inside the frame, so a wrap is never read as a new line */
/* .875rem at every width, as on the Camunda guide; check.sh's long lines (up to 182 characters) scroll inside the frame, so it takes focus */
article.tzg-guide .check-block { font-size: .875rem; white-space: pre; overflow-x: auto; overscroll-behavior-x: contain; tab-size: 4; }
article.tzg-guide .check-block:focus-visible { outline: 3px solid var(--cn-color-amber); outline-offset: 3px; }
article.tzg-guide .check-block code { font-size: 1em; }
/* a path breaks only at a slash, never at the hyphen in static-debian13 */
.tzg-guide .tzg-nobreak { white-space: nowrap; }
/* Narrower than 20rem happens only with enlarged text (at 100% the page is at least 320px): there a name wider than the line wraps inside its own box instead of crossing the screen. */
@container page (max-width: 19.99rem) { .tzg-guide .tzg-nobreak { display: inline-block; max-width: 100%; overflow-wrap: anywhere; text-decoration: inherit; white-space: normal; } }
/* a checksum breaks between any two digits rather than push the page wide; a copy is still one string */
.tzg-guide .tzg-hash { word-break: break-all; }

/* the intro: the lede (the fix), then where the evidence is */
article.tzg-guide .lede code { white-space: normal; }
article.tzg-guide .tzg-intro { max-width: 44em; font-size: var(--wp-text-body); line-height: 1.6; margin: 0 0 var(--wp-4); }
/* tables: ledger lines, mono heads; a row that failed keeps the same weight, only its chip changes */
.tzg-guide .tzg-table-wrap { margin: var(--wp-6) 0 var(--wp-8); }
.tzg-guide table.tzg-table { min-width: 0; width: 100%; border: 0; border-collapse: collapse; font-size: var(--wp-text-ledger); line-height: 1.5; }
.tzg-guide .tzg-table th, .tzg-guide .tzg-table td { border: 0; border-bottom: var(--wp-rule) solid var(--wp-hair); padding: var(--wp-3) var(--wp-4) var(--wp-3) 0; text-align: left; vertical-align: top; background: none; }
.tzg-guide .tzg-table th:last-child, .tzg-guide .tzg-table td:last-child { padding-right: 0; }
.tzg-guide .tzg-table thead th { font: 500 var(--wp-text-cite)/1.3 var(--wp-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp-muted); border-bottom: var(--wp-rule-strong) solid var(--wp-ink); vertical-align: bottom; }
.tzg-guide .tzg-table tbody th { font-weight: 600; }
/* An inline link in a cell gets a 48px hit area with no line moved (KSK guide rule). */
.tzg-guide .tzg-table td a { padding: 15px; margin-inline: -15px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tzg-guide .tzg-table td a:focus-visible { outline-offset: -13px; }
/* Tags and commands keep their case in every head: php:8.5.12 is never set as PHP:8.5.12 */
.tzg-guide .tzg-table thead code { text-transform: none; letter-spacing: 0; }
/* a source path (anthropic/resources/messages/messages.py) is one name: it breaks only at its <wbr>, after a slash */
.tzg-guide .oa-path { white-space: normal; }
/* The closing paragraph says who prepared the page and where to send a correction: body text at every width, set apart under a hairline */
article.tzg-guide .pk-signoff { margin-top: var(--wp-8); padding-top: var(--wp-4); border-top: var(--wp-rule) solid var(--wp-hair); }
/* code in a head or a cell wraps at its spaces (zone = "America/New_York"), never inside a name */
.tzg-guide .tzg-table code { white-space: normal; }


/* one column up to 62.5rem, as on the runtimes guide: below it the nav column leaves the reading column too narrow for the receipts */
@container page (max-width: 62.5rem) {
  .tzg-guide .guide-body { grid-template-columns: minmax(0, 1fr); gap: var(--wp-8); }
  .tzg-guide .guide-nav { padding-top: var(--wp-6); border-bottom: var(--wp-rule) solid var(--wp-ink); padding-bottom: var(--wp-6); }
  .tzg-guide .guide-nav li { margin-bottom: var(--wp-2); }
  article.tzg-guide .results-section:first-child { padding-top: 0; }
}
@container page (max-width: 43rem) {
  /* two-digit markers need the room on a phone gutter */
  .tzg-guide .guide-nav ol { padding-left: 2.5rem; }
}

/* closing panel: the feed for the next fix. It closes the article under the same strong rule as the body, and only the address is cobalt, because cobalt is the action */
.tzg-guide .fix-feed { grid-column: 2; margin: var(--wp-12) 0 var(--wp-12); padding-top: var(--wp-6); border-top: var(--wp-rule-strong) solid var(--wp-ink); }
.tzg-guide .fix-feed-label { margin: 0 0 var(--wp-3); color: var(--wp-muted); font: 500 var(--wp-text-cite)/1.2 var(--wp-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.tzg-guide .fix-feed h2 { margin: 0 0 var(--wp-4); max-width: 16ch; font: 600 var(--wp-text-title)/1.02 var(--wp-font-display); letter-spacing: -0.02em; text-wrap: balance; }
.tzg-guide .fix-feed p { max-width: 50ch; }
.tzg-guide .fix-feed-url { margin: var(--wp-6) 0 var(--wp-2); }
/* the address is the action: a cobalt slip in the mono face, so it can be read, copied or followed */
.tzg-guide .fix-feed-url a { display: inline-flex; align-items: center; min-height: var(--wp-tap); padding: var(--wp-2) var(--wp-4); background: var(--wp-bio); color: var(--wp-on-bio); font: 500 1rem/1.3 var(--wp-font-mono); text-decoration: none; }
.tzg-guide .fix-feed-url a:hover { background: var(--wp-cobalt-deep); text-decoration: underline; text-underline-offset: 4px; }
.tzg-guide .fix-feed-more a { display: inline-flex; align-items: center; min-height: var(--wp-tap); padding-right: var(--wp-6); position: relative; color: var(--wp-ink); font-weight: 600; text-decoration-thickness: var(--wp-rule-strong); text-underline-offset: 5px; }
/* positioned, so the link underline stops before the arrow, as on .more */
.tzg-guide .fix-feed-more a::after { content: "→"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
@container page (max-width: 62.5rem) {
  .tzg-guide .fix-feed { grid-column: auto; margin-top: var(--wp-8); }
}
@container page (max-width: 30rem) {
  .tzg-guide .fix-feed-url a { font-size: .9375rem; padding-inline: var(--wp-3); }
}
/* weekly email: the second way to follow, under the feed panel in the reading column; quiet next to the fix */
/* the grid's row gap already separates them: pull the card up so it reads as the feed's companion */
.tzg-guide .fix-feed:has(+ .mq-signup) { margin-bottom: 0; }
.tzg-guide .mq-signup { grid-column: 2; display: grid; gap: var(--wp-3); max-width: 40rem; margin: calc(var(--wp-8) - var(--wp-16)) 0 var(--wp-12); padding: var(--wp-6); background: var(--wp-panel); border: var(--wp-rule) solid var(--wp-ink); }
.tzg-guide .mq-signup p { margin: 0; max-width: 50ch; }
.tzg-guide .mq-signup-title { font: 600 1.5rem/1.1 var(--wp-font-display); letter-spacing: -0.01em; text-wrap: balance; }
/* one field; the button sits beside it on wide screens and under it on phones */
.tzg-guide .mq-signup-label { font-weight: 700; line-height: 1.25; margin-bottom: -.25rem; }
.tzg-guide .mq-signup-row { display: flex; flex-wrap: wrap; gap: var(--wp-2); }
.tzg-guide .mq-signup-row input { flex: 1 1 14rem; min-width: 0; min-height: var(--wp-tap); padding: 0 .75rem; background: var(--wp-paper); border: 2px solid var(--wp-ink); border-radius: 0; color: var(--wp-ink); font: inherit; }
/* square, in the feed chip's cobalt: one action language on the page (form. outranks the global pill button) */
.tzg-guide form.mq-signup .mq-signup-row button { flex: 0 0 auto; min-height: var(--wp-tap); padding: 0 var(--wp-4); background: var(--wp-bio); border: 2px solid var(--wp-bio); border-radius: 0; color: var(--wp-on-bio); cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.tzg-guide form.mq-signup .mq-signup-row button:hover { background: var(--wp-cobalt-deep); border-color: var(--wp-cobalt-deep); text-decoration: underline; text-underline-offset: 4px; }
.tzg-guide .mq-signup-fine { color: var(--wp-muted); font-size: .9375rem; line-height: 1.5; overflow-wrap: anywhere; }
.tzg-guide .mq-signup-fine a { color: inherit; }
@container page (max-width: 62.5rem) {
  .tzg-guide .mq-signup { grid-column: auto; margin-top: 0; }
}
@container page (max-width: 30rem) {
  .tzg-guide .mq-signup { padding: var(--wp-4); }
  .tzg-guide .mq-signup-row input, .tzg-guide form.mq-signup .mq-signup-row button { flex-basis: 100%; }
}
/* the weekly email form follows the fix in the reading column, as on the guides that had no form */
.tzg-guide .guide-reading > .mq-signup { grid-column: auto; margin: var(--wp-12) 0 0; }
/* Bullets under the check and the channel table: each one starts with its case in bold, so the list reads as a key */
article.tzg-guide ul.nd-list { margin: var(--wp-4) 0 var(--wp-6); padding-left: 1.25rem; }
article.tzg-guide ul.nd-list > li { padding-left: var(--wp-1); }
article.tzg-guide ul.nd-list > li + li { margin-top: var(--wp-3); }
article.tzg-guide ul.nd-list > li::marker { color: var(--wp-muted); }
article.tzg-guide .results-section > .check-block { margin: var(--wp-4) 0 var(--wp-6); }
/* dpkg-query's TAB is page text: a gap of two figures in code, copied as a TAB */
.tzg-guide .nd-tab { white-space: pre; tab-size: 2; }

/* The verdict, the PHP guide's language: the words carry it and a square before them repeats it in shape as well as colour.
   Filled cobalt = "Yes" / a fixed release exists for that line; filled rust = "No" / no release. Tracker words, Unknown and the dash
   carry no square: they are not our verdict. */
.tzg-guide .nd-verdict { display: inline-block; position: relative; padding-left: 1.25em; }
.tzg-guide .nd-verdict::before { content: ""; position: absolute; left: 0; top: .32em; width: .72em; height: .72em; box-sizing: border-box; border: 2px solid var(--wp-ink); }
.tzg-guide .nd-verdict.is-yes::before { background: var(--wp-bio); border-color: var(--wp-bio); }
.tzg-guide .nd-verdict.is-no { color: var(--wp-rust); font-weight: 600; }
.tzg-guide .nd-verdict.is-no::before { background: var(--wp-rust); border-color: var(--wp-rust); }
.tzg-guide .nd-quiet { color: var(--wp-muted); }

/* Release lines: the answer to the search, three short columns at reading size and a table at every width. The line and the fixed
   release are the values a reader compares with, so they are mono; "end of life" and the affected list read as notes. */
.tzg-guide .nd-lines-wrap { margin-top: var(--wp-8); max-width: 44rem; }
.tzg-guide table.nd-lines { font-size: var(--wp-text-body); }
.tzg-guide .nd-lines tbody th, .tzg-guide .nd-lines td { font-family: var(--wp-font-mono); font-weight: 400; font-variant-numeric: tabular-nums; }
.tzg-guide .nd-lines tbody th { width: 36%; font-weight: 500; }
.tzg-guide .nd-lines td:nth-child(2) { width: 30%; }
.tzg-guide .nd-lines td:nth-child(3) { color: var(--wp-muted); font-size: var(--wp-text-ledger); }
@container page (max-width: 30rem) {
  .tzg-guide table.nd-lines { font-size: var(--wp-text-ledger); }
  /* at 320 "22 (Maintenance LTS)" takes two lines in the first column; the version keeps its square (the square's span wraps whole) */
  .tzg-guide .nd-lines tbody th { width: 38%; }
  .tzg-guide .nd-lines td:nth-child(2) { width: 34%; }
  .tzg-guide .nd-lines :is(th, td) { padding-right: var(--wp-3); }
  .tzg-guide .nd-lines thead th { letter-spacing: .02em; }
}

/* 11-11: the filled "affected" words ("eleven of the sixteen vulnerabilities") are wider than a 320 column holds beside the line and its
   version (349px in 280). When the table's own width is under 24rem each row is two lines: the line and its fixed version side by
   side, then nodejs.org's words under them. The head row takes the same shape, so each head still sits over its value. */
.tzg-guide .nd-lines-wrap { container-type: inline-size; container-name: nd-lines; }
@container nd-lines (max-width: 23.99rem) {
  .tzg-guide table.nd-lines, .tzg-guide table.nd-lines :is(thead, tbody) { display: block; }
  .tzg-guide table.nd-lines tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--wp-3); padding: var(--wp-3) 0; border-bottom: var(--wp-rule) solid var(--wp-hair); }
  .tzg-guide table.nd-lines thead tr { border-bottom: var(--wp-rule-strong) solid var(--wp-ink); }
  .tzg-guide table.nd-lines :is(thead, tbody) :is(th, td):nth-child(n) { display: block; width: auto; border: 0; padding: 0; }
  .tzg-guide table.nd-lines :is(thead, tbody) :is(th, td):nth-child(3) { grid-column: 1 / -1; margin-top: var(--wp-1); }
}
/* Channels: where a reader's Node comes from, what was recorded for the October release, the difference from nodejs.org's file
   timestamps, and the evidence. The difference is the column a reader scans, so it is mono. A table where it has the room by its own
   width (the reading column beside the nav is narrower than the page); under 46rem each channel is a card: its name, then each value
   under its head. */
.tzg-guide .nd-channels-wrap, .tzg-guide .nd-status-wrap, .tzg-guide .nd-distro-wrap, .tzg-guide .nd-receipts-wrap { container-type: inline-size; }
.tzg-guide .nd-channels-wrap { container-name: nd-channels; }
.tzg-guide .nd-channels td:nth-child(3) { font-family: var(--wp-font-mono); font-variant-numeric: tabular-nums; }
.tzg-guide .nd-lag.is-not { color: var(--wp-rust); font-weight: 600; }
@container nd-channels (min-width: 46rem) {
  .tzg-guide table.nd-channels { table-layout: fixed; }
  .tzg-guide .nd-channels thead th:nth-child(1) { width: 25%; }
  .tzg-guide .nd-channels thead th:nth-child(2) { width: 29%; }
  .tzg-guide .nd-channels thead th:nth-child(3) { width: 18%; }
  .tzg-guide .nd-channels thead th:nth-child(4) { width: 28%; }
  .tzg-guide .nd-channels tbody th { font-weight: 500; }
}
/* Status: Growth's dated reads, one row per channel, a column per release line and the read time. Same rule: a table by its own
   width; under 46rem each channel is a card whose three lines sit side by side under their heads, so 26, 24 and 22 still compare
   across, and the read time closes the card. */
.tzg-guide .nd-status-wrap { container-name: nd-status; }
.tzg-guide .nd-status td { font-variant-numeric: tabular-nums; }
.tzg-guide .nd-status .nd-read { font-family: var(--wp-font-mono); color: var(--wp-muted); white-space: nowrap; }
@container nd-status (min-width: 46rem) {
  .tzg-guide table.nd-status { table-layout: fixed; }
  .tzg-guide .nd-status thead th:nth-child(1) { width: 31%; }
  .tzg-guide .nd-status thead th:is(:nth-child(2), :nth-child(3), :nth-child(4)) { width: 18%; }
  .tzg-guide .nd-status thead th:nth-child(5) { width: 15%; }
  .tzg-guide .nd-status tbody th { font-weight: 500; }
}
.tzg-guide .nd-receipts-wrap { container-name: nd-receipts; }
@container nd-receipts (min-width: 46rem) {
  .tzg-guide table.nd-receipts { table-layout: fixed; }
  .tzg-guide .nd-receipts thead th:nth-child(1) { width: 30%; }
  .tzg-guide .nd-receipts thead th:nth-child(2) { width: 32%; }
  .tzg-guide .nd-receipts tbody th { font-weight: 400; }
}
/* the card form, shared by the three: table roles are set in the markup, so screen readers keep the table and its own headers; the
   repeated head is drawn by CSS with empty alt text, so it is not read twice */
@container nd-channels (max-width: 45.99rem) {
  .tzg-guide .nd-channels, .tzg-guide .nd-channels :is(tbody, tr, th, td) { display: block; width: auto; }
  .tzg-guide .nd-channels thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tzg-guide .nd-channels tbody { border-top: var(--wp-rule-strong) solid var(--wp-ink); max-width: 44rem; }
  .tzg-guide .nd-channels tr { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--wp-3); padding: var(--wp-4) 0 var(--wp-5, 1.25rem); border-bottom: var(--wp-rule) solid var(--wp-hair); }
  .tzg-guide .nd-channels :is(th, td) { border: 0; padding: 0; width: auto; white-space: normal; }
  .tzg-guide .nd-channels tbody th { grid-column: 1 / -1; font-size: var(--wp-text-body); line-height: 1.4; font-weight: 600; }
  .tzg-guide .nd-channels td::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: var(--wp-1); font: 500 var(--wp-text-cite)/1.35 var(--wp-font-mono); color: var(--wp-muted); }
}
@container nd-status (max-width: 45.99rem) {
  .tzg-guide .nd-status, .tzg-guide .nd-status :is(tbody, tr, th, td) { display: block; width: auto; }
  .tzg-guide .nd-status thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tzg-guide .nd-status tbody { border-top: var(--wp-rule-strong) solid var(--wp-ink); max-width: 44rem; }
  .tzg-guide .nd-status tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--wp-3); row-gap: var(--wp-3); padding: var(--wp-4) 0 var(--wp-5, 1.25rem); border-bottom: var(--wp-rule) solid var(--wp-hair); }
  .tzg-guide .nd-status :is(th, td) { border: 0; padding: 0; width: auto; white-space: normal; }
  .tzg-guide .nd-status tbody th { grid-column: 1 / -1; font-size: var(--wp-text-body); line-height: 1.4; font-weight: 600; }
  .tzg-guide .nd-status td.nd-span, .tzg-guide .nd-status td.nd-read { grid-column: 1 / -1; }
  .tzg-guide .nd-status td::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: var(--wp-1); font: 500 var(--wp-text-cite)/1.35 var(--wp-font-mono); color: var(--wp-muted); }
  /* the read time is one quiet line under the values: its head beside it, not above */
  .tzg-guide .nd-status td.nd-read::before { display: inline; margin: 0 .5em 0 0; }
}
/* Distribution packages: the vendor's tracker words for one named CVE, quoted, never a square; a table where it has the room, a card
   (package, status, then the read time on one quiet line) under 46rem */
.tzg-guide .nd-distro-wrap { container-name: nd-distro; }
.tzg-guide .nd-distro .nd-read { font-family: var(--wp-font-mono); color: var(--wp-muted); white-space: nowrap; }
@container nd-distro (min-width: 46rem) {
  .tzg-guide table.nd-distro { table-layout: fixed; }
  .tzg-guide .nd-distro thead th:nth-child(1) { width: 31%; }
  .tzg-guide .nd-distro thead th:nth-child(2) { width: 54%; }
  .tzg-guide .nd-distro thead th:nth-child(3) { width: 15%; }
  .tzg-guide .nd-distro tbody th { font-weight: 500; }
}
@container nd-distro (max-width: 45.99rem) {
  .tzg-guide .nd-distro, .tzg-guide .nd-distro :is(tbody, tr, th, td) { display: block; width: auto; }
  .tzg-guide .nd-distro thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tzg-guide .nd-distro tbody { border-top: var(--wp-rule-strong) solid var(--wp-ink); max-width: 44rem; }
  .tzg-guide .nd-distro tr { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--wp-3); padding: var(--wp-4) 0 var(--wp-5, 1.25rem); border-bottom: var(--wp-rule) solid var(--wp-hair); }
  .tzg-guide .nd-distro :is(th, td) { border: 0; padding: 0; width: auto; white-space: normal; }
  .tzg-guide .nd-distro tbody th { font-size: var(--wp-text-body); line-height: 1.4; font-weight: 600; }
  .tzg-guide .nd-distro td::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: var(--wp-1); font: 500 var(--wp-text-cite)/1.35 var(--wp-font-mono); color: var(--wp-muted); }
  .tzg-guide .nd-distro td.nd-read::before { display: inline; margin: 0 .5em 0 0; }
}
/* nodejs.org's list: one row per vulnerability, in nodejs.org's own words. The ID is mono and one token; severity is a word, never a
   colour. A table where it has the room; under 46rem a card: the title, then ID, severity and lines on one row under their heads. */
.tzg-guide .nd-vendor-wrap { container-type: inline-size; container-name: nd-vendor; }
.tzg-guide .nd-vendor .nd-cve { font-family: var(--wp-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tzg-guide .nd-vendor .nd-sev.is-critical, .tzg-guide .nd-vendor .nd-sev.is-high { font-weight: 600; }
@container nd-vendor (min-width: 46rem) {
  .tzg-guide table.nd-vendor { table-layout: fixed; }
  .tzg-guide .nd-vendor thead th:nth-child(1) { width: 49%; }
  .tzg-guide .nd-vendor thead th:nth-child(2) { width: 19%; }
  .tzg-guide .nd-vendor thead th:nth-child(3) { width: 12%; }
  .tzg-guide .nd-vendor thead th:nth-child(4) { width: 20%; }
  .tzg-guide .nd-vendor tbody th { font-weight: 400; }
}
@container nd-vendor (max-width: 45.99rem) {
  .tzg-guide .nd-vendor, .tzg-guide .nd-vendor :is(tbody, tr, th, td) { display: block; width: auto; }
  .tzg-guide .nd-vendor thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tzg-guide .nd-vendor tbody { border-top: var(--wp-rule-strong) solid var(--wp-ink); max-width: 44rem; }
  /* ID, severity and lines sit on one row while they fit; at 320 the lines drop to their own row instead of clipping their head */
  .tzg-guide .nd-vendor tr { display: flex; flex-wrap: wrap; column-gap: var(--wp-5, 1.25rem); row-gap: var(--wp-2); padding: var(--wp-4) 0 var(--wp-5, 1.25rem); border-bottom: var(--wp-rule) solid var(--wp-hair); }
  .tzg-guide .nd-vendor td { flex: 0 0 auto; white-space: nowrap; }
  .tzg-guide .nd-vendor :is(th, td) { border: 0; padding: 0; width: auto; }
  .tzg-guide .nd-vendor tbody th { flex: 1 0 100%; font-size: var(--wp-text-body); line-height: 1.4; font-weight: 500; white-space: normal; }
  .tzg-guide .nd-vendor td::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: var(--wp-1); font: 500 var(--wp-text-cite)/1.35 var(--wp-font-mono); color: var(--wp-muted); }
  /* the heads are long ("Lines nodejs.org lists as affected"); on the card they are the short words */
  .tzg-guide .nd-vendor td.nd-aff::before { content: "Affected"; content: "Affected" / ""; }
}
/* the status block's dated line ("Last read: 4 Nov 2026, 10:45 UTC."): the table's caption, in the mono face, set apart above it */
article.tzg-guide .nd-lastread { margin: var(--wp-6) 0 0; font: 500 var(--wp-text-ledger)/1.4 var(--wp-font-mono); font-variant-numeric: tabular-nums; }
article.tzg-guide .nd-lastread + .tzg-table-wrap { margin-top: var(--wp-3); }
@container nd-receipts (max-width: 45.99rem) {
  .tzg-guide .nd-receipts, .tzg-guide .nd-receipts :is(tbody, tr, th, td) { display: block; width: auto; }
  .tzg-guide .nd-receipts thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tzg-guide .nd-receipts tbody { border-top: var(--wp-rule-strong) solid var(--wp-ink); max-width: 44rem; }
  .tzg-guide .nd-receipts tr { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--wp-2); padding: var(--wp-4) 0 var(--wp-5, 1.25rem); border-bottom: var(--wp-rule) solid var(--wp-hair); }
  .tzg-guide .nd-receipts :is(th, td) { border: 0; padding: 0; width: auto; white-space: normal; }
  .tzg-guide .nd-receipts tbody th { grid-column: 1 / -1; font-size: var(--wp-text-body); line-height: 1.4; font-weight: 500; }
  .tzg-guide .nd-receipts td + td { margin-top: var(--wp-2); }
  .tzg-guide .nd-receipts td::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: var(--wp-1); font: 500 var(--wp-text-cite)/1.35 var(--wp-font-mono); color: var(--wp-muted); }
}

/* Staging only (a release page has no marker; the converter refuses one): each ⟦SLOT⟧ shows as an amber-edged mark, a slot that
   stands for a whole block is a dashed box, and a link whose address is a slot is inert, underlined in dashes. */
.tzg-guide .nd-slot { padding: 0 .2em; color: var(--wp-ink); background: color-mix(in srgb, var(--cn-color-amber) 22%, transparent); outline: 1px solid var(--cn-color-amber); font-family: var(--wp-font-mono); font-size: .875em; font-weight: 500; }
.tzg-guide .nd-slot-block { padding: var(--wp-6) var(--wp-4); border: 2px dashed var(--cn-color-amber); text-align: center; }
.tzg-guide .nd-slot-link { text-decoration: underline dashed var(--cn-color-amber); text-underline-offset: 4px; }