/* ============================================================
   KEEYNET dashboard — copy buttons on every command panel
   ------------------------------------------------------------
   The enrollment screen gives the token a Copy button but leaves
   the three shell commands to be selected by hand, which is the
   awkward bit: the install line is the longest string on the
   screen and it wraps, so a drag-select is easy to get wrong.

   This adds the same affordance to every .command-panel on the
   dashboard. Four exist in index.html today (the Fabric connect
   panel plus the three enrollment steps); the script finds them
   by class, so any added later get a button with no extra work.

   To remove: delete the <link> to this file and the <script> tag
   for copy-commands.js.
   ============================================================ */


/* ---------- make room for the button -------------------------- */

/* .command-panel is a dark 14px-radius block with 16px padding.
   The button is absolutely positioned inside it, so the code has
   to keep clear of the top-right corner. */

.command-panel {
  position: relative;
}

.command-panel code {
  display: block;
  padding-right: 96px;
  overflow-wrap: anywhere;
}

/* Panels that carry a label above the code ("Install the
   connector package, then run:") need the label to clear the
   button too. */
.command-panel span {
  padding-right: 96px;
}


/* ---------- the button ---------------------------------------- */

.cmd-copy {
  position: absolute;
  top: 10px;
  right: 10px;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  margin: 0;
  padding: 6px 10px;

  border: 1px solid rgba(219, 230, 246, .22);
  border-radius: 8px;
  background: rgba(219, 230, 246, .08);

  font-family: var(--font-main, inherit);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  color: #dbe6f6;

  cursor: pointer;
  transition:
    background .14s ease,
    border-color .14s ease,
    color .14s ease;
}

.cmd-copy:hover {
  background: rgba(219, 230, 246, .16);
  border-color: rgba(219, 230, 246, .36);
}

.cmd-copy:active {
  transform: translateY(1px);
}

.cmd-copy:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}

.cmd-copy svg {
  width: 12px;
  height: 12px;
  flex: none;
}


/* ---------- copied ------------------------------------------- */

.cmd-copy[data-state="copied"] {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: #ffffff;
}

/* Clipboard writes fail outside a secure context. The script then
   selects the command instead, and the label says so. */
.cmd-copy[data-state="manual"] {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .34);
}


/* ---------- the token panel, for consistency ------------------ */

/* .secret-panel already has a Copy button, but it is a bare
   .quiet-button with no icon, so the two now read as the same
   control. Appearance only — the existing click handler in
   app.js is untouched. */

.secret-panel .quiet-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.secret-panel .quiet-button svg {
  width: 12px;
  height: 12px;
  flex: none;
}


/* ---------- narrow screens ------------------------------------ */

/* Below this the button would sit on top of the command, so it
   moves under it instead. */
@media (max-width: 520px) {
  .command-panel code,
  .command-panel span {
    padding-right: 0;
  }

  .cmd-copy {
    position: static;
    margin-top: 12px;
  }
}