/* Agenda-packet tags note: the labs note article, with the packet as its object. In the intro a tagged attachment goes into a packet
   and comes out with its tag marks gone; each platform's finding has a strip of its attachments, kept or lost; the two checks sit on
   their own panels with their commands. Figures carry no words: every number is in the text beside them. */
article.apt h1 { font-size: clamp(2.25rem, 4.2vw, 3.75rem); max-width: 20ch; }
article.apt .apt-deck { color: var(--wp-rust); font: 600 clamp(1.5rem, 2.6vw, 2.25rem)/1.15 var(--wp-font-display); margin: calc(-1 * var(--wp-2)) 0 var(--wp-8); max-width: 24ch; text-wrap: pretty; }
article.apt .results-intro .lede { max-width: 40em; }
article.apt .note-nobreak { white-space: nowrap; }
article.apt .apt-glyph { font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "DejaVu Sans", sans-serif; }

/* the attachment, tagged on its own, and the packet it went into: the same lines, the tag marks gone (rust outlines where they were) */
article.apt .apt-pair { align-items: center; display: flex; gap: var(--wp-4); margin: 0 0 var(--wp-8); }
article.apt .apt-sheet { --s: 4.75rem; background: var(--wp-panel); border: 1px solid var(--wp-ink); box-sizing: border-box; clip-path: polygon(0 0, 72% 0, 100% 20%, 100% 100%, 0 100%);
  display: flex; flex: none; flex-direction: column; gap: calc(var(--s) * .09); height: calc(var(--s) * 4 / 3); padding: calc(var(--s) * .34) calc(var(--s) * .12) 0; width: var(--s); }
article.apt .apt-sheet i { align-items: center; display: flex; gap: calc(var(--s) * .08); height: calc(var(--s) * .06); min-height: 4px; }
article.apt .apt-sheet i::before { background: var(--wp-ink); box-sizing: border-box; content: ""; flex: none; height: 100%; width: calc(var(--s) * .16); }
article.apt .apt-sheet i::after { background: var(--wp-hair); content: ""; flex: 1; height: 2px; }
article.apt .apt-sheet i:nth-child(3n)::after { flex: 0 0 55%; }
article.apt .apt-sheet--lost i::before { background: transparent; border: 1px dashed var(--wp-rust); }
article.apt .apt-into { background: var(--wp-ink); display: block; flex: 0 0 2.5rem; height: 2px; position: relative; }
article.apt .apt-into::after { border-bottom: 6px solid transparent; border-left: 9px solid var(--wp-ink); border-top: 6px solid transparent; content: ""; position: absolute; right: -2px; top: -5px; }
article.apt .apt-packet { display: grid; padding: 12px 12px 0 0; }
article.apt .apt-packet > .apt-sheet { grid-area: 1 / 1; }
article.apt .apt-sheet--back:nth-child(1) { transform: translate(12px, -12px); }
article.apt .apt-sheet--back:nth-child(2) { transform: translate(6px, -6px); }

/* what we found: one strip per platform, a cell per tagged attachment found in the packet; ink kept its tags, rust lost them */
article.apt .apt-found { list-style: none; padding: 0; }
article.apt .apt-found li + li { margin-top: var(--wp-6); }
article.apt .apt-strip { display: grid; gap: 3px; margin-bottom: var(--wp-2); max-width: 22rem; }
article.apt .apt-strip.n13 { grid-template-columns: repeat(13, 1fr); }
article.apt .apt-strip.n12 { grid-template-columns: repeat(12, 1fr); width: calc(100% * 12 / 13); max-width: calc(22rem * 12 / 13); }
article.apt .apt-strip i { border: 1px solid var(--wp-ink); display: block; height: 18px; }
article.apt .apt-strip i.k { background: var(--wp-ink); }
article.apt .apt-strip i.l { background: var(--wp-rust); border-color: var(--wp-rust); }
article.apt .apt-found-text { display: block; }

/* the two checks: each on its own panel, its lead as the step's title, its commands in code blocks that scroll rather than wrap */
article.apt .apt-step { border-left: var(--wp-rule-strong) solid var(--wp-ink); margin: var(--wp-8) 0; max-width: 46rem; padding: var(--wp-1) 0 var(--wp-1) var(--wp-4); }
@container page (min-width: 40rem) { article.apt .apt-step { padding-left: var(--wp-6); } }
article.apt .apt-step > :first-child { margin-top: 0; }
article.apt .apt-step > :last-child { margin-bottom: 0; }
article.apt .apt-step-lead { display: block; font: 600 var(--wp-text-h3)/1.25 var(--wp-font-display); margin-bottom: var(--wp-2); }
article.apt .apt-answers { list-style: none; padding: 0; }
article.apt .apt-answer { padding-left: 1.75rem; position: relative; }
article.apt .apt-answer::before { background: var(--wp-ink); content: ""; height: .75rem; left: 0; position: absolute; top: .45em; width: .75rem; }
article.apt .apt-answer--no::before { background: var(--wp-rust); }
article.apt .apt-answer + .apt-answer { margin-top: var(--wp-3); }
article.apt .apt-code { font-size: .875rem; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; white-space: pre; }
article.apt .apt-code:focus-visible { outline: 3px solid var(--wp-focus); outline-offset: 3px; }
article.apt .apt-code code { font-size: 1em; white-space: inherit; }

article.apt .apt-limits li + li { margin-top: var(--wp-3); }
article.apt .note-credit { color: var(--wp-muted); font-size: var(--wp-text-meta); margin-top: var(--wp-8); }

/* at desktop width the attachment and packet take the column beside the headline; the reading order is unchanged */
@container page (min-width: 64rem) {
  article.apt .results-intro { column-gap: var(--wp-16); display: grid; grid-template-columns: minmax(0, 46rem) minmax(21rem, 1fr); max-width: none; }
  article.apt .results-intro > * { grid-column: 1; }
  article.apt .results-intro > .apt-pair { align-self: start; gap: var(--wp-6); grid-column: 2; grid-row: 2 / span 3; margin-top: var(--wp-6); }
  article.apt .results-intro > .apt-pair .apt-sheet { --s: 6.5rem; }
  article.apt .results-intro > .apt-pair .apt-into { flex-basis: 3rem; }
}
@media (forced-colors: active) {
  article.apt .apt-sheet i::before, article.apt .apt-strip i.k, article.apt .apt-into, article.apt .apt-answer::before { background: CanvasText; forced-color-adjust: none; }
  article.apt .apt-sheet--lost i::before, article.apt .apt-strip i.l, article.apt .apt-answer--no::before { background: Canvas; border: 1px dashed CanvasText; forced-color-adjust: none; }
}
/* Narrower than 20rem happens only with enlarged text: there the date wraps inside its own box instead of crossing the screen. */
@container page (max-width: 19.99rem) { article.apt .note-nobreak { white-space: normal; } }