/* 名字组合：笔记本宽度与短屏适配。
 * 仅处理名字组合工作台，不改变其他页面、业务数据或起名规则。
 */

@media (min-width: 1101px) {
  /* 当前姓名池提示与名字页面同时存在时，名字页面只能占用剩余高度。 */
  .project-context-content:not(.has-delivery-return):has(> .name-pool-identity + .names-screen:not(.strict-names-top-layout)) {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
  }

  .project-context-content:not(.has-delivery-return):has(> .name-pool-identity + .names-screen:not(.strict-names-top-layout)) > .name-pool-identity {
    margin-bottom: 0;
  }

  .project-context-content:not(.has-delivery-return):has(> .name-pool-identity + .names-screen:not(.strict-names-top-layout)) > .names-screen:not(.strict-names-top-layout) {
    height: auto;
  }

  /* 允许常规结果面板真正收缩，避免内容撑出面板后被截断。 */
  .names-screen .names-result-panel:not(.strict-names-result-panel),
  .names-screen .names-result-panel:not(.strict-names-result-panel) > * {
    min-width: 0;
  }

  .names-screen .names-result-panel:not(.strict-names-result-panel) .screen-list-area {
    height: auto;
    min-height: 0;
    overflow: auto;
  }
}

/* 一千二百至一千四百左右的常见笔记本保持双栏，但把空间优先让给结果区。 */
@media (min-width: 1101px) and (max-width: 1400px) {
  .names-screen:not(.strict-names-top-layout) .names-workbench {
    grid-template-columns: minmax(340px, 38%) minmax(0, 1fr);
  }

  .names-screen:not(.strict-names-top-layout) .name-combination-mode {
    flex-wrap: wrap;
  }

  .names-screen .names-result-panel:not(.strict-names-result-panel) .name-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    max-width: none;
  }

  .names-screen .names-result-panel .name-columns:not(.strict-name-columns) {
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  }
}

/* 浏览器工具栏会进一步压缩老款笔记本的可视高度。
 * 短屏不再强行截断工作台，改由主区域滚动，并给工作台保留可操作高度。
 */
@media (min-width: 1101px) and (max-height: 760px) {
  .main.screen-main.with-project-context:has(.names-screen:not(.strict-names-top-layout)) {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .main.screen-main.with-project-context:has(.names-screen:not(.strict-names-top-layout)) .project-context-content:has(> .name-pool-identity + .names-screen:not(.strict-names-top-layout)) {
    flex: 0 0 640px;
    min-height: 640px;
    overflow: visible;
  }
}