/* ReviewHub v2 — "Ink & Lime" theme layer (chosen 9 Oct 2026).
   Loaded AFTER styles.css (and after any page's own <style>) on every page.
   It only re-skins: no page content is hidden except the old duplicate nav
   bars that rh-chrome.js replaces with the shared header. */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* Tokens. html:root and the [data-theme] variants out-rank both the shared
   light/dark blocks in styles.css and the per-page :root overrides. */
html:root, html:root[data-theme="light"], html:root[data-theme="dark"], html:root:not([data-theme="light"]) {
  color-scheme: dark;
  --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;
  --sec: var(--lime);              /* section signal colour, set per page */

  --bg: var(--ink);
  --bg-elevated: var(--panel);
  --bg-elevated-2: var(--ink-2);
  --border: var(--line);
  --border-hover: var(--lime);
  --text: var(--fg);
  --text-secondary: var(--fg-2);
  --text-muted: #A3A7BF;
  --text-faint: var(--fg-muted);
  --rh-navy: var(--panel);
  --rh-navy-2: var(--line);
  --rh-on-navy: var(--fg);
  --rh-on-navy-muted: var(--fg-2);
  --accent-fill: var(--lime);
  --accent-fill-hover: #D4FA5C;
  --accent-ink: var(--ink);
  --accent-solid: var(--lime);
  --accent-solid-hover: #D4FA5C;
  --accent-1: var(--lime);
  --accent-2: var(--lime);
  --accent-gradient: var(--lime);
  --brand-red: var(--red);
  --brand-red-hover: #FF5E55;
  --brand-green: var(--lime);
  --brand-green-text: var(--lime);
  --success: var(--lime);
  --warning: var(--yellow);
  --error: var(--red);
  --verdict-must: var(--lime);
  --verdict-good: var(--yellow);
  --verdict-onetime: var(--orange);
  --verdict-wait: var(--grey);
  --verdict-skip: var(--red);
  --verdict-text-must: var(--lime);
  --verdict-text-good: var(--yellow);
  --verdict-text-onetime: var(--orange);
  --verdict-text-wait: var(--grey);
  --verdict-text-skip: var(--red);
  --pill-success-bg: rgba(198,244,50,.12);
  --pill-success-text: var(--lime);
  --pill-neutral-bg: rgba(255,255,255,.06);
  --pill-neutral-text: var(--fg-2);
  --pill-danger-bg: rgba(255,59,48,.14);
  --pill-danger-text: #FF6B62;
  /* page-local token names used by cars/stocks/bigg-boss pages */
  --navy: var(--panel); --navy-2: var(--line); --surface: var(--panel); --surface-2: var(--ink-2);
  --card: var(--panel); --track: var(--line); --gold: var(--lime);
  --pos: var(--lime); --mid: var(--yellow); --neg: var(--red);
  --on-navy: var(--fg); --on-navy-muted: var(--fg-2);
}
html:root[data-section="movies"] { --sec: var(--red); }
html:root[data-section="cars"] { --sec: var(--yellow); }
html:root[data-section="accessories"] { --sec: var(--lime); }
html:root[data-section="stocks"] { --sec: var(--grey); }
html:root[data-section="bigg"] { --sec: var(--orange); }

html body { background: var(--ink) !important; background-image: none !important; color: var(--fg); }
html body .ambient, html body .grain { display: none !important; }

/* Type: Times New Roman for text, Bebas Neue for headlines. */
html body, html body * { font-family: 'Times New Roman', Times, serif !important; }
html body h1, html body h2, html body .hero-title, html body .vhero-title, html body .hub-headline,
html body .section-heading h2, html body .rhv-d, html body .rhv-d *, html body .wordmark, html body .hub-logo, html body .hp-logo,
html body .cmp-title, html body .big, html body .score {
  font-family: 'Bebas Neue', Impact, sans-serif !important;
  letter-spacing: .02em; font-weight: 400 !important; text-transform: uppercase; line-height: .95;
}
html body h1, html body .hero-title, html body .vhero-title { font-size: clamp(56px, 8vw, 140px); }
html body h2, html body .section-heading h2 { font-size: clamp(36px, 4vw, 56px); }
html body h3 { color: var(--fg); }
html body a { color: inherit; }
html body .score::before, html body .score::after, html body .big::before, html body .big::after { content: none !important; }

/* Surfaces */
html body .card, html body .card-box, html body .summary-card, html body .video-card, html body .score-panel,
html body .leaderboard-row, html body .hub-tile, html body .aggregate-panel, html body .callout, html body .cmp-card,
html body .breakdown-row, html body .box, html body .bd, html body .pcard, html body .tbl-wrap, html body .form-section {
  background: var(--panel) !important; border-color: var(--line) !important; color: var(--fg);
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body .card::before, html body .card::after, html body .video-card::before, html body .video-card::after { display: none !important; }
html body .card:hover, html body .video-card:hover, html body .leaderboard-row:hover { border-color: var(--sec) !important; }

/* Controls */
html body .chip { background: transparent !important; color: var(--fg) !important; border: 1px solid var(--line) !important; border-radius: 999px !important; }
html body .chip.active, html body .chip[aria-pressed="true"] { background: var(--sec) !important; color: var(--ink) !important; border-color: var(--sec) !important; }
html body .btn-primary, html body .btn.primary { background: var(--lime) !important; color: var(--ink) !important; border-color: var(--lime) !important; border-radius: 999px !important; }
html body .btn, html body .btn-secondary { border-radius: 999px !important; }
html body .search-input, html body input, html body select, html body textarea { background: var(--ink-2) !important; color: var(--fg) !important; border-color: var(--line) !important; }
html body .watch-link, html body .back-link { color: var(--lime) !important; }
html body .filter-label, html body .eyebrow, html body .label { color: var(--fg-muted) !important; letter-spacing: .16em; }
html body .muted { color: var(--fg-muted) !important; }
html body table th { color: var(--fg-muted); }
html body table td, html body table th { border-color: var(--line-soft) !important; }

/* Banners keep their photos but get the ink overlay */
html body .movie-banner::after { background: linear-gradient(180deg, rgba(10,11,16,.55), rgba(10,11,16,.96)) !important; }
html body .vhero::after, html body .vhero::before { background: linear-gradient(90deg, rgba(10,11,16,.95) 10%, rgba(10,11,16,.35)) !important; }
html body .vhero { border-radius: 0 !important; }

/* Old per-page nav bars are replaced by the shared header (rh-chrome.js). */
html body .rhv-has-chrome .vhero-nav, html body.rhv-has-chrome .vhero-nav,
html body.rhv-has-chrome .header-top, html body.rhv-has-chrome .hub-nav-top,
html body.rhv-has-chrome .cmp-nav, html body.rhv-has-chrome main > nav.nav { display: none !important; }
html body.rhv-has-chrome .site-footer, html body.rhv-has-chrome .hub-footer-bar, html body.rhv-has-chrome footer.pg { display: none !important; }

/* ---------- Shared header (M3 frame) ---------- */
.rhv-stripe { display: flex; height: 6px; }
.rhv-stripe i { flex: 1; display: block; }
.rhv-stripe i:nth-child(1) { background: var(--red); } .rhv-stripe i:nth-child(2) { background: var(--yellow); }
.rhv-stripe i:nth-child(3) { background: var(--lime); } .rhv-stripe i:nth-child(4) { background: var(--grey); }
.rhv-stripe i:nth-child(5) { background: var(--orange); }
.rhv-head { position: relative; z-index: 50; border-bottom: 1px solid var(--line-soft); background: var(--ink); }
.rhv-head-in { max-width: 1360px; margin: 0 auto; padding: 16px 40px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.rhv-logo { font-family: 'Bebas Neue', Impact, sans-serif !important; font-size: 38px; line-height: 1; letter-spacing: .02em; color: var(--fg) !important; text-decoration: none; }
.rhv-logo span { color: var(--lime); font-family: inherit !important; }
.rhv-nav { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; font-size: 17px; }
.rhv-nav a { padding: 10px 15px; border-radius: 999px; text-decoration: none; color: var(--fg) !important; white-space: nowrap; }
.rhv-nav a:hover { background: var(--ink-2); }
.rhv-nav a .rhv-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.rhv-nav a.on { background: var(--panel); box-shadow: inset 0 0 0 1px var(--sec); }
.rhv-nav .rhv-ig { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); }
.rhv-nav .rhv-ig svg { width: 18px; height: 18px; }

/* ---------- Shared footer ---------- */
.rhv-foot { background: #06070B; margin-top: 60px; }
.rhv-foot-in { max-width: 1360px; margin: 0 auto; padding: 44px 40px 0; display: grid; grid-template-columns: minmax(0,1.5fr) repeat(4, minmax(0,1fr)); gap: 28px; }
.rhv-foot h4 { margin: 0 0 12px; font-size: 13px !important; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; font-family: 'Times New Roman', Times, serif !important; }
.rhv-foot .col { border-top: 3px solid var(--c, var(--line)); padding-top: 12px; }
.rhv-foot .col a { display: block; color: var(--fg) !important; font-size: 17px; margin-bottom: 8px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(232,233,240,.3); }
.rhv-foot .col a:hover { color: var(--c, var(--lime)) !important; }
.rhv-foot p { color: var(--fg-2); font-size: 17px; line-height: 1.55; margin: 0 0 14px; }
.rhv-foot .note { font-size: 14px; color: var(--fg-muted); line-height: 1.55; }
.rhv-foot .ig { display: inline-flex; gap: 8px; align-items: center; background: var(--lime); color: var(--ink) !important; padding: 12px 20px; border-radius: 999px; text-decoration: none; font-size: 16px; }
.rhv-foot-word { max-width: 1360px; margin: 18px auto 0; padding: 0 40px; font-family: 'Bebas Neue', Impact, sans-serif !important; font-size: clamp(90px, 15vw, 220px); line-height: .8; color: #14163A; white-space: nowrap; overflow: hidden; }
.rhv-foot-word span { color: #1F2A0C; font-family: inherit !important; }
.rhv-foot-bot { max-width: 1360px; margin: 0 auto; padding: 14px 40px 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 15px; color: var(--fg-muted); }

/* Reusable bits for page layouts */
.rhv-wrap { max-width: 1360px; margin: 0 auto; padding: 0 40px; }
.rhv-kicker { font-size: 14px; letter-spacing: .22em; text-transform: uppercase; color: var(--sec); }
.rhv-kicker::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--sec); margin-right: 8px; vertical-align: 1px; }
.rhv-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font-size: 17px; text-decoration: none !important; background: var(--sec); color: var(--ink) !important; border: 0; cursor: pointer; }
.rhv-btn.ghost { background: transparent; color: var(--fg) !important; border: 1px solid var(--line); }
.rhv-secbar { border-top: 3px solid var(--sec); padding-top: 14px; }

@media (max-width: 760px) {
  .rhv-head-in { padding: 12px 16px; }
  .rhv-nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; font-size: 15px; }
  .rhv-nav a { padding: 9px 12px; }
  .rhv-foot-in { grid-template-columns: 1fr; padding: 34px 16px 0; }
  .rhv-foot-word, .rhv-foot-bot, .rhv-wrap { padding-left: 16px; padding-right: 16px; }
}

/* Sub-menu: links carried over from a page's old nav bar */
.rhv-subnav { border-bottom: 1px solid var(--line-soft); background: var(--ink-2); }
.rhv-subnav-in { max-width: 1360px; margin: 0 auto; padding: 10px 40px; display: flex; gap: 8px 22px; flex-wrap: wrap; font-size: 16px; }
.rhv-subnav a { color: var(--fg-2) !important; text-decoration: none; }
.rhv-subnav a:hover { color: var(--sec) !important; }
@media (max-width: 760px) { .rhv-subnav-in { padding: 10px 16px; overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; } }
@media (max-width: 1100px) and (min-width: 761px) { .rhv-foot-in { grid-template-columns: repeat(3, minmax(0,1fr)); } .rhv-foot-in > div:first-child { grid-column: 1 / -1; } }
html body h1 *, html body h2 *, html body .hero-title *, html body .vhero-title * { font-family: inherit !important; }

/* Stocks section: its own menu bar becomes the section sub-menu */
html body .tt-header { background: var(--ink-2) !important; border-bottom: 1px solid var(--line-soft); }
html body .tt-header .wordmark, html body .tt-header .nav-social, html body .tt-header-top > .tt-header-left > .wordmark { display: none !important; }
html body .tt-header-top { max-width: 1360px; margin: 0 auto; padding: 10px 40px !important; }
html body .tt-nav a { color: var(--fg-2) !important; font-weight: 400 !important; font-size: 16px !important; }
html body .tt-nav a:hover { color: var(--fg) !important; }
html body .tt-nav a.active { color: var(--fg) !important; border-bottom-color: var(--grey) !important; }

/* Hard-coded light panels from the old cream theme */
html body .td-card, html body .td-idx { background: var(--panel) !important; border-color: var(--line) !important; }
html body .td-card-head, html body .td-detail, html body .td-watchnext, html body .cw-compare-take,
html body .ipo-tab, html body .pill-tab, html body .tool-nav, html body .learn-banner-links a {
  background: var(--ink-2) !important; border-color: var(--line) !important; color: var(--fg-2) !important;
}
html body .ipo-tab.active, html body .pill-tab.active { background: var(--fg) !important; color: var(--ink) !important; }
html body .scan-filter-field input, html body .tool-field input, html body .tool-field select { background: var(--ink-2) !important; color: var(--fg) !important; border-color: var(--line) !important; }
html body .td-card *, html body .td-detail *, html body .td-watchnext { color: inherit; }
html body .td-card { color: var(--fg-2) !important; }
@media (max-width: 760px) { html body .tt-header-top { padding: 10px 16px !important; } html body .tt-nav { flex-wrap: nowrap; overflow-x: auto; } }
@media (max-width: 760px) {
  html body .tt-header-left { min-width: 0 !important; max-width: 100% !important; flex: 1 1 100% !important; }
  html body .tt-nav { min-width: 0 !important; max-width: 100% !important; overflow-x: auto; flex-wrap: nowrap !important; white-space: nowrap; }
  html body .tt-header-right { max-width: 100%; }
}