@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --navy:#16233F;
  --navy-2:#1F3357;
  --paper:#EEF1F0;
  --card:#FFFFFF;
  --gold:#C9971E;
  --gold-2:#E3B23C;
  --green:#2E7D53;
  --red:#B23B3B;
  --blue:#2E6F9E;
  --brown:#7A5230;
  --ink:#16233F;
  --ink-soft:#5B6B85;
  --line:#DADFE6;
  --radius:14px;
  --font-display:'Barlow Condensed', system-ui, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
#app{max-width:520px;margin:0 auto;min-height:100vh;background:var(--paper);display:flex;flex-direction:column;position:relative;}

.topbar{
  background:var(--navy);
  color:#fff;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky; top:0; z-index:30;
  border-bottom:3px solid var(--gold);
}
.topbar .brand{display:flex; flex-direction:column; line-height:1.05;}
.topbar .brand .eyebrow{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-2); font-weight:600;}
.topbar .brand h1{font-family:var(--font-display); font-weight:700; font-size:22px; margin:0; letter-spacing:.01em;}
.topbar button.icon-btn{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff;
  border-radius:10px; padding:8px 12px; font-family:var(--font-body); font-weight:600; font-size:13px;
}
.content{flex:1; padding:16px; padding-bottom:100px;}

.field{margin-bottom:16px;}
.field label{display:block; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:6px;}
input[type=text], input[type=tel], input[type=email], input[type=date], input[type=time], select, textarea{
  width:100%; padding:13px 14px; border-radius:10px; border:1.5px solid var(--line); background:#fff;
  font-family:var(--font-body); font-size:15px; color:var(--ink);
}
textarea{resize:vertical; min-height:60px;}
input:focus, select:focus, textarea:focus{outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold);}

.btn{
  display:block; width:100%; padding:14px 16px; border-radius:12px; border:none;
  font-family:var(--font-body); font-weight:700; font-size:15px; cursor:pointer; text-align:center;
}
.btn-primary{background:var(--navy); color:#fff;}
.btn-gold{background:var(--gold); color:#1a1200;}
.btn-outline{background:#fff; color:var(--navy); border:1.5px solid var(--line);}
.btn-yes{background:var(--green); color:#fff;}
.btn-no{background:var(--red); color:#fff;}
.btn-island{background:var(--green); color:#fff;}
.btn-overseas{background:var(--blue); color:#fff;}
.btn-dead{background:var(--brown); color:#fff;}
.cta-stack{display:flex; flex-direction:column; gap:10px;}
.cta-stack .btn{padding:18px 16px; font-size:16px;}
.btn-row{display:flex; gap:10px;}
.btn-row .btn{flex:1;}
.btn[disabled]{opacity:.4; cursor:not-allowed;}
.btn+.btn{margin-top:10px;}

.card{background:var(--card); border-radius:var(--radius); padding:16px; border:1px solid var(--line); margin-bottom:12px;}

.search-row{display:flex; gap:8px; margin-bottom:10px;}
.search-row input{flex:1;}
.filters{display:flex; gap:8px; margin-bottom:14px;}
.filters select{flex:1; font-size:13px; padding:10px;}

.voter-item{
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; cursor:pointer;
}
.voter-item.is-canvassed{ border-left:4px solid var(--green); background:#F7FBF8; }
.voter-item:active{background:#F6F4EE;}
.voter-main .name{font-weight:700; font-size:15.5px;}
.voter-main .meta{font-size:12.5px; color:var(--ink-soft); margin-top:2px;}
.voter-tags{display:flex; align-items:center; gap:6px;}
.tag{font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:.03em;}
.tag-u{background:#F4E1C9; color:#8A5A00;}
.tag-l{background:#F7D8D8; color:#8A2323;}
.tag-un{background:#E6E9EF; color:#4A5670;}
.dot{width:9px; height:9px; border-radius:50%; background:var(--green);}
.empty-state{text-align:center; padding:60px 20px; color:var(--ink-soft);}
.empty-state h3{font-family:var(--font-display); font-size:22px; color:var(--navy); margin-bottom:6px;}

.count-pill{font-size:12px; color:var(--ink-soft); margin-bottom:10px;}

.q-card{background:var(--card); border-radius:var(--radius); border:1px solid var(--line); padding:20px; margin-bottom:16px;}
.chip-row{display:flex; flex-wrap:wrap; gap:8px;}
.chip{font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:999px; border:1.5px solid var(--line); background:#fff; color:var(--ink-soft); cursor:pointer; transition:background .12s,border-color .12s,color .12s;}
.chip:hover{border-color:var(--navy);}
.chip-on{background:var(--navy); border-color:var(--navy); color:#fff;}
.q-eyebrow{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:8px;}
.q-title{font-family:var(--font-display); font-weight:700; font-size:23px; line-height:1.15; color:var(--navy); margin:0 0 16px 0;}
.progress-track{height:5px; background:var(--line); border-radius:4px; overflow:hidden; margin-bottom:18px;}
.progress-fill{height:100%; background:var(--gold); transition:width .25s ease;}

.info-box{background:#FCF3E1; border:1px solid #EBCF8F; border-radius:10px; padding:14px; font-size:14px; line-height:1.5; margin-bottom:16px; color:#5E4400;}
.info-box b{color:#8A5A00;}

.locate-card{background:var(--card); border:1.5px dashed var(--line); border-radius:12px; padding:22px 16px; text-align:center; margin-bottom:14px;}
.locate-icon{font-size:30px; margin-bottom:8px;}
.locate-status{font-size:13px; color:var(--ink-soft); margin-bottom:14px; font-variant-numeric:tabular-nums;}
.locate-status b{color:var(--navy);}

.voter-banner{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px;}
.voter-banner .name{font-family:var(--font-display); font-weight:700; font-size:24px; color:var(--navy); line-height:1;}
.voter-banner .addr{font-size:13px; color:var(--ink-soft); margin-top:3px;}
.back-link{background:none; border:none; color:var(--ink-soft); font-size:13px; padding:0 0 12px 0; font-weight:600; display:flex; align-items:center; gap:4px;}

.summary-row{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px;}
.summary-row:last-child{border-bottom:none;}
.summary-row .k{color:var(--ink-soft);}
.summary-row .v{font-weight:600; text-align:right; max-width:60%;}

.tabbar{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:520px;
  background:#fff; border-top:1px solid var(--line); display:flex; z-index:40;
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar button{
  flex:1; background:none; border:none; padding:12px 4px 10px; font-family:var(--font-body);
  font-size:11px; font-weight:600; color:var(--ink-soft); display:flex; flex-direction:column; align-items:center; gap:3px;
}
.tabbar button.active{color:var(--navy);}
.tabbar button .ic{font-size:18px;}

.login-wrap{display:flex; flex-direction:column; justify-content:center; min-height:100vh; padding:32px 24px;}
.login-wrap .eyebrow{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:700; text-align:center; margin-bottom:8px;}
.login-wrap h1{font-family:var(--font-display); font-size:38px; text-align:center; color:var(--navy); margin:0 0 6px 0; line-height:1;}
.login-wrap p.sub{text-align:center; color:var(--ink-soft); font-size:14px; margin-bottom:32px;}

.admin-row{display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--line);}
.admin-row:last-child{border-bottom:none;}
.admin-row .email{font-weight:600; font-size:14px;}
.admin-row button{background:none; border:none; color:var(--red); font-weight:700; font-size:12.5px;}

.toast{
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%); background:var(--navy); color:#fff;
  padding:11px 20px; border-radius:30px; font-size:13.5px; font-weight:600; z-index:60; box-shadow:0 6px 20px rgba(0,0,0,.2);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-4px);}

.locked-banner{display:flex; align-items:center; gap:8px; background:#E8F1EB; border:1px solid #BFE0CB; color:#215C3A; padding:10px 12px; border-radius:10px; font-size:12.5px; font-weight:600; margin-bottom:14px;}

.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;}
.stat-card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px;}
.stat-card .num{font-family:var(--font-display); font-size:30px; font-weight:700; color:var(--navy); line-height:1;}
.stat-card .lbl{font-size:11.5px; color:var(--ink-soft); margin-top:4px; text-transform:uppercase; letter-spacing:.04em; font-weight:600;}
.dash-table th,.dash-table td{padding:7px 5px; border-bottom:1px solid var(--line);}
.section-title{font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--navy); margin:22px 0 10px 0;}
.section-sub{font-size:12.5px; color:var(--ink-soft); margin:-6px 0 12px 0;}
.dist-row{margin-bottom:14px;}
.dist-row .dist-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px; font-size:13.5px;}
.dist-row .dist-head b{color:var(--navy); font-size:14.5px;}
.dist-row .dist-sub{font-size:11.5px; color:var(--ink-soft);}
.bar-track{height:10px; background:var(--line); border-radius:6px; overflow:hidden;}
.bar-fill{height:100%; border-radius:6px;}
.lean-row{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.lean-row .lean-label{width:64px; font-size:12.5px; font-weight:700; color:var(--ink);}
.lean-row .bar-track{flex:1;}
.lean-row .lean-val{width:76px; text-align:right; font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums;}
.dash-loading{text-align:center; padding:60px 10px; color:var(--ink-soft); font-size:13.5px;}

::-webkit-scrollbar{width:0; height:0;}

#printArea{display:none;}
@media print{
  body *{ visibility:hidden; }
  #printArea, #printArea *{ visibility:visible; }
  #printArea{ display:block; position:absolute; top:0; left:0; width:100%; padding:20px; }
  #printArea h2{ font-family:var(--font-display); color:#000; margin:0 0 6px 0; }
  #printArea .print-meta{ font-size:12px; color:#333; margin-bottom:14px; }
  #printArea table{ width:100%; border-collapse:collapse; font-size:12px; }
  #printArea th, #printArea td{ border:1px solid #999; padding:5px 7px; text-align:left; }
  #printArea th{ background:#eee; }
}


/* ===================== additions for the web version ===================== */
body.wide #app{max-width:1040px;}
body.wide .tabbar{max-width:1040px;}
@media (min-width:900px){ body.wide .content{padding:20px 28px 100px;} }
.hidden{display:none !important;}
.muted{color:var(--ink-soft);}
.small{font-size:12.5px;}
.row{display:flex; gap:10px; align-items:center;}
.row.wrap{flex-wrap:wrap;}
.grow{flex:1;}
.spacer{height:10px;}
h2.page{font-family:var(--font-display); color:var(--navy); margin:0 0 12px 0; font-size:24px;}
h3.sect{font-family:var(--font-display); color:var(--navy); margin:20px 0 8px 0; font-size:19px;}
.btn-sm{display:inline-block; width:auto; padding:8px 12px; font-size:13px; border-radius:10px;}
.btn-danger{background:var(--red); color:#fff;}
.btn-bus{background:var(--blue); color:#fff;}
.btn-voted{background:var(--green); color:#fff; font-size:18px; padding:20px 16px;}
.btn-undo{background:#fff; color:var(--red); border:1.5px solid var(--red);}
.btn+.btn.btn-sm{margin-top:0;}
.tag-sup{background:#D8EEDF; color:#1E6B41;}
.tag-opp{background:#F7D8D8; color:#8A2323;}
.tag-und2{background:#E6E9EF; color:#4A5670;}
.tag-voted{background:var(--green); color:#fff;}
.tag-bus{background:#D6E7F3; color:#1D5E8A;}
.tag-conf{background:#E8F1EB; color:#215C3A;}
.tag-agent{background:#EFE7D6; color:#6B4E10;}
.tag-new{background:#EDE3F7; color:#5B2E8A;}
.voter-tags{flex-wrap:wrap; justify-content:flex-end; max-width:48%;}
.banner{border-radius:10px; padding:12px 14px; font-size:13.5px; line-height:1.45; margin-bottom:14px;}
.banner.warn{background:#FCF3E1; border:1px solid #EBCF8F; color:#5E4400;}
.banner.err{background:#FDEDED; border:1px solid #F3C6C6; color:#8A2A2A;}
.banner.ok{background:#E8F1EB; border:1px solid #BFE0CB; color:#215C3A;}
.banner.info{background:#E8F0F7; border:1px solid #BCD3E6; color:#1D4E73;}
table.tbl{width:100%; border-collapse:collapse; font-size:13px;}
table.tbl th{font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); text-align:left; padding:8px 6px; border-bottom:2px solid var(--line); position:sticky; top:0; background:var(--paper);}
table.tbl td{padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top;}
table.tbl td.num, table.tbl th.num{text-align:right; font-variant-numeric:tabular-nums;}
.scroll-x{overflow-x:auto;}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-bottom:14px;}
.seg{display:flex; background:#fff; border:1.5px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:12px;}
.seg button{flex:1; padding:10px 6px; border:none; background:none; font-weight:600; font-size:13px; color:var(--ink-soft); font-family:var(--font-body);}
.seg button.on{background:var(--navy); color:#fff;}
.modal{position:fixed; inset:0; background:rgba(20,28,44,.55); z-index:100; display:flex; align-items:flex-end; justify-content:center;}
.modal .sheet{background:#fff; width:100%; max-width:520px; max-height:88vh; overflow:auto; border-radius:18px 18px 0 0; padding:18px;}
@media (min-width:700px){ .modal{align-items:center;} .modal .sheet{border-radius:18px;} }
.sel-bar{position:fixed; left:50%; transform:translateX(-50%); bottom:62px; width:calc(100% - 24px); max-width:500px; background:var(--navy); color:#fff; border-radius:14px; padding:10px 12px; display:flex; gap:10px; align-items:center; z-index:50; box-shadow:0 6px 20px rgba(0,0,0,.25);}
.sel-bar .btn{width:auto; padding:9px 14px; font-size:13px;}
.chk{width:22px; height:22px; margin-right:10px; flex:none; accent-color:var(--navy);}
.voter-item .voter-main{flex:1; min-width:0;}
.voter-item.is-voted{border-left:4px solid var(--green); background:#F1FAF4;}
.progress{height:12px; background:var(--line); border-radius:8px; overflow:hidden;}
.progress > div{height:100%; background:var(--green);}
.progress.over > div{background:var(--red);}
.station-row{display:grid; grid-template-columns:90px 1fr 120px; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px;}
.pill-btn{border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:6px 12px; font-size:12.5px; font-weight:600; color:var(--ink-soft); font-family:var(--font-body);}
.askbar{display:flex; gap:8px; margin-bottom:10px;}
.askbar input{flex:1;}
.suggest{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px;}
.offline-dot{position:fixed; top:8px; right:8px; z-index:200; background:#8A5A00; color:#fff; font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px;}
input[type=password]{width:100%; padding:13px 14px; border-radius:10px; border:1.5px solid var(--line); background:#fff; font-family:var(--font-body); font-size:15px; color:var(--ink);}
input[type=number]{width:100%; padding:13px 14px; border-radius:10px; border:1.5px solid var(--line); background:#fff; font-family:var(--font-body); font-size:15px;}
.loadbar{height:8px; background:var(--line); border-radius:6px; overflow:hidden; margin:14px 0;}
.loadbar > div{height:100%; background:var(--gold); width:0; transition:width .2s;}
@media print{ .tabbar,.topbar,.sel-bar,.toast{display:none !important;} }

/* fixes after first run */
.station-row .progress{width:100%;}
.station-row .grow{min-width:0;}
@media (min-width:760px){ .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;} }

/* phone layout fixes */
.filters{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}
@media (min-width:760px){ .filters{grid-template-columns:repeat(4,minmax(0,1fr));} }
.voter-main .voter-tags{max-width:none; justify-content:flex-start; margin-top:5px;}