/* The kit's screen pieces. Every colour comes from the app's theme: --kit-main (60% of a page), --kit-secondary
   (30%), --kit-accent (10%), and the text colour on each (--kit-on-*); shades are mixed from those only.
   Sizes, corners and type follow the Vavus AI website's pieces (vavusaccount components/ui, --radius 0.75rem).
   Motion (operator 9 Nov 2026): one set of timings and curves below; entrances ease out, on-screen moves ease in and
   out, exits are 20% shorter, nothing bounces, pop-ups grow from 0.95 out of their trigger and go back to it. */
:root { --kit-enter: 200ms; --kit-exit: 160ms; --kit-press: 100ms; --kit-stagger: 30ms; --kit-spin: 1s;
  --kit-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --kit-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --kit-ease-exit: cubic-bezier(0.55, 0, 1, 0.45);
  /* Fonts (brand standard, 9 Nov 2026): fonts.css serves them from the app itself. */
  --kit-font: 'Schibsted Grotesk', 'Inter', 'Noto Sans Arabic', 'Noto Sans Devanagari', 'Noto Sans KR', system-ui, sans-serif;
  --kit-mono: 'JetBrains Mono', 'Inter', ui-monospace, monospace; }
@keyframes kit-pop-in { from { opacity: 0; transform: scale(0.95); } }
@keyframes kit-pop-out { to { opacity: 0; transform: scale(0.95); } }
@keyframes kit-fade-in { from { opacity: 0; } }
@keyframes kit-fade-out { to { opacity: 0; } }
@keyframes kit-rise-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes kit-pulse { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kit-accent) 45%, transparent); }
  to { box-shadow: 0 0 0 10px color-mix(in srgb, var(--kit-accent) 0%, transparent); } }
.kit-page { margin: 0; min-height: 100vh; background: var(--kit-main); color: var(--kit-on-main);
  font-family: var(--kit-font); font-size: 14px; line-height: 20px; }
.kit-mono { font-family: var(--kit-mono); }
.kit-frame-header { display: flex; align-items: center; gap: 12px; padding: 16px 24px;
  background: var(--kit-secondary); color: var(--kit-on-secondary); }
.kit-frame-title { font-size: 18px; line-height: 28px; font-weight: 600; margin: 0; }
.kit-frame-body { max-width: 1024px; margin: 0 auto; padding: 24px; box-sizing: border-box; }
@media (min-width: 1024px) { .kit-frame-body { padding: 32px; } }
.kit-panel { background: var(--kit-secondary); color: var(--kit-on-secondary); border-radius: 12px; padding: 24px; }

.kit-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px;
  padding: 8px 20px; border-radius: 12px; border: 1px solid transparent; font: inherit; font-size: 14px;
  line-height: 20px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: transform var(--kit-press) var(--kit-ease-out), filter var(--kit-enter) var(--kit-ease-out); }
.kit-button--accent { background: var(--kit-accent); color: var(--kit-on-accent); }
.kit-button--secondary { background: var(--kit-secondary); color: var(--kit-on-secondary); }
.kit-button--plain { background: transparent; color: var(--kit-on-main);
  border-color: color-mix(in srgb, var(--kit-on-main) 20%, transparent); }
.kit-button--ghost { background: transparent; color: var(--kit-on-main); }
.kit-button--wide { width: 100%; }
.kit-button:hover { filter: brightness(0.95); }
.kit-button:active { transform: scale(0.97); }
.kit-button:disabled { opacity: 0.5; pointer-events: none; }
.kit-button:focus-visible, .kit-input:focus-visible, .kit-tab:focus-visible, .kit-icon-button:focus-visible {
  outline: 2px solid var(--kit-accent); outline-offset: 2px; }

.kit-field { display: grid; gap: 6px; }
.kit-label { font-size: 14px; line-height: 20px; font-weight: 500; }
.kit-input { display: flex; box-sizing: border-box; width: 100%; height: 44px; padding: 10px 14px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--kit-on-main) 25%, transparent); background: var(--kit-main);
  color: var(--kit-on-main); font: inherit; font-size: 16px; line-height: 24px; }
@media (min-width: 768px) { .kit-input { font-size: 14px; line-height: 20px; } }
.kit-input::placeholder { color: color-mix(in srgb, var(--kit-on-main) 55%, transparent); }
.kit-input:disabled { opacity: 0.5; cursor: not-allowed; }
.kit-input-wrap { position: relative; }
.kit-input-wrap .kit-input { padding-right: 44px; }
.kit-icon-button { position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; border: 0; border-radius: 8px;
  background: transparent; color: var(--kit-on-main); cursor: pointer; font: inherit; }
/* Two icons in one place: the new one comes in as the old one leaves, crossfading with scale and blur. */
.kit-swap { display: grid; place-items: center; }
.kit-swap > svg { grid-area: 1 / 1; width: 16px; height: 16px;
  transition: opacity var(--kit-enter) var(--kit-ease-out), transform var(--kit-enter) var(--kit-ease-out),
    filter var(--kit-enter) var(--kit-ease-out); }
.kit-swap > svg[data-off] { opacity: 0; transform: scale(0.6); filter: blur(4px); }
.kit-field-error { color: var(--kit-accent); font-size: 14px; line-height: 20px; margin: 0; }

.kit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kit-list-item { padding: 12px 16px; border-radius: 10px; animation: kit-rise-in var(--kit-enter) var(--kit-ease-out) both;
  animation-delay: calc(var(--kit-row, 0) * var(--kit-stagger)); }
.kit-list-item:hover { background: color-mix(in srgb, var(--kit-secondary) 60%, var(--kit-main)); }
.kit-list-empty { padding: 12px 16px; opacity: 0.7; }

.kit-backdrop { position: fixed; inset: 0; z-index: 50; background: color-mix(in srgb, var(--kit-on-main) 60%, transparent);
  animation: kit-fade-in var(--kit-enter) var(--kit-ease-out); }
.kit-backdrop.kit-leaving { animation: kit-fade-out var(--kit-exit) var(--kit-ease-exit) forwards; }
.kit-dialog { position: fixed; inset: 0; margin: auto; z-index: 50; box-sizing: border-box; height: fit-content;
  display: grid; gap: 16px; width: 100%; max-width: 512px; padding: 24px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--kit-on-main) 15%, transparent); background: var(--kit-main); color: var(--kit-on-main);
  transform-origin: var(--kit-origin, 50% 0); animation: kit-pop-in var(--kit-enter) var(--kit-ease-out); }
.kit-dialog.kit-leaving { animation: kit-pop-out var(--kit-exit) var(--kit-ease-exit) forwards; }
.kit-dialog-title { margin: 0; font-size: 18px; line-height: 28px; font-weight: 600; }
.kit-dialog-close { position: absolute; right: 16px; top: 16px; }

.kit-tabs { position: relative; display: inline-flex; align-items: center; height: 40px; padding: 4px; box-sizing: border-box;
  border-radius: 10px; background: var(--kit-secondary); color: var(--kit-on-secondary); }
/* One marker for the open tab, moved (not redrawn) from tab to tab: a mask over a full-width strip. */
.kit-tab-marker { position: absolute; inset: 4px; border-radius: 8px; background: var(--kit-main); pointer-events: none;
  clip-path: var(--kit-mask, inset(0 100% 0 0 round 8px)); transition: clip-path var(--kit-enter) var(--kit-ease-in-out); }
.kit-tab { position: relative; padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit;
  font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.kit-tab[aria-selected="true"] { color: var(--kit-on-main); }
.kit-tab-panel { margin-top: 8px; }

.kit-table-wrap { position: relative; width: 100%; overflow: auto; }
.kit-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.kit-table tr { border-bottom: 1px solid color-mix(in srgb, var(--kit-on-main) 15%, transparent); }
.kit-table th { height: 48px; padding: 0 16px; text-align: left; vertical-align: middle; font-weight: 500; }
.kit-table td { padding: 16px; vertical-align: middle; }

.kit-toast { position: fixed; right: 16px; bottom: 16px; z-index: 60; max-width: 420px; padding: 12px 16px; border-radius: 12px;
  border-left: 4px solid var(--kit-accent); background: var(--kit-secondary); color: var(--kit-on-secondary);
  animation: kit-rise-in var(--kit-enter) var(--kit-ease-out), kit-pulse calc(var(--kit-enter) * 3) var(--kit-ease-out) var(--kit-enter); }
.kit-toast.kit-leaving { animation: kit-fade-out var(--kit-exit) var(--kit-ease-exit) forwards; }
.kit-toast-title { margin: 0; font-weight: 600; }
.kit-toast-text { margin: 4px 0 0; }
.kit-link { color: var(--kit-accent); text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  [class*="kit-"], [class*="kit-"] > svg { animation-duration: 1ms !important; animation-delay: 0ms !important;
    transition-duration: 1ms !important; }
}

/* The logo (brand standard): VAVUS, the V in the accent; the product name centred under it in small capitals. */
.kit-logo { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1;
  font-family: var(--kit-font); color: var(--kit-on-main); --kit-logo-size: 30px; }
.kit-logo-word { font-size: var(--kit-logo-size); font-weight: 800; letter-spacing: 0.01em; }
.kit-logo-v { color: var(--kit-accent); }
.kit-logo-product { font-size: calc(var(--kit-logo-size) * 0.357); font-weight: 600; letter-spacing: 0.16em;
  margin-right: -0.16em; text-transform: uppercase; }

/* The player over a scene: pause or play, and replay from the start. */
.kit-player { position: absolute; top: 14px; right: 14px; z-index: 2; display: flex; gap: 2px; padding: 3px;
  border-radius: 9999px; background: color-mix(in srgb, var(--kit-secondary) 80%, transparent); backdrop-filter: blur(6px); }
.kit-player button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent;
  color: var(--kit-on-secondary); display: grid; place-items: center; cursor: pointer;
  transition: transform var(--kit-press) var(--kit-ease-out); }
.kit-player button:hover { background: color-mix(in srgb, var(--kit-on-secondary) 12%, transparent); }
.kit-player button:active { transform: scale(0.92); }
.kit-player button:focus-visible { outline: 2px solid var(--kit-accent); outline-offset: 1px; }
.kit-player svg { width: 14px; height: 14px; }

/* The site footer: links, the language picker, the copyright line with © and ® in the accent. */
.kit-footer { border-top: 1px solid var(--kit-line); padding: 14px 16px 22px; text-align: center; font-size: 12.5px;
  line-height: 1.6; color: var(--kit-quiet); }
.kit-footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; }
.kit-footer-links a { color: inherit; text-decoration: none; }
.kit-footer-links a:hover { text-decoration: underline; }
.kit-footer-row { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; align-items: center; margin-top: 10px; }
.kit-footer-mark { color: var(--kit-accent-text); }
.kit-footer-reg { font-size: 0.8em; vertical-align: 0.35em; margin-left: 1px; }
.kit-footer .kit-language { width: auto; height: auto; border: 0; padding: 0; background: transparent; color: inherit;
  font-size: inherit; cursor: pointer; }