/* 场景叠层（assets/scn/engine.js 生成的 DOM，全部挂在 .scv 下）——2026-10-04 子代理 SE，设计稿《首页场景重做》3.2 / 5.3。
   从下到上：.scv-svg 现场与数据层（SVG）→ .scv-ghost 一轮结尾淡回开头用 → .scv-lines 标签引线、小窗指引线（px 坐标的 SVG）
   → .scv-pins 标签 → .scv-ui 图例（左上）、小卡（右上）、小窗、字幕条（左下）。字 11–14px，不随画面缩放。
   竖构图（data-f="tall"，手机 4:5）：图例顶上一行、字幕底部整宽、小卡贴在字幕上方整宽。颜色只用站内的蓝 / 灰；红、琥珀、绿按设计稿 4.1 的语义。 */
.scv{--scv-sans:var(--sans,"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif);--scv-mono:var(--mono,"JetBrains Mono",ui-monospace,Menlo,monospace);
  position:relative;width:100%;height:100%;overflow:hidden;background:#F4F7FA;isolation:isolate;contain:layout paint;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;font-family:var(--scv-sans)}
.scv-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden}
.scv-ghost{pointer-events:none}
.scv-lines{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;pointer-events:none}
.scv-pins,.scv-ui{position:absolute;inset:0;pointer-events:none}

/* 标签：白底细边小牌 + 1px 引线 + 锚点小圆；蓝 = 这一次的安排，红 = 真实异常，琥珀 = 拥堵 / 偏高，绿 = 结果 */
.scv-pin{position:absolute;left:0;top:0;height:22px;padding:0 7px;border:1px solid #CBD5E1;border-radius:6px;background:rgba(255,255,255,.96);
  box-shadow:0 1px 3px rgba(15,23,42,.08);font:500 12px/20px var(--scv-sans);color:#334155;white-space:nowrap;will-change:transform,opacity}
.scv-pin[data-tone=blue]{border-color:#93C5FD;background:#EFF6FF;color:#1D4ED8}
.scv-pin[data-tone=red]{border-color:#FCA5A5;background:#FEF2F2;color:#DC2626}
.scv-pin[data-tone=amber]{border-color:#FCD34D;background:#FFFBEB;color:#B45309}
.scv-pin[data-tone=green]{border-color:#86EFAC;background:#F0FDF4;color:#15803D}
.scv-stem,.scv-lead{stroke:#94A3B8;stroke-width:1}
.scv-lead{stroke-dasharray:3 2}
.scv-dot{fill:#fff;stroke:#94A3B8;stroke-width:1.3}
.scv-stem[data-tone=blue],.scv-dot[data-tone=blue]{stroke:#3B82F6}
.scv-stem[data-tone=red],.scv-dot[data-tone=red]{stroke:#DC2626}
.scv-stem[data-tone=amber],.scv-dot[data-tone=amber]{stroke:#F59E0B}
.scv-stem[data-tone=green],.scv-dot[data-tone=green]{stroke:#16A34A}

/* 图例：这一场汇集了哪几路数据；到时刻灰点变蓝点 */
.scv-legend{position:absolute;left:12px;top:12px;display:flex;flex-wrap:nowrap;gap:6px}
.scv-chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px 0 8px;border:1px solid #E2E8F0;border-radius:999px;background:rgba(255,255,255,.92);
  font:400 11px/1 var(--scv-sans);color:#94A3B8;white-space:nowrap;transition:color .35s,border-color .35s}
.scv-chip i{flex:none;width:6px;height:6px;border-radius:50%;background:#CBD5E1;transition:background .35s,box-shadow .35s}
.scv-chip.on{color:#334155;border-color:#DBEAFE}
.scv-chip.on i{background:#1D4ED8;box-shadow:0 0 0 3px rgba(29,78,216,.14)}

/* 字幕条：20px 原版 working 思考球（2026-10-04 Leon 定，原为 composing）+ 蓝色拍名 + 一行平实中文 */
.scv-cap{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:8px;height:40px;max-width:calc(100% - 24px);padding:0 14px 0 10px;
  border:1px solid #E2E8F0;border-radius:10px;background:rgba(255,255,255,.92);box-shadow:0 6px 18px -10px rgba(15,23,42,.22)}
.scv-cap canvas,.scv .scv-orb{flex:none;display:block;width:20px;height:20px}
.scv-beat{flex:none;font:600 12px/1 var(--scv-sans);letter-spacing:.04em;color:#1D4ED8}
.scv-say{min-width:0;font:400 14px/1.3 var(--scv-sans);color:#0F172A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scv-cap.in .scv-beat,.scv-cap.in .scv-say{animation:scv-in .35s ease both}
.scv-cap.in .scv-say{animation-delay:.05s}
@keyframes scv-in{from{opacity:0;transform:translateY(3px)}}

/* 数据小卡：≤3 行，名称 + 细条（可省）+ 等宽数值 */
.scv-card{position:absolute;top:12px;right:12px;width:var(--w,240px);max-width:calc(100% - 24px);padding:10px 12px 11px;border:1px solid #E2E8F0;border-radius:10px;
  background:rgba(255,255,255,.95);box-shadow:0 8px 24px -14px rgba(15,23,42,.28)}
.scv-card[data-dock=tl]{left:12px;right:auto;top:48px}
.scv-card[data-dock=br]{top:auto;bottom:64px}
.scv-card-h{margin-bottom:7px;font:500 11px/1 var(--scv-sans);letter-spacing:.04em;color:#64748B}
.scv-row{display:grid;grid-template-columns:auto minmax(28px,1fr) auto;align-items:center;gap:8px;font:400 12px/18px var(--scv-sans);color:#334155}
.scv-row.nobar{grid-template-columns:1fr auto}
.scv-row+.scv-row{margin-top:3px}
.scv-rn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scv-rv{font:500 12px/18px var(--scv-mono);color:#0F172A;text-align:right;white-space:nowrap}
.scv-bar{position:relative;display:block;height:4px;border-radius:2px;background:#EEF2F6;overflow:hidden}
.scv-bar b{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:#94A3B8;transition:width .4s ease}
.scv-row[data-tone=blue] .scv-bar b{background:#1D4ED8}.scv-row[data-tone=blue] .scv-rv{color:#1D4ED8}
.scv-row[data-tone=amber] .scv-bar b{background:#F59E0B}.scv-row[data-tone=amber] .scv-rv{color:#B45309}
.scv-row[data-tone=red] .scv-bar b{background:#DC2626}.scv-row[data-tone=red] .scv-rv{color:#DC2626}
.scv-row[data-tone=green] .scv-rv{color:#15803D}
/* 小卡里的小折线 + 范围带（api.spark）：整宽、固定高，底下一排阶段名 */
.scv-spark{margin-top:6px}
.scv-spark svg{display:block;width:100%;overflow:visible}
.scv-spark-l{display:flex;justify-content:space-between;margin-top:5px;font:400 11px/1 var(--scv-sans);color:#64748B}

/* 小窗：固定像素大小，指引线连到现场一点 */
.scv-inset{position:absolute;left:0;top:0;padding:6px;border:1px solid #CBD5E1;border-radius:10px;background:#fff;box-shadow:0 10px 26px -14px rgba(15,23,42,.35);will-change:transform,opacity}
.scv-inset svg{display:block}
.scv-inset-h{margin:1px 2px 6px;font:500 11px/1 var(--scv-sans);color:#64748B;white-space:nowrap}

/* 竖构图（手机 4:5）：图例顶上一行、字幕底部整宽、小卡贴在字幕上方整宽 */
.scv[data-f=tall] .scv-legend{left:8px;right:8px;top:8px;gap:4px}
.scv[data-f=tall] .scv-chip{height:22px;padding:0 7px 0 6px;gap:4px}
.scv[data-f=tall] .scv-chip i{width:5px;height:5px}
.scv-legend.tight{align-items:center;gap:8px;height:26px;padding:0 10px;border:1px solid #E2E8F0;border-radius:999px;background:rgba(255,255,255,.92);overflow:hidden}   /* 窄手机：一条底，图例项不再各带边框 */
.scv-legend.tight .scv-chip{height:auto;padding:0;border:0;background:none;gap:4px}
.scv-legend.tighter{gap:6px;padding:0 8px}
.scv-legend.tighter .scv-chip{font-size:10.5px;gap:3px}
.scv[data-f=tall] .scv-cap{left:8px;right:8px;bottom:8px;height:38px;max-width:none;padding:0 10px 0 8px;gap:7px}
.scv[data-f=tall] .scv-say{font-size:13px}
.scv[data-f=tall] .scv-card{left:8px;right:8px;top:auto;bottom:54px;width:auto;max-width:none;padding:8px 10px 9px}
.scv[data-f=tall] .scv-pin{height:20px;padding:0 6px;font-size:11px;line-height:18px;border-radius:5px}
@media (prefers-reduced-motion:reduce){.scv-cap.in .scv-beat,.scv-cap.in .scv-say{animation:none}.scv-chip,.scv-chip i,.scv-bar b{transition:none}}

/* 320–340 宽的手机（2026-10-04 主会话验收：整站规则「320–412 宽一行放下」）：字幕小一号、间距收紧（思考球仍是原版 20px，不缩放），16 个汉字宽以内的字幕一行放下 */
@media (max-width:340px){
  .scv[data-f=tall] .scv-cap{gap:5px;padding:0 8px 0 6px}
  .scv[data-f=tall] .scv-beat{font-size:11px;letter-spacing:.02em}
  .scv[data-f=tall] .scv-say{font-size:12px}
}