/* fundraiser sign-up: a permission slip with a spirit bag that wears your school colors */
.fz-live{margin-top:26px;background:#fff;border:2px solid rgba(86,18,11,.16);border-radius:16px;padding:22px 22px 18px;display:grid;grid-template-columns:1fr 150px;gap:8px 18px;align-items:end;position:relative;overflow:hidden}
.fz-live::before{content:"";position:absolute;inset:0 0 auto 0;height:10px;background:repeating-linear-gradient(90deg,var(--fa,#8E0B0B) 0 22px,var(--fb,#F3C66E) 22px 44px)}
.fz-bag{position:relative}
.fz-bag svg{width:100%;height:auto;display:block;overflow:visible}
.fz-bag .pen-text{font-family:"Josefin Sans",Futura,sans-serif;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.fz-bag #fzPop>g{transition:transform .45s cubic-bezier(.2,1.5,.4,1),opacity .25s}
.fz-therm{text-align:center}
.fz-pencil{display:block;width:44px;height:auto;margin:0 auto 8px;overflow:visible;transform:rotate(6deg);filter:drop-shadow(3px 4px 0 rgba(36,5,3,.14))}
.fz-pencil #fzFill{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.1);transition:transform .5s cubic-bezier(.2,.9,.3,1),fill .3s}
.fz-pencil #fzLead,.fz-pencil #fzEraser{transition:fill .3s}
.fz-therm .tube{position:relative;width:34px;height:150px;margin:0 auto 8px;border:3px solid var(--maroon-ink);border-radius:999px;background:#fff;overflow:hidden}
.fz-therm .tube i{position:absolute;left:0;right:0;bottom:0;height:10%;background:var(--fa,#8E0B0B);transition:height .5s cubic-bezier(.2,.9,.3,1)}
.fz-therm .tube::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to top,transparent 0 13px,rgba(36,5,3,.28) 13px 15px)}
.fz-therm small{display:block;font:700 10.5px var(--label);letter-spacing:.18em;text-transform:uppercase;color:#6b4540}
.fz-therm b{display:block;font:700 28px var(--label);color:var(--red);line-height:1.1}
.fz-therm span{font-size:12.5px;color:#6b4540;line-height:1.35;display:block}
.fz-stars{grid-column:1/-1;list-style:none;margin:6px 0 0;padding:14px 0 0;border-top:2px dashed rgba(86,18,11,.16);display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.fz-stars li{display:flex;align-items:center;gap:9px;font-size:14.5px;color:#6b4540}
.fz-stars li::before{content:"\2606";font-size:22px;line-height:1;color:#c9b8a0;transition:transform .35s cubic-bezier(.2,1.8,.4,1)}
.fz-stars li.done{color:var(--maroon-ink);font-weight:700}
.fz-stars li.done::before{content:"\2605";color:#F2B705;transform:scale(1.25) rotate(-12deg);text-shadow:1px 1px 0 rgba(36,5,3,.5)}
/* the slip */
#signup .form-card{background:#fffdf7 linear-gradient(90deg,transparent 43px,rgba(198,40,40,.35) 43px 45px,transparent 45px),repeating-linear-gradient(#fffdf7 0 35px,rgba(21,101,192,.16) 35px 36px);border:2px solid rgba(86,18,11,.2);box-shadow:8px 8px 0 rgba(86,18,11,.12);padding:26px 28px 30px 62px;position:relative}
#signup .form-card::before{content:"";position:absolute;left:14px;top:60px;bottom:60px;width:16px;background:radial-gradient(circle,#F6E9D2 0 7px,transparent 7.5px) center/16px 33% repeat-y}
.fz-slip-title{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin:0 0 4px;border-bottom:3px double rgba(86,18,11,.5);padding-bottom:10px}
.fz-slip-title b{font:700 21px var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.fz-slip-title span{font:500 13px var(--body);color:#6b4540}
#signup .field input,#signup .field textarea{background:#fff;border:2px solid rgba(86,18,11,.22)}
#signup .field input:focus,#signup .field textarea:focus{border-color:var(--red);outline:none}
.fz-group{border:0;padding:0;margin:0;min-width:0}
.fz-group legend{font:700 12px var(--label);letter-spacing:.16em;text-transform:uppercase;padding:0;margin-bottom:8px}
.fz-types{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.fz-types label{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;background:#fff;border:2px solid rgba(86,18,11,.22);border-radius:12px;padding:12px 4px 9px;cursor:pointer;font:700 10.5px/1.2 var(--label);letter-spacing:.08em;text-transform:uppercase;transition:transform .15s,border-color .15s}
.fz-types label:hover{transform:translateY(-3px) rotate(-1.5deg)}
.fz-types input{position:absolute;opacity:0;inset:0;cursor:pointer}
.fz-types svg{width:34px;height:34px;stroke:var(--maroon-ink);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fz-types label:has(input:checked){background:var(--red);border-color:var(--red);color:#fff;transform:rotate(-2deg) scale(1.04);box-shadow:3px 3px 0 var(--maroon-ink)}
.fz-types label:has(input:checked) svg{stroke:#fff}
.fz-types label:has(input:focus-visible){outline:3px solid var(--red);outline-offset:2px}
.fz-colors{display:grid;gap:10px}
.fz-colors .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fz-colors .row>span{flex:0 0 74px;font-size:13.5px;color:#6b4540}
.fz-colors button{width:30px;height:30px;border-radius:50%;background:var(--c);border:2px solid #fff;box-shadow:0 0 0 1.5px rgba(86,18,11,.35);cursor:pointer;padding:0;transition:transform .15s}
.fz-colors button:hover{transform:scale(1.15)}
.fz-colors button[aria-pressed=true]{box-shadow:0 0 0 3px var(--maroon-ink);transform:scale(1.18)}
.fz-range{display:flex;align-items:center;gap:14px}
.fz-range input[type=range]{flex:1;accent-color:var(--red);height:28px;padding:0;border:0!important;background:none!important}
.fz-range output{flex:none;min-width:64px;text-align:center;font:700 22px var(--label);color:var(--red);background:#fff;border:2px solid rgba(86,18,11,.22);border-radius:10px;padding:6px 8px 3px}
#signup .btn[type=submit]{font-size:15px}
.fz-kernel{position:fixed;z-index:95;width:30px;height:30px;pointer-events:none}
@media (max-width:900px){.fz-types{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){#signup .form-card{padding:22px 16px 24px 46px;background:#fffdf7 linear-gradient(90deg,transparent 31px,rgba(198,40,40,.35) 31px 33px,transparent 33px),repeating-linear-gradient(#fffdf7 0 35px,rgba(21,101,192,.16) 35px 36px)}#signup .form-card::before{left:8px}.fz-live{grid-template-columns:1fr 112px;padding:20px 14px 14px}.fz-stars{grid-template-columns:1fr}.fz-slip-title span{display:none}}
@media (prefers-reduced-motion:reduce){.fz-pencil #fzFill,.fz-bag #fzPop>g,.fz-therm .tube i,.fz-stars li::before,.fz-types label,.fz-colors button{transition:none}}

@media (min-width:700px){.fz-stars{grid-template-columns:repeat(3,auto);justify-content:space-between}}