/* Findorla — responsive layer.
 *
 * The pages are built with inline styles, so overrides here must be specific
 * enough to beat them; !important is required against an inline declaration.
 *
 * IMPORTANT: match the RENDERED style attribute, not the source. The runtime
 * re-serialises inline styles through React, which normalises them:
 *     source  min-width:1100px            rendered  min-width: 1100px
 *     source  repeat(4,1fr)               rendered  repeat(4, 1fr)
 *     source  1.1fr .9fr                  rendered  1.1fr 0.9fr
 * Selectors written against the source form silently match nothing.
 *
 * Breakpoints: 1200 laptop · 1024 iPad landscape · 820 iPad portrait
 *               640 phone · 400 small phone
 */

/* ── universal guards ───────────────────────────────────────────────────── */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; }
img, video { height: auto; }

/* Fixed page widths are the single biggest cause of sideways scroll. */
[style*="min-width: 1280px"],
[style*="min-width: 1240px"],
[style*="min-width: 1100px"],
[style*="min-width: 900px"] { min-width: 0 !important; }

/* Wide content scrolls inside its own box, never the page. */
table { display: block; overflow-x: auto; max-width: 100%; }

@media (max-width: 1200px) {
  /* Three-pane designer layouts drop their side rails first. */
  [style*="grid-template-columns: 262px 1fr 286px"],
  [style*="grid-template-columns: 250px 1fr 265px"] { grid-template-columns: 1fr !important; }
  [style*="max-height: 760px"] { max-height: none !important; }
  [style*="padding: 88px 48px"] { padding: 64px 32px !important; }
  [style*="padding: 72px 48px"] { padding: 56px 32px !important; }
}

@media (max-width: 1024px) {
  [style*="grid-template-columns: 326px 1fr"],
  [style*="grid-template-columns: 390px 1fr"],
  [style*="grid-template-columns: 1fr 300px"],
  [style*="grid-template-columns: 1fr 320px"],
  [style*="grid-template-columns: 1fr 1.15fr"],
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  /* Map and model canvases shrink rather than dominating the viewport. */
  [style*="height: 480px"], [style*="height: 520px"], [style*="height: 540px"], [style*="height: 560px"], [style*="height: 590px"], [style*="height: 640px"] { height: 420px !important; }
}

@media (max-width: 820px) {
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: 1.1fr 0.9fr"],
  [style*="grid-template-columns: 1.2fr 0.8fr"],
  [style*="grid-template-columns: 0.9fr 1.1fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 1.5fr 1fr"] { grid-template-columns: 1fr !important; }

  [style*="padding: 88px 48px"] { padding: 48px 24px !important; }
  [style*="padding: 72px 48px"] { padding: 44px 24px !important; }
  [style*="padding: 40px 48px"] { padding: 32px 24px !important; }
  [style*="padding: 20px 48px"], [style*="padding: 22px 48px"] { padding: 16px 24px !important; }
  [style*="padding: 64px"] { padding: 36px 24px !important; }

  /* Navigation wraps instead of pushing the page wide. */
  nav { flex-wrap: wrap !important; gap: 12px !important; }
  nav > div { flex-wrap: wrap !important; }
}

@media (max-width: 640px) {
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: auto 1fr"] { grid-template-columns: 1fr !important; }

  /* Compact stat tiles stay two-up — one per row wastes the screen. */
  [style*="grid-template-columns: repeat(4, 1fr)"][style*="gap: 9px"],
  [style*="grid-template-columns: repeat(3, 1fr)"][style*="gap: 8px"],
  [style*="grid-template-columns: repeat(3, 1fr)"][style*="gap: 9px"],
  [style*="grid-template-columns: repeat(2, 1fr)"][style*="gap: 9px"],
  [style*="grid-template-columns: 1fr 1fr"][style*="gap: 9px"],
  [style*="grid-template-columns: 1fr 1fr"][style*="gap: 8px"] { grid-template-columns: repeat(2, 1fr) !important; }

  [style*="padding: 88px 48px"], [style*="padding: 72px 48px"] { padding: 36px 18px !important; }
  [style*="padding: 40px 48px"] { padding: 28px 18px !important; }
  [style*="padding: 20px 48px"], [style*="padding: 22px 48px"] { padding: 14px 18px !important; }
  [style*="padding: 26px 30px"], [style*="padding: 16px 30px"], [style*="padding: 14px 30px"] { padding: 16px 18px !important; }
  [style*="padding: 64px"], [style*="padding: 32px 36px"] { padding: 26px 20px !important; }
  [style*="padding: 24px 26px"], [style*="padding: 22px 26px"] { padding: 20px 18px !important; }

  /* Display type scales with the viewport. Every size >= 30px present in the
     pages is covered — a missed size silently overflows on a narrow screen. */
  [style*="font-size: 30px"] { font-size: clamp(20px, 5.1vw, 30px) !important; }
  [style*="font-size: 32px"] { font-size: clamp(20px, 5.1vw, 32px) !important; }
  [style*="font-size: 34px"] { font-size: clamp(20px, 5.1vw, 34px) !important; }
  [style*="font-size: 36px"] { font-size: clamp(22px, 5.6vw, 36px) !important; }
  [style*="font-size: 38px"] { font-size: clamp(23px, 5.9vw, 38px) !important; }
  [style*="font-size: 40px"] { font-size: clamp(24px, 6.2vw, 40px) !important; }
  [style*="font-size: 42px"] { font-size: clamp(25px, 6.4vw, 42px) !important; }
  [style*="font-size: 44px"] { font-size: clamp(26px, 6.7vw, 44px) !important; }
  [style*="font-size: 46px"] { font-size: clamp(28px, 7.2vw, 46px) !important; }
  [style*="font-size: 48px"] { font-size: clamp(29px, 7.4vw, 48px) !important; }
  [style*="font-size: 52px"] { font-size: clamp(31px, 7.9vw, 52px) !important; }
  [style*="font-size: 54px"] { font-size: clamp(32px, 8.2vw, 54px) !important; }
  [style*="font-size: 56px"] { font-size: clamp(34px, 8.7vw, 56px) !important; }
  [style*="font-size: 60px"] { font-size: clamp(36px, 9.2vw, 60px) !important; }
  [style*="font-size: 62px"] { font-size: clamp(37px, 9.5vw, 62px) !important; }
  [style*="font-size: 64px"] { font-size: clamp(38px, 9.7vw, 64px) !important; }
  [style*="font-size: 66px"] { font-size: clamp(40px, 10.3vw, 66px) !important; }
  [style*="font-size: 70px"] { font-size: clamp(42px, 10.8vw, 70px) !important; }
  [style*="font-size: 76px"] { font-size: clamp(46px, 11.8vw, 76px) !important; }
  [style*="font-size: 78px"] { font-size: clamp(47px, 12.1vw, 78px) !important; }
  [style*="letter-spacing: -1.5px"], [style*="letter-spacing: -1.3px"] { letter-spacing: -0.02em !important; }

  [style*="height: 480px"], [style*="height: 520px"], [style*="height: 540px"], [style*="height: 560px"], [style*="height: 590px"], [style*="height: 640px"] { height: 320px !important; }

  /* Side-by-side rows stack. On a phone, wrapping is nearly always right, so
     this applies to every flex row rather than only space-between ones. */
  [style*="display: flex"] { flex-wrap: wrap !important; }
  [style*="gap: 40px"] { gap: 20px !important; }

  /* Controls sized for a desktop sidebar go full width. */
  [style*="width: 260px"], [style*="width: 250px"] { width: 100% !important; }

  footer { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
}

@media (max-width: 400px) {
  [style*="padding: 88px 48px"], [style*="padding: 72px 48px"] { padding: 28px 14px !important; }
  [style*="padding: 40px 48px"] { padding: 22px 14px !important; }
  [style*="gap: 30px"], [style*="gap: 32px"] { gap: 16px !important; }
}

/* Touch targets stay tappable on coarse pointers. */
@media (pointer: coarse) {
  button, a[style*="border-radius: 999px"] { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}