/* 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); }
/* Every Cancel is red and every Back one soft blue, wherever they stand. */
.btn.cancel { --tone: var(--bad); --tone-base: var(--bad-base); --on-tone: var(--on-bad); }
.btn.back { --tone: var(--brand-text); --on-tone: #fff; }
.btn:is(.ok, .warn, .danger, .cancel, .back) {
  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, .cancel, .back):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, .cancel, .back) { background: var(--tone); border-color: transparent; color: var(--on-tone); }
.btn.solid:is(.ok, .warn, .danger, .cancel, .back):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.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%; }

/* 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 .dot-badge.important {
  display: grid; place-items: center; top: 2px; right: 2px; width: 16px; height: 16px;
  background: var(--action-grad); color: var(--on-brand); font-size: 11px; font-weight: 800; line-height: 1;
  animation: important-glow 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .icon-btn .dot-badge.important { animation: none; } }
.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; }

/* Switch it on, the one action we want noticed: emerald green whatever tone class it carries, a light line travelling
   around the edge, a soft glow behind it and the sweep on hover. */
@property --glow-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.btn.glow, :root[data-theme="dark"] .btn.glow, .dark-surface .btn.glow {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--go-grad); border-color: transparent; color: var(--on-go);
  box-shadow: var(--sheen-edge), 0 8px 20px -14px var(--go-base);
  animation: btn-glow 2.8s ease-in-out infinite;
}
.btn.glow:hover:not(:disabled), :root[data-theme="dark"] .btn.glow:hover:not(:disabled), .dark-surface .btn.glow:hover:not(:disabled) {
  background: var(--go-grad); border-color: transparent; color: var(--on-go); filter: brightness(1.07);
}
.btn.glow::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--glow-angle), transparent 0 62%, var(--go-line) 80%, var(--on-go) 86%, var(--go-line) 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: btn-glow-line 3s linear infinite;
}
.btn.glow::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%); transition: transform .6s ease;
}
.btn.glow:hover:not(:disabled)::after { transform: translateX(120%); }
.btn.glow:focus-visible { box-shadow: var(--focus-ring); animation: none; }
@keyframes btn-glow-line { to { --glow-angle: 360deg; } }
@keyframes btn-glow {
  0%, 100% { box-shadow: var(--sheen-edge), 0 8px 20px -14px var(--go-base), 0 0 0 0 transparent; }
  50% { box-shadow: var(--sheen-edge), 0 8px 20px -14px var(--go-base), 0 0 20px 2px var(--go-soft); }
}
@media (prefers-reduced-motion: reduce) {
  .btn.glow, .btn.glow::before { animation: none; }
  .btn.glow::before { background: none; }
}