/* Layering: stage 0, overlays 5, overview 6, pen 8, controls 10, help 20, toast 25, message 30 */
#stage { z-index: 0; }
#compare, #lab { z-index: 5; }
#overview { z-index: 6; }
#pen { z-index: 8; }
#hud { z-index: 10; }
#help { z-index: 20; }
#toast { z-index: 25; }
#message { z-index: 30; }

/* Toast */
#toast {
  position: fixed; top: 22px; left: 50%; transform: translate(-50%, -8px); padding: 9px 16px; max-width: calc(100vw - 32px);
  background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; backdrop-filter: blur(10px);
  font: 500 11px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text);
  opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast[hidden] { display: none; }

/* Pen */
#pen { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
body.pen-on #pen { pointer-events: auto; cursor: crosshair; }
body.pen-on.idle #pen { cursor: crosshair !important; }
#bPen svg { fill: none; stroke: var(--text); stroke-width: 1.6; }
body.pen-on #bPen svg { stroke: #ff5a4f; }

/* Overview */
#overview {
  position: fixed; inset: 0; padding: 28px 32px; overflow-y: auto; background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.25s ease;
}
#overview.show { opacity: 1; }
#overview[hidden] { display: none; }
.ov-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 auto 22px; max-width: 1500px; }
.ov-title { font: 300 30px var(--sans); }
.ov-head .tech { color: var(--dim); }
.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; max-width: 1500px; margin: 0 auto; }
.ov-card { display: block; padding: 0; border-radius: 4px; outline: 1px solid var(--rule); background: #0b0b0b; transition: outline-color 0.15s, transform 0.15s; }
.ov-card.sel { outline: 2px solid var(--text); transform: translateY(-2px); }
.ov-card.cur .ov-meta b { color: var(--accent); }
.ov-pic { position: relative; aspect-ratio: 16 / 9; background: #111; overflow: hidden; border-radius: 4px 4px 0 0; }
.ov-pic img, .ov-pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ov-meta { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px 2px; }
.ov-meta b { font: 400 12px var(--mono); color: var(--faint); }
.ov-name { flex: 1; font: 500 11px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-dur { font: 12px var(--mono); color: var(--dim); }
.ov-badges { min-height: 26px; padding: 2px 12px 10px; font: 500 9px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); text-align: left; }

/* Analysis view */
#lab { position: fixed; inset: 0; background: var(--black); opacity: 0; transition: opacity 0.3s ease; }
#lab.show { opacity: var(--blackout, 1); }
#lab[hidden] { display: none; }
body.labbing #hud { display: none; }
.lab-view { position: absolute; inset: 0; }
.lab-view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.lab-layer { mix-blend-mode: screen; opacity: 0; transition: opacity 0.35s ease; }
.lab-layer.on { opacity: 1; }
.lab-bar {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 28px 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: var(--panel); backdrop-filter: blur(10px); border-top: 1px solid var(--rule); transition: opacity 0.35s ease, transform 0.35s ease;
}
body.idle .lab-bar { opacity: 0; transform: translateY(8px); pointer-events: none; }
.lab-left { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.lab-title { font: 500 11px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.lab-frame { font-size: 11px; color: var(--dim); }
.lab-toggles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.lab-tog { padding: 7px 12px; border: 1px solid var(--rule); border-radius: 4px; font: 500 10px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.lab-tog span { margin-right: 8px; color: var(--faint); letter-spacing: 0; }
.lab-tog.on { color: var(--text); border-color: rgba(95, 217, 163, 0.6); background: rgba(95, 217, 163, 0.08); }
.lab-tog.on span { color: var(--accent); }
.lab-right { display: flex; align-items: center; gap: 4px; }
.lab-close { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 4px; }
.lab-close:hover { background: rgba(255, 255, 255, 0.08); }
.lab-close svg { width: 18px; height: 18px; fill: var(--text); }

/* Compare modes */
.cmpModes { display: flex; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.cmpModes button { padding: 7px 11px; font: 500 10px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.cmpModes button.on { background: rgba(255, 255, 255, 0.1); color: var(--text); }
#cmpVideo.on { color: var(--accent); border-color: rgba(95, 217, 163, 0.6); }
#cmpView.flip #cmpLine, #cmpView.side #cmpLine { display: none; }
#cmpView.flip, #cmpView.side { cursor: default; }
#cmpView.flip { cursor: pointer; }
#cmpView.flip #cmpBLayer { clip-path: none !important; opacity: 0; transition: opacity 0.25s ease; }
#cmpView.flip.showB #cmpBLayer { opacity: 1; }
#cmpView.flip #tagB { opacity: 0; }
#cmpView.flip.showB #tagB { opacity: 1; }
#cmpView.flip.showB #tagA { opacity: 0; }
#cmpView.side .layer:first-child { right: 50%; }
#cmpView.side #cmpBLayer { left: 50%; clip-path: none !important; }
#cmpView.side .tag { opacity: 1 !important; }
#cmpView video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: 0 0; }
#cmpView.vid img { visibility: hidden; }

/* Client mode: a Next button in the bar, and the bar stays up in the band */
#clientNext { color: var(--text); }
#clientNext span { margin-left: 6px; color: var(--accent); }
#clientNext[hidden] { display: none; }
body.client.band #hud { opacity: 1; transform: none; pointer-events: auto; }
body.client #bPen, body.client #bPresenter { display: none; }

@media (max-width: 720px) {
  .ov-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ov-head .tech { display: none; }
  .lab-bar { flex-wrap: wrap; padding: 10px 16px; }
  .lab-tog { padding: 6px 8px; }
  #clientNext { right: 16px; }
}

/* Presenter view connected: the projector shows only the picture (C brings the controls back here) */
body.presented:not(.pinned) #hud,
body.presented:not(.pinned) #cmpBar,
body.presented:not(.pinned) .lab-bar,
body.presented:not(.pinned) #clientNext { display: none; }
body.presented:not(.pinned):not(.pen-on),
body.presented:not(.pinned):not(.pen-on) * { cursor: none !important; }
#buildBadge { color: #e0b25f; border-color: rgba(224, 178, 95, 0.5); }
#buildBadge[hidden] { display: none; }

/* Laser hides the cursor; kiosk shows nothing but the picture */
body.laser-on, body.laser-on * { cursor: none !important; }
body.kiosk #hud, body.kiosk #clientNext, body.kiosk #toast { display: none !important; }
body.kiosk, body.kiosk * { cursor: none !important; }

/* Compare and Analysis follow the locked-picture rule too */
body.band #cmpView, body.band .lab-view { bottom: auto; height: var(--pic-h); }
body.band #cmpBar, body.band .lab-bar { height: var(--band-h); padding-top: 0; padding-bottom: 0; align-items: center; background: var(--black); backdrop-filter: none; border-top: 0; }
body.full:not(.pinned):not(.client) #cmpBar, body.full:not(.pinned):not(.client) .lab-bar { opacity: 0; transform: none; pointer-events: none; }
body.band #cmpPairs img { display: none; }
body.band #cmpPairs button { width: auto; }
body.band #cmpPairs span { padding: 7px 11px; border: 1px solid var(--rule); border-radius: 4px; }
body.band #cmpPairs button.on span { border-color: rgba(95, 217, 163, 0.6); color: var(--text); }
body.band-tight .cmpInfo .tech, body.band-tight .lab-left .lab-title { display: none; }
body.band-tight .lab-toggles { flex-wrap: nowrap; }
body.band-tight .lab-tog { padding: 6px 9px; }

/* Compare and Analysis bring their own bar: the main one always steps aside */
body.comparing #hud, body.labbing #hud { display: none !important; }