/* Steel Axis v1.094 — Mobile Browser App + Zoom Controls */
:root{--sa-mobile-app-blue:#00a8ff;--sa-mobile-app-cyan:#8eeaff;--sa-mobile-app-green:#18e3a2;--sa-mobile-app-dark:#061521;--sa-app-zoom:1;--sa-tool-user-zoom:1}
html.sa-mobile-browser-app{overscroll-behavior:none;scroll-behavior:smooth}
html.sa-mobile-browser-app body{-webkit-tap-highlight-color:transparent}
.sa-mobile-app-dock{position:fixed;z-index:99999;left:max(10px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:6px;padding:7px;background:linear-gradient(180deg,rgba(9,27,44,.94),rgba(2,10,18,.96));border:1px solid rgba(142,234,255,.28);box-shadow:0 18px 42px rgba(0,0,0,.42),0 0 24px rgba(0,168,255,.13),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(14px);clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);direction:ltr;pointer-events:auto}
.sa-mobile-app-dock button,.sa-mobile-app-dock a{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(142,234,255,.22);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.018));color:#eaf9ff;text-decoration:none;border-radius:0;font:900 15px/1 system-ui;cursor:pointer;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
.sa-mobile-app-dock button:active,.sa-mobile-app-dock button:hover,.sa-mobile-app-dock a:hover{transform:translateY(-2px);border-color:rgba(142,234,255,.55);box-shadow:0 0 20px rgba(0,168,255,.18)}
.sa-mobile-app-dock .sa-install{width:auto;min-width:78px;padding:0 12px;background:linear-gradient(90deg,rgba(0,168,255,.78),rgba(24,227,162,.72));color:#06131f;font-weight:1000}
.sa-mobile-app-zoom-label{height:40px;min-width:54px;display:grid;place-items:center;color:#8eeaff;font:900 12px/1 system-ui;border:1px solid rgba(142,234,255,.16);padding:0 9px;background:rgba(5,16,27,.68);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
.sa-mobile-app-hint{position:fixed;z-index:99998;left:max(10px,env(safe-area-inset-left));bottom:calc(max(10px,env(safe-area-inset-bottom)) + 58px);max-width:min(330px,calc(100vw - 22px));padding:10px 12px;color:#dff8ff;background:rgba(5,17,29,.86);border:1px solid rgba(142,234,255,.20);box-shadow:0 12px 32px rgba(0,0,0,.34);font:800 12px/1.7 system-ui;backdrop-filter:blur(12px);clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);opacity:0;transform:translateY(8px);pointer-events:none;transition:.18s ease;direction:rtl;text-align:right}
.sa-mobile-app-hint.show{opacity:1;transform:translateY(0)}
html.sa-mobile-browser-app .sa-pwa-badge{position:fixed;z-index:99998;right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));font:900 11px/1 system-ui;color:#06131f;background:#8eeaff;padding:8px 10px;box-shadow:0 10px 26px rgba(0,0,0,.25);clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px)}
/* Ruler-specific: user zoom is applied to the inner ruler only */
html.sa-mobile-browser-ruler #stage{transform:scale(var(--sa-tool-user-zoom));transform-origin:center center;transition:transform .15s ease;will-change:transform}
html.sa-mobile-browser-ruler .controls{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 56px)!important}
html.sa-mobile-browser-ruler .mini{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 110px)!important}
html.sa-mobile-browser-ruler .sa-mobile-app-dock{right:auto;left:50%;transform:translateX(-50%)}
html.sa-mobile-browser-ruler .sa-mobile-app-hint{left:50%;transform:translate(-50%,8px);text-align:center}.sa-mobile-browser-ruler .sa-mobile-app-hint.show{transform:translate(-50%,0)}
/* Plate apps: use browser-like app zoom on the main shell while the dock stays usable */
html.sa-mobile-browser-plate body.sa-zoom-enabled .app-shell,
html.sa-mobile-browser-plate body.sa-zoom-enabled main,
html.sa-mobile-browser-plate body.sa-zoom-enabled .wrap{transform:scale(var(--sa-app-zoom));transform-origin:top center;transition:transform .15s ease}
html.sa-mobile-browser-plate .topbar{padding-bottom:2px}
html.sa-mobile-browser-plate .sa-mobile-app-dock{left:auto;right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom))}
html.sa-mobile-browser-plate .sa-mobile-app-hint{left:auto;right:max(10px,env(safe-area-inset-right));text-align:right}
@media(max-width:760px){.sa-mobile-app-dock{gap:5px;padding:6px}.sa-mobile-app-dock button,.sa-mobile-app-dock a{width:38px;height:38px;font-size:14px}.sa-mobile-app-dock .sa-install{min-width:68px;font-size:12px}.sa-mobile-app-zoom-label{height:38px;min-width:48px;font-size:11px}html.sa-mobile-browser-ruler .topbar{top:max(8px,env(safe-area-inset-top))!important}html.sa-mobile-browser-ruler .app{padding-bottom:132px!important}}
@media(orientation:landscape) and (max-height:560px){.sa-mobile-app-dock{bottom:6px}.sa-mobile-app-hint{display:none}html.sa-mobile-browser-ruler .controls{bottom:54px!important}}