/* ==========================================================================
   skin-riso.css — 皮肤 B「套色印刷」· Risograph 双色叠印（specs/023）
   --------------------------------------------------------------------------
   一句话：整屏当成一台 Risograph 印出来的 —— 两支荧光专色、可见套印错位、
   半调网点承担一切渐变，纸是带纤维斑的再生纸。

   与 A 售票亭正好相反的两条：
     · A 靠"描边 + 硬投影"塑形；B **既不描边也不投影**，纵深全靠网点疏密与叠印。
     · A 是屏幕图形；B 要看起来像"被物理印出来过"，所以故意保留没对准。

   同样三条纪律：只重写 app.css 已有 token / 零 @font-face 零外链零 url() 位图 /
   不改任何几何（021 的 dock⇄tabbar 分层账必须原样成立）。
   ========================================================================== */

/* ---------- 1. 亮档 token ---------- */
html[data-skin="riso"] {
  /* 再生纸三阶 + 暖黑墨 */
  --paper: #F1ECE1;
  --paper-2: #F7F3EA;
  --paper-3: #E7E0D1;
  --ink: #1C1A17;
  --ink-soft: #4A453D;
  /* ⚠ 这一支不是审美选择，是算出来的：#7A7268 对 #F1ECE1 只有 4.07:1，不过 AA；
     压深到 #6E665C 才 4.89:1。全站 110 处"设计上看不见"就是这类值造成的（specs/021 P2-8）。 */
  --ink-faint: #6E665C;

  /* Riso 两支专色。映射同 A：主按钮走 --pine，强调按钮走 --vermillion。
     实测：#F1ECE1 字在 #0F4C9E 上 6.88:1 ✓；#2A0E18 字在 #FF48B0 上 5.3:1 ✓。 */
  --vermillion: #FF48B0;
  --pine: #0F4C9E;
  --pine-deep: #0A356E;
  --gold: #E8B23A;

  /* 边界：印刷套准线，比默认档轻、比 A 轻得多 */
  --line: rgba(28, 26, 23, 0.34);
  --line-soft: rgba(28, 26, 23, 0.20);

  /* 网点：body::before 那层本来就是 6px 径向点阵 —— 把它加重，它就是半调屏。
     这一条是整套皮肤里最便宜的一笔：不新增元素、不引图片，纸纹直接变成印刷网点。 */
  --dot: rgba(28, 26, 23, 0.28);
  --tape: rgba(255, 72, 176, 0.30);
  --scrim: rgba(28, 26, 23, 0.55);
  --on-accent: #2A0E18;
  --on-tag: #F1ECE1;
  --vermillion-soft: rgba(255, 72, 176, 0.5);
  --flow-night: #C42C82;
  --check-idle: rgba(28, 26, 23, 0.50);
  --thumb-paper: #FFFCF5;

  /* 阴影：B 不用阴影。柔到几乎为零，只留一点纸的厚度 */
  --shadow-paper: 0 2px 0 rgba(28, 26, 23, 0.05);
  --shadow-lift: 0 6px 18px rgba(28, 26, 23, 0.10);
  --shadow-tag: none;
  --shadow-thumb: none;
  --shadow-ticket: 0 3px 0 rgba(28, 26, 23, 0.10);

  --font-display: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
  --r-card: 10px;
}

/* ---------- 2. 叠印化 ---------- */
/* 色块一律 multiply：两支专色重叠处自然长出第三色（紫），这是 Riso 的看家效果 */
html[data-skin="riso"] .btn-primary,
html[data-skin="riso"] .btn-accent,
html[data-skin="riso"] .chip[aria-pressed="true"],
html[data-skin="riso"] .tier-cell[aria-pressed="true"],
html[data-skin="riso"] .seg-item[aria-pressed="true"],
html[data-skin="riso"] .seg-item[aria-selected="true"],
html[data-skin="riso"] .family-tag,
html[data-skin="riso"] .ticket-stamp,
html[data-skin="riso"] .lib-bar { mix-blend-mode: multiply; }

html[data-skin="riso"] .card,
html[data-skin="riso"] .tile,
html[data-skin="riso"] .lib-row,
html[data-skin="riso"] .stat,
html[data-skin="riso"] .badge,
html[data-skin="riso"] .input,
html[data-skin="riso"] .sheet,
html[data-skin="riso"] .one-line-field textarea {
  border: 1px solid var(--line-soft);
  box-shadow: none;
}
html[data-skin="riso"] .card { background: var(--paper-2); }

/* 套印错位：主色块后面拖一支"没对准"的第二油墨。
   z-index 手法：伪元素垫在盒外（inset:0 + translate），所以按钮文字不受影响。 */
html[data-skin="riso"] .btn-primary,
html[data-skin="riso"] .chip[aria-pressed="true"],
html[data-skin="riso"] .tier-cell[aria-pressed="true"] { position: relative; z-index: 0; }
html[data-skin="riso"] .btn-primary::after,
html[data-skin="riso"] .chip[aria-pressed="true"]::before,
html[data-skin="riso"] .tier-cell[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--pine);
  mix-blend-mode: multiply;
  transform: translate(2.5px, 2px);
  opacity: 0.8;
}
html[data-skin="riso"] .chip[aria-pressed="true"]::before { background: var(--vermillion); }

html[data-skin="riso"] .btn {
  border: 1px solid transparent;
  border-radius: 6px;
  font-weight: 700;
  box-shadow: none;
}
html[data-skin="riso"] .btn-primary { background: var(--pine); color: var(--paper); }
html[data-skin="riso"] .btn-accent { background: var(--vermillion); color: var(--on-accent); }
html[data-skin="riso"] .btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
html[data-skin="riso"] .btn-quiet {
  border-radius: 0;
  border-bottom: 1px solid var(--pine);
  color: var(--ink-soft);
}
html[data-skin="riso"] .btn.is-locked {
  background: rgba(28, 26, 23, 0.08);
  border: 1px dashed var(--line);
  color: var(--ink-faint);
}

html[data-skin="riso"] .chip { background: var(--paper-2); color: var(--ink); font-weight: 600; }
/* 🔴 1C1A17 上白字是存量真 bug，不是本轮改出来的：荧光粉 #FF48B0 + 近白字 #FFF8FB
   实测对比只有 **2.95:1**（AA 要 4.5），而 v5 皮肤审计一直只量 `.seg-item` 从来没量过 `.chip`，
   所以它一直躺着。选中的价格就是“要读得清字”，所以浅底配深字（与下面暗档那条同方向）。
   暗档（--vermillion 变 #FF6FC2）靠文件末尾那条 `color: #14120F` 接管，不靠这里。 */
html[data-skin="riso"] .chip[aria-pressed="true"] { background: var(--vermillion); color: var(--ink); border-color: transparent; }
html[data-skin="riso"] .seg { padding: 3px; border-radius: 999px; background: rgba(255, 253, 246, 0.6); }
html[data-skin="riso"] .seg-item[aria-pressed="true"] { background: var(--pine); color: var(--paper); }
html[data-skin="riso"] .seg-item[aria-selected="true"] { background: var(--pine); color: var(--paper); }
/* 必须加 :not([aria-pressed])：`html[data-skin] .tile` 与 app.css 的
   `.tile[aria-pressed=true]` 特异性相同（都是 0,2,0）且本文件更靠后，
   不限定就会把选中态的松绿底整个吃掉，纸色字落在纸色底上（实测 1.06:1）。 */
html[data-skin="riso"] .tile:not([aria-pressed="true"]) { background: var(--paper-2); }
/* 同 booth：选中态不换背景，只加套印错位与第=支油墨。app.css 的
   background:--pine / color:--paper 是一对，拆开改就字看不清（实测 1.83:1）。 */
html[data-skin="riso"] .tile[aria-pressed="true"] {
  position: relative;
  border: 1px solid var(--vermillion);
}
html[data-skin="riso"] .tile[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--vermillion);
  transform: translate(2.5px, 2px);
  pointer-events: none;
  mix-blend-mode: multiply;
}
html[data-skin="riso"] .tile[aria-pressed="true"],
html[data-skin="riso"] .seg-item[aria-pressed="true"] { color: var(--paper); }
html[data-skin="riso"] .seg-item[aria-selected="true"] { color: var(--paper); }
html[data-skin="riso"] .tile[aria-pressed="true"] .faint,
html[data-skin="riso"] .tile[aria-pressed="true"] .tiny { color: var(--paper); opacity: 1; }
html[data-skin="riso"] .tile[aria-pressed="true"] .mark { color: var(--gold); }
html[data-skin="riso"] .tier-cell { background: var(--paper-2); }
html[data-skin="riso"] .tier-cell .v { font-weight: 700; }
html[data-skin="riso"] .tier-cell[aria-pressed="true"] { background: var(--vermillion); color: #FFF8FB; }
html[data-skin="riso"] .tier-cell[aria-pressed="true"] .k { color: #FFF8FB; }

/* 编号：打码机字，不是巨型数字 —— B 的记忆点是"印刷"不是"放大" */
html[data-skin="riso"] .q-num {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--pine);
}
html[data-skin="riso"] .q-title,
html[data-skin="riso"] .head h1,
html[data-skin="riso"] .ticket-title { font-weight: 700; }

/* 雷达：网点圈，虚线 + 半调圆斑 */
html[data-skin="riso"] .radar { color: var(--ink-soft); }
html[data-skin="riso"] .radar__ring-stroke { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; fill: none; }
html[data-skin="riso"] .radar__me-dot { fill: var(--vermillion); }
html[data-skin="riso"] .radar__dot { opacity: 0.85; }
html[data-skin="riso"] .compass { color: var(--ink-soft); }

/* dock / tabbar：网点纸带。tabbar 保持纸色（B 没有"黑条"这种语言），只换材质。
   026：两边都不再画分界线（老板：“全局不要外边框”）——dock 与 tabbar 同色连成一条纸带。 */
html[data-skin="riso"] .dock {
  background: var(--paper);
  border-top: 0;
}
html[data-skin="riso"] .tabbar {
  background: var(--paper);
  border-top: 0;
}
/* 未选中的 seg 项不再带那圈描边（app.css 已全局去 border，这里补回这一档的胶囊形状） */
html[data-skin="riso"] .seg-item { border: none; }
html[data-skin="riso"] .seg-item[aria-pressed="true"] { border-radius: 999px; }
html[data-skin="riso"] .seg-item[aria-selected="true"] { border-radius: 999px; }
/* 选中那枚胶囊用荧光粉淡底（026：dock/tabbar 已连成一条，选中态就是唯一的区分手段） */
html[data-skin="riso"] .tab[aria-current="page"] {
  color: var(--vermillion);
  font-weight: 700;
  background: color-mix(in srgb, var(--vermillion) 12%, transparent);
}

/* 票根：印张。齿孔不裁形，用一排"印出来的白点"表示 —— 印刷品是被印上去的，不是被剪开的 */
html[data-skin="riso"] .ticket {
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  box-shadow: var(--shadow-ticket);
}
html[data-skin="riso"] .ticket::before,
html[data-skin="riso"] .ticket::after {
  width: 10px;
  background-image: radial-gradient(var(--paper) 2px, transparent 2.4px);
  background-size: 10px 10px;
  background-color: transparent;
  transform: none;
  border-radius: 0;
}
html[data-skin="riso"] .ticket-body { background: #FFFCF5; }
html[data-skin="riso"] .ticket-blessing {
  background: rgba(255, 72, 176, 0.13);
  border-bottom: 1px solid transparent;
  font-style: italic;
}
html[data-skin="riso"] .ticket-foot { border-top: 1px dashed var(--line); }
html[data-skin="riso"] .ticket-stamp {
  border-width: 2px;
  background: rgba(15, 76, 158, 0.08);
  opacity: 1;
}
/* 印章的第二支油墨：故意没对准 */
html[data-skin="riso"] .ticket-stamp::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--vermillion);
  border-radius: inherit;
  transform: translate(2px, 2.5px);
}
html[data-skin="riso"] .family-tag { background: var(--pine); color: var(--paper); }

html[data-skin="riso"] .lib-bar { background: var(--vermillion); }
html[data-skin="riso"] .progress { height: 4px; background: rgba(28, 26, 23, 0.14); }
html[data-skin="riso"] .progress > i { background: var(--pine); }
html[data-skin="riso"] .vector-bar { background: rgba(28, 26, 23, 0.14); }
html[data-skin="riso"] .badge.is-owned { border-color: var(--vermillion); color: var(--vermillion); background: rgba(255, 72, 176, 0.10); }
html[data-skin="riso"] .toast { background: var(--pine); color: var(--paper); font-weight: 600; }
html[data-skin="riso"] .check-box { border: 1.5px solid var(--check-idle); border-radius: 2px; }
/* Lv 数字：同 booth，不用荧光粉（#FF48B0 在浅纸上只 2.79），用钴蓝（7.26）。 */
html[data-skin="riso"] .level-num { color: var(--pine); }
html[data-skin="riso"] .why { background: rgba(255, 72, 176, 0.12); }
html[data-skin="riso"] .safety { background: rgba(15, 76, 158, 0.10); }

/* ---------- 3. 暗色变体：黑卡纸上印荧光专色 ---------- */
@media (prefers-color-scheme: dark) {
  html[data-skin="riso"] {
    --paper: #1A1815;
    --paper-2: #221F1B;
    --paper-3: #2B2723;
    --ink: #F0EADF;
    --ink-soft: #B7AE9F;
    --ink-faint: #8C8375;

    --vermillion: #FF6FC2;
    --pine: #5A96DC;
    --pine-deep: #8FB8FF;
    --gold: #E8B23A;

    --line: rgba(240, 234, 223, 0.34);
    --line-soft: rgba(240, 234, 223, 0.20);

    --dot: rgba(240, 234, 223, 0.16);
    --tape: rgba(255, 111, 194, 0.24);
    --scrim: rgba(0, 0, 0, 0.66);
    --on-accent: #14120F;
    --on-tag: #14120F;
    --vermillion-soft: rgba(255, 111, 194, 0.5);
    --flow-night: #C93E93;
    --check-idle: rgba(240, 234, 223, 0.5);
    --thumb-paper: #221F1B;

    --shadow-paper: 0 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-lift: 0 6px 18px rgba(0, 0, 0, 0.5);
    --shadow-ticket: 0 3px 0 rgba(0, 0, 0, 0.4);
  }
  /* 暗底上 multiply 会把颜色吃进黑里，改 screen 才是"荧光油墨照在黑卡纸上" */
  html[data-skin="riso"] .btn-primary,
  html[data-skin="riso"] .btn-accent,
  html[data-skin="riso"] .chip[aria-pressed="true"],
  html[data-skin="riso"] .tier-cell[aria-pressed="true"],
  html[data-skin="riso"] .seg-item[aria-pressed="true"],
  html[data-skin="riso"] .seg-item[aria-selected="true"],
  html[data-skin="riso"] .family-tag,
  html[data-skin="riso"] .ticket-stamp,
  html[data-skin="riso"] .lib-bar { mix-blend-mode: screen; }
  html[data-skin="riso"] .btn-primary::after,
  html[data-skin="riso"] .chip[aria-pressed="true"]::before,
  html[data-skin="riso"] .tier-cell[aria-pressed="true"]::before { mix-blend-mode: screen; }
  html[data-skin="riso"] .btn-primary { background: var(--pine); color: #0A1420; }
  html[data-skin="riso"] .btn-accent { background: var(--vermillion); color: #14120F; }
  html[data-skin="riso"] .chip[aria-pressed="true"] { color: #14120F; }
  html[data-skin="riso"] .tier-cell[aria-pressed="true"] { color: #14120F; }
  html[data-skin="riso"] .tier-cell[aria-pressed="true"] .k { color: #14120F; }
  html[data-skin="riso"] .card,
  html[data-skin="riso"] .tile,
  html[data-skin="riso"] .lib-row,
  html[data-skin="riso"] .ticket-body,
  html[data-skin="riso"] .input,
  html[data-skin="riso"] .one-line-field textarea { border-color: rgba(240, 234, 223, 0.2); }
  html[data-skin="riso"] .ticket-body { background: #221F1B; }
  html[data-skin="riso"] .seg { background: rgba(255, 250, 240, 0.06); }
  html[data-skin="riso"] .q-num { color: #8FB8FF; }
  html[data-skin="riso"] .family-tag { background: var(--pine); color: #0A1420; }
}