/* InSpec Digital — BUSINESS MODE skin.
   ────────────────────────────────────────────────────────────────────────
   PURE CSS. This file ONLY adds body.mode-business {...} overrides — it can
   never break the money path (the find→grade→Stripe→report engine is
   untouched). It suppresses the RPG layer (galaxy / cast / verdict-scene /
   share-card / easter eggs / "kingdom" ornament) and lays a premium FLAT
   surface, so the same engine output reads as a straight business audit.
   Quest mode is unaffected (no body.mode-quest rule changes the default look).
   Suppression is display:none / visibility — NEVER removing nodes the money
   path may query (the buy buttons + wiring stay in the DOM either way).
   ──────────────────────────────────────────────────────────────────────── */

/* ════════ SHARED: premium flat surface (both pages share the cosmos canvas) ════════ */
body.mode-business #meshCanvas { display: none !important; }
body.mode-business .cosmos { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════
   LANDING PAGE (index.html) — body.mode-business
   ════════════════════════════════════════════════════════════════════════ */

/* Premium flat background — a clean, deep slate with one soft brand wash, no
   nebula. Keeps the brand purple/cyan as accents, drops the starfield. */
body.mode-business {
  background: #0f1420 !important;
  background-image:
    radial-gradient(1100px 520px at 82% -12%, rgba(123, 63, 242, .10), transparent 62%),
    radial-gradient(820px 460px at 6% 4%, rgba(0, 212, 255, .055), transparent 62%) !important;
}
/* Kill the CRT scanline overlay (arcade affordance) */
body.mode-business::after { display: none !important; }

/* ── Suppress the RPG theater / cast / verdict-scene / share-card ── */
/* the dragon "stakes" battle scene (poster + video) */
body.mode-business .stakes { display: none !important; }
/* the retired standing-cast stage shell (defensive — usually absent) */
body.mode-business .stage-shell,
body.mode-business .stage-card,
body.mode-business #stage { display: none !important; }
/* the verdict video scene injected at the top of the result card by enhance() */
body.mode-business .verdict-scene { display: none !important; }
/* the share-card CTA + its modal */
body.mode-business .share-cta,
body.mode-business .sharemodal { display: none !important; }
/* the 3-character portrait dialogue (the InSpec'n Crew) */
body.mode-business .speech-stage { display: none !important; }
/* easter eggs: loot goblin, Respec Boy mini-game, popups */
body.mode-business #loot,
body.mode-business #gbGame,
body.mode-business .pop { display: none !important; }
/* the arcade marquee ticker (quest ornament) */
body.mode-business .imq { display: none !important; }
/* the right-side pixel scroll-progress rail (arcade affordance) */
body.mode-business .prail { display: none !important; }
/* the Respec-funnel cast portraits (knight/mage/dwarf) — fantasy art off the business door */
body.mode-business .heroes { display: none !important; }

/* ── Hero / nav: drop the flippable pixel crest + arcade glow, keep it clean ── */
/* The crest is the wizard mascot — hide the big hero crest in business mode but
   keep the nav badge (small, reads as a logo). */
body.mode-business .crest-hero { display: none !important; }
body.mode-business .hero { padding-top: 64px !important; }
/* soften the pixel display font on the nav logo's shadow (less arcade, still brand) */
body.mode-business .logo { text-shadow: none !important; }
body.mode-business .logo .mark { box-shadow: none !important; }

/* ── Hero copy variant: quest line vs business line ──
   The HTML carries BOTH lines; CSS shows the right one per mode. Default (quest)
   hides .hero-biz; business hides .hero-quest. */
.hero-biz { display: none; }
body.mode-business .hero-quest { display: none !important; }
body.mode-business .hero-biz { display: block !important; }

/* ── Generic per-mode copy gate (quest-only vs business-only copy) ──
   Carry BOTH lines in the HTML; show the right one per mode. Default = quest
   (so the live Quest experience is byte-for-byte unchanged). */
.b-only { display: none; }
body.mode-business .q-only { display: none !important; }
body.mode-business .b-only { display: revert !important; }

/* ── Buttons: drop the chunky arcade 3D drop-shadow for a flatter premium feel ── */
body.mode-business .btn {
  font-family: var(--head) !important;
  font-size: 14px !important;
  letter-spacing: -.01em !important;
  box-shadow: 0 6px 18px -8px rgba(247, 201, 72, .5) !important;
  border-radius: 12px !important;
}
body.mode-business .btn:active { transform: translateY(1px) !important; box-shadow: 0 3px 10px -6px rgba(247, 201, 72, .5) !important; }
body.mode-business .btn-lg { font-size: 15px !important; }
/* the $39 unlock button on the RESULT CARD (.ubtn) — the single most important
   conversion element; business.css overrode .btn but not .ubtn, so it still read
   as arcade. Flatten the pixel font + the 3D arcade shadow to match .btn. */
body.mode-business .ubtn {
  font-family: var(--head) !important;
  letter-spacing: -.01em !important;
  text-shadow: none !important;
  box-shadow: 0 6px 18px -8px rgba(247, 201, 72, .5) !important;
  border-radius: 12px !important;
}
body.mode-business .ubtn:active { transform: translateY(1px) !important; box-shadow: 0 3px 10px -6px rgba(247, 201, 72, .5) !important; }

/* ── Headings: drop the pixel-font + purple drop-shadow chapter watermarks ── */
body.mode-business .chap-num { display: none !important; }
body.mode-business .section-head h2 { filter: none !important; }
/* pricing tier headings ($0/$19/$39 tiles) — drop the arcade pixel font (was Press Start 2P)
   so the business pricing reads premium, not arcade. This was the "business looks like quest" leak. */
body.mode-business .tier h3 { font-family: var(--head) !important; text-shadow: none !important; letter-spacing: -.01em !important; text-transform: none !important; }

/* ── Tag chips: flatten the pixel display font ── */
body.mode-business .tag { font-family: var(--head) !important; letter-spacing: .06em !important; }

/* ════════════════════════════════════════════════════════════════════════
   RESULT CARD copy variants (index.html) — shown via pre-computed strings in
   render(); these rules just style the per-mode bits if present.
   ════════════════════════════════════════════════════════════════════════ */
/* the Quest|Business toggle in the result-card header */
.mode-toggle {
  display: inline-flex; gap: 0; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); margin: 0 0 14px;
}
.mode-toggle .mt-btn {
  font: 600 12.5px var(--head, sans-serif); cursor: pointer; border: 0;
  padding: 7px 16px; background: transparent; color: var(--muted); line-height: 1.2;
  transition: background .15s, color .15s;
}
.mode-toggle .mt-btn:hover { color: var(--ink, #ece9ff); }
.mode-toggle .mt-btn.on { background: var(--gold, #F7C948); color: #2a1d00; }

/* ════════════════════════════════════════════════════════════════════════
   REPORT PAGE (report.html) — body.mode-business
   The report is ALREADY business-voice; business mode just swaps the parchment
   scroll + cosmos for a clean white premium report sheet.
   ════════════════════════════════════════════════════════════════════════ */
/* page surface: clean white-ish, no starfield */
body.mode-business {
  /* (the index rule above also applies here; report.html sets its own body bg —
     this override wins via the cascade because business.css loads after the
     inline <style>. We give the REPORT body a light premium surface.) */
}
/* On report.html the body background is #0a0712 (inline). Override to a light sheet. */
html[data-theme="light"] body.mode-business { background: #f4f5f8 !important; }

/* suppress the wax-seal reveal theater + the parchment scroll frame */
body.mode-business .seal-reveal { display: none !important; }
body.mode-business .crack-stage { display: none !important; }
/* the report must be visible immediately in business mode (the seal script hides
   it behind .sealed-hidden; in business mode we never run the seal, but guard it) */
body.mode-business #report.sealed-hidden { clip-path: none !important; opacity: 1 !important; pointer-events: auto !important; }
/* drop the ornate parchment border-image frame */
body.mode-business #report.scrollframe {
  border: 1px solid #e3e6ec !important;
  border-image: none !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  padding: 34px 30px !important;
  box-shadow: 0 18px 50px -24px rgba(20, 30, 60, .18) !important;
}
/* re-flow the scroll-framed header to a normal left-aligned report header */
body.mode-business #report.scrollframe > .eyebrow,
body.mode-business #report.scrollframe > h1,
body.mode-business #report.scrollframe > .sub { text-align: left !important; }
body.mode-business #report.scrollframe > h1 { font-size: 30px !important; }

/* the report content palette: clean ink-on-white instead of brown-on-parchment.
   The inline <style> scopes a warm parchment palette to #report; override the
   tokens to a neutral premium report palette in business mode. */
body.mode-business #report {
  --green: #6d4bd8; --green-deep: #4f33ad; --green-dim: rgba(109, 75, 216, .10); --green-border: rgba(109, 75, 216, .28);
  --amber: #c79a2e; --ink: #182030; --ink-soft: #46506a; --muted: #7a8298;
  --cream: #f7f8fb; --card: #ffffff; --line: #e6e9f0;
  color: var(--ink) !important;
}
body.mode-business #report .cat,
body.mode-business #report .hero,
body.mode-business #report .cmp,
body.mode-business #report .shot { box-shadow: 0 8px 26px -18px rgba(20, 30, 60, .22) !important; }

/* report topbar + print button on the light sheet */
html[data-theme="light"] body.mode-business .brand { color: #182030; }
html[data-theme="light"] body.mode-business .printbtn { background: #fff; border: 1px solid #e6e9f0; color: #46506a; }

/* the business-mode framing line above the fix list (added by render() in report.html) */
.biz-fixlead { display: none; }
body.mode-business .biz-fixlead {
  display: block; font-weight: 600; color: var(--ink-soft);
  font-size: 14.5px; margin: 0 0 4px;
}