/* ============================================================================
 * ZERO GUIDE · widgets.css —— 零基础复现指南交互组件共用样式（初版骨架）
 * ----------------------------------------------------------------------------
 * 谁在用：w-map-explorer.js（组件 A）已完全依赖本文件；
 *         w-cost-lab / w-search-anim / w-relay-anim 直接复用 .zg-btn / .zg-kv /
 *         .zg-slider / .zg-note / .zg-readout 等，别再各自发明一套。
 * 设计约束：
 *   1) 颜色一律走首页 CSS 变量（--panel/--line/--ink/--muted/--accent/--code），
 *      这里只额外定义 --zg-c0…--zg-c7（编码色）与 --zg-grid。
 *   2) 必须同时好看于 data-theme="light" 与 "dark"（html 上的属性，见主文件 head）。
 *   3) 不依赖任何框架/构建；file:// 双击打开即可用。
 *   4) 无障碍：按钮有文字、选中态用 aria-pressed、不靠纯颜色传达（都带文字标签）。
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. 卡片外壳
 * ------------------------------------------------------------------------- */
.zg-widget {
  /* 编码色——与 out/small.html、one3/viz.py 的报告配色对齐，读者对照截图时不困惑 */
  --zg-c0: #f7f6ef;   /* 可达/空地 */
  --zg-c1: #c0392b;   /* 辐射区（红） */
  --zg-c2: #95a5a6;   /* 废墟（灰） */
  --zg-c3: #34495e;   /* 裂谷（深蓝） */
  --zg-c4: #c026d3;   /* 表 1 里没有的编码 4 */
  --zg-c5: #27ae60;   /* 起点 S（绿） */
  --zg-c6: #2980b9;   /* 终点 E（蓝） */
  --zg-c7: #f39c12;   /* 中继 R（橙） */
  --zg-grid: rgba(31, 35, 40, .13);
  --zg-accent: var(--accent, #0f766e);
  --zg-accent-soft: var(--accent-soft, #d9f0ec);
  --zg-panel: var(--panel, #ffffff);
  --zg-line: var(--line, #e3e1db);
  --zg-ink: var(--ink, #1f2328);
  --zg-muted: var(--muted, #5f6b76);
  --zg-code-bg: var(--code, #f2efe9);
  --zg-ok: var(--ok, #15803d);
  --zg-warn: var(--warn, #b45309);
  --zg-bad: var(--bad, #b91c1c);

  position: relative;
  margin: 22px 0;
  background: var(--zg-panel);
  border: 1px solid var(--zg-line);
  border-radius: 12px;
  box-shadow: var(--shadow, 0 1px 2px rgba(20, 25, 30, .06));
  overflow: hidden;
  /* 防止首页的全局行高/字号把控件撑变形 */
  font-size: 14px;
  line-height: 1.6;
}

html[data-theme="dark"] .zg-widget {
  --zg-c0: #242a2e;
  --zg-c1: #e05b4c;
  --zg-c2: #8a99a0;
  --zg-c3: #5b7f9e;
  --zg-c4: #d06ae8;
  --zg-c5: #34d399;
  --zg-c6: #60a5fa;
  --zg-c7: #fbbf24;
  --zg-grid: rgba(230, 230, 230, .14);
}

.zg-widget-inner { padding: 15px 18px 14px; }

/* ---------------------------------------------------------------------------
 * 2. 标题条 / 一句话说明
 * ------------------------------------------------------------------------- */
.zg-head { margin: 0 0 12px; }
.zg-tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .4px;
  font-weight: 600;
  color: var(--zg-accent);
  background: var(--zg-accent-soft);
  border-radius: 99px;
  padding: 2px 9px;
  margin-bottom: 7px;
}
.zg-title {
  margin: 0 0 5px;
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.45;
  color: var(--zg-ink);
}
.zg-hint {
  margin: 0;
  font-size: 13px;
  color: var(--zg-muted);
  line-height: 1.7;
}
.zg-hint b { color: var(--zg-ink); font-weight: 600; }

/* ---------------------------------------------------------------------------
 * 3. 控件：工具条 / 按钮 / 开关 / 滑条
 * ------------------------------------------------------------------------- */
.zg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 10px;
  padding: 9px 10px;
  background: var(--zg-code-bg);
  border: 1px solid var(--zg-line);
  border-radius: 10px;
}
.zg-toolbar-label {
  font-size: 12px;
  color: var(--zg-muted);
  font-weight: 600;
}
.zg-toolbar-thin { padding: 6px 10px; font-size: 12px; }
.zg-scale {
  font-size: 11px;
  color: var(--zg-muted);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  white-space: nowrap;
}
.zg-btns { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.zg-spacer { flex: 1 1 0; min-width: 0; }

.zg-btn {
  font: inherit;
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--zg-ink);
  background: var(--zg-panel);
  border: 1px solid var(--zg-line);
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s, box-shadow .12s;
  -webkit-tap-highlight-color: transparent;
}
.zg-btn:hover { border-color: var(--zg-accent); color: var(--zg-accent); }
.zg-btn:focus-visible {
  outline: 2px solid var(--zg-accent);
  outline-offset: 1px;
}
.zg-btn[aria-pressed="true"], .zg-btn.zg-on {
  border-color: var(--zg-accent);
  background: var(--zg-accent-soft);
  color: var(--zg-accent);
  font-weight: 600;
}
/* 跳转按钮：上行地址、下行含义 —— 让“D14 是起点”直接写在按钮上 */
.zg-btn-key { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 4px 9px; }
.zg-btn-key .zg-btn-t { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 600; font-size: 12.5px; }
.zg-btn-key .zg-btn-s { font-size: 10.5px; color: var(--zg-muted); line-height: 1.2; }
.zg-btn-key:hover .zg-btn-s { color: var(--zg-accent); }
.zg-btn-ghost { border-style: dashed; color: var(--zg-muted); }

/* 滑条（组件 D 用得到，先定好基调） */
.zg-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 99px;
  background: var(--zg-line);
  outline: none;
}
.zg-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--zg-accent);
  border: 2px solid var(--zg-panel);
  cursor: pointer;
}
.zg-slider::-moz-range-thumb {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--zg-accent);
  border: 2px solid var(--zg-panel);
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * 4. 画布 + 地图（组件 A）
 * ------------------------------------------------------------------------- */
.zg-canvas {
  overflow: auto;
  max-width: 100%;
  padding: 2px 0 4px;
  border-radius: 8px;
}
.zg-map-svg { display: block; margin: 0 auto; outline: none; }
.zg-map-svg:focus-visible { box-shadow: 0 0 0 2px var(--zg-accent); border-radius: 4px; }
/* 网格线/边框不吃鼠标：只让 .zg-cell 命中，悬停不会在格间闪 */
.zg-grid, .zg-frame, .zg-marks, .zg-wlabels { pointer-events: none; }

.zg-frame { fill: var(--zg-panel); stroke: var(--zg-line); stroke-width: 1; }
.zg-grid { fill: none; stroke: var(--zg-grid); stroke-width: .7; shape-rendering: crispEdges; }

.zg-cell { shape-rendering: crispEdges; transition: opacity .12s; }
.zg-cell.zg-c0 { fill: var(--zg-c0); }
.zg-cell.zg-c1 { fill: var(--zg-c1); }
.zg-cell.zg-c2 { fill: var(--zg-c2); }
.zg-cell.zg-c3 { fill: var(--zg-c3); }
.zg-cell.zg-c4 { fill: var(--zg-c4); }
.zg-cell.zg-c5 { fill: var(--zg-c5); }
.zg-cell.zg-c6 { fill: var(--zg-c6); }
.zg-cell.zg-c7 { fill: var(--zg-c7); }

.zg-map-svg text {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  pointer-events: none;
  user-select: none;
}
.zg-mark { fill: #fff; font-weight: 700; text-anchor: middle; }
.zg-wlab { fill: var(--zg-ink); opacity: .62; text-anchor: end; font-weight: 600; }
.zg-axis text { fill: var(--zg-muted); opacity: .95; }
.zg-axis .zg-axis-x, .zg-axis .zg-axis-y { text-anchor: middle; }
.zg-axis .zg-axis-y { text-anchor: end; }

/* 悬停 = 虚线圈；已选 = 实线圈（形状也能区分，不只靠颜色） */
.zg-hover {
  fill: none;
  stroke: var(--zg-ink);
  stroke-width: 1.6;
  stroke-dasharray: 3 2.5;
  pointer-events: none;
  opacity: .75;
}
.zg-sel {
  fill: none;
  stroke: var(--zg-accent);
  stroke-width: 2.6;
  pointer-events: none;
}
@keyframes zg-pulse {
  0%   { stroke-width: 2.6; opacity: .35; }
  45%  { stroke-width: 7;   opacity: 1; }
  100% { stroke-width: 2.6; opacity: 1; }
}
.zg-sel.zg-pulse { animation: zg-pulse .55s ease-out 1; }

/* 图例悬停 → 其它编码淡出（配合文字标签，不靠纯颜色传达信息） */
.zg-map-svg[data-focus] .zg-cell { opacity: .22; }
.zg-map-svg[data-focus="c0"] .zg-c0,
.zg-map-svg[data-focus="c1"] .zg-c1,
.zg-map-svg[data-focus="c2"] .zg-c2,
.zg-map-svg[data-focus="c3"] .zg-c3,
.zg-map-svg[data-focus="c4"] .zg-c4,
.zg-map-svg[data-focus="c5"] .zg-c5,
.zg-map-svg[data-focus="c6"] .zg-c6,
.zg-map-svg[data-focus="c7"] .zg-c7 { opacity: 1; }

/* ---------------------------------------------------------------------------
 * 5. 只读状态行（读数）
 * ------------------------------------------------------------------------- */
.zg-readout {
  margin: 10px 0 0;
  padding: 9px 12px;
  background: var(--zg-code-bg);
  border: 1px solid var(--zg-line);
  border-left: 3px solid var(--zg-accent);
  border-radius: 8px;
  min-height: 46px;
}
.zg-ro-line { font-size: 12.5px; line-height: 1.65; color: var(--zg-muted); }
.zg-ro-line + .zg-ro-line { margin-top: 3px; }
.zg-ro-line b { color: var(--zg-ink); font-weight: 600; }
.zg-ro-line code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 11.5px;
  background: var(--zg-panel);
  border: 1px solid var(--zg-line);
  border-radius: 4px;
  padding: 0 4px;
}
.zg-ro-line.l1 {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  color: var(--zg-ink);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.zg-ro-addr { font-weight: 700; color: var(--zg-accent); font-size: 14px; }
.zg-ro-sep { opacity: .4; }
.zg-ro-code { display: inline-flex; align-items: center; gap: 4px; }
.zg-ro-pin {
  font-size: 10.5px;
  color: var(--zg-accent);
  border: 1px solid var(--zg-accent);
  border-radius: 99px;
  padding: 0 6px;
  font-family: inherit;
}
.zg-ro-idle { color: var(--zg-muted); font-family: inherit; font-size: 13px; }
.zg-tag-inline {
  font-family: inherit;
  font-size: 11px;
  color: var(--zg-accent);
  background: var(--zg-accent-soft);
  border-radius: 4px;
  padding: 0 5px;
  margin-left: 2px;
}

/* ---------------------------------------------------------------------------
 * 6. 图例
 * ------------------------------------------------------------------------- */
.zg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--zg-muted);
}
.zg-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px 2px 3px;
  border-radius: 6px;
  cursor: help;
  outline: none;
}
.zg-legend-item:hover, .zg-legend-item:focus-visible { background: var(--zg-code-bg); }
.zg-legend-item:focus-visible { box-shadow: 0 0 0 2px var(--zg-accent); }
.zg-legend-code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 11.5px;
  color: var(--zg-ink);
}
.zg-legend-name { color: var(--zg-ink); }
.zg-legend-meta { font-size: 11px; }
.zg-legend-meta b { color: var(--zg-ink); }
.zg-legend-total {
  flex-basis: 100%;
  font-size: 11.5px;
  color: var(--zg-muted);
  border-top: 1px dashed var(--zg-line);
  padding-top: 6px;
  margin-top: 2px;
}

/* 色块：图例小方块 / 读数里的行内色块 */
.zg-sw {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid var(--zg-grid);
  flex: 0 0 auto;
}
.zg-ro-code .zg-sw { width: 10px; height: 10px; }
.zg-sw.zg-c0 { background: var(--zg-c0); }
.zg-sw.zg-c1 { background: var(--zg-c1); }
.zg-sw.zg-c2 { background: var(--zg-c2); }
.zg-sw.zg-c3 { background: var(--zg-c3); }
.zg-sw.zg-c4 { background: var(--zg-c4); }
.zg-sw.zg-c5 { background: var(--zg-c5); }
.zg-sw.zg-c6 { background: var(--zg-c6); }
.zg-sw.zg-c7 { background: var(--zg-c7); }

/* ---------------------------------------------------------------------------
 * 7. 供 cost-lab / search-anim / relay-anim 复用的通用小块
 * ------------------------------------------------------------------------- */
/* 键值对面板：代价拆解、段长统计都用它 */
.zg-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 12.5px; }
.zg-kv dt, .zg-kv .k { color: var(--zg-muted); }
.zg-kv dd, .zg-kv .v {
  margin: 0;
  color: var(--zg-ink);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-weight: 600;
}
.zg-num-ok { color: var(--zg-ok); }
.zg-num-warn { color: var(--zg-warn); }
.zg-num-bad { color: var(--zg-bad); }

/* 指标卡（段数 / 总长 / 中继数） */
.zg-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.zg-card {
  flex: 1 1 96px;
  min-width: 88px;
  padding: 7px 10px;
  border: 1px solid var(--zg-line);
  border-radius: 8px;
  background: var(--zg-code-bg);
}
.zg-card .h { font-size: 10.5px; color: var(--zg-muted); }
.zg-card .n {
  font-size: 17px;
  font-weight: 700;
  color: var(--zg-ink);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  line-height: 1.2;
}
.zg-card .u { font-size: 11px; color: var(--zg-muted); font-weight: 400; }

/* 提示条 */
.zg-note {
  margin: 10px 0 0;
  padding: 8px 11px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--zg-muted);
  background: var(--zg-code-bg);
  border: 1px solid var(--zg-line);
  border-radius: 8px;
}
.zg-note b { color: var(--zg-ink); }
.zg-note.warn { border-left: 3px solid var(--zg-warn); }

/* 脚注 / 数据来源 */
.zg-src {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--zg-muted);
  opacity: .85;
}
.zg-src code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: var(--zg-code-bg);
  border-radius: 3px;
  padding: 0 3px;
}

/* 出错兜底（数据文件没加载等） */
.zg-error {
  color: var(--zg-bad);
  font-size: 13px;
  line-height: 1.7;
  border-left: 3px solid var(--zg-bad);
}

/* 屏幕阅读器专用 */
.zg-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
 * 8. 响应式 / 动效偏好 / 打印
 * ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .zg-widget-inner { padding: 12px 12px 11px; }
  .zg-toolbar { gap: 6px; padding: 8px; }
  .zg-btn { font-size: 12px; padding: 5px 8px; }
  .zg-btn-key .zg-btn-s { display: none; }   /* 窄屏只留地址，避免按钮挤成一片 */
  .zg-legend { gap: 4px 10px; }
  .zg-legend-meta { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .zg-widget *, .zg-widget *::before, .zg-widget *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .zg-widget { break-inside: avoid; box-shadow: none; }
  .zg-toolbar { display: none; }       /* 打印时控件没意义，留着只会挤版面 */
  .zg-readout { border-left-color: #666; }
}