/* 一页一张图：所有东西画在同一块能缩放的画布上。镜头跟着场景的步骤走，拖动、缩放就交给看的人。
   蓝 = 一直在，琥珀 = 容器重建就没，粉 = 不存。青色标当前这一步，绿色标一个 PR 的改动。 */
:root {
  --paper: #f5f6f3;
  --sheet: #ffffff;
  --ink: #1b1f1c;
  --ink-2: #555c57;
  --ink-3: #7c847e;
  --rule: #d8ddd8;
  --tint: #edf0ec;
  --zone: #f1f3ef;
  --edge: #6b736d;
  --keep: #1f62b5;
  --keep-soft: #e6eef9;
  --lost: #a35c00;
  --lost-soft: #fbf0dc;
  --gone: #c0344d;
  --gone-soft: #fbe7eb;
  --pr: #1a8443;
  --pr-soft: #e3f4e8;
  --flow: #0b7c86;
  --flow-soft: #d9f0f1;
  --bad: #c03a2b;
  --bad-soft: #fbe9e6;
  --term: #23282a;
  --term-ink: #e6ecea;
  --term-dim: #9aa6a2;
  --term-bad: #f2a097;
  --term-hl: #1d4549;
  --shadow: rgba(27, 31, 28, 0.16);
  /* 网页端自己的配色，只给图上画的网页示意用 */
  --m-bg: #faf7f2;
  --m-side: #f3eee6;
  --m-surface: #ffffff;
  --m-border: #e7e0d5;
  --m-text: #2b2622;
  --m-text-2: #6f665c;
  --m-text-3: #9c9186;
  --m-bubble: #efe7da;
  --m-accent: #c0603a;
  --m-on-accent: #ffffff;
  --f-ui:
    -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC",
    "Microsoft YaHei", sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "PingFang SC", "Noto Sans SC", monospace;
  --f-serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111412;
    --sheet: #191d1a;
    --ink: #e6eae6;
    --ink-2: #a5ada7;
    --ink-3: #7f8781;
    --rule: #2d332f;
    --tint: #232824;
    --zone: #151916;
    --edge: #8d958f;
    --keep: #6ea8f2;
    --keep-soft: #142338;
    --lost: #e3a54c;
    --lost-soft: #30240f;
    --gone: #f07089;
    --gone-soft: #3a1820;
    --pr: #4fca7f;
    --pr-soft: #15301f;
    --flow: #4cc6d0;
    --flow-soft: #0f2c2f;
    --bad: #f2786b;
    --bad-soft: #351a17;
    --term: #0b0d0c;
    --term-ink: #e6ecea;
    --term-dim: #8a9692;
    --term-bad: #f2a097;
    --term-hl: #143a3e;
    --shadow: rgba(0, 0, 0, 0.5);
    --m-bg: #1c1a17;
    --m-side: #171512;
    --m-surface: #26231f;
    --m-border: #34302b;
    --m-text: #ede7dd;
    --m-text-2: #a59c90;
    --m-text-3: #7a7168;
    --m-bubble: #332e28;
    --m-accent: #e08a62;
    --m-on-accent: #1c1a17;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}
/* 整页就是地图：页面本身不滚动，拖动、两指滑动都交给地图 */
html,
body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px / 1.7 var(--f-ui);
}
a {
  color: inherit;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-3);
}
p {
  margin: 0;
}
code {
  font-family: var(--f-mono);
  font-size: 0.86em;
  background: var(--tint);
  padding: 1px 5px;
  border-radius: 4px;
  overflow-wrap: anywhere;
}
h1,
h2,
h3 {
  text-wrap: balance;
}
button {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--keep);
  outline-offset: 2px;
}
/* ---------- 地图：占满整个窗口 ---------- */
.app {
  position: fixed;
  inset: 0;
}
.stage {
  position: absolute;
  inset: 0;
  background: var(--paper);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.stage.dragging {
  cursor: grabbing;
}
.stage > svg {
  display: block;
  width: 100%;
  height: 100%;
}
.stage:focus-visible {
  outline-offset: -2px;
}
.zoombar {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  display: grid;
  gap: 4px;
}
.zoombar button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 1px 3px var(--shadow);
}
.zoombar button.fit {
  font-size: 12px;
  font-weight: 600;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  padding: 9px 16px 11px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-2);
  border-top: 1px solid var(--rule);
}
.legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.legend i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1.5px solid;
}
.legend .keep {
  background: var(--keep-soft);
  border-color: var(--keep);
}
.legend .lost {
  background: var(--lost-soft);
  border-color: var(--lost);
}
.legend .gone {
  background: var(--gone-soft);
  border-color: var(--gone);
  border-style: dashed;
}
.legend .ln {
  width: 22px;
  height: 0;
  border-radius: 0;
  border: 0;
  border-top: 1.5px solid var(--edge);
}
.legend .ln.dash {
  border-top-style: dashed;
}
@media (max-width: 640px) {
  .legend {
    gap: 2px 10px;
    padding-block: 6px 8px;
    font-size: 11px;
  }
  .legend i {
    width: 10px;
    height: 10px;
  }
  .legend .lines {
    display: none;
  }
}
.info {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: calc(58px + env(safe-area-inset-right, 0px));
  z-index: 2;
  display: grid;
  gap: 4px;
  width: min(380px, calc(100% - 82px));
  padding: 10px 34px 12px 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 4px 16px var(--shadow);
  cursor: auto;
  user-select: text;
  -webkit-user-select: text;
}
.info b {
  color: var(--ink);
  font-size: 15px;
}
.info code {
  justify-self: start;
  font-size: 12px;
}
.info .x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--ink-3);
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

/* ---------- 浮在地图上的面板：标题、场景或变更记录、图例 ---------- */
.panel {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: calc(12px + env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: column;
  width: 320px;
  max-height: calc(100% - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 4px 18px var(--shadow);
}
/* 面板放不下时只有中间那块滚动，标题、切换按钮、图例都留在原地 */
.ph,
.tabs,
.hlbar,
.legend {
  flex: none;
}
.ph {
  display: grid;
  gap: 4px;
  padding: 14px 16px 12px;
}
.ph h1 {
  margin: 0;
  font: 700 18px / 1.3 var(--f-ui);
}
.lede {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}
@media (max-height: 520px) {
  .lede {
    display: none;
  }
}
.tabs {
  display: flex;
  margin: 0 16px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
}
.tabs button {
  flex: 1;
  padding: 5px 10px;
  font-size: 13.5px;
  background: none;
  border: 0;
  cursor: pointer;
}
.tabs button:last-child {
  border-left: 1px solid var(--rule);
}
.tabs button[aria-pressed="true"] {
  color: var(--paper);
  background: var(--ink);
}
.panes {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 16px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 场景播放 */
.player {
  display: grid;
  gap: 12px;
}
.scenes {
  display: grid;
  gap: 10px;
}
.grp {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.gl {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.08em;
}
.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.seg button {
  padding: 3px 11px;
  font-size: 13.5px;
  white-space: nowrap;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
}
.seg button[aria-pressed="true"] {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}
.ctl {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ctl button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  font-size: 13.5px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 8px;
  cursor: pointer;
}
.ctl .ib {
  width: 32px;
  padding: 0;
}
.ctl svg {
  width: 14px;
  height: 14px;
}
.ctl .ib path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ctl .pb {
  flex: 1;
  font-weight: 600;
  color: var(--sheet);
  background: var(--flow);
  border-color: var(--flow);
}
.ctl .pb path {
  fill: currentColor;
}
.ctl button:disabled {
  opacity: 0.4;
  cursor: default;
}
.cap {
  display: flex;
  align-items: baseline;
  gap: 4px 10px;
  min-height: 3.2em;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.cap .body {
  flex: 1;
  min-width: 0;
  text-wrap: pretty;
}
.cap b {
  margin-right: 8px;
  color: var(--ink);
}
.cap .n {
  flex: none;
  padding: 0 6px;
  border-radius: 4px;
  font: 600 12px / 1.7 var(--f-mono);
  color: var(--flow);
  background: var(--flow-soft);
}
.cap .x {
  flex: none;
  align-self: start;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--ink-3);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
}

/* 竖着拿的手机、窄窗口：面板贴在底部，地图在上面 */
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) {
  .panel {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-height: 55%;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    border-width: 1px 0 0;
    border-radius: 14px 14px 0 0;
  }
  .ph {
    padding: 10px 16px 8px;
  }
  .ph h1 {
    font-size: 16px;
  }
  .lede {
    display: none;
  }
  .tabs {
    margin-bottom: 10px;
  }
  .player {
    gap: 10px;
  }
  .scenes {
    gap: 6px;
  }
  .grp {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .seg {
    flex: 1;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .seg::-webkit-scrollbar {
    display: none;
  }
  .cap {
    min-height: 0;
  }
}

/* ---------- svg 里的元素 ---------- */
.map text {
  font-family: var(--f-ui);
  fill: var(--ink);
}
.map .mono {
  font-family: var(--f-mono);
}
.map .serif {
  font-family: var(--f-serif);
}
.map .zone {
  fill: var(--zone);
  stroke: var(--rule);
  stroke-width: 1.2;
}
.map .zone.frame {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.3;
  stroke-dasharray: 9 7;
}
.map .zone.keepz {
  fill: var(--keep-soft);
  stroke: var(--keep);
  stroke-width: 1.3;
}
.map .zone.boxz {
  fill: var(--lost-soft);
  stroke: var(--lost);
  stroke-width: 1.3;
}
.map .zone.loopz {
  fill: var(--sheet);
  stroke: var(--edge);
  stroke-width: 1.2;
  stroke-dasharray: 6 5;
}
.map .zl {
  font-size: 16px;
  font-weight: 600;
  fill: var(--ink-2);
}
.map .zl2 {
  font-size: 13px;
  fill: var(--ink-3);
}
.map .zl.keep,
.map .zl2.keep {
  fill: var(--keep);
}
.map .zl.lost,
.map .zl2.lost {
  fill: var(--lost);
}
.map .shape {
  fill: var(--sheet);
  stroke: var(--edge);
  stroke-width: 1.4;
}
.map .shape-line {
  fill: none;
  stroke: var(--edge);
  stroke-width: 1.2;
}
.map .keep > .shape {
  stroke: var(--keep);
}
.map .ttl {
  font-size: 19px;
  font-weight: 600;
}
.map .ttl.sm {
  font-size: 16px;
}
.map .ttl.mono {
  font-size: 15px;
}
.map .sub {
  font-size: 12.5px;
  fill: var(--ink-3);
}
.map .sub.mono {
  font-size: 11.5px;
}
.map .tx {
  font-size: 13px;
  fill: var(--ink-2);
}
.map .zn {
  font-size: 12.5px;
  fill: var(--ink-3);
}
.map.lo .zn,
.map.lo .pin {
  display: none;
}
.map .who {
  font-size: 11.5px;
  fill: var(--ink-3);
}
.map .who.you {
  fill: var(--ink);
  font-weight: 600;
}
.map .who.bot {
  fill: var(--keep);
  font-weight: 600;
}
.map .row .rbg,
.map .dyn .rbg {
  fill: transparent;
}
.map .chipg rect {
  fill: var(--tint);
}
.map .chip-t {
  font-size: 11.5px;
  fill: var(--ink-2);
}
.map .chipg.lost rect {
  fill: var(--lost-soft);
  stroke: var(--lost);
  stroke-width: 1;
}
.map .chipg.lost text {
  fill: var(--lost);
}
.map .chipg.keep rect {
  fill: var(--keep-soft);
  stroke: var(--keep);
  stroke-width: 1;
}
.map .chipg.keep text {
  fill: var(--keep);
}
.map .chipg.gone rect {
  fill: var(--sheet);
  stroke: var(--gone);
  stroke-width: 1;
  stroke-dasharray: 3 2;
}
.map .chipg.gone text {
  fill: var(--gone);
}
.map .chipg.bad rect {
  fill: var(--bad-soft);
}
.map .chipg.bad text {
  fill: var(--bad);
  font-weight: 600;
}
.map .gonez {
  fill: var(--gone-soft);
  stroke: var(--gone);
  stroke-width: 1.2;
  stroke-dasharray: 5 4;
}
.map .gone-t {
  font-size: 12.5px;
  font-weight: 600;
  fill: var(--gone);
}
.map .tag rect {
  fill: var(--lost-soft);
}
.map .tag text {
  font-size: 11px;
  font-weight: 600;
  fill: var(--lost);
}
.map .verb rect {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1;
}
.map .verb text {
  font-size: 10.5px;
  font-weight: 600;
  fill: var(--ink-2);
}
.map .verb.post rect {
  fill: var(--ink);
  stroke: var(--ink);
}
.map .verb.post text {
  fill: var(--paper);
}
/* 数据库表 */
.map .tb-head {
  fill: var(--keep-soft);
}
.map .tb-name {
  font-size: 14px;
  font-weight: 600;
  fill: var(--keep);
}
.map .tb-col {
  font-size: 10.5px;
  fill: var(--ink-3);
}
/* 列名后面的 PK（主键）实心，FK（外键）空心 */
.map .tb-kbg {
  fill: var(--keep);
  stroke: var(--keep);
  stroke-width: 1;
}
.map .tb-kt {
  font-family: var(--f-mono);
  font-size: 8.5px;
  font-weight: 700;
  fill: var(--sheet);
}
.map .fk .tb-kbg {
  fill: none;
}
.map .fk .tb-kt {
  fill: var(--keep);
}
.map .tb-sep {
  stroke: var(--rule);
  stroke-width: 1;
}
.map .cell {
  font-size: 11px;
  fill: var(--ink);
}
.map .cell.m {
  fill: var(--ink-3);
}
.map .cell.st-running,
.map .cell.st-queued {
  fill: var(--flow);
  font-weight: 600;
}
.map .cell.st-stopped,
.map .cell.st-interrupted,
.map .cell.st-max_steps {
  fill: var(--lost);
  font-weight: 600;
}
.map .cell.st-error {
  fill: var(--bad);
  font-weight: 600;
}
.map .role {
  font-size: 10px;
  fill: var(--ink-3);
}
/* 终端 */
.map .term {
  fill: var(--term);
}
.map .term-t {
  font-size: 11px;
  fill: var(--term-ink);
}
.map .term-t.dim {
  fill: var(--term-dim);
}
.map .term-t.bad {
  fill: var(--term-bad);
}
/* 图上画的网页示意 */
.map .m-bg {
  fill: var(--m-bg);
  stroke: var(--m-border);
  stroke-width: 1.2;
}
.map .m-side {
  fill: var(--m-side);
}
.map .m-bar {
  fill: var(--m-side);
}
.map .m-line {
  stroke: var(--m-border);
  stroke-width: 1;
}
.map .m-surface {
  fill: var(--m-surface);
}
.map .m-box {
  fill: var(--m-surface);
  stroke: var(--m-border);
  stroke-width: 1;
}
.map .m-av {
  fill: var(--m-accent);
}
.map .m-av-t {
  font-size: 11px;
  font-weight: 600;
  fill: var(--m-on-accent);
}
.map .m-t {
  fill: var(--m-text);
}
.map .m-t2 {
  fill: var(--m-text-2);
}
.map .m-t3 {
  fill: var(--m-text-3);
}
.map .m-acc {
  fill: var(--m-accent);
}
.map .m-bubble {
  fill: var(--m-bubble);
}
.map .m-bad {
  fill: var(--bad);
}
.map .m-url {
  fill: var(--m-surface);
  stroke: var(--m-border);
  stroke-width: 1;
}
.map .m-closed {
  fill: var(--zone);
  stroke: var(--rule);
  stroke-width: 1.2;
  stroke-dasharray: 6 5;
}
.map .pin circle {
  fill: var(--ink);
}
.map .pin text {
  font: 600 11px var(--f-mono);
  fill: var(--paper);
}
/* 图里用的字号和颜色 */
.map .f10 {
  font-size: 10px;
}
.map .f105 {
  font-size: 10.5px;
}
.map .f11 {
  font-size: 11px;
}
.map .f115 {
  font-size: 11.5px;
}
.map .f12 {
  font-size: 12px;
}
.map .f125 {
  font-size: 12.5px;
}
.map .f13 {
  font-size: 13px;
}
.map .f15 {
  font-size: 15px;
}
.map .f19 {
  font-size: 19px;
}
.map .b {
  font-weight: 600;
}
.map .b7 {
  font-weight: 700;
}
.map .ink {
  fill: var(--ink);
}
.map .ink2 {
  fill: var(--ink-2);
}
.map .ink3 {
  fill: var(--ink-3);
}
.map .flowt {
  fill: var(--flow);
}
.map .bad {
  fill: var(--bad);
}
.map .gone-n {
  fill: var(--gone);
}
.map .pth {
  font-family: var(--f-mono);
  font-size: 12px;
}
.map .colh {
  font-size: 11px;
  font-weight: 600;
  fill: var(--ink-3);
  letter-spacing: 0.06em;
}
.map .fpath {
  font-size: 12.5px;
}
.map .soft > .shape {
  stroke: var(--rule);
}
.map .runbox {
  fill: var(--flow-soft);
  stroke: var(--flow);
  stroke-width: 1;
}
.map .vp {
  fill: var(--sheet);
  stroke: var(--rule);
  stroke-width: 1;
}
.map .vp-bar {
  fill: var(--tint);
}
.map .tab {
  fill: var(--tint);
}
.map .tab.cur {
  fill: var(--sheet);
  stroke: var(--rule);
  stroke-width: 1;
}
/* 连线 */
.map .e-line {
  fill: none;
  stroke: var(--edge);
  stroke-width: 1.5;
}
.map .e-line.dashed {
  stroke-dasharray: 6 5;
}
.map .e-head {
  fill: var(--edge);
}
.map .e-label {
  font-size: 12.5px;
  fill: var(--ink-2);
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.map .e-label.mono {
  font-size: 12px;
}
.map .e-label.on-zone {
  stroke: var(--zone);
}
.map .e-label.on-sheet {
  stroke: var(--sheet);
}
.map .tagbg {
  fill: var(--paper);
}
.map .dot {
  fill: var(--flow);
  stroke: var(--sheet);
  stroke-width: 2;
}
/* 场景：点亮的路径 */
.map .nd,
.map .eg,
.map .e-label {
  transition: opacity 0.3s;
}
.map.focus .nd:not(.on) {
  opacity: 0.3;
}
.map.focus .eg:not(.on) {
  opacity: 0.14;
}
.map.focus .e-label:not(.on) {
  opacity: 0.22;
}
.map .eg.on .e-line {
  stroke: var(--flow);
  stroke-width: 2.6;
}
.map .eg.on .e-head {
  fill: var(--flow);
}
.map .e-label.on {
  fill: var(--flow);
  font-weight: 600;
}
.map .nd.on > .shape {
  stroke: var(--flow);
  stroke-width: 2.2;
}
.map .row.on .rbg,
.map .dyn.on .rbg {
  fill: var(--flow-soft);
}
.map .row.on > text,
.map .chipg.on text {
  fill: var(--flow);
}
.map .row.on .ttl,
.map .row.on text.strong {
  font-weight: 600;
}
.map .chipg.on rect {
  fill: var(--flow-soft);
  stroke: var(--flow);
  stroke-width: 1.3;
  stroke-dasharray: none;
}
.map .dyn.chg .rbg {
  fill: var(--flow-soft);
  stroke: var(--flow);
  stroke-width: 1.3;
}
.map .dyn.dark.on .rbg,
.map .dyn.dark.chg .rbg {
  fill: var(--term-hl);
}
.map .zl.on {
  fill: var(--flow);
}
.map.focus .e-tag:not(.on) {
  opacity: 0.22;
}
.map .e-tag {
  transition: opacity 0.3s;
}
.map .dyn.chg.anim .rbg {
  animation: flash 1.6s ease-out;
}
@keyframes flash {
  0% {
    fill: var(--flow);
    fill-opacity: 0.55;
  }
  100% {
    fill-opacity: 1;
  }
}
.map .zone-hit {
  fill: transparent;
}
.map .server-down {
  fill: var(--paper);
  fill-opacity: 0.72;
}
.map .down-t {
  font-size: 22px;
  font-weight: 600;
  fill: var(--bad);
}
/* 一个 PR 的改动 */
.map .nd.hl > .shape {
  stroke: var(--pr);
  stroke-width: 2.6;
}
.map .eg.hl .e-line {
  stroke: var(--pr);
  stroke-width: 2.6;
}
.map .eg.hl .e-head {
  fill: var(--pr);
}
.map .e-label.hl {
  fill: var(--pr);
  font-weight: 600;
}
.map .row.hl .rbg,
.map .dyn.hl .rbg {
  fill: var(--pr-soft);
}
.map .row.hl > text,
.map .dyn.hl text:not(.m-av-t) {
  fill: var(--pr);
}
.map .chipg.hl rect {
  fill: var(--pr-soft);
  stroke: var(--pr);
  stroke-width: 1.3;
}
.map .chipg.hl text {
  fill: var(--pr);
  font-weight: 600;
}
.map .prtag {
  display: none;
}
.map .hl > .prtag,
.map .prtag.hl {
  display: inline;
}
.map .prtag rect {
  fill: var(--pr);
}
.map .prtag text {
  font: 600 11px var(--f-mono);
  fill: var(--sheet);
}
/* 能点的 */
.map [data-info] {
  cursor: pointer;
}
.map .nd[data-info]:hover > .shape {
  stroke-width: 2;
}
.map [data-info]:focus {
  outline: none;
}
.map .nd[data-info]:focus-visible > .shape {
  stroke: var(--keep);
  stroke-width: 2.6;
}
.map .nd.sel > .shape {
  stroke: var(--ink);
  stroke-width: 2.6;
}

/* ---------- 变更记录 ---------- */
.log {
  display: grid;
  gap: 16px;
}
.lead {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}
.change {
  border: 1px solid var(--rule);
  border-radius: 10px;
  min-width: 0;
}
.change > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--rule);
}
.change .prn {
  font: 700 24px / 1 var(--f-ui);
}
.change h3 {
  margin: 0;
  font: 600 15px / 1.35 var(--f-ui);
}
.change .meta {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.btn {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--pr);
  background: var(--sheet);
  border: 1.5px solid var(--pr);
  border-radius: 8px;
  cursor: pointer;
}
.btn[aria-pressed="true"] {
  color: var(--sheet);
  background: var(--pr);
}
.deltas {
  list-style: none;
  margin: 0;
  padding: 2px 12px;
}
.deltas li {
  display: grid;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--rule);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}
.deltas li:last-child {
  border-bottom: 0;
}
.deltas b {
  font-weight: 600;
  color: var(--ink);
}
.deltas .same b {
  color: var(--ink-3);
  font-weight: 500;
}
.change .open {
  margin: 0 12px 12px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.6;
  background: var(--lost-soft);
  border-radius: 8px;
}
.change .open b {
  color: var(--lost);
}
.block {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.block h3 {
  margin: 0;
  font: 600 15px / 1.35 var(--f-ui);
}
.list {
  border: 1px solid var(--rule);
  border-radius: 10px;
  min-width: 0;
}
.list > .it {
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border-top: 1px solid var(--rule);
}
.list > .it:first-child {
  border-top: 0;
}
.it .k {
  font-size: 13.5px;
  font-weight: 600;
  min-width: 0;
}
.it .d {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  min-width: 0;
}

/* 标出一个 PR 时，面板底部的条 */
.hlbar {
  display: grid;
  gap: 8px;
  margin: 0 12px 12px;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--paper);
  background: var(--ink);
  border-radius: 8px;
}
.hlbar .hl-pr {
  color: var(--pr-soft);
}
.hlbar .btns {
  display: flex;
  gap: 6px;
}
.hlbar button {
  padding: 4px 10px;
  font-size: 12.5px;
  color: var(--paper);
  background: none;
  border: 1px solid var(--ink-3);
  border-radius: 6px;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .map .nd,
  .map .eg,
  .map .e-label,
  .map .e-tag {
    transition: none;
  }
}

/* 有 hidden 属性就藏起来。.info 自己设了 display，这条放在最后才盖得过它 */
[hidden] {
  display: none;
}