/* Owns mobile top, document scrolling and overlay layers. No page typography. */
@media(max-width:720px){
 :root{--mobile-safe-top:env(safe-area-inset-top,0px);--mobile-frame-height:100dvh;--mobile-device-bottom:env(safe-area-inset-bottom,0px);--mobile-safe-bottom:clamp(0px,var(--mobile-device-bottom),34px);--mobile-nav-height:calc(76px + var(--mobile-safe-bottom));--mobile-top-height:calc(var(--mobile-safe-top) + 78px);--mobile-ink:#101722}
 html,body{position:relative;inset:auto;width:100%;height:var(--mobile-frame-height);min-height:0;overflow:hidden;overscroll-behavior:none;background:#101722}
 .app-shell,body main{height:100%;min-height:0;overflow:hidden;transform:none;filter:none;backdrop-filter:none;-webkit-backdrop-filter:none}
 body.field-mode #content>*{flex-shrink:0}
 body.field-mode #content{position:absolute;inset:0;height:100%;min-height:0;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;overflow-anchor:none;-webkit-overflow-scrolling:touch;padding-top:var(--mobile-top-height);padding-bottom:calc(var(--mobile-nav-height) + 16px);scroll-padding-top:var(--mobile-top-height);background:#fff}
 body[data-mobile-page="home"]{--mobile-top-height:calc(var(--mobile-safe-top) + 56px)}
 body[data-mobile-page="home"] #content{padding-top:0}
 body.field-mode .topbar{position:fixed;inset:0 0 auto;width:100%;height:var(--mobile-top-height);min-height:var(--mobile-top-height);padding:0;margin:0;border:0;border-radius:0;z-index:120;background:#101722;box-shadow:none;isolation:isolate;display:block;overflow:visible}
 body.field-mode .topbar,body.field-mode .topbar *{transform:none;filter:none;backdrop-filter:none;-webkit-backdrop-filter:none}
 body.field-mode .topbar .top-actions{position:static;display:contents;margin:0;padding:0}
 body.field-mode .topbar :is(#driftRefresh,#notificationBtn){position:absolute;display:grid;place-items:center;top:calc(var(--mobile-safe-top) + 26px);bottom:auto;left:auto;margin:0;width:44px;min-width:44px;max-width:44px;height:44px;min-height:44px;max-height:44px;background:transparent;border:0;box-shadow:none;color:#fff;z-index:2}
 body[data-mobile-page="inner"] .topbar :is(#driftRefresh,#notificationBtn){top:calc(var(--mobile-safe-top) + 22px)}
 body.field-mode .topbar #notificationBtn{right:14px}
 body.field-mode .topbar #driftRefresh{right:66px}
 body.field-mode .topbar .mobile-brand{display:none;position:absolute;top:calc(var(--mobile-safe-top) + 26px);left:16px;height:44px;min-height:44px;margin:0;padding:0}
 body[data-mobile-page="home"] .topbar .mobile-brand{display:flex;align-items:center}
 body[data-mobile-page="home"] .topbar{background:transparent}
 html:has(body[data-mobile-page="home"]),body[data-mobile-page="home"]{background-color:#06111d;background-image:url("./drift-home-selected-v1.png");background-position:center top;background-size:100% auto;background-repeat:no-repeat}
 .mobile-status-edge{position:fixed;top:0;left:0;right:0;height:11px;background:#101722;z-index:160;pointer-events:none;-webkit-background-clip:text;background-clip:text}
 body[data-mobile-page="home"] .mobile-status-edge{background:#06111d}
 body.mobile-overlay-active .mobile-status-edge,body.premium-menu-open .mobile-status-edge{background:#101722}
 body.mobile-overlay-active .topbar{background:#101722}
 body.mobile-overlay-active #content,body.premium-menu-open #content{overflow-y:hidden}
 body.field-mode #modalBackdrop:not([hidden]){position:fixed;inset:calc(var(--mobile-safe-top) + 12px) 0 var(--mobile-nav-height);padding:0;z-index:130;overflow:hidden;background:#101722;align-items:stretch}
 body.field-mode #modalBackdrop:not([hidden]) .modal{width:100%;max-width:none;height:100%;max-height:100%;min-height:0;margin:0;border-radius:0;box-sizing:border-box;overflow:auto;overscroll-behavior:none;overflow-anchor:none;backdrop-filter:none;-webkit-backdrop-filter:none;filter:none}
 body .bottom-nav{position:absolute;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:76px;align-items:center;border:0;box-sizing:border-box;width:100%;height:var(--mobile-nav-height);min-height:var(--mobile-nav-height);max-height:var(--mobile-nav-height);margin:0;padding:0 8px var(--mobile-safe-bottom);background:#101722;z-index:110;backdrop-filter:none;-webkit-backdrop-filter:none}
 body .bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:center;gap:4px;width:100%;height:60px;min-height:60px;margin:0;padding:3px;transform:none;box-sizing:border-box;line-height:1.3}
 body .bottom-nav button:not(.create-fab)>span{display:grid;place-items:center;height:29px;min-height:29px}
 body .bottom-nav button:not(.create-fab)>span svg{width:27px;height:27px}
 body .bottom-nav .create-fab{justify-self:center;width:50px;height:50px;min-height:50px;max-height:50px;margin:0;padding:0;transform:none;border-width:2px;font-size:30px;line-height:1}

 body.field-mode .premium-menu-overlay{position:fixed;inset:0;z-index:140}
 body.field-mode .premium-menu-panel{height:100%;padding-top:calc(var(--mobile-safe-top) + 12px);background:#101722;backdrop-filter:none;-webkit-backdrop-filter:none}
 body.field-mode .premium-menu-shade{backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(max-width:720px){
 body.field-mode .topbar .top-actions>*:not(#driftRefresh):not(#notificationBtn),body.field-mode .topbar>*:not(.mobile-brand):not(.top-actions){display:none}
 body.field-mode .topbar .mobile-brand>div{display:flex;align-items:center;gap:10px;white-space:nowrap}
 body.field-mode .topbar .mobile-brand img{width:44px;height:44px;object-fit:contain}
 body.field-mode .topbar .mobile-brand .brand-divider{display:block;width:1px;height:34px;background:#ffffff88}
 body.field-mode .topbar .mobile-brand strong{white-space:nowrap;line-height:1;color:#fff!important;-webkit-text-fill-color:#fff!important}
}

@media(max-width:720px){
 body[data-mobile-page="home"]:not(.mobile-overlay-active):not(.premium-menu-open) .topbar{top:calc(0px - var(--mobile-home-scroll,0px));transform:none}
 .template-grid .template-card{display:grid!important;grid-template-columns:48px minmax(0,1fr)!important;grid-template-rows:auto auto;gap:8px 12px!important;min-height:0!important;height:auto!important;align-items:start!important;padding:16px!important;position:relative!important;text-align:left}
 .template-grid .template-card .template-icon{grid-column:1;grid-row:1 / 3;width:48px;height:48px}
 .template-grid .template-card>span:nth-child(2){grid-column:2;grid-row:1;min-width:0}
 .template-grid .template-card>em{grid-column:2;grid-row:2;position:static!important;margin:0!important;align-self:start}
 .template-grid .template-card strong,.template-grid .template-card small{display:block;white-space:normal!important;overflow-wrap:anywhere;line-height:1.45}
}