/* ============================================================
 * Moliere · Wyckoff 教科书 V2 · Schematic SVG 样式
 *
 * 用于 Pruden-Lichtenstein 风格的手绘 Wyckoff Schematic 图。
 * 每张图最少必备：价格曲线 + Phase 分割线 + 事件标注 + 价位线 + 量柱。
 *
 * 配色全部走 tokens.css 变量，方便后续主题切换。
 * ============================================================ */

/* ─── 容器：Schematic 在杂志网格内的尺寸 ─── */
.schematic {
  grid-column: 2 / span 10;
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0;
}

.schematic--full   { grid-column: 1 / -1; }
.schematic--half   { grid-column: 3 / span 5; }
.schematic--wide   { grid-column: 2 / span 10; }

.schematic-svg {
  width: 100%;
  height: auto;
  display: block;
  background: var(--ink-100);
  border: var(--border-1);
}

.schematic-svg.paper { background: var(--ink-200); }

/* ─── Schematic 元素的统一样式（class 选择器，SVG 内部生效） ─── */
.schematic-svg .sch-price        { fill: none; stroke: var(--ink-700); stroke-width: 1.5; }
.schematic-svg .sch-price-up     { fill: none; stroke: var(--green-up); stroke-width: 1.5; }
.schematic-svg .sch-price-down   { fill: none; stroke: var(--red-down); stroke-width: 1.5; }

/* 价位水平线：Resistance / Support / Creek / Ice */
.schematic-svg .sch-level {
  fill: none;
  stroke: var(--ink-500);
  stroke-width: 1;
  stroke-dasharray: 6 4;
}
.schematic-svg .sch-level--resistance { stroke: var(--red-press); }
.schematic-svg .sch-level--support    { stroke: var(--green-up); }
.schematic-svg .sch-level--creek      { stroke: var(--ink-500); stroke-dasharray: 2 3; }

/* Phase 分割竖线 */
.schematic-svg .sch-phase-divider {
  stroke: var(--ink-300);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

/* Phase 区域底色（极淡） */
.schematic-svg .sch-phase-a { fill: rgba(196, 18, 32, 0.04); }
.schematic-svg .sch-phase-b { fill: rgba(107, 101, 88, 0.04); }
.schematic-svg .sch-phase-c { fill: rgba(196, 18, 32, 0.06); }
.schematic-svg .sch-phase-d { fill: rgba(15, 122, 71, 0.04); }
.schematic-svg .sch-phase-e { fill: rgba(15, 122, 71, 0.06); }

/* Phase 顶部标注 label */
.schematic-svg .sch-phase-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  fill: var(--ink-500);
}

/* 事件标注：圆点 + 文字 */
.schematic-svg .sch-event-dot {
  fill: var(--red-press);
  stroke: var(--ink-100);
  stroke-width: 2;
}
.schematic-svg .sch-event-dot--green { fill: var(--green-up); }
.schematic-svg .sch-event-dot--ink   { fill: var(--ink-700); }

.schematic-svg .sch-event-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--w-semibold);
  fill: var(--ink-900);
}

.schematic-svg .sch-event-sub {
  font-family: var(--font-sans);
  font-size: 10px;
  fill: var(--ink-500);
}

/* 量柱（图下方区域） */
.schematic-svg .sch-vol-bar          { fill: var(--ink-500); }
.schematic-svg .sch-vol-bar--high    { fill: var(--ink-700); }
.schematic-svg .sch-vol-bar--climax  { fill: var(--red-press); }
.schematic-svg .sch-vol-bar--dry     { fill: var(--ink-400); opacity: 0.5; }

/* 量柱基线 */
.schematic-svg .sch-vol-baseline {
  stroke: var(--ink-300);
  stroke-width: 1;
}

/* 量平均线（30 期移动平均参考） */
.schematic-svg .sch-vol-ma {
  fill: none;
  stroke: var(--orange-warn);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

/* 轴标签 */
.schematic-svg .sch-axis-label {
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  fill: var(--ink-500);
}

/* K 线（蜡烛体）—— 用于案例还原图 */
.schematic-svg .sch-candle-up   { fill: var(--ink-100); stroke: var(--green-up); stroke-width: 1; }
.schematic-svg .sch-candle-down { fill: var(--red-down); stroke: var(--red-down); stroke-width: 1; }
.schematic-svg .sch-candle-wick { stroke: var(--ink-700); stroke-width: 1; }

/* 箭头与指示线 */
.schematic-svg .sch-arrow       { fill: var(--ink-700); }
.schematic-svg .sch-arrow--red  { fill: var(--red-press); }
.schematic-svg .sch-arrow--green{ fill: var(--green-up); }

.schematic-svg .sch-pointer {
  fill: none;
  stroke: var(--ink-500);
  stroke-width: 1;
}

/* 文字注解（图内长文本） */
.schematic-svg .sch-note {
  font-family: var(--font-serif);
  font-size: 11px;
  fill: var(--ink-700);
  font-style: italic;
}

/* 图说（图外） */
.schematic-caption {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  border-top: var(--border-1);
}

.schematic-num {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--red-press);
}

.schematic-title {
  font-family: var(--font-serif);
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  color: var(--ink-900);
  line-height: var(--lh-snug);
}

.schematic-deck {
  font-family: var(--font-serif);
  font-size: var(--t-meta);
  color: var(--ink-500);
  line-height: var(--lh-normal);
}

/* 图后的「读图四问」框 —— V2 教学纪律 */
.schematic-read {
  grid-column: 3 / span 8;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--ink-200);
  border-left: 3px solid var(--red-press);
  margin: var(--space-3) 0 var(--space-5);
}

.schematic-read-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.schematic-read-q {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--ink-500);
}

.schematic-read-a {
  font-family: var(--font-serif);
  font-size: var(--t-meta);
  line-height: var(--lh-normal);
  color: var(--ink-700);
}