/* ==========================================================================
   墨竹印象 · 移动端适配（手机/窄屏）

   目标（2026-10-12，用户手机实测反馈"界面还是太大、太单一"）：
     ① 收紧字号与间距令牌 —— 手机上桌面那档尺寸读起来像"放大模式"；
     ② 卡片网格缩到 104~112px —— 390px 下专辑/音乐人卡 3 列，不再一张卡占满屏；
     ③ 顶栏紧凑：搜索框保住宽度，不常用的按钮让位；
     ④ 歌曲行工具键触屏常显（hover 在手机上不存在）；
     ⑤ 滚动适配：内容随滚动深度轻微收拢，长列表读起来不压。

   为什么单独一个文件而不是改 app.css：
     桌面版式已经过多轮调试（注释里全是踩坑记录），移动端覆盖放最后一层，
     只动手机上要变的东西，桌面像素级不变。
   ========================================================================== */

@media (max-width: 820px) {

  /* ── ① 令牌收紧：桌面 2026-10-10 抬过一档（当时是 2560px 宽屏），
        手机视口只有它的 1/7，同档字号必然显大。回到阶梯的下一档。 ── */
  :root {
    --fs-micro: 11px;
    --fs-tiny: 12px;
    --fs-small: 13.5px;
    --fs-body: 14.5px;
    --fs-lead: 16px;
    --fs-title: 19px;
    --fs-h3: 21px;
    --fs-h2: 25px;
    --fs-h1: 32px;
    --fs-hero: clamp(28px, 7.2vw, 38px);
    --fs-display: clamp(24px, 6.4vw, 34px);

    --sp-1: 4px;
    --sp-2: 7px;
    --sp-3: 11px;
    --sp-4: 14px;
    --sp-5: 20px;
    --sp-6: 26px;
    --sp-7: 38px;
    --sp-8: 56px;

    --radius-l: 13px;
    --radius-xl: 17px;
  }

  /* ── ② 顶栏紧凑：390px 要同时放下 [返回][搜索框][音质][菜单]。
        「重新扫描」在静态部署版是空操作（没有本地服务可扫），手机上隐藏；
        音质筛选缩成窄胶囊；搜索框保住最小可读宽度。 ── */
  .topbar {
    gap: var(--sp-2);
    /* 刘海屏关键修复：viewport-fit=cover 让页面伸进刘海/灵动岛区域，
       顶栏原来没有 top 安全区 —— 搜索框被状态栏压住，点不动。
       （.rail 和 .stage__top 早就补了 safe-area-inset-top，唯独漏了顶栏。） */
    padding: max(env(safe-area-inset-top), var(--sp-2)) var(--sp-3) var(--sp-2);
  }
  .topbar__nav { display: none; }              /* 返回：用手势/路由回退，窄屏让位给搜索框 */
  /* 内容整体下移一点：结果页不再贴着搜索框，第一行不被顶栏透明渐变区蹭到 */
  .view { padding-top: var(--sp-2); }
  .search {
    flex: 1 1 auto;
    min-width: 150px;                          /* 实测 47px 的根因：flex 被工具列挤没 */
    padding: 7px var(--sp-2);
  }
  .search input { font-size: 13.5px; }
  .topbar__tools { gap: 4px; }
  #rescanBtn { display: none; }
  #qualityFilterBtn {
    padding: 6px 10px;
    font-size: 12px;
    max-width: 76px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rail-toggle { width: 34px; height: 34px; }

  /* ── ③ 卡片网格：390px 放 3 列（~104px/张），不再一张卡占满整屏。
        !important 必须带：app.css 里那条 `:has(> .card)` 覆盖就是 !important。 ── */
  .view :is(section, div, ul, ol):has(> .card) {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important;
    gap: 14px 12px !important;
  }
  .grid, .grid--shelf, .grid--artists {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 14px 12px;
  }
  .card { gap: 6px; }
  .card__art { border-radius: 9px; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.6); }
  .card__title { font-size: 12.5px; }
  .card__sub { font-size: 11px; }
  .card__play { width: 32px; height: 32px; right: 8px; bottom: 8px; }
  /* 触屏没有 hover：播放钮保持淡淡可见，不至于找不到入口 */
  .card__play { opacity: 0.9; transform: none; background: rgba(190, 50, 39, 0.92); }

  /* ── ④ 歌曲行：工具键触屏常显（喜欢/更多在 hover 下才出来 = 手机上点不到）。
        行距收紧，两行文字压一行的高度。 ── */
  .song {
    gap: var(--sp-2);
    padding: 8px var(--sp-2);
    grid-template-columns: 26px minmax(0, 1fr) 44px auto;
  }
  .song__thumb { width: 38px; height: 38px; border-radius: 6px; }
  .song__title { font-size: 14px; }
  .song__artist { font-size: 11.5px; }
  .song__time { font-size: 11px; }
  .song__tools { opacity: 1; gap: 0; }
  .song__tools .iconbtn { width: 30px; height: 30px; }
  /* 下载键本地曲目没有；在线曲目共三个键，30px×3 也放得下 */
  .song__idx { font-size: 11px; }
  .songgroup { padding: var(--sp-3) var(--sp-2) 6px; }
  .songgroup__name { font-size: 13px; }

  /* ── ⑤ 首屏 hero 紧凑：手机上它是"一页顶"而不是"一面墙" ── */
  .hero { margin-top: 0; border-radius: var(--radius-l); }
  .hero__left { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
  .hero__desc { font-size: 13px; max-width: 30ch; }
  .hero__stats { gap: var(--sp-4); flex-wrap: nowrap; }
  .stat__n { font-size: 17px; }
  .stat__l { font-size: 10px; letter-spacing: 0.12em; }
  .masthead { flex-wrap: wrap; row-gap: 4px; }

  /* ── ⑥ 分节标题与页头收紧 ── */
  .join { margin-top: var(--sp-4); }
  .join__title { font-size: 17px; }
  .join__sub { font-size: 11px; }
  .pagehead { padding-top: var(--sp-2); }

  /* ── ⑦ 搜索结果分类 tab：窄屏允许横向滑，不换行把内容顶下去 ── */
  .stabs {
    gap: 18px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .stabs::-webkit-scrollbar { display: none; }
  .stabs__item { font-size: 13.5px; padding: 6px 0 8px; flex: none; }

  /* ── ⑧ 滚动缩放：内容区向下滚动后，非内容主体（分节标题/页头）轻微收拢，
        把纵向空间让给列表本身。class 由 app.js 的滚动监听加在 #view 上。
        只用 transform，不改布局尺寸 —— 不会引起重排抖动。 ── */
  .view .join, .view .pagehead {
    transition: transform var(--dur-mid) var(--ease-settle), opacity var(--dur-mid);
    transform-origin: left top;
  }
  .view.is-scrolled .pagehead { transform: scale(0.94); opacity: 0.92; }
  .view.is-scrolled .join { transform: scale(0.96); }
  /* tab 条滚动后吸顶收拢，长列表翻页时分类入口一直在手边 */
  .view.is-scrolled .stabs {
    position: sticky;
    top: 0;
    z-index: 5;
    background: linear-gradient(180deg, var(--ink-0) 78%, transparent);
    padding-top: 4px;
  }
}

/* 极窄屏（≤360px，iPhone SE 一类）：再收半档 */
@media (max-width: 380px) {
  :root {
    --fs-small: 13px;
    --fs-body: 14px;
    --sp-3: 10px;
    --sp-4: 12px;
  }
  .view :is(section, div, ul, ol):has(> .card) {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important;
  }
  #qualityFilterBtn { max-width: 62px; }
}

/* 触屏专项（无论宽窄）：歌曲行的收藏/更多永远可见。
   桌面是 hover 显形；手机上没有 hover，默认 opacity:0 等于把功能藏了。 */
@media (pointer: coarse) {
  .song__tools { opacity: 1; }
  .card__veil { display: none; }  /* 没有悬停，这层渐变只会把封面压暗 */
}