/* Both applications keep their own styles and live state. The shared mode
   handle is painted once by their parent, above either surface. */
:root {
  --mode-header-start: max(12px, env(safe-area-inset-left));
  --mode-header-end: max(12px, env(safe-area-inset-right));
  --mode-header-gap: 8px;
  --mode-header-slot: calc(44px + var(--mode-header-gap));
}
@media (max-width: 360px) {
  :root {
    --mode-header-start: max(8px, env(safe-area-inset-left));
    --mode-header-end: max(8px, env(safe-area-inset-right));
    --mode-header-gap: 4px;
  }
}
.mode-embedded .mode-name {
  display: none;
}
.mode-embedded[data-mode-active="false"] *,
.mode-embedded[data-mode-active="false"] *::before,
.mode-embedded[data-mode-active="false"] *::after {
  animation-play-state: paused !important;
}
body.sonote-shell {
  --ui-header-height: calc(60px + env(safe-area-inset-top));
}
body.sonote-shell .topbar {
  height: var(--ui-header-height) !important;
  min-height: var(--ui-header-height) !important;
  padding-inline: var(--mode-header-start) var(--mode-header-end) !important;
}
body.sonote-shell .topbar-actions {
  gap: var(--mode-header-gap);
  flex-wrap: nowrap;
}
body.sonote-shell .mode-bar {
  top: calc(4px + env(safe-area-inset-top));
  left: 50%;
  width: 176px;
  max-width: calc(
    100vw - var(--mode-header-start) - var(--mode-header-end) -
      var(--mode-header-slot) - var(--mode-header-slot) -
      var(--mode-header-slot) - var(--mode-header-slot)
  );
}
body.sonote-shell .mode-tab {
  white-space: nowrap;
}