/* The copyable line (web/core/copy.mjs builds it). Self-contained like auth.css and
   erase.css, and for the same reason: the pages that mount this do not agree on what a
   `button` or a `code` looks like, so it brings its own. Dark, and still one accent - the
   accent is on the verb, because taking the line is the only thing there is to do here. */

/* It wraps rather than scrolls: a truncated command is one you cannot read, a truncated URL
   is one you cannot check, and the button has to stay reachable at any width. */
.copy {
  display: flex; gap: .75rem; align-items: baseline;
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
  padding: .45rem .6rem; margin-top: .4rem;
}
/* Monospace and `user-select: all`, which together are the whole affordance when the
   clipboard is refused: one click selects the entire line, and no character of a URL or a
   shell command is ambiguous while you read it back. */
.copy code {
  flex: 1; font-size: 12px; color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere; user-select: all;
}
.copy button {
  background: none; border: 1px solid transparent; border-radius: 4px;
  padding: .1rem .4rem; font: inherit; font-size: 12px; color: var(--accent);
  cursor: pointer; white-space: nowrap;
}
.copy button:hover { border-color: var(--line); }
/* The UA focus ring is blue, and blue is a second colour - the same rule web/core/erase.css
   states about the affordance it owns. */
.copy button:focus-visible { outline: none; border-color: var(--accent); }
/* Said, not shown: the status beside the button carries the same word for a screen reader,
   off-screen rather than display:none, because a hidden live region announces nothing. */
.copy .status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }