/* ============================================================
   WeSpaces — Space card styles
   ------------------------------------------------------------
   The signature unit is the "room block": an immersive dark STAGE
   panel that sits inside the standard WeVote white card chassis.
   The stage is intentionally dark in BOTH light + dark themes (a
   media/stage surface, like a player) and is colour-themed by the
   room's status — green = live, indigo = scheduled/draft,
   slate = ended/expired/cancelled (per the /spaces handoff).

   Everything outside the stage (the social header, the footer,
   the "Post to Feed" affordance on the white card) uses the Kit's
   tokens and primitives exactly like every other feed card.
   ============================================================ */

/* ---- the stage ---------------------------------------------------------- */
.sp-stage {
  position: relative;
  border-radius: 18px;
  padding: 18px;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  /* themed below; sensible default = scheduled */
  --sp-accent: #A48BF7;
  --sp-ink: #F5F6FA;
  --sp-muted: rgba(255, 255, 255, .66);
  --sp-faint: rgba(255, 255, 255, .44);
  --sp-line: rgba(255, 255, 255, .12);
  --sp-glass: rgba(255, 255, 255, .10);
  --sp-glass-line: rgba(255, 255, 255, .18);
  color: var(--sp-ink);
  background:
    radial-gradient(135% 90% at 88% -12%, color-mix(in srgb, var(--sp-accent) 30%, transparent), transparent 56%),
    linear-gradient(162deg, #1A1733 0%, #0E0C1F 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px rgba(255, 255, 255, .04);
}
@media (min-width: 640px) { .sp-stage { padding: 22px; border-radius: 20px; } }

/* standalone card variant: the stage IS the card — add elevation + a faint outer ring */
.sp-stage--card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 1px 2px rgba(8, 9, 14, .5),
    0 18px 44px -20px rgba(8, 9, 14, .8);
}

/* a soft grain/spotlight in the top-left to give the stage depth */
.sp-stage::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(80% 60% at 12% 0%, rgba(255, 255, 255, .05), transparent 60%);
  pointer-events: none;
}

/* status themes ----------------------------------------------------------- */
.sp-stage[data-theme="live"] {
  --sp-accent: #34D399;
  background:
    radial-gradient(135% 90% at 88% -12%, rgba(52, 211, 153, .26), transparent 56%),
    linear-gradient(162deg, #0E2419 0%, #07130E 100%);
}
.sp-stage[data-theme="sched"] {
  --sp-accent: #A48BF7;
  background:
    radial-gradient(135% 90% at 88% -12%, rgba(164, 139, 247, .24), transparent 56%),
    linear-gradient(162deg, #1A1733 0%, #0E0C1F 100%);
}
.sp-stage[data-theme="ended"] {
  --sp-accent: #AEB4C0;
  --sp-muted: rgba(255, 255, 255, .58);
  --sp-faint: rgba(255, 255, 255, .38);
  background:
    radial-gradient(135% 90% at 88% -12%, rgba(174, 180, 192, .12), transparent 56%),
    linear-gradient(162deg, #23262E 0%, #15171C 100%);
}

/* ---- meta row (badges) -------------------------------------------------- */
.sp-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 13px; }

.sp-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: 8px;
  font-size: 12px; font-weight: 600; line-height: 1;
  background: var(--sp-glass);
  border: 1px solid var(--sp-glass-line);
  color: var(--sp-ink);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  white-space: nowrap;
}
.sp-pill svg { width: 14px; height: 14px; opacity: .82; }

.sp-pill--featured {
  background: color-mix(in srgb, #F0C173 24%, transparent);
  border-color: color-mix(in srgb, #F0C173 42%, transparent);
  color: #FAE3B6;
}
.sp-pill--featured svg { color: #F0C173; opacity: 1; }

.sp-pill--private svg { color: var(--sp-faint); }

/* ---- title + body ------------------------------------------------------- */
.sp-title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--sp-ink);
  text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 640px) { .sp-title { font-size: 20px; } }
.sp-stage[data-theme="ended"] .sp-title { color: rgba(255, 255, 255, .9); }

.sp-body {
  margin-top: 7px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--sp-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- status line -------------------------------------------------------- */
.sp-status {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--sp-muted);
}
.sp-status__main { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.sp-status__main svg { width: 15px; height: 15px; }
.sp-status--live .sp-status__main { color: #FF8A8A; }
.sp-status--accent .sp-status__main { color: var(--sp-accent); }
.sp-status__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--sp-faint); flex: none; }
.sp-status__meta { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sp-status__count { display: inline-flex; align-items: center; gap: 6px; color: var(--sp-muted); }
.sp-status__count svg { width: 14px; height: 14px; opacity: .7; }
.sp-status__count b { font-weight: 700; color: var(--sp-ink); }

/* live: pulsing dot */
.sp-livedot { position: relative; width: 9px; height: 9px; flex: none; }
.sp-livedot i { position: absolute; inset: 0; border-radius: 50%; background: #FF5A5A; }
@media (prefers-reduced-motion: no-preference) {
  .sp-livedot i::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; background: #FF5A5A;
    animation: spPulse 1.7s cubic-bezier(.22, .61, .36, 1) infinite;
  }
}
@keyframes spPulse { 0% { transform: scale(1); opacity: .65; } 100% { transform: scale(3.4); opacity: 0; } }

/* index hero live meter — emphasised when rooms are actually live */
.sp-livemeter {
  display: inline-flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 16px 0 13px; border-radius: 12px;
  background: var(--sunken); border: 1px solid var(--hairline);
  font-size: 14px; font-weight: 600; color: var(--muted);
}
.sp-livemeter.is-live {
  background: color-mix(in srgb, #E0352B 8%, var(--surface));
  border-color: color-mix(in srgb, #E0352B 26%, transparent);
  color: var(--ink);
}
.sp-livemeter__dot { position: relative; width: 9px; height: 9px; border-radius: 50%; flex: none; background: #E0352B; }
.sp-livemeter__dot--off { background: var(--hairline-strong); }
@media (prefers-reduced-motion: no-preference) {
  .sp-livemeter.is-live .sp-livemeter__dot::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; background: #E0352B;
    animation: spPulse 1.7s cubic-bezier(.22,.61,.36,1) infinite;
  }
}
.sp-livemeter__n {
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 18px;
  letter-spacing: -.02em; color: #C0271E; line-height: 1;
}
.dark .sp-livemeter__n { color: #F2A39B; }
.sp-livemeter__lbl { font-weight: 600; }

/* live: audio equaliser */
.sp-eq { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 14px; color: var(--sp-accent); }
.sp-eq i { width: 3px; border-radius: 2px; background: currentColor; height: 35%; }
@media (prefers-reduced-motion: no-preference) {
  .sp-eq i { animation: spEq 1s ease-in-out infinite; }
  .sp-eq i:nth-child(1) { animation-delay: 0s; }
  .sp-eq i:nth-child(2) { animation-delay: .18s; }
  .sp-eq i:nth-child(3) { animation-delay: .36s; }
  .sp-eq i:nth-child(4) { animation-delay: .12s; }
}
@keyframes spEq { 0%, 100% { height: 28%; } 50% { height: 100%; } }

/* ---- speaker presence (live) ------------------------------------------- */
.sp-speakers { display: flex; align-items: center; gap: 9px; margin-top: 14px; }
.sp-stack { display: flex; }
.sp-stack > * { margin-left: -8px; }
.sp-stack > *:first-child { margin-left: 0; }
.sp-av {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600; color: #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .38);
  overflow: hidden;
}
.sp-av img { width: 100%; height: 100%; object-fit: cover; }
.sp-av--more {
  background: rgba(255, 255, 255, .2);
  color: #fff; font-size: 10px; font-weight: 700; letter-spacing: -.01em;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.sp-speakers__label { font-size: 12.5px; color: var(--sp-muted); line-height: 1.3; }
.sp-speakers__label b { color: var(--sp-ink); font-weight: 600; }

/* ---- action row --------------------------------------------------------- */
/* wraps so a primary + RSVP pair stacks to full-width buttons when the stage
   is narrow (mobile, a 2-up grid cell, etc) — never cramped side-by-side */
.sp-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }

.sp-btn {
  flex: 2 1 160px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 18px;
  border-radius: 13px;
  border: 1px solid transparent;
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 14.5px; font-weight: 600;
  cursor: pointer;
  transition: transform .14s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.sp-btn svg { width: 18px; height: 18px; }
.sp-btn:active { transform: translateY(1px); }

.sp-btn--primary {
  background: #fff; color: #0A0B0F;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 20px -10px rgba(0, 0, 0, .5);
}
.sp-btn--primary:hover { background: #F1F2F4; transform: translateY(-1px); }
.sp-btn--primary:active { transform: translateY(0); }

.sp-btn--accent {
  background: var(--sp-accent);
  color: #07130E;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 20px -10px color-mix(in srgb, var(--sp-accent) 70%, transparent);
}
.sp-stage[data-theme="sched"] .sp-btn--accent { color: #15102E; }
.sp-btn--accent:hover { filter: brightness(1.06); transform: translateY(-1px); }

.sp-btn--ghost {
  background: var(--sp-glass);
  border-color: var(--sp-glass-line);
  color: var(--sp-ink);
}
.sp-btn--ghost:hover { background: rgba(255, 255, 255, .15); }

.sp-btn--disabled {
  background: rgba(255, 255, 255, .055);
  color: var(--sp-faint);
  cursor: not-allowed;
}
.sp-btn--disabled:active { transform: none; }

.sp-btn--locked {
  background: rgba(255, 255, 255, .06);
  border-color: var(--sp-line);
  color: var(--sp-muted);
  cursor: not-allowed;
}
.sp-btn--locked svg { color: var(--sp-faint); }
.sp-btn--locked:active { transform: none; }

/* RSVP button sits beside a wider primary, then wraps to its own full-width row */
.sp-rsvp { flex: 1 1 130px; min-width: 0; }
.sp-rsvp--going { background: var(--sp-accent); color: #15102E; border-color: transparent; }
.sp-rsvp--going:hover { filter: brightness(1.06); transform: translateY(-1px); }
.sp-rsvp--invited {
  background: color-mix(in srgb, var(--sp-accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--sp-accent) 55%, transparent);
  color: var(--sp-accent);
}
.sp-rsvp--invited:hover { background: color-mix(in srgb, var(--sp-accent) 24%, transparent); }
.sp-rsvp--declined { background: rgba(255, 255, 255, .05); color: var(--sp-faint); cursor: not-allowed; }
.sp-rsvp--declined:active { transform: none; }

/* Narrow stage (mobile / a 2-up grid cell): the View-details + RSVP pair stacks
   to full-width buttons instead of cramming side-by-side. The stage is a query
   container (container-type: inline-size, above), so this tracks the stage width
   — not the viewport — exactly like the kit's flex-wrap intent. */
@container (max-width: 420px) {
  .sp-actions > .sp-btn { flex-basis: 100%; }
}

/* ---- "Post to Feed" — host affordance on an un-posted room ------------- */
.sp-postfeed {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 42px; margin-top: 12px;
  border-radius: 12px;
  border: 1px dashed var(--sp-glass-line);
  background: transparent;
  color: var(--sp-muted);
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.sp-postfeed svg { width: 16px; height: 16px; }
.sp-postfeed:hover {
  border-color: color-mix(in srgb, var(--sp-accent) 60%, transparent);
  color: var(--sp-accent);
  background: color-mix(in srgb, var(--sp-accent) 8%, transparent);
}

/* host "your room" hint above a draft/scheduled action */
.sp-hosthint {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  font-family: "Open Sans", monospace;
  color: var(--sp-faint);
}
.sp-hosthint svg { width: 13px; height: 13px; }

/* ---- post-card chrome (the white wrapper) ------------------------------ */
.sp-postcard .sp-stage { border-radius: 16px; }

/* ---- empty state -------------------------------------------------------- */
.sp-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 44px 28px;
  border-radius: 18px;
  border: 1px dashed var(--hairline-strong);
  background: var(--surface);
}
.sp-empty__icon {
  width: 58px; height: 58px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink);
  margin-bottom: 16px;
}
.sp-empty__icon svg { width: 27px; height: 27px; }
.sp-empty__title { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 17px; color: var(--ink); }
.sp-empty__text { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 320px; }
.sp-empty__cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px; height: 42px; padding: 0 18px;
  border-radius: 12px; border: 0;
  background: var(--accent); color: #fff;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s ease, transform .14s ease;
}
.sp-empty__cta svg { width: 17px; height: 17px; }
.sp-empty__cta:hover { background: var(--accent-hover); }
.sp-empty__cta:active { transform: translateY(1px); }

/* ---- Room Preview / Join modal (.sp-pv) ---------------------------------
   Ported verbatim from the kit's room-preview.js injected styles. The
   redesigned modal shell uses .sp-pv / .sp-pv__scrim / .sp-pv__card; the
   spaces--room-preview controller toggles .show for the entrance transition. */
.sp-pv { position: fixed; inset: 0; z-index: 98; display: grid; place-items: center;
  padding: 24px; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.sp-pv.show { opacity: 1; pointer-events: auto; }
.sp-pv__scrim { position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 48%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sp-pv__card { position: relative; width: min(440px, 100%); max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hairline-strong); border-radius: 20px; box-shadow: var(--shadow-pop);
  transform: translateY(10px) scale(.985); opacity: .6;
  transition: transform .26s cubic-bezier(.22,.61,.36,1), opacity .2s ease; }
.sp-pv.show .sp-pv__card { transform: none; opacity: 1; }

.sp-pv__handle { display: none; }
.sp-pv__x { position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 36px; height: 36px; display: grid; place-items: center; border: 0; cursor: pointer;
  background: var(--sunken); border-radius: 10px; color: var(--faint); transition: all .15s ease; }
.sp-pv__x:hover { background: var(--hairline); color: var(--ink); }

.sp-pv__body { padding: 22px 22px 20px; overflow-y: auto; }

.sp-pv__badge { display: inline-flex; align-items: center; gap: 7px;
  height: 26px; padding: 0 11px; border-radius: 8px; font-size: 12px; font-weight: 600;
  font-family: "Open Sans", system-ui, sans-serif; }
.sp-pv__badge .sp-pv__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; position: relative; }
.sp-pv__badge--sched { background: var(--st-pending-bg); color: var(--st-pending-fg); }
.sp-pv__badge--sched .sp-pv__dot { background: var(--st-pending-dot); }
.sp-pv__badge--live { background: var(--st-unres-bg); color: var(--st-unres-fg); }
.sp-pv__badge--live .sp-pv__dot { background: #E0352B; }
.sp-pv__badge--ended { background: var(--st-arch-bg); color: var(--st-arch-fg); }
.sp-pv__badge--ended .sp-pv__dot { background: var(--st-arch-dot); }
@media (prefers-reduced-motion: no-preference) {
  .sp-pv__badge--live .sp-pv__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: #E0352B; animation: spPvPulse 1.7s cubic-bezier(.22,.61,.36,1) infinite; }
}
@keyframes spPvPulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(3); opacity: 0; } }

.sp-pv__title { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 20px;
  line-height: 1.3; letter-spacing: -.01em; color: var(--ink); margin: 14px 0 0; text-wrap: balance; }
.sp-pv__desc { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 8px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.sp-pv__host { display: flex; align-items: center; gap: 12px; margin-top: 18px;
  padding: 12px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--paper); }
.sp-pv__host-av { position: relative; width: 46px; height: 46px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; font-weight: 600; color: #fff; }
.sp-pv__host-av > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sp-pv__host-star { position: absolute; bottom: -3px; right: -3px; width: 20px; height: 20px;
  border-radius: 50%; display: grid; place-items: center; background: var(--mark);
  color: #fff; box-shadow: 0 0 0 2px var(--paper); }
.sp-pv__host-star svg { width: 11px; height: 11px; }
.sp-pv__host-name { font-size: 15px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 5px; }
.sp-pv__host-role { font-size: 12px; color: var(--faint); margin-top: 1px;
  font-family: "Open Sans", monospace; letter-spacing: .04em; text-transform: uppercase; }

.sp-pv__att { display: flex; align-items: center; gap: 11px; margin-top: 16px; min-height: 34px; }
.sp-pv__stack { display: flex; }
.sp-pv__stack > * { margin-left: -9px; }
.sp-pv__stack > *:first-child { margin-left: 0; }
.sp-pv__av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 600; color: #fff; box-shadow: 0 0 0 2px var(--surface); overflow: hidden; }
.sp-pv__av img { width: 100%; height: 100%; object-fit: cover; }
.sp-pv__av--more { background: var(--sunken); color: var(--muted); font-size: 11px; font-weight: 700; }
.sp-pv__att-label { font-size: 13.5px; color: var(--muted); }
.sp-pv__att-label b { color: var(--ink); font-weight: 700; }

.sp-pv__countdown { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 16px; padding: 12px 14px; border-radius: 13px;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.sp-pv__countdown-lbl { display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--accent-ink); }
.sp-pv__countdown-lbl svg { width: 15px; height: 15px; }
.sp-pv__countdown-val { font-family: "Open Sans", ui-monospace, monospace; font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 700; color: var(--accent-ink); letter-spacing: .01em; }

.sp-pv__foot { padding: 0 22px 22px; }
.sp-pv__action { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; height: 50px; border-radius: 14px; border: 0; cursor: pointer;
  font-family: "Open Sans", system-ui, sans-serif; font-size: 15px; font-weight: 600;
  transition: background .15s ease, transform .14s ease, box-shadow .15s ease; }
.sp-pv__action svg { width: 19px; height: 19px; }
.sp-pv__action:active { transform: translateY(1px); }
.sp-pv__action--go { background: var(--accent); color: #fff; box-shadow: var(--shadow-soft); }
.sp-pv__action--go:hover { background: var(--accent-hover); }
.sp-pv__action--ended { background: var(--sunken); color: var(--ink); border: 1px solid var(--hairline-strong); }
.sp-pv__action--ended:hover { background: var(--hairline); }
.sp-pv__note { margin: 11px 0 0; text-align: center; font-size: 12px; color: var(--faint); line-height: 1.5; }

@media (max-width: 640px) {
  .sp-pv { place-items: end center; padding: 0; }
  .sp-pv__card { width: 100%; max-width: none; max-height: 92vh;
    border-radius: 22px 22px 0 0; border-bottom: 0; transform: translateY(100%); opacity: 1; }
  .sp-pv.show .sp-pv__card { transform: none; }
  .sp-pv__handle { display: block; width: 38px; height: 4px; border-radius: 999px;
    background: var(--hairline-strong); margin: 9px auto 0; flex: none; }
  .sp-pv__body { padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .sp-pv, .sp-pv__card { transition: none; } }