/*
 * Shared foundation for the current Popolamus Figma file.
 * Screen geometry belongs in frame-specific files; this file only owns tokens,
 * viewport stability, asset sizing, focus behavior and native dialog layering.
 */
:root {
  --figma-app-width: 390px;
  --figma-nav-height: 82px;
  --figma-bg: #f4f6fb;
  --figma-surface: #ffffff;
  --figma-surface-blue: #eff6ff;
  --figma-text: #0f172a;
  --figma-muted: #64748b;
  --figma-muted-light: #94a3b8;
  --figma-primary: #2563eb;
  --figma-primary-strong: #155dfc;
  --figma-success: #00bc7d;
  --figma-warning: #ff6900;
  --figma-line: rgba(15, 23, 42, 0.08);
  --figma-overlay: rgba(0, 0, 0, 0.55);
  --figma-radius-card: 16px;
  --figma-radius-large: 20px;
  --figma-radius-sheet: 24px;
  --figma-shadow-control: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1);
  --figma-shadow-primary: 0 10px 7.5px rgba(43, 127, 255, 0.3), 0 4px 3px rgba(43, 127, 255, 0.3);
}

html {
  width: 100%;
  min-width: 320px;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  min-width: 0;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

#app {
  width: min(100%, var(--figma-app-width));
  min-width: 0;
  max-width: var(--figma-app-width);
}

.figma-view,
.figma-surface,
.figma-view *,
.figma-surface * {
  box-sizing: border-box;
}

.figma-view button,
.figma-view input,
.figma-view textarea,
.figma-view select,
.figma-surface button,
.figma-surface input,
.figma-surface textarea,
.figma-surface select {
  min-width: 0;
  font-family: "Manrope", "Segoe UI", system-ui, sans-serif;
}

.figma-view button,
.figma-surface button,
.tabbar button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.figma-view button:focus:not(:focus-visible),
.figma-surface button:focus:not(:focus-visible),
.tabbar button:focus:not(:focus-visible) {
  outline: none;
}

.figma-view button:focus-visible,
.figma-surface button:focus-visible,
.tabbar button:focus-visible {
  outline: 2px solid var(--figma-primary);
  outline-offset: 2px;
}

/* Figma segment controls express focus through the selected surface itself. */
.events-status-tabs button:focus,
.events-status-tabs button:focus-visible,
.overview-segmented button:focus,
.overview-segmented button:focus-visible,
.segmented button:focus,
.segmented button:focus-visible,
.tabbar button:focus,
.tabbar button:focus-visible {
  outline: none;
}

.figma-icon,
.figma-view img[src*="/assets/figma/"],
.figma-surface img[src*="/assets/figma/"] {
  display: block;
  flex: 0 0 auto;
  max-width: none;
  object-fit: contain;
}

dialog.figma-native-backdrop::backdrop {
  background: var(--figma-overlay);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

dialog.figma-bottom-sheet {
  max-width: 100vw;
  max-height: none;
  overflow: hidden;
  overscroll-behavior: contain;
}

body:has(dialog[open]) {
  overscroll-behavior: none;
}

@media (max-width: 390px) {
  dialog.figma-bottom-sheet {
    width: 100vw;
  }
}