/* listen/styles.css
   Page-specific for /listen: the facade, the humans line, the leaderboard
   poll and its skeleton, the compare exit, the message card and share block.
   Loads after tokens.css, base.css and form.css. Cut from
   MOCKUP_listen_funnel_v31_2026-09-23, v34 headline rule 2026-09-24. */
/* ---------- /listen page-specific ---------- */
.video{position:relative;aspect-ratio:16/9;width:100%;border-radius:var(--r-card);overflow:hidden;background:var(--navy-dark);border-bottom:3px solid var(--cornflower);margin-bottom:var(--sp-4)}
.video img{width:100%;height:100%;object-fit:cover}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* The facade, kg ruling 2 (2026-09-22): our poster, one play glyph in our
   tokens, iframe on tap. White disc, navy triangle. No YouTube chrome before play. */
.video .play{position:absolute;inset:0;margin:auto;width:68px;height:68px;border-radius:999px;border:0;background:#fff;box-shadow:0 8px 24px rgba(5,21,40,.45);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.video .play::after{content:"";display:block;width:0;height:0;border-style:solid;border-width:13px 0 13px 22px;border-color:transparent transparent transparent var(--navy);margin-left:5px}
.video .play:hover{background:var(--tint)}
.video .dur{position:absolute;right:12px;bottom:12px;background:rgba(5,21,40,.72);color:#fff;font-size:12px;font-weight:700;padding:4px 8px;border-radius:6px}
h1.invite__names{margin:0;font-size:32px;line-height:1.1;letter-spacing:-.02em}   /* v34 headline B, kg 2026-09-24: two lines, "I want to hear<br>from you." in the markup */
#issues-label{margin-bottom:var(--sp-2)}
#form-err{text-align:center;margin:0 0 var(--sp-3)}


/* ---------- live poll, on the invite and the decline close (kg 2026-09-22) ----------
   Share of respondents who picked each issue. Multi-select, so the column does
   not sum to 100. Bars are non-text marks and may take --cornflower (4.06:1
   against white clears the 3:1 UI floor); every number and label is navy.
   Always shown (kg 2026-09-22); the count line carries the honesty at small N.
   The respondent's own picks are marked, because the point of a poll like this
   is finding out how closely you match your neighbors (kg). */
.poll{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-control);padding:14px 14px 10px;margin:var(--sp-4) 0 0;text-align:left}
.poll__match{font-size:15px;line-height:1.4;font-weight:700;color:var(--navy);margin:0 0 10px;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:var(--r-field);text-wrap:balance}
.poll__match b{color:var(--cornflower-press)}
.poll__title{font-size:14px;font-weight:700;color:var(--navy);margin:0 0 2px}
.poll__sub{font-size:12.5px;color:var(--muted);margin:0 0 10px}
.poll__lbl{font-size:13px;color:var(--navy);display:flex;align-items:center;gap:6px;min-width:0}
.poll__pct{font-size:13px;font-weight:800;color:var(--navy);text-align:right;grid-row:span 2}
/* v30, kg 2026-09-23: the leaderboard. Rank, big percent, issue, a check on the person's picks, a dashed rule after third place, the count line at the foot. No bars. */
.lb{display:grid;grid-template-columns:22px 52px 1fr 24px;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line)}
.lb.mine{background:var(--tint);margin:0 -14px;padding-left:14px;padding-right:14px}
.lb__rank{font-size:12px;font-weight:800;color:var(--muted)} .lb__pct{font-size:20px;font-weight:800;color:var(--navy);letter-spacing:-.01em} .lb.mine .lb__pct{color:var(--cornflower-press)}
.lb__lbl{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--navy);min-width:0} .lb.mine .lb__lbl{font-weight:800} .lb__lbl .ico{font-size:16px}
.lb__chk{text-align:right;color:var(--cornflower-press);font-weight:800}
.lb__rest{border-top:1px dashed var(--field-border);margin:8px 0 6px;padding-top:6px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lb__foot{display:flex;justify-content:space-between;gap:10px;margin:8px 0 0;font-size:11.5px;color:var(--muted)}
.poll .poll__title{margin-bottom:2px}
/* 4C: skeleton while the poll fetches; placeholder and a text-link retry if it fails */
.sk{display:grid;grid-template-columns:22px 52px 1fr;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)} .sk i{display:block;height:12px;border-radius:4px;background:var(--line)} .sk i:first-child{width:10px;height:10px} .sk i:nth-child(2){height:18px;width:44px}
.poll__unavail{margin:6px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink)}



.btn--results{height:auto;min-height:52px;padding:10px 14px;background:var(--tint);color:var(--navy);border:1.5px solid var(--cornflower);font-size:15.5px;gap:10px;text-align:center;line-height:1.25}
.btn--results:hover{background:#fff}
/* the mini poll glyph: three bars in the three cornflower tokens, no emoji */
.bars{display:inline-flex;align-items:flex-end;gap:3px;height:18px;flex:none}
.bars i{display:block;width:6px;border-radius:2px 2px 0 0;background:var(--cornflower)}
.bars i:nth-child(1){height:18px;background:var(--cornflower-press-2)}
.bars i:nth-child(2){height:12px;background:var(--cornflower-press)}
.bars i:nth-child(3){height:8px}
.btn--results b{font-weight:800}

/* ---------- screen 3, the invite (modelled on /invite) ---------- */
/* v29, kg 2026-09-23: the message is a card with a header strip and a Copy pill; one green button under the sentence. */
.msgcard{border:1px solid var(--field-border);border-radius:var(--r-field);background:var(--panel);overflow:hidden;margin-top:8px}
.msgcard__bar{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 14px;border-bottom:1px solid var(--line);background:#fff}
.msgcard__k{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.copypill{font:inherit;font-size:13px;font-weight:700;color:var(--cornflower-press);background:#fff;border:1.5px solid var(--cornflower);border-radius:999px;padding:6px 12px;min-height:32px;cursor:pointer}
.copypill.done{background:var(--ok-bg);border-color:var(--ok-border);color:var(--ok-ink)}
.msgbox{width:100%;min-height:96px;resize:none;overflow:hidden;border:0;border-radius:0;display:block;padding:12px 14px;font-size:15px;line-height:1.5;color:var(--ink);background:var(--panel)}
.passit{margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--ink);text-align:left}

.invite-title{margin:22px 0 8px;font-size:18px;font-weight:800;color:var(--navy);text-align:left}
.status{min-height:20px;margin:10px 0 0;font-size:13px;font-weight:700;color:var(--ok-ink);text-align:center}

/* The 3-pick issue tiles (chips, write-ins, the cap state) moved to /site/form.css on 2026-09-25 so
   /listen and the /rsvp/<date> pages read one component (Build PM, RSVP Brookfield PR). */