/* U07 作战室五区布局 · 局部作用域样式
 *
 * 纪律：
 * 1. 本文件**只消费** `--uf-*` token，不定义/不覆盖任何全局 token；九词状态色与
 *    `.b-*` 徽标类名沿用 U02（`frontend/src/ui_foundation/ui-foundation.css`）。
 * 2. 不引入 web 字体、不用玻璃拟态、不用渐变文字、不用侧边色条、无斑马纹；
 *    卡片圆角 ≤ `--uf-radius-card`（12px）。
 * 3. 断点与 `layout/responsive.rs` 一一对应：`≤730` 单列堆叠 / `731–1100` 双列（左区
 *    换行到第二行）/ `≥1101` 三列 20/50/30。关键区（顶栏、右区、停止入口）任何断点都不隐藏。
 * 4. 数值列右对齐 + `tabular-nums`；只读紧凑行 28–32px，交互目标 ≥40px。
 * 5. `prefers-reduced-motion: reduce` 关闭过渡与动画。
 */

.wr-root {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--uf-unit);
  min-height: 100vh;
  padding: var(--uf-unit);
  background: var(--uf-bg);
  color: var(--uf-text);
  font: var(--uf-font-body) / 1.6 var(--uf-font);
}

.wr-root :focus-visible {
  outline: 2px solid var(--uf-accent);
  outline-offset: 2px;
}

/* ── 顶栏：环境 / 权限 / 时效 / 告警 / 停止入口；永不消失 ── */
.wr-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  min-height: var(--wr-topbar-h, 56px);
  padding: 10px 14px;
  background: var(--uf-surface);
  border: 1px solid var(--uf-divider);
  border-radius: var(--uf-radius-card);
}

.wr-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.wr-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge {
  padding: 2px 8px;
  border-radius: var(--uf-radius-pill);
  font-size: var(--uf-font-meta);
  white-space: nowrap;
  color: var(--uf-on-badge);
  background: var(--uf-demo);
}

.badge.b-available,
.badge.b-live { background: var(--uf-ok); }
.badge.b-process { background: var(--uf-info); }
.badge.b-paper { background: var(--uf-paper); border-radius: var(--uf-radius-button); }
.badge.b-demo,
.badge.b-disabled { background: var(--uf-demo); }
.badge.b-shadow,
.badge.b-degraded { background: var(--uf-warn); }
.badge.b-unavailable,
.badge.b-unknown { background: var(--uf-err); }

.wr-run {
  display: flex;
  gap: 12px;
  margin-left: auto;
  color: var(--uf-muted);
  font-size: var(--uf-font-meta);
}

/* 停止入口：40px 目标、任何断点都在顶栏可见 */
.wr-stop {
  min-height: 40px;
  padding: 8px 14px;
  font: inherit;
  color: var(--uf-err);
  background: transparent;
  border: 1px solid var(--uf-err);
  border-radius: var(--uf-radius-button);
  cursor: pointer;
  transition: background var(--uf-motion);
}
.wr-stop:hover { background: var(--uf-surface-hover); }
.wr-stop.is-halted { color: var(--uf-on-badge); background: var(--uf-warn); border-color: var(--uf-warn); }

/* ── 中部三列 ── */
.wr-body {
  display: grid;
  gap: var(--uf-unit);
  min-height: 0;
  align-items: start;
}
.wr-body[data-columns="3"] {
  grid-template-columns: minmax(0, 20fr) minmax(0, 50fr) minmax(0, 30fr);
}
.wr-body[data-columns="2"] {
  grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
  grid-template-areas: "center right" "left left";
}
.wr-body[data-columns="1"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "center" "right" "left";
}

.wr-region {
  min-width: 0;
  padding: 12px;
  background: var(--uf-surface);
  border: 1px solid var(--uf-divider);
  border-radius: var(--uf-radius-card);
}

.wr-left, .wr-center, .wr-right { overflow: auto; max-height: 100%; }
.wr-body[data-columns="2"] .wr-left { grid-area: left; }
.wr-body[data-columns="2"] .wr-center { grid-area: center; }
.wr-body[data-columns="2"] .wr-right { grid-area: right; }
.wr-body[data-columns="1"] .wr-left { grid-area: left; }
.wr-body[data-columns="1"] .wr-center { grid-area: center; }
.wr-body[data-columns="1"] .wr-right { grid-area: right; }

.wr-region-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.wr-region-head h2 {
  margin: 0;
  font-size: var(--uf-font-body);
  font-weight: 600;
}

.wr-meta,
.wr-collapsed-hint,
.wr-panel-note {
  margin: 0;
  color: var(--uf-muted);
  font-size: var(--uf-font-meta);
}

.wr-sub {
  margin: 12px 0 6px;
  font-size: var(--uf-font-meta);
  font-weight: 600;
  color: var(--uf-muted);
}

.wr-collapse,
.wr-btn,
.wr-help-btn,
.wr-link {
  min-height: 40px;
  padding: 8px 12px;
  font: inherit;
  color: var(--uf-text);
  background: transparent;
  border: 1px solid var(--uf-divider);
  border-radius: var(--uf-radius-button);
  cursor: pointer;
  transition: background var(--uf-motion), border-color var(--uf-motion);
}
.wr-collapse:hover,
.wr-btn:hover,
.wr-help-btn:hover,
.wr-link:hover { background: var(--uf-surface-hover); }
.wr-collapse { margin-left: auto; }
.wr-link { min-height: 28px; padding: 2px 0; border: 0; text-align: left; }

.wr-list { list-style: none; margin: 0; padding: 0; }
.wr-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 0;
  border-bottom: 1px solid var(--uf-divider);
  font-size: var(--uf-font-meta);
}
.wr-list li:last-child { border-bottom: 0; }
.wr-src-name { flex: 1; }
.wr-license, .wr-ref { color: var(--uf-muted); }

/* 空态三件套：说明 + 引导/禁用理由 + 有来源的状态 */
.wr-empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  padding: 16px 14px;
  border: 1px dashed var(--uf-border);
  border-radius: var(--uf-radius-button);
  color: var(--uf-muted);
  font-size: var(--uf-font-meta);
}
.wr-empty strong { color: var(--uf-text); font-weight: 600; }

/* ── 中央：六阶段二维流程 ── */
.wr-scenarios {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.wr-scenario {
  min-height: 40px;
  padding: 6px 10px;
  font: inherit;
  font-size: var(--uf-font-meta);
  color: var(--uf-text);
  background: transparent;
  border: 1px solid var(--uf-divider);
  border-radius: var(--uf-radius-button);
  cursor: pointer;
  transition: background var(--uf-motion), border-color var(--uf-motion);
}
.wr-scenario:hover { background: var(--uf-surface-hover); }
.wr-scenario.is-active {
  border-color: var(--uf-accent);
  color: var(--uf-accent);
  background: var(--uf-surface-hover);
}

.wr-banner {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: var(--uf-surface-hover);
  border: 1px solid var(--uf-err);
  border-radius: var(--uf-radius-button);
  color: var(--uf-err);
  font-size: var(--uf-font-meta);
}

.wr-stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--uf-unit);
  margin: 0;
  padding: 0;
  list-style: none;
}
.wr-stage {
  padding: 10px;
  background: var(--uf-bg);
  border: 1px solid var(--uf-divider);
  border-radius: var(--uf-radius-button);
}
.wr-stage.is-selected { border-color: var(--uf-accent); background: var(--uf-surface-hover); }
.wr-stage.is-halted { border-color: var(--uf-warn); }
.wr-stage-head { display: flex; align-items: center; gap: 6px; }
.wr-stage-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--uf-radius-pill);
  background: var(--uf-surface-hover);
  font-size: var(--uf-font-meta);
}
.wr-stage-label { flex: 1; font-weight: 600; }
.wr-stage-summary {
  margin: 6px 0 0;
  color: var(--uf-muted);
  font-size: var(--uf-font-meta);
  line-height: 1.7;
}
.wr-two-d {
  margin: 10px 0 0;
  color: var(--uf-muted);
  font-size: var(--uf-font-meta);
}

/* ── 右区：五标签 ── */
.wr-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 10px;
  overflow-x: auto;
  border-bottom: 1px solid var(--uf-divider);
}
.wr-tab {
  min-height: 40px;
  padding: 8px 10px;
  font: inherit;
  font-size: var(--uf-font-meta);
  color: var(--uf-muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--uf-motion), border-color var(--uf-motion);
}
.wr-tab:hover { color: var(--uf-text); }
.wr-tab.is-active { color: var(--uf-text); border-bottom-color: var(--uf-accent); }

.wr-tab-note {
  margin: 0 0 8px;
  padding: 6px 10px;
  border: 1px solid var(--uf-warn);
  border-radius: var(--uf-radius-button);
  color: var(--uf-warn);
  font-size: var(--uf-font-meta);
}

.wr-tabpanel { font-size: var(--uf-font-meta); }
.wr-panel { display: flex; flex-direction: column; gap: 10px; }
.wr-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; }
.wr-kv dt { color: var(--uf-muted); }
.wr-kv dd { margin: 0; text-align: right; }
.wr-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── 表格：数值右对齐 + 等宽数字；只读紧凑行 ── */
.wr-table { width: 100%; border-collapse: collapse; font-size: var(--uf-font-meta); }
.wr-table caption {
  caption-side: top;
  text-align: left;
  color: var(--uf-muted);
  padding-bottom: 6px;
}
.wr-table th,
.wr-table td {
  padding: 4px 8px;
  min-height: 28px;
  line-height: 20px;
  font-weight: 400;
  text-align: left;
  border-bottom: 1px solid var(--uf-divider);
}
.wr-table thead th { color: var(--uf-muted); font-weight: 600; }
.number,
.mono { font-variant-numeric: tabular-nums lining-nums; }
.wr-table th.number,
.wr-table td.number,
.wr-kv dd.number { text-align: right; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ── 底部时间线 ── */
.wr-bottom .wr-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wr-tl-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 10px;
  min-height: 28px;
  align-items: center;
  padding: 2px 0;
  font-size: var(--uf-font-meta);
  border-bottom: 1px solid var(--uf-divider);
}
.wr-tl-row:last-child { border-bottom: 0; }
.wr-tl-row.is-active { background: var(--uf-surface-hover); }
.wr-time, .wr-cat { color: var(--uf-muted); }

/* ── 帮助面板（dialog 语义；焦点可见）── */
.wr-help-btn { margin-top: var(--uf-unit); }
.wr-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  min-width: 320px;
  max-width: 90vw;
  padding: 16px;
  background: var(--uf-surface-hover);
  border: 1px solid var(--uf-border);
  border-radius: var(--uf-radius-card);
  box-shadow: 0 0 0 1px var(--uf-divider) inset, 0 12px 32px rgb(0 0 0 / 0.5);
}
.wr-modal h2 { margin: 0 0 10px; font-size: var(--uf-font-body); }

/* ── 断点：与 responsive.rs 一一对应 ── */

/* 平板 731–1100：双列 60/40，左区换行到第二行（仍可见） */
@media (max-width: 1100px) and (min-width: 731px) {
  .wr-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 手机 ≤730：单列堆叠；标签横向可滚；风险与停止入口不消失 */
@media (max-width: 730px) {
  .wr-root { min-height: 0; }
  .wr-run { margin-left: 0; width: 100%; }
  .wr-tabs { position: relative; }
  .wr-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wr-tl-row { grid-template-columns: 1fr; gap: 2px; }
}

/* 减少动效：关闭过渡与动画 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* Hidden view roots acquire display:flex when mounted: retain the HTML hidden contract. */
.wr-root [data-view][hidden] { display: none !important; }
.wr-snapshot-table { width:100%; border-collapse:collapse; font-size:var(--uf-font-meta); }
.wr-snapshot-table th,.wr-snapshot-table td { padding:6px 8px; border-bottom:1px solid var(--uf-divider); text-align:left; white-space:nowrap; }
.wr-snapshot-table tr:hover { background:var(--uf-surface-hover); }
.wr-table-scroll { overflow:auto; max-height:320px; }
.wr-snapshot-kpis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0; }
.wr-snapshot-kpis strong { display:block; font-size:var(--uf-font-kpi); font-variant-numeric:tabular-nums; }
.wr-source-record { border-bottom:1px solid var(--uf-divider); padding:8px 0; font-size:var(--uf-font-meta); }

/* Local read-only studio: geographic context remains the visual anchor. */
.wr-studio { padding:0; gap:0; grid-template-rows:auto auto minmax(0,1fr) auto; min-height:100vh; font-variant-numeric:tabular-nums lining-nums; }
.wr-studio * { box-sizing:border-box; }
.wr-studio button,.wr-studio input { font:inherit; }
.wr-studio button { cursor:pointer; }
.wr-studio h2,.wr-studio h3,.wr-studio p { margin:0; }
.wr-studio .wr-topbar { min-height:72px; padding:12px 24px; gap:32px; flex-wrap:nowrap; border:0; border-bottom:1px solid var(--uf-divider); border-radius:0; background:var(--uf-bg); }
.studio-brand { display:flex; gap:12px; align-items:center; color:var(--uf-text); text-decoration:none; font-size:20px; font-weight:650; letter-spacing:-.5px; white-space:nowrap; }
.studio-monogram { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--uf-accent); color:var(--uf-accent); font-size:26px; border-radius:8px; }
.studio-brand small { display:block; font-size:11px; font-weight:400; letter-spacing:.4px; color:var(--uf-muted); }
.studio-main-nav { display:flex; gap:24px; align-self:stretch; align-items:center; }
.studio-main-nav a,.studio-main-nav button { color:var(--uf-muted); background:none; border:0; text-decoration:none; padding:10px 0; white-space:nowrap; }
.studio-main-nav .is-active { color:var(--uf-accent); border-bottom:2px solid var(--uf-accent); }
.studio-header-actions { margin-left:auto; display:flex; gap:8px; align-items:center; }
.studio-icon-button { min-height:40px; min-width:40px; border:1px solid transparent; border-radius:6px; color:var(--uf-muted); background:transparent; padding:8px; }
.studio-icon-button:hover { color:var(--uf-text); background:var(--uf-surface-hover); }
.studio-owner { font-size:10px; padding:4px 7px; border:1px solid var(--uf-divider); color:var(--uf-muted); border-radius:4px; }
.studio-statusbar { display:flex; justify-content:space-between; gap:12px; padding:8px 24px; background:var(--uf-surface); border-bottom:1px solid var(--uf-divider); font-size:11px; }
.studio-statusbar>div:first-child { display:flex; align-items:center; gap:10px; }
.studio-statusbar strong { font-weight:500; }
.studio-status-label,.studio-asof { color:var(--uf-muted); }
.studio-separator { height:12px; border-left:1px solid var(--uf-divider); margin:0 6px; }
.studio-warning { color:var(--uf-warn); }
.wr-studio .wr-body { grid-template-columns:minmax(220px,20fr) minmax(0,50fr) minmax(300px,30fr); gap:0; align-items:stretch; }
.wr-studio .wr-region { border:0; border-radius:0; padding:20px; background:var(--uf-bg); overflow:auto; }
.wr-studio .wr-left { border-right:1px solid var(--uf-divider); display:flex; flex-direction:column; padding:20px 16px; }
.wr-studio .wr-right { border-left:1px solid var(--uf-divider); background:var(--uf-surface); }
.wr-studio .wr-center { display:flex; flex-direction:column; gap:14px; padding:24px; }
.studio-section-heading,.studio-scene-header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.studio-eyebrow { color:var(--uf-muted); font-size:11px; }
.studio-section-heading h2 { font-size:18px; font-weight:600; margin-top:3px; }
.studio-scene-header h2 { font-size:22px; font-weight:500; letter-spacing:-.5px; margin-top:4px; }
.studio-count { font-size:12px; color:var(--uf-muted); border:1px solid var(--uf-divider); border-radius:4px; padding:1px 7px; }
.studio-search { display:flex; gap:8px; align-items:center; border:1px solid var(--uf-divider); border-radius:6px; margin:20px 0 12px; padding:8px 10px; color:var(--uf-muted); }
.studio-search span { font-size:20px; line-height:1; }
.studio-search input { background:none; color:var(--uf-text); border:0; width:100%; min-width:0; outline-offset:4px; font-size:12px; }
.studio-search input::placeholder { color:var(--uf-muted); }
.studio-filters { display:flex; gap:6px; }
.studio-filters button { min-height:40px; flex:1; color:var(--uf-muted); background:transparent; border:1px solid var(--uf-divider); border-radius:4px; font-size:12px; }
.studio-filters button.is-active { background:var(--uf-surface-hover); color:var(--uf-text); border-color:var(--uf-muted); }
.studio-feed-meta { display:flex; justify-content:space-between; color:var(--uf-muted); font-size:10px; margin:18px 0 8px; }
.studio-feed { min-height:0; overflow:auto; }
.studio-news-card { display:block; width:100%; text-align:left; color:var(--uf-text); border:1px solid transparent; border-bottom-color:var(--uf-divider); background:none; padding:14px 10px; border-radius:4px; }
.studio-news-card:hover { background:var(--uf-surface); }
.studio-news-card.is-selected { border-color:var(--uf-accent); background:var(--uf-surface); }
.studio-news-top,.studio-news-bottom { display:flex; gap:8px; justify-content:space-between; align-items:center; }
.studio-news-top strong { font-size:13px; letter-spacing:.2px; }
.studio-news-top time { color:var(--uf-muted); font-size:10px; }
.studio-news-title { display:block; font-size:13px; margin:7px 0 9px; }
.studio-news-bottom { color:var(--uf-muted); font-size:10px; justify-content:flex-start; flex-wrap:wrap; }
.studio-unknown { margin-left:auto; color:var(--uf-muted); }
.studio-feed-footer { font-size:10px; color:var(--uf-muted); line-height:1.7; padding:14px 2px 0; }
.studio-view-switch { display:flex; border:1px solid var(--uf-divider); border-radius:6px; padding:3px; flex-shrink:0; }
.studio-view-switch button { border:0; background:none; color:var(--uf-muted); font-size:12px; padding:8px 12px; min-height:40px; border-radius:3px; white-space:nowrap; }
.studio-view-switch button[aria-selected=true] { color:var(--uf-text); background:var(--uf-surface-hover); }
.studio-scene-caption { display:flex; gap:8px; align-items:center; font-size:10px; color:var(--uf-muted); }
.studio-neutral-dot { width:5px; height:5px; background:var(--uf-muted); border-radius:50%; flex-shrink:0; }
.studio-caption-right { margin-left:auto; }
.studio-scene-stage { flex:1; min-height:300px; display:grid; align-items:center; border:1px solid var(--uf-divider); border-radius:8px; overflow:hidden; background:var(--uf-bg); }
.wr-studio [data-view] { min-width:0; width:100%; position:relative; }
.wr-studio .studio-scene-stage canvas { width:100%!important; max-width:none!important; height:auto!important; display:block; aspect-ratio:1.6; }
.wr-studio .u05-controls { display:flex; flex-wrap:wrap; gap:4px; padding:8px 12px; order:2; border-top:1px solid var(--uf-divider); justify-content:center; background:var(--uf-surface); }
.wr-studio .u05-control,.studio-camera-controls button { color:var(--uf-muted); font-size:11px; min-height:40px; background:transparent; border:1px solid var(--uf-divider); border-radius:4px; padding:6px 10px; }
.wr-studio .u05-control:hover,.studio-camera-controls button:hover { color:var(--uf-text); background:var(--uf-surface-hover); }
.wr-studio .u05-status { padding:8px 12px; color:var(--uf-muted); font-size:10px; }
.studio-camera-controls { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; }
.studio-pipeline { list-style:none; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0; margin:0; padding:0; border:1px solid var(--uf-divider); border-radius:6px; overflow:hidden; }
.studio-pipeline li { min-width:0; border-right:1px solid var(--uf-divider); }
.studio-pipeline li:last-child { border:0; }
.studio-pipeline button { width:100%; padding:12px 6px; background:transparent; color:var(--uf-muted); border:0; text-align:center; }
.studio-pipeline .is-selected { background:var(--uf-surface-hover); }
.studio-pipeline .is-selected strong { color:var(--uf-accent); }
.studio-stage-number { display:block; font-size:10px; margin-bottom:5px; }
.studio-pipeline strong { display:block; font-size:12px; font-weight:500; color:var(--uf-text); }
.studio-pipeline small { display:block; font-size:10px; margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.studio-chain-summary { display:flex; align-items:start; gap:20px; padding:12px 0; }
.studio-chain-summary>div { min-width:112px; }
.studio-chain-summary span { display:block; font-size:10px; color:var(--uf-muted); margin-bottom:4px; }
.studio-chain-summary strong { font-size:12px; font-weight:500; }
.studio-chain-summary p { font-size:11px; color:var(--uf-muted); line-height:1.8; max-width:70ch; }
.studio-detail-top { display:flex; justify-content:space-between; align-items:center; color:var(--uf-muted); font-size:11px; margin-bottom:20px; }
.studio-outline-badge { border:1px solid var(--uf-divider); color:var(--uf-muted); font-size:10px; padding:3px 6px; border-radius:4px; }
.studio-selection-detail h2 { font-size:22px; font-weight:500; letter-spacing:-.4px; margin-bottom:8px; }
.studio-subtle { color:var(--uf-muted); font-size:11px; line-height:1.8; }
.studio-detail-kv { margin:16px 0 0; font-size:11px; }
.studio-detail-kv div { display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--uf-divider); }
.studio-detail-kv dt { color:var(--uf-muted); flex-shrink:0; }
.studio-detail-kv dd { margin:0; text-align:right; overflow-wrap:anywhere; }
.studio-detail-note { color:var(--uf-muted); font-size:11px; line-height:1.8; margin-top:12px!important; }
.studio-selected-status { color:var(--uf-warn); font-size:13px; margin:12px 0; }
.wr-studio .wr-tabs { margin:24px -20px 0; padding:0 12px; gap:0; border-top:1px solid var(--uf-divider); border-bottom:1px solid var(--uf-divider); overflow:auto; }
.wr-studio .wr-tab { font-size:11px; flex:1; min-height:44px; padding:10px 6px; white-space:nowrap; border-radius:0; color:var(--uf-muted); border:0; background:none; }
.wr-studio .wr-tab.is-active { color:var(--uf-text); box-shadow:inset 0 -2px var(--uf-accent); }
.wr-studio .wr-tabpanel { padding:20px 0 0; background:none; border:0; }
.studio-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; margin-bottom:24px; }
.studio-metrics span,.studio-metrics small { display:block; font-size:11px; color:var(--uf-muted); }
.studio-metrics strong { display:block; font-size:var(--uf-font-kpi); font-weight:500; letter-spacing:-1px; line-height:1.6; }
.studio-metrics small { font-size:10px; }
.studio-business-state { padding:14px; background:var(--uf-bg); border:1px solid var(--uf-divider); border-radius:6px; font-size:12px; }
.studio-business-state p { font-size:11px; line-height:1.8; color:var(--uf-muted); margin-top:8px; }
.studio-assets { margin-top:22px; }
.studio-assets h3,.studio-panel-heading h3,.studio-model-header h3,.studio-evidence-block h3 { font-size:14px; font-weight:500; margin-bottom:12px; }
.studio-assets>div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:12px 0; font-size:11px; color:var(--uf-muted); }
.studio-assets strong { font-size:18px; color:var(--uf-text); font-weight:500; }
.studio-assets small { font-size:10px; color:var(--uf-muted); }
.studio-panel-heading { display:flex; justify-content:space-between; }
.studio-panel-heading span { color:var(--uf-muted); font-size:11px; }
.studio-order-list { max-height:340px; overflow:auto; }
.studio-order-card { display:block; width:100%; text-align:left; border:0; border-bottom:1px solid var(--uf-divider); padding:12px 0; color:var(--uf-text); background:none; }
.studio-order-card>div { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; }
.studio-order-card strong { font-weight:500; }
.studio-state { color:var(--uf-warn); font-size:10px; }
.studio-order-card small,.studio-order-card>span { color:var(--uf-muted); display:inline-block; margin:8px 12px 0 0; font-size:10px; }
.studio-panel-note,.studio-model-header p,.studio-evidence-block p { margin-top:12px!important; font-size:11px; color:var(--uf-muted); line-height:1.8; }
.studio-evidence-block h3,.studio-model-header h3 { margin-top:14px; }
.studio-evidence-block ol { padding-left:18px; font-size:11px; line-height:2.4; color:var(--uf-muted); }
.studio-task-card { padding:12px 0; border-bottom:1px solid var(--uf-divider); }
.studio-task-card>div { display:flex; justify-content:space-between; font-size:12px; }
.studio-task-card>div span,.studio-task-card small { color:var(--uf-muted); font-size:10px; }
.studio-task-card p { margin:5px 0; font-size:11px; color:var(--uf-muted); overflow-wrap:anywhere; }
.studio-raw-records { margin-top:24px; border-top:1px solid var(--uf-divider); padding-top:12px; }
.studio-raw-records summary { color:var(--uf-muted); cursor:pointer; font-size:11px; min-height:32px; }
.studio-raw-records h3 { margin:14px 0 8px; font-size:12px; }
.studio-empty { padding:24px 12px; text-align:center; }
.studio-empty>span { display:block; font-size:28px; color:var(--uf-muted); margin-bottom:12px; }
.studio-empty strong { font-size:13px; font-weight:500; }
.studio-empty p { font-size:11px; color:var(--uf-muted); margin-top:8px; line-height:1.8; }
.studio-timeline { border-top:1px solid var(--uf-divider); background:var(--uf-surface); padding:12px 24px; }
.studio-timeline-heading { display:flex; justify-content:space-between; align-items:center; font-size:11px; margin-bottom:10px; }
.studio-timeline-heading strong { font-weight:500; }
.studio-timeline-heading span { color:var(--uf-muted); font-size:10px; }
.studio-timeline-track { display:flex; overflow:auto; gap:0; }
.studio-timeline-event { flex:1 0 150px; min-width:0; background:none; border:0; border-right:1px solid var(--uf-divider); padding:0 12px; text-align:left; color:var(--uf-text); }
.studio-timeline-event:first-child { padding-left:0; }
.studio-timeline-event time { display:block; color:var(--uf-muted); font-size:10px; }
.studio-timeline-event span { display:block; margin:4px 0; font-size:11px; }
.studio-timeline-event strong { display:block; color:var(--uf-warn); font-size:10px; font-weight:400; }
.studio-provenance { margin-top:10px; font-size:10px; color:var(--uf-muted); }
.studio-provenance summary { cursor:pointer; }
.studio-provenance p { margin:8px 0; }
.studio-provenance code { overflow-wrap:anywhere; }
.studio-preferences { position:fixed; top:72px; right:20px; width:320px; z-index:100; background:var(--uf-surface-hover); border:1px solid var(--uf-divider); border-radius:8px; padding:20px; box-shadow:0 16px 48px rgb(0 0 0 / .45); }
.studio-preferences header { display:flex; justify-content:space-between; align-items:center; }
.studio-preferences button { background:var(--uf-bg); color:var(--uf-text); border:1px solid var(--uf-divider); padding:8px 12px; border-radius:4px; min-height:40px; }
.studio-preferences p { margin:14px 0; font-size:12px; color:var(--uf-muted); line-height:1.8; }
.studio-preferences a { display:block; margin:12px 0; color:var(--uf-accent); font-size:12px; }
.wr-studio[data-density=comfortable] .studio-news-card { padding-top:20px; padding-bottom:20px; }
.wr-studio[data-density=comfortable] .studio-order-card { padding-top:18px; padding-bottom:18px; }
@media(min-width:1101px) { .wr-studio { height:100vh; min-height:800px; } .wr-studio .studio-feed { flex:1; } }
@media(max-width:1100px) and (min-width:731px) { .wr-studio .wr-body { grid-template-columns:minmax(0,60fr) minmax(0,40fr); } .wr-studio .wr-left { max-height:420px; } .studio-main-nav { gap:12px; } .wr-studio .wr-topbar { gap:16px; padding:12px 16px; } .studio-brand { font-size:17px; } .studio-brand small { font-size:10px; } .studio-owner { display:none; } .studio-scene-header { flex-wrap:wrap; } }
@media(max-width:730px) {
 .wr-studio { height:auto; } .wr-studio .wr-topbar { min-height:64px; padding:10px 16px; gap:8px; flex-wrap:wrap; }
 .studio-brand { font-size:18px; } .studio-brand small { font-size:10px; } .studio-main-nav { width:100%; order:3; gap:24px; font-size:12px; }
 .studio-owner { display:none; } .studio-header-actions { gap:0; } .studio-icon-button { min-width:36px; padding:6px; font-size:12px; }
 .studio-statusbar { padding:8px 16px; flex-wrap:wrap; gap:4px; font-size:10px; } .studio-status-label { display:none; } .studio-asof { font-size:9px; }
 .wr-studio .wr-body { grid-template-columns:minmax(0,1fr); } .wr-studio .wr-region { padding:16px; overflow:visible; }
 .wr-studio .wr-left { border:0; border-top:1px solid var(--uf-divider); } .studio-feed { max-height:440px; }
 .wr-studio .wr-right { border:0; border-top:1px solid var(--uf-divider); }
 .wr-studio .wr-center { gap:12px; } .studio-scene-header h2 { font-size:20px; } .studio-scene-header { align-items:center; }
 .studio-view-switch button { padding:6px 8px; font-size:11px; min-height:40px; } .studio-caption-right { display:none; }
 .studio-scene-stage { min-height:0; } .studio-chain-summary { gap:16px; padding:4px 0; }
 .studio-pipeline button { padding:10px 3px; } .studio-pipeline strong { font-size:11px; } .studio-pipeline small { font-size:9px; }
 .wr-studio .wr-tabs { margin-left:-16px; margin-right:-16px; } .studio-timeline { padding:16px; }
 .studio-preferences { top:68px; right:12px; width:min(320px,calc(100vw - 24px)); }
}
.wr-studio { grid-template-columns:minmax(0,1fr); width:100%; max-width:100%; min-width:0; }
.wr-studio .wr-body,.wr-studio .studio-scene-stage { min-width:0; }
.wr-studio .u05-controls { order:1; }
.studio-scene-diagnostics { order:2; padding:6px 12px; color:var(--uf-muted); font-size:10px; border-top:1px solid var(--uf-divider); overflow-wrap:anywhere; }
.studio-scene-diagnostics summary { cursor:pointer; min-height:28px; display:flex; align-items:center; }
.wr-studio .u04-root,.wr-studio .u05-root { gap:0; }
/* The stage and GL clear colour agree; controls never compete with canvas height. */
.wr-studio .studio-scene-stage { background:#0d0d0f; }
.wr-studio .studio-scene-stage canvas { border:0; border-radius:0; }
@media(min-width:1101px) {
 .wr-studio .studio-scene-stage { align-items:stretch; }
 .wr-studio .u05-root { height:100%; min-height:0; display:grid; grid-template-rows:minmax(0,1fr) auto auto; }
 .wr-studio .studio-scene-stage .u05-canvas { grid-row:1; height:100%!important; width:auto!important; max-width:100%!important; min-height:0; margin-inline:auto; justify-self:center; aspect-ratio:1.6; }
 .wr-studio .u05-controls { grid-row:2; }
 .wr-studio .u05-root .studio-scene-diagnostics { grid-row:3; }
 .wr-studio .u05-2d:empty { display:none; }
 .wr-studio .studio-scene-stage:has([data-view=graph]:not([hidden])) { flex:0 0 auto; }
}