/* pages.css — page-specific styles: voter list/rows, drill-down tiles, detail, FAQ, PWA toast */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:var(--fs-sm);color:var(--text-3)}
.crumbs .icon{width:14px;height:14px} .crumbs a{color:var(--text-2);font-weight:500} .crumbs span[aria-current]{color:var(--text);font-weight:600}
.ico-tile{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-text)}
.union-tile{display:block;color:var(--text);text-decoration:none!important;overflow:hidden}
.union-tile.dim .ico-tile{background:var(--surface-3);color:var(--text-3)}
.ward-tile{display:flex;flex-direction:column;gap:2px;color:var(--text);text-decoration:none!important;min-height:112px}
.ward-no{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:var(--fs-lg);color:#fff;background:linear-gradient(145deg,var(--brand-400),var(--brand-600));box-shadow:0 4px 10px -3px rgba(79,70,229,.55)}
.ward-tile.locked{background:var(--surface-2);box-shadow:none;color:var(--text-3);border-style:dashed}
.ward-tile.locked .ward-no{background:var(--surface-3);color:var(--text-3);box-shadow:none}
.ward-tile.locked .bold{color:var(--text-2)}

.search-bar{display:flex;align-items:center;gap:var(--s-2);position:sticky;top:var(--top-h);z-index:5;padding:var(--s-2) 0;background:linear-gradient(var(--bg) 78%,transparent)}
.search-bar .input-wrap{flex:1}
@media (min-width:900px){.search-bar{top:0}}
.sort-sel{min-height:38px;width:auto;font-size:var(--fs-sm);padding-right:32px}
.spinner-sm{width:14px;height:14px;border:2px solid var(--brand-soft);border-top-color:var(--brand);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}

.vlist{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.card>.vlist{border:0;box-shadow:none;border-radius:0}
.vrow{display:flex;align-items:center;border-bottom:1px solid var(--line);min-height:64px;content-visibility:auto;contain-intrinsic-size:auto 64px}
.vrow:last-child{border-bottom:0}
.vrow-main{flex:1;min-width:0;display:flex;align-items:center;gap:var(--s-3);padding:10px 0 10px var(--s-3);color:var(--text);text-decoration:none!important}
.vrow:hover{background:var(--surface-2)} .vrow-main:focus-visible{outline-offset:-3px}
.vname{display:block;font-weight:600;line-height:1.3}
.vsub{display:block;font-size:var(--fs-xs);color:var(--text-3);line-height:1.4}
.vg{width:38px;height:38px;border-radius:12px;flex:none;display:grid;place-items:center;font-weight:700;font-size:var(--fs-sm)}
.vg.g0{background:var(--brand-soft);color:var(--brand-text)} .vg.g1{background:var(--danger-bg);color:var(--danger)} .vg.g2{background:var(--warn-bg);color:var(--warn)}
.vrow .fav{margin-right:4px;color:var(--text-3)} .fav.on{color:#f59e0b} .fav.on .icon{fill:#f59e0b}

.vhead{padding:var(--s-5)} .vtitle{font-size:var(--fs-xl);line-height:1.3}
.actions-row{display:flex;gap:var(--s-2);flex-wrap:wrap}
.actions-row .btn{flex:1 1 auto;min-width:0}
.drow{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--line)} .drow:last-child{border-bottom:0}
.drow>.icon{margin-top:4px} .dval{font-weight:600;word-break:break-word}

.faq{border-bottom:1px solid var(--line)} .faq:last-child{border-bottom:0}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding:var(--s-4);border:0;background:transparent;text-align:left;font-weight:600;min-height:var(--touch)}
.faq-q .icon{transition:transform var(--dur)} .faq.open .faq-q .icon{transform:rotate(180deg)}
.faq-a{padding:0 var(--s-4) var(--s-4);color:var(--text-2)}

.rail-sep{height:1px;background:var(--line);margin:var(--s-2) var(--s-2)}
@media (min-width:900px){.nav-rail{overflow-y:auto;scrollbar-width:thin}.nav-rail .rail-foot{padding-top:var(--s-2)}}
.update-toast{position:fixed;z-index:var(--z-toast);left:var(--s-4);right:var(--s-4);bottom:calc(var(--nav-h) + 12px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:var(--s-3);
  max-width:440px;margin:0 auto;padding:10px 12px 10px 16px;border-radius:var(--r-md);background:var(--ink);color:#fff;box-shadow:var(--shadow-lg);animation:popIn .25s var(--ease);font-size:var(--fs-sm)}
:root[data-theme=dark] .update-toast{background:#e8ecf8;color:#0f172a}
@media (min-width:900px){.update-toast{left:calc(var(--rail-w) + 16px);bottom:24px;margin:0}}
.consent-card{border-color:var(--brand-300);background:var(--brand-soft)}
.qa-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3)}
.qa{display:flex;flex-direction:column;align-items:center;gap:8px;padding:var(--s-4) var(--s-2);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);color:var(--text);font-size:var(--fs-sm);font-weight:600;text-align:center;text-decoration:none!important;transition:transform var(--dur) var(--ease),box-shadow var(--dur)}
.qa:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)} .qa .ico-tile{width:44px;height:44px}
@media (max-width:420px){.qa{font-size:var(--fs-xs);padding:var(--s-3) 4px}}

.narrow{max-width:760px;width:100%}
.grid.cols-3.keep3{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.keep3 .stat{padding:var(--s-3)} .keep3 .stat b{font-size:var(--fs-xl)} .keep3 .stat span{font-size:var(--fs-xs)}