/* Buttons. One primary per screen in brand blue; every other action wears the colour of what it does:
   ok for positive (upgrade, resume, enable), warn for cautionary (pause, reconnect, sign out),
   danger for destructive (delete, revoke, cancel). A semantic button only sets --tone. */

.btn {
  --tone: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--h-md); padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--panel); color: var(--ink); box-shadow: var(--sh-xs);
  font-size: var(--fs-s); font-weight: 600; line-height: 1.2; letter-spacing: -.005em;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--panel-2); border-color: var(--line-strong); color: var(--ink); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn svg { width: 15px; height: 15px; flex: none; }

.btn.primary { background: var(--brand); border-color: transparent; color: var(--on-brand); }
.btn.primary:hover:not(:disabled) { background: var(--brand-hover); color: var(--on-brand); }

.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); box-shadow: none; }
.btn.ghost:hover:not(:disabled) { background: var(--panel-3); color: var(--ink); }

.btn.ok { --tone: var(--ok); --on-tone: var(--on-ok); }
.btn.warn { --tone: var(--warn); --on-tone: var(--on-warn); }
.btn.danger { --tone: var(--bad); --on-tone: var(--on-bad); }
.btn:is(.ok, .warn, .danger) {
  color: var(--tone); box-shadow: none;
  background: color-mix(in srgb, var(--tone) 8%, var(--panel));
  border-color: color-mix(in srgb, var(--tone) 34%, transparent);
}
.btn:is(.ok, .warn, .danger):hover:not(:disabled) {
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 15%, var(--panel));
  border-color: var(--tone);
}

/* The committing button of a confirm dialog: the same tone, filled. */
.btn.solid:is(.ok, .warn, .danger) { background: var(--tone); border-color: transparent; color: var(--on-tone); }
.btn.solid:is(.ok, .warn, .danger):hover:not(:disabled) {
  background: color-mix(in srgb, var(--tone) 86%, var(--ink)); border-color: transparent; color: var(--on-tone);
}

.btn.sm { min-height: var(--h-sm); padding: 0 11px; gap: 6px; font-size: var(--fs-xs); border-radius: var(--r-s); }
.btn.sm svg { width: 14px; height: 14px; }
.btn.lg { min-height: var(--h-lg); padding: 0 22px; font-size: var(--fs-l); border-radius: var(--r-full); }
.btn.block { width: 100%; }
.btn.detailbtn { gap: 4px; padding-right: 8px; }

/* Busy: the label stays, a spinner joins it, the button stops taking clicks. */
.btn .btn-spin { display: none; }
.btn.busy { pointer-events: none; opacity: .85; }
.btn.busy > svg, .btn.busy > i { display: none; }
.btn.busy .btn-spin {
  display: inline-block; width: 13px; height: 13px; margin-right: 2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---------- Icon buttons ---------- */
.icon-btn {
  position: relative; display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: var(--r-m);
  border: 1px solid transparent; background: transparent; color: var(--ink-3);
  cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.icon-btn:hover { background: var(--panel-3); color: var(--ink); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn .dot-badge {
  position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--bad); box-shadow: 0 0 0 2px var(--chrome);
}
.icon-btn.theme-btn { border-color: var(--line); }
.theme-btn [data-theme-icon] { font-size: 15px; line-height: 1; }

.avatar {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: var(--brand); color: var(--on-brand);
  font-size: var(--fs-2xs); font-weight: 700; cursor: pointer;
}

/* ---------- Official connect buttons ----------
   Some systems require their own button artwork. It is shown at one shared height and its own proportions;
   the hover and dark variants are stacked images, so nothing is swapped or reloaded on hover. */
.connectbtn:not(.connectmark) { min-height: var(--connect-h); }
/* Hidden until systems.js has decided which button to show, and shown anyway after 1.5s if it never runs. */
html.js .connectbtn:not(.painted) { visibility: hidden; animation: connect-reveal 0s 1.5s forwards; }
@keyframes connect-reveal { to { visibility: visible; } }
.connectmark {
  position: relative; display: inline-flex; flex: none;
  height: var(--connect-h); padding: 0; border: 0; border-radius: var(--r-s);
  background: none; box-shadow: none; line-height: 0; cursor: pointer;
}
.connectmark img { height: 100%; width: auto; max-width: none; }
.connectmark .cm-hover { position: absolute; inset: 0; opacity: 0; transition: opacity .15s ease; }
.connectmark:hover .cm-hover { opacity: 1; }
.connectmark:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }