/* Shared touch-state compatibility for Safari, WeChat WebView and Android X5. */
html,
body,
*,
*::before,
*::after {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

/* Reserve the classic desktop scrollbar width so dynamic forms and popovers
   cannot change the page's horizontal geometry. Overlay scrollbars are
   unaffected. */
html {
  scrollbar-gutter: stable;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

a,
button,
summary,
label,
select,
[role="button"],
[role="tab"],
[tabindex],
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"] {
  touch-action: manipulation;
}

/* A tap may leave :focus active in embedded mobile browsers. Remove only the
   touch-device ring; desktop keyboard users retain a branded focus indicator. */
@media (hover: none), (pointer: coarse) {
  a:focus,
  button:focus,
  summary:focus,
  label:focus,
  select:focus,
  [role="button"]:focus,
  [role="tab"]:focus,
  [tabindex]:focus,
  input[type="button"]:focus,
  input[type="submit"]:focus,
  input[type="reset"]:focus,
  input[type="checkbox"]:focus,
  input[type="radio"]:focus {
    outline: none !important;
    outline-width: 0 !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  html {
    overflow-y: scroll;
  }

  a:focus-visible,
  button:focus-visible,
  summary:focus-visible,
  select:focus-visible,
  [role="button"]:focus-visible,
  [role="tab"]:focus-visible,
  [tabindex]:focus-visible,
  input[type="button"]:focus-visible,
  input[type="submit"]:focus-visible,
  input[type="reset"]:focus-visible {
    outline: 2px solid #236b6f !important;
    outline-offset: 3px;
  }
}

/* On mobile, keep a compact language-switch frame while treating the control
   as a regular navigation item. Match the trailing space to the 22px item gap
   so the final item does not sit flush against the scroll container edge. */
@media (max-width: 680px) {
  body.account-page .site-header,
  body.account-page .account-main,
  body.account-page .account-intro,
  body.account-page .account-card,
  body.account-page .account-school-form,
  body.account-page .school-finder,
  body.account-page .account-purchases,
  body.account-page .account-purchase {
    min-width: 0;
    max-width: 100%;
  }

  body.account-page .account-main {
    width: calc(100% - 28px);
    margin-right: auto;
    margin-left: auto;
  }

  body.account-page .account-intro h1,
  body.account-page .account-intro p,
  body.account-page .account-card {
    overflow-wrap: anywhere;
  }

  body.account-page .account-card {
    padding: 22px;
    box-shadow: 6px 8px 0 rgba(20, 74, 77, .08);
  }

  .site-header .nav,
  html[lang="en"] .site-header .nav {
    padding-right: 22px;
  }

  /* The account item has an 86px desktop minimum width. On mobile that leaves
     invisible space after its visible label and makes the EN control look
     detached even when the flex gap itself is correct. */
  .site-header .nav .nav-account,
  html[lang="en"] .site-header .nav .nav-account {
    min-width: auto;
  }

  .site-header .nav .language-toggle,
  html[lang="en"] .site-header .nav .language-toggle {
    box-sizing: border-box;
    flex: 0 0 34px;
    width: 34px;
    min-width: 34px;
    height: 22px;
    min-height: 22px;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 1px solid #cfcfcf;
    background: #fff;
    color: inherit;
    line-height: 1;
    text-align: center;
  }

  .site-header .nav .language-toggle:hover,
  .site-header .nav .language-toggle:focus,
  .site-header .nav .language-toggle:active,
  html[lang="en"] .site-header .nav .language-toggle:hover,
  html[lang="en"] .site-header .nav .language-toggle:focus,
  html[lang="en"] .site-header .nav .language-toggle:active {
    border-color: #cfcfcf;
    background: #fff;
    color: inherit;
  }

  /* Keep the short Chinese pathway statement on one balanced mobile line. */
  html[lang="zh-CN"] .pathway-cta > p {
    white-space: nowrap;
    font-size: clamp(8.5px, 2.65vw, 11px);
    letter-spacing: -0.01em;
  }

  /* Refine the mobile history controls without changing their spacing model. */
  .history-track li::before {
    top: 40px;
    width: 7px;
    height: 7px;
    border-width: 1.5px;
  }

  .history-controls {
    grid-template-columns: 28px minmax(0, 1fr) 28px;
  }

  .history-controls button {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }

  .history-controls input[type="range"]::-webkit-slider-thumb {
    width: 10px;
    height: 10px;
    margin-top: -3px;
    border-width: 1.5px;
  }

  .history-controls input[type="range"]::-moz-range-thumb {
    width: 8px;
    height: 8px;
    border-width: 1.5px;
  }
}