/* Palette follows native ColorPicker; no independent author/colouring dock. */
.br-horse-dock[hidden] { display: none; }
.br-horse-dock.has-error {
  position: fixed;
  z-index: 10000;
  left: 16px;
  right: 16px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  padding: 16px;
  background: #fff;
  color: #231f20;
  border-radius: 12px;
  font: inherit;
}
.br-horse-dock button { min-height: 44px; padding: 8px 16px; font: inherit; }
.patch-button img { display: block; }
.color-picker.br-paint-palette { gap: 6px; }
.color-picker.br-paint-palette li[data-v-63ed8e60] { margin: 0; flex: 0 0 auto; }
.color-picker.br-paint-palette button[data-v-63ed8e60] { padding: 0; }
.color-picker .br-author-swatch button[data-v-63ed8e60] { overflow: hidden; background: #fff; }
.color-picker .br-author-swatch svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.color-picker .br-author-swatch button { position: relative; }
.color-picker .br-author-sectors { transition: opacity 180ms ease; }
.color-picker .br-author-swatch.has-undo .br-author-sectors {
  opacity: .4;
  filter: blur(.65px);
}
.color-picker .br-author-swatch .br-author-undo {
  position: absolute;
  left: 15%;
  top: 15%;
  width: 70%;
  height: 70%;
}
.color-picker button:focus-visible { outline: 2px solid #00693c; outline-offset: 3px; }
.color-picker.br-paint-palette.is-visible .br-author-swatch button[data-v-63ed8e60] {
  animation: br-author-reveal-mobile 800ms cubic-bezier(.55, 0, .1, 1) 300ms both;
}
@keyframes br-author-reveal-mobile {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes br-author-reveal-desktop {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 768px) {
  .color-picker.mobile.br-paint-palette[data-v-63ed8e60] {
    box-sizing: border-box;
    gap: clamp(4px, 1.6vw, 8px);
    padding: 16px max(16px, env(safe-area-inset-left, 0px)) calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .color-picker.mobile.br-paint-palette li[data-v-63ed8e60] { margin: 0; }
  .color-picker.mobile.br-paint-palette button[data-v-63ed8e60] {
    box-sizing: border-box;
    width: clamp(36px, 11vw, 48px);
    height: clamp(36px, 11vw, 48px);
  }
  .color-picker.mobile.br-paint-palette li.is-active[data-v-63ed8e60] { transform: scale(1.08); }
}
@media (min-width: 769px) {
  .color-picker.desktop.br-paint-palette[data-v-63ed8e60] {
    flex-direction: column;
    left: -40px;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: max-content;
    gap: 5px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .color-picker.desktop.br-paint-palette.is-visible[data-v-63ed8e60] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .color-picker.desktop.br-paint-palette button[data-v-63ed8e60] { width: 22px; height: 22px; }
  .color-picker.desktop.br-paint-palette.is-visible .br-author-swatch button[data-v-63ed8e60] {
    animation-name: br-author-reveal-desktop;
  }
}
@media (prefers-reduced-motion: reduce) {
  .color-picker.br-paint-palette.is-visible .br-author-swatch button[data-v-63ed8e60],
  .color-picker.desktop.br-paint-palette.is-visible .br-author-swatch button[data-v-63ed8e60] {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .color-picker .br-author-sectors { transition-duration: 100ms; }
}