/* ==========================================================================
   dengmo.top frontend overrides - injected into <head> by nginx sub_filter
   Scope: responsive / typography polish only. Does NOT touch New-API source.
   Loaded after the app stylesheet, so plain selectors win by order.
   ========================================================================== */

/* 1. Safety net: never allow the document to scroll sideways ------------- */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%; /* iOS: stop landscape font inflation */
}

/* 2. Hero heading -------------------------------------------------------
   The hero h1 uses text-[clamp(2.25rem,4.5vw,3.25rem)] whose 36px floor
   is too wide for <420px screens: line 1 cannot fit and leaves an orphan
   character ("于") alone on the next line. Scale it fluidly on phones.   */
@media (max-width: 640px) {
  h1[class*="landing-animate"],
  h1[class*="clamp(2.25rem"] {
    font-size: clamp(1.55rem, 7.6vw, 2.2rem) !important;
    line-height: 1.25 !important;
  }
  /* Keep long mixed CJK/Latin words from overflowing their card */
  section p {
    overflow-wrap: anywhere;
  }
}

/* 3. Code preview card: status badge clipped at 320px -------------------- */
@media (max-width: 360px) {
  /* The badge sits at the far right of a row that cannot shrink below its
     tab strip width, so on 320px screens it gets cut off. Hide it there.  */
  .ml-auto.flex.items-center.gap-2 {
    display: none !important;
  }
}

/* 3b. Wide code samples must scroll, not stretch their card ------------- */
@media (max-width: 640px) {
  pre {
    max-width: 100%;
    overflow-x: auto;
  }
}

/* 4. Forms: 16px inputs stop iOS Safari from zooming on focus ----------- */
@media (max-width: 767px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* 5. Console (Semi Design) on phones/tablets ----------------------------
   Semi's data tables and sider are desktop-first. Below 768px we let wide
   tables scroll horizontally instead of squeezing/cutting their columns,
   and let the sider shrink so the content area keeps a usable width.      */
@media (max-width: 767px) {
  .semi-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .semi-table {
    min-width: 620px;
  }
  .semi-layout-sider {
    min-width: 0 !important;
  }
  .semi-card-body {
    padding: 16px !important;
  }
}

/* 6. Tablet portrait: tighten the hero vertical rhythm ------------------ */
@media (min-width: 641px) and (max-width: 1023px) {
  h1[class*="landing-animate"] {
    font-size: clamp(2.1rem, 4.6vw, 3.25rem) !important;
  }
}