/* kg-buttons: the one capsule. Tokens fall back to the estate ink. */
/* THE PRESS SPRING (2026-09-23): in = stiffness 900 damping 40, out = 420 / 16 with velocity 2. */
:root{--kg-press-in:100ms cubic-bezier(0.4,0,0.6,1); --kg-press-out:100ms cubic-bezier(0.4,0,0.6,1)}
@supports (transition-timing-function: linear(0, 1)){:root{
  --kg-press-in:160ms linear(0, 0.2809 5%, 0.4942 10%, 0.6529 15%, 0.7689 20%, 0.8518 25%, 0.9098 30%, 0.9493 35%, 0.9754 40%, 0.9919 45%, 1.0018 50%, 1.0072 55%, 1.0097 60%, 1.0103 65%, 1.0099 70%, 1.0089 75%, 1.0076 80%, 1.0063 85%, 1.0051 90%, 1.004 95%, 1);
  --kg-press-out:653ms linear(0, 0.5257 2.5%, 0.9642 5%, 1.3156 7.5%, 1.5537 10%, 1.6787 12.5%, 1.7111 15%, 1.6649 17.5%, 1.5667 20%, 1.4330 22.5%, 1.2871 25%, 1.1506 27.5%, 1.0275 30%, 0.9302 32.5%, 0.8642 35%, 0.8252 37.5%, 0.8127 40%, 0.8213 42.5%, 0.8458 45%, 0.8799 47.5%, 0.9169 50%, 0.9545 52.5%, 0.9878 55%, 1.0147 57.5%, 1.0333 60%, 1.0448 62.5%, 1.0492 65%, 1.0477 67.5%, 1.0419 70%, 1.0332 72.5%, 1.0235 75%, 1.0136 77.5%, 1.0045 80%, 0.9974 82.5%, 0.9919 85%, 0.9886 87.5%, 0.9872 90%, 0.9873 92.5%, 0.9887 95%, 0.9908 97.5%, 1);
}}
.kg-btn{
  --kg-btn-ink: var(--kg-ink, var(--text-primary, #ededed));
  --kg-btn-rim: inset -1px 1px 0 0 rgba(255,255,255,.10), inset 1px -1px 0 0 rgba(255,255,255,.10);
  --kg-btn-drop: 0 4px 19px rgba(0,0,0,.4);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  box-sizing:border-box; margin:0; border:0; border-radius:999px;
  height:36px; padding:0 16px; font:inherit; font-size:14px; font-weight:650; line-height:1.2;
  white-space:nowrap; text-decoration:none; cursor:pointer; user-select:none; -webkit-user-select:none;
  appearance:none; -webkit-appearance:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  color:var(--kg-btn-ink); background:rgba(237,237,237,.04); box-shadow:var(--kg-btn-rim), var(--kg-btn-drop);
  transition:transform var(--kg-press-out), color 200ms cubic-bezier(0.22,1,0.36,1);
}
.kg-btn svg{flex:0 0 auto; width:18px; height:18px}
/* NO HOVER: nothing changes under the pointer (the owner, 2026-09-20). */
.kg-btn:hover{background:inherit}
.kg-btn:active:not(:disabled):not([aria-disabled="true"]){transform:scale(.94); transition:transform var(--kg-press-in), color 200ms cubic-bezier(0.22,1,0.36,1)}
.kg-btn:focus{outline:none}
.kg-btn:focus-visible{outline:1px solid rgba(237,237,237,.6); outline-offset:2px}
.kg-btn:disabled,.kg-btn[aria-disabled="true"]{cursor:not-allowed; box-shadow:none}
/* sizes */
.kg-btn-s{height:28px; padding:0 12px; font-size:13px}
.kg-btn-s svg{width:16px; height:16px}
.kg-btn-l{height:44px; padding:0 22px; font-size:15px}
.kg-btn-l svg{width:20px; height:20px}
/* tiers: steps on one alpha ladder, never a new grey, never white */
.kg-btn-primary{background:rgba(237,237,237,.07); color:var(--kg-btn-ink); box-shadow:var(--kg-btn-rim), var(--kg-btn-drop)}
.kg-btn-primary:hover{background:rgba(237,237,237,.07)}
.kg-btn-primary:disabled,.kg-btn-primary[aria-disabled="true"]{background:rgba(237,237,237,.04); color:rgba(237,237,237,.30)}
.kg-btn-secondary{background:rgba(237,237,237,.04); color:var(--kg-btn-ink); box-shadow:var(--kg-btn-rim), var(--kg-btn-drop)}
.kg-btn-secondary:hover{background:rgba(237,237,237,.04)}
.kg-btn-secondary:disabled,.kg-btn-secondary[aria-disabled="true"]{color:rgba(237,237,237,.18)}
.kg-btn-quiet{background:transparent; color:rgba(237,237,237,.60); box-shadow:none}
.kg-btn-quiet:hover{background:transparent}
.kg-btn-quiet:disabled,.kg-btn-quiet[aria-disabled="true"]{color:rgba(237,237,237,.18)}
.kg-btn-destructive{background:rgba(255,69,58,.15); color:#ff453a; box-shadow:var(--kg-btn-rim)}
.kg-btn-destructive:hover{background:rgba(255,69,58,.15)}
.kg-btn-destructive:disabled,.kg-btn-destructive[aria-disabled="true"]{color:rgba(255,69,58,.30)}
/* the icon disc: two diameters and an info circle, the glyph half the disc (2026-09-23) */
.kg-btn-disc{width:32px; height:32px; padding:0; gap:0; border-radius:50%}
.kg-btn-disc svg{width:16px; height:16px}
.kg-btn-disc-s{width:28px; height:28px; padding:0; gap:0; border-radius:50%}
.kg-btn-disc-s svg{width:14px; height:14px}
.kg-btn-disc-xs{width:26px; height:26px; padding:0; gap:0; border-radius:50%}
.kg-btn-disc-xs svg{width:14px; height:14px}
/* A finger gets 44pt as REACH, never as size: a transparent extension of the
   button, so nothing drawn changes on a phone. The owner, 2026-09-20 evening:
   buttons that grew on the phone "ruined the UI in some places". */
@media (pointer:coarse){
  .kg-btn::after{content:""; position:absolute; top:50%; left:50%; width:max(100%,44px); height:max(100%,44px); transform:translate(-50%,-50%); border-radius:inherit}
}
@media (prefers-reduced-motion:reduce){ .kg-btn{transition:none} .kg-btn:active:not(:disabled):not([aria-disabled="true"]){transform:none; transition:none} }
/* =====================================================================
   MENU - shared by the account menu and the tile overflow menu.
   It now opens on the same Framework7 iOS popover motion as the sampler
   picker and every other choice menu: kgpMenuScaleIn / kgpMenuSlideIn from
   KG_PICKER_CSS. It used to run kgPopIn at 0.32s, which is why the account
   menu and the sampler picker felt like two different products.
   ===================================================================== */
.kg-menu {
  position: fixed;
  z-index: 4000;
  min-width: 208px;
  max-width: min(280px, calc(100vw - 16px));
  padding: 0;
  border-radius: 13px;
  overflow: hidden;
  background: rgba(28, 28, 31, 0.82);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  backdrop-filter: blur(30px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 18px 44px rgba(0, 0, 0, 0.55);
  /* F7 popover-on-bottom popover-on-left: origin right top, offset -50% / -80px. */
  transform-origin: right top;
  --kgp-menu-off-x: -50%;
  --kgp-menu-off-y: -80px;
  animation:
    kgpMenuScaleIn var(--kgp-menu-scale-in) var(--kgp-menu-curve) both,
    kgpMenuSlideIn var(--kgp-menu-slide-in) var(--kgp-menu-curve) both;
}
.kg-menu[hidden] { display: none; }
.kg-menu.kg-menu-out {
  pointer-events: none;
  animation: kgpMenuScaleOut var(--kgp-menu-scale-out) var(--kgp-menu-curve-out) both;
}
.kg-menu [role="menuitem"] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  background: none;
  color: var(--text-primary);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.1s cubic-bezier(0.4, 0, 0.6, 1);
}
.kg-menu [role="menuitem"] + [role="menuitem"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.kg-menu [role="menuitem"]:active { transform: scale(0.97); }
.kg-menu [role="menuitem"] svg { width: 16px; height: 16px; flex: 0 0 auto; }
.kg-menu .kg-menu-danger { color: var(--kammii-danger, #ff453a); }
@media (prefers-reduced-transparency: reduce) {
  .kg-menu { background: var(--bg-secondary); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kg-menu { animation: none; }
}
[data-theme="light"] .kg-menu {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 44px rgba(0, 0, 0, 0.18);
}
[data-theme="light"] .kg-menu [role="menuitem"] + [role="menuitem"] { box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.07); }