/* ============================================================
   SOUL CARE RHYTHMS PORTAL
   portal.css — Dashboard, profile, soul health card,
                rhythm completion, assessment, blog, events
   ============================================================ */


/* ============================================================
   PORTAL SHELL — sidebar + top bar layout (2026-05-11 redesign)
   ============================================================ */

:root {
  --portal-sidebar-width: 256px;
  --portal-sidebar-width-collapsed: 64px;
  --portal-topbar-height: 60px;
  --portal-content-radius: 20px;
}

.portal-body {
  margin: 0;
  background: var(--color-charcoal);
  min-height: 100vh;
}

.portal-shell {
  display: grid;
  grid-template-areas:
    "topbar topbar"
    "sidebar content";
  grid-template-columns: var(--portal-sidebar-width) 1fr;
  grid-template-rows: var(--portal-topbar-height) 1fr;
  min-height: 100vh;
  background: var(--color-charcoal);
  transition: grid-template-columns 200ms ease;
}

.sc-sidebar-collapsed .portal-shell {
  grid-template-columns: var(--portal-sidebar-width-collapsed) 1fr;
}

/* ---- SIDEBAR ---- */
.portal-sidebar {
  grid-area: sidebar;
  background: var(--color-charcoal);
  color: rgba(255,255,255,0.85);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: var(--portal-topbar-height);
  height: calc(100vh - var(--portal-topbar-height));
  align-self: start;
  /* overflow: visible so submenu popouts (Team -> Members/Assessment)
     can escape the sidebar's horizontal bounds. The nav has few items
     and never needs to scroll. */
  overflow: visible;
  /* Stacking context above the main content area so the submenu popout
     paints over page content when it extends to the right. Below the
     topbar (50) so the topbar still floats over a scrolled sidebar. */
  z-index: 40;
}

.portal-sidebar__nav {
  flex: 1;
  padding: 12px 10px;
  /* visible on both axes so flyouts can render to the right of items.
     If the sidebar ever grows past the viewport height, swap back to
     overflow-y:auto but use a JS-positioned popover instead of CSS
     absolute positioning. */
  overflow: visible;
}

.portal-sidebar__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.portal-sidebar__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background 150ms ease, color 150ms ease;
  white-space: nowrap;
}

.portal-sidebar__link:hover {
  background: rgba(255,255,255,0.06);
  color: white;
}

.portal-sidebar__link.is-active {
  background: rgba(255,255,255,0.14);
  color: white;
}

/* Locked state — until member completes Soul Health Assessment.
   Visually faded; clicks are blocked. Lock icon sits at the right. */
.portal-sidebar__link.is-locked {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}
.portal-sidebar__link.is-locked:hover {
  background: transparent;
}
.portal-sidebar__lock {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  color: rgba(255,255,255,0.6);
}
.portal-drawer__link.is-locked {
  opacity: 0.4;
  pointer-events: none;
}

.portal-sidebar__icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.portal-sidebar__label {
  flex: 1;
  transition: opacity 100ms ease;
}

.sc-sidebar-collapsed .portal-sidebar__label {
  opacity: 0;
  pointer-events: none;
}

/* ── Sidebar submenu: inline accordion under its parent ─────────────
   Used by the Your Team group. The parent row is a toggle button; its
   sub-links open in place below it and stay open while you're on any
   page inside the section (portal.js remembers the choice elsewhere).
   In the collapsed icon-only sidebar the row navigates to the team
   home instead, since there's no room for the labels. */
/* button. prefix outranks the reset-free <a> styles of .portal-sidebar__link */
button.portal-sidebar__group-toggle {
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
button.portal-sidebar__group-toggle:hover {
  background: rgba(255,255,255,0.06);
}
/* On a team page with the group closed, the parent carries the highlight */
.portal-sidebar__group:not(.is-open) > .portal-sidebar__group-toggle.is-section-active,
.sc-sidebar-collapsed .portal-sidebar__group-toggle.is-section-active {
  background: rgba(255,255,255,0.14);
  color: white;
}

.portal-sidebar__submenu-indicator {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  color: rgba(255,255,255,0.5);
  transition: color 150ms ease, transform 150ms ease;
  flex-shrink: 0;
}
.portal-sidebar__group-toggle:hover .portal-sidebar__submenu-indicator {
  color: white;
}
.portal-sidebar__group.is-open .portal-sidebar__submenu-indicator {
  transform: rotate(180deg);
}
.sc-sidebar-collapsed .portal-sidebar__submenu-indicator {
  display: none;
}

.portal-sidebar__nav ul.portal-sidebar__submenu {
  display: none;
  margin: 2px 0 4px;
  padding: 0 0 0 30px;
  position: relative;
}
.portal-sidebar__group.is-open > ul.portal-sidebar__submenu {
  display: flex;
}
/* Thin guide line under the parent's icon, tying the sub-links to it */
.portal-sidebar__submenu::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: rgba(255,255,255,0.12);
}
.sc-sidebar-collapsed .portal-sidebar__group.is-open > ul.portal-sidebar__submenu {
  display: none;
}

.portal-sidebar__sublink {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 6px;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
}
.portal-sidebar__sublink:hover {
  background: rgba(255,255,255,0.07);
  color: white;
}
.portal-sidebar__sublink.is-active {
  background: rgba(255,255,255,0.10);
  color: white;
}
.portal-sidebar__sublink.is-locked {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Drawer nested submenu (mobile) ─────────────────────────────── */
/* Collapsed until the group row is tapped (portal.js toggles .is-open);
   the group renders pre-opened when the current page is inside it. */
/* button. prefix outranks the later .portal-drawer__link display:block */
button.portal-drawer__group-toggle {
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.portal-drawer__chevron {
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 150ms ease;
}
.portal-drawer__group.is-open .portal-drawer__chevron { transform: rotate(180deg); }
.portal-drawer__group > .portal-drawer__submenu { display: none; }
.portal-drawer__group.is-open > .portal-drawer__submenu { display: flex; }

.portal-drawer__submenu {
  list-style: none;
  margin: 2px 0 4px;
  padding: 0 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}

.portal-drawer__submenu::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(255,255,255,0.08);
}

.portal-drawer__sublink {
  display: block;
  padding: 10px 16px;
  border-radius: 8px;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.portal-drawer__sublink:hover {
  background: rgba(255,255,255,0.05);
  color: white;
}

.portal-drawer__sublink.is-active {
  background: rgba(255,255,255,0.07);
  color: white;
}

.portal-sidebar__collapse {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 10px 14px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition: background 150ms ease, color 150ms ease;
  flex-shrink: 0;
  font-family: inherit;
  text-align: left;
}

.portal-sidebar__collapse:hover {
  background: rgba(255,255,255,0.05);
  color: white;
}

.portal-sidebar__collapse-icon {
  transition: transform 200ms ease;
}

.sc-sidebar-collapsed .portal-sidebar__collapse-icon {
  transform: rotate(180deg);
}


/* ---- TOP BAR ---- */
.portal-topbar {
  grid-area: topbar;
  background: var(--color-charcoal);
  color: white;
  display: flex;
  align-items: center;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.portal-topbar__hamburger {
  display: none;
  background: transparent;
  border: none;
  color: white;
  padding: 8px;
  cursor: pointer;
  border-radius: 6px;
  margin-right: 12px;
  align-items: center;
  justify-content: center;
}

.portal-topbar__hamburger:hover {
  background: rgba(255,255,255,0.08);
}

.portal-topbar__brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}

.portal-topbar__brand img {
  display: block;
  width: auto;
  height: 24px;
  max-width: 200px;
  object-fit: contain;
}

.portal-topbar__utility {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Beta tag — live-status pill with a soft sage tint and pulsing dot, so the
   portal's beta state reads as "live and active" rather than "incomplete". */
.portal-topbar__beta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(123, 150, 134, 0.22);
  border: 1px solid rgba(123, 150, 134, 0.45);
  padding: 4px 10px 4px 10px;
  border-radius: var(--radius-full);
  line-height: 1;
}

/* The "--mobile" variant lives inside the brand link and only shows
   on narrow viewports. By default we hide it so it doesn't double
   up with the desktop beta pill in the utility area. */
/* Brand-side Beta pill — now shown at every width (moved from the utility
   side). Slightly smaller than the base pill, with air between it and
   the logo. */
.portal-topbar__beta--mobile {
  font-size: 9px;
  padding: 3px 8px;
  gap: 6px;
  margin-left: var(--space-4);
}
.portal-topbar__beta--mobile::before {
  width: 5px;
  height: 5px;
}
.portal-topbar__beta::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-sage);
  box-shadow: 0 0 0 0 rgba(123, 150, 134, 0.6);
  animation: portalBetaPulse 2s ease-in-out infinite;
}
@keyframes portalBetaPulse {
  0%   { box-shadow: 0 0 0 0 rgba(123, 150, 134, 0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(123, 150, 134, 0); }
  100% { box-shadow: 0 0 0 0 rgba(123, 150, 134, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .portal-topbar__beta::before { animation: none; }
}

.portal-topbar__profile {
  position: relative;
}

.portal-topbar__profile-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  color: white;
  padding: 6px 12px 6px 6px;
  cursor: pointer;
  border-radius: 32px;
  transition: background 150ms ease;
  font-family: inherit;
}

.portal-topbar__profile-trigger:hover {
  background: rgba(255,255,255,0.08);
}

.portal-topbar__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255,255,255,0.1);
}

/* Team logos are usually horizontal and need a white card backdrop +
   contain fit so they aren't clipped or stretched into a circle. */
.portal-topbar__avatar--team {
  border-radius: 6px;
  object-fit: contain;
  background: white;
  padding: 3px;
}

.portal-topbar__avatar-initials {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-sage);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.portal-topbar__name {
  font-size: 14px;
  font-weight: 500;
  color: white;
}

.portal-topbar__chevron {
  color: rgba(255,255,255,0.65);
  flex-shrink: 0;
}

.portal-topbar__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
  z-index: 100;
}

.portal-topbar__dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.portal-topbar__dropdown-header {
  padding: 12px 12px 14px;
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.portal-topbar__dropdown-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-charcoal);
}

.portal-topbar__dropdown-email {
  font-size: 12px;
  color: var(--color-text-muted);
}

.portal-topbar__dropdown-tier {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--color-bg-subtle);
  color: var(--color-sage);
  align-self: flex-start;
  margin-top: 4px;
}

.portal-topbar__dropdown-item {
  display: block;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--color-charcoal);
  text-decoration: none;
  border-radius: 6px;
  transition: background 150ms ease;
}

.portal-topbar__dropdown-item:hover {
  background: var(--color-bg-subtle);
}

.portal-topbar__dropdown-item--danger {
  color: var(--color-copper);
}

.portal-topbar__dropdown-divider {
  border: none;
  border-top: 1px solid var(--color-border-light);
  margin: 6px 4px;
}


/* ---- CONTENT PANEL ---- */
.portal-content {
  grid-area: content;
  background: var(--color-cream);
  border-top-left-radius: var(--portal-content-radius);
  outline: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Override legacy portal-page padding that assumed a 64px top nav */
.portal-content .portal-page {
  padding-top: 0;
  min-height: auto;
  background: transparent;
}

.portal-content .portal-page__content {
  padding-top: var(--space-6);
}

.portal-content .portal-page__content--flush {
  padding-top: 0;
}


/* ---- MOBILE DRAWER ---- */
.portal-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
}

.portal-drawer.is-open {
  display: block;
}

.portal-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}

.portal-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  /* 80% panel — the remaining slice shows the dimmed page behind, which
     also gives a tap target to close. */
  width: 80%;
  max-width: 420px;
  background: var(--color-charcoal);
  color: rgba(255,255,255,0.85);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.35);
}

.portal-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}

.portal-drawer__header img {
  display: block;
  width: 180px;
  height: auto; /* aspect ratio governs — never squish the wordmark */
}

.portal-drawer__close {
  background: transparent;
  border: none;
  color: white;
  padding: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.portal-drawer__nav {
  flex: 1;
  padding: 12px 10px;
}

.portal-drawer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.portal-drawer__link {
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}

.portal-drawer__link:hover { background: rgba(255,255,255,0.06); color: white; }
.portal-drawer__link.is-active { background: rgba(255,255,255,0.08); color: white; }

.portal-drawer__profile {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.portal-drawer__profile-id {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 12px;
}

.portal-drawer__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255,255,255,0.1);
}

.portal-drawer__name {
  font-size: 14px;
  font-weight: 600;
  color: white;
}

.portal-drawer__email {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}

.portal-drawer__profile-link {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 14px;
}

.portal-drawer__profile-link:hover { background: rgba(255,255,255,0.06); color: white; }
.portal-drawer__profile-link--danger { color: var(--color-copper); }


/* ---- MOBILE RESPONSIVE ---- */
@media (max-width: 768px) {
  /* Taller top bar on mobile — cascades to grid rows, sidebar offsets,
     and any sticky positions that read this variable. */
  .portal-shell,
  .sc-sidebar-collapsed .portal-shell {
    --portal-topbar-height: 72px;
    grid-template-areas:
      "topbar"
      "content";
    grid-template-columns: 1fr;
  }

  .portal-sidebar {
    display: none;
  }

  .portal-topbar {
    padding: 0 16px;
  }

  .portal-topbar__hamburger {
    display: inline-flex;
  }

  /* Center the brand/logo on mobile via absolute positioning,
     so hamburger (left) and utility (right) stay anchored at edges.
     The brand becomes a vertical stack — logo + 'Private Beta' badge
     beneath — so the badge doesn't collide with the centered logo. */
  .portal-topbar__brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  .portal-topbar__brand img {
    height: 22px;
  }

  /* On mobile, hide the desktop beta pill (which sits in the right
     utility area and overlaps the centered logo). The "--mobile"
     variant below the logo takes over. */
  .portal-topbar__utility .portal-topbar__beta:not(.portal-topbar__beta--mobile) {
    display: none;
  }
  .portal-topbar__beta--mobile {
    display: inline-flex;
    font-size: 9px;
    letter-spacing: 0.08em;
    padding: 3px 9px;
    gap: 6px;
  }
  .portal-topbar__beta--mobile::before {
    width: 5px;
    height: 5px;
  }

  .portal-topbar__name,
  .portal-topbar__chevron {
    display: none;
  }

  .portal-topbar__profile-trigger {
    padding: 4px;
  }

  .portal-content {
    border-top-left-radius: var(--portal-content-radius);
    border-top-right-radius: var(--portal-content-radius);
  }
}


/* ---- DASHBOARD ---- */

/* ---- DASHBOARD HERO (white section above the wave) ---- */
.dashboard-hero {
  background: white;
  padding-top: var(--space-12);
  position: relative;
  /* Match the rounded top-left corner of .portal-content (where sidebar
     meets topbar) so the white hero doesn't cover the curve. */
  border-top-left-radius: var(--portal-content-radius);
}

/* Image-background hero (member dashboard) — photo under a teal scrim,
   matching the portal's image-header standard. Applied only to the
   standard member state; the meditative onboarding state and the free
   home keep their own looks. */
.dashboard-hero--image {
  background-color: var(--color-teal);
  background-size: cover;
  background-position: center;
}
.dashboard-hero--image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 45, 44, 0.55) 0%, rgba(17, 45, 44, 0.75) 100%);
  border-top-left-radius: inherit;
  pointer-events: none;
}
.dashboard-hero--image > * { position: relative; z-index: 1; }
/* The photo runs behind the wave — only the cream wave paths draw over it */
.dashboard-hero--image .dashboard-hero__wave { background: transparent; }
.dashboard-hero--image .dashboard-welcome__greeting,
.dashboard-hero--image .dashboard-welcome__greeting strong { color: #ffffff; }
.dashboard-hero--image .dashboard-welcome__date { color: rgba(255, 255, 255, 0.78); }

/* Animated wave divider — separates white hero from cream content below.
   Two layered wave paths with offset animation speeds for a parallax feel. */
.dashboard-hero__wave {
  position: relative;
  width: 100%;
  height: 80px;
  background: white;
  overflow: hidden;
  line-height: 0;
}
.dashboard-hero__wave svg {
  display: block;
  width: 100%;
  height: 100%;
}
.dashboard-hero__wave-layer use {
  /* Each <use> is positioned absolutely via its x attribute in the SVG.
     The whole <g> layer is translated by the animation. */
}
.dashboard-hero__wave-layer--back {
  fill: var(--color-cream);
  opacity: 0.5;
  animation: dashboard-hero-wave-back 60s linear infinite;
}
.dashboard-hero__wave-layer--front {
  fill: var(--color-cream);
  animation: dashboard-hero-wave-front 45s linear infinite;
}
@keyframes dashboard-hero-wave-back {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-1200px); }
}
@keyframes dashboard-hero-wave-front {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-1200px); }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-hero__wave-layer--back,
  .dashboard-hero__wave-layer--front {
    animation: none;
  }
}

/* ---- PRE-ASSESSMENT MEDITATIVE STATE ---- */

/* Hero variant when member hasn't completed assessment yet — deeper padding
   and centered content for a quieter, focused feel. */
.dashboard-hero--meditative {
  padding-top: var(--space-12);
}

/* Two-column layout: breathing circle on left, welcome + assessment on right.
   Using CSS Grid so the columns are deterministic — flex with min-width:0
   was occasionally collapsing to a stacked layout on this template. */
.pre-assessment-row,
.results-pending {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-16);
  align-items: center;
  margin-bottom: var(--space-10);
  padding: var(--space-6) 0;
}
.pre-assessment-content,
.results-pending__text {
  min-width: 0;
}
.results-pending {
  max-width: 920px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-6);
}
.results-pending__title {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--color-charcoal);
  margin: var(--space-3) 0 var(--space-4);
  line-height: 1.2;
}
.results-pending__copy {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 0 0 var(--space-4);
  max-width: 520px;
}
.results-pending__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0;
}
@media (max-width: 700px) {
  .results-pending {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    text-align: center;
  }
  .results-pending .breathing-circle { margin: 0 auto; }
  .results-pending__copy { margin-left: auto; margin-right: auto; }
}
@media (max-width: 700px) {
  .pre-assessment-row {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    justify-items: center;
    text-align: center;
  }
}

/* Breathing circle — two solid concentric circles in soft sage tones,
   white SOULCARE icon held still in the center.
   Both rings pulse with offset timing for a calm breath effect. */
.breathing-circle {
  position: relative;
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Compact variant — used inside Soul Health pending cards on the home page. */
.breathing-circle--sm { width: 120px; height: 120px; }
.breathing-circle--sm .breathing-circle__logo { width: 40px; height: auto; }

/* Soul Health "results pending" card — used both in the active-member sidebar
   widget and the non-member top-row card. */
.shi-pending-card {
  text-align: center;
}
.shi-pending-card .breathing-circle--sm {
  margin: 0 auto var(--space-4);
}
.breathing-circle__ring {
  position: absolute;
  border-radius: 50%;
  animation: breathing-pulse 8s ease-in-out infinite;
}
/* Two-tone teal: outer is slightly darker, inner is a touch lighter —
   same tonal relationship as the Soul Care Journal app's breathing screen,
   but tuned to read against the white hero background. */
/* Cream-toned rings — matches the wave divider color palette below.
   Using rgba so each ring has a soft layered transparency rather than
   feeling like a flat solid disc. */
.breathing-circle__ring--outer {
  inset: 0;
  background: rgba(193, 175, 135, 0.18);    /* barely-there warm tone */
  animation-delay: 0s;
}
.breathing-circle__ring--inner {
  inset: 36px;
  background: rgba(225, 209, 170, 0.22);    /* gentle inner layer */
  animation-delay: 0.5s;
}
.breathing-circle__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: auto;
  z-index: 2;
  /* Logo stays static; only the rings behind it pulse. */
}
@keyframes breathing-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .breathing-circle__ring {
    animation: none;
  }
}

/* Assessment prompt — text only, no background card */
.assessment-prompt-text {
  max-width: 560px;
}
.assessment-prompt__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-sage);
  margin-bottom: var(--space-2);
}
.assessment-prompt__title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  color: var(--color-charcoal);
  margin: 0 0 var(--space-4) 0;
  line-height: 1.3;
}
.assessment-prompt__body {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 0 0 var(--space-5) 0;
}
.assessment-prompt__cta {
  min-width: 240px;
  /* Override .btn--primary teal to use the sidebar's charcoal tone */
  background-color: var(--color-charcoal);
  border-color: var(--color-charcoal);
}
.assessment-prompt__cta:hover {
  background-color: #2c302d;
  border-color: #2c302d;
}
.assessment-prompt__note {
  margin-top: var(--space-3);
  margin-bottom: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
/* Subtle "take it later" skip — low-emphasis, sits under the primary CTA */
.assessment-prompt__skip {
  display: inline-block;
  margin-top: var(--space-4);
  background: none;
  border: none;
  padding: 4px 2px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--transition-base);
}
.assessment-prompt__skip:hover { color: var(--color-text-secondary); }

/* Inline Typeform embed for the first-time assessment experience. The
   data-tf-live embed needs an explicit height since it has no natural
   intrinsic size of its own. */
.assessment-embed {
  width: 100%;
  min-height: 560px;
  margin-top: var(--space-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.assessment-embed iframe {
  border-radius: var(--radius-lg);
}
.assessment-embed-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-8) 0;
}
.assessment-embed-wrap .assessment-embed {
  min-height: 640px;
  margin-top: 0;
}

/* Locked dashboard preview — children are faded and non-interactive,
   but the lock badge stays at full opacity on top. */
.dashboard-grid.is-locked-preview {
  position: relative;
  filter: saturate(0.6);
  pointer-events: none;
}
.dashboard-grid.is-locked-preview > *:not(.dashboard-locked-badge) {
  opacity: 0.4;
}

.dashboard-locked-badge {
  /* Sticky near the bottom of the viewport so it acts like a persistent
     CTA hovering over the locked dashboard preview as members scroll. */
  position: sticky;
  top: 80vh;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: max-content;
  max-width: 90%;
  padding: 10px 18px;
  background: var(--color-charcoal);
  color: white;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 600;
  box-shadow: var(--shadow-md);
  z-index: 10;
  pointer-events: none;
  white-space: nowrap;
  /* Take it out of the column flow so it doesn't push the grid cards down. */
  grid-column: 1 / -1;
  margin-top: var(--space-10);
  margin-bottom: calc(var(--space-10) * -1);
}
.dashboard-locked-badge svg {
  flex-shrink: 0;
}

/* Welcome header (returning member) */
.dashboard-welcome {
  margin-bottom: var(--space-8);
}
.dashboard-welcome__greeting {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: 400;
  color: var(--color-charcoal);
  margin-bottom: var(--space-1);
  line-height: 1.25;
}
.dashboard-welcome__greeting strong {
  font-weight: 700;
}
.dashboard-welcome__date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Dashboard grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-8);
  align-items: start;
}
.dashboard-grid__main   { min-width: 0; }
.dashboard-grid__sidebar { min-width: 0; }

/* Align sidebar's first card with the top of the main column's first card
   (which sits below the section title row). When the Team Assessment
   feature card is present in the main column, the main column starts
   without a section title — so remove the compensating push-down. */
@media (min-width: 1025px) {
  .dashboard-grid__sidebar > .card:first-of-type {
    margin-top: calc(var(--text-xl) * 1.35 + var(--space-5));
  }
  .dashboard-grid:has(.ta-feature-card) .dashboard-grid__sidebar > .card:first-of-type {
    margin-top: 0;
  }
}

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

/* Primary content area sections */
.dashboard-section {
  margin-bottom: var(--space-8);
}
.dashboard-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}
.dashboard-section__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-charcoal);
  margin: 0;
}


/* ---- ONBOARDING CHECKLIST ---- */
.onboarding-block {
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-sm);
}
.onboarding-block__header {
  background: var(--color-teal);
  color: white;
  padding: var(--space-6) var(--space-8);
}
.onboarding-block__eyebrow {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: white;
  margin-bottom: var(--space-3);
  display: block;
}
.onboarding-block__title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: white;
  margin-bottom: var(--space-2);
  line-height: 1.3;
}
.onboarding-block__subtitle {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  max-width: 480px;
  margin: 0;
}
.onboarding-block__progress {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.onboarding-block__progress-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
}
.onboarding-block__progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.2);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.onboarding-block__progress-fill {
  height: 100%;
  background: rgba(255,255,255,0.85);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

/* Checklist items */
.onboarding-list {
  padding: var(--space-4) 0;
}
.onboarding-item {
  border-bottom: 1px solid var(--color-border-light);
}
.onboarding-item:last-child { border-bottom: none; }

.onboarding-item__trigger {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-8);
  cursor: pointer;
  transition: background var(--transition-fast);
  width: 100%;
  background: none;
  border: none;
  text-align: left;
}
.onboarding-item__trigger:hover { background: var(--color-bg-warm); }

.onboarding-item__check {
  width: 22px; height: 22px;
  min-width: 22px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
  margin-top: 2px;
}
.onboarding-item__check svg {
  opacity: 0;
  transition: opacity var(--transition-base);
}
.onboarding-item.is-complete .onboarding-item__check {
  background: var(--color-teal);
  border-color: var(--color-teal);
}
.onboarding-item.is-complete .onboarding-item__check svg {
  opacity: 1;
}

.onboarding-item__text {
  flex: 1;
}
.onboarding-item__title {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-charcoal);
  margin-bottom: var(--space-1);
  line-height: 1.3;
  transition: color var(--transition-fast);
}
.onboarding-item.is-complete .onboarding-item__title {
  color: var(--color-text-muted);
}
.onboarding-item__description {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
}
.onboarding-item__link {
  /* Button reset (in case rendered as <button>) */
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  /* Link styling */
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-teal);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  transition: color var(--transition-fast);
}
.onboarding-item__link:hover { color: var(--color-cta-hover); }

.onboarding-item__chevron {
  color: var(--color-text-muted);
  transition: transform var(--transition-base);
  margin-top: 3px;
}
.onboarding-item.is-expanded .onboarding-item__chevron {
  transform: rotate(180deg);
}

/* Expandable note area */
.onboarding-item__expand {
  display: none;
  padding: 0 var(--space-8) var(--space-5) calc(var(--space-8) + 22px + var(--space-4));
}
.onboarding-item.is-expanded .onboarding-item__expand {
  display: block;
}
.onboarding-item__note-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.onboarding-item__note-saved {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-style: italic;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-warm);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  display: none;
}
.onboarding-item__note-saved.is-visible { display: block; }

/* When a note has been saved, hide the textarea — the saved note pill above
   shows the current value and the Save button flips to "Edit Note" so the
   member can re-enter edit mode. */
.onboarding-item.is-note-saved textarea { display: none; }

.onboarding-item__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* Complete state celebration */
.onboarding-complete {
  display: none;
  padding: var(--space-8);
  text-align: center;
}
.onboarding-complete.is-visible { display: block; }
.onboarding-complete__icon {
  width: 48px; height: 48px;
  background: var(--color-flourishing-bg);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  color: var(--color-teal);
}
.onboarding-complete__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  color: var(--color-charcoal);
  margin-bottom: var(--space-2);
}
.onboarding-complete__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 380px;
  margin: 0 auto;
}


/* ---- SOUL HEALTH INDEX CARD ---- */
.shi-card {
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.shi-card__top {
  padding: var(--space-6);
}
.shi-card__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-sage);
  margin-bottom: var(--space-4);
}
.shi-card__state-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.shi-card__state-name {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--color-charcoal);
  line-height: 1.1;
}
.shi-card__score-block {
  text-align: right;
}
.shi-card__score {
  font-family: var(--font-serif);
  font-size: var(--text-5xl);
  font-weight: 700;
  color: var(--color-charcoal);
  line-height: 1;
}
.shi-card__score-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: block;
}
.shi-card__delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  font-weight: 600;
  margin-top: var(--space-1);
}
.shi-card__delta--up   { color: var(--color-teal); }
.shi-card__delta--down { color: var(--color-healing); }
.shi-card__delta--same { color: var(--color-text-muted); }

/* State-based card accents */
.shi-card--healing     { border-top: 3px solid var(--color-healing); }
.shi-card--strengthening { border-top: 3px solid var(--color-strengthening); }
.shi-card--flourishing { border-top: 3px solid var(--color-flourishing); }

.shi-card__last-taken {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.shi-card__chart {
  height: 60px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 0 var(--space-1);
}
.shi-card__chart-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: var(--color-bg-subtle);
  transition: background var(--transition-fast);
  cursor: default;
  position: relative;
}
.shi-card__chart-bar:hover { background: var(--color-light-sage); }
.shi-card__chart-bar--active { background: var(--color-teal) !important; }

.shi-card__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}


/* ---- GUIDE MEETING CARD ---- */
.guide-card {
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.guide-card__header {
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg-warm);
  border-bottom: 1px solid var(--color-border-light);
}
.guide-card__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-copper);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.guide-card__body {
  padding: var(--space-6);
}
.guide-card__guide-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.guide-card__avatar {
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
  object-fit: cover;
  flex-shrink: 0;
}
.guide-card__guide-info {}
.guide-card__guide-name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-charcoal);
}
.guide-card__guide-role {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.guide-card__meeting-date {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-charcoal);
  margin-bottom: var(--space-1);
}
.guide-card__meeting-time {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}
.guide-card__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-light);
  display: flex;
  gap: var(--space-3);
}

/* No meeting scheduled state */
.guide-card--no-meeting .guide-card__body {
  text-align: center;
  padding: var(--space-8) var(--space-6);
}
.guide-card__empty-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

/* Post-meeting completion state */
.guide-card--complete .guide-card__header {
  background: var(--color-flourishing-bg);
  border-bottom-color: var(--color-flourishing-border);
}
.guide-card--complete .guide-card__label {
  color: var(--color-teal);
}


/* ---- RHYTHM COMPLETION WIDGET ---- */
.completion-widget {
  background: var(--color-bg-warm);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-top: var(--space-6);
}
.completion-widget__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.completion-widget__prompt {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  color: var(--color-charcoal);
  margin-bottom: var(--space-4);
  line-height: 1.5;
}

/* Before completion state */
.completion-widget__before {}

/* After completion state */
.completion-widget__after {
  display: none;
}
.completion-widget.is-complete .completion-widget__before {
  display: none;
}
.completion-widget.is-complete .completion-widget__after {
  display: block;
}

.completion-widget__confirmed {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-teal);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-4);
}
.completion-widget__confirmed-date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 400;
}

.completion-widget__note-saved {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-style: italic;
  padding: var(--space-3) var(--space-4);
  background: white;
  border-radius: var(--radius-md);
  line-height: 1.6;
}
/* No note saved → don't render an empty white pill */
.completion-widget__note-saved:empty { display: none; }

/* Edit note / Unmark attendance — quiet text links under the confirmed state */
.completion-widget__after-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.completion-widget__action-link {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.completion-widget__action-link:hover {
  color: var(--color-text-secondary);
}
.completion-widget__action-link--danger:hover {
  color: var(--color-copper);
}

.completion-widget__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}


/* ---- SOUL HEALTH ASSESSMENT PAGE ---- */
.assessment-hero {
  background: linear-gradient(135deg, var(--color-teal) 0%, #0D3D3C 100%);
  color: white;
  padding: var(--space-16) 0;
  text-align: center;
}
.assessment-hero__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--space-4);
}
.assessment-hero__title {
  font-family: var(--font-serif);
  font-size: var(--text-5xl);
  font-weight: 700;
  color: white;
  margin-bottom: var(--space-5);
  line-height: 1.15;
}
.assessment-hero__subtitle {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.8);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto var(--space-8);
}

/* Current score display */
.assessment-current {
  background: white;
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
  max-width: 680px;
  margin: 0 auto var(--space-10);
  box-shadow: var(--shadow-xl);
}
.assessment-current__score-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}
.assessment-current__number {
  font-family: var(--font-serif);
  font-size: 72px;
  font-weight: 700;
  color: var(--color-teal);
  line-height: 1;
}
.assessment-current__state-info {}
.assessment-current__state-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.assessment-current__state-name {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-charcoal);
  margin-bottom: var(--space-2);
}
.assessment-current__last-taken {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Score history chart */
.score-history {
  margin-top: var(--space-8);
}
.score-history__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.score-history__chart {
  width: 100%;
  height: 120px;
  position: relative;
}
.score-history__chart canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Dimensions grid */
.dimensions-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.dimension-card {
  text-align: center;
  padding: var(--space-5) var(--space-4);
  background: var(--color-bg-warm);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
}
.dimension-card__score {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-teal);
  margin-bottom: var(--space-1);
}
.dimension-card__name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
}

@media (max-width: 900px) {
  /* auto-fit wraps tiles to whatever fits — never overflows the card */
  .dimensions-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
@media (max-width: 768px) {
  .assessment-hero__title { font-size: var(--text-4xl); }
  .assessment-current__number { font-size: 56px; }
}

/* ---- REFLECTION SNAPSHOT (Words You Carried) ----
   Renders the "What Marks Your Life?" multi-select from the assessment
   as soft serif pills under the SHI spectrum. Past-tense framing —
   these are words from a previous reflection, not a current label. */
.reflection-snapshot {
  margin-top: var(--space-12);
  max-width: 720px;
}
.reflection-snapshot__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-sage);
  margin-bottom: var(--space-2);
}
.reflection-snapshot__heading {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  color: var(--color-charcoal);
  margin: 0 0 var(--space-4) 0;
  line-height: 1.4;
  font-weight: 400;
}
.reflection-snapshot__words {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.reflection-snapshot__word {
  display: inline-block;
  padding: 12px 24px;
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: 999px;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--color-charcoal);
  line-height: 1.2;
  white-space: nowrap;
  /* Subtle warmth, like a journaled phrase rather than a tag */
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.reflection-snapshot__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  line-height: 1.7;
  max-width: 560px;
  margin: 0;
}

/* ---- RESULT MODULES — three stacked cards summarising assessment results.
   Each is a white card on the cream content background. Consistent
   eyebrow → title → body structure across SHI, Five Dimensions, and Words. */
.result-module {
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  margin-top: var(--space-8);
  box-shadow: var(--shadow-sm);
}
.result-module:first-of-type {
  margin-top: var(--space-10);
}
.result-module__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-sage);
  margin-bottom: var(--space-3);
}
.result-module__title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  color: var(--color-charcoal);
  margin: 0 0 var(--space-4) 0;
  line-height: 1.25;
  font-weight: 700;
}
.result-module__copy {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 0;
  max-width: 680px;
}
/* The season name in the SHI module title gets a subtle color tint */
.result-module__season {
  color: var(--color-sage);
}
.result-module__season--healing       { color: #b87b5a; }
.result-module__season--strengthening { color: var(--color-sage); }
.result-module__season--flourishing   { color: var(--color-teal); }

/* Three skinny cards showing the SHI continuum at the bottom of the module.
   Smaller / more compact than the original 3-state spectrum but still card-
   shaped so the member can see all three options at a glance with the active
   one clearly highlighted. */
.shi-mini-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-light);
}
/* Mobile: the three season pills stack vertically instead of squeezing */
@media (max-width: 640px) {
  .shi-mini-cards { grid-template-columns: 1fr; }
}
.shi-mini-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-warm);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
}
.shi-mini-card__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
  flex-shrink: 0;
}
.shi-mini-card__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.shi-mini-card.is-active {
  background: white;
  border-color: var(--color-sage);
  color: var(--color-charcoal);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.shi-mini-card.is-active.is-healing .shi-mini-card__dot       { background: #b87b5a; }
.shi-mini-card.is-active.is-strengthening .shi-mini-card__dot { background: var(--color-sage); }
.shi-mini-card.is-active.is-flourishing .shi-mini-card__dot   { background: var(--color-teal); }

/* Dimension cards inside the Five Dimensions module — now show a category
   badge (Healing/Strengthening/Flourishing) instead of a raw score number. */
.dimension-card__badge {
  display: inline-block;
  margin-bottom: var(--space-3);
}
.dimension-card__empty {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
}


/* ---- QUARTERLY RHYTHM REMINDER CARD ----
   Closing module on the assessment page — soft nudge to retake every 90 days. */
.quarterly-rhythm-card {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  align-items: flex-start;
  padding: var(--space-8);
  background: var(--color-strengthening-bg);
  border-radius: var(--radius-2xl);
}
.quarterly-rhythm-card__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: white;
  color: var(--color-sage);
  border: 1px solid var(--color-border-light);
}
.quarterly-rhythm-card__body {
  min-width: 0;
}
.quarterly-rhythm-card__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-sage);
  margin-bottom: var(--space-2);
}
.quarterly-rhythm-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  color: var(--color-charcoal);
  margin: 0 0 var(--space-3) 0;
  line-height: 1.3;
  font-weight: 700;
}
.quarterly-rhythm-card__copy {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 0 0 var(--space-5) 0;
  max-width: 640px;
}
.quarterly-rhythm-card__cta {
  /* Ghost variant against the sage bg — borderless, charcoal text */
  background: white;
  border: 1px solid var(--color-border-light);
  color: var(--color-charcoal);
}
.quarterly-rhythm-card__cta:hover {
  background: var(--color-bg-warm);
  border-color: var(--color-charcoal);
}

@media (max-width: 600px) {
  .quarterly-rhythm-card {
    grid-template-columns: 1fr;
    padding: var(--space-6);
    text-align: center;
  }
  .quarterly-rhythm-card__icon {
    margin: 0 auto;
  }
}


/* ---- RESULTS GUIDE DOWNLOAD CARD ----
   Season-specific module on the assessment page: cover image left,
   heading + copy + copper CTA right. White card on the cream background
   for clean visual separation. */
.results-guide-card {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-10);
  align-items: center;
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}
.results-guide-card__cover {
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Transparent + contain: the PDF cover shows at its true ratio with no
     crop, sized to the text column's height (letterbox is invisible on
     the white card). */
  background: transparent;
  align-self: stretch;
  position: relative;
  min-height: 220px;
}
.results-guide-card__cover {
  display: flex;
  align-items: center;
  justify-content: center;
}
.results-guide-card__cover img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  /* The element shrink-wraps the artwork, so rounding lands on the
     cover's actual corners rather than invisible letterbox space */
  border-radius: var(--radius-md);
}
/* Modifier — shows the entire image (no crop). Used on the Team Assessment
   page where the report preview should be visible top-to-bottom. */
.results-guide-card__cover--contain {
  background: transparent;
  aspect-ratio: auto;
  align-self: center;
  position: static;
  min-height: 0;
}
.results-guide-card__cover--contain img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
}

/* Report variant of the guide card — bigger cover image, content fills the
   right half so the card doesn't feel lopsided with empty trailing space. */
.results-guide-card--report {
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}
.results-guide-card__body {
  min-width: 0;
}
.results-guide-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-3) 0;
  line-height: 1.2;
}
.results-guide-card__subtitle {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-style: italic;
  color: var(--color-teal);
  margin: 0 0 var(--space-4) 0;
}
.results-guide-card__copy {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 0 0 var(--space-6) 0;
  max-width: 520px;
}
.results-guide-card__cta {
  display: inline-block;
  background: var(--color-copper);
  color: white;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: var(--text-base);
  font-weight: 600;
  transition: background var(--transition-fast);
}
.results-guide-card__cta:hover {
  background: #8a4e2b;
  color: white;
}

@media (max-width: 720px) {
  .results-guide-card {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding: var(--space-6);
    text-align: center;
  }
  .results-guide-card__cover {
    max-width: 280px;
    margin: 0 auto;
    width: 100%;
    align-self: auto;
    aspect-ratio: 4 / 5; /* single column: image sets its own height again */
  }
  .results-guide-card__copy {
    margin-left: auto;
    margin-right: auto;
  }
}


/* ---- SOUL HEALTH SPECTRUM (THREE-STATE DISPLAY) ---- */
.shi-spectrum {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.shi-spectrum__state {
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  position: relative;
  opacity: 0.4;
  transition: opacity var(--transition-fast);
}
.shi-spectrum__state.is-active {
  opacity: 1;
  box-shadow: var(--shadow-md);
}
.shi-spectrum__state--healing.is-active {
  background: var(--color-healing-bg);
  border-color: var(--color-healing-border);
  border-top: 3px solid var(--color-healing);
}
.shi-spectrum__state--strengthening.is-active {
  background: var(--color-strengthening-bg);
  border-color: var(--color-strengthening-border);
  border-top: 3px solid var(--color-strengthening);
}
.shi-spectrum__state--flourishing.is-active {
  background: var(--color-flourishing-bg);
  border-color: var(--color-flourishing-border);
  border-top: 3px solid var(--color-flourishing);
}
.shi-spectrum__you-are-here {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  color: white;
}
.shi-spectrum__state--healing.is-active .shi-spectrum__you-are-here {
  background: var(--color-healing);
}
.shi-spectrum__state--strengthening.is-active .shi-spectrum__you-are-here {
  background: var(--color-strengthening);
}
.shi-spectrum__state--flourishing.is-active .shi-spectrum__you-are-here {
  background: var(--color-flourishing);
}
.shi-spectrum__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}
.shi-spectrum__icon--healing       { background: var(--color-healing); }
.shi-spectrum__icon--strengthening { background: var(--color-strengthening); }
.shi-spectrum__icon--flourishing   { background: var(--color-flourishing); }
.shi-spectrum__name {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-charcoal);
  margin-bottom: var(--space-2);
}
.shi-spectrum__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}
@media (max-width: 640px) {
  .shi-spectrum { grid-template-columns: 1fr; }
}

/* SHI card compact spectrum (home/profile) */
.shi-card__spectrum {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}
.shi-card__spectrum-state {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  opacity: 0.35;
}
.shi-card__spectrum-state.is-active {
  opacity: 1;
}
.shi-card__spectrum-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.shi-card__spectrum-state--healing       .shi-card__spectrum-dot { background: var(--color-healing); }
.shi-card__spectrum-state--strengthening .shi-card__spectrum-dot { background: var(--color-strengthening); }
.shi-card__spectrum-state--flourishing   .shi-card__spectrum-dot { background: var(--color-flourishing); }
.shi-card__spectrum-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-charcoal);
  white-space: nowrap;
}
.shi-card__spectrum-state.is-active .shi-card__spectrum-label {
  font-weight: 700;
}


/* ---- RESOURCE LIBRARY ---- */
/* 3-across grid steps down to 2 columns on tablets, 1 on phones.
   (The generic .grid--3 jumps straight from 3 to 1 at 768px — too
   cramped in between, so the resources grid gets its own steps.) */
@media (max-width: 1024px) {
  #resources-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  #resources-grid { grid-template-columns: 1fr; }
}
.resource-card {
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.resource-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.resource-card__thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-subtle);
  overflow: hidden;
  position: relative;
}

/* Status badges layered over the thumbnail. New takes precedence over
   Featured (the template renders only one). Sage for New = freshness,
   copper for Featured = curated emphasis. */
.resource-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  line-height: 1.4;
}
.resource-card__badge--new {
  background: var(--color-sage);
}
.resource-card__badge--featured {
  background: #c79b6a; /* copper accent, matches Maybe RSVP color */
}
.resource-card__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Play button overlay for video resources (e.g. video courses) */
.resource-card__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(17, 45, 44, 0.35);
  transition: transform var(--transition-base);
  pointer-events: none;
}
.resource-card:hover .resource-card__play { transform: scale(1.08); }
.resource-card__play svg {
  display: block;
  margin-left: 3px; /* optically center the triangle */
}
.resource-card__thumbnail--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-light-sage);
}
.resource-card__body {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.resource-card__category {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-copper);
  margin-bottom: var(--space-3);
}
.resource-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-charcoal);
  margin-bottom: var(--space-3);
  line-height: 1.3;
}
.resource-card__description {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: var(--space-5);
  flex: 1;
}
/* CTA inside a resource card — styled as a ghost button. The card itself is
   the click target (whole <a>), so this is visual only. */
.resource-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 10px var(--space-5);
  border: 2px solid var(--color-charcoal);
  border-radius: var(--radius-md);
  color: var(--color-charcoal);
  background: transparent;
  transition: background-color var(--transition-base), color var(--transition-base);
}
.resource-card__link:hover {
  background-color: var(--color-charcoal);
  color: white;
}
.resource-card__link svg { display: none; }


/* ---- EVENTS PAGE ---- */
.event-card {
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  gap: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
  position: relative;
}
.event-card:hover { box-shadow: var(--shadow-md); }

/* Featured image column on the left edge of the card.
   Bleeds to the card's top, left, and bottom rounded corners.
   border-radius on the banner itself (instead of overflow:hidden
   on the parent) so dropdown menus inside the card aren't clipped. */
.event-card__banner {
  flex-shrink: 0;
  width: 280px;
  align-self: stretch;
  margin: calc(var(--space-6) * -1) 0 calc(var(--space-6) * -1) calc(var(--space-6) * -1);
  overflow: hidden;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  position: relative;
}
/* Show the artwork in full (contain) on a solid sage fill — matches the
   brand art's own background, so no more chopped art at any card size. */
.event-card__banner {
  background: var(--color-sage);
}
.event-card__banner img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* The event list is a size container: the card's available width depends on
   the portal sidebar and the calendar rail, so viewport media queries misfire
   badly at laptop widths (card squeezed to nothing while the viewport still
   reads "desktop"). All event-card responsive tiers are @container rules —
   see the EVENT CARD RESPONSIVE TIERS block further down. */
.events-section__list {
  container-type: inline-size;
}

.event-card__date-block {
  flex-shrink: 0;
  width: 64px;
  text-align: center;
  background: var(--color-teal);
  color: white;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.event-card__month {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
  line-height: 1;
  margin-bottom: var(--space-1);
}
.event-card__day {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1;
}

.event-card__content {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: auto;
  align-content: start;
}

/* Home dashboard: Latest Check-in card (image left, content right) */
.latest-checkin-card {
  display: flex;
  align-items: stretch;
  gap: var(--space-5);
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
  text-decoration: none;
  color: inherit;
  position: relative;
}
.latest-checkin-card:hover {
  box-shadow: var(--shadow-md);
}
.latest-checkin-card__image {
  flex-shrink: 0;
  width: 240px;
  aspect-ratio: 16 / 9;
  align-self: center;
  overflow: hidden;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
}
.latest-checkin-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.latest-checkin-card__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  padding-right: var(--space-6);
}
.latest-checkin-card__readmore {
  align-self: flex-start;
  margin-top: var(--space-3);
}
@media (max-width: 700px) {
  .latest-checkin-card { flex-direction: column; }
  .latest-checkin-card__image { width: 100%; }
}
.latest-checkin-card__content .card__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-charcoal);
  line-height: 1.3;
}
/* Blog listing cards: the embedded audio player is a visual cue, not a
   working player. Its markup rides in from each post's stored summary,
   where cloned posts carry last week's narration file — so instead of
   playing (possibly wrong) audio here, clicks pass through the player to
   the card's wrapping link and open the post, where the real narration
   lives. The duration number stays hidden for the same reason. */
/* Mobile: stack the listing cards — image full-width on top, content
   below. The card's grid is inline-styled, hence the !important. */
@media (max-width: 700px) {
  [data-blog-item] .card {
    grid-template-columns: 1fr !important;
    gap: var(--space-4) !important;
  }
  [data-blog-item] .card > div:first-child {
    aspect-ratio: 16 / 9 !important;
  }
}

[data-blog-item] .hs-audio-player__duration {
  display: none;
}
[data-blog-item] .hs-audio-player,
[data-blog-item] .hs_cos_wrapper_type_module:has(.hs-audio-player) {
  pointer-events: none;
}

.latest-checkin-card__audio {
  margin-top: var(--space-2);
  /* Neutralize any inherited backgrounds/borders from blog post_summary
     (e.g. blockquotes, callouts) — we only want the audio player visible. */
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
/* Hide every direct child of the audio wrapper by default,
   then unhide only the ones that contain a media element. */
.latest-checkin-card__audio > * {
  display: none !important;
}
.latest-checkin-card__audio > audio,
.latest-checkin-card__audio > iframe,
.latest-checkin-card__audio > video,
.latest-checkin-card__audio > *:has(audio),
.latest-checkin-card__audio > *:has(iframe),
.latest-checkin-card__audio > *:has(video) {
  display: block !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-style: normal !important;
  color: inherit !important;
}
.latest-checkin-card__audio audio,
.latest-checkin-card__audio iframe,
.latest-checkin-card__audio video {
  width: 100%;
  max-width: 100%;
  display: block;
}

/* Hide the cream "reflection note" callout that Mindy adds inline inside
   blog post_summary content. The HubSpot editor stamps it as
   <div style="...; background-color: #f5f2eb; ..."> (sometimes rgb(245,242,235))
   and it leaks into every place we render post_summary (home Latest Check-in
   card AND blog-listing featured card). We only want the audio + title on
   those summary cards, so hide it everywhere post_summary is shown. */
.hs_cos_wrapper [style*="#f5f2eb" i],
.hs_cos_wrapper [style*="245, 242, 235"],
.hs_cos_wrapper [style*="245,242,235"],
.latest-checkin-card__audio [style*="#f5f2eb" i],
.latest-checkin-card__audio [style*="245, 242, 235"],
.latest-checkin-card__audio [style*="245,242,235"],
.card--raised [style*="#f5f2eb" i],
.card--raised [style*="245, 242, 235"],
.card--raised [style*="245,242,235"] {
  display: none !important;
}

/* Strip inline background colors from rich-text content inside blog posts.
   The HubSpot editor lets authors set per-element background colors which
   conflict with the portal's page background. We want a clean surface,
   so neutralize backgrounds on text elements (leaves widgets/images alone). */
.blog-post__body p[style*="background"],
.blog-post__body div[style*="background"],
.blog-post__body span[style*="background"],
.blog-post__body h1[style*="background"],
.blog-post__body h2[style*="background"],
.blog-post__body h3[style*="background"],
.blog-post__body h4[style*="background"],
.blog-post__body h5[style*="background"],
.blog-post__body h6[style*="background"],
.blog-post__body blockquote[style*="background"],
.blog-post__body li[style*="background"],
.blog-post__body ul[style*="background"],
.blog-post__body ol[style*="background"] {
  background: transparent !important;
  background-color: transparent !important;
}
.latest-checkin-card__arrow {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .latest-checkin-card {
    flex-direction: column;
  }
  .latest-checkin-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: 240px;
    align-self: stretch;
  }
}


/* Two-column layout: events list on the left, calendar sidebar on the right */
.events-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-8);
  align-items: start;
}
.events-layout__main { min-width: 0; }
.events-layout__sidebar { min-width: 0; position: sticky; top: calc(var(--portal-topbar-height) + var(--space-4)); }

@media (max-width: 1280px) {
  /* Drop the calendar sidebar below the events list earlier — at intermediate
     widths (with portal sidebar visible), a 320px calendar column would squeeze
     the event cards' content too narrow. */
  .events-layout {
    grid-template-columns: 1fr;
  }
  .events-layout__sidebar {
    position: static;
  }
}

/* Month calendar widget */
.event-calendar {
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

/* Featured Retreat Guide card — sits directly beneath the calendar in
   the events sidebar. Visual style matches the calendar (same border,
   radius, shadow) so the two read as a paired sidebar unit. */
.retreat-guide-card {
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  margin-top: var(--space-4);
  overflow: hidden;
}
.retreat-guide-card__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-sage);
  margin-bottom: var(--space-3);
}
.retreat-guide-card__thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-subtle);
  overflow: hidden;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.retreat-guide-card__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.retreat-guide-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-charcoal);
  line-height: 1.25;
  margin-bottom: var(--space-2);
}
.retreat-guide-card__description {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0 0 var(--space-4);
}
.retreat-guide-card__cta {
  display: inline-flex;
  align-items: center;
}
.event-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  gap: var(--space-2);
}
.event-calendar__nav {
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.event-calendar__nav:hover {
  background: var(--color-bg-subtle);
  color: var(--color-charcoal);
}
.event-calendar__month-label {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-charcoal);
  margin: 0;
  flex: 1;
  text-align: center;
}
.event-calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.event-calendar__weekday {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: 6px 0;
  text-transform: uppercase;
}
.event-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.event-calendar__day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--color-charcoal);
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  font-family: inherit;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.event-calendar__day:hover {
  background: var(--color-bg-subtle);
}
.event-calendar__day--outside {
  color: var(--color-text-muted);
  opacity: 0.35;
  cursor: default;
}
.event-calendar__day--outside:hover {
  background: transparent;
}
.event-calendar__day--today {
  background: var(--color-teal);
  color: white;
  font-weight: 700;
}
.event-calendar__day--today:hover {
  background: var(--color-cta-hover);
  color: white;
}
.event-calendar__day.is-selected {
  background: var(--color-sage);
  color: white;
  font-weight: 700;
}
.event-calendar__day.is-selected:hover {
  background: var(--color-sage);
}
.event-calendar__day--today.is-selected {
  background: var(--color-teal);
  outline: 2px solid var(--color-sage);
  outline-offset: -3px;
}
/* Days with at least one event: fill the day circle with a light sage tint
   so the member can scan the month at a glance. */
.event-calendar__day--has-event {
  background: var(--color-light-sage);
  color: var(--color-charcoal);
  font-weight: 600;
}
.event-calendar__day--has-event:hover {
  background: var(--color-sage);
  color: white;
}
/* When the event day is ALSO today or selected, the stronger teal/sage
   wins. We use two-class selectors here to outweigh the single-class
   .event-calendar__day--has-event rule above. */
.event-calendar__day--today.event-calendar__day--has-event {
  background: var(--color-teal);
  color: white;
}
.event-calendar__day--today.event-calendar__day--has-event:hover {
  background: var(--color-cta-hover);
  color: white;
}
.event-calendar__day.is-selected.event-calendar__day--has-event {
  background: var(--color-sage);
  color: white;
}
.event-calendar__day.is-selected.event-calendar__day--has-event:hover {
  background: var(--color-sage);
  color: white;
}
.event-calendar__today-btn {
  margin-top: var(--space-4);
  display: inline-flex;
  background: transparent;
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-charcoal);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition-fast);
}
.event-calendar__today-btn:hover {
  background: var(--color-bg-subtle);
}


/* Event tabs (Upcoming / Confirmed / Past / Team) */
.events-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: var(--space-6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* hide scrollbar — overflow is for tab scrolling, not styling */
}
.events-tabs::-webkit-scrollbar { display: none; }
.events-tabs__tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
  margin-bottom: -1px;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .events-tabs__tab {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
  }
}
.events-tabs__tab:hover {
  color: var(--color-charcoal);
}
.events-tabs__tab.is-active {
  color: var(--color-charcoal);
  border-bottom-color: var(--color-sage);
}

/* Event panels - only the active tab's section renders */
.events-section {
  display: none;
}
.events-section.is-active {
  display: block;
}
.events-section__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.events-section__empty {
  padding: var(--space-8) 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.events-section__empty p { margin: 0; }


/* ── RSVP dropdown (tri-state: Going / Maybe / Not Going) ──────────
   Replaces the old single-action RSVP button. Selected status shows
   in the button label; menu items highlight the current pick. The
   separate Zoom Link button toggles visibility based on status. */
.event-card__rsvp {
  position: relative;
  display: inline-block;
}

.event-card__rsvp-btn[data-status="going"] {
  background: var(--color-sage);
  border-color: var(--color-sage);
}
.event-card__rsvp-btn[data-status="maybe"] {
  background: #c79b6a;
  border-color: #c79b6a;
}
.event-card__rsvp-btn[data-status="not_going"] {
  background: var(--color-text-muted, #8a8a8a);
  border-color: var(--color-text-muted, #8a8a8a);
}

.event-card__rsvp-chevron {
  transition: transform 150ms ease;
}
.event-card__rsvp-btn[aria-expanded="true"] .event-card__rsvp-chevron {
  transform: rotate(180deg);
}

.event-card__rsvp-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 160px;
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.event-card__rsvp-menu[hidden] {
  display: none;
}
.event-card__rsvp-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-charcoal);
  cursor: pointer;
  transition: background 150ms ease;
}
.event-card__rsvp-menu button:hover {
  background: var(--color-bg-subtle);
}
.event-card__rsvp-menu button.is-selected {
  background: var(--color-bg-subtle);
  font-weight: 600;
  position: relative;
  padding-right: 28px;
}
.event-card__rsvp-menu button.is-selected::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--color-sage);
  border-bottom: 2px solid var(--color-sage);
  transform: translateY(-70%) rotate(-45deg);
}

/* Zoom Link button — appears alongside the RSVP dropdown when a member
   responds Going or Maybe. Ghost styling so the RSVP dropdown remains
   the primary action. */
.event-card__zoom-btn {
  /* base ghost styling already comes from btn--ghost btn--sm */
}

/* Legacy "Confirmed" indicator (no longer rendered, kept for safety in
   case any cached HTML still contains the old markup). */
.event-card__rsvped-state {
  display: inline-flex;
  align-items: center;
  color: var(--color-sage);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 6px 12px;
}
.event-card__unrsvp-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 0 4px;
  margin-left: 8px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}
.event-card__unrsvp-btn:hover {
  color: var(--color-charcoal);
}

/* Event card action buttons (RSVP / Join Zoom / Add to Calendar) */
.event-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  flex-shrink: 0;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
  position: relative;
  z-index: 2;
  background: white;
  clear: both;
  width: 100%;
}

.event-card__cal-dropdown {
  position: relative;
  display: inline-block;
}

.event-card__cal-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.event-card__cal-menu[hidden] {
  display: none;
}

.event-card__cal-menu a {
  display: block;
  padding: 8px 12px;
  font-size: var(--text-sm);
  color: var(--color-charcoal);
  text-decoration: none;
  border-radius: 6px;
  transition: background 150ms ease;
}

.event-card__cal-menu a:hover {
  background: var(--color-bg-subtle);
  color: var(--color-charcoal);
}

/* Mobile: menus float over neighboring content like on desktop. The old
   clipping came from overflow:hidden on the narrow-tier .event-card —
   removed there (the banner clips its own corners instead). */

.event-card__completion {
  flex-shrink: 0;
  width: 280px;
  border-left: 1px solid var(--color-border-light);
  padding-left: var(--space-6);
  display: flex;
  flex-direction: column;
}
.event-card__completion .completion-widget {
  border: none;
  padding: 0;
  box-shadow: none;
  background: transparent;
}
.event-card__completion .completion-widget__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.event-card__completion .completion-widget__prompt {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.event-card__type {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-copper);
  margin-bottom: var(--space-2);
}
.event-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-charcoal);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}
.event-card__details {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.event-card__detail {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Description body — HubDB rich text renders <p> tags inside, sometimes
   with inline styles (margins, positioning) from the rich text editor.
   Force everything inside to standard block flow so nothing can escape. */
.event-card__description {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.65;
  max-width: 520px;
  margin-bottom: var(--space-3);
  position: relative;
  z-index: 1;
  display: block;
  flex-shrink: 1;
}
/* Pasted rich text can carry stray empty controls (buttons, inputs) that
   add invisible height — never render them in a description. */
.event-card__description button,
.event-card__description input,
.event-card__description select {
  display: none !important;
}
.event-card__description * {
  position: static !important;
  float: none !important;
  max-width: 100%;
}
/* Rich text from the HubDB editor can carry inline fixed heights (pasted
   content), which makes the text spill past its own box and slide under
   the actions bar — the "cut off mid-sentence with a line through it"
   bug. Force natural height on everything except real embeds. */
.event-card__description *:not(iframe):not(video):not(audio):not(img):not(svg) {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.event-card__description p {
  margin: 0 0 var(--space-2) 0;
}
.event-card__description p:last-child { margin-bottom: 0; }


/* =====================================================
   EVENT CARD RESPONSIVE TIERS (container queries)
   The card's available width depends on the portal sidebar and the events
   calendar rail, so these key off the actual list column width (the
   .events-section__list container), not the viewport. Three tiers:

   wide   (≥980px container) — base flex row:
            banner (280) | date | content | reflection rail (280)
   medium (560–979px)        — grid: banner narrows to 200 and spans the full
            card height on the left; the reflection panel drops below the
            content instead of squeezing it from the right
   narrow (≤559px)           — stacked: banner edge-to-edge on top, date
            strip, content, reflection — the phone layout
   ===================================================== */
@container (max-width: 979px) {
  .event-card {
    display: grid;
    grid-template-columns: 200px 64px minmax(0, 1fr);
    grid-template-areas: "banner date content";
  }
  /* Past-tab cards carry the reflection panel — give it its own full-width
     row underneath. The banner stays up top with the date + details, so the
     image doesn't stretch down alongside the reflection box. Cards without
     a reflection (Upcoming) keep the single-row template above, so no
     phantom row-gap appears at the bottom. */
  .event-card:has(.event-card__completion) {
    grid-template-areas:
      "banner date content"
      "completion completion completion";
  }
  .event-card__banner    { grid-area: banner; width: auto; }
  /* When the reflection row exists, the banner no longer reaches the card
     bottom — stop the bottom bleed so it ends flush with the details row. */
  .event-card:has(.event-card__completion) .event-card__banner {
    margin-bottom: 0;
    border-radius: var(--radius-lg) 0 0 0;
  }
  .event-card__date-block{ grid-area: date; }
  .event-card__content   { grid-area: content; }
  .event-card__completion {
    grid-area: completion;
    width: auto;
    border-left: none;
    border-top: 1px solid var(--color-border-light);
    padding-left: 0;
    padding-top: var(--space-5);
  }
}

@container (max-width: 559px) {
  .event-card,
  .event-card:has(.event-card__completion) {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
    /* No overflow:hidden here — it clipped the floating RSVP/calendar
       menus. The banner clips its own corners below instead. */
  }
  /* Square-ish crop capped at 240px tall (matches the Latest Check-in card's
     mobile treatment) — the featured images are square brand art, and a 16:9
     strip zooms into the middle and chops the artwork. */
  .event-card__banner {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 240px;
    margin: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    align-self: stretch;
    overflow: hidden; /* clip the image to the rounded top corners */
  }
  /* Date strip (e.g. "JUN 6") runs horizontally, full width */
  .event-card__date-block {
    width: 100%;
    flex-direction: row;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: 0;
  }
  /* Content + reflection get their own padding now that the card has none */
  .event-card__content {
    padding: var(--space-5);
  }
  .event-card__completion {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--color-border-light);
    margin-top: 0;
    padding: var(--space-4) var(--space-5) var(--space-5);
  }
}


/* ---- TEAM PAGE ---- */
.team-hero {
  background: linear-gradient(135deg, var(--color-teal) 0%, #0A3030 100%);
  color: white;
  padding: var(--space-12) 0 var(--space-10);
}
.team-hero__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.team-hero__name {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: white;
  margin: var(--space-2) 0 0;
  line-height: 1.2;
}

/* Stat cards row */
.team-stats {
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.team-stat-card {
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.team-stat-card--wide {
  /* already handled by grid */
}
.team-stat-card__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.team-stat-card__value {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--color-charcoal);
  line-height: 1;
  margin-bottom: var(--space-1);
}
.team-stat-card__value--empty {
  color: var(--color-text-muted);
}
.team-stat-card__sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* Team SHI bar */
.team-shi-bar {
  display: flex;
  height: 32px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  gap: 2px;
  margin-top: var(--space-2);
}
.team-shi-bar__segment {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  transition: flex var(--transition-base);
}
.team-shi-bar__segment--healing       { background: var(--color-healing-bg); border: 1px solid var(--color-healing-border); border-radius: var(--radius-md); }
.team-shi-bar__segment--strengthening { background: var(--color-strengthening-bg); border: 1px solid var(--color-strengthening-border); border-radius: var(--radius-md); }
.team-shi-bar__segment--flourishing   { background: var(--color-flourishing-bg); border: 1px solid var(--color-flourishing-border); border-radius: var(--radius-md); }
.team-shi-bar__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 var(--space-2);
}

/* Team member table */
.team-member-table {
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.team-member-table__head {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1fr 1fr;
  padding: var(--space-3) var(--space-6);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border-light);
  gap: var(--space-4);
}
.team-member-table__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1fr 1fr;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
  gap: var(--space-4);
  align-items: center;
  transition: background var(--transition-fast);
}
.team-member-table__row:last-child { border-bottom: none; }
.team-member-table__row:hover { background: var(--color-bg-subtle); }
.team-member-table__head .team-member-table__cell {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.team-member-table__cell {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.team-member-table__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-strengthening-bg);
  color: var(--color-sage);
  font-size: var(--text-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.team-member-table__avatar--img {
  display: block;
  object-fit: cover;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-light);
}

/* Team member card (grid view, visible to all team members) */
.team-member-card {
  padding: var(--space-4);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.team-member-card:hover {
  box-shadow: var(--shadow-md);
}
.team-member-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-strengthening-bg);
  color: var(--color-sage);
  font-size: var(--text-base);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.team-member-card__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-charcoal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.team-member-card__avatar--img {
  display: block;
  object-fit: cover;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-light);
}
.team-member-card__email {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.team-member-card__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  align-items: center;
}
.team-member-card__meta-divider {
  color: var(--color-border);
}
.team-member-table__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-charcoal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-member-table__email {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .team-stats { grid-template-columns: 1fr 1fr; }
  .team-stat-card--wide { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .team-stats { grid-template-columns: 1fr; }
  .team-member-table__head { display: none; }
  .team-member-table__row { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
}


/* ---- BLOG ---- */
/* Blog listing */
.blog-hero {
  background: var(--color-bg-warm);
  border-bottom: 1px solid var(--color-border-light);
  padding: var(--space-12) 0 var(--space-10);
}
.blog-hero__title {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--color-charcoal);
  margin-bottom: var(--space-3);
}
.blog-hero__description {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: 1.65;
  max-width: 520px;
}

.blog-card {
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.blog-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.blog-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--color-bg-subtle);
}
.blog-card__body {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.blog-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.blog-card__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.blog-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-charcoal);
  line-height: 1.3;
  margin-bottom: var(--space-3);
  text-decoration: none;
  transition: color var(--transition-fast);
  flex: 1;
}
.blog-card__title:hover { color: var(--color-teal); }
.blog-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: var(--space-5);
}
.blog-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.blog-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.blog-card__author-avatar {
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
  object-fit: cover;
}
.blog-card__author-name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* Blog post */
.blog-post {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: var(--space-12) var(--space-6);
}
.blog-post__header {
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border-light);
}
.blog-post__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.blog-post__date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.blog-post__title {
  font-family: var(--font-serif);
  font-size: var(--text-5xl);
  font-weight: 700;
  color: var(--color-charcoal);
  line-height: 1.15;
  margin-bottom: var(--space-5);
}
.blog-post__subtitle {
  font-size: var(--text-xl);
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.blog-post__author-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.blog-post__author-avatar {
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--color-bg-subtle);
}
.blog-post__author-name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-charcoal);
  display: block;
}
.blog-post__author-role {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Post body typography */
.blog-post__body {
  font-size: var(--text-lg);
  line-height: 1.8;
  color: var(--color-charcoal);
}
/* No stacked gap between the header divider and the first content block
   (audio player on check-ins); stray empty paragraphs the editor leaves
   at the top contribute nothing but height */
.blog-post__body > :first-child { margin-top: 0 !important; }
.blog-post__body > p:empty { display: none; }
@media (max-width: 700px) {
  .blog-post__header {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
  }
}
.blog-post__body h2 {
  font-size: var(--text-2xl);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}
.blog-post__body h3 {
  font-size: var(--text-xl);
  margin-top: var(--space-10);
  margin-bottom: var(--space-3);
}
.blog-post__body p { margin-bottom: var(--space-6); }
.blog-post__body img {
  border-radius: var(--radius-lg);
  margin: var(--space-8) auto;
}

/* Reflection section within post */
.post-reflection {
  background: var(--color-flourishing-bg);
  border: 1px solid var(--color-flourishing-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  margin: var(--space-10) 0;
}
.post-reflection__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: var(--space-4);
  display: block;
}
.post-reflection__question {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--color-charcoal);
  line-height: 1.5;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .blog-post__title { font-size: var(--text-3xl); }
  .blog-post__body { font-size: var(--text-base); }
  .blog-post { padding: var(--space-8) var(--space-4); }
}


/* ---- PROFILE PAGE ---- */
.profile-header {
  background: white;
  border-bottom: 1px solid var(--color-border-light);
  padding: var(--space-10) 0;
  /* Match the rounded top-left corner of .portal-content so this white
     header doesn't cover it visually (where sidebar + topbar meet). */
  border-top-left-radius: var(--portal-content-radius);
  /* One consistent header height across every portal page — vertically
     centered content, taller pages can still grow past the minimum. */
  display: flex;
  align-items: center;
  min-height: 210px;
  box-sizing: border-box;
}
.profile-header > .container { width: 100%; }
/* Header action (e.g. Retake Assessment) — right-aligned on desktop,
   left-aligned under the text when the header stacks on mobile. */
.profile-header__action { margin-left: auto; flex-shrink: 0; }
@media (max-width: 640px) {
  .profile-header__action { margin-left: 0; }
}
/* Image-background header variant — a reusable standard (matches the
   course hero): set a background-image on the element and it gets a teal
   scrim + white text. Usage:
     <div class="profile-header profile-header--image"
          style="background-image:url('…');">  */
.profile-header--image {
  position: relative;
  /* Teal base under the photo — any antialiased rim at the rounded corner
     reads dark like the scrim instead of flashing white. */
  background-color: var(--color-teal);
  background-size: cover;
  background-position: center;
  border-bottom: none;
}
.profile-header--image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 45, 44, 0.62) 0%, rgba(17, 45, 44, 0.82) 100%);
  border-top-left-radius: inherit;
  pointer-events: none;
}
.profile-header--image .container { position: relative; z-index: 1; }
.profile-header--image .profile-header__name { color: #ffffff; }
.profile-header--image .profile-header__email { color: rgba(255, 255, 255, 0.85); }
/* Lift any secondary header text onto the scrim (inline muted colors
   from older headers included) */
.profile-header--image .profile-header__inner p { color: rgba(255, 255, 255, 0.82) !important; }
/* Primary buttons flip to white on the dark image so they stand out */
.profile-header--image .btn--primary {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--color-teal);
}
.profile-header--image .btn--primary:hover {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.88);
  color: var(--color-teal);
}
.profile-header__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}
.profile-avatar-block {
  flex-shrink: 0;
}
.profile-avatar {
  width: 96px; height: 96px;
  border-radius: var(--radius-full);
  background: var(--color-sage);
  color: white;
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-avatar img {
  width: 96px; height: 96px;
  border-radius: var(--radius-full);
  object-fit: cover;
}
.profile-header__name {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-charcoal);
  margin-bottom: var(--space-1);
}
.profile-header__email {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.profile-header__badges {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
/* Logo-led membership card — logo occupies the left quarter, content on the right. */
.membership-card {
  position: relative;
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin-bottom: var(--space-6);
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--space-8);
  align-items: center;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.membership-card__status {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
}
.membership-card__logo {
  margin: 0;
}
.membership-card__logo img {
  display: block;
  width: 100%;
  max-width: 160px;
  height: auto;
}
.membership-card__content {
  min-width: 0;
}
.membership-card__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-4) var(--space-6);
  text-align: left;
  margin-top: var(--space-10);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
}
.membership-card__detail-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.membership-card__detail-value {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-charcoal);
}
.membership-card__footer {
  text-align: left;
}

/* Upgrade variant — shown to contacts whose soul_care_rhythms_status is not
   Active. Same shell, but copper accent + pitch copy instead of member details. */

/* Non-active home — simple stack of Soul Health + Featured Resources. */
.non-member-home {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--space-8) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.non-member-home__card {
  margin: 0;
  max-width: none;
}
/* Accent strips retired on the non-member home (Daniel, Sep 2026):
   cards lead with content, no colored top borders. */
.non-member-home .membership-card--upgrade { border-top: 1px solid var(--color-border-light); }
/* Two-column top row: Soul Health card + Rhythms upgrade card side by side. */
.non-member-home__top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
}
.non-member-home__top-row > * {
  height: 100%;
}
@media (max-width: 800px) {
  .non-member-home__top-row {
    grid-template-columns: 1fr;
  }
}
.non-member-home__section-header {
  margin-bottom: var(--space-5);
}
.non-member-home__section-title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-1);
}
.non-member-home__section-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ====================================================
   Assessment status stepper — Team Assessment page header
   ==================================================== */
.assessment-status {
  margin: var(--space-6) 0 var(--space-10);
}
.assessment-status__steps {
  display: grid;
  /* One equal column per step, however many stages the pipeline has */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}
.assessment-status__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: var(--space-6);
}
/* Connecting line between steps (skip the first step's left half) */
.assessment-status__step::before,
.assessment-status__step::after {
  content: '';
  position: absolute;
  top: calc(var(--space-6) + 14px);
  height: 2px;
  background: var(--color-border-light);
  z-index: 0;
}
.assessment-status__step::before {
  left: 0;
  right: 50%;
}
.assessment-status__step::after {
  left: 50%;
  right: 0;
}
.assessment-status__step:first-child::before { display: none; }
.assessment-status__step:last-child::after  { display: none; }

/* Step marker dot */
.assessment-status__step-marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--color-border-light);
  color: white;
  margin-bottom: var(--space-3);
  counter-increment: step;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

.assessment-status__step-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  line-height: 1.3;
  max-width: 140px;
}

/* Completed steps — sage fill + check */
.assessment-status__step.is-complete .assessment-status__step-marker {
  background: var(--color-sage);
  border-color: var(--color-sage);
}
.assessment-status__step.is-complete::before,
.assessment-status__step.is-complete::after {
  background: var(--color-sage);
}
/* The completed step "completes" the line entering it (::before). The line
   leaving it (::after) is only sage if the NEXT step is also reached. */
.assessment-status__step.is-current::before {
  background: var(--color-sage);
}
.assessment-status__step.is-complete + .assessment-status__step.is-current::before {
  background: var(--color-sage);
}

/* Current step — charcoal solid with a check (the stage IS reached) and
   a soft halo ring marking "you are here" */
.assessment-status__step.is-current .assessment-status__step-marker {
  background: var(--color-charcoal);
  border-color: var(--color-charcoal);
  color: #ffffff;
  box-shadow: 0 0 0 5px rgba(65, 73, 69, 0.18);
}
.assessment-status__step.is-current .assessment-status__step-label {
  color: var(--color-charcoal);
  font-weight: 700;
}

/* Upcoming steps — keep default muted treatment */
.assessment-status__step.is-upcoming .assessment-status__step-marker {
  background: white;
}

@media (max-width: 700px) {
  /* Vertical timeline: dots on a continuous left rail, labels beside them.
     Completed steps color their rail segment sage (same rules as desktop). */
  .assessment-status__steps {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .assessment-status__step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    padding: 0 0 var(--space-5);
    gap: var(--space-4);
  }
  .assessment-status__step:last-child { padding-bottom: 0; }
  .assessment-status__step::before { display: none; }
  .assessment-status__step::after {
    left: 14px;
    right: auto;
    top: 34px;
    bottom: 4px;
    width: 2px;
    height: auto;
  }
  .assessment-status__step:last-child::after { display: none; }
  .assessment-status__step-marker { margin-bottom: 0; flex-shrink: 0; }
  .assessment-status__step-label { max-width: none; padding-top: 7px; }
  /* Two-line desktop labels fit on one line here */
  .assessment-status__step-label br { display: none; }
}

/* ====================================================
   Team Assessment feature card — surfaces the team-assessment
   dashboard on the home page for the approved point person.
   ==================================================== */
.ta-feature-card {
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
  margin-bottom: var(--space-5);
}
.ta-feature-card__top { margin-bottom: var(--space-6); }
.ta-feature-card__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-sage);
  margin-bottom: var(--space-2);
}
.ta-feature-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-2);
  line-height: 1.25;
}
.ta-feature-card__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
  max-width: 560px;
}
.ta-feature-card__stats {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-light);
  flex-wrap: wrap;
  margin-top: auto; /* anchor to the card bottom when paired cards stretch */
}
.ta-feature-card__stat { min-width: 120px; }
.ta-feature-card__stat-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.ta-feature-card__stat-value {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-charcoal);
  line-height: 1.1;
}
.ta-feature-card__cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: 700;
  color: white;
  background: var(--color-teal);
  padding: 10px var(--space-5);
  border: 2px solid var(--color-teal);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}
.ta-feature-card__cta:hover {
  background: var(--color-cta-hover);
  border-color: var(--color-cta-hover);
  color: white;
}
@media (max-width: 640px) {
  .ta-feature-card__stats { gap: var(--space-5); }
  .ta-feature-card__cta { margin-left: 0; width: 100%; justify-content: center; }
}
/* Same adjustments driven by the card's own width, so a paired card on
   a wide screen behaves like a card on a small screen: stats side by
   side, CTA full-width below them instead of floating alone. */
@container (max-width: 620px) {
  .ta-feature-card__stats { gap: var(--space-5); }
  .ta-feature-card__cta { margin-left: 0; width: 100%; justify-content: center; }
}

/* Side-by-side row for paired feature cards (Team Assessment + course).
   auto-fit lets the pair collapse to one column as soon as two cards
   no longer fit — driven by available width, not viewport width. */
.feature-card-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

/* Course variant of the feature card — video thumbnail with a play
   button beside the title, so it reads as a video course at a glance. */
.ta-feature-card__media-row {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}
.ta-feature-card__media-row .ta-feature-card__top { flex: 1; min-width: 0; }
/* When the card itself is narrow (paired on a mid-size screen, or a
   phone), move the thumbnail below the text at full width so the title
   and description top-align with the neighboring card. */
@container (max-width: 620px) {
  .ta-feature-card__media-row { flex-direction: column; }
  /* Keep the compact 168px thumbnail; just clear the stats divider */
  .ta-feature-card__media-row .course-card-thumb {
    margin-bottom: var(--space-5);
  }
}
.course-card-thumb {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 168px;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.course-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.course-card-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(17, 45, 44, 0.28);
  transition: background-color var(--transition-base);
}
.course-card-thumb:hover::after { background: rgba(17, 45, 44, 0.14); }
.course-card-thumb__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  box-shadow: 0 2px 10px rgba(17, 45, 44, 0.35);
  transition: transform var(--transition-base);
}
.course-card-thumb:hover .course-card-thumb__play { transform: scale(1.08); }
.course-card-thumb__play svg {
  display: block;
  margin-left: 3px; /* optically center the triangle */
}
/* Fallback for browsers without container-query support */
@supports not (container-type: inline-size) {
  @media (max-width: 720px) {
    .ta-feature-card__media-row { flex-direction: column; }
    .ta-feature-card__media-row .course-card-thumb {
      margin-bottom: var(--space-5);
    }
  }
}

/* Top row on the Team Assessment page — progress stat on the left,
   share-with-team card on the right. Same grid + height: 100% pattern
   used on the home page top row, which reliably equalizes heights. */
.team-assessment-row {
  display: grid;
  /* Normal state: progress ~1/3, share card ~2/3 */
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: var(--space-6);
  align-items: stretch;
  margin-bottom: var(--space-10);
  /* Size container so the cards inside adapt to REAL available width
     (which depends on the sidebar), not the viewport. */
  container-type: inline-size;
}
/* Report-ready state: final-participation stat at a quarter width,
   report card takes the rest */
.team-assessment-row--report {
  grid-template-columns: 1fr 3fr;
}
/* Report card: side-by-side only when the big cover + text both fit;
   otherwise cover on top, text below. Queries the row's width. */
@container (max-width: 1040px) {
  .team-assessment-row .team-share-card--report { grid-template-columns: 1fr; }
  .team-assessment-row .team-share-card--report .team-share-card__qr--report {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }
}
/* Single-column variant — used for Under 25 where there's no Team Progress
   stat and the share card takes the full width. */
.team-assessment-row--single { grid-template-columns: 1fr; }
.team-assessment-row > * {
  margin-bottom: 0;
  height: 100%;
}
@media (max-width: 900px) {
  .team-assessment-row { grid-template-columns: 1fr; }
}

/* Team Progress stat — submissions count on the Team Assessment page. */
.team-progress-stat {
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-2);
}
.team-progress-stat__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.team-progress-stat__number {
  font-family: var(--font-serif);
  font-size: var(--text-5xl);
  font-weight: 700;
  color: var(--color-charcoal);
  line-height: 1;
}
.team-progress-stat__label {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* ====================================================
   Team Share card — landing page link + QR code download
   Lives on the Team Assessment page for the approved point person.
   ==================================================== */
.team-share-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-8);
  align-items: center;
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8);
  margin-bottom: var(--space-10);
}
.team-share-card__qr {
  width: 200px;
  height: 200px;
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Report variant — the PDF cover gets a bigger, natural-ratio box */
.team-share-card__qr--report {
  width: 460px;
  max-width: 100%;
  height: auto;
}
.team-share-card__qr--report img {
  width: 100%;
  height: auto;
}
.team-share-card__qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.team-share-card__body { min-width: 0; }
.team-share-card__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.team-share-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-3);
  line-height: 1.25;
}
.team-share-card__copy {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0 0 var(--space-5);
  max-width: 520px;
}
.team-share-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
@media (max-width: 700px) {
  .team-share-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--space-6);
  }
  .team-share-card__qr { margin: 0 auto; }
  .team-share-card__copy { margin-left: auto; margin-right: auto; }
  .team-share-card__actions { justify-content: center; }
}

/* ====================================================
   Locked section overlay — premium-content teaser
   Used on the Soul Health page to gate Five Dimensions and Words You
   Carried behind a Rhythms membership CTA.
   ==================================================== */
.locked-section-wrap {
  position: relative;
}
.locked-section-wrap.is-locked .locked-section-wrap__content {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
  opacity: 0.85;
}
.locked-section-wrap__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  z-index: 2;
}
.locked-section-wrap__overlay-card {
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  padding: var(--space-8);
  text-align: center;
  max-width: 440px;
}
.locked-section-wrap__lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-bg-warm);
  color: var(--color-copper);
  margin: 0 auto var(--space-4);
}
.locked-section-wrap__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-2);
  line-height: 1.3;
}
.locked-section-wrap__copy {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-5);
}

/* ====================================================
   Soul Care Journal app feature — custom non-member module
   ==================================================== */
.app-feature {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: var(--space-10);
  align-items: center;
  background: var(--color-charcoal);
  color: white;
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  overflow: hidden;
  position: relative;
}
.app-feature__media {
  display: flex;
  justify-content: center;
  align-items: center;
}
.app-feature__preview {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.4));
}
.app-feature__content {
  min-width: 0;
}
.app-feature__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-copper);
  margin-bottom: var(--space-3);
}
.app-feature__title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: white;
  margin: 0 0 var(--space-3);
  line-height: 1.2;
}
.app-feature__copy {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.65;
  margin: 0 0 var(--space-6);
  max-width: 480px;
}
.app-feature__cta {
  background: white;
  color: var(--color-charcoal);
  border-color: white;
}
.app-feature__cta:hover {
  background: var(--color-cream);
  border-color: var(--color-cream);
  color: var(--color-charcoal);
}
@media (max-width: 700px) {
  .app-feature {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding: var(--space-8);
    text-align: center;
  }
  .app-feature__copy { margin-left: auto; margin-right: auto; }
}
.membership-card__pitch {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
}
.membership-card__pitch-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-2);
  line-height: 1.3;
}
.membership-card__pitch-copy {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 560px) {
  /* Stack vertically on narrow screens so the content has room to breathe. */
  .membership-card {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .membership-card__logo img { max-width: 110px; }
}

.profile-header__bio {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-top: var(--space-4);
  margin-bottom: 0;
  max-width: 560px;
}
.profile-header__location {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
}
.profile-header__join-date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

@media (max-width: 600px) {
  .profile-header__inner { flex-direction: column; gap: var(--space-4); }
  .profile-header__name { font-size: var(--text-2xl); }
}

/* Score history chart (full) */
.score-history-full {
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}
.score-history-full canvas {
  width: 100% !important;
  height: 200px !important;
}


/* ---- LOGIN PAGE ---- */
/* ---- REGISTRATION PAGE ----
   Two-panel welcome for invited contacts (incl. members moving over
   from Mighty Networks): brand/value panel on the left, the account
   set-up card on the right. Stacks on small screens with the form
   directly under a compact hero. */
.register-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.register-hero {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--space-12) var(--space-10);
  background:
    linear-gradient(180deg, rgba(17, 45, 44, 0.68) 0%, rgba(17, 45, 44, 0.84) 100%),
    url('https://soulcare.com/hubfs/Soul-Drives-Everything.jpeg') center / cover no-repeat;
  color: white;
}
.register-hero__content {
  max-width: 480px;
  margin: 0 auto;
}
.register-hero__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--space-3);
}
.register-hero__title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: white;
  line-height: 1.25;
  margin: 0 0 var(--space-4);
}
.register-hero__copy {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.7;
  margin: 0 0 var(--space-6);
}
.register-hero__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.register-hero__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.5;
}
.register-hero__list svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-light-sage);
}
.register-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-page);
  padding: var(--space-8);
}
@media (max-width: 860px) {
  .register-page { grid-template-columns: 1fr; }
  .register-hero { padding: var(--space-10) var(--space-6); }
  .register-hero__title { font-size: var(--text-2xl); }
  .register-form-panel { padding: var(--space-6); }
}

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-page);
  padding: var(--space-8);
}
.login-card {
  background: white;
  border-radius: var(--radius-2xl);
  padding: var(--space-12) var(--space-10);
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-xl);
  text-align: center;
}
.login-card__logo {
  height: 48px;
  margin: 0 auto var(--space-6);
}
.login-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  color: var(--color-charcoal);
  margin-bottom: var(--space-2);
}
.login-card__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-8);
}
.login-card__form { text-align: left; }
.login-card__footer {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ---- Style HubSpot's raw membership form HTML inside the login card.
   These override HubSpot's bright-blue defaults so the registration /
   password reset / login forms match Soul Care branding. */

/* Labels (Email, Password, etc.) */
.login-card__form label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-charcoal);
  margin-top: var(--space-4);
  margin-bottom: var(--space-1);
  line-height: 1.4;
}
.login-card__form label:first-of-type { margin-top: 0; }

/* Input fields — force box-sizing so width:100% doesn't overflow the card */
.login-card__form input[type="email"],
.login-card__form input[type="password"],
.login-card__form input[type="text"],
.login-card__form input.hs-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-charcoal);
  background: white;
  transition: border-color var(--transition-fast);
}
.login-card__form input:focus {
  outline: none;
  border-color: var(--color-sage);
  box-shadow: 0 0 0 3px rgba(122, 158, 126, 0.15);
}

/* Helper text under password field (e.g. "Password must be at least...") */
.login-card__form .hs-richtext,
.login-card__form .hs-form-field .field-description,
.login-card__form .hs_input_password ~ .hs-richtext,
.login-card__form small {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-top: var(--space-1);
  margin-bottom: 0;
  display: block;
}

/* Submit button — Soul Care charcoal, not HubSpot blue */
.login-card__form button[type="submit"],
.login-card__form input[type="submit"],
.login-card__form .hs-button {
  width: 100%;
  background: var(--color-charcoal);
  color: white;
  padding: 12px 16px;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  margin-top: var(--space-5);
  transition: background var(--transition-fast);
}
.login-card__form button[type="submit"]:hover,
.login-card__form input[type="submit"]:hover,
.login-card__form .hs-button:hover {
  background: var(--color-teal);
}

/* In-form links ("Show password", "Forgot password?", etc.) */
.login-card__form a {
  color: var(--color-sage);
  text-decoration: none;
  font-weight: 500;
}
.login-card__form a:hover { text-decoration: underline; }

/* Footer link */
.login-card__footer a {
  color: var(--color-sage);
  font-weight: 600;
  text-decoration: none;
}
.login-card__footer a:hover { text-decoration: underline; }

/* Reduce padding + tighten layout on small screens — the card was hitting
   screen edges and the form fields were appearing to overflow. */
@media (max-width: 480px) {
  .login-page { padding: var(--space-4); }
  .login-card {
    padding: var(--space-8) var(--space-5);
    border-radius: var(--radius-xl);
  }
  .login-card__logo { height: 40px; }
  .login-card__title { font-size: var(--text-xl); }
}


/* ---- 404 PAGE ---- */
.error-page {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16) var(--space-8);
}
.error-page__code {
  font-family: var(--font-serif);
  font-size: 120px;
  font-weight: 700;
  color: var(--color-light-sage);
  line-height: 1;
  margin-bottom: var(--space-4);
}
.error-page__title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  color: var(--color-charcoal);
  margin-bottom: var(--space-3);
}
.error-page__text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
  max-width: 400px;
  margin: 0 auto var(--space-8);
}

/* ── SETTINGS PAGE ───────────────────────────────────────── */
.settings-header {
  margin-bottom: var(--space-8);
}
.settings-back {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  display: inline-block;
  margin-bottom: var(--space-3);
}
.settings-back:hover { color: var(--color-charcoal); }
.settings-title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  color: var(--color-charcoal);
  margin: 0;
}
.settings-divider {
  border: none;
  border-top: 1px solid var(--color-border-light);
  margin: var(--space-10) 0;
}
.settings-section { }
.settings-section__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  color: var(--color-charcoal);
  margin: 0 0 var(--space-2);
}
.settings-section__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-6);
  line-height: 1.6;
}
.settings-section__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: block;
  margin-top: var(--space-2);
}

/* Avatar preview */
.settings-avatar-preview {
  width: 80px; height: 80px;
  border-radius: var(--radius-full);
  background-color: var(--color-sage);
  overflow: hidden;
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.settings-avatar-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.settings-avatar-initials {
  font-size: var(--text-xl);
  font-weight: 700;
  color: white;
  font-family: var(--font-serif);
}

/* Profile form */
.settings-form { }
.settings-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.settings-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
}
.settings-form__row .settings-form__field {
  margin-bottom: 0;
}
.settings-form__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-charcoal);
}
.settings-form__input {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  color: var(--color-charcoal);
  background: white;
  transition: border-color var(--transition-fast);
  width: 100%;
  box-sizing: border-box;
}
.settings-form__input:focus {
  outline: none;
  border-color: var(--color-sage);
  box-shadow: 0 0 0 3px rgba(123,150,134,0.15);
}
.settings-form__textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}
.settings-form__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.settings-form__status {
  font-size: var(--text-sm);
  font-weight: 500;
}

/* Profile page avatar image support */
.profile-avatar__img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius-full);
  display: block;
}
.profile-avatar__initials {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: white;
}

@media (max-width: 640px) {
  .settings-form__row { grid-template-columns: 1fr; }
}

/* ── AVATAR CLICK / UPLOAD MODAL ─────────────────────────── */
.profile-avatar {
  position: relative;
  cursor: pointer;
  border: none;
  padding: 0;
  background: none;
  border-radius: var(--radius-full);
  overflow: hidden;
}
.profile-avatar__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.profile-avatar:hover .profile-avatar__overlay,
.profile-avatar:focus-visible .profile-avatar__overlay {
  opacity: 1;
}


/* Modal backdrop + panel */
.avatar-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.avatar-modal[hidden] { display: none; }
.avatar-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}
.avatar-modal__panel {
  position: relative;
  background: white;
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 440px;
  padding: var(--space-8);
  box-shadow: 0 24px 48px rgba(0,0,0,0.18);
}
.avatar-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}
.avatar-modal__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  color: var(--color-charcoal);
  margin: 0;
}
.avatar-modal__close {
  background: none;
  border: none;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  line-height: 1;
}
.avatar-modal__close:hover { color: var(--color-charcoal); }

/* ── VIDEO MODAL (welcome video etc) ──────────────────────── */
.video-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  align-items: center;
  justify-content: center;
}
.video-modal.is-open {
  display: flex;
  animation: video-modal-fade 180ms ease-out;
}
@keyframes video-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 22, 22, 0.85);
}
.video-modal__panel {
  position: relative;
  width: min(92vw, 960px);
  max-height: 92vh;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,0.4);
}
.video-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: white;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease;
}
.video-modal__close:hover {
  background: rgba(0,0,0,0.85);
}
.video-modal__video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.video-modal__video-wrap video {
  width: 100%;
  height: 100%;
  display: block;
}

/* Fix HubSpot caption positioning. HubSpot encodes cue positions against the
   source video resolution; the browser doesn't always scale those coordinates
   correctly when the video is displayed smaller, so the text drifts off-screen.
   Force the caption container to stay centered and within the visible video. */
.video-modal__video-wrap video::cue {
  background-color: rgba(0, 0, 0, 0.78);
  color: white;
  font-size: 1em;
  line-height: 1.4;
  white-space: normal;
}
.video-modal__video-wrap video::-webkit-media-text-track-container {
  position: absolute !important;
  inset: auto 5% 8% 5% !important;
  width: auto !important;
  max-width: 90% !important;
  text-align: center !important;
}
.video-modal__video-wrap video::-webkit-media-text-track-display {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  white-space: normal !important;
  word-wrap: break-word !important;
}

/* ── ONBOARDING BANNER ────────────────────────────────────── */
.onboarding-block__banner {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-8);
  background: var(--color-teal);
  border-radius: var(--radius-xl);
}
.onboarding-block__banner.is-open {
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.onboarding-block__banner-logo {
  flex-shrink: 0;
  align-self: center;
  display: flex;
  align-items: center;
}
.onboarding-block__banner-logo img {
  width: 120px;
  height: auto;
  display: block;
  /* Source logo is dark green — invert to white for contrast on the dark teal banner */
  filter: brightness(0) invert(1);
}
@media (max-width: 640px) {
  .onboarding-block__banner-logo { display: none; }
  /* Stack the banner on phones: copy runs full width, Start sits below it
     as a full-width button. */
  .onboarding-block__banner { flex-direction: column; gap: var(--space-4); }
  .onboarding-block__banner-right { width: 100%; padding-top: 0; }
  .onboarding-block__toggle { width: 100%; justify-content: center; }
}
.onboarding-block__banner-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}
.onboarding-block__banner-title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: white;
}
.onboarding-block__banner-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-top: var(--space-1);
}
.onboarding-block__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: white;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast);
  white-space: nowrap;
}
.onboarding-block__toggle:hover {
  background: rgba(255,255,255,0.25);
}
.onboarding-block__banner-chevron {
  color: rgba(255,255,255,0.7);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.onboarding-block__banner.is-open .onboarding-block__banner-chevron {
  transform: rotate(180deg);
}

/* Expanded body */
.onboarding-block__body {
  background: white;
  border: 1px solid var(--color-border-light);
  border-top: none;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  padding: var(--space-6) var(--space-8) var(--space-8);
}
.onboarding-block__body[hidden] { display: none; }


/* ====================================================
   ASSESSMENT SUBMISSION — Typeform→HubSpot latency bridge
   ==================================================== */

/* Full-screen overlay shown immediately on Typeform submit. */
.sc-processing-overlay {
  position: fixed;
  inset: 0;
  background: rgba(245, 242, 235, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.sc-processing-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.sc-processing-overlay__card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8);
  max-width: 480px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.sc-processing-overlay__pulse,
.sc-assessment-processing__pulse {
  border-radius: 50%;
  background: var(--color-sage);
  margin: 0 auto var(--space-5);
  opacity: 0.9;
  animation: scAssessmentPulse 1.8s ease-in-out infinite;
}
.sc-processing-overlay__pulse { width: 56px; height: 56px; }
.sc-assessment-processing__pulse {
  width: 32px;
  height: 32px;
  margin-bottom: var(--space-4);
}
@keyframes scAssessmentPulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.18); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-processing-overlay__pulse,
  .sc-assessment-processing__pulse { animation: none; }
}
.sc-processing-overlay__title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-3);
}
.sc-processing-overlay__copy {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Inline card shown on the locked page when the member recently submitted
   but the score has not yet synced from Typeform → HubSpot. */
.sc-assessment-processing {
  text-align: center;
  padding: var(--space-6);
  background: var(--color-bg-warm);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  max-width: 480px;
  margin: var(--space-4) auto 0;
}
.sc-assessment-processing__title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-2);
}
.sc-assessment-processing__copy {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-4);
}


/* ====================================================
   Beta Feedback page
   ==================================================== */
.feedback-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-8) 0 var(--space-12);
}
.feedback-form {
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8);
}
.feedback-form__field { margin-bottom: var(--space-5); }
.feedback-form__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-charcoal);
  margin-bottom: var(--space-2);
}
.feedback-form__input {
  width: 100%;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-charcoal);
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  line-height: 1.5;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.feedback-form__input:focus {
  outline: none;
  border-color: var(--color-sage);
  box-shadow: 0 0 0 3px rgba(123, 150, 134, 0.18);
}
.feedback-form__textarea {
  resize: vertical;
  min-height: 140px;
}
.feedback-form__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23414945' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 12px 8px;
  padding-right: var(--space-10);
}
.feedback-form__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: var(--space-2) 0 0;
  line-height: 1.5;
}
.feedback-form__actions { margin-top: var(--space-6); }

/* Success state after submit */
.feedback-success {
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-10) var(--space-8);
  text-align: center;
}
.feedback-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-bg-warm);
  color: var(--color-sage);
  margin: 0 auto var(--space-4);
}
.feedback-success__title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-3);
}
.feedback-success__copy {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0 0 var(--space-5);
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

.feedback-footnote {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin: var(--space-6) 0 0;
}
.feedback-footnote a {
  color: var(--color-charcoal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ====================================================
   Reflection prompts card — Under 25 team-assessment variant
   ==================================================== */
.reflection-prompts {
  background: var(--color-bg-warm);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin-bottom: var(--space-10);
}
.reflection-prompts__header { margin-bottom: var(--space-6); }
.reflection-prompts__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.reflection-prompts__title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-3);
  line-height: 1.25;
}
.reflection-prompts__copy {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0;
  max-width: 600px;
}
.reflection-prompts__list {
  list-style: none;
  counter-reset: prompt;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.reflection-prompts__list li {
  counter-increment: prompt;
  position: relative;
  padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 32px + var(--space-4));
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-charcoal);
}
.reflection-prompts__list li::before {
  content: counter(prompt);
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-sage);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: 700;
}

/* Style overrides for the HubSpot-embedded Beta Feedback form so it
   matches the rest of the portal. Targets HubSpot's default form-element
   classes inside our card wrapper. */
.feedback-form--embed .hs-form-frame { all: revert; }
.feedback-form--embed .hs-form-field { margin-bottom: var(--space-5); }
.feedback-form--embed .hs-form-field > label,
.feedback-form--embed label.hs-main-font-element,
.feedback-form--embed label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-charcoal);
  margin-bottom: var(--space-2);
}
.feedback-form--embed input.hs-input,
.feedback-form--embed textarea.hs-input,
.feedback-form--embed select.hs-input,
.feedback-form--embed .hs-form-frame input[type="text"],
.feedback-form--embed .hs-form-frame input[type="email"],
.feedback-form--embed .hs-form-frame textarea,
.feedback-form--embed .hs-form-frame select {
  width: 100% !important;
  font-family: inherit !important;
  font-size: var(--text-base) !important;
  color: var(--color-charcoal) !important;
  background: white !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-3) var(--space-4) !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  transition: border-color var(--transition-base), box-shadow var(--transition-base) !important;
}
.feedback-form--embed input.hs-input:focus,
.feedback-form--embed textarea.hs-input:focus,
.feedback-form--embed select.hs-input:focus,
.feedback-form--embed .hs-form-frame input:focus,
.feedback-form--embed .hs-form-frame textarea:focus,
.feedback-form--embed .hs-form-frame select:focus {
  outline: none !important;
  border-color: var(--color-sage) !important;
  box-shadow: 0 0 0 3px rgba(123, 150, 134, 0.18) !important;
}
.feedback-form--embed textarea.hs-input,
.feedback-form--embed .hs-form-frame textarea {
  min-height: 140px !important;
  resize: vertical !important;
}
.feedback-form--embed input[type="file"].hs-input,
.feedback-form--embed .hs-form-frame input[type="file"] {
  padding: var(--space-3) !important;
  background: var(--color-bg-subtle) !important;
  border-style: dashed !important;
  cursor: pointer;
}
/* Submit button — match our primary button style */
.feedback-form--embed .hs-button,
.feedback-form--embed input[type="submit"].hs-button,
.feedback-form--embed button[type="submit"],
.feedback-form--embed input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-serif) !important;
  font-size: var(--text-base) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 14px var(--space-8) !important;
  background-color: var(--color-teal) !important;
  border: 2px solid var(--color-teal) !important;
  color: white !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  letter-spacing: 0.01em !important;
  transition: all var(--transition-base) !important;
  width: auto !important;
}
.feedback-form--embed .hs-button:hover,
.feedback-form--embed input[type="submit"]:hover,
.feedback-form--embed button[type="submit"]:hover {
  background-color: #0e3f3e !important;
  border-color: #0e3f3e !important;
}
.feedback-form--embed .hs-submit,
.feedback-form--embed .actions { margin-top: var(--space-6); }
/* Error / required state */
.feedback-form--embed .hs-error-msgs,
.feedback-form--embed .hs-error-msg {
  font-size: var(--text-xs);
  color: var(--color-copper);
  margin-top: var(--space-2);
  list-style: none;
  padding: 0;
}
.feedback-form--embed .hs-form-required { color: var(--color-copper); }

/* ====================================================
   Global "Contact Our Team" modal — opened by any element with
   data-action="open-contact-team"; falls back to mailto when the
   form GUID is unconfigured.
   ==================================================== */
.sc-contact-modal { position: fixed; inset: 0; z-index: 1100; display: none; }
.sc-contact-modal.is-open { display: block; }
.sc-contact-modal__backdrop { position: absolute; inset: 0; background: rgba(17, 45, 44, 0.55); }
.sc-contact-modal__panel {
  position: relative;
  max-width: 480px;
  margin: 12vh auto 0;
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-8);
  animation: scContactIn 180ms ease;
}
@media (max-width: 540px) {
  .sc-contact-modal__panel { margin: 8vh var(--space-4) 0; }
}
@keyframes scContactIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sc-contact-modal__close {
  position: absolute; top: var(--space-4); right: var(--space-4);
  width: 32px; height: 32px; border: none; background: none; cursor: pointer;
  color: var(--color-text-muted); font-size: 22px; line-height: 1;
}
.sc-contact-modal__close:hover { color: var(--color-charcoal); }
.sc-contact-modal__eyebrow {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-copper); margin-bottom: var(--space-2);
}
.sc-contact-modal__title {
  font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: 700;
  color: var(--color-charcoal); line-height: 1.2; margin: 0 0 var(--space-3);
}
.sc-contact-modal__copy {
  font-size: var(--text-sm); color: var(--color-text-secondary);
  line-height: 1.6; margin: 0 0 var(--space-5);
}
.sc-contact-modal__field label {
  display: block; font-size: var(--text-sm); font-weight: 600;
  color: var(--color-charcoal); margin-bottom: var(--space-2);
}
.sc-contact-modal__field textarea {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: inherit; font-size: var(--text-sm);
  resize: vertical; min-height: 110px;
}
.sc-contact-modal__field textarea:focus {
  outline: none; border-color: var(--color-sage);
  box-shadow: 0 0 0 3px rgba(122, 158, 126, 0.15);
}
.sc-contact-modal__actions {
  display: flex; gap: var(--space-3); justify-content: flex-end;
  margin-top: var(--space-5); flex-wrap: wrap;
}
.sc-contact-modal__note { font-size: var(--text-xs); color: var(--color-text-muted); margin: var(--space-3) 0 0; }
.sc-contact-modal__success-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--color-strengthening-bg); color: var(--color-sage);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-5);
}


/* ====================================================
   Overview page — "Your Active Services" leader cards
   ==================================================== */
.ovw-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
  align-items: stretch;
}
.ovw-card {
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ovw-card__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-copper);
  margin-bottom: var(--space-2);
}
.ovw-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-3);
}
.ovw-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-5);
}
.ovw-card .btn { margin-top: auto; }

/* ── Compact team events strip (Overview page) ─────────────── */
.mini-events {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.mini-event {
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.mini-event:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.mini-event__date {
  flex-shrink: 0;
  width: 54px;
  padding: var(--space-2) 0;
  border-radius: var(--radius-md);
  background: var(--color-cream);
  border: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mini-event__month {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-sage);
}
.mini-event__day {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-text-primary);
}
.mini-event__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}
.mini-event__title {
  font-size: var(--text-base);
  line-height: 1.35;
  margin: 0 0 var(--space-1);
}
.mini-event__time {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
@media (max-width: 900px) {
  .mini-events { grid-template-columns: 1fr; }
}

/* ── Resource Library grouped filters (By Topic / By Type) ─────── */
.filter-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: white;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-charcoal);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.filter-group-toggle:hover { border-color: var(--color-sage); }
.filter-group-toggle.is-open {
  background: var(--color-teal);
  border-color: var(--color-teal);
  color: white;
}
.filter-group-toggle__chevron { transition: transform 0.18s ease; }
.filter-group-toggle.is-open .filter-group-toggle__chevron { transform: rotate(180deg); }
.filter-group {
  display: none;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  /* space-5 above (off the filter bar), space-8 below (off the grid) */
  margin: var(--space-5) 0 var(--space-8);
}
.filter-group.is-open { display: flex; }
/* Two open rows: pull the second up so the pair reads as one block
   (adjacent margins sum: 32px bottom + -20px top = 12px between rows) */
.filter-group.is-open + .filter-group.is-open { margin-top: calc(-1 * var(--space-5)); }

/* ── Topbar help "?" button — opens the Contact Our Team modal ── */
.portal-topbar__help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.portal-topbar__help:hover {
  background: rgba(255, 255, 255, 0.12);
  color: white;
}

/* ── Demo mode pill (admins only, topbar) ── */
.portal-topbar__demo-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3b2f1e;
  background: #E8C4A0;
  border: 1px solid #C67A45;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  line-height: 1;
}


/* ── Demo mode switch (admins, topbar) ── */
.portal-topbar__demo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--radius-full);
}
.portal-topbar__demo-toggle:hover { background: rgba(255, 255, 255, 0.08); }
.portal-topbar__demo-toggle-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.portal-topbar__demo-toggle.is-on .portal-topbar__demo-toggle-label { color: #E8C4A0; }
.portal-topbar__demo-toggle-track {
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  position: relative;
  transition: background 0.15s ease;
}
.portal-topbar__demo-toggle.is-on .portal-topbar__demo-toggle-track { background: #C67A45; }
.portal-topbar__demo-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  transition: left 0.15s ease;
}
.portal-topbar__demo-toggle.is-on .portal-topbar__demo-toggle-knob { left: 18px; }

/* ====================================================
   Add to Home Screen — drawer button + iOS helper sheet.
   The button is a <button> reusing the profile-link look.
   ==================================================== */
button.portal-drawer__profile-link {
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  /* flex keeps the icon inline despite main.css's global svg{display:block} */
  display: flex;
  align-items: center;
}
.a2hs-sheet {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
}
.a2hs-sheet.is-open { display: block; }
.a2hs-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(33, 38, 36, 0.55);
}
.a2hs-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-8) var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  box-shadow: var(--shadow-xl);
}
.a2hs-sheet__icon {
  border-radius: 12px;
  /* main.css makes img display:block, so center it explicitly */
  margin: 0 auto var(--space-4);
}
.a2hs-sheet__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  color: var(--color-charcoal);
  margin: 0 0 var(--space-5);
}
.a2hs-sheet__steps {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
}
.a2hs-sheet__steps li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-bg-warm);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.a2hs-sheet__step-icon {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--color-charcoal);
}
.a2hs-sheet__note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}

/* One-time Add to Home Screen banner — mobile only, shown by portal.js */
.a2hs-banner {
  display: none;
  align-items: stretch;
  background: var(--color-charcoal);
  border-radius: var(--radius-md);
  margin: var(--space-4) var(--space-4) var(--space-5);
  color: white;
  overflow: hidden;
}
@media (max-width: 768px) {
  .a2hs-banner:not([hidden]) { display: flex; }
}
.a2hs-banner__body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: none;
  border: 0;
  padding: var(--space-3) var(--space-4);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.a2hs-banner__icon {
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
}
.a2hs-banner__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.a2hs-banner__text strong {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
}
.a2hs-banner__text span {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.7);
}
.a2hs-banner__chevron { flex-shrink: 0; opacity: 0.6; }
.a2hs-banner__close {
  flex-shrink: 0;
  background: none;
  border: 0;
  border-left: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.65);
  padding: 0 var(--space-4);
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* Desktop-only topbar controls; keep the mobile topbar clean. Help lives
   behind Contact Our Team links on the pages themselves. */
@media (max-width: 768px) {
  .portal-topbar__demo-toggle { display: none; }
  .portal-topbar__help { display: none; }
}

/* Coming-soon note that replaces Typeform assessment buttons for teams
   waiting on the Assessment 2.0 beta (portal.js initAssessmentComingSoon) */
.sc-assessment-soon {
  display: inline-block;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  background: var(--color-sage-light, rgba(122, 148, 132, 0.14));
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
  text-wrap: pretty;
}


/* ── Tier frames ───────────────────────────────────────────────────
   The topbar, sidebar and phone drawer take the member's tier color:
   Free = light sage with charcoal text, Core = sage with white text,
   Guided = the original charcoal. Only colors change. */
.portal-body--free {
  --free-frame:        var(--color-light-sage);
  --free-ink:          var(--color-charcoal);
  --free-ink-soft:     rgba(65, 73, 69, 0.78);
  --free-ink-faint:    rgba(65, 73, 69, 0.5);
  --free-hover:        rgba(65, 73, 69, 0.07);
  --free-active:       rgba(255, 255, 255, 0.6);
  --free-rule:         rgba(65, 73, 69, 0.14);
}
.portal-body--free,
.portal-body--free .portal-shell,
.portal-body--free .portal-topbar,
.portal-body--free .portal-sidebar,
.portal-body--free .portal-drawer__panel {
  background: var(--free-frame);
  color: var(--free-ink);
}
/* White wordmark → charcoal */
.portal-body--free .portal-topbar__brand img,
.portal-body--free .portal-drawer__header img {
  filter: brightness(0.27);
}
.portal-body--free .portal-topbar__hamburger,
.portal-body--free .portal-topbar__profile-trigger,
.portal-body--free .portal-topbar__name,
.portal-body--free .portal-topbar__help,
.portal-body--free .portal-drawer__close,
.portal-body--free .portal-drawer__name { color: var(--free-ink); }
.portal-body--free .portal-topbar__chevron,
.portal-body--free .portal-drawer__email { color: var(--free-ink-faint); }
.portal-body--free .portal-topbar__beta {
  color: var(--free-ink);
  background: rgba(255, 255, 255, 0.45);
  border-color: rgba(123, 150, 134, 0.6);
}

/* Sidebar + drawer links */
.portal-body--free .portal-sidebar__link,
.portal-body--free .portal-sidebar__sublink,
.portal-body--free .portal-drawer__link,
.portal-body--free .portal-drawer__sublink,
.portal-body--free .portal-drawer__profile-link { color: var(--free-ink-soft); }
.portal-body--free .portal-sidebar__link:hover,
.portal-body--free button.portal-sidebar__group-toggle:hover,
.portal-body--free .portal-sidebar__sublink:hover,
.portal-body--free .portal-drawer__link:hover,
.portal-body--free .portal-drawer__sublink:hover,
.portal-body--free .portal-drawer__profile-link:hover,
.portal-body--free .portal-topbar__hamburger:hover,
.portal-body--free .portal-topbar__profile-trigger:hover,
.portal-body--free .portal-topbar__demo-toggle:hover {
  background: var(--free-hover);
  color: var(--free-ink);
}
.portal-body--free .portal-sidebar__link.is-active,
.portal-body--free .portal-sidebar__sublink.is-active,
.portal-body--free .portal-drawer__link.is-active,
.portal-body--free .portal-drawer__sublink.is-active,
.portal-body--free .portal-sidebar__group:not(.is-open) > .portal-sidebar__group-toggle.is-section-active,
.sc-sidebar-collapsed .portal-body--free .portal-sidebar__group-toggle.is-section-active {
  background: var(--free-active);
  color: var(--free-ink);
}
.portal-body--free .portal-sidebar__lock,
.portal-body--free .portal-sidebar__submenu-indicator,
.portal-body--free .portal-sidebar__collapse { color: var(--free-ink-faint); }
.portal-body--free .portal-sidebar__group-toggle:hover .portal-sidebar__submenu-indicator,
.portal-body--free .portal-sidebar__collapse:hover { color: var(--free-ink); }
.portal-body--free .portal-sidebar__collapse:hover { background: var(--free-hover); }
.portal-body--free .portal-sidebar__submenu::before,
.portal-body--free .portal-drawer__submenu::before { background: var(--free-rule); }
.portal-body--free .portal-drawer__header,
.portal-body--free .portal-drawer__profile { border-color: var(--free-rule); }

/* Admin switches on the light frame */
.portal-body--free .portal-topbar__demo-toggle-label { color: var(--free-ink-soft); }
.portal-body--free .portal-topbar__demo-toggle-track { background: rgba(65, 73, 69, 0.22); }
.portal-body--free .portal-topbar__demo-toggle.is-on .portal-topbar__demo-toggle-label { color: var(--color-copper); }
/* ── View as menu (admins, topbar): membership, role, demo data ── */
.portal-viewas { position: relative; }
.portal-viewas__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
}
.portal-viewas__trigger:hover { background: rgba(255, 255, 255, 0.12); }
.portal-viewas__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}
/* Any preview on: copper ring so it's never forgotten */
.portal-viewas.is-previewing .portal-viewas__trigger { border-color: #C67A45; box-shadow: inset 0 0 0 1px #C67A45; }
.portal-viewas__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background: white;
  color: var(--color-charcoal);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  z-index: 100;
}
.portal-viewas__group {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin: 8px 10px 4px;
}
.portal-viewas__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--color-charcoal);
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.portal-viewas__opt:hover { background: var(--color-bg-warm); }
.portal-viewas__opt.is-on { background: var(--color-light-sage); font-weight: 600; }
.portal-viewas__opt--switch.is-on { background: transparent; font-weight: 400; }
.portal-viewas__opt--switch .portal-topbar__demo-toggle-track { margin-left: auto; flex-shrink: 0; background: rgba(65, 73, 69, 0.22); }
.portal-viewas__opt--switch.is-on .portal-topbar__demo-toggle-track { background: #C67A45; }
.portal-viewas__opt--switch.is-on .portal-topbar__demo-toggle-knob { left: 18px; }
.portal-viewas__you {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 1px 7px;
}
.portal-viewas__divider { height: 1px; background: var(--color-border-light); margin: 8px 4px; }
.portal-viewas__reset {
  width: 100%;
  margin-top: 4px;
  border: 0;
  background: var(--color-charcoal);
  color: white;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
}
/* Light Free frame */
.portal-body--free .portal-viewas__trigger { border-color: rgba(65, 73, 69, 0.2); background: rgba(65, 73, 69, 0.05); color: var(--color-charcoal); }
.portal-body--free .portal-viewas__trigger:hover { background: rgba(65, 73, 69, 0.1); }
/* Phones: the logo is centered in the top bar, so the menu hangs just
   below the bar, centered under the logo, instead of overlapping it. */
@media (max-width: 768px) {
  .portal-viewas {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
  }
  .portal-viewas__trigger { padding: 5px 12px; font-size: 11px; box-shadow: var(--shadow-md); }
  .portal-viewas__trigger,
  .portal-body--free .portal-viewas__trigger { background: var(--color-charcoal); color: white; border-color: transparent; }
  .portal-body--core .portal-viewas__trigger { background: var(--color-sage); }
  .portal-viewas__panel { right: auto; left: 50%; transform: translateX(-50%); }
}
}

/* Core: sage frame. White text carries over from the charcoal base. */
.portal-body--core,
.portal-body--core .portal-shell,
.portal-body--core .portal-topbar,
.portal-body--core .portal-sidebar,
.portal-body--core .portal-drawer__panel {
  background: var(--color-sage);
}
.portal-body--core .portal-sidebar__link,
.portal-body--core .portal-sidebar__sublink,
.portal-body--core .portal-drawer__link,
.portal-body--core .portal-drawer__sublink { color: rgba(255, 255, 255, 0.9); }
.portal-body--core .portal-sidebar__link.is-active,
.portal-body--core .portal-sidebar__sublink.is-active,
.portal-body--core .portal-drawer__link.is-active,
.portal-body--core .portal-sidebar__group:not(.is-open) > .portal-sidebar__group-toggle.is-section-active {
  background: rgba(255, 255, 255, 0.2);
}

/* Team submenu items that aren't open yet for this team: no link, a
   quiet "Coming soon" pill at the right. */
.portal-sidebar__sublink.is-soon,
.portal-drawer__sublink.is-soon {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default;
  opacity: 0.6;
}
.portal-sidebar__sublink.is-soon:hover,
.portal-drawer__sublink.is-soon:hover { background: transparent; color: inherit; }
.portal-sidebar__soon {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px solid currentColor;
  white-space: nowrap;
}
.sc-sidebar-collapsed .portal-sidebar__soon { display: none; }

/* Core: Getting Started banner in the Core sage instead of teal */
.portal-body--core .onboarding-block__banner { background: var(--color-sage); }
.portal-body--core .onboarding-item.is-complete .onboarding-item__check {
  background: var(--color-sage);
  border-color: var(--color-sage);
}

/* Tier pills (account menu, membership cards): same colors as the frames.
   Doubled class outranks the badge and dropdown base colors. */
.tier-pill--free.tier-pill--free     { background: var(--color-light-sage); color: var(--color-charcoal); }
.tier-pill--core.tier-pill--core     { background: var(--color-sage); color: white; }
.tier-pill--guided.tier-pill--guided { background: var(--color-charcoal); color: white; }