/* Tested-fix guide: the Canada runtimes guide template (section nav, copy-exact blocks, tables that stack into labelled rows on a phone).
   APT CVE-2026-109518 Docker-images status guide: forked from the Rails security-release 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 the answer in shape
   as well as colour. */
article.tzg-guide { max-width: 72rem; margin-inline: auto; }
/* The H1 is a question in display type, 99 characters: balanced, three lines at desktop. Its floor is 1.625rem, as on the sibling guides.
   The CVE ID is the search term: it stays whole, in even figures, so a phone never splits it at a hyphen. */
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 .apt-cve { 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; }
/* and so does a platform name in a head (linux/amd64) */
.tzg-guide .tzg-table thead .apt-case { text-transform: none; }
/* 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; }
}
/* Below 48rem the receipts' command would wrap beside its result. Each row becomes a card: the command as its title, then where and
   what it printed, each 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: 48rem) {
  .tzg-guide .apt-receipts, .tzg-guide .apt-receipts :is(tbody, tr, th, td) { display: block; width: auto; }
  .tzg-guide .apt-receipts thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tzg-guide .apt-receipts tbody { border-top: var(--wp-rule-strong) solid var(--wp-ink); }
  .tzg-guide .apt-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 .apt-receipts :is(th, td) { border: 0; padding: 0; width: auto; white-space: normal; }
  .tzg-guide .apt-receipts tbody th { grid-column: 1 / -1; font-size: var(--wp-text-body); line-height: 1.4; }
  .tzg-guide .apt-receipts td + td { margin-top: var(--wp-2); }
  .tzg-guide .apt-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); }
}
@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; }
/* Step headings: the text numbers the three steps ("1. Check the apt …"); the number is page text, set in the mono face of the nav's
   markers so the heading and its nav entry read as one sequence. */
.tzg-guide .results-section h2 .apt-step { font-family: var(--wp-font-mono); font-weight: 500; letter-spacing: -0.02em; margin-right: .1em; }
/* the check one-liner and the two-line RUN: copy-exact frames between paragraphs */
article.tzg-guide .results-section > .check-block { margin: var(--wp-4) 0 var(--wp-6); }

/* The dated read ("At 01:23 UTC on 5 November …") opens the status table: it sits on the table's strong rule as its caption-like lead. */
article.tzg-guide .apt-read { margin-top: var(--wp-6); }

/* 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 rust = the image ships an apt older than the fix; filled cobalt = the fixed apt. */
.tzg-guide .apt-verdict { display: inline-block; position: relative; padding-left: 1.25em; font-family: var(--wp-font-mono); font-variant-numeric: tabular-nums; }
.tzg-guide .apt-verdict::before { content: ""; position: absolute; left: 0; top: .36em; width: .72em; height: .72em; box-sizing: border-box; border: 2px solid var(--wp-ink); }
.tzg-guide .apt-verdict.is-fixed::before { background: var(--wp-bio); border-color: var(--wp-bio); }
.tzg-guide .apt-verdict.is-old { color: var(--wp-rust); font-weight: 600; }
.tzg-guide .apt-verdict.is-old::before { background: var(--wp-rust); border-color: var(--wp-rust); }

/* Status: seven tags, read on 5 November. It is the page's answer, so it takes the article's full width under the intro; the tag (with
   its release in brackets) names the row, the two apt columns are the comparison, the notice links last. A table only where it has the
   room, by its own width: under 46rem each tag becomes a card. */
.tzg-guide .apt-status-wrap { container: apt-status / inline-size; margin-top: var(--wp-4); }
article.tzg-guide .results-intro > [data-article-intro] > .apt-status-wrap { max-width: none; }
@container apt-status (min-width: 46rem) {
  .tzg-guide table.apt-status { table-layout: fixed; }
  .tzg-guide .apt-status thead th:nth-child(1) { width: 33%; }
  .tzg-guide .apt-status thead th:nth-child(2) { width: 14%; }
  .tzg-guide .apt-status thead th:nth-child(3) { width: 15%; }
  .tzg-guide .apt-status thead th:nth-child(4) { width: 21%; }
  .tzg-guide .apt-status thead th:nth-child(5) { width: 17%; }
  .tzg-guide .apt-status tbody th { font-weight: 500; }
}
@container apt-status (max-width: 45.99rem) {
  .tzg-guide .apt-status, .tzg-guide .apt-status :is(tbody, tr, th, td) { display: block; width: auto; }
  .tzg-guide .apt-status thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tzg-guide .apt-status tbody { border-top: var(--wp-rule-strong) solid var(--wp-ink); max-width: 44rem; }
  /* a card: the tag across the top, then the two apt versions side by side (the comparison), then the notice and the push date */
  .tzg-guide .apt-status tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--wp-4); 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 .apt-status :is(th, td) { border: 0; padding: 0; width: auto; white-space: normal; }
  .tzg-guide .apt-status tbody th { grid-column: 1 / -1; font-size: var(--wp-text-body); font-weight: 600; line-height: 1.4; }
  .tzg-guide .apt-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); }
  .tzg-guide .apt-status td:nth-child(3) { order: 1; }
  .tzg-guide .apt-status td:nth-child(4) { order: 2; }
  .tzg-guide .apt-status td:nth-child(5) { order: 3; }
  .tzg-guide .apt-status td:nth-child(2) { order: 4; }
}
/* a 320 phone: one value a line, so 2.4.15ubuntu0.1 never crosses into the next column */
@container apt-status (max-width: 20rem) {
  .tzg-guide .apt-status tr { grid-template-columns: minmax(0, 1fr); }
}

/* Receipts at desktop: the command, where it ran, what it printed */
@container page (min-width: 48.0625rem) {
  .tzg-guide table.apt-receipts { table-layout: fixed; }
  .tzg-guide .apt-receipts thead th:nth-child(1) { width: 34%; }
  .tzg-guide .apt-receipts thead th:nth-child(2) { width: 30%; }
  .tzg-guide .apt-receipts tbody th { font-weight: 400; }
}
@container page (max-width: 48rem) {
  .tzg-guide .apt-receipts tbody th { font-weight: 500; }
}

/* Cases: step 2's three situations (non-root base, multi-stage, apt-get upgrade) and the older releases. Each is led by its case
   (bold in the text), set as the item's head so a reader scanning for "Multi-stage" or "Debian 11" finds it at the left edge; the items
   sit between hairlines like the table rows above. */
article.tzg-guide ul.apt-cases { list-style: none; margin: var(--wp-4) 0 var(--wp-6); padding: 0; border-top: var(--wp-rule) solid var(--wp-hair); }
article.tzg-guide ul.apt-cases > li { margin: 0; padding: var(--wp-4) 0; border-bottom: var(--wp-rule) solid var(--wp-hair); }
article.tzg-guide ul.apt-cases .apt-lead { display: block; margin-bottom: var(--wp-1); font-size: var(--wp-text-body); }
/* a receipts row whose Command names where it ran has no Where: the stacked card drops the empty label */
.tzg-guide .apt-receipts td:empty::before { content: none; }
@container page (max-width: 48rem) { .tzg-guide .apt-receipts td:empty { display: none; } }