/* 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.
   php:8.6 pecl guide: forked from the jdk/net/Sockets guide stylesheet (itself from the Playwright 26.04 guide). */
article.tzg-guide { max-width: 72rem; margin-inline: auto; }
/* The H1 is the line a reader pasted into a search box, so it is set as that line: the shell's error in mono and the alarm colour,
   then "on" in the text face, then the tag in ink mono. The line is short, so it is set larger than the other guides: one line at
   desktop, and on a phone the error on one line and "on php:8.6" on the next. Neither code part ever breaks inside. */
article.tzg-guide h1 { max-width: 36ch; font: 500 clamp(1.75rem, 1rem + 3.6vw, 4rem)/1.12 var(--wp-font-mono); letter-spacing: -0.03em; 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); }
article.tzg-guide h1 .pc-nobreak { white-space: nowrap; }
article.tzg-guide h1 .pc-on { font-family: var(--wp-font-display); font-weight: 400; letter-spacing: -0.01em; color: var(--wp-muted); }
/* 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 before/after table keeps the reading measure with the paragraphs around it */
article.tzg-guide .results-intro > [data-article-intro] > .tzg-table-wrap { 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; }
/* the before/after table's corner has no words but carries the head rule, so the rule runs the full width */
.tzg-guide .tzg-table thead td { border-bottom: var(--wp-rule-strong) solid var(--wp-ink); }
/* What breaks: the 8.5 column is the state you are leaving, so it is muted; the 8.6 column is what you will meet, in ink. */
.tzg-guide .pc-breaks td:nth-child(2) { color: var(--wp-muted); }
.tzg-guide .pc-breaks td:nth-child(3) { color: var(--wp-ink); }
.tzg-guide .pc-breaks td:nth-child(3) code { color: var(--wp-rust); }
/* Desktop columns. What breaks: the 8.6 result is the long one. Digests: the image name held whole, the digest takes the rest.
   Receipts: the test, then what each version did. */
@media (min-width: 48.0625rem) {
  .tzg-guide .pc-breaks tbody th { width: 26%; font-weight: 400; }
  .tzg-guide .pc-breaks td:nth-child(2) { width: 26%; }
  .tzg-guide .pc-digests tbody th { width: 34%; font-weight: 400; white-space: nowrap; }
  .tzg-guide .pc-digests td { font-size: .875em; }
  .tzg-guide .pc-receipts tbody th { width: 40%; font-weight: 400; }
  .tzg-guide .pc-receipts td:nth-child(2) { width: 24%; }
}

/* 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 command or an image, so it stays in the ledger mono size */
  .tzg-guide .pc-breaks tbody th, .tzg-guide .pc-digests tbody th, .tzg-guide .pc-receipts tbody th { font-weight: 400; font-size: var(--wp-text-ledger); line-height: 1.5; }
  /* What breaks and receipts: two short labelled lines under the title, the version label inline, so a row is three lines */
  .tzg-guide .pc-breaks tr, .tzg-guide .pc-receipts tr { row-gap: var(--wp-2); padding-bottom: var(--wp-4); }
  .tzg-guide .pc-breaks td::before, .tzg-guide .pc-receipts td::before { display: inline; margin: 0 var(--wp-2) 0 0; }
  .tzg-guide .pc-breaks td::before, .tzg-guide .pc-receipts td::before { 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 .pc-digests tr { row-gap: var(--wp-1); padding: var(--wp-3) 0 var(--wp-4); }
  .tzg-guide .pc-digests td::before { content: none; }
  .tzg-guide .pc-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; }
}

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