/* Tested-fix guide: the Canada runtimes guide template (section nav, copy-exact blocks, feed panel).
   basic-ftp CVE-2026-126345 guide: forked from the dnspython guide stylesheet (two-part H1, ledger tables that become one block per
   row on a phone, feed panel, next-step panel), with the intro's two restrictions as the numbered ruled list. */
article.tzg-guide { max-width: 72rem; margin-inline: auto; }
/* The H1 opens with what a developer searches: the package, set in the mono face as it is typed in code, and the CVE ID in the alarm
   colour, held whole. The question follows on its own line in the display face, a step down. Nothing is cut. */
article.tzg-guide h1 { max-width: none; font-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem); line-height: 1.06; }
article.tzg-guide h1 .ss-h1a { display: block; max-width: 20ch; }
article.tzg-guide h1 .ss-h1pkg { font-family: var(--wp-font-mono); font-weight: 500; font-size: .84em; letter-spacing: -0.03em; white-space: nowrap; }
article.tzg-guide h1 .ss-h1cve { color: var(--wp-rust); white-space: nowrap; }
article.tzg-guide h1 .ss-h1b { display: block; margin-top: var(--wp-3); max-width: 30ch; font-size: clamp(1.25rem, .9rem + 1.2vw, 1.8rem); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
/* 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; the override command's line scrolls inside the frame, so that block 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 (what the reader sees), the paragraph that counts the two restrictions, the two as a ruled list under a strong
   rule, numbered in the mono face in a hanging gutter, each a bold name and its evidence; then where the chain comes from. */
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); }
article.tzg-guide ul.ss-four { list-style: none; counter-reset: ss-four; margin: var(--wp-4) 0 0; padding: 0; border-top: var(--wp-rule-strong) solid var(--wp-ink); }
article.tzg-guide ul.ss-four > li { counter-increment: ss-four; position: relative; margin: 0; padding: var(--wp-4) 0 var(--wp-4) 2.75rem; border-bottom: var(--wp-rule) solid var(--wp-hair); line-height: 1.55; }
article.tzg-guide ul.ss-four > li::before { content: counter(ss-four, decimal-leading-zero); content: counter(ss-four, decimal-leading-zero) / ""; position: absolute; left: 0; top: calc(var(--wp-4) + .1em); font: 500 var(--wp-text-cite)/1.4 var(--wp-font-mono); color: var(--wp-rust); letter-spacing: .04em; }
article.tzg-guide .tzg-intro.bf-after { margin-top: var(--wp-6); }
@container page (max-width: 30rem) { article.tzg-guide ul.ss-four > li { padding-left: 2.25rem; } }

/* tables: ledger lines, mono heads (the Anthropic guide's pattern) */
.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; }
.tzg-guide .tzg-table tbody th code { font-weight: 400; }
/* The advisories: each row head is the advisory link, the CVE (the name a reader searched) over its GHSA alias, muted (what npm audit
   and Dependabot print), and the older advisory's severity note under them. The first fixed release is the row's answer, so it is
   set in weight. The link is a block of two lines, so its target is at least 48 px tall. */
.tzg-guide .bf-adv .bf-advlink { display: inline-block; padding-block: var(--wp-1); }
.tzg-guide .bf-adv .bf-ghsa { display: block; font-weight: 400; font-size: var(--wp-text-cite); }
.tzg-guide .bf-adv .bf-advlink:not(:hover, :focus-visible) .bf-ghsa { color: var(--wp-muted); }
.tzg-guide .bf-adv .bf-sev { display: block; margin-top: var(--wp-1); font-weight: 400; color: var(--wp-muted); font-size: var(--wp-text-cite); }
.tzg-guide .bf-adv .bf-c2 { font-weight: 600; }
/* The fixture table: the same four tests on 5.3.1 and on 6.2.6. A 5.3.1 cell where the test failed carries the alarm edge (the
   colour of the CVE in the H1); 6.2.6 and the HTTP control stay ink. */
/* every 5.3.1 cell keeps the edge's indent, so the column's text lines up whether or not its row failed */
.tzg-guide .bf-fix .bf-c1 { padding-left: var(--wp-3); }
.tzg-guide .bf-fix .bf-fail { box-shadow: inset 3px 0 0 var(--wp-rust); }
/* fixed layout sizes columns from the head row, so the widths are set on head and body cells alike */
@container page (min-width: 54.0625rem) {
  .tzg-guide .bf-adv { table-layout: fixed; }
  .tzg-guide .bf-adv tr > :nth-child(1) { width: 30%; }
  .tzg-guide .bf-adv tr > :nth-child(2) { width: 14%; }
  .tzg-guide .bf-adv tr > :nth-child(3) { width: 14%; }
  .tzg-guide .bf-fix { table-layout: fixed; }
  .tzg-guide .bf-fix tr > :nth-child(1) { width: 40%; }
  .tzg-guide .bf-fix tr > :nth-child(2) { width: 30%; }
  .tzg-guide .bf-fix thead th:nth-child(2) { padding-left: var(--wp-3); }
}
/* Below 54rem a 3- or 4-column row squeezes each cell to a few words a line. Each row becomes a block: the row head as its title,
   then each cell under its column head. 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 page (max-width: 54rem) {
  .tzg-guide .tzg-table, .tzg-guide .tzg-table tbody, .tzg-guide .tzg-table tr, .tzg-guide .tzg-table th, .tzg-guide .tzg-table td { display: block; width: auto; }
  .tzg-guide .tzg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tzg-guide .tzg-table tbody { border-top: var(--wp-rule-strong) solid var(--wp-ink); }
  .tzg-guide .tzg-table tr { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--wp-3); padding: var(--wp-4) 0 var(--wp-6); border-bottom: var(--wp-rule) solid var(--wp-hair); }
  .tzg-guide .tzg-table th, .tzg-guide .tzg-table td { border: 0; padding: 0; width: auto; white-space: normal; }
  .tzg-guide .tzg-table td::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: var(--wp-1); font: 500 var(--wp-text-cite)/1.3 var(--wp-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp-muted); }
  .tzg-guide .tzg-table tbody th { font-size: var(--wp-text-body); line-height: 1.4; }
  /* the advisories: the advisory link as the row's title, then its two versions side by side, then what the advisory describes */
  .tzg-guide .bf-adv tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--wp-4); }
  .tzg-guide .bf-adv tbody th, .tzg-guide .bf-adv .bf-c3 { grid-column: 1 / -1; }
  /* the fixtures: the test as the row's title, then 5.3.1 beside 6.2.6, so each row still reads as a before and after */
  .tzg-guide .bf-fix tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--wp-4); }
  .tzg-guide .bf-fix tbody th { grid-column: 1 / -1; font-family: inherit; }
  .tzg-guide .bf-fix .bf-c1 { padding-left: var(--wp-3); }
}
/* the narrowest column (enlarged text): one cell per line */
@container page (max-width: 21rem) {
  .tzg-guide .bf-adv tr, .tzg-guide .bf-fix tr { grid-template-columns: minmax(0, 1fr); }
}
/* 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; }
}
/* 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); }
}
/* lists: the untested list (one line each) gets a little air; the three exposure questions are a sentence or three each, so they
   get a paragraph's worth */
article.tzg-guide .results-section > ul > li + li { margin-top: var(--wp-2); }
article.tzg-guide #keep-version > ul > li + li { margin-top: var(--wp-4); }
/* The next step (bet guide-conversion): "Next step" is a panel under the rust edge of the next-step block,
   and its link is the page's one button (cobalt is the action). The button may wrap at its spaces on a phone, never past the panel. */
article.tzg-guide .results-section.guide-next { margin-top: var(--wp-12); padding: var(--wp-6); background: var(--wp-panel); border: var(--wp-rule) solid var(--wp-ink); border-left: 4px solid var(--wp-rust); }
article.tzg-guide .guide-next h2 { margin-top: 0; }
article.tzg-guide .guide-next p { max-width: 54ch; }
article.tzg-guide .guide-next-go { margin: var(--wp-6) 0 0; }
article.tzg-guide .guide-next-go .button { max-width: 100%; text-align: center; white-space: normal; text-wrap: balance; }
article.tzg-guide .results-section.guide-next + .results-section { border-top: 0; }
@container page (max-width: 30rem) {
  article.tzg-guide .results-section.guide-next { padding: var(--wp-5, 1.25rem) var(--wp-4); }
  article.tzg-guide .guide-next-go .button { display: flex; width: 100%; padding-inline: var(--wp-4); }
}

/* GitHub-follow line in the follow area: its own step under the feed button. The repository name is an inline link, padded to a
 48 px target without moving its line; focused, the ring sits on the words. */
.tzg-guide .fix-feed-gh { margin: var(--wp-6) 0 var(--wp-2); }
.tzg-guide .fix-feed-gh a { padding: max(7px, calc(var(--wp-tap) / 2 - .62em)) 5px; margin: 0 -5px; font-weight: 600; }
.tzg-guide .fix-feed-gh a:focus-visible { padding: 0; margin: 0; outline-offset: 2px; }
/* the menu path reads as one step: it never breaks after an arrow */
.tzg-guide .fix-feed-path { white-space: nowrap; }
/* the template's standard sign-off, as the other guides */
article.tzg-guide .pk-signoff { margin-top: var(--wp-8); padding-top: var(--wp-4); border-top: var(--wp-rule) solid var(--wp-hair); }