/* ============================================================
   Hanzi Studio — DIY PRO · Tool 05 · Repetition Planner
   只放本页专属样式；通用组件（kit-nav / kit-panel / kit-seg /
   kit-card / kit-steps）直接复用 kit.css

   —— 2026-10-31 v2：色彩系统
   色彩不是装饰，是编码：六遍复习 = 六个中国色，页面、矩阵、
   芯片、PDF 全部同一套。用户看一眼颜色就知道"这是第几遍"。
     1 Learn  朱砂  ·  2 +1d  赭石  ·  3 +3d  藤黄
     4 +7d    青绿  ·  5 +14d 靛青  ·  6 +20d 绛紫
   注：本站 Edge 92 内核，禁用 color-mix / :has 等新特性
   ============================================================ */

/* ---------- 1. 色彩系统 ---------- */
:root {
  --p1: #B23A2C; --p1-soft: #FBEDE8; --p1-line: #E7C6BE; --p1-ink: #7E2718;
  --p2: #BF6A28; --p2-soft: #FCF0E2; --p2-line: #EBD1B4; --p2-ink: #8A4715;
  --p3: #A98318; --p3-soft: #FAF3DA; --p3-line: #E6D6A2; --p3-ink: #7A5C0D;
  --p4: #38775F; --p4-soft: #E9F2ED; --p4-line: #BDD7CB; --p4-ink: #235445;
  --p5: #3D5F8F; --p5-soft: #EAEFF7; --p5-line: #C1CEE2; --p5-ink: #284069;
  --p6: #78526E; --p6-soft: #F4ECF2; --p6-line: #DBC5D5; --p6-ink: #54374D;

  --rv-spectrum: linear-gradient(90deg,
    var(--p1) 0%, var(--p2) 20%, var(--p3) 40%,
    var(--p4) 60%, var(--p5) 80%, var(--p6) 100%);
}

/* ---------- 2. Hero：纸面上的一层彩色柔光 ---------- */
.rv-page .kit-hero { position: relative; overflow: hidden; }
.rv-page .kit-hero::before {
  content: ''; position: absolute; inset: -20% -10% -30%;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(38% 42% at 14% 22%, rgba(178, 58, 44, .10), transparent 68%),
    radial-gradient(34% 38% at 88% 12%, rgba(169, 131, 24, .13), transparent 70%),
    radial-gradient(40% 44% at 72% 88%, rgba(56, 119, 95, .11), transparent 68%),
    radial-gradient(32% 36% at 30% 92%, rgba(61, 95, 143, .09), transparent 70%);
}
.rv-page .kit-hero__inner { position: relative; z-index: 1; }

/* 标题里的强调词：朱砂 → 藤黄的渐变字 */
.rv-page .kit-hero h1 em {
  background-image: linear-gradient(94deg, var(--p1) 8%, var(--p2) 52%, var(--p3) 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--p1);
}

/* 要点小圆点：逐条换色 */
.rv-page .kit-hero__points li:nth-child(1) span.k { background: var(--p1); }
.rv-page .kit-hero__points li:nth-child(2) span.k { background: var(--p2); }
.rv-page .kit-hero__points li:nth-child(3) span.k { background: var(--p4); }
.rv-page .kit-hero__points li:nth-child(4) span.k { background: var(--p5); }

/* ---------- 3. 节奏条：五个彩色节点连成一条间隔曲线 ---------- */
.rv-rhythm {
  position: relative; margin: 24px 0 2px;
  display: flex; align-items: flex-start; justify-content: space-between;
  max-width: 460px;
}
.rv-rhythm::before {
  content: ''; position: absolute; left: 6px; right: 6px; top: 7px; height: 2px;
  background: var(--rv-spectrum); opacity: .55; border-radius: 2px;
}
.rv-rhythm__node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.rv-rhythm__node i {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper); border: 2.5px solid var(--c);
  box-shadow: 0 0 0 3px var(--paper);
}
.rv-rhythm__node:first-child i { background: var(--c); }
.rv-rhythm__node b {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--ink-3); white-space: nowrap;
}
.rv-rhythm__node:first-child b { color: var(--c); }

/* ---------- 4. 面板：语言条 + 分段按钮配色 ---------- */
.rv-palette { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 16px; }
.rv-palette span {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 3px 8px 3px 6px; border-radius: 99px;
  color: var(--c-ink); background: var(--c-soft);
  border: 1px solid var(--c-line);
}
.rv-palette span::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c); flex: 0 0 auto;
}

/* 天数：青绿；遍数：靛青 —— 与色彩系统的位置呼应 */
#segDays button.on { background: var(--p4); }
#segPasses button.on { background: var(--p5); }
#grdDensity button.on { background: var(--p3); color: var(--p3-ink); }

/* 勾选框也用系统色 */
.kit-chk input { accent-color: var(--p1); }

/* 导出按钮：六色极细顶线，暗示"这也是排表" */
.kit-panel { position: relative; overflow: hidden; }
.kit-panel::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--rv-spectrum); opacity: .85;
}

/* ---------- 5. 能力卡：一张卡一个色相 ---------- */
.kit-card {
  position: relative; overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.kit-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--c, var(--seal)) 0%, var(--c-soft, #FBEDE8) 100%);
}
.kit-card::after {
  content: ''; position: absolute; right: -40px; top: -40px;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, var(--c-soft, #FBEDE8) 0%, transparent 70%);
  opacity: .8; pointer-events: none;
}
.kit-card > * { position: relative; z-index: 1; }
.kit-card__num { color: var(--c, var(--seal)); }
.kit-card:hover {
  transform: translateY(-3px);
  border-color: var(--c-line, var(--seal-line));
  box-shadow: 0 14px 34px -22px rgba(50, 40, 30, .55);
}

/* ---------- 7. 打印三步：序号各自一色 ---------- */
.kit-step:nth-child(1) { --c: var(--p1); }
.kit-step:nth-child(2) { --c: var(--p4); }
.kit-step:nth-child(3) { --c: var(--p5); }
.kit-step::before { color: var(--c, var(--seal)); opacity: .34; }
.kit-step h3::before {
  content: ''; display: inline-block; vertical-align: 3px;
  width: 14px; height: 2px; margin-right: 8px; border-radius: 2px;
  background: var(--c, var(--seal));
}

/* ---------- 8. CTA：六色极淡的收尾 ---------- */
.kit-cta {
  border-color: var(--p2-line);
  background:
    radial-gradient(60% 120% at 6% 0%, rgba(178, 58, 44, .07), transparent 60%),
    radial-gradient(50% 120% at 96% 100%, rgba(61, 95, 143, .08), transparent 62%),
    linear-gradient(180deg, #FDF7F1, rgba(250, 243, 232, .5));
}

/* ---------- 9. Hero 右侧动效预留位 ---------- */
.rv-slot {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(88% 72% at 10% 6%, rgba(178, 58, 44, .13), transparent 62%),
    radial-gradient(76% 62% at 94% 16%, rgba(169, 131, 24, .17), transparent 64%),
    radial-gradient(88% 72% at 80% 98%, rgba(56, 119, 95, .14), transparent 62%),
    radial-gradient(64% 58% at 16% 88%, rgba(61, 95, 143, .12), transparent 66%),
    linear-gradient(158deg, #FFFDF9 0%, #F7F2E7 52%, #F0EADC 100%);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -34px rgba(50, 40, 30, .35);
  /* --bleed 由 JS 量出「页头 Get the library 按钮右缘」与版心右缘的差值，
     用来把插画右缘精确撑到按钮右缘（导航溢出时按钮会超出页边距） */
  width: calc(100% + var(--bleed, 0px));
  margin-right: calc(-1 * var(--bleed, 0px));
  align-self: stretch;
  margin-top: 40px;   /* 顶部与大标题平齐（越过 eyebrow） */
  min-height: 300px;
}
.rv-slot__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rv-slot__tag {
  position: absolute; left: 14px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); background: rgba(255, 255, 255, .82);
  border: 1px solid var(--line); border-radius: 99px; padding: 4px 10px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.rv-slot__tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--p1);
  box-shadow: 10px 0 0 -2px var(--p3), 18px 0 0 -2px var(--p4);
  margin-right: 10px;
}

/* 输入框下的举例提示 */
.rv-field-hint {
  display: block; margin-top: 6px;
  font-size: 12px; line-height: 1.5; color: var(--ink-3);
}

/* ---------- 10. 预览纸张（A4 竖版） ---------- */
.rv-paper {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 44px -30px rgba(40, 32, 24, .45);
  padding: 10px;
  aspect-ratio: 210 / 297;
  display: flex;
}
.rv-paper canvas { width: 100%; height: 100%; display: block; border-radius: 4px; }

/* ---------- 12. 小徽标 / 提示 ---------- */
.rv-warn {
  display: none; margin-top: 10px; padding: 8px 10px;
  font-size: 12px; line-height: 1.5; color: #8A5A18;
  background: var(--gold-soft, #FBF2DC); border: 1px solid #E8D8AE; border-radius: 8px;
}
.rv-warn.is-on { display: block; }

.rv-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: 12px; color: var(--ink-3); }
.rv-legend span b { color: var(--ink-2); }

/* ---------- 13. 入场：轻轻上浮（不改变可见性，截图安全） ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rv-page .kit-inside__grid .kit-card,
  .rv-page .kit-steps .kit-step {
    animation: rv-rise .5s cubic-bezier(.22, .8, .3, 1) both;
  }
  .rv-page .kit-inside__grid .kit-card:nth-child(1) { animation-delay: .02s; }
  .rv-page .kit-inside__grid .kit-card:nth-child(2) { animation-delay: .07s; }
  .rv-page .kit-inside__grid .kit-card:nth-child(3) { animation-delay: .12s; }
  .rv-page .kit-inside__grid .kit-card:nth-child(4) { animation-delay: .17s; }
  .rv-page .kit-inside__grid .kit-card:nth-child(5) { animation-delay: .22s; }
  .rv-page .kit-inside__grid .kit-card:nth-child(6) { animation-delay: .27s; }
  .rv-page .kit-steps .kit-step:nth-child(2) { animation-delay: .08s; }
  .rv-page .kit-steps .kit-step:nth-child(3) { animation-delay: .16s; }
}
@keyframes rv-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 14. 响应式 ---------- */
/* 手机/窄屏隐藏 hero 矩阵演示图（与主页水乡画同策略、同断点） */
@media (max-width: 1080px) {
  .rv-slot { display: none; }
}
@media (max-width: 860px) {
  .rv-slot { margin-top: 0; align-self: auto; aspect-ratio: 4 / 3.1; min-height: 0; }
}
@media (max-width: 560px) {
  .rv-slot { min-height: 220px; }
  .rv-rhythm { max-width: none; }
  .rv-rhythm__node b { font-size: 9.5px; }
}

/* 面板里的数字 / 日期输入（kit.css 只覆盖了 text / textarea） */
.kit-field input[type="number"],
.kit-field input[type="date"] {
  width: 100%; border: 1px solid var(--line-2); border-radius: 8px;
  padding: 8px 10px; font-size: 14px; color: var(--ink);
  background: var(--surface-2); font-family: var(--sans);
}
.kit-field input[type="number"]:focus,
.kit-field input[type="date"]:focus { outline: 2px solid var(--seal-soft); border-color: var(--seal-line); }

/* ---------- 15. 卡片 06：整卡可点，跳转 Worksheet Generator ---------- */
a.kit-card { display: block; text-decoration: none; color: inherit; cursor: pointer; }
a.kit-card:hover { transform: translateY(-3px); }
.kit-card__go {
  display: inline-block; margin-top: 10px;
  font-size: 13px; font-weight: 700; color: var(--c, var(--seal));
}
a.kit-card:hover .kit-card__go { text-decoration: underline; }