/* Sample Plan Tour — language toggle + RTL polish (loaded last). */

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--color-stroke-weak, rgba(25, 25, 16, 0.12));
  border-radius: var(--radius-md, 10px);
  padding: 7px 11px;
  font: var(--type-body-2-bold);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-fg, #191910);
  cursor: pointer;
  transition: background var(--dur-2, 0.16s) var(--ease-out, ease);
}
.lang-toggle svg { width: 18px; height: 18px; }
.lang-toggle:hover { background: rgba(25, 25, 16, 0.04); }

/* ── RTL ──────────────────────────────────────────────────────────
   Arabic glyphs fall through to IBM Plex Sans Arabic via the Z1 font
   stack; most spacing uses logical properties and flips automatically.
   These rules cover the few directional cues that don't. */
[dir="rtl"] .demo-report,
[dir="rtl"] .tour-intro-card,
[dir="rtl"] .tour-card { text-align: right; }

[dir="rtl"] .tour-launch svg,
[dir="rtl"] .link-btn svg,
[dir="rtl"] .demo-book svg,
[dir="rtl"] .retest-btn svg,
[dir="rtl"] .tour-primary svg,
[dir="rtl"] .buy-link svg,
[dir="rtl"] .delta-vals svg,
[dir="rtl"] .join-capture .btn-primary svg,
[dir="rtl"] .priority-card svg.arrow { transform: scaleX(-1); }

/* Numeric range bars and weekly strip stay left-anchored (the digits read
   LTR even in Arabic), so leave their inner positioning untouched. */
[dir="rtl"] .range-visual,
[dir="rtl"] .count-bar,
[dir="rtl"] .meal-bars,
[dir="rtl"] .week-row { direction: ltr; }

/* Keep the language toggle visible on mobile (the topbar hides book/account). */
@media (max-width: 720px) {
  .lang-toggle { padding: 6px 9px; }
  .lang-toggle span { font-size: 12px; }
}

/* Arabic eyebrows/overlines: the Latin 0.12em tracking breaks Arabic cursive
   joining (guideline §10 — tracking is Latin-only, Arabic uses weight+color).
   Reset letter-spacing and the no-op uppercase on every overline in RTL. */
[dir="rtl"] .section-kicker,
[dir="rtl"] .sidebar-label,
[dir="rtl"] [class*="overline"],
[dir="rtl"] .macro-label,
[dir="rtl"] .meal-dist-label,
[dir="rtl"] .supp-sub,
[dir="rtl"] .supp-facts u,
[dir="rtl"] .day-name,
[dir="rtl"] .type-badge,
[dir="rtl"] .metric-badge,
[dir="rtl"] .new-badge,
[dir="rtl"] .retest-when {
  letter-spacing: 0;
  text-transform: none;
}

/* ── Collapsible plan stages ───────────────────────────────────────
   The Plan tab merges Priorities + Nutrition + Supplements + Movement.
   Each is a collapsible section so the tab reads as a short menu instead of
   one endless scroll. Priorities opens by default; the rest collapse. */
.plan-stages { display: flex; flex-direction: column; gap: 12px; }
.plan-stage {
  border: 1px solid var(--color-stroke-weak, rgba(25, 25, 16, 0.12));
  border-radius: var(--radius-lg, 16px);
  background: var(--color-bg-elevated, #fff);
  overflow: hidden;
}
.plan-stage > .stage-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: start;
  transition: background var(--dur-2, 0.16s) var(--ease-out, ease);
}
.plan-stage > .stage-head:hover { background: rgba(25, 25, 16, 0.025); }
.stage-ic {
  display: inline-flex;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--tint-green-weak, rgba(21, 154, 132, 0.1));
  color: var(--atheal-green, rgb(21, 154, 132));
  align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.stage-ic svg { width: 22px; height: 22px; }
.stage-head-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.stage-head-text strong { font-size: 18px; font-weight: 700; color: var(--color-fg, #191910); line-height: 1.2; }
.stage-head-text small { font-size: 13px; line-height: 1.35; color: var(--color-fg-secondary, #65655d); }
.plan-stage > .stage-head > svg:last-child {
  width: 22px; height: 22px;
  color: var(--color-fg-tertiary, #9a9a90);
  flex: 0 0 auto;
  transition: transform var(--dur-3, 0.2s) var(--ease-out, ease);
}
.plan-stage.is-open > .stage-head > svg:last-child { transform: rotate(180deg); }
.plan-stage > .collapse-body { padding: 0 18px 18px; }

/* ── Peak-intent email capture (Track tab → "Ready for your next panel?") ──
   Ungated and optional: the email rides along to /join if provided, but the
   button works without it. */
.join-capture { display: flex; gap: 8px; align-items: stretch; flex: 0 1 auto; }
.join-email {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--color-stroke-weak, rgba(25, 25, 16, 0.12));
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  color: var(--color-fg, #191910);
}
.join-email::placeholder { color: var(--color-fg-tertiary, #9a9a90); }
.join-email:focus {
  outline: none;
  border-color: var(--atheal-green, rgb(21, 154, 132));
  box-shadow: 0 0 0 2px rgba(21, 154, 132, 0.25);
}
.join-capture .btn-primary {
  white-space: nowrap;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.join-capture .btn-primary svg { width: 18px; height: 18px; flex: 0 0 auto; }
@media (max-width: 600px) {
  .join-capture { flex-direction: column; width: 100%; }
  .join-capture .btn-primary { width: 100%; justify-content: center; }
}
/* The stage body's first child already has its own top spacing; trim doubling. */
.plan-stage > .collapse-body > .block-head:first-child,
.plan-stage > .collapse-body > .macro-card:first-child,
.plan-stage > .collapse-body > .track-hero:first-child,
.plan-stage > .collapse-body > .plan-list:first-child { margin-top: 0; }