/*
 * Junaimei layout-stability and narrow-screen usability patch.
 * Tail override only: no DOM replacement, hiding, or re-parenting.
 */

/* On a cold homepage load the React shell briefly mounts before the long
   homepage body. Keep its footer below the fold during that one-frame gap.
   The :has() gate deliberately avoids changing short inner pages. */
@supports selector(:has(*)) {
  #root > div.min-h-screen:has(
    > main > main[data-component-file="Home.tsx"]
  ) > main[data-component-file="layout.tsx"] {
    min-height: 100vh;
    min-height: 100svh;
  }
}

/* The homepage proof loop is mounted before its 122px system strip. Reserve
   exactly that desktop slot until the runtime prepends the real strip. */
@supports selector(.jn-proof-loop:has(> .jnm-system-strip-v2)) {
  @media (min-width: 1121px) {
    main[data-component-file="Home.tsx"] .jn-proof-loop:not(:has(> .jnm-system-strip-v2)) {
      box-sizing: border-box;
      padding-top: 122px;
    }
  }
}

/* Contact tabs already have an accessible label before the CMS adds its data
   attribute. Match both states so active-class hydration cannot change size. */
#root main[data-component-file="Contact.tsx"]
  :is(nav[data-contact-service-tabs], nav[aria-label="联系服务"])
  a[href^="/contact"] {
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 104px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  line-height: 1 !important;
  transform: none !important;
}

@media (max-width: 600px) {
  /* Five solution anchors become two calm rows plus a full-width final action. */
  main[data-owner="solution"] > .jnm-lab .jnm-lab-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: stretch !important;
    gap: 8px !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
  }

  main[data-owner="solution"] > .jnm-lab .jnm-lab-nav > button {
    box-sizing: border-box !important;
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    min-height: 44px !important;
    white-space: normal !important;
  }

  /* The two-column inspection table fits the content column and wraps long
     values instead of requiring a hidden horizontal swipe. */
  main[data-owner="solution"] > .jnm-lab .jnm-lab-table-wrap {
    max-width: 100% !important;
    overflow-x: visible !important;
  }

  main[data-owner="solution"] > .jnm-lab .jnm-lab-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  main[data-owner="solution"] > .jnm-lab .jnm-lab-table :is(th, td) {
    box-sizing: border-box;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  main[data-owner="solution"] > .jnm-lab .jnm-lab-table :is(th, td):first-child {
    width: 42%;
  }

  /* Show all six Academy destinations as two compact rows without cropping. */
  main[data-owner^="technical-"] :is(
    .academy-hub__tabs,
    .coating-library-tabs,
    .academy-global-tabs,
    .academy-faq-unified__tabs,
    section[data-technical-faq-tabs="true"] nav
  ) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(44px, auto);
    align-items: stretch !important;
    justify-content: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    gap: 8px !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
  }

  main[data-owner^="technical-"] .academy-hub__tabs {
    min-height: 120px !important;
    padding: 12px 16px !important;
  }

  main[data-owner^="technical-"] :is(
    .coating-library-tab-band,
    .academy-global-switcher,
    .academy-faq-unified__tabs-band,
    section[data-technical-faq-tabs="true"]
  ) {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 124px !important;
    padding-block: 13px !important;
  }

  main[data-owner^="technical-"] :is(
    .academy-hub__tabs,
    .coating-library-tabs,
    .academy-global-tabs,
    .academy-faq-unified__tabs,
    section[data-technical-faq-tabs="true"] nav
  ) > a {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding-inline: 12px !important;
    white-space: normal !important;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  main[data-owner="solution"] .jnm-lab-nav,
  main[data-owner^="technical-"] :is(
    .academy-hub__tabs,
    .coating-library-tabs,
    .academy-global-tabs,
    .academy-faq-unified__tabs
  ) {
    scroll-behavior: auto !important;
  }
}