/* Tested-fix guide: the Canada runtimes guide template (section nav, copy-exact blocks, tables that stack into labelled rows on a phone).
   minimatch GHSA-g3hv-75wg-m249 guide: forked from the pnpm 12 guide stylesheet (Bitwarden < appimagetool < Oracle GraalVM 25 < Kubernetes
   CronJob < Spring < Cuba < Camunda < n8n < APScheduler < PHP2Shell check < OBS 33); the jump list in the intro, three h3, a reason line to
   copy, nine copy-exact blocks, and five tables (minimatch versions, override results, tool exceptions, package runs, package reads). */
article.tzg-guide { max-width: 72rem; margin-inline: auto; }
/* The H1 is a sentence in display type, 118 characters, that opens with the two IDs a reader searched for: balanced, five lines at
   desktop. Its floor is 1.625rem, as on the sibling guides; the longest word is the GHSA ID, held whole (measured at 320). */
article.tzg-guide h1 { max-width: 30ch; font-size: clamp(1.625rem, 1rem + 3vw, 3.5rem); line-height: 1.06; 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; check.sh's long lines (up to 182 characters) scroll inside the frame, so it 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 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; }
/* a source path (anthropic/resources/messages/messages.py) is one name: it breaks only at its <wbr>, after a slash */
.tzg-guide .oa-path { white-space: normal; }
/* The fix: numbered steps, each a block under a hairline with its number in the mono gutter. The number is drawn by CSS with empty
   alt text, so a screen reader keeps the list's own position and does not read it twice; role="list" keeps the list in Safari. The
   server command sits inside step 1, where it is run. */
article.tzg-guide ol.gh-steps { list-style: none; counter-reset: gh-step; padding: 0; margin: var(--wp-6) 0 var(--wp-8); border-bottom: var(--wp-rule) solid var(--wp-hair); }
article.tzg-guide ol.gh-steps > li { counter-increment: gh-step; position: relative; margin: 0; padding: var(--wp-6) 0 var(--wp-4) 4rem; border-top: var(--wp-rule) solid var(--wp-hair); }
article.tzg-guide ol.gh-steps > li:first-child { border-top: var(--wp-rule-strong) solid var(--wp-ink); }
article.tzg-guide ol.gh-steps > li::before { content: counter(gh-step, decimal-leading-zero); content: counter(gh-step, decimal-leading-zero) / ""; position: absolute; left: 0; top: var(--wp-6); font: 500 1.5rem/1.1 var(--wp-font-mono); letter-spacing: -0.02em; color: var(--wp-ink); }
article.tzg-guide ol.gh-steps > li > p { margin: 0 0 var(--wp-4); }
article.tzg-guide ol.gh-steps > li > ul + p { margin-top: var(--wp-4); }
article.tzg-guide ol.gh-steps > li > .check-block { margin: var(--wp-4) 0 var(--wp-6); }
article.tzg-guide ol.gh-steps li > ul > li + li { margin-top: var(--wp-6); }
article.tzg-guide ol.gh-steps li > ul > li > p { margin: 0; }
article.tzg-guide ol.gh-steps li > ul > li > .check-block { margin: var(--wp-3) 0 0; }
article.tzg-guide ol.gh-steps > li > :last-child { margin-bottom: var(--wp-2); }
/* The closing paragraph says who prepared the page and where to send a correction: body text at every width, set apart under a hairline */
article.tzg-guide .pk-signoff { margin-top: var(--wp-8); padding-top: var(--wp-4); border-top: var(--wp-rule) solid var(--wp-hair); }
/* The results table: each cell says in words what that setup did; the edge repeats only "it ran twice" for a reader scanning the rows
   (rust: the flag colour's one job). Every other cell has no edge; its words carry it. */
.tzg-guide .an-v { display: block; padding-left: var(--wp-3); border-left: 3px solid transparent; }
.tzg-guide .an-bad .an-v { border-left-color: var(--wp-rust); }
.tzg-guide .pk-matrix tbody th code { font-weight: 400; }
/* code in a head or a cell wraps at its spaces (zone = "America/New_York"), never inside a name */
.tzg-guide .tzg-table code { white-space: normal; }
/* "On this page": Content's numbered list of the four answers, set as a jump list under a hairline, not as the numbered steps of a fix.
   The numbers stay the list's own (mono, muted); each link keeps a 48px row. */
article.tzg-guide .pn-onpage-label { margin: var(--wp-6) 0 var(--wp-2); padding-top: var(--wp-4); border-top: var(--wp-rule) solid var(--wp-hair); font-weight: 600; }
article.tzg-guide ol.pn-onpage { margin: 0 0 var(--wp-4); padding-left: 2rem; }
article.tzg-guide ol.pn-onpage > li { margin: 0 0 var(--wp-3); padding-left: var(--wp-2); line-height: 1.5; }
article.tzg-guide ol.pn-onpage > li::marker { font-family: var(--wp-font-mono); color: var(--wp-muted); }
/* a 48px hit area on each jump link with no line moved (the lh-padding + matching negative margin rule) */
article.tzg-guide ol.pn-onpage a { padding-block: calc((var(--wp-tap) - 1.5em) / 2); margin-block: calc((var(--wp-tap) - 1.5em) / -2); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* r2: the two conversion routes in #ignore are bullets, the first carrying its awk line; the line sits under its lead and scrolls in its
   frame, and the routes are spaced as two options, not as a run-on list */
article.tzg-guide .results-section > ul:has(> li > .check-block) > li + li { margin-top: var(--wp-6); }
article.tzg-guide .results-section > ul > li > p { margin: 0; }
article.tzg-guide .results-section > ul > li > .check-block { margin: var(--wp-3) 0 var(--wp-3); }
/* The override table is the page's trade-off: the result column and the audit column are verdicts, and only a cost (Breaks, or an audit
   that still lists the advisory) carries the rust edge. The row head is the package; its version stays in body weight. */
.tzg-guide .mm-override thead th:nth-child(2), .tzg-guide .mm-override thead th:nth-child(4) { padding-left: calc(var(--wp-3) + 3px); }
/* the audit head's GHSA ID is the widest word in any head: tighter tracking lets the result column keep a whole rule name beside it */
.tzg-guide .mm-override thead th:nth-child(4) { letter-spacing: 0.02em; }
/* The glob override table works the same way: only its result column is a verdict (rimraf 3 breaks; npm refuses the override) */
.tzg-guide .mm-globover thead th:nth-child(3) { padding-left: calc(var(--wp-3) + 3px); }
/* the glob section's date: a quiet dated note under its heading, so a returning reader sees what is new */
article.tzg-guide .mm-added { margin: 0 0 var(--wp-4); font-size: var(--wp-text-cite); color: var(--wp-muted); }
/* the rule names and first error lines are values a reader may search for: mono, a step smaller, wrapping at their spaces; the result
   column holds a whole rule name (no-extraneous-dependencies) */
.tzg-guide .mm-override td:nth-child(2) code, .tzg-guide .mm-override td:nth-child(3) code, .tzg-guide .mm-runs td:nth-child(2) code, .tzg-guide .mm-reads td code,
.tzg-guide .mm-globover td:nth-child(3) code, .tzg-guide .mm-globover td:nth-child(4) code, .tzg-guide .mm-globruns td:nth-child(2) code { font-size: .875em; }
@container page (min-width: 48.0625rem) {
  .tzg-guide .mm-who, .tzg-guide .mm-trust, .tzg-guide .mm-images,
  .tzg-guide .mm-fix, .tzg-guide .mm-deps, .tzg-guide .mm-adv,
  .tzg-guide .mm-versions, .tzg-guide .mm-override, .tzg-guide .mm-tools, .tzg-guide .mm-runs, .tzg-guide .mm-reads, .tzg-guide .mm-globover, .tzg-guide .mm-globruns { table-layout: fixed; }
  /* the fix table: where the copy is, the fixed versions (the longest cell: four Ubuntu releases with their package versions), the source,
     whose advisory ID is held whole; below 52rem of its own width it is a list of labelled cards (the ID crossed a 22% column up to 1210px) */
  /* the census: binary, latest release with its date, the toolchain (go1.26.10, short), and the verdict, which carries the issue
     link and the Stripe and yq notes (the longest cell) */
  .tzg-guide .mm-who thead th:nth-child(1) { width: 24%; }
  .tzg-guide .mm-who thead th:nth-child(2) { width: 22%; }
  .tzg-guide .mm-who thead th:nth-child(3) { width: 14%; }
  /* the Debian 13 matrix: the setup (the longest cell) and the two results */
  .tzg-guide .mm-trust thead th:nth-child(1) { width: 46%; }
  .tzg-guide .mm-trust thead th:nth-child(2) { width: 27%; }
  /* the other images: the image reference (gcr.io/distroless/static-debian13:latest breaks only after a slash), its CA package, the result */
  .tzg-guide .mm-images thead th:nth-child(1) { width: 42%; }
  .tzg-guide .mm-images thead th:nth-child(2) { width: 30%; }
  /* the dependents table: the package and its version, its Pillow requirement (code), the resolver result, and what ran on 13.0.0 (the
     longest cell); the advisory table: the ID (held whole, with its CVE and severity), the bug, what kept the path unreached, and what we
     tested (the longest cells). Both are labelled cards below 52rem of their own width */
  .tzg-guide .mm-deps thead th:nth-child(1) { width: 22%; }
  .tzg-guide .mm-deps thead th:nth-child(2) { width: 22%; }
  .tzg-guide .mm-deps thead th:nth-child(3) { width: 20%; }
  /* the ID column holds a whole bold GHSA ID and its comma: at 21% they crossed it by 1-4px at 900 and 1220px */
  .tzg-guide .mm-adv thead th:nth-child(1) { width: 24%; }
  .tzg-guide .mm-adv thead th:nth-child(2) { width: 21%; }
  .tzg-guide .mm-adv thead th:nth-child(3) { width: 27%; }
  .tzg-guide .mm-fix thead th:nth-child(1) { width: 30%; }
  .tzg-guide .mm-fix thead th:nth-child(2) { width: 44%; }
  /* the audit head holds the GHSA ID whole (about 130px in the capitals mono, its letter spacing tightened): 23% keeps it inside its column from 48rem, where the
     nav column returns at 62.5rem and the table is narrowest (trial r1 crossed the page by 10-20px with 18%) */
  .tzg-guide .mm-override thead th:nth-child(1) { width: 22%; }
  .tzg-guide .mm-override thead th:nth-child(2) { width: 27%; }
  .tzg-guide .mm-override thead th:nth-child(3) { width: 28%; }
  .tzg-guide .mm-tools thead th:nth-child(1) { width: 24%; }
  .tzg-guide .mm-tools thead th:nth-child(2) { width: 44%; }
  .tzg-guide .mm-runs thead th:nth-child(1) { width: 25%; }
  .tzg-guide .mm-runs thead th:nth-child(2) { width: 43%; }
  .tzg-guide .mm-globover thead th:nth-child(1) { width: 22%; }
  .tzg-guide .mm-globover thead th:nth-child(2) { width: 22%; }
  .tzg-guide .mm-globover thead th:nth-child(3) { width: 34%; }
  .tzg-guide .mm-globruns thead th:nth-child(1) { width: 21%; }
  .tzg-guide .mm-globruns thead th:nth-child(2) { width: 40%; }
  .tzg-guide .mm-reads thead th:nth-child(1) { width: 34%; }
  .tzg-guide .mm-reads thead th:nth-child(2) { width: 38%; }
}
/* The reason line is text to adapt and paste into an exception: set apart on the ink edge in a quiet panel, body type, so it reads as
   a line to copy and not as another quote. Its bare URL breaks only before a path segment. */
article.tzg-guide blockquote.mm-reason { margin: var(--wp-4) 0 var(--wp-6); padding: var(--wp-4) var(--wp-4) var(--wp-4) var(--wp-5, 1.25rem); background: var(--wp-panel); border-left: 3px solid var(--wp-ink); }
article.tzg-guide blockquote.mm-reason p { margin: 0; max-width: 62ch; }
/* the h3 inside a section: a sub-answer under its h2 (the version table, the scoped override, Node 18) */
article.tzg-guide .results-section h3 { margin-top: var(--wp-10, 2.5rem); }

/* one column up to 62.5rem/* 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; }
}
/* Below 48rem a 5-column row would squeeze each cell to a word a line. Each row becomes a card: where -1 was set (or the probe's
   output line, or the reload step) as its title, then its values, each under its column head. In a matrix the results sit two by two.
   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: 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); row-gap: var(--wp-2); padding: var(--wp-4) 0 var(--wp-5, 1.25rem); 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 tbody th { grid-column: 1 / -1; font-size: var(--wp-text-body); line-height: 1.4; }
  .tzg-guide .tzg-table td + td { margin-top: var(--wp-2); }
  .tzg-guide .tzg-table td.mm-empty { display: none; }
  .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.35 var(--wp-font-mono); color: var(--wp-muted); }
}
/* The override and runs tables have four columns of long package names and error lines: as a table they need about 52rem (trial
   r1: from 770 to 1150px the names crossed their cells). Each decides by its own width, so below 52rem it is a list of labelled cards at
   every page width (a laptop with the nav column included); at 1440 both are tables. */
.tzg-guide .mm-fix-wrap, .tzg-guide .mm-scan-wrap, .tzg-guide .mm-override-wrap, .tzg-guide .mm-runs-wrap, .tzg-guide .mm-globover-wrap, .tzg-guide .mm-globruns-wrap, .tzg-guide .mm-deps-wrap, .tzg-guide .mm-adv-wrap { container: mm-wide / inline-size; }
@container mm-wide (max-width: 52rem) {
  .tzg-guide :is(.mm-override, .mm-runs, .mm-globover, .mm-globruns, .mm-scan, .mm-fix, .mm-deps, .mm-adv), .tzg-guide :is(.mm-override, .mm-runs, .mm-globover, .mm-globruns, .mm-scan, .mm-fix, .mm-deps, .mm-adv) :is(tbody, tr, th, td) { display: block; width: auto; }
  .tzg-guide :is(.mm-override, .mm-runs, .mm-globover, .mm-globruns, .mm-scan, .mm-fix, .mm-deps, .mm-adv) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tzg-guide :is(.mm-override, .mm-runs, .mm-globover, .mm-globruns, .mm-scan, .mm-fix, .mm-deps, .mm-adv) tbody { border-top: var(--wp-rule-strong) solid var(--wp-ink); }
  .tzg-guide :is(.mm-override, .mm-runs, .mm-globover, .mm-globruns, .mm-scan, .mm-fix, .mm-deps, .mm-adv) tr { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--wp-2); padding: var(--wp-4) 0 var(--wp-5, 1.25rem); border-bottom: var(--wp-rule) solid var(--wp-hair); }
  .tzg-guide :is(.mm-override, .mm-runs, .mm-globover, .mm-globruns, .mm-scan, .mm-fix, .mm-deps, .mm-adv) :is(th, td) { border: 0; padding: 0; width: auto; white-space: normal; }
  .tzg-guide :is(.mm-override, .mm-runs, .mm-globover, .mm-globruns, .mm-scan, .mm-fix, .mm-deps, .mm-adv) tbody th { grid-column: 1 / -1; font-size: var(--wp-text-body); line-height: 1.4; }
  .tzg-guide :is(.mm-override, .mm-runs, .mm-globover, .mm-globruns, .mm-scan, .mm-fix, .mm-deps, .mm-adv) td + td { margin-top: var(--wp-2); }
  .tzg-guide :is(.mm-override, .mm-runs, .mm-globover, .mm-globruns, .mm-scan, .mm-fix, .mm-deps, .mm-adv) td::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: var(--wp-1); font: 500 var(--wp-text-cite)/1.35 var(--wp-font-mono); color: var(--wp-muted); }
  /* an override card: the package as its title, then its result, the first error line and the audit, each under its head. A cost cell's
     rust edge hangs in the gutter so every value starts on the label's edge. */
  .tzg-guide :is(.mm-override, .mm-globover) .an-ok .an-v { padding-left: 0; border-left: 0; }
  .tzg-guide :is(.mm-override, .mm-globover) .an-bad .an-v { margin-left: calc(-1 * (var(--wp-3) + 3px)); }
  /* the audit head carries the advisory ID; it gets its own line in the label, so the ID never breaks at a hyphen */
  .tzg-guide .mm-override td:nth-child(4)::before { white-space: pre-line; }
  /* an empty cell (no error line where the package works; no exit codes for aws-cdk-lib) is hidden from the card, where its head would
     stand alone; at desktop the table keeps the empty cell */
  .tzg-guide :is(.mm-override, .mm-runs, .mm-globover, .mm-globruns, .mm-scan, .mm-fix, .mm-deps, .mm-adv) td.mm-empty { display: none; }
  /* a run card: the package as its title, the test under it, and the two exit codes side by side (one short value each) */
  .tzg-guide .mm-runs tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--wp-4); }
  .tzg-guide .mm-runs td:nth-child(2) { grid-column: 1 / -1; }
  .tzg-guide .mm-runs td:nth-child(3), .tzg-guide .mm-runs td:nth-child(4) { margin-top: var(--wp-2); }
  /* a glob run card has three exit codes (as published, 14.0.2, 14.0.3) side by side under the test */
  .tzg-guide .mm-globruns tr { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--wp-4); }
  .tzg-guide .mm-globruns td:nth-child(2) { grid-column: 1 / -1; }
  .tzg-guide .mm-globruns td:nth-child(n+3) { margin-top: var(--wp-2); }
  /* on a wide screen the cards keep a readable measure */
  .tzg-guide :is(.mm-override, .mm-runs, .mm-globover, .mm-globruns, .mm-scan, .mm-fix, .mm-deps, .mm-adv) tbody { max-width: 44rem; }
}
@container page (max-width: 43rem) {
  /* two-digit markers need the room on a phone gutter */
  .tzg-guide .guide-nav ol { padding-left: 2.5rem; }
  /* on a phone the step number sits above its lead, so the code block keeps the full column */
  article.tzg-guide ol.gh-steps > li { padding-left: 0; padding-top: var(--wp-4); }
  article.tzg-guide ol.gh-steps > li::before { position: static; display: block; margin-bottom: var(--wp-2); font-size: 1.125rem; }
}

/* 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); }
}
/* weekly email: the second way to follow, under the feed panel in the reading column; quiet next to the fix */
/* the grid's row gap already separates them: pull the card up so it reads as the feed's companion */
.tzg-guide .fix-feed:has(+ .mq-signup) { margin-bottom: 0; }
.tzg-guide .mq-signup { grid-column: 2; display: grid; gap: var(--wp-3); max-width: 40rem; margin: calc(var(--wp-8) - var(--wp-16)) 0 var(--wp-12); padding: var(--wp-6); background: var(--wp-panel); border: var(--wp-rule) solid var(--wp-ink); }
.tzg-guide .mq-signup p { margin: 0; max-width: 50ch; }
.tzg-guide .mq-signup-title { font: 600 1.5rem/1.1 var(--wp-font-display); letter-spacing: -0.01em; text-wrap: balance; }
/* one field; the button sits beside it on wide screens and under it on phones */
.tzg-guide .mq-signup-label { font-weight: 700; line-height: 1.25; margin-bottom: -.25rem; }
.tzg-guide .mq-signup-row { display: flex; flex-wrap: wrap; gap: var(--wp-2); }
.tzg-guide .mq-signup-row input { flex: 1 1 14rem; min-width: 0; min-height: var(--wp-tap); padding: 0 .75rem; background: var(--wp-paper); border: 2px solid var(--wp-ink); border-radius: 0; color: var(--wp-ink); font: inherit; }
/* square, in the feed chip's cobalt: one action language on the page (form. outranks the global pill button) */
.tzg-guide form.mq-signup .mq-signup-row button { flex: 0 0 auto; min-height: var(--wp-tap); padding: 0 var(--wp-4); background: var(--wp-bio); border: 2px solid var(--wp-bio); border-radius: 0; color: var(--wp-on-bio); cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.tzg-guide form.mq-signup .mq-signup-row button:hover { background: var(--wp-cobalt-deep); border-color: var(--wp-cobalt-deep); text-decoration: underline; text-underline-offset: 4px; }
.tzg-guide .mq-signup-fine { color: var(--wp-muted); font-size: .9375rem; line-height: 1.5; overflow-wrap: anywhere; }
.tzg-guide .mq-signup-fine a { color: inherit; }
@container page (max-width: 62.5rem) {
  .tzg-guide .mq-signup { grid-column: auto; margin-top: 0; }
}
@container page (max-width: 30rem) {
  .tzg-guide .mq-signup { padding: var(--wp-4); }
  .tzg-guide .mq-signup-row input, .tzg-guide form.mq-signup .mq-signup-row button { flex-basis: 100%; }
}
/* the weekly email form follows the fix in the reading column, as on the guides that had no form */
.tzg-guide .guide-reading > .mq-signup { grid-column: auto; margin: var(--wp-12) 0 0; }