/* Tested-fix guide: the Canada runtimes guide template (section nav, copy-exact blocks, tables that stack into labelled rows on a phone).
   OpenAI shutdown guide: forked from the GitHub SSH change guide stylesheet (MongoDB < php:8.6 pecl < jdk/net/Sockets < Playwright 26.04). */
article.tzg-guide { max-width: 72rem; margin-inline: auto; }
/* The H1 opens with the two messages a reader pastes into a search box. Each sits on its own line as the terminal prints it, in the
   mono face and the alarm colour, held whole where the column allows; then the sentence in display type, balanced. */
article.tzg-guide h1 { max-width: 30ch; font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem); line-height: 1.06; text-wrap: balance; }
/* sized to the column, not the H1, so each message holds one line at 390 and 1440 (40 characters and the "and") */
article.tzg-guide h1 .oa-h1errs { display: block; margin: 0 0 .5em; font: 500 clamp(.8125rem, .5rem + 1.35vw, 1.75rem)/1.3 var(--wp-font-mono); letter-spacing: -0.02em; color: var(--wp-rust); text-wrap: pretty; }
article.tzg-guide h1 .oa-h1err { display: block; }
article.tzg-guide h1 .oa-h1err + .oa-h1err { margin-top: .2em; }
article.tzg-guide h1 .oa-h1errs code { font: inherit; letter-spacing: inherit; color: inherit; background: none; padding: 0; border: 0; }
/* the "and" between the two messages is a word, not part of either: body face, muted */
article.tzg-guide h1 .oa-and { font-family: var(--wp-font-body); font-weight: 400; letter-spacing: 0; color: var(--wp-muted); }
/* a section named by its error message is set like the H1's messages: mono, the alarm colour, a step under the display headings */
article.tzg-guide .results-section h2.oa-errhead { max-width: 32ch; font: 500 clamp(1.25rem, .95rem + 1.2vw, 1.875rem)/1.25 var(--wp-font-mono); letter-spacing: -0.02em; color: var(--wp-rust); text-wrap: pretty; }
/* 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); }
/* 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; }
/* Find your error: the message is the row's name and the reason the page exists. It is set as the API prints it, mono in ink, on its
   own line; the status code and the other names follow in the ledger face; then what it means and a short link down to its section. */
.tzg-guide .oa-errors tbody th { font-weight: 400; }
.tzg-guide .oa-errors tbody th code { font-size: 1em; color: var(--wp-ink); background: none; padding: 0; border: 0; white-space: normal; }
.tzg-guide .oa-errors tbody th .oa-msg { display: block; margin-bottom: var(--wp-1); font-weight: 500; }
.tzg-guide .oa-errors td:last-child a { font-weight: 600; white-space: nowrap; }
.tzg-guide .oa-errors td:last-child a::after { content: "↓"; content: "↓" / ""; margin-left: .3em; }
/* the substitutes: what you have in code, then what OpenAI lists in its place */
.tzg-guide .oa-subs tbody th { font-weight: 400; }
/* library defaults: a source path is one name, never broken on a desktop row */
.tzg-guide .oa-defaults tbody th { font-weight: 600; }
.tzg-guide .oa-path { white-space: normal; }
/* a path breaks only at its <wbr> (Chrome honours one even under nowrap), after a slash, so each name stays whole; a path that fits
   its line is held on one line */
.tzg-guide .oa-defaults td:last-child .oa-path { white-space: nowrap; }
/* the next dates: the day held whole */
.tzg-guide .oa-next tbody th { white-space: nowrap; }
@media (min-width: 48.0625rem) {
  .tzg-guide .oa-errors tbody th { width: 50%; }
  .tzg-guide .oa-errors td:nth-child(2) { width: 34%; }
  .tzg-guide .oa-subs tbody th { width: 55%; }
  .tzg-guide .oa-next tbody th { width: 11rem; }
  .tzg-guide .oa-next td:last-child { width: 32%; }
}

/* Library defaults has four columns of long names (gpt-3.5-turbo-instruct, langchain-community, a 56-character path), which no
   reading column holds side by side. So every row is an entry at every width: the package as its title; then what sends it and
   its default side by side, each under an inline label; then where, across the entry, so each path holds one line on a desktop.
   The table roles stay in the markup, so a screen reader keeps the table and its own headers; the drawn labels are empty alt text. */
.tzg-guide .oa-defaults, .tzg-guide .oa-defaults tbody, .tzg-guide .oa-defaults tr, .tzg-guide .oa-defaults th, .tzg-guide .oa-defaults td { display: block; width: auto; }
.tzg-guide .oa-defaults thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tzg-guide .oa-defaults tbody { border-top: var(--wp-rule-strong) solid var(--wp-ink); }
.tzg-guide .oa-defaults tr { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--wp-2); padding: var(--wp-4) 0; border-bottom: var(--wp-rule) solid var(--wp-hair); }
.tzg-guide .oa-defaults th, .tzg-guide .oa-defaults td { border: 0; padding: 0; white-space: normal; }
.tzg-guide .oa-defaults 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); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp-muted); }
.tzg-guide .oa-defaults tbody th { font-size: var(--wp-text-body); line-height: 1.4; }
.tzg-guide .oa-defaults-wrap { container-type: inline-size; }
/* table.oa-defaults outranks the shared phone rules further down, which a 36-48rem column also meets */
@container (min-width: 36rem) {
  .tzg-guide table.oa-defaults tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--wp-6); }
  .tzg-guide table.oa-defaults th, .tzg-guide table.oa-defaults td:last-child { grid-column: 1 / -1; }
  .tzg-guide table.oa-defaults td:nth-child(2) { grid-column: 1; }
  .tzg-guide table.oa-defaults td:nth-child(3) { grid-column: 2; }
  .tzg-guide table.oa-defaults td::before { display: inline; margin: 0 var(--wp-2) 0 0; }
}

/* 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; }
  /* Find your error: each row becomes a card. The message is its title, whole, in the ledger mono at full column width; under it
     what it means, the label inline so it reads as a sentence; then the section link on its own line with a full tap height. */
  .tzg-guide .oa-errors tbody th { font-size: var(--wp-text-ledger); line-height: 1.5; padding: var(--wp-3) var(--wp-3) var(--wp-3) var(--wp-4); background: var(--wp-panel); border-left: 4px solid var(--wp-rust); }
  .tzg-guide .oa-errors tr { row-gap: var(--wp-2); padding: var(--wp-4) 0 var(--wp-3); }
  .tzg-guide .oa-errors td::before { display: inline; margin: 0 var(--wp-2) 0 0; text-transform: none; letter-spacing: 0; }
  .tzg-guide .oa-errors td:last-child::before { content: none; }
  .tzg-guide .oa-errors td:last-child a { display: inline-flex; align-items: center; min-height: var(--wp-tap); padding: 0; margin: 0; }
  /* substitutes: the names you have, then the substitute under its inline label */
  .tzg-guide .oa-subs tr { row-gap: var(--wp-1); padding: var(--wp-3) 0 var(--wp-4); }
  .tzg-guide .oa-subs tbody th { font-size: var(--wp-text-ledger); line-height: 1.5; }
  .tzg-guide .oa-subs td::before { display: inline; margin: 0 var(--wp-2) 0 0; text-transform: none; letter-spacing: 0; }
  /* library defaults: the package as the title, then each cell under its label; the source path is held whole */
  .tzg-guide .oa-defaults tr { row-gap: var(--wp-2); }
  /* the next dates: the day as the title, what shuts down under it; an empty libraries cell is left out */
  .tzg-guide .oa-next tr { row-gap: var(--wp-2); padding: var(--wp-3) 0 var(--wp-4); }
  .tzg-guide .oa-next td:nth-child(2)::before { content: none; }
  .tzg-guide .oa-next td:empty { display: none; }
}
@media (max-width: 43rem) {
  article.tzg-guide .check-block { font-size: .875rem; }
  /* a path of up to 40 characters fits the 390 column whole; a longer one (56) breaks after a slash, each name whole, and copies
     as one string */
  .tzg-guide .oa-defaults td:last-child code { font-size: .75rem; }
  /* 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); }
}