/* TBE GLOBAL RESPONSIVE FIT
   Safe site-wide scaling layer. Keeps pages fitting across desktop, cluttered browser windows, and mobile. */

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

html,
body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

body {
  min-width: 320px !important;
}

img,
video,
canvas,
svg,
iframe {
  max-width: 100% !important;
}

/* Prevent pages from accidentally spilling sideways. */
main {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* Shared header: fit to screen without sliding off. */
body header {
  max-width: calc(100vw - clamp(20px, 4vw, 56px)) !important;
}

body header nav {
  min-width: 0 !important;
}

body header nav a,
body header button {
  white-space: nowrap !important;
}

/* Any main shell should respect screen width. */
[class$="-shell"],
[class*="-shell "] {
  max-width: calc(100vw - clamp(20px, 4vw, 56px)) !important;
}

/* Any panel/card should not overflow its container. */
.card,
[class$="-panel"],
[class*="-panel "],
[class$="-card"],
[class*="-card "] {
  max-width: 100% !important;
}

/* Big page titles scale instead of overflowing or feeling huge. */
main h1 {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

/* Tables/lists/widgets should scroll inside themselves instead of breaking page width. */
table,
pre,
code {
  max-width: 100% !important;
}

pre {
  overflow-x: auto !important;
}

/* Better default spacing for normal desktop. */
@media (min-width: 901px) {
  main {
    padding-left: max(0px, env(safe-area-inset-left)) !important;
    padding-right: max(0px, env(safe-area-inset-right)) !important;
  }
}

/* Cluttered browser / shorter screen: reduce vertical waste first. */
@media (max-height: 850px) {
  [class$="-shell"],
  [class*="-shell "] {
    margin-top: clamp(4px, 1vh, 14px) !important;
  }

  main h1 {
    font-size: clamp(1.75rem, 4vw, 3rem) !important;
    line-height: 0.98 !important;
  }

  .card,
  [class$="-panel"],
  [class*="-panel "] {
    padding-top: clamp(10px, 1.2vw, 16px) !important;
    padding-bottom: clamp(10px, 1.2vw, 16px) !important;
  }
}

/* Very short browser windows: compact decorative headers, not content. */
@media (max-height: 720px) {
  main h1 {
    font-size: clamp(1.55rem, 3.4vw, 2.4rem) !important;
  }

  [class$="-shell"],
  [class*="-shell "] {
    max-width: calc(100vw - 28px) !important;
  }
}

/* Tablet / small laptop: reduce width and stack complex layouts. */
@media (max-width: 1100px) {
  [class$="-shell"],
  [class*="-shell "] {
    max-width: calc(100vw - 28px) !important;
  }

  body header {
    max-width: calc(100vw - 28px) !important;
  }
}

/* Mobile: make the site use natural page scroll and avoid cramming. */
@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  main {
    min-height: 100svh !important;
    height: auto !important;
    overflow-y: visible !important;
  }

  [class$="-shell"],
  [class*="-shell "] {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .card,
  [class$="-panel"],
  [class*="-panel "] {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px !important;
  }

  main h1 {
    font-size: clamp(1.7rem, 9vw, 2.45rem) !important;
    line-height: 1 !important;
    letter-spacing: clamp(1px, 1.2vw, 5px) !important;
  }

  body header {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
  }

  body header nav {
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  body header nav::-webkit-scrollbar {
    display: none !important;
  }

  /* Tailwind grid/flex helpers often cause cramped mobile layouts. */
  .md\:grid-cols-2,
  .md\:grid-cols-3,
  .md\:grid-cols-4,
  .lg\:grid-cols-2,
  .lg\:grid-cols-3,
  .lg\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  .lg\:flex-row,
  .md\:flex-row {
    flex-direction: column !important;
  }
}

/* Ultra-wide: prevent panels from becoming silly huge. */
@media (min-width: 1700px) {
  [class$="-shell"],
  [class*="-shell "] {
    max-width: min(1500px, calc(100vw - 240px)) !important;
  }
}