/* My Voting Plan (vote.html), rebuilt Oct 23 2026 as one flow: 1 Go through your ballot, 2 Return it.
   Builds on css/alignment.css (al-head, al-card, al-btn, al-h, al-small). One card pattern for every
   contest: title, people or summary, "My pick" row, Details. */

/* ---------- page layout ---------- */
.vp-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "find side" "main side"; align-items: start; }
@media (min-width: 901px) { .vp-layout { grid-template-rows: auto 1fr; } }   /* Oct 24: a short ballot column no longer stretches the address card row */
.vp-find { grid-area: find; }
.vp-side { grid-area: side; position: sticky; top: 90px; padding: 18px 18px 16px; }
.vp-main { grid-area: main; display: grid; gap: 18px; min-width: 0; }
.al-h small { font-weight: 600; color: #566271; font-size: 14px; }
.vp-lead { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: #15202c; }

/* ---------- address ---------- */
.vp-form { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem auto; gap: 10px; align-items: end; }
.vp-form label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; color: #3a4654; }
.vp-form input { font: inherit; font-weight: 400; padding: 9px 11px; border: 1px solid #d2d8df; border-radius: 8px; background: #fff; color: #15202c; min-width: 0; }
.vp-form input:focus-visible { outline: 3px solid #d8a62a; outline-offset: 1px; }
.vp-form .al-btn { padding: 10px 16px; }
.vp-msg { margin: 10px 0 0; min-height: 1.2em; color: #3a4654; }
.vp-msg:empty { min-height: 0; margin: 0; }
.vp-msg.warn { color: #8a3a12; }
.vp-steps { list-style: none; counter-reset: vps; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vp-steps li { counter-increment: vps; position: relative; padding: 10px 12px 10px 42px; background: #f7f9fb; border: 1px solid #e3e7ec; border-radius: 10px; font-size: 13px; color: #566271; }
.vp-steps li::before { content: counter(vps); position: absolute; left: 12px; top: 10px; width: 22px; height: 22px; border-radius: 50%; background: #1e3a5f; color: #fff; font-weight: 800; font-size: 12px; display: grid; place-items: center; }
.vp-steps b { display: block; color: #15202c; font-size: 14px; margin-bottom: 2px; }
.vp-where-top { margin: 0 0 6px; font-size: 15px; color: #15202c; }
.vp-dist { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.vp-dist li { font-size: 14px; color: #3a4654; background: #eef1f4; border-radius: 99px; padding: 4px 12px; }
.vp-dist b { color: #1e3a5f; }
.vp-dist small { color: #7a8696; font-size: 12px; margin-left: 4px; }

/* ---------- step headers and jump links ---------- */
.vp-step { display: flex; gap: 14px; align-items: flex-start; padding: 6px 2px 0; scroll-margin-top: 90px; }
.vp-num { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #d8a62a; color: #15202c; font-weight: 800; font-size: 17px; display: grid; place-items: center; }
.vp-step h2 { margin: 2px 0 2px; font-size: 22px; color: #1e3a5f; }
.vp-step p { margin: 0; font-size: 14px; color: #566271; }
.vp-jump { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
.vp-jump:empty { display: none; }
.vp-jump a { font-size: 13px; font-weight: 700; color: #1e3a5f; background: #fff; border: 1px solid #d2d8df; border-radius: 99px; padding: 5px 12px; text-decoration: none; }
.vp-jump a:hover { border-color: #1e3a5f; }
.vp-jump a small { color: #7a8696; font-weight: 600; margin-left: 2px; }
.vp-jump a.is-done { background: #e6f2eb; border-color: #bcdcc8; color: #1d5a3a; }
.vp-jump a.is-done::after { content: " \2713"; }
.vp-ballot-note { margin: -6px 0 0; }
.vp-main > .al-card { scroll-margin-top: 90px; }

/* ---------- one card pattern for every contest ---------- */
.vp-item { border-top: 1px solid #e3e7ec; padding: 16px 0 6px; }
.al-h + .vp-item, .vp-lead + .vp-item { border-top: 0; padding-top: 6px; }
.vp-item-h { margin: 0 0 10px; font-size: 18px; color: #1e3a5f; }
.vp-item-h span { color: #566271; font-weight: 600; font-size: 15px; }
.vp-item-sum { margin: 0 0 8px; font-size: 14px; color: #3a4654; line-height: 1.5; }
.vp-actions { margin: 4px 0 6px; }
.vp-actions .al-btn { white-space: normal; text-align: left; }
.vp-pick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 2px; }
.vp-pick-lbl { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #7a8696; margin-right: 2px; }
.vp-opt { font: inherit; font-size: 13px; font-weight: 700; padding: 6px 12px; min-height: 34px; border-radius: 99px; border: 1px solid #d2d8df; background: #fff; color: #3a4654; cursor: pointer; text-align: left; }
.vp-opt:hover { border-color: #1e3a5f; }
.vp-opt:focus-visible { outline: 3px solid #d8a62a; outline-offset: 2px; }
.vp-opt[aria-pressed="true"] { background: #1e3a5f; border-color: #1e3a5f; color: #fff; }
.vp-opt.o-unsure[aria-pressed="true"] { background: #566271; border-color: #566271; }
.vp-details { margin-top: 8px; font-size: 13px; color: #3a4654; }
.vp-details summary { cursor: pointer; font-weight: 700; color: #1e3a5f; }
.vp-details p { margin: 8px 0 0; }
.vp-tag { font-size: 12px; font-weight: 700; color: #8a6510; background: #fbf3df; border-radius: 99px; padding: 2px 8px; }

/* ---------- candidates (party ring, photo) ---------- */
.vp-cands { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vp-cand { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #e3e7ec; border-radius: 12px; background: #fff; min-width: 0; --ring: #7a8696; --tint: #eef1f4; --ink: #4a5664; }
.vp-cand.p-rep { --ring: #c23b3b; --tint: #fbeaea; --ink: #a12f2f; }
.vp-cand.p-dem { --ring: #2b5fb3; --tint: #e8effa; --ink: #234f96; }
.vp-cand.p-lib { --ring: #c99a1e; --tint: #fbf3df; --ink: #7a5a0c; }
.vp-cand.p-con { --ring: #8a5a2b; --tint: #f5ece2; --ink: #6b4420; }
.vp-cand.p-iap { --ring: #2a7a6f; --tint: #e3f2ef; --ink: #1f5f56; }
.vp-cand.p-fwd { --ring: #6a3fb5; --tint: #efe8fa; --ink: #55309a; }
.vp-face { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--tint); color: var(--ink); box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--ring); display: grid; place-items: center; margin: 4px; }
.vp-ini { font-weight: 800; font-size: 17px; }
.vp-face img, .vp-jface img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.vp-cand-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vp-cand-name { font-weight: 700; font-size: 15px; color: #15202c; line-height: 1.25; }
.vp-cand-tags { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.vp-party { font-size: 12px; font-weight: 700; color: var(--ink); background: var(--tint); border-radius: 99px; padding: 2px 8px; }
.vp-links { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; font-weight: 600; }
.vp-links a { color: #1e3a5f; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- incumbent record (inside Details) ---------- */
.vp-record { background: #f7f9fb; border: 1px solid #e3e7ec; border-radius: 10px; padding: 14px 16px; margin: 8px 0; }
.vp-record h4 { margin: 0 0 4px; font-size: 16px; color: #1e3a5f; }
.vp-record h5 { margin: 12px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #566271; }
.vp-orgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
.vp-orgs.vp-orgs-all { grid-template-columns: minmax(0, 1fr); }
.vp-orgs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vp-orgs li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; font-size: 14px; }
.vp-orgs li small { color: #7a8696; font-size: 12px; }
.vp-org-badge { width: 22px; height: 22px; border-radius: 4px; overflow: hidden; display: inline-grid; place-items: center; background: #fff; }
.vp-org-badge img { width: 100%; height: 100%; object-fit: contain; }
.vp-org-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- judges ---------- */
.vp-jhow { margin: 4px 0 6px; }
.vp-jhow p { font-size: 14px; color: #3a4654; }
.vp-jgroup { display: flex; align-items: center; gap: 8px; margin: 18px 0 4px; font-size: 16px; color: #1e3a5f; }
.vp-jgroup span { font-size: 12px; font-weight: 700; color: #566271; background: #eef1f4; border-radius: 99px; padding: 1px 8px; }
.vp-jwhat { margin: 0 0 10px; font-size: 13px; color: #566271; }
.vp-judges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vp-judges > .vp-judge:only-child { grid-column: 1 / -1; }
.vp-judge { display: flex; gap: 12px; padding: 12px; border: 1px solid #e3e7ec; border-radius: 12px; background: #fff; min-width: 0; }
.vp-judge.warn { border-color: #f0c9ad; }
.vp-jface { position: relative; flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #e5ebf2; color: #1e3a5f; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #c9d3de; margin: 4px; }
.vp-jface img { object-position: center 20%; }
.vp-jbody { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vp-jname { font-size: 15px; color: #15202c; }
.vp-jmeta { font-size: 12px; color: #566271; }
.vp-jtags { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.vp-jbadge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #1d5a3a; background: #e6f2eb; border-radius: 99px; padding: 3px 9px; }
.vp-judge.warn .vp-jbadge { color: #8a3a12; background: #fdeee4; }
.vp-jnewstag { font-size: 12px; font-weight: 700; color: #7a5a0c; background: #fbf3df; border-radius: 99px; padding: 3px 9px; }
.vp-jline { font-size: 12px; color: #3a4654; }
.vp-judge .vp-pick-lbl { display: none; }
.vp-judge .vp-details p { font-size: 13px; color: #3a4654; }
.vp-jnews { margin: 8px 0 0; font-size: 13px; color: #3a4654; background: #fbf3df; border-radius: 8px; padding: 8px 10px; }
.vp-jsrc { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; }
.vp-jsub { color: #566271; }
.vp-jscores { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; grid-template-columns: minmax(0, 1fr); }
.vp-jscores li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: baseline; font-size: 13px; padding: 3px 0; border-bottom: 1px solid #eef1f4; }
.vp-jscores li small { color: #7a8696; }
.vp-jscores b { color: #1e3a5f; }
.vp-jscores .vp-javg { font-size: 12px; min-width: 48px; text-align: right; }

/* ---------- return it: map and nearby list ---------- */
.vp-map { height: 220px; border-radius: 10px; border: 1px solid #d2d8df; margin: 8px 0 10px; z-index: 0; }
.vp-mk span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #1e3a5f; color: #fff; font: 700 13px/1 "Public Sans", Arial, sans-serif; border: 2px solid #d8a62a; }
.vp-places { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 0; }
.vp-places > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid #eef1f4; }
.vp-places > li:first-child { border-top: 0; }
.vp-places > li.is-picked { background: #fbf3df; box-shadow: inset 3px 0 0 #d8a62a; border-radius: 6px; padding-left: 6px; }
.vp-places > li.is-picked .vp-pin { background: #d8a62a; color: #15202c; }
.vp-pick { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; cursor: pointer; min-width: 0; }
.vp-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vp-pick:has(input:focus-visible) { outline: 3px solid #d8a62a; outline-offset: 2px; border-radius: 6px; }
.vp-pin { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #1e3a5f; color: #fff; font-weight: 700; font-size: 13px; }
.vp-pl { display: block; min-width: 0; }
.vp-pl-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.vp-pl-top b { margin: 0; font-size: 15px; color: #15202c; }
.vp-pl-top small { color: #566271; }
.vp-pl-sub { display: block; margin-top: 2px; font-size: 13px; color: #566271; }
.vp-btn-sm { font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; padding: 7px 10px; border: 1px solid #d2d8df; border-radius: 7px; background: #fff; color: #1e3a5f; text-decoration: none; cursor: pointer; white-space: nowrap; }
.vp-btn-sm:hover { border-color: #1e3a5f; }
.vp-more { background: none; border: 0; padding: 4px 0; color: #1e3a5f; font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ---------- "Your plan" card ---------- */
.vp-side .al-h { margin-bottom: 10px; }
.vp-progress { margin: 0 0 14px; }
.vp-spot-tag { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #8a6510; }
.vp-prog { list-style: none; margin: 6px 0 8px; padding: 0; display: grid; gap: 2px; }
.vp-prog li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 4px 0; border-bottom: 1px solid #eef1f4; }
.vp-prog li a { font-weight: 700; color: #1e3a5f; text-decoration: none; }
.vp-prog li a:hover { text-decoration: underline; }
.vp-prog li span { color: #566271; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-prog li.is-done span { color: #1d5a3a; font-weight: 600; }
.vp-prog li.is-done span::before { content: "\2713 "; }
.vp-bar { height: 6px; border-radius: 99px; background: #eef1f4; overflow: hidden; }
.vp-bar span { display: block; height: 100%; background: #d8a62a; border-radius: 99px; transition: width .2s; }
.vp-prog-note { margin: 6px 0 0; font-size: 12px; color: #7a8696; }
.vp-spot-empty { margin: 0 0 12px; padding: 12px; border: 1px dashed #d2d8df; border-radius: 10px; color: #566271; font-size: 14px; }
.vp-spot { display: grid; gap: 2px; margin: 0 0 12px; padding: 12px 12px 10px; background: #fbf3df; border: 1px solid #ecd9a6; border-radius: 10px; font-size: 13px; color: #3a4654; }
.vp-spot b { font-size: 16px; color: #15202c; }
.vp-spot-links { display: flex; gap: 14px; margin-top: 6px; }
.vp-spot-links a, .vp-linkbtn { color: #1e3a5f; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; padding: 0; cursor: pointer; }
.vp-plan-day { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 600; color: #3a4654; }
.vp-plan-day input { font: inherit; font-weight: 400; padding: 6px 8px; border: 1px solid #d2d8df; border-radius: 8px; }
.vp-plan-due { margin: 8px 0 12px; font-size: 13px; color: #566271; }
.vp-plan-add { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #3a4654; }
.vp-cal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
.vp-cal-list { list-style: none; margin: 0; padding: 0; display: block; }
.vp-cal-list li { display: block; height: 100%; }
.vp-cal-row .al-btn { width: 100%; height: 100%; padding: 9px 8px; font-size: 14px; text-align: center; white-space: normal; }
.vp-print-btn { width: 100%; margin-top: 12px; }
.vp-flash { animation: vpflash 1.4s ease-out; }
@keyframes vpflash { 0% { box-shadow: 0 0 0 4px #d8a62a; } 100% { box-shadow: 0 0 0 0 rgba(216, 166, 42, 0); } }

/* ---------- sources ---------- */
.vp-sources ul { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; color: #3a4654; }
.vp-sources b { color: #15202c; }

/* ---------- printable ballot guide ---------- */
#vp-guide { display: none; }
@media print {
  body.vp-printing > *:not(#vp-guide) { display: none !important; }
  body.vp-printing #vp-guide { display: block; font-family: Arial, sans-serif; color: #000; }
  #vp-guide h1 { font-size: 19px; margin: 0 0 6px; }
  #vp-guide h2 { font-size: 15px; margin: 16px 0 6px; }
  #vp-guide p { font-size: 12px; margin: 0 0 8px; }
  #vp-guide table { width: 100%; border-collapse: collapse; font-size: 12px; page-break-inside: auto; }
  #vp-guide tr { page-break-inside: avoid; }
  #vp-guide th, #vp-guide td { border: 1px solid #999; padding: 5px 7px; text-align: left; vertical-align: top; }
  #vp-guide .mine { width: 110px; font-weight: 700; }
}

/* ---------- narrow screens ---------- */
@media (max-width: 900px) {
  .vp-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "find" "main" "side"; }
  .vp-side { position: static; }
}
@media (max-width: 640px) {
  .vp-form { grid-template-columns: minmax(0, 1fr) 6.5rem; }
  .vp-form .al-btn { grid-column: 1 / -1; }
  .vp-steps { grid-template-columns: minmax(0, 1fr); }
  .vp-cands, .vp-judges, .vp-orgs { grid-template-columns: minmax(0, 1fr); }
  .vp-jface { width: 46px; height: 46px; }
  .vp-opt { padding: 6px 10px; }
  .vp-map { height: 180px; }
  .vp-places > li { grid-template-columns: minmax(0, 1fr); }
  .vp-places > li .vp-btn-sm { justify-self: start; margin-left: 36px; }
  .vp-step h2 { font-size: 20px; }
}

/* Oct 22 evening: registration notice, uncontested note, judge links up top */
.vp-notice { display: grid; gap: 4px; background: #fbf3df; border: 1px solid #ecd9a6; border-radius: 10px; padding: 10px 14px; margin-top: -6px; }
.vp-notice p { margin: 0; font-size: 13px; color: #3a4654; line-height: 1.45; }
.vp-notice p + p { color: #566271; }
.vp-notice a { color: #1e3a5f; font-weight: 700; }
.vp-unc { color: #15202c; }
.vp-jlinks { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; font-weight: 700; }
.vp-jlinks a { color: #1e3a5f; text-decoration: underline; text-underline-offset: 2px; }

/* Send my plan (Oct 22 2026) */
.vp-send { display: grid; gap: 6px; margin-top: 10px; }
.vp-send-lbl { font-size: 13px; font-weight: 600; color: #3a4654; }
.vp-send-row { display: flex; gap: 6px; flex-wrap: wrap; }
.vp-send-row .vp-btn-sm { flex: 1 1 0; text-align: center; padding: 9px 8px; }
.vp-send-note { font-size: 12px; color: #7a8696; }

/* Candidate summaries (Oct 2026) */
.vp-cand { align-items: flex-start; }
.vp-bio { font-size: 13px; color: #3a4654; line-height: 1.4; }
.vp-bio-none { color: #7a8696; font-style: italic; }
.vp-bio-more { font-size: 12px; color: #3a4654; }
.vp-bio-more summary { cursor: pointer; font-weight: 700; color: #1e3a5f; }
.vp-bio-more ul { margin: 4px 0 6px; padding-left: 16px; display: grid; gap: 2px; }
.vp-bio-more a { color: #1e3a5f; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.vp-bio-h { margin: 6px 0 0; font-weight: 700; color: #566271; }
.vp-bio-src { margin: 4px 0 0; }
.vp-sum-note { margin: 0 0 12px; color: #566271; }
.vp-sum-note a { color: #1e3a5f; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Oct 23: compact judges, one open/close row per court */
.vp-jgrp { border-top: 1px solid #e3e7ec; }
.vp-jgrp:last-of-type { border-bottom: 1px solid #e3e7ec; }
.vp-jgrp > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 10px 2px; cursor: pointer; list-style: none; }
.vp-jgrp > summary::-webkit-details-marker { display: none; }
.vp-jgrp > summary::after { content: 'Show'; margin-left: auto; font-size: 13px; font-weight: 700; color: #1e3a5f; }
.vp-jgrp[open] > summary::after { content: 'Hide'; }
.vp-jgrp > summary:focus-visible { outline: 2px solid #1e3a5f; outline-offset: 2px; border-radius: 6px; }
.vp-jgrp .vp-jgroup { margin: 0; }
.vp-jgsum { font-size: 13px; color: #566271; }
.vp-jgrp[open] > .vp-judges { padding-bottom: 12px; }
.vp-judges { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 8px; }
.vp-judge { padding: 9px 10px; gap: 10px; }
.vp-jface { width: 42px; height: 42px; margin: 3px; }
.vp-jbody { gap: 2px; }
.vp-jname { font-size: 14px; }

/* Oct 23: guided mode (js/vote-guide.js), one part of the ballot at a time */
.vp-guide { scroll-margin-top: 80px; }
.vp-guided .vp-g-hide, .vp-guided #vp-jump, .vp-guided #vp-step-ballot, .vp-guided #vp-step-return, .vp-guided #vp-steps { display: none !important; }
.vp-guided:not(.vp-g-first) #vp-notice { display: none; }
.vp-guided:not(.vp-g-cands) #vp-sum-note, .vp-guided:not(.vp-g-cands) #vp-ballot-note { display: none; }
.vp-gbar { list-style: none; margin: 0; padding: 0 0 2px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; view-transition-name: vp-gbar; }
.vp-gbar::-webkit-scrollbar { display: none; }
.vp-gbar li { flex: 1 0 auto; }
.vp-gbar button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; font: inherit; font-size: 13px; font-weight: 700; color: #566271; background: #fff; border: 1px solid #d2d8df; border-radius: 99px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.vp-gbar button:hover { border-color: #1E3A5F; }
.vp-gbar .n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #eef1f4; font-size: 11px; }
.vp-gbar li.is-done button { color: #1d5a3a; border-color: #bcdcc8; background: #f3f9f5; }
.vp-gbar li.is-done .n { background: #1d5a3a; color: #fff; }
.vp-gbar li.is-cur button { color: #fff; background: #1E3A5F; border-color: #1E3A5F; }
.vp-gbar li.is-cur .n { background: #F2C14E; color: #1E3A5F; }
.vp-gmode-row { margin: 6px 0 10px; text-align: right; }
.vp-gmode { font: inherit; font-size: 13px; font-weight: 700; color: #1E3A5F; background: none; border: 0; padding: 4px 2px; text-decoration: underline; cursor: pointer; }
.vp-gnav { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; }
.vp-gnext { margin-left: auto; }
.vp-gnav .al-btn small { font-weight: 600; opacity: .8; margin-left: 4px; }
.vp-ginter { display: grid; place-items: center; align-content: center; text-align: center; gap: 6px; min-height: 220px; border-radius: 16px; background: #1E3A5F; color: #fff; padding: 28px 16px; cursor: pointer; }
.vp-ginter span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #F2C14E; }
.vp-ginter b { font-size: 28px; line-height: 1.15; }
.vp-ginter small { font-size: 14px; color: #dbe3ec; }
.vp-guided .vp-g-cur, .vp-ginter { view-transition-name: vp-step; }
@keyframes vpg-in { from { opacity: 0; transform: translateX(32px); } }
@keyframes vpg-in-back { from { opacity: 0; transform: translateX(-32px); } }
@keyframes vpg-out { to { opacity: 0; transform: translateX(-32px); } }
@keyframes vpg-out-back { to { opacity: 0; transform: translateX(32px); } }
::view-transition-old(vp-step) { animation: vpg-out .2s ease-in both; }
::view-transition-new(vp-step) { animation: vpg-in .32s cubic-bezier(.2, .8, .2, 1) both; }
html.vpg-back::view-transition-old(vp-step) { animation-name: vpg-out-back; }
html.vpg-back::view-transition-new(vp-step) { animation-name: vpg-in-back; }
::view-transition-group(vp-gbar) { animation-duration: .3s; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
.vpg-anim { animation: vpg-in .32s cubic-bezier(.2, .8, .2, 1) both; }
html.vpg-back .vpg-anim { animation-name: vpg-in-back; }
.vp-src-more > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.vp-src-more > summary::-webkit-details-marker { display: none; }
.vp-src-more > summary h2 { margin: 0; }
.vp-src-more > summary::after { content: 'Show'; margin-left: auto; font-size: 13px; font-weight: 700; color: #1E3A5F; }
.vp-src-more[open] > summary::after { content: 'Hide'; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .vpg-anim { animation: none; }
}
@media (max-width: 900px) {
  .vp-gbar li { flex: 0 0 auto; }
}
@media print {
  .vp-guided .vp-g-hide { display: block !important; }
  .vp-guide, .vp-gnav, .vp-ginter { display: none !important; }
}

/* Oct 23 late: guided mode as one flowing sheet instead of stacked boxes */
.vp-guided .vp-main { background: #fff; border-radius: 20px; padding: 26px 32px 22px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 30px rgba(16, 24, 40, .06); }
.vp-guided .vp-main > .al-card { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; border-radius: 0; }
.vp-guided .vp-g-cur::before { content: attr(data-step); display: block; margin: 6px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8A6410; }
.vp-guided .vp-g-cur > h2 { font-size: 24px; }
.vp-guided .vp-gbar { gap: 4px; padding-bottom: 0; }
.vp-guided .vp-gbar li { flex: 1 1 0; min-width: 84px; }
.vp-guided .vp-gbar button { justify-content: flex-start; background: none; border: 0; border-top: 3px solid #e3e8ee; border-radius: 0; padding: 9px 2px 2px; color: #7a8696; font-weight: 600; }
.vp-guided .vp-gbar button:hover { border-top-color: #b8c3cf; color: #1E3A5F; }
.vp-guided .vp-gbar .n { display: none; }
.vp-guided .vp-gbar li.is-done button { border-top-color: #1E3A5F; color: #1E3A5F; background: none; }
.vp-guided .vp-gbar li.is-done button::after { content: '\2713'; margin-left: 5px; color: #1d5a3a; }
.vp-guided .vp-gbar li.is-cur button { border-top-color: #E9B73E; color: #1E3A5F; font-weight: 800; background: none; }
.vp-guided .vp-gmode-row { margin: 4px 0 16px; }
.vp-guided .vp-ginter { background: transparent; color: #1E3A5F; border-radius: 0; min-height: 260px; }
.vp-guided .vp-ginter span { color: #8A6410; }
.vp-guided .vp-ginter b { font-size: 32px; color: #1E3A5F; }
.vp-guided .vp-ginter b::after { content: ''; display: block; width: 44px; height: 3px; margin: 12px auto 0; border-radius: 3px; background: #E9B73E; animation: vpg-line .7s ease-out both; }
.vp-guided .vp-ginter small { color: #566271; }
@keyframes vpg-line { from { width: 0; } }
.vp-guided .vp-gnav { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid #eef1f4; }
.vp-guided .vp-gback { background: none; border: 0; box-shadow: none; color: #1E3A5F; padding-left: 0; }
.vp-guided .vp-gback::before { content: '\2190\00a0'; }
.vp-guided .vp-gnext { border-radius: 99px; padding-left: 20px; padding-right: 20px; }
.vp-guided .vp-gnext::after { content: '\00a0\2192'; }
.vp-guided .vp-judges { column-gap: 28px; row-gap: 0; }
.vp-guided .vp-judge { border: 0; border-bottom: 1px solid #eef1f4; border-radius: 0; background: transparent; padding: 12px 0; }
.vp-guided .vp-judge.warn { box-shadow: inset 3px 0 0 #E8A77A; padding-left: 12px; }
.vp-guided .vp-jgrp { border-color: #eef1f4; }
@media (max-width: 640px) {
  .vp-guided .vp-main { padding: 18px 16px 16px; border-radius: 16px; }
  .vp-guided .vp-g-cur > h2 { font-size: 21px; }
  .vp-guided .vp-ginter b { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .vp-ginter b::after { animation: none; } }

/* Oct 23: title, date and intro sit at the top of the address card; AI note lives in the sources box */
.vp-find > .vp-hero { margin: 0 0 16px; padding: 0 0 16px; border: 0; border-bottom: 1px solid #eef1f4; border-radius: 0; background: none; box-shadow: none; text-align: left; color: #15202c; }
.vp-find > .vp-hero h1 { margin: 0 0 6px; color: #1E3A5F; }
.vp-find > .vp-hero .al-sub { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8A6410; }
.vp-find > .vp-hero .al-lede { margin: 0; color: #3a4654; }
.vp-sources p { margin: 8px 0 0; }

/* Oct 23: taller title card with more shape (honey bar, varied line lengths, faint hex mark) */
.vp-find { position: relative; padding-top: 34px; padding-bottom: 28px; }
.vp-find::after { content: ''; position: absolute; right: 18px; top: 18px; width: 170px; height: 170px; pointer-events: none; z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 3.5 L57 18 L57 46 L32 60.5 L7 46 L7 18 Z' fill='%23F3F5F7' stroke='%23F3F5F7' stroke-width='3' stroke-linejoin='round'/%3E%3Cg fill='%23ffffff'%3E%3Crect x='18' y='39' width='28' height='7' rx='3.5'/%3E%3Crect x='20.5' y='31.5' width='23' height='7' rx='3.5'/%3E%3Crect x='23.5' y='24' width='17' height='7' rx='3.5'/%3E%3Crect x='27.5' y='17.5' width='9' height='6' rx='3'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; }
.vp-find > * { position: relative; z-index: 1; }
.vp-find > .vp-hero { padding-bottom: 22px; margin-bottom: 22px; }
.vp-find > .vp-hero .al-sub::before { content: ''; display: block; width: 44px; height: 3px; border-radius: 3px; background: #E9B73E; margin-bottom: 12px; }
.vp-find > .vp-hero h1 { font-size: clamp(30px, 4.4vw, 42px); line-height: 1.1; letter-spacing: -.01em; max-width: 14ch; }
.vp-find > .vp-hero .al-lede { max-width: 54ch; font-size: 16px; line-height: 1.55; }
.vp-find #vp-find-h, .vp-find .vp-form, .vp-find .vp-msg { max-width: 600px; }
@media (max-width: 640px) {
  .vp-find { padding-top: 24px; }
  .vp-find::after { width: 96px; height: 96px; right: 12px; top: 12px; }
}
@media print { .vp-find::after { display: none; } }

/* Oct 23: the site's own primary logo in the title card (replaces the faint watermark) */
.vp-find::after { content: none; }
.vp-find > .vp-hero { padding-right: 96px; }
.vp-hero .vp-logo { position: absolute; right: 0; top: 0; width: 72px; height: 72px; }
@media (max-width: 640px) {
  .vp-find > .vp-hero { padding-right: 60px; }
  .vp-hero .vp-logo { width: 48px; height: 48px; }
}

/* Oct 23: larger logo in the title card */
.vp-find > .vp-hero { padding-right: 150px; min-height: 120px; }
.vp-hero .vp-logo { width: 120px; height: 120px; top: -4px; }
@media (max-width: 640px) {
  .vp-find > .vp-hero { padding-right: 76px; min-height: 0; }
  .vp-hero .vp-logo { width: 64px; height: 64px; top: 0; }
}

/* Oct 23: logo a touch larger */
.vp-find > .vp-hero { padding-right: 166px; min-height: 136px; }
.vp-hero .vp-logo { width: 136px; height: 136px; top: -6px; }
@media (max-width: 640px) {
  .vp-find > .vp-hero { padding-right: 84px; min-height: 0; }
  .vp-hero .vp-logo { width: 72px; height: 72px; top: 0; }
}

/* AI note sits in the sources box and always shows there */
.vp-sources .vp-sum-note, .vp-guided .vp-sources #vp-sum-note { display: block !important; }

/* Oct 24: guided mode keeps the sidebar; on phones the plan card shows on the Return it step */
@media (max-width: 900px) { .vp-guided:not(.vp-g-ret) #vp-cal { display: none; } }

/* Oct 24: tap a candidate card to pick; "Your plan" button and sheet on phones */
.vp-cands > .vp-tap { cursor: pointer; transition: box-shadow .15s; }
.vp-cands > .vp-tap:hover { box-shadow: 0 0 0 2px #c9d3de; }
.vp-cands > .vp-tile-on, .vp-cands > .vp-tile-on:hover { box-shadow: 0 0 0 2px #1E3A5F; }
.vp-fab, .vp-sheet-back, .vp-sheet-x { display: none; }
@keyframes vp-sheet-up { from { transform: translateY(100%); } }
@media (max-width: 900px) {
  .vp-fab { display: inline-flex; align-items: center; gap: 8px; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 55; font: inherit; font-size: 15px; font-weight: 800; color: #fff; background: #1E3A5F; border: 0; border-radius: 99px; padding: 12px 18px; box-shadow: 0 6px 20px rgba(16, 24, 40, .25); cursor: pointer; }
  .vp-fab small { font-size: 12px; font-weight: 800; color: #1E3A5F; background: #F2C14E; border-radius: 99px; padding: 2px 8px; }
  .vp-guided.vp-g-ret .vp-fab { display: none; }
  #main-content { padding-bottom: 76px; }
  body.vp-sheet-open { overflow: hidden; }
  body.vp-sheet-open .vp-sheet-back { display: block; position: fixed; inset: 0; z-index: 58; background: rgba(16, 24, 40, .45); }
  body.vp-sheet-open #vp-cal { display: block !important; position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 60; width: auto; max-width: none; max-height: 85vh; overflow-y: auto; margin: 0; border-radius: 18px 18px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(16, 24, 40, .2); animation: vp-sheet-up .25s ease-out; }
  body.vp-sheet-open .vp-sheet-x { display: block; position: sticky; top: 0; z-index: 1; margin: 0 0 6px auto; font: inherit; font-size: 14px; font-weight: 700; color: #1E3A5F; background: #fff; border: 1px solid #d2d8df; border-radius: 99px; padding: 6px 14px; cursor: pointer; }
  body.vp-sheet-open .vp-fab { display: none; }
}
@media (prefers-reduced-motion: reduce) { body.vp-sheet-open #vp-cal { animation: none; } }
@media print { .vp-fab, .vp-sheet-back, .vp-sheet-x { display: none !important; } }

/* address suggestions */
.vp-form { position: relative; z-index: 30; }
.vp-form label { position: relative; }
.vp-sug { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin: 4px 0 0; padding: 4px 0; list-style: none; background: #fff; border: 1px solid #c9d4e2; border-radius: 8px; box-shadow: 0 6px 18px rgba(30,58,95,.15); max-height: 260px; overflow: auto; text-align: left; }
.vp-sug-o { padding: 9px 12px; cursor: pointer; font-size: 14px; font-weight: 500; color: #1d2733; }
.vp-sug-o:hover, .vp-sug-o.on { background: #e8eef6; }
.vp-sug-h { padding: 6px 12px; font-size: 12px; color: #66727f; }

/* also on your ballot */
.vp-local-links { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.vp-local-links a { color: #1e3a5f; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* track your ballot */
.vp-plan-track { margin: 6px 0 10px; font-size: .9rem; line-height: 1.45; }
.vp-plan-track a { color: #1e3a5f; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* state school board and county offices */
.vp-local-h { margin: 18px 0 2px; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: #566271; }
.vp-local-h + .vp-item { border-top: 0; padding-top: 6px; }
.vp-local-note { margin: 14px 0 0; padding: 8px 10px; background: #f4f6f9; border-radius: 6px; font-size: 13px; color: #3a4654; }
.vp-local-src a { color: #1e3a5f; text-decoration: underline; text-underline-offset: 2px; }

/* rest of your ballot (compact) */
#vp-county { padding-top: 12px; padding-bottom: 12px; }
.vp-rest > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.vp-rest > summary::-webkit-details-marker { display: none; }
.vp-rest > summary::before { content: "\25B8"; color: #1e3a5f; font-size: 14px; transition: transform .15s; }
.vp-rest[open] > summary::before { transform: rotate(90deg); }
.vp-rest-title { font-size: 17px; font-weight: 700; color: #1e3a5f; }
.vp-rest-count { font-size: 13px; color: #566271; }
.vp-rest-body { margin-top: 6px; }
.vp-rest-h { margin: 14px 0 4px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #566271; }
.vp-rest-h span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.vp-rest-list { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.45; }
.vp-rest-list li { padding: 4px 0; border-bottom: 1px solid #eef1f4; }
.vp-rest-office { font-weight: 700; color: #1e3a5f; }
.vp-rest-names small { color: #566271; }
.vp-rest-names em { font-style: normal; font-size: 12px; color: #566271; }
.vp-rest-note { display: block; color: #566271; }
.vp-rest-dim { font-size: 13px; }
.vp-rest-dim .vp-rest-office { font-weight: 600; }
.vp-rest-sub { margin: 8px 0 2px; font-size: 12px; color: #566271; }
.vp-rest-msg { margin: 4px 0; font-size: 13px; color: #566271; }
.vp-rest-src { margin: 4px 0 0; font-size: 12px; color: #566271; }
.vp-rest-src a { color: #1e3a5f; text-decoration: underline; }

/* rest of the ballot: small, outside the guided steps */
.vp-extra { margin: 28px 0 8px; padding: 14px 4px 0; border-top: 1px dashed #cfd6de; }
.vp-extra-part { margin: 0 0 14px; padding: 0; background: none; border: 0; box-shadow: none; }
.vp-extra-part .al-h { font-size: 15px; margin: 0 0 4px; color: #3a4654; }
.vp-extra-part .al-small, .vp-extra-part .vp-local-links { font-size: 13px; }
.vp-extra #vp-county { padding: 0; }
.vp-extra .vp-rest-title { font-size: 15px; color: #3a4654; }

/* Oct 24: cohesion pass. Type scale 13 small / 15 body / 17 item / 21 section / 28 guided step / 40 title.
   Headings bold (the site reset makes h2/h3 regular), labels in sentence case, one Show/Hide disclosure pattern. */
.vp h2, .vp h3, .vp h4 { font-weight: 700; }
.vp .al-h { font-size: 21px; line-height: 1.25; color: #1E3A5F; }
.vp .vp-side .al-h { font-size: 19px; }
.vp .vp-sources .al-h, .vp .vp-src-more > summary h2 { font-size: 17px; }
.vp .vp-extra-part .al-h { font-size: 15px; color: #3a4654; }
.vp-item-h { font-size: 17px; }
.vp-guided .vp-g-cur > h2 { font-size: 28px; line-height: 1.15; color: #1E3A5F; }
@media (max-width: 640px) { .vp .al-h { font-size: 19px; } .vp-guided .vp-g-cur > h2 { font-size: 24px; } }

/* labels: sentence case, no letter-spacing */
.vp-find > .vp-hero .al-sub { text-transform: none; letter-spacing: 0; font-size: 15px; }
.vp-guided .vp-g-cur::before { text-transform: none; letter-spacing: 0; font-size: 14px; }
.vp-guided .vp-ginter span { text-transform: none; letter-spacing: 0; font-size: 14px; }
.vp-spot-tag { text-transform: none; letter-spacing: 0; font-size: 13px; }
.vp-pick-lbl { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 700; color: #566271; }
.vp-record h5 { text-transform: none; letter-spacing: 0; font-size: 13px; }
.vp-rest-h, .vp-local-h { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 700; color: #1E3A5F; }

/* one disclosure pattern: title on the left, Show / Hide on the right (same as judges and sources) */
.vp-rest > summary::before { content: none; }
.vp-rest > summary::after { content: 'Show'; margin-left: auto; font-size: 13px; font-weight: 700; color: #1E3A5F; }
.vp-rest[open] > summary::after { content: 'Hide'; }
.vp-rest > summary:focus-visible, .vp-src-more > summary:focus-visible { outline: 3px solid #D8A62A; outline-offset: 2px; border-radius: 6px; }

/* the rest of the ballot shows once: on the Amendments step in guided mode, at the end of the full list */
.vp-guided #vp-extra { display: none; }
.vp-guided:has(#vp-amend.vp-g-cur) #vp-extra { display: block; }

/* Your plan card: labels don't wrap, both calendar buttons look the same (print stays the one gold button) */
.vp-prog li a { white-space: nowrap; }
.vp-cal-row .al-btn, .vp-cal-row .al-btn.navy { background: #fff; color: #1E3A5F; border: 1px solid #d2d8df; }
.vp-cal-row .al-btn:hover { border-color: #1E3A5F; }

/* also on your ballot: plain stacked links */
.vp-local-links { list-style: none; padding-left: 0; }

/* phones: "My pick" on its own line so the choices wrap evenly */
@media (max-width: 640px) { .vp-pick-row .vp-pick-lbl { flex-basis: 100%; margin: 0 0 2px; } }

/* Oct 25: start screen (guided view, no address yet): only the title card, the address box and the Start here card */
.vp-g-start #vp-notice, .vp-g-start #vp-cal, .vp-g-start .vp-sources, .vp-g-start .vp-fab, .vp-g-start .vp-sheet-back { display: none !important; }
@media (min-width: 901px) { .vp-g-start .vp-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "find" "main"; } }

/* Oct 25 (vp-steps-off): the three-step explainer under the address box is gone; the title line and the Start here card cover it */
#vp-steps { display: none !important; }

/* Oct 25: phones, nothing wider than the screen (the step bar was stretching the ballot sheet) */
.vp-layout > *, .vp-main > *, .vp-cands > *, .vp-judges > * { min-width: 0; }
.vp-gbar { max-width: 100%; min-width: 0; }
.vp-cand-body, .vp-bio, .vp-rest-list, .vp-local-links, .vp-notice p { overflow-wrap: break-word; }
.vp { overflow-x: clip; }
@media (max-width: 900px) {
  .vp-guided .vp-gbar li { flex: 0 0 auto; min-width: 0; }
  .vp-guided .vp-gbar button { padding-right: 12px; }
}

/* Oct 25: the vote page never scrolls sideways (vote.css loads only on this page) */
html, body { overflow-x: clip; max-width: 100%; }