/* SPDX-License-Identifier: AGPL-3.0-or-later
   Commercial license available
   © Concepts 1996–2026 Miroslav Šotek. All rights reserved.
   © Code 2020–2026 Miroslav Šotek. All rights reserved.
   ORCID: 0009-0009-3560-0851
   Contact: www.anulum.li | protoscience@anulum.li
   Fluctara — Preview player.

   Its own stylesheet because the player is not the landing page's. Every offer
   page carries a preview control, and while these rules lived in landing.css
   those pages loaded main.css alone: the button was there, the panel it opens
   was not styled, and pulling the landing page's whole visual identity onto an
   offer page to fix that would have restyled the page around it. */
.prebuilt-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 26px 0 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.preview-trigger {
  flex: none;
}

.preview-dialog {
  width: min(720px, 92vw);
  max-height: 92vh;
  /* `showModal` centres a dialog through the UA margin; state it so a later
     margin rule elsewhere cannot quietly pull the panel into a corner. */
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text-primary);
}

.preview-stage {
  position: relative;
  /* The darkest token rather than the navy surface: these figures are thin
     bright lines and they need the contrast. */
  background: var(--bg-primary);
}

.preview-stage:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
}

.preview-stage:fullscreen #preview-canvas {
  width: 100vw;
  height: 100vh;
}

/* `hidden` is an attribute, not a class, and a `display` declaration in a rule
   beats the user-agent `display: none` it implies. Anything the player hides
   must say so explicitly or it stays on screen. */
.preview-dialog [hidden] {
  display: none;
}

.preview-dialog::backdrop {
  background: rgba(5, 8, 16, 0.78);
}

.preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.preview-head h2 {
  margin: 0 0 6px;
  font-size: 1.06rem;
}

.preview-head p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.6;
}

.preview-close {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.2rem;
  cursor: pointer;
}

.preview-close:hover,
.preview-close:focus-visible {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

#preview-canvas {
  display: block;
  width: 100%;
  height: clamp(220px, 38vh, 320px);
  background: var(--bg-primary);
}

/* Inside the frame, out of the way: dim until it is wanted, and never hidden
   from the keyboard — a control that only exists on hover is a control some
   people do not have. */
.preview-full {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: rgba(10, 14, 26, 0.55);
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity var(--transition), border-color var(--transition);
}

.preview-stage:hover .preview-full,
.preview-full:hover,
.preview-full:focus-visible {
  opacity: 1;
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.preview-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 24px 0;
}

.preview-modes button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}

.preview-modes button[aria-pressed='true'] {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.preview-arm {
  margin: 14px 24px 0;
  padding: 16px 18px;
  border: 1px solid var(--accent-cyan);
  border-radius: var(--radius);
  background: var(--surface-hint);
}

.preview-arm p {
  margin: 0 0 14px;
  color: var(--text-primary);
  font-size: 0.86rem;
  line-height: 1.6;
}

.preview-consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
  line-height: 1.45;
  cursor: pointer;
}

.preview-consent input {
  margin-top: 0.2rem;
  flex: none;
}

.preview-profiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.preview-profiles button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.preview-profiles button:hover:not(:disabled),
.preview-profiles button:focus-visible:not(:disabled) {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.preview-profiles button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.preview-stop {
  display: block;
  min-height: 44px;
  margin: 14px 24px 0;
  padding: 0 20px;
  border: 1px solid var(--accent-cyan);
  border-radius: var(--radius);
  background: var(--accent-cyan);
  color: var(--on-accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.preview-schemes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 24px 0;
}

.preview-schemes button {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.preview-schemes button[aria-pressed='true'] {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.preview-kind {
  margin: 12px 0 0;
  padding: 0 24px;
  color: var(--text-secondary);
  font: 0.7rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
}

#preview-audio {
  width: calc(100% - 48px);
  margin: 16px 24px 0;
}

.preview-note {
  margin: 14px 0 0;
  padding: 0 24px 22px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  line-height: 1.65;
}

@media (max-width: 560px) {
  .preview-modes {
    flex-wrap: wrap;
  }
}