/* Tested-fix guide: the Canada runtimes guide template (section nav, copy-exact blocks, tables that stack into labelled rows on a phone).
   anthropic temperature guide: forked from the OpenAI shutdown guide stylesheet (GitHub SSH < MongoDB < php:8.6 pecl < jdk/net/Sockets < Playwright 26.04). */
article.tzg-guide { max-width: 72rem; margin-inline: auto; }
/* The H1 is the error as Python prints it: the exact words a reader pastes into a search box, so it is set in the code face, not
   dressed up as a headline. The exception class carries the flag colour, as on a traceback's last line; the rest is ink. It wraps
   only at its spaces: the size holds the longest run (Messages.create(), 17 characters) inside a 320 column, and balance evens the
   lines (3 at 1440, 5 at 390). */
article.tzg-guide h1 { max-width: 34ch; font: 500 clamp(1.375rem, .85rem + 2.3vw, 2.75rem)/1.18 var(--wp-font-mono); letter-spacing: -0.03em; text-wrap: balance; }
article.tzg-guide h1 .an-h1code { font: inherit; letter-spacing: inherit; color: var(--wp-ink); background: none; padding: 0; border: 0; white-space: normal; overflow-wrap: normal; }
article.tzg-guide h1 .an-exc { color: var(--wp-rust); }
/* 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 second form of the error is a copy-exact block under the lede; it keeps the reading measure with the paragraphs */
article.tzg-guide .results-intro > [data-article-intro] > pre { max-width: var(--cn-reading-max); }
/* 16315: the five messages are as wide as the lede, so four of them read whole at 1440; the last, long one scrolls in its frame */
article.tzg-guide .results-intro > [data-article-intro] > pre.check-block { width: 100%; max-width: 57.5rem; box-sizing: border-box; }
/* 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; }
/* Fixes: a paragraph that opens in bold is a situation; its bold run is the situation's own line (the error a reader matches),
   and the advice follows under it. A rule above each one marks where the next case starts. */
article.tzg-guide .an-sit { margin-top: var(--wp-8); padding-top: var(--wp-4); border-top: var(--wp-rule) solid var(--wp-hair); }
article.tzg-guide .an-sit > strong:first-child { display: block; margin-bottom: var(--wp-2); font-size: var(--wp-text-h3); line-height: 1.35; font-weight: 600; text-wrap: pretty; }
article.tzg-guide .an-sit > strong:first-child code { font-size: .875em; }
/* result cells: the words say whether the call failed; the edge repeats it for a reader scanning 25 rows. Rust = it fails (the
   flag colour's one job), no edge = it works, muted = not run or nothing to set. */
.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 .an-na .an-v { color: var(--wp-muted); }
/* the version map: the version as the row's name, held whole */
.tzg-guide .an-versions tbody th { font-weight: 600; white-space: nowrap; }
/* 25 libraries: the library is the row's name (package, version and extra); the four installs follow left to right, oldest pin last */
.tzg-guide .an-libs tbody th { font-weight: 600; }
.tzg-guide .an-libs tbody th code { font-weight: 400; }
/* 25 libraries is the page's evidence and its widest object: once the nav sits beside the reading column (> 62.5rem), the table
   takes the nav's column too and spans the article, so each install gets a quarter of 72rem rather than of the reading column.
   The nav is not sticky and ends long before this section, so nothing sits under it. */
@media (min-width: 62.5625rem) {
  .tzg-guide .an-libs-wrap { margin-left: calc(-15rem - var(--wp-16)); }
}
@media (min-width: 48.0625rem) {
  .tzg-guide .an-libs { table-layout: fixed; }
  .tzg-guide .an-libs tbody th { width: 22%; }
  .tzg-guide .an-libs td { width: 19.5%; }
  .tzg-guide .an-versions tbody th { width: 30%; }
}

/* 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; }
  /* the version map: the version as the title, each cell under its label, inline, so a row reads as one short sentence */
  .tzg-guide .an-versions tr { row-gap: var(--wp-1); padding: var(--wp-3) 0 var(--wp-4); }
  .tzg-guide .an-versions td::before { display: inline; margin: 0 var(--wp-2) 0 0; text-transform: none; letter-spacing: 0; }
  .tzg-guide .an-versions .an-v { display: inline; padding: 0; border: 0; }
  .tzg-guide .an-versions .an-bad .an-v { color: var(--wp-rust); }
  /* 25 libraries: each library a card. Its name is the title; then the four installs as a ledger, each label on a rail at the left
     and the result beside it on its edge, so a phone reader runs down one column of results. */
  .tzg-guide .an-libs tr { row-gap: var(--wp-2); padding: var(--wp-4) 0 var(--wp-5, 1.25rem); }
  .tzg-guide .an-libs td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: var(--wp-3); align-items: start; }
  .tzg-guide .an-libs td::before { margin: .15em 0 0; text-transform: none; letter-spacing: 0; line-height: 1.35; }
}
/* below 22.5rem (a 320 phone) the rail leaves the result too narrow: the label goes above */
@media (max-width: 22.5rem) {
  .tzg-guide .an-libs td { display: block; }
  .tzg-guide .an-libs td::before { margin: 0 0 var(--wp-1); }
}
@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); }
}