/* ---- volunteer shift picker ---- */
.helpgrid{display:flex;flex-wrap:wrap;gap:9px}
.helpgrid label{position:relative;display:inline-flex}
.helpgrid input{position:absolute;opacity:0;width:0;height:0}
.helpgrid span{display:inline-flex;align-items:center;padding:9px 15px;border:1.5px solid var(--line);
  border-radius:999px;background:#fff;cursor:pointer;font:600 .88rem/1.2 'Inter',sans-serif;color:var(--body);
  transition:all .18s var(--ease)}
.helpgrid span:hover{border-color:var(--purple);color:var(--purple)}
.helpgrid input:checked + span{background:var(--purple);border-color:var(--purple);color:#fff;font-weight:700}
.helpgrid input:focus-visible + span{outline:3px solid rgba(92,45,145,.35);outline-offset:2px}

.flexrow{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.flexrow label{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:.86rem;color:var(--body);line-height:1.45}
.flexrow input{width:17px;height:17px;accent-color:var(--purple);margin-top:2px;flex:0 0 auto}
.shifterr{display:none;margin-top:11px;background:#fff4f4;border:1.5px solid #f3c9c9;color:#9b2226;
  border-radius:10px;padding:10px 13px;font-size:.85rem;font-weight:600}
.shifterr.on{display:block}

.shiftpick{border:1.5px solid var(--line);border-radius:16px;background:var(--soft);padding:18px;margin-bottom:18px}
.shiftpick__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.shiftpick__head h4{font-family:'Sora',sans-serif;font-size:1rem;color:var(--ink);margin:0 0 3px}
.shiftpick__sub{font-size:.86rem;color:var(--body);margin:0;line-height:1.45}
.shiftpick__count{flex:0 0 auto;background:#fff;border:1.5px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:.82rem;font-weight:700;color:var(--body);white-space:nowrap}
.shiftpick__count b{color:var(--purple);font-size:1rem}
.shiftpick__count.on{border-color:var(--gold);background:#fffaf0}

.shiftpick__quick{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.shiftpick__quick button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 13px;
  font:600 .8rem/1.2 'Inter',sans-serif;color:var(--body);cursor:pointer;transition:all .18s var(--ease)}
.shiftpick__quick button:hover{border-color:var(--purple);color:var(--purple)}
.shiftpick__quick button[data-quick="clear"]{margin-left:auto;color:#9a8fa8}

.shiftpick__weeks{display:flex;flex-direction:column;gap:9px;max-height:none}
.wk{background:#fff;border:1.5px solid var(--line);border-radius:13px;overflow:hidden}
.wk>summary{list-style:none;cursor:pointer;padding:12px 15px;display:flex;align-items:center;gap:10px;
  font-family:'Sora',sans-serif;font-weight:600;font-size:.9rem;color:var(--ink)}
.wk>summary::-webkit-details-marker{display:none}
.wk>summary:hover{background:var(--soft)}
.wk__chev{width:9px;height:9px;border-right:2px solid var(--purple);border-bottom:2px solid var(--purple);
  transform:rotate(-45deg);transition:transform .2s var(--ease);flex:0 0 auto;margin-right:2px}
.wk[open] .wk__chev{transform:rotate(45deg)}
.wk__n{margin-left:auto;background:var(--purple);color:#fff;border-radius:999px;padding:2px 9px;
  font:700 .74rem/1.5 'Inter',sans-serif;opacity:0;transition:opacity .18s}
.wk__n.on{opacity:1}
.wk__days{border-top:1px solid var(--line)}
.day{display:flex;align-items:center;gap:12px;padding:9px 15px;border-bottom:1px solid var(--line)}
.day:last-child{border-bottom:0}
.day--today{background:#fdfaff}
.day__d{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:7px;font-size:.88rem}
.day__d b{font-family:'Sora',sans-serif;color:var(--ink);font-weight:700;min-width:32px}
.day__d span{color:var(--body)}
.day__tag{font:700 .66rem/1 'Inter',sans-serif;text-transform:uppercase;letter-spacing:.06em;
  background:var(--gold);color:#3a2a08;border-radius:999px;padding:4px 8px;white-space:nowrap}
.day__s{display:flex;gap:7px;flex:0 0 auto}
.sh{position:relative;display:inline-flex}
.sh input{position:absolute;opacity:0;width:0;height:0}
.sh span{display:inline-flex;align-items:center;justify-content:center;min-width:74px;padding:7px 11px;
  border:1.5px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;
  font:600 .82rem/1.2 'Inter',sans-serif;color:var(--body);transition:all .15s var(--ease);white-space:nowrap}
.sh span:hover{border-color:var(--purple);color:var(--purple)}
.sh input:checked + span{background:var(--purple);border-color:var(--purple);color:#fff;font-weight:700}
.sh input:focus-visible + span{outline:3px solid rgba(92,45,145,.35);outline-offset:2px}

.shiftpick__chosen{margin-top:13px;padding-top:13px;border-top:1px dashed var(--line)}
.shiftpick__chosen h5{font:700 .78rem/1.3 'Sora',sans-serif;text-transform:uppercase;letter-spacing:.08em;
  color:var(--purple);margin:0 0 8px}
.chiprow{display:flex;flex-wrap:wrap;gap:6px}
.chiprow button{border:1.5px solid var(--purple);background:#fff;color:var(--purple);border-radius:999px;
  padding:5px 10px 5px 12px;font:600 .78rem/1.2 'Inter',sans-serif;cursor:pointer;display:inline-flex;
  align-items:center;gap:7px;transition:all .15s var(--ease)}
.chiprow button:hover{background:var(--purple);color:#fff}
.chiprow button i{font-style:normal;font-size:1rem;line-height:.8;opacity:.7}
.shiftnote{font-size:.82rem;color:var(--body);margin:10px 0 0;line-height:1.5}

@media (max-width:560px){
  .shiftpick{padding:14px}
  .shiftpick__head{flex-direction:column;gap:8px}
  .day{flex-direction:column;align-items:stretch;gap:8px;padding:11px 13px}
  .day__s{width:100%}
  .sh{flex:1 1 0}
  .sh span{width:100%;min-width:0}
}
