/* Tested-fix guide: the Canada runtimes guide template (section nav, copy-exact blocks, tables that stack into labelled rows on a phone).
   pnpm 12 two-document lockfile guide: forked from the Bitwarden guide stylesheet (appimagetool < Oracle GraalVM 25 < Kubernetes
   CronJob < Spring < Cuba < Camunda < n8n < APScheduler < PHP2Shell check < OBS 33); a dated status note and a jump list in the intro,
   a 16-line check script that scrolls inside its frame, and four tables (version settings, scanner runs, input hashes, runs).
   r3s (#submit): a 14-line workflow block and a fifth table kind, the submission test's dated reads (reads). */
article.tzg-guide { max-width: 72rem; margin-inline: auto; }
/* The H1 is a sentence in display type, 103 characters, that names what a reader sees (alerts closed as "fixed", a graph of pnpm only):
   balanced, four lines at desktop. Its floor is 1.625rem, as on the sibling guides, so the longest word (Dependabot) fits the 320 column. */
article.tzg-guide h1 { max-width: 30ch; font-size: clamp(1.625rem, 1rem + 3vw, 3.5rem); line-height: 1.06; text-wrap: balance; }
/* 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; }
/* 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 > ul > li + li { margin-top: var(--wp-6); }
article.tzg-guide ol.gh-steps li > ul > li > p { margin: 0; }
article.tzg-guide ol.gh-steps li > ul > li > .check-block { margin: var(--wp-3) 0 0; }
article.tzg-guide ol.gh-steps > li > :last-child { margin-bottom: var(--wp-2); }
/* 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); }
/* The results table: each cell says in words what that setup did; the edge repeats only "it ran twice" for a reader scanning the rows
   (rust: the flag colour's one job). Every other cell has no edge; its words carry 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); }
.tzg-guide .pk-matrix tbody th code { font-weight: 400; }
/* 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; }
/* The status line: GitHub's graph was re-read before the release and the bold sentence carries that date and time. It is the one dated
   claim in the intro, so it sits on the rust edge (the alarm colour's one job here) and reads as a note, not as another paragraph. */
article.tzg-guide .pn-status { padding: var(--wp-2) 0 var(--wp-2) var(--wp-4); border-left: 3px solid var(--wp-rust); }
/* The update note in #check: the script under it replaced the first one, and the bold date says when. It is a correction, not an alarm,
   so it takes the same note shape on the ink edge and sits close to the script it describes. */
article.tzg-guide .pn-update { padding: var(--wp-2) 0 var(--wp-2) var(--wp-4); border-left: 3px solid var(--wp-ink); }
/* "On this page": Content's numbered list of the three answers, set as a jump list under a hairline, not as the numbered steps of a fix.
   The numbers stay the list's own (mono, muted); each link keeps a 48px row. */
article.tzg-guide .pn-onpage-label { margin: var(--wp-6) 0 var(--wp-2); padding-top: var(--wp-4); border-top: var(--wp-rule) solid var(--wp-hair); font-weight: 600; }
article.tzg-guide ol.pn-onpage { margin: 0 0 var(--wp-4); padding-left: 2rem; }
article.tzg-guide ol.pn-onpage > li { margin: 0 0 var(--wp-3); padding-left: var(--wp-2); line-height: 1.5; }
article.tzg-guide ol.pn-onpage > li::marker { font-family: var(--wp-font-mono); color: var(--wp-muted); }
/* a 48px hit area on each jump link with no line moved (the lh-padding + matching negative margin rule) */
article.tzg-guide ol.pn-onpage a { padding-block: calc((var(--wp-tap) - 1.5em) / 2); margin-block: calc((var(--wp-tap) - 1.5em) / -2); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* r2: the two conversion routes in #ignore are bullets, the first carrying its awk line; the line sits under its lead and scrolls in its
   frame, and the routes are spaced as two options, not as a run-on list */
article.tzg-guide .results-section > ul:has(> li > .check-block) > li + li { margin-top: var(--wp-6); }
article.tzg-guide .results-section > ul > li > p { margin: 0; }
article.tzg-guide .results-section > ul > li > .check-block { margin: var(--wp-3) 0 var(--wp-3); }
/* Values in the settings and scanner tables read as results: "2 documents", "exit 1". The setting itself (the row head) keeps body
   weight with its code in mono. */
.tzg-guide .pk-settings tbody th, .tzg-guide .pk-scanner tbody th { font-weight: 600; }
.tzg-guide .pk-settings thead th:nth-child(n+2), .tzg-guide .pk-scanner thead th:nth-child(4) { padding-left: calc(var(--wp-3) + 3px); }
/* the input hashes and the commands are values: mono, a step smaller, so a 64-digit sha256 fits one line at desktop */
.tzg-guide .pk-inputs td code, .tzg-guide .pk-runs td:nth-child(2) code { font-size: .875em; }
@container page (min-width: 48.0625rem) {
  .tzg-guide .pk-settings, .tzg-guide .pk-runs { table-layout: fixed; }
  .tzg-guide .pk-settings thead th:nth-child(1) { width: 46%; }
  .tzg-guide .pk-settings thead th:nth-child(2) { width: 22%; }
  .tzg-guide .pk-runs thead th:nth-child(1) { width: 30%; }
  .tzg-guide .pk-runs thead th:nth-child(2) { width: 30%; }
  /* the reads' first two cells are times and a noun phrase; the result is the sentence, so it gets the room */
  .tzg-guide .pk-reads { table-layout: fixed; }
  .tzg-guide .pk-reads thead th:nth-child(1) { width: 20%; }
  .tzg-guide .pk-reads thead th:nth-child(2) { width: 24%; }
}
/* a sha256 is one string on one line where the table is wide enough for it (512px) and a readable name column beside it; the name wraps
   instead. Measured on the table's own width: from 62.5rem the nav column returns and the reading column narrows again. */
.tzg-guide .pk-inputs-wrap { container: pk-inputs / inline-size; }
@container pk-inputs (min-width: 46rem) {
  .tzg-guide .pk-inputs td .tzg-hash { white-space: nowrap; word-break: 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 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; }
  /* a settings card: the setting as its title, then what pnpm 12.16.1 wrote and what pnpm 12.15.0 did, each under its head. The cost
     cell's rust edge hangs in the gutter so both values start on the label's edge. */
  .tzg-guide .pk-settings .an-ok .an-v, .tzg-guide .pk-scanner .an-ok .an-v { padding-left: 0; border-left: 0; }
  .tzg-guide .pk-settings .an-bad .an-v, .tzg-guide .pk-scanner .an-bad .an-v { margin-left: calc(-1 * (var(--wp-3) + 3px)); }
  /* a scanner card: the version as its title; exit code and result code side by side (one word each), the packages found under them */
  .tzg-guide .pk-scanner tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto; column-gap: var(--wp-4); }
  .tzg-guide .pk-scanner td:nth-child(2), .tzg-guide .pk-scanner td:nth-child(3) { display: grid; grid-row: 2 / span 2; grid-template-rows: subgrid; row-gap: var(--wp-1); align-content: start; }
  .tzg-guide .pk-scanner td:nth-child(2)::before, .tzg-guide .pk-scanner td:nth-child(3)::before { margin-bottom: 0; align-self: end; }
  .tzg-guide .pk-scanner td:nth-child(4) { grid-column: 1 / -1; grid-row: 4; margin-top: var(--wp-2); }
  /* the runs' command is a value a reader may copy: it keeps its mono and wraps at its spaces */
  .tzg-guide .pk-runs td + td, .tzg-guide .pk-reads td + td { margin-top: var(--wp-2); }
  .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); }
}
@container page (max-width: 43rem) {
  /* two-digit markers need the room on a phone gutter */
  .tzg-guide .guide-nav ol { padding-left: 2.5rem; }
  /* on a phone the step number sits above its lead, so the code block keeps the full column */
  article.tzg-guide ol.gh-steps > li { padding-left: 0; padding-top: var(--wp-4); }
  article.tzg-guide ol.gh-steps > 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%); }
@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; }