:root{--green:#219f40;--gray:#5c5c5c;--bg:#f6f7f6;--card:#fff;--text:#1d1f1d;--muted:#5c5c5c;--line:#dfe3df;--err:#b3261e;--errbg:#fbeaea;--okbg:#e6f4ea;--warn:#8a5a00;--warnbg:#fff4d6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#121412;--card:#1b1e1b;--text:#e8eae8;--muted:#a9afa9;--line:#2f342f;--err:#ff8a80;--errbg:#3a1f1d;--okbg:#17301e;--warn:#ffd27a;--warnbg:#3a2f12}}
:root[data-theme="dark"]{--bg:#121412;--card:#1b1e1b;--text:#e8eae8;--muted:#a9afa9;--line:#2f342f;--err:#ff8a80;--errbg:#3a1f1d;--okbg:#17301e;--warn:#ffd27a;--warnbg:#3a2f12}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--green)}
header.top{background:var(--green);color:#fff;padding:.6rem 1.25rem 0;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1.25rem;box-shadow:0 1px 3px rgba(0,0,0,.15)}
header.top .brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:#fff;font-weight:400;font-size:1.05rem;padding-bottom:.4rem;margin-right:auto}
header.top img{height:30px;width:auto}
header.top img.logo.custom{background:#fff;border-radius:6px;padding:2px 6px}
nav.main{display:flex;gap:.15rem;order:3;flex-basis:100%;overflow-x:auto;scrollbar-width:none}
nav.main a{padding:.55rem .95rem;border-radius:8px 8px 0 0;text-decoration:none;color:rgba(255,255,255,.88);min-height:44px;display:inline-flex;align-items:center;font-weight:500;white-space:nowrap}
nav.main a:hover{background:rgba(255,255,255,.14);color:#fff}
nav.main a.on{background:var(--bg);color:var(--green);font-weight:700}
.who{font-size:.9rem;display:flex;gap:.75rem;align-items:center;padding-bottom:.4rem}
.who a{color:#fff;text-decoration:none;font-weight:500}
.who button.sec{color:#fff;border-color:rgba(255,255,255,.7);min-height:36px;padding:.3rem .9rem}
.who button.sec:hover{background:rgba(255,255,255,.16)}
main{max-width:980px;margin:0 auto;padding:1rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.4rem;margin:1rem 0;box-shadow:0 1px 2px rgba(0,0,0,.05)}
h1{font-size:1.6rem;margin:1rem 0 .4rem;letter-spacing:-.01em}h2{font-size:1.2rem}h3{font-size:1.05rem}
label{display:block;font-weight:600;margin:.8rem 0 .2rem}
input:not([type]),input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=time],input[type=tel],select,textarea{width:100%;padding:.6rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font:inherit;min-height:44px}
textarea{min-height:90px}
.btn,button{background:var(--green);color:#fff;border:0;border-radius:8px;padding:.6rem 1.1rem;font:inherit;font-weight:600;cursor:pointer;min-height:44px;text-decoration:none;display:inline-flex;align-items:center}
.btn.sec,button.sec{background:transparent;color:var(--green);border:1px solid var(--green)}
.btn.danger,button.danger{background:var(--err);color:#fff}
button.link{background:none;color:var(--green);padding:0;min-height:0;text-decoration:underline;font-weight:400}
.flash{padding:.7rem 1rem;border-radius:8px;margin:.5rem 0}
.flash.error{background:var(--errbg);color:var(--err)}.flash.ok{background:var(--okbg)}.flash.warn{background:var(--warnbg);color:var(--warn)}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:.5rem .4rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.85rem;color:var(--muted)}
.tablewrap{overflow-x:auto}
.muted{color:var(--muted)}.small{font-size:.875rem}
.tag{display:inline-block;padding:.1rem .5rem;border-radius:99px;background:var(--okbg);font-size:.8rem}
.tag.warn{background:var(--warnbg);color:var(--warn)}.tag.err{background:var(--errbg);color:var(--err)}
.row{display:flex;flex-wrap:wrap;gap:.75rem}.row>*{flex:1 1 220px}
.actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;align-items:center}
form.inline{display:inline}
footer{max-width:980px;margin:2rem auto;padding:0 1rem;color:var(--muted);font-size:.85rem;text-align:center}
.hp{position:absolute;left:-5000px;height:0;overflow:hidden}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;color:#000;padding:.5rem;z-index:9}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.empty{text-align:center;padding:1.5rem;color:var(--muted)}
.code{font-family:ui-monospace,monospace;background:var(--bg);padding:.1rem .4rem;border-radius:4px;word-break:break-all}

.demo-banner{background:#fff8d6;color:#4a3d00;border-bottom:1px solid #e3d27a;padding:.5rem 1rem;font-size:.9rem;text-align:center}
.demo-banner a{color:inherit;font-weight:600}
@media (prefers-color-scheme:dark){.demo-banner{background:#3a3310;color:#f5e9a8;border-color:#6b5f1c}}

tbody tr:hover{background:var(--okbg)}
.pills{display:flex;flex-wrap:wrap;gap:.4rem;margin:.75rem 0}
.pills a{padding:.3rem .85rem;border:1px solid var(--line);border-radius:99px;background:var(--card);text-decoration:none;color:var(--text);font-size:.9rem}
.pills a:hover,.pills a.on{background:var(--green);border-color:var(--green);color:#fff}
.btn:hover,button:hover{filter:brightness(1.07)}
footer{border-top:1px solid var(--line);padding-top:1rem}
.tiles{margin-top:1.25rem}
.tile{display:block;text-decoration:none;color:var(--text);margin:0;border-top:3px solid var(--green);transition:box-shadow .15s,transform .15s}
.tile:hover{box-shadow:0 4px 14px rgba(0,0,0,.12);transform:translateY(-1px)}
.tile h2{margin:.2rem 0 .3rem;color:var(--green)}
.tile p{margin:0}

/* sign-in and setup */
.authcard{max-width:440px;margin:2.5rem auto;border-top:4px solid var(--green)}
.brandmark{text-align:center;margin:.25rem 0 .75rem}
.brandmark img{max-width:180px;height:auto;display:block;margin:0 auto .35rem}
.brandmark em{color:var(--green)}
ol.steps{list-style:none;margin:1rem 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem .9rem}
ol.steps li{display:flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.85rem}
ol.steps .n{width:1.6rem;height:1.6rem;border-radius:50%;border:2px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;font-variant-numeric:tabular-nums}
ol.steps li.on{color:var(--text);font-weight:700}
ol.steps li.on .n{background:var(--green);border-color:var(--green);color:#fff}
ol.steps li.done .n{border-color:var(--green);color:var(--green)}
@media (max-width:640px){ol.steps li:not(.on) .l{display:none}}

/* shown inside another app's frame: that app supplies the header and navigation */
html.framed header.top,html.framed footer,html.framed .demo-banner{display:none}
html.framed main{padding-top:1.25rem}

/* sidebar layout */
header.top{padding:0 1.25rem;min-height:64px;flex-wrap:nowrap;gap:1rem}
header.top .brand{padding-bottom:0;margin-right:auto}
.who{padding-bottom:0}
.shell{display:flex;align-items:flex-start;min-height:calc(100vh - 64px)}
.shell.withnav .pane{flex:1;min-width:0}
.pane{flex:1;min-width:0}
nav.side{width:224px;flex-shrink:0;align-self:stretch;background:var(--card);border-right:1px solid var(--line);padding:.75rem .6rem;display:flex;flex-direction:column;gap:.1rem;position:sticky;top:0;max-height:100vh;overflow-y:auto}
nav.side a{display:flex;align-items:center;gap:.7rem;padding:.5rem .7rem;border-radius:8px;text-decoration:none;color:var(--muted);font-size:.95rem;min-height:40px}
nav.side a:hover{background:var(--okbg);color:var(--text)}
nav.side a.on{background:var(--okbg);color:var(--green);font-weight:700}
.sidehead{margin:1rem .7rem .25rem;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.burger,.navtoggle{display:none}
@media (max-width:860px){
  .burger{display:inline-flex;color:#fff;cursor:pointer;min-height:44px;align-items:center}
  nav.side{display:none;position:fixed;z-index:20;top:64px;left:0;bottom:0;max-height:none;width:min(280px,85vw);box-shadow:4px 0 18px rgba(0,0,0,.25)}
  .navtoggle:checked ~ .shell nav.side{display:flex}
}
html.framed nav.side,html.framed .burger{display:none}
html.framed .shell{min-height:0}

/* workspace pages */
.pagehead{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin:.5rem 0}
.pagehead h1{margin:0}
.lv{display:inline-block;padding:.12rem .6rem;border-radius:99px;font-size:.8rem;font-weight:600;white-space:nowrap;background:var(--line);color:var(--text)}
.lv-regular{background:#dff3e5;color:#14602a}.lv-atrisk{background:#fff0c9;color:#7a5200}.lv-critical{background:#fbdcd9;color:#9d1f17}
.lv-disconnected{background:#e4e4e4;color:#3d3d3d}.lv-guest{background:#dcebfb;color:#1c4f87}.lv-2ndtime{background:#e6e1fa;color:#4a3a96}.lv-1sttime{background:#d8f1f4;color:#0f5c68}.lv-neighbor{background:#efefef;color:#666}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lv-regular{background:#17301e;color:#8fdba6}:root:not([data-theme="light"]) .lv-atrisk{background:#3a2f12;color:#ffd27a}:root:not([data-theme="light"]) .lv-critical{background:#3a1f1d;color:#ff8a80}
:root:not([data-theme="light"]) .lv-disconnected{background:#2c2c2c;color:#cfcfcf}:root:not([data-theme="light"]) .lv-guest{background:#16293f;color:#9ec7f5}:root:not([data-theme="light"]) .lv-2ndtime{background:#251f45;color:#c5b9ff}:root:not([data-theme="light"]) .lv-1sttime{background:#10343a;color:#86d6e0}:root:not([data-theme="light"]) .lv-neighbor{background:#262626;color:#aaa}}
:root[data-theme="dark"] .lv-regular{background:#17301e;color:#8fdba6}:root[data-theme="dark"] .lv-atrisk{background:#3a2f12;color:#ffd27a}:root[data-theme="dark"] .lv-critical{background:#3a1f1d;color:#ff8a80}
:root[data-theme="dark"] .lv-disconnected{background:#2c2c2c;color:#cfcfcf}:root[data-theme="dark"] .lv-guest{background:#16293f;color:#9ec7f5}:root[data-theme="dark"] .lv-2ndtime{background:#251f45;color:#c5b9ff}:root[data-theme="dark"] .lv-1sttime{background:#10343a;color:#86d6e0}:root[data-theme="dark"] .lv-neighbor{background:#262626;color:#aaa}
.chips{border:0;padding:0;margin:.5rem 0;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}.chips legend{float:left;margin-right:.6rem;padding:0}
.chip{display:inline-flex;align-items:center;gap:.35rem;margin:0;padding:.2rem .7rem;border:1px solid var(--line);border-radius:99px;font-weight:500;font-size:.85rem;background:var(--card)}
.chip input{margin:0}.chip .n{color:var(--muted);font-size:.78rem}
.filters .row>*{flex:1 1 150px}
.bulk{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.6rem 1rem}.bulk select,.bulk input{width:auto}
.grow{flex:1}
table.plist td,table.plist th{padding:.45rem .5rem}
.pills.tabs{margin:.5rem 0 1rem}.pills a.on{background:var(--green);border-color:var(--green);color:#fff}
.kv th{width:11rem;color:var(--muted);font-weight:500;font-size:.9rem}
ul.plain{list-style:none;margin:.3rem 0;padding:0}ul.plain li{padding:.25rem 0;border-bottom:1px solid var(--line)}ul.plain li:last-child{border:0}
ul.checks li{padding:.15rem 0}
label.inline{display:inline-flex;align-items:center;gap:.4rem;margin:.4rem .8rem .4rem 0;font-weight:500}label.inline input{width:auto}
.empty{color:var(--muted)}

/* Sunday at a glance and Home */
.tiles3{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.75rem;margin:.75rem 0}
.tile2{border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;background:var(--card)}
.tile2 .big{font-size:1.7rem;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}.tile2 .big a.n{color:var(--text);text-decoration-style:dotted;text-underline-offset:5px}
.tile2 .pair{display:flex;gap:1.4rem;align-items:flex-end}
.xs{font-size:.75rem}
.dl.up{color:#14803a}.dl.down{color:#c0291f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dl.up{color:#6fdc8f}:root:not([data-theme="light"]) .dl.down{color:#ff8a80}}
:root[data-theme="dark"] .dl.up{color:#6fdc8f}:root[data-theme="dark"] .dl.down{color:#ff8a80}
.datebar{display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem}.datebar .btn{min-width:44px;justify-content:center}.datebar [aria-disabled=true]{opacity:.35;pointer-events:none}
tr.cur td{background:var(--okbg);font-weight:600}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.75rem;margin:1rem 0}
.stat{display:flex;flex-direction:column;gap:.1rem;border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;background:var(--card);text-decoration:none;color:var(--text)}
.stat b{font-size:1.6rem;font-variant-numeric:tabular-nums}.stat.warn b{color:#c2570c}.stat:hover{border-color:var(--green)}
.bar{display:flex;height:14px;border-radius:99px;overflow:hidden;margin:.5rem 0}.bar .seg{display:block;height:100%;border-radius:0}
.bar .lv-regular{background:#2aa84f}.bar .lv-atrisk{background:#f2a516}.bar .lv-critical{background:#e5484d}.bar .lv-disconnected{background:#8b8b8b}.bar .lv-guest{background:#5b9bd5}.bar .lv-2ndtime{background:#8b79d6}.bar .lv-1sttime{background:#2cb5c6}.bar .lv-neighbor{background:#c8c8c8}
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem}.legend a{text-decoration:none;color:var(--text)}
svg.trend{width:100%;height:auto}svg.trend .g{stroke:var(--line);stroke-width:1}svg.trend .t{fill:var(--muted);font-size:10px}svg.trend .ln{fill:none;stroke:var(--green);stroke-width:2.5;stroke-linejoin:round}svg.trend .dot{fill:var(--green)}

/* shepherd app */
.listnav li a{display:flex;justify-content:space-between;gap:.5rem;text-decoration:none;color:var(--text);padding:.2rem .3rem;border-radius:6px}.listnav li a.on{background:var(--okbg);color:var(--green);font-weight:700}.listnav b{font-variant-numeric:tabular-nums}
.person{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.65rem 0;border-bottom:1px solid var(--line)}.person:last-child{border:0}
.person .who2{min-width:0}.person .who2 .tag{margin-right:.2rem}.contact{display:flex;gap:1rem;flex-shrink:0}.contact a{color:var(--muted);display:inline-flex;padding:.35rem}.contact a:hover{color:var(--green)}
.dot{color:var(--line);font-size:1.1rem}.dot.on{color:var(--green)}
.weeks{display:flex;gap:.6rem;align-items:flex-end;justify-content:space-around;min-height:100px}.wk{display:flex;flex-direction:column;align-items:center;gap:.2rem}.wk .bar2{width:26px;border-radius:4px;background:var(--line)}.wk.on .bar2{background:var(--green)}

details.card summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}details.card summary::-webkit-details-marker{display:none}
ul.cols{columns:3 220px;column-gap:1.5rem}
.side2 table.kv th{width:6rem}

form.rsvp{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}form.rsvp select,form.rsvp input[name=guests]{width:auto}form.rsvp input[name=note]{flex:1 1 10rem;min-width:8rem}form.rsvp button{flex:0 0 auto}

details.resetpin{display:inline-block;vertical-align:top}details.resetpin summary{cursor:pointer;list-style:none;display:inline-block}details.resetpin summary::-webkit-details-marker{display:none}details.resetpin form{margin-top:.4rem}

/* phones: show the home numbers in two columns */
@media (max-width:640px){.tiles3,.stats{grid-template-columns:1fr 1fr;gap:.5rem}.tile2{padding:.6rem .7rem}.tile2 .big{font-size:1.45rem}.tile2 .pair{gap:1rem}.stat{padding:.6rem .7rem}.stat b{font-size:1.4rem}}

/* phones: top bar shows only the first word of the church name */
.bn-short{display:none}
@media (max-width:640px){.bn-full{display:none}.bn-short{display:inline}}

/* sign out is a single icon button */
.who button.iconbtn{width:44px;height:44px;min-height:44px;padding:0;justify-content:center}

/* shepherd app: larger tabs and contact icons */
.pills.tabs{gap:.5rem}
.pills.tabs a{padding:.6rem 1.15rem;font-size:1.05rem;min-height:44px;display:inline-flex;align-items:center}
.contact{gap:.5rem}.contact a{padding:.55rem}.contact svg{width:30px;height:30px}

/* pull to refresh on phones */
html{overscroll-behavior-y:contain}
#ptr{position:fixed;top:calc(8px + env(safe-area-inset-top,0px));left:50%;transform:translate(-50%,0);z-index:30;width:40px;height:40px;border-radius:50%;background:var(--card);color:var(--gray);border:1px solid var(--line);box-shadow:0 2px 8px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .15s}
#ptr.ready{color:var(--green);border-color:var(--green)}
#ptr.spin svg{animation:ptrspin .7s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}

/* self check-in kiosk: big touch targets for a tablet in the lobby */
.kiosk{max-width:640px;margin:1.5rem auto;text-align:center}.kiosk.wide{text-align:left}
.kiosk h1{font-size:2rem}.kmsg{font-size:1.4rem;margin:.8rem 0}
.kbtn{display:flex;align-items:center;justify-content:center;width:100%;min-height:76px;margin:.8rem 0;font-size:1.5rem;font-weight:700;background:var(--green);color:#fff;border:2px solid var(--green);border-radius:14px;text-decoration:none;cursor:pointer}
.kbtn.sec{background:transparent;color:var(--green)}
.kinput{font-size:1.6rem;min-height:64px;text-align:center}
.klist{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.6rem;margin:.6rem 0}.klist .kbtn{margin:0;min-height:68px}
.kcheck{display:flex;align-items:center;gap:.8rem;min-height:68px;padding:.6rem 1rem;border:2px solid var(--line);border-radius:14px;font-size:1.4rem;font-weight:600;cursor:pointer;text-align:left}
.kcheck input{width:30px;height:30px;flex:none}.kcheck:has(input:checked){border-color:var(--green);background:var(--okbg)}
.printsign img{display:block;margin:1rem auto;image-rendering:pixelated}
@media print{.noprint,header.top,nav.side,.demo-banner,footer{display:none!important}}