/* Local preview look-dev controls. These never alter the source materials. */
.artist-shaders {
  --shader-ice: #d9f2ff;
  --shader-blue: #8acdf1;
  --shader-spring: cubic-bezier(0.19, 1.55, 0.38, 1);
  position: relative;
  z-index: 12;
  display: none;
  flex: 0 0 auto;
  gap: 0.45rem;
  align-items: center;
  min-width: 0;
  padding-inline-start: 0.8rem;
  border-inline-start: 1px solid rgba(195, 224, 242, 0.12);
}

.planning-content[data-workspace-mode="artist"] .artist-shaders {
  display: flex;
}

.artist-shader {
  position: relative;
  flex: 0 0 auto;
}

.artist-shader.is-open {
  z-index: 4;
}

.artist-shader__trigger,
.artist-shader-reset {
  --shader-marker: transparent;
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  overflow: visible;
  border: 1px solid rgba(180, 218, 243, 0.2);
  border-radius: 12px;
  outline: none;
  color: #accbde;
  background:
    radial-gradient(ellipse at 25% 0, rgba(218, 243, 255, 0.12), transparent 65%),
    linear-gradient(145deg, rgba(96, 156, 194, 0.11), rgba(18, 39, 54, 0.13)),
    rgba(15, 27, 36, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(236, 249, 255, 0.08),
    inset 0 -2px 0 var(--shader-marker),
    0 5px 13px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.18);
  backdrop-filter: blur(14px) saturate(1.18);
  cursor: pointer;
  transform-origin: 50% 80%;
  transition:
    transform 430ms var(--shader-spring),
    color 180ms ease,
    border-color 200ms ease,
    background 220ms ease,
    box-shadow 280ms ease,
    opacity 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* ::after is reserved for the site's shared hover/focus tooltip. */
.artist-shader__trigger::before,
.artist-shader-reset::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(112deg, transparent 35%, rgba(242, 251, 255, 0.7) 49%, transparent 62%);
  background-size: 270% 100%;
  background-position: 145% 0;
  opacity: 0;
  pointer-events: none;
}

.artist-shader__icon {
  position: relative;
  width: 1.22rem;
  height: 1.22rem;
  overflow: visible;
  filter: drop-shadow(0 0 0.2rem rgba(169, 222, 250, 0.1));
  transform-origin: center;
  transition: filter 230ms ease, transform 430ms var(--shader-spring);
}

.artist-shader__trigger:is(:hover, :focus-visible),
.artist-shader-reset:is(:hover, :focus-visible) {
  z-index: 2;
  color: #f3fbff;
  border-color: rgba(209, 240, 255, 0.76);
  background:
    radial-gradient(ellipse at 30% 0, rgba(233, 249, 255, 0.31), transparent 72%),
    linear-gradient(145deg, rgba(105, 196, 246, 0.32), rgba(23, 58, 80, 0.4)),
    #142c3a;
  box-shadow:
    inset 0 1px 0 rgba(245, 253, 255, 0.25),
    inset 0 -2px 0 var(--shader-marker),
    0 0 0 1px rgba(191, 233, 255, 0.14),
    0 0 1.7rem rgba(131, 210, 255, 0.34),
    0 15px 24px rgba(0, 0, 0, 0.38);
  transform: translateY(-6px) rotate(-5deg) scale(1.17);
}

.artist-shader__trigger:is(:hover, :focus-visible)::before,
.artist-shader-reset:is(:hover, :focus-visible)::before {
  animation: artist-shader-shine 680ms ease both;
}

.artist-shader__trigger:is(:hover, :focus-visible) .artist-shader__icon {
  animation: artist-shader-icon-pop 600ms var(--shader-spring) both;
  filter: drop-shadow(0 0 0.55rem rgba(196, 237, 255, 0.92));
}

.artist-shader[data-shader-control="metalness"] .artist-shader__trigger:is(:hover, :focus-visible) {
  transform: translateY(-6px) rotate(5deg) scale(1.17);
}

.artist-shader[data-shader-control="exposure"] .artist-shader__trigger:is(:hover, :focus-visible) .artist-shader__icon {
  animation-name: artist-shader-light-spin;
}

.artist-shader__trigger:focus-visible,
.artist-shader-reset:focus-visible {
  outline: 2px solid #c4eaff;
  outline-offset: 4px;
}

.artist-shader.is-open .artist-shader__trigger,
.artist-shader__trigger[aria-expanded="true"] {
  color: var(--shader-ice);
  border-color: rgba(197, 234, 255, 0.57);
  box-shadow:
    inset 0 1px 0 rgba(241, 252, 255, 0.2),
    inset 0 -2px 0 var(--shader-marker),
    0 0 1.4rem rgba(120, 204, 255, 0.28),
    0 9px 18px rgba(0, 0, 0, 0.3);
  transform: translateY(-3px) scale(1.08);
}

.artist-shader__trigger[aria-expanded="true"]::after,
.artist-shader.is-open .artist-shader__trigger::after {
  opacity: 0;
}

.artist-shader.is-modified .artist-shader__trigger {
  --shader-marker: rgba(168, 228, 255, 0.72);
  color: #d4efff;
}

.artist-shader__trigger:active,
.artist-shader-reset:active {
  transform: translateY(2px) rotate(2deg) scale(0.88);
  transition-duration: 85ms;
}

.artist-shader.is-adjusting .artist-shader__trigger {
  transform: translateY(-5px) scale(1.15);
  filter: brightness(1.2);
}

.artist-shader__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 1rem);
  left: 0;
  width: 20rem;
  padding: 1.12rem 1.2rem 0.9rem;
  overflow: hidden;
  border: 1px solid rgba(190, 225, 246, 0.26);
  border-radius: 19px;
  color: #e0eff8;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(220, 241, 255, 0.015) 3px 4px),
    radial-gradient(ellipse at 5% 0, rgba(162, 217, 250, 0.17), transparent 75%),
    linear-gradient(140deg, rgba(32, 57, 75, 0.92), rgba(11, 23, 33, 0.97));
  box-shadow:
    inset 0 1px 0 rgba(238, 249, 255, 0.15),
    inset 0 0 0 4px rgba(205, 235, 252, 0.025),
    0 0 0 1px rgba(6, 14, 20, 0.58),
    0 0 2.5rem rgba(99, 183, 234, 0.13),
    0 25px 65px rgba(0, 0, 0, 0.56);
  -webkit-backdrop-filter: blur(28px) saturate(1.25);
  backdrop-filter: blur(28px) saturate(1.25);
  transform-origin: 1.35rem -0.9rem;
  transition: border-color 170ms ease, box-shadow 230ms ease;
}

.artist-shader__panel[hidden] {
  display: none;
}

.artist-shader.is-open .artist-shader__panel {
  animation: artist-shader-panel-enter 430ms cubic-bezier(0.16, 1.25, 0.3, 1) both;
}

.artist-shader.is-adjusting .artist-shader__panel {
  border-color: rgba(207, 239, 255, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(243, 252, 255, 0.22),
    inset 0 0 0 4px rgba(205, 235, 252, 0.035),
    0 0 3.3rem rgba(127, 207, 250, 0.25),
    0 25px 65px rgba(0, 0, 0, 0.56);
}

.artist-shader__heading {
  display: flex;
  gap: 0.65rem;
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
}

.artist-shader__heading label {
  color: #e7f4fc;
  font: 550 0.95rem/1.35 "Manrope", sans-serif;
  letter-spacing: -0.015em;
}

.artist-shader__heading output {
  flex: 0 0 auto;
  color: #a8d4ed;
  font: 500 0.79rem/1.3 "Manrope", sans-serif;
  font-variant-numeric: tabular-nums;
}

.artist-shader__range {
  --shader-fill: 50%;
  display: block;
  width: 100%;
  height: 2.75rem;
  margin: 0.35rem 0 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  background: transparent;
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.artist-shader__range::-webkit-slider-runnable-track {
  height: 6px;
  border: 1px solid rgba(199, 230, 250, 0.15);
  border-radius: 999px;
  background: linear-gradient(90deg, #73b4d7 0, #c5edff var(--shader-fill), rgba(173, 219, 248, 0.1) var(--shader-fill), rgba(173, 219, 248, 0.1) 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.23), 0 0 0.55rem rgba(138, 214, 255, 0.09);
}

.artist-shader__range::-moz-range-track {
  height: 6px;
  border: 1px solid rgba(199, 230, 250, 0.15);
  border-radius: 999px;
  background: linear-gradient(90deg, #73b4d7 0, #c5edff var(--shader-fill), rgba(173, 219, 248, 0.1) var(--shader-fill), rgba(173, 219, 248, 0.1) 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.23), 0 0 0.55rem rgba(138, 214, 255, 0.09);
}

.artist-shader__range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -9px;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid rgba(234, 249, 255, 0.94);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 25%, #f6fcff, #9cd4f0 66%, #669cbd);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 0 0 4px rgba(163, 218, 249, 0.07), 0 0 0.8rem rgba(172, 225, 255, 0.38), 0 3px 8px rgba(0, 0, 0, 0.3);
  transition: transform 270ms var(--shader-spring), box-shadow 200ms ease;
}

.artist-shader__range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(234, 249, 255, 0.94);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 25%, #f6fcff, #9cd4f0 66%, #669cbd);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 0 0 4px rgba(163, 218, 249, 0.07), 0 0 0.8rem rgba(172, 225, 255, 0.38), 0 3px 8px rgba(0, 0, 0, 0.3);
  transition: transform 270ms var(--shader-spring), box-shadow 200ms ease;
}

.artist-shader__range:is(:hover, :focus-visible)::-webkit-slider-thumb,
.artist-shader.is-adjusting .artist-shader__range::-webkit-slider-thumb {
  transform: scale(1.3);
  box-shadow: inset 0 1px 2px #fff, 0 0 0 6px rgba(175, 226, 255, 0.1), 0 0 1.4rem rgba(185, 233, 255, 0.65), 0 4px 10px rgba(0, 0, 0, 0.3);
}

.artist-shader__range:is(:hover, :focus-visible)::-moz-range-thumb,
.artist-shader.is-adjusting .artist-shader__range::-moz-range-thumb {
  transform: scale(1.3);
  box-shadow: inset 0 1px 2px #fff, 0 0 0 6px rgba(175, 226, 255, 0.1), 0 0 1.4rem rgba(185, 233, 255, 0.65), 0 4px 10px rgba(0, 0, 0, 0.3);
}

.artist-shader__range:focus-visible {
  border-radius: 9px;
  outline: 2px solid rgba(188, 232, 255, 0.6);
  outline-offset: 3px;
}

.artist-shader__ends {
  display: flex;
  gap: 1rem;
  margin-top: 0.4rem;
  justify-content: space-between;
  color: #8faec0;
  font: 450 0.72rem/1.4 "Manrope", sans-serif;
}

.artist-shader-reset {
  margin-inline-start: 0.25rem;
  color: #99b2c3;
  border-color: rgba(189, 218, 237, 0.13);
  background: rgba(19, 30, 39, 0.72);
}

.artist-shader-reset[aria-disabled="true"] {
  opacity: 0.52;
}

.artist-shader-reset:is(:hover, :focus-visible) {
  opacity: 1;
  transform: translateY(-6px) rotate(5deg) scale(1.17);
}

.artist-shader-reset:is(:hover, :focus-visible) .artist-shader__icon {
  transform: rotate(-190deg) scale(1.15);
  filter: drop-shadow(0 0 0.55rem rgba(196, 237, 255, 0.8));
}

.artist-shaders.is-resetting .artist-shader-reset .artist-shader__icon {
  animation: artist-shader-reset-spin 850ms cubic-bezier(0.18, 0.75, 0.2, 1) both;
}

.artist-shaders.is-resetting .artist-shader__trigger {
  animation: artist-shader-reset-flash 550ms ease both;
}

.artist-shaders [data-tooltip]::after {
  max-width: min(14rem, calc(100vw - 2rem));
  border-color: rgba(198, 231, 251, 0.21);
  color: #dfedf7;
  background: linear-gradient(145deg, rgba(84, 136, 175, 0.13), transparent 65%), rgba(12, 23, 32, 0.97);
  font-size: 0.75rem;
  transform: translate(-50%, -0.25rem) rotate(5deg) scale(0.88);
  transition: opacity 140ms ease, transform 330ms var(--shader-spring);
}

.artist-shaders [data-tooltip]:is(:hover, :focus-visible)::after {
  transform: translate(-50%, 0) rotate(5deg) scale(1);
}

.artist-shader-reset[data-tooltip]::after {
  right: 0;
  left: auto;
  transform: translateY(-0.25rem) rotate(-5deg) scale(0.88);
  transform-origin: top right;
}

.artist-shader-reset[data-tooltip]:is(:hover, :focus-visible)::after {
  transform: translateY(0) rotate(-5deg) scale(1);
}

@keyframes artist-shader-shine {
  0% { opacity: 0; background-position: 145% 0; }
  20% { opacity: 0.9; }
  65% { opacity: 0.48; }
  100% { opacity: 0; background-position: -110% 0; }
}

@keyframes artist-shader-icon-pop {
  0% { transform: rotate(0) scale(1); }
  34% { transform: rotate(-24deg) scale(1.4); }
  62% { transform: rotate(14deg) scale(1.12); }
  82% { transform: rotate(-7deg) scale(1.23); }
  100% { transform: rotate(5deg) scale(1.16); }
}

@keyframes artist-shader-light-spin {
  0% { transform: rotate(0) scale(1); }
  48% { transform: rotate(125deg) scale(1.42); }
  76% { transform: rotate(103deg) scale(1.12); }
  100% { transform: rotate(112deg) scale(1.17); }
}

@keyframes artist-shader-panel-enter {
  0% { opacity: 0; transform: translateY(-12px) scale(0.8) rotate(-3deg); }
  67% { opacity: 1; transform: translateY(2px) scale(1.035) rotate(0.6deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes artist-shader-reset-spin {
  0% { transform: rotate(0) scale(1); }
  24% { transform: rotate(55deg) scale(1.32); }
  78% { transform: rotate(-395deg) scale(1.13); }
  100% { transform: rotate(-360deg) scale(1); }
}

@keyframes artist-shader-reset-flash {
  0%, 100% { filter: brightness(1); }
  35% { filter: brightness(1.75); box-shadow: 0 0 1.8rem rgba(193, 235, 255, 0.42); }
}

@media (max-width: 720px) {
  .planning-content[data-workspace-mode="artist"] .planning-toolbar__primary {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "identity";
  }

  .planning-content[data-workspace-mode="artist"] .planning-toolbar__identity {
    gap: 0.42rem;
  }

  .artist-shaders {
    gap: 0.22rem;
    padding-inline-start: 0.42rem;
  }

  .artist-shader {
    position: static;
  }

  .artist-shader__panel {
    top: calc(100% + 1rem);
    right: 0;
    left: 0;
    width: auto;
    padding: 1rem 0.95rem 0.85rem;
    transform-origin: top center;
  }

  .artist-shader-reset {
    margin-inline-start: 0.1rem;
  }

  .artist-shaders [data-tooltip]::after {
    max-width: 13rem;
    left: 0;
    transform: translateY(-0.25rem) rotate(5deg) scale(0.88);
    transform-origin: top left;
  }

  .artist-shaders [data-tooltip]:is(:hover, :focus-visible)::after {
    transform: translateY(0) rotate(5deg) scale(1);
  }

  .artist-shader:is([data-shader-control="exposure"], [data-shader-control="shadow"]) [data-tooltip]::after,
  .artist-shader-reset[data-tooltip]::after {
    right: 0;
    left: auto;
    transform-origin: top right;
  }
}

/* Very narrow phones cannot fit seven 44px controls plus the page margins.
   Keep a single toolbar row; ordinary mobile widths retain full 44px targets. */
@media (max-width: 380px) {
  .artist-shaders {
    gap: 0.12rem;
    padding-inline-start: 0.3rem;
  }

  .artist-shader__trigger,
  .artist-shader-reset {
    flex-basis: 2.5rem;
    width: 2.5rem;
    height: 2.75rem;
  }

  .artist-shader-reset {
    margin-inline-start: 0;
  }
}

@media (max-width: 350px) {
  .planning-content[data-workspace-mode="artist"] .planning-toolbar__identity {
    gap: 0.22rem;
  }

  .artist-shaders {
    gap: 0;
    padding-inline-start: 0.2rem;
  }

  .artist-shader__trigger,
  .artist-shader-reset {
    flex-basis: 2.25rem;
    width: 2.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .artist-shaders *,
  .artist-shaders *::before,
  .artist-shaders *::after {
    animation: none !important;
    transition: none !important;
  }

  .artist-shaders .artist-shader__trigger,
  .artist-shaders .artist-shader-reset,
  .artist-shaders .artist-shader__icon,
  .artist-shaders .artist-shader__panel {
    transform: none !important;
  }

  .artist-shader__range::-webkit-slider-thumb {
    transform: none !important;
    transition: none !important;
  }

  .artist-shader__range::-moz-range-thumb {
    transform: none !important;
    transition: none !important;
  }
}