.ox-doc-preview {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--ox-sunken);
}
              
                
.ox-doc-preview[hidden] { display: none; }

.ox-doc-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line);
                 
              
  flex: 0 0 auto;
  min-height: var(--hit);
}
.ox-doc-preview-name {
  font-size: var(--ox-t-sm);
  font-weight: 600;
  color: var(--fg);
              
            
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.ox-doc-preview-toggle {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--bg2);
  color: var(--fg2);
  border-radius: var(--rad-sm);
  padding: var(--sp-1) var(--sp-2);
  font: inherit;
  font-size: var(--ox-t-2xs);
  cursor: pointer;
                   
                   
                
                
  display: none;
}
.ox-doc-preview-toggle:hover { background: var(--ox-hover); }

             
                  
                
                
              
.ox-doc-preview-save {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--bg2);
  color: var(--fg2);
  border-radius: var(--rad-sm);
  padding: var(--sp-1) var(--sp-2);
  font: inherit;
  font-size: var(--ox-t-2xs);
  cursor: pointer;
}
.ox-doc-preview-save:hover:not(:disabled) { background: var(--ox-hover); }
               
                
               
        
.ox-doc-preview-save:disabled { opacity: 0.5; cursor: default; }

            
              
              
          
.ox-doc-preview-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
                  
                
                
  overscroll-behavior: contain;
  padding: var(--sp-2);
}

            
.ox-spreadsheet-frame {
  display: block;
  width: 100%;
  min-height: 32rem;
  height: 100%;
  border: 0;
  background: var(--bg);
}
.ox-spreadsheet-unavailable {
  display: grid;
  gap: var(--sp-3);
  place-content: center;
  min-height: 12rem;
  color: var(--fg2);
  text-align: center;
}
.ox-spreadsheet-unavailable p { margin: 0; }
.ox-spreadsheet-unavailable button {
  min-height: var(--hit);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg2);
  color: var(--fg);
  font: inherit;
  cursor: pointer;
}

.ox-doc-preview-grid {
  border-collapse: collapse;
  font-size: var(--ox-t-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.ox-cell {
  border: 1px solid var(--line);
  padding: var(--sp-1) var(--sp-2);
                
                
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}
               
                
      
.ox-doc-preview-row:first-child .ox-cell {
  background: var(--bg2);
  font-weight: 600;
  position: sticky;
  top: 0;
}

         
              
               
              
                
                 

               
              
.ox-doc-preview-error,
.ox-doc-preview-empty {
  margin: 0;
  padding: var(--sp-3);
  font-size: var(--ox-t-xs);
  color: var(--fg2);
}
.ox-doc-preview-error { color: var(--warn); }

            
                 
      

          
           
         
                  
                 
        
@media (max-width: 59.999rem) {
  .ox-doc-preview {
    position: sticky;
    bottom: 0;
    z-index: 2;
    border-top: 1px solid var(--line);
    box-shadow: var(--ox-lift);
    padding-bottom: var(--ox-kb-inset, 0px);
  }
  .ox-doc-preview-toggle { display: inline-flex; align-items: center; }
                 
                 
         
  .ox-doc-preview .ox-doc-preview-body { display: none; }
              
                   
                 
  .ox-doc-preview[data-expanded="1"] .ox-doc-preview-body { display: block; max-height: 50svh; }
}