/* Tested-fix guide: the Canada runtimes guide template (section nav, copy-exact blocks, feed panel).
   pull_request_target guide: forked from the IRS FIRE guide stylesheet (two-part H1, ruled intro note, feed panel, next-step panel),
   with GitHub's run annotation as a quoted annotation and the three ways out as ruled option heads. No table. */
article.tzg-guide { max-width: 72rem; margin-inline: auto; }
/* The H1 opens with what a maintainer searches: the event name, set in the mono face as it is typed in a workflow file (it may break
   only after an underscore), and the run status "Startup failure" in the alarm colour, held whole. What the page is about follows on
   its own line in the display face, a step down, held to a reading measure. Nothing is cut: both parts wrap at their spaces. */
article.tzg-guide h1 { max-width: none; font-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem); line-height: 1.06; }
article.tzg-guide h1 .prt-h1a { display: block; max-width: 22ch; text-wrap: balance; }
article.tzg-guide h1 .prt-h1ev { font-family: var(--wp-font-mono); font-weight: 500; font-size: .84em; letter-spacing: -0.03em; }
article.tzg-guide h1 .prt-h1st { color: var(--wp-rust); white-space: nowrap; }
article.tzg-guide h1 .prt-h1b { display: block; margin-top: var(--wp-3); max-width: 34ch; font-size: clamp(1.25rem, .9rem + 1.2vw, 1.8rem); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
/* 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, 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), then the reader's case ("If a labeler ... went red"), as a ruled note in the alarm colour */
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 .prt-now { margin-top: var(--wp-6); font-size: clamp(1rem, .95rem + .25vw, 1.125rem); padding: var(--wp-1) 0 var(--wp-1) var(--wp-4); border-left: 4px solid var(--wp-rust); }
article.tzg-guide .prt-now strong { color: var(--wp-rust); }
/* 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); }
}
/* lists: Sources (one line each) get a little air; the hidden-cause list and the policy steps are a sentence or three each, so they
   get a paragraph's worth */
article.tzg-guide .results-section > ul > li + li { margin-top: var(--wp-2); }
article.tzg-guide #failure > ul > li + li, article.tzg-guide #ways-out > ul > li + li { margin-top: var(--wp-4); }

/* GitHub's run annotation, quoted word for word: it reads as the message on the run page, a panel with the alarm edge, set a step
   smaller than the prose so it is never mistaken for our words. Its inline code wraps with it. */
article.tzg-guide blockquote.prt-annotation { margin: var(--wp-6) 0 var(--wp-8); padding: var(--wp-4) var(--wp-5, 1.25rem); max-width: var(--cn-reading-max); background: var(--wp-panel); border: var(--wp-rule) solid var(--wp-hair); border-left: 4px solid var(--wp-rust); font-size: var(--wp-text-ledger); line-height: 1.55; }
article.tzg-guide blockquote.prt-annotation p { margin: 0; max-width: none; }
article.tzg-guide blockquote.prt-annotation code { white-space: normal; }
@container page (max-width: 30rem) { article.tzg-guide blockquote.prt-annotation { padding: var(--wp-3) var(--wp-4); } }

/* The three ways out: each opens with its bold numbered head (the text's own words), ruled above in ink so a reader scanning for
   "which one is yours" finds three clear starts; the head reads a step up from the prose. */
article.tzg-guide .prt-way { margin-top: var(--wp-8); padding-top: var(--wp-4); border-top: var(--wp-rule-strong) solid var(--wp-ink); }
article.tzg-guide .prt-way > strong:first-child { font-size: 1.0625em; }

/* The next step (bet guide-conversion): "The same date in your repository" is a panel under the rust edge of the next-step block,
   and its link is the page's one button (cobalt is the action). The button may wrap at its spaces on a phone, never past the panel. */
article.tzg-guide .results-section.guide-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 .guide-next h2 { margin-top: 0; }
article.tzg-guide .guide-next p { max-width: 54ch; }
article.tzg-guide .guide-next-go { margin: var(--wp-6) 0 0; }
article.tzg-guide .guide-next-go .button { max-width: 100%; text-align: center; white-space: normal; text-wrap: balance; }
article.tzg-guide .results-section.guide-next + .results-section { border-top: 0; }
@container page (max-width: 30rem) {
  article.tzg-guide .results-section.guide-next { padding: var(--wp-5, 1.25rem) var(--wp-4); }
  article.tzg-guide .guide-next-go .button { display: flex; width: 100%; padding-inline: 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 template's standard sign-off, as the other guides */
article.tzg-guide .pk-signoff { margin-top: var(--wp-8); padding-top: var(--wp-4); border-top: var(--wp-rule) solid var(--wp-hair); }