/* Bancroft PTO volunteer recruitment pages (Oct 10, 2026): /volunteer/bench/, roles/, help/, asks/ and thanks/.
   Source: volunteers/static-site/recruit.css (README-recruitment.md). PTO navy and gold, phone first.
   Every color is a variable. The shared ones (--bg, --card, --row, --line, --text, --muted, --link, --edge,
   --gold-soft, --on-gold) take their dark values from /shared/av-prefs.css; this page's own get theirs below, under
   html[data-theme="dark"]. Two languages: <span class="en">..</span><span class="es" lang="es">..</span>, English
   bold first and Spanish gray beneath; /shared/av-prefs.js and av-prefs.css hide one language or put Spanish on top.
   With scripts off: both languages, English first, light. Field edges (Oct 10, pass 3): --field-line, #948f80 in light
   (3.2:1 on white), and in dark the shared value from av-prefs.css (#7383a6, 4.2:1 on a card). */
:root{
  --navy:#172747; --gold:#d8b44a; --gold-soft:#f5ecd2;
  --bg:#f6f3ec; --card:#ffffff; --row:#faf8f3; --line:#e4dccb; --text:#172747; --muted:#4f5b70; --link:#172747;
  --edge:#172747; --on-gold:#172747;
  --track:#e4e8f0; --bar:#172747; --pill:#e9eefc; --pill-text:#172747; --ok:#1e7a46; --bad:#a3261b;
  --field:#ffffff; --field-line:#948f80; --btn:#172747; --btn-text:#ffffff; --ghost2:#4e596e;
  --demo-bg:#fff3cd; --demo-line:#f0d58a; --demo-text:#6b5310; --chip:#f1ede2;
}
html[data-theme="dark"]{
  --track:#2a3754; --bar:#d8b44a; --pill:#24345a; --pill-text:#edf1f7; --ok:#7fdca6; --bad:#ff9a8f;
  --field:#0f1726; --btn:#d8b44a; --btn-text:#172747; --ghost2:var(--muted);
  --demo-bg:#2d2918; --demo-line:#5c5022; --demo-text:#f1d98c; --chip:#22314f;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--link)}
[hidden]{display:none !important}

/* Two languages */
.en{display:block;font-weight:700}
.es{display:block;color:var(--muted);font-size:max(.88rem,.94em);font-weight:400;margin-top:1px}
.prose .en{font-weight:400}
html[data-lead="es"] .prose .es{font-weight:400}

/* Header: navy in both themes; the light/dark and language controls sit in it (/shared/av-prefs.js) */
.top{position:relative;background:var(--navy);color:#fff;text-align:center;padding:22px 16px 18px;border-bottom:5px solid var(--gold)}
.top img{width:72px;height:72px;display:block;margin:0 auto 10px;border-radius:50%}
.top a.brand{display:block;width:max-content;margin:0 auto;border-radius:50%}
.top a.brand:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.top .org{margin:0 0 6px;font-size:.95rem}
.top .org .en{font-weight:600;color:#fff}
.top .org .es{font-size:.88rem;font-weight:400;color:#d3d9e4;margin-top:1px}
.top h1{margin:0;font-size:1.4rem;line-height:1.2}
.top h1 .es{color:#d3d9e4;font-size:1rem;margin-top:3px}
.top .sub,.top .when{margin:8px auto 0;max-width:620px;font-size:.92rem}
.top .sub .en,.top .when .en{font-weight:400;color:#fff}
.top .sub .es,.top .when .es{color:#c9d0de}
html[data-lead="es"] .top .es{color:#fff}
html[data-lead="es"] .top .en{color:#c9d0de}
html[data-lead="es"] .top h1 .es{font-size:1em;margin-top:0}
html[data-lead="es"] .top .org .es{font-size:.95rem;font-weight:600;color:#fff}
html[data-lead="es"] .top .org .en{font-size:.88rem;font-weight:400;color:#d3d9e4}
html[data-lead="es"] .top h1 .en{font-size:1rem;margin-top:3px}
html[data-lead="es"] .top .sub .es,html[data-lead="es"] .top .when .es{font-weight:400}

main{max-width:680px;margin:0 auto;padding:16px 16px 40px}
main.wide{max-width:1100px}
h2{margin:24px 0 8px;font-size:1.12rem;line-height:1.25}
h2 .es{font-size:.88rem}
html[data-lead="es"] h2 .es{font-size:1em}
html[data-lead="es"] h2 .en{font-size:.88rem}
p{margin:0 0 10px}
.demo{background:var(--demo-bg);border:1px solid var(--demo-line);color:var(--demo-text);font-size:.88rem;padding:8px 12px;border-radius:10px;margin:0 0 14px}
.demo .en,.demo .es{color:var(--demo-text)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:0 0 14px}
.card.edge{border-left:6px solid var(--gold)}
.lead{font-size:.95rem}
.lead .en{font-weight:400}
.small{font-size:.88rem}
.muted{color:var(--muted)}
.note{background:var(--gold-soft);border-left:4px solid var(--gold);border-radius:6px;padding:10px 12px;font-size:.92rem;margin:12px 0}
.note .en{font-weight:600}
.ok .en,.ok .es{color:var(--ok)}
.ok .en{font-weight:700}
.err{margin:10px 0 0}
.err .en,.err .es{color:var(--bad)}
.err .en{font-weight:700}

/* Buttons and fields */
.btn{-webkit-appearance:none;appearance:none;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:46px;padding:9px 18px;border:0;border-radius:11px;background:var(--btn);color:var(--btn-text);font:inherit;
  font-weight:700;cursor:pointer;text-decoration:none;text-align:center}
.btn .en,.btn .es{color:inherit}
html[data-lead="es"] .btn .en,html[data-lead="es"] .btn .es{color:inherit}   /* the button's own color when Spanish leads (pass 3 fix) */
.btn .es{opacity:.82}
html[data-lead="es"] .btn .es{opacity:1}
html[data-lead="es"] .btn .en{opacity:.82}
.btn.ghost{background:transparent;color:var(--text);border:1.5px solid var(--line)}
.btn.ghost .es{color:var(--ghost2)}   /* light: #4e596e, 4.52:1 on white at the .82 opacity (was --muted, 4.42; Oct 10) */
html[data-lead="es"] .btn.ghost .en{color:var(--ghost2)}
.btn:disabled{opacity:.55;cursor:default}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;align-items:center}
label.f,.flabel{display:block;margin:16px 0 5px;font-size:.95rem}
input[type=text],input[type=email],input[type=tel],input[type=search],select,textarea{width:100%;font:inherit;font-size:1rem;
  padding:10px 12px;border:1.5px solid var(--field-line);border-radius:10px;background:var(--field);color:var(--text)}
textarea{min-height:84px;resize:vertical}
.hint{font-size:.88rem;margin:5px 0 0}
.hint .en{font-weight:400;color:var(--muted)}
.checks{display:grid;grid-template-columns:1fr;gap:6px}
@media (min-width:520px){.checks.two{grid-template-columns:1fr 1fr}}
.check{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1.5px solid var(--line);border-radius:10px;background:var(--row);cursor:pointer;min-height:44px}
.check input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--navy)}
html[data-theme="dark"] .check input{accent-color:var(--gold)}
.check .t .en,.check .nm{font-weight:600}
.hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}

/* Loading */
.loading{display:flex;align-items:center;gap:14px}
.spin{flex:none;display:inline-block;width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.5s}}

/* Pills and chips */
.pill{display:inline-flex;flex-direction:column;font-size:.88rem;font-weight:700;padding:3px 10px;border-radius:12px;background:var(--pill);color:var(--pill-text);line-height:1.25}
.pill .en,.pill .es{color:inherit}
.pill .es{opacity:.85}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.chip{display:inline-block;font-size:.88rem;padding:3px 9px;border-radius:10px;background:var(--chip);color:var(--text);border:1px solid var(--line)}
.chip.k{font-weight:700}

/* Roles page */
.role h3{margin:0;font-size:1.08rem;line-height:1.25}
.role h3 .es{font-size:.9rem}
html[data-lead="es"] .role h3 .es{font-size:1em}
html[data-lead="es"] .role h3 .en{font-size:.9rem}
.role .desc{margin:8px 0 0;font-size:.95rem}
.role .meta{margin:10px 0 0;font-size:.9rem;display:grid;gap:6px}
.role .meta .k{font-size:.88rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:1px}
.role form{margin-top:12px;border-top:1px solid var(--line);padding-top:4px}
.radios{display:flex;flex-wrap:wrap;gap:8px}
.radios .check{flex:1 1 140px}

/* Bench page */
.filters{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 12px}
.filters > div{min-width:0}
.filters > div:first-child{grid-column:1 / -1}
.filters select{font-size:.9375rem;padding:9px 8px}
@media (min-width:640px){.filters{grid-template-columns:2fr 1fr 1fr}.filters > div:first-child{grid-column:auto}}
@media (min-width:980px){.filters{grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr}}
.filters label{display:block;font-size:.88rem;margin:0 0 4px}
.filters label .en{font-weight:700}
.counts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0 0 14px}
@media (min-width:640px){.counts{grid-template-columns:repeat(4,1fr)}}
.counts .tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.counts .big{font-size:1.6rem;font-weight:700;line-height:1.1;margin-top:4px}
.counts .lab{font-size:.88rem}
.fams{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:860px){.fams{grid-template-columns:1fr 1fr}}
.fam{background:var(--card);border:1px solid var(--line);border-left:6px solid var(--gold);border-radius:14px;padding:12px 14px;min-width:0;overflow-wrap:anywhere}
.fam.no{border-left-color:var(--line)}
.fam .nm{font-weight:700;font-size:1.05rem}
.fam .ct{font-size:.9rem;margin:2px 0 0}
.fam .ct a{color:var(--link)}
.fam .stat{font-size:.88rem;margin:8px 0 0;color:var(--muted)}
.fam .sk{font-size:.9rem;margin:8px 0 0}
.fam .bid{float:right;font-size:.88rem;color:var(--muted);font-weight:700;margin-left:8px}

/* Thanks page (Donations Tracker style) */
.say{background:var(--card);border:1px solid var(--line);border-top:5px solid var(--gold);border-radius:14px;padding:14px 16px;font-size:1.05rem}
.say p{margin:0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (min-width:640px){.grid{grid-template-columns:repeat(4,1fr)}}
.tile{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;min-width:0}
.tile .lab{font-size:.88rem}
.tile .big{font-size:2rem;font-weight:700;line-height:1.1;margin:6px 0 2px;font-variant-numeric:tabular-nums}
ol.bars,ol.toplist{list-style:none;margin:0;padding:0}
.bars .row{display:grid;grid-template-columns:minmax(96px,36%) 1fr 44px;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.bars .row:first-child{border-top:0}
.bars .g{font-size:.95rem;line-height:1.2}
.bars .g .es{font-size:.88rem}
.bars .g .nm{display:block;font-weight:700}
.track{height:14px;border-radius:4px;background:var(--track)}
.fill{height:14px;background:var(--bar);border-radius:4px;min-width:2px}
.bars .v{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
ol.toplist li{display:grid;grid-template-columns:30px 1fr;gap:4px 10px;align-items:start;padding:10px 0;border-top:1px solid var(--line)}
ol.toplist li:first-child{border-top:0}
ol.toplist .rk{grid-row:span 2;width:28px;height:28px;border-radius:50%;background:var(--gold-soft);color:var(--text);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.9rem}
ol.toplist .who .en{font-size:1rem}
ol.toplist .who .nm{display:block;font-weight:700;font-size:1rem}
ol.toplist .n{font-size:.88rem}
ol.toplist .n .en{font-weight:400}
.how{margin:22px 0 0;font-size:.88rem}
nav.more{display:grid;gap:8px;margin:18px 0 0}
nav.more a{display:block;padding:10px 14px;border:1.5px solid var(--line);border-left:6px solid var(--gold);border-radius:11px;background:var(--card);color:var(--text);text-decoration:none;min-height:44px}
nav.more a:hover{border-color:var(--edge)}