/* ═══════════════════════════════════════════════════════════
   INDIAGRAM — Global Mobile Responsiveness Layer
   Injected site-wide. Only affects viewports <= 768px (and a few
   universal overflow guards). Safe to remove by deleting the
   <link> tag from page heads.
   ═══════════════════════════════════════════════════════════ */

/* ---- 1. Universal overflow guards (all viewports) ---- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
*, *::before, *::after {
  /* prevent long unbroken strings (URLs, codes) from forcing scroll */
  min-width: 0;
}
img, video, svg, iframe, canvas, table {
  max-width: 100%;
}
img, video {
  height: auto;
}
/* media that explicitly sets height stays intact */
img[height], video[height] { height: revert; }

/* ---- 2. Tablet / mobile breakpoint ---- */
@media (max-width: 768px) {

  /* 2a. Tame fixed-width containers so they never exceed the screen */
  [class*="max-w-["] { max-width: 100% !important; }
  [class*="w-[1"][class*="px]"] { /* w-[1200px]..w-[1999px] etc. */ }

  /* 2b. Collapse multi-column grids to a single column.
     Tailwind grid-cols-N (without responsive prefix) and inline grids. */
  .grid.grid-cols-2:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]),
  .grid.grid-cols-3:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]),
  .grid.grid-cols-4:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]) {
    grid-template-columns: 1fr !important;
  }
  /* explicit template-column grids (e.g. [320px_1fr_372px]) */
  [class*="grid-cols-["] {
    grid-template-columns: 1fr !important;
  }
  /* keep 2-col stat blocks readable rather than over-stacking very small chips */
  .grid.grid-cols-3.gap-2 > * { min-width: 0; }

  /* 2c. Fluid headings — scale down oversized display type */
  .text-7xl { font-size: 2.5rem !important; line-height: 1.15 !important; }
  .text-6xl { font-size: 2.25rem !important; line-height: 1.15 !important; }
  .text-5xl { font-size: 2rem !important; line-height: 1.18 !important; }
  .text-4xl { font-size: 1.75rem !important; line-height: 1.2 !important; }
  .text-3xl { font-size: 1.5rem !important; line-height: 1.25 !important; }
  .text-2xl { font-size: 1.3rem !important; line-height: 1.3 !important; }
  h1, h2, h3 { overflow-wrap: break-word; word-break: break-word; }

  /* 2d. Reduce heavy desktop padding so content gets more room */
  .p-8 { padding: 1.25rem !important; }
  .p-7 { padding: 1.15rem !important; }
  .p-6 { padding: 1rem !important; }
  .px-8 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .px-7 { padding-left: 1.15rem !important; padding-right: 1.15rem !important; }
  .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .py-8 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
  .py-7 { padding-top: 1.15rem !important; padding-bottom: 1.15rem !important; }
  .gap-8 { gap: 1rem !important; }
  .gap-6 { gap: 0.9rem !important; }

  /* 2e. Tap targets — minimum 40px height for interactive elements */
  a[class*="px-"], button, .copy-btn, .tab-button,
  input[type="button"], input[type="submit"], [role="button"] {
    min-height: 40px;
  }
  button, a[class*="inline-flex"], [role="button"] {
    display: inline-flex;
    align-items: center;
  }

  /* 2f. Tables — allow horizontal scroll instead of squashing,
     and wrap any table not already in a scroll container */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .overflow-x-auto { -webkit-overflow-scrolling: touch; }

  /* 2g. Headers / nav bars — let breadcrumb + action rows wrap gracefully */
  header .flex.items-center.justify-between {
    flex-wrap: wrap;
    height: auto !important;
    gap: 0.5rem !important;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
  header .h-16, header .h-20 { height: auto !important; }
  /* keep breadcrumb text from overflowing */
  header a, header span { word-break: normal; }

  /* 2h. Sticky-offset bodies (some pages set body{padding-top:64px}) keep working */

  /* 2i. Sidebars / asides that were sticky on desktop become normal flow */
  aside[class*="sticky"], aside[class*="lg:sticky"] {
    position: static !important;
  }

  /* 2j. Long code / link strings break instead of overflowing */
  .code-link, .search-str, code, pre, .font-mono {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  pre { white-space: pre-wrap; }

  /* 2k. Flex rows that should stack on mobile when they get cramped */
  .flex.items-start.gap-4 > .flex-shrink-0[class*="w-2"],
  .flex.items-start.gap-4 > .flex-shrink-0[class*="w-3"] {
    /* profile thumbnails stay, just cap their size */
  }
  [class*="w-28"], [class*="w-32"], [class*="w-36"] { max-width: 40vw; }

  /* 2l. Modal / dialog content fits the screen */
  [class*="max-w-md"], [class*="max-w-lg"], [class*="max-w-xl"],
  [class*="max-w-2xl"], [class*="max-w-3xl"], [class*="max-w-4xl"] {
    max-width: 100% !important;
  }

  /* 2m. Prevent fixed-positioned wide bars from overflowing */
  .fixed { max-width: 100vw; }
}

/* ---- 3. Small phones (<= 420px): a touch more compression ---- */
@media (max-width: 420px) {
  .text-4xl { font-size: 1.55rem !important; }
  .text-3xl { font-size: 1.35rem !important; }
  .p-6, .p-7, .p-8 { padding: 0.85rem !important; }
  .px-6, .px-7, .px-8 { padding-left: 0.85rem !important; padding-right: 0.85rem !important; }
  /* very small chip grids: allow 2-up max */
  .grid.grid-cols-3.gap-2:not([class*="sm:"]) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}