/* ================================================================
   Resayil — Copy-to-clipboard buttons (Phase 24.12 Plan 05)
   ----------------------------------------------------------------
   Extracted + generalised from rs-ui-showcase.css §9 (the isolated
   demo on /ui-showcase). These styles apply site-wide to every
   element tagged with [data-rs-copyable] and to the curated list
   of Frappe read-only field selectors auto-wired by rs-copy.js.

   All tokens use --rs-* from resayil-brand.css. No hard-coded
   colours except the emerald "copied" state (kept consistent with
   the showcase) and the transparent outline for focus-visible.
   ================================================================ */

.rs-copyable-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--rs-space-2);
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
}

.rs-copy-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius);
  background: var(--rs-surface);
  color: var(--rs-fg-muted);
  cursor: pointer;
  font: inherit;
  line-height: 1;
  transition:
    background var(--rs-duration-fast) var(--rs-ease),
    color var(--rs-duration-fast) var(--rs-ease),
    border-color var(--rs-duration-fast) var(--rs-ease),
    transform var(--rs-duration-fast) var(--rs-ease);
}
.rs-copy-btn:hover {
  background: var(--rs-accent-soft);
  color: var(--rs-accent);
  border-color: var(--rs-accent);
}
.rs-copy-btn:active { transform: scale(0.94); }
.rs-copy-btn:focus-visible {
  outline: 2px solid var(--rs-accent);
  outline-offset: 2px;
}

/* Copied (success) state — emerald, matches showcase §9 and
   rs-toasts success border colour. */
.rs-copy-btn.rs-copy-copied {
  background: rgba(16, 185, 129, 0.10);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.4);
}
.rs-copy-btn.rs-copy-copied:hover {
  background: rgba(16, 185, 129, 0.14);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.6);
}

/* Icon layers — toggle visibility by class, not inline style,
   so the CSS-only fallback still works if JS fails mid-click. */
.rs-copy-icon,
.rs-copy-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
.rs-copy-btn .rs-copy-check { display: none; }
.rs-copy-btn.rs-copy-copied .rs-copy-icon { display: none; }
.rs-copy-btn.rs-copy-copied .rs-copy-check { display: inline-flex; }

/* Optional styled value pill for manually authored blocks
   (e.g. portal /subscribe license banner). Auto-wired read-only
   fields do NOT receive this class — they render in their native
   Frappe .control-value styling. */
.rs-copyable-value {
  flex: 1;
  font-family: var(--rs-font-mono);
  font-size: var(--rs-text-sm);
  color: var(--rs-fg);
  letter-spacing: 0.03em;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.25rem 0.5rem;
  background: var(--rs-surface-2);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-sm);
}

/* Reduced-motion override — disable scale/transition pulse on
   click; the colour swap remains for feedback. */
@media (prefers-reduced-motion: reduce) {
  .rs-copy-btn,
  .rs-copy-btn:active { transition: none; transform: none; }
}