/* Cadence — Performance Marketing Operations System */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Light mode — warm stone-tinted neutrals */
  --bg: oklch(0.992 0.003 80);
  --bg-elev: oklch(1 0 0);
  --bg-sunken: oklch(0.975 0.004 80);
  --bg-hover: oklch(0.965 0.005 80);
  --surface: oklch(1 0 0);
  --border: oklch(0.92 0.005 80);
  --border-strong: oklch(0.86 0.006 80);
  --border-subtle: oklch(0.95 0.004 80);

  --text: oklch(0.22 0.008 270);
  --text-muted: oklch(0.5 0.008 270);
  --text-subtle: oklch(0.65 0.008 270);
  --text-faint: oklch(0.78 0.008 270);

  /* Brand: violet → crimson gradient */
  --brand-1: oklch(0.55 0.22 295);  /* violet */
  --brand-2: oklch(0.6 0.22 15);    /* crimson */
  --brand-grad: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%);
  --brand-grad-soft: linear-gradient(135deg, oklch(0.55 0.22 295 / .12), oklch(0.6 0.22 15 / .12));
  --brand-solid: oklch(0.55 0.22 295);
  --brand-solid-hover: oklch(0.5 0.22 295);
  --brand-tint: oklch(0.55 0.22 295 / .08);
  --brand-tint-strong: oklch(0.55 0.22 295 / .14);

  /* Semantic */
  --pos: oklch(0.62 0.14 155);
  --pos-bg: oklch(0.62 0.14 155 / .1);
  --neg: oklch(0.58 0.18 25);
  --neg-bg: oklch(0.58 0.18 25 / .1);
  --warn: oklch(0.72 0.13 75);
  --warn-bg: oklch(0.72 0.13 75 / .14);
  --info: oklch(0.6 0.12 235);
  --info-bg: oklch(0.6 0.12 235 / .1);

  /* Shape */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 8px;
  --r-4: 12px;
  --r-5: 16px;

  /* Density (overridden by tweaks) */
  --row-h: 52px;
  --pad-y: 14px;
  --pad-x: 16px;

  /* Sidebar */
  --sidebar-w: 232px;
  --topbar-h: 56px;

  --shadow-sm: 0 1px 2px oklch(0.2 0.01 270 / .04);
  --shadow-md: 0 4px 12px oklch(0.2 0.01 270 / .06), 0 1px 3px oklch(0.2 0.01 270 / .04);
  --shadow-lg: 0 12px 40px oklch(0.2 0.01 270 / .12), 0 2px 8px oklch(0.2 0.01 270 / .06);
  --shadow-panel: -16px 0 40px oklch(0.2 0.01 270 / .08);
}

[data-theme="dark"] {
  --bg: oklch(0.16 0.005 270);
  --bg-elev: oklch(0.2 0.006 270);
  --bg-sunken: oklch(0.13 0.005 270);
  --bg-hover: oklch(0.22 0.007 270);
  --surface: oklch(0.2 0.006 270);
  --border: oklch(0.27 0.008 270);
  --border-strong: oklch(0.34 0.01 270);
  --border-subtle: oklch(0.23 0.007 270);

  --text: oklch(0.96 0.004 270);
  /* In dark mode every "less prominent" text shade still needs to sit ABOVE
     the background lightness (~0.16) to remain readable. Previous values
     (0.55 / 0.4) were inverted from the light-mode logic and rendered the
     "Total spend" / "Blended CPL" labels nearly invisible on dark cards. */
  --text-muted: oklch(0.78 0.008 270);
  --text-subtle: oklch(0.66 0.008 270);
  --text-faint: oklch(0.55 0.008 270);

  --brand-1: oklch(0.65 0.22 295);
  --brand-2: oklch(0.68 0.22 15);
  --brand-solid: oklch(0.7 0.2 295);
  --brand-solid-hover: oklch(0.75 0.2 295);
  --brand-tint: oklch(0.7 0.2 295 / .14);
  --brand-tint-strong: oklch(0.7 0.2 295 / .22);

  --pos: oklch(0.72 0.16 155);
  --pos-bg: oklch(0.72 0.16 155 / .14);
  --neg: oklch(0.7 0.2 25);
  --neg-bg: oklch(0.7 0.2 25 / .14);
  --warn: oklch(0.8 0.14 75);
  --warn-bg: oklch(0.8 0.14 75 / .16);
  --info: oklch(0.72 0.14 235);
  --info-bg: oklch(0.72 0.14 235 / .14);

  --shadow-sm: 0 1px 2px oklch(0 0 0 / .3);
  --shadow-md: 0 4px 12px oklch(0 0 0 / .35), 0 1px 3px oklch(0 0 0 / .2);
  --shadow-lg: 0 12px 40px oklch(0 0 0 / .5);
  --shadow-panel: -16px 0 40px oklch(0 0 0 / .35);
}

[data-density="dense"] {
  --row-h: 40px;
  --pad-y: 8px;
  --pad-x: 12px;
}
[data-density="comfortable"] {
  --row-h: 60px;
  --pad-y: 18px;
  --pad-x: 20px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}
#root { height: 100vh; }

/* Strip the browser's default button styling so <button class="card">
   (used for clickable client cards) actually renders our card background
   instead of the platform's grey buttonface. Specific button classes
   (.btn, .btn-primary, …) re-apply their own styling further down. */
button { font-family: inherit; cursor: default; background: transparent; color: inherit; border: none; padding: 0; }
input, textarea, select { font-family: inherit; color: inherit; }

/* ---------- Layout ---------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  background: var(--bg);
}
.app[data-collapsed="true"] { --sidebar-w: 60px; }

/* Hamburger button — only shown on mobile, hidden by default. */
.menu-btn { display: none; }

/* ---------- Mobile (< 768px) ---------- */
@media (max-width: 767.98px) {
  /* Single-column layout: main fills the screen, sidebar slides over it. */
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 84vw;
    max-width: 320px;
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 90;
    box-shadow: var(--shadow-lg);
  }
  .app[data-mobile-open="true"] .sidebar { transform: translateX(0); }
  .app[data-mobile-open="true"]::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 80;
  }
  .menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: var(--r-2);
    background: transparent;
    color: var(--text-muted);
    margin-right: 4px;
  }
  .menu-btn:hover { background: var(--bg-hover); color: var(--text); }
  .topbar { padding: 0 12px; gap: 8px; }
  .crumbs { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  /* Search pill becomes an icon-only button to save space. */
  .search-pill span, .search-pill kbd { display: none; }
  .search-pill { padding: 6px 8px; }
  .content { padding: 16px; }
  .content-inner { padding: 0 !important; }
  /* Stack KPI cards and 2-col grids on narrow screens. */
  .stat-grid { grid-template-columns: 1fr 1fr !important; }
  .row-grid { grid-template-columns: 1fr !important; }
}

/* ---------- Mobile (≤ 640px) — tablets in portrait, phones in landscape ---------- */
@media (max-width: 640px) {
  .stat-grid     { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .stat-spark    { display: none; } /* sparkline crowds 2-up KPI cards */
  .search-input  { width: 100%; }
  .filter-row    { gap: 6px; }
  .filter-pill   { font-size: 12px; }
  .side-panel    { width: 100vw; border-left: none; }
  .cmdk          { width: calc(100vw - 24px); }
  .content       { padding: 16px 14px 48px; }
  /* Collapse the Wave 7 layout utilities to a single column. */
  .grid-2,
  .grid-3,
  .preflight-split,
  .report-split,
  .entry-row-grid { grid-template-columns: 1fr !important; }
  /* Drop the 380px sticky preview alongside Pre-Flight; stack it instead. */
  .preflight-split > aside { position: static !important; }
  .table th, .table td { padding: 10px 8px; font-size: 12.5px; }
  /* Tables that genuinely don't fit live inside a .table-scroll wrapper. */
  .table-scroll .table { min-width: 720px; }
  .chart-host { height: 180px; }
  /* Card heads were sized for desktop; tighter padding + smaller title on phones. */
  .card-head  { padding: 10px 14px; }
  .card-title { font-size: 13.5px; }
  /* Stack DL labels above values on narrow screens. */
  .dl-stack { grid-template-columns: 1fr !important; row-gap: 6px; }
  .dl-stack dt { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }

  /* Date range: mobile shows the dropdown only, hides chips + inputs.
     `!important` because the default `.date-range-select { display: none }`
     appears later in the cascade and would otherwise win. */
  .date-range-chips, .date-range-dates { display: none !important; }
  .date-range-select { display: inline-block !important; min-width: 160px; }
}

/* ---------- Mobile (≤ 480px) — actual phones, the 360px baseline ---------- */
@media (max-width: 480px) {
  /* KPI cards stay 2-up on phones — feels denser and more "app-like" than
     a tower of single-column hero cards. Smaller stat font keeps things
     readable without dominating the viewport. */
  .stat-grid    { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .stat-card    { padding: 10px 12px; }
  .stat-label   { font-size: 11px; }
  .stat-value   { font-size: 18px; line-height: 1.1; margin-top: 2px; }
  .page-header  { flex-direction: column; align-items: stretch; gap: 10px; }
  .page-title   { font-size: 19px; }
  /* Action buttons in page-header: only force full-width when there are
     multiple. Single buttons stay sized to their content (right-aligned). */
  .page-header > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .page-header > div:last-child:has(.btn + .btn) { width: 100%; }
  .page-header > div:last-child:has(.btn + .btn) .btn { flex: 1; justify-content: center; min-width: 0; }
  /* Modals fill the screen edge-to-edge — easier to tap on a phone. */
  .modal-form { width: 100% !important; max-width: 100% !important; padding: 16px !important; max-height: 100vh !important; border-radius: 0 !important; }
  /* Settings tabs scroll horizontally if they overflow. */
  .tabs { overflow-x: auto; flex-wrap: nowrap; }
  /* Search pill is a desktop affordance — Cmd-K isn't a thing on touch.
     Hide it entirely on phones to free up topbar space; the keyboard
     shortcut still works for anyone who has a Bluetooth keyboard. */
  .search-pill { display: none !important; }
  /* Topbar is dense on small screens — let the workspace crumb breathe. */
  .topbar { padding: 0 10px; gap: 6px; }
  /* Sidebar drawer items: bigger tap targets so fat fingers don't miss. */
  .nav-item { padding: 12px 12px; min-height: 44px; }
}

/* ---------- Wave 9 — bottom nav, FAB, sheets, registry cards (mobile native) ---------- */
:root { --bottom-nav-h: 56px; }

/* Default-hidden — mobile media query below shows them. */
.bottom-nav             { display: none; }
.fab                    { display: none; }
.ad-cards               { display: none; }
.preflight-mobile-submit { display: none; }
.preflight-section-next { display: none; }

@media (max-width: 640px) {
  /* Bottom tab bar — fixed, 5-up grid, safe-area-inset for notched phones. */
  .bottom-nav {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0;
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--surface); border-top: 1px solid var(--border);
    z-index: 90;
  }
  .bottom-nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 10.5px; font-weight: 500;
    padding: 4px 2px; min-height: 44px;
  }
  .bottom-nav-item[data-active="true"] { color: var(--brand-solid); }
  .bottom-nav-item svg { width: 22px; height: 22px; }

  /* Bump bottom padding so content clears the bar (was 48px from Wave 7). */
  .content { padding: 16px 14px 76px !important; }

  /* Registry: hide table, show cards. */
  .table-scroll { display: none; }
  .ad-cards { display: flex; flex-direction: column; gap: 10px; padding: 10px; }
  .ad-card {
    width: 100%; text-align: left; cursor: pointer;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-2); padding: 12px;
    display: flex; flex-direction: column; gap: 8px;
    font: inherit; color: inherit;
  }
  .ad-card:active { background: var(--bg-hover); }
  .ad-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
  .ad-card-name { font-size: 14.5px; font-weight: 600; line-height: 1.25; }
  .ad-card-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
  .ad-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 6px; border-top: 1px solid var(--border-subtle); }
  .ad-card-stat { display: flex; flex-direction: column; gap: 2px; }
  .ad-card-stat-label { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
  .ad-card-stat-value { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }

  /* FAB — floats above the bottom nav. */
  .fab {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 16px;
    bottom: calc(var(--bottom-nav-h) + 16px + env(safe-area-inset-bottom, 0px));
    width: 56px; height: 56px; border-radius: 999px;
    background: var(--brand-grad); color: #fff; border: none;
    box-shadow: var(--shadow-lg); cursor: pointer; z-index: 95;
  }
  .fab:active { transform: scale(0.96); }

  /* Preflight: sticky submit bar + per-section Next + hide desktop submit. */
  .preflight-mobile-submit {
    display: block; position: sticky;
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    margin: 12px -14px 0; padding: 10px 14px;
    background: var(--surface); border-top: 1px solid var(--border);
    z-index: 50;
  }
  .preflight-mobile-submit .btn { width: 100%; height: 44px; }
  .preflight-section-next { display: flex; justify-content: flex-end; margin-top: 12px; }
  .preflight-section-next .btn { min-width: 120px; }
  .page-header .preflight-desktop-submit { display: none; }

  /* Shared sheet (More menu + custom date range). */
  .sheet-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 100;
    animation: fadeIn 150ms ease;
  }
  .sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 101;
    background: var(--surface);
    border-top-left-radius: 16px; border-top-right-radius: 16px;
    padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
    animation: slideUp 200ms ease;
  }
  .sheet-handle { width: 36px; height: 4px; border-radius: 999px; background: var(--border-strong); margin: 4px auto 12px; }
  .sheet-title  { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
  .sheet-list   { display: flex; flex-direction: column; gap: 2px; }
  .sheet-list .nav-item { width: 100%; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ---------- Touch devices (any width) — fingers need bigger targets ---------- */
@media (pointer: coarse) {
  .icon-btn, .menu-btn { width: 40px; height: 40px; }
  .btn-sm              { height: 34px; padding: 0 12px; font-size: 13px; }
  .filter-pill         { min-height: 36px; }
  .nav-item            { min-height: 36px; }
  /* font-size ≥ 16px disables iOS Safari's auto-zoom-on-focus for inputs. */
  .input, .select, .textarea, .auth-input { font-size: 16px; }
}

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--bg-sunken);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 12px 10px;
  gap: 4px;
  overflow: hidden;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 16px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 8px;
}
.brand-mark {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--brand-grad);
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px oklch(0 0 0 / .08), inset 0 1px 0 oklch(1 0 0 / .25);
}
.brand-mark::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 3px;
  background: oklch(1 0 0 / .92);
  clip-path: polygon(0 35%, 35% 35%, 50% 0, 65% 65%, 100% 65%, 100% 78%, 60% 78%, 50% 100%, 35% 50%, 0 50%);
}
.brand-name {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.brand-sub {
  font-size: 10.5px;
  color: var(--text-subtle);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
.sidebar-section {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 600;
  padding: 12px 10px 6px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r-2);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  transition: background 120ms, color 120ms;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text); }
.nav-item[data-active="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--border);
}
.nav-item[data-active="true"] .nav-icon { color: var(--brand-solid); }
.nav-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-subtle); }
.nav-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  background: var(--bg-hover);
  color: var(--text-muted);
  padding: 1px 6px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.nav-item[data-active="true"] .nav-badge { background: var(--brand-tint); color: var(--brand-solid); }

.sidebar-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--r-2);
}
.sidebar-user:hover { background: var(--bg-hover); }
.avatar {
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--brand-grad);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  flex-shrink: 0;
}
.user-meta { line-height: 1.2; min-width: 0; }
.user-name { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 11px; color: var(--text-subtle); }

/* ---------- Main / Topbar ---------- */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.topbar {
  height: var(--topbar-h);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  background: var(--bg);
  flex-shrink: 0;
}
.crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}
.crumbs .sep { color: var(--text-faint); }
.crumbs .current { color: var(--text); font-weight: 500; }
.search-pill {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--bg-sunken);
  color: var(--text-subtle);
  font-size: 13px;
  width: 280px;
  transition: border-color 120ms;
}
.search-pill:hover { border-color: var(--border-strong); }
.search-pill kbd {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 2px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-subtle);
}
.icon-btn {
  width: 32px; height: 32px;
  border-radius: var(--r-2);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 120ms, color 120ms;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }
.icon-btn svg { width: 15px; height: 15px; }

/* ---------- Content ---------- */
.content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 28px 32px 64px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.content::-webkit-scrollbar { width: 10px; }
.content::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
.content-inner { max-width: 1280px; margin: 0 auto; }

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.page-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0 0 4px;
  color: var(--text);
}
.page-sub {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-2);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background 120ms, border-color 120ms, color 120ms, transform 60ms;
  white-space: nowrap;
}
.btn:active { transform: translateY(0.5px); }
.btn svg { width: 14px; height: 14px; }
.btn-primary {
  background: var(--brand-grad);
  color: white;
  box-shadow: 0 1px 0 oklch(1 0 0 / .15) inset, 0 1px 2px oklch(0 0 0 / .15);
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-secondary {
  background: var(--bg-elev);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.btn-ghost {
  background: transparent;
  color: var(--text-muted);
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }
.btn-sm { height: 28px; font-size: 12.5px; padding: 0 10px; }
.btn-lg { height: 38px; padding: 0 16px; font-size: 14px; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  overflow: hidden;
}
.card-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.005em;
}
.card-body { padding: 18px; }

/* ---------- Stat Cards ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  max-width: calc(100% - 90px);
}
.stat-label svg { width: 13px; height: 13px; color: var(--text-subtle); }
.stat-value {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.stat-unit {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}
.stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 500;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.stat-delta[data-dir="up"] { color: var(--pos); }
.stat-delta[data-dir="down"] { color: var(--neg); }
.stat-delta[data-dir="flat"] { color: var(--text-muted); }
.stat-delta svg { width: 12px; height: 12px; }
.stat-spark {
  position: absolute;
  right: 16px;
  bottom: 14px;
  width: 80px;
  height: 32px;
  opacity: 0.7;
  pointer-events: none;
}

/* ---------- Tables ---------- */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table th {
  text-align: left;
  font-weight: 500;
  color: var(--text-subtle);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.table td {
  padding: 14px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text);
  vertical-align: middle;
}
.table tbody tr { transition: background 120ms; }
.table tbody tr:hover { background: var(--bg-hover); }
.table tbody tr:last-child td { border-bottom: none; }
.table .num { font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* Neutral default for badges with no data-tone (e.g. "No live ads") so
     they're legible on both light and dark cards. Tone-specific badges
     below override these. */
  background: var(--bg-hover);
  color: var(--text-muted);
}
.badge-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: currentColor;
}
.badge[data-tone="live"] { background: var(--pos-bg); color: var(--pos); }
.badge[data-tone="paused"] { background: var(--warn-bg); color: var(--warn); }
.badge[data-tone="ended"] { background: var(--bg-hover); color: var(--text-muted); }
.badge[data-tone="testing"] { background: var(--info-bg); color: var(--info); }
.badge[data-tone="archived"] { background: var(--bg-hover); color: var(--text-subtle); }
.badge[data-tone="brand"] { background: var(--brand-tint); color: var(--brand-solid); }

/* ---------- Filters / Pills ---------- */
.filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--r-2);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.filter-pill:hover { background: var(--bg-hover); color: var(--text); }
.filter-pill[data-active="true"] {
  background: var(--brand-tint);
  border-color: oklch(0.55 0.22 295 / .25);
  color: var(--brand-solid);
}
.filter-pill svg { width: 13px; height: 13px; }
.search-input {
  height: 30px;
  padding: 0 10px 0 30px;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--bg-elev) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") no-repeat 10px center;
  font-size: 13px;
  color: var(--text);
  width: 240px;
  outline: none;
  transition: border-color 120ms;
}
.search-input:focus { border-color: var(--brand-solid); box-shadow: 0 0 0 3px var(--brand-tint); }

/* ---------- Forms ---------- */
.form-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  margin-bottom: 14px;
  overflow: hidden;
}
.form-section-head {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: default;
  user-select: none;
}
.form-section-num {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.form-section-num[data-done="true"] {
  background: var(--brand-grad);
  border-color: transparent;
  color: white;
}
.form-section-title { font-size: 14px; font-weight: 600; }
.form-section-meta { margin-left: auto; font-size: 12px; color: var(--text-subtle); }
.form-section-body { padding: 4px 20px 20px; display: grid; gap: 14px; }
.form-section[data-open="false"] .form-section-body { display: none; }
.form-section[data-open="false"] .form-section-head { border-bottom: none; }
.form-section[data-open="true"] .form-section-head { border-bottom: 1px solid var(--border-subtle); }

.field { display: grid; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.label .req {
  width: 4px; height: 4px;
  border-radius: 999px;
  background: var(--brand-solid);
  display: inline-block;
}
.input, .textarea, .select {
  width: 100%;
  height: 36px;
  padding:  6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--bg-elev);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
.textarea { height: auto; padding: 10px 12px; resize: vertical; min-height: 80px; line-height: 1.5; }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--brand-solid);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.input[data-error="true"] { border-color: var(--neg); }
.help { font-size: 11.5px; color: var(--text-subtle); }
.error { font-size: 11.5px; color: var(--neg); }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--bg-elev);
  transition: border-color 120ms, background 120ms;
}
.checkbox:hover { border-color: var(--border-strong); }
.checkbox[data-checked="true"] { background: var(--brand-tint); border-color: oklch(0.55 0.22 295 / .3); }
.check-box {
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border-strong);
  flex-shrink: 0;
  margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elev);
  transition: all 150ms;
}
.checkbox[data-checked="true"] .check-box {
  background: var(--brand-grad);
  border-color: transparent;
  transform: scale(1.05);
}
.check-box svg {
  width: 11px; height: 11px;
  color: white;
  opacity: 0;
  transition: opacity 150ms;
}
.checkbox[data-checked="true"] .check-box svg { opacity: 1; }
.check-label { font-size: 13px; color: var(--text); line-height: 1.35; }
.check-help { font-size: 11.5px; color: var(--text-subtle); margin-top: 2px; }

/* ---------- Side panel ---------- */
.side-panel-overlay {
  position: fixed;
  inset: 0;
  background: oklch(0.2 0.01 270 / .35);
  backdrop-filter: blur(2px);
  z-index: 100;
  animation: fade-in 150ms ease;
}
[data-theme="dark"] .side-panel-overlay { background: oklch(0 0 0 / .55); }
.side-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 520px;
  background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-panel);
  z-index: 101;
  display: flex;
  flex-direction: column;
  animation: slide-in 220ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-in { from { transform: translateX(20px); opacity: 0.8; } to { transform: translateX(0); opacity: 1; } }
.panel-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.panel-title { font-size: 15px; font-weight: 600; }
.panel-body { flex: 1; overflow-y: auto; padding: 22px; }

/* ---------- Empty state ---------- */
.empty {
  text-align: center;
  padding: 56px 24px;
}
.empty-icon {
  width: 48px; height: 48px;
  margin: 0 auto 14px;
  border-radius: var(--r-3);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-subtle);
}
.empty-icon svg { width: 22px; height: 22px; }
.empty-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.empty-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }

/* ---------- Misc ---------- */
.kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 1px 5px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-subtle);
}
.divider { height: 1px; background: var(--border-subtle); margin: 16px 0; }
.dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.tab {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 120ms, border-color 120ms;
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
}
.tab:hover { color: var(--text); }
.tab[data-active="true"] {
  color: var(--text);
  border-bottom-color: var(--brand-solid);
}

.platform-icon {
  width: 18px; height: 18px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}
.platform-icon[data-platform="meta"] { background: oklch(0.55 0.18 250); }
.platform-icon[data-platform="google"] { background: oklch(0.6 0.18 30); }
.platform-icon[data-platform="linkedin"] { background: oklch(0.45 0.13 240); }
.platform-icon[data-platform="tiktok"] { background: oklch(0.25 0.01 270); }
.platform-icon[data-platform="x"] { background: oklch(0.2 0.005 270); }

.client-logo {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: var(--r-3);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: toast-in 250ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes toast-in { from { transform: translate(-50%, 12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.toast[data-tone="success"] { background: var(--pos); color: white; }
.toast[data-tone="error"]   { background: var(--neg); color: white; }
.toast[data-tone="warn"]    { background: var(--warn); color: white; }

/* Universal busy-state spinner. Add data-busy="true" to any button or block
   to render a spinner inline before the content. Pair with disabled to prevent
   double-clicks during the in-flight request. */
[data-busy="true"] {
  position: relative;
  pointer-events: none;
  cursor: wait;
}
[data-busy="true"]::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  vertical-align: -2px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 600ms linear infinite;
  opacity: 0.85;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Loading skeleton tile — shimmer to cue "we're fetching, not empty". */
.skeleton-tile {
  background: linear-gradient(90deg, var(--bg-sunken) 0%, var(--bg-hover) 50%, var(--bg-sunken) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.row-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
}

/* ---------- Layout utilities (used by Wave 7 mobile rules) ----------
   These replace inline `gridTemplateColumns: '...'` declarations in JSX so
   our mobile media queries below can collapse them to single column. The
   desktop dimensions match what each screen used inline before. */
.grid-2          { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3          { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.preflight-split { display: grid; grid-template-columns: 1fr 380px; gap: 20px; align-items: flex-start; }
.report-split    { display: grid; grid-template-columns: 1fr 1fr; gap: 0; height: 100%; min-height: 0; }
.entry-row-grid  { display: grid; grid-template-columns: minmax(0,1.4fr) repeat(4, minmax(0,1fr)) 80px; gap: 10px; align-items: center; }
.chart-host      { height: 220px; }
.dl-stack        { display: grid; grid-template-columns: 160px 1fr; row-gap: 10px; }
/* Modal width helper — most modals are 560px max but we let ones that need
   smaller widths cap themselves with an inline maxWidth override. */
.modal-form      { width: 560px; max-width: 100%; padding: 24px; max-height: 90vh; overflow: auto; }
/* Wrap a wide table to make it horizontally scrollable on mobile. */
.table-scroll    { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* DateRangePresets — desktop shows chips + inputs; mobile collapses to one
   <select>. Mobile rules in the @media block below. */
.date-range            { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.date-range-chips      { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.date-range-dates      { display: inline-flex; align-items: center; gap: 6px; }
.date-range-select     { display: none; } /* shown only on mobile */

/* Tiny responsive helpers — keep one variant of a line per viewport. */
.show-on-mobile        { display: none; }
.hide-on-mobile        { display: inline; }
@media (max-width: 640px) {
  .show-on-mobile      { display: inline; }
  .hide-on-mobile      { display: none; }
}

/* ---------- Cmd+K ---------- */
.cmdk-overlay {
  position: fixed;
  inset: 0;
  background: oklch(0.2 0.01 270 / .35);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
  animation: fade-in 120ms ease;
}
[data-theme="dark"] .cmdk-overlay { background: oklch(0 0 0 / .55); }
.cmdk {
  width: 560px;
  max-width: calc(100vw - 32px);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: cmdk-in 160ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes cmdk-in { from { transform: translateY(-6px); opacity: 0.6; } to { transform: translateY(0); opacity: 1; } }
.cmdk-search {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: none;
  background: transparent;
  font-size: 14px;
  outline: none;
  color: var(--text);
  border-bottom: 1px solid var(--border-subtle);
}
.cmdk-list { max-height: 360px; overflow-y: auto; padding: 6px; }
.cmdk-section { font-size: 10.5px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; padding: 8px 10px 4px; }
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-2);
  font-size: 13px;
  color: var(--text);
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.cmdk-item[data-selected="true"] { background: var(--brand-tint); }
.cmdk-item svg { width: 15px; height: 15px; color: var(--text-subtle); }
.cmdk-item[data-selected="true"] svg { color: var(--brand-solid); }
.cmdk-foot {
  padding: 8px 14px;
  border-top: 1px solid var(--border-subtle);
  font-size: 11.5px;
  color: var(--text-subtle);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  background: var(--bg-sunken);
}

/* Scrollbars on side panels */
.panel-body::-webkit-scrollbar, .cmdk-list::-webkit-scrollbar { width: 8px; }
.panel-body::-webkit-scrollbar-thumb, .cmdk-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

/* Progress bar */
.progress {
  height: 6px;
  background: var(--bg-hover);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--brand-grad);
  border-radius: 999px;
  transition: width 250ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Number input animation on input */
@keyframes pulse-saved {
  0% { background: var(--pos-bg); }
  100% { background: transparent; }
}
.saved-flash { animation: pulse-saved 800ms ease; }

/* ── ACG-branded report document ──────────────────────────────────────────────
   Magazine-style layout used in the live preview and when printing to PDF.
   Colours are literal (not theme vars) so the printed output is stable. */
.report-print-area {
  /* The report deliverable uses Inter for all running/heading text. Redefining
     --font-sans only on this scope keeps the rest of the app on Geist, while
     every sans element inside the report (titles, body, headings) becomes Inter.
     The monospace accents (labels, table numerals, footer) stay Geist Mono. */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: #f5f4f0;
  color: #1a1a1a;
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  font-family: var(--font-sans);
}
.rep-page {
  display: flex;
  flex-direction: column;
  min-height: 960px;
  padding: 50px 54px;
  position: relative;
}
.rep-page + .rep-page { border-top: 1px solid #e6e4dd; }

/* ACG lockup */
.acg-logo { display: flex; align-items: center; gap: 12px; }
.acg-wm { display: flex; align-items: flex-start; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: #161616; line-height: 1; }
.acg-mark-img { width: 15px; height: auto; margin-left: 3px; margin-top: -4px; display: inline-block; }
/* Official ACG lockup images (real asset). Dark version on light pages,
   white version on the dark title cover. */
.acg-img { height: 38px; width: auto; display: block; }
.acg-cover-img { height: 64px; width: auto; display: block; }
.acg-div { width: 1px; height: 32px; background: #cfcdc4; }
.acg-sub { display: flex; flex-direction: column; font-size: 8px; line-height: 1.3; letter-spacing: 0.1em; color: #3a3a36; font-weight: 600; }
/* Logo on a dark background (the title cover) */
.acg-logo.light .acg-wm { color: #fff; }
.acg-logo.light .acg-div { background: rgba(255,255,255,0.4); }
.acg-logo.light .acg-sub { color: rgba(255,255,255,0.82); }

/* Dark, dramatic title cover (page 1) */
.rep-cover-dark {
  position: relative;
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(58% 64% at 60% 30%, rgba(66, 60, 190, 0.55), transparent 60%),
    radial-gradient(52% 50% at 44% 82%, rgba(158, 70, 180, 0.45), transparent 60%),
    radial-gradient(44% 62% at 84% 60%, rgba(48, 28, 110, 0.45), transparent 72%),
    radial-gradient(70% 80% at 70% 45%, rgba(30, 26, 70, 0.4), transparent 75%),
    #07060a;
}
.rep-cover-dark::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 17%;
  background: linear-gradient(90deg, #110f16 0%, rgba(17,15,22,0) 100%);
  z-index: 0;
}
.rep-cover-dark > * { position: relative; z-index: 1; }
/* Full-bleed gradient image behind the cover content. As a real <img> it prints
   even when "Background graphics" is off; the CSS gradient above is the on-screen
   / fallback. */
.rep-cover-dark > .rep-cover-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.rep-cover-dark .rep-cover-top { justify-content: flex-end; }
.rep-dark-block { margin-top: auto; margin-bottom: 19%; max-width: 620px; }
.rep-dark-client { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #9a98ac; margin-bottom: 18px; }
.rep-dark-title { margin: 0; font-size: 62px; line-height: 1.05; font-weight: 500; letter-spacing: -0.02em; color: #fff; }
.rep-dark-rule { width: 300px; height: 1px; background: rgba(255,255,255,0.32); margin: 28px 0 18px; }
.rep-dark-sub { font-size: 22px; font-weight: 400; color: #bcbaca; }

/* Cover */
.rep-cover-top { display: flex; justify-content: space-between; align-items: flex-start; }
.rep-week { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: #9a988f; padding-top: 4px; }
.rep-kicker { margin-top: 44px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: #301934; font-weight: 600; }
.rep-title { margin: 16px 0 0; font-size: 56px; line-height: 1.03; font-weight: 800; letter-spacing: -0.025em; color: #141414; }
.rep-lede { margin: 22px 0 0; max-width: 440px; font-size: 15px; line-height: 1.6; color: #6b6a64; }
.rep-hero { margin-top: 52px; border-top: 1px solid #e0ded6; border-bottom: 1px solid #e0ded6; padding: 30px 0; display: flex; align-items: center; gap: 30px; }
.rep-hero-num { font-size: 82px; font-weight: 800; color: #301934; letter-spacing: -0.03em; line-height: 0.85; }
.rep-hero-pct { font-size: 38px; }
.rep-hero-txt { font-size: 15px; line-height: 1.5; color: #3a3a36; max-width: 260px; }
.rep-hero-txt b { color: #301934; font-weight: 700; }
.rep-meta { margin-top: auto; padding-top: 44px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rep-meta-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: #9a988f; }
.rep-meta-v { margin-top: 6px; font-size: 14px; color: #1a1a1a; }

/* Section pages */
.rep-sec-h { font-size: 25px; font-weight: 800; letter-spacing: -0.01em; color: #141414; margin-bottom: 22px; }
.rep-sec-n { color: #301934; font-size: 13px; font-weight: 700; vertical-align: super; margin-right: 10px; font-family: var(--font-mono); }
.rep-body { font-size: 13.5px; line-height: 1.7; color: #3a3a36; white-space: pre-line; max-width: 640px; }
.rep-narr { margin: 0 0 30px; }

.rep-metrics { border-top: 1px solid #e0ded6; }
.rep-metric { display: flex; justify-content: space-between; align-items: flex-end; padding: 17px 0; border-bottom: 1px solid #e0ded6; }
.rep-metric-l { font-size: 16px; color: #1a1a1a; }
.rep-metric-sub { font-size: 12px; color: #9a988f; margin-top: 3px; }
.rep-metric-v { font-size: 32px; font-weight: 800; color: #301934; letter-spacing: -0.02em; line-height: 1; }
.rep-metric-d { font-family: var(--font-mono); font-size: 11px; color: #9a988f; margin-top: 7px; letter-spacing: 0.03em; }

.rep-box { margin-top: 26px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #e0ded6; border-radius: 6px; overflow: hidden; }
.rep-box-c { padding: 16px 18px; border-right: 1px solid #e0ded6; }
.rep-box-c:last-child { border-right: none; }
.rep-box-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: #9a988f; }
.rep-box-v { font-size: 22px; font-weight: 700; margin-top: 6px; color: #1a1a1a; }
.rep-box-d { font-family: var(--font-mono); font-size: 10px; color: #9a988f; margin-top: 5px; letter-spacing: 0.02em; }

/* Campaign table */
.rep-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rep-table th { text-align: right; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: #9a988f; font-weight: 500; padding: 0 0 12px; border-bottom: 1px solid #d8d6cd; }
.rep-table th:first-child { text-align: left; }
.rep-table td { padding: 15px 0; border-bottom: 1px solid #ebe9e2; text-align: right; font-family: var(--font-mono); color: #33332f; vertical-align: top; }
.rep-table td:first-child { text-align: left; font-family: var(--font-sans); }
.rep-camp-name { font-weight: 600; color: #161616; }
.rep-camp-sub { font-size: 11px; color: #9a988f; margin-top: 3px; font-family: var(--font-mono); }
.rep-row-winner td { background: #f0eaef; }
.rep-row-winner td:first-child { box-shadow: inset 3px 0 0 #301934; padding-left: 12px; }
.rep-winner-tag { display: inline-block; margin-left: 8px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.1em; color: #301934; border: 1px solid #301934; border-radius: 3px; padding: 1px 5px; vertical-align: middle; }
.rep-table .ctr-win { color: #301934; font-weight: 700; }
.rep-total td { font-weight: 700; color: #161616; border-bottom: none; border-top: 2px solid #161616; padding-top: 14px; }
.rep-total td:first-child { font-family: var(--font-sans); }

/* Insights */
.rep-insight { display: flex; gap: 22px; padding: 24px 0; border-bottom: 1px solid #e0ded6; }
.rep-insight:first-child { border-top: 1px solid #e0ded6; }
.rep-insight-n { font-size: 32px; font-weight: 800; color: #301934; line-height: 1; min-width: 48px; }
.rep-insight-t { font-size: 17px; font-weight: 700; color: #161616; margin-bottom: 6px; }
.rep-insight-b { font-size: 13px; line-height: 1.65; color: #5a5954; max-width: 560px; white-space: pre-line; }
.rep-source { margin-top: 28px; font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: #a8a69d; max-width: 640px; }

/* Footer line on section pages */
.rep-foot { margin-top: auto; padding-top: 40px; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: #b8b6ad; }

/* Print: when the user hits "Print / save PDF" on the Reports page, hide the
   sidebar, topbar, builder pane, etc. — only the report-print-area gets ink. */
@media print {
  /* Hide the app chrome and the editor pane / toolbar — keep only the report
     document, in normal flow (NOT absolutely positioned). Normal flow is what
     lets Chrome apply the named @page below; an absolutely-positioned printable
     area makes Chrome ignore per-page margins + footers. */
  .sidebar, .topbar, .read-only-banner, .report-print-hide,
  .app-shell { display: none !important; }
  .report-split > *:first-child { display: none !important; }   /* the editor pane */

  /* Collapse the layout wrappers so the document spans the full page width. */
  /* Cream page background so the content-page margins (and the @page footer
     band) read as the same cream as the report — edge-to-edge, no white frame.
     The dark cover paints over it with its own full-bleed background. */
  html, body { margin: 0 !important; padding: 0 !important; background: #f5f4f0 !important; }
  .app, .main, .content, .report-split, .report-preview-pane {
    display: block !important;
    width: auto !important; max-width: none !important;
    height: auto !important; min-height: 0 !important;
    margin: 0 !important; padding: 0 !important;
    overflow: visible !important;
    background: none !important; box-shadow: none !important;
  }
  .report-print-area {
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .report-print-area * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Two page types:
     • Title pages (dark cover + light overview) print full-bleed and fill the
       sheet — no footer.
     • Content pages (Executive Summary, Campaign Analysis, Key Insights) use a
       named page with real margins, and the browser draws the footer + page
       number in the bottom margin of EVERY sheet they span. So a long section
       (e.g. many Key Insights) flows across as many sheets as it needs, and the
       footer is always at the true bottom of each printed page — never floating
       mid-page, and the numbering always matches the physical pages. */
  @page { size: A4 portrait; margin: 0; }            /* default = title pages, full bleed */
  @page contentpg {
    size: A4 portrait;
    /* No top/side margins: the cream content element bleeds to those edges so
       there's never a white frame (real Chrome doesn't reliably paint the page
       margins from the html background). Only a bottom band is reserved, for the
       browser-drawn footer + page number. */
    margin: 0 0 13mm 0;
    @bottom-left {
      content: "ACG · APOLLO CONSULTING GROUP";
      font-family: "Geist Mono", ui-monospace, monospace;
      font-size: 7.5pt; letter-spacing: 1.5px; color: #aeaca3;
      margin-left: 15mm;
    }
    @bottom-right {
      content: counter(page, decimal-leading-zero);
      font-family: "Geist Mono", ui-monospace, monospace;
      font-size: 7.5pt; letter-spacing: 1px; color: #aeaca3;
      margin-right: 15mm;
    }
  }

  /* Every section starts on a fresh sheet. */
  .rep-page { border-top: none !important; break-after: page; page-break-after: always; }
  .rep-page:last-child { break-after: auto; page-break-after: auto; }

  /* Title pages fill the whole sheet; their inset padding lives inside. */
  .rep-cover-dark, .rep-page.rep-cover {
    min-height: 297mm !important;
    padding: 16mm 15mm !important;
  }

  /* Content pages: the cream comes from the element itself (full-bleed on top
     and sides via margin:0), with the text inset by padding. min-height fills
     the sheet so short pages are cream to the bottom; long pages flow to extra
     sheets, and the @page footer band appears at the bottom of each. */
  .rep-page:not(.rep-cover):not(.rep-cover-dark) {
    page: contentpg;
    background: #f5f4f0 !important;
    min-height: 284mm !important;        /* A4 height (297mm) minus the 13mm footer band */
    padding: 16mm 15mm 8mm !important;
  }
  .rep-foot { display: none !important; }   /* replaced by the @page footer in print */
}