/* ==========================================================================
   The volunteer sign-up dialog (assets/js/public-vol-flow.js) and its date picker, which
   the sign-up page (views/public/vol/date-picker.php) draws too. Roots: .npe-vf (the
   dialog) and .npe-dp (the picker). Tokens only (npe-tokens.css through .npe-my): never a
   literal colour, radius, spacing step or type size. A phone gets a full-screen sheet.
   ========================================================================== */

/* ---------- the dialog ---------- */
body.npe-vf-open{overflow:hidden;}
.npe-pv.npe-vf{position:fixed;inset:0;z-index:100040;display:flex;align-items:center;justify-content:center;max-width:none;margin:0;padding:var(--s4);background:var(--scrim);}
.npe-vf[hidden]{display:none;}
.npe-vf__panel{display:flex;flex-direction:column;width:min(640px,100%);min-height:min(560px,100%);max-height:min(780px,100%);overflow:hidden;border-radius:var(--rcard);background:var(--bg0);box-shadow:var(--sh-lg);color:var(--fg0);}
.npe-vf__hd{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s4) var(--s5) var(--s3);}
.npe-vf__heading{flex:1 1 auto;min-width:0;}
.npe-vf__eyebrow{margin:0 0 var(--s1);font-family:var(--fmono);font-size:var(--t-cap);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);}
.npe-vf__title{margin:0;padding:0;font-family:var(--fdisp);font-size:var(--t-h2);font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--fg0);overflow-wrap:anywhere;}
.npe-vf__title:focus{outline:none;}
.npe-vf__sub{margin:var(--s1) 0 0;padding:0;font-size:var(--t-sm);color:var(--fg2);overflow-wrap:anywhere;}
.npe-vf__x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-6px -10px 0 0;padding:0;border:0;border-radius:var(--rbtn);background:none;color:var(--fg1);font:inherit;font-size:24px;line-height:1;cursor:pointer;}
.npe-vf__x:hover{background:var(--bg1);}
.npe-vf__steps{display:flex;gap:var(--s1);margin:0;padding:0 var(--s5) var(--s3);list-style:none;border-bottom:1px solid var(--line);}
.npe-vf__steps li{flex:1 1 0;height:4px;border-radius:var(--rpill);background:var(--bg3);}
.npe-vf__steps li.is-done{background:var(--sig);}
.npe-vf__steps li.is-now{background:var(--sig-fill);}
.npe-vf__bd{flex:1 1 auto;min-height:0;overflow-y:auto;padding:var(--s5);}
.npe-vf .npe-vf__bd>*+*{margin-top:var(--s4);}
.npe-vf__ft{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s5);border-top:1px solid var(--line);background:var(--bg0);}
.npe-vf__ft .npe-vf__hint{flex:1 1 auto;min-width:0;margin:0;font-size:var(--t-sm);color:var(--fg2);}
.npe-vf__ft .npe-my-btn{flex:none;min-width:112px;}
.npe-vf__lead{margin:0;font-size:var(--t-body);color:var(--fg1);}
.npe-vf__err{margin:0;padding:var(--s3);border:1px solid var(--crit);border-radius:var(--rbtn);background:var(--crit-bg);font-size:var(--t-body);color:var(--crit);}
.npe-vf__ok{margin:0;padding:var(--s3);border-radius:var(--rbtn);background:var(--ok-bg);font-size:var(--t-body);font-weight:600;color:var(--ok);}
.npe-vf__busy{display:flex;align-items:center;gap:var(--s3);margin:0;font-size:var(--t-body);color:var(--fg1);}
.npe-vf__busy::before{content:"";flex:none;width:18px;height:18px;border:2px solid var(--line2);border-top-color:var(--sig);border-radius:50%;animation:npe-vf-spin .8s linear infinite;}
@keyframes npe-vf-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.npe-vf__busy::before{animation:none;}}
.npe-vf .npe-k-field{margin:0;}
.npe-vf .npe-k-form{display:flex;flex-direction:column;gap:var(--s4);}
.npe-vf fieldset{margin:0;padding:0;border:0;min-width:0;}
.npe-vf legend{padding:0;}
.npe-vf-links{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin:0;font-size:var(--t-body);}
.npe-vf-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--sig-text);}

/* ---------- the sign-up page's cards ---------- */
.npe-pv-narrow>.npe-k-card+.npe-k-card,.npe-pv-narrow>.npe-fe+.npe-k-card{margin-top:var(--s4);}

/* ---------- the date picker ---------- */
.npe-dp{border:1px solid var(--line);border-radius:var(--rrow);background:var(--bg0);overflow:hidden;}
.npe-dp__bar{display:grid;grid-template-columns:var(--h-ctl) minmax(0,1fr) var(--h-ctl);align-items:center;gap:var(--s2);padding:var(--s2);border-bottom:1px solid var(--line);}
.npe-dp__title{margin:0;padding:0;font-family:var(--fsans);font-size:var(--t-title);font-weight:700;text-align:center;color:var(--fg0);}
.npe-dp__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--h-ctl);height:var(--h-ctl);margin:0;padding:0;border:1px solid var(--line);border-radius:var(--rbtn);background:var(--bg0);font:inherit;font-size:22px;line-height:1;color:var(--fg0);text-decoration:none;cursor:pointer;}
a.npe-dp__nav:hover,button.npe-dp__nav:hover{background:var(--bg1);}
.npe-dp__nav.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none;}
.npe-dp__note{margin:0;padding:var(--s2) var(--s4);border-bottom:1px solid var(--line);background:var(--arc0);font-size:var(--t-sm);font-weight:600;text-align:center;color:var(--sig-text);}
.npe-dp__dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s1);padding:var(--s2) var(--s2) 0;}
.npe-dp__dow span{padding:var(--s1) 0;font-family:var(--fmono);font-size:var(--t-cap);font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-align:center;color:var(--fg2);}
.npe-dp__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s1);padding:var(--s2);}
.npe-dp__day{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;margin:0;padding:0;border:1px solid transparent;border-radius:var(--rbtn);background:none;font:inherit;font-size:var(--t-body);font-weight:500;color:var(--fg2);text-decoration:none;}
.npe-dp__day.is-out{visibility:hidden;}
.npe-dp__day.is-none{color:var(--fg2);opacity:.55;}
.npe-dp__day.is-open,.npe-dp__day.is-full,.npe-dp__day.is-mine{cursor:pointer;font-weight:700;}
.npe-dp__day.is-open{border-color:var(--line2);background:var(--arc0);color:var(--sig-text);}
.npe-dp__day.is-open:hover{border-color:var(--sig);background:var(--arc1);}
.npe-dp__day.is-full{border-color:var(--line);background:var(--bg2);color:var(--fg1);}
.npe-dp__day.is-mine{border-color:transparent;background:var(--ok-bg);color:var(--ok);}
.npe-dp__day.is-selected,.npe-dp__day.is-selected:hover{border-color:var(--sig-fill);background:var(--sig-fill);color:var(--bg0);}
.npe-dp__day.is-today{box-shadow:inset 0 -3px 0 var(--sig);}
.npe-dp__day:focus-visible,.npe-dp__nav:focus-visible{outline:2px solid var(--sig);outline-offset:2px;}
.npe-dp__legend{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s4);margin:0;padding:var(--s2) var(--s4) var(--s3);font-size:var(--t-sm);color:var(--fg2);}
.npe-dp__key{display:inline-block;width:12px;height:12px;margin-right:6px;border:1px solid var(--line2);border-radius:4px;vertical-align:-1px;}
.npe-dp__key.is-open{background:var(--arc0);}
.npe-dp__key.is-full{background:var(--bg2);}
.npe-dp__key.is-mine{border-color:transparent;background:var(--ok-bg);}
.npe-pv-picked{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2);margin:var(--s3) 0 0;font-size:var(--t-body);color:var(--fg0);}
.npe-pv-picked .npe-my-eyebrow{margin:0;}

/* picked dates under the picker */
.npe-vf-picked{display:flex;flex-direction:column;gap:var(--s2);margin:0;padding:0;list-style:none;}
.npe-vf-picked li{display:flex;align-items:center;gap:var(--s2);min-height:44px;padding:var(--s1) var(--s3);border:1px solid var(--line);border-radius:var(--rbtn);font-size:var(--t-body);}
.npe-vf-picked li>span:first-child{flex:1 1 auto;min-width:0;}
.npe-vf-picked .npe-vf-picked__time{color:var(--fg2);font-size:var(--t-sm);}
.npe-vf-picked button{flex:none;min-width:44px;min-height:44px;padding:0 var(--s2);border:0;background:none;font:inherit;font-size:var(--t-sm);font-weight:600;color:var(--sig-text);cursor:pointer;}
.npe-vf-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);margin:0;}
.npe-vf-tools button{min-height:44px;padding:0;border:0;background:none;font:inherit;font-size:var(--t-body);font-weight:600;color:var(--sig-text);cursor:pointer;}

/* who, role, requirements, review */
.npe-vf-rules{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:var(--t-sm);color:var(--fg2);}
.npe-vf-people{display:flex;flex-direction:column;gap:var(--s2);margin:0;padding:0;list-style:none;}
.npe-vf-person{display:flex;align-items:center;gap:var(--s3);min-height:56px;padding:var(--s2) var(--s3);border:1px solid var(--line2);border-radius:var(--rbtn);cursor:pointer;}
.npe-vf-person.is-on{border-color:var(--sig);background:var(--arc0);box-shadow:inset 0 0 0 1px var(--sig);}
.npe-vf-person input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--sig);}
.npe-vf-person__name{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;font-size:var(--t-body);font-weight:600;color:var(--fg0);}
.npe-vf-person__name small{font-size:var(--t-sm);font-weight:400;color:var(--fg2);}
.npe-vf-role{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s1) var(--s3);min-height:44px;padding:var(--s2) var(--s3);border:1px solid var(--line2);border-radius:var(--rbtn);cursor:pointer;font-size:var(--t-body);}
.npe-vf-role.is-on{border-color:var(--sig);background:var(--arc0);box-shadow:inset 0 0 0 1px var(--sig);}
.npe-vf-role input{position:absolute;opacity:0;pointer-events:none;}
.npe-vf-role:has(input:focus-visible){outline:2px solid var(--sig);outline-offset:2px;}
.npe-vf-role b{font-weight:600;}
.npe-vf-req{display:flex;flex-direction:column;gap:var(--s2);margin:0;padding:0;list-style:none;}
.npe-vf-req__who{margin:0 0 var(--s1);font-size:var(--t-body);font-weight:700;color:var(--fg0);}
.npe-vf-req>li{padding:var(--s3);border:1px solid var(--line);border-radius:var(--rbtn);}
.npe-vf-req .npe-pv-reqs li{padding:var(--s2) 0;}
.npe-vf-req__act{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2);}
.npe-vf-req__act .npe-my-btn{min-height:44px;}
.npe-vf-waivers{display:flex;flex-direction:column;gap:var(--s4);}
.npe-vf-waivers .npe-vf-waiver__title{margin:0 0 var(--s2);padding:0;font-size:var(--t-title);font-weight:700;color:var(--fg0);}
.npe-vf-waivers form{padding:var(--s3);border:1px solid var(--line);border-radius:var(--rbtn);}
.npe-vf-sum{display:grid;gap:var(--s3);margin:0;padding:0;}
.npe-vf-sum>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s3);padding-bottom:var(--s3);border-bottom:1px solid var(--line);}
.npe-vf-sum>div:last-child{padding-bottom:0;border-bottom:0;}
.npe-vf-sum dt{font-family:var(--fmono);font-size:var(--t-cap);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--fg2);padding-top:2px;}
.npe-vf-sum dd{margin:0;font-size:var(--t-body);color:var(--fg0);overflow-wrap:anywhere;}
.npe-vf-sum ul{margin:0;padding:0;list-style:none;}
.npe-vf-sum li{margin:0;padding:2px 0;}
.npe-vf-done{display:flex;flex-direction:column;align-items:center;gap:var(--s3);padding:var(--s4) 0 var(--s2);text-align:center;}
.npe-vf-done__mark{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--ok-bg);color:var(--ok);font-size:28px;font-weight:700;}
.npe-vf-done h3{margin:0;padding:0;font-family:var(--fdisp);font-size:var(--t-h2);font-weight:800;color:var(--fg0);}
.npe-vf-done p{margin:0;font-size:var(--t-body);color:var(--fg1);}
.npe-vf-results{width:100%;margin:0;padding:0;list-style:none;text-align:left;}
.npe-vf-results li{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:44px;padding:var(--s2) 0;border-bottom:1px solid var(--line);font-size:var(--t-body);}
.npe-vf-results li:last-child{border-bottom:0;}
.npe-vf-results li{flex-wrap:wrap;}
.npe-vf-qr{flex:1 1 100%;}
.npe-vf-qr__code{width:160px;max-width:100%;}
.npe-vf-qr__code svg{display:block;width:100%;height:auto;}
.npe-vf-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}

/* ---------- a phone: the dialog is a full-screen sheet ---------- */
@media (max-width:720px){
  .npe-pv.npe-vf{padding:0;align-items:stretch;}
  .npe-vf__panel{width:100%;max-height:none;height:100%;border-radius:0;box-shadow:none;}
  .npe-vf__hd{padding:var(--s4) var(--s4) var(--s3);}
  .npe-vf__steps{padding:0 var(--s4) var(--s3);}
  .npe-vf__bd{padding:var(--s4);}
  .npe-vf__ft{padding:var(--s3) var(--s4);padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom,0px));}
  .npe-vf__ft .npe-my-btn{flex:1 1 0;}
  .npe-vf__ft .npe-vf__hint{display:none;}
  .npe-vf-sum>div{grid-template-columns:minmax(0,1fr);gap:var(--s1);}
  .npe-dp__day{min-height:44px;}
}