/* 中心节点终端。
 *
 * 配色是 **Claude 的那一套**（2026-09-27 用户点名：「配色改成 claude 的」，
 * 指的是 Claude 界面那块**白色偏黄**的底）。所以这一层现在是两套：
 *
 *   浅色  纸色 #F8F6EF + 骨色 #F0EDE1，正文近黑，暖色只有 Claude 那个珊瑚橙
 *   深色  Claude 深色模式那块暖炭 #262624 / #1F1E1D，同一个珊瑚橙
 *
 * 浅色这两格是 Claude 那两个值（#FAF9F5 / #F0EEE6）再往黄里推了一档 ——
 * 用户要的是「白色偏黄**一点**」，原值在大多数屏上就是白，看不出偏黄。
 * ⚠ 再推就踩线了：纸越黄，压深过的 --tl-caret 越难站住。现在这一版
 * caret 是 5.16（纸上）/ 4.76（骨上），dim 是 5.31 / 4.89 —— 都留了余量；
 * 纸再往黄里走一档（#F7F5EC/#EFEBDD），caret 就掉到 4.43，破 AA。
 * 要动这两个底色，先把 caret/dim 一起往下压，别只改底色。
 *
 * ★ 和这个文件的第一版**相反**：那时候故意只做一个深色主题，理由是
 * 「跟系统深浅走会在浅色下变成白底黑字的终端，那既不是终端也不是页面」。
 * 这句现在不成立了 —— 浅色下它不再是「白底黑字」，是 Claude 那块暖白，
 * 本身就是个有主张的配色，不是没做完。（preview.css 的 .pv-frame 还是
 * 老规矩：内容自己的底色不参与页面配色，那条没动。）
 *
 * 色值仍然只定义在 .tl 自己身上（--tl-* 那几条），不在文件里散落字面量。
 * 深浅两套跟着全站那套走（:root / media / [data-theme]，见 kg3d.css 开头）——
 * 只写在 [data-theme] 里的色值，在「跟随系统」那条路上是不存在的。
 *
 * **两个橙**，别合成一个 —— 它们是同一个珊瑚色在两种「地面」上各自压出来的：
 *   --tl-caret  文字用的（提示符、状态字、小标签）。
 *   --tl-brand  图形用的（进度条、焦点圈）。条要压在自己的槽上（--tl-line）、
 *               焦点圈压在栏上（--tl-raise），都是「图形」，按 1.4.11 要 3:1。
 *
 * 浅色那对是压深过的：Claude 的原色 #D97757 落在米色纸上只有 2.89:1，
 * 当文字读不动，当进度条也只有 2.32:1（对着槽 #E3DECC）—— 而那条 2 像素的
 * 进度条是**唯一**说明「跑到哪了」的东西，虚了就白画。压到 #AC4A26 / #C0552F
 * 之后：文字 5.16 / 4.76，进度条 3.40，焦点圈 3.91，全部过线。
 * 深色那块底子本来就深，原色直接用：文字 #DE8462，图形 #D97757。
 *
 * z-index 68：**压在预览的 70 下面**，理由见 terminal.js 开头。
 * 卡片遮罩 40 / 首屏 50 / 底部工具条 60-61 / 终端 68 / 预览 70。
 */

.tl {
  /* 默认这一套 = 浅色 = Claude 的纸色。没有 data-theme、系统也不是深色时用它。 */
  color-scheme: light;
  --tl-bg:    #F8F6EF;   /* 纸。Claude 界面的底（比它的 #FAF9F5 再暖一档） */
  --tl-raise: #F0EDE1;   /* 骨。顶栏/底栏/输入行，比纸深一档 */
  --tl-line:  #E3DECC;
  --tl-ink:   #1F1E1D;
  --tl-ink-2: #4A4842;
  --tl-dim:   #69665D;
  --tl-caret: #AC4A26;   /* 提示符/状态字（文字，压深过） */
  --tl-brand: #C0552F;   /* 进度条/焦点圈（图形，压得比 Claude 原色深一档） */
  --tl-live:  #AC4A26;   /* 「在跑/排队中」。和 caret 同一个色 —— 在跑就是这一块的强调态 */
  --tl-ok:    #4A7345;
  --tl-bad:   #9E2B20;

  position: fixed;
  inset: 0;
  z-index: 68;
  display: flex;
  flex-direction: column;
  background: var(--tl-bg);
  color: var(--tl-ink);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.7;
}
/* 深色 = Claude 深色模式那块暖炭色。两条覆盖照抄全站那套写法
   （kg3d.css 开头就是这么写的，md.css 的 .doc 也是）。
   ⚠ 深色下**面板比纸更深**（raise #1F1E1D 比 bg #262624 深）—— 和浅色
   那边方向相反，是有意的：两边都要让「栏」和「纸」分得开，而输入框
   一律用 --tl-bg 画（见下面的 select / input / 发送键），所以在深色下
   它们比栏亮、在浅色下比栏白，两头都是「浮起来的一块」。 */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tl {
    color-scheme: dark;
    --tl-bg:    #262624;
    --tl-raise: #1F1E1D;
    --tl-line:  #3A3A36;
    --tl-ink:   #FAF9F5;
    --tl-ink-2: #C2C0B6;
    --tl-dim:   #9E9B93;
    --tl-caret: #DE8462;
    --tl-brand: #D97757;
    --tl-live:  #DE8462;
    --tl-ok:    #8FBF7F;
    --tl-bad:   #E4705F;
  }
}
:root[data-theme="dark"] .tl {
  color-scheme: dark;
  --tl-bg:    #262624;
  --tl-raise: #1F1E1D;
  --tl-line:  #3A3A36;
  --tl-ink:   #FAF9F5;
  --tl-ink-2: #C2C0B6;
  --tl-dim:   #9E9B93;
  --tl-caret: #DE8462;
  --tl-brand: #D97757;
  --tl-live:  #DE8462;
  --tl-ok:    #8FBF7F;
  --tl-bad:   #E4705F;
}

/* 作者样式里的 display:flex 会压过浏览器默认的 [hidden]{display:none}。
   少了这一行，关掉之后那层还在，只是看不见 —— 而它会继续吃掉整屏的点击。
   和 .pv[hidden]、.veil 那条同一个坑，这个项目里已经踩过一次了。 */
.tl[hidden] { display: none }

/* 开着终端时锁住底下的树。不锁的话滚轮会穿透过去把镜头拉近拉远。 */
html.tl-lock, html.tl-lock body { overflow: hidden }

/* ── 顶栏 ────────────────────────────────────────────────────────── */
.tl-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(9px + env(safe-area-inset-top, 0px)) 14px 9px;
  background: var(--tl-raise);
  border-bottom: 1px solid var(--tl-line);
}
.tl-dots { flex: none; display: flex; gap: 6px }
.tl-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--tl-line) }
.tl-title { flex: none; font-size: 12.5px; color: var(--tl-dim); letter-spacing: .04em }
.tl-spacer { flex: 1; min-width: 0 }

/* 后端现在能不能接活。三种状态各自有颜色 —— 这一格是这一屏上最该被
   一眼看到的东西：正忙的时候发出去也只是排队，而排队和「卡住了」
   在用户眼里长得一模一样。 */
.tl-chip {
  flex: none;
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--tl-line);
  color: var(--tl-dim);
  white-space: nowrap;
}
.tl-chip.k-ok   { color: var(--tl-ok);   border-color: color-mix(in oklab, var(--tl-ok) 45%, transparent) }
.tl-chip.k-busy { color: var(--tl-caret); border-color: color-mix(in oklab, var(--tl-caret) 45%, transparent) }
.tl-chip.k-bad  { color: var(--tl-bad);  border-color: color-mix(in oklab, var(--tl-bad) 45%, transparent) }

/* 那一格选择器。**只剩一个了** —— 技能只有球心这一处跑，所以「在哪个
   节点上干活」那一格 2026-09-27 去掉了（见 terminal.js 文件头 ⑤）。
   前面那个小字是它的名字：「节点」「技能」四个字分开写在两个 select
   前面，是因为光看选项内容，第一次打开的人分不出哪格是哪格。 */
.tl-pick { flex: 0 1 auto; display: flex; gap: 10px; min-width: 0 }
.tl-pk { display: flex; align-items: center; gap: 5px; min-width: 0 }
.tl-pkl { flex: none; font-size: 11px; color: var(--tl-dim) }
.tl-pick select {
  flex: 1 1 auto;
  max-width: 13rem;
  min-width: 0;
  font: inherit;
  font-size: 12px;
  color: var(--tl-ink-2);
  background: var(--tl-bg);
  border: 1px solid var(--tl-line);
  border-radius: 7px;
  padding: 4px 7px;
  cursor: pointer;
  /* 短名也可能比这一格宽（「主机应急溯源（要先传材料）」）。截断加省略号，
     完整名字和说明在 option 的 title 上（terminal.js 的 skillTip）。 */
  text-overflow: ellipsis;
}
.tl-pick select:hover { color: var(--tl-ink); border-color: var(--tl-dim) }

.tl-x, .tl-helpbtn {
  flex: none;
  font: inherit;
  font-size: 12px;
  color: var(--tl-ink-2);
  background: transparent;
  border: 1px solid var(--tl-line);
  border-radius: 7px;
  padding: 4px 11px;
  cursor: pointer;
}
.tl-x:hover, .tl-helpbtn:hover { color: var(--tl-ink); background: var(--tl-bg) }
/* 摊开的时候按钮得说「我开着」—— 不然它和没开时长得一模一样，
   而面板一收，人不知道刚才那块东西是被谁收走的。 */
.tl-helpbtn[aria-expanded="true"] {
  color: var(--tl-caret);
  border-color: color-mix(in oklab, var(--tl-caret) 45%, transparent);
}

/* 用法面板。它是日志的**兄弟**，不是往日志里塞的一段 —— 日志那块每两秒
   按 jobs 重画一次（见 terminal.js 的 renderLog），塞进去的东西下一次
   重画就没了。和令牌条同一个做法：只切 hidden，内容一次写好。 */
.tl-help {
  flex: none;
  max-height: 50vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 16px 14px;
  border-bottom: 1px solid var(--tl-line);
  background: var(--tl-bg);
}
.tl-help[hidden] { display: none }
/* 开场那块说明是给整屏用的（8vh 的上边距把它压在偏上的位置），
   搬进这块面板里那 8vh 就只是白占地方。 */
.tl-help .tl-hint { margin: 0 auto }
.tl-help .tl-hint p { margin: 0 0 9px }
.tl-help .tl-hint p:last-child { margin-bottom: 0 }

.tl-bar :focus-visible, .tl-form :focus-visible, .tl-log :focus-visible,
.tl-foot :focus-visible, .tl-token :focus-visible {
  outline: 2px solid var(--tl-brand);
  outline-offset: 1px;
}

/* ── 对话 ────────────────────────────────────────────────────────── */
.tl-log {
  flex: 1;
  min-height: 0;          /* 没有它 flex 子项不肯缩，日志会把输入行顶出屏幕 */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px 4px;
}

/* 一轮 = 一个 job。轮与轮之间只隔一条细线，不做卡片、不做气泡 ——
   这是终端，不是聊天软件。 */
.tl-turn { padding: 2px 0 12px }
.tl-turn + .tl-turn { border-top: 1px solid var(--tl-line); padding-top: 12px }

.tl-you { display: flex; gap: 8px; align-items: baseline; color: var(--tl-ink); font-weight: 500 }
.tl-caret { flex: none; color: var(--tl-caret); font-weight: 600; user-select: none }

/* 运行中那一行：最后一条心跳（「正在用 Bash …」）。
   它是**过程**不是答案，所以压暗、加个 ▸，并且跑完就消失。 */
.tl-tools {
  margin: 4px 0 0 20px;
  color: var(--tl-dim);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

/* 回答。保留换行和空格（Claude 的输出是有版式的），但长行必须能折 ——
   一行几十万字符的 base64 会把整块撑成横向滚动条。 */
.tl-ans {
  margin: 6px 0 0 20px;
  color: var(--tl-ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tl-dim { color: var(--tl-dim) }

.tl-err {
  margin: 6px 0 0 20px;
  color: var(--tl-bad);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ── 产物和材料 ──────────────────────────────────────────────────── */
.tl-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0 20px }
.tl-out, .tl-wantone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 3px 5px 3px 9px;
  border: 1px solid var(--tl-line);
  border-radius: 8px;
  background: var(--tl-raise);
  font-size: 12px;
}
.tl-outname {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tl-ink-2);
}
.tl-outsize { flex: none; color: var(--tl-dim); font-size: 11px }
.tl-out a, .tl-pv, .tl-drop, .tl-kill {
  flex: none;
  font: inherit;
  font-size: 11.5px;
  color: var(--tl-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 1px 7px;
  cursor: pointer;
  text-decoration: none;
}
.tl-out a:hover, .tl-pv:hover, .tl-kill:hover { color: var(--tl-ink); border-color: var(--tl-line) }
.tl-drop:hover { color: var(--tl-bad); border-color: color-mix(in oklab, var(--tl-bad) 45%, transparent) }

/* ── 一行的收尾信息 ──────────────────────────────────────────────── */
.tl-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 8px 0 0 20px;
  font-size: 11.5px;
  color: var(--tl-dim);
}
.tl-state.st-running, .tl-state.st-queued { color: var(--tl-live) }
.tl-state.st-done    { color: var(--tl-ok) }
.tl-state.st-failed, .tl-state.st-timeout { color: var(--tl-bad) }
.tl-skill { color: var(--tl-dim) }

/* 排队位次和已排时长。**和状态标签同一个颜色**（--tl-live）—— 它们和
   「排队中」是同一句话的三截，分开上色会读成三件事。
   位次比时长亮一档：等的人想知道的是「还有几个」，不是「等了多久」——
   后者只是用来判断前面那个是不是卡住了。 */
.tl-ahead  { color: var(--tl-live) }
.tl-waited { color: var(--tl-dim) }

/* 进度条。只在跑着的时候有，宽度就是本人报上来的百分比 ——
   后端没报过的时候它是 0，那也照实画（见 terminal.js 里 Math.max(2,…)
   那两像素：0% 的条和「没有条」看起来是一回事，而 2% 至少说明它在动）。 */
.tl-bar2 { margin: 6px 0 0 20px; height: 2px; background: var(--tl-line); border-radius: 2px; overflow: hidden }
.tl-bar2 i { display: block; height: 100%; background: var(--tl-brand); transition: width .4s ease }

/* ── 开场那块说明 ────────────────────────────────────────────────── */
.tl-hint { max-width: 46rem; margin: 8vh auto 0; padding: 0 4px; color: var(--tl-ink-2) }
.tl-hint p { margin: 0 0 10px }
.tl-hint b { color: var(--tl-ink) }

/* ── 令牌 ────────────────────────────────────────────────────────── */
.tl-token {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--tl-line);
  background: var(--tl-raise);
  font-size: 12.5px;
  color: var(--tl-dim);
}
.tl-token[hidden] { display: none }
.tl-tokform { display: flex; gap: 7px }
.tl-tokform input {
  font: inherit;
  font-size: 12.5px;
  width: 20rem;
  max-width: 100%;
  color: var(--tl-ink);
  background: var(--tl-bg);
  border: 1px solid var(--tl-line);
  border-radius: 7px;
  padding: 4px 9px;
}
.tl-tokform button {
  font: inherit;
  font-size: 12.5px;
  color: var(--tl-ink);
  background: var(--tl-bg);
  border: 1px solid var(--tl-line);
  border-radius: 7px;
  padding: 4px 13px;
  cursor: pointer;
}
.tl-tokform button:hover { border-color: var(--tl-dim) }
.tl-tokhint { flex: 1 1 18rem; min-width: 0 }

/* ── 材料那条 + 出错那句话 ───────────────────────────────────────── */
.tl-foot {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 16px;
  border-top: 1px solid var(--tl-line);
  background: var(--tl-raise);
  font-size: 12px;
}
.tl-foot[hidden] { display: none }
.tl-want { display: flex; flex-wrap: wrap; gap: 6px }
.tl-note { color: var(--tl-dim) }
.tl-bad { color: var(--tl-bad) }
/* 后端机器的负载/内存那一行。比正文再小一档、再淡一点 —— 它是「瞥一眼」
   的信息，不该和「还差一份材料」那种要动手的事抢注意力。
   数字用等宽并锁定宽度：每 2 秒刷一次，位数一变就整行抖一下。 */
.tl-res {
  color: var(--tl-dim);
  font-size: 11px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* ── 输入行 ──────────────────────────────────────────────────────── */
.tl-form {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--tl-line);
  background: var(--tl-raise);
}
.tl-form > .tl-caret { line-height: 1.7 }
.tl-in {
  flex: 1;
  min-width: 0;
  max-height: 140px;      /* 和 terminal.js 里那个 140 是同一个数 */
  resize: none;
  overflow-y: auto;
  font: inherit;
  line-height: 1.7;
  color: var(--tl-ink);
  background: transparent;
  border: 0;
  padding: 0;
}
.tl-in::placeholder { color: var(--tl-dim) }
.tl-in:focus { outline: none }   /* 焦点就在这一整行上，光标本身就是指示 */
.tl-up, .tl-send {
  flex: none;
  font: inherit;
  font-size: 12.5px;
  border-radius: 8px;
  padding: 5px 13px;
  cursor: pointer;
  border: 1px solid var(--tl-line);
  background: var(--tl-bg);
  color: var(--tl-ink-2);
}
.tl-up { font-size: 15px; line-height: 1; padding: 4px 11px }
.tl-up:hover, .tl-send:hover:not(:disabled) { color: var(--tl-ink); border-color: var(--tl-dim) }
.tl-send:disabled { opacity: .45; cursor: default }

/* ── 窄屏（约 400px 的手机） ─────────────────────────────────────── */
@media (max-width: 620px) {
  .tl { font-size: 12.5px }
  /* 顶栏分两行：第一行是状态和关闭，第二行才是那两个选择器 ——
     挤在一行里的结果是两个 select 各剩三十来像素，谁都读不出来。 */
  .tl-bar { flex-wrap: wrap; gap: 8px }
  .tl-title { display: none }
  .tl-spacer { display: none }
  .tl-pick { order: 3; flex: 1 1 100% }
  .tl-pk { flex: 1 }
  .tl-pick select { max-width: none }
  .tl-chip { margin-left: auto }
  .tl-log { padding: 12px 12px 2px }
  .tl-ans, .tl-tools, .tl-err, .tl-meta, .tl-files, .tl-bar2 { margin-left: 0 }
  .tl-tokform input { width: 100% }
  .tl-tokform { flex: 1 1 100% }
}

@media (prefers-reduced-motion: no-preference) {
  .tl { animation: tlin .18s ease }
  @keyframes tlin { from { opacity: 0 } to { opacity: 1 } }
}