:root{--nav-bottom:max(12px,env(safe-area-inset-bottom));--shell-nav-clearance:100px}
.tosaa-navigation{position:fixed;z-index:40;bottom:var(--nav-bottom);left:50%;transform:translateX(-50%);width:calc(100% - 64px);max-width:500px;padding:5px;display:grid;grid-template-columns:repeat(var(--nav-count,5),minmax(0,1fr));isolation:isolate;border:1px solid #ffffff30;border-top-color:#ffffff50;border-radius:38px;background:#ffffff14;box-shadow:0 14px 34px #0005,inset 0 1px 0 #ffffff0a;font-family:inherit;color:#fff}
@supports(backdrop-filter:blur(1px)){.tosaa-navigation{background:linear-gradient(155deg,#ffffff24,#ffffff0a);backdrop-filter:blur(22px) saturate(1.65);-webkit-backdrop-filter:blur(22px) saturate(1.65)}}
.tosaa-navigation[hidden]{display:none!important}
.nav-selection{position:absolute;z-index:-1;left:5px;top:5px;bottom:5px;width:calc((100% - 10px)/var(--nav-count,5));border-radius:31px;background:#17171940;box-shadow:inset 0 1px 0 #ffffff08;transform:translateX(calc(var(--nav-index,0)*100%));transition:transform 280ms cubic-bezier(.16,1,.3,1);pointer-events:none}
.tosaa-navigation .nav-item{appearance:none;border:0;background:none;border-radius:30px;padding:6px 2px 7px;min-width:0;min-height:62px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;color:#d3d3d6;font:inherit;text-decoration:none;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tosaa-navigation .nav-item[aria-current=page]{color:#fff}
.tosaa-navigation .nav-item:hover{color:#fff;background:#ffffff08}
.tosaa-navigation .nav-item:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.tosaa-navigation .nav-icon{display:grid;place-items:center;height:26px;width:36px;border-radius:12px;transition:background 180ms,color 180ms}
.tosaa-navigation svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.tosaa-navigation .nav-label{font-size:10.5px;line-height:1.4;white-space:nowrap;font-weight:400}
.tosaa-navigation .nav-center .nav-icon{background:transparent;color:inherit;box-shadow:none}
.tosaa-navigation .nav-center svg{height:26px;width:26px}
@media(min-width:761px){.tosaa-navigation{max-width:500px;padding:6px;border-radius:40px}.tosaa-navigation .nav-item{min-height:66px;gap:5px}.tosaa-navigation .nav-label{font-size:12px}.nav-selection{top:6px;bottom:6px;left:6px;width:calc((100% - 12px)/var(--nav-count,5))}}
/* Landscape: spread the role’s destinations horizontally and reserve the outer corners. */
@media(orientation:landscape) and (min-width:568px){
 :root{--nav-bottom:max(10px,env(safe-area-inset-bottom))}
 .tosaa-navigation{width:calc(100% - 152px);max-width:960px;padding:3px;border-radius:30px}
 .tosaa-navigation .nav-item{min-height:44px;flex-direction:row;gap:8px;padding:3px 4px}
 .tosaa-navigation .nav-icon{width:26px;height:24px;flex:none}
 .tosaa-navigation svg,.tosaa-navigation .nav-center svg{width:23px;height:23px}
 .tosaa-navigation .nav-label{font-size:12px}
 .nav-selection{top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/var(--nav-count,5))}
}
@media(orientation:landscape) and (min-width:568px) and (max-height:599px){
 .tosaa-navigation{padding:2px}
 .tosaa-navigation .nav-item{gap:6px;padding:2px}
 .tosaa-navigation .nav-label{font-size:10.5px}
 .tosaa-navigation .nav-icon{width:22px;height:22px}
 .tosaa-navigation svg,.tosaa-navigation .nav-center svg{width:21px;height:21px}
 .nav-selection{top:2px;bottom:2px;left:2px;width:calc((100% - 4px)/var(--nav-count,5))}
}
@media(orientation:landscape) and (min-width:568px) and (max-width:700px){
 .tosaa-navigation .nav-item{flex-direction:column;gap:0;padding:2px 1px}
 .tosaa-navigation .nav-label{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.tosaa-navigation *{transition:none!important}}
@media(forced-colors:active){.tosaa-navigation{background:Canvas;border:1px solid CanvasText}.tosaa-navigation .nav-item[aria-current=page]{outline:2px solid Highlight;outline-offset:-4px}.nav-selection{display:none}}

/* Real background colors pass through the material; no painted rainbow or sampled portrait overlay. */
.tosaa-navigation:before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(125deg,#ffffff75,transparent 30%,#ffffff15 55%,#ffffff45 80%,#ffffff18);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none}
@media(max-width:360px){.tosaa-navigation{width:calc(100% - 32px)}.tosaa-navigation .nav-label{font-size:9.5px}}
@media(prefers-reduced-transparency:reduce){.tosaa-navigation{background:#242427;backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Owner reference: a soft press and short spring in both the capsule and icon. */
.tosaa-navigation{transform-origin:center;transition:transform 100ms ease-out}
.tosaa-navigation.is-pressing{transform:translateX(-50%) scale(.985,.97)}
.tosaa-navigation .nav-icon{transform-origin:center;transition:transform 100ms ease-out,background 180ms,color 180ms}
.tosaa-navigation .nav-item.is-pressing .nav-icon{transform:scale(.82)}
.tosaa-navigation .nav-selection{transition:transform 380ms cubic-bezier(.22,1.25,.4,1);background:#ffffff0c}
@media(prefers-reduced-motion:reduce){.tosaa-navigation,.tosaa-navigation *{transition:none!important;animation:none!important}}

/* Owner policy, 2026-09-25: all app scroll regions remain scrollable without visible bars. */
html,body,*,*::before,*::after{scrollbar-width:none!important;-ms-overflow-style:none!important}
*::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}

/* Preserve the owner-pinned portrait surface and white-label contrast. */
body[data-shell-page="actor"] .tosaa-navigation{background:linear-gradient(155deg,#35353859,#16161985)}
/* Owner 23 Oct 2026 night: focus moves to the page's content area after a page change (for screen readers); the area itself draws no ring, which
   showed as a white line under the header until the next tap. Buttons, links and fields keep their own focus ring. */
main#main[tabindex="-1"]:focus,main#main[tabindex="-1"]:focus-visible{outline:none}
/* item 208 (fix round 11 Nov 2026, owner accepted): a control reached with the keyboard scrolls clear of the bottom menu bar, as on the staff pages.
   Was: the page did not move, so a ballot choice ("เห็นด้วย") sat under the bar. */
html:has(.tosaa-navigation){scroll-padding-bottom:calc(var(--shell-nav-clearance) + 8px)}