/*
 * Developer-preview Event UI (S3A U7b): the preview bar (build tag, save state, result notices, "fixture finished") and the
 * splash fixture picker. Self-contained removable layer like debug.css: own <link> in index.html, NOT imported into
 * styles.css, and shipped only in the worker (developer preview) build. `pv-` prefix is local to this layer. Tokens only
 * (base.css); buttons wear the shared `.hud-btn` skin.
 */
.pv-bar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 210;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  width: var(--play-column);
  padding: 4px 10px;
  background: var(--hud-ground);
  border-bottom: 1px solid var(--hud-edge);
  color: var(--parchment);
  font-family: var(--folio-font-label);
  font-size: 11px;
  letter-spacing: 0.08em;
}

body.pv-active { --pv-bar-space: 34px; padding-top: var(--pv-bar-space); }


.pv-tag {
  color: var(--gold);
  text-transform: uppercase;
}

.pv-save { display: inline-flex; align-items: center; gap: 8px; }
/* A release candidate hides the whole bar (and the save label) unless it carries a failure, notice or command. */
.pv-bar[hidden], .pv-save[hidden] { display: none; }
.pv-save[data-state="unsaved"] .pv-save-label { color: var(--crimson); }
.pv-save[data-state="saving"] .pv-save-label { color: var(--gold); }

.pv-notices { flex-basis: 100%; }
.pv-notices:empty { display: none; }
.pv-notice { margin: 0; line-height: 1.5; }

.pv-done {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--gold);
}
.pv-done[hidden], .pv-btn[hidden] { display: none; }

.pv-btn {
  min-height: 27px;
  padding: 0 10px;
  font-size: 10px;
}

.pv-picker {
  width: 100%;
  box-sizing: border-box;
}
.pv-picker[open] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pv-picker [hidden] { display: none; }
.pv-picker-summary {
  cursor: pointer;
  color: var(--parchment);
  font-family: var(--folio-font-label);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.pv-picker[open] > .pv-picker-summary { margin-bottom: 8px; }

.pv-select {
  min-height: 32px;
  max-width: 100%;
  background: var(--hud-ground);
  border: 1px solid var(--line);
  color: var(--parchment);
  font-family: var(--folio-font-label);
  font-size: 12px;
}

.pv-picker-status {
  margin: 0;
  color: var(--parchment);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.pv-commands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.pv-commands:empty { display: none; }
.pv-command-heading { color: var(--gold); text-transform: capitalize; }
.pv-commands .pv-select { min-width: 120px; }

/* The control the player just pressed while the client host answers (preview_ui.js paintWait): it is disabled with the
   rest, so it keeps full ink and a slow gold pulse to say "this one is working". Static under reduced motion. */
.pv-pending, .choice-btn.pv-pending:disabled {
  opacity: 1;
  cursor: progress;
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  animation: pv-pending 1.2s ease-in-out infinite;
}
@keyframes pv-pending {
  50% { outline-color: color-mix(in srgb, var(--gold) 35%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .pv-pending, .choice-btn.pv-pending:disabled { animation: none; }
}

/* Engine worker lost (S4 U6): a blocking notice above the loading overlay, with the reload that resumes the last save. */
.pv-crash {
  position: fixed;
  inset: 0;
  z-index: 600;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--hud-ground);
}
.pv-crash[hidden] { display: none; }
.pv-crash-panel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(100%, 360px);
  padding: 16px;
  border: 1px solid var(--crimson);
  color: var(--parchment);
  font-family: var(--folio-font-label);
  text-align: center;
}
.pv-crash-text { margin: 0; font-size: 14px; line-height: 1.5; }