/* Tested-fix guide: the Canada runtimes guide template (section nav, copy-exact blocks, tables that stack into labelled rows on a phone).
   OBS 33 "Local file" guide: forked from the anthropic temperature guide stylesheet (OpenAI shutdown < GitHub SSH < MongoDB < php:8.6 pecl). */
article.tzg-guide { max-width: 72rem; margin-inline: auto; }
/* The H1 is a sentence in display type, about 80 characters: balanced, three lines at desktop. "Local file" is the label of the OBS
   checkbox that causes the break, so it is set as that label: the mono face, held on one line, after a small ticked box drawn by CSS
   (no text, nothing read aloud; the page CSP allows no data: images, so the tick is two borders).
   The quotes stay, as the reader would type them into a search box. */
article.tzg-guide h1 { max-width: 30ch; font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem); line-height: 1.06; text-wrap: balance; }
article.tzg-guide h1 .ob-label { position: relative; font: 500 .8em/1 var(--wp-font-mono); letter-spacing: -0.04em; white-space: nowrap; }
article.tzg-guide h1 .ob-label::before { content: ""; display: inline-block; width: .66em; height: .66em; margin: 0 .24em 0 .04em; vertical-align: -.04em; background: var(--wp-ink); border-radius: .06em; }
article.tzg-guide h1 .ob-label::after { content: ""; position: absolute; left: .26em; top: 50%; width: .17em; height: .34em; margin-top: -.27em; border: solid var(--wp-paper); border-width: 0 .085em .085em 0; transform: rotate(42deg); }
/* 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 { 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; }
/* 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 > .check-block { margin: var(--wp-4) 0 var(--wp-6); }
article.tzg-guide ol.gh-steps > li > :last-child { margin-bottom: var(--wp-2); }
/* "Local file" is one label in prose too */
article.tzg-guide .results-section code .tzg-nobreak { white-space: nowrap; }
/* 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 .ob-signoff { margin-top: var(--wp-8); padding-top: var(--wp-4); border-top: var(--wp-rule) solid var(--wp-hair); }
/* What breaks: result cells say in words whether the request failed; the edge repeats it for a reader scanning six rows. Rust = blocked
   or hangs (the flag colour's one job), no edge = works. The bold words are the finding. */
.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 .ob-results tbody th { font-weight: 600; }
.tzg-guide .ob-results tbody th code { font-weight: 400; }
@media (min-width: 48.0625rem) {
  .tzg-guide .ob-results { table-layout: fixed; }
  /* the first column holds http://127.0.0.1:<port> whole (23 mono characters) */
  .tzg-guide .ob-results thead th:nth-child(1) { width: 24%; }
  .tzg-guide .ob-results thead th:nth-child(2) { width: 25%; }
  .tzg-guide .ob-results thead th:nth-child(3) { width: 32%; }
}

/* 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 4-column row would squeeze each cell to a few words a line. Each row becomes a card: where the overlay is loaded
   from as its title, "It calls …" under it as one short sentence, then the two results side by side, each 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-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, .tzg-guide .ob-results .ob-calls { grid-column: 1 / -1; }
  .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 .tzg-table tbody th { font-size: var(--wp-text-body); line-height: 1.4; }
  .tzg-guide .ob-results .ob-calls { margin-bottom: var(--wp-2); }
  .tzg-guide .ob-results .ob-calls::before { display: inline; margin: 0 var(--wp-2) 0 0; font-family: var(--wp-font-body); font-size: 1em; }
  /* each result is a label row and a value row of the card's own grid (subgrid), so the two values start on one line however
     many lines the longer label takes */
  .tzg-guide .ob-results td.an-ok, .tzg-guide .ob-results td.an-bad { grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: var(--wp-2); align-content: start; padding-top: var(--wp-2); border-top: var(--wp-rule) solid var(--wp-hair); }
  .tzg-guide .ob-results td.an-ok::before, .tzg-guide .ob-results td.an-bad::before { margin-bottom: 0; align-self: end; }
}
/* below 22.5rem (a 320 phone) the two results take one column each, one under the other */
@media (max-width: 22.5rem) {
  .tzg-guide .tzg-table tr { grid-template-columns: minmax(0, 1fr); }
}
@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 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%); }
@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); }
}