/* ============================================================================
   demos-pages.css — /demos 工作台（T3 骨架）
   ----------------------------------------------------------------------------
   口径：reports/PROPOSAL-demos-sacas-v3.md §5.1（工作台骨架）/ §5.2（状态规则）/
        §5.8（降级）/ §5.9（算力标注位）。
   约束：
     · 只用站内既有 token（main.css 的 --bg-card、--text-primary、--text-secondary、
       --border、--border-light、--accent-blue、--radius-sm-md-lg、--shadow-sm-md-lg），**不新增色板**；
       深色态由 html.dark 覆盖同名变量自动生效，本文件只补「深色填充上必须有深色文字」
       这类对比度例外（WCAG 1.4.11，与站内 S554 口径一致）。
     · 布局全部写在这里（而不是 Tailwind 工具类）：tailwind.css 是**预编译产物**，
       新工具类不重编译就不生效，而本单不重编译 CSS（文件归属限制）。
     · ⚠️ 注释里不要写「斜杠紧跟星号」的变量通配（例如 --radius 变量后接 /--shadow），
       那会形成注释结束符，把紧随其后的第一条规则整条吞掉（本文件曾因此丢掉
       `html:not(.wb-js) .wb-shell` 那条无 JS 降级规则，实测才有发现）。
     · 无 JS 时整个工作台隐藏（html:not(.wb-js)）—— 骨架全部依赖 JS，隐藏比留一堆
       死控件更诚实；无 JS 的说明文字由模板里的 <noscript> 提供。
   ========================================================================== */

/* ── 无 JS 降级：隐藏工作台外壳（<noscript> 说明块与入口卡保持可见）───────── */
html:not(.wb-js) .wb-shell {
    display: none !important;
}

/* ── 外壳 ───────────────────────────────────────────────────────────────── */
.wb-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem 2.5rem;
}

.wb-panel[hidden],
.wb-stepcol[hidden],
.wb-subpanel[hidden],
.wb-status-feedback[hidden] {
    display: none !important;
}

/* ── 顶部模块切换条（tablist + 方法说明）────────────────────────────────── */
.wb-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.wb-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wb-tab {
    appearance: none;
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.2;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 0.6rem 1rem;
    min-height: 44px;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.wb-tab:hover {
    color: var(--text-primary);
    background: var(--border-light);
}

.wb-tab[aria-selected="true"] {
    color: #FFFFFF;
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    font-weight: 600;
}

/* 深色态填充为 #60A5FA（浅蓝），白字仅 2.5:1 → 文字改深色（与 S554 同口径） */
html.dark .wb-tab[aria-selected="true"] {
    color: #0F172A;
}

.wb-tab:focus-visible,
.wb-step:focus-visible,
.wb-btn:focus-visible,
.wb-method-link:focus-visible,
.wb-card:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.wb-method-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.25rem 0.25rem;
    font-size: 0.9rem;
    color: var(--accent-blue);
    text-decoration: none;
    white-space: nowrap;
}

.wb-method-link:hover {
    text-decoration: underline;
}

/* ── 面板 ───────────────────────────────────────────────────────────────── */
.wb-panel {
    padding: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ── 模块 B 的步骤条（仅模块 B 有）──────────────────────────────────────── */
.wb-steps {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.wb-step {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    appearance: none;
    font: inherit;
    font-size: 0.9rem;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    min-height: 44px;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast);
}

.wb-step[aria-selected="true"] {
    color: var(--text-primary);
    background: var(--border-light);
    border-color: var(--accent-blue);
    font-weight: 600;
}

.wb-step-num {
    font-variant-numeric: tabular-nums;
}

.wb-step-sep {
    flex: 1 1 2rem;
    min-width: 1.5rem;
    height: 1px;
    background: var(--border);
}

/* ── 主体两栏（左操作栏 / 右画布+时间轴）───────────────────────────────── */
.wb-grid {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 900px) {
    .wb-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── 操作栏（两套操作栏共用同一视觉语法：同分组卡片 / 同控件尺寸 / 同按钮层级）── */
.wb-controls {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.wb-group {
    padding: 0.75rem;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.wb-group-title {
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.wb-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.65rem;
}

.wb-field:last-child {
    margin-bottom: 0;
}

.wb-field-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.wb-field-value {
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.wb-range {
    width: 100%;
    /* 触控目标 ≥44px（§5.8 / 质量门禁 5）：原生滑轨本身只有 ~24px 高，靠 min-height
       把可点区域撑到 44px；视觉上轨道仍居中、粗细不变。 */
    min-height: 44px;
    accent-color: var(--accent-blue);
}

.wb-select,
.wb-input {
    width: 100%;
    min-height: 44px;
    font: inherit;
    font-size: 0.9rem;
    padding: 0.5rem 0.6rem;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.wb-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.wb-switch input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--accent-blue);
}

.wb-note {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* ── 按钮层级：主按钮（填充）/ 次按钮（描边）────────────────────────────── */
.wb-btn {
    appearance: none;
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.2;
    min-height: 44px;
    padding: 0.7rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.wb-btn-primary {
    color: #FFFFFF;
    background: var(--accent-blue);
}

html.dark .wb-btn-primary {
    color: #0F172A;
}

.wb-btn-secondary {
    color: var(--accent-blue);
    background: transparent;
    border-color: var(--border);
}

.wb-btn-secondary:hover {
    background: var(--border-light);
}

/* 子 tab 的选中态（模块 B·步② 的「单脉冲 / 连续小推力」） */
.wb-btn-secondary[aria-pressed="true"] {
    color: var(--text-primary);
    border-color: var(--accent-blue);
    background: var(--border-light);
    font-weight: 600;
}

/* ── 无 JS 说明块（<noscript> 内）：仅在脚本关闭时可见 ─────────────────── */
.wb-noscript {
    max-width: 720px;
    margin: 0 0 2rem;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent-blue);
    border-radius: var(--radius-md);
}

.wb-noscript h2 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.wb-noscript p {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.wb-noscript p:last-child {
    margin-bottom: 0;
}

.wb-noscript a {
    color: var(--accent-blue);
}

/* 骨架版按钮点击后的即时反馈（「已记录：骨架版不发起请求」） */
.wb-status-feedback {
    color: var(--text-primary);
}

/* ── 画布 + 时间轴 ──────────────────────────────────────────────────────── */
.wb-stage {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.wb-canvas-root {
    position: relative;
    width: 100%;
    min-height: 220px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg-main);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
}

.wb-canvas-root > canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.wb-timeline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    min-height: 56px;
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.wb-timeline-label {
    font-weight: 600;
    color: var(--text-primary);
}

.wb-timeline-track {
    flex: 1 1 6rem;
    min-width: 4rem;
    height: 4px;
    border-radius: 999px;
    background: var(--border);
}

/* ── 服务状态条（T5/T6 接 /api/demo/status；本单只占位）──────────────────── */
.wb-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.wb-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--text-secondary);
    flex: 0 0 auto;
}

/* ── 入口卡（三等分网格、间距与 demos.html 列表页一致：不改网格/间距/外框）── */
.wb-cards {
    margin-top: 2.5rem;
}

.wb-cards-heading {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.wb-cards-sub {
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.wb-card {
    text-decoration: none;
    color: inherit;
}

.wb-card-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent-blue);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.wb-card-cta {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-blue);
}

/* ============================================================================
   模块 A（T4）：图表调色板 + 画布 / 星下点底图 / 读数 / 播放器 / 数据表格
   ----------------------------------------------------------------------------
   口径：reports/PROPOSAL-demos-sacas-v3.md §5.3（模块 A 输出）/ §5.7（配色与图表）/
        §5.8（无障碍与降级）。
   ⚠️ 注释里不要出现「变量名紧跟斜杠再接变量名」的写法（会提前闭合注释，见文件头）。
   ========================================================================== */

/* ── 图表附加色板（§5.7）：站点 token 之外只增这三组，深色同名覆盖 ────────── */
html {
    --viz-orbit: var(--accent-blue);
    --viz-orbit-future: var(--accent-cyan);
    --viz-earth-fill: #E3ECFB;
    --viz-earth-stroke: #9DB8E0;
    --viz-grid: rgba(30, 41, 59, 0.16);
    --viz-grid-strong: rgba(30, 41, 59, 0.30);
    --viz-text: var(--text-secondary);
    --viz-satellite: #1E293B;
    --viz-subpoint: var(--accent-indigo);
    --viz-map-fill: rgba(148, 163, 184, 0.10);
    --viz-ok: #047857;
    --viz-warn: #B45309;
    --viz-critical: #B91C1C;
    --viz-socp: #EA580C;
    --viz-baseline: #94A3B8;
    --viz-debris-1: #0EA5E9;
    --viz-debris-2: #8B5CF6;
    --viz-debris-3: #10B981;
    --viz-debris-4: #F59E0B;
    --viz-debris-5: #EF4444;
}

html.dark {
    --viz-earth-fill: #1C2B45;
    --viz-earth-stroke: #4B7BB5;
    --viz-grid: rgba(241, 245, 249, 0.14);
    --viz-grid-strong: rgba(241, 245, 249, 0.28);
    --viz-satellite: #F1F5F9;
    --viz-map-fill: rgba(148, 163, 184, 0.10);
    --viz-ok: #34D399;
    --viz-warn: #FBBF24;
    --viz-critical: #F87171;
}

/* ── 画布焦点（键盘路径：面板 → 画布 → 时间轴）────────────────────────────── */
.wb-canvas-root:focus-visible,
.wb-map-canvas:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* ── 画布 + 星下点底图 + 读数：一行的两栏（窄屏叠成单栏）──────────────────── */
.wb-stage-row {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: stretch;
}

@media (max-width: 900px) {
    .wb-stage-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

.wb-map {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    min-width: 0;
}

.wb-map-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1;
    min-height: 120px;
    overflow: hidden;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.wb-map-canvas > canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.wb-map figcaption {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* ── 读数区（周期 / J2 漂移 / 星下点 / 模型 / 请求耗时）──────────────────── */
.wb-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
    align-content: start;
    min-width: 0;
}

.wb-fact {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.45rem 0.6rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    min-width: 0;
}

.wb-fact dt {
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--text-secondary);
}

.wb-fact dd {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem;
    margin: 0;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.wb-unit {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ── 时间轴 + 播放器 ────────────────────────────────────────────────────── */
.wb-player {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    min-width: 0;
}

.wb-icon-btn {
    appearance: none;
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.wb-icon-btn:hover {
    background: var(--border-light);
}

.wb-player-speed {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.wb-select-inline {
    width: auto;
    min-height: 44px;
    padding: 0.35rem 0.5rem;
}

.wb-slider {
    flex: 1 1 8rem;
    min-width: 6rem;
    min-height: 44px;
    accent-color: var(--accent-blue);
}

.wb-player-clock {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
    min-width: 4.5rem;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.wb-btn-compact {
    font-size: 0.85rem;
    padding: 0.45rem 0.7rem;
}

/* ── 数据表格视图（画布的等价文本替代，§5.8）────────────────────────────── */
.wb-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    padding: 0.25rem 0.5rem 0.5rem;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.wb-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.wb-data-table caption {
    caption-side: top;
    padding: 0.45rem 0.15rem;
    text-align: left;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.wb-data-table th,
.wb-data-table td {
    padding: 0.3rem 0.5rem;
    text-align: right;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.wb-data-table th {
    font-weight: 600;
    color: var(--text-primary);
}

.wb-data-table th .wb-unit {
    margin-left: 0.2rem;
}

.wb-data-table tbody tr:last-child td {
    border-bottom: none;
}

/* ── 服务状态条的实时态（模块 A 的请求状态）─────────────────────────────── */
.wb-status-live {
    color: var(--text-primary);
}

[data-wb-state="live"] .wb-status-dot {
    background: var(--viz-ok);
}

[data-wb-state="local"] .wb-status-dot {
    background: var(--accent-blue);
}

[data-wb-state="invalid"] .wb-status-dot {
    background: var(--viz-warn);
}

[data-wb-state="error"] .wb-status-dot {
    background: var(--viz-critical);
}

/* ============================================================================
   模块 B · 步骤 ①（T6）：三段式等待 / 指标卡 / 繁忙提示 / 关于本演示 / 算力标注
   ----------------------------------------------------------------------------
   口径：reports/PROPOSAL-demos-sacas-v3.md §5.5（指标卡）/ §5.6（三段式等待）/
        §5.9（算力标注三处）/ §3.3（队列满提示）。
   约束：只用站内 token（--bg-main/--bg-card/--border/--text-primary/--text-secondary/
        --accent-blue/--radius-*/--transition-fast）与 §5.7 的图表附加色（--viz-ok/
        --viz-warn/--viz-critical/--viz-orbit）。不新增色板；深色态由 html.dark 覆盖。
   ========================================================================== */

/* ── 状态条：算力标注 + 上次求解（§5.9 位置一）────────────────────────────── */
.wb-status-sep {
    color: var(--text-secondary);
    opacity: 0.55;
}

.wb-status-hw {
    color: var(--text-secondary);
}

.wb-status-solve {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
}

.wb-status-value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text-primary);
}

/* ── 场景操作栏：实时作业提示行 / 繁忙提示（§3.3）────────────────────────── */
.wb-scene-note {
    min-height: 1.3em;
}

.wb-busy {
    margin-top: 0.5rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-main);
    border: 1px solid var(--viz-warn);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
}

.wb-busy[hidden] {
    display: none;
}

.wb-busy-text {
    margin: 0;
}

.wb-busy-link {
    display: inline-block;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: var(--accent-blue);
    text-decoration: none;
}

.wb-busy-link:hover,
.wb-busy-link:focus-visible {
    text-decoration: underline;
}

.wb-presets-source {
    font-style: italic;
}

/* ── 三段式等待（§5.6）：进度条 + 百分比 + 算力说明（§5.9 位置二）────────── */
.wb-wait {
    padding: 0.6rem 0.75rem;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.wb-wait[hidden],
.wb-metrics[hidden] {
    display: none;
}

.wb-wait-title {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    margin: 0 0 0.45rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.wb-wait-percent {
    font-variant-numeric: tabular-nums;
}

.wb-wait-bar {
    height: 6px;
    overflow: hidden;
    background: var(--border);
    border-radius: 999px;
}

.wb-wait-bar::after {
    content: '';
    display: block;
    height: 100%;
    width: var(--wb-progress, 0%);
    background: var(--viz-orbit);
    transition: width var(--transition-fast);
}

.wb-wait-note {
    margin: 0.5rem 0 0;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* ── 指标卡（§5.5 的 T6 四项）───────────────────────────────────────────── */
.wb-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.6rem;
    margin: 0;
}

.wb-metric {
    padding: 0.6rem 0.7rem;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.wb-metric dt {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
}

.wb-metric dd {
    margin: 0.25rem 0 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.wb-metric dd .wb-unit {
    margin-left: 0.25rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.wb-metric-verdict[data-wb-verdict="safe"] {
    color: var(--viz-ok);
}

.wb-metric-verdict[data-wb-verdict="collision"] {
    color: var(--viz-critical);
}

.wb-metric-verdict[data-wb-verdict="timeout"] {
    color: var(--viz-warn);
}

/* ── 「关于本演示」折叠块（§5.9 位置三）────────────────────────────────── */
.wb-about {
    margin-top: 2rem;
    padding: 0.75rem 1rem;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.wb-about summary {
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.wb-about summary:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.wb-about-list {
    display: grid;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    font-size: 0.82rem;
}

.wb-about-row {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0.6rem;
}

.wb-about-row dt {
    color: var(--text-secondary);
}

.wb-about-row dd {
    margin: 0;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .wb-about-row {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wb-wait-bar::after {
        transition: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   T7 · 模块 B · 步骤 ②（三策略对比 / 注意力条 / 播放器 / 单脉冲 tab）
   配色一律取 §5.7 的 var(--viz-*)：NN 蓝、不机动灰、SOCP 橙、碎片 5 色。
   ══════════════════════════════════════════════════════════════════════════ */

/* 两块画布同一时刻只显示一块（module-solve.js 切换 hidden） */
.wb-canvas-root[hidden],
.wb-compare[hidden],
.wb-wait[hidden],
.wb-metrics[hidden],
.wb-verdict-badge[hidden] {
    display: none !important;
}

.wb-canvas-root[hidden] + .wb-canvas-root:not([hidden]) {
    margin-top: 0;
}

/* ── 判定徽标 + 求解状态行 ─────────────────────────────────────────────── */
.wb-solve-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.5rem;
}

.wb-verdict-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    font-size: 0.85rem;
    font-weight: 700;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 999px;
}

/* ── 指标卡里的次级数值（SOCP 的 Σ|Δv|）────────────────────────────────── */
.wb-metric-sub {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ── 对比条（NN vs SOCP 的累计 ΔV）─────────────────────────────────────── */
.wb-compare {
    display: grid;
    gap: 0.35rem;
    padding: 0.6rem 0.75rem;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.wb-compare-title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.wb-compare-row {
    display: grid;
    grid-template-columns: 3.2rem 1fr 5.5rem;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.wb-compare-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
}

.wb-compare-track {
    position: relative;
    display: block;
    height: 10px;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
}

.wb-compare-bar-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition: width var(--transition-fast);
}

.wb-compare-bar-fill[data-strategy="nn"] {
    background: var(--viz-orbit);
}

.wb-compare-bar-fill[data-strategy="socp"] {
    background: var(--viz-socp);
}

.wb-compare-value {
    font-size: 0.78rem;
    text-align: right;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── 图例（HTML 版；画布内另有一份，见 viz.js drawLegend）──────────────── */
.wb-legend {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wb-legend li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.wb-legend-line {
    flex: 0 0 auto;
    width: 30px;
    height: 0;
    border-top-width: 3px;
    border-top-style: solid;
}

.wb-legend-line[data-strategy="nn"] {
    border-top-color: var(--viz-orbit);
}

.wb-legend-line[data-strategy="baseline"] {
    border-top-color: var(--viz-baseline);
    border-top-style: dashed;
    border-top-width: 2px;
}

.wb-legend-line[data-strategy="socp"] {
    border-top-color: var(--viz-socp);
}

/* ── 注意力条（逐碎片权重，随播放变化）────────────────────────────────── */
.wb-attn {
    display: grid;
    gap: 0.3rem;
    margin-top: 0.5rem;
}

.wb-attn-slot {
    display: grid;
    grid-template-columns: 1.8rem 1fr 3rem;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.wb-attn-label {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.wb-attn-track {
    display: block;
    height: 8px;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
}

.wb-attn-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition: width 120ms linear;
}

.wb-attn-slot[data-attn-color="1"] .wb-attn-fill { background: var(--viz-debris-1); }
.wb-attn-slot[data-attn-color="2"] .wb-attn-fill { background: var(--viz-debris-2); }
.wb-attn-slot[data-attn-color="3"] .wb-attn-fill { background: var(--viz-debris-3); }
.wb-attn-slot[data-attn-color="4"] .wb-attn-fill { background: var(--viz-debris-4); }
.wb-attn-slot[data-attn-color="5"] .wb-attn-fill { background: var(--viz-debris-5); }

.wb-attn-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.wb-attn-sum {
    margin: 0.3rem 0 0;
}

/* ── ΔV 扫描曲线容器 ───────────────────────────────────────────────────── */
.wb-sweep {
    position: relative;
    width: 100%;
    min-height: 160px;
    aspect-ratio: 16 / 10;
    margin-top: 0.5rem;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.wb-sweep > canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── 时间轴（range + TCA 刻度）─────────────────────────────────────────── */
.wb-timeline-wrap {
    position: relative;
    flex: 1 1 8rem;
    min-width: 6rem;
    display: block;
}

.wb-timeline-range {
    margin: 0;
}

.wb-ticks {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 8px;
    pointer-events: none;
}

.wb-tick {
    position: absolute;
    top: 0;
    width: 2px;
    height: 8px;
    border-radius: 1px;
    background: var(--viz-warn);
    transform: translateX(-1px);
}

.wb-timeline-time {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── 页脚求解器/版本标注（§4.4 版本标注）───────────────────────────────── */
.wb-solver-note {
    margin: 1.5rem 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* ── 紧凑读数区（单脉冲 tab 三行）──────────────────────────────────────── */
.wb-facts-compact {
    grid-template-columns: 1fr;
}

/* ── 390px：对比条与注意力条不产生横向滚动 ─────────────────────────────── */
@media (max-width: 640px) {
    .wb-compare-row {
        grid-template-columns: 2.6rem 1fr 4.5rem;
    }

    .wb-attn-slot {
        grid-template-columns: 1.6rem 1fr 2.6rem;
    }

    .wb-sweep {
        min-height: 140px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wb-attn-fill,
    .wb-compare-bar-fill {
        transition: none;
    }
}