/*
 * 移动端与平板布局
 *
 * 这里仅处理窄屏下的布局覆盖，基础视觉样式由 base/themes/layout/components 等文件负责。
 * 断点按可用布局空间划分，而不是绑定具体设备型号。
 */

/* 平板横屏与窄桌面：保留侧栏，环境区换到下一行 */
@media (max-width: 1200px) {
  .app-shell {
    width: min(100% - 48px, 1080px);
    padding-inline: max(0px, env(safe-area-inset-left)) max(0px, env(safe-area-inset-right));
  }

  .workspace {
    grid-template-columns: minmax(160px, .75fr) minmax(0, 1.8fr);
    gap: 36px;
  }

  .environment-panel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 28px;
    align-items: center;
    padding-top: 18px;
  }

  .panel-label {
    grid-column: 1 / -1;
  }

  .environment-note,
  .quick-settings {
    margin-top: 0;
  }

  .timer-stage {
    min-width: 0;
    padding-inline: 12px;
  }
}

/* 平板竖屏：主内容改为纵向流 */
@media (max-width: 900px) {
  .app-shell {
    width: min(100% - 40px, 680px);
  }

  .workspace {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .side-rail {
    align-self: auto;
  }

  .rail-divider,
  .rail-nav,
  .session-count,
  .rail-caption {
    display: none;
  }

  .timer-stage {
    order: 1;
    width: 100%;
    padding: 0;
  }

  .environment-panel {
    display: grid;
    order: 2;
    width: 100%;
    padding: 0;
  }
}

/* 手机：压缩纵向间距，确保计时器拥有完整可用宽度 */
@media (max-width: 640px) {
  .app-shell {
    width: min(100% - 32px, 520px);
    min-height: auto;
    padding-top: 24px;
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }

  .app-header {
    margin-bottom: 40px;
  }

  .brand {
    font-size: 1.1rem;
  }

  .brand-mark svg {
    width: 21px;
    height: 21px;
  }

  .header-actions {
    gap: 6px;
  }

  .header-actions .icon-button {
    padding: 8px 10px;
  }

  .header-actions .mobile-todo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .header-actions .icon-button:nth-child(3) {
    display: none;
  }

  .workspace {
    gap: 40px;
  }

  .side-rail h1 {
    max-width: none;
    font-size: 2.6rem;
  }

  .subtitle {
    max-width: none;
  }

  .mode-tabs {
    gap: 8px;
    margin-bottom: 24px;
  }

  .mode-tab {
    padding: 9px 14px;
  }

  .simple-do-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .simple-do-quadrant {
    min-height: 360px;
    height: clamp(360px, 58vh, 440px);
  }

  .simple-do-list {
    margin-block: 14px;
  }

  .progress-track {
    width: min(100%, 420px);
  }

  .task-line {
    width: min(100%, 420px);
  }

  .primary-actions {
    gap: 8px;
  }

  .button {
    min-width: 0;
    padding: 12px 14px;
  }

  .environment-panel {
    display: block;
  }

  .sound-control,
  .zen-control {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .wallpaper-options {
    gap: 6px;
  }

  .settings-grid {
    grid-template-columns: 1fr 1fr;
  }

  .panel {
    max-width: 100%;
    margin-top: 28px;
  }
}

/* 小屏手机：避免设置项与秒表在窄屏中互相挤压 */
@media (max-width: 400px) {
  .app-shell {
    width: min(100% - 24px, 360px);
  }

  .header-actions .icon-button {
    padding-inline: 8px;
  }

  .side-rail h1 {
    font-size: 2.35rem;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }
}