/* MAGIC PTT SL DESKTOP · D4 NET REPLAY (2026-11-07). Docked in the desk centre; violet is replay's own colour. */
.sldrp {
  position: fixed; top: 64px; left: 300px; right: 340px; bottom: 0; z-index: 92; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 12px; padding: 18px 24px 16px;
  background: radial-gradient(70% 70% at 50% 30%, #12102a 0%, #05080a 70%); color: #efe6d6;
  border-left: 1px solid rgba(255, 255, 255, 0.06); border-right: 1px solid rgba(255, 255, 255, 0.06);
  font-family: "Saira Semi Condensed", var(--font-display), sans-serif;
}
.sldrp[hidden] { display: none !important; }
.sldrp__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 1px solid rgba(176, 124, 255, 0.2); padding-bottom: 10px; }
.sldrp__head > div { display: flex; flex-direction: column; gap: 2px; }
.sldrp__kick { font-size: 12px; letter-spacing: 0.24em; color: #b07cff; font-weight: 700; }
.sldrp__head b { font-size: 26px; font-weight: 800; }
.sldrp__head small { font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 11px; color: #8a8174; }
.sldrp .sldrp__close { all: unset; cursor: pointer; padding: 9px 16px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; font: 700 12px var(--font-display); letter-spacing: 0.14em; color: #efe6d6; background: none !important; }
.sldrp__mid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; }
.sldrp__scope { width: 100%; height: 100%; min-height: 0; }
.sldrp__scope text { font-family: "Saira Semi Condensed", var(--font-display), sans-serif; }
.sldrp__list { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid rgba(255, 255, 255, 0.06); padding-left: 14px; }
.sldrp__lh { font-size: 11px; letter-spacing: 0.24em; color: #8a8174; font-weight: 700; padding: 4px 0 8px; }
.sldrp .sldrp__ev {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 7px 8px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06); font-size: 14px; font-weight: 800; color: #efe6d6; background: none !important;
}
.sldrp__ev small { font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 10px; color: #8a8174; font-weight: 500; }
.sldrp__ev.past { opacity: 0.55; }
.sldrp__ev.now { opacity: 1; border-color: #b07cff; }
.sldrp .slv-rp__txt { font-weight: 500; }
.sldrp__tl { position: relative; flex: none; border-top: 1px solid rgba(176, 124, 255, 0.2); padding-top: 10px; cursor: col-resize; user-select: none; }
.sldrp__axis { display: flex; justify-content: space-between; margin-left: 100px; font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 10px; color: #8a8174; padding-bottom: 6px; }
.sldrp__lanes { display: flex; flex-direction: column; gap: 5px; max-height: 150px; overflow-y: auto; }
.sldrp__lane { display: flex; align-items: center; gap: 10px; }
.sldrp__who { width: 90px; flex: none; font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sldrp__track { position: relative; flex: 1; height: 18px; border-radius: 4px; background: rgba(255, 255, 255, 0.03); }
.sldrp .sldrp__clip { all: unset; position: absolute; top: 2px; bottom: 2px; border-radius: 3px; background: #b07cff; opacity: 0.85; cursor: pointer; min-width: 3px; }
.sldrp .sldrp__clip.mark { width: 4px; }
.sldrp__cursor { position: absolute; top: 24px; bottom: 0; width: 2px; background: #b07cff; pointer-events: none; }
.sldrp__note { margin: 6px 0; font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 11px; color: #8a8174; }
.sldrp__ctl { display: flex; align-items: center; gap: 10px; flex: none; }
.sldrp .sldrp__ctl button {
  all: unset; box-sizing: border-box; cursor: pointer; height: 42px; padding: 0 18px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12);
  font: 800 14px var(--font-display); letter-spacing: 0.14em; color: #efe6d6; display: flex; align-items: center; background: none !important;
}
.sldrp .sldrp__play { border-color: #b07cff !important; background: rgba(176, 124, 255, 0.15) !important; }
.sldrp .sldrp__ctl button.on { border-color: #b07cff !important; color: #b07cff; }
.sldrp__at { font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 12px; color: #b07cff; }
.sldrp__hint { margin-left: auto; font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 11px; color: #8a8174; }
body.sld-replay .sld-grid { visibility: hidden; }
body.sld-replay .sld-left, body.sld-replay .sld-right { visibility: visible; }
/* on the Desktop the phone replay screen never shows; REPLAY · R is the way in */
body.sld .slv-rp { display: none !important; }
body.sld .slv-more .slv-more__replay { display: none; }

.sldrp .sldrp__ctl button { white-space: nowrap; height: 40px; padding: 0 14px; font-size: 13px; }
.sldrp__hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }