/* Tested-fix guide: the Canada runtimes guide template (section nav, copy-exact blocks, feed panel).
   ubuntu-latest / Ubuntu 26.04 Docker 29 disk guide: forked from the Java 25 guide stylesheet (error H1, rust-edged output blocks),
   with the stacked results table of the HA guide and the disk figure (appended below). */
article.tzg-guide { max-width: 72rem; margin-inline: auto; }
/* The H1 opens with the error a reader pasted into a search box, in its quotes, after the tool's name: one mono line (the quoted
   message in the alarm colour, "Docker" in ink, since it is not part of the message). Its 59 characters are one line at desktop and
   the largest mono on the page. The headline after it is the display face on its own line, a step down, held to a short measure.
   Nothing is cut: both parts wrap at their spaces. */
article.tzg-guide h1 { max-width: none; font-size: clamp(1.625rem, 1rem + 2.4vw, 3rem); line-height: 1.08; }
article.tzg-guide h1 .pg-h1err { display: block; margin-bottom: var(--wp-3); font: 500 clamp(1.125rem, .8rem + 1.2vw, 1.75rem)/1.3 var(--wp-font-mono); letter-spacing: -0.02em; color: var(--wp-rust); text-wrap: pretty; }
article.tzg-guide h1 .pg-h1tool { color: var(--wp-ink); }
/* code in a section heading is set a step down (the mono runs wider than the display face): `docker/setup-buildx-action` fits a 320 line */
article.tzg-guide .results-section h2 code { font-size: .78em; }
article.tzg-guide h1 .pg-h1rest { display: block; max-width: 25ch; 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; the three error lines (up to 270 characters, with 64-hex digests) and the daemon.json line scroll inside their frames, so they take 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); }
/* 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; }
}
/* 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); }
}
/* What you see, not what you paste: the three error outputs in "The errors" carry a rust edge on the left (the flag colour's one job
   on this page, with the table's "failed" cells); every block below them is a step to copy, and keeps the plain frame. */
article.tzg-guide .check-block.is-output { border-left: 4px solid var(--wp-rust); }
/* lists: Sources (one line each) get a little air; Fix 1's "Three things to know" items are two or three sentences each, so they get
   a paragraph's worth */
article.tzg-guide .results-section > ul > li + li { margin-top: var(--wp-2); }
article.tzg-guide #classic-store > ul > li + li { margin-top: var(--wp-4); }

/* The results table: ledger lines, mono heads (as the HA and n8n guides). Each cell says in words what that step did; the rust edge
   repeats only "failed" for a reader scanning the rows. The 26.04 column carries the long cells, so it gets the widest track. */
.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: 400; }
.tzg-guide .tzg-table thead code { text-transform: none; letter-spacing: 0; }
.tzg-guide .tzg-table code { white-space: normal; }
.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); }
/* the data heads sit in with their cells' edge, so each column reads as one line */
.tzg-guide .dk-steps thead th + th { padding-left: calc(var(--wp-3) + 3px); }
@container page (min-width: 48.0625rem) {
  .tzg-guide .dk-steps { table-layout: fixed; }
  .tzg-guide .dk-steps thead th:nth-child(1) { width: 35%; }
  .tzg-guide .dk-steps thead th:nth-child(2) { width: 29%; }
}
/* Below 48rem a row becomes a card: the step as its title, then the two runners' results, each under its column head (drawn by CSS
   with empty alt text, so a screen reader keeps the table's own headers and does not read it twice). The rust edge hangs in the
   gutter, so a failed result is marked without indenting its words. */
@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-3); 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); font-weight: 600; 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); }
  .tzg-guide .dk-steps .an-v { margin-left: calc(-1 * (var(--wp-3) + 3px)); }
}

/* GitHub-follow line in the follow area: its own step under the feed button. The repository name is an inline link, padded to a
 48 px target without moving its line; focused, the ring sits on the words. */
.tzg-guide .fix-feed-gh { margin: var(--wp-6) 0 var(--wp-2); }
.tzg-guide .fix-feed-gh a { padding: max(7px, calc(var(--wp-tap) / 2 - .62em)) 5px; margin: 0 -5px; font-weight: 600; }
.tzg-guide .fix-feed-gh a:focus-visible { padding: 0; margin: 0; outline-offset: 2px; }
/* the menu path reads as one step: it never breaks after an arrow */
.tzg-guide .fix-feed-path { white-space: nowrap; }
/* the template's standard sign-off, as the other guides */
article.tzg-guide .pk-signoff { margin-top: var(--wp-8); padding-top: var(--wp-4); border-top: var(--wp-rule) solid var(--wp-hair); }

/* Disk figure: the same pull and the same build, measured on each runner. A graphite object on the reading sheet, like the
   Canada guide's clock figure. Bars share one scale (GB, longest = the 26.04 build), so lengths compare across both groups.
   Every label is a direct label (no legend): runner name, Docker version and GB sit on the row. Pale blue, the one highlight on
   the field, marks the 26.04 rows the reader came for; the 24.04 row is the control grey; the fixed row is paper.
   Phone: name and number share a line, the bar runs the full width under them. Wider: name | bar | number on one line. */
.dk { container-type: inline-size; margin: var(--wp-8) 0; padding: clamp(1.25rem, 3.2vw, 2.25rem); background: var(--oa-ground); color: var(--oa-paper); max-width: var(--cn-figure-max, 56rem); }
.dk .dk-kicker { margin: 0 0 var(--wp-2); font: 500 var(--wp-text-meta)/1.4 var(--wp-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--oa-muted); }
.dk .dk-kicker code { font: inherit; text-transform: none; letter-spacing: 0; color: var(--oa-paper); background: none; padding: 0; border: 0; }
.dk .dk-title { margin: 0; font: 600 clamp(1.375rem, 2.4vw, 1.875rem)/1.1 var(--oa-font-display); letter-spacing: -.015em; color: var(--oa-paper); max-width: 26ch; text-wrap: balance; }

.dk .dk-group { margin-top: var(--wp-8); }
.dk .dk-task { margin: 0 0 var(--wp-2); padding-bottom: var(--wp-3); border-bottom: 1px solid var(--oa-line); font-size: var(--wp-text-ledger); line-height: 1.45; color: var(--oa-muted); }
.dk .dk-verb { font: 600 1.125rem/1.2 var(--oa-font-display); color: var(--oa-paper); margin-right: .35em; }

.dk .dk-rows { list-style: none; margin: 0; padding: 0; }
/* Phone: runner name over its Docker version on the left, GB on the right, the bar under both at full width.
   The track is display: contents here, so the number and the bar take their own grid cells. */
.dk .dk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "runner num" "bar bar"; column-gap: var(--wp-4); row-gap: var(--wp-3); align-items: start; padding: var(--wp-3) 0 var(--wp-4); }
.dk .dk-runner { grid-area: runner; min-width: 0; }
.dk .dk-name, .dk .dk-ver { display: block; }
.dk .dk-name { font: 500 var(--wp-text-ledger)/1.3 var(--wp-font-mono); color: var(--oa-paper); white-space: nowrap; }
.dk .dk-ver { margin-top: 2px; font-size: var(--wp-text-meta); line-height: 1.35; color: var(--oa-muted); }
.dk .dk-track { display: contents; }
.dk .dk-num { grid-area: num; font: 500 var(--wp-text-ledger)/1.3 var(--wp-font-mono); color: var(--oa-paper); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dk .dk-x { display: inline-block; margin-left: .4em; padding: 0 .45em; border-radius: var(--wp-radius); background: var(--oa-blue); color: var(--oa-ground); }
.dk .dk-bar { grid-area: bar; display: block; height: 14px; width: calc(100% * var(--w)); background: var(--oa-control); }
.dk .dk-new .dk-bar { background: var(--oa-blue); }
.dk .dk-fix .dk-bar { background: var(--oa-paper); }
.dk .dk-new .dk-name { color: var(--oa-blue); }

/* one scale for both groups: --w = GB / 16.11 */
.dk .dk-pull .dk-old { --w: .3911; }   /*  6.30 */
.dk .dk-pull .dk-new { --w: .5934; }   /*  9.56 */
.dk .dk-pull .dk-fix { --w: .3966; }   /*  6.39 */
.dk .dk-build .dk-old { --w: .3333; }  /*  5.37 */
.dk .dk-build .dk-new { --w: 1; }      /* 16.11 */
.dk .dk-build .dk-fix { --w: .3333; }  /*  5.37 */

.dk .dk-note { margin: var(--wp-6) 0 0; padding-top: var(--wp-4); border-top: 1px solid var(--oa-line); font-size: var(--wp-text-meta); line-height: 1.5; color: var(--oa-muted); max-width: 64ch; }
.dk .dk-nb { white-space: nowrap; }

/* Wider: runner | bar with its number at the bar's end, so each value sits where its bar stops. The bar scale leaves room
   for the longest number ("16.11 GB 3x") after the longest bar. */
@container (min-width: 40rem) {
  .dk .dk-row { grid-template-columns: 15.5rem minmax(0, 1fr); grid-template-areas: "runner track"; align-items: center; padding: var(--wp-3) 0; }
  .dk .dk-track { grid-area: track; display: flex; align-items: center; gap: var(--wp-4); min-width: 0; }
  .dk .dk-bar { flex: none; width: calc((100% - 9.5rem) * var(--w)); }
}