/* ============================================================
   Metabolic Mastery — shared stylesheet
   Matches MetabolicRadar.com design system exactly
   Drop this file in your /mastery/ folder alongside the week pages
   ============================================================ */

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

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ── Tokens ── */
:root {
  --bg:        #FAF9F7;
  --bg-card:   #FFFFFF;
  --bg-dark:   #1B2A4A;
  --bg-mid:    #EEF1F0;
  --text:      #1a1a18;
  --text-2:    #6b6b65;
  --text-3:    #9b9b93;
  --accent:    #5B9E9B;
  --gold:      #C9A84C;
  --border:    #E5E1D8;
  --border-2:  #D0CBC0;
  --navy:      #1B2A4A;
  --radius:    10px;
  --radius-lg: 16px;
  --serif:     'DM Serif Display', Georgia, serif;
  --sans:      'DM Sans', system-ui, sans-serif;
  --max:       1120px;
  --pad:       clamp(1.25rem, 5vw, 3rem);
}

/* ── Base ── */
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
em { font-style: italic; }

/* ── Nav ── (matches metabolicradar.com nav exactly) */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250,249,247,0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.nav-logo {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
.nav-logo strong { font-weight: 500; }
.nav-logo em { font-style: normal; color: var(--accent); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}
.nav-links a {
  font-size: 14px;
  color: var(--text-2);
  transition: color .15s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--text); }
.nav-cta {
  font-size: 13px;
  font-weight: 500;
  padding: .5rem 1.125rem;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: opacity .15s;
}
.nav-cta:hover { opacity: .85; }
@media(max-width:700px) {
  .nav-links { display: none; }
}

/* ── Week breadcrumb bar ── */
.week-bar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.week-bar-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 44px;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 13px;
  color: var(--text-3);
  overflow-x: auto;
  scrollbar-width: none;
}
.week-bar-inner::-webkit-scrollbar { display: none; }
.week-bar-inner a { color: var(--text-3); transition: color .12s; }
.week-bar-inner a:hover { color: var(--text); }
.week-bar-sep { opacity: .4; flex-shrink: 0; }
.week-bar-current { color: var(--text); font-weight: 500; flex-shrink: 0; }

/* ── Week selector strip ── */
.week-nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 1rem var(--pad);
  max-width: var(--max);
  margin: 0 auto;
}
.week-nav::-webkit-scrollbar { display: none; }
.week-pill {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .5rem .875rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
}
.week-pill:hover { border-color: var(--border-2); background: #F0EDE8; }
.week-pill.active { background: var(--navy); border-color: var(--navy); }
.week-pill.locked { opacity: .45; cursor: not-allowed; pointer-events: none; }
.week-pill.done { border-color: var(--accent); }
.wp-num { font-size: 11px; font-weight: 500; color: var(--text-3); }
.week-pill.active .wp-num { color: rgba(255,255,255,.6); }
.week-pill.done .wp-num { color: var(--accent); }
.wp-label { font-size: 10px; color: var(--text-3); margin-top: 2px; white-space: nowrap; }
.week-pill.active .wp-label { color: rgba(255,255,255,.5); }

/* ── Page layout ── */
.page-wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 3rem var(--pad) 5rem;
}
.two-col {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2.5rem;
  align-items: start;
}
@media(max-width:1100px) {
  .two-col { grid-template-columns: 1fr; }
}

/* ── Section label ── (matches site pattern) */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

/* ── Headings ── */
.page-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.1;
  color: var(--text);
  margin-bottom: .625rem;
}
.page-title em { color: var(--accent); }
.page-sub {
  font-size: 17px;
  color: var(--text-2);
  line-height: 1.65;
  max-width: 560px;
  margin-bottom: 2.5rem;
}

/* ── Cards ── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.card-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .875rem;
}
.card-title {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--text);
  margin-bottom: .625rem;
}
.card-body {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.75;
}
.card-body p { margin-bottom: .75rem; }
.card-body p:last-child { margin-bottom: 0; }
.card-body strong { font-weight: 500; color: var(--text); }

/* ── Tool card (interactive) ── */
.tool-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.tool-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: #F4F1EC;
  border-bottom: 1px solid var(--border);
}
.tool-head-left {}
.tool-eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 2px;
}
.tool-name {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--navy);
}
.tool-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--navy);
  color: #fff;
}
.tool-body { padding: 1.5rem; }

/* ── Sliders ── */
.slider-field { margin-bottom: 1.125rem; }
.slider-field:last-of-type { margin-bottom: 0; }
.slider-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .5rem;
}
.slider-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-3);
}
.slider-val {
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
}
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--navy);
  border: 2.5px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  cursor: pointer;
  transition: transform .1s;
}
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--navy);
  border: 2.5px solid #fff;
  cursor: pointer;
}

/* ── Result box ── */
.result-box {
  background: var(--navy);
  border-radius: var(--radius);
  padding: 1.25rem;
  color: #fff;
  margin-top: 1rem;
}
.result-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: .375rem;
}
.result-number {
  font-family: var(--serif);
  font-size: 3rem;
  line-height: 1;
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.result-unit {
  font-size: 16px;
  font-family: var(--sans);
  color: rgba(255,255,255,.5);
}
.result-sub {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  margin-top: .375rem;
  line-height: 1.5;
}
.result-divider {
  height: 1px;
  background: rgba(255,255,255,.1);
  margin: 1rem 0;
}
.result-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 6px;
}
.result-row-label { color: rgba(255,255,255,.4); }
.result-row-val { font-weight: 500; color: #fff; }
.result-row-val.gold { color: var(--gold); }

/* ── Pill selectors ── */
.pill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: .5rem;
}
.sel-pill {
  padding: .5rem .75rem;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  transition: all .15s;
  text-align: center;
  font-family: var(--sans);
}
.sel-pill .pill-val {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 2px;
}
.sel-pill .pill-label {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.3;
}
.sel-pill.active {
  background: var(--navy);
  border-color: var(--navy);
}
.sel-pill.active .pill-val { color: #fff; }
.sel-pill.active .pill-label { color: rgba(255,255,255,.55); }
.sel-pill:hover:not(.active) { border-color: var(--border-2); }

/* ── Accordion ── */
.accordion { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 1.25rem; }
.acc-item { border-bottom: 1px solid var(--border); }
.acc-item:last-child { border-bottom: none; }
.acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--bg-card);
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  text-align: left;
  transition: background .12s;
  gap: 1rem;
}
.acc-trigger:hover, .acc-trigger.open { background: #F4F1EC; }
.acc-trigger-left { display: flex; align-items: center; gap: 12px; }
.acc-n {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.acc-title { font-size: 14px; font-weight: 500; color: var(--text); }
.acc-arrow {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s, background .12s, border-color .12s;
  flex-shrink: 0;
}
.acc-arrow svg { width: 10px; height: 10px; stroke: var(--text-3); fill: none; transition: stroke .12s; }
.acc-trigger.open .acc-arrow { transform: rotate(180deg); background: var(--navy); border-color: var(--navy); }
.acc-trigger.open .acc-arrow svg { stroke: #fff; }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.acc-panel.open { max-height: 1000px; }
.acc-content {
  padding: .25rem 1.25rem 1.25rem;
  padding-left: calc(1.25rem + 22px + 12px);
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.75;
}
.acc-content p { margin-bottom: .75rem; }
.acc-content p:last-child { margin-bottom: 0; }
.acc-content strong { font-weight: 500; color: var(--text); }

/* ── Callout ── */
.callout {
  background: #F4F1EC;
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  padding: .875rem 1rem;
  margin: .75rem 0;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.65;
}
.callout strong { color: var(--text); font-weight: 500; }

/* ── Challenge checklist ── */
.challenge-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.challenge-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.375rem;
  background: #F4F1EC;
  border-bottom: 1px solid var(--border);
}
.challenge-head-left {}
.ch-eyebrow { font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 3px; }
.ch-title { font-family: var(--serif); font-size: 19px; color: var(--navy); }

/* Progress ring */
.ring-group { display: flex; align-items: center; gap: 10px; }
.ring-svg { transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--border); stroke-width: 3.5; }
.ring-fill { fill: none; stroke: var(--navy); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 126; stroke-dashoffset: 126; transition: stroke-dashoffset .45s ease; }
.ring-fill.complete { stroke: var(--accent); }
.ring-count-wrap { text-align: center; }
.ring-count { font-size: 13px; font-weight: 500; color: var(--navy); }
.ring-count-label { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }

.ch-list {}
.ch-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: .875rem 1.375rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
}
.ch-item:last-child { border-bottom: none; }
.ch-item:hover { background: #F9F7F4; }
.ch-item.done { background: #F6FBF2; }
.ch-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border-2);
  flex-shrink: 0; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
  background: #fff;
}
.ch-item.done .ch-check { background: var(--navy); border-color: var(--navy); }
.check-icon { opacity: 0; transform: scale(0); transition: all .2s; }
.ch-item.done .check-icon { opacity: 1; transform: scale(1); }
.check-icon svg { width: 11px; height: 11px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ch-content { flex: 1; min-width: 0; }
.ch-item-title { font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.4; margin-bottom: 3px; transition: color .15s; }
.ch-item.done .ch-item-title { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--border-2); }
.ch-item-sub { font-size: 12px; color: var(--text-3); line-height: 1.5; }
.ch-item.done .ch-item-sub { color: #bbb; }
.ch-tag {
  font-size: 10px; font-weight: 500;
  padding: 2px 8px; border-radius: 20px;
  letter-spacing: .04em; text-transform: uppercase;
  flex-shrink: 0; margin-top: 3px; align-self: flex-start;
}
.tag-action { background: #EEF1F0; color: #3d7c79; }
.tag-habit { background: #FBF5E6; color: #8a6522; }
.tag-social { background: #F4F1EC; color: var(--text-3); }

/* Completion state */
.complete-bar {
  display: none;
  padding: 1rem 1.375rem;
  background: #EDF7E8;
  border-top: 1px solid #c5dfb8;
  align-items: center;
  gap: 12px;
}
.complete-bar.show { display: flex; animation: slideDown .3s ease; }
@keyframes slideDown { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.complete-check {
  width: 34px; height: 34px; border-radius: 50%;
  background: #2e6b24; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.complete-check svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.complete-title { font-size: 14px; font-weight: 500; color: #2e6b24; }
.complete-sub { font-size: 12px; color: #3d8030; margin-top: 2px; }

/* Coach note */
.coach-note {
  padding: 1rem 1.375rem;
  border-top: 1px solid var(--border);
  background: #F4F1EC;
  display: flex; gap: 12px; align-items: flex-start;
}
.coach-av {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 14px; color: #fff;
  overflow: hidden;
}
.coach-av img { width: 100%; height: 100%; object-fit: cover; }
.coach-name { font-size: 12px; font-weight: 500; color: var(--navy); margin-bottom: 3px; }
.coach-msg { font-size: 13px; color: var(--text-2); line-height: 1.6; font-style: italic; }

/* ── Sidebar ── */
.sidebar {}
.sidebar-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.sidebar-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .875rem;
}
.sidebar-title {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--text);
  margin-bottom: .5rem;
}
.sidebar-body {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.65;
}
.progress-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin: .875rem 0 .375rem;
}
.progress-fill {
  height: 100%;
  background: var(--navy);
  border-radius: 2px;
  transition: width .4s ease;
}
.progress-label { font-size: 12px; color: var(--text-3); }

/* Resource link */
.resource-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: .625rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-2);
  transition: color .12s;
  text-decoration: none;
}
.resource-link:last-child { border-bottom: none; }
.resource-link:hover { color: var(--text); }
.resource-icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--bg-mid);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}

/* ── Video embed ── */
.video-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.video-label {
  padding: .75rem 1.25rem;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px;
}
.video-label::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
.video-ratio {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  background: #1a1a18;
}
.video-ratio iframe {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; border: none;
}
.video-placeholder {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; cursor: pointer;
  background: #1B2A4A;
}
.play-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.play-btn svg { width: 18px; height: 18px; fill: #fff; margin-left: 3px; }
.video-placeholder:hover .play-btn { background: rgba(255,255,255,.1); border-color: #fff; }
.video-placeholder-text { font-size: 12px; color: rgba(255,255,255,.5); font-family: var(--sans); }

/* ── Concept cards ── */
.concept-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin-bottom: 1.25rem;
}
@media(max-width:600px) { .concept-grid { grid-template-columns: 1fr; } }
.concept-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.125rem;
  background: var(--bg-card);
  transition: border-color .15s, transform .15s;
}
.concept-card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.cc-icon { font-size: 22px; margin-bottom: .75rem; }
.cc-title { font-family: var(--serif); font-size: 16px; color: var(--text); margin-bottom: .375rem; }
.cc-body { font-size: 13px; color: var(--text-2); line-height: 1.6; }

/* ── Footer ── */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem var(--pad);
  margin-top: 4rem;
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}
.footer-brand { font-size: 15px; font-weight: 500; color: var(--text); }
.footer-brand em { font-style: normal; color: var(--accent); }
.footer-note { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.footer-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer-links a { font-size: 13px; color: var(--text-3); transition: color .12s; }
.footer-links a:hover { color: var(--text); }

/* ── Utility ── */
.divider { height: 1px; background: var(--border); margin: 2rem 0; }
.spacer { height: 1.5rem; }
.text-muted { color: var(--text-3); }
.text-accent { color: var(--accent); }
.text-gold { color: var(--gold); }

/* ── Fade-in animation (same as main site) ── */
.fade-in { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* -- Mobile nav is handled by /_shared-mobile.js for all pages.
      Only the mastery-specific .week-nav mobile padding remains below. -- */
@media (max-width: 768px) {
  .week-nav { padding: .75rem 16px; }
}

/* -- Shared reflect questions (used in weeks 2-5) -- */
.reflect-q {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  margin-bottom: 8px;
  overflow: hidden;
}
.reflect-q-text {
  padding: .875rem 1rem;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.45;
}
.reflect-btns {
  display: flex;
  gap: 8px;
  padding: 0 1rem .875rem;
}
.reflect-btn {
  appearance: none;
  -webkit-appearance: none;
  flex: 1;
  padding: .5rem 1rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  background: var(--bg);
  color: var(--text-2);
}
.reflect-btn:hover { border-color: var(--border-2); color: var(--text); }
.reflect-btn.yes-btn.selected { background: #EDF7E8; border-color: #7BBF7A; color: #2e6b24; }
.reflect-btn.no-btn.selected  { background: #FFF8E6; border-color: #C9A84C; color: #7a5c1a; }
.reflect-response {
  display: none;
  padding: .625rem 1rem .875rem;
  font-size: 13px;
  line-height: 1.65;
  border-top: 1px solid var(--border);
}
.reflect-response.yes { background: #F6FBF2; color: #2e6b24; }
.reflect-response.no  { background: #FFFBF0; color: #7a5c1a; }
.reflect-response.show { display: block; }