/* =========================================================
   sysdesign.css — ML System Design slide types: `funnel` and `sequence`.
   `funnel` is pure CSS on the deck's generic step engine (data-max-step /
   [data-step] / is-step-hidden). `sequence` is driven by js/sequence.js.
   ========================================================= */

/* ---------- FUNNEL — multi-stage cascade that narrows (retrieval→rank→…) ---------- */
.slide[data-type="funnel"] > .slide-body { display: grid; align-content: center; }
.funnel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  max-width: 1500px;
  margin: var(--sp-3) auto 0;
}
.funnel-stage {
  width: var(--w, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity var(--dur) var(--ease);
}
/* down-taper chevron between stages */
.funnel-stage:not(:last-child)::after {
  content: "▾";
  font-size: var(--fs-caption-lg);
  line-height: 1;
  color: var(--ink-4);
  margin-top: 2px;
}
.fn-bar {
  width: 100%;
  box-sizing: border-box;
  padding: 14px var(--sp-5);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  background: var(--bg-card);
  border: 2px solid var(--rule-strong);
}
.fn-name { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; color: var(--ink); white-space: nowrap; }
.fn-count { font-family: var(--font-mono); font-size: var(--fs-body); color: var(--ink-2); white-space: nowrap; }
.fn-desc { font-family: var(--font-sans); font-size: var(--fs-label); color: var(--ink-3); margin-top: 5px; text-align: center; }
/* role tints (retrieval/rank/rerank/corpus) */
.fn-bar[data-role="corpus"]    { background: var(--bg-alt); }
.fn-bar[data-role="retrieval"] { background: var(--accent-soft);  border-color: var(--accent); }
.fn-bar[data-role="rank"]      { background: var(--c-green-soft); border-color: var(--c-green); }
.fn-bar[data-role="rerank"]    { background: var(--c-amber-soft); border-color: var(--c-amber); }

/* ---------- SEQUENCE — request flow / latency budget (lifelines + messages) ---------- */
.slide[data-type="sequence"] > .slide-body { display: grid; align-content: center; }
.seq-stage { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-5); align-items: stretch; }
.seq-canvas { position: relative; min-height: 560px; }
/* lifeline columns */
.seq-actors { display: flex; justify-content: space-between; position: relative; z-index: 2; }
.seq-actor {
  flex: 1; text-align: center;
  font-family: var(--font-sans); font-size: var(--fs-tiny); font-weight: 600; color: var(--ink);
}
.seq-actor .seq-actor-chip {
  display: inline-block; padding: 8px 16px; border-radius: var(--r-sm);
  background: var(--bg-card); border: 2px solid var(--rule-strong);
}
/* vertical lifelines drawn by the engine */
.seq-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.seq-lines line { stroke: var(--rule); stroke-width: 2; stroke-dasharray: 4 6; }
/* messages: each is a row revealed by step */
.seq-msgs { position: absolute; inset: 0; z-index: 1; }
.seq-msg {
  position: absolute; height: 0;
  border-top: 3px solid var(--ink-2);
  transition: opacity var(--dur) var(--ease);
}
.seq-msg::after {                 /* arrowhead */
  content: ""; position: absolute; top: -7px; width: 0; height: 0;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.seq-msg[data-dir="right"]::after { right: -1px; border-left: 10px solid var(--ink-2); }
.seq-msg[data-dir="left"]::after  { left: -1px;  border-right: 10px solid var(--ink-2); }
.seq-msg.af-wire-async, .seq-msg[data-kind="async"] { border-top-style: dashed; }
.seq-msg .seq-msg-label {
  position: absolute; top: -28px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 19px; color: var(--ink-2);
  background: var(--bg); padding: 0 6px; white-space: nowrap;
}
.seq-msg .seq-lat {
  position: absolute; top: 4px; right: 0; font-family: var(--font-mono);
  font-size: 20px; color: var(--c-amber-ink, #8A5A00);
}
.seq-msg.is-step-hidden, .funnel-stage.is-step-hidden { /* uses global ghost (opacity .08) */ }
/* Sparse teaching sequences need readable labels, not the dense trace default. */
.seq-stage[data-size="body"] .seq-actor,
.seq-stage[data-size="body"] .seq-msg .seq-msg-label,
.seq-stage[data-size="body"] .seq-msg .seq-lat { font-size: var(--fs-small); }
.seq-stage[data-size="body"] .seq-msg .seq-msg-label { top: -40px; }

/* running latency budget (right gutter) */
.seq-budget {
  align-self: center;
  border-left: 3px solid var(--rule); padding-left: var(--sp-5); min-width: 280px;
}
.seq-budget-head { font-family: var(--font-mono); font-size: 20px; text-transform: uppercase; letter-spacing: .14em; color: var(--accent-ink); margin-bottom: var(--sp-3); }
.seq-budget-row { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-tiny); padding: 4px 0; transition: opacity var(--dur) var(--ease); }
.seq-budget-row.is-step-hidden { opacity: .12; }
.seq-budget-row .seq-b-lat { font-family: var(--font-mono); color: var(--ink-2); }
.seq-budget-total { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--rule); display: flex; justify-content: space-between; font-size: var(--fs-caption-lg); font-weight: 600; }
.seq-budget-total .seq-b-lat { font-family: var(--font-mono); color: var(--c-green); }
.seq-budget-total.is-over .seq-b-lat { color: var(--c-red); }

@media (prefers-reduced-motion: reduce) {
  .funnel-stage, .seq-msg, .seq-budget-row { transition: none; }
}
@media print {
  .funnel-stage.is-step-hidden, .seq-msg.is-step-hidden, .seq-budget-row.is-step-hidden { opacity: 1 !important; }
}