/* The real site's dialogs, toasts, loading states and projection editor, in the instrument finish.
   Class names are the real modules' own (lib/site-ui.js, lib/xpts-scenario.js). */
.kft-dialog-open{overflow:hidden}
.kft-dialog-overlay{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:#0009;backdrop-filter:blur(4px);opacity:0;transition:opacity .13s}
.kft-dialog-overlay.is-open{opacity:1}
.kft-dialog{width:min(460px,100%);padding:20px 22px;border-radius:16px;background:var(--ground-2);border:1px solid var(--hair-2);box-shadow:0 30px 60px -20px #000c;transform:translateY(8px);transition:transform .2s cubic-bezier(.2,.9,.3,1.2)}
.kft-dialog-overlay.is-open .kft-dialog{transform:none}
.kft-dialog header{display:flex;align-items:center;gap:12px}
.kft-dialog-mark{width:10px;height:10px;border-radius:50%;background:var(--led-on);box-shadow:0 0 10px var(--led-on);flex:none}
.kft-dialog-warning .kft-dialog-mark{background:var(--warn);box-shadow:0 0 10px var(--warn)}.kft-dialog-error .kft-dialog-mark{background:var(--bad);box-shadow:0 0 10px var(--bad)}.kft-dialog-success .kft-dialog-mark{background:var(--good);box-shadow:0 0 10px var(--good)}
.kft-dialog small{font:700 11px Manrope;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.kft-dialog h2{font:600 19px Sora}
.kft-dialog p{margin:12px 0 18px;color:var(--ink-2);line-height:1.55}
.kft-dialog footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px}
.kft-dialog-button{position:relative;min-height:38px;padding:0 16px;border-radius:8px;cursor:pointer;font:700 13px Manrope;color:var(--key-ink);background:linear-gradient(var(--key-top),var(--key-mid) 48%,var(--key-bot));border:1px solid var(--key-edge);border-top-color:var(--key-lip);box-shadow:inset 0 1px #ffffff12,0 3px 0 var(--key-skirt),0 4px 6px #0004}
.kft-dialog-button:active{transform:translateY(2px);box-shadow:inset 0 1px 2px #0005,0 1px 0 var(--key-skirt)}
.kft-dialog-button.kft-dialog-confirm{color:var(--accent-ink);background:linear-gradient(var(--acc-top),var(--acc-mid) 48%,var(--acc-bot));border-color:var(--acc-edge);border-top-color:var(--acc-lip);box-shadow:inset 0 1px #fff4,0 3px 0 var(--acc-skirt),0 5px 8px #0005}
.kft-dialog-input-label{display:grid;gap:6px;margin:-6px 0 16px;font:700 12px Manrope;color:var(--ink-2)}
.kft-dialog-input{min-height:40px;padding:0 12px;border-radius:9px;background:var(--well);border:1px solid var(--well-edge);box-shadow:inset 0 2px 4px #0004;color:var(--ink);font:600 14px Manrope}

.kft-toast-region{position:fixed;z-index:210;left:50%;bottom:24px;translate:-50% 0;display:grid;gap:8px}
.kft-toast{padding:11px 18px;border-radius:12px;background:var(--raised);border:1px solid var(--hair-2);box-shadow:var(--shadow);font-weight:700;opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s}
.kft-toast.is-open{opacity:1;transform:none}

/* loading states */
.kft-loading-state{display:grid;gap:10px;padding:18px 0;color:var(--muted);font:700 11px Manrope;letter-spacing:.12em;text-transform:uppercase}
.kft-inline-spinner{width:14px;height:14px;border-radius:50%;border:2px solid var(--hair-2);border-top-color:var(--accent);animation:spin .8s linear infinite;display:inline-block;vertical-align:middle;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}
.kft-loading-lines{display:grid;gap:10px}.kft-loading-line{display:block;height:12px;width:var(--kft-line-width,80%);border-radius:6px;background:var(--skel);position:relative;overflow:hidden}
.kft-loading-line::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(100deg,transparent 20%,var(--skel-hi) 50%,transparent 80%);animation:sweep 1.5s infinite}
.kft-loading-line>span{display:none}
.kft-skel-bar{display:inline-block;border-radius:5px;background:var(--skel)}.kft-skel-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[data-kft-busy=true]{opacity:.7;cursor:progress}

/* the projection editor (lib/xpts-scenario.js) */
.kft-scenario-overlay{position:fixed;inset:0;z-index:150;display:none;place-items:center;padding:16px;background:#0009;backdrop-filter:blur(4px)}
.kft-scenario-overlay.open{display:grid}
.kft-scenario-modal{width:min(680px,100%);max-height:calc(100dvh - 32px);overflow:auto;border-radius:16px;background:var(--ground-2);border:1px solid var(--hair-2);box-shadow:0 30px 60px -20px #000c}
.kft-scenario-modal>header{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;background:var(--ground-2);border-bottom:1px solid var(--hair)}
.kft-scenario-modal>header button{width:34px;height:34px;border-radius:8px;cursor:pointer;color:var(--key-ink);background:linear-gradient(var(--key-top),var(--key-bot));border:1px solid var(--key-edge);box-shadow:0 2px 0 var(--key-skirt);font-size:16px}
.kft-scenario-body{padding:16px 20px}
.kft-scenario-modal>footer{position:sticky;bottom:0;display:flex;align-items:center;gap:12px;padding:14px 20px;background:var(--ground-2);border-top:1px solid var(--hair)}
.kft-scenario-modal>footer span{flex:1}
.kft-scenario-primary,.kft-scenario-secondary{min-height:38px;padding:0 16px;border-radius:8px;cursor:pointer;font:700 13px Manrope;color:var(--key-ink);background:linear-gradient(var(--key-top),var(--key-mid) 48%,var(--key-bot));border:1px solid var(--key-edge);border-top-color:var(--key-lip);box-shadow:inset 0 1px #ffffff12,0 3px 0 var(--key-skirt)}
.kft-scenario-primary{color:var(--accent-ink);background:linear-gradient(var(--acc-top),var(--acc-mid) 48%,var(--acc-bot));border-color:var(--acc-edge);border-top-color:var(--acc-lip);box-shadow:inset 0 1px #fff4,0 3px 0 var(--acc-skirt)}
.kft-scenario-primary:active,.kft-scenario-secondary:active{transform:translateY(2px);box-shadow:0 1px 0 var(--key-skirt)}
.kft-scenario-section{padding:12px 0;border-bottom:1px solid var(--hair)}
.kft-scenario-section-head{display:flex;justify-content:space-between;gap:12px;font:700 11px Manrope;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.kft-scenario-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.kft-scenario-field{display:grid;gap:6px;font:700 12.5px Manrope;color:var(--ink-2)}
.kft-scenario-input-wrap{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 10px;border-radius:9px;background:var(--well);border:1px solid var(--well-edge);box-shadow:inset 0 2px 4px #0004}
.kft-scenario-input-wrap input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--ink);font:600 14px Manrope}
.kft-scenario-modal input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent}
.kft-scenario-modal input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--track);border:1px solid var(--track-edge);box-shadow:inset 0 1px 2px #0009}
.kft-scenario-modal input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-10px;border-radius:5px;border:1px solid var(--metal-rim);background:repeating-linear-gradient(0deg,var(--metal-4) 0 2px,var(--metal-1) 2px 3px,var(--metal-3) 3px 5px);box-shadow:0 3px 0 #141c24,0 4px 6px #0007}
.kft-scenario-modal select,.kft-scenario-select{min-height:38px;padding:0 10px;border-radius:9px;background:var(--well);border:1px solid var(--well-edge);color:var(--ink);font:600 13px Manrope}
.kft-scenario-tabs,.kft-scenario-range-presets{display:inline-flex;gap:4px;padding:4px;border-radius:10px;background:var(--tray);border:1px solid var(--tray-edge);box-shadow:inset 0 2px 4px #0005}
.kft-scenario-tabs button,.kft-scenario-range-presets button{min-height:32px;padding:0 12px;border-radius:6px;cursor:pointer;font:700 12px Manrope;color:var(--ink-2);background:linear-gradient(var(--key-top),var(--key-bot));border:1px solid var(--key-edge);box-shadow:0 2px 0 var(--key-skirt)}
.kft-scenario-tabs [aria-selected=true],.kft-scenario-tabs .active,.kft-scenario-range-presets [aria-pressed=true],.kft-scenario-range-presets .active{transform:translateY(1px);box-shadow:inset 0 1px 3px #0006;color:var(--ink)}
.kft-scenario-derived{display:grid;gap:8px;padding:12px 14px;margin-top:12px;border-radius:12px;background:var(--well);border:1px solid var(--well-edge);box-shadow:inset 0 2px 8px #0006}
.kft-scenario-derived-total{font:600 30px Sora;letter-spacing:-.03em}
.kft-scenario-error{color:var(--bad);font-weight:700}

/* the real player edit menu (KFTScenario.openEditMenu): a raised panel of keys under the trigger */
.kft-player-edit-menu{position:fixed;z-index:160;display:grid;gap:4px;max-height:min(80vh,520px);overflow-y:auto;padding:8px;border-radius:14px;background:var(--raised);border:1px solid var(--hair-2);box-shadow:var(--shadow),0 0 0 1px #0003,inset 0 1px #ffffff0d;
  opacity:0;transform:scale(.97) translateY(-4px);transform-origin:var(--kft-menu-origin-x,50%) top;transition:opacity .16s cubic-bezier(.23,1,.32,1),transform .16s cubic-bezier(.23,1,.32,1)}
.kft-player-edit-menu.open{opacity:1;transform:none}
.kft-player-edit-menu>small{padding:2px 8px 4px;font:700 11px Manrope;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kft-player-edit-menu button{display:grid;gap:1px;width:100%;padding:9px 11px;border-radius:9px;cursor:pointer;text-align:left;color:var(--key-ink);
  background:linear-gradient(var(--key-top),var(--key-bot));border:1px solid var(--key-edge);border-top-color:var(--key-lip);box-shadow:inset 0 1px #ffffff0c,0 2px 0 var(--key-skirt);transition:transform .08s,box-shadow .08s}
.kft-player-edit-menu button:active{transform:translateY(2px);box-shadow:inset 0 1px 2px #0005,0 0 0 var(--key-skirt)}
.kft-player-edit-menu button b{font:700 13px Manrope}
.kft-player-edit-menu button span{font:600 11.5px Manrope;color:var(--muted)}
.kft-player-edit-menu button:focus-visible{outline:2px solid var(--info);outline-offset:2px}
.kft-player-edit-menu small:not(:first-child){margin-top:2px}
.kft-edit-menu-sep{height:1px;margin:4px 2px;background:var(--hair-2)}
@media (prefers-reduced-motion:reduce){.kft-player-edit-menu{transition:none}}

/* auth.js status notice */
.kft-auth-notice{position:fixed;z-index:210;left:50%;bottom:24px;translate:-50% 0;max-width:min(520px,calc(100vw - 32px));padding:11px 18px;border-radius:12px;background:var(--raised);border:1px solid var(--hair-2);box-shadow:var(--shadow);font:700 13px Manrope;color:var(--ink);animation:kft-rise .25s ease-out}
@keyframes kft-rise{from{opacity:0;translate:-50% 10px}}

/* The edit ripple card (lib/edit-ripple.js) brings its own fixed dark palette and pill buttons, partly inside
   @layer kft-studio; it is re-dressed here as an instrument panel with keys, in both themes. */
@layer kft-studio{
  html #kftEditRipple{background:var(--ground-2)!important;color:var(--ink)!important;border:1px solid var(--hair-2)!important;border-radius:12px!important;box-shadow:var(--shadow),0 2px 0 var(--well-edge)!important;padding:14px 16px!important;bottom:calc(18px + env(safe-area-inset-bottom))!important}
  html #kftEditRipple .kft-ripple-head strong{font:600 15px Sora!important;letter-spacing:-.01em}
  html #kftEditRipple li{color:var(--ink-2)!important;font-variant-numeric:tabular-nums}
  html #kftEditRipple li.muted{color:var(--muted)!important}
  html #kftEditRipple li .up{color:var(--good,#3fbf86)!important}
  html #kftEditRipple li .down{color:var(--bad,#e06a55)!important}
  html #kftEditRipple .kft-ripple-actions{gap:12px!important}
  html #kftEditRipple .kft-ripple-actions button{min-height:36px!important;padding:0 14px!important;border-radius:8px!important;font:700 13px Manrope!important;color:var(--key-ink)!important;background:linear-gradient(var(--key-top),var(--key-mid) 48%,var(--key-bot))!important;border:1px solid var(--key-edge)!important;border-top-color:var(--key-lip)!important;box-shadow:inset 0 1px #ffffff12,0 3px 0 var(--key-skirt),0 4px 6px #0004!important}
  html #kftEditRipple .kft-ripple-actions button.primary{color:var(--accent-ink)!important;background:linear-gradient(var(--acc-top),var(--acc-mid) 48%,var(--acc-bot))!important;border-color:var(--acc-edge)!important;border-top-color:var(--acc-lip)!important;box-shadow:inset 0 1px #fff4,0 3px 0 var(--acc-skirt),0 5px 8px #0005!important}
  html #kftEditRipple .kft-ripple-actions button:active{transform:translateY(2px);box-shadow:inset 0 1px 2px #0005,0 1px 0 var(--key-skirt)!important}
  html #kftEditRipple .kft-ripple-close{width:32px;height:32px;margin:-6px -6px 0 0;border-radius:7px!important;color:var(--muted)!important}
  html #kftEditRipple .kft-ripple-close:hover{background:var(--hair)!important;color:var(--ink)!important}
}

/* a held Apply looks held, and the footer says why (js/editor-hints.js) */
.kft-scenario-primary:disabled,.kft-scenario-secondary:disabled{opacity:.42;cursor:not-allowed;transform:none;filter:saturate(.4);box-shadow:inset 0 1px #ffffff10,0 1px 0 var(--key-skirt)}
.kft-scenario-modal>footer>.kft-apply-why{flex:1 1 180px;align-self:center;font:600 12.5px/1.35 Manrope;color:var(--warn,#e9b45c);text-align:right}
.kft-scenario-modal>footer>.kft-apply-why[hidden]{display:none}
@media (max-width:640px){html .kft-scenario-modal>footer>span.kft-apply-why:not([hidden]){display:block;flex-basis:100%;order:-1;text-align:left}}