/* ================================================================
   KMC UX IMPROVEMENTS — additive layer on top of app.css
   Drop into /css/ and add <link rel="stylesheet" href="css/ux-improvements.css"/>
   AFTER the app.css link in index.html
   ================================================================ */

/* ── 1. MOBILE BOTTOM NAV — replaces awkward FAB toggle ───────── */
/* Primary navigation for mobile users (men on phones) */
@media (max-width: 900px) {
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 64px;
    background: rgba(13, 16, 32, 0.97);
    border-top: 1px solid rgba(201, 168, 76, 0.15);
    backdrop-filter: blur(16px);
    z-index: 250;
    padding: 0 0.5rem;
    justify-content: space-around;
    align-items: center;
  }
  .mbn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    color: rgba(240, 232, 213, 0.35);
    transition: color 0.2s;
    flex: 1;
    min-width: 0;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
  }
  .mbn-item.active {
    color: var(--gold);
  }
  .mbn-item:active {
    background: rgba(201, 168, 76, 0.08);
  }
  .mbn-icon {
    font-size: 1.2rem;
    line-height: 1;
  }
  .mbn-label {
    font-size: 0.48rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 56px;
    text-align: center;
  }
  /* Push content above bottom nav */
  .content {
    padding-bottom: 5rem !important;
  }
  /* Hide the old FAB toggle */
  .mobile-toggle {
    display: none !important;
  }
}
@media (min-width: 901px) {
  .mobile-bottom-nav { display: none; }
}

/* ── 2. MILESTONE CARDS — better touch targets & completion state ─ */
.m-card {
  transition: all 0.2s ease;
  border-radius: 4px;
}
/* Completed cards: subtler, not 50% opacity (hard to read on mobile) */
.m-card.completed {
  opacity: 0.72;
  background: rgba(201, 168, 76, 0.04);
  border-color: rgba(201, 168, 76, 0.12) !important;
}
/* Checkbox — bigger touch target on mobile */
.m-check {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.m-check:hover {
  border-color: var(--gold);
  background: var(--gold-dim);
}
.m-card.completed .m-check {
  width: 22px;
  height: 22px;
}
/* Flash complete animation */
@keyframes flashComplete {
  0%   { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
  40%  { box-shadow: 0 0 0 8px rgba(201,168,76,0.18); }
  100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
}
.m-card.flash-complete {
  animation: flashComplete 0.75s ease-out;
}
/* Open button — more prominent */
.m-open-btn {
  padding: 0.3rem 0.8rem;
  font-size: 0.58rem;
}

/* ── 3. AUTH SCREEN — loading state & better feedback ─────────── */
.auth-btn {
  position: relative;
  overflow: hidden;
}
.auth-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  opacity: 0;
  transition: opacity 0.15s;
}
.auth-btn:hover:not(:disabled)::after {
  opacity: 1;
}
.auth-input:focus {
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12);
}

/* ── 4. MODAL — smoother on mobile, better scroll ─────────────── */
.modal {
  border-radius: 6px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6);
}
@media (max-width: 900px) {
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal {
    max-height: 92vh;
    border-radius: 12px 12px 0 0;
    width: 100%;
    max-width: 100%;
    transform: translateY(100%);
  }
  .modal-overlay.open .modal {
    transform: translateY(0);
  }
  .modal-header {
    padding: 1.2rem 1.5rem 1rem;
  }
  .modal-body {
    padding: 1.2rem 1.5rem;
    -webkit-overflow-scrolling: touch;
  }
  .modal-nav {
    padding: 0.8rem 1.2rem 1.2rem;
  }
}

/* ── 5. SCRIPTURE PANEL — breathing room & readability ─────────── */
.scripture-verse {
  font-size: clamp(1.05rem, 2.5vw, 1.35rem);
  line-height: 2;
}
@media (max-width: 600px) {
  .scripture-panel {
    padding: 1.8rem 1.2rem;
  }
}

/* ── 6. REFLECTION TEXTAREAS — feel like a real journal ──────────  */
.reflection-answer {
  width: 100%;
  background: rgba(240,232,213,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(201,168,76,0.2);
  border-radius: 2px 2px 0 0;
  color: var(--ivory);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-style: italic;
  line-height: 1.8;
  padding: 0.8rem 1rem;
  resize: none;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  min-height: 80px;
}
.reflection-answer:focus {
  background: rgba(240,232,213,0.05);
  border-bottom-color: var(--gold);
}
.reflection-answer::placeholder {
  color: rgba(240,232,213,0.2);
  font-style: italic;
}
.reflection-save-status {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(50,170,90,0.7);
  margin-top: 0.25rem;
  min-height: 1em;
}

/* ── 7. NEXT STEP CARD — stronger call-to-action ─────────────── */
.next-step-card {
  border-radius: 4px;
  transition: transform 0.2s ease, border-color 0.2s, box-shadow 0.2s;
}
.next-step-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.ns-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 700;
}
.ns-meta {
  font-size: 0.65rem;
  color: rgba(240,232,213,0.4);
  letter-spacing: 0.1em;
}

/* ── 8. PROGRESS BAR — smoother animation ────────────────────── */
.sp-bar-fill,
.qvh-progress-fill,
.stat-progress-fill,
.kpi-bar-fill,
.kpi-gantt-progress {
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ── 9. TOPBAR — better user name + role display on mobile ───── */
@media (max-width: 600px) {
  .topbar-user-name {
    display: none;
  }
  .filter-btn, .reset-btn {
    display: none;
  }
}

/* ── 10. STAT CARDS — better mobile grid ─────────────────────── */
@media (max-width: 560px) {
  .stats-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem;
  }
  .stat-number {
    font-size: 1.8rem;
  }
}

/* ── 11. DASHBOARD HERO — tighter on mobile ──────────────────── */
@media (max-width: 600px) {
  .dash-hero {
    padding: 2rem 1.5rem;
  }
  .dash-hero h1 {
    font-size: clamp(1.6rem, 8vw, 2.4rem);
  }
}

/* ── 12. PILLAR VIEW HEADERS — less overwhelming on mobile ────── */
@media (max-width: 600px) {
  .quarter-view-header {
    padding: 1.8rem 1.5rem;
  }
  .qvh-title {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }
  .qvh-bg {
    font-size: 10rem;
  }
}

/* ── 13. MILESTONES GRID — single column on small screens ─────── */
@media (max-width: 500px) {
  .milestones-grid {
    grid-template-columns: 1fr;
  }
}

/* ── 14. TOAST — sits above bottom nav on mobile ─────────────── */
@media (max-width: 900px) {
  .toast {
    bottom: 5rem;
  }
}

/* ── 15. FOCUS STYLES — accessibility ────────────────────────── */
button:focus-visible,
.nav-item:focus-visible,
.m-card:focus-visible,
.stat-card:focus-visible {
  outline: 2px solid rgba(201,168,76,0.6);
  outline-offset: 2px;
}

/* ── 16. NAV LOCKED STATE — clearer visual ───────────────────── */
.nav-item.nav-locked {
  opacity: 0.32;
  cursor: not-allowed;
  pointer-events: none;
}
.nav-item.nav-locked::after {
  content: '🔒';
  margin-left: auto;
  font-size: 0.65rem;
}

/* ── 17. SMOOTH PAGE TRANSITIONS ─────────────────────────────── */
.view.active {
  animation: viewFadeIn 0.25s ease;
}
@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 18. SCORECARD LEGEND — wraps cleanly on mobile ──────────── */
@media (max-width: 600px) {
  .scorecard-legend {
    gap: 0.8rem;
    padding: 0.6rem 0.8rem;
  }
  .legend-item {
    font-size: 0.48rem;
  }
}

/* ── 19. MODAL NAVIGATION BUTTONS — bigger on mobile ─────────── */
@media (max-width: 600px) {
  .modal-nav {
    gap: 0.5rem;
  }
  .modal-nav-btn,
  .modal-mark-btn {
    font-size: 0.58rem;
    padding: 0.65rem 0.8rem;
  }
}

/* ── 20. CELEBRATION MODAL — always centered properly ─────────── */
.celebrate-card {
  border-radius: 8px;
}
@media (max-width: 500px) {
  .celebrate-card {
    padding: 2rem 1.5rem;
  }
}

/* ── 21. APP LOADER — centered logo sizing ────────────────────── */
.loader-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.25);
}

/* ── 22. SIDEBAR LOGO — consistent sizing now using /logo.png ──── */
.sidebar-logo img,
.auth-logo img {
  object-fit: contain;
  background: transparent;
}

/* ── 23. KPI SECTION — better spacing on mobile ──────────────── */
@media (max-width: 600px) {
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }
  .kpi-card {
    padding: 1rem;
  }
}

/* ── 24. PILLAR LOCK OVERLAY — clear message ─────────────────── */
.pillar-locked-msg {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.1);
  padding: 0.8rem 1rem;
  font-size: 0.68rem;
  color: rgba(240,232,213,0.3);
  letter-spacing: 0.08em;
  border-radius: 3px;
  margin-bottom: 0.8rem;
}

/* ── 25. REDUCED MOTION SUPPORT ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.15ms !important;
  }
}

/* ── PROGRAM YEAR ACTIVATION BANNER ─────────────────────────── */
.program-year-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--bg-raised);
  border: 1px solid var(--border-gold);
  padding: 1rem 1.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.pyb-eyebrow {
  font-size: 0.52rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
  margin-bottom: 0.3rem;
}
.pyb-date {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ivory);
  line-height: 1.2;
}
.pyb-right {
  font-size: 0.65rem;
  color: var(--ivory-30);
  letter-spacing: 0.08em;
  text-align: right;
}
@media (max-width: 600px) {
  .program-year-banner { flex-direction: column; align-items: flex-start; }
  .pyb-right { text-align: left; }
}

/* ── ADMIN / MENTOR KPI ROW ──────────────────────────────────── */
.admin-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.admin-kpi-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  padding: 1.1rem 1.2rem;
  text-align: center;
  border-radius: 4px;
}
.admin-kpi-card.admin-kpi-alert {
  border-color: rgba(210,55,55,0.2);
}
.admin-kpi-value {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 0.3rem;
}
.admin-kpi-label {
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-30);
  font-weight: 400;
}
@media (max-width: 700px) {
  .admin-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

/* ── EMAIL BUTTON ────────────────────────────────────────────── */
.admin-email-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--border-gold);
  background: var(--gold-dim);
  color: var(--gold-lt);
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.admin-email-btn:hover {
  background: rgba(201,168,76,0.22);
}

/* ── CHECK-IN GRID ───────────────────────────────────────────── */
.checkin-grid-header,
.checkin-grid-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr 1fr;
  gap: 0.5rem;
  align-items: center;
  padding: 0.55rem 0.75rem;
  font-size: 0.65rem;
}
.checkin-grid-header {
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-30);
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.25rem;
}
.checkin-grid-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  margin-bottom: 0.35rem;
  color: var(--ivory-60);
}
.checkin-grid-row:hover {
  border-color: rgba(255,255,255,0.1);
}
@media (max-width: 700px) {
  .checkin-grid-header { display: none; }
  .checkin-grid-row { grid-template-columns: 1fr 1fr; }
}

/* ── PROGRESS MEMBER ROW — email button ─────────────────────── */
.pmr-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ── MENTEE CARD — progress bars ────────────────────────────── */
.mentee-pillars {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* ── EMAILJS SETUP PANEL ─────────────────────────────────────── */
.ejs-setup-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  padding: 1.8rem 2rem;
  max-width: 620px;
}
.ejs-setup-steps {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.8rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.ejs-step {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  font-size: 0.75rem;
  color: var(--ivory-60);
  line-height: 1.6;
}
.ejs-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold-dim);
  border: 1px solid var(--border-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 0.75rem;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 1px;
}
.ejs-link {
  color: var(--gold);
  text-decoration: none;
}
.ejs-link:hover { color: var(--gold-lt); text-decoration: underline; }
.ejs-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
.ejs-field { display: flex; flex-direction: column; gap: 0.3rem; }
.ejs-label {
  font-size: 0.52rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ivory-30);
  font-weight: 400;
}
.ejs-input {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--ivory);
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  padding: 0.55rem 0.8rem;
  outline: none;
  border-radius: 3px;
  transition: border-color 0.2s;
  width: 100%;
}
.ejs-input:focus { border-color: var(--border-gold); }
.ejs-connected {
  font-size: 0.62rem;
  color: #32aa5a;
  padding: 0.5rem 0.75rem;
  background: rgba(50,170,90,0.08);
  border: 1px solid rgba(50,170,90,0.2);
  border-radius: 3px;
  margin-top: 0.8rem;
}
.ejs-disconnected {
  font-size: 0.62rem;
  color: #d2aa23;
  padding: 0.5rem 0.75rem;
  background: rgba(210,170,35,0.08);
  border: 1px solid rgba(210,170,35,0.2);
  border-radius: 3px;
  margin-top: 0.8rem;
}
.ejs-status-row { margin-top: 0.5rem; }
@media (max-width: 600px) {
  .ejs-fields { grid-template-columns: 1fr; }
}

/* ── EMAIL BUTTON ─────────────────────────────────────────────── */
.admin-email-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--border-gold);
  background: var(--gold-dim);
  color: var(--gold-lt);
  border-radius: 3px;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  white-space: nowrap;
  transition: background 0.15s;
  text-decoration: none;
}
.admin-email-btn:hover {
  background: rgba(201,168,76,0.22);
}

/* ── MOBILE RESPONSIVE ADMIN / MENTOR PANELS ─────────────────── */

/* Admin KPI row: 5 cols desktop → 3 cols tablet → 2 cols mobile */
@media (max-width: 900px) {
  .admin-kpi-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .admin-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .admin-kpi-value { font-size: 1.4rem; }
}

/* Admin/Mentor tabs: scroll horizontally on mobile */
.admin-tabs {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
  white-space: nowrap;
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tab { flex-shrink: 0; }

/* Users & Roles table → card layout on mobile */
@media (max-width: 700px) {
  .admin-table thead { display: none; }
  .admin-table,
  .admin-table tbody,
  .admin-table tr,
  .admin-table td { display: block; width: 100%; }
  .admin-table tr {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 0.6rem;
    padding: 0.8rem 1rem;
  }
  .admin-table td {
    padding: 0.2rem 0;
    border: none;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .admin-table td:first-child {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ivory);
    margin-bottom: 0.3rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
  }
  .admin-table td:empty { display: none; }
  /* Label each field */
  .admin-table td:nth-child(2)::before { content: 'Email: '; color: var(--ivory-30); font-size: 0.58rem; letter-spacing: 0.15em; text-transform: uppercase; }
  .admin-table td:nth-child(3)::before { content: 'Role: ';  color: var(--ivory-30); font-size: 0.58rem; letter-spacing: 0.15em; text-transform: uppercase; }
  .admin-table td:nth-child(4)::before { content: 'Mentor: '; color: var(--ivory-30); font-size: 0.58rem; letter-spacing: 0.15em; text-transform: uppercase; }
  .admin-table td:nth-child(5)::before { content: 'Progress: '; color: var(--ivory-30); font-size: 0.58rem; letter-spacing: 0.15em; text-transform: uppercase; }
  .admin-table td:nth-child(6)::before { content: 'Check-In: '; color: var(--ivory-30); font-size: 0.58rem; letter-spacing: 0.15em; text-transform: uppercase; }
  .admin-table td:nth-child(7) { margin-top: 0.4rem; justify-content: flex-end; }
}

/* Check-in grid → card layout on mobile */
@media (max-width: 700px) {
  .checkin-grid-header { display: none; }
  .checkin-grid-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    padding: 0.7rem 0.8rem;
    border-radius: 4px;
  }
  .checkin-grid-row span:first-child { grid-column: 1 / -1; font-size: 0.72rem; color: var(--ivory); }
}

/* Progress member rows → stack on mobile */
@media (max-width: 600px) {
  .pmr-pillars { grid-template-columns: repeat(2, 1fr); }
  .pmr-name { font-size: 0.72rem; }
}

/* Mentee cards → stack pillars 2x2 on mobile */
@media (max-width: 500px) {
  .mentee-pillars { grid-template-columns: repeat(2, 1fr); }
}

/* EmailJS setup fields: single column on mobile */
@media (max-width: 500px) {
  .ejs-fields { grid-template-columns: 1fr; }
  .ejs-setup-card { padding: 1.2rem 1rem; }
}

/* Email composer modal: full screen on mobile */
@media (max-width: 600px) {
  #emailComposerOverlay .modal {
    max-height: 96vh;
    border-radius: 12px 12px 0 0;
  }
  #emailComposerOverlay .modal-body { padding: 1rem; }
}

/* ── MOBILE BOTTOM NAV — role-aware visibility ────────────────── */
/* Base: flex items shown/hidden via JS updateMobileNav() */
/* On desktop these are all hidden anyway */
@media (min-width: 901px) {
  .mobile-bottom-nav { display: none !important; }
}

/* Mentor-only and admin-only bottom nav items
   start hidden — JS reveals them after role check */
.mbn-admin-only  { display: none; }
.mbn-mentor-only { display: none; }

/* ── MEMBER DETAIL VIEW MODAL ────────────────────────────────── */
/* KPI Strip */
.md-kpi-strip {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  margin-bottom: 0;
}
.md-kpi {
  flex: 1;
  text-align: center;
  padding: 0.9rem 0.5rem;
  border-right: 1px solid var(--border);
}
.md-kpi:last-child { border-right: none; }
.md-kpi-val {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ivory);
  line-height: 1;
  margin-bottom: 0.25rem;
}
.md-kpi-lbl {
  font-size: 0.48rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory-30);
}

/* Section headings */
.md-section-head {
  font-size: 0.55rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--ivory-30);
  font-weight: 400;
  margin: 1.5rem 0 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.md-section-sub {
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: none;
  color: var(--ivory-30);
  font-weight: 400;
}

/* Weak dimension alert */
.md-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  background: rgba(210,170,35,0.08);
  border: 1px solid rgba(210,170,35,0.25);
  border-radius: 4px;
  padding: 0.8rem 1rem;
  font-size: 0.72rem;
  color: var(--ivory-60);
  line-height: 1.6;
  margin-bottom: 0.5rem;
}
.md-alert strong { color: #d2aa23; }

/* Pillar progress cards */
.md-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}
.md-pillar-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.8rem;
}
.md-pillar-name {
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
  font-weight: 500;
}
.md-pillar-count {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.md-pillar-bar-bg {
  height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.35rem;
}
.md-pillar-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease;
}
.md-pillar-meta {
  font-size: 0.5rem;
  color: var(--ivory-30);
  letter-spacing: 0.08em;
}

/* Per-dimension bar rows */
.md-dimension-section { display: flex; flex-direction: column; gap: 0.7rem; }
.md-dim-row {
  display: grid;
  grid-template-columns: 28px 130px 1fr 36px 120px;
  align-items: center;
  gap: 0.6rem;
}
.md-dim-icon { font-size: 1rem; text-align: center; }
.md-dim-label { font-size: 0.68rem; color: var(--ivory-60); }
.md-dim-bar-wrap { position: relative; }
.md-dim-bar-bg {
  height: 8px;
  background: rgba(255,255,255,0.07);
  border-radius: 4px;
  overflow: hidden;
}
.md-dim-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}
.md-dim-avg {
  font-family: 'Playfair Display', serif;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: right;
}
.md-dim-spark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 32px;
  overflow: hidden;
}

/* Daily log */
.md-daily-log { display: flex; flex-direction: column; gap: 0.4rem; }
.md-log-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  flex-wrap: wrap;
}
.md-log-date {
  font-size: 0.6rem;
  color: var(--ivory-30);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.md-log-dims {
  display: flex;
  gap: 0.8rem;
  align-items: flex-end;
  flex-wrap: wrap;
}
.md-log-avg {
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
}
.md-log-note {
  grid-column: 1 / -1;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.78rem;
  color: var(--ivory-30);
  line-height: 1.5;
  margin-top: 0.1rem;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .md-kpi-strip { flex-wrap: wrap; }
  .md-kpi { min-width: 33%; border-bottom: 1px solid var(--border); }
  .md-pillars { grid-template-columns: repeat(2, 1fr); }
  .md-dim-row { grid-template-columns: 24px 1fr 32px; }
  .md-dim-spark { display: none; }
  .md-log-row { grid-template-columns: 54px 1fr auto; }
}

/* ══════════════════════════════════════════════════════════════
   COVENANT SCREEN
   ══════════════════════════════════════════════════════════════ */
.covenant-overlay {
  position: fixed;
  inset: 0;
  z-index: 850;
  background: rgba(4, 6, 12, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  backdrop-filter: blur(8px);
}
.covenant-card {
  background: var(--bg-raised);
  border: 1px solid var(--border-gold);
  width: 100%;
  max-width: 660px;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  animation: celebIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.covenant-eyebrow {
  font-size: 0.52rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
  text-align: center;
  padding: 2rem 2rem 0;
}
.covenant-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  text-align: center;
  line-height: 1.1;
  padding: 0.4rem 2rem 0;
  color: var(--ivory);
}
.covenant-title em {
  color: var(--gold);
  font-style: italic;
}
.covenant-verse {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.88rem;
  color: var(--ivory-30);
  text-align: center;
  padding: 0.6rem 2rem 1.2rem;
  border-bottom: 1px solid var(--border-gold);
  line-height: 1.6;
}
.covenant-verse cite {
  display: block;
  font-style: normal;
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.3rem;
}
/* Scrollable covenant text */
.covenant-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 2rem;
  -webkit-overflow-scrolling: touch;
}
.covenant-scroll::-webkit-scrollbar { width: 3px; }
.covenant-scroll::-webkit-scrollbar-thumb { background: var(--border-gold); }
.covenant-text {
  font-size: 0.8rem;
  color: var(--ivory-60);
  line-height: 1.85;
}
.covenant-text p {
  margin-bottom: 1rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  line-height: 1.8;
}
.covenant-text strong {
  color: var(--ivory);
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.covenant-article {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--ivory-60);
}
.covenant-article:last-of-type { border-bottom: none; }
.covenant-article-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  flex-shrink: 0;
  width: 24px;
  padding-top: 2px;
}
/* Signature section */
.covenant-sign-section {
  border-top: 1px solid var(--border-gold);
  padding: 1.4rem 2rem 1.8rem;
  background: rgba(201, 168, 76, 0.03);
}
.covenant-sign-label {
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ivory-30);
  margin-bottom: 0.8rem;
  font-weight: 400;
}
.covenant-sign-row {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 0.3rem;
}
.covenant-name-input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-gold);
  color: var(--ivory);
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-style: italic;
  padding: 0.4rem 0;
  outline: none;
  transition: border-color 0.2s;
}
.covenant-name-input::placeholder {
  color: var(--ivory-30);
  font-style: italic;
}
.covenant-name-input:focus {
  border-bottom-color: var(--gold);
}
.covenant-date {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--ivory-30);
  white-space: nowrap;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}
.covenant-sign-line {
  height: 1px;
  background: rgba(201, 168, 76, 0.15);
  margin-bottom: 0.5rem;
}
.covenant-sign-meta {
  font-size: 0.58rem;
  color: var(--ivory-30);
  margin-bottom: 1rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  line-height: 1.6;
}
.covenant-btn {
  width: 100%;
  background: var(--gold);
  color: var(--bg);
  border: none;
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 1rem;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.2s;
}
.covenant-btn:hover:not(:disabled) {
  background: var(--gold-lt);
  transform: translateY(-1px);
}
.covenant-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
@media (max-width: 600px) {
  .covenant-card { max-height: 98vh; border-radius: 0; }
  .covenant-scroll { padding: 1.2rem 1.2rem; }
  .covenant-sign-section { padding: 1.2rem 1.2rem 1.5rem; }
  .covenant-eyebrow, .covenant-title, .covenant-verse { padding-left: 1.2rem; padding-right: 1.2rem; }
  .covenant-sign-row { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .covenant-date { padding-bottom: 0; }
}

/* ── ACCOUNTABILITY PARTNER ──────────────────────────────────── */
.accountability-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--bg-raised);
  border: 1px solid rgba(111,163,164,0.3);
  padding: 0.9rem 1.4rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.ab-left { min-width: 0; }
.ab-eyebrow {
  font-size: 0.48rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--c2);
  font-weight: 400;
  margin-bottom: 0.2rem;
}
.ab-name {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ivory);
}
.ab-center {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  flex: 1;
}
.ab-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.accountability-prompt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  color: var(--ivory-30);
  margin-bottom: 1rem;
  padding: 0.6rem 0;
}
.ab-link-btn {
  background: none;
  border: none;
  color: var(--gold);
  font-size: 0.68rem;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  text-decoration: underline;
  padding: 0;
}
.ab-link-btn:hover { color: var(--gold-lt); }

/* Accountability partner card in detail view */
.ap-partner-card {
  background: var(--bg-raised);
  border: 1px solid rgba(111,163,164,0.25);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 4px;
}
.ap-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.ap-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ivory);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.ap-meta {
  font-size: 0.62rem;
  color: var(--ivory-30);
  margin-top: 0.2rem;
  letter-spacing: 0.05em;
}
.accountability-connect-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  padding: 1.5rem 1.8rem;
  max-width: 580px;
  border-radius: 4px;
}

@media (max-width: 600px) {
  .accountability-banner { flex-direction: column; align-items: flex-start; }
  .ab-right { width: 100%; justify-content: flex-start; }
}

/* ══════════════════════════════════════════════════════════════
   JOURNEY SUMMARY VIEW
   ══════════════════════════════════════════════════════════════ */
.js-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.js-hero-stat {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  padding: 1.2rem;
  text-align: center;
  border-radius: 4px;
}
.js-hero-stat-val {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ivory);
  margin-bottom: 0.3rem;
}
.js-hero-stat-lbl {
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-30);
}
/* Pillar grid */
.js-pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
}
.js-pillar-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  padding: 1.2rem 1.4rem;
  border-radius: 4px;
  transition: border-color 0.2s;
}
.js-pillar-card.js-pillar-complete {
  border-color: rgba(201,168,76,0.3);
  background: rgba(201,168,76,0.03);
}
.js-pillar-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}
.js-pillar-color-bar {
  width: 3px;
  height: 36px;
  border-radius: 2px;
  flex-shrink: 0;
}
.js-pillar-info { flex: 1; }
.js-pillar-name {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
}
.js-pillar-meta {
  font-size: 0.55rem;
  color: var(--ivory-30);
  letter-spacing: 0.08em;
}
.js-pillar-bar-bg {
  height: 5px;
  background: rgba(255,255,255,0.07);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.js-pillar-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}
.js-pillar-complete-badge {
  font-size: 0.55rem;
  color: #32aa5a;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Heatmap */
.js-heatmap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.2rem;
}
.js-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  gap: 3px;
  margin-bottom: 0.8rem;
}
.js-heatmap-cell {
  aspect-ratio: 1;
  border-radius: 2px;
  cursor: default;
  transition: transform 0.1s;
}
.js-heatmap-cell:hover { transform: scale(1.3); }
.js-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.js-heatmap-lbl {
  font-size: 0.52rem;
  color: var(--ivory-30);
  letter-spacing: 0.1em;
}
/* Milestones list */
.js-milestones-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.js-milestone-group {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1rem;
}
.js-milestone-pillar {
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}
.js-milestone-item {
  font-size: 0.7rem;
  color: var(--ivory-60);
  line-height: 1.7;
  padding: 0.1rem 0;
}

/* ══════════════════════════════════════════════════════════════
   PROGRAM ANALYTICS
   ══════════════════════════════════════════════════════════════ */
.analytics-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.analytics-kpi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 1.2rem;
  text-align: center;
  border-radius: 4px;
}
.analytics-kpi-val {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ivory);
  line-height: 1;
  margin-bottom: 0.3rem;
}
.analytics-kpi-lbl {
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory-30);
}
.analytics-section {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  padding: 1.4rem 1.6rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}
.analytics-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.analytics-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.analytics-row-label {
  font-family: 'Playfair Display', serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ivory);
  width: 90px;
  flex-shrink: 0;
}
.analytics-row-bars { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; }
.analytics-bar-wrap { display: flex; align-items: center; gap: 0.6rem; }
.analytics-bar-label { font-size: 0.52rem; color: var(--ivory-30); width: 64px; flex-shrink: 0; }
.analytics-bar-bg { flex: 1; height: 8px; background: rgba(255,255,255,0.07); border-radius: 4px; overflow: hidden; }
.analytics-bar-fill { height: 100%; border-radius: 4px; transition: width 0.8s cubic-bezier(0.4,0,0.2,1); }
.analytics-bar-pct { font-size: 0.58rem; color: var(--ivory-30); width: 64px; text-align: right; flex-shrink: 0; }
/* Status rows */
.analytics-status-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
  font-size: 0.68rem;
}
.analytics-status-row:last-child { margin-bottom: 0; }
.analytics-status-label { width: 90px; flex-shrink: 0; color: var(--ivory-60); }
.analytics-status-count { font-size: 0.62rem; color: var(--ivory-30); white-space: nowrap; }
/* Retention */
.analytics-retention-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.75rem; }
.analytics-retention-card { background: var(--bg-card); border: 1px solid var(--border); padding: 1rem; text-align: center; border-radius: 4px; }
.analytics-retention-val { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 700; line-height: 1; margin-bottom: 0.3rem; }
.analytics-retention-lbl { font-size: 0.52rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ivory-30); }

/* Mobile adjustments */
@media (max-width: 700px) {
  .js-hero-stats { grid-template-columns: repeat(2,1fr); }
  .js-pillar-grid { grid-template-columns: 1fr; }
  .js-heatmap-grid { grid-template-columns: repeat(15,1fr); }
  .js-milestones-list { grid-template-columns: 1fr; }
  .analytics-kpi-row { grid-template-columns: repeat(2,1fr); }
  .analytics-retention-row { grid-template-columns: 1fr; }
  .analytics-row { flex-direction: column; align-items: flex-start; }
  .analytics-row-label { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   Q & A HUB
   ══════════════════════════════════════════════════════════════ */
.qa-role-divider {
  text-align: center;
  padding: 1.5rem 0 0.5rem;
  margin-bottom: 0.5rem;
}
.qa-role-label {
  font-size: 0.55rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
  padding: 0.3rem 1rem;
  border: 1px solid var(--border-gold);
  background: var(--gold-dim);
  border-radius: 20px;
}
.qa-section {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  margin-bottom: 1rem;
  border-radius: 4px;
  overflow: hidden;
}
.qa-section-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}
.qa-section-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}
.qa-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ivory);
}
.qa-item {
  padding: 1rem 1.5rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.qa-item:last-child { border-bottom: none; }
.qa-item:hover { background: var(--bg-hover); }
.qa-item.open { background: rgba(201,168,76,0.04); border-left: 3px solid var(--gold); }
.qa-q {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  font-family: 'Playfair Display', serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ivory);
  line-height: 1.45;
}
.qa-arrow {
  color: var(--gold);
  flex-shrink: 0;
  font-size: 1.1rem;
  transition: transform 0.2s;
  margin-top: 1px;
}
.qa-item.open .qa-arrow { transform: rotate(90deg); }
.qa-a {
  display: none;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  color: var(--ivory-60);
  line-height: 1.8;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
  font-style: italic;
}
.qa-item.open .qa-a { display: block; }

@media (max-width: 600px) {
  .qa-section-head { padding: 0.9rem 1rem; }
  .qa-item { padding: 0.9rem 1rem; }
  .qa-q { font-size: 0.82rem; }
}

/* ── Pastoral Campus Panel ────────────────────────────────────── */
.pastoral-invite-bar {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  padding: 1.2rem 1.5rem;
  margin-bottom: 0.5rem;
  border-radius: 4px;
}

/* ── CHECKIN HEATMAP ── */
.js-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  gap: 3px;
  margin-bottom: 0.5rem;
}
.js-heatmap-cell {
  aspect-ratio: 1;
  border-radius: 2px;
  min-width: 12px;
  min-height: 12px;
}
.js-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 0.4rem;
}
.js-heatmap-lbl {
  font-size: 0.7rem;
  color: var(--ivory-40, #888);
  margin: 0 2px;
}