/* Counts — page layout: the count row's scope + progress pair, and the tier-scope diagram. */
@layer page {
  .cl-meta { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s5); align-items: center; }
  .cl-prog { display: grid; gap: 6px; }
  .cl-seam { display: grid; gap: var(--s2); max-width: 760px; }
  @media (max-width: 700px) { .cl-meta { grid-template-columns: minmax(0, 1fr); gap: var(--s2); } }

  /* Scope: one bar per tier, top tier first. In scope = accent, left out (Unknown) = dashed, not in scope = hairline. */
  .cscope { display: grid; gap: 3px; width: 100%; max-width: 120px; }
  .cscope i { display: block; height: 6px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--text-3); }
  .cscope i[data-kind="on"] { background: var(--accent); box-shadow: none; }
  .cscope i[data-tall] { height: 14px; }
  /* Unknown is dashed grey everywhere; amber hatch means a difference, never "can't see" */
  .cscope i[data-kind="out"] { box-shadow: none; outline: 1.5px dashed var(--text-3); outline-offset: -1.5px; }
}