/* Global resets */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Geist', -apple-system, system-ui, sans-serif;
  background: #f0eee9;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* Artboard scroll: each artboard renders a 1440x900 'browser window' that scrolls its own content */
.ab-page {
  width: 1440px;
  height: 900px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  scroll-behavior: smooth;
}
.ab-page::-webkit-scrollbar { width: 8px; height: 8px; }
.ab-page::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
.ab-page::-webkit-scrollbar-track { background: transparent; }

/* Standalone mode (full prototype) — let the page take the real viewport */
body.standalone { background: var(--bg, #fafaf8); }
body.standalone .ab-page {
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 100vh;
  overflow: visible;
}
body.standalone .fmap-grid {
  height: calc(100vh - 36px - 60px) !important;
  min-height: 700px;
}

/* Direction A — Heritage */
.dir-a {
  --bg: #f3ede0;
  --bg-deep: #1d1814;
  --ink: #1d1814;
  --ink-soft: rgba(29,24,20,0.65);
  --line: rgba(29,24,20,0.16);
  --paper: #faf6ec;
  --accent: oklch(0.62 0.13 65);     /* ochre */
  --accent-deep: oklch(0.45 0.13 55);
  font-family: 'Geist', sans-serif;
  color: var(--ink);
  background: var(--bg);
}
.dir-a .display { font-family: 'Newsreader', serif; font-weight: 500; letter-spacing: -0.02em; line-height: 0.95; }
.dir-a .label-mono { font-family: 'IBM Plex Mono', monospace; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; }

/* Direction B — Technical */
.dir-b {
  --bg: #fafaf8;
  --bg-deep: #0a0a0a;
  --ink: #0a0a0a;
  --ink-soft: rgba(10,10,10,0.6);
  --line: rgba(10,10,10,0.1);
  --paper: #ffffff;
  --accent: oklch(0.48 0.18 252);      /* cobalt */
  --accent-soft: oklch(0.94 0.04 252);
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--ink);
  background: var(--bg);
}
.dir-b .mono { font-family: 'IBM Plex Mono', monospace; }
.dir-b .label-mono { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.dir-b .display { font-family: 'IBM Plex Sans', sans-serif; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }

/* Direction C — Editorial */
.dir-c {
  --bg: #ede4d1;
  --bg-deep: #1f2a1a;
  --ink: #1a1f15;
  --ink-soft: rgba(26,31,21,0.7);
  --line: rgba(26,31,21,0.18);
  --paper: #f7f2e3;
  --accent: oklch(0.85 0.18 120);    /* lime */
  --accent-deep: oklch(0.45 0.12 130);
  font-family: 'Bricolage Grotesque', sans-serif;
  color: var(--ink);
  background: var(--bg);
}
.dir-c .serif { font-family: 'Source Serif 4', serif; }
.dir-c .display { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; letter-spacing: -0.035em; line-height: 0.92; font-variation-settings: 'opsz' 96; }

/* Shared utility */
.scrollx { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.scrollx::-webkit-scrollbar { display: none; }

/* Subtle striped image placeholder (rare backup) */
.placeholder-stripe {
  background: repeating-linear-gradient(45deg, #d8d2c4 0 8px, #cbc4b3 8px 16px);
}

/* Animation utility */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeUp .4s ease forwards; }

/* Form */
.field-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 8px;
  font: inherit;
  color: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
.field-input.is-error { border-color: #b53b2a; box-shadow: 0 0 0 3px rgba(181,59,42,0.18); }

/* Map dot pulse */
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(217, 119, 87, 0.55); }
  70% { box-shadow: 0 0 0 12px rgba(217, 119, 87, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 119, 87, 0); }
}

/* =====================================================================
   MOBILE-RESPONSIVE OVERLAY
   The prototype was authored desktop-1440-only with inline styles. This
   section forces a usable layout on small viewports by overriding the
   inline grid / padding / type-scale via [style*=...] selectors and
   high-specificity rules. !important is necessary because the inline
   style attribute wins normal cascade.
   ===================================================================== */

/* --------- TABLET (≤ 1024px) --------- */
@media (max-width: 1024px) {
  body.standalone .ab-page { width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; }

  /* Hide the decorative faux-browser URL bar (just simulates a browser window — meaningless on real devices) */
  .dir-b > div:first-child[style*="height: 36px"] { display: none !important; }

  /* Hide the stock ticker — it wraps awkwardly at any narrower width and the data isn't critical on small screens */
  .dir-b > div.mono { display: none !important; }

  /* 4+ column grids → 2 columns */
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: 1fr 1fr 1.2fr"],
  [style*="grid-template-columns: 1fr 1fr 1.3fr"],
  [style*="grid-template-columns: 1.5fr repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr) 1.3fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }

  /* 2-column hero/feature splits stay 2 col on tablet but reduce gap */
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1.5fr 1fr"],
  [style*="grid-template-columns: 1fr 1.6fr"] {
    gap: 32px !important;
  }

  /* Hide the tiny ⌘K shortcut chip on tablets */
  .skbd, [style*="⌘K"] { display: none !important; }
}

/* --------- MOBILE (≤ 768px) --------- */
@media (max-width: 768px) {
  /* Force every multi-column grid to single column */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Reduce all giant paddings */
  [style*="padding: '88px"], [style*="padding: 88px"],
  [style*="padding: '72px"], [style*="padding: 72px"],
  [style*="padding: '64px"], [style*="padding: 64px"],
  [style*="padding: '56px"], [style*="padding: 56px"],
  [style*="padding: '48px"], [style*="padding: 48px"] {
    padding: 32px 18px !important;
  }
  /* Specific compound padding patterns from the JSX */
  [style*="padding: '28px 48px"] { padding: 18px 16px !important; }
  [style*="padding: '14px 32px"] { padding: 12px 14px !important; }
  [style*="padding: '8px 32px"]  { padding: 8px 14px !important; }
  [style*="padding: '88px 32px"] { padding: 40px 16px !important; }

  /* Shrink display headings */
  [style*="font-size: 120px"], [style*="fontSize: 120"],
  [style*="font-size: 96px"],  [style*="fontSize: 96"],
  [style*="font-size: 84px"],  [style*="fontSize: 84"],
  [style*="font-size: 72px"],  [style*="fontSize: 72"],
  [style*="font-size: 64px"],  [style*="fontSize: 64"] {
    font-size: clamp(36px, 8vw, 52px) !important;
    line-height: 1.05 !important;
  }
  [style*="font-size: 56px"], [style*="font-size: 48px"], [style*="font-size: 40px"] {
    font-size: clamp(28px, 6vw, 36px) !important;
    line-height: 1.1 !important;
  }
  [style*="font-size: 36px"], [style*="font-size: 32px"], [style*="font-size: 28px"] {
    font-size: 22px !important;
  }

  /* Hide the faux browser-chrome URL bar (decorative on desktop, useless on mobile) */
  .dir-b > div:first-child[style*="height: 36px"] { display: none !important; }
  /* Hide the stock-ticker top bar */
  .dir-b > div.mono { display: none !important; }

  /* Nav header (sticky): stack vertically, allow wrapping */
  .dir-b > header { padding: 10px 14px !important; }
  .dir-b > header > div { flex-wrap: wrap !important; gap: 10px !important; padding: 10px 0 !important; }
  /* Hide mega-menu trigger buttons (Products / Applications / Resources / Company) on mobile */
  .dir-b > header button[style*="padding: 10px 14px"],
  .dir-b > header button[style*="padding: '10px 14px'"] { display: none !important; }
  /* Hide ⌘K search hint inside header */
  .dir-b > header span[style*="border: 1px solid"][style*="font-family: IBM Plex Mono"] { display: none !important; }
  /* Shrink the inline search field on mobile so logo + CTA still fit */
  .dir-b > header [style*="border-radius: 5px"][style*="flex: 1"] { display: none !important; }

  /* Tables: let them scroll horizontally rather than squish */
  div[style*="grid-template-columns: 70px 2fr 1fr 1fr"],
  div[style*="grid-template-columns: 70px 2fr"] {
    grid-template-columns: 70px 2fr 1fr 1fr 90px 110px 90px 40px !important;
    min-width: 720px !important;
  }
  /* Wrap any wide data-table-like grid in horizontal scroll context */
  div[style*="overflow-x"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* Hide live ticker / search hint chips that lose meaning on touch */
  [style*="font-family: 'IBM Plex Mono'"][style*="font-size: 10"],
  [style*="font-family: IBM Plex Mono"][style*="font-size: 11"] {
    /* keep the labels visible — they're informational. Don't hide. */
  }

  /* Facilities map: 3-pane app → stack vertically with scrollable map */
  .fmap-grid, [class*="fmap"] {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .fmap-grid > * { width: 100% !important; max-height: 60vh !important; }

  /* RFQ wizard: vertical step layout */
  [style*="grid-template-columns: 200px"], [style*="grid-template-columns: 240px"] {
    grid-template-columns: 1fr !important;
  }

  /* Generic max-width caps so nothing busts the viewport */
  [style*="max-width: 1400"], [style*="max-width: 1280"],
  [style*="max-width: 1200"], [style*="max-width: 1100"],
  [style*="max-width: 1000"] {
    max-width: 100% !important;
  }

  /* Buttons get a comfy tap target */
  button { min-height: 40px; }

  /* SVG US map gets responsive width */
  svg[viewBox*="0 0 1000"], svg[viewBox*="0 0 980"] { width: 100% !important; height: auto !important; }

  /* Top-bar gap between nav items */
  [style*="gap: 36"], [style*="gap: 48"], [style*="gap: 64"] { gap: 16px !important; }
  [style*="gap: 24"], [style*="gap: 28"], [style*="gap: 32"] { gap: 12px !important; }
}

/* --------- SMALL PHONE (≤ 480px) --------- */
@media (max-width: 480px) {
  body { font-size: 15px; }
  [style*="font-size: 24px"], [style*="font-size: 22px"], [style*="font-size: 20px"] { font-size: 17px !important; }

  /* Even tighter padding on phones */
  [style*="padding: '32px"], [style*="padding: 32px"] { padding: 20px 14px !important; }

  /* Hide the search chip and any decorative pre-headings */
  span[style*="border: '1px solid var(--line)'"][style*="border-radius: 3"][style*="font-family: 'IBM Plex Mono'"] {
    display: none !important;
  }
}