/* Tested-fix guide: the Canada runtimes guide template (section nav, copy-exact blocks, tables that stack into labelled rows on a phone).
   Rails 8.1.4.1 / 8.0.5.2 security-release status guide: forked from the XSLT sitemap guide stylesheet (minimatch < pnpm 12 < Bitwarden
   < appimagetool < Oracle GraalVM 25 < Kubernetes CronJob < Spring < Cuba < Camunda < n8n < APScheduler < PHP2Shell check < OBS 33), set
   in the PHP security-release guide's verdict language: a filled square repeats each table's answer in shape as well as colour. */
article.tzg-guide { max-width: 72rem; margin-inline: auto; }
/* The H1 is a question in display type, 96 characters: balanced, three lines at desktop. Its floor is 1.625rem, as on the sibling guides.
   The two fixed versions and "7.2" stay whole, in even figures, so a phone never splits 8.0.5.2 at a dot (the PHP guide's rule). */
article.tzg-guide h1 { max-width: 28ch; font-size: clamp(1.625rem, 1rem + 3vw, 3.5rem); line-height: 1.06; text-wrap: balance; }
.tzg-guide h1 .rl-v { white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
/* 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 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); }
/* 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; }


/* 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 the status table's five columns would squeeze each cell to a word a line, and the receipts' command would wrap beside
   its result. Each row becomes a card: the application (or the command) as its title, then its values, each 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. The fixed-in table is three short columns and stays a table at every width. */
@container page (max-width: 48rem) {
  .tzg-guide .rl-receipts, .tzg-guide .rl-receipts :is(tbody, tr, th, td) { display: block; width: auto; }
  .tzg-guide .rl-receipts thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tzg-guide .rl-receipts tbody { border-top: var(--wp-rule-strong) solid var(--wp-ink); }
  .tzg-guide .rl-receipts 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 .rl-receipts :is(th, td) { border: 0; padding: 0; width: auto; white-space: normal; }
  .tzg-guide .rl-receipts tbody th { grid-column: 1 / -1; font-size: var(--wp-text-body); line-height: 1.4; }
  .tzg-guide .rl-receipts td + td { margin-top: var(--wp-2); }
  .tzg-guide .rl-receipts 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); }
}
@container page (max-width: 43rem) {
  /* two-digit markers need the room on a phone gutter */
  .tzg-guide .guide-nav ol { padding-left: 2.5rem; }
}
}

/* 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; }
/* Step headings: the text numbers the three steps ("1. Which Rails …"); the number is page text, set in the mono face of the nav's
   markers so the heading and its nav entry read as one sequence. */
.tzg-guide .results-section h2 .rl-step { font-family: var(--wp-font-mono); font-weight: 500; letter-spacing: -0.02em; margin-right: .1em; }
/* step 2's three conditions: a numbered list whose numbers are mono, like the nav's; each condition stays its own line of argument */
article.tzg-guide ol.rl-conditions { margin: var(--wp-4) 0 var(--wp-6); padding-left: 2rem; }
article.tzg-guide ol.rl-conditions > li { padding-left: var(--wp-2); }
article.tzg-guide ol.rl-conditions > li + li { margin-top: var(--wp-3); }
article.tzg-guide ol.rl-conditions > li::marker { font-family: var(--wp-font-mono); color: var(--wp-muted); }
/* the Compose yaml block keeps its four-space indent: it is the shape a reader pastes into a service */
article.tzg-guide .results-section > .check-block { margin: var(--wp-4) 0 var(--wp-6); }

/* The verdict, the PHP guide's language: the words carry it and a square before them repeats it in shape as well as colour.
   Filled cobalt = Rails publishes a fixed release for that line; filled rust = it publishes none. */
.tzg-guide .rl-verdict { display: inline-block; position: relative; padding-left: 1.25em; }
.tzg-guide .rl-verdict::before { content: ""; position: absolute; left: 0; top: .32em; width: .72em; height: .72em; box-sizing: border-box; border: 2px solid var(--wp-ink); }
.tzg-guide .rl-verdict.is-fixed::before { background: var(--wp-bio); border-color: var(--wp-bio); }
.tzg-guide .rl-verdict.is-none { color: var(--wp-rust); font-weight: 600; }
.tzg-guide .rl-verdict.is-none::before { background: var(--wp-rust); border-color: var(--wp-rust); }

/* Fixed-in: the answer to the search, three short columns at reading size. The line and the fixed release are the values a reader
   compares with, so they are set in mono; the support-end note after 8.0.5.2 reads as a note, in the text face. */
.tzg-guide .rl-fixed-wrap { margin-top: var(--wp-8); max-width: 44rem; }
.tzg-guide table.rl-fixed { font-size: var(--wp-text-body); }
.tzg-guide .rl-fixed tbody th, .tzg-guide .rl-fixed td { font-family: var(--wp-font-mono); font-weight: 400; font-variant-numeric: tabular-nums; }
.tzg-guide .rl-fixed tbody th { width: 30%; font-weight: 500; }
.tzg-guide .rl-fixed td:nth-child(2) { width: 40%; }
.tzg-guide .rl-fixed td:nth-child(3) { color: var(--wp-muted); font-size: var(--wp-text-ledger); }
@container page (max-width: 30rem) {
  .tzg-guide table.rl-fixed { font-size: var(--wp-text-ledger); }
  /* at 320 the line column holds "7.2, 7.1," on one line; the fixed release keeps its note under the version */
  .tzg-guide .rl-fixed tbody th { width: 36%; }
  .tzg-guide .rl-fixed td:nth-child(2) { width: 36%; }
  .tzg-guide .rl-fixed :is(th, td) { padding-right: var(--wp-3); }
}

/* Status: ten applications. The first column names the release read (a link to the cited line), the last answers "is there a Rails fix
   for this line". At desktop the reading column holds all five at fixed widths; the configuration cells hold code that wraps at its
   spaces, never inside a name. */
@container page (min-width: 48.0625rem) {
  .tzg-guide table.rl-receipts { table-layout: fixed; }
  .tzg-guide .rl-receipts thead th:nth-child(1) { width: 30%; }
  .tzg-guide .rl-receipts thead th:nth-child(2) { width: 32%; }
  .tzg-guide .rl-receipts tbody th { font-weight: 400; }
}
/* The status table is a table only where it has the room: by its own width, not the page's, because from 62.5rem the nav column takes
   a third of the page back (between about 1000 and 1090px wide, a table cell's code crossed into the next cell). Under 46rem of its
   own width each application becomes a card: its name, then its answer, then what the files say. */
.tzg-guide .rl-status-wrap { container: rl-status / inline-size; }
@container rl-status (min-width: 46rem) {
  .tzg-guide table.rl-status { table-layout: fixed; }
  .tzg-guide .rl-status thead th:nth-child(1) { width: 20%; }
  .tzg-guide .rl-status thead th:nth-child(2) { width: 18%; }
  .tzg-guide .rl-status thead th:nth-child(3) { width: 26%; }
  .tzg-guide .rl-status thead th:nth-child(4) { width: 21%; }
  .tzg-guide .rl-status thead th:nth-child(5) { width: 15%; }
  .tzg-guide .rl-status td:nth-child(2) { font-variant-numeric: tabular-nums; }
}
@container rl-status (max-width: 45.99rem) {
  .tzg-guide .rl-status, .tzg-guide .rl-status :is(tbody, tr, th, td) { display: block; width: auto; }
  .tzg-guide .rl-status thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tzg-guide .rl-status tbody { border-top: var(--wp-rule-strong) solid var(--wp-ink); }
  .tzg-guide .rl-status 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 .rl-status :is(th, td) { border: 0; padding: 0; width: auto; white-space: normal; }
  .tzg-guide .rl-status tbody th { grid-column: 1 / -1; font-size: var(--wp-text-body); line-height: 1.4; }
  .tzg-guide .rl-status td + td { margin-top: var(--wp-2); }
  .tzg-guide .rl-status 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); }
  .tzg-guide .rl-status tr { row-gap: var(--wp-3); }
  .tzg-guide .rl-status td + td { margin-top: 0; }
  .tzg-guide .rl-status tbody th { order: -2; }
  .tzg-guide .rl-status td:nth-child(5) { order: -1; }
  /* the cards keep the reading measure on a wide single-column page */
  .tzg-guide .rl-status tbody { max-width: 44rem; }
}
@container page (max-width: 48rem) {
  .tzg-guide .rl-receipts tbody th { font-weight: 500; }
}