/* Persona-panel replication note: the labs note article. The headline asks its question large, with the subject under it; beside it
   (under it on a phone) ten small heads and one plain mark, the panel and the question. The five cautions sit on one ruled panel
   before the body. The results table keeps every estimate and interval in mono figures, the two differences set apart under a heavy
   rule; an interval may drop under its estimate on a phone, never inside a number. The figure carries no words. */
article.pph h1 { font-size: clamp(2.25rem, 4.6vw, 4rem); max-width: 18ch; }
article.pph h1 .pph-q { display: block; }
article.pph h1 .pph-subject { display: block; font-size: .5em; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; margin-top: var(--wp-3); max-width: 30ch; text-wrap: pretty; }
article.pph .pph-dateline { color: var(--wp-muted); font: 500 var(--wp-text-cite)/1.3 var(--wp-font-mono); letter-spacing: .04em; margin: calc(-1 * var(--wp-2)) 0 var(--wp-6); }
article.pph .pph-status { color: var(--wp-muted); font-size: var(--wp-text-meta); line-height: 1.5; margin: 0 0 var(--wp-6); max-width: 40em; }
article.pph .results-intro .lede { max-width: 40em; }

/* ten simulated readers, one plain question: ten small heads, a rule, one plain mark */
article.pph .pph-fig { align-items: center; display: flex; gap: var(--wp-4); margin: var(--wp-6) 0 var(--wp-8); }
article.pph .pph-ten { display: grid; gap: 6px; grid-template-columns: repeat(5, 1rem); }
article.pph .pph-ten i { aspect-ratio: 1; border: 1.5px solid var(--wp-ink); border-radius: 50%; display: block; }
article.pph .pph-or { background: var(--wp-hair); display: block; flex: 0 0 2.5rem; height: 2px; }
article.pph .pph-one i { aspect-ratio: 1; background: var(--wp-ink); border-radius: 50%; display: block; width: 2.375rem; }

/* read this first: the five cautions on one ruled panel, numbered in mono */
article.pph .pph-first { border-left: var(--wp-rule-strong) solid var(--wp-ink); margin: var(--wp-12) 0 0; max-width: 46rem; padding: var(--wp-1) 0 var(--wp-1) var(--wp-4); }
@container page (min-width: 40rem) { article.pph .pph-first { padding-left: var(--wp-6); } }
article.pph .pph-first-title { font: 600 var(--wp-text-h3)/1.25 var(--wp-font-display); margin: 0 0 var(--wp-4); }
article.pph .pph-first ol { margin: 0; padding-left: 1.75rem; }
article.pph .pph-first li::marker { color: var(--wp-muted); font: 500 .875em var(--wp-font-mono); }
article.pph .pph-first li + li { margin-top: var(--wp-4); }
article.pph .pph-method li + li { margin-top: var(--wp-3); }

/* the results: the labs results table (free-tools report), mono figures, the differences under a heavy rule */
article.pph .pph-table { margin: var(--wp-6) 0 var(--wp-8); max-width: 52rem; overflow-x: auto; overscroll-behavior-x: contain; }
article.pph .pph-table:focus-visible { outline: 3px solid var(--wp-focus); outline-offset: 3px; }
article.pph .pph-table table { border: 0; border-collapse: collapse; font-size: var(--wp-text-ledger); min-width: 0; width: 100%; }
article.pph .pph-table th, article.pph .pph-table td { border-bottom: var(--wp-rule) solid var(--wp-hair); padding: var(--wp-3) var(--wp-3) var(--wp-3) 0; text-align: left; vertical-align: top; }
article.pph .pph-table th:last-child, article.pph .pph-table td:last-child { padding-right: 0; }
article.pph .pph-table thead th { border-bottom: var(--wp-rule-strong) solid var(--wp-ink); color: var(--wp-muted); font: 500 var(--wp-text-cite)/1.3 var(--wp-font-mono); letter-spacing: .04em; vertical-align: bottom; }
article.pph .pph-table tbody th { font-weight: 600; }
article.pph .pph-table .pph-diffs tr:first-child > * { border-top: var(--wp-rule-strong) solid var(--wp-ink); }
/* the differences in mono, so their minus signs are the figures' full-width minus, never mistaken for a hyphen */
article.pph .pph-table .pph-diff { font-family: var(--wp-font-mono); font-weight: 500; white-space: nowrap; }
/* the arm letter hangs in its own column, so a wrapped name stays beside it on a phone */
article.pph .pph-table tbody th:not(.pph-diff) { padding-left: 1.5em; position: relative; }
article.pph .pph-arm { font: 500 .875em/inherit var(--wp-font-mono); left: 0; position: absolute; top: calc(var(--wp-3) + .1em); }
article.pph .pph-table td { font-family: var(--wp-font-mono); font-variant-numeric: tabular-nums; }
article.pph .pph-est { font-weight: 500; white-space: nowrap; }
article.pph .pph-ci { color: var(--wp-muted); display: inline-block; font-size: .875em; }
article.pph .pph-repo a { overflow-wrap: anywhere; }
article.pph .results-section > p a[href^="https://support."] { overflow-wrap: anywhere; }

/* at desktop width the panel and the question take the column beside the headline; the reading order is unchanged */
@container page (min-width: 64rem) {
  article.pph .results-intro { column-gap: var(--wp-16); display: grid; grid-template-columns: minmax(0, 46rem) minmax(21rem, 1fr); max-width: none; }
  article.pph .results-intro > * { grid-column: 1; }
  article.pph .results-intro > .pph-fig { align-self: start; gap: var(--wp-6); grid-column: 2; grid-row: 3 / span 3; margin-top: var(--wp-6); }
  article.pph .results-intro > .pph-fig .pph-ten { gap: 8px; grid-template-columns: repeat(5, 1.375rem); }
  article.pph .results-intro > .pph-fig .pph-one i { width: 3.25rem; }
  article.pph .results-intro > .pph-fig .pph-or { flex-basis: 3rem; }
}
@media (forced-colors: active) {
  article.pph .pph-one i, article.pph .pph-or { background: CanvasText; forced-color-adjust: none; }
  article.pph .pph-ten i { border-color: CanvasText; forced-color-adjust: none; }
}