/* Tested-fix guide: the Canada runtimes guide template (section nav, copy-exact blocks, tables that stack into labelled rows on a phone). The headline is the error itself, set in code.
   MongoDB kernel-6.19 guide: forked from the php:8.6 pecl guide stylesheet (jdk/net/Sockets < Playwright 26.04). */
article.tzg-guide { max-width: 72rem; margin-inline: auto; }
/* The H1 is MongoDB's whole error line, the words a reader pastes into a search box, so it is set as that line in mono: the first
   clause in the alarm colour, the rest in ink. At about 115 characters it is the longest headline of the guides, so it is set smaller
   than the short ones and balanced: three lines at desktop, and on a phone it wraps between words without pushing the page wide. */
article.tzg-guide h1 { max-width: 46ch; font: 500 clamp(1.125rem, .8rem + 1.9vw, 2.125rem)/1.22 var(--wp-font-mono); letter-spacing: -0.02em; text-wrap: balance; }
article.tzg-guide h1 code { font: inherit; letter-spacing: inherit; color: inherit; background: none; padding: 0; border: 0; white-space: normal; }
article.tzg-guide h1 .tzg-err { color: var(--wp-rust); }
/* the intro is not held to the reading measure, so the error line can take the page width at desktop; the paragraphs keep the measure */
article.tzg-guide .results-intro { max-width: none; }
article.tzg-guide .results-intro > [data-article-intro] > :not(pre) { max-width: var(--cn-reading-max); }
/* the second form of the error is a copy-exact block under the lede; it keeps the reading measure with the paragraphs */
article.tzg-guide .results-intro > [data-article-intro] > pre { 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 { 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; tab-size: 4; }
/* a stack trace's "at" lines start with a TAB; it copies as a TAB and shows four columns wide */
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 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; }
/* "exits" is the verdict that stops a job: the word carries it, the alarm colour repeats it; "starts" stays ink */
.tzg-guide .mk-exit { color: var(--wp-rust); font-weight: 600; }
/* Desktop columns. Versions: the release range held whole, the rule, the runner verdict (short), the evidence.
   Digests: the image name held whole, the digest takes the rest. Results: the image, then five kernel profiles of equal width. */
@media (min-width: 48.0625rem) {
  .tzg-guide .mk-versions tbody th { width: 17%; white-space: nowrap; }
  .tzg-guide .mk-versions td:nth-child(2) { width: 33%; }
  .tzg-guide .mk-versions td:nth-child(3) { width: 21%; }
  .tzg-guide .mk-digests tbody th { width: 34%; font-weight: 400; white-space: nowrap; }
  .tzg-guide .mk-digests td { font-size: .875em; }
  .tzg-guide .mk-results tbody th { width: 11%; }
  .tzg-guide .mk-results thead th { letter-spacing: 0.02em; }
}

/* Fixes by situation: five numbered choices, each a block under a hairline with its number in the mono gutter. The number is drawn by
   CSS with empty alt text, so a screen reader keeps the list's own position ("1 of 5") and does not read it twice; role="list" keeps the
   list in Safari, which drops it when the marker is hidden. */
article.tzg-guide ol.mk-fixes { list-style: none; counter-reset: mk-fix; padding: 0; margin: var(--wp-6) 0 var(--wp-8); border-bottom: var(--wp-rule) solid var(--wp-hair); }
article.tzg-guide ol.mk-fixes > li { counter-increment: mk-fix; position: relative; margin: 0; padding: var(--wp-6) 0 var(--wp-4) 4rem; border-top: var(--wp-rule) solid var(--wp-hair); }
article.tzg-guide ol.mk-fixes > li:first-child { border-top: var(--wp-rule-strong) solid var(--wp-ink); }
article.tzg-guide ol.mk-fixes > li::before { content: counter(mk-fix, decimal-leading-zero); content: counter(mk-fix, decimal-leading-zero) / ""; position: absolute; left: 0; top: var(--wp-6); font: 500 1.5rem/1.1 var(--wp-font-mono); letter-spacing: -0.02em; color: var(--wp-ink); }
article.tzg-guide ol.mk-fixes > li > p { margin: 0 0 var(--wp-4); }
article.tzg-guide ol.mk-fixes > li > .check-block { margin: var(--wp-4) 0 var(--wp-6); }
article.tzg-guide ol.mk-fixes > li > :last-child { margin-bottom: var(--wp-2); }

/* 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 a 5-column row would squeeze 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. */
@media (max-width: 48rem) {
  .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) minmax(0, 1fr); column-gap: var(--wp-4); 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 { grid-column: 1 / -1; 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); font-weight: 500; 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; }
  /* Every row's title is a release range or an image, so it stays in the ledger size */
  .tzg-guide .mk-versions tbody th, .tzg-guide .mk-digests tbody th, .tzg-guide .mk-results tbody th { font-size: var(--wp-text-ledger); line-height: 1.5; }
  /* Versions: three labelled lines under the release range, the label inline, so a row reads as sentences */
  .tzg-guide .mk-versions tr { row-gap: var(--wp-2); padding-bottom: var(--wp-4); }
  .tzg-guide .mk-versions td::before { display: inline; margin: 0 var(--wp-2) 0 0; text-transform: none; letter-spacing: 0; }
  /* Results: five short verdicts, one line each, the kernel profile in a fixed label column so the verdicts line up down the row */
  .tzg-guide .mk-results tr { row-gap: var(--wp-1); padding-bottom: var(--wp-4); }
  .tzg-guide .mk-results td { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); column-gap: var(--wp-3); align-items: baseline; }
  .tzg-guide .mk-results td::before { margin: 0; text-transform: none; letter-spacing: 0; }
  /* Digests: the image is the title and the digest the line under it; the line says what it is, so it needs no head */
  .tzg-guide .mk-digests tr { row-gap: var(--wp-1); padding: var(--wp-3) 0 var(--wp-4); }
  .tzg-guide .mk-digests td::before { content: none; }
  .tzg-guide .mk-digests td { font-size: .875em; }
}
@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; }
  /* on a phone the fix number sits above its lead, so the code blocks keep the full column */
  article.tzg-guide ol.mk-fixes > li { padding-left: 0; padding-top: var(--wp-4); }
  article.tzg-guide ol.mk-fixes > li::before { position: static; display: block; margin-bottom: var(--wp-2); font-size: 1.125rem; }
}

/* 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); }
}