/* ============================================================
   hero-stage.css - the extension-overlay browser mockup (.stage):
   FB/Google Ads table with the TrueMetriks columns sliding over it.
   Shared by the homepage hero, chrome-extension.html and the analytics
   page; home.js drives the animation. The phone layout is scoped to a
   `.home` ancestor, so wrap the stage in one on every page.
   ============================================================ */

/* --- HERO - extension overlay stage ----------------------- */
/* Row/header heights drive both the native rows and the TM toolbar/header
   so the overlay strips line up flush over the browser chrome (no gap). */
.stage {
  --rowh: 38px;
  --headh: 42px;
  position: relative;
  max-width: 920px;
  margin: var(--space-6) auto 0;
}
.stage .browser {
  position: relative;
  background: var(--surface-tint-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl), var(--shadow-brand);
}

/* Native browser chrome strip - height matches the TM toolbar so the toolbar
   fully covers it (no light sliver / gap). */
.stage .chrome {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--headh);
  padding: 0 14px;
  background: var(--surface-tint-2);
  border-bottom: 1px solid var(--color-border);
}
.stage .cd { width: 11px; height: 11px; border-radius: var(--radius-full); }
.stage .url {
  margin-left: var(--space-3);
  font: 12px/1 var(--font-family-base);
  color: var(--color-text-subtle);
  background: var(--surface-tint-1);
  border: 1px solid var(--color-border);
  border-radius: 7px;
  padding: 6px 12px;
}

.stage .native { padding: 0; }
.stage .row {
  display: grid;
  grid-template-columns: 46px 1fr 90px 120px;
  align-items: center;
  height: var(--rowh);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.stage .row.head {
  height: var(--headh);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-subtle);
  font-weight: var(--font-weight-semibold);
  border-top: none;
  background: var(--surface-tint-2);
}
.stage .row .c { padding: 0 10px; text-align: right; }
.stage .row .c.l { text-align: left; display: flex; align-items: center; gap: var(--space-2); }
.stage .toggle {
  width: 26px;
  height: 15px;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  position: relative;
  margin: 0 auto;
}
.stage .toggle:after {
  content: "";
  position: absolute;
  right: 2px;
  top: 2px;
  width: 11px;
  height: 11px;
  border-radius: var(--radius-full);
  background: var(--surface-tint-1);
}
.stage .thumb {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--surface-tint-3), var(--color-brand-2));
  flex: none;
}
.stage .adname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* TM extension toolbar - slides DOWN, height == chrome so it fully covers it.
   Navy strip is a fixed dark surface (literal, intentional) in both themes. */
.stage .tmbar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--headh);
  transform: translateY(-110%);
  transition: transform 0.5s var(--ease-out);
  background: #0c1330; /* fixed navy toolbar; literal preserved intentionally */
  color: #cdd8ff;      /* periwinkle-on-navy label; literal preserved intentionally */
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  font-size: 11px;
  z-index: 6;
}
.stage .tmbar .b { font-weight: var(--font-weight-extra); color: #fff; letter-spacing: -0.01em; font-size: 12.5px; }
.stage .tmbar .chip { color: #9fb0e6; } /* navy-toolbar text; literal preserved */
.stage .tmbar .chip b { color: #fff; font-weight: var(--font-weight-semibold); }
.stage .tmbar .site { margin-left: auto; color: #9fb0e6; }
.stage .tmbar .site b { color: #fff; }

/* TM columns panel - opaque, slides in from right. Sits ABOVE the chrome
   (top:0 of browser) so its navy header connects FLUSH to the toolbar. */
.stage .tmcols {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 470px;
  transform: translateX(108%);
  transition: transform 0.55s var(--ease-out);
  /* The TM overlay is dark in the real product, so the whole panel is navy here
     (the native FB/Google table underneath stays light - our extension columns
     are the dark surface that "overlays" on top). Literal navy preserved
     intentionally, same as the toolbar/header. */
  background: #0c1330;
  border-left: 2px solid var(--color-brand);
  z-index: 5;
  box-shadow: -14px 0 26px -14px rgba(20, 30, 90, 0.30);
}
.stage .trow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  height: var(--rowh);
  border-top: 1px solid rgba(255, 255, 255, 0.08); /* faint divider on navy */
  font-size: 14px;
  background: #0c1330; /* dark overlay rows */
}
/* Header connects to the toolbar: same navy band, white labels. */
.stage .trow.head {
  height: var(--headh);
  border-top: none;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ffffff; /* white labels on the navy strip; literal preserved */
  font-weight: var(--font-weight-bold);
  background: #0c1330; /* fixed navy header; literal preserved intentionally */
}
/* Light numbers on the navy overlay (Spend / Revenue / Sales). ROAS and Profit
   override with semantic green/red below. */
.stage .trow .c { padding: 0 10px; text-align: right; color: #e4e9ff; font-weight: var(--font-weight-semibold); }
.stage .roas { font-weight: var(--font-weight-extra); }
/* ROAS + Profit share the per-row pos/neg flag: green when the campaign is
   profitable, red at break-even/loss (e.g. 0.00x ROAS, negative profit).
   Brightened literals so they read clearly on the navy panel. */
.stage .pos { color: #34D399; font-weight: var(--font-weight-bold); }
.stage .neg { color: #FB7185; font-weight: var(--font-weight-bold); }

.stage.reveal .tmbar { transform: translateY(0); }
.stage.reveal .tmcols { transform: translateX(0); }

.stage .deck { position: relative; }
.stage .panel { transition: opacity 0.5s ease; }
.stage .panel.hidden { opacity: 0; position: absolute; inset: 0; pointer-events: none; }

.stage-caption {
  margin-top: var(--space-4);
  font-size: 16px;
  color: var(--color-text-subtle);
  min-height: 18px;
}
.stage-caption b { color: var(--color-text); }

@media (max-width: 760px) {
  .stage .tmcols { width: 66%; }
}

@media (prefers-reduced-motion: reduce) {
  /* JS leaves the stage in the revealed state (base .stage.reveal rules
     above already set the transforms); here we only kill the transitions. */
  .stage .tmbar, .stage .tmcols { transition: none; }
}

/* Hero dashboard polish (2026-05-31):
   1. Overlay column headers were dark-on-navy (invisible) - force white. The
      cell color is set by `.stage .trow .c` (#1b2550); this equal-specificity
      rule wins by source order for the header row only.
   2. Make the dashboard a touch larger / more substantial (920 -> 1060px,
      slightly taller rows). 360px is unaffected (the mobile @media below caps
      .stage width and these only enlarge it). */
.stage { max-width: 1060px; --rowh: 46px; --headh: 50px; }
.stage .trow.head .c { color: #fff; }
/* ROAS + Profit columns: green when the campaign is profitable, red at
   break-even/loss. Both cells carry the per-row `.c.pos` / `.c.neg` flag (set
   by home.js); these (0,4,0) beat `.stage .trow .c` (0,3,0) which would
   otherwise force the light default on every cell. Brightened literals so the
   green/red read clearly on the navy overlay panel. ROAS is weight-only here so
   its own row's pos/neg color shows through (the cell is `.c.roas.pos`). */
.stage .trow .c.pos { color: #34D399; font-weight: var(--font-weight-bold); }
.stage .trow .c.neg { color: #FB7185; font-weight: var(--font-weight-bold); }
.stage .trow .c.roas { font-weight: var(--font-weight-extra); }
/* Per-platform favicon in the browser chrome bar (toggled by home.js). */
.stage .chrome .fav {
  width: 20px; height: 20px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.stage .chrome .fav svg { width: 20px; height: 20px; display: block; }
.stage .chrome .fav.off { display: none; }
@media (max-width: 700px) { .stage { max-width: 100%; } }

/* --- HERO MOCKUP: PHONE LAYOUT ---------------------------------
   On phones the desktop browser-mockup table (4 native columns ~399px +
   a 5-column overlay ~308px) is far wider than the ~342px browser, so the
   native Cost column clips off the right edge and the overlay's Profit/Sales
   columns run off-screen. Here we (1) tighten the native table so all 4
   columns fit with no clipping, (2) reduce the overlay to the 3 columns the
   caption promises - ROAS, Revenue & Profit (Spend + Sales hidden) - and
   widen its panel, and (3) trim the TM toolbar to brand + Attribution so it
   stays on one line. Rules are `.home`-scoped so they beat the later plain
   `.stage` overrides (var + cell rules) regardless of source order. */
@media (max-width: 600px) {
  .home .stage { --rowh: 40px; --headh: 44px; }

  /* Native FB/Google table - fits all 4 columns, no horizontal clip */
  .home .stage .row {
    grid-template-columns: 34px minmax(0, 1fr) 48px 80px;
    font-size: 11px;
  }
  .home .stage .row.head { font-size: 9.5px; }
  .home .stage .row .c { padding: 0 6px; }
  .home .stage .row .c.l { gap: 6px; }
  .home .stage .thumb { width: 18px; height: 18px; }
  .home .stage .adname { font-size: 11px; }

  /* TM overlay - only ROAS / Revenue / Profit; wider panel for breathing room */
  .home .stage .tmcols { width: 72%; }
  .home .stage .trow { grid-template-columns: repeat(3, 1fr); font-size: 13px; }
  .home .stage .trow.head { font-size: 10.5px; }
  .home .stage .trow .c { padding: 0 7px; }
  .home .stage .trow .c:nth-child(2),  /* Spend  */
  .home .stage .trow .c:nth-child(5) { /* Sales  */
    display: none;
  }

  /* TM toolbar - brand + Attribution only, one line (hide Audience/Columns/Site) */
  .home .stage .tmbar { gap: 8px; font-size: 10px; padding: 0 12px; }
  .home .stage .tmbar .chip ~ .chip,
  .home .stage .tmbar .site { display: none; }
}