/* Index of Marks — interaction polish layer.
   Presentation only: preserve the existing toolbar/palette state and event logic. */

/* Toolbar controls: keep the geometry stable, add only lightweight feedback. */
.icon-button {
  transition:
    background-color 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    box-shadow 180ms ease,
    transform 150ms cubic-bezier(.2,.8,.2,1);
}
.icon-button > svg,
.icon-button > span {
  transform-origin: 50% 50%;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), opacity 160ms ease;
}
.icon-button:active {
  transform: scale(.94);
}

.search-input {
  transition:
    width .3s var(--ease),
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}
.search-input:focus-visible {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 16%, transparent);
}

.palette-close {
  transition: opacity 160ms ease, transform 180ms cubic-bezier(.2,.8,.2,1), background-color 160ms ease;
}
.palette-close:active { transform: scale(.9); }

/* Keep Hide borders genuinely clean: this layer must never reintroduce button chrome. */
@media (hover: hover) and (pointer: fine) {
  html:not([data-lines-hidden="true"]) .icon-button:hover:not(.is-active):not([aria-expanded="true"]) {
    background: color-mix(in srgb, var(--fg) 8%, transparent);
    color: var(--fg);
  }
  .icon-button:hover > svg,
  .icon-button:hover > span {
    transform: scale(1.07);
  }
  .palette-close:hover {
    background: color-mix(in srgb, var(--fg) 7%, transparent);
    transform: scale(1.04);
  }
}

/* Palette popover: keep the existing hidden state logic, but make the motion
   visible enough to read as a deliberate app-level transition. */
.palette-popover,
.palette-popover[hidden] {
  display: block !important;
  transform-origin: top right;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--bg) 84%, transparent) !important;
  transition:
    opacity 190ms cubic-bezier(.2,.7,.2,1),
    transform 240ms cubic-bezier(.16,1,.3,1),
    visibility 0s linear 0s,
    box-shadow 240ms ease;
  will-change: opacity, transform;
}
.palette-popover:not([hidden]) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  box-shadow: 0 18px 46px color-mix(in srgb, var(--fg) 14%, transparent);
}
.palette-popover[hidden] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-16px) scale(.955);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--fg) 5%, transparent);
  transition-delay: 0s, 0s, 240ms, 0s;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .palette-popover,
  .palette-popover[hidden] {
    background: var(--bg) !important;
  }
}

/* The panel's secondary actions feel tactile without turning into large blocks. */
.palette-swap,
.palette-family,
.palette-family select {
  transition:
    background-color 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    opacity 160ms ease,
    transform 150ms cubic-bezier(.2,.8,.2,1);
}
.palette-buttons button {
  transition:
    background-color 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    transform 150ms cubic-bezier(.2,.8,.2,1);
}
.palette-swap::before {
  transition: background-color 160ms ease, color 160ms ease, transform 180ms cubic-bezier(.2,.8,.2,1);
}
.palette-buttons button:active,
.palette-swap:active {
  transform: scale(.975);
}

/* Both final actions are peers in geometry. Keep the underlying data hooks and
   behavior untouched; only their presentation is replaced here. */
.palette-buttons {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.palette-buttons button {
  width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
  font-size: 0 !important;
  opacity: 1 !important;
}
.palette-buttons button::before {
  content: none !important;
  display: none !important;
}
.palette-buttons button::after {
  font-size: 11px;
  line-height: 1;
}
.palette-buttons [data-palette-random]::after {
  content: "Generate Colors";
}
.palette-buttons [data-palette-reset]::after {
  content: "Black & White";
}
.palette-buttons button:hover,
.palette-buttons button:focus-visible,
.palette-buttons button:active,
.palette-buttons .palette-primary:hover {
  opacity: 1 !important;
}

@media (hover: hover) and (pointer: fine) {
  .palette-swap:hover::before { transform: translateY(-.25px) scale(1.05); }
  .palette-buttons button:hover { transform: translateY(-1px); }
}

@media (max-width: 760px) {
  .palette-popover,
  .palette-popover[hidden] {
    transform-origin: top center;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  .palette-popover[hidden] {
    transform: translateY(-12px) scale(.965);
  }
  .palette-buttons button::after {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .icon-button,
  .icon-button > svg,
  .icon-button > span,
  .search-input,
  .palette-close,
  .palette-popover,
  .palette-popover[hidden],
  .palette-swap,
  .palette-swap::before,
  .palette-buttons button,
  .palette-family,
  .palette-family select {
    transition-duration: 0.01ms !important;
  }
}