/* 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, full sync),
   danger for destructive (delete, revoke, cancel a plan, every downgrade and every sign out). 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(--btn-line); border-radius: var(--r-btn);
  background: var(--panel-2); 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, transform .15s ease;
}
.btn:hover { background: var(--panel-3); border-color: var(--line-strong); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn:hover:not(:disabled):not([aria-disabled="true"]) { transform: translateY(-1px); } }
.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 {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--action-grad); border-color: transparent; color: var(--on-brand);
  box-shadow: var(--sheen-edge), 0 8px 20px -14px var(--brand);
}
.btn.primary:hover:not(:disabled) { background: var(--action-grad); color: var(--on-brand); filter: brightness(1.08); }
/* A light sweep crosses the main action on hover. */
.btn.primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(110deg, transparent 30%, var(--sheen) 50%, transparent 70%);
}
.btn.primary:hover:not(:disabled)::after { transform: translateX(120%); transition: transform .7s ease; }

/* White text only reaches 4.5:1 on the deeper blue, so a dark surface does not fill a button with its --brand. */
:root[data-theme="dark"] .btn.primary, .dark-surface .btn.primary { background: var(--action-grad); }
:root[data-theme="dark"] .btn.primary:hover:not(:disabled), .dark-surface .btn.primary:hover:not(:disabled) { background: var(--action-grad); }

.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); --tone-base: var(--bad-base); --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(--tone-base, var(--panel)));
  border-color: color-mix(in srgb, var(--tone) 34%, var(--tone-base, transparent));
}
.btn:is(.ok, .warn, .danger):hover:not(:disabled) {
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 15%, var(--tone-base, 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);
}

/* An ordinary button with a coloured icon tile, so several can stand next to one primary. */
.btn.tiled.sky { --ic-tile: var(--action-sky); }
.btn.tiled.steel { --ic-tile: var(--action-steel); }
.btn.tiled.green { --ic-tile: var(--action-green); }
.btn.tiled.amber { --ic-tile: var(--action-amber); }
.btn.tiled { padding-left: 12px; }
.btn .btn-ic {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin-left: -6px;
  border-radius: var(--r-s); background: var(--ic-tile); color: var(--on-brand);
}
.btn .btn-ic svg { width: 14px; height: 14px; }
.btn.busy .btn-ic { display: none; }

.btn.sm { min-height: var(--h-sm); padding: 0 11px; gap: 6px; font-size: var(--fs-xs); border-radius: var(--r-m); }
.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. Every sign in button, official or our own, has one box:
   --connect-w by --connect-h. The artwork keeps its own proportions inside it and is never stretched; the hover
   and dark variants are stacked images, so nothing is swapped or reloaded on hover. */
.connectbtn { width: var(--connect-w); max-width: 100%; height: var(--connect-h); justify-content: center; }
.connectbtn:not(.connectmark) { min-height: var(--connect-h); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 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; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: var(--r-s);
  background: none; box-shadow: none; line-height: 0; cursor: pointer;
}
.connectmark img { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.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; }