/* Member V2 — matches design artifact */

:root {
  --mv2-bg:            #FAF4E8;
  --mv2-nav-bg:        #faf4e8cc;
  --mv2-surface:       #FFFFFF;
  --mv2-border:        #e2d6b8;
  --mv2-gold:          #d3bc9b;
  --mv2-gold-btn:      #d3bc9b;
  --mv2-gold-light:    #f1e8d3;
  --mv2-resource-row-active: #f8f4e9;
  --mv2-text:          #1A1A1A;
  --mv2-text-muted:    #7A7164;
  --mv2-text-light:    #A09884;
  --mv2-text-gold:     #8a6f47;
  --mv2-radius:        16px;
  --mv2-radius-sm:     10px;
  --mv2-sidebar-w:     350px;
  --tw-gradient-from: rgb(0 0 0 / 0.85) var(--tw-gradient-from-position);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

/* =========================================================
   Page shell
   ========================================================= */

.mv2-page {
  background: var(--mv2-bg);
  min-height: 100vh;
  font-family: 'Source Sans 3', 'Source Sans Pro', -apple-system, sans-serif;
  color: var(--mv2-text);
}

/* =========================================================
   Navbar
   ========================================================= */
.mv2-navbar-wrapper {
  background: var(--mv2-nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mv2-border);
  position: sticky;
  top: 0;
  z-index: 200;
}

.mv2-navbar {
  padding: 0 28px;
  height: 64px;
  gap: 4px;
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mv2-navbar-logo {
  margin-right: 12px;
}
.mv2-navbar-logo img {
  width: 96px;
}

.mv2-navbar-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.mv2-navbar-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mv2-text-muted);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.mv2-navbar-link i { font-size: 16px; }
.mv2-navbar-link:hover {
  background: rgb(0 0 0 / 0.05);
  color: var(--mv2-text);
}
.mv2-navbar-link.active {
  background: #e8ddc2;
  color: var(--mv2-text);
  font-weight: 600;
}

.mv2-navbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.mv2-navbar-admin-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 50px;
  border: 1.5px solid var(--mv2-border);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--mv2-text-muted);
  text-decoration: none;
  transition: background 0.15s;
}
.mv2-navbar-admin-btn:hover { background: rgb(0 0 0 / 0.05); color: var(--mv2-text); }

.mv2-navbar-schedule-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 50px;
  background: var(--mv2-surface);
  border: 1.5px solid var(--mv2-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--mv2-text);
  text-decoration: none;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);
  transition: background 0.15s, box-shadow 0.15s;
}
.mv2-navbar-schedule-btn:hover {
  background: var(--mv2-gold-light);
  color: var(--mv2-text);
}

.mv2-navbar-bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--mv2-surface);
  border: 1.5px solid var(--mv2-border);
  color: var(--mv2-text-muted);
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.mv2-navbar-bell:hover { background: var(--mv2-gold-light); }
.mv2-bell-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 9px;
  height: 9px;
  background: #4A90D9;
  border-radius: 50%;
  border: 1.5px solid var(--mv2-bg);
}

.mv2-user-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 50px;
  background: var(--mv2-surface);
  border: 1.5px solid var(--mv2-border);
  cursor: pointer;
  text-decoration: none;
  color: var(--mv2-text);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s;
}
.mv2-user-menu:hover { background: var(--mv2-gold-light); color: var(--mv2-text); }

.mv2-user-avatar-sm {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--mv2-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.mv2-user-avatar-sm img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

/* =========================================================
   Main two-column layout
   ========================================================= */
.mv2-event-area {
  max-width: 80rem;
  margin: 0 auto;
  padding: 32px 24px;
  display: grid;
  grid-template-columns: var(--mv2-sidebar-w) 1fr;
  gap: 28px;
  align-items: start;
}

.mv2-content-area {
  max-width: 80rem;
  margin: 0 auto;
  padding: 32px 24px;
  display: flex;
  gap: 28px;
  align-items: start;
}

/* Sidebar (profile card) on the left, main content on the right — matches
   closer-member-resources.html's layout. Every mv2-content-area/
   mv2-event-area page shares these two classes, so this flips the whole
   member portal (Home, Courses, Profile, Resources, etc.) at once, rather
   than one-off reordering markup in every view. `order` works the same way
   in both the flex (.mv2-content-area) and grid (.mv2-event-area)
   containers. HTML source order is unchanged (feed still comes first in
   markup, sidebar second) — only the visual order flips. */
.mv2-feed {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  order: 2;
}

/* When there's no sidebar to render (e.g. an admin with no real Member
   record on this site viewing "Preview as member" — see
   ApplicationController#require_member!, which always nils @current_member
   out for admins), letting .mv2-feed's flex:1 fill the entire
   .mv2-content-area on its own stretches each course card edge-to-edge
   across up to 80rem — capping and centering it here keeps the single
   column readable instead. */
.mv2-feed-solo {
  max-width: 640px;
  margin: 0 auto;
}

/* =========================================================
   Sidebar (profile card)
   ========================================================= */

.mv2-sidebar-sticky {
  order: 1;
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: var(--mv2-sidebar-w);
  /* Without this, once the sidebar's own content (cards) is taller than the
     viewport, the overflow is simply unreachable — a sticky element doesn't
     scroll with the page, and without overflow-y it doesn't scroll internally
     either. Capping the height and letting it scroll internally fixes that. */
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--mv2-border) transparent;
}
.mv2-sidebar-sticky::-webkit-scrollbar {
  width: 6px;
}
.mv2-sidebar-sticky::-webkit-scrollbar-thumb {
  background: var(--mv2-border);
  border-radius: 3px;
}

/* courses#index only: the sidebar's "Up next" card always refers to one
   specific course (@primary_course), but the main feed can scroll through
   several unrelated course cards below it — pinning the sidebar there made
   it look like it was still describing whatever card was currently in
   view. Falls back to scrolling with the page instead, same as the
   sidebar already does on mobile (see the max-width: 860px override below). */
.mv2-sidebar-static {
  position: static;
  max-height: none;
  overflow-y: visible;
}

.mv2-profile-card {
  background: var(--mv2-surface);
  border-radius: var(--mv2-radius);
  padding: 20px;
  border: 1px solid var(--mv2-border);
}

.mv2-profile-avatar-block {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.mv2-avatar-initials {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background-color: var(--mv2-gold);
  background-image: linear-gradient(to bottom right, #ECE1CC, #b89968);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}
.mv2-avatar-photo {
  width: 128px;
  height: auto;
  border-radius: 12px;
  object-fit: contain;
  flex-shrink: 0;
}

.mv2-profile-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--mv2-text);
  margin: 0 0 2px;
  line-height: 1.3;
}
.mv2-profile-since {
  font-size: 13px;
  color: var(--mv2-text-muted);
  margin: 0;
}

/* Membership badge next to the member's name — clicking it goes to the
   membership management/cancel page (member_membership_path). */
.mv2-membership-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--mv2-text-gold);
  background: var(--mv2-gold-light);
  border-radius: 999px;
  padding: 2px 10px;
  margin-left: 6px;
  vertical-align: middle;
  text-decoration: none;
  white-space: nowrap;
}
.mv2-membership-badge:hover {
  background: var(--mv2-gold);
  color: #fff;
}

/* Expired/lapsed variant — same shape, warm-rust instead of gold so it
   reads as "needs attention" (2026-09-07, Chileap: prompt renewal). */
.mv2-membership-badge-expired {
  color: #a13d2b;
  background: #f7e0da;
}
.mv2-membership-badge-expired:hover {
  background: #a13d2b;
  color: #fff;
}

.mv2-profile-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mv2-btn-gold {
  display: block;
  padding: 11px 16px;
  border-radius: 50px;
  background: var(--mv2-gold-btn);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.mv2-btn-gold:hover { background: #b89968; color: #fff; }

.mv2-btn-outline {
  display: block;
  padding: 11px 16px;
  border-radius: 50px;
  background: var(--mv2-surface);
  color: var(--mv2-text);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: 1.5px solid var(--mv2-border);
  cursor: pointer;
  transition: background 0.15s;
}
.mv2-btn-outline:hover { background: var(--mv2-gold-light); color: var(--mv2-text); }

/* Ready to Connect card */
.mv2-connect-card {
  background: var(--mv2-surface);
  border-radius: var(--mv2-radius);
  padding: 20px;
  border: 1px solid var(--mv2-border);
}
.mv2-connect-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mv2-text);
  margin: 0 0 8px;
}
.mv2-connect-divider {
  border: none;
  border-top: 1px solid var(--mv2-border);
  margin: 0 0 12px;
}
.mv2-connect-text {
  font-size: 13px;
  color: var(--mv2-text-muted);
  line-height: 1.6;
  margin: 0 0 16px;
}

/* =========================================================
   Main feed / content column
   ========================================================= */

/* Sentence case on purpose, unlike mv2-feed-label just below — the
   episode page's "← Back to course" link in the agreed mockup is a plain,
   quiet link, not an all-caps section eyebrow like "EPISODES"/"LEARN". */
.mv2-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mv2-text-muted);
  text-decoration: none;
  margin: 0 0 6px;
}
.mv2-back-link:hover { color: var(--mv2-text-gold); }

.mv2-feed-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mv2-text-muted);
  margin: 0 0 6px;
}
.mv2-feed-title {
  font-size: 38px;
  font-weight: 800;
  color: var(--mv2-text);
  margin: 0 0 6px;
  line-height: 1.1;
}
.mv2-feed-subtitle {
  font-size: 15px;
  color: var(--mv2-text-muted);
  margin: 0;
}

.mv2-feed-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 8px;
}
/* "See past and all future events" footer link */
.mv2-see-all-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
  padding: 16px;
  border-radius: var(--mv2-radius);
  border: 1.5px dashed var(--mv2-border);
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--mv2-text-muted);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mv2-see-all-link:hover {
  background: var(--mv2-surface);
  color: var(--mv2-text);
  border-color: var(--mv2-gold);
}
.mv2-see-all-link i { font-size: 13px; }

/* ── Survey tag on event card ── */
.mv2-tag-survey {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 50px;
  background: #fff3cd;
  color: #b45309;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mv2-tag-survey i { font-size: 11px; }

/* ── Completed survey collapsible toggle ── */
.mv2-completed-toggle {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.mv2-completed-toggle:focus { outline: none; box-shadow: none; }
.mv2-completed-toggle .mv2-event-row { padding-right: 16px; }
.mv2-completed-chevron {
  font-size: 14px;
  color: var(--mv2-text-muted);
  flex-shrink: 0;
  transition: transform 0.2s ease;
  align-self: center;
  margin-left: auto;
  margin-right: 8px;
}
.mv2-completed-toggle[aria-expanded="true"] .mv2-completed-chevron {
  transform: rotate(180deg);
}

.mv2-tag-complete {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 50px;
  background: #dcfce7;
  color: #16a34a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mv2-tag-complete i { font-size: 11px; }

.mv2-survey-thankyou {
  padding: 14px 24px 4px;
  font-size: 14px;
  color: var(--mv2-text-muted);
}
.mv2-survey-thankyou p { margin: 0; }

.mv2-survey-answers {
  padding: 8px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mv2-answer-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--mv2-border);
}
.mv2-answer-row:last-child { border-bottom: none; }
.mv2-answer-qblock {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.mv2-answer-q {
  font-size: 13px;
  color: var(--mv2-text-muted);
}
.mv2-answer-a {
  font-size: 14px;
  font-weight: 700;
  color: var(--mv2-text);
}
.mv2-answer-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--mv2-gold-btn);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 2px;
}
.mv2-answer-edit:hover { text-decoration: underline; color: #a8864e; }

/* ── Survey progress steps (inline in event card) ── */
.mv2-survey-progress-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.mv2-step {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  border: 1.5px solid var(--mv2-border);
  color: var(--mv2-text-muted);
  background: var(--mv2-surface);
  flex-shrink: 0;
}
.mv2-step.done    { background: var(--mv2-gold-btn); border-color: var(--mv2-gold-btn); color: #fff; }
.mv2-step.current { border-color: var(--mv2-gold-btn); color: var(--mv2-gold-btn); }
.mv2-step-line {
  flex: 1;
  min-width: 12px;
  max-width: 32px;
  height: 1.5px;
  background: var(--mv2-border);
}
.mv2-step-line.done { background: var(--mv2-gold-btn); }
.mv2-survey-progress-text {
  font-size: 11px;
  color: var(--mv2-text-muted);
  margin-left: 6px;
  white-space: nowrap;
}

/* ── Survey footer in event card row ── */
.mv2-survey-footer-desc {
  font-size: 13px;
  color: var(--mv2-text-muted);
  margin: 0;
  flex: 1;
}

/* Survey pages — full-width, no sidebar */
.mv2-survey-full-area {
  max-width: 80rem;
  margin: 0 auto;
  padding: 32px 24px;
}

/* ── Survey page layout (2-col: progress panel + form) ── */
.mv2-survey-page-card {
  display: grid;
  grid-template-columns: 0.6fr 1fr;
  border-radius: var(--mv2-radius);
  overflow: hidden;
  border: 1px solid var(--mv2-border);
  background: var(--mv2-surface);
  min-height: 500px;
}

.mv2-survey-progress-panel {
  background: #2D2D44;
  display: flex;
  flex-direction: column;
}
.mv2-survey-event-banner {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  opacity: 0.7;
}
.mv2-survey-progress-inner {
  padding: 28px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mv2-survey-progress-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mv2-gold-light);
  margin: 0;
}
.mv2-survey-progress-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--mv2-gold-btn);
  margin: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mv2-survey-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mv2-survey-step {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  border: 2px solid rgb(255 255 255 / 0.3);
  color: rgb(255 255 255 / 0.5);
  flex-shrink: 0;
}
.mv2-survey-step.done    { background: var(--mv2-gold-btn); border-color: var(--mv2-gold-btn); color: #fff; }
.mv2-survey-step.current { border-color: var(--mv2-gold-btn); color: #fff; }
.mv2-survey-step-connector {
  flex: 1;
  min-width: 16px;
  max-width: 36px;
  height: 2px;
  background: rgb(255 255 255 / 0.2);
  border-radius: 1px;
}
.mv2-survey-step-connector.done { background: var(--mv2-gold-btn); }
.mv2-survey-encouragement {
  font-size: 13px;
  color: rgb(255 255 255 / 0.65);
  line-height: 1.65;
  margin: 0;
}

.mv2-survey-form-panel {
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* ── Survey completion screen ── */
.mv2-complete-panel {
  background: linear-gradient(160deg, #2c3149 0%, #1e2235 100%);
}
.mv2-complete-panel-inner {
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.mv2-complete-panel-icon {
  font-size: 40px;
  color: #4ade80;
  line-height: 1;
}
.mv2-complete-form-panel {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 36px;
}
.mv2-complete-header {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.mv2-complete-check-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}
.mv2-complete-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--mv2-text);
  margin: 0 0 10px;
}
.mv2-complete-subtitle {
  font-size: 14px;
  color: var(--mv2-text-muted);
  margin: 0 0 8px;
  line-height: 1.6;
}
.mv2-complete-subtitle:last-child { margin-bottom: 0; }
.mv2-complete-answers-card {
  background: #fafaf8;
  border: 1.5px solid var(--mv2-border);
  border-radius: 14px;
  overflow: hidden;
}
.mv2-complete-answers-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mv2-text-muted);
  padding: 14px 20px;
  margin: 0;
  border-bottom: 1px solid var(--mv2-border);
  background: #fff;
}
.mv2-complete-answer-list {
  display: flex;
  flex-direction: column;
}
.mv2-complete-answer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--mv2-border);
}
.mv2-complete-answer-item:last-child { border-bottom: none; }
.mv2-complete-answer-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mv2-complete-answer-q {
  font-size: 13px;
  color: var(--mv2-text-muted);
}
.mv2-complete-answer-a {
  font-size: 15px;
  font-weight: 700;
  color: var(--mv2-text);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.mv2-star { font-size: 13px; color: var(--mv2-gold-btn); }
.mv2-star-empty { color: #d4c5a5; }
.mv2-star-label { font-size: 13px; color: var(--mv2-text-muted); font-weight: 400; margin-left: 4px; }
.mv2-complete-change-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mv2-gold-btn);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 5px 12px;
  border: 1.5px solid var(--mv2-gold-btn);
  border-radius: 50px;
  transition: background 0.15s, color 0.15s;
}
.mv2-complete-change-btn:hover {
  background: var(--mv2-gold-btn);
  color: #fff;
}
.mv2-complete-footer {
  display: flex;
}

/* =========================================================
   Survey / Rating form elements
   ========================================================= */

/* Error box */
.mv2-survey-error-box {
  background: #fef2f2;
  border: 1.5px solid #fecaca;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  color: #c0392b;
  font-size: 14px;
}

/* Rated member card (top of rating form) */
.mv2-rated-member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-radius: var(--mv2-radius-sm);
  margin-bottom: 24px;
  text-align: center;
}
.mv2-rated-member-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
  flex-shrink: 0;
}
.mv2-rated-member-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--mv2-text);
  margin: 0;
}

/* Question block */
.mv2-survey-question-block {
  margin-bottom: 24px;
}
.mv2-survey-question-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--mv2-text);
  margin: 0 0 10px;
  line-height: 1.5;
}
.mv2-survey-question-hint {
  font-size: 13px;
  color: var(--mv2-text-muted);
  margin: -6px 0 10px;
  line-height: 1.5;
}

/* Select and textarea */
.mv2-survey-select-wrap { position: relative; }
.mv2-survey-select {
  border-radius: var(--mv2-radius-sm) !important;
  border-color: var(--mv2-border) !important;
  font-size: 15px !important;
  padding: 10px 14px !important;
  background-color: #fff !important;
}
.mv2-survey-select:focus {
  border-color: var(--mv2-gold) !important;
  box-shadow: 0 0 0 3px rgb(211 188 155 / 0.2) !important;
}
.mv2-survey-textarea {
  border-radius: var(--mv2-radius-sm) !important;
  border-color: var(--mv2-border) !important;
  font-size: 15px !important;
  padding: 10px 14px !important;
  resize: vertical;
  width: 100%;
}
.mv2-survey-textarea:focus {
  border-color: var(--mv2-gold) !important;
  box-shadow: 0 0 0 3px rgb(211 188 155 / 0.2) !important;
}

/* Action row */
.mv2-survey-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--mv2-border);
}

/* Style the existing form inside mv2 */
.mv2-survey-form-panel .survey_question {
  font-size: 16px;
  font-weight: 500;
  color: var(--mv2-text);
  line-height: 1.5;
}
.mv2-survey-form-panel .form-control,
.mv2-survey-form-panel .form-select {
  border-radius: var(--mv2-radius-sm);
  border-color: var(--mv2-border);
  font-size: 14px;
}
.mv2-survey-form-panel .btn-survey-back {
  padding: 10px 28px;
  border-radius: 50px;
  border: 1.5px solid var(--mv2-border);
  background: var(--mv2-surface);
  color: var(--mv2-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.mv2-survey-form-panel .btn-survey-back:hover { background: var(--mv2-gold-light); }
.mv2-survey-form-panel .btn-survey-next {
  padding: 10px 28px;
  border-radius: 50px;
  background: var(--mv2-gold-btn);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.mv2-survey-form-panel .btn-survey-next:hover { background: #a8864e; }

@media (max-width: 900px) {
  .mv2-survey-page-card { grid-template-columns: 1fr; }
  .mv2-survey-event-banner { height: 120px; }
  .mv2-survey-form-panel { padding: 24px; }
}

.mv2-view-all {
  font-size: 14px;
  font-weight: 600;
  color: var(--mv2-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  align-self: flex-end;
  padding-bottom: 4px;
}
.mv2-view-all:hover { color: var(--mv2-gold); }

/* =========================================================
   Event row
   ========================================================= */

.mv2-event-list {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mv2-event-row-link-content {
  text-decoration: none;
}

/* The <a> wrapper that makes the top content clickable */
.mv2-event-row-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  background: #fff;
  border-radius: var(--mv2-radius);
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(31 27 22 / 0.04), 0 4px 16px rgb(31 27 22 / 0.04);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.mv2-event-row-link:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #D3BC9B 0%, #ECE1CC 50%, #D3BC9B 100%);
  border-radius: var(--mv2-radius) var(--mv2-radius) 0 0;
}

.mv2-event-row-link:hover {
  box-shadow: 0 2px 4px rgb(31 27 22 / 0.06), 0 8px 24px rgb(31 27 22 / 0.08);
  transform: translateY(-1px);
}
.mv2-event-row-link:hover .mv2-event-row-title {
  color: var(--mv2-text-gold);
}

.mv2-event-row {
  display: flex;
  gap: 16px;
  padding: 20px 24px 12px;
}

.backdrop-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, rgb(0 0 0 / 0.85), rgb(0 0 0 / 0.3));
}

.mv2-event-thumb-wrap {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: var(--mv2-radius-sm);
  overflow: hidden;
  background: var(--mv2-gold-light);
}
.mv2-event-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mv2-event-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mv2-gold-light);
}
.mv2-thumb-date-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1;
}
.mv2-thumb-month-lg {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--mv2-text-muted);
}
.mv2-thumb-day-lg {
  font-size: 28px;
  font-weight: 800;
  color: var(--mv2-text);
  line-height: 1;
}
.mv2-thumb-weekday-lg {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--mv2-text-muted);
}
.mv2-event-thumb-date {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px 4px 6px;
  text-align: center;
  color: #fff;
  line-height: 1;
  z-index: 1;
}
.mv2-thumb-month {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mv2-thumb-day {
  display: block;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.05;
}
.mv2-thumb-weekday {
  display: block;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.mv2-event-row-body {
  flex: 1;
  min-width: 0;
}
.mv2-event-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.mv2-tag-series {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 50px;
  background: var(--mv2-gold-light);
  color: var(--mv2-text-gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mv2-tag-series::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mv2-gold);
  flex-shrink: 0;
}
.mv2-tag-category {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--mv2-text-muted);
}
.mv2-tag-category i { font-size: 13px; }

.mv2-event-row-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--mv2-text);
  margin: 0 0 6px;
  line-height: 1.3;
}
.mv2-event-row-meta {
  font-size: 13px;
  color: var(--mv2-text-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mv2-event-row-meta i { font-size: 13px; }
.mv2-meta-dot { color: var(--mv2-border); }

.mv2-event-row-desc {
  font-size: 14px;
  color: var(--mv2-text-muted);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mv2-event-row-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px 16px;
  flex-wrap: wrap;
  gap: 10px;
  border-radius: var(--mv2-radius);
}
.mv2-going-count {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--mv2-text-muted);
}
.mv2-going-count i { font-size: 15px; }

.mv2-view-details-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--mv2-text-muted);
  text-decoration: none;
  font-weight: 500;
}
.mv2-view-details-link:hover { color: var(--mv2-text-gold); }
.mv2-view-details-link i { font-size: 11px; }

/* Featured card — same row layout, taller banner-style thumbnail instead of the small square */
.mv2-featured-row {
  flex-direction: column;
  padding: 0;
}
.mv2-featured-thumb {
  width: 100%;
  height: 220px;
  border-radius: var(--mv2-radius) var(--mv2-radius) 0 0;
}
.mv2-featured-row .mv2-event-row-body {
  padding: 20px 24px 0;
}
.mv2-featured-row .mv2-event-row-desc {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
@media (max-width: 640px) {
  .mv2-featured-thumb { height: 160px; }
}

.mv2-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mv2-btn-cal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 50px;
  background: var(--mv2-surface);
  border: 1.5px solid var(--mv2-border);
  font-size: 13px;
  font-weight: 500;
  color: var(--mv2-text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.mv2-btn-cal:hover { background: var(--mv2-gold-light); color: var(--mv2-text); }

.mv2-btn-rsvp {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border-radius: 50px;
  background: var(--mv2-gold-btn);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.mv2-btn-rsvp:hover { background: #a8864e; color: #fff; }
.mv2-btn-survey-pending { background: #1d4ed8; }
.mv2-btn-survey-pending:hover { background: #1e40af; }

.mv2-btn-going {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 18px;
  border-radius: 50px;
  background: #dcfce7;
  color: #16a34a;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: default;
}
.mv2-btn-not-going {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 18px;
  border-radius: 50px;
  background: #fef2f2;
  color: #c0392b;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: default;
}
.mv2-btn-requesting {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 18px;
  border-radius: 50px;
  background: #fef9ec;
  color: #b45309;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: default;
}
.mv2-btn-invited {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 18px;
  border-radius: 50px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: default;
}
.mv2-btn-past {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 18px;
  border-radius: 50px;
  background: #f5f5f5;
  color: #888;
  font-size: 13px;
  font-weight: 600;
  border: none;
}

.mv2-event-divider {
  margin: 0 24px;
  border: none;
  border-top: 1px solid var(--mv2-border);
}

/* =========================================================
   Events page — pill tabs
   ========================================================= */

.mv2-tabs-bar {
  display: inline-flex;
  background: var(--mv2-gold-light);
  border-radius: 50px;
  padding: 4px;
  gap: 2px;
  margin-bottom: 24px;
  border: 1px solid var(--mv2-border);
  width: max-content;
}
.mv2-tab-pill {
  padding: 8px 22px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mv2-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.mv2-tab-pill.active {
  background: var(--mv2-surface);
  color: var(--mv2-text);
  font-weight: 600;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.1);
}

/* Connections card */
.mv2-connections-card {
  background: var(--mv2-surface);
  border-radius: var(--mv2-radius);
  padding: 20px;
  border: 1px solid var(--mv2-border);
}
.mv2-connections-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.mv2-connections-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 50px;
  background: var(--mv2-gold-light);
  color: var(--mv2-gold);
  font-size: 12px;
  font-weight: 700;
}
.mv2-connections-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--mv2-text);
  margin: 0;
}
.mv2-connections-avatars {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mv2-conn-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--mv2-bg);
  background: var(--mv2-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mv2-conn-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mv2-conn-avatar span {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

/* Tab completion percentage badge */
.mv2-tab-pct {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--mv2-text-muted);
  background: rgb(0 0 0 / 0.06);
  border-radius: 50px;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
}
.mv2-tab-pill.active .mv2-tab-pct {
  background: var(--mv2-gold-light);
  color: var(--mv2-gold);
}

/* Tab pills as links (for profile tabs) */
a.mv2-tab-pill {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* =========================================================
   Event Modal
   ========================================================= */

.mv2-modal .modal-content {
  border: none;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
.mv2-modal .modal-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
/* turbo-frame fills the modal-body as a flex column */
#event_modal_content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Floating close button overlaid on the banner */
.mv2-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgb(255 255 255 / 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--mv2-text);
  cursor: pointer;
  transition: background 0.15s;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.15);
}
.mv2-modal-close:hover { background: #fff; }

/* Full-bleed banner */
.mv2-modal-banner-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: #111;
}
.mv2-modal-banner-blur {
  position: absolute;
  inset: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  object-fit: cover;
  filter: blur(18px);
  opacity: 0.7;
}
.mv2-modal-banner {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  display: block;
}
.mv2-modal-banner-placeholder {
  width: 100%;
  height: 120px;
  background: linear-gradient(135deg, #f0e4d0, #ddd0b8);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mv2-modal-banner-placeholder i {
  font-size: 52px;
  color: var(--mv2-gold);
  opacity: 0.4;
}

/* Full-page event banner (events#show) — same letterbox treatment as the modal
   banner above, just taller: the whole photo stays visible (object-fit: contain)
   instead of being cropped to fill the width, with a blurred copy of itself
   filling whatever gap is left on the sides or top/bottom. */
.event-hero-banner-wrap {
  position: relative;
  height: 500px;
  overflow: hidden;
  background: #111;
}
.event-hero-banner-blur {
  position: absolute;
  inset: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  object-fit: cover;
  filter: blur(30px);
  opacity: 0.7;
}
.event-hero-banner-img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  display: block;
  margin: 0 auto;
}

/* No-cover header: beige block with badge + date + time */
.mv2-modal-no-cover-header {
  background: #f0e8d8;
  padding: 28px 28px 24px;
}
.mv2-modal-no-cover-header .mv2-modal-tag-row {
  margin-bottom: 16px;
}
.mv2-modal-no-cover-date {
  font-size: 18px;
  font-weight: 700;
  color: #2c1f0e;
  margin: 0 0 4px;
}
.mv2-modal-no-cover-time {
  font-size: 14px;
  color: #7a6450;
  margin: 0;
}

/* Scrollable content area */
.mv2-modal-body {
  padding: 20px 28px 8px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  /* Scroll shadow: appears at bottom when more content is below, fades away at end */
  background:
    linear-gradient(var(--mv2-surface) 30%, transparent) top    / 100% 32px no-repeat local,
    linear-gradient(transparent, var(--mv2-surface) 70%) bottom / 100% 32px no-repeat local,
    radial-gradient(farthest-side at 50% 100%, rgb(0 0 0 / 0.10), transparent) bottom / 100% 14px no-repeat scroll;
}

/* Sticky RSVP footer — always visible at bottom of modal */
.mv2-modal-rsvp-sticky {
  flex-shrink: 0;
  padding: 12px 28px 16px;
  background: var(--mv2-surface);
}

/* Tag row: badge + location + date/time */
.mv2-modal-tag-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.mv2-modal-meta-item {
  font-size: 13px;
  color: var(--mv2-text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.mv2-modal-meta-item i { font-size: 13px; }

/* Title & subtitle */
.mv2-modal-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--mv2-text);
  margin: 0 0 8px;
  line-height: 1.2;
}
.mv2-modal-subtitle {
  font-size: 15px;
  color: var(--mv2-text-muted);
  margin: 0 0 16px;
  line-height: 1.5;
}

/* Description */
.mv2-modal-description {
  font-size: 15px;
  color: #4a4a4a;
  line-height: 1.65;
  margin-bottom: 4px;
}
.mv2-modal-description p { margin-bottom: 8px; }

/* Dividers */
.mv2-modal-hr {
  border: none;
  border-top: 1px solid var(--mv2-border);
  margin: 18px 0;
}

/* Going count */
.mv2-modal-going {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--mv2-text);
}
.mv2-modal-going i { font-size: 18px; color: var(--mv2-text-muted); }

/* RSVP section */
.mv2-modal-rsvp-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px;
}
.mv2-modal-rsvp-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mv2-text-muted);
  margin: 0;
}
.mv2-modal-rsvp-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mv2-rsvp-yes {
  display: block;
  padding: 14px;
  border-radius: 12px;
  border: 1.5px solid var(--mv2-border);
  background: var(--mv2-surface);
  color: var(--mv2-text);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mv2-rsvp-yes:hover { background: var(--mv2-gold-light); border-color: var(--mv2-gold); color: var(--mv2-text); }
.mv2-rsvp-yes--active {
  background: #f0fdf4;
  border-color: #16a34a;
  color: #16a34a;
}
.mv2-rsvp-yes--active:hover { background: #dcfce7; border-color: #16a34a; color: #16a34a; }
.mv2-rsvp-yes--pending {
  background: #fef9ec;
  border-color: #d97706;
  color: #b45309;
  cursor: default;
}
.mv2-modal-invited-note {
  margin-top: 10px;
  font-size: 13px;
  color: #1d4ed8;
}
.mv2-rsvp-no {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: 1.5px solid var(--mv2-border);
  background: var(--mv2-surface);
  color: #c0392b;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.mv2-rsvp-no:hover { background: #fef2f2; color: #c0392b; }
.mv2-rsvp-no--disabled { opacity: 0.35; cursor: not-allowed; }
.mv2-rsvp-no--active {
  background: #fef2f2;
  border-color: #c0392b;
  color: #c0392b;
  cursor: default;
}
.mv2-modal-rsvp-confirmed {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  color: #16a34a;
  font-size: 15px;
  font-weight: 600;
}
.mv2-modal-past-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  background: #f9fafb;
  border: 1.5px solid var(--mv2-border);
  color: var(--mv2-text-muted);
  font-size: 14px;
}
.mv2-btn-share-feedback {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: 50px;
  background: var(--mv2-gold-btn);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.mv2-btn-share-feedback:hover { background: #a8864e; color: #fff; }

.mv2-modal-survey-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--mv2-gold-light);
  border: 1.5px solid var(--mv2-gold);
  flex-wrap: wrap;
}
.mv2-modal-survey-banner-text {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.mv2-modal-survey-banner-text i {
  font-size: 20px;
  color: var(--mv2-gold-btn);
  flex-shrink: 0;
}
.mv2-modal-survey-banner-text strong {
  display: block;
  font-size: 14px;
  color: var(--mv2-text);
}
.mv2-modal-survey-banner-text span {
  font-size: 12px;
  color: var(--mv2-text-muted);
}

.mv2-modal-survey-done {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgb(220 252 231 / 0.6);
  border: 1.5px solid rgb(34 197 94 / 0.35);
  flex-wrap: wrap;
}
.mv2-modal-survey-done-text {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.mv2-modal-survey-done-text i {
  font-size: 20px;
  color: #16a34a;
  flex-shrink: 0;
}
.mv2-modal-survey-done-text strong {
  display: block;
  font-size: 14px;
  color: var(--mv2-text);
}
.mv2-modal-survey-done-text span {
  font-size: 12px;
  color: var(--mv2-text-muted);
}
.mv2-btn-edit-feedback {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 50px;
  background: transparent;
  color: #16a34a;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid #16a34a;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mv2-btn-edit-feedback:hover { background: #16a34a; color: #fff; }

.mv2-modal-series-note {
  font-size: 12px;
  color: var(--mv2-text-muted);
  margin: 14px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  line-height: 1.5;
}
.mv2-modal-series-note i { flex-shrink: 0; margin-top: 2px; }
.mv2-modal-signin { font-size: 14px; color: var(--mv2-text-muted); padding: 8px 0 4px; }

/* Subscribe card button */
.mv2-btn-subscribe {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border-radius: 50px;
  background: var(--mv2-gold-btn);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.mv2-btn-subscribe:hover { background: #a8864e; color: #fff; }

/* Series subscribe panel in modal */
.mv2-series-subscribe-panel {
  background: #faf8f5;
  border: 1px solid #e8e0d4;
  border-radius: 14px;
  padding: 20px 20px 16px;
  margin: 4px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.mv2-series-subscribe-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--mv2-text);
}
.mv2-series-subscribe-desc {
  font-size: 13px;
  color: var(--mv2-text-muted);
  margin: 0;
  line-height: 1.55;
}
.mv2-rsvp-subscribe {
  width: 100%;
  justify-content: center;
  font-size: 15px;
  padding: 12px 24px;
}
.mv2-series-subscribe-divider {
  font-size: 11px;
  color: var(--mv2-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mv2-rsvp-single {
  font-size: 12px;
  color: var(--mv2-text-muted);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.mv2-modal-subscribed-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f0fdf4;
  border-bottom: 1px solid #bbf7d0;
  padding: 14px 20px;
}

.mv2-modal-subscribed-banner-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.mv2-modal-subscribed-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.mv2-modal-subscribed-title {
  font-size: 14px;
  font-weight: 700;
  color: #15803d;
  line-height: 1.3;
}

.mv2-modal-subscribed-subtitle {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.3;
  margin-top: 2px;
}

.mv2-series-leave-link {
  font-size: 13px;
  color: #374151;
  text-decoration: underline;
  white-space: nowrap;
  flex-shrink: 0;
}

.mv2-series-leave-link:hover { color: #111827; }

/* Series info bar — shown for unsubscribed members on series events */
.mv2-modal-series-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--mv2-surface);
  border-bottom: 1px solid var(--mv2-border);
  padding: 14px 20px;
  flex-shrink: 0;
}
.mv2-modal-series-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}
.mv2-modal-series-bar-left > i {
  flex-shrink: 0;
  font-size: 18px;
  color: var(--mv2-text-muted);
}
.mv2-modal-series-bar-text {
  min-width: 0;
  overflow: hidden;
}
.mv2-modal-series-bar-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--mv2-text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mv2-modal-series-bar-sub {
  font-size: 12px;
  color: var(--mv2-text-muted);
  margin-top: 1px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mv2-btn-subscribe {
  flex-shrink: 0;
  white-space: nowrap;
}

.mv2-series-session-note {
  font-size: 12px;
  color: var(--mv2-text-muted);
  margin: 10px 0 4px;
  text-align: center;
}

/* =========================================================
   Empty states
   ========================================================= */

.mv2-empty {
  text-align: center;
  padding: 48px 24px;
  background: var(--mv2-surface);
  border-radius: var(--mv2-radius);
  border: 1px solid var(--mv2-border);
}
.mv2-empty i { font-size: 32px; color: var(--mv2-text-light); display: block; margin-bottom: 10px; }
.mv2-empty h4 { font-size: 15px; font-weight: 600; color: var(--mv2-text-muted); margin: 0 0 6px; }
.mv2-empty p  { font-size: 13px; color: var(--mv2-text-light); margin: 0; }

/* =========================================================
   Flash messages
   ========================================================= */

.mv2-flash-area {
  max-width: 80rem;
  margin: 12px auto 0;
  padding: 0 24px;
}

/* Always prevent schedule button from wrapping */
.mv2-navbar-schedule-btn { white-space: nowrap; }

/* =========================================================
   Responsive
   ========================================================= */

/* ── Tablet: hide schedule btn text, tighten spacing ── */
@media (max-width: 860px) {
  .mv2-navbar-schedule-btn .mv2-schedule-label { display: none; }
  .mv2-navbar-schedule-btn { padding: 8px 12px; }
  .mv2-navbar-nav .mv2-navbar-link span { display: none; }
  .mv2-navbar-link { padding: 8px 10px; }
}

/* ── Content collapses to single column on tablet ── */
@media (max-width: 900px) {
  .mv2-content-area {
    flex-direction: column;
    padding: 16px;
  }
  .mv2-event-area {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .mv2-feed-title { font-size: 28px; }

  /* Profile photo/initials, and (2026-09-15 follow-up) the profile card,
     "Ready to Connect?" card, and Connections card, only earn their space
     on the home dashboard once the sidebar has stacked above the page
     content — see layouts/_member_v2_sidebar.html.erb, which only applies
     these classes on every mv2 page except members#show. */
  .mv2-avatar-mobile-hide { display: none; }
  .mv2-sidebar-card-mobile-hide { display: none; }
}

/* ── Slide-in drawer (mobile) ── */

/* Backdrop */
.mv2-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.4);
  z-index: 150; /* below navbar (200) when closed — never blocks hamburger */
  opacity: 0;
  pointer-events: none;
  /* closing: ease-in — fades out quickly */
  transition: opacity 0.18s ease-in;
}
.mv2-drawer-backdrop.open {
  z-index: 400; /* above navbar when drawer is actually open */
  opacity: 1;
  pointer-events: auto;
  /* opening: ease-out — fades in smoothly */
  transition: opacity 0.28s ease-out;
}

/* Drawer panel */
.mv2-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 85vw;
  background: var(--mv2-surface);
  z-index: 401;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  will-change: transform;
  box-shadow: 4px 0 32px rgb(0 0 0 / 0.14);
  pointer-events: none; /* natural position overlaps page; don't capture events until open */
  /* closing: ease-in, short — accelerates away, snappy */
  transition: transform 0.18s cubic-bezier(0.4, 0, 1, 1);
}
.mv2-drawer.open {
  transform: translateX(0);
  pointer-events: auto;
  /* opening: ease-out, slightly longer — glides in, settles naturally */
  transition: transform 0.28s cubic-bezier(0, 0, 0.2, 1);
}

/* Prevent body scroll when drawer is open */
body.mv2-drawer-open {
  overflow: hidden;
}

/* Drawer header — profile block */
.mv2-drawer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px 18px;
  border-bottom: 1px solid var(--mv2-border);
  background: var(--mv2-bg);
}
.mv2-drawer-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--mv2-gold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mv2-drawer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mv2-drawer-avatar-initials {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.mv2-drawer-user-info {
  flex: 1;
  min-width: 0;
}
.mv2-drawer-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--mv2-text);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mv2-drawer-since {
  font-size: 12px;
  color: var(--mv2-text-muted);
  margin: 0;
}
.mv2-drawer-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1.5px solid var(--mv2-border);
  background: var(--mv2-surface);
  color: var(--mv2-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
  transition: background 0.15s;
}
.mv2-drawer-close:hover {
  background: var(--mv2-gold-light);
  color: var(--mv2-text);
}

/* Drawer nav links */
.mv2-drawer-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px 10px;
  overflow-y: auto;
}
.mv2-drawer-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--mv2-text);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  min-height: 50px;
}
.mv2-drawer-link:hover {
  background: var(--mv2-gold-light);
  color: var(--mv2-text);
}
.mv2-drawer-link.active {
  background: #e8ddc2;
  color: var(--mv2-text);
  font-weight: 600;
}
.mv2-drawer-link-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--mv2-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  color: var(--mv2-text-muted);
}
.mv2-drawer-link.active .mv2-drawer-link-icon,
.mv2-drawer-link:hover .mv2-drawer-link-icon {
  background: rgb(0 0 0 / 0.06);
  color: var(--mv2-text);
}

/* Drawer footer — sign out etc */
.mv2-drawer-footer {
  padding: 10px;
  border-top: 1px solid var(--mv2-border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mv2-drawer-footer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mv2-text-muted);
  text-decoration: none;
  transition: background 0.15s;
}
.mv2-drawer-footer-link:hover {
  background: var(--mv2-gold-light);
  color: var(--mv2-text);
}
.mv2-drawer-signout {
  color: #c0392b;
}
.mv2-drawer-signout:hover {
  background: #fdecea;
  color: #c0392b;
}

/* ── Mobile: hamburger nav ── */
@media (max-width: 900px) {
  .mv2-navbar { padding: 0 16px; height: 56px; }
  .mv2-navbar-nav { display: none; }

  .mv2-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1.5px solid var(--mv2-border);
    background: var(--mv2-surface);
    color: var(--mv2-text);
    font-size: 18px;
    cursor: pointer;
    order: -1;
    flex-shrink: 0;
  }

  .mv2-navbar-schedule-btn span { display: none; }
  .mv2-navbar-schedule-btn { padding: 8px 10px; }

  .mv2-sidebar-sticky { width: 100%; position: static; max-height: none; overflow-y: visible; }
  .mv2-event-row { padding: 14px 16px 0; }
  .mv2-event-row-footer { padding: 12px 16px 14px; }
  .mv2-event-divider { margin: 0 16px; }
  .mv2-content-area { flex-direction: column; padding: 16px; gap: 16px; }
  .mv2-feed-title { font-size: 22px; }
  .mv2-modal-rsvp-buttons { grid-template-columns: 1fr; }
  .mv2-tabs-bar { max-width: 100%; overflow-x: auto; }
  .mv2-feed-header { flex-wrap: wrap; gap: 8px; }
}

/* Hide hamburger + drawer on desktop */
@media (min-width: 861px) {
  .mv2-hamburger { display: none; }
  .mv2-drawer { display: none !important; }
  .mv2-drawer-backdrop { display: none !important; }
}

/* =========================================================
   Location type badges (event card + modal)
   ========================================================= */
.mv2-tag-in-person,
.mv2-tag-in-person-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mv2-tag-in-person {
  padding: 5px 12px;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}
.mv2-tag-in-person-sm {
  padding: 3px 8px;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}
.mv2-tag-online,
.mv2-tag-online-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mv2-tag-online {
  padding: 5px 12px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}
.mv2-tag-online-sm {
  padding: 3px 8px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}
.mv2-tag-membership,
.mv2-tag-membership-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--mv2-gold-light);
  color: var(--mv2-text-gold);
  border: 1px solid var(--mv2-gold);
}
.mv2-tag-membership {
  padding: 5px 12px;
}
.mv2-tag-membership-sm {
  padding: 3px 8px;
}

/* =========================================================
   Add to calendar + Join Zoom buttons (event card footer)
   ========================================================= */
.mv2-btn-calendar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 50px;
  border: 1.5px solid var(--mv2-border);
  background: var(--mv2-surface);
  color: var(--mv2-text-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.mv2-btn-calendar:hover {
  background: var(--mv2-gold-light);
  border-color: var(--mv2-gold);
  color: var(--mv2-text);
}
.mv2-btn-join-zoom-sm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  border-radius: 50px;
  background: #16a34a;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s;
}
.mv2-btn-join-zoom-sm:hover { background: #15803d; color: #fff; }

/* =========================================================
   Join Zoom button (modal — full width)
   ========================================================= */
.mv2-btn-join-zoom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: #16a34a;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s;
}
.mv2-btn-join-zoom:hover { background: #15803d; color: #fff; }

/* =========================================================
   Get Tickets button (modal)
   ========================================================= */
.mv2-btn-get-tickets {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: var(--mv2-gold-btn);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s;
}
.mv2-btn-get-tickets:hover { background: #a8864e; color: #fff; }

/* =========================================================
   Clear RSVP link (inline in modal label row)
   ========================================================= */
.mv2-modal-clear-rsvp {
  font-size: 12px;
  font-weight: 500;
  color: var(--mv2-text-muted);
  text-decoration: underline;
  letter-spacing: 0;
  text-transform: none;
}
.mv2-modal-clear-rsvp:hover { color: var(--mv2-text); }

/* =========================================================
   "I want to cancel" section (modal)
   ========================================================= */
.mv2-modal-cancel-section {
  margin-top: 16px;
  text-align: center;
}
.mv2-btn-cancel-rsvp {
  font-size: 13px;
  color: #c0392b;
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.mv2-btn-cancel-rsvp:hover { color: #922b21; }

/* =========================================================
   In-person location notice (modal)
   ========================================================= */
.mv2-modal-location-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 14px;
  margin-bottom: 12px;
}

/* =========================================================
   Match survey standalone pages  (/surveys/:token)
   ========================================================= */
.sl-survey-shell {
  min-height: 100vh;
  background: #FAF4E8;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px 80px;
}
.sl-survey-wrap {
  width: 100%;
  max-width: 560px;
}
.sl-survey-logo {
  text-align: center;
  margin-bottom: 32px;
}
/* Progress bar */
.sl-survey-progress-bar-wrap {
  height: 8px;
  background: #e2d6b8;
  border-radius: 50px;
  overflow: hidden;
  margin-bottom: 10px;
}
.sl-survey-progress-bar {
  height: 100%;
  background: #d3bc9b;
  border-radius: 50px;
  transition: width 0.4s ease;
}
.sl-survey-step-label {
  font-size: 13px;
  color: #7A7164;
  margin-bottom: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.sl-survey-intro {
  font-size: 15px;
  color: #1A1A1A;
  margin-bottom: 24px;
  line-height: 1.6;
}
/* Question card */
.sl-survey-question-card {
  background: #fff;
  border: 1.5px solid #e2d6b8;
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 20px;
}
.sl-survey-question-text {
  font-size: 18px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 6px;
  line-height: 1.4;
}
.sl-survey-question-hint {
  font-size: 13px;
  color: #7A7164;
  margin: 0;
  line-height: 1.5;
}
/* Scale label */
.sl-survey-scale-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7A7164;
  margin-bottom: 10px;
}
/* Pill buttons (1-5, 1-10, NPS) */
.sl-survey-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.sl-survey-pill-input {
  display: none;
}
.sl-survey-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding: 0 12px;
  border-radius: 50px;
  border: 1.5px solid #e2d6b8;
  background: #fff;
  color: #1A1A1A;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
}
.sl-survey-pill:hover {
  background: #f1e8d3;
  border-color: #d3bc9b;
}
.sl-survey-pill-input:checked + .sl-survey-pill {
  background: #d3bc9b;
  border-color: #d3bc9b;
  color: #fff;
}
/* Scale end labels */
.sl-survey-scale-ends {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #7A7164;
  margin-bottom: 20px;
}
/* Yes / No pills */
.sl-survey-yesno-group {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}
.sl-survey-yesno-pill {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: 12px;
  border: 1.5px solid #e2d6b8;
  background: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sl-survey-pill-input:checked + .sl-survey-yesno-yes {
  background: #dcfce7;
  border-color: #86efac;
  color: #16a34a;
}
.sl-survey-pill-input:checked + .sl-survey-yesno-no {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #c0392b;
}
.sl-survey-yesno-yes:hover { background: #f0fdf4; border-color: #86efac; }
.sl-survey-yesno-no:hover  { background: #fef2f2; border-color: #fca5a5; }
/* Textarea / input */
.sl-survey-textarea,
.sl-survey-input {
  width: 100%;
  border: 1.5px solid #e2d6b8;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  color: #1A1A1A;
  background: #fff;
  margin-bottom: 20px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  resize: vertical;
}
.sl-survey-textarea:focus,
.sl-survey-input:focus {
  border-color: #d3bc9b;
  box-shadow: 0 0 0 3px rgb(211 188 155 / 0.2);
}
/* Submit button */
.sl-survey-submit-wrap {
  margin-top: 24px;
}
.sl-survey-btn {
  display: block;
  width: 100%;
  padding: 15px;
  border-radius: 50px;
  background: #d3bc9b;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
}
.sl-survey-btn:hover { background: #a8864e; color: #fff; }
.sl-survey-btn--outline {
  background: transparent;
  border: 1.5px solid #d3bc9b;
  color: #8a6f47;
}
.sl-survey-btn--outline:hover { background: #f1e8d3; color: #8a6f47; }
/* Completion screen */
.sl-survey-wrap--complete {
  text-align: center;
  padding-top: 20px;
}
.sl-survey-complete-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  font-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.sl-survey-complete-title {
  font-size: 28px;
  font-weight: 800;
  color: #1A1A1A;
  margin-bottom: 12px;
}
.sl-survey-complete-body {
  font-size: 15px;
  color: #7A7164;
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 600px) {
  .sl-survey-shell { padding: 24px 12px 60px; }
  .sl-survey-question-text { font-size: 16px; }
  .sl-survey-pill { min-width: 42px; height: 42px; font-size: 14px; }

  /* Modal: near-full-screen sheet on phones */
  .mv2-modal .modal-dialog {
    margin: 8px auto;
    max-width: calc(100% - 16px);
  }
  .mv2-modal .modal-content {
    border-radius: 16px;
    max-height: calc(100dvh - 16px);
  }
  .mv2-modal-no-cover-header { padding: 20px 16px 16px; }
  .mv2-modal-no-cover-date { font-size: 16px; }
  .mv2-modal-no-cover-time { font-size: 13px; }
  .mv2-modal-body { padding: 16px 16px 8px; }
  .mv2-modal-title { font-size: 22px; }
  .mv2-modal-rsvp-sticky { padding: 12px 16px; }
}

/* =========================================================
   Series name tag (event card + modal)
   ========================================================= */
.mv2-tag-series-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--mv2-text-muted);
}
.mv2-tag-series-name i { font-size: 13px; }

/* =========================================================
   Facilitated by line (modal)
   ========================================================= */
.mv2-modal-facilitated-by {
  font-size: 14px;
  color: var(--mv2-text-muted);
  margin: 0 0 16px;
}
.mv2-modal-facilitated-by strong { color: var(--mv2-text); }

/* =========================================================
   Join Zoom primary CTA (inside modal body)
   ========================================================= */
.mv2-btn-join-zoom-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  border-radius: 12px;
  background: #16a34a;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  margin: 0 0 20px;
  transition: background 0.15s;
}
.mv2-btn-join-zoom-body:hover { background: #15803d; color: #fff; }

.mv2-btn-add-to-calendar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 10px 16px;
  border-radius: 50px;
  border: 1.5px solid var(--mv2-border);
  background: var(--mv2-surface);
  color: var(--mv2-text-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.mv2-btn-add-to-calendar:hover {
  background: var(--mv2-gold-light);
  border-color: var(--mv2-gold);
  color: var(--mv2-text);
}

/* Membership subscribe checkout embed */
.mv2-membership-checkout-card {
  text-align: center;
}
.mv2-membership-checkout-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--mv2-text);
  margin: 0 0 4px;
}
.mv2-membership-checkout-subtitle {
  font-size: 13px;
  color: var(--mv2-text-muted);
  margin: 0 0 16px;
}
.mv2-membership-checkout-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--mv2-text-muted);
  font-size: 14px;
}
.mv2-membership-checkout-spinner i {
  animation: mv2-spin 1s linear infinite;
}
@keyframes mv2-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* =========================================================
   Course library / player — new components for the gated
   video course feature (courses#index/show, course_episodes#show).
   Reuses mv2-* tokens; adds only what didn't already exist
   (a card layout with a progress bar, and a locked state).
   ========================================================= */
.mv2-course-card {
  background: var(--mv2-surface);
  border-radius: var(--mv2-radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(31 27 22 / 0.04), 0 4px 16px rgb(31 27 22 / 0.04);
  position: relative;
  margin-bottom: 20px;
}
.mv2-course-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, #D3BC9B 0%, #ECE1CC 50%, #D3BC9B 100%);
}
.mv2-course-body { padding: 20px 22px 22px; }
.mv2-course-name { font-size: 19px; font-weight: 700; margin: 0 0 6px; color: var(--mv2-text); }
.mv2-course-name-locked { font-size: 15px; font-weight: 500; color: var(--mv2-text-muted); }
.mv2-course-desc {
  font-size: 13.5px; color: var(--mv2-text-muted); line-height: 1.55; margin: 0 0 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Full, untruncated description on the episode show page — deliberately NOT
   .mv2-course-desc, whose 2-line clamp exists for the compact course-card
   preview (courses/index.html.erb) and was silently chopping the real
   episode description down to "…" on the actual detail page too, since both
   used to share the one class. Trix's own default typography (headings,
   lists, links — see actiontext.css's `= require trix`) applies inside
   .trix-content for free. */
.mv2-episode-desc {
  font-size: 13.5px; color: var(--mv2-text-muted); line-height: 1.6; margin: 0 0 14px;
}
.mv2-episode-desc p:last-child { margin-bottom: 0; }
.mv2-course-progress-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mv2-course-progress-track { flex: 1; height: 6px; border-radius: 3px; background: var(--mv2-gold-light); overflow: hidden; }
.mv2-course-progress-fill { height: 100%; border-radius: 3px; background: var(--mv2-gold-btn); }
.mv2-course-progress-text { font-size: 12px; color: var(--mv2-text-muted); font-weight: 600; white-space: nowrap; }
.mv2-course-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* Shown only when the course has no cover image uploaded yet — a calm
   branded placeholder (icon + optional caption on a flat tint), not a
   literal "course cover" label standing in for real artwork. */
.mv2-course-card-cover {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--mv2-gold-light); color: var(--mv2-text-gold); font-size: 12.5px; font-weight: 600;
}
.mv2-course-card-cover i { font-size: 34px; color: var(--mv2-gold-btn); }
/* A published course this member doesn't have access to yet — a desaturated
   version of the same placeholder rather than a second, different look. */
.mv2-course-card-cover.muted { background: var(--mv2-border); }
.mv2-course-card-cover.muted i { color: #8a8368; }

/* Per-kind resource-folder cover gradients — same palette as the admin
   side's .rf-cover-* (admin_events.css), member-side class names since
   this stylesheet is separate. Used wherever a folder has no cover_image
   uploaded: the library grid card (resource_folders/index.html.erb) and
   the folder detail hero (resource_folders/show.html.erb) — matching the
   closer-member-resources.html mockup's .c-video/.c-audio/.c-journal/
   .c-read treatment. resource_kind_cover_class_mv2(folder.dominant_kind)
   picks the class. */
.mv2-rescover-video, .mv2-rescover-audio, .mv2-rescover-doc, .mv2-rescover-image, .mv2-rescover-text, .mv2-rescover-default {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: #fff; font-size: 12.5px; font-weight: 600;
}
.mv2-rescover-video, .mv2-rescover-video i { color: #fff; }
.mv2-rescover-video  { background: linear-gradient(135deg, #2E3A3A, #5C6B63 55%, #A38F6F); }
.mv2-rescover-audio  { background: linear-gradient(135deg, #7B8F86, #B9C6B4 55%, #E7DDC6); color: #2E3A3A; }
.mv2-rescover-text   { background: linear-gradient(135deg, #B7936A, #D9BD97 55%, #F2E6D2); color: #4A3B2A; }
.mv2-rescover-doc    { background: linear-gradient(135deg, #5A4A3E, #8B7362 55%, #CDB7A0); }
.mv2-rescover-image  { background: linear-gradient(135deg, #4A5A6A, #7C93A3 55%, #C7D3DA); }
.mv2-rescover-default{ background: var(--mv2-gold-light); color: var(--mv2-text-gold); }
.mv2-rescover-video i, .mv2-rescover-doc i, .mv2-rescover-image i { color: rgba(255,255,255,0.92); }
.mv2-rescover-audio i { color: rgba(46,58,58,0.85); }
.mv2-rescover-text i { color: rgba(74,59,42,0.85); }
.mv2-rescover-video i, .mv2-rescover-audio i, .mv2-rescover-doc i, .mv2-rescover-image i, .mv2-rescover-text i { font-size: 34px; }
/* Locked (no access) — desaturate the gradient the same way the real
   cover_image path already does, rather than a second visual language. */
.mv2-rescover-video.muted, .mv2-rescover-audio.muted, .mv2-rescover-doc.muted,
.mv2-rescover-image.muted, .mv2-rescover-text.muted { filter: grayscale(45%) opacity(0.8); }

/* Larger hero variant for the folder detail page (mockup's .detail-head
   cover) — same gradients, just sized for the wider two-column header
   instead of a grid card. */
.mv2-rescover-hero { border-radius: var(--mv2-radius); aspect-ratio: 16/10; }
.mv2-rescover-hero i { font-size: 56px; }

/* Folder detail page header — cover (or gradient fallback) beside the pill
   row/title/description, matching closer-member-resources.html's
   .detail-head. Course#show uses a different, full-width-banner pattern
   (mv2-course-cover) instead — resources deliberately follows the mockup
   here rather than Course's own shape. */
.mv2-resource-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 24px;
  margin-bottom: 18px;
}
.mv2-resource-detail-head img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: var(--mv2-radius-sm);
  display: block;
}
/* Bug fix: this used to share the rule above with `display: block`, which
   clobbered .mv2-rescover-video/-audio/etc's own `display: flex` (their
   icon-centering) because this two-class selector wins on specificity —
   that's why the fallback icon was rendering pinned top-left instead of
   centered in the hero box. Kept separate now so the aspect-ratio/sizing
   here doesn't fight the centering owned by the cover-kind classes. */
.mv2-resource-detail-head .mv2-rescover-hero {
  width: 100%;
  aspect-ratio: 16/10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mv2-resource-pillrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.mv2-resource-pillrow .mv2-tag-outline {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 600;
  padding: 4px 12px; border-radius: 999px; border: 1px solid var(--mv2-border); color: var(--mv2-text-muted);
}
@media (max-width: 720px) {
  .mv2-resource-detail-head { grid-template-columns: 1fr; }
}

/* Library-grid cover overlays — item-count badge (bottom-left) and a lock
   badge (top-right) on a locked folder's cover, matching
   closer-member-resources.html's .badge/.lock on .cover. Sits on top of
   either a real cover_image or an .mv2-rescover-* gradient fallback, so the
   card needs position:relative (added on .mv2-course-card use here) and the
   cover wrapper needs position:relative too. */
.mv2-rescover-wrap { position: relative; }
.mv2-rescover-badge {
  position: absolute; left: 14px; bottom: 12px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.92); color: var(--mv2-text);
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 700;
}
.mv2-rescover-lock {
  position: absolute; right: 14px; top: 12px; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(27,27,27,0.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px;
}

/* Folder card footer — pill (access level) on the left, "Open folder" /
   "Renew to unlock" link on the right, same row (mockup's .folder-foot),
   replacing a plain single link. */
.mv2-course-footer .mv2-access-pill { margin: 0; }
.mv2-course-footer .mv2-link-arrow {
  font-weight: 700; font-size: 13.5px; color: var(--mv2-text-gold); white-space: nowrap;
}
.mv2-course-card.locked .mv2-course-footer .mv2-link-arrow { color: #B3392E; }

/* Expandable locked resource item — same <details> shell as an unlocked
   item, opens to a plain-language "renew to unlock" message
   (closer-member-resources.html's .locked-body) instead of being
   inert/unclickable, so an expired member can see exactly what they're
   missing rather than a dead row. */
.mv2-resource-item.locked > summary { cursor: pointer; opacity: 1; }
.mv2-resource-item.locked > summary:hover { background: var(--mv2-gold-light); }
.mv2-resource-item-body .mv2-locked-body {
  display: flex; align-items: center; gap: 14px;
  background: #F7F7F7; border: 1px solid #E6E6E6; border-radius: 12px;
  padding: 14px 18px; color: var(--mv2-text-muted); font-size: 13px;
}
.mv2-resource-item-body .mv2-locked-body i { font-size: 16px; color: #9A9A9A; flex-shrink: 0; }

/* Resource-folder library grid — closer-member-resources.html's .folders is
   a real multi-column grid (repeat(auto-fit, minmax(...))), not the single
   full-width stacked list Course's index page uses (.mv2-feed's default
   flow) — resources gets its own wrapper so folder cards sit side by side
   like the mockup instead of one per row. */
.mv2-resource-folders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 6px;
}
.mv2-resource-folders-grid .mv2-course-card {
  margin-bottom: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mv2-resource-folders-grid .mv2-course-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(120, 90, 50, 0.10);
}
/* Cover scales with the card's own width (mockup: aspect-ratio:16/8) instead
   of a fixed pixel height that only looked right at full-bleed width. */
.mv2-resource-folders-grid .mv2-rescover-wrap { aspect-ratio: 16 / 8; }
.mv2-resource-folders-grid .mv2-rescover-wrap img,
.mv2-resource-folders-grid .mv2-rescover-wrap > div:first-child {
  width: 100%; height: 100%;
}
@media (max-width: 640px) {
  .mv2-resource-folders-grid { grid-template-columns: 1fr; }
}

/* "1 episode free" upsell badge on a locked course's teaser card — a
   different color from mv2-tag-series ("Included with membership") so the
   two states read as clearly distinct at a glance. */
.mv2-tag-free {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px; border-radius: 20px;
  background: #E4ECFB; color: #2952A3; margin-bottom: 10px;
}
.mv2-upgrade-note {
  font-size: 12.5px; color: var(--mv2-text-muted); font-weight: 600; text-decoration: none;
}
.mv2-upgrade-note:hover { color: var(--mv2-text-gold); }

.mv2-episode-list-item {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 13.5px;
  border-top: 1px solid var(--mv2-border); text-decoration: none; color: var(--mv2-text);
}
.mv2-episode-list-item:first-child { border-top: none; }
.mv2-episode-list-item:hover { background: var(--mv2-gold-light); }
.mv2-episode-list-item.active { background: var(--mv2-gold-light); }
/* A locked episode in this list is a <div>, not a link — see
   courses/show.html.erb and course_episodes/show.html.erb, where only
   free_preview or already-accessible episodes render as real link_to's.
   This is the "can't click it" half; the lock icon itself is
   .mv2-lock-note below. */
.mv2-episode-list-item.locked { cursor: not-allowed; opacity: 0.55; }
.mv2-episode-list-item.locked:hover { background: none; }
.mv2-lock-note { font-size: 12px; color: var(--mv2-text-muted); flex-shrink: 0; }
.mv2-episode-num {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
  background: var(--mv2-gold-light); color: var(--mv2-text-muted);
}
.mv2-episode-list-item.active .mv2-episode-num { background: var(--mv2-gold-btn); color: #fff; }
.mv2-episode-num.done { background: #dcfce7; color: #16a34a; }
.mv2-episode-title { flex: 1; font-weight: 500; }
.mv2-episode-list-item.active .mv2-episode-title { font-weight: 700; color: var(--mv2-text-gold); }
.mv2-episode-duration { font-size: 12px; color: var(--mv2-text-muted); flex-shrink: 0; }

.mv2-video-wrap {
  aspect-ratio: 16/9; border-radius: var(--mv2-radius); overflow: hidden; background: #000;
  position: relative;
}
.mv2-video-wrap video { width: 100%; height: 100%; display: block; }

/* Custom "at rest" play button — shown until the member actually starts
   playback, then removed for good (see hls_player_controller.js#play) so
   the browser's own <video controls> can take over for scrubbing/volume.
   Covers the whole player so the native control bar doesn't peek out from
   underneath and look like a second, competing set of controls. */
.mv2-video-play-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  cursor: pointer; background: rgb(0 0 0 / 0.15);
}
.mv2-video-play-btn {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgb(0 0 0 / 0.45); border: 2px solid rgb(255 255 255 / 0.85);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 24px; padding-left: 3px; /* optical centering for the play glyph */
  transition: transform 0.15s ease, background 0.15s ease;
}
.mv2-video-play-overlay:hover .mv2-video-play-btn { background: rgb(0 0 0 / 0.6); transform: scale(1.06); }

/* Traceability watermark — see the comment in course_episodes/show.html.erb
   for why this exists alongside (not instead of) the real HLS/signed-URL
   protection. pointer-events: none so it never intercepts clicks meant for
   the native <video> controls underneath it. */
.mv2-video-watermark {
  position: absolute; inset: 0; pointer-events: none;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  transform: rotate(-18deg) scale(1.3);
}
.mv2-video-watermark span {
  align-self: center; justify-self: center; white-space: nowrap;
  font-size: 11px; color: rgb(255 255 255 / 0.16);
}

.mv2-exercise-note {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 14px 16px;
  background: var(--mv2-surface); border: 1px solid var(--mv2-border); border-radius: 12px; font-size: 13.5px;
}
.mv2-exercise-note b { display: block; margin-bottom: 2px; }

.mv2-locked-card {
  background: var(--mv2-surface); border: 1px solid var(--mv2-border); border-radius: var(--mv2-radius);
  padding: 48px 32px; text-align: center;
}

/* Course detail page — cover banner + sidebar "Up next" card (see the agreed
   prototype's cover-big / member-col-side blocks in
   docs/course_feature_prototype.html). Reuses mv2-profile-card as the sidebar
   card shell, same as the dashboard sidebar's profile/connections cards. */
.mv2-course-cover {
  height: 170px; border-radius: var(--mv2-radius); margin: 14px 0 20px; overflow: hidden;
  background: var(--mv2-gold-light);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--mv2-text-gold); font-size: 13px; font-weight: 600;
}
.mv2-course-cover i { font-size: 38px; color: var(--mv2-gold-btn); }
.mv2-upnext-eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--mv2-text-muted); font-weight: 700; margin-bottom: 12px;
}
/* Sidebar can list more than one upcoming episode (courses#index) or just
   the single next one (courses#show) — margin only applies between rows,
   so the single-row case is unaffected. */
.mv2-upnext-row { display: flex; align-items: center; gap: 12px; }
.mv2-upnext-row + .mv2-upnext-row { margin-top: 12px; }
.mv2-upnext-row .mv2-episode-num { width: 36px; height: 36px; font-size: 14px; flex-shrink: 0; }
.mv2-upnext-title { font-size: 13.5px; font-weight: 700; color: var(--mv2-text); }
.mv2-upnext-meta { font-size: 12px; color: var(--mv2-text-muted); margin-top: 2px; }
.mv2-upnext-card .mv2-btn-gold { width: 100%; justify-content: center; margin-top: 14px; }
.mv2-locked-icon { font-size: 32px; margin-bottom: 12px; }
.mv2-locked-title { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: var(--mv2-text); }
.mv2-locked-body { font-size: 14px; color: var(--mv2-text-muted); margin: 0 0 20px; }

/* =========================================================
   Resource library (resource_folders#index/show) — member-facing.
   Reuses course-library tokens/classes above; adds only the pieces that
   don't map onto them (access pills, expandable item rows, lock/free
   banners) — see member_resources_plan.md.
   ========================================================= */
.mv2-access-pill {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px; border-radius: 20px;
}
.mv2-access-pill.free { background: #DDF1E4; color: #2F7D4B; }
.mv2-access-pill.included { background: var(--mv2-gold-light); color: var(--mv2-text-gold); }
.mv2-access-pill.locked { background: #EEEEEE; color: #5C6370; }

/* Flex row (text left, button right) — matches closer-member-resources.html's
   .notice, not a stacked block. .mv2-btn-gold defaults to display:block/
   full-width (it's meant for a sidebar card), so it's overridden back to an
   inline pill button here specifically. */
.mv2-resource-notice {
  border-radius: var(--mv2-radius); padding: 18px 22px; margin-bottom: 18px; font-size: 13.5px; line-height: 1.55;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.mv2-resource-notice.tan { background: var(--mv2-gold-light); color: var(--mv2-text-gold); }
.mv2-resource-notice.red { background: #F8DDD9; color: #B3392E; }
.mv2-resource-notice strong { display: block; font-weight: 700; margin-bottom: 3px; color: inherit; }
.mv2-resource-notice .mv2-btn-gold {
  display: inline-block; width: auto; flex-shrink: 0; margin-top: 0;
  background: var(--mv2-text-brown, #8A6A45); padding: 12px 24px;
}
.mv2-resource-notice.red .mv2-btn-gold { background: #8A6A45; }
@media (max-width: 640px) {
  .mv2-resource-notice { flex-direction: column; align-items: flex-start; }
}

/* "In this folder" header above the item list — closer-member-resources.html's
   .items-head (title + kind summary), sitting right on top of the first
   item row rather than the list starting cold with no heading. */
.mv2-items-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; border-bottom: 1px solid var(--mv2-border);
}
.mv2-items-head h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 19px; margin: 0; color: var(--mv2-text); }
.mv2-items-head .mv2-items-head-meta { font-size: 13px; color: var(--mv2-text-muted); }

.mv2-resource-item {
  border-top: 1px solid var(--mv2-border);
}
.mv2-resource-item:first-child { border-top: none; }
.mv2-resource-item > summary {
  display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 22px;
  padding: 20px 24px; font-size: 14.5px;
  cursor: pointer; list-style: none; color: var(--mv2-text);
}
.mv2-resource-item > summary::-webkit-details-marker { display: none; }
.mv2-resource-item > summary:hover { background: var(--mv2-resource-row-active); }
.mv2-resource-item[open] > summary { background: var(--mv2-resource-row-active); }
.mv2-resource-item.locked > summary { cursor: pointer; opacity: 1; }
.mv2-resource-item.locked > summary:hover { background: var(--mv2-gold-light); }
.mv2-resource-item-icon {
  width: 60px; height: 60px; border-radius: 16px; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; font-size: 22px;
  background: var(--mv2-gold-light); color: var(--mv2-text-gold);
}
.mv2-resource-item.locked .mv2-resource-item-icon { background: #F1F1F1; color: #9A9A9A; }
.mv2-resource-item-main { min-width: 0; display: block; }
.mv2-resource-item-title { font-weight: 700; font-size: 16px; display: block; }
.mv2-resource-item.locked .mv2-resource-item-title { color: #4E4E4E; }
.mv2-resource-item-meta { font-size: 13px; color: var(--mv2-text-muted); margin-top: 4px; display: block; }
.mv2-resource-item-meta .mv2-meta-dot::before { content: "\00b7"; margin: 0 8px; color: var(--mv2-text-light); }
.mv2-resource-item-action { font-size: 13.5px; font-weight: 700; color: var(--mv2-text); flex-shrink: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.mv2-resource-item.locked .mv2-resource-item-action { color: var(--mv2-text-light); font-weight: 600; }
.mv2-resource-item-body { padding: 4px 24px 24px 106px; font-size: 13.5px; color: var(--mv2-text); }
.mv2-resource-item-body .mv2-player-placeholder,
.mv2-resource-item-body .mv2-audio-placeholder {
  background: #1F2430; border-radius: 10px; color: #fff; display: flex; align-items: center;
  justify-content: center; height: 160px; font-size: 28px; margin-bottom: 10px;
}
.mv2-resource-item-body .mv2-audio-placeholder { background: var(--mv2-gold-light); color: var(--mv2-text-gold); height: 64px; }
.mv2-resource-item-body img { max-width: 100%; border-radius: 10px; }
.mv2-resource-item-body .trix-content :last-child { margin-bottom: 0; }

/* Doc item ("September prompt pack (printable)" mockup card) — a fake-page
   thumbnail (7 flat bars, no real preview render) beside a stacked pair of
   actions: a filled gold "Open in viewer" pill (reuses .mv2-btn-gold, which
   defaults to display:block for sidebar buttons — overridden to
   inline-flex here the same way .mv2-resource-notice already does) and a
   plain-text "Download ___" link with no border/background, matching the
   mockup's .btn-ghost. */
.mv2-doc-preview { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.mv2-doc-thumb {
  width: 110px; height: 148px; border-radius: 10px; background: #fff; flex-shrink: 0;
  border: 1px solid var(--mv2-border); box-shadow: 0 6px 18px rgba(120, 90, 50, 0.12);
  padding: 14px; display: flex; flex-direction: column; gap: 7px;
}
.mv2-doc-thumb span { display: block; height: 6px; border-radius: 4px; background: var(--mv2-gold-light); }
.mv2-doc-thumb span:first-child { height: 10px; width: 70%; background: var(--mv2-border); }
.mv2-doc-thumb span:nth-child(4) { width: 80%; }
.mv2-doc-thumb span:nth-child(7) { width: 55%; }
.mv2-doc-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.mv2-doc-actions .mv2-btn-gold { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 13px 22px; }
.mv2-doc-actions .mv2-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px; background: none; border: none;
  padding: 4px 2px; color: var(--mv2-text); font-weight: 700; font-size: 14px;
  text-decoration: none; cursor: pointer;
}
.mv2-doc-actions .mv2-btn-ghost:hover { color: var(--mv2-text-gold); }

/* Admin-preview access toggle (resource_folders/_mock_profile_card.html.erb)
   — a two-way segmented control ("No membership" / "Has membership") so an
   admin previewing a folder with no real Member record can see both the
   locked-teaser state and the fully unlocked state (and actually play/open
   items in the latter), instead of always being stuck on whichever
   ResourceFolder#accessible_to? would compute for a null member (always
   locked). */
.mv2-preview-toggle { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--mv2-border); }
.mv2-preview-toggle-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--mv2-text-light); margin: 0 0 8px; }
.mv2-preview-toggle-row { display: flex; background: var(--mv2-bg); border: 1px solid var(--mv2-border); border-radius: 50px; padding: 3px; gap: 3px; }
.mv2-preview-toggle-btn {
  flex: 1; text-align: center; padding: 8px 10px; border-radius: 50px; font-size: 12.5px; font-weight: 700;
  color: var(--mv2-text-muted); text-decoration: none; transition: background 0.15s, color 0.15s;
}
.mv2-preview-toggle-btn:hover { color: var(--mv2-text); }
.mv2-preview-toggle-btn.active { background: var(--mv2-gold-btn); color: #fff; }

/* Text/prompt item body — a soft cream card around the journaling prompt
   text, matching closer-member-resources.html's .prompt (cream box, not
   plain inline paragraphs) rather than the bare .trix-content used
   elsewhere for descriptions. Font sizes scaled down from the mockup's
   full-page 20/21px to fit this compact accordion row. */
.mv2-resource-item-body .mv2-prompt-box {
  max-width: 820px;
  background: var(--mv2-bg);
  border: 1px solid var(--mv2-border);
  border-radius: 18px;
  padding: 22px 24px;
}
.mv2-resource-item-body .mv2-prompt-box p { font-size: 14.5px; line-height: 1.65; margin: 0 0 12px; color: var(--mv2-text); }
.mv2-resource-item-body .mv2-prompt-box :last-child { margin-bottom: 0; }
.mv2-resource-item-body .mv2-prompt-box ol,
.mv2-resource-item-body .mv2-prompt-box ul { margin: 0; padding-left: 22px; font-size: 14.5px; line-height: 1.65; }

/* ── Welcome card on the member home page (Members::WelcomeExperience) ── */
.mv2-welcome {
  background: var(--mv2-gold-light);
  border: 1px solid var(--mv2-gold);
  border-radius: var(--mv2-radius);
  padding: 32px 36px;
  margin-bottom: 32px;
}
.mv2-welcome-title {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--mv2-text);
  margin: 0 0 14px;
}
.mv2-welcome p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--mv2-text-gold);
  margin: 0 0 12px;
}
.mv2-welcome p:last-child { margin-bottom: 0; }
.mv2-welcome strong { color: var(--mv2-text); font-weight: 600; }
.mv2-welcome-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 22px;
}
.mv2-welcome-actions .mv2-btn-gold { padding: 12px 24px; }
.mv2-welcome-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--mv2-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mv2-welcome-link:hover { color: var(--mv2-text); }

.mv2-welcome-optout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--mv2-gold);
  font-size: 14px;
  color: var(--mv2-text-gold);
}
.mv2-welcome-optout span { flex: 1 1 320px; }
.mv2-welcome-optout-btn { padding: 8px 18px; font-size: 13px; }

.mv2-welcome-ladder .mv2-welcome-rung {
  padding: 18px 0;
  border-top: 1px solid var(--mv2-gold);
}
.mv2-welcome-ladder .mv2-welcome-rung:last-child { padding-bottom: 0; }
.mv2-welcome-rung-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--mv2-text);
  margin: 0 0 6px;
}

.mv2-welcome-note {
  background: var(--mv2-gold-light);
  border: 1px solid var(--mv2-gold);
  border-radius: var(--mv2-radius-sm);
  padding: 12px 16px;
  margin-bottom: 28px;
  font-size: 15px;
  color: var(--mv2-text-gold);
}
.mv2-welcome-note strong { color: var(--mv2-text); font-weight: 600; }

@media (max-width: 760px) {
  .mv2-welcome { padding: 24px; }
}