/* strike: a list where, in the "after" state, the lines that got cut fade and are struck through
   (a switch with data-state, components/switch.js).
     <div class="ann-tabs file-switch" data-switch data-state="before"> <div class="file">…
       <p class="strike-h">## Tables</p><ul class="strike-list"><li class="cut"><s>products</s> <span>why</span></li>…</ul>
       <p class="strike-count"><span class="before">9 tables</span><span class="after">5 tables</span></p> …
     <div class="tabs"><button data-state="before">…</button><button data-state="after">…</button></div></div>
   .strike-list.rows puts one item on each line. */
.strike-h { margin: var(--s-3) 0 2px; font-family: var(--mono); font-size: var(--text-xs); color: var(--gray-1000); }
.strike-h:first-child { margin-top: 0; }
.strike-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--mono); font-size: 13px; line-height: 22px; color: var(--gray-1200); }
.strike-list.rows { display: grid; gap: 0; }
.strike-list li { transition: opacity 200ms ease-out; }
.strike-list li span { color: var(--gray-1000); }
.strike-list li s { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 55% / 0% 1.5px no-repeat; transition: background-size 300ms ease-out; }
[data-state="after"] .strike-list li.cut { opacity: 0.4; }
[data-state="after"] .strike-list li.cut s { background-size: 100% 1.5px; }
.strike-count { margin: var(--s-3) 0 0; font-size: var(--text-sm); color: var(--gray-1100); font-variant-numeric: tabular-nums; }
.strike-count .after { display: none; }
[data-state="after"] .strike-count .before { display: none; }
[data-state="after"] .strike-count .after { display: inline; }
@media (prefers-reduced-motion: reduce) { .strike-list li, .strike-list li s { transition: none; } }