/* Clause 05: the live card. The tick is a highlighter swipe, left to right. */
.try { display: grid; gap: 32px; margin-top: 32px; grid-column: 1 / -1; }
.card { border: var(--rule) solid var(--ink); background: var(--paper); padding: 16px; min-width: 0; }
.card__strip { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 4px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.card__n { font-stretch: var(--w-poster); font-weight: 900; font-size: 48px; line-height: 0.86; letter-spacing: -0.02em; }
.card__bar { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; height: 10px; margin-top: 6px; }
.card__bar i { border: 1px solid var(--ink); }
.card__bar i.on { background: var(--ink); }
.card__title { margin: 20px 0 12px; font-stretch: var(--w-poster); font-weight: 900; text-transform: uppercase; font-size: clamp(44px, 14vw, 72px); line-height: 0.86; letter-spacing: -0.02em; }
.card__rule { font-size: 20px; line-height: 1.25; }
.card__aside { margin: 20px 0 0; padding-left: 12px; border-left: var(--rule) solid var(--ink); font-size: 17px; line-height: 1.45; }
.card__aside footer { margin-top: 8px; }
.flags { border: 0; padding: 0; margin: 24px 0 0; min-width: 0; }
.flags legend { padding: 0; margin-bottom: 8px; }
.flags__eg { margin-bottom: 12px; }
.flag { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 0; border-top: 1px solid var(--ink); cursor: pointer; line-height: 1.3; font-size: 17px; }
.flag:last-child { border-bottom: 1px solid var(--ink); }
.flag input { position: relative; z-index: 1; flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.flag span { position: relative; z-index: 1; flex: 1; }
.flag i { position: relative; z-index: 1; flex: none; font-style: normal; align-self: flex-start; margin-top: 4px; }
.flag::before {
  content: ""; position: absolute; inset: 4px -4px; background: var(--hi); clip-path: inset(0 100% 0 0);
  transition: clip-path 160ms var(--ease-out);
}
.flag:has(input:checked)::before { clip-path: inset(0 0 0 0); transition-duration: 260ms; }
.flag:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.flag input:focus-visible { outline: none; box-shadow: none; }
.card .btn--text { margin-top: 16px; }
@media (min-width: 900px) {
  .try { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; margin-top: 48px; }
  .card { grid-column: 1 / 8; padding: 24px; }
  .qsheet { grid-column: 8 / 13; position: sticky; top: 80px; }
  .card__n { font-size: 72px; }
  .card__title { font-size: 88px; }
}
@media (prefers-reduced-motion: reduce) { .flag::before { transition: none; } }