/**
 * styles/goto.css — 「前往到」入口按钮 + 前往到弹窗的移动端适配
 *
 * ═══ 谁在用 ═══
 *   tv/ui/period-bar.js（#pb-goto-btn 入口按钮，2026-10-27 审计收拢后从
 *     ui/goto-button.js 并入 —— 槽位 #goto-time-slot 本来就是 period-bar 的 _render() 建的）
 *   tv/ui/goto-modal.js + tv/ui/goto-module.js（#goto-time-modal 弹窗）
 *
 * ═══ 为什么独立文件而不是并进 kp-main.css ═══
 *   kp-main.css 是「唯一源」→ 改完必须跑 build_kp_css_min.py 再 bump，
 *   多一道闸门；本文件是纯增量（只管 goto 自己的元素），自带 <link> 直出。
 *   ⚠️ 但注意：CDN 缓存键含 query（nginx proxy_cache_key "$scheme$host$request_uri"，
 *   实测随机 query 首次 MISS、二次 HIT）→ ?v= 换 hash 即可破缓存，能真上线。
 *
 * ═══ 三条约定（改之前先读）═══
 *   ① 全部类名以 `#pb-goto-btn` / `#goto-time-modal` 前缀限定，**不加全局选择器**。
 *      本文件不在 kp-main.css 里，不加限定就会渗到 K 线画布和自选面板。
 *   ② 颜色只用 kp-main.css :root 里已有的变量（--bg- / --border- / --text- 系列），
 *      品牌金 #ffc83d 用于强调。不要写新的主题色。
 *      ⚠️ 别在注释里写「星号紧跟斜杠」的变量通配（如 --bg- 加星号加斜杠连写）：
 *        它会**提前闭合**块注释，后面的内容被浏览器当 CSS 解析 → 整条规则静默失效。
 *        （2026-10-27 实测踩过：本文件头原来把 --bg- / --border- / --text- 三个
 *          变量通配连写 → 注释在第 17 行就断了 → 紧跟其后的
 *          `#pb-goto-btn .ico svg` 被污染成非法 selector → 浏览器整条丢弃
 *          → 图标尺寸声明失效，桌面端图标只有 12px。）
 *        契约测试 tests/firstscreen-contract.js 有一条专门盯这个。
 *   ③ 按钮外观复用 kp-main.css 的 .pb-entry + .pb-entry-filled（描边+浅底，
 *      与 周期 / 指标 / 对象树 同款），本文件**只写差量**，不复制颜色规则 ——
 *      两份一定会漂移，换主题色时只会改到其中一处。
 */

/* ═══ 入口按钮（#pb-goto-btn）═══
   ⚠️ 只写差量：描边 / 浅底 / hover / 尺寸全部走 kp-main.css 的 .pb-entry，
      这里只补「图标尺寸」—— 因为 .pb-entry .ico svg 只写了 display:block，
      没有 width/height，不给尺寸的话 SVG 会按 viewBox 默认尺寸撑开。
   ⚠️ #pb-goto-btn 是 ID 选择器(1,0,0)，会盖掉 .pb-entry 的同名属性：
      不要在这里重复 padding/font-size，除非确实要和 周期/指标 不同。 */
#pb-goto-btn .ico svg {
  width: 13px; height: 13px;
  /* ★ 2026-10-27 A2：stroke-width 2 → 1.6。
     CSS 声明会盖掉 SVG 上的 stroke-width 属性，所以「改图标源文件里的线宽」没用，必须改这里。
     原图标是 24 viewBox（2/24×13 ≈ 1.08px）；换成 16 viewBox 后 2/16×13 ≈ 1.63px，
     同一份 CSS 会突然变粗一档。1.6 让桌面 ≈1.3px、移动端(15px) ≈1.5px，
     与「指标波形 / 对象层叠」两颗同线宽，三颗并排才像一套。 */
  stroke: currentColor; fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ★ 2026-10-27 A2 移动端瘦身：本按钮在移动端的尺寸/图标搬到 kp-main.css 的
   「A2 移动端瘦身」段统一管（30×26 纯图标方盒 + 15px 图标）。
   原先这里自带 padding:3px 8px / font-size:11px / icon 11px，A2 之后必输给
   kp-main.css 的 `body.kp-mobile #period-bar #pb-goto-btn`（特异性更高）→ 留着就是
   「看着生效、其实没用」的死规则，日后改这里的人会白调。整段删掉，单点管。
   ⚠️ 桌面端那条 `#pb-goto-btn .ico svg` 保留 —— 移动端覆盖不到桌面尺寸。 */

/* 多窗口「紧凑策略」模式：kp-main.css 那里把「周期 / 指标」一起 display:none 掉了
   （周期栏压到 32px 高、opacity .78，只留周期按钮），本入口跟队 ——
   否则 320px 窄栏会多挤一个 chip。语义在该文件，选择器放这里，两边不交叉改。 */
body.mw-multi.mw-pb-strategy-compact #pb-goto-btn { display: none !important; }

/* ═══ 前往到弹窗：移动端适配（2026-10-27）═══
   病灶：.gt-m-body 是固定两栏 grid（1fr + 195px），390px 宽的手机上
   左栏只剩 ~110px → 日历格子挤成一条线，点不准；且 .modal-box 是
   max-height:80vh + overflow:hidden（kp-main.css 的通用规则）→
   单栏后内容更高会被**直接裁掉**，底部「前往到」确认键点不到。

   改法三件套（缺一不可）：
     ① .gt-m-body 改单栏 —— 日历占满宽度，时/分/周期落到日历下方
     ② .gt-m-body 自身可滚 —— 内容超高时滚它，而不是让 .modal-box 裁切
     ③ 日历格子换固定高度 —— aspect-ratio 在窄屏下算出的高度过小，
        触摸靶不足 24px（iOS 建议 44px）
   ⚠️ 移动端缩放沿用 #ps-modal / #ind-modal 的 .85 惯例（kp-main.css:7007），
      保持全站弹窗手感一致。 */
@media (max-width: 760px) {
  /* ① 单栏：日历在上，时/分/周期在下 */
  #goto-time-modal .gt-m-body {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 14px 6px;
  }

  /* ①-b ⚠️ 滚动容器必须放在 .gt-modal 上，不能是 .gt-m-body（2026-10-27 真浏览器实测）：
       .gt-modal 是 flex column 且 overflow:hidden（kp-main.css 的 .modal-box 通用规则），
       .gt-m-body 作为它的子项被压到 clientH=380，而单栏内容需要 scrollH=571
       → 内容被**裁掉**（日历下方的时间选择器只剩 197px，溢出部分盖住预设按钮）。
       实测两个错误解法：
         · grid-auto-rows:auto + align-items:start → 行高仍按两栏时的旧值分配，无效
         · 给 .gt-time-panel 加 min-height → 计算高度对了，但父容器仍在裁，无效
       正解：让 .gt-modal 自己滚动（overflow-y:auto），.gt-m-body 回到自然高度，
       底部「前往到」确认键随内容一起滚动到可见处。 */
  #goto-time-modal .gt-modal {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #goto-time-modal .gt-m-body {
    overflow: visible;
    min-height: auto;
    /* ⚠️ flex 子项默认 flex-shrink:1 → 空间不够时被压缩（实测 225px 内容被压到 191px）。
       flex-shrink:0 让它保持内容原高，溢出部分由 .gt-modal 滚动承接。 */
    flex-shrink: 0;
    /* ⚠️ 真正压扁的是**网格行高**（实测 gridTemplateRows = "310.5px 232.195px"，
       而 .gt-time-panel 的 scrollHeight 是 232px 却只显示 197px —— 差值来自
       align-items 默认 stretch + 行高被兄弟行挤占）。
       显式给两行 auto：每行按自身内容取高，行高与内容严格一致。 */
    grid-template-rows: auto auto;
    align-items: start;
  }

  /* ③ 日历格子固定高度：aspect-ratio:1 在 330px 宽下算出来只有 ~44px，
        减去 grid gap 后触摸靶偏小 → 给一个确定的 40px，7 列刚好排满。
     ★ 2026-10-28 再压一档 40 → 30（用户「日历可以弄的更紧凑一些」）：
        月历 6 行 × 30 + 5 × 1px gap = 185（原 6×40 + 10 = 250，省 65），
        连同下面三处行距收紧，日历块实测 310 → 226（真机 390×844，见交付数据）。
        ⚠️ 代价：单格触摸靶 30px，低于 iOS 44px 建议值。这是「再紧凑一档」的
           物理代价，不是疏漏 —— 想回调只改这一个数字即可（↔ 与 gap 联动见下）。 */
  #goto-time-modal .gt-cal-day {
    aspect-ratio: auto;
    height: 30px;
    font-size: 11.5px;
    border-radius: 4px;
  }

  /* ③-b 格子间距 2 → 1：7 列 × 6 行时 2px 缝会吃掉 12px 高度，
        且网格缝在 30px 格子上显得比格子还抢眼 */
  #goto-time-modal .gt-cal-grid {
    gap: 1px;
  }

  /* ③-c 周头（一..日）与月标题行收紧：原来 22px + 32px 共 54px，
        纯标签行没必要占这么高 → 压到 16px + 26px（省 12） */
  #goto-time-modal .gt-cal-week {
    margin-bottom: 2px;
  }
  #goto-time-modal .gt-cal-week span {
    padding: 1px 0;
    line-height: 1.2;
  }
  #goto-time-modal .gt-cal-head {
    margin-bottom: 5px;
  }
  #goto-time-modal .gt-cal-month {
    padding: 2px 8px;
  }
  #goto-time-modal .gt-cal-nav-btn {
    width: 22px;
    height: 22px;
    font-size: 13px;
  }

  /* 弹窗整体留白收一档：单栏后内容比两栏矮，不需要 520px 宽 */
  #goto-time-modal .modal-box {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: 88vh;
  }

  /* 缩放：见文件末尾的 body.kp-mobile 段（2026-10-27 审计移出媒体查询） */

  /* ═══ ④「最近前往」恢复双列（2026-10-28 实测纠正）═══
     ⚠️ 原来这里是 `grid-template-columns: 1fr`（单列），注释写「两列在窄屏太挤」。
       但 kp-main.css:2602 的基础样式本来就是两列 —— 这条覆盖把 6 条从
       「2 列 × 3 行」摊成「单列 6 行」，真机实测列表 249px，比双列多花 **127px**，
       占了整个弹窗内容的 25%。这就是用户说的「最近 6 条占比太大」。
     现在改回双列，**不是简单删覆盖**：单条在 ~160px 半宽里必须缩骨架，否则
       22px 图标 + 16px 删除位 + 16px 间距 = 54px 装饰，文字只剩 ~90px（挤成省略号）。
       → 图标 22→18、删除位 16→12、gap 8→6、padding 5/8→4/6，装饰降到 42px。
     ⚠️ 删除键 .gt-history-del 的 opacity:0（hover 才显形）**保持原样不动** ——
       移动端没有 hover，它在单列时同样是隐形的，改它是另一个课题，别在这里顺手改。 */
  #goto-time-modal .gt-history-list {
    grid-template-columns: 1fr 1fr;
  }
  #goto-time-modal .gt-history-item {
    grid-template-columns: 18px 1fr;
    gap: 6px;
    padding: 4px 6px;
  }
  /* ① 回收隐形删除键那一列（2026-10-28 实测后按用户决定落地）：
     删除键基础样式带 opacity:0（只有 :hover 显形），移动端没有 hover → 永久隐形、
     物理上点不到，却独占 grid 第三列 12px + 6px gap = 18 布局px（占条目宽 162 的 11%）。
     后果实测：6 条历史里 5 条相对行被截断（需 125 布局px、只有 106），周期标签被吃掉。
     → 列宽矩阵去掉第三列，并把 .gt-history-del 一起 display:none：
       ⚠️ 只删列不 display:none，它是第三个子元素 → 落进隐式列（auto 宽）照样占位。
     代价（用户已知悉并批准）：移动端失去「单条删除」入口，删除历史走面板顶部「清空」。
     桌面端不受影响（本段在 @media (max-width:760px) 内）。 */
  #goto-time-modal .gt-history-del {
    display: none;
  }
  #goto-time-modal .gt-history-item .gt-sym-chip {
    width: 18px;
    height: 18px;
    font-size: 9px;
    border-radius: 4px;
  }
  /* ⚠️ 2026-10-28 真机实测（390×844）纠正一档：只改字号不够。
     kp-main.css:2625 的 .gt-history-relative **没有** white-space:nowrap
     （只有 .gt-history-absolute 有）→ 半宽 ~156px 里「3 分钟前 · BTCUSDT · 1h」
     折成两行 → 单条从 38px 涨到 47.5px，6 条反而比单列还高。
     这也是上一轮「改单列」的真实原因（注释写的『太挤』= 折行，不是变窄）。
     补上截断后单条回到 38px（minmax 下限），两列才真正省高。
     ⚠️ 字号必须降到 10px（2026-10-28 三次实测确认，别再改回 10.5）：
        回收删除列后 1fr = 124 布局px。用 Range 直量真实文本自然宽（**不是** scrollWidth，
        也不要在离屏元素上量：本弹窗有 transform scale(.85)，getBoundingClientRect 给的是
        视觉px，拿它去比布局px 会得出「余 15px」的假宽裕）：
          「27 分钟前 · XAUUSD · 1d」@10.5px = 106.2 视觉 = 125 布局 → 差 1px，仍触发 ellipsis
          「23 小时前 · BTCUSDT · 4h」@10.5px = 130.6 布局 → 差 6.6px
        降到 10px 后 XAUUSD 类 ≈ 119 放得下；7 字符 symbol（BTCUSDT）≈ 124.4 仍卡边界，
        所以再补 margin-right:-4px —— 把盒子向右借 4px，落在 item 的 6px 右内距里，
        视觉零变化（卡片骨架、条高、行距全不动），却把可用宽抬到 128。
        ⚠️ 已知长尾：12 字符 symbol（如 1000PEPEUSDT）需 ≈132 > 128 → 仍截断，截掉行尾周期。
        要彻底解决得改 goto-module.js 的文案排布（周期前置），属另一课题，未动。 */
  #goto-time-modal .gt-history-relative {
    font-size: 10px;
    margin-right: -4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #goto-time-modal .gt-history-absolute {
    font-size: 9.5px;
  }

  /* 预设按钮：⚠️ 注释原写「单列后每颗可以大一点」，但预设从来不在 history-list 里，
     与单/双列无关 —— 它只是移动端触摸靶放大，与上一条无因果关系（2026-10-28 纠正） */
  #goto-time-modal .gt-preset {
    font-size: 12px;
    padding: 6px 12px;
  }
  /* 预设压成单行横滚：6 颗预设（最新/前1天/前1周/前1月/前3月/前1年）在 390px 宽下
     基础样式 kp-main.css:2578 的 flex-wrap:wrap 会折成 **2 行**（真机实测 78px），
     而单行只需 ~37px —— 这是弹窗最后 35px 溢出的唯一来源（收掉即内容高 776→~738，
     低于 max-height:88vh 的 742，弹窗零内部滚动）。
     · nowrap + overflow-x:auto → 折行变横滚，纵向固定一行
     · flex:0 0 auto → 禁止 chip 被压缩，保证触摸靶不缩水
     · 隐藏滚动条 → 移动端横滚条常驻很丑，且 iOS 本身就只在滚动时闪现 */
  #goto-time-modal .gt-presets {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px;
  }
  #goto-time-modal .gt-presets::-webkit-scrollbar {
    display: none;
  }
  #goto-time-modal .gt-preset {
    flex: 0 0 auto;
  }

  /* ═══ ④ 时 / 分 / 周期 三栏紧凑化（方案 B：标签内联 + 时分并排一行）═══
     现状（390×844 真浏览器实测，非估算）：
       时 55px + 分 55px + 周期 73px + gap 16px = **199px**，占弹窗 631px 的 32%。
       其中约 54px 是纯浪费：
         · 「时」「分」两个标签各独占一整行（各 18px）—— 标签只有 10px 字号，
           下面才是控件，视觉上像三张独立大卡
         · 周期 hint「先到图表顶部切周期再跳转」17px —— 移动端弹窗是全屏的，
           用户根本看不到图表顶部，这句话在手机上没有意义
     改法（**纯 CSS**，不动 goto-modal.js 的 DOM，不动 data-act / data-role 委托）：
       · .gt-time-panel 改 2 列 grid → 时 / 分 并排占同一行，周期整行在下
       · 每行改 flex → 标签内联到控件左侧，不再独占一行
       · ± 键 22px → 26px → 缩放 .85 后视觉 19px → 22px（iOS 建议 44px，
         但 390px 宽放下 6 颗按钮，44px 在物理上放不下）
     ⚠️ 时 / 分 是**两个独立 DOM 元素**（goto-modal.js 的 TPL，第 1 / 2 个
        .gt-time-row），各占 grid 一列；周期块用**类名** .gt-period-row 整行铺满。
        ⚠️ 2026-10-27 审计修正：这里原来用 :nth-child(1/2/3) 定位三行、并把时/分
        「去掉相邻边框 + 半圆角」拼成一张卡。实测（真浏览器，往面板里插一个节点）：
          周期行立刻被挤成 170px 半宽、时/分 变成 340px → 布局静默错位。
          根因是「兄弟节点里的第几个」只能用位置选择器表达，而模板一改位置就漂。
        改法：周期行认**类名** .gt-period-row（模板里本来就有），时/分认
          :not(.gt-period-row) → 完全不依赖顺序；两张卡各自独立（不再拼卡），
          少一条公共边也算不出来，代价只是视觉上分成两张卡。 */
  #goto-time-modal .gt-time-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 8px;
    row-gap: 8px;
  }

  #goto-time-modal .gt-time-panel > .gt-time-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    min-width: 0;
  }

  /* 周期块整行铺满（认类名，不认位置） */
  #goto-time-modal .gt-time-panel > .gt-time-row.gt-period-row {
    grid-column: 1 / -1;
  }

  /* 标签内联：不再独占一行 */
  #goto-time-modal .gt-time-row-label {
    margin-bottom: 0;
    flex: 0 0 auto;
    font-size: 11px;
    line-height: 1.2;
  }

  /* ⚠️ 用 :not(.gt-period-row) 收窄：否则 ID 选择器会连周期行的
     gap:8px（kp-main.css 的 .gt-period-row .gt-time-row-control）一起改成 4px
     —— 那是**静默覆盖**，注释不写就没人知道。 */
  #goto-time-modal .gt-time-row:not(.gt-period-row) .gt-time-row-control {
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px;
  }
  #goto-time-modal .gt-period-row .gt-time-row-control {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* ± 键放大：22 → 26px，数字同步放大 */
  #goto-time-modal .gt-time-step-btn {
    width: 26px;
    height: 26px;
    font-size: 15px;
    border-radius: 5px;
  }
  #goto-time-modal .gt-time-value {
    font-size: 19px;
    padding: 0 2px;
  }

  /* 周期块：chip 与 hint 各压一行 */
  #goto-time-modal .gt-period-display {
    gap: 3px;
  }
  #goto-time-modal .gt-pd-current {
    padding: 5px 10px;
    font-size: 13px;
    gap: 6px;
  }
  /* hint 压成 10px 单行：文案本身（「先到图表顶部切周期再跳转」）在移动端
     无意义，但删文案要改 DOM，这里只降字号 —— 12 字 × 10px ≈ 120px，
     周期行整行宽 322px，单行放得下，不触发省略号 */
  #goto-time-modal .gt-pd-hint {
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ═══ 移动端弹窗缩放 .85（与 #ps-modal / #ind-modal 同款）═══
   ⚠️ 2026-10-27 审计修正：原来这条写在 @media (max-width: 760px) **里面**，
     触发面比 ps/ind 窄 —— kp-main.css 的
       body.kp-mobile #ps-modal .modal-box,
       body.kp-mobile #ind-modal .modal-box { transform: scale(.85) }
     是**顶层规则**（只认 body.kp-mobile 类）。结果 iPad 上（UA 命中、宽 1024）
     ps-modal 缩了、本弹窗没缩 → 与本文件原注释「保持全站弹窗手感一致」自相矛盾
     （真浏览器实测：本弹窗 transform=none，尺寸 520×607）。
     现在移出媒体查询，与 ps/ind 同一个触发口径。
   ⚠️ 注意：弹窗**内容布局**（单栏 + 紧凑时/分/周期）仍留在 @media (max-width:760px)
      —— 那管的是「窄屏放不下」，与「是不是移动端形态」是两件事，别混。 */
body.kp-mobile #goto-time-modal .modal-box {
  transform: scale(.85);
  transform-origin: center center;
}