/* Latency lesson: request flow, histogram with percentile markers, fan-out grid, queueing curve. */

/* Flow */
.lt-flow { display: grid; gap: 22px; width: 100%; max-width: 720px; }
.lt-lane { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.lt-end, .lt-server { padding: 8px 14px; border-radius: 12px; color: #e8efe9; background: var(--sidebar); font-family: var(--mono); font-size: 13px; }
.lt-server { background: var(--green-deep); }
.lt-track { position: relative; height: 44px; border-bottom: 2px dashed var(--line-strong); overflow: hidden; }
.lt-track > i { position: absolute; top: 14px; left: 0; width: 14px; height: 14px; border-radius: 99px; background: var(--green); animation: ltMove 2.4s linear infinite; animation-delay: calc(var(--i) * -.3s); }
@keyframes ltMove { from { left: -4%; } to { left: 100%; } }
.lt-flow.watch .lt-track > i:first-of-type { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
.lt-flow.busy .lt-track > i { animation-duration: 2.6s; }
.lt-queue { position: absolute; right: 6px; top: 12px; display: flex; gap: 3px; }
.lt-queue i { width: 12px; height: 12px; border-radius: 99px; background: var(--coral); animation: nrNudge 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * 90ms); }
.lt-readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lt-readouts div { display: grid; gap: 2px; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); opacity: .4; transition: opacity .3s, border-color .3s; }
.lt-readouts div.on { opacity: 1; border-color: var(--green); }
.lt-readouts small { color: var(--muted); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.lt-readouts b { font-family: var(--mono); font-size: 24px; }
.lt-flow.busy [data-r="latency"] b { color: var(--coral); }

/* Histogram */
.lt-hist { width: 100%; max-width: 820px; }
.lt-bars { position: relative; display: flex; align-items: flex-end; gap: 1px; height: min(42vh, 300px); padding-top: 44px; border-bottom: 1.5px solid var(--line-strong); }
.lt-bars > i { flex: 1; height: var(--h); min-width: 0; border-radius: 3px 3px 0 0; background: var(--green); animation: ltGrow .5s cubic-bezier(.2, .8, .3, 1) backwards; animation-delay: calc(var(--i) * 12ms); transform-origin: bottom; }
@keyframes ltGrow { from { transform: scaleY(0); } }
.lt-hist.show-tail .lt-bars > i.tail { background: var(--coral); }
.lt-mark { position: absolute; top: 0; bottom: 0; display: grid; align-content: start; justify-items: center; width: 0; opacity: 0; transition: opacity .3s; }
.lt-mark::after { content: ""; position: absolute; top: 34px; bottom: 0; border-left: 2px dashed var(--ink); }
.lt-mark b, .lt-mark small { position: relative; white-space: nowrap; padding: 0 6px; background: var(--bg); font-family: var(--mono); }
.lt-mark b { font-size: 12px; }
.lt-mark small { color: var(--muted); font-size: 10.5px; }
.lt-mark.on { opacity: 1; }
.lt-mark[data-mark="mean"]::after { border-color: var(--amber); }
.lt-mark[data-mark="mean"] b { color: var(--amber); }
.lt-mark[data-mark="p99"]::after, .lt-mark[data-mark="p95"]::after { border-color: var(--coral); }
.lt-mark[data-mark="p99"] b, .lt-mark[data-mark="p95"] b { color: var(--coral); }
.lt-mark[data-mark="p50"] b { color: var(--green-deep); }
.lt-mark[data-mark="p50"] { transform: translateX(-14px); }
.lt-mark[data-mark="mean"] { transform: translateX(14px); }
.lt-axis { position: relative; height: 16px; margin-top: 4px; color: var(--muted); font-family: var(--mono); font-size: 10.5px; }
.lt-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.lt-axis span:first-child { transform: none; }

/* Fan-out grid */
.lt-amp { display: grid; justify-items: center; gap: 14px; }
.lt-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.lt-grid i { width: 14px; height: 14px; border-radius: 3px; background: var(--green-soft); border: 1px solid var(--green); transition: background .2s, border-color .2s; }
.lt-grid.big i { width: clamp(16px, 3.2vh, 26px); height: clamp(16px, 3.2vh, 26px); animation: sqIn .3s backwards; animation-delay: calc(var(--i) * 6ms); }
.lt-grid i.slow { background: var(--coral); border-color: var(--coral); }
.lt-amp-out { display: grid; justify-items: center; }
.lt-amp-out b { font-family: var(--mono); font-size: 36px; color: var(--coral); }
.lt-amp-out small { color: var(--muted); font-size: 13px; }

/* Playground panels (Explore, Guided sliders, queue scenes) */
.lt-play { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 14px; }
.lt-queueing { width: 100%; max-width: 560px; }
.lt-panel { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.lt-panel h3 { margin: 0; font-size: 15px; }
.lt-panel label { display: grid; gap: 6px; font-size: 13px; }
.lt-panel label b { font-family: var(--mono); }
.lt-panel input[type="range"] { width: 100%; accent-color: var(--green); }
.lt-panel p { margin: 0; color: var(--muted); font-size: 13px; }
.lt-panel p b { color: var(--ink); font-family: var(--mono); }
.lt-curve { width: 100%; height: 140px; border-left: 1.5px solid var(--line-strong); border-bottom: 1.5px solid var(--line-strong); overflow: visible; }
.lt-curve path { fill: none; stroke: var(--green); stroke-width: 2; vector-effect: non-scaling-stroke; }
.lt-curve circle { fill: var(--green-deep); transition: cx .15s, cy .15s; }
.lt-curve circle.hot { fill: var(--coral); }

@media (max-width: 760px) {
  .lt-readouts b { font-size: 18px; }
  .lt-mark small { display: none; }
  .lt-grid.big i { width: 16px; height: 16px; }
}