/* ==========================================================================
   demo-replay.css: the hero "decoding replay" (static/js/demo-replay.js).
   Mount: #demo (data-widget="demo-replay").
   The window is always dark (.term); the caption below it follows the page
   theme. Pass colours come only from the shared ramp: [data-pass] inside
   .term maps to the fixed terminal ramp --t1..--t4 (style.css, section 5n).
   ========================================================================== */

#demo .dr { position: relative; }

/* --------------------------------------------------------------- window */
.dr-win {
  /* Widget-local colours. The window is dark in both page themes, so these
     are fixed values (latent = the dark-theme --latent-* hue). */
  --dr-edge: rgba(148, 163, 184, .22);
  --dr-ctl-edge: #263349;
  --dr-ctl-edge-hover: #3b4a63;
  --dr-ours: #93c5fd;
  --dr-ok: #4ade80;
  --dr-sep: rgba(10, 16, 32, .9);
  --dr-lat-bg: rgba(250, 204, 21, .07);
  --dr-lat-edge: rgba(250, 204, 21, .45);
  --dr-lat-glow: rgba(253, 230, 138, .24);
  --dr-act: rgba(253, 224, 71, .85);
  color-scheme: dark;
  position: relative;
  border: 1px solid var(--dr-edge);
  border-radius: var(--r-win);
  background: var(--term-bg);
  box-shadow: var(--sh-xl), inset 0 1px 0 rgba(255, 255, 255, .04);
}

/* ------------------------------------------------------------ title bar */
.dr-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 50px;
  padding: 7px 10px 7px 16px;
  border-bottom: 1px solid var(--term-line);
  border-radius: calc(var(--r-win) - 1px) calc(var(--r-win) - 1px) 0 0;
  background: var(--term-bar);
}
.dr-dots { display: inline-flex; flex: none; gap: 7px; }
.dr-dots i { width: 11px; height: 11px; border-radius: 50%; background: #f87171; }
.dr-dots i:nth-child(2) { background: #fbbf24; }
.dr-dots i:nth-child(3) { background: #4ade80; }
.dr-wintitle {
  min-width: 0;
  overflow: hidden;
  color: var(--term-muted);
  font: 500 .8125rem/1.2 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dr-ctrls { display: flex; align-items: center; gap: 8px; min-width: 0; margin-left: auto; }
.dr .dr-select {
  min-height: 34px;
  max-width: 15rem;
  border-color: var(--dr-ctl-edge);
  border-radius: 9px;
  font-size: .8125rem;
  text-overflow: ellipsis;
}
.dr .dr-select:hover { border-color: var(--dr-ctl-edge-hover); }

.dr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--dr-ctl-edge);
  border-radius: 9px;
  background: rgba(255, 255, 255, .04);
  color: var(--term-text);
  font: 600 .8125rem/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1);
}
.dr-btn:hover { border-color: var(--dr-ctl-edge-hover); background: rgba(255, 255, 255, .09); color: var(--term-strong); }
.dr-btn:active { transform: translateY(1px); }
.dr-ico { width: 15px; height: 15px; flex: none; }
.dr-btn--play { min-width: 6.75rem; }   /* Play / Pause / Resume without reflow */
.dr-btn--primary { border-color: #2563eb; background: #2563eb; color: #ffffff; }
.dr-btn--primary:hover { border-color: #1d4ed8; background: #1d4ed8; color: #ffffff; }

/* "Real time" switch (role="switch") */
.dr-switch { gap: 8px; padding: 0 12px 0 10px; }
.dr-switch__track {
  position: relative;
  flex: none;
  width: 26px;
  height: 16px;
  border-radius: var(--r-pill);
  background: #334155;
  transition: background-color var(--dur-2);
}
.dr-switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e2e8f0;
  transition: transform var(--dur-2) var(--ease);
}
.dr-switch[aria-checked="true"] .dr-switch__track { background: #3b82f6; }
.dr-switch[aria-checked="true"] .dr-switch__track::after { transform: translateX(10px); background: #ffffff; }

/* ------------------------------------------------------------ race bars */
.dr-race { padding: 11px 16px 13px; border-bottom: 1px solid var(--term-line); }
.dr-race__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.dr-race__label {
  color: var(--term-muted);
  font: 600 .75rem/1.2 var(--font-body);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.dr-speed {
  padding: 3px 9px;
  border: 1px solid var(--dr-ctl-edge);
  border-radius: var(--r-pill);
  color: var(--term-text);
  font: 600 .75rem/1.2 var(--font-mono);
  white-space: nowrap;
}
.dr--realtime .dr-speed { border-color: rgba(147, 197, 253, .45); color: var(--dr-ours); }

.dr-row {
  display: grid;
  grid-template-columns: minmax(0, 12.5rem) 6.5rem minmax(0, 1fr) 6.5rem;
  grid-template-areas: "name rate track time";
  align-items: center;
  column-gap: 14px;
  min-height: 32px;
}
.dr-row + .dr-row { margin-top: 6px; }
.dr-name { grid-area: name; display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; }
.dr-name__main { color: var(--term-strong); font: 500 .9375rem/1.25 var(--font-display); }
.dr-name__tag { overflow: hidden; color: var(--term-muted); font: 400 .8125rem/1.25 var(--font-body); text-overflow: ellipsis; }
.dr-row--alo .dr-name__main { color: var(--dr-ours); font-weight: 700; }
.dr-rate {
  grid-area: rate;
  color: var(--term-muted);
  font: 500 .8125rem/1.2 var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.dr-track {
  grid-area: track;
  position: relative;
  display: block;
  height: 22px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: rgba(148, 163, 184, .09);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .10);
}
.dr-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #64748b, #94a3b8);
  transform: translateX(-100%);
  transition: transform 90ms linear;
  will-change: transform;
}
.dr-row--alo .dr-fill { background: linear-gradient(90deg, #60a5fa, #a78bfa); }
.dr-time {
  grid-area: time;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: var(--term-text);
  font: 600 1.25rem/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dr-row--alo .dr-time { color: var(--dr-ours); }
.dr-time__ok {
  display: inline-flex;
  color: var(--term-muted);
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--dur-2), transform var(--dur-2) var(--ease);
}
.dr-row--alo .dr-time__ok { color: var(--dr-ok); }
.dr-time__ico { width: 16px; height: 16px; }
.dr[data-alo="done"] .dr-row--alo .dr-time__ok,
.dr[data-ar="done"] .dr-row--ar .dr-time__ok { opacity: 1; transform: none; }

/* Finish badge: fades in on the (full) ALoDLM bar */
.dr-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 12px;
  color: #0b1220;
  font: 500 .8125rem/1 var(--font-body);
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease), visibility 0s linear var(--dur-3);
  pointer-events: none;
}
.dr-badge__ico { width: 14px; height: 14px; flex: none; }
.dr-badge .dr-badge__speed { color: inherit; font-weight: 700; }   /* beats `.term strong`: the badge sits on the light bar */
.dr-badge__sep { margin-right: 8px; opacity: .6; }
.dr[data-alo="done"] .dr-badge { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }

/* Accuracy line under the bars on narrower windows (space is reserved) */
.dr-verdict { display: none; }

/* ------------------------------------------------- mobile pane switcher */
.dr-switcher { display: none; }

/* ---------------------------------------------------------------- panes */
.dr-panes { display: grid; grid-template-columns: minmax(0, 1fr); }
.dr-pane { display: flex; flex-direction: column; min-width: 0; }
.dr-pane--alo { background: radial-gradient(110% 60% at 100% 0%, rgba(59, 130, 246, .08), transparent 62%); }
.dr-pane__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "dot title right" ". sub sub";
  align-items: center;
  align-content: center;
  column-gap: 10px;
  row-gap: 2px;
  padding: 11px 18px 10px;
}
.dr-dot { grid-area: dot; width: 8px; height: 8px; border-radius: 50%; background: #64748b; }
.dr-pane--alo .dr-dot { background: var(--dr-ours); }
.dr[data-state="playing"]:not([data-ar="done"]) .dr-pane--ar .dr-dot { animation: dr-ping-ar 1.6s ease-out infinite; }
.dr[data-state="playing"]:not([data-alo="done"]) .dr-pane--alo .dr-dot { animation: dr-ping-alo 1.1s ease-out infinite; }
.dr[data-alo="done"] .dr-pane--alo .dr-dot { background: var(--dr-ok); }
.dr-pane__title { grid-area: title; min-width: 0; color: var(--term-strong); font: 500 1rem/1.25 var(--font-display); }
.dr-pane--alo .dr-pane__title { color: var(--dr-ours); font-weight: 700; }
.dr-pane__sub { grid-area: sub; min-width: 0; color: var(--term-muted); font: 400 .75rem/1.35 var(--font-mono); }
.dr-pane__sub > span { white-space: nowrap; }

/* Recurrent-pass pips (ALoDLM pane header) */
.dr-pips {
  grid-area: right;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--dr-ctl-edge);
  border-radius: var(--r-pill);
  color: var(--term-muted);
  font: 500 .75rem/1 var(--font-mono);
}
.dr-pips__dots { display: inline-flex; gap: 4px; }
.dr-pips__dots i { width: 9px; height: 9px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .38); }
.dr-pips__dots i.is-on { background: var(--pass-bg); box-shadow: inset 0 0 0 1px rgba(226, 232, 240, .6); }
.dr-pips__dots i.is-cur { box-shadow: inset 0 0 0 1px rgba(226, 232, 240, .6), 0 0 0 1.5px var(--dr-ours); }
.dr-pips__num { min-width: 4ch; color: var(--term-text); font-variant-numeric: tabular-nums; text-align: right; }
.dr[data-alo="done"] .dr-pips__num { color: var(--dr-ok); }

/* Transcript */
.dr-scroll {
  position: relative;
  height: clamp(240px, 38vh, 420px);
  margin: 0 18px 12px;
  padding: 10px 6px 2px 14px;
  overflow-x: hidden;
  overflow-y: auto;
  border-left: 2px solid #1e293b;
  scrollbar-width: thin;
  scrollbar-color: #334155 transparent;
  /* lines scrolling out at the top fade instead of being cut mid-glyph */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 10px);
}
.dr-pane--alo .dr-scroll { border-left-color: rgba(96, 165, 250, .34); }
.dr-scroll:focus-visible { outline-offset: 3px; }
.dr-tx {
  color: var(--term-text);
  font: 400 .84375rem/1.8 var(--font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 4;
}
.dr-turn + .dr-turn { margin-top: .85em; }
.dr-role { color: var(--term-accent); font-weight: 600; }
.dr-win ::selection { background: rgba(147, 197, 253, .32); }
.dr-suffix { color: var(--term-muted); }

/* Tokens: every box is laid out up front; playback only toggles classes. */
.dr-t { position: relative; visibility: hidden; }
.dr-t.is-on, .dr-t.is-lat { visibility: visible; }

/* Qwen3-8B caret: drawn at the left edge of the next (still hidden) token */
.dr-t.is-next::before {
  content: "";
  position: absolute;
  top: .22em;
  left: 0;
  width: 2px;
  height: 1.2em;
  border-radius: 1px;
  background: var(--term-strong);
  visibility: visible;
  animation: dr-blink 1.05s steps(1) infinite;
}
.dr[data-state="playing"] .dr-t.is-next::before { animation: none; }

/* ALoDLM-8B: latent placeholders -> committed chips shaded by pass */
/* Transitions live on .is-on only, so hidden -> placeholder is instant (no
   text leaks) and only placeholder -> committed is animated. */
.dr-pane--alo .dr-t {
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.dr-pane--alo .dr-t.is-lat {
  color: transparent;
  background-color: var(--dr-lat-bg);
  background-image: linear-gradient(100deg, transparent 25%, var(--dr-lat-glow) 50%, transparent 75%);
  background-repeat: no-repeat;
  background-size: 300% 100%;
  box-shadow: inset 0 0 0 1px var(--dr-lat-edge);
  animation: dr-shimmer 1.2s linear infinite;
}
.dr-pane--alo .dr-t.is-on {
  background-color: var(--pass-bg);
  color: var(--pass-ink);
  box-shadow: inset -1px 0 0 var(--dr-sep);
  transition: background-color .26s var(--ease), color .26s var(--ease), box-shadow .3s var(--ease);
  animation: dr-pop .55s var(--ease);
}
.dr-pane--alo .dr-t.is-on.is-act { box-shadow: inset -1px 0 0 var(--dr-sep), inset 0 -2px 0 var(--dr-act); }

/* Pane footers */
.dr-pane__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  min-height: 46px;
  margin-top: auto;
  padding: 10px 18px 12px;
  border-top: 1px solid var(--term-line);
  color: var(--term-muted);
  font: 500 .8125rem/1.3 var(--font-body);
}
.dr .dr-legend { gap: 6px 9px; font-size: .8125rem; }
.dr .dr-legend .legend__title { color: var(--term-text); }
.dr .dr-legend .legend__item { gap: 6px; }
.dr-legend__lat { margin-left: 4px; }
.dr-sw {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--pass-bg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  color: var(--pass-ink);
  font: 600 .75rem/1 var(--font-mono);
}
.dr-sw--lat { width: 20px; padding: 0; background: var(--dr-lat-bg); box-shadow: inset 0 0 0 1px var(--dr-lat-edge); }
.dr-count { min-width: 16ch; color: var(--term-text); font: 500 .8125rem/1.2 var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ---------------------------------------------------------- keyframes */
@keyframes dr-shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}
@keyframes dr-pop {
  from { filter: brightness(1.75) saturate(1.15); }
  to { filter: none; }
}
@keyframes dr-blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes dr-ping-ar {
  0% { box-shadow: 0 0 0 0 rgba(148, 163, 184, .55); }
  100% { box-shadow: 0 0 0 7px rgba(148, 163, 184, 0); }
}
@keyframes dr-ping-alo {
  0% { box-shadow: 0 0 0 0 rgba(147, 197, 253, .6); }
  100% { box-shadow: 0 0 0 8px rgba(147, 197, 253, 0); }
}

/* Final state rendered without animation (reduced motion) */
.dr--instant .dr-t,
.dr--instant .dr-pane--alo .dr-t.is-on,
.dr--instant .dr-pane--alo .dr-t.is-lat,
.dr--instant .dr-fill,
.dr--instant .dr-badge,
.dr--instant .dr-time__ok,
.dr--instant .dr-verdict { animation: none; transition: none; }

/* ----------------------------------------------------------- responsive */
@media (min-width: 768px) {
  .dr-panes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dr-pane--alo { border-left: 1px solid var(--term-line); }
}
/* Align head / transcript / footer rows across the two panes */
@supports (grid-template-rows: subgrid) {
  .dr-panes { grid-template-rows: auto auto auto; }
  .dr-pane { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .dr-pane__foot { margin-top: 0; }
}

@media (max-width: 1023.98px) {
  .dr-wintitle { display: none; }
  .dr-row { grid-template-columns: minmax(0, 11rem) 6rem minmax(0, 1fr) 6rem; column-gap: 12px; }
  .dr-badge__acc, .dr-badge__ico { display: none; }
  .dr-legend__long { display: none; }
  .dr .dr-legend .legend__title { text-transform: capitalize; }
  .dr-verdict {
    display: block;
    min-height: 1.35em;
    margin: 6px 0 0;
    color: var(--term-text);
    font: 500 .8125rem/1.35 var(--font-body);
    text-align: right;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--dur-3) var(--ease), visibility 0s linear var(--dur-3);
  }
  .dr[data-alo="done"] .dr-verdict { visibility: visible; opacity: 1; transition-delay: 0s; }
}

@media (max-width: 767.98px) {
  .dr-bar { gap: 10px; padding: 7px 8px 7px 12px; }
  .dr-dots { gap: 6px; }
  .dr-dots i { width: 10px; height: 10px; }
  .dr-ctrls { flex: 1 1 auto; gap: 6px; }
  .dr .dr-select { flex: 1 1 auto; min-width: 0; max-width: none; }
  .dr-btn--play, .dr-btn--replay { width: 36px; min-width: 0; padding: 0; }
  .dr-btn--play .dr-btn__txt, .dr-btn--replay .dr-btn__txt { display: none; }
  .dr-switch--bar { display: none; }

  .dr-race { padding: 10px 12px 12px; }
  .dr-row {
    grid-template-columns: minmax(0, 6.25rem) minmax(0, 1fr) auto;
    grid-template-areas: "name track time" "rate track time";
    column-gap: 10px;
    row-gap: 1px;
  }
  .dr-row + .dr-row { margin-top: 8px; }
  .dr-name__tag { display: none; }
  .dr-rate { font-size: .75rem; text-align: left; }
  .dr-time { gap: 4px; font-size: 1.0625rem; }
  .dr-time__ico { width: 14px; height: 14px; }
  .dr-badge { padding: 0 8px; font-size: .75rem; }
  .dr-verdict { font-size: .75rem; }

  .dr-switcher {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--term-line);
  }
  .dr-switcher .seg__btn { min-height: 34px; padding: 0 12px; font-size: .8125rem; }
  .dr-switch--seg { min-height: 36px; }
  .dr[data-pane="alo"] .dr-pane--ar,
  .dr[data-pane="ar"] .dr-pane--alo { display: none; }

  .dr-pane__head { padding: 12px 14px 10px; }
  .dr-scroll { height: 320px; margin: 0 12px 12px; padding-left: 12px; }
  .dr-tx { font-size: .8125rem; }
  .dr-pane__foot { padding: 10px 14px 12px; }
}

@media (max-width: 399.98px) {
  .dr-xs-hide, .dr-pips__dots { display: none; }
  .dr-switcher .seg__btn { padding: 0 11px; }
  .dr-switch--seg { padding: 0 10px 0 8px; }
}

@media (forced-colors: active) {
  .dr-win { border: 1px solid CanvasText; }
  .dr-pane--alo .dr-t.is-on, .dr-sw, .dr-pips__dots i.is-on { forced-color-adjust: none; }
  .dr-pane--alo .dr-t.is-lat { outline: 1px dashed CanvasText; }
  .dr-switch__track { outline: 1px solid ButtonText; }
  .dr-fill { forced-color-adjust: none; }
}