/* Shared design system for StratumPPC — used by both index.html and audit.html */

/* === RESET & CUSTOM PROPERTIES === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* ============================================================
     DARK DATA-TERMINAL THEME
     The landing page (revamp/site.css) established a dark navy +
     orange "Bloomberg terminal" aesthetic. This palette carries it
     across the whole app. The variable NAMES are unchanged so the
     existing audit / free-tools / tool CSS flips dark through the
     cascade — only the VALUES moved. Light-theme history is in git.

     Grayscale semantics in this theme:
       --white      → primary card / panel surface (NOT literal white)
       --off-white  → page background (darkest)
       --gray-50    → raised / table-header / hover surface
       --gray-100…300 → hairline borders (translucent white)
       --gray-400…600 → secondary / muted text (translucent white)
       --gray-700…900 → primary text + headings (light ink)
     On-accent text that genuinely needs literal white uses #fff
     directly (patched at the call sites), not --white.
     ============================================================ */

  /* Surfaces (mirror landing --bg-0..4) */
  --bg-0: #0A0E1A;
  --bg-1: #0E1220;
  --bg-2: #11162A;
  --bg-3: #171D33;
  --bg-4: #1B2034;

  --white: #11162A;       /* card/panel surface */
  --off-white: #0A0E1A;   /* page background */
  --gray-50: #171D33;     /* raised surface / table header / row hover */
  --gray-100: rgba(255,255,255,0.08);  /* hairline border */
  --gray-200: rgba(255,255,255,0.14);  /* border */
  --gray-300: rgba(255,255,255,0.22);  /* stronger border */
  --gray-400: rgba(255,255,255,0.56);  /* muted text / hints (AA on dark) */
  --gray-500: rgba(255,255,255,0.60);  /* muted text */
  --gray-600: rgba(255,255,255,0.74);  /* secondary body text */
  --gray-700: rgba(255,255,255,0.85);  /* near-primary text */
  --gray-800: #EEF1F8;    /* primary body text */
  --gray-900: #FFFFFF;    /* headings */

  /* Ink aliases (mirror landing --ink-*) for new dark-aware components */
  --ink:       #FFFFFF;
  --ink-muted: rgba(255,255,255,0.72);
  --ink-dim:   rgba(255,255,255,0.52);
  --ink-faint: rgba(255,255,255,0.32);

  /* Hairlines (mirror landing --line-*) */
  --line:   rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.14);
  --line-3: rgba(255,255,255,0.22);

  /* Brand accent — historically misnamed --blue-* (the hex values are orange).
     Keeping the --blue-* aliases pointing at the same values so any straggler
     reference still resolves; new code should use --accent-*. */
  --accent-500: #D85A30;
  --accent-600: #C04E28;
  --accent-700: #A84020;  /* hover state one step darker than --accent-600 */
  /* --accent-text: slightly lighter than --accent-500 for text-on-dark contexts.
     color-accessible-pairs: #D85A30 is 4.27:1 on the nav bg (#1A1E2E) — fails
     4.5:1 AA for normal-size text. #E06535 gives 4.79:1 on that surface while
     remaining visually close to the brand orange. Used for text links and small
     labels on dark surfaces; btn bg still uses --accent-500/600 (large text rule). */
  --accent-text: #E06535;
  --accent-50:  rgba(216,90,48,0.12);  /* accent wash (was light tint) */
  --accent-100: rgba(216,90,48,0.18);
  --accent: var(--accent-500);
  --accent-line: rgba(216,90,48,0.35);
  --blue-500: var(--accent-500);
  --blue-600: var(--accent-600);
  --blue-700: var(--accent-700);
  --blue-50:  var(--accent-50);
  --blue-100: var(--accent-100);
  --blue-200: var(--accent-100);
  /* --primary is referenced from audit-controls.css (overview select-all
     checkbox accent, bulk-target Apply button). Map to the brand accent so
     these UI bits aren't styled with the browser default. */
  --primary: var(--accent-500);
  --green-500: #22C55E;
  --green-50:  rgba(34,197,94,0.10);   /* green wash (was light tint) */
  --green-100: rgba(34,197,94,0.16);
  --red-500: #EF4444;
  --red-50:  rgba(239,68,68,0.10);     /* red wash */
  --red-100: rgba(239,68,68,0.16);
  --amber-500: #F59E0B;
  --amber-50:  rgba(245,158,11,0.12);  /* amber wash */
  /* === STATUS BADGE SEMANTIC TOKENS ===
     Dark-theme washes: translucent status-color background + bright
     status-color foreground (matches the landing's status pills). */
  --badge-healthy-bg:  rgba(34,197,94,0.14);
  --badge-healthy-fg:  #22C55E;
  --badge-warn-bg:     rgba(245,158,11,0.14);
  --badge-warn-fg:     #F59E0B;
  --badge-crit-bg:     rgba(239,68,68,0.14);
  /* color-accessible-pairs: #EF4444 on rgba(239,68,68,0.14) composited over
     --white (rgb(17,22,42)) = 4.19:1 — just under AA 4.5:1 for 12px badge text.
     #F87171 (lighter red) gives 5.70:1 on the same composite bg. */
  --badge-crit-fg:     #F87171;
  --font-display: 'Space Grotesk', Arial, sans-serif;
  --font-body: 'DM Sans', Arial, Helvetica, sans-serif;
  --font-mono: 'DM Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
}

html { scroll-behavior: smooth; }

/* Anchor scroll lands content below the 64px fixed nav, not under it. */
section[id], #main, #snapshot, #book { scroll-margin-top: 80px; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--gray-800);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* === NAV === */
nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  background: #1A1E2E;
  /* Soft hairline divider — the previous #2A2F42 created a hard line that
     fought the hero's gradient. White-at-low-opacity reads as a clean edge. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-inner {
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: #FFFFFF;
  text-decoration: none;
  letter-spacing: -0.02em;
}
.logo span { color: var(--accent-500); }
.nav-links { display: flex; align-items: center; }
.nav-links a {
  font-weight: 500;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-links a:hover { color: #FFFFFF; }
.nav-cta {
  /* color-accessible-pairs: white on --accent-500 (#D85A30) = 3.87:1, fails AA
     for 14px/600 text. Using --accent-600 (#C04E28) gives 4.81:1 — passes AA.
     Hover steps to --accent-700 (#A84020) for visible state change. */
  background: var(--accent-600) !important;
  color: #FFFFFF !important;
  padding: 10px 22px !important;
  border-radius: 8px;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: background 0.2s, transform 0.15s !important;
}
.nav-cta:hover { background: var(--accent-700) !important; transform: translateY(-1px); }

/* === MOBILE NAV (hamburger button + dropdown reveal) ===
   These rules need to live in common.css (not index.css) so every page that
   uses the shared nav gets correct behavior: hamburger hidden on desktop,
   visible + functional on mobile. Without this, the unstyled <button> renders
   on secondary pages as a tiny artifact in the middle of the nav. */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #FFFFFF;
  margin: 5px 0;
  transition: all 0.3s;
}
@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: #1A1E2E;
    flex-direction: column;
    padding: 24px;
    gap: 20px;
    border-bottom: 1px solid #2A2F42;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  }
  .nav-links.open { display: flex; }
}

/* === FAQ ACCORDION ===
   Marcus-voice collapsed FAQ blocks. Used on index.html (before final CTA),
   wasted-spend-finder.html and n-gram-analyzer.html. JSON-LD FAQPage schema
   sits inline next to each section to power LLM citations. */
.faq-section { background: var(--off-white); padding: 80px 24px; }
.faq-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 24px);
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.faq-list {
  margin-top: 32px;
  max-width: 760px;
}
.faq-item {
  border-bottom: 1px solid var(--gray-100);
  padding: 4px 0;
}
.faq-item:last-child { border-bottom: none; }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--gray-900);
  padding: 20px 36px 20px 0;
  position: relative;
  line-height: 1.4;
  transition: color 0.15s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--accent-500);
  transition: transform 0.2s;
  line-height: 1;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item summary:hover { color: var(--accent-500); }
.faq-answer { padding: 0 36px 20px 0; }
.faq-answer p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray-600);
  margin: 0;
}

/* === BUTTONS === */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* color-accessible-pairs: white on --accent-500 = 3.87:1, fails AA (14px+ text
     needs 4.5:1). --accent-600 (#C04E28) gives 4.81:1 with white. Hover steps
     to --accent-700 (#A84020, 5.99:1) for visible state differentiation. */
  background: var(--accent-600);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-primary:hover { background: var(--accent-700); }

/* === UPLOAD AREA === */
.upload-title { font-weight: 600; color: var(--gray-900); }
.upload-sub { color: var(--gray-400); }

/* === ANALYZING OVERLAY === */
.analyzing-overlay {
  display: none;
  text-align: center;
}
.analyzing-overlay.active { display: block; }
.analyzing-spinner {
  border: 3px solid var(--gray-100);
  border-top-color: var(--accent-500);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.analyzing-step {
  color: var(--gray-400);
  transition: color 0.3s;
}
.analyzing-step.done { color: var(--green-500); }

/* === SECURITY NOTICE ===
   The "parsed in your browser" green pill above each upload area. Telegraphs
   the real mechanism (browser-side parsing + ephemeral server compute) rather
   than the vague "100% secure" claim it replaced. Was inline-styled and
   copy-pasted in three pages before this consolidation. */
.security-notice {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 10px;
  padding: 12px 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.security-notice svg { color: #22c55e; flex-shrink: 0; }
/* color-accessible-pairs: The security notice sits on rgba(34,197,94,0.08)
   composited over --white (dark-theme rgb(17,22,42)), yielding an effective bg
   of ~rgb(18,36,46). The original #15803D (dark green, tuned for a light-mode
   green pill) is only 3.18:1 on this near-black surface — fails AA.
   Using #4ADE80 (bright green) instead: 9.15:1 on the effective dark bg.
   The SVG icon is set to #22c55e (decorative, slightly dimmer is fine). */
.security-notice-text {
  font-size: 14px;
  font-weight: 600;
  color: #4ADE80;
}

/* === STATUS BADGES === */
.badge, .status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 4px;
  font-weight: 500;
}
/* AA-tuned badge pairs, now referenced via shared semantic tokens.
   --badge-healthy-fg (#1B7A3D) clears 4.5:1 on --badge-healthy-bg (#E6F4EA). */
.badge.healthy, .status-badge.healthy { background: var(--badge-healthy-bg); color: var(--badge-healthy-fg); }
.badge.investigate, .status-badge.investigate { background: var(--badge-crit-bg); color: var(--badge-crit-fg); }

/* === GLOBAL INPUT CONSISTENCY === */
input[type="text"],
input[type="number"],
input[type="email"],
select {
  border-radius: 6px;
}
/* Option elements on dark-bg selects: set via individual selectors below because
   a global `select option` rule would conflict with selects that inherit
   browser-default white backgrounds (e.g. inputs without explicit bg). */

/* === ERROR === */
.error-msg, .snapshot-error {
  display: none;
  background: var(--red-50);
  border: 1px solid var(--red-100);
  color: var(--red-500);
  border-radius: 6px;
  font-weight: 500;
}

/* === FOCUS STATES (a11y) ===
   Visible focus ring for keyboard users across every interactive element.
   :focus-visible only fires on keyboard / assistive focus — mouse clicks
   won't show a ring, so this doesn't interfere with existing mouse UX. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[contenteditable="true"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* === VISUALLY HIDDEN (a11y utility) ===
   Hides content from sighted users while keeping it in the accessibility tree
   for screen readers. Use for section headings that would otherwise create a
   heading-level skip, or for labels that the visual design supplies via
   placement instead of text. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === SKIP LINK (a11y) ===
   First-tab shortcut for keyboard users to jump past the nav into content. */
.skip-link {
  position: absolute;
  top: -48px;
  left: 8px;
  /* color-accessible-pairs: --accent-600 (#C04E28) gives 4.81:1 with white — AA pass */
  background: var(--accent-600);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  z-index: 1000;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 8px;
}

/* === DARK-SURFACE TEXT CONTRAST (a11y) ===
   --gray-400 (#6B7082) on dark navy only reaches ~2.6-3.1:1, below WCAG AA 4.5:1.
   These overrides target the specific dark-bg contexts on the landing page so
   secondary text stays readable. Active/highlighted variants are untouched. */
.metrics .metric-label,
.phase-info-details .phase-info-disclaimer,
.phase-info-details .phase-info-list li {
  color: rgba(255, 255, 255, 0.72);
}

/* === REDUCED MOTION (a11y) ===
   Honor user preference. Shortens animations and transitions to effectively
   zero without removing them outright (so element states still switch). */
@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;
  }
}

/* === NUMERIC CELLS (design system §4) ===
   Bloomberg-style monospace with tabular figures for anything that might
   line up to another number — data tables, KPI values, stat cards.
   Loaded from Google Fonts on pages that render data; falls back to the
   system monospace stack elsewhere. */
.num,
.kpi-value,
.free-stat-value {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code',
               Consolas, 'Menlo', monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.01em;
}
/* Exception: .free-stat-value--sm is used when the stat card holds a short
   text value (e.g. "biggest offender: my-search-term") rather than a number.
   Keep the display typeface for readability. */
.free-stat-value.free-stat-value--sm {
  font-family: var(--font-display);
  font-variant-numeric: normal;
  letter-spacing: normal;
}