/* GenXT Worlds — inner-page layer (demo).
   Loaded after rh-v2.css on every public page. It only re-tones: each section
   takes its world's palette by redefining the rh-v2 tokens, and the shared
   header becomes the floating GenXT pill. No page content is hidden or cut.

   Worlds are set on <html data-world="…">:
     movies/    → cinema      (burgundy + gold)
     cars/      → automotive  (night steel + race red)
     stocks/    → markets     (newsprint paper + ink)
     bigg-boss/ → reality     (stage purple + pink)                       */

/* ---------- world palettes (beat rh-v2's html:root token block) ---------- */
html:root[data-world="cinema"][data-world] {
  --ink: #14050A; --ink-2: #1F0A11; --panel: #2A0E17; --line: #4E1F2B; --line-soft: #30111B;
  --fg: #F4E9DC; --fg-2: #DCCAB8; --fg-muted: #AE968B;
  --lime: #D4AF5A; --sec: #D4AF5A; --accent-fill-hover: #E3C47A; --accent-solid-hover: #E3C47A;
  --text-muted: #C4AE9F;
  --world-glow: rgba(212,175,90,.16);
}
html:root[data-world="automotive"][data-world] {
  --ink: #0B111B; --ink-2: #111A28; --panel: #162130; --line: #2B3B52; --line-soft: #19253A;
  --fg: #E8EEF5; --fg-2: #BCC9D7; --fg-muted: #8193A8;
  --lime: #A9BED3; --sec: #E5352B; --yellow: #BFD0E2; --accent-fill-hover: #C4D4E4; --accent-solid-hover: #C4D4E4;
  --text-muted: #9FB0C3;
  --world-glow: rgba(229,53,43,.14);
}
html:root[data-world="reality"][data-world] {
  --ink: #14051F; --ink-2: #1D0A2C; --panel: #27103B; --line: #4A2163; --line-soft: #2C1342;
  --fg: #F7EBFF; --fg-2: #DCC6EA; --fg-muted: #A68DB8;
  --lime: #FF2E93; --sec: #FF2E93; --accent-fill-hover: #FF5AAA; --accent-solid-hover: #FF5AAA;
  --text-muted: #C2A8D4;
  --world-glow: rgba(255,46,147,.18);
}
/* Markets is the one light world: newsprint paper, ink type, green/red for direction. */
html:root[data-world="markets"][data-world] {
  color-scheme: light;
  --ink: #F4F1EA; --ink-2: #ECE7DB; --panel: #FBF9F4; --line: #CFC8B8; --line-soft: #E2DCCD;
  --fg: #15171C; --fg-2: #33363D; --fg-muted: #5B5E66;
  --lime: #11744A; --sec: #15171C; --accent-fill-hover: #0D5E3C; --accent-solid-hover: #0D5E3C;
  --accent-ink: #FFFFFF;
  --text-muted: #4A4D55;
  --yellow: #8A6A00; --orange: #B45309; --red: #B42D22; --grey: #5B5E66;
  --verdict-must: #11744A; --verdict-text-must: #11744A; --verdict-good: #8A6A00; --verdict-text-good: #8A6A00;
  --verdict-onetime: #B45309; --verdict-text-onetime: #B45309; --verdict-skip: #B42D22; --verdict-text-skip: #B42D22;
  --pos: #11744A; --mid: #8A6A00; --neg: #B42D22; --gold: #11744A;
  --pill-success-bg: rgba(17,116,74,.1); --pill-success-text: #11744A;
  --pill-neutral-bg: rgba(21,23,28,.06); --pill-neutral-text: #33363D;
  --pill-danger-bg: rgba(180,45,34,.09); --pill-danger-text: #B42D22;
  --world-glow: rgba(17,116,74,0);
}

/* Mind & Living: warm paper, deep brown ink, saffron. Light, like Markets. */
html:root[data-world="mind"][data-world] {
  color-scheme: light;
  --ink: #F2E4CC; --ink-2: #EAD8B8; --panel: #FBF3E3; --line: #D8BF96; --line-soft: #E5D2B0;
  --fg: #2E1B0E; --fg-2: #4A3220; --fg-muted: #7A5C40;
  --lime: #B4530F; --sec: #B4530F; --accent-fill-hover: #8F400A; --accent-solid-hover: #8F400A;
  --accent-ink: #FFFFFF; --text-muted: #5E4630;
  --red: #A3301B; --yellow: #8A6A00; --orange: #B4530F; --grey: #7A5C40;
  --navy: #3A2414; --navy-2: #4A3220; --navy-border: #4A3220;
  --world-glow: rgba(212,106,20,.20);
}
html[data-world="mind"] .gx-logo span { color: #5E7A00; }

/* The footer is the live ReviewHub footer everywhere: it keeps its own ink palette. */
html body .rhv-foot {
  --ink: #0A0B10; --ink-2: #12142B; --panel: #191C3F; --line: #2E3260; --line-soft: #1B1E3A;
  --fg: #E8E9F0; --fg-2: #C8CAE0; --fg-muted: #8B8FA8; --lime: #C6F432;
  --red: #FF3B30; --yellow: #FFD23F; --orange: #FF7A1A; --grey: #8B8FA8;
  color-scheme: dark; margin-top: 80px;
}

/* A soft world-coloured light at the top of every page, like the homepage chapters. */
html[data-world] body { background-image: radial-gradient(1200px 520px at 70% -120px, var(--world-glow), transparent 70%) !important; background-repeat: no-repeat !important; }

/* ---------- floating GenXT header ---------- */
html body.rhv-has-chrome::before { content: none; }
.gx-top-wrap { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60; padding: 14px clamp(16px, 4vw, 56px) 0; pointer-events: none; }
.gx-top { pointer-events: auto; max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 24px; padding: 8px 10px 8px 22px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 30%, transparent); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); box-shadow: 0 10px 30px rgba(0,0,0,.18); transition: background-color .5s, box-shadow .5s; }
.gx-top.is-scrolled { background: color-mix(in srgb, var(--ink) 72%, transparent); box-shadow: 0 14px 40px rgba(0,0,0,.28); }
.gx-logo { font: 400 30px/1 'Bebas Neue', Impact, sans-serif !important; letter-spacing: .03em; text-decoration: none; color: var(--fg) !important; white-space: nowrap; }
.gx-logo span { color: #C6F432; font-family: inherit !important; }
html[data-world="markets"] .gx-logo span { color: #5E7A00; }
.gx-nav { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.gx-nav::-webkit-scrollbar { display: none; }
.gx-nav a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; font-size: 16px; padding: 9px 14px; border-radius: 999px; color: var(--fg) !important; opacity: .82; transition: opacity .2s, background-color .2s; }
.gx-nav a:hover, .gx-nav a.on { opacity: 1; background: color-mix(in srgb, var(--fg) 10%, transparent); }
.gx-nav a.on { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 22%, transparent); }
.gx-nav a i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.gx-nav small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.gx-ig { display: inline-flex; width: 40px; height: 40px; border-radius: 12px; align-items: center; justify-content: center; color: #fff !important; flex: none;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); box-shadow: 0 4px 14px rgba(214,36,159,.35); transition: transform .2s; }
.gx-ig:hover { transform: scale(1.08); }
.gx-ig svg { width: 18px; height: 18px; }
/* section links carried over from each page's old menu, as a quiet row under the pill */
.gx-sub { pointer-events: auto; max-width: 1320px; margin: 10px auto 0; display: flex; gap: 6px 8px; flex-wrap: wrap; padding: 0 6px; }
.gx-sub a { font-size: 15px; padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--fg-2) !important; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 55%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.gx-sub a:hover { color: var(--fg) !important; border-color: var(--sec); }
/* the section row stays visible: it is how phones reach a section's pages */
@media (max-width: 760px) {
  .gx-top-wrap { padding-top: 10px; }
  .gx-top { gap: 8px 12px; padding: 8px 8px 6px 16px; border-radius: 24px; flex-wrap: wrap; }
  .gx-nav { order: 3; width: 100%; margin-left: 0; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .gx-ig { margin-left: auto; }
  .gx-sub { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .gx-sub a { white-space: nowrap; }
}

/* ---------- world signatures (small, one per world) ---------- */
/* Cinema: gold hairline rules framing the page title, like a marquee. */
html[data-world="cinema"] body h1 { color: var(--fg); text-shadow: 0 0 40px rgba(212,175,90,.18); }
html[data-world="cinema"] body .movie-banner::after { background: linear-gradient(180deg, rgba(20,5,10,.45), rgba(20,5,10,.97)) !important; }
html[data-world="cinema"] body .vhero::after, html[data-world="cinema"] body .vhero::before { background: linear-gradient(90deg, rgba(20,5,10,.95) 10%, rgba(20,5,10,.35)) !important; }
/* Automotive: a race-red stripe under section headings. */
html[data-world="automotive"] body h2::after { content: ''; display: block; width: 56px; height: 4px; margin-top: 10px; background: linear-gradient(90deg, #E5352B 0 60%, #A9BED3 60%); border-radius: 2px; }
html[data-world="automotive"] body .vhero::after, html[data-world="automotive"] body .vhero::before { background: linear-gradient(90deg, rgba(11,17,27,.95) 10%, rgba(11,17,27,.35)) !important; }
/* Reality: stage-light glow on titles. */
html[data-world="reality"] body h1 { text-shadow: 0 0 34px rgba(255,46,147,.35); }
/* Markets: newspaper double rule under the page title, and paper cards with ink borders. */
html[data-world="markets"] body h1 { border-bottom: 3px double var(--fg); padding-bottom: 10px; }
html[data-world="markets"] body .vhero::after, html[data-world="markets"] body .vhero::before { background: linear-gradient(90deg, rgba(244,241,234,.97) 25%, rgba(244,241,234,.55)) !important; }
html[data-world="markets"] body .vhero, html[data-world="markets"] body .vhero * { text-shadow: none !important; }
html[data-world="markets"] body .tt-header { background: var(--ink-2) !important; }
html[data-world="markets"] body .ipo-tab.active, html[data-world="markets"] body .pill-tab.active { background: var(--fg) !important; color: var(--ink) !important; }

/* ---------- Filter bar (dropdowns built by rh-chrome.js from the page's chips) ---------- */
html body .gx-filter-src { display: none !important; }
.gx-filters { margin: 18px 0 8px; }
.gx-filters-row { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.gx-select { position: relative; flex: 1 1 260px; min-width: 0; max-width: 520px; display: block; }
.gx-select svg { position: absolute; left: 18px; top: 50%; translate: 0 -50%; width: 19px; height: 19px; fill: none; stroke: var(--lime); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.gx-select::after { content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; border-right: 1.8px solid var(--fg-2); border-bottom: 1.8px solid var(--fg-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
html body .gx-select select { -webkit-appearance: none; appearance: none; width: 100%; height: 58px; padding: 0 48px 0 52px; border-radius: 14px; border: 1px solid var(--line) !important; background: var(--ink) !important; color: var(--fg) !important; font-size: 18px; cursor: pointer; text-overflow: ellipsis; transition: border-color .2s, box-shadow .2s; font-family: 'Times New Roman', Times, serif !important; }
html body .gx-select select:hover { border-color: color-mix(in srgb, var(--lime) 55%, var(--line)) !important; }
html body .gx-select select:focus-visible { outline: none; border-color: var(--lime) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 25%, transparent); }
html body .gx-select select option { background: var(--panel); color: var(--fg); }
.gx-sort { flex: none; display: inline-flex; align-items: center; gap: 10px; height: 58px; min-width: 58px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--ink); color: var(--fg-2); cursor: pointer; font-size: 16px; transition: border-color .2s; }
.gx-sort:hover { border-color: color-mix(in srgb, var(--lime) 55%, var(--line)); color: var(--fg); }
.gx-sort:focus-visible { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 25%, transparent); }
.gx-sort svg { width: 20px; height: 20px; fill: none; stroke: var(--lime); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gx-sort span { white-space: nowrap; }
.gx-filters-note { margin: 12px 0 0; font-size: 16px; color: var(--fg-muted); }
@media (max-width: 760px) {
  .gx-filters-row { gap: 10px; }
  .gx-select { flex: 1 1 100%; max-width: none; }
  /* the sort button sits beside the last dropdown */
  .gx-filters-row > .gx-select:nth-last-child(2) { flex: 1 1 0; }
  html body .gx-select select { height: 52px; font-size: 16px; padding-left: 44px; padding-right: 36px; }
  .gx-select svg { left: 14px; }
  .gx-select::after { right: 15px; }
  .gx-sort { height: 52px; min-width: 52px; padding: 0 14px; }
}

@media (prefers-reduced-motion: reduce) { .gx-top, .gx-ig { transition: none; } }

/* Markets: the stocks pages' market strip stays a dark ink "ticker board" band
   (like the homepage tape), so its white figures keep their contrast. */
html[data-world="markets"] body .tt-strip { --navy: #15171C; --navy-2: #1F2229; --navy-border: #2E323B; background: #15171C !important; }
html[data-world="markets"] body .tt-strip .tt-idx-pill-change.up { color: #4ADE80; }
html[data-world="markets"] body .tt-strip .tt-idx-pill-change.down { color: #F87171; }
html[data-world="markets"] body .tt-search { background: rgba(21,23,28,.05) !important; border-color: var(--line) !important; }
html[data-world="markets"] body .tt-search input { color: var(--fg) !important; background: transparent !important; }
html[data-world="markets"] body .tt-search input::placeholder { color: var(--fg-muted); }
html[data-world="markets"] body .tt-search svg { color: var(--fg-muted); }
/* "navy" on the stocks pages always means a dark panel with white type (letter badges,
   the Explore widget, the Start-learning button), so in Markets it stays ink. */
html:root[data-world="markets"][data-world] { --navy: #15171C; --navy-2: #2E323B; --navy-border: #2E323B; --on-navy: #F4F1EA; --on-navy-muted: #C9CCD3; }
html[data-world="markets"] body .tt-header { --navy: var(--ink-2); }
html[data-world="markets"] body .learn-banner-links a { background: var(--panel) !important; }

/* ---------- Site structure: sections with dropdowns in the floating menu ---------- */
.gx-nav { overflow: visible; }
.gx-item { position: relative; display: flex; }
.gx-tl { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; font-size: 16px; padding: 9px 14px; border-radius: 999px; color: var(--fg, var(--page-fg)) !important; opacity: .85; transition: opacity .2s, background-color .2s; }
.gx-tl i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.gx-tl:hover, .gx-tl.on, .gx-item:focus-within > .gx-tl { opacity: 1; background: color-mix(in srgb, var(--fg, var(--page-fg)) 10%, transparent); }
.gx-tl.on { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg, var(--page-fg)) 22%, transparent); }
.gx-chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .7; transition: transform .2s; margin-left: -2px; }
.gx-dd { position: absolute; top: calc(100% + 12px); left: 0; min-width: 240px; padding: 8px; border-radius: 18px; display: none; flex-direction: column; gap: 2px; z-index: 90;
  background: color-mix(in srgb, #0A0B10 88%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.12); border-top: 3px solid var(--c); box-shadow: 0 22px 50px rgba(0,0,0,.4); }
.gx-dd::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.gx-item.has-dd:hover .gx-dd, .gx-item.has-dd:focus-within .gx-dd { display: flex; }
.gx-item.has-dd:hover .gx-chev, .gx-item.has-dd:focus-within .gx-chev { transform: rotate(180deg); }
.gx-dd a, .gx-dd .soon { display: block; padding: 9px 12px; border-radius: 10px; font-size: 16px; white-space: nowrap; color: #F1EEE6 !important; text-decoration: none; }
.gx-dd a:hover, .gx-dd a:focus-visible { background: rgba(255,255,255,.08); outline: none; }
.gx-dd a.on { box-shadow: inset 3px 0 0 var(--c); background: rgba(255,255,255,.06); }
.gx-dd .soon, .gx-sub .soon { color: #8E8A80 !important; cursor: default; }
.soon small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-left: 6px; opacity: .8; }
.gx-nav .gx-item:last-child .gx-dd { left: auto; right: 0; }
.gx-sub-h { font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 400; align-self: center; padding: 0 6px; white-space: nowrap; flex: none; }
.gx-sub .soon { font-size: 15px; padding: 6px 12px; }
.gx-sub a.on { color: var(--fg) !important; border-color: var(--sec, currentColor) !important; }
@media (max-width: 760px), (hover: none) {
  .gx-dd, .gx-chev { display: none !important; }
  .gx-nav { overflow-x: auto; }
}

/* Stocks hub on phones: long text in a row's right-hand column pushed the page sideways. */
@media (max-width: 760px) {
  html body .row-item { flex-wrap: wrap; }
  html body .row-end { flex-shrink: 1; min-width: 0; max-width: 100%; text-align: left; overflow-wrap: anywhere; }
}