/* Historical mask evidence, styled from Rendero's selection UI.
   The source mask grids and their one-pixel boundaries remain unchanged. */
.bv-photo-case {
  --bv-selection-purple: #7f56d9;
  --bv-selection-alpha: 0.39215686274509803; /* App RGBA alpha: 100 / 255. */
}

.bv-photo-case .bv-photo-dot.is-raw,
.bv-photo-case .bv-photo-dot.is-test {
  background: var(--bv-selection-purple);
  border-color: var(--bv-selection-purple);
}

.bv-photo-case .bv-photo-frame > svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bv-photo-case .bv-photo-mask {
  color: var(--bv-selection-purple);
  opacity: var(--bv-selection-alpha);
}

.bv-photo-case .bv-photo-outline {
  opacity: 1;
  /* No blur, expanded stroke or new contour: the verified outline grid is used. */
}

.bv-photo-case .bv-photo-reference {
  color: #fff;
}

.bv-photo-case .bv-photo-delta {
  color: #ec4899;
  opacity: 1;
  /* Exact XOR pixels. Do not expand them to make the change look larger. */
}

.bv-photo-case[data-selection="off"] .bv-photo-mask,
.bv-photo-case[data-selection="off"] .bv-photo-outline,
.bv-photo-case[data-reference="off"] .bv-photo-reference,
.bv-photo-case[data-changed="off"] .bv-photo-delta,
.bv-photo-case[data-changed="off"] .bv-photo-delta-note,
.bv-photo-case[data-changed="on"] .bv-photo-mask,
.bv-photo-case[data-changed="on"] .bv-photo-outline,
.bv-photo-case[data-changed="on"] .bv-photo-reference {
  display: none;
}

.bv-photo-case .bv-photo-delta-note {
  margin: .8rem 0 1.6rem;
  padding: 1.2rem 1.5rem;
  border-left: 3px solid #ec4899;
  background: #fdf2f8;
  color: #58223c;
  font-size: 1.4rem;
  line-height: 1.5;
}

.bv-photo-case .bv-photo-controls button[aria-pressed="true"] {
  background: #f0eafa;
  border-color: var(--bv-selection-purple);
  color: #553391;
}

.bv-photo-case .bv-photo-controls button[data-photo-toggle="changed"][aria-pressed="true"] {
  background: #fdf2f8;
  border-color: #ec4899;
  color: #9d174d;
}

.bv-photo-case .bv-photo-controls button:focus-visible {
  outline-color: var(--bv-selection-purple);
}

.bv-photo-case .bv-photo-controls[hidden] {
  display: none;
}