/* ============================================================
   استطلاع الانتخابات — standalone poll page.
   Scoped under .ep-* so nothing here can collide with the global
   bundle (the .pick / .ph / .cb class-collision problem).
   ============================================================ */

.ep-wrap{max-width:720px;margin:20px auto 40px}

/* ---------- brand mark ----------
   The whole site header is gone from this page, so the logo is the only
   thing carrying identity. Centred over the hero, and a link home for
   anyone who does want to leave. */
.ep-brand{display:flex;justify-content:center;margin-top:30px;padding:22px 16px 14px}
.ep-brand a{display:inline-flex;align-items:center;
  /* logo.svg paints with fill="currentColor", so it was inheriting the dark
     body ink and vanishing into the night sky. One colour, no filter hack. */
  color:#fff;
  transition:transform .18s,opacity .18s}
.ep-brand a:hover{transform:scale(1.04)}
.ep-brand a:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:4px}
.ep-brand svg{height:56px;width:auto;display:block;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55))}
@media (max-width:720px){
  .ep-brand{margin-top:18px;padding:16px 16px 10px}
  .ep-brand svg{height:44px}
}

/* ---------- hero ----------
   Typography lifted from the share card (assets/img/sharing/election-poll.jpg):
   a solid red badge for the kicker, a heavy white headline, and the red+blue
   rule that flanks "2026" there. Colours sampled from the artwork itself —
   badge #BD0101, rules #DF0F13 / #088AF4 — so page and card read as one set. */
.ep-hero{background:linear-gradient(115deg,#001C63 0%,#012C7E 48%,#0D4492 100%);
  color:#fff;border-radius:var(--radius) var(--radius) 0 0;padding:26px 24px 24px;
  position:relative;overflow:hidden;text-align:center}
.ep-hero::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.04) 0 2px,transparent 2px 16px)}
.ep-hero>*{position:relative}

.ep-kk{display:inline-block;background:#BD0101;color:#fff;
  font-family:var(--font-head);font-size:12px;font-weight:800;letter-spacing:1.5px;
  padding:6px 16px;border-radius:3px;box-shadow:0 2px 10px rgba(0,0,0,.35)}

.ep-hero h1{font-size:29px;font-weight:800;line-height:1.5;
  margin:14px auto 0;max-width:600px;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.55)}

/* the red + blue rule that flanks 2026 on the card */
.ep-rule{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px auto 14px}
.ep-rule i{display:block;height:4px;width:56px;border-radius:2px}
/* RTL flips source order, so first-child paints on the right. Swapped so the
   pair matches the card, where red sits left of 2026 and blue right. */
.ep-rule i:first-child{background:#088AF4}
.ep-rule i:last-child{background:#DF0F13}

.ep-cd{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);border-radius:999px;height:34px;padding:0 16px;
  font-family:var(--font-head);font-weight:800;font-size:12.5px;font-variant-numeric:tabular-nums}
.ep-cd i{width:7px;height:7px;border-radius:50%;background:#fff;animation:ep-blink 1.2s infinite}
@keyframes ep-blink{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.ep-cd i{animation:none}}

.ep-card{background:var(--surface);border-radius:0 0 var(--radius) var(--radius);
  box-shadow:0 1px 3px rgba(19,19,22,.09);overflow:hidden;margin-bottom:14px}

/* ---------- options ---------- */
.ep-opt{display:flex;align-items:center;gap:13px;padding:14px 18px;border-bottom:1px solid var(--line);
  cursor:pointer;transition:background .12s;min-height:60px}
.ep-opt:last-of-type{border-bottom:none}
.ep-opt:hover{background:var(--surface-2)}
.ep-opt .cb{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-strong);
  flex-shrink:0;position:relative;transition:.15s}
.ep-opt.sel .cb{border-color:var(--red)}
.ep-opt.sel .cb::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--red)}
.ep-opt .bar{width:5px;align-self:stretch;border-radius:3px;flex-shrink:0}
.ep-opt .nm{min-width:0}
.ep-opt .nm b{font-size:14.5px;font-weight:800;display:block;line-height:1.55}
.ep-opt .nm small{font-size:11px;color:var(--muted);display:block;margin-top:2px}
.ep-opt.sel .nm b{color:var(--red)}

.ep-foot{padding:16px 18px}
.ep-vote{width:100%;height:52px;background:var(--red);color:#fff;border-radius:4px;
  font-family:var(--font-head);font-weight:800;font-size:16px;transition:.15s;line-height:1}
.ep-vote:hover:not([disabled]){background:var(--red-deep)}
.ep-vote[disabled]{opacity:.45;cursor:not-allowed}
.ep-vote.busy{opacity:.7;pointer-events:none}
.ep-note{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;
  color:var(--muted);margin-top:11px;line-height:1.7;text-align:center}
.ep-err{color:var(--red);font-weight:700}

/* ---------- results ---------- */
.ep-resh{display:flex;align-items:center;gap:10px;padding:16px 18px 6px}
.ep-resh .ok{width:34px;height:34px;border-radius:50%;background:rgba(29,138,78,.14);color:#1d8a4e;
  display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;flex-shrink:0}
.ep-resh b{font-family:var(--font-head);font-weight:800;font-size:15px;display:block}
.ep-resh small{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.ep-row{display:grid;grid-template-columns:auto minmax(0,1fr) 52px;gap:12px;align-items:center;padding:10px 18px}
.ep-rt{min-width:0}
.ep-row .t{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.ep-row .t b{font-size:13px;font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-row .t small{font-size:10px;color:var(--muted);white-space:nowrap}
.ep-row .tr{height:10px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.ep-row .tr i{display:block;height:100%;border-radius:5px;transition:width .8s cubic-bezier(.2,.8,.3,1)}
.ep-row .pc{font-family:var(--font-head);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;text-align:left}
.ep-row.me{background:var(--red-soft)}
.ep-row.me .t b::after{content:" — صوتي";font-size:9.5px;color:var(--red);font-family:var(--font-head)}
.ep-tot{padding:10px 18px 16px;font-size:11.5px;color:var(--muted);text-align:center;
  font-variant-numeric:tabular-nums;line-height:1.8}

/* ---------- avatars: leader photo + party logo ----------
   Side by side, not badged on top of each other. The party logos are ballot
   slips (mostly 1.81 aspect, Hebrew/Arabic letters); squeezed into a 21px
   round badge they rendered ~21x12 and were unreadable, and the badge also
   covered the leader's shoulder. Two shapes, each in its own aspect:
   a circle for the person, a wide tile for the ballot letters.            */
.pv{display:flex;align-items:center;gap:8px;flex-shrink:0}
.pv .pho{width:52px;height:52px;border-radius:50%;object-fit:cover;display:block;flex-shrink:0;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line),0 1px 3px rgba(0,0,0,.12)}
.pv .pho.fb2{display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--muted)}
.pv .lg3{width:58px;height:32px;border-radius:5px;object-fit:contain;flex-shrink:0;
  padding:3px;box-shadow:0 1px 3px rgba(0,0,0,.3);
  /* DARK tile, deliberately: 7 of the 8 party logos are white ink on a
     transparent PNG (they are cut for a dark ballot slip), so a white tile
     rendered them invisible. الليكود is the one opaque, dark-ink-on-white
     logo and it still reads fine — it simply paints its own white card
     inside this one. */
  background:rgba(12,14,22,.82);
  border:1px solid rgba(255,255,255,.22)}
.pv .lg3.mono{display:flex;align-items:center;justify-content:center;padding:0;border:none;
  font-family:var(--font-head);font-weight:800;font-size:15px;color:#fff}

/* Results rows carry a percentage and a bar too, so the pair shrinks. */
.ep-row .pv{gap:6px}
.ep-row .pv .pho{width:38px;height:38px;font-size:17px}
.ep-row .pv .lg3{width:42px;height:24px;border-radius:4px;padding:2px;font-size:11px}

/* ---------- share + footer bits ---------- */
.ep-share{background:var(--surface);border-radius:var(--radius);box-shadow:0 1px 3px rgba(19,19,22,.09);
  padding:16px 18px;margin-bottom:14px;text-align:center}
.ep-share b{font-family:var(--font-head);font-weight:800;font-size:14px;display:block;margin-bottom:11px}
.ep-shrow{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:8px}
.ep-shrow a,.ep-shrow button{height:46px;border-radius:4px;font-family:var(--font-head);font-weight:800;
  font-size:12.5px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:.15s;line-height:1;color:#fff}
.ep-shrow .wa{background:#25D366}
.ep-shrow .fb{background:#1877F2}
.ep-shrow .tw{background:#131316}
.ep-shrow .cp{background:var(--surface-2);color:var(--ink);border:1px solid var(--line-strong)}
.ep-shrow a:hover,.ep-shrow button:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.18)}
.ep-more{text-align:center;font-size:12px;color:var(--muted);margin-bottom:8px}
.ep-more a{color:var(--red);font-weight:700}

.ep-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:#131316;color:#fff;
  font-family:var(--font-head);font-weight:800;font-size:12.5px;padding:11px 20px;border-radius:4px;
  opacity:0;transition:.25s;z-index:130;pointer-events:none}
.ep-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- app / WebView mode ---------- */
body.ka-app{background:var(--bg)}
body.ka-app .ep-wrap{margin-top:0}
body.ka-app .ep-hero{border-radius:0}
body.ka-app .container{padding:0}
body.ka-app .ep-more{display:none}

/* ---------- mobile ---------- */
@media (max-width:720px){
  .ep-wrap{margin:12px auto 28px}
  .ep-hero h1{font-size:18px}
  .ep-opt{min-height:56px;padding:12px 14px;gap:11px}
  .ep-opt .nm b{font-size:13.5px}
  .ep-row{padding:10px 14px;gap:10px}
  .ep-shrow{grid-template-columns:1fr 1fr}
  /* 320px still has to fit: checkbox + photo + logo + colour bar + two
     lines of text. The pair shrinks; it never wraps. */
  .pv{gap:6px}
  .pv .pho{width:44px;height:44px;font-size:20px}
  .pv .lg3{width:46px;height:26px;font-size:13px}
  .ep-row .pv .pho{width:34px;height:34px}
  .ep-row .pv .lg3{width:38px;height:22px}
}

/* ============================================================
   LANDING TREATMENT — full-bleed elections photo behind the page,
   with the site chrome and the cards floated over it at 80%.

   Everything here is scoped to body.ep-page so the shared header,
   nav and footer are only restyled on THIS page and every other
   page on the site is untouched.
   ============================================================ */

body.ep-page{background:transparent}

/* The photo. A fixed pseudo-element rather than
   background-attachment:fixed — iOS Safari does not honour that and
   the image would jump while scrolling. */
body.ep-page::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:var(--bg) url("../img/knesset-hero.jpg") center/cover no-repeat;
}

/* Readability scrim, shaped to THIS photograph.
   Measured band luminance: sky 62, floodlit Knesset facade 117, plaza 31.
   The bright band sits exactly where the ballot card lands, so the scrim is
   heaviest through the middle — the opposite of a generic top/bottom vignette,
   which would darken an already-dark sky and leave the card washed out. */
body.ep-page::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(6,9,20,.56) 0%,
    rgba(6,9,20,.62) 28%,
    rgba(6,9,20,.76) 50%,
    rgba(6,9,20,.70) 72%,
    rgba(6,9,20,.60) 100%);
}
:root:not([data-theme="light"]) body.ep-page::after{
  background:linear-gradient(180deg,
    rgba(3,5,12,.64) 0%,
    rgba(3,5,12,.70) 28%,
    rgba(3,5,12,.82) 50%,
    rgba(3,5,12,.76) 72%,
    rgba(3,5,12,.68) 100%);
}

/* ---- chrome + cards at 10% ----
   color-mix() derives the translucent tone from whatever the theme's own
   token is, so light and dark both stay correct with one declaration. The
   solid colour is declared first as the fallback for browsers without
   color-mix; they simply get the opaque original. */
body.ep-page footer,
body.ep-page .ep-card,
body.ep-page .ep-share{
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
}

body.ep-page .ep-card,
body.ep-page .ep-share{
  background:var(--surface);
  background:color-mix(in srgb, var(--surface) 10%, transparent);
}
body.ep-page footer{
  background:#1a1b1f;
  background:color-mix(in srgb, #1a1b1f 10%, transparent);
}

/* The hero keeps its brand gradient but lets the photo through, so the
   banner reads as part of the image instead of a sticker on top of it. */
body.ep-page .ep-hero{
  background:linear-gradient(115deg,
    color-mix(in srgb, #131316 10%, transparent) 0%,
    color-mix(in srgb, #3d1014 10%, transparent) 60%,
    color-mix(in srgb, var(--red) 10%, transparent) 150%);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

/* Cards need a visible edge once they are translucent, or they dissolve
   into the photo. */
body.ep-page .ep-card,
body.ep-page .ep-share{
  border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  box-shadow:0 8px 30px rgba(0,0,0,.28);
}

/* ============================================================
   COLOUR FLIP — at 10% the chrome and cards are essentially clear
   glass over a dark photograph, so every surface that was
   light-with-dark-text has to become dark-with-light-text or the
   text disappears. This is a per-page inversion; the shared header
   and footer are untouched everywhere else on the site.
   ============================================================ */

/* ---- footer ---- */
body.ep-page footer{border-top-color:rgba(255,255,255,.18)}
body.ep-page footer,
body.ep-page footer a{color:rgba(255,255,255,.86)}
body.ep-page footer h4,
body.ep-page footer .logo b{color:#fff}
body.ep-page .foot-bottom{border-top-color:rgba(255,255,255,.16)}

/* ---- poll card + share card ---- */
body.ep-page .ep-card,
body.ep-page .ep-share{color:#fff;border-color:rgba(255,255,255,.20)}
body.ep-page .ep-share b{color:#fff}
body.ep-page .ep-opt{border-bottom-color:rgba(255,255,255,.14)}
body.ep-page .ep-opt .nm b{color:#fff}
body.ep-page .ep-opt .nm small{color:rgba(255,255,255,.66)}
body.ep-page .ep-opt .cb{border-color:rgba(255,255,255,.5)}
body.ep-page .ep-opt.sel .nm b{color:#fff}
body.ep-page .ep-opt.sel .cb{border-color:#fff}
body.ep-page .ep-opt.sel .cb::after{background:#fff}
body.ep-page .ep-opt.sel{background:rgba(255,255,255,.14)}
body.ep-page .ep-opt:hover{background:rgba(255,255,255,.10)}
body.ep-page .ep-note{color:rgba(255,255,255,.72)}
body.ep-page .ep-err{color:#ff9d9d}

/* results */
body.ep-page .ep-resh b{color:#fff}
body.ep-page .ep-resh small,
body.ep-page .ep-row .t small,
body.ep-page .ep-tot{color:rgba(255,255,255,.68)}
body.ep-page .ep-row .t b,
body.ep-page .ep-row .pc{color:#fff}
body.ep-page .ep-row .tr{background:rgba(255,255,255,.16)}
body.ep-page .ep-row.me{background:rgba(255,255,255,.13)}
body.ep-page .ep-row.me .t b::after{color:#ffd6d6}

/* The avatar tiles stay light on purpose: a ballot logo is printed dark ink
   on white paper, and inverting it would misrepresent the ballot. */
body.ep-page .pv .lg3{background:rgba(10,12,20,.72);border-color:rgba(255,255,255,.3)}
body.ep-page .pv .pho{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 1px 3px rgba(0,0,0,.35)}

body.ep-page .ep-more{color:rgba(255,255,255,.88);text-shadow:0 1px 3px rgba(0,0,0,.5)}
body.ep-page .ep-more a{color:#ffd6d6}

/* Mobile: the photo is 1600x784, so `cover` crops it hard in portrait.
   Anchoring to the top keeps the subject rather than the floor. */
@media (max-width:720px){
  /* The old hero was 2.04 aspect and had to be top-anchored or it showed the
     floor. At 1.50 the building frames itself, centred. */
  body.ep-page::before{background-position:center center}
}

/* A photo behind everything is the definition of a decorative flourish. */
@media (prefers-reduced-transparency:reduce){
  body.ep-page footer,body.ep-page .ep-card,body.ep-page .ep-share{
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
}

/* ============================================================
   LANDING REFINEMENTS
   ============================================================ */



/* ---------------- mobile ---------------- */
@media (max-width:720px){

  /* 2. On a phone the hero gradient sat as an opaque slab over the photo and
        hid the very image it is meant to introduce. Drop the fill entirely and
        carry legibility on the type itself. */
  body.ep-page .ep-hero{
    background:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    padding:26px 18px 22px;
  }
  body.ep-page .ep-hero::before{display:none}
  body.ep-page .ep-hero h1{
    text-shadow:0 2px 10px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.95);
  }
  body.ep-page .ep-kk{text-shadow:0 1px 6px rgba(0,0,0,.9)}
  body.ep-page .ep-cd{
    background:rgba(0,0,0,.42);
    border-color:rgba(255,255,255,.35);
    text-shadow:0 1px 4px rgba(0,0,0,.8);
  }

  /* 4a. Four equal columns on mobile, matching the 25% guides in the design.
     responsive.css collapses the footer to 1fr 1fr; the link labels here are
     short enough to hold four, and it keeps the footer one screen instead of
     two. minmax(0,…) so a long label wraps rather than widening its track —
     the 1fr-floor overflow we have hit across this codebase. */
  body.ep-page .foot-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:18px 10px;
  }
  body.ep-page .foot-grid h4{font-size:13px;margin-bottom:8px}
  body.ep-page .foot-grid ul li a{font-size:12px;padding:5px 0;line-height:1.5}
  body.ep-page .foot-socials-col a span{font-size:12px}

  /* 4b. Newsletter spans all four columns instead of sitting in one. */
  body.ep-page .foot-news{grid-column:1/-1;width:100%;max-width:none}
  body.ep-page .foot-news p{max-width:none}
  /* responsive.css:196 stacks .nl-form on mobile; a full-width block wants
     the field and the button on one line, so the direction is restated. */
  /* The base rule caps the form at max-width:420px, which stops a "full
     width" block from actually being full width on wider phones/tablets. */
  body.ep-page .foot-news .nl-form{
    display:flex;flex-direction:row;width:100%;max-width:none;
  }
  body.ep-page .foot-news .nl-form input{flex:1;min-width:0}
  body.ep-page .foot-news .nl-form button{flex-shrink:0;padding:0 22px}

  /* 5. Social icons spread across the full row and get a real tap target —
        18px icons in a tight cluster were below the 44px minimum. */
  body.ep-page .foot-socials{
    display:flex;width:100%;justify-content:space-between;gap:6px;margin-top:18px;
  }
  body.ep-page .foot-socials a{
    flex:1;display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;border-radius:8px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.16);
    color:#fff;
  }
  body.ep-page .foot-socials .icon{width:24px;height:24px}

  body.ep-page .foot-legal{justify-content:center;gap:10px}


  /* 6. The developer credit inherited no size on mobile and rendered tiny. */
  body.ep-page .foot-dev{font-size:12.5px;gap:8px}
  body.ep-page .foot-dev img{height:18px}
}


/* ============================================================
   POST-VOTE: branded thank-you (first vote) and the locked
   notice (every return visit after that).
   ============================================================ */
.ep-thanks{text-align:center;padding:44px 22px 38px;
  background:linear-gradient(160deg,rgba(0,56,184,.22),transparent 70%);
  min-height:min(62vh,520px);display:flex;flex-direction:column;
  align-items:center;justify-content:center}
.ep-thanks__mark{display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;font-size:30px;font-weight:800;
  color:#fff;background:#1d8a4e;box-shadow:0 6px 22px rgba(29,138,78,.45);
  animation:ep-pop .45s cubic-bezier(.2,.9,.3,1.4) both}
@keyframes ep-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.ep-thanks__ttl{display:block;font-family:var(--font-head);font-weight:800;
  font-size:27px;margin-top:16px;color:#fff;letter-spacing:.5px}
.ep-thanks__sub{font-size:16px;line-height:1.9;margin-top:10px;max-width:34ch;
  color:rgba(255,255,255,.92)}
.ep-thanks__sub strong{color:#fff;font-weight:800}
.ep-thanks__note{font-size:11.5px;color:rgba(255,255,255,.62);margin-top:8px}
/* Grid, not flex-wrap. With a full-width sentence on the first line, wrapping
   flex items produced a ragged row — two buttons crushed onto the sentence's
   line and two oversized ones below. A grid gives every button the same track
   whatever the text does. */
.ep-thanks__share{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16)}
/* A full sentence now, not a label — needs line-height and a measure, or it
   runs edge to edge and reads like a caption. */
.ep-thanks__share span{grid-column:1/-1;font-size:12.5px;line-height:1.75;
  color:rgba(255,255,255,.72);max-width:42ch;margin:0 auto 4px;text-align:center}
.ep-thanks__share a,.ep-thanks__share button{
  height:44px;min-width:0;padding:0 10px;border-radius:8px;color:#fff;
  font-family:var(--font-head);font-weight:800;font-size:12.5px;
  display:inline-flex;align-items:center;justify-content:center;transition:.15s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ep-thanks__share .wa{background:#25D366}
.ep-thanks__share .fb{background:#1877F2}
.ep-thanks__share .tw{background:#131316}
.ep-thanks__share .cp{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3)}
.ep-thanks__share a:hover,.ep-thanks__share button:hover{transform:translateY(-2px)}

/* Locked notice — the returning-voter state. */
.ep-locked{display:flex;align-items:flex-start;gap:11px;padding:16px 18px;
  border-bottom:1px solid rgba(255,255,255,.14)}
.ep-locked .ok{width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:rgba(29,138,78,.2);color:#4ad48a;
  display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:800}
.ep-locked b{display:block;font-family:var(--font-head);font-weight:800;font-size:14.5px;color:#fff}
.ep-locked small{display:block;font-size:11.5px;line-height:1.7;color:rgba(255,255,255,.68);margin-top:3px}

@media (max-width:720px){
  .ep-thanks{padding:26px 16px 20px}
  .ep-thanks__ttl{font-size:20px}
  .ep-thanks__share{grid-template-columns:1fr 1fr}
}

/* ============================================================
   Sticky vote bar (mobile).
   Injected at body level by election-poll.js once an option is chosen —
   it cannot be styled in place because .ep-card's backdrop-filter would
   trap position:fixed inside the card.
   ============================================================ */
/* Every width, not just mobile: the ballot is eleven rows tall, so the submit
   button falls below the fold on a laptop too. On wide screens the bar spans
   the viewport but its button is held to the column width, so the action stays
   where the eye already is instead of stretching across the screen. */
.ep-stickybar{
  position:fixed;inset-inline:0;bottom:0;z-index:60;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:rgba(9,12,24,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.18);
  box-shadow:0 -8px 24px rgba(0,0,0,.45);
  /* No transform in the resting state, deliberately. Every version of this that
     started off-screen — @keyframes with fill-mode, or a class added on rAF —
     leaves the bar one height BELOW the viewport whenever the thing that moves
     it does not run. The default is "visible and pinned"; the slide-in is a
     temporary inline transform set by JS, so the worst case is no animation. */
  transition:transform .22s ease-out;
}
.ep-stickybar .ep-vote{
  height:52px;font-size:16px;width:100%;
  max-width:720px;margin-inline:auto;display:block;
}

/* The in-flow button would be a second identical control a few pixels away,
   so it stands down while the bar is up. */
body.ep-armed .ep-foot .ep-vote{display:none}
body.ep-armed .ep-foot .ep-note{margin-top:0}

/* Reserve the space the bar occupies so the last option stays reachable. */
body.ep-armed .ep-wrap{padding-bottom:88px}
body.ep-done .ep-wrap{padding-bottom:0}

@media (prefers-reduced-motion:reduce){
  .ep-stickybar{transition:none}
}