/* ============================================================
   Global foundation — loaded once in app/layout.tsx for EVERY surface.

   Deliberately tiny and selector-free: @font-face, the reset, the :root
   token block, the page background, and the reduced-motion blanket. It
   holds no components. Everything visual is scoped to its own shell
   (.ptx = dashboard, .adx = admin, .bf = buy-flow) or to a page's inline
   <style>, so nothing here can bleed into a surface that didn't ask.

   This was carved out of the old 3,430-line dashboard.css, which styled the
   pre-Petal board. That board is gone; ~300 of its class names had zero
   references left. Only these first ~140 lines were still load-bearing, so
   the rest was deleted rather than shipped to every visitor.
   ============================================================ */

/* --- Local Poppins: 300 (Light), 500 (Medium), 600 (SemiBold). --- */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/media/font/poppins-v24-latin/poppins-v24-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/media/font/poppins-v24-latin/poppins-v24-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/media/font/poppins-v24-latin/poppins-v24-latin-600.woff2') format('woff2');
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Prevent the browser's scroll-anchor from auto-scrolling the page down
   when animated cards move upward into their resting positions on load. */
html { overflow-anchor: none; }

/* === Design system ===
   "Modern slick minimalism": a near-white canvas, pure-white flat surfaces
   separated by TONE (never borders or shadows), and a single vibrant indigo
   accent that harmonises with the (untouched) logo mark.

   Token NAMES are preserved verbatim — they are referenced throughout this
   file AND inline in several .tsx components — so the palette is re-skinned
   by RE-POINTING values rather than renaming. The per-LLM data-series colours
   (green / pink / orange / red-orange / yellow / gemini-blue / claude-red)
   are intentionally left unchanged so charts keep their established meaning.

   sRGB hex first (universal fallback), then display-p3 overrides for
   wide-gamut displays. */
:root {
  --blue-bg:      #eceef5;   /* page canvas — soft cool grey (one shade down) */
  --deep-blue:    #6065f9;   /* PRIMARY ACCENT — matches the logo indigo */
  --green:        #80a89c;   /* ChatGPT series / positive sentiment */
  --pink:         #ce7c98;   /* Perplexity series */
  --orange:       #fdc684;   /* brand-switch pill */
  --red-orange:   #fc9786;   /* Grok series / negative / errors */
  --yellow:       #f4e38e;   /* upgrade pill / gauge "avg" */
  --gemini-blue:  #5766e3;   /* generic chart-palette blue (sentiment bars / source pies) */
  --gemini-violet: #9168e0;  /* Gemini line + legend swatch — mirrors COLORS.gemini (dashboard.js); sRGB-only so the swatch matches the line exactly */
  --claude-red:   #cb7c5e;   /* Claude series */
  --text-black:   #1d1d22;   /* PRIMARY INK — crisp near-black */
  --chart-grey:   #646b7a;   /* secondary / muted ink, axis labels */
  --mid-grey:     #e6e8f1;   /* faint divider tint */

  /* — New design-system tokens (the file had none: no radius / spacing /
       surface / motion scale existed before) — */
  --accent:        var(--deep-blue);
  --accent-press:  #4a50ec;                  /* pressed / active indigo */
  --accent-weak:   rgba(96, 101, 249, 0.10); /* tint fills, focus rings */
  --accent-weak-2: rgba(96, 101, 249, 0.18);
  --ink:           var(--text-black);
  --ink-muted:     var(--chart-grey);
  --ink-faint:     #9aa0b2;
  --surface:       #ffffff;   /* cards, topbar */
  --surface-2:     #f1f2f9;   /* filled inputs, chips, hover fills, tracks */
  --surface-3:     #e9ebf6;   /* floating popover menus (tonal lift, no shadow) */
  --hover:         #eef0f8;
  --selected:      #e8e9fd;   /* indigo-tinted selection */

  --radius-sm:   10px;
  --radius:      14px;
  --radius-lg:   18px;        /* cards — generous, modern */
  --radius-pill: 999px;

  --dur:   0.18s;             /* snappy default for micro-interactions */
  --dur-2: 0.28s;
  --ease:  cubic-bezier(0.4, 0, 0.2, 1);
}
@supports (color: color(display-p3 1 1 1)) {
  /* Wide-gamut overrides for the re-pointed chrome tokens + unchanged series
     colours. Data-series tuples are the original saturation-boosted values. */
  :root {
    --blue-bg:      color(display-p3 0.925 0.933 0.961);
    --deep-blue:    color(display-p3 0.360 0.388 0.985);
    --green:        color(display-p3 0.445 0.715 0.575);
    --pink:         color(display-p3 0.870 0.415 0.570);
    --orange:       color(display-p3 1.000 0.740 0.430);
    --red-orange:   color(display-p3 1.000 0.510 0.430);
    --yellow:       color(display-p3 1.000 0.890 0.460);
    --gemini-blue:  color(display-p3 0.265 0.330 1.000);
    --claude-red:   color(display-p3 0.875 0.405 0.250);
    --text-black:   color(display-p3 0.114 0.114 0.133);
    --mid-grey:     color(display-p3 0.902 0.910 0.945);
    --accent-press: color(display-p3 0.290 0.314 0.925);
  }
}

html, body {
  height: 100%;
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--text-black);
  -webkit-font-smoothing: antialiased;
  background: var(--blue-bg);
}
/* Two very soft, large-radius indigo glows (top-right + bottom-left) — the
   page's only "decoration", giving depth without a border or shadow.
   Rendered on a dedicated FIXED, GPU-composited layer rather than via
   `background-attachment: fixed`, which repaints both gradients on every
   scroll frame and made scrolling stutter. This layer is composited once and
   simply held in place by the compositor as the page scrolls. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 720px at 82% -10%, rgba(96, 101, 249, 0.06) 0%, rgba(96, 101, 249, 0) 60%),
    radial-gradient(1000px 760px at -5% 108%, rgba(96, 101, 249, 0.05) 0%, rgba(96, 101, 249, 0) 55%);
  transform: translateZ(0);   /* promote to its own layer; no scroll-time repaint */
}
/* Reserve scrollbar space so the viewport width is identical
   whether the page is short enough to hide the scrollbar or long
   enough to need one. Without this, expand/minimize transitions
   between a 2-row and 3-row layout cause the scrollbar to appear
   or disappear, which nudges every grid column's `1fr` width by
   ~7-8 px — and that nudge gets picked up by the enlarge FLIP as a
   "card moved" event on cards that should be stationary.
   Mobile (≤640 px) is single-column and locks scroll while the
   burger menu is open; reserving a gutter there just leaves a
   phantom blue strip where the scrollbar used to be. */
@media (min-width: 641px) {
  html {
    scrollbar-gutter: stable;
  }
}

/* === Reduced motion ===
   Respect the OS "reduce motion" setting by neutralising CSS transitions and
   animations everywhere. The Petal shell layers its own, more targeted
   reduced-motion rules on top (dashboard-petal.css); this blanket is what
   covers the auth, paywall, welcome and lastrun pages. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}