/* Veyro design system — RC3.5.0.67
   Shared tokens and low-risk structural rules. Page-specific component styles
   remain in their own modules; this file centralizes scale, layers and controls. */
:root {
  --veyro-font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --veyro-text-xs: 12px;
  --veyro-text-sm: 13px;
  --veyro-text-md: 14px;
  --veyro-text-lg: 16px;
  --veyro-control-height-sm: 36px;
  --veyro-control-height: 42px;
  --veyro-control-height-lg: 48px;
  --veyro-radius-sm: 10px;
  --veyro-radius-md: 14px;
  --veyro-radius-lg: 20px;
  --veyro-space-1: 4px;
  --veyro-space-2: 8px;
  --veyro-space-3: 12px;
  --veyro-space-4: 16px;
  --veyro-space-5: 20px;
  --veyro-space-6: 24px;
  --veyro-space-8: 32px;
  --veyro-z-base: 1;
  --veyro-z-sticky: 80;
  --veyro-z-header: 100;
  --veyro-z-dropdown: 320;
  --veyro-z-tooltip: 420;
  --veyro-z-backdrop: 800;
  --veyro-z-drawer: 900;
  --veyro-z-modal: 1000;
  --veyro-z-command: 1100;
  --veyro-z-toast: 1200;
  --veyro-z-loader: 1300;
  --veyro-z-skip-link: 1400;
  --veyro-focus-ring: 0 0 0 3px rgba(115, 87, 255, .2);
}

html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--veyro-font-sans);
}

/* Keep native controls aligned across Chromium/WebKit/Firefox. */
.app-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea, button),
.super-admin-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea, button),
.super-login-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea, button),
.marketing-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea, button) {
  font: inherit;
}

.app-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select),
.super-admin-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select),
.super-login-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select),
.marketing-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select) {
  min-height: var(--veyro-control-height);
}

.app-page :where(button, a, input, select, textarea):focus-visible,
.super-admin-page :where(button, a, input, select, textarea):focus-visible,
.super-login-page :where(button, a, input, select, textarea):focus-visible,
.marketing-page :where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid rgba(115, 87, 255, .82);
  outline-offset: 2px;
  box-shadow: var(--veyro-focus-ring);
}

/* Shared overlay layer contract. The outer overlay owns the global layer;
   backdrop and dialog are ordered only inside that isolated layer. */
.app-command-backdrop,
.super-command-backdrop {
  z-index: var(--veyro-z-command);
}

.ibx-action-modal,
.ibx-media-viewer,
.ibx-transcript-viewer,
.plans-v7-modal,
.beta-feedback-backdrop {
  z-index: var(--veyro-z-modal);
}

.ibx-action-modal,
.ibx-media-viewer,
.ibx-transcript-viewer,
.plans-v7-modal {
  isolation: isolate;
}

.ibx-action-modal-backdrop,
.ibx-media-backdrop,
.ibx-transcript-backdrop,
.plans-v7-modal__backdrop {
  z-index: 0;
}

.ibx-action-dialog,
.ibx-media-dialog,
.ibx-transcript-dialog,
.plans-v7-modal__dialog,
.beta-feedback-panel {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.ibx-context-backdrop,
.context-backdrop {
  z-index: var(--veyro-z-backdrop);
}

/* Lock page scrolling only while the visible outer overlay is open. */
body:has(.plans-v7-modal:not([hidden])),
body:has(.ibx-action-modal:not([hidden])),
body:has(.ibx-media-viewer:not([hidden])),
body:has(.ibx-transcript-viewer:not([hidden])),
body:has(.beta-feedback-backdrop:not([hidden])) {
  overflow: hidden;
}

/* Stable scrollbar geometry prevents panels jumping as content changes. */
.app-sidebar-scroll,
.super-sidebar-scroll,
.inbox-live-list,
.ibx-live-list,
.super-content,
.app-content {
  scrollbar-gutter: stable;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  :root {
    --veyro-control-height: 44px;
    --veyro-control-height-lg: 50px;
  }
}

/* Keep icon-only controls usable on touch devices without changing compact
   desktop density. Browser QA considers targets below 28px unsafe. */
@media (pointer: coarse) {
  .app-page :where(button[aria-label],[role="button"][aria-label]),
  .super-admin-page :where(button[aria-label],[role="button"][aria-label]),
  .super-login-page :where(button[aria-label],[role="button"][aria-label]),
  .marketing-page :where(button[aria-label],[role="button"][aria-label]) {
    min-inline-size: 40px;
    min-block-size: 40px;
    touch-action: manipulation;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}