/* pages-wordset.css —— **任务**（#/wordset；旧名"教师自选组练"）的页面样式。
 *
 * ★ 这是**页面层**，排在 theme → layout → components → 各 pages-* 之后：
 *   只补这一屏自己的东西，**不改共享令牌**（theme.css 由 Lead 独占）。
 * ★ 所有类名都带 `ws-` 前缀，和别的页面不会撞。
 * ★ 令牌一律用 theme.css :root 里已有的那几个（--c-* / --t-* / --fs-* / --r-*），
 *   不新造颜色 —— 造了新色，暗色主题一改这里就会变成一块补丁。
 * ★★ 类名 `ws-*` 与路由 `/wordset` **刻意不跟着改名**：
 *   改名要牵动前端所有引用与老师手上的书签，而显示名（任务）与
 *   类名/路径本来就可以不一致。见 views/wordset.js 顶部那段说明。
 */

/* ============================ 通用小块 ============================ */
.ws-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ws-dim {
  color: var(--t-dim);
  font-size: var(--fs-sm);
}

.ws-err {
  color: #e88;
  font-size: var(--fs-sm);
}

.ws-note {
  color: var(--t-muted);
  font-size: var(--fs-sm);
}

/* ★★ 可见性警告（2026-10-12 加）。
   来历：老师报「学生客户端看不到这个练习的入口」。查下来的一条根因是
   **班级/状态没配**，而界面上没有任何地方告诉他"不选班级 ⇒ 学生根本看不到"
   或者"没选班级 = 全校可见"。这条警告就是那次的正面修法：
   把"谁看得到"写在老师改设置的**同一个视野里**，不让他去猜。
   ★ 颜色用 --c-gold（theme.css 里已有的金色令牌），不新造色 ——
   造了新色，暗色主题一改这里就会变成一块补丁。 */
.ws-warn {
  color: var(--c-gold);
  font-size: var(--fs-sm);
  margin: 6px 0 0;
}

.ws-visibility {
  margin: 10px 0 0;
}

/* ★ 完成状态那一行（学生页）。未完成是暗的，完成了才亮起来 ——
   学生一眼能看出"这份交没交"。 */
.ws-done {
  margin: 8px 0 0;
  font-size: var(--fs-sm);
  color: var(--t-dim);
}

.ws-done.is-done {
  color: #cfe9a4;
}

/* ★ 学生任务卡上那个「待完成」小标：与「已完成 ✓」（.ws-pill.is-on）区分开。
   刻意**不用**告警色 —— "没做完"是正常状态，不是错误，别把学生吓一跳。 */
.ws-pill-todo {
  color: var(--t-bright);
  border-color: var(--c-line);
}

/* ★ 学生那屏的卡片：已完成的整张淡一点，让"还没做的"跳出来（学生的注意力
   应该落在待办上）。用透明度而不是换色，暗色主题下同样成立。 */
.ws-card.is-done {
  opacity: 0.72;
}

.ws-block {
  margin: 18px 0 26px;
}

.ws-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--c-line-soft);
  padding-bottom: 8px;
}

.ws-block-head h2,
.ws-block-head h3 {
  margin: 0;
  font-size: var(--fs-lg);
  color: var(--t-bright);
}

/* ============================ 顶部说明 ============================ */
.ws-hero {
  padding: 18px 0 8px;
}

.ws-hero h1 {
  margin: 0 0 6px;
  font-size: var(--fs-2xl);
  color: var(--t-bright);
}

.ws-hero p {
  margin: 4px 0;
  color: var(--t-primary);
}

/* ============================ 练习单卡片 ============================ */
.ws-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gap);
}

.ws-card {
  background: var(--c-card);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ws-card:hover {
  background: var(--c-card-hi);
}

.ws-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ws-card-title {
  color: var(--t-bright);
  font-size: var(--fs-lg);
  font-weight: 600;
  text-decoration: none;
}

.ws-card-title:hover {
  color: var(--c-accent);
}

.ws-card p {
  margin: 0;
}

.ws-card .ws-row {
  margin-top: 6px;
}

.ws-pill {
  flex: none;
  font-size: var(--fs-xs);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  color: var(--t-dim);
}

.ws-pill.is-on {
  color: #cfe9a4;
  border-color: var(--c-green-b);
  background: rgba(117, 176, 34, 0.14);
}

/* ============================ 新建 ============================ */
.ws-create {
  margin-top: 18px;
  padding: 14px;
  background: var(--c-card);
  border: 1px dashed var(--c-line);
  border-radius: var(--r-md);
}

.ws-create h3 {
  margin: 0 0 10px;
  font-size: var(--fs-lg);
  color: var(--t-bright);
}

.ws-create-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 说明那一行单独占满一行（它在 DOM 里是 .ws-create 的最后一个孩子） */
.ws-create > .ws-input {
  margin-top: 8px;
  width: 100%;
}

/* ============================ 表单控件 ============================ */
.ws-input {
  background: var(--c-input);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--t-primary);
  font-family: var(--font);
  font-size: var(--fs-md);
  padding: 8px 10px;
  min-height: 36px;
  box-sizing: border-box;
}

.ws-input:focus {
  outline: none;
  border-color: var(--c-accent);
}

.ws-input::placeholder {
  color: var(--t-dim);
}

.ws-wide {
  flex: 1 1 220px;
  min-width: 160px;
}

.ws-select {
  min-width: 150px;
}

/* ============================ 编辑页头 / 设置条 ============================ */
.ws-editor-head {
  padding: 10px 0 4px;
}

.ws-editor-head h1 {
  margin: 6px 0;
  font-size: var(--fs-2xl);
  color: var(--t-bright);
}

.ws-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px;
  background: var(--c-card);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  margin-bottom: 16px;
}

/* ============================ 两栏 ============================ */
.ws-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--gap);
  align-items: start;
}

@media (max-width: 1000px) {
  .ws-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ws-col {
  min-width: 0;
}

.ws-pick,
.ws-chosen {
  background: var(--c-card);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  padding: 12px;
}

/* ============================ 页签 ============================ */
.ws-tabs {
  display: flex;
  gap: 6px;
  margin: 4px 0 10px;
}

.ws-tab {
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--t-muted);
  font-family: var(--font);
  font-size: var(--fs-md);
  padding: 6px 12px;
  cursor: pointer;
  min-height: 34px;
}

.ws-tab:hover {
  color: var(--t-bright);
  border-color: var(--c-hover);
}

.ws-tab.is-on {
  color: var(--t-bright);
  border-color: var(--c-accent);
  background: rgba(102, 192, 244, 0.12);
}

.ws-pane {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ============================ 挑词结果 ============================ */
.ws-results {
  max-height: 52vh;
  overflow: auto;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
  padding: 8px;
  background: var(--c-deep);
}

.ws-hit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 6px;
  border-bottom: 1px solid var(--c-line-soft);
}

.ws-hit:last-child {
  border-bottom: none;
}

.ws-hit:hover {
  background: var(--c-card);
}

.ws-hit-l {
  flex: 0 0 auto;
  min-width: 130px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.ws-hit-cn {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--t-muted);
  font-size: var(--fs-sm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.ws-word {
  color: var(--t-bright);
  font-weight: 600;
}

.ws-pos {
  color: var(--c-accent);
  font-size: var(--fs-xs);
  font-style: italic;
}

.ws-ph {
  color: var(--t-dim);
  font-size: var(--fs-xs);
}

.ws-src {
  color: var(--t-dim);
  font-size: var(--fs-xs);
}

.ws-badge {
  font-size: var(--fs-xs);
  color: #ffe08a;
  border: 1px solid var(--c-gold);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* ============================ 已选词条 ============================ */
.ws-crow {
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
  padding: 9px 10px;
  margin-bottom: 8px;
  background: var(--c-deep);
}

.ws-crow.is-missing {
  border-color: var(--c-red-a);
}

.ws-crow-1 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.ws-crow-1 .ws-src {
  flex: 1 1 auto;
}

.ws-x {
  background: transparent;
  border: none;
  color: var(--t-dim);
  font-family: var(--font);
  font-size: var(--fs-xs);
  cursor: pointer;
  text-decoration: underline;
  padding: 2px 4px;
}

.ws-x:hover {
  color: #e88;
}

.ws-cn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}

.ws-cn-l {
  flex: none;
  width: 34px;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--t-dim);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  padding: 1px 0;
}

.ws-cn-l.is-teacher {
  color: #ffe08a;
  border-color: var(--c-gold);
}

.ws-cn-v {
  color: var(--t-muted);
  font-size: var(--fs-sm);
}

.ws-input-cn {
  flex: 1 1 auto;
  min-width: 120px;
}

/* ============================ 练习（学生页） ============================ */
.ws-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}

.ws-mode {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  color: var(--t-primary);
  font-family: var(--font);
  cursor: pointer;
  padding: 10px 14px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: var(--tap);
}

.ws-mode:hover {
  background: var(--c-card-hi);
}

.ws-mode.is-on {
  border-color: var(--c-accent);
}

.ws-mode-t {
  color: var(--t-bright);
  font-size: var(--fs-md);
}

.ws-mode-h {
  color: var(--t-dim);
  font-size: var(--fs-xs);
}

.ws-drill {
  margin: 8px 0 24px;
}

.ws-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.ws-progress-track {
  flex: 1 1 auto;
  height: 6px;
  background: var(--c-deep);
  border-radius: 999px;
  overflow: hidden;
}

.ws-progress-fill {
  height: 100%;
  background: var(--c-accent);
  transition: width 0.25s ease;
}

.ws-card-big {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ws-ask {
  color: var(--t-dim);
  font-size: var(--fs-sm);
}

.ws-ask-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
}

.ws-cn-big {
  color: var(--t-bright);
  font-size: var(--fs-xl);
  line-height: 1.4;
}

.ws-word-big {
  color: var(--t-bright);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: 0.5px;
  word-break: break-word;
}

.ws-input-spell {
  font-size: var(--fs-xl);
  letter-spacing: 1px;
  padding: 12px;
  min-height: var(--tap);
}

.ws-en {
  color: var(--t-muted);
  margin: 0;
  line-height: 1.5;
}

.ws-ex {
  color: var(--t-muted);
  margin: 0;
  font-style: italic;
  line-height: 1.5;
}

.ws-feedback {
  min-height: 22px;
  font-size: var(--fs-md);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ws-feedback.is-ok {
  color: #aade6a;
}

.ws-feedback.is-bad {
  color: #e88;
}

.ws-wrong {
  margin: 4px 0 0;
  padding-left: 20px;
  color: var(--t-muted);
}

.ws-wrong li {
  margin: 2px 0;
}

/* 阅读态：窄屏下卡片内边距收一点，别把字挤出去 */
@media (max-width: 620px) {
  .ws-card-big {
    padding: 14px;
  }

  .ws-cn-big {
    font-size: var(--fs-lg);
  }
}

/* ===========================================================================
   「全部加入」（老师 2026-10-01：「加上一个全部添加的按钮，而不是只能一个一个添加」）

   放在结果列表顶部、结果计数那一行下面。★ 用主色描边而不是实心填充：
   这是一颗**一次改动很多数据**的按钮，不该长得比"加入"（逐个那条）更抢眼 ——
   老师点它之前应该先看到下面有哪些词。
   =========================================================================== */
.ws-add-all {
  width: 100%;
  margin: 6px 0 8px;
  justify-content: center;
  color: var(--t-primary);
  background: var(--c-card-hi);
  border-color: var(--c-accent-dim);
}

.ws-add-all:hover:not(:disabled) {
  color: var(--t-bright);
  background: var(--c-hover);
}

.ws-add-all:disabled {
  opacity: 0.6;
  cursor: progress;
}


/* ===========================================================================
   S42（2026-10-12）：**任务 = 真练一局** —— 正确率 / 用时 / 练习明细

   老师原话：「把练习模式做成教师布置作业的主要方式……用**正确率**来表示
   学生完成了作业与否：一个正确率 0% 的学生肯定是**没做**；一个 100% 和一个
   90% 的学生也能体现出他们**花费的时间**。而且**老师看不到学生做了什么、
   练了什么**。」（这一段就是要修掉那一句）

   下面这些类只服务两屏：
     · 学生那屏顶部的完成状态条     .ws-done（已有）+ .ws-mine（我的错词）
     · 老师那屏的练习明细           .ws-summary / .ws-sum / .ws-table / .ws-wchip
   =========================================================================== */

/* ---- 学生：我上次没拼对的词 ---- */
.ws-mine {
  margin: 10px 0 4px;
  padding: 10px 14px;
  border: 1px solid var(--c-border, rgba(255, 255, 255, .12));
  border-radius: 10px;
  background: var(--c-card-hi, rgba(255, 255, 255, .03));
}

/* ---- 老师：汇总那几格 ---- */
.ws-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 16px;
}

.ws-sum {
  flex: 1 1 150px;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--c-border, rgba(255, 255, 255, .12));
  border-radius: 10px;
  background: var(--c-card-hi, rgba(255, 255, 255, .03));
}

.ws-sum-v {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--t-bright, #fff);
}

.ws-sum-l {
  font-size: 13px;
  color: var(--t-primary, #dbe6f5);
}

.ws-sum-n {
  font-size: 11px;
  line-height: 1.4;
  color: var(--t-dim, #8b9bb4);
}

/* ---- 老师：逐学生那张表 ---- */
/* ★ 窄屏会横向溢出，所以给一层可横向滚动的壳 —— 明细表列多，
   宁可让老师左右滑，也不要把数字挤成两行（数字断行以后就没法扫了）。 */
.ws-scroll {
  overflow-x: auto;
  margin: 4px 0 18px;
}

.ws-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13px;
}

.ws-table th,
.ws-table td {
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-border, rgba(255, 255, 255, .1));
}

.ws-table th {
  font-weight: 700;
  color: var(--t-dim, #8b9bb4);
  white-space: nowrap;
}

.ws-table .ws-num {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 已完成的那一行给一点底色：老师一眼扫过去就知道"哪些人交齐了" */
.ws-trow.is-done td {
  background: rgba(120, 200, 130, .06);
}

/* 错词小标：一行里最多十二个，多的折到下一行 */
.ws-wchip {
  display: inline-block;
  margin: 0 6px 4px 0;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(240, 140, 130, .45);
  background: rgba(240, 140, 130, .12);
  color: #f0a89e;
  font-size: 12px;
  line-height: 1.7;
  white-space: nowrap;
}

/* ===========================================================================
   S43（2026-10-12 晚）：**40% 门槛**带来的三态与"统计优先"视图
   ★ S44（2026-10-13）：老师把口径收成"**已完成 / 未完成**"两档 + 成绩看最高。

   老师原话（S43 那一轮）：
     「完整完成一次练习，才会自动判定有无完成作业。而且**正确率低于 40% 的
       作业不会标记已经完成，和打分**。低于 40% 的不会提交完成，但是会记录
       准确率。」
     「**教师不用看到每个学生练习的情况**，但是可以做一个**统计性质的记录**。」

   老师原话（★ S44 这一轮，逐字）：
     「**完成情况只以最高算，不超过最高，不记录成绩，但保留练习记录。
       超过最高分，刷新成绩，保存记录练习。**」
     「**未达标的不显示，计算到未完成里让老师决定。**」
     「**不算全班完成率，所以不管分母多大的事。**」

   ⇒ 样式上要解决三件事：
     ① **老师那屏只有两档**（已完成 / 未完成）—— "练过但未达标"不再是独立一档，
        但仍要有**视觉提示**（那几行淡金底），老师扫一眼看得出"这几个在练"；
        ★ 而**学生那屏**照旧保留"未达标"那句话（他自己该知道差在哪，
          下一句永远是"可以再来一局"）—— 金色小标留给学生那屏用。
     ② 「成绩（最高）」与「最近正确率」两列都要读得清（同一个表格里两个不同的数）；
     ③ 统计优先 ⇒ 细节收进 `<details>`，默认不占屏。
   ★ 颜色一律用 theme.css 里已有的令牌或与既有 rg 值同族的**半透明**写法
     （见上面 .ws-wchip / .ws-trow 那两处的先例），不新造主题色 ——
     造了新色，暗色主题一改这里就会变成一块补丁。
   =========================================================================== */

/* ---- ① 三态小标：练过但未达标（.ws-pill.is-bad）----
   ★ 修一处**早就存在**的空当：S42 起 `wordset.js` 就在用 `is-bad`，
     但 CSS 里从来没定义过（老师那屏"没做"的小标一直是无样式的）。
     这一轮它有了正式语义：**练过但未达标**。
   ★ 刻意用**金色系**（与 .ws-warn 同族）而不是红色：未达标是"还没到线"，
     不是错误；红色会让学生觉得自己做错了什么（老师要的是鼓励他再练一局）。
   ★★ S44：这个类**只留给学生那几屏**（`statusText`）—— 老师那屏的
     「是否完成」一列只用 `.is-on`（已完成）与 `.ws-pill-todo`（未完成），
     因为老师原话是「未达标的不显示」（那一档并进"未完成"）。 */
.ws-pill.is-bad {
  color: #f0c774;
  border-color: rgba(240, 199, 116, .5);
  background: rgba(240, 199, 116, .12);
}

/* 学生那屏顶部状态条：未达标那一句用同一族金色（与"已完成"的绿色分开） */
.ws-done.is-bad {
  color: #f0c774;
}

/* ---- ② 统计格子（★ S44：已完成 / 未完成 两档各给一点底色）---- */
.ws-sum-done .ws-sum-v {
  color: #cfe9a4;
}

/* ★ S44：「未完成」那一格（= 名册 − 已完成，未到线的并进这里）。
   ★ 为什么不再有 `.ws-sum-below`：老师原话「未达标的不显示，计算到未完成里
     让老师决定」—— 那一格**撤了**，这个类跟着撤，免得 CSS 里留一条
     谁也画不出来的规则（下一次改样式的人会以为它还活着）。
   ★ 颜色用与 `.ws-trow.is-below` 同族的金（"这里面有一部分是在练的"），
     而不是红 —— 未完成不是错误。 */
.ws-sum-notdone {
  border-color: rgba(240, 199, 116, .45);
}

.ws-sum-notdone .ws-sum-v {
  color: #f0c774;
}

.ws-table .ws-num.is-none {
  color: var(--t-dim);
}

/* 练过但没到线的那一行：淡金底（不是绿底，也别做成红 —— 见上面那段理由）。
   ★ S44：底色**保留**（它是"这几个在练"的视觉提示，不是一档标签），
     文字那一列只有"已完成 / 未完成"两个词。 */
.ws-trow.is-below td {
  background: rgba(240, 199, 116, .06);
}

/* 「还在做」那一行（点开过、还没交卷）：不加底色，只把状态字放暗 ——
   它既不是成绩也不是失败，只是"还没结束"。 */
.ws-trow.is-doing td {
  color: var(--t-muted, var(--t-dim));
}

/* 「一条记录都没有」的行（`students[]` 里目前不会出现，见 _stats 的注释）。
   ★ 留着它是因为前端的状态是**四档**（done/below/doing/none），
     四档都得有落点；真要在明细里列出"全班没做的人"时，样式不用现补。
   ★★ 同时也是 `_audit_classes.py` 的口径要求：JS 里出现过的类名必须在 CSS 里有定义。 */
.ws-trow.is-none td {
  color: var(--t-dim);
}

/* ---- ③ 分数分布（分档条形）---- */
.ws-dist {
  margin: 4px 0 18px;
}

.ws-dist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
}

.ws-dist-l {
  flex: 0 0 150px;
  font-size: 12px;
  color: var(--t-dim);
}

.ws-dist-track {
  flex: 1 1 auto;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  overflow: hidden;
}

.ws-dist-fill {
  height: 100%;
  border-radius: 999px;
  background: rgba(120, 200, 130, .55);
  transition: width .2s ease;
}

/* 第一档（0–39%，就是"未达标"那一档）用金色系 —— 与三态小标同一套语言 */
.ws-dist-fill.is-bad {
  background: rgba(240, 199, 116, .5);
}

.ws-dist-n {
  flex: 0 0 56px;
  text-align: right;
  font-size: 12px;
  color: var(--t-dim);
  font-variant-numeric: tabular-nums;
}

/* ---- ④ `<details>` 折叠（细节默认收起，数据还在）----
   ★ 为什么用原生 `<details>` 而不是自己写一个展开按钮：
     零依赖、键盘可达、`open` 是浏览器行为（不需要 JS 事件，
     也就不需要"重画之后按钮还灵不灵"那一类排查）。 */
.ws-details {
  margin: 14px 0 8px;
  padding: 10px 12px;
  border: 1px dashed var(--c-line);
  border-radius: var(--r-md, 10px);
}

.ws-details-h {
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--t-bright);
}

.ws-details-body {
  margin-top: 10px;
}

.ws-detail-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.ws-detail-h {
  flex: 0 0 auto;
  margin-right: 6px;
  font-size: 12px;
  color: var(--t-primary);
}