/*
 * Last-loaded layout lock for the home language hint.
 *
 * The hint is a direct item of both portrait flex and landscape grid
 * layouts. Give the word box its own intrinsic width and let either layout
 * centre it. Avoid left offsets or transforms: wardrobe.css already supplies
 * a relative position in landscape, so those would be applied a second time.
 */

/*
 * Let the browser reserve the vertical scrollbar in its normal position.
 * Adding a matching left gutter moves the centred copy right by half the
 * scrollbar width in non-overlay Chromium WebViews.
 */
html[data-route="home"] {
  scrollbar-gutter: auto !important;
}

body[data-route="home"] .yu-home-language-note {
  display: block !important;
  inline-size: max-content !important;
  max-inline-size: calc(100% - 60px) !important;
  min-inline-size: 0 !important;
  inset-inline: auto !important;
  box-sizing: border-box !important;
  padding-inline: 0 !important;
  margin-inline: auto !important;
  justify-self: center !important;
  align-self: center !important;
  float: none !important;
  clear: none !important;
  text-align: center !important;
  text-align-last: center !important;
  text-indent: 0 !important;
  transform: none !important;
}

body[data-route="home"] .yu-home-language-note > span {
  display: inline-block !important;
  inline-size: auto !important;
  max-inline-size: none !important;
  box-sizing: border-box !important;
  margin-inline: 0 !important;
  float: none !important;
  text-align: center !important;
  text-align-last: center !important;
  white-space: nowrap !important;
  transform: none !important;
}

/*
 * Android WebView applies the system font scale to every CSS pixel value.
 * The original 2.175 home uses a fixed visual composition, so scaling its
 * decorative title and fixed-height rows produces clipped content at 130%
 * and 150%.  Keep this screen's visual typography at its designed size while
 * retaining the user's system setting for scrollable text-heavy surfaces.
 */
html[data-system-font-layout="large"] body[data-route="home"] .yu-home-signature {
  font-size: calc(13px * var(--system-font-compensation)) !important;
}

html[data-system-font-layout="large"] body[data-route="home"] .yu-home-heading p {
  font-size: calc(10px * var(--system-font-compensation)) !important;
}

html[data-system-font-layout="large"] body[data-route="home"] .yu-home-heading h1 {
  font-size: calc(clamp(64px, 9vw, 112px) * var(--system-font-compensation)) !important;
}

html[data-system-font-layout="large"] body[data-route="home"] .yu-home-heading > span {
  font-size: calc(17px * var(--system-font-compensation)) !important;
}

html[data-system-font-layout="large"] body[data-route="home"] .yu-main-action {
  font-size: calc(26px * var(--system-font-compensation)) !important;
}

html[data-system-font-layout="large"] body[data-route="home"] .yu-secondary-actions button {
  font-size: calc(17px * var(--system-font-compensation)) !important;
}

html[data-system-font-layout="large"] body[data-route="home"] .yu-home-achievements,
html[data-system-font-layout="large"] body[data-route="home"] .yu-home-language-note {
  font-size: calc(10px * var(--system-font-compensation)) !important;
}

html[data-system-font-layout="large"] body[data-route="home"] .yu-home-achievements > span:nth-child(1) {
  font-size: calc(11px * var(--system-font-compensation)) !important;
}

html[data-system-font-layout="large"] body[data-route="home"] .yu-home-best b {
  font-size: calc(12px * var(--system-font-compensation)) !important;
}

@media (max-width: 520px) {
  html[data-system-font-layout="large"] body[data-route="home"] .yu-pill {
    font-size: calc(10px * var(--system-font-compensation)) !important;
  }

  html[data-system-font-layout="large"] body[data-route="home"] .yu-home-heading h1 {
    font-size: calc(78px * var(--system-font-compensation)) !important;
  }

  html[data-system-font-layout="large"] body[data-route="home"] .yu-home-heading > span {
    font-size: calc(14px * var(--system-font-compensation)) !important;
  }

  html[data-system-font-layout="large"] body[data-route="home"] .yu-main-action {
    font-size: calc(19px * var(--system-font-compensation)) !important;
  }

  html[data-system-font-layout="large"] body[data-route="home"] .yu-secondary-actions button {
    font-size: calc(13px * var(--system-font-compensation)) !important;
  }
}

@media (max-width: 520px) and (max-height: 620px) {
  html[data-system-font-layout="large"] body[data-route="home"] .yu-home-heading h1 {
    font-size: calc(66px * var(--system-font-compensation)) !important;
  }

  html[data-system-font-layout="large"] body[data-route="home"] .yu-home-heading p {
    font-size: calc(9px * var(--system-font-compensation)) !important;
  }

  html[data-system-font-layout="large"] body[data-route="home"] .yu-home-heading > span {
    font-size: calc(13px * var(--system-font-compensation)) !important;
  }

  html[data-system-font-layout="large"] body[data-route="home"] .yu-secondary-actions button {
    font-size: calc(14px * var(--system-font-compensation)) !important;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  html[data-system-font-layout="large"] body[data-route="home"] .yu-home-heading h1 {
    font-size: calc(48px * var(--system-font-compensation)) !important;
  }

  html[data-system-font-layout="large"] body[data-route="home"] .yu-home-heading > span {
    font-size: calc(11px * var(--system-font-compensation)) !important;
  }

  html[data-system-font-layout="large"] body[data-route="home"] .yu-main-action {
    font-size: calc(17px * var(--system-font-compensation)) !important;
  }

  html[data-system-font-layout="large"] body[data-route="home"] .yu-secondary-actions button {
    font-size: calc(13px * var(--system-font-compensation)) !important;
  }

  html[data-system-font-layout="large"] body[data-route="home"] .yu-home-achievements,
  html[data-system-font-layout="large"] body[data-route="home"] .yu-home-language-note {
    font-size: calc(10px * var(--system-font-compensation)) !important;
  }
}