/* Кнопка «Копировать …» с подтверждением (реквизиты и другой готовый текст; листинги — listing.css).
   <button class="btn btn--sm copy-btn" data-copy data-copy-text="…" data-copy-ok="Реквизиты скопированы">
     <svg class="ic">…</svg><span class="copy-btn__labels" aria-hidden="true"><span data-copy-idle>…</span><span data-copy-done>Скопировано</span></span>
   </button>
   <p class="copy-status" data-copy-status role="status" aria-live="polite"></p>
   <textarea class="copy-plain" data-copy-plain rows="3" readonly hidden></textarea>
   Статус и запасное поле — в том же родителе, что кнопка. Поведение — main.js. */

/* надпись в кнопке меняется без сдвига: обе подписи в одной ячейке */
.copy-btn__labels { display: inline-grid; }
.copy-btn__labels > span { grid-area: 1 / 1; text-align: left; }
.copy-btn__labels [data-copy-done] { visibility: hidden; }
.copy-btn.is-ok .copy-btn__labels [data-copy-idle] { visibility: hidden; }
.copy-btn.is-ok .copy-btn__labels [data-copy-done] { visibility: visible; }
.copy-btn.is-ok { --btn-border: var(--blue-ink); --btn-fg: var(--blue-ink); }

.copy-status { margin-top: 10px; font-size: var(--fs-label); color: var(--ink); }
.copy-status:empty { display: none; }

/* не вышло скопировать: ровно тот текст, что ушёл бы в буфер, выделенным */
.copy-plain {
  display: block; width: 100%; margin-top: 10px; padding: 8px 10px;
  resize: none; border: 1px solid var(--graphite); border-radius: 0;
  background: var(--blue-tint); color: var(--ink);
  font: 400 var(--fs-label)/1.4 var(--sans);
}