/* Layout: orange rail, action-first "Today" home. Orange is the brand and the heat colour; blue/pink only mean gender; green only means done. */
:root{
  --or:#f47b16;--or-d:#b85100;--or-soft:#fdebd6;--or-deep:#8f3d00;--green:#17803d;--green-soft:#def2e4;
  --bg:#f4f1ec;--surface:#fff;--s2:#faf7f2;--fg:#201b17;--muted:#6f675f;--line:#e5dfd6;
  --m:#2f6fb3;--f:#cf4f89;--red:#c0392b;--red-soft:#fbe5e1;--amber:#a86a0a;--amber-soft:#fcf0d6;--blue-soft:#e2edf8;
  --rail:#9c4306;--rail-fg:#ffe3c9;--rail-on:#b85412;
  --fd:'Bricolage Grotesque','Noto Sans Telugu',system-ui,sans-serif;--fb:'Public Sans','Noto Sans Telugu',system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --or:#f68b2c;--or-d:#ffb673;--or-soft:#3b2a17;--green:#45c97c;--green-soft:#15301e;
  --bg:#13100d;--surface:#1c1814;--s2:#211c17;--fg:#f1ece6;--muted:#a39a90;--line:#2e2822;
  --m:#6ba6e6;--f:#ee86b3;--red:#ef7a6d;--red-soft:#3a1d19;--amber:#e8b45a;--amber-soft:#35290f;--blue-soft:#17283a;
  --rail:#3a1b05;--rail-fg:#f0c9a4;--rail-on:#54290b;color-scheme:dark}}
:root[data-theme="dark"]{
  --or:#f68b2c;--or-d:#ffb673;--or-soft:#3b2a17;--green:#45c97c;--green-soft:#15301e;
  --bg:#13100d;--surface:#1c1814;--s2:#211c17;--fg:#f1ece6;--muted:#a39a90;--line:#2e2822;
  --m:#6ba6e6;--f:#ee86b3;--red:#ef7a6d;--red-soft:#3a1d19;--amber:#e8b45a;--amber-soft:#35290f;--blue-soft:#17283a;
  --rail:#3a1b05;--rail-fg:#f0c9a4;--rail-on:#54290b;color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font:13.5px/1.45 var(--fb);overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
.app{display:flex;flex-direction:column;height:100%;height:100dvh}
.appbar{flex:none;display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;background:linear-gradient(100deg,var(--rail),var(--rail-on));color:var(--rail-fg);padding:8px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));padding-top:max(8px,env(safe-area-inset-top,0px));position:relative;z-index:5;box-shadow:0 4px 18px rgba(0,0,0,.18)}
.brand{display:flex;align-items:center;gap:10px;min-width:0;padding-bottom:8px}
.lotus{width:42px;height:42px;border-radius:50%;background:#fff;overflow:hidden;flex:none;border:2px solid #fff}
.lotus img{width:100%;height:100%;object-fit:cover;display:block}
.bt{min-width:0}.bt small{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.88;font-weight:700;white-space:nowrap}
.bt h1{font:800 21px/1.1 var(--fd);margin:1px 0 0;color:#fff;white-space:nowrap}
.tabs{flex:1 1 360px;min-width:0;display:flex;gap:3px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;align-self:flex-end;mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}
.tabs::-webkit-scrollbar{display:none}
.nv{display:flex;align-items:center;gap:7px;padding:10px 14px;border:0;border-radius:12px 12px 0 0;background:none;color:var(--rail-fg);font:600 13px var(--fb);white-space:nowrap;text-decoration:none;scroll-snap-align:center;flex:none;transition:background .15s,color .15s}
.nv svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nv:hover{background:rgba(255,255,255,.14);color:#fff}
.nv.on{background:var(--bg);color:var(--or-d)}
.appbar .r{display:flex;gap:8px;align-items:center;margin-left:auto;padding-bottom:8px}
.who{font-size:12px;white-space:nowrap;max-width:170px;overflow:hidden;text-overflow:ellipsis}
.appbar .ib{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);color:#fff}
.cd{background:var(--or);color:#fff;border-radius:99px;padding:4px 12px;font-weight:700;white-space:nowrap;font-size:12px;text-decoration:none}
a.cd:hover{filter:brightness(1.08)}
.appbar .cd{background:#fff;color:var(--or-d)}
.ib{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:5px 10px;cursor:pointer}
.av{width:34px;height:34px;border-radius:50%;overflow:hidden;border:2px solid #fff;flex:none}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.work{flex:1;min-height:0;overflow:auto;padding:18px max(20px,env(safe-area-inset-right,0px)) 44px max(20px,env(safe-area-inset-left,0px));-webkit-overflow-scrolling:touch}
.sample{background:var(--amber-soft);color:var(--amber);border-radius:8px;padding:6px 10px;font-size:12px;margin-bottom:12px}
.grid{display:grid;gap:14px}
.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.c4{grid-template-columns:repeat(4,minmax(0,1fr))}.c21{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
@media(max-width:1100px){.c4{grid-template-columns:repeat(2,minmax(0,1fr))}.c3,.c21{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-width:0}
.card h2{font:700 14px var(--fd);margin:0 0 2px}.card .hs{color:var(--muted);font-size:12px;margin-bottom:10px}
.hero{background:linear-gradient(105deg,#d9560a,#f47b16 55%,#f9a03a);color:#fff;border-radius:16px;padding:20px 22px;display:grid;grid-template-columns:minmax(0,1.3fr) auto minmax(0,1fr);gap:20px;align-items:center}
.hero .ey{font-size:11px;letter-spacing:.09em;text-transform:uppercase;opacity:.92;font-weight:600}
.hero .big{font:800 54px/1 var(--fd);margin:4px 0 6px}.hero .big span{font-size:20px;font-weight:600;margin-left:6px}
.hero p{margin:0;font-size:14px;max-width:46ch}.hero p b{font-weight:800}
.rg{width:118px;height:118px;border-radius:50%;background:conic-gradient(#fff calc(var(--p)*1%),rgba(255,255,255,.28) 0);display:grid;place-items:center}
.rg div{width:90px;height:90px;border-radius:50%;background:#c85a0a;display:grid;place-items:center;text-align:center;font:800 22px/1.1 var(--fd)}
.rg small{display:block;font:500 10.5px var(--fb);opacity:.9}
.hk{display:grid;gap:8px}.hk div{background:rgba(0,0,0,.16);border-radius:10px;padding:8px 12px;display:flex;justify-content:space-between;gap:10px}
.hk b{font:800 17px var(--fd)}
@media(max-width:900px){.hero{grid-template-columns:minmax(0,1fr)}.rg{justify-self:start}}
.acts{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.act{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:left;cursor:pointer;display:grid;gap:4px}
.act:hover{border-color:var(--or)}
.act b{font:800 26px/1.1 var(--fd);color:var(--or-d)}
.act span{font-weight:600}.act i{font-style:normal;color:var(--muted);font-size:12px}
.act em{font-style:normal;color:var(--or-d);font-weight:700;font-size:12px;margin-top:4px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 12px;align-items:center}
.chp{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:4px 12px;cursor:pointer;font-size:12px;font-weight:600}
.chp.on{background:var(--or);border-color:var(--or);color:#fff}
.heat{display:flex;flex-wrap:wrap;gap:6px}
.tile{border-radius:10px;padding:10px 12px;min-height:84px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;border:1px solid var(--line);color:var(--fg);text-align:left;background:var(--surface)}
.tile:hover{outline:2px solid var(--or)}
.tile b{font:800 17px var(--fd)}.tile span{font-size:12px}.tile small{font-size:11px;opacity:.8}
.leg{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);margin-top:8px}
.leg i{display:block;width:120px;height:8px;border-radius:4px;background:linear-gradient(90deg,color-mix(in srgb,var(--or) 10%,var(--surface)),color-mix(in srgb,var(--or) 80%,var(--surface)))}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;background:var(--surface);z-index:1;cursor:pointer;user-select:none}
th:hover{color:var(--fg)}
td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle}
tr.rw:hover{background:var(--s2)}tr.rw.go{cursor:pointer}
.tw{overflow:auto;max-width:100%}.num{text-align:right}
.te{color:var(--muted);font-size:12px}
.bar{background:var(--line);border-radius:5px;height:9px;overflow:hidden;min-width:70px}.bar i{display:block;height:100%;border-radius:5px;background:var(--or)}
.gb{display:flex;height:9px;width:90px;border-radius:5px;overflow:hidden}
.tag{display:inline-block;border-radius:6px;padding:1px 8px;font-size:12px;font-weight:600;white-space:nowrap}
.t-s{background:var(--green-soft);color:var(--green)}.t-u{background:var(--amber-soft);color:var(--amber)}.t-o{background:var(--red-soft);color:var(--red)}
.t-c{background:var(--blue-soft);color:var(--m)}.t-n{background:var(--bg);color:var(--muted)}.t-t{background:var(--or-soft);color:var(--or-d)}
.in{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:4px 8px;min-width:0}
.in:focus{outline:2px solid var(--or);border-color:var(--or)}
.fl{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.fl select,.fl input{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 10px;min-width:0}
.btn{background:var(--or);color:#fff;border:0;border-radius:8px;padding:8px 14px;cursor:pointer;font-weight:700}
.btn.g{background:var(--surface);color:var(--fg);border:1px solid var(--line)}
.hc{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.hh{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-bottom:8px}
.hh b{font:800 17px var(--fd);color:var(--or-d)}
.mem{display:grid;grid-template-columns:minmax(0,1.4fr) 54px minmax(112px,1fr) 150px;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
@media(max-width:700px){.mem{grid-template-columns:minmax(0,1fr) 1fr}}
.walk{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:12px}
@media(max-width:560px){.walk{grid-template-columns:minmax(0,1fr)}}
.pyr{display:grid;grid-template-columns:1fr 50px 1fr;gap:6px;align-items:center;margin:5px 0;font-size:12px;font-variant-numeric:tabular-nums}
.pyr .l{display:flex;justify-content:flex-end;align-items:center;gap:6px}.pyr .r{display:flex;align-items:center;gap:6px}
.pyr i{display:block;height:15px}.pyr .l i{background:var(--m);border-radius:4px 0 0 4px}.pyr .r i{background:var(--f);border-radius:0 4px 4px 0}
.pyr .a{text-align:center;color:var(--muted);font-weight:600}
.drw{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--surface);border-left:1px solid var(--line);box-shadow:-12px 0 40px rgba(0,0,0,.2);z-index:50;overflow:auto;padding:18px 20px;padding-right:max(20px,env(safe-area-inset-right,0px))}
.drw[hidden]{display:none!important}
.drw h3{font:800 22px var(--fd);margin:0}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.mini div{background:var(--s2);border-radius:8px;padding:8px 10px}.mini b{display:block;font:800 19px var(--fd)}.mini span{font-size:11px;color:var(--muted)}
.kv{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:13px}.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
textarea.in{width:100%;min-height:150px;font:12px/1.5 ui-monospace,Menlo,monospace}
.res{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}
.res div{background:var(--s2);border-radius:10px;padding:10px 12px}.res b{display:block;font:800 24px var(--fd)}.res span{font-size:12px;color:var(--muted)}
@media(max-width:700px){.res{grid-template-columns:repeat(2,minmax(0,1fr))}}
.login{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:radial-gradient(circle at 18% 12%,#fbb040,#f47b16 45%,#9c4306);overflow:auto}
.login[hidden],.app[hidden]{display:none!important}   /* .app is display:flex, which beat the hidden attribute: the empty dashboard flashed before sign-in */
.lc{background:#fff;color:#201b17;border-radius:18px;max-width:410px;width:100%;padding:26px 24px;text-align:center;box-shadow:0 20px 60px rgba(60,20,0,.35)}
.lp{display:flex;justify-content:center;align-items:center;gap:14px;margin-bottom:12px}
.lp img{border-radius:50%;object-fit:cover;display:block}.lp .c{width:104px;height:104px;border:4px solid #f47b16}.lp .l{width:62px;height:62px;border:3px solid #fff;box-shadow:0 0 0 2px #f47b16}
.lc h1{font:800 22px/1.2 var(--fd);margin:4px 0 0}.lc .t{font-weight:700;color:#b04a00;margin:2px 0}
.lc .s{color:#6f675f;font-size:12.5px;margin-bottom:16px}
.lc label{display:block;text-align:left;font-size:12px;font-weight:600;margin-bottom:4px}
.pf{display:flex;border:2px solid #e5dfd6;border-radius:10px;overflow:hidden;background:#fff}.pf:focus-within{border-color:#f47b16}
.pf span{padding:11px 12px;background:#faf5ee;font-weight:700}.pf input{flex:1;min-width:0;border:0;outline:0;padding:11px 12px;font-size:17px;color:#111;background:#fff;letter-spacing:.04em}
.lc .go{width:100%;margin-top:14px;background:linear-gradient(95deg,#e8610c,#f7931e);color:#fff;border:0;border-radius:10px;padding:12px;font:700 15px var(--fb);cursor:pointer}
.lc .er{color:#c0392b;font-size:12.5px;min-height:18px;margin-top:8px}.lc .h{color:#6f675f;font-size:11.5px;margin-top:8px}
.note{font-size:12px;color:var(--muted)}
svg text{fill:var(--muted);font:11px var(--fb)}
:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.tabs{order:3;flex:1 1 100%}
@media(min-width:701px){.tabs{flex-wrap:nowrap;gap:2px}.nv{padding:10px 9px;gap:6px}}
/* desktop and tablet: big icon with its name underneath, so every tab is clear and still on one row */
@media(min-width:701px){.nv{flex-direction:column;justify-content:center;gap:4px;padding:8px 8px 7px;min-width:62px;font-size:11.5px;line-height:1.15}.nv svg{width:26px;height:26px}.tabs{overflow-x:auto}}
@media(min-width:701px) and (max-width:1300px){.nv{min-width:54px;padding:8px 5px 7px;font-size:10.5px}.nv svg{width:24px;height:24px}}
@media(max-width:820px){
  .work{padding:12px max(14px,env(safe-area-inset-right,0px)) 28px max(14px,env(safe-area-inset-left,0px))}
  .hero .big{font-size:44px}
  .bt h1{font-size:19px}.nv{padding:11px 13px}
}
@media(max-width:640px){
  .cd,.av,.bt small{display:none}.appbar{gap:4px 10px}.who{max-width:120px}
  .appbar .ib{padding:6px 9px}.nv{padding:11px 12px;font-size:12.5px}
  .card{padding:12px 13px}.stat .sv{font-size:23px}
  input,select,textarea{font-size:16px}  /* stops iOS zooming into fields */
  .fl{gap:6px}.fl select,.fl input{flex:1 1 140px}
  .btn{padding:10px 14px}
}
@media(max-width:380px){.nv span{display:none}.nv{padding:11px 14px}}

/* local app additions */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:8px 16px;border-radius:99px;font-weight:600;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast.err{background:var(--red);color:#fff}
.in.ok{border-color:var(--green)}.in.bad{border-color:var(--red)}
.empty{padding:28px;text-align:center;color:var(--muted)}
.pg{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:10px}

/* statistic cards */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:10px;margin-bottom:12px}
.stat{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 12px 10px;min-width:0;overflow:hidden;animation:rise .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 45ms)}
.stat::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--or)}
.stat.m::before{background:var(--m)}.stat.f::before{background:var(--f)}.stat.g::before{background:var(--green)}.stat.w::before{background:var(--red)}
.stat .sl{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600}
.stat .sv{font:800 27px/1.15 var(--fd);font-variant-numeric:tabular-nums;margin:2px 0}
.stat .ss{font-size:12px;color:var(--muted);min-height:1.3em}
.stat .sb{height:5px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:7px}
.stat .sb i{display:block;height:100%;width:0;background:var(--or);border-radius:3px;transition:width .9s cubic-bezier(.2,.7,.2,1)}
.stat.m .sb i{background:var(--m)}.stat.f .sb i{background:var(--f)}.stat.g .sb i{background:var(--green)}.stat.w .sb i{background:var(--red)}
.stat.click{cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
.stat.click:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.14);border-color:var(--or)}
.stat.click:active{transform:translateY(-1px) scale(.99)}
.stat.on{border-color:var(--or);box-shadow:inset 0 0 0 2px var(--or);background:var(--or-soft)}
.dists{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:10px;margin-bottom:12px}
.dist .gsplit{display:flex;height:38px;border-radius:9px;overflow:hidden;gap:2px;margin-top:6px}
.seg{border:0;color:#fff;font:700 13px var(--fb);cursor:pointer;width:0;min-width:0;white-space:nowrap;overflow:hidden;padding:0 8px;transition:width .9s cubic-bezier(.2,.7,.2,1),filter .15s,box-shadow .15s}
.seg.m{background:var(--m)}.seg.f{background:var(--f)}
.seg:hover{filter:brightness(1.12)}.seg.on{box-shadow:inset 0 0 0 3px var(--fg)}
.arow{display:grid;grid-template-columns:50px minmax(0,1fr) 96px;gap:8px;align-items:center;margin:3px 0;padding:3px 6px;border-radius:7px;cursor:pointer;font-variant-numeric:tabular-nums;transition:background .15s}
.arow:hover{background:var(--s2)}.arow.on{background:var(--or-soft);box-shadow:inset 0 0 0 1.5px var(--or)}
.arow .bar{height:12px}.arow .bar i{width:0;transition:width .9s cubic-bezier(.2,.7,.2,1)}
.arow em{font-style:normal;color:var(--muted);text-align:right;font-size:12px}
@keyframes rise{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:900px){.dists{grid-template-columns:minmax(0,1fr)}.stats{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}
@media (prefers-reduced-motion:reduce){.stat{animation:none}.stat .sb i,.seg,.arow .bar i,.stat.click{transition:none}}
input,select,textarea{max-width:100%}
input[type=file].in{width:100%}

/* relation label, visits, household phones */
.rel{display:inline-block;background:var(--or-soft);color:var(--or-d);border-radius:5px;padding:0 6px;font-size:11px;font-weight:700;margin-right:4px}
.vis{margin:-2px 0 8px}.vb{border:0;background:var(--blue-soft);color:var(--m);border-radius:99px;padding:3px 12px;font:600 12px var(--fb);cursor:pointer;max-width:100%;text-align:left}
.hist{background:var(--s2);border-radius:8px;padding:6px 10px;margin-bottom:8px;font-size:12px}.hv{padding:3px 0;border-top:1px solid var(--line)}.hv:first-child{border-top:0}
.hp{border-top:1px dashed var(--line);margin-top:8px;padding-top:8px}.hpl{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.pchip{display:inline-flex;align-items:center;gap:6px;background:var(--green-soft);color:var(--green);border-radius:99px;padding:2px 4px 2px 10px;font-weight:600;font-size:12px}
.pchip button{border:0;background:rgba(0,0,0,.12);color:inherit;border-radius:50%;width:20px;height:20px;cursor:pointer;line-height:1}
.hpa{display:flex;gap:6px;flex-wrap:wrap}.hpa input{flex:1 1 130px}.hpa select{flex:0 1 130px}
.va{border-top:1px dashed var(--line);margin-top:8px;padding-top:8px;display:grid;gap:6px}.vbtns{display:flex;gap:6px;flex-wrap:wrap}.vbtns .btn{flex:1 1 auto;white-space:nowrap}.vbtns .btn:first-child{flex:2 1 100%}
.say{border:0;background:transparent;color:var(--or);cursor:pointer;font-size:17px;line-height:0;padding:2px 6px;border-radius:6px;vertical-align:middle;min-width:28px;min-height:28px}.say:hover{background:var(--or-soft)}

.mhd{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap}.mhd h2{margin:0}.mhd .in{max-width:240px}
.mup{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;padding:10px;background:var(--s2);border-radius:10px}.mup .in{flex:1 1 150px}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:12px}
.mc{border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;gap:4px;align-content:start;background:var(--surface)}
.mt{aspect-ratio:4/3;background:var(--s2);border-radius:8px;overflow:hidden;display:grid;place-items:center}.mt img,.mt video{width:100%;height:100%;object-fit:contain}.mt audio{width:94%}.mic{font-size:38px}
.mb{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}.mb .btn{text-decoration:none;font-size:12px;padding:6px 10px}
.cp{text-align:center;font-size:12px;padding:6px 10px;color:var(--muted,#8a7f76);flex:none}.cp a{color:inherit;font-weight:700}
body.tvmode .cp{background:#0a0e1f;color:#9aa6d6}

/* master plan and tasks */
.pbar{height:8px;border-radius:99px;background:var(--s2);overflow:hidden;margin:8px 0}.pbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--or),#1fb86f);transition:width .6s}
.phs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:10px 0}
.ph{border:1px solid var(--line);border-left:4px solid var(--c);border-radius:10px;background:var(--surface);padding:8px 10px;text-align:left;cursor:pointer;font-family:inherit;color:inherit}.ph.on{background:var(--or-soft)}.ph b{display:block;font:800 20px var(--fd)}.ph span{font-size:12px;color:var(--muted,#7a6f66)}
.tks{display:grid;gap:8px;margin-top:10px}.tk{border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.tk>header{display:flex;gap:10px;justify-content:space-between;align-items:flex-start;padding:10px 12px;cursor:pointer}.tkm{min-width:0;flex:1}.tkm b{display:block}
.tkm .note{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:3px}.sub{display:flex;gap:8px;align-items:center}.sub .pbar{flex:1;max-width:180px;margin:4px 0}
.ptag{background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--c);border-radius:99px;padding:0 8px;font-weight:700;font-size:11px}.tdue.late,.lt{color:#d6336c;font-weight:700}
.ts{width:auto;flex:none}.st{font-size:12px;font-weight:700}.tkb{padding:4px 12px 12px;border-top:1px solid var(--line)}
.step{display:flex;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);align-items:flex-start}.step input{margin-top:3px;width:18px;height:18px}.step small{display:block}
.adm,.upd{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.adm .in{flex:1 1 170px}.upd textarea{width:100%}.ups{margin-top:10px;display:grid;gap:8px}
.u{background:var(--s2);border-radius:8px;padding:8px 10px;font-size:13px}.u img{display:block;max-width:100%;max-height:260px;border-radius:8px;margin-top:6px}

.mt img{cursor:zoom-in}
.lbx{position:fixed;inset:0;z-index:100;background:rgba(5,6,12,.92);display:grid;grid-template-rows:1fr auto;padding:12px;animation:lbin .18s}@keyframes lbin{from{opacity:0}}
.lbx img{width:100%;height:100%;object-fit:contain;min-height:0;border-radius:6px}
.lbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;color:#fff;padding-top:10px}.lbar .note{color:#c9c2ba}.lbar div{display:flex;gap:8px}
.lx,.ln{position:absolute;border:0;background:rgba(255,255,255,.16);color:#fff;border-radius:50%;width:44px;height:44px;font-size:28px;cursor:pointer;line-height:1;z-index:2}.lx{top:12px;right:12px}.ln{top:50%;transform:translateY(-50%)}.ln.l{left:10px}.ln.r{right:10px}

.mdl{position:fixed;inset:0;z-index:100;background:rgba(10,8,6,.62);backdrop-filter:blur(3px);display:grid;place-items:center;padding:14px;overflow:auto;animation:lbin .18s}
.mbox{background:var(--surface);color:var(--text,inherit);border:1px solid var(--line);border-radius:18px;width:min(560px,100%);padding:20px;display:grid;gap:12px;box-shadow:0 24px 70px rgba(0,0,0,.45);max-height:calc(100dvh - 28px);overflow:auto}
.mbox .mh{display:flex;justify-content:space-between;align-items:center}.mbox h2{margin:0;font:800 20px var(--fd)}
.mx{border:0;background:var(--s2);color:inherit;border-radius:50%;width:34px;height:34px;font-size:22px;cursor:pointer;line-height:1}
.mbox label{display:grid;gap:5px;font-weight:700;font-size:13px}.mbox label .in{font-weight:400;width:100%}
.mg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}@media(max-width:480px){.mg{grid-template-columns:minmax(0,1fr)}}
.mf{display:flex;gap:8px;justify-content:flex-end}.mbox .er{min-height:18px;color:#d6336c;font-size:13px;font-weight:600}
body.offline::before{content:"No signal. Your changes are kept on this phone and upload by themselves when you are back online.";position:fixed;top:0;left:0;right:0;z-index:200;background:#b02a37;color:#fff;font:600 13px var(--fb);text-align:center;padding:5px}

/* map */
.wmap{height:min(66vh,620px);min-height:340px;border-radius:12px;overflow:hidden;border:1px solid var(--line);margin-top:10px;z-index:0}.wmap.placing{cursor:crosshair;outline:3px solid var(--or)}
.mstats{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}.mstats div{background:var(--s2);border-radius:10px;padding:8px 14px}.mstats b{display:block;font:800 20px var(--fd)}.mstats span{font-size:12px;color:var(--muted,#7a6f66)}
.mloose{margin:8px 0}.mleg{display:flex;gap:6px;align-items:center;font-size:12px;margin-top:8px;flex-wrap:wrap}.mleg i{width:12px;height:12px;border-radius:50%;display:inline-block;margin-left:8px}
.bt{background:transparent;border:0;box-shadow:none;color:#111;font-weight:800;font-size:11px}.bt::before{display:none}

/* settings */
.sg{border-top:1px solid var(--line);padding:14px 0}.sg h3{margin:0 0 10px;font:800 15px var(--fd)}
.sr{display:grid;gap:4px;margin-bottom:12px;max-width:520px}.sr.wide{max-width:none}.sr label{display:grid;gap:5px;font-weight:700;font-size:13px}.sr label .in{font-weight:400;width:100%}
.msed{display:grid;gap:8px;margin-bottom:8px}.msr{display:grid;grid-template-columns:minmax(0,1fr) 170px 150px 34px;gap:8px;align-items:center;max-width:760px}
@media(max-width:620px){.msr{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 34px}.msr [data-ml]{grid-column:1/-1}}
.shift{display:flex;gap:8px;align-items:flex-start;font-size:13px;background:var(--or-soft);border-radius:10px;padding:10px 12px;margin-top:6px}.shift input{margin-top:3px}
#se{color:#d6336c;font-weight:600;min-height:20px;margin-top:8px}
.tms{margin-bottom:14px}.msl{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.ms{flex:0 0 auto;min-width:150px;background:var(--card2);border:1px solid var(--tl);border-left:4px solid var(--or);border-radius:12px;padding:8px 12px}.ms b{display:block;font:800 18px var(--fd);color:var(--gold)}.ms span{display:block;font-weight:600;font-size:13px}.ms small{color:var(--tm)}
.ms.past{opacity:.55;border-left-color:var(--gr)}.ms.past b{color:var(--gr)}.ms.now{border-color:var(--gold)}

/* calling */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-top:10px}
.cb{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:6px;background:var(--surface)}.cb b{font:800 16px var(--fd)}.cb .btn{justify-self:start}
.chk{display:grid;gap:6px}.chk .shift{margin:0;font-weight:400}
.mbox .chk label{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:13px}.mbox .chk input{margin-top:3px;width:18px;height:18px;flex:none}
.bp{border:2px solid #fff;border-radius:50%;color:#111;font:800 12px var(--fb);display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.4);cursor:grab}

/* phone-app layout for booth incharges, agents and supporters */
body.appmode{background:#1d140d}
body.appmode .app{max-width:720px;margin:0 auto;background:var(--bg);box-shadow:0 0 0 1px rgba(0,0,0,.2),0 0 40px rgba(0,0,0,.35);position:relative}
body.appmode .tabs,body.appmode .appbar .cd,body.appmode .appbar .av,body.appmode #out,body.appmode #theme,body.appmode .app>.cp{display:none}
body.appmode .appbar{padding-bottom:0;gap:0 10px;flex-wrap:wrap;align-items:center}body.appmode .brand{padding-bottom:6px;flex:1 1 0}body.appmode .bt small{display:block}
body.appmode .appbar .r{padding-bottom:6px;min-width:0;flex:none}body.appmode .who{max-width:46vw;font-size:12px}
body.appmode .work{padding:12px 14px calc(84px + env(safe-area-inset-bottom,0px));overscroll-behavior:contain}
body.appmode .btn,body.appmode select.in,body.appmode input.in{min-height:44px}body.appmode .btn{border-radius:12px}
body.appmode a,body.appmode button{-webkit-tap-highlight-color:transparent}
#tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(720px,100%);z-index:50;display:grid;grid-template-columns:repeat(var(--n,5),1fr);background:var(--surface);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 24px rgba(0,0,0,.18)}
#tabbar a,#tabbar button{display:grid;justify-items:center;gap:3px;padding:6px 2px;border:0;background:none;color:var(--muted,#7a6f66);font:700 11px var(--fb);text-decoration:none;border-radius:12px;min-height:52px;cursor:pointer}
#tabbar svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#tabbar a.on{color:var(--or-d);background:var(--or-soft)}
.sheet-bg{position:fixed;inset:0;z-index:120;background:rgba(10,8,6,.55);display:flex;align-items:flex-end;justify-content:center;animation:lbin .18s}
.sheet{background:var(--surface);color:inherit;width:min(720px,100%);border-radius:22px 22px 0 0;padding:10px 16px calc(16px + env(safe-area-inset-bottom,0px));max-height:85dvh;overflow:auto;animation:sheetup .22s}@keyframes sheetup{from{transform:translateY(30px);opacity:0}}
.sheet .grab{width:42px;height:5px;border-radius:3px;background:var(--line);margin:2px auto 12px}.who2{display:grid;margin-bottom:10px}.who2 span{font-size:13px;color:var(--muted,#7a6f66)}
.sg2{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.sg2 a{display:grid;justify-items:center;gap:6px;padding:14px 6px;background:var(--s2);border-radius:14px;color:inherit;text-decoration:none;font:700 12px var(--fb);min-height:76px}
.sg2 svg{width:26px;height:26px;stroke:var(--or-d);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sa{display:grid;gap:8px;margin-top:14px}.sheet .cp{margin-top:10px}
.inst .ibox{display:flex;gap:14px;align-items:center}.inst .ibox img{width:64px;height:64px;border-radius:16px;flex:none;object-fit:contain;background:#fff;padding:3px}.inst .ibox p{margin:0;font-size:14px}.inst ol{margin:0;padding-left:20px;display:grid;gap:4px}

/* app name, welcome line and cheer ticker */
.btx{display:none}body.appmode .bt{display:none}body.appmode .btx{display:block;min-width:0}
.btx h1{font:800 20px/1.1 var(--fd);margin:0;color:#fff;white-space:nowrap}.btx small{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.88;font-weight:700}
#greet{display:none}body.appmode #greet{display:block;flex:0 0 calc(100% + 32px);max-width:calc(100% + 32px);margin:0 -16px;padding:0}
#greet .wl{padding:0 16px 6px;font-size:15px;color:#fff}#greet .wl b{font-weight:800}#greet .wl em{font-style:normal;background:rgba(255,255,255,.2);border-radius:99px;padding:1px 9px;font-size:12px;font-weight:700;margin-left:4px}
.mq{overflow:hidden;background:rgba(0,0,0,.22);white-space:nowrap}.mqi{display:inline-flex;animation:mq 55s linear infinite;padding:7px 0}
.mqi span{padding:0 28px;font-size:13px;font-weight:600;color:#fff7ea}.mqi span::before{content:"✦";margin-right:28px;color:#ffd23f}
@keyframes mq{to{transform:translateX(-50%)}}

/* phones: logo and title on the left, buttons on the right, one line; the tab row is the only other line */
@media(max-width:640px){body:not(.appmode) .appbar{flex-wrap:wrap;gap:0 8px}body:not(.appmode) .brand{flex:1 1 0;padding-bottom:6px}
  body:not(.appmode) .appbar .r{flex:none;margin-left:0;padding-bottom:6px;gap:6px}body:not(.appmode) .who{display:none}body:not(.appmode) .appbar .cd{display:none}}

/* phone numbers and tables on phones */
.pl{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 10px;border-radius:10px;background:#e3f7e8;color:#1a7f4b;font:700 12px var(--fb);text-decoration:none;white-space:nowrap}
.pl span{display:none}@media(min-width:701px){.pl span{display:inline}}
.lgl,#lang{border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.18);color:#fff;border-radius:99px;padding:6px 12px;font:700 13px var(--fb);cursor:pointer;white-space:nowrap}
.lgl{display:block;margin:12px auto 0;color:#6f675f;border-color:#d9d1c7;background:#faf7f2}
@media(max-width:700px){
  .mem{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.mem>div:first-child{flex:1 1 100%}.mem .in{flex:1 1 140px;min-height:44px}.mem select{flex:1 1 100%;min-height:44px}
  .tw{max-height:none!important;overflow:visible}.tw table,.tw tbody{display:block}.tw thead{display:none}
  .tw tr.rw{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding:12px;margin:0 0 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
  .tw td{display:block;padding:0;border:0;text-align:left}.tw td::before{content:attr(data-label);display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
  .tw td:has(>b),.tw td:has(input),.tw td:has(select){grid-column:1/-1}.tw td .in{width:100%!important;min-height:44px}.tw td.num{text-align:left}
  .tw td:has(input[type=checkbox]){display:flex;align-items:center;gap:10px}.tw td input[type=checkbox]{width:26px;height:26px}
  .card:has(.tw){background:transparent;border:0;box-shadow:none;padding:0}
}

/* voters: search bar, collapsible filters, voter cards on phones; the table stays for wide screens */
.vtop{display:flex;gap:8px;margin-bottom:8px}.vtop .in{flex:1;min-width:0}.vtop .btn{flex:none}
.vlist,.vcount,#ftog{display:none}.vstats>summary{cursor:pointer;font:700 14px var(--fb);padding:8px 0}.vstats[open]>summary{margin-bottom:8px}
@media(min-width:701px){.vtop #q{max-width:360px}.vstats>summary{display:none}}
@media(max-width:700px){
  #ftog{display:inline-flex}.fl{display:none}.fl.open{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.fl .in{width:100%;min-height:44px}.fl .btn{grid-column:1/-1;text-align:center}
  .vtable{display:none}.vcount{display:block;margin:2px 2px 8px}.vlist{display:grid;gap:10px}
  .vc{background:var(--surface);border:1px solid var(--line);border-left:5px solid #b9b0a5;border-radius:14px;padding:12px;display:grid;gap:8px}
  
  .vh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.vh b{font-size:17px;line-height:1.3}.sn{background:var(--s2);border-radius:8px;padding:1px 8px;font-size:12px;font-weight:700;color:var(--muted)}
  .vr{font-size:14px}.vm{display:flex;flex-wrap:wrap;gap:6px}.vm span{background:var(--s2);border-radius:99px;padding:2px 10px;font-size:12px;font-weight:600}.vm .vid{font-family:ui-monospace,monospace;font-weight:500}
  .vp{display:flex;gap:8px;align-items:center}.vp .in{flex:1;min-width:0;min-height:46px;font-size:16px}.vs .in{width:100%;min-height:46px}
  .vstats{margin-top:14px}
}
@media(max-width:520px){body.appmode .who{display:none}body.appmode .btx small{white-space:nowrap}#lang{padding:6px 10px}}

/* polling cards: one big tap target per voter */
.vbig{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;border-radius:14px;background:var(--s2);border:2px solid var(--line);font:800 17px var(--fb);cursor:pointer;user-select:none}
.vbig input{position:absolute;opacity:0;width:1px;height:1px}.vbig.on{background:#1fb86f;border-color:#1fb86f;color:#fff}.pv.done{opacity:.8;border-left-color:#1fb86f}
.pn{font:700 16px ui-monospace,monospace;flex:1}
@media(max-width:700px){.pv .vm{display:flex}}

/* voter card: phone box and status picker */
.vc{--c:#b9b0a5;border-left-color:var(--c)}.vc.st-c{--c:#2f80ed}.vc.st-s{--c:#1fb86f}.vc.st-u{--c:#f0a020}.vc.st-o{--c:#d6336c}.vc.st-t{--c:#8a5cf6}
@media(max-width:700px){
  .vp .in{border:2px solid var(--line);border-radius:14px;background:var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/></svg>") no-repeat 13px center;padding:0 8px 0 42px;font:700 17px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;min-height:50px;min-width:0;width:100%}
  .vp .in.ok{border-color:#1fb86f}.vp .in::placeholder{font:500 15px var(--fb);letter-spacing:0;color:var(--muted)}.vp .in:focus{outline:0;border-color:var(--or);box-shadow:0 0 0 4px var(--or-soft)}
  .vs select{appearance:none;-webkit-appearance:none;width:100%;min-height:50px;border-radius:14px;border:2px solid var(--c);color:var(--fg);font:800 16px var(--fb);padding:0 44px 0 16px;cursor:pointer;
    background:color-mix(in srgb,var(--c) 14%,var(--surface)) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 14px center}
  .vs select:focus{outline:0;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 25%,transparent)}
  .vp .pl{min-height:50px;min-width:46px;padding:0;justify-content:center;border-radius:14px;font-size:20px;flex:none}.vlist{grid-template-columns:minmax(0,1fr)}
}

/* expenses, issues, day plan, war room */
.xlim{margin:10px 0}.xl1{font-size:17px}.xl1 b{font:800 22px var(--fd)}.xlist{display:grid;gap:8px;margin-top:10px}
.xr{display:grid;grid-template-columns:110px minmax(0,1fr) auto auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface)}
.xm b{display:block;font:800 17px var(--fd)}.xm span{font-size:11px;color:var(--muted)}.xp img{width:52px;height:52px;object-fit:cover;border-radius:8px;display:block}.xa{display:flex;gap:6px}
@media(max-width:700px){.xr{grid-template-columns:minmax(0,1fr) auto}.xm{grid-column:1/-1;display:flex;gap:10px;align-items:baseline}.xa{grid-column:1/-1}.xa .btn{flex:1}}
.iss{padding:12px;display:grid;gap:6px}.ish{display:flex;justify-content:space-between;gap:8px;align-items:center}.iss p{margin:0;font-size:15px}.ip{max-width:100%;max-height:240px;border-radius:10px;display:block}.iss.resolved{opacity:.7}
.bgap{display:grid;gap:6px;margin-top:12px}.bg{display:grid;grid-template-columns:70px minmax(0,1fr) 90px;gap:10px;align-items:center;font-size:13px}.bg .pbar{margin:0}.bg b{text-align:right}
.sug,.stops{display:grid;gap:8px;margin-top:8px}.sg3{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-left:5px solid var(--or);border-radius:12px;padding:10px 12px;background:var(--surface)}
.sg3.rumour{border-left-color:#d6336c}.sg3.listen{border-left-color:#38b6ff}.sg3.undecided{border-left-color:#f0a020}.sg3 .mb{display:flex;gap:6px;flex-wrap:wrap}.sg3 .mb .btn{text-decoration:none;font-size:13px}
.stp{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface)}.stp label{display:flex;gap:10px;align-items:flex-start}.stp input{width:20px;height:20px;margin-top:2px}.stp.done b{text-decoration:line-through;opacity:.6}
.hrs{display:flex;gap:6px;align-items:flex-end;height:150px;margin-top:10px}.hr{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;font-size:11px}.hr i{width:100%;max-width:34px;background:linear-gradient(var(--or),#ffb347);border-radius:6px 6px 0 0;display:block}.hr span{color:var(--muted)}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:10px}.wb{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface);display:grid;gap:4px}.wb.bad{border-color:#d6336c}
.wh{display:flex;justify-content:space-between}.wh b{font:800 16px var(--fd)}.wf{color:#d6336c;font-weight:700;font-size:12px}
.ci{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px;border-radius:12px;background:var(--or-soft)}.ci.ok{background:#e3f7e8;color:#1a7f4b}.ci .btn{flex:1 1 200px;min-height:54px;font-size:16px}
.tl{display:grid;gap:8px;margin-top:10px}.tli{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface)}.tli>div{flex:1 1 150px}.tli.sent{opacity:.65}

/* ---- party looks: the accent, rail and soft tints change; layout and neutrals stay the same ---- */
:root[data-party="tdp"]{--or:#d9232d;--or-d:#a8121c;--or-soft:#fff2a8;--or-deep:#7d0d14;--rail:#9d1018;--rail-fg:#fff3b0;--rail-on:#c01a24}
:root[data-party="ysrcp"]{--or:#1b6cc4;--or-d:#0f4f97;--or-soft:#e0eefc;--or-deep:#0b3a70;--rail:#0d4a93;--rail-fg:#e4f1ff;--rail-on:#1b6cc4}
@media (prefers-color-scheme:dark){
  :root[data-party="tdp"]:not([data-theme="light"]){--or:#ff5c63;--or-d:#ffd84a;--or-soft:#3d3510;--rail:#b3151f;--rail-fg:#fff1a0;--rail-on:#d9232d}
  :root[data-party="ysrcp"]:not([data-theme="light"]){--or:#5aa2f0;--or-d:#9ccbff;--or-soft:#132b46;--rail:#0d4a93;--rail-fg:#e4f1ff;--rail-on:#1b6cc4}}
:root[data-party="tdp"][data-theme="dark"]{--or:#ff5c63;--or-d:#ffd84a;--or-soft:#3d3510;--rail:#b3151f;--rail-fg:#fff1a0;--rail-on:#d9232d}
:root[data-party="ysrcp"][data-theme="dark"]{--or:#5aa2f0;--or-d:#9ccbff;--or-soft:#132b46;--rail:#0d4a93;--rail-fg:#e4f1ff;--rail-on:#1b6cc4}
:root[data-party="tdp"] .nv.on{background:var(--bg);color:#a8121c}:root[data-party="tdp"] .pbar i{background:linear-gradient(90deg,#d9232d,#f5d800)}
:root[data-party="ysrcp"] .pbar i{background:linear-gradient(90deg,#1b6cc4,#17803d)}
:root[data-party="tdp"] .lotus,:root[data-party="ysrcp"] .lotus{border-color:#fff}
:root[data-party="tdp"] .login{background:radial-gradient(circle at 18% 12%,#ffe35a,#e11d2a 50%,#7d0d14)}
:root[data-party="ysrcp"] .login{background:radial-gradient(circle at 18% 12%,#5aa2f0,#1b6cc4 48%,#0b3a70)}
:root[data-party="tdp"] .go{background:#d9232d}:root[data-party="ysrcp"] .go{background:#1b6cc4}

:root[data-party] .bt small,:root[data-party] .btx small{color:var(--rail-fg);opacity:.9}
:root[data-party="tdp"] .nv.on{background:var(--bg);color:var(--or)}:root[data-party="ysrcp"] .nv.on{background:var(--bg);color:var(--or)}
:root[data-party="tdp"] .appbar{border-bottom:4px solid #f5d800}:root[data-party="ysrcp"] .appbar{border-bottom:4px solid #17a04a}

/* settings: two columns of cards on wide screens, one on phones */
.sgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:12px;align-items:start}
.sgrid .sg{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--surface)}.sgrid .sg.span{grid-column:1/-1}.sgrid .sr{max-width:none}.sgrid .sg h3{margin-bottom:12px}
@media(max-width:900px){.sgrid{grid-template-columns:minmax(0,1fr)}}

/* TDP: yellow first, red as the accent (the party badge is yellow with a red ring) */
:root[data-party="tdp"],:root[data-party="tdp"][data-theme="dark"]{--rail:#f5c400;--rail-on:#ffe21f;--rail-fg:#5c0a10}
@media (prefers-color-scheme:dark){:root[data-party="tdp"]:not([data-theme="light"]){--rail:#f5c400;--rail-on:#ffe21f;--rail-fg:#5c0a10}}
:root[data-party="tdp"] .appbar{background:linear-gradient(100deg,#f5c400,#ffe21f 60%,#ffd000);border-bottom:4px solid #d9232d;color:#5c0a10}
:root[data-party="tdp"] .bt h1,:root[data-party="tdp"] .btx h1,:root[data-party="tdp"] .appbar .who{color:#5c0a10}
:root[data-party="tdp"] .bt small,:root[data-party="tdp"] .btx small,:root[data-party="tdp"] #greet .wl{color:#7d0d14}
:root[data-party="tdp"] .nv{color:#5c0a10}:root[data-party="tdp"] .nv:hover{background:rgba(125,13,20,.12);color:#5c0a10}
:root[data-party="tdp"] .nv.on{background:var(--bg);color:#d9232d}
:root[data-party="tdp"] .appbar .ib,:root[data-party="tdp"] #lang{background:rgba(92,10,16,.1);border-color:rgba(92,10,16,.35);color:#5c0a10}
:root[data-party="tdp"] .appbar .cd{background:#d9232d;color:#fff}
:root[data-party="tdp"] .appbar .btn{background:#d9232d;color:#fff}
:root[data-party="tdp"] #greet .wl em{background:rgba(92,10,16,.15);color:#5c0a10}
:root[data-party="tdp"] .mq{background:#d9232d}:root[data-party="tdp"] .mqi span{color:#fff7c2}:root[data-party="tdp"] .mqi span::before{color:#ffe21f}
:root[data-party="tdp"] #tabbar a.on{color:#d9232d;background:#fff2a8}
:root[data-party="tdp"] .login{background:radial-gradient(circle at 18% 12%,#fff27a,#f5c400 50%,#b8860b)}
:root[data-party="tdp"] .lc .go{background:#d9232d}
:root[data-party="tdp"] .pbar i{background:linear-gradient(90deg,#f5d800,#d9232d)}

/* independent candidate: the three colours the admin chose arrive as --p1 (main), --p2 (second), --p3 (buttons) */
:root[data-party="independent"]{--rail:var(--p1);--rail-on:color-mix(in srgb,var(--p1) 82%,#fff);--rail-fg:var(--p1fg);--or:var(--p3);--or-d:color-mix(in srgb,var(--p3) 75%,#000);--or-soft:color-mix(in srgb,var(--p2) 28%,#fff)}
@media (prefers-color-scheme:dark){:root[data-party="independent"]:not([data-theme="light"]){--or-d:color-mix(in srgb,var(--p3) 55%,#fff);--or-soft:color-mix(in srgb,var(--p2) 22%,#1c1814)}}
:root[data-party="independent"][data-theme="dark"]{--or-d:color-mix(in srgb,var(--p3) 55%,#fff);--or-soft:color-mix(in srgb,var(--p2) 22%,#1c1814)}
:root[data-party="independent"] .appbar{background:linear-gradient(100deg,var(--p1),var(--rail-on));border-bottom:4px solid var(--p2);color:var(--p1fg)}
:root[data-party="independent"] .bt h1,:root[data-party="independent"] .btx h1,:root[data-party="independent"] .appbar .who,:root[data-party="independent"] .bt small,:root[data-party="independent"] .btx small,:root[data-party="independent"] #greet .wl,:root[data-party="independent"] .nv{color:var(--p1fg)}
:root[data-party="independent"] .nv:hover{background:color-mix(in srgb,var(--p1fg) 18%,transparent)}:root[data-party="independent"] .nv.on{background:var(--bg);color:var(--or)}
:root[data-party="independent"] .appbar .ib,:root[data-party="independent"] #lang{background:color-mix(in srgb,var(--p1fg) 14%,transparent);border-color:color-mix(in srgb,var(--p1fg) 40%,transparent);color:var(--p1fg)}
:root[data-party="independent"] .appbar .cd{background:var(--p2);color:var(--p2fg)}:root[data-party="independent"] .appbar .btn{background:var(--p3);color:var(--p3fg)}
:root[data-party="independent"] .btn:not(.g){background:var(--p3);color:var(--p3fg)}
:root[data-party="independent"] .mq{background:color-mix(in srgb,var(--p1) 70%,#000)}:root[data-party="independent"] .mqi span{color:#fff}:root[data-party="independent"] .mqi span::before{color:var(--p2)}
:root[data-party="independent"] #tabbar a.on{color:var(--or);background:var(--or-soft)}
:root[data-party="independent"] .login{background:radial-gradient(circle at 18% 12%,color-mix(in srgb,var(--p2) 70%,#fff),var(--p1) 55%,color-mix(in srgb,var(--p1) 55%,#000))}
:root[data-party="independent"] .lc .go{background:var(--p3);color:var(--p3fg)}:root[data-party="independent"] .pbar i{background:linear-gradient(90deg,var(--p2),var(--p3))}
.lgbox{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.lgbox img{width:64px;height:64px;object-fit:contain;border-radius:50%;background:#fff;border:1px solid var(--line)}
.colorin{width:90px;height:44px;padding:2px;cursor:pointer}

/* the three parts of the election */
#phases{order:2;flex:1 1 100%;display:flex;gap:6px;padding:0 0 8px}
#phases button{flex:1 1 0;max-width:230px;border:2px solid color-mix(in srgb,var(--rail-fg) 45%,transparent);background:transparent;color:var(--rail-fg);border-radius:99px;padding:7px 14px;font:800 13.5px var(--fb);cursor:pointer;white-space:nowrap}
#phases button.on{background:var(--rail-fg);color:var(--rail)}
:root[data-party="tdp"] #phases button.on{background:#5c0a10;color:#ffe21f}:root[data-party="independent"] #phases button.on{background:var(--p1fg);color:var(--p1)}
@media(max-width:700px){#phases{padding-bottom:6px}#phases button{padding:6px 8px;font-size:12px}}
.danger{border:2px solid #d6336c}.danger-btn{background:#d6336c!important;color:#fff!important}.cform{display:grid;gap:10px;max-width:420px;margin-top:12px}.cform label{display:grid;gap:5px;font-weight:700}
.tmsg{display:grid;gap:5px;margin:12px 0;font-weight:700}.tmsg .note{font-weight:400}.thx.done{opacity:.65}.thx{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:10px 12px}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}.rb{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px 8px;align-items:end;background:var(--surface)}
.rb b,.rb .note{grid-column:1/-1}.rb .btn{grid-column:1/-1}.rb label{display:grid;gap:3px;font-size:11px;font-weight:700;color:var(--muted)}.rb .in{width:100%;min-height:40px}
@media print{.appbar,#tabbar,#phases,.cp,.btn,.chips,.xa,.mdl,.sheet-bg,.drw{display:none!important}html,body,.app,.work{height:auto!important;overflow:visible!important;background:#fff!important;color:#000!important;display:block!important}
  .card{border:0!important;box-shadow:none!important}.xr{break-inside:avoid;border:0;border-bottom:1px solid #ccc;border-radius:0;grid-template-columns:110px 1fr auto}.xp img{width:40px;height:40px}.xprint{display:block!important}}
.xprint{display:none;margin-bottom:12px}

/* sign-in screen: softer, rounder, party-coloured */
.lc{border-radius:30px;max-width:430px;padding:34px 30px 26px;box-shadow:0 30px 80px rgba(0,0,0,.35),0 2px 0 rgba(255,255,255,.6) inset;position:relative;overflow:hidden;animation:lcin .45s cubic-bezier(.2,.8,.2,1)}
@keyframes lcin{from{opacity:0;transform:translateY(18px) scale(.98)}}
.lc::before{content:"";position:absolute;inset:0 0 auto 0;height:7px;background:linear-gradient(90deg,var(--or-d),var(--or),var(--or-d))}
.lp{position:relative;display:inline-block;margin:6px 0 14px}.lp .c{width:116px;height:116px;border:4px solid #fff;box-shadow:0 0 0 4px var(--or),0 10px 24px rgba(0,0,0,.25)}
.lp .l{position:absolute;right:-18px;bottom:-6px;width:54px;height:54px;border:3px solid #fff;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.28);object-fit:contain}
.lc h1{font-size:23px;letter-spacing:-.01em}.lc .t{color:var(--or-d)}.lc .s{margin-bottom:20px;line-height:1.5}
.lc label{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#6f675f;margin:0 0 6px 4px}
.lc .pf{border:2px solid #e8e1d8;border-radius:16px;background:#faf7f2;transition:border-color .15s,box-shadow .15s}.lc .pf:focus-within{border-color:var(--or);box-shadow:0 0 0 4px color-mix(in srgb,var(--or) 20%,transparent);background:#fff}
.lc .pf input{border-radius:16px;font-size:16px;padding:13px 14px}.lc .pf span{padding-left:14px}
.lc .go{margin-top:18px;border-radius:16px;padding:15px;font-size:16px;background:linear-gradient(95deg,var(--or-d),var(--or));box-shadow:0 10px 24px color-mix(in srgb,var(--or) 40%,transparent);transition:transform .15s,box-shadow .15s}
.lc .go:hover{transform:translateY(-2px)}.lc .go:active{transform:none}
.lc .er{background:#fdecea;border-radius:12px;padding:0 12px;min-height:0}.lc .er:not(:empty){padding:8px 12px}
.lc .h{line-height:1.5}.lc .lgl{border-radius:99px;padding:7px 16px;margin-top:14px}
@media(max-width:480px){.lc{border-radius:26px;padding:30px 22px 22px}}
.lc .h a{color:var(--or-d);font-weight:700}

/* the legal expense limit, in red on top of the Expenses page */
.xbar{flex:none;display:flex;gap:6px 18px;flex-wrap:wrap;align-items:center;justify-content:center;background:#c1121f;color:#fff;text-decoration:none;padding:6px 14px;font:600 13px var(--fb);letter-spacing:.01em;border-bottom:1px solid rgba(0,0,0,.25)}
.xbar[hidden]{display:none}.xbar b{font-weight:800}.xbar.over{background:#7d0010;animation:xpulse 1.6s ease-in-out infinite}@keyframes xpulse{50%{background:#e5192b}}
body.tvmode .xbar,body.appmode .xbar{display:none}@media print{.xbar{display:none!important}}

/* Voter ID search */
.lkbox{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 12px;padding:14px 16px;border:2px solid var(--or);border-radius:16px;background:var(--surface);color:var(--fg);font:600 15px var(--fb);text-align:left;cursor:pointer;box-shadow:0 4px 14px color-mix(in srgb,var(--or) 18%,transparent)}
.lkbox span{font-size:20px}.lkbox b{font-weight:700}.lkbox:hover{background:var(--or-soft)}
.lkgreet{display:flex;align-items:center;gap:8px;width:calc(100% - 32px);margin:0 16px 8px;padding:11px 14px;border:0;border-radius:14px;background:rgba(255,255,255,.95);color:#201b17;font:600 14px var(--fb);cursor:pointer;text-align:left}
#lkb,#inst{white-space:nowrap}#inst[hidden]{display:none}body.appmode #lkb{display:none}
.lk{width:min(620px,100%)}.lkin{font:800 20px ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;min-height:56px;border:2px solid var(--or);border-radius:16px;width:100%}
.lkr{display:grid;gap:10px;margin-top:10px;max-height:60dvh;overflow:auto}.lkel{background:var(--or-soft);border-radius:14px;padding:12px 14px}
.mdl{grid-template-columns:minmax(0,1fr)}.mdl>.mbox{min-width:0;justify-self:center}.lkin{min-width:0;font-size:18px}.lk .vc{min-width:0}

/* ---- phone app feel ---- */
html,body{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body,button,a,select,label,input{touch-action:manipulation}
.app,.appbar,#greet,.mq{min-width:0;max-width:100%}.appbar{overflow:hidden}    /* the scrolling message must never widen the page */
.mq{contain:layout paint}
body.appmode #lkb,body.appmode #inst:not([hidden]){display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;font-size:19px}body.appmode #lkb .lbl,body.appmode #inst .lbl{display:none}
body.appmode .lkbox{display:none}
#greet{max-height:220px;transition:max-height .28s ease,opacity .2s;overflow:hidden}body.scrolled #greet{max-height:0;opacity:0}
.lkgreet{display:flex;align-items:center;gap:10px;width:calc(100% - 32px);margin:2px 16px 10px;padding:0 16px;height:50px;border:0;border-radius:25px;background:#fff;color:#6f675f;font:500 16px var(--fb);text-align:left;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.lkgreet svg{width:22px;height:22px;flex:none;stroke:var(--or);fill:none;stroke-width:2.4;stroke-linecap:round}.lkgreet span{flex:1;color:#6f675f}.lkgreet b{color:#201b17}.lkgreet em{font:700 13px ui-monospace,monospace;font-style:normal;color:#b5aca2}
body.appmode .work{scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
#view>*{animation:vin .22s ease both}@keyframes vin{from{opacity:0;transform:translateY(6px)}}
.btn:active,.chp:active,#tabbar a:active,#tabbar button:active,.lkgreet:active,.sg2 a:active{transform:scale(.96);transition:transform .08s}
#tabbar a,#tabbar button{min-height:56px}#tabbar svg{width:26px;height:26px}#tabbar{padding-top:4px}
body.appmode input,body.appmode select,body.appmode textarea{font-size:16px}
body.appmode ::selection{background:var(--or-soft)}
@media(prefers-reduced-motion:reduce){#view>*{animation:none}.work{scroll-behavior:auto}}

/* voter list and home screen */
.rtop{position:sticky;top:0;z-index:5;background:var(--bg);padding:2px 0 8px}.rtop .in{width:100%;min-height:50px;border-radius:25px;padding:0 20px;font-size:16px}
.rlist{display:grid;gap:8px}.rr{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;border:1px solid var(--line);border-left:5px solid var(--c,#b9b0a5);border-radius:14px;background:var(--surface);color:var(--fg);font:inherit;cursor:pointer;min-height:64px}
.rr.st-c{--c:#2f80ed}.rr.st-s{--c:#1fb86f}.rr.st-u{--c:#f0a020}.rr.st-o{--c:#d6336c}.rr.st-t{--c:#8a5cf6}.rr:active{background:var(--or-soft)}
.rs{flex:none;min-width:34px;text-align:center;background:var(--s2);border-radius:8px;padding:2px 6px;font-size:12px;font-weight:700;color:var(--muted)}
.rn{flex:1;min-width:0;display:grid;gap:2px}.rn b{font-size:17px;line-height:1.3}.rid{font:600 12.5px ui-monospace,Menlo,monospace;color:var(--muted);letter-spacing:.03em}.rc{font-size:24px;color:var(--muted)}
.rmore{width:100%;margin:12px 0;min-height:50px}
.htop{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px}.hdone{position:sticky;bottom:0;padding:10px 0 4px;background:linear-gradient(transparent,var(--bg) 40%)}.hdone .btn{width:100%;min-height:54px;font-size:16px}
.one .hc{box-shadow:none}.mem.pick{background:var(--or-soft);border-radius:10px;outline:2px solid var(--or)}

.stt{font:800 20px var(--fd)}.lgwalk{width:100%;min-height:50px;margin:0 0 12px}

/* voice typing and the language switch */
.vwrap{position:relative;display:block;width:100%;min-width:0}.vwrap .in{width:100%;padding-right:92px}.vwrap textarea.in{min-height:64px;padding-top:12px}
.vtools{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;gap:4px;align-items:center}.vwrap textarea+.vtools{top:26px}
.vmic,.vlang{border:0;border-radius:50%;width:38px;height:38px;cursor:pointer;font:700 13px var(--fb);display:grid;place-items:center}
.vmic{background:var(--or);color:#fff;font-size:20px}.vmic svg{pointer-events:none}.vlang{background:var(--s2);color:var(--fg);border:1px solid var(--line);width:34px;height:34px;font-size:12px}
.vmic.on{background:#d6336c;animation:micp 1.1s ease-in-out infinite}@keyframes micp{50%{box-shadow:0 0 0 9px rgba(214,51,108,.25)}}
.mem .vwrap{flex:1 1 100%}
#lang.seg2,#lang2.seg2{display:inline-flex;padding:3px;gap:2px}#lang.seg2 span,#lang2.seg2 span{padding:5px 11px;border-radius:99px;font-size:13px;line-height:1.1}
#lang.seg2 span.on{background:#fff;color:#5a2a00}#lang2.seg2 span.on{background:var(--or);color:#fff}
:root[data-party="tdp"] #lang.seg2 span.on{background:#5c0a10;color:#ffe21f}:root[data-party="independent"] #lang.seg2 span.on{background:var(--p1fg);color:var(--p1)}
.mid{display:flex;gap:10px;align-items:center;margin-top:3px}.mid .vid{font:700 13px ui-monospace,Menlo,monospace;letter-spacing:.05em;background:var(--s2);border-radius:8px;padding:2px 8px;color:var(--fg)}

/* dropdowns as bottom sheets in the phone-app layout */
.pkb{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer;color:var(--fg);font:600 16px var(--fb);min-height:48px;padding:0 40px 0 14px;
  background:var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 12px center;border:1.5px solid var(--line);border-radius:12px}
.pkb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pkb:active{background-color:var(--or-soft)}
.mem .pkb{flex:1 1 100%}.hpa .pkb{flex:0 1 130px}.vs .pkb,.lkr .vs .pkb{width:100%;min-height:50px;border:2px solid var(--c);font-weight:800;background-color:color-mix(in srgb,var(--c) 14%,var(--surface))}
.fl .pkb{flex:1 1 140px}.mbox .pkb{width:100%}
.pks{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}.pkt{font:800 16px var(--fd);margin:0 4px 8px}.pkl{display:grid;gap:6px}
.pko{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:0 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--fg);font:600 16px var(--fb);text-align:left;cursor:pointer}
.pko.on{border-color:var(--or);background:var(--or-soft)}.pko span{flex:1}.pko b{color:var(--or);font-size:18px}
.pkd{width:12px;height:12px;border-radius:50%;background:#b9b0a5;flex:none}.pkd:empty{}.pkd.st-c{background:#2f80ed}.pkd.st-s{background:#1fb86f}.pkd.st-u{background:#f0a020}.pkd.st-o{background:#d6336c}.pkd.st-t{background:#8a5cf6}

/* bigger, wider notes */
.vwrap textarea.in{min-height:96px;padding:12px 100px 12px 14px;font-size:16px;line-height:1.45;resize:vertical;border-radius:14px}
.vwrap textarea+.vtools{top:8px;transform:none;flex-direction:column;gap:6px}
.mem .vwrap,.hc .vwrap{flex:1 1 100%;width:100%}.vlang{font-size:12px}

.lkin{font:600 18px var(--fb);letter-spacing:0;text-transform:none}.lkgreet span{font-size:15px}.lkgreet b{font-weight:700}
.lkr .rr{min-height:60px}

/* the one search field */
.gsf{padding:0 8px 0 16px;cursor:text}.gsf input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 16px var(--fb);color:#201b17;height:100%;padding:0 4px;-webkit-appearance:none}
.gsf input::placeholder{color:#8a8178}.gsf input::-webkit-search-cancel-button{display:none}.gsf .vmic{width:34px;height:34px;flex:none;font-size:19px;margin-left:4px}.gx{border:0;background:#eee;border-radius:50%;width:30px;height:30px;font-size:18px;line-height:1;cursor:pointer;flex:none;color:#555}
.app{position:relative}.gsr{position:absolute;left:0;right:0;z-index:70;background:var(--bg);padding:10px 12px 14px;max-height:min(68dvh,560px);overflow:auto;box-shadow:0 18px 40px rgba(0,0,0,.35);border-radius:0 0 22px 22px;display:grid;gap:8px;align-content:start}
.gsr[hidden]{display:none}.gsr .rr{min-height:60px}.gsr .vc{margin-bottom:6px}
.bks{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}.bkr{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 0;font-size:13px}.bkr .btn{padding:4px 12px}

/* bulk add */
.bulk{width:min(1060px,100%)}.brow{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin:8px 0}.brow label{display:grid;gap:4px;font-weight:700;font-size:12px}.bpaste{flex:1 1 280px}.bpaste textarea{width:100%;font-weight:400}
.bwrap{overflow:auto;max-height:46vh;border:1px solid var(--line);border-radius:12px}.btab{width:100%;border-collapse:collapse;min-width:760px}.btab th{position:sticky;top:0;background:var(--s2);text-align:left;padding:8px;font-size:12px;z-index:1}
.btab td{padding:4px 6px;border-top:1px solid var(--line)}.btab .in{width:100%;min-height:38px;padding:4px 8px;font-size:14px}.br.bad td{background:#fdecea}.bmsg td{color:#c0392b;font-weight:600;font-size:12.5px;padding:2px 10px 8px;background:#fdecea}

@media(max-width:700px){.mdl.instbg{place-items:end center;padding:0}.mdl.instbg .mbox.inst{width:100%;border-radius:24px 24px 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));animation:sheetup .25s}.inst .mf .btn{flex:1;min-height:50px}}

/* people who work several booths */
.pchips{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px;align-items:center}.pchips .addb{width:auto;min-width:78px;min-height:30px;padding:2px 6px;font-size:12px}
.bchip{border:0;border-radius:99px;background:rgba(255,255,255,.28);color:inherit;font:700 12px var(--fb);padding:2px 10px;cursor:pointer}
:root[data-party="tdp"] .bchip{background:rgba(92,10,16,.15);color:#5c0a10}

.lc .lginst{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;min-height:48px;border:2px solid var(--or);border-radius:16px;background:transparent;color:var(--or-d);font:700 15px var(--fb);cursor:pointer}
.lc .lginst:hover{background:var(--or-soft)}.lc .lginst[hidden]{display:none}
/* phone header: search + install + language share one row beside the title */
body.appmode .appbar .r{gap:6px}body.appmode #lkb,body.appmode #inst:not([hidden]){width:38px;height:38px;font-size:17px}@media(max-width:420px){body.appmode .appbar{gap:0 6px}body.appmode .btx h1{font-size:12.5px}body.appmode .btx small{font-size:9px;letter-spacing:.06em}body.appmode .brand{gap:8px}body.appmode #lang{padding:6px 6px;font-size:11px}body.appmode #lkb{display:none}}
/* the alliance logo is wide: a rounded tile instead of a circle, whole logo always visible */
.lotus{width:auto;height:38px;aspect-ratio:2.2/1;border-radius:10px}.lotus img{object-fit:contain;background:#fff}
.lp .l{width:92px;height:auto;aspect-ratio:2.2/1;border-radius:14px;object-fit:contain;right:-30px}
@media(max-width:420px){body.appmode .lotus{height:28px}body.appmode .lotus img{width:100%;height:100%}}
/* walk list: a plain list of door numbers; tap one to open who lives there */
.walk.list{grid-template-columns:minmax(0,1fr);gap:8px}
.hw{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}.hw.open{border-color:var(--or);box-shadow:0 4px 14px rgba(0,0,0,.08)}
.hrow{display:flex;align-items:center;gap:10px;width:100%;min-height:58px;padding:8px 14px;background:none;border:0;text-align:left;cursor:pointer;color:var(--fg);font:inherit}
.hrow .hn{font:800 18px var(--fd);color:var(--or-d);flex:none;min-width:84px}.hrow .hm{flex:1;min-width:0;font-size:13px;color:var(--muted)}
.hrow .hs{flex:none;font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--s2);color:var(--muted)}.hrow .hs.on{background:#e3f7e8;color:#1a7f4b}
.hrow .chev{flex:none;font-size:22px;color:var(--muted);transition:transform .15s}.hw.open .chev{transform:rotate(90deg)}
.hbody{padding:0 10px 10px}.hbody .hc{border:0;box-shadow:none;padding:4px 4px 0}
/* narrow phones, desktop-style header (admins, HR): the title keeps its own room and the buttons drop to the next line instead of covering it */
@media(max-width:640px){body:not(.appmode) .brand{flex:1 1 170px;min-width:0}body:not(.appmode) .lotus{height:30px}body:not(.appmode) .appbar .r{flex:1 1 auto;justify-content:flex-end;flex-wrap:wrap}}
@media(max-width:640px){body:not(.appmode) #inst .lbl{display:none}}
.note,.note *,.hs,code,.card p,.card li{overflow-wrap:anywhere;word-break:break-word}ol.note{padding-left:20px}
/* very narrow phones (320-360px): countdown tiles shrink to fit, the phone header stays on one line */
body .tvcount{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:420px){body .tvcount{gap:6px}body .tvcount span{font-size:10px;letter-spacing:.04em}body .tvcount b{font-size:26px}}
@media(max-width:360px){body.appmode .appbar{gap:0 4px}body.appmode .appbar .r{gap:4px}body.appmode #inst:not([hidden]){width:34px;height:34px;font-size:15px}body.appmode #lang{padding:5px 4px;font-size:10px}body.appmode .btx h1{font-size:12px}body.appmode .btx small{font-size:8px}body.appmode .lotus{height:24px}body.appmode .brand{gap:6px}}

.ico{display:block;flex:none}#inst{display:inline-flex;align-items:center;gap:6px}.lginst .ico{width:22px;height:22px}body.appmode #inst .ico{width:20px;height:20px}
/* tablets and desktops: the walk list is a grid of door-number tiles (5 to 6 across on a wide screen); an opened tile takes the whole row for its details */
@media(min-width:640px){
  .walk.list{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;align-items:start}
  .walk.list .hrow{flex-direction:column;align-items:flex-start;gap:4px;min-height:96px;padding:14px 16px 12px;position:relative}
  .walk.list .hrow .hn{font-size:22px;min-width:0;overflow-wrap:anywhere}.walk.list .hrow .hm{flex:none}.walk.list .hrow .hs{margin-top:auto}
  .walk.list .hrow .chev{position:absolute;right:12px;top:10px;font-size:20px}
  .walk.list .hw:hover{border-color:var(--or);box-shadow:0 4px 14px rgba(0,0,0,.08)}
  .walk.list .hw.open{grid-column:1/-1}.walk.list .hw.open .hrow{flex-direction:row;align-items:center;min-height:56px}.walk.list .hw.open .hrow .hs{margin-top:0}.walk.list .hw.open .chev{position:static}
  .walk.list .hbody{padding:0 16px 14px}
}
/* live users */
.onl{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.ou{display:flex;gap:10px;align-items:flex-start;background:var(--s2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.ou .op{font-weight:700;color:var(--or-d);margin-top:2px}.dot{width:10px;height:10px;border-radius:50%;background:#1fb25a;margin-top:6px;flex:none;box-shadow:0 0 0 0 rgba(31,178,90,.6);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(31,178,90,0)}100%{box-shadow:0 0 0 0 rgba(31,178,90,0)}}
.feed{max-height:320px;overflow:auto}.fr{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line)}.fr .note:last-child{margin-left:auto}
tr.tot td{border-top:2px solid var(--line);background:var(--s2)}
.onlc h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.onlc h2 .btn{margin-left:auto;font-size:12px;padding:5px 10px}

.instwarn{background:var(--or-soft);border-radius:10px;padding:8px 10px;margin:8px 0}

#upd{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:90;background:#1a7f4b;color:#fff;border:0;border-radius:99px;padding:12px 20px;font:700 14px var(--fb);box-shadow:0 8px 24px rgba(0,0,0,.3);cursor:pointer;white-space:nowrap}

#outbox{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:89;background:#b8860b;color:#fff;border:0;border-radius:99px;padding:10px 16px;font:700 13px var(--fb);box-shadow:0 8px 24px rgba(0,0,0,.3);max-width:calc(100% - 24px)}

/* privacy notice and staff rules */
.pnbox{max-width:620px;width:calc(100% - 24px);max-height:88vh;display:flex;flex-direction:column}.pnb{overflow:auto;padding:4px 2px;font-size:14px;line-height:1.55}
.ptl{padding-left:24px;margin:8px 0;font-family:var(--fb);font-size:14px}.ptl li{margin:0 0 8px;padding-left:4px}.pnb,.pnb p{font-family:var(--fb)}.pnb a{color:var(--or-d);font-weight:600}.pnb h3{margin:14px 0 4px;font:700 15px var(--fd)}

/* insights */
.slg{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:10px 0 14px}.sli{display:grid;gap:4px;font-size:13px}.sli input{width:100%;accent-color:var(--or)}
.brief{background:var(--or-soft);border-radius:14px;padding:12px 14px;margin:0 0 12px}.brief h2{margin:0 0 6px;font:800 15px var(--fd)}.brief p{margin:4px 0;font-size:14px}.brief ul{margin:6px 0 0;padding-left:18px;display:grid;gap:4px;font-size:14px}

/* official rate chart in the expense form, and the printable account statement */
.rcbox{border:1px dashed var(--line);border-radius:12px;padding:10px;margin:8px 0;display:grid;gap:8px;background:var(--s2)}.rcinfo,.rcwarn{font-size:13px}
.stbox{max-width:1100px;width:calc(100% - 20px);max-height:92vh;display:flex;flex-direction:column}.acct{overflow:auto}.acct h3{margin:0 0 4px;font:800 18px var(--fd)}
.stt2{font-size:12px}.stt2 th,.stt2 td{padding:6px 8px;vertical-align:top}.stt2 tr.tot td{border-top:2px solid var(--line);background:var(--s2)}
.sig{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}.sig div{border-top:1px solid #000;padding-top:4px;font-size:12px}
@media print{body.stmt-open>*:not(#stmt){display:none!important}body.stmt-open #stmt{position:static!important;background:#fff!important;display:block!important;padding:0!important}body.stmt-open .stbox{max-width:none!important;width:100%!important;max-height:none!important;box-shadow:none!important;border:0!important}body.stmt-open .acct{overflow:visible!important}.noprint{display:none!important}.stt2{font-size:10px}}

/* quick add from the rate chart */
.qabox{max-width:980px;width:calc(100% - 20px);max-height:92vh;display:flex;flex-direction:column;gap:8px}.qsec{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;flex-wrap:nowrap}.qsec .chp{flex:none}
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;overflow:auto;min-height:120px;flex:1;align-content:start}
.qi{display:flex;flex-direction:column;justify-content:space-between;gap:6px;text-align:left;min-height:84px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--fg);cursor:pointer;font:inherit}
.qi:hover,.qi:focus-visible{border-color:var(--or);box-shadow:0 4px 12px rgba(0,0,0,.1)}.qn{font-weight:700;font-size:13px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.qr{font:800 15px var(--fd);color:var(--or-d)}.qr small{font:500 11px var(--fb);color:var(--muted)}
.qpanel{border-top:2px solid var(--or);padding-top:10px;display:grid;gap:8px;max-height:46vh;overflow:auto}.qh{display:grid;gap:2px}.qrow{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}.qrow label{display:grid;gap:3px;font-size:12px;flex:1 1 130px}
.qstep{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.qstep span{font-size:12px;min-width:56px}.qstep button:not(.chp){width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font:700 20px var(--fb);cursor:pointer;color:var(--fg)}.qstep input{width:90px;text-align:center}

@media(max-width:700px){.qgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.qabox.picking .qgrid,.qabox.picking .qsec,.qabox.picking [data-q]{display:none}.qabox.picking .qpanel{max-height:none;border-top:0;padding-top:0}.qi{min-height:92px}}

/* sortable report headers */
.srt th[data-s]{cursor:pointer;user-select:none;white-space:nowrap}.srt th[data-s]:hover{color:var(--or-d)}.srt th[aria-sort="ascending"]::after{content:" ▲";font-size:9px}.srt th[aria-sort="descending"]::after{content:" ▼";font-size:9px}
@media(max-width:700px){.srt thead{display:none}}

.qabox>*{flex-shrink:0}.qabox>.qgrid{flex-shrink:1}.qsec{padding:4px 2px 6px;min-height:42px}.qn{flex:none}.qr{flex:none;line-height:1.3}
/* the briefing sits on the dark Today wall: its own light card needs its own dark text */
.brief,.tdy .brief{background:#fff1e0;color:#2b1a0e;border:1px solid #f1c79b}.brief h2{color:#a84300}.brief p,.brief li{color:#2b1a0e}.brief li::marker{color:#a84300}

/* period tabs on the contribution report: big, obvious buttons */
.rtabs{display:flex;gap:8px;margin:10px 0 6px}.rtab{flex:1 1 0;min-height:48px;border-radius:14px;border:2px solid var(--or);background:transparent;color:var(--or-d);font:800 16px var(--fb);cursor:pointer}
.rtab.on{background:var(--or);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.18)}.rtab:focus-visible{outline:3px solid var(--or-soft)}#rmore{margin:0 0 8px}
.pchip:not(:has(button)){padding-right:10px}

/* Team page: booth cards, a full-width table, the add form in a pop-up */
.tmhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:12px}.tmact{display:flex;gap:8px;flex-wrap:wrap}.tmact .btn{min-height:44px}
.bcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;margin-bottom:14px}
.bcard{display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px 12px;border:1px solid var(--line);border-top:4px solid #1fb86f;border-radius:14px;background:var(--surface);color:var(--fg);cursor:pointer;font:inherit;transition:box-shadow .15s,transform .15s}
.bcard:hover{box-shadow:0 6px 16px rgba(0,0,0,.12);transform:translateY(-1px)}.bcard.empty{border-top-color:#d6336c}.bcard.on{border-color:var(--or);border-top-color:var(--or);background:var(--or-soft);box-shadow:0 0 0 2px var(--or)}
.bt1{font:700 12px var(--fb);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.bn{font:800 28px var(--fd);line-height:1.1}.bs{font-size:12px;color:var(--muted)}
.tmx{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;align-items:start}.tmx .card{margin-top:0!important}
table.wide{width:100%}#tclear{margin-left:auto}
@media(max-width:700px){.bcards{grid-template-columns:repeat(2,minmax(0,1fr))}.bn{font-size:24px}}

/* refresh button: icon beside the language switch for everyone */
#refresh{white-space:nowrap;display:inline-flex;align-items:center;gap:6px}body.appmode #refresh{width:38px;height:38px;padding:0;border-radius:50%;justify-content:center}body.appmode #refresh .lbl{display:none}body.appmode #refresh .ico{width:20px;height:20px}
.linkbtn{background:none;border:0;padding:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
@media(max-width:360px){body.appmode #refresh{width:34px;height:34px}}
@media(max-width:400px){body.appmode #inst{display:none!important}body.appmode #lang{padding:5px 3px}body.appmode #lang span{padding:3px 7px;font-size:10px}}
.pinrows{display:grid;gap:10px}.pinrows>div{display:grid;gap:2px}.pinrows b{font-size:16px;word-break:break-all}.pinrows .pinbig{font:800 34px var(--fd);letter-spacing:.14em;color:var(--or)}
#printsheet{display:none}
@media print{body>*:not(#printsheet){display:none!important}#printsheet{display:block;color:#000;background:#fff;font:12px/1.4 system-ui,sans-serif;padding:0}
#printsheet h1{font-size:20px;margin:0}#printsheet .sub{margin:2px 0 12px;color:#444}#printsheet section{break-inside:avoid;margin:0 0 12px}#printsheet h2{font-size:14px;margin:0 0 4px;border-bottom:2px solid #000;padding-bottom:2px}#printsheet h2 span{font-weight:400;color:#444;font-size:11px;margin-left:6px}
#printsheet table{width:100%;border-collapse:collapse}#printsheet th,#printsheet td{border:1px solid #999;padding:3px 6px;text-align:left}#printsheet th{background:#eee}#printsheet .none{color:#b00;margin:4px 0}#printsheet .foot{margin-top:14px;font-size:10px;color:#555}}
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}th.sortable:hover,th.sortable.on{color:var(--or)}th.sortable i{font-style:normal;font-size:10px;margin-left:5px;display:inline-block;min-width:10px}
#vu{position:fixed;right:14px;bottom:78px;z-index:90;width:min(380px,calc(100vw - 28px));font-family:var(--fb)}
#vu.open{background:var(--surface);color:var(--text,inherit);border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.28);padding:12px 14px;display:grid;gap:8px}
#vu .vuh{display:flex;justify-content:space-between;align-items:center;gap:8px}#vu .vuh b{display:flex;gap:6px;align-items:center;color:var(--or);font-size:14px}#vu .vuh span{display:flex;gap:4px}
#vu .vuh button{border:0;background:var(--s2);color:var(--fg);width:32px;height:32px;border-radius:50%;cursor:pointer;font:700 18px/1 var(--fb);display:grid;place-items:center}
#vu .vub{font-size:15px;line-height:1.5;max-height:34vh;overflow:auto}#vu .vun{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;color:var(--muted,#7a6f66)}#vu .vun b{color:var(--fg);font-size:14px}
#vu .vuw{font-size:12px;color:#b26a00;background:#fff4e0;border-radius:8px;padding:6px 8px}#vu .vuf{display:flex;justify-content:flex-end}
#vu.min{width:auto}#vu .vupill{display:flex;gap:6px;align-items:center;border:0;background:var(--or);color:#fff;font:700 13px var(--fb);padding:9px 14px;border-radius:999px;box-shadow:0 8px 22px rgba(0,0,0,.25);cursor:pointer}
body.tvmode #vu{bottom:18px}@media(min-width:900px){#vu{bottom:18px}}@media print{#vu{display:none!important}}
#vu .vup{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border-top:1px solid var(--line);padding-top:8px;font-size:12px;color:var(--muted,#7a6f66)}#vu .vup button{border:1px solid var(--line);background:var(--s2);color:var(--fg);border-radius:999px;padding:6px 10px;font:700 12px var(--fb);cursor:pointer}#vu .vupill.off{background:#6b625a}
/* the voice update must be noticed: orange header band, bold frame, a glow, and a slide-in with a short pulse */
#vu{width:min(430px,calc(100vw - 28px))}
#vu.open{border:2px solid var(--or);padding:0 0 12px;gap:0;overflow:hidden;box-shadow:0 0 0 5px rgba(255,122,26,.22),0 24px 64px rgba(0,0,0,.5);animation:vuin .45s cubic-bezier(.2,.9,.3,1.2),vuglow 1.6s ease-in-out 3}
#vu.open>*:not(.vuh){margin:0 16px}#vu.open .vub{margin-top:12px;font-size:17px;line-height:1.55}#vu.open .vun,#vu.open .vuw,#vu.open .vuf,#vu.open .vup{margin-top:10px}
#vu .vuh{background:linear-gradient(100deg,var(--or),#ff9f4a);padding:11px 14px;margin:0}#vu .vuh b{color:#fff;font-size:15px;letter-spacing:.2px}#vu .vuh b::before{content:"";width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.8);animation:vudot 1.4s infinite}
#vu .vuh button{background:rgba(255,255,255,.24);color:#fff}#vu .vuh button:hover{background:rgba(255,255,255,.4)}
#vu .vupill{box-shadow:0 0 0 4px rgba(255,122,26,.25),0 10px 26px rgba(0,0,0,.35);animation:vuglow 1.6s ease-in-out 3}
@keyframes vuin{from{transform:translateY(40px) scale(.94);opacity:0}to{transform:none;opacity:1}}
@keyframes vuglow{50%{box-shadow:0 0 0 12px rgba(255,122,26,.35),0 24px 64px rgba(0,0,0,.5)}}
@keyframes vudot{70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@media(prefers-reduced-motion:reduce){#vu.open,#vu .vupill,#vu .vuh b::before{animation:none}}
.nsi{margin-bottom:14px;border-left:5px solid #d6336c}.nsi h2{display:flex;gap:8px;align-items:center}.nsr{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line)}.nsa{display:flex;gap:6px;flex-wrap:wrap}.nsa .btn{padding:7px 12px;font-size:13px;text-decoration:none}
.signin{background:var(--or-soft);border-left:4px solid var(--or);padding:8px 10px;border-radius:8px;margin:0}.erlink{display:inline-block;margin-top:4px;font-weight:800;color:var(--or);text-decoration:underline}