/* Loaded last: mobile composition for the existing viewer and dialogs. */
.mobile-only,.mobile-sections,.mobile-panel{display:none}

@media(max-width:900px){
  html:has(dialog[open]){overflow:hidden}
  .button{min-width:0;min-height:44px;height:auto;padding:11px 12px;font-size:13px;line-height:1.4;white-space:normal}
  .icon-button{min-width:44px;min-height:44px;flex-shrink:0}
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{font-size:16px!important;min-width:0;max-width:100%}
  input[type=range]{min-height:44px;touch-action:pan-y}
  .header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 8px;height:auto;min-height:68px;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left))}
  .header .brand{grid-column:1;grid-row:1;min-width:0;font-size:16px;gap:8px}
  .brand .beta{display:none}.brand-mark{width:34px;height:34px}
  .header #mobile-menu-toggle{display:inline-flex;grid-column:2;grid-row:1;gap:7px;font-size:13px;padding:10px 12px}
  .header:not(:has(#account-nav:not([hidden]))) #mobile-menu-toggle{display:none}
  .header #account-nav{display:none;grid-column:1/-1;grid-row:2;width:100%;grid-template-columns:minmax(0,1fr) auto;gap:12px 8px}
  .header.mobile-menu-open #account-nav{display:grid}
  .header .account-actions{display:grid;grid-column:1/-1;grid-row:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-top:4px}
  .header .account-actions>.button{min-height:48px;height:auto;width:100%;font-size:13px;padding:10px;line-height:1.4}
  .header .account-label{display:flex;grid-column:1;grid-row:2;width:100%;max-width:none;min-width:0;margin:0;gap:10px}
  .header #account-name{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .header #logout{grid-column:2;grid-row:2;width:auto;height:44px;gap:8px;padding:0 12px;border:1px solid var(--line);font-size:12px}
  #logout .mobile-only{display:inline}
  .header .public-header{display:grid;grid-column:1/-1;grid-row:2;grid-template-columns:minmax(0,1fr) 76px;width:100%;gap:8px;margin:0}
  .header .public-header .button{font-size:12px;padding:10px;min-height:48px}
  .workspace{display:flex;flex-direction:column;height:auto;min-height:0}
  .workspace>.viewport{width:100%;height:clamp(320px,58svh,620px);min-height:320px;flex-shrink:0;scroll-margin-top:0}
  .viewport .canvas-host{inset:0}
  .viewport:fullscreen{height:100dvh;min-height:0}
  .view-heading{top:16px;left:max(16px,env(safe-area-inset-left));gap:7px;max-width:calc(100% - 84px)}
  .view-heading .eyebrow{font-size:8px}.view-name{font-size:12px;flex-wrap:wrap}
  .fullscreen{top:12px;right:max(12px,env(safe-area-inset-right));width:44px;height:44px;background:#fffffff0}
  .zoom-tools{right:max(12px,env(safe-area-inset-right));top:auto;bottom:92px}
  .zoom-tools .icon-button{width:44px;height:44px}
  .viewport>.views{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));transform:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:5px;white-space:normal}
  .viewport>.views button{width:100%;min-width:0;height:52px;padding:5px 2px;flex-direction:column;gap:4px;font-size:11px}
  .views .mobile-only{display:inline}.views .toolbar-divider,.viewport-footer{display:none}
  .sidebar{display:block;width:100%;padding:0 16px max(24px,env(safe-area-inset-bottom));border-left:0;border-top:1px solid var(--line);overflow:visible}
  .mobile-sections{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;position:sticky;top:0;z-index:8;background:#fff;padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:20px}
  .mobile-sections button{min-height:46px;min-width:0;padding:10px 3px;font-size:12px;line-height:1.35;border:1px solid transparent;border-radius:8px;background:var(--soft);color:#526358}
  .mobile-sections button[aria-selected=true]{background:var(--green);color:#fff;border-color:var(--green);font-weight:600}
  .mobile-panel{display:block;min-width:0;padding-bottom:12px}
  .mobile-panel .sidebar-section{margin:22px 0 0;padding:20px 0 0;border:0;border-top:1px solid var(--line)}
  .mobile-panel>.sidebar-section:first-child{margin-top:0;padding-top:0;border-top:0}
  .mobile-panel .sidebar-section h3{font-size:14px;margin-bottom:12px;color:var(--ink)}
  .mobile-panel .button{font-size:13px;min-height:46px;height:auto;line-height:1.4;padding:11px 12px}
  .mobile-panel .toggle-row{font-size:13px;min-height:48px;height:auto;padding:10px 0;color:#526358;gap:14px}
  .mobile-panel .toggle-row input{width:44px;height:44px}
  .mobile-panel .toggle-row:has(input:disabled){opacity:.6}
  .mobile-panel .control-hint,.mobile-panel .touch-hint,.mobile-panel .import-note p{font-size:12px;line-height:1.65}
  .mobile-panel .navigation>div{display:none}.mobile-panel .touch-hint{display:block;color:#617166}
  .mobile-panel .import-note{margin:20px 0 0;padding:8px 12px}
  .mobile-panel .import-note summary{min-height:44px;font-size:12px}
  .mobile-panel .private-note{padding-top:20px;margin:0}.mobile-panel .private-note p{font-size:12px}
  .mobile-panel .sidebar-heading{margin-bottom:16px}.mobile-panel .model-preview{display:grid}
  .mobile-panel .model-card strong{font-size:15px}.mobile-panel .model-card span,.mobile-panel .loaded{font-size:12px}
  .mobile-panel .model-details dt,.mobile-panel .model-details dd{font-size:13px}
  .mobile-panel .panel-area-info dd{font-size:20px}.mobile-panel .dimensions dd{font-size:17px;white-space:normal}
  .mobile-panel .dimensions>span,.mobile-panel .panel-area-info span{font-size:12px}
  .mobile-panel .components-open,.mobile-panel .overall-open{margin-top:0}
  #mobile-panel-project .components-open{margin-top:24px}
  .mobile-panel .detail-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .mobile-panel .detail-controls .button{margin:0}
  #manage-access,#manage-textures,#texture-summary{grid-column:1/-1}
  .mobile-panel .animation-buttons{gap:8px}
  .mobile-panel .animation-controls>label,.mobile-panel .explode-label{font-size:13px}
  .mobile-panel .assembly-controls>label{font-size:13px}
  .panel-selection-tools,.block-selection-tools{left:12px;right:12px;bottom:88px;transform:none;width:auto;max-width:none;padding:10px;margin:0;gap:8px}
  .panel-selection-tools>.control-hint{display:block;font-size:12px}
  .panel-selection-tools .selection-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px}
  .selection-actions>span{grid-column:1/-1;text-align:center}
  .panel-selection-tools>.button{width:100%}
  .block-selection-tools{display:grid;grid-template-columns:1fr 1fr}
  .block-selection-tools>span{grid-column:1/-1;max-width:none;overflow-wrap:anywhere}
  .panel-picking .zoom-tools,.block-picking .zoom-tools{display:none}

  /* Library: a clear primary action and evenly sized secondary actions. */
  .library-page{padding:26px 16px;min-height:calc(100svh - 68px)}
  #phone-open{display:none}.library-intro h1{font-size:27px}
  .library-toolbar{flex-wrap:wrap;gap:8px 12px;padding:20px 0 14px}
  .search-field{flex-basis:100%;max-width:none;height:46px}
  .library-storage{margin-left:0;flex:1;font-size:12px;line-height:1.5}
  .library-toolbar .text-button{min-height:44px;font-size:12px}
  .card-bottom{padding:0 14px 14px;display:block}
  .card-bottom>span{display:block;margin-bottom:12px;font-size:11px}
  .card-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:8px;margin:0}
  .card-actions>.button{width:100%;height:auto;min-height:44px;font-size:12px}
  .card-actions>.button:first-child{grid-column:1/-1;background:var(--green);color:#fff}
  .card-actions>.icon-button{width:100%;height:44px;border:1px solid var(--line)}
  .auth-tabs button,.auth-switch button{min-height:44px}
  .admin-heading{align-items:flex-start;gap:12px}.admin-heading>div{min-width:0}.admin-heading h1{font-size:24px}
  .admin-pagination{gap:8px}.admin-metric{min-width:0}.admin-metric strong{overflow-wrap:anywhere}

  /* Shared mobile dialog rules, including safe areas and long model names. */
  .app-dialog{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:20px 16px 16px;border-radius:14px}
  .app-dialog h2{font-size:22px;overflow-wrap:anywhere}
  .app-dialog:has(.dialog-close)>h2{padding-right:32px}
  .dialog-close{top:10px;right:10px}
  .app-dialog>.dialog-close{position:sticky;float:right;top:0;right:auto;margin:-8px -6px 0 4px;background:white;z-index:3}
  .app-dialog>.eyebrow{display:block;padding-right:36px;line-height:1.5}
  .dialog-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .dialog-actions .button{width:100%;min-height:46px}
  .app-dialog .control-hint{font-size:12px}
  .access-footer{gap:12px;padding-top:16px;padding-bottom:0;position:static}
  .access-footer .button{flex:1;min-height:46px}.access-footer>span{font-size:12px}
  #group-form{display:flex;flex-direction:column;align-items:stretch;gap:12px}#group-form .form-field{width:100%}
  .texture-tools{gap:8px}.texture-tools>span{font-size:12px}
  .texture-filters{grid-template-columns:minmax(0,1fr);gap:12px}
  .texture-match-settings summary{min-height:44px;display:flex;align-items:center}
  .texture-match-settings label{display:flex;margin-right:0;line-height:1.5;min-height:44px;gap:10px}
  .texture-match-settings select{margin-left:auto}
  .texture-pagination{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .texture-pagination>span{grid-column:1/-1;line-height:1.5;margin-bottom:4px}
  .texture-row{grid-template-columns:48px minmax(0,1fr);gap:12px;padding:12px}
  .texture-swatch{width:48px;height:48px}
  .texture-row>div{min-width:0}.texture-row>div:last-child{grid-column:1/-1}
  .texture-name{font-size:13px}.texture-status{font-size:12px}
  .texture-row .text-button{min-height:44px;font-size:12px;margin-top:0}
  .texture-select{min-height:44px;width:100%;max-width:100%}
  .texture-scale{font-size:12px;gap:8px;flex-wrap:wrap}.texture-scale input{width:84px;min-height:44px}
  .texture-rotation{gap:8px;flex-wrap:wrap}.texture-rotation .button{white-space:normal}
  .texture-footer{position:sticky;bottom:-16px;border-top:1px solid var(--line);margin-top:20px;padding:12px 0 max(12px,env(safe-area-inset-bottom));background:white;z-index:2}
  .texture-footer-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .texture-footer-actions>span{display:none}.texture-footer-actions .button{width:100%;min-height:48px}
  .texture-picker-tools{flex-direction:column;align-items:stretch}
  .texture-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}

  .drawing-dialog,.assembly-dialog,.overall-dialog,.components-dialog{width:100%;height:100dvh;max-width:100vw;max-height:100dvh;border:0;border-radius:0;margin:0;padding-bottom:env(safe-area-inset-bottom)}
  .drawing-header>div,.assembly-header>div,.overall-header>div,.components-header>div{min-width:0}
  .drawing-header,.assembly-header,.overall-header,.components-header{gap:12px;align-items:flex-start}
  .assembly-header,.overall-header,.components-header{padding:14px max(16px,env(safe-area-inset-right)) 14px max(16px,env(safe-area-inset-left))}
  .drawing-header h2,.assembly-header h2,.overall-header h2,.components-header h2{font-size:18px;line-height:1.35;overflow-wrap:anywhere}
  .drawing-header>.button,.assembly-header>.button,.overall-header>.button,.components-header>.button{font-size:12px;min-height:44px;padding:10px 12px;flex-shrink:0}
  .drawing-dialog{padding:16px}.drawing-header{top:-16px}
  .drawing-part-picker{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:16px}
  .drawing-part-picker select{min-width:0;width:100%}
  .drawing-sides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:8px}
  .drawing-sides .button{padding:10px 4px;font-size:12px}
  .drawing-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:8px}
  .drawing-xray-toggle{width:100%;grid-column:1/-1}
  .drawing-actions .button{font-size:12px;min-height:48px;padding:10px}
  .drawing-zoom .button{min-width:44px}.drawing-operations{max-height:240px}
  .assembly-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px 16px}
  .assembly-toolbar>.button{width:100%;font-size:12px;padding:10px 8px}
  .assembly-range{grid-column:1/-1;min-width:0;width:100%;margin:6px 0;gap:4px 12px}
  .assembly-range input{min-height:44px}
  .assembly-xray-toggle{grid-column:1/-1;justify-content:center}
  .assembly-visibility-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px 16px}
  .assembly-visibility-tools>.button{min-height:48px;font-size:12px;padding:10px}
  .assembly-visibility-tools>span{grid-column:1/-1;line-height:1.5}
  .assembly-canvas{height:clamp(320px,53svh,540px)}
  .assembly-view-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px 16px}
  .assembly-view-tools .button{padding:10px 2px;font-size:12px;width:100%}
  .assembly-view-tools label{grid-column:span 2;font-size:12px;line-height:1.4;border:1px solid var(--line);border-radius:8px;background:white;padding:8px}
  .assembly-hide-actions{display:grid;grid-template-columns:1fr 1fr;left:12px;right:12px;width:auto;max-width:none;gap:8px}
  .assembly-hide-actions>span{grid-column:1/-1}
  .assembly-item-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .overall-toolbar{display:block;padding:12px 16px}
  .overall-views{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
  .overall-toolbar>.button{width:100%;margin-top:12px}
  .overall-options{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:12px 16px}
  .overall-options select{width:100%;max-width:100%;min-width:0}
  .overall-zoom{margin:8px 0 0;width:100%}.overall-zoom .button{min-width:44px}
  .overall-caption{margin:12px 16px}.overall-sheets{padding:0 12px}
  .components-header h2{font-size:17px}.components-content{padding:16px}
  .components-filters{grid-template-columns:minmax(0,1fr)}
  .components-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:8px}
  .components-tools:has(#components-add[hidden]) #components-refresh{grid-column:1/-1}
  .components-form-actions,.components-row-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .components-tools>.button{width:100%}.components-pagination{gap:8px;flex-wrap:wrap}
  .toast{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));max-width:none;width:auto;padding:10px;gap:8px}
}
@media(max-width:600px){.model-grid{grid-template-columns:minmax(0,1fr)}.card-picture{height:220px}}
@media(max-width:900px) and (max-height:500px){
  .workspace>.viewport{height:calc(100svh - 68px);min-height:280px}
  .view-heading .eyebrow{display:none}
  .viewport>.views{left:50%;right:auto;width:380px;max-width:calc(100% - 128px);transform:translateX(-50%)}
  .zoom-tools{bottom:12px}.panel-selection-tools,.block-selection-tools{left:16px;right:76px;bottom:86px}
  .drawing-header,.assembly-header,.overall-header,.components-header{position:static}
}
@media(min-width:600px) and (max-width:900px) and (max-height:500px){
  .header:has(#public-actions:not([hidden])){grid-template-columns:auto minmax(0,1fr)}
  .header .public-header{grid-column:2;grid-row:1;max-width:440px;justify-self:end}
}