/* Native app viewport is an opt-in capability. Without JS the complete SSR page scrolls. */
html.native-active-root{height:100%;overflow:hidden;overflow:clip;overscroll-behavior:none}
body.native-active{position:fixed;inset:auto 0 auto 0;top:var(--visible-top,0px);height:var(--app-viewport,100dvh);min-height:0;overflow:hidden;overscroll-behavior:none;display:grid;grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);background:var(--bg)}
.native-active>.platform-header{position:relative;min-height:0;padding-top:var(--safe-top,0px);z-index:40}.native-active .platform-header>.nav{height:52px;min-height:0;padding-block:2px;gap:8px;width:100%;padding-inline:max(12px,var(--safe-left,0px)) max(12px,var(--safe-right,0px))}.native-active .brand-name{display:none}.native-active .platform-header .brand{min-width:32px}.native-active .platform-app{min-width:0;flex:1}.native-active .platform-app .app-heading h1{font-size:15px}.native-active .native-back{flex:none}
.native-active>#main{min-width:0;position:relative;min-height:0;overflow:hidden;padding:0;display:flex;flex-direction:column}.native-active>#main>.container{position:relative;display:flex;flex-direction:column;width:100%;max-width:none;min-width:0;height:100%;min-height:0;padding:0;margin:0}.native-active>.site-footer{display:none}.native-active .viewport-guidance{display:none}.native-active .app-description{display:none}
.native-scaffold{container:native-app / inline-size;position:relative;display:flex!important;flex-direction:column;height:100%!important;min-height:0!important;max-height:100%;margin:0!important;overflow:hidden;flex:1;background:var(--bg)}.native-scaffold>:not(.native-deck):not(.native-nav):not(.native-loading):not(.sr-only){display:none!important}.native-deck{margin-left:var(--safe-left,0px);margin-right:var(--safe-right,0px);order:1;position:relative;flex:1;min-height:0;min-width:0;overflow:hidden}.native-panel,.native-screen{position:absolute;inset:0;min-width:0;min-height:0;max-height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scroll-padding:16px;padding:clamp(16px,2.5vw,32px);margin:0!important;border:0;border-radius:0;background:var(--bg);outline-offset:-3px!important}.native-panel[hidden],.native-screen[hidden],.native-nav[hidden],.native-deck[hidden]{display:none!important}.native-screen-host{overflow:hidden;padding:0}.native-stack{height:100%;min-height:0;position:relative;display:flex;flex-direction:column;overflow:hidden}.native-panel.native-constrained{padding:0;overflow:hidden;display:flex;flex-direction:column}.native-constrained>.editor-frame{flex:1;min-height:0}.native-panel>.field.full:has(textarea){display:flex;flex-direction:column;min-height:0}.native-panel textarea.text-area{max-height:55dvh;min-height:120px;resize:vertical}.native-panel .panel-title{margin-top:0}
.native-nav{order:2;display:flex;overflow-x:auto;flex-shrink:0;gap:4px;padding:6px max(10px,var(--safe-right,0px)) max(6px,var(--safe-bottom,0px)) max(10px,var(--safe-left,0px));border-top:1px solid var(--line);background:var(--surface);z-index:2}.native-nav button{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;min-height:52px;min-width:44px;padding:6px 10px;border:0;border-radius:14px;background:transparent;color:var(--muted);font:600 11px var(--font);cursor:pointer}.native-nav button svg{flex-shrink:0;padding:1px;width:24px;height:24px}.native-nav button[aria-selected=true]{color:var(--accent-strong);background:var(--accent-soft)}.native-nav button:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}.native-nav button:active{background:var(--surface-2)}
.native-reference{position:relative}.native-active .native-reference{display:none;position:absolute;inset:0;z-index:3;overflow:auto;overscroll-behavior:contain;scroll-padding:20px;background:var(--bg);padding:24px max(20px,var(--safe-right,0px)) max(24px,var(--safe-bottom,0px)) max(20px,var(--safe-left,0px))}.native-active .native-reference.native-reference-visible{display:block}.native-reference-visible>.tool-info{margin-top:0}.native-loading{position:absolute;inset:0;z-index:4;background:color-mix(in srgb,var(--surface) 90%,transparent);display:grid;place-content:center;font-weight:650;gap:12px}.native-loading:before{content:"";width:28px;height:28px;justify-self:center;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:native-spin .8s linear infinite}.native-loading[hidden]{display:none}.native-active .toast{bottom:calc(76px + var(--safe-bottom,0px));max-width:calc(100% - 32px)}
.native-scaffold:has(.native-nav[hidden]) .native-deck{margin-bottom:var(--safe-bottom,0px)}
@container native-app (min-width:800px){.native-deck{order:2;margin-bottom:var(--safe-bottom,0px)}.native-nav{order:1;position:absolute;inset:0 auto 0 0;width:calc(88px + var(--safe-left,0px));padding:14px 8px max(14px,var(--safe-bottom,0px)) calc(8px + var(--safe-left,0px));overflow-y:auto;border-top:0;border-right:1px solid var(--line);flex-direction:column;justify-content:start}.native-nav button{flex:0 0 auto;min-height:68px}.native-scaffold:has(.native-nav:not([hidden])) .native-deck{margin-left:calc(88px + var(--safe-left,0px))}.native-panel,.native-screen{padding-inline:max(28px,calc((100% - 1200px) / 2))}.native-panel.native-constrained,.native-panel.native-screen-host{padding:0}}
@media(max-height:480px){.native-active .platform-header>.nav{height:48px}.native-nav{padding-top:2px;padding-bottom:max(2px,var(--safe-bottom,0px))}.native-nav button{min-height:44px;flex-direction:row;font-size:11px;gap:6px}.native-panel,.native-screen{padding-block:12px}.native-active .toast{bottom:60px}.native-panel textarea.text-area{min-height:72px}}
@media(prefers-reduced-motion:reduce){.native-loading:before{animation:none}}
@keyframes native-spin{to{transform:rotate(360deg)}}
@media print{html.native-active-root,body.native-active{position:static;height:auto;overflow:visible;display:block}.native-active .native-reference{position:static;display:block;overflow:visible}.native-nav,.native-back{display:none!important}}
@media print{.native-scaffold,.native-deck,.native-panel,.native-screen,.native-stack{position:static;height:auto!important;max-height:none;overflow:visible}.native-active>#main,.native-active>#main>.container{height:auto;overflow:visible}}
/* Reserve usable editing space from actual keyboard geometry, not device identity. */
.native-active.ui-keyboard-on .native-panel textarea.text-area{height:clamp(120px,calc(var(--app-viewport,100dvh) - 200px),160px);min-height:120px;max-height:160px}.native-active.ui-keyboard-on .native-panel{scroll-padding:4px}.native-active.ui-keyboard-on .native-panel .field.full{margin-block:0 4px}.native-active.ui-keyboard-on .native-panel .field.full>label{margin-bottom:4px}.native-active.ui-keyboard-on .native-panel .btn-row{margin-top:4px}
@media(max-height:480px){.native-active.ui-keyboard-on .native-panel:not(.native-screen-host):not(.native-constrained){padding-block:4px}}

.native-info-active>.native-deck,.native-info-active>.native-nav{visibility:hidden}

/* Short usable heights retain useful editing space, with nonessential labels available to AT. */
.native-active.ui-keyboard-on .native-scaffold[data-native-compact=true] .native-panel:not(.native-screen-host):not(.native-constrained),.native-active.ui-keyboard-on .native-scaffold[data-native-compact=true] .native-screen{padding-block:4px}.native-active.ui-keyboard-on .native-scaffold[data-native-compact=true] .field.full>label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.native-scaffold[data-native-compact=true] .native-secondary{display:none}

/* A landscape rail keeps full-size icons and safe insets, even at keyboard-short heights. */
@container native-app (min-width:800px){.native-nav{padding-top:14px;padding-bottom:max(14px,var(--safe-bottom,0px))}.native-nav button{flex-direction:column}.native-scaffold[data-native-compact=true] .native-nav{padding-top:0;gap:0}.native-scaffold[data-native-compact=true] .native-nav button{min-height:44px;padding-block:8px}.native-scaffold[data-native-compact=true] .native-nav button span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}