/* Fanmi Nou user-selectable view modes */
.view-toggle{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.view-toggle-label{font-size:11px;font-weight:800;color:var(--muted);padding:0 5px}
.view-btn{border:0;background:transparent;border-radius:8px;padding:7px 8px;font-size:11px;font-weight:800;color:var(--muted);cursor:pointer;min-height:32px}
.view-btn.active{background:var(--navy);color:#fff}.view-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Mobile can be selected on any screen. */
html.view-mobile body{max-width:520px;margin:0 auto;background:#f4f1eb;box-shadow:0 0 40px rgba(0,0,0,.08);min-height:100vh}
html.view-mobile .container{padding:14px}
html.view-mobile .public-hero,html.view-mobile .auth-layout,html.view-mobile .dashboard-grid,html.view-mobile .dashboard-lower,html.view-mobile .grid.two,html.view-mobile .onboarding-grid{grid-template-columns:1fr!important}
html.view-mobile .nav.app-nav,html.view-mobile .public-nav{align-items:center;flex-direction:row;gap:8px}
html.view-mobile .brand{font-size:23px}html.view-mobile .brand:before{width:29px;height:29px}
html.view-mobile .header-actions{gap:5px;flex-wrap:wrap;justify-content:flex-end}
html.view-mobile .header-actions .profile-pill{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.view-mobile .header-actions .signout-link{display:none}
html.view-mobile .view-toggle-label{display:none}
html.view-mobile .view-btn{padding:7px 6px}
html.view-mobile .section-nav,html.view-mobile .dashboard-family-nav{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
html.view-mobile .section-nav>* ,html.view-mobile .dashboard-family-nav>*{flex:0 0 auto;white-space:nowrap}
html.view-mobile .dashboard-hero{padding:25px 21px;border-radius:22px}
html.view-mobile .dashboard-hero h1{font-size:38px}
html.view-mobile .quick-actions{grid-template-columns:1fr!important}
html.view-mobile .quick-action{min-height:96px}
html.view-mobile .family-summary-head{flex-direction:column}
html.view-mobile .page-title{font-size:35px}
html.view-mobile .card{padding:18px}
html.view-mobile .photo-preview-grid{grid-template-columns:repeat(2,minmax(125px,1fr))!important;overflow-x:auto}
html.view-mobile .announcement-mini{grid-template-columns:52px 1fr}
html.view-mobile .announcement-mini>span:last-child{display:none}
html.view-mobile input,html.view-mobile select,html.view-mobile textarea,html.view-mobile button{font-size:16px}
html.view-mobile .btn{min-height:44px}

/* Desktop can be selected on smaller screens. It preserves a usable wide canvas rather than shrinking desktop cards into phone columns. */
html.view-desktop body{min-width:1040px;overflow-x:auto}
html.view-desktop .container{width:min(1180px,calc(100% - 48px));max-width:1180px;margin-inline:auto;padding-left:24px;padding-right:24px}
html.view-desktop .dashboard-grid,html.view-desktop .dashboard-lower{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)!important}
html.view-desktop .grid.two{grid-template-columns:repeat(2,minmax(0,1fr))!important}
html.view-desktop .quick-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important}
html.view-desktop .onboarding-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
html.view-desktop .photo-preview-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;overflow:visible!important}
html.view-desktop .header-actions .signout-link{display:inline-flex!important}
html.view-desktop .site-footer .lang-toggle{display:flex!important}