/* Checkpoint marks: where a rule opens a check (a workflow step, a rule of the regulation, a menu
   item, a drawer block), a ticked square marks where it starts. Same mark everywhere: a 9px ink
   box, tick knocked out. Section rules carry no mark. */
.stat, .step, .mega__item, .drawer__block, .drawer__event, .demo__done { position: relative; }

.stat::before, .step::before, .mega__item::before, .drawer__block::before, .drawer__event::before, .demo__done::before,
.stat::after, .step::after, .mega__item::after, .drawer__block::after, .drawer__event::after, .demo__done::after {
  content: "";
  position: absolute;
  left: -4px;
  top: 0;
  width: 9px;
  height: 9px;
}
.stat::before, .step::before, .mega__item::before, .drawer__block::before, .drawer__event::before, .demo__done::before {
  background: var(--mark);
}
.stat::after, .step::after, .mega__item::after, .drawer__block::after, .drawer__event::after, .demo__done::after {
  background: var(--paper);
  -webkit-mask: var(--tick-mark) center / 7px 7px no-repeat;
  mask: var(--tick-mark) center / 7px 7px no-repeat;
}

/* Marks that sit on a horizontal rule: ledger rows, workflow steps, drawer timeline. */
.stat::before, .stat::after, .step::before, .step::after, .drawer__event::before, .drawer__event::after { left: 0; top: -4px; }
/* A change that is not yet law gets an open checkpoint. */
.drawer__event--pending::before { background: var(--paper); box-shadow: inset 0 0 0 1.5px currentColor; }
.drawer__event--pending::after { display: none; }

/* Phone menu sub-links: open checkpoints along the sub-menu rule, filled on hover or focus. */
.shelf__sub a { position: relative; }
.shelf__sub a::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border: 1px solid var(--ink-2);
  background: var(--paper);
  transition: background-color .2s var(--ease-std), border-color .2s var(--ease-std);
}
.shelf__sub a:hover::before, .shelf__sub a:focus-visible::before { background: var(--ink); border-color: var(--ink); }

/* Stamp and tick when the section or card scrolls into view. */
.js .stats .stat::before, .js [data-reveal].step::before { opacity: 0; transform: scale(1.4); transition: opacity .3s var(--ease-std), transform .5s var(--ease-out); }
.js .stats .stat::after, .js [data-reveal].step::after { clip-path: inset(0 100% 0 0); transition: clip-path .35s var(--ease-out) .3s; }
.js .stats.is-in .stat::before, .js .step.is-in::before { opacity: 1; transform: none; }
.js .stats.is-in .stat::after, .js .step.is-in::after { clip-path: inset(0 0 0 0); }
.js .stats.is-in .stat:nth-child(2)::before { transition-delay: .08s; }
.js .stats.is-in .stat:nth-child(3)::before { transition-delay: .16s; }
.js .stats.is-in .stat:nth-child(4)::before { transition-delay: .24s; }

@media print {
  .js .stats .stat::before, .js [data-reveal].step::before { opacity: 1; transform: none; }
  .js .stats .stat::after, .js [data-reveal].step::after { clip-path: none; }
}