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

/* ───────────────────────────────────────────────────────────────
   市场的逻辑 / markets track  (The Logic of Markets —
   How Prices Move, Who Trades, and How)
   Sibling of the 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 markets-only helpers for the order-book / depth widgets. They
   degrade gracefully — every widget also works with the standard
   .widget / .kpi-grid / .dist-canvas shells, so these are optional sugar.
   ─────────────────────────────────────────────────────────────── */

/* 订单簿阶梯：买卖两侧的价格档，用条形长度表示挂单量 */
.book-ladder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 14px;
  font-family: var(--mono);
  font-size: 13px;
  margin: 14px 0 6px;
}
.book-ladder .lvl {
  position: relative;
  padding: 3px 8px;
  border-radius: 4px;
  overflow: hidden;
  white-space: nowrap;
}
.book-ladder .lvl .bar {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  z-index: 0;
  opacity: 0.28;
}
.book-ladder .lvl .px,
.book-ladder .lvl .qty { position: relative; z-index: 1; }
.book-ladder .lvl .qty { float: right; color: var(--text-mute); }
.book-ladder .ask .bar { background: #ef4444; }   /* 卖盘红 */
.book-ladder .bid .bar { background: #22c55e; }   /* 买盘绿 */
.book-ladder .ask .px { color: #fca5a5; }
.book-ladder .bid .px { color: #86efac; }
.book-ladder .spread {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-mute);
  font-size: 12px;
  padding: 4px 0;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
  margin: 2px 0;
}

/* 玩家卡片：谁在交易那一部分，按规模/时限/目标排布 */
.player-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--surface, rgba(255,255,255,0.02));
}
.player-card .who { font-weight: 700; margin-bottom: 4px; }
.player-card .tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mute);
  margin-right: 8px;
}