*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --forest:#0F5E41;--fdeep:#0B4631;--fbright:#13724F;--mint:#CDE8DC;
  --ink:#13241D;--body:#46554E;--muted:#93a9a0;--line:#e4ede8;
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Avenir Next','Avenir',system-ui,-apple-system,'Segoe UI',sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.6;font-size:17px}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid #F2BE3D;outline-offset:3px}

.hero{position:relative;background:var(--forest);color:#fff;text-align:center;padding:clamp(3rem,6vw,4.6rem) 2rem clamp(3rem,6vw,4.4rem)}
.form-util{position:absolute;top:1.2rem;right:1.6rem;left:1.6rem;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.form-home{min-height:44px;border:1.5px solid rgba(255,255,255,.78);background:#fff;color:var(--forest);border-radius:100px;padding:.78rem 1.15rem;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;gap:.55rem;line-height:1.2;box-shadow:0 14px 32px -24px rgba(0,0,0,.5);transition:background .18s,border-color .18s,transform .18s}
.form-home:hover{background:var(--mint);border-color:#fff;color:var(--forest);transform:translateY(-1px)}
.form-util i{font-size:.95em}
.form-util-logo{max-height:clamp(28px,4vw,38px);max-width:28vw;width:auto;height:auto}
.form-account{position:relative;display:flex;align-items:center;justify-content:flex-end}
.account-trigger{border:1px solid rgba(255,255,255,.42);background:rgba(255,255,255,.12);border-radius:100px;min-height:44px;padding:.25rem .62rem .25rem .25rem;color:#fff;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:.48rem;transition:background .18s,border-color .18s}
.account-trigger:hover,.account-trigger[aria-expanded="true"]{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.72)}
.account-initials{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--forest);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;letter-spacing:.04em}
.account-name{display:none}
.account-menu{position:absolute;top:calc(100% + .65rem);right:0;min-width:190px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 42px -24px rgba(19,36,29,.55);padding:.45rem;display:grid;gap:.15rem;text-align:left;z-index:6}
.account-menu[hidden]{display:none!important}
.account-menu::before{content:"";position:absolute;top:-7px;right:18px;width:12px;height:12px;background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.account-menu a,.account-menu button{width:100%;min-height:44px;border:none;background:#fff;color:var(--ink);border-radius:10px;padding:.78rem .85rem;font-family:inherit;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;display:flex;align-items:center;gap:.7rem;line-height:1.2;text-align:left}
.account-menu a:hover,.account-menu button:hover{background:#f3f8f5;color:var(--forest)}
.account-menu i{width:1rem;color:var(--forest);text-align:center}
.crest{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:50%;background:var(--fdeep);border:2px solid var(--mint);margin-top:2.2rem;margin-bottom:1.5rem}
.crest i{font-size:2rem;color:var(--mint)}
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-size:13px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--mint)}
.eyebrow::before,.eyebrow::after{content:"";width:30px;height:1px;background:var(--mint);opacity:.55}
.hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(2.6rem,6vw,4rem);line-height:1.02;margin:.8rem 0 .5rem;letter-spacing:-.01em}
/* the lede is constrained to the rendered width of the h1 above it,
   measured at runtime, so the two blocks share one edge */
.hero .lede{font-size:clamp(1.05rem,2vw,1.18rem);color:rgba(255,255,255,.88);margin:.9rem auto 0;line-height:1.6;max-width:var(--lede-width,52ch);text-wrap:pretty}
.hero .pills{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:2rem}
.hero .pills span{display:inline-flex;align-items:center;gap:.5rem;font-size:14px;font-weight:600;color:#fff;background:var(--fdeep);border:1px solid var(--fbright);border-radius:100px;padding:.55rem 1.15rem}
.hero .pills i{color:var(--mint)}

.sheet{max-width:950px;margin:0 auto;padding:clamp(2.4rem,5vw,3.6rem) clamp(1.4rem,4vw,2.6rem) 4rem}

.section{margin-bottom:2.8rem}
.section:last-of-type{margin-bottom:0}
.shead{display:flex;align-items:center;gap:.9rem;margin-bottom:2.2rem}
.snum{flex:none;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--forest);color:#fff;font-family:var(--serif);font-weight:700;font-size:1.1rem;line-height:2;text-align:center;display:flex;align-items:center;justify-content:center}
.shead h2{font-family:var(--serif);font-weight:700;font-size:1.55rem;color:var(--forest);line-height:1.1}
.sigt i{color:var(--fbright);margin-right:.5rem}
.shead .sline{display:none}

.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.fgrid > .field > label{white-space:normal;overflow:visible;text-overflow:clip}
.fgrid.one{grid-template-columns:1fr}
/* consecutive single-column answer blocks need the same breathing room the
   date and plain builders already add, or a question's "Nothing to add"
   reads as belonging to the question below it */
.fgrid.one+.fgrid.one{margin-top:3.4rem}
.field.full{grid-column:1/-1}
.field label{display:block;font-size:1rem;font-weight:600;color:var(--ink);margin-bottom:.55rem}
.field label > i:first-child{color:var(--fbright);margin-right:.5rem;width:1.05em;text-align:center}
.qlabel > i:first-child{color:var(--fbright);margin-right:.5rem;width:1.05em;text-align:center}
.field .fhint{display:block;color:var(--ink);font-weight:400;font-size:.88rem;line-height:1.45;margin-top:.4rem}
.field input,.field textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:.95rem 1.1rem;font-size:1.05rem;font-family:var(--sans);color:var(--ink);background:#fff;transition:border-color .18s,box-shadow .18s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 4px rgba(15,94,65,.12)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input[type=time],.field input[type=date]{cursor:pointer}
.psearchwrap{position:relative}
.psearchresults{position:absolute;top:calc(100% + .3rem);left:0;right:0;z-index:20;background:#fff;border:1.5px solid var(--line);border-radius:12px;box-shadow:0 18px 42px -24px rgba(19,36,29,.55);overflow:hidden;max-height:18rem;overflow-y:auto}
.psearchresults[hidden]{display:none}
.psearchopt{display:block;width:100%;text-align:left;border:none;background:#fff;color:var(--ink);font-family:var(--sans);font-size:1.02rem;padding:.85rem 1.1rem;cursor:pointer}
.psearchopt:hover,.psearchopt:focus{background:#f3f8f5;color:var(--forest);outline:none}
.field input[type=time]::-webkit-calendar-picker-indicator,
.field input[type=date]::-webkit-calendar-picker-indicator{opacity:.7;cursor:pointer}
.field textarea{resize:vertical;min-height:110px;line-height:1.65}

.qrow{margin-bottom:1.5rem}
.qrow:last-child{margin-bottom:0}
.qlabel{font-size:1.08rem;font-weight:700;color:var(--ink);margin-bottom:.7rem;line-height:1.4}
.ynrow{display:flex;gap:.6rem;flex-wrap:wrap}
.ynopt{position:relative;cursor:pointer}
.ynopt input{position:absolute;opacity:0;pointer-events:none}
.ynp{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;border:1.5px solid var(--line);border-radius:100px;padding:.62rem 1.3rem;font-size:1.02rem;font-weight:600;color:var(--body);background:#fff;transition:all .18s}
.ynopt:hover .ynp{border-color:var(--fbright);color:var(--ink)}
.ynopt input:checked + .ynp{border-color:var(--forest);background:var(--forest);color:#fff}
.ynp .yd{width:16px;height:16px;border-radius:50%;border:2px solid var(--muted);flex:none;display:flex;align-items:center;justify-content:center;transition:.18s}
.ynopt input:checked + .ynp .yd{border-color:#fff;background:#fff;color:#fff}
.ynopt input:checked + .ynp .yd i{color:var(--forest);font-size:7px}
.ynopt input:not(:checked) + .ynp .yd i{display:none}

.choices{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.choice{position:relative;cursor:pointer}
.choice input{position:absolute;opacity:0;pointer-events:none}
.cbox{position:relative;border-radius:16px;padding:1.9rem 1.4rem;height:100%;text-align:center;background:var(--forest);color:#fff;transition:transform .18s,box-shadow .18s}
.choice:hover .cbox{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(15,94,65,.5)}
.cbadge{position:absolute;top:.85rem;right:.85rem;width:1.7rem;height:1.7rem;border-radius:50%;background:#fff;color:var(--forest);display:flex;align-items:center;justify-content:center;font-size:.82rem;opacity:0;transform:scale(.6);transition:opacity .18s,transform .18s}
.choice input:checked + .cbox .cbadge{opacity:1;transform:scale(1)}
.cic{width:56px;height:56px;margin:0 auto .95rem;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.35rem;flex:none}
.cname{display:block;font-weight:600;font-size:1.06rem;color:#fff;line-height:1.25}
.cdesc{display:block;font-size:.91rem;color:rgba(255,255,255,.85);margin-top:.45rem;line-height:1.45}

.chiprow{display:flex;gap:.6rem;flex-wrap:wrap}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chipl{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;border:1.5px solid var(--line);border-radius:100px;padding:.62rem 1.2rem;font-size:1.02rem;font-weight:600;color:var(--body);background:#fff;transition:all .18s}
.chip:hover .chipl{border-color:var(--fbright);color:var(--ink)}
.chip input:checked + .chipl{border-color:var(--forest);background:#f3f8f5;color:var(--forest)}
.chipl .cb{width:18px;height:18px;border-radius:5px;border:2px solid var(--muted);flex:none;display:flex;align-items:center;justify-content:center;transition:.18s}
.chip input:checked + .chipl .cb{border-color:var(--forest);background:var(--forest)}
.chip input:checked + .chipl .cb i{color:#fff;font-size:9px}
.chip input:not(:checked) + .chipl .cb i{display:none}

.reveal{display:none;margin-top:1.2rem;background:#f3f8f5;border-left:4px solid var(--forest);border-radius:0 14px 14px 0;padding:1.4rem 1.5rem}
.reveal.show{display:block}
.reveal .qrow:last-child,.reveal .field:last-child{margin-bottom:0}
/* Directive shown when an answer means the person should file another form
   (e.g. an incident reported on a review -> go fill out an Incident Report). */
.callout{display:flex;align-items:flex-start;gap:.9rem}
.callout>i{color:var(--forest);font-size:1.25rem;margin-top:.15rem;flex:none}
.callout>div{display:flex;flex-direction:column;gap:.3rem}
.callout b{font-weight:600;color:var(--ink);font-size:1.05rem}
.callout span{color:var(--body);line-height:1.6}
.callout a{color:var(--forest);font-weight:600;text-decoration:underline}
.callout a:hover{color:var(--fbright)}

.sig{border:1.5px solid var(--line);border-radius:16px;padding:1.4rem 1.5rem;margin-bottom:1.2rem}
.sig:last-of-type{margin-bottom:0}
.sigt{font-size:1.08rem;font-weight:700;color:var(--ink);margin-bottom:1rem}
.sigtoggle{display:inline-flex;gap:.3rem;background:#f3f8f5;border-radius:100px;padding:.28rem;margin-bottom:1.1rem}
.sigtoggle button{min-height:44px;border:none;background:none;padding:.5rem 1.1rem;border-radius:100px;font-size:.95rem;font-weight:700;color:var(--body);cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:.45rem;transition:.18s}
.sigtoggle button.on{background:#fff;color:var(--forest)}
.sigtype input{width:100%;border:none;border-bottom:2px solid var(--line);border-radius:0;padding:.7rem .2rem;font-family:var(--serif);font-style:italic;font-size:1.7rem;color:var(--forest);background:none;transition:border-color .18s}
.sigtype input:focus{outline:none;border-bottom-color:var(--forest)}
.sigtype input::placeholder{font-style:normal;font-family:var(--sans);font-size:1.02rem;color:var(--muted)}
.sigtype .hint{font-size:1rem;color:var(--body);margin-top:.6rem}
.sigdraw{position:relative}
.sigdraw canvas{width:100%;height:140px;border:2px dashed var(--line);border-radius:14px;background:#fff;touch-action:none;cursor:crosshair;display:block}
.sigdraw .ph{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1rem;color:var(--muted);pointer-events:none}
.sigdraw .clr{position:absolute;top:.7rem;right:.7rem;min-height:44px;font-size:.9rem;font-weight:600;color:var(--body);background:#fff;border:1.5px solid var(--line);border-radius:100px;padding:.4rem .9rem;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:.4rem}
.sigdraw .clr:hover{border-color:var(--forest);color:var(--forest)}
.sigdate{margin-top:1.1rem;max-width:230px}
.sigdate label{display:block;font-size:.92rem;font-weight:700;color:var(--body);margin-bottom:.4rem}
.sigdate input{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:.7rem .85rem;font-size:1.02rem;font-family:var(--sans);color:var(--ink)}
.sigdate input:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 4px rgba(15,94,65,.12)}
.hide{display:none!important}

.actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2.6rem;justify-content:flex-end}
.btn{border:none;border-radius:100px;padding:1.05rem 2.2rem;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:.6rem;transition:.18s;flex-direction:row-reverse}
/* row-reverse trails the icon, which is right for a right-pointing arrow.
   a left-pointing arrow must lead instead, or it lands on the wrong side. */
.btn-lead{flex-direction:row}
.btn-go{background:var(--forest);color:#fff}
.btn-go:hover{background:var(--fdeep)}
.btn-pdf{background:#fff;color:var(--forest);border:1.5px solid var(--line)}
.btn-pdf:hover{border-color:var(--forest)}
.btn[disabled]{opacity:.6;cursor:default}
.err{background:#fdecec;border:1px solid #f4caca;color:#9d2b2b;border-radius:12px;padding:.9rem 1.1rem;font-size:1rem;margin-top:2rem}
.ok{background:#f3f8f5;border:1px solid var(--mint);color:var(--forest);border-radius:12px;padding:.9rem 1.1rem;font-size:1.02rem;font-weight:600;margin-top:2rem;margin-bottom:0;display:flex;align-items:center;gap:.6rem}
.hidden{display:none!important}
/* Save status + Save & Finish Later, at the foot of every form. Reassures the
   person their progress is kept and lets them leave on purpose. */
.savebar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.savestatus{display:inline-flex;align-items:center;gap:.5rem;font-size:.95rem;font-weight:600;color:var(--forest)}
.savestatus i{color:var(--fbright)}
.savelater{display:inline-flex;align-items:center;gap:.5rem;background:#fff;color:var(--forest);border:1.5px solid var(--forest);border-radius:100px;padding:.6rem 1.2rem;font-family:inherit;font-size:.92rem;font-weight:600;cursor:pointer;transition:background .18s;white-space:nowrap}
.savelater:hover{background:#f3f8f5}
.savelater:disabled{opacity:.6;cursor:default}

/* ===== Submitted confirmation, replaces the form ===== */
.confirm{background:var(--forest);border-radius:20px;padding:clamp(2.4rem,5.5vw,3.4rem) clamp(1.9rem,4.2vw,2.6rem);text-align:center}
.confirm-title{font-family:var(--serif);font-weight:700;font-size:clamp(2.3rem,4.8vw,3.1rem);line-height:1.08;letter-spacing:-.018em;color:#fff;text-wrap:balance}
.confirm-copy{font-size:1.02rem;line-height:1.6;color:#fff;margin:.9rem auto 0;max-width:66ch;text-wrap:balance}
.confirm-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:2.1rem}
.confirm-acts a,.confirm-acts button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;flex-direction:row-reverse;border:none;border-radius:100px;min-height:44px;padding:.7rem 1.3rem;font-family:inherit;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .18s,color .18s}
.confirm-pdf{background:#fff;color:var(--forest)}
.confirm-pdf:hover{background:var(--ink);color:#fff}
.confirm-pdf[disabled]{opacity:.6;cursor:default}
.confirm-back{background:transparent;color:#fff;box-shadow:0 0 0 1.5px #fff inset}
.confirm-back:hover{background:#fff;color:var(--forest)}
@media print{.confirm{-webkit-print-color-adjust:exact;print-color-adjust:exact}.confirm-acts{display:none!important}}

.notice{margin-top:2rem;background:#f3f8f5;border-left:4px solid var(--forest);border-radius:0 14px 14px 0;padding:1.5rem 1.6rem;display:flex;gap:1rem;align-items:flex-start}
.notice i{color:var(--forest);font-size:1.3rem;margin-top:.1rem;flex:none}
.notice p{font-size:1.02rem;line-height:1.6;color:var(--ink)}

.foot{background:var(--forest);color:#fff;text-align:center;padding:2.4rem 2rem}
.foot .flogo{height:42px;width:auto;display:inline-block}

@media(max-width:760px){
  .form-util{position:static;justify-content:space-between;margin:-.9rem 0 1.8rem;gap:1rem}
  .form-home{min-height:42px;padding:.72rem 1rem}
  .account-menu{right:0}
}
@media(max-width:620px){
  .fgrid,.choices{grid-template-columns:1fr}
  body[data-form-type] .hero{padding:1rem 1rem 1.45rem}
  body[data-form-type] .form-util{margin:0 0 1rem}
  body[data-form-type] .form-util-logo{max-width:145px;max-height:32px}
  body[data-form-type] .account-trigger{width:44px;padding:.25rem;justify-content:center}
  body[data-form-type] .account-trigger .account-name,
  body[data-form-type] .account-trigger>.fa-chevron-down{display:none}
  body[data-form-type] .crest{display:none}
  body[data-form-type] .eyebrow{font-size:11px;letter-spacing:.22em}
  body[data-form-type] .hero h1{font-size:2rem;margin:.55rem 0 .25rem}
  body[data-form-type] .hero .lede{font-size:1rem;line-height:1.45;margin-top:.55rem}
  body[data-form-type] .sheet{padding:1.25rem 1rem 3rem}
  .sigdraw canvas{height:180px}
}
@media(max-width:360px){
  body[data-form-type] .form-util{gap:.5rem}
  body[data-form-type] .form-util-logo{max-width:110px}
  body[data-form-type] .form-home{padding:.72rem .85rem}
}
@media print{
  body{background:#fff}
  .actions,.form-util,.sigtoggle,.sigdraw .clr{display:none!important}
  .hero,.foot{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .reveal{display:block!important}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ===== Wizard: one .section visible at a time ===== */
.section[hidden]{display:none}
.dial-hd{display:grid;grid-template-columns:auto minmax(0,max-content);justify-content:center;align-items:center;gap:clamp(1rem,3vw,2rem);margin-bottom:clamp(1.7rem,4vw,2.4rem)}
.dial{width:clamp(96px,13vw,124px);height:clamp(96px,13vw,124px);position:relative;display:grid;place-items:center}
.dial svg{position:absolute;inset:0;transform:rotate(-90deg)}
.dial circle{fill:none;stroke-width:8;stroke-linecap:round}
.dial .trk{stroke:var(--line)}
.dial .val{stroke:var(--forest);transition:stroke-dashoffset .6s cubic-bezier(.22,1,.36,1)}
.dial-c{font-family:var(--serif);font-weight:700;font-size:1.5rem;color:var(--forest);line-height:1;font-variant-numeric:tabular-nums;text-align:center}
.dial-c small{display:block;font-family:var(--sans);font-size:.58rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-top:.22rem}
.dial-nm{max-width:16ch;font-family:var(--serif);font-weight:700;font-size:clamp(1.35rem,3.1vw,1.85rem);color:var(--forest);line-height:1.1;text-align:left;text-wrap:balance}
.sheet.wizard .section .shead{display:none}

.wzin{animation:wzA .42s cubic-bezier(.22,1,.36,1) both}
.wzin-b{animation:wzB .42s cubic-bezier(.22,1,.36,1) both}
@keyframes wzA{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes wzB{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}

/* Back and Continue share one row, 50/50, Back on the left. When Back is
   hidden (the first step) Continue fills the row on its own. */
.wzacts{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:clamp(1.9rem,4.4vw,2.6rem)}
.wzacts:has(.bk[hidden]){grid-template-columns:1fr}
.wzacts .go,.wzacts .bk{order:2;width:100%;min-height:52px;justify-content:center;white-space:nowrap;padding-left:.9rem;padding-right:.9rem;letter-spacing:.06em}
.wzacts .bk{order:1;background:#fff;box-shadow:none;color:var(--forest);border:1.5px solid var(--forest)!important;flex-direction:row}
.wzacts .bk:hover{background:#f3f8f5;color:var(--forest)}
.wzacts .bk[hidden]{display:none}
/* On narrow screens the two buttons share one row, so keep them compact:
   smaller text, tighter padding, shorter height, no wrap. */
@media(max-width:520px){
  .wzacts .go,.wzacts .bk{min-height:46px;font-size:11px;letter-spacing:.04em;padding:.55rem .6rem;gap:.4rem}
  .wzacts .go i,.wzacts .bk i{font-size:.9em}
}

/* visual only: an ::after never appears in label.textContent, which
   collectData() and validateClient() both read to match field values */
.field label.reqd::after{content:" (required)";color:#A62B27;font-weight:600;font-size:.82em}
.field.invalid input,.field.invalid textarea{border-color:#9d2b2b}
.wzerr{background:#fdecec;border:1px solid #f4caca;color:#9d2b2b;border-radius:12px;padding:.9rem 1.1rem;font-size:1rem;margin-top:1.4rem}
.wzerr[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.wzin,.wzin-b{animation:none}.dial .val{transition:none}}

/* ===== Answers that can be typed or spoken, shared by the postseason
   forms. Built from the tokens above, no new colours. ===== */
/* Answer component: Type it / Record it. Built from existing forms.css tokens.
   The toggle sits inside the field, sharing the input's left edge, so it reads
   as part of the answer rather than a floating control. */
.answer{display:block}
.anstoggle{display:inline-flex;gap:.3rem;border:1.5px solid var(--line);border-radius:100px;padding:.28rem;margin-bottom:clamp(.6rem,1.4vw,.9rem)}
.anstoggle button{border:none;background:none;padding:.5rem clamp(.9rem,2.4vw,1.3rem);border-radius:100px;font-size:clamp(.92rem,1.9vw,1rem);font-weight:600;color:var(--body);cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:.45rem;transition:.18s;min-height:44px}
.anstoggle button.on{background:var(--forest);color:#fff}

/* Counter stays quiet until it has something to say. Never red on arrival. */
.counter{display:block;font-size:clamp(.85rem,1.7vw,.94rem);color:var(--ink);margin-top:.4rem;min-height:1.3em}
.counter.short{color:#9d2b2b}

/* Solid border, matching .sig. Dashed belongs to the signature canvas,
   which is a surface you draw on. This is not. */
.rec{border:1.5px solid var(--line);border-radius:16px;padding:clamp(1.2rem,3vw,1.7rem) clamp(1.1rem,3vw,1.8rem);text-align:center;background:#fff}
.rec-time{display:block;font-family:var(--serif);font-size:clamp(1.5rem,4vw,2rem);font-weight:600;color:var(--forest);margin-bottom:.7rem;font-variant-numeric:tabular-nums}
.rec-btn{border:1.5px solid var(--line);border-radius:100px;min-height:44px;padding:.6rem clamp(1.1rem,3vw,1.7rem);font-family:inherit;font-size:clamp(11.5px,1.6vw,13px);font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;gap:.55rem;background:#fff;color:var(--forest);transition:border-color .18s,background .18s,color .18s}
.rec-btn:hover{border-color:var(--forest)}
.rec-btn.recording{background:#9d2b2b;border-color:#9d2b2b;color:#fff;animation:recpulse 1.6s ease-in-out infinite}
@keyframes recpulse{0%,100%{opacity:1}50%{opacity:.75}}
.rec-meter{display:none;align-items:center;justify-content:center;gap:3px;height:34px;margin:0 auto .8rem;max-width:340px}
.rec-meter.live{display:flex}
.rec-meter span{flex:1;background:var(--forest);border-radius:2px;height:12%;transition:height .1s ease}
@media(prefers-reduced-motion:reduce){.rec-btn.recording{animation:none}}
.rec-hint{display:block;font-size:clamp(.88rem,1.8vw,.98rem);color:var(--ink);margin-top:clamp(.6rem,1.5vw,.9rem)}
.rec-done{display:grid;gap:clamp(.8rem,2vw,1.1rem);justify-items:center}
.rec-done audio{width:100%}

/* Select, matching the field input styling in forms.css */
.field select{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:clamp(.85rem,2.2vw,1.05rem) clamp(1rem,2.5vw,1.2rem);font-size:clamp(1rem,2.1vw,1.08rem);font-family:var(--sans);color:var(--ink);background:#fff;transition:border-color .18s,box-shadow .18s}
.field select:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 4px rgba(15,94,65,.12)}

/* Name sits at a readable measure instead of spanning the sheet */
.field.narrow{max-width:min(100%,34ch)}

/* Crew chips carry their own colour, so the answer reads at a glance */
.chip .dot{width:14px;height:14px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.12)}
.chip .chipl{padding:.5rem clamp(.85rem,2.2vw,1.15rem);font-size:clamp(.92rem,1.9vw,1rem)}
.chip .cb{display:none}
.chip-blue .dot{background:#2C6BB0}
.chip-yellow .dot{background:#E3B23C}
.chip-red .dot{background:#B0392C}
.chip-purple .dot{background:#7A4FA3}

/* ===== Rating step, one skill per screen ===== */
/* Ratings, one skill per screen. Five answers run down the page at full width,
   so nothing has to fit across a narrow screen and nobody can click straight
   down a column without noticing. */
.skillhd{margin-bottom:clamp(1.4rem,3.6vw,2rem)}
.skillcount{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--forest);margin-bottom:.55rem}
.skillname{display:flex;align-items:center;gap:.75rem;font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,5vw,2rem);color:var(--forest);line-height:1.12}
.skillname i{font-size:.62em;flex:none}
.scale{display:grid;gap:.55rem}
.scale input{position:absolute;opacity:0;pointer-events:none}
.scale label{cursor:pointer;display:block}
.scale .opt{display:flex;align-items:center;gap:.9rem;min-height:56px;padding:.75rem 1.1rem;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-size:clamp(.98rem,2.3vw,1.05rem);font-weight:600;color:var(--ink);transition:border-color .18s,background .18s,color .18s}
.scale label:hover .opt{border-color:var(--forest)}
.scale .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--muted);flex:none;display:grid;place-items:center;transition:.18s}
.scale .dot i{display:none;font-size:9px}
.scale input:checked ~ .opt{border-color:var(--forest);background:var(--forest);color:#fff}
.scale input:checked ~ .opt .dot{border-color:#fff;background:#fff}
.scale input:checked ~ .opt .dot i{display:block;color:var(--forest)}
.scale input:focus-visible ~ .opt{box-shadow:0 0 0 4px rgba(15,94,65,.18)}
.skillnote{margin-top:clamp(1.3rem,3.4vw,1.8rem)}
.skillnote label{display:block;font-size:1rem;font-weight:600;color:var(--ink);margin-bottom:.5rem}
.skillnote label i{color:var(--fbright);margin-right:.5rem;width:1.05em;text-align:center}
.skillnote textarea{width:100%;min-height:84px;border:1.5px solid var(--line);border-radius:12px;padding:.9rem 1.05rem;font-size:1.02rem;font-family:var(--sans);color:var(--ink);background:#fff;resize:vertical;line-height:1.6}
.skillnote textarea:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 4px rgba(15,94,65,.12)}
.skillnote .fhint{margin-top:.4rem}
.pips{display:flex;gap:.4rem;justify-content:center;margin-top:clamp(1.8rem,4.5vw,2.6rem)}
.pip{width:clamp(22px,6vw,38px);height:5px;border-radius:100px;background:var(--line)}
.pip.done{background:var(--forest)}
.pip.now{background:var(--fbright)}
.gate{margin-top:clamp(2.2rem,5vw,3rem);padding-top:clamp(1.8rem,4vw,2.4rem);border-top:1px solid var(--line)}
.gate[hidden]{display:none}
.gate-q{display:block;font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:.55rem}
.gate-q i{color:var(--fbright);margin-right:.5rem}
.gate textarea{width:100%;min-height:96px;border:1.5px solid var(--line);border-radius:12px;padding:.9rem 1.05rem;font-size:1.02rem;font-family:var(--sans);color:var(--ink);background:#fff;resize:vertical;line-height:1.6}
.gate textarea:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 4px rgba(15,94,65,.12)}
.gate .counter{display:block;font-size:.88rem;color:var(--ink);margin-top:.4rem;min-height:1.3em}
.gate .counter.short{color:#9d2b2b}
/* Off screen but still submitted: collectData() skips .hide on purpose, so the
   mirrored ratings use clipping instead of display:none. */
.sronly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* "Nothing to add" on a required long answer. Same checkbox language as the
   chips, sitting quietly under the field rather than competing with it. */
/* .field label.nowt, not .nowt: these sit inside .field, and the duplicated
   .field label block rules would otherwise win and stack the box above the text */
.field label.nowt,label.nowt{display:inline-flex;align-items:center;gap:.6rem;margin-top:.9rem;font-size:.95rem;font-weight:600;color:var(--ink);cursor:pointer;padding:.45rem .2rem;user-select:none}
.nowt input{position:absolute;opacity:0;pointer-events:none}
.nowt-box{width:19px;height:19px;border-radius:6px;border:2px solid var(--muted);background:#fff;flex:none;display:flex;align-items:center;justify-content:center;transition:.16s}
.nowt-box i{color:#fff;font-size:10px;display:none}
.nowt:hover .nowt-box{border-color:var(--fbright)}
.nowt input:checked ~ .nowt-box{border-color:var(--forest);background:var(--forest)}
.nowt input:checked ~ .nowt-box i{display:block}
.nowt input:checked ~ .nowt-box + *,.nowt input:checked ~ *{color:var(--forest)}
.answer textarea:disabled{background:#f9fcfa;color:var(--ink);opacity:.7;cursor:not-allowed}

/* ============================================================
   ADMIN CHROME  (was duplicated inline on every admin page)
   ============================================================ */

/* ---------- SUBMISSIONS: list rows, detail view, training record ---------- */
.hutil{position:absolute;top:1.3rem;right:1.6rem;left:1.6rem;display:flex;gap:1rem;align-items:center;justify-content:space-between}
.hutil .home-button{min-height:42px;border:1.5px solid rgba(255,255,255,.78);background:#fff;color:var(--forest);border-radius:100px;padding:.74rem 1.1rem;font-size:12px;letter-spacing:.1em;box-shadow:0 14px 32px -24px rgba(0,0,0,.5);transition:background .18s,border-color .18s,transform .18s}
.hutil .home-button:hover{background:var(--mint);border-color:#fff;color:var(--forest);transform:translateY(-1px)}
.hutil a{font-weight:700;text-transform:uppercase;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;gap:.55rem}

.wrap{width:100%;min-width:0;max-width:950px;margin:0 auto;padding:clamp(2.2rem,4vw,3.4rem) clamp(1.4rem,4vw,2.4rem) 4rem}

.empty{border:1.5px dashed var(--line);border-radius:18px;padding:3rem 2rem;text-align:center;color:var(--body);font-size:1.08rem}
.empty i{font-size:2.4rem;color:var(--fbright);display:block;margin:0 auto 1.1rem;width:fit-content}

.mailpill{display:inline-flex;align-items:center;gap:.35rem;border-radius:100px;padding:.24rem .62rem;font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;background:#A62B27;color:#fff;white-space:nowrap;flex:none}
.mailpill i{font-size:.95em;color:#F6CFC6}

/* Band-language list: fluid card grid grouped by season. */
.findrow{display:flex;gap:.7rem;flex-wrap:wrap;align-items:flex-end}
.filter-field{flex:0 1 220px;display:flex;flex-direction:column;gap:.35rem;min-width:0}
.filter-field.search-field{flex:1 1 240px}
.filter-label{display:block;padding-left:.35rem;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);line-height:1.2}
.findrow .fs{width:100%;min-height:48px;display:flex;align-items:center;gap:.6rem;background:#F6F6F4;border-radius:100px;padding:.85rem 1.2rem}
.findrow .fs i{color:var(--fbright)}
.findrow .fs input{border:none;background:none;font-family:inherit;font-size:15px;color:var(--ink);outline:none;width:100%}
.findrow .fsel{width:100%;min-height:48px;display:flex;align-items:center;gap:.6rem;background:#F6F6F4;border-radius:100px;padding:.85rem 1.2rem}
.findrow .fsel i{color:var(--fbright)}
.findrow .fsel select{border:none;background:none;font-family:inherit;font-size:15px;color:var(--ink);outline:none;width:100%;appearance:none;cursor:pointer}
.seasonhead{display:flex;align-items:baseline;gap:.7rem;margin:2.4rem 0 1rem}
.seasonhead i{color:var(--fbright);font-size:1.05rem;align-self:center}
.seasonhead .sname{font-size:clamp(1.3rem,2.6vw,1.55rem);font-weight:600;color:var(--ink);line-height:1.2}
.seasonhead .scount{font-size:14px;color:var(--ink)}
.seasonhead .sexp{margin-left:auto;align-self:center;border:none;background:#F6F6F4;color:var(--ink);border-radius:100px;min-height:44px;padding:.45rem 1rem;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;transition:background .18s,color .18s}
.seasonhead .sexp i{color:var(--fbright);font-size:.9rem}
.seasonhead .sexp:hover{background:#F0F0ED;color:var(--forest)}
.seasonhead .sexp[disabled]{opacity:.55;cursor:default}
.subgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,calc(50% - .4rem)),1fr));gap:.8rem}
@media(max-width:520px){.seasonhead{flex-wrap:wrap;align-items:center}.subgrid{grid-template-columns:1fr}}
.scard{position:relative;background:#F6F6F4;border-radius:16px;padding:1rem 1.05rem .85rem;cursor:pointer;transition:transform .18s cubic-bezier(.32,.72,0,1),background .18s;display:flex;flex-direction:column;gap:.75rem;text-align:left;border:none;font-family:inherit}
.scard:hover{transform:translateY(-3px);background:#F0F0ED}
.scard .cardlink{position:absolute;inset:0;z-index:1;border-radius:16px}

/* Required Forms Status: who still owes a required form this season. Card
   grid, deep-red pills naming each missing form. Approved prototype spec. */
.cogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:.9rem}
.coperson{background:#F6F6F4;border-radius:16px;padding:1rem 1.15rem;display:flex;flex-direction:column;gap:.7rem}
.copn{display:flex;align-items:baseline;gap:.5rem;font-weight:600;font-size:1.02rem;color:var(--ink);line-height:1.3}
.copn i{color:var(--fbright);font-size:.85rem;flex:none}
.copmiss{display:flex;flex-wrap:wrap;gap:.4rem}
.comiss{display:inline-flex;align-items:center;gap:.4rem;background:#9D2B2B;color:#fff;border-radius:100px;padding:.28rem .75rem;font-size:.8rem;font-weight:600;line-height:1.4}
.comiss i{font-size:.72rem;color:#fff}
.coreview-state{display:inline-flex;align-items:center;gap:.4rem;border-radius:100px;padding:.28rem .75rem;font-size:.8rem;font-weight:700;line-height:1.4;color:#fff}
.coreview-state i{font-size:.72rem;color:#fff}
.coreview-state.missing{background:#9D2B2B}
.coreview-state.in_progress{background:#8A5200}
.coreview-state.complete{background:var(--forest)}
.coreview-meta{display:flex;align-items:flex-start;gap:.45rem;color:var(--body);font-size:.86rem;line-height:1.45}
.coreview-meta i{color:var(--fbright);font-size:.8rem;margin-top:.25rem;flex:none}
.coperson.coordinator-complete{background:#f3f8f5}
.cofoot{display:flex;align-items:center;gap:.5rem;margin-top:.1rem}
.cob{min-height:44px;font-size:.85rem;font-weight:600;color:var(--body);background:none;border:none;border-radius:100px;padding:.35rem .65rem;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;transition:.18s}
.cob i{font-size:.78rem;color:var(--fbright)}
.cob:hover{background:#f3f8f5;color:var(--forest)}
#rsFormFilter{min-width:15rem}
.filter-field:has(#rsFormFilter){flex:0 1 auto}
.coempty{color:var(--body);font-size:.95rem;padding:.4rem 0}
/* Crew context: which crew this person was on, at the end of the card's
   header row. In flow rather than absolute, so a long form name wraps beside
   it instead of running underneath. Above .cardlink so the link stays
   clickable. */
.scard .crewmark{margin-left:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;position:relative;z-index:2;padding-left:.5rem}
.crewdot{width:11px;height:11px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.14)}
.scard .crewlink{display:inline-flex;align-items:center;justify-content:center;color:var(--forest);text-decoration:none;font-size:.82rem;width:22px;height:22px;border-radius:50%;transition:background .18s}
.scard .crewlink:hover{background:#e6f0ea}
.scard .cardbody{display:flex;flex-direction:column;gap:.75rem;min-width:0}
.scard .cacts{position:relative;z-index:2}
.scard .chead{display:flex;align-items:flex-start;gap:.7rem}
.scard .fic{width:34px;height:34px;border-radius:50%;background:var(--forest);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;flex:none}
.scard .ctxt{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.scard .fname{font-weight:600;font-size:1rem;color:var(--forest);line-height:1.25;text-wrap:balance}
.scard .who{display:flex;align-items:center;gap:.45rem;font-size:14.5px;font-weight:600;color:var(--ink);min-width:0}
.scard .who .ric{display:inline-flex;gap:.3rem}
.scard .who .ric i{color:var(--fbright);font-size:.85rem}
.scard .reviewee{display:flex;align-items:center;gap:.4rem;font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.35;min-width:0}
.scard .reviewee i{color:var(--fbright);font-size:.72rem;flex:none}
.scard .reviewee span{overflow-wrap:anywhere}
.scard .mailpill{align-self:flex-start}
.scard .cfoot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:auto}
.scard .when{font-size:13.5px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.scard .cacts{display:flex;gap:.3rem;flex:none}
.scard .cbtn{border:none;background:#fff;color:var(--fbright);border-radius:50%;width:44px;height:44px;padding:0;font-size:.85rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .18s,color .18s}
.scard .cbtn:hover{color:var(--forest);background:#fff}
.scard .cbtn.del:hover{color:#A62B27}
.scard .cbtn[disabled]{opacity:.55;cursor:default}
.ppage{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.4rem}
.pcount{font-size:.95rem;color:var(--ink)}
.pnav{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.pgb{border:1.5px solid var(--line);background:#fff;color:var(--body);border-radius:100px;min-width:44px;min-height:44px;padding:.5rem .9rem;font-size:.95rem;font-weight:600;font-family:inherit;cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .18s,box-shadow .18s;display:inline-flex;align-items:center;justify-content:center;gap:.4rem}
.pgb:hover:not([disabled]):not(.on){background:var(--forest);border-color:var(--forest);color:#fff;transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(15,94,65,.55)}
.pgb:active:not([disabled]){transform:translateY(0)}
.pgb.on{background:var(--forest);border-color:var(--forest);color:#fff}
.pgb[disabled]{opacity:.45;cursor:default}
.pager{margin-top:2rem;display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;justify-content:space-between}
.pager .ptext{font-size:.98rem;color:var(--body)}
.btn-lite{background:#fff;color:var(--forest);border:1.5px solid var(--line)}
.btn-lite:hover{background:#fff;border-color:var(--forest)}
@media(max-width:760px){.hutil{position:static;justify-content:space-between;margin:-.8rem 0 1.8rem;gap:.7rem}.hutil .home-button{min-height:42px;padding:.72rem 1rem}}
@media print{.hutil{display:none!important}.hero{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* ---------- ROLES: role cards, roster, modal, multi-select ---------- */
html{scroll-behavior:smooth}
@media(max-width:760px){.form-util{position:static;justify-content:space-between;margin:-.9rem 0 1.8rem;gap:1rem}}
.acchead{display:flex;align-items:center;justify-content:space-between;gap:.9rem;width:100%;background:var(--forest);color:#fff;border:none;border-radius:16px;padding:1.2rem 1.5rem;cursor:pointer;font-family:inherit;text-align:left;transition:transform .15s,box-shadow .15s}
.acchead:hover{transform:translateY(-1px);box-shadow:0 14px 30px -18px rgba(15,94,65,.5)}
.acchead .acctitle{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--serif);font-weight:700;font-size:1.35rem;color:#fff;line-height:1}
.acchead .acctitle i{font-size:.82em;color:var(--mint)}
.acchead .accright{display:inline-flex;align-items:center;gap:.6rem}
.acchead .acccount{color:var(--mint);font-size:.85rem;font-weight:600;letter-spacing:.02em}
.acchead .accchev{color:#fff;font-size:1rem;transition:transform .25s ease}
.acchead[aria-expanded="true"] .accchev{transform:rotate(180deg)}
/* Animated reveal: max-height slides from 0 to a cap larger than the grid can
   ever be, with opacity easing in. A plain class toggle, no JS measuring. The
   cap is intentionally generous so any number of role cards fits. */
.accpanel{max-height:0;overflow:hidden;opacity:0;margin-top:0;transition:max-height .38s cubic-bezier(.32,.72,0,1),opacity .3s ease,margin-top .38s cubic-bezier(.32,.72,0,1)}
.accpanel.open{max-height:4000px;opacity:1;margin-top:1rem}
.rolegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.rc{position:relative;border-radius:16px;padding:1.9rem 1.4rem;text-align:center;background:var(--forest);color:#fff;transition:transform .18s,box-shadow .18s;cursor:pointer;border:none;font-family:inherit;width:100%}
.rc:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(15,94,65,.5)}
.rc .cic{width:56px;height:56px;margin:0 auto .95rem;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.35rem}
.rc .cname{display:block;font-weight:600;font-size:1.06rem;color:#fff;line-height:1.25}
.rc .cdesc{display:block;font-size:.91rem;color:rgba(255,255,255,.85);margin-top:.45rem;line-height:1.45}
.rc .cn{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;font-size:.9rem;color:rgba(255,255,255,.9);background:rgba(255,255,255,.16);border-radius:100px;padding:.3rem .8rem}
.rc.off{background:#fff;color:var(--forest);box-shadow:0 0 0 1.5px var(--line) inset}
.rc.off .cic{background:#f3f8f5;color:var(--forest)}
.rc.off .cname{color:var(--forest)}
.rc.off .cdesc{color:var(--ink)}
.rc.off .cn{background:#f3f8f5;color:var(--forest)}
.rc[draggable="true"]{cursor:grab}
.rc.dragging{opacity:.4;cursor:grabbing}
.rc.dropbefore{box-shadow:-5px 0 0 0 var(--forest)}
.rc.dropafter{box-shadow:5px 0 0 0 var(--forest)}
.rc.off.dropbefore{box-shadow:-5px 0 0 0 var(--forest),0 0 0 1.5px var(--line) inset}
.rc.off.dropafter{box-shadow:5px 0 0 0 var(--forest),0 0 0 1.5px var(--line) inset}
.rc .rcedit{position:absolute;top:.55rem;right:.55rem;width:44px;height:44px;min-width:44px;min-height:44px;border:none;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:background .18s;z-index:2}
.rc .rcedit:hover{background:rgba(255,255,255,.28)}
.rc.off .rcedit{background:#f3f8f5;color:var(--forest)}
.rc.off .rcedit:hover{background:#e9f2ee}
.selbar{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;background:#f3f8f5;border:1.5px solid var(--mint);border-radius:14px;padding:.85rem 1.1rem;margin-bottom:1rem}
.selbar .selcount{font-weight:600;color:var(--forest);white-space:nowrap}
.selbar select{border:1.5px solid var(--line);border-radius:100px;padding:.55rem 2.2rem .55rem 1rem;font-size:.95rem;font-family:var(--sans);color:var(--ink);background:#fff}
.selbar .selgo{border:none;background:var(--forest);color:#fff;border-radius:100px;padding:.55rem 1.2rem;font-size:.92rem;font-weight:600;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap}
.selbar .selgo:hover{background:var(--fdeep)}
.selbar .selgo[disabled]{opacity:.55;cursor:default}
.selbar .selclear{margin-left:auto;border:none;background:none;color:var(--ink);font-size:.9rem;font-weight:600;font-family:inherit;cursor:pointer;padding:.4rem .6rem;border-radius:8px}
.selbar .selclear:hover{color:var(--forest)}
.selall{display:inline-flex;align-items:center;gap:.55rem;font-size:.92rem;font-weight:600;color:var(--ink);cursor:pointer;padding:.5rem .2rem;margin-bottom:.5rem}
.pck{width:19px;height:19px;border-radius:6px;border:2px solid var(--line);flex:none;display:flex;align-items:center;justify-content:center;transition:.16s;background:#fff}
.pck i{color:#fff;font-size:10px;display:none}
input[type=checkbox]:checked ~ .pck{border-color:var(--forest);background:var(--forest)}
input[type=checkbox]:checked ~ .pck i{display:block}
.prow label.pcell{display:flex;align-items:center;cursor:pointer;padding:.2rem}
.prow label.pcell input{position:absolute;opacity:0;pointer-events:none}
.selall input{position:absolute;opacity:0;pointer-events:none}
.prow.picked{background:#f3f8f5}
.delrow{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line);display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.delrow .deltxt{flex:1;min-width:12rem;font-size:.92rem;color:var(--ink);line-height:1.45}
.delb{border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:100px;padding:.55rem 1.1rem;font-size:.9rem;font-weight:600;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;transition:.18s;white-space:nowrap}
.delb:hover{border-color:#9d2b2b;color:#9d2b2b}
.addcard{background:#fff;color:var(--forest);border:2px dashed var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:190px}
.addcard:hover{border-color:var(--forest)}
.addcard .cic{background:#f3f8f5;color:var(--forest)}
.addcard .cname{color:var(--forest)}
.pbar{display:flex;gap:.7rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:1.4rem}
.pbar .field{margin:0}
.pbar .psearch{flex:1 1 260px;min-width:0}
.pbar .field label{display:block;padding-left:.35rem;margin-bottom:.35rem;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--forest);line-height:1.2}
.pbar input,.pbar select{padding:.7rem 1rem;font-size:1rem;border-radius:100px}
.pbar select{flex:0 0 auto;width:auto;padding-right:2.4rem}
.psearch{position:relative;display:flex;align-items:center}
.psearch .pclear{position:absolute;right:.2rem;bottom:.2rem;border:none;background:none;color:var(--ink);cursor:pointer;font-size:.95rem;padding:.5rem;line-height:1;border-radius:50%;width:44px;height:44px;display:none;align-items:center;justify-content:center}
.psearch .pclear:hover{color:var(--forest)}
.psearch .pclear.show{display:flex}
.padd{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:none;border-radius:100px;padding:.7rem 1.3rem;font-size:.95rem;font-weight:600;cursor:pointer;font-family:inherit;background:var(--forest);color:#fff;transition:.18s;white-space:nowrap}
.padd:hover{background:var(--fdeep)}
.roster{border:1.5px solid var(--line);border-radius:16px;overflow:hidden}
.prow{display:grid;grid-template-columns:auto minmax(0,1.7fr) minmax(0,1.6fr) auto;gap:1.2rem;align-items:center;padding:.75rem 1.2rem;border-bottom:1px solid var(--line);transition:background .18s}
.prow:last-child{border-bottom:none}
.prow:hover{background:#f9fcfa}
.pid{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.pid .pn{display:inline-flex;align-items:baseline;gap:.5rem;font-weight:600;font-size:1.02rem;color:var(--ink);line-height:1.3}
.pid .pn i{color:var(--fbright);flex:none;font-size:.85rem}
.pid .pe{font-size:.88rem;color:var(--ink);min-width:0}
.prl{display:flex;gap:.4rem;flex-wrap:wrap;min-width:0}
.rpill{display:inline-flex;align-items:center;gap:.35rem;background:#f3f8f5;color:var(--forest);border-radius:100px;padding:.15rem .6rem;font-size:.8rem;font-weight:600;line-height:1.5}
.rpill i{font-size:.7rem;opacity:.75}
.prl .none{font-size:.85rem;color:var(--ink)}
.pactions{display:flex;align-items:center;gap:.2rem}
.prow .pb{min-height:44px;font-size:.88rem;font-weight:600;color:var(--body);background:none;border:none;border-radius:100px;padding:.4rem .7rem;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;transition:.18s;text-decoration:none}
.prow .pb i{font-size:.8rem;color:var(--fbright)}
.prow .pb:hover{background:#f3f8f5;color:var(--forest)}
@media(max-width:720px){
  /* Search takes its own full row; the two dropdowns share the next row
     evenly so neither gets squeezed to an unreadable width. */
  .pbar .psearch{flex:1 1 100%}
  .pbar .field:not(.psearch){flex:1 1 0}
  .pbar .field:not(.psearch) select{width:100%}
  .filter-field.search-field{flex:1 1 100%}
  .filter-field{flex:1 1 calc(50% - .4rem)}
  /* Checkbox keeps its own narrow column and spans the stack; name, email,
     role pills and actions all share the second column so they line up on
     one left edge instead of the pills forcing the checkbox column wide. */
  .prow{grid-template-columns:min-content 1fr;grid-template-rows:auto auto auto;gap:.35rem 1rem;padding:1rem 1.2rem;align-items:start}
  .prow label.pcell{grid-column:1;grid-row:1 / 4;align-self:start;margin-top:.15rem}
  .pid{grid-column:2;grid-row:1;flex-direction:column;align-items:flex-start;gap:.15rem}
  .pid .pe{max-width:100%}
  .prl{grid-column:2;grid-row:2}
  .pactions{grid-column:2;grid-row:3;justify-self:start;margin-left:-.7rem}
}
.pempty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(2.6rem,7vw,4.4rem) 1.4rem;min-height:14rem;gap:.9rem}
.pempty i{font-size:2.1rem;color:var(--forest);line-height:1}
.pempty p{font-size:1.02rem;color:var(--ink);margin:0;text-wrap:balance}
.mask{position:fixed;inset:0;background:rgba(11,70,49,.62);display:none;align-items:center;justify-content:center;padding:1.4rem;z-index:9999}
.mask.show{display:flex}
.modal{background:#fff;border-radius:20px;width:min(100%,560px);box-shadow:0 30px 70px -30px rgba(11,70,49,.55);display:flex;flex-direction:column;overflow:visible}
.mbody{overflow:visible!important;padding:2rem;border-radius:0 0 20px 20px}
.msel.open{position:relative;z-index:30}
.mhead{background:var(--forest);color:#fff;padding:1.8rem 2rem;display:flex;align-items:center;gap:1rem;border-radius:20px 20px 0 0}
.mhead .mic{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex:none}
.mhead h3{font-family:var(--serif);font-weight:700;font-size:1.4rem;line-height:1.15}
.mhead .mx{margin-left:auto;border:none;background:rgba(255,255,255,.16);color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:1rem;flex:none;transition:.18s}
.mhead .mx:hover{background:rgba(255,255,255,.28)}
.mbody .fgrid{margin-bottom:1.3rem}
.mbody .qrow{margin-bottom:1.3rem}
.mbody .actions{margin-top:2rem}
.state-pill{display:inline-flex;align-items:center;gap:.4rem;border-radius:100px;padding:.28rem .72rem;font-size:.82rem;font-weight:600;line-height:1.4}
.state-pill.on{background:#f3f8f5;color:var(--forest)}
.state-pill.hold{background:#fff7df;color:var(--ink);box-shadow:0 0 0 1px #f2d996 inset}
.state-pill.revoked{background:#fdecec;color:#9d2b2b}
.account-state{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.account-state-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-bottom:1.1rem}
.account-state-title{font-size:1rem;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:.5rem}
.account-state-title i{color:var(--fbright)}
.account-actions{display:grid;gap:.8rem}
.account-actions[hidden],.revoked-state[hidden]{display:none!important}
.account-action{display:flex;align-items:center;gap:1rem;padding:.2rem 0}
.account-action-copy{flex:1;min-width:12rem}
.account-action-copy strong{display:block;font-size:.98rem;font-weight:600;color:var(--ink);line-height:1.35}
.account-action-copy span{display:block;margin-top:.18rem;font-size:.9rem;line-height:1.45;color:var(--ink)}
.access-button{min-height:44px;border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:100px;padding:.6rem 1.05rem;font-size:.88rem;font-weight:600;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;white-space:nowrap;transition:.18s}
.access-button:hover{border-color:var(--forest);color:var(--forest)}
.access-button.restore{background:var(--forest);border-color:var(--forest);color:#fff}
.access-button.restore:hover{background:var(--fdeep);border-color:var(--fdeep);color:#fff}
.access-button.revoke:hover{border-color:#9d2b2b;color:#9d2b2b}
.access-button[disabled],.confirm-actions button[disabled]{opacity:.58;cursor:wait}
.revoke-confirm{display:none;background:#fdecec;border:1px solid #f4caca;border-radius:14px;padding:1rem 1.1rem}
.revoke-confirm.show{display:block}
.revoke-confirm strong{display:block;color:#9d2b2b;font-size:1rem;line-height:1.35}
.revoke-confirm p{color:var(--ink);font-size:.92rem;line-height:1.5;margin-top:.35rem}
.confirm-actions{display:flex;align-items:center;justify-content:flex-end;gap:.6rem;flex-wrap:wrap;margin-top:.9rem}
.confirm-actions button{min-height:44px;border-radius:100px;padding:.55rem 1rem;font-family:inherit;font-size:.88rem;font-weight:600;cursor:pointer}
.confirm-cancel{border:1.5px solid var(--line);background:#fff;color:var(--ink)}
.confirm-revoke{border:1.5px solid #9d2b2b;background:#9d2b2b;color:#fff}
.record-note{font-size:.92rem;line-height:1.5;color:var(--ink);margin:0}
.account-toast{position:fixed;left:50%;bottom:1.3rem;transform:translate(-50%,16px);background:var(--forest);color:#fff;border-radius:100px;padding:.7rem 1.1rem;font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:.5rem;opacity:0;pointer-events:none;transition:.2s;z-index:10001;box-shadow:0 18px 40px -24px rgba(11,70,49,.75)}
.account-toast.show{opacity:1;transform:translate(-50%,0)}
.prow.arch{background:#fbfcfb}
.prow.arch .pn{opacity:.75}
@media(max-width:600px){
  .admin .mask{padding:.75rem;align-items:flex-start;overflow-y:auto}
  .admin .modal{margin:.75rem 0}
  .admin .mhead{padding:1.25rem}
  .admin .mbody{padding:1.25rem}
  .account-action{align-items:flex-start;flex-direction:column}
  .account-action-copy{min-width:0}
  .access-button{width:100%}
  .admin .modal .actions .btn{width:100%;justify-content:center}
  .confirm-actions{display:grid;grid-template-columns:1fr}
  .confirm-actions button{width:100%}
}
.iconrow{display:flex;align-items:center;gap:.7rem}
.iconrow input{flex:1;min-width:0}
.iconprev{flex:none;width:52px;height:52px;border-radius:14px;background:var(--forest);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.iconprev.bad{background:#f3f8f5;color:var(--ink)}
.whois{display:flex;align-items:center;gap:.9rem;background:#f3f8f5;border-radius:14px;padding:1rem 1.1rem;margin-bottom:1.5rem}
.whois .wic{width:42px;height:42px;border-radius:50%;background:var(--forest);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.whois .wn{font-weight:600;font-size:1.05rem;color:var(--ink);line-height:1.3}
.whois .we{font-size:.9rem;color:var(--ink);line-height:1.4}
.mbody .qlabel,.mbody .field label{font-size:1rem;font-weight:600;color:var(--ink);margin-bottom:.55rem;line-height:1.4}
.mbody .qlabel > i:first-child,.mbody .field label > i:first-child{color:var(--fbright);margin-right:.5rem;width:1.05em;text-align:center;font-size:1em}
.msel{position:relative}
.msel-t{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:.95rem 1.1rem;font-size:1.05rem;font-family:var(--sans);color:var(--ink);background:#fff;cursor:pointer;display:flex;align-items:center;gap:.6rem;text-align:left;transition:border-color .18s,box-shadow .18s}
.msel-t:hover{border-color:var(--fbright)}
.msel-t:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 4px rgba(15,94,65,.12)}
.msel-t .msel-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msel-t .msel-v.none{color:var(--ink);opacity:.7}
.msel-t .msel-cv{flex:none;background:#f3f8f5;color:var(--forest);border-radius:100px;font-size:.82rem;font-weight:700;padding:.1rem .6rem}
.msel-t .msel-ch{flex:none;color:var(--fbright);font-size:.85rem;transition:transform .2s}
.msel.open .msel-t{border-color:var(--forest);box-shadow:0 0 0 4px rgba(15,94,65,.12)}
.msel.open .msel-t .msel-ch{transform:rotate(180deg)}
.msel-p{position:absolute;top:calc(100% + .45rem);left:0;right:0;background:#fff;border:1.5px solid var(--line);border-radius:14px;box-shadow:0 22px 50px -22px rgba(11,70,49,.45);padding:.4rem;max-height:17rem;overflow-y:auto;z-index:20;display:none}
.msel.open .msel-p{display:block}
.msel-o{display:flex;align-items:center;gap:.7rem;padding:.62rem .8rem;border-radius:10px;cursor:pointer;font-size:1rem;color:var(--ink);transition:background .14s;line-height:1.35}
.msel-o:hover{background:#f3f8f5}
.msel-o input{position:absolute;opacity:0;pointer-events:none}
.msel-o .cb{width:19px;height:19px;border-radius:6px;border:2px solid var(--line);flex:none;display:flex;align-items:center;justify-content:center;transition:.16s}
.msel-o .cb i{color:#fff;font-size:10px;display:none}
.msel-o input:checked ~ .cb{border-color:var(--forest);background:var(--forest)}
.msel-o input:checked ~ .cb i{display:block}
.msel-o input:checked ~ .msel-l{color:var(--forest);font-weight:600}
.msel-o .msel-i{flex:none;width:1.2em;text-align:center;color:var(--fbright);font-size:.9rem}
.msel-bar{display:flex;gap:.5rem;padding:.45rem .8rem .3rem;border-top:1px solid var(--line);margin-top:.3rem}
.msel-bar button{border:none;background:none;color:var(--forest);font-size:.86rem;font-weight:600;font-family:inherit;cursor:pointer;padding:.35rem .5rem;border-radius:8px}
.msel-bar button:hover{background:#f3f8f5}

/* ---------- SETTINGS: key status, route rows, test cards ---------- */
.ssub{font-size:1.02rem;color:var(--body);margin-bottom:1.4rem}
.field input{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:.95rem 1.1rem;font-size:1.05rem;font-family:var(--sans);color:var(--ink);background:#fff;transition:border-color .18s,box-shadow .18s}
.secret-status{border:1.5px solid var(--line);border-radius:14px;padding:1rem 1.1rem;background:#fff;display:flex;gap:.85rem;align-items:flex-start;margin-bottom:1.3rem}
.secret-status i{color:var(--forest);font-size:1.2rem;margin-top:.15rem}
.secret-status .stitle{font-weight:700;color:var(--ink);font-size:1.02rem}
.secret-status .sbody{font-size:.94rem;color:var(--body);margin-top:.15rem}
.secret-status.missing{background:#fdecec;border-color:#f4caca}
.secret-status.missing i,.secret-status.missing .stitle{color:#9d2b2b}
.routerow{display:grid;grid-template-columns:1fr 1.4fr;gap:1rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--line)}
.routerow:last-child{border-bottom:none}
.routerow .rname{font-weight:700;color:var(--ink);font-size:1.05rem}
.routerow input{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:.8rem 1rem;font-size:1.02rem;font-family:var(--sans);color:var(--ink)}
.routerow input:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 4px rgba(15,94,65,.12)}
.btn-ghost{background:#fff;color:var(--forest);border:1.5px solid var(--line)}
.btn-ghost:hover{background:#fff;border-color:var(--forest)}
.testcard{border:1.5px solid var(--line);border-radius:16px;padding:1.5rem 1.6rem;margin-bottom:1.2rem}
.testcard:last-child{margin-bottom:0}
.testhead{font-size:1.1rem;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:.6rem}
.testhead i{color:var(--forest)}
.testsub{font-size:.98rem;color:var(--body);margin:.4rem 0 1.1rem}
.testrow{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.testrow input{flex:1;min-width:200px;border:1.5px solid var(--line);border-radius:12px;padding:.85rem 1rem;font-size:1.02rem;font-family:var(--sans);color:var(--ink)}
.testrow input:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 4px rgba(15,94,65,.12)}
.testcard .ok,.testcard .err{margin-top:1rem;margin-bottom:0}
.keyset{font-size:.92rem;color:var(--fbright);font-weight:600;margin-top:.45rem;display:inline-flex;align-items:center;gap:.4rem}
@media(max-width:560px){.routerow{grid-template-columns:1fr;gap:.4rem}}

/* ---------- FORMS INDEX: form link list ---------- */
.forms-section{width:100%;max-width:950px;margin:0 auto;padding:clamp(2rem,4vw,3rem) clamp(1.2rem,3vw,2rem);box-sizing:border-box;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:.8rem;align-items:stretch}
.forms-section .notice{grid-column:1/-1}
/* Two groups: season close-out forms up top, everything else below. The
   wrapper owns the outer padding so each group's grid sits flush. */
.forms-groups{width:100%;max-width:950px;margin:0 auto;padding:clamp(2rem,4vw,3rem) clamp(1.2rem,3vw,2rem);box-sizing:border-box}
.forms-toolbar{margin-bottom:clamp(2.2rem,4vw,3rem);padding-bottom:clamp(1.7rem,3vw,2.2rem)}
.forms-toolbar[hidden]{display:none}
.forms-result-count{margin-top:.75rem;color:var(--body);font-size:.88rem;font-weight:600}
.forms-empty{margin-top:1rem}
.forms-empty[hidden],.form-link[hidden],.repeatable-form[hidden]{display:none}
.form-group+.form-group{margin-top:clamp(2rem,4vw,2.8rem)}
.form-group[hidden]{display:none}
.form-group-head{text-align:center;margin-bottom:1.4rem}
.form-group-head h2{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,4.5vw,2.8rem);line-height:1.15;color:var(--ink)}
.form-group-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:.8rem;align-items:stretch}
.form-group-grid .notice{grid-column:1/-1}
.form-link{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(1rem,2.5vw,1.4rem);
  padding:clamp(1.2rem,2.5vw,1.6rem) clamp(1rem,2vw,1.4rem);
  text-decoration:none;
  color:var(--ink);
  background:#fff;
  border-radius:14px;
  cursor:pointer;
  transition:background .2s,box-shadow .2s,transform .2s,color .2s;
}

.form-link:hover{
  background:var(--forest);
  color:#fff;
  box-shadow:0 12px 28px -12px rgba(15,94,65,.35);
  transform:translateY(-2px);
}
.form-link .fl-icon{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;
  background:var(--forest);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;
  transition:background .2s,color .2s;
}
.form-link:hover .fl-icon{background:rgba(255,255,255,.18);color:#fff}
.form-link .fl-title{
  font-family:var(--sans);font-weight:600;font-size:1.05rem;line-height:1.25;margin-bottom:.15rem;
}
.form-link .fl-desc{
  font-size:.9rem;color:var(--ink);line-height:1.4;transition:color .2s;
}
.form-link:hover .fl-desc{color:rgba(255,255,255,.75)}
.form-link .fl-arrow{
  color:var(--forest);font-size:1rem;transition:color .2s,transform .2s;
}
.form-link:hover .fl-arrow{color:#fff;transform:translateX(3px)}
/* Done for the season: quiet, not hidden. Same neutral fill as the admin
   list tiles (#F6F6F4), a small solid check badge in place of the arrow. */
.form-link.done{background:#F6F6F4;color:var(--body)}
.form-link.done .fl-icon{background:#e8e8e5;color:var(--body)}
.form-link.done .fl-title{color:var(--body)}
.form-link.done .fl-desc{color:var(--body)}
.form-link.done .fl-arrow{display:none}
.form-link.done .fl-done{display:inline-flex}
.form-link:hover.done{background:var(--forest);color:#fff}
.form-link:hover.done .fl-icon{background:rgba(255,255,255,.18);color:#fff}
.form-link:hover.done .fl-title,.form-link:hover.done .fl-desc{color:#fff}
.form-link:hover.done .fl-desc{color:rgba(255,255,255,.75)}
.fl-done{display:none;align-items:center;gap:.4rem;color:var(--forest);font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;flex:none}
.form-link:hover .fl-done{color:#fff}
.hutil-logo{max-height:clamp(28px,4vw,38px);max-width:28vw;width:auto;height:auto}
@media(max-width:700px){.forms-groups{padding-top:1.5rem}.forms-toolbar{margin-bottom:1.8rem;padding-bottom:1.5rem}.forms-toolbar .filter-field,.forms-toolbar .filter-field.search-field{flex:1 1 100%}}

/* Repeatable required form: the card stays available after completion while
   its current-season count and explicit completion state stay visible. */
.repeatable-form{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(1rem,2.5vw,1.4rem);align-items:center;padding:clamp(1.2rem,2.5vw,1.6rem) clamp(1rem,2vw,1.4rem);background:#fff;border-radius:14px;color:var(--ink);transition:background .2s,box-shadow .2s,transform .2s,color .2s}
.repeatable-form:hover{background:var(--forest);color:#fff;box-shadow:0 12px 28px -12px rgba(15,94,65,.35);transform:translateY(-2px)}
.repeatable-card-link{position:absolute;inset:0;z-index:1;border-radius:14px}
.repeatable-card-link:focus-visible{outline:3px solid rgba(15,94,65,.28);outline-offset:3px}
.repeatable-form .fl-icon{width:48px;height:48px;border-radius:50%;flex-shrink:0;background:var(--forest);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.15rem;transition:background .2s,color .2s}
.repeatable-form:hover .fl-icon{background:rgba(255,255,255,.18)}
.repeatable-copy{min-width:0}
.repeatable-title{color:var(--ink);font-size:1.05rem;font-weight:600;line-height:1.25}
.repeatable-form:hover .repeatable-title{color:#fff}
.repeatable-desc{font-size:.9rem;color:var(--ink);line-height:1.4;margin-top:.15rem;transition:color .2s}
.repeatable-form:hover .repeatable-desc{color:rgba(255,255,255,.75)}
.repeatable-status{display:flex;align-items:center;gap:.45rem;margin-top:.55rem;color:var(--forest);font-size:.82rem;font-weight:700;line-height:1.35}
.repeatable-status i{flex:none}
.repeatable-form:hover .repeatable-status{color:#fff}
.repeatable-form[data-state="missing"] .repeatable-status,.repeatable-form[data-state="unavailable"] .repeatable-status{color:#9D2B2B}
.repeatable-form[data-state="missing"]:hover .repeatable-status,.repeatable-form[data-state="unavailable"]:hover .repeatable-status{color:#fff}
.repeatable-action{grid-column:1/-1;justify-self:stretch;position:relative;z-index:2;min-height:44px;border:1.5px solid var(--forest);border-radius:100px;background:#fff;color:var(--forest);padding:.64rem 1rem;font-family:inherit;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.repeatable-action:hover{background:var(--mint);border-color:#fff}
.repeatable-action:focus-visible{outline:3px solid rgba(255,255,255,.65);outline-offset:3px}
.repeatable-arrow{grid-column:3;grid-row:1;color:var(--forest);font-size:1rem;transition:color .2s,transform .2s}
.repeatable-form:hover .repeatable-arrow{color:#fff;transform:translateX(3px)}
.repeatable-form[data-state="in_progress"] .repeatable-arrow{display:none}
.repeatable-dialog[hidden]{display:none}
.repeatable-dialog{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1rem;background:rgba(19,36,29,.58)}
.repeatable-dialog-card{width:min(100%,520px);background:#fff;border-radius:18px;padding:clamp(1.5rem,4vw,2rem);box-shadow:0 26px 70px -30px rgba(0,0,0,.7)}
.repeatable-dialog-card h2{font-family:var(--serif);font-size:1.65rem;line-height:1.15;color:var(--forest)}
.repeatable-dialog-card p{margin-top:.75rem;color:var(--ink);font-size:1rem;line-height:1.6}
.repeatable-dialog-error{margin-top:1rem;border-radius:12px;background:#fdecec;color:#9D2B2B;padding:.8rem 1rem;font-size:.92rem;line-height:1.45}
.repeatable-dialog-actions{display:flex;justify-content:flex-end;gap:.65rem;flex-wrap:wrap;margin-top:1.5rem}
.repeatable-dialog-actions button{min-height:44px;border-radius:100px;padding:.7rem 1.1rem;font-family:inherit;font-weight:700;cursor:pointer}
.repeatable-dialog-actions button[disabled]{opacity:.6;cursor:wait}
.repeatable-dialog-cancel{background:#fff;color:var(--forest);border:1.5px solid var(--forest)}
.repeatable-dialog-confirm{background:var(--forest);color:#fff;border:1.5px solid var(--forest)}
@media(max-width:700px){.repeatable-form{grid-template-columns:auto minmax(0,1fr);align-items:start}.repeatable-action{grid-column:1/-1;justify-self:stretch;text-align:center}.repeatable-arrow{display:none}}
@media print{.foot{-webkit-print-color-adjust:exact;print-color-adjust:exact}.hutil{display:none}}

/* ---------- LOGIN: split shell, tabs ---------- */
.side{background:var(--forest);color:#fff;padding:clamp(2.5rem,5vw,3.6rem);display:flex;flex-direction:column;justify-content:space-between}
.side img{height:46px;align-self:flex-start}
.side .big{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.1}
.side .kick{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mint);margin-bottom:1rem}
.side .sideicon{display:block;font-size:2.6rem;color:var(--mint);margin-bottom:1.4rem}
.side .sub{color:rgba(255,255,255,.88);font-size:1.08rem;margin-top:1rem;max-width:40ch;line-height:1.6}
.side .feat{list-style:none;margin-top:2rem;display:flex;flex-direction:column;gap:.9rem}
.side .feat li{display:flex;gap:.8rem;align-items:center;color:#fff;font-size:1.02rem}
.side .feat .dot{width:30px;height:30px;border-radius:50%;background:var(--fdeep);border:1px solid var(--mint);display:flex;align-items:center;justify-content:center;flex:none;color:var(--mint)}
.main{display:flex;align-items:center;justify-content:center;padding:2.5rem}
.card{width:100%;max-width:420px}
.card h2{font-family:var(--serif);font-size:1.9rem;color:var(--ink)}
.card .lead{color:var(--body);margin:.4rem 0 1.8rem;font-size:1.05rem}
.tabs{display:flex;gap:.4rem;background:#f3f8f5;border-radius:100px;padding:.3rem;margin-bottom:1.6rem}
.tabs button{flex:1;border:none;background:none;padding:.7rem;border-radius:100px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--body);cursor:pointer;font-family:inherit}
.tabs button.on{background:var(--forest);color:#fff}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.muted{color:var(--body);font-size:.92rem;text-align:center;margin-top:1.1rem}
.text-link{border:0;background:none;color:var(--forest);cursor:pointer;font-family:inherit;font-size:.9rem;font-weight:600;padding:.25rem 0;text-decoration:none}
.text-link:focus-visible{border-radius:4px;outline:3px solid rgba(15,94,65,.25);outline-offset:3px}
.muted .text-link{font-size:inherit}
@media(max-width:760px){body{display:flex;flex-direction:column}.main{order:1;min-height:100svh;padding-top:5.2rem}.side{order:2;padding:2.2rem}.side .feat{margin-top:1.6rem}}

/* ---------- RESET: password form ---------- */
.auth-home{position:fixed;top:1.2rem;left:1.2rem;z-index:5;min-height:44px;border:1.5px solid rgba(255,255,255,.78);background:#fff;color:var(--forest);border-radius:100px;padding:.78rem 1.15rem;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;gap:.55rem;line-height:1.2;box-shadow:0 16px 36px -24px rgba(0,0,0,.45);transition:background .18s,border-color .18s,transform .18s}
.auth-home:hover{background:var(--mint);border-color:#fff;color:var(--forest);transform:translateY(-1px)}
.muted a{color:var(--forest);font-weight:600;text-decoration:none}
@media(max-width:760px){body{display:flex;flex-direction:column}.auth-home{top:.9rem;left:.9rem;min-height:42px;padding:.72rem 1rem}.main{order:1;min-height:100svh;padding-top:5.2rem}.side{order:2;padding:2.2rem}}

/* ---------- POSTSEASON WIZARD PAGES ----------
   Was copied inline into five review pages with three different spacing
   values. One declaration, opted into with .sheet.wizard. */
.sheet.wizard .reveal{background:none;border:none;border-radius:0;padding:0;margin-top:clamp(2.2rem,5vw,2.6rem)}
.sheet.wizard .section > .fgrid,
.sheet.wizard .section > .qrow,
.sheet.wizard .section > div[id]{margin-top:clamp(2.8rem,6vw,4.2rem)}
.sheet.wizard .section > .fgrid:first-of-type{margin-top:0}
.sheet.wizard .section .shead + .fgrid,
.sheet.wizard .section .shead + .qrow,
.sheet.wizard .section .shead + div[id]{margin-top:0}

.sheet > .section{margin-bottom:clamp(4.4rem,9vw,5.8rem)}
.sheet > .section:last-of-type{margin-bottom:0}

/* settings: hint under a field */
.help{font-size:.92rem;color:var(--body);margin-top:.45rem}

/* ---------- AUTH PAGES: login + reset ----------
   These style .field differently to the form pages (small uppercase labels,
   tighter rhythm), so they are scoped to body.auth rather than global. */
.auth .field{margin-bottom:1.05rem}
.auth .field label{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--forest);margin-bottom:.45rem}
.auth .field label i{margin-right:.4rem}
.auth .field input{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:.85rem 1rem;font-size:1.05rem;font-family:var(--sans);color:var(--ink);background:#fff;transition:border-color .15s}
.auth .field input:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 4px rgba(15,94,65,.12)}

/* ---------- SETTINGS: field rhythm + inline hint ---------- */
.settings .field{margin-bottom:1.3rem}
.settings .field label{display:block;font-size:1rem;font-weight:600;color:var(--ink);margin-bottom:.55rem}
.settings .field label i{color:var(--fbright);margin-right:.45rem}
.settings .field label .opt{color:var(--fbright);font-weight:600;font-size:.9rem}
.settings .field input{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:.95rem 1.1rem;font-size:1.05rem;font-family:var(--sans);color:var(--ink);background:#fff;transition:border-color .18s,box-shadow .18s}
.settings .field input:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 4px rgba(15,94,65,.12)}
.settings .field input::placeholder{color:var(--muted)}
.settings .field .help{font-size:.92rem;color:var(--body);margin-top:.45rem}
.settings-nav{position:sticky;top:.6rem;z-index:12;display:flex;gap:.45rem;overflow-x:auto;margin:0 0 2rem;padding:.45rem;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 30px -24px rgba(19,36,29,.55);scrollbar-width:thin}
.settings-nav a{flex:none;min-height:44px;display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .9rem;border-radius:10px;color:var(--ink);font-size:.88rem;font-weight:600;text-decoration:none}
.settings-nav a:hover{background:#f3f8f5;color:var(--forest)}
.settings-nav i{color:var(--fbright)}
.settings .section[id]{scroll-margin-top:5.5rem}
@media(max-width:520px){
  .settings-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
  .settings-nav a{min-width:0;justify-content:center;padding:.55rem .6rem}
}
.password-wrap{position:relative}
.settings .password-wrap input{padding-right:6rem}
.password-toggle{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);min-width:5rem;min-height:44px;border:none;border-radius:10px;background:#f3f8f5;color:var(--forest);font-family:inherit;font-size:.85rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.4rem}
.password-toggle:hover{background:var(--mint)}

/* ---------- ROLES: selects share the input treatment ---------- */
.field input,.field select{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:.95rem 1.1rem;font-size:1.05rem;font-family:var(--sans);color:var(--ink);background:#fff;transition:border-color .18s,box-shadow .18s}
.field input:focus,.field select:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 4px rgba(15,94,65,.12)}
.field input::placeholder{color:var(--muted)}
.dial-nm b{display:block;font-family:var(--serif);font-size:1.3rem;color:var(--forest);font-weight:700;line-height:1.2}

/* ---------- shared ---------- */
.account-menu a[hidden]{display:none!important}

/* ---------- AUTH SHELL: the split-screen on login + reset ----------
   This was body{display:grid} inline on login.html. Scoped to body.auth so
   the grid only applies to those two pages, never to a form page. */
body.auth{min-height:100vh;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr))}
body.auth .side{background:var(--forest);color:#fff;padding:clamp(2.5rem,5vw,3.6rem);display:flex;flex-direction:column;justify-content:space-between}
body.auth .main{display:flex;align-items:center;justify-content:center;padding:clamp(1.6rem,4vw,2.5rem)}
body.auth .side img{height:46px;align-self:flex-start}
body.auth .side .big{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.1}
body.auth .side .kick{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mint);margin-bottom:1rem}
body.auth .side .sideicon{display:block;font-size:2.6rem;color:var(--mint);margin-bottom:1.4rem}
body.auth .side .sub{color:rgba(255,255,255,.88);font-size:1.08rem;margin-top:1rem;line-height:1.6}
body.auth .side .feat{list-style:none;margin-top:2rem;display:flex;flex-direction:column;gap:.9rem}
body.auth .side .feat li{display:flex;gap:.8rem;align-items:center;color:#fff;font-size:1.02rem}
body.auth .side .feat .dot{width:30px;height:30px;border-radius:50%;background:var(--fdeep);border:1px solid var(--mint);display:flex;align-items:center;justify-content:center;flex:none;color:var(--mint)}
body.auth .card{width:100%}
body.auth .card h2{font-family:var(--serif);font-size:1.9rem;color:var(--ink);font-weight:700}
body.auth .card .lead{color:var(--body);margin:.4rem 0 1.8rem;font-size:1.05rem}

/* Auth pages use a full-width filled button, not the pill the form pages use. */
body.auth .btn{width:100%;justify-content:center;background:var(--forest);color:#fff;border-radius:12px;padding:1rem;font-size:12px;margin-top:.4rem}
body.auth .btn:hover{background:var(--fdeep)}
body.auth .btn[disabled]{opacity:.6;cursor:default}

/* ============================================================
   RESTORED: properties the consolidation dropped as false
   duplicates. Each is scoped to the page that declared it.
   ============================================================ */

/* Admin pages declare .btn as a FILLED button (the form pages use .btn-go for
   fill and leave bare .btn unstyled). Scoped so form pages are unaffected. */
.admin .btn{background:var(--forest);color:#fff;text-decoration:none}
.admin .btn:hover{background:var(--fdeep)}
.admin .btn[disabled]{opacity:.55;cursor:default}

/* admin chrome: menu sits above the sticky hero, links keep their casing */
/* stays HERE, after .hutil a: the account menu lives inside .hutil, and this
   late position is what un-uppercases the menu items. Do not merge upward. */
.account-menu a,.account-menu button{text-transform:none}



/* settings + reset */