/* qdoor-mobile-trend-layout-v7: preserve compact single-line labels; wrap only genuinely long period or room names. */
@media (max-width: 640px) {
  /* Summary cards use the viewport efficiently. Short room names stay on one line. */
  #root .qdoor-room-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(5.3rem, 1fr)) !important;
    gap: 0.42rem !important;
  }

  #root .qdoor-room-summary-grid > div {
    min-height: 3.35rem !important;
    padding: 0.46rem 0.32rem !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #root .qdoor-room-summary-grid > div > div:first-child {
    width: 100%;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    line-height: 1.25 !important;
    font-size: 0.67rem !important;
  }

  #root .qdoor-room-summary-grid > div.qdoor-long-room-card {
    min-height: 3.85rem !important;
  }

  #root .qdoor-room-summary-grid > div.qdoor-long-room-card > div:first-child {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.28 !important;
  }

  /* The overall trend table remains fitted to the screen and never becomes swipeable. */
  #root .qdoor-mobile-trend-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: auto;
    -webkit-overflow-scrolling: auto;
    border-radius: 0.35rem;
  }

  #root table.qdoor-mobile-trend-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0;
  }

  #root table.qdoor-mobile-trend-table th,
  #root table.qdoor-mobile-trend-table td {
    min-width: 0 !important;
    max-width: none !important;
    padding: 0.3rem 0.08rem !important;
    overflow: hidden;
  }

  /* Standard period numbers are kept on a single line. Only explicitly long period cells wrap. */
  #root table.qdoor-mobile-trend-table.qdoor-issue-number-wrap th:first-child,
  #root table.qdoor-mobile-trend-table.qdoor-issue-number-wrap td:first-child {
    position: static !important;
    width: 3.15rem !important;
    min-width: 3.15rem !important;
    max-width: 3.15rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    line-height: 1.28 !important;
    font-variant-numeric: tabular-nums;
    box-shadow: none !important;
  }

  #root table.qdoor-mobile-trend-table.qdoor-issue-number-wrap th:first-child.qdoor-long-period,
  #root table.qdoor-mobile-trend-table.qdoor-issue-number-wrap td:first-child.qdoor-long-period {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
  }

  /* Short room headers retain their native one-line names; long names are selectively wrapped. */
  #root table.qdoor-mobile-trend-table th:not(:first-child):not(:last-child) {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    line-height: 1.28 !important;
    font-size: 0.6rem !important;
  }

  #root table.qdoor-mobile-trend-table th.qdoor-long-room-name:not(:first-child):not(:last-child) {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    font-size: 0.58rem !important;
  }

  /* The prediction result remains the only horizontally scrollable field. */
  #root table.qdoor-mobile-trend-table th:last-child,
  #root table.qdoor-mobile-trend-table td:last-child {
    width: 4.5rem !important;
    min-width: 4.5rem !important;
    max-width: 4.5rem !important;
    text-align: center !important;
    vertical-align: middle !important;
  }

  #root table.qdoor-mobile-trend-table td:last-child div {
    width: 100% !important;
    max-width: 4.25rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin;
    text-align: center !important;
  }

  #root table.qdoor-mobile-trend-table td:last-child span {
    display: block !important;
    width: max-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  #root .qdoor-mobile-trend-scroll::after {
    content: "预测结果栏可左右滑动查看完整名称";
    display: block;
    margin: 0.35rem 0.15rem 0.1rem;
    color: #6b7280;
    font-size: 0.56rem;
    line-height: 1.2;
    text-align: right;
  }
}