/* One phone header contract. Page-specific actions and surfaces stay in their pages. */
@media (max-width: 900px) {
  body.ui4-app {
    --ui4-chrome-header-h: 56px;
    --ui4-chrome-brand-size: 32px;
    --ui4-chrome-brand-inline: 16px;
    --ui4-chrome-title-size: 18px;
    --ui4-chrome-title-line: 24px;
    --ui4-chrome-title-font: "UI4 Noto Sans SC", "UI4 Noto SC Extended", "Noto Sans SC", sans-serif;
    --ui4-chrome-action-size: 44px;
    --ui4-chrome-action-icon: 22px;
    --ui4-chrome-action-gap: 4px;
  }

  body.ui4-app :is(
    .ui4-header.hdr, .ui4-shared-header, [data-pencil-name="顶部栏 / 我的"],
    .funds-page:not(.fund-popup) > .fund-head, .push-center > .push-header,
    #kdScreener > :is(.ksc-header, .ksx-head, .ksc-result-head, .ks-head, .ksx-editor-title)
  ) {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    height: var(--ui4-chrome-header-h) !important;
    min-height: var(--ui4-chrome-header-h) !important;
    max-height: var(--ui4-chrome-header-h) !important;
    padding: 0 var(--ui4-chrome-brand-inline) !important;
    gap: var(--ui4-chrome-action-gap) !important;
    flex-shrink: 0 !important;
    font-family: var(--ui4-chrome-title-font) !important;
  }

  body.ui4-app :is(
    .ui4-header, .ui4-shared-header, [data-pencil-name="顶部栏 / 我的"],
    .funds-page:not(.fund-popup) > .fund-head, .push-center > .push-header,
    #kdScreener > :is(.ksc-header, .ksx-head, .ksc-result-head, .ks-head, .ksx-editor-title)
  ) :is(h1, [data-pencil-name="页面标题"], .logo-wordmark, #ui4HeaderRoute, #ksChartName) {
    min-width: 0 !important;
    margin-block: 0 !important;
    font-family: var(--ui4-chrome-title-font) !important;
    font-size: var(--ui4-chrome-title-size) !important;
    line-height: var(--ui4-chrome-title-line) !important;
    font-weight: 700 !important;
    font-style: normal !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.ui4-app :is(.ui4-shared-header, [data-pencil-name="顶部栏 / 我的"]) > [data-pencil-name="页面标题"] {
    height: var(--ui4-chrome-title-line) !important;
  }
  body.ui4-app .ui4-header .logo,
  body.ui4-app .funds-page:not(.fund-popup) .fund-brand {
    gap: var(--ui4-chrome-action-gap) !important;
  }
  body.ui4-app .ui4-header :is(.hdr-r, .ui4-module-actions),
  body.ui4-app #kdScreener .ksx-head-actions {
    gap: var(--ui4-chrome-action-gap) !important;
    align-items: center !important;
  }

  body.ui4-app :is(
    .ui4-header .logo-mark, .ui4-shared-mark,
    [data-pencil-name="顶部栏 / 我的"] > [data-pencil-name="品牌"],
    .funds-page:not(.fund-popup) .fund-brand img,
    #kdScreener > :is(.ksc-header, .ksx-head, .ks-head) > img
  ) {
    width: var(--ui4-chrome-brand-size) !important;
    min-width: var(--ui4-chrome-brand-size) !important;
    height: var(--ui4-chrome-brand-size) !important;
    flex-shrink: 0 !important;
  }

  body.ui4-app :is(
    .ui4-header .ui4-hdr-icon, .ui4-header .ui4-header-back,
    .ui4-header .event-calendar-launch, .ui4-header .ui4-alert-launch,
    .ui4-shared-header :is(button, [role="button"]),
    [data-pencil-name="顶部栏 / 我的"] .kdt-mode button,
    .funds-page:not(.fund-popup) > .fund-head > button,
    .push-center > .push-header > button,
    #kdScreener > :is(.ksc-header, .ksx-head, .ksc-result-head, .ks-head, .ksx-editor-title) button
  ) {
    box-sizing: border-box !important;
    width: var(--ui4-chrome-action-size) !important;
    min-width: var(--ui4-chrome-action-size) !important;
    height: var(--ui4-chrome-action-size) !important;
    min-height: var(--ui4-chrome-action-size) !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation;
  }

  body.ui4-app :is(
    .ui4-header :is(.ui4-hdr-icon, .ui4-header-back, .event-calendar-launch, .ui4-alert-launch),
    .ui4-shared-header :is(button, [role="button"]),
    [data-pencil-name="顶部栏 / 我的"] .kdt-mode button,
    .funds-page:not(.fund-popup) > .fund-head > button,
    .push-center > .push-header > button,
    #kdScreener > :is(.ksc-header, .ksx-head, .ksc-result-head, .ks-head, .ksx-editor-title) button
  ) svg {
    width: var(--ui4-chrome-action-icon) !important;
    height: var(--ui4-chrome-action-icon) !important;
    flex-shrink: 0 !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  /* Text actions retain enough width for their labels beside the shared icon. */
  body.ui4-app #kdScreener > :is(.ks-head, .ksx-editor-title) :is(.ksx-chart-send, .ksx-text) {
    width: auto !important;
    padding-inline: 8px !important;
  }
  body.ui4-app #kdScreener > .ksx-editor-title > h1 { flex: 1; }
  body.ui4-app #kdScreener > .ksc-result-head > div { min-width: 0; }
  body.ui4-app #kdScreener > .ksc-result-head p {
    margin: 0;
    line-height: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.ui4-app #kdScreener > .ks-head .ks-chart-identity { min-width: 0; }
}