/* Viewport-owned navigation. Popovers live outside the sticky header's blur. */
:root{--mobile-nav-height:0px;--app-viewport-top:0px;--app-viewport-height:100dvh}
.notification-menu{position:fixed;top:var(--notification-top,76px);right:max(14px,var(--screen-right));z-index:1200;display:flex;flex-direction:column;overflow:hidden;max-height:var(--notification-height,65dvh);padding:18px;width:min(390px,calc(100vw - var(--screen-left) - var(--screen-right) - 28px))}
.notification-menu[hidden]{display:none!important}
.notification-menu-heading,.notification-menu-actions,#notificationStatus,.notification-all{flex-shrink:0}
#notificationList{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-right:3px}
.notification-all{display:flex;align-items:center;min-height:48px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line);font-weight:700}
.plan-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.plan-grid .basal-plan-card{background:var(--aqua-soft);min-width:0}
.plan-grid .basal-plan-card strong{color:var(--aqua)}
.plan-grid .basal-plan-card em{font-size:13px;font-style:normal;font-weight:650}
.plan-grid .basal-plan-card .basal-plan-name{font-size:12px;line-height:1.4;margin-top:6px;overflow-wrap:anywhere}
.calculator-cgm-note{display:block;color:#086775;font-size:12px;line-height:1.45;margin-top:8px}
.report-other-formats{position:relative;align-self:center;font-size:13px}
.report-other-formats>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;padding:10px;color:var(--muted);font-weight:650}
.report-other-formats>summary:after{content:'⌄'}
.report-other-formats[open]>div{display:flex;flex-direction:column;gap:8px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:12px}
.report-other-formats a,.report-other-formats button{font-size:13px;min-height:44px}
@media(max-width:1100px){.plan-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:980px){
 :root{--mobile-nav-height:calc(76px + env(safe-area-inset-bottom,0px))}
 html{scroll-padding-bottom:calc(var(--mobile-nav-height,80px) + 20px)}
 .mobile-primary{display:flex;position:fixed;top:calc(var(--app-viewport-top) + var(--app-viewport-height) - var(--mobile-nav-height,80px));bottom:auto;left:0;right:0;width:100%;z-index:800;box-sizing:border-box;align-items:center;gap:4px;min-height:76px;padding:8px max(8px,var(--screen-right)) calc(8px + var(--screen-bottom)) max(8px,var(--screen-left));background:#fff;border-top:1px solid #d7e2ef;box-shadow:0 -4px 20px #16334d12}
 .mobile-primary a{position:relative;flex:1 1 0;min-width:0;min-height:52px;padding:5px 2px;gap:4px;border-radius:13px;color:#526980;background:transparent;line-height:1.15;text-align:center}
 .mobile-primary a[aria-current]{background:transparent;color:#174a8b}
 .mobile-primary a[aria-current]:not(.calculator-shortcut):after{content:'';position:absolute;bottom:1px;width:4px;height:4px;border-radius:50%;background:currentColor}
 .mobile-primary span{font-size:11px;font-weight:700}
 .mobile-primary .quick-nav-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
 .mobile-primary a.calculator-shortcut,.mobile-primary a.calculator-shortcut[aria-current]{flex:1.12 1 0;min-height:60px;background:#174a8b;color:#fff;border:1px solid #174a8b;border-radius:15px;box-shadow:0 3px 8px #174a8b24}
 .mobile-primary a.calculator-shortcut[aria-current]{outline:2px solid #89afe1;outline-offset:2px}
 .main-area{padding-bottom:calc(var(--mobile-nav-height,80px) + 24px)!important}
 .main-area>.page-wrap{padding-bottom:24px}
 .notification-menu{top:var(--notification-top,76px);max-height:var(--notification-height,65dvh)}
 .quick-fab{bottom:calc(var(--mobile-nav-height,80px) + 18px)}
 .quick-menu{bottom:calc(var(--mobile-nav-height,80px) + 82px)}
 .async-toast{bottom:calc(var(--mobile-nav-height,80px) + 18px)}
}
@media(max-width:600px){.plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.plan-grid .basal-plan-card{grid-column:1/-1}.report-actions .action-row{align-items:center;gap:8px}}
@media(max-width:360px){.mobile-primary{gap:2px;padding-left:5px;padding-right:5px}.mobile-primary span{font-size:10px}}