/* Colorbird feature-specific enhancements: dominant sample point + saved-theme export UI. */

/* Theme Editor saved-theme library */
.visualizer-theme-library {
  display: flex;
  flex-direction: column;
}

.visualizer-theme-gallery {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

.theme-library-export-footer {
  flex: 0 0 auto;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}

.theme-library-export-footer .export-all {
  width: 100%;
  margin-top: 0;
}

.theme-thumbnail-viewport,
.theme-thumbnail-image {
  pointer-events: auto;
}

.theme-thumbnail-image {
  cursor: context-menu;
}

.saved-theme-context-menu {
  position: fixed;
  z-index: 10000;
  min-width: 150px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel-2);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.48);
}

.saved-theme-context-menu[hidden] {
  display: none;
}

.saved-theme-context-menu button {
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  padding: 8px 10px;
  text-align: left;
}

.saved-theme-context-menu button:hover,
.saved-theme-context-menu button:focus-visible {
  background: rgba(184, 155, 255, 0.12);
  outline: none;
}

/* Image Palette Yoinker dominant sample point */
.dominant-sample-control {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 14px;
}

.dominant-sample-control label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.dominant-sample-label-star,
.dominant-swatch-star {
  color: #D4AF37;
  text-shadow:
    0 0 7px rgba(212, 175, 55, 0.42),
    0 1px 2px rgba(0, 0, 0, 0.8);
}

#dominantSamplePointSelect {
  min-height: 38px;
  min-width: 108px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--text);
  padding: 7px 30px 7px 10px;
}

#dominantSamplePointSelect:focus {
  border-color: #D4AF37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.13);
  outline: none;
}

.palette-card.dominant-sample-card .swatch {
  position: relative;
}

.dominant-swatch-star {
  position: absolute;
  top: 5px;
  left: 6px;
  z-index: 2;
  font-size: 1.1rem;
  line-height: 1;
  pointer-events: none;
}

.sample-dot.dominant-sample-point {
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}

.dominant-star-outline,
.dominant-star-fill {
  position: absolute;
  pointer-events: none;
  clip-path: polygon(50% 0%, 61% 34%, 98% 35%, 68% 56%, 79% 92%, 50% 71%, 21% 92%, 32% 56%, 2% 35%, 39% 34%);
}

.dominant-star-outline {
  inset: -2px;
  background: #D4AF37;
  filter:
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.88))
    drop-shadow(0 0 4px rgba(212, 175, 55, 0.34));
}

.dominant-star-fill {
  inset: 4px;
  background: var(--sample-color, #000000);
}

.dominant-star-number {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-shadow:
    0 1px 3px #000,
    0 0 2px #000;
  pointer-events: none;
}

/* Swatch Bonanza perceptual duplicate finder */
.bonanza-duplicate-toggle {
  min-height: 38px;
  white-space: nowrap;
}

#swatchBonanzaPanel.bonanza-duplicate-mode .bonanza-sort-row,
#swatchBonanzaPanel.bonanza-duplicate-mode #swatchBonanzaEmpty,
#swatchBonanzaPanel.bonanza-duplicate-mode #swatchBonanzaGrid {
  display: none !important;
}

.bonanza-duplicate-workspace {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}

.bonanza-duplicate-workspace[hidden] {
  display: none;
}

.bonanza-resolved-panel,
.bonanza-duplicate-finder {
  min-width: 0;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--panel);
}

.bonanza-resolved-panel {
  position: sticky;
  top: 16px;
  max-height: min(72vh, 760px);
  overflow: auto;
  padding: 14px;
}

.bonanza-duplicate-finder {
  padding: 16px;
}

.bonanza-duplicate-section-heading {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}

.bonanza-duplicate-section-heading h2 {
  margin: 3px 0 0;
}

.bonanza-resolved-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.bonanza-duplicate-log-empty,
.bonanza-duplicate-empty {
  margin: 0;
  color: var(--muted);
}

.bonanza-resolved-entry {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--panel-2);
}

.bonanza-resolved-kept {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  font-weight: 700;
}

.bonanza-log-chip {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.bonanza-resolved-rejected,
.bonanza-resolved-entry small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.bonanza-resolved-rejected {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.bonanza-duplicate-controls {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 18px;
  align-items: end;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}

.bonanza-duplicate-threshold {
  display: grid;
  gap: 8px;
  color: var(--text);
  font-weight: 700;
}

.bonanza-duplicate-threshold input[type="range"] {
  width: 100%;
}

.bonanza-duplicate-threshold output {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.bonanza-duplicate-threshold-scale {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.bonanza-duplicate-summary {
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: var(--muted);
  white-space: nowrap;
}

.bonanza-duplicate-summary strong {
  color: var(--text);
  font-size: 1.35rem;
}

.bonanza-duplicate-pairs {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.bonanza-duplicate-pair {
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--panel-2);
}

.bonanza-duplicate-pair-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--muted);
  font-size: 0.82rem;
}

.bonanza-duplicate-pair-heading strong {
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.bonanza-duplicate-pair-heading span {
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

.bonanza-duplicate-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bonanza-duplicate-choice {
  display: grid;
  grid-template-rows: 150px auto auto;
  min-width: 0;
}

.bonanza-duplicate-choice + .bonanza-duplicate-choice {
  border-left: 1px solid var(--border-soft);
}

.bonanza-duplicate-swatch {
  min-height: 150px;
  cursor: context-menu;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.bonanza-duplicate-choice-meta {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
}

.bonanza-duplicate-choice-meta strong,
.bonanza-duplicate-choice-meta code,
.bonanza-duplicate-choice-meta span,
.bonanza-duplicate-choice-meta small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.bonanza-duplicate-choice-meta code,
.bonanza-duplicate-choice-meta span,
.bonanza-duplicate-choice-meta small {
  color: var(--muted);
}

.bonanza-choose-canonical {
  margin: 0 12px 12px;
}

.bonanza-duplicate-context-menu {
  position: fixed;
  z-index: 10000;
  min-width: 170px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel-2);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.48);
}

.bonanza-duplicate-context-menu[hidden] {
  display: none;
}

.bonanza-duplicate-context-menu button {
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  padding: 8px 10px;
  text-align: left;
}

.bonanza-duplicate-context-menu button:hover,
.bonanza-duplicate-context-menu button:focus-visible {
  background: rgba(184, 155, 255, 0.12);
  outline: none;
}

@media (max-width: 900px) {
  .bonanza-duplicate-workspace,
  .bonanza-duplicate-controls {
    grid-template-columns: 1fr;
  }

  .bonanza-resolved-panel {
    position: static;
    max-height: 320px;
  }

  .bonanza-duplicate-summary {
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .dominant-sample-control,
  .dominant-sample-control label {
    align-items: stretch;
  }

  .dominant-sample-control label {
    width: 100%;
    flex-wrap: wrap;
  }

  #dominantSamplePointSelect {
    flex: 1 1 120px;
  }

  .bonanza-duplicate-choices {
    grid-template-columns: 1fr;
  }

  .bonanza-duplicate-choice + .bonanza-duplicate-choice {
    border-top: 1px solid var(--border-soft);
    border-left: 0;
  }
}