/* Adaptive overlay labels. See README.md for behaviour and removal steps. */

/* A fixed, z-indexed UI isolates blending from the WebGL canvas. */
#viewerUI:has(#startScreen.hidden) {
  position: absolute;
  z-index: auto;
}

/* Transforms also isolate blending; center these docks without transform. */
#viewerUI:has(#startScreen.hidden) .style-toolbar {
  left: 0;
  right: 0;
  width: max-content;
  margin-inline: auto;
  transform: none;
}

#viewerUI:has(#startScreen.hidden) .model-dock {
  left: 0;
  right: 0;
  width: max-content;
  margin-inline: auto;
  transform: none;
}

@media (max-width: 1100px) {
  #viewerUI:has(#startScreen.hidden) .style-toolbar {
    left: auto;
    right: 0;
    margin-inline: 0;
  }

  /* Match the old viewport coordinates without a fixed stacking context. */
  #viewerUI:has(#startScreen.hidden) .view-dock {
    position: absolute;
    top: 61px;
    right: 0;
  }
}

@media (min-width: 601px) and (max-width: 1100px) {
  #viewerUI:has(#startScreen.hidden) .navigation-status {
    position: absolute;
    top: 61px;
    left: 0;
  }
}

@media (max-width: 600px) {
  #viewerUI:has(#startScreen.hidden) .view-dock {
    top: 51px;
  }
}

/* White plus difference appears dark on light pixels, light on dark pixels.
   Red active/hover states and coloured controls are intentionally excluded. */
#viewerUI:has(#startScreen.hidden)
  :is(
    #openAgain:not(:hover),
    .navigation-mode button:not(.active, :hover),
    #performanceStats,
    .tool-button:not(.active, :hover),
    .photo-button:not(.active, :hover),
    .glass-light-button:not(.active, :hover),
    .black-back-button:not(.active, :hover),
    .view-menu button:not(.active, :hover),
    .axis-buttons button:not(.active, :hover, #sectionFlip),
    .menu-toggle:not(:hover),
    .adaptive-text
  ) {
  color: #fff;
  mix-blend-mode: difference;
}

/* Separators and triangles belong to those buttons and must also start white. */
#viewerUI:has(#startScreen.hidden)
  :is(.navigation-mode button, .tool-button):not(.active, :hover)::before {
  color: #fff;
}

#viewerUI:has(#startScreen.hidden)
  .tool-button + .renaissance-mode > .tool-button:not(.active, :hover)::before {
  color: #fff;
}

#viewerUI:has(#startScreen.hidden) .menu-toggle:not(:hover) .menu-arrow {
  border-bottom-color: #fff;
}

/* Safari cannot reliably blend these labels over WebGL. JavaScript samples
   the canvas underneath and sets a crisp black/white ink per label. */
.safari-contrast-fallback #viewerUI:has(#startScreen.hidden)
  :is(
    #openAgain:not(:hover),
    .navigation-mode button:not(.active, :hover),
    #performanceStats,
    .tool-button:not(.active, :hover),
    .photo-button:not(.active, :hover),
    .glass-light-button:not(.active, :hover),
    .black-back-button:not(.active, :hover),
    .view-menu button:not(.active, :hover),
    .axis-buttons button:not(.active, :hover, #sectionFlip),
    .menu-toggle:not(:hover),
    .adaptive-text
  ) {
  color: var(--safari-contrast-ink, var(--text));
  mix-blend-mode: normal;
  text-shadow: none;
}

.safari-contrast-fallback #viewerUI:has(#startScreen.hidden)
  :is(.navigation-mode button, .tool-button):not(.active, :hover)::before {
  color: var(--safari-contrast-ink, var(--text));
  text-shadow: none;
}

.safari-contrast-fallback #viewerUI:has(#startScreen.hidden)
  .tool-button + .renaissance-mode > .tool-button:not(.active, :hover)::before {
  color: var(--safari-contrast-ink, var(--text));
  text-shadow: none;
}

.safari-contrast-fallback #viewerUI:has(#startScreen.hidden)
  .menu-toggle:not(:hover) .menu-arrow {
  border-bottom-color: var(--safari-contrast-ink, var(--text));
  filter: none;
}