/* ============================================================================
 * fig_tunnel.css —— ★★ 隧道纵切色块图的外观
 *
 *   ★★ 为什么单独一个文件（2026-10-14 从 dark.css 里搬出来的）：
 *     这套 `.tun-*` 规则原来写在 `dark.css` 里，但它们**没有 `body.skin-dark`
 *     前缀** —— 也就是说**不管什么皮肤都在生效**。
 *     而里面却硬编码了一堆**深藏青**（#16233A / #0F1B2E / #3A4F73 …）。
 *
 *   ★★★ 结果（一号位 2026-10-14 发现）：
 *       他要求"**全系浅色，不要深色**"，我把 `skin-dark` 去掉之后，
 *       这张图上就出现**五块黑斑** ——
 *       因为它们根本不是"深色皮肤"管的，是**写死的深色**。
 *
 *   ★ 修法：**把颜色全部换成变量**（`var(--bg-card)` / `var(--line)` …），
 *     这样它跟着皮肤走 —— 浅色下就是浅色，将来真要深色也不用改这里。
 *
 *   ★ 布局规则一个字没动（那是老系统最值钱的视图，见 99 号 §三）：
 *       横坐标 = 桩号 ÷ 结构物长度（真实比例）
 *       比例会重叠 → 退化成等距顺排；再放不下 → 横向滚动
 *       每根竖条固定 5 格（拱顶/左腰/右腰/左墙/右墙），缺位补"空"格、等高不瓜分
 *     ★ 竖条高度按"最多测点的断面"统一，各断面才视觉可比 ——
 *       否则 2 个测点的断面画得矮、5 个的画得高，一眼看不出"谁配得不全"。
 * ========================================================================== */

/* ---------------------------------------------------------------- 工具条 / 外框 */
.tun-toolbar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px;
}
.tun-wrap { position: relative; padding: 0 26px; }

/* 起终点竖排红字（老系统口径：浮在框外两侧、不占横向空间） */
.tun-cap {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  writing-mode: vertical-rl; text-orientation: upright;
  color: #C0392B; font-size: 13px; letter-spacing: 4px; user-select: none;
}
.tun-cap.cap-l { left: 0; }
.tun-cap.cap-r { right: 0; }

/* 隧洞外框：灰边 + 45° 斜阴影线（"这是洞身"的视觉隐喻）
   ★ 斜线用【浅灰】—— 深色下是深藏青斜线，浅色下必须反过来，
     否则就是一块黑板。 */
.tun-scroll {
  width: 100%; overflow-x: auto; overflow-y: hidden;
  border: 2px solid var(--line-strong); border-radius: 4px;
  background: repeating-linear-gradient(
    45deg, var(--bg-soft) 0 5px, var(--bg-hover) 5px 6px);
}
.tun-canvas { position: relative; min-width: 100%; }

/* 一根竖条 = 一个断面 */
.tun-sec {
  position: absolute; top: 8px; display: flex; flex-direction: column; gap: 3px;
  border: 2px solid var(--brand); border-radius: 3px; padding: 3px;
  background: var(--bg-card);
}

/* ★ 断面标签是【断面布置图】的入口（不是色块）——老系统的分工，
   点标签看"怎么装的"，点色块看"这个点怎么样"，两个问题不同。 */
.tun-tag {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 11px; color: var(--brand-text); padding-top: 3px;
  cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px;
  background: none; border: 0;
}
/* ★ 原来是 `color:#fff` —— 那是为深底写的。浅底上白字**看不见**。 */
.tun-tag:hover { color: var(--brand-dark); text-decoration: underline solid; }

/* 一格 = 一个测点。竖排文字（老系统同款），因为格子窄而位置名很长。 */
.tun-cell {
  width: 38px; min-height: 32px; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; line-height: 1.1;
  /* ★ 格子底色是绿/橙/红/灰（饱和色），白字在上面才清楚 —— 这个白字是对的 */
  color: #fff; cursor: pointer;
  writing-mode: vertical-lr; letter-spacing: 1px; user-select: none; border: 0;
  padding: 0;
}
.tun-cell:hover { outline: 2px solid var(--brand); outline-offset: -1px; }
/* ★★ 状态色一个都不许改（99 号 §六）：绿=正常 / 橙=一级 / 红=二级 / 灰=离线 */
.tun-cell.c-ok    { background: var(--ok); }
.tun-cell.c-warn1 { background: var(--warn1); }
.tun-cell.c-warn2 { background: var(--warn2); }
.tun-cell.c-na    { background: var(--na); }
/* 空位 = 最不该被注意的东西 → 透明底 + 浅灰虚线（浅色下用 --empty-line） */
.tun-cell.c-empty {
  background: transparent; border: 1px dashed var(--empty-line); color: var(--ink-3);
  cursor: default;
}
.tun-cell.c-empty:hover { outline: none; }

/* 比例尺（老系统已知缺陷 #12：顺排时桩号比例丢失 →
   新版折中办法：顺排时在底部画一条【等距刻度】，至少把桩号数字留在眼前） */
.tun-scale {
  position: relative; height: 34px; margin-top: 24px;
  border-top: 1px dashed var(--empty-line);
}
.tun-scale span {
  position: absolute; top: 4px; transform: translateX(-50%);
  font-size: 10.5px; color: var(--ink-3); white-space: nowrap;
}

/* 盯盘页的统计行 / 图例（原来带 `body.skin-dark` 前缀，现在不分皮肤） */
.stat-line { font-size: 13px; }
.legend { color: var(--ink-2); }

/* ---------------------------------------------------------------- 手机：① 结构物横屏看 */
/* ★★ 一号位口径（34 号 §七）：① 结构物「**横屏看**（转成长条，显示隧道断面）」。
   落地办法：竖屏时给一个明显的"请横屏"提示条 + 允许整块横向滚动；
   横屏后自动按可用宽度重算比例（fig_tunnel.js 监听 resize/orientationchange 重画）。 */
.rotate-tip {
  display: none; padding: 8px 10px; margin-bottom: 8px; border-radius: 6px;
  background: var(--bg-soft); color: var(--warn1); font-size: 12.5px;
}
@media (max-width: 820px) and (orientation: portrait) {
  .rotate-tip { display: block; }
  /* 竖屏下让长条尽量占满：两侧留白收掉 */
  .tun-wrap { padding: 0 16px; }
  .tun-cell { width: 30px; min-height: 28px; font-size: 10.5px; }
}
@media (max-width: 820px) and (orientation: landscape) {
  .tun-wrap { padding: 0 14px; }
  .tun-cell { width: 32px; min-height: 30px; }
  /* 横屏时把盯盘页的纵向留白压掉，一屏尽量多放（手机上纵向本来就少） */
  .pane { padding: 8px; }
  .card { padding: 8px 10px; margin-bottom: 8px; }
}