/* Count — page layout: the tier strip (two kit glyphs, one per board, with captions), a difference's article (head, twin, decision, folded
   history), a posted difference's one line, the decision's per-choice Then line and button, and the printable count record. */
@layer page {
  /* ── Tier strip: the counted tier with every bay stretched to the width; the differences are numbered. ── */
  .ct-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s2); padding-top: var(--s4); }
  .ct-strip[data-groups="1"] { grid-template-columns: minmax(0, 1fr); }
  .ct-grp { display: grid; gap: 4px; min-width: 0; }
  .ct-grp__lbl { font-family: var(--font-mono); font-size: var(--t-cap); color: var(--text-2); }

  /* ── A difference: numeral + title, the twin, then the decision beside the bay's sensor history. ── */
  .ct-disc { display: grid; gap: var(--s4); padding: var(--s6) 0; border-bottom: 1px solid var(--line); }
  .ct-disc:last-child { border-bottom: 0; }
  .ct-disc__head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
  /* The difference number is a plain numeral, not a chip */
  .ct-n { font: 500 22px/1 var(--font-brand); color: var(--text-2); font-variant-numeric: tabular-nums; min-width: 1ch; }
  .ct-disc__title { font-size: var(--t-section); font-weight: 650; }
  .ct-decide { display: grid; gap: var(--s4); }
  .ct-done { font-weight: 500; }
  .ct-posted .ct-n { margin-right: var(--s2); font-size: 18px; }
  .ct-impact { display: grid; gap: var(--s1); margin: 0; padding: 0; list-style: none; font-size: var(--t-data); font-variant-numeric: tabular-nums; }
  @media (max-width: 700px) { .ct-strip { grid-template-columns: minmax(0, 1fr); } }

  /* ── The decision: the chosen radio's Then line and button are byChoice(); the reason note shows while the reason is missing. ── */
  .ct-needwhy { display: none; }
  [data-decide]:has(textarea:invalid) .ct-needwhy { display: inline; }

  /* ── The printable count record ── */
  .cert { display: grid; gap: var(--s4); padding: var(--s5); border: 1px solid var(--line-2); border-radius: var(--r3); background: var(--sheet); font-size: var(--t-small); }
  .cert__h { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; align-items: baseline; padding-bottom: var(--s3); border-bottom: 1px solid var(--line); font-size: var(--t-data); }
  /* Printing from the open count record prints the record alone (app.js [data-print] calls print()). */
  @media print {
    body:has(#cert[open]) * { visibility: hidden; }
    body:has(#cert[open]) #cert-doc, body:has(#cert[open]) #cert-doc * { visibility: visible; }
    body:has(#cert[open]) #cert-doc { position: absolute; left: 0; top: 0; width: 100%; border: 0; }
  }

}