/*
 * 生产模拟器 · 跨看板共用样式
 *
 * 为什么有这个文件：部署.md 里记着这笔欠账 ——
 * 「三个看板里表示同一个意思的颜色还没有一处集中的定义，是各写各的」，
 * 而且「跨看板的东西目前靠主题变量统一」。
 * 同一批语义色以前在 craft.css / gather.css / sim.css 里各写一遍
 * （优质金出现 14 次、成功绿出现 7 次），改配色要三个文件一起看，漏一个就串。
 *
 * 这里放两类东西：
 *   一、语义色（--game-*）—— 三个看板都引
 *   二、**真正跨看板的零件** —— 制作与采集长得一模一样的那些
 *       （「怎么玩」折叠块、技能图标条）。只出现在一个看板里的东西不进这里。
 *
 * ---------------------------------------------------------------------------
 * 一、语义色的两条设计规矩
 *
 * 1. 色相按 FF14 原版定（取证见 FF14改造方案.md 3.2.1 补报）：
 *    原版制作窗口的「进展」是黄绿/柠檬绿，「耐久」是亮蓝方块。
 *    所以进展 = 黄绿、耐久 = 亮蓝 —— 这跟改造前（进展蓝、耐久绿）正好相反。
 *    品质条的填充色在原版截图里恰好是空槽、取不到，所以品质沿用原来的紫。
 *
 * 2. **同类的东西用同一个色**：
 *    进展与成长度都是"往上填的产出"，都吃 --game-gain；
 *    耐久与完整度都是"会被消耗的预算"，都吃 --game-budget。
 *    于是制作与采集两个看板现在一眼就能对上（改造前这边绿那边蓝，各说各的）。
 *
 * 亮度都在 70~80% 一档（沿用原来那批值），所以明暗两套主题下都不用重对对比度。
 *
 * 谁引它：sim/index.html、craft/index.html、gather/index.html。
 * 三个页面**都**已经依赖 /sim/（都引 /sim/rules.js），所以这里不新增耦合。
 */

:root {
  /* ---------------- 产出：往上填的 ---------------- */
  /* 进展 / 成长度 —— 原版的进度条是黄绿，不是蓝 */
  --game-gain: #a8cf6b;
  /* 品质 —— 原版取不到填充色，沿用改造前的紫 */
  --game-quality: #c9a2e8;

  /* ---------------- 预算：会被消耗的 ---------------- */
  /* 耐久 / 完整度 —— 原版的耐久方块是亮蓝 */
  --game-budget: #7fb3e8;
  /* 制作力 / 采集力 —— 两条"投资"资源，都是金 */
  --game-points: #e8c37f;

  /* ---------------- 状态 ---------------- */
  /* 可以做 / 已达标 / 成功 */
  --game-ready: #86c9a0;
  /* 危险（快见底、快推完） */
  --game-risk: #e8a37f;
  /* 报错 / 白做 */
  --game-fault: #f5aaa0;
  /* 星级 / 优质 / 钱 / 解锁价 —— 同一个"贵"的意思 */
  --game-gold: #f0c869;

  /* ---------------- 零件用的形状 ---------------- */
  /* 轨道底色：比 surface-2 再暗一点，让填充看得清 */
  --game-track: color-mix(in srgb, var(--bg, #10121a) 55%, var(--surface-2, #1a1e29));
  /* 描边色兜底：站点主题没给 --line 时也要画得出边框 */
  --game-line: var(--line, #2b3140);
  /* 数值排版的"上限"那一半：小而灰 */
  --game-cap: color-mix(in srgb, var(--text, #e8ecf4) 46%, transparent);
}

/* ===========================================================================
 * 二、跨看板零件
 * =========================================================================== */

/* ---------------- 弹窗（底部抽屉） ----------------
 * 重的东西放这一层，不参与页面往下堆（仓库、设备商店、技能详情都用它）。
 * 手机上从底部升起来，这是移动端最顺手的形状；宽屏居中。
 *
 * 原来这套叫 `sim-*`、定义在 sim.css 里 —— 只有外壳能用。
 * 制作与采集的独立页面也要弹技能详情，所以搬到这儿并改成 `sheet-*`。 */

.sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  align-items: end;
  background: color-mix(in srgb, #06070c 62%, transparent);
}

.sheet-overlay[hidden] {
  display: none;
}

.sheet {
  display: flex;
  flex-direction: column;
  max-height: 86dvh;
  border: 1px solid var(--game-line);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  background: var(--surface);
  box-shadow: 0 -8px 28px color-mix(in srgb, #000 45%, transparent);
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: none;
  border-bottom: 1px solid var(--game-line);
  border-radius: 16px 16px 0 0;
  padding: 12px 14px;
  background: var(--surface-2);
}

.sheet-head strong {
  font-size: 14.5px;
}

.sheet-head small {
  color: var(--muted);
  font-size: 11px;
}

/* 关掉：右上角一个圆的 ×，触控目标够大 */
.sheet-close {
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--game-line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.sheet-close:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--game-line));
}

.sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 14px 16px;
}

/* 抽屉里的"三行数字"（效果 / 消耗 / 耗时）与一段说明。
 * 原本是鼠标悬停的 tooltip（原版就是），手机上没有悬停，所以搬进抽屉。 */
.sheet-stats {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 12px;
  margin: 0 0 12px;
  font-size: 12.5px;
}

.sheet-stats dt {
  color: var(--muted);
  white-space: nowrap;
}

.sheet-stats dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}

.sheet-note {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.8;
}

/* ---------------- 「怎么玩」折叠块 ----------------
 * 教学文案每次都在，但只有第一炉真的要看。默认折叠：一屏就是一屏，
 * 展开由玩家自己决定。（这不是把信息藏起来 —— 一句话的入口就在那儿。） */

.view-help {
  margin: 8px 0 0;
  border-radius: 10px;
  padding: 0 12px;
  background: var(--surface-2);

  border: 1px solid var(--game-line);}

.view-help > summary {
  cursor: pointer;
  padding: 8px 0;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  touch-action: manipulation;
}

.view-help[open] > summary {
  border-bottom: 1px solid var(--game-line);
}

.view-help p {
  margin: 9px 0 11px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.75;
}

/* ---------------- 「工序」那一屏的零件 ----------------
 * 制作与采集都有这一屏（把动作序列写出来，看它成不成），所以样式是共用的。
 * 形状照 FF14 生产模拟器的工序编辑器：上面一句判决 + 数字，中间一条图标序列，
 * 下面一排可用技能。
 *
 * 与参考物最大的一点不同：**没有"求解"**。这里的问题就是"怎么排"，
 * 把答案算出来就没得玩了（基地里写过：工具、游戏、求解器是三条路）。 */

.board-section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 10px;
  margin: 10px 0 6px;
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

.board-section-title small {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0;
}

/* 判决卡：左边一条色带表示"成 / 不成 / 还没打完" */
.plan-verdict {
  display: grid;
  gap: 5px;
  border: 1px solid var(--game-line);
  border-left-width: 3px;
  border-radius: 12px;
  padding: 8px 10px;
  background: var(--surface-2);
}

.plan-verdict[data-kind="empty"] {
  border-left-color: var(--game-line);
}

.plan-verdict[data-kind="open"] {
  border-left-color: var(--game-points);
}

.plan-verdict[data-kind="ok"] {
  border-left-color: var(--game-ready);
}

.plan-verdict[data-kind="hq"] {
  border-left-color: var(--game-gold);
}

.plan-verdict[data-kind="fail"],
.plan-verdict[data-kind="blocked"] {
  border-left-color: var(--game-risk);
}

.plan-line {
  margin: 0;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.65;
}

.plan-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-metric {
  display: grid;
  gap: 1px;
  border-radius: 8px;
  padding: 4px 7px;
  background: color-mix(in srgb, var(--bg) 40%, var(--surface-2));

  border: 1px solid var(--game-line);}

.plan-metric-label {
  color: var(--muted);
  font-size: 10.5px;
}

.plan-metric b {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* 工序条：一格一步，点一格看明细 */
.plan-strip .step-chip {
  cursor: pointer;
  touch-action: manipulation;
}

.plan-strip .step-chip:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--game-line));
}

.plan-tools {
  display: grid;
  /* 试过三个按钮挤一行：按钮被压窄之后「存成挂机手法」换行，整块反而更高。
     两列 + 每行两个，是量出来的最矮排法。 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.plan-tools .button {
  margin: 0;
}

/* 「按这条走」是这一屏的主按钮，占满整行 */
.plan-tools .button.primary {
  grid-column: 1 / -1;
}

.plan-path {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

/* ---------------- 技能图标条 ----------------
 * 一次动作 = 一个格子，格子上是动作名的第一个字，角上写第几步。
 * 原版的一套轮转（宏）就是这个形状：一排动作图标，按顺序读。
 * 制作与采集的记录长得一模一样，所以是共用零件 —— 只有色调按动作分。
 * 每一步的产出/消耗/耗时挂在 title 上，手机上不占地方。 */

/* 记录面板：标题与图标条**并排一行**，不各占一行。
 * 标题单独占一行要 19px，而"制作记录"这四个字竖着放在图标条左边就够了。 */

.step-panel {
  display: flex;
  align-items: center;
  gap: 10px;
}

.step-panel .step-panel-title {
  flex: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
}

.step-strip {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-chip {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--game-line);
  border-radius: 7px;
  background: var(--surface-2);
}

.step-mark {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
  text-align: center;
}

.step-index {
  position: absolute;
  right: 1px;
  bottom: 0;
  color: var(--muted);
  font-size: 8.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 色调按"这一步动的是哪条资源"给，不按动作 id —— 以后加动作不用改这里 */
.step-chip[data-tone="gain"] {
  border-color: color-mix(in srgb, var(--game-gain) 45%, var(--game-line));
}

.step-chip[data-tone="quality"] {
  border-color: color-mix(in srgb, var(--game-quality) 45%, var(--game-line));
}

.step-chip[data-tone="points"] {
  border-color: color-mix(in srgb, var(--game-points) 45%, var(--game-line));
}

.step-chip[data-tone="budget"] {
  border-color: color-mix(in srgb, var(--game-budget) 45%, var(--game-line));
}

/* 吃加成的那一步底色亮起来（原版插件是在图标上挂百分比徽章） */
.step-chip[data-boosted="true"] {
  background: color-mix(in srgb, var(--game-quality) 18%, var(--surface-2));
  border-color: color-mix(in srgb, var(--game-quality) 60%, var(--game-line));
}

/* 最后一步就是刚刚那一下，描边点亮 */
.step-chip:last-child {
  border-color: var(--accent, #7fb3e8);
}

.step-empty {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 28px;
}

/* ---------------- 看板顶栏右角：等级 + 状态 ----------------
 * 等级跟"状态"挤在同一个角上，因为它就是"下一个配方 / 采集点开不开"的那道门，
 * 而那道门正写在下面那些卡上 —— 两个数在同一屏里，玩家才不用来回跑玩家页。
 * 制作、采集两个看板共用，所以写在 shared.css 里。 */
.board-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.board-level {
  color: var(--muted);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------------- 列表卡上的「完成情况」 ----------------
 * 几星 / 做过 / 没做过 / 一遍几份 —— 决定"下一炉打不打这个"要的就是这个数。 */
.board-mine {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* 卡片里那条动作行：左边是状态（备料 / 开一趟），右边是「挂机」小片。
   小片长在卡片**里面**，点它只挂机、不会把这一格点开 —— 这是"找得到"和
   "不会误开"之间的那条线。 */
.craft-recipe-foot,
.gather-area-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 2px;
}

/* 卡片上的「挂着」——**只是个状态牌，不是按钮**（动作在里面那一层）。
   用户："挂机应该放在里面一层，可以外面显示状态，点进去可以控制是否开始挂机。" */
.card-hang {
  flex: none;
  border: 1px solid color-mix(in srgb, var(--game-ready) 55%, var(--game-line));
  border-radius: 999px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--game-ready) 12%, var(--surface-2));
  color: var(--game-ready);
  font-size: 10.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* 挂机那一行：**在"开始之前"那一屏**（制作的备料、采集的开一趟），
 * 不在列表卡上 —— 用户："更换挂机别放在外面，开始之前就好了，不然容易误触更换。"
 * 三种状态同高：还没手法（灰虚线）/ 挂机 · 一遍 N 分 / 挂着 · 一遍 N 分。 */
.board-hang {
  width: 100%;
  border: 1px solid var(--game-line);
  border-radius: 12px;
  padding: 8px 10px;
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 0.12s ease, color 0.12s ease;
}

.board-hang:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--game-line));
  color: var(--text);
}

/* 还没跑通过：带子照样在（形态稳定），只是灰着、虚线 */
.board-hang[data-state="none"] {
  border-style: dashed;
  color: color-mix(in srgb, var(--muted) 80%, transparent);
}

.board-hang[data-current="true"] {
  border-color: color-mix(in srgb, var(--game-ready) 55%, var(--game-line));
  color: var(--game-ready);
  opacity: 1;
}

.board-hang:disabled {
  opacity: 0.75;
  cursor: default;
}

/* 挂机行坐在"开始"那些按钮上面一点 */
.craft-hang-row,
.gather-hang-row {
  margin: 10px 0 0;
}

/* 结算那一屏：挂机行和「再来一次」**并排** —— 刚跑完就能挂，又不另占一行高度 */
.board-done-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.board-done-row .craft-hang-row,
.board-done-row .gather-hang-row {
  margin: 0;
}

/* 挂机槽：两个（制作一个、采集一个） */
.idle-slots {
  display: grid;
  gap: 6px;
}

/* 进度条：眼下这一遍跑到哪儿了。挂机那一屏每 10 秒重画一次，它自己会往前走。 */
.idle-progress {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.idle-progress-name {
  color: var(--muted);
  font-size: 11px;
}

.idle-progress-value {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.idle-progress-track {
  position: relative;
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 55%, var(--surface-2));
}

.idle-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--game-ready) 75%, transparent);
}

/* 挂机页的「去配方 / 去采集点」 */
.idle-go {
  margin-left: auto;
}