/* Tested-fix guide: the guide template, plus one key figure and a verdict matrix. */
article.ksk-guide { max-width: 72rem; margin-inline: auto; }
article.ksk-guide h1 { max-width: 24ch; font-size: clamp(2.5rem, 4.4vw, 4rem); }
.ksk-guide .guide-byline { color: var(--wp-muted); margin: 0 0 var(--wp-8); }
.ksk-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); }
.ksk-guide .guide-nav { padding-top: var(--wp-8); }
.ksk-guide .guide-nav ol { list-style: decimal-leading-zero; padding-left: var(--wp-6); margin: 0; }
.ksk-guide .guide-nav li { padding-left: var(--wp-2); margin-bottom: var(--wp-4); }
.ksk-guide .guide-nav li::marker { font-family: var(--wp-font-mono); color: var(--wp-muted); }
.ksk-guide .guide-nav a { display: inline-flex; align-items: center; min-height: var(--wp-tap); line-height: 1.5; }
.ksk-guide .guide-back { margin-top: var(--wp-4); }
.ksk-guide .guide-reading { min-width: 0; }
article.ksk-guide .results-section:first-child { border-top: 0; margin-top: 0; }
article.ksk-guide .results-section { scroll-margin-top: var(--wp-8); }
/* copy-paste checks keep every line whole: long DS and anchor lines scroll inside the frame, so a wrap is never read as a new line */
article.ksk-guide .check-block { font-size: .9375rem; white-space: pre; overflow-x: auto; overscroll-behavior-x: contain; }
article.ksk-guide .check-block:focus-visible { outline: 3px solid var(--cn-color-amber); outline-offset: 3px; }
article.ksk-guide .check-block code { font-size: 1em; }

/* the intro: the lede, then who is not affected at reading size. The site keeps .lede code on one line; an error string here must wrap at 390. */
article.ksk-guide .lede code { white-space: normal; }
article.ksk-guide .ksk-intro { max-width: 44em; font-size: var(--wp-text-body); line-height: 1.6; margin: 0 0 var(--wp-4); }

/* expected output: what an affected, unaffected or fixed system prints */
article.ksk-guide .results-section > ul.ksk-outcomes { list-style: none; padding: 0; margin: 0 0 var(--wp-6); border-top: var(--wp-rule) solid var(--wp-hair); }
article.ksk-guide .ksk-outcomes li, article.ksk-guide .results-section .ksk-outcomes li + li { margin: 0; padding: var(--wp-3) 0; border-bottom: var(--wp-rule) solid var(--wp-hair); overflow-wrap: anywhere; }
article.ksk-guide .ksk-outcomes strong { display: block; font: 500 var(--wp-text-cite)/1.6 var(--wp-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp-muted); }

/* the one offer line after the sources */
article.ksk-guide .ksk-next { border-left: var(--wp-rule-strong) solid var(--wp-bio); padding-left: var(--wp-4); margin-top: var(--wp-8); }

/* the figure: the signing key on the left, each resolver's anchor on the right */
.ksk-guide .ksk-figure { margin: var(--wp-8) 0 0; background: var(--wp-panel); border: var(--wp-rule-strong) solid var(--wp-ink); padding: var(--wp-6); }
.ksk-guide .ksk-figure figcaption { font: 600 var(--wp-text-h3)/1.35 var(--wp-font-body); max-width: 40em; margin: 0 0 var(--wp-6); }
.ksk-guide .ksk-figure figcaption .eyebrow { margin-bottom: var(--wp-2); }
.ksk-guide .ksk-figure-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--wp-8); }
.ksk-guide .ksk-figure-head { font: 500 var(--wp-text-cite)/1.2 var(--wp-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp-muted); margin: 0 0 var(--wp-3); padding-bottom: var(--wp-2); border-bottom: var(--wp-rule) solid var(--wp-ink); }
.ksk-guide .ksk-key { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--wp-4); align-items: baseline; margin: 0 0 var(--wp-3); padding: var(--wp-3) var(--wp-4); border: var(--wp-rule-strong) solid var(--wp-ink); }
.ksk-guide .ksk-tag { grid-row: span 2; font: 500 clamp(2rem, 3.4vw, 2.75rem)/1 var(--wp-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ksk-guide .ksk-key-name { font-weight: 600; }
.ksk-guide .ksk-key-state { font-size: var(--wp-text-meta); }
.ksk-guide .ksk-key.is-old { border-style: dashed; border-color: var(--wp-muted); color: var(--wp-muted); }
.ksk-guide .ksk-key.is-old .ksk-tag { text-decoration: line-through; text-decoration-thickness: 2px; }
.ksk-guide .ksk-key.is-new { background: var(--wp-bio); color: var(--wp-on-bio); border-color: var(--wp-bio); }
.ksk-guide .ksk-anchors ul { list-style: none; margin: 0; padding: 0; }
.ksk-guide .ksk-anchors li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--wp-4); padding: var(--wp-3) 0; border-bottom: var(--wp-rule) solid var(--wp-hair); }
.ksk-guide .ksk-anchors li:last-child { border-bottom: 0; }
.ksk-guide .ksk-src { font-weight: 600; }
.ksk-guide .ksk-where { grid-column: 1; color: var(--wp-muted); font-size: var(--wp-text-meta); overflow-wrap: anywhere; }
.ksk-guide .ksk-where code { color: var(--wp-ink); }
/* a path breaks only at a slash, never at the hyphen in trust-anchors.conf */
.ksk-guide .ksk-nobreak { white-space: nowrap; }
.ksk-guide .ksk-has { grid-column: 2; grid-row: 1 / span 2; align-self: start; }

/* verdict chips: the word carries the verdict, the fill only repeats it */
.ksk-guide .ksk-has, .ksk-guide .ksk-verdict { display: inline-block; font: 500 var(--wp-text-cite)/1.2 var(--wp-font-mono); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; padding: var(--wp-1) var(--wp-2); border: var(--wp-rule) solid var(--wp-ink); color: var(--wp-ink); }
.ksk-guide .is-broken .ksk-has, .ksk-guide .is-broken .ksk-verdict { background: var(--wp-flag); border-color: var(--wp-rust); }
.ksk-guide .is-ok .ksk-has, .ksk-guide .is-ok .ksk-verdict { background: var(--wp-cited); border-color: var(--wp-cited); }
.ksk-guide .is-custom .ksk-verdict { background: none; border-color: var(--wp-rust); }
.ksk-guide .is-unknown .ksk-verdict { background: none; border-style: dashed; border-color: var(--wp-muted); }

/* the scan matrix: one group per verdict under a 2px rule; stacks on a phone */
.ksk-guide .ksk-matrix-wrap { margin: var(--wp-6) 0; }
.ksk-guide table.ksk-matrix { min-width: 0; width: 100%; border: 0; border-collapse: collapse; font-size: var(--wp-text-ledger); }
.ksk-guide .ksk-matrix th, .ksk-guide .ksk-matrix 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; }
.ksk-guide .ksk-matrix thead th { font: 500 var(--wp-text-cite)/1.2 var(--wp-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp-muted); border-bottom: var(--wp-rule) solid var(--wp-ink); vertical-align: bottom; }
.ksk-guide .ksk-matrix tbody th { font-weight: 600; width: 28%; }
.ksk-guide .ksk-matrix td:last-child { width: 34%; padding-right: 0; }
.ksk-guide .ksk-matrix .ksk-verdict { display: block; width: fit-content; white-space: normal; margin-bottom: var(--wp-2); }
.ksk-guide .ksk-matrix tbody + tbody tr:first-child > * { border-top: var(--wp-rule-strong) solid var(--wp-ink); }

@media (max-width: 56rem) {
  .ksk-guide .guide-body { grid-template-columns: minmax(0, 1fr); gap: var(--wp-8); }
  .ksk-guide .guide-nav { padding-top: var(--wp-6); border-bottom: var(--wp-rule) solid var(--wp-ink); padding-bottom: var(--wp-6); }
  .ksk-guide .guide-nav li { margin-bottom: var(--wp-2); }
  article.ksk-guide .results-section:first-child { padding-top: 0; }
  .ksk-guide .ksk-figure-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 43rem) {
  .ksk-guide .ksk-figure { padding: var(--wp-4); margin-top: var(--wp-8); }
  article.ksk-guide .check-block { font-size: .875rem; }
  /* table roles are set in the markup, so the rows keep their semantics as blocks */
  .ksk-guide .ksk-matrix, .ksk-guide .ksk-matrix tbody, .ksk-guide .ksk-matrix tr, .ksk-guide .ksk-matrix th, .ksk-guide .ksk-matrix td { display: block; width: auto; }
  .ksk-guide .ksk-matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ksk-guide .ksk-matrix tr { display: flex; flex-direction: column; padding: var(--wp-4) 0; border-bottom: var(--wp-rule) solid var(--wp-hair); }
  .ksk-guide .ksk-matrix tbody + tbody tr:first-child { border-top: var(--wp-rule-strong) solid var(--wp-ink); }
  .ksk-guide .ksk-matrix tbody + tbody tr:first-child > * { border-top: 0; }
  .ksk-guide .ksk-matrix th, .ksk-guide .ksk-matrix td { border: 0; padding: 0; }
  .ksk-guide .ksk-matrix td:last-child { order: 1; width: auto; margin: var(--wp-2) 0; }
  .ksk-guide .ksk-matrix td:nth-child(2) { order: 2; color: var(--wp-muted); }
  /* a "—" placeholder means an empty table cell; a stacked row has no cell grid, so it stays for screen readers only */
  .ksk-guide .ksk-matrix td.ksk-empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ksk-guide .ksk-matrix tbody th { width: auto; margin-bottom: var(--wp-1); }
  /* two-digit markers need the room on a phone gutter */
  .ksk-guide .guide-nav ol { padding-left: 2.5rem; }
}