/* ===================================================
   Kim Fisher — Member Portal styles
   Matched to the Ageless by Kim app: deep green,
   gold pills, soft glass cards, serif headings.
   Designed for readability: large type, big targets.
   =================================================== */

:root {
  --app-bg-1: #0E3B2C;
  --app-bg-2: #072A1F;
  --app-card: rgba(255, 255, 255, 0.08);
  --app-card-strong: rgba(255, 255, 255, 0.09);
  --app-border: rgba(190, 235, 205, 0.22);
  --app-border-strong: rgba(190, 235, 205, 0.42);
  --app-cream: #FDFAF0;
  --app-text: #F2F6EF;
  --app-muted: #CBDBCC;
  --app-gold: #E8C34A;
  --app-gold-deep: #D4AF37;
  --app-gold-soft: rgba(232, 195, 74, 0.16);
  --app-ink: #14251A;
  --app-link: #A9E8C3;
  --radius-card: 22px;
  --radius-pill: 999px;
}

.portal-body {
  background: radial-gradient(120% 90% at 20% 0%, var(--app-bg-1) 0%, var(--app-bg-2) 100%) fixed;
  background-color: var(--app-bg-2);
  min-height: 100vh;
  font-size: 18px;
  color: var(--app-text);
}

.portal-body h1, .portal-body h2, .portal-body h3,
.portal-body h4, .portal-body h5 {
  color: var(--app-cream);
}

/* styles.css paints p in dark stone for the public site — repaint bright here */
.portal-body p, .portal-body li, .portal-body td {
  color: var(--app-text);
}

/* ---------- Portal nav ---------- */
.portal-nav {
  background: rgba(7, 42, 31, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 0.9rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--app-border);
}
.portal-nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.portal-brand {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.35rem;
  color: var(--app-cream);
}
.portal-brand .accent { color: var(--app-gold); }
.portal-links {
  display: flex;
  gap: 0.4rem;
  list-style: none;
  flex-wrap: wrap;
  align-items: center;
}
.portal-links a {
  color: var(--app-text);
  font-size: 1.02rem;
  padding: 0.55rem 1.05rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
}
.portal-links a:hover, .portal-links a.active {
  background: var(--app-gold-soft);
  color: var(--app-gold);
}
.portal-links a.signout { color: var(--app-muted); font-weight: 400; }

/* ---------- Layout ---------- */
.portal-main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.2rem 1.5rem 5rem;
}
.portal-main.narrow { max-width: var(--max-width-narrow); }

.portal-greeting h1 { font-size: clamp(2rem, 4.5vw, 2.9rem); margin-bottom: 0.4rem; }
.portal-greeting p { color: var(--app-muted); font-size: 1.1rem; margin-bottom: 2rem; }

.portal-section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.45rem;
  margin: 2.2rem 0 1rem;
  color: var(--app-cream);
}

/* ---------- Cards ---------- */
.portal-card {
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.18);
  padding: 1.6rem;
  color: var(--app-text);
}
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.4rem;
}
.course-card {
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.18);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
.course-card:hover {
  border-color: var(--app-border-strong);
  transform: translateY(-3px);
}
.course-card .cc-banner {
  background: linear-gradient(135deg, rgba(232, 195, 74, 0.20), rgba(232, 195, 74, 0.05));
  border-bottom: 1px solid var(--app-border);
  color: var(--app-cream);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.3rem;
  padding: 2rem 1.4rem;
  min-height: 108px;
  display: flex;
  align-items: flex-end;
}
.course-card .cc-body { padding: 1.2rem 1.4rem 1.5rem; flex: 1; display: flex; flex-direction: column; gap: 0.8rem; }
.course-card .cc-meta { color: var(--app-muted); font-size: 0.95rem; }
.course-card .btn-portal { margin-top: auto; }

/* ---------- Buttons ---------- */
.btn-portal {
  display: inline-block;
  background: var(--app-gold);
  color: var(--app-ink);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.85rem 1.7rem;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-align: center;
  transition: var(--transition);
}
.btn-portal:hover { background: var(--app-gold-deep); }
.btn-portal.secondary {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--app-border-strong);
  color: var(--app-cream);
}
.btn-portal.secondary:hover { background: rgba(255, 255, 255, 0.13); }
.btn-portal[disabled] { opacity: 0.55; cursor: wait; }
.btn-portal.small { padding: 0.5rem 1.1rem; font-size: 0.95rem; }

/* ---------- Forms ---------- */
.portal-form { display: flex; flex-direction: column; gap: 1rem; }
.portal-form label { font-weight: 700; color: var(--app-cream); font-size: 1rem; }
.portal-form input, .portal-form textarea, .portal-form select {
  width: 100%;
  padding: 0.9rem 1.1rem;
  font-size: 1.05rem;
  font-family: inherit;
  border: 1px solid var(--app-border-strong);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--app-cream);
}
.portal-form input::placeholder, .portal-form textarea::placeholder { color: var(--app-muted); }
.portal-form select option { background: var(--app-bg-2); color: var(--app-cream); }
.portal-form input:focus, .portal-form textarea:focus, .portal-form select:focus {
  outline: 3px solid rgba(232, 195, 74, 0.35);
  border-color: var(--app-gold);
}
.form-note { color: var(--app-muted); font-size: 0.95rem; }
.form-msg { padding: 0.9rem 1rem; border-radius: 14px; font-size: 1rem; display: none; }
.form-msg.ok { display: block; background: rgba(88, 182, 125, 0.15); color: #BDEBCB; border: 1px solid rgba(88, 182, 125, 0.4); }
.form-msg.err { display: block; background: rgba(225, 90, 90, 0.14); color: #F5C6C6; border: 1px solid rgba(225, 90, 90, 0.4); }

/* ---------- Login ---------- */
.login-wrap {
  max-width: 460px;
  margin: 4rem auto;
  padding: 0 1.25rem;
}
.login-card { padding: 2.4rem 2rem; }
.login-card h1 { font-size: 1.9rem; margin-bottom: 0.4rem; text-align: center; }
.login-card .sub { text-align: center; color: var(--app-muted); margin-bottom: 1.6rem; }
.login-card .btn-portal { width: 100%; }
.login-divider {
  display: flex; align-items: center; gap: 0.8rem;
  color: var(--app-muted); font-size: 0.9rem; margin: 1.2rem 0;
}
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--app-border); }
.login-card a { color: var(--app-link); }

/* ---------- Course player ---------- */
.player-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1.6rem;
  align-items: start;
}
@media (max-width: 900px) { .player-layout { grid-template-columns: 1fr; } }

.player-sidebar {
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
@media (max-width: 900px) { .player-sidebar { position: static; max-height: none; } }

.ps-section > button {
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  border-bottom: 1px solid var(--app-border);
  padding: 0.95rem 1.1rem;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--app-cream);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}
.ps-section > button .chev { transition: var(--transition); color: var(--app-muted); }
.ps-section.open > button .chev { transform: rotate(90deg); }
.ps-lessons { display: none; }
.ps-section.open .ps-lessons { display: block; }
.ps-lessons a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem 0.7rem 1.4rem;
  font-size: 0.97rem;
  color: var(--app-text);
  border-bottom: 1px solid rgba(180, 230, 200, 0.07);
}
.ps-lessons a:hover { background: rgba(232, 195, 74, 0.08); }
.ps-lessons a.active { background: var(--app-gold-soft); color: var(--app-cream); font-weight: 700; }
.ps-lessons a .done-dot {
  width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%;
  border: 1.5px solid var(--app-muted);
}
.ps-lessons a.done .done-dot { background: var(--app-gold); border-color: var(--app-gold); }

.lesson-pane { min-width: 0; }
.lesson-pane .portal-card { padding: 2.2rem clamp(1.4rem, 4vw, 3rem); }
.lesson-title { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: 1.4rem; }
.lesson-content { font-size: 1.1rem; line-height: 1.85; color: var(--app-text); }
.lesson-content p { margin-bottom: 1.1rem; }
.lesson-content img { border-radius: 16px; margin: 1.4rem 0; }
.lesson-content ol, .lesson-content ul { margin: 0 0 1.1rem 1.4rem; }
.lesson-content a { color: var(--app-link); text-decoration: underline; }
.lesson-download a {
  display: inline-block;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--app-border-strong);
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  text-decoration: none !important;
  color: var(--app-cream) !important;
}
.lesson-download a:hover { border-color: var(--app-gold); background: var(--app-gold-soft); }
.video-embed { position: relative; padding-top: 56.25%; margin: 1.4rem 0; border-radius: 16px; overflow: hidden; background: #000; border: 1px solid var(--app-border); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

.lesson-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* ---------- Community ---------- */
.community-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.6rem;
  align-items: start;
}
@media (max-width: 900px) { .community-layout { grid-template-columns: 1fr; } }
.space-list { list-style: none; }
.space-list a {
  display: block;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 1rem;
  color: var(--app-text);
}
.space-list a:hover { background: rgba(232, 195, 74, 0.08); }
.space-list a.active { background: var(--app-gold); color: var(--app-ink); font-weight: 700; }

.post-card { margin-bottom: 1.3rem; }
.post-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.7rem; }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px;
  background: var(--app-gold-soft);
  border: 1px solid var(--app-border-strong);
  color: var(--app-gold);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.1rem; text-transform: uppercase;
}
.post-head .who { font-weight: 700; color: var(--app-cream); }
.post-head .when { color: var(--app-muted); font-size: 0.88rem; }
.post-title { font-size: 1.25rem; margin-bottom: 0.5rem; font-family: 'Playfair Display', serif; }
.post-body { font-size: 1.05rem; line-height: 1.75; overflow-wrap: break-word; color: var(--app-text); }
.post-body img { border-radius: 14px; margin: 0.8rem 0; max-height: 480px; object-fit: contain; }
.post-body a { color: var(--app-link); text-decoration: underline; }
.post-actions { display: flex; gap: 1rem; margin-top: 0.9rem; align-items: center; }
.heart-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-pill);
  padding: 0.4rem 1rem;
  cursor: pointer;
  font-size: 0.98rem;
  color: var(--app-muted);
}
.heart-btn:hover { border-color: var(--app-border-strong); color: var(--app-cream); }
.heart-btn.liked { border-color: rgba(244, 114, 142, 0.6); color: #F8A8BF; background: rgba(244, 114, 142, 0.12); }
.comment-list { margin-top: 1rem; border-top: 1px solid var(--app-border); padding-top: 1rem; display: flex; flex-direction: column; gap: 0.9rem; }
.comment { display: flex; gap: 0.7rem; }
.comment .avatar { width: 34px; height: 34px; flex: 0 0 34px; font-size: 0.9rem; }
.comment .c-body { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--app-border); border-radius: 16px; padding: 0.6rem 0.95rem; font-size: 0.98rem; flex: 1; }
.comment .c-body .who { font-weight: 700; font-size: 0.92rem; color: var(--app-cream); }
.comment-input { display: flex; gap: 0.6rem; margin-top: 1rem; }
.comment-input input { flex: 1; }

.composer textarea { min-height: 110px; resize: vertical; }

/* ---------- Videos ---------- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.4rem;
}
.video-card .video-embed { margin: 0 0 0.8rem; }
.video-card h3 { font-size: 1.1rem; font-family: 'Lato', sans-serif; font-weight: 700; color: var(--app-cream); }
.video-card .vc-meta { color: var(--app-muted); font-size: 0.9rem; }
.pill-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.pill {
  border: 1px solid var(--app-border-strong);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.2rem;
  cursor: pointer;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--app-text);
}
.pill:hover { background: rgba(255, 255, 255, 0.1); }
.pill.active { background: var(--app-gold); color: var(--app-ink); border-color: var(--app-gold); }

/* ---------- Admin ---------- */
.admin-tabs { display: flex; gap: 0.6rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.admin-panel { display: none; }
.admin-panel.active { display: block; }
.member-table { width: 100%; border-collapse: collapse; font-size: 0.98rem; color: var(--app-text); }
.member-table th, .member-table td { text-align: left; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--app-border); }
.member-table th { color: var(--app-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }

/* ---------- Utility ---------- */
.loading { color: var(--app-muted); padding: 2rem 0; text-align: center; font-size: 1.05rem; }
.empty {
  color: var(--app-muted);
  padding: 1.5rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-card);
}

/* Light inline-styled boxes inside posts (e.g. blog "Quick Answer" cards) must
   keep dark text on our dark-green theme — otherwise cream-on-cream vanishes. */
.post-body [style*="background"], .post-body [style*="background"] p,
.post-body [style*="background"] li, .post-body [style*="background"] strong {
  color: #333 !important;
}