/* Copy button — shared */
.copy-btn{
  background: transparent;
  border: none;
  color: #666;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: 1.125rem; /* ~18px */
  line-height: 1;
  padding: .25rem;
  transition: color .2s ease, transform .15s ease;
}

.copy-btn:hover{ color:#333; }
.copy-btn:active{ transform: scale(0.98); }

/* Keyboard focus */
.copy-btn:focus-visible{
  outline: 2px solid #3273dc;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Prevent icon from eating clicks */
.copy-btn i{ pointer-events: none; }

/* Nice pop when it flips to check */
.copy-btn.is-copied { animation: copy-pop .3s ease; }
@keyframes copy-pop{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.2); }
  100%{ transform: scale(1); }
}


/* small helper for inline value + icon rows */
.copy-row {
  display: flex; align-items: center; gap: .5rem;
  word-break: break-word;
}

/* Align copy button to the right in "Base Color Details" rows */
.color-value-item { display: flex; align-items: center; }
.color-value-item strong { flex: 0 0 60px; }           /* your existing min-width, made explicit */
.color-value-item .copy-row {
  display: flex; align-items: center; flex: 1 1 auto; min-width: 0;
}
.color-value-item .copy-row .copy-btn { margin-left: auto; }

/* === Global Notification (shared) === */

/* keep the same entrance animation the page uses */
@keyframes slideInFromBottom {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* class name kept as .notification to match existing pages */
.notification {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  background: #10b981;               /* success green */
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1000;
  animation: slideInFromBottom 0.3s ease-out;
  font: 500 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  pointer-events: none;               /* don’t block clicks behind it */
}

.notification.error { background: #ef4444; } /* error red */