/* ══════════════════════════════════════════════════
   How Do I Lose Belly Fat? — Page-specific styles
   ══════════════════════════════════════════════════ */

/* ── Base prose ── */
.prose p { margin-bottom: 1.25rem; line-height: 1.75; }

/* Hide footer in slide mode; shown only when FAQ is open */
#footer-placeholder { display: none; }
body:not(.faq-open) footer { display: none; }
body.faq-open #footer-placeholder { display: block; }


/* ────────────────────────────────────────────────
   SLIDE LAYOUT
   ──────────────────────────────────────────────── */
#scroll-driver {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}

.story-scene {
  visibility: hidden;
  pointer-events: auto;
}

.story-panel {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story-inner {
  width: 100%;
  flex-shrink: 0;
  padding: 7rem 2rem 4rem;
  box-sizing: border-box;
}

.anim-child {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}


/* ── Mobile / tablet section nav ── */
#mobile-section-fab {
  display: block;
  position: fixed;
  bottom: 0.5rem;
  right: 1.25rem;
  z-index: 60;
}

#mobile-section-toggle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-brand, #00BAFF);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, background 0.2s ease;
}
#mobile-section-toggle:active { transform: scale(0.92); }
#mobile-section-toggle svg    { transition: opacity 0.2s ease; }
#mobile-section-toggle.open svg { opacity: 0.7; }

#mobile-section-drawer {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  background: rgba(18, 18, 20, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  padding: 0.5rem 0;
  min-width: 220px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transform-origin: bottom right;
  transform: scale(0.9) translateY(6px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.18s ease;
}
#mobile-section-drawer.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.msec-btn {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.65rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: color 0.15s ease, background 0.15s ease;
}
.msec-btn:active,
.msec-btn:hover  { color: #fff; background: rgba(255, 255, 255, 0.08); }
.msec-btn.active { color: var(--color-brand, #00BAFF); }

.msec-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
.msec-btn.active .msec-dot { opacity: 1; }


/* ── FAQ zone ── */
#faq-section {
  padding: 5rem 2rem 4rem;
  box-sizing: border-box;
}


/* ── Landscape phone ── */
@media (max-height: 500px) {
  .story-inner { padding-top: 4.5rem; }
}

/* ── Portrait mobile: tighter side padding for CICO slide ── */
@media (max-width: 767px) {
  [data-cico="true"] .story-inner {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 5rem;
    padding-bottom: 2rem;
  }

  .cico-in-sub,
  .cico-out-sub { display: none; }
}

/* ── Diet slide layout (all screen sizes) ── */
.diet-num-col   { display: none !important; }
.diet-bar-spacer { display: none !important; }
.diet-row-gap   { margin-top: 0.75rem; }
.diet-heading   { margin-bottom: 1.5rem; }
#diet-conclusion[style*="opacity:0"] { margin: 0 !important; padding: 0 !important; }
.diet-footnote  { margin-top: 1.25rem; }

/* Stack name + description vertically */
.diet-row-header {
  flex-direction: column !important;
  gap: 0 !important;
  margin-bottom: 0.35rem !important;
}
.diet-row-header .diet-label-col {
  width: auto !important;
}
.diet-row-header .diet-label-col [id$="-num-mobile"] {
  display: none !important;
}
.diet-name-br { display: none; }
.diet-row-header > span { padding-top: 0 !important; }

/* ── Portrait mobile: narrower label column ── */
@media (max-width: 767px) {
  .diet-label-col { width: 4rem !important; }
}


/* ── Enjoyability matrix ── */
.matrix-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1px 1fr;
}
@media (max-width: 767px) {
  .matrix-grid .anim-child { padding: 0.75rem; }
  .matrix-grid .anim-child p { font-size: 0.8rem; }
  .matrix-grid .anim-child > div:first-child { font-size: 0.65rem; margin-bottom: 0.35rem; }
}


/* ════════════════════════════════════════════════════
   Inline-style replacements — colours & layout tokens
   ════════════════════════════════════════════════════ */

/* Neutral muted colour used across CICO, water, donut */
.color-muted      { color: #9a9aaa; }
.bg-muted-line    { background: #9a9aaa; }

/* Glass of water */
.glass-outline    { border: 3px solid #D2D2D7; border-top: none; }
.water-fill-bg    { background: rgba(0, 186, 255, 0.18); }
.water-surface-bg { background: rgba(0, 186, 255, 0.8); }
.water-tick       { width: 20px; height: 2px; background: rgba(0, 186, 255, 0.7); }
.water-pct        { color: rgba(0, 186, 255, 0.9); }
.stubborn-color   { color: #f59e0b; }

/* CICO transition helper */
.cico-transition  { transition: all 0.3s; }

/* Donut / running card colours */
.bg-donut         { background: #f59e0b; }
.bg-running       { background: #334155; }
.running-dim      { opacity: 0.4; }
.donut-label      { color: #f59e0b; }
.donut-bar-track  { height: 12px; background: #e5e7eb; }
.donut-bar-fill   { background: #f59e0b; }
.card-sub-dim     { color: rgba(255, 255, 255, 0.8); }
.card-pill-bg     { background: rgba(255, 255, 255, 0.25); }
.running-sub-dim  { color: rgba(255, 255, 255, 0.4); }
.running-pill-bg  { background: rgba(255, 255, 255, 0.1); }
.running-pill-txt { color: rgba(255, 255, 255, 0.5); }

/* Diet cards */
.diet-keto-bg     { background: #faf5ff; border: 1.5px solid #c4b5fd; }
.diet-keto-title  { color: #7c3aed; }
.diet-if-bg       { background: #eff6ff; border: 1.5px solid #93c5fd; }
.diet-if-title    { color: #2563eb; }
.diet-clean-bg    { background: #f0fdf4; border: 1.5px solid #86efac; }
.diet-clean-title { color: #16a34a; }

/* Diet bar colours */
.diet-bar-if-bg      { background: #eff6ff; }
.diet-bar-if-kept    { background: #3b82f6; border-radius: 0.75rem 0 0 0.75rem; }
.diet-bar-keto-bg    { background: #faf5ff; }
.diet-bar-keto-kept  { background: #8b5cf6; border-radius: 0.75rem 0 0 0.75rem; }
.diet-bar-clean-bg   { background: #f0fdf4; }
.diet-bar-clean-kept { background: #22c55e; border-radius: 0.75rem 0 0 0.75rem; }
.diet-bar-removed {
  background: rgba(239, 68, 68, 0.10);
  border: 1.5px dashed rgba(239, 68, 68, 0.35);
  border-radius: 0 0.75rem 0.75rem 0;
}
.diet-bar-removed-label { color: rgba(239, 68, 68, 0.65); }

/* Diet baseline bar */
.diet-baseline-outer { background: #e0f2fe; }
.diet-baseline-inner { background: #bae6fd; }
.diet-baseline-label { color: #0369a1; }

/* Footnote sup reference */
.diet-sup { font-size: 0.6em; vertical-align: super; }

/* Summary (dark slide) step circles */
.step-circle {
  background: rgba(0, 186, 255, 0.2);
  color: var(--color-brand, #00BAFF);
}
.step-body     { color: rgba(255, 255, 255, 0.5); }
.prose-on-dark { color: rgba(255, 255, 255, 0.5); }
.ios-subtext   { color: rgba(255, 255, 255, 0.3); }

/* Chart grid lines */
.chart-gridline  { stroke: #D2D2D7; }
.chart-axis-text { fill: #4a4a4f; }

/* Day-in-the-life cards */
.card-over-border  { border-top: 3px solid #D2D2D7; }
.card-under-border { border-top: 3px solid #00BAFF; }
.card-under-bg     { background: rgba(0, 186, 255, 0.06); }

/* 80/20 food lists */
.list-eat-header  { background: rgba(34, 197, 94, 0.06); border-top: 3px solid #22c55e; }
.list-eat-label   { color: #22c55e; }
.list-less-header { background: rgba(251, 146, 60, 0.06); border-top: 3px solid #f97316; }
.list-less-label  { color: #f97316; }

/* Enjoyability matrix cell backgrounds */
.matrix-worst { background: #fef2f2; }
.matrix-bad   { background: #fff7ed; }
.matrix-ok    { background: #fefce8; }
.matrix-best  { background: #f0fdf4; }

.matrix-worst-label { color: #b91c1c; }
.matrix-bad-label   { color: #c2410c; }
.matrix-ok-label    { color: #a16207; }
.matrix-best-label  { color: #16a34a; }

/* Matrix divider */
.matrix-vline-style {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: #e2e5ea;
}

/* Diet label width helper */
.diet-label-w { width: 9rem; }
.diet-num-w   { width: 5.5rem; text-align: right; }

/* Labels column in glass */
.water-labels-col { min-width: 180px; }

/* Glass dimensions */
.glass-container  { width: 90px; height: 240px; }

/* Misc reusable */
.cico-center-col  { min-width: 0; width: auto; }
.max-w-100px      { max-width: 100px; }