/* 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-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; }
  .tzg-guide .mm-versions thead th:nth-child(1) { width: 34%; }
  .tzg-guide .mm-versions thead th:nth-child(2) { width: 24%; }
  /* 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-override-wrap, .tzg-guide .mm-runs-wrap, .tzg-guide .mm-globover-wrap, .tzg-guide .mm-globruns-wrap { container: mm-wide / inline-size; }
@container mm-wide (max-width: 52rem) {
  .tzg-guide :is(.mm-override, .mm-runs, .mm-globover, .mm-globruns), .tzg-guide :is(.mm-override, .mm-runs, .mm-globover, .mm-globruns) :is(tbody, tr, th, td) { display: block; width: auto; }
  .tzg-guide :is(.mm-override, .mm-runs, .mm-globover, .mm-globruns) 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) tbody { border-top: var(--wp-rule-strong) solid var(--wp-ink); }
  .tzg-guide :is(.mm-override, .mm-runs, .mm-globover, .mm-globruns) 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) :is(th, td) { border: 0; padding: 0; width: auto; white-space: normal; }
  .tzg-guide :is(.mm-override, .mm-runs, .mm-globover, .mm-globruns) 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) td + td { margin-top: var(--wp-2); }
  .tzg-guide :is(.mm-override, .mm-runs, .mm-globover, .mm-globruns) 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) 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) 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; }