/* EditEasy ballot (the friend's side). Loaded after style.css; every selector here is
   namespaced (.hudB, .panel, .voteB ...) so the creator screens never change.
   Rules: transform/opacity only for motion, touch targets >= 44px, safe-area insets,
   no ornament lines, Chakra Petch for display, Inter for UI, Heebo when the page is Hebrew. */

/* V_THE_PANEL_CLEARS_THE_FOOT — the legal footer is fixed to the bottom of every friend's page,
   so the band it occupies (8px + an 11px line + 8px, plus the home indicator) belongs to it and
   to nothing else. The panel and the progress line used to be anchored 22px and 8px off the same
   bottom edge and simply sat under it: inside Instagram on Android, where the viewport is short
   and the three save buttons wrap to three lines, Terms/Privacy/REPORT printed straight over
   them. One reserve, named once, and every bottom-anchored thing measures from it. */
.ballot { position: fixed; inset: 0; background: #000; overflow: hidden; --footH: 27px; }
.ballot .stage { position: absolute; inset: 0; will-change: transform; }

/* fades: the top keeps the HUD readable, the bottom keeps Chakra type off the marble */
.fadeT { position: absolute; inset-inline: 0; top: 0; height: 24%; background: linear-gradient(180deg, rgba(0,0,0,0.72), rgba(0,0,0,0)); pointer-events: none; }
.fadeB { position: absolute; inset-inline: 0; bottom: 0; height: 62%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.58) 45%, rgba(0,0,0,0.94) 100%); pointer-events: none; opacity: 0; transition: opacity 0.6s ease; }
.ballot.asking .fadeB, .ballot.done .fadeB { opacity: 1; }

/* HUD: brand, live count, the creator's name, a progress line. Nothing else. */
.hudB { position: absolute; inset-inline: 0; top: 0; padding: max(16px, env(safe-area-inset-top)) 18px 0; display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.liveB { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(0,0,0,0.55); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0; transition: opacity 0.4s ease; backdrop-filter: blur(6px); }
.liveB.show { opacity: 1; }
.liveB::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7ee8ff; }
.nameB { position: absolute; inset-inline-start: 18px; top: calc(max(16px, env(safe-area-inset-top)) + 50px); font-size: clamp(36px, 10vw, 52px); text-shadow: 0 2px 18px rgba(0,0,0,0.6); opacity: 0; transform: translateY(8px); transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s; max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chainB { position: absolute; inset-inline-start: 18px; top: calc(max(16px, env(safe-area-inset-top)) + 106px); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #c9c9ce; text-shadow: 0 1px 8px rgba(0,0,0,0.7); opacity: 0; transform: translateY(6px); transition: opacity 0.6s ease 0.7s, transform 0.6s ease 0.7s; max-width: 84%; }
.ballot.named .nameB, .ballot.named .chainB { opacity: 1; transform: none; }
.progB { position: absolute; inset-inline: 16px; bottom: calc(var(--footH) + 5px + env(safe-area-inset-bottom)); height: 3px; border-radius: 3px; background: rgba(255,255,255,0.16); overflow: hidden; pointer-events: none; }
.progB i { display: block; height: 100%; width: 100%; background: #f5f5f7; transform-origin: left center; transform: scaleX(0); }
html[dir="rtl"] .progB i { transform-origin: right center; }

/* quiet affordances */
.chipB { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(0,0,0,0.55); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #f5f5f7; align-self: flex-start; }
.chipB.cyan { color: #7ee8ff; }
.playTap { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.25); }
.playTap span { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 26px; border-radius: 999px; background: rgba(0,0,0,0.6); color: #f5f5f7; font-size: 13px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; backdrop-filter: blur(6px); }

/* the panel: the ask, then the result, in the bottom 40 percent so the object stays clean */
.panel { position: absolute; inset-inline: 16px; bottom: calc(var(--footH) + 18px + env(safe-area-inset-bottom)); max-height: calc(100% - 150px - var(--footH) - env(safe-area-inset-top)); display: flex; flex-direction: column; gap: 12px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; transform: translateY(40px); opacity: 0; pointer-events: none; transition: transform 0.55s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.4s ease; }
.panel::-webkit-scrollbar { display: none; }
.ballot.asking .panel, .ballot.done .panel { transform: none; opacity: 1; pointer-events: auto; }
.qB { font-size: clamp(38px, 11vw, 58px); text-shadow: 0 2px 18px rgba(0,0,0,0.6); transition: opacity 0.16s ease, transform 0.16s ease; }
.ballot.done .qB { opacity: 0; transform: scale(0.98); }
.qB.gone { display: none; }

/* two buttons; the pressed one grows into the number */
.votesB { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; transition: grid-template-columns 0.22s ease, gap 0.22s ease; }
.votesB.chose-yes { grid-template-columns: 1fr 0fr; gap: 0; }
.votesB.chose-no { grid-template-columns: 0fr 1fr; gap: 0; }
.voteB { min-width: 0; min-height: 84px; border-radius: 22px; display: flex; align-items: center; justify-content: center; gap: 10px; font-family: "Chakra Petch", Inter, sans-serif; font-weight: 700; font-size: 26px; text-transform: uppercase; letter-spacing: 0.04em; backdrop-filter: blur(6px); transition: transform 0.18s cubic-bezier(0.2, 1.4, 0.3, 1), opacity 0.22s ease, min-height 0.3s ease; overflow: hidden; }
.voteB.yes { background: linear-gradient(135deg, rgba(255,120,30,0.42), rgba(255,120,30,0.12)); border: 1px solid rgba(255,160,60,0.6); }
.voteB.no { background: linear-gradient(225deg, rgba(80,220,255,0.40), rgba(80,220,255,0.10)); border: 1px solid rgba(126,232,255,0.6); }
.voteB svg { display: block; flex: 0 0 auto; }
.voteB:active { transform: scale(0.96); }
.voteB.pressed { animation: spring 0.32s cubic-bezier(0.2, 1.4, 0.3, 1); }
@keyframes spring { 0% { transform: scale(0.96); } 55% { transform: scale(1.03); } 100% { transform: scale(1); } }
.votesB.chose-yes .voteB.no, .votesB.chose-no .voteB.yes { opacity: 0; border-width: 0; padding: 0; pointer-events: none; }
.voteB .num, .voteB .wy { display: none; }
.voteB.on { min-height: 104px; flex-direction: column; gap: 2px; padding: 10px 16px; line-height: 1; }
.voteB.on svg, .voteB.on .lbl { display: none; }
.voteB.on .num { display: block; font-size: clamp(72px, 21vw, 112px); line-height: 0.85; }
.voteB.on .num small { font-size: 0.45em; }
.voteB.yes.on .num { color: #ffb060; text-shadow: 0 0 40px rgba(255,176,96,0.35); }
.voteB.no.on .num { color: #7ee8ff; text-shadow: 0 0 40px rgba(126,232,255,0.35); }
.voteB.on .wy { display: block; font-family: Inter, sans-serif; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 700; color: #f5f5f7; }
html[dir="rtl"] .voteB.on .wy { font-family: Heebo, Inter, sans-serif; }
.hintB { text-align: center; font-size: 12px; letter-spacing: 0.16em; color: #a1a1a6; font-weight: 700; text-transform: uppercase; display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 26px; }
.hintB svg { display: block; }
.hintB circle.arc { stroke-dasharray: 62.8; stroke-dashoffset: 62.8; transform: rotate(-90deg); transform-origin: 13px 13px; animation: ringTurn 3s linear infinite; }
@keyframes ringTurn { 0% { stroke-dashoffset: 62.8; } 100% { stroke-dashoffset: 0; } }
.ballot.done .hintB { display: none; }

/* the big number when there is no chosen button to grow (full or closed link) */
.bigNum { font-size: clamp(72px, 21vw, 112px); line-height: 0.85; color: #7ee8ff; text-shadow: 0 0 40px rgba(126,232,255,0.35); }
.bigNum.yes { color: #ffb060; text-shadow: 0 0 40px rgba(255,176,96,0.35); }
.bigNum small { font-size: 0.45em; }

/* after the vote */
.after { display: none; flex-direction: column; gap: 8px; }
.after.in { display: flex; animation: rise 0.3s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.lineB { font-size: clamp(18px, 5.2vw, 24px); }
.subB { margin: 0; color: #a1a1a6; font-size: 13px; line-height: 1.45; }
.subB b { color: #f5f5f7; font-weight: 700; }
.groupB { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gcell { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 14px; background: rgba(255,255,255,0.07); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #a1a1a6; }
.gcell b { font-family: "Chakra Petch", Inter, sans-serif; font-size: 20px; color: #f5f5f7; letter-spacing: 0.02em; }
.ballot.done .chipB { display: none; }
.gcell.me { background: rgba(126,232,255,0.16); color: #7ee8ff; }
.passRow { display: flex; align-items: stretch; gap: 8px; }
.passRow .cta { flex: 1 1 0; min-width: 0; }
.nameOpt { display: flex; align-items: center; flex: 0 1 46%; min-width: 0; }
.nameOpt input { flex: 1 1 auto; width: 100%; min-height: 52px; border-radius: 14px; background: rgba(15,15,18,0.9); border: 1px solid #2c2c30; color: #f5f5f7; padding: 0 14px; font-size: 14px; }
.nameOpt input:focus { outline: none; border-color: #7ee8ff; }
.panel .cta { min-height: 52px; font-size: 18px; border-radius: 16px; }
.panel .row { gap: 8px; }
.panel .row .ghost { flex: 1 1 0; min-width: 0; min-height: 46px; font-size: 13px; padding: 0 8px; border-radius: 14px; background: rgba(0,0,0,0.35); backdrop-filter: blur(6px); text-align: center; line-height: 1.2; }
.panel .ghost[disabled] { opacity: 0.5; }

/* the verdict, on the stage: side flash on the podium glow, the stamp on the object */
.ballot .stage.flash-yes .glow, .ballot .stage.pulse-yes .glow { background: radial-gradient(ellipse at 50% 50%, rgba(255,176,96,0.75) 0%, rgba(255,140,40,0.28) 38%, transparent 72%); opacity: 1; }
.ballot .stage.flash-no .glow, .ballot .stage.pulse-no .glow { background: radial-gradient(ellipse at 50% 50%, rgba(126,232,255,0.8) 0%, rgba(80,220,255,0.28) 38%, transparent 72%); opacity: 1; }
.stamp { position: absolute; left: 0; top: 0; padding: 8px 18px; border-radius: 12px; border: 4px solid #7ee8ff; color: #7ee8ff; background: rgba(0,0,0,0.28); font-size: clamp(30px, 9vw, 46px); white-space: nowrap; letter-spacing: 0.06em; text-shadow: 0 2px 16px rgba(0,0,0,0.6); opacity: 0; transform: translate(-50%, -50%) scale(2.2); pointer-events: none; will-change: transform, opacity; }
.stamp.yes { border-color: #ffb060; color: #ffb060; }
.stamp.no { border-color: #7ee8ff; color: #7ee8ff; }

@media (prefers-reduced-motion: reduce) {
  .voteB.pressed { animation: none; }
  .hintB circle.arc { animation: none; stroke-dashoffset: 0; }
}

.panel a.ghost { text-decoration: none; }

/* film chrome on the ballot: the header carries name + product, so the old name line steps back;
   the plate and bar leave when the ask rises (the panel owns that band from then on).
   The chain line moves up under the HUD so it is ABOVE the film's header, never across it:
   the header is seated from the lowest of the two (chromeTop in ballot.html). */
.ballot .stage.chromed ~ .nameB { display: none; }
.ballot .stage.chromed ~ .chainB { top: calc(max(16px, env(safe-area-inset-top)) + 52px); }
/* the film loops whole now, so the sweep would restart forever behind the result */
.ballot.done .progB, .ballot.full .progB, .ballot.closed .progB { display: none; }
.ballot.asking .stage .plate, .ballot.done .stage .plate, .ballot.asking .stage .bar, .ballot.done .stage .bar { opacity: 0; transition: opacity 0.35s ease; }

/* Terms, privacy and REPORT on the page every friend sees. */
.legalFoot {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  font: 700 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.62);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.legalFoot a { color: rgba(255, 255, 255, 0.86); text-decoration: none; pointer-events: auto; }
.legalFoot a:hover, .legalFoot a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.legalFoot span { color: rgba(255, 255, 255, 0.45); }