/*
 * Keep the current-cover portrait present without letting it dominate the
 * visibility message. The copy wraps around the actual circle, while actions
 * remain on a clean row beneath it.
 */
.release-visibility-copy-wrap {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.release-visibility-panel {
  justify-content: flex-start;
}

.release-visibility-copy-wrap::after {
  display: block;
  clear: both;
  content: "";
}

.release-visibility-copy-wrap .release-visibility-heading {
  display: block;
  padding: 0;
}

.release-visibility-copy-wrap .release-visibility-cover {
  position: relative;
  z-index: 1;
  top: clamp(-20px, -3cqi, -12px);
  right: clamp(-30px, -4.5cqi, -20px);
  width: clamp(210px, 38cqi, 340px);
  float: right;
  margin:
    clamp(-7.5rem, -14cqi, -5.75rem)
    clamp(-5.75rem, -9cqi, -4.25rem)
    0.8rem
    clamp(1.1rem, 2.8cqi, 2rem);
  border: 3px solid rgba(11, 10, 15, 0.22);
  background: rgba(255, 255, 255, 0.24);
  box-shadow: 0 16px 34px rgba(11, 10, 15, 0.12);
  shape-outside: circle(50%);
  shape-margin: clamp(10px, 1.5cqi, 16px);
}

.release-visibility-copy-wrap .release-visibility-cover img {
  opacity: 1;
  filter: none;
}

.release-visibility-copy-wrap .release-visibility-cover > span {
  opacity: 0.84;
}

.release-visibility-copy-wrap > p {
  position: relative;
  z-index: 1;
  max-width: none;
  margin: 0;
  line-height: 1.5;
}

.release-visibility-panel > .preview-actions {
  clear: both;
  margin-top: clamp(1.35rem, 3cqi, 2rem);
}

.release-visibility-panel.is-taken-down .release-visibility-copy-wrap {
  z-index: 2;
}

.release-visibility-panel.is-taken-down .release-visibility-cover {
  border-color: rgba(228, 61, 73, 0.58);
  background: rgba(25, 12, 16, 0.72);
  box-shadow:
    0 0 0 4px rgba(228, 61, 73, 0.08),
    0 14px 30px rgba(5, 2, 3, 0.24);
}

.release-visibility-panel.is-taken-down .release-visibility-cover img {
  opacity: 0.8;
  filter: grayscale(1) contrast(1.03) brightness(0.66);
}

.release-visibility-panel.is-taken-down .release-visibility-copy-wrap > p {
  color: #ffdade;
  font-weight: 650;
}

@media (max-width: 680px) {
  .release-visibility-copy-wrap .release-visibility-heading {
    padding: 0;
  }

  .release-visibility-copy-wrap .release-visibility-cover {
    top: -8px;
    right: -12px;
    width: clamp(116px, 37cqi, 152px);
    margin:
      clamp(-3.15rem, -12cqi, -2.35rem)
      clamp(-1.9rem, -8cqi, -1.25rem)
      0.5rem
      0.9rem;
    border-width: 2px;
    shape-margin: 8px;
  }

  .release-visibility-copy-wrap .release-visibility-heading strong,
  .release-visibility-panel.is-taken-down .release-visibility-heading strong {
    font-size: clamp(2.45rem, 11vw, 3.1rem);
  }

  .release-visibility-panel > .preview-actions {
    margin-top: 1.25rem;
  }
}