/* 「凑近看一条鱼」：从鱼谱那一格长出来的一块石板。
 *
 * ---- 为什么单独一个文件 ----
 *
 * 这一层挂在 `document.body` 上——浮层不能待在 `.view` 里，那儿的
 * `overflow`/`transform` 会裁掉它。于是它**够不到** `.view[data-view="codex"]`
 * 这个作用域，而 css/codex.css 的规矩是"每一条选择器都限定在那之内"
 * （那个文件顶上那段，`codexUI.test.js` 钉着）。够不到作用域的东西
 * 就不该待在那个文件里。
 *
 * 爆炸半径靠**自己的类名前缀**保证：`.fd-scrim` / `.fd-slab` 只有这一层用。
 *
 * 结构和过渡在 js/ui/views/fishDetail.js（那儿有为什么不用通用弹窗的账）。
 * 这里只管它是什么材料。
 */
.fd-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  /* 其余龛退到它后面变暗。不是一块不透明的幕——用户要的是"从那一格长出来",
     那就得看得见它从哪儿来。 */
  background: rgba(2, 6, 8, 0.62);
  --stone-face: #111e1e;
  --stone-deep: #080e0e;
  --stone-seam: #060909;
  --stone-lit: #ffc07a;
}
.fd-scrim[hidden] { display: none; }

/* 石板本身：**凸出来的一块**（墙是凹的一格格，这块是被搬出来读的）。
   上棱迎光、下方一道缝、底下一道接地影——凸出的三笔（判据②）。 */
.fd-slab {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  grid-template-areas: 'left right' 'actions actions';
  gap: var(--sp-4) var(--sp-5);
  width: min(880px, 100%);
  max-height: min(88vh, 900px);
  /* ⚠️ **石板自己不滚。** 滚动权下放到右栏（下面那条）。
   *
   * 石板一旦是滚动容器，任何弹出层（称号那一列）待在里面都会
   * ① 被它裁、② 把自己算进它的滚动范围——实测冒出一条 10px 的滚动条,
   * 而那一列自然高 448px、石板才 453px。
   *
   * 而且右栏本来就是会变长的那一栏（词条 + 血脉 + 战绩），
   * 让它自己滚比让整块面板滚更合理：左栏那一列（鱼 + 名字 + 称号）是固定的。 */
  overflow: visible;
  /* 第一行（左右两栏）可以被压缩，第二行（动作）按内容。
     不给 `minmax(0, 1fr)` 的话 grid 行会被内容撑开，右栏就滚不起来。 */
  grid-template-rows: minmax(0, 1fr) auto;
  padding: var(--sp-5);
  border-radius: 1px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-face) 92%, var(--stone-deep)) 0%,
    var(--stone-deep) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 18%, transparent),
    0 1px 0 var(--stone-seam),
    0 22px 44px -18px rgba(0, 0, 0, 0.86);
}

.fd-slab .fd-left { grid-area: left; min-width: 0; min-height: 0; }
.fd-slab .fd-right {
  grid-area: right;
  min-width: 0;
  /* `min-height: 0` 是 grid 项目能滚的必要条件：不给的话它的最小尺寸是
     内容尺寸，`overflow` 永远不生效（和 tank.css 里 `#tank-list` 同一条）。 */
  min-height: 0;
  overflow: auto;
}
.fd-slab .fd-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  /* 一道缝把动作和内容分开：它们作用于整条鱼，不属于任何一栏。 */
  padding-top: var(--sp-4);
  box-shadow: inset 0 1px 0 var(--stone-seam);
}
.fd-slab .fd-actions button { flex: 1 1 8em; }

/* ---- ⚠️ 不可逆的那一个，**不许是最大的那个按钮** ----
 *
 * 这里原来是 `flex-basis: 100%`——本意是"给它单开一行，和另外三个分开"。
 * 分开是对的，代价没算到：`flex-wrap` 换行之后它独占整行，实测 **832px，
 * 而另外三个各 272px**。于是全游戏唯一一个不可逆的动作变成了这张卡上
 * 最大、最靠下（手机上离拇指最近）的那个按钮。
 *
 * 改成"自己一行的**右端**、只占内容宽"：
 *   flex-grow 0     —— 不许被拉满
 *   flex-basis auto —— 宽度就是"丢回水里"四个字
 *   margin-left auto—— 推到行尾，和三个良性动作之间隔开一整段空白
 *
 * 判据一句话：**分开靠位置，不靠面积。** 用面积去表达"这个不一样"，
 * 表达出来的是"这个最重要"。
 */
.fd-slab .fd-actions .danger-btn {
  flex: 0 0 auto;
  margin-left: auto;
}

/* 左边那一格：和墙上的龛同一种凿法（凹进），只是大一号。
   里面那条鱼是**活的**（fishDetail 里那段账）。 */
.fd-slab .fd-tank {
  position: relative;
  aspect-ratio: 2 / 1;
  margin-bottom: var(--sp-3);
  border-radius: 1px;
  overflow: hidden;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-deep) 88%, transparent) 0%,
    var(--stone-deep) 100%);
}

/* ---- 鱼外面这一圈：**和墙上的壁龛一模一样** ----
 *
 * 用户："显示鱼的外面这个框，做成和壁龛里一样的"。
 *
 * ⚠️ 这几条是从 `css/codex.css` 的 `.view[data-view="codex"] .cc-glass`
 * **抄过来的**——两处必须一致，而它们够不到同一个作用域（那一条要
 * `.view` 前缀，这一层挂在 body 上）。`tools/equipTitle.test.js` 里有一条
 * 把两边对着读，抄错或者一边改了另一边没改会红。
 *
 * 四条边**四个色**是这一圈的全部要点：四周一样亮的一圈读作贴上去的边框,
 * 四面明暗不同才读作凿口的内壁。 */
.fd-slab .fd-glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  border-style: solid;
  border-width: 2px;
  border-top-color: color-mix(in srgb, var(--stone-seam) 92%, transparent);
  border-left-color: color-mix(in srgb, var(--stone-seam) 74%, transparent);
  border-bottom-color: color-mix(in srgb, var(--stone-lit) 34%, transparent);
  border-right-color: color-mix(in srgb, var(--stone-lit) 20%, transparent);
  box-shadow:
    inset 0 9px 15px -6px color-mix(in srgb, var(--stone-seam) 92%, transparent),
    inset 8px 0 13px -8px color-mix(in srgb, var(--stone-seam) 70%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 22%, transparent);
}
/* 龛底那层沙：一条从底边往上渐没的亮带，不是一条线
   （和 `.cc-glass::after` 同一笔——水下的龛里没有水面，有的是沉在底上的沙）。 */
.fd-slab .fd-glass::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 9%;
  background: linear-gradient(180deg,
    rgba(206, 190, 162, 0) 0%,
    rgba(206, 190, 162, 0.14) 58%,
    rgba(208, 192, 164, 0.32) 100%);
}
.fd-slab .fd-jar { display: block; width: 100%; height: 100%; }

.fd-slab .fd-name {
  margin: 0;
  font-size: var(--fs-lg);
  color: var(--ink);
}
.fd-slab .fd-code {
  margin: 2px 0 var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ---- 称号：**自己画的下拉** ----
 *
 * 用户："称号下拉框的样式不是自己画的"。原生 `<option>` 弹出来的那一列是
 * 系统控件，浏览器完全不让改样式——在一块石头面板上打开一个灰白列表,
 * 前面所有拟物都白做了。
 *
 * 触发器 = 一块**凸出**的小牌（按得下去）；展开的列表 = 一格格**凹进**的槽
 * （和墙上的龛同一条：凿进去的才是"位置"，浮起来的才是"按钮"）。
 *
 * ⚠️ 档位色（`.title-chip.t1/t2/t3`）这里不用了——列表里每一行是一个**选项**,
 * 不是一枚展示中的徽章。戴着的那一枚靠"刻纹亮起来"表示，和图鉴墙上一样。
 */
.fd-slab .fd-title-pick {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--sp-2);
}
.fd-slab .fd-title-cap {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}

/* 触发器：凸出的三笔（上沿 lit / 下方 seam / 接地影）。 */
.fd-slab .fd-title-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  width: 100%;
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 1px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-face) 96%, var(--stone-lit)) 0%,
    var(--stone-face) 100%);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: var(--cur-pointer);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 26%, transparent),
    0 1px 0 var(--stone-seam),
    0 3px 6px -4px rgba(0, 0, 0, 0.8);
}
.fd-slab .fd-title-trigger[aria-expanded='true'] {
  /* 展开时按回石面：凹进去 = "这块牌子被按住了"。 */
  box-shadow:
    inset 0 2px 4px -1px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 10%, transparent);
}
/* 那个小三角：一道凿出来的槽口，不是一个字符（字符会跟着字体变形）。 */
.fd-slab .fd-title-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid color-mix(in srgb, var(--stone-lit) 52%, var(--ink-dim));
}

/* 展开的列表：一列凿进石面的槽。 */
/* ⚠️ 选择器是 `.fd-scrim` 之下而不是 `.fd-slab` 之下：这一列挂在石板
   **外面**（账在 fishDetail.js 的 listMarkup 上面）。
   `position: fixed` + 位置由 JS 量出来给——CSS 这边不写 top/left/width。 */
.fd-scrim .fd-title-list {
  position: fixed;
  z-index: 2;
  overflow: auto;
  margin: 0;
  padding: 3px;
  list-style: none;
  border-radius: 1px;
  background: var(--stone-deep);
  box-shadow:
    inset 0 2px 4px -1px rgba(0, 0, 0, 0.7),
    0 10px 20px -10px rgba(0, 0, 0, 0.9);
}
.fd-scrim .fd-title-list[hidden] { display: none; }
.fd-scrim .fd-title-list:focus-visible { outline: none; }

.fd-scrim .fd-title-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 26px;
  padding: 0 6px;
  border-radius: 1px;
  color: var(--ink-dim);
  cursor: var(--cur-pointer);
}
/* 键盘走到的那一项。**和鼠标 hover 是同一个样子**——两种输入方式看到的
   "当前在哪儿"不该不一样。 */
.fd-scrim .fd-title-opt.is-active,
.fd-scrim .fd-title-opt:hover:not([aria-disabled='true']) {
  color: var(--ink);
  background: color-mix(in srgb, var(--stone-face) 70%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 18%, transparent);
}
/* 戴着的那一枚：刻纹亮起来（和图鉴墙上"刻过了"同一笔）。 */
.fd-scrim .fd-title-opt[aria-selected='true'] .fd-opt-name {
  color: var(--stone-lit);
  text-shadow: 0 0 6px color-mix(in srgb, var(--stone-lit) 46%, transparent);
}
/* 还没拿到：暗着，而且**点不动**（键盘也跳过，那一半在 JS 里）。 */
.fd-scrim .fd-title-opt.is-locked {
  color: var(--ink-faint);
  cursor: default;
}
.fd-scrim .fd-opt-hint {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.fd-slab .fd-no-title {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  line-height: 1.5;
}

/* 关掉：一枚凿在右上角的小凹格，不是一个圆按钮。 */
.fd-slab .fd-close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  /* ⚠️ **它必须在最上面。** 少这一句的后果在窄屏上一眼可见：鱼缸那一圈
     壁龛边（`.fd-glass`，后出现的兄弟）画在它上面，`×` 被切掉一角,
     读起来像渲染坏了。
     一个浮在内容上的控件，层级不能靠"谁写在后面"决定。 */
  z-index: 3;
  width: 26px;
  height: 26px;
  /* ⚠️ **min-height 要显式清零。** 基础层给按钮定了一个最小高度（触摸目标),
     它会把这枚 26px 的凹格撑成 26×44——实测就是这个数，屏上是一个竖着的
     长方块，而设计是一个方的凹格。
     一个尺寸写死的控件，要连别人给的下限一起挡掉。 */
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 1px;
  background: var(--stone-deep);
  color: color-mix(in srgb, var(--stone-lit) 52%, var(--ink-dim));
  font-size: var(--fs-md);
  line-height: 1;
  cursor: var(--cur-pointer);
  box-shadow:
    inset 0 2px 4px -1px rgba(0, 0, 0, 0.66),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 12%, transparent);
}

/* 窄屏：两栏叠成一栏。左边那一格仍在最上面——先看见鱼，再看数值。 */
@media (max-width: 720px) {
  .fd-slab {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'left' 'right' 'actions';
    /* ⚠️ **行也得跟着改，不然左栏会塌。**
     *
     * 宽屏那一份是 `minmax(0, 1fr) auto`：两栏并排 ⇒ 第一行装内容、
     * 第二行装按钮。叠成一栏之后区域变成三个，而那条规则只写了两行——
     * 于是 `1fr` 落在**左栏**上，右栏和按钮各拿一个隐式的 auto。
     * 石板有 `max-height`，右栏一长（这一轮加了强化那一块），
     * 1fr 就被压到 0：**左栏塌掉，名字和称号叠在数值上面**。
     *
     * 改成让**右栏**吃那个 1fr——它本来就是这块石板上唯一会滚的格子
     * （`overflow: auto`，见上面的 .fd-right）。左栏和按钮各自 auto，
     * 它们的高度由内容定死，压它们不会让它们变短，只会让它们叠上去。
     *
     * 判据：**`1fr` 要给那个能滚的格子。** 给一个不会滚的格子，
     * 空间不够时它的表现不是滚动，是溢出到别人身上。 */
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  /* ---- 关闭键要有自己的一格 ----
   *
   * 宽屏上石板的右上角是空的（右栏的标签页从下面一点开始），所以 `×` 浮在
   * 那儿不碍事。**窄屏叠成一栏之后，第一块就是鱼缸**——实测 `×` 在
   * (321, 205, 26×44)，而鱼缸右缘在 335：压着。
   *
   *   判据：**一个浮起来的控件，要么它下面永远是空的，要么给它让一格。**
   *   "宽屏上正好没东西"不是一个能带到窄屏的前提。
   *
   * 让出 26px 的顶，同时把鱼缸压扁一档（2/1 → 12/5）——**让出来的高度
   * 从它自己身上补回来**，整块不变高。用户："可以缩小点鱼框的大小。"
   */
  .fd-slab .fd-tank {
    margin-top: 32px;
    aspect-ratio: 12 / 5;
  }
}

/* ==================== 石板上的 UI 原子 ====================
 *
 * ⚠️ 石板本身是石头了（上面那条），但**里面的按钮和数字格还是全站的 UI 蓝**
 * ——实测按钮底 `rgb(22,35,58)`、圆角 6px、蓝边。那几块面积最大,
 * 所以整块看上去还是一张 UI 卡片。判据②：凸出还是凹进决定亮暗。
 *
 * ⚠️ 作用域一律 `.fd-slab` 之内。裸 `button` 用在每一屏（对战 HUD、结算、
 * 弹窗、顶栏），不限定就会炸到全站——占卜屏那一轮的 `button:hover` 就是
 * 这么冒出一个盖住整座宫殿的深蓝方块的。
 */

/* 动作按钮：**凸出**的三笔——上沿一道 lit、下方 seam、底下接地影。 */
.fd-slab .fd-actions button {
  border: 0;
  border-radius: 1px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-face) 96%, var(--stone-lit)) 0%,
    var(--stone-face) 100%);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 26%, transparent),
    0 1px 0 var(--stone-seam),
    0 4px 8px -5px rgba(0, 0, 0, 0.8);
}
.fd-slab .fd-actions button:hover {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 42%, transparent),
    0 1px 0 var(--stone-seam),
    0 5px 10px -5px rgba(0, 0, 0, 0.86);
}
/* 按下去就是**压回石面**：接地影收掉、上棱变暗。位移交给 box-shadow,
   不用 transform——带 transform 的祖先会成为 fixed 后代的包含块。 */
.fd-slab .fd-actions button:active {
  box-shadow:
    inset 0 2px 4px -1px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 10%, transparent);
}
/* ---- ⚠️ 「丢回水里」的红：**这一段是补回来的，不是新加的** ----
 *
 * 上面那条注释原来写着"红是语义色，一个值都不动——只把形改成石头"。
 * 意图对，但没落地：`.fd-slab .fd-actions button` 里那句 `color: var(--ink)`
 * 的特异性是 (0,2,1)，而 `style.css` 里那条裸 `.danger-btn` 是 (0,1,0)
 * ——**石头皮肤顺手把语义色盖掉了**，实测这颗按钮的 computed color 和旁边
 * 三个逐位相同（rgb(219,228,240)），连 hover 都不变红（`.danger-btn:hover`
 * 是 (0,2,0)，同样输）。
 *
 * 这已经是这颗按钮**第二次**失去区分度了。第一次是删 `.codex-actions`
 * 时带走的（账记在 style.css 的 .danger-btn 上面），这一次是加一层皮肤时
 * 盖掉的。所以判据要补一条：**"删一个类时去看谁在依赖它"不够，加一层
 * 皮肤时也要去看它盖住了谁。**
 *
 * 落地：静态是**暗着的红**（找得到，但不刺眼、不招手），hover / focus 才
 * 亮成 --bad。`border` 那句不用补——石头按钮本来就 `border: 0`，颜色全部
 * 走文字。
 */
.fd-slab .fd-actions .danger-btn {
  color: color-mix(in srgb, var(--bad) 52%, var(--ink-dim));
}
.fd-slab .fd-actions .danger-btn:hover,
.fd-slab .fd-actions .danger-btn:focus-visible {
  color: var(--bad);
}

/* 「鱼谱已满」那一档的灰。 */
.fd-slab .fd-actions .is-off {
  opacity: 0.5;
  cursor: default;
  box-shadow: inset 0 2px 4px -1px rgba(0, 0, 0, 0.6);
}

/* 战绩那四个数：**凹进去的格子**（凿在石面上的一格），不是浮起来的卡片。 */
.fd-slab .fd-facts > div {
  border: 0;
  border-radius: 1px;
  background: var(--stone-deep);
  box-shadow:
    inset 0 2px 4px -1px rgba(0, 0, 0, 0.66),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 12%, transparent);
}

/* ---- 词条：**图鉴墙上那排牌子的样子** ----
 *
 * 用户："词条显示改为图鉴里的样式（但是颜色可以贴合这个界面）"。
 *
 * 图鉴那一排（`css/atlas.css` 的 `.aw-slot`）是**凿进墙里的一块小牌**：
 * 凹进去（上缘内阴影 + 下缘极淡的反光）、名字是发光的刻纹。
 * 这里照搬那个形，只把光换成这一屏的暖色（那就是"颜色贴合"）。
 *
 * ⚠️ **刻纹的颜色仍然是 polarity 的语义色**（正面绿 / 取舍紫 / 负面红）——
 * 那是信息（这条词条是好是坏），不是风格。换底不换语义色（判据①）。
 * 所以这里只写"底和凿法"，`color` 一个字都不碰。 */
.fd-slab .cb-affix {
  min-height: 28px;
  padding: 4px 8px;
  border: 0;
  border-radius: 1px;
  background: var(--stone-deep);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  box-shadow:
    inset 0 2px 4px -1px rgba(0, 0, 0, 0.66),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 12%, transparent);
  /* 刻纹在发光。发的是它自己那一档的颜色，所以用 currentColor。 */
  text-shadow: 0 0 6px color-mix(in srgb, currentColor 46%, transparent);
}
.fd-slab .cb-affix:hover {
  box-shadow:
    inset 0 2px 4px -1px rgba(0, 0, 0, 0.66),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 26%, transparent);
}
.fd-slab .cb-affixes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: var(--sp-3);
}

/* 血脉印记那一条 / 「再传 1 代」那段说明：凹进的一条槽。 */
.fd-slab .fd-mark,
.fd-slab .fd-lineage {
  border-radius: 1px;
  background: var(--stone-deep);
  box-shadow:
    inset 0 2px 4px -1px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 10%, transparent);
}

/* ⚠️ 三条数值条这里**一个字都不写**。
 *
 * 我一度把它盖成方角的石槽。用户："数值条的样式则改为占卜里的样式"——
 * 而占卜那一套（`css/divination.css` 的 `.sp-track` / `.sp-fill`）**本来就是
 * 全站的**（那些选择器没有作用域），详情页天然就在用它。
 * 所以正确的做法不是"照着再写一遍"，是**把我的覆盖删掉**。
 *
 * 那一套里有几个数是量出来的，别在这儿重来一遍：槽高 6→9（6px 在 1240 宽
 * 上是一根线）、行距 5→9（"三个属性条太挤在一起了"）。 */

/* ---- 血脉 / 代数 / 战绩之间的间隔 ----
 *
 * 用户："血脉/第几代/数据上下的间隔太小了"。
 *
 * 判据和占卜屏那三条数值条是同一条：**要分开读的几块，之间必须留得下
 * "这是几件事"那口气。** 那边实测 5px 的行距配 6px 的槽读作一块条形码,
 * 抬到 9（≈ 槽高）才各自成行。这里同理——三块内容原来靠默认 margin 挨着,
 * 读作一整块。间距取 `--sp-4`（一档"分区"距），比块内的行距明显大一级。 */
.fd-slab .fd-right > * + * { margin-top: var(--sp-4); }
.fd-slab .fd-lineage { display: grid; gap: var(--sp-2); }
.fd-slab .fd-facts { gap: var(--sp-2); }

/* ==================== 词条强化：**凿在石板上的一格一格** ====================

   结构和账在 js/ui/views/boostPanel.js。这里只管它是什么材料。

   形follow那一屏已经立住的三条（css/stone.css 顶上那段）：

     ① 换底不换语义色 —— 词条名仍然是 polarity 那三档（正面绿/取舍紫/负面红）,
        这里一个 `color` 都不写。
     ② 凸出还是凹进决定亮暗 —— 买按钮是**凸出**的（上沿一道 lit + 下方 seam
        + 接地影），级数格是**凹进**的（上缘 inset 阴影）。
     ③ 体是冷的，光才是暖的 —— 大面积用 face，只有窄边用 lit。

   ⚠️ 级数格那三个方块**不是进度条**。进度条的语义是"离终点还有多远"，
   而这里第 3 格永远到不了也没关系（血脉可能已经占掉两格）。所以它们是
   三个各自独立的凹格 —— 一个装满了的格子和一个空格子，形状一样、亮暗不同。 */

.fd-slab .bp-panel {
  border-radius: 1px;
  padding: var(--sp-3);
  background: var(--stone-deep);
  box-shadow:
    inset 0 2px 4px -1px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 10%, transparent);
  display: grid;
  gap: var(--sp-3);
}

.fd-slab .bp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.fd-slab .bp-bal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
/* 余额那个数迎着光：它是这一块里唯一"值钱"的东西。 */
.fd-slab .bp-bal b {
  color: color-mix(in srgb, var(--stone-lit) 82%, #fff);
  text-shadow: 0 0 6px color-mix(in srgb, var(--stone-lit) 34%, transparent);
}
/* 「打出来的，买不到」是**规则**，不是提示。刻得浅一点，但一直在。 */
.fd-slab .bp-rule {
  color: var(--ink-faint);
  font-size: var(--fs-xs);
}

.fd-slab .bp-affix { display: grid; gap: var(--sp-2); }
.fd-slab .bp-affix + .bp-affix {
  padding-top: var(--sp-3);
  /* 一道暗缝，不是一条 border —— 石头之间是缝，不是线。 */
  box-shadow: inset 0 1px 0 var(--stone-seam);
}

.fd-slab .bp-line {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.fd-slab .bp-name {
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  /* 刻纹在发光，发的是它自己那一档的颜色（和 .cb-affix 同一条）。 */
  text-shadow: 0 0 6px color-mix(in srgb, currentColor 46%, transparent);
}

/* ---- 级数：三个凹格 ---- */
.fd-slab .bp-pips { display: inline-flex; gap: 3px; }
/* 空格子也要读得出是个格子：全暗的话三个凹坑等于没画。
   凿边那一道极淡的迎光就是"这里是个坑"的全部证据。 */
.fd-slab .bp-pip {
  width: 9px;
  height: 9px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--stone-seam) 82%, var(--stone-lit));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7);
}
/* 买来的那几级：格子里点着灯。 */
.fd-slab .bp-pip.is-on {
  background: color-mix(in srgb, var(--stone-lit) 62%, var(--stone-deep));
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.4),
    0 0 5px color-mix(in srgb, var(--stone-lit) 40%, transparent);
}
.fd-slab .bp-deltas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
}
.fd-slab .bp-delta {
  color: var(--ink-faint);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.fd-slab .bp-delta s { opacity: 0.55; }
.fd-slab .bp-delta b { color: #d5c2f0; }

/* ---- 成长路线：三级**凿在石头上的刻度** ----
 *
 * 这里原来是两个并排的按钮（「加强上行」/「减弱下行」）。玩家不选臂之后
 * （2026-08-29，账在 js/sim/affixes.js 的 plan），这一块要回答的问题变了：
 * 不是"我该点哪个"，是"**这条词条会长成什么样**"。
 *
 * 所以形也换了：一条竖着的三级刻度，走过的点着灯，下一级迎着光，
 * 还没到的是暗的。和试炼池池沿那 12 道刻痕是同一种语汇——
 * **一条被凿出来的、看得见全程的路**。 */
.fd-slab .bp-plan {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.fd-slab .bp-step {
  display: grid;
  grid-template-columns: 1.4em 5em 1fr;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 3px 6px;
  border-radius: 1px;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  /* 没到的那几级：一道凿进去的浅槽。 */
  background: color-mix(in srgb, var(--stone-seam) 60%, transparent);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
/* 走过的：槽里点着灯。 */
.fd-slab .bp-step.is-done {
  color: var(--ink-dim);
  background: color-mix(in srgb, var(--stone-lit) 10%, var(--stone-seam));
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.4),
    inset 2px 0 0 color-mix(in srgb, var(--stone-lit) 52%, transparent);
}
/* 下一级：**凸出来**——它是唯一现在能发生的那一件事。 */
.fd-slab .bp-step.is-next {
  color: var(--ink);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-face) 88%, var(--stone-lit)) 0%,
    var(--stone-face) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 28%, transparent),
    0 1px 0 var(--stone-seam),
    0 2px 5px -3px rgba(0, 0, 0, 0.85);
}
.fd-slab .bp-step-n {
  font-variant-numeric: tabular-nums;
  text-align: right;
  opacity: 0.7;
}
.fd-slab .bp-step-arm { letter-spacing: 0.04em; }
.fd-slab .bp-step-eff {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-2);
  min-width: 0;
}
/* 路线里那些数字比正文暗一档：它们是依据，不是动作。 */
.fd-slab .bp-stepline { font-variant-numeric: tabular-nums; }
.fd-slab .bp-stepline s { opacity: 0.5; }
.fd-slab .bp-stepline b { color: #d5c2f0; }

.fd-slab .bp-arms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}
.fd-slab .bp-buy,
.fd-slab .bp-drop {
  min-height: 30px;
  padding: 4px 10px;
  border: 0;
  border-radius: 1px;
  color: inherit;
  font: inherit;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-face) 92%, var(--stone-lit)) 0%,
    var(--stone-face) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 22%, transparent),
    0 1px 0 var(--stone-seam),
    0 2px 4px -2px rgba(0, 0, 0, 0.8);
}
.fd-slab .bp-buy:hover:not([disabled]),
.fd-slab .bp-drop:hover {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 36%, transparent),
    0 1px 0 var(--stone-seam),
    0 3px 6px -2px rgba(0, 0, 0, 0.85);
}
/* 按下去 = **凹进**。上沿的 lit 翻成 inset 阴影，整块下移 1px:
   接地影同时收掉——一块压回槽里的石头不会再有影子。 */
.fd-slab .bp-buy:active:not([disabled]),
.fd-slab .bp-drop:active {
  transform: translateY(1px);
  background: var(--stone-deep);
  box-shadow: inset 0 2px 4px -1px rgba(0, 0, 0, 0.7);
}
/* 买不了：**平的**。既不凸也不凹——一块没被凿过的面。
   ⚠️ 只降对比、不降到读不出来：为什么买不了写在 title 上，
   那句话得有人看得见才有用。 */
.fd-slab .bp-buy[disabled] {
  cursor: not-allowed;
  color: var(--ink-faint);
  background: color-mix(in srgb, var(--stone-face) 60%, var(--stone-deep));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 6%, transparent);
}
/* 价钱：右边一小格凹进去的数。 */
.fd-slab .bp-price {
  padding: 1px 5px;
  border-radius: 1px;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  background: var(--stone-seam);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}
/* 退掉那一颗刻意更暗：它是**撤销**，不该和两个买的按钮抢。 */
.fd-slab .bp-drop {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-face) 74%, var(--stone-deep)) 0%,
    var(--stone-deep) 100%);
}

.fd-slab .bp-empty,
.fd-slab .bp-loading {
  color: var(--ink-faint);
  font-size: var(--fs-sm);
}

/* ==================== 派遣：**同一块石板上再凿一格** ====================

   结构和账在 js/ui/views/dispatchView.js。这里只管它是什么材料。

   材料和强化那一块**完全一样**（凹进去的深格 + 凸出的按钮）——刻意的：
   它们在这一屏上是同级的两件事（"给这条鱼加点什么" / "让这条鱼去哪儿"），
   给它们两种材质会让人以为其中一件更重要。

   ---- 选项的三档 ----

     选中了  **凸出** + 一道冷沿
     没选中  **平的** —— 它是一个可选项，不是空槽
     在外面  整块换成一行字 —— 那一刻**没有可做的决定**，摆一排灰按钮只是噪音 */

.fd-slab .dp-panel {
  border-radius: 1px;
  padding: var(--sp-3);
  background: var(--stone-deep);
  box-shadow:
    inset 0 2px 4px -1px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 10%, transparent);
  color: var(--ink-dim);
  font-size: var(--fs-sm);
}

.fd-slab .dp-send,
.fd-slab .dp-away {
  border-radius: 1px;
  padding: var(--sp-3);
  background: var(--stone-deep);
  box-shadow:
    inset 0 2px 4px -1px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 10%, transparent);
  display: grid;
  gap: var(--sp-2);
}

.fd-slab .dp-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.fd-slab .dp-cap {
  color: var(--ink-faint);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  /* 两行的标签对齐：它们是同一列的两个字。 */
  min-width: 3em;
}
.fd-slab .dp-opts { display: flex; gap: var(--sp-1); flex-wrap: wrap; }

/* 没选中：平的一块。 */
.fd-slab .dp-opt {
  display: grid;
  gap: 1px;
  padding: 5px 10px;
  border: 0;
  border-radius: 1px;
  color: inherit;
  font: inherit;
  font-size: var(--fs-xs);
  text-align: left;
  cursor: var(--cur-pointer);
  background: color-mix(in srgb, var(--stone-face) 62%, var(--stone-deep));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 8%, transparent);
}
/* 选中了：凸出 + 一道冷沿。**不用语义色**——这里没有好坏，只有去哪儿。 */
.fd-slab .dp-opt.is-on {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-face) 86%, var(--stone-lit)) 0%,
    var(--stone-face) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 30%, transparent),
    0 1px 0 var(--stone-seam),
    0 3px 8px -4px rgba(0, 0, 0, 0.9);
}
.fd-slab .dp-opt.is-on .dp-name {
  text-shadow: 0 0 6px color-mix(in srgb, var(--stone-lit) 40%, transparent);
}
.fd-slab .dp-blurb {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* 「派它出去」：凸出的一块石片，按下去翻成凹进（和 tt-buy 同一条）。 */
.fd-slab .dp-go {
  justify-self: start;
  margin-top: 3px;
  padding: 4px 14px;
  border: 0;
  border-radius: 1px;
  color: inherit;
  font: inherit;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  cursor: var(--cur-pointer);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-face) 88%, var(--stone-lit)) 0%,
    var(--stone-face) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 26%, transparent),
    0 1px 0 var(--stone-seam),
    0 2px 5px -3px rgba(0, 0, 0, 0.85);
}
.fd-slab .dp-go:active {
  transform: translateY(1px);
  background: var(--stone-deep);
  box-shadow: inset 0 2px 4px -1px rgba(0, 0, 0, 0.7);
}

.fd-slab .dp-note,
.fd-slab .dpa-note {
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--fs-xs);
}

/* 在外面：一行字。

   ⚠️ 「还有多久」**不迎光**。上一版给它加了 lit + 辉光，结果它和这一屏里
   「声望 370」、以及右上角那枚珍珠数长得一模一样——这一屏的暖光**已经
   被钱占了**，一个倒计时借那身衣服会被读成这里有笔收益。它只是一个事实。 */
.fd-slab .dp-away { grid-template-columns: auto 1fr; align-items: baseline; }
.fd-slab .dpa-where { letter-spacing: 0.08em; }
.fd-slab .dpa-left {
  justify-self: end;
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
}
.fd-slab .dpa-note { grid-column: 1 / -1; }


/* ==================== 右栏那两页（第七十五批） ====================

   用户："把强化在详情页面里单独开一页"。

   这两页回答的是两个问题——**它是什么**（三维、词条、生涯、称号）和
   **给它加点什么**（强化）。挤在一栏里的时候，一条满词条的鱼要滚三屏才
   看得到底下的动作栏，而上半屏那些数值在买强化时一眼都用不上。

   形跟着这一屏的石头走：选中的那一页**凸出**，另一页是平的。
   ⚠️ 不用下划线/色条标选中——那是网页的语汇，这一屏是石板。 */

.fd-slab .fd-tabs {
  display: flex;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
}
.fd-slab .fd-tabs button {
  padding: 4px 14px;
  border: 0;
  border-radius: 1px;
  color: var(--ink-dim);
  font: inherit;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  cursor: var(--cur-pointer);
  /* 没选中：平的一块石头 */
  background: color-mix(in srgb, var(--stone-face) 62%, var(--stone-deep));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 8%, transparent);
}
.fd-slab .fd-tabs button[aria-selected="true"] {
  color: var(--ink);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-face) 88%, var(--stone-lit)) 0%,
    var(--stone-face) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 26%, transparent),
    0 1px 0 var(--stone-seam),
    0 2px 5px -3px rgba(0, 0, 0, 0.85);
}
/* 分页之间的间距和原来那一栏一致：换了页，节奏不该跟着换。 */
.fd-slab .fd-page > * + * { margin-top: var(--sp-4); }