/* Japanese typography hierarchy. Latin and numerals keep the instrument voice. */

:root {
  --jp-title: "Crossroad Latin", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", "Hiragino Sans", sans-serif;
  --jp-reading: "Crossroad Latin", "Noto Sans JP", "Yu Gothic", "Yu Gothic UI", "Hiragino Kaku Gothic ProN", sans-serif;
  --jp-ui: "Crossroad Latin", "Noto Sans JP", "Yu Gothic UI", "Meiryo UI", sans-serif;
}

body,
button,
input,
select,
textarea {
  font-family: var(--jp-reading);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

:where(
  .prediction-title,
  .latest-official h2,
  .official-event h2,
  .future-official-full h2,
  .future-official-chip strong,
  .editor-current-title,
  .prediction-depth-title
) {
  font-family: var(--jp-title) !important;
  font-feature-settings: "palt" 1, "kern" 1;
  font-weight: 660;
  line-break: strict;
  word-break: auto-phrase;
  text-wrap: balance;
  hanging-punctuation: allow-end;
}

.prediction-card.lod-uniform:not(.add-card) .prediction-title {
  font-weight: 610 !important;
  line-height: 1.42 !important;
  letter-spacing: .035em;
}

.latest-official h2,
.official-event h2,
.future-official-full h2 {
  font-weight: 650;
  letter-spacing: .045em;
}

:where(
  .latest-official p,
  .official-event p,
  .future-official-full p,
  .prediction-depth-lede,
  .editor-list-head > div > p:last-child
) {
  font-family: var(--jp-reading) !important;
  font-feature-settings: "palt" 1, "kern" 1;
  font-weight: 410;
}

:where(
  .prediction-depth-actions button,
  .future-official-chip strong,
  .editor-current-edit,
  .editor-current-delete,
  .launch-label-form,
  .prediction-form
) {
  font-family: var(--jp-ui);
  font-feature-settings: "palt" 1, "kern" 1;
}

/* The management UI favors ordinary, low-fatigue Japanese over display typography. */
html[lang="ja"] .prediction-editor {
  --editor-jp-plain: "Yu Gothic UI", "Meiryo UI", Meiryo, "Hiragino Sans", sans-serif;
  font-family: var(--editor-jp-plain);
}

html[lang="ja"] .prediction-editor .editor-list-head h2 {
  font-family: var(--editor-jp-plain);
  font-weight: 400;
  letter-spacing: .01em;
}

html[lang="ja"] .prediction-editor :is(
  .editor-list-head > div > p:last-child,
  .editor-quick-add-toggle > strong,
  .editor-quick-add-toggle > small,
  .editor-kind-switch button,
  .close-editor span,
  .editor-current-edit,
  .editor-current-delete,
  .editor-row-actions button,
  .editor-quick-add button,
  .editor-row-field,
  .editor-row-field small
) {
  font-family: var(--editor-jp-plain);
  font-feature-settings: normal;
  letter-spacing: 0;
}

html[lang="ja"] .prediction-editor :is(
  input:not([type="date"]),
  textarea,
  select
) {
  font-family: var(--editor-jp-plain) !important;
  font-weight: 400;
  font-feature-settings: normal;
  letter-spacing: 0;
}

html[lang="ja"] .prediction-editor .editor-current-title {
  font-family: var(--editor-jp-plain) !important;
  font-feature-settings: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.35;
  translate: 0 -3px;
}