/* Sample report (/sample-report): the rules this page needs and no other page does.
   Tokens only (ds/autogeny/tokens.css). Linked after site.css with the same ?v= tag. */

/* Running head. A lab report repeats its header on every page; here the line
   "Sample · illustrative data" stays at the top of the screen while the report
   scrolls, so the illustrative label is on every screen. The kicker's type
   (.ag-label). Below 720 px it keeps the label and the audit number only (below
   360 px, the label only), so it stays one line at every width: 8px + 16px + 8px + a 1px rule = 33px tall. */
.sr { --sr-runhead: 33px; }
.sr-runhead { position: sticky; top: 0; z-index: 5; background: var(--paper); border-bottom: 1px solid var(--rule); }
.sr-runhead-in { max-width: var(--page-max); margin: 0 auto; padding: var(--space-2) clamp(16px, 4vw, 64px); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4); }
@media (max-width: 719px) { .sr-runhead .sr-wide { display: none; } }
@media (max-width: 359px) { .sr-runhead .sr-runhead-id { display: none; } }
/* Anchored sections land flush below the running head: the section's own top rule
   sits under the running head's rule, so neither the previous section nor a
   doubled rule shows between them. */
.sr section[id] { scroll-margin-top: calc(var(--sr-runhead) - 1px); }

/* Findings: where the title block sits beside the evidence (from 900 px), it stays
   on screen below the running head while the evidence scrolls past. Stacked, it
   scrolls normally. */
@media (min-width: 900px) { .sr-find-head { position: sticky; top: calc(var(--sr-runhead) + var(--space-4)); } }

/* Cover sheet in the hero: a mono label over each value, ruled like the
   homepage card's verdict. Figures in mono, as data. */
.sr-facts { margin: 0; display: flex; flex-direction: column; }
.sr-facts > div { display: flex; flex-direction: column; gap: var(--space-1); padding: 14px 0; border-top: 1px solid var(--rule); }
.sr-facts dd { margin: 0; font-size: 16px; line-height: 25px; }
.sr-facts dd.ag-data { font-size: 13px; line-height: 20px; }
.sr-fig { font-family: var(--font-mono); font-size: 15px; font-weight: 500; }
/* Contents: the section numbers and names, two columns where they fit. */
.sr-toc { display: flex; flex-direction: column; gap: var(--space-2); border-top: 1px solid var(--rule); padding-top: 14px; }
.sr-contents { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-1) var(--space-6); font-family: var(--font-mono); font-size: 13px; line-height: 22px; }
.sr-contents a { color: var(--ink); text-underline-offset: 3px; }

/* ResultTables whose cells are sentences: those cells take the body face (the
   component's td is mono, for figures), and every row aligns to the top. The
   minimum widths keep a sentence column readable; at 800 px the widest of these
   tables (the actions, three sentence columns) still fits its frame. */
.sr-stack th, .sr-stack td { vertical-align: top; }
.ag-results td.sr-text { font-family: var(--font-body); font-size: 15px; line-height: 23px; font-variant-numeric: normal; min-width: 13rem; }
.ag-results td.sr-nowrap { white-space: nowrap; }
.sr-stack tbody th .ag-measure { max-width: 22rem; }
/* Actions: the step number in mono above the action, which keeps a readable width. */
.sr-num { display: block; font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; color: var(--ink-muted); padding-bottom: var(--space-1); }
.sr-action { min-width: 13rem; }
.sr-action .ag-measure { font-weight: 600; }

/* A class ID or other short code never breaks at its hyphen ("C-" / "04"). */
.sr-keep, .sr a[href^="/failure-classes#"] { white-space: nowrap; }

/* On a phone or a narrow tablet these tables would need sideways scrolling to
   read a sentence, so under 800 px each row becomes a block: its name, then each
   cell under the column's name in the label style. The column heads stay in the
   markup for screen readers, and the role attributes keep the table semantics. */
@media (max-width: 799px) {
  .sr-stack, .sr-stack tbody, .sr-stack tr, .sr-stack th, .sr-stack td { display: block; }
  .sr-stack thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .sr-stack tbody tr { padding: var(--space-4); border-bottom: 1px solid var(--rule); }
  .sr-stack th, .sr-stack td { padding: 0; border-bottom: 0; }
  .ag-table-wrap .sr-stack tbody th[scope="row"] { position: static; background: transparent; }
  .sr-stack tbody th .ag-measure { font-family: var(--font-display); font-size: 17px; line-height: 24px; font-weight: 600; max-width: none; }
  .sr-stack td { margin-top: var(--space-3); text-align: left !important; }
  .ag-results.sr-stack td.sr-text, .sr-stack .sr-action { min-width: 0; }
  .sr-stack td[data-label]::before { content: attr(data-label); display: block; padding-bottom: 2px; font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
  /* A stacked table whose cells are short figures (the results and failures tables): the cells
     sit side by side under the row's name and wrap when they do not fit. */
  .sr-stack.sr-compact tbody tr { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: var(--space-6); }
  .sr-stack.sr-compact tbody th { flex: 1 0 100%; }
}

/* Findings: a mono label beside each part of the evidence, ruled like the
   homepage's lists. One column on a phone. */
.sr-dl { margin: 0; display: flex; flex-direction: column; }
.sr-dl > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--space-2) var(--space-6); padding: 14px 0; border-top: 1px solid var(--rule); }
.sr-dl > div:first-child { border-top: 0; padding-top: 0; } /* the finding's own ink rule is above it */
.sr-dl dt { padding-top: 5px; }
.sr-dl dd { margin: 0; }
@media (max-width: 599px) {
  .sr-dl > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .sr-dl > div:first-child { border-top: 1px solid var(--rule); padding-top: 14px; } /* stacked under the title, it needs its rule back */
}

/* The redacted transcript excerpt: data, so mono, on a raised field with a hairline. */
.sr-excerpt { margin: 0; padding: var(--space-3) var(--space-4); background: var(--paper-raised); border: 1px solid var(--rule); display: flex; flex-direction: column; gap: var(--space-3); font-family: var(--font-mono); font-size: 13px; line-height: 20px; }
.sr-excerpt p { margin: 0; }
.sr-who { display: block; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.sr-excerpt figcaption { font-family: var(--font-body); font-size: 15px; line-height: 23px; color: var(--ink-muted); }