/* ==========================================================================
   skin-posthuman.css — 皮肤 H「后人类·生物终端」（specs/024，概念展板 H 落地）
   --------------------------------------------------------------------------
   一句话：血肉与机器难分 —— 卡是芯片（切角+虚线走线），票根是组织切片报告单，
   雷达是目镜分划板，注记全等宽丝印；12 族 = 12 种组织学染色剂。

   纪律同 023：只覆写同名 token、零 @font-face（等宽走系统 Consolas，零成本）、
   不动几何。切角只落在无命中扩展区组件；.chip 不 clip。
   ========================================================================== */

/* ---------- 1. 亮档 token：骨白 × 胞质红 × 胞核青 × 电路金 ---------- */
html[data-skin="posthuman"] {
  --paper: #E4DFD2;
  --paper-2: #EFEBE0;
  --paper-3: #D8D2C0;
  --ink: #171613;
  --ink-soft: #45423A;
  --ink-faint: #57534A;              /* 骨白上实算 5.6:1 */

  /* .btn-accent 吃 --vermillion（胞质红）：奶油字 6.6:1 ✓；
     .btn-primary 吃 --pine（胞核青）：纸色字 4.7:1 ✓ */
  --vermillion: #8E2F5C;
  --pine: #3D5FA8;
  --pine-deep: #263B6B;
  --gold: #A07B2D;

  --line: rgba(23, 22, 19, 0.44);
  --line-soft: rgba(23, 22, 19, 0.20);

  --dot: rgba(23, 22, 19, 0.07);
  --tape: rgba(160, 123, 45, 0.52);
  --scrim: rgba(23, 22, 19, 0.58);
  --on-accent: #FCEEF4;
  --on-tag: #EAF0FF;
  --vermillion-soft: rgba(142, 47, 92, 0.42);
  --flow-night: #5C1E3A;
  --check-idle: #171613;
  --thumb-paper: #EFEBE0;

  --shadow-paper: 0 3px 0 rgba(23, 22, 19, 0.28);
  --shadow-lift: 4px 4px 0 rgba(23, 22, 19, 0.20);
  --shadow-tag: 2px 2px 0 rgba(23, 22, 19, 0.55);
  --shadow-thumb: 2px 2px 0 rgba(23, 22, 19, 0.3);

  --font-display: "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: Consolas, "Courier New", ui-monospace, monospace;

  --r-card: 4px;
}

/* ---------- 2. 背景：菌丝网络实拍 + 点阵丝印格 ---------- */
html[data-skin="posthuman"] .flow-canvas { display: none; }
html[data-skin="posthuman"] body::after {
  background-image:
    radial-gradient(rgba(23, 22, 19, 0.10) 1px, transparent 1.4px),
    linear-gradient(rgba(228, 223, 210, 0.86), rgba(228, 223, 210, 0.92)),
    url("../../assets/skins/posthuman-bg.jpg");
  background-size: 9px 9px, auto, cover;
  background-repeat: repeat, no-repeat, no-repeat;
  background-position: 0 0, center, center;
}
html[data-skin="posthuman"] body::before { background-image: none; }

/* ---------- 3. 组件：芯片切角 + 虚线走线 ---------- */
html[data-skin="posthuman"] .card,
html[data-skin="posthuman"] .ticket {
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
html[data-skin="posthuman"] .card {
  border: 1.5px dashed var(--line);
  background: var(--paper-2);
}
html[data-skin="posthuman"] .tile,
html[data-skin="posthuman"] .tier-cell { border: 1.5px dashed var(--line); background: var(--paper-2); }
/* 026：只有 seg 那一圈虚线框拿掉（老板：全局不要矩形外框）。
   磁贴与三档格仍然保留虚线 —— 那是“芯片封装”的语言，不是一排格子中间的硬框。
   这一档的面板感改由纸底轨道 + 等宽字 + 选中项内描边承担。 */
html[data-skin="posthuman"] .seg { border: none; background: var(--paper-2); padding: 3px; border-radius: 10px; }
html[data-skin="posthuman"] .seg-item { border: none; }
html[data-skin="posthuman"] .chip {
  border: 1px solid var(--ink);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
html[data-skin="posthuman"] .chip[aria-pressed="true"] {
  background: #C9D8A8;
  color: var(--ink);
  box-shadow: -3px -3px 0 rgba(160, 123, 45, 0.8) inset;
}
html[data-skin="posthuman"] .tile[aria-pressed="true"] {
  background: var(--vermillion);
  color: var(--on-accent);
  border-style: solid;
}
html[data-skin="posthuman"] .tile[aria-pressed="true"] .mark { color: var(--gold); }
html[data-skin="posthuman"] .tile[aria-pressed="true"] .label,
html[data-skin="posthuman"] .tile[aria-pressed="true"] .tiny,
html[data-skin="posthuman"] .tile[aria-pressed="true"] .faint { color: var(--on-accent); opacity: 1; }

html[data-skin="posthuman"] .seg-item[aria-pressed="true"] {
  background: #C9D8A8;
  color: var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: -3px;
}
html[data-skin="posthuman"] .seg-item[aria-selected="true"]  {
  background: #C9D8A8;
  color: var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: -3px;
}
html[data-skin="posthuman"] .seg-item[aria-pressed="true"] .k { color: var(--ink); }
html[data-skin="posthuman"] .seg-item[aria-selected="true"] .k { color: var(--ink); }

html[data-skin="posthuman"] .btn { border: 1.5px solid var(--ink); font-weight: 600; letter-spacing: 0.05em; }
html[data-skin="posthuman"] .btn-quiet { border: 1.5px dashed var(--line); }
html[data-skin="posthuman"] .tier-cell[aria-pressed="true"] {
  background: var(--vermillion);
  color: var(--on-accent);
  border-style: solid;
  border-color: var(--ink);
}
html[data-skin="posthuman"] .tier-cell[aria-pressed="true"] .v,
html[data-skin="posthuman"] .tier-cell[aria-pressed="true"] .k { color: var(--on-accent); }

/* 丝印注记：眉标/编号/小字全等宽 —— 本档的"字体"其实是字距与大小写 */
html[data-skin="posthuman"] .eyebrow,
html[data-skin="posthuman"] .ticket-serial,
html[data-skin="posthuman"] .vector-val,
html[data-skin="posthuman"] .stat .k { font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
html[data-skin="posthuman"] .q-num {
  font-family: var(--font-mono);
  color: var(--vermillion);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
}
html[data-skin="posthuman"] .q-title,
html[data-skin="posthuman"] .head h1,
html[data-skin="posthuman"] .ticket-title { font-weight: 700; letter-spacing: 0.01em; }

/* 票根 = 切片报告单：双线报告章 + 等宽批注 */
html[data-skin="posthuman"] .ticket { border: 1.5px solid var(--ink); background: var(--paper-2); }
html[data-skin="posthuman"] .ticket-stamp {
  border-style: double;
  border-width: 4px;
  border-radius: 0;
  font-family: var(--font-mono);
  opacity: 1;
}
html[data-skin="posthuman"] .ticket-blessing {
  background: #F2DDE4;
  border-left: 3px solid var(--vermillion);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-style: normal;
  color: var(--ink);
  opacity: 1;
}
/* 族标签：染色剂名条（斜切平行四边形），字色走固定对保证可读 */
html[data-skin="posthuman"] .family-tag {
  background: var(--pine);
  color: var(--on-tag);
  border-radius: 0;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
}

html[data-skin="posthuman"] .lib-bar { background: repeating-linear-gradient(180deg, var(--gold) 0 6px, transparent 6px 10px); }
html[data-skin="posthuman"] .progress { height: 8px; border-radius: 1px; border: 1px solid var(--line); background: var(--paper-3); }
html[data-skin="posthuman"] .progress > i { border-radius: 1px; }
/* 徽章 = 六边培养舱 */
html[data-skin="posthuman"] .badge {
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  border: 0;
  background: var(--paper-3);
  color: var(--ink-faint);
}
html[data-skin="posthuman"] .badge.is-owned { background: var(--gold); color: var(--ink); }
html[data-skin="posthuman"] .toast { font-family: var(--font-mono); letter-spacing: 0.08em; }
html[data-skin="posthuman"] .check-box { border: 1.5px solid var(--ink); border-radius: 0; }
html[data-skin="posthuman"] .why { border-left: 3px solid var(--gold); }
html[data-skin="posthuman"] .safety { border-left: 3px solid var(--vermillion); }
/* 雷达 = 分划板 */
html[data-skin="posthuman"] .radar__ring-stroke { stroke: var(--line); stroke-dasharray: 4 3; }

/* ---------- 4. tabbar = 黑底终端栏 + 荧光选中虚框；图标换仪器符号 ---------- */
html[data-skin="posthuman"] .tabbar {
  background: var(--ink);
  border-top: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-skin="posthuman"] .tab { color: #8B8574; }
html[data-skin="posthuman"] .tab[aria-current="page"] {
  color: #D7E8A8;
  outline: 1px dashed rgba(215, 232, 168, 0.65);
  outline-offset: 3px;
}
html[data-skin="posthuman"] .tab .i { font-size: 0; }
html[data-skin="posthuman"] .tab .i::before {
  font-family: "Segoe UI Symbol", ui-monospace, monospace;
  font-size: 1.15rem;
  line-height: 1;
}
html[data-skin="posthuman"] .tab[data-tab="home"] .i::before    { content: "\2316"; }  /* ⌖ 目镜十字 */
html[data-skin="posthuman"] .tab[data-tab="quest"] .i::before   { content: "\2697"; }  /* ⚗ 反应 */
html[data-skin="posthuman"] .tab[data-tab="library"] .i::before { content: "\25A3"; }  /* ▣ 样本库 */
html[data-skin="posthuman"] .tab[data-tab="profile"] .i::before { content: "\2B21"; }  /* ⬡ 培养舱 */
/* 031：第五枚「广场」——十字准星环（⊙ 目镜语系） */
html[data-skin="posthuman"] .tab[data-tab="plaza"] .i::before  { content: "\2299"; }

/* ---------- 5. 暗色变体：夜视镜 ---------- */
@media (prefers-color-scheme: dark) {
  html[data-skin="posthuman"] {
    --paper: #0C100B;
    --paper-2: #131812;
    --paper-3: #1B211A;
    --ink: #D9E4D2;
    --ink-soft: #9FB09A;
    --ink-faint: #7E8F79;

    /* 暗档强调色必须反过来算：深字浅底才能过 4.5（#C4537F+深字实测只 3.5，抬亮到 #D96A96 → 5.9） */
    --vermillion: #D96A96;
    --pine: #6E8FD8;
    --pine-deep: #A9C0EE;
    --gold: #9FE870;

    --line: rgba(159, 232, 112, 0.46);
    --line-soft: rgba(159, 232, 112, 0.22);

    --dot: rgba(159, 232, 112, 0.05);
    --tape: rgba(159, 232, 112, 0.30);
    --scrim: rgba(0, 0, 0, 0.68);
    --on-accent: #0C100B;
    --on-tag: #0C100B;
    --vermillion-soft: rgba(196, 83, 127, 0.5);
    --flow-night: #2E6B3A;
    --check-idle: #9FE870;
    --thumb-paper: #131812;

    --shadow-paper: 0 3px 0 rgba(0, 0, 0, 0.5);
    --shadow-lift: 4px 4px 0 rgba(0, 0, 0, 0.5);
    --shadow-tag: 2px 2px 0 rgba(0, 0, 0, 0.6);
    --shadow-thumb: 2px 2px 0 rgba(0, 0, 0, 0.5);
  }
  html[data-skin="posthuman"] body::after {
    background-image:
      repeating-linear-gradient(0deg, rgba(159, 232, 112, 0.05) 0 1px, transparent 1px 3px),
      linear-gradient(rgba(12, 16, 11, 0.88), rgba(12, 16, 11, 0.93)),
      url("../../assets/skins/posthuman-bg.jpg");
    background-size: auto, auto, cover;
  }
  html[data-skin="posthuman"] .chip { border-color: rgba(159, 232, 112, 0.5); }
  html[data-skin="posthuman"] .chip[aria-pressed="true"] { background: #1E3B2A; color: #9FE870; box-shadow: -3px -3px 0 rgba(159, 232, 112, 0.4) inset; }
  html[data-skin="posthuman"] .seg-item[aria-pressed="true"] { background: #1E3B2A; color: #9FE870; outline-color: #9FE870; }
  html[data-skin="posthuman"] .seg-item[aria-selected="true"] { background: #1E3B2A; color: #9FE870; outline-color: #9FE870; }
  html[data-skin="posthuman"] .seg-item[aria-pressed="true"] .k { color: #9FE870; }
  html[data-skin="posthuman"] .seg-item[aria-selected="true"] .k { color: #9FE870; }
  html[data-skin="posthuman"] .tile[aria-pressed="true"] { background: #1E3B2A; color: #9FE870; }
  html[data-skin="posthuman"] .tile[aria-pressed="true"] .label,
  html[data-skin="posthuman"] .tile[aria-pressed="true"] .tiny,
  html[data-skin="posthuman"] .tile[aria-pressed="true"] .faint { color: #9FE870; }
  html[data-skin="posthuman"] .tier-cell[aria-pressed="true"] { background: #1E3B2A; color: #9FE870; border-color: #9FE870; }
  html[data-skin="posthuman"] .tier-cell[aria-pressed="true"] .v,
  html[data-skin="posthuman"] .tier-cell[aria-pressed="true"] .k { color: #9FE870; }
  html[data-skin="posthuman"] .btn { border-color: #9FE870; }
  html[data-skin="posthuman"] .q-num { color: #9FE870; border-color: #C4537F; }
  html[data-skin="posthuman"] .family-tag { background: #1E3B2A; color: #9FE870; }
  html[data-skin="posthuman"] .tabbar { background: #060906; }
  html[data-skin="posthuman"] .tab { color: #5E6B58; }
}

/* ---------- 9. specs/025 支线页特色装饰 ----------
   这一档的记忆点：机盒里自己走线。上缘一条电路走线带节点，一个亮点沿走线慢扫描
   （像示波器在跑），下缘一排六边形培养舱依次微亮。
   纪律同前：.quest-body 伪元素 / z-index:-1 / pointer-events:none / reduced-motion 静止。 */
html[data-skin="posthuman"] .quest-body::before,
html[data-skin="posthuman"] .quest-body::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: -6px;
  right: -6px;
}
html[data-skin="posthuman"] .quest-body::before {
  top: 8px;
  height: 34px;
  background:
    /* 扫描亮点：一个窄径向光斑沿 mask 形状之外的走线跑（宽度 12%，26s 一趟） */
    radial-gradient(circle at 8% 50%, var(--pine) 0 5px, transparent 6px) no-repeat,
    /* 走线与节点 */
    url("../../assets/skins/deco-posthuman-circuit.svg") repeat-x center / 180px 34px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12% 88%, transparent);
  mask: linear-gradient(90deg, transparent, #000 12% 88%, transparent);
  opacity: .5;
  animation: posthuman-scan 26s linear infinite;
}
@keyframes posthuman-scan {
  from { background-position: -20% 0, center;
         background-size: 12% 100%, 180px 34px; }
  to   { background-position: 120% 0, center;
         background-size: 12% 100%, 180px 34px; }
}
html[data-skin="posthuman"] .quest-body::after {
  bottom: 2px;
  height: 42px;
  background: var(--pine);
  -webkit-mask: url("../../assets/skins/deco-posthuman-chambers.svg") no-repeat center bottom / 220px 42px;
  mask: url("../../assets/skins/deco-posthuman-chambers.svg") no-repeat center bottom / 220px 42px;
  animation: posthuman-chambers 7s steps(1, end) infinite;
}
@keyframes posthuman-chambers {
  0%   { opacity: .16; transform: translateX(0); }
  25%  { opacity: .26; }
  50%  { opacity: .16; transform: translateX(2px); }
  75%  { opacity: .22; }
  100% { opacity: .16; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="posthuman"] .quest-body::before,
  html[data-skin="posthuman"] .quest-body::after { animation: none; }
}