/* Datumprikker: de dagen zijn blaadjes van een scheurkalender; wie kan, zet er een vink op. */
.leus--links { margin: 0 0 1.1rem; text-align: left; rotate: -1deg; }
.blaadjes { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.9rem, 1fr)); gap: 0.8rem 0.7rem; margin: 0.4rem 0 1.4rem; }
.blaadje { position: relative; display: grid; justify-items: center; padding-bottom: 0.45rem; border-radius: 0.7rem; background: var(--papier); color: var(--inkt); overflow: hidden;
  animation: blaadje-in 0.6s var(--veer) calc(var(--nr) * 50ms + 120ms) backwards; transition: transform 0.5s var(--veer), background 0.2s; }
.blaadje:active { transform: scale(0.9); }
.blaadje__dag { width: 100%; padding: 0.22rem 0; background: var(--rood); color: #fff; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.blaadje b { margin-top: 0.1rem; font-family: var(--kop); font-weight: 400; font-size: 2rem; line-height: 1.1; }
.blaadje__maand { font-weight: 600; font-size: 0.85rem; color: var(--inkt-zacht); }
.blaadje__vink { position: absolute; right: 0.25rem; bottom: 0.25rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--vilt); color: var(--mint); transform: scale(0) rotate(-90deg); transition: transform 0.5s var(--veer); }
.blaadje__vink .icoon { width: 1rem; height: 1rem; stroke-width: 3; }
.blaadje.aan { background: var(--mint); transform: rotate(-3deg) scale(1.04); }
.blaadje.aan:nth-child(even) { transform: rotate(2.5deg) scale(1.04); }
.blaadje.aan .blaadje__vink { transform: none; }
.blaadje.aan .blaadje__dag { background: var(--vilt); }
@keyframes blaadje-in { from { opacity: 0; transform: translateY(-1.5rem) rotate(8deg); } }

/* De uitslag: per dag een strook die voller wordt naarmate meer mensen kunnen */
.uitslagen { display: grid; gap: 0.6rem; }
.uitslag { position: relative; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.1rem 0.6rem; padding: 0.65rem 0.5rem 0.65rem 0.9rem; border-radius: 0.8rem; background: rgba(248, 238, 217, 0.1); overflow: hidden; }
.uitslag::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--deel); background: rgba(157, 227, 193, 0.2); transition: width 0.7s var(--veer); }
.uitslag > * { position: relative; }
.uitslag__dag { font-weight: 600; }
.uitslag__dag em { display: inline-block; margin-left: 0.5rem; padding: 0 0.45rem; border: 0.14rem solid var(--geel); border-radius: 0.3rem; font-family: var(--kop); font-style: normal; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--geel); rotate: -4deg; animation: knal 0.5s var(--veer); }
.uitslag__namen { grid-column: 1; font-size: 0.9rem; color: var(--krijt-zacht); }
.uitslag__aantal { grid-column: 2; grid-row: 1 / 3; font-family: var(--kop); font-weight: 400; font-size: 1.5rem; color: var(--papier); }
.uitslag__weg { grid-column: 3; grid-row: 1 / 3; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; color: var(--krijt-zacht); opacity: 0.7; }
.uitslag__weg .icoon { width: 1.1rem; height: 1.1rem; }
.uitslag--best { background: rgba(247, 191, 60, 0.16); }
.uitslag--best::before { background: rgba(247, 191, 60, 0.28); }
.uitslag--best .uitslag__aantal { color: var(--geel); }
.prik-stuur { margin-top: 1rem; }