/* ══════════════════════════════════════════════════════════════════════
   WOW TABS — v140 deep per-tab visual polish
   ----------------------------------------------------------------------
   Loaded LAST (after every component sheet + wow-glow.css). PURE RESTYLE:
   color, depth, gold accents, hover, gilded moments. No geometry changes
   to JS-positioned systems (orbital), no markup/data/logic touched.
   Semantic colours (level accents, auto/odoo/manual tags, status pills,
   market badges) are preserved — only brand gold + depth are unified.

   Discipline: ONE gilded moment per tab, everything else quiet.
   ══════════════════════════════════════════════════════════════════════ */

/* Shared helpers reused below */
/* (keyframes wv-sheen / wv-breathe already defined in wow-glow.css) */

/* ═══════════════ TAB 1 · WOW INTRO ═══════════════ */

/* The bold moment: the gold hero line wears true metal */
.hero-gold {
  background: var(--metal-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-color: var(--gold2);
}
.hero-badge {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
}

/* Narrative cards — cinematic depth; gold-glow lift on the gold-themed ones */
.eco-card,
.samiacc-card,
.mindset-card,
.disc-card,
.cq-card,
.reason-card {
  box-shadow: var(--sh-deep);
}
.eco-card:hover,
.samiacc-card:hover,
.mindset-card:hover {
  box-shadow: var(--sh-deep), var(--gold-glow-lift);
  transform: translateY(-3px);
}
/* reason-card keeps its per-level (l1/l2/l3) semantic hover colour — depth only */

/* SAMIACC letters get a faint metal shimmer feel via gold weight */
.samiacc-letter { text-shadow: 0 0 16px rgba(var(--gold-rgb),0.28); }

/* Pyramid level selector + quiz/discovery option pills — gold lift on hover */
.pyr-lvl-btn:hover,
.cq-opt:hover,
.disc-opt:hover,
.disc-chip:hover {
  border-color: var(--gold-border);
  box-shadow: 0 6px 20px -10px rgba(var(--gold-rgb),0.5);
}
.pyr-lvl-btn.active {
  background: var(--metal-gold);
  color: #2a1f0a;
  border-color: transparent;
}

/* 3D-carousel toggle — geometry untouched, just gild the active button */
.rf-vt-btn.active,
.rf-nav-btn:hover {
  color: var(--gold2);
  border-color: var(--gold-border);
}

/* ═══════════════ TAB 2 · PACKAGES ═══════════════ */

.price-card,
.level-story,
.comparison-wrap,
.matrix-wrap,
.calc-wrap {
  box-shadow: var(--sh-deep);
}
.price-card:hover,
.level-story:hover {
  box-shadow: var(--sh-deep), var(--gold-glow-lift);
  transform: translateY(-3px);
}
/* The WOW price in the comparison block = the bold gilded moment */
.comp-wow-price,
.pc-rate {
  background: var(--metal-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-color: var(--gold2);
}
/* Select / demo CTAs → warm gold on hover */
.pc-select:hover,
.ls-demo-btn:hover {
  border-color: var(--gold);
  box-shadow: var(--gold-glow-lift);
}
/* Duration pills + read-only market slider → metal active */
.dur-pill.active,
.market-btn.active {
  background: var(--metal-gold);
  color: #2a1f0a;
  border-color: transparent;
}

/* ═══════════════ TAB 3 · WOW INVESTMENTS ═══════════════ */

.iv-hero-title {
  background: var(--metal-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-color: var(--gold2);
}
.iv-hero-tag { font-family: var(--font-mono); letter-spacing: 0.16em; }

.iv-pp,
.iv-section,
.iv-reco-card,
.iv-alt-row,
.iv-wow-card,
.iv-verdict-reasoning {
  box-shadow: var(--sh-deep);
}
.iv-pp:hover,
.iv-alt-row:hover {
  box-shadow: var(--sh-deep), var(--gold-glow-lift);
  transform: translateY(-2px);
}
/* Active analysis pills → metal */
.iv-pill.active {
  background: var(--metal-gold);
  color: #2a1f0a;
  border-color: transparent;
}
/* Allocation bars → real metal fill */
.iv-bar-fill { background: var(--metal-gold); }
/* VIP gift = celebratory → ROSE-GOLD (the one rose moment in the app) */
.iv-vip-btn {
  background: var(--metal-rose);
  color: #2b1a14;
  border-color: rgba(var(--rose-gold-rgb),0.6);
  box-shadow: 0 8px 22px -10px rgba(var(--rose-gold-rgb),0.6);
}
.iv-vip-btn:hover { box-shadow: 0 12px 30px -10px rgba(var(--rose-gold-rgb),0.75); transform: translateY(-2px); }
.iv-vip-banner {
  box-shadow: var(--sh-deep);
  border-color: rgba(var(--rose-gold-rgb),0.35);
}
.iv-concerns-btn:hover { box-shadow: var(--gold-glow-lift); }

/* ═══════════════ TAB 4 · CREATOR (chrome only) ═══════════════ */

.creator-section,
.live-pricing,
.extra-card,
.extreme-card,
.commission-wrap,
.final-discount-wrap,
.urgency-wrap {
  box-shadow: var(--sh-deep);
}
.creator-section-title { color: var(--gold2); }
/* The live total = gilded moment of the builder */
.lp-value {
  background: var(--metal-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-color: var(--gold2);
}
.level-card:hover,
.extra-card:hover,
.extreme-card:hover {
  box-shadow: var(--sh-deep), var(--gold-glow-lift);
  transform: translateY(-2px);
}
.level-card.selected,
.level-card.active {
  border-color: var(--gold);
  box-shadow: var(--gold-glow-lift);
}
.theme-swatch:hover { box-shadow: var(--gold-glow-lift); }
.theme-swatch.active,
.theme-swatch.selected { border-color: var(--gold); box-shadow: var(--gold-glow-lift); }
.form-input:focus,
.form-select:focus,
.commission-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),0.12); }

/* ═══════════════ TAB 5 · PROPOSAL — INTENTIONALLY UNTOUCHED ═══════════════ */
/* Firewalled in wow-glow.css. Do NOT add proposal rules here. */

/* ═══════════════ TAB 6 · WOW WORKFLOWS (orbital — geometry-safe) ═══════════════ */
/* DO NOT change sizes/margins/padding/transforms of .wf-disc/.wf-nw/.wf-stage —
   the orbital is positioned in JS via getBoundingClientRect. Colour/shadow only. */
.wf-title {
  background: var(--metal-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-color: var(--gold2);
}
/* Active level tab → metal pill (box-model identical to existing .wf-lta) */
.wf-lta {
  background: var(--metal-gold);
  color: #2a1f0a;
  border-color: transparent;
}
/* Node discs get a warm gold rim glow — box-shadow only, no geometry shift */
.wf-disc { box-shadow: 0 6px 22px -8px rgba(0,0,0,0.7), 0 0 0 1px rgba(var(--gold-rgb),0.10); }
.wf-ci-btn.active {
  background: var(--metal-gold);
  color: #2a1f0a;
  border-color: transparent;
}

/* ═══════════════ TAB 7 · DASHBOARD ═══════════════ */

.dash-card,
.dash-profile-section,
.tg-feat-card,
.dash-tc-card,
.tg-wrap {
  box-shadow: var(--sh-deep);
}
.dash-card:hover {
  box-shadow: var(--sh-deep), var(--gold-glow-lift);
  transform: translateY(-2px);
}
/* The big stat numbers = gilded moment */
.dash-stat-value {
  background: var(--metal-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-color: var(--gold2);
}
.dash-profile-avatar {
  box-shadow: 0 0 0 2px rgba(var(--gold-rgb),0.4), 0 8px 26px -10px rgba(var(--gold-rgb),0.5);
}
/* Team-guide tag legend keeps its semantic auto/odoo/manual colours — depth only */

/* ═══════════════ TAB 9 · WHY WOW SAMIACC (objections) ═══════════════ */

.obj-category,
.obj-card,
.wow-truth-card,
.ww-reality-block,
.obj-7min {
  box-shadow: var(--sh-deep);
}
.obj-category:hover,
.wow-truth-card:hover {
  box-shadow: var(--sh-deep), var(--gold-glow-lift);
}
.obj-header-title,
.wow-truths-title {
  background: var(--metal-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-color: var(--gold2);
}
.obj-7min-badge {
  background: var(--metal-gold);
  color: #2a1f0a;
  border-color: transparent;
}
.obj-script-alt:hover { border-color: var(--gold-border); box-shadow: var(--gold-glow-lift); }

/* ═══════════════ TAB 8 · WOW STUDIO / ADMIN PANEL ═══════════════ */

.admin-card,
.admin-prop-row,
.admin-partner-card,
.admin-inv-row,
.rev-chart-card,
.rev-bd-card,
.ap-tc-card,
.admin-prop-card,
.ap-register-card,
.dash-stat-card {
  box-shadow: var(--sh-deep);
}
.admin-prop-row:hover,
.admin-partner-card:hover,
.admin-prop-card:hover {
  box-shadow: var(--sh-deep), var(--gold-glow-lift);
  transform: translateY(-2px);
}
.admin-card-title { color: var(--gold2); }
.inv-sum-chip { box-shadow: var(--sh-1, 0 1px 2px rgba(0,0,0,0.4)); }
/* Admin login card depth */
.ap-login-card { box-shadow: var(--sh-float); }
/* Dark, legible status/select dropdowns inside admin */
.admin-status-select,
.admin-input,
.form-select { color: var(--text); }

/* ═══════════════ Global finishing touches ═══════════════ */
/* Editorial gold spine on section titles app-wide (subtle, left of heading) */
.section-title::before {
  content: "";
  display: inline-block;
  width: 3px; height: 0.8em;
  margin-right: 11px;
  vertical-align: -1px;
  border-radius: 3px;
  background: var(--metal-gold);
  box-shadow: 0 0 12px -2px rgba(var(--gold-rgb),0.55);
}

/* ══════════════════════════════════════════════════════════════════════
   v141 · FRAUNCES TUNING + BODY-TEXT READABILITY
   Heading font swapped Playfair → Fraunces. Tame heading weight + optical
   sizing, and raise the genuinely-too-small body text in Creator + Why WOW
   to a comfortable, professional reading floor. All app-class targeted —
   the proposal (.prop-*) is never matched.
   ══════════════════════════════════════════════════════════════════════ */

/* Fraunces headings — substantial but not heavy; auto optical sizing */
.section-title,
.hero-title, .hero-line,
.iv-hero-title, .iv-sec-title, .iv-reco-lvl,
.wf-title,
.obj-header-title, .wow-truths-title, .wow-truth-sit-label,
.creator-section-title, .comparison-title, .matrix-title, .calc-title,
.ls-name, .pc-name, .reason-title, .mindset-title,
.dash-section-title, .dash-profile-name, .dash-stat-value,
.admin-section-title, .admin-card-title, .ap-login-title, .ap-hdr-brand,
.login-heading, .topbar-title, .splash-title {
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: 0.002em;
}
/* Hero stays a touch bolder for presence */
.hero-line, .iv-hero-title, .splash-title { font-weight: 600; }

/* Tame the two oversized hero titles to standard pro sizes (responsive) */
.hero-line { font-size: 2.7rem; line-height: 1.12; }
.iv-hero-title { font-size: 2.4rem; line-height: 1.12; }
@media (max-width: 1024px) {
  .hero-line { font-size: 2.3rem; }
  .iv-hero-title { font-size: 2.1rem; }
}
@media (max-width: 768px) {
  .hero-line { font-size: 1.95rem; }
  .iv-hero-title { font-size: 1.85rem; }
}
@media (max-width: 480px) {
  .hero-line { font-size: 1.7rem; }
  .iv-hero-title { font-size: 1.6rem; }
}

/* ── Why WOW (objections) — readable body copy ── */
.obj-says,
.obj-script-text,
.obj-7min-body,
.wow-truth-statement {
  font-size: 0.96rem;
  line-height: 1.62;
  color: var(--text);
}
.obj-thinks,
.obj-action,
.obj-tactic,
.ww-rb-pdesc,
.ww-rb-sdesc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text2);
}
.obj-cat-preview,
.wow-truth-sit-sub,
.ww-rb-pill,
.ww-rb-plabel { font-size: 0.88rem; line-height: 1.5; }
.ww-rb-stat { font-size: 0.84rem; line-height: 1.5; }

/* ── Creator — readable body copy + labels ── */
.extra-card .ex-desc,
.ec-explainer-btn,
.special-request-input,
.ex-comment-input,
.ct-body {
  font-size: 0.92rem;
  line-height: 1.55;
}
.term-text {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text2);
}
.term-label { font-size: 0.95rem; }
.commission-hint,
.ml-hint,
.ml-empty,
.urg-block-sub,
.extras-total-auto,
.fd-result { font-size: 0.86rem; line-height: 1.5; }
.form-label,
.special-request-label,
.theme-picker-label,
.creator-duration > label { font-size: 0.76rem; }
.lp-label { font-size: 0.78rem; }

/* ── Investments — keep the dense banker copy legible ── */
.iv-hero-sub,
.iv-sec-sub,
.iv-alt-lens,
.iv-reco-sub,
.iv-vip-note { font-size: 0.9rem; line-height: 1.55; }

/* Mobile: don't let the raised body copy creep below ~12.5px */
@media (max-width: 480px) {
  .obj-says, .obj-script-text, .obj-7min-body, .wow-truth-statement,
  .obj-thinks, .obj-action, .obj-tactic, .ww-rb-pdesc, .ww-rb-sdesc,
  .extra-card .ex-desc, .term-text, .ct-body,
  .iv-hero-sub, .iv-sec-sub, .iv-alt-lens { font-size: 0.95rem; }
}
