@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400&family=DM+Sans:wght@300;400;500;600&display=swap');

/*
 * The Hormone Edit portal refresh
 * Uses the exact type and colour system from hormone-edit.com.
 * Loaded after page-level styles so existing portal behaviour stays intact.
 */

:root {
  --ivory:       #F7F5F0;
  --paper:       #FCFBF8;
  --plum:        #4D2633;
  --mulberry:    #7A3D52;
  /* --rose remains the primary action alias used by the legacy portal. */
  --rose:        #7A3D52;
  --rose-dark:   #4D2633;
  --rose-pale:   #D7ABB9;
  --rose-light:  #EFE1E5;
  --blush:       #EFE1E5;
  /* Legacy sage aliases are remapped so older components stay on-brand. */
  --sage:        #7A3D52;
  --sage-dark:   #4D2633;
  --sage-light:  #EEE7E9;
  --charcoal:    #252321;
  --warm-grey:   #F7F5F0;
  --mid-grey:    #665F5B;
  --light-grey:  #E9E5DE;
  --stone:       #E9E5DE;
  --putty:       #DED8CE;
  --on-dark:     #D5CFCA;
  --on-plum:     #EEE7E9;
  --border-fine: #AAA49B;
  --border-card: #BFB9B0;
  --white:       #FCFBF8;
  --font-heading:'Newsreader', Georgia, serif;
  --font-body:   'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --shadow-sm:   0 1px 2px rgba(37, 35, 33, 0.04);
  --shadow-md:   0 12px 32px rgba(77, 38, 51, 0.08);
  --shadow-lg:   0 24px 70px rgba(77, 38, 51, 0.14);
  --radius:      8px;
  --radius-sm:   7px;
  --radius-lg:   12px;
  --title-card-background:
    radial-gradient(circle at 88% 14%, rgba(215, 171, 185, 0.18), transparent 29%),
    linear-gradient(145deg, #5A2B3B 0%, var(--plum) 68%, #361B25 100%);
  --title-card-radius: 22px;
  --title-card-padding: 38px 42px;
  --title-card-shadow: 0 18px 46px rgba(77, 38, 51, 0.14);
}

html { background: var(--ivory); }

body {
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--font-body);
  letter-spacing: -0.006em;
}

::selection { background: var(--rose-pale); color: var(--plum); }

h1, h2, h3 {
  color: var(--charcoal);
  font-family: var(--font-heading);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

h4 { color: var(--charcoal); }
p { color: var(--mid-grey); }
a { color: var(--mulberry); }
a:hover { color: var(--plum); }

button, input, select, textarea { font-family: var(--font-body); }

/* Replace legacy page-specific font declarations without changing markup. */
[style*="Playfair Display"] { font-family: var(--font-heading) !important; }
[style*="font-family:'Inter'"],
[style*="font-family: 'Inter'"] { font-family: var(--font-body) !important; }

.admin-brand,
.admin-nav-brand-text,
.sidebar-logo-text,
.auth-logo-brand,
.page-header h1,
.bonus-intro h1,
.lesson-hero h2,
.video-empty .ve-title,
.community-title,
.bulk-panel h2,
.week-group-label,
.doc-empty h3,
.results-empty h3,
.timeline-empty h3 {
  font-family: var(--font-heading) !important;
}

/* Keep older page-level component rules from reintroducing retired fonts. */
.calc-card-header h3,
.results-header h3,
.calorie-number,
.deficit-title,
.deficit-stat-value,
.saved-targets-head h3,
.saved-target strong,
.entry-form h3,
.entry-date,
.measurement-val,
.week-tab .week-num,
.video-empty .ve-title,
.content-card h2,
.reflection-card h2 {
  font-family: var(--font-heading) !important;
}

.unit-btn,
.form-group input,
.form-group select,
.goal-btn,
.save-targets-button,
.add-entry-btn,
.submit-btn,
.cancel-btn,
.entry-delete,
.week-tab,
.check-item,
.action-check {
  font-family: var(--font-body) !important;
}

.admin-nav-btn,
.admin-nav-link,
.thread-back-btn,
.conv-search-input,
.bulk-btn,
.msg-input,
.bulk-textarea,
.bulk-send-btn,
.bulk-cancel-btn,
.search-input,
.filter-select,
.tab-btn,
.note-add-area,
.client-msg-input,
.client-msg-send,
.tf-btn,
.export-btn,
.coach-note-area,
.coach-note-save,
.week-review-textarea,
.week-review-save,
.meeting-form input,
.meeting-form textarea,
.admin-doc-btn,
.upload-note-input,
.doc-btn,
.result-btn {
  font-family: var(--font-body) !important;
}

:focus-visible {
  outline: 2px solid var(--mulberry);
  outline-offset: 3px;
}

/* Buttons and controls */
.btn,
.upload-btn,
.result-btn,
.featured-plan-btn,
.add-entry-btn,
.submit-btn,
.save-btn,
.msg-send-btn,
.chat-send-btn,
.bulk-send-btn,
.client-msg-send,
.targets-save,
.donebtn {
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0;
}

.btn-primary,
.upload-btn,
.featured-plan-btn,
.add-entry-btn,
.submit-btn,
.msg-send-btn,
.chat-send-btn,
.bulk-send-btn,
.client-msg-send,
.targets-save {
  background: var(--plum);
  border-color: var(--plum);
  box-shadow: none;
  color: var(--ivory);
}

.btn-primary:hover,
.upload-btn:hover,
.featured-plan-btn:hover,
.add-entry-btn:hover,
.submit-btn:hover,
.msg-send-btn:hover,
.chat-send-btn:hover,
.bulk-send-btn:hover,
.client-msg-send:hover,
.targets-save:hover {
  background: #613143;
  border-color: #613143;
  box-shadow: none;
  color: var(--ivory);
}

.btn-sage { background: var(--mulberry); color: var(--ivory); }
.btn-sage:hover { background: var(--plum); color: var(--ivory); }

.btn-secondary,
.btn-outline,
.result-btn,
.doc-btn-view,
.avatar-upload-btn,
.cancel-btn,
.bulk-cancel-btn {
  background: transparent;
  border-color: var(--putty);
  color: var(--charcoal);
}

.btn-secondary:hover,
.btn-outline:hover,
.result-btn:hover,
.doc-btn-view:hover,
.avatar-upload-btn:hover,
.cancel-btn:hover,
.bulk-cancel-btn:hover {
  background: var(--rose-light);
  border-color: var(--mulberry);
  color: var(--plum);
}

.form-input,
.form-group input,
.form-group select,
.form-textarea,
.search-input,
.filter-select,
.conv-search-input,
.msg-input,
.chat-input,
.bulk-textarea,
.client-msg-input,
.upload-note-input,
.note-add-area,
.targets-grid input,
.field input,
.field textarea,
.plan-notes textarea,
.reflection textarea {
  background: #FFFFFF;
  border-color: var(--putty);
  border-radius: var(--radius-sm);
  color: var(--charcoal);
  font-family: var(--font-body);
}

.form-input:focus,
.form-group input:focus,
.form-group select:focus,
.form-textarea:focus,
.search-input:focus,
.filter-select:focus,
.conv-search-input:focus,
.msg-input:focus,
.chat-input:focus,
.bulk-textarea:focus,
.client-msg-input:focus,
.upload-note-input:focus,
.note-add-area:focus,
.targets-grid input:focus,
.field input:focus,
.field textarea:focus,
.plan-notes textarea:focus,
.reflection textarea:focus {
  border-color: var(--mulberry);
  box-shadow: 0 0 0 3px rgba(122, 61, 82, 0.12);
  outline: none;
}

/* Sign-in, invitation and password screens */
.auth-page { background: var(--paper); }

.auth-left {
  align-items: flex-start;
  background:
    radial-gradient(circle at 14% 12%, rgba(215, 171, 185, 0.22), transparent 28%),
    linear-gradient(150deg, #312E2B 0%, var(--charcoal) 58%, #181715 100%);
  justify-content: center;
  padding: 64px;
}

.auth-left::before,
.auth-left::after { border: 1px solid rgba(215, 171, 185, 0.22); background: transparent; }

.auth-left-content { max-width: 450px; }

.auth-left h2 {
  color: var(--ivory);
  font-size: clamp(3rem, 4.8vw, 4.9rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.97;
  margin-bottom: 28px;
}

.auth-left h2 em { color: var(--ivory); font-weight: 300; }
.auth-left p { color: rgba(247, 245, 240, 0.76); font-weight: 300; }
.auth-features { border-top: 1px solid rgba(247, 245, 240, 0.16); padding-top: 24px; }
.auth-features li { color: rgba(247, 245, 240, 0.72); }
.auth-features li::before { color: var(--rose-pale); }

.auth-right { background: var(--paper); max-width: 600px; padding: 50px 54px; }
.auth-box { max-width: 410px; }
.auth-logo { align-items: flex-start; margin-bottom: 52px; text-align: left; }
.auth-logo-mark { display: none; }
.auth-logo-brand { color: var(--plum); font-size: 1.36rem; font-weight: 400; }
.auth-logo-brand em { color: var(--mulberry); font-weight: 300; }
.auth-logo-sub { color: var(--mid-grey); letter-spacing: 0.12em; }

.auth-card {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.auth-card h1 { font-size: 2.8rem; font-weight: 300; margin-bottom: 9px; }
.auth-card h1 em { color: var(--mulberry); font-weight: 300; }
.auth-card > p { margin-bottom: 32px; }
.auth-form { gap: 19px; }
.auth-footer { border-top: 1px solid var(--stone); margin-top: 28px; padding-top: 20px; }

/* Shared application frame */
.sidebar {
  background: var(--charcoal);
  color: var(--ivory);
  width: 244px;
}

.sidebar-logo {
  border-bottom-color: rgba(247, 245, 240, 0.12);
  padding: 31px 24px 24px;
}

.sidebar-logo-text { color: var(--ivory); font-size: 1.25rem; font-weight: 400; }
.sidebar-logo-text em { color: var(--rose-pale); font-weight: 300; }
.sidebar-logo-sub { color: rgba(247, 245, 240, 0.54); letter-spacing: 0.13em; }
.sidebar-section-label { color: rgba(247, 245, 240, 0.34); letter-spacing: 0.13em; }

.sidebar-link {
  border-left-width: 2px;
  color: rgba(247, 245, 240, 0.67);
  font-size: 0.88rem;
  padding: 10px 24px;
}

.sidebar-link:hover { background: rgba(215, 171, 185, 0.08); color: var(--ivory); }
.sidebar-link.active { background: rgba(215, 171, 185, 0.12); border-left-color: var(--rose-pale); color: var(--white); }
.sidebar-footer { border-top-color: rgba(247, 245, 240, 0.12); }
.sidebar-avatar { background: var(--rose-pale); color: var(--plum); }
.sidebar-user-email { color: rgba(247, 245, 240, 0.46); }
.sidebar-signout { color: rgba(247, 245, 240, 0.5); }
.sidebar-signout:hover { color: var(--rose-pale); }

.main { background: var(--ivory); margin-left: 244px; }

.topbar {
  background: rgba(252, 251, 248, 0.96);
  border-bottom-color: var(--stone);
  min-height: 70px;
  padding: 15px 36px;
}

.topbar-title {
  color: var(--mid-grey);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.topbar-week {
  background: transparent;
  border-bottom: 1px solid var(--mulberry);
  border-radius: 0;
  color: var(--plum);
  padding: 5px 0 3px;
}

.page-content { max-width: 1180px; padding: 38px 40px 56px; }

/* Shared surfaces */
.card,
.feature-card,
.week-card,
.progress-bar-wrap,
.progress-map,
.setup-card,
.reminder-card,
.notif-card,
.lesson-card,
.section-card,
.calc-card,
.profile-card,
.avatar-card,
.result-item,
.timeline-card,
.doc-item,
.upload-zone,
.entry-card,
.field-card,
.panel,
.plan-item,
.resource-card,
.group-item,
.chat-panel,
.table-card,
.stat-card,
.group-card,
.group-detail,
.info-card,
.score-panel,
.score-chip,
.result-chip,
.upload-card,
.plan-list-item,
.client-header-card {
  background: var(--paper);
  border-color: var(--stone);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.card-header,
.section-card-header,
.calc-card-header,
.profile-section,
.table-header,
.info-card-header,
.thread-header,
.conv-list-header,
.chat-header,
.msg-compose,
.chat-compose,
.client-msg-compose { border-color: var(--stone); }

/* Dashboard */
.welcome-banner {
  background: var(--charcoal);
  border: 1px solid var(--charcoal);
  border-radius: 0;
  color: var(--charcoal);
  padding: 34px 36px;
}

.welcome-banner::before { background: rgba(215, 171, 185, 0.11); }
.welcome-banner::after { border: 1px solid rgba(215, 171, 185, 0.18); background: transparent; }

.welcome-banner h1 {
  color: var(--ivory);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 300;
  letter-spacing: -0.035em;
}

.welcome-banner h1 em { color: var(--rose-pale); font-weight: 300; }
.welcome-banner p { color: var(--on-dark); }

.welcome-badge { background: rgba(247, 245, 240, 0.08); }
.welcome-badge-label { color: var(--on-dark); }
.welcome-badge-value { color: var(--ivory); }

/* Current Today dashboard: remove its earlier green sub-theme. */
.today-page {
  --today-plum: var(--plum);
  --today-plum-deep: var(--plum);
  --today-rose: var(--rose-pale);
  --today-blush: var(--on-plum);
  --today-ivory: var(--ivory);
  --today-paper: var(--paper);
  --today-ink: var(--charcoal);
  --today-muted: var(--mid-grey);
  --today-rule: var(--stone);
  --today-sage: var(--mulberry);
  --today-sage-pale: var(--stone);
}

.guidance-card {
  background: var(--stone);
  border-color: var(--putty);
}

.guidance-mark { background: var(--plum); }
.guidance-card h2 { color: var(--charcoal); }
.guidance-card p { color: var(--mid-grey); }
.guidance-card a { color: var(--plum); }
.today-setup-card { border-left-color: var(--mulberry); }
.today-setup-card .setup-count { background: var(--rose-light); color: var(--plum); }
.today-setup-card .setup-fill,
.today-setup-card .setup-item.done .setup-check { background: var(--mulberry); border-color: var(--mulberry); }
.agenda-card.is-complete { background: var(--on-plum); border-color: var(--rose-pale); }

.progress-bar-wrap,
.progress-map,
.setup-card { border: 1px solid var(--stone); box-shadow: none; }
.progress-map-title,
.setup-head h4 { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 400; }
.progress-bar-fill,
.setup-fill,
.progress-seg.done { background: var(--mulberry); }
.progress-seg.current { background: var(--rose-pale); outline-color: var(--mulberry); }
.setup-card { border-left: 3px solid var(--mulberry); }
.setup-count { background: var(--rose-light); color: var(--plum); }
.setup-item.done .setup-check { background: var(--mulberry); border-color: var(--mulberry); }

.cards-grid { gap: 14px; }
.feature-card { border: 1px solid var(--stone); border-radius: 0; box-shadow: none; min-height: 160px; padding: 22px; }
.feature-card:hover { border-color: var(--rose-pale); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.feature-card h4 { font-family: var(--font-heading); font-size: 1.33rem; font-weight: 400; }
.feature-card .arrow { color: var(--mulberry); }

.week-card { border: 1px solid var(--stone); border-radius: 0; box-shadow: none; }
.week-card.current { border-color: var(--mulberry); }
.week-number { color: var(--mulberry); }
.week-title-text { font-family: var(--font-heading); font-size: 1.17rem; font-weight: 400; }
.week-status.current-status { background: var(--rose-light); color: var(--plum); }

.reminder-card.meeting,
.reminder-card.message { border-left-color: var(--mulberry); }
.btn-join,
.btn-msg { background: var(--rose-light); color: var(--plum); font-family: var(--font-body); }
.btn-join:hover,
.btn-msg:hover { background: var(--rose-pale); color: var(--plum); }

/* Weekly lessons and welcome content */
.week-strip {
  border-bottom: 1px solid var(--stone);
  gap: 22px;
  padding-bottom: 10px;
}

.week-pill {
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  color: var(--mid-grey);
  font-family: var(--font-body);
  padding: 7px 0;
}

.week-pill:hover { color: var(--plum); }
.week-pill.active { background: transparent; border-bottom-color: var(--plum); color: var(--plum); }
.week-pill.current:not(.active) { color: var(--mulberry); border-bottom-color: var(--rose-pale); }
.week-pill .group-dot { color: var(--mulberry); }

.lesson-hero,
.bonus-intro {
  background: var(--plum);
  border-radius: 0;
  color: var(--ivory);
  padding: 32px 34px;
}

.lesson-hero .eyebrow,
.bonus-intro .eyebrow { color: var(--rose-pale); }

.lesson-hero h1,
.lesson-hero h2,
.bonus-intro h1 { color: var(--ivory); font-size: clamp(2.2rem, 5vw, 3.55rem); font-weight: 300; }
.lesson-hero p.theme,
.bonus-intro p { color: rgba(247, 245, 240, 0.72); }
.lesson-hero .group-call-tag { background: rgba(215, 171, 185, 0.14); color: var(--rose-pale); }
.video-section-title,
.lesson-card h2,
.lesson-card h3 { font-family: var(--font-heading); font-weight: 400; }
.lesson-card { border: 1px solid var(--stone); box-shadow: none; }
.action-card { background: var(--blush); border-left-color: var(--mulberry); }
.action-card .eyebrow,
.action-options-title { color: var(--mulberry); }
.action-card p,
.action-options-list li { color: var(--charcoal); }
.action-checkbox input,
.checklist-item input[type="checkbox"] { accent-color: var(--mulberry); }
.action-checkbox.done { background: var(--sage-light); color: var(--sage-dark); }
.nav-btn { border-color: var(--stone); color: var(--charcoal); }
.nav-btn:hover { border-color: var(--mulberry); color: var(--plum); }
.section-kicker {
  color: var(--mulberry);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  margin-bottom: 7px;
  text-transform: uppercase;
}
.reflection-card .visibility-note {
  color: var(--mid-grey);
  font-size: 0.83rem;
  margin-bottom: 16px;
}
.reflection-card .reflection { margin-bottom: 0; }
.ask-card {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
}
.ask-card h2 { margin-bottom: 6px; }
.ask-card p { color: var(--mid-grey); margin-bottom: 0; }
.ask-link {
  background: var(--plum);
  border-radius: 999px;
  color: var(--ivory);
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 11px 17px;
  text-decoration: none;
}
.ask-link:hover { background: var(--mulberry); color: var(--ivory); }

/* Workouts and daily tracking */
.equip,
.blk,
.week,
.tracker-tab,
.step-card,
.field-card,
.symptom-item,
.dynamic-block,
.bristol-btn,
.meal-photo-area {
  background: var(--paper);
  border-color: var(--stone);
  box-shadow: none;
}

.equip,
.equip button,
.tracker-tab,
.tab,
.goal-btn,
.unit-btn,
.mode-btn,
.tf-btn { border-radius: var(--radius-sm); }

.equip button[aria-pressed="true"],
.blk[aria-pressed="true"],
.week[aria-pressed="true"],
.tab[aria-pressed="true"],
.tracker-tab.active,
.rating-btn.sel,
.symptom-item.checked,
.goal-btn.active,
.unit-btn.active,
.mode-btn.active,
.tf-btn.active {
  background: var(--plum);
  border-color: var(--plum);
  color: var(--ivory);
}

.blk[aria-pressed="true"] .bn,
.blk[aria-pressed="true"] .bname,
.blk[aria-pressed="true"] .bweeks,
.blk[aria-pressed="true"] .bth,
.week[aria-pressed="true"] .wn,
.week[aria-pressed="true"] .wl { color: #fff; }
.equip button[aria-pressed="true"] { color: var(--ivory); }
.tab.core[aria-pressed="true"] { background: var(--mulberry); border-color: var(--mulberry); }
.blk .bname,
.week .wl,
.phead .pt,
.step-title { font-family: var(--font-heading); font-weight: 400; }
.cue { background: var(--plum); border-radius: 0; }
.cue .rpe { background: rgba(215, 171, 185, 0.18); color: var(--rose-pale); }
.banner,
.nudge-banner,
.macro-totals-box { background: var(--rose-light); border-color: var(--rose-pale); color: var(--plum); }
.prog .fill,
.wizard-progress-bar,
.macro-target-fill { background: var(--mulberry); }
.panel.wu { border-left-color: var(--mulberry); }
.panel.cd { border-left-color: var(--sage); }
.check input { accent-color: var(--mulberry); }
.donebtn { background: transparent; border-color: var(--mulberry); color: var(--mulberry); }
.donebtn:hover { background: var(--rose-light); }
.ex.done .donebtn { background: var(--sage); border-color: var(--sage); color: var(--white); }
.step-eyebrow,
.field-label span,
.water-count strong { color: var(--mulberry); }
.dot-circle { border-color: var(--putty); }
.step-dot.active .dot-circle,
.step-dot.done .dot-circle { background: var(--mulberry); border-color: var(--mulberry); }
.step-dot.done:not(:last-child)::after { background: var(--mulberry); }
.add-btn,
.meal-photo-btn { border-color: var(--mulberry); color: var(--mulberry); }
.add-btn:hover,
.meal-photo-btn:hover { background: var(--rose-light); }

/* Progress */
.entry-form { background: var(--paper); border-color: var(--stone); }
.entry-chip,
.metric-pill { background: var(--rose-light); color: var(--plum); }
.entry-chip.starting { background: var(--blush); color: var(--plum); }
.measurement-val { color: var(--plum); font-family: var(--font-heading); font-weight: 400; }
.entry-card-header:hover { background: var(--rose-light); }
.photo-slot { background: var(--paper); border-color: var(--putty); }
.photo-slot:hover { border-color: var(--mulberry); }

/* Meals and macros */
.page-header h1,
.featured-plan-title,
.section-heading,
.plan-item-title,
.calc-card-header h3,
.results-header h3,
.calorie-number { font-family: var(--font-heading); font-weight: 300; }

.featured-plan,
.results-header {
  background: var(--plum);
  border-radius: 0;
  color: var(--ivory);
}

.featured-plan-date,
.featured-plan-title,
.featured-plan-sub,
.results-header h3,
.results-header p { color: var(--ivory); }
.featured-plan-badge { background: rgba(215, 171, 185, 0.16); color: var(--rose-pale); }
.featured-plan-btn { background: var(--paper); color: var(--plum); }
.featured-plan-btn:hover { background: var(--rose-pale); color: var(--plum); }
.plan-item { border: 1px solid var(--stone); }
.plan-item:hover { border-color: var(--rose-pale); }
.plan-item-arrow,
.resource-view { color: var(--mulberry); }
.unit-toggle,
.goal-toggle { background: var(--stone); }
.macro-bar-fill.fill-protein { background: var(--mulberry); }
.macro-bar-fill.fill-carbs { background: var(--rose-pale); }
.macro-bar-fill.fill-fat { background: var(--sage); }
.calorie-number { color: var(--plum); }

/* Messages and community */
.msg-topbar,
.thread-header,
.chat-header { background: var(--paper); border-color: var(--stone); }
.msg-topbar-name,
.thread-header-name,
.chat-header-name { color: var(--plum); font-family: var(--font-heading); font-weight: 400; }
.msg-thread,
.chat-messages,
.client-msg-thread { background: var(--ivory); }
.msg-row.from-me .msg-bubble,
.chat-msg.from-me .chat-msg-bubble,
.cmsg-row.from-me .cmsg-bubble { background: var(--plum); color: var(--ivory); }
.msg-row.from-them .msg-bubble,
.chat-msg.from-other .chat-msg-bubble,
.cmsg-row.from-them .cmsg-bubble { background: var(--paper); border: 1px solid var(--stone); color: var(--charcoal); }
.msg-compose,
.chat-compose,
.client-msg-compose { background: var(--paper); }
.conv-item.active,
.group-item.active { background: var(--rose-light); border-left-color: var(--mulberry); }
.conv-avatar,
.chat-header-dot,
.group-dot,
.thread-header-avatar { background: var(--rose-pale); color: var(--plum); }
.conv-unread,
.group-unread-badge { background: var(--mulberry); }

/* Shared admin unread-message indicator */
.admin-message-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.admin-message-link.has-unread {
  font-weight: 700;
}

.admin-message-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--mulberry);
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
}

.admin-message-badge[hidden] {
  display: none !important;
}
.reaction-pill.mine { background: var(--rose-light); border-color: var(--mulberry); color: var(--plum); }

/* Documents, results and profile */
.upload-zone { background: var(--paper); border-color: var(--putty); }
.upload-zone:hover { background: var(--rose-light); border-color: var(--mulberry); }
.upload-zone-icon,
.doc-icon,
.result-icon { background: var(--rose-light); color: var(--plum); }
.doc-name,
.result-name,
.avatar-name,
.profile-section-title,
.timeline-card h3 { color: var(--charcoal); font-family: var(--font-heading); font-weight: 400; }
.result-badge,
.info-badge { background: var(--rose-light); color: var(--plum); }
.avatar-large { border-color: var(--rose-pale); }
.save-row { background: var(--rose-light); }

/* Intake and assessment */
.intake-header,
.assessment-header {
  background: var(--plum);
  border-radius: 0;
  color: var(--ivory);
}

.intake-header h1,
.assessment-header h1,
.intake-header p,
.assessment-header p { color: var(--ivory); }

.intake-header h1,
.assessment-header h1,
.section-card-header h3,
.score-panel-title,
.grand-total-val { font-family: var(--font-heading); font-weight: 300; }
.section-icon { background: var(--rose-light); color: var(--plum); }
.progress-strip-fill,
.score-chip-fill { background: var(--mulberry); }
.rating-btns button.selected,
.rating-btns button.selected-0,
.rating-btns button.selected-1,
.rating-btns button.selected-2,
.rating-btns button.selected-3,
.symptom-btns button.selected,
.symptom-btns button.selected-0,
.symptom-btns button.selected-1,
.symptom-btns button.selected-2,
.symptom-btns button.selected-3,
.btn-purple {
  background: var(--plum);
  border-color: var(--plum);
  color: var(--ivory);
}
.btn-purple:hover { background: #613143; }
.optional-toggle { background: var(--rose-light); border-color: var(--rose-pale); }
.grand-total-row { background: var(--plum); color: var(--ivory); }
.grand-total-label,
.grand-total-val { color: var(--ivory); }
.priority-tag { background: var(--rose-light); color: var(--plum); }
.sticky-bar { background: rgba(252, 251, 248, 0.96); border-color: var(--stone); }
.disclaimer-box { background: var(--rose-light); border-color: var(--rose-pale); }

/* Admin */
body:has(.admin-wrap),
body:has(.client-page) { background: var(--ivory); }

.admin-nav {
  background: var(--charcoal);
  color: var(--ivory);
  min-height: 62px;
}

.admin-nav-brand-text { color: var(--ivory); font-family: var(--font-heading); font-size: 1.22rem; font-weight: 400; }
.admin-badge { background: var(--rose-pale); color: var(--plum); }
.admin-nav-link,
.admin-nav-user { color: rgba(247, 245, 240, 0.65); }
.admin-nav-link:hover,
.admin-nav-link.active { background: rgba(215, 171, 185, 0.12); color: var(--ivory); }
.admin-nav-btn { border-color: rgba(247, 245, 240, 0.2); color: var(--ivory); }
.admin-main,
.client-page { max-width: 1240px; }
.stat-card,
.table-card,
.group-card,
.group-detail,
.info-card,
.upload-card { border: 1px solid var(--stone); box-shadow: none; }
.stat-value,
.client-header-name { color: var(--plum); font-family: var(--font-heading); font-weight: 300; }
.group-card { border-left-color: var(--mulberry); }
.add-group-card { background: var(--rose-light); border-color: var(--rose-pale); color: var(--plum); }
.tab-btn.active { border-bottom-color: var(--mulberry); color: var(--plum); }
.group-tag.assigned { background: var(--rose-light); border-color: var(--mulberry); color: var(--plum); }
.client-msg-send,
.export-btn { background: var(--plum); color: var(--ivory); }
.bulk-btn { color: var(--mulberry); }
.coach-note-save,
.week-review-save { background: var(--plum); color: var(--ivory); }

/* Legal pages */
.legal-page { background: var(--ivory); }
.legal-header { background: var(--plum); color: var(--ivory); padding: 32px 34px; }
.legal-logo,
.legal-header h1 { color: var(--ivory); }
.legal-header .updated,
.legal-header .back-link { color: rgba(247, 245, 240, 0.66); }
.legal-body { background: transparent; gap: 14px; }
.legal-section { background: var(--paper); border: 1px solid var(--stone); padding: 24px 28px; }
.legal-section h2 { color: var(--plum); }
.legal-footer { margin-left: 8px; margin-right: 8px; }

/*
 * Shared title-card system
 * Every large page/topic heading uses the same website-matched plum surface.
 * Content cards, notices and status panels intentionally keep their semantic styles.
 */
.today-hero,
.checkin-hero,
.meal-plan-hero,
.welcome-banner,
.lesson-hero,
.bonus-intro,
.intake-header,
.assessment-intro,
.results-hero,
.protocol-hero,
.admin-main > .hero,
.admin-page-heading {
  background: var(--title-card-background);
  border: 1px solid rgba(215, 171, 185, 0.16);
  border-radius: var(--title-card-radius);
  box-shadow: var(--title-card-shadow);
  color: var(--ivory);
  overflow: hidden;
  padding: var(--title-card-padding);
  position: relative;
}

/* Remove legacy rings/circles so the decorative treatment is identical everywhere. */
.welcome-banner::before,
.welcome-banner::after,
.meal-plan-hero::after {
  display: none;
}

.today-hero h1,
.checkin-hero h1,
.meal-plan-hero h1,
.welcome-banner h1,
.lesson-hero h1,
.lesson-hero h2,
.bonus-intro h1,
.intake-header h1,
.assessment-intro h1,
.results-hero h2,
.protocol-hero h1,
.admin-main > .hero h1,
.admin-page-heading h1 {
  color: var(--ivory);
  font-family: var(--font-heading);
  font-size: clamp(2.35rem, 5vw, 4.05rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.98;
  margin: 8px 0 13px;
}

.today-hero-copy > p,
.checkin-hero > div > p,
.meal-plan-hero-copy > p,
.welcome-banner > p,
.lesson-hero > p.theme,
.bonus-intro > p,
.intake-header > p,
.assessment-intro > div > p,
.results-hero > p,
.protocol-hero .protocol-hero-subtitle,
.admin-main > .hero > p,
.admin-page-heading > div > p {
  color: rgba(247, 245, 240, 0.76);
  font-size: 0.96rem;
  line-height: 1.65;
  margin: 0;
  max-width: 65ch;
}

.today-eyebrow,
.checkin-hero .checkin-eyebrow,
.meal-plan-hero .meal-eyebrow,
.lesson-hero .eyebrow,
.bonus-intro .eyebrow,
.admin-page-heading .meal-eyebrow {
  color: var(--rose-pale);
}

.today-hero-action,
.checkin-date-control,
.meal-plan-summary {
  background: rgba(252, 251, 248, 0.09);
  border: 1px solid rgba(252, 251, 248, 0.18);
  border-radius: 14px;
}

.assessment-time { color: var(--rose-pale); }

.admin-page-heading {
  margin-bottom: 24px;
}

.admin-page-heading .admin-secondary-button {
  background: var(--ivory);
  border-color: var(--ivory);
  color: var(--plum);
  position: relative;
}

.admin-page-heading .admin-secondary-button:hover {
  background: var(--rose-light);
  border-color: var(--rose-light);
  color: var(--plum);
}

/* Branded loading screen shared by member and admin pages */
.loader {
  background:
    radial-gradient(circle at 76% 22%, rgba(122, 61, 82, 0.24), transparent 28%),
    var(--charcoal);
  color: var(--ivory);
  flex-direction: column;
  gap: 16px;
}

.loader::before {
  content: 'The Hormone Edit';
  color: var(--ivory);
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.65rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1;
}

.loader::after {
  content: 'Preparing your portal';
  color: var(--on-dark);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.loader-spinner {
  border-color: rgba(247, 245, 240, 0.18);
  border-top-color: var(--rose-pale);
  height: 34px;
  margin: 6px 0 2px;
  width: 34px;
}

/* Mobile */
@media (max-width: 768px) {
  .main { margin-left: 0; }
  .sidebar { width: min(86vw, 310px); }
  .topbar { min-height: 62px; padding: 12px 18px; }
  .page-content { padding: 26px 18px 42px; }
  .today-hero,
  .checkin-hero,
  .meal-plan-hero,
  .welcome-banner,
  .lesson-hero,
  .bonus-intro,
  .intake-header,
  .assessment-intro,
  .results-hero,
  .protocol-hero,
  .admin-main > .hero,
  .admin-page-heading {
    border-radius: 17px;
    padding: 27px 23px;
  }
  .today-hero h1,
  .checkin-hero h1,
  .meal-plan-hero h1,
  .welcome-banner h1,
  .lesson-hero h1,
  .lesson-hero h2,
  .bonus-intro h1,
  .intake-header h1,
  .assessment-intro h1,
  .results-hero h2,
  .protocol-hero h1,
  .admin-main > .hero h1,
  .admin-page-heading h1 { font-size: clamp(2.25rem, 11vw, 3.05rem); }
  .auth-right { max-width: none; padding: 38px 24px; }
  .auth-logo { margin-bottom: 36px; }
  .auth-card h1 { font-size: 2.35rem; }
  .cards-grid { grid-template-columns: 1fr 1fr; }
  .lesson-hero,
  .bonus-intro { padding: 26px 23px; }
  .legal-header { padding: 26px 24px; }
  .legal-section { padding: 22px 20px; }
}

@media (max-width: 480px) {
  .cards-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 135px; }
  .page-content { padding-left: 16px; padding-right: 16px; }
  .topbar-week { font-size: 0.72rem; }
  .ask-card { align-items: flex-start; flex-direction: column; }

  /* Keep the long intake form comfortable on phone screens. */
  .intake-wrap,
  .section-card,
  .section-body,
  .section-body > *,
  .form-group { min-width: 0; }
  .section-body [style*="overflow-x:auto"] { max-width: 100%; }
  .sticky-bar {
    align-items: stretch;
    flex-direction: column;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .sticky-bar > div {
    display: grid !important;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .sticky-bar .btn { justify-content: center; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}