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

/* ───────────────────────────────────────────────────────────────
   饮品的逻辑 / beverages track  (The Logic of Beverages — tea, coffee
   and China's everyday cup). Sibling of the cooking and drinks tracks:
   reuses the cosmos component sheet verbatim (kicker / source-note /
   takeaway / mini-flow / lesson-flow / position-grid / trade-table /
   toc-grid / widget / kpi-grid / dist-canvas).
   Adds one component: .chain — the linear-position strip under each
   lesson's subtitle. Its left cell is the previous lesson's exit
   question, its right cell is this lesson's exit question, copied
   verbatim (tools/beverages_qa/seams.py checks they match).
   ─────────────────────────────────────────────────────────────── */

.chain {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin: 16px 0 22px;
}
.chain > span {
  position: relative;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-mute);
}
.chain > span b {
  display: block;
  margin-bottom: 3px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
}
.chain > span.this {
  border-color: #b9c4f5;
  background: var(--accent-soft, #eef2ff);
  color: var(--text);
}
.chain > span + span::before {
  content: "→";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 12px;
}

@media (max-width: 640px) {
  .chain { grid-template-columns: 1fr; }
  .chain > span + span::before { content: "↓"; left: 50%; top: -10px; transform: translateX(-50%); }
  table { display: block; overflow-x: auto; }
}

/* KPI labels carry units (mg, mL, g/100 mL); the shared base sheet uppercases them — keep units as written */
.kpi .k { text-transform: none; letter-spacing: 0.02em; }