/* 上传状态页 `/lab/work/status` 的样式。**只有本页新增的那几块**，
 * 别的（`.card` / `.btn` / `.badge` / `.note` / `.dim` / `.toolbar`）全走 `style.css`。
 *
 * 契约第三节：`style.css` 是谁都不许碰的文件，要样式就写自己这一个，
 * 主 Agent 在 `index.html` 里挂一行 `<link>`（**不是 `<script>`**，
 * css 当脚本加载会静默失败，`delivery.css` 栽过这一次）。
 *
 * ## 这个文件没挂上会怎样
 *
 * 页面**内容一个字都不少、顺序也不变**，只是没有分栏和颜色。
 * 功能不依赖样式 —— 一个员工在样式挂掉的情况下仍然要能看清
 * "哪条没成、为什么"，并且点得到重试。
 *
 * ## 为什么七档用等宽格子，不用一条彩色进度条分段
 *
 * 分段进度条好看，但**读不出数**。这一页的第一用途是回答
 * "失败了几条"，而分段条上那一小截红色对应几条，人得去猜。
 * 所以：格子里是数字，数字比标签大一倍。
 *
 * ## 为什么只有「上传失败」是红的
 *
 * 七档里真正需要人动手的只有它（「等待重试」会自己再来，
 * 「跳过」是已经有结论的）。七档全上色的话满屏都是信号，
 * 等于没有信号 —— 而唯一那个要人动手的就被埋进去了。
 */

/* 整页的根节点。**不设最大宽度** —— 外层 `#view` 已经限过一次，
 * 这里再限一次的结果是宽屏上七个格子被挤成两行。 */
.srv-status { display: block; }

.srv-status-head h1 { margin: 0 0 2px; font-size: 20px; }
.srv-status-head .note { margin-top: 0; }
.srv-status-card { margin-bottom: 12px; }

/* ---------------------------------------------------------------- 汇总 */

.srv-status-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 12px;
}

.srv-status-stat {
  flex: 1 1 84px;
  min-width: 84px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 8px 10px;
  background: #fff;
}

/* **数字大、标签小** —— 一屏扫过去先看见数（和 `.aw-stat` 同一条口径）。 */
.srv-status-stat-num { font-size: 22px; line-height: 1.2; font-weight: 600; }
.srv-status-stat-label { font-size: 12px; color: #6b7280; margin-top: 2px; }

.srv-status-stat.ok .srv-status-stat-num { color: #166534; }
.srv-status-stat.bad .srv-status-stat-num { color: #991b1b; }
.srv-status-stat.warn .srv-status-stat-num { color: #92400e; }

/* ------------------------------------------------------------ 进度 */

.srv-status-progress { margin-top: 8px; }

.srv-status-bar {
  height: 10px;
  border-radius: 5px;
  background: #eef0f3;
  overflow: hidden;
}

.srv-status-bar-fill {
  height: 100%;
  background: #2563eb;
  /* 进度只会往前走，跳变不如滑过去 —— 但**不要太慢**，
   * 慢过一次轮询间隔的话，条还在爬而数字已经变了。 */
  transition: width .3s ease;
}

.srv-status-progress-text {
  margin-top: 6px;
  font-size: 13px;
  color: #374151;
}

/* 「还没有任务」那一行。**灰的、不带进度条** ——
 * 给它画一条空条等于画了一个 0%，而这一页明确不显示 0%。 */
.srv-status-progress-empty {
  margin: 8px 0 0;
  font-size: 13px;
  color: #9ca3af;
}

/* ---------------------------------------------------------------- 七档 */

.srv-status-buckets {
  display: grid;
  /* 宽屏一行七个，窄屏自己折 —— 不写死列数，
   * 写死的话手机上会横向滚动，而这一页是要在手机上看的。 */
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 8px;
  margin: 8px 0 4px;
}

.srv-status-bucket {
  border: 1px solid #e5e7eb;
  border-left: 3px solid #d1d5db;
  border-radius: 6px;
  padding: 8px 10px;
  background: #fff;
}

.srv-status-bucket-num { font-size: 20px; line-height: 1.2; font-weight: 600; }
.srv-status-bucket-label { font-size: 13px; margin-top: 1px; }
.srv-status-bucket-hint {
  font-size: 11.5px;
  color: #9ca3af;
  margin-top: 3px;
  line-height: 1.45;
}

.srv-status-bucket.is-ok { border-left-color: #86efac; }
.srv-status-bucket.is-ok .srv-status-bucket-num { color: #166534; }
.srv-status-bucket.is-warn { border-left-color: #fcd34d; }
.srv-status-bucket.is-warn .srv-status-bucket-num { color: #92400e; }
.srv-status-bucket.is-live { border-left-color: #93c5fd; }
.srv-status-bucket.is-live .srv-status-bucket-num { color: #1d4ed8; }

/* 唯一要人动手的那一档。**整块底色，不只是一条边** ——
 * 它必须比旁边六格先被看见。 */
.srv-status-bucket.is-bad {
  border-left-color: #f87171;
  background: #fef2f2;
}
.srv-status-bucket.is-bad .srv-status-bucket-num { color: #991b1b; }

/* ---------------------------------------------------------------- 明细 */

.srv-status-rows { list-style: none; margin: 8px 0 0; padding: 0; }

.srv-status-row {
  border-top: 1px solid #f0f1f3;
  padding: 7px 0;
}
.srv-status-row:first-child { border-top: 0; }

.srv-status-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.srv-status-row-title {
  /* 标题可能很长，**但不许把它裁成一行看不懂的样子** ——
   * 员工靠标题认出"这是我刚才那条"。所以是换行，不是省略号。 */
  flex: 1 1 220px;
  min-width: 0;
  word-break: break-all;
  font-size: 13.5px;
}

.srv-status-row-meta { font-size: 12px; color: #6b7280; }

/* 失败原因收在 `<details>` 里：平时不占地方，点开是完整一句话。
 * 直接铺开的话，二十条失败就是二十段红字，人只会整块跳过去。 */
.srv-status-why { margin: 4px 0 0 2px; }
.srv-status-why > summary {
  cursor: pointer;
  font-size: 12px;
  color: #2563eb;
}
.srv-status-why-text {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: #7f1d1d;
  /* 原因里可能有换行和缩进（服务端的异常信息），保住它。 */
  white-space: pre-wrap;
  word-break: break-word;
}
.srv-status-why-list {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: #7f1d1d;
}
.srv-status-why-list li { margin: 2px 0; word-break: break-word; }

.srv-status-note { margin: 6px 0 0; font-size: 12.5px; }
.srv-status-foot { margin-top: 10px; font-size: 12px; }

/* ---------------------------------------------------------------- 窄屏 */

@media (max-width: 560px) {
  /* 手机上一行两格。一行七格挤成七条竖线，数字反而看不清。 */
  .srv-status-buckets { grid-template-columns: repeat(2, 1fr); }
  .srv-status-stat { flex-basis: calc(50% - 5px); }
  .srv-status-row-title { flex-basis: 100%; }
}