/* ============================================
   APPEARANCE SETTINGS
   ============================================ */

.appearance-control {
  position: fixed;
  left: 68px;
  bottom: 18px;
  z-index: 12000;
  display: flex;
  align-items: center;
  padding: 4px;
  color: var(--text-secondary);
  background: rgba(20, 10, 40, 0.82);
  border: var(--glass-border);
  border-radius: 999px;
  box-shadow: var(--glass-shadow);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.appearance-control__buttons {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
}

.appearance-control__button {
  padding: 5px 10px;
  border: 0;
  border-radius: 999px;
  color: var(--text-muted);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.appearance-control__button:hover,
.appearance-control__button:focus-visible {
  color: var(--text-primary);
}

.appearance-control__button.active {
  color: #1a0a2e;
  background: var(--accent-primary);
}

.appearance-control.is-locked {
  opacity: 0.65;
}

.appearance-control__button:disabled {
  cursor: wait !important;
  opacity: 0.55;
}

body.gallery-active .appearance-control {
  display: none;
}

body:has(.public-guide-launcher[hidden]) .appearance-control {
  left: 24px;
}

#gallery .frame__info-btn {
  display: none !important;
}

/* Minimal mode keeps interaction intact while removing decorative motion and media. */
html[data-appearance="minimal"] {
  scroll-behavior: auto;
  scroll-snap-type: none;
}

html[data-appearance="minimal"] *,
html[data-appearance="minimal"] *::before,
html[data-appearance="minimal"] *::after {
  animation: none !important;
}

html[data-appearance="minimal"] * {
  cursor: default !important;
}

html[data-appearance="minimal"] body {
  cursor: default;
  background: var(--bg-base);
}

html[data-appearance="minimal"] a,
html[data-appearance="minimal"] button,
html[data-appearance="minimal"] [role="button"],
html[data-appearance="minimal"] label,
html[data-appearance="minimal"] select,
html[data-appearance="minimal"] input[type="range"],
html[data-appearance="minimal"] input[type="checkbox"],
html[data-appearance="minimal"] input[type="radio"],
html[data-appearance="minimal"] .frame,
html[data-appearance="minimal"] .tier,
html[data-appearance="minimal"] .addon,
html[data-appearance="minimal"] .calc-step__pill,
html[data-appearance="minimal"] .news-card,
html[data-appearance="minimal"] .nm-list-item,
html[data-appearance="minimal"] .nm-detail-link {
  cursor: pointer !important;
}

html[data-appearance="minimal"] input:not([type]),
html[data-appearance="minimal"] input[type="text"],
html[data-appearance="minimal"] input[type="email"],
html[data-appearance="minimal"] input[type="search"],
html[data-appearance="minimal"] input[type="number"],
html[data-appearance="minimal"] textarea {
  cursor: text !important;
}

html[data-appearance="minimal"] .section {
  scroll-snap-align: none;
}

html[data-appearance="minimal"] .progress__label,
html[data-appearance="minimal"] .progress__item.active .progress__label {
  color: #000 !important;
}

html[data-appearance="minimal"] .cursor-dot,
html[data-appearance="minimal"] .cursor-halo,
html[data-appearance="minimal"] .gallery__bg-wash,
html[data-appearance="minimal"] .frame__image-ring {
  display: none !important;
}

html[data-appearance="minimal"] .bg-stack {
  display: block !important;
  background: var(--bg-base) url("/static/UIBG/BG1.png") center / cover no-repeat;
}

html[data-appearance="minimal"] .bg-playlist,
html[data-appearance="minimal"] .bg-fade {
  display: none !important;
}

html[data-appearance="minimal"] .frame__slide,
html[data-appearance="minimal"] .frame.zooming .frame__slide,
html[data-appearance="minimal"] .frame__slide.entering {
  opacity: 1 !important;
  transition: none !important;
  transform: none !important;
  background-position: center !important;
  background-size: contain !important;
}

html[data-appearance="minimal"] .frame__slide.leaving {
  opacity: 0 !important;
}

/* Keep privacy controls readable and above fixed media controls in minimal mode. */
html[data-appearance="minimal"] .analytics-consent:not([hidden]),
html[data-appearance="minimal"] .analytics-consent[data-consent-pending="true"] {
  z-index: 12002;
  display: flex !important;
  visibility: visible;
  opacity: 1;
}

html[data-appearance="minimal"] .analytics-privacy-manage:not([hidden]) {
  z-index: 12001;
  display: grid;
  visibility: visible;
  color: #f5f3ff;
  opacity: 1;
}

html[data-appearance="minimal"] .analytics-privacy-manage svg {
  display: block;
  visibility: visible;
  opacity: 1;
}

/* Gallery changes state immediately in minimal mode, including both side panels. */
html[data-appearance="minimal"] #gallery *,
html[data-appearance="minimal"] #gallery *::before,
html[data-appearance="minimal"] #gallery *::after {
  transition: none !important;
}

@media (max-width: 680px) {
  .appearance-control {
    left: 66px;
    right: auto;
    bottom: 24px;
  }

  .appearance-control__button {
    padding-inline: 8px;
  }

  .appearance-control__button:not(.active) {
    display: none;
  }

  body:has(.public-guide-launcher[hidden]) .appearance-control {
    left: 18px;
    bottom: 24px;
  }
}