/* Signals archive posts. They run on the shared post template in
   signals-post.css (the .phero header with the morphing pixel stage, .shortv,
   the .psum rail and the post-end partial), so the hero, the stage size and
   the ending match the newer posts. This file only adds the article helpers
   the archive posts use. Tokens only, square corners. */

/* ---------- Article helpers ---------- */
.po .prose h2 { margin-top: 2.1em; }
.po .prose > .shortv + h2, .po .prose > .shortv + p { margin-top: 2em; }

/* Notes: a ruled aside inside the article, not a box */
.po-note { padding: 4px 0 4px 22px; border-left: 2px solid var(--line-2); color: var(--fg-1); }
.po-note > * + * { margin-top: .6em; }
.prose .po-note h3 { margin-top: 0; color: var(--accent); }
.po-note ul { margin-bottom: 0; }

/* Figures with a linked source: one lead number, the rest in a quiet column */
.po-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 36px; margin: 2em 0 !important; padding-top: 30px; border-top: 1px solid var(--line); }
.po-stat { display: grid; gap: 8px; align-content: start; }
.po-stat--lead { grid-column: 1 / -1; gap: 12px; max-width: 520px; }
.po-stat__v { font: 400 33px/1 var(--pixel); color: var(--fg-0); }
.po-stat--lead .po-stat__v { font-size: 55px; }
.po-stat__bar { height: 12px; background: repeating-linear-gradient(90deg, transparent 0 6px, var(--bg-0) 6px 8px), linear-gradient(90deg, var(--accent) calc(var(--v) * 1%), var(--bg-3) 0); }
.po-stat__k { font-size: 16px; line-height: 1.45; color: var(--fg-1); }
.po-stat__src { font: 400 14px/1.45 var(--sans); color: var(--fg-2); }
.po-stat__src a { color: var(--fg-2); }
.po-stat__src a:hover { color: var(--accent); }

/* Numbered procedure: one rule above and below, numbers in the margin */
.po-steps { list-style: none; padding: 12px 0 !important; counter-reset: po; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.po-steps li { counter-increment: po; position: relative; min-width: 0; padding: 0 0 0 52px; margin: 0 !important; }
.po-steps a { overflow-wrap: anywhere; }
.po-steps li::before { content: counter(po, decimal-leading-zero); position: absolute; left: 0; top: 1px; font: 400 22px/1.3 var(--pixel); color: var(--accent); }

/* Questions answered in full (mirrors FAQPage schema), not accordions */
.po-faq { margin-top: 1.4em !important; border-top: 1px solid var(--line); }
.po-faq > div { padding: 22px 0; border-bottom: 1px solid var(--line); }
.prose .po-faq h3 { margin: 0 0 8px; font: 600 18px/1.4 var(--sans); color: var(--fg-0); }
.po-faq p { font-size: 16.5px; margin: 0; }

/* Self-check */
/* a quiet terminal window like the rest of the site: a 2px frame, no fill, its title on the top border */
.po-quiz { position: relative; margin: 2.4em 0 2em !important; padding: clamp(26px, 3vw, 36px) clamp(18px, 3vw, 34px) clamp(22px, 3vw, 30px); background: none; border: 2px solid var(--line-2); }
.po-quiz::before { content: "checklist.exe"; content: "checklist.exe" / ""; position: absolute; top: -8px; left: 16px; padding: 0 8px; font: 400 11px/14px var(--pixel); letter-spacing: .06em; color: var(--fg-1); background: var(--bg-0); white-space: nowrap; }
.po-quiz > * + * { margin-top: 14px; }
.po-quiz__q { font: 400 27.5px/1.2 var(--pixel); color: var(--fg-0); }
.po .po-quiz .quiz__opt { border-top: 0; padding: 10px 0; }
.po-quiz__result { padding-top: 18px; border-top: 1px solid var(--line-2); }
.po-quiz__score { font: 600 14px/1.4 var(--sans); color: var(--accent); }
.po-quiz__verdict { margin: 8px 0 6px; font: 400 27.5px/1.2 var(--pixel); color: var(--fg-0); }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .po-stats { grid-template-columns: 1fr; gap: 26px; }
  .po-stat--lead .po-stat__v { font-size: 44px; }
  .po-steps li { padding-left: 44px; }
  /* tables fit the column without a hidden sideways scroll */
  .po .prose table { font-size: 14px; }
  .po .prose th, .po .prose td { padding: 10px 6px; }
  .po .prose th:first-child, .po .prose td:first-child { padding-left: 0; }
  .po .prose th { font-size: 11px; letter-spacing: 0; }
}
@media (max-width: 640px) { .po-stat__src a { display: inline-block; padding-block: 12px; margin-block: -12px; } }