/* Dashboard: one job, set the delay. Status strip, trial strip, then the
   hero: the delay in rolling digits, the timeline you drag to set it, a
   status line, the mode bar (instant / automatic) and the platforms strip.
   One centered column (--col) keeps every row aligned. Motion is
   transform/opacity only. No prefers-reduced-motion switch on purpose:
   Windows reports "reduce" as soon as its window animations are off, which
   would freeze the dashboard while the overlay studio keeps moving. */

.dash2 { position: relative; min-height: calc(100vh - var(--topH)); display: flex; flex-direction: column; gap: clamp(10px, 1.6vh, 18px); padding-block: clamp(10px, 1.6vh, 18px) clamp(14px, 2.2vh, 28px); --col: min(100%, 900px); --tape-ease: cubic-bezier(.22, 1, .36, 1); --tape-dur: .8s; }
.dash2 > *:not(.dbg):not(.dgrain) { position: relative; z-index: 1; animation: riseIn .55s var(--ease) both; }
.dash2 > *:nth-child(4) { animation-delay: .05s; }
.dash2 > *:nth-child(5) { animation-delay: .1s; }
.dash2 > *:nth-child(6) { animation-delay: .15s; }
.dash2.locked .tape, .dash2.locked .dnum { opacity: .35; pointer-events: none; }

/* ─── Background: warmth, vignette, grain (fixed to the viewport) ── */
.dbg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.dbg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 44%, rgba(251,191,36,.05), transparent 70%), radial-gradient(ellipse 110% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%); }
.dgrain { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ─── Status strip: spans the content width, lines up with the top bar ── */
.dstrip { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dpill { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 16px 0 14px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(16,16,19,.85); font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-2); transition: color .3s, border-color .3s, background .3s; }
.dpill i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); transition: background .3s, box-shadow .3s; }
.dpill.on { color: var(--text); border-color: rgba(34,197,94,.45); }
.dpill.on i { background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: pulse 2.2s ease-in-out infinite; }
.dpill.warn { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.dpill.warn i { background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: pulse 1s ease-in-out infinite; }
.dpill.danger { color: #f87171; border-color: rgba(239,68,68,.55); background: rgba(239,68,68,.08); }
.dpill.danger i { background: #ef4444; box-shadow: 0 0 10px #ef4444; animation: pulse .8s ease-in-out infinite; }
.dmetrics { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dmetrics .btn { height: 36px; }

/* ─── Footer credit ──────────────────────────────────────── */
.dcredit { text-align: center; font-size: 11.5px; color: var(--text-3); padding-top: 4px; }
.dcredit a { color: var(--text-2); text-decoration: none; }
.dcredit a:hover { color: var(--text); text-decoration: underline; }

/* ─── CS2 hint (only while a suggestion is pending) ────────── */
.dhint { width: var(--col); margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--accent-line); background: var(--accent-soft); font-size: 13px; flex-wrap: wrap; }
.dhint svg { width: 16px; height: 16px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dhint span { flex: 1; min-width: 200px; }

/* ─── Main block: hero + platforms, centered in the free space ── */
.dmain { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 2.4vh, 28px); }
.dhero { width: var(--col); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }

/* the number: rolling digits, click to type */
.dlabel { font-family: var(--font); font-size: 12.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--text-3); }
.dnum { position: relative; display: flex; align-items: baseline; justify-content: center; gap: .1em; padding: .04em .18em; margin-top: -.04em; border-radius: 16px; font-family: var(--display); font-weight: 700; font-size: clamp(88px, 13vh, 140px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--text-2); cursor: text; transition: color .5s, background .2s; outline: none; }
.dnum:hover:not(.locked):not(.edit) { background: rgba(255,255,255,.03); }
.dnum:focus-visible { box-shadow: 0 0 0 2px var(--accent-line); }
.dnum.locked { cursor: default; }
.dnum::before { content: ''; position: absolute; left: 50%; top: 50%; width: 3.4em; height: 1.7em; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(251,191,36,.26), rgba(251,191,36,.08) 55%, transparent 78%); opacity: 0; transition: opacity .7s; z-index: -1; pointer-events: none; }
.dhero[data-phase="delayed"] .dnum::before, .dhero[data-phase="armed"] .dnum::before { opacity: 1; }
.dhero[data-phase="arming"] .dnum::before { opacity: .7; }
.reels { display: inline-flex; }
/* a reel that appears widens first and then fades in; one that leaves fades first and then collapses */
.reel { display: inline-block; width: .64em; height: 1em; overflow: hidden; transition: width .45s var(--ease), opacity .25s .15s; }
.reel.off { width: 0; opacity: 0; transition: opacity .15s, width .45s var(--ease) .15s; }
.reel .col { display: grid; transition: transform .85s var(--spring-soft); will-change: transform; }
.tape.dragging ~ * .reel .col, .dhero:has(.tape.dragging) .reel .col { transition-duration: .22s; transition-timing-function: var(--ease); }
.reel .col i { display: block; height: 1em; line-height: 1; text-align: center; font-style: normal; }
.dnum small { font-size: .26em; font-weight: 600; letter-spacing: .02em; color: var(--text-3); transition: color .5s; }
.dnum.edit .reels { display: none; }
.dnum-in { font: inherit; letter-spacing: inherit; line-height: 1; height: 1em; padding: 0; margin: 0; background: none; border: 0; border-bottom: .04em solid var(--accent); color: var(--accent); text-align: center; outline: none; -moz-appearance: textfield; }
.dnum-in::-webkit-outer-spin-button, .dnum-in::-webkit-inner-spin-button { -webkit-appearance: none; }
.dhero[data-phase="live"] .dnum { color: var(--text); }
.dhero[data-phase="delayed"] .dnum, .dhero[data-phase="armed"] .dnum { color: var(--accent); }
.dhero[data-phase="delayed"] .dnum small, .dhero[data-phase="armed"] .dnum small { color: var(--accent); }
.dhero[data-phase="arming"] .dnum { color: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
.dhero[data-phase="draining"] .dnum { color: var(--warn); }
.dhero[data-phase="cut"] .dnum { color: #f87171; }

/* ─── The timeline: drag your viewers back in time ─────────── */
/* vertical zones: label (--lab) · diamond · band · diamond · label */
.tape { position: relative; width: 100%; height: 152px; margin-block: 2px 0; --lab: 28px; --edge: calc(var(--lab) + 8px); color: var(--accent); cursor: ew-resize; outline: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.tape.off { cursor: default; }
.tape.dragging { cursor: grabbing; }
.tape.init * { transition: none !important; }
.tape-band { position: absolute; left: 0; right: 0; top: var(--edge); bottom: var(--edge); border-radius: 6px; border: 1px solid rgba(255,255,255,.09); background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.05)); overflow: hidden; transition: box-shadow .2s; }
.tape:focus-visible:not(.mouse) .tape-band { box-shadow: 0 0 0 2px var(--accent-line); }
.ticks { position: absolute; inset: 0; }
.rt { position: absolute; bottom: 0; width: 1px; margin-left: -.5px; height: 7px; background: rgba(255,255,255,.2); }
.rt.m5 { height: 12px; background: rgba(255,255,255,.36); }
.rt.m10 { height: 20px; width: 2px; margin-left: -1px; background: rgba(255,255,255,.82); }
.rt.fut { opacity: .3; }
.rl { position: absolute; top: 7px; transform: translateX(-50%); font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,.4); font-variant-numeric: tabular-nums; }
.tape-future { position: absolute; top: 0; bottom: 0; right: 0; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px); }
.tape-glow { position: absolute; left: -160px; top: 50%; width: 320px; height: 180px; margin-top: -90px; border-radius: 50%; background: radial-gradient(closest-side, rgba(251,191,36,.2), rgba(251,191,36,.06) 55%, transparent 75%); opacity: 0; transition: transform var(--tape-dur) var(--tape-ease), opacity .8s; pointer-events: none; will-change: transform; }
.dhero[data-phase="delayed"] .tape-glow, .dhero[data-phase="arming"] .tape-glow { opacity: 1; }
.dhero[data-phase="armed"] .tape-glow { opacity: .5; }
/* Both bars run from the viewers mark to the live mark. The clip ends at the
   live mark and never moves, so the bar inside only ever slides: a transform
   stays on the compositor and in step with the marks, while animating left and
   width relayouts the page on every single frame. --bufw keeps the fill's
   gradient spanning exactly the visible part. */
.tape-clip { position: absolute; top: var(--edge); bottom: var(--edge); left: 0; width: var(--youx, 100%); overflow: hidden; z-index: 1; pointer-events: none; }
.tape-buffer, .tape-target { position: absolute; inset: 0; transition: transform var(--tape-dur) var(--tape-ease), opacity .4s; will-change: transform; }
.tape-buffer { border-radius: 4px 0 0 4px; background: linear-gradient(90deg, rgba(251,191,36,.05), rgba(251,191,36,.24)) left center / var(--bufw, 100%) 100% no-repeat; box-shadow: inset 0 0 0 1px rgba(251,191,36,.16); }
.tape-buffer.zero { opacity: 0; }
.tape-buffer.flash::before { content: ''; position: absolute; inset: 0; background: rgba(251,191,36,.45); border-radius: inherit; opacity: 0; animation: segFlash 1.1s var(--ease) both; pointer-events: none; }
@keyframes segFlash { from { opacity: 1; } to { opacity: 0; } }
.tape-buffer.flowing::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: -14px; background: repeating-linear-gradient(90deg, rgba(251,191,36,.12) 0 3px, transparent 3px 14px); animation: flow 1s linear infinite; }
@keyframes flow { to { transform: translateX(-14px); } }
.dhero[data-phase="armed"] .tape-buffer, .tape.dragging .tape-buffer { background: rgba(251,191,36,.06); box-shadow: none; border: 1px dashed rgba(251,191,36,.55); border-right: 0; }
.tape-target { border: 1px dashed rgba(251,191,36,.5); border-right: 0; background: rgba(251,191,36,.04); }
.dhero[data-phase="arming"] .tape-buffer, .dhero[data-phase="arming"] .tape-target, .dhero[data-phase="arming"] .mark.viewers, .dhero[data-phase="arming"] .tape-glow { transition-duration: 1s; transition-timing-function: linear; }
.tape.dragging .tape-buffer, .tape.dragging .tape-target, .tape.dragging .mark.viewers, .tape.dragging .tape-glow { transition: none; }
.tape-ghost { position: absolute; left: 0; top: calc(var(--edge) - 3px); bottom: calc(var(--edge) - 3px); width: 2px; margin-left: -1px; border-radius: 1px; background: rgba(251,191,36,.55); opacity: 0; transition: opacity .15s; pointer-events: none; z-index: 2; }
.tape.hover .tape-ghost { opacity: 1; }
.tape-bubble { position: absolute; top: 0; left: 0; transform: translate(-50%, 4px); height: 22px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 6px; background: rgba(16,16,19,.96); border: 1px solid var(--accent-line); font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--accent); white-space: nowrap; opacity: 0; transition: opacity .15s, transform .2s var(--ease); pointer-events: none; z-index: 4; }
.tape-bubble.show { opacity: 1; transform: translate(-50%, 0); }
.mark { position: absolute; top: 0; bottom: 0; left: 0; width: 0; z-index: 3; pointer-events: none; transition: transform var(--tape-dur) var(--tape-ease); will-change: transform; }
.mark::before { content: ''; position: absolute; left: -1px; top: calc(var(--lab) + 5px); bottom: calc(var(--lab) + 5px); width: 2px; background: currentColor; box-shadow: 0 0 12px currentColor; border-radius: 1px; transition: opacity .3s; }
.mark::after { content: ''; position: absolute; left: -4.5px; width: 9px; height: 9px; background: currentColor; transform: rotate(45deg); box-shadow: 0 0 10px currentColor; }
.mark.you { color: var(--ok); }
.mark.you::after { top: calc(var(--lab) + 1px); }
.mark.viewers { color: var(--accent); }
.mark.viewers::after { bottom: calc(var(--lab) + 1px); }
.mark.pop::after { animation: diamondPop .7s var(--spring-soft); }
@keyframes diamondPop { 0% { transform: rotate(45deg) scale(.5); } 55% { transform: rotate(45deg) scale(1.7); } 100% { transform: rotate(45deg) scale(1); } }
.tape.same .mark.viewers::before { opacity: 0; }
.mark b, .mark span { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap; line-height: 1; }
.mark b { font-family: var(--display); font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: currentColor; }
.mark span { font-family: var(--font); font-size: 11px; font-weight: 600; color: var(--text-2); }
.mark.you b { top: 0; }
.mark.you span { top: 12px; }
.mark.viewers span { bottom: 0; }
.mark.viewers b { bottom: 12px; }
.mark.edge b, .mark.edge span { left: 8px; transform: none; }
.dhero[data-phase="cut"] .tape { color: #ef4444; }
.dhero[data-phase="cut"] .mark.viewers { color: #ef4444; }
.dhero[data-phase="cut"] .tape-buffer { background: linear-gradient(90deg, rgba(239,68,68,.05), rgba(239,68,68,.22)); box-shadow: inset 0 0 0 1px rgba(239,68,68,.3); }
.dhero[data-phase="draining"] .mark.viewers { color: var(--warn); }

/* named delay shortcuts, right under the ruler */
.dpresets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dpreset { display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px; border-radius: 9px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.028); transition: border-color .2s, background .2s, transform .15s var(--ease); }
.dpreset:hover:not(:disabled) { border-color: rgba(255,255,255,.18); transform: translateY(-1px); }
.dpreset:disabled { opacity: .4; }
.dpreset-s { font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--accent); background: var(--accent-soft); padding: 4px 8px; border-radius: 6px; line-height: 1; }
.dpreset-n { font-family: var(--display); font-size: 10.5px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--text-2); }
.dpreset.active { border-color: var(--accent-line); background: var(--accent-soft); }
.dpreset.active .dpreset-s { background: var(--accent); color: #14110a; }
.dpreset.active .dpreset-n { color: var(--text); }

/* status line, "skip to live" sits at the live end of the timeline */
.dinfo { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; height: 30px; }
.dstatus { font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.dhero[data-phase="cut"] .dstatus { color: #f87171; }
.dinfo-acts { position: absolute; right: 0; top: 0; display: flex; align-items: center; gap: 8px; }
.dinfo-acts .btn { transition: opacity .3s, visibility .3s, transform .3s var(--ease); }
.dinfo-acts .btn.hide { opacity: 0; visibility: hidden; transform: translateX(6px); pointer-events: none; }

/* ─── Mode bar: instant by hand, automatic by CS2 ──────────── */
.dmodebar { width: 100%; display: flex; align-items: center; gap: 14px; padding: 11px 16px 11px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.028); text-align: left; transition: border-color .3s, background .3s; }
.dmodebar.on { border-color: var(--accent-line); background: rgba(251,191,36,.06); }
.mb-ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.05); color: var(--text-2); flex: none; transition: color .3s, background .3s; }
.mb-ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dmodebar.on .mb-ico { color: var(--accent); background: var(--accent-soft); }
.mb-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mb-text b { font-size: 13.5px; font-weight: 700; }
.mb-text span { font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.mb-text a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-line); }
.mb-sw { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.mb-game { height: 30px; max-width: 170px; font-size: 12.5px; }
.mb-sw small { font-family: var(--display); font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-3); }
.dgrace { width: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 6px; font-size: 12.5px; }
.dgrace[hidden] { display: none; }
.dg-label { font-weight: 600; color: var(--text); }
.dg-hint { flex: 1; min-width: 220px; color: var(--text-3); line-height: 1.4; }
.dg-hint.warn { color: var(--accent); }

/* ─── Platforms ─────────────────────────────────────────────── */
.dplat { width: var(--col); display: grid; gap: 10px; }
.dplat > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 2px; }
.dplat > header b { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.dplat > header span { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.dplat .cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pcard { flex: 1 1 240px; max-width: 380px; background: rgba(255,255,255,.028); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; overflow: hidden; transition: border-color .2s; }
.pcard:hover { border-color: rgba(255,255,255,.14); }
.pcard .top { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.pcard .pbadge { width: 32px; height: 32px; border-radius: 8px; font-size: 11px; }
.pcard .name { font-size: 14px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pstat { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--line-2); font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-3); white-space: nowrap; transition: color .3s, border-color .3s, background .3s; }
.pstat i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pstat.on { color: var(--ok); border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.08); }
.pstat.on i { box-shadow: 0 0 8px var(--ok); animation: pulse 2.2s ease-in-out infinite; }
.pstat.connecting { color: var(--accent); border-color: var(--accent-line); }
.pstat.connecting i { animation: pulse .8s ease-in-out infinite; }
.pstat.retrying { color: #f87171; border-color: rgba(239,68,68,.5); }
.pstat.retrying i { animation: pulse .8s ease-in-out infinite; }
.pstat.draining { color: var(--warn); border-color: rgba(251,146,60,.5); }
.pcard .foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-top: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); font-size: 12px; color: var(--text-3); }
.pcard .foot b { font-family: var(--mono); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.dplat .none { padding: 14px 16px; border: 1px dashed rgba(255,255,255,.12); border-radius: 12px; font-size: 12.5px; color: var(--text-2); text-align: center; }

/* ─── Narrow layouts & OBS dock ────────────────────────────── */
@media (max-height: 900px) {
  .dmain { gap: 14px; }
  .dhero { gap: 10px; }
  .dnum { font-size: clamp(76px, 11.5vh, 120px); }
}
@media (max-height: 720px) {
  .dnum { font-size: clamp(64px, 10vh, 96px); }
  .tape { height: 132px; --lab: 26px; }
}
@media (max-width: 999px) {
  .dnum { font-size: clamp(64px, 11vh, 110px); }
}
@media (max-width: 560px) {
  .dash2 { gap: 10px; padding-block: 10px 16px; }
  .dstrip { flex-direction: column; align-items: stretch; }
  .dpill { justify-content: center; }
  .dmetrics { flex-direction: column; align-items: stretch; gap: 6px; }
  .dhero { gap: 10px; }
  .dnum { font-size: 64px; }
  .tape { height: 124px; --lab: 26px; }
  .rl { font-size: 9.5px; }
  .mark b { font-size: 9.5px; letter-spacing: 1.2px; }
  .mark span { font-size: 10.5px; }
  .dinfo { height: auto; min-height: 30px; flex-direction: column; gap: 6px; }
  .dinfo-acts { position: static; }
  .dmodebar { padding: 10px 12px; gap: 10px; }
  .mb-sw small { display: none; }
  .pcard { max-width: none; }
}
body.dock .dash2 { min-height: calc(100vh - 46px); }