/*
 * International layout overrides. This file is loaded after the shared Web
 * styles, and is intentionally isolated from the mainland experience.
 */

html[data-site-region="intl"] {
  --intl-font:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  font-family: var(--intl-font);
  font-size: 16px;
}

html[data-site-region="intl"][lang="zh-CN"] {
  --intl-font:
    -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Noto Sans CJK SC", sans-serif;
}

html[data-site-region="intl"][lang="zh-TW"] {
  --intl-font:
    -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei",
    "Noto Sans CJK TC", sans-serif;
}

html[data-site-region="intl"][lang="ja"] {
  --intl-font:
    -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI",
    "Yu Gothic", Meiryo, sans-serif;
  line-break: strict;
}

html[data-site-region="intl"][lang="ko"] {
  --intl-font:
    -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic",
    "Noto Sans KR", sans-serif;
  word-break: keep-all;
}

html[data-site-region="intl"] body,
html[data-site-region="intl"] button,
html[data-site-region="intl"] input,
html[data-site-region="intl"] select,
html[data-site-region="intl"] textarea {
  font-family: var(--intl-font);
}

html[data-site-region="intl"] body {
  min-width: 320px;
}

html[data-site-region="intl"] #app,
html[data-site-region="intl"] .page,
html[data-site-region="intl"] .panel,
html[data-site-region="intl"] .creation-page,
html[data-site-region="intl"] .overview-layout,
html[data-site-region="intl"] .overview-content {
  min-width: 0;
}

html[data-site-region="intl"]
  :is(p, h1, h2, h3, h4, label, small, td, th, .button, button) {
  text-wrap: pretty;
}

html[data-site-region="intl"] :is(p, h1, h2, h3, h4, label, small, td, th) {
  overflow-wrap: break-word;
}

html[data-site-region="intl"][lang="ja"]
  :is(p, h1, h2, h3, h4, label, small, td, th) {
  word-break: normal;
}

html[data-site-region="intl"][lang="ko"]
  :is(p, h1, h2, h3, h4, label, small, td, th) {
  word-break: keep-all;
}

html[data-site-region="intl"] :is(p, li, label, small) {
  line-height: 1.65;
}

html[data-site-region="intl"] h1,
html[data-site-region="intl"] h2,
html[data-site-region="intl"] h3,
html[data-site-region="intl"] h4 {
  line-height: 1.35;
  letter-spacing: 0;
}

/* Header: let navigation use the middle track instead of competing with actions. */
html[data-site-region="intl"] .intl-topbar {
  display: grid;
  grid-template-columns: minmax(118px, max-content) minmax(0, 1fr) max-content;
  gap: clamp(10px, 1.8vw, 26px);
  height: auto;
  min-height: 64px;
  padding-block: 10px;
}

html[data-site-region="intl"] .intl-topbar .brand {
  min-width: 0;
  width: auto;
}

html[data-site-region="intl"] .intl-topbar nav {
  min-width: 0;
  justify-content: flex-start;
  gap: 12px;
}

html[data-site-region="intl"] .intl-topbar nav .button {
  min-width: 0;
  min-height: 44px;
  padding-inline: clamp(7px, 1vw, 13px);
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}

html[data-site-region="intl"] .intl-controls {
  min-width: 0;
  margin-left: 0;
  gap: clamp(8px, 1vw, 16px);
}

html[data-site-region="intl"] .intl-controls .region-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  white-space: normal;
  line-height: 1.3;
}

html[data-site-region="intl"] .intl-controls .locale-picker {
  display: inline-flex;
  min-width: 0;
}

html[data-site-region="intl"] .intl-controls .locale-picker select {
  width: 128px;
  max-width: 100%;
  min-height: 44px;
  padding-block: 8px;
}

html[data-site-region="intl"] .intl-controls .account-link,
html[data-site-region="intl"] .intl-controls [data-action="login"] {
  min-height: 44px;
  height: auto;
  min-width: max-content;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
}

@media (max-width: 1050px) and (min-width: 761px) {
  html[data-site-region="intl"] .intl-topbar {
    grid-template-columns: minmax(100px, max-content) minmax(0, 1fr) max-content;
    padding-inline: 16px;
  }

  html[data-site-region="intl"] .intl-topbar .brand > span,
  html[data-site-region="intl"] .intl-topbar nav svg {
    display: none;
  }

  html[data-site-region="intl"] .intl-topbar nav .button {
    flex: 1 1 0;
    font-size: 13px;
  }

  html[data-site-region="intl"] .intl-controls .region-link {
    font-size: 12px;
  }

  html[data-site-region="intl"] .intl-controls .locale-picker select {
    width: 112px;
  }
}

@media (max-width: 760px) {
  html[data-site-region="intl"] { --header: 104px; }
  html[data-site-region="intl"] .intl-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px auto;
    grid-template-areas: "brand language account" "region region region";
    align-items: center;
    min-height: var(--header);
    padding: 10px 12px 8px;
    gap: 4px 8px;
  }
  html[data-site-region="intl"] .intl-topbar .brand { grid-area: brand; margin: 0; }
  html[data-site-region="intl"] .intl-topbar .brand strong { font-size: 22px; }
  html[data-site-region="intl"] .intl-controls { display: contents; }
  html[data-site-region="intl"] .intl-controls .region-link {
    grid-area: region;
    justify-self: end;
    min-height: 32px;
    font-size: 13px;
  }
  html[data-site-region="intl"] .intl-controls .locale-picker { grid-area: language; }
  html[data-site-region="intl"] .intl-controls .locale-picker select {
    width: 104px;
    max-width: none;
    padding-inline: 8px;
    font-size: 14px;
  }
  html[data-site-region="intl"] .intl-controls .account-link,
  html[data-site-region="intl"] .intl-controls [data-action="login"] {
    grid-area: account;
    min-width: 0;
    padding-inline: 8px;
    font-size: 13px;
  }
  html[data-site-region="intl"] .intl-topbar > nav,
  html[data-site-region="intl"] .intl-controls .separator { display: none; }
  html[data-site-region="intl"] .intl-mobile-nav a {
    min-height: 56px;
    padding: 8px 2px;
    line-height: 1.35;
    font-size: 12px;
    white-space: normal;
  }
}

/* Shared forms and dialogs. */
html[data-site-region="intl"] dialog {
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  overflow: auto;
}

html[data-site-region="intl"] #modal.login-dialog {
  width: min(480px, calc(100vw - 24px));
}

html[data-site-region="intl"] .email-login-form,
html[data-site-region="intl"] #intl-preferences,
html[data-site-region="intl"] #delete-intl-account {
  min-width: 0;
}

html[data-site-region="intl"] .email-login-form :is(input:not([type="checkbox"]):not([type="radio"]), button:not(.text-button)),
html[data-site-region="intl"] #intl-preferences :is(select, button),
html[data-site-region="intl"] #delete-intl-account :is(input:not([type="checkbox"]):not([type="radio"]), button) {
  min-height: 44px;
}

html[data-site-region="intl"] #modal.login-dialog .email-login-form .phone-agreement {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  line-height: 1.7;
}

html[data-site-region="intl"] #modal.login-dialog .phone-agreement input[type="checkbox"],
html[data-site-region="intl"] #delete-intl-account input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 2px 0 0;
  padding: 0;
  align-self: start;
}

html[data-site-region="intl"] .phone-code-row button,
html[data-site-region="intl"] .email-login-form .primary,
html[data-site-region="intl"] #intl-preferences .primary,
html[data-site-region="intl"] #delete-intl-account button {
  white-space: normal;
  line-height: 1.3;
}

html[data-site-region="intl"] #intl-preferences,
html[data-site-region="intl"] #delete-intl-account {
  display: grid;
  gap: 16px;
  text-align: left;
}

html[data-site-region="intl"] #intl-preferences label,
html[data-site-region="intl"] #delete-intl-account label {
  display: grid;
  gap: 8px;
}

html[data-site-region="intl"] #delete-intl-account label.consent {
  display: flex;
  align-items: flex-start;
  position: static;
  width: auto;
  margin: 0;
}

/* Libraries, creation and account use readable control sizes rather than clipped copy. */
html[data-site-region="intl"] .page {
  padding-inline: clamp(16px, 3vw, 42px);
}

html[data-site-region="intl"] .page-heading,
html[data-site-region="intl"] .creation-heading,
html[data-site-region="intl"] .builder-heading {
  align-items: flex-start;
}

html[data-site-region="intl"] .page-heading h1,
html[data-site-region="intl"] .creation-heading h1,
html[data-site-region="intl"] .builder-heading h1 {
  font-size: clamp(24px, 2.4vw, 34px);
}

html[data-site-region="intl"] .page-heading p,
html[data-site-region="intl"] .creation-heading p,
html[data-site-region="intl"] .builder-heading p {
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.55;
}

html[data-site-region="intl"] .creation-page button,
html[data-site-region="intl"] .creation-page .button,
html[data-site-region="intl"] .creation-modal button,
html[data-site-region="intl"] .creation-modal .button,
html[data-site-region="intl"] .builder-submit,
html[data-site-region="intl"] .builder-create-link,
html[data-site-region="intl"] .scene-library-v2 .button {
  min-height: 44px;
  white-space: normal;
  line-height: 1.35;
}

html[data-site-region="intl"] .creation-page :is(button, .button),
html[data-site-region="intl"] .creation-modal :is(button, .button) {
  font-size: 14px;
}

html[data-site-region="intl"] .creation-page .segmented,
html[data-site-region="intl"] .creation-modal .segmented,
html[data-site-region="intl"] .scene-library-v2 .dialogue-kinds {
  width: 100%;
}

html[data-site-region="intl"] .creation-page .segmented button,
html[data-site-region="intl"] .creation-modal .segmented button,
html[data-site-region="intl"] .scene-library-v2 .dialogue-kinds .button {
  min-width: 0;
  min-height: 44px;
  white-space: normal;
}

html[data-site-region="intl"] .creation-toolbar .search,
html[data-site-region="intl"] .scene-library-v2 .search,
html[data-site-region="intl"] .toolbar .search {
  max-width: 100%;
  min-width: 0;
}

html[data-site-region="intl"] .work-create-entries > a,
html[data-site-region="intl"] .voice-card,
html[data-site-region="intl"] .scene-card,
html[data-site-region="intl"] .avatar-card {
  min-width: 0;
}

html[data-site-region="intl"] .work-create-entries h2,
html[data-site-region="intl"] .voice-card h2,
html[data-site-region="intl"] .scene-card h3,
html[data-site-region="intl"] .avatar-card h2,
html[data-site-region="intl"] .work-identity h3 {
  overflow-wrap: break-word;
  white-space: normal;
}

html[data-site-region="intl"] .work-row-actions,
html[data-site-region="intl"] .work-detail-actions,
html[data-site-region="intl"] .button-row,
html[data-site-region="intl"] .scene-card-actions {
  flex-wrap: wrap;
}

html[data-site-region="intl"] .work-submit,
html[data-site-region="intl"] .creation-modal footer {
  flex-wrap: wrap;
}

html[data-site-region="intl"] .work-submit .primary {
  min-width: min(100%, 180px);
}

html[data-site-region="intl"] .builder-layout,
html[data-site-region="intl"] .builder-fields,
html[data-site-region="intl"] .builder-two-col,
html[data-site-region="intl"] .photo-create,
html[data-site-region="intl"] .work-composer,
html[data-site-region="intl"] .work-detail-layout {
  min-width: 0;
}

html[data-site-region="intl"] .builder-section label,
html[data-site-region="intl"] .builder-section input,
html[data-site-region="intl"] .builder-section select,
html[data-site-region="intl"] .builder-section textarea {
  min-width: 0;
  max-width: 100%;
}

/* account.css hard-codes a Chinese stack; restore the selected locale here. */
html[data-site-region="intl"] .overview-layout {
  font-family: var(--intl-font);
}

html[data-site-region="intl"] .overview-layout :is(button, a) {
  white-space: normal;
  line-height: 1.35;
}

html[data-site-region="intl"] .overview-profile,
html[data-site-region="intl"] .overview-assets,
html[data-site-region="intl"] .overview-lower,
html[data-site-region="intl"] .overview-asset,
html[data-site-region="intl"] .overview-security-row {
  min-width: 0;
}

html[data-site-region="intl"]
  .overview-layout
  :is(
    .overview-edit,
    .overview-primary,
    .overview-outline,
    .overview-sidebar nav a,
    .overview-sidebar nav button
  ) {
  min-height: 44px;
  height: auto;
  white-space: normal;
}

html[data-site-region="intl"] .overview-task-name,
html[data-site-region="intl"] .overview-task-status,
html[data-site-region="intl"] .overview-muted,
html[data-site-region="intl"] .overview-balance {
  white-space: normal;
}

@media (max-width: 760px) {
  html[data-site-region="intl"] .page,
  html[data-site-region="intl"] .creation-page {
    padding-inline: 16px;
  }

  html[data-site-region="intl"] .page-heading,
  html[data-site-region="intl"] .creation-heading,
  html[data-site-region="intl"] .builder-heading {
    flex-wrap: wrap;
    gap: 12px;
  }

  html[data-site-region="intl"] .page-heading > .button,
  html[data-site-region="intl"] .creation-heading > :is(.button, button),
  html[data-site-region="intl"] .builder-heading > .button {
    min-height: 44px;
  }

  html[data-site-region="intl"] .creation-toolbar {
    align-items: stretch;
  }

  html[data-site-region="intl"] .creation-toolbar .segmented,
  html[data-site-region="intl"] .creation-toolbar .search {
    width: 100%;
  }

  html[data-site-region="intl"] .work-create-entries {
    grid-template-columns: 1fr;
  }

  html[data-site-region="intl"] .work-create-entries > a {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
  }

  html[data-site-region="intl"] .work-create-entries > a > i {
    grid-row: 1 / span 2;
    margin: 0;
  }

  html[data-site-region="intl"] .work-create-entries > a > div {
    min-width: 0;
  }

  html[data-site-region="intl"] .work-create-entries > a > svg {
    display: none;
  }

  html[data-site-region="intl"] .work-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  html[data-site-region="intl"] .work-identity {
    grid-column: 1 / -1;
  }

  html[data-site-region="intl"] .work-row > div:not(.work-row-actions) {
    margin-left: 0;
  }

  html[data-site-region="intl"] .work-row-actions {
    justify-self: end;
  }

  html[data-site-region="intl"] .scene-library-v2 .button-row {
    grid-template-columns: 1fr;
  }

  html[data-site-region="intl"] .scene-library-v2 .button-row .button {
    min-height: 44px;
    padding: 9px 10px;
    font-size: 13px;
  }

  html[data-site-region="intl"] .overview-sidebar nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    width: 100%;
  }

  html[data-site-region="intl"] .overview-sidebar nav :is(a, button) {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    justify-content: flex-start;
  }

  html[data-site-region="intl"] .overview-profile,
  html[data-site-region="intl"] .overview-asset,
  html[data-site-region="intl"] .overview-security-row {
    flex-wrap: wrap;
  }

  html[data-site-region="intl"]
    .overview-layout
    :is(.overview-edit, .overview-primary, .overview-outline) {
    min-height: 44px;
  }

  html[data-site-region="intl"] .overview-layout .overview-primary,
  html[data-site-region="intl"] .overview-layout .overview-outline,
  html[data-site-region="intl"] .overview-layout .overview-edit {
    margin-left: 0;
  }
}

@media (max-width: 420px) {
  html[data-site-region="intl"] #modal.login-dialog {
    padding: 26px 18px 22px;
  }

  html[data-site-region="intl"] .phone-code-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 8px;
  }

  html[data-site-region="intl"] .phone-code-row button {
    max-width: 96px;
    padding-inline: 9px;
    font-size: 13px;
  }

  html[data-site-region="intl"] .avatar-grid {
    grid-template-columns: 1fr;
  }

  html[data-site-region="intl"] .avatar-card,
  html[data-site-region="intl"] .avatar-add {
    height: auto;
    min-height: 330px;
  }

  html[data-site-region="intl"] .builder-avatar-grid {
    grid-template-columns: 1fr;
  }
}

/* Account cards grow with translated descriptions and keep their actions inside. */
html[data-site-region="intl"] .overview-asset {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  height: auto;
  min-height: 190px;
  gap: 18px;
}
html[data-site-region="intl"] .overview-asset > .overview-primary,
html[data-site-region="intl"] .overview-asset > .overview-outline {
  grid-column: 2;
  justify-self: start;
  margin: 0;
  max-width: 100%;
}
html[data-site-region="intl"] .overview-asset .overview-muted {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.65;
}
html[data-site-region="intl"] .overview-security footer { flex-wrap: wrap; }
@media (max-width: 760px) {
  html[data-site-region="intl"] .overview-asset { min-height: 0; gap: 16px; }
  html[data-site-region="intl"] .overview-asset > .overview-primary,
  html[data-site-region="intl"] .overview-asset > .overview-outline { grid-column: 1 / -1; }
}

/* PayPal time passes carry localized validity, daily allowance, and renewal copy. */
html[data-site-region="intl"] .paypal-checkout .native-package {
  height: auto;
  min-height: 190px;
}

html[data-site-region="intl"] .paypal-checkout :is(.native-package-name, .native-benefit) {
  white-space: normal;
  overflow-wrap: anywhere;
}

html[data-site-region="intl"] .paypal-checkout .native-benefit {
  align-items: flex-start;
}

html[data-site-region="intl"] .paypal-checkout .native-package[aria-checked="true"] {
  border-color: #8953ff;
  background: linear-gradient(125deg, #f5f0ff, #eeebff);
  box-shadow: 0 0 0 1px #8953ff;
}

@media (max-width: 560px) {
  html[data-site-region="intl"] .paypal-checkout .native-packages { grid-template-columns: 1fr; }
  html[data-site-region="intl"] .paypal-checkout .native-package { min-height: 0; }
}