/* Switch the three-column studio to its touch workspace before the sidebars
   can exceed the viewport. This intentionally mirrors the phone layout. */
@media (max-width:820px){
  .site-header{height:auto;min-height:66px;padding:10px 15px;flex-wrap:wrap}
  .brand img{width:35px;height:35px}
  .site-header nav{order:3;width:100%;height:40px;justify-content:space-around;border-top:1px solid var(--line)}
  .site-header nav a{font-size:12px}
  .account-control .button{padding:0 10px;font-size:11px;min-height:35px}
  .hero{display:block;min-height:auto;padding:55px 22px}
  .hero h1{font-size:48px}
  .hero p{font-size:15px}
  .hero-art{display:none}
  .hero-actions{flex-direction:column}
  .feature-strip{margin:0 16px;grid-template-columns:1fr}
  .feature-strip div{border-right:0;border-bottom:1px solid var(--line)}
  .content-section{padding:55px 18px}
  .filters,.card-grid{grid-template-columns:1fr}
  .section-heading{align-items:flex-start}
  .section-heading h1,.section-heading h2{font-size:35px}
  .studio-view{height:calc(100vh - 117px)}
  .studio-topbar{height:auto;min-height:108px;align-items:flex-start;padding:12px;flex-direction:column}
  .studio-topbar>div:first-child,.title-input{width:100%}
  .toolbar{width:100%;overflow:auto;padding-bottom:2px}
  .toolbar .button{white-space:nowrap;padding:0 12px}
  .toolbar .danger-button{display:none}
  .studio-layout{height:calc(100% - 108px);display:block}
  .viewport-wrap{height:100%}
  .studio-panel{display:none;position:absolute;inset:auto 8px 8px;top:8px;z-index:25;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);max-height:calc(100% - 16px)}
  .studio-panel.open{display:block}
  .mobile-panel-close,.mobile-only{display:inline-flex}
  .viewport-toolbar{top:12px;max-width:calc(100% - 20px);overflow:auto;left:10px;transform:none;z-index:6}
  .viewport-info{max-width:calc(100% - 20px);overflow:auto;bottom:12px;font-size:9px;gap:11px}
  .viewport-info span:nth-child(3){display:none}
  .camera-menu{top:62px;transform:none;left:auto;right:12px}
  .detail-view{padding:18px}
  .detail-layout{display:block}
  .detail-viewer{min-height:390px;height:50vh}
  .detail-copy{padding:25px}
  .detail-copy h1{font-size:34px}
  .detail-stats{grid-template-columns:repeat(2,1fr)}
  .detail-stats div:nth-child(2){border-right:0}
  .detail-stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  footer{margin:20px 18px 0;display:block}
  footer nav{flex-wrap:wrap;margin:25px 0}
  footer small{display:block}
  .header-actions>.icon-button{display:none}
  .project-heading{display:block!important}
  .title-input{font-size:18px}
  .help-grid,.policy-grid{grid-template-columns:1fr}
  .plan-dialog form{padding:20px}
  .plan-fields{grid-template-columns:1fr 1fr}
  .plan-dialog .choice-card{margin-top:0}
}
.north-indicator{pointer-events:none}