/* Phone layout (2026-10-20, Pin: wrapped labels and a cramped top bar).
   Loaded last; everything that changes layout applies at 640px and below,
   so tablets and desktops keep their current design. */

/* Bottom-bar icons and short labels exist only on phones. */
.main-nav .nav-icon,
.main-nav .nav-short { display: none; }

@media (max-width: 640px) {
  /* The old top bar is gone: settings live behind the 设置 tab (workspace-shell.css). */

  /* Pages: a little more air between sections, nothing smaller. */
  .view { padding: 24px 18px 36px; }
  .page-heading { gap: 16px; margin-bottom: 22px; }
  .page-heading h1 { line-height: 1.2; }
  .page-heading p { line-height: 1.6; }
  .page-heading .button { min-height: 46px; padding: 0 20px; white-space: nowrap; }

  /* Work report modes: tabs size to their text and never wrap. */
  .analysis-mode { display: flex; }
  .analysis-mode button { flex: 1 1 auto; padding: 10px 8px; font-size: 14px; white-space: nowrap; }

  /* Bottom bar: icon over a short label, one line each, 14px text. */
  .sidebar {
    inset: auto 10px calc(10px + env(safe-area-inset-bottom, 0px));
    height: auto;
    padding: 6px;
    border-radius: 22px;
  }
  .main-nav {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-auto-flow: column;
    gap: 2px;
    margin: 0;
  }
  .main-nav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 58px;
    padding: 7px 2px 6px;
    border-radius: 16px;
  }
  .main-nav .nav-index,
  .main-nav small,
  .main-nav .nav-full { display: none; }
  .main-nav .nav-icon {
    display: block;
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .main-nav button > span { display: block; min-width: 0; }
  .main-nav b {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.1;
    white-space: nowrap;
  }
  .main-nav .nav-short { display: inline; }
  /* English words are wider than two Chinese characters. */
  html[data-language="en"] .main-nav b { font-size: 12.5px; font-weight: 600; }
  .main-nav .nav-count { min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
  .main-stage { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* Narrow phones (iPhone SE / mini): keep the same sizes, slightly tighter. */
@media (max-width: 360px) {
  .topbar { padding-left: 14px; padding-right: 14px; }
  .view { padding-left: 14px; padding-right: 14px; }
  .main-nav button { padding-left: 0; padding-right: 0; }
}