/* Socially United, the Live section.

   Loaded only on the event pages, the pass and the app. Everything here sits
   on the tokens in site.css, so the section cannot drift away from the rest
   of the site: no new colours, no new type scale, no icon font. */

/* ---------- the event ---------- */
.ev__head{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:14px}
.ev__badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line-2);color:var(--muted)}
.ev__badge--live{border-color:rgba(90,224,214,.5);color:var(--cy)}
.ev__badge--live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cy);
  box-shadow:0 0 0 0 rgba(90,224,214,.6);animation:evPulse 2.4s ease-out infinite}
.ev__badge--sim{border-color:rgba(255,196,107,.45);color:var(--am)}
@keyframes evPulse{70%{box-shadow:0 0 0 9px rgba(90,224,214,0)}100%{box-shadow:0 0 0 0 rgba(90,224,214,0)}}
@media (prefers-reduced-motion:reduce){.ev__badge--live::before{animation:none}}

.ev__meta{color:var(--muted);font-size:15px;margin:0 0 6px}
.ev__meta b{color:var(--text);font-weight:600}
.ev__sim{border:1px solid rgba(255,196,107,.3);background:rgba(255,196,107,.06);border-radius:var(--r);
  padding:14px 18px;color:var(--muted);font-size:14px;line-height:1.55;margin:20px 0}
.ev__sim b{color:var(--am)}

.ev__stage{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#000;
  border:1px solid var(--line);aspect-ratio:16/9}
.ev__stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ev__stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.ev__nofeed{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;color:var(--muted-2);text-align:center;padding:24px}

.ev__bar{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;justify-content:space-between;
  margin-top:14px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface)}
.ev__count{display:flex;align-items:baseline;gap:8px;font-size:14px;color:var(--muted)}
.ev__count b{font-size:20px;color:var(--text);font-variant-numeric:tabular-nums;font-weight:700}
.ev__lang{background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);
  border-radius:999px;padding:8px 14px;font:inherit;font-size:14px;cursor:pointer}

/* ---------- the agenda ---------- */
.ses{display:grid;gap:12px;margin-top:8px}
.ses__item{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  padding:16px 18px;display:grid;gap:8px;transition:border-color .25s var(--ease)}
.ses__item:hover{border-color:var(--line-2)}
.ses__item.is-live{border-color:rgba(90,224,214,.45)}
.ses__top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.ses__when{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.ses__kind{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2);font-weight:700}
.ses__h{font-size:18px;font-family:var(--f-display);letter-spacing:-.02em;line-height:1.2}
.ses__p{color:var(--muted);font-size:14px;line-height:1.55;margin:0}
.ses__who{font-size:13px;color:var(--muted-2)}
.ses__pick{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:14px;color:var(--muted)}
.ses__pick input{margin-top:3px;width:18px;height:18px;accent-color:var(--cy);flex:none}

/* ---------- registration ---------- */
.reg-form{display:grid;gap:18px;max-width:720px}
.reg-form .field{display:grid;gap:6px}
.reg-form label{font-size:14px;font-weight:600}
.reg-form .hint{font-size:13px;color:var(--muted-2);line-height:1.5}
.reg-form input[type=text],.reg-form input[type=email],.reg-form input[type=tel],
.reg-form select,.reg-form textarea{
  width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;
  color:var(--text);font:inherit;font-size:16px;padding:12px 14px}
.reg-form textarea{min-height:84px;resize:vertical}
.reg-form input:focus,.reg-form select:focus,.reg-form textarea:focus{
  outline:none;border-color:var(--cy);box-shadow:0 0 0 3px rgba(90,224,214,.14)}
.reg-form .two{display:grid;gap:18px;grid-template-columns:1fr 1fr}
@media (max-width:640px){.reg-form .two{grid-template-columns:1fr}}
.reg-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.ac{position:relative}
.ac__list{position:absolute;z-index:40;top:calc(100% + 6px);left:0;right:0;max-height:280px;
  overflow:auto;background:var(--surface-2);border:1px solid var(--line-2);border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);padding:6px;display:none}
.ac__list.is-on{display:block}
.ac__opt{display:block;width:100%;text-align:left;background:none;border:0;padding:10px 12px;
  border-radius:9px;cursor:pointer;line-height:1.35}
.ac__opt:hover,.ac__opt.is-on{background:rgba(90,224,214,.12)}
.ac__opt b{display:block;font-size:15px;font-weight:600}
.ac__opt span{font-size:12px;color:var(--muted-2)}

.deleg{display:grid;gap:12px;border:1px solid var(--line);border-radius:var(--r);padding:16px;
  background:var(--surface)}
.deleg__row{display:grid;gap:10px;grid-template-columns:1fr 1fr 1fr auto;align-items:end}
@media (max-width:760px){.deleg__row{grid-template-columns:1fr}}
.deleg__x{background:none;border:1px solid var(--line-2);border-radius:10px;color:var(--muted);
  padding:11px 14px;cursor:pointer;font-size:14px}
.deleg__x:hover{border-color:var(--or);color:var(--or)}

.check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:15px;color:var(--muted)}
.check input{margin-top:3px;width:18px;height:18px;accent-color:var(--cy);flex:none}

.li-btn{display:inline-flex;align-items:center;gap:10px;background:#0a66c2;color:#fff;border:0;
  border-radius:12px;padding:12px 18px;font:inherit;font-weight:600;cursor:pointer}
.li-btn:hover{background:#0958a8}

/* ---------- the pass ---------- */
.pass{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);
  overflow:hidden;max-width:560px}
.pass__top{padding:22px 24px;background:linear-gradient(135deg,rgba(90,224,214,.14),rgba(232,121,185,.08));
  border-bottom:1px solid var(--line)}
.pass__top h2{font-size:22px;margin-bottom:6px}
.pass__top p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.pass__body{padding:24px;display:grid;gap:20px;justify-items:center;text-align:center}
.pass__code{font-family:var(--f-mono);font-size:clamp(30px,7vw,44px);font-weight:700;
  letter-spacing:.1em;line-height:1}
.pass__qr{width:min(260px,70vw);aspect-ratio:1;border-radius:14px;overflow:hidden;background:#fff;padding:10px}
.pass__qr img,.pass__qr svg{width:100%;height:100%;display:block}
.pass__who{display:grid;gap:3px}
.pass__who b{font-size:19px}
.pass__who span{color:var(--muted);font-size:14px}
.pass__acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:0 24px 24px}
.pass__note{margin:0;padding:14px 20px;background:rgba(255,196,107,.08);
  border-top:1px solid rgba(255,196,107,.25);color:var(--am);font-size:13px;line-height:1.55;text-align:center}
.pass__tag{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line-2);color:var(--muted)}

.party{display:grid;gap:8px;margin-top:10px}
.party__row{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface)}
.party__row b{font-family:var(--f-mono);letter-spacing:.08em}

/* ---------- lists on the section page ---------- */
.up{display:grid;gap:12px;margin-top:26px}
.up__item{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;
  border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;background:var(--surface)}
.up__item b{font-size:17px;font-family:var(--f-display);letter-spacing:-.02em}
.up__item span{color:var(--muted);font-size:14px}

/* ---------- the app ---------- */
.app{min-height:100dvh;display:flex;flex-direction:column;background:var(--ink)}
.app__bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);
  background:var(--ink-2);position:sticky;top:0;z-index:30}
.app__bar .brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px}
.app__bar .brand img{width:26px;height:26px}
.app__spacer{flex:1}
.app__main{flex:1;padding:18px 16px 92px;max-width:760px;width:100%;margin-inline:auto}
.app__tabs{position:fixed;bottom:0;left:0;right:0;z-index:40;display:grid;
  grid-template-columns:repeat(4,1fr);background:var(--ink-2);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
.app__tab{background:none;border:0;padding:12px 6px;color:var(--muted-2);font-size:12px;font-weight:600;
  cursor:pointer;border-top:2px solid transparent}
.app__tab.is-on{color:var(--cy);border-top-color:var(--cy)}
.app__panel{display:none}
.app__panel.is-on{display:block}
.app__h{font-size:20px;margin:24px 0 12px;font-family:var(--f-display);letter-spacing:-.02em}
.app__h:first-child{margin-top:0}
.app__off{background:rgba(255,138,92,.12);border:1px solid rgba(255,138,92,.3);color:var(--or);
  border-radius:12px;padding:10px 14px;font-size:14px;margin-bottom:14px}

.q{display:grid;gap:10px}
.q__item{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:var(--surface);
  display:grid;gap:8px}
.q__body{margin:0;line-height:1.55}
.q__who{font-size:13px;color:var(--muted-2)}
.q__act{display:flex;gap:10px;align-items:center}
.q__vote{background:var(--surface-2);border:1px solid var(--line-2);border-radius:999px;
  padding:6px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted)}
.q__vote.is-on{border-color:var(--cy);color:var(--cy)}
.q__n{font-variant-numeric:tabular-nums}

.poll{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;background:var(--surface);display:grid;gap:12px}
.poll__opt{display:grid;gap:6px;cursor:pointer}
.poll__opt[aria-disabled=true]{cursor:default}
.poll__lab{display:flex;justify-content:space-between;gap:14px;font-size:15px}
.poll__bar{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.poll__fill{height:100%;background:var(--spectral);transition:width .5s var(--ease)}
.poll__opt.is-mine .poll__lab{color:var(--cy);font-weight:600}

.per{display:grid;gap:12px}
.per__item{border:1px solid var(--line);border-radius:var(--r);padding:16px;background:var(--surface);display:grid;gap:10px}
.per__top{display:flex;gap:14px;align-items:flex-start;justify-content:space-between}
.per__name{font-size:17px;font-weight:600;line-height:1.25}
.per__role{font-size:13px;color:var(--muted);line-height:1.4}
.per__score{flex:none;font-variant-numeric:tabular-nums;font-weight:700;font-size:15px;
  border:1px solid var(--line-2);border-radius:999px;padding:5px 12px;color:var(--cy)}
.per__why{display:flex;flex-wrap:wrap;gap:6px}
.per__tag{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--muted)}
.per__acts{display:flex;flex-wrap:wrap;gap:8px}

.mini{background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);border-radius:10px;
  padding:8px 14px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.mini:hover{border-color:var(--cy)}
.mini[disabled]{opacity:.5;cursor:default}
.mini--go{background:var(--cy);border-color:var(--cy);color:#04211f}

.note{color:var(--muted);font-size:14px;line-height:1.6}
.note--ok{color:var(--cy)}
.note--bad{color:var(--or)}
.loading{color:var(--muted-2);font-size:14px;padding:20px 0}

/* ---------- printing a pass ---------- */
@media print{
  .hdr,.ftr,.crumbs,.pass__acts,.skip,.app__tabs,.app__bar{display:none !important}
  body{background:#fff;color:#000}
  .pass{border-color:#999;max-width:none}
  .pass__top{background:none}
  .pass__top p,.pass__who span{color:#333}
  .pass__note{color:#7a5200;background:none}
}

/* The open events sit under the two buttons; the heading was drawn up into them. */
#liveUpcoming{margin-top:44px}
#liveUpcoming:empty{margin-top:0}