/* Tested-fix guide: the Canada runtimes guide template (section nav, copy-exact blocks, feed panel).
   Docker Notary v1 shutdown guide: forked from the TLS renewal guide stylesheet. The page's object is a switch and its deadline: the H1
   asks the reader's question with its date in the alarm colour, The date is a ledger whose one dated row is the shutdown, the findings
   and the checker's categories read as heads with their detail, tested results are evidence notes and the "already broken" warning
   carries the alarm edge; the next step (the calendar's repository check) is the closing panel's one prominent link. */
article.tzg-guide { max-width: 72rem; margin-inline: auto; }
/* The H1 is the question a searcher typed; its date (the deadline) is held whole and set in the alarm colour */
article.tzg-guide h1 { max-width: 20ch; font-size: clamp(1.875rem, 1rem + 2.8vw, 3.5rem); line-height: 1.04; text-wrap: balance; }
article.tzg-guide h1 .dct-h1d { color: var(--wp-rust); white-space: nowrap; }
/* 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 byline (the text's own line) sits under the question; its date stays one unit on a phone */
.tzg-guide .guide-byline { color: var(--wp-muted); margin: var(--wp-4) 0 var(--wp-8); }
.tzg-guide .guide-byline time { white-space: nowrap; }
.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 grep line (108 characters) scrolls inside its frame, so the block 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 answer), the dates paragraph at body size, then the text's "Jump to" line as a quiet mono index whose
   links keep a 48 px target without moving their line */
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); }
article.tzg-guide .dct-jump { margin: var(--wp-6) 0 0; padding-top: var(--wp-3); border-top: var(--wp-rule) solid var(--wp-hair); font: 500 .875rem/2 var(--wp-font-mono); color: var(--wp-muted); }
article.tzg-guide .dct-jump a { padding-block: max(4px, calc(var(--wp-tap) / 2 - 1em)); margin-block: calc(-1 * max(4px, calc(var(--wp-tap) / 2 - 1em))); }
/* 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); }
}
/* code blocks and notes get a paragraph of air from the prose around them */
article.tzg-guide .results-section > .check-block { margin: var(--wp-4) 0 var(--wp-6); }

/* The date is a ledger: the shutdown row opens with its "<date> — <change>." head in the display weight, the date in mono and the
   alarm colour, held whole; the three source rows follow it at body size under hairlines. A strong rule opens the ledger. */
article.tzg-guide .dct-ledger { list-style: none; padding: 0; margin: var(--wp-6) 0; border-top: var(--wp-rule-strong) solid var(--wp-ink); }
article.tzg-guide .dct-ledger li { padding: var(--wp-4) 0; margin: 0; border-bottom: var(--wp-rule) solid var(--wp-hair); }
article.tzg-guide .dct-ledger li::marker { content: none; }
article.tzg-guide .dct-ledger .dct-dated { padding: var(--wp-5, 1.25rem) 0; }
article.tzg-guide .dct-date-head { display: block; margin-bottom: var(--wp-2); font: 600 clamp(1.125rem, 1rem + .4vw, 1.3rem)/1.25 var(--wp-font-display); letter-spacing: -0.01em; }
article.tzg-guide .dct-date { color: var(--wp-rust); font: 500 .95em/1.25 var(--wp-font-mono); white-space: nowrap; }
article.tzg-guide .dct-source { color: var(--wp-ink); }

/* Who breaks and the checker's categories: each item's own head (the bold lead, the category's code name) starts the row, the
   detail follows; hairlines separate the rows so a long finding reads as one unit */
article.tzg-guide .dct-list { list-style: none; padding: 0; margin: var(--wp-6) 0; border-top: var(--wp-rule) solid var(--wp-ink); }
article.tzg-guide .dct-list li { padding: var(--wp-4) 0; margin: 0; border-bottom: var(--wp-rule) solid var(--wp-hair); }
article.tzg-guide .dct-list li::marker { content: none; }
article.tzg-guide .dct-cats .dct-cat { font-weight: 600; color: var(--wp-ink); }

/* Tested results ("Observed on ...") are evidence notes on a hairline rule; "Some pipelines may already be broken" carries the alarm
   edge, because it says the failure may already be here */
article.tzg-guide .dct-note { max-width: 44em; padding: var(--wp-1) 0 var(--wp-1) var(--wp-4); }
article.tzg-guide .dct-observed { border-left: 2px solid var(--wp-ink); }
article.tzg-guide .dct-alarm { border-left: 4px solid var(--wp-rust); }
article.tzg-guide .dct-alarm > strong:first-child { color: var(--wp-rust); }

/* The next step: "Keep the next change visible" is the closing panel under the rust edge of the next-step block. Its first link, the
   Breakage Calendar repository check, is the page's one call to action: heavier, with a rust underline and a 48 px target that does
   not move the line. The text's sign-off follows the panel. */
article.tzg-guide .results-section.dct-next { margin-top: var(--wp-12); padding: var(--wp-6); background: var(--wp-panel); border: var(--wp-rule) solid var(--wp-ink); border-left: 4px solid var(--wp-rust); }
article.tzg-guide .dct-next h2 { margin-top: 0; }
article.tzg-guide .dct-next p { max-width: 54ch; margin-bottom: 0; font-size: clamp(1rem, .95rem + .25vw, 1.125rem); line-height: 1.6; }
article.tzg-guide .dct-next-go { font-weight: 600; text-decoration-color: var(--wp-rust); text-decoration-thickness: 3px; text-underline-offset: 5px; padding-block: 13px; margin-block: -13px; }
article.tzg-guide .dct-next-go:hover { text-decoration-color: var(--wp-ink); }
article.tzg-guide .dct-next p a:not(.dct-next-go) { font-weight: inherit; }
article.tzg-guide .results-section.dct-next + .pk-signoff { border-top: 0; }
@container page (max-width: 30rem) {
  article.tzg-guide .results-section.dct-next { padding: var(--wp-5, 1.25rem) var(--wp-4); }
}

/* 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 text's own sign-off, set as the other guides' sign-off line */
article.tzg-guide .pk-signoff { margin-top: var(--wp-8); padding-top: var(--wp-4); border-top: var(--wp-rule) solid var(--wp-hair); }