/* Tested-fix guide, built by the guide builder: the Canada runtimes guide template (section nav, copy-exact blocks, feed panel),
   two-part H1, ledger tables that become one block per row on a phone, next-step panel. Table rules after the base ones are made
   from each table's spec; a page's own extra rules, if any, come last. */
article.tzg-guide { max-width: 72rem; margin-inline: auto; }
/* The H1 opens with what a developer searches: the package, set in the mono face as it is typed in code, and the CVE ID in the alarm
   colour, held whole. The question follows on its own line in the display face, a step down. Nothing is cut. */
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 .ss-h1a { display: block; max-width: 20ch; }
article.tzg-guide h1 .ss-h1pkg { font-family: var(--wp-font-mono); font-weight: 500; font-size: .84em; letter-spacing: -0.03em; white-space: nowrap; }
article.tzg-guide h1 .ss-h1cve { color: var(--wp-rust); white-space: nowrap; }
article.tzg-guide h1 .gt-h1date { color: var(--wp-rust); white-space: nowrap; }
article.tzg-guide h1 .ss-h1b { display: block; margin-top: var(--wp-3); max-width: 30ch; 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; a block with a line wider than the 320 frame scrolls inside it and 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, then intro notes at body size. A list whose items each open in bold is a ruled list under a strong rule,
   numbered in the mono face in a hanging gutter; a note after it keeps a little air. */
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 ul.ss-four { list-style: none; counter-reset: ss-four; margin: var(--wp-4) 0 0; padding: 0; border-top: var(--wp-rule-strong) solid var(--wp-ink); }
article.tzg-guide ul.ss-four > li { counter-increment: ss-four; position: relative; margin: 0; padding: var(--wp-4) 0 var(--wp-4) 2.75rem; border-bottom: var(--wp-rule) solid var(--wp-hair); line-height: 1.55; }
article.tzg-guide ul.ss-four > li::before { content: counter(ss-four, decimal-leading-zero); content: counter(ss-four, decimal-leading-zero) / ""; position: absolute; left: 0; top: calc(var(--wp-4) + .1em); font: 500 var(--wp-text-cite)/1.4 var(--wp-font-mono); color: var(--wp-rust); letter-spacing: .04em; }
article.tzg-guide .tzg-intro.gt-after { margin-top: var(--wp-6); }
@container page (max-width: 30rem) { article.tzg-guide ul.ss-four > li { padding-left: 2.25rem; } }

/* tables: ledger lines, mono heads (the Anthropic guide's pattern) */
.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; }
.tzg-guide .tzg-table tbody th code { font-weight: 400; }
/* an advisory row head: the CVE (the name a reader searched) over its GHSA alias, muted (what Dependabot and the audit tools print);
   linked, both IDs are one two-line target of at least 48 px, and a severity note may follow, muted */
.tzg-guide .gt-ghsa { display: block; font-weight: 400; font-size: var(--wp-text-cite); }
.tzg-guide th > .gt-ghsa { color: var(--wp-muted); }
.tzg-guide .gt-advlink { display: inline-block; padding-block: var(--wp-1); }
.tzg-guide .gt-advlink:not(:hover, :focus-visible) .gt-ghsa { color: var(--wp-muted); }
.tzg-guide .gt-sev { display: block; margin-top: var(--wp-1); font-weight: 400; color: var(--wp-muted); font-size: var(--wp-text-cite); }
.tzg-guide .gt-sched .gt-alarm th { color: var(--wp-rust); }
/* fixed layout sizes columns from the head row, so the widths are set on head and body cells alike */
@container page (min-width: 54.0625rem) {
  .tzg-guide .gt-sched { table-layout: fixed; }
  .tzg-guide .gt-sched tr > :nth-child(1) { width: 26%; }
  .tzg-guide .gt-sched .gt-alarm th { box-shadow: inset 3px 0 0 var(--wp-rust); padding-left: var(--wp-3); }
  .tzg-guide .gt-sched tbody tr:not(.gt-alarm) th { box-shadow: inset 3px 0 0 var(--wp-hair); padding-left: var(--wp-3); }
  .tzg-guide .gt-sched thead th:first-child { padding-left: var(--wp-3); }
  .tzg-guide .gt-swap { table-layout: fixed; }
  .tzg-guide .gt-swap tr > :nth-child(1) { width: 30%; }
  .tzg-guide .gt-swap tr > :nth-child(2) { width: 48%; }
  .tzg-guide .gt-probe { table-layout: fixed; }
  .tzg-guide .gt-probe tr > :nth-child(1) { width: 30%; }
}
/* Below 54rem a 3- or 4-column row squeezes 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. */
@container page (max-width: 54rem) {
  .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); 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 { 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); 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; }
  .tzg-guide .gt-sched tbody tr { padding-left: var(--wp-3); border-left: 3px solid var(--wp-hair); }
  .tzg-guide .gt-sched tbody tr.gt-alarm { border-left-color: var(--wp-rust); }
  .tzg-guide .gt-sched td::before { content: none; }
  .tzg-guide .gt-probe td::before { content: none; }
}
/* 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: one-line items get a little air; a list of items a sentence or three long gets a paragraph's worth */
article.tzg-guide .results-section > ul > li + li { margin-top: var(--wp-2); }
article.tzg-guide .results-section > ul.gt-loose > li + li { margin-top: var(--wp-4); }
/* steps in order: the intro's ruled list, numbered in the mono face in a hanging gutter */
article.tzg-guide ol.gt-steps { list-style: none; counter-reset: gt-steps; margin: var(--wp-4) 0 var(--wp-6); padding: 0; border-top: var(--wp-rule-strong) solid var(--wp-ink); max-width: var(--cn-reading-max); }
article.tzg-guide ol.gt-steps > li { counter-increment: gt-steps; position: relative; margin: 0; padding: var(--wp-3) 0 var(--wp-3) 2.75rem; border-bottom: var(--wp-rule) solid var(--wp-hair); line-height: 1.55; }
article.tzg-guide ol.gt-steps > li::before { content: counter(gt-steps, decimal-leading-zero); content: counter(gt-steps, decimal-leading-zero) / ""; position: absolute; left: 0; top: calc(var(--wp-3) + .1em); font: 500 var(--wp-text-cite)/1.4 var(--wp-font-mono); color: var(--wp-rust); letter-spacing: .04em; }
@container page (max-width: 30rem) { article.tzg-guide ol.gt-steps > li { padding-left: 2.25rem; } }
/* output a tool printed carries the rust edge, as on the Ubuntu guides: read it, don't paste it */
article.tzg-guide .check-block.is-output { border-left: 4px solid var(--wp-rust); }
/* The next step (bet guide-conversion): "Next step" 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 .guide-next p.guide-next-note { margin: var(--wp-3) 0 0; font-size: var(--wp-text-cite); line-height: 1.5; color: var(--wp-muted); }
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); }