/* SYSTEM Web App adaptation. Insets have one owner per edge; auth is unchanged. */
:root {
  --bsc-safe-top: env(safe-area-inset-top, 0px);
  --bsc-safe-right: env(safe-area-inset-right, 0px);
  --bsc-safe-bottom: env(safe-area-inset-bottom, 0px);
  --bsc-safe-left: env(safe-area-inset-left, 0px);
}
html { scroll-padding-block: calc(112px + var(--bsc-safe-top)) calc(104px + var(--bsc-safe-bottom)); }
:where(input, textarea, select, [contenteditable="true"]) { scroll-margin-block: 104px 32px; }
.site-header { padding-top: var(--bsc-safe-top); }
.wrap { --bsc-public-gutter: max(40px, var(--bsc-safe-left), var(--bsc-safe-right)); width: min(1280px, calc(100% - var(--bsc-public-gutter) * 2)); }
.footer { padding-bottom: calc(36px + var(--bsc-safe-bottom)); }
.portal { min-height: 100svh; min-height: var(--bsc-viewport-height, 100dvh); }
.portal-main { padding-right: max(40px, var(--bsc-safe-right)); padding-bottom: calc(32px + var(--bsc-safe-bottom)); }
.portal-top { padding-top: calc(12px + var(--bsc-safe-top)); }
.sidebar {
  height: var(--bsc-viewport-height, 100dvh);
  padding-top: calc(24px + var(--bsc-safe-top));
  padding-left: max(18px, var(--bsc-safe-left));
  padding-bottom: calc(20px + var(--bsc-safe-bottom));
}
dialog {
  max-height: calc(var(--bsc-viewport-height, 100dvh) - 48px - var(--bsc-safe-top) - var(--bsc-safe-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.bsc-foundation-dialog, .foundation-account-dialog {
  max-height: calc(var(--bsc-viewport-height, 100dvh) - 32px - var(--bsc-safe-top) - var(--bsc-safe-bottom));
  overflow-y: auto;
}
#toast { bottom: calc(28px + var(--bsc-safe-bottom)); }
@media (max-width: 1179px) {
  .portal-main { padding-left: max(32px, var(--bsc-safe-left)); padding-right: max(32px, var(--bsc-safe-right)); }
  .portal-top { padding-left: max(32px, var(--bsc-safe-left)); padding-right: max(32px, var(--bsc-safe-right)); }
  .system-drawer-close { top: calc(18px + var(--bsc-safe-top)); }
  .console-scrim.visible { height: 100dvh; }
}
@media (max-width: 639px) {
  html { scroll-padding-top: calc(88px + var(--bsc-safe-top)); }
  .wrap { --bsc-public-gutter: max(20px, var(--bsc-safe-left), var(--bsc-safe-right)); width: calc(100% - var(--bsc-public-gutter) * 2); }
  .footer { padding-bottom: calc(28px + var(--bsc-safe-bottom)); }
  .portal-main { padding-left: max(20px, var(--bsc-safe-left)); padding-right: max(20px, var(--bsc-safe-right)); padding-bottom: calc(28px + var(--bsc-safe-bottom)); }
  .portal-top { padding-top: calc(10px + var(--bsc-safe-top)); padding-left: max(16px, var(--bsc-safe-left)); padding-right: max(16px, var(--bsc-safe-right)); }
  .system-bottom-nav { padding-left: max(10px, var(--bsc-safe-left)); padding-right: max(10px, var(--bsc-safe-right)); }
  dialog { max-height: calc(var(--bsc-viewport-height, 100dvh) - 24px - var(--bsc-safe-top) - var(--bsc-safe-bottom)); }
  :root[data-bsc-keyboard="open"] .system-bottom-nav { display: none; }
  :root[data-bsc-keyboard="open"] .portal:has(.system-bottom-nav) .portal-main { padding-bottom: calc(28px + var(--bsc-safe-bottom)); }
  :root[data-bsc-keyboard="open"] body:has(.system-bottom-nav) #toast { bottom: calc(20px + var(--bsc-safe-bottom)); }
}
@media (max-width: 374px) {
  .portal-main { padding-left: max(16px, var(--bsc-safe-left)); padding-right: max(16px, var(--bsc-safe-right)); }
  .portal-top { padding-left: max(10px, var(--bsc-safe-left)); padding-right: max(10px, var(--bsc-safe-right)); }
}