/* Tested-fix guide: the KSK-2024 guide template (finder, section nav, copy-exact blocks), plus comparison tables that stack into labelled rows on a phone. */
article.tzg-guide { max-width: 72rem; margin-inline: auto; }
article.tzg-guide h1 { max-width: 24ch; font-size: clamp(2.5rem, 4.4vw, 4rem); }
.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 { 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 */
article.tzg-guide .check-block { font-size: .9375rem; white-space: pre; overflow-x: auto; overscroll-behavior-x: contain; }
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; }
/* 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; }

/* runtime finder: the four runtimes in the first screen; at desktop width it takes the empty column beside the headline */
.tzg-guide .tzg-finder { margin: 0 0 var(--wp-8); border-top: var(--wp-rule-strong) solid var(--wp-ink); padding-top: var(--wp-3); }
.tzg-guide .tzg-finder .eyebrow { margin: 0 0 var(--wp-1); }
.tzg-guide .tzg-finder ul { list-style: none; margin: 0; padding: 0; }
.tzg-guide .tzg-finder li { margin: 0; border-bottom: var(--wp-rule) solid var(--wp-hair); }
.tzg-guide .tzg-finder li a { display: block; min-height: var(--wp-tap); padding: var(--wp-3) var(--wp-8) var(--wp-3) 0; position: relative; line-height: 1.35; color: var(--wp-ink); text-decoration: none; }
.tzg-guide .tzg-finder-name { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.tzg-guide .tzg-finder-note { color: var(--wp-muted); font-size: var(--wp-text-meta); }
.tzg-guide .tzg-finder li a::after { content: "\2193" / ""; position: absolute; right: var(--wp-1); top: 50%; transform: translateY(-50%); font: 500 1.125rem/1 var(--wp-font-mono); color: var(--wp-muted); }
.tzg-guide .tzg-finder li a:hover .tzg-finder-name { text-decoration-thickness: 2px; }
.tzg-guide .tzg-finder li a:hover::after { color: var(--wp-ink); }
.tzg-guide .tzg-finder-alt { margin: var(--wp-2) 0 0; }
.tzg-guide .tzg-finder-alt a { display: inline-flex; align-items: center; min-height: var(--wp-tap); }
@media (min-width: 56.0625rem) {
  article.tzg-guide .results-intro { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) 19rem; column-gap: var(--wp-16); align-items: start; }
  article.tzg-guide .results-intro > * { grid-column: 1; }
  article.tzg-guide .results-intro > .tzg-finder { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
  article.tzg-guide .results-intro > [data-article-intro] { max-width: var(--cn-reading-max); }
}

/* the intro: the lede, then the four runtimes at reading size */
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); }
/* a list that leads each item with a bold runtime name: one rule per runtime, the name starts the line */
article.tzg-guide ul.tzg-named { list-style: none; padding: 0; margin: 0 0 var(--wp-6); max-width: 44em; border-top: var(--wp-rule) solid var(--wp-hair); font-size: var(--wp-text-body); line-height: 1.6; }
article.tzg-guide ul.tzg-named li { margin: 0; padding: var(--wp-3) 0; border-bottom: var(--wp-rule) solid var(--wp-hair); }

article.tzg-guide .tzg-byline-end { margin-top: var(--wp-8); }

/* data-version chip: 2026e is the fixed data. The word carries the verdict, the fill only repeats it. */
.tzg-guide .tzg-data { display: inline-block; font: 500 var(--wp-text-cite)/1.2 var(--wp-font-mono); letter-spacing: 0.02em; white-space: nowrap; padding: var(--wp-1) var(--wp-2); border: var(--wp-rule) solid var(--wp-ink); color: var(--wp-ink); }
.tzg-guide .is-broken .tzg-data { background: var(--wp-flag); border-color: var(--wp-rust); }
.tzg-guide .is-ok .tzg-data { background: var(--wp-cited); border-color: var(--wp-cited); }

/* comparison tables: ledger lines, mono heads; a row whose runtime is fixed 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; }
/* Desktop columns. What changes: the zone names and offsets are data, set in mono; the new offset is the answer */
@media (min-width: 48.0625rem) {
  .tzg-guide .tzg-changes tbody th { font: 500 var(--wp-text-meta)/1.5 var(--wp-font-mono); white-space: nowrap; }
  .tzg-guide .tzg-changes td:nth-child(3) { font-family: var(--wp-font-mono); font-size: var(--wp-text-meta); overflow-wrap: anywhere; }
  .tzg-guide .tzg-changes td:nth-child(4), .tzg-guide .tzg-changes td:nth-child(5) { font-family: var(--wp-font-mono); font-size: var(--wp-text-meta); white-space: nowrap; }
  .tzg-guide .tzg-changes td:nth-child(4) { font-weight: 600; }
  .tzg-guide .tzg-changes td:nth-child(5) { color: var(--wp-muted); }
  .tzg-guide .tzg-runtimes tbody th { width: 24%; }
  .tzg-guide .tzg-runtimes td:nth-child(2) { width: 12%; }
  .tzg-guide .tzg-runtimes td:nth-child(5) { width: 15%; }
  .tzg-guide .tzg-images tbody th { width: 52%; }
  .tzg-guide .tzg-images td:nth-child(2) { width: 14%; }
}

@media (max-width: 56rem) {
  .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 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. */
@media (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) minmax(0, 1fr); column-gap: var(--wp-4); 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 { grid-column: 1 / -1; 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); font-weight: 500; 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; }
  /* What changes: release as a mono line, the place as the title, zones below, then the two offsets side by side */
  .tzg-guide .tzg-changes tbody th { font: 500 var(--wp-text-meta)/1.4 var(--wp-font-mono); color: var(--wp-muted); }
  .tzg-guide .tzg-changes td:nth-child(2) { font-weight: 600; font-size: var(--wp-text-body); }
  .tzg-guide .tzg-changes td:nth-child(2)::before { display: none; }
  .tzg-guide .tzg-changes td:nth-child(3) { font-family: var(--wp-font-mono); font-size: var(--wp-text-meta); overflow-wrap: anywhere; }
  .tzg-guide .tzg-changes td:nth-child(4), .tzg-guide .tzg-changes td:nth-child(5) { grid-column: auto; font: 500 var(--wp-text-body)/1.4 var(--wp-font-mono); }
  .tzg-guide .tzg-changes td:nth-child(4) { font-weight: 700; }
  /* the two offsets line up even when one head wraps */
  .tzg-guide .tzg-changes td:nth-child(4), .tzg-guide .tzg-changes td:nth-child(5) { display: flex; flex-direction: column; justify-content: space-between; }
  .tzg-guide .tzg-changes td:nth-child(5) { color: var(--wp-muted); }
  /* Runtimes and base images: the data chip sits beside its head on one line */
  .tzg-guide .tzg-runtimes td:nth-child(2), .tzg-guide .tzg-images td:nth-child(2) { display: flex; align-items: center; flex-wrap: wrap; gap: var(--wp-1) var(--wp-3); }
  .tzg-guide .tzg-runtimes td:nth-child(2)::before, .tzg-guide .tzg-images td:nth-child(2)::before { margin: 0; }
}
@media (max-width: 43rem) {
  article.tzg-guide .check-block { font-size: .875rem; }
  /* two-digit markers need the room on a phone gutter */
  .tzg-guide .guide-nav ol { padding-left: 2.5rem; }
}