/* The live questions sheet, and its print layout. */
.qsheet { border: var(--rule) solid var(--ink); padding: 16px; background: var(--paper); }
.qsheet__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--ink); padding-bottom: 10px; position: relative; }
.qsheet__head::after {
  content: ""; position: absolute; inset: -4px -6px; background: var(--hi); mix-blend-mode: multiply; pointer-events: none;
  clip-path: inset(0 100% 0 0);
}
.qsheet.is-swipe .qsheet__head::after { clip-path: inset(0 0 0 0); transition: clip-path 260ms var(--ease-out); }
.qsheet__empty { padding: 16px 0; }
.qsheet__eg { font-size: 14px; line-height: 1.35; padding-top: 10px; }
.qlist { display: grid; }
.q { padding: 14px 0; border-bottom: 1px solid var(--ink); font-size: 17px; line-height: 1.4; transition: opacity 150ms linear; }
.q.is-in { animation: q-in 220ms var(--ease-out); }
.q.is-out { opacity: 0; }
.q__ticks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 14px; }
.q__ticks span { display: inline-flex; align-items: center; gap: 6px; }
.q__ticks span::before { content: ""; width: 14px; height: 14px; outline: 1px dotted var(--ink); outline-offset: -1px; }
.qsheet__note { margin-top: 12px; font-size: 15px; line-height: 1.35; }
.qsheet__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 16px; }
.qsheet__more { margin-top: 24px; font-stretch: var(--w-h3); font-weight: 800; font-size: 24px; line-height: 1; text-transform: uppercase; }
.qsheet .qsheet__more + .btn { margin-top: 12px; }
@keyframes q-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .q.is-in { animation: fade 150ms linear; } .qsheet.is-swipe .qsheet__head::after { transition: none; } }
@media print {
  @page { margin: 18mm; }
  body[data-printing] * { visibility: hidden !important; }
  body[data-printing] .qsheet, body[data-printing] .qsheet :is(h3, .label, .qlist, .qlist *, .qsheet__note, .qsheet__eg) { visibility: visible !important; }
  body[data-printing] .qsheet { position: absolute; left: 0; top: 0; width: 100%; border: 0; padding: 0; }
  body[data-printing] :is(.qsheet__acts, .qsheet__more, .qsheet__empty, .qsheet > .btn) { display: none !important; }
  .q { break-inside: avoid; }
}