/* Manual view preference also constrains desktop windows to a usable phone canvas. */
html[data-view="mobile"] body{max-width:460px;margin-inline:auto;min-width:0;box-shadow:0 0 0 1px #303945}
html[data-view="mobile"] .overlay{left:50%;right:auto;width:min(100%,460px);transform:translateX(-50%)}
html[data-view="mobile"] .site-drawer,html[data-view="mobile"] .admin-body .sidebar{left:max(0px,calc((100vw - 460px)/2));max-width:min(86vw,360px)}
html[data-view="desktop"],html[data-view="desktop"] body{min-width:1280px;overflow-x:auto}
.view-mode-controls{display:grid;gap:10px;padding:20px 22px;border-top:1px solid var(--line)}
.view-mode-controls .btn{width:100%;font-size:15px;min-height:46px}
.view-mode-controls small{font-size:12px;color:var(--muted);line-height:1.6}
.sidebar-bottom .view-mode-controls{padding:18px 0 0;margin-top:8px}
.member-view-controls{width:min(420px,calc(100% - 32px));margin:0 auto 28px;border:1px solid var(--line);border-radius:16px}
/* Mobile cover returns to full width, with the title and actions underneath. */
@media(max-width:640px){
  .hero{padding:24px 0 28px}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .hero-brand-visual{grid-row:1;width:100%;max-width:420px;aspect-ratio:1;margin:0 auto;border-radius:22px;justify-self:center}
  .hero-brand-visual img{width:100%;height:100%;object-fit:contain}
  .hero-copy{grid-row:2;width:100%}
  .hero h1{font-size:clamp(30px,8vw,40px);line-height:1.28;margin:12px 0 18px}
  .hero .eyebrow{font-size:12px;letter-spacing:.09em}
  .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
  .hero-actions .btn{font-size:15px;min-height:48px;padding:12px}
}
html[data-view="mobile"] .site-drawer:not(.open){visibility:hidden;pointer-events:none}
html[data-view="mobile"] .admin-body .sidebar:not(.mobile-open){visibility:hidden!important;pointer-events:none}