/* Tested-fix guide: the Canada runtimes guide template (section nav, copy-exact blocks, tables that stack into labelled rows on a phone).
   Node 26 corepack/yarn guide: forked from the Cuba daylight saving time guide stylesheet (Camunda < n8n < APScheduler < OBS 33), with
   the php:8.6 pecl guide's error headline and receipts tables. */
article.tzg-guide { max-width: 72rem; margin-inline: auto; }
/* The H1 opens with the two lines a reader pasted into a search box, set as the shell prints them: mono, the alarm colour, each held
   whole. "or" is muted, the rest of the sentence is ink display type. "corepack: not found" (19 mono characters) must fit a 320 column,
   so the size is 1.5rem at 320 and grows faster than the text (27px at 390, the 3.5rem cap from 960). */
article.tzg-guide h1 { max-width: 24ch; font-size: clamp(1.5rem, .5rem + 5vw, 3.5rem); line-height: 1.1; text-wrap: balance; }
article.tzg-guide h1 code { font-family: var(--wp-font-mono); font-size: .94em; font-weight: 500; letter-spacing: -0.03em; color: inherit; background: none; padding: 0; border: 0; }
article.tzg-guide h1 .tzg-err { color: var(--wp-rust); }
article.tzg-guide h1 .nd-nobreak { white-space: nowrap; }
@container page (max-width: 19.99rem) { article.tzg-guide h1 .nd-nobreak { display: inline-block; max-width: 100%; overflow-wrap: anywhere; white-space: normal; } }
article.tzg-guide h1 .nd-or { font-weight: 400; color: var(--wp-muted); }
/* 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 JavaScript stopgap (72 characters at most) fits the desktop column whole */
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; }
/* 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 fix: numbered steps, 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 and does not read it twice; role="list" keeps the list in Safari. The
   server command sits inside step 1, where it is run. */
article.tzg-guide ol.gh-steps { list-style: none; counter-reset: gh-step; padding: 0; margin: var(--wp-6) 0 var(--wp-8); border-bottom: var(--wp-rule) solid var(--wp-hair); }
article.tzg-guide ol.gh-steps > li { counter-increment: gh-step; 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.gh-steps > li:first-child { border-top: var(--wp-rule-strong) solid var(--wp-ink); }
article.tzg-guide ol.gh-steps > li::before { content: counter(gh-step, decimal-leading-zero); content: counter(gh-step, 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.gh-steps > li > p { margin: 0 0 var(--wp-4); }
article.tzg-guide ol.gh-steps > li > ul + p { margin-top: var(--wp-4); }
article.tzg-guide ol.gh-steps > li > .check-block { margin: var(--wp-4) 0 var(--wp-6); }
article.tzg-guide ol.gh-steps > li > :last-child { margin-bottom: var(--wp-2); }
/* The intro's route list: the three fixes, each a link into the page. The steps style made quieter: a smaller mono number in the
   gutter (kept there on a phone: each item is one or two lines), one hairline between items. */
article.tzg-guide ol.nd-routes { margin: var(--wp-6) 0 var(--wp-8); }
article.tzg-guide ol.nd-routes > li { padding: var(--wp-3) 0 var(--wp-3) 3rem; }
article.tzg-guide ol.nd-routes > li::before { top: var(--wp-3); font-size: 1.125rem; line-height: 1.6; color: var(--wp-muted); }
article.tzg-guide ol.nd-routes > li > p, article.tzg-guide ol.nd-routes > li > :last-child { margin: 0; }
article.tzg-guide ol.nd-routes a { font-weight: 600; }
/* In receipts, the line naming a run and its date heads the digests and tests under it: a mono label over the strong rule */
article.tzg-guide .nd-tcap { margin: var(--wp-10, 2.5rem) 0 calc(-1 * var(--wp-3)); font: 500 var(--wp-text-cite)/1.35 var(--wp-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--wp-ink); }
/* a bullet that carries a paragraph and a code block (pnpm's three routes): the block keeps the item's measure, with air around it */
article.tzg-guide .guide-reading li > p { margin: 0 0 var(--wp-3); }
article.tzg-guide .guide-reading li > .check-block { margin: var(--wp-3) 0 var(--wp-4); }
/* 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); }
/* Receipts, tests: a result that stopped a build (not found, exit 127; EEXIST, exit 1) carries the rust edge, the flag colour's one
   job; a result that worked has none, its words say it. */
.tzg-guide .an-v { display: block; padding-left: var(--wp-3); border-left: 3px solid transparent; }
.tzg-guide .an-bad .an-v { border-left-color: var(--wp-rust); }
/* every row's name is a command or an image: ledger mono weight, so the results carry the eye */
.tzg-guide .pk-receipts tbody th, .tzg-guide .pk-digests tbody th, .tzg-guide .pk-builds tbody th { font-weight: 400; }
/* each result sits in from its cell edge to leave room for the rust edge; the column heads sit in with it */
.tzg-guide .pk-receipts thead th + th { padding-left: calc(var(--wp-3) + 3px); }
/* Tags and commands in a head keep their case */
.tzg-guide .tzg-table thead th { text-transform: none; letter-spacing: 0.02em; }
@container page (min-width: 48.0625rem) {
  /* Digests: the image name held whole, the digest takes the rest and breaks between digits if it must */
  .tzg-guide .pk-digests tbody th { width: 36%; white-space: nowrap; }
  .tzg-guide .pk-digests td { font-size: .875em; }
  /* Tests: the command is the long column; the two results share the rest */
  .tzg-guide .pk-receipts { table-layout: fixed; }
  .tzg-guide .pk-receipts thead th:nth-child(1) { width: 40%; }
  .tzg-guide .pk-receipts thead th:nth-child(2) { width: 28%; }
  /* Project builds: the install line is the long column, then pnpm versions, images, and the result */
  .tzg-guide .pk-builds { table-layout: fixed; }
  .tzg-guide .pk-builds thead th:nth-child(1) { width: 34%; }
  .tzg-guide .pk-builds thead th:nth-child(2) { width: 18%; }
  .tzg-guide .pk-builds thead th:nth-child(3) { width: 20%; }
  .tzg-guide .pk-builds thead th + th { padding-left: calc(var(--wp-3) + 3px); }
}

/* 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 a 5-column row would squeeze each cell to a word a line. Each row becomes a card: where -1 was set (or the probe's
   output line, or the reload step) as its title, then its values, each under its column head. In a matrix the results sit two by two.
   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 .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-2); padding: var(--wp-4) 0 var(--wp-5, 1.25rem); 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 tbody th { grid-column: 1 / -1; font-size: var(--wp-text-body); line-height: 1.4; }
  .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.35 var(--wp-font-mono); color: var(--wp-muted); }
  /* every row title is a command or an image, so it stays in the ledger size */
  .tzg-guide .pk-digests tbody th, .tzg-guide .pk-receipts tbody th { font-size: var(--wp-text-ledger); line-height: 1.5; }
  /* 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 .pk-digests tr { row-gap: var(--wp-1); padding: var(--wp-3) 0 var(--wp-4); }
  .tzg-guide .pk-digests td::before { content: none; }
  .tzg-guide .pk-digests td { font-size: .875em; }
  /* Tests: the command as the card title, then Node 24 and Node 26 side by side under their own heads, read against each other as on
     the desktop row (subgrid keeps the two values level when a head takes two lines) */
  .tzg-guide .pk-receipts tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: var(--wp-4); }
  .tzg-guide .pk-receipts td { grid-row: 2 / span 2; display: grid; grid-template-rows: subgrid; row-gap: var(--wp-1); }
  .tzg-guide .pk-receipts td::before { margin-bottom: 0; padding-left: calc(var(--wp-3) + 3px); align-self: end; }
  /* Project builds: the line as the card title, pnpm and images side by side, then the result across the card */
  .tzg-guide .pk-builds tbody th { font-size: var(--wp-text-ledger); line-height: 1.5; }
  .tzg-guide .pk-builds tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--wp-4); }
  .tzg-guide .pk-builds td:last-child { grid-column: 1 / -1; }
  .tzg-guide .pk-builds td::before { padding-left: calc(var(--wp-3) + 3px); }
  /* the rust edge runs the length of its own value, not of the taller value beside it */
  .tzg-guide .pk-receipts .an-v { align-self: start; }
}
@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 pnpm section (whose results come later, with a date), in the reading column */
.tzg-guide .guide-reading > .mq-signup { grid-column: auto; margin: var(--wp-12) 0 0; }