/* ============================================================================
   WEB 外壳样式（桌面浏览器 ≥1280px）—— 三端差异只允许出现在这里。
   规则来源：PRD-0004 §13.1.3「外壳层允许做的事」第 2 类（布局容器与断点样式；只新增、
   不改业务层选择器语义）。本文件只做一件事：**把 ≥1280px 的列宽与局内中景改掉**，
   让内容不再「挤在中间一条」（B5 的落点），并且不把局内屏改坏。

   选择器纪律：只用**结构面**（元素类型 / 既有业务类名），**不出现任何业务 id**
   （含 SPC-0005 §7 冻结的 31 条，以及 `app/index.html` 里存在但未被冻结的 id）。
   本文件里没有任何 `#...` 选择器。

   px 字面量清单（逐条理由；A15② 要求「布局断点必须可查」，全文清单见 SPC-0005 追加节）：
     · 1280px  —— 媒体查询断点（本外壳唯一的断点）。取 1280 的理由：它是人类口径
                  「宽屏 ≥1280」的逐字下界（runtime/orders/company-run-05.md 验收线 3）。
     · 75px    —— calc(68.75% - 75px) 里的常数项，让列宽「随视口增长但慢于视口」
                  （斜率 0.6875 < 1 ⇒ 占比单调不降，B5-b 的主判据）。
     · 880px   —— 局内中景盘的最大直径 = 44vw 在 2000px 视口处的取值；即 ≥2000px 视口
                  不再继续放大（见下方 ②，避免超宽屏上中景盖过前景交互层）。
   非 px 尺度（60% / 68.75% / 44vw / 72vh / min() / max()）按 PRD §3.4 不属 4px 网格判定范围。
   ============================================================================ */

@media (min-width: 1280px) {
  /* ① 主容器列宽（B5-a / B5-b 的落点）：取代业务层 `.start-inner { max-width: 40em }`
        （= 640px，在 1280 下只占 50%）的固定列宽。取值由两条约束夹逼：
          下限 —— 必须明显宽于现状 50%，故取 60% 作地板（0.60 × 1280 = 768px）；
          上界 —— 正文行宽不随屏幕无限拉长（可读性），故用「68.75% 减 75px」增长，
                  即视口越宽列宽越大、但增速慢于视口 ⇒ 占比在 1280/1440/1920 上非降。 */
  .start-inner { max-width: max(60%, calc(68.75% - 75px)); }

  /* ② 局内中景盘（B5-d「局内不退化」的落点）：
        业务层是 `.dial { width: min(78vw, 360px) }` —— 封顶恒为 360px ⇒ 视口越宽占比越低
        （1280 下 0.2813、1920 下 0.1875）。这里把封顶改成随视口增长，并在两处封顶：
          · 880px —— 44vw 在 2000px 视口处的值（超宽屏不再放大）；
          · 72vh  —— 短视口下防止中景被局内舞台（`overflow: hidden`）上下裁切。
        宽高写同一个表达式 ⇒ 中景盘保持**正方形**（同心环 / 刻度盘是圆，不是椭圆）。

        ⚠️ 本规则**同时修掉一处既有缺陷**：本文件旧版给 `.dial` 加过
        `max-height: 40%`，而局内舞台在 1280×800 下高 796px ⇒ 40% = 318.4px < 360px，
        中景盘被压成 **360×318.4 的椭圆**（实测，见 REPORT.md 的 before/after 读数）。
        旧版还有一条给业务层主容器（`<main>`，**外壳不许写它的 id 选择器**）设
        `min-height: 100%` 的规则：它把该容器撑到 800px、底边落到 865px（视口只有 800px），
        令**局内屏底部（节拍条）被切掉 65px** —— 该规则已整条删除，业务层自己的
        `min-height: 0` 原语义因此恢复（读数：容器盒 65→800，body 滚动高 800）。

        说明（不许读成「全模式达标」）：`data-mode="tempo"` 下业务层有一条特异性更高的
        `min(86vw, 400px)` 覆盖，外壳在不写 `!important`、不写业务 id 的前提下压不住它
        ⇒ tempo 档的中景占比在 1280 下仍是 0.3125（未达 B5-d 的 0.40）。
        这属「必须改 app/ 才能闭合」的项，已写进 REPORT.md 的依赖/升级清单。 */
  .dial { width: min(44vw, 880px, 72vh); height: min(44vw, 880px, 72vh); }

  /* ③ 宽屏上的纵向节奏与密度：主容器从 flex 换成一列 grid 只为拿到 `row-gap`，
        让阅读节奏与窄档区分开（DOM 顺序、焦点顺序一概不动 ⇒ B6④ 的首达次数不受影响）。 */
  .start-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    row-gap: var(--space-16);
  }
  .mode-card { padding: var(--space-16) var(--space-24); }
  .mode-card .mode-rule { font-size: var(--font-size-md); }

  /* ④ 「添加到主屏幕」三块文案在宽屏上并排（旧版写的是单列 grid —— 与不写等价，
        白白占了 1280px 宽屏的纵向空间）。块内文案、显隐条件、DOM 一概不动。 */
  .a2hs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-16);
    align-items: start;
  }
}