/* 索引选择判官 —— 应用外壳
 *
 * 形态取自 Desmos / Falstad：工具独占视口，100vh、全幅、整页不滚动，
 * 停靠区窄、画布大。讲解不挂在工具屁股后面，另起指南页。
 * 颜色全部走 trove.css 的矿物色 token，深浅双模自动跟随。
 */

/* ══ 外壳 ══════════════════════════════════════════════════════ */
html, body.app { height: 100%; }
body.app {
  margin: 0; overflow: hidden;
  display: flex; flex-direction: column;
  font-size: 15px;
  /* 纵轴刻度槽的宽 + 画布框的边框宽。决策带和全景共用同一根横轴，
     必须缩进同样的距离才对得上，所以这两个数只能有一个出处。 */
  --vgut: 62px;
  --vbd: 1px;
}

.topbar {
  flex: 0 0 auto; height: 48px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.topbar .mark {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
  color: var(--sub); text-decoration: none; white-space: nowrap;
}
.topbar .mark b { color: var(--ink); font-weight: 600; }
.topbar .sp { flex: 1 1 auto; }
.topbar .ttl { font-size: 14px; font-weight: 600; white-space: nowrap; }
.topbar a.plain { color: var(--sub); font-size: 12.5px; text-decoration: none; white-space: nowrap; }
.topbar a.plain:hover { color: var(--lapis); }

.shell {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: 304px minmax(0, 1fr);
}

/* ══ 左坞 ══════════════════════════════════════════════════════ */
.dock {
  min-width: 0; overflow-y: auto; overscroll-behavior: contain;
  border-right: 1px solid var(--line); background: var(--surface);
}
.dock::-webkit-scrollbar { width: 8px; }
.dock::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 2px solid var(--surface); }

.grp { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.grp > h3 {
  margin: 0 0 9px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sub); font-family: var(--font-mono); font-weight: 500;
  display: flex; align-items: center; gap: 7px;
}
.grp > h3 .n {
  width: 14px; height: 14px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--surface-2); color: var(--ink-2); font-size: 9px; letter-spacing: 0; flex: 0 0 auto;
}
.grp > h3 .sp { flex: 1 1 auto; }
.grp > h3 .act {
  border: 0; background: transparent; color: var(--lapis); cursor: pointer;
  font: inherit; font-size: 10px; letter-spacing: .06em; padding: 0;
}

/* 读数：显示即输入。
   静止态就要有虚下划线 —— 只在 hover 才显形的话，屏幕上十几个可编辑的数
   在用户眼里全是死字，「界面上没有参数面板」这个卖点等于没兑现。 */
.ro {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--ink); cursor: pointer; border-bottom: 1px dashed var(--line-strong);
  transition: border-color .15s, color .15s;
}
.ro:hover { border-bottom-color: var(--lapis); color: var(--lapis); }
.ro:focus-visible { outline: 2px solid var(--lapis); outline-offset: 2px; border-radius: 2px; }
.ro.editing { border-bottom-color: var(--lapis); }
input.roedit {
  font-family: var(--font-mono); font-size: inherit; color: var(--ink);
  background: var(--bg); border: 1px solid var(--lapis); border-radius: 4px;
  padding: 0 4px; width: 9ch; outline: none;
}

.kv { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; margin: 0 0 5px; }
.kv .k { color: var(--ink-2); }
.kv .v { margin-left: auto; font-size: 12.5px; }
.hint { font-size: 10.5px; color: var(--sub); line-height: 1.55; margin: 5px 0 0; }
.hint b { color: var(--ink-2); font-weight: 600; }

/* 来源徽章：推算 / 手填 / 实测。任何派生量都必须挂一个 */
.src {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em;
  padding: 1px 5px; border-radius: 999px; margin-left: 5px; vertical-align: 1px;
  border: 1px solid var(--line-strong); color: var(--sub); white-space: nowrap;
}
.src.calc  { border-color: var(--lapis-edge);     color: var(--lapis-ink);  background: var(--lapis-tint); }
.src.typed { border-color: var(--pyrite-edge);    color: var(--pyrite);     background: var(--pyrite-tint); }
.src.real  { border-color: var(--malachite-edge); color: var(--malachite);  background: var(--malachite-tint); }
.src.demo  { border-color: var(--hematite-edge);  color: var(--hematite);   background: var(--hematite-tint); }

/* 行尺：一行的字节布局 */
.ruler { display: flex; height: 26px; border-radius: 5px; overflow: hidden;
         border: 1px solid var(--line); background: var(--surface-2); margin: 2px 0 6px; }
.ruler .seg {
  min-width: 3px; display: grid; place-items: center; overflow: hidden;
  font-family: var(--font-mono); font-size: 9.5px; color: var(--surface);
  border-right: 1px solid var(--surface); white-space: nowrap;
}
.ruler .seg:last-child { border-right: 0; }
.ruler .seg.hdr { background: var(--sub); }
.ruler .seg.pad { background: var(--line-strong); color: var(--ink-2); }
.ruler .seg.on  { outline: 2px solid var(--ink); outline-offset: -2px; }

/* 列表 */
.cols { display: grid; gap: 3px; }
.col {
  display: grid; grid-template-columns: minmax(0,1fr) 44px 62px 18px;
  gap: 6px; align-items: center; padding: 3px 5px; border-radius: 5px;
  font-size: 11.5px; cursor: default;
}
.col:hover { background: var(--surface-2); }
.col .nm { font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col .w  { font-family: var(--font-mono); color: var(--sub); text-align: right; }
.col .nd { font-family: var(--font-mono); color: var(--sub); text-align: right; }
.col .x { border: 0; background: transparent; color: var(--sub); cursor: pointer; font-size: 12px; padding: 0; border-radius: 3px; }
.col .x:hover { color: var(--hematite); background: var(--hematite-tint); }
.col.filler .nm { color: var(--sub); font-style: italic; }

/* 索引卡 */
.ix { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 7px 8px; margin-bottom: 6px; }
.ix.off { opacity: .45; }
.ix .hd { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.ix .hd .ck { flex: 0 0 auto; accent-color: var(--lapis); margin: 0; cursor: pointer; }
.ix .hd .nm { font-family: var(--font-mono); font-size: 11px; overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.ix .hd .x { border: 0; background: transparent; color: var(--sub); cursor: pointer; font-size: 12px; padding: 1px 3px; border-radius: 3px; }
.ix .hd .x:hover { color: var(--hematite); background: var(--hematite-tint); }
.strip { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.cbox { font-family: var(--font-mono); font-size: 10px; padding: 2px 5px; border-radius: 4px;
        border: 1px solid var(--line-strong); background: var(--surface); color: var(--sub); white-space: nowrap; }
.cbox.b { border-color: var(--lapis); background: var(--lapis-tint); color: var(--lapis-ink); font-weight: 600; }
.cbox.f { border-color: var(--pyrite-edge); background: var(--pyrite-tint); color: var(--pyrite); }
.cbox.s { border-color: var(--malachite-edge); background: var(--malachite-tint); color: var(--malachite); }
.cbox.inc { border-style: dashed; }
.brk { color: var(--hematite); font-size: 10px; font-family: var(--font-mono); }

/* 条件行 */
.cond { display: grid; grid-template-columns: minmax(0,1fr) 58px 62px 18px; gap: 6px;
        align-items: center; padding: 3px 5px; border-radius: 5px; font-size: 11.5px; }
.cond:hover { background: var(--surface-2); }
.cond .nm { font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cond select.ccol { font-family: var(--font-mono); font-size: 11px; }
.cond select { font: inherit; font-size: 10.5px; padding: 1px 2px; border: 1px solid var(--line);
               border-radius: 4px; background: var(--bg); color: var(--ink); width: 100%; }
.cond .hit { font-family: var(--font-mono); color: var(--sub); text-align: right; }
.cond .x { border: 0; background: transparent; color: var(--sub); cursor: pointer; font-size: 12px; padding: 0; }
.cond .x:hover { color: var(--hematite); }

/* 分段控件 */
.seg2 { display: flex; border: 1px solid var(--line-strong); border-radius: 7px; overflow: hidden; width: 100%; }
.seg2 button {
  flex: 1 1 0; padding: 4px 3px; border: 0; background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: 11px; cursor: pointer; border-right: 1px solid var(--line);
  font-family: var(--font-mono); white-space: nowrap;
}
.seg2 button:last-child { border-right: 0; }
.seg2 button:hover { background: var(--surface-2); }
.seg2 button[aria-pressed="true"] { background: var(--lapis); color: var(--surface); }
.seg2.wrap2 { flex-wrap: wrap; }
.seg2.wrap2 button { flex: 1 1 30%; }
.seg2.wrap2 button:nth-child(3) { border-right: 0; }

.mini {
  padding: 3px 8px; font-size: 11px; border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--surface); color: var(--ink-2); cursor: pointer; font: inherit;
}
.mini:hover { border-color: var(--lapis); color: var(--lapis); }
.mini.wide { width: 100%; margin-top: 4px; }
.mini.go { border-color: var(--lapis); color: var(--lapis); background: var(--lapis-tint); }

select.pick, input.txt {
  width: 100%; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--bg); color: var(--ink); font: inherit; font-size: 12px;
}

/* ══ 舞台 ══════════════════════════════════════════════════════ */
.stage {
  min-width: 0; min-height: 0;
  /* 必须显式给一列。只定义 grid-template-columns 的话列是隐式的、按 max-content 撑，
     一个不换行的长索引名就能把整个舞台顶到 970px，窄屏直接横向溢出。 */
  display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: min-content;
  gap: 10px; padding: 12px 16px 14px;
  /* 行高一律按内容来，整根舞台自己滚。曾经把行写死成 3fr / 0.55fr，
     短窗口下对账表和代价榜各自被压成一条缝、内部再各滚各的 —— 详细原因全被裁掉了。 */
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.stage::-webkit-scrollbar { width: 10px; }
.stage::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; border: 3px solid var(--bg); }

/* 对号入座横幅：从 /why-no-index/ 深链进来时说明「这是哪一条症状的现场」 */
.casenote[hidden] { display: none; }
.casenote {
  display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap;
  border: 1px solid var(--pyrite-edge); background: var(--pyrite-tint);
  border-radius: 11px; padding: 9px 13px;
}
.casenote .tag {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  padding: 2px 7px; border-radius: 999px; flex: 0 0 auto;
  border: 1px solid var(--pyrite-edge); color: var(--pyrite); background: var(--surface);
}
.casenote p { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--ink-2); flex: 1 1 260px; }
.casenote .mini { flex: 0 0 auto; }

/* 判决条 */
.verdict {
  border: 1px solid var(--line-strong); border-left: 4px solid var(--malachite);
  border-radius: 11px; background: var(--surface); padding: 11px 15px;
}
.verdict.preview { border-left-color: var(--lapis); background: var(--lapis-tint); }
.verdict .top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.verdict h2 { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 650; letter-spacing: -.012em; }
.verdict h2 .p { font-family: var(--font-mono); color: var(--malachite); }
.verdict.preview h2 .p { color: var(--lapis); }
.verdict .cost { font-family: var(--font-mono); font-size: 14px; color: var(--sub); font-weight: 400; }
.verdict .why { margin: 5px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.verdict .why b { color: var(--ink); }
.verdict .on {
  font-family: var(--font-mono); font-size: 11px; color: var(--sub);
  display: inline-flex; align-items: center; gap: 6px;
}
.flip {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px;
  background: var(--pyrite); color: var(--surface); font-size: 10.5px;
  animation: pop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop { from { transform: scale(.6); opacity: 0 } to { transform: scale(1); opacity: 1 } }

/* 「离下一个判决还有多远」—— 砍掉场景下拉框之后的发现机制。
   每个芯片都是真跑过内核的结果，不是启发式文案。 */
.tryrow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-height: 22px; }
.trylb { font-size: 10.5px; letter-spacing: .09em; color: var(--sub);
         font-family: var(--font-mono); flex: 0 0 auto; }
.chip {
  border: 1px dashed var(--line-strong); background: transparent; color: var(--ink-2);
  border-radius: 999px; padding: 3px 11px; font: inherit; font-size: 11.5px; cursor: pointer;
  white-space: nowrap; transition: border-color .15s, background .15s, color .15s;
}
.chip:hover { border-style: solid; border-color: var(--lapis); color: var(--lapis); background: var(--lapis-tint); }
.chip b { font-weight: 600; color: var(--sub); }
.chip:hover b { color: var(--lapis); }
.chip.flips { border-color: var(--pyrite-edge); background: var(--pyrite-tint); color: var(--pyrite); }
.chip.flips b { color: var(--pyrite); }
.chip.flips:hover { border-color: var(--pyrite); background: var(--pyrite-tint); }

/* 决策带：一维，可拖。这是主角。
   它和下面「全景」用的是同一根横轴（命中行数），所以必须**画在同一个横向区间**里 ——
   以前决策带占满整宽、全景被纵轴刻度槽推右 63px，同一个行数在两张图上错开
   一大截，用户根本看不出这两个东西是联动的。槽宽走同一个变量。 */
.bandbox {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--vgut) + var(--vbd)) minmax(0, 1fr);
  align-items: center; column-gap: 0;
  padding-right: var(--vbd);           /* 抵掉画布框右边框，右端也对齐 */
}
.bandbox .lb, .bandbox .band, .bandbox .bandaxis { grid-column: 2; }
.bandbox .lb {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px;
  font-size: 11px; color: var(--sub);
}
/* 左槽里放这条带对应的纵轴读数 —— 全景纵轴上的哪一格，就是这条带 */
.bandcap {
  grid-column: 1; align-self: center;
  font-family: var(--font-mono); font-size: 9px; color: var(--sub);
  text-align: right; padding-right: 6px; white-space: nowrap; overflow: hidden;
}
.bandcap b { display: block; font-size: 10px; color: var(--ink-2); font-weight: 600; }
.bandbox .lb b { color: var(--ink-2); font-weight: 600; }
.bandbox .lb .sp { flex: 1 1 auto; }
.band {
  position: relative; height: 46px; border-radius: 8px;
  border: 1px solid var(--line); cursor: ew-resize;
}
/* 颜色带自己裁，别让 .band 裁 —— 「拖我」提示浮在带子上方 26px，
   父级一 overflow:hidden 就整个看不见，而它是全页唯一的操作提示。 */
.band canvas, .band .ghost, .band .pin { border-radius: 7px; }
.band > canvas { clip-path: inset(0 round 7px); }
.band canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.band .pin {
  position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px;
  background: #fff; box-shadow: 0 0 0 1.5px #000, 0 0 7px rgba(0,0,0,.55);
  border-radius: 2px; pointer-events: none; transition: left .12s ease-out;
}
.band .ghost { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.55);
               mix-blend-mode: difference; pointer-events: none; }
.band .ghost.hide, .band .pin.hide { display: none; }
.bandaxis { position: relative; height: 16px; margin-top: 2px; }
.bandaxis .tk { position: absolute; transform: translateX(-50%); font-family: var(--font-mono);
                font-size: 9.5px; color: var(--sub); white-space: nowrap; }
.dragme {
  position: absolute; left: 50%; top: -26px; transform: translateX(-50%);
  font-size: 11.5px; color: var(--pyrite); white-space: nowrap; pointer-events: none;
  animation: nudge 1.6s ease-in-out infinite;
}
@keyframes nudge { 0%,100% { transform: translateX(-50%) } 50% { transform: translateX(-50%) translateY(-3px) } }

/* 大画布：机制（磁盘）| 全景（决策地图） */
.canvasbox {
  /* min-width 不能省：grid 轨道是 minmax(0,1fr)，但栅格项自己默认 min-width:auto，
     对账表那 5 列的最小内容宽度会直接把框顶穿，窄屏横向溢出 100 多像素。 */
  min-height: 0; min-width: 0; border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface); display: grid; grid-template-rows: auto auto auto;
  overflow: hidden;
}
/* 画布类的面板（磁盘 / 全景）里头是绝对定位的 canvas，必须给一个真实高度；
   对账是表格和文字，让它按自然高度长，超出部分由舞台整体滚动接住。 */
.canvasbox > .pane, .canvasbox > .mapwrap { height: clamp(260px, 46vh, 520px); }
.cvhd { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cvhd .t { font-size: 12.5px; font-weight: 600; margin: 0; }
.cvhd .d { font-size: 11px; color: var(--sub); margin: 0; }
.cvhd .sp { flex: 1 1 auto; }
.cvhd .seg2 { width: auto; }
.cvhd .seg2 button { flex: 0 0 auto; padding: 3px 10px; }

.pane { position: relative; min-height: 0; }
.pane canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pane.map { cursor: crosshair; }
.pane .pin2 {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1.5px #000, 0 0 8px rgba(0,0,0,.5); pointer-events: none;
  transition: left .14s ease-out, top .14s ease-out;
}
.pane .xh { position: absolute; background: rgba(255,255,255,.45); mix-blend-mode: difference; pointer-events: none; }
.pane .xh.v { top: 0; bottom: 0; width: 1px; }
.pane .xh.h { left: 0; right: 0; height: 1px; }
.pane .hide { display: none; }
.cvft { display: flex; align-items: center; gap: 8px 14px; padding: 7px 12px;
        border-top: 1px solid var(--line); flex-wrap: wrap; font-size: 11px; color: var(--sub); }
.cvft .sp { flex: 1 1 auto; }
.lgi { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); }
.lgi .sw { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; border: 1px solid rgba(0,0,0,.14); }
.lgi.here { font-weight: 650; color: var(--ink); }
.lgi .ar { font-family: var(--font-mono); font-size: 10px; color: var(--sub); }

/* 地图纵轴刻度。--vgut 是纵轴刻度槽的宽，--vbd 是画布框自己那条边框 ——
   决策带靠这两个变量把横轴对齐到同一个区间，别把它们写死在两处。 */
.mapwrap[hidden] { display: none; }
.mapwrap { display: grid; grid-template-columns: var(--vgut) minmax(0,1fr); grid-template-rows: minmax(0,1fr) 22px; min-height: 0; }
.mapwrap .ylab { position: relative; grid-row: 1; grid-column: 1; border-right: 1px solid var(--line); }
.mapwrap .ylab .tk { position: absolute; right: 5px; transform: translateY(-50%);
                     font-family: var(--font-mono); font-size: 9px; color: var(--sub); white-space: nowrap; }
.mapwrap .pane { grid-row: 1; grid-column: 2; }
.mapwrap .ycap { grid-row: 2; grid-column: 1; font-family: var(--font-mono); font-size: 8.5px;
                 color: var(--sub); display: flex; align-items: center; justify-content: flex-end;
                 padding-right: 5px; overflow: hidden; white-space: nowrap; }
.mapwrap .xlab { grid-row: 2; grid-column: 2; position: relative; border-left: 1px solid var(--line); }
.mapwrap .xlab .tk { position: absolute; top: 3px; transform: translateX(-50%);
                     font-family: var(--font-mono); font-size: 9px; color: var(--sub); }
/* 横轴不写名字，这张图就没人看得懂它和上面那条带是同一件事 */
.mapwrap .xlab .cap { position: absolute; right: 4px; top: 3px; font-size: 9px; color: var(--sub); }

/* 代价条 */
.costs { border: 1px solid var(--line); border-radius: 11px; background: var(--surface); min-width: 0; }
.costhd { display: flex; align-items: baseline; gap: 10px; padding: 7px 13px; border-bottom: 1px solid var(--line);
          position: sticky; top: 0; background: var(--surface); z-index: 1; border-radius: 11px 11px 0 0; }
.costhd .t { font-size: 12px; font-weight: 600; margin: 0; }
.costhd .d { font-size: 10.5px; color: var(--sub); margin: 0; }
.costhd .sp { flex: 1 1 auto; }
.crow {
  display: grid; grid-template-columns: 16px 128px minmax(0,1fr) 96px 74px;
  align-items: center; gap: 10px; padding: 5px 13px; cursor: pointer;
  border-bottom: 1px solid var(--line); font-size: 11.5px;
}
.crow:last-child { border-bottom: 0; }
.crow:hover { background: var(--surface-2); }
.crow.win { background: var(--malachite-tint); }
.crow.dead { opacity: .5; cursor: default; }
/* 键盘焦点环：决策带和地图原来根本进不了 Tab 序，进得来就得看得见 */
.crow:focus-visible, .band:focus-visible, .pane.map:focus-visible {
  outline: 2px solid var(--lapis); outline-offset: -2px; border-radius: 7px;
}
.crow .rk { font-family: var(--font-mono); font-size: 10.5px; color: var(--sub); }
.crow .kd { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.crow .kd .sw { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.crow .nm { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow .trk { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.crow .fl { display: block; height: 100%; border-radius: 4px; background: var(--lapis);
            transition: width .28s cubic-bezier(.4,0,.2,1); }
.crow.win .fl { background: var(--malachite); }
.crow .tv { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.crow .mult { font-size: 10px; color: var(--sub); text-align: right; }
.crow.win .mult { color: var(--malachite); }

/* 展开的算账 */
.acct { padding: 0 13px; background: var(--bg); border-bottom: 1px solid var(--line); }
.acct.closed { display: none; }
.acct .in { padding: 10px 0 12px; }
.sect { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sub);
        font-family: var(--font-mono); margin: 10px 0 6px; }
.sect:first-child { margin-top: 0; }
.stk { display: flex; height: 10px; border-radius: 3px; overflow: hidden; background: var(--surface-2); margin-bottom: 7px; }
.stk span { display: block; height: 100%; }
.fx { display: grid; grid-template-columns: 9px 104px 78px minmax(0,1fr); gap: 8px;
      align-items: baseline; font-size: 11px; padding: 2px 0; }
.fx .dot { width: 8px; height: 8px; border-radius: 2px; align-self: center; }
.fx .fn { color: var(--ink-2); }
.fx .fv { font-family: var(--font-mono); text-align: right; color: var(--ink); }
.fx .ff { color: var(--sub); font-size: 10.5px; font-family: var(--font-mono); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.lesson { margin-top: 9px; padding: 8px 10px; border-radius: 7px; font-size: 11.5px; line-height: 1.65;
          background: var(--surface-2); color: var(--ink-2); }
.lesson.win { background: var(--malachite-tint); }
.lesson b { color: var(--ink); }

/* 建议 */
/* 「该怎么办」是三类用户唯一都想要的东西，必须紧跟判决，不能埋在最底下 */
.advice {
  border: 1px solid var(--lapis-edge); border-left: 4px solid var(--lapis);
  background: var(--lapis-tint); padding: 9px 13px; border-radius: 10px;
}
.advice:empty { display: none; }
.advice .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.advice code { font-family: var(--font-mono); font-size: 11px; color: var(--ink);
               background: var(--surface); border: 1px solid var(--lapis-edge); border-radius: 6px;
               padding: 4px 8px; overflow-x: auto; white-space: pre; max-width: 100%; }
.advice .gain { font-size: 11.5px; color: var(--ink-2); }
.advice .gain b { color: var(--malachite); }
.advice .sp { flex: 1 1 auto; }

/* 提示条 */
.warn { padding: 7px 13px; font-size: 11.5px; line-height: 1.6; background: var(--pyrite-tint);
        border-top: 1px solid var(--pyrite-edge); color: var(--ink-2); }
.warn b { color: var(--ink); }
.warn.bad { background: var(--hematite-tint); border-top-color: var(--hematite-edge); }

/* 粘贴抽屉：它是 .shell（两列网格）的直接子元素，不横跨的话会自己占一格，
   把左坞和舞台各挤到错误的格子里 —— 整页布局当场炸掉。 */
.paste {
  grid-column: 1 / -1; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg); }
.paste .phd { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; font-size: 12px; }
.paste .phd b { font-weight: 600; }
.paste .phd .sp { flex: 1 1 auto; }
.paste textarea {
  width: 100%; min-height: 84px; resize: vertical; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink);
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6;
}
.paste textarea:focus { outline: 2px solid var(--lapis); outline-offset: -1px; }
.paste .msg { font-size: 11.5px; margin: 6px 0 0; line-height: 1.6; }
.paste .msg.ok { color: var(--malachite); }
.paste .msg.bad { color: var(--hematite); }
.paste .row { display: flex; gap: 8px; align-items: center; margin-top: 7px; flex-wrap: wrap; }
.paste .prow { display: flex; gap: 10px; align-items: center; margin-bottom: 7px; flex-wrap: wrap; }
.paste .prow .mini { flex: 0 0 auto; }
.paste .prow .hint { flex: 1 1 260px; }
.paste[hidden] { display: none; }

/* ══ 响应式 ════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .shell { grid-template-columns: 272px minmax(0, 1fr); }
  .crow { grid-template-columns: 15px 108px minmax(0,1fr) 84px 66px; gap: 8px; }
}
@media (max-width: 900px) {
  html, body.app { height: auto; }
  body.app { overflow: visible; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .dock { border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; order: 2; }
  .stage { order: 1; grid-template-rows: none; height: auto; padding: 12px; }
  .pane { min-height: 300px; }
  .canvasbox { min-height: 380px; }
}
@media (max-width: 700px) {
  /* 顶栏在窄屏必须能换行，否则那几个链接会把整页顶出横向滚动条 */
  .topbar { height: auto; min-height: 44px; flex-wrap: wrap; padding: 6px 10px; gap: 6px 10px; }
  .topbar .ttl { font-size: 13px; }
  .topbar a.plain { font-size: 11.5px; }
  .advice .row { min-width: 0; }
  .advice code { flex: 1 1 100%; min-width: 0; }
  .verdict .top { gap: 6px; }
}
@media (max-width: 620px) {
  .crow { grid-template-columns: 14px minmax(0,1fr) 72px; row-gap: 2px; }
  .crow .trk, .crow .mult { display: none; }
  .crow .nm { grid-column: 2 / 4; font-size: 10px; min-width: 0; }
  .verdict h2 { font-size: 16px; }
  .fx { grid-template-columns: 9px 1fr 68px; }
  .fx .ff { grid-column: 2 / 4; font-size: 10px; }
  /* 反事实芯片在宽屏不换行才好看，手机上一条就顶出边 —— 这里放开 */
  .chip { white-space: normal; max-width: 100%; }
  /* 手机上 62px 的刻度槽要吃掉六分之一的屏宽。改这一个变量，
     决策带和全景一起缩，两根横轴照样对齐。 */
  body.app { --vgut: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .crow .fl, .band .pin, .pane .pin2 { transition: none; }
  .flip, .dragme { animation: none; }
}

/* ══ 对账页：为什么是它，不是它 ═══════════════════════════════
   外层比的是**索引**（人问的），内层比的是**路径**（PG 比的）。
   两层分开，否则「同一个索引的三条路」会把「A vs B」挤到第七行去。 */
.vs { padding: 9px 14px 12px; min-width: 0; overflow-x: auto; }
.vshd { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.vscard { border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; background: var(--bg); }
.vscard.win { border-color: var(--malachite-edge); background: var(--malachite-tint); }
.vscard { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.vscard .nm { font-family: var(--font-mono); font-size: 12px; color: var(--ink); flex: 1 1 100%; }
.vscard .kd { font-size: 11px; color: var(--ink-2); }
.vscard .big { font-family: var(--font-mono); font-size: 17px; font-variant-numeric: tabular-nums; }
.vscard.win .big { color: var(--malachite); }
.vscard .vsmult { font-size: 11px; color: var(--hematite); margin-left: 6px; }
.vscard .paths { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; flex: 1 1 100%; }
.pth {
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2);
  border-radius: 5px; padding: 2px 7px; font: inherit; font-size: 10px; cursor: pointer;
  font-family: var(--font-mono); white-space: nowrap;
}
.pth[aria-pressed="true"] { border-color: var(--lapis); background: var(--lapis-tint); color: var(--lapis-ink); }
.pth[disabled] { opacity: .5; cursor: default; text-decoration: line-through; }

.vstab { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.vstab th { text-align: right; font-weight: 500; color: var(--sub); font-size: 9.5px;
            letter-spacing: .07em; text-transform: uppercase; font-family: var(--font-mono);
            padding: 4px 8px; border-bottom: 1px solid var(--line-strong); }
.vstab th:first-child { text-align: left; }
.vstab td { padding: 3px 8px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.vstab td:first-child { color: var(--ink-2); }
.vstab td.n { text-align: right; font-family: var(--font-mono); }
.vstab tr.key { background: var(--pyrite-tint); }
.vstab tr.key td { font-weight: 600; color: var(--ink); }
.vstab tr.sum td { border-bottom: 0; border-top: 1px solid var(--line-strong); font-weight: 600; }
.vsbar { display: inline-block; height: 7px; border-radius: 3px; background: var(--pyrite);
         vertical-align: middle; min-width: 1px; }
.vsdot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.vskey { margin-top: 8px; padding: 7px 10px; border-radius: 8px; background: var(--pyrite-tint);
         border: 1px solid var(--pyrite-edge); font-size: 12px; line-height: 1.65; color: var(--ink-2); }
.vskey b { color: var(--ink); }
.col.on { background: var(--lapis-tint); outline: 1px solid var(--lapis-edge); }

/* 同索引路径之争：只差在「怎么回表」，用一根共用横轴的小尺讲 */
.race { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.racehd { font-size: 11px; color: var(--sub); margin-bottom: 6px; }
.racehd b { color: var(--ink-2); }
.racerow { display: grid; grid-template-columns: 124px minmax(0,1fr) 78px 78px;
           gap: 8px; align-items: center; font-size: 11px; padding: 2px 0; }
.racerow.cur .rn { font-weight: 650; color: var(--ink); }
.racerow .rn { color: var(--ink-2); }
.racerow .rt { height: 7px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.racerow .rf { display: block; height: 100%; border-radius: 4px; }
.racerow .rv { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.racerow .rd { font-size: 10px; color: var(--sub); }
.racenote { font-size: 11px; color: var(--sub); line-height: 1.6; margin: 7px 0 0; }
.racenote b { color: var(--ink-2); }