/* Shared shell regions: chrome owns the viewport; pages own only their content. */
.surface-page-actions {
    position: relative;
    z-index: var(--z-sticky, 10);
    flex: 0 0 auto;
    min-width: 0;
    padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    border-top: 1px solid var(--color-border, #e2e8f0);
    background: var(--surface-mobile-page, #fff);
}
.surface-page-actions .ombox-toolbar { margin: 0; padding: 0; border: 0; background: transparent; }
.surface-page-actions .ombox-toolbar-left:empty { display: none; }
.surface-page-actions .ombox-toolbar-right { display: flex; width: 100%; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.surface-page-actions .btn { min-height: 44px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
body.eye-protection .surface-page-actions { background: #faf8f3; border-color: #d9cbb8; color: #4a3c28; }
body.surface-theme-dark .surface-page-actions { background: #111827; border-color: #374151; color: #f3f4f6; }
body[data-shell-preview="false"] .surface-mobile-canvas,
body[data-shell-preview="false"] .surface-tablet-canvas {
    height: var(--ombox-visual-viewport-height, 100dvh);
    min-height: 0;
    padding: 0;
    background: transparent;
}
body[data-shell-preview="false"] .surface-mobile-device-frame,
body[data-shell-preview="false"] .surface-tablet-frame {
    box-sizing: border-box;
    width: 100%; height: 100%; min-height: 0;
    padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent;
}
body[data-shell-preview="false"] .surface-mobile-shell,
body[data-shell-preview="false"] .surface-tablet-shell { border-radius: 0; clip-path: none; }
body[data-shell-preview="false"] .surface-tablet-camera { display: none; }
.surface-tablet-shell { min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
.surface-mobile-main, .surface-tablet-main { min-height: 0; scroll-padding-block: 16px; }
[data-shell-content] > .ombox-page-content-slot { min-width: 0; min-height: 100%; }
/* Content supplied by templates must not establish a second full-page scroller. */
[data-shell-content] > .ombox-page-content-slot > .ombox-page-content { height: auto; min-height: 0; overflow: visible; }
.surface-mobile-footer { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
.surface-tablet-header { padding-top: max(10px, env(safe-area-inset-top)); padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
.surface-tablet-brand { overflow: hidden; }
.surface-tablet-brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.surface-tablet-account, .surface-tablet-menu-toggle { min-height: 44px; }
.surface-tablet-header.is-navigation-overflow { grid-template-columns: minmax(0, 1fr) auto; }
.surface-tablet-header.is-navigation-overflow .surface-tablet-navigation { display: none; }
.surface-tablet-header.is-navigation-overflow .surface-tablet-menu-toggle { display: inline-flex; }
body.is-keyboard-open .surface-mobile-footer { display: none; }
body[data-shell-scroll="document"].surface-standalone-shell { overflow-y: auto; }
body[data-shell-scroll="document"] .surface-mobile-canvas,
body[data-shell-scroll="document"] .surface-tablet-canvas { height: auto; min-height: 100dvh; }
body[data-shell-scroll="document"] .surface-mobile-device-frame,
body[data-shell-scroll="document"] .surface-tablet-frame,
body[data-shell-scroll="document"] .surface-mobile-shell,
body[data-shell-scroll="document"] .surface-tablet-shell { height: auto; overflow: visible; }
body[data-shell-scroll="document"] [data-shell-content] { overflow: visible; }
@media (max-width: 360px) {
    .surface-mobile-header { gap: 2px; padding-inline: 4px; }
    .surface-mobile-header .surface-mobile-theme-toggle { display: none; }
    .surface-mobile-header:has(.surface-mobile-header-menu) { grid-template-columns: 44px minmax(0, 1fr) 44px 44px; }
}
/* Program mobile uses the same regions inside module-layout, without PC offsets. */
body.shell-variant-mobile:not(.surface-standalone-shell) { height: var(--ombox-visual-viewport-height, 100dvh); min-height: 0; overflow: hidden; }
body.shell-variant-mobile:not(.surface-standalone-shell) > .container { display: flex; flex: 1 1 auto; width: 100%; max-width: none; height: 100%; min-height: 0; margin: 0; padding: 0; overflow: hidden; }
body.shell-variant-mobile:not(.surface-standalone-shell) > .container > main.content { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; overflow: hidden; }
body.shell-variant-mobile:not(.surface-standalone-shell) .ombox-mobile-surface-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: 100%; height: 100%; min-height: 0; border-radius: 0; clip-path: none; overflow: hidden; }
body.shell-variant-mobile:not(.surface-standalone-shell) .ombox-mobile-surface-content { min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scroll-padding-block: 16px; }
body.shell-variant-mobile:not(.surface-standalone-shell) .ombox-mobile-surface-content > .ombox-page-content { height: auto; overflow: visible; }
body.shell-variant-mobile.shell-scroll-document:not(.surface-standalone-shell),
body.shell-variant-mobile.shell-scroll-document:not(.surface-standalone-shell) > .container,
body.shell-variant-mobile.shell-scroll-document:not(.surface-standalone-shell) > .container > main.content,
body.shell-variant-mobile.shell-scroll-document:not(.surface-standalone-shell) .ombox-mobile-surface-shell { height: auto; min-height: 100dvh; overflow: visible; }
body.shell-variant-mobile.shell-scroll-document .ombox-mobile-surface-content { overflow: visible; }
.surface-page-header-actions { min-width: 0; }
.surface-page-header-actions > .ombox-dropdown > .btn { min-height: 44px; padding-inline: 8px; white-space: nowrap; }
.surface-page-header-actions .ombox-dropdown-menu > :is(a, button) { min-height: 44px; }
.ombox-mobile-surface-header { position: relative; z-index: var(--z-sticky, 10); display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 58px; padding: calc(7px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 7px max(12px, env(safe-area-inset-left)); border-bottom: 1px solid var(--color-border, #e2e8f0); background: var(--color-white, #fff); }
.ombox-mobile-surface-brand { min-width: 0; color: var(--text-primary, #172033); text-align: center; text-decoration: none; }
.ombox-mobile-surface-brand strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.ombox-mobile-surface-header-action { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--text-primary, #172033); text-decoration: none; }
.ombox-mobile-surface-content { padding: 16px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left)); }
.ombox-mobile-surface-footer { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border, #e2e8f0); background: var(--color-white, #fff); }
.ombox-mobile-surface-footer-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 48px; color: var(--text-secondary, #64748b); text-decoration: none; font-size: 12px; }
.ombox-mobile-surface-footer-item.is-active { color: var(--bs-primary, #0d6efd); }
.ombox-mobile-surface-menu-overlay { position: absolute; z-index: 1040; inset: 0; background: rgba(15, 23, 42, .38); }
.ombox-mobile-surface-menu-drawer { position: absolute; z-index: 1050; inset: 0 auto 0 0; width: min(84%, 340px); overflow: auto; background: var(--color-white, #fff); }
.ombox-mobile-surface-menu-drawer[hidden], .ombox-mobile-surface-menu-overlay[hidden] { display: none; }
.ombox-mobile-surface-menu-head { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 8px 16px; border-bottom: 1px solid var(--color-border, #e2e8f0); }
.ombox-mobile-surface-menu-head button { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: inherit; }
.ombox-mobile-surface-menu-content { padding: 12px; }
.ombox-mobile-surface-menu-content a { display: flex; align-items: center; min-height: 44px; }
body.eye-protection .ombox-mobile-surface-header, body.eye-protection .ombox-mobile-surface-footer, body.eye-protection .ombox-mobile-surface-menu-drawer { background: #faf8f3; color: #4a3c28; border-color: #d9cbb8; }
body.is-keyboard-open .ombox-mobile-surface-footer { display: none; }

/* A long page title yields space to navbar actions; sidebar dimensions stay unchanged. */
@media (min-width: 768px) {
    body.ombox-shell > nav.navbar .navbar-container { gap: 16px; }
    body.ombox-shell > nav.navbar .navbar-left {
        flex: 1 1 0 !important;
        min-width: 0;
    }
    body.ombox-shell > nav.navbar .navbar-page-left {
        flex: 1 1 auto;
        min-width: 0;
    }
    body.ombox-shell > nav.navbar .navbar-page-heading {
        min-width: 0;
        max-width: 100%;
    }
    body.ombox-shell > nav.navbar .navbar-page-heading > :is(strong, small) {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body.ombox-shell > nav.navbar .navbar-right {
        flex: 0 0 auto !important;
        min-width: 0;
    }
}
/* Tablet document mode is opt-in: release the desktop viewport lock as a unit. */
html:has(> body.shell-variant-tablet.shell-scroll-document:not(.surface-standalone-shell)) {
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
}
body.shell-variant-tablet.shell-scroll-document:not(.surface-standalone-shell) {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
}
body.shell-variant-tablet.shell-scroll-document:not(.surface-standalone-shell) > .container {
    flex: 1 0 auto;
    height: auto;
    min-height: 0;
    overflow: visible;
}
body.shell-variant-tablet.shell-scroll-document:not(.surface-standalone-shell) > .container > main.content {
    height: auto;
    min-height: 0;
    overflow: visible !important;
}
body.shell-variant-tablet.shell-scroll-document:not(.surface-standalone-shell) > .ombox-page-footer,
body.shell-variant-tablet.shell-scroll-document:not(.surface-standalone-shell) > .surface-page-actions {
    position: relative;
    inset-block: auto;
    flex: 0 0 auto;
}