/*
 * 采集样式
 *
 * 和制作那套一样：移动端优先，基础样式按窄屏写，再用 min-width: 681px 补宽屏
 * （681 跟站点主题的断点对齐）。配色一律走 sim/shared.css 的 --game-*
 * （语义色单一来源），这里不再写死语义色。
 *
 * 布局照 FF14 采集/收藏品的实证设计（见 FF14改造方案.md 3.2.1、3.3）：
 *   成长度带档位刻度、完整度补"还能采 N 次"、装备加成常显一行、
 *   采集物一格一种且整格就是按钮、记录改成技能图标条。
 *
 * ---------------------------------------------------------------------------
 * 高度：**不设上限、不自己滚**，整页一条滚动条。
 *
 * 这里原来有 `max-height: calc(100dvh - 190px); overflow-y: auto`。
 * 已经拆掉了 —— 手机上两层滚动体感很差（手指在板子里划，板子滚到头之后
 * 页面纹丝不动，得再划一次）。这一屏改造前内容 974px、要塞进约 620px 的板子，
 * 所以内部要滚 326px，那种"划不动"最明显；现在内容本身降到 627px，
 * 整页一条滚动条滚起来就自然了。
 *
 * 注意**不能**留 `overflow-x: hidden`：按 CSS 规则，x 轴一旦不是 visible，
 * y 轴就会被算成 auto，于是又变回一个嵌套滚动容器。
 * 横向溢出改由 `node scripts/measure_ui.js --check` 盯着。
 * ---------------------------------------------------------------------------
 */

.gather-workspace {
  /* 横向保险用它，不用 overflow-x: hidden ——
     `clip` 只裁不滚，不会把 y 轴算成 auto（于是不会又变回嵌套滚动容器）。
     本地量不出横向溢出，但线上有站点主题的 css（本地取不到），
     宽度可能和这里量的不一样，所以留一道裁切兜底。 */
  overflow-x: clip;
  padding: 10px;
}

.gather-workspace [hidden] {
  display: none;
}

.gather-error {
  margin-bottom: 16px;
  border: 1px solid var(--game-fault);
  border-radius: 12px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--game-fault) 14%, var(--surface));
  color: var(--game-fault);
  font-size: 13px;
  line-height: 1.6;
}

/* ---------------- 标题 ---------------- */

.gather-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.gather-heading h2 {
  margin: 2px 0 0;
  font-size: 1.05rem;
  font-weight: 650;
}

.gather-heading .eyebrow {
  display: block;
}

.gather-status {
  border: 1px solid var(--game-line);
  border-radius: 999px;
  padding: 5px 11px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.gather-status[data-kind="active"] {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--game-line));
  color: color-mix(in srgb, var(--accent) 70%, var(--text));
}

.gather-status[data-kind="done"] {
  border-color: color-mix(in srgb, var(--game-ready) 55%, var(--game-line));
  color: var(--game-ready);
}

.gather-status[data-kind="error"] {
  border-color: color-mix(in srgb, var(--game-risk) 55%, var(--game-line));
  color: var(--game-risk);
}

/* ---------------- 顶栏：换个区域 + 已采 N 次 ----------------
 * 和制作的 `STEP N` 对称：这边记已经采了几次。 */

.gather-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 10px;
  margin-bottom: 10px;
}

.gather-step {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  border: 1px solid var(--game-line);
  border-radius: 10px;
  padding: 3px 10px 4px;
  background: var(--surface-2);
}

.gather-step-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.gather-step strong {
  color: var(--text);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* ---------------- 成长度（主数值 + 档位刻度） ----------------
 * 刻度是"这个区域里所有采集物的门槛合并去重后的位置"。
 * 合成去重后每种区域只有 6 条（实测：柑橘林 {20,30,50,60,80,100}），
 * 346px 上放得下；全画（最多 9 条）会挤成一团 ——
 * 每种采集物自己那一格里另有它自己的小刻度。 */

.gather-growth {
  display: grid;
  gap: 4px;
  padding: 8px 10px;

  border: 1px solid var(--game-line);
  border-radius: 14px;
  background: var(--surface-2);}

.gather-growth-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.gather-growth-name {
  color: var(--muted);
  font-size: 11.5px;
}

/* 成长度是这一屏的主数值，所以它比别处的数值再大一档 */
.gather-growth-value {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gather-growth-value b {
  font-size: 18px;
  font-weight: 700;
}

.gather-growth-value i {
  color: var(--game-cap);
  font-size: 11.5px;
  font-style: normal;
}

.gather-growth-track {
  position: relative;
  overflow: hidden;
  height: 15px;
  border-radius: 999px;
  background: var(--game-track);

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

.gather-growth-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--game-gain) 70%, var(--accent)),
    var(--game-gain)
  );
  transition: width 0.18s ease;
}

.gather-growth-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.gather-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 24%, transparent);
}

.gather-growth-note {
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

/* ---------------- 两条资源 ----------------
 * 和制作的仪表同一种写法：名字 | 条 | 数值，注释行写"还剩几次"。 */

.gather-pools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 9px;
  margin-top: 8px;
}

.gather-pool {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "name track value"
    "note note  note";
  align-items: center;
  gap: 3px 8px;
  min-width: 0;
}

.gather-pool-name {
  grid-area: name;
  color: var(--muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.gather-pool-track {
  grid-area: track;
  overflow: hidden;
  min-width: 0;
  height: 12px;
  border-radius: 999px;
  background: var(--game-track);

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

.gather-pool[data-pool="integrity"] {
  --pool: var(--game-budget);
}

.gather-pool[data-pool="gp"] {
  --pool: var(--game-points);
}

.gather-pool-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--pool, var(--accent));
  transition: width 0.18s ease;
}

.gather-pool-value {
  grid-area: value;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gather-pool-value b {
  font-size: 15px;
  font-weight: 700;
}

.gather-pool-value i {
  color: var(--game-cap);
  font-size: 11px;
  font-style: normal;
}

.gather-pool-note {
  grid-area: note;
  color: var(--muted);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gather-pool[data-low="true"] .gather-pool-value b {
  color: var(--game-risk);
}

.gather-pool[data-low="true"] .gather-pool-fill {
  background: var(--game-risk);
}

/* ---------------- 装备加成：常显一行 ----------------
 * FF14 把"为什么现在收益更高"写成一行条件文字
 * （例：`識質力62以上→HQ獲得率＋5％［発動中］`），而不是埋进属性面板。
 * 改造前这句话只在开局出现一次。 */

.gather-gear {
  margin: 8px 0 0;
  border-left: 2px solid color-mix(in srgb, var(--game-ready) 65%, var(--game-line));
  padding: 2px 0 2px 8px;
  color: color-mix(in srgb, var(--game-ready) 70%, var(--muted));
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

/* ---------------- 采集物：一格一种，整格就是按钮 ----------------
 * 手机上两列。改造前是单列的长条（3 种 391px），而且是"长条里再嵌一个按钮"——
 * 既违反"整格就是按钮"这条规矩，又白占一半宽度。 */

.gather-section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0 5px;
  font-size: 12.5px;
  font-weight: 650;
}

.gather-section-title small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

/* 产出卡：这个区域出什么、各档给多少、现在在哪一档。
 * **它不是按钮** —— 一个区域只有一种采集物之后，这是"看一眼"的信息，
 * 采集那一格搬去了动作栏（和提纯 / 集中鉴定并排）。
 *
 * 改造前这里是"一格一种、整格就是采集按钮"的网格；一个区域三种东西时
 * 那样才对（点哪格 = 采哪种），只剩一种之后网格就是白占一行。 */
.gather-produce-box {
  display: grid;
}

.gather-produce {
  display: grid;
  align-content: start;
  gap: 6px;
  border: 1px solid var(--game-line);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  /* 这一块的主色：成长度那条线的颜色（"往上填的产出"都吃这个） */
  --item: var(--game-gain);
}

/* 现在这一档采得到东西：整块亮起来 —— 不用读文字也知道有得采 */
.gather-produce[data-active="true"] {
  border-color: color-mix(in srgb, var(--item) 60%, var(--game-line));
  background: color-mix(in srgb, var(--item) 10%, var(--surface-2));
}

.gather-produce-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.gather-produce-head strong {
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gather-item-wear {
  flex: none;
  color: var(--game-risk);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

/* 成簇：这个点一次本来就有两份（铜矿、菌丝）。"复数物品"的两处场合之一 */
.gather-item-cluster {
  flex: none;
  color: var(--game-ready);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.gather-item-tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.gather-tier {
  border-radius: 6px;
  padding: 1px 5px;
  background: color-mix(in srgb, var(--bg) 45%, var(--surface-2));
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;

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

.gather-tier b {
  font-weight: 700;
}

.gather-tier[data-reached="true"] {
  color: var(--text);
}

.gather-tier[data-active="true"] {
  border-color: var(--item, var(--accent));
  background: color-mix(in srgb, var(--item, var(--accent)) 24%, var(--surface-2));
  color: var(--text);
}

.gather-tier-hq {
  color: var(--game-gold);
  font-style: normal;
  font-weight: 700;
}

/* 这一档拿不到优质：不发亮、也不写 +0（写 +0 读起来像"优质有 0 份"） */
.gather-tier[data-hq="none"] {
  color: color-mix(in srgb, var(--muted) 72%, transparent);
}

/* 这种采集物自己的小刻度：它的门槛落在成长度轴的哪儿 + 当前位置指针 */
.gather-item-scale {
  position: relative;
  display: block;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 45%, var(--surface-2));
}

.gather-item-mark {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 1px;
  background: color-mix(in srgb, var(--text) 30%, transparent);
}

.gather-item-pointer {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  border-radius: 1px;
  background: var(--game-gain);
  box-shadow: 0 0 4px color-mix(in srgb, var(--game-gain) 60%, transparent);
}

/* 采不到东西时的白字：还差多少到第一档。现在写在**采集那一格**上
 * （它搬去动作栏了），所以字号跟着动作格走。 */
.gather-pick-none {
  color: var(--game-risk);
  font-size: 11px;
}

/* ---------------- 选地点 / 选区域 ----------------
 * 一进来先看到这些，而不是成长度和完整度 —— 得先让玩家决定去哪儿。
 * 一格一个地方，整格就是按钮。 */

.gather-back {
  margin: 0;
  border: 1px solid var(--game-line);
  border-radius: 999px;
  padding: 5px 12px;
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  touch-action: manipulation;
}

.gather-back:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--game-line));
}

.gather-regions,
.gather-areas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.gather-item-cell {
  display: grid;
}

.gather-region,
.gather-area {
  display: grid;
  align-content: start;
  gap: 3px;
  min-height: 62px;
  border: 1px solid var(--game-line);
  border-radius: 12px;
  padding: 8px 9px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.06s ease;
}

.gather-region:hover:not(:disabled),
.gather-area:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--game-line));
}

.gather-region:active:not(:disabled),
.gather-area:active:not(:disabled) {
  transform: translateY(1px);
}

.gather-region:focus-visible,
.gather-area:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.gather-region-head,
.gather-area-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
}

.gather-region-head strong,
.gather-area-head strong {
  font-size: 13.5px;
  line-height: 1.35;
}

.gather-region-count {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 区域里有什么材料 —— 挑区域时唯一真正要看的东西 */
.gather-area-items {
  margin: 0;
  color: color-mix(in srgb, var(--accent) 55%, var(--muted));
  font-size: 11px;
  line-height: 1.5;
}

.gather-region-state,
.gather-area-state {
  align-self: end;
  margin-top: 2px;
  color: var(--game-budget);
  font-size: 11.5px;
  font-weight: 650;
}

.gather-area[data-locked="true"] {
  border-style: dashed;
  opacity: 0.72;
}

.gather-area[data-locked="true"] .gather-area-state {
  color: var(--game-gold);
  font-weight: 400;
}

/* 解锁按钮：买不起就是灰的，价格直接写在按钮上 */
.gather-unlock {
  border: 1px solid color-mix(in srgb, var(--game-gold) 55%, var(--game-line));
  border-radius: 999px;
  padding: 5px 12px;
  background: color-mix(in srgb, var(--game-gold) 12%, var(--surface));
  color: var(--game-gold);
  font: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  touch-action: manipulation;
}

.gather-unlock:disabled {
  border-color: var(--game-line);
  background: var(--surface-2);
  color: var(--muted);
  cursor: not-allowed;
}

/* ---------------- 动作：技能格 ----------------
 * 和制作那边同一个形状：快捷键角标 + 名字 + 效果 + 消耗。
 * 手机上两列，每格约 44px 高 —— 贴着 44pt 触控底线，不许再压。 */

.gather-actions {
  display: grid;
  /* 六个技能排两行三列（原来是三个技能两列）。和制作那边的动作栏同一个排法。 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 9px;
}

.gather-action {
  position: relative;
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 62px;
  border: 1px solid var(--game-line);
  border-radius: 12px;
  padding: 12px 9px 9px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 0.15s ease, background 0.15s ease;
}

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

.gather-action:active:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--game-line));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
}

.gather-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.gather-action-key {
  position: absolute;
  top: 5px;
  left: 6px;
  min-width: 14px;
  border-radius: 4px;
  padding: 0 3px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

.gather-action-name {
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gather-action-effect {
  color: var(--game-gain);
  font-size: 11.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

/* 采集那一格上的份数：「+4 普通 +1 优质」—— 数字比"普通/优质"那两个字重 */
.gather-action-effect b {
  font-size: 12.5px;
  font-weight: 700;
}

.gather-action-effect b.gather-hq {
  color: var(--game-gold);
}

/* 采不到时那一格写的是"还差 N 点到 X% 档"，用警示色 */
.gather-action-effect .gather-pick-none {
  color: var(--game-risk);
  font-weight: 600;
}

.gather-action[data-action="scrutiny"] .gather-action-effect {
  color: var(--game-points);
}

.gather-action-cost {
  color: var(--muted);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

/* 一次拿几组的动作（高产 / 王者之选）在右上角挂一个 ×N —— 和左上角的快捷键角标对称 */
.gather-action-runs {
  position: absolute;
  top: 5px;
  right: 6px;
  border-radius: 4px;
  padding: 0 3px;
  background: color-mix(in srgb, var(--game-gold) 20%, transparent);
  color: var(--game-gold);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
}

/* 保养是"补回来"，用恢复色；王者之选是"高档位的大丰收"，用金色 */
.gather-action[data-action="maintain"] .gather-action-effect {
  color: var(--game-ready);
}

.gather-action[data-action="kings"] .gather-action-effect {
  color: var(--game-gold);
}

/* 等级不够的技能格：虚线 + 只写等级（和锁着的配方 / 区域卡同一个做法） */
.gather-action[data-locked="true"] {
  border-style: dashed;
}

/* ---------------- 结果 ---------------- */

.gather-result {
  margin-top: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--game-line));
  border-radius: 12px;
  padding: 11px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.gather-result p {
  margin: 6px 0 9px;
  font-size: 13px;
  line-height: 1.75;
}

/* 统计：**一对一行**（理由同制作那边 ——
 * "两对一行"在手机上会把 `1fr` 压到十几像素，「耗时 27 游戏分钟（一天的 1.9%）」
 * 就成了一列一个字。用户拿手机截图抓到的就是这个。） */
.gather-result-stats {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  margin: 0 0 12px;
  font-size: 12px;
}

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

.gather-result-stats dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* 结算里那个折叠块（「这一趟的数字」）装的是 dl */
.result-more > dl {
  margin: 9px 0 11px;
}

.gather-result .button {
  width: 100%;
}

/* ---------------- 记录 ----------------
 * 记录条本身是共用零件（.step-panel / .step-strip / .step-chip，在 sim/shared.css 里）——
 * 制作与采集的记录长得一模一样，所以这里只留面板自己的外壳。 */

.gather-log-panel {
  margin-top: 13px;
  padding: 9px 12px;

  border: 1px solid var(--game-line);
  border-radius: 12px;
  background: var(--surface-2);}

/* ---------------- 宽屏 ---------------- */

@media (min-width: 681px) {
  .gather-workspace {
    border-radius: 18px;
    padding: 18px;
  }

  .gather-heading {
    gap: 14px;
    margin-bottom: 16px;
  }

  .gather-heading h2 {
    font-size: 1.12rem;
  }

  .gather-status {
    padding: 6px 12px;
    font-size: 12px;
  }

  /* 宽屏上动作栏排三列：提纯 / 集中鉴定 / 采集正好一栏一个 */
  .gather-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .gather-pools {
    gap: 12px 16px;
  }

  .gather-result {
    border-radius: 14px;
    padding: 16px;
  }

  .gather-result .button {
    width: auto;
  }

  .gather-log-panel {
    margin-top: 16px;
    border-radius: 14px;
    padding: 12px 16px;
  }
}