/* Field report: four jobs, one reading key. Ink is what came through (the calculation); rust is what broke on the way (the
   context). The headline, the strips, the Prism curve and the summary table all use that one key. Figures carry no words but
   axis numbers already in the text beside them. */
article.ftr h1 { font-size: clamp(2.5rem, 5.2vw, 4.5rem); max-width: 14ch; }
article.ftr .ftr-deck { color: var(--wp-rust); font: 600 clamp(2rem, 4vw, 3.5rem)/1.02 var(--wp-font-display); letter-spacing: -0.02em; margin: calc(-1 * var(--wp-2)) 0 var(--wp-8); max-width: 16ch; }
article.ftr .ftr-standfirst { font: 400 var(--wp-text-lede)/1.45 var(--wp-font-body); margin: 0 0 var(--wp-6); max-width: 34em; }
article.ftr .ftr-standfirst em { font-style: normal; }
article.ftr .results-intro .lede { max-width: 40em; }
article.ftr .results-intro .lede:has(+ .lede) { margin-bottom: 0; }
article.ftr .results-intro .lede + .lede { margin-top: var(--wp-4); }
article.ftr .ftr-nobreak { white-space: nowrap; }
article.ftr .results-intro strong { font-weight: 600; }
article.ftr code { font-size: .9em; overflow-wrap: anywhere; }

/* the four jobs: a jump list, one row per job, each row a 48px target */
article.ftr .ftr-jobs { margin: var(--wp-8) 0 0; max-width: 34rem; }
article.ftr .ftr-jobs ol { border-top: var(--wp-rule-strong) solid var(--wp-ink); list-style: none; margin: 0; padding: 0; }
article.ftr .ftr-jobs li { border-bottom: var(--wp-rule) solid var(--wp-hair); }
article.ftr .ftr-jobs a { color: var(--wp-ink); column-gap: var(--wp-4); display: grid; grid-template-columns: 2rem minmax(0, 1fr); min-height: var(--wp-tap); padding: var(--wp-3) 0; text-decoration: none; }
article.ftr .ftr-jobs-n { color: var(--wp-rust); font: 600 1.5rem/1 var(--wp-font-display); grid-row: span 2; padding-top: 2px; }
article.ftr .ftr-jobs-p { font-weight: 600; line-height: 1.3; }
article.ftr .ftr-jobs-j { color: var(--wp-muted); font-size: var(--wp-text-meta); line-height: 1.4; }
article.ftr .ftr-jobs a:hover .ftr-jobs-p { text-decoration: underline; text-underline-offset: 3px; }
article.ftr .ftr-jobs a:focus-visible { outline: 3px solid var(--wp-focus); outline-offset: 2px; }

/* each job: its number set large, the job named after the product */
article.ftr .ftr-job { border-top: var(--wp-rule-strong) solid var(--wp-ink); padding-top: var(--wp-6); }
article.ftr .ftr-job h2 { max-width: 24ch; }
article.ftr .ftr-n { color: var(--wp-rust); }
article.ftr .ftr-jobname { display: block; font-size: .62em; font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; margin-top: var(--wp-2); }
article.ftr .results-section > p, article.ftr .results-section > ul { max-width: 40em; }
article.ftr .ftr-list li + li { margin-top: var(--wp-3); }

/* what it didn't flag: the loss, on a rust edge */
article.ftr .ftr-k-flag { border-left: 4px solid var(--wp-rust); padding-left: var(--wp-4); }
/* our result and the step before you switch: set apart as the job's verdict and its one action */
article.ftr .ftr-k-result { background: var(--wp-panel); border: var(--wp-rule-strong) solid var(--wp-ink); box-sizing: border-box; font-weight: 500; padding: var(--wp-4); }
article.ftr .ftr-k-result strong { display: block; font: 500 var(--wp-text-cite)/1.3 var(--wp-font-mono); letter-spacing: .06em; margin-bottom: var(--wp-2); text-transform: uppercase; }
article.ftr .ftr-k-before { border: var(--wp-rule-strong) dashed var(--wp-ink); box-sizing: border-box; padding: var(--wp-4); }
@container page (min-width: 40rem) { article.ftr .ftr-k-result, article.ftr .ftr-k-before { padding: var(--wp-4) var(--wp-6); } }

/* the ChemDraw losses: each one a rust tick */
article.ftr .ftr-lost { list-style: none; padding: 0; }
article.ftr .ftr-lost li { padding-left: 1.5rem; position: relative; }
article.ftr .ftr-lost li::before { background: var(--wp-rust); content: ""; height: .7rem; left: 0; position: absolute; top: .5em; width: .7rem; }
article.ftr .ftr-lost li + li { margin-top: var(--wp-2); }
article.ftr .ftr-block { margin: var(--wp-4) 0; max-width: 40em; }
article.ftr .ftr-block > p { margin: 0; }
article.ftr .ftr-block > ul { margin: var(--wp-3) 0 0; }
article.ftr .ftr-block.ftr-k-happened > ul { padding-left: 1.25rem; }

/* strips: one cell per file. Ink = came through; rust = lost a fact or failed; outline = would not open; hatched = over the time limit once */
article.ftr .ftr-strip { display: grid; gap: 3px; margin: 0 0 var(--wp-3); max-width: 30rem; }
article.ftr .ftr-strip--30 { grid-template-columns: repeat(30, 1fr); }
article.ftr .ftr-strip--21 { grid-template-columns: repeat(21, 1fr); max-width: 21rem; }
article.ftr .ftr-strip i { background: var(--wp-ink); border: 1px solid var(--wp-ink); display: block; height: 16px; }
article.ftr .ftr-strip i.x { background: var(--wp-rust); border-color: var(--wp-rust); }
article.ftr .ftr-strip i.o { background: transparent; border-color: var(--wp-ink); }
article.ftr .ftr-strip i.h { background: repeating-linear-gradient(135deg, var(--wp-rust) 0 2px, transparent 2px 5px); border-color: var(--wp-rust); }
article.ftr .ftr-k-flag .ftr-strip, article.ftr .ftr-k-happened .ftr-strip { margin-top: var(--wp-1); }

/* the Revu markups that arrived as a picture: outlines, nothing inside */
article.ftr .ftr-ghosts { display: block; margin: var(--wp-1) 0 var(--wp-3); max-width: 19rem; }
article.ftr .ftr-ghosts svg { display: block; height: auto; width: 100%; }
article.ftr .ftr-ghosts path { fill: none; stroke: var(--wp-rust); stroke-dasharray: 4 3; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }

/* the Prism curve: the fit through the 35 points, the drop that stops near 78%, the 50% line it never reaches */
article.ftr .ftr-curve { margin: 0 0 var(--wp-6); max-width: 26rem; }
article.ftr .ftr-curve svg { display: block; height: auto; overflow: visible; width: 100%; }
article.ftr .ftr-curve .gap { fill: var(--wp-rust); opacity: .12; }
article.ftr .ftr-curve .grid { stroke: var(--wp-hair); stroke-width: 1; }
article.ftr .ftr-curve .axis { stroke: var(--wp-ink); stroke-width: 1; }
article.ftr .ftr-curve .half { stroke: var(--wp-rust); stroke-dasharray: 6 4; stroke-width: 2; }
article.ftr .ftr-curve .floor { stroke: var(--wp-ink); stroke-dasharray: 2 3; stroke-width: 1.5; }
article.ftr .ftr-curve .pt { fill: var(--wp-paper); stroke: var(--wp-ink); stroke-width: 1.2; }
article.ftr .ftr-curve .fit { fill: none; stroke: var(--wp-ink); stroke-width: 2.5; }
article.ftr .ftr-curve .ic { stroke: var(--wp-ink); stroke-dasharray: 2 3; stroke-width: 1; }
article.ftr .ftr-curve .icdot { fill: var(--wp-ink); }
article.ftr .ftr-curve text { fill: var(--wp-muted); font: 500 13px/1 var(--wp-font-mono); }
article.ftr .ftr-curve text.lab { fill: var(--wp-ink); font-size: 14px; }
article.ftr .ftr-curve text.lab.ink { font-weight: 600; }

/* the summary: a table at reading width, a ledger card per job on a phone */
article.ftr .ftr-table { margin: var(--wp-6) 0 var(--wp-8); }
article.ftr .ftr-table table { border: 0; border-collapse: collapse; font-size: var(--wp-text-ledger); min-width: 0; width: 100%; }
article.ftr .ftr-table th, article.ftr .ftr-table td { 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; }
article.ftr .ftr-table thead th { border-bottom: var(--wp-rule-strong) solid var(--wp-ink); color: var(--wp-muted); font: 500 var(--wp-text-cite)/1.25 var(--wp-font-mono); letter-spacing: .06em; text-transform: uppercase; }
article.ftr .ftr-table tbody th { font-weight: 600; }
article.ftr .ftr-table td.c-core { border-left: 4px solid var(--wp-ink); padding-left: var(--wp-3); }
article.ftr .ftr-table td.c-broke { border-left: 4px solid var(--wp-rust); padding-left: var(--wp-3); }
article.ftr .ftr-table thead th.c-core, article.ftr .ftr-table thead th.c-broke { padding-left: calc(var(--wp-3) + 4px); }
@container page (max-width: 47.99rem) {
  article.ftr .ftr-table thead { block-size: 1px; clip-path: inset(50%); inline-size: 1px; overflow: hidden; position: absolute; white-space: nowrap; }
  article.ftr .ftr-table table, article.ftr .ftr-table tbody, article.ftr .ftr-table tr, article.ftr .ftr-table th, article.ftr .ftr-table td { display: block; }
  article.ftr .ftr-table tr { border-top: var(--wp-rule-strong) solid var(--wp-ink); padding: var(--wp-3) 0 var(--wp-4); }
  article.ftr .ftr-table tbody th { border: 0; font: 600 var(--wp-text-h3)/1.25 var(--wp-font-body); padding: 0 0 var(--wp-2); }
  article.ftr .ftr-table td { border-bottom: 0; padding: var(--wp-2) 0 var(--wp-2) var(--wp-3); }
  article.ftr .ftr-table td + td { margin-top: var(--wp-2); }
  article.ftr .ftr-table td::before { color: var(--wp-muted); content: attr(data-label) / ""; display: block; font: 500 var(--wp-text-cite)/1.3 var(--wp-font-mono); letter-spacing: .06em; margin-bottom: 2px; text-transform: uppercase; }
  article.ftr .ftr-table td.c-route { border-left: 4px solid var(--wp-hair); }
}

/* the kits: inline links grown to 48px without moving a line; each zip's SHA-256 below */
article.ftr .ftr-kits a { white-space: nowrap; }
@supports (height: 1lh) {
  article.ftr .ftr-kits a { padding: max(7px, calc(var(--wp-tap) / 2 - 1lh / 2)) 5px; margin: min(0px, calc(1lh / 2 + 7px - var(--wp-tap) / 2)) -5px; }
  article.ftr .ftr-kits a:focus-visible { outline-offset: -2px; }
}
article.ftr .ftr-kit-size { color: var(--wp-muted); white-space: nowrap; }
article.ftr .ftr-sums { border-top: var(--wp-rule) solid var(--wp-hair); list-style: none; margin: var(--wp-4) 0 0; max-width: 40em; padding: var(--wp-3) 0 0; }
article.ftr .ftr-sums li { color: var(--wp-muted); font: 500 var(--wp-text-cite)/1.5 var(--wp-font-mono); }
article.ftr .ftr-sums li + li { margin-top: var(--wp-2); }
article.ftr .ftr-kit-file { color: var(--wp-ink); display: block; }
article.ftr .ftr-kit-sha { display: block; overflow-wrap: anywhere; }
article.ftr .note-credit { color: var(--wp-muted); font-size: var(--wp-text-meta); margin-top: var(--wp-8); }

/* at desktop width the jump list takes the column beside the headline; the reading order is unchanged */
@container page (min-width: 64rem) {
  article.ftr .results-intro { column-gap: var(--wp-16); display: grid; grid-template-columns: minmax(0, 46rem) minmax(16rem, 1fr); max-width: none; }
  article.ftr .results-intro > * { grid-column: 1; }
  article.ftr .results-intro > .ftr-jobs { align-self: start; grid-column: 2; grid-row: 2 / span 5; margin-top: var(--wp-3); max-width: 22rem; }
}
@media (forced-colors: active) {
  article.ftr .ftr-strip i, article.ftr .ftr-lost li::before, article.ftr .ftr-curve .icdot { background: CanvasText; fill: CanvasText; forced-color-adjust: none; }
  article.ftr .ftr-strip i.o, article.ftr .ftr-strip i.h { background: Canvas; }
  article.ftr .ftr-table td.c-core, article.ftr .ftr-table td.c-broke { border-left-color: CanvasText; }
}