/* 奕链 YiLink · 响应式重构层（第 4 层样式，最后加载）
   ===========================================================================
   为什么又加一层，而不是改 app.css：
   样式加载顺序是 app.css → instrument.css → yilink-v1-datasheet.css，
   后加载者覆盖前者（三层里都有同 `:root` 令牌重映射）。窄屏修复若落在
   app.css 里，会被后两层原封不动地盖掉；落在中间层同样会被最后一层盖掉。
   所以窄屏规则必须落在「最上层」—— 新增本文件，排在 datasheet 之后。

   职责边界（刻意收窄，避免与前三层互相打架）：
     1. 尺度流体化：窄屏下重设 --gutter / --shell，让内容区不吃边缘；
     2. 溢出收口：把「内容比容器宽」的容器改成能纵向重排或能安全横滑；
     3. 表格系统：≤600px 把数据表降级为「每行一张卡」（配合 responsive.js
        从 thead 抄列名写进 td[data-label]，见该文件头注释）；
     4. 触控与安全区：hover 隔离、≥44×44 命中区、100dvh、env(safe-area-inset-*)。
   不改 DOM 契约、不改 app.js 既有选择器，回滚 = 删掉 index.html 里那行 link。

   本文件只写「窄屏/触控」差异；桌面（>900px）一律不写规则，
   以此保证浅色与深色两套主题在桌面上与改造前逐像素一致。 */

/* ── 基座：窄屏边缘间距 ──────────────────────────────────────────────
   app.css 的 --gutter 是 24px（O-17：顶栏与内容区共用同一容器宽度）。
   900px 以下 O-02 已把 .viewbar 内边距改成 8px 16px，这里让内容区的
   --gutter 与之一致，避免「顶栏 16 / 内容 24」两套边距对不齐。 */
@media (max-width: 900px) {
  :root { --gutter: 16px; }

  /* flex 子项的默认 min-width 是 auto：一旦内部有宽表格/长串，
     子项就不肯收缩，整页被顶出横向滚动条。归零后由内部规则决定谁横滑。 */
  .app, .main { min-width: 0; }

  /* 601~900px：多列表格只能靠横滑看清。滚动必须落在容器上 ——
     table 是 display:table，overflow 在其上不生效（前三层的 overflow:hidden
     就是因此只裁不滚）；把它改成 display:block 又能让 thead/tbody 各自
     生成匿名表、列宽对不齐。所以由 responsive.js 套一层真块级容器。 */
  .yl-tablewrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 600px) {
  :root { --gutter: 14px; }

  /* ── P2：表格 → 卡片 ────────────────────────────────────────────────
     列名由 responsive.js 从 thead 抄进 td[data-label]；这里把每行渲染成一张卡，
     每格左边是字段名。没拿到完整列名的表不会被标 .yl-cards，保持在上面
     601~900px 那条规则里横滑 —— 宁可能滚，也不给半张废卡。 */
  .yl-tablewrap { overflow: visible; }

  table.yl-cards {
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    /* 前三层给 table 写了 overflow:hidden（为了裁圆角）；卡片模式下它会把
       超宽内容直接裁掉，必须放开。 */
    overflow: visible;
  }
  table.yl-cards colgroup, table.yl-cards thead { display: none; }
  table.yl-cards caption { display: block; }   /* .sr-only 仍让它不可见，仅保留给读屏 */
  table.yl-cards tbody { display: block; }

  table.yl-cards tr {
    display: block;
    margin: 0 0 12px;
    padding: 4px 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  table.yl-cards tr:last-child { margin-bottom: 0; }

  table.yl-cards td {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 9px 0;
    border: 0;
    font-size: 13.5px;
    /* IP / URL / 长串在 366px 下必须能断，否则又会把卡顶宽 */
    overflow-wrap: anywhere;
  }
  table.yl-cards td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
  }

  /* 占位 / 空态 / 分组标题行：通栏，不做字段对齐 */
  table.yl-cards tr.yl-row-span td {
    display: block;
    padding: 10px 0;
  }
  table.yl-cards tr.yl-row-span td::before { content: none; }

  /* 卡片自己就是一行，行内不需要再叠 hover 底色（触屏会粘住） */
  table.yl-cards tr:hover td { background: transparent; }

  /* ── P3：长串收口 ────────────────────────────────────────────────────
     .doc-body 的正文里有 <code>/proc/cpuinfo</code> 这类不可断行的路径串：
     366px 下 LI 内容宽 489px 撑破 312px 的框，把整个文档顶出 161px 横向滚动
     （实测注入本规则后 docOver 161 → 0）。默认的换行策略不会在 / 处断开，
     anywhere 让这种「确实放不进一行」的串才断，普通文案排版不变。 */
  .doc-body li { overflow-wrap: anywhere; }

  /* ── P3/P4：宽轨道纵向化 ────────────────────────────────────────────
     app.css 里这几处刻意做了「固定列宽的横滑轨道」（min-width:760px 的架构流、
     8 列 minmax(118px,1fr) 的两条步骤轨、横向光学时间线、120px 双列时间轴）。
     在 366px 上它们只能靠横滑看全，且内部元素会顶破容器；窄屏下改为纵向排布，
     信息顺序不变、无需横向滑动。
     唯一保留横滑的是 pre（代码块）—— 代码换行会改变语义。 */

  /* 架构总览：.flow 固定 760px 宽 + 居中，窄屏改为自上而下的链路 */
  .flow {
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .flow .node { width: 100%; text-align: center; }

  /* AIDC / 学习档案：8 列步骤轨 → 单列纵向步骤 */
  .aidc-track, .vx-track {
    grid-template-columns: 1fr;
    overflow-x: visible;
  }
  .aidc-step, .vx-step {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .aidc-step:last-child, .vx-step:last-child { border-bottom: 0; }
  /* 步骤详情原来是左右分栏，窄屏同样纵向 */
  .vx-detail { grid-template-columns: 1fr; }
  .vx-detail > div + div {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  /* 光链路时间线：横向节点链 → 纵向，连线改为竖线；.fine 变体一并覆盖 */
  .opt-timeline, .opt-timeline.fine {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    overflow-x: visible;
  }
  .opt-timeline .opt-tl-step, .opt-timeline.fine .opt-tl-step {
    flex-direction: row;
    align-items: center;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }
  .opt-timeline .opt-tl-line, .opt-timeline.fine .opt-tl-line {
    flex: 0 0 auto;
    width: 2px;
    height: 14px;
    min-width: 0;
    margin-left: 12px;
  }

  /* 实施路线：日期标签 120px 固定列在窄屏太窄，改为标签在上、正文在下 */
  .tl-item {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 14px;
  }

  /* ── P5：触控命中区 ──────────────────────────────────────────────────
     实测（Mate 90 Pro / 366×743 CSS px）：38 个可点击元素里 32 个不足 44px，
     最小的是顶栏图标按钮 34×34、侧栏分组标题 246×31。
     Apple HIG 与 Material 的最小可点尺寸都是 44×44；这里只抬 min-height /
     min-width，不动 padding 与字号 —— 命中区变大、视觉尺寸基本不变。
     只作用于 ≤600px（手机档），601px 以上与桌面不受影响。 */
  button, summary, a.skip-link { min-height: 44px; }
  .nav-toggle, .link-copy-btn, .theme-btn { min-width: 44px; }

  /* 侧栏链接：instrument.css 里
       .side-nav .ws[data-ws="tools"] .side-link           { min-height: 40px } → 实测 43px
       .side-nav .ws[data-ws="portfolio"|"lab"] .side-link { min-height: 32px } → 实测 33px
     专指度都是 (0,4,0)，高于 `a.side-link` (0,1,1)，所以必须用「同级或更高」
     专指度才能盖过（本层最后加载，同专指度即胜出）。
     注意：**不能**给 a.side-link 加 display:inline-flex —— app.css 里它是
     display:flex（撑满侧栏宽度），一改成 inline-flex 就退化为 shrink-to-fit，
     实测被压成 68px 宽（P5 首轮验证踩到的回归）。命中区只靠 min-height 抬高。 */
  .sidebar .side-nav .ws[data-ws] .side-link { min-height: 44px; display: flex; }

  /* 行内文本锚点（页脚「服务协议/隐私政策」、须知弹窗里的链接、pcap 表里的
     「下载 pcap」，实测 50×15 / 210×22）：它们嵌在行内，直接给 min-height
     无效（min-height 对 display:inline 不生效），而 block 化会顶开行高。
     改用垂直 padding —— inline 元素的上下 padding 不参与行盒计算，只把可点
     区域撑大，排版与行高完全不变。 */
  footer a[href]:not([class]),
  .diag-result a[href]:not([class]),
  .doc-body a[href]:not([class]),
  table.yl-cards td a[href] {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

/* ── P5：字体缩放 / 视口高度 / 安全区（≤900px，桌面不写规则）───────────
   1. text-size-adjust：ArkWeb 与移动端浏览器默认会做「文本自动放大」，
      关闭后窄屏字号与设计稿一致（桌面无此行为，写了也不会变）。
   2. dvh：移动端 100vh 取的是「最大视口」，系统栏收放时会跳动并可能裁掉
      底部内容；dvh 取「当前动态视口」，104 内核与 ArkWeb 6.0 实测均已支持
      （CSS.supports('height','100dvh') === true）。
   3. 安全区：ArkWeb 6.0 实测**不上报** env(safe-area-inset-*)（恒为 0px，
      见下），所以这几条只是「有则用、无则退化为原值」的兜底；本机 webview
      本身已被系统让到状态栏之下（截图 + topbarTop=0 实测），无需壳侧补偿。
      不加 viewport-fit=cover：实测在本平台是空操作（视口 366×743、inset 全 0
      加不加完全一样），而一旦平台日后真按 cover 语义实现，就会把内容顶进
      状态栏 —— 那正是本次要修的「内容被系统栏遮挡」，所以不加。 */
@media (max-width: 900px) {
  :root { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  .app, .main { min-height: 100dvh; }
  .modal { max-height: calc(100dvh - 40px); }
  .modal.cmdk { max-height: min(540px, calc(100dvh - 48px)); }

  .viewbar {
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
  }
  .sidebar {
    padding-top: calc(18px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(14px + env(safe-area-inset-left, 0px));
  }
  #toast-box {
    top: calc(74px + env(safe-area-inset-top, 0px));
    right: calc(18px + env(safe-area-inset-right, 0px));
  }

  /* 顶栏右侧控件簇：app.css 给了 `flex: none`（不参与收缩），而 P5 把
     .theme-btn / .link-copy-btn / .nav-toggle 抬到 44px 后，这一簇的自然宽度
     超出可用宽度、又不肯收缩 —— 实测把文档撑宽 17px（右侧丢出视口 383 > 366）。
     允许它收缩并给出 min-width:0 的下限，令其压缩而不是外溢。
     （601~900px 单行实测够用：左侧 83 + 8 + 右侧 348 = 439 ≤ 569 可用，
       所以「收缩」只是兜底；366px 的真正解法见文件末尾的 ≤600 双行块。） */
  .viewbar-right { flex: 0 1 auto; min-width: 0; }
}

/* ── P5：366px 顶栏改双行（用户决策：保留全部控件，且标题可读）────────────
   为什么必须动结构：右侧 5 个控件自然宽 348px（44/44/44 + 两个账户 slot），
   加上左侧「菜单键 44 + 间隙 10 + 标题 29」= 83px 与顶栏间隙 8px，
   单行需要 439px，而 366px 视口只有 334px 可用（366 − 两侧 16px 内边距）。
   app.css 在 ≤900px 用 `flex-wrap: nowrap` 强行压成一行，代价是标题被省略号
   截到只剩 ~12px 宽、账户按钮的中文被压到折行（实测 .acc-btn 56×66）——
   这两项正是「手机上点开很不对」的直接来源（原文见 app.css L2074-2076）。

   本层在 ≤600px 改回换行：第一行「菜单键 + 完整标题」，第二行右对齐控件簇。
   控件一个不删、标签完整、命中区仍全部 ≥44px；代价是顶栏高度 56 → 约 112px。
   601px 以上不换行（单行 439 ≤ 569 可用），所以只作用于手机档。 */
@media (max-width: 600px) {
  .viewbar { flex-wrap: wrap; }
  .viewbar-right { margin-left: auto; gap: 6px; }

  /* slot 与两个账户按钮放开 min-width，让第二行收进 334px；
     中文标签必须 nowrap + ellipsis —— CJK 可任意断行，不设就会竖排折行
     （上一条注释里 56×66 的成因），这正是「手机端看着不对」的第一现场。 */
  .account-slot, .user-slot { min-width: 0; }
  .acc-btn > span:nth-child(2),
  .user-btn > span:nth-child(2) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 顶栏变两行后固定高度翻倍：toast 若仍停在 74px 会压在第二行控件上 */
  #toast-box { top: calc(120px + env(safe-area-inset-top, 0px)); }
}

/* ── P6：壳内直达控制台（App 首屏跳过营销门户）─────────────────────────
   `yl-shell` 类由 harmony/web/yl-bridge.js 在 <head> 加载期加到 <html> 上；
   该桥接脚本只存在于 App 的 rawfile 副本里，网页版没有它，所以这条规则
   对线上站点是空操作 —— 网页版门户照旧。
   门户被隐藏后门户高度归零，portal.js 的 sync() 便自然得出 portal-active
   为 false（0 < 0*0.7 不成立），侧栏与整页滚动位置都回到控制台起点。
   注意这里不用 !important：门户自身在 app.css 里没有更高的 display 声明，
   本层又最后加载，普通规则即可胜出。 */
html.yl-shell #portal { display: none; }

/* ── P10：平板横屏收口（901–1200px）────────────────────────────────
   P8 复测：该档 #tab-arch 溢出 +25px、#tab-dclearn +149px。根因是侧栏
   固定 236px 与内容区固定最小宽（.flow 760px、.vx-track/.aidc-track
   8×118px=944px）在 ~1100px 视口无法共存，.main/.content 默认
   min-width:auto 不肯收缩，内部 overflow-x:auto 随之失效。
   仅本区间放行收缩；>1200px 无规则命中，≤900px 仍走前面既有窄屏规则。 */
@media (min-width: 901px) and (max-width: 1200px) {
  :root { --gutter: 20px; }

  .main, .content { min-width: 0; }
  .flow { min-width: 0; }

  /* 两条步骤轨在 ≥901px 保持横向网格，列宽下限 118 → 100px，
     8 列在 1100px 视口内放得下，不再顶破面板 */
  .vx-track, .aidc-track { grid-template-columns: repeat(8, minmax(100px, 1fr)); }

  .live-card, .diag-card { min-width: 0; }
  .live-row span:last-child { min-width: 0; overflow-wrap: anywhere; text-align: right; }
}