/* Tested-fix guide: the Playwright 26.04 guide template (section nav, copy-exact blocks, feed panel). Here the headline names the
   fixed versions, and a dated status table says, per image or package, whether it has the fix; on a phone each image is a three-line block. */
article.tzg-guide { max-width: 72rem; margin-inline: auto; }
/* the headline names the four fixed versions; each version stays whole, in even figures, so a phone never splits 8.4.27 at a dot */
article.tzg-guide h1 { max-width: 22ch; font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem); text-wrap: balance; }
.tzg-guide h1 .php-v { white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
/* 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 { 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 */
article.tzg-guide .check-block { font-size: .9375rem; white-space: pre; overflow-x: auto; overscroll-behavior-x: contain; }
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; }
/* 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 fixed versions and the check), then the fixed-in table */
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 without the fix keeps the same weight, only its verdict 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; }
/* The fixed-in table is the answer to the search: three short columns that stay a table at every width. The fixed version is the
   value a reader compares with, so it is set in mono at reading weight. */
.tzg-guide .php-wrap-fixed { margin-top: var(--wp-8); }
.tzg-guide table.php-fixed { font-size: var(--wp-text-body); }
.tzg-guide .php-fixed tbody th, .tzg-guide .php-fixed td { font-family: var(--wp-font-mono); font-weight: 400; font-variant-numeric: tabular-nums; }
.tzg-guide .php-fixed tbody th { width: 22%; }
.tzg-guide .php-fixed td:nth-child(2) { width: 30%; }
.tzg-guide .php-fixed .php-fixed { font-weight: 500; color: var(--wp-ink); background: var(--wp-cited); padding: 0 var(--wp-1); }
.tzg-guide .php-fixed td:nth-child(n+3) { color: var(--wp-muted); font-size: var(--wp-text-ledger); }
/* r1: one "affected" column per CVE. The branch and its fixed version stay the narrow lead; the ranges share the rest */
.tzg-guide .php-fixed:is(.php-fixed-c4, .php-fixed-c5, .php-fixed-c6) tbody th { width: 12%; }
.tzg-guide .php-fixed:is(.php-fixed-c4, .php-fixed-c5, .php-fixed-c6) td:nth-child(2) { width: 18%; }
/* the disclosure closes the reading column as page text, under a hair rule, at reading size: who wrote this and where to write */
article.tzg-guide .php-signoff { max-width: 44em; margin: var(--wp-12) 0 0; padding-top: var(--wp-6); border-top: var(--wp-rule) solid var(--wp-ink); color: var(--wp-ink); font-size: var(--wp-text-body); line-height: 1.6; }

/* Status: one verdict per image, in Content's four forms. The words carry the verdict; a square before them repeats it in shape
   as well as colour: filled cobalt = has the fix, filled rust = does not, open = the distribution's own notice decides, dashed = no read. */
.tzg-guide .php-verdict { display: inline-block; position: relative; padding-left: 1.25em; }
.tzg-guide .php-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 .php-verdict.is-yes::before { background: var(--wp-bio); border-color: var(--wp-bio); }
.tzg-guide .php-verdict.is-no { color: var(--wp-rust); }
.tzg-guide .php-verdict.is-no::before { background: var(--wp-rust); border-color: var(--wp-rust); }
.tzg-guide .php-verdict.is-usn::before { background: transparent; }
.tzg-guide .php-verdict.is-unknown { color: var(--wp-muted); }
.tzg-guide .php-verdict.is-unknown::before { border: 2px dashed var(--wp-muted); }
.tzg-guide .php-status td:nth-child(2), .tzg-guide .php-status td:nth-child(3), .tzg-guide .php-status td:nth-child(4) { font-family: var(--wp-font-mono); font-size: var(--wp-text-meta); font-variant-numeric: tabular-nums; }
.tzg-guide .php-status td:nth-child(3), .tzg-guide .php-status td:nth-child(4) { color: var(--wp-muted); }
/* Receipts: the command is what a reader copies, so it gets the room */
.tzg-guide .php-receipts tbody th { font-weight: 400; }
/* Desktop columns: the image name and the verdict get the room; what it ships and the two times are short mono values that
   break only at the space between date and time, where the column is too narrow for both */
@media (min-width: 48.0625rem) {
  .tzg-guide table.php-status { table-layout: fixed; }
  .tzg-guide .php-status th:nth-child(1) { width: 21%; }
  .tzg-guide .php-status th:nth-child(2) { width: 21%; }
  .tzg-guide .php-status th:is(:nth-child(3), :nth-child(4)) { width: 13%; }
  /* r1 package cells: the upstream version, then "(package …)" under it */
  .tzg-guide .php-status .php-pkg { display: block; }
  /* a package version such as 8.3.6-0ubuntu0.24.04.12 is one value: it wraps inside its own column, never into the next */
  .tzg-guide .php-status td:nth-child(2) { overflow-wrap: anywhere; }
  .tzg-guide .php-status td:is(:nth-child(2), :nth-child(3), :nth-child(4)) { font-size: var(--wp-text-cite); padding-right: var(--wp-3); }
  .tzg-guide .php-receipts tbody th { width: 56%; }
}

/* 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 */
@media (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 status and receipts tables stack. 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. */
@media (max-width: 48rem) {
  .tzg-guide :is(.php-status, .php-receipts), .tzg-guide :is(.php-status, .php-receipts) :is(tbody, tr, th, td) { display: block; width: auto; }
  .tzg-guide :is(.php-status, .php-receipts) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tzg-guide :is(.php-status, .php-receipts) tbody { border-top: var(--wp-rule-strong) solid var(--wp-ink); }
  .tzg-guide :is(.php-status, .php-receipts) tr { padding: var(--wp-4) 0; border-bottom: var(--wp-rule) solid var(--wp-hair); }
  .tzg-guide :is(.php-status, .php-receipts) :is(th, td) { border: 0; padding: 0; white-space: normal; }
  .tzg-guide :is(.php-status, .php-receipts) td::before { content: attr(data-label); content: attr(data-label) / ""; font: 500 var(--wp-text-cite)/1.3 var(--wp-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp-muted); }
  /* Status, three lines an image: its name with the PHP it ships at the right, the verdict, then when it was built and read.
     The column heads stay on screen as a legend laid out the same way, held at the top while the list scrolls under it,
     so the values need no label of their own. */
  .tzg-guide .php-status td::before { content: none; }
  .tzg-guide .php-status thead { position: sticky; top: 0; z-index: 1; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; display: block; background: var(--wp-paper); border-bottom: var(--wp-rule) solid var(--wp-ink); }
  .tzg-guide .php-status tbody { border-top: 0; }
  .tzg-guide .php-status tr { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: var(--wp-1); padding: var(--wp-3) 0; }
  .tzg-guide .php-status thead tr { padding: var(--wp-2) 0; border-bottom: 0; }
  .tzg-guide .php-status thead th { border: 0; padding: 0; font: 500 var(--wp-text-cite)/1.35 var(--wp-font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp-muted); }
  .tzg-guide .php-status :is(th, td):nth-child(1) { flex: 1 1 0; min-width: 0; order: -3; }
  .tzg-guide .php-status :is(th, td):nth-child(2) { flex: 0 1 auto; min-width: 0; max-width: 60%; overflow-wrap: anywhere; order: -2; margin-left: var(--wp-3); text-align: right; }
  .tzg-guide .php-status :is(th, td):nth-child(5) { flex: 1 0 100%; order: -1; }
  .tzg-guide .php-status :is(th, td):is(:nth-child(3), :nth-child(4)) { white-space: nowrap; }
  .tzg-guide .php-status td:is(:nth-child(2), :nth-child(3), :nth-child(4)) { font: 400 var(--wp-text-cite)/1.5 var(--wp-font-mono); color: var(--wp-muted); }
  .tzg-guide .php-status tbody td:nth-child(2) { font-size: var(--wp-text-meta); color: var(--wp-ink); }
  .tzg-guide .php-status :is(th, td):nth-child(3)::after { content: "·"; content: "·" / ""; margin: 0 var(--wp-2); }
  .tzg-guide .php-status tbody th { font-size: var(--wp-text-body); line-height: 1.4; }
  /* Fixed-in with two or more affected columns: one block per branch. The branch and its fixed version lead the block on one
     line; each CVE's ranges follow under that column's own head */
  .tzg-guide .php-fixed:is(.php-fixed-c4, .php-fixed-c5, .php-fixed-c6), .tzg-guide .php-fixed:is(.php-fixed-c4, .php-fixed-c5, .php-fixed-c6) tbody { display: block; width: auto; }
  .tzg-guide .php-fixed:is(.php-fixed-c4, .php-fixed-c5, .php-fixed-c6) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tzg-guide .php-fixed:is(.php-fixed-c4, .php-fixed-c5, .php-fixed-c6) tbody { border-top: var(--wp-rule-strong) solid var(--wp-ink); }
  .tzg-guide .php-fixed:is(.php-fixed-c4, .php-fixed-c5, .php-fixed-c6) tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--wp-4); row-gap: var(--wp-3); align-items: baseline; padding: var(--wp-4) 0; border-bottom: var(--wp-rule) solid var(--wp-hair); }
  .tzg-guide .php-fixed:is(.php-fixed-c4, .php-fixed-c5, .php-fixed-c6) tbody :is(th, td):nth-child(n) { display: block; width: auto; border: 0; padding: 0; }
  .tzg-guide .php-fixed:is(.php-fixed-c4, .php-fixed-c5, .php-fixed-c6) td:nth-child(n+3) { grid-column: 1 / -1; }
  /* the heads name a CVE, so they are set in the text face (as the status legend): a CVE ID never splits at its hyphen there */
  .tzg-guide .php-fixed:is(.php-fixed-c4, .php-fixed-c5, .php-fixed-c6) td:nth-child(n+3)::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-body); color: var(--wp-muted); }
  .tzg-guide .php-fixed:is(.php-fixed-c4, .php-fixed-c5, .php-fixed-c6) td:nth-child(2)::before { content: "Fixed in"; content: "Fixed in" / ""; margin-right: var(--wp-2); font: 500 var(--wp-text-cite)/1.35 var(--wp-font-body); color: var(--wp-muted); }
  /* r1's heads are sentences ("Declared upstream version reaches the fix?"). In spaced mono capitals the legend took seven lines
     of a phone screen, so here it is set in the text face at caption size: one line per row of the block below it */
  .tzg-guide .php-status thead th { font: 500 var(--wp-text-cite)/1.35 var(--wp-font-body); letter-spacing: 0; text-transform: none; }
  .tzg-guide .php-status thead :is(th):is(:nth-child(3), :nth-child(4)) { white-space: normal; }
  /* a package row: the name, then the version with its package version on a line of their own, then verdict and times */
  .tzg-guide .php-status tr.php-row-pkg :is(th, td):nth-child(-n+2) { flex: 1 0 100%; max-width: none; margin-left: 0; text-align: left; }
  /* Receipts: the command is the row's title, in its own mono; the result under it with its head */
  .tzg-guide .php-receipts tbody th { font-size: var(--wp-text-ledger); line-height: 1.5; margin-bottom: var(--wp-2); }
  .tzg-guide .php-receipts td::before { display: block; margin-bottom: var(--wp-1); }
}
@media (max-width: 43rem) {
  article.tzg-guide .check-block { font-size: .875rem; }
  /* 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%); }
@media (max-width: 62.5rem) {
  .tzg-guide .fix-feed { grid-column: auto; margin-top: var(--wp-8); }
}
@media (max-width: 30rem) {
  .tzg-guide .fix-feed-url a { font-size: .9375rem; padding-inline: var(--wp-3); }
}