/* Copy field component: a read-only value with a Copy button.
   Without JavaScript the button stays hidden and the field is still selectable.
   Behaviour: /static/js/copy-field.js. */

.copy-field { margin-top: 1rem; }
.copy-field__label { display: block; margin-bottom: 0.375rem; font-weight: 600; font-size: 0.95rem; }

.copy-field__row { display: flex; gap: 0.5rem; }
.copy-field__input {
  flex: 1;
  min-width: 0;                        /* lets the field shrink on narrow phones */
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  font: 0.95rem var(--font-mono);
  color: var(--text-base);
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
}
.copy-field__button {
  flex-shrink: 0;
  min-height: 2.75rem;                 /* 44px touch target */
  padding: 0.5rem 1.125rem;
  font: inherit;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.copy-field__button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.copy-field__status { min-height: 1.5em; margin-top: 0.375rem; font-size: 0.9rem; color: var(--text-muted); }