/*
 * Yuzu House 2.175 typography parity.
 *
 * The original ships the same YuzuPop file, but deliberately mixes it with
 * the Android UI font in editable lists and panels. The prototype had drifted
 * toward Georgia and heavier labels on those screens, which made the Chinese
 * UI look less soft and compact than the original.
 */
:root {
  --parity-font-ui: "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  --parity-font-android-ui: "Microsoft YaHei UI", "PingFang SC", sans-serif;
  --parity-font-cute: "YuzuPop", "Microsoft YaHei", "PingFang SC", sans-serif;
}

/* Home: preserve the original mixed body weights and primary-button spacing. */
body[data-route="home"] .yu-home-signature {
  letter-spacing: 1.2px;
}

body[data-route="home"] .yu-main-action.level {
  letter-spacing: 1px;
}

body[data-route="home"] .yu-home-best {
  letter-spacing: 0.5px;
}

body[data-route="home"] .yu-home-best b,
body[data-route="home"] .yu-home-mark {
  font-weight: 400;
}

/*
 * Wardrobe chrome in the original uses the platform UI face. The stage keeps
 * its intentional mix: turn/mirror use the UI face, while save/share/import
 * use YuzuPop.
 */
body[data-route="editor"] .editor-header,
body[data-route="editor"] .done-button {
  font-family: var(--parity-font-android-ui);
}

body[data-route="editor"] .editor-title h2 {
  font-family: var(--parity-font-android-ui);
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: normal !important;
}

body[data-route="editor"] #wardrobeTurn,
body[data-route="editor"] #wardrobeMirror {
  font-family: var(--parity-font-ui);
  font-size: 10px;
  font-weight: 400;
}

body[data-route="editor"] #wardrobeNight {
  font-family: "Microsoft YaHei", var(--parity-font-ui);
  font-size: 11px;
  font-weight: 400;
}

body[data-route="editor"] #wardrobeSave,
body[data-route="editor"] #wardrobeShare,
body[data-route="editor"] #wardrobeFreeImport {
  font-family: var(--parity-font-cute);
  font-size: 12px;
  font-weight: 400;
}

body[data-route="editor"] .tool-panel {
  font-family: var(--parity-font-ui);
}

body[data-route="editor"] .tool-panel :is(
  button,
  input,
  label,
  output,
  p,
  select,
  small,
  span,
  strong,
  b
) {
  font-family: inherit;
}

body[data-route="editor"] #panelSelectionSummary {
  font-size: 11px !important;
  font-weight: 400 !important;
}

body[data-route="editor"] #tabList button {
  font-size: 12px !important;
  font-weight: 600 !important;
}

body[data-route="editor"] #categoryList button {
  font-size: 11px !important;
  font-weight: 400 !important;
}

body[data-route="editor"] #catalogGrid .item-card,
body[data-route="editor"] #catalogGrid .item-card b {
  font-size: 10px !important;
  font-weight: 400 !important;
}

body[data-route="editor"] #adjustCurrentPart {
  font-size: 12px !important;
  font-weight: 400 !important;
}

body[data-route="editor"] #dockItemName {
  font-family: var(--parity-font-cute);
  font-size: 12px !important;
  font-weight: 400 !important;
}

body[data-route="editor"] #editDock .control-title {
  font-size: 11px !important;
  font-weight: 400 !important;
}

body[data-route="editor"] #colorValue {
  font-size: 9px !important;
  font-weight: 400 !important;
}

body[data-route="editor"] #resetPartColor {
  font-size: 10px !important;
  font-weight: 400 !important;
}

body[data-route="editor"] #editDock .free-color > span,
body[data-route="editor"] #freeColorOpen {
  font-size: 10px !important;
}

body[data-route="editor"] #savedColorSwatches .saved-color-empty {
  font-size: 9px !important;
}

body[data-route="editor"] #adjustToggle,
body[data-route="editor"] #editDock .layer-editor {
  font-size: 11px !important;
  font-weight: 400 !important;
}

body[data-route="editor"] #layerEditorToggle,
body[data-route="editor"] #resetLayerOrder {
  font-family: var(--parity-font-cute);
  font-size: 11px !important;
  font-weight: 400 !important;
}

/*
 * The action stage is a prototype extension, but it still belongs to the
 * Yuzu visual family. Remove the Georgia/宋体 fallback that visibly differs
 * from every original screen.
 */
body[data-route="studio"] .mode-heading h2,
body[data-route="studio"] .studio-caption b,
body[data-route="studio"] .panel-section-heading h3,
body[data-route="studio"] .motion-button > i {
  font-family: var(--parity-font-cute);
}

/*
 * Android WebView scales the compact transport labels but not the slider
 * column widths.  At 150% the amplitude value extended past the stage card.
 * Keep this dense control row at its designed optical size; the labels above
 * and the scrollable motion list still inherit the system setting.
 */
html[data-system-font-layout="large"] body[data-route="studio"] .stage-speed {
  font-size: calc(9px * var(--system-font-compensation)) !important;
}

dialog h2,
dialog h3 {
  font-family: var(--parity-font-cute);
}