/*
 * Mobile typography and scale contract.
 *
 * The site keeps its desktop type hierarchy intact. Below the desktop
 * breakpoint, every page inherits one complete Songti-oriented system stack.
 * Its body, small and label tokens deliberately retain their desktop ratios;
 * only text entry controls are held at 16 CSS pixels so mobile browsers do
 * not magnify a focused field.
 */

:root {
  --xy-mobile-font-serif: "Songti SC", "STSong", "STZhongsong", SimSun,
    "Noto Serif CJK SC", "Noto Serif SC", "Source Han Serif SC",
    "Source Han Serif CN", serif;
}

@media (max-width: 47.999rem) {
  :root {
    --ui-font-sans: var(--xy-mobile-font-serif);
    --ui-font-serif: var(--xy-mobile-font-serif);
    --ui-font-size-body: 1rem;
    --ui-font-size-small: 0.875rem;
    --ui-font-size-label: 0.75rem;
    --ui-line-height-body: 1.6;

    /*
     * The original phone rule shrank only the homepage display title to
     * 20px while leaving its 12px supporting copy untouched. Keep the
     * desktop title/copy/action relationship instead: 26–28 / 12 / 14.
     * The upper bound meets the desktop tablet value without a jump at 768px.
     */
    --xy-mobile-hero-display-size: clamp(1.625rem, 6.5vw, 1.75rem);
    --xy-mobile-hero-copy-size: var(--ui-font-size-label);
    --xy-mobile-hero-action-size: 0.875rem;
  }

  html {
    inline-size: 100%;
    min-block-size: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: manipulation;
  }

  body,
  #app[data-framework-root] {
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 100dvh;
    overflow-x: clip;
    touch-action: manipulation;
  }

  /* Explicit desktop sans declarations must not leak into mobile pages. */
  #app[data-framework-root],
  #app[data-framework-root] :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    li,
    dt,
    dd,
    a,
    span,
    strong,
    em,
    b,
    i,
    label,
    legend,
    small,
    button,
    input,
    select,
    textarea,
    optgroup,
    option,
    [contenteditable=""],
    [contenteditable="true"],
    [contenteditable="plaintext-only"]
  ) {
    font-family: var(--xy-mobile-font-serif) !important;
  }

  /*
   * Old page modules occasionally split one sentence across spans with their
   * own font and color. Inside reading copy, preserve the semantic role of
   * the containing line instead of letting those fragments fight each other;
   * do not replace the desktop hierarchy of headings, labels or captions.
   */
  #app[data-framework-root] :where(
    p,
    li,
    dt,
    dd,
    label,
    legend
  ) :where(span, a, strong, em, b, i, small) {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
  }

  /*
   * iOS Safari zooms focused text fields below 16px. These are the actual
   * text-entry controls; checkboxes, radios and range controls retain their
   * native dimensions.
   */
  #app[data-framework-root] :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="image"]),
    select,
    textarea,
    [contenteditable=""],
    [contenteditable="true"],
    [contenteditable="plaintext-only"]
  ) {
    font-size: 1rem !important;
    line-height: 1.65;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: manipulation;
  }

  /*
   * Keep the form hierarchy proportional to desktop: fields and submit
   * actions are the reading level, settings copy is one supporting step down,
   * and editable controls remain at the no-zoom size above.
   */
  #app[data-framework-root] .xy-mingli-form__field-label,
  #app[data-framework-root] .xy-mingli-form__submit {
    font-size: 0.9375rem !important;
    line-height: 1.5;
  }

  #app[data-framework-root] :where(
    .xy-mingli-form__solar-time-copy,
    .xy-mingli-form__setting-copy
  ) {
    font-size: 0.75rem !important;
    line-height: 1.5;
  }

  /* Match the desktop brand lock-up visually, not the larger mobile glyph box. */
  .ui-top-bar--home .ui-top-bar__brand {
    gap: 0;
  }

  .ui-top-bar--home .ui-home-brand__en {
    margin-block-start: -0.125rem;
  }

  /*
   * The first screen has a fixed-height composition. Keep the scroll cue in
   * its own lower strip rather than letting it float across the CTA note.
   */
  .xy-home-hero__copy {
    --xy-home-hero-copy-gap: 0.5rem;
  }

  /*
   * Restore the desktop display / copy / action hierarchy where the former
   * phone rules compressed only the display title. These overrides arrive
   * after the page stylesheet so all three roles scale as one composition.
   */
  .xy-home-hero__title {
    font-size: var(--xy-mobile-hero-display-size);
    letter-spacing: 0.06em;
  }

  .xy-home-hero__subtitle {
    font-size: var(--xy-mobile-hero-copy-size);
    letter-spacing: clamp(0.18em, 0.7vw, 0.24em);
  }

  .xy-home-hero__status,
  .xy-home-hero__cta-note {
    font-size: var(--xy-mobile-hero-copy-size);
  }

  .xy-home-hero__status {
    letter-spacing: 0.065em;
  }

  .xy-home-hero__cta {
    font-size: var(--xy-mobile-hero-action-size);
  }

  .xy-home-yijing-scroller__text,
  .xy-home-yijing-scroller__book {
    font-size: 0.825rem;
  }

  .xy-home-hero__scroll-cue {
    /* Its 47px box sits eight pixels above the fixed 56px tab bar. */
    inset-block-start: calc(100svh - (7.5rem + env(safe-area-inset-bottom, 0px)));
    inset-block-end: auto;
  }

  /* A short landscape or compact-height phone has no clear third strip. */
  @media (max-height: 42rem) {
    .xy-home-hero__scroll-cue {
      display: none;
    }
  }

  /* The evidence overview remains a compact two-by-two set on every phone. */
  .xy-home-evidence__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--ui-space-3);
  }

  .xy-home-evidence__metric {
    padding: var(--ui-space-5) var(--ui-space-2);
  }

  .xy-home-evidence__metric:nth-child(odd)::before {
    display: none;
  }

  .xy-home-evidence__metric:nth-child(even)::before {
    display: block;
  }
}