/* Type system (redesign): Figtree for body/UI, Fraunces *Soft* for display.
   Fraunces is variable, so we request the SOFT axis and pin it in .display below
   (WONK 0, matching the official static Soft instance the mobile app bundles, so
   the two platforms render the same). Must precede all rules per CSS @import. */
@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=Fraunces:opsz,wght,SOFT@9..144,400..700,0..100&display=swap");

:root {
  color-scheme: light;
  --font-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  font-family: var(--font-body);
  --bg: #f7f4ec;
  --card: #ffffff;
  --text: #1c1830;
  --muted: #6b6b85;
  --faint: #9a9ab0;
  --brand: #6b4cd6;
  --brand-deep: #4f35b5;
  --brand-soft: #efeaff;
  --amber: #f2a93c;
  --accent2-deep: #9a6212;
  --accent2-tint: #fdf1dd;
  --cream: #f5f1e6;
  --border: #e6e5f0;
  --live: #d92d6b;
  --radius: 16px;
  /* Nested elements (cards inside cards, list items) use one smaller radius so
     the corner language is a deliberate two-step system, not random drift. */
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(22, 22, 42, 0.04), 0 8px 24px rgba(22, 22, 42, 0.06);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* Whisper of the running split so web isn't a flat cream slab. Fixed layer
   so it doesn't scroll with cards; opacity stays low enough that the still
   doesn't read as UI. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("./assets/running-wash.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  filter: saturate(0.55) contrast(0.92);
}

body.page-landing {
  background: var(--cream);
}

/* Display face — Fraunces Soft. Opt in per element (wordmark, hero headings)
   during the screen-by-screen redesign; the axes below give the rounded,
   warm "Soft" cut at the display optical size. */
.display {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

/* Header */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 940px;
  width: 100%;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 0;
  flex-wrap: wrap;
}

.topbar-login {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.auth-slogan {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--text);
}

.brand-mark {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft);
}

.brand-mark-img {
  display: block;
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-name {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.status {
  font-size: 0.85rem;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55vw;
}

/* App shell */

.app-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.account-chip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 0.2rem 0.7rem 0.2rem 0.2rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  min-width: 0;
  text-decoration: none;
}

.account-chip:hover,
.account-chip.is-on {
  border-color: var(--brand);
}

.account-name {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 8rem;
}

.face {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 0.78rem;
  font-weight: 800;
}

.face.account-face,
.face.person-face {
  width: 2rem;
  height: 2rem;
}

.face.profile-face {
  width: 7.5rem;
  height: 7.5rem;
  font-size: 2.4rem;
  /* Soft amber ring around the big identity face, matching the prototype. */
  border: 3px solid #fdf0cc;
}

.face-fallback {
  background: var(--face-bg, var(--brand-soft));
  color: var(--face-ink, var(--brand-deep));
}

/* Overlapping avatars in the top-right of a run card. */
.facepile {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
}

.facepile .facepile-face {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.72rem;
  border-radius: 50%;
  border: 2px solid var(--brand-soft);
  box-sizing: border-box;
  margin-left: -0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.facepile .facepile-face:first-child {
  margin-left: 0;
}

.facepile-more {
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-weight: 700;
}

/* Live card: facepile stacked above a pulsing "N in motion" count. */
.run-topright {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  flex-shrink: 0;
}

.community-label.is-live {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  /* The 42% cap is for the community-name pill in the wide topline; inside the
     narrow topright column it clips "N in motion", so size to content instead. */
  max-width: none;
}

.live-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  animation: live-pulse 1.4s ease-in-out infinite;
}

@keyframes live-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.72);
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot {
    animation: none;
  }
}

.profile-page {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  max-width: 26rem;
  margin: 0 auto;
  padding: 0.4rem 0 2.4rem;
}

.profile-back {
  align-self: start;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--brand-deep);
  text-decoration: none;
}

.profile-kicker {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.profile-photo {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.profile-photo-hint {
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--brand-deep);
}

.profile-faces-label {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.profile-faces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  width: 100%;
}

.profile-face-pick {
  width: 2.85rem;
  height: 2.85rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cream);
  cursor: pointer;
}

.profile-face-pick img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-face-pick.is-on {
  border-color: var(--brand);
}

.profile-name-label {
  width: 100%;
}

.profile-email {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.profile-notif {
  width: 100%;
  margin-top: 1.25rem;
  padding: 1.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.profile-notif-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.profile-notif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
}

.profile-notif-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.profile-notif-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
}

.profile-notif-hint {
  font-size: 0.8rem;
  color: var(--muted);
}

.profile-notif-row input.switch {
  flex: 0 0 44px;
}

.profile-notif-sub {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
}

/* Email off ⇒ reminder timing is moot: dim + disable the chips (web is
   email-only, so email is the only channel gating them). */
.profile-notif.channel-off .profile-notif-sub,
.profile-notif.channel-off #notifOffsets {
  opacity: 0.45;
  pointer-events: none;
}

.person-who {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.nav-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
}

.nav-link.is-active,
.nav-link:hover {
  color: var(--brand-deep);
  background: var(--brand-soft);
}

.brand {
  text-decoration: none;
  color: inherit;
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  border-radius: 11px;
  padding: 0.65rem 0.95rem;
  border: 1px solid var(--border);
  color: var(--text);
  background: #fff;
}

.button-link.primary,
a.button-link.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.button-link.ghost,
a.button-link.ghost,
.ghost.button-link {
  background: #fff;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.text-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin-top: 0.35rem;
  color: var(--brand-deep);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

/* Landing */

.page-landing,
.landing-page {
  min-height: 100vh;
}

.landing-page {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  position: relative;
}

.landing-page.is-revealed {
  opacity: 1;
  transform: none;
}

/* Pin Sign in to the actual top-right of the viewport. */
.topbar-landing {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  z-index: 5;
  width: auto;
  max-width: none;
  margin: 0;
  flex-wrap: nowrap;
  justify-content: flex-end;
  padding: 1.25rem max(1.25rem, env(safe-area-inset-right)) 0 0;
}

/* Original-size waves, full-page centered so they sit on the stills' seam
   directly under I have an account — not inside the vertically-centered copy. */
.landing-waves {
  display: block;
  width: 7.5rem;
  height: auto;
  margin: 1.5rem auto 3rem;
  flex-shrink: 0;
}

.splash {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: var(--cream);
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.splash.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-mark {
  width: min(46vw, 10rem);
  opacity: 0;
}

.splash-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.splash .wave {
  fill: none;
}

.landing-hero {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 40rem;
  width: 100%;
  margin: 0 auto;
  padding: 6.5rem 1.25rem 0;
}

.brand-hero {
  font-size: clamp(3rem, 12vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.9;
  margin: 0 0 1.25rem;
  color: var(--brand-deep);
}

.landing-hero h1 {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 1rem;
}

.lede {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  max-width: 34rem;
}

.lede.compact {
  font-size: 0.98rem;
  margin-bottom: 1.25rem;
}

/* Layout panels */

.container.narrow {
  max-width: 640px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.page-header-main {
  flex: 1;
  min-width: 0;
}

.page-header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* On the community page, Schedule sits below the summary line (in the main
   block), so it gets a little breathing room above it. */
.page-header-main .page-header-actions {
  margin-top: 0.85rem;
}

/* Quiet, muted-cream "Edit" pill pinned to the top-right corner (host only). */
.edit-cta {
  align-self: flex-start;
  flex: 0 0 auto;
  background: var(--cream);
  border-color: transparent;
  color: var(--muted);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-weight: 600;
}

.edit-cta:hover {
  background: #ece5d5;
  color: var(--text);
}

/* Amber "N waiting to join" pill under the community summary (host only). */
.community-pending {
  display: inline-block;
  align-self: flex-start;
  margin: 0.6rem 0 0;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: #fdf1dd;
  border: 1px solid #f3d9a6;
  color: #8a5a12;
  font-size: 0.82rem;
  font-weight: 700;
}

/* Toggle that reveals the collapsed Past activities list. */
.show-past {
  align-self: flex-start;
}

/* Recap: status pill above the title ("Ended" / "Cancelled"). */
.status-pill {
  display: inline-block;
  margin: 0 0 0.5rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--color-neutral-100, #f4efe7);
  color: var(--color-neutral-500, #8a8172);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.status-pill-cancelled {
  background: #fbe9ec;
  color: #b30d2f;
}

/* Activity: community name as an accent line under the title (Activity.dc.html). */
.community-line {
  margin: 0 0 0.15rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brand);
}

/* Activity: purple "You're in" banner for joined-upcoming (Activity.dc.html). */
.youre-in {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--brand-soft);
  border: 1.5px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  margin: 0 0 1rem;
}
.youre-in-title {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--brand);
}
.youre-in-sub {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}
.face.youre-in-face {
  width: 36px;
  height: 36px;
  border: 2px solid var(--accent2-line, #f2d9a8);
}

/* Activity: live "N in motion + elapsed" frame (Activity.dc.html). */
.live-frame {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--brand) 6%, #fff);
  border: 1.5px solid color-mix(in srgb, var(--brand) 35%, transparent);
  color: var(--brand);
}
.live-frame-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.live-frame-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.live-frame-time {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* Activity: Copy link / Share quick actions by the title (Activity.dc.html). */
.quick-actions {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 1rem;
  flex-wrap: wrap;
}
.quick-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  border: none;
  background: var(--accent2-tint);
  color: var(--accent2-deep);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
}
.quick-pill:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Activity: host toolbar (Edit + Invite people) (Activity.dc.html). */
.host-toolbar {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
}
.host-panels {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}
.host-panels:not(:has(.invite-panel:not([hidden]))) {
  margin-bottom: 0.75rem;
}
.host-tool {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.host-tool:hover {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
}

/* Activity: framed location / playlist rows (Activity.dc.html). */
.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 0.85rem 1.1rem;
  margin: 0 0 1rem;
  cursor: default;
  font-family: var(--font-body);
}
button.info-row {
  cursor: pointer;
}
.info-row-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.info-row-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}
.info-row-sub {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.info-row-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brand);
  white-space: nowrap;
  text-decoration: none;
}
.invite-pill {
  border: none;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  cursor: pointer;
  white-space: nowrap;
}
.start-caption {
  margin: -0.4rem 0 1rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Activity: host cancel as a muted bottom link (Activity.dc.html). */
.cancel-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}
.cancel-link {
  border: none;
  background: none;
  color: #c0392b;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0;
}
.cancel-link:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Activity: not-joined teaser facepile (Activity.dc.html). */
.teaser-count {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
}
.teaser-faces {
  display: flex;
  margin-bottom: 0.75rem;
}
.teaser-face {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--card);
  overflow: hidden;
  margin-left: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
}
.teaser-face:first-child {
  margin-left: 0;
}
.teaser-face-img,
.teaser-face-img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.teaser-more {
  background: #f4efe7;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

/* Recap: amber "Nice work" summary banner (Recap.dc.html). */
.recap-summary {
  background: #fdf7ec;
  border: 1.5px solid #f3d9a6;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 0 0 1.25rem;
}
.recap-summary-title {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: #8a5a12;
}
.recap-summary-body {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.recap-summary-nap {
  background: #f6f4ef;
  border-color: #e3ddd1;
}
.recap-summary-nap .recap-summary-title {
  color: var(--text);
}

/* Member status panel — "where you stand" card (Community.dc.html). */
.member-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--card);
  border: 1.5px solid #f3d9a6;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.member-status-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.member-status-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fdf1dd;
  color: #c88520;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.member-status-label {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
}

.member-status-sub {
  margin: 0.1rem 0 0;
  font-size: 0.83rem;
  color: var(--muted);
}

.member-status-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

.member-status-actions .ghost {
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  background: #fff;
}

.member-status-actions .ghost:hover {
  border-color: #d5d4e4;
  background: var(--bg);
}

/* Read-only member roster (non-host members). */
.roster-title {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.roster-count {
  font-weight: 500;
  color: var(--faint);
  font-size: 0.9rem;
}

.roster-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
}

.roster-row:last-child {
  border-bottom: none;
}

.roster-name {
  font-weight: 600;
  font-size: 0.92rem;
}

.roster-you {
  font-weight: 400;
  font-size: 0.78rem;
}

.roster-role {
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  margin-left: 0.5rem;
}

.roster-role-host {
  background: var(--brand-soft);
  color: var(--brand-deep);
}

.roster-role-cohost {
  background: #fdf1dd;
  color: #8a5a12;
}

.roster-when {
  font-size: 0.8rem;
  color: var(--faint);
  flex-shrink: 0;
}

.leave-actions {
  margin-top: 1rem;
}

.page-header h1,
.auth-panel h1,
.run-detail h1 {
  margin: 0 0 0.35rem;
  letter-spacing: -0.03em;
}

.panel,
.auth-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem;
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
}

.auth-panel {
  margin-top: 1.5rem;
}

.stack-form {
  display: grid;
  gap: 0.85rem;
  scroll-margin-bottom: 8rem;
}

.run-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.run-link:hover {
  border-color: #d5d4e4;
}

.run-detail .eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
}

.run-detail .eyebrow a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}

.run-actions {
  margin-top: 1.25rem;
}

.session-bar {
  margin-top: 1.1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--brand-soft);
}

.session-bar .actions {
  margin-top: 0;
}

.session-screen {
  display: grid;
  gap: 0.85rem;
  justify-items: center;
  text-align: center;
  padding: 1.5rem 0.5rem 0.5rem;
}

.session-wordmark {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--brand-deep);
}

.session-eyebrow {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

.session-clock {
  margin: 0.2rem 0;
  font-size: 4rem;
  font-weight: 650;
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--text);
}

.session-screen .actions {
  width: 100%;
  justify-content: center;
}

.session-screen button[data-action="finish"] {
  width: 100%;
}

.session-screen .people-card {
  width: 100%;
  max-width: 28rem;
  margin: 0;
  padding: 0.5rem 0.65rem;
  background: rgba(255, 255, 255, 0.72);
}

.session-screen .people-card h2 {
  margin: 0 0 0.15rem;
  font-size: 0.95rem;
}

.session-screen .presence-row {
  gap: 0.45rem 0.55rem;
  padding: 1.35rem 0 0.15rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: center;
}

.session-screen .presence-blob {
  width: 3.25rem;
}

.session-screen .face.presence-face {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.9rem;
}

.session-screen .presence-name {
  font-size: 0.68rem;
  max-width: 3.25rem;
}

.session-screen .finish-confetti {
  --confetti-reach: 0.7;
}

.session-screen .finish-confetti span {
  width: 0.68rem;
  height: 1.1rem;
  margin: -0.55rem 0 0 -0.34rem;
}

.session-screen .snooze-zz span {
  font-size: 0.7rem;
}

.session-screen .snooze-zz span:nth-child(2) {
  font-size: 0.8rem;
}

.session-screen .snooze-zz span:nth-child(3) {
  font-size: 0.9rem;
}

.session-screen .presence-mood {
  font-size: 0.62rem;
}

.session-chat {
  width: 100%;
  max-width: 28rem;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
  padding: 0.65rem 0.7rem;
}

.session-messages {
  max-height: 8.5rem;
  overflow-y: auto;
  display: grid;
  gap: 0.4rem;
}

.session-messages .muted {
  margin: 0;
}

.recap-messages {
  max-height: 14rem;
  overflow-y: auto;
  display: grid;
  gap: 0.4rem;
}

.session-msg {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.35;
}

.session-msg strong {
  color: var(--brand-deep);
}

.session-msg.mine strong {
  color: var(--text);
}

.session-chat-form {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

.session-chat-form input {
  flex: 1;
  min-width: 0;
  width: auto;
}

.session-chat-form button {
  width: auto;
  padding: 0.5rem 0.85rem;
}

.invite-banner {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--brand-soft);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.brand-mark {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft);
}

.brand-name {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.status {
  font-size: 0.85rem;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55vw;
}

/* Layout */

.container {
  flex: 1;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
  display: grid;
  gap: 1.1rem;
  align-content: start;
}

.hero {
  padding: 1.5rem 0 0.25rem;
}

.hero h1 {
  margin: 0 0 0.6rem;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.lede {
  margin: 0;
  max-width: 34rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem;
  box-shadow: var(--shadow);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.section-head h2 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.muted {
  color: var(--muted);
  margin: 0 0 0.75rem;
  font-size: 0.94rem;
}

.hint {
  color: var(--faint);
  font-size: 0.86rem;
  margin: 0.7rem 0 0;
}

.hint.is-error,
.meta.is-error,
#formHint.is-error {
  color: var(--live);
  font-weight: 650;
}

.hint:not(:empty) {
  min-height: 1.1em;
}

.pill {
  color: var(--muted);
  font-size: 0.85rem;
  background: var(--bg);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
}

/* Invite banner */

.invite-banner {
  border-color: #cdc4ff;
  background: linear-gradient(180deg, #f4f1ff 0%, #ffffff 100%);
}

.invite-banner h2 {
  margin: 0 0 0.35rem;
  color: var(--brand-deep);
  font-size: 1.1rem;
}

.invite-banner .muted {
  margin: 0;
  color: var(--text);
}

/* Forms */

.auth-row,
.inline-form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}

.inline-form {
  margin-top: 0.85rem;
}

.auth-row input {
  flex: 1 1 12rem;
  min-width: 0;
}

.inline-form input {
  flex: 1 1 17rem;
  min-width: 0;
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.choice-pill {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
}

.choice-pill input {
  width: auto;
  margin: 0;
}

/* Give the selected option a real "on" state so the pills read as a choice, not
   two static labels (contrast + repetition with the browse chips). */
.choice-pill:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-weight: 600;
}

.community-context {
  margin: 0.4rem 0 0;
}

/* Chunk the groups: a bigger gap between groups than within one, so the eye can
   tell where "You organize" ends and "You joined" begins (proximity). */
.community-group {
  margin-top: 1.5rem;
}

.community-group:first-child {
  margin-top: 0.25rem;
}

.community-group h3 {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.community-group .chip-row {
  margin-top: 0;
}

.community-group .muted {
  margin: 0;
  font-size: 0.88rem;
}

/* Community cards (redesign): full-width stacked cards — name + meta on the
   left, member facepile / host badge on the right. Replaces the old chip grid. */
.community-cards {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.community-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.community-card:hover {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
  transform: translateY(-1px);
}

.community-card-main {
  flex: 1;
  min-width: 0;
}

/* Live "● N in motion" kicker above the community name — pulsing dot + label in
   the brand accent, matching the prototype. .live-dot inherits via currentColor. */
.community-card-live {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand);
}

.community-card-name {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.community-card-meta {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.community-card-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.community-card-badge {
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  background: var(--brand-soft);
  color: var(--brand-deep);
}

.community-card-status {
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  background: var(--brand-soft);
  color: var(--muted);
}

/* Asked/pending reads as provisional: dashed, flat, muted title. */
.community-card.is-pending {
  border-style: dashed;
  box-shadow: none;
}

.community-card.is-pending .community-card-name {
  color: var(--muted);
}

/* Inline join actions on discover cards. Open = filled; closed = outlined. */
.community-card-join,
.community-card-ask {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  border-radius: 999px;
  flex-shrink: 0;
}

.community-card-join {
  border: none;
  background: var(--brand);
  color: #fff;
  padding: 0.38rem 1rem;
}

.community-card-join:hover {
  background: var(--brand-deep);
}

.community-card-ask {
  border: 1.5px solid var(--brand);
  background: var(--card);
  color: var(--brand);
  padding: 0.32rem 0.9rem;
}

.community-card-ask:hover {
  background: var(--brand-soft);
}

.community-card-join:disabled,
.community-card-ask:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Create is its own task: quiet the card, let the primary button be the anchor. */
.create-community {
  margin-top: 2rem;
}

.create-community .section-head {
  margin-bottom: 0.6rem;
}

.pending-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  padding: 0.35rem 0;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

/* Schedule wizard (create.html): the prototype groups the form into stacked,
   joined white cards (What / When / Who / Playlist) with uppercase eyebrows. */
.sched-cards {
  display: flex;
  flex-direction: column;
}
.sched-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
/* Collapse the shared border so stacked cards read as one panel. */
.sched-card + .sched-card {
  border-top: none;
}
.sched-card:first-child {
  border-radius: var(--radius) var(--radius) 0 0;
}
.sched-card:last-child {
  border-radius: 0 0 var(--radius) var(--radius);
}
.sched-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--faint);
}
.sched-when-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
}
.sched-subgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
/* Non-run activities hide both distance + pace; collapse the empty grid so it
   doesn't leave a stray gap under the name field. */
.sched-subgrid:not(:has(> label:not([hidden]))) {
  display: none;
}
.sched-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.3rem;
}
.sched-actions button[type="submit"] {
  border-radius: 999px;
  padding: 0.65rem 2rem;
  font-weight: 700;
}
@media (max-width: 640px) {
  .sched-when-grid {
    grid-template-columns: 1fr 1fr;
  }
  .sched-subgrid {
    grid-template-columns: 1fr;
  }
}

label {
  display: grid;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

.field-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

/* Label sits in a bare wrapper, so sched-card gap doesn't separate it from
   the Virtual / In person pills. */
.sched-connect {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sched-connect .field-label,
.sched-connect .hint,
.sched-connect .choice-row {
  margin: 0;
}

.community-edit {
  margin-top: 0.85rem;
}

.community-edit > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--muted);
}

.community-edit-form {
  flex-direction: column;
  align-items: stretch;
  margin-top: 0.6rem;
}

.community-edit-form .field-label {
  margin-top: 0.4rem;
}

.community-edit-form input,
.community-edit-form select {
  width: 100%;
  margin-top: 0.25rem;
}

.ghost.danger {
  color: #b3261e;
  border-color: rgba(179, 38, 30, 0.4);
}

/* Destructive actions (Archive) sit apart at the bottom of the edit form. */
.danger-zone {
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-weight: 500;
  color: var(--text);
}

.check-row input {
  width: auto;
  margin-top: 0.2rem;
}

/* iOS-style toggle switch (schedule/edit "let invitees invite others", etc.).
   A styled checkbox so it still submits as "on"/off with no JS changes. */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 500;
  color: var(--text);
}
.switch-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.switch-label {
  font-weight: 600;
  color: var(--text);
}
.switch-sub {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--muted);
}
input.switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 26px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #cfcfda;
  cursor: pointer;
  transition: background 0.2s ease;
}
input.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: left 0.2s ease;
}
input.switch:checked {
  background: var(--brand);
}
input.switch:checked::after {
  left: 21px;
}
input.switch:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

input,
select,
button {
  font: inherit;
}

input,
select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 0.65rem 0.75rem;
  background: #fff;
  color: var(--text);
  font-weight: 400;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sched-field.has-error,
label.has-error {
  color: var(--live);
}

.sched-field.has-error input,
.sched-field.has-error select,
label.has-error input,
label.has-error select,
input.is-invalid,
select.is-invalid {
  border-color: var(--live);
  box-shadow: 0 0 0 3px rgba(217, 45, 107, 0.14);
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236b6b85' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  cursor: pointer;
}

input::placeholder {
  color: #b4b4c6;
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

button {
  border: 1px solid transparent;
  border-radius: 11px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  padding: 0.65rem 1rem;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.05s ease, border-color 0.15s ease;
}

button:hover {
  background: var(--brand-deep);
}

button:active {
  transform: translateY(1px);
}

button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.ghost {
  background: #fff;
  color: var(--text);
  border-color: var(--border);
}

.ghost:hover {
  background: var(--bg);
  border-color: #d5d4e4;
}

button:disabled,
button:disabled:hover {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  background: #f3f2f7;
  color: var(--muted);
  border-color: var(--border);
}

.full-width {
  grid-column: span 2;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.form-actions .hint {
  margin: 0;
}

/* Community chips */

.chip-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Seven activity types: 4+3 so Other isn't orphaned on its own row. */
#activityOptions.chip-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

#activityOptions .chip {
  width: 100%;
  justify-content: center;
  padding: 0.45rem 0.4rem;
  box-sizing: border-box;
  font-size: 0.82rem;
}

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
}

.chip:hover {
  background: var(--bg);
  border-color: #d5d4e4;
}

.chip.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}

/* The chip name is the anchor; secondary bits are quieter. */
.chip .chip-name {
  font-weight: 600;
}

.chip .chip-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.chip .chip-sub {
  font-size: 0.8rem;
  color: var(--faint);
}

/* On the selected (brand) chip, keep the secondary bits legible on purple. */
.chip.active .chip-tag,
.chip.active .chip-sub {
  color: rgba(255, 255, 255, 0.82);
}

/* Runs */

.stack {
  display: grid;
  gap: 0.7rem;
}

.run-item {
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 0.9rem;
  display: grid;
  gap: 0.45rem;
  background: #fff;
  transition: border-color 0.15s ease;
}

.run-item:hover {
  border-color: #d5d4e4;
}

.run-item.is-live {
  border-color: var(--amber);
  background: #fff8ea;
}

/* Live kicker above the title (mirrors the phone card): pulsing dot + "N in
   motion", uppercase + amber. The .live-dot inherits this colour via
   currentColor. */
.run-kicker {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.run-kicker.is-live {
  color: var(--amber);
}

.run-topline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.run-topline > div {
  min-width: 0;
  flex: 1;
}

.run-topline .meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.run-topline strong {
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

.meta {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.run-item > .people-line {
  margin: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.people-card {
  margin: 1rem 0;
  padding: 0.95rem 1rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 13px;
  overflow: visible;
}

.people-card h2 {
  margin: 0 0 0.55rem;
  font-size: 1.05rem;
}

.people-card h3 {
  margin: 0.85rem 0 0.4rem;
  font-size: 0.92rem;
  color: var(--muted);
  font-weight: 600;
}

.presence-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem 1rem;
  padding: 1.15rem 0 0.2rem;
  overflow: visible;
}

.presence-blob {
  width: 4.6rem;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  overflow: visible;
}

.presence-blob.is-pokeable {
  cursor: pointer;
}

.presence-blob.is-shaking .presence-float {
  animation: bodo-shake 0.5s ease-in-out;
}

.presence-float {
  position: relative;
  display: grid;
  place-items: center;
  overflow: visible;
  z-index: 1;
}

.presence-float.is-snoozing .face {
  transform-origin: center center;
  animation: bodo-breathe 3.6s ease-in-out infinite;
  animation-delay: var(--bodo-delay, 0s);
}

.presence-float.is-moving {
  animation: bodo-bob 1.15s ease-in-out infinite;
  animation-delay: var(--bodo-delay, 0s);
}

.presence-float.is-done .face {
  box-shadow: 0 0 0 3px var(--brand);
  animation: bodo-glow 1.8s ease-in-out infinite;
  animation-delay: 0s;
}

.face.presence-face {
  width: 3.6rem;
  height: 3.6rem;
  font-size: 1.15rem;
  position: relative;
  z-index: 2;
}

.presence-name {
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  max-width: 4.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presence-mood {
  font-size: 0.7rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.2;
  max-width: 4.6rem;
}

@keyframes bodo-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.07);
  }
}

@keyframes bodo-zz {
  0% {
    opacity: 0;
    transform: translate(0, 4px) scale(0.75);
  }
  12% {
    opacity: 1;
  }
  68% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(0.55rem, -1.35rem) scale(1.25);
  }
}

.snooze-zz {
  position: absolute;
  left: 58%;
  top: -0.2rem;
  width: 2.4rem;
  height: 2.4rem;
  pointer-events: none;
  z-index: 3;
}

.snooze-zz span {
  position: absolute;
  left: 0;
  top: 0.45rem;
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  color: var(--brand-deep);
  opacity: 0;
  animation: bodo-zz 3s ease-out infinite;
  animation-delay: var(--bodo-delay, 0s);
}

.snooze-zz span:nth-child(2) {
  left: 0.42rem;
  font-size: 0.94rem;
  animation-delay: calc(var(--bodo-delay, 0s) + 0.7s);
}

.snooze-zz span:nth-child(3) {
  left: 0.88rem;
  font-size: 1.08rem;
  animation-delay: calc(var(--bodo-delay, 0s) + 1.4s);
}

@keyframes bodo-shake {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }
  20% {
    transform: translateX(-6px) rotate(-8deg);
  }
  40% {
    transform: translateX(7px) rotate(8deg);
  }
  60% {
    transform: translateX(-5px) rotate(-5deg);
  }
  80% {
    transform: translateX(4px) rotate(4deg);
  }
}

@keyframes bodo-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes bodo-glow {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(107, 76, 214, 0.22), 0 0 0 3px rgba(242, 169, 60, 0.16);
  }
  22% {
    box-shadow: 0 0 0 3px rgba(107, 76, 214, 0.95), 0 0 0 5px rgba(242, 169, 60, 0.22);
  }
  55% {
    box-shadow: 0 0 0 3px rgba(107, 76, 214, 0.28), 0 0 0 9px rgba(242, 169, 60, 0.5);
  }
}

.finish-confetti {
  --confetti-reach: 1;
  position: absolute;
  inset: -0.7rem;
  pointer-events: none;
  z-index: 3;
}

.finish-confetti span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.95rem;
  height: 1.55rem;
  margin: -0.78rem 0 0 -0.48rem;
  opacity: 0;
  animation: bodo-confetti var(--dur, 3s) ease-in infinite;
  animation-delay: var(--sd, 0s);
}

.finish-confetti svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@keyframes bodo-confetti {
  0% {
    opacity: 0;
    transform: translate(
        calc(var(--sx) * var(--confetti-reach)),
        calc(var(--sy) * var(--confetti-reach))
      )
      rotate(var(--rot)) scale(0.88);
  }
  12% {
    opacity: 0.95;
  }
  48% {
    opacity: 0.8;
    transform: translate(
        calc((var(--sx) + var(--sway)) * var(--confetti-reach)),
        calc((var(--sy) + var(--fall) * 0.5) * var(--confetti-reach))
      )
      rotate(calc(var(--rot) + var(--spin) * 0.55)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(
        calc((var(--sx) + var(--sway) * 0.35) * var(--confetti-reach)),
        calc((var(--sy) + var(--fall)) * var(--confetti-reach))
      )
      rotate(calc(var(--rot) + var(--spin))) scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .presence-float.is-snoozing .face,
  .presence-float.is-moving,
  .presence-float.is-done .face,
  .presence-blob.is-shaking .presence-float,
  .finish-confetti span,
  .snooze-zz span {
    animation: none;
  }
  .snooze-zz,
  .finish-confetti {
    display: none;
  }
}

.person-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0;
  font-size: 1rem;
}

.person-role {
  color: var(--muted);
  font-size: 0.85rem;
}

.world-map,
.route-map {
  position: relative;
  z-index: 0;
  isolation: isolate;
  height: 300px;
  width: 100%;
  margin-top: 0.55rem;
  border-radius: 12px;
  overflow: hidden;
  background: #ebe4d4;
}

.world-caption {
  margin: 0.45rem 0 0;
}

.world-pin {
  background: transparent;
  border: 0;
}

.face.world-face {
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
  border: 2px solid #fff;
  box-sizing: border-box;
}

.photo-row {
  display: flex;
  gap: 0.7rem;
  overflow-x: auto;
  padding: 0.2rem 0 0.4rem;
}

.photo-card {
  margin: 0;
  width: 140px;
  flex: 0 0 140px;
}

.photo-frame {
  position: relative;
  width: 140px;
  height: 140px;
}

.photo-frame > img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--cream);
  display: block;
  cursor: pointer;
}

.heart-burst {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.4);
}

.heart-burst svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: var(--live);
  display: block;
}

.heart-burst.show {
  animation: heart-pop 0.55s ease-out;
}

@keyframes heart-pop {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  35% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

.photo-card figcaption {
  margin-top: 0.3rem;
  font-size: 0.82rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.heart-count {
  margin: 0;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--faint);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
}

.heart-count svg {
  width: 0.82rem;
  height: 0.82rem;
  fill: var(--live);
  display: block;
}

.heart-count.active {
  color: var(--live);
}

.actions {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  flex-wrap: wrap;
}

.actions .starts-in {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.85rem;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.75);
}

.community-label {
  display: inline-block;
  flex-shrink: 0;
  max-width: 42%;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand-deep);
  background: var(--brand-soft);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.community-label.is-live {
  color: #fff;
  background: var(--live);
}

.community-label.is-cancelled {
  color: #7b7690;
  background: #eeedf3;
}

.run-section-heading {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* In Motion header: small amber "Hey, {name}" eyebrow over the title. */
.greeting-eyebrow {
  margin: 0 0 0.15rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #c88520;
}

/* Personal feed is unframed. Count pill leads, then the run sections. */
.feed {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.run-count-row {
  margin-bottom: 0.65rem;
}

/* Branded empty state — a facepile + nudge into Communities. */
.empty-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.empty-facepile {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.empty-face {
  border-radius: 50%;
  border: 3px solid #fff;
  object-fit: cover;
  margin-left: -10px;
}

.empty-face:first-child {
  margin-left: 0;
}

/* Middle face a touch larger, like the prototype's pile. */
.empty-face:nth-child(2) {
  width: 56px;
  height: 56px;
}

.empty-title {
  margin: 0 0 0.4rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}

.empty-sub {
  margin: 0 0 1.25rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.run-item.is-cancelled,
.run-item.is-past {
  background: #fafaf8;
}

.run-item.is-cancelled {
  border-style: dashed;
}

.run-item.is-cancelled .run-topline strong {
  text-decoration: line-through;
  color: var(--muted);
}

.run-item.is-past .run-topline strong {
  color: var(--muted);
}

.edit-form {
  display: grid;
  gap: 0.7rem;
}

/* Invite panel */

.invite-panel:not([hidden]) {
  display: grid;
  gap: 0.7rem;
  border-top: 1px solid var(--border);
  padding-top: 0.85rem;
}

.host-panels .invite-panel:not([hidden]) {
  border: 1.5px solid var(--border);
  border-top: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  padding: 1rem 1.1rem;
}

#communityManage:empty,
.actions:empty,
.meta:empty,
.hint:empty,
.muted:empty {
  display: none;
}

.invite-panel .inline-form {
  margin-top: 0;
}

.invite-link {
  background: var(--bg);
  font-size: 0.88rem;
}

.calendar-link {
  justify-self: start;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brand-deep);
}

/* Footer */

.footer {
  max-width: 940px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.25rem 2rem;
}

.footer .muted {
  margin: 0;
  font-size: 0.88rem;
  color: var(--faint);
}

@media (max-width: 720px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .full-width {
    grid-column: span 1;
  }

  .auth-row button,
  .inline-form button {
    flex: 1 1 auto;
  }
}