/* Tested-fix guide: the Canada runtimes guide template (section nav, copy-exact blocks, feed panel).
   TLS renewal guide (64-day / 100-day certificates): forked from the IRS FIRE guide stylesheet. The page's object is the calendar of
   lifetimes: the H1 asks the reader's question with its two lifetimes in the alarm colour, the Dates list is a dated ledger, the tested
   results are evidence notes, and 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 two lifetimes are held whole (never "64-" / "day") 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 .tls-h1n { 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 check's echo line (124 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 .tls-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 .tls-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 Dates list is the page's object: a dated ledger. Each row opens with its "<date> — <change>." head in the display weight, the
   date in mono and the alarm colour, held whole; the source and detail follow at body size. A strong rule opens the ledger. */
article.tzg-guide .tls-dates { list-style: none; padding: 0; margin: var(--wp-6) 0; border-top: var(--wp-rule-strong) solid var(--wp-ink); }
article.tzg-guide .tls-dates li { padding: var(--wp-5, 1.25rem) 0; margin: 0; border-bottom: var(--wp-rule) solid var(--wp-hair); }
article.tzg-guide .tls-dates li::marker { content: none; }
article.tzg-guide .tls-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 .tls-date { color: var(--wp-rust); font: 500 .95em/1.25 var(--wp-font-mono); white-space: nowrap; }

/* Tested results ("Observed on ...") are evidence notes on a hairline rule; the limits ("No automatic fix", "Scope of the repair")
   carry the alarm edge, because they say what the reader still has to do */
article.tzg-guide .tls-note { max-width: 44em; padding: var(--wp-1) 0 var(--wp-1) var(--wp-4); }
article.tzg-guide .tls-observed { border-left: 2px solid var(--wp-ink); }
article.tzg-guide .tls-limit { border-left: 4px solid var(--wp-rust); }
article.tzg-guide .tls-limit > 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, cobalt, with a 48 px target that does not move the
   line. The text's sign-off follows the panel. */
article.tzg-guide .results-section.tls-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 .tls-next h2 { margin-top: 0; }
article.tzg-guide .tls-next p { max-width: 54ch; margin-bottom: 0; font-size: clamp(1rem, .95rem + .25vw, 1.125rem); line-height: 1.6; }
article.tzg-guide .tls-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 .tls-next-go:hover { text-decoration-color: var(--wp-ink); }
article.tzg-guide .tls-next p a:not(.tls-next-go) { font-weight: inherit; }
article.tzg-guide .results-section.tls-next + .pk-signoff { border-top: 0; }
@container page (max-width: 30rem) {
  article.tzg-guide .results-section.tls-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); }