@import url("../../cosmos/lessons/style.css");

/* ───────────────────────────────────────────────────────────────
   交易的手艺 / trader track  (The Trader's Craft —
   What a Wall Street Trader Actually Does)
   Sibling of the markets / travel / drinks / politics tracks. Reuses the
   cosmos component sheet verbatim (which @imports the shared RL base sheet
   and defines kicker / source-note / takeaway / position-grid / lesson-flow /
   mini-flow / trade-table / lesson-grid / toc-grid / widget / kpi-grid /
   controls / prompt-list / dist-canvas / callout ok|warn).

   A few trader-only helpers for the P&L / risk-factor / payoff widgets.
   They degrade gracefully — every widget also works with the standard
   .widget / .kpi-grid / .dist-canvas shells, so these are optional sugar.
   ─────────────────────────────────────────────────────────────── */

/* 账本：左标签右数值的等宽小账（盈亏拆解、希腊字母敞口、报价明细） */
.ledger {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  font-family: var(--mono);
  font-size: 13px;
  margin: 14px 0 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--surface, rgba(255,255,255,0.02));
}
.ledger .row { display: contents; }
.ledger .lbl { color: var(--text-mute); }
.ledger .val { text-align: right; }
.ledger .pos { color: #86efac; }   /* 盈利/多头绿 */
.ledger .neg { color: #fca5a5; }   /* 亏损/空头红 */
.ledger .rule {
  grid-column: 1 / -1;
  border-top: 1px dashed var(--border);
  margin: 4px 0;
}
.ledger .tot { font-weight: 700; }

/* 风险因子标签行：把一笔持仓拆成一排「敞口筹码」 */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--mono);
  font-size: 12px;
  background: var(--surface, rgba(255,255,255,0.02));
}
.chip .k { color: var(--text-mute); }
.chip.keep  { border-color: rgba(34,197,94,0.5); }   /* 被付钱、留下的风险 */
.chip.hedge { border-color: rgba(239,68,68,0.5); }   /* 没被付钱、要对冲掉的风险 */

/* 收益形状图例：直线(线性/方向) vs 折线(凸/期权) 的小图例 */
.payoff-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--text-mute);
  margin: 8px 0 2px;
}
.payoff-legend span::before {
  content: "";
  display: inline-block;
  width: 14px; height: 0;
  border-top: 3px solid currentColor;
  margin-right: 6px;
  vertical-align: middle;
}
.payoff-legend .flow  { color: #f59e0b; }
.payoff-legend .view  { color: #60a5fa; }