/* ==========================================================================
   一脉出海 H5 · layout.css
   滚动骨架（十屏）/ 安全区 / 常驻层定位 / 8 列栅格
   —— 移动端地址栏收放会改视口高度：dvh 必须有 vh 兜底声明（先 vh 后 dvh）。
   ========================================================================== */

/* ---------- 全局符号画布（契约冻结点：viewBox / preserveAspectRatio 在 index.html）
   画布是 #scroller 的第一个子元素：天然随内容滚动，零 transform。
   高度由 line.js 按滚动内容高设定（不用 height:100% —— 滚动容器里百分比解析到的是「一屏」）。
   此处不给 height / inset，避免与其打架；z-index:0 保证画布在内容层之下。 ---------- */
#line-canvas{
  position:absolute;top:0;left:0;width:100%;
  pointer-events:none;z-index:0;overflow:visible;
}

/* ---------- 十屏滚动容器（契约冻结点：id=#scroller） ---------- */
#scroller{
  position:relative;z-index:var(--z-content);
  height:100vh; height:100dvh;
  overflow-y:auto;overflow-x:hidden;
  scroll-snap-type:y proximity;      /* 任务书指定 proximity（贴靠优先，不锁死） */
  overscroll-behavior:contain;
}

/* ---------- 单屏（契约冻结点：.screen / #sNN / data-screen） ---------- */
.screen{
  position:relative;
  height:100vh; height:100dvh;       /* 必须 dvh */
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex;flex-direction:column;gap:var(--gap-block);
  /* 安全边距：顶 ≥72pt、底 ≥68pt、左右 20pt；刘海设备取 max 后加安全区 */
  padding-top:max(var(--safe-top),calc(var(--sat) + var(--clear-chrome)));
  padding-bottom:max(var(--safe-bottom),calc(var(--sab) + var(--gap-col)));
  padding-left:calc(var(--pad-x) + var(--sal));
  padding-right:calc(var(--pad-x) + var(--w-ruler) + var(--sar));  /* 右侧为航线尺留位 */
  overflow:hidden;
}
.screen--center{justify-content:center}

/* ---------- 屏内三段：锚点区 / 说明区 / 常驻页脚（不出现第三区块） ---------- */
.screen-head{display:flex;flex-direction:column;gap:var(--gap-sm);flex:0 0 auto}
.screen-body{display:flex;flex-direction:column;gap:var(--gap-block);flex:1 1 auto;min-width:0;min-height:0}
.screen-body--tight{gap:var(--gap-md)}
.screen-foot{
  margin-top:auto;min-height:var(--h-foot);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--gap-col);min-width:0;flex:0 0 auto;
}
.foot-group{display:flex;align-items:center;gap:var(--gap-col);min-width:0}

/* ---------- 常驻层定位 ---------- */
#route-ruler{
  position:fixed;inset-inline-end:0;
  top:calc(var(--sat) + var(--gap-col));bottom:calc(var(--sab) + var(--gap-col));
  width:var(--w-ruler);z-index:var(--z-chrome);
  display:flex;flex-direction:column;align-items:center;
  pointer-events:none;               /* 纯读数，不拦截右缘的滚动/滑动 */
}
#view-switch{
  position:fixed;left:calc(var(--pad-x) + var(--sal));
  top:calc(var(--sat) + var(--off-chrome));
  z-index:var(--z-chrome);display:flex;gap:var(--gap-sm);
}
#audio-toggle{
  position:fixed;right:calc(var(--w-ruler) + var(--gap-col) + var(--sar));
  top:calc(var(--sat) + var(--off-chrome));
  z-index:var(--z-chrome);
}

/* ---------- 8 列栅格（列间 12pt，02 手册 · 四） ---------- */
.grid-8{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));column-gap:var(--gap-col)}
.span-2{grid-column:span 2}
.span-3{grid-column:span 3}
.span-4{grid-column:span 4}
.span-5{grid-column:span 5}
.span-6{grid-column:span 6}
.span-8{grid-column:span 8}

/* ==========================================================================
   刀 3.6 · 320 窄屏适配（矮屏档：视口高 ≤760pt —— 320×568 / 360×640 / 375×667 …）
   ⚠️ 本块必须放在文件末尾：同特异性的覆盖（如 .screen-foot 的 min-height）要赢过
      上面的基础规则，靠的是「后到者胜」—— 早先插在基础规则之前，min-height 被静默吃掉。
   ① 屏内容高于视口时，该屏随内容生长、吸附仍生效（原地基兵兜底，保留）
   ② 页脚吸附视口底：来源角标 [S▢] 与页码任何时刻都在视口内
      （赛事要求「素材须注明来源」—— 来源标注不能要额外滚动才看得到）
   ③ 密度压一档：块间距 24→12、卡内边距 20→14、L1 数字 88→44
      —— 三处均取约定内的档位（44 本就在字号阶梯 6 档里）；与 02 手册
         「区块间距 24pt 固定」的偏差依据、逐屏实测数字与未达标项，
         见刀 3.6 交付报告（本文件与 screens.css 的矮屏块即其全部落地）。
   ⚠️ overflow 必须从 hidden 换成 clip：overflow:hidden 会让 .screen 变成滚动容器，
      sticky 的参照系就成了它自己（它不滚）→ 吸附静默失效。clip 不建立滚动容器。 */
@media (max-height:760px){
  .screen{
    height:auto;min-height:100vh;min-height:100dvh;
    overflow:clip;
    /* 底部安全边距 68 → 40：与页脚实盒 24 → 52（下一条）相抵，净屏高不变
       —— 320 档有屏刚好一屏（s02），页脚实盒化不能让它反向变高；
       有 Home 指示条的环境（sab>0）仍按 sab+12 让位，不会贴边 */
    padding-bottom:max(40px,calc(var(--sab) + var(--gap-col)));
  }
  /* —— 页脚吸附（硬要求）—— */
  .screen-foot{
    position:sticky;bottom:0;z-index:var(--z-line);
    min-height:var(--h-touch);          /* 24 → 52 实盒 */
    background:var(--ink);              /* 不透明底：吸底时下方内容不透出 */
  }
  /* 刀 3.7：吸底条会把视口底部那行正文「齐刷刷切断」（320 档 s05 地图卡末行、s09
     概念原型行都是），看着像 bug。在上沿加 14px 的透明→墨蓝渐变罩，正文自然淡出。
     —— position:absolute 必须显式给：sticky 已建立包含块，也给 ::before 定位；
        若留在流内会被当 flex item 挤乱页脚三件套。
     —— pointer-events:none：遮罩不是热区（页脚本体 52 实盒的命中区不变）。 */
  .screen-foot::before{
    content:'';position:absolute;left:0;right:0;bottom:100%;height:14px;
    background:linear-gradient(to bottom, transparent, var(--ink));
    pointer-events:none;
  }
  /* 页脚实高 52 后，负边距补贴的「盒外命中区」失去意义：吸附态下盒外一截在视口之外，
     看着 52 实际只有 38 可点 —— 实盒化后整块 52 都在视口内，触控目标真达标 */
  .src-tag{margin-block:0}
  /* —— 密度压一档（只动允许档位：间距 / 内边距 / L1 字号）—— */
  :root{--gap-block:12px}
  /* ⚠️ --pad-card 不能写 :root —— screens.css 里它的 :root 定义晚于本文件加载，
     同特异性下后来者赢（静默失效）；改挂 body，用继承距离取胜（数据卡都在 body 内） */
  body{--pad-card:14px}
  .t-l1{font-size:var(--fs-5)}          /* L1 88 → 44（阶梯 6 档内降一档） */
}