/* Ward service request. Warm, plain, quick to answer on a phone — most people
   will tap this from an email while doing something else. */
:root {
  --bg:#f4f6f9; --panel:#ffffff; --ink:#1b2430; --ink-soft:#5d6a7a; --line:#dfe5ec;
  --accent:#002E5D; --accent-ink:#ffffff; --accent-soft:#e8eef6;
  --yes:#2b6b45; --yes-soft:#e8f3ec; --late:#8a6420; --late-soft:#faf1de;
  --no:#7b3a36; --no-soft:#f8ecea;
  --shadow:0 1px 2px rgba(20,30,45,.05),0 8px 24px rgba(20,30,45,.07);
}

  :root[data-theme="dark"] { --bg:#11161d; --panel:#19202a; --ink:#e9eef5; --ink-soft:#9dabbd;
    --line:#2a3440; --accent:#7ba7dd; --accent-ink:#0d1219; --accent-soft:#1e2833;
    --yes:#79c69a; --yes-soft:#17291f; --late:#d8b872; --late-soft:#2a2418;
    --no:#e0a19c; --no-soft:#2c1c1a;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35); }

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-text-size-adjust:100%}
.wrap{max-width:640px;margin:0 auto;padding:0 18px 64px}
header.hero{background:var(--accent);color:var(--accent-ink);padding:30px 18px 26px;text-align:center}
header.hero .kicker{margin:0 0 8px;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;opacity:.85;font-weight:700}
header.hero h1{margin:0;font-size:clamp(24px,6.4vw,33px);letter-spacing:-.02em;line-height:1.12}
header.hero .when{margin:14px auto 0;display:inline-block;padding:7px 16px;
  border:1.5px solid rgba(255,255,255,.45);border-radius:999px;font-size:15px;font-weight:700}
:root[data-theme="dark"] header.hero .when {border-color:rgba(0,0,0,.35)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:20px;margin-top:18px;box-shadow:var(--shadow)}
.card h2{margin:0 0 8px;font-size:18px}
.lead{margin:0 0 12px;color:var(--ink-soft);font-size:15.5px}
.lead:last-child{margin-bottom:0}
.lead strong{color:var(--ink)}
.done{margin-top:18px;padding:14px 16px;border-radius:12px;background:var(--yes-soft);
  border:1.5px solid var(--yes);color:var(--yes);font-size:16px;text-align:center}
/* --- where --- */
.where{text-align:center}
.addr{margin:0;font-size:21px;font-weight:700}
.city{margin:2px 0 0;color:var(--ink-soft);font-size:15px}
.mapbox{margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  aspect-ratio:16/10;max-width:100%}
.mapbox iframe{width:100%;height:100%;border:0;display:block}
.dirs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.dir{flex:1 1 180px;padding:12px 14px;border-radius:10px;text-decoration:none;
  font-weight:700;font-size:14.5px}
.dir.g{background:var(--accent);color:var(--accent-ink)}
.dir.a{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
.dir:hover{filter:brightness(1.08)}
/* --- choices --- */
.choices{display:grid;gap:10px;margin-bottom:6px}
.choice{display:block;padding:14px 16px;border:2px solid var(--line);border-radius:12px;
  cursor:pointer;background:var(--bg)}
.choice input{margin-right:8px}
.choice .t{font-weight:700;font-size:16px}
.choice .s{display:block;margin-left:24px;font-size:13.5px;color:var(--ink-soft)}
.choice:hover{border-color:var(--ink-soft)}
.choice.yes:has(input:checked){border-color:var(--yes);background:var(--yes-soft)}
.choice.late:has(input:checked){border-color:var(--late);background:var(--late-soft)}
.choice.no:has(input:checked){border-color:var(--no);background:var(--no-soft)}
label{display:block;margin-top:16px;font-weight:700;font-size:15px}
label .opt{font-weight:400;color:var(--ink-soft)}
.hint{margin:3px 0 7px;font-size:13.5px;color:var(--ink-soft)}
input[type=text],input[type=tel]{width:100%;padding:13px 12px;font:inherit;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:10px}
input:focus{outline:2px solid var(--accent);outline-offset:1px}
.rem-check{display:flex;align-items:center;gap:9px;margin-top:18px;font-weight:600;font-size:15px}
.rem-check input{width:18px;height:18px}
button.submit{margin-top:20px;width:100%;padding:15px 18px;font-family:inherit;font-weight:700;font-size:17px;line-height:1;
  color:var(--accent-ink);background:var(--accent);border:0;border-radius:11px;cursor:pointer}
button.submit:hover{filter:brightness(1.1)}
footer.foot{margin-top:28px;text-align:center;font-size:13px;color:var(--ink-soft)}
.tabs{display:flex;gap:4px;margin-top:18px;border-bottom:2px solid var(--line)}
.tab{padding:10px 15px;margin-bottom:-2px;font-size:14.5px;font-weight:700;
  text-decoration:none;color:var(--accent);border-bottom:2px solid var(--accent);
  border-radius:8px 8px 0 0}
/* --- admin --- */
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:18px}
.grp{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;
  box-shadow:var(--shadow);border-top:3px solid var(--line)}
.grp.yes{border-top-color:var(--yes)} .grp.late{border-top-color:var(--late)}
.grp.no{border-top-color:var(--no)}
.grp h3{margin:0 0 8px;font-size:14px;letter-spacing:.03em;text-transform:uppercase;
  color:var(--ink-soft);display:flex;justify-content:space-between;align-items:baseline}
.grp h3 b{font-size:26px;color:var(--ink)}
.grp.yes h3 b{color:var(--yes)} .grp.late h3 b{color:var(--late)} .grp.no h3 b{color:var(--no)}
.grp ul{margin:0;padding:0;list-style:none}
.grp li{padding:7px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.grp li:last-child{border-bottom:0}
.grp .nm{font-weight:600;display:block}
.grp .ph{font-size:13px;color:var(--accent)}
.grp .at{display:block;font-size:12px;color:var(--ink-soft)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:18px 20px;margin-top:16px;box-shadow:var(--shadow)}
.panel h2{margin:0 0 6px;font-size:17px}
.panel .lead b{color:var(--ink);font-size:19px}
.rem{margin:4px 0;font-size:14.5px}
.warn-note{margin:10px 0 0;padding:12px 14px;background:var(--late-soft);
  border:1px solid var(--late);border-radius:10px;font-size:13.5px;color:var(--ink-soft)}
.warn-note b{color:var(--ink)}
table.opens{width:100%;border-collapse:collapse;margin-top:12px;font-size:13px}
table.opens th{text-align:left;color:var(--ink-soft);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px;border-bottom:1px solid var(--line)}
table.opens td{padding:6px 8px 6px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.opens td.ua{color:var(--ink-soft);word-break:break-word}
.empty{color:var(--ink-soft);font-style:italic;font-size:14px}

/* --- public tally: a number, never a name --- */
.tally{margin:0 0 16px;padding:12px 14px;border-radius:10px;background:var(--yes-soft);
  border:1px solid var(--yes);color:var(--yes);font-size:15px;text-align:center;font-weight:600}
.tally b{font-size:20px}
.tally.none{background:var(--bg);border-color:var(--line);color:var(--ink-soft);font-weight:400}

/* --- other service opportunities --- */
.opp{display:block;padding:14px 16px;margin-top:10px;border-radius:11px;
  border:1.5px solid var(--line);background:var(--bg);text-decoration:none;color:var(--ink)}
.opp:hover{border-color:var(--accent);background:var(--accent-soft)}
.opp .ot{display:block;font-weight:700;font-size:15.5px}
.opp .os{display:block;margin-top:2px;font-size:13.5px;color:var(--ink-soft)}

/* --- the four help roles --- */
.truckopts{display:grid;gap:9px;margin:4px 0 6px}
.truck{display:block;padding:12px 15px;border:2px solid var(--line);border-radius:11px;
  cursor:pointer;background:var(--bg);margin-top:0}
.truck input{margin-right:9px}
.truck .t{font-weight:700;font-size:15px}
.truck:hover{border-color:var(--ink-soft)}
.truck:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}

/* --- a "coming soon" opportunity: informational, not a link --- */
.opp.soon{cursor:default;border-style:dashed;background:transparent}
.opp.soon:hover{border-color:var(--line);background:transparent}
.opp.soon .tag{display:inline-block;margin-bottom:5px;padding:2px 9px;
  font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;background:var(--late-soft);color:var(--late);
  border:1px solid var(--late)}

/* --- ways-to-serve strip: one row of the ward's open service opportunities --- */
.ways{background:var(--panel);border-bottom:1px solid var(--line);padding:12px 18px 0}
.ways .wl a{color:inherit;text-decoration:none}
.ways .wl{max-width:640px;margin:0 auto 7px;font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.wrow{max-width:640px;margin:0 auto;display:flex;gap:4px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.wrow::-webkit-scrollbar{display:none}
.way{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:10px 14px;
  margin-bottom:-1px;font-size:14px;font-weight:700;text-decoration:none;
  color:var(--ink-soft);border-bottom:3px solid transparent;white-space:nowrap}
.way:hover{color:var(--ink)}
.way.on{color:var(--accent);border-bottom-color:var(--accent)}
.way.soon{color:var(--ink-soft);opacity:.75;cursor:default}
.way .sn{padding:1px 7px;border-radius:999px;font-size:10px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;background:var(--late-soft);
  color:var(--late);border:1px solid var(--late)}
@media (max-width:520px){.way{font-size:13.5px;padding:10px 11px}}
/* No margin-left:auto — in a horizontally scrolling row it pushes the item past
   the edge instead of to the right of the visible area, which clipped "Admin".
   The strip is also allowed to run wider than the 640px content column, since
   on the LAN there are five items and they should not need scrolling. */
.way.adm{color:var(--accent);border-left:1px solid var(--line);margin-left:6px}
@media (min-width:700px){.ways .wl,.wrow{max-width:780px}}

/* --- finished asks ---------------------------------------------------------
   A completed job must not read as a request. Muted, no form, and the only
   content is the thank-you. */
.pasth{margin:34px 0 0;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700}
.card.was{opacity:.8}
.card.was h2{margin-top:0}
.pwhen{margin:2px 0 0;color:var(--ink-soft);font-size:14.5px}
.pthanks{margin:12px 0 0;font-size:15px;line-height:1.55}
.pthanks .tl{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;margin-bottom:3px}

/* --- church cleaning sheet --- */
.sats{margin-top:4px}
.sat{border:1px solid var(--line);border-radius:11px;margin-top:9px;background:var(--bg)}
.sat[open]{border-color:var(--accent)}
.sat summary{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:13px 15px;cursor:pointer;list-style:none;flex-wrap:wrap}
.sat summary::-webkit-details-marker{display:none}
.sat .sd{font-weight:700}
.sat .sc{font-size:13.5px;color:var(--ink-soft)}
.sat form{padding:4px 15px 16px}
.slot{display:flex;align-items:center;gap:9px;margin-top:8px;flex-wrap:wrap}
.slot .sn{flex:none;width:22px;height:22px;border-radius:999px;background:var(--accent-soft);
  color:var(--accent);font-size:12px;font-weight:700;display:flex;align-items:center;
  justify-content:center}
.slot input{flex:1 1 150px;padding:9px 11px;font:inherit;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:8px;width:auto}
.slot input.snote{flex:1 1 190px;font-size:14px;color:var(--ink-soft)}
.slot input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.sat button.submit{margin-top:14px}
.tally.none{opacity:.8}
.onote{margin:3px 0 0;font-size:13.5px;color:var(--ink-soft);font-style:italic}
.picks{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 2px}
.pick{margin:0;display:inline-flex;align-items:center;gap:7px;padding:10px 14px;
  border:2px solid var(--line);border-radius:10px;cursor:pointer;background:var(--bg);
  font-weight:600;font-size:15px}
.pick:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.way.idea{font-style:italic}
.goal{margin:0 0 12px;padding:12px 14px;border-radius:10px;background:var(--accent-soft);
  border:1px solid var(--warn-line);font-size:15.5px;text-align:center}
.goal b{color:var(--accent)}
.goal.met{background:#e7f3ea;border-color:#a9cdb4;color:#23562f}
.goal.met b{color:#23562f}

  :root[data-theme="dark"] .goal.met {background:#16281c;border-color:#2f5c3b;color:#9fd6ae}

/* Overview (/): the first ask (newest, or about to happen) gets the big card; the archive links back. */
.ask.lead-ask{border:2px solid var(--accent)}
.newest{margin:0 0 6px;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}
.go{margin:14px 0 0;display:flex}
.go .dir{flex:0 1 auto;text-align:center}
.plink{margin:8px 0 0;font-size:14px}
.plink a{color:var(--accent)}

/* Add to my calendar. */
.addcal{margin:12px auto 0;max-width:640px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:14px;color:var(--ink-soft)}
.addcal a{padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);
  color:var(--accent);font-weight:600;text-decoration:none}
.addcal a:hover{border-color:var(--accent)}
header.hero + .addcal{justify-content:center;padding:0 18px}
.sat .addcal{margin:6px 0 10px}

/* Spring cleanup: how many could come on each candidate Saturday. */
.spring-sats{list-style:none;margin:0 0 14px;padding:0}
.spring-sats li{padding:7px 2px;border-top:1px solid var(--line);font-size:15px}
.spring-sats .sd,.spring-sats .sc{display:block}
.spring-sats-h{margin:4px 0 2px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.spring-sats li:first-child{border-top:0}
.spring-sats .sd{font-weight:700}
.spring-sats .sc{color:var(--ink-soft);font-size:14px}
.vote-opt{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:0}
.vote-opt .vn{font-size:13.5px;font-weight:700;color:var(--ink-soft);white-space:nowrap}
.vote-opt .vbar{grid-column:1/-1;display:block;height:6px;margin-top:8px;border-radius:3px;background:var(--line);overflow:hidden}
.vote-opt .vbar i{display:block;height:100%;background:var(--accent);border-radius:3px}
#vote .hint{margin-top:0}

/* Ward carnival: the names on the sheet, then the spots still open. */
.names{list-style:none;margin:0 0 4px;padding:0}
.names li{display:flex;align-items:center;gap:11px;padding:10px 2px;border-top:1px solid var(--line);font-size:16px}
.names li:first-child{border-top:0}
.names .sn{flex:none;width:26px;height:26px;border-radius:999px;background:var(--accent-soft);
  color:var(--accent);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.names .nm{flex:1 1 auto;font-weight:700;overflow-wrap:anywhere}
.names li.open .nm{font-weight:400;font-style:italic;color:var(--ink-soft)}
.names li.open .sn{background:transparent;border:1.5px dashed var(--line);color:var(--ink-soft)}
.rmform{margin:0;flex:none}
.rm{padding:6px 12px;font-family:inherit;font-weight:600;font-size:13px;line-height:1;color:var(--ink-soft);background:transparent;
  border:1px solid var(--line);border-radius:999px;cursor:pointer}
.rm:hover{color:var(--no);border-color:var(--no)}
/* The QR code keeps its own white square in dark mode too: it scans best
   dark-on-white, and the white margin is part of the code. */
.qrcard{text-align:center}
.qrbox{display:block;width:min(100%,400px);margin:4px auto 0;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:#fff}
.qrbox img{display:block;width:100%;height:auto;image-rendering:pixelated}
.qrurl{margin:10px 0 0;font-size:14px;color:var(--ink-soft);overflow-wrap:anywhere}
/* Snow shoveling: one block per Sunday, its names, and for the Sundays you
   took, the calendar buttons. A Sunday that is over stays, quieter. */
.suns{margin-top:4px}
.sun{border:1px solid var(--line);border-radius:11px;margin-top:9px;padding:2px 15px 6px;background:var(--bg)}
.sun h3{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:11px 0 2px;font-size:16px}
.sun h3 .sc{font-size:13.5px;font-weight:400;color:var(--ink-soft)}
.sun.past{opacity:.7}
.sun .addcal{margin:2px 0 8px}
#sheet .done{margin:0 0 12px}
#signup .warn-note{margin:0 0 4px}
/* Tools and skills survey: a heading per group of boxes, and a note box
   that looks like the name box above it. */
.sgh{margin:18px 0 2px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
#survey .picks .pick{font-size:14.5px;padding:9px 12px}
#survey textarea{display:block;width:100%;min-height:96px;padding:12px;font:inherit;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:10px;resize:vertical}
#survey .tally,#survey .warn-note{margin:0 0 4px}
/* The honeypot: a "Website" box people never see and spam scripts fill in.
   Off-screen rather than display:none, which some scripts know to skip. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* theme-kit: light by default; dark only when chosen */
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

/* theme-kit toggle (~/theme-kit). Uses the site's own surface/ink/line variables; fallbacks if it has none. */
.theme-toggle{position:fixed;top:10px;right:10px;z-index:9999;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;font:16px/1 system-ui,sans-serif;
  background:var(--tk-bg,#ffffff);color:var(--tk-fg,#222222);border:1px solid var(--tk-line,rgba(0,0,0,.18));
  box-shadow:0 1px 4px rgba(0,0,0,.18);opacity:.9}
.theme-toggle:hover,.theme-toggle:focus-visible{opacity:1}
.theme-toggle.inline{position:static;box-shadow:none}
:root[data-theme="dark"] .theme-toggle{--tk-bg:#26262b;--tk-fg:#f0efec;--tk-line:rgba(255,255,255,.22)}
@media print{.theme-toggle{display:none}}
.theme-toggle,:root[data-theme="dark"] .theme-toggle{--tk-bg:var(--panel);--tk-fg:var(--ink);--tk-line:var(--line)}